/* Pay-on-the-web funnel: structure only. Colours, fonts and radii come from theme.css (the app's own tokens).
   No web fonts, no third-party requests, 60px tap targets, visible focus, reduced motion respected. */
:root{--bg:#fff;--surface:#f4f4f2;--ink:#161616;--muted:#5d5d5a;--line:#dcdcd6;--accent:#1f6f4a;--on-accent:#fff;--radius:16px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--display:var(--font)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.w2a{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--font)}
.wrap{max-width:620px;margin:0 auto;padding:0 20px calc(28px + env(safe-area-inset-bottom,0px))}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:20}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700}
.brand img{border-radius:9px}
.langs a{color:var(--muted);text-decoration:none;font-size:13px;padding:10px 6px;letter-spacing:.04em}
.langs a[aria-current]{color:var(--ink);font-weight:700}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-weight:700}
h1,h2{font-family:var(--display);line-height:1.12;margin:0 0 14px;letter-spacing:-.01em}
h1{font-size:clamp(34px,8.6vw,48px)}h2{font-size:clamp(26px,6.6vw,34px)}
h1:focus,h2:focus{outline:none}
.lead{font-size:19px;color:var(--muted);margin:0 0 22px}
.fineprint{font-size:13.5px;color:var(--muted);margin:12px 0 0}
.fineprint a{color:inherit}
#intro{padding:28px 0 8px}
.sheet{padding:18px 0 8px}
.sheet.center{text-align:center;padding-top:80px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 26px;border-radius:999px;border:1.5px solid var(--accent);font:700 18px var(--font);text-decoration:none;cursor:pointer}
.button.primary{background:var(--accent);color:var(--on-accent)}
.button.wide{display:flex;width:100%;margin-top:14px}
.button[aria-disabled=true]{opacity:.45;pointer-events:none}
.button:focus-visible,.option:focus-visible,.plan:focus-visible,.back:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.mono{font:13px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
.meter{display:flex;gap:5px;flex:1;max-width:220px}.meter i{flex:1;height:5px;border-radius:3px;background:var(--line)}.meter i.on{background:var(--accent)}
.options{display:grid;gap:10px}
.option,.plan{display:flex;align-items:center;min-height:60px;width:100%;text-align:left;padding:14px 18px;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 17px var(--font);cursor:pointer}
.option.picked,.plan.picked{border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.back{background:none;border:0;color:var(--muted);font:15px var(--font);padding:18px 0;min-height:60px;cursor:pointer}
.pulse{width:64px;height:64px;border-radius:50%;margin:0 auto 22px;background:var(--accent);opacity:.85;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.72);opacity:.45}}
.items{list-style:none;counter-reset:i;padding:0;margin:24px 0}
.items li{counter-increment:i;position:relative;padding:14px 0 14px 46px;border-top:1px solid var(--line);animation:rise .35s both}
.items li::before{content:counter(i);position:absolute;left:0;top:14px;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font:700 14px var(--font)}
.items b{display:block}.items span{color:var(--muted);font-size:15.5px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.limits{background:var(--surface);border-radius:var(--radius);padding:16px 18px;margin:8px 0 22px;font-size:15.5px;color:var(--muted)}
.limits p:last-child{margin:0}
.benefits{padding:0;margin:0 0 20px;list-style:none}.benefits li{padding:7px 0 7px 28px;position:relative}
.benefits li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:6px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.plans{display:grid;gap:10px}
.plan{flex-wrap:wrap;gap:2px 12px;position:relative}
.plan b{flex:1 0 100%}.plan span{color:var(--muted);font-weight:500;font-size:15.5px}
.plan em{position:absolute;right:14px;top:-11px;background:var(--accent);color:var(--on-accent);font:700 12px var(--font);padding:4px 10px;border-radius:999px;font-style:normal}
.steps{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.steps b{display:block;font-size:19px;margin-bottom:4px}.steps span{color:var(--muted)}
.legal h2{font-size:22px;margin-top:28px}.legal p{color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:36px;padding-top:18px;font-size:13.5px;color:var(--muted)}
footer a{color:inherit;margin-left:14px}
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:10;max-width:560px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:0 18px 60px rgba(0,0,0,.28);font-size:15px;line-height:1.5}
.consent p{margin:0 0 12px}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.consent .button{min-height:52px;font-size:16px;padding:0 10px}
.button.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.consent a{font-size:13px;color:var(--muted)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}