/* A long-form article (payment-fees and its translations), on shared/paper.css.
 *
 * The class names are the ones these pages already carry, so each language
 * swaps its old inline <style> for this one file and nothing in its body moves:
 * a paper hero, a narrow column of Geist with serif headings, figures on white
 * cards, and the ink closing band the rest of the site ends on. */
.narrow{max-width:760px;margin:0 auto}
.headline{font-family:var(--serif);font-weight:400;text-transform:none}

.ahero{padding:176px 0 88px;border-bottom:1px solid var(--rule)}
.akicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.akicker .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.ahero h1{font-size:clamp(44px,6vw,80px);line-height:1.02;letter-spacing:-.026em;margin:0 0 28px;max-width:16ch;text-wrap:balance}
.alede{font-size:19px;line-height:1.6;letter-spacing:-.012em;color:var(--ink-2);max-width:58ch;text-wrap:pretty}
.ameta{margin:34px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:760px){ .ahero{padding:132px 0 64px} }

.abody{padding:88px 0 56px}
.abody h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.2vw,38px);line-height:1.1;letter-spacing:-.018em;margin:0 0 18px;text-wrap:balance}
.abody p{font-size:17px;line-height:1.72;letter-spacing:-.008em;color:var(--ink-2);margin:0 0 22px;text-wrap:pretty}
.abody p strong{color:var(--ink);font-weight:500}
.asec{padding:46px 0 10px}
/* every section after the first opens on a hairline */
.asec + .asec{margin-top:30px;padding-top:56px;border-top:1px solid var(--rule-2)}

.callout{margin:0 0 26px;padding:22px 26px;background:var(--white);border:1px solid var(--rule);border-left:1px solid var(--accent);border-radius:0 8px 8px 0}
.callout p{margin:0;font-size:16px}

.fig{margin:38px 0 46px;background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:34px 28px 26px}
.fig svg{width:100%;height:auto;display:block}
.fig-cap{font-size:13px;line-height:1.55;color:var(--ink-3);text-align:center;margin:18px 0 0}
.fig-cap strong{color:var(--ink-2);font-weight:500}

/* the closing band, the same ink band every paper page ends on */
.cta{padding:110px 0 120px;text-align:center;background:var(--dark);color:var(--white)}
.cta h2{font-size:clamp(36px,5vw,58px);line-height:1.02;letter-spacing:-.022em;margin:0 0 32px}
.cta .btn{background:var(--white);color:var(--ink)}
.cta .btn:hover{background:#e9e7e2}
.cta .sub{margin:22px 0 0;font-size:14px;color:rgba(255,255,255,.62)}

.ahero .wrap > *{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.ahero h1{animation-delay:.1s}
.ahero .alede{animation-delay:.22s}
.ahero .ameta{animation-delay:.34s}
@media (prefers-reduced-motion:reduce){ .ahero .wrap > *{animation:none} }