/* ==========================================================================
   FORSIDE4, siteremake.no (eieren 11/10, Fable-specen og orkestrerarens beslutninger).
   Lastes bare på norske vertar og er skopet under body.mk-no, så .se er uendret.
   FORSIDE5 (Astra varv 1): designet først, ingen gjentakelser. Fargerytme: header papir-2, hero papir
   med linje over og under (e-postmalen), eksempler papir-2, endre marine, argumenter papir, priser
   papir-2, team papir, forslag marine, spørsmål marine-2, lynsjekk papir, bunn marine.
   FORSIDE6 (Fable 5.1 high, grafisk gjennomgang): ett visuelt språk, se blokken nederst. Outfit 600 i
   rubrikker, tall og spørsmål, Instrument Serif kursiv bare i H1-aksenten, Inter i brødtekst. Én lys flate
   og marine med ekte kontrast, kort uten ramme med myk skygge, radiene 10/16/24 og ravfarge bare på
   hovedhandlingen. Reglene nederst går foran de eldre over.
   ========================================================================== */

.mk-no {
  --line-paper: #e3d8c6;
  --ok: #159257; --warn: #d9a400; --bad: #d94a49;
  --gauge: 64px;
}
@media (min-width: 960px) { .mk-no { --gauge: 88px; } }

/* ---- Header: lys, med den mørke logoen ------------------------------ */
.mk-no header { background: var(--paper-2); border-bottom-color: var(--line-paper); }
.mk-no .nav a:not(.brand) { color: var(--dark-ink-dim); }
.mk-no .nav a:not(.brand):hover { color: var(--dark-ink); }
.mk-no .nav a.nav-cta, .mk-no .nav a.nav-cta:hover { color: var(--navy); }
.mk-no .nav-links a::after { background: var(--brass-ink); }
.mk-no .nav-menu summary { color: var(--dark-ink); }
.mk-no .nav-menu summary::after { color: var(--brass-ink); }
.mk-no .nav-menu nav { background: var(--paper-2); border-bottom-color: var(--line-paper); }
.mk-no header :focus-visible { outline-color: var(--brass-ink); }

/* ---- Hero i e-postmalens form ---------------------------------------- */
.mk-no .hero.hn { padding: var(--s5) 0 var(--s6); background: var(--paper); color: var(--dark-ink); border-block: 1px solid var(--line-paper); }
.hn-wrap { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100% - 2 * var(--pad-x), var(--w-page) - 2 * var(--pad-x)); margin-inline: auto; }
.hn-copy, .hn-enh, .hn-tool { min-width: 0; }
.hn-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 28px; margin: 0 0 var(--s4); padding: 0 var(--s3); border: 1px solid var(--line-paper); border-radius: var(--r-pill); background: var(--paper-2); color: var(--dark-ink); font: 600 13px/1.2 var(--sans); }
.hn-flagg { flex: none; display: block; border-radius: 1px; }
.mk-no .hero.hn h1 { max-width: none; margin: 0 0 var(--s3); font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 40px; letter-spacing: .3px; color: var(--navy); text-wrap: balance; }
.mk-no .hero.hn .lead { max-width: 44ch; margin: 0 0 var(--s5); font-size: 16px; line-height: 24px; color: var(--dark-ink-dim); }
.hn-eks { display: inline-flex; align-items: center; gap: var(--s1) var(--s2); margin-left: auto; }
.hn-apne, .ak-apne { display: inline-flex; align-items: center; min-height: 44px; color: var(--brass-ink); font: 600 .8125rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hn-apne:hover, .ak-apne:hover { color: var(--dark-ink); }
.hn-tag { padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--paper-3); color: var(--dark-ink); font: 700 .75rem/1.2 var(--sans); white-space: nowrap; }
.hn-tool { margin-top: var(--s5); }
.mk-no .hn .try-row { box-shadow: inset 0 0 0 1px var(--line-dark-strong); }
.mk-no .hn .try-row:focus-within, .mk-no .hn .try-field:focus-within { outline-color: var(--brass-ink); }
@container try (max-width: 459.98px) {
  .mk-no .hn .try-row { box-shadow: none; }
  .mk-no .hn .try-field { box-shadow: inset 0 0 0 1px var(--line-dark-strong); }
  .mk-no .hn .try-row .btn:focus-visible { outline-color: var(--brass-ink); }
}
.hn-rad { max-width: none; margin: var(--s2) 0 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--dark-ink-dim); }
.hn-tool .try + .hn-rad { margin-top: var(--s3); }
@media (min-width: 1000px) {
  .mk-no .hero.hn { padding: var(--s8) 0; }
  .hn-copy { grid-area: copy; align-self: end; }
  .hn-tool { grid-area: tool; align-self: start; }
  .mk-no .hero.hn h1 { font-size: 58px; line-height: 1.05; margin-bottom: var(--s4); }
  .hn-rad { text-align: left; }
}

/* ---- Mer enn et nytt utseende: lav driftskostnad og flere kunder ------ */
.mk-no section.arg { background: var(--paper); color: var(--dark-ink); }
.mk-no .priser-no .eyebrow-brand { color: var(--brass-ink); }
.mk-no .arg .sec-head h2 { color: var(--dark-ink); }
.arg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); max-width: var(--w-mid); margin: 0 auto; }
@media (min-width: 960px) { .arg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); align-items: start; } }
.arg-kort { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; padding: var(--pad-card); background: var(--paper-2); border: 1px solid var(--line-paper); border-radius: 20px; }
.arg-kort h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: 0; color: var(--navy); }
@media (min-width: 960px) { .arg-kort h3 { font-size: 26px; } }
.arg-tekst { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--dark-ink-dim); }
/* Lav driftskostnad: stort tall og en tidslinje. */
.arg-tall { margin: 0; font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--navy); white-space: nowrap; }
.arg-under { margin: calc(-1 * var(--s3)) 0 0; font-size: .9375rem; color: var(--dark-ink-dim); }
.tl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s1); }
.tl-seg { display: grid; align-content: start; gap: 2px; max-width: none; margin: 0; font-size: .8125rem; line-height: 1.3; color: var(--dark-ink-dim); }
.tl-seg b { color: var(--dark-ink); font-weight: 600; }
.tl-bar { display: block; height: 12px; margin-bottom: var(--s1); border-radius: var(--r-pill); }
.tl-1 .tl-bar { background: var(--amber); }
.tl-2 .tl-bar { height: 4px; margin-block: 4px calc(var(--s1) + 4px); background: repeating-linear-gradient(90deg, var(--navy) 0 14px, transparent 14px 20px); }
/* Flere kunder: målere og tabell, målt på eksempelsidene i static/forside/eksempel/. */
.ak-head { display: grid; gap: var(--s2); }
.ak-grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .ak-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: var(--s6); } }
.mr-tab, .bt-tab { width: 100%; }
.mr-tab { border-collapse: collapse; }
.mr-tab thead th { padding: 0 var(--s1) var(--s2); color: var(--dark-ink); font: 700 .8125rem/1.25 var(--sans); text-align: center; }
.mr-tab tbody th { width: 34%; padding-right: var(--s2); color: var(--dark-ink-dim); font: 500 .8125rem/1.3 var(--sans); text-align: left; }
.mr-tab thead .mr-ny { color: var(--dark-ink); }
.mr-tab tbody th { color: var(--dark-ink); font-weight: 600; }
.mr-tab td { padding: var(--s3) 0; text-align: center; }
.mr-tab tbody tr + tr > * { border-top: 1px solid var(--line-paper); }
.mr { position: relative; display: inline-grid; place-items: center; width: var(--gauge); height: var(--gauge); }
.mr-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mr-spor { fill: none; stroke: var(--line-dark); stroke-width: 6; }
.mr-bue { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 175.9; }
.mr-ok .mr-bue { stroke: var(--ok); } .mr-warn .mr-bue { stroke: var(--warn); } .mr-bad .mr-bue { stroke: var(--bad); }
.mr-tall { position: relative; display: grid; justify-items: center; font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--dark-ink); }
@media (min-width: 960px) { .mr-tall { font-size: 28px; } }
.mr-tall small { margin-top: 2px; font: 11px/1.2 var(--sans); color: var(--dark-ink-dim); }
.mr-grad { display: block; margin-top: var(--s1); font-size: .75rem; color: var(--dark-ink-dim); }
.bt-tab { border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.bt-tab thead th { padding: var(--s2); color: var(--dark-ink); font: 700 .8125rem/1.25 var(--sans); text-align: center; }
.bt-tab tbody th { padding: var(--s2) var(--s2) var(--s2) 0; border-top: 1px solid var(--line-paper); color: var(--dark-ink); font-weight: 500; line-height: 1.35; text-align: left; }
.bt-tab td { width: 22%; padding: var(--s2); border-top: 1px solid var(--line-paper); text-align: center; }
.bt-tab .bt-ny { background: var(--paper); border-inline: 1.5px solid var(--navy); }
.bt-tab thead .bt-ny { border-top: 1.5px solid var(--navy); border-radius: 12px 12px 0 0; }
.bt-tab tbody tr:last-child .bt-ny { border-bottom: 1.5px solid var(--navy); border-radius: 0 0 12px 12px; }
.bt-tab .ic { width: 20px; height: 20px; stroke-width: 2.4; vertical-align: middle; }
.bt-ja { color: var(--ok); } .bt-nei { color: var(--bad); }
.ak-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--dark-ink-dim); }
/* Ferdig før du betaler, i priskortet: tre steg med hake og løftene. */
.pn-ferdig-h { margin: var(--s5) 0 var(--s3); color: var(--dark-ink); font: 700 .8125rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.mk-no .price-main .af-lofter { margin-top: var(--s4); }
.af-steg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.af-steg li { display: grid; justify-items: center; gap: var(--s2); color: var(--dark-ink); font: 600 .8125rem/1.25 var(--sans); text-align: center; }
.af-bock { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ok); color: #fff; }
.af-bock .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.af-lofter { display: grid; gap: var(--s3); margin: 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line-paper); list-style: none; }
.af-lofter li { display: flex; align-items: flex-start; gap: var(--s3); color: var(--dark-ink); font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.af-lofter .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--brass-ink); }
.af-lofter small { display: block; margin-top: 2px; color: var(--dark-ink-dim); font-size: .8125rem; font-weight: 400; }
.pn-fotnote { margin: var(--s3) 0 0; font-size: 12px; line-height: 1.4; color: var(--dark-ink-dim); }
.mk-no .arg :focus-visible { outline-color: var(--brass-ink); }

/* ---- Ferdig laget. Enkelt å endre. (marine) -------------------------- */
.mk-no section.endre-no { background: var(--navy); border-top: 0; }
.mk-no .endre-no .sec-head h2 { color: var(--ink); }
.mk-no .endre-no .sec-head p { color: var(--ink-dim); }
.mk-no .endre-no .endre-eller::before { border-color: var(--line-strong); }
.mk-no .endre-no .endre-eller span { background: var(--navy); border-color: var(--line-strong); color: var(--ink-dim); }
.endre-merke { display: grid; place-items: center; width: var(--foto-sm); height: var(--foto-sm); border-radius: 50%; background: var(--paper-3); }
.endre-merke img { display: block; width: 32px; height: 32px; }
.endre-valg { justify-self: start; margin: 0; padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: #fff3e3; color: var(--brass-ink); font: 700 .8125rem/1.3 var(--sans); }
@media (min-width: 860px) {
  .endre-merke { width: var(--foto-lg); height: var(--foto-lg); }
  .endre-merke img { width: 44px; height: 44px; }
}

/* ---- Eksempler rett etter heroen (papir-2), jevnt 2 x 2 på PC --------- */
.mk-no #eksempler.eks-no { background: var(--paper-2); border-bottom: 1px solid var(--line-paper); }
.mk-no .eks-no .ex-meta .btn-a:focus-visible, .mk-no #eksempler.eks-no .ex-grid:focus-visible { outline-color: var(--brass-ink); }
.mk-no .ex-fikt { max-width: none; margin: var(--s5) 0 0; text-align: center; font-size: .875rem; color: var(--dark-ink-dim); }
@media (min-width: 761px) {
  .mk-no .eks-no .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--w-ex); margin-inline: auto; }
  .mk-no .eks-no .ex-item, .mk-no .eks-no .ex-item:nth-child(n) { grid-column: auto; margin-top: 0; }
  .mk-no .eks-no .ex-sm .devices { max-width: none; }
}

/* ---- Priser (papir-2) ------------------------------------------------- */
.mk-no #priser.priser-no { background: var(--paper-2); color: var(--dark-ink); }
.mk-no .priser-no .sec-head h2 { color: var(--dark-ink); }
/* FORSIDE7 (Astra varv 2): denne selektoren slo FORSIDE6-reglene på spesifisitet; kortet følger nå språket (hvitt, skygge, ingen ramme). */
.mk-no .priser-no .price-site { border: 0; border-radius: var(--r-lg); }
.mk-no .priser-no .price-site .amt-sub { margin-bottom: 0; }
.mk-no .priser-no .price-more { border-color: var(--line-dark); color: var(--dark-ink-dim); }
.mk-no .priser-no .price-more summary { color: var(--dark-ink); }
.mk-no .priser-no .price-more summary::after { color: var(--brass-ink); }
.mk-no .priser-no .svc-row { border-top-color: var(--line-dark); grid-template-areas: "ic name amt" "ic desc desc"; }
.mk-no .priser-no .svc-ic { border-color: var(--line-dark-strong); color: var(--brass-ink); }
.mk-no .priser-no .svc-name, .mk-no .priser-no .svc-amt { color: var(--dark-ink); }
.mk-no .priser-no .svc-desc, .mk-no .priser-no .services-intro { color: var(--dark-ink-dim); }
.mk-no .priser-no .services-intro a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brass-ink); text-decoration: underline; text-underline-offset: 3px; }
.mk-no .priser-no :focus-visible, .mk-no .priser-no .price-more summary:focus-visible { outline-color: var(--brass-ink); }

/* ---- Laget av samme team: én linje (papir, tynn) --------------------- */
.mk-no section.team-no { padding: var(--s6) 0; background: var(--paper); color: var(--dark-ink); border-top: 1px solid var(--line-paper); }
.tn-rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s4); text-align: center; }
.tn-rad h2 { font-size: 20px; color: var(--dark-ink); }
.tn-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s4); margin: 0; padding: 0; list-style: none; }
.tn-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brass-ink); font-weight: 600; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; }
.tn-rad p { flex-basis: 100%; max-width: none; margin: 0; font-size: .875rem; color: var(--dark-ink-dim); }
.mk-no .team-no :focus-visible { outline-color: var(--brass-ink); }

/* ---- Kontakt oss (selskapet, ingen person) --------------------------- */
.kontakt-oss .ko-h { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s2); font-family: var(--serif); font-weight: 400; font-size: 1.375rem; letter-spacing: 0; color: var(--ink); }
.kontakt-oss .ko-h img { flex: none; width: 40px; height: 40px; padding: 6px; border-radius: 50%; background: var(--paper); }
.mk-no .forslag-person .kontakt-oss .contact-person-hours { margin-top: var(--s1); font-size: .9375rem; opacity: 1; color: var(--ink-dim); }

/* ---- Längdmålet (orkestrerarens beslutning 6): 390 cirka 8 000 px, 1440 cirka 7 000 px.
   Tettere seksjonsavstand på .no enn --sec-y i grunnarket (64 til 112 px). FORSIDE6: 56 px på mobil og
   80 px på PC (Fable: luften erstatter linjene), lengden holdes nede av det som er tatt bort. ---------- */
.mk-no { --sec-y: clamp(56px, 7vw, 80px); --sec-y-sm: clamp(40px, 4.5vw, 64px); }
.mk-no .sec-head { margin-bottom: clamp(24px, 3.4vw, 48px); }
@media (min-width: 1000px) {
  .hn-wrap { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: var(--s7); }
}
/* Eksempler på PC: rammen er smalere enn 460 px i 2 x 2, så den brede varianten settes fast. */
@media (min-width: 761px) {
  .mk-no .eks-no .ex-grid { gap: var(--s6) var(--s5); max-width: 800px; }
  .mk-no .eks-no .ex-stage { padding: var(--s5) var(--s5) var(--s6); }
  .mk-no .eks-no .devices { --bw: 76; --bt: 2.8; --pw: 30; --pt: 0; --ar: 57; }
}
/* Argumentene på mobil: litt tettere kort og tabeller. */
@media (max-width: 759.98px) {
  .arg-kort { gap: var(--s3); }
  .mr-tab td { padding: var(--s2) 0; }
  .bt-tab tbody th { font-size: .8125rem; }
  .bt-tab td { width: 20%; padding: var(--s1) var(--s2); }
}

/* ---- Längdmålet (specens avsnitt E): et strammere priskort. ---------------------------------- */
/* Priskortet: tettere liste og avstand. */
.mk-no .priser-no .price-site { gap: var(--s5) var(--gap-lg); padding: var(--pad-card); }
.mk-no .priser-no .price-site .amt { font-size: clamp(2.75rem, 4.4vw, 3.75rem); }
.mk-no .priser-no .price-site h3 { font-size: 1.5rem; }
.mk-no #priser .package-brief li { padding-block: var(--s2); }
.mk-no .priser-no .price-site .btn { margin-top: var(--s4); }
.mk-no .priser-no .price-more { margin-top: var(--s4); }
/* Eksempler på PC: lavere scene. */
@media (min-width: 761px) { .mk-no .eks-no .ex-stage { padding: var(--s4) var(--s5) var(--s5); } }
/* Målerne på mobil litt mindre. */
@media (max-width: 759.98px) { .mk-no { --gauge: 58px; } .mr-grad { margin-top: 2px; } }

/* ---- FORSIDE5: «Flere kunder» får bredden på PC (driftskortet smalt), og tabellene deler kortet likt. */
@media (min-width: 960px) {
  .arg-grid { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); }
  .arg-kunder .ak-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
  .mk-no { --gauge: 76px; }
}
/* Tabellene: radnavnet i haketabellen får plassen, kolonnetitlene smalere. */
.bt-tab tbody th { width: 52%; }
.bt-tab td { width: 24%; }
.bt-tab thead th, .mr-tab thead th { padding-inline: 2px; }
@media (max-width: 759.98px) { .bt-tab thead th, .mr-tab thead th { font-size: .75rem; } }
/* ---- Bunnen på mobil: Kontakt og Snarveier side om side, tettere luft (lengdemålet). ---------- */
@media (max-width: 859.98px) {
  .mk-no footer { padding-top: var(--s6); }
  .mk-no .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s5); }
  .mk-no .foot-brand { grid-column: 1 / -1; }
  .mk-no .foot-legal { margin-top: var(--s4); }
}

/* ==========================================================================
   FORSIDE6 (Fable 5.1 high, fable-GRAFISK.md, orkestrerarens beslut 2026-10-11): ett visuelt språk.
   De tolv endringene i specens rekkefølge. Alt er skopet under .mk-no; .se er uendret.
   ========================================================================== */

/* 1 og 2. Skrift, flater, skygger og radier som tokens. --serif peker på Outfit, så ingen regel i
   grunnarket kan hente en systemserif på .no. */
.mk-no {
  --serif: var(--brand-font); --font-heading: var(--brand-font);
  --paper: #f7f4ee; --paper-2: #f7f4ee; --paper-3: #efe9df; --tint: #efe9df;
  --navy-card: #15283a; --ok: #167a46; --bad: #c43d3c;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-bubble: 16px;
  --shadow-card: 0 1px 2px rgba(22,32,44,.05), 0 16px 40px -20px rgba(22,32,44,.22);
  --ring-dark: inset 0 0 0 1px rgba(244,239,230,.08);
  --rule: rgba(22,32,44,.10); --rule-dark: rgba(244,239,230,.12);
  --dark-bg: radial-gradient(90% 60% at 50% 0%, #182f44, var(--navy) 70%);
}
.mk-no main h1, .mk-no main h2, .mk-no main h3, .mk-no .amt, .mk-no .arg-tall, .mk-no .mr-tall, .mk-no .tn-rad h2, .mk-no .ko-h,
.mk-no .endre-kort h3, .mk-no .ex-meta h3, .mk-no .faq summary, .mk-no .price-more summary, .mk-no .af-bock {
  font-family: var(--brand-font); font-weight: 600; letter-spacing: -.02em;
}
.mk-no .amt, .mk-no .arg-tall, .mk-no .mr-tall, .mk-no .af-bock { font-variant-numeric: tabular-nums; }
.mk-no .sec-head { margin-bottom: clamp(28px, 3.4vw, 40px); }
.mk-no .sec-head h2 { font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem); line-height: 1.1; max-width: 24ch; }
.mk-no .sec-head p { font-size: 1rem; }
@media (min-width: 760px) { .mk-no .sec-head p { font-size: 1.0625rem; } }
.mk-no main h3 { font-size: 20px; line-height: 1.2; }
@media (min-width: 760px) { .mk-no main h3 { font-size: 22px; } }

/* 3. Ingen seksjonsramer: header med en svak skygge, mørke flater med et lysere toppfelt. */
.mk-no header { background: var(--paper); border-bottom: 0; box-shadow: 0 1px 0 rgba(22,32,44,.06); }
.mk-no .nav-menu nav { background: var(--paper); border-bottom: 0; box-shadow: 0 12px 24px -16px rgba(22,32,44,.3); }
.mk-no .hero.hn, .mk-no #eksempler.eks-no, .mk-no section.team-no { border: 0; }
.mk-no section.endre-no, .mk-no #forslag, .mk-no #faq { background: var(--navy) var(--dark-bg); border: 0; }
.mk-no #faq { padding-top: 0; }
.mk-no #forslag { padding-bottom: var(--s8); }
.mk-no #eksempler.eks-no, .mk-no #priser.priser-no { background: var(--paper); }

.mk-no .hero.hn { padding: var(--s6) 0 var(--s7); overflow-x: clip; }
.mk-no .hn-chip { min-height: 28px; border: 0; background: var(--tint); font: 600 13px/1.2 var(--sans); }
.mk-no .hero.hn h1 { font-size: 40px; line-height: 1.06; color: var(--dark-ink); }
.mk-no .hero.hn .lead { max-width: 30ch; font-size: 16px; line-height: 1.55; }
.mk-no .hn-eks { margin: 0; gap: 0; }
.mk-no .hn-tag { padding: 0; background: none; border-radius: 0; color: var(--dark-ink-dim); font: 400 13px/1.2 var(--sans); }
.mk-no .hn-tag::after { content: "\00a0·\00a0"; }
.mk-no .hn-apne { font: 600 13px/1.2 var(--sans); }
@media (min-width: 1000px) {
  .mk-no .hero.hn { padding: 72px 0 var(--s9); }
  .mk-no .hn-wrap { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: var(--s8); align-items: center; }
  .mk-no .hero.hn h1 { font-size: 64px; line-height: 1.02; }
  .mk-no .hero.hn .lead { max-width: 40ch; font-size: 17px; line-height: 1.6; }
}

/* 5. Radiene: 10 felt og små rammer, 16 små kort og tabellkolonnen, 24 kort, scener og skjema. */
.mk-no .endre-kort, .mk-no .ask, .mk-no .forslag-person, .mk-no .ex-stage, .mk-no .arg-kort, .mk-no .price-site { border-radius: var(--r-lg); }
.mk-no .ask input, .mk-no .ask textarea, .mk-no .company-search-row input, .mk-no .endre-ram, .mk-no .contacted input { border-radius: var(--r-sm); }
.mk-no .endre-boble { border-radius: var(--r-bubble) var(--r-bubble) 4px var(--r-bubble); }
.mk-no .endre-boble.lys { border-radius: var(--r-bubble) var(--r-bubble) var(--r-bubble) 4px; }

/* 2. Kort på lys flate: hvite, uten ramme, med myk skygge. Kort på mørk flate: marine kort med svak ring. */
.mk-no .arg-kort, .mk-no .price-site, .mk-no .endre-kort, .mk-no #forslag .ask { background: #fff; border: 0; box-shadow: var(--shadow-card); }
.mk-no .forslag-person { background: var(--navy-card); border: 0; box-shadow: var(--ring-dark); }

/* 6. Ravfargen bare på hovedhandlingen: menyknappen og lynsjekken i marine, «Åpne demo» som tekstlenke. */
.mk-no .nav a.nav-cta, .mk-no .nav a.nav-cta:hover { background: var(--navy); border-color: var(--navy); color: var(--ink); box-shadow: none; }
.mk-no .nav a.nav-cta:hover { background: var(--navy-3); border-color: var(--navy-3); }
.mk-no .sj-bar .btn, .mk-no .sj-bar .btn:hover { background: var(--navy); border-color: var(--navy); color: var(--ink); box-shadow: none; }
.mk-no .sj-bar .btn:hover { background: var(--navy-3); border-color: var(--navy-3); }
.mk-no .ex-link { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; color: var(--brass-ink); font: 600 15px/1.2 var(--sans); white-space: nowrap; }
.mk-no .ex-link .ic { width: 18px; height: 18px; stroke-width: 1.75; transition: transform .2s; }
.mk-no .ex-link:hover { color: var(--dark-ink); }
.mk-no .ex-link:hover .ic { transform: translate(2px, -2px); }
.mk-no .ex-link:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 3px; }

/* 7. Eksemplene større og uten ramme: 2 x 2 i full innholdsbredde på PC, tonene dempet mot papiret. */
.mk-no .eks-no .ex-stage { background: linear-gradient(rgba(247,244,238,.2), rgba(247,244,238,.2)), var(--tint); border: 0; box-shadow: var(--shadow-card); }
.mk-no .eks-no .ex-meta { border-top: 0; padding-top: 0; margin-top: var(--s4); }
.mk-no .eks-no .ex-meta h3 { font-size: 20px; }
.mk-no .eks-no .ex-meta .ex-industry { font-size: 14px; }
.mk-no .ex-fikt { margin-top: var(--s6); font-size: 13px; }
@media (min-width: 761px) {
  .mk-no .eks-no .ex-grid { max-width: var(--w-mid); gap: var(--s6); }
  .mk-no .eks-no .ex-stage { padding: var(--s6); }
  .mk-no .eks-no .devices { --bw: 80; --bt: 3; --pw: 30; --ar: 58; }
}

/* 8. Målere og tabell: større målere uten «/100» (skjermleserteksten står), tabellkolonnen «Nytt» som tonet felt. */
.mk-no { --gauge: 64px; }
@media (min-width: 760px) { .mk-no { --gauge: 80px; } }
.mk-no .arg-grid { gap: var(--s5); }
@media (min-width: 960px) { .mk-no .arg-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.mk-no .arg-kort { padding: 20px; gap: var(--s4); }
@media (min-width: 760px) { .mk-no .arg-kort { padding: 32px; } }
.mk-no .arg-kort h3 { color: var(--dark-ink); }
.mk-no .arg-tall { font-size: 48px; line-height: 1; color: var(--dark-ink); }
@media (min-width: 960px) { .mk-no .arg-tall { font-size: 56px; } }
.mk-no .tl { gap: 6px; }
.mk-no .tl-2 .tl-bar { height: 12px; margin: 0 0 var(--s1); background: var(--navy); }
.mk-no .mr-tall { font-size: 22px; color: var(--dark-ink); }
@media (min-width: 760px) { .mk-no .mr-tall { font-size: 28px; } }
.mk-no .mr-tall small { display: none; }
.mk-no .mr-spor { stroke: rgba(22,32,44,.08); stroke-width: 7; }
.mk-no .mr-bue { stroke-width: 7; }
.mk-no .mr-grad { font-size: 13px; }
.mk-no .mr-tab thead th, .mk-no .bt-tab thead th { font: 600 13px/1.25 var(--sans); }
.mk-no .mr-tab tbody tr + tr > * { border-top-color: var(--rule); }
.mk-no .bt-tab tbody th, .mk-no .bt-tab td { border-top-color: var(--rule); }
.mk-no .bt-tab tbody th { hyphens: manual; overflow-wrap: normal; min-width: 12ch; }
.mk-no .bt-tab .bt-ny, .mk-no .bt-tab thead .bt-ny, .mk-no .bt-tab tbody tr:last-child .bt-ny { background: var(--tint); border: 0; }
.mk-no .bt-tab tbody td.bt-ny { border-top: 1px solid var(--rule); }
.mk-no .bt-tab thead .bt-ny { border-radius: var(--r-md) var(--r-md) 0 0; }
.mk-no .bt-tab tbody tr:last-child .bt-ny { border-radius: 0 0 var(--r-md) var(--r-md); }
.mk-no .bt-tab .ic { stroke-width: 2; }
.mk-no .ak-note, .mk-no .pn-fotnote { font-size: 13px; }

/* 9. Priskortet: nummerert stegrekke, én ikonstil i løftene og rene haker i «Dette er med». */
.mk-no .priser-no .price-site { padding: 20px; }
@media (min-width: 760px) { .mk-no .priser-no .price-site { padding: 40px; } }
@media (min-width: 960px) { .mk-no .priser-no .price-site { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5) 56px; } }
.mk-no .priser-no .price-site h3 { font: 500 15px/1.4 var(--sans); letter-spacing: 0; color: var(--dark-ink-dim); }
.mk-no .priser-no .price-site .amt { font-size: 48px; letter-spacing: -.03em; }
@media (min-width: 760px) { .mk-no .priser-no .price-site .amt { font-size: 64px; } }
.mk-no .price .amt small { font: 600 20px/1 var(--brand-font); letter-spacing: 0; }
.mk-no .pn-ferdig-h { margin: var(--s6) 0 var(--s4); color: var(--dark-ink); font: 600 1rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.mk-no .af-steg { position: relative; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); }
.mk-no .af-steg li { position: relative; gap: var(--s2); font: 600 14px/1.3 var(--sans); }
.mk-no .af-steg li + li::before { content: ""; position: absolute; top: 13px; right: calc(50% + 14px); left: calc(-50% + 14px - var(--s2)); height: 2px; background: rgba(22,32,44,.12); }
.mk-no .af-bock { position: relative; width: 28px; height: 28px; background: var(--navy); color: var(--ink); font-size: 14px; line-height: 1; letter-spacing: 0; }
.mk-no .af-steg li:last-child .af-bock { background: var(--amber); color: var(--navy); }
.mk-no .price-main .af-lofter { margin-top: var(--s6); padding-top: 0; border-top: 0; gap: var(--s4); }
.mk-no .af-lofter li { font-weight: 600; font-size: 15px; }
.mk-no .af-lofter .ic { width: 20px; height: 20px; stroke-width: 1.75; color: var(--brass-ink); }
.mk-no .af-lofter small { font-size: 14px; }
.mk-no .price-incl h4 { font: 600 16px/1.3 var(--sans); color: var(--dark-ink); }
.mk-no #priser .package-brief { border-top: 0; }
.mk-no #priser .package-brief li { grid-template-columns: 20px minmax(0, 1fr); padding-block: var(--s3); border-bottom-color: var(--rule); font-size: 15px; }
.mk-no #priser .package-brief li::before { width: 20px; height: 20px; margin-top: 1px; background: var(--ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mk-no .priser-no .price-more { max-width: var(--w-mid); margin-top: var(--s5); border-block: 1px solid var(--rule); }
.mk-no .priser-no .price-more summary { font-size: 17px; }
.mk-no .priser-no .price-more summary::after { content: none; }
.mk-no .price-more summary .ic, .mk-no .faq summary .ic { width: 20px; height: 20px; stroke-width: 1.75; transition: transform .25s var(--ease); }
.mk-no .price-more summary .ic { color: var(--brass-ink); }
.mk-no .price-more[open] summary .ic, .mk-no .faq details[open] summary .ic { transform: rotate(180deg); }

/* 10. #endre uten merkelapper og uten linje bak «eller». */
.mk-no .endre-no .endre-eller::before { display: none; }
.mk-no .endre-no .endre-eller span { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--tint); color: var(--navy); font: 600 13px/1 var(--sans); }
@media (min-width: 860px) { .mk-no .endre-no .endre-eller { align-self: center; } }
.mk-no .endre-valg, .mk-no .endre-chip { justify-self: start; padding: 0; background: none; border-radius: 0; color: var(--dark-ink-dim); font: 400 14px/1.4 var(--sans); white-space: normal; }
.mk-no .endre-svar-in .endre-chip { justify-self: end; font-size: 13px; }
.mk-no .endre-lagt { background: rgba(22,122,70,.10); color: var(--ok); }
.mk-no .endre-ny { background: var(--tint); border-left: 0; border-radius: var(--r-sm); }
.mk-no .endre-ram { border: 0; background: var(--tint); }
.mk-no .endre-mini { background: #fff; margin: 6px 6px 0; border-radius: 6px 6px 0 0; }
.mk-no .endre-merke { background: var(--tint); }
.mk-no .endre-kort.selv, .mk-no .endre-kort.stine { padding: 20px; }
@media (min-width: 760px) { .mk-no .endre-kort.selv, .mk-no .endre-kort.stine { padding: 32px; } }

/* 11. Forslag uten bokser: kontaktlinjen og trygghetsraden som ren tekst, et luftig skjema med to kolonner på PC. */
.mk-no .contacted { border: 0; margin-bottom: var(--s5); }
.mk-no .contacted summary { min-height: 44px; font-size: 15px; }
@media (min-width: 960px) { .mk-no .cta-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); } }
.mk-no #forslag .ask { gap: var(--s4) var(--s4); padding: 24px 20px; }
@media (min-width: 760px) { .mk-no #forslag .ask { padding: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mk-no #forslag .ask > * { grid-column: 1 / -1; } .mk-no #forslag .ask > label[for="proposal-navn"], .mk-no #forslag .ask > label[for="proposal-email"] { grid-column: auto; } }
.mk-no #forslag .ask label span { color: var(--dark-ink); font-size: .875rem; font-weight: 600; }
.mk-no #forslag .ask input:not([type="checkbox"]), .mk-no #forslag .ask textarea { min-height: 52px; background: #fff; border: 1px solid var(--line-dark-strong); }
/* Fokusringen er brass, ikke rav: rav mot hvitt er 2,2:1 (fokuskontrollen krever 3:1). */
.mk-no #forslag .ask input:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 2px; }
.mk-no .ask .field-help { font-size: 13px; }
.mk-no .ask .representative input { width: 20px; height: 20px; flex-basis: 20px; margin-top: 2px; border-radius: 6px; }
.mk-no .ask .representative span { line-height: 1.45; font-size: .9375rem; }
.mk-no .company-search-row button { min-height: 52px; }
.mk-no #forslag .ask #proposal-submit { width: 100%; min-height: 52px; }
.mk-no .forslag-person { padding: 28px; }
.mk-no .kontakt-oss .ko-h { font-size: 22px; color: var(--ink); }
.mk-no .kontakt-oss .ko-h img { background: var(--paper); }
.mk-no .forslag-person .contact-person-links a { font-size: 18px; font-weight: 600; text-decoration: none; }
.mk-no .forslag-person .contact-person-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mk-no .forslag-person .kontakt-oss .contact-person-hours { font-size: 14px; }
.mk-no .forslag-person .contact-person-reply { border-top-color: var(--rule-dark); }
.mk-no .trygg { justify-content: center; max-width: var(--w-mid); margin: 0 auto var(--s5); padding: 0; border: 0; border-radius: 0; font-size: 13px; text-align: left; }
.mk-no .trygg > .ic { width: 16px; height: 16px; margin-top: 1px; }

/* FAQ: samme marine som forslaget, Outfit i spørsmålene, chevron i stedet for pluss, linjer .12. */
.mk-no .faq { border-top-color: var(--rule-dark); }
.mk-no .faq details { border-bottom-color: var(--rule-dark); }
.mk-no .faq summary { align-items: center; padding-block: var(--s4); font-size: 17px; line-height: 1.35; }
@media (min-width: 760px) { .mk-no .faq summary { font-size: 18px; } }
.mk-no .faq summary::after { content: none; }
.mk-no .faq summary .ic { color: var(--gold); }

/* 12. Lynsjekken som et lavt bånd og teamraden med miniatyrer. */
.mk-no #sjekk .wrap { max-width: var(--w-page); }
.mk-no .sj-band { display: grid; gap: var(--s4); align-items: center; max-width: var(--w-mid); margin: 0 auto; }
.mk-no .sj-band .sec-head { margin: 0; text-align: left; }
.mk-no .sj-band .sec-head h2 { max-width: none; margin: 0; font-size: 24px; line-height: 1.2; }
.mk-no .sj-band .sec-head p { margin: var(--s2) 0 0; font-size: 15px; }
.mk-no .sj-band .eyebrow-brand { font-size: 15px; }
.mk-no .sj-band .sj-bar { max-width: none; margin: 0; align-items: stretch; }
.mk-no .sj-band .sj-url-label { gap: 0; }
.mk-no .sj-band .sj-bar input { min-height: 52px; border-radius: var(--r-pill); background: #fff; }
@media (min-width: 960px) { .mk-no .sj-band { grid-template-columns: minmax(0, 1fr) 520px; gap: var(--s8); } .mk-no .sj-band .sec-head h2 { font-size: 28px; } }
@media (max-width: 459.98px) { .mk-no .sj-band .sj-bar { flex-direction: column; } .mk-no .sj-band .sj-bar .btn { width: 100%; } }
.mk-no section.team-no { padding: var(--s7) 0; }
.mk-no .tn-rad { display: grid; gap: var(--s3); justify-items: center; }
.mk-no .tn-rad h2 { font-size: 15px; line-height: 1.3; letter-spacing: 0; color: var(--dark-ink-dim); }
.mk-no .tn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: var(--s3); width: 100%; }
@media (min-width: 760px) { .mk-no .tn-list { gap: var(--s5); } }
.mk-no .tn-list a { display: grid; gap: var(--s2); justify-items: center; min-height: 44px; color: var(--dark-ink); text-decoration: none; font-size: 14px; }
.mk-no .tn-list img { display: block; width: 100%; height: auto; aspect-ratio: 200 / 125; object-fit: cover; object-position: top; border-radius: var(--r-md); box-shadow: var(--shadow-card); transition: transform .3s var(--ease); }
.mk-no .tn-list a:hover img { transform: translateY(-2px); }
.mk-no .tn-navn { font-weight: 600; line-height: 1.3; text-align: center; }
.mk-no .tn-list a:hover .tn-navn { color: var(--brass-ink); text-decoration: underline; text-underline-offset: 3px; }
.mk-no .tn-rad p { font-size: 13px; }

/* FORSIDE6, finjustering etter egen gjennomgang av skjermbildene: Outfit får tettere sperring bare i
   store rubrikker, små rubrikker og spørsmål holder ordmellomrommet. */
.mk-no main h3, .mk-no .faq summary, .mk-no .ko-h, .mk-no .tn-rad h2, .mk-no .endre-kort h3, .mk-no .ex-meta h3 { letter-spacing: -.005em; word-spacing: .04em; }
.mk-no .priser-no .price-more summary { font: 600 16px/1.3 var(--sans); letter-spacing: 0; color: var(--dark-ink); }
.mk-no #faq { background: var(--navy); padding-top: var(--s6); }
.mk-no #forslag { padding-bottom: var(--s7); }
.mk-no .mr-tall { font-size: 20px; }
@media (min-width: 760px) { .mk-no .mr-tall { font-size: 24px; } }
.mk-no .ak-note { line-height: 1.5; }
.mk-no .ak-apne { display: inline-block; min-height: 0; padding-block: 12px; margin-block: -12px; }
@media (min-width: 960px) { .mk-no .arg-kunder .ak-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s6); } }
@media (min-width: 1000px) { .mk-no .hero.hn { padding-bottom: 80px; } }
.mk-no .bt-tab thead td { border-top: 0; }
/* «Lagt til»: --ok på den grønne tonen ga 3,9:1 på 12 px; mørkere grønn gir AA (kontrastmålingen FORSIDE6). */
.mk-no .endre-lagt { color: #0e5a33; }

/* FORSIDE7 (Astra varv 2), finpuss. Heroens PC-kolonner står nå i FORSIDE9-blokken nederst. */
/* Heroen på mobil: tettere luft, så rubrikken, ingressen og enhetsbildet står på første skjerm. */
@media (max-width: 999.98px) {
  .mk-no .hero.hn { padding-top: var(--s5); }
  .mk-no .hero.hn .lead { margin-bottom: 20px; }
  .mk-no .hn-eks { min-height: 20px; }
  .mk-no .hn-tool { margin-top: 20px; }
}

/* ==========================================================================
   FORSIDE8 (eieren 11/10 21.22: «grafikken må bli bedre»; orkestrererens valg mellom Fables og Opus'
   forslag i forside4/grafik2/). Fire grafikker: produktscenen i #endre, billetten, brikkene i priskortet
   og halvsirklene i «Flere kunder». Animasjon bare der view() støttes og brukeren ikke ber om redusert
   bevegelse; ellers står sluttbildet. Bare transform, opacity, clip-path og stroke, så ingen
   layoutforskyvning.
   ========================================================================== */

/* A. «Gjør endringen selv» som scene: meldingen til venstre, telefonen til høyre. Boblen og banneret deler
   ravfargen (årsak og virkning). «La oss ordne det» er et eget, mindre kort under, ikke en tekstlinje. */
.mk-no .es-veier { display: grid; max-width: var(--w-mid); margin: 0 auto; }
.mk-no .es { display: grid; gap: var(--s5); padding: 24px 20px 28px; border-radius: var(--r-lg); background: var(--navy-card); box-shadow: var(--ring-dark), 0 40px 80px -40px rgba(0,0,0,.6); }
@media (min-width: 760px) { .mk-no .es { padding: 40px; } }
@media (min-width: 960px) { .mk-no .es { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 64px; align-items: center; padding: 48px 56px; } }
.mk-no .es-txt { display: grid; align-content: start; min-width: 0; }
.mk-no .es-txt h3 { color: var(--ink); font-size: 24px; }
@media (min-width: 760px) { .mk-no .es-txt h3 { font-size: 28px; } }
.mk-no .es-txt .endre-ku { margin: var(--s1) 0 0; color: var(--ink-dim); font-size: 1rem; }
.mk-no .es-veier .endre-eller { height: auto; margin: var(--s4) 0; }
.mk-no .es-oss { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4); align-items: center; padding: 20px; border-radius: var(--r-lg); background: var(--navy-card); box-shadow: var(--ring-dark); }
@media (min-width: 760px) { .mk-no .es-oss { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s5); padding: 28px 40px; } }
.mk-no .es-oss .endre-merke { width: 56px; height: 56px; }
.mk-no .es-oss .endre-merke img { width: 34px; height: 34px; }
@media (min-width: 760px) { .mk-no .es-oss .endre-merke { width: 64px; height: 64px; } .mk-no .es-oss .endre-merke img { width: 40px; height: 40px; } }
.mk-no .es-oss h3 { color: var(--ink); }
.mk-no .es-oss-txt p { margin: var(--s1) 0 0; color: var(--ink-dim); font-size: 1rem; line-height: 1.45; }
.mk-no .es-oss-fakta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .mk-no .es-oss-fakta { grid-column: auto; flex-direction: column; align-items: flex-end; } }
.mk-no .es-oss-fakta li { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(244,239,230,.08); color: var(--ink); font: 600 14px/1.3 var(--sans); white-space: nowrap; }
.mk-no .es-oss-fakta .ic { width: 18px; height: 18px; color: var(--gold); }
.mk-no .es-oss-fakta .endre-valg { background: rgba(220,194,150,.16); color: var(--gold); }
/* B. Billetten: marine overdel med prisen, perforering med hakk og stubben med ravstempelet. */
.mk-no .arg-kort.arg-drift { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; }
.mk-no .bil-topp { display: grid; align-content: center; padding: 24px 20px 28px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: radial-gradient(120% 90% at 100% 0%, #1d3a55, var(--navy) 65%); }
@media (min-width: 760px) { .mk-no .bil-topp { padding: 32px; } }
.mk-no .bil-topp h3 { color: var(--ink); }
.mk-no .bil-topp .arg-tall { margin-top: var(--s4); color: var(--ink); font-size: 56px; }
.mk-no .bil-topp .arg-tall span { color: var(--amber); font-size: 28px; }
@media (min-width: 960px) { .mk-no .bil-topp .arg-tall { font-size: 64px; } }
.mk-no .bil-topp .arg-under { margin: var(--s2) 0 0; color: var(--ink-dim); font-size: .9375rem; }
.mk-no .bil-stubb { position: relative; display: grid; gap: 20px; padding: 28px 20px 24px; border-radius: 0 0 var(--r-lg) var(--r-lg); background: #fff; }
@media (min-width: 760px) { .mk-no .bil-stubb { padding: 32px; } }
.mk-no .bil-stubb::before { content: ""; position: absolute; top: -1px; left: 20px; right: 20px; border-top: 2px dashed rgba(22,32,44,.2); }
.mk-no .bil-stubb::after { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; height: 24px; pointer-events: none;
  background: radial-gradient(circle at 12px 12px, var(--paper) 11.5px, transparent 12px), radial-gradient(circle at calc(100% - 12px) 12px, var(--paper) 11.5px, transparent 12px); }
.mk-no .bil-stempel { justify-self: start; display: grid; justify-items: center; gap: 2px; margin: 4px 0 0 4px; padding: 10px 18px 12px; border-radius: 12px; background: var(--amber); color: var(--navy);
  box-shadow: inset 0 0 0 2px rgba(15,31,48,.16), 0 0 0 4px #fff, 0 0 0 5.5px rgba(233,162,83,.75); transform: rotate(-5deg); }
.mk-no .bil-stempel b { font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.mk-no .bil-stempel span { font: 600 20px/1.1 var(--brand-font); letter-spacing: -.01em; }
.mk-no .bil-lofte { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.mk-no .bil-lofte li { display: flex; align-items: center; gap: var(--s3); color: var(--dark-ink); font: 600 15px/1.35 var(--sans); }
.mk-no .bil-lofte .ic { flex: none; width: 20px; height: 20px; color: var(--brass-ink); stroke-width: 1.75; }
/* PC: billetten ved siden av «Flere kunder», like høye; overdelen tar ekstra høyde og prisen står midt i. */
@media (min-width: 960px) {
  .mk-no .arg-grid { grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; }
  .mk-no .bil-topp { flex: 1; }
}

/* C. «Ferdig før du betaler»: tre brikker på en tonet bane, betalingen er den eneste mørke. */
.mk-no .af-bane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 6px; border-radius: var(--r-md); background: var(--tint); list-style: none; }
.mk-no .af-bane li { position: relative; display: grid; align-content: space-between; gap: var(--s3); min-height: 96px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(22,32,44,.06); color: var(--dark-ink); font: 600 13px/1.3 var(--sans); }
.mk-no .af-ik { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--dark-ink); }
.mk-no .af-ik .ic { width: 18px; height: 18px; stroke-width: 2; }
.mk-no .af-bane .af-sist { background: var(--navy); box-shadow: 0 16px 30px -16px rgba(15,31,48,.6); color: var(--ink); }
.mk-no .af-sist .af-ik { background: var(--amber); color: var(--navy); }
@media (min-width: 760px) {
  .mk-no .af-bane { gap: 20px; padding: 12px; }
  .mk-no .af-bane li { min-height: 108px; padding: 14px; font-size: 14px; }
  .mk-no .af-ik { width: 40px; height: 40px; }
  .mk-no .af-ik .ic { width: 20px; height: 20px; }
  .mk-no .af-bane li + li::before { content: ""; position: absolute; top: 50%; left: -17px; width: 14px; height: 14px; background: var(--dark-ink-dim); translate: 0 -50%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
}
/* Løftene med samme grønne hake som «Dette er med». */
.mk-no .af-lofter .ic { color: var(--ok); stroke-width: 1.75; }

/* D. «Flere kunder»: én halvsirkel per måleverdi og funksjonene som fire rader (grått kryss, grønn pille). */
.mk-no .hm-rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.mk-no .hm { display: grid; align-content: start; gap: var(--s2); min-width: 0; margin: 0; padding: 14px 12px 16px; border-radius: var(--r-md); background: var(--tint); }
.mk-no .hm-h { color: var(--dark-ink); font: 600 14px/1.3 var(--sans); }
.mk-no .hm-svg { display: block; width: 100%; max-width: 180px; height: auto; margin: 0 auto; overflow: visible; }
.mk-no .hm-spor, .mk-no .hm-gml, .mk-no .hm-ny { fill: none; stroke-width: 14; stroke-linecap: butt; }
.mk-no .hm-spor { stroke: rgba(22,32,44,.07); }
.mk-no .hm-gml { stroke: rgba(22,32,44,.22); }
.mk-no .hm-ny { stroke: var(--ok); }
.mk-no .hm-nal { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--v)); }
.mk-no .hm-nal line { stroke-width: 4; stroke-linecap: round; }
.mk-no .hm-nal-gml line { stroke: rgba(22,32,44,.3); stroke-dasharray: 5 5; stroke-width: 3; }
.mk-no .hm-nal-ny line { stroke: var(--ok); }
.mk-no .hm-nav { fill: var(--dark-ink); }
.mk-no .hm-tekst { display: grid; justify-items: center; gap: 2px; text-align: center; }
.mk-no .hm-tall { color: var(--dark-ink); font: 600 32px/1 var(--brand-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* --ok på den tonede flaten ga 4,45:1 på 13 px; samme mørkere grønne som «Lagt til» gir AA. */
.mk-no .hm-grad { color: #0e5a33; font: 600 13px/1.3 var(--sans); }
.mk-no .hm-for { display: grid; justify-items: center; margin-top: 6px; color: var(--dark-ink-dim); font: 400 13px/1.35 var(--sans); }
.mk-no .hm-for > span:first-child { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mk-no .hm-for i { width: 14px; height: 0; border-top: 3px dashed rgba(22,32,44,.35); }
.mk-no .bt-rader { border-collapse: collapse; }
.mk-no .bt-rader tbody th { width: auto; min-width: 0; hyphens: none; padding: 12px var(--s2) 12px 0; border-top: 1px solid var(--rule); color: var(--dark-ink); font: 500 14px/1.35 var(--sans); }
.mk-no .bt-rader tbody tr:first-child > * { border-top: 0; }
.mk-no .bt-rader td { width: 40px; padding: 12px 0; border-top: 1px solid var(--rule); text-align: center; }
.mk-no .bt-rader .bt-g .ic { box-sizing: content-box; width: 14px; height: 14px; padding: 7px; border-radius: 50%; background: var(--tint); color: var(--dark-ink-dim); stroke-width: 2; }
.mk-no .bt-rader td.bt-n { width: 112px; padding-left: var(--s2); background: linear-gradient(rgba(22,32,44,.12), rgba(22,32,44,.12)) left center / calc(100% - 92px) 2px no-repeat; border-inline: 0; border-radius: 0; text-align: right; }
.mk-no .bt-rader tbody tr:last-child td.bt-n { border-radius: 0; }
.mk-no .bt-rader .bt-n > span[aria-hidden] { display: inline-flex; align-items: center; height: 28px; padding: 0 12px 0 30px; margin-left: -26px; border-radius: var(--r-pill); background: var(--ok); color: #fff; font: 600 13px/1 var(--sans); vertical-align: middle; }
.mk-no .bt-rader .bt-n .bt-ja { position: relative; z-index: 1; width: 16px; height: 16px; color: #fff; stroke-width: 2.6; vertical-align: middle; }
@media (max-width: 459.98px) {
  .mk-no .bt-rader td.bt-n { width: 84px; background: none; }
  .mk-no .bt-rader .bt-n > span[aria-hidden] { padding-right: 10px; }
}
@media (min-width: 760px) {
  .mk-no .hm { padding: 16px; }
  .mk-no .hm-tall { font-size: 36px; }
  .mk-no .bt-rader tbody th { font-size: 15px; }
}
@media (min-width: 960px) {
  .mk-no .arg-kunder .ak-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Ferdig når måleren er i nedre del av vinduet, så viseren ikke leses mens den står mellom verdiene.
       Tidslinjen følger måleruten, ikke viseren (den dreide viseren ville endret sin egen tidslinje). */
    .mk-no .hm { view-timeline: --hm block; }
    .mk-no .hm-ny { animation: hm-bue linear both; animation-timeline: --hm; animation-range: entry 0% cover 22%; }
    .mk-no .hm-nal-ny { animation: hm-vis linear both; animation-timeline: --hm; animation-range: entry 0% cover 22%; }
  }
}
@keyframes hm-bue { from { stroke-dasharray: 0 var(--a) 0 260; } }
@keyframes hm-vis { from { transform: rotate(var(--fra)); } }

/* ==========================================================================
   FORSIDE9 (eieren 11/10 22.2x): heroen som i mailet, og «Gjør endringen selv» som en iPhone-samtale.
   Reglene her går foran de eldre over.
   ========================================================================== */

/* A. Heroen i e-postmalens form, generell: serif i normal vekt i mørk marine (som mailets Georgia), den
   håndtegnede ravstreken fra company-underline.svg under «din bedrift», så mailets enhetsbilde med en ekte
   skjermdump av Lysbro Elektro og den brede ravknappen. */
.mk-no .hn :focus-visible { outline-color: var(--brass-ink); }
.mk-no .hero.hn h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 36px; line-height: 1.12; letter-spacing: .3px; color: var(--navy); text-wrap: wrap; }
.mk-no .hn-strek { white-space: nowrap; padding-bottom: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 36'%3E%3Cpath d='M8 22 Q300 4 592 22' fill='none' stroke='%23e9a253' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% auto; }
.mk-no .hero.hn .lead { max-width: 36ch; }
.mk-no .hn-enh { margin: 0; }
/* Rammene er span inne i lenken; dev-box og devices må være blokker for at aspect-ratio skal virke. */
.mk-no .hn-bilde, .mk-no .hn-enh .dev-box, .mk-no .hn-enh .devices { display: block; }
.mk-no .hn-enh .devices { --bw: 82; --bt: 3; --pw: 30; --pt: 5; --ar: 63; }
.mk-no .hn-enh .bw { box-shadow: 0 2px 4px rgba(15,31,48,.06), 0 28px 50px -30px rgba(15,31,48,.55); }
.mk-no .hn-enh .ph { box-shadow: inset 0 0 0 1.5px #2e3238, 0 30px 44px -18px rgba(15,31,48,.6); }
.mk-no .hn-bilde:hover .bw, .mk-no .hn-bilde:hover .ph { translate: 0 -2px; }
.mk-no .hn-enh .bw, .mk-no .hn-enh .ph { transition: translate .3s var(--ease); }
.mk-no .hn-eks { display: flex; justify-content: center; align-items: center; min-height: 20px; margin: var(--s3) 0 0; }
.mk-no .hn-tag:last-child::after { content: none; }
.mk-no .hn-eks .hn-apne { display: inline; min-height: 0; color: var(--brass-ink); font: 600 13px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.mk-no .hn-bilde { color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.mk-no .hn-bilde:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 6px; }
.mk-no .hn-bilde:hover .hn-apne { color: var(--dark-ink); }
/* Feltet og knappen under hverandre i full bredde, knappen som mailets pille. */
.mk-no .hn .try-row { display: grid; gap: 10px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.mk-no .hn .try-row:focus-within { outline: 0; }
.mk-no .hn .try-field { padding: 0 14px 0 16px; background: #fff; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-dark-strong); }
.mk-no .hn .try-field:focus-within { outline: 3px solid var(--brass-ink); outline-offset: 3px; }
.mk-no .hn .try .btn { width: 100%; min-height: 54px; justify-content: center; border-radius: var(--r-pill); background: var(--amber); color: var(--navy); font: 700 16px/1.2 var(--sans); }
.mk-no .hn .try-row .btn:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 3px; }
.mk-no .hn-tool { margin-top: var(--s5); }
@media (min-width: 1000px) {
  .mk-no .hero.hn { padding: 64px 0 80px; }
  .mk-no .hn-wrap { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "copy enh" "tool enh"; column-gap: 48px; align-items: start; }
  .mk-no .hn-enh { grid-area: enh; align-self: start; margin-top: var(--s2); margin-right: calc(-1 * clamp(0px, (100vw - 1040px) / 2 - 24px, 72px)); }
  .mk-no .hero.hn h1 { font-size: 56px; line-height: 1.1; margin-bottom: var(--s4); }
  .mk-no .hero.hn .lead { max-width: 420px; font-size: 17px; line-height: 1.6; }
  .mk-no .hn-tool { margin-top: var(--s5); }
}

/* B. «Gjør endringen selv»: én iPhone med hele samtalen. Kundens bobler blå (#0a66d8 mot hvitt er 5,4:1;
   iOS-blå #007aff er 4,0:1), svarene lysegrå med nesten svart tekst. Halene er den klassiske iMessage-kurven:
   en farget bue og en hvit maske utenfor boblen. */
.mk-no .es-txt { align-content: start; }
.mk-no .ip { --ip-bla: #0a66d8; --ip-gra: #e9e9eb; --ip-tekst: #0b0b0c; --ip-dim: #5c5c62;
  justify-self: center; width: min(100%, 320px); padding: 10px; border-radius: 50px; background: #10161d;
  box-shadow: inset 0 0 0 1.5px #2f3843, 0 0 0 1px rgba(244,239,230,.16), 0 40px 70px -30px rgba(0,0,0,.75); }
.mk-no .ip-skjerm { position: relative; display: flex; flex-direction: column; min-height: 620px; padding-bottom: 26px; border-radius: 40px; background: #fff; color: var(--ip-tekst); font: 400 15px/1.32 var(--sans); }
.mk-no .ip-skjerm::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 110px; height: 4px; border-radius: 2px; background: #111; translate: -50% 0; }
.mk-no .ip-topp { position: relative; display: grid; padding: 12px 18px 8px; border-radius: 40px 40px 0 0; background: #f5f5f7; border-bottom: 1px solid #dedee3; }
.mk-no .ip-oy { position: absolute; top: 10px; left: 50%; width: 92px; height: 26px; border-radius: 14px; background: #000; translate: -50% 0; }
.mk-no .ip-status { display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 10px; font: 600 14px/1 var(--sans); }
.mk-no .ip-ikoner { display: flex; align-items: center; gap: 5px; }
.mk-no .ip-ikoner svg { display: block; fill: currentColor; }
.mk-no .ip-hode { position: relative; display: grid; justify-items: center; gap: 2px; margin-top: 8px; }
.mk-no .ip-tilbake { position: absolute; left: 0; top: 10px; color: var(--ip-bla); }
.mk-no .ip-avatar { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 2px; border-radius: 50%; background: var(--tint); }
.mk-no .ip-avatar img { display: block; width: 26px; height: 26px; }
.mk-no .ip-navn { font: 600 13px/1.2 var(--sans); }
.mk-no .ip-under { font: 400 11px/1.2 var(--sans); color: var(--ip-dim); }
.mk-no .ip-tid { max-width: none; margin: 10px 0 4px; text-align: center; font: 400 11px/1.2 var(--sans); color: var(--ip-dim); }
.mk-no .ip-tid b { font-weight: 600; }
.mk-no .ip-samtale { display: grid; gap: 3px; margin: 0 0 12px; padding: 4px 12px 0; list-style: none; }
.mk-no .ip-m { position: relative; display: grid; justify-items: start; }
.mk-no .ip-du { justify-items: end; }
.mk-no .ip-du + .ip-hun, .mk-no .ip-hun + .ip-du { margin-top: 8px; }
.mk-no .ip-b { position: relative; max-width: 80%; padding: 7px 13px; border-radius: 18px; background: var(--ip-gra); overflow-wrap: anywhere; }
.mk-no .ip-du .ip-b { background: var(--ip-bla); color: #fff; }
.mk-no .ip-hale .ip-b::before, .mk-no .ip-hale .ip-b::after { content: ""; position: absolute; bottom: 0; height: 18px; }
.mk-no .ip-du.ip-hale .ip-b::before { right: -7px; width: 20px; background: var(--ip-bla); border-bottom-left-radius: 16px 14px; }
.mk-no .ip-du.ip-hale .ip-b::after { right: -10px; width: 10px; background: #fff; border-bottom-left-radius: 10px; }
.mk-no .ip-hun.ip-hale .ip-b::before { left: -7px; width: 20px; background: var(--ip-gra); border-bottom-right-radius: 16px 14px; }
.mk-no .ip-hun.ip-hale .ip-b::after { left: -10px; width: 10px; background: #fff; border-bottom-right-radius: 10px; }
.mk-no .ip-knapper { display: flex; gap: 6px; margin: 8px 0 2px; }
.mk-no .ip-knapper > span { padding: 6px 14px; border-radius: var(--r-pill); font: 600 13px/1.2 var(--sans); }
.mk-no .ip-pub { background: var(--amber); color: var(--navy); }
.mk-no .ip-endre { background: #fff; color: var(--ip-tekst); }
.mk-no .ip-levert { margin: 2px 4px 0 0; font: 600 11px/1.2 var(--sans); color: var(--ip-dim); }
.mk-no .ip-bock { display: inline-block; margin: 0 6px 0 0; vertical-align: -4px; }
.mk-no .ip-bock circle { fill: var(--ok); }
.mk-no .ip-bock path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Forhåndsvisningen som en lenkeforhåndsvisning i iMessage: kundens side øverst, tittelen under. */
.mk-no .ip-kort { display: grid; width: 80%; overflow: hidden; border-radius: 18px; background: var(--ip-gra); }
.mk-no .ip-mini { display: grid; gap: 7px; margin: 8px 8px 0; padding: 10px; border-radius: 10px; background: #fff; }
.mk-no .ip-mini-nav { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid #ececf0; font: 700 12px/1.2 var(--sans); }
.mk-no .ip-mini-nav i { width: 14px; height: 14px; border-radius: 4px; background: var(--navy); }
.mk-no .ip-mini-rad { display: flex; justify-content: space-between; gap: 6px; font: 400 11px/1.3 var(--sans); color: #3b4250; }
.mk-no .ip-mini-ny { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; background: #fdf1e2; box-shadow: inset 0 0 0 1.5px rgba(233,162,83,.85); color: var(--dark-ink); font: 600 12px/1.2 var(--sans); }
.mk-no .ip-lagt { flex: none; padding: 3px 7px; border-radius: var(--r-pill); background: #dcefe1; color: #0e5a33; font: 700 10px/1.2 var(--sans); }
.mk-no .ip-kort-bunn { display: grid; gap: 1px; padding: 8px 12px 10px; }
.mk-no .ip-kort-bunn b { font: 600 13px/1.2 var(--sans); }
.mk-no .ip-kort-bunn small { font: 400 11px/1.2 var(--sans); color: var(--ip-dim); }
.mk-no .ip-felt { display: flex; align-items: center; gap: 8px; margin: auto 12px 0; }
.mk-no .ip-pluss { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #ececef; color: var(--ip-dim); font: 400 20px/1 var(--sans); }
.mk-no .ip-inn { display: flex; align-items: center; flex: 1; height: 34px; padding: 0 14px; border: 1px solid #d4d4d9; border-radius: var(--r-pill); color: var(--ip-dim); font-size: 14px; }
/* Prikkene står der svaret kommer (ingen layoutforskyvning) og vises bare mens skriptet spiller av. */
.mk-no .ip-prikk { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 13px; border-radius: 18px; background: var(--ip-gra); opacity: 0; pointer-events: none; }
.mk-no .ip-prikk i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; }
.mk-no .ip-steg { display: none; }
@media (min-width: 960px) {
  /* PC: telefonkortet til venstre, «eller» og «La oss ordne det» som et stående kort ved siden av. */
  .mk-no .es-veier { grid-template-columns: minmax(0, 1fr) 40px 300px; column-gap: var(--s5); align-items: center; }
  .mk-no .es-veier .endre-eller { margin: 0; }
  .mk-no .es { grid-template-columns: minmax(0, 1fr) 340px; row-gap: var(--s5); align-items: start; padding: 40px; }
  .mk-no .es-txt { grid-column: 1 / -1; }
  .mk-no .ip { grid-column: 2; width: 340px; }
  .mk-no .es-oss { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s4); padding: 32px 28px; }
  .mk-no .es-oss-fakta { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .mk-no .ip-skjerm { font-size: 16px; }
  /* Skriv, Se og Publiser som merker til venstre for telefonen, på høyde med meldingen. Merket har kortets egen
     flate, så kontrasten regnes mot det som faktisk ligger bak (ikke telefonskjermen i DOM-en). */
  .mk-no .ip-steg { position: absolute; top: 50%; right: calc(100% + 28px); display: flex; align-items: center; gap: 10px; padding: 4px 0 4px 4px; border-radius: var(--r-pill); background: var(--navy-card); color: var(--ink); font: 600 15px/1 var(--sans); white-space: nowrap; translate: 0 -50%; }
  .mk-no .ip-steg b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: var(--navy); font: 700 13px/1 var(--sans); }
  .mk-no .ip-steg::after { content: ""; width: 28px; height: 1px; background: rgba(244,239,230,.35); }
}
/* Avspillingen: skriptet setter .ip-vent, så .ip-skriver (prikkene) og .ip-vist (meldingen). */
.mk-no .ip-vent .ip-m > .ip-b, .mk-no .ip-vent .ip-m > .ip-kort, .mk-no .ip-vent .ip-levert, .mk-no .ip-vent .ip-steg { opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.9,.3,1.15); }
.mk-no .ip-vent .ip-hun > .ip-b, .mk-no .ip-vent .ip-hun > .ip-kort { transform-origin: 0 100%; }
.mk-no .ip-vent .ip-du > .ip-b { transform-origin: 100% 100%; }
.mk-no .ip-vent .ip-vist > .ip-b, .mk-no .ip-vent .ip-vist > .ip-kort, .mk-no .ip-vent .ip-vist .ip-levert, .mk-no .ip-vent .ip-vist .ip-steg { opacity: 1; transform: none; }
.mk-no .ip-vent .ip-prikk { transition: opacity .2s; }
.mk-no .ip-vent .ip-skriver .ip-prikk { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mk-no .ip-skriver .ip-prikk i { animation: ip-hopp 1s ease-in-out infinite; }
  .mk-no .ip-skriver .ip-prikk i:nth-child(2) { animation-delay: .15s; }
  .mk-no .ip-skriver .ip-prikk i:nth-child(3) { animation-delay: .3s; }
}
@keyframes ip-hopp { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ==========================================================================
   FORSIDE10 (eieren 12/10: R-symbolet skal begynne på samme loddrette linje som teksten under).
   Lockupen har luft til venstre for R-en: merket begynner på x = 12 + 6,186 × 2,25 = 25,92 av 432 i
   viewBox, altså 6 % av bildets bredde. Bildet flyttes 6 % av sin egen bredde til venstre (translate i
   prosent gjelder elementets egen størrelse), i headeren (144 og 114 px) og i bunnen. Flagget er det
   samme merket som i pillen «For norske bedrifter».
   ========================================================================== */
.mk-no .brand img, .mk-no .foot-brand img { translate: -6% 0; }
.mk-no .foot-flagg { display: inline-block; margin-left: 8px; vertical-align: -2px; border-radius: 1px; }