/* ===== modern layer: aurora backgrounds, bento methods, spotlight cards, gradient headings, scroll reveal ===== */
.section { position: relative; isolation: isolate; overflow: clip; }
.section::before, .section::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(30px); }
.section::before { width: 620px; height: 620px; top: -220px; right: -160px; background: radial-gradient(closest-side, rgba(26, 102, 232, .16), transparent); }
.section::after { width: 520px; height: 520px; bottom: -240px; left: -140px; background: radial-gradient(closest-side, rgba(217, 86, 11, .10), transparent); }
.section:nth-of-type(even)::before { right: auto; left: -180px; background: radial-gradient(closest-side, rgba(56, 189, 248, .18), transparent); }
html[data-theme="dark"] .section::before { background: radial-gradient(closest-side, rgba(56, 130, 255, .22), transparent); }
html[data-theme="dark"] .section::after { background: radial-gradient(closest-side, rgba(255, 122, 40, .10), transparent); }
.section--ink::before { background: radial-gradient(closest-side, rgba(56, 189, 248, .22), transparent) !important; }

/* kicker as a pill */
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent-text) 24%, transparent); font-size: 12.5px; letter-spacing: .14em; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d9560b; box-shadow: 0 0 0 4px rgba(217, 86, 11, .18); margin: 0; }

/* gradient headings */
.section__head h2 { background: linear-gradient(100deg, var(--text) 35%, #1a66e8 78%, #38bdf8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
html[data-theme="dark"] .section__head h2 { background-image: linear-gradient(100deg, #fff 35%, #9cc8ff 80%, #6fdcf5 100%); }
.section--ink .section__head h2 { background-image: linear-gradient(100deg, #fff 35%, #9cc8ff 80%, #6fdcf5 100%); }

/* spotlight on cards: a soft light follows the pointer */
.method, .flow__step, .bento__card, .trio__card, .plan, .step, .roles__col { position: relative; overflow: hidden; }
.method::after, .flow__step::after, .bento__card::after, .trio__card::after, .plan::after, .step::after, .roles__col::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(26, 102, 232, .13), transparent 60%);
}
.method:hover::after, .flow__step:hover::after, .bento__card:hover::after, .trio__card:hover::after, .plan:hover::after, .step:hover::after, .roles__col:hover::after { opacity: 1; }
.flow__step:not(:last-child)::after { opacity: 1; background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px); inset: auto; border-radius: 0; }
html[data-theme="light"] .method, html[data-theme="light"] .flow__step, html[data-theme="light"] .bento__card, html[data-theme="light"] .trio__card { box-shadow: 0 1px 0 #fff inset, 0 18px 40px -26px rgba(11, 45, 107, .35); }
.method:hover { transform: translateY(-4px); border-color: color-mix(in srgb, #1a66e8 45%, transparent); }

/* payment methods as a bento grid */
@media (min-width: 961px) {
  .methods { grid-template-columns: repeat(6, 1fr); }
  .method { grid-column: span 2; }
  .method:nth-child(1) { grid-column: span 4; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; padding: 36px; background: linear-gradient(135deg, #1a66e8 0%, #1558cf 55%, #0b2d6b 100%); border-color: transparent; color: #fff; }
  .method:nth-child(1) .tile { width: 72px; height: 72px; border-radius: 20px; background: rgba(255, 255, 255, .16); color: #fff; grid-row: span 2; }
  .method:nth-child(1) .tile .ic { width: 34px; height: 34px; }
  .method:nth-child(1) h3 { margin: 0 0 6px; font-size: 28px; color: #fff; }
  .method:nth-child(1) p { color: rgba(255, 255, 255, .86); font-size: 17px; max-width: 52ch; }
  .method:nth-child(6) { grid-column: span 6; display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: center; background: linear-gradient(100deg, var(--card), color-mix(in srgb, #38bdf8 14%, var(--card))); }
  .method:nth-child(6) .tile { grid-row: span 2; }
  .method:nth-child(6) h3 { margin: 0 0 4px; }
}

/* primary buttons get a soft sheen */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); transition: left .6s; pointer-events: none; }
.btn--primary:hover::after { left: 130%; }

/* scroll reveal (only for things below the first screen, set up by modern.js) */
.js-rv .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rvd, 0ms); }
.js-rv .rv.rv-in { opacity: 1; transform: none; }
html[data-motion="off"] .js-rv .rv, html[data-motion="off"] .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .js-rv .rv { opacity: 1; transform: none; transition: none; } }

/* ===== no empty space: products bento fills its grid, settlement columns balance ===== */
@media (min-width: 1001px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; align-items: stretch; }
  .bento__card { grid-column: span 3; }
  .bento__card--lead { grid-column: span 4; grid-row: span 2; }
  .bento__card--lead + .bento__card, .bento__card--lead + .bento__card + .bento__card { grid-column: span 2; }
  .bento__card--lead .ticks { margin: 6px 0 24px; display: grid; gap: 18px; }
  .bento__card--lead .mini-pair { margin-top: auto; padding-top: 8px; }
  .bento__card--lead .btn { margin-top: 22px; }
  .bento__card .mini:not(.mini--solo) { margin-top: auto; }
  .bento__more { margin-top: 18px; padding-top: 0; }
}
.dev .est { margin-top: 24px; }
@media (min-width: 1001px) {
  .bento__card--lead .mini--wide { margin-top: auto; width: 100%; max-width: 560px; }
  .bento__card--lead .mini-pair { margin-top: 14px; padding-top: 0; }
}

/* section heads: title left, intro right, so the row is full width */
@media (min-width: 1001px) {
  .section__head { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 72px; align-items: end; }
  .section__head > .kicker { grid-column: 1 / -1; justify-self: start; }
  .section__head > h2 { grid-column: 1; margin: 0; }
  .section__head > .lead { grid-column: 2; margin: 0 0 6px; max-width: 54ch; }
  .section__head > :not(.kicker):not(h2):not(.lead) { grid-column: 1 / -1; }
}