/*
Theme Name: Rate Tracker
Theme URI: https://ratetracker.io/
Author: Nic Graham
Description: Custom theme for Rate Tracker — merchant services, POS systems, business funding, and financial health software.
Version: 3.4.4
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rate-tracker
*/

/* ==========================================================================
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   To rebrand the whole site, change --color-primary and --color-primary-hover.
   Every accent (buttons, links, icons, underline, focus rings, tints) is
   derived from these values. Nothing below this block hardcodes a color.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand ---------------------------------------------------------------- */
  --color-primary: #45b72e;
  --color-primary-hover: #378527;
  --color-button-text: #fafafa;
  --color-blue: #147eff;
  --color-yellow: #f9d332;
  --color-dark-yellow: #ffb932;

  /* Neutral palette ------------------------------------------------------ */
  --color-black: #212121;
  --color-white: #fafafa;
  --color-gray-50: #f7f8f7;
  --color-gray-100: #f0f1f0;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-500: #6b7280;
  --color-gray-600: #5f6368;
  --color-gray-700: #374151;

  /* Semantic roles (components use these, never the palette directly) ---- */
  --color-background: var(--color-white);
  --color-background-secondary: var(--color-gray-50);
  --color-surface: var(--color-white);
  --color-surface-muted: var(--color-gray-100);
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-success: var(--color-primary);

  /* Brand pillars — mirrors the logo's Payments / Capital / Profit bar ---- */
  /* Used sparingly as secondary accents; green stays the primary accent.    */
  --color-payments: var(--color-blue);
  --color-capital: var(--color-yellow);
  --color-capital-strong: var(--color-dark-yellow); /* yellow that holds up on white */
  --color-profit: var(--color-primary);

  /* Derived accent shades — follow --color-primary automatically --------- */
  --color-primary-text: color-mix(
    in srgb,
    var(--color-primary) 72%,
    var(--color-black)
  ); /* AA-contrast accent for small text */
  --color-primary-soft: color-mix(
    in srgb,
    var(--color-primary) 9%,
    var(--color-surface)
  );
  --color-primary-muted: color-mix(
    in srgb,
    var(--color-primary) 24%,
    var(--color-surface)
  );
  --color-focus: var(--color-primary);

  /* Inverse (dark) sections ---------------------------------------------- */
  --color-inverse-background: var(--color-black);
  --color-inverse-surface: color-mix(
    in srgb,
    var(--color-white) 7%,
    var(--color-black)
  );
  --color-inverse-text: var(--color-white);
  --color-inverse-text-secondary: color-mix(
    in srgb,
    var(--color-white) 66%,
    var(--color-black)
  );
  --color-inverse-text-tertiary: color-mix(
    in srgb,
    var(--color-white) 46%,
    var(--color-black)
  );
  --color-inverse-border: color-mix(
    in srgb,
    var(--color-white) 13%,
    var(--color-black)
  );
  --color-inverse-accent: color-mix(
    in srgb,
    var(--color-primary) 75%,
    var(--color-white)
  );

  /* Typography ------------------------------------------------------------ */
  --font-fallback:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-primary: "Poppins", var(--font-fallback); /* headings, wordmark, buttons, nav, labels */
  --font-secondary: "Open Sans", var(--font-fallback); /* body copy */
  --font-brand: var(--font-primary);
  --text-hero: clamp(2.625rem, 1.5rem + 4vw, 4.75rem); /* 42 → 76px */
  --text-h2: clamp(2rem, 1.45rem + 1.9vw, 3.125rem); /* 32 → 50px */
  --text-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); /* 20 → 24px */
  --text-subtitle: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); /* 20 → 28px */
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17 → 20px */
  --text-body: 1.0625rem; /* 17px */
  --text-sm: 0.9375rem; /* 15px */
  --text-xs: 0.8125rem; /* 13px */
  --text-2xs: 0.75rem; /* 12px */
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.65;
  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-caps: 0.08em;

  /* Spacing --------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-space: clamp(4.5rem, 3rem + 5vw, 7.5rem);

  /* Shape & depth --------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-color: var(--color-black);
  --shadow-sm:
    0 1px 2px color-mix(in srgb, var(--shadow-color) 5%, transparent),
    0 2px 8px color-mix(in srgb, var(--shadow-color) 4%, transparent);
  --shadow-md:
    0 1px 2px color-mix(in srgb, var(--shadow-color) 4%, transparent),
    0 12px 32px -8px color-mix(in srgb, var(--shadow-color) 10%, transparent);
  --shadow-lg:
    0 2px 4px color-mix(in srgb, var(--shadow-color) 4%, transparent),
    0 24px 56px -16px color-mix(in srgb, var(--shadow-color) 16%, transparent);

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-reveal: 650ms;

  /* Layout ---------------------------------------------------------------- */
  --container-width: 1200px;
  --container-narrow: 760px;
  --container-gutter: clamp(1rem, 4vw, 2rem);
  --navbar-height: 76px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

/* UI text that uses the primary (Poppins) face; everything else is Open Sans. */
.btn,
.eyebrow,
.link-arrow,
.navbar__menu a,
.hero__tagline,
.hero__subtitle,
.integrations__title,
.footer-col__title,
.pagination .page-numbers {
  font-family: var(--font-primary);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--color-primary-text);
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease);
}

a:hover {
  color: var(--color-text);
}

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

[id] {
  scroll-margin-top: calc(var(--navbar-height) + var(--space-5));
}

::selection {
  background: var(--color-primary-muted);
  color: var(--color-text);
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: min(var(--container-width), 100% - var(--container-gutter) * 2);
  margin-inline: auto;
}

.container--narrow {
  width: min(var(--container-narrow), 100% - var(--container-gutter) * 2);
}

.section {
  padding-block: var(--section-space);
}

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

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Grid children shrink below their content width, so a long label can't
   widen the page. */
.grid > * {
  min-width: 0;
}

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

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   4. TYPOGRAPHY PRIMITIVES
   ========================================================================== */

.eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: 1.4;
  text-transform: uppercase;
}

.section-title {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.section-lead {
  max-width: 40rem;
  color: var(--color-text-secondary);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.section-header {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

.section-header--center .section-lead {
  margin-inline: auto;
}

.section-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}

.section-header-row .section-header {
  margin-bottom: 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  z-index: 1000;
  top: var(--space-3);
  left: var(--space-3);
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-4);
  clip: auto;
  clip-path: none;
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-background);
  font-weight: 600;
  text-decoration: none;
}

/* ==========================================================================
   5. UI PRIMITIVES — Button, Card, Icon tile, Link
   ========================================================================== */

/* Button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.6875rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--duration) var(--ease);
}

.btn:hover .icon-arrow {
  transform: translateX(3px);
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: 52px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-button-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-button-text);
}

.btn--secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.btn--secondary:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn--secondary .icon {
  color: var(--color-primary-text);
}

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

.btn--inverse:hover {
  border-color: var(--color-inverse-text-tertiary);
  background: var(--color-inverse-surface);
  color: var(--color-inverse-text);
}

/* Card */

.card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.card--interactive {
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.card--interactive:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.card__text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.stretched-link::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}

/* Icon tile */

.icon-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-inverse-accent);
}

.icon-tile .icon {
  width: 22px;
  height: 22px;
}

/* Arrow link */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.link-arrow .icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary-text);
  transition: transform var(--duration) var(--ease);
}

.link-arrow:hover,
.card--interactive:hover .link-arrow {
  color: var(--color-text);
}

.link-arrow:hover .icon,
.card--interactive:hover .link-arrow .icon {
  transform: translateX(4px);
}

/* ==========================================================================
   6. NAVBAR
   ========================================================================== */

.navbar {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  transition: border-color var(--duration) var(--ease);
}

.navbar.is-scrolled {
  border-bottom-color: var(--color-border);
}

.admin-bar .navbar {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .navbar {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .navbar {
    top: 0;
  }
}

.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--navbar-height);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

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

.brand__logo {
  width: auto;
  height: 44px;
}

/* Header mark (no wordmark): square, so a little shorter than the old lockup. */
.brand__logo--mark {
  height: 38px;
}

.custom-logo {
  width: auto;
  max-height: 44px;
}

.navbar__nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-5);
}

.navbar__menu {
  display: flex;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.navbar__menu > li {
  position: relative;
}

.navbar__menu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.navbar__menu a:hover,
.navbar__menu .current-menu-item > a,
.navbar__menu .current-menu-ancestor > a {
  color: var(--color-text);
}

.navbar__menu a:hover {
  background: var(--color-background-secondary);
}

/* Dropdown caret */
.navbar__menu .menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease);
}

.navbar__menu .menu-item-has-children.is-open > a::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

/* Dropdown panel */
.navbar__menu .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1181px) {
  .navbar__menu .sub-menu {
    position: absolute;
    z-index: 10;
    top: calc(100% + var(--space-2));
    left: 50%;
    min-width: 248px;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition:
      opacity var(--duration) var(--ease),
      transform var(--duration) var(--ease),
      visibility 0s linear var(--duration);
  }

  /* Bridge the gap so the panel doesn't close while the pointer moves onto it. */
  .navbar__menu .sub-menu::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--space-3);
  }

  .navbar__menu li:hover > .sub-menu,
  .navbar__menu li:focus-within > .sub-menu,
  .navbar__menu li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition:
      opacity var(--duration) var(--ease),
      transform var(--duration) var(--ease),
      visibility 0s;
  }

  .navbar__menu .sub-menu a {
    padding: var(--space-3);
    color: var(--color-text);
  }

  .navbar__menu .sub-menu a:hover {
    color: var(--color-primary-text);
  }
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.navbar__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.navbar__toggle-bar,
.navbar__toggle-bar::before,
.navbar__toggle-bar::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  margin-left: -9px;
  border-radius: 2px;
  background: var(--color-text);
  transition:
    transform var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.navbar__toggle-bar {
  top: 50%;
}

.navbar__toggle-bar::before,
.navbar__toggle-bar::after {
  content: "";
  left: 0;
  margin-left: 0;
}

.navbar__toggle-bar::before {
  top: -6px;
}

.navbar__toggle-bar::after {
  top: 6px;
}

.menu-open .navbar__toggle-bar {
  background: transparent;
}

.menu-open .navbar__toggle-bar::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-open .navbar__toggle-bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1180px) {
  .navbar__toggle {
    display: block;
  }

  .navbar__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    height: calc(100dvh - var(--navbar-height));
    padding: var(--space-2) var(--container-gutter)
      calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--color-border);
    background: var(--color-background);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--duration) var(--ease),
      transform var(--duration) var(--ease),
      visibility 0s linear var(--duration);
  }

  .menu-open .navbar__nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--duration) var(--ease),
      transform var(--duration) var(--ease),
      visibility 0s;
  }

  .navbar__menu {
    flex-direction: column;
    margin: 0;
  }

  .navbar__menu > li {
    border-bottom: 1px solid var(--color-border);
  }

  .navbar__menu a {
    justify-content: space-between;
    padding: var(--space-4) 0;
    border-radius: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
  }

  .navbar__menu a:hover {
    background: none;
    color: var(--color-primary-text);
  }

  .navbar__menu .sub-menu {
    display: none;
    padding: 0 0 var(--space-3) var(--space-4);
  }

  .navbar__menu li.is-open > .sub-menu {
    display: block;
  }

  .navbar__menu .sub-menu a {
    padding: var(--space-3) 0;
    color: var(--color-text-secondary);
    font-size: 1rem;
    font-weight: 500;
  }

  .navbar__actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: auto;
  }

  .navbar__actions .btn {
    min-height: 52px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem)
    clamp(4rem, 3rem + 4vw, 6.5rem);
  text-align: center;
}

/*
 * Dot grid. ::before is the gray grid, ::after is the same grid in the primary
 * color with a soft glow. Both layers share the 24px grid so the dots line up.
 * The gray grid is always visible, fading toward the edges.
 * Mouse devices: the green layer is revealed in a spotlight that follows the
 * cursor (--mx / --my, eased by motion.js). Touch devices get the gray grid only.
 */
.hero {
  --dot-grid: 24px;
  --spot-green: 260px;
  --dot-green: color-mix(
    in srgb,
    var(--color-primary) 55%,
    var(--color-white)
  ); /* light tint, not the full brand green */
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-size: var(--dot-grid) var(--dot-grid);
  pointer-events: none;
}

.hero::before {
  background-image: radial-gradient(
    var(--color-border-strong) 1px,
    transparent 1.5px
  );
  -webkit-mask-image: radial-gradient(
    ellipse 65% 60% at 50% 35%,
    var(--color-black) 10%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 65% 60% at 50% 35%,
    var(--color-black) 10%,
    transparent 75%
  );
  opacity: 0.55;
}

.hero::after {
  background-image: radial-gradient(
    var(--dot-green) 1.25px,
    color-mix(in srgb, var(--dot-green) 30%, transparent) 2.25px,
    transparent 4px
  );
  opacity: 0;
}

/* Soft bloom under the cursor, beneath the green dots. */
.hero__glow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 560px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-primary) 11%, transparent),
    color-mix(in srgb, var(--color-primary) 4%, transparent) 55%,
    transparent
  );
  opacity: 0;
  pointer-events: none;
  translate: calc(var(--mx, 0px) - 280px) calc(var(--my, 0px) - 280px);
  transition: opacity 500ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .hero::after {
    opacity: 0;
    transition: opacity 400ms var(--ease);
    -webkit-mask-image: radial-gradient(
      circle var(--spot-green) at var(--mx, 50%) var(--my, 50%),
      var(--color-black),
      transparent 100%
    );
    mask-image: radial-gradient(
      circle var(--spot-green) at var(--mx, 50%) var(--my, 50%),
      var(--color-black),
      transparent 100%
    );
  }

  .hero.is-spotlit::after {
    opacity: 0.75;
  }

  .hero.is-spotlit .hero__glow {
    opacity: 1;
  }
}

/* Ambient pillar-coloured glows: the deepest parallax layer, drifting slowly. */
.hero__ambient {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  translate: calc(var(--px, 0) * -26px)
    calc(var(--py, 0) * -18px - var(--scroll, 0) * 0.1px);
}

.hero__ambient-blob {
  position: absolute;
  width: clamp(320px, 42vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--blob) var(--blob-strength, 11%), transparent),
    transparent
  );
  animation: hero-drift var(--drift, 22s) ease-in-out infinite alternate;
}

.hero__ambient-blob--payments {
  --blob: var(--color-payments);
  --drift: 26s;
  top: -18%;
  left: -8%;
}

.hero__ambient-blob--capital {
  --blob: var(--color-capital);
  --blob-strength: 10%;
  --drift: 31s;
  top: -22%;
  right: -10%;
  animation-delay: -9s;
}

.hero__ambient-blob--profit {
  --blob: var(--color-profit);
  --blob-strength: 10%;
  --drift: 24s;
  bottom: -30%;
  left: 30%;
  animation-delay: -15s;
}

@keyframes hero-drift {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(6%, 9%) scale(1.12);
  }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.hero__tagline-mark {
  width: auto;
  height: 18px;
  margin-right: var(--space-1);
}

/* Each pillar gets a colored dot, matching the logo's tri-color bar. */
.hero__pillar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero__pillar + .hero__pillar {
  margin-left: var(--space-2);
}

.hero__pillar::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pillar-color);
}

.hero__pillar--payments {
  --pillar-color: var(--color-payments);
  --dot-index: 0;
}

.hero__pillar--capital {
  --pillar-color: var(--color-capital-strong);
  --dot-index: 1;
}

.hero__pillar--profit {
  --pillar-color: var(--color-profit);
  --dot-index: 2;
}

/* The dots light up one after another once the pill has landed. */
html.js .hero--front .hero__pillar::before {
  transform: scale(0);
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1)
    calc(var(--reveal-delay, 0ms) + 420ms + var(--dot-index) * 110ms);
}

html.js .hero--front .hero__tagline.is-visible .hero__pillar::before {
  transform: scale(1);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hero__highlight {
  position: relative;
  display: inline-block;
  color: var(--color-primary);
}

/* Keep the highlighted phrase on one line wherever it fits; phones may wrap it. */
@media (min-width: 768px) {
  .hero__highlight {
    white-space: nowrap;
  }
}

/* Masked words: each word rises out of its own clip box and sharpens. */
.hero__word {
  display: inline-block;
  clip-path: inset(-0.22em -0.12em -0.26em);
}

.hero__word-inner {
  display: inline-block;
}

html.js .hero__title--split[data-reveal] {
  opacity: 1;
  translate: none;
}

html.js .hero__title--split .hero__word-inner {
  opacity: 0;
  transform: translateY(1.3em);
  filter: blur(8px);
  transition:
    opacity 360ms var(--ease) calc(var(--reveal-delay, 0ms) + var(--word) * 90ms),
    transform 1000ms var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--word) * 90ms),
    filter 800ms var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--word) * 90ms + 120ms);
}

html.js .hero__title--split.is-visible .hero__word-inner {
  opacity: 1;
  transform: none;
  filter: none;
}

.hero__underline {
  position: absolute;
  bottom: -0.16em;
  left: 0;
  width: 100%;
  height: 0.32em;
  overflow: visible;
}

.hero__underline path {
  fill: none;
  stroke: url(#hero-underline-gradient);
  stroke-width: 5px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero__subtitle {
  margin-top: var(--space-6);
  color: var(--color-text);
  font-size: var(--text-subtitle);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: 1.3;
}

.hero__lead {
  max-width: 38rem;
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-lead);
  line-height: 1.6;
}

/* Hero copy sharpens as it rises (the generic reveal only fades and lifts). */
html.js .hero--front .hero__subtitle[data-reveal],
html.js .hero--front .hero__lead[data-reveal],
html.js .hero--front .hero__actions[data-reveal] {
  filter: blur(6px);
  transition:
    opacity var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    filter 700ms var(--ease-out) calc(var(--reveal-delay, 0ms) + 60ms);
}

html.js .hero--front .hero__subtitle[data-reveal].is-visible,
html.js .hero--front .hero__lead[data-reveal].is-visible,
html.js .hero--front .hero__actions[data-reveal].is-visible {
  filter: none;
}

/* Keep the hero copy on its own compositor layer after it lands. Otherwise the
   browser re-rasterizes the text the moment the rise/blur ends (grayscale to
   ClearType antialiasing, snapped to the pixel grid on Windows), which reads as
   a tiny skip at the very end of the animation. */
html.js .hero__title--split .hero__word-inner,
html.js .hero--front .hero__subtitle[data-reveal],
html.js .hero--front .hero__lead[data-reveal],
html.js .hero--front .hero__actions[data-reveal] {
  will-change: transform;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* Magnetic buttons: motion.js eases `translate` toward the cursor. */
.hero--front .hero__actions .btn {
  will-change: translate;
}

/* Primary CTA: a light glint sweeps across once it lands, and again on hover. */
.hero__cta {
  position: relative;
  overflow: hidden;
}

.hero__cta-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
}

.hero__cta::after {
  content: "";
  position: absolute;
  inset: -10% -40%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    color-mix(in srgb, var(--color-white) 34%, transparent) 50%,
    transparent 62%
  );
  translate: -100% 0;
  pointer-events: none;
}

html.js .hero__actions.is-visible .hero__cta::after {
  animation: hero-shine 1300ms var(--ease) calc(var(--reveal-delay, 0ms) + 700ms) 1;
}

.hero__cta:hover::after {
  animation: hero-shine 900ms var(--ease) 1;
}

@keyframes hero-shine {
  to {
    translate: 100% 0;
  }
}

@media (max-width: 640px) {
  .hero__actions {
    align-self: stretch;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   Hero effects: rate lines, live marker, pulses, tri-color headline sweep.
   -------------------------------------------------------------------------- */

/* Three trend lines in the pillar colors, drawn behind the copy. The mask
   clears an oval behind the text column so the copy always stays readable.
   --px/--py (cursor) and --scroll (page) are set by motion.js. */
.hero__lines {
  position: absolute;
  z-index: -1;
  inset: 8% -4% 0;
  pointer-events: none;
  translate: calc(var(--px, 0) * -14px)
    calc(var(--py, 0) * -10px - var(--scroll, 0) * 0.28px);
  opacity: calc(1 - var(--scroll, 0) * 0.0018);
  -webkit-mask-image: radial-gradient(
    ellipse 42% 38% at 50% 42%,
    transparent 30%,
    var(--color-black) 100%
  );
  mask-image: radial-gradient(
    ellipse 42% 38% at 50% 42%,
    transparent 30%,
    var(--color-black) 100%
  );
}

.hero__lines svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The whole chart breathes very slowly so it never reads as a static image. */
html.js .hero__chart {
  animation: hero-breathe 9s ease-in-out infinite alternate;
}

@keyframes hero-breathe {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-9px);
  }
}

.hero__line,
.hero__pulse,
.hero__now,
.hero__ring,
.hero__marker {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero__line {
  stroke-width: 2px;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.hero__line--payments {
  stroke: var(--color-payments);
  opacity: 0.45;
}

.hero__line--capital {
  stroke: var(--color-capital-strong);
  opacity: 0.45;
}

.hero__line--profit {
  stroke: var(--color-profit);
  stroke-width: 3px;
  opacity: 0.85;
}

.hero__area {
  fill: url(#hero-area);
}

/* Dashed "now" line dropping from the live marker, like a chart cursor. */
.hero__now {
  stroke: var(--color-profit);
  stroke-width: 1px;
  stroke-dasharray: 3 7;
  opacity: 0.3;
}

/* Short bright dashes that keep travelling along the lines. */
.hero__pulse {
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 1;
  opacity: 0;
}

.hero__pulse--profit {
  stroke: var(--color-primary);
  stroke-width: 4px;
  filter: drop-shadow(0 0 6px var(--color-primary));
}

.hero__pulse--payments {
  stroke: var(--color-payments);
  stroke-width: 3px;
  stroke-dasharray: 0.04 0.96;
  filter: drop-shadow(0 0 5px var(--color-payments));
}

/* Live marker at the end of the green line: white halo, green core, ripple.
   Zero-length round-capped paths stay perfectly round because the stroke is
   non-scaling even though the SVG itself is stretched. */
.hero__marker--halo {
  stroke: var(--color-surface);
  stroke-width: 16px;
}

.hero__marker--core {
  stroke: var(--color-primary);
  stroke-width: 9px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-primary) 70%, transparent));
}

.hero__ring {
  stroke: var(--color-primary);
  stroke-width: 9px;
  opacity: 0;
}

html.js .hero__line {
  stroke-dashoffset: 1;
  animation: hero-draw 2200ms var(--ease-out) forwards;
  animation-delay: var(--line-delay, 200ms);
}

html.js .hero__line--capital {
  --line-delay: 380ms;
}

html.js .hero__line--profit {
  --line-delay: 560ms;
}

html.js .hero__area {
  opacity: 0;
  animation: hero-fade 1400ms var(--ease-out) 1500ms forwards;
}

html.js .hero__now {
  opacity: 0;
  animation: hero-now 900ms var(--ease-out) 2500ms forwards;
}

html.js .hero__pulse--profit {
  animation:
    hero-fade 600ms var(--ease) 3000ms forwards,
    hero-pulse 4.5s linear 3000ms infinite;
}

html.js .hero__pulse--payments {
  animation:
    hero-fade-half 600ms var(--ease) 3600ms forwards,
    hero-pulse 7s linear 3600ms infinite;
}

html.js .hero__marker {
  stroke-width: 0;
  animation: hero-marker-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 2550ms forwards;
}

html.js .hero__marker--halo {
  --marker-width: 16px;
}

html.js .hero__marker--core {
  --marker-width: 9px;
}

html.js .hero__ring {
  animation: hero-ring 2400ms var(--ease-out) 2900ms infinite;
}

@keyframes hero-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hero-fade {
  to {
    opacity: 1;
  }
}

@keyframes hero-fade-half {
  to {
    opacity: 0.6;
  }
}

@keyframes hero-now {
  to {
    opacity: 0.3;
  }
}

@keyframes hero-pulse {
  from {
    stroke-dashoffset: 1.05;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hero-marker-pop {
  to {
    stroke-width: var(--marker-width);
  }
}

@keyframes hero-ring {
  0% {
    stroke-width: 9px;
    opacity: 0.55;
  }

  70%,
  100% {
    stroke-width: 54px;
    opacity: 0;
  }
}

/* Highlighted phrase sweeps through Payments → Capital → Profit, settling on green. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html.js .hero__highlight-text {
    background-image: linear-gradient(
      90deg,
      var(--color-payments) 0%,
      var(--color-capital-strong) 25%,
      var(--color-primary) 50%,
      var(--color-primary) 100%
    );
    background-position: 0% 0;
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  html.js .hero__title.is-visible .hero__highlight-text {
    animation: hero-sweep 1800ms var(--ease-out) forwards;
    animation-delay: calc(var(--reveal-delay, 0ms) + 650ms);
  }
}

@keyframes hero-sweep {
  to {
    background-position: 100% 0;
  }
}

@media (max-width: 640px) {
  .hero__lines {
    inset: 30% -20% 0;
  }
}

/* --------------------------------------------------------------------------
   First-visit intro. Only rendered while <html> has .rt-intro (set in <head>
   for new visitors). The build-up is a CSS timeline; motion.js lifts the
   curtain (.rt-intro-lift), flies the mark into the hero tagline, then clears
   .rt-intro. A CSS fallback lifts the curtain if motion.js never runs.
   -------------------------------------------------------------------------- */

.rt-intro-screen {
  display: none;
}

html.rt-intro .rt-intro-screen {
  display: grid;
  position: fixed;
  z-index: 100000;
  inset: 0;
  place-items: center;
  cursor: pointer;
}

.rt-intro-screen__curtain {
  position: absolute;
  inset: 0;
  background: var(--color-background);
}

.rt-intro-screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: min(320px, 70vw);
}

.rt-intro-screen__mark {
  width: auto;
  height: 64px;
  animation: rt-intro-mark 800ms var(--ease-out) both;
}

.rt-intro-screen__bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  position: relative;
  width: 100%;
  height: 6px;
  margin-top: var(--space-6);
}

.rt-intro-screen__seg {
  border-radius: var(--radius-pill);
  background: var(--seg-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--seg-color) 45%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  animation: rt-intro-seg 420ms var(--ease-out) forwards;
}

.rt-intro-screen__seg--payments {
  --seg-color: var(--color-payments);
  animation-delay: 250ms;
}

.rt-intro-screen__seg--capital {
  --seg-color: var(--color-capital);
  animation-delay: 520ms;
}

.rt-intro-screen__seg--profit {
  --seg-color: var(--color-profit);
  animation-delay: 790ms;
}

/* A glint runs the full bar once all three segments are charged. */
.rt-intro-screen__bar::after {
  content: "";
  position: absolute;
  inset: -4px 0;
  background: linear-gradient(
    90deg,
    transparent 30%,
    color-mix(in srgb, var(--color-white) 75%, transparent) 50%,
    transparent 70%
  );
  translate: -100% 0;
  animation: rt-intro-glint 550ms var(--ease) 1050ms forwards;
}

.rt-intro-screen__labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-align: center;
  text-transform: uppercase;
}

.rt-intro-screen__labels span {
  opacity: 0;
  animation: rt-intro-label 360ms var(--ease-out) forwards;
}

.rt-intro-screen__labels span:nth-child(1) {
  animation-delay: 330ms;
}

.rt-intro-screen__labels span:nth-child(2) {
  animation-delay: 600ms;
}

.rt-intro-screen__labels span:nth-child(3) {
  animation-delay: 870ms;
}

/* Lift: curtain wipes up, bar and labels fade, the mark flies (motion.js). */
html.rt-intro-lift .rt-intro-screen {
  cursor: default;
  pointer-events: none;
}

html.rt-intro-lift .rt-intro-screen__curtain {
  animation: rt-intro-out 700ms var(--ease-out) forwards;
}

html.rt-intro-lift .rt-intro-screen__bar,
html.rt-intro-lift .rt-intro-screen__labels {
  animation: rt-intro-fade-out 150ms var(--ease) forwards;
}

html.rt-intro-lift--fast .rt-intro-screen__curtain {
  animation-duration: 450ms;
}

/* The flying mark becomes the pill's mark on landing. */
html.rt-intro-flight .hero__tagline-mark {
  opacity: 0;
}

/* Hero waits behind the curtain: the pill holds its final position (so the mark
   has a fixed target) and the chart stays paused until the lift. */
html.rt-intro .hero--front .hero__tagline[data-reveal] {
  translate: none;
}

html.rt-intro:not(.rt-intro-lift) .hero__chart,
html.rt-intro:not(.rt-intro-lift) .hero__chart path {
  animation-play-state: paused;
}

/* No motion.js: the curtain still lifts on its own. */
html.rt-intro:not(.motion-ready) .rt-intro-screen {
  animation: rt-intro-out 700ms var(--ease-out) 3200ms forwards;
}

@keyframes rt-intro-mark {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.86);
    filter: blur(10px);
  }
}

@keyframes rt-intro-seg {
  to {
    transform: scaleX(1);
  }
}

@keyframes rt-intro-glint {
  to {
    translate: 100% 0;
  }
}

@keyframes rt-intro-label {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rt-intro-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes rt-intro-out {
  to {
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
  }
}

/* ==========================================================================
   8. INTEGRATIONS
   ========================================================================== */

.integrations {
  padding-block: 0 clamp(var(--space-8), 7vw, var(--space-9));
}

.integrations__title {
  margin-bottom: var(--space-6);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-align: center;
  text-transform: uppercase;
}

/* Hairline grid: the 1px gaps show the border-colored background through. */
.integrations__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-border);
  list-style: none;
}

.integrations__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  padding: var(--space-5);
  background: var(--color-surface);
}

.integrations__item img {
  width: auto;
  max-width: 76%;
  max-height: 30px;
  filter: grayscale(1);
  opacity: 0.6;
  transition:
    filter var(--duration) var(--ease),
    opacity var(--duration) var(--ease);
}

.integrations__item:hover img {
  filter: none;
  opacity: 1;
}

@media (max-width: 900px) {
  .integrations__item {
    height: 96px;
  }

  .integrations__item img {
    max-height: 26px;
  }
}

@media (max-width: 640px) {
  .integrations__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   9. SERVICES
   ========================================================================== */

/*
 * Each card takes its pillar color: Payments (blue) for processing & POS,
 * Capital (yellow) for funding, Profit (green) for the software.
 * --accent colors the icon on its dark tile; --accent-text is a darker shade
 * that stays legible on white for the arrow and hover border.
 */
.service-card {
  --accent: var(--color-inverse-accent);
  --accent-text: var(--color-primary-text);
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}

.service-card--payments {
  --accent: var(--color-payments);
  --accent-text: color-mix(in srgb, var(--color-payments) 85%, var(--color-black));
}

.service-card--capital {
  --accent: var(--color-capital);
  --accent-text: color-mix(in srgb, var(--color-capital-strong) 70%, var(--color-black));
}

.service-card--profit {
  --accent: var(--color-profit);
  --accent-text: var(--color-primary-text);
}

.service-card .icon-tile {
  color: var(--accent);
}

.service-card .link-arrow .icon {
  color: var(--accent-text);
}

.service-card:hover {
  border-color: color-mix(in srgb, var(--accent-text) 45%, var(--color-border));
}

.service-card .card__text {
  flex: 1;
  margin-bottom: var(--space-6);
  font-size: var(--text-body);
}

/* ==========================================================================
   10. POST CARDS
   ========================================================================== */

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.post-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background-secondary);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}

.post-card:hover .post-card__media img {
  transform: scale(1.03);
}

.post-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.post-card__placeholder img {
  width: auto;
  height: 56px;
  object-fit: contain;
  opacity: 0.9;
}

.post-card:hover .post-card__placeholder img {
  transform: none;
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-5);
}

.post-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.post-card__excerpt {
  flex: 1;
  margin-bottom: var(--space-5);
}

.post-card__excerpt p {
  margin: 0;
}

/* ==========================================================================
   11. ABOUT BAND
   ========================================================================== */

.about {
  position: relative;
  overflow: clip;
  padding-block: var(--section-space);
  background: var(--color-inverse-background);
  color: var(--color-inverse-text);
}

.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(720px, 80%);
  height: 2px;
  /* Tri-color bar from the logo, faded at both ends. */
  background: linear-gradient(
    90deg,
    var(--color-payments) 0 33.33%,
    var(--color-capital) 33.33% 66.66%,
    var(--color-profit) 66.66% 100%
  );
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-black) 20%, var(--color-black) 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--color-black) 20%, var(--color-black) 80%, transparent);
  transform: translateX(-50%);
}

.about__inner {
  max-width: 56rem;
  text-align: center;
}

.about__eyebrow {
  color: var(--color-inverse-accent);
}

.about__text {
  color: var(--color-inverse-text);
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-snug);
}

.about__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.about :focus-visible {
  outline-color: var(--color-inverse-accent);
}

@media (max-width: 640px) {
  .about__actions .btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.site-footer {
  padding-top: clamp(var(--space-8), 7vw, var(--space-9));
  border-top: 1px solid var(--color-inverse-border);
  background: var(--color-inverse-background);
  color: var(--color-inverse-text-secondary);
  font-size: var(--text-sm);
}

.site-footer a {
  color: var(--color-inverse-text-secondary);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-inverse-text);
}

.site-footer :focus-visible {
  outline-color: var(--color-inverse-accent);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: var(--space-8);
}

.brand--footer .brand__logo {
  width: 168px;
  height: auto;
}

.footer-col__title {
  margin-bottom: var(--space-5);
  color: var(--color-inverse-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.contact-list,
.social-links,
.footer-col__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list {
  display: grid;
  gap: var(--space-4);
}

.contact-list li {
  display: flex;
  gap: var(--space-3);
}

.contact-list .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  color: var(--color-inverse-accent);
}

.contact-list address {
  font-style: normal;
}

.social-links {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.social-links:empty {
  display: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-inverse-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.social-links a:hover {
  border-color: var(--color-inverse-accent);
  color: var(--color-inverse-accent);
}

.social-links .icon {
  width: 17px;
  height: 17px;
}

.footer-col__menu {
  columns: 2;
  column-gap: var(--space-6);
}

.footer-col__menu li {
  break-inside: avoid;
  padding-bottom: var(--space-3);
}

.site-footer__cta {
  margin-top: var(--space-4);
}

.site-footer .site-footer__cta,
.site-footer .site-footer__cta:hover {
  color: var(--color-button-text);
}

.site-footer__disclaimer {
  max-width: 62rem;
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-inverse-border);
  color: var(--color-inverse-text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.65;
}

/* The referral-agent disclosure stands as its own block under the description:
   a clear gap and a hairline divider, matching the line above the disclaimer. */
.site-footer__note {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-inverse-border);
}

.site-footer__bottom {
  padding-block: var(--space-5) var(--space-6);
  color: var(--color-inverse-text-tertiary);
  font-size: var(--text-xs);
}

@media (max-width: 960px) {
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   13. BLOG INDEX, POSTS & PAGES (index.php)
   ========================================================================== */

.page-content {
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
}

.page-header {
  margin-bottom: clamp(var(--space-6), 5vw, var(--space-7));
}

.page-title {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.page-thumbnail {
  margin: 0 0 var(--space-7);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.page-thumbnail img {
  width: 100%;
}

.entry-content {
  font-size: 1.125rem;
  line-height: 1.75;
}

.entry-content > * + * {
  margin-top: 1.25em;
}

.entry-content h2,
.entry-content h3 {
  margin-top: 2em;
  letter-spacing: var(--tracking-snug);
}

.entry-content h2 {
  font-size: 1.75rem;
}

.entry-content h3 {
  font-size: 1.375rem;
}

.entry-content img {
  height: auto;
  border-radius: var(--radius-md);
}

/* Editor content can't widen the page on a phone: media scales down, tables
   and code scroll inside their box, long URLs wrap. */
.entry-content,
.prose,
.comment-content {
  overflow-wrap: break-word;
}

.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
  max-width: 100%;
}

.entry-content iframe {
  width: 100%;
}

.entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.entry-content pre {
  overflow-x: auto;
}

.entry-content blockquote {
  margin-inline: 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-primary);
  color: var(--color-text-secondary);
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.25em;
}

.entry-content li + li {
  margin-top: 0.4em;
}

.entry-content li::marker {
  color: var(--color-primary-text);
}

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}

.pagination {
  margin-top: var(--space-7);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.pagination .page-numbers.current {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-background);
}

.pagination a.page-numbers:hover {
  border-color: var(--color-text);
}

/* ==========================================================================
   13b. INNER-PAGE HERO & PAGE HEADS
   ========================================================================== */

.hero--page {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}

.hero--compact {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.hero__title--page {
  max-width: 20ch;
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
}

.hero--page .hero__lead {
  max-width: 44rem;
}

.hero--page .hero__highlight {
  white-space: normal;
}

.hero__tagline .hero__pillar {
  color: var(--color-text);
}

/* Compact head for documents, posts and case studies (no dot grid). */
.page-head {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 0;
}

.page-head .page-title {
  max-width: 24ch;
}

.page-head--blog .page-title {
  max-width: 28ch;
  font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem);
}

.page-head__search {
  max-width: 28rem;
  margin-top: var(--space-6);
}

.page-head + .page-content,
.page-head + .blog-layout {
  padding-top: clamp(var(--space-6), 4vw, var(--space-7));
}

.page-head .eyebrow a {
  color: inherit;
  text-decoration: none;
}

.page-head .eyebrow a:hover {
  color: var(--color-text);
}

.prose {
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.prose > * + * {
  margin-top: 1.1em;
}

/* ==========================================================================
   13c. SHARED SECTION PIECES — actions, split, lists, chips, notes
   ========================================================================== */

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(var(--space-6), 4vw, var(--space-7));
}

.section-actions--left {
  justify-content: flex-start;
}

.section-note {
  margin-top: var(--space-5);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.split .section-title {
  margin-bottom: var(--space-4);
}

.split .section-lead {
  max-width: none;
}

.split__card {
  height: auto;
}

.check-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-body);
}

.check-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.check-list .icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  color: var(--color-primary-text);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

a.chip {
  transition:
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

a.chip:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.chip.is-active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-background);
}

.chips--nav .chip {
  padding: 0.5rem 0.9rem;
  font-size: var(--text-xs);
}

.category-filter {
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-7));
}

/* ==========================================================================
   13d. FEATURE CARDS, STATS, PROCESS
   ========================================================================== */

.feature-card {
  --accent: var(--color-inverse-accent);
  --accent-text: var(--color-primary-text);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
}

.feature-card--payments {
  --accent: var(--color-payments);
  --accent-text: color-mix(in srgb, var(--color-payments) 85%, var(--color-black));
}

.feature-card--capital {
  --accent: var(--color-capital);
  --accent-text: color-mix(in srgb, var(--color-capital-strong) 70%, var(--color-black));
}

.feature-card--profit {
  --accent: var(--color-profit);
}

.feature-card .icon-tile {
  margin-bottom: var(--space-5);
  color: var(--accent);
}

.feature-card .eyebrow {
  margin-bottom: var(--space-2);
  color: var(--accent-text);
}

.feature-card .card__title {
  margin-bottom: var(--space-2);
  font-size: 1.1875rem;
}

.feature-card .card__text {
  flex: 1;
}

.feature-card .link-arrow {
  margin-top: var(--space-5);
}

.feature-card .link-arrow .icon {
  color: var(--accent-text);
}

.feature-card.card--interactive:hover {
  border-color: color-mix(in srgb, var(--accent-text) 45%, var(--color-border));
}

a.feature-card {
  color: inherit;
  text-decoration: none;
}

a.feature-card .card__title {
  display: block;
}

/* Stats: hairline grid like the integrations strip. */
.stats {
  --accent-text: var(--color-primary-text);
  padding-block: 0 clamp(var(--space-8), 7vw, var(--space-9));
}

.stats--capital {
  --accent-text: color-mix(in srgb, var(--color-capital-strong) 70%, var(--color-black));
}

.stats--payments {
  --accent-text: color-mix(in srgb, var(--color-payments) 85%, var(--color-black));
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-border);
}

/* column-reverse puts the figure above its label; flex-end pins the content to
   the top when a neighbour's longer label makes the row taller. */
.stats__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background: var(--color-surface);
}

.stats__value {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

.stats__label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.stats__item::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: var(--space-3);
  border-radius: 2px;
  background: var(--accent-text);
  order: 3;
}

/* Process steps */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 700px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.process__step {
  position: relative;
  padding: var(--space-5) 0 0;
  border-top: 2px solid var(--color-border);
}

.process__step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--color-primary);
}

.process__number {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-primary-text);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
}

.process__title {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
  font-weight: 600;
}

.process__text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* ==========================================================================
   13e. HOMEPAGE — pillars, industries, expanded integrations, lead form
   ========================================================================== */

.pillars {
  padding-block: 0 var(--section-space);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6) var(--space-7);
  margin: 0;
  padding: clamp(var(--space-6), 4vw, var(--space-7)) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.pillars__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
}

.pillars__icon {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary-text);
}

.pillars__icon .icon {
  width: 20px;
  height: 20px;
}

.pillars__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.pillars__text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.industries__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-border);
  list-style: none;
}

@media (min-width: 700px) {
  .industries__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

.industries__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 3vw, var(--space-7)) var(--space-4);
  background: var(--color-surface);
  text-align: center;
  transition: background-color var(--duration) var(--ease);
}

.industries__item:hover {
  background: var(--color-primary-soft);
}

.industries__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-background-secondary);
  color: var(--color-primary-text);
}

.industries__icon .icon {
  width: 22px;
  height: 22px;
}

.industries__title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-wrap: balance;
}

.integrations--expanded {
  padding-block: var(--section-space) 0;
}

.integrations--expanded .section-header {
  max-width: 52rem;
}

.integrations__count {
  color: var(--color-primary);
  white-space: nowrap;
}

.integrations__prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-5) clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.integrations__prompt > div {
  max-width: 44rem;
}

.integrations__prompt-title {
  margin-bottom: var(--space-1);
  font-size: 1.125rem;
  font-weight: 600;
}

.integrations--expanded + .section--alt {
  margin-top: var(--section-space);
}

/* HubSpot form panel */
.form-section__panel {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}

.form-section__fallback {
  margin-top: var(--space-5);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  text-align: center;
}

.hs-form:empty {
  min-height: 320px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, var(--color-surface-muted) 0 100%) 0 0 / 100% 44px no-repeat,
    linear-gradient(90deg, var(--color-surface-muted) 0 100%) 0 60px / 100% 44px no-repeat,
    linear-gradient(90deg, var(--color-surface-muted) 0 100%) 0 120px / 100% 44px no-repeat,
    linear-gradient(90deg, var(--color-surface-muted) 0 100%) 0 180px / 100% 120px no-repeat;
}

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form select,
.hs-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}

.hs-form input:focus-visible,
.hs-form select:focus-visible,
.hs-form textarea:focus-visible,
.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.hs-form .hs-form-field {
  margin-bottom: var(--space-4);
}

.hs-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.hs-form .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-button-text);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.hs-form .hs-button:hover {
  background: var(--color-primary-hover);
}

.hs-form .hs-error-msgs {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  color: #b42318;
  font-size: var(--text-xs);
}

/* ==========================================================================
   13f. CTA BAND (inverse, shares .about styles)
   ========================================================================== */

.cta__title {
  color: var(--color-inverse-text);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.cta__text {
  max-width: 44rem;
  margin: var(--space-5) auto 0;
  color: var(--color-inverse-text-secondary);
  font-size: var(--text-lead);
  line-height: 1.6;
}

/* ==========================================================================
   13g. VALUES, TESTIMONIALS, OPENINGS, DIRECTORY, CONTACT, BOOKING
   ========================================================================== */

.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .values:not(.values--compact) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.values__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.values__item .icon-tile {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
}

.values__title {
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
  font-weight: 600;
}

.values__text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.values--compact {
  grid-template-columns: 1fr;
}

.testimonial {
  margin: 0;
  overflow: hidden;
}

.testimonial__video {
  aspect-ratio: 9 / 12;
  background: var(--color-black);
}

.testimonial__video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.testimonial__caption {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.testimonial__name {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.openings {
  display: grid;
  gap: var(--space-5);
}

.opening {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}

.opening__body {
  flex: 1 1 32rem;
}

.opening .card__title {
  margin-bottom: var(--space-2);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: start;
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

.contact__form {
  max-width: none;
  margin: 0;
}

.contact__title {
  margin-bottom: var(--space-5);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.contact-list--large {
  gap: var(--space-5);
  font-size: var(--text-lead);
}

.contact-list--large .icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary-text);
}

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

.contact__details a:hover {
  color: var(--color-primary-text);
}

/* Segments strip (POS page) */
.segments {
  padding-block: 0 var(--section-space);
}

.segments__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.segments__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.segments__item .icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary-text);
}

/* POS lineup */
.pos-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.pos-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3) var(--space-6);
  padding-block: clamp(var(--space-5), 3vw, var(--space-7));
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .pos-row {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.6fr) auto;
    align-items: start;
  }
}

.pos-row__index {
  color: var(--color-text-tertiary);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
}

.pos-row__name {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.pos-row__tag {
  margin-top: var(--space-1);
  color: var(--color-primary-text);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.pos-row__text {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

@media (max-width: 899px) {
  .pos-row__action {
    margin-top: var(--space-2);
  }
}

/* Q&A (software page) */
.qa {
  display: grid;
  gap: var(--space-5);
  margin: 0;
}

@media (min-width: 900px) {
  .qa {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.qa__item {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-primary);
}

.qa__q {
  margin-bottom: var(--space-3);
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
}

.qa__a {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.qa__a p + p {
  margin-top: 0.8em;
}

/* ==========================================================================
   13h. CASE STUDIES
   ========================================================================== */

.case-card {
  --accent-text: color-mix(in srgb, var(--color-payments) 85%, var(--color-black));
}

.case-card--capital {
  --accent-text: color-mix(in srgb, var(--color-capital-strong) 70%, var(--color-black));
}

.case-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.case-card__service {
  color: var(--accent-text);
}

.case-card__result {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  text-transform: none;
  letter-spacing: 0;
}

.case-card .link-arrow .icon {
  color: var(--accent-text);
}

.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.case-facts dt {
  margin-bottom: var(--space-1);
  color: var(--color-text-tertiary);
  font-family: var(--font-primary);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.case-facts dd {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  font-weight: 600;
}

.case-facts div:first-child dd {
  color: var(--color-primary-text);
}

.entry-actions {
  margin-top: var(--space-7);
}

/* ==========================================================================
   13i. SCORE CARD, RECORDINGS, BLUEPRINT (tech stack pages)
   ========================================================================== */

.score-card {
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, var(--color-primary-soft), transparent 70%),
    var(--color-surface);
}

.score-card__logo {
  width: auto;
  max-height: 44px;
  margin-bottom: var(--space-5);
}

.score-card__tagline {
  margin-bottom: var(--space-2);
  font-family: var(--font-primary);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.score-card__meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.score-card__meter-label {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.score-card__meter-value {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.score-card__meter-value span {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.score-card__meter-bar {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-surface-muted);
}

.score-card__meter-bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary);
}

.score-card__meter-note {
  grid-column: 1 / -1;
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
}

.recordings {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.recordings__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .recordings__item {
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    align-items: center;
  }
}

.recordings__date {
  color: var(--color-text-tertiary);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.recordings__title {
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
  font-weight: 600;
}

.recordings__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.recordings__passcode {
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.recordings__passcode code {
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--text-xs);
}

.blueprint + .blueprint {
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

.blueprint__head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.blueprint__head .process__number {
  margin: 0.3em 0 0;
}

.blueprint__title {
  font-size: var(--text-h3);
  font-weight: 600;
}

.blueprint__text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.blueprint__card .chips {
  margin-top: var(--space-4);
}

/* ==========================================================================
   13j. BLOG — layout, sidebar, meta, navigation, comments, search
   ========================================================================== */

.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-7), 5vw, var(--space-9));
  padding-bottom: clamp(var(--space-7), 6vw, var(--space-9));
}

@media (min-width: 1024px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.blog-layout__main {
  min-width: 0;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--color-text-tertiary);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 500;
}

.post-meta a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.post-meta a:hover {
  color: var(--color-primary-text);
}

.sidebar {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-5));
  }
}

.sidebar__block {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.sidebar__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.recent-posts,
.category-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-posts__item + .recent-posts__item {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.recent-posts__link {
  display: flex;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.recent-posts__link:hover .recent-posts__title {
  color: var(--color-primary-text);
}

.recent-posts__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-background-secondary);
}

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

.recent-posts__title {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--duration-fast) var(--ease);
}

.recent-posts__date {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
}

.category-list li + li {
  margin-top: var(--space-2);
}

.category-list a {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.category-list a:hover,
.category-list .current-cat > a {
  color: var(--color-primary-text);
}

.entry-footer {
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

.entry-cta {
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background:
    radial-gradient(ellipse 60% 80% at 100% 50%, var(--color-primary-soft), transparent 70%),
    var(--color-surface);
}

.entry-cta .card__text {
  max-width: 40rem;
  margin-bottom: var(--space-5);
}

.post-nav {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.post-nav .nav-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .post-nav .nav-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-nav .nav-next {
    text-align: right;
  }
}

.post-nav a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.post-nav__label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-tertiary);
  font-family: var(--font-primary);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.post-nav__title {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}

.post-nav a:hover .post-nav__title {
  color: var(--color-primary-text);
}

.search-form {
  display: flex;
  gap: var(--space-2);
}

.search-form label {
  flex: 1;
}

.search-form__input {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}

.search-form__input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.search-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-background);
  cursor: pointer;
}

.search-form__submit:hover {
  background: var(--color-primary);
}

.search-form__submit .icon {
  width: 18px;
  height: 18px;
}

.error-404__search {
  width: min(28rem, 100%);
  margin-top: var(--space-7);
}

.comments {
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.comments__title,
.comment-reply-title {
  margin-bottom: var(--space-5);
  font-size: var(--text-h3);
  font-weight: 600;
}

.comment-list {
  margin: 0 0 var(--space-7);
  padding: 0;
  list-style: none;
}

.comment-list .comment {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.comment-list .children {
  margin: var(--space-4) 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.comment-author .avatar {
  display: inline-block;
  margin-right: var(--space-2);
  border-radius: 50%;
  vertical-align: middle;
}

.comment-author .fn {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  font-style: normal;
}

.comment-metadata {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.comment-metadata a {
  color: inherit;
  text-decoration: none;
}

.comment-content {
  font-size: var(--text-sm);
  line-height: 1.7;
}

.comment-content p + p {
  margin-top: 0.8em;
}

.comment-reply-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

.comment-form {
  display: grid;
  gap: var(--space-4);
}

.comment-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.comment-form .comment-notes,
.comment-form .logged-in-as {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.comment-form .form-submit {
  margin: 0;
}

.comments__closed {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

/* ==========================================================================
   13k. FRONT PAGE BANDS — alternating light and dark gray sections
   Rhythm: hero (light) → integrations (dark) → services (light) →
   pillars (dark) → industries (light) → lead form (dark) →
   newsletter (light, only when a form ID is set) → about (black).
   Dark bands swap the text and border tokens; white cards inside them switch
   the tokens back so their content keeps its normal light styling.
   ========================================================================== */

.site-main--front {
  --color-band-dark: #34373b;
}

.site-main--front > .section--alt {
  background: var(--color-background);
}

.site-main--front > .integrations,
.site-main--front > .pillars,
.site-main--front > .form-section {
  --color-text: var(--color-inverse-text);
  --color-text-secondary: color-mix(in srgb, var(--color-white) 76%, var(--color-band-dark));
  --color-text-tertiary: color-mix(in srgb, var(--color-white) 58%, var(--color-band-dark));
  --color-border: color-mix(in srgb, var(--color-white) 14%, var(--color-band-dark));
  --color-border-strong: color-mix(in srgb, var(--color-white) 30%, var(--color-band-dark));
  --color-primary-text: var(--color-inverse-accent);
  padding-block: var(--section-space);
  background: var(--color-band-dark);
  color: var(--color-text);
}

.site-main--front > .integrations :focus-visible,
.site-main--front > .pillars :focus-visible,
.site-main--front > .form-section :focus-visible {
  outline-color: var(--color-inverse-accent);
}

/* White panels inside a dark band keep the light palette. */
.site-main--front > .form-section .card,
.site-main--front > .integrations .integrations__item {
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-primary-text: color-mix(in srgb, var(--color-primary) 72%, var(--color-black));
  color: var(--color-text);
}

/* Integrations: separate white logo tiles on the gray band. */
.site-main--front > .integrations .integrations__grid {
  gap: var(--space-2);
  overflow: visible;
  border: 0;
  background: transparent;
}

.site-main--front > .integrations .integrations__item {
  border-radius: var(--radius-md);
}

.site-main--front > .integrations .integrations__count {
  color: var(--color-inverse-accent);
}

.site-main--front > .integrations .integrations__prompt {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.site-main--front > .integrations .btn--secondary {
  border-color: var(--color-inverse-border);
  background: transparent;
  color: var(--color-inverse-text);
}

.site-main--front > .integrations .btn--secondary:hover {
  border-color: var(--color-inverse-text-tertiary);
  background: var(--color-inverse-surface);
}

.site-main--front > .integrations + .section--alt {
  margin-top: 0;
}

/* Pillars: its own band now, no divider line, items centered in each column. */
.site-main--front > .pillars .pillars__grid {
  padding-top: 0;
  border-top: 0;
}

.site-main--front > .pillars .pillars__item {
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: var(--space-2);
  text-align: center;
}

.site-main--front > .pillars .pillars__icon {
  grid-row: auto;
  margin-bottom: var(--space-2);
  border-color: var(--color-border-strong);
}

.site-main--front > .form-section .form-section__panel {
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   13l. SERVICE PAGE BANDS — the homepage rhythm on the Services pages
   (also Case Studies, Careers, Directory and About Us)
   <main class="site-main--banded">: the hero and the strips attached to it
   (logos, stats, segments) stay light. After that every .section alternates
   charcoal, white, charcoal… and the black CTA closes the page, exactly like
   the homepage. Counting uses :nth-child(… of .section), so a section that
   renders nothing (no case studies yet) never leaves two same bands touching.
   ========================================================================== */

.site-main--banded {
  --color-band-dark: #34373b;
}

/* The rhythm replaces the faint gray "alt" background on these pages. */
.site-main--banded > .section--alt {
  background: var(--color-background);
}

.site-main--banded > .section:nth-child(odd of .section) {
  --color-text: var(--color-inverse-text);
  --color-text-secondary: color-mix(in srgb, var(--color-white) 76%, var(--color-band-dark));
  --color-text-tertiary: color-mix(in srgb, var(--color-white) 58%, var(--color-band-dark));
  --color-border: color-mix(in srgb, var(--color-white) 14%, var(--color-band-dark));
  --color-border-strong: color-mix(in srgb, var(--color-white) 30%, var(--color-band-dark));
  --color-primary-text: var(--color-inverse-accent);
  background: var(--color-band-dark);
  color: var(--color-text);
}

.site-main--banded > .section:nth-child(odd of .section) :focus-visible {
  outline-color: var(--color-inverse-accent);
}

/* Secondary buttons sit on the band as outlines. */
.site-main--banded > .section:nth-child(odd of .section) .btn--secondary {
  border-color: var(--color-inverse-border);
  background: transparent;
  color: var(--color-inverse-text);
}

.site-main--banded > .section:nth-child(odd of .section) .btn--secondary:hover {
  border-color: var(--color-inverse-text-tertiary);
  background: var(--color-inverse-surface);
}

/* White cards (and the white value panels) inside a dark band keep the light
   palette and float on it. */
.site-main--banded > .section:nth-child(odd of .section) .card,
.site-main--banded > .section:nth-child(odd of .section) .values__item {
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-primary-text: color-mix(in srgb, var(--color-primary) 72%, var(--color-black));
  border-color: transparent;
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.site-main--banded > .section:nth-child(odd of .section) .card .btn--secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

/* Feature cards lift slightly on hover, like the homepage service cards. */
.site-main--banded .feature-card {
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.site-main--banded .feature-card:hover {
  border-color: color-mix(in srgb, var(--accent-text) 45%, var(--color-border));
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.site-main--banded > .section:nth-child(odd of .section) .feature-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Lead form panel gets the same lift as on the homepage. */
.site-main--banded .form-section__panel {
  box-shadow: var(--shadow-md);
}

/* Section headers in the bands center like the homepage's, except header rows. */
.site-main--banded > .section > .container > .section-header {
  margin-inline: auto;
  text-align: center;
}

.site-main--banded > .section > .container > .section-header .section-lead {
  margin-inline: auto;
}

/* Case studies (archive + related strip): hover border takes the card's pillar
   color, like the homepage service cards. */
.site-main--banded .case-card.card--interactive:hover {
  border-color: color-mix(in srgb, var(--accent-text) 45%, var(--color-border));
}

.site-main--banded > .section:nth-child(odd of .section) .case-card:hover {
  box-shadow: var(--shadow-lg);
}

.case-archive__empty {
  margin-inline: auto;
  text-align: center;
}

/* Pagination on a charcoal band: the current page inverts to white. */
.site-main--banded > .section:nth-child(odd of .section) .pagination .page-numbers.current {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-band-dark);
}

.site-main--banded > .section:nth-child(odd of .section) .pagination a.page-numbers:hover {
  border-color: var(--color-border-strong);
  background: var(--color-inverse-surface);
}

/* --------------------------------------------------------------------------
   Service hero (.hero--fx): the homepage's drifting pillar glows, cursor
   spotlight and magnetic buttons. The page's own pillar leads the color.
   -------------------------------------------------------------------------- */

.hero--fx .hero__glow {
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--hero-accent, var(--color-primary)) 12%, transparent),
    color-mix(in srgb, var(--hero-accent, var(--color-primary)) 4%, transparent) 55%,
    transparent
  );
}

.hero--accent-payments {
  --hero-accent: var(--color-payments);
  --dot-green: color-mix(in srgb, var(--color-payments) 55%, var(--color-white));
}

.hero--accent-capital {
  --hero-accent: var(--color-capital-strong);
  --dot-green: color-mix(in srgb, var(--color-capital-strong) 70%, var(--color-white));
}

.hero--accent-payments .hero__ambient-blob--payments,
.hero--accent-capital .hero__ambient-blob--capital,
.hero--accent-profit .hero__ambient-blob--profit {
  --blob-strength: 17%;
}

.hero--fx .hero__actions .btn {
  will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
  .hero--fx .hero__actions .btn {
    translate: none;
  }

  .site-main--banded .feature-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   14. MOTION
   Reveal uses the `translate` property so it never fights hover `transform`.
   ========================================================================== */

html.js [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  translate: none;
}

/* Hero underline draws in left to right. */
html.js [data-reveal] .hero__underline {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--ease-out)
    calc(var(--reveal-delay, 0ms) + 800ms);
}

html.js [data-reveal].is-visible .hero__underline {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  html.js [data-reveal],
  html.js [data-reveal] .hero__underline {
    opacity: 1;
    translate: none;
    clip-path: none;
  }

  /* Hero effects: show the finished chart, no pulse, no parallax, no intro. */
  html.js .hero__line,
  html.js .hero__area,
  html.js .hero__now,
  html.js .hero__marker,
  html.js .hero__chart,
  html.js .hero__title.is-visible .hero__highlight-text,
  html.js .hero__actions.is-visible .hero__cta::after,
  .hero__ambient-blob {
    animation: none;
  }

  html.js .hero__line {
    stroke-dashoffset: 0;
  }

  html.js .hero__area {
    opacity: 1;
  }

  html.js .hero__now {
    opacity: 0.3;
  }

  html.js .hero__marker--halo {
    stroke-width: 16px;
  }

  html.js .hero__marker--core {
    stroke-width: 9px;
  }

  html.js .hero__highlight-text {
    background-position: 100% 0;
  }

  html.js .hero__title--split .hero__word-inner {
    opacity: 1;
    transform: none;
    filter: none;
  }

  html.js .hero--front .hero__subtitle[data-reveal],
  html.js .hero--front .hero__lead[data-reveal],
  html.js .hero--front .hero__actions[data-reveal] {
    filter: none;
  }

  html.js .hero--front .hero__pillar::before {
    transform: none;
  }

  .hero__pulse,
  .hero__ring,
  .hero__glow,
  .rt-intro-screen {
    display: none !important;
  }

  .hero__lines,
  .hero__ambient,
  .hero--front .hero__actions .btn {
    translate: none;
  }

  .hero__lines {
    opacity: 1;
  }

  .card--interactive:hover {
    transform: none;
  }
}

/* ==========================================================================
   15. SMALL SCREENS
   Phone refinements (≤ 640px): a shorter navbar, smaller display type and
   tighter section rhythm, two-up stats, stacked full-width actions, 44px
   touch targets and 16px form fields (so iOS doesn't zoom on focus).
   Desktop and tablet values above are untouched.
   ========================================================================== */

@media (max-width: 640px) {
  :root {
    --navbar-height: 64px;
    --container-gutter: 1.25rem;
    --text-hero: 2.375rem; /* 38px */
    --text-h2: 1.75rem; /* 28px */
    --text-subtitle: 1.1875rem;
    --text-lead: 1.0625rem;
    --section-space: 3.5rem;
  }

  .section-header,
  .section-header-row {
    margin-bottom: var(--space-6);
  }

  .section-header-row {
    gap: var(--space-4);
  }

  .section-lead {
    line-height: 1.55;
  }

  /* Heroes */
  .hero {
    padding-block: 3rem 3rem;
  }

  .hero--page {
    padding-block: 2.75rem 2.75rem;
  }

  .hero--compact {
    padding-block: 2.5rem 2rem;
  }

  .hero__tagline {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin-bottom: var(--space-5);
  }

  .hero__title--page {
    font-size: 2.125rem;
  }

  .hero__subtitle {
    margin-top: var(--space-5);
  }

  .hero__lead {
    margin-top: var(--space-3);
  }

  .hero__actions {
    margin-top: var(--space-6);
  }

  .error-404__search {
    margin-top: var(--space-6);
  }

  /* Strips and grids */
  .integrations__item {
    height: 80px;
    padding: var(--space-4);
  }

  .integrations__prompt {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5);
    text-align: center;
  }

  .integrations__prompt .btn {
    width: 100%;
  }

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

  .stats__item {
    padding: var(--space-5) var(--space-4);
  }

  /* An odd last figure spans the row instead of leaving an empty cell. */
  .stats__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .stats__value {
    font-size: 1.625rem;
  }

  .pillars__grid {
    gap: var(--space-5);
  }

  .industries__item {
    padding: var(--space-5) var(--space-3);
  }

  .process {
    gap: var(--space-6);
  }

  .card__title {
    font-size: 1.1875rem;
  }

  .service-card .card__text {
    font-size: var(--text-sm);
  }

  .opening {
    padding: var(--space-5);
  }

  /* Actions: one full-width button per row, thumb-sized */
  .section-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section-actions .btn,
  .entry-actions .btn,
  .entry-cta .btn,
  .opening .btn,
  .pos-row__action .btn,
  .integrations__prompt .btn {
    width: 100%;
    min-height: 48px;
  }

  .social-links a {
    width: 44px;
    height: 44px;
  }

  .chips--nav .chip {
    min-height: 40px;
  }

  .chip {
    white-space: normal;
    text-align: center;
  }

  .pagination .page-numbers {
    min-width: 44px;
    height: 44px;
  }

  /* Inverse bands */
  .about__text {
    font-size: 1.25rem;
  }

  .cta__text {
    margin-top: var(--space-4);
  }

  .about__actions {
    margin-top: var(--space-6);
  }

  /* Documents, posts, comments */
  .blog-layout {
    gap: var(--space-7);
  }

  .page-thumbnail {
    margin-bottom: var(--space-6);
  }

  .entry-content {
    font-size: var(--text-body);
    line-height: 1.7;
  }

  .entry-content h2 {
    font-size: 1.5rem;
  }

  .entry-content h3 {
    font-size: 1.25rem;
  }

  .comment-list .children {
    margin-left: var(--space-4);
  }

  /* 16px inputs: iOS Safari zooms into anything smaller on focus. */
  .hs-form input[type="text"],
  .hs-form input[type="email"],
  .hs-form input[type="tel"],
  .hs-form select,
  .hs-form textarea,
  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form input[type="url"],
  .comment-form textarea,
  .search-form__input {
    font-size: 1rem;
  }

  /* Footer */
  .site-footer {
    padding-top: var(--space-7);
  }

  .site-footer__top {
    gap: var(--space-6);
  }

  .site-footer__disclaimer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
  }
}