/* Base for the hand-written marketing pages (index, about, fraudcontext,
* applejack). Page layout is written inline in each page, ported from the
* design handoff; this file holds what inline styles cannot express —
* resets, hover states, entrance motion, the hero glow and mockup scaling.
* The generated blog/research pages do not load this file. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;font-family:'Inter',sans-serif;color:#162B5B;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%}
a{color:#0163E2;text-decoration:none;transition:color .15s,background .15s,border-color .15s,box-shadow .15s}
a:hover{color:#162B5B}
/* Two-tone focus ring: holds 3:1 on white, the navy bands and the coloured cards. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #0163E2;outline-offset:2px;box-shadow:0 0 0 2px #fff}
main:focus{outline:none}
button{font-family:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes es-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:es-rise .6s cubic-bezier(.2,.7,.3,1) both}
.rise-2{animation:es-rise .7s .1s cubic-bezier(.2,.7,.3,1) both}
/* Page frame: clips the hero glow, which sits behind the header. */
.page{position:relative;min-height:100vh;background:#fff;overflow:hidden}
.hero-glow{position:absolute;top:-60px;left:-80px;width:min(980px,90vw);max-width:none;opacity:.85;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.page > main{position:relative;z-index:2}
/* Buttons and links (hover states from the design's style-hover) */
.btn-primary{background:linear-gradient(135deg,#0163E2,#326FEA);color:#fff;font-weight:600;font-size:15px;padding:15px 26px;border-radius:7px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 14px 26px -10px rgba(1,99,226,.5)}
.btn-primary:hover{color:#fff;box-shadow:0 18px 30px -10px rgba(1,99,226,.6)}
.btn-navy{background:#162B5B;color:#fff;font-weight:600;font-size:15px;padding:15px 28px;border-radius:7px;display:inline-flex;align-items:center;gap:10px}
.btn-navy:hover{background:#0163E2;color:#fff}
.btn-white{background:#fff;color:#162B5B;font-weight:600;font-size:15px;padding:15px 26px;border-radius:7px;display:inline-flex;align-items:center;gap:10px}
.btn-white:hover{background:#EAF3FF;color:#162B5B}
.hv-inherit:hover{color:inherit}
.hv-blue:hover{color:#0163E2}
.hv-navy:hover{color:#162B5B}
.hv-border-blue:hover{border-color:#0163E2}
/* Glow in the top-right of the navy CTA bands. The design used
* flow-glow-br.jpg with screen blending, but that image is near-white, so on
* navy it showed as a hard-edged pale rectangle; a gradient keeps the glow
* without the box. */
.band-glow{position:absolute;right:-120px;top:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(81,143,254,.28),rgba(81,143,254,0));pointer-events:none}
/* Fixed-size product mockups, scaled to their container by site.js:
* */
[data-scale-w]{position:relative;width:100%;overflow:hidden}
[data-scale-w] > .scale-inner{position:absolute;top:0;left:0;transform-origin:top left}
/* Arrow-flow rows (Applejack) stack under 860px with the arrows rotated. */
@media (max-width:860px){
.flow-row{flex-direction:column!important;align-items:stretch!important}
.flow-row .flow-arrow{transform:rotate(90deg);align-self:center}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation:none!important;transition:none!important}
}
/* HubSpot form dialog: an opens