/* MittKlasserom Public UI v6
   v4.11.0 — clean responsive public system
   Start/forsiden is the source of truth for the entire public website. */

:root{
  --mk-navy:#0f2b50;
  --mk-navy-2:#17385f;
  --mk-purple:#7650e8;
  --mk-purple-2:#9b78ef;
  --mk-ink:#172334;
  --mk-muted:#647184;
  --mk-line:#d9e2ec;
  --mk-paper:#f7f9ff;
  --mk-mint:#dff4e9;
  --mk-lav:#eee7ff;
  --mk-sky:#e9f3fd;
  --mk-cream:#fff4d6;

  /* Responsive canvas: deliberately more compact at 1920,
     wider at 2560, so both resolutions keep the same visual balance. */
  --mk-canvas-max:1180px;
  --mk-canvas-gutter:40px;

  --mk-page-title:clamp(40px,3.6vw,58px);
  --mk-section-title:clamp(28px,2.45vw,40px);
  --mk-card-title:clamp(20px,1.35vw,25px);
  --mk-body:16px;
  --mk-lead:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--mk-ink);
  font-family:Arial,Helvetica,sans-serif!important;
  background:
    radial-gradient(circle at 8% 8%,rgba(118,80,232,.10),transparent 23rem),
    radial-gradient(circle at 92% 18%,rgba(154,120,239,.11),transparent 28rem),
    linear-gradient(180deg,#f7f9ff 0%,#fbfdff 45%,#f4f7fb 100%);
}
a{color:inherit}
img{max-width:100%}

/* ---------- One shared canvas ---------- */
.mkPublicShell,
.mkHomeShell,
body:not(.mkAuthPage) main .shell{
  width:min(calc(100% - var(--mk-canvas-gutter)),var(--mk-canvas-max))!important;
  max-width:var(--mk-canvas-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* ---------- Header ---------- */
.mkSiteHeader{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  width:100%!important;
  background:rgba(248,251,255,.92)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  border-bottom:1px solid rgba(214,224,235,.82)!important;
  box-shadow:none!important;
}
.mkHeaderInner{
  min-height:clamp(82px,4vw,92px)!important;
  display:flex!important;
  align-items:center!important;
  gap:clamp(22px,1.7vw,32px)!important;
}
.mkBrand{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.mkBrand img{
  display:block!important;
  width:clamp(225px,12.5vw,285px)!important;
  height:auto!important;
  max-height:76px!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
}
.mkMenuToggle{
  display:none!important;
  margin-left:auto!important;
  width:44px!important;
  height:44px!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #c7d1dc!important;
  border-radius:11px!important;
  background:#fff!important;
  color:var(--mk-navy)!important;
  font-size:22px!important;
  cursor:pointer!important;
}
.mkSiteNav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(17px,1.25vw,24px)!important;
  margin-left:auto!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.mkNavLinks{
  display:flex!important;
  align-items:center!important;
  gap:clamp(18px,1.45vw,28px)!important;
  margin:0!important;
  padding:0!important;
}
.mkNavLink,
.mkNavLink:link,
.mkNavLink:visited{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:clamp(82px,4vw,92px)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#30425c!important;
  font-size:clamp(13px,.72vw,15px)!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
.mkNavLink:hover,
.mkNavLink:focus,
.mkNavLink.active{
  color:var(--mk-purple)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.mkNavLink:before{display:none!important}
.mkNavLink.active:after{
  content:""!important;
  position:absolute!important;
  display:block!important;
  left:0!important;
  right:0!important;
  bottom:clamp(18px,1vw,22px)!important;
  width:auto!important;
  height:3px!important;
  border-radius:3px!important;
  background:var(--mk-purple)!important;
}
.mkNavActions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
}
.mkPublicBtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:43px!important;
  padding:0 17px!important;
  border:1px solid #b9c5d3!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--mk-navy)!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.mkPublicBtn.primary{
  border-color:var(--mk-purple)!important;
  background:var(--mk-purple)!important;
  color:#fff!important;
}

/* ---------- Shared typography / inner page rhythm ---------- */
body:not(.mkAuthPage) main{
  font-family:Arial,Helvetica,sans-serif!important;
}
body:not(.mkAuthPage) main>.hero:not(.mkHomeHero),
body:not(.mkAuthPage) main>.faqHero,
body:not(.mkAuthPage) main>.supportHero,
body:not(.mkAuthPage) main>.newTicketHero{
  padding-top:clamp(34px,2.2vw,46px)!important;
  padding-bottom:clamp(24px,1.7vw,34px)!important;
}
body:not(.mkAuthPage) main>.hero:not(.mkHomeHero) h1,
body:not(.mkAuthPage) main>.faqHero h1,
body:not(.mkAuthPage) main>.supportHero h1,
body:not(.mkAuthPage) main>.newTicketHero h1{
  font-size:var(--mk-page-title)!important;
  line-height:1.02!important;
  letter-spacing:-.046em!important;
  font-weight:800!important;
  color:var(--mk-navy)!important;
}
body:not(.mkAuthPage) main h2{
  font-size:var(--mk-section-title)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  font-weight:800!important;
}
body:not(.mkAuthPage) main h3{
  font-size:var(--mk-card-title)!important;
  line-height:1.2!important;
  letter-spacing:-.015em!important;
}
body:not(.mkAuthPage) main p,
body:not(.mkAuthPage) main li{
  font-size:var(--mk-body)!important;
  line-height:1.6!important;
}
body:not(.mkAuthPage) main>.hero:not(.mkHomeHero) p,
body:not(.mkAuthPage) main>.faqHero p,
body:not(.mkAuthPage) main .lead{
  font-size:var(--mk-lead)!important;
  line-height:1.58!important;
}
.eyebrow,.kicker,.tag{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:#557198!important;
}

/* Component heading safeguards */
body:not(.mkAuthPage) main .priceCard h2{
  font-size:clamp(28px,2.1vw,40px)!important;
}
body:not(.mkAuthPage) main .faqGroupHead h2,
body:not(.mkAuthPage) main .card h2,
body:not(.mkAuthPage) main .panel h2,
body:not(.mkAuthPage) main .formCard h2{
  font-size:clamp(22px,1.7vw,28px)!important;
}
body:not(.mkAuthPage) main .faqQuestion{font-size:16px!important}
body:not(.mkAuthPage) main .faqAnswer div{font-size:15px!important}
body:not(.mkAuthPage) main .body{font-size:15px!important;line-height:1.7!important}
body:not(.mkAuthPage) main .body h2{font-size:26px!important}
body:not(.mkAuthPage) main .body h3{font-size:21px!important}

/* ---------- Homepage: master visual reference ---------- */
.mkHomePage{
  background:
    radial-gradient(circle at 8% 8%,rgba(118,80,232,.12),transparent 23rem),
    radial-gradient(circle at 92% 18%,rgba(154,120,239,.13),transparent 28rem),
    linear-gradient(180deg,#f6f9ff 0%,#f8fbff 42%,#f3f7fb 100%)!important;
}
.mkHomePage main{overflow:hidden}
.mkHomeHero{
  position:relative;
  padding:clamp(50px,3.2vw,76px) 0 clamp(44px,2.7vw,62px);
}
.mkHomeHero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 25%,rgba(255,255,255,.82),transparent 32rem),
    radial-gradient(circle at 80% 25%,rgba(217,230,255,.72),transparent 34rem);
}
.mkHomeHeroGrid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(38px,3vw,58px);
  align-items:center;
}
.mkHomeEyebrow{
  font-size:clamp(11px,.62vw,13px);
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#557198;
}
.mkHomeHero h1{
  font-size:clamp(58px,3.4vw,88px)!important;
  line-height:.96!important;
  letter-spacing:-.055em!important;
  color:var(--mk-navy)!important;
  margin:18px 0 20px!important;
  max-width:760px;
}
.mkHomeHero p{
  font-size:clamp(17px,.86vw,21px)!important;
  line-height:1.55!important;
  color:#33465e!important;
  max-width:680px;
}
.mkHomeActions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.mkHomeBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 19px;
  border-radius:12px;
  font-weight:800;
  border:1px solid #b9c5d3;
  background:#fff;
  color:var(--mk-navy);
  text-decoration:none;
}
.mkHomeBtn.primary{background:var(--mk-purple);border-color:var(--mk-purple);color:#fff}
.mkHomeBullets{
  display:flex;
  gap:clamp(14px,1.1vw,22px);
  flex-wrap:wrap;
  font-size:clamp(12px,.64vw,14px);
  font-weight:700;
  color:#40536d;
}
.mkHomeBullets span:before{
  content:"✓";
  margin-right:7px;
  display:inline-grid;
  place-items:center;
  width:19px;height:19px;
  border-radius:50%;
  background:#d7f4e8;
  color:#176c52;
}
.mkHomeVisual{
  position:relative;
  min-height:clamp(420px,25vw,520px);
  border-radius:clamp(30px,2vw,42px);
  background:#eef3fb;
  border:1px solid rgba(190,206,226,.9);
  box-shadow:0 26px 70px rgba(31,57,92,.09);
  overflow:hidden;
  padding:0;
}
.mkHomeVisual:before{display:none}
.mkHomeVisual img{
  display:block;
  width:100%;
  height:100%;
  min-height:clamp(420px,25vw,520px);
  object-fit:cover;
  object-position:center center;
}
.mkQuick{padding:8px 0 clamp(64px,4vw,88px)}
.mkQuickGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1vw,18px)}
.mkQuickCard{
  min-height:clamp(166px,9vw,190px);
  border-radius:26px;
  padding:clamp(22px,1.45vw,28px);
  border:1px solid;
  box-shadow:0 18px 40px rgba(34,55,84,.055);
  text-decoration:none;
  color:inherit;
}
.mkQuickCard.mint{background:var(--mk-mint);border-color:#afd9c4}
.mkQuickCard.lav{background:var(--mk-lav);border-color:#cdbbf7}
.mkQuickCard.sky{background:var(--mk-sky);border-color:#c6daee}
.mkQuickCard h3{font-size:clamp(20px,1.2vw,24px)!important;margin:10px 0 7px!important}
.mkQuickCard p{margin:0!important;color:#44546a!important;font-size:clamp(14px,.74vw,16px)!important}
.mkQuickCard b{display:block;margin-top:18px;color:var(--mk-navy)}
.mkQuickIcon{font-size:30px}
.mkHomeBand{
  padding:clamp(66px,4vw,88px) 0;
  background:radial-gradient(circle at 10% 35%,rgba(255,255,255,.55),transparent 25rem),linear-gradient(135deg,#e7ddff,#d9cbff 50%,#eee8ff);
}
.mkHomeBandGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(42px,3vw,56px);align-items:center}
.mkHomeBand h2,.mkHomeSectionTitle{font-size:clamp(38px,2.7vw,58px)!important;line-height:1.03!important;letter-spacing:-.045em!important;margin:10px 0 16px!important}
.mkHomeBand p{font-size:clamp(16px,.8vw,18px)!important;color:#50496b!important;max-width:700px}
.mkHomeBandPanel{background:rgba(255,255,255,.68);border:1px solid #c7b7ed;border-radius:32px;padding:34px}
.mkHomeBandPanel img{width:100%;max-height:330px;object-fit:contain}
.mkHomeSchool{padding:clamp(72px,4.3vw,96px) 0;background:radial-gradient(circle at 86% 18%,rgba(118,80,232,.09),transparent 25rem),linear-gradient(180deg,#f8fbff,#f3f8fc)}
.mkHomeHead{display:flex;justify-content:space-between;align-items:end;gap:34px;margin-bottom:30px}
.mkHomeHead p{max-width:650px;color:var(--mk-muted)!important;font-size:clamp(15px,.76vw,17px)!important}
.mkHomeTiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mkHomeTile{border-radius:24px;padding:26px;min-height:210px;border:1px solid var(--mk-line);background:#fff}
.mkHomeTile:nth-child(1){background:#eef8f3}.mkHomeTile:nth-child(2){background:#f2edff}.mkHomeTile:nth-child(3){background:#eef5fc}.mkHomeTile:nth-child(4){background:#fff7df}
.mkHomeTile h3{font-size:21px!important;margin:14px 0 7px!important}.mkHomeTile p{margin:0!important;color:#526176!important;font-size:14px!important}.mkHomeTile b{display:block;margin-top:20px}
.mkHomeCta{padding:clamp(64px,3.8vw,82px) 0}
.mkHomeCtaBox{border-radius:32px;background:var(--mk-navy);color:#fff;padding:44px 50px;display:flex;justify-content:space-between;align-items:center;gap:28px}
.mkHomeCtaBox h2{font-size:clamp(32px,2vw,38px)!important;margin:0 0 8px!important}.mkHomeCtaBox p{margin:0!important;color:#cfdaea!important}

/* ---------- Auth ---------- */
body.mkAuthPage{
  min-height:100vh;
  background:radial-gradient(circle at 10% 10%,rgba(118,80,232,.13),transparent 25rem),radial-gradient(circle at 90% 40%,rgba(185,224,215,.34),transparent 30rem),linear-gradient(180deg,#f7f9ff,#f2f7fb)!important;
}
.mkAuthLayout{
  width:min(calc(100% - var(--mk-canvas-gutter)),min(var(--mk-canvas-max),1440px));
  margin:0 auto;
  padding:60px 0 80px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,.72fr);
  gap:54px;
  align-items:center;
}
.mkAuthStory h1{font-size:clamp(44px,3.6vw,66px)!important;line-height:.98!important;letter-spacing:-.05em!important;color:var(--mk-navy)!important}
.mkAuthStory p{font-size:18px!important;line-height:1.6!important;color:#40536d!important}
.mkAuthPromises{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.mkAuthPromise{border:1px solid var(--mk-line);border-radius:20px;padding:18px;background:rgba(255,255,255,.62);font-size:14px;color:#4d5e73}
.mkAuthPromise:nth-child(1){background:var(--mk-mint)}.mkAuthPromise:nth-child(2){background:var(--mk-lav)}.mkAuthPromise:nth-child(3){background:var(--mk-sky)}
.mkAuthCard,.mkAuthPage main.box{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid #d5dfeb!important;
  border-radius:28px!important;
  padding:34px!important;
  box-shadow:0 28px 70px rgba(31,57,92,.11)!important;
}
.mkAuthCard h2,.mkAuthPage main.box h1{font-size:30px!important;color:var(--mk-navy)!important}
.mkAuthPage input,.mkAuthPage select{width:100%;border:1px solid #cbd7e4!important;border-radius:12px!important;background:#fff!important;padding:14px 15px!important}
.mkAuthPage button.btn,.mkAuthCard button.btn{border-radius:12px!important;background:var(--mk-purple)!important;color:#fff!important}

/* ---------- Footer ---------- */
.mkSiteFooter{
  border-top:1px solid var(--mk-line)!important;
  background:rgba(255,255,255,.80)!important;
  padding:40px 0 44px!important;
}
.mkFooterInner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.mkFooterBrand img{width:235px!important;height:auto!important;display:block!important;object-fit:contain!important}
.mkFooterBrand span{display:block;margin-top:8px;color:#6b778a!important}
.mkFooterColumns{display:flex;gap:48px}
.mkFooterColumns>div{display:grid;gap:8px}
.mkFooterColumns a{color:#657284!important;text-decoration:none}
.mkFooterMeta{display:grid;gap:8px;color:#31445e!important}
.mkFooterCredit a{color:var(--mk-purple)!important}

/* ---------- Responsive canvas ---------- */
@media(min-width:1200px){
  :root{--mk-canvas-max:1180px;--mk-canvas-gutter:48px}
}
@media(min-width:1440px){
  :root{--mk-canvas-max:1320px;--mk-canvas-gutter:56px}
}
@media(min-width:1600px){
  :root{--mk-canvas-max:1480px;--mk-canvas-gutter:64px}
}
@media(min-width:2000px){
  :root{--mk-canvas-max:1640px;--mk-canvas-gutter:80px}
}
@media(min-width:2400px){
  :root{--mk-canvas-max:1760px;--mk-canvas-gutter:96px}
}

/* ---------- Tablet / mobile ---------- */
@media(max-width:1150px){
  :root{--mk-canvas-max:100%;--mk-canvas-gutter:36px}
  .mkMenuToggle{display:flex!important}
  .mkSiteNav{
    display:none!important;
    position:fixed!important;
    left:18px!important;
    right:18px!important;
    top:86px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:14px!important;
    margin:0!important;
    padding:18px!important;
    background:#fff!important;
    border:1px solid var(--mk-line)!important;
    border-radius:20px!important;
    box-shadow:0 25px 70px rgba(31,57,92,.16)!important;
  }
  .mkSiteHeader.menuOpen .mkSiteNav{display:flex!important}
  .mkNavLinks{display:grid!important;gap:2px!important}
  .mkNavActions{display:grid!important;gap:8px!important;padding-top:10px!important;border-top:1px solid #e2e7ee!important}
  .mkNavLink,.mkNavLink:link,.mkNavLink:visited{
    min-height:44px!important;
    justify-content:flex-start!important;
    padding:0 12px!important;
  }
  .mkNavLink.active:after{left:12px!important;right:12px!important;bottom:4px!important;height:2px!important}
  .mkHomeHeroGrid,.mkHomeBandGrid{grid-template-columns:1fr}
  .mkHomeVisual{min-height:400px}
  .mkQuickGrid{grid-template-columns:1fr}
  .mkHomeTiles{grid-template-columns:1fr 1fr}
  .mkAuthLayout{grid-template-columns:1fr;max-width:760px;gap:28px}
}
@media(max-width:700px){
  :root{
    --mk-canvas-gutter:28px;
    --mk-page-title:38px;
    --mk-section-title:30px;
    --mk-card-title:21px;
    --mk-body:15px;
    --mk-lead:17px;
  }
  .mkHeaderInner{min-height:74px!important}
  .mkBrand img{width:205px!important;max-height:58px!important}
  .mkSiteNav{top:80px!important}
  .mkHomeHero{padding-top:42px}
  .mkHomeHero h1{font-size:48px!important}
  .mkHomeHero p{font-size:18px!important}
  .mkHomeVisual,.mkHomeVisual img{min-height:320px!important}
  .mkHomeTiles{grid-template-columns:1fr}
  .mkHomeHead,.mkHomeCtaBox{flex-direction:column;align-items:flex-start}
  .mkHomeCtaBox{padding:30px 24px}
  .mkFooterColumns{width:100%;justify-content:space-between}
  .mkAuthLayout{padding:32px 0 55px}
  .mkAuthPromises{grid-template-columns:1fr}
  .mkAuthCard,.mkAuthPage main.box{padding:24px!important;border-radius:22px!important}
}



/* ============================================================
   v4.11.1 — HEADER ROOT-CAUSE FIX
   public.css contains historical capsule navigation rules.
   Reset every visual property on the shared navigation wrapper so
   Start and every public subpage render the exact same header.
   ============================================================ */
.mkSiteHeader .mkSiteNav{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.mkSiteHeader .mkNavLinks{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}
.mkSiteHeader .mkNavActions{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.mkSiteHeader .mkNavLink,
.mkSiteHeader .mkNavLink:link,
.mkSiteHeader .mkNavLink:visited,
.mkSiteHeader .mkNavLink:hover,
.mkSiteHeader .mkNavLink:focus,
.mkSiteHeader .mkNavLink:active,
.mkSiteHeader .mkNavLink.active{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-decoration:none!important;
}
.mkSiteHeader .mkNavLink.active:after{
  display:block!important;
}



/* ============================================================
   v4.11.1 — PRICING PAGE RESTORATION
   Prices are the primary content. Compact intro, large readable
   cards, consistent spacing, and responsive 4/2/1-column layout.
   ============================================================ */
.pricingHero{
  padding:34px 0 24px!important;
  text-align:center!important;
  background:
    radial-gradient(circle at 18% 8%,rgba(126,231,226,.25),transparent 26rem),
    radial-gradient(circle at 84% 6%,rgba(118,80,232,.18),transparent 30rem),
    linear-gradient(135deg,#f7f7ff,#eef7fb)!important;
}
.pricingHero .shell{
  width:min(calc(100% - var(--mk-canvas-gutter)),1180px)!important;
  max-width:1180px!important;
}
.pricingHero .eyebrow{
  margin-bottom:9px!important;
}
body:not(.mkAuthPage) main .pricingHero h1,
.pricingHero h1{
  max-width:1120px!important;
  margin:8px auto 12px!important;
  font-size:clamp(40px,3.35vw,58px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}
.pricingHero h1 span{
  color:var(--mk-purple)!important;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
}
body:not(.mkAuthPage) main .pricingHero p,
.pricingHero p{
  max-width:760px!important;
  margin:0 auto!important;
  font-size:16px!important;
  line-height:1.55!important;
  color:#53657a!important;
}

.pricing{
  padding:20px 0 54px!important;
}
.pricing .shell{
  width:min(calc(100% - var(--mk-canvas-gutter)),1600px)!important;
  max-width:1600px!important;
}
.mkBillingTrust{
  margin:0 0 16px!important;
  padding:12px 16px!important;
  border:1px solid #d8cdf7!important;
  border-radius:14px!important;
  background:rgba(248,245,255,.86)!important;
  color:#54436f!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.priceGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}
.priceCard{
  position:relative!important;
  min-width:0!important;
  min-height:100%!important;
  padding:26px!important;
  border:1px solid #d7e0ea!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 18px 44px rgba(31,57,92,.07)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
.priceCard.featured{
  border-color:#c8bcf4!important;
  background:linear-gradient(155deg,#fff,#f5f1ff)!important;
}
.priceCard.school{
  border-color:#c9dbe9!important;
  background:linear-gradient(155deg,#fff,#f0f7fd)!important;
}
.priceCard:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:4px!important;
  background:linear-gradient(90deg,#12afea,#7650e8,#ffbd22)!important;
}
.priceCard .badge{
  align-self:flex-start!important;
  display:inline-flex!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#f0eaff!important;
  color:#6848c8!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}
body:not(.mkAuthPage) main .priceCard h2,
.priceCard h2{
  margin:18px 0 10px!important;
  font-size:clamp(28px,2.15vw,40px)!important;
  line-height:1.02!important;
  letter-spacing:-.035em!important;
  color:var(--mk-navy)!important;
  overflow-wrap:anywhere!important;
}
.priceCard .price{
  margin:0!important;
  font-size:clamp(34px,2.25vw,44px)!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  font-weight:900!important;
  color:var(--mk-navy)!important;
}
.priceCard .price small{
  font-size:12px!important;
  font-weight:700!important;
  color:#7a8898!important;
  white-space:nowrap!important;
}
body:not(.mkAuthPage) main .priceCard p,
.priceCard p{
  margin:20px 0 8px!important;
  font-size:14px!important;
  line-height:1.55!important;
  color:#617286!important;
}
.priceCard ul{
  list-style:none!important;
  padding:0!important;
  margin:14px 0 0!important;
  display:grid!important;
  gap:9px!important;
}
body:not(.mkAuthPage) main .priceCard li,
.priceCard li{
  position:relative!important;
  padding-left:18px!important;
  font-size:13px!important;
  line-height:1.45!important;
  color:#53657a!important;
}
.priceCard li:before{
  content:"✓"!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  color:#1ea66f!important;
  font-weight:900!important;
}
.priceBuy{
  margin-top:auto!important;
  padding-top:22px!important;
}
.priceBuy .btn,
.addonBuy .btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:0 16px!important;
  border-radius:12px!important;
  border:1px solid var(--mk-purple)!important;
  background:var(--mk-purple)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.schoolDeal{
  margin-top:auto!important;
  padding-top:18px!important;
  font-size:12px!important;
  line-height:1.5!important;
  color:#5e6c7d!important;
}

/* Supporting pricing content should follow the cards, not compete with them. */
.priceJump{
  padding:0 0 42px!important;
}
.priceJumpGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}
.priceJumpCard{
  min-width:0!important;
  padding:17px!important;
  border:1px solid #d6e0e9!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 12px 28px rgba(31,57,92,.05)!important;
}
.salesIntro,
.addonPricing,
.infoscreenPricing,
.learningPricing,
.teacherBuilt,
.inquirySection{
  position:relative!important;
}
body:not(.mkAuthPage) main .salesIntro h2,
body:not(.mkAuthPage) main .addonPricing h2,
body:not(.mkAuthPage) main .infoscreenPricing h2,
body:not(.mkAuthPage) main .learningPricing h2,
body:not(.mkAuthPage) main .teacherBuilt h2,
body:not(.mkAuthPage) main .inquirySection h2{
  font-size:clamp(28px,2.35vw,38px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}

@media(max-width:1250px){
  .priceGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pricing .shell{width:min(calc(100% - var(--mk-canvas-gutter)),1120px)!important}
}
@media(max-width:760px){
  .pricingHero{padding:26px 0 18px!important}
  body:not(.mkAuthPage) main .pricingHero h1,
  .pricingHero h1{font-size:36px!important}
  .priceGrid{grid-template-columns:1fr!important}
  .priceJumpGrid{grid-template-columns:1fr!important}
  .priceCard{padding:22px!important}
}


/* ==========================================================
   v4.12.2 — reusable public showcase carousel
   Real MittKlasserom screenshots supplied by the user.
   ========================================================== */
.mkShowcaseSection{
  padding:clamp(70px,4.5vw,100px) 0!important;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.60),transparent 25rem),
    radial-gradient(circle at 88% 22%,rgba(118,80,232,.12),transparent 26rem),
    linear-gradient(135deg,#e7ddff 0%,#dce9fb 54%,#eef7f6 100%)!important;
  border-top:1px solid rgba(201,196,229,.8)!important;
  border-bottom:1px solid rgba(201,211,226,.8)!important;
}
.mkShowcaseShell{
  width:min(calc(100% - var(--mk-canvas-gutter)),var(--mk-canvas-max))!important;
  max-width:var(--mk-canvas-max)!important;
}
.mkShowcaseHead{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr)!important;
  gap:clamp(34px,3vw,58px)!important;
  align-items:end!important;
  margin-bottom:28px!important;
}
.mkShowcaseHead h2{
  margin:8px 0 0!important;
  max-width:820px!important;
  color:var(--mk-navy)!important;
  font-size:clamp(36px,2.9vw,56px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}
.mkShowcaseHead>p{
  margin:0!important;
  max-width:640px!important;
  color:#586b80!important;
  font-size:16px!important;
  line-height:1.62!important;
}
.mkShowcaseCarousel{
  position:relative!important;
}
.mkShowcaseViewport{
  position:relative!important;
  overflow:hidden!important;
  min-height:clamp(430px,38vw,720px)!important;
  border:1px solid rgba(198,208,223,.95)!important;
  border-radius:32px!important;
  background:#132f43!important;
  box-shadow:0 28px 74px rgba(29,52,83,.15)!important;
}
.mkShowcaseTrack{
  position:relative!important;
  min-height:inherit!important;
}
.mkShowcaseSlide{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateX(18px) scale(.995)!important;
  transition:opacity .38s ease,transform .38s ease,visibility .38s!important;
  pointer-events:none!important;
}
.mkShowcaseSlide.is-active{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  pointer-events:auto!important;
}
.mkShowcaseImageWrap{
  min-height:clamp(360px,32vw,620px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at center,rgba(64,112,111,.35),transparent 42rem),
    linear-gradient(135deg,#17364b,#214b43)!important;
}
.mkShowcaseImageWrap img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:clamp(360px,32vw,620px)!important;
  max-height:620px!important;
  object-fit:contain!important;
  object-position:center!important;
}
.mkShowcaseCaption{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding:18px 22px!important;
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid #dfe6ed!important;
}
.mkShowcaseCaption>span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:#eee8ff!important;
  color:#6445c2!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.mkShowcaseCaption strong{
  display:block!important;
  color:var(--mk-navy)!important;
  font-size:18px!important;
  line-height:1.15!important;
}
.mkShowcaseCaption p{
  margin:4px 0 0!important;
  color:#647589!important;
  font-size:13px!important;
  line-height:1.5!important;
}
.mkShowcaseControls{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  margin-top:18px!important;
}
.mkShowcaseArrow{
  width:42px!important;
  height:42px!important;
  border:1px solid #cdd7e3!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--mk-navy)!important;
  font-size:18px!important;
  font-weight:800!important;
  cursor:pointer!important;
  box-shadow:0 8px 20px rgba(31,57,92,.06)!important;
}
.mkShowcaseArrow:hover{
  border-color:#c5b5f3!important;
  color:var(--mk-purple)!important;
  background:#fbf9ff!important;
}
.mkShowcaseDots{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:0 10px!important;
}
.mkShowcaseDots button{
  width:9px!important;
  height:9px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#b9c5d4!important;
  cursor:pointer!important;
  transition:width .2s ease,background .2s ease!important;
}
.mkShowcaseDots button.is-active{
  width:28px!important;
  background:var(--mk-purple)!important;
}
@media(max-width:900px){
  .mkShowcaseHead{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .mkShowcaseViewport{
    min-height:420px!important;
    border-radius:24px!important;
  }
  .mkShowcaseCaption{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .mkShowcaseCaption>span{
    justify-self:start!important;
  }
}
@media(max-width:650px){
  .mkShowcaseSection{
    padding:56px 0!important;
  }
  .mkShowcaseHead h2{
    font-size:36px!important;
  }
  .mkShowcaseViewport{
    min-height:360px!important;
    border-radius:20px!important;
  }
  .mkShowcaseImageWrap,
  .mkShowcaseImageWrap img{
    min-height:280px!important;
  }
  .mkShowcaseCaption{
    padding:15px 16px!important;
  }
  .mkShowcaseCaption p{
    font-size:12px!important;
  }
  .mkShowcaseArrow{
    width:40px!important;height:40px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .mkShowcaseSlide{transition:none!important}
}


/* v4.12.4 — discreet disclosure for the generated homepage hero illustration */
.mkHomeVisual{position:relative!important}
.mkAiImageNote{
  position:absolute!important;
  right:14px!important;
  bottom:14px!important;
  z-index:3!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:26px!important;
  padding:0 9px!important;
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:999px!important;
  background:rgba(18,39,58,.58)!important;
  color:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
  line-height:1!important;
  box-shadow:0 6px 18px rgba(11,28,45,.12)!important;
  pointer-events:none!important;
}
@media(max-width:650px){
  .mkAiImageNote{
    right:10px!important;
    bottom:10px!important;
    min-height:24px!important;
    font-size:9px!important;
  }
}


/* ==========================================================
   v4.13.1 — AUTH FLOW POLISH
   Login/register share one responsive visual system.
   ========================================================== */
body.mkAuthPage .mkAuthLayout{
  width:min(calc(100% - var(--mk-canvas-gutter)),1440px)!important;
  max-width:1440px!important;
  min-height:calc(100vh - 92px)!important;
  margin:0 auto!important;
  padding:clamp(42px,4vw,72px) 0 clamp(58px,5vw,88px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(430px,.78fr)!important;
  gap:clamp(52px,5vw,88px)!important;
  align-items:center!important;
}
body.mkAuthPage .mkAuthStory{
  min-width:0!important;
  max-width:760px!important;
}
body.mkAuthPage .mkAuthEyebrow{
  color:#58739a!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}
body.mkAuthPage .mkAuthStory h1{
  margin:8px 0 18px!important;
  max-width:760px!important;
  font-size:clamp(48px,4.1vw,68px)!important;
  line-height:.98!important;
  letter-spacing:-.052em!important;
  color:var(--mk-navy)!important;
}
body.mkAuthPage .mkAuthStory>p{
  max-width:760px!important;
  margin:0!important;
  color:#40536d!important;
  font-size:18px!important;
  line-height:1.62!important;
}
body.mkAuthPage .mkAuthPromises{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:30px!important;
}
body.mkAuthPage .mkAuthPromise{
  min-width:0!important;
  min-height:96px!important;
  padding:17px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:7px!important;
  border:1px solid var(--mk-line)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.68)!important;
  color:#4d5e73!important;
  box-shadow:0 10px 28px rgba(31,57,92,.035)!important;
}
body.mkAuthPage .mkAuthPromise:nth-child(1){background:var(--mk-mint)!important}
body.mkAuthPage .mkAuthPromise:nth-child(2){background:var(--mk-lav)!important}
body.mkAuthPage .mkAuthPromise:nth-child(3){background:var(--mk-sky)!important}
body.mkAuthPage .mkAuthPromise b{
  display:block!important;
  margin:0!important;
  color:#3f5372!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
body.mkAuthPage .mkAuthPromise span{
  display:block!important;
  margin:0!important;
  color:#4d6178!important;
  font-size:13px!important;
  line-height:1.38!important;
  font-weight:500!important;
}

/* Form card */
body.mkAuthPage .mkAuthCard{
  width:100%!important;
  max-width:620px!important;
  justify-self:end!important;
  margin:0!important;
  padding:clamp(30px,2.2vw,38px)!important;
  border:1px solid #d5dfeb!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 28px 70px rgba(31,57,92,.11)!important;
}
body.mkAuthPage .mkAuthCard h2{
  margin:0 0 7px!important;
  text-align:left!important;
  color:var(--mk-navy)!important;
  font-size:31px!important;
  line-height:1.1!important;
  letter-spacing:-.035em!important;
}
body.mkAuthPage .mkAuthCard>.sub{
  margin:0 0 24px!important;
  text-align:center!important;
  color:#6c8396!important;
  font-size:13px!important;
  line-height:1.5!important;
}
body.mkAuthPage .mkAuthCard form{
  margin:0!important;
}
body.mkAuthPage .mkAuthCard label{
  display:block!important;
  margin:14px 0 6px!important;
  color:#173650!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:850!important;
}
body.mkAuthPage .mkAuthCard input,
body.mkAuthPage .mkAuthCard select{
  width:100%!important;
  min-height:48px!important;
  padding:11px 13px!important;
  border:1px solid #cbd7e4!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#173650!important;
  font-size:14px!important;
  outline:none!important;
}
body.mkAuthPage .mkAuthCard input:focus,
body.mkAuthPage .mkAuthCard select:focus{
  border-color:#a894eb!important;
  box-shadow:0 0 0 3px rgba(118,80,232,.11)!important;
}
body.mkAuthPage .mkAuthCard .btn{
  width:100%!important;
  min-height:48px!important;
  margin-top:18px!important;
  border:1px solid var(--mk-purple)!important;
  border-radius:11px!important;
  background:linear-gradient(135deg,var(--mk-purple),#6843dc)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:0 12px 24px rgba(118,80,232,.15)!important;
}
body.mkAuthPage .mkAuthCard .links{
  margin-top:17px!important;
  text-align:center!important;
  color:#587086!important;
  font-size:11px!important;
  line-height:1.5!important;
}
body.mkAuthPage .mkAuthCard .links a{
  color:#087db6!important;
  font-weight:850!important;
}
body.mkAuthPage .mkAuthCard .back{
  display:block!important;
  margin-top:11px!important;
  text-align:center!important;
  color:#71899c!important;
  font-size:11px!important;
}
body.mkAuthPage .mkAuthCard .notice{
  margin:0 0 15px!important;
}

/* Register-specific workplace block follows the same card language. */
body.mkAuthPage.mkRegisterPage .mkAuthCard{
  max-width:680px!important;
}
body.mkAuthPage .schoolPicker{
  margin:20px 0 2px!important;
  padding:17px!important;
  border:1px solid #d8e2eb!important;
  border-radius:16px!important;
  background:#f7f9fd!important;
}
body.mkAuthPage .schoolPicker h2{
  margin:0 0 5px!important;
  color:var(--mk-navy)!important;
  font-size:19px!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
}
body.mkAuthPage .schoolPicker p{
  margin:0 0 12px!important;
  color:#6b7d90!important;
  font-size:12px!important;
  line-height:1.5!important;
}

/* Tablet/mobile: stack without making the story feel like a different product. */
@media(max-width:1000px){
  body.mkAuthPage .mkAuthLayout{
    grid-template-columns:1fr!important;
    max-width:760px!important;
    gap:30px!important;
    padding-top:36px!important;
  }
  body.mkAuthPage .mkAuthStory{
    max-width:none!important;
  }
  body.mkAuthPage .mkAuthCard{
    max-width:none!important;
    justify-self:stretch!important;
  }
}
@media(max-width:700px){
  body.mkAuthPage .mkAuthLayout{
    width:calc(100% - 28px)!important;
    min-height:0!important;
    padding:28px 0 54px!important;
  }
  body.mkAuthPage .mkAuthStory h1{
    font-size:42px!important;
  }
  body.mkAuthPage .mkAuthStory>p{
    font-size:16px!important;
  }
  body.mkAuthPage .mkAuthPromises{
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-top:22px!important;
  }
  body.mkAuthPage .mkAuthPromise{
    min-height:0!important;
    padding:14px 15px!important;
    gap:5px!important;
  }
  body.mkAuthPage .mkAuthCard{
    padding:24px 20px!important;
    border-radius:22px!important;
  }
  body.mkAuthPage .mkAuthCard h2{
    font-size:27px!important;
  }
}

/* v4.13.7 — authoritative public mobile drawer.
   The v6 header owns its mobile menu completely; no legacy page CSS may
   turn the drawer into in-flow navigation over the page content. */
.mkPublicMenuBackdrop{display:none!important}
@media(max-width:1150px){
  body.mkPublicMenuOpen{overflow:hidden!important}
  .mkSiteHeader{z-index:3000!important}
  .mkMenuToggle{position:relative!important;z-index:3002!important}
  .mkSiteHeader .mkSiteNav{display:none!important}
  .mkSiteHeader.menuOpen .mkSiteNav{
    display:flex!important;
    position:fixed!important;
    z-index:3001!important;
    top:calc(clamp(82px,4vw,92px) + 8px)!important;
    left:max(18px,env(safe-area-inset-left))!important;
    right:max(18px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-height:calc(100dvh - clamp(104px,6vw,120px))!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:10px!important;
    margin:0!important;
    padding:16px!important;
    border:1px solid #d9e2ec!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 24px 70px rgba(31,57,92,.20)!important;
  }
  .mkSiteHeader.menuOpen .mkNavLinks,
  .mkSiteHeader.menuOpen .mkNavActions{
    display:flex!important;
    width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .mkSiteHeader.menuOpen .mkNavActions{
    margin-top:4px!important;
    padding-top:12px!important;
    border-top:1px solid #e2e7ee!important;
  }
  .mkSiteHeader.menuOpen .mkNavLink,
  .mkSiteHeader.menuOpen .mkPublicBtn{
    display:flex!important;
    width:100%!important;
    min-height:48px!important;
    justify-content:flex-start!important;
    padding:0 14px!important;
  }
  .mkPublicMenuBackdrop:not([hidden]){
    display:block!important;
    position:fixed!important;
    z-index:2990!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(15,43,80,.24)!important;
    appearance:none!important;
    -webkit-appearance:none!important;
  }
}
@media(max-width:700px){
  .mkSiteHeader.menuOpen .mkSiteNav{
    top:82px!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    max-height:calc(100dvh - 94px)!important;
    padding:14px!important;
    border-radius:17px!important;
  }
}