:root{
  --ink:#0a0e17; --mut:#697386; --mut2:#8792a2;
  --brand:#635bff; --brand-2:#4b3df2; --brand-soft:#efeeff;
  --line:#e6e6ef; --bg:#ffffff; --soft:#f6f5fb;
  --f:"Inter",system-ui,"Segoe UI","PingFang SC","Microsoft Yahei",sans-serif;
  --maxw:860px; --hh:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--f);color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.hdr{border-bottom:1px solid var(--line)}
.hdr .row{display:flex;align-items:center;gap:.8rem;height:var(--hh)}
.brand{display:flex;align-items:center;gap:.5rem;font:800 1.2rem/1 var(--f);color:var(--ink)}
.brand img{width:24px;height:24px;border-radius:6px;display:block}
.back{margin-left:auto;font:600 .9rem/1 var(--f);color:var(--mut);padding:.5rem .8rem;border-radius:8px;transition:background .15s}
.back:hover{background:var(--soft);color:var(--ink)}
main{padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,5rem)}
.eyebrow{font:600 .85rem/1 var(--f);color:var(--brand);display:inline-block}
/* the underline used to be a separate .accent-bar div with a hardcoded 40px width, so on any
   eyebrow longer than "EMV" (e.g. "Financial institution solutions") the bar read as way
   shorter than the text above it. Moving the bar onto the eyebrow itself as a border-bottom —
   only when a following .accent-bar exists, via :has() — makes it size to the eyebrow's own
   (now shrink-wrapped) text width automatically, on every page, without touching each page's
   markup. The old div is neutralized below rather than removed from 57 HTML files. */
.eyebrow:has(+ .accent-bar){padding-bottom:.5rem;border-bottom:4px solid var(--accent,var(--brand))}
h1{font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.02em;margin-top:.6rem;max-width:26ch}
.lead{color:var(--mut);margin-top:1rem;max-width:62ch;font-size:1.05rem}
.section{margin-top:clamp(2.2rem,5vw,3rem)}
.section h2{font-size:clamp(1.2rem,2.4vw,1.5rem)}
.section p{color:var(--mut);margin-top:.7rem;max-width:64ch;line-height:1.65}
.list{margin-top:1.4rem;display:flex;flex-direction:column;gap:.9rem}
.list li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink);font-size:.96rem;line-height:1.55}
.list li::before{content:"✓";color:var(--brand);font-weight:800;flex:none}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:1.6rem}
.card{background:var(--soft);border-radius:14px;padding:1.4rem 1.5rem;display:block;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(10,14,23,.35)}
.card h3{font-size:1.02rem}
.card p{color:var(--mut);margin-top:.5rem;font-size:.88rem;line-height:1.6}
@media(max-width:640px){ .cards{grid-template-columns:1fr} }
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:2.2rem}
.stats .s{padding:1.4rem 1rem;border-right:1px solid var(--line);text-align:center}
.stats .s:last-child{border-right:0}
.stats .s b{display:block;font:800 clamp(1.2rem,2.4vw,1.6rem)/1 var(--f)}
.stats .s span{display:block;color:var(--mut);font-size:.78rem;margin-top:.4rem}
@media(max-width:640px){ .stats{grid-template-columns:repeat(2,1fr)} .stats .s:nth-child(2){border-right:0} }
.note{margin-top:1.4rem;background:var(--soft);border-radius:12px;padding:1rem 1.2rem;color:var(--mut);font-size:.85rem;line-height:1.65}
.note b{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.tags span{background:var(--soft);border-radius:999px;padding:.5rem 1rem;font:600 .85rem/1 var(--f);color:var(--ink)}
/* fact/spec table — ref: tech-specs.html's .spec-row, reused here so per-scheme or
   per-hardware pages can read like a real spec sheet instead of another bullet list */
.spec-table{margin-top:1.6rem;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.spec-row{display:grid;grid-template-columns:160px 1fr;gap:1.2rem;padding:.9rem 1.2rem;font-size:.9rem}
.spec-row:nth-child(even){background:var(--soft)}
.spec-row span:first-child{color:var(--mut);font-weight:600}
.spec-row span:last-child{color:var(--ink)}
@media(max-width:600px){ .spec-row{grid-template-columns:1fr;gap:.2rem;padding:.8rem 1rem} .spec-row span:first-child{font-size:.78rem} }
/* numbered step timeline — for process/flow pages (e.g. "accept a payment in 3 steps") */
.steps{margin-top:1.6rem;display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:1rem;padding-block:1rem;border-top:1px solid var(--line)}
.step:last-child{padding-bottom:0}
.step .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font:800 .85rem/1 var(--f);display:flex;align-items:center;justify-content:center}
.step .t{padding-top:.15rem}
.step .t b{display:block;font-size:.96rem;color:var(--ink)}
.step .t span{display:block;color:var(--mut);font-size:.86rem;margin-top:.25rem}
/* 3-up comparison strip — for tiered offerings (delivery models, package tiers) */
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.compare .c{border:1px solid var(--line);border-radius:14px;padding:1.3rem}
.compare .c.hi{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.compare .c em{display:block;font-style:normal;font:700 .68rem/1 var(--f);color:var(--brand);letter-spacing:.03em;text-transform:uppercase;margin-bottom:.6rem}
.compare .c b{display:block;font-size:1rem;color:var(--ink)}
.compare .c .d{color:var(--mut);font-size:.82rem;margin-top:.6rem;line-height:1.5}
@media(max-width:760px){ .compare{grid-template-columns:1fr} }
/* was a separate fixed-40px-wide bar under the eyebrow — replaced by the .eyebrow:has(+
   .accent-bar) border-bottom above (sized to the eyebrow's own text, so it no longer reads as
   too short under a long eyebrow like "Financial institution solutions", and the earlier
   crooked-hairline artifact goes away with it). The div is kept in the markup on 57 pages so
   :has() still matches, but it renders nothing itself now. */
.accent-bar{display:none}
/* gradient ribbon — ref: stripe.com's own /pricing, /capital etc. hero background (see
   other.html for the real markup: a WebGL canvas skewed via CSS). skewY's shift scales with
   the element's own width, so on a short band this clips into a full triangle wedge rather
   than a parallel diagonal band — that read well, so it's now the deliberate shape: a clip-
   path triangle (precise at any viewport width, unlike a fixed skew angle) with the solid
   corner on the left tapering to a point that lands exactly on the right edge. The fill is a
   real hand-rolled canvas animation (ribbon.js — drifting soft-edged color blobs, additive-
   blended, tuned toward pink/orange instead of white so overlap areas read as color rather
   than fading into the page background) rather than a flat CSS gradient, closer in spirit to
   the real page's animated canvas texture (no WebGL, matching how the rest of this site's
   motion — globe, sunburst, particle field — is hand-rolled canvas 2D rather than a third-
   party library). Sits in its own full-bleed band between the hero and the first section
   (not behind any text), and reads its color straight off --accent (ribbon.js) so each
   page's ribbon is already coordinated with that page's own accent-bar/scheme color with
   zero extra styling. */
.ribbon-band{position:relative;overflow:hidden;height:clamp(110px,16vw,170px);
  margin-block:clamp(1.6rem,4vw,2.4rem);margin-inline:calc(50% - 50vw)}
.ribbon-band canvas.ribbon{position:absolute;inset:0;width:100%;height:100%;display:block;
  clip-path:polygon(0 0, 0 100%, 100% 100%);
  filter:blur(1.5px) saturate(1.1)}
.cta-band{margin-top:clamp(3rem,6vw,4rem);background:var(--ink);border-radius:18px;padding:clamp(2rem,4vw,2.6rem);color:#fff;text-align:center}
.cta-band h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.cta-band p{color:#9aa3b5;margin-top:.7rem}
.cta-band .btn{display:inline-block;margin-top:1.3rem;background:var(--brand);color:#fff;font-weight:700;padding:.8rem 1.5rem;border-radius:10px;transition:background .15s}
.cta-band .btn:hover{background:var(--brand-2)}
footer{border-top:1px solid var(--line);padding-block:1.6rem;color:var(--mut);font-size:.84rem}