/* ═══════════════════════════════════════════════
   EnkelMal — Guider / Guider / Oppaat (2026-10)
   Bygger på global.css + språkets tema (--c-primary, --c-accent, --font-main).
   Idé: «kunnskapsbase for et produktteam» – mørkt topp-panel, artikkelen som et
   hevet hvitt ark, formler vist som Excels formellinje (fx).
   ═══════════════════════════════════════════════ */
:root{--em-ink:var(--c-text,#0F172A);--em-soft:var(--c-text-light,#64748B);--em-line:var(--c-border,#E2E8F0);--em-card:#fff;--em-tint:var(--c-accent-light,rgba(0,0,0,.05));--em-r:14px}

/* ── Topp-panel (artikkel og hub) ── */
.em-top{position:relative;background:var(--c-primary);color:#fff;padding:44px 0 120px;overflow:hidden;isolation:isolate}
.em-top::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(1100px 380px at 85% -10%,var(--c-accent-glow,rgba(255,255,255,.12)),transparent 60%),radial-gradient(700px 300px at 0% 120%,rgba(255,255,255,.06),transparent 60%)}
.em-top::after{content:"";position:absolute;right:-60px;top:28px;width:340px;height:340px;z-index:-1;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 46px rgba(255,255,255,.025),0 0 0 92px rgba(255,255,255,.02)}
.em-wrap{max-width:880px;margin:0 auto;padding:0 24px}
.em-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.82rem;margin-bottom:22px}
.em-crumbs a{color:rgba(255,255,255,.72)}
.em-crumbs a:hover{color:#fff}
.em-crumbs span[aria-hidden]{color:rgba(255,255,255,.35)}
.em-crumbs [aria-current]{color:rgba(255,255,255,.5)}
.em-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-accent);margin-bottom:14px}
.em-kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--c-accent)}
.em-top h1{color:#fff;font-size:clamp(1.8rem,4vw,2.75rem);line-height:1.15;max-width:22ch;letter-spacing:-.02em}
.em-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:.85rem;color:rgba(255,255,255,.7)}
.em-meta b{color:#fff;font-weight:600}

/* ── Arket ── */
.em-sheet{position:relative;max-width:880px;margin:-84px auto 0;padding:0 16px}
.em-paper{background:var(--em-card);border:1px solid var(--em-line);border-radius:var(--em-r);box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 60px -28px rgba(15,23,42,.28);padding:clamp(24px,5vw,56px)}
@media (prefers-reduced-motion:no-preference){.em-paper{animation:em-rise .5s ease-out both}}
@keyframes em-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Typografi i artikkelen ── */
.em-body{font-size:1.06rem;line-height:1.75;color:var(--em-ink)}
.em-body>*+*{margin-top:1.05em}
.em-body h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin-top:2.1em;letter-spacing:-.01em}
.em-body h3{font-size:1.15rem;margin-top:1.6em}
.em-body ul,.em-body ol{padding-left:1.3em}
.em-body ul{list-style:none;padding-left:0}
.em-body ul>li{position:relative;padding-left:1.5em}
.em-body ul>li+li,.em-body ol>li+li{margin-top:.45em}
.em-body ul>li::before{content:"";position:absolute;left:.2em;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--c-accent);transform:rotate(45deg)}
.em-body ol{list-style:decimal}
.em-body a{color:var(--c-accent-hover,var(--c-accent));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.em-body a:hover{text-decoration-thickness:2px}
.em-body code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.88em;background:var(--em-tint);padding:.12em .4em;border-radius:5px}
.em-body blockquote{margin:1.4em 0;padding:16px 22px;background:#F8FAFC;border-radius:10px;color:var(--em-soft)}
.em-lead{font-size:1.18rem;line-height:1.7;color:var(--em-ink)}

/* ── Svaret først ── */
.em-svar{position:relative;margin:1.6em 0;padding:26px 26px 22px;border-radius:12px;background:linear-gradient(180deg,var(--em-tint),rgba(255,255,255,0) 140%);box-shadow:inset 0 0 0 1px var(--em-line)}
.em-svar::before{content:attr(data-label);position:absolute;top:-12px;left:20px;display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--c-primary)}
.em-svar p{margin:0;font-size:1.04rem}

/* ── Tabeller ── */
.em-tabell{margin:1.4em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;box-shadow:inset 0 0 0 1px var(--em-line)}
.em-tabell table{border:0;border-radius:0;min-width:520px;font-size:.93rem;line-height:1.5}
.em-tabell th{background:#F1F5F9;color:var(--em-ink);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:12px 16px;border-bottom:1px solid var(--em-line)}
.em-tabell td{padding:11px 16px;vertical-align:top}
.em-tabell tr:nth-child(even){background:#FAFBFC}
.em-tabell td:first-child{font-weight:600}

/* ── Formel som formellinje ── */
.em-formel{display:flex;align-items:stretch;margin:1.2em 0;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--em-line);background:#fff}
.em-formel::before{content:"fx";display:flex;align-items:center;padding:0 14px;font-style:italic;font-weight:700;font-size:.9rem;color:var(--em-soft);background:#F1F5F9;border-right:1px solid var(--em-line)}
.em-formel code{flex:1;display:block;background:none;padding:12px 16px;font-size:.92rem;overflow-x:auto;white-space:nowrap;border-radius:0}

/* ── Merknad ── */
.em-ruta{margin:1.4em 0;padding:18px 22px;border-radius:12px;background:#F8FAFC;box-shadow:inset 0 0 0 1px var(--em-line)}
.em-ruta p{margin:0}.em-ruta p+p{margin-top:.6em}

/* ── Steg ── */
.em-steg{list-style:none!important;padding-left:0!important;counter-reset:em}
.em-steg>li{position:relative;padding:2px 0 2px 46px;counter-increment:em}
.em-steg>li+li{margin-top:.9em}
.em-steg>li::before{content:counter(em);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--c-accent-hover,var(--c-accent));background:var(--em-tint)}

/* ── To kolonner ── */
.em-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.4em 0}
.em-duo>div{padding:20px 22px;border-radius:12px;background:#F8FAFC;box-shadow:inset 0 0 0 1px var(--em-line)}
.em-duo h3{margin-top:0;font-size:1.02rem}
.em-duo p{margin-top:.5em;font-size:.97rem}
@media(max-width:640px){.em-duo{grid-template-columns:1fr}}

/* ── Produktkort ── */
.em-kort{position:relative;margin:2.2em 0;padding:28px;border-radius:16px;color:#fff;background:var(--c-primary);overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1fr auto;gap:20px 28px;align-items:end}
.em-kort::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(520px 220px at 100% 0%,var(--c-accent-glow,rgba(255,255,255,.14)),transparent 70%)}
.em-kort__lbl{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-accent)}
.em-kort__navn{display:block;color:#fff;font-size:1.3rem;font-weight:700;margin:6px 0 12px}
.em-kort ul{list-style:none;padding:0;margin:0}
.em-kort li{position:relative;padding-left:24px;font-size:.95rem;color:rgba(255,255,255,.86)}
.em-kort li+li{margin-top:6px}
.em-kort li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border-left:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);transform:rotate(-45deg)}
.em-kort__cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.em-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;font-weight:600;font-size:.98rem;text-decoration:none!important;color:#fff!important;background:var(--c-accent);transition:background .2s,transform .2s}
.em-btn:hover{background:var(--c-accent-hover,var(--c-accent));transform:translateY(-1px)}
.em-btn::after{content:"→"}
.em-kort__mer{font-size:.85rem;color:rgba(255,255,255,.75)!important;text-decoration:underline!important;text-underline-offset:3px}
@media(max-width:640px){.em-kort{grid-template-columns:1fr}}

/* ── FAQ ── */
.em-body details{border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--em-line);padding:0 20px}
.em-body details+details{margin-top:10px}
.em-body summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;font-weight:600;position:relative}
.em-body summary::-webkit-details-marker{display:none}
.em-body summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.3rem;color:var(--c-accent)}
.em-body details[open] summary::after{content:"–"}
.em-body details>p{padding:0 0 16px;margin:0;color:var(--em-soft)}

/* ── Kilder ── */
.em-kilder{margin-top:2.6em;padding-top:22px;border-top:1px solid var(--em-line)}
.em-kilder h2{font-size:.8rem!important;letter-spacing:.09em;text-transform:uppercase;color:var(--em-soft);margin:0 0 12px!important}
.em-kilder ol{list-style:none!important;padding:0!important;margin:0;display:grid;gap:8px}
.em-kilder li{padding:0!important;font-size:.9rem;line-height:1.45}
.em-kilder li::before{display:none}
.em-kilder b{display:inline-block;min-width:0;margin-right:8px;padding:2px 8px;border-radius:6px;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--c-primary);background:#F1F5F9}
.em-kilder a{color:var(--em-ink)!important}

/* ── Sluttblokk ── */
.em-slutt{margin-top:2.4em;padding:32px;border-radius:16px;text-align:center;background:linear-gradient(180deg,#F8FAFC,#fff);box-shadow:inset 0 0 0 1px var(--em-line)}
.em-slutt h2{margin:0 0 8px!important;font-size:1.4rem!important}
.em-slutt p{color:var(--em-soft);max-width:52ch;margin:0 auto 18px!important}
.em-sign{margin-top:28px;font-size:.85rem;color:var(--em-soft)}

/* ── Hub ── */
.em-hub-intro{font-size:1.1rem;color:rgba(255,255,255,.8);max-width:60ch;margin-top:16px;line-height:1.65}
.em-klynger{max-width:1080px;margin:-84px auto 0;padding:0 16px;display:grid;gap:22px}
.em-klynge{background:#fff;border:1px solid var(--em-line);border-radius:var(--em-r);padding:clamp(22px,4vw,36px);box-shadow:0 18px 50px -32px rgba(15,23,42,.3)}
.em-klynge h2{font-size:1.35rem}
.em-klynge>p{color:var(--em-soft);margin-top:6px;max-width:70ch}
.em-klynge__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:20px}
.em-tile{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:12px;background:#F8FAFC;box-shadow:inset 0 0 0 1px var(--em-line);color:var(--em-ink);transition:box-shadow .2s,transform .2s}
.em-tile:hover{box-shadow:inset 0 0 0 1px var(--c-accent),0 10px 24px -16px rgba(15,23,42,.4);transform:translateY(-2px);color:var(--em-ink)}
.em-tile b{font-size:1rem;line-height:1.35}
.em-tile span{font-size:.88rem;color:var(--em-soft);line-height:1.5}
.em-tile--mal{background:var(--c-primary);box-shadow:none;color:#fff}
.em-tile--mal b{color:#fff}.em-tile--mal span{color:rgba(255,255,255,.72)}
.em-tile--mal:hover{color:#fff}
.em-tile i{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent)}
.em-gap{height:80px}

/* ── Nye seksjoner på produktsidene ── */
.em-plus h2{margin-bottom:14px}
.em-plus p{color:var(--c-text-light);line-height:1.8}
.em-plus p+p,.em-plus p+.em-tabell,.em-plus .em-tabell+p{margin-top:14px}
.em-plus .em-steg{margin-top:18px}
.em-plus .em-steg li{color:var(--c-text-light);line-height:1.7}
.em-plus .em-steg li strong{color:var(--c-text)}
.em-plus .em-ruta p,.em-plus .em-duo p{color:var(--c-text-light)}
.em-plus a{text-decoration:underline;text-underline-offset:3px}
.em-plus ul{margin-top:12px;display:grid;gap:6px}
.em-plus ul li{position:relative;padding-left:20px;color:var(--c-text-light);line-height:1.7}
.em-plus ul li::before{content:"";position:absolute;left:3px;top:.7em;width:6px;height:6px;border-radius:2px;background:var(--c-accent);transform:rotate(45deg)}
.em-fig{margin:20px 0}.em-fig img{border-radius:10px;box-shadow:0 0 0 1px var(--c-border)}
.em-fig figcaption{font-size:.85rem;color:var(--c-text-light);margin-top:8px}
.em-guidelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:22px}

@media(max-width:640px){.em-top{padding:32px 0 104px}.em-body{font-size:1rem}.em-kort,.em-slutt{padding:22px}}