.pay-page { color: var(--text-heading); background: #f7f8f9; font-family: var(--font-sans); }
.pay-page *, .pay-page *::before, .pay-page *::after { box-sizing: border-box; }
.pay-site .site-header { background: #ffffff; }
.pay-site .main-nav a.active { color: var(--brand-orange); font-weight: 600; }
.pay-hero { position: relative; display: flex; min-height: clamp(35rem, 78vh, 48rem); align-items: center; padding: 3.5rem var(--content-gutter); isolation: isolate; overflow: hidden; color: #ffffff; background: url("/portal/assets/images/pay/services-9d39d4f607f140efb05032b06722920a.webp") center / cover no-repeat; }
.pay-hero::before { position: absolute; z-index: -1; inset: 0; background: rgba(11, 14, 22, 0.54); content: ""; }
.pay-hero__inner { display: grid; width: min(100%, var(--container-width)); grid-template-columns: 1fr; gap: 1.5rem; align-items: center; margin: 0 auto; }
.pay-hero__copy { max-width: 38rem; text-align: center; }
.pay-hero h1, .pay-hero p, .pay-integrations h2, .pay-feature-card h2, .pay-feature-card p, .pay-subscriptions h2 { margin-top: 0; }
.pay-hero h1 { margin-bottom: 1rem; font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.12; }
.pay-hero h1 span, .pay-hero p span, .pay-subscriptions h2 span { color: var(--brand-orange); }
.pay-hero p { max-width: 36rem; margin: 0 auto; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6; }
.pay-hero__cta { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; margin-top: 1.75rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; background: var(--brand-orange); color: #ffffff; font-size: var(--text-base); font-weight: 600; text-decoration: none; transition: background-color 180ms ease, transform 180ms ease; }
.pay-hero__cta:hover { background: var(--brand-orange-hover); transform: translateY(-1px); }
.pay-hero__animation { display: none; position: relative; isolation: isolate; }
.pay-hero__animation::before { position: absolute; z-index: -1; width: min(100%, 31rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(246, 138, 78, .24), rgba(246, 138, 78, .07) 45%, transparent 72%); filter: blur(16px); content: ""; }
.pay-hero__animation dotlottie-player { display: block; width: min(100%, 31rem); aspect-ratio: 1; }
.pay-hero__animation img { display: block; width: min(100%, 31rem); height: auto; object-fit: contain; filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .3)); }
.pay-intuitive { display: grid; min-height: 31rem; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2rem; padding: var(--section-space) var(--page-content-gutter); background: #ffffff; }
.pay-intuitive__showcase { width: 100%; min-height: 32.5rem; grid-column: auto; grid-row: auto; }
.pay-intuitive__showcase .capability-feature-card__copy { width: 43%; }
.pay-intuitive__showcase .capability-feature-card__copy h3 { font-size: clamp(1.75rem, 2.25vw, 2.25rem); line-height: 1.06; }
.pay-intuitive__showcase .capability-feature-card__description { font-size: 0.9375rem; }
.pay-intuitive__showcase .capability-feature-card__visual { width: 54%; right: 0; overflow: hidden; border-radius: clamp(2.5rem, 4vw, 3.75rem); }
.pay-intuitive__showcase .capability-feature-card__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; filter: none; }
.pay-intuitive__content { display: flex; width: 100%; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; }
.pay-intuitive__eyebrow { margin: 0 0 0.75rem; color: var(--brand-orange); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pay-intuitive h2 { max-width: 18ch; margin: 0 0 1rem; color: var(--text-heading); font-size: var(--text-section); font-weight: 700; letter-spacing: -0.035em; line-height: var(--leading-heading); }
.pay-intuitive__intro { max-width: 58ch; margin: 0; color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); }
.pay-intuitive__features { display: grid; width: 100%; min-width: 0; gap: 0.875rem; margin-top: 1.5rem; }
.pay-intuitive__feature { display: grid; min-width: 0; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: start; gap: 0.875rem; padding: 1rem 1.125rem; border-radius: 1.25rem; background: #eaeaea; color: var(--text-heading); }
.pay-intuitive__feature-icon { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; color: var(--brand-orange); font-size: 1rem; }
.pay-intuitive__feature h3 { margin: 0 0 0.2rem; color: var(--text-heading); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.pay-intuitive__feature p { margin: 0; color: #555555; font-size: var(--text-base); line-height: 1.45; }
.pay-security { max-width: 100%; padding: var(--section-space) var(--page-content-gutter); overflow: hidden; background: #f7f8f9; }
.pay-security__inner { display: grid; width: min(100%, var(--container-width)); max-width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2rem; margin-inline: auto; }
.pay-security__content { width: 100%; max-width: 100%; min-width: 0; }
.pay-security__eyebrow { margin: 0 0 0.75rem; color: var(--brand-orange); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pay-security h2 { max-width: 18ch; margin: 0 0 1rem; color: var(--text-heading); font-size: var(--text-section); font-weight: 700; letter-spacing: -0.035em; line-height: var(--leading-heading); }
.pay-security__intro { max-width: 58ch; margin: 0; color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); }
.pay-security__features { display: grid; width: 100%; max-width: 100%; min-width: 0; gap: 1rem; margin-top: 1.75rem; }
.pay-security__feature { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: start; gap: 0.875rem; }
.pay-security__feature > div { min-width: 0; }
.pay-security__icon { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 50%; background: #fff0e7; color: var(--brand-orange); font-size: 1rem; }
.pay-security__feature h3 { margin: 0 0 0.25rem; color: var(--text-heading); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.pay-security__feature p { max-width: 52ch; margin: 0; overflow-wrap: anywhere; color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); }
.pay-security__visual { display: flex; width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 4 / 3; align-items: center; justify-content: center; overflow: hidden; border-radius: 1.5rem; background: #ffffff; }
.pay-security__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pay-integrations { padding: clamp(3.5rem, 8vw, 6rem) var(--content-gutter); background: #f7f8f9; }
.pay-integrations__inner, .pay-features__grid, .pay-subscriptions { width: min(100%, var(--container-width)); margin: 0 auto; }
.pay-integrations h2, .pay-subscriptions h2 { margin-bottom: 0.875rem; font-size: var(--text-section); font-weight: 700; letter-spacing: -0.035em; line-height: var(--leading-heading); text-align: center; }
.pay-integrations__label { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-bottom: 2.25rem; }
.pay-integrations__label span { width: clamp(3.25rem, 10vw, 6.25rem); height: 1px; background: var(--brand-orange); }
.pay-integrations__label p { margin: 0; color: var(--text-body); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.pay-logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.pay-logo-grid a { display: inline-block; width: min(100%, 7.5rem); min-width: 0; justify-self: center; text-decoration: none; }
.pay-logo-grid img { display: block; width: 100%; max-width: 7.5rem; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.3s ease-in-out; }
.pay-logo-grid a:hover img { transform: scale(1.1); }
.pay-features { padding: 0 var(--content-gutter) clamp(3.5rem, 8vw, 6rem); background: #f7f8f9; }
.pay-features__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.pay-feature-card { display: flex; min-height: 19rem; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.5rem; overflow: hidden; border-radius: 1rem; background: var(--brand-orange); box-shadow: 0 1rem 2rem rgba(17,17,17,.1); color: #111111; }
.pay-feature-card h2 { margin-bottom: 0.625rem; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.pay-feature-card p { max-width: 40rem; margin-bottom: 0; font-size: var(--text-base); line-height: var(--leading-body); }
.pay-feature-card dotlottie-player { display: block; align-self: center; width: min(100%, 14rem); aspect-ratio: 1; }
.pay-feature-card img { display: block; align-self: center; width: min(100%, 14rem); max-height: 14rem; object-fit: contain; }
.pay-feature-card--wide { background: #ffffff; color: var(--text-heading); }
.pay-feature-card--wide > div { width: 100%; max-width: 42rem; }
.pay-feature-card--wide img { width: min(100%, 25rem); max-height: none; filter: drop-shadow(0 1.25rem 1.75rem rgba(17, 17, 17, 0.16)); }
.pay-subscriptions { padding: 0 var(--content-gutter) clamp(3.5rem, 8vw, 6rem); }
.pay-subscriptions h2 { position: relative; margin-bottom: 2.75rem; }
.pay-subscriptions h2::after { position: absolute; right: 0; bottom: -1rem; left: 0; width: 4rem; height: 2px; margin: auto; background: var(--brand-orange); content: ""; }
.pay-subscriptions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: center; }
.pay-subscriptions__grid img { display: block; width: 100%; max-width: 8.5rem; height: 3.75rem; margin: auto; object-fit: contain; }
.pay-page-footer { padding: 2.5rem var(--content-gutter) 1.25rem; border-top: 1px solid var(--border-subtle); background: #ffffff; font-family: var(--font-sans); }
.pay-page-footer__grid { display: grid; width: min(100%, 75rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; margin: 0 auto; }
.pay-page-footer h2 { margin: 0 0 1.25rem; color: var(--text-heading); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; }
.pay-page-footer ul { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.pay-page-footer a { color: #6b7280; font-size: var(--text-sm); text-decoration: none; }
.pay-page-footer a:hover { color: var(--brand-orange); text-decoration: underline; }
.pay-page-footer__bottom { width: min(100%, 75rem); margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); color: #6b7280; font-size: var(--text-sm); text-align: center; }
.pay-hero__cta:focus-visible, .pay-logo-grid a:focus-visible, .pay-page-footer a:focus-visible { outline: 3px solid rgba(246,138,78,.45); outline-offset: 3px; }
@media (min-width: 768px) { .pay-hero__inner { grid-template-columns: minmax(0,.9fr) minmax(18rem,.7fr); gap: clamp(2rem,6vw,5rem); } .pay-hero__copy { text-align: left; } .pay-hero p { margin-inline: 0; } .pay-hero__animation { display: flex; align-items: center; justify-content: center; } .pay-intuitive { grid-template-columns: minmax(20rem, .92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 5vw, 4.5rem); } .pay-security__inner { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.92fr); gap: clamp(2.5rem, 6vw, 5rem); } .pay-logo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } .pay-feature-card { min-height: 20rem; padding: 2rem; } .pay-features__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.25rem; align-items: stretch; } .pay-feature-card { flex-direction: row; align-items: center; } .pay-feature-card--wide { grid-column: span 2; justify-content: space-between; gap: clamp(2rem, 6vw, 5rem); padding: clamp(2rem, 4vw, 3rem); } .pay-feature-card--wide img { width: min(42%, 25rem); max-height: none; } .pay-subscriptions__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pay-page-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pay-hero__cta { transition-duration: .01ms; } }

/* Shared compact rhythm: keeps the existing page composition while reducing
   full-page hero treatment and repeated section padding. */
.pay-hero { min-height: clamp(34rem, 72vh, 40rem); padding-block: 2.5rem; }
.pay-hero h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
.pay-hero p { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.55; }
.pay-hero__cta { margin-top: 1.25rem; }
.pay-integrations { padding-block: var(--section-space); }
.pay-features, .pay-subscriptions { padding-bottom: var(--section-space); }
.pay-integrations__label { margin-bottom: 1.5rem; }
.pay-feature-card { min-height: 16.5rem; padding: 1.25rem; }

/* Align page content with the landing-page content edges. */
.pay-integrations,
.pay-intuitive,
.pay-security,
.pay-features,
.pay-subscriptions,
.pay-page-footer {
  padding-inline: var(--page-content-gutter);
}
.pay-subscriptions h2 { margin-bottom: 2.25rem; }
@media (min-width: 768px) {
  .pay-feature-card { min-height: 17.5rem; padding: 1.5rem; }
  .pay-feature-card--wide { padding: clamp(2rem, 4vw, 3rem); }
  .pay-feature-card--wide img { max-height: none; }
}

/* Index-page alignment and type contract. */
.pay-hero h1 {
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: var(--leading-heading);
}

.pay-hero p {
  max-width: 36rem;
  font-size: var(--text-lg);
  line-height: 1.55;
}

.pay-integrations,
.pay-features,
.pay-subscriptions,
.pay-page-footer {
  padding-inline: max(var(--page-content-gutter), calc((100% - var(--container-width)) / 2));
}

.pay-integrations h2,
.pay-subscriptions h2 {
  font-size: var(--text-section);
  font-weight: 700;
  line-height: var(--leading-heading);
}

.pay-feature-card h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.pay-feature-card p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

@media (max-width: 999px) {
  .pay-integrations,
  .pay-intuitive,
  .pay-security,
  .pay-features,
  .pay-subscriptions,
  .pay-page-footer {
    padding-inline: var(--page-content-gutter);
  }
}

#pay-intuitive,
#pay-security {
  scroll-margin-top: 6rem;
}

@media (max-width: 1000px) {
  .pay-intuitive__showcase {
    min-height: 31.25rem;
  }
}

@media (max-width: 760px) {
  .pay-intuitive__showcase {
    min-height: 33.125rem;
  }

  .pay-intuitive__showcase .capability-feature-card__copy {
    width: 62%;
  }

  .pay-intuitive__showcase .capability-feature-card__visual {
    width: 58%;
    height: 60%;
    top: 38%;
  }
}