:root{font-family:Arial,Helvetica,ui-sans-serif,system-ui,sans-serif;color-scheme:dark;--bg:#151513;--text:#f7f6f0;--yellow:#f5d21d;--muted:#bdbdb3}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text)}
body{margin:0;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}
.page{width:min(1180px,100%);min-height:100svh;margin:auto;padding:54px clamp(24px,5.2vw,72px) 30px;display:flex;flex-direction:column}
.brand{display:flex;align-items:baseline;gap:13px;font-size:15px;font-weight:800;letter-spacing:.065em;line-height:1.5}
.brand span:first-child{color:var(--yellow)}
.city{font-size:12px;letter-spacing:.18em}
main{flex:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);align-items:center;gap:64px;padding:65px 0 55px}
h1{font-size:clamp(64px,7.5vw,100px);line-height:.98;letter-spacing:-.055em;font-weight:800;margin:0}
h1 span{color:var(--yellow)}
.lead{font-size:clamp(25px,3vw,36px);line-height:1.16;letter-spacing:-.025em;font-weight:500;margin:34px 0 0}
.purpose{max-width:310px;color:var(--muted);font-size:17px;line-height:1.5;margin:18px 0 0}
.payment{text-align:center;width:100%;max-width:360px;justify-self:end}
h2{font-size:18px;letter-spacing:-.02em;font-weight:600;margin:0 0 22px;line-height:1.35}
.qr-wrap{background:white;padding:18px;border-radius:18px;width:100%;max-width:310px;margin:auto;aspect-ratio:1;display:grid;place-items:center}
.qr-wrap img{width:100%;height:auto;display:block}
.hint{font-size:15px;line-height:1.6;color:var(--muted);margin:21px 0 0}
.hint strong{color:var(--text);font-weight:500}
.number-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-top:24px}
#swish-number{color:var(--text);font-size:19px;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.025em;white-space:nowrap;user-select:all}
#copy-number{border:0;background:none;color:var(--muted);display:flex;align-items:center;gap:7px;min-height:44px;padding:0 2px;font-size:13px}
#copy-number:hover{color:var(--yellow)}
#copy-number svg{height:17px;width:17px}
.copy-status{font-size:13px;line-height:1.5;color:var(--yellow);min-height:20px;margin:0}
.switch-view{display:none;border:0;background:none;color:var(--muted);font-size:13px;padding:10px 4px;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#68685e}
.js .switch-view{display:inline-block}
.switch-view:hover{color:var(--text)}
.mobile-view{display:none}
html[data-payment-view="mobile"] .mobile-view{display:block}
html[data-payment-view="mobile"] .qr-view{display:none}
.swish-button{color:var(--bg);background:var(--yellow);border-radius:10px;text-decoration:none;display:flex;align-items:center;justify-content:space-between;padding:21px 25px;width:100%;min-height:70px;font-size:22px;font-weight:750;transition:background .15s,transform .15s}
.swish-button:hover{background:#ffe04a;transform:translateY(-1px)}
.swish-button:active{transform:translateY(0)}
.swish-button:focus-visible{outline-color:var(--text)}
.swish-button svg{height:25px;width:25px}
.mobile-view .hint{margin-top:14px}
.help{font-size:14px;color:var(--muted);margin:12px 0 0}
.help summary{cursor:pointer;display:list-item;list-style-position:inside;padding:12px 4px;min-height:44px}
.help p{line-height:1.6;text-align:left;margin:4px 0 12px}
.secondary-link{color:var(--text);display:inline-block;padding:8px 0;min-height:40px;text-underline-offset:4px}
footer{color:#a2a298;font-size:14px;padding:10px 0 0;border-top:1px solid #32322d;line-height:1.5}
.no-script{font-size:14px}
.no-script a{color:var(--yellow)}
@media(max-width:760px){
.page{padding:29px max(24px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-bottom))}
.brand{font-size:12px;gap:10px;justify-content:center}.city{font-size:10px}
main{grid-template-columns:1fr;gap:34px;padding:46px 0 28px;align-content:center}
.message{text-align:center}
h1{font-size:clamp(57px,14.6vw,86px);letter-spacing:-.052em}
.lead{font-size:26px;line-height:1.15;margin-top:25px}
.purpose{font-size:15px;max-width:280px;margin:16px auto 0}
.payment{justify-self:center;max-width:360px}
.qr-wrap{max-width:270px}
h2{font-size:17px;margin-bottom:18px}
.number-row{margin-top:16px}
footer{text-align:center;font-size:13px}
}
@media(max-width:360px){.page{padding-left:20px;padding-right:20px}h1{font-size:55px}main{padding-top:36px}.number-row{gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}