:root{
  --mk-navy:#062e57;--mk-blue:#0aa9ef;--mk-violet:#6757ef;--mk-ink:#153956;
  --mk-muted:#607b90;--mk-line:#c8dde8;--mk-bg:#e8f3f8
}
.mkPublicShell{width:min(1180px,calc(100% - 42px));margin-left:auto;margin-right:auto}
.mkSiteHeader{
  position:sticky;top:0;z-index:100;width:100%;
  background:rgba(232,244,249,.95);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(58,113,149,.18);
  box-shadow:0 9px 28px rgba(7,46,82,.065)
}
.mkHeaderInner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mkBrand{display:flex;align-items:center;flex:0 0 auto}.mkBrand img{height:52px;width:auto;display:block}
.mkSiteNav{display:flex;align-items:center;justify-content:flex-end;gap:13px;min-width:0}
.mkNavLinks,.mkNavActions{display:flex;align-items:center;gap:5px}
.mkNavLink{
  position:relative;display:inline-flex;align-items:center;min-height:38px;padding:0 9px;
  border-radius:9px;color:#365d76;font-size:11px;font-weight:820;white-space:nowrap
}
.mkNavLink:hover{background:#dceff7;color:#087db7}
.mkNavLink.active{color:#073e68;background:rgba(255,255,255,.56)}
.mkNavLink.active:after{
  content:"";position:absolute;left:9px;right:9px;bottom:2px;height:2px;border-radius:99px;
  background:linear-gradient(90deg,#0aa9ef,#6757ef)
}
.mkPublicBtn{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;
  border:1px solid #bfd8e5;border-radius:10px;background:rgba(248,252,254,.86);
  color:#264e68;font-size:11px;font-weight:850;white-space:nowrap;
  transition:.15s ease;text-decoration:none
}
.mkPublicBtn:hover{transform:translateY(-1px);background:#fff;border-color:#a9d0e1}
.mkPublicBtn.primary{border:0;color:#fff;background:linear-gradient(120deg,#09abeF,#2588e7 52%,#6857ef);box-shadow:0 9px 22px rgba(42,102,211,.18)}
.mkMenuToggle{display:none;border:1px solid #bfd8e5;background:#f6fbfd;color:#28516c;width:38px;height:38px;border-radius:10px;font-size:18px;font-weight:800}
.mkSiteFooter{
  border-top:1px solid #bfd5e1;
  background:
    radial-gradient(circle at 12% 18%,rgba(22,183,239,.08),transparent 25%),
    radial-gradient(circle at 88% 72%,rgba(103,87,239,.07),transparent 26%),
    linear-gradient(135deg,#dcecf3,#e7eef5);
  padding:44px 0 28px
}
.mkFooterInner{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:38px 70px;align-items:start}
.mkFooterBrand{display:flex;flex-direction:column;gap:10px;color:#557389;font-size:11px;line-height:1.5}.mkFooterBrand img{height:56px;width:auto;align-self:flex-start}
.mkFooterColumns{display:flex;gap:64px}.mkFooterColumns>div{display:flex;flex-direction:column;gap:9px;min-width:112px}.mkFooterColumns strong{font-size:11px;color:#173f5e;margin-bottom:3px}.mkFooterColumns a{font-size:11px;color:#58758a;text-decoration:none}.mkFooterColumns a:hover{color:#087db7}
.mkFooterMeta{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid rgba(88,126,151,.2);font-size:10px;color:#71899a
}
.mkFooterCredit a{color:#214e6b;font-weight:850;text-decoration:none}.mkFooterCredit a:hover{color:#087db7}
@media(min-width:1440px){
  .mkSiteFooter{padding:54px 0 32px}
  .mkPublicShell{width:min(1480px,calc(100% - 96px))}
  .mkFooterInner{gap:46px 90px}
  .mkFooterBrand{font-size:13px}.mkFooterBrand img{height:66px}
  .mkFooterColumns{gap:82px}.mkFooterColumns>div{gap:11px;min-width:135px}
  .mkFooterColumns strong,.mkFooterColumns a{font-size:13px}
  .mkFooterMeta{font-size:11px;padding-top:22px}
}
@media(min-width:1900px){
  .mkPublicShell{width:min(1700px,calc(100% - 130px))}
}
@media(max-width:1060px){
  .mkNavLink{padding:0 6px;font-size:10px}.mkSiteNav{gap:7px}.mkPublicBtn{padding:0 9px}
}
@media(max-width:860px){
  .mkPublicShell{width:calc(100% - 28px)}
  .mkHeaderInner{height:70px}.mkBrand img{height:44px}.mkMenuToggle{display:block}
  .mkSiteNav{
    display:none;position:absolute;left:14px;right:14px;top:64px;
    padding:12px;border:1px solid #bfd7e3;border-radius:15px;background:rgba(239,248,251,.98);
    box-shadow:0 18px 40px rgba(7,46,82,.14);align-items:stretch
  }
  .mkSiteHeader.menuOpen .mkSiteNav{display:flex;flex-direction:column}
  .mkNavLinks,.mkNavActions{flex-direction:column;align-items:stretch;width:100%}
  .mkNavLink,.mkPublicBtn{width:100%;justify-content:flex-start;min-height:39px;padding:0 11px}
  .mkNavLink.active:after{display:none}.mkNavActions{padding-top:8px;border-top:1px solid #d4e4ec}
  .mkFooterInner{grid-template-columns:1fr}.mkFooterColumns{gap:34px;flex-wrap:wrap}.mkFooterMeta{grid-column:auto}
}

/* v51 – tydeligere offentlig navigasjon */
.mkHeaderInner{height:84px}
.mkBrand img{height:56px}
.mkSiteNav{gap:16px}
.mkNavLinks{
  gap:4px;
  padding:5px;
  border:1px solid rgba(150,190,211,.48);
  border-radius:14px;
  background:rgba(245,251,253,.62);
  box-shadow:0 6px 18px rgba(10,57,88,.045)
}
.mkNavLink{
  min-height:43px;
  padding:0 13px;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
  color:#315a73
}
.mkNavLink:hover{background:#fff;color:#087db7;box-shadow:0 5px 14px rgba(10,71,108,.07)}
.mkNavLink.active{
  color:#073d68;
  background:#fff;
  box-shadow:0 5px 15px rgba(10,64,100,.09)
}
.mkNavLink.active:after{
  left:12px;right:12px;bottom:4px;height:3px;
  background:linear-gradient(90deg,#09acef,#6857ef)
}
.mkNavActions{gap:7px}
.mkPublicBtn{min-height:43px;padding:0 14px;font-size:12px}
@media(max-width:1060px){
  .mkNavLink{padding:0 8px;font-size:11px}
  .mkBrand img{height:50px}
}
@media(max-width:860px){
  .mkHeaderInner{height:72px}
  .mkBrand img{height:46px}
  .mkNavLinks{padding:0;border:0;background:transparent;box-shadow:none}
  .mkNavLink{font-size:12px}
}

/* v54 – menylenker skal aldri arve understrek fra sidespesifikk CSS */
.mkSiteHeader a,
.mkSiteHeader a:link,
.mkSiteHeader a:visited,
.mkSiteHeader a:hover,
.mkSiteHeader a:active,
.mkSiteHeader a:focus,
.mkNavLink,
.mkNavLink:link,
.mkNavLink:visited,
.mkNavLink:hover,
.mkNavLink:active,
.mkNavLink:focus{
  text-decoration:none !important;
  text-decoration-line:none !important;
}
.mkNavLink.active{
  text-decoration:none !important;
}

/* v88.3 – responsiv offentlig layout for store skjermer
   Beholder laptop/mobil-uttrykket, men lar innhold, typografi og luft vokse på store desktop/4K-skjermer. */
@media (min-width: 1320px){
  .mkPublicShell,
  .shell{
    width:min(1380px,calc(100% - 64px)) !important;
  }

  .mkHeaderInner{height:88px}
  .mkBrand img{height:60px}
  .mkNavLink{font-size:12.5px;min-height:45px;padding-left:14px;padding-right:14px}
  .mkPublicBtn{font-size:12.5px;min-height:45px;padding-left:15px;padding-right:15px}

  /* Felles public-typografi */
  .hero p,
  .heroLead,
  .sectionSub,
  .lead{font-size:16px !important}

  /* Forside */
  .feature h3{font-size:18px !important}
  .feature p{font-size:13px !important}
  .step strong{font-size:14px !important}
  .step span{font-size:12px !important}
  .update strong{font-size:13px !important}
  .update small{font-size:10px !important}
  .statusCard p{font-size:13px !important}
  .ctaText p{font-size:13px !important}
  .wipCard strong{font-size:14px !important}
  .wipCard p{font-size:12px !important}
  .wipCard small,.wipStatus{font-size:9.5px !important}

  /* Funksjoner */
  .featureGrid{gap:18px !important}
  .featureCard{padding:24px !important}
  .featureCard h3{font-size:17px !important}
  .featureCard p{font-size:13px !important}
  .featureCard strong{font-size:10.5px !important}
  .widgetGrid{gap:14px !important}
  .widgetCard{min-height:172px !important;padding:20px !important}
  .widgetCard h3{font-size:15px !important}
  .widgetCard p{font-size:12px !important}
  .flowStep strong{font-size:14px !important}
  .flowStep span{font-size:12px !important}
  .ctaBand p{font-size:14px !important}

  /* Priser */
  .priceGrid{gap:18px !important}
  .priceCard{padding:28px 26px !important}
  .priceCard h2{font-size:21px !important}
  .price{font-size:40px !important}
  .priceCard p{font-size:13px !important}
  .priceCard li{font-size:12px !important}
  .schoolDeal{font-size:12px !important}
  .schoolAdmin h2{font-size:27px !important}
  .schoolAdmin p{font-size:14px !important}
  .inquiryCopy h2{font-size:42px !important}
  .inquiryCopy p{font-size:15px !important}
  .contactPoint{font-size:13px !important}
  .field label{font-size:12px !important}
  .field input,.field textarea,.field select{font-size:14px !important}

  /* FAQ */
  .faqLayout{grid-template-columns:340px 1fr !important;gap:20px !important}
  .heroInner{padding:40px 44px !important}
  .heroInner p{font-size:15px !important}
  .heroHint{font-size:13px !important}
  .faqCategory{padding:18px 50px 18px 18px !important}
  .faqCategory strong{font-size:14px !important}
  .faqCategory span{font-size:11px !important}
  .faqGroupHead h2{font-size:25px !important}
  .faqGroupHead p{font-size:12px !important}
  .faqQuestion{font-size:14px !important;padding:20px 24px !important}
  .faqAnswer div{font-size:13px !important}
  .contactLine{font-size:12px !important}

  /* Kontakt */
  .contactSummary{max-width:620px !important}
  .contactSummary strong{font-size:16px !important}
  .contactSummary p{font-size:14px !important}
  .contactSummary span{font-size:12px !important}
  .card{padding:30px !important}
  .card h2{font-size:25px !important}
  .card>p{font-size:13px !important}
  .contactFoot{font-size:12px !important}

  /* Endringer */
  body > main{
    max-width:none;
  }
  main > .timeline,
  main > .hero,
  main > .empty{
    /* changelog.php har egen smal main; selve main overstyres nedenfor med :has-støtte */
  }
}

/* Endringer-siden har ingen .shell rundt hovedinnholdet. */
@media (min-width:1320px){
  body:has(.timeline) > main,
  body:has(main > .empty) > main{
    width:min(1120px,calc(100% - 64px)) !important;
  }
  .timeline .post{padding:25px 28px !important;margin-bottom:22px !important}
  .timeline .meta{font-size:12px !important}
  .timeline .post h2{font-size:28px !important}
  .timeline .summary{font-size:16px !important}
  .timeline .body{font-size:15px !important}
}

/* Dette jobber vi med – den siden som hadde størst behov for 4K-skalering. */
@media (min-width:1320px){
  .roadmap{padding-bottom:96px !important}
  .roadmapPanel{padding:24px !important;border-radius:26px !important}
  .roadmapTop{padding:5px 5px 18px !important}
  .roadmapTop strong{font-size:16px !important}
  .roadmapTop span{font-size:12px !important}
  .roadmapItem{
    grid-template-columns:minmax(0,1fr) 210px 165px !important;
    gap:24px !important;
    padding:21px 18px !important;
  }
  .roadmapMain h3{font-size:17px !important;margin-bottom:7px !important}
  .roadmapMain p{font-size:13px !important;line-height:1.62 !important}
  .roadmapDate,.roadmapDate strong{font-size:11px !important}
  .status,.legend span{font-size:10.5px !important;padding:8px 11px !important}
  .hero .tag{font-size:11px !important;padding:8px 12px !important}
  .hero p{max-width:820px !important;font-size:17px !important}
}

@media (min-width:1900px){
  .mkPublicShell,
  .shell{
    width:min(1640px,calc(100% - 96px)) !important;
  }
  .mkHeaderInner{height:94px}
  .mkBrand img{height:64px}
  .mkNavLink{font-size:13.5px;min-height:48px;padding-left:16px;padding-right:16px}
  .mkPublicBtn{font-size:13.5px;min-height:48px;padding-left:17px;padding-right:17px}

  .hero p,.heroLead,.sectionSub,.lead{font-size:18px !important}

  .roadmapPanel{padding:30px !important}
  .roadmapTop strong{font-size:18px !important}
  .roadmapTop span{font-size:13px !important}
  .roadmapItem{
    grid-template-columns:minmax(0,1fr) 240px 190px !important;
    gap:30px !important;
    padding:25px 22px !important;
  }
  .roadmapMain h3{font-size:19px !important}
  .roadmapMain p{font-size:15px !important;max-width:980px}
  .roadmapDate,.roadmapDate strong{font-size:12px !important}
  .status,.legend span{font-size:12px !important;padding:9px 13px !important}
  .hero .tag{font-size:12px !important}
  .hero p{max-width:920px !important;font-size:19px !important}

  .featureCard h3{font-size:19px !important}
  .featureCard p{font-size:14px !important}
  .widgetCard h3{font-size:17px !important}
  .widgetCard p{font-size:13px !important}
  .priceCard h2{font-size:23px !important}
  .price{font-size:44px !important}
  .priceCard p{font-size:14px !important}
  .priceCard li{font-size:13px !important}
  .faqQuestion{font-size:15px !important}
  .faqAnswer div{font-size:14px !important}
  .card h2{font-size:28px !important}
  .card>p{font-size:14px !important}
  .field label{font-size:13px !important}
  .field input,.field textarea,.field select{font-size:15px !important}

  body:has(.timeline) > main,
  body:has(main > .empty) > main{
    width:min(1320px,calc(100% - 96px)) !important;
  }
  .timeline .post h2{font-size:30px !important}
  .timeline .summary{font-size:17px !important}
  .timeline .body{font-size:16px !important}
}

/* v88.5 – én sømløs hovedmeny på public + innloggede sider */
.mkPublicBtn.danger{
  border-color:#efb7bd;
  background:#fff3f4;
  color:#b13240;
}
.mkPublicBtn.danger:hover{
  border-color:#df8f99;
  background:#ffe8eb;
  color:#941f2d;
}
@media (min-width:1320px){
  .mkPublicBtn.danger{padding-left:15px;padding-right:15px}
}

@media(max-width:650px){
  .mkFooterInner{grid-template-columns:1fr;gap:28px}
  .mkFooterColumns{width:100%;justify-content:space-between;gap:28px}
  .mkFooterMeta{flex-direction:column;align-items:flex-start;gap:7px}
}