/* Self-hosted Schibsted Grotesk (variable, 400–700) — no third-party font CDN */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/schibsted-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
:root{
  --ink:#252525; --muted:#646A76; --line:#E7E8EC; --line-2:#D3D7DE;
  --red:#D92627; --white:#FFFFFF; --tint:#F4F6F9; --green:#34B27B;
  /* Vertical rhythm. --section-y and --hero-y are redefined at the 840px
     breakpoint, so anything built on them gets the mobile step for free. */
  --section-y:96px; --hero-y:120px; --head-gap:44px; --block-gap:40px; --card-pad:30px 32px;
  /* Radii: pill for controls, card for shells, tile for icon squares,
     tag for flat non-interactive labels. */
  --r-pill:999px; --r-card:16px; --r-tile:14px; --r-tag:8px;
  /* Elevation. Every shadow is tinted with --ink, never black. */
  --shadow-card:0 1px 2px rgba(37,37,37,.04),0 12px 30px -20px rgba(37,37,37,.16);
  --shadow-lift:0 3px 8px rgba(37,37,37,.06),0 26px 52px -26px rgba(37,37,37,.26);
  --shadow-tile:0 6px 16px -6px rgba(37,37,37,.28);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#fff;color:var(--ink);font-family:'Schibsted Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:inherit;text-decoration:none;}
a,button{touch-action:manipulation;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);}
.lead{color:var(--muted);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.svg-sprite{position:absolute;}
.copy-fallback{position:fixed;left:-9999px;top:0;opacity:0;}
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:11px 18px;border-radius:10px;box-shadow:0 8px 24px -8px rgba(37,37,37,.5);transition:top .18s ease;}
.skip-link:focus{top:14px;}
main:focus{outline:none;}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:14px 28px;border-radius:var(--r-pill);background:var(--red);color:#fff;border:1px solid var(--red);transition:background .2s ease,transform .1s ease;}
.btn:hover{background:#B71F20;}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:14px 28px;border-radius:var(--r-pill);background:#fff;color:var(--ink);border:1px solid var(--line);transition:border-color .2s ease,transform .1s ease;}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost .arrow{color:var(--red);transition:transform .2s ease;}
.btn-ghost:hover .arrow{transform:translateX(3px);}
/* press feedback on the shared CTAs, matching the contact buttons (neutralized under reduced-motion) */
.btn:active,.btn-ghost:active{transform:scale(.97);}
/* red buttons need an ink focus ring — a red ring would vanish against the red fill */
.btn:focus-visible,.nav .links a.cta:focus-visible,
.contact .card .mail-open:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
section{padding:var(--section-y) 0;scroll-margin-top:80px;}
.section-head{max-width:640px;}
.section-head h1,.section-head h2,.erp-cta h2{font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:18px 0 0;}
.section-head .lead{font-size:19px;margin-top:18px;line-height:1.6;}
.section-head .page-date{font-size:13.5px;font-weight:600;color:var(--muted);margin-top:18px;}
/* natural, responsive line breaks */
h1,h2{text-wrap:balance;}
.sub,.lead{text-wrap:pretty;}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:68px;}
.nav .logo{height:17px;width:auto;display:block;}
/* expand the home-link hit area to 44px without changing the 17px mark (WCAG 2.5.8) */
.nav .brand{display:inline-flex;align-items:center;min-height:44px;}
.nav .links{display:flex;gap:30px;align-items:center;}
.nav .links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;color:var(--muted);}
.nav .links a:hover{color:var(--ink);}
.nav .links a.active{color:var(--ink);font-weight:600;}
.nav .cta{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);padding:0 18px;transition:border-color .2s ease;}
.nav .cta:hover{border-color:var(--ink);}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:var(--ink);cursor:pointer;padding:0;margin-right:-8px;}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:var(--hero-y) 0;background:radial-gradient(ellipse 52% 86% at 90% 48%,#EBF0F6 0%,var(--white) 68%);}
.hero .art{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(58% 150% at 100% 100%,#000 0,#000 16%,transparent 90%);
  mask-image:radial-gradient(58% 150% at 100% 100%,#000 0,#000 16%,transparent 90%);opacity:.95;}
.hero .art svg{width:100%;height:100%;display:block;}
.hero .inner{position:relative;z-index:2;max-width:900px;}
.hero .eyebrow{margin:0 0 16px;}
.hero h1{font-size:clamp(44px,5.6vw,72px);font-weight:600;line-height:1.06;letter-spacing:-.027em;margin:0 0 32px;}
.hero h1 .accent{background:linear-gradient(transparent 78%,rgba(217,38,39,.16) 0);padding:0 .02em;}
.hero .sub{font-size:21px;color:var(--muted);max-width:900px;margin:0 0 40px;line-height:1.55;text-wrap:balance;}
.hero .sub b{color:var(--ink);font-weight:600;}
.hero .cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}

/* ---------- HOW WE WORK ---------- */
.how{border-top:1px solid var(--line);}
/* widened so the explanatory lead stays on one line at the 19px section-lead size */
.how .section-head{max-width:760px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:var(--head-gap);position:relative;}
.steps::before{content:"";position:absolute;top:29px;left:2.8%;right:20%;height:1px;background:var(--line);z-index:0;}
.steps::after{content:"";position:absolute;top:28px;left:2.8%;right:20%;height:2px;z-index:0;background-image:linear-gradient(90deg,transparent 0%,transparent 40%,var(--red) 50%,transparent 60%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;background-position:130% 0;}
.js .steps::after{animation:walk 2.4s linear infinite;animation-play-state:paused;}
.js .steps.in-view::after{animation-play-state:running;}
@keyframes walk{0%{background-position:130% 0;}100%{background-position:-30% 0;}}
.step{text-align:left;position:relative;z-index:1;}
.step .node{width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;margin:0 0 26px;}
.step h3{font-size:22px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em;}
.step p{color:var(--muted);font-size:15px;line-height:1.6;max-width:320px;margin:0;text-wrap:balance;}

/* ---------- PRODUCTS ---------- */
.products{background:var(--tint);border-top:1px solid var(--line);}
/* auto-scaling grid: 2 products now, 3+ later with no change */
.products .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:var(--head-gap);}
.card{border:1px solid var(--line-2);border-radius:var(--r-card);overflow:hidden;background:#fff;box-shadow:var(--shadow-card);transition:border-color .2s ease,box-shadow .2s ease,transform .25s ease;display:flex;flex-direction:column;scroll-margin-top:88px;}
.products .card:hover{border-color:#CFD2D9;box-shadow:var(--shadow-lift);transform:translateY(-3px);}
/* deepest tone: the product-illustration "screen", intentionally one tier darker than the #252525 brand ink — keep distinct, don't fold into --ink */
.card .viz{background:#17181C;aspect-ratio:16/11;}
.card .viz svg{display:block;width:100%;height:100%;}
.card .viz text{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';}
.card .body{padding:32px 32px 40px;display:flex;flex-direction:column;flex:1;}
.card h3{font-size:24px;font-weight:600;margin:0 0 6px;letter-spacing:-.015em;color:var(--ink);}
.card .tagline{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:14px;}
.card p{color:var(--muted);font-size:15px;line-height:1.65;margin-bottom:20px;}
.card .detail-link{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;margin:-8px 0 18px;color:var(--red);font-size:14px;font-weight:600;line-height:1.35;transition:color .2s ease;}
.card .detail-link:hover{color:var(--ink);}
.card .who{border-left:3px solid var(--red);padding-left:12px;margin-bottom:0;margin-top:auto;}
.card .who .k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.card .who .v{font-size:14.5px;font-weight:600;color:var(--ink);}

/* ---------- PRODUCT VIZ ANIMATIONS (INV1 Converge + FIN1 Flow) ---------- */
#inv1{display:block}
#inv1 .ring-glow{opacity:.9;filter:drop-shadow(0 0 5px rgba(217,38,39,.6)) drop-shadow(0 0 13px rgba(217,38,39,.42))}
#inv1 .conv{opacity:0}
@media (prefers-reduced-motion: no-preference){
#inv1 .conv{
  stroke:var(--red);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:14 86;
  opacity:.9;
  animation:inv1-flow 3.2s linear infinite;
}
/* one red dash per spoke flowing inward — period equals the line, seamless loop, no empty gap */
@keyframes inv1-flow{
  to {stroke-dashoffset:-100;}
}
}
#fin1 .f-dot,#fin1 .f-dot-merge{opacity:0}
#fin1 .f-posted-pop{transform-box:fill-box;transform-origin:center;transform:scale(1)}
#fin1 .f-erp{filter:drop-shadow(0 0 5px rgba(52,178,123,.5)) drop-shadow(0 0 13px rgba(52,178,123,.35))}
@media (prefers-reduced-motion: no-preference){
#fin1 .f-dot{animation:fin1-dotfade 4.4s ease-in-out infinite}
#fin1 .f-dot-merge{animation:fin1-mergefade 4.4s ease-in-out infinite}
#fin1 .f-posted-pop{animation:fin1-pop 4.4s ease-in-out infinite}
@keyframes fin1-dotfade{0%{opacity:0}4%{opacity:1}44%{opacity:1}47%{opacity:0}100%{opacity:0}}
@keyframes fin1-mergefade{0%,43%{opacity:0}46%{opacity:1}61%{opacity:1}65%{opacity:0}100%{opacity:0}}
@keyframes fin1-pop{0%,62%{transform:scale(1)}68%{transform:scale(1.35)}78%{transform:scale(1)}100%{transform:scale(1)}}
}
/* Pause only the inv1 dashes while off-screen (pure CSS, reliable). fin1 is left running
 continuously: its dots move via SMIL and fade via CSS, and pausing/resuming the two clocks
 separately makes them drift and stick — one uninterrupted clock keeps them in sync. */
.js #inv1 .conv{animation-play-state:paused;}
.js #inv1.in-view .conv{animation-play-state:running;}


/* ---------- DEPLOYMENT & COMPLIANCE ---------- */
.deploy{background:var(--tint);border-top:1px solid var(--line);}
.deploy .section-head{max-width:none;}
.deploy .section-head .lead{max-width:560px;}
.deploy .opts,.means .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:var(--head-gap);}
.opt,.ch-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-card);padding:var(--card-pad);display:flex;flex-direction:column;box-shadow:var(--shadow-card);}
.opt h2,.opt h3{font-size:19px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em;}
.opt p{color:var(--muted);font-size:15px;line-height:1.6;}
.opt .ic,.ch-ic{width:54px;height:54px;border-radius:var(--r-tile);background:var(--ink);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:22px;box-shadow:var(--shadow-tile);}
.opt .ic svg,.ch-ic svg{width:27px;height:27px;display:block;}
.compliance{margin-top:var(--block-gap);display:flex;align-items:center;gap:34px;flex-wrap:wrap;}
.compliance .chead{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink);}
.compliance .chead svg{width:18px;height:18px;flex:none;}
.compliance .certs{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;}
.compliance .cert{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-tag);padding:8px 14px;cursor:default;box-shadow:0 1px 2px rgba(37,37,37,.04);}
.compliance .cert svg{width:14px;height:14px;flex:none;color:var(--green);}

/* ---------- PROCUREMENT (channel cards) ---------- */
.market{border-top:1px solid var(--line);}
/* auto-scaling like .products .grid: 2 channels now, a third needs no CSS change.
   With exactly 2 cards this resolves to the same two tracks as the old 1fr 1fr. */
.market .ch-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:var(--head-gap);}
/* informational card — flat, no hover-lift, cursor:default so it never reads as a button */
/* informational, never a button */
.ch-card{cursor:default;}
/* The benefit lines wrap to different heights, which pushed the tag row and the
   meta rule out of step between the cards. Copy length cannot hold this on its
   own: measured across 700–1440px, shortening one benefit only moves the mismatch
   to another width. So the cards share one set of rows instead — six children,
   six parent rows — and every row lines up whatever the copy does. A third
   channel card inherits it with no CSS change. Two constraints: keep .ch-card to
   six children or update the span, and if a card row ever wraps to a second band,
   restore a row gap between bands (it is zeroed here so the shared rows sit flush).
   Guarded, so a browser without subgrid keeps the flex column above. */
@supports (grid-template-rows:subgrid){
  @media (min-width:681px){
    .market .ch-cards{grid-template-rows:auto auto auto auto 1fr auto;row-gap:0;}
    .ch-card{display:grid;grid-template-rows:subgrid;grid-row:span 6;}
  }
}
.ch-name{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin:0 0 10px;}
.ch-benefit{color:var(--muted);font-size:15px;line-height:1.6;margin:0;}
/* provider wordmarks — plain flat tags, no provider logos */
.ch-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.ch-tags span{font-size:13px;font-weight:600;color:var(--ink);background:var(--tint);border:1px solid var(--line);border-radius:var(--r-tag);padding:6px 12px;line-height:1;}
/* collapses to 0 when the cards are balanced; only grows to bottom-align the
   meta rows if one card ever gets taller (e.g. a benefit wraps at tablet width) */
.ch-spacer{flex:1 1 auto;min-height:0;}
/* "handled for you" meta row — gives both cards equal substance */
.ch-meta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;}
.ch-meta-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ch-handled{display:flex;flex-wrap:wrap;gap:8px 16px;}
.ch-handled span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.2;}
.ch-handled svg{width:14px;height:14px;flex:none;color:var(--green);}

/* ---------- CONTACT / FOOTER ---------- */
.contact{background:var(--tint);border-top:1px solid var(--line);}
.contact .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;}
.contact .eyebrow{margin-bottom:18px;}
.contact h2{font-size:clamp(34px,4.2vw,52px);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:0 0 18px;}
.contact .sub{color:var(--muted);font-size:18px;max-width:540px;}
.contact .card{background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:46px 34px;box-shadow:0 1px 2px rgba(37,37,37,.04),0 18px 40px -28px rgba(37,37,37,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.contact .card .lead-in{margin:0 0 18px;text-align:center;color:var(--muted);font-size:15px;font-weight:500;line-height:1.4;}
.contact .card .contact-actions{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;max-width:270px;}
/* PRIMARY: opens the visitor's mail app */
.contact .card .mail-open{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;padding:14px 28px;border-radius:var(--r-pill);background:var(--red);border:1px solid var(--red);color:var(--white);font-family:inherit;font-weight:600;font-size:16px;line-height:1;cursor:pointer;transition:background .2s ease,transform .1s ease;}
.contact .card .mail-open:hover{background:#B71F20;}
.contact .card .mail-open:active{transform:scale(.97);}
.contact .card .mail-open .mail-ico{color:#fff;opacity:.92;flex:none;}
/* SECONDARY: copy the address (ghost) */
.contact .card .copy-btn{display:none;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;padding:14px 26px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--ink);font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:border-color .2s ease,transform .1s ease;}
.js .contact .card .copy-btn{display:inline-flex;}
.contact .card .copy-btn:hover{border-color:var(--ink);}
.contact .card .copy-btn:active{transform:scale(.97);}
.contact .card .copy-btn.copied{border-color:var(--red);}
.contact .card .copy-btn .pill-ico{flex:none;color:var(--red);}
.contact .card .copy-btn .check-ico{display:none;}
.contact .card .copy-btn.copied .copy-ico{display:none;}
.contact .card .copy-btn.copied .check-ico{display:block;}
.contact .card .copy-btn .copy-text{font-size:15px;letter-spacing:-.01em;line-height:1;overflow:hidden;text-overflow:ellipsis;}
.contact .card .copy-note{position:absolute;top:100%;left:0;right:0;margin-top:10px;font-size:13px;font-weight:600;line-height:1.2;color:var(--red);text-align:center;opacity:0;transition:opacity .25s ease;}
.contact .card .copy-btn.copied ~ .copy-note{opacity:1;}
/* replayed on every click via the .pop class (JS restarts it with a reflow) */
@keyframes copyTick{0%{transform:scale(.4);}60%{transform:scale(1.25);}100%{transform:scale(1);}}
@keyframes copyNoteIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.contact .card .copy-btn.pop .check-ico{animation:copyTick .3s ease;}
.contact .card .copy-btn.pop ~ .copy-note{animation:copyNoteIn .28s ease;}
@media (prefers-reduced-motion:reduce){
  .contact .card .copy-btn.pop .check-ico,
  .contact .card .copy-btn.pop ~ .copy-note{animation:none;}
}
footer.ff{background:#fff;border-top:1px solid var(--line);font-family:'Schibsted Grotesk',system-ui,sans-serif;}
.ff .ft-inner{max-width:1120px;margin:0 auto;padding:52px 40px 26px;}
.ff .ft-row{display:flex;flex-wrap:wrap;gap:36px 56px;align-items:flex-start;}
.ff .ft-brand{flex:1 1 320px;min-width:260px;}
.ff .ft-logo{height:20px;width:auto;display:block;}
.ff .ft-tag{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:34ch;}
.ff .ft-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:8px 0 -6px -12px;color:var(--muted);transition:color .15s;}
.ff .ft-social:hover{color:#0A66C2;}
.ff .ft-social svg{width:21px;height:21px;display:block;}
.ff .ft-h{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ff .ft-offices{margin-top:24px;}
.ff .ft-office-grid{display:grid;grid-template-columns:1fr;gap:18px;}
.ff .ft-office{font-style:normal;font-size:13px;line-height:1.65;color:var(--muted);}
.ff .ft-city{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--ink);}
.ff .ft-co{display:block;color:var(--ink);font-weight:600;}
.ff .ft-badge{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:4px;background:var(--white);border:1px solid var(--line-2);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--muted);}
.ff .flag{display:inline-flex;flex:none;align-items:center;height:12px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 .5px rgba(37,37,37,.18),0 1px 2px -1px rgba(37,37,37,.35);}
.ff .flag svg{display:block;height:100%;width:auto;}
/* The full-width desktop budget is exact: 320px brand + 56px row gap + 664px
   navigation = the 1040px content box. Equal grid tracks keep Product,
   Company and Legal aligned regardless of their longest label. When that
   budget no longer fits, the navigation wraps beneath the brand as one unit
   and grows to the full row rather than squeezing or wrapping link text. */
.ff .ft-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;flex:1 0 664px;min-width:0;align-content:start;}
.ff .ft-col{min-width:0;}
.ff .ft-col ul{list-style:none;margin:0;padding:0;}
.ff .ft-col li+li{margin-top:2px;}
.ff .ft-col a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;line-height:1.3;color:var(--ink);white-space:nowrap;transition:color .15s;}
.ff .ft-col a:hover{color:var(--red);}
.ff .ft-col a.current{color:var(--red);font-weight:600;}
.ff .ft-col li>span{display:inline-flex;align-items:center;min-height:44px;font-size:15px;line-height:1.3;color:var(--muted);cursor:default;}
.ff .ft-bar{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px 28px;flex-wrap:wrap;}
.ff .ft-copy{font-size:13px;color:var(--muted);}

@media (max-width:840px){
  .js .menu-btn{display:inline-flex;}
  .nav .links{display:none;position:absolute;top:68px;left:0;right:0;max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:6px 24px 16px;box-shadow:0 16px 30px -20px rgba(37,37,37,.3);}
  .nav .links.open{display:flex;}
  .nav .links a{min-height:48px;}
  .nav .links a.cta{justify-content:center;min-height:46px;margin-top:10px;background:var(--red);color:#fff;border-color:var(--red);border-radius:var(--r-pill);}
  .hero-br{display:none;}
  :root{--section-y:64px;--hero-y:80px;}
  .hero .art{-webkit-mask-image:none;mask-image:none;opacity:.3;}
  .hero .sub{font-size:clamp(18px,2.5vw,21px);}
  /* tablet (≤840): keep multi-column so the layout doesn't go sparse */
  .steps{grid-template-columns:repeat(2,1fr);gap:46px 32px;}
  .steps::before,.steps::after{display:none;}
  .ff .ft-inner{padding:44px 24px 22px;}
  .ff .ft-row{gap:32px;}
  .ff .ft-brand{flex-basis:100%;}
  .ff .ft-links{flex:1 1 100%;width:100%;gap:40px 24px;}
  .ff .ft-bar{justify-content:flex-start;}
  .compliance{flex-direction:column;align-items:flex-start;gap:16px;}
  .wrap{padding:0 24px;}
}
/* phone (≤680): collapse the remaining grids to a single column */
@media (max-width:680px){
  /* The desktop clamp's fluid range does not engage until 786px, so its 44px
     minimum was doing all the work on every phone. This ramps instead, and is
     identical to the desktop rule from 489px up — at 680 both resolve to 44px. */
  .hero h1{font-size:clamp(32px,9vw,44px);}
  .steps{grid-template-columns:1fr;gap:28px;}
  .products .grid{grid-template-columns:1fr;}
  .deploy .opts,.means .opts{grid-template-columns:1fr;gap:16px;}
  .market .ch-cards{grid-template-columns:1fr;}
  .contact .grid{grid-template-columns:1fr;gap:40px;}
  .contact .card{padding:36px 22px;}
  .ff .ft-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;}
}
/* small phone (≤480): full-width stacked hero CTAs */
@media (max-width:480px){
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:14px;}
  .hero .cta-row .btn,.hero .cta-row .btn-ghost{width:100%;justify-content:center;}
  .ff .ft-links{grid-template-columns:1fr;gap:16px;}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important;}.steps::after{display:none;}}

/* ---------- ERP INTEGRATION PAGE ---------- */
.erp-head{border-top:1px solid var(--line);}
.erp-head .section-head{max-width:780px;}
.erp-matrix{margin-top:var(--head-gap);border:1px solid var(--line-2);border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-card);overflow:hidden;contain:layout paint;}
.erp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.erp-scroll:focus-visible{outline-offset:-4px;}
table.erp{width:100%;border-collapse:collapse;min-width:820px;}
.erp th,.erp td{text-align:left;}
.erp thead th{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:16px 26px;background:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap;}
.erp thead th.col{text-align:center;width:176px;padding-left:16px;padding-right:16px;}
.erp tbody td{padding:13px 26px;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line);vertical-align:middle;}
.erp tbody td.col{text-align:center;}
/* the vendor cell is a <th>, so this must clear every child, not just td —
   and it must outrank the border-bottom on .erp .vendor below */
.erp tbody tr:last-child > *{border-bottom:none;}
.erp .vendor{vertical-align:middle;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 24px;font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;width:1%;}
.erp tbody tr.alt > *{background:var(--tint);}  /* alternating vendor-group shade */
.erp .sys .badge{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:#B71F20;background:rgba(217,38,39,.10);border-radius:var(--r-pill);padding:2px 9px;vertical-align:1.5px;white-space:nowrap;}
/* matrix indicators carry the data, so they must clear the 3:1 graphical-contrast floor (the
   lighter --green check is fine elsewhere where it only reinforces an adjacent text label) */
.req{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(52,178,123,.12);color:#157A4E;}
.req svg{width:15px;height:15px;}
/* quieter than the check but still ≥3:1 against white and the alt-row tint */
.na{display:inline-block;width:26px;text-align:center;color:#7A828F;font-size:18px;font-weight:600;line-height:26px;}
/* first section on its page, so no border-top — the sticky nav already ends in one */
.means{background:var(--tint);}
.erp-cta{background:var(--tint);border-top:1px solid var(--line);}
.erp-cta-row{display:flex;align-items:center;justify-content:space-between;gap:28px 48px;flex-wrap:wrap;}
.erp-cta h2{margin:0;color:var(--ink);}
.erp-cta p{font-size:18px;color:var(--muted);margin:12px 0 0;max-width:560px;line-height:1.5;}
.erp-cta .btn{flex:none;}
/* phones clip the 820px-min matrix; cue the horizontal scroll so columns aren't missed */
.erp-hint{display:none;}
@media (max-width:680px){
  .erp-hint{display:flex;align-items:center;gap:7px;margin-top:var(--head-gap);font-size:13px;font-weight:600;color:var(--muted);}
  .erp-hint svg{flex:none;}
  .erp-hint + .erp-matrix{margin-top:14px;}
}

/* ---------- BRAND / LOGO ASSETS PAGE ---------- */
.brandkit .bk-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;}
.brandkit .bk-top .btn{flex:none;}
.brandkit .bk-top .btn .zx{margin-left:3px;}
.brandkit .bk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:var(--head-gap);}
.brandkit .asset{border:1px solid var(--line-2);border-radius:var(--r-card);overflow:hidden;background:#fff;box-shadow:var(--shadow-card);display:flex;flex-direction:column;}
.brandkit .asset .prev{flex:1;min-height:150px;display:flex;align-items:center;justify-content:center;padding:32px 36px;}
.brandkit .asset .prev.light{background:var(--tint);}
.brandkit .asset .prev.dark{background:var(--ink);} /* brand dark #252525, now the shared ink */
.brandkit .asset .prev.checker{background:
  linear-gradient(45deg,#eceef2 25%,transparent 25%,transparent 75%,#eceef2 75%),
  linear-gradient(45deg,#eceef2 25%,#f7f8fa 25%,#f7f8fa 75%,#eceef2 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;}
.brandkit .asset .prev img{display:block;}
.brandkit .asset .prev.wm img{width:100%;max-width:360px;height:auto;}
.brandkit .asset .prev.ic img{height:96px;width:auto;}
.brandkit .asset .meta{padding:18px 22px 20px;border-top:1px solid var(--line);}
.brandkit .asset .nm{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0;}
.brandkit .asset .ds{font-size:13px;color:var(--muted);margin-top:3px;}
.brandkit .asset .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.brandkit .chip{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s;}
.brandkit .chip.copy{display:none;}
.js .brandkit .chip.copy{display:inline-flex;}
.brandkit .chip:hover{border-color:var(--ink);}
.brandkit .chip svg{width:13px;height:13px;flex:none;opacity:.65;}
.brandkit .chip .px{color:var(--muted);font-weight:600;font-size:11.5px;}
.brandkit .chip.copy .ok,.brandkit .chip.copy .er{display:none;}
.brandkit .chip.copy.copied{border-color:var(--green);color:#157A4E;}
.brandkit .chip.copy.copied .cp{display:none;}
.brandkit .chip.copy.copied .ok{display:inline;}
/* copying an image needs a secure context and clipboard.write(); when that is
   unavailable the chip says so in place rather than raising a blocking alert */
.brandkit .chip.copy.failed{border-color:var(--line-2);color:var(--muted);}
.brandkit .chip.copy.failed .cp{display:none;}
.brandkit .chip.copy.failed .er{display:inline;}
.brandkit .bk-foot{margin-top:var(--block-gap);padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:20px 48px;flex-wrap:wrap;}
.brandkit .swatches{display:flex;gap:12px;flex-wrap:wrap;}
.brandkit .sw{display:flex;align-items:center;gap:11px;border:1px solid var(--line-2);border-radius:12px;padding:9px 15px 9px 11px;background:#fff;box-shadow:var(--shadow-card);}
.brandkit .sw .dot{width:28px;height:28px;border-radius:var(--r-tag);flex:none;box-shadow:inset 0 0 0 1px rgba(37,37,37,.08);}
.brandkit .sw .dot.red{background:var(--red);}
.brandkit .sw .dot.ink{background:var(--ink);}
.brandkit .sw .k{font-size:13px;font-weight:600;color:var(--ink);}
.brandkit .sw .v{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
.brandkit .usage{font-size:14px;color:var(--muted);line-height:1.6;max-width:430px;}
.brandkit .usage b{color:var(--ink);font-weight:600;}
@media (max-width:680px){
  .brandkit .bk-grid{grid-template-columns:1fr;}
  .brandkit .bk-foot{flex-direction:column;}
}

/* ---------- NOT FOUND ---------- */
.not-found{border-top:1px solid var(--line);min-height:calc(100vh - 68px);display:flex;align-items:center;}
.not-found .nf-layout{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1fr);align-items:center;gap:48px 80px;width:100%;}
.not-found .nf-code{font-size:clamp(112px,18vw,220px);font-weight:700;line-height:.8;letter-spacing:-.07em;color:var(--tint);user-select:none;}
.not-found .section-head{max-width:600px;}
.not-found .nf-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px;}
@media (max-width:680px){
  .not-found{align-items:flex-start;}
  .not-found .nf-layout{grid-template-columns:1fr;gap:34px;}
  .not-found .nf-code{font-size:104px;}
}

/* ---------- LEGAL PAGES ---------- */
/* A legal page is one long document, not a headed body section. Its h2s are
   subsection headings inside the prose, so they take the 22px document size
   rather than the 44px section-title clamp — the exception is recorded in
   check-design.mjs next to the .contact one. Measure is 680px: at 16px that
   is a comfortable ~80 characters, so paragraphs never run the full 1120px
   wrap and tire the eye on the return sweep. Head and body share that one
   width and both centre inside the wrap: left-aligning them pooled every bit
   of leftover space on the right, which read as unfinished against the
   full-width header and footer rather than as deliberate space. */
.legal .section-head{max-width:680px;margin-inline:auto;}
/* 18px, not the 44px head gap, and that is the one documented exception to the
   uniform head-to-content rhythm. The dated record below is header metadata
   about the document, not the document's first block: it is a single 13.5px
   muted line, so 44px of air above it and its own rule below left it isolated
   on both sides, floating between the head and the prose. 18px is the head's
   own internal step (eyebrow → h1 → lead), so the record reads as the head's
   closing line. The 44px did not shrink, it moved below the rule
   (.legal-meta + h2), where the document actually starts. check-design.mjs
   asserts it there. */
.legal-body{margin-top:18px;max-width:680px;margin-inline:auto;}
.legal-body h2{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:var(--block-gap) 0 12px;}
.legal-body p,.legal-body li{font-size:16px;line-height:1.7;color:var(--muted);}
/* the ul carries no bottom margin, so the paragraph after a list needs the same
   top margin as any other — without this it sits closer to the last bullet than
   the bullets sit to each other, and reads as part of the list */
.legal-body p+p,.legal-body ul+p{margin-top:14px;}
.legal-body ul{margin:14px 0 0;padding-left:22px;}
.legal-body li+li{margin-top:8px;}
.legal-body li::marker{color:var(--line-2);}
.legal-body strong{color:var(--ink);font-weight:600;}
/* Contract links must remain distinguishable from nearby bold terms without
   relying on hover or colour perception alone. */
.legal-body a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.16em;transition:color .15s;}
.legal-body a:hover,.legal-body a:focus-visible{color:var(--red);}
.legal-body .legal-meta{margin:0;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted);}
/* the record's rule closes the head, so the first heading below it opens on the
   head-to-content gap rather than the --block-gap that separates two clauses */
.legal-body .legal-meta + h2{margin-top:var(--head-gap);}
/* The closing note. Unframed for the same reason the version block is: with
   the record and the contents flattened, a single tinted card left at the
   foot was the only box on a legal page and read as a leftover rather than as
   emphasis. A rule above it separates it from the last clause, so the whole
   document is one uninterrupted surface from the head to this line. */
.legal-note{margin-top:var(--block-gap);padding-top:26px;border-top:1px solid var(--line);}
.legal-note .k{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.legal-note p{margin-top:10px;}

/* ---------- LONG-FORM LEGAL DOCUMENTS (licence terms, DPA) ---------- */
/* The privacy notice is a short read. A published contract is not: it runs to
   twenty-odd pages, numbers its clauses, and carries matrices a counterparty
   reads column by column. These rules extend .legal-body with what that needs
   and change nothing on /privacy. Same tokens, same measure, no new request. */

/* An anchor jump must land clear of the 68px sticky nav, or the heading the
   reader just asked for sits underneath it. */
.legal-body h2,.legal-body h3,.legal-body h4{scroll-margin-top:88px;}
/* Clearly subordinate to the 22px h2, and to each other, by size and by the
   space above them. Both stay ink, so neither drops below 4.5:1. */
.legal-body h3{font-size:18px;font-weight:600;letter-spacing:-.005em;color:var(--ink);margin:28px 0 10px;}
.legal-body h4{font-size:15px;font-weight:600;letter-spacing:.005em;color:var(--ink);margin:22px 0 8px;}
/* a sub-heading that opens its parent section is part of it, not a new block */
.legal-body h2+h3,.legal-body h3+h4{margin-top:16px;}
.legal-body hr{border:0;border-top:1px solid var(--line);margin:var(--block-gap) 0;}

/* Numbered clauses, nested three deep: 1. / (a) / (i). The list-style changes
   per level so a reader can tell depth from the marker alone. */
.legal-body ol{margin:14px 0 0;padding-left:28px;list-style:decimal;}
.legal-body ol ol{list-style:lower-alpha;}
.legal-body ol ol ol{list-style:lower-roman;}
.legal-body ul ul{list-style:circle;}
.legal-body ul ul ul{list-style:square;}
/* Clause lists carry their own "(a)" / "(i)" markers in the text, because the
   document cites them by that letter ("paragraph (g)"). A list marker as well
   would print the reference twice, so these lists drop theirs and sit flush;
   nested levels keep their indent. Plain bullet lists are untouched. */
.legal-body ul.clauses{list-style:none;padding-left:0;}
.legal-body li>ul.clauses{padding-left:24px;}
.legal-body li>ul,.legal-body li>ol{margin-top:8px;padding-left:24px;}
/* An ordered marker is the clause number a counterparty cites, so it has to be
   readable rather than the hairline that suits a decorative bullet. */
.legal-body ol>li::marker{color:var(--muted);font-weight:600;}
.legal-body ol+p{margin-top:14px;}

/* Wide matrices scroll inside their own box, so the page body never scrolls
   sideways. Markup supplies the keyboard-accessible no-JS baseline with
   tabindex="0", role="region" and an aria-label ending “scrollable table”.
   site.js keeps those semantics only while the box actually overflows; a fitting
   table does not become a misleading region or an unnecessary tab stop. Every cell
   is in the DOM either way, so nothing is hidden from a reader or a printer. */
.legal-table{margin:18px 0 0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line-2);border-radius:var(--r-tag);background:#fff;}
.legal-table+p{margin-top:14px;}
.legal-body table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55;}
.legal-body caption{caption-side:top;text-align:left;padding:14px 16px 2px;font-size:13px;font-weight:600;color:var(--muted);}
.legal-body th,.legal-body td{padding:11px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);min-width:96px;overflow-wrap:break-word;}
.legal-body thead th{background:var(--tint);color:var(--ink);font-weight:600;}
.legal-body td{color:var(--muted);}
.legal-body tbody th{color:var(--ink);font-weight:600;}
.legal-body tbody tr:last-child th,.legal-body tbody tr:last-child td{border-bottom:0;}

/* The publication note on the three contracts: the Current Version assertion,
   the archive-and-change-log promise and the legal@ route. It closes the
   document rather than opening it. It used to sit under a five-row <dl> above
   the first clause, which put ~80 words of administrative prose between the
   reader and Clause 1; the facts a counterparty actually relies on (document,
   version, version date, effective date) now open the page on one .legal-meta
   line, exactly as they do on the four short pages, so all seven routes share
   one opening and .doc-meta is gone. Same rule-above treatment as .legal-note
   below it: the foot reads as document, publication record, contact. Links
   need no rule of their own here — unlike the old sibling block, this sits
   inside .legal-body, so .legal-body a reaches it. */
.legal-body .dm-note{margin-top:var(--block-gap);padding-top:26px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--muted);}

/* A defined term. Renders exactly like <strong>, on purpose: a document can
   mark its defined words up semantically without the page changing look. */
.legal-body .term,.legal-body dfn{font-style:normal;font-weight:600;color:var(--ink);}

@media (max-width:680px){
  .legal-body th,.legal-body td{padding:10px 13px;}
}

/* ---------- PRINT: any legal page filed as a PDF ---------- */
@media print{
  @page{size:A4;margin:16mm 14mm;}
  html{scroll-behavior:auto;}
  body{background:#fff;color:var(--ink);font-size:11pt;}
  /* site chrome, which is dead weight on paper */
  .nav,.ff,.skip-link,.menu-btn{display:none;}
  section{padding:0;}
  .wrap{max-width:none;padding:0;}
  .legal .section-head,.legal-body{max-width:none;margin-inline:0;}
  /* same shape as on screen, in points: the record hugs the head, the prose
     opens below its rule. The compound selector has to be restated or the
     screen rule outranks this one on specificity. */
  .legal-body{margin-top:10pt;}
  .legal-body .legal-meta + h2{margin-top:16pt;}
  /* muted grey prints washed out; on paper everything reads as ink */
  .legal-body p,.legal-body li,.legal-body td,.legal-body a,.legal-body caption,
  .legal-body .legal-meta,.legal-body .dm-note{color:var(--ink);}
  .legal-body h2,.legal-body h3,.legal-body h4{break-after:avoid;page-break-after:avoid;}
  .legal-body p,.legal-body li{orphans:3;widows:3;}
  /* nothing is clipped on paper: the scroll box opens up and prints whole */
  .legal-table{overflow:visible;border:0;border-radius:0;}
  .legal-body table{font-size:9pt;}
  .legal-body th,.legal-body td{min-width:0;padding:7px 9px;border-bottom:1px solid var(--line-2);}
  .legal-body thead{display:table-header-group;}
  .legal-body tr{break-inside:avoid;page-break-inside:avoid;}
  /* backgrounds off: they cost ink and print as flat grey on most drivers.
     Only the table head still carries one — the publication note and the
     closing note are unframed on screen too. */
  .legal-body thead th{background:none;}
  .legal-body .dm-note,.legal-note{break-inside:avoid;page-break-inside:avoid;}
}