/* StudyOS nettside. Palett: midnatt, kritt, ultramarin, markeringsgul, korall, mint. */
@font-face { font-family: "Display"; src: url(fonts/display.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Body"; src: url(fonts/body.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; }
:root {
  --night: #0e1330; --chalk: #f4f6fb; --paper: #ffffff; --blue: #3d4cff; --blue-d: #2a36d6;
  --yellow: #ffe14d; --coral: #ff5d73; --mint: #1fc99a; --ink: #151a3a; --mute: #5c6385; --line: #dfe3f1;
  --r: 18px; --w: 1120px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font: 17px/1.6 "Body", system-ui, sans-serif; color: var(--ink); background: var(--chalk); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: "Display", "Body", sans-serif; letter-spacing: -0.03em; line-height: 1.05; font-weight: 800; }
h1 { font-size: clamp(36px, 4.6vw, 58px); }
h2 { font-size: clamp(32px, 4.6vw, 54px); }
h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
p { max-width: 62ch; }
a { color: var(--blue); text-underline-offset: 3px; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--w), calc(100% - 40px)); margin: 0 auto; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; background: #fff; padding: 8px 12px; z-index: 99; }

/* topp */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--chalk) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; font: 800 21px "Display"; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.logo i { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #3d7bff, #7a4dff); display: grid; place-items: center; }
.logo svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.top nav { display: flex; gap: 24px; margin-left: auto; }
.top nav a { color: var(--ink); text-decoration: none; font-weight: 550; font-size: 15.5px; }
.top nav a:hover { color: var(--blue); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 650; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; box-shadow: 0 8px 22px rgba(61,76,255,.28); }
.btn:hover { background: var(--blue-d); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.sm { height: 40px; padding: 0 18px; font-size: 15px; box-shadow: none; }
@media (max-width: 760px) { .top nav a:not(.btn) { display: none; } .top nav { gap: 0; } }

/* hero */
.hero { padding: 64px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hero h1 { max-width: 14ch; overflow-wrap: break-word; }
.hero .lead { font-size: clamp(18px, 2vw, 22px); color: var(--mute); margin-top: 22px; max-width: 46ch; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero small { display: block; margin-top: 14px; color: var(--mute); font-size: 14.5px; }
@media (min-width: 980px) { .hero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }

/* skrivebordet i hero: ekte, flyttbare kort */
.desk { position: relative; height: 500px; border-radius: 28px; background: var(--night); overflow: hidden; touch-action: none; box-shadow: 0 30px 70px rgba(14,19,48,.35); }
.desk::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.4px); background-size: 22px 22px; }
.desk .hint { position: absolute; left: 18px; bottom: 14px; color: #9aa3d6; font-size: 13.5px; pointer-events: none; }
.card { position: absolute; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.28); cursor: grab; user-select: none; }
.card.drag { cursor: grabbing; box-shadow: 0 22px 50px rgba(0,0,0,.4); z-index: 9; }
.card h4 { font: 650 12.5px "Body"; color: var(--mute); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.card h4 i { width: 18px; height: 18px; border-radius: 6px; display: inline-block; }
.card .big { font: 800 34px "Display"; letter-spacing: -0.04em; line-height: 1; }
.card input { font: inherit; }
.stick { background: var(--yellow); border-radius: 6px 6px 16px 6px; transform: rotate(-3deg); padding: 12px 14px; font: 500 15px/1.35 "Body"; }
.stick [contenteditable] { outline: 0; cursor: text; user-select: text; min-height: 3.9em; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; padding: 3px 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.tmr { display: flex; align-items: center; gap: 12px; }
.tmr button, .pillb { height: 32px; padding: 0 14px; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 650; font-size: 14px; }
.tmr button.alt { background: var(--chalk); color: var(--ink); }
.emj { display: flex; gap: 2px; }
.emj button { width: 28px; height: 28px; border-radius: 50%; font-size: 17px; transition: transform .15s, background .15s; }
.emj button:hover { transform: scale(1.18); }
.emj button.on { background: color-mix(in srgb, var(--blue) 16%, #fff); box-shadow: inset 0 0 0 2px var(--blue); }
.wordi { width: 100%; height: 32px; border: 0; border-radius: 16px; background: var(--chalk); padding: 0 14px; font-size: 13.5px; outline: 0; }
.wordi:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.clc input { width: 100%; height: 34px; border: 0; border-radius: 10px; background: var(--chalk); padding: 0 12px; font-weight: 600; outline: 0; }
.clc output { display: block; font: 800 26px "Display"; margin-top: 6px; letter-spacing: -0.03em; }

/* seksjoner */
section { padding: 96px 0; }
.sec-head { margin-bottom: 48px; }
.sec-head p { color: var(--mute); margin-top: 14px; font-size: 19px; }
.feat { display: grid; gap: 36px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.feat:first-of-type { border-top: 0; }
@media (min-width: 900px) { .feat { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } .feat.rev > :first-child { order: 2; } }
.feat h3 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.03em; line-height: 1.08; }
.feat p { color: var(--mute); margin-top: 14px; }
.feat ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.feat li { padding-left: 26px; position: relative; }
.feat li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 8px; border-left: 3px solid var(--mint); border-bottom: 3px solid var(--mint); transform: rotate(-45deg) translateY(-50%); }
.demo { background: var(--paper); border-radius: 26px; padding: 26px; box-shadow: 0 1px 0 var(--line), 0 24px 60px rgba(30,40,110,.12); min-height: 300px; }
.demo .tag { display: inline-block; font-size: 13px; color: var(--mute); margin-bottom: 14px; }

/* kalender-demo */
.mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 14px; }
.mcal b { color: var(--mute); font-weight: 600; font-size: 12.5px; padding: 4px 0; }
.mcal button { height: 44px; border-radius: 12px; position: relative; font-weight: 600; transition: background .15s; }
.mcal button:hover { background: var(--chalk); }
.mcal button.sel { background: var(--blue); color: #fff; }
.mcal button i { position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; transform: translateX(-50%); }
.mcal button.sel i { background: #fff !important; }
.dayl { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); min-height: 88px; }
.dayl .ev { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 15px; }
.dayl .ev > span:last-child { color: var(--mute); margin-left: auto; font-size: 13.5px; }
.dayl .stu { color: var(--mint); font-weight: 650; font-size: 14px; }

/* fokus-demo */
.fring { position: relative; width: 210px; height: 210px; margin: 6px auto 16px; }
.fring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fring circle { fill: none; stroke-width: 10; }
.fring .bg { stroke: var(--chalk); } .fring .fg { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.fring output { position: absolute; inset: 0; display: grid; place-items: center; font: 800 46px "Display"; letter-spacing: -0.04em; }
.seg { display: inline-flex; background: var(--chalk); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--mute); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.center { text-align: center; }

/* notat-demo */
.nt { width: 100%; min-height: 190px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--yellow) 22%, #fff); padding: 16px; font: 17px/1.5 "Body"; resize: vertical; outline: 0; }
.nt:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.nfoot { display: flex; justify-content: space-between; color: var(--mute); font-size: 14px; margin-top: 10px; }

/* økonomi-demo */
.eco label { display: grid; grid-template-columns: 110px 1fr 90px; gap: 12px; align-items: center; font-size: 15px; margin-bottom: 12px; }
.eco output { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
input[type=range] { accent-color: var(--blue); width: 100%; }
.leftbox { margin-top: 16px; background: var(--night); color: #fff; border-radius: 18px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; }
.leftbox .big { font: 800 40px "Display"; letter-spacing: -0.04em; line-height: 1; }
.leftbox small { color: #aab2e6; display: block; margin-bottom: 4px; }

/* dashboard-demo */
.dgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: stretch; }
.dgrid .card { position: relative; cursor: default; box-shadow: 0 0 0 1px var(--line); transition: grid-column .35s; min-height: 118px; overflow: hidden; }
.dgrid .card.wide { grid-column: span 2; }
.dgrid .card.an::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--c) 34%, transparent), transparent 46%), radial-gradient(circle at 80% 75%, color-mix(in srgb, var(--c) 26%, transparent), transparent 50%); background-size: 170% 170%; animation: drift 7s ease-in-out infinite alternate; }
.dgrid .card > * { position: relative; z-index: 1; }
@keyframes drift { to { background-position: 100% 100%; } }
.dctl { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dctl .tog { height: 30px; padding: 0 12px; border-radius: 99px; background: var(--chalk); font-size: 13px; font-weight: 600; }
.dctl .tog.on { background: var(--ink); color: #fff; }

/* skole-demo */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; background: var(--chalk); font-weight: 600; font-size: 15px; }
.chips button.on { background: var(--ink); color: #fff; }
.chips svg { width: 22px; height: 16px; border-radius: 3px; }
.slist { display: grid; gap: 6px; }
.slist div { padding: 11px 14px; border-radius: 12px; background: var(--chalk); font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 10px; }
.slist span { color: var(--mute); font-weight: 500; }

/* priser */
.price { background: var(--night); color: #fff; }
.price h2 { max-width: 16ch; }
.price .sec-head p { color: #b3bbe8; }
.plans { display: grid; gap: 18px; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { border-radius: 24px; padding: 28px; background: #171e4a; display: flex; flex-direction: column; gap: 14px; }
.plan.hot { background: var(--yellow); color: var(--ink); }
.plan .p { font: 800 46px "Display"; letter-spacing: -0.04em; line-height: 1; }
.plan .p small { font: 500 16px "Body"; letter-spacing: 0; opacity: .7; }
.plan ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15.5px; }
.plan li::before { content: "+ "; font-weight: 800; }
.plan .btn { margin-top: auto; }
.plan.hot .btn { background: var(--ink); box-shadow: none; }
.note { margin-top: 28px; color: #b3bbe8; max-width: 70ch; }

/* faq / tekst */
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font: 700 20px "Display"; letter-spacing: -0.02em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-size: 26px; line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--mute); margin-top: 12px; }
.page { padding: 72px 0 96px; }
.page h1 { font-size: clamp(38px, 5.5vw, 64px); margin-bottom: 28px; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 26px; margin: 40px 0 10px; letter-spacing: -0.02em; }
.prose p, .prose li { color: #343a5e; margin-bottom: 12px; }
.prose ul { padding-left: 22px; }
.todo { background: var(--yellow); padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.form { display: grid; gap: 14px; max-width: 520px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.form input, .form textarea { font: inherit; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.form input:focus, .form textarea:focus { border-color: var(--blue); outline: 0; }

/* venteliste */
.cta-band { background: var(--blue); color: #fff; border-radius: 32px; padding: 56px; display: grid; gap: 24px; }
.cta-band h2 { max-width: 18ch; } .cta-band p { color: #dfe3ff; }
.signup { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input { flex: 1 1 240px; height: 52px; border-radius: 99px; border: 0; padding: 0 22px; font: inherit; }
.signup .btn { background: var(--ink); box-shadow: none; }
.ok { font-weight: 650; min-height: 1.4em; }
@media (max-width: 640px) { .cta-band { padding: 32px 24px; } .eco label { grid-template-columns: 1fr; gap: 4px; } .eco output { text-align: left; } }

footer { background: var(--night); color: #b3bbe8; padding: 56px 0; font-size: 15px; }
footer .wrap { display: grid; gap: 28px; }
@media (min-width: 760px) { footer .wrap { grid-template-columns: 2fr 1fr 1fr; } }
footer a { color: #fff; text-decoration: none; display: block; margin-bottom: 8px; } footer a:hover { text-decoration: underline; }
footer b { color: #fff; display: block; margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
@media (max-width: 640px) { .desk { height: auto; padding: 14px; display: grid; gap: 12px; } .desk .card { position: relative !important; left: auto !important; top: auto !important; width: auto !important; transform: none; cursor: default; } .desk .hint { display: none; } }

/* ===== v2: mer liv, humor, scroll ===== */
.hero { padding: 56px 0 24px; background-image: linear-gradient(to right, rgba(61,76,255,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(61,76,255,.07) 1px, transparent 1px); background-size: 34px 34px; background-position: -1px -1px; }
.hero h1 { font-size: clamp(38px, 5vw, 64px); max-width: 13ch; }
.mut { color: var(--mute); font-size: 12.5px; margin-top: 6px; }
.tg { font-style: normal; font-weight: 650; font-size: 12px; color: var(--blue); margin-left: 6px; }
.desk .card { opacity: 0; }
.desk.play .card { animation: wpop .7s cubic-bezier(.2,1.25,.4,1) both; animation-delay: calc(var(--k) * 110ms + 150ms); }
@keyframes wpop { from { opacity: 0; transform: translateY(26px) scale(.86); } to { opacity: 1; } }
.desk .stick { --r: -3deg; }
.desk.play .stick { animation-name: wpop2; }
@keyframes wpop2 { from { opacity: 0; transform: translateY(26px) scale(.86) rotate(-12deg); } to { opacity: 1; transform: rotate(-3deg); } }
.desk .card.drag { animation: none; opacity: 1; }

/* snu-kort */
.relate { background: var(--paper); }
.flips { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.flip { position: relative; height: 210px; perspective: 1000px; text-align: left; border-radius: 22px; }
.flip .ff, .flip .fb { position: absolute; inset: 0; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; backface-visibility: hidden; transition: transform .6s cubic-bezier(.3,1.2,.5,1); }
.flip .ff { background: var(--chalk); box-shadow: inset 0 0 0 2px var(--line); }
.flip .ff b { font: 700 21px/1.2 "Display"; letter-spacing: -.02em; }
.flip .ff small { color: var(--mute); }
.flip .fb { background: var(--blue); color: #fff; transform: rotateY(180deg); font-size: 16.5px; justify-content: center; gap: 8px; }
.flip .fb b { font: 800 24px/1.1 "Display"; letter-spacing: -.02em; }
.flip.on .ff { transform: rotateY(-180deg); } .flip.on .fb { transform: rotateY(0); }
.flip:nth-child(3n+2) .fb { background: var(--night); } .flip:nth-child(3n+3) .fb { background: #0e8f6d; }
.flip:hover .ff { transform: rotate(-1.2deg); } .flip.on:hover .ff { transform: rotateY(-180deg); }

.band-y { background: var(--yellow); }
.band-y .feat { border: 0; }
.band-y .feat p, .band-y .feat li { color: #3b3a1f; }
.band-y .demo { box-shadow: 0 24px 60px rgba(60,50,0,.2); }
.sl2 { display: grid; grid-template-columns: 130px 1fr 40px; gap: 12px; align-items: center; font-size: 14.5px; margin-bottom: 10px; }
.sl2 output { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 14px 0 12px; }
.pd { min-height: 64px; border-radius: 10px; background: var(--chalk); padding: 5px; font-size: 10.5px; color: var(--mute); display: flex; flex-direction: column; gap: 3px; transition: background .2s; }
.pd.now { box-shadow: inset 0 0 0 2px var(--blue); }
.pd.past { opacity: .75; }
.pd.ex { background: color-mix(in srgb, var(--coral) 18%, #fff); color: var(--ink); font-weight: 700; justify-content: center; text-align: center; }
.pd .ss { display: flex; flex-wrap: wrap; gap: 3px; }
.sb { height: 22px; min-width: 24px; padding: 0 5px; border-radius: 7px; background: var(--blue); color: #fff; font: 700 10.5px "Body"; transition: transform .15s, background .2s, opacity .2s; }
.sb.rep { background: #8a5cff; } .sb:hover { transform: scale(1.1); }
.sb.dn { background: var(--mint); text-decoration: line-through; opacity: .85; }
.pbar { height: 8px; border-radius: 4px; background: var(--chalk); overflow: hidden; } .pbar i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 4px; transition: width .5s cubic-bezier(.2,1,.4,1); }
.pst { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-weight: 650; font-size: 14.5px; min-height: 38px; }
.pst .pillb { height: 34px; }
.pst .warn { color: #c2410c; }

/* dag-popup i kalender-demoen */
.demo { position: relative; }
.dpop2 { position: absolute; z-index: 5; width: 250px; background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 18px 50px rgba(20,25,70,.28), 0 0 0 1px var(--line); animation: pp .26s cubic-bezier(.2,1.2,.4,1); transform-origin: top left; }
@keyframes pp { from { opacity: 0; transform: scale(.82); } }
.dpop2 h5 { font: 800 18px "Display"; letter-spacing: -.02em; margin-bottom: 8px; display: flex; justify-content: space-between; }
.dpop2 h5 button { font-size: 20px; line-height: 1; color: var(--mute); }
.dpop2 .dp { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: var(--chalk); margin-bottom: 4px; font-size: 14px; border-left: 4px solid var(--c); }
.dpop2 .dp.dn span { text-decoration: line-through; opacity: .5; }
.ck2 { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b9bfd8; flex: none; display: grid; place-items: center; transition: .18s; }
.ck2 svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .25s .05s; }
.dp.dn .ck2 { background: var(--mint); border-color: var(--mint); } .dp.dn .ck2 svg { stroke-dashoffset: 0; }
.dpop2 .pb2 { height: 5px; border-radius: 3px; background: var(--chalk); overflow: hidden; margin-bottom: 8px; } .dpop2 .pb2 i { display: block; height: 100%; background: var(--mint); transition: width .35s; }

/* fokus + rekke */
.two { display: grid; gap: 28px; } @media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; align-items: center; } }
.btnrow { display: flex; gap: 10px; justify-content: center; } .btnrow .pillb { height: 40px; padding: 0 22px; } .pillb.alt { background: var(--chalk); color: var(--ink); }
.fd { margin: 12px auto 0; color: #0e8f6d; font-weight: 650; min-height: 1.5em; font-size: 14.5px; }
.streak { text-align: center; } .sn { font: 800 52px "Display"; letter-spacing: -.04em; line-height: 1; } .ss { color: var(--mute); margin-bottom: 14px; }
.heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 4px; justify-content: center; }
.heat button { width: 22px; height: 22px; border-radius: 6px; background: var(--chalk); transition: transform .12s, background .2s; }
.heat button:hover { transform: scale(1.2); } .heat .l1 { background: #ffd2b0; } .heat .l2 { background: #ff9b4d; } .heat .l3 { background: #ff6a00; } .heat .t { box-shadow: 0 0 0 2px var(--ink); } .heat .f { opacity: .3; pointer-events: none; }
.need .nres { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: 16px; }
.nres div { background: var(--chalk); border-radius: 14px; padding: 12px; text-align: center; transition: .2s; } .nres b { display: block; font: 800 24px "Display"; letter-spacing: -.03em; } .nres small { color: var(--mute); }
.nres .no b { color: #b91c1c; font-size: 16px; line-height: 1.7; } .nres .ok2 b { color: #0e8f6d; font-size: 16px; line-height: 1.7; }

/* kalkulator */
.calcd { background: #1c1c1e; padding: 18px; max-width: 360px; justify-self: center; width: 100%; }
.kdis { background: #2c2c2e; border-radius: 16px; padding: 12px 16px; text-align: right; height: 84px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
.kce { color: #8e8e93; font-size: 14px; min-height: 18px; overflow: hidden; white-space: nowrap; } .kcr { font: 800 38px "Display"; letter-spacing: -.03em; line-height: 1.1; overflow: hidden; white-space: nowrap; }
.kpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.kk { height: 52px; border-radius: 14px; background: #3a3a3c; color: #fff; font: 650 20px "Body"; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.45); transition: transform .08s, filter .15s; }
.kk:hover { filter: brightness(1.2); } .kk:active { transform: translateY(2px) scale(.96); box-shadow: none; }
.kk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kk.o { background: #4b3a73; color: #cfb4ff; } .kk.c { background: #5a2a2c; color: #ff8a84; } .kk.eq { background: #7a4dff; } .kk.z { grid-column: span 2; }

/* dashbord-demoen */
.dsec { background: var(--night); color: #fff; }
.dsec .sec-head p { color: #b3bbe8; }
.dwrap { background: #1c1c1e; border-radius: 28px; padding: 22px; background-image: radial-gradient(rgba(255,255,255,.1) 1.2px, transparent 1.4px); background-size: 22px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.dbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .dbar .pillb { background: #2c2c2e; color: #fff; height: 38px; padding: 0 18px; } .dbar .pillb.on { background: var(--blue); }
.dstage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dc { position: relative; background: #2c2c2e; border-radius: 20px; padding: 16px; min-height: 140px; overflow: hidden; color: #f5f5f7; grid-column: span 1; transition: grid-column .3s; opacity: 0; }
.dc.wide { grid-column: span 2; }
.dwrap.play .dc { animation: wpop .75s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--k) * 95ms + 120ms); }
.dc.an::before { content: ""; position: absolute; inset: -20%; z-index: 0; background: radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--c) 45%, transparent), transparent 45%), radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--c) 32%, transparent), transparent 48%); animation: drift 6s ease-in-out infinite alternate; }
.dc > * { position: relative; z-index: 1; }
.dc h4 { font: 650 13px "Body"; color: #aeaeb4; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .dc h4 i { width: 20px; height: 20px; border-radius: 7px; background: var(--c); }
.dc .big { font: 800 30px "Display"; letter-spacing: -.03em; line-height: 1.05; } .dc .sub { color: #aeaeb4; font-size: 13px; margin-top: 4px; }
.dc .nr { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 2px 0; } .dc .nr i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dc .nr em { font-style: normal; color: #aeaeb4; font-size: 12px; } .dc .nr.f em { color: #4da3ff; }
.dc .wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 11px; color: #aeaeb4; } .dc .wk b { display: block; font-size: 16px; color: #fff; padding: 4px 0; border-radius: 9px; } .dc .wk b.td { background: #bf5af2; }
.dc .pbd { height: 6px; background: #3a3a3c; border-radius: 3px; margin: 8px 0; overflow: hidden; } .dc .pbd i { display: block; height: 100%; background: #5e5ce6; width: 38%; }
.dctl { display: none; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .dwrap.editing .dctl { display: flex; }
.dctl button { height: 26px; padding: 0 10px; border-radius: 99px; background: #3a3a3c; color: #ddd; font-size: 12px; font-weight: 650; } .dctl button.on { background: var(--blue); color: #fff; }
@media (max-width: 900px) { .dstage { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dstage { grid-template-columns: 1fr; } .dc.wide { grid-column: span 1; } .dwrap { padding: 14px; } }

/* scroll-inn for demoer */
.demo[data-play] { transition: opacity .7s, transform .7s cubic-bezier(.2,1,.4,1); }
.js .demo[data-play]:not(.in) { opacity: 0; transform: translateY(40px) scale(.96); }
.js .demo[data-play].in .mcal button { animation: cellin .5s cubic-bezier(.2,1,.4,1) both; animation-delay: calc(var(--i) * 14ms); }
@keyframes cellin { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.js .demo.in .pd { animation: cellin .5s cubic-bezier(.2,1,.4,1) both; animation-delay: calc(var(--i) * 25ms); }
.js .demo.in .heat button { animation: cellin .5s both; animation-delay: calc(var(--i) * 12ms); }
.js .demo.in .kk { animation: cellin .45s both; animation-delay: calc(var(--i) * 28ms); }
.js .demo.in .leftbox { animation: cellin .6s .25s both; }
.sec-head h2, .feat h2 { font-size: clamp(30px, 4vw, 48px); }
.feat h2 { letter-spacing: -.035em; line-height: 1.04; max-width: 15ch; }
@keyframes drift { to { transform: translate(8%, 6%); } }
@media (prefers-reduced-motion: reduce) { .js .demo[data-play]:not(.in) { opacity: 1; transform: none; } .desk .card, .dc { opacity: 1 !important; } }
.dc .big .sub { font: 500 13px "Body"; letter-spacing: 0; display: inline; margin: 0 0 0 4px; }

/* ---- v3.2 ---- */
/* ro: ferdig animert = ingen animasjon som kan starte på nytt (drag, klikk, repaint) */
.desk.done .card { animation: none !important; opacity: 1; }
.desk .card { will-change: left, top; }
.card.drag { transition: box-shadow .2s; }
.js .demo.settled *, .js .demo.settled { animation: none !important; }
.dwrap.settled .dc { animation: none !important; opacity: 1; }
/* ikoner med glyf */
.card h4 i, .dc h4 i { display: inline-flex; align-items: center; justify-content: center; }
.card h4 i svg, .dc h4 i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* språkvelger */
.lang { display: inline-flex; gap: 1px; padding: 2px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.lang button { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px; color: var(--mute); letter-spacing: .02em; }
.lang button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.top nav { align-items: center; }
/* manifest */
.mani { padding: 88px 0 72px; }
.mani-h { display: grid; gap: 22px; margin-bottom: 52px; }
.mani-h h2 { max-width: 20ch; font-size: clamp(32px, 4.8vw, 60px); }
.mani-h p { font-size: clamp(18px, 1.8vw, 21px); color: var(--mute); max-width: 60ch; }
.mani-g { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 2px solid var(--ink); }
.mani-g > div { padding: 22px 22px 8px 0; }
.mani-g h3 { font-size: 20px; margin-bottom: 8px; }
.mani-g p { color: var(--mute); font-size: 16px; }
@media (min-width: 900px) { .mani-g > div + div { padding-left: 22px; border-left: 1px solid var(--line); } }
/* wrapped-demo */
.wrd .seg { margin-bottom: 14px; }
.wcard { --a: #0a84ff; --b: #30d158; margin-top: 8px; border-radius: 24px; color: #fff; padding: 26px; background: linear-gradient(135deg, var(--a), var(--b)); transition: --a .4s; position: relative; overflow: hidden; }
.wcard::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.4px); background-size: 20px 20px; pointer-events: none; }
.wc-e { font-size: 54px; line-height: 1; } .wc-n { font: 800 36px "Display"; letter-spacing: -.03em; margin-top: 8px; } .wc-t { opacity: .92; margin-top: 4px; font-size: 15.5px; }
.wc-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; position: relative; z-index: 1; }
.wc-g > div { background: rgba(255,255,255,.18); border-radius: 16px; padding: 12px 14px; }
.wc-g b { display: block; font: 800 26px "Display"; letter-spacing: -.02em; } .wc-g span { font-size: 13px; opacity: .9; }
.rr { display: block; color: #dfe3ff; font-size: 14px; }
.wrw2 { display: flex; align-items: center; gap: 10px; font-size: 22px; } .wrw2 b { font: 800 22px "Display"; letter-spacing: -.02em; }
.top .btn.sm { white-space: nowrap; }
@media (max-width: 760px) { .top .wrap { gap: 10px; } .top nav { margin-left: auto; gap: 8px; } .top .btn.sm { padding: 0 14px; } .logo { font-size: 19px; } }

/* v3.2b hero: hvit bunn med fallende, utvasket fagtekst */
.hero { position: relative; overflow: hidden; background-image: none; background: #fff; }
.hero > .wrap { position: relative; z-index: 1; }
.rain { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-between; padding: 0 1%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%); }
.rain div { display: flex; flex-direction: column; gap: 22px; font: 650 15px "Body"; color: rgba(150,165,255,.3); white-space: nowrap; animation: rain var(--d) linear infinite; animation-delay: var(--o); will-change: transform; }
.rain span:nth-child(3n) { color: rgba(61,76,255,.09); }
.rain span:nth-child(4n+1) { color: rgba(255,93,115,.14); }
@keyframes rain { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 28% 50%, #fff 0, rgba(255,255,255,.85) 28%, rgba(255,255,255,0) 62%); }
.pb3 { height: 7px; background: #e9ebf5; border-radius: 4px; margin: 10px 0 8px; overflow: hidden; } .pb3 i { display: block; height: 100%; width: 38%; background: #5e5ce6; border-radius: 4px; }
@media (max-width: 640px) { .rain div:nth-child(n+6) { display: none; } }

/* v3.3b hero: midnattsblå med prikker (som dashbordet), små tegn som faller, ingen boks rundt kortene */
.hero { background: var(--night); background-image: radial-gradient(rgba(255,255,255,.13) 1.2px, transparent 1.4px); background-size: 22px 22px; color: #fff; }
.hero h1 { color: #fff; }
.hero .lead { color: #b8c0ee; }
.hero small { color: #8f99cf; }
.hero .btn.ghost { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.hero::after { background: radial-gradient(ellipse at 26% 50%, rgba(14,19,48,.92) 0, rgba(14,19,48,.7) 30%, rgba(14,19,48,0) 62%); }
.rain div { font: 500 12px "Body"; gap: 16px; color: rgba(150,165,255,.30); letter-spacing: .02em; }
.rain span:nth-child(3n) { color: rgba(150,165,255,.14); }
.rain span:nth-child(4n+1) { color: rgba(255,225,77,.26); }
.desk { background: none; box-shadow: none; overflow: visible; border-radius: 0; }
.desk::before { display: none; }
.desk .hint { color: #8f99cf; }
.dsec { border-top: 1px solid rgba(255,255,255,.08); }

/* v3.3c hero: sentrert tekst, ingen kort, rolig regn av fagnavn */
.hero { padding: 120px 0 110px; text-align: center; min-height: 560px; display: grid; align-items: center; }
.hero .wrap { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; }
.hero h1 { max-width: 16ch; font-size: clamp(42px, 6.4vw, 84px); margin: 0 auto; }
.hero .lead { margin: 26px auto 0; max-width: 54ch; }
.hero .cta { justify-content: center; }
.hero::after { background: radial-gradient(ellipse at 50% 50%, rgba(14,19,48,.88) 0, rgba(14,19,48,.55) 38%, rgba(14,19,48,0) 70%); }
.rain { display: block; -webkit-mask-image: none; mask-image: none; }
.rain span { position: absolute; top: 0; font: 500 13px "Body"; letter-spacing: .03em; color: rgba(150,165,255,var(--a)); white-space: nowrap; opacity: 0; animation: drop var(--d) linear infinite; animation-delay: var(--o); will-change: transform, opacity; }
.rain span:nth-child(4n+1) { color: rgba(255,225,77,var(--a)); }
@keyframes drop { 0% { transform: translateY(-30px); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(var(--h, 640px)); opacity: 0; } }
@media (max-width: 640px) { .hero { padding: 80px 0 70px; min-height: 0; } }

/* v3.3d hero: hvit med mørke prikker, passer i skjermhøyden */
.hero { background: #fff; background-image: radial-gradient(rgba(21,26,58,.22) 1.1px, transparent 1.3px); background-size: 22px 22px; color: var(--ink); padding: 48px 0 56px; min-height: calc(100svh - 67px); max-height: 900px; }
.hero h1 { color: var(--ink); font-size: clamp(38px, min(6.2vw, 9.5vh), 84px); }
.hero .lead { color: var(--mute); margin-top: clamp(14px, 3vh, 26px); font-size: clamp(17px, min(1.9vw, 2.6vh), 21px); }
.hero .cta { margin-top: clamp(18px, 3.4vh, 30px); }
.hero small { color: var(--mute); }
.hero .btn.ghost { color: var(--ink); border-color: var(--ink); }
.hero::after { background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.95) 0, rgba(255,255,255,.75) 36%, rgba(255,255,255,0) 68%); }
.rain span { color: rgba(21,26,58,var(--a)); }
.rain span:nth-child(4n+1) { color: rgba(61,76,255,var(--a)); }
.dsec { border-top: 0; }
@media (max-width: 640px) { .hero { min-height: 0; max-height: none; padding: 56px 0 52px; } }
/* v3.3e */
.rain span { color: rgba(21,26,58,calc(var(--a) + .22)); font-weight: 600; }
.rain span:nth-child(4n+1) { color: rgba(61,76,255,calc(var(--a) + .2)); }
.hero::after { background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.92) 0, rgba(255,255,255,.6) 34%, rgba(255,255,255,0) 64%); }
.pbl { display: grid; gap: 6px; }
.pbl .bl { filter: blur(9px); user-select: none; opacity: .8; }
.pbl .bt { font: 800 15px "Body"; letter-spacing: .01em; color: var(--ink); background: var(--yellow); justify-self: start; padding: 4px 10px; border-radius: 8px; margin-top: -42px; position: relative; }
.pbl .bt { background: var(--ink); color: #fff; }
.pbl .bl { filter: blur(7px); opacity: 1; } .pbl .bt { margin-top: 0; }

/* ===== v4.0 hjem-skjermen fra appen ===== */
.dsec { padding-bottom: 40px; }
.appfit { position: relative; width: 100%; overflow: hidden; margin: 8px 0 0; }
.app { --acc: #bf5af2; position: absolute; left: 0; top: 0; width: 1300px; height: 640px; transform-origin: 0 0; border-radius: 26px; overflow: hidden; color: #f5f5f7; font-family: "Body", system-ui, sans-serif; background: #1c1c1e radial-gradient(circle, rgba(255,255,255,.13) 1.3px, transparent 1.7px) 0 0 / 24px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.apph { color: #9aa3d6; font-size: 14px; margin-top: 16px; text-align: center; max-width: none; }
.atop { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 30px 0; }
.agr { font: 800 30px "Display"; letter-spacing: -.03em; }
.agr b { color: var(--acc); }
.adt { color: #98989d; font-size: 14px; font-weight: 600; margin-top: 4px; }
.abtn { display: flex; gap: 8px; align-items: center; }
.abtn button { height: 36px; padding: 0 16px; border-radius: 99px; font-weight: 650; font-size: 14px; background: #2c2c2e; color: #fff; }
.abtn .ap2 { background: var(--acc); }
.abtn .ap3 { width: 36px; padding: 0; }
.astg { position: absolute; left: 25px; top: 92px; width: 1300px; height: 438px; transform: scale(.962); transform-origin: 0 0; }
.aw { position: absolute; width: 248px; height: 136px; padding: 13px 16px; border-radius: 20px; background: #2c2c2e; box-shadow: 0 0 0 .5px rgba(255,255,255,.06); overflow: hidden; }
.aw.w2 { width: 511px; }
.ah { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: #aeaeb4; margin-bottom: 9px; }
.ah em { margin-left: auto; font-style: normal; font-size: 11.5px; color: #8e8e93; }
.ai { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; flex: none; }
.ai svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.anx { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 18px; }
.anx div, .als div { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.6; min-width: 0; }
.anx i, .als i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.anx b, .als b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.anx span, .als span { color: #8e8e93; font-size: 11.5px; white-space: nowrap; flex: none; }
.anx span.hi { color: var(--acc); font-weight: 650; }
.abig { font: 800 30px "Display"; letter-spacing: -.03em; line-height: 1.1; }
.abig small { font: 500 14px "Body"; color: #aeaeb4; letter-spacing: 0; }
.asub { color: #98989d; font-size: 13px; margin-top: 4px; }
.abdg { position: absolute; right: 16px; top: 36px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.alk { color: var(--acc); font-size: 13px; font-weight: 650; position: absolute; left: 16px; bottom: 13px; }
.amd { font-weight: 700; font-size: 14.5px; line-height: 1.25; max-width: 150px; }
.aemo { position: absolute; right: 16px; top: 38px; font-size: 30px; }
.asl { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; margin: 14px 0 4px; background: linear-gradient(90deg, #30d158, #ffd60a 50%, #ff3b30); outline: 0; }
.asl::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid hsl(calc(120 - var(--v, 50) * 1.2) 75% 46%); cursor: grab; }
.asl::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #ffd60a; }
.asl3 { display: flex; justify-content: space-between; font-size: 11px; color: #8e8e93; }
.asl3 .on { color: #fff; font-weight: 700; }
.awk { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.awk span { display: grid; justify-items: center; gap: 2px; padding: 4px 0 6px; border-radius: 12px; }
.awk em { font-style: normal; font-size: 12px; color: #aeaeb4; }
.awk b { font-size: 19px; }
.awk i { width: 5px; height: 5px; border-radius: 50%; }
.awk .td { background: var(--acc); }
.awk .td em { color: #fff; }
.awk .we em { color: #ff453a; }
.ayr { display: flex; align-items: baseline; gap: 6px; }
.ayr b { font: 800 28px "Display"; }
.ayr small { color: #aeaeb4; font-size: 13.5px; }
.ayr em { margin-left: auto; font-style: normal; color: var(--acc); font-weight: 700; font-size: 13px; }
.apb { height: 8px; border-radius: 4px; background: #3a3a3c; margin: 8px 0 10px; overflow: hidden; }
.apb i { display: block; height: 100%; background: var(--acc); border-radius: 4px; }
.amo { display: flex; gap: 8px; align-items: center; }
.amo input { width: 200px; height: 32px; border-radius: 10px; border: 0; padding: 0 12px; background: #3a3a3c; color: #fff; font: inherit; font-size: 12.5px; outline: 0; }
.amo span { display: flex; gap: 1px; }
.amo button { font-size: 15px; width: 24px; height: 28px; border-radius: 7px; filter: grayscale(.6); opacity: .75; transition: transform .15s; }
.amo button:hover { transform: scale(1.2); }
.amo button.on { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--acc); }
.achip { position: absolute; right: 52px; top: 12px; padding: 2px 9px; border-radius: 99px; background: #ff9500; color: #fff; font-size: 11px; font-weight: 750; }
.aref { position: absolute; right: 16px; top: 9px; width: 26px; height: 26px; border-radius: 50%; color: #aeaeb4; font-size: 16px; }
.aref:hover { color: #fff; background: #3a3a3c; }
.atip { font: 700 18px/1.35 "Body"; letter-spacing: -.01em; }
.atip.in { animation: tipin .45s cubic-bezier(.2,1,.4,1); }
@keyframes tipin { from { opacity: 0; transform: translateY(8px); } }
.ast { position: absolute; width: 178px; height: 118px; padding: 0 12px 10px; border-radius: 4px 4px 14px 4px; background: var(--c); color: #1d1d1f; font: 500 13.5px/1.35 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; box-shadow: 0 10px 24px rgba(0,0,0,.35); cursor: grab; user-select: none; touch-action: none; }
.ast.dg { cursor: grabbing; box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.asth { margin: 0 -12px 8px; padding: 4px; text-align: center; font: 700 9px "Body"; letter-spacing: .14em; color: rgba(0,0,0,.4); background: rgba(0,0,0,.06); }
.adock { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 26px; background: rgba(44,44,46,.85); backdrop-filter: blur(12px); box-shadow: 0 0 0 .5px rgba(255,255,255,.08); }
.adock span { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.adock svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adock .adv { width: 1px; height: 36px; border-radius: 0; background: rgba(255,255,255,.15); }
/* intro */
.app .aw, .app .ast { opacity: 0; }
.app.play .aw, .app.play .ast { animation: wpop .75s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--k) * 85ms + 120ms); }
.app.settled .aw, .app.settled .ast { animation: none; opacity: 1; }
.app.editing .aw { animation: wig .26s ease-in-out infinite alternate !important; opacity: 1; }
.app.editing .aw:nth-child(even) { animation-delay: -.13s !important; }
@keyframes wig { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .app .aw, .app .ast { opacity: 1 !important; } }
/* mobil: vanlig rutenett, ingen skalering */
@media (max-width: 699px) {
  .appfit { overflow: visible; padding: 0 12px; }
  .app { position: relative; width: auto; height: auto; transform: none !important; left: 0 !important; padding-bottom: 16px; }
  .atop { flex-direction: column; gap: 12px; padding: 18px 16px 0; }
  .agr { font-size: 22px; }
  .abtn .ap3 { display: none; }
  .astg { position: relative; left: 0; top: 0; width: auto; height: auto; transform: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
  .aw, .aw.w2, .ast { position: relative !important; left: auto !important; top: auto !important; width: auto; height: auto; min-height: 120px; transform: none !important; }
  .aw.w2 { grid-column: span 2; }
  .ast { min-height: 96px; }
  .ast:nth-of-type(n+2) { display: none; }
  .anx { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .anx div:nth-child(n+4) { display: none; }
  .amo { flex-wrap: wrap; }
  .amo input { width: 100%; }
  .alk { position: static; margin-top: 8px; }
  .adock { position: relative; left: auto; bottom: auto; transform: none; margin: 4px auto 0; width: max-content; gap: 6px; padding: 8px; }
  .adock span { width: 38px; height: 38px; border-radius: 11px; }
  .adock .adv { display: none; }
  .app .aw, .app .ast { opacity: 1; }
}

/* språkblokker: bare det valgte språket vises */
[data-only] { display: none; }
html[lang="nb"] [data-only="nb"], html[lang="en"] [data-only="en"], html[lang="de"] [data-only="de"] { display: block; }
html[lang="nb"] .sgn[data-only="nb"], html[lang="en"] .sgn[data-only="en"], html[lang="de"] .sgn[data-only="de"] { display: grid; }
.prose .upd { color: var(--mute); font-size: 14px; margin: 6px 0 24px; }
.prose h2 { font-size: 21px; margin: 28px 0 8px; }
/* bunnlinje */
.fdev { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #8f99cf; display: block !important; }
.fdev b { color: #fff; font-weight: 700; letter-spacing: .02em; }
.fdev a { color: #8f99cf; }
/* prisliste: hake i stedet for pluss */
.plan li::before { content: ""; display: inline-block; width: 10px; height: 5px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg) translateY(-3px); margin-right: 10px; opacity: .8; }
/* registrering */
.sgp { padding: 56px 0 80px; }
.sgn { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 900px) { .sgn { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; } }
.sgl h1 { font-size: clamp(36px, 5vw, 60px); max-width: 14ch; }
.sgl .lead { color: var(--mute); font-size: 19px; margin-top: 18px; }
.sgl ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.sgl li { position: relative; padding-left: 28px; font-weight: 550; }
.sgl li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 6px; border-left: 3px solid var(--mint); border-bottom: 3px solid var(--mint); transform: rotate(-45deg); }
.sgf { background: var(--paper); border-radius: 26px; padding: 30px; display: grid; gap: 16px; box-shadow: 0 1px 0 var(--line), 0 24px 60px rgba(30,40,110,.12); }
.sgf > label { display: grid; gap: 6px; font-weight: 600; font-size: 14.5px; }
.sgf input[type=text], .sgf input[name=name], .sgf input[type=email], .sgf input[type=password] { height: 46px; border-radius: 12px; border: 1px solid var(--line); padding: 0 14px; font: inherit; background: var(--chalk); color: var(--ink); }
.sgf input:focus { outline: 3px solid color-mix(in srgb, var(--blue) 30%, transparent); border-color: var(--blue); }
.sgf fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.sgf legend { font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.sgf .rd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; font-size: 15px; }
.sgf .rd:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, transparent); }
.sgf .ck { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mute); }
.sgf .ck input { margin-top: 3px; }
.sgf .btn { justify-self: stretch; text-align: center; }
.sga { font-size: 14px; color: var(--mute); text-align: center; }
.sgok { display: none; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--mint) 16%, transparent); color: #0b6b50; font-weight: 600; font-size: 14.5px; }
.sgf.done .sgok { display: block; }
.sgf.done > label, .sgf.done fieldset, .sgf.done .btn { opacity: .5; pointer-events: none; }
.fdev a, .fdev b, footer .fdev a { display: inline !important; margin: 0 !important; }
@media (max-width: 699px) { .abdg, .aemo { display: none; } .amd { max-width: none; } .agr { font-size: 20px; } }
.sgok.err { background: color-mix(in srgb, var(--coral) 14%, transparent); color: #b3243a; }
.sgf.lock .btn { opacity: .5; pointer-events: none; }
.sgf.done:has(.sgok.err) > label, .sgf.done:has(.sgok.err) fieldset, .sgf.done:has(.sgok.err) .btn { opacity: 1; pointer-events: auto; }