/* usemarrow.com: the checkout, return, team and join pages (session twenty one). Linked from each page's markdown body
   (no inline style anywhere; the Content Security Policy allows style-src 'self' only). The colours are the site's
   tokens, so both themes follow site.css. */
[data-checkout] [hidden] { display: none !important; }
[data-checkout]:not(.ready) .needs-js { display: none; }
[data-checkout] .row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
[data-checkout] .row button { flex: 0 0 auto; }
[data-checkout] button[disabled] { opacity: .5; cursor: not-allowed; }
[data-checkout] button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
[data-checkout] button.secondary:hover { background: var(--surface-muted); color: var(--ink); }
[data-checkout] .co-plan { font-weight: 700; margin: 0 0 4px; }
[data-checkout] .co-big { font-size: 20px; margin: 0 0 8px; }
[data-checkout] .co-msg { margin-block-start: 14px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); }
[data-checkout] h3 { margin: 22px 0 6px; font-size: 16px; }
[data-checkout] ul.co-list { list-style: none; padding: 0; margin: 8px 0 0; }
[data-checkout] ul.co-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-block-start: 1px solid var(--line); }
[data-checkout] ul.co-list code { flex: 1 1 14em; min-inline-size: 0; overflow-wrap: anywhere; font-size: 14px; }
[data-checkout] ul.co-list button { min-block-size: 40px; padding: 6px 14px; }
@media (max-width: 480px) { [data-checkout] { padding: 18px; } }