/* payments.css: only /payments and its locale copies (CORE-755, 22.10.2026).
   Tobi's second round ("make it sell, not the same mockup after another"): every section has its own form.
   The mess of today as large fading lines next to a sticky statement, the turnaround with one wide screen and a
   row of benefits, the flow as a row with chevrons. Flat and light like the other Core pages: no tiles, no frames,
   hairlines only inside lists. Motion is the site's .reveal / .reveal-left (app.js); position: sticky is plain
   scrolling, so wheel, touchpad and touch behave the same.
   Risks / what goes stale silently: the flow names the real payment path (invoice mail, invoice in Labelloop,
   Stripe checkout, paid after Stripe confirms). If the path changes, edit payments.html and the py.* keys. */

/* ---------- today: the statement section is shared with /discovery, see .ig-today in integrations.css ---------- */

/* ---------- turnaround: one wide window, the benefits in a row under it ---------- */
.pay-wide__h { margin: 0 auto clamp(32px, 5vh, 56px); max-width: 20ch; text-align: center; font-family: var(--font-display);
  font-weight: var(--section-weight); font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; color: #101010; }
.pay-wide__shot { max-width: 1120px; margin: 0 auto; }
.pay-wide__row { list-style: none; margin: clamp(36px, 6vh, 64px) auto 0; padding: 0; max-width: 1120px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.pay-wide__row li { padding-top: 16px; border-top: 1px solid rgba(13,13,13,0.12); } /* hairline inside the list */
.pay-wide__row b, .pay-flow b { display: block; font-size: 17px; font-weight: 600; color: #101010; }
.pay-wide__row span, .pay-flow span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: rgba(13,13,13,0.62); }

/* ---------- how it works: a row of steps with chevrons, no numbers ---------- */
.pay-how .section-head { margin-bottom: clamp(32px, 5vh, 48px); }
.pay-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.pay-flow li { position: relative; }
.pay-flow b { font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.01em; }
.pay-flow__arrow { position: absolute; top: 4px; right: calc(clamp(28px, 4vw, 56px) / -2 - 11px); width: 22px; height: 22px;
  fill: none; stroke: rgba(13,13,13,0.4); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- for brands: a short centred close ---------- */
.pay-brand__box { max-width: 720px; margin: 0 auto; text-align: center; }
.pay-brand__box h2 { margin: 0; font-family: var(--font-display); font-weight: var(--section-weight); font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; color: #101010; }
.pay-brand__box > p { margin: 18px auto 0; max-width: 52ch; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: rgba(13,13,13,0.62); text-wrap: pretty; }
.pay-brand__box .pay-brand__note { margin-top: 28px; font-size: 15px; }
.pay-brand__note b { color: #101010; font-weight: 600; }

/* ---------- tablet and phone ---------- */
@media (max-width: 860px) {
  .pay-wide__row { grid-template-columns: minmax(0, 1fr); max-width: 628px; }
  .pay-flow { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pay-flow__arrow { top: auto; right: auto; left: 0; bottom: -32px; transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.pay-mess, .pay-wide, .pay-how, .pay-brand, #retailers) :is(.reveal, .reveal-left) { opacity: 1; transform: none; filter: none; transition: none; }
}