/* Delt mellom /volunteer (NACH) og /onp (ONE NEW PLANET). Fargene og
   overskriftfonten settes i :root på hver side. */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:640px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(80px + env(safe-area-inset-bottom,0px))}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

/* hero */
.cover{border-radius:20px;overflow:hidden;aspect-ratio:1400/733;background:#000 var(--cover) center/cover;border:1px solid var(--strek)}
h1{font:var(--h1-vekt) clamp(34px,9vw,52px)/1.02 var(--display);letter-spacing:var(--h1-sperring);margin:26px 0 0}
h1 em{font-style:normal;color:var(--rav)}
.intro{font-size:17px;color:var(--ink2);margin:12px 0 0;max-width:46ch}
.fordeler{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.fordeler>div{background:var(--flate);border:1px solid var(--strek);border-radius:14px;padding:14px 12px}
.fordeler .i{font-size:22px}
.fordeler b{display:block;font-size:14px;margin-top:6px}
.fordeler span{font-size:12.5px;color:var(--mut)}
@media(max-width:480px){.fordeler{grid-template-columns:1fr}.fordeler>div{display:grid;grid-template-columns:32px 1fr;column-gap:10px;align-items:center}.fordeler .i{grid-row:span 2}.fordeler b{margin:0}}

/* skjema */
.steg{background:var(--flate);border:1px solid var(--strek);border-radius:18px;padding:22px;margin-top:14px}
.steg h2{font-size:18px;letter-spacing:-.015em;margin:0;display:flex;align-items:center;gap:10px}
.steg h2 .n{font-family:var(--mono);font-size:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--rav-d);color:var(--rav)}
.steg .hint{color:var(--mut);font-size:13.5px;margin:6px 0 0}
.felt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.felt .hel{grid-column:1/-1}
@media(max-width:480px){.felt{grid-template-columns:1fr}}
label.f{display:block;font-size:13px;color:var(--ink2);margin-bottom:5px}
label.f small{color:var(--mut)}
input,textarea{width:100%;font:16px var(--sans);padding:12px 13px;border-radius:11px;border:1px solid var(--strek2);
  background:var(--flate2);color:var(--ink);outline:none}
input:focus,textarea:focus{border-color:var(--rav)}
textarea{resize:vertical;min-height:92px;line-height:1.45}
.pre{position:relative}
.pre span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.pre input{padding-left:30px}

.valg{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:16px}
.valg label{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--strek2);
  background:var(--flate2);cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.valg label:hover{border-color:var(--mut)}
.valg input{display:none}
.valg .i{font-size:20px;line-height:1.2}
.valg b{display:block;font-size:14px}
.valg span{font-size:12.5px;color:var(--mut);line-height:1.35}
.valg label:has(input:checked){border-color:var(--rav);background:var(--rav-d)}
.valg label:has(input:checked) b{color:var(--rav)}

.samtykke{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:14px;color:var(--ink2);cursor:pointer}
.samtykke input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--rav)}
.send{width:100%;margin-top:18px;font:700 16px var(--sans);padding:16px;border-radius:14px;border:0;cursor:pointer;
  background:var(--rav);color:var(--pa-rav)}
.send:disabled{opacity:.6;cursor:wait}
.feil{color:var(--neg);font-size:14px;margin-top:12px;min-height:1.2em;text-align:center}
.skjult{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ferdig */
.ferdig{text-align:center;padding:48px 20px}
.ferdig .i{font-size:54px}
.ferdig h2{font-size:30px;letter-spacing:-.03em;margin:14px 0 6px}
.ferdig p{color:var(--ink2);max-width:40ch;margin:8px auto 0}
.ferdig a{color:var(--rav)}
.bunn{text-align:center;color:var(--mut);font-size:13px;margin-top:28px}
.bunn a{color:var(--ink2)}