/* =========================================================
   VALTATECH — DESIGN SYSTEM
   ========================================================= */

:root {
  --ink: #31334E;          /* real Valtatech navy, extracted from logo file */
  --ink-soft: #454869;
  --paper: #F5F6F8;        /* background */
  --paper-dim: #E7EAF0;
  --verified: #2E4E93;     /* accent - blue drawn from the Peppol Access Point badge */
  --verified-dark: #1F3568;
  /* Darkened from #C97A2B, which was 3.33:1 on white and under AA. */
  --amber: #95581B;        /* sparing use - alerts/callouts */
  --coral: #C9524A;        /* problem/risk framing accent */
  --teal: #1F9E7A;         /* outcome/success framing accent */
  --slate: #5C6478;        /* secondary text */
  --line: #DADFE6;         /* hairline dividers */
  --white: #FFFFFF;
  --card-bg: #FFFFFF;      /* card/panel background */

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;

  --maxw: 1180px;

  /* Role tokens that deliberately do NOT invert with the colour scheme.
     --ink and --white each ended up doing two contradictory jobs: --ink was both
     "primary text" (must go light in dark mode) and "a dark surface" (must stay
     dark); --white was both "text on a dark surface" and "a light card surface".
     In dark mode both resolved to #EDEFF3, so every dark-surface-plus-white-text
     component collapsed to a single colour at 1.00:1. These three are fixed. */
  --surface-dark: #31334E;   /* a surface that is dark in both schemes */
  --on-dark: #FFFFFF;        /* text placed on --surface-dark */
  --accent-solid: #2E4E93;   /* accent that always carries white text */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EDEFF3; --ink-soft: #C7CBDA;
    --paper: #21243A; --paper-dim: #2A2E48;
    --verified: #7C97E0; --verified-dark: #A8BCEF;
    --amber: #E0A458; --slate: #A2AABC; --line: #3A3E58; --white: #EDEFF3;
    --card-bg: #2A2E48;
  }
}
:root[data-theme="dark"] {
  --ink: #EDEFF3; --ink-soft: #C7CBDA;
  --paper: #21243A; --paper-dim: #2A2E48;
  --verified: #7C97E0; --verified-dark: #A8BCEF;
  --amber: #E0A458; --slate: #A2AABC; --line: #3A3E58; --white: #EDEFF3;
  --card-bg: #2A2E48;
}

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em 0; max-width: 62ch; }
a { color: var(--verified-dark); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header / Nav ---------- */
header.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The nav is wide enough to fill the row, so space-between leaves no space
     at all and the first link touches the logo. An explicit gap fixes it. */
  gap: 36px;
  /* padding-block, never a `padding: 16px 0` shorthand. This element carries
     both .container and .nav-row, and .nav-row is defined later, so the
     shorthand was overwriting the container's 28px side gutter and pinning the
     logo to the screen edge at every width. It only showed on narrow screens,
     where there is no spare space to disguise it. */
  padding-block: 16px;
}
.logo-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.logo-mark span { color: var(--verified); }
nav.primary-nav {
  display: flex;
  gap: 20px;
  align-items: center;
  /* Without this, labels break mid-phrase ("Source to / Pay") when the row
     gets tight, which reads as a layout fault rather than a dense menu. */
  white-space: nowrap;
}
nav.primary-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
nav.primary-nav a:hover { color: var(--verified-dark); }
.nav-cta {
  background: var(--surface-dark);
  color: var(--on-dark) !important;
  padding: 10px 20px;
  border-radius: 3px;
  font-size: 0.9rem !important;
}
.nav-cta:hover { background: var(--verified-dark) !important; }

/* ---------- Hero ---------- */
.hero {
  padding: 84px 0 64px;
  border-bottom: 1px solid var(--line);
}
.hero .eyebrow {
  color: var(--verified-dark);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.hero p.lede {
  font-size: 1.15rem;
  color: var(--slate);
  max-width: 58ch;
}
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--accent-solid); color: var(--on-dark); }
.btn-primary:hover { background: var(--verified-dark); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--surface-dark); color: var(--on-dark); }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
section.tight { padding: 40px 0; }
/* ---------- Dark band (.on-ink) ----------
   These sections are deliberately dark in BOTH colour schemes — they are a design
   device, not a consequence of the palette. The dark-mode block above inverts
   --ink to near-white, which turned every one of these bands white and left their
   white headings on it at 1.00:1 contrast: invisible. Anyone whose OS is set to
   dark mode saw it; anyone on light mode did not, which is why it went unnoticed.

   Re-pinning the tokens here rather than at each use site fixes the stylesheet
   rules AND the ~57 inline styles inside these sections across 9 pages, because
   custom properties inherit: an inline `color: var(--white)` on a card in here now
   resolves against this block, not the inverted page palette. Keep any new token
   used inside a dark band on this list. */
.on-ink {
  --ink: #31334E;
  --ink-soft: #454869;
  --paper: #F5F6F8;
  --paper-dim: #E7EAF0;
  --white: #FFFFFF;
  --card-bg: #454869;
  --line: #2B3F5C;
  --verified: #2E4E93;
  --verified-dark: #1F3568;
  --slate: #C7CEDA;
}
section.on-ink { background: var(--ink); color: #C7CEDA; }
section.on-ink h2, section.on-ink h3 { color: var(--white); }
section.on-ink p { color: #C7CEDA; }
/* A link sitting directly in a dark band, not inside a card. `.on-ink` re-pins
   --verified-dark to #1F3568, so a bare link inherited navy-on-navy at 1.03:1.
   index.html and ap-automation.html were each patching it inline per link; the
   first page that forgot got an invisible link. Same accent as card links.
   :not(.btn) keeps buttons on their own colour — a .btn in a dark band would
   otherwise lose its white label to this rule. */
section.on-ink a:not(.btn) { color: #7FD9C7; }

/* A plain .card sitting inside a dark band. Most pages hand-style these inline
   (`style="background:var(--ink-soft); border-color:#2B3F5C"`); about.html's
   product cards did not, so their links kept the light-page link colour — dark
   navy on the navy band, measured at 1.02:1 in BOTH colour schemes. That one is
   not a dark-mode bug; it has been invisible for everyone. Styling it here means
   a new card in a dark band is readable by default rather than depending on
   someone remembering the inline style. */
.on-ink .card { background: var(--ink-soft); border-color: #2B3F5C; }
.on-ink .card h3, .on-ink .card h4 { color: var(--white); }
.on-ink .card p, .on-ink .card li { color: #C7CEDA; }
.on-ink .card a { color: #7FD9C7; }
.on-ink .card.card-linked:hover { border-color: #7FD9C7; }
.divider { border: none; border-top: 1px solid var(--line); margin: 0; }

.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head p { color: var(--slate); }

/* ---------- Logo strip ---------- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 44px;
  align-items: center;
  padding: 28px 0;
}
.logo-strip .lg {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--slate);
  font-size: 0.95rem;
  opacity: 0.85;
}
.logo-strip img.lg-img {
  height: 32px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}
.logo-strip img.lg-img:hover {
  transform: translateY(-2px);
  transition: transform 0.15s ease;
}

/* ---------- Three-up / grid ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 1060px) and (min-width: 861px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.stat-block { border-left: 3px solid var(--verified); padding-left: 18px; }
.stats-inline-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 560px) { .stats-inline-2 { grid-template-columns: 1fr; } }
.stat-block .num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
}
.stat-block .lbl { color: var(--slate); font-size: 0.9rem; }

/* ---------- Checkpoint / process rail ---------- */
.rail {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 32px 0;
}
.rail .step {
  flex: 1;
  padding: 24px 22px;
  border-right: 1px solid var(--line);
}
.rail .step:last-child { border-right: none; }
.rail .step .stage-no {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--verified-dark);
  font-weight: 600;
  margin-bottom: 8px;
}
@media (max-width: 860px) {
  .rail { flex-direction: column; }
  .rail .step { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ---------- Screenshot placeholder ---------- */
.shot-frame {
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 1px 3px rgba(18,35,59,0.06);
}
/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-grid.five-tier { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 640px) { .pricing-grid.five-tier { grid-template-columns: 1fr; } }

.price-card {
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: 6px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border: 2px solid var(--verified);
  position: relative;
}
.price-card.featured .badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--accent-solid);
  color: var(--on-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
}
.price-card .tier-name { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--verified-dark); margin-bottom: 6px; }
.price-card .price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 2px;
}
.price-card .price .per { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--slate); }
.price-card .dummy-tag {
  font-size: 0.72rem;
  color: var(--amber);
  border: 1px solid var(--amber);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 14px;
  font-weight: 600;
}
.price-card ul { list-style: none; padding: 0; margin: 18px 0; flex-grow: 1; }
.price-card li {
  padding: 7px 0 7px 22px;
  position: relative;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-dim);
}
.price-card li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--verified);
  font-weight: 700;
}
.price-card .btn { text-align: center; width: 100%; }

.gateway-note {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--paper-dim);
  border-left: 3px solid var(--amber);
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-radius: 2px;
}

/* ---------- Trust / credibility bar (real certifications only) ---------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
}
.trust-bar .trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
}
.trust-bar .trust-item .trust-icon { font-size: 1rem; }
.trust-bar .trust-item .trust-icon svg { width: 18px; height: 18px; color: var(--verified-dark); display: block; }

/* ---------- Outcome cards ("leave with") ---------- */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .outcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .outcome-grid { grid-template-columns: 1fr; } }
/* Six-outcome variant (the case-study template): three columns, so the last row
   is full rather than a ragged 4 + 2. Must restate the breakpoints — a class
   modifier outranks the plain .outcome-grid media queries whatever the order. */
.outcome-grid.three-up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .outcome-grid.three-up { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .outcome-grid.three-up { grid-template-columns: 1fr; } }
.outcome-card { text-align: center; padding: 20px 16px; border-top: 3px solid var(--teal); background: rgba(31,158,122,0.05); border-radius: 6px; }
.outcome-card .outcome-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.outcome-card p { font-size: 0.88rem; color: var(--slate); margin: 0 auto; }

/* ---------- Manifesto-style closer ---------- */
.manifesto {
  text-align: center;
  padding: 64px 0;
}
.manifesto h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.2;
}
.manifesto h2 .accent { color: var(--verified); }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--line);
  padding: 26px;
  background: var(--card-bg);
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(18,35,59,0.10);
}
.card.accent-top { border-top: 3px solid var(--verified); }
/* automatic vibrant rotation across card grids — blue / teal / coral in sequence,
   instead of every card being a uniform white box */
.grid-3 .card:nth-child(3n+1) { background: rgba(46,78,147,0.05); border-top: 3px solid var(--verified); border-color: rgba(46,78,147,0.16); }
.grid-3 .card:nth-child(3n+2) { background: rgba(31,158,122,0.05); border-top: 3px solid var(--teal); border-color: rgba(31,158,122,0.16); }
.grid-3 .card:nth-child(3n+3) { background: rgba(201,82,74,0.05); border-top: 3px solid var(--coral); border-color: rgba(201,82,74,0.16); }
.grid-2 .card:nth-child(2n+1) { background: rgba(46,78,147,0.05); border-top: 3px solid var(--verified); border-color: rgba(46,78,147,0.16); }
.grid-2 .card:nth-child(2n) { background: rgba(31,158,122,0.05); border-top: 3px solid var(--teal); border-color: rgba(31,158,122,0.16); }

.icon-badge {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--paper-dim);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.icon-badge svg { width: 26px; height: 26px; color: var(--verified-dark); }
.icon-badge.on-ink { background: rgba(124,151,224,0.15); }
.icon-badge.on-ink svg { color: #7FD9C7; }

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 0.85rem; text-transform: none; color: var(--slate); font-family: var(--font-body); font-weight: 600; margin-bottom: 12px; }
.footer-grid a { display: block; color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; margin-bottom: 8px; }
.footer-grid a:hover { color: var(--verified-dark); }
.footer-bottom { color: var(--slate); font-size: 0.85rem; border-top: 1px solid var(--line); padding-top: 20px; }

/* ---------- Form ---------- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--card-bg);
  color: var(--ink);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-status { margin-top: 14px; font-size: 0.9rem; }

.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 3px;
  background: var(--paper-dim);
  color: var(--slate);
  margin: 3px 6px 3px 0;
}

/* ---------- Country compliance accordion ---------- */
.country-accordion {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--card-bg);
}
.country-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.country-accordion summary .country-status { margin-right: auto; margin-left: 4px; }
.flag-pair { display: inline-flex; gap: 4px; flex-shrink: 0; }
.flag-pair svg { border-radius: 3px; box-shadow: 0 0 0 1px rgba(18,35,59,0.12); display: block; }
.country-accordion summary::-webkit-details-marker { display: none; }
.country-accordion summary .country-status {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
}
.country-status.peppol { background: rgba(46,78,147,0.1); color: var(--verified-dark); }
.country-status.own-system { background: #8A4E13; color: #FFFFFF; }
.country-accordion summary .chev { transition: transform 0.2s ease; color: var(--slate); flex-shrink:0; }
.country-accordion[open] summary .chev { transform: rotate(180deg); }
.country-accordion .country-body { padding: 0 24px 26px; border-top: 1px solid var(--line); }
.country-body h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--verified-dark);
  text-transform: uppercase;
  margin: 22px 0 8px;
}
.country-body h4:first-of-type { margin-top: 20px; }
.country-body p, .country-body li { font-size: 0.95rem; color: var(--ink-soft); max-width: none; }
.country-body ul { padding-left: 20px; margin: 6px 0; }
/* Contact form confirmation. Replaces the form on success rather than sitting
   underneath it: a still-populated form with a note below it reads as "not sent"
   and invites a second submission, which lands as a duplicate in the CRM.
   The tick sits on --accent-solid, not --teal: --accent-solid is the token that
   is guaranteed to carry white, and --teal is only ever used as a border or a
   5% tint elsewhere, never as a filled surface behind content. */
.form-success {
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  background: var(--card-bg);
  border-radius: 6px;
  padding: 32px 28px;
}
.form-success:focus { outline: none; }
/* The header is position:sticky, so scrolling this into view without a margin
   tucks the top of the panel underneath it. */
.form-success { scroll-margin-top: 100px; }
.form-success .tick {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-solid); color: var(--on-dark);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.form-success .tick svg { width: 22px; height: 22px; }
.form-success h3 { margin-bottom: 10px; }
.form-success p:last-child { margin-bottom: 0; }

/* Article category filter (thought-leadership.html). Starts [hidden] and is
   revealed by script.js, so with JS off every article stays visible rather
   than sitting behind a control that cannot work. */
.filter-bar { margin-bottom: 28px; }
.filter-bar .filter-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 10px;
}
.filter-bar .country-tabs { flex-wrap: wrap; }
.filter-count { font-size: 0.85rem; color: var(--slate); margin: 12px 0 0; min-height: 1.2em; }
.card[hidden] { display: none; }

.confirm-needed {
  margin-top: 6px;
  padding: 12px 16px;
  background: var(--paper-dim);
  border-left: 3px solid var(--amber);
  font-size: 0.86rem;
  color: var(--ink-soft);
  border-radius: 2px;
}
table.compare { width: 100%; border-collapse: collapse; margin: 24px 0; }

.video-caption {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  margin: 0;
  z-index: 1;
}
table.compare th, table.compare td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
table.compare th { color: var(--slate); font-weight: 600; font-size: 0.82rem; }

/* ---------- Logo marquee (infinite scroll, Zip-style) ---------- */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  padding: 20px 0;
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  gap: 56px;
  align-items: center;
  animation: marquee-scroll 32s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-marquee-track img {
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo-marquee-track img:hover { transform: translateY(-2px); transition: transform 0.15s ease; }
.logo-marquee-track.reverse { animation-direction: reverse; }
/* on dark sections, most client logos (white/transparent background) are unreadable when
   desaturated and dimmed — wrap them in a light chip instead of filtering them */
.on-ink .logo-marquee-track img {
  filter: none;
  background: var(--white);
  padding: 9px 16px;
  border-radius: 6px;
  /* Taller than the 30px used on light sections: the white chip's padding eats
     visual weight, so matching the number makes these read smaller than the rest. */
  height: 36px;
  max-width: 150px;
}
.on-ink .logo-marquee-track img:hover { filter: none; transform: translateY(-2px); transition: transform 0.15s ease; }

/* ---------- Interactive flow diagram ---------- */
.flow-diagram {
  margin: 32px 0;
  padding: 32px 24px;
  border-radius: 14px;
  background: radial-gradient(ellipse at top left, rgba(46,78,147,0.07), transparent 60%),
              radial-gradient(ellipse at bottom right, rgba(31,158,122,0.06), transparent 60%),
              var(--paper-dim);
  perspective: 900px;
}
.flow-track {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.flow-node {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 22px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color 0.3s ease, transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  transform-style: preserve-3d;
}
.flow-node:hover {
  border-color: var(--verified-dark);
  transform: translateY(-6px) rotateX(6deg);
  box-shadow: 0 16px 30px rgba(18,35,59,0.16);
}
.flow-node.active {
  border-color: var(--verified);
  transform: translateY(-8px) rotateX(4deg) scale(1.03);
  box-shadow: 0 18px 34px rgba(46,78,147,0.24), 0 0 0 3px rgba(46,78,147,0.12);
  z-index: 2;
}
.flow-node.active::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--verified), var(--teal));
  opacity: 0.18;
  z-index: -1;
  animation: pulse-glow 1.8s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.28; }
}
.flow-node .flow-stage-tag {
  display: block;
  font-size: 0.72rem;
  color: var(--verified-dark);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.flow-node .flow-icon { font-size: 1.7rem; margin-bottom: 8px; line-height:1; }
.flow-node .flow-icon svg { width: 30px; height: 30px; color: var(--verified-dark); }
.flow-node.on-ink .flow-icon svg { color: #7FD9C7; }
.flow-node .flow-label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.flow-connector {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.flow-connector svg { width: 100%; height: 20px; overflow: visible; }
.flow-connector .flow-arrow-line {
  stroke: var(--line);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 5;
  transition: stroke 0.3s ease;
}
.flow-connector.active .flow-arrow-line {
  stroke: var(--verified);
  animation: flow-dash 0.7s linear infinite;
}
@keyframes flow-dash { to { stroke-dashoffset: -22; } }
.flow-connector .pulse-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verified);
  box-shadow: 0 0 8px 2px rgba(46,78,147,0.6);
  opacity: 0;
  transform: translateY(-50%);
}
.flow-connector.active .pulse-dot {
  opacity: 1;
  animation: travel-pulse 1s ease-in-out infinite;
}
@keyframes travel-pulse {
  0% { left: 2%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 92%; opacity: 0; }
}
.flow-detail-panel {
  margin-top: 22px;
  padding: 20px 24px;
  background: var(--paper-dim);
  border-radius: 6px;
  border-left: 3px solid var(--verified);
  font-size: 0.92rem;
  color: var(--ink-soft);
  min-height: 54px;
}
.on-ink .flow-diagram {
  background: radial-gradient(ellipse at top left, rgba(127,217,199,0.10), transparent 60%),
              radial-gradient(ellipse at bottom right, rgba(46,78,147,0.18), transparent 60%),
              rgba(255,255,255,0.03);
}
@media (max-width: 860px) {
  .flow-track { flex-direction: column; }
  .flow-connector { flex: 0 0 28px; transform: rotate(90deg); width: 28px; margin: 0 auto; }
}
/* dark-background variant, used on PayGuard's on-ink checkpoint diagram */
.flow-node.on-ink { background: var(--ink-soft); border-color: #2B3F5C; }
.flow-node.on-ink .flow-label { color: var(--white); }
.flow-node.on-ink .flow-stage-tag { color: #7FD9C7; }
.flow-node.on-ink.active { border-color: var(--verified); }
.flow-connector.on-ink .flow-arrow-line { stroke: #3A4C68; }
.flow-connector.on-ink.active .flow-arrow-line { stroke: var(--verified); animation: flow-dash 0.7s linear infinite; }
.flow-connector.on-ink .pulse-dot { background: #7FD9C7; box-shadow: 0 0 8px 2px rgba(127,217,199,0.6); }
.flow-detail-panel.on-ink { background: var(--ink-soft); border-left-color: #7FD9C7; color: #C7CEDA; }

/* ---------- Form validation states ---------- */
.form-field input:invalid:not(:placeholder-shown), .form-field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--amber);
}
.form-field input:valid:not(:placeholder-shown), .form-field textarea:valid:not(:placeholder-shown) {
  border-color: var(--verified);
}

.logo-mark img { height: 42px; display:block; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.nav-toggle svg { width: 26px; height: 26px; color: var(--ink); }
@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav-row { flex-wrap: nowrap; }
  nav.primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 28px 16px;
    box-shadow: 0 8px 16px rgba(18,35,59,0.08);
  }
  nav.primary-nav.open { display: flex; }
  nav.primary-nav a {
    width: 100%;
    padding: 13px 4px;
    border-bottom: 1px solid var(--paper-dim);
    font-size: 1rem;
  }
  nav.primary-nav .nav-cta {
    margin-top: 10px;
    text-align: center;
    border-bottom: none;
  }
}
@media (max-width: 480px) {
  .logo-mark img { height: 34px; }
}

/* ============================================================
   COUNTRY SELECTOR — PayGuard
   Validations, payment rails and fraud figures differ by market,
   so the panel swaps rather than showing one country's data to
   everyone. Panels are plain [hidden] so the content is all in the
   HTML: it stays readable, printable and indexable without JS.
   ============================================================ */
.country-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.country-tab {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slate);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.country-tab:hover {
  color: var(--ink);
  border-color: var(--verified);
}
.country-tab.active {
  /* fixed accent: --verified-dark goes pale in dark mode, so white text vanished on it */
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--on-dark);
}
.country-tab:focus-visible {
  outline: 2px solid var(--verified);
  outline-offset: 2px;
}
.country-panel[hidden] { display: none; }

@media (max-width: 560px) {
  .country-tabs { gap: 6px; }
  .country-tab { padding: 8px 13px; font-size: 0.88rem; }
}

/* ============================================================
   LEADERSHIP PROFILES — about.html
   The photo slot holds initials until real headshots are supplied,
   so the layout is final and swapping an <img> in changes nothing
   structural.
   ============================================================ */
.leader {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.leader:last-child { border-bottom: none; }
.leader-photo {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  background: var(--surface-dark);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.leader-body h3 { margin-bottom: 2px; }
.leader-role {
  color: var(--verified);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.leader-expertise {
  font-size: 0.87rem;
  color: var(--slate);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

@media (max-width: 680px) {
  .leader { grid-template-columns: 1fr; gap: 18px; }
  .leader-photo { width: 120px; height: 120px; font-size: 2rem; }
}

/* ============================================================
   GROUPED NAV — dropdowns for Services and Products
   Eleven flat items did fit, but only just and only above
   1100px. Grouping takes the top level to six. Opens on hover
   for a mouse, on focus-within for a keyboard, and on click for
   touch, where hover does not exist.
   ============================================================ */
/* The vertical padding is the hover target, not spacing: without it the group
   is only as tall as its 16px text, so the cursor leaves it the instant it
   starts moving toward the panel and the menu closes before you arrive. The
   negative margin cancels the padding's effect on layout, so the header keeps
   its height. Changing either one without the other reopens the bug. */
/* A conditional step in a flow diagram: visible as optional at a glance,
   rather than only to someone who clicks it. */
.flow-sub {
  font-size: 0.72rem;
  color: var(--slate);
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.25;
}
.flow-node.has-sub, .flow-node:has(.flow-sub) { border-style: dashed; }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.nav-group {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin: -10px 0;
}
.nav-group-btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.nav-group-btn:hover,
.nav-group-btn.active { color: var(--verified-dark); }
.nav-group-btn:focus-visible { outline: 2px solid var(--verified); outline-offset: 3px; }
.nav-chev { transition: transform 0.18s ease; }
.nav-group-btn[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(18, 35, 59, 0.13);
  padding: 8px;
  display: none;
  z-index: 60;
}
/* The group's padding is only as wide as its button, so a cursor moving down
   and to the right can still slip out of it before reaching the wider panel.
   This invisible strip spans the panel's full width and, being a child of the
   dropdown, keeps :hover on the group while the cursor crosses it. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group-btn[aria-expanded="true"] + .nav-dropdown { display: block; }

.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--paper-dim); color: var(--verified-dark); }

/* In the mobile menu the nav is a stacked list, so a floating panel makes no
   sense — the group's links sit inline under its heading instead. */
@media (max-width: 1100px) {
  .nav-group { display: block; width: 100%; padding: 0; margin: 0; }
  .nav-group-btn { display: none; }
  .nav-dropdown::before { display: none; }
  .nav-dropdown {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  .nav-dropdown a { padding: 0; }
}

/* A card whose whole area is clickable. The link stays a real link for screen
   readers and keyboards; the pseudo-element just extends its hit area over the
   card, which is otherwise a few words wide. */
.card-linked { position: relative; }
.card-linked:hover { border-color: var(--verified); }
.card-linked a::after { content: ""; position: absolute; inset: 0; }

/* Regional office cards */
.office-card .office-entity { font-size: 0.86rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.office-card address { font-style: normal; font-size: 0.86rem; color: var(--slate); line-height: 1.5; }
.office-card .office-contact { font-size: 0.86rem; color: var(--slate); margin: 12px 0 0; }

/* Product demo video. preload="none" keeps the 6.5MB off the initial page load —
   only the poster is fetched until someone presses play. Encoded at 720p: the
   player is never wider than ~1120px, so 1080p was three extra megabytes nobody sees. The aspect-ratio box
   stops the page reflowing when the video's own dimensions arrive. */
.demo-video {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-dark);
  box-shadow: 0 14px 34px rgba(18, 35, 59, 0.12);
  aspect-ratio: 16 / 9;
  color: var(--on-dark);
}
.demo-video video { width: 100%; height: 100%; object-fit: contain; color: var(--on-dark); }
.demo-video-caption {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--slate);
  max-width: 74ch;
}