/* MittKlasserom v2.9.7 – felles offentlig typografisystem
   Forside + Funksjoner. Inspirert av skalaen på Endringer / Dette jobber vi med. */
:root{
  --mk-public-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mk-display:clamp(50px,5vw,72px);
  --mk-section-title:clamp(34px,3.25vw,46px);
  --mk-card-title:18px;
  --mk-lead:18px;
  --mk-copy:15px;
  --mk-card-copy:13.5px;
  --mk-label:11px;
}
body{font-family:var(--mk-public-font)!important}

/* Overskriftshierarki */
.hero h1{
  font-family:var(--mk-public-font)!important;
  font-size:var(--mk-display)!important;
  line-height:.99!important;
  letter-spacing:-.05em!important;
  font-weight:850!important;
}
.section h2,.sectionHead h2,.platformIntro h2,.activityManifest h2,
.activePrinciple h2,.studentFeatureCopy h2{
  font-family:var(--mk-public-font)!important;
  font-size:var(--mk-section-title)!important;
  line-height:1.08!important;
  letter-spacing:-.038em!important;
  font-weight:820!important;
}
.kicker,.eyebrow{
  font-family:var(--mk-public-font)!important;
  font-size:var(--mk-label)!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
}

/* Ingress og brødtekst */
.hero p,.heroLead{
  font-size:var(--mk-lead)!important;
  line-height:1.68!important;
  font-weight:430!important;
}
.sectionSub,.sectionHead>p,.platformIntro>p,
.activityManifestCopy>p,.activePrinciple p,.studentFeatureCopy>p{
  font-size:var(--mk-copy)!important;
  line-height:1.67!important;
  font-weight:430!important;
}

/* Kort – samme rytme på begge sider */
.feature h3,.featureCard h3,.platformCard h3,.widgetCard h3{
  font-size:var(--mk-card-title)!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:-.012em!important;
}
.feature p,.featureCard p,.platformCard p,.widgetCard p{
  font-size:var(--mk-card-copy)!important;
  line-height:1.62!important;
  font-weight:420!important;
}
.featureCard strong,.comingWidget strong,.platformPrice{
  font-size:12px!important;
  line-height:1.4!important;
}

/* Arbeidsflyt – skal ikke se ut som et dashboard */
.flow{gap:15px!important}
.flowStep{
  min-height:142px!important;
  padding:24px 22px 22px 62px!important;
  border-radius:17px!important;
}
.flowStep b{
  left:19px!important;
  top:22px!important;
  width:31px!important;
  height:31px!important;
  border-radius:9px!important;
  font-size:12px!important;
}
.flowStep strong{
  font-size:16px!important;
  line-height:1.3!important;
  font-weight:800!important;
  margin-bottom:8px!important;
}
.flowStep span{
  font-size:13.5px!important;
  line-height:1.58!important;
}

/* Produkt- og aktivitetselementer */
.platformTags span,.activityPills span,.activityWords span,
.productBadge,.addonBadge{
  font-family:var(--mk-public-font)!important;
}
.platformTags span,.activityPills span,.activityWords span{
  font-size:11.5px!important;
}
.studentFlow strong{font-size:14px!important}
.studentFlow span{font-size:12.5px!important;line-height:1.5!important}

/* Widgetbiblioteket må tåle mer tekst uten at alt krymper */
.widgetGrid.expanded{gap:14px!important}
.widgetGrid.expanded .widgetCard{
  min-height:190px!important;
  padding:21px!important;
}
.widgetCard .symbol{font-size:25px!important;margin-bottom:13px!important}

/* CTA */
.ctaBand h2,.ctaText h2{font-size:30px!important;font-weight:820!important}
.ctaBand p,.ctaText p{font-size:14px!important;line-height:1.6!important}

/* Store skjermer – samme prinsipp som roadmap/endringer:
   innholdet får vokse, men ikke bare hovedoverskriften. */
@media(min-width:1320px){
  :root{
    --mk-display:clamp(58px,4.6vw,78px);
    --mk-section-title:clamp(39px,2.9vw,50px);
    --mk-card-title:19px;
    --mk-lead:19px;
    --mk-copy:16px;
    --mk-card-copy:14.5px;
    --mk-label:11.5px;
  }
  .flowStep{
    min-height:158px!important;
    padding:27px 25px 25px 68px!important;
  }
  .flowStep b{left:21px!important;top:25px!important;width:33px!important;height:33px!important}
  .flowStep strong{font-size:17px!important}
  .flowStep span{font-size:14.5px!important}
  .widgetGrid.expanded .widgetCard{min-height:205px!important;padding:23px!important}
}
@media(min-width:1900px){
  :root{
    --mk-display:78px;
    --mk-section-title:52px;
    --mk-card-title:20px;
    --mk-lead:20px;
    --mk-copy:17px;
    --mk-card-copy:15px;
    --mk-label:12px;
  }
  .flow{gap:18px!important}
  .flowStep{min-height:170px!important;padding:30px 28px 28px 72px!important}
  .flowStep strong{font-size:18px!important}
  .flowStep span{font-size:15px!important}
  .featureCard,.platformCard{padding:26px!important}
  .widgetGrid.expanded .widgetCard{min-height:215px!important;padding:25px!important}
}
@media(max-width:940px){
  :root{
    --mk-display:clamp(44px,8vw,60px);
    --mk-section-title:clamp(32px,6vw,42px);
    --mk-card-title:18px;
    --mk-lead:17px;
    --mk-copy:15px;
    --mk-card-copy:13.5px;
  }
}
@media(max-width:650px){
  :root{
    --mk-display:44px;
    --mk-section-title:32px;
    --mk-card-title:17px;
    --mk-lead:16px;
    --mk-copy:14.5px;
    --mk-card-copy:13px;
  }
  .flowStep{min-height:0!important;padding:20px 18px 20px 57px!important}
  .flowStep b{left:16px!important;top:19px!important}
}