/* ===========================================================================
   Elementor layer — section bands, typography, widgets.

   The PHP fallback renders Elementor-shaped markup inside `.elementor`, so
   every rule here serves BOTH the builder page and the fallback.

   Specificity: Elementor's kit styles headings, text, buttons and list icons
   at (0,3,0) and, inside the editor iframe, loads AFTER the theme.
   `body .elementor` reaches (0,3,1) — enough to beat the kit, not enough to
   beat the client's own per-widget style controls. Never !important here.
   =========================================================================== */

/* ---------------------------------------------------------- structure
   Sections and columns stay `relative`: the editor gives every section an
   absolutely-positioned .elementor-background-overlay, and releasing those
   stacks invisible sheets over the page so nothing is clickable. */
body .elementor .elementor-section{position:relative}
body .elementor .elementor-column{position:relative}
body .elementor .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:var(--container);padding-inline:var(--gutter);
}
body .elementor .elementor-section > .elementor-container{z-index:2}
body .elementor .elementor-widget-wrap{align-content:flex-start}
/* Never `width:auto` a column — they are flex items sized by .elementor-col-N. */
body .elementor .elementor-column > .elementor-widget-wrap{padding:0}
body .elementor .elementor-widget:not(:last-child){margin-bottom:1.1rem}
body .elementor .elementor-widget-text-editor > .elementor-widget-container{display:block}
/* Elementor 4 (the live site runs 4.2) prints most widgets WITHOUT the inner
   .elementor-widget-container; Elementor 3 prints it. Every measure below is
   written as `.widget > *`, which is that container in 3 and the content
   itself (<p>, <ul>…) in 4 — never as a max-width on the widget, which in a
   flex row would let the next widget float up beside it. */

/* --------------------------------------------------------------- bands */
body .elementor .sec{
  --h:var(--ink);--t:var(--ink-2);--eb:var(--cp-blue-700);
  padding-block:var(--section-y);
  background-color:var(--white);
  color:var(--t);
}
body .elementor .sec.sec-pillars,
body .elementor .sec.sec-how,
body .elementor .sec.sec-form,
body .elementor .sec.sec-who,
body .elementor .sec.sec-portal{background-color:var(--paper)}

/* night bands */
body .elementor .hero,
body .elementor .sec-stats,
body .elementor .sec.sec-videos,
body .elementor .sec.sec-verifone,
body .elementor .sec.sec-cta{
  --h:#fff;--t:var(--fg-d2);--eb:var(--cp-blue-300);
  color:var(--t);
}
body .elementor .sec.sec-videos{background-color:var(--navy-900)}
body .elementor .sec.sec-cta{background-color:var(--navy-950)}

/* The dot matrix + light, shared by every night band. ::before is the
   pattern, ::after the glow; main.js paints a live canvas between them.
   Both are pseudo-elements, never markup: the Elementor version of a band
   has no extra divs, and one definition serves both renders. */
body .elementor .hero,
body .elementor .sec.sec-videos,
body .elementor .sec.sec-verifone,
body .elementor .sec.sec-cta{isolation:isolate;overflow:hidden}
body .elementor .hero::before,
body .elementor .sec.sec-videos::before,
body .elementor .sec.sec-verifone::before,
body .elementor .sec.sec-cta::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--dots-d);background-size:var(--dots-size);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 70% 30%,#000 20%,transparent 75%);
}
body .elementor .hero::after,
body .elementor .sec.sec-videos::after,
body .elementor .sec.sec-verifone::after,
body .elementor .sec.sec-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 85% 10%,rgba(8,132,171,.42),transparent 70%),
    radial-gradient(50% 60% at 0% 100%,rgba(60,203,244,.14),transparent 70%);
}
.fx-dots{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.9}

/* ----------------------------------------------------------------- hero */
body .elementor .hero{
  background-color:var(--navy-900);
  padding-top:calc(var(--header-h) + var(--header-top) + clamp(52px, 7vw, 112px));
  padding-bottom:clamp(40px, 5vw, 72px);
}
body .elementor .hero > .elementor-container{align-items:center}
/* The home hero runs straight on into the stats rail. Its pattern and glows
   fade to the rail's own navy before the edge, so there is no seam across
   the page between the two. */
body .elementor .hero--home{padding-bottom:clamp(64px, 7vw, 112px)}
body .elementor .hero--home::after{
  background:
    linear-gradient(to bottom,transparent 58%,var(--navy-900) 100%),
    radial-gradient(60% 70% at 85% 10%,rgba(8,132,171,.42),transparent 70%),
    radial-gradient(50% 60% at 0% 60%,rgba(60,203,244,.12),transparent 70%);
}
body .elementor .hero-copy > .elementor-widget-wrap{padding-right:clamp(0px, 3vw, 48px)}
body .elementor .hero-title .elementor-heading-title{
  font-size:var(--fs-hero);font-weight:800;letter-spacing:-.04em;line-height:var(--lh-display);
  text-wrap:balance;
}
/* The home hero is sized from its own column, not the viewport: the headline
   breaks where the copy says (three lines) at every width the column has.
   Its longest line, "Free POS Upgrade.", measures 8.44em in Manrope 800
   at this tracking, so 11.2cqw fills 95% of the column. */
body .elementor .hero--home .hero-copy > .elementor-widget-wrap{container-type:inline-size}
body .elementor .hero--home .hero-title .elementor-heading-title{font-size:clamp(2.2rem, 11.2cqw, 5.6rem);text-wrap:wrap}
body .elementor .hero--sub .hero-title .elementor-heading-title,
body .elementor .hero--aff .hero-title .elementor-heading-title{font-size:var(--fs-h1-sub)}
body .elementor .elementor-widget.hero-title{margin-bottom:1.4rem}
body .elementor .elementor-widget.hero-lede{max-width:none;width:100%}
body .elementor .hero-lede > *{max-width:56ch}
body .elementor .hero-lede{font-size:var(--fs-lede);line-height:1.62;color:var(--fg-d2)}
body .elementor .elementor-widget.hero-lede{margin-bottom:2rem}
body .elementor .hero-lede p{margin:0}
body .elementor .hero-side > .elementor-widget-wrap{justify-content:center}

/* The sub-page hero is shorter and centred. */
body .elementor .hero--sub{padding-bottom:clamp(64px, 7vw, 104px);text-align:center}
body .elementor .hero--sub .elementor-widget-wrap{justify-content:center}
body .elementor .hero--sub .hero-lede > *{margin-inline:auto}
body .elementor .hero--sub .eyebrow .elementor-heading-title{justify-content:center}

/* Gradient highlight inside display headings (span.hl in the copy). */
body .elementor .elementor-heading-title .hl{
  background:linear-gradient(100deg,var(--glow-2) 0%,var(--glow) 35%,var(--cp-blue) 70%,var(--glow) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
body .elementor .sec:not(.sec-videos):not(.sec-verifone):not(.sec-cta) .elementor-heading-title .hl{
  background:linear-gradient(100deg,var(--cp-blue) 0%,var(--cp-blue-700) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ------------------------------------------------------------ typography */
body .elementor .elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:var(--lh-head);
  color:var(--h, var(--ink));margin:0;
}
/* The measure lives on the title itself: `ch` resolves against the element's
   own font, so on the 17px widget container 24ch was a 225px column and every
   h2 broke one word per line. */
body .elementor .sec-head .elementor-heading-title{font-size:var(--fs-h2);text-wrap:balance;max-width:20ch}
body .elementor .elementor-widget.sec-head{margin-bottom:1.25rem}
body .elementor .sec-videos .sec-head .elementor-heading-title,
body .elementor .sec-how .sec-head .elementor-heading-title,
body .elementor .sec-perks .sec-head .elementor-heading-title{max-width:26ch}
body .elementor .sub-head .elementor-heading-title{font-size:var(--fs-h3);letter-spacing:-.015em}
body .elementor .elementor-widget.sub-head{margin-top:.6rem}

body .elementor .elementor-widget-text-editor{color:var(--t, var(--ink-2));font-size:var(--fs-body);line-height:var(--lh-body)}
body .elementor .elementor-widget-text-editor p:last-child{margin-bottom:0}
body .elementor .elementor-widget-text-editor a{color:var(--cp-blue-700)}
body .elementor .sec-lede{font-size:var(--fs-lede);line-height:1.6}
body .elementor .elementor-widget.sec-lede{max-width:none;width:100%}
body .elementor .sec-lede > *{max-width:60ch}
body .elementor .prose > *{max-width:62ch}
body .elementor .fine{font-size:.88rem;color:var(--muted)}
body .elementor .hero .fine,
body .elementor .sec-verifone .fine,
body .elementor .sec-cta .fine{color:var(--fg-d3)}
body .elementor .fine p{margin:0}

/* Eyebrow: a label, not a heading level (tag div). */
body .elementor .eyebrow .elementor-heading-title{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-meta);
  letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--eb, var(--cp-blue-700));
}
body .elementor .eyebrow .elementor-heading-title::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
body .elementor .elementor-widget.eyebrow{margin-bottom:1.1rem}

/* --------------------------------------------------------------- buttons */
body .elementor .elementor-widget.btnw{width:auto;margin-right:.7rem}
body .elementor .btnw .elementor-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.95em 1.55em;border-radius:var(--pill);
  font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.005em;line-height:1.1;
  text-decoration:none;overflow:hidden;isolation:isolate;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,color .2s,border-color .2s;
}
body .elementor .btnw .elementor-button:hover{transform:translateY(-2px)}
body .elementor .btnw .elementor-button-content-wrapper{display:flex;align-items:center;gap:.6em}
body .elementor .btnw .elementor-button-content-wrapper::after{
  content:"";width:1.05em;height:1.05em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease);
}
body .elementor .btnw .elementor-button:hover .elementor-button-content-wrapper::after{transform:translateX(3px)}
body .elementor .btnw-primary .elementor-button{
  background-color:var(--cp-blue-btn);color:#fff;border:1.5px solid transparent;
  box-shadow:0 12px 34px -12px rgba(8,132,171,.85),inset 0 1px 0 rgba(255,255,255,.22);
}
body .elementor .btnw-primary .elementor-button::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.3) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
body .elementor .btnw-primary .elementor-button:hover{background-color:var(--cp-blue-600);color:#fff}
body .elementor .btnw-primary .elementor-button:hover::after{transform:translateX(120%)}
body .elementor .btnw-ghost .elementor-button{
  background-color:transparent;color:var(--h, var(--ink));border:1.5px solid color-mix(in srgb, var(--h, var(--ink)) 26%, transparent);
}
body .elementor .btnw-ghost .elementor-button:hover{background-color:color-mix(in srgb, var(--h, var(--ink)) 8%, transparent);color:var(--h, var(--ink));border-color:var(--h, var(--ink))}
body .elementor .btnw-ghost .elementor-button-content-wrapper::after{display:none}

/* ------------------------------------------------------------ icon lists
   The kit colours the <i> directly, and newer Elementor renders the icon as
   an inline <svg> instead — so the theme draws its own mark on the span and
   hides whichever child Elementor emitted. */
body .elementor .elementor-icon-list-items{list-style:none;margin:0;padding:0}
body .elementor .check-list .elementor-icon-list-items{display:grid;gap:.85rem}
body .elementor .check-list .elementor-icon-list-item{display:flex;align-items:flex-start;gap:.8rem;font-size:1.02rem;line-height:1.5}
body .elementor .check-list .elementor-icon-list-icon,
body .elementor .hero-chips .elementor-icon-list-icon{
  position:relative;flex:none;display:inline-grid;place-items:center;
  width:26px;height:26px;border-radius:50%;margin-top:-1px;
  background:var(--cp-blue-50);color:var(--cp-blue-700);
}
body .elementor .check-list .elementor-icon-list-icon > *,
body .elementor .hero-chips .elementor-icon-list-icon > *,
body .elementor .chips .elementor-icon-list-icon > *{display:none}
body .elementor .check-list .elementor-icon-list-icon::before,
body .elementor .hero-chips .elementor-icon-list-icon::before{
  content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
body .elementor .check-list .elementor-icon-list-text{color:var(--h, var(--ink));font-weight:550}
body .elementor .check-list--light .elementor-icon-list-icon{background:rgba(60,203,244,.16);color:var(--glow-2)}

/* hero chips: glass pills in a row */
body .elementor .elementor-widget.hero-chips{margin-top:1.6rem}
body .elementor .hero-chips .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:.6rem}
body .elementor .hero-chips .elementor-icon-list-item{
  display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem .42rem .45rem;border-radius:var(--pill);
  background:rgba(255,255,255,.06);border:1px solid var(--line-d);
  font-weight:600;font-size:.92rem;color:var(--fg-d);
}
body .elementor .hero-chips .elementor-icon-list-icon{width:22px;height:22px;margin:0;background:rgba(60,203,244,.18);color:var(--glow-2)}
body .elementor .hero-chips .elementor-icon-list-icon::before{width:12px;height:12px}
body .elementor .hero-chips .elementor-icon-list-text{color:var(--fg-d)}

/* chips (who it's for) */
body .elementor .chips .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:.75rem}
body .elementor .chips .elementor-icon-list-item{
  display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.25rem;border-radius:var(--pill);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink);
}
body .elementor .chips .elementor-icon-list-icon{width:10px;height:10px;border-radius:50%;background:var(--cp-blue);box-shadow:0 0 0 4px var(--cp-blue-50)}
body .elementor .chips .elementor-icon-list-text{color:var(--ink)}

/* --------------------------------------------------------------- toggles */
body .elementor .faq-list .elementor-toggle{display:grid;gap:.75rem}
body .elementor .faq-list .elementor-toggle-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
body .elementor .faq-list .elementor-toggle-item:hover{border-color:var(--cp-blue-200)}
body .elementor .faq-list .elementor-toggle-item:has(.elementor-active){border-color:var(--cp-blue-200);box-shadow:var(--shadow-1)}
body .elementor .faq-list .elementor-tab-title{
  position:relative;display:flex;align-items:center;gap:1rem;
  padding:1.15rem 3.75rem 1.15rem 1.35rem;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.35;color:var(--ink);
}
body .elementor .faq-list .elementor-tab-title .elementor-toggle-title,
body .elementor .faq-list .elementor-tab-title a{color:var(--ink);text-decoration:none}
body .elementor .faq-list .elementor-toggle-icon{display:none}
body .elementor .faq-list .elementor-tab-title::after{
  content:"";position:absolute;right:1.1rem;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:var(--cp-blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23055B77' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .3s var(--ease),background-color .25s;
}
body .elementor .faq-list .elementor-tab-title.elementor-active::after{transform:rotate(135deg);background-color:var(--cp-blue-200)}
body .elementor .faq-list .elementor-tab-content{
  padding:0 1.35rem 1.25rem;border:0;color:var(--ink-2);font-size:1rem;line-height:1.65;
}
body .elementor .faq-list .elementor-tab-content p{margin:0}
/* The fallback template has no Elementor JS; main.js opens and closes these.
   Hidden only once JS is live, so a broken script never hides an answer. */
html.js .cmdr-page .elementor-toggle .elementor-tab-content{display:none}
html.js .cmdr-page .elementor-toggle .elementor-tab-content.elementor-active{display:block}

/* ------------------------------------------------------- split sections
   Elementor stacks columns below 768 on its own. These bands stack at 1024
   too — a two-column hero at 800px is two cramped columns, so the theme and
   the builder agree on the same breakpoint. */
@media (min-width:1025px){
  body .elementor .intro-copy > .elementor-widget-wrap,
  body .elementor .faq-aside > .elementor-widget-wrap,
  body .elementor .apply-aside > .elementor-widget-wrap{padding-right:clamp(24px, 4vw, 72px)}
  body .elementor .compare-visual > .elementor-widget-wrap,
  body .elementor .verifone-visual > .elementor-widget-wrap{padding-right:clamp(24px, 4.5vw, 80px)}
  body .elementor .form-aside > .elementor-widget-wrap{padding-left:clamp(20px, 2.5vw, 40px)}
  body .elementor .sec-intro > .elementor-container,
  body .elementor .sec-compare > .elementor-container,
  body .elementor .sec-verifone > .elementor-container{align-items:center}
  body .elementor .faq-aside > .elementor-widget-wrap{position:sticky;top:calc(var(--header-h) + var(--header-top) + 32px)}
}
@media (max-width:1024px){
  body .elementor .hero--home > .elementor-container,
  body .elementor .hero--aff > .elementor-container,
  body .elementor .sec-intro > .elementor-container,
  body .elementor .sec-compare > .elementor-container,
  body .elementor .sec-verifone > .elementor-container,
  body .elementor .sec-faq > .elementor-container,
  body .elementor .sec-form > .elementor-container,
  body .elementor .sec-apply > .elementor-container{flex-wrap:wrap}
  body .elementor .hero--home .elementor-column,
  body .elementor .hero--aff .elementor-column,
  body .elementor .sec-intro .elementor-column,
  body .elementor .sec-compare .elementor-column,
  body .elementor .sec-verifone .elementor-column,
  body .elementor .sec-faq .elementor-column,
  body .elementor .sec-form .elementor-column,
  body .elementor .sec-apply .elementor-column{width:100%}
  body .elementor .hero-side > .elementor-widget-wrap{margin-top:clamp(40px, 6vw, 64px)}
  body .elementor .hero-copy > .elementor-widget-wrap{padding-right:0}
  body .elementor .intro-copy,
  body .elementor .faq-aside,
  body .elementor .apply-aside,
  body .elementor .form-main{margin-bottom:clamp(36px, 6vw, 56px)}
  body .elementor .compare-visual,
  body .elementor .verifone-visual{margin-bottom:clamp(40px, 6vw, 64px)}
}

/* ------------------------------------------------------------ specific */

/* stats sit on the hero's night, in a glass rail */
body .elementor .sec-stats{background-color:var(--navy-900);padding-top:0;padding-bottom:clamp(40px, 4.4vw, 64px)}

/* ticker: a lit band, tilted, crossing from night to day */
body .elementor .sec-ticker{
  position:relative;z-index:3;background:linear-gradient(to bottom,var(--navy-900) 50%,var(--paper) 50%);
  overflow:hidden;padding-block:clamp(10px, 1.6vw, 22px);
}

/* the three promises get room to breathe: more air above and below the band,
   and a wider gutter between the cards (see .pillars) */
body .elementor .sec.sec-pillars{padding-top:clamp(88px, 9.5vw, 150px);padding-bottom:clamp(96px, 10vw, 160px)}
body .elementor .sec-pillars .sec-head,
body .elementor .sec-videos .sec-head,
body .elementor .sec-how .sec-head,
body .elementor .sec-perks .sec-head,
body .elementor .sec-who .sec-head{margin-bottom:clamp(2rem, 3.5vw, 3.25rem)}
body .elementor .sec-videos .eyebrow .elementor-heading-title,
body .elementor .sec-videos .sec-head .elementor-heading-title{justify-content:center;text-align:center;margin-inline:auto}
body .elementor .sec-videos .sec-lede > *{margin-inline:auto;text-align:center}
body .elementor .sec-videos .elementor-widget.sec-head{margin-bottom:1rem}
body .elementor .sec-videos .elementor-widget.sec-lede{margin-bottom:clamp(2rem, 3.5vw, 3rem)}

body .elementor .elementor-widget.how-lede{columns:3 18rem;column-gap:clamp(24px, 3vw, 48px)}
body .elementor .how-lede > *{max-width:none}
body .elementor .how-lede{font-size:1.02rem;line-height:1.65}
body .elementor .elementor-widget.how-lede{margin-bottom:clamp(2.5rem, 4vw, 3.75rem)}
body .elementor .how-lede p{break-inside:avoid}

body .elementor .sec.sec-verifone{
  background-color:var(--navy-850);
  background-image:linear-gradient(135deg,#065C7A 0%,var(--navy-850) 55%,var(--navy-900) 100%);
}
body .elementor .compare-tail{font-weight:600;color:var(--ink)}
body .elementor .elementor-widget.compare-tail{margin-top:.5rem}

body .elementor .sec.sec-faq--compact{padding-top:0}

/* CTA: centred, enormous, lit */
body .elementor .sec.sec-cta{text-align:center;padding-block:clamp(96px, 11vw, 168px)}
body .elementor .sec-cta .elementor-widget-wrap{justify-content:center}
body .elementor .sec-cta .eyebrow .elementor-heading-title{justify-content:center}
body .elementor .cta-head .elementor-heading-title{font-size:clamp(2.4rem, 1.2rem + 4.2vw, 5rem);letter-spacing:-.045em;line-height:1;max-width:14ch;margin-inline:auto}
body .elementor .cta-lede > *,
body .elementor .cta-fine > *{margin-inline:auto}
body .elementor .elementor-widget.cta-lede{margin-bottom:2.2rem}
body .elementor .elementor-widget.cta-fine{margin-top:1.75rem}
body .elementor .cta-fine > *{max-width:62ch}
body .elementor .sec-cta .elementor-widget.btnw{margin-right:0}
body .elementor .sec-cta .btnw .elementor-button{min-height:60px;padding:1.1em 2em;font-size:1.08rem}

/* forms */
body .elementor .form-card .plugmatrix-form-embed,
body .elementor .apply-form .cmdr-form{max-width:none}
body .elementor .elementor-widget.form-card{
  background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:var(--shadow-2);padding:clamp(18px, 3vw, 44px);
}
body .elementor .form-aside > .elementor-widget-wrap{
  background:var(--navy-900);color:var(--fg-d2);border-radius:var(--r-lg);
  padding:clamp(24px, 2.6vw, 36px);
  background-image:radial-gradient(80% 60% at 100% 0%,rgba(8,132,171,.35),transparent 70%);
  --h:#fff;--t:var(--fg-d2);
  align-self:flex-start;
}
body .elementor .aside-head .elementor-heading-title{font-size:1.15rem;letter-spacing:-.01em}
body .elementor .form-aside .elementor-widget.aside-head:not(:first-child){margin-top:1rem;padding-top:1.5rem;border-top:1px solid var(--line-d)}
body .elementor .form-aside .check-list .elementor-icon-list-icon{background:rgba(60,203,244,.16);color:var(--glow-2)}
body .elementor .form-aside .check-list .elementor-icon-list-text{color:var(--fg-d);font-weight:500;font-size:.97rem}
body .elementor .form-aside .fine{color:var(--fg-d3)}
body .elementor .sec.sec-form{padding-top:clamp(40px, 5vw, 72px)}
body .elementor .sec-form > .elementor-container{margin-top:clamp(-120px, -8vw, -60px)}

/* the affiliate hero preview needs room on the right */
body .elementor .hero--aff{padding-bottom:clamp(72px, 8vw, 120px)}
/* the eligibility hero leaves room for the form card that overlaps it */
body .elementor .hero--elig{padding-bottom:clamp(140px, 13vw, 200px)}

/* Semantic hooks with no visual rule of their own: they give the client a
   stable handle in Elementor, and page-specific rules a name to reach for. */
body .elementor .hero-stage,
body .elementor .hero-preview,
body .elementor .intro-prose,
body .elementor .intro-visual,
body .elementor .compare-copy,
body .elementor .verifone-copy,
body .elementor .sec-how--aff,
body .elementor .apply-main{position:relative}

/* apply */
body .elementor .sec.sec-apply{background:linear-gradient(180deg,var(--white),var(--paper))}
body .elementor .sec.sec-faq--aff{background:var(--paper)}

body .elementor .sec.sec-portal{padding-block:0}