:root {
  --bg: #fafaf8;
  --surface: #ffffff;
  --ink: #17123a;
  --ink-soft: #6c6980;
  --violet-soft: #efeef3;
  --dark: #17123a;
  --mint: #5ce6a9;
  --mint-deep: #0e7a52;
  --mint-soft: #e0faee;
  --sun: #ffd84d;
  --sun-soft: #fff6d6;
  --coral: #f5b301;
  --line: #e8e6e1;
  --r: 4px;
  --r-lg: 6px;
  --maxw: 1140px;
  --display: 'Geist', system-ui, sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--display);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
h1,
h2,
h3,
h4 {
  letter-spacing: -0.035em;
  font-weight: 600;
}
a {
  color: inherit;
}
section {
  padding: 76px 0;
}

/* ---------- Prototypebanner ---------- */
.proto {
  background: var(--sun-soft);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 10px 24px;
  font-size: 0.84rem;
  color: #6b5a10;
}
.proto b {
  font-weight: 600;
}

/* ---------- Reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal.d1 {
  transition-delay: 0.08s;
}
.reveal.d2 {
  transition-delay: 0.16s;
}
.reveal.d3 {
  transition-delay: 0.24s;
}
.reveal.d4 {
  transition-delay: 0.32s;
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
}
.logo b {
  color: var(--mint-deep);
}
.btn {
  border-radius: var(--r);
  padding: 11px 20px;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  border: 1px solid transparent;
  transition: transform 0.18s ease;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-ghost {
  border-color: var(--line);
  background: var(--surface);
  /* Eksplisitt farge: inne i .cta arver den ellers color:#fff og blir hvit
     tekst paa hvit knapp. */
  color: var(--ink);
}
.btn-mint {
  background: var(--mint);
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  padding: 84px 0 30px;
  text-align: center;
}
.kicker {
  display: inline-block;
  background: var(--mint-soft);
  color: var(--mint-deep);
  border-radius: 3px;
  padding: 6px 13px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.03;
  margin-bottom: 18px;
}
.hero p {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  max-width: 640px;
  margin: 0 auto 28px;
}
.hl-circle {
  position: relative;
  white-space: nowrap;
  isolation: isolate;
}
.hl-circle svg {
  position: absolute;
  z-index: -1;
  left: -13%;
  top: -47%;
  width: 126%;
  height: 172%;
  pointer-events: none;
}
.hl-circle path {
  stroke: var(--coral);
  stroke-width: 4.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.in .hl-circle path {
  animation: draw 1.1s 0.3s ease forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Stjernerad som fylles én etter én */
.stars {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 26px;
}
.stars svg {
  width: 26px;
  height: 26px;
}
.stars svg path {
  fill: var(--line);
}
.in .stars svg path {
  animation: pop 0.45s ease forwards;
}
.in .stars svg:nth-child(1) path {
  animation-delay: 0.5s;
}
.in .stars svg:nth-child(2) path {
  animation-delay: 0.64s;
}
.in .stars svg:nth-child(3) path {
  animation-delay: 0.78s;
}
.in .stars svg:nth-child(4) path {
  animation-delay: 0.92s;
}
.in .stars svg:nth-child(5) path {
  animation-delay: 1.06s;
}
@keyframes pop {
  0% {
    fill: var(--line);
    transform: scale(1);
  }
  50% {
    transform: scale(1.28);
  }
  100% {
    fill: var(--sun);
    transform: scale(1);
  }
}

.sec-head {
  max-width: 660px;
  margin-bottom: 40px;
}
.sec-head.mid {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sec-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.06;
  margin-bottom: 14px;
}
.sec-head p {
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.cols3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Rutenettet hadde ingen bruddpunkter og stod paa tre kolonner ogsaa paa
   telefon. Det var kilden til de fleste elementene som stakk utenfor. */
@media (max-width: 900px) {
  .cols3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .cols3 {
    grid-template-columns: 1fr;
  }
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}
.card h3 {
  font-size: 1.06rem;
  margin-bottom: 8px;
}
.card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Motoren: animert baneflyt ---------- */
.engine {
  background: var(--dark);
  border-radius: var(--r-lg);
  padding: 44px 32px;
  color: #fff;
  overflow: hidden;
}
.engine h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.engine .lead {
  color: #b9b5c9;
  font-size: 0.95rem;
  margin-bottom: 34px;
  max-width: 560px;
}
.track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  position: relative;
}
.rail {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 27px;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.rail::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 22%;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
}
.in .rail::after {
  animation: slide 3.4s 0.4s linear infinite;
}
@keyframes slide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(560%);
  }
}
.node {
  text-align: center;
  position: relative;
}
/* Nummer i stedet for emoji. Emoji tegnes av operativsystemet i sine egne
   farger, saa et roedt sporsmaalstegn og en oransje blyant havnet midt i en
   laast palett av blekk, mynte og gult. Tallet holder seg i paletten og sier
   dessuten hvilken rekkefoelge stegene kommer i, som var hele poenget. */
.node .dot {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #241e52;
  border: 1px solid rgba(92, 230, 169, 0.32);
  color: var(--mint);
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.in .node .dot {
  animation: light 0.5s ease forwards;
}
.in .node:nth-child(2) .dot {
  animation-delay: 0.5s;
}
.in .node:nth-child(3) .dot {
  animation-delay: 0.9s;
}
.in .node:nth-child(4) .dot {
  animation-delay: 1.3s;
}
.in .node:nth-child(5) .dot {
  animation-delay: 1.7s;
}
.in .node:nth-child(6) .dot {
  animation-delay: 2.1s;
}
@keyframes light {
  to {
    background: var(--mint-deep);
    border-color: var(--mint);
    box-shadow: 0 0 0 6px rgba(92, 230, 169, 0.12);
  }
}
.node h4 {
  font-size: 0.94rem;
  margin-bottom: 4px;
}
.node p {
  color: #a9a4bd;
  font-size: 0.82rem;
  line-height: 1.5;
}
@media (max-width: 860px) {
  .track {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .rail {
    display: none;
  }
  /* Tre barn i to kolonner: prikken, overskriften og avsnittet. Uten
     eksplisitt plassering falt avsnittet ned i foerste kolonne, som er like
     bred som prikken, og brakk til ett ord per linje. */
  .node {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    row-gap: 2px;
    text-align: left;
    align-items: start;
  }
  .node .dot {
    margin: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .node h4,
  .node p {
    grid-column: 2;
  }
}

/* ---------- Interaktiv regelport ---------- */
.gate {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .gate {
    grid-template-columns: 1fr;
  }
}
.rules {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.rules h4 {
  font-size: 0.98rem;
  margin-bottom: 4px;
}
.rules > p {
  color: var(--ink-soft);
  font-size: 0.86rem;
  margin-bottom: 16px;
}
.rule {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  cursor: pointer;
}
.rule input {
  margin-top: 4px;
  accent-color: var(--mint-deep);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.rule span small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.79rem;
  line-height: 1.45;
}
.queue {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.queue-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.queue-head b {
  color: var(--ink);
  font-weight: 600;
}
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  transition:
    background 0.3s ease,
    opacity 0.3s ease;
}
.row:first-child {
  border-top: 0;
}
.row .who {
  flex: 1;
  min-width: 0;
}
.row .who small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.tag {
  font-size: 0.74rem;
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: 500;
}
.tag.go {
  background: var(--mint-soft);
  color: var(--mint-deep);
}
.tag.stop {
  background: var(--violet-soft);
  color: var(--ink-soft);
}
.row[data-state='stopped'] {
  background: #fbfbfa;
  opacity: 0.62;
}

/* ---------- Skjermbilde-mock ---------- */
.shot {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 50px -30px rgba(23, 18, 58, 0.4);
}
.shot-bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfa;
}
.shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.shot-body {
  padding: 24px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}
.stat small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.74rem;
  margin-bottom: 2px;
}
.stat b {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.field {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: 0.87rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
  background: #fdfdfc;
}
.field b {
  display: block;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  margin-bottom: 3px;
}
@media (max-width: 700px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Kilde/eierskap ---------- */
.flow {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: center;
  gap: 12px;
}
.flow-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.flow-box h4 {
  font-size: 0.98rem;
  margin-bottom: 12px;
}
.pill {
  display: inline-block;
  background: var(--violet-soft);
  border-radius: 3px;
  padding: 5px 11px;
  font-size: 0.82rem;
  margin: 0 6px 6px 0;
}
.arrow {
  height: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--mint-deep);
}
.in .arrow::after {
  animation: flowRight 1.9s linear infinite;
}
@keyframes flowRight {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(260%);
  }
}
.flow-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-top: 16px;
  max-width: 700px;
}
@media (max-width: 900px) {
  .flow {
    grid-template-columns: 1fr;
  }
  .arrow {
    height: 40px;
    width: 3px;
    margin: 0 auto;
  }
  .arrow::after {
    width: 100%;
    height: 40%;
    animation-name: flowDown;
  }
  @keyframes flowDown {
    0% {
      transform: translateY(-110%);
    }
    100% {
      transform: translateY(260%);
    }
  }
}

/* ---------- Maaling ---------- */
.split2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 860px) {
  .split2 {
    grid-template-columns: 1fr;
  }
}
.panel {
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1px solid var(--line);
}
.panel.yes {
  background: var(--mint-soft);
  border-color: #c5f0dc;
}
.panel.no {
  background: var(--surface);
}
.panel h3 {
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.panel li {
  list-style: none;
  padding: 7px 0 7px 26px;
  position: relative;
  font-size: 0.93rem;
}
.panel.yes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--mint-deep);
  font-weight: 700;
}
.panel.no li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: var(--ink-soft);
  font-weight: 700;
}
.panel.no li {
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */
/* Bundet til .reveal og ikke til `details` alene: menyene er ogsaa
   details-elementer, og en naken elementselektor ga dem FAQ-rammen og et
   pluss-tegn. «Moduler+» i en hvit boks midt i headeren. */
details.reveal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
}
details.reveal > summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.98rem;
  list-style: none;
}
details.reveal > summary::-webkit-details-marker {
  display: none;
}
details.reveal > summary::after {
  content: '+';
  float: right;
  color: var(--ink-soft);
}
details.reveal[open] > summary::after {
  content: '–';
}
details.reveal p {
  color: var(--ink-soft);
  font-size: 0.93rem;
  margin-top: 10px;
}

/* ---------- CTA ---------- */
.cta {
  background: var(--dark);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 56px 40px;
  text-align: center;
}
.cta h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 12px;
}
.cta p {
  color: #c9c6d6;
  margin-bottom: 24px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Sidekart ---------- */
.map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 860px) {
  .map {
    grid-template-columns: 1fr;
  }
}
.map div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 0.9rem;
}
.map b {
  display: block;
  font-weight: 600;
}
.map small {
  color: var(--ink-soft);
  font-size: 0.79rem;
}
.st {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
}
.st.live {
  background: var(--mint-soft);
  color: var(--mint-deep);
}
.st.soon {
  background: var(--sun-soft);
  color: #7a6410;
}

footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 30px 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce) {
  .in .hl-circle path,
  .in .stars svg path,
  .in .node .dot,
  .in .rail::after,
  .in .arrow::after {
    animation: none;
  }
  .hl-circle path {
    stroke-dashoffset: 0;
  }
  .stars svg path {
    fill: var(--sun);
  }
  .node .dot {
    background: var(--mint-deep);
    border-color: var(--mint);
  }
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
footer a {
  margin-right: 16px;
}

/* Tallrad, brukt der en modul har et tydelig foer og etter. */
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) {
  .figures {
    grid-template-columns: 1fr;
  }
}
.figure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}
.figure b {
  display: block;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.figure span {
  color: var(--ink-soft);
  font-size: 0.93rem;
}

/* Editor-mock: to spalter, maler til venstre og dokumentet til hoeyre. */
.editor {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 340px;
}
@media (max-width: 800px) {
  .editor {
    grid-template-columns: 1fr;
  }
}
.editor-side {
  border-right: 1px solid var(--line);
  background: #fbfbfa;
  padding: 16px;
}
@media (max-width: 800px) {
  .editor-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
.editor-side h5 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 10px;
}
.tpl {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  padding: 9px 11px;
  font-size: 0.85rem;
  margin-bottom: 7px;
}
.tpl[data-active='true'] {
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(92, 230, 169, 0.16);
}
.tpl small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.75rem;
}
.editor-doc {
  padding: 26px 30px;
  font-size: 0.92rem;
  line-height: 1.7;
}
.editor-doc h4 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}
.editor-doc p {
  margin-bottom: 10px;
}
.editor-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.87rem;
}
.editor-doc th,
.editor-doc td {
  border-bottom: 1px solid var(--line);
  padding: 7px 4px;
  text-align: left;
}
.editor-doc th {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.78rem;
}
.editor-doc td:last-child,
.editor-doc th:last-child {
  text-align: right;
}
/* Flettefelt: markert i editoren, vanlig tekst naar dokumentet er sendt. */
.merge {
  background: var(--sun-soft);
  border-bottom: 1px dashed var(--coral);
  padding: 0 2px;
  border-radius: 2px;
}
.sig-slot {
  margin-top: 22px;
  border: 1px dashed var(--mint-deep);
  background: var(--mint-soft);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 0.82rem;
  color: var(--mint-deep);
}

/* ---------- Portal-mockup med merkevare ----------
   En side som lover at kunden ser DIN logo maa vise det, ikke paastaa det.
   Fargen settes med --brand per instans, saa foer og etter er samme markup. */
.brandshot {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 50px -30px rgba(23, 18, 58, 0.4);
  --brand: var(--ink);
}
.brandshot-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfa;
}
.brandshot-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--brand);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex: none;
}
.brandshot-name {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}
.brandshot-user {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--violet-soft);
}
.brandshot-body {
  padding: 18px;
}
.brandshot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 0.87rem;
}
.brandshot-row:first-child {
  border-top: 0;
}
.brandshot-row span:first-child {
  flex: 1;
}
.brandshot-pill {
  background: color-mix(in srgb, var(--brand) 14%, white);
  color: var(--brand);
  border-radius: 3px;
  padding: 3px 9px;
  font-size: 0.74rem;
  font-weight: 600;
}
.brandshot-btn {
  display: inline-block;
  margin-top: 14px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r);
  padding: 9px 16px;
  font-size: 0.83rem;
  font-weight: 500;
}
.brandshot-foot {
  border-top: 1px solid var(--line);
  padding: 10px 18px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Anmeldelseskort ---------- */
.reviews-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) {
  .reviews-row {
    grid-template-columns: 1fr;
  }
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.stars-row {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 10px;
}
.stars-row svg {
  width: 17px;
  height: 17px;
}
.stars-row svg path {
  fill: var(--sun);
}
.review-card p {
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.review-card footer {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
/* Plattformvalg: to kort, ett aktivt. */
.platform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 560px;
}
@media (max-width: 620px) {
  .platform {
    grid-template-columns: 1fr;
  }
}
.platform div {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  background: var(--surface);
  text-align: center;
}
.platform div[data-active='true'] {
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(92, 230, 169, 0.18);
}
.platform b {
  display: block;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.platform small {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.shot-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

/* ---------- Selvspillende demo ----------
   Fire steg som spiller i loekke og viser hva som faktisk skjer paa skjermen.
   Poenget er at en besoekende skal skjoenne modulen uten aa lese avsnittene.

   Ren CSS: animasjonen starter naar seksjonen kommer i syne (.in) og gaar i
   loekke. Ingen video aa laste, ingen GIF som blir uskarp, og teksten er ekte
   tekst som kan leses opp og oversettes. */
.demo {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 860px) {
  .demo {
    grid-template-columns: 1fr;
  }
}
.demo-steps {
  list-style: none;
  counter-reset: step;
}
.demo-steps li {
  counter-increment: step;
  position: relative;
  padding: 12px 0 12px 40px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  opacity: 0.45;
  transition: opacity 0.35s ease;
}
.demo-steps li:first-child {
  border-top: 0;
}
.demo-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--violet-soft);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
.demo-steps li b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.in .demo-steps li {
  animation: stepOn 16s infinite;
}
.in .demo-steps li::before {
  animation: stepDot 16s infinite;
}
.in .demo-steps li:nth-child(1),
.in .demo-steps li:nth-child(1)::before {
  animation-delay: 0s;
}
.in .demo-steps li:nth-child(2),
.in .demo-steps li:nth-child(2)::before {
  animation-delay: 4s;
}
.in .demo-steps li:nth-child(3),
.in .demo-steps li:nth-child(3)::before {
  animation-delay: 8s;
}
.in .demo-steps li:nth-child(4),
.in .demo-steps li:nth-child(4)::before {
  animation-delay: 12s;
}
@keyframes stepOn {
  0%,
  25% {
    opacity: 1;
  }
  26%,
  100% {
    opacity: 0.45;
  }
}
@keyframes stepDot {
  0%,
  25% {
    background: var(--mint-deep);
    color: #fff;
  }
  26%,
  100% {
    background: var(--violet-soft);
    color: var(--ink-soft);
  }
}

/* Skjermen: fire lag som byttes i takt med stegene. */
/* Rutenett og ikke absolutt posisjonering: alle rammene ligger i samme celle,
   saa boksen blir like hoey som den hoeyeste rammen. Med absolutt
   posisjonering satte den foerste hoeyden, og de andre ble klippet. */
.demo-screen {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 50px -30px rgba(23, 18, 58, 0.4);
}
.demo-frame {
  grid-area: 1 / 1;
  padding: 20px;
  opacity: 0;
  transform: translateY(8px);
}
.demo-frame:first-of-type {
  opacity: 1;
  transform: none;
}
.in .demo-frame {
  animation: frameOn 16s infinite;
}
.in .demo-frame:nth-of-type(1) {
  animation-delay: 0s;
}
.in .demo-frame:nth-of-type(2) {
  animation-delay: 4s;
}
.in .demo-frame:nth-of-type(3) {
  animation-delay: 8s;
}
.in .demo-frame:nth-of-type(4) {
  animation-delay: 12s;
}
@keyframes frameOn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  3%,
  25% {
    opacity: 1;
    transform: none;
  }
  28%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.demo-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.demo-mail {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  background: #fdfdfc;
  font-size: 0.88rem;
}
.demo-mail b {
  display: block;
  margin-bottom: 6px;
}
.demo-big {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-align: center;
  padding: 26px 0 10px;
}
.demo-mid {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .in .demo-steps li,
  .in .demo-steps li::before,
  .in .demo-frame {
    animation: none;
  }
  .demo-steps li {
    opacity: 1;
  }
  /* Uten bevegelse vises rammene under hverandre i stedet for aa byttes. */
  .demo-screen {
    display: block;
  }
  .demo-frame {
    opacity: 1;
    transform: none;
    border-top: 1px solid var(--line);
  }
}

/* ---------- Telefon ----------
   Alt under er maalt paa 390 px, ikke gjettet. Fire ting var galt: helten
   spiste to skjermhoeyder foer du hadde lest ett ord om produktet, menyknappen
   og lenkene var under 44 px slik at de var vanskelige aa treffe, menypanelet
   var bredere enn skjermen, og en del tekst laa nede paa 12 px. */
@media (max-width: 560px) {
  /* Begge klassene: headeren er <div class="nav wrap">, og `.wrap`-regelen
     lenger ned satte `padding: 0 18px`, som nullet luften over og under.
     Knappen fylte da hele headeren og laa klistret mot toppkanten. */
  .nav.wrap {
    padding: 10px 18px;
    gap: 10px;
  }

  /* Helten var 1667 px paa en skjerm som er 844. Naa er den under én
     skjermhoeyde, saa det foerste avsnittet om produktet er synlig med én gang. */
  .hero {
    padding: 40px 0 18px;
  }
  .hero h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.3rem);
    margin-bottom: 14px;
  }
  .hero p {
    font-size: 1rem;
  }
  section {
    padding: 42px 0;
  }
  .wrap {
    padding: 0 18px;
  }

  /* FAQ-radene var 26 px hoeye. Overskriften faar hele bredden som trykkflate. */
  details.reveal > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Kryssnavigasjonen mellom modulene: lenka var bare 18 px hoey fordi bare
     selve teksten var klikkbar. Naa er hele kortet trykkflaten. */
  .map div {
    padding: 0;
  }
  .map div > b > a {
    display: block;
    padding: 16px 16px 5px;
  }
  .map div > small {
    display: block;
    padding: 0 16px 15px;
  }

  /* Etikettene med store bokstaver laa paa 11.8 px. */
  .kicker,
  .mnav-head {
    font-size: 0.76rem;
  }

  /* Bunnlenkene laa paa 18 px og stod klistret inntil hverandre. */
  footer .wrap {
    gap: 4px;
  }
  footer a {
    display: inline-block;
    padding: 13px 10px 13px 0;
  }

  /* Ingen brukstekst under 12.8 px. Merkelappene laa paa 11.8.
     Selektorene er med vilje like spesifikke som de de skal slaa: en naken
     `small` taper mot `.mega-panel small` og gjorde ingenting foerste forsoek. */
  .row .tag,
  .queue .tag,
  .tag,
  .demo-title,
  .demo-steps li,
  small,
  .card p small,
  .mega-panel small,
  .map small,
  footer,
  .flow-note {
    font-size: 0.8rem;
  }
}

/* ---------- Telefon, siste runde ----------
   Restene etter foerste gjennomgang, maalt og ikke gjettet. */
@media (max-width: 560px) {
  /* Avkrysningsboksene i regelporten var 15 px. Hele raden er trykkflaten,
     og boksen selv er skalert opp til noe man treffer med tommelen. */
  .rule {
    min-height: 44px;
    align-items: center;
    padding: 11px 0;
  }
  .rule input {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  /* FAQ-radene laa paa 43,x og ble avrundet til 44. To piksler til, og de er
     dessuten behageligere aa treffe. */
  details.reveal > summary {
    min-height: 46px;
  }

  /* Gulv for tekststoerrelse. Bevisst !important: jeg har jaget spesifisitet
     to ganger her og tapt begge, og poenget med et gulv er nettopp at
     ingenting skal komme under det uansett hvilken regel som ellers vinner. */
  .tag,
  small,
  .st,
  .shot-label,
  .brandshot-logo,
  .brandshot-pill,
  .brandshot-foot,
  .demo-title,
  .kicker,
  .mnav-head {
    font-size: 0.76rem !important;
  }
}