.payable-page {
  /* Shared brand tokens */
  --pay-accent:        var(--green,      #2563eb);
  --pay-accent-d:      var(--green-dark, #1d4ed8);
  --pay-soft:          var(--mint,       #eaf3ff);
  --pay-ink:           var(--ink,        #15171d);
  --pay-ink2:          var(--muted,      #626975);
  --pay-paper:         var(--paper,      #ffffff);
  --pay-bg:            var(--bg,         #f4f5f7);
  --pay-line:          var(--line,       #d7dbe3);

  /* Payment method accents */
  --pay-quick:         #2563eb;
  --pay-quick-d:       #1d4ed8;
  --pay-bulk:          #7c3aed;
  --pay-bulk-d:        #6d28d9;

  /* Fiscal / CFDI amber */
  --pay-fiscal:        #d97706;
  --pay-fiscal-d:      #b45309;
  --pay-fiscal-soft:   #fffbeb;
  --pay-fiscal-bdr:    #fde68a;

  /* Theme-aware panels shared by the header and final CTA */
  --pay-panel-bg:      linear-gradient(145deg, #f8fbff 0%, #edf4ff 100%);
  --pay-panel-text:    var(--pay-ink);
  --pay-panel-muted:   var(--pay-ink2);
  --pay-panel-pipe:    rgba(255,255,255,.72);
  --pay-panel-pipe-hover: #ffffff;
  --pay-panel-bdr:     color-mix(in srgb, var(--pay-accent) 18%, var(--pay-line));
  --pay-panel-grid:    color-mix(in srgb, var(--pay-accent) 7%, transparent);
  --pay-panel-arrow:   color-mix(in srgb, var(--pay-ink2) 45%, transparent);
  --pay-panel-kicker:  var(--pay-accent-d);
  --pay-accent-text:   var(--button-on-accent, #ffffff);

  /* Shadows */
  --pay-shd-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --pay-shd:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --pay-shd-md: 0 8px 32px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.06);

  position: relative;
  color: var(--pay-ink);
  background: var(--pay-bg);
  font-size: 18px;
}

html.dark .payable-page {
  --pay-panel-bg:      linear-gradient(145deg, #030e1c 0%, #0b1b35 100%);
  --pay-panel-text:    #ffffff;
  --pay-panel-muted:   rgba(255,255,255,.68);
  --pay-panel-pipe:    rgba(255,255,255,.08);
  --pay-panel-pipe-hover: rgba(255,255,255,.13);
  --pay-panel-bdr:     rgba(255,255,255,.13);
  --pay-panel-grid:    rgba(255,255,255,.028);
  --pay-panel-arrow:   rgba(255,255,255,.22);
  --pay-panel-kicker:  color-mix(in srgb, var(--pay-accent) 78%, #fff);
  --pay-fiscal-soft:   rgba(217,119,6,.09);
  --pay-fiscal-bdr:    rgba(217,119,6,.28);
  --pay-shd-sm:        0 1px 3px rgba(0,0,0,.30);
  --pay-shd:           0 4px 20px rgba(0,0,0,.44);
  --pay-shd-md:        0 8px 36px rgba(0,0,0,.56);
}

.payable-page *,
.payable-page *::before,
.payable-page *::after { box-sizing: border-box; }

/* MAX-WIDTH WRAPPER  */

.payable-page .pay-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

/* DARK HEADER*/

.payable-page .pay-header {
  padding: clamp(64px, 9vw, 112px) 0 clamp(48px, 6vw, 80px);
  background: var(--pay-panel-bg);
  color: var(--pay-panel-text);
  position: relative;
  overflow: hidden;
}

/* Subtle grid texture */
.payable-page .pay-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--pay-panel-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pay-panel-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Accent glow blob */
.payable-page .pay-header::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pay-accent) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.payable-page .pay-header .pay-wrap { position: relative; }

/* KICKER / EYEBROW */

.payable-page .pay-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--pay-panel-kicker);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1;
}

.payable-page .pay-kicker::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

/* HEADING */

.payable-page .pay-h1 {
  margin: 0 0 20px;
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 900;
  letter-spacing: -.042em;
  line-height: 1.04;
  text-wrap: balance;
  max-width: 22ch;
  color: var(--pay-panel-text);
}

.payable-page .pay-header-desc {
  margin: 0 0 52px;
  color: var(--pay-panel-muted);
  font-size: clamp(15px, 1.55vw, 18.5px);
  line-height: 1.72;
  max-width: 580px;
}

/*PROCESS PIPELINE */

.payable-page .pay-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.payable-page .pay-pipeline::-webkit-scrollbar { display: none; }

.payable-page .pay-pipe-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 13px;
  background: var(--pay-panel-pipe);
  border: 1px solid var(--pay-panel-bdr);
  border-radius: 10px;
  min-width: max-content;
  transition: background .2s;
  cursor: default;
}

.payable-page .pay-pipe-step:hover {
  background: var(--pay-panel-pipe-hover);
}

.payable-page .pay-pipe-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pay-accent);
  color: var(--pay-accent-text);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payable-page .pay-pipe-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pay-panel-muted);
  white-space: nowrap;
  text-align: center;
}

.payable-page .pay-pipe-arr {
  padding: 0 10px;
  color: var(--pay-panel-arrow);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

/* TWO-COLUMN BODY */

.payable-page .pay-body {
  padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 10vw, 128px);
}

.payable-page .pay-body-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

/* SIDEBAR */

.payable-page .pay-sidebar {
  position: sticky;
  top: 88px;
}

.payable-page .pay-sidenav {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pay-paper);
  border: 1.5px solid var(--pay-line);
  border-radius: 14px;
  box-shadow: var(--pay-shd-sm);
  overflow: hidden;
  padding: 8px 0;
}

/* Vertical connecting line between step numbers */
.payable-page .pay-sidenav::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 34px;
  bottom: 34px;
  width: 1.5px;
  background: var(--pay-line);
  z-index: 0;
  pointer-events: none;
}

html.dark .payable-page .pay-sidenav {
  background: color-mix(in srgb, var(--pay-accent) 4%, var(--pay-paper));
}

.payable-page .pay-sidenav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px 11px 12px;
  text-decoration: none;
  color: var(--pay-ink2);
  transition: color .2s;
  cursor: pointer;
}

.payable-page .pay-sidenav-item:hover {
  color: var(--pay-ink);
}

.payable-page .pay-sidenav-item:hover .pay-sidenav-num {
  border-color: var(--pay-accent);
  color: var(--pay-accent-d);
}

.payable-page .pay-sidenav-item.active {
  color: var(--pay-accent-d);
}

.payable-page .pay-sidenav-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pay-bg);
  border: 2px solid var(--pay-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
  color: var(--pay-ink2);
}

.payable-page .pay-sidenav-item.active .pay-sidenav-num {
  background: var(--pay-accent);
  border-color: var(--pay-accent);
  color: #fff;
}

.payable-page .pay-sidenav-label {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.payable-page .pay-sidenav-item.active .pay-sidenav-label {
  font-weight: 700;
}

/* MAIN CONTENT */

.payable-page .pay-content { min-width: 0; }

/* SECTION */

.payable-page .pay-section {
  scroll-margin-top: calc(88px + 24px);
}

.payable-page .pay-section + .pay-section {
  margin-top: clamp(72px, 10vw, 120px);
}

/* SECTION HEADER */

.payable-page .pay-sec-head { margin-bottom: 28px; }

/* Step badge (blue for S1/S2/S4) */
.payable-page .pay-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pay-soft) 68%, var(--pay-paper));
  border: 1.5px solid color-mix(in srgb, var(--pay-accent) 22%, var(--pay-line));
  color: var(--pay-accent-d);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.payable-page .pay-step-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

html.dark .payable-page .pay-step-badge {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.payable-page .pay-section h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--pay-ink);
}

.payable-page .pay-intro {
  margin: 0;
  max-width: 72ch;
  color: var(--pay-ink2);
  font-size: 15.5px;
  line-height: 1.72;
}

/* Route pill */
.payable-page .pay-route {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--pay-line);
  background: var(--pay-bg);
  color: var(--pay-accent-d);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.payable-page .pay-route svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  opacity: .5;
}

/* COMPARISON CARD GRID (S1 & S2) */

.payable-page .pay-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.2vw, 22px);
  align-items: start;
}

.payable-page .pay-exp-card {
  border-radius: 14px;
  border: 1.5px solid var(--pay-line);
  background: var(--pay-paper);
  box-shadow: var(--pay-shd-sm);
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}

.payable-page .pay-exp-card:hover {
  box-shadow: var(--pay-shd);
  transform: translateY(-2px);
}

/* Primary card — XML import */
.payable-page .pay-exp-card--primary {
  border-left: 4px solid var(--pay-accent);
  background: color-mix(in srgb, var(--pay-soft) 26%, var(--pay-paper));
  box-shadow: var(--pay-shd);
}

.payable-page .pay-exp-card--primary:hover {
  box-shadow: var(--pay-shd-md);
}

html.dark .payable-page .pay-exp-card--primary {
  background: color-mix(in srgb, var(--pay-accent) 7%, var(--pay-paper));
}

/* Alt card — manual entry */
.payable-page .pay-exp-card--alt {
  border-left: 4px dashed color-mix(in srgb, var(--pay-line) 100%, transparent);
}

/* Recomendado badge — top-right */
.payable-page .pay-rec-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--pay-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pay-accent) 38%, transparent);
  pointer-events: none;
}

.payable-page .pay-rec-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Card head */
.payable-page .pay-exp-head {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--pay-line);
}

.payable-page .pay-exp-card--primary .pay-exp-head {
  background: color-mix(in srgb, var(--pay-soft) 36%, var(--pay-paper));
}

html.dark .payable-page .pay-exp-card--primary .pay-exp-head {
  background: color-mix(in srgb, var(--pay-accent) 9%, var(--pay-paper));
}

.payable-page .pay-exp-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pay-ink2);
}

.payable-page .pay-exp-card--primary .pay-exp-label {
  color: var(--pay-accent-d);
}

.payable-page .pay-exp-title {
  margin: 0;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--pay-ink);
  padding-right: 76px;
}

/* Steps inside exp card */
.payable-page .pay-exp-steps {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.payable-page .pay-pay-card {
  border-radius: 14px;
  border: 1.5px solid var(--pay-line);
  background: var(--pay-paper);
  box-shadow: var(--pay-shd-sm);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}

.payable-page .pay-pay-card:hover {
  box-shadow: var(--pay-shd);
  transform: translateY(-2px);
}

/* Colored header band */
.payable-page .pay-pay-band {
  padding: 20px 22px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.payable-page .pay-pay-card--quick .pay-pay-band {
  background: var(--pay-quick);
}

.payable-page .pay-pay-card--bulk .pay-pay-band {
  background: var(--pay-bulk);
}

.payable-page .pay-pay-band-text { flex: 1; min-width: 0; }

.payable-page .pay-pay-band-sub {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}

.payable-page .pay-pay-band-title {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.payable-page .pay-pay-band-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,.90);
}

.payable-page .pay-pay-band-icon svg {
  width: 20px;
  height: 20px;
}

/* Route below band */
.payable-page .pay-pay-route-wrap {
  padding: 12px 22px 0;
}

.payable-page .pay-pay-route-wrap .pay-route {
  margin-top: 0;
}

/* Steps inside pay card */
.payable-page .pay-pay-steps {
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* Step number for Quick (blue) and Bulk (violet) */
.payable-page .pay-pay-card--quick .pay-sn {
  background: color-mix(in srgb, var(--pay-quick) 14%, var(--pay-paper));
  color: var(--pay-quick-d);
}

.payable-page .pay-pay-card--bulk .pay-sn {
  background: color-mix(in srgb, var(--pay-bulk) 12%, var(--pay-paper));
  color: var(--pay-bulk-d);
}

/* SHARED STEP ROW */

.payable-page .pay-step-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.payable-page .pay-sn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pay-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Alt exp card — gray step numbers */
.payable-page .pay-exp-card--alt .pay-sn {
  background: var(--pay-bg);
  color: var(--pay-ink2);
  border: 1.5px solid var(--pay-line);
}

.payable-page .pay-step-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--pay-ink);
  padding-top: 3px;
}

/* TIP CALLOUT  */

.payable-page .pay-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 3px solid var(--pay-accent);
  background: color-mix(in srgb, var(--pay-soft) 42%, var(--pay-paper));
}

.payable-page .pay-tip svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--pay-accent);
}

.payable-page .pay-tip p {
  margin: 0;
  color: var(--pay-ink2);
  font-size: 13.5px;
  line-height: 1.65;
}

.payable-page .pay-cfdi-panel {
  border-radius: 16px;
  border: 1.5px solid var(--pay-fiscal-bdr);
  background: var(--pay-fiscal-soft);
  padding: clamp(28px, 4vw, 50px) clamp(24px, 3.5vw, 46px);
  position: relative;
  overflow: hidden;
}

/* Amber left bar */
.payable-page .pay-cfdi-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--pay-fiscal);
  border-radius: 16px 0 0 16px;
}

html.dark .payable-page .pay-cfdi-panel {
  background: color-mix(in srgb, var(--pay-fiscal) 7%, var(--pay-paper));
  border-color: rgba(217,119,6,.28);
}

.payable-page .pay-cfdi-labels {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Amber step badge (overrides blue) */
.payable-page .pay-cfdi-step-badge {
  background: color-mix(in srgb, var(--pay-fiscal) 11%, var(--pay-paper));
  border-color: color-mix(in srgb, var(--pay-fiscal) 26%, transparent);
  color: var(--pay-fiscal-d);
}

html.dark .payable-page .pay-cfdi-step-badge {
  background: rgba(255,255,255,.06);
  border-color: rgba(217,119,6,.32);
  color: #fbbf24;
}

/* Requisito Fiscal tag */
.payable-page .pay-fiscal-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--pay-fiscal);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payable-page .pay-fiscal-tag svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.payable-page .pay-cfdi-panel h2 {
  color: var(--pay-ink);
}

/* 2-column step grid inside CFDI panel */
.payable-page .pay-cfdi-steps {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.8vw, 16px);
}

.payable-page .pay-cfdi-step-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--pay-paper);
  border: 1px solid color-mix(in srgb, var(--pay-fiscal) 18%, var(--pay-line));
  box-shadow: var(--pay-shd-sm);
}

html.dark .payable-page .pay-cfdi-step-card {
  background: color-mix(in srgb, var(--pay-fiscal) 4%, var(--pay-paper));
  border-color: rgba(255,255,255,.08);
}

.payable-page .pay-cfdi-step-card p {
  margin: 0;
  padding-top: 2px;
  color: var(--pay-ink);
  font-size: 14px;
  line-height: 1.62;
}

/* Amber step numbers */
.payable-page .pay-sn-fiscal {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pay-fiscal);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* CFDI tip — amber accent */
.payable-page .pay-cfdi-tip {
  margin-top: 18px;
  border-left-color: var(--pay-fiscal);
  background: rgba(255,255,255,.56);
  max-width: none;
}

html.dark .payable-page .pay-cfdi-tip {
  background: rgba(255,255,255,.06);
}

.payable-page .pay-cfdi-tip svg { color: var(--pay-fiscal); }

.payable-page .pay-reports {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: 8px;
}

.payable-page .pay-report-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
  border-radius: 12px;
  border: 1.5px solid var(--pay-line);
  background: var(--pay-paper);
  box-shadow: var(--pay-shd-sm);
  cursor: default;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}

.payable-page .pay-report-card:hover {
  box-shadow: var(--pay-shd);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pay-accent) 26%, var(--pay-line));
}

.payable-page .pay-report-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pay-accent) 10%, var(--pay-paper));
  border: 1px solid color-mix(in srgb, var(--pay-accent) 20%, var(--pay-line));
  color: var(--pay-accent-d);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payable-page .pay-report-icon svg { width: 20px; height: 20px; }

.payable-page .pay-report-title {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--pay-ink);
  letter-spacing: -.015em;
  line-height: 1.3;
}

.payable-page .pay-report-desc {
  margin: 0;
  font-size: 13px;
  color: var(--pay-ink2);
  line-height: 1.62;
}

/* REVEAL ANIMATIONS */

@media (prefers-reduced-motion: no-preference) {
  .payable-page .pay-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .62s ease, transform .62s cubic-bezier(.22,1,.36,1);
  }

  .payable-page .pay-reveal.pay-visible {
    opacity: 1;
    transform: none;
  }

  .payable-page .pay-kicker,
  .payable-page .pay-h1,
  .payable-page .pay-header-desc,
  .payable-page .pay-pipeline {
    animation: payEnter .68s cubic-bezier(.22,1,.36,1) both;
  }

  .payable-page .pay-h1         { animation-delay:  55ms; }
  .payable-page .pay-header-desc{ animation-delay: 115ms; }
  .payable-page .pay-pipeline   { animation-delay: 185ms; }
}

@keyframes payEnter {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}

/* FINAL CTA */

.payable-page .pay-cta {
  padding: clamp(72px, 10vw, 118px) 0;
  background: var(--pay-panel-bg);
  color: var(--pay-panel-text);
  position: relative;
  overflow: hidden;
}

.payable-page .pay-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--pay-panel-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pay-panel-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.payable-page .pay-cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.payable-page .pay-cta-text { flex: 1 1 auto; }

.payable-page .pay-cta h2 {
  margin: 12px 0 10px;
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 800;
  letter-spacing: -.036em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--pay-panel-text);
}

.payable-page .pay-cta-desc {
  margin: 0;
  color: var(--pay-panel-muted);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 54ch;
}

.payable-page .pay-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 8px;
  background: var(--pay-accent);
  color: var(--pay-accent-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .17s, box-shadow .17s;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pay-accent) 36%, transparent);
}

.payable-page .pay-cta-btn:hover {
  background: var(--pay-accent-d);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--pay-accent) 44%, transparent);
}

/* RESPONSIVE */

/* Collapse sidebar at ≤1000px */
@media (max-width: 1000px) {
  .payable-page .pay-body-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .payable-page .pay-sidebar {
    position: sticky;
    top: 76px;
    z-index: 19;
    margin-bottom: 40px;
    padding: 10px 0;
    background: color-mix(in srgb, var(--pay-bg) 88%, transparent);
    backdrop-filter: blur(14px);
  }

  .payable-page .pay-sidenav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .payable-page .pay-sidenav::-webkit-scrollbar { display: none; }
  .payable-page .pay-sidenav::before { display: none; }

  .payable-page .pay-sidenav-item {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    gap: 8px;
  }

  .payable-page .pay-sidenav-num {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }
}

/* Stack compare cards at ≤740px */
@media (max-width: 740px) {
  .payable-page .pay-compare { grid-template-columns: 1fr; }
  .payable-page .pay-cfdi-steps { grid-template-columns: 1fr; }
  .payable-page .pay-reports { grid-template-columns: 1fr 1fr; }
}

/* Full stack at ≤480px */
@media (max-width: 480px) {
  .payable-page .pay-wrap,
  .payable-page .pay-body-inner { width: calc(100% - 32px); }
  .payable-page .pay-reports { grid-template-columns: 1fr; }
  .payable-page .pay-cta-inner { flex-direction: column; align-items: flex-start; }
  .payable-page .pay-sidenav { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .payable-page *,
  .payable-page *::before,
  .payable-page *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}