/* Felles stilark for de 17 freebie-landingssidene
   (/konkurrent-analyse /kundereise /lenkerapport /lokal-seo /metadata /rangering
   /seo-analyse /seo-kalender /seo-kalkulator /seo-kurs /sjekkliste /sokeord
   /stjel-sokeord /topp-10-feil /tre-artikler /vekstplan /videoanalyse).

   Lå tidligere som en identisk <style>-blokk i hver av de 17 filene. Det er
   den dupliseringen som gjorde at enkeltverdier (mikrocopy-farge, størrelsen
   på underoverskriften, feilboksen) kunne begynne å sprike side for side.
   Lastes etter /app.css, så kaskaderekkefølgen er som før. */
/* Selvhostet. Var: fonts.googleapis.com -> fonts.gstatic.com, to sekvensielle
   tredjeparts rundturer foran folden, uten preconnect, for fem statiske vekter.
   Én variabelfil, samme opphav, samme sti som resten av assetene. */
@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/fonts/PlusJakartaSans-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* ---- Heltefeltet ---------------------------------------------------------
   Var: én midtstilt malkolonne (H1 → undertekst → ett 3D-render → skjemakort),
   der bildet var en generisk leirfigur uten en eneste opplysning om hva du
   faktisk får, og der teksten sto på en annen optisk akse enn tillitsbåndet
   under. Nå: venstrestilt tekstspalte med skjemaet ved siden av, og et utdrag
   av selve leveransen der bildet lå. Samme 1080 px-akse som .tillit .in, så
   H1, utdrag og bånd deler venstrekant. */
.topp{max-width:1080px;margin:0 auto;padding:52px 22px 0}
.topp-g{display:grid;grid-template-columns:minmax(0,1fr) 440px;
 grid-template-areas:"tekst skjema" "art skjema";column-gap:52px;align-items:start}
.tekst{grid-area:tekst}
.optwrap{grid-area:skjema;margin:0}
.art{grid-area:art;margin-top:36px}
.mega{margin:0;font:800 clamp(29px,3.7vw,46px)/1.12 var(--fp);color:var(--ink);letter-spacing:-.028em}
/* Undertekst, ikke andre halvdel av overskriften. Lå tidligere som <span> inne
   i <h1> med display:block: rendret riktig, men h1.textContent ble «… over
   degDu ser hvor …» uten skilletegn, og det er strengen som havner i
   kopier-lim, i SEO-verktøy og i det tilgjengelige navnet. .62em av H1 var
   dessuten så stort at de to leste som én tekstblokk i to vekter. */
.dim{margin-top:16px;max-width:34em;font:500 clamp(16.5px,1.5vw,20px)/1.55 var(--fp);
 color:var(--ink5);letter-spacing:-.005em}
/* Skjemaet skal stå på en egen flate, ikke flyte på den blanke siden. Samme
   kort som de 13 søstersidene bruker, så de 30 LP-ene er én mal igjen. */
.optkort{background:#fff;border:1px solid var(--bd);border-radius:20px;padding:24px;text-align:left;box-shadow:0 1px 2px rgba(23,23,23,.06)}
.optwrap h2{font:700 22px/1.3 var(--fp);color:var(--ink);letter-spacing:-.02em;margin-bottom:20px}
.err2{display:none;text-align:left;background:#FDF0ED;border:1px solid #F5C4B8;color:var(--rod-ink);border-radius:12px;padding:11px 16px;font-size:14px;margin-bottom:14px}
.err2:focus{outline:0}
.err2.on{display:block}
/* Etikett over feltet. Placeholderen bar hele betydningen før: den forsvinner
   idet du begynner å skrive, og skjermlesere leste bare «tekstfelt». */
.felt{text-align:left;margin-bottom:12px}
.felt label{display:block;margin:0 0 6px 2px;font:600 13.5px/1.4 var(--fp);color:var(--ink)}
.opt-f input{width:100%;border:1px solid var(--bds);border-radius:999px;padding:15px 22px;font:400 16px var(--fp);color:var(--ink);margin:0;background:#fff;text-align:left}
.opt-f input::placeholder{color:#666}
.opt-f input:focus{border-color:#CE4410;box-shadow:none}
.felt .fmelding{display:none;margin:6px 0 0 2px;font:500 13px/1.45 var(--fp);color:var(--rod-ink)}
.felt.feil .fmelding{display:block}
.felt.feil input{border-color:#D98B70}
.felt.feil input:focus{border-color:var(--rod-ink)}
.felt.feil input:focus-visible{outline-color:var(--rod-ink);border-color:var(--bds)}
/* Én fokusstil for alt som kan fokuseres, i merkevarefargen. Før: Chromes blå
   auto-outline midt i en oransje flate. outline arver hjørnerundingen. */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #CE4410;outline-offset:2px}
.cta2{display:block;width:100%;border:0;border-radius:999px;padding:18px;font:700 16.5px var(--fp);cursor:pointer;background:linear-gradient(to right,#CE4410,#B33A0C);color:#fff;box-shadow:0 1px 2px rgba(23,23,23,.10);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;margin-top:6px}
.cta2:hover{filter:brightness(.93);transform:translateY(-1px);box-shadow:0 6px 16px rgba(206,68,16,.26)}
.cta2:active{transform:none;box-shadow:0 1px 2px rgba(23,23,23,.10)}
.cta2:disabled{opacity:.6;cursor:default;transform:none;box-shadow:0 1px 2px rgba(23,23,23,.10)}
/* Hopp til innhold. Med hamburger og fire topplenker måtte tastaturbrukere
   gjennom hele toppen før de nådde skjemaet, som er sidens eneste mål.
   Legger seg som en egen linje nøyaktig oppå topplinja (60 px) i stedet for å
   halvveis dekke logoen, og flytter ingenting: siden hopper ikke når du tabber. */
.hopp{position:fixed;top:-80px;left:0;right:0;z-index:60;height:60px;display:flex;
 align-items:center;box-sizing:border-box;padding:0 22px;background:#fff;color:#CE4410;
 border-bottom:1px solid var(--bd);font:700 14.5px var(--fp);text-decoration:none;
 box-shadow:0 6px 18px rgba(23,23,23,.10)}
.hopp:focus{top:0;outline-offset:-3px}
/* Hopp-lenken lander nå i <main>, ikke på en løsrevet <h1>. Ingen ramme rundt
   hele siden når fokus flyttes programmatisk. */
main:focus{outline:0}
.mikro{font-size:12.5px;color:#5C5C5C;margin-top:14px;line-height:1.65}
.mikro a{color:#CE4410}
/* Uten JavaScript har <form> uten action/method én oppførsel: GET tilbake til
   samme URL, med e-postadressen synlig i adressefeltet og i referrer. Skjemaet
   skjules derfor av <noscript> i <head>, og denne setningen tar over. */
.nojs{display:none;margin-top:2px;background:var(--gra-bg);border:1px solid var(--bd);
 border-radius:12px;padding:12px 16px;font:500 14px/1.55 var(--fp);color:var(--ink7)}
.nojs a{color:#CE4410}
/* ---- Utdrag av leveransen ------------------------------------------------
   Erstatter 3D-renderet. Sidens eneste bevisflate var tidligere tre påstander
   om produktet; nå ser du formatet på det du faktisk får før du gir fra deg
   e-postadressen. Innholdet er merket «Eksempel» i hodet og forklart i foten,
   og bruker gjennomgående dinbedrift.no som plassholder. */
.art{border:1px solid var(--bd);border-radius:16px;background:#fff;
 box-shadow:0 1px 2px rgba(23,23,23,.06);overflow:hidden}
.art-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
 padding:12px 18px;background:var(--gra-bg);border-bottom:1px solid var(--bd)}
.art-t{font:700 12px/1.3 var(--fp);letter-spacing:.07em;text-transform:uppercase;color:#5C5C5C}
/* Merkeoransje, ikke feilrødt: chippen er en opplysning om at innholdet er et
   eksempel, ikke en advarsel. #B33A0C på hvitt = 5,95:1. */
.art-e{flex:0 0 auto;font:700 11px/1 var(--fp);letter-spacing:.05em;text-transform:uppercase;
 color:var(--or-kn2);background:#fff;border:1px solid var(--bd);
 border-radius:999px;padding:5px 9px}
.art-b{padding:0 18px}
.art-r{display:flex;gap:18px;justify-content:space-between;align-items:baseline;
 padding:12px 0;border-top:1px solid var(--bd)}
.art-r:first-child,.art-s:first-child{border-top:0}
.art-k{font:600 14px/1.45 var(--fp);color:var(--ink)}
.art-v{flex:0 0 auto;max-width:56%;text-align:right;font:400 13.5px/1.45 var(--fp);color:var(--ink7)}
.art-s{padding:12px 0;border-top:1px solid var(--bd)}
.art-u{font:400 12.5px/1.4 var(--fp);color:#5C5C5C}
.art-tt{margin-top:2px;font:600 15px/1.4 var(--fp);color:var(--ink);letter-spacing:-.01em}
.art-d{margin-top:3px;font:400 13.5px/1.5 var(--fp);color:var(--ink7)}
.art-fot{padding:12px 18px 14px;border-top:1px solid var(--bd);
 font:400 12px/1.55 var(--fp);color:#5C5C5C}
.suksess{background:var(--mint);border:1px solid var(--mint2);color:#0B6B52;border-radius:16px;padding:22px 22px;font:600 17px/1.5 var(--fp);text-align:left}
.suksess .ok-h{font:700 17px/1.45 var(--fp)}
.suksess .ok-b{margin-top:8px;font:500 14.5px/1.55 var(--fp)}
.suksess .ok-b b{font-weight:700;overflow-wrap:anywhere}
.etter{margin-top:20px;text-align:left}
.etter-t{font:700 13.5px/1.4 var(--fp);color:var(--ink)}
.etter-l{list-style:none;margin:6px 0 0;padding:0}
.etter-l li{border-top:1px solid var(--bd)}
.etter-l a{display:block;padding:11px 0;font:500 14.5px/1.5 var(--fp);color:#CE4410;text-decoration:none}
.etter-l a:hover{text-decoration:underline}
.etter .mikro{margin-top:12px}
/* Tillitsbåndet. Erstatter den gamle .sitat-stripen, som var en kursiv
   uttalelse i anførselstegn der selgeren siterte seg selv: formen var en
   kundeuttalelse, avsenderen var oss, og det var eneste bevisflate på siden.
   Nå er det tre etterprøvbare fakta om produktet pluss den samme setningen
   som et signert notat, ikke som et sitat. Samme bånd som de 13 søstersidene. */
.tillit{background:var(--blue);margin-top:56px;padding:48px 22px}
/* 1036 = .topp sin 1080 minus 2x22 px innrykk. Båndet har innrykket på
   <section>, helten på .topp, så tallene må være ulike for at venstrekanten
   skal bli den samme. Måles: begge starter på x=202 ved 1440 px. */
.tillit .in{max-width:1036px;margin:0 auto}
.tillit .kicker{font:700 12px/1 var(--fp);letter-spacing:.09em;text-transform:uppercase;color:#5C5C5C}
.fakta{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:24px}
/* Tydelig typografisk steg mellom overskrift og brødtekst: 17/700 mot 14,5/400. */
.fakta h3{font:700 17px/1.35 var(--fp);color:var(--ink);letter-spacing:-.01em;margin-bottom:8px}
.fakta p{font:400 14.5px/1.6 var(--fp);color:var(--ink7)}
.fakta a{color:#B33A0C}
.note{max-width:660px;margin:40px 0 0;padding-top:32px;border-top:1px solid #DCE2EC}
.note p{font:400 16px/1.65 var(--fp);color:var(--ink7)}
.note .hvem{margin-top:14px;font:600 13.5px var(--fp);color:#5C5C5C}
.bunn{background:#0F0A0A;color:#fff;padding:38px 22px;text-align:center}
.bunn .lg{font:800 21px var(--fp);letter-spacing:-.02em}
.bunn .lg i{color:var(--or);font-style:normal}
.bunn .lenker{margin:14px 0 10px;display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap}
.bunn .lenker a{color:rgba(255,255,255,.75);font-size:13px;text-decoration:none}
.bunn .lenker a:hover{color:#fff}
.bunn .jur{font-size:11.5px;color:rgba(255,255,255,.45);max-width:560px;margin:0 auto;line-height:1.6}
/* Én oransje på siden: topplinje-pillen arver .btn-or fra delt app.css, der
   hvit tekst på #F25533 gir 3,43:1. #CE4410 gir 4,71:1 og er samme oransje som
   CTA-en og fokusringen. Delt app.css er urørt. */
.nav .btn-or,.mmeny .mm-cta{background:#CE4410;transition:background .15s,filter .15s}
.nav .btn-or:hover,.mmeny .mm-cta:hover{background:#B33A0C}
/* Åpen mobilmeny skal ikke ha rullende innhold bak seg, og panelet trenger en
   svak scrim så det leses som et lag over siden, ikke som en rendringsfeil. */
body.meny-apen{overflow:hidden}
.mskygge{display:none}
/* De tre gamle reglene her (.nav nav, .nav .sp .l, .nav .sp .btn-or) var døde:
   <nav> bærer inline display:flex, og .sp er allerede skjult via .mfix. */
/* Under 980 px er det ikke plass til tekst og skjema side om side. Da faller
   alt til én spalte i rekkefølgen tekst → skjema → utdrag (skjemaet er målet,
   utdraget er støtte). .topp 640 minus 2x22 px innrykk = 596, samme som båndet,
   så venstrekanten er fortsatt felles. */
@media(max-width:980px){
.topp{max-width:640px;padding-top:40px}
.topp-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"tekst" "skjema" "art";column-gap:0}
.tekst{margin-bottom:28px}
.art{margin-top:28px}
.tillit .in{max-width:596px}
}
@media(max-width:760px){
.mfix .mskygge.apen{display:block;position:fixed;top:60px;left:0;right:0;bottom:0;z-index:48;background:rgba(23,23,23,.28);animation:msk-inn .18s ease}
@keyframes msk-inn{from{opacity:0}to{opacity:1}}
.topp{padding-top:32px}
.art-v{max-width:50%}
.tillit{padding:40px 22px}
.fakta{grid-template-columns:1fr;gap:24px}
.note{margin-top:32px;padding-top:24px}
}
@media(prefers-reduced-motion:reduce){.mfix .mskygge.apen{animation:none}.cta2{transition:none}.cta2:hover{transform:none}}