/* CTA buttons — the one place the site's call-to-action buttons are defined.
   Loaded on every page right after global.css (which holds the tokens this reads: --cta-btn-bg*, --on-cta,
   --ghost-*, --btn-*). A page stylesheet may size or place a button (.hero-btn-group .cta-btn, .ifp-size-cta …),
   but the look — fill, label colour, shine, hover, press, focus — is edited here and nowhere else.
   Contents: .cta-btn (primary gradient pill), .cta-btn-ghost (outline), the header's slim "Book a Demo",
   the mobile drawer's button, the ≤599px size. */

/* CTA BUTTON SYSTEM — used on all pages */
.cta-btn, .cta-btn-ghost {
  --_lift: 0; --_scale: 1;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 7px);
  min-height: var(--hit-min, 44px);
  min-width: var(--hit-min, 44px);
  padding: var(--btn-page-pad-y, 13px) var(--btn-page-pad-x, 30px);
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: var(--btn-fs, 15px);
  font-weight: var(--btn-fw, 600);
  line-height: 1;
  letter-spacing: 0.2px;
  border: none;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transform: translateY(var(--_lift)) scale(var(--_scale));
  transition:
    transform var(--btn-dur, 90ms) var(--btn-ease, ease),
    box-shadow var(--btn-dur, 90ms) var(--btn-ease, ease),
    filter var(--btn-dur, 90ms) var(--btn-ease, ease),
    color var(--btn-dur, 90ms) var(--btn-ease, ease),
    background-color var(--btn-dur, 90ms) var(--btn-ease, ease);
}
/* PRIMARY */
.cta-btn {
  min-width: 160px;
  color: var(--on-cta) !important;
  background: var(--cta-btn-bg);
  text-shadow: 0 1px 2px rgba(1,4,16,.35);
  box-shadow: 0 6px 16px var(--cta-shadow);
}
/* Shine sweep — moved via background-position (not overflow-clipped */
.cta-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.42) 50%, transparent 66%);
  background-size: 250% 100%;
  background-position: 150% 0;
  transition: background-position var(--btn-dur-shine, 150ms) var(--btn-ease, ease);
}
.cta-btn:not(:disabled):hover::before,
.cta-btn.s-hover::before { background-position: -90% 0; }
/* Hover: background lightens (per spec); cursor:pointer already applies */
.cta-btn:not(:disabled):hover,
.cta-btn.s-hover {
  --_lift: -2px; --_scale: 1.02;
  color: var(--on-cta);
  background: var(--cta-btn-bg-hover);
  will-change: transform;
  box-shadow: 0 10px 24px -6px rgba(var(--accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.28);
}
/* Pressed sinks INTO the surface — inset shadow + darker background, no */
.cta-btn:not(:disabled):active,
.cta-btn.s-active {
  --_lift: 0; --_scale: .985;
  background: var(--cta-btn-bg-active);
  box-shadow: inset 0 3px 9px rgba(0,0,0,.35), 0 2px 5px -3px rgba(0,0,0,.4);
  transition-duration: var(--btn-dur-press, 40ms);
}
/* DISABLED (all) */
.cta-btn:disabled, .cta-btn.s-disabled,
.cta-btn-ghost:disabled, .cta-btn-ghost.s-disabled,
.cta-icon-btn:disabled, .cta-icon-btn.s-disabled {
  --_lift: 0; --_scale: 1;
  cursor: not-allowed;
  filter: grayscale(.45) opacity(.5);
  box-shadow: none;
  text-shadow: none;
}
.cta-btn:disabled::before, .cta-btn.s-disabled::before { animation: none; opacity: 0; }
/* .cta-btn loading: spinner sits inline (not overlaid) next to a visible */
/* FOCUS-VISIBLE (all) */
.cta-btn:focus-visible,
.cta-btn-ghost:focus-visible,
.cta-icon-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-deep-rgb), .85);
}
/* GHOST / SECONDARY */
.cta-btn-ghost {
  color: var(--ghost-fg) !important;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ghost-bd);
}
.cta-btn-ghost:not(:disabled):hover,
.cta-btn-ghost.s-hover {
  --_lift: -2px;
  background: var(--ghost-hover-tint);
  box-shadow: inset 0 0 0 1.5px var(--ghost-hover-bd), 0 8px 22px -12px rgba(var(--accent-rgb), .5);
}
/* dark sections: text shifts to cyan on hover (legible on near-black only) */
.cta-btn-ghost:not(:disabled):active,
.cta-btn-ghost.s-active {
  --_lift: 0; --_scale: .985;
  background: color-mix(in srgb, var(--ghost-hover-tint) 100%, #000 6%);
  box-shadow: inset 0 0 0 1.5px var(--ghost-hover-bd), inset 0 3px 8px rgba(1,4,16,.18);
  transition-duration: var(--btn-dur-press, 40ms);
}
.cta-btn [data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  flex-shrink: 0;
  display: inline-block;
  animation: iconRing 3s ease-in-out infinite;
}
/* Header "Buy on Amazon" — the one button that is not on the SNL gradient: Amazon's own Buy Now button (orange
   fill, near-black label, the Amazon logo glyph) with fully round corners, the owner's ask on 2026-10-03. Colours
   are the --amazon-* / --on-amazon tokens in global.css. It replaced the header's "Book a Demo" button, so it keeps
   that button's slim 34px size to fit the 44px pill. No glow, no lift. The same class is the mobile drawer's last
   button (see the drawer rules below). */
.nav-amazon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 16px;
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--on-amazon);
  background: var(--amazon-btn-bg);
  border: 1px solid var(--amazon-btn-bd);
  border-radius: var(--radius-pill);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--btn-dur, 90ms) var(--btn-ease, ease);
}
.nav-amazon-btn .amazon-glyph { font-size: 15px; }
.nav-amazon-btn:hover,
.nav-amazon-btn:active { background: var(--amazon-btn-bg-hover); }
.nav-amazon-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-deep-rgb), .85);
}
/* Hero primary CTA — slimmer than the site-wide default */
.hero-btn-group .cta-btn {
  padding: 12px 24px;
  font-size: 14px;
}
/* Calendar icon — bell-ring swing every 3s */
@keyframes iconRing {
  0%, 80%, 100% { transform: rotate(0deg); transform-origin: top center; }
  82%  { transform: rotate(20deg);  transform-origin: top center; }
  84%  { transform: rotate(-18deg); transform-origin: top center; }
  86%  { transform: rotate(14deg);  transform-origin: top center; }
  88%  { transform: rotate(-10deg); transform-origin: top center; }
  90%  { transform: rotate(6deg);   transform-origin: top center; }
  92%  { transform: rotate(-4deg);  transform-origin: top center; }
  94%  { transform: rotate(0deg);   transform-origin: top center; }
}
/* The same button as the last item of the mobile nav drawer: full width up to 260px, a 44px tap target. The
   `a.` in the selectors is needed to beat global.css's `.header-mobile-nav a` and its :hover (grey link style). */
.header-mobile-nav a.nav-amazon-btn {
  align-self: center;
  width: 100%;
  max-width: 260px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-amazon);
  border-radius: var(--radius-pill);
}
.header-mobile-nav a.nav-amazon-btn:hover {
  background: var(--amazon-btn-bg-hover);
  color: var(--on-amazon);
}
/* The header pill hides its button once the burger replaces the nav (the drawer carries it instead). It lives
   here, not in global.css, because this file loads after global.css and the display of .nav-amazon-btn above
   would otherwise win. */
@media (max-width: 900px) {
.header-actions .nav-amazon-btn { display: none; }
}
/* Global CTA button design for mobile (≤600px) */
@media (max-width: 599px) {
/* Primary CTA — standardise size */
.cta-btn {
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
/* Phone width: a button is as wide as its label, never a full-width bar. Page rules used to stretch them
   (hero 280px, help bar 320px, form submits 316px: 72-82% of a 390px screen); the one rule here wins over every
   page's `width: 100%` (the !important is deliberate: this file owns CTA size), and the buttons are centred
   by their row / column. A submit button sits in a plain block form, so it is made a block-level flex box
   and centred with auto margins. */
.cta-btn, .cta-btn-ghost { width: auto !important; max-width: 100%; }
form .cta-btn, form .cta-btn-ghost { display: flex; margin-left: auto; margin-right: auto; }
}