/* Card payments step by step (/help/card-payments, 23 Oct 2026). Loaded only by that page, after app.css, so it can only
   add to it. Phone first (360 px), the theme tokens of app.css only (Daylight and Lamplight both follow), large tap
   targets, no inline styles. The mock screens are drawings in our own style, never Stripe screenshots. */

.cg h1 { overflow-wrap: anywhere; hyphens: auto; }
.cg .ic { flex: none; }

/* Three facts under the title */
.cg-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cg-facts li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--ink); }
.cg-facts .ic { width: 22px; height: 22px; color: var(--gold-text); }
@media (min-width: 720px) { .cg-facts { grid-template-columns: repeat(3, 1fr); } .cg-facts li { align-items: flex-start; } }

.cg-cta { margin: 1.4rem 0 .4rem; }
.cg-cta .btn { width: 100%; min-height: 58px; }
@media (min-width: 520px) { .cg-cta .btn { width: auto; } }

/* What to have ready */
.cg-ready { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.cg-ready li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.cg-ready .ic { width: 24px; height: 24px; margin-top: 1px; color: var(--pen); }
.cg-ready span, .cg-facts span { min-width: 0; overflow-wrap: anywhere; }

/* The numbered steps: one big number, one action */
.cg-steps { list-style: none; counter-reset: cg; padding: 0; margin: 0; display: grid; gap: 18px; }
.cg-step { counter-increment: cg; position: relative; padding: 20px 18px 20px 18px; border: 1px solid var(--line); border-radius: var(--r-panel, 18px); background: var(--surface); }
.cg-step::before { content: counter(cg); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: 10px;
  background: var(--gold); color: var(--on-gold); font: 700 1.45rem/1 var(--font-head); }
.cg-step h3 { margin: 0 0 .4em; font-size: 1.3rem; line-height: 1.25; }
.cg-step > p { margin: 0 0 .8em; color: var(--ink-2); line-height: 1.55; }
.cg-step > p.cg-do { color: var(--ink); font-size: 1.1rem; }
.cg-step > :last-child { margin-bottom: 0; }

/* "Private person" next to "Association" */
.cg-who { display: grid; gap: 10px; margin: 0 0 .9em; }
.cg-who-card { border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
.cg-who-card p { margin: 0; line-height: 1.5; color: var(--ink); }
.cg-who-card p + p { margin-top: 4px; }
.cg-who-head { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.cg-who-head .ic { width: 20px; height: 20px; color: var(--pen); }
@media (min-width: 620px) { .cg-who { grid-template-columns: 1fr 1fr; } }

.cg-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--gold-soft); color: var(--ink) !important; }
.cg-tip .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--gold-text); }

/* Mock screens: a small phone card drawn with our own pieces */
.cg-mock { position: relative; max-width: 320px; margin: 6px 0 1rem; padding: 14px 16px 18px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); color: var(--ink); }
.cg-mock-wide { max-width: 420px; }
.cg-mock p { margin: 0; }
.cg-mock-top { display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--ink-3); padding-bottom: 10px; margin-bottom: 12px !important; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cg-mock-top .ic { width: 14px; height: 14px; color: var(--green); }
.cg-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; }
.cg-mock-title { font: 700 1.05rem/1.3 var(--font-head); margin-bottom: 12px !important; }
.cg-mock-label { font-size: .85rem; color: var(--ink-2); margin-bottom: 4px !important; }
.cg-mock-field { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-input); border-radius: 10px; background: var(--surface); margin-bottom: 12px !important; }
.cg-mock-field .ic { width: 16px; height: 16px; }
.cg-mock-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9rem; letter-spacing: .02em; }
.cg-mock-btn { display: flex; justify-content: center; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-weight: 700; text-align: center; }
.cg-radio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 46px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); margin-bottom: 8px !important; }
.cg-dot { width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--ink); background: var(--surface); flex: none; }
.cg-dot-off { border-width: 2px; border-color: var(--line-input); }
.cg-tag { margin-left: auto; font: 600 1.15rem/1 var(--font-hand); color: var(--pen); }
.cg-code { display: flex; gap: 6px; }
.cg-code span { display: grid; place-items: center; width: 36px; height: 44px; border: 1px solid var(--line-input); border-radius: 8px; background: var(--surface); font: 700 1.2rem/1 var(--font-body); }
.cg-code .cg-code-now { border: 2px solid var(--focus); }
.cg-line { display: flex; gap: 8px; align-items: center; padding: 8px 0; }
.cg-line .ic { width: 20px; height: 20px; color: var(--green); flex: none; }
/* The pen: a hand-drawn ring around the one thing to press, and a short handwritten note */
.cg-ring { outline: 2.5px solid var(--pen); outline-offset: 4px; border-radius: 16px 22px 14px 24px; }
.cg-pen { margin-top: 12px !important; font: 600 1.35rem/1.1 var(--font-hand); color: var(--pen); }
.cg-pen::before { content: "\2191\00a0"; }

.cg-both h2, .cg-private h2 { display: flex; gap: 10px; align-items: center; }
.cg-private .ic { width: 22px; height: 22px; color: var(--green); flex: none; }
.cg .faq summary { min-height: 48px; }