/* ===========================================================================
   Base: reset, type, focus, utilities.
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--header-top) + 16px)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-2);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto}
/* WordPress chrome is not ours to resize: the theme reset would otherwise
   blow the admin-bar icon up to its viewBox size. */
#wpadminbar img{max-width:none}
picture{display:contents}
a{color:var(--cp-blue-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--cp-blue-600)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink);line-height:var(--lh-head);margin:0 0 .5em;letter-spacing:-.02em}
p{margin:0 0 1em}
button{font:inherit}
::selection{background:rgba(60,203,244,.3);color:inherit}

/* An inline SVG has no intrinsic size: in a flex row it grows to fill the
   line. A base size makes a missing component rule slightly wrong, never
   enormous. */
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}

/* ------------------------------------------------------------------ focus
   Keep the outline. Style :focus-visible, never remove it for a soft ring. */
:focus-visible{outline:3px solid var(--cp-blue);outline-offset:3px;border-radius:4px}
.hero :focus-visible,
.sec-videos :focus-visible,
.sec-verifone :focus-visible,
.sec-cta :focus-visible,
.site-footer :focus-visible,
.nav-drawer :focus-visible,
.pa-side :focus-visible,
.auth-side :focus-visible{outline-color:var(--glow-2)}

/* --------------------------------------------------------------- helpers */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:fixed;left:16px;top:-80px;z-index:10000;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);
  font-weight:600;text-decoration:none;transition:top .2s var(--ease);
}
.skip-link:focus{top:16px;color:#fff}

.nw{white-space:nowrap}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* Prose (default page template, single posts) */
.prose{max-width:min(72ch, 100%)}
.prose h2{font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem);margin-top:1.6em}
.prose h3{font-size:1.25rem;margin-top:1.4em}
.prose img{border-radius:var(--r)}
.prose ul,.prose ol{padding-left:1.25em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}