/* ============================================================
   USA PAYMENTS — Alpha landing page
   1. Tokens  2. Primitives  3. Sections
   4. Forms  5. Motion  6. A11y  7. Responsive

   Loaded only on registered landing pages — see usapayments-alpha.php
   (is_target() against the usapayments_page_ids option).

   Width utilities (.u-w-*) and the header/nav "floating pill" styles
   used to live here but were moved to chrome.css, loaded on every page
   by usapayments-chrome.php — the plugin that actually renders
   #site-header/#site-footer. Both used el.js-emitted classes on the
   header's own containers, so they can't be scoped to landing pages
   only: any page not in usapayments_page_ids was rendering the header
   with no override for Elementor's raw (and, on top of that, invalid —
   30%+50%+35% = 115%) container widths. See chrome.css sections 1 and 3.
   ============================================================ */

/* ---------- 1. TOKENS ---------------------------------------
   Mirrors Elementor Global Colors. import.sh writes both from
   lib/tokens.js, so they cannot drift. */
:root{
  --navy:#101F3F;    --navy-deep:#0A1428;  --navy-card:#16264C;
  --crimson:#A81E32; --crimson-tint:#FBEEF0;
  --ink:#1B2436;     --muted:#5B6577;
  --surface:#F4F5F8; --border:#E3E6ED;     --white:#fff;
  --gold:#E8A33D;    --success:#3FA46A;

  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --shadow-card-hover:0 2px 6px rgba(16,31,63,.08), 0 18px 40px rgba(16,31,63,.12);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. PRIMITIVES ----------------------------------- */

/* Text on dark backgrounds — Elementor globals can't express alpha */
.txt-on-dark, .txt-on-dark p      { color: rgba(255,255,255,.78); }
.txt-on-dark-dim,
.txt-on-dark-dim p,
.txt-on-dark-dim .elementor-heading-title { color: rgba(255,255,255,.55); }
.sec--dark .hero__sub p           { color: rgba(255,255,255,.78); }

/* Pills / eyebrows */
.pill .elementor-heading-title{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--r-pill);
}
.pill--crimson.gradient .elementor-heading-title{
  background: linear-gradient(180deg, rgba(22, 52, 80, 1) 30%, rgba(155, 18, 44, 1) 94%)!important;
}
.pill--crimson .elementor-heading-title{ border: 1px solid var(--crimson); color:var(--crimson); }
.pill--crimson.white .elementor-heading-title{ border: 1px solid #fff; color:#fff!important; }
.pill--crimson.gradient .elementor-heading-title{ border: 0px solid #fff; color:#fff!important; }

.pill--light   .elementor-heading-title{
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.pill--live .elementor-heading-title{
  background:rgba(255,255,255,.10); color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.18);
}
.pill--live .elementor-heading-title::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--success); flex:0 0 7px;
  box-shadow:0 0 0 0 rgba(63,164,106,.6);
  animation:pulse-dot 2.2s infinite;
}
@keyframes pulse-dot{
  70% { box-shadow:0 0 0 7px rgba(63,164,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,164,106,0); }
}

/* Buttons */
.elementor-button{
  transition:transform .2s var(--ease), background-color .2s var(--ease),
             box-shadow .2s var(--ease), color .2s var(--ease);
}
.elementor-button:hover{ transform:translateY(-1px); }
.btn-ghost .elementor-button{ border-color:rgba(255,255,255,.35); background:transparent; }
.btn-ghost .elementor-button:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6); }
.btn-white .elementor-button:hover{ background:#f0f2f6; }
.btn-phone .elementor-button{ background:transparent; }
.btn-phone .elementor-button:hover{ background:var(--surface); }

.link-arrow{ margin-top:auto; }
.link-arrow .elementor-button{ padding:0; font-weight:600; background:transparent; }
.link-arrow .elementor-button:hover{ color:var(--crimson); transform:none; background:transparent; }
.link-arrow .elementor-button-icon{ transition:transform .2s var(--ease); }
.link-arrow .elementor-button:hover .elementor-button-icon{ transform:translateX(3px); }

/* Cards */
.card{ transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.card--industry{ overflow:hidden; }
.card--industry:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover); }
.card--industry .card__img img{
  aspect-ratio:16/9; object-fit:cover; width:100%; display:block; border-radius:0;
}
.card__head .elementor-icon-box-wrapper{ align-items:center; }
.card__head .elementor-icon-box-title{ margin:0; }
.card__desc{ flex-grow:1; }

.chip .elementor-heading-title{
  display:inline-block; white-space:nowrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:5px 10px; color:var(--muted);
}

/* ---------- 3. SECTIONS ------------------------------------- */

/* Header chrome (the "floating pill" styles previously here) has moved to
   chrome.css section 3 — it renders on every page via
   usapayments-chrome.php, not just this one. Three pieces that used to be
   here were deliberately NOT carried over, because chrome.css already
   handles them a different (and, per its own comments, corrected) way —
   copying them verbatim would have reintroduced a pointer-events/
   admin-bar bug chrome.css says it already fixed once:
     - `.hdr{ pointer-events:none }` + `.admin-bar .hdr{ top:32px }`
     - `.hdr__menu .elementor-nav-menu--*` (targets the old Elementor Pro
       Nav Menu widget, no longer in the DOM — replaced by the `.usap-nav`
       shortcode markup)
     - the mobile `order:2`/`order:1` swap for `.hdr__nav`/`.hdr__phone`
   Only `.hdr__pill`'s left padding at <1200px looked like it was still
   doing real work; it moved into chrome.css's existing 1199px media
   query instead (section 4). If any of the three above turn out to still
   be load-bearing on the homepage, they need a deliberate home in
   chrome.css, not a copy-paste back into this file. */

/* Hero */
.hero__title strong{ font-weight:700; }
.hero__pill{ flex:0 0 auto; }
.hero__pill .elementor-icon-box-wrapper{
  align-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill); padding:10px 18px;
}
.hero__pill .elementor-icon-box-title{ margin:0; white-space:nowrap; }
.hero__pill .elementor-icon i{ color:rgba(255,255,255,.9); }

/* Logo strip */
.logo-strip img{
  filter:grayscale(1); opacity:.55; max-height:80px; object-fit:contain;
  transition:filter .25s var(--ease), opacity .25s var(--ease);
}
.logo-strip img:hover{ filter:none; opacity:1; }
.logo-strip .swiper-wrapper{ transition-timing-function:linear !important; }

/* Industries: 3-up on desktop, 2 on tablet, 1 on mobile.
   The card image carries a bottom-up scrim in the design. */
.card--industry .card__img::after{ content:none; }
.card--industry .card__img{ position:relative; }
.card--industry .card__img::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.3), rgba(0,0,0,0));
}
/* Gradient-filled titles need a solid fallback where background-clip is
   unsupported, otherwise the text renders invisible. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .u-grad-text,
  .u-grad-text .elementor-heading-title,
  .u-grad-text .elementor-icon-box-title{
    color:var(--navy) !important; -webkit-text-fill-color:var(--navy) !important;
    background:none !important;
  }
}
.u-grad-text .elementor-icon-box-title,
.u-grad-text .elementor-button{
  background:var(--grad-heading);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* Industries footer line */
.industries__foot a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.industries__foot a:hover{ color:var(--crimson); }

/* Stats */
.stat__num .elementor-counter-number-wrapper{ justify-content:center; }
.trust-row .elementor-icon-list-items{ justify-content:center; }

/* Resources */
.card--resource .card__label .elementor-heading-title{
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.audit-bar{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
}

/* Process — step connector line */
.steps{ position:relative; }
.step{ position:relative; }
.step:not(:last-child)::before{
  content:""; position:absolute; left:19px; top:44px; bottom:-28px;
  width:1px; background:var(--border);
}
.step__badge{ flex:0 0 40px; width:40px; height:40px; }
.step__title .elementor-heading-title{ display:flex; align-items:baseline; gap:8px; }
.step__num{
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--crimson); flex:0 0 auto;
}

.mini-stat{ background:rgba(255,255,255,.06); }
.mini-stat__num .elementor-heading-title{ font-size:20px; font-weight:600; }
.mini-stat__lbl .elementor-heading-title{
  font-size:10px; line-height:1.3; color:rgba(255,255,255,.55);
}
.checklist-dark .elementor-icon-list-text{ color:rgba(255,255,255,.82) !important; }
.pull-quote{ padding-top:20px; border-top:1px solid rgba(255,255,255,.14); }
.pull-quote .quote p{ font-style:italic; color:rgba(255,255,255,.85); }

@media (min-width:1200px){
  .process__right{ position:sticky; top:100px; align-self:flex-start; }
}

/* Testimonials */
.tcar .elementor-testimonial__text::before{
  content:"★★★★★"; display:block; color:var(--gold);
  font-size:15px; letter-spacing:3px; margin-bottom:16px;
}
.tcar .elementor-testimonial__content{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-card); padding:40px;
}
.tab{ cursor:pointer; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); min-width:150px; }
.tab:hover{ border-color:#c9ced9; }
.tab.is-active{ border-color:var(--crimson); box-shadow:0 2px 10px rgba(168,30,50,.12); }

/* Contact */
.or-divider{
  display:flex; align-items:center; gap:12px;
  margin:20px 0; color:var(--muted); font-size:12px;
}
.or-divider::before, .or-divider::after{
  content:""; flex:1; height:1px; background:var(--border);
}
.scheduler-embed{ min-height:640px; }

/* Footer */
.footer__coltitle .elementor-heading-title{
  color:rgba(255,255,255,.45); text-transform:uppercase;
  letter-spacing:.1em; font-weight:600;
}
.footer__links .elementor-icon-list-text{ color:rgba(255,255,255,.75) !important; }
.footer__links .elementor-icon-list-item:hover .elementor-icon-list-text{ color:#fff !important; }
.footer__links .elementor-icon-list-icon{ display:none; }
.footer__rule .elementor-divider-separator{ border-top-color:rgba(255,255,255,.10) !important; }
.footer__bar a{ color:rgba(255,255,255,.6); text-decoration:none; }
.footer__bar a:hover{ color:#fff; }

/* ---------- 3b. NEW SECTIONS -------------------------------- */
.proof__num .elementor-heading-title{ line-height:1.1; }
.card--value,.card--solution,.card--step,.card--quote,.card--resource{
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card--value:hover,.card--solution:hover,.card--step:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-card-hover);
}
.card--solution .card__desc,.card--resource .card__desc{ flex-grow:1; }
.quote__text p{ line-height:1.6; }
.step__num .elementor-heading-title{ letter-spacing:.08em; }

/* Partnerships — the dark card uses the brand gradient as its ground. */
.card--partner-dark{ background:var(--grad-heading); }
.pill--gradient .elementor-heading-title{
  background:var(--grad-heading); color:#fff;
  padding:5px 12px; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:.1em;
}
.pill--onwhite .elementor-heading-title{
  background:rgba(255,255,255,.2); color:#fff;
  padding:5px 12px; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:.1em;
}
.btn-gradient .elementor-button{
  background:var(--grad-heading); color:#fff;
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
.cta-phone a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   .u-carousel block (mu-plugins/usapayments-alpha/assets/alpha.css)

   Drop-in replacement for your existing .u-carousel rules. Three things
   changed from the original:

   1. A --peek custom property is added to the flex-basis calc, so each
      card's width leaves a sliver of the next card showing instead of
      an exact 1/2/3/4-up fit. That's the "part of the next item visible"
      look from your screenshot/Swiper reference.
   2. cursor:grab / .is-dragging{cursor:grabbing} for the new mouse-drag
      JS in alpha-carousel.js — purely cosmetic, doesn't do anything
      without the matching JS.
   3. A --edge custom property (default 48px) drives padding-left (+ a
      matching scroll-padding-left) on the track, so card 1 sits inset
      from the left edge instead of flush against it. --edge is its own
      variable, separate from --carousel-gap, so changing it widens ONLY
      the space before card 1 — it has no effect on the gap between
      card 1/2/3/etc. To make the left space bigger or smaller, change
      the --edge:48px value below, inside the .u-carousel{...} block
      (and, if you want it different on mobile specifically, add
      --edge:Npx inside the 767px media query further down).

   Everything else (nav, dots, buttons, reduced-motion) is unchanged.
   ========================================================================== */

/* Beats the default overflow:hidden the u-w-* / grid utilities want, and the
   scroll container that fights with Elementor's own. alpha.js injects the
   arrows and dots. */
.u-carousel{
  --per-view:2;
  --carousel-gap:24px;
  --peek:88px;                       /* NEW: px of the next card left showing */
  --edge:5%;                       /* NEW: space before card 1 — change ONLY this to adjust it */
  flex-wrap:nowrap !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;              /* Firefox */
  -ms-overflow-style:none;           /* old Edge */
  padding-bottom:4px;                /* room for card shadows */
  padding-left:var(--edge);          /* NEW: inset before card 1 only — doesn't touch the gap between cards */
  scroll-padding-left:var(--edge);   /* keeps scroll-snap aligned past that inset */
  overscroll-behavior-x:contain;     /* don't trigger back-swipe */
  cursor:grab;                       /* NEW: hints the row is draggable */
}
.u-carousel::-webkit-scrollbar{ display:none; }

/* NEW: active mouse-drag state, toggled by alpha-carousel.js */
.u-carousel.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;             /* don't fight the drag with snapping */
  scroll-behavior:auto;
  user-select:none;                  /* no text selection mid-drag */
}

/* Beats the u-w-* utilities, which assume a wrapping grid. */
.u-carousel > *{
  scroll-snap-align:start;
  flex:0 0 calc(
    (100% - (var(--per-view) - 1) * var(--carousel-gap) - var(--peek)) / var(--per-view)
  ) !important;
  max-width:none !important;
}

/* Per-instance override — beats the default without touching it, so the
   values and testimonials carousels can differ. */
.u-carousel--1{ --per-view:1; --peek:56px; }
.u-carousel--2{ --per-view:2; --peek:88px; }
.u-carousel--3{ --per-view:3; --peek:32px; }
.u-carousel--4{ --per-view:4; --peek:24px; }

/* Tablet and below collapse regardless of the modifier: two of these cards
   side by side under 1200px leaves each too narrow to read comfortably. */
@media (max-width:1199px){
  .u-carousel,
  .u-carousel--2,
  .u-carousel--3,
  .u-carousel--4{ --per-view:2; --peek:32px; }
}
@media (max-width:767px){
  .u-carousel,
  .u-carousel--2,
  .u-carousel--3,
  .u-carousel--4{ --per-view:1; --carousel-gap:16px; --peek:48px; }
}

/* Quote cards are taller than the value cards; match their heights so the
   track doesn't jog as you scroll between pairs. */
.quotes.u-carousel > *{ height:auto; }
.card--quote{ display:flex; flex-direction:column; }
.card--quote .quote__role{ margin-top:auto; }

/* Controls — built by alpha.js, styled here. */
.u-carousel-nav{
  display:flex; align-items:center; justify-content:center;
  gap:16px; margin-top:28px; width:100%;
}
.u-carousel-btn{
  width:44px; height:44px; border-radius:50%;   /* 44px = min tap target */
  border:1px solid var(--border); background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--navy); flex:0 0 44px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease),
             opacity .2s var(--ease);
}
.u-carousel-btn:hover{
  background-color: #a81e32;
}
.u-carousel-btn:hover:not(:disabled){ border-color:var(--navy); background:var(--surface); }
.u-carousel-btn:disabled{ opacity:1; cursor:default; }
.u-carousel-btn svg{ width:16px; height:16px; }
.u-carousel-dots{ display:flex; gap:8px; align-items:center; }
.u-carousel-dot{
  width:8px; height:8px; border-radius:50%; padding:0;
  border:0; background:var(--border); cursor:pointer;
  transition:background-color .2s var(--ease), width .2s var(--ease);
}
.u-carousel-dot[aria-current="true"]{ width:24px; border-radius:4px; background:var(--crimson); }

@media (prefers-reduced-motion:reduce){
  .u-carousel{ scroll-behavior:auto; }
}

/* ---------- 4. FORMS ---------------------------------------- */
/* Honeypot: visually gone but still in the tab order for bots, hidden
   from real users and screen readers. Never use display:none — many
   bots skip those. Brief §15. */
.form--review .elementor-field-group:has(#form-field-company_url_confirm){
  position:absolute !important; left:-9999px; top:0;
  width:1px; height:1px; overflow:hidden;
}
.form--review .elementor-field-group{ margin-bottom:14px; }
.form--review .elementor-field-type-acceptance .elementor-field-label{
  text-transform:none; letter-spacing:0; font-weight:400;
  font-size:13px; line-height:1.5;
}

.elementor-field-group .elementor-field-label{
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.elementor-field-textual{
  height:48px; border:1px solid var(--border); border-radius:var(--r-btn);
  padding:0 14px; font-size:15px; color:var(--ink); background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea.elementor-field-textual{ height:auto; padding:12px 14px; min-height:110px; }
.elementor-field-textual::placeholder{ color:#9AA2B1; }
.elementor-field-textual:focus{
  border-color:var(--crimson);
  box-shadow:0 0 0 3px rgba(168,30,50,.12);
  outline:none;
}
.form--magnet .elementor-field-group{ margin-bottom:10px; }
.form--magnet .elementor-field-label{ position:absolute!important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.elementor-message.elementor-message-danger{ color:var(--crimson); font-size:13px; }

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

/* ---------- 6. A11Y ----------------------------------------- */
:where(a,button,input,select,textarea,.tab):focus-visible{
  outline:2px solid var(--crimson); outline-offset:2px; border-radius:4px;
}
.sec--dark :where(a,button):focus-visible{ outline-color:#fff; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- 7. RESPONSIVE ----------------------------------- */
@media (max-width:1199px){
  .process__right{ position:static; }   /* .hdr__pill padding moved to chrome.css */
}
@media (max-width:767px){
  .hero__pills .elementor-icon-box-title{ font-size:13px; }
  .hero__pill .elementor-icon-box-wrapper{ padding:8px 14px; }
  .step:not(:last-child)::before{ bottom:-24px; }
  .tcar .elementor-testimonial__content{ padding:24px; }
  .trust-row .elementor-icon-list-items{ row-gap:10px; }
  .footer__bar{ text-align:center; }
  .footer__bar .e-con-inner{ justify-content:center; }
  .scheduler-embed{ min-height:560px; }
  /* nothing may exceed the viewport */
  #hero,#industries,#resources,#process,#testimonials,#contact{ overflow-x:clip; }
}