/*
  SurgePays Retail (surgepays.io)
  site.css: the one stylesheet for every page.

  Source: the approved HTML mockup. Every rule and every value is the same as the mockup, in the same order,
  so the cascade is unchanged. What changed:
    1. Laid out one declaration per line, with numbered sections.
    2. Review tooling removed: review bar, feedback button and dialog, toast, "Pause motion".
    3. The inline style attributes of the mockup markup are classes now (section 20).
    4. Icon motion is switched off under prefers-reduced-motion, as the mockup notes asked (end of section 08).
    5. The [hidden] rule moved here from a separate style tag in the page head (section 02).
    6. 2026-10-15 update: the rules from the page head of the new mockup are at the start of section 02.
       The mockup scoped two rules to its page wrappers (#page-home .hero-grid, #page-partners .hero-grid and
       #page-partners .hero h1). There are no page wrappers here. The only heroes are the Home hero (.hero) and the
       Partners hero (.hero.partners), so the rules are written for those: .hero .hero-grid and .hero.partners h1.
       Same elements, and no other rule competes with them from 861px up, so the result is the same.
       The [data-sec="Connect with our team"] rules use the class .team-band on that section.

  Design note from the mockup:
    Layout: 12 column grid on an off-white base. White cards, a plain mint-to-blue wash behind product art, and the brand icons carry the motion.

  Fonts: Instrument Sans 700 (headings, buttons, labels in the heading font) and Geist 400 to 700 (body).
  Loaded from Google Fonts in the page head. See 05-assets/fonts.md for a self-hosted option.

  Breakpoints. All are max-width unless noted.
    1040px          plan grid 5 to 3 columns, news 4 to 2, footer 5 to 3, pillars 4 to 2, stats 4 to 2
     860px          mobile menu. Hero, feature card, band, form, segments, portal head, earn list, sales card and FAQ go to one column
     701px to 860px both heroes keep two columns (min-width and max-width together)
     861px and up   (min-width) wider text column in the Home and Partners heroes, smaller Partners hero headline
     700px          phone layout: audience chips on one row, Partners hero art hidden, icon beside text in pillars and steps
     620px          smaller logo and header, one column feature list and form fields, plan grid 2 columns, news cards go horizontal, footer 2 columns
     340px          plan grid 1 column
  Container: max-width 1168px (--max), side gutter clamp(16px,4vw,32px) (--gut), section padding clamp(56px,8vw,104px) (--sec).

  Contents
    01  Tokens         Design tokens
    02  Base           Base
    03  Layout         Layout and text helpers
    04  Components     Buttons and links
    05  Components     Tags and icon tiles
    06  Components     Header and navigation
    07  Components     Wash background
    08  Components     Icon motion, floating chips, panel icon
    09  Page sections  Hero (Home and Partners)
    10  Page sections  Why SurgePays image strip (Home)
    11  Page sections  Products (Home)
    12  Page sections  News cards (not used)
    13  Page sections  Closing band (Home and Partners)
    14  Page sections  Partners: split, benefits, direct
    15  Page sections  Let's Connect: intro, lead form, success state
    16  Components     Footer
    17  Page sections  Partners: stats, segments, pillars, portal, earn, steps, sales card, FAQ
    18  Responsive     Responsive rules, shared
    19  Responsive     Responsive rules, phone layout and tablets
    20  Utilities      Classes that replace the inline styles of the mockup
*/

/* ============================================================================
   01. Design tokens
   Colors, gradients, fonts, type scale, container, radii and shadows as custom properties.
   The same values are in 03-tokens/tokens.css and 03-tokens/tokens.json.
   ============================================================================ */
:root {
  color-scheme: light;
  /* Retail palette */
  --bg: #FCFCFC;
  --white: #FFFFFF;
  --blue: #0075C9;
  --sky: #41ABE1;
  --mint: #E6F4F2;
  --yellow: #EEE7A7;
  --ink: #000C14;
  --text: #3C4245;
  --muted: #6F7476;
  --soft: #A7B0B4;
  --tint: #EDF6FC;
  --tint-2: #DCEEFA;
  --line: #DDE6EB;
  --blue-deep: #005A9C;
  --ic-1: #80EAFF;
  --ic-2: #4DB5FF;
  --ic-3: #3377FF;
  --grad: linear-gradient(90deg,#0075C9 0%,#0075C9 20%,#41ABE1 125%);
  --grad-text: linear-gradient(90deg,#0075C9 0%,#41ABE1 100%);
  --grad-soft: linear-gradient(180deg,rgba(65,171,225,.14) 0%,rgba(230,244,242,.55) 100%);
  /* Type */
  --head: "Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --body: "Geist","Helvetica Neue",Arial,sans-serif;
  --h1: clamp(2.5rem,5.2vw,4rem);
  --h2: clamp(1.875rem,3.6vw,3rem);
  --h3: clamp(1.5rem,2.4vw,2.25rem);
  --h4: 1.75rem;
  --h5: 1.25rem;
  /* Layout */
  --max: 1168px;
  --gut: clamp(16px,4vw,32px);
  --sec: clamp(56px,8vw,104px);
  --r-xl: 28px;
  --r-card: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-xs: 7px;
  --shadow: 0 1px 2px rgba(0,12,20,.05),0 10px 30px rgba(0,60,110,.08);
  --shadow-lg: 0 2px 4px rgba(0,12,20,.05),0 24px 60px rgba(0,60,110,.14);
}

/* ============================================================================
   02. Base
   Box sizing, element defaults, focus ring, headings.
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The hidden attribute must win over the display rules below (plan feature lists, Read more panels, form success state, subscribe message).
   In the mockup this rule sat in a separate style tag in the page head. */
[hidden] {
  display: none !important;
}

/* From the page head of the 2026-10-15 mockup. These rules sat in a separate style tag before the main stylesheet,
   so they come first here too and the cascade is unchanged.
   text-wrap: pretty keeps a single word off the last line of paragraphs, list items and labels.
   .team-band is the "Connect with our team" band on Home. The mockup targeted it with [data-sec="Connect with our team"],
   a label used by its review tool. The class has the same specificity. */
p,
li,
dd,
dt,
blockquote,
summary,
figcaption,
label {
  text-wrap: pretty;
}

.cards {
  align-items: start;
}

.team-band .band {
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
}

.team-band .band .panel {
  padding-block: clamp(24px,3vw,40px);
}

.team-band .band .photo {
  align-self: center;
  min-height: 0;
  aspect-ratio: 3/2;
}

@media (max-width:860px) {
  .team-band .band {
    grid-template-columns: minmax(0,1fr);
  }

  .team-band .band .photo {
    min-height: 0;
    aspect-ratio: 16/9;
  }
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--head);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.015em;
  line-height: 1.08;
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h5);
  letter-spacing: -.01em;
  line-height: 1.25;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================================
   03. Layout: Layout and text helpers
   Page container (.wrap), section spacing (.sec), section heading block (.sec-head),
   gradient text (.grad), lead paragraph (.lead), eyebrow label (.eyebrow).
   ============================================================================ */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: .08em;
}

.lead {
  font-size: clamp(1.0625rem,1.5vw,1.25rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 34em;
}

.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}

.sec {
  padding-block: var(--sec);
}

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(28px,4vw,48px);
  max-width: 46rem;
}

.sec-head.row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
  gap: 24px;
  flex-wrap: wrap;
}

/* ============================================================================
   04. Components: Buttons and links
   Retail spec: gradient fill, bold label, radius 14 on the large size.
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  color: #FFFFFF;
  background: var(--grad);
  border: 0;
  border-radius: var(--r-sm);
  padding: 14px 22px;
  text-decoration: none;
  transition: transform .15s ease,box-shadow .15s ease,filter .15s ease;
  box-shadow: 0 6px 16px rgba(0,117,201,.22);
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,117,201,.28);
}

.btn:active {
  transform: none;
  filter: brightness(.96);
  box-shadow: none;
}

.btn.xl {
  font-size: 1.1875rem;
  padding: 20px 35px;
  border-radius: var(--r-md);
}

.btn.sm {
  font-size: .9375rem;
  padding: 11px 18px;
  border-radius: var(--r-xs);
}

.btn.soft {
  background: var(--mint);
  color: var(--blue-deep);
  box-shadow: none;
}

.btn.soft:hover {
  background: #D6EEEB;
  filter: none;
  box-shadow: none;
}

.btn.line {
  background: var(--white);
  color: var(--blue-deep);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.btn.line:hover {
  box-shadow: inset 0 0 0 1.5px var(--sky);
  filter: none;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--head);
  font-weight: 700;
  color: var(--blue-deep);
  font-size: 1.0625rem;
}

.link::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.link:hover {
  text-decoration: none;
}

.link:hover::after {
  transform: translateX(3px) rotate(45deg);
}

.link.ext::after {
  content: "\2197";
  border: 0;
  width: auto;
  height: auto;
  transform: none;
  font-family: var(--body);
  font-weight: 600;
}

.link.ext:hover::after {
  transform: translate(2px,-2px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

/* ============================================================================
   05. Components: Tags and icon tiles
   ============================================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  background: var(--tint-2);
  border-radius: 6px;
  padding: 6px 9px;
}

.tag.y {
  background: var(--yellow);
}

.ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--tint);
}

.ico svg {
  width: 30px;
  height: 30px;
}

.ico.sm {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: transparent;
}

.ico.sm svg {
  width: 28px;
  height: 28px;
}

/* ============================================================================
   06. Components: Header and navigation
   Sticky header. The script adds .scrolled after 8px of scroll and .open on the nav for the mobile menu.
   ============================================================================ */
.hdr {
  position: sticky;
  top: env(safe-area-inset-top,0px);
  z-index: 30;
  background: rgba(252,252,252,.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease,box-shadow .2s ease;
}

.hdr.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(0,60,110,.06);
}

.hdr .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo img {
  width: 168px;
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 16px;
}

.nav-links a {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--ink);
  background: var(--tint);
  text-decoration: none;
}

.nav-links a[aria-current="page"] {
  color: var(--blue-deep);
  background: var(--tint);
  font-weight: 600;
}

.nav-links a.out::after {
  content: "\2197";
  display: inline-block;
  margin-left: 5px;
  font-size: .85em;
  color: var(--muted);
}

/* Header sign-in form (Log In, integration point C). Hidden until site.js opens it.
   While it is open the nav has .login-open and the Log In and Let's Connect buttons step aside, as on the live site. */
.nav.login-open > #login,
.nav.login-open > .wp-block-buttons {
  display: none;
}

.login-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tint-2);
  border-radius: var(--r-md);
  padding: 8px 12px;
}

.login-form input {
  width: 128px;
  padding: 9px 12px;
  font-family: var(--body);
  font-size: .875rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #B8D9F0;
  border-radius: 9px;
}

.login-form input:focus {
  outline: none;
  border-color: var(--blue);
}

.login-form input[aria-invalid="true"] {
  border-color: #E53E3E;
}

.login-form .btn {
  padding: 10px 20px;
  font-size: .875rem;
  background: var(--blue);
  border-radius: 9px;
  box-shadow: none;
}

.login-form .btn:disabled,
#partner-form .btn:disabled,
#sub-form .btn:disabled {
  opacity: .6;
  cursor: wait;
}

.login-close {
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 1.25rem;
  line-height: 1;
  color: #888888;
  cursor: pointer;
}

.login-close:hover {
  color: var(--ink);
}

.login-msg {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: 320px;
  margin: 0;
  padding: 10px 14px;
  font-size: .875rem;
  line-height: 1.4;
  color: #B91C1C;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
}

.login-msg.ok {
  color: #065F46;
  background: #D1FAE5;
  border-color: #34D399;
}

/* Tablet widths: the links make room for the open form. At 860px and below the form sits in the menu (section 18). */
@media (min-width:861px) and (max-width:1040px) {
  .nav.login-open .nav-links {
    display: none;
  }
}

.menu-btn {
  display: none;
  margin-left: auto;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line);
  border: 0;
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-family: var(--head);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink);
}

/* ============================================================================
   07. Components: Wash background
   The plain mint-to-blue ground behind product art and call-to-action panels.
   ============================================================================ */
.wash {
  position: relative;
  background: linear-gradient(160deg,var(--mint) 0%,var(--tint) 58%,var(--tint-2) 100%);
}

/* ============================================================================
   08. Components: Icon motion, floating chips, panel icon
   CSS only, no script. Every six seconds each brand icon takes itself apart and builds back up,
   and hovering replays the build. Icons rest complete, so a still frame shows them as drawn.
   ============================================================================ */
.ic {
  overflow: visible;
  --p: 6s;
}

li:nth-child(4n+2),
.seg:nth-child(2) {
  --w: .35s;
}

li:nth-child(4n+3),
.seg:nth-child(3) {
  --w: .7s;
}

li:nth-child(4n+4) {
  --w: 1.05s;
}

.d1 {
  --i: 1;
}

.d2 {
  --i: 2;
}

.d3 {
  --i: 3;
}

.d4 {
  --i: 4;
}

.d5 {
  --i: 5;
}

.d6 {
  --i: 6;
}

.d7 {
  --i: 7;
}

.ic,
.ic path,
.ic g {
  --t: calc(var(--p)*-.66 + var(--w,0s) + var(--i,0)*80ms);
}

.ic path,
.ic g {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ic .g {
  transform-origin: 50% 100%;
}

.ic .bub {
  transform-origin: 0 100%;
}

.ic .spin {
  transform-box: view-box;
  transform-origin: 53.33px 46.67px;
}

.ic {
  animation: ic-in var(--p) ease-in-out var(--t) infinite;
}

.ic .g {
  animation: ic-grow var(--p) ease-in var(--t) infinite;
}

.ic .pop,
.ic .bub {
  animation: ic-pop var(--p) ease-in var(--t) infinite;
}

.ic .up {
  animation: ic-up var(--p) ease-in var(--t) infinite;
}

.ic .dn {
  animation: ic-dn var(--p) ease-in var(--t) infinite;
}

.ic .fade {
  animation: ic-fade var(--p) ease-in-out var(--t) infinite;
}

.ic .w {
  animation: ic-wipe var(--p) ease-in-out var(--t) infinite;
}

.ic .spin {
  animation: ic-spin var(--p) ease-in var(--t) infinite;
}

.ic .out {
  animation: ic-out var(--p) ease-in var(--t) infinite;
}

.ic .pen {
  animation: ic-pen var(--p) ease-in-out var(--t) infinite;
}

.ic-deal>g>g:first-child {
  animation: ic-shake var(--p) ease-in-out var(--t) infinite;
}

.art>.ic {
  animation: ic-float 5s ease-in-out infinite;
}

@keyframes ic-in {
  0%, 80%, 96%, 100% {
    transform: scale(1);
  }
  86% {
    transform: scale(.86);
    animation-timing-function: cubic-bezier(.3,1.5,.5,1);
  }
}

@keyframes ic-grow {
  0%, 80%, 96%, 100% {
    transform: scaleY(1);
  }
  86% {
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(.2,.9,.3,1.2);
  }
}

@keyframes ic-pop {
  0%, 80%, 96%, 100% {
    transform: scale(1);
  }
  86% {
    transform: scale(0);
    animation-timing-function: cubic-bezier(.3,1.6,.5,1);
  }
}

@keyframes ic-up {
  0%, 80%, 96%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  86% {
    transform: translateY(9px);
    opacity: 0;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
  }
}

@keyframes ic-dn {
  0%, 80%, 96%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  86% {
    transform: translateY(-9px);
    opacity: 0;
    animation-timing-function: cubic-bezier(.3,1.5,.5,1);
  }
}

@keyframes ic-fade {
  0%, 80%, 94%, 100% {
    opacity: 1;
  }
  86% {
    opacity: 0;
  }
}

@keyframes ic-wipe {
  0%, 80%, 96%, 100% {
    clip-path: inset(-2px -2px -2px -2px);
  }
  86% {
    clip-path: inset(-2px 100% -2px -2px);
  }
}

@keyframes ic-spin {
  0%, 80%, 97%, 100% {
    transform: rotate(0deg);
  }
  86% {
    transform: rotate(-150deg);
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
  }
}

@keyframes ic-out {
  0%, 80%, 96%, 100% {
    transform: translate(0,0);
  }
  86% {
    transform: translate(-3.3px,3.3px);
    animation-timing-function: cubic-bezier(.3,1.6,.5,1);
  }
}

@keyframes ic-pen {
  0%, 80%, 100% {
    transform: translate(0,0);
  }
  85% {
    transform: translate(5px,-5px);
  }
  91% {
    transform: translate(0,0);
  }
  94% {
    transform: translate(2px,0);
  }
  97% {
    transform: translate(-1px,0);
  }
}

@keyframes ic-shake {
  0%, 80%, 96%, 100% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-2.5px);
  }
  91% {
    transform: translateY(1.5px);
  }
}

@keyframes ic-float {
  50% {
    transform: translateY(-6px);
  }
}

@keyframes ic-grow1 {
  from {
    transform: scaleY(0);
  }
}

@keyframes ic-pop1 {
  from {
    transform: scale(0);
  }
}

@keyframes ic-up1 {
  from {
    transform: translateY(9px);
    opacity: 0;
  }
}

@keyframes ic-dn1 {
  from {
    transform: translateY(-9px);
    opacity: 0;
  }
}

@keyframes ic-fade1 {
  from {
    opacity: 0;
  }
}

@keyframes ic-wipe1 {
  from {
    clip-path: inset(-2px 100% -2px -2px);
  }
  to {
    clip-path: inset(-2px -2px -2px -2px);
  }
}

@keyframes ic-spin1 {
  from {
    transform: rotate(-150deg);
  }
}

@keyframes ic-out1 {
  from {
    transform: translate(-3.3px,3.3px);
  }
}

@media (hover:hover) {
  :is(li,.seg,.art,.chip,.panel):hover .ic .g {
    animation: ic-grow1 .5s cubic-bezier(.2,.9,.3,1.2) calc(var(--i,0)*80ms) backwards;
  }

  :is(li,.seg,.art,.chip,.panel):hover .ic :is(.pop,.bub) {
    animation: ic-pop1 .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0)*80ms) backwards;
  }

  :is(li,.seg,.art,.chip,.panel):hover .ic .up {
    animation: ic-up1 .55s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*80ms) backwards;
  }

  :is(li,.seg,.art,.chip,.panel):hover .ic .dn {
    animation: ic-dn1 .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i,0)*80ms) backwards;
  }

  :is(li,.seg,.art,.chip,.panel):hover .ic .fade {
    animation: ic-fade1 .35s ease-out calc(var(--i,0)*80ms) backwards;
  }

  :is(li,.seg,.art,.chip,.panel):hover .ic .w {
    animation: ic-wipe1 .55s ease-out calc(var(--i,0)*80ms) backwards;
  }

  :is(li,.seg,.art,.chip,.panel):hover .ic .spin {
    animation: ic-spin1 .7s cubic-bezier(.2,.8,.2,1) backwards;
  }

  :is(li,.seg,.art,.chip,.panel):hover .ic .out {
    animation: ic-out1 .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0)*80ms) backwards;
  }
}

.chip {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(50px,5.6vw,66px);
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  animation: ic-float 6s ease-in-out infinite;
}

.chip svg {
  width: 62%;
  height: 62%;
}

.chip.a {
  left: -14px;
  top: 13%;
}

.chip.b {
  right: -14px;
  bottom: 11%;
  animation-delay: -3s;
}

.chip.c {
  right: 16px;
  top: 16px;
  animation-delay: -1.5s;
}

.panel-ico {
  position: absolute;
  right: clamp(20px,4vw,48px);
  bottom: clamp(28px,4.4vw,56px);
  width: clamp(60px,7vw,88px);
  animation: ic-float 5.5s ease-in-out infinite;
}

.panel-ico svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(0,60,110,.16));
}

/* Reduced motion. The mockup played icon motion for every reviewer and asked that the live site switch it off
   under prefers-reduced-motion. This block does that. The image strip is handled in section 18. */
@media (prefers-reduced-motion:reduce) {
  .chip,
  .panel-ico,
  .ic,
  .ic * {
    animation: none !important;
  }
}

/* ============================================================================
   09. Page sections: Hero (Home and Partners)
   ============================================================================ */
.hero {
  padding-block: clamp(36px,6vw,80px) clamp(48px,7vw,96px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: clamp(32px,5vw,72px);
  align-items: center;
}

.hero .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.who {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.who li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink);
}

.who svg {
  width: 24px;
  height: 24px;
}

.hero .btn-row {
  margin-top: 8px;
}

.collage {
  border-radius: var(--r-xl);
  padding: clamp(20px,3vw,36px);
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(10px,1.4vw,16px);
  align-items: center;
}

.collage .col {
  display: flex;
  flex-direction: column;
  gap: clamp(10px,1.4vw,16px);
}

.collage .col:nth-child(2) {
  transform: translateY(clamp(14px,2.4vw,30px));
}

.collage img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,60,110,.2));
}

.hero.partners .art {
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  min-height: clamp(240px,30vw,380px);
}

.hero.partners .art svg {
  width: clamp(150px,20vw,240px);
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(0,60,110,.18));
}

/* ============================================================================
   10. Page sections: Why SurgePays image strip (Home)
   An auto-scrolling row of images. It pauses on hover.
   ============================================================================ */
.why {
  padding-block: var(--sec);
  background: var(--white);
  border-block: 1px solid var(--line);
}

.why .sec-head {
  margin-bottom: clamp(24px,3.5vw,40px);
}

.strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

.strip ul {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: slide 70s linear infinite;
  padding-block: 6px 18px;
}

.strip:hover ul,
.strip:focus-within ul {
  animation-play-state: paused;
}

.strip li {
  flex: none;
  width: clamp(124px,13vw,164px);
}

.strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,60,110,.12));
}

@keyframes slide {
  to {
    transform: translateX(calc(-50% - 9px));
  }
}

/* ============================================================================
   11. Page sections: Products (Home)
   LinkUp Mobile feature card, plan grid, the plus and minus toggle, product cards with Read more.
   ============================================================================ */
.feature {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: clamp(18px,2.6vw,32px);
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(22px,3.4vw,48px);
  align-items: stretch;
}

.feature .art {
  border-radius: var(--r-card);
  display: grid;
  place-items: center;
  padding: 28px;
  min-height: 280px;
}

.feature .art img {
  width: min(100%,400px);
  filter: drop-shadow(0 18px 26px rgba(0,40,80,.28));
}

.feature .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 8px;
  min-width: 0;
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

.feat-grid li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--tint);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-family: var(--head);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  font-size: 1.0625rem;
}

.feat-grid .ico {
  background: var(--white);
}

.plans {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: clamp(18px,2.4vw,28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.plans-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.plans-head h4 {
  font-size: 1.25rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md);
  padding: 18px 16px;
  min-width: 0;
}

.plan .name {
  font-family: var(--head);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-deep);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 26px;
}

.plan .name b {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: .8125rem;
}

.plan .price {
  font-family: var(--head);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.plan .price small {
  font-family: var(--body);
  font-weight: 500;
  font-size: .9375rem;
  color: var(--muted);
  letter-spacing: 0;
}

.plan .for {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.35;
}

.plan ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text);
}

.plan li {
  position: relative;
  padding-left: 20px;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .36em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--blue-deep);
}

.toggle i {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tint-2);
  flex: none;
}

.toggle i::before,
.toggle i::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 10px;
  height: 2px;
  background: var(--blue-deep);
  border-radius: 2px;
  transition: transform .2s ease;
}

.toggle i::after {
  transform: rotate(90deg);
}

.toggle[aria-expanded="true"] i::after {
  transform: rotate(0deg);
}

.cards {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: clamp(16px,2vw,24px);
  margin-top: clamp(16px,2vw,24px);
}

.card {
  grid-column: span 2;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 14px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.card.wide {
  grid-column: span 3;
}

.card .pic {
  border-radius: var(--r-md);
  overflow: hidden;
  background: #A6CFEB;
}

.card .pic img {
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
}

.card .in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-inline: 8px;
}

.card h3 {
  font-size: clamp(1.375rem,2vw,1.75rem);
  line-height: 1.15;
}

.card p {
  font-size: 1rem;
  line-height: 1.55;
}

.card .more {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding-top: 4px;
}

.card .more ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card .more li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}

.card .more .link {
  margin-top: 4px;
  align-self: flex-start;
}

/* ============================================================================
   12. Page sections: News cards (not used)
   No page uses these rules since the 2026-10-15 mockup: the four news cards on Home became one link band
   (classes .news-band and .news-band-txt in section 20). The rules are still in the mockup CSS, so they stay here.
   Safe to delete once marketing confirms the news grid is not coming back.
   ============================================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(14px,1.8vw,20px);
}

.news {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 12px 12px 18px;
  color: inherit;
  transition: transform .15s ease,box-shadow .15s ease;
  min-width: 0;
}

.news:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.news .logo-box {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  aspect-ratio: 300/260;
  display: block;
}

.news .logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.news .in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-inline: 6px;
  flex: 1;
}

.news h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.news .src {
  margin-top: auto;
  font-size: .875rem;
  font-weight: 600;
  color: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.news .src::after {
  content: "\2197";
}

/* ============================================================================
   13. Page sections: Closing band (Home and Partners)
   ============================================================================ */
.band {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(16px,2vw,24px);
  align-items: stretch;
}

.band .panel {
  border-radius: var(--r-xl);
  padding: clamp(28px,4.4vw,56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
}

.band .panel p {
  font-size: 1.125rem;
  max-width: 30em;
  color: var(--ink);
}

.band .panel .btn {
  margin-top: 8px;
}

.band .photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 260px;
}

.band .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band .art {
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  min-height: 260px;
}

.band .art svg {
  width: clamp(130px,16vw,190px);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0,60,110,.18));
}

/* ============================================================================
   14. Page sections: Partners: split, benefits, direct
   ============================================================================ */
.split {
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,7fr);
  gap: clamp(24px,5vw,72px);
  align-items: center;
}

.split .photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.split .photo img {
  width: 100%;
  aspect-ratio: 493/280;
  object-fit: cover;
}

.split .txt {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(12px,1.6vw,18px);
}

.benefits li {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 22px 20px 24px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -.01em;
}

.direct {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.5fr);
  gap: clamp(20px,5vw,72px);
  align-items: start;
}

.direct p {
  font-size: 1.125rem;
}

.direct .txt {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ============================================================================
   15. Page sections: Let's Connect: intro, lead form, success state
   The script adds .bad to a field wrapper (.f) and appends span.err when a required field fails.
   ============================================================================ */
.connect {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(28px,5vw,72px);
  align-items: start;
}

.connect .intro {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: calc(100px + env(safe-area-inset-top,0px));
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  line-height: 1.45;
}

.steps b {
  display: block;
  font-family: var(--head);
  color: var(--ink);
}

.help {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 1rem;
}

.help strong {
  font-family: var(--head);
  color: var(--ink);
}

.help span,
.help a {
  color: var(--ink);
  font-weight: 500;
}

.form {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: clamp(20px,3.4vw,40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

legend {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--ink);
  letter-spacing: -.01em;
  padding: 0;
  margin-bottom: 4px;
}

.fs-note {
  font-size: .9375rem;
  color: var(--muted);
  margin-top: -8px;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.f.full {
  grid-column: 1/-1;
}

.f label,
.f .lab {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}

.f label em {
  font-style: normal;
  color: var(--blue);
}

.f input:not([type=checkbox]),
.f select {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--ink);
  min-height: 48px;
}

.f input:not([type=checkbox]):hover,
.f select:hover {
  border-color: var(--soft);
}

.f input:not([type=checkbox]):focus,
.f select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(65,171,225,.3);
  background: var(--white);
}

.f.bad input:not([type=checkbox]) {
  border-color: #B3261E;
  background: #FFF8F7;
}

.f input,
.f select {
  scroll-margin-top: 150px;
}

.f .err {
  font-size: .8125rem;
  color: #B3261E;
  font-weight: 500;
}

.phone {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 8px;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checks label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--line);
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.checks input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--soft);
  margin: 0;
  background: var(--white);
  flex: none;
}

.checks input:checked {
  border-color: var(--blue);
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

.checks label:has(input:checked) {
  background: var(--tint);
  box-shadow: inset 0 0 0 1.5px var(--sky);
}

.checks label:has(input:focus-visible) {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  color: var(--ink);
}

.agree input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--blue);
  flex: none;
}

.form-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.form-foot small {
  font-size: .8125rem;
  color: var(--muted);
}

/* Shown by site.js when the lead could not be sent. Same colors as the live site's error message. */
.form-msg {
  align-self: stretch;
  margin: 0;
  padding: 12px 16px;
  font-size: .875rem;
  line-height: 1.4;
  color: #B91C1C;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
}

.done {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: clamp(28px,5vw,64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.done .ok {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
}

.done .ok::before {
  content: "";
  width: 24px;
  height: 13px;
  border-left: 4px solid #FFFFFF;
  border-bottom: 4px solid #FFFFFF;
  transform: translateY(-3px) rotate(-45deg);
}

.done .next {
  margin-top: 10px;
  background: var(--tint);
  border-radius: var(--r-card);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.page-head {
  padding-block: clamp(36px,5vw,64px) 0;
}

.page-head .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ============================================================================
   16. Components: Footer
   ============================================================================ */
.ftr {
  background: var(--ink);
  color: #B9C6CD;
  font-size: .9375rem;
  margin-top: var(--sec);
}

.ftr .wrap {
  padding-block: clamp(40px,6vw,72px) 28px;
  display: flex;
  flex-direction: column;
  gap: clamp(28px,4vw,48px);
}

.ftr-grid {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.75fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.5fr);
  gap: 32px 28px;
}

.ftr h4 {
  font-family: var(--head);
  font-size: .9375rem;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: 0;
}

.ftr a {
  color: #DCE6EB;
}

.ftr a:hover {
  color: #FFFFFF;
}

.ftr ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ftr .brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.ftr .brand img {
  width: 160px;
}

.ftr .sel {
  user-select: all;
  color: #FFFFFF;
  white-space: nowrap;
}

.sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-row {
  display: flex;
  gap: 8px;
}

.sub input {
  flex: 1;
  min-width: 0;
  background: #0C1B25;
  border: 1.5px solid #2B3B46;
  border-radius: var(--r-sm);
  padding: 11px 14px;
  color: #FFFFFF;
  font-size: .9375rem;
}

.sub input::placeholder {
  color: #8696A0;
}

.sub input:focus {
  outline: 0;
  border-color: var(--sky);
}

.sub .ok-msg {
  color: var(--ic-1);
  font-size: .875rem;
}

/* A subscribe request that failed. Light red, readable on the dark footer. */
.sub .err-msg {
  margin: 0;
  color: #FF8A80;
  font-size: .875rem;
}

.sub input[aria-invalid="true"] {
  border-color: #FF8A80;
}

.ftr-btm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  border-top: 1px solid #1E2D37;
  padding-top: 24px;
}

.ftr-btm img {
  width: 190px;
}

.ftr-btm ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================================
   17. Page sections: Partners: stats, segments, pillars, portal, earn, steps, sales card, FAQ
   Followed by the responsive rules for these sections only (1040, 860, 620).
   ============================================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0;
  margin: clamp(36px,5vw,64px) 0 0;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.stats>div {
  padding: 24px clamp(16px,2.2vw,28px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--line);
}

.stats>div:first-child {
  border-left: 0;
}

.stats dt {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.75rem,3vw,2.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  padding-bottom: .08em;
}

.stats dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--text);
}

.ico.lg {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

.ico.lg svg {
  width: 40px;
  height: 40px;
}

.segs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(14px,2vw,24px);
}

.seg {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-card);
  padding: clamp(20px,2.6vw,32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.seg h3 {
  font-size: 1.75rem;
}

.seg p {
  font-size: 1.0625rem;
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}

.ticks li {
  position: relative;
  padding-left: 26px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .38em;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}

.seg .ticks {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.ticks.two {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px 24px;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(12px,1.6vw,18px);
  margin-top: clamp(32px,5vw,56px);
}

.pillars li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 24px 22px 26px;
}

.pillars h4 {
  font-size: 1.25rem;
}

.pillars p {
  font-size: 1rem;
  line-height: 1.5;
}

.portal-head {
  display: grid;
  grid-template-columns: minmax(0,6fr) minmax(0,5fr);
  gap: clamp(20px,4vw,64px);
  align-items: end;
  margin-bottom: clamp(24px,3.5vw,40px);
}

.window {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(14px,4vw,56px) clamp(14px,6vw,88px) 0;
}

.win {
  background: var(--white);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #F1F5F8;
  border-bottom: 1px solid var(--line);
}

.win-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C9D3D9;
}

.win-bar b {
  margin-left: 10px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win img {
  width: 100%;
}

.earn {
  display: grid;
  grid-template-columns: minmax(0,1fr);
}

.earn .txt {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.earn-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(18px,3vw,40px);
  margin-top: 14px;
}

.earn-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  line-height: 1.5;
}

.earn-list b {
  display: block;
  font-family: var(--head);
  font-size: 1.125rem;
  color: var(--ink);
}

.todo-box .how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(14px,2vw,24px);
  counter-reset: none;
}

/* Partners, How it works: space between the stacked step cards */
ol.how {
  display: flex;
  flex-direction: column;
  gap: clamp(14px,2vw,24px);
}

.how li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 26px 24px 28px;
}

.how .n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad);
  color: #FFFFFF;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.how h4 {
  font-size: 1.375rem;
}

.how p {
  font-size: 1rem;
  line-height: 1.5;
}

.person {
  display: grid;
  grid-template-columns: minmax(0,300px) minmax(0,1fr);
  gap: clamp(24px,4vw,56px);
  align-items: center;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: clamp(18px,2.6vw,32px);
}

.person .photo {
  border-radius: var(--r-card);
  overflow: hidden;
}

.person .photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.person .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-block: 8px;
}

.person blockquote {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.625rem,3.3vw,2.625rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 19em;
}

.person blockquote::before {
  content: "\201C";
  display: block;
  height: .5em;
  font-size: 3.4em;
  line-height: 1;
  letter-spacing: 0;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.who-by {
  font-size: 1rem;
  line-height: 1.5;
}

.who-by b {
  display: block;
  font-family: var(--head);
  font-size: 1.125rem;
  color: var(--ink);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,8fr);
  gap: clamp(20px,5vw,72px);
  align-items: start;
}

.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--blue-deep);
  border-bottom: 2px solid var(--blue-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}

.faq details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.faq details p {
  padding: 0 44px 22px 0;
  font-size: 1.0625rem;
  max-width: 40em;
}

@media (max-width:1040px) {
  .pillars {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .stats>div:nth-child(3) {
    border-left: 0;
  }

  .stats>div:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width:860px) {
  .segs,
  .portal-head,
  .earn-list,
  .how,
  .faq-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .person {
    grid-template-columns: minmax(0,1fr);
  }

  .person .photo {
    max-width: 280px;
  }
}

@media (max-width:620px) {
  .pillars,
  .ticks.two {
    grid-template-columns: minmax(0,1fr);
  }

  .stats>div {
    padding: 18px 16px;
  }

  .faq summary {
    font-size: 1.0625rem;
  }
}

/* ============================================================================
   18. Responsive: Responsive rules, shared
   Max-width queries at 1040, 860, 620 and 340, then reduced motion.
   ============================================================================ */
@media (max-width:1040px) {
  .plan-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .news-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .benefits {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .ftr-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .ftr .brand,
  .sub {
    grid-column: 1/-1;
  }

  .sub {
    max-width: 420px;
  }
}

@media (max-width:860px) {
  .menu-btn {
    display: inline-flex;
  }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(0,60,110,.1);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px var(--gut) 22px;
    margin-left: 0;
  }

  .nav.open {
    display: flex;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0 0 8px;
  }

  .nav-links a {
    font-size: 1.125rem;
    padding: 12px 14px;
    border-radius: var(--r-sm);
  }

  .nav .btn {
    padding: 15px;
  }

  /* Sign-in form: one field per row inside the open menu. */
  .login-form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
  }

  .login-form input {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
  }

  .login-close {
    align-self: center;
    font-size: .9375rem;
    padding: 6px;
  }

  .login-close::after {
    content: " Close";
  }

  .login-msg {
    position: static;
    width: auto;
    max-width: none;
  }

  .hero-grid,
  .feature,
  .band,
  .split,
  .direct,
  .connect {
    grid-template-columns: minmax(0,1fr);
  }

  .connect .intro {
    position: static;
  }

  .collage {
    max-width: 520px;
  }

  .card,
  .card.wide {
    grid-column: span 3;
  }

  .hero.partners .art {
    order: 2;
  }

  .chip.a {
    left: -6px;
  }

  .chip.b {
    right: -6px;
  }
}

@media (max-width:620px) {
  .logo img {
    width: 144px;
  }

  .hdr .wrap {
    min-height: 64px;
  }

  .btn.xl {
    font-size: 1.0625rem;
    padding: 17px 26px;
  }

  .feat-grid,
  .fields {
    grid-template-columns: minmax(0,1fr);
  }

  .plan-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .card,
  .card.wide {
    grid-column: 1/-1;
  }

  .news-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .news {
    flex-direction: row;
    align-items: stretch;
    padding: 12px;
  }

  .news .logo-box {
    width: 104px;
    flex: none;
    aspect-ratio: 1;
    align-self: flex-start;
  }

  .ftr-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .benefits li {
    padding: 18px 16px 20px;
    font-size: 1.0625rem;
  }

  .hero .btn-row .btn {
    flex: 1 1 auto;
  }

  .ftr .sel {
    white-space: normal;
  }

  .plan {
    padding: 14px 12px;
  }

  .plan .price {
    font-size: 1.75rem;
  }
}

@media (max-width:340px) {
  .plan-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (min-width:861px) {
  .hero .hero-grid {
    grid-template-columns: minmax(0,1.22fr) minmax(0,.78fr);
  }
}

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

  .strip {
    overflow-x: auto;
  }

  .strip ul {
    animation: none;
  }

  .btn,
  .news,
  .link::after {
    transition: none;
  }
}

/* ============================================================================
   19. Responsive: Responsive rules, phone layout and tablets
   Phone layout at 700 and below. Tablets from 701 to 860.
   ============================================================================ */
/* Phone layout. Everything here sits inside one max-width query, so desktop and tablet rules are untouched. */
@media (max-width:700px) {
  /* hero: the three audience chips sit on one row */
  .who {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .who li {
    font-size: .8125rem;
    padding: 4px 10px 4px 5px;
    gap: 6px;
    white-space: nowrap;
  }

  .who svg {
    width: 22px;
    height: 22px;
  }
  /* partners hero: the headline and the icon tile share a row, so the art is seen at once */
  .hero.partners .hero-grid {
    grid-template-columns: minmax(0,1fr) 104px;
    column-gap: 14px;
    row-gap: 18px;
    align-items: center;
  }

  .hero.partners .txt {
    display: contents;
  }

  .hero.partners .eyebrow,
  .hero.partners .lead,
  .hero.partners .btn-row {
    grid-column: 1/-1;
  }

  .hero.partners h1 {
    grid-column: 1;
    grid-row: 2;
    font-size: 2.05rem;
  }

  .hero.partners .art {
    grid-column: 2;
    grid-row: 2;
    order: 0;
    min-height: 0;
    width: 104px;
    height: 104px;
    border-radius: 24px;
  }

  .hero.partners .art svg {
    width: 66px;
  }

  .hero.partners .btn-row {
    margin-top: 2px;
  }
  /* five plans in two columns left the last one alone: it takes the full row */
  .plan-grid .plan:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
  /* icon cards: icon beside the text */
  .pillars li {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    padding: 20px;
  }

  .pillars li>.ico {
    grid-column: 1;
    grid-row: 1/span 2;
  }

  .pillars li>*:not(.ico) {
    grid-column: 2;
  }
  /* steps: flush with the page edge, number beside the text */
  ol.how {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .how li {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    padding: 20px;
  }

  .how li>.n {
    grid-column: 1;
    grid-row: 1/span 2;
    margin: 0;
  }

  .how li>*:not(.n) {
    grid-column: 2;
  }
  /* sales card: the photo fills the card width */
  .person .photo {
    max-width: none;
  }

  .person .photo img {
    aspect-ratio: 4/3;
    object-position: 50% 20%;
  }
  /* closing band: the icon panel is a short accent, not a second screen */
  .band .art {
    min-height: 140px;
  }

  .band .art svg {
    width: 104px;
  }
}

/* Narrow windows and tablets (701 to 860 px): both heroes keep two columns, so the art stays beside the headline. */
@media (min-width:701px) and (max-width:860px) {
  .hero-grid {
    grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  }

  .collage {
    max-width: none;
  }

  .hero.partners .art {
    order: 0;
  }
}

@media (max-width:620px) {
  .ftr li .sel {
    display: block;
  }
}

@media (max-width:700px) {
  .hero.partners .art {
    display: none;
  }

  .hero.partners h1 {
    grid-column: 1/-1;
  }
}

@media (min-width:861px) {
  .hero.partners h1 {
    font-size: clamp(2.25rem,4.4vw,3.5rem);
  }
}

/* ============================================================================
   20. Classes that replace the inline styles of the mockup
   The mockup set these things with style attributes. They are classes here so the markup has no inline styles.
   Keep this section last so the rules win the way the inline styles did.

   .btn-row.push     pins the LinkUp Mobile button to the bottom of the feature card body
   .sec.flush-top    a section that sits directly under the one before it (In the News, Merchant portal, Talk to sales, Questions)
   .sec-head.flush   a heading block inside a two column grid (portal head, FAQ)
   .nowrap           keeps "W-9" on one line
   ol.steps          removes the list numbers and indent from the steps on Let's Connect
   .art.tint         the flat tint panel behind the icon in the Partners closing band
   em.req            the required asterisk
   .toggle.back      "Back to the form" on the success panel
   .ftr .sub h4      the Subscribe heading sits closer to its label
   .news-band        the "SurgePays in the News" link band on Home (white card, centered row)
   .news-band-txt    its heading and line, stacked
   .news-band h2     its heading at the h3 size
   .team-band img    the "Connect with our team" photo framing (team-ops.jpg)
   ============================================================================ */
.btn-row.push {
  margin-top: auto;
  padding-top: 10px;
}

.sec.flush-top {
  padding-top: 0;
}

.sec-head.flush {
  margin-bottom: 0;
}

.nowrap {
  white-space: nowrap;
}

ol.steps {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

.art.tint {
  background: var(--tint);
}

em.req {
  font-style: normal;
  color: var(--blue);
}

.toggle.back {
  margin-top: 6px;
}

.ftr .sub h4 {
  margin-bottom: 0;
}

.sec-head.row.news-band {
  margin-bottom: 0;
  align-items: center;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: clamp(20px,3vw,32px);
}

.news-band-txt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-band h2 {
  font-size: var(--h3);
}

.team-band .photo img {
  object-position: 34% 50%;
}