:root{--or:#F25533;--or2:#E04A29;--ink:#171717;--ink7:#2C2F2E;--ink5:#737373;--ink3:#C7C7C7; --bd:#E0E0E0;--bds:#CECECE;--bg:#FAFAFA;--blue:#F0F3F8;--mint:#E8F7F4;--mint2:#B8E0D8;--green:#00B67A; --fp:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif; /* Status-farger. Var hardkodet flere steder (#0B6B52, #B42318, #FDF0ED …) — nå ett sted, så suksess og feil ser like ut på tvers av sidene. */ --gronn-ink:#0B6B52;--rod-ink:#B42318;--rod-bg:#FDF0ED;--rod-kant:#F5C4B8; --gra-bg:#FAFAFA;--hvit:#FFFFFF} *{margin:0;padding:0;box-sizing:border-box} body{font:400 16px/1.5 var(--fp);color:var(--ink7);background:#fff} a{color:inherit} .wrap{max-width:1240px;margin:0 auto;padding:0 24px} header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)} .nav .in{display:flex;align-items:center;gap:28px;height:60px} .nav img{height:27px} .nav .sp{margin-left:auto;display:flex;align-items:center;gap:18px} .nav a.l{font-size:14px;font-weight:500;text-decoration:none} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:12px;font-family:var(--fp);text-decoration:none;transition:.15s} .btn-or{background:var(--or);color:#fff;padding:13px 26px;font-size:15px;font-weight:600} .btn-or:hover{background:var(--or2)} .btn-out{background:#fff;color:var(--ink);border:1px solid var(--bds);padding:12px 24px;font-size:15px;font-weight:500} .btn-blk{background:var(--ink);color:#fff;padding:15px 30px;font-size:16px;font-weight:700} .btn:disabled{opacity:.55;cursor:not-allowed} [hidden]{display:none!important} .btn-goog{background:#FBE5DC;color:var(--ink);width:100%;border-radius:999px;padding:16px 24px;font:600 15.5px var(--fp)} .btn-goog:hover{background:#F8DACD} .deler{display:flex;align-items:center;gap:14px;color:var(--ink5);font-size:13px;margin:18px 0} .deler:before,.deler:after{content:"";flex:1;height:1px;background:var(--bd)} .center{min-height:calc(100vh - 74px);display:flex;align-items:center;justify-content:center;padding:48px 24px;background:linear-gradient(180deg,#fff,#FDF6F2)} .card{width:100%;max-width:480px;background:#fff;border:1px solid var(--bd);border-radius:16px;padding:38px 36px;box-shadow:0 4px 24px rgba(23,23,23,.06)} .card h1{font:600 28px/1.25 var(--fp);color:var(--ink);letter-spacing:-.02em;margin-bottom:8px} .card .sub{color:var(--ink5);font-size:15px;margin-bottom:26px} label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 7px} input,select,textarea{width:100%;border:1px solid var(--bds);border-radius:12px;padding:12px 15px;font:400 15px/1.4 var(--fp);color:var(--ink7);background:#fff;margin-bottom:18px} input:focus,select:focus,textarea:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 3px rgba(242,85,51,.12)} textarea{min-height:96px;resize:vertical} /* iOS Safari zoomer inn på ethvert felt med skrift under 16px — og zoomer aldri ut igjen. Kunden som trykket i «dinbedrift.no» på steg 01 sto derfor forstørret og forskjøvet mot venstre resten av påmeldingen. 16px er terskelen; den settes bare på berøringsskjermer, så typografien på desktop står urørt. */ @media(pointer:coarse),(max-width:980px){input,select,textarea{font-size:16px}} .err{background:#FDF0ED;border:1px solid #F5C4B8;color:#B73F06;border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:18px;display:none} .err.on{display:block} /* Veien videre når kontoen allerede finnes — feilmeldingen skal ikke være en blindvei. Lenkene arver feilfargen, men er tydelig klikkbare. */ .errhandling{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px;padding-top:9px; border-top:1px solid rgba(183,63,6,.22)} .errhandling a{font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px} .errhandling a:hover{text-decoration-thickness:2px} .ok{background:var(--mint);border:1px solid var(--mint2);color:#0B6B52;border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:18px} .foot{text-align:center;font-size:14px;color:var(--ink5);margin-top:22px} .foot a{color:var(--or);font-weight:600;text-decoration:none} .hint{font-size:12.5px;color:var(--ink5);margin:-12px 0 18px} /* onboarding */ .ob{max-width:760px;margin:0 auto;padding:44px 24px 80px} .steps{display:flex;gap:8px;margin-bottom:34px} .steps i{flex:1;height:5px;border-radius:99px;background:#EDEDED} .steps i.on{background:var(--or)} .eyebrow{font:600 12.5px/1 var(--fp);letter-spacing:.09em;text-transform:uppercase;color:var(--or);margin-bottom:12px} .ob h2{font:600 32px/1.22 var(--fp);color:var(--ink);letter-spacing:-.02em;margin-bottom:10px} .ob p.lead{color:var(--ink5);font-size:16px;margin-bottom:28px} .pane{display:none}.pane.on{display:block} .opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px} .opt{border:1px solid var(--bd);border-radius:12px;padding:15px 17px;cursor:pointer;font-size:15px;font-weight:500;background:#fff} .opt:hover{border-color:var(--bds)} .opt.sel{border-color:var(--or);background:#FDF4F0;font-weight:600;color:var(--ink)} .row{display:flex;gap:12px;align-items:center;margin-top:8px} .navbtns{display:flex;gap:12px;margin-top:30px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .chip{background:var(--blue);border:1px solid var(--bd);border-radius:99px;padding:7px 14px;font-size:13.5px;display:inline-flex;gap:8px;align-items:center} .chip b{cursor:pointer;color:var(--ink5)} .done{text-align:center;padding:60px 24px} .done .tick{width:66px;height:66px;border-radius:50%;background:var(--mint);border:1px solid var(--mint2);color:var(--green);font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px} footer.f{border-top:1px solid var(--bd);padding:34px 0;color:var(--ink5);font-size:13.5px;text-align:center;margin-top:60px} @media(max-width:640px){.opts{grid-template-columns:1fr}.card{padding:28px 22px}.ob h2{font-size:26px}} .row .btn{white-space:nowrap} .row input{flex:1} /* ---- BLG-modell split-layout (registrering, logg-inn, onboarding) ---- */ .split2{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 61px);background:#fff} .split2 .vs{display:flex;align-items:center;justify-content:center;padding:48px 40px} .split2 .vsin{width:100%;max-width:400px} .split2 .vsin.bred{max-width:480px} .split2 h1{font:600 40px/1.15 var(--fp);color:var(--ink);letter-spacing:-.025em;margin-bottom:10px} .split2 .alt{font-size:15px;color:var(--ink5);margin-bottom:30px} .split2 .alt a{color:var(--or);font-weight:700;text-decoration:none} .split2 label{margin-bottom:8px} .split2 input:not([type=color]),.split2 select{border-radius:999px;padding:12.5px 22px;margin-bottom:20px} .split2 textarea{border-radius:18px;padding:15px 20px} .split2 .tc{font-size:12.5px;color:var(--ink5);margin-top:20px;white-space:nowrap} .split2 .tc a{color:var(--ink7);font-weight:600} .btn-pill{width:100%;border-radius:999px;padding:16px 24px;font:700 15.5px var(--fp)} /* «Husk meg» + «Glemt passord?» på samme linje over innloggingsknappen */ .huskrad{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 20px} .huskrad .husk{display:flex;align-items:center;gap:9px;font:500 13.5px var(--fp); color:var(--ink7);cursor:pointer;user-select:none;margin:0} .huskrad .husk input{width:18px;height:18px;margin:0;padding:0;flex:none; accent-color:var(--or);cursor:pointer} .huskrad>a{margin-left:auto;font:600 13.5px var(--fp);color:var(--or);text-decoration:none} .huskrad>a:hover{text-decoration:underline} .hs{position:relative;background:#F8F7F5;border-bottom-left-radius:72px;overflow:hidden; display:flex;flex-direction:column;justify-content:space-between;padding:62px 40px 64px;gap:14px} .hs .statrad{display:flex;justify-content:center;gap:0} .hs .statrad>div{text-align:center;padding:0 26px} .hs .statrad>div+div{border-left:1px solid var(--bd)} .hs .statrad>div{display:flex;flex-direction:column} .hs .statrad .n{font:700 15.5px/1.3 var(--fp);color:var(--ink);order:2} .hs .statrad .l{font-size:12.5px;color:var(--ink5);order:1;margin-bottom:2px} .hs .kart{flex:1;display:flex;align-items:center;justify-content:center;min-height:0} .hs .kart{margin:0 -26px;display:flex;align-items:flex-start;justify-content:center;padding-top:24px} .hs .kart img{width:100%;max-width:820px;height:auto} .hs .statrad .ic{width:36px;height:36px;border:1.5px dashed #C7C2BE;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 9px;color:var(--ink5)} .hs .statrad .ic svg{width:15px;height:15px} .chip{background:#fff;border:1px solid var(--bd);border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink7);display:inline-flex;gap:8px;align-items:center} .chip img{width:15px;height:15px;border-radius:3px} .leggtil{position:relative;display:flex;align-items:center} .split2 .vs .leggtil input,.leggtil input{margin:0 !important;padding-right:56px;width:100%} .leggtil button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--or);color:#fff;border:0;font-size:20px;line-height:1;cursor:pointer} .leggtil button:hover{background:var(--or2)} .infokort{background:#F7F7F5;border:1px solid #EFEEEB;border-radius:14px;padding:13px 18px;font-size:13.5px;color:var(--ink7);margin-bottom:20px} .infokort div{display:flex;gap:10px;padding:3px 0;align-items:flex-start} .infokort .pk{width:6px;height:6px;border-radius:50%;background:#C4BFBA;flex:none;margin-top:7px;font-size:0;line-height:0} .infokort b{color:var(--ink)} .gsckort{display:flex;align-items:center;gap:14px;width:100%;background:#F7F7F5;border:1px solid #EFEEEB;border-radius:16px;padding:15px 18px;cursor:pointer;text-align:left;font-family:var(--fp)} .gsckort.sel{border-color:var(--or);background:#FDF4F0} .gsckort .gt{flex:1} .gsckort .gt b{display:block;font-size:14.5px;color:var(--ink)} .gsckort .gt span{font-size:12.5px;color:var(--ink5)} /* Pilen var tegnet med tekst-tegnet «›». Skrifttegn har ulik venstre- og høyremarg, så den satt aldri helt midt i sirkelen. SVG har ingen slik marg. */ .gsckort .pilr{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none} .gsckort .pilr svg{display:block} .skippill{display:block;width:100%;text-align:center;background:#fff;border:1px solid var(--bds);border-radius:999px;padding:13px 22px;font:600 14.5px var(--fp);color:var(--ink);cursor:pointer;margin-top:12px} .skippill:hover{border-color:var(--ink3)} .hs .tillitpill{align-self:center;background:#fff;border:1px solid var(--bd);border-radius:12px; padding:11px 22px;font-size:13.5px;color:var(--ink5);display:flex;gap:8px;align-items:center;white-space:nowrap} .hs .tillitpill b{color:var(--ink)} .eyebrow2{font:700 13px/1 var(--fp);letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin-bottom:16px} .eyebrow2 .av{color:var(--ink3);font-weight:600} .eyebrow2 .valgfri2{background:#EFEEEC;color:var(--ink5);border-radius:99px;padding:5px 12px; font:600 11.5px var(--fp);letter-spacing:.02em;text-transform:none;margin-left:10px;vertical-align:1px} @media(max-width:980px){.split2{grid-template-columns:1fr}.hs{display:none}.split2 .vs{align-items:flex-start;padding:36px 24px} /* .vs er et rutenett-element, og rutenett-elementer har min-width:auto — de nekter å bli smalere enn sitt eget min-innhold. Ett ubrytelig ord (f.eks. pillen «enkeltpersonforetak» i «Stemmer dette?») ga derfor hele kolonnen et gulv på 386px: på 360px-telefoner ble kortet stående like bredt og stakk ut til høyre. min-width:0 lar kolonnen krympe med skjermen igjen. */ .split2,.split2 .vs,.split2 .vsin{min-width:0}} @media(max-width:640px){#who{display:none}} /* ---- lett puls-overgang (kun paywall → Stripe) ---- */ #overgang{position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.97);display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px} #overgang.on{display:flex} #overgang .puls{position:relative;width:66px;height:66px;display:flex;align-items:center;justify-content:center} #overgang .puls img{width:36px;height:36px} #overgang .puls::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(242,85,51,.18);border-top-color:#F25533;animation:o-snurr 1s linear infinite} @keyframes o-snurr{to{transform:rotate(360deg)}} #overgang .tx{font:600 15.5px var(--fp);color:var(--ink)} #overgang .sx{font-size:13px;color:var(--ink5);margin-top:-14px} #overgang .prikker::after{content:"";animation:o-prk 1.4s steps(4,end) infinite} @keyframes o-prk{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}} @media (prefers-reduced-motion:reduce){#overgang .puls::before,#overgang .prikker::after{animation:none}} /* ---- Mobilmeny for kontosidene (opt-in: ) ---- Den gamle headeren la logo + 3 lenker + «Logg inn» + pillen på ÉN rad uten mobilregler: «Slik funker det» brakk over 3 linjer og «Kom i gang» havnet 114px utenfor skjermen (vannrett scroll). Her er hele raden byttet mot logo + hamburger, og lenkene flyttet ned i et panel. ALT ligger bak .mfix OG en mobil media query — desktop og alle sider som ikke har klassen er helt urørt. */ .mfix .mburger{display:none} .mfix .mmeny{display:none} @media(max-width:760px){ /* headeren: logo venstre, hamburger høyre — én rad, 60px, ingen overflyt */ .mfix header.nav .in{gap:0} /* !important fordi