/* ==========================================================================
   Primexa Pay — base, components, layout
   Requires tokens.css to be linked first.
   Covers exactly the classes the built pages use; nothing dead.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grey);
}

/* widths — a section picks one, nothing else sets a width */
.inner { max-width: var(--max); margin: 0 auto; }
.inner-wide { max-width: var(--max-wide); margin: 0 auto; }
.block-wide > .inner { max-width: var(--max-wide); }
.block-bleed > .inner { max-width: var(--max-bleed); margin: 0; }
.measure { max-width: var(--measure); }

/* ---- buttons -------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 10px 17px;
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-700); }
.btn-ghost { border-color: var(--rule-2); color: var(--ink); font-weight: 500; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-lg { padding: 13px 22px; font-size: 15px; }

/* ---- status tags ---------------------------------------------------- */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  vertical-align: middle;
}
.tag-ok   { color: var(--ok);   background: var(--ok-bg); }
.tag-warn { color: var(--warn); background: var(--warn-bg); }
.tag-hot  { color: var(--hot);  background: var(--hot-bg); }

/* ==========================================================================
   Header · regulatory bar · mega menu
   Chrome runs edge to edge: no max-width, edge padding only.
   ========================================================================== */

.bar { position: sticky; top: 0; z-index: 600; background: var(--paper); border-bottom: 1px solid var(--rule); }

.reg {
  background: var(--navy);
  color: #C8CBD8;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .01em;
  padding: 7px var(--box-pad);
  display: flex;
  gap: var(--s-4);
  justify-content: space-between;
  flex-wrap: wrap;
}
.reg b { color: #fff; font-weight: 500; }

/* three columns: brand | menu | actions. Equal flanking fractions keep the
   menu centred whatever the brand or buttons weigh. Columns are assigned
   explicitly so the layout holds when .menu is hidden below 1040px. */
.nav {
  height: var(--nav-h);
  padding: 0 var(--box-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.brand { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 10px; }
.brand svg { width: 26px; height: 26px; color: var(--blue); }
.brand span { font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--ink); letter-spacing: -.03em; }

.menu { grid-column: 2; display: none; gap: 2px; justify-content: center; }
@media (min-width: 1040px) { .menu { display: flex; } }

.menu > button,
.menu > a {
  background: none; border: 0;
  padding: 10px 13px;
  font-size: var(--t-sm);
  color: var(--slate); font-weight: 500;
  display: flex; align-items: center; gap: 5px;
  border-radius: var(--radius);
}
.menu > button:hover, .menu > a:hover { color: var(--ink); background: var(--bone); }
.menu > button[aria-expanded="true"] { color: var(--blue); background: var(--blue-50); }

.caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .16s;
}
.menu > button[aria-expanded="true"] .caret { transform: rotate(-135deg) translate(-3px,-3px); }

.actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--s-2); }
/* between the mega breakpoint and ~1200px the columns tighten — drop the
   secondary action first so the centre column keeps its position */
@media (max-width: 1200px) { .actions .btn-ghost { display: none; } }

.burger { display: flex; flex-direction: column; gap: 4px; padding: 11px; border: 1px solid var(--rule-2); background: none; border-radius: var(--radius); }
@media (min-width: 1040px) { .burger { display: none; } }
.burger i { width: 17px; height: 1.5px; background: var(--ink); display: block; }

.mega {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 20px 40px -24px rgba(10,10,30,.28);
}
.mega.is-open { display: block; }
.mega-in { padding: 30px var(--box-pad) 34px; display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .mega-in { grid-template-columns: repeat(3, 1fr) .9fr; } }

.mega-col h4 { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .13em; text-transform: uppercase; color: var(--grey); margin-bottom: var(--s-3); font-weight: 500; }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mega-col li a {
  display: block; padding: 8px 10px; margin-left: -10px;
  border-radius: var(--radius);
  font-size: var(--t-sm); color: var(--ink); font-weight: 500; line-height: 1.35;
}
.mega-col li a small { display: block; font-weight: 400; font-size: 12.5px; color: var(--grey); margin-top: 2px; }
.mega-col li a:hover { background: var(--blue-50); color: var(--blue); }

.mega-feature { background: var(--bone); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; }
.mega-feature .kicker { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.mega-feature h5 { font-size: 18px; margin: 9px 0 6px; font-weight: 600; }
.mega-feature p { font-size: 13.5px; margin: 0 0 var(--s-3); line-height: 1.5; }
.mega-feature a { font-size: 13.5px; font-weight: 600; color: var(--blue); }

.scrim { position: fixed; inset: var(--nav-h) 0 0; background: rgba(6,8,24,.28); z-index: 500; display: none; }
.scrim.is-open { display: block; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; background: var(--paper); z-index: 700; display: none; overflow-y: auto; padding: 18px var(--edge) 60px; }
.drawer.is-open { display: block; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.drawer details { border-bottom: 1px solid var(--rule); }
.drawer summary { padding: 15px 0; font-family: var(--display); font-size: 17px; color: var(--ink); font-weight: 500; list-style: none; display: flex; justify-content: space-between; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; color: var(--blue); font-size: 19px; }
.drawer details[open] summary::after { content: "–"; }
.drawer details ul { list-style: none; margin: 0; padding: 0 0 var(--s-3); }
.drawer details li a { display: block; padding: 8px 0; font-size: var(--t-sm); color: var(--slate); }

/* ==========================================================================
   Hero — full-bleed photograph, boxed copy
   ========================================================================== */

.hero-photo {
  position: relative;
  padding: clamp(72px,10vw,140px) var(--edge) clamp(56px,7vw,104px);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  min-height: clamp(460px, 62vh, 720px);
  display: flex;
  align-items: center;
}
.hero-photo picture { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

/* directional scrim: heaviest where the type sits */
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(1,0,40,.90) 0%, rgba(1,0,40,.74) 32%, rgba(1,0,40,.28) 62%, rgba(1,0,40,.12) 100%),
    linear-gradient(to top, rgba(1,0,40,.55) 0%, transparent 42%);
}
/* hairline grid, carried over from the current site */
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14;
  background-image: linear-gradient(to right, #fff 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}

.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin: 0 0 22px; }

.hero-photo .hero-in { max-width: var(--max); margin: 0 auto; width: 100%; position: relative; }
.hero-photo .eyebrow { color: #93A7FF; margin: 0 0 22px; }

.hero-photo h1 {
  color: #fff;
  font-size: clamp(40px,6.4vw,76px);
  line-height: 1.0;
  letter-spacing: -.04em;
  font-weight: 500;
  max-width: 13ch;
}
.hero-photo h1 .rot {
  color: #93A7FF; display: inline-block;
  min-width: 7.4ch;
  text-align: left;
}
.hero-photo .sub {
  color: #C2CAE8;
  font-size: clamp(16px,1.7vw,19px);
  max-width: 46ch;
  margin: 22px 0 0;
}
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; }
.hero-photo .hero-actions { margin-top: 30px; }
.hero-photo .btn-primary { background: #fff; color: var(--navy); }
.hero-photo .btn-primary:hover { background: #E7EBFD; }
.hero-photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,.34); }
.hero-photo .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.hero-photo .note { max-width: 46ch; }

@media (max-width: 700px) { .hero-photo img { object-position: center 38%; } }

/* ==========================================================================
   Partner bank strip
   ========================================================================== */

.logos {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 16px var(--edge) 18px;
}
/* the strip's rule spans the viewport; the marquee is clipped at the box, so
   logos enter and leave on the same line the rest of the page starts on */
.logos-clip { overflow: hidden; position: relative; }
.logos .cap {
  text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--grey); margin: 0 0 14px;
}
/* fade both ends so the loop has no hard edge */
.logos-clip::before, .logos-clip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px,8vw,130px);
  z-index: 2; pointer-events: none;
}
.logos-clip::before { left: 0;  background: linear-gradient(to right, var(--paper), transparent); }
.logos-clip::after  { right: 0; background: linear-gradient(to left,  var(--paper), transparent); }

.logos-track {
  display: flex; align-items: center; gap: clamp(38px,5vw,72px);
  width: max-content; animation: logoslide 42s linear infinite;
}
.logos-clip:hover .logos-track { animation-play-state: paused; }
@keyframes logoslide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logos-track img {
  height: clamp(20px, 2.2vw, 27px);
  width: auto; flex: none;
  filter: grayscale(1);
  opacity: .48;
  transition: opacity .22s, filter .22s;
}
.logos-track img:hover { filter: grayscale(0); opacity: 1; }
.logos-track img[alt="Currencycloud"] { height: clamp(26px, 2.9vw, 36px); }
.logos-track img[alt="Equals Money"]  { height: clamp(17px, 1.9vw, 23px); }
.logos-track img[alt="Agility FX"]    { height: clamp(22px, 2.5vw, 30px); }

/* ==========================================================================
   Sections
   ========================================================================== */

.block { padding: var(--s-9) var(--edge); border-bottom: 1px solid var(--rule); }

/* One heading treatment for every section: eyebrow, title and the sentence
   that qualifies it, stacked and centred on a narrow measure. Any section
   action sits centred beneath. Taken from the banking-network head, which
   read best, and applied throughout so the page has a single rhythm. */
.sec-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 780px; margin: 0 auto 52px; gap: 16px;
}
.sec-head h2 { font-size: var(--t-h2); line-height: 1.12; }
.sec-head h2 em { font-style: normal; color: var(--blue); }
.sec-head .label { display: block; margin-bottom: 14px; }
.sec-aside { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sec-aside p { margin: 0; max-width: 58ch; font-size: 15.5px; line-height: 1.55; }

/* sector grid */
.sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.sectors a { background: var(--paper); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 7px; min-height: 132px; }
.sectors a:hover { background: var(--blue-50); }
.sectors .nm { font-family: var(--display); font-size: 17px; color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
.sectors .ex { font-size: var(--t-xs); color: var(--grey); line-height: 1.45; }

/* ---- bento ---------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.bento > * { grid-column: span 12; }
@media (min-width: 720px) {
  .b3 { grid-column: span 6; }
  .b4 { grid-column: span 6; }
  .b5 { grid-column: span 6; }
  .b6 { grid-column: span 6; }
  .b7 { grid-column: span 12; }
}
@media (min-width: 1000px) {
  .b3 { grid-column: span 3; }
  .b4 { grid-column: span 4; }
  .b5 { grid-column: span 5; }
  .b6 { grid-column: span 6; }
  .b7 { grid-column: span 7; }
  .rspan2 { grid-row: span 2; }
}

.tile {
  border: 1px solid var(--rule); border-radius: 14px; padding: 24px;
  background: var(--paper); display: flex; flex-direction: column; gap: 10px;
  min-height: 168px; position: relative; overflow: hidden;
  transition: border-color .18s, transform .18s;
}
a.tile:hover { border-color: var(--blue); transform: translateY(-2px); }
.tile .kick { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }
.tile h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.tile p { margin: 0; font-size: 14px; line-height: 1.5; }
.tile .more { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--blue); }

.tile-blue { background: var(--blue); border-color: var(--blue); color: #D9E0FF; }
.tile-blue h3, .tile-blue .fig { color: #fff; }
.tile-blue .kick { color: #A8B8FF; }
.tile-blue .more { color: #fff; }
.tile-dark { background: var(--navy); border-color: var(--navy); color: #A8ADC2; }
.tile-dark h3, .tile-dark .fig { color: #fff; }
.tile-dark .kick { color: #7E85A6; }
.tile-bone { background: var(--bone); }

.tile .fig {
  font-family: var(--display); font-size: clamp(34px,4.4vw,52px); line-height: 1;
  letter-spacing: -.035em; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums;
}
.tile-stat { justify-content: center; min-height: 148px; }

/* chevron watermark */
.motif {
  position: absolute; right: -18px; bottom: -22px; width: 132px; height: 132px;
  opacity: .07; pointer-events: none; color: currentColor;
}
.tile-blue .motif, .tile-dark .motif { opacity: .14; color: #fff; }

/* ---- slider --------------------------------------------------------- */
.slider-wrap { position: relative; }
.slider {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.slider::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 min(430px, 84vw); scroll-snap-align: start; }
.slider-nav { display: flex; gap: 8px; margin-top: 18px; }
.snav {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2);
  background: var(--paper); color: var(--ink); display: grid; place-items: center; font-size: 15px;
}
.snav:hover { border-color: var(--blue); color: var(--blue); }
.snav[disabled] { opacity: .35; cursor: default; }
.snav[disabled]:hover { border-color: var(--rule-2); color: var(--ink); }

/* sector slide */
.scene {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); height: 100%;
  display: flex; flex-direction: column; background: var(--paper);
}
.scene .art { height: 176px; position: relative; overflow: hidden; }
.scene .art::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 34px 100%;
}
.scene .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.scene h3 { font-size: 18px; font-weight: 600; }
.scene p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.scene .more { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--blue); }

/* quote card */
/* Testimonial: company, quote, attribution, then a two-cell footer. Light
   rather than the reference's dark, because the site is committed to light. */
.tq {
  margin: 0; height: 100%;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper);
  display: flex; flex-direction: column; overflow: hidden;
}
.tq-body { padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 18px; flex: 1; text-align: center; }
.tq-co {
  margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--grey);
}
.tq blockquote {
  margin: 0; font-family: var(--display); font-size: 17.5px; line-height: 1.45;
  color: var(--ink); font-weight: 400; letter-spacing: -.015em; text-wrap: balance;
}
.tq blockquote::before { content: "\201C"; margin-right: 2px; color: var(--rule-2); }
.tq blockquote::after  { content: "\201D"; margin-left: 2px;  color: var(--rule-2); }
.tq .who { margin-top: auto; display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left; }
.tq .av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--blue-100); color: var(--blue);
  display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 15px; flex: none;
}
.tq .nm { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.tq .rl { font-size: 12.5px; color: var(--grey); }

.tq-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.tq-cell {
  padding: 16px 14px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 4px; color: var(--blue);
}
.tq-cell + .tq-cell { border-left: 1px solid var(--rule); }
.tq-cell svg { width: 17px; height: 17px; margin-bottom: 3px; }
.tq-cell b { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tq-cell span { font-size: 11.5px; line-height: 1.35; color: var(--slate); }

/* ==========================================================================
   Article / interior page
   ========================================================================== */

.crumbs { font-family: var(--mono); font-size: 11.5px; color: var(--grey); padding: 16px var(--edge); border-bottom: 1px solid var(--rule); }
.crumbs a:hover { color: var(--blue); }
.crumbs span { margin: 0 6px; }

.page { padding: var(--s-8) var(--edge) var(--s-9); }
.page-in { max-width: 920px; margin: 0 auto; }
.page h1 { font-size: var(--t-h1); line-height: 1.06; margin-bottom: var(--s-4); }
.page h2 { font-size: 27px; margin: var(--s-8) 0 var(--s-3); }
.page h3 { font-size: var(--t-h3); margin: var(--s-6) 0 var(--s-2); font-weight: 600; }
.page p { max-width: var(--measure); margin: var(--s-4) 0; }
.page .standfirst { font-size: 19px; line-height: 1.5; color: var(--slate); max-width: 60ch; }
.page ul, .page ol { max-width: var(--measure); padding-left: 22px; }
.page li { margin: var(--s-2) 0; }
.page strong { color: var(--ink); font-weight: 600; }

/* worked example — the differentiator neither incumbent has */
.worked { border: 1px solid var(--rule-2); border-radius: var(--radius-lg); overflow: hidden; margin: var(--s-6) 0; }
.worked header { background: var(--bone); padding: 16px 22px; border-bottom: 1px solid var(--rule); }
.worked header .label { color: var(--blue); }
.worked header h3 { margin: 6px 0 0; font-size: 19px; font-weight: 600; }
.worked table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.worked th { text-align: left; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); font-weight: 500; padding: 14px 22px 10px; border-bottom: 1px solid var(--rule); }
.worked td { padding: 12px 22px; border-bottom: 1px solid var(--rule); }
.worked td:last-child, .worked th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.worked tr:last-child td { border-bottom: 0; }
.worked tr.total td { background: var(--blue-50); font-weight: 600; color: var(--ink); }
.worked footer { padding: 16px 22px; background: var(--bone); border-top: 1px solid var(--rule); font-size: 13.5px; }

/* FAQ — the FAQPage schema target */
.faq { border-top: 1px solid var(--rule-2); margin-top: var(--s-7); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { padding: 18px 0; font-family: var(--display); font-size: var(--t-h4); color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 20px; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 20px; max-width: var(--measure); }
.faq .answer p:first-child { margin-top: 0; }

/* named specialist */
.author {
  display: flex; gap: var(--s-4); align-items: center; border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 18px 20px; margin: var(--s-7) 0 0; background: var(--bone);
}
.author .avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--blue-100); color: var(--blue);
  display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 18px; flex: none;
}
.author .who { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 15.5px; }
.author .role { font-size: 13px; color: var(--grey); margin-top: 2px; }

/* ==========================================================================
   Closing band
   One navy surface carries the call to action, and the footer sits on it as a
   white card rather than as a second strip. Navy rather than the brand blue:
   at this size #183DEB is too loud, and keeping it for the buttons lets the
   accent still read against the band.
   ========================================================================== */

.close {
  background: var(--navy);
  padding: clamp(64px, 9vw, 112px) var(--edge) clamp(26px, 3.5vw, 44px);
}
.close-in { text-align: center; max-width: 820px; margin: 0 auto clamp(46px, 6vw, 78px); }
.close-in h2 {
  color: #fff; font-size: clamp(32px, 5vw, 58px); line-height: 1.04;
  letter-spacing: -.035em; font-weight: 500;
}
.close-in p { color: #B4BCDB; margin: 18px auto 0; max-width: 54ch; font-size: 16px; line-height: 1.55; }
.close-in .btn { margin-top: 32px; background: #fff; color: var(--navy); border-color: #fff; }
.close-in .btn:hover { background: #E7EBFD; }

/* the card */
/* the card runs to the wide measure, not the reading box: six columns of
   links want the room, and it reads as a surface inset from the band */
.site-footer {
  background: var(--paper); border-radius: 18px;
  padding: clamp(30px, 3.6vw, 48px) clamp(26px, 3.2vw, 52px);
  max-width: var(--max-wide); margin: 0 auto;
}

/* the lockup, a step up from the header's so the card has its own masthead */
.fbrand {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: clamp(30px, 3.4vw, 44px); color: var(--blue);
}
.fbrand svg { width: 34px; height: 34px; }
.fbrand span {
  font-family: var(--display); font-weight: 600; font-size: 27px;
  color: var(--ink); letter-spacing: -.035em;
}

.fmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 30px 34px; }
.fmap h4 {
  font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink);
  letter-spacing: -.015em; margin-bottom: var(--s-3);
}
.fmap ul { list-style: none; margin: 0; padding: 0; }
.fmap li { margin: 9px 0; }
.fmap li a { font-size: 13.5px; color: var(--slate); }
.fmap li a:hover { color: var(--blue); }

/* action left, the ways to reach a human right — the reference's bottom row */
.frow {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5); flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 48px); padding-top: 26px; border-top: 1px solid var(--rule);
}
.fcontact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--slate); }
.fcontact a { color: var(--ink); font-weight: 500; }
.fcontact a:hover { color: var(--blue); }

/* the disclosure stays inside the card, where it is legible on white */
.flegal {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 10.5px; line-height: 1.55; color: var(--grey);
}
.flegal span { display: block; }
.flegal span + span { margin-top: 7px; }

/* ==========================================================================
   Proposal annotations — remove before launch
   ========================================================================== */

.anno-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 900;
  background: var(--ink); color: var(--paper);
  padding: 9px 14px; border: 0; border-radius: 99px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.note {
  display: none; border-left: 3px solid var(--blue); background: var(--blue-50);
  padding: 12px 15px; margin: var(--s-3) 0; font-size: 13.5px; line-height: 1.55; max-width: 64ch;
}
.note b {
  color: var(--blue); font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .11em; text-transform: uppercase; display: block; margin-bottom: 5px;
}
body.show-notes .note { display: block; }

/* ==========================================================================
   Illustrated bento tiles
   Each tile leads with a drawn diagram of the thing it sells, then names it.
   Illustrations are inline SVG so they take their colour from the tokens.
   ========================================================================== */

.tile-illo { padding: 14px; }
.tile-illo > :not(.illo) { padding-inline: 8px; }
.tile-illo .more { padding-top: 14px; }

.illo {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 10px;
  height: 176px;
  padding: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.illo-lg { height: 216px; }
.illo svg { width: 100%; height: 100%; display: block; font-family: var(--text); }

/* --- shared illustration vocabulary --- */
.illo .il-row rect,
.illo .il-payee rect,
.illo .il-bub rect { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.illo .il-cur   { font-family: var(--display); font-size: 12px; font-weight: 600; fill: var(--ink); }
.illo .il-meta  { font-family: var(--mono); font-size: 9px; fill: var(--grey); }
.illo .il-num   { font-family: var(--mono); font-size: 11.5px; fill: var(--ink); text-anchor: end; font-variant-numeric: tabular-nums; }
.illo .il-chip rect { fill: var(--blue-100); }
.illo .il-chiptx { font-family: var(--mono); font-size: 9px; fill: var(--blue); text-anchor: middle; letter-spacing: .04em; }
.illo .il-tag   { font-family: var(--mono); font-size: 9.5px; fill: var(--blue); letter-spacing: .04em; }

/* rate chart */
.illo .il-grid line { stroke: var(--rule); stroke-width: 1; }
.illo .il-area  { fill: var(--blue); opacity: .07; }
.illo .il-line  { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.illo .il-target{ stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .55; }
.illo .il-halo  { fill: var(--blue); opacity: .18; }
.illo .il-dot   { fill: var(--blue); stroke: var(--paper); stroke-width: 2; }
.illo .il-call rect { fill: var(--navy); }
.illo .il-callt { font-family: var(--display); font-size: 11.5px; font-weight: 600; fill: #fff; }
.illo .il-callm { font-family: var(--mono); font-size: 9px; fill: #A8B8FF; }
.illo .il-leader{ stroke: var(--navy); stroke-width: 1; }

/* forward timeline */
.illo .il-band  { fill: var(--blue-100); }
.illo .il-fixed { stroke: var(--blue); stroke-width: 2; }
.illo .il-drift { fill: none; stroke: var(--grey); stroke-width: 1.5; stroke-dasharray: 3 3; }
.illo .il-driftt{ font-family: var(--mono); font-size: 9px; fill: var(--grey); }
.illo .il-axis line { stroke: var(--rule-2); stroke-width: 1; }

/* payout fan */
.illo .il-fan path { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: .38; }
.illo .il-node rect { fill: var(--navy); }
.illo .il-pay   { font-size: 10.5px; fill: var(--ink); }
.illo .il-pay-dim { fill: var(--grey); }

/* dealer thread */
.illo .il-bub-me rect { fill: var(--blue); stroke: none; }
.illo .il-bubt  { font-size: 11px; fill: var(--ink); }
.illo .il-bubt-me { fill: #fff; }
.illo .il-time  { font-family: var(--mono); font-size: 8.5px; fill: var(--grey); }

/* ==========================================================================
   Banking-network map
   Rails on the left, Primexa as the single hub, the client's account on the
   right. Each wire is coloured to its partner and the same four colours
   reappear as the row markers in the panel, so one payment can be traced
   from the rail that received it to the line that reports it.
   Geometry lives in one 1180x460 coordinate space: the SVG uses it as a
   viewBox, the cards use it as percentages, so the two never drift apart.
   ========================================================================== */


.map-stage { position: relative; aspect-ratio: 1180 / 460; max-width: 1180px; margin: 0 auto; }

.map-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-wires path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-wires .map-out line { stroke: var(--rule-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.map-cap { position: absolute; top: 4%; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.map-cap-l { left: 0; }
.map-cap-r { left: 62.373%; top: 9.6%; }

.map-rail {
  position: absolute; left: 0; top: var(--y);
  width: 22.712%; height: 16.522%;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 2px 10px -6px rgba(10,10,30,.28);
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding: 0 16px;
}
.map-rail img { height: 21px; width: auto; object-fit: contain; object-position: left center; }
/* the supplied lockups are different shapes — size each to a common optical weight */
.map-rail img[alt="Currencycloud"] { height: 32px; }
.map-rail img[alt="Agility FX"]    { height: 25px; }
.map-rail img[alt="Equals Money"]  { height: 19px; }
.map-rail span { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; color: var(--grey); }
.map-wm { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }

.map-hub {
  position: absolute; left: 44.407%; top: 35.652%;
  width: 11.186%; height: 28.696%;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 20px;
  box-shadow: 0 12px 32px -14px rgba(10,10,30,.34);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  color: var(--blue);
}
.map-hub svg { width: 32px; height: 32px; }
.map-hub b { font-family: var(--display); font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }

.map-panel {
  position: absolute; left: 62.373%; top: 15.217%;
  width: 37.627%; height: 69.565%;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 16px 42px -22px rgba(10,10,30,.38);
  overflow: hidden; display: flex; flex-direction: column;
}
.mp-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--bone); }
.mp-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); }
.mp-top span { margin-left: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.mp-rows { list-style: none; margin: 0; padding: 5px 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mp-rows li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 14px; }
.mp-rows em { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; margin-top: 5px; }
.mp-rows b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mp-rows span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--slate); }
.mp-foot { margin: 0; padding: 9px 14px; border-top: 1px solid var(--rule); background: var(--bone); font-size: 10.5px; line-height: 1.4; color: var(--grey); }

/* below the breakpoint the wires cannot survive, so the same cards stack in
   reading order and the diagram becomes a list */
@media (max-width: 900px) {
  .map-stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 10px; }
  .map-wires { display: none; }
  .map-rail, .map-hub, .map-panel, .map-cap { position: static; width: auto; height: auto; }
  .map-cap { display: block; }
  .map-cap-l { order: 1; }
  .map-rail { order: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; }
  .map-rail span { text-align: right; }
  .map-hub { order: 3; flex-direction: row; gap: 12px; padding: 16px; }
  .map-cap-r { order: 4; margin-top: 8px; }
  .map-panel { order: 5; }
}

/* ==========================================================================
   Industry section — three candidate treatments (options page only)
   All three render from one dataset, so they differ in layout, never in claim.
   ========================================================================== */

.opt { border-bottom: 1px solid var(--rule-2); }
.opt-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 34px; }
.opt-badge {
  flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--paper); background: var(--ink);
  padding: 6px 10px; border-radius: 4px; margin-top: 4px;
}
.opt-head h2 { font-size: 27px; }
.opt-head p { margin: 8px 0 0; max-width: 62ch; font-size: 15px; }
.opt-verdict { margin: 26px 0 0; max-width: 72ch; font-size: 13.5px; color: var(--slate); }
.opt-verdict b { color: var(--ink); }

/* the drawn mark, shared by all three */
.sg { width: 22px; height: 22px; flex: none; }

/* ---- A. Exposure wall ------------------------------------------------ */
.ow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.ow-card {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--rule); border-radius: 12px; padding: 12px;
  background: var(--paper); transition: border-color .16s, transform .16s;
}
.ow-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.ow-art {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bone); border-radius: 8px; padding: 14px 12px; margin-bottom: 8px;
  color: var(--blue);
}
.ow-card:hover .ow-art { background: var(--blue-50); }
.ow-art .sg { width: 30px; height: 30px; }
.ow-pair { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--grey); font-weight: 400; }
.ow-nm { font-family: var(--display); font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -.015em; }
.ow-ex { font-size: 12px; line-height: 1.4; color: var(--slate); }

/* ---- B. Sector index ------------------------------------------------- */
.sx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px 26px; }
.sx-col h4 {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .13em;
  text-transform: uppercase; color: var(--grey); font-weight: 500;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-2); margin-bottom: 6px;
}
.sx-col ul { list-style: none; margin: 0; padding: 0; }
.sx-col li + li { border-top: 1px solid var(--rule); }
.sx-col a { display: flex; gap: 11px; align-items: flex-start; padding: 11px 8px 11px 0; color: var(--blue); }
.sx-col a:hover { color: var(--blue-700); }
.sx-col a:hover b { color: var(--blue); }
.sx-col .sg { margin-top: 1px; }
.sx-col b { display: block; font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; letter-spacing: -.015em; }
.sx-col i { display: block; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--slate); margin-top: 3px; }

/* ---- C. Weighted mosaic ---------------------------------------------- */
.mo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-auto-flow: dense; align-items: stretch; }
/* a feature spans two columns AND two rows, so four chips sit beside it and
   no cell is stretched to fill space its content does not need */
.mo-feat {
  grid-column: 1 / span 2; grid-row: span 2;
  position: relative; overflow: hidden;
  border-radius: 14px; display: flex; align-items: flex-end;
  color: #fff; isolation: isolate;
}
.mo-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mo-feat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(1,0,40,.92) 6%, rgba(1,0,40,.55) 46%, rgba(1,0,40,.18) 100%);
}
.mo-in { padding: 22px; display: block; }
.mo-kick { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #93A7FF; font-weight: 400; }
.mo-feat h3 { color: #fff; font-size: 23px; margin: 8px 0 6px; font-weight: 600; }
.mo-feat p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #C2CAE8; max-width: 38ch; }
.mo-more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: #fff; }

.mo-chip {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: 12px; padding: 14px;
  background: var(--paper); color: var(--blue); transition: border-color .16s, background .16s;
}
.mo-chip:hover { border-color: var(--blue); background: var(--blue-50); }
.mo-chip b { display: block; font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; letter-spacing: -.015em; }
.mo-chip i { display: block; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--slate); margin-top: 3px; }

@media (max-width: 900px) {
  .mo-grid { grid-template-columns: repeat(2, 1fr); }
  .mo-feat { grid-column: 1 / span 2; grid-row: auto; min-height: 220px; }
  .opt-head { flex-direction: column; gap: 12px; }
}
@media (max-width: 560px) {
  .mo-grid { grid-template-columns: 1fr; }
  .mo-feat { grid-column: 1; grid-row: auto; }
}

/* ==========================================================================
   Industry ribbon — endless marquee (options D and E)
   The card set is printed twice and the track travels exactly -50%, so the
   loop closes on itself. Motion stops on hover and on keyboard focus,
   because copy that moves cannot be read.
   ========================================================================== */

.rib { display: flex; flex-direction: column; gap: 14px; }
.rib-row { overflow: hidden; position: relative; }
/* Just enough fade to soften the cut where a card leaves the box — narrow,
   and weighted to the outer edge so the picture stays readable to its margin. */
.rib-row::before, .rib-row::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(14px, 1.6vw, 28px);
  z-index: 2; pointer-events: none;
}
.rib-row::before { left: 0;  background: linear-gradient(to right, var(--paper) 12%, transparent 100%); }
.rib-row::after  { right: 0; background: linear-gradient(to left,  var(--paper) 12%, transparent 100%); }

.rib-track {
  display: flex; gap: 14px; width: max-content;
  animation: ribslide 64s linear infinite;
}
.rib-rev .rib-track { animation-direction: reverse; }
.rib-row:hover .rib-track,
.rib-row:focus-within .rib-track { animation-play-state: paused; }
@keyframes ribslide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rib-card {
  flex: none; width: 286px;
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--rule); border-radius: 12px; padding: 10px;
  background: var(--paper); transition: border-color .16s;
}
.rib-card:hover { border-color: var(--blue); }

.rib-art {
  position: relative; overflow: hidden; border-radius: 8px;
  height: 138px; margin-bottom: 6px; display: block; background: var(--bone);
}
/* The photographs are already shot to one cool, airy key, so they are shown
   as they are — no duotone, no scrim. Legibility for the sector mark comes
   from the chip it sits in, not from darkening the picture. */
.rib-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the earlier sector shots run warmer and heavier than the generated set;
   this is the smallest correction that brings them into the same key */
/* One light key across three image sources. The correction is graded to each
   frame's measured luminance so stock and generated frames sit together. */
.rib-art.is-legacy img { filter: saturate(.68) brightness(1.06) contrast(.97); }
.rib-art.is-lift   img { filter: saturate(.80) brightness(1.15) contrast(.96); }
.rib-art.is-lift-2 img { filter: saturate(.70) brightness(1.46) contrast(.90); }

/* cards with no photograph yet: a pale panel from the brand tints, so an
   empty slot reads as a considered surface rather than a hole */
.rib-card.g0 .rib-art { background: linear-gradient(145deg,#EDF1FE 0%,#DAE2FB 100%); }
.rib-card.g1 .rib-art { background: linear-gradient(145deg,#F3F5F8 0%,#E1E7F1 100%); }
.rib-card.g2 .rib-art { background: linear-gradient(145deg,#EBF3FB 0%,#D8E7F5 100%); }
.rib-card.g3 .rib-art { background: linear-gradient(145deg,#F1F0FA 0%,#DFDDF5 100%); }
.rib-card.g4 .rib-art { background: linear-gradient(145deg,#F4F6F9 0%,#E5EAF2 100%); }

.rib-chip {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 8px rgba(10,10,30,.16);
  display: grid; place-items: center; color: var(--blue);
}
.rib-chip .sg { width: 18px; height: 18px; }

.rib-nm { font-family: var(--display); font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -.015em; }
.rib-ex { font-size: 12px; line-height: 1.4; color: var(--slate); }

/* cards in E are pickers as well as links, so they say so */
.rib-pick { cursor: pointer; }

/* ---- E: the still surface that does the explaining -------------------- */
.rp {
  margin-top: 16px; border: 1px solid var(--rule); border-radius: 14px;
  background: var(--bone); padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap;
}
.rp-grp { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--blue); }
.rp-nm { font-size: 23px; margin: 7px 0 5px; font-weight: 600; }
.rp-ex { margin: 0; font-size: 14.5px; max-width: 56ch; }
.rp-r { text-align: right; flex: none; }
.rp-lab { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.rp-pair { display: block; font-family: var(--display); font-size: 19px; color: var(--ink); margin-top: 5px; letter-spacing: -.02em; }
.rp-go { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--blue); }

@media (max-width: 620px) {
  .rib-card { width: 232px; }
  .rib-art { height: 116px; }
  .rp { flex-direction: column; align-items: flex-start; gap: 18px; }
  .rp-r { text-align: left; }
}

/* with motion suppressed the ribbon becomes an ordinary scrollable row */
@media (prefers-reduced-motion: reduce) {
  .rib-row { overflow-x: auto; }
  .rib-track { animation: none; }
}

/* ==========================================================================
   Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slider { scroll-behavior: auto; }
}

@media print {
  .bar, .scrim, .drawer, .anno-toggle, .close-in, .logos { display: none !important; }
  body { font-size: 11pt; }
  .block, .page { padding: 0 0 24pt; border: 0; }
  a { text-decoration: none; }
}