/* ============================================================================
 * marketing-core.css — Shared by the five core marketing pages.
 *
 * This block previously existed as a BYTE-IDENTICAL inline <style> in each of the pages
 * listed below (5 copies, 10231 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: company.html, partners.html, pricing.html, products.html, services.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}
.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))}
/* g4 is EXPLICIT counts, not auto-fit, because it exists for sets of exactly four. .wrap is
   1120px less 48px of padding = 1072px of content, and four auto-fit tracks at the g3 minimum
   need 4x260 + 3x16 = 1088 — so a four-card row under .g3 lays out 3 + 1 and leaves a lone card
   on a second line at every desktop width. The breakpoints are index.html's `.partner-grid`
   numbers (900, 500) so the four partner doors step 4 -> 2 -> 1 at the same widths on the
   homepage and on partners.html; 2-up rather than 3-up in the middle band for the same reason,
   an odd row can't orphan a card. Give it exactly four children — a fifth starts a row of one,
   which is the failure this class exists to prevent. Currently ONE caller: pricing.html:197.
   Two other pages were checked and are deliberately NOT it — partners.html carries its own
   `.pt-4up` inline (same 4/2 steps at the same 900px), and programs.html has its own auto-fit
   `.g4` and does NOT link this sheet, so the two never meet; do not "unify" either without
   checking that, or those pages' grids change shape. */
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.g4{grid-template-columns:1fr}}
/* .g4w — the same "exactly four" problem, for cards that carry PROSE rather than a label. .g4 is
   right for the four partner doors, which are a heading and a line; run a paragraph and a bullet
   list through it and four 256px tracks give you ~28 characters a line and a 497px-tall card
   (measured on products.html's four acceptance methods). Two-up holds ~48 characters, which is
   inside the 45-85ch this sheet already caps .card p at. It steps 2 -> 1 at 700 rather than .g4's
   500 for the same reason the track count differs: a prose card needs roughly 300px to read, a
   label tile does not. Reach for .g4 when the card is a tile and .g4w when it is a paragraph. */
.g4w{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.g4w{grid-template-columns: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;font-size:14px;color:#42506e}
.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}
/* flex-wrap + min-width are kept in step with marketing-pillar.css, which has carried both since
   the pillar pages shipped. This file was extracted from the OLDER per-page copy and never got
   them, so a four-up stat band on products.html/company.html squeezed each cell to ~68px at a
   320px viewport: `overflow:hidden` on the container meant that was silently clipped type rather
   than a scrollbar. Wrapping to two rows is what the pillar pages already do. */
.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 — kept in step with marketing-pillar.css. */
.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}
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:180px;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}
.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}
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}

/* ---------- breadcrumb + FAQ ----------
   Both are lifted VERBATIM from marketing-pillar.css rather than re-invented. The five pillar
   pages each render a `.crumb` trail and a `.faq` accordion; services.html is the page those
   pillars name as position 2 in their BreadcrumbList and it had neither rule available to it,
   because it links this sheet and not that one. Two sheets styling the same component
   differently is how the drift that produced the .stats fix above starts. */
.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}
.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}

/* ---------- table scroller + in-card lists ----------
   The same graft as the block above, from the same file, for the same reason. `.tw` is
   marketing-pillar.css:70 and `.card ul` is :59-60; neither existed here, so the two pages on
   THIS sheet that needed them worked around it: pricing.html carries
   `class="tw" style="overflow-x:auto;border-radius:16px"` — the rule inlined next to the class
   that should have carried it — and products.html had no comparison table or in-card list at all,
   partly because there was nothing to style one with. Verbatim from the pillar sheet so the two
   cannot disagree. Additive: no page on this sheet has a `<ul>` inside a card today, and
   pricing.html's inline copy is byte-identical to the rule it now duplicates. */
.tw{overflow-x:auto;border-radius:16px}
.card ul{margin:8px 0 0;padding-left:18px;font-size:13.5px;color:#42506e}
.card ul li{margin-bottom:5px}
/* A .card that is `display:flex;flex-direction:column` — which is how products.html and
   pricing.html pin a card's closing link to its foot so the arrows line up across a row — turns
   its children into flex items, and the default `align-items:stretch` then blows the tag pill out
   to the full width of the card. Measured: "LEAD PRODUCT" rendered as a 272px bar rather than a
   pill. align-self is inert on a child of a non-flex card, so this is a no-op for every card that
   is still display:block and cannot affect company.html, partners.html or services.html. */
.card .tag{align-self:flex-start}

/* ---------- the button row under a section (services.html) ----------
   A wrapping row of .btn links that closes a section. It is all that remains of a larger strip
   that used to live here; the rest of the .svc-* rules went with the markup they styled, so do
   not re-add selectors here without markup on a page that needs them. */
.svc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}