/* pnew-fppay.css — feet 11.11. (owner: the Google page about Tokens, lib/fp2_paypage.php, templates/paypage.php): the page
   /how-payments-work/ only, printed by that page (pnew_head_css_add) after the guest or member bundle. Design system: role
   tokens only, the type steps, radii 8 / 12 / 16 / full, no lines (tonal surfaces only), no shadow, no card edges; sections
   alternate ground and a --surface band, boxes sit one tone above their section (+1 rule); the electric-blue accent is the
   theme's --accent (one key colour per view). Keys ≥ 44 px (--tap). Phone first at 390, the grids open from 701 / 1101. */

body:has(.fpy) .pn-main { max-width: none; padding: 0; }   /* full-bleed sections, as the other info pages */
.fpy { color: var(--ink); }
.fpy :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.fpy :is(ul, ol) { padding: 0; list-style: none; }
.fpy .pc-kicker { color: var(--accent-text); }

/* 1 hero */
.fpy-hero { padding: var(--space-8) 0 var(--space-10); }
.fpy-hero__wrap > :is(.fpy-hero__h, .fpy-hero__lede, .fpy-sentence) { max-width: var(--prose-max, 720px); }
.fpy-hero__tags { margin-top: var(--space-4); }
.fpy-hero__h { margin-top: var(--space-3); font: var(--type-display); text-wrap: balance; }
.fpy-hero__lede { margin-top: var(--space-4); font: var(--type-prose); color: var(--ink-2); }
.fpy-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.fpy-fact { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm, 36px); padding: 0 var(--space-3); border-radius: var(--r-full); background: var(--surface); font: var(--type-label); }
.fpy-fact .pc-ico { flex: none; color: var(--accent-text); }
.fpy-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.fpy-hero__cta .pc-btn { min-height: var(--tap, 44px); }
.fpy-sentence { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--r-m); background: var(--accent-soft); color: var(--accent-text); font: var(--type-strong); }
.fpy-sentence .pc-ico { flex: none; margin-top: 2px; }

/* sections */
.fpy-sec { padding: var(--space-12) 0; }
.fpy-sec--band { background: var(--surface); }
.fpy-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); max-width: var(--prose-max, 720px); }
.fpy-h2 { font: var(--type-h1); text-wrap: balance; }
.fpy-head__p { font: var(--type-prose); color: var(--ink-2); }
.fpy-soon { max-width: var(--prose-max, 720px); }   /* night 1000 guest: the open-soon line ran 1160 px wide under a 720 px hero */
.fpy-prose > .fpy-p { max-width: var(--prose-max, 720px); }
.fpy-p { font: var(--type-prose); color: var(--ink-2); }
.fpy-p + .fpy-p { margin-top: var(--space-4); }

/* 2 the three steps */
.fpy-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fpy-step { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--panel-pad); border-radius: var(--r-l); background: var(--surface-2); }
.fpy-step__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-2); border-radius: var(--r-m); background: var(--accent-soft); color: var(--accent-text); }
.fpy-step__n { position: absolute; top: var(--space-4); right: var(--space-4); display: inline-grid; place-items: center; width: var(--control-sm, 36px); height: var(--control-sm, 36px); border-radius: var(--r-full); background: var(--surface-3); font: var(--type-label); }
.fpy-step__h { font: var(--type-title); }
.fpy-step__p { font: var(--type-body); color: var(--ink-2); }

/* 4 for creators */
.fpy-rows { display: grid; gap: var(--space-3); max-width: 880px; }
.fpy-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--panel-pad); border-radius: var(--r-l); background: var(--surface-2); }
.fpy-row__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-m); background: var(--surface-3); color: var(--accent-text); }
.fpy-row__h { font: var(--type-title); }
.fpy-row__p { margin-top: var(--space-1); font: var(--type-body); color: var(--ink-2); }
.fpy-notes { display: grid; gap: var(--space-3); max-width: 880px; margin-top: var(--space-6); }
.fpy-note { font: var(--type-body); color: var(--ink-2); }
.fpy-note a { color: var(--accent-text); font: var(--type-label); text-decoration: underline; text-underline-offset: 3px; }

/* 5 safety tiles */
.fpy-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fpy-tile { display: grid; align-content: start; gap: var(--space-2); padding: var(--panel-pad); border-radius: var(--r-l); background: var(--surface); }
.fpy-tile__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-1); border-radius: var(--r-m); background: var(--surface-2); color: var(--accent-text); }
.fpy-tile__h { font: var(--type-title); }
.fpy-tile__p { font: var(--type-body); color: var(--ink-2); }

/* 6 compliance */
.fpy-comply > .fpy-list { max-width: 880px; }
.fpy-list { display: grid; gap: var(--space-2); counter-reset: none; }
.fpy-list__i { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--r-m); background: var(--surface-2); }
.fpy-list__i > .pc-ico { margin-top: 2px; color: var(--accent-text); }
.fpy-list__i b { display: block; font: var(--type-strong); }
.fpy-list__i span { display: block; margin-top: var(--space-1); font: var(--type-body); color: var(--ink-2); }

/* 7 FAQ */
.fpy-faqwrap > .fpy-faqs { max-width: 880px; }
.fpy-faqs { display: grid; gap: var(--space-2); }
.fpy-faq { border-radius: var(--r-m); background: var(--surface); }
.fpy-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap, 44px); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.fpy-faq summary::-webkit-details-marker { display: none; }
.fpy-faq summary .pc-ico { flex: none; color: var(--ink-2); transition: transform var(--dur-2, 200ms); }
.fpy-faq[open] summary .pc-ico { transform: rotate(180deg); }
.fpy-faq summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-m); }
.fpy-faq__q { font: var(--type-strong); }
.fpy-faq__a { padding: 0 var(--space-4) var(--space-4); font: var(--type-body); color: var(--ink-2); }

/* 8 the end */
.fpy-end__wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.fpy-end__copy { display: grid; gap: var(--space-2); }
.fpy-next { display: grid; gap: var(--space-3); padding: var(--panel-pad); border-radius: var(--r-l); background: var(--surface-2); }
.fpy-next__h { font: var(--type-label); color: var(--ink-2); }
.fpy-next ul { display: grid; }
.fpy-next li a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap, 44px); font: var(--type-strong); color: var(--ink); text-decoration: none; }
.fpy-next li a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.fpy-next li a span:last-child { color: var(--accent-text); }
.fpy-fine { font: var(--type-meta); color: var(--ink-3); }

@media (min-width: 701px) and (max-width: 1100px) {
  .fpy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* night 1000 guest: the three steps stay three across on tablets (2 + 1 left an orphan) */
}
@media (max-width: 1100px) {
  .fpy-end__wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .fpy-hero { padding: var(--space-6) 0 var(--space-8); }
  .fpy-hero__cta > .pc-btn { flex: 1 1 100%; }
  .fpy-sec { padding: var(--space-8) 0; }
  .fpy-steps, .fpy-tiles { grid-template-columns: minmax(0, 1fr); }
  .fpy-row { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); }
  .fpy-row__ico { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .fpy-faq summary .pc-ico { transition: none; } }

/* home narrative 11.11.: the three steps carry the portal's stickers (lib/portal_feet.php pnew_fp_obj) for a guest in the look; the icon well steps back then */
.fpy-step__obj { display: block; width: 72px; height: 72px; margin-bottom: var(--space-2); object-fit: contain; }
.fpy-step:has(.fpy-step__obj) .fpy-step__ico { display: none; }