/*
 * The Styrkja pages (templates/contributions/): every outlet's, in its look. The accent is the outlet's
 * (--base-accent of its own look, else --sp-brand, set on .sp from Outlet.colours), the typefaces the page's.
 * Light and dark ([data-theme="dark"], the site's switch).
 */
.sp {
    --sp-accent: var(--base-accent, var(--sp-brand, #d60000));
    --sp-ink: var(--base-ink, #111);
    --sp-muted: var(--base-muted, #5c5c5c);
    --sp-line: var(--base-line, #dcdcd6);
    --sp-bg: var(--base-bg, #fff);
    --sp-surface: var(--base-surface, #f5f4f0);
    --sp-card: #fff;
    --sp-band: #111;
    --sp-band-ink: #fff;
    --sp-ok: #127a3e;
    --sp-radius: 14px;
    --sp-heading: var(--base-font-heading, inherit);
    color: var(--sp-ink);
    background: var(--sp-bg);
    font-size: 17px;
    line-height: 1.5;
    padding-bottom: 64px;
}
[data-theme="dark"] .sp {
    --sp-ink: var(--base-ink, #f1f1ee);
    --sp-muted: var(--base-muted, #a9a9a2);
    --sp-line: var(--base-line, #34342f);
    --sp-bg: var(--base-bg, #121212);
    --sp-surface: var(--base-surface, #1c1c1a);
    --sp-card: #1f1f1d;
    --sp-band: #000;
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.sp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-closed { margin: 0; padding: 10px 20px; background: #fff3c4; color: #4a3b00; font-size: 14px; text-align: center; }
.sp h1, .sp h2 { font-family: var(--sp-heading); color: inherit; }

/* The pitch: a dark band, the choice in a card that sits over its edge */
.sp-hero { background: var(--sp-band); color: var(--sp-band-ink); padding: 48px 0 40px; margin-bottom: 8px; }
.sp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 56px; align-items: start; }
.sp-kicker { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-accent); }
.sp-title { margin: 0 0 18px; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.sp-intro { margin: 0 0 22px; font-size: 19px; max-width: 34em; opacity: .92; }
.sp-intro strong { font-weight: 700; }
.sp-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.sp-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.sp-points svg { flex: none; margin-top: 3px; color: var(--sp-accent); }
.sp-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.18); }
.sp-proof li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; opacity: .9; }
.sp-proof__n { font-size: 28px; font-weight: 800; font-family: var(--sp-heading); color: var(--sp-band-ink); }
.sp-proof__note { margin: 8px 0 0; font-size: 12px; opacity: .6; }

/* Cards */
.sp-card { background: var(--sp-card); color: var(--sp-ink); border-radius: var(--sp-radius); padding: 28px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.14); }
[data-theme="dark"] .sp-card { box-shadow: 0 0 0 1px var(--sp-line); }
.sp-card__title { margin: 0 0 18px; font-size: 22px; font-weight: 800; }

/* Monthly | Yearly | Once */
.sp-tabs { display: flex; background: var(--sp-surface); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.sp-tab { flex: 1; position: relative; }
.sp-tab input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp-tab span { display: block; text-align: center; padding: 9px 8px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--sp-muted); transition: background .15s, color .15s; }
.sp-tab input:checked + span { background: var(--sp-card); color: var(--sp-ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.sp-tab input:focus-visible + span { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

/* The amounts */
.sp-amounts { border: 0; margin: 0; padding: 0; min-width: 0; }
.sp-amounts[hidden] { display: none; }
.sp-amounts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-amount { position: relative; display: block; }
.sp-amount input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp-amount span { display: flex; align-items: baseline; justify-content: center; gap: 3px; min-height: 58px; padding: 14px 10px; border: 2px solid var(--sp-line); border-radius: 10px; font-size: 19px; transition: border-color .12s, background .12s; }
.sp-amount small { font-size: 13px; color: var(--sp-muted); }
.sp-amount--other span { font-size: 16px; font-weight: 700; align-items: center; }
.sp-amount:hover span { border-color: var(--sp-ink); }
.sp-amount input:checked + span { border-color: var(--sp-accent); background: color-mix(in srgb, var(--sp-accent) 8%, transparent); box-shadow: inset 0 0 0 1px var(--sp-accent); }
.sp-amount input:focus-visible + span { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.sp-other { margin-top: 12px; }
.sp-other[hidden] { display: none; }
.sp-money { display: flex; align-items: center; border: 2px solid var(--sp-line); border-radius: 10px; background: var(--sp-card); }
.sp-money:focus-within { border-color: var(--sp-accent); }
.sp-money input { flex: 1; border: 0; background: transparent; padding: 12px 14px; font-size: 20px; font-weight: 700; color: inherit; min-width: 0; outline: none; }
.sp-money span { padding-right: 14px; color: var(--sp-muted); font-weight: 700; }

/* Buttons and links */
.sp-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 26px; font: inherit; font-weight: 800; font-size: 18px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .08s, filter .15s, background .15s; }
.sp-button:active { transform: translateY(1px); }
.sp-button--go, .sp-button--pay { width: 100%; margin-top: 20px; background: var(--sp-accent); color: #fff; }
.sp-button--go:hover, .sp-button--pay:hover { filter: brightness(.92); color: #fff; }
.sp-button--pay[disabled] { opacity: .65; cursor: wait; }
.sp-button--quiet { background: transparent; color: var(--sp-ink); box-shadow: inset 0 0 0 2px var(--sp-ink); padding: 11px 22px; font-size: 16px; }
.sp-button--quiet:hover { background: var(--sp-ink); color: var(--sp-bg); }
.sp-button--danger { background: #b3261e; color: #fff; margin-right: 18px; }
.sp-link { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--sp-accent); background: none; border: 0; padding: 0; font-size: inherit; cursor: pointer; }
.sp-link:hover { color: var(--sp-accent); }
.sp-reassure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--sp-muted); text-align: center; }
.sp-count { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--sp-line); font-size: 15px; text-align: center; }
.sp-hint { display: block; margin: 6px 0 0; font-size: 13px; color: var(--sp-muted); }
.sp-hint--lock { display: flex; gap: 6px; align-items: flex-start; }
.sp-hint--lock svg { flex: none; margin-top: 2px; }

/* Under the pitch */
.sp-more { display: grid; gap: 40px; padding-top: 40px; max-width: 820px; }
.sp-alt { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 24px 28px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
.sp-alt h2 { margin: 0 0 6px; font-size: 20px; }
.sp-alt p { margin: 0; color: var(--sp-muted); font-size: 16px; }
.sp-alt .sp-button { flex: none; }
.sp-faq h2 { margin: 0 0 12px; font-size: 24px; }
.sp-faq details { border-top: 1px solid var(--sp-line); }
.sp-faq details:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-faq summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 700; list-style: none; position: relative; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 400; color: var(--sp-accent); }
.sp-faq details[open] summary::after { content: "–"; }
.sp-faq details p { margin: 0 0 18px; color: var(--sp-muted); }

/* The checkout */
.sp-checkout, .sp-thanks { max-width: 620px; padding-top: 28px; }
.sp-back { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-muted); text-decoration: none; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.sp-back:hover { color: var(--sp-ink); }
.sp-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-radius: var(--sp-radius); background: var(--sp-surface); margin-bottom: 18px; }
.sp-summary p { margin: 0; }
.sp-summary__label { font-size: 14px; color: var(--sp-muted); font-weight: 700; }
.sp-summary__amount { font-size: 18px; margin: 2px 0 4px !important; }
.sp-summary__amount b { font-size: 32px; font-family: var(--sp-heading); font-weight: 800; letter-spacing: -.01em; }
.sp-summary__note { font-size: 14px; color: var(--sp-muted); }
.sp-nudge { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: var(--sp-radius); border: 1px dashed var(--sp-accent); margin-bottom: 18px; font-size: 15px; }
.sp-nudge p { margin: 0; }
.sp-nudge .sp-link { flex: none; }
.sp-form { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 30px rgba(0,0,0,.08); }
.sp-step { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; font-size: 20px; font-weight: 800; }
.sp-step ~ .sp-step { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sp-line); }
.sp-step span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sp-ink); color: var(--sp-card); font-size: 15px; }
.sp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sp-row--card { grid-template-columns: 1fr 1fr 1fr; }
.sp-field { display: block; margin-bottom: 14px; }
.sp-field__label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.sp-field input, .sp-field select { width: 100%; padding: 12px 14px; border: 2px solid var(--sp-line); border-radius: 10px; background: var(--sp-card); color: inherit; font: inherit; font-size: 17px; outline: none; appearance: none; }
.sp-field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.sp-field input:focus, .sp-field select:focus { border-color: var(--sp-accent); }
.sp-field--error input, .sp-field--error select { border-color: #b3261e; }
.sp-error { display: block; margin-top: 6px; font-size: 14px; color: #b3261e; font-weight: 700; }
.sp-error[hidden] { display: none; }
[data-theme="dark"] .sp-error { color: #ff8a80; }
.sp-alert { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; background: #fdecea; color: #7a1712; font-size: 15px; }
.sp-alert[hidden] { display: none; }
.sp-alert a { color: inherit; font-weight: 700; }
.sp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sp-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.sp-pay__option { position: relative; }
.sp-pay__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp-pay__option span { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 2px solid var(--sp-line); border-radius: 10px; font-weight: 700; font-size: 16px; }
.sp-pay__option input:checked + span { border-color: var(--sp-accent); box-shadow: inset 0 0 0 1px var(--sp-accent); }
.sp-pay__option input:focus-visible + span { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.sp-panel[hidden] { display: none; }
.sp-fine { margin: 12px 0 0; font-size: 13px; color: var(--sp-muted); text-align: center; }

/* The bank's check, and the wait */
.sp-3ds:not([open]) { display: none; }
.sp-3ds { width: min(480px, calc(100vw - 24px)); padding: 16px; border: 0; border-radius: var(--sp-radius); background: #fff; color: #111; }
.sp-3ds::backdrop { background: rgba(0,0,0,.6); }
.sp-3ds__title { margin: 0 0 10px; font-weight: 800; }
.sp-3ds iframe { width: 100%; height: 520px; border: 0; display: block; }
.sp-3ds .sp-link { margin-top: 10px; }
.sp-busy { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(255,255,255,.82); }
[data-theme="dark"] .sp-busy { background: rgba(0,0,0,.75); }
.sp-busy[hidden] { display: none; }
.sp-busy > div { text-align: center; font-weight: 700; }
.sp-spinner { display: inline-block; width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--sp-line); border-top-color: var(--sp-accent); animation: sp-spin .8s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Thanks */
.sp-thanks { text-align: center; }
.sp-thanks .sp-title { font-size: clamp(32px, 5vw, 48px); }
.sp-thanks__mark { color: var(--sp-ok); margin: 12px 0 14px; }
.sp-thanks__mark--fail { color: #b3261e; }
.sp-thanks__mark--wait { color: var(--sp-muted); }
.sp-lead { font-size: 21px; margin: 0 0 10px; }
.sp-thanks .sp-intro { margin-left: auto; margin-right: auto; }
.sp-next { display: grid; gap: 16px; margin: 32px 0 24px; text-align: left; }
.sp-next__card { box-shadow: 0 0 0 1px var(--sp-line); }
.sp-next__card h2 { margin: 0 0 6px; font-size: 20px; }
.sp-next__card p { margin: 0 0 14px; color: var(--sp-muted); font-size: 16px; }
.sp-share { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-share__b { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--sp-line); background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.sp-share__b:hover { border-color: var(--sp-ink); }
.sp-home { margin-top: 8px; }
.sp-stop { text-align: left; }
.sp-stop .sp-title { font-size: 32px; margin-top: 24px; }

/* Phones */
@media (max-width: 860px) {
    .sp-hero { padding: 28px 0 0; background: linear-gradient(var(--sp-band) 0 70%, var(--sp-bg) 70%); }
    .sp-hero__grid { grid-template-columns: 1fr; gap: 24px; }
    .sp-intro { font-size: 17px; }
    .sp-points, .sp-proof, .sp-proof__note { display: none; }
    .sp-card { padding: 20px; }
    .sp-alt { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .sp-wrap { padding: 0 14px; }
    .sp-row { grid-template-columns: 1fr; gap: 0; }
    .sp-row--card { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .sp-pay { grid-template-columns: 1fr; }
    .sp-nudge { flex-direction: column; align-items: flex-start; }
    .sp-summary__amount b { font-size: 26px; }
}

/* The box at the end of an article (contributions/templatetags: support_box) */
.sp-box { --sp-accent: var(--base-accent, var(--sp-brand, #d60000)); margin: 40px 0; padding: 24px 24px 22px; border-top: 4px solid var(--sp-accent); background: var(--base-surface, #f5f4f0); color: var(--base-ink, #111); border-radius: 0 0 12px 12px; font-size: 17px; line-height: 1.5; }
[data-theme="dark"] .sp-box { background: var(--base-surface, #1c1c1a); color: var(--base-ink, #f1f1ee); }
.sp-box[hidden] { display: none; }
.sp-box__title { margin: 0 0 8px; font-size: 22px; font-weight: 800; font-family: var(--base-font-heading, inherit); }
.sp-box p { margin: 0 0 14px; }
.sp-box__ask { font-weight: 700; background: color-mix(in srgb, var(--sp-accent) 14%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 3px; }
.sp-box__amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sp-box__amounts a { padding: 9px 16px; border-radius: 999px; border: 2px solid var(--base-line, #cfcfc8); color: inherit; text-decoration: none; font-weight: 700; font-size: 16px; }
.sp-box__amounts a:hover { border-color: var(--sp-accent); }
.sp-box__go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--sp-accent); color: #fff !important; font-weight: 800; text-decoration: none; }
.sp-box__go:hover { filter: brightness(.92); }
.sp-box__fine { margin: 10px 0 0 !important; font-size: 13px; opacity: .7; }