/* ==============================================================
   BETALTE UNDERSØKELSER — "Kalk & kobolt"
   --------------------------------------------------------------
   Sajten er en testredaksjon, ikke en annonseplass. Hele uttrykket
   skal si "vi har målt dette" og ikke "tjen penger nå": kald kalk,
   grafitt, én mettet kobolt, og tallene satt i mono slik at en
   karakter leses som en måling.

   Fargelåsen: kobolt er eneste aksent på hele nettstedet. Dukker
   det opp en grønn hake eller en gul stjerne et sted, er det en feil.

   Det finnes nøyaktig ett mørkt felt på siden — testvinneren. Det er
   ikke pynt: det mørke feltet ER konklusjonen, og resten av siden
   holder seg lys slik at det feltet får være det eneste som roper.
   ============================================================== */

:root {
  /* flate */
  --ink:        #0e1116;
  --ink-2:      #1a1f28;
  --ink-3:      #2b323d;
  --chalk:      #f1f3f5;
  --chalk-2:    #e7eaee;
  --surface:    #ffffff;

  /* aksent — den eneste */
  --cobalt:     #2038e8;
  --cobalt-deep:#1628b4;
  --cobalt-wash:#eef0fe;

  /* tekst */
  --grey:       #59616d;
  --grey-light: #9aa2ae;
  --line:       #dde1e6;
  --line-dark:  #2c333e;

  /* form — én radius-skala, ingen blanding */
  --r-lg: 22px;
  --r:    14px;
  --r-sm: 9px;

  --shadow: 0 18px 50px -22px rgba(14, 17, 22, .28);
  --shadow-lift: 0 26px 60px -24px rgba(14, 17, 22, .34);

  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.32, .72, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--chalk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--cobalt-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--cobalt); color: #fff; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: var(--r-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }

/* ---------------- typografi ---------------- */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 3.7vw, 2.9rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.015em; }

p { max-width: 66ch; }

.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--grey);
  max-width: 54ch;
}

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cobalt-deep);
  margin-bottom: 1.1rem;
}

.prose h2 { margin: 3rem 0 1rem; }
.prose h3 { margin: 2.2rem 0 .7rem; }
.prose p + p { margin-top: 1.1rem; }
.prose p { color: var(--ink-2); }
.prose ul { margin: 1.2rem 0; padding-left: 1.3rem; max-width: 66ch; }
.prose li + li { margin-top: .55rem; }
.prose li::marker { color: var(--cobalt); }
.prose strong { font-weight: 700; color: var(--ink); }

/* ---------------- knapper ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: .8rem .9rem .8rem 1.5rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}

.btn-primary {
  background: var(--cobalt);
  color: #fff;
  box-shadow: 0 12px 30px -14px rgba(32, 56, 232, .85);
}
.btn-primary:hover { background: var(--cobalt-deep); box-shadow: 0 18px 38px -14px rgba(32, 56, 232, .9); }
.btn-primary:active { transform: scale(.975); }

/* knapp-i-knapp: pilen bor i sin egen sirkel, flush mot høyre innerkant */
.btn .pip {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .17);
  display: grid; place-items: center;
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.btn:hover .pip { transform: translate(3px, -2px); background: rgba(255, 255, 255, .26); }
.btn .pip svg { width: 15px; height: 15px; stroke: currentColor; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  padding: .8rem 1.5rem;
  background-color: var(--surface);
}
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-ghost:active { transform: scale(.975); }

.btn-on-dark {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .7);
}
.btn-on-dark:hover { background: #f2f3f5; }
.btn-on-dark:active { transform: scale(.975); }
.btn-on-dark .pip { background: rgba(14, 17, 22, .09); }
.btn-on-dark:hover .pip { background: rgba(14, 17, 22, .15); }

/* ---------------- toppnav ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(241, 243, 245, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.topbar-in {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand-mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px; background: var(--cobalt);
  display: grid; place-items: center;
}
.brand-mark svg { width: 14px; height: 14px; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-size: .95rem; font-weight: 500; color: var(--grey);
  text-decoration: none; white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 600; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px; border: 1.5px solid var(--line);
  background: var(--surface); border-radius: var(--r-sm);
  cursor: pointer; position: relative;
}
.nav-toggle span {
  position: absolute; left: 11px; width: 18px; height: 1.8px;
  background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 70px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .5rem 24px 1.2rem;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .4s var(--ease), visibility .3s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav a:last-child { border-bottom: 0; }
}

/* ---------------- seksjonsrytme ---------------- */

section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
section.tight { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.on-white { background: var(--surface); }
.on-chalk2 { background: var(--chalk-2); }

.sec-head { max-width: 60ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sec-head p { margin-top: 1rem; }

/* ---------------- hero ---------------- */

.hero { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.hero h1 { margin-bottom: 1.4rem; }
.hero .lede { margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------------- testkort (dobbeltramme) ---------------- */

.frame {
  background: var(--chalk-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px;
}
.frame-in {
  background: var(--surface);
  border-radius: calc(var(--r-lg) - 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow);
  overflow: hidden;
}

.card-top {
  padding: 1.5rem 1.6rem 1.3rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.card-rank {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cobalt-deep);
  background: var(--cobalt-wash);
  padding: .35rem .6rem; border-radius: var(--r-sm);
  white-space: nowrap;
}
.card-name { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.card-name + .card-sub { color: var(--grey); font-size: .95rem; margin-top: .15rem; }

.score { text-align: right; flex: none; }
.score-num {
  font-family: var(--mono); font-weight: 700;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.04em;
  color: var(--ink);
}
.score-num small { font-size: .95rem; font-weight: 500; color: var(--grey-light); letter-spacing: 0; }
.score-label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey-light); margin-top: .3rem;
}

.card-rows { padding: .4rem 1.6rem 1.1rem; }
.card-rows dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
.card-rows dt {
  font-size: .93rem; color: var(--grey);
  padding: .62rem 1rem .62rem 0; border-bottom: 1px solid var(--line);
}
.card-rows dd {
  font-size: .93rem; font-weight: 600; color: var(--ink); text-align: right;
  padding: .62rem 0; border-bottom: 1px solid var(--line);
}
.card-rows dl > :nth-last-child(1),
.card-rows dl > :nth-last-child(2) { border-bottom: 0; }

.card-foot { padding: 0 1.6rem 1.6rem; }
.card-foot .btn { width: 100%; justify-content: space-between; }
.card-note {
  font-size: .78rem; color: var(--grey-light); margin-top: .8rem; text-align: center;
  max-width: none;
}

/* ---------------- metodestripe ---------------- */

.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.method > div {
  padding: 1.9rem 1.8rem 1.9rem 0;
  border-left: 1px solid var(--line);
  padding-left: 1.8rem;
}
.method > div:first-child { border-left: 0; padding-left: 0; }
.method h3 { margin-bottom: .5rem; }
.method p { font-size: .96rem; color: var(--grey); }
@media (max-width: 800px) {
  .method { grid-template-columns: 1fr; }
  .method > div { border-left: 0; padding: 1.4rem 0; border-top: 1px solid var(--line); }
  .method > div:first-child { border-top: 0; padding-top: 0; }
}

/* ---------------- vinnerfeltet (eneste mørke flate) ---------------- */

.winner {
  background: var(--ink);
  color: #cdd3dc;
  position: relative;
  overflow: hidden;
}
.winner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(78% 120% at 82% 8%, rgba(32, 56, 232, .34), transparent 62%);
  pointer-events: none;
}
.winner .wrap { position: relative; }
.winner h2, .winner h3 { color: #fff; }
.winner .eyebrow { color: #8fa2ff; }
.winner .lede { color: #a9b2be; }

.winner-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .winner-grid { grid-template-columns: 1fr; } }

.winner-points { margin: 2rem 0 2.3rem; display: grid; gap: 1.15rem; }
.winner-points li { list-style: none; display: flex; gap: .9rem; align-items: flex-start; }
.winner-points svg { width: 19px; height: 19px; flex: none; margin-top: 3px; stroke: #8fa2ff; }
.winner-points span { color: #c3cad4; max-width: 52ch; }
.winner-points b { color: #fff; font-weight: 600; }

.winner-panel {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--r-lg);
  padding: 8px;
}
.winner-panel-in {
  background: rgba(255, 255, 255, .035);
  border-radius: calc(var(--r-lg) - 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  padding: 1.8rem 1.7rem;
}
.panel-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.panel-sub { font-size: .92rem; color: #98a1ad; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.winner-panel .score-num { color: #fff; }
.winner-panel .score-num small { color: #6f7885; }
.winner-panel .card-note { color: #6f7885; }

.winner-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
.winner-panel dt {
  font-size: .93rem; color: #98a1ad;
  padding: .7rem 1rem .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.winner-panel dd {
  font-size: .93rem; font-weight: 600; color: #fff; text-align: right;
  padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.winner-panel dl > :nth-last-child(1),
.winner-panel dl > :nth-last-child(2) { border-bottom: 0; }
.winner-panel .btn { width: 100%; justify-content: space-between; margin-top: 1.5rem; }

/* ---------------- topplisten ---------------- */
/* Dette er siden. En besøkende skal kunne lese rekkefølgen, se hvem som er
   nummer én, og finne knappen uten å tenke. Alt annet er underordnet. */

.topp { display: grid; gap: 1rem; }

.oppf {
  display: grid;
  grid-template-columns: 64px 1fr 240px;
  gap: 0 1.6rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.7rem 1.8rem;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.oppf:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.oppf.vinner {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 1px var(--cobalt), var(--shadow);
  padding-top: 2.6rem;
  position: relative;
}
.oppf.vinner::before {
  content: "Testvinner";
  position: absolute; top: 0; left: 0;
  background: var(--cobalt); color: #fff;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .38rem .9rem;
  border-radius: var(--r) 0 var(--r) 0;
}

.oppf-nr {
  font-family: var(--mono); font-weight: 700;
  font-size: 2.5rem; line-height: 1; letter-spacing: -.05em;
  color: var(--line); text-align: center;
}
.oppf.vinner .oppf-nr { color: var(--cobalt); }

/* Logoen gjør raden gjenkjennelig før teksten leses. Den ligger i en egen
   boks med fast høyde slik at seks logoer i ulike formater får samme
   optiske vekt, i stedet for at den bredeste tar over listen. */
.oppf-logo {
  height: 34px; width: auto; max-width: 190px;
  object-fit: contain; object-position: left center;
  margin-bottom: .7rem;
}

/* Ordmerke for panelene vi ikke har logo for. Satt i sidens egen skrift slik
   at det ser bevisst ut, ikke som en logo som ikke lastet. */
.oppf-merke {
  display: inline-block; margin-bottom: .7rem;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em;
  color: var(--ink-3);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .3rem .7rem;
}

.oppf-navn { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.oppf-eier { font-size: .88rem; color: var(--grey-light); margin-top: .1rem; }

.oppf-punkter { list-style: none; margin-top: .85rem; display: grid; gap: .4rem; }
.oppf-punkter li {
  font-size: .95rem; color: var(--ink-2);
  padding-left: 1.5rem; position: relative;
}
.oppf-punkter li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--cobalt); border-bottom: 2px solid var(--cobalt);
  transform: rotate(-45deg);
}
.oppf-punkter li.minus::before {
  border-left: 0; border-bottom: 2px solid var(--grey-light);
  transform: none; width: 10px; top: .72em;
}

.oppf-hoyre { text-align: center; }
/* Stjernene er avrundet til nærmeste halve. Tallet ved siden av er det
   presise, slik at ingen tror 4,4 og 4,6 er samme vurdering. */
.stjerner { display: inline-flex; gap: 2px; margin-bottom: .35rem; }
.stjerner svg { width: 17px; height: 17px; display: block; }
.stjerner .fyll { fill: var(--cobalt); }
.stjerner .tom { fill: var(--line); }

.oppf-kar {
  font-family: var(--mono); font-weight: 700;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.04em; color: var(--ink);
}
.oppf-kar small { font-size: .9rem; font-weight: 500; color: var(--grey-light); letter-spacing: 0; }
.oppf-karlab {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey-light); margin: .3rem 0 .9rem;
}
.oppf-hoyre .btn { width: 100%; justify-content: space-between; }
.oppf-merk {
  font-size: .72rem; color: var(--grey-light); margin-top: .55rem;
  max-width: none; line-height: 1.45;
}
.oppf-les {
  display: inline-block; margin-top: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--cobalt-deep); text-decoration: none;
}
.oppf-les:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .oppf { grid-template-columns: 44px 1fr; padding: 1.4rem 1.3rem; }
  .oppf.vinner { padding-top: 2.4rem; }
  .oppf-nr { font-size: 1.9rem; align-self: start; padding-top: .2rem; }
  .oppf-hoyre {
    grid-column: 1 / -1; text-align: left;
    margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.3rem; align-items: center;
  }
  .oppf-kar { grid-row: 1; }
  .oppf-karlab { grid-row: 2; margin: 0; }
  .oppf-hoyre .btn { grid-column: 2; grid-row: 1 / 3; }
  .oppf-merk, .oppf-les { grid-column: 1 / -1; }
}

/* Fra og med plass sju blir radene kompakte. Tolv paneler i full høyde ville
   gjort listen uleselig, og de nederste er uansett ikke der leseren skal ende. */
.oppf.kort { padding: 1.2rem 1.5rem; }
.oppf.kort .oppf-nr { font-size: 1.7rem; }
.oppf.kort .oppf-navn { font-size: 1.15rem; }
.oppf.kort .oppf-merke { display: none; }
.oppf.kort .oppf-punkter { margin-top: .5rem; }
.oppf.kort .oppf-punkter li { font-size: .9rem; }
.oppf.kort .oppf-kar { font-size: 1.6rem; }
.oppf.kort .stjerner svg { width: 14px; height: 14px; }
.oppf.kort .oppf-logo { height: 24px; margin-bottom: .5rem; }

/* Det medlemmene melder. Ikke pynt: en konkret hendelse med et tall i
   flytter en leser mer enn en karakter gjør. */
.melding {
  margin-top: 1rem; padding: .85rem 1rem;
  background: var(--chalk); border-radius: var(--r-sm);
  font-size: .9rem; color: var(--ink-2); max-width: none;
}
/* Trustpilot-linjen. Nå som tallene er lest av førstehånds i nettleser, kan de
   stå med tall og antall. Antallet er halve poenget: 4,3 av 778 og 3,2 av 1 er
   ikke samme opplysning. */
/* Vanlig tekstflyt, ikke flex: linjen bærer nå en hel setning hos noen
   paneler, og flex brøt den midt i tallet. */
.tp {
  margin-top: .75rem; font-size: .84rem; color: var(--grey);
  line-height: 1.55; max-width: none;
}
.tp .kilde { margin-right: .45rem; }
.tp b { margin-right: .15rem; }
.tp b { font-weight: 700; color: var(--ink); font-family: var(--mono); font-size: .95rem; }
.tp .kilde { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-light); }
.tp.tynn b { color: var(--cobalt-deep); }

.melding b {
  display: block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--grey-light); margin-bottom: .3rem; font-weight: 500;
}
.oppf.vinner .melding { background: var(--cobalt-wash); }

/* ---------------- fremgangsmåte ---------------- *//* Fra og med plass sju blir radene kompakte. Tolv paneler i full høyde ville
   gjort listen uleselig, og de nederste er uansett ikke der leseren skal ende. */
.oppf.kort { padding: 1.2rem 1.5rem; }
.oppf.kort .oppf-nr { font-size: 1.7rem; }
.oppf.kort .oppf-navn { font-size: 1.15rem; }
.oppf.kort .oppf-merke { display: none; }
.oppf.kort .oppf-punkter { margin-top: .5rem; }
.oppf.kort .oppf-punkter li { font-size: .9rem; }
.oppf.kort .oppf-kar { font-size: 1.6rem; }
.oppf.kort .stjerner svg { width: 14px; height: 14px; }
.oppf.kort .oppf-logo { height: 24px; margin-bottom: .5rem; }

/* Det medlemmene melder. Ikke pynt: en konkret hendelse med et tall i
   flytter en leser mer enn en karakter gjør. */
.melding {
  margin-top: 1rem; padding: .85rem 1rem;
  background: var(--chalk); border-radius: var(--r-sm);
  font-size: .9rem; color: var(--ink-2); max-width: none;
}
/* Trustpilot-linjen. Nå som tallene er lest av førstehånds i nettleser, kan de
   stå med tall og antall. Antallet er halve poenget: 4,3 av 778 og 3,2 av 1 er
   ikke samme opplysning. */
/* Vanlig tekstflyt, ikke flex: linjen bærer nå en hel setning hos noen
   paneler, og flex brøt den midt i tallet. */
.tp {
  margin-top: .75rem; font-size: .84rem; color: var(--grey);
  line-height: 1.55; max-width: none;
}
.tp .kilde { margin-right: .45rem; }
.tp b { margin-right: .15rem; }
.tp b { font-weight: 700; color: var(--ink); font-family: var(--mono); font-size: .95rem; }
.tp .kilde { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-light); }
.tp.tynn b { color: var(--cobalt-deep); }

.melding b {
  display: block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--grey-light); margin-bottom: .3rem; font-weight: 500;
}
.oppf.vinner .melding { background: var(--cobalt-wash); }

/* ---------------- fremgangsmåte ---------------- */

/* Fremgangsmåten er en rekkefølge, ikke tre likeverdige bokser. Sporet under
   sier det: én kobolt linje gjennom hele bredden, med en node der hvert steg
   begynner. Ingen "Steg 1 / Steg 2"-etiketter — verbet er etiketten. */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  position: relative;
  padding-top: 2.6rem;
}
.steps::before {
  content: ""; position: absolute; top: 7px; left: 0; right: 0;
  height: 2px; background: var(--line);
}
.steps > div { position: relative; }
.steps > div::before {
  content: ""; position: absolute; top: -2.6rem; left: 0;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--surface); border: 2px solid var(--cobalt);
}
.steps > div:first-child::before { background: var(--cobalt); }
.steps h3 { margin-bottom: .5rem; }
.steps p { font-size: .96rem; color: var(--grey); }

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 2rem; gap: 2rem; }
  .steps::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; }
  .steps > div::before { top: 6px; left: -2rem; }
}

/* ---------------- ærlig-boks ---------------- */

.honest {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.9rem, 3.5vw, 2.8rem);
  box-shadow: var(--shadow);
}
.honest h3 { margin-bottom: .8rem; }
.honest p + p { margin-top: .9rem; }

/* ---------------- funn og kilder ---------------- */

/* Et funn som er alvorlig nok til å styre karakteren. Ikke pynt: dette er
   grunnen til at et panel står der det står, og det skal være mulig å lese
   bare denne boksen og skjønne hvorfor. */
.finding {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.6rem;
  margin: 2rem 0;
}
.finding h3 { font-size: 1.08rem; margin-bottom: .6rem; }
.finding p { font-size: .98rem; }
.finding p + p { margin-top: .8rem; }
.finding .tag {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cobalt-deep);
  display: block; margin-bottom: .7rem;
}

/* Kildene. En påstand om at et panel stenger kontoer må kunne etterprøves,
   ellers er den bare enda en anonym anklage på nettet. */
.kilder {
  border-top: 1px solid var(--line);
  margin-top: 3rem; padding-top: 1.5rem;
}
.kilder h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
.kilder ol { padding-left: 1.2rem; margin: 0; }
.kilder li { font-size: .9rem; color: var(--grey); }
.kilder li + li { margin-top: .5rem; }
.kilder a { word-break: break-word; }
.kilder .dato {
  font-family: var(--mono); font-size: .72rem; color: var(--grey-light);
  margin-top: 1rem; display: block;
}

/* Annonsemerkingen sto tidligere under hver enkelt knapp, tolv ganger på
   forsiden. Den står nå én gang, øverst i listen, der leseren møter den før
   den første knappen. Markedsføringsloven krever at reklame skal kunne
   gjenkjennes som reklame, ikke at setningen gjentas per rad. */
.merkelinje {
  margin-top: 1.1rem; padding: .8rem 1rem;
  background: var(--cobalt-wash); border-radius: var(--r-sm);
  font-size: .9rem; color: var(--ink-2); max-width: none;
}
.merkelinje strong { color: var(--cobalt-deep); }

/* Redaksjonsboksen. E-E-A-T-signalet er verdiløst hvis det bare står på en
   om-side ingen åpner, så det korte svaret på "hvem har skrevet dette" ligger
   på forsiden, mellom listen og resten. */
.redaksjon {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.redaksjon h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: .9rem; }
.redaksjon p { font-size: .98rem; }
.redaksjon p + p { margin-top: .8rem; }

.sist {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--grey-light); margin-top: 1.2rem !important;
  padding-top: .9rem; border-top: 1px solid var(--line);
  max-width: none;
}

/* sponsormerking */
.sponsor-note {
  background: var(--cobalt-wash);
  border-radius: var(--r);
  padding: 1.1rem 1.3rem;
  font-size: .93rem;
  color: var(--ink-2);
  max-width: none;
}
.sponsor-note b {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cobalt-deep);
  display: block; margin-bottom: .35rem;
}

/* ---------------- FAQ ---------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 1.35rem 3rem 1.35rem 0;
  font-weight: 600; font-size: 1.06rem; color: var(--ink);
  cursor: pointer; list-style: none; position: relative;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cobalt-deep); }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1.8px solid var(--grey); border-bottom: 1.8px solid var(--grey);
  transform: rotate(45deg);
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .answer { padding: 0 0 1.5rem; color: var(--grey); }
.faq .answer p + p { margin-top: .8rem; }

/* ---------------- skjema ---------------- */

.form-grid { display: grid; gap: 1.2rem; max-width: 520px; }
.field label {
  display: block; font-weight: 600; font-size: .93rem;
  color: var(--ink); margin-bottom: .4rem;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--font); font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: .78rem .9rem;
  transition: border-color .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #7b838f; }
.field input:focus, .field textarea:focus { border-color: var(--cobalt); }
.field .help { font-size: .84rem; color: var(--grey); margin-top: .35rem; }
.field textarea { resize: vertical; min-height: 140px; }

/* ---------------- footer ---------------- */

.foot {
  background: var(--ink);
  color: #98a1ad;
  padding: clamp(3.5rem, 6vw, 5rem) 0 2.2rem;
}
.foot a { color: #c3cad4; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.foot .brand { color: #fff; margin-bottom: .9rem; }
.foot h4 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: #6f7885; margin-bottom: 1rem; font-weight: 500;
}
.foot ul { list-style: none; display: grid; gap: .6rem; }
.foot p { font-size: .93rem; max-width: 40ch; }
.foot-base {
  padding-top: 1.6rem; font-size: .85rem; color: #6f7885;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------------- bevegelse ---------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}