/* Source of public/assets/site.<hash>.css: edit here, then run scripts/build-assets.sh. */

/* Self-hosted fonts (SIL OFL 1.1, licences in assets/fonts/), latin + latin-ext subsets as
   served by Google Fonts. Figtree is a variable font: one file covers weights 400-700. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-latin-ext.bf7828e2c258.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-latin.4ba7d3d09669.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/yeseva-one-latin-ext.41a87f521b1f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/yeseva-one-latin.593184b5936b.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#FBFAF8; --panel:#FFFFFF; --soft:#F3F0EA;
  --ink:#1C1C1A; --ink2:#3A3935; --mute:#6E6D66; --line:#DEDCD6;
  --rasp:#B0335A; --rasp-dk:#7A2340; --rasp-lt:#F6E3E9; --on-rasp:#FFFFFF;
  --good:#2F6B4F; --good-lt:#E1EFE7; --bad:#9B2C2C; --bad-lt:#F6E1DE; --warn:#8A5A00; --warn-lt:#F7EDD6;
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#17161A; --panel:#201F24; --soft:#27252B;
    --ink:#F2EFE9; --ink2:#D9D5CC; --mute:#A09C93; --line:#38353D;
    --rasp:#E3708F; --rasp-dk:#F0A2B8; --rasp-lt:#3A2029; --on-rasp:#1C1C1A;
    --good:#7FC3A0; --good-lt:#1E3329; --bad:#EE9A90; --bad-lt:#3A2220; --warn:#E3B860; --warn-lt:#3A2F17;
  }
}
:root[data-theme="dark"]{
  --paper:#17161A; --panel:#201F24; --soft:#27252B;
  --ink:#F2EFE9; --ink2:#D9D5CC; --mute:#A09C93; --line:#38353D;
  --rasp:#E3708F; --rasp-dk:#F0A2B8; --rasp-lt:#3A2029; --on-rasp:#1C1C1A;
  --good:#7FC3A0; --good-lt:#1E3329; --bad:#EE9A90; --bad-lt:#3A2220; --warn:#E3B860; --warn-lt:#3A2F17;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--rasp)}
.disp{font-family:'Yeseva One',Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.01em;line-height:1.08;text-wrap:balance}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--rasp);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:'Yeseva One',Georgia,serif;font-size:26px;color:var(--ink);text-decoration:none}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--rasp);display:inline-block;margin-top:6px}
.top nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.top nav a{color:var(--ink2);text-decoration:none;font-weight:500;font-size:15px}
.top nav a:hover{color:var(--rasp)}
.top nav a.btn,.top nav a.btn:hover{color:var(--on-rasp)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:16px;border-radius:999px;padding:13px 24px;border:2px solid var(--rasp);background:var(--rasp);color:var(--on-rasp);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--rasp-dk);border-color:var(--rasp-dk)}
.btn.ghost{background:transparent;color:var(--rasp)}
.btn.ghost:hover{background:var(--rasp-lt)}
.btn.small{padding:8px 16px;font-size:14.5px}
.btn[disabled]{opacity:.55;cursor:progress}
@media (max-width:720px){.top nav a:not(.btn){display:none}}

/* hero */
.hero{padding:72px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,6.2vw,72px)}
.hero .lead{font-size:19.5px;color:var(--ink2);max-width:34ch;margin-top:22px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .fine{margin-top:14px;font-size:14.5px;color:var(--mute)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:40px}.hero{padding-top:44px}}

/* the one moment: purchases turning into team money */
.feed{position:relative;display:flex;flex-direction:column;gap:12px;max-width:380px;justify-self:center;width:100%}
.note{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;opacity:0;transform:translateY(10px);animation:in .5s ease forwards}
.note:nth-child(1){animation-delay:.25s}.note:nth-child(2){animation-delay:.9s}.goal{animation-delay:1.6s}
@keyframes in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.note{opacity:1;transform:none}}
.note .ic{width:36px;height:36px;border-radius:10px;background:var(--rasp);color:var(--on-rasp);display:grid;place-items:center;font-family:'Yeseva One',serif;font-size:19px}
.note .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--mute)}
.note p{font-size:15px;line-height:1.45;margin-top:2px}
.note b{font-weight:600;white-space:nowrap}
.goal{grid-template-columns:1fr;background:var(--rasp-lt);border-color:transparent}
.goal .gname{font-weight:600;font-size:15px}
.bar{height:10px;border-radius:99px;background:color-mix(in srgb,var(--rasp) 18%,transparent);overflow:hidden;margin:10px 0 6px}
.bar span{display:block;height:100%;background:var(--rasp);border-radius:99px;width:0;animation:fill 1.4s 2s ease-out forwards}
@keyframes fill{to{width:70%}}
@media (prefers-reduced-motion:reduce){.bar span{width:70%}}
.goal .amt{font-size:14px;color:var(--ink2)}
.feed .cap{font-size:13px;color:var(--mute);text-align:center;margin-top:4px}

/* sections */
section.blk{padding:64px 0;border-top:1px solid var(--line)}
section.blk h2{font-size:clamp(30px,4vw,44px);max-width:20ch}
section.blk.wide h2{max-width:none}
section.blk .intro{color:var(--ink2);max-width:58ch;margin-top:14px;font-size:18px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s);font-family:'Yeseva One',serif;font-size:34px;color:var(--rasp);display:block;line-height:1;margin-bottom:12px}
.steps h3{font-size:19px;font-weight:600;margin-bottom:6px}
.steps p{color:var(--ink2);font-size:16px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:36px}
.voices div{font-size:17px;color:var(--ink2)}
.voices strong{display:block;font-family:'Yeseva One',serif;font-weight:400;font-size:48px;color:var(--ink);line-height:1;margin-bottom:8px}
.src{font-size:14px;color:var(--mute);margin-top:22px}
@media (max-width:760px){.voices{grid-template-columns:1fr;gap:22px}}

.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:36px;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.gets{list-style:none;display:flex;flex-direction:column;gap:18px}
.gets li{padding-left:22px;position:relative}
.gets li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--rasp)}
.gets b{display:block;font-weight:600}
.gets span{color:var(--ink2);font-size:16px}
.calc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.calc label{font-weight:600;display:block}
.calc .row{display:flex;align-items:center;gap:16px;margin-top:14px}
.calc input[type=range]{flex:1;accent-color:var(--rasp);height:28px}
.calc output{font-variant-numeric:tabular-nums;font-weight:600;min-width:3ch;text-align:right}
.calc .res{font-family:'Yeseva One',serif;font-size:44px;line-height:1.1;margin-top:20px;font-variant-numeric:tabular-nums}
.calc .res small{font-family:'Figtree',sans-serif;font-size:16px;color:var(--mute);display:block;margin-top:4px}
.calc p.fine{font-size:13.5px;color:var(--mute);margin-top:14px}

.when{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.when li{padding:22px;border-right:1px solid var(--line)}
.when li:last-child{border-right:0}
.when .d{font-weight:600;color:var(--rasp)}
.when li.now{background:var(--rasp-lt)}
.when p{font-size:16px;color:var(--ink2);margin-top:4px}
@media (max-width:760px){.when{grid-template-columns:1fr}.when li{border-right:0;border-bottom:1px solid var(--line)}.when li:last-child{border-bottom:0}}

/* forms */
.formblk{background:var(--soft)}
.formcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px;margin-top:32px;max-width:760px}
@media (max-width:600px){.formcard{padding:22px}}
fieldset{border:0;margin:0 0 8px}
legend{font-weight:700;font-size:18px;margin-bottom:14px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:24px}
.fgrid .full{grid-column:1/-1}
/* Own row, first column (half width): the next field starts a new row too. */
.fgrid .col1{grid-column:1}
@media (max-width:600px){.fgrid{grid-template-columns:1fr}}
.f label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.f label .opt{font-weight:400;color:var(--mute)}
.f .hint{font-size:13.5px;color:var(--mute);margin-top:5px}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=url],.f select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:0 13px;height:48px}
/* The select's arrow: a 12x6 px chevron with a 2 px stroke, two gradient strokes in the theme's
   ink (the accent on focus), so it follows light and dark mode with no image. The 44 px right
   padding keeps long option text clear of it. */
.f select{appearance:none;-webkit-appearance:none;padding-right:44px;--chev:var(--ink2);background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--chev) calc(50% - 1px),var(--chev) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),var(--chev) calc(50% - 1px),var(--chev) calc(50% + 1px),transparent calc(50% + 1px));background-size:6px 6px;background-repeat:no-repeat;background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%}
.f select:focus{--chev:var(--rasp)}
.f select:disabled{--chev:var(--mute);color:var(--mute);cursor:not-allowed}
.f input:focus,.f select:focus{outline:none;border-color:var(--rasp);box-shadow:0 0 0 3px color-mix(in srgb,var(--rasp) 22%,transparent)}
.f.err input,.f.err select{border-color:var(--bad)}
.f .msg{display:none;color:var(--bad);font-size:13.5px;margin-top:5px;font-weight:500}
.f.err .msg{display:block}
/* The club search (a combobox over a listbox) and what it says about the chosen club. */
.combo-box{position:relative}
.combo [role=listbox]{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:10;list-style:none;margin:0;padding:4px;max-height:min(320px,50vh);overflow-y:auto;background:var(--panel);border:1.5px solid var(--line);border-radius:10px;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 14%,transparent)}
.combo [role=option]{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:7px;cursor:pointer}
.combo [role=option]:hover{background:var(--soft)}
.combo [role=option][aria-selected=true]{background:var(--rasp-lt);outline:2px solid var(--rasp);outline-offset:-2px}
.combo .on{font-weight:600;overflow-wrap:anywhere}
.combo .os{font-size:13.5px;color:var(--mute)}
.combo .pick{margin-top:7px;color:var(--good);font-weight:600;font-size:15px;overflow-wrap:anywhere}
.combo .cnote{margin-top:8px;background:var(--warn-lt);color:var(--warn);border-radius:10px;padding:10px 13px;font-size:14.5px}
/* "Hittar du inte din förening?": the list's last option, or a link-like button under the note; and the hidden group's heading. */
.combo [role=option].more{color:var(--rasp);font-weight:600;text-decoration:underline}
.combo .morebtn{margin-top:8px;padding:0;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--rasp);text-decoration:underline;cursor:pointer}
.combo .og{padding:10px 11px 4px;font-size:13px;font-weight:600;color:var(--mute);border-top:1px solid var(--line);margin-top:4px}
.combo [role=group] ul{list-style:none;margin:0;padding:0}
.radios{display:flex;gap:10px;flex-wrap:wrap}
.radios label{display:inline-flex;align-items:center;gap:8px;font-weight:500;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;margin:0}
.radios input{accent-color:var(--rasp)}
.radios label:has(input:checked){border-color:var(--rasp);background:var(--rasp-lt)}
.check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:15.5px;margin-bottom:14px}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--rasp)}
.check.err span{color:var(--bad)}
.formfoot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.formfoot .fine{font-size:14px;color:var(--mute)}
.srcnote{font-size:13px;color:var(--mute);margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.alert{border-radius:12px;padding:14px 16px;font-size:15px;margin-top:16px}
.alert.bad{background:var(--bad-lt);color:var(--bad)}
.done{text-align:left}
.done h3{font-family:'Yeseva One',serif;font-weight:400;font-size:32px;line-height:1.15}
.done p{color:var(--ink2);margin-top:12px;max-width:52ch}
.reflink{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.reflink input{flex:1;min-width:220px;font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.subnote{background:var(--rasp-lt);border-radius:12px;padding:14px 16px;font-size:15px;color:var(--ink2);margin:-6px 0 22px}

/* faq */
.faq{margin-top:28px;max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rasp);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink2);margin-top:10px;max-width:62ch}

footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--mute);font-size:14.5px}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer .sp{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--ink2)}

/* honeypot: off-screen, not focusable, hidden from assistive tech */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* privacy page */
.reghead{padding-top:56px;padding-bottom:8px}
.reghead h1{font-size:clamp(34px,5vw,54px);max-width:18ch}
.reghead p{color:var(--ink2);max-width:58ch;margin-top:16px;font-size:18px}
.reghead p.back{margin-bottom:56px}