:root{
  /* Indigo palette. deep carries white at 11.96:1, mid at 5.76:1, and cyan
     carries neither -- it is an accent ON deep, or a surface holding deep text.
     panel is deep mixed 30% toward black, for full-bleed dark bands and the
     footer, where deep alone sits too light. */
  --deep:#352D6F; --mid:#5361A8; --cyan:#8DDCF1; --accent:#6366F1; --accent-2:#4F46E5;
  --navy:#352D6F; --navy2:#2E2660; --panel:#251F4E;
  --teal:#5361A8; --teal-br:#8DDCF1; --teal-dk:#5361A8; --teal-dp:#352D6F;
  --off:#F8F8FA; --card:#E8F8FC; --line:#EBEAF1; --text:#262238;
  /* secondary text, re-derived for indigo: the old #5B6B7A sat at hue 209,
     a blue-green from the teal palette, and read faint at 5.48:1 beside
     headings at 11.96. This is hue 245, matching deep, at 8.27:1. */
  --sub:#4E4C63;
  --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Calibri,"Segoe UI",system-ui,sans-serif;color:var(--text);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif}
a{color:var(--teal-dk)}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.accent{height:5px;background:var(--teal)}

/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;
  background:#F6F6F9;border-bottom:1px solid var(--line);
  transition:background .16s ease;
  position:relative;z-index:60;
  padding:20px max(32px,calc((100vw - 1120px)/2 + 32px))}
.logo{font-weight:700;font-size:20px;letter-spacing:.14em;color:var(--navy);text-decoration:none}
/* Seven top-level items: the bar must never wrap. nowrap on the container keeps
   the items in one row, and nowrap on each label keeps a caret on its own word's
   line. The gap is 18px at every desktop width rather than only the narrow ones,
   which is what leaves clearance to the logo and the CTA at 1280. */
.navlinks{display:flex;flex-wrap:nowrap;gap:18px;font-size:14.5px}
.navlinks>a,.navlinks .dd>a{white-space:nowrap}
.navlinks a{color:var(--sub);text-decoration:none}
.navlinks a:hover,.navlinks a.on{color:var(--navy);border-bottom:2px solid var(--teal);padding-bottom:2px}
/* dropdown */
.dd{position:relative}
.dd>a{cursor:pointer}
.ddmenu{position:absolute;top:100%;left:-18px;margin-top:10px;background:#fff;border:1px solid var(--line);
        border-top:3px solid var(--teal);border-radius:3px;box-shadow:0 10px 30px rgba(37,31,78,.12);
        min-width:330px;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.14s;z-index:40}
.dd:hover .ddmenu,.dd:focus-within .ddmenu{opacity:1;visibility:visible;transform:translateY(0)}
.ddmenu a{display:block;padding:11px 20px;color:var(--text);border:0;font-size:15px}
.ddmenu a:hover{background:var(--off);border:0;padding-bottom:11px}
.ddmenu a strong{display:block;font-size:15px;color:var(--navy);font-weight:600}
.ddmenu a span{display:block;font-size:12.5px;color:var(--sub);margin-top:2px;line-height:1.35}
/* MOBILE NAV TOGGLE (hidden until the breakpoint) */
.navtoggle{display:none;position:relative;width:44px;height:44px;padding:0;
           background:none;border:0;cursor:pointer}
.navtoggle span,.navtoggle span:before,.navtoggle span:after{
  position:absolute;left:10px;display:block;width:24px;height:2px;
  background:var(--navy);border-radius:2px;transition:transform .18s,background .18s}
.navtoggle span{top:21px}
.navtoggle span:before{content:"";top:-7px;left:0}
.navtoggle span:after{content:"";top:7px;left:0}
nav.open .navtoggle span{background:transparent}
nav.open .navtoggle span:before{transform:translateY(7px) rotate(45deg)}
nav.open .navtoggle span:after{transform:translateY(-7px) rotate(-45deg)}
/* specificity beats .btn{display:inline-block} regardless of source order */
nav .navcta{display:none}

.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 26px;border-radius:4px;text-decoration:none;font-weight:600;font-size:15px}
.btn:hover{background:var(--accent-2)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* HERO */
.hero{background:var(--panel);color:#fff;padding:104px 0 96px}
/* PAGE LABEL: the hero eyebrow doubles as the "you are here" marker */
.eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--teal-br);
         letter-spacing:.18em;font-size:13.5px;font-weight:700;text-transform:uppercase;
         line-height:1.25;margin-bottom:26px;padding:9px 20px 9px 17px;
         background:rgba(141,220,241,.10);border:1px solid rgba(141,220,241,.34);
         border-radius:999px}
.eyebrow:before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
                background:var(--teal-br);box-shadow:0 0 0 3px rgba(141,220,241,.20)}
.hero h1{font-size:50px;line-height:1.14;font-weight:700;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--teal-br)}
.hero p.lede{font-size:20px;color:#D3D1DF;margin-top:22px;max-width:62ch}
/* Lift the emphasised opening clear of the rest of the sentence. Excluded on the
   white and grey heroes, where white text would disappear. */
.hero:not(.hero-resources):not(.hero-about) p.lede strong{color:#fff}
.hero .cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* ===== SECTION-CODED HEROES =====
   The hero background says which part of the site you're in, matching the nav
   menu you arrived from: navy for home, teal for Use Cases, white for
   Resources, grey for About. Doubled classes keep these ahead of .hero/.btn
   regardless of source order. */

/* USE CASES: mid indigo hero.
   This ground has to carry white text, which is what ruled out cyan (1.54:1) and
   the sand (2.02:1) -- both forced the whole hero dark and lost the confident
   white-on-colour treatment. Mid carries white at 5.76:1 and sits 6.9x lighter
   than the products hero, so the two read as the same family at different values.
   It also finally gives cyan a job: the emphasised phrase at 3.74:1, which clears
   the 3:1 bar because the h1 is 50px. */
.hero.hero-usecase{background:var(--mid)}
.hero.hero-usecase h1 em{color:var(--cyan)}
.hero.hero-usecase p.lede{color:#fff}
.hero.hero-usecase .eyebrow{color:var(--deep);background:var(--cyan);border-color:var(--cyan)}
.hero.hero-usecase .eyebrow:before{background:var(--deep);box-shadow:0 0 0 3px rgba(53,45,111,.24)}
.hero.hero-usecase .btn{background:var(--accent);color:#fff}
.hero.hero-usecase .btn:hover{background:var(--accent-2)}
.hero.hero-usecase .btn-ghost{background:transparent;border-color:rgba(255,255,255,.62);color:#fff}
.hero.hero-usecase .btn-ghost:hover{background:rgba(255,255,255,.15)}

.hero.hero-resources{background:#fff;color:var(--text);border-top:1px solid var(--line)}
.hero.hero-resources h1{color:var(--navy)}
.hero.hero-resources h1 em{color:var(--teal-dk)}
.hero.hero-resources p.lede{color:var(--sub)}
/* deep teal chip: the base teal-br label is built for the dark hero and only
   reaches 2.4:1 on white */
.hero.hero-resources .eyebrow{color:#fff;background:#5361A8;border-color:#5361A8}
.hero.hero-resources .eyebrow:before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.hero.hero-resources .btn-ghost{background:transparent;border-color:rgba(37,31,78,.3);color:var(--navy)}
.hero.hero-resources .btn-ghost:hover{background:rgba(37,31,78,.06)}

/* ABOUT: grey hero, navy secondary. */
.hero.hero-about{background:#EDECF3;color:var(--text)}
/* The About headline is a full sentence, longer than the 17ch heroes it shares
   the base rule with. Widening the measure keeps it to three lines. */
.hero.hero-about h1{color:var(--navy);max-width:26ch}
.hero.hero-about h1 em{color:var(--teal-dk)}
.hero.hero-about p.lede{color:#475569}
.hero.hero-about .eyebrow{color:#fff;background:var(--navy);border-color:var(--navy)}
.hero.hero-about .eyebrow:before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.hero.hero-about .btn{background:var(--accent);color:#fff}
.hero.hero-about .btn:hover{background:var(--accent-2)}
.hero.hero-about .btn-ghost{background:transparent;border-color:rgba(37,31,78,.3);color:var(--navy)}
.hero.hero-about .btn-ghost:hover{background:rgba(37,31,78,.06)}

/* STATS */
.stats{background:var(--navy2);color:#fff;padding:24px 0}
.stats .row{display:flex;gap:14px 52px;flex-wrap:wrap;align-items:baseline;justify-content:center}
.stat b{font-family:Georgia,serif;font-size:29px;color:var(--teal-br);margin-right:9px}
.stat span{font-size:15px;color:#DEDCEA}

section{padding:74px 0}
.alt{background:var(--off)}
.dark{background:var(--panel);color:#fff}
.dark h2{color:#fff}.dark .sub{color:#D3D1DF}
h2{font-size:35px;color:var(--navy);line-height:1.2}
h2.sm{font-size:28px}
.sub{color:var(--sub);font-size:18px;margin-top:13px;max-width:68ch}

/* CARDS */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:42px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.pillar{background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal);
  padding:24px 24px 26px;border-radius:10px}
.pillar .num{font-family:Georgia,serif;font-size:25px;font-weight:700;color:var(--teal);display:block;margin-bottom:5px}
.pillar .num-ic{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--card);color:var(--mid);margin-bottom:13px}
.pillar .num-ic svg{width:19px;height:19px}
.pillar h3{font-size:19px;color:var(--navy);margin-bottom:7px}
.pillar p{font-size:15.5px}
.pcard{border:1px solid var(--line);border-top:4px solid var(--teal);
  padding:24px 24px 26px;border-radius:10px;background:#fff}
.pcard h3{font-size:18px;color:var(--navy);margin-bottom:7px}
/* small shorthand label beside a card heading, e.g. B2C / B2B */
.pcard h3 .tag{display:inline-block;margin-left:8px;vertical-align:2px;
  font-family:Calibri,"Segoe UI",system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--teal-dk);background:rgba(83,97,168,.10);
  border:1px solid rgba(83,97,168,.28);border-radius:999px;padding:3px 9px}
.pcard p{font-size:15px}
/* .dcard is a dark-section card: white heading on a translucent white fill.
   Used in a light section it renders white-on-white, which is what happened on
   the enterprises page. This gives it a light-ground form so the misuse degrades
   into something readable rather than invisible. */
section:not(.dark) .dcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--mid)}
section:not(.dark) .dcard h3{color:var(--deep)}
section:not(.dark) .dcard p{color:var(--sub)}
.dcard{background:rgba(255,255,255,.05);border-left:4px solid var(--teal);padding:23px}
.dcard h3{font-size:18px;color:#fff;margin-bottom:7px}
.dcard p{font-size:15px;color:#D3D1DF}

/* AUDIENCE CARDS (home) */
.aud{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.acard{border:1px solid var(--line);border-radius:4px;padding:30px 28px;background:#fff;text-decoration:none;color:inherit;display:block;transition:.15s}
.acard:hover{border-color:var(--teal);box-shadow:0 6px 22px rgba(37,31,78,.09);transform:translateY(-2px)}
.acard h3{font-size:21px;color:var(--navy);margin-bottom:9px}
.acard p{font-size:15.5px;color:var(--text)}
.acard .more{color:var(--teal-dk);font-weight:600;font-size:15px;margin-top:16px;display:inline-block}

/* ARCH */
.arch{background:var(--panel);color:#fff;border-radius:6px;padding:44px 38px;margin-top:42px}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:center;text-align:center}
.node{border:1.5px solid rgba(235,234,241,.6);border-radius:30px;padding:9px 6px;font-size:14px;margin-bottom:9px}
.flowlab{font-weight:700;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
         color:var(--teal-br);margin-top:20px}
/* The phone-only stacked diagram's flow arrows, which appear on two different
   grounds. Cyan is right on the dark .arch panel the use-case pages carry, and
   all but vanishes at 1.54:1 on the homepage's white .arch-light. One value
   cannot serve both, so the light variant overrides. */
.arrow{color:var(--teal-br);font-size:26px}
.arch-light .arrow{color:var(--mid)}
.archttl{font-family:Georgia,serif;font-weight:700;font-size:17px;color:#fff;text-align:center;margin-bottom:22px}
.shield{display:block;margin:0 auto;filter:drop-shadow(0 8px 30px rgba(141,220,241,.45))}
.bench{display:flex;gap:8px;justify-content:center;margin-top:15px;flex-wrap:wrap}
.bench span{border:1.5px solid rgba(235,234,241,.6);border-radius:20px;padding:5px 13px;font-size:13px}

/* HOMEPAGE VARIANT of the architecture diagram.
   The four audience pages carry the same diagram on the dark panel with their
   own workbench labels, so this is a modifier rather than a change to .arch:
   a white frame for the grey section it sits in on the homepage, with the
   explainability band as the one dark element so it reads as a floor. */
.arch.arch-light{background:#fff;color:var(--text);border-radius:14px;padding:8px 38px 14px;
  margin-top:16px;
  box-shadow:0 1px 2px rgba(37,31,78,.05),0 18px 40px -26px rgba(37,31,78,.30)}
.arch-light .archttl{font-size:21px;color:var(--deep);margin-bottom:5px;letter-spacing:-.005em}
.arch-light .archsub{font-size:14.5px;color:var(--mid);text-align:center;margin:0 0 24px;
  font-weight:600}
.arch-light .archsvg .ring{stroke:rgba(83,97,168,.20)}
.arch-light .archsvg .ring2{stroke:rgba(83,97,168,.16)}
.arch-light .archsvg .nrect{fill:#fff;stroke:#D9D7E6}
.arch-light .archsvg .ntxt{fill:var(--deep)}
.arch-light .archsvg .btxt{fill:var(--deep);font-weight:700}
.arch-light .archsvg .lnk{stroke-width:2}
.arch-light .archsvg .lnk-dn,.arch-light .archsvg .stub{stroke:rgba(83,97,168,.8);stroke-width:2}
.arch-light .archsvg .ring{stroke:rgba(83,97,168,.28)}
.arch-light .archsvg .ring2{stroke:rgba(83,97,168,.22)}
.arch-light .archsvg .tip{fill:var(--mid)}
.arch-light .archsvg .pulse{stroke:#352D6F;filter:drop-shadow(0 0 3px rgba(53,45,111,.35))}
.arch-light .archsvg .shieldg{filter:drop-shadow(0 8px 26px rgba(53,45,111,.30))}
.arch-light .node{border-color:#D9D7E6;color:var(--deep)}
.arch-light .bench span{background:var(--cyan);border-color:rgba(53,45,111,.22);
  color:var(--deep);font-weight:700}
.arch-explain{margin:18px -38px -14px;padding:15px 38px;background:var(--panel);
  border-radius:0 0 14px 14px;font-size:13px;line-height:1.5;color:#D3D1DF;text-align:center}
.arch-explain b{color:var(--cyan);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:11.5px;margin-right:10px}
@media(max-width:760px){
  .arch.arch-light{padding:6px 20px 12px;margin-top:14px}
  .arch-explain{margin:16px -20px -12px;padding:13px 20px}
}

/* ARCH — flow diagram (SVG) */
.archsvg{display:block;width:100%;height:auto;overflow:visible}
.archsvg text{font-family:Calibri,"Segoe UI",system-ui,sans-serif}
.archsvg .ring{fill:none;stroke:rgba(141,220,241,.13);stroke-width:1}
.archsvg .ring2{stroke:rgba(141,220,241,.09);stroke-dasharray:2 7}
.archsvg .nrect{fill:rgba(255,255,255,.05);stroke:rgba(205,203,222,.5);stroke-width:1.4}
.archsvg .ntxt{fill:#EDEBF7;font-size:15px;font-weight:600;text-anchor:middle;dominant-baseline:middle}
.archsvg .btxt{fill:#E8F8FC;font-size:16px;font-weight:600;text-anchor:middle}
.archsvg .lnk{fill:none;stroke-width:1.6;stroke-linecap:round}
.archsvg .lnk-in{stroke:url(#lgi)}
.archsvg .lnk-out{stroke:url(#lgo)}
.archsvg .lnk-dn{stroke:rgba(141,220,241,.5)}
.archsvg .stub{stroke:rgba(141,220,241,.5);stroke-width:1.6}
.archsvg .tip{fill:#8DDCF1}
.archsvg .shieldg{filter:drop-shadow(0 6px 26px rgba(141,220,241,.5))}
.archsvg .alab{fill:var(--teal-br);font-size:13px;font-weight:700;letter-spacing:2.1px;
               text-transform:uppercase;text-anchor:middle}
/* FLOWING DATA PULSES, normalised.
   Same mechanism as the hero diagrams: pathLength="100" on every connector makes
   the dash a share of its own edge, so one definition crosses a 100-unit
   straight line and a 280-unit S-curve in the same time and at the same apparent
   length. It reuses hvpulse rather than declaring a parallel keyframe.
   This replaces six keyframes that were each hand-tuned to a path length
   (flowin/flowout/flowdn plus -sm variants for the light panel), and the
   per-direction dasharray overrides that went with them. Sequencing is
   unchanged: the delays live inline on each use element. */
.archsvg .pulse{fill:none;stroke:#CFF0FA;stroke-width:3.2;stroke-linecap:round;
                stroke-dasharray:18 100;animation:hvpulse 3.4s linear infinite;
                filter:drop-shadow(0 0 7px rgba(141,220,241,1))}
/* The light panel keeps a dark stroke, since cyan on white would vanish. A solid
   dark line reads heavier than a glowing pale one, so it runs slightly thinner
   with a softer glow at the same geometry. */
.arch-light .archsvg .pulse{stroke:#352D6F;stroke-width:3;
                filter:drop-shadow(0 0 5px rgba(53,45,111,.45))}
@media(prefers-reduced-motion:reduce){.archsvg .pulse{animation:none;stroke-dasharray:none;opacity:.35}}
/* The SVG is landscape at 1000x394 and label-dense. Scaled to a phone's ~330px
   of panel its 15px labels render under 5px, and held at a legible 720px it
   needs a sideways swipe, so on phones the stacked .flow-stack view carries the
   same flow in portrait instead.
   The band placement matters here: the markup runs svg, then .arch-explain,
   then .flow-stack. On desktop the stack is hidden so the band falls last, at
   the panel's foot, which is what its bottom-only corners are drawn for. Hiding
   the svg instead put the band above the flow. The panel becomes a flex column
   on phones purely so the band can be ordered back to the bottom. */
.arch .flow-stack{display:none}
@media(max-width:760px){
  /* The diagram keeps its horizontal layout on phones and scales to the panel
     width, so its height falls out of the 1000x394 ratio: about 130px at 393.
     The panel's padding comes right in to give the drawing every pixel.
     Labels are enlarged to the limit their plates allow. That limit is set by
     the longest one, "Push-to-debit · Virtual card", which leaves 1.17x before
     its ink meets the plate edge, so .ntxt goes 15 to 17.5 and no further.
     The stacked substitute is retired.
     Flex column here is only so .arch-explain can be ordered back to the foot:
     the markup runs svg, band, stack, which put the band on top once the svg
     was the hidden one. */
  .arch{overflow-x:visible;padding:16px 10px;display:flex;flex-direction:column}
  .arch.arch-light{padding:16px 10px}
  .archscroll{order:1;overflow-x:visible}
  .arch .flow-stack{display:none}
  /* the band was reading as heavy as the drawing above it; it steps back to
     a caption beside a 131px diagram */
  .arch .arch-explain{order:2;margin:12px -10px -16px;padding:9px 12px;
                      font-size:11px;line-height:1.45}
  .arch .arch-explain b{font-size:9.5px;margin-right:6px;letter-spacing:.1em}
  /* These sizes are measured against the homepage plates, so they are scoped to
     its panel. insurance.html draws a different diagram whose pills are narrower:
     at 18px "Workers' Comp" meets its plate edge. */
  .arch-light .archsvg .ntxt{font-size:17.5px}
  .arch-light .archsvg .btxt{font-size:18px}
  .arch-light .archsvg .alab{font-size:15px;letter-spacing:1.4px}
  /* the two Connect labels sit close to the shield once the connectors are
     shortened, and at phone size they crowd it. The nodes and the flow carry
     the point without them. */
  .arch-light .archsvg .clab{display:none}
}

/* PRODUCT SCREENSHOT */
.shot-sec{padding:58px 0 62px}
.shothead{text-align:center;max-width:74ch;margin:0 auto}
.shothead .sub{margin-left:auto;margin-right:auto}
.shot-hero{margin-top:30px !important;position:relative;z-index:5}
.shot-hero .shotwrap{box-shadow:0 24px 64px rgba(37,31,78,.26)}
.shot{margin-top:44px}
.shotwrap{border-radius:9px;overflow:hidden;box-shadow:0 20px 54px rgba(37,31,78,.22)}
.browser{background:#1E2430;padding:11px 15px;display:flex;align-items:center;gap:8px}
.browser .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.browser .url{flex:1;background:#2B3446;border-radius:4px;padding:5px 13px;font-size:12.5px;color:#C6CEDB;margin-left:10px}
.shotwrap img{display:block;width:100%}
.shotcap{font-style:italic;color:var(--sub);font-size:14.5px;margin-top:15px;text-align:center}
.dark .shotcap{color:#A8A4C4}
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.shots2 .shotcap{font-style:normal;font-weight:600;color:var(--navy);font-size:16px;margin-top:13px}
.dark .shots2 .shotcap{color:#fff}
.shots2 .sub2{text-align:center;font-size:14.5px;color:var(--sub);margin-top:3px}
.dark .shots2 .sub2{color:#A8A4C4}

/* SPLIT LAYOUT: stacked cards left, mock right */
.split{display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:start;margin-top:42px}
.split .stackcards{display:flex;flex-direction:column;gap:16px}
.split .stackcards .pcard{margin:0}
.choose-cap{max-width:360px}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}.choose{max-width:100%}.choose-cap{max-width:100%}}

/* PAYMENT CHOICE MOCK */
.choose{max-width:360px;margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;
        box-shadow:0 16px 44px rgba(37,31,78,.14);overflow:hidden}
.choose-hd{background:var(--panel);color:#fff;padding:16px 22px}
.choose-hd .amt{font-family:Georgia,serif;font-size:24px;font-weight:700}
.choose-hd .from{font-size:13px;color:#A8A4C4;margin-top:2px}
.choose-bd{padding:20px 22px 22px}
.choose-bd h4{font-family:Georgia,serif;font-size:17px;color:var(--navy);margin-bottom:14px}
.opt{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:7px;padding:12px 14px;margin-bottom:9px}
.opt.sel{border:2px solid var(--teal);background:#F3FBFE;padding:11px 13px}
.opt .radio{width:17px;height:17px;border-radius:50%;border:2px solid #CFCDDF;flex:0 0 auto}
.opt.sel .radio{border:5px solid var(--teal)}
.opt .nm{font-weight:600;font-size:15px;color:var(--navy);flex:1}
.opt .nm small{display:block;font-weight:400;font-size:12.5px;color:var(--sub);margin-top:1px}
.opt .eta{font-size:12.5px;font-weight:600;color:var(--teal-dk);white-space:nowrap}
.choose-ft{border-top:1px solid var(--line);padding:13px 22px;font-size:12.5px;color:var(--sub);display:flex;
           align-items:center;justify-content:space-between;background:var(--off)}
.choose-cap{text-align:center;font-size:14px;color:var(--sub);font-style:italic;margin-top:14px}

/* COLS + LISTS */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start;margin-top:42px}
h3.colhead{font-family:Georgia,serif;font-size:21px;color:var(--navy);margin-bottom:6px}
.dark h3.colhead{color:#fff}
ul.check{list-style:none;margin-top:16px}
ul.check li{padding-left:29px;position:relative;margin-bottom:13px;font-size:16px}
ul.check li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700}
/* The three outcomes under the methodology grid: one row on desktop, stacked
   below, sharing the tick the check list already uses. */
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px;margin-top:30px}
@media(max-width:820px){.outcomes{grid-template-columns:1fr}}
.dark ul.check li{color:#D3D1DF}

/* IMPACT STATS
   The figures the thin band used to carry, given room to land. */
/* auto-fit rather than a fixed 3, so four stats sit on one row instead of
   stranding the fourth, and adding a fifth later still balances */
.impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
        gap:26px 24px;margin-top:44px}
.impact div{border-left:4px solid var(--teal);padding:4px 0 4px 22px}
.impact b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:44px;
          line-height:1;color:var(--teal-br)}
.impact span{display:block;font-size:15.5px;color:#D3D1DF;margin-top:11px}
.impact em{display:block;font-style:normal;font-size:13px;color:#A8A4C4;margin-top:7px}

/* Homepage treatment. The payer screenshot used to sit above this, so the row
   read as supporting detail. Without it these figures are the payoff of the
   integrity argument, so they run centered at hero scale, each under its own
   hairline. Scoped to .impact-lead — the use-case pages keep the left-ruled row. */
.impact-lead{padding:66px 0 72px}
.impact-lead h2{text-align:center;font-size:clamp(30px,3.6vw,42px);line-height:1.14;
                max-width:26ch;margin:0 auto}
.impact-lead .impact{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
                     gap:30px 28px;margin-top:38px}
.impact-lead .impact div{border-left:0;border-top:1px solid rgba(255,255,255,.17);
                         padding:19px 10px 0;text-align:center}
/* nowrap and a ceiling the widest value clears: "+20–28" is six glyphs and at
   76px it broke onto a second line, dropping its label below the other three. */
.impact-lead .impact b{font-size:clamp(46px,5.1vw,62px);letter-spacing:-.02em;white-space:nowrap}
.impact-lead .impact span{font-size:15.5px;max-width:19ch;margin:10px auto 0}
.impact-note{text-align:center;font-size:13px;color:#A8A4C4;margin-top:46px}

/* The panel that says "one platform". A surface rather than an outline: eight
   bordered boxes already sit inside it, and a ninth line at the same weight would
   flatten the hierarchy the section depends on. Labelled so it names the platform
   instead of merely grouping the tiles. */
.lc-panel{position:relative;background:#fff;border-radius:14px;padding:26px;
          margin-top:30px;box-shadow:0 1px 2px rgba(37,31,78,.05),0 18px 40px -26px rgba(37,31,78,.30)}
/* Connect used to be a band across the panel head, on the argument that nothing
   happens to a payment at "connect" so it should not read as a peer of the
   services. It is a tile now: the validation that runs on data in and out is a
   service, and standing it at the head of the flow says so. Policy keeps its
   band, because policy genuinely does sit under all six rather than before them. */
.lc-panel .lc{margin-top:0}
/* the tiles now sit on white, so their rest fill takes the section tint instead,
   keeping an edge without adding one */
.lc-panel .lc-tile{background:var(--off)}
/* The controls band. Same idiom as the policy band at the foot of every
   service-page rail, so the two read as the same statement at two scales: there
   it governs one service's stages, here it governs all four services. Bleeds to
   the panel edges and takes its bottom corners, so it reads as the floor the
   services stand on rather than as a fifth tile. */
.lc-policy{margin:24px -26px -26px;padding:15px 26px;background:var(--panel);
           border-radius:0 0 14px 14px;color:#D3D1DF;font-size:13px;
           line-height:1.55;text-align:center}
.lc-policy b{color:var(--teal-br);font-weight:700;letter-spacing:.12em;
             text-transform:uppercase;font-size:11.5px;margin-right:10px}
@media(max-width:900px){.lc-panel{padding:16px}
  .lc-policy{margin:20px -16px -16px;padding:14px 18px}}

/* EXPLORE BAR
   Bottom-of-page product navigation. Left-aligned with a persistent arrow: the
   previous version centred a single word in a tall card and read as a placeholder.
   Each card states what its category validates, which is information the lifecycle
   tiles do not spell out. */
#explore{padding:56px 0 62px}
/* Four solutions, so four across: three columns left one card alone on a
   second row with 713px of empty grid beside it. */
.exgrid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
/* Standing teal glow so the row reads as interactive before the pointer arrives,
   deepening on hover. Same treatment the service tiles use, in one colour here
   because these are navigation rather than five distinct things. */
.exgrid a{--glow:0,126,140;
          position:relative;display:flex;flex-direction:column;height:100%;
          background:#fff;border:1px solid rgba(var(--glow),.22);border-radius:10px;
          padding:20px 38px 18px 20px;text-decoration:none;
          box-shadow:0 1px 2px rgba(37,31,78,.04),0 12px 28px -16px rgba(var(--glow),.50);
          transition:border-color .2s,box-shadow .2s,transform .2s}
/* the arrow is always there, so the card reads as a destination at rest */
.exgrid a:after{content:"\2192";position:absolute;top:19px;right:17px;font-size:15px;
                font-weight:700;color:var(--teal-dk);transition:transform .2s}
.exgrid a:hover,.exgrid a:focus-visible{border-color:var(--teal);transform:translateY(-3px);
          box-shadow:0 2px 4px rgba(37,31,78,.05),0 24px 46px -14px rgba(var(--glow),.75)}
.exgrid a:hover:after,.exgrid a:focus-visible:after{transform:translateX(3px)}
.exgrid a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* teal, matching the pills and the glow; the object line below stays navy so the
   two do not read as the same level */
.ex-name{font-family:Georgia,"Times New Roman",serif;font-size:21px;color:var(--teal-dk);line-height:1.2}
.ex-obj{font-size:13px;color:var(--sub);margin-top:9px;padding-top:9px;
        border-top:1px solid var(--line)}
.ex-obj b{display:block;color:var(--navy);font-weight:600;font-size:14px;margin-top:2px}
@media(prefers-reduced-motion:reduce){
  .exgrid a,.exgrid a:after{transition:border-color .2s,color .2s}
  .exgrid a:hover,.exgrid a:focus-visible{transform:none}
  .exgrid a:hover:after,.exgrid a:focus-visible:after{transform:none}
}
@media(max-width:980px){.exgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.exgrid{grid-template-columns:repeat(2,1fr)}}

/* LIFECYCLE — four products on two axes
   Left column is once-per-payee, right column is the payment run, with the two
   continuous controls stacked over the Pay bar so the argument reads without
   being stated. No new colour literals: --card doubles as the accent tint, which
   is what it already is. */
/* Two rows. Cadence moved from column headers into a badge inside each tile,
   which is what lets the top row be three equal columns instead of three unequal
   ones. The run sits underneath at full width, so Verify still gates Pay and
   the connector spans the whole panel again rather than a third of it. */
.lc{display:block;margin-top:34px}
.lc-top{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
/* Sits beside the tile name rather than on its own line or off in the corner, so
   the name and its cadence read as one statement. */
.lc-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
/* The connector carries the argument that Verify gates Pay, so it moves:
   a hairline with a pulse running down it, on the same 3.4s beat as the diagram
   above. Text sits on top, arrows fade in turn. Still legible standing still. */
/* Initiate to Qualify. Horizontal when the two sit side by side, vertical when
   they stack, so the flow reads the same either way. Same 3.4s beat as the
   connector below and the diagram above. */
.lc-hlink{position:relative;align-self:center;width:34px;height:1px;background:var(--line)}
.lc-hlink:after{content:"";position:absolute;top:50%;left:0;width:34%;height:1px;
                transform:translateY(-.5px);border-radius:1px;
                background:linear-gradient(90deg,transparent,var(--mid),transparent);
                animation:lcflowx 3.4s ease-in-out infinite}
@keyframes lcflowx{0%{left:-34%;opacity:0}18%{opacity:1}82%{opacity:1}100%{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.lc-hlink:after{animation:none;opacity:0}}
/* the bare connector carries no text, so it is shorter than the labelled one */
.lc-conn-bare{padding:13px 0}
/* VAAS DIAGRAM ROW: the white panel is Verituity, request in and decision out
   sit outside it to mark where the platform starts and ends. */
.va-row{display:grid;grid-template-columns:auto 24px minmax(0,1fr) 24px auto;
  column-gap:10px;align-items:center}
.va-link{width:100%;height:1px;background:#CBD5E1}
.va-cap{display:flex;flex-direction:column;align-items:center;gap:9px;flex:none;
  transform:translateY(-12px)}
.va-cap i{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:#fff;border:1.5px solid var(--mid);color:var(--mid);
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.va-cap i svg{width:22px;height:22px}
.va-cap b{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--deep);text-align:center;line-height:1.4}
.va-cap-out i{border-color:#0E7C42;color:#0E7C42}
.va-cap-out b{color:#0E7C42}
@media(max-width:900px){
  .va-row{grid-template-columns:1fr;justify-items:center;row-gap:12px}
  .va-link{width:1px;height:22px}
  .va-cap{transform:none}
}

/* Quiet arrow: nothing at rest, fades in on hover and focus. Absolute so it never
   reflows the tile, and the Pay head reserves room so its meta line does not
   run under it. */
.lc-tile{position:relative}
.lc-tile:after{content:"\2192";position:absolute;top:14px;right:16px;font-size:15px;
               font-weight:700;color:var(--teal-dk);opacity:0;transition:opacity .2s}
.lc-tile:hover:after,.lc-tile:focus-visible:after{opacity:1}
/* Stage chips are labels, not targets. pointer-events:none also lets a pointer
   over a chip register as hover on the tile itself. */
.lc-chips span{pointer-events:none}
/* focus gets the whole hover treatment, so keyboard users get the same lift */
.lc-tile:focus-visible{border-color:var(--teal);background:var(--card);transform:translateY(-2px);
                       outline:2px solid var(--teal);outline-offset:3px}
.lc-tile:focus-visible .lc-name{color:var(--teal-dk)}

/* VERIFICATION LIFECYCLE RAIL
   Six stages across one row, with the active stage lit and its detail shown in a
   fixed-height slot beneath. Compact by design: the capabilities section already
   carries a featured block and four cards. */
.vflow{margin-top:34px;border:1px solid var(--line);border-radius:11px;padding:32px 32px 0;background:#fff}
/* Six across by default. Connect runs five, Explain four and Pay three,
   so the count is a property each rail sets rather than a modifier class per
   length. Declared here, ahead of the responsive rules, so those still win. */
.vf-rail{list-style:none;display:grid;grid-template-columns:repeat(var(--vf-n,6),1fr);gap:0}
.vf-rail li{position:relative;display:flex;flex-direction:column;align-items:center;
            text-align:center;padding:0 6px}
/* connector behind each item except the first */
.vf-rail li:not(:first-child):before{content:"";position:absolute;top:18px;left:0;right:50%;
  height:2px;background:var(--line)}
.vf-rail li:not(:last-child):after{content:"";position:absolute;top:18px;left:50%;right:0;
  height:2px;background:var(--line)}
.vf-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
      width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--line);
      color:#A5A1BE;font-size:15px;font-weight:700}
.vf-l{margin-top:12px;font-size:13.5px;line-height:1.35;color:var(--sub);font-weight:600;max-width:14ch}
/* the active stage, and everything it has already passed */
.vflow[data-step="0"] .vf-rail li:nth-child(-n+1) .vf-n,
.vflow[data-step="1"] .vf-rail li:nth-child(-n+2) .vf-n,
.vflow[data-step="2"] .vf-rail li:nth-child(-n+3) .vf-n,
.vflow[data-step="3"] .vf-rail li:nth-child(-n+4) .vf-n,
.vflow[data-step="4"] .vf-rail li:nth-child(-n+5) .vf-n,
.vflow[data-step="5"] .vf-rail li .vf-n,
.vflow:not([data-ready]) .vf-rail li .vf-n{background:var(--teal);border-color:var(--teal);color:#fff}
.vflow[data-step="0"] .vf-rail li:nth-child(-n+1) .vf-l,
.vflow[data-step="1"] .vf-rail li:nth-child(-n+2) .vf-l,
.vflow[data-step="2"] .vf-rail li:nth-child(-n+3) .vf-l,
.vflow[data-step="3"] .vf-rail li:nth-child(-n+4) .vf-l,
.vflow[data-step="4"] .vf-rail li:nth-child(-n+5) .vf-l,
.vflow[data-step="5"] .vf-rail li .vf-l,
.vflow:not([data-ready]) .vf-rail li .vf-l{color:var(--navy)}
.vflow[data-ready] .vf-n{transition:background .3s,border-color .3s,color .3s}
.vflow[data-ready] .vf-l{transition:color .3s}

/* One detail at a time in a slot tall enough for the longest, so advancing never
   reflows the section. */
.vf-detail{position:relative;height:54px;margin-top:22px}
.vf-detail span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
                text-align:center;font-size:16.5px;line-height:1.5;color:var(--text);opacity:0;
                max-width:74ch;margin:0 auto;transition:none}
.vflow[data-ready] .vf-detail span{transition:opacity .3s}
.vflow[data-step="0"] .vf-detail span[data-for="0"],
.vflow[data-step="1"] .vf-detail span[data-for="1"],
.vflow[data-step="2"] .vf-detail span[data-for="2"],
.vflow[data-step="3"] .vf-detail span[data-for="3"],
.vflow[data-step="4"] .vf-detail span[data-for="4"],
.vflow[data-step="5"] .vf-detail span[data-for="5"],
.vflow:not([data-ready]) .vf-detail span[data-for="0"]{opacity:1}

/* Verify runs seven. Seven across holds at desktop because the labels are short,
   then folds to four and three, where item 5 opens a row and item 4 closes one. */
.vflow-7 .vf-rail{grid-template-columns:repeat(7,1fr)}
@media(max-width:1080px){
  .vflow-7 .vf-rail{grid-template-columns:repeat(4,1fr);row-gap:20px}
  .vflow-7 .vf-rail li:nth-child(n):before,
  .vflow-7 .vf-rail li:nth-child(n):after{display:block}
  .vflow-7 .vf-rail li:nth-child(5):before,
  .vflow-7 .vf-rail li:nth-child(4):after{display:none}
}
@media(max-width:620px){
  .vflow-7 .vf-rail{grid-template-columns:repeat(2,1fr)}
  .vflow-7 .vf-rail li:nth-child(n):before,
  .vflow-7 .vf-rail li:nth-child(n):after{display:none}
}
.vf-policy{margin:22px -32px 0;padding:15px 32px;background:var(--panel);
           border-radius:0 0 10px 10px;color:#D3D1DF;font-size:13.5px;text-align:center}
.vf-policy b{color:var(--teal-br);font-weight:700;letter-spacing:.12em;
             text-transform:uppercase;font-size:11.5px;margin-right:9px}
@media(max-width:860px){
  .vf-rail{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .vf-rail li:nth-child(4):before,.vf-rail li:nth-child(3):after{display:none}
  .vf-detail{height:74px}
}
@media(max-width:520px){
  .vf-rail{grid-template-columns:repeat(2,1fr)}
  .vf-rail li:before,.vf-rail li:after{display:none}
  .vf-detail{height:98px}
}

/* PAYEE ENROLLMENT FLOW — animated recreation
   Fixed stage height so the frame never jumps between steps, and panels are
   absolutely stacked with only the active one shown. State lives in data-step on
   .pflow, so every frame of this is a discrete, inspectable DOM state. */
.pflow{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;
       box-shadow:0 26px 64px rgba(37,31,78,.22)}
.pf-chrome{background:#F8F8FA;border-bottom:1px solid var(--line);padding:12px 18px;
           display:flex;align-items:baseline;gap:10px}
.pf-brand{font-weight:700;font-size:13.5px;color:var(--navy)}
.pf-by{font-size:11.5px;color:var(--sub)}

.pf-rail{list-style:none;display:flex;gap:4px;padding:14px 18px 0;margin:0}
.pf-rail li{flex:1;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
            font-weight:700;color:#A5A1BE;padding-top:9px;border-top:2px solid var(--line)}
.pflow[data-step="0"] .pf-rail li:nth-child(-n+1),
.pflow[data-step="1"] .pf-rail li:nth-child(-n+2),
.pflow[data-step="2"] .pf-rail li:nth-child(-n+3),
.pflow[data-step="3"] .pf-rail li:nth-child(-n+4),
.pflow[data-step="4"] .pf-rail li{color:var(--teal-dk);border-top-color:var(--teal)}

.pf-stage{position:relative;height:236px;padding:16px 18px 0}
/* Transitions are gated on [data-ready]. The no-JS fallback below paints the
   finished panel, and without this gate that panel would visibly fade out when
   JS hands over — an animation of the fallback unwinding, which is not a thing
   anyone should see. Unready means instant, so the handover is silent. */
.pf-panel{position:absolute;inset:16px 18px auto;display:flex;flex-direction:column;gap:9px;
          opacity:0;transform:translateY(7px);pointer-events:none;transition:none}
.pflow[data-ready] .pf-panel{transition:opacity .4s ease,transform .4s ease}
.pflow[data-ready] .pf-rail li{transition:color .35s,border-color .35s}
.pflow[data-step="0"] .pf-panel[data-for="0"],
.pflow[data-step="1"] .pf-panel[data-for="1"],
.pflow[data-step="2"] .pf-panel[data-for="2"],
.pflow[data-step="3"] .pf-panel[data-for="3"],
.pflow[data-step="4"] .pf-panel[data-for="4"]{opacity:1;transform:none}

.pf-h{font-family:Georgia,"Times New Roman",serif;font-size:17px;color:var(--navy);margin-bottom:3px}
.pf-field{display:flex;justify-content:space-between;align-items:center;gap:12px;
          border:1px solid var(--line);border-radius:5px;padding:9px 12px;font-size:13px}
.pf-field i{font-style:normal;color:var(--sub)}
.pf-field b{color:var(--navy);font-weight:600}
.pf-dots{letter-spacing:.22em;color:var(--navy)}
.pf-dots:before{content:"••••••••"}
.pf-mfa{letter-spacing:.28em}
.pf-seg{display:flex;gap:6px}
.pf-seg em{font-style:normal;font-size:12.5px;border:1px solid var(--line);border-radius:999px;
           padding:5px 13px;color:var(--sub)}
.pf-seg em.on{background:var(--card);border-color:var(--teal);color:var(--teal-dk);font-weight:700}

.pf-verify{display:flex;align-items:center;gap:11px;background:var(--card);
           border-radius:7px;padding:12px 14px}
.pf-check{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:16px;background-position:center;background-repeat:no-repeat}
.pf-vtext{display:flex;flex-direction:column}
.pf-vtext b{font-size:13.5px;color:var(--navy)}
.pf-vtext i{font-style:normal;font-size:12px;color:var(--sub);margin-top:2px}
.pf-conf{display:flex;justify-content:space-between;font-size:13px}
.pf-conf i{font-style:normal;color:var(--sub)}
.pf-conf b{color:var(--teal-dk);font-weight:700}

.pf-rail-opt{display:flex;justify-content:space-between;align-items:center;
             border:1px solid var(--line);border-radius:5px;padding:8px 12px;font-size:12.5px}
.pf-rail-opt b{color:var(--navy);font-weight:600}
.pf-rail-opt i{font-style:normal;color:var(--teal-dk);font-weight:600}
.pf-rail-opt.sel{border-color:var(--teal);background:var(--card)}
.pf-rail-opt.dim i{color:var(--sub);font-weight:500}

.pf-panel[data-for="4"]{align-items:center;justify-content:center;inset:16px 18px 8px;gap:12px}
.pf-done{width:52px;height:52px;border-radius:50%;background:var(--teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:28px;background-position:center;background-repeat:no-repeat}
.pf-h-done{font-size:22px}
.pf-sub{font-size:13px;color:var(--sub);text-align:center}

.pf-foot{display:flex;justify-content:space-between;align-items:center;
         border-top:1px solid var(--line);padding:11px 18px;font-size:12px}
.pf-time{color:var(--sub)}
.pf-time b{color:var(--navy)}
.pf-replay{background:none;border:0;padding:0;font:inherit;font-weight:700;
           color:var(--teal-dk);cursor:pointer}
.pf-replay:hover{color:var(--navy)}
.pf-replay:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

/* Reduced motion, and no-JS: hold the finished state with every step complete,
   so the frame still says what the flow does without moving. */
@media(prefers-reduced-motion:reduce){
  .pf-panel{transition:none}
  .pf-rail li{transition:none}
}
.pflow:not([data-ready]) .pf-panel[data-for="4"]{opacity:1;transform:none}
.pflow:not([data-ready]) .pf-rail li{color:var(--teal-dk);border-top-color:var(--teal)}
.pflow:not([data-ready]) .pf-replay{visibility:hidden}

/* BENEFITS
   Four claims in a 2x2. No card fill or teal top edge here: that motif already
   carries five other components, and the icons are enough to separate these. */
#use-cases{padding:52px 0 58px}
/* In the hero the grid sits under a centred headline, so the cards themselves
   left-align rather than inheriting the centring. */
/* Icon and title share the top row; the copy sits under the title rather than
   under the icon, so the text block reads as one column. */

/* USE CASES — a scannable list, not cards. Six short labels in boxes would be
   six mostly-empty boxes. */
/* Divider and label for the trust row that now sits inside this section. */
.trust-lead{margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
            color:var(--sub);font-size:12.5px;font-weight:700;letter-spacing:.15em;
            text-transform:uppercase}
/* Three columns, not four. At four, "Agency and broker payments" and three others
   wrapped to two lines, which made the taller rows cost more height than the extra
   row costs at three. */
.ucases{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
        gap:12px 28px;margin-top:26px}
.ucases li{position:relative;padding-left:31px;font-size:16.5px;color:var(--text);
           font-weight:500;line-height:1.4}
.ucases li:before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;
  border-radius:50%;background:var(--teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}
@media(max-width:860px){
  .ucases{grid-template-columns:repeat(2,1fr)}
}
/* the phone block below holds the ucases column count from here down */

/* MANAGEMENT TEAM — flip cards
   Two across rather than four, because the bios need a readable measure on the
   back and Andy's runs long. The back face sits in normal flow and the front is
   absolutely positioned over it, so each card takes its height from its own bio
   and grid stretch squares up the row — no hardcoded card height to outgrow. */
.team{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:34px}
.team li{display:flex}
.tcard{flex:1;perspective:1400px;background:none;border:0;padding:0;cursor:pointer;
       font:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
.tcard-in{position:relative;display:block;height:100%;transform-style:preserve-3d;
          transition:transform .62s cubic-bezier(.4,.08,.2,1)}
.tcard[aria-expanded="true"] .tcard-in{transform:rotateY(180deg)}
.tcard-face{display:block;background:#fff;border:1px solid var(--line);
            border-top:3px solid var(--teal);border-radius:6px;padding:30px 28px;
            backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tcard-front{position:absolute;inset:0;text-align:center;
             display:flex;flex-direction:column;align-items:center;justify-content:center}
/* The back is in flow, so it sets the card height — and a short bio would leave
   the front's photo, name, and title with less room than they need. The floor is
   the front's own content height plus its padding, with slack for a title that
   wraps to two lines in a narrower column. */
.tcard-back{position:relative;transform:rotateY(180deg);height:100%;min-height:292px}
.tcard-front img{display:block;width:104px;height:104px;border-radius:50%;object-fit:cover;
                 background:#fff;margin-bottom:15px}
.tname{display:block;font-family:Georgia,"Times New Roman",serif;font-size:20px;
       color:var(--navy);line-height:1.2}
.ttitle{display:block;font-size:14.5px;color:var(--sub);margin-top:6px}
.tmore{display:block;font-size:12.5px;font-weight:700;letter-spacing:.11em;
       text-transform:uppercase;color:var(--accent);margin-top:17px}
.tcard-back .tname{font-size:17px}
.tbio{display:block;font-size:14.5px;color:var(--sub);line-height:1.58;margin-top:12px}
.tcard:hover .tmore{color:var(--accent-2)}
.tcard:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
@media(max-width:700px){
  .team{grid-template-columns:1fr;gap:18px}
  .tcard-face{padding:26px 22px}
}
/* A card that snaps rather than spins still reads as two sides of one thing. */
@media(prefers-reduced-motion:reduce){.tcard-in{transition:none}}

/* STANDARDS + CERTIFICATIONS
   Cards keep a white fill and a teal top edge so the block reads the same on a
   white section and on .alt. */
.certs{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
       gap:18px;margin-top:38px}
.certs li{background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);
          border-radius:3px;padding:20px 22px}
.certs b{display:block;font-size:17px;
         color:var(--navy);margin-bottom:6px}
.certs span{display:block;font-size:14px;color:var(--sub);line-height:1.5}
.certs-note{font-size:13.5px;margin-top:22px}

/* STAGED PROCESS FLOW
   Six equal tiles in a two-column grid made a sequence read as a zigzag, so the
   steps are grouped into three stages that run left to right with a chevron
   between them. Step numbers continue 01 to 06 across the stages, so the
   counter resets on .stages and never on .steps. */
.stages{list-style:none;counter-reset:vstep;display:grid;grid-template-columns:repeat(3,1fr);
        gap:38px;margin-top:44px}
.stage{position:relative;background:#fff;border:1px solid var(--line);
       border-top:3px solid var(--teal);border-radius:4px;padding:22px 24px 18px}
/* chevron sits in the gap, pointing to the next stage */
.stage:not(:last-child):after{content:"";position:absolute;top:50%;right:-26px;width:13px;height:13px;
  border-right:2px solid var(--teal);border-top:2px solid var(--teal);
  transform:translateY(-50%) rotate(45deg)}
.stage-no{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
          text-transform:uppercase;color:var(--teal-dk);margin-bottom:7px}
.stage h3{font-size:19px;color:var(--navy);margin-bottom:15px}
.steps{list-style:none}
.steps li{counter-increment:vstep;position:relative;padding-left:32px;margin-bottom:15px}
.steps li:last-child{margin-bottom:6px}
.steps li:before{content:counter(vstep,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:14px;color:var(--teal)}
.steps b{display:block;font-size:15.5px;color:var(--navy);margin-bottom:2px}
.steps span{display:block;font-size:14px;color:var(--sub);line-height:1.5}
@media(max-width:880px){
  .stages{grid-template-columns:1fr;gap:30px}
  /* stacked: the chevron turns to point down */
  .stage:not(:last-child):after{top:auto;bottom:-22px;right:auto;left:50%;
    transform:translateX(-50%) rotate(135deg)}
}

/* OLD MODEL / NEW MODEL CONTRAST
   Carries the category reframe in the problem section. */
.models{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
.model{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px 26px}
.model .mlabel{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
               text-transform:uppercase;margin-bottom:12px}
.model p{font-family:Georgia,"Times New Roman",serif;font-size:21px;line-height:1.35}
.model.old .mlabel{color:var(--sub)}
.model.old p{color:var(--sub)}
.model.new{border-top:3px solid var(--teal)}
.model.new .mlabel{color:var(--teal-dk)}
.model.new p{color:var(--navy)}
@media(max-width:880px){.models{grid-template-columns:1fr;gap:14px}
  .model p{font-size:19px}}

/* single-column check list inside a slimmed problem section */
ul.check.check-tight{margin-top:26px;max-width:74ch}
ul.check.check-tight li{margin-bottom:9px}

/* USE-CASE CHIPS */
.chips-label{color:var(--teal);font-weight:700;letter-spacing:.16em;font-size:12.5px;
             text-transform:uppercase;margin-top:38px}
.chips-uc{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chips-uc span{border:1px solid var(--line);background:#fff;border-radius:999px;
               padding:6px 15px;font-size:13.5px;color:var(--text)}

/* BRIEFING FORM CHECKBOX GROUPS */
.field .glabel{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:8px}
.chkgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.chk{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text);cursor:pointer}
.chk input{accent-color:var(--teal);width:15px;height:15px;margin-top:3px;flex:0 0 auto}
@media(max-width:560px){.chkgrid{grid-template-columns:1fr}}

/* LEGAL PAGES — prose, not cards. Narrow measure, and the headings carry their own
   rhythm since there is no kicker or grid to structure them. */
.legal .wrap{max-width:820px}
.legal h2{font-size:23px;margin-top:38px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--sub);font-size:16.5px;line-height:1.68;margin-top:14px;max-width:74ch}
.legal ul.check{margin-top:16px}
.legal ul.check li{font-size:16px;color:var(--sub)}
.legal ul.check li b{color:var(--navy)}

/* QUOTE + TABLE */
.quote{border-left:5px solid var(--teal);padding:8px 0 8px 25px;margin-top:38px;max-width:76ch}
.quote p{font-family:Georgia,serif;font-style:italic;font-size:21px;color:var(--navy);line-height:1.45}
.dark .quote p{color:#fff}
/* Attribution under a sourced quote: roman and small so the quote keeps the
   weight, with the date carrying the link to the primary source. */
.proof-quote{margin-top:34px}
.proof-quote .proof-attr{font-family:inherit;font-style:normal;font-size:14px;
                         color:var(--sub);line-height:1.5;margin-top:14px}
table{width:100%;border-collapse:collapse;margin-top:40px;font-size:15.5px}
th{background:var(--navy2);color:#fff;text-align:left;padding:12px 16px;font-weight:600}
td{padding:12px 16px;border-bottom:1px solid var(--line)}
tr:nth-child(even) td{background:var(--off)}

/* ===== BRIEFING MODAL ===== */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;
       justify-content:center;padding:6vh 20px 40px;overflow-y:auto}
.modal.open{display:flex}
.modal-backdrop{position:fixed;inset:0;background:rgba(37,31,78,.62)}
.modal-panel{position:relative;width:100%;max-width:580px;background:#fff;border-radius:10px;
             border-top:4px solid var(--teal);box-shadow:0 30px 70px rgba(37,31,78,.34);
             padding:30px 32px 26px}
.modal-x{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0;border:0;
         background:none;color:var(--sub);font-size:24px;line-height:1;cursor:pointer;border-radius:6px}
.modal-x:hover{background:var(--off);color:var(--navy)}
.modal-hd{margin-bottom:20px;padding-right:34px}
.modal-hd h2{font-size:25px}
.modal-hd p{color:var(--sub);font-size:15px;margin-top:7px}

/* HubSpot renders the form; keep it from overflowing the panel and nudge its
   submit button toward the brand. Deeper theming belongs in the HubSpot form
   editor, not here. */
.hs-form-frame{min-height:120px}
.hs-form-frame img{max-width:100%}

@media(max-width:560px){
  .modal{padding:0}
  .modal-panel{max-width:none;min-height:100%;border-radius:0;padding:26px 20px 24px}
}

/* CTA + FOOTER */
/* Mid indigo, not navy: following Impact on the homepage and Outcomes on the
   service pages, navy2 sat nine units from the band above it and read as one
   continuous dark block. White holds 5.76:1 here. */
.cta-band{background:var(--deep);color:#fff;text-align:center;padding:68px 0}
.cta-band h2{color:#fff;font-size:33px}
/* D3D1DF cleared 4.5 on navy2 but only reaches 3.83 on the lighter mid band */
.cta-band p{color:#EFEEF6;font-size:18px;margin-top:13px}
/* FOOTNOTES
   Sourcing for the impact figures, at the foot of the page. Numbered with a CSS
   counter so the markers on the stats and the notes here cannot drift apart when
   one is added or removed. */
.fnref{font-size:10px;font-weight:700;vertical-align:super;line-height:0;margin-left:2px}
.fnref a{color:var(--teal-br);text-decoration:none}
.fnref a:hover,.fnref a:focus-visible{text-decoration:underline}
.footnotes{list-style:none;counter-reset:fn;display:grid;gap:7px;font-size:12.5px;
           line-height:1.55;padding-bottom:20px;margin-bottom:22px;
           border-bottom:1px solid rgba(255,255,255,.10)}
.footnotes li{counter-increment:fn;position:relative;padding-left:21px;color:#A8A4C4}
.footnotes li:before{content:counter(fn);position:absolute;left:0;top:1px;
                     color:var(--teal-br);font-weight:700;font-size:11px}
.footnotes a{color:#D3D1DF;text-decoration:underline;margin-right:0}
.footnotes li:target{color:#E8F8FC}

footer{background:var(--panel);color:#A8A4C4;font-size:14px;padding:32px 0}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:13px}
footer a{color:#A8A4C4;text-decoration:none;margin-right:18px}

/* ===== RESPONSIVE ===== */

/* Six top-level items plus the CTA no longer fit a 980px bar, so the desktop
   nav tightens through the middle widths and folds to the panel earlier.
   Measured: at 18px gap the bar clears at 1180 and runs out at 1100. */
/* Tablet and below: the hover nav becomes a toggled panel. */
@media(max-width:1180px){
  .navtoggle{display:block}
  nav>.btn{display:none}                 /* the panel carries its own CTA */

  /* The panel opens on the top level only. Every group was expanded at once,
     which made one stacked list of about thirty links with no way to see the
     shape of the site. Now the panel is the five top-level choices, and a tap
     opens one group at a time. */
  .navlinks{position:absolute;top:100%;left:0;right:0;z-index:60;
            display:none;flex-direction:column;gap:0;
            background:#fff;border-top:3px solid var(--teal);
            box-shadow:0 18px 40px rgba(37,31,78,.16);padding:0 0 14px;
            max-height:calc(100vh - 66px);overflow-y:auto;
            -webkit-overflow-scrolling:touch}
  nav.open .navlinks{display:flex}

  .navlinks>.dd{position:static;border-bottom:1px solid var(--line)}
  .navlinks .dd>a,.navlinks .dd>a:hover,.navlinks .dd>a.on{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:15px 22px;border-bottom:0;
    color:var(--navy);font-size:15.5px;font-weight:600;
    letter-spacing:0;text-transform:none}
  .navlinks .dd>a.on{color:var(--teal-dk)}
  /* the caret is the affordance that says this row opens rather than goes */
  .caret{display:inline-block;font-size:11px;color:var(--mid);
         transition:transform .18s ease}
  .navlinks .dd.open>a{color:var(--teal-dk)}
  .navlinks .dd.open>a .caret{transform:rotate(180deg)}

  /* collapsed until opened, and never on hover: a touch tap fires hover first
     and the group would spring open under the finger */
  .ddmenu,.dd:hover .ddmenu,.dd:focus-within .ddmenu{
    display:none;position:static;min-width:0;margin:0;padding:4px 0 10px;
    background:var(--off);border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none}
  .navlinks .dd.open>.ddmenu{display:block}
  .ddmenu a,.ddmenu a:hover{padding:10px 22px 10px 34px;background:transparent}
  .ddmenu a strong{font-size:14.5px;font-weight:600}
  .ddmenu a span{display:none}            /* keep the panel compact on small screens */

  /* a top-level link with no submenu (Developers) sits at the same level */
  .navlinks>a:not(.navcta),.navlinks>a:not(.navcta):hover,.navlinks>a:not(.navcta).on{
    display:block;padding:15px 22px;border-bottom:0;
    color:var(--navy);font-size:15.5px;font-weight:600;
    letter-spacing:0;text-transform:none}
  .navlinks>a:not(.navcta){border-bottom:1px solid var(--line)}
  .navlinks>a:not(.navcta).on{color:var(--teal-dk)}
  /* the panel's link colour was beating .btn's own white here, leaving the CTA
     at 1.45:1 against its navy: dark text on a dark button */
  nav .navcta,nav .navcta:hover{display:inline-block;margin:14px 22px 0;color:#fff}
}

@media(max-width:880px){
  .grid2,.grid3,.cols,.aud,.shots2,.split{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:13px}
  .arrow{transform:rotate(90deg)}
  .hero{padding:58px 0 52px}
  .hero h1{font-size:36px}
  .hero p.lede{font-size:17.5px}
  .eyebrow{max-width:100%;font-size:12px;letter-spacing:.13em;gap:9px;padding:8px 15px 8px 13px}
  section{padding:54px 0}
  h2{font-size:27px}
  .sub{font-size:16px}
  .quote p{font-size:18px}
  .cta-band{padding:52px 0}
  .cta-band h2{font-size:26px}
  .stats .row{gap:18px 30px}
  .stat b{font-size:24px}

  .impact{grid-template-columns:1fr;gap:20px}
  .impact b{font-size:36px}
  .arch{padding:28px 20px}
  footer .row{flex-direction:column;gap:16px}
}

/* Phones */
@media(max-width:560px){
  .wrap{padding:0 20px}
  nav{padding:16px 20px}
  .hero h1{font-size:30px}
  h2{font-size:23px}
  .pillar,.pcard{padding:20px}
  .cta{width:100%}
  .cta .btn{width:100%;text-align:center}
  .navlinks .dd>a,.navlinks .dd>a:hover,.navlinks .dd>a.on{padding:14px 20px 6px}
  .navlinks>a:not(.navcta),.navlinks>a:not(.navcta):hover,.navlinks>a:not(.navcta).on{padding:14px 20px}
  .ddmenu a,.ddmenu a:hover{padding:11px 20px}
  nav .navcta{margin:16px 20px 0}
}

/* ============================================================
   HOMEPAGE STORY LAYOUT (payment-integrity narrative)
   Spacious, photo-led, one idea per screen — Verituity identity.
   ============================================================ */
/* lead hero */
/* Tightened so the trust bar clears the fold on a laptop: the claim and the
   institutions running on it should both be visible without scrolling. */
/* White hero. The nav sits on white too, so the hero reads as one open field
   ending at the hard edge of the navy trust bar below it. The wash is cut to a
   tenth of its old strength: at navy-hero opacity it turned grey on white. */
/* A floor with centred content rather than padding arithmetic: the h1 clamp
   changes with viewport width, so padding tuned at one width drifts at every
   other. 440 rather than 650: at 650 the content filled barely half the hero,
   and the fix for an empty fold is less height, not more to put in it. The
   claim band directly below carries the visual weight. */
.lead-hero{background:#fff;color:var(--text);position:relative;overflow:hidden;
           min-height:440px;display:flex;align-items:center;padding:52px 24px}
.lead-hero > .lh-inner{width:100%}
.lead-hero:before{content:"";position:absolute;inset:-30% -10% auto -10%;height:90%;pointer-events:none;
  background:radial-gradient(52% 70% at 22% 18%,rgba(141,220,241,.13),transparent 62%),
             radial-gradient(46% 64% at 82% 8%,rgba(83,97,168,.09),transparent 62%)}
.lh-inner{max-width:980px;margin:0 auto;position:relative;text-align:center}
.lead-hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(40px,5.4vw,72px);
              line-height:1.1;letter-spacing:-.025em;color:var(--deep)}
/* 68ch rather than 56: the subhead is a single long sentence, and at the tighter
   measure it ran to four lines and pushed the trust bar under the fold at 720p. */
/* The subhead is a two-sentence line now rather than a paragraph, so it carries
   at tagline scale. At 17.5px, set for a 74ch paragraph, it read as fine print
   under a 58px headline. */
/* Sits under the sub, so the fold ends on the ask. */
.lh-cta{margin-top:32px;display:flex;justify-content:center}
.lead-hero p.sub{font-weight:500;font-size:clamp(16px,1.6vw,20px);
  letter-spacing:-.01em;color:var(--sub);max-width:42rem;
  margin:22px auto 0;line-height:1.5}
/* CLAIM BAND, under the hero rather than inside it.
   A spec strip, not prose: bold sans set left, on the dark ground the site
   already uses for its dark sections. The hairline opens each column instead of
   sitting between them, so the first claim is framed like the other two, and it
   is a left border, so it takes the height of its own column's text and needs
   no fixed height to line up. */
.claimband{background:var(--panel);color:#fff;padding:44px 0}
.claimband ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0}
.claimband li{padding:2px 26px 2px 30px;border-left:1px solid rgba(255,255,255,.28);
  font-size:19px;font-weight:400;line-height:1.32;text-wrap:balance}
@media(max-width:900px){
  .claimband{padding:32px 0}
  .claimband ul{grid-template-columns:1fr;gap:19px}
  .claimband li{padding:0 0 0 18px;font-size:17.5px}
}

/* INPUT AND OUTPUT
   A document going in, a verified payment coming out. Added to both ends rather
   than one, which is what the earlier single-sided attempts got wrong: the
   composition was balanced at 3-in / 4-out and anything appended to one side
   only made it lopsided. The document fans to three, the four rails converge to
   one, so the two ends mirror each other.
   Green is held for the verified end, as it is everywhere else here. */
.archsvg .lnk-in2{stroke:rgba(141,220,241,.4);stroke-width:1.4;fill:none}
.arch-light .archsvg .lnk-in2{stroke:rgba(83,97,168,.55);stroke-width:1.6}
.archsvg .lnk-doc{stroke:rgba(141,220,241,.4);stroke-width:1.4;fill:none}
.arch-light .archsvg .lnk-doc{stroke:rgba(83,97,168,.4);stroke-width:1.5}
.archsvg .dring{fill:#fff;stroke:var(--mid);stroke-width:1.8}
.archsvg .dico{fill:none;stroke:var(--mid);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.archsvg .dstat{font-size:12px;font-weight:700;letter-spacing:1.3px;
  text-anchor:middle;fill:var(--mid)}
.arch-light .archsvg .pulse-doc{stroke:#352D6F;filter:drop-shadow(0 0 4px rgba(53,45,111,.35))}
.archsvg .lnk-cv{stroke:rgba(141,220,241,.4);stroke-width:1.4;fill:none}
.arch-light .archsvg .lnk-cv{stroke:rgba(14,124,66,.4);stroke-width:1.5}
.archsvg .vout-ring{fill:#0E7C42;stroke:none}
.archsvg .vout-check{fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.archsvg .vout-lab{font-size:15px;font-weight:700;text-anchor:middle;
  fill:rgba(255,255,255,.78)}
.arch-light .archsvg .vout-lab{fill:#0E7C42}
/* the halo is timed to the outbound pulse, which crosses at 1.1s of the shared
   3.4s cycle, so the output lights as the payment reaches it */
.archsvg .vout-halo{fill:none;stroke:#0E7C42;stroke-width:2;opacity:0;
  transform-origin:952px 211px;animation:voutpass 3.4s linear infinite;
  animation-delay:1.6s}
@keyframes voutpass{
  0%{opacity:0;transform:scale(1)}
  8%{opacity:.5;transform:scale(1)}
  30%{opacity:0;transform:scale(1.9)}
  100%{opacity:0;transform:scale(1.9)}}
@media(prefers-reduced-motion:reduce){.archsvg .vout-halo{animation:none;opacity:0}}
/* the phone stack carries the same two ends */
.flow-stack .node-doc{border-style:dashed}
.flow-stack .node-vout{border-color:#0E7C42 !important;color:#0E7C42 !important;font-weight:700}

/* END TO END
   The two new segments were static, so the flow started at the source nodes and
   stopped at the rails. These carry the same normalised pulse as everything
   else: pathLength 100 on each path means one dash definition crosses a 16-unit
   straight run and a 60-unit curve in the same time and at the same apparent
   length.
   Phasing, on the shared 3.4s cycle: doc 2.94 to 3.06, which on a loop lands
   just before the source pulses at 0; then down at 0.70, out at 1.10 to 2.12,
   then the converge at 2.26 to 2.56. The payment is visibly handed along. */
.archsvg .pulse-doc,.archsvg .pulse-cv{animation:hvpulse 3.4s linear infinite}
.archsvg .pulse-doc{stroke-dasharray:26 100}
.archsvg .pulse-cv{stroke-dasharray:26 100}
/* the converge lands on the verified end, so its pulse arrives green */
.arch-light .archsvg .pulse-cv{stroke:#0E7C42;filter:drop-shadow(0 0 4px rgba(14,124,66,.4))}
.archsvg .pulse-cv{stroke:#8FE3B4;filter:drop-shadow(0 0 5px rgba(143,227,180,.7))}
@media(prefers-reduced-motion:reduce){
  .archsvg .pulse-doc,.archsvg .pulse-cv{animation:none;stroke-dasharray:none;opacity:.35}}

/* TRANSACTION LIFECYCLE SWEEP
   Sits over the band the lifecycle occupies in the screenshot and brightens it
   left to right, once per 3.4s, on the same cycle as the diagram's pulses so the
   page has one clock. Screen blend so it lifts the green line rather than
   painting a white bar across it. */
/* the sweep is positioned against the image alone, not the wrap: the wrap
   includes the browser chrome, which pushed the band ~7 points too high */
.stile-shot .shot-img{position:relative;display:block}
.stile-shot .shot-img img{display:block;width:100%}
.shot-sweep{position:absolute;left:27.8%;right:7.8%;top:33.1%;height:1.1%;
  overflow:hidden;pointer-events:none}
.shot-sweep:after{content:"";position:absolute;top:-140%;bottom:-140%;width:13%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.98) 50%,
    rgba(255,255,255,0));
  mix-blend-mode:screen;filter:blur(.5px);
  animation:shotsweep 3.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes shotsweep{
  0%{transform:translateX(-120%);opacity:0}
  6%{opacity:1}
  62%{transform:translateX(790%);opacity:1}
  72%{transform:translateX(790%);opacity:0}
  100%{transform:translateX(790%);opacity:0}}
@media(prefers-reduced-motion:reduce){.shot-sweep{display:none}}

/* ── DIAGRAM, SIMPLIFIED ────────────────────────────────────────────────────
   The shield becomes the symbol of the platform rather than the whole drawing:
   22% smaller, a flat fill instead of a gradient, a thinner check. Behind it two
   faint concentric rings read as the integrity layer it sits inside, plus a soft
   halo. */
.archsvg .shbody{fill:var(--deep)}
.archsvg .ilayer{fill:none;stroke:rgba(141,220,241,.18);stroke-width:1}
.arch-light .archsvg .ilayer{stroke:rgba(83,97,168,.20)}
.arch-light .archsvg .shieldg{filter:drop-shadow(0 5px 14px rgba(53,45,111,.18))}

/* the four services read as one process: a line through all of them, numbered,
   with chevrons in the gaps, and the plates flattened so they stop reading as
   buttons */

/* the endpoint is a status, not a badge: green is an accent here, not one of the
   drawing's primary colours */
.archsvg .vstat{font-size:11.5px;font-weight:700;letter-spacing:1.5px;
  text-anchor:start;fill:#0E7C42}

/* a container closer to an infrastructure diagram than a marketing illustration */
.arch.arch-light{background:#FCFCFE;border:1px solid var(--line);border-radius:15px;
  box-shadow:0 1px 2px rgba(37,31,78,.04),0 10px 30px rgba(37,31,78,.05);
  padding:34px 30px;position:relative;overflow:hidden}
.arch.arch-light:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 62% at 50% 50%,rgba(83,97,168,.055) 0%,
    rgba(83,97,168,0) 70%)}
.arch.arch-light > *{position:relative}

/* ── DIAGRAM: the four services under the shield ────────────────────────────
   Small marks on one thin line, not four pills. No numbers, no fan of
   connectors: a single short stem from the shield down to the row, then the row
   itself. Everything here is scoped to .arch-light because that is the panel
   this drawing lives in. */
.archsvg .sstem,.archsvg .srail{stroke:rgba(83,97,168,.26);stroke-width:1.2}
.archsvg .sico{fill:none;stroke:var(--mid);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.archsvg .slab{font-size:12px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;text-anchor:middle;fill:var(--deep)}
.archsvg .sarrow{fill:none;stroke:rgba(83,97,168,.5);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* the integrity layer: two faint rings, and the wordmark inside them, so the
   shield reads as the platform rather than as a badge floating in space */
.archsvg .ilayer{fill:rgba(83,97,168,.028);stroke:rgba(83,97,168,.16);stroke-width:1}
.archsvg .ilayer-in{fill:#fff;stroke:rgba(83,97,168,.09);stroke-width:1}
.archsvg .wmark{font-size:20px;font-weight:700;letter-spacing:2.4px;
  text-anchor:middle;fill:var(--deep)}
.archsvg .wsub{font-size:10px;font-weight:700;letter-spacing:1.6px;
  text-anchor:middle;fill:var(--mid);opacity:.85}

/* the columns are named, which is what the two CONNECT labels were failing to do */
.archsvg .colhead{font-size:12px;font-weight:700;letter-spacing:1.9px;
  text-anchor:middle;fill:var(--mid)}
.archsvg .colrule{stroke:rgba(83,97,168,.24);stroke-width:1}

/* the endpoint: an outlined ring and a status, green as an accent only */
.archsvg .vring{fill:#fff;stroke:#0E7C42;stroke-width:1.8}
.archsvg .vcheck{fill:none;stroke:#0E7C42;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.archsvg .vstat{font-size:12px;font-weight:700;letter-spacing:1.3px;
  text-anchor:middle;fill:#0E7C42}

/* alternating photo rows */
.prow{padding:92px 0}
.prow .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:62px;align-items:center}
.prow.flip .prow-copy{order:2}
.prow-eyebrow{color:var(--teal);font-weight:700;letter-spacing:.16em;font-size:13px;text-transform:uppercase}
.prow-copy h2{font-family:Georgia,serif;font-size:clamp(28px,3.2vw,38px);color:var(--navy);
  line-height:1.12;margin:13px 0 16px;max-width:16ch}
.prow-copy p{font-size:17px;color:var(--sub);line-height:1.6;max-width:50ch}
/* Lead-in words carry the argument of a prow row, so they take navy against
   the grey body rather than disappearing into it. */
.prow-copy p b{color:var(--navy);font-weight:700}
.prow-visual .shotwrap{border-radius:11px;overflow:hidden;box-shadow:0 26px 64px rgba(37,31,78,.22)}
@media(max-width:860px){
  /* symmetric, because the hero centres its content: uneven padding pulled the
     block off centre by 40px on phones */
  .lead-hero{padding:48px 20px}
  .prow{padding:54px 0}
  .prow .wrap{grid-template-columns:1fr;gap:28px}
  .prow.flip .prow-copy{order:0}
}

/* ============================================================
   PLATFORM CAPABILITIES — claim-led, featured Verification
   ============================================================ */
.cap-feature{position:relative;overflow:hidden;margin-top:42px;background:var(--panel);color:#fff;
  border-radius:14px;padding:46px 48px}
.cap-feature:before{content:"";position:absolute;inset:-50% -10% auto 30%;height:150%;pointer-events:none;
  background:radial-gradient(50% 60% at 80% 20%,rgba(141,220,241,.20),transparent 62%)}
.cap-feature>*{position:relative}
.cap-name{display:block;color:var(--teal-dk);font-weight:700;letter-spacing:.14em;font-size:12.5px;
  text-transform:uppercase;margin-bottom:9px}
.cap-feature .cap-name{color:var(--teal-br)}
.cap-badge{display:inline-block;margin-bottom:16px;background:rgba(141,220,241,.14);
  border:1px solid rgba(141,220,241,.42);color:var(--teal-br);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 15px}
.cap-feature h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:clamp(30px,4vw,46px);line-height:1.04;color:#fff;margin-top:6px}
.cap-num{color:var(--teal-br)}
.cap-feature p{color:#D3D1DF;font-size:17.5px;line-height:1.56;margin-top:18px;max-width:62ch}
.cap-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.cap-chips span{border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:7px 17px;
  font-size:13.5px;color:#E8F8FC;font-weight:500}

.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
/* Three capability cards where the shared block has four: the product pages
   carry one card per pill on their homepage tile, and those come in threes,
   fours and sixes. */
.cap-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cap-grid-3{grid-template-columns:1fr}}
.cap-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal);
  border-radius:10px;padding:24px 24px 26px}
.cap-card h3{font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:400;
  color:var(--navy);line-height:1.25;margin:0 0 8px}
.cap-card p{font-size:14.5px;color:var(--sub);line-height:1.55}
@media(max-width:860px){
  .cap-feature{padding:34px 26px}
  .cap-feature h3{font-size:30px}
  .cap-grid{grid-template-columns:1fr}
}

/* Payment Integrity. Hero-scale copy so the story leads, with the payer
   dashboard capped below it rather than dominating the section. */
.shot-sec.story{padding:98px 0 90px}
.story .shothead h2{font-size:clamp(32px,4.3vw,50px);line-height:1.08;letter-spacing:-.01em}
.story .shothead .sub{font-size:19px;max-width:64ch;line-height:1.62}
.story .shothead .sub+.sub{margin-top:19px}
.shot-compose{max-width:720px;margin:46px auto 0}
.shot-compose .shotwrap{border-radius:11px;overflow:hidden;box-shadow:0 24px 60px rgba(37,31,78,.22)}
@media(max-width:860px){
  .shot-sec.story{padding:58px 0 56px}
  .impact-lead{padding:48px 0 54px}
  .impact-lead .impact{gap:28px 24px;margin-top:38px}
}

/* Investors: three equal tiles on the shared tile standard. Each name sits
   centred in its own slot, so the row stays balanced whether it holds a
   wordmark or a name. */
/* Investor cards reuse the team flip card whole. The only difference is the
   face of the card: a wordmark sits where a portrait would, so the circular
   crop is undone and the logo is contained at its own aspect ratio. */
#investors .tcard-front img{width:auto;height:38px;max-width:80%;
  border-radius:0;object-fit:contain;margin-bottom:20px}

.rails-row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
           gap:10px;max-width:940px;margin:0 auto}
.rails-row li{border:1px solid var(--line);border-radius:999px;background:#fff;
              padding:8px 16px;font-size:14px;color:var(--teal-dk);font-weight:500}
@media(max-width:560px){.rails-row li{font-size:13px;padding:7px 13px}}
/* Same pill row on a light section — the rails list moved here from the homepage
   trust bar, which now carries the verification claim instead. */
.rails-row-light{justify-content:flex-start;margin:22px 0 0}

/* Wordmark only in the nav. The circle mark is reserved for the favicon and
   any square placement; at nav height the arcs read as noise beside 9 letters.
   Sized by height, and the file is trimmed to its own ink so the optical
   left edge lines up with the content below it. */
.logo-img{display:flex;align-items:center;padding:0;border:0}
.logo-img img{display:block;height:23px;width:auto}
@media(max-width:980px){.logo-img img{height:20px}}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE SPINE
   All six service pages run the same five beats in the same order:
   hero + visual, benefits, how it works, outcomes, CTA. "Where it fits" was a
   sixth, carrying a strip of all six services with the current one marked. It
   came out on 2026-08-11: the Products menu lists all six with descriptions on
   every page, so the strip was repeating the navigation under a headline.
   Before this they ran anywhere from two sections to seven with nothing in
   common but the rail, so a visitor who read one learned nothing about how to
   read the next. Components below are the parts that were missing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. SPLIT HERO ──────────────────────────────────────────────────────────
   Copy left, a diagram of the service right. The visual is the thesis: it says
   what the service does before a word of the lede is read. Collapses to one
   column under 900px with the visual below, because a 40ch column of 50px type
   is unreadable and the diagram needs width more than the copy does. */
.hero-split .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
                  gap:56px;align-items:center}
.hero-split h1{max-width:15ch}
/* The split hero gives its headline roughly half the width the full-bleed one
   has, but 50px type does not step down until 860px, so between 900 and 1120 a
   four-word line became four lines. Scale with the column instead. Bounded to
   the two-column range: below 900px the hero is single column and the ordinary
   .hero h1 breakpoints apply, so a split hero and a plain one match on a phone. */
@media(min-width:901px){.hero-split h1{font-size:clamp(36px,3.9vw,50px)}}
/* a sentence-length headline: the 15ch cap and 50px scale are sized for a
   two-word product name and set twelve words as a tower */
.hero-split h1.h1-long{max-width:24ch}
@media(min-width:901px){.hero-split h1.h1-long{font-size:clamp(29px,2.75vw,38px)}}
.hero-split p.lede{max-width:46ch}
.hero-vis{min-width:0}
.hero-vis svg{width:100%;height:auto;display:block;
              filter:drop-shadow(0 24px 44px rgba(0,0,0,.30))}
@media(max-width:900px){
  .hero-split .wrap{grid-template-columns:1fr;gap:40px}
  .hero-split h1,.hero-split p.lede{max-width:none}
}
/* VERIFIED PAYOUTS UI PEEK. The hero shows the product, not a diagram: the
   central workspace of the payment-detail screenshot (crop x458-2160 y340-1055
   of the 2200x1475 shot), tilted in perspective, flat below 900px. The glow
   rides the green lifecycle track and runs on hover only. */
.hero-vis .ui-persp{perspective:1000px}
.ui-tilt{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:1702/715;
  border:1px solid rgba(226,232,240,.8);background:#F6F7FB;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.35);
  transform:rotateY(-12deg) rotateX(6deg);transition:transform .5s ease}
.ui-persp:hover .ui-tilt{transform:rotateY(-4deg) rotateX(3deg)}
.ui-tilt img{position:absolute;width:129.26%;max-width:none;left:-26.91%;top:-47.56%}
.ui-glow{position:absolute;left:9.6%;width:82.7%;top:19.7%;height:4.4%;
  border-radius:999px;pointer-events:none;opacity:0;filter:blur(3px);
  background:radial-gradient(50% 100% at 50% 50%,rgba(48,196,99,.55),rgba(48,196,99,0) 75%)}
.ui-persp:hover .ui-glow{animation:uipulse 1.6s ease-in-out infinite}
@keyframes uipulse{0%,100%{opacity:0}50%{opacity:1}}
/* VAAS IDE PEEK. Same perspective treatment as the payouts hero, dark ground:
   a request/response toggle in a minimal IDE frame. Hovering the window lights
   the decision lines green and the reason code purple. */
.ui-ide{position:relative;overflow:hidden;border-radius:14px;background:#020617;
  border:1px solid #1E293B;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.35);
  transform:rotateY(-12deg) rotateX(6deg);transition:transform .5s ease;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ui-persp:hover .ui-ide{transform:rotateY(-4deg) rotateX(3deg)}
.ui-ide-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid #1E293B}
.ui-ide-dots{display:flex;gap:6px}
.ui-ide-dots i{width:10px;height:10px;border-radius:50%}
.ui-tab{font-size:12px;letter-spacing:.02em;color:#94A3B8;padding:6px 11px;
  border-radius:7px;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s}
.ui-tab.on{background:rgba(83,97,168,.28);color:#E2E8F0}
.ui-pane{display:none;margin:0;padding:18px 22px;font-size:12.5px;line-height:1.68;
  color:#CBD5E1;overflow-x:auto}
.ui-pane.on{display:block}
.ui-pane .k{color:#8DDCF1}
.ui-pane .s{color:#BEEBF9}
.ui-pane .n{color:#fff}
.ui-hl-g,.ui-hl-p{transition:text-shadow .35s,filter .35s;border-radius:4px}
.ui-ide:hover .ui-hl-g,.ui-ide:hover .ui-hl-g .k,.ui-ide:hover .ui-hl-g .s{
  color:#4ADE80;text-shadow:0 0 14px rgba(74,222,128,.55)}
.ui-ide:hover .ui-hl-p,.ui-ide:hover .ui-hl-p .k,.ui-ide:hover .ui-hl-p .s{
  color:#C4B5FD;text-shadow:0 0 14px rgba(167,139,250,.6)}
/* ONBOARDING HERO FLOW. The animated payee enrollment (same component as the
   home tile), full scale: the whole screen advances through the flow on a ~2s
   dwell, Stripe-fashion. Same perspective treatment as the other heroes. */
.ui-flowshot{max-width:380px;margin:0 auto;border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.12),0 32px 64px rgba(0,0,0,.35);
  transform:rotateY(-6deg) rotateX(-2deg);transition:transform .5s ease}
.ui-persp:hover .ui-flowshot{transform:none}
.ui-flowshot .pflow{margin:0;max-width:none}
/* CURSOR TOUR of the payer app on the onboarding page. One JS-driven loop:
   base directory -> Enrolled tile -> enrolled view -> deselect -> base ->
   Email Opened tile -> filtered view -> Carol Brown row -> her details ->
   back button -> base. Screens are real captures; the cursor, click ripple
   and row highlight are overlays. All four captures share ~1.82:1. */
.clickseq .shotwrap{max-width:680px}
.cs-stage{position:relative;overflow:hidden;aspect-ratio:2472/1360;background:#fff}
.cs-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;opacity:0;transition:opacity .35s ease}
[data-scene="base"] .cs-sc-base,[data-scene="enrolled"] .cs-sc-enrolled,
[data-scene="email"] .cs-sc-email,[data-scene="carol"] .cs-sc-carol{opacity:1}
.cs-row{position:absolute;left:12.2%;right:1.5%;top:82.2%;height:4.4%;
  border-radius:6px;background:rgba(83,97,168,.14);
  box-shadow:inset 0 0 0 1px rgba(83,97,168,.35);opacity:0;transition:opacity .3s}
.clickseq.cs-row-on .cs-row{opacity:1}
.cs-cursor{position:absolute;width:22px;height:22px;z-index:3;left:75%;top:88%;
  opacity:0;transition:left 1.15s cubic-bezier(.4,0,.2,1),
  top 1.15s cubic-bezier(.4,0,.2,1),opacity .3s,transform .15s;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.clickseq.cs-cursor-on .cs-cursor{opacity:1}
.clickseq.cs-press .cs-cursor{transform:scale(.82)}
.cs-cursor svg{width:100%;height:100%}
.cs-ripple{position:absolute;left:-4px;top:-4px;width:30px;height:30px;
  border-radius:50%;border:2px solid rgba(83,97,168,.65);opacity:0;
  transform:scale(.3)}
.clickseq.cs-click .cs-ripple{animation:cs-rip .5s ease-out}
@keyframes cs-rip{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){.cs-cursor,.cs-row{display:none}}

/* the hero glow: purple, upper right */
.hero-onb{position:relative;overflow:hidden}
.hero-onb::before{content:"";position:absolute;top:-180px;right:-140px;width:600px;
  height:600px;border-radius:50%;background:rgba(147,51,234,.10);
  filter:blur(140px);pointer-events:none}
.hero-onb .wrap{position:relative;z-index:1}
@media(max-width:900px){.ui-flowshot,.ui-persp:hover .ui-flowshot{transform:none}}
@media(max-width:900px){.ui-tilt,.ui-persp:hover .ui-tilt,.ui-ide,.ui-persp:hover .ui-ide,.ui-stack,.ui-persp:hover .ui-stack{transform:none}}
@media(prefers-reduced-motion:reduce){.ui-persp:hover .ui-glow{animation:none;opacity:.5}}

/* the diagrams share one vocabulary: hairline plates, cyan for the live edge,
   white only where something is confirmed */
.hv-plate{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.16)}
.hv-plate-on{fill:rgba(141,220,241,.13);stroke:rgba(141,220,241,.52)}
.hv-t{fill:#D3D1DF;font-size:12px;font-weight:600;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.hv-t-on{fill:#8DDCF1}
.hv-t-w{fill:#fff}
.hv-cap{fill:#A8A4C4;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
        font-weight:700;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.hv-line{stroke:rgba(255,255,255,.20);stroke-width:1.5;fill:none}
.hv-line-on{stroke:#8DDCF1;stroke-width:1.8;fill:none}
/* one pulse down the live edge, on the 3.4s beat the rest of the site uses */
.hv-flow{stroke:#8DDCF1;stroke-width:2.2;fill:none;stroke-linecap:round;
         stroke-dasharray:22 210;animation:hvflow 3.4s linear infinite}
@keyframes hvflow{from{stroke-dashoffset:232}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hv-flow{animation:none;opacity:.55}}
/* stroke icons inside a hero-vis plate: the payer and payee UX endpoints on
   the solution pages */
.hv-ic{fill:none;stroke:#8DDCF1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── 2. KEY BENEFITS ────────────────────────────────────────────────────────
   Three or four, phrased as the gain rather than the absence of a problem.
   Deliberately lighter than .cap-card: these are read at a glance on the way
   past, where capability cards are read by someone who has decided to stop. */
.tile-row .cap-card{min-height:210px}
.tile-row .cap-card .ben-i{margin-bottom:13px}
.bens{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
      gap:18px;margin-top:34px}
.ben{background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal);
     border-radius:10px;padding:24px 24px 26px}
section.alt .ben{background:var(--white)}
/* payers benefits, matched to the banks revenue-driver tiles: bold serif
   lead, no icon pod */
.bens-hyb .ben-i{display:none}
.bens-hyb .ben h3{font-size:24px;font-weight:700;color:var(--deep);
  line-height:1.15;margin:4px 0 10px}
.ben-i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
       border-radius:50%;background:var(--card);color:var(--mid);margin-bottom:15px}
.ben-i svg{width:20px;height:20px}
.ben h3{font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:400;
        color:var(--navy);line-height:1.25;margin:0 0 8px}
.ben p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sub)}

/* ── 4. OUTCOMES ────────────────────────────────────────────────────────────
   Same treatment as the homepage Impact band, so a measured result looks the
   same wherever it appears. */
/* Outcomes runs straight into the CTA, and two dark grounds nine units apart
   read as a seam rather than a step. Same value as the band below it instead,
   so the page closes on one dark block: the numbers, then the ask. */
.outcomes-band{background:var(--navy2);padding:62px 0 58px}
.outcomes-band .impact{margin-top:38px}

/* Outcomes with fewer than three figures centre rather than stretch: one stat
   across a 1120px grid reads as a mistake. */
.impact-1,.impact-2{grid-template-columns:repeat(auto-fit,minmax(190px,320px));
                    justify-content:center;text-align:center}

/* ── ONBOARD ROUTES ─────────────────────────────────────────────────────────
   Onboard is the one service where "how it works" has no single answer: a
   branded invite, a touchless run and a recurring payment are different
   workflows, not one workflow with options. One rail each, so the page answers
   the question a reader actually has, which is which of these applies to me. */
.route{margin-top:34px}
.route-h{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
.route-n{font-family:Georgia,"Times New Roman",serif;font-size:21px;color:var(--navy);
         line-height:1.2}
.route-tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
           color:var(--mid);background:var(--card);border-radius:999px;padding:5px 11px}
.route-d{margin:9px 0 0;font-size:15px;color:var(--sub);max-width:74ch}
.route .vflow{margin-top:14px}
/* one policy band for all three rather than the same sentence three times */
.route-policy{margin-top:26px;padding:13px 24px;background:var(--panel);border-radius:8px;
              color:#D3D1DF;font-size:12.5px;line-height:1.55;text-align:center}
.route-policy b{color:var(--teal-br);font-weight:700;letter-spacing:.12em;
                text-transform:uppercase;font-size:11.5px;margin-right:9px}

/* The features under a rail belong to how-it-works. Given their own kicker and
   h2 they read as a seventh section the structure never called for, so they take
   a subordinate heading instead: one h2 per section. */
.sub-h{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:400;
       color:var(--navy);line-height:1.25;margin:56px 0 0;padding-top:26px;
       border-top:1px solid var(--line)}
.sub-h + .cap-grid{margin-top:22px}

/* ── ONBOARD: the enrollment reel, inside the route it depicts ──────────────
   The rail says what the six stages are; this says what a payee sees while
   they happen, which is the argument that it is quick. It sits inside the
   Branded invite route rather than in a section of its own, because it is not
   a seventh beat, it is evidence for the third. */
.route-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,392px);
            gap:52px;align-items:center;margin-top:34px;
            padding-top:30px;border-top:1px solid var(--line)}
.route-demo-copy h4{font-family:Georgia,"Times New Roman",serif;font-size:22px;
                    font-weight:400;color:var(--navy);line-height:1.25;margin:0 0 12px}
.route-demo-copy p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--sub);max-width:52ch}
.route-demo-claim{font-weight:600;color:var(--teal-dk)!important}
.route-demo-vis{min-width:0}
@media(max-width:900px){
  .route-demo{grid-template-columns:1fr;gap:28px}
  .route-demo-vis{max-width:392px;margin:0 auto;width:100%}
}

/* How it works carries the rail, the detail slot and the capability cards, and
   is the section a reader stops on. It gets more room than the sections that
   only orient them. */
#how{padding:92px 0 96px}
@media(max-width:860px){
  #how{padding:64px 0 68px}
  .vflow{padding:22px 20px 0}
  .vf-policy{margin:18px -20px 0;padding:13px 20px}
  .vf-n{width:32px;height:32px;font-size:13.5px}
  .vf-rail li:not(:first-child):before,.vf-rail li:not(:last-child):after{top:15px}
  .vf-detail span{font-size:15px}
}

/* Figure highlight inside a card. Was two inline styles carrying the old teal,
   which survived the palette swap because the value sat in HTML rather than
   here. Both live instances sit on a dark card, where the accent is cyan; the
   light default is here so the class is safe to reuse on a white ground. */
.fig{color:var(--deep);font-weight:700}
section.dark .fig{color:var(--teal-br)}

/* The Connect service on the architecture diagram. It is the lines rather than
   a pill: nothing is decided at Connect, data arrives through it and leaves
   through it, so the label sits on each line bundle instead of on the bench.
   #76738C composites to 4.56:1 on the diagram's white panel. */
.clab{fill:#76738C;font-size:10.5px;font-weight:700;letter-spacing:.13em;
      text-transform:uppercase;text-anchor:middle;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* Verify's fifth benefit is the composite: four verifications combine into one
   confidence score, so its tile spans the full row beneath the four inputs and
   the layout says what the copy says. */
.ben-wide{grid-column:1/-1}

/* Footnote inside a dropdown. The four solutions differ by which services they
   bundle, and Connect and Explain are in all four, so the menu states the
   constant once rather than repeating it on every line. */
.ddnote{display:block;padding:11px 18px 3px;margin-top:6px;border-top:1px solid var(--line);
        font-size:12px;color:var(--sub)}

/* ── PLATFORM: the eight capabilities, grouped by stage ─────────────────────
   Four stage blocks, two cards each. The stage head is a rule with its number
   and name, so the eight read as four pairs rather than a wall of eight. */
.stage{margin-top:44px}
.stage:first-of-type{margin-top:30px}
.stage-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
            padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:20px}
.stage-n{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
         color:var(--mid);background:var(--card);border-radius:999px;padding:5px 12px}
.stage-name{font-family:Georgia,"Times New Roman",serif;font-size:23px;color:var(--navy);
            line-height:1.2}
.stage .cap-grid{margin-top:0}
/* the why cards carry no icon, so they lose the icon's reserved space */
#why .ben{padding-top:26px}

/* A capability card that is a link: the six services on a solution page point
   at their own product pages. Same card, plus the affordances a link needs. */
a.cap-link,a.cap-link:link,a.cap-link:visited{text-decoration:none;color:inherit;display:block}
a.cap-link{transition:border-color .2s,transform .2s}
a.cap-link:hover,a.cap-link:focus-visible{border-top-color:var(--teal);transform:translateY(-2px)}
a.cap-link:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media(prefers-reduced-motion:reduce){a.cap-link:hover,a.cap-link:focus-visible{transform:none}}

/* ── PLATFORM MEGA-MENU ─────────────────────────────────────────────────────
   Ten destinations do not belong in a vertical list: at one per row the panel
   runs past 700px and a short laptop viewport cannot show it. Wide instead,
   after Moov: a featured platform tile on the left, then Solutions in two
   columns above a rule and Services in three below it. The panel is anchored
   to the nav rather than to its own trigger, so it can be wider than the item
   that opens it. */
/* the panel is wider than its trigger, so nav is the containing block */
nav{position:relative}
.navlinks>.dd-platform{position:static}
/* The panel hangs off nav rather than its own .dd, so the inherited top:100%
   measures the whole bar and drops it below the other two menus. Anchor it to
   the bottom of the trigger row instead: the bar centre plus half a link. */
.ddmega{left:32px;right:auto;width:min(1000px,calc(100% - 64px));
        top:calc(50% + 11.25px);
        display:flex;gap:0;padding:0;overflow:hidden}
/* the featured tile: same idiom as a lifecycle tile, at menu scale */
.ddfeature{flex:0 0 232px;display:flex!important;flex-direction:column;gap:7px;
           padding:22px 22px 24px!important;background:var(--card);
           border-right:1px solid var(--line);text-decoration:none}
.ddfeature-mark{display:block;width:34px;height:38px;margin-bottom:6px}
.ddfeature-mark svg{width:100%;height:100%;display:block}
.ddfeature strong{font-family:Georgia,"Times New Roman",serif;font-weight:400;
                  font-size:18px;line-height:1.25;color:var(--navy)}
.ddfeature span{font-size:13px;line-height:1.5;color:var(--sub)}
.ddfeature:hover strong{color:var(--teal-dk)}
.ddmain{flex:1 1 0;min-width:0;padding:14px 0 16px}
.ddsec-sep{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ddgroup{display:block;padding:2px 20px 8px;font-size:11px;font-weight:700;
         letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.ddgrid{display:grid;gap:0 4px;padding:0 8px}
.ddgrid-2{grid-template-columns:repeat(2,1fr)}
.ddgrid-3{grid-template-columns:repeat(3,1fr)}
.ddgrid a{padding:9px 12px!important;border-radius:7px}
.ddgrid a:hover{background:var(--off)}

/* Hovering any top-level item, or holding a menu open, lifts the whole bar to
   pure white, so the bar reacts as one surface rather than just the word under
   the cursor. The CTA button is its own surface and is left out. */
nav:has(.navlinks>a:not(.navcta):hover),
nav:has(.navlinks>.dd>a:hover),
nav:has(.navlinks>.dd:hover),
nav:has(.navlinks>.dd:focus-within){background:#fff}
/* an open panel is the bar continuing down, so it lifts to white with it */
.dd:hover>.ddmega,.dd:focus-within>.ddmega{background:#fff}

/* MEGA PANEL, Stripe pattern — one panel flush under the bar for every menu,
   its columns divided by hairlines, each headed in plain sentence case with
   accent-coloured links beneath. */
@media(min-width:1181px){
  /* nav is the containing block, so all three panels share one left edge */
  .navlinks>.dd{position:static}
  .ddmega{left:var(--ddx,32px);right:auto;top:100%;width:max-content;
    max-width:calc(100% - 64px);min-width:0;margin-top:0;
    /* the panel is the nav continuing downward: no accent bar, no seam, and
       the bar's own bottom rule is what separates them */
    border-top:0;border-radius:0 0 10px 10px;background:#F6F6F9;
    box-shadow:0 18px 44px rgba(37,31,78,.11)}
  .ddmega .ddmain{display:flex;padding:0}
  .ddmega .ddsec{width:250px;padding:26px 30px 30px;
    border-left:1px solid var(--line);border-top:0;margin-top:0}
  .ddmega .ddsec:first-child{border-left:0}
  .ddmega .ddgroup{padding:0 0 14px;font-size:16px;font-weight:400;
    letter-spacing:normal;text-transform:none;color:var(--navy)}
  .ddmega .ddgrid{grid-template-columns:1fr;gap:0;padding:0}
  .ddmega .ddgrid a,.ddmega .ddgrid a:hover{padding:8px 0!important;
    border-radius:0;background:transparent}
  .ddmega .ddgrid a strong{color:var(--accent);font-weight:600}
  .ddmega .ddgrid a:hover strong{color:var(--accent-2)}
}

.ddmega .ddnote{border-top:0;margin-top:4px;padding:8px 20px 0;font-size:11.5px}
@media(max-width:1180px){
  /* The base .ddmega sets display:flex further down the sheet than the collapse
     rule above, and at equal specificity source order won: the Platform group
     stayed expanded. It is collapsed here, after that rule, and the open state
     carries enough specificity to reopen it. */
  .ddmega{width:auto;display:none}
  .navlinks .dd.open>.ddmega{display:block}
  /* the feature panel becomes the group's first row rather than vanishing:
     it is the only link to platform.html once the header row only expands */
  .ddfeature{flex:none;display:block!important;padding:10px 22px 10px 34px;
             border-right:0;border-bottom:1px solid var(--line);background:transparent}
  .ddfeature-mark{display:none}
  .ddfeature strong{font-family:inherit;font-size:14.5px;font-weight:700;
                    color:var(--navy)}
  .ddfeature span{display:none}
  .ddmain{padding:2px 0 0}
  .ddgrid,.ddgrid-2,.ddgrid-3{grid-template-columns:1fr;padding:0}
  .ddgrid a,.ddgrid a:hover{padding:10px 22px 10px 34px!important;border-radius:0}
  .ddgroup{padding:12px 22px 4px 34px;color:var(--sub)}
  .ddsec-sep{margin-top:4px;padding-top:4px}
  .ddmega .ddnote{display:none}
}

/* Persona pills on a solution card. Same idiom as the lifecycle tile chips, at
   card scale, sitting on the card floor so cards of different name lengths
   still line their pills up. */
.exgrid a{position:relative}
.ex-who{display:flex;flex-wrap:wrap;align-content:flex-start;align-self:start;
        gap:4px;padding-top:12px}
.ex-who span{border:1px solid rgba(var(--glow),.30);border-radius:999px;
             padding:2px 8px;font-size:11px;font-weight:600;color:var(--teal-dk);
             background:#fff;pointer-events:none;white-space:nowrap}
@media(max-width:460px){.exgrid{grid-template-columns:1fr}}

/* Explore tiles align line for line across the row. Equal card height was not
   enough: a name that wrapped to two lines pushed its description and pills
   25px below its neighbours'. Each block reserves two lines of its own type, so
   the name, the description and the pill row all start at the same offset in
   every card whatever the copy length. */
.exgrid a{display:grid;grid-template-rows:auto auto 1fr;min-height:100%}
.ex-name{display:block;min-height:2.4em}
/* border-box means 3em included the 9px of padding, so a two-line description
   still grew past it and pushed its pills 10px below a one-line neighbour. */
.ex-obj{display:block;line-height:1.5;min-height:48px}
/* between 980 and 1100 the cards are narrow enough for a description to take a
   third line, so the block reserves one there too */
@media(min-width:981px) and (max-width:1100px){.ex-obj{min-height:68px}}

/* The four service pills in the architecture diagram are links. SVG anchors get
   no affordance by default, so the pill lifts its fill and its label on hover
   the way the lifecycle tiles do, and keyboard focus draws the same state. */
a.bpill{cursor:pointer}
a.bpill .btxt{transition:fill .18s}
a.bpill:hover .btxt,a.bpill:focus-visible .btxt{fill:var(--teal-dk)}
a.bpill:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  a.bpill .brect,a.bpill .btxt{transition:none}
}

/* Who it's for holds one row on desktop however many audiences a solution has:
   four cards at 1120 sit at 250px each, which the two-line descriptions take
   comfortably. Below 900 they stack, since four across would leave 190px. */
@media(min-width:901px){
  #who .cap-grid{grid-template-columns:repeat(var(--who-n,4),1fr)}
}
@media(max-width:900px){
  #who .cap-grid{grid-template-columns:1fr}
}

/* ── PHONE ──────────────────────────────────────────────────────────────────
   Every grid collapses to one column below 640, so a page becomes a single
   stack of cards. At desktop paddings that ran 5,200 to 6,300px, seven or eight
   screens of scrolling, with more air between cards than inside them. This pass
   tightens the vertical rhythm rather than removing anything: sections, cards,
   and the gaps between them all come in, and the type steps down with them. */
@media(max-width:640px){
  section{padding:38px 0}
  header.hero,.hero{padding:40px 0 38px}
  .wrap{padding:0 18px}

  h1,.hero h1{font-size:28px;line-height:1.18}
  h2{font-size:21px;line-height:1.22}
  .lede{font-size:16.5px;line-height:1.5;margin-top:16px}
  .sub{font-size:15.5px;margin-top:11px}
  .sub-h{font-size:20px;margin-top:34px;padding-top:20px}

  /* cards: less padding, tighter stacking, smaller icon plate */
  .cap-card{padding:18px 18px 20px}
  .cap-grid{gap:12px;margin-top:18px}
  .ben{padding:18px 18px 20px}
  .bens{gap:12px;margin-top:22px}
  .ben-i{width:32px;height:32px;margin-bottom:11px}
  .ben-i svg{width:17px;height:17px}
  .ben h3,.cap-card h3{font-size:17px}
  .ben p,.cap-card p{font-size:14px}

  .impact{gap:16px;margin-top:24px}
  .cta{margin-top:24px;gap:10px}
  .cta-band{padding:42px 0}

  /* the rail and its fixed detail slot. The policy band bleeds to the panel
     edge, so its negative margin has to track the padding set just above:
     a mismatch pushes the band past the panel and overflows the page. */
  .vflow{margin-top:22px;padding:18px 16px 0}
  .vf-policy{margin:18px -16px 0;padding:13px 16px}
  .vf-detail{margin-top:16px}
  .stage{margin-top:30px}
  .stage-head{margin-bottom:14px;padding-bottom:9px}

  /* the lifecycle panel on the solution pages, same bleed rule */
  .lc-panel{padding:14px}
  .lc-policy{margin:20px -14px -14px;padding:14px 16px}
  .lc-tile{padding:14px 15px 13px}
  .lc-panel .lc{margin-top:0}
}

/* Homepage on a phone. Three blocks carried most of its length: the hero's four
   the stacked architecture flow at
   763px, and four solution tiles at 773px. All three hold their content and
   lose the air. */
@media(max-width:640px){
  /* The hero's own rules are scoped to .lead-hero, which outranks the generic
     h1/.sub sizes in the phone block above, so its type never stepped down:
     the headline stayed at 35px and the sub at 24px on a 393px screen. Both
     are named here so the hero follows the same scale as everything else. */
  /* balance evens the two lines: the headline was breaking as "The Payment
     Integrity" over a one-word "Platform". Unsupported browsers just keep the
     greedy break, which is what they had. */
  .lead-hero h1{font-size:32px;line-height:1.08;letter-spacing:-.018em;
                text-wrap:balance}
  /* size comes from the fluid rule above; a fixed value here would break the
     one-line guarantee it exists to keep */
  .lead-hero p.sub{line-height:1.45;margin-top:13px}

  /* phones only: a headline, a sub and four descriptions was more reading than
     a phone hero should carry, so each card keeps its icon and its claim.
     Desktop shows the descriptions. */
  /* the icon stays on the claim's row, centred against it, and the claim wraps
     under itself rather than under the icon. The icon and the type step down so
     the claim keeps a usable measure in the ~125px left beside it. */
  .lh-inner{padding-bottom:0}

  /* the architecture panel's phone padding and its Explain band are set
     together in the max-width:760 block above, so the two stay in step */

  /* The trust bar closes the use-case section, and at phone width its four
     names each took a row of their own. The rule and its label come in, and
     the pills shrink enough to pair up. */
  .trust-lead{margin-top:22px;padding-top:16px;font-size:11px;
              letter-spacing:.11em;line-height:1.45}
  .rails-row{gap:7px;margin-top:14px}
  .rails-row li{font-size:12px;padding:5px 11px}

  /* four solution tiles: two across, which their five-word descriptions and
     two pill rows fit at 172px */
  .exgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .exgrid a{padding:16px 14px}
  .ex-name{font-size:17px}
  .ex-obj{font-size:12.5px;min-height:0}
  .ex-who span{font-size:10px;padding:2px 6px}

  /* Use cases: twelve items in one column ran longer than a whole screen, so
     they pair up. The type and the tick step down so every label holds one
     line at 393px. */
  .ucases{grid-template-columns:repeat(2,1fr);gap:9px 14px;margin-top:18px}
  .ucases li{font-size:14px;padding-left:23px;line-height:1.35}
  .ucases li:before{width:16px;height:16px;top:2px;background-size:11px}
}
@media(max-width:430px){
  .exgrid{grid-template-columns:1fr}
}

/* ── PHONE, THE OLDER COMPONENT SET ─────────────────────────────────────────
   The audience and platform pages predate the six-page spine and are built from
   a different kit: .grid2/.grid3/.cols card grids, .certs standards tiles, the
   .stages process flow, .aud audience cards. The phone pass above never reached
   any of it, so those pages still ran nine and ten screens while the service
   pages ran five. Measured at 393: public-sector 8,884px, banks 8,464px,
   insurance 7,575px. Same treatment as the newer cards, so the whole site keeps
   one rhythm: gaps and card padding come in, the type steps down with them, and
   nothing is removed. */
@media(max-width:640px){
  /* #how sets its own padding by id, which outranked the section rule above */
  #how{padding:38px 0 40px}

  /* card grids and their cards */
  .grid2,.grid3,.aud{gap:12px;margin-top:20px}
  .cols{gap:26px;margin-top:20px}
  .pillar,.pcard,.acard{padding:18px 18px 20px}
  .pillar h3,.acard h3{font-size:17px}
  .pillar p,.pcard p,.acard p{font-size:14px}
  .pillar .num{font-size:21px}
  h3.colhead{font-size:18px}
  ul.check{margin-top:12px}
  ul.check li{font-size:14.5px;margin-bottom:9px;padding-left:24px}
  .outcomes{gap:10px 20px;margin-top:20px}

  /* the standards tiles, four to a page on every audience page */
  .certs{gap:10px;margin-top:20px}
  .certs li{padding:14px 16px}
  .certs b{font-size:15.5px;margin-bottom:4px}
  .certs span{font-size:13px}
  .certs-note{font-size:12.5px;margin-top:14px}

  /* the staged process flow. .stage is shared with the platform page's
     capability groups, so both tighten together, which is what we want */
  .stages{gap:22px;margin-top:22px}
  .stage{padding:16px 16px 14px}
  .stages .stage h3{font-size:17px;margin-bottom:10px}
  .steps li{margin-bottom:10px;padding-left:27px}
  .steps li:last-child{margin-bottom:4px}
  .steps b{font-size:14.5px}
  .steps span{font-size:13.5px}

  .models{gap:10px;margin-top:22px}
  .quote{margin-top:24px;padding:6px 0 6px 18px}
}

/* ── PHONE, SPECIFICITY CORRECTIONS ─────────────────────────────────────────
   The phone rules above are written on bare classes and element names, and a
   number of them never took effect: the site scopes many of the same properties
   to a parent or an id, and that outranks a single class whatever the source
   order. The homepage headline sat at 35px and its sub at 24px on a 393px
   screen for exactly this reason, and several sections kept desktop padding.
   Each rule below restates a phone value at the specificity of the rule that
   was beating it. Found by comparing every declaration in the phone blocks
   against the value the browser actually computed, across index, banks,
   public-sector, verify, platform and a solution page. */
@media(max-width:640px){
  /* sections that set their own padding by id or class */
  #use-cases,#explore,.impact-lead,.prow{padding:38px 0}
  .shot-sec,.shot-sec.story{padding:38px 0}

  /* hero type and controls, scoped the way the hero scopes them */
  .hero p.lede{font-size:16.5px;line-height:1.5;margin-top:16px}
  .hero .cta{margin-top:24px;gap:10px}

  /* stat rows, scoped to their band */
  .impact-lead .impact,.outcomes-band .impact{gap:16px;margin-top:24px}

  /* cards scoped to a section */
  #why .ben{padding-top:18px}
  .sub-h + .cap-grid{margin-top:18px}
}

/* Holds a hyphenated phrase together. A hyphen is a break opportunity, so
   "Verifying-before-you-pay." was splitting across lines on a phone. Applied in
   the markup around the phrase rather than by substituting non-breaking hyphen
   characters, so the glyphs and the font stay exactly as they were. */
.nb{white-space:nowrap}

/* ── NO SIDEWAYS SCROLL, EVER ───────────────────────────────────────────────
   A single element wider than the screen makes the whole document scroll
   sideways, and because most blocks here are centred, they then sit centred on
   the wider box: the page shifts right and content is cut off the right edge.
   That reads as "text is cut off" rather than as a scrollbar, which makes it
   hard to trace back to whatever the wide element was.
   This makes the failure impossible whatever the cause, including markup this
   stylesheet does not control, such as embedded form and captcha widgets.
   clip rather than hidden so no scroll container is created; hidden is listed
   first for browsers without clip. Nothing here uses position:sticky, so
   neither value costs anything. */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip;max-width:100%}

/* API RESPONSE BLOCK
   A static rendering of the developers-page explorer response, for the VaaS
   solution page. Self-contained on purpose: the explorer's own styling lives
   in developers.css behind a webfont, and a solution page should not have to
   load either. The shape and the reason codes are the ones developers.js
   actually returns, so this stays honest only as long as it tracks that file. */
.jsonwrap{border-radius:9px;overflow:hidden;box-shadow:0 20px 54px rgba(37,31,78,.22);
          background:var(--panel)}
.jsonwrap .browser{background:#1D1840}
.jsonbody{margin:0;padding:18px 20px 20px;overflow-x:auto;
          font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
          font-size:12.5px;line-height:1.65;color:#D3D1DF}
.jsonbody .k{color:#8DDCF1}
.jsonbody .s{color:#BEEBF9}
.jsonbody .n{color:#fff}
.jsonbody .c{color:#8C86AE}
@media(max-width:640px){.jsonbody{font-size:11px;padding:14px 14px 16px}}

/* A demo panel beside its explanation: the enrollment widget on the onboarding
   page, the API response on VaaS. Both are far larger at full column width than
   they need to be to read, and half the width leaves room for the point they
   are making. */
.demo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
              gap:38px;align-items:center;margin-top:26px}
.demo-split h3{font-size:22px;color:var(--navy);margin-bottom:12px}
@media(max-width:860px){.demo-split{grid-template-columns:minmax(0,1fr);gap:24px}}
@media(max-width:640px){.demo-split{gap:20px;margin-top:20px}
  .demo-split h3{font-size:18px;margin-bottom:9px}}

/* NORMALISED PULSE
   Every animated edge on the solution diagrams carries pathLength="100", so one
   dash definition travels any edge in one cycle whatever its real length. That
   replaces the per-diagram dash tuning the hero and fan pulses each needed, and
   it is what lets short branch edges animate at all: cut for a 230-unit path, a
   dash crosses an 80-unit branch in a third of the cycle and then sits dark.
   The dash is 18 of the path's 100 units rather than 7: at 7 it was a spark too
   brief to register. The offset range must equal the dash period (18+100) or the
   pulse stops short of the far end. Wider and brighter than the static edge it
   runs over, which is 1.8 wide, so the travel reads without the line thickening. */
.hv-pulse{fill:none;stroke:#CFF0FA;stroke-width:3.2;stroke-linecap:round;
          stroke-dasharray:18 100;animation:hvpulse 3.4s linear infinite;
          filter:drop-shadow(0 0 7px rgba(141,220,241,1))}
@keyframes hvpulse{from{stroke-dashoffset:118}to{stroke-dashoffset:0}}
/* The fan's feeder edges are a third the length of everything else, so a share
   of the path that reads on a long edge is a speck on them. They take a bigger
   share instead; the offset range tracks the period as above. */
.hv-pulse-s{stroke-width:2.6;stroke-dasharray:40 100;animation-name:hvpulses}
@keyframes hvpulses{from{stroke-dashoffset:140}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hv-pulse{animation:none;opacity:.45}}

/* QUALIFY FAN-IN
   A range of authoritative sources resolved by one service into one decision.
   Source categories and the output name are the ones pqs.html already
   publishes; the white paper's own source table is not public and is not used
   here. Reuses the hero-vis plates and text on a dark panel. The pulse is
   retuned because these paths are ~110 units, not the ~230 .hv-flow is cut for. */
/* the fan sits at half column width, so its labels need more size in user units
   than the hero diagrams to land at a readable rendered size */
.qfan .hv-t{font-size:13.5px}
.qfan .hv-t-on{font-size:14.5px}
/* The chain pulse runs the full height of the service stack, behind the tiles,
   so it shows in the gaps as it travels. Through a 13% translucent plate it also
   showed across the service names. These plates are opaque at the exact colour
   that fill composited to over the hero ground (#333863), so the look is
   unchanged and the pulse is hidden where it should be. */
.hero-vis .hv-plate-on{fill:#333863}

/* The homepage drawing was cropped from 1000 to 754 user units so its labels
   read on a phone. That crop scales the whole diagram up at every width, and on
   a desktop panel it rendered at 1.30, with 19.5px labels against 16px body
   text. Capping the rendered width puts desktop back to the scale it had before
   the crop; below about 880px the panel is narrower than the cap, so phones and
   tablets keep the full gain. */
.arch-light .archsvg{max-width:940px;margin-left:auto;margin-right:auto}

/* MEDIA INQUIRY FORM
   The only hand-built form on the site: everything else is the injected
   briefing form, whose .field styles belong to HubSpot's markup. Kept to the
   fields a journalist needs, on the site's own tokens. */
.mform{display:grid;gap:15px;max-width:620px;margin-top:26px}
.mform label{display:block;font-size:13.5px;font-weight:600;color:var(--navy)}
.mform input,.mform textarea{display:block;width:100%;margin-top:7px;padding:11px 13px;
  border:1px solid var(--line);border-radius:7px;background:#fff;
  font-family:inherit;font-size:15.5px;color:var(--text)}
.mform input::placeholder{color:var(--sub);opacity:.7}
.mform input:focus,.mform textarea:focus{border-color:var(--teal);
  outline:2px solid var(--teal);outline-offset:1px}
.mform textarea{resize:vertical;min-height:100px;line-height:1.55}
.mform button{justify-self:start;margin-top:3px}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.mrow{grid-template-columns:1fr}}
@media(max-width:640px){.mform{gap:12px;margin-top:20px}
  .mform input,.mform textarea{font-size:15px;padding:10px 12px}}
/* two visuals side by side, each under its own label, so they align at the top
   rather than centring against each other's differing heights */
.demo-split.demo-top{align-items:start}

/* SOLUTION TILES, in the manner of apple.com's product grid.
   Two up on desktop, one on a phone. Each tile is a link: the copy sits at the
   top, the solution's own visual fills the well beneath it, clipped rather than
   scaled so the artwork keeps its real size. */
/* One per row, full page width. At that width the copy sits beside the visual
   rather than above it, so the tile stays a band rather than becoming a tower,
   and the visual keeps the same 240px height it had in the two-up grid. */
.sgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
.stile{position:relative;display:grid;
       grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:0;
       background:#fff;border:1px solid var(--line);border-radius:16px;
       overflow:hidden;text-decoration:none;color:inherit;
       transition:border-color .2s,box-shadow .2s,transform .2s}
/* hover: a lift of 2px, the border taking the brand indigo, the artwork breathing
   1.5%, the arrow moving 5px. Nothing that announces itself. */
.stile{transition:border-color .25s,box-shadow .25s,transform .25s}
.stile:hover{border-color:var(--mid);box-shadow:0 14px 38px rgba(37,31,78,.11);
             transform:translateY(-2px)}
.stile-vis > *{transition:transform .35s cubic-bezier(.3,0,.3,1)}
.stile:hover .stile-vis > *{transform:scale(1.015)}
.stile:hover .stile-mark{border-color:var(--mid);color:var(--deep)}
.stile-head{display:block;align-self:center;padding:44px 38px}
.stile-line{margin-top:8px}
/* on the dark well the head stays on white, so nothing here changes for it */
/* a small mark, not an icon: enough to tell the three apart at a glance without
   competing with the product name under it */
/* the mark sits above the product title */
.stile-mark{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;margin-bottom:13px;
  border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--mid);
  transition:border-color .2s,color .2s}
.stile-mark svg{width:18px;height:18px}
.stile-json .stile-mark{border-color:rgba(83,97,168,.35)}
.stile-name{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:30px;
            line-height:1.15;color:var(--navy)}
.stile-line{display:block;margin-top:10px;font-size:16.5px;color:var(--sub);line-height:1.5}
.stile-more{display:inline-block;margin-top:16px;font-size:15px;font-weight:600;
            color:var(--teal-dk)}
.stile-more span{display:inline-block;transition:transform .25s}
.stile:hover .stile-more span{transform:translateX(5px)}
.stile-who{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px}
.stile-who span{border:1px solid rgba(83,97,168,.3);border-radius:999px;padding:2px 9px;
                font-size:11px;font-weight:600;color:var(--teal-dk);background:#fff}
/* The visual well is one fixed height for all four, so the tiles match and no
   single artwork sets the tile's size. Anything taller is cut at the card edge,
   the way a product photo is. 240 is chosen to fit the fan diagram whole. */
/* The artwork sits inside the well with air around it rather than bleeding off
   the card edge, so the well centres it and keeps padding on every side. */
/* Taller well gives the tiles more presence without touching the artwork —
   the image is capped by max-width below, so the extra height becomes air
   around it rather than a bigger picture. */
/* TINTED WELLS, two-tone
   The first two passes all travelled the same indigo-to-cyan axis and only
   changed direction, so the three cards read as one. These differ by weight as
   well as hue: deep, bright, and pale. That is the only way to get three
   distinguishable wells out of a palette with two cool hues in it.
   Sharper contrast within each too, so the gradient is a gradient rather than a
   wash. The artwork keeps its own shadow, which is what holds it off the
   ground now that the ground has colour in it. */
/* TINTED WELLS
   One hue per well, one axis, no second colour mixed in and no radial blooms.
   The blooms were the tie-dye: an off-axis bright spot in a second hue reads as
   a swirl, and three of them in three different corners read as three swirls.
   All three now run the same gentle diagonal so they hold together as a set, and
   each carries a single hue at a weight that tints the ground without becoming a
   colour field. Light at the top left, where the artwork sits, so the screenshot
   keeps its legibility; the tint gathers in the far corner.
   This is the restrained version on purpose: the sheet is navy, serif and mostly
   white, and a saturated multi-hue gradient fights that. */
/* ATMOSPHERES, one per solution
   Same system, three personalities, which is the point of the section: the three
   products should not be told apart only by their screenshot.
   Payouts sits in white going to pale blue, so the dashboard reads as floating.
   Verification-as-a-Service goes deep navy, because a dark API panel belongs on
   a dark ground and the product is the technical one.
   Onboarding stays light, cyan into white, because it is the customer-facing one
   and should feel lighter than the other two.
   The glow behind each is a radial on the artwork's own side only, so it lights
   the screenshot rather than washing the whole well. */
.stile-shot .stile-vis{background:
  radial-gradient(70% 78% at 74% 50%,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 70%),
  linear-gradient(158deg,#fff 0%,#fff 34%,rgba(53,45,111,.38) 100%)}
.stile-json .stile-vis{background:
  radial-gradient(72% 80% at 74% 50%,rgba(141,220,241,.16) 0%,rgba(141,220,241,0) 72%),
  linear-gradient(158deg,rgba(83,97,168,.30) 0%,rgba(37,31,78,.86) 62%,rgba(37,31,78,.96) 100%)}
.stile-widget .stile-vis{background:
  radial-gradient(70% 78% at 74% 50%,rgba(255,255,255,.94) 0%,rgba(255,255,255,0) 70%),
  linear-gradient(158deg,#fff 0%,#fff 30%,rgba(141,220,241,.62) 100%)}
/* the well meets the card's own corner radius on the outer side */
.stile-vis{border-radius:0 15px 15px 0}
@media(max-width:900px){.stile-vis{border-radius:0}}
/* 42/58, and the artwork reaches for the outer edge instead of sitting in the
   middle of its own margin: right padding 34 to 0, so the screenshot runs to the
   card boundary and reads as the card's subject rather than a picture placed in
   it. */
.stile-vis{display:flex;align-items:center;justify-content:flex-end;position:relative;
           overflow:hidden;padding:30px 0 30px 0;height:372px}
/* The well's height is fixed but its width is not, so on a wide single-column
   tile the artwork grew tall enough to be mostly cut. Capping the artwork width
   keeps every piece inside the well at any tile width. */
/* capped so the tallest artwork clears the well's 252px of inner height */
.stile-vis > *{max-width:508px;width:100%;margin-left:auto;margin-right:0}
/* Verified Payouts anchors its screenshot to the bottom right and runs 20% larger
   than the other two. At 475px the shot stands ~349px against 342px of usable
   well, so a few pixels of its top edge crop: deliberate, it reads as the
   dashboard continuing up out of frame. */
.stile-shot .stile-vis{align-items:flex-end;padding-top:0;padding-bottom:0}
/* the chrome was 51px against a 264px screenshot, a sixth of the artwork, for
   the sake of one line of url. It comes down to match the picture it frames. */
.stile-vis .browser{padding:6px 9px;gap:5px}
.stile-vis .browser .dot{width:7px;height:7px}
.stile-vis .browser .url{font-size:9.5px;padding:2px 8px;margin-left:6px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stile-vis .shotwrap{box-shadow:0 6px 26px rgba(37,31,78,.14);border-radius:9px}
/* the payment-detail shot is 1.49, taller than any other tile's artwork at the
   same width, and the well's height is fixed, so it caps narrower. Each band
   needs its own cap: this selector outranks the plain .stile-vis > * inside the
   media blocks, since media queries add no specificity. */
.stile-shot .stile-vis > *{max-width:475px}
.stile-vis .jsonwrap{border-radius:9px;max-height:252px;overflow:hidden}
/* the response was the tallest artwork by far, 445 against the screenshot's 303.
   Smaller type fits more of the structure into the shorter well, and the rest
   runs past the cut, which is what a response body does anyway. */
.stile-vis .jsonbody{font-size:10.5px;line-height:1.5;padding:12px 14px 0}
.stile-vis .arch{padding:6px 8px;max-width:466px}
/* the widget is scaled rather than cut: its footer carries the under 60s line,
   which a clip would remove */
.stile-vis .pflow{max-width:none;transform:scale(.72);transform-origin:center right}
.stile-widget .stile-vis{padding:0 34px 0}
@media(max-width:900px){
  /* not enough width for side by side, so the copy goes back on top */
  .sgrid{gap:16px}
  .stile{grid-template-columns:1fr}
  .stile-head{align-self:start}
  /* stacked and full width here, so the well can be taller than the two-up
     one; sized to clear the fan, which is the tallest artwork of the four */
  .stile-vis{padding:18px 24px;height:280px}
  /* scoped, because the desktop .stile-shot cap outranks the plain
     .stile-vis > * rule below and leaked into this band, overflowing 55px */
  .stile-shot .stile-vis > *{max-width:372px}
  .stile-vis .arch{max-width:430px}
  .stile-vis .jsonwrap{max-height:244px}
  .stile-head{padding:26px 24px 18px}
  .stile-name{font-size:25px}
  .stile-vis > *{max-width:336px}
  /* the well is shorter here, so the widget scales further to keep its footer */
  .stile-vis .pflow{transform:scale(.47)}
}
@media(max-width:640px){
  .sgrid{margin-top:22px}
  /* the enrollment rail carries five uppercase labels and will not fit the
     narrower tile at its normal size, so it steps down inside one */
  .stile-vis .pf-rail{gap:3px;padding:12px 14px 0}
  .stile-vis .pf-rail li{font-size:8.5px;letter-spacing:0}
  /* the chrome's url is a fixed string and cannot wrap, so inside a tile it
     truncates rather than pushing the bar wider than the card */
  .stile-vis .browser{padding:9px 11px;gap:6px}
  .stile-vis .browser .url{font-size:10px;padding:4px 9px;margin-left:7px;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:640px){
  /* The visual stays on a phone. The well is sized so the artwork reads at a
     phone's width and the whole tile still clears the screen: a tile lands
     around 360px against roughly 750 of usable height. */
  .stile-vis{height:250px;padding:16px 18px}
  .sgrid{gap:9px;margin-top:16px}
  .stile{min-height:0}
  .stile-head{padding:14px 16px 15px}
  .stile-name{font-size:19px}
  .stile-line{margin-top:5px;font-size:14px;line-height:1.42}
  /* the whole tile is the link, so the Learn more line is a repeat of itself
     here and costs a row per tile that the section cannot spare */
  .stile-more{display:none}
  .stile-who{margin-top:9px;gap:4px}
  .stile-who span{font-size:10.5px;padding:2px 8px}
  #explore{padding:30px 0}
  /* capped so the artwork clears the well at the top of this range too: a
     640px tile is wide enough to make a full-width screenshot 348px tall */
  .stile-vis > *{max-width:336px}
  /* the transaction-detail shot is 1.60 not 1.78, so at 336 it stood 251px in a
     250px slot and lost a hairline off the bottom */
  .stile-shot .stile-vis > *{max-width:307px}
  .stile-vis .arch{max-width:336px}
  .stile-vis .pflow{transform:scale(.6)}
  .stile-vis .jsonwrap{max-height:218px}
}