/* ============================================================================
 * marketing-pillar.css — Shared by the three product-pillar pages.
 *
 * This block previously existed as a BYTE-IDENTICAL inline <style> in each of the pages
 * listed below (3 copies, 11360 bytes each). Any visual change therefore had to be made
 * that many times, and the copies had already begun to drift elsewhere on the site.
 * Extracted once; the pages now link it. Behaviour is unchanged — same rules, same order,
 * same cascade position (it is linked where the <style> stood).
 *
 * Used by: business-suite.html, point-of-sale.html, processing.html
 * ==========================================================================*/
/* Standalone marketing page — it does not load payco.css, so the sliver tokens are
   restated here. Keep in step with the ":root" and "the sliver" blocks in payco.css. */
@property --sliver-h{syntax:'<length>';inherits:false;initial-value:3px}
:root{--sliver:linear-gradient(90deg,#0b2a8a,#1a4dd6,#3b82ff,#6dd5fa);
  --sliver-h:3px;--sliver-h-hover:4px;--sliver-ease:.18s cubic-bezier(.4,0,.2,1);
  /* --gradient-text was USED by `h1 em` and defined NOWHERE. Paired with color:transparent
     and background-clip:text that is not a fallback, it is an erasure: background reverted to
     its initial `transparent`, so the emphasised phrase in every marketing hero headline
     rendered fully invisible. Measured before the fix: color rgba(0,0,0,0), background-image
     none, on all six pages checked — "your statement" gone from pricing's H1, "One honest
     number" from processing's, and so on. Same 4-stop brand gradient as payco.css --gradient. */
  --gradient-text:linear-gradient(135deg,#0b2a8a 0%,#1a4dd6 45%,#2a63d8 100%)}

*{box-sizing:border-box}html{scroll-behavior:smooth;background:#f5f7fb}
body{margin:0;font-family:Inter,-apple-system,sans-serif;color:#0a1628;background:#f5f7fb;font-size:15px;line-height:1.6}
/* The header lived here — .mnav, .mnav-burger, .drop/.dropm and their phone
   breakpoints — as a near-copy of the same block in marketing-pillar.css and in three
   pages' inline <style>. The copies had drifted (this one centred the link row with
   position:absolute, the inline ones centred it in flow), which is why the bar collided
   with the logo on some pages and not others. It now lives once, in payco-marketing.css,
   which every marketing page links last. Do not restate it here. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:13.5px;border-radius:999px;padding:11px 20px;text-decoration:none;transition:transform .18s,box-shadow .2s,background .22s,color .2s;cursor:pointer;border:1px solid transparent}
.btn-g{background:linear-gradient(135deg,#0b2a8a,#1a4dd6 35%,#3b82ff 70%,#6dd5fa);color:#fff;border-color:#2255d4}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(26,77,214,.35)}
.btn-w{background:#fff;color:#0a1628;border-color:#dce3f0;box-shadow:0 3px 12px rgba(11,27,58,.08)}
.btn-w:hover{background:linear-gradient(135deg,#0b2a8a,#1a4dd6 35%,#3b82ff 70%,#6dd5fa);color:#fff;border-color:#2255d4;transform:translateY(-2px)}
.hero{text-align:center;padding:clamp(54px,9vh,110px) 24px 40px;max-width:900px;margin:0 auto}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#1a4dd6;margin-bottom:14px}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.05;letter-spacing:-.04em;font-weight:700;margin:0 0 18px;color:#0a1628}h1 em{font-style:normal;background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(15.5px,1.6vw,18px);color:#42506e;max-width:640px;margin:0 auto 26px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px 80px}
section.blk{margin:56px 0}
h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;margin:0 0 10px}
.rail{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0b2a8a;margin:0 0 20px}
.rail::after{content:"";height:1px;background:#dce3f0;flex:1}
/* minmax mins are wrapped in min(...,100%): a bare `minmax(320px,1fr)` resolves to a 320px
   TRACK even when the container is narrower, and at a 320px viewport this container is 272px —
   so 48px of every card sat outside it. `html,body{overflow-x:clip}` means that is not a
   sideways scroll the reader can recover, it is content silently cut off. */
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.card{background:var(--sliver) top center/100% var(--sliver-h) no-repeat,#fff;background-origin:border-box;border:1px solid #dce3f0;border-radius:18px;padding:24px;box-shadow:0 1px 2px rgba(11,27,58,.04),0 12px 34px rgba(11,27,58,.06)}
.card{transition:background-size var(--sliver-ease)}
.card:hover{--sliver-h:var(--sliver-h-hover)}
.card h3{margin:0 0 8px;font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.card p{margin:0 0 8px;font-size:14px;color:#42506e}
.card p:last-child{margin-bottom:0}
.card .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#e8efff;color:#0b2a8a;border-radius:99px;padding:3px 10px;margin-bottom:10px}
.card ul{margin:8px 0 0;padding-left:18px;font-size:13.5px;color:#42506e}
.card ul li{margin-bottom:5px}
.stats{display:flex;gap:0;background:#f7f9fd;border:1px solid #dce3f0;border-radius:16px;overflow:hidden;margin:34px 0;flex-wrap:wrap}
.stats div{flex:1;min-width:130px;text-align:center;padding:22px 12px}
.stats div+div{border-left:1px solid #dce3f0}
.stats b{display:block;font-size:30px;font-weight:900;color:#1a4dd6}
/* A stat whose VALUE is words, not a number. 30px/900 is sized for "2,000+" and wraps a name
   like "Elavon" onto three lines inside a 130px tile. Used where a countable claim was pulled
   for want of a source and the honest replacement is a relationship we can actually name. */
.stats b.txt{font-size:17px;line-height:1.25;letter-spacing:-.01em;padding:4px 0}
.stats span{font-size:12px;font-weight:600;color:#5a6885}
.tw{overflow-x:auto;border-radius:16px}
table.cmp{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid #dce3f0;border-radius:16px;overflow:hidden}
.cmp th{background:#0a1628;color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:13px 16px;text-align:left}
.cmp td{padding:12px 16px;border-top:1px solid #eef1f6;vertical-align:top}
.cmp td:first-child{font-weight:700;width:170px;color:#0b2a8a}
.cmp td.bad{color:#5a6885}  /* literal, NOT var(--ink-mute): no marketing page loads
   payco.css and neither shared sheet defines that token, so the var was invalid at
   computed-value time and `color` fell back to inherited ink — td.bad rendered identical
   to td.good (measured rgb(10,22,40) on both) and the comparison tables lost the whole
   good/bad distinction. #5a6885 is what --ink-mute resolves to: 5.59:1 on white, so it
   keeps the AA fix that replaced the original #8a93a6 (3.09:1, failed AA). */
.cmp td.good{font-weight:600}
.faq{background:#fff;border:1px solid #dce3f0;border-radius:16px;overflow:hidden}
.faq details{border-top:1px solid #eef1f6}.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:700;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#1a4dd6;font-weight:800;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0;padding:0 20px 18px;font-size:13.5px;color:#42506e}
.crumb{max-width:1120px;margin:0 auto;padding:14px 24px 0;font-size:12.5px;color:#5a6885}
.crumb a{color:#1a4dd6;text-decoration:none;font-weight:600}
.cta-band{text-align:center;background:linear-gradient(135deg,#0a1628,#12305e 55%,#123a6e);border-radius:22px;color:#fff;padding:46px 26px;margin-top:70px}
.cta-band h2{font-size:clamp(24px,3.4vw,34px);margin:0 0 10px;letter-spacing:-.8px}
.cta-band p{color:#c7d4ee;margin:0 0 22px;font-size:14.5px}
.disc{font-size:12px;color:#5a6885;line-height:1.65;margin-top:26px;border-top:1px solid #dce3f0;padding-top:18px}
footer{border-top:1px solid #dce3f0;padding:30px 24px;text-align:center;font-size:12.5px;color:#5a6885}
footer a{display:inline-block;padding:6px 10px;white-space:nowrap}
@media(max-width:560px){footer{padding:24px 16px}footer a{padding:8px 12px;font-size:14px}}
footer a{color:#1a4dd6;text-decoration:none;margin:0 9px;font-weight:600}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}


/* mobile-native guard (cross-compat pass). TWO DECLARATIONS, BOTH LOAD-BEARING, in this order.
   `hidden` makes html and body SCROLL CONTAINERS, and that is what position:sticky measures
   against, so every sticky element on the page silently stops sticking; `clip` prevents the
   identical horizontal scrolling WITHOUT establishing one. The `hidden` line is NOT that bug
   coming back — a browser too old for `clip` (Safari <=15 / iOS 15) discards that declaration
   as invalid and would otherwise be left with NO guard at all, which is the worse failure of
   the two. Anything that understands `clip` takes the second line and overrides the first.
   Delete neither, and do not reorder them. This page does not load payco.css and so cannot
   inherit the fix on that file's own global guard — keep the two in step. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
img,svg,table{max-width:100%}
@media(max-width:560px){
  body{font-size:15.5px;-webkit-text-size-adjust:100%}
  input,select,textarea,button{font-size:16px}
  h1{line-height:1.12}
  .btn,button,a.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- skip link ----------
   The markup <a class="pc-skip" href="#pc-content"> was added to these pages, but .pc-skip is
   styled in payco.css and NO marketing page loads payco.css. So the link fell back to a plain
   static inline anchor: "Skip to content" rendered as the first visible words on the page, and
   its ~25px of flow pushed the sticky .mnav down to y=25 — which reads as the nav failing to
   stick (tests/seoui.mjs "nav STAYS through a real scroll", 15 assertions). Literal hexes, not
   var(), for the same reason the rest of this file uses them: no payco.css means no tokens. */
.pc-skip{position:absolute;left:12px;top:-60px;z-index:60;background:#fff;color:#0b2a8a;
  font:inherit;font-size:13px;font-weight:700;padding:12px 16px;border-radius:0 0 10px 10px;
  border:1px solid #dce3f0;border-top:0;box-shadow:0 4px 24px rgba(11,42,138,.08);
  text-decoration:none;transition:top .16s cubic-bezier(0,0,.2,1);min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
.pc-skip:focus{top:0}
@media(prefers-reduced-motion:reduce){.pc-skip{transition:none}}

/* Measure. These paragraphs ran the full content column: measured with a canvas text metric,
   170-196 characters per line at 11.8px, against the 45-85ch that is comfortable and the ~90ch
   where readability starts to fall off. The eye loses its place on the return sweep long before
   that. Capped in ch so it tracks the font size rather than fixing a pixel width that stops
   being right the moment the type changes. Auto side margins on .cta-band p because that band
   is text-align:center — a bare max-width would pin a 149ch line to the left of a centred panel.
   Grafted from claude/design-surgical, which found these on the per-page inline styles this
   shared sheet has since replaced. */
.cta-band p{margin-left:auto;margin-right:auto;max-width:65ch}
.disc{max-width:65ch}
.card p{max-width:65ch}
.note p{max-width:65ch}

/* .g4w — W4-LANE-22 §6.2, applied at the W4 closeout.
   marketing-core.css:73 carries this rule; this sheet did not, so processing.html and
   point-of-sale.html each grew an identical local copy of it. Adding it here makes both of those
   local copies inert rather than wrong — the same declaration in the same cascade position, so
   nothing renders differently today and the next page that needs it does not grow a third copy.
   DELIBERATELY NOT a unification of .g2/.g3: those names are load-bearing elsewhere and their
   auto-fit behaviour is correct for grids that are not exactly four. */
.g4w{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.g4w{grid-template-columns:1fr}}