/* /payments — PayX product page. Builds on /pay/pay.css tokens. */
.skip { position: absolute; left: -999px; top: 8px; background: var(--card-solid); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.mkt-top { max-width: 1120px; }
.mkt-top nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.mkt-top nav a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.mkt-top nav a:not(.btn):hover { color: var(--text); }
.logo { font-weight: 900; font-size: 1.35rem; letter-spacing: -.02em; }
.logo b { color: var(--accent-2); }
.mkt-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px; }
.hero { padding-top: clamp(32px, 8vw, 88px); padding-bottom: 40px; text-align: center; }
.eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); }
.hero h1 { font-size: clamp(2rem, 6.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.03em; margin: 18px auto 16px; max-width: 16ch; }
.grad { background: linear-gradient(110deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { max-width: 60ch; margin: 0 auto; font-size: clamp(1rem, 2.4vw, 1.15rem); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.ticks { list-style: none; padding: 0; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; color: var(--muted); font-size: .92rem; }
.ticks li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.section-title { font-size: clamp(1.4rem, 3.6vw, 2rem); text-transform: none; letter-spacing: -.02em; color: var(--text); text-align: center; margin: 0 0 22px; }
.card.plain { animation: none; }
.grid2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid2 .card + .card { margin-top: 0; }
.good-card { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.list { padding: 0; margin: 10px 0 0; list-style: none; display: grid; gap: 10px; }
.list li { padding-left: 28px; position: relative; color: var(--muted); }
.list li::before { position: absolute; left: 0; top: 0; font-weight: 900; }
.list.bad li::before { content: "✕"; color: var(--danger); }
.list.good li::before { content: "✓"; color: var(--ok); }
.list.good li { color: var(--text); }
.steps3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps3 .card + .card { margin-top: 0; }
.steps3 .num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 800; margin-bottom: 10px; }
.steps3 h3, .features h3 { margin: 0 0 6px; font-size: 1.05rem; }
.steps3 p, .features p { margin: 0; color: var(--muted); }
.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.features .card + .card { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips span { padding: 10px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; }
.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq .card + .card { margin-top: 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent-2); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; color: var(--muted); }
.faq a { color: var(--accent-2); }
.final { text-align: center; }
.final h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); text-transform: none; color: var(--text); letter-spacing: -.02em; }
@media (max-width: 640px) { .mkt-top nav a:not(.btn) { display: none; } }