/* Ekrano: forsiden, seksjon 7 til 12 (pakke F), etter ekrano.css. Animasjonene styres av forside.js.
   Uten skript og med redusert bevegelse står sluttbildet fra HTML-en stille. */

/* == 7 iCloud sync, huset (A8, A9) == */
.icloud{padding-bottom:clamp(80px,10vw,140px)}
.scene{--hb:min(560px,94vw);position:relative;height:calc(var(--hb)*16/15 + clamp(62px,7vw,90px));margin-top:clamp(34px,5vw,60px);overflow:hidden;background:linear-gradient(#0A0A0C,#0d0b10 38%,#1a1216 74%,#2a1a1a)}
.scene>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(transparent,#000 26%)}
.scene::after{content:'';position:absolute;inset:auto 0 0;height:8px;background:#09080a;z-index:2}
.hus{position:absolute;left:50%;bottom:0;width:var(--hb);aspect-ratio:15/16;transform:translateX(-50%);container-type:inline-size;z-index:1}
.hus>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hus .spor{stroke-dasharray:100 200}
.hus .komet{stroke-dasharray:14 200;stroke-dashoffset:14;opacity:0}
.hus .loft{fill:#FFC98F;transition:fill 1s}
.mork .spor{stroke-dashoffset:100}
.mork .loft{fill:#1c171d}
.puls .komet{animation:komet 1.5s cubic-bezier(.45,.05,.4,1)}
.sporer .spor{animation:spor 1.5s cubic-bezier(.45,.05,.4,1) forwards}
@keyframes komet{0%{stroke-dashoffset:14;opacity:0}10%,88%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes spor{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.mone{position:absolute;left:50%;bottom:calc(95.2% + .9cqw);transform:translateX(-50%);white-space:nowrap;font:max(11.5px,2.3cqw)/1.2 var(--mono);color:var(--on-dusk-muted);background:#0c0a0e;border:1px solid var(--line-dusk);border-radius:100px;padding:.38em .95em;transition:.5s}
.mone.lys{color:var(--cream);border-color:#ffc98f8c;box-shadow:0 0 1.6em #ffa65c80}
/* vinduene */
.v{position:absolute;width:37.33%;height:21.875%}
.v1,.v3{left:9.67%}.v2,.v4{left:53%}.v1,.v2{top:39.375%}.v3,.v4{top:68.75%}
.v::before{content:'';position:absolute;inset:-42% -30% -58%;pointer-events:none;opacity:0;transition:1.4s;background:radial-gradient(closest-side,#ff965a66,#ff965a1f 55%,transparent)}
.v::after{content:'';position:absolute;left:-3.5%;right:-3.5%;top:100%;height:1.5cqw;border-radius:0 0 .5cqw .5cqw;background:#231c26;box-shadow:inset 0 .25cqw 0 #ffd6aa1a;transition:1s}
.tent::before{opacity:1}
.tent::after{box-shadow:inset 0 .25cqw 0 #ffc98f8c,0 .6cqw 1.8cqw #ff965a2e}
.gl{position:absolute;inset:0;border-radius:2.2cqw;overflow:hidden;color:var(--ink);font-size:max(10px,2.75cqw);line-height:1.3;padding:7.8cqw 2.8cqw 2.4cqw;background:#FF9A63 linear-gradient(45deg,var(--coral),var(--amber) 55%,var(--cream));transition:box-shadow 1.2s}
.tent .gl{animation:lampe .7s ease-out;box-shadow:0 0 6cqw #ffa65c73,inset 0 -2.5cqw 5cqw #aa401829}
.gl::before{content:'';position:absolute;inset:0;z-index:1;transition:opacity .2s;background:linear-gradient(118deg,#ffecdc0b 0 36%,transparent 36%) #121015}
.gl::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:.2;transition:opacity .8s;box-shadow:inset 0 0 0 .55cqw #f5f5f7eb;background:linear-gradient(transparent calc(26% - .3cqw),#f5f5f7e6 0 calc(26% + .3cqw),transparent 0)}
.tent .gl::before{opacity:0}
.tent .gl::after{opacity:1}
@keyframes lampe{from{filter:brightness(.3) saturate(.7)}}
.flimmer .gl{animation:flimmer .75s steps(1)}
@keyframes flimmer{0%{filter:brightness(.2)}15%,45%,78%{filter:none}30%{filter:brightness(.35)}62%{filter:brightness(.6)}}
.gl>*{position:relative;z-index:2}
.gl p{display:flex;align-items:center;gap:.5em;white-space:nowrap}
.r1{font-weight:600;font-size:1.08em;letter-spacing:-.01em}
.r2{font:.9em var(--mono);margin-top:1.2cqw}
.r2 b{font-weight:500;margin-left:auto;font-variant-numeric:tabular-nums}
.gl .bar{display:block;height:max(3px,.85cqw);border-radius:9px;background:#15110e33;margin-top:1cqw;overflow:hidden}
.gl .bar i{display:block;height:100%;width:42.34%;border-radius:inherit;background:var(--ink)}
.ok{flex:none;display:inline-block;position:relative;width:1.25em;height:1.25em;border-radius:50%;background:var(--ink)}
.ok::after{content:'';position:absolute;left:37%;top:19%;width:25%;height:45%;border:solid var(--cream);border-width:0 .15em .15em 0;transform:rotate(45deg)}
.gy{flex:none;width:.8em;height:.9em;display:none}
.pause .gy,.spiller .gy{display:inline-block}
.pause .gy{background:linear-gradient(90deg,var(--ink) 0 34%,transparent 0 66%,var(--ink) 0)}
.spiller .gy{background:var(--ink);clip-path:polygon(10% 0,100% 50%,10% 100%)}
.hj{position:absolute;right:3cqw;top:1.55cqw;width:max(10px,3.3cqw);aspect-ratio:12/11;background:var(--ink);-webkit-mask:var(--hjerte) center/contain no-repeat}
:root{--hjerte:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C5 16 2 12.5 2 8.5A5.3 5.3 0 0 1 12 5.8a5.3 5.3 0 0 1 10 2.7c0 4-3 7.5-10 12.5z'/%3E%3C/svg%3E")}
.r1,.r2,.gl .bar,.hj,.ok{transition:.55s var(--ease)}
.hj{transition-timing-function:cubic-bezier(.3,1.8,.5,1)}
.v2 .gl{background-image:linear-gradient(62deg,var(--coral) -8%,var(--amber) 50%,var(--cream))}
.v3 .gl{background-image:linear-gradient(28deg,var(--coral),var(--amber) 62%,var(--cream))}
.v:not(.s1) .r1,.v:not(.s2) .r2,.v:not(.s2) .bar{opacity:0;transform:translateY(1cqw)}
.v:not(.s3) .hj{opacity:0;transform:scale(.2)}
.skriver .ok{opacity:0;transform:scale(.4)}
.skriver .nm::after{content:'';display:inline-block;width:1.5px;height:1em;background:var(--ink);vertical-align:-.15em;margin-left:1px;animation:blink 1s steps(1) infinite}
.lab{position:absolute;left:50%;top:calc(100% + 2.6cqw);transform:translateX(-50%);white-space:nowrap;font:max(10.5px,2.15cqw)/1.2 var(--mono);color:var(--on-dusk-muted);background:#0e0b10;border:1px solid #ffd6aa1a;border-radius:.55em;padding:.34em .75em;transition:.8s}
.tent .lab{color:var(--cream);border-color:#ffc98f42}
.igjen{position:absolute;z-index:3;right:max(16px,calc(50% - 552px));top:clamp(10px,2.2vw,24px);display:inline-flex;align-items:center;gap:8px;font:500 13.5px/1 var(--body);color:var(--on-dusk);background:#141418;border:1px solid var(--line-dusk);border-radius:100px;padding:9px 15px 9px 12px;cursor:pointer;opacity:0;transform:translateY(-4px);transition:.6s var(--ease)}
.igjen[hidden]{display:none}
.igjen.vis{opacity:1;transform:none}
.igjen:hover{border-color:#ffd6aa66}
.igjen svg{width:15px;height:15px;flex:none}
.tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(50px,6vw,80px);padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--rule)}
.k-nr{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.tre h3{font:700 clamp(21px,2.1vw,25px)/1.2 var(--disp);letter-spacing:-.015em;margin:12px 0 10px}
.tre p{color:var(--fg2);font-size:16px;max-width:38ch}
.uten{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;margin-top:clamp(40px,5vw,56px);padding:20px 24px;border:1.5px dashed var(--rule);border-radius:16px;max-width:52rem;color:var(--fg2);font-size:16px}
.uten s{font:700 21px var(--disp);color:var(--fg);text-decoration-thickness:2.5px;text-decoration-color:var(--accent)}
.uten span{flex:1 1 30ch}
.icloud .sig{margin-top:16px;font-size:12.5px}

/* == 8 What it can do: tallene (A11), seks store kort, resten == */
.tall-rad{display:flex;flex-wrap:wrap;gap:clamp(22px,5.5vw,72px);margin-top:clamp(36px,5vw,56px);padding-bottom:clamp(32px,4.5vw,50px);border-bottom:1px solid var(--rule)}
.tall b{display:block;font:800 clamp(42px,5.6vw,68px)/1 var(--disp);letter-spacing:-.035em;color:var(--accent);font-variant-numeric:tabular-nums}
.tall span{font-size:15px;color:var(--fg2)}
.seks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.stor,.evne,.plan{background:var(--card);border:1px solid var(--card-rule)}
/* hover på translate: transform er inntoningen */
.seks .stor,.evner .evne,.plans .plan{transition:opacity .9s var(--ease) calc(var(--d,0)*90ms),transform .9s var(--ease) calc(var(--d,0)*90ms),translate .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.seks .stor:hover,.plans .plan:hover{translate:0 -4px;box-shadow:0 26px 60px -18px #15110e33;border-color:var(--card-hover)}
.evner .evne:hover{translate:0 -2px;border-color:var(--card-hover)}
.stor{border-radius:22px;padding:clamp(12px,1.4vw,16px)}
.tx{padding:clamp(18px,2.2vw,26px) clamp(8px,1.2vw,14px) clamp(8px,1vw,12px)}
.tx .k-nr{display:block}
.tx h3{font:700 clamp(23px,2.5vw,30px)/1.12 var(--disp);letter-spacing:-.02em;margin:10px 0 8px}
.tx p{color:var(--fg2);font-size:16px;max-width:46ch}
.tx .hvor{font:12.5px var(--mono);color:var(--fg3);margin-top:14px}
/* illustrasjonene: stiliserte eksempler, ikke skjermbilder */
.ill{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;container-type:inline-size;background:var(--dusk2);color:var(--on-dusk);font-size:clamp(10px,2.6vw,12.5px);line-height:1.3;box-shadow:0 18px 40px -26px #15110e8c}
.sc{position:absolute;inset:0;overflow:hidden}
.merk{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;font:.92em var(--mono);color:var(--on-dusk);background:#0e0e12;border-radius:7px;padding:.45em .7em}
.fb{background:linear-gradient(90deg,transparent calc(50% - .7px),#ffffff6b 0 calc(50% + .7px),transparent 0),linear-gradient(transparent 9%,#ffffff5c 0 calc(9% + 1.4px),transparent 0 calc(91% - 1.4px),#ffffff5c 0 91%,transparent 0),repeating-linear-gradient(90deg,#24583a 0 12.5%,#1f5034 0 25%)}
.fb::before{content:'';position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;border:1.4px solid #fff6;border-radius:50%;transform:translate(-50%,-50%)}
.fb::after{content:'';position:absolute;left:24%;top:30%;width:max(4px,1.3cqw);aspect-ratio:1;border-radius:50%;background:var(--cream);box-shadow:11cqw 14cqw var(--cream),21cqw -3cqw var(--cream),6cqw 26cqw var(--cream),33cqw 20cqw #f5f5f7,27cqw 5cqw #f5f5f7,41cqw 27cqw #f5f5f7,46cqw 9cqw #f5f5f7,17cqw 9cqw #fff}
.spill .fb::after{animation:spillere 6s ease-in-out infinite alternate}
@keyframes spillere{to{transform:translate(7cqw,-3cqw)}}
.ny{background:radial-gradient(80% 90% at 72% 20%,#2a5b73,#12303f 55%,#0a1a24)}
.ny::before{content:'';position:absolute;left:37%;bottom:0;width:26%;height:46%;border-radius:48% 48% 0 0/38% 38% 0 0;background:#0b161e}
.ny::after{content:'';position:absolute;left:44.5%;bottom:43%;width:11%;aspect-ratio:1;border-radius:50%;background:#0b161e}
.lt{position:absolute;left:5%;right:32%;bottom:9%;z-index:2;display:flex;height:17%;min-height:9px;font:.9em var(--mono);color:#f5f5f7;background:#0e1319;border-radius:3px;overflow:hidden}
.lt::before{content:'';width:5%;flex:none;background:var(--coral)}
.lt b{align-self:center;padding:0 .7em;font-weight:500;white-space:nowrap}
.na{background:radial-gradient(22% 30% at 64% 62%,#ffd6a0d9,transparent 70%),linear-gradient(#2c2140,#6e3a4f 44%,#d8795a 66%,#f0a870 70%,#2d2230 70.4%,#171220)}
.na::before{content:'';position:absolute;inset:34% 0 29.6%;background:#241a2e;clip-path:polygon(0 100%,0 42%,14% 8%,26% 46%,38% 20%,52% 64%,63% 36%,78% 72%,90% 30%,100% 58%,100% 100%)}
.na::after{content:'';position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(#f0a87047,transparent 45%),repeating-linear-gradient(transparent 0 5px,#ffdcb40d 5px 6px)}
.kn{background:radial-gradient(circle at 50% 43%,#0a070b 3.1%,transparent 3.4%),linear-gradient(#0a070b,#0a070b) 50% 72%/6% 32% no-repeat,radial-gradient(55% 50% at 50% 100%,#ff965a6b,transparent 70%),linear-gradient(#140d14,#211219 62%,#0d090d)}
.kn::before{content:'';position:absolute;inset:0;transform-origin:50% 0;background:conic-gradient(from 150deg at 26% -6%,transparent,#ffc48257 6deg 16deg,transparent 22deg),conic-gradient(from 188deg at 74% -6%,transparent,#ff826e4c 6deg 16deg,transparent 22deg)}
.spill .kn::before{animation:sving 4.5s ease-in-out infinite alternate}
@keyframes sving{to{transform:rotate(2.5deg)}}
.kn::after{content:'';position:absolute;inset:auto 0 0;height:24%;background:radial-gradient(circle at 50% 100%,#070508 58%,transparent 61%) 0 100%/8.3% 76% repeat-x,linear-gradient(transparent 58%,#070508 0)}

/* 1 bilde-i-bilde, ruta går rundt */
.pip .mini{position:absolute;z-index:2;width:34%;aspect-ratio:16/9;right:4%;bottom:6%;border-radius:8px;overflow:hidden;box-shadow:0 10px 26px #0000008c,0 0 0 1.5px #f5f5f780}
.spill.pip .mini{animation:hjorne 12s var(--ease) infinite}
@keyframes hjorne{0%,20%,100%{right:4%;bottom:6%}25%,45%{right:4%;bottom:63.4%}50%,70%{right:62%;bottom:63.4%}75%,95%{right:62%;bottom:6%}}
.pip .merk{left:50%;top:5.5%;transform:translateX(-50%)}
.stilling{position:absolute;left:6%;top:9%;font:500 .8em var(--mono);color:#f5f5f7;background:#0e0e12;border-radius:4px;padding:.15em .45em}

/* 2 to strømmer, lyden bytter side (A16) */
.rute{position:absolute;left:0;top:0;width:calc(50% - 1px);height:100%;overflow:hidden}
.rb{left:calc(50% + 1px)}
.spill .ra{animation:ruteA 12s var(--ease) infinite}
.spill .rb{animation:ruteB 12s var(--ease) infinite}
@keyframes ruteA{0%,44%,100%{width:calc(50% - 1px);height:100%}50%,94%{width:100%;height:calc(50% - 1px)}}
@keyframes ruteB{0%,44%,100%{left:calc(50% + 1px);top:0;width:calc(50% - 1px);height:100%}50%,94%{left:0;top:calc(50% + 1px);width:100%;height:calc(50% - 1px)}}
.to .merk{left:6%;top:8%;color:var(--on-dusk-muted)}
.to .merk::before,.to .merk::after{content:'';width:1.1em;height:1.1em;flex:none;background:currentColor;-webkit-mask:var(--hoyt) center/contain no-repeat}
.to .merk::after{position:absolute;left:.7em;top:50%;margin-top:-.55em;opacity:0;-webkit-mask-image:var(--lyd)}
.to .merk.paa{color:var(--cream);background:#3a2415}
.to .merk.paa::after{opacity:1}
.spill .ra .merk{animation:lyd 6s infinite}
.spill .rb .merk{animation:lyd 6s 3s infinite}
.spill .ra .merk::after{animation:bolge 6s infinite}
.spill .rb .merk::after{animation:bolge 6s 3s infinite}
@keyframes lyd{0%,44%,100%{color:var(--cream);background:#3a2415}50%,94%{color:var(--on-dusk-muted);background:#0e0e12}}
@keyframes bolge{0%,44%,100%{opacity:1}50%,94%{opacity:0}}
:root{--hoyt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h2.6L8.5 2.6v10.8L4.6 10H2z'/%3E%3C/svg%3E");--lyd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M10.8 5.4a3.6 3.6 0 0 1 0 5.2M12.7 3.6a6.2 6.2 0 0 1 0 8.8'/%3E%3C/svg%3E")}
.valg{position:absolute;z-index:3;right:4%;bottom:6%;display:flex;gap:5px;padding:5px;border-radius:9px;background:#0e0e12}
.valg i{position:relative;width:max(15px,3.8cqw);aspect-ratio:4/3;border-radius:3px;border:1.4px solid;color:var(--on-dusk-faint)}
.valg i::before{content:'';position:absolute;background:currentColor}
.valg i:nth-child(1)::before{inset:0 calc(50% - .7px)}
.valg i:nth-child(2)::before{inset:calc(50% - .7px) 0}
.valg i:nth-child(3)::before{right:1.5px;bottom:1.5px;width:42%;height:38%;border-radius:1px}
.valg .paa{color:var(--amber)}
@container (max-width:440px){.valg{display:none}}
.spill .valg i:nth-child(-n+2){animation:valg 12s infinite}
.spill .valg i:nth-child(2){animation-delay:6s}
@keyframes valg{0%,46%,100%{color:var(--amber)}50%,96%{color:var(--on-dusk-faint)}}

/* 3 opptak */
.rec .merk{left:4.5%;top:7%}
.rec .merk i{width:.75em;height:.75em;border-radius:50%;background:var(--coral);box-shadow:0 0 .6em #ff7a6bcc}
.spill.rec .merk i{animation:rec 1.6s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
.rec .merk b{font-weight:500;font-variant-numeric:tabular-nums}
.info{position:absolute;inset:auto 0 0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:9% 4.5% 4.5%;background:linear-gradient(transparent,#0a0a0ceb 46%)}
.info p{min-width:0}
.info b{display:block;font:700 1.3em var(--disp);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info p span{color:var(--on-dusk-muted)}
.knapp{flex:none;font-weight:600;font-size:.95em;color:var(--dusk);background:#f5f5f7;border-radius:100px;padding:.55em 1em;white-space:nowrap}

/* 4 nedlasting */
.last{padding:5% 5.5%;display:flex;flex-direction:column;gap:3.2%}
.hode{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);color:var(--on-dusk-muted);margin-bottom:1%}
.hode b{font-weight:500;color:var(--cream);background:#2c1f14;border-radius:100px;padding:.3em .8em}
.l-rad{display:flex;align-items:center;gap:4%;background:var(--dusk3);border-radius:10px;padding:2.6% 3%}
.l-rad>div{flex:1;min-width:0}
.l-rad b{display:block;font:600 1.12em var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-rad .st{color:var(--on-dusk-muted);font-variant-numeric:tabular-nums}
.l-rad .bar{display:block;height:4px;border-radius:4px;background:#ffffff1f;margin-top:5px;overflow:hidden}
.l-rad .bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--amber)}
.l-rad .ok,.s-enh .ok{background:var(--amber)}
.l-rad .ok{width:1.5em;height:1.5em}
.l-rad .ok::after,.s-enh .ok::after{border-color:var(--dusk)}
.laster .a .ok{opacity:0;transform:scale(.4)}
.last:not(.laster) .a .bar{opacity:0}
.po{flex:none;width:7.5%;aspect-ratio:2/3;border-radius:5px;position:relative;overflow:hidden}
.po::before,.po::after{content:'';position:absolute}
.po1{background:linear-gradient(#9fb2cc,#dfe6ef 62%,#f4f6f9)}
.po1::before{left:24%;bottom:14%;width:52%;height:34%;background:#2a2230;clip-path:polygon(0 100%,0 42%,50% 0,100% 42%,100% 100%)}
.po1::after{left:44%;bottom:22%;width:12%;height:10%;background:var(--amber);box-shadow:0 0 6px var(--amber)}
.po2{background:linear-gradient(#34505c,#1b3039 60%,#0f1d24)}
.po2::before{left:44%;bottom:18%;width:12%;height:50%;background:#e9e2d6;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.po2::after{left:30%;top:24%;width:40%;height:9%;background:var(--cream);border-radius:50%;box-shadow:0 0 8px var(--cream)}
.po3{background:radial-gradient(60% 40% at 50% 70%,#ff7a6bb2,transparent),linear-gradient(#1b1624,#3b2230)}

/* 5 programguiden med nå-strek (A15) */
.guide{--k:29%;padding:4.5% 4.5% 0}
.g-top,.g-rad{position:relative;display:flex}
.g-top{font-family:var(--mono);color:var(--on-dusk-muted);height:9%;align-items:center}
.g-top span+span{position:absolute;left:calc(var(--k) + (100% - var(--k))*var(--a)/100);padding-left:.55em;border-left:1px solid var(--line-dusk);color:var(--on-dusk-faint)}
.g-rad{height:17.5%;margin-top:2.2%}
.g-k{width:var(--k);flex:none;display:flex;align-items:center;font-weight:600;padding-right:3%;white-space:nowrap;overflow:hidden}
.g-p{position:absolute;top:0;bottom:0;left:calc(var(--k) + (100% - var(--k))*var(--a)/100);width:calc((100% - var(--k))*(var(--b) - var(--a))/100 - 3px);display:flex;align-items:center;padding:0 3%;border-radius:7px;background:var(--dusk3);color:var(--on-dusk-muted);white-space:nowrap;overflow:hidden}
.g-p.nu{color:var(--on-dusk-faint);background:#19191e}
.g-p.mal{color:var(--on-dusk);background:#2b2020}
.g-p.mal::after{content:'';flex:none;margin-left:auto;width:.7em;height:.7em;border-radius:50%;background:var(--coral);box-shadow:0 0 .5em #ff7a6be6}
.g-naa{position:absolute;z-index:2;top:19%;bottom:22%;left:calc(4.5% + (91% - var(--k)*.91)*.2 + var(--k)*.91);width:2px;background:var(--coral);box-shadow:0 0 8px #ff7a6bcc}
.g-naa::before{content:'';position:absolute;left:50%;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--coral);transform:translateX(-50%)}
.spill .g-naa{animation:naa 9s linear infinite}
@keyframes naa{to{transform:translateX(3cqw)}}
.g-tost{position:absolute;z-index:3;left:50%;bottom:5.5%;transform:translateX(-50%);display:flex;align-items:center;gap:.6em;white-space:nowrap;font-weight:600;color:var(--dusk);background:#f5f5f7;border-radius:100px;padding:.55em 1.05em}
.g-tost i{width:.75em;height:.75em;border-radius:50%;background:#e0503d}
.spill .g-p.mal{animation:ring 9s infinite}
.spill .g-tost{animation:tost 9s var(--ease) infinite}
.spill .g-p.mal::after{animation:prikk 9s infinite}
@keyframes ring{0%,16%,66%,100%{box-shadow:0 0 0 0 #ffa65c00}24%,58%{box-shadow:0 0 0 2px var(--amber),0 0 16px #ffa65c8c}}
@keyframes tost{0%,40%{opacity:0;transform:translate(-50%,40%)}46%,92%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%)}}
@keyframes prikk{0%,40%{opacity:0;transform:scale(.2)}46%,94%{opacity:1;transform:none}100%{opacity:0}}

/* 6 språkene */
.sprak{padding:5.5% 6%;display:flex;flex-direction:column;justify-content:center;gap:7%}
.s-kort{background:var(--dusk3);border-radius:12px;padding:4% 5%}
.s-cap{font:.9em var(--mono);color:var(--on-dusk-muted);margin-bottom:3%}
.s-rad{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2.4% 0;border-top:1px solid #ffd6aa1a}
.s-rad b{display:grid;font-weight:600;color:var(--cream);text-align:right}
.s-rad b i{grid-area:1/1;font-style:normal}
.bytt i:first-child{opacity:0}
.spill .bytt i:first-child{animation:ut 9s infinite}
.spill .bytt i:last-child{animation:inn 9s infinite}
@keyframes ut{0%,20%{opacity:1}26%,100%{opacity:0}}
@keyframes inn{0%,20%{opacity:0}26%,100%{opacity:1}}
.s-note{color:var(--on-dusk-muted);font-size:.9em;margin-top:2%}
.s-enh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 7px;font:.9em var(--mono)}
.s-enh em{font-style:normal;color:var(--on-dusk-muted);margin-right:.3em}
.s-enh span{display:inline-flex;align-items:center;gap:.45em;background:#0e0e12;border:1px solid var(--line-dusk);border-radius:100px;padding:.3em .7em .3em .4em}
.s-enh .ok{width:1.2em;height:1.2em}
.spill .s-enh .ok{animation:hake 9s infinite}
.spill .s-enh span:nth-of-type(2) .ok{animation-delay:.25s}
.spill .s-enh span:nth-of-type(3) .ok{animation-delay:.5s}
.spill .s-enh span:nth-of-type(4) .ok{animation-delay:.75s}
@keyframes hake{0%,34%{opacity:0;transform:scale(.3)}40%,96%{opacity:1;transform:none}100%{opacity:0}}

/* resten, og «Works with» */
.og{font:700 clamp(22px,2.6vw,30px) var(--disp);letter-spacing:-.02em;margin-top:clamp(56px,7vw,90px)}
.og+p{color:var(--fg2);margin-top:8px;max-width:56ch}
.evner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,16px);margin-top:clamp(24px,3vw,36px)}
@media(max-width:1079px){.evner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.evner{grid-template-columns:minmax(0,1fr)}}
.evne{border-radius:16px;padding:20px 20px 22px}
.evne h3{display:flex;align-items:center;gap:10px;font:600 18px/1.25 var(--disp);letter-spacing:-.01em;margin-bottom:7px}
.evne h3::before{content:'';flex:none;width:13px;height:10px;border-radius:2.5px;background:var(--glow);box-shadow:inset 0 0 0 1.3px #f5f5f7eb,0 0 7px #ffa65c73}
.evne p{font-size:14.5px;color:var(--fg2);line-height:1.5}
.works{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:clamp(30px,4vw,44px)}
.works>span:first-child{font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);margin-right:8px}
.chippy{border:1px solid var(--card-rule);border-radius:100px;padding:7px 15px;font-size:14px;font-weight:500;background:var(--card)}

/* == 9 A player. Nothing else. == */
.truths{margin-top:clamp(52px,6vw,76px);display:grid;gap:clamp(38px,5.5vw,64px)}
.truth{display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(10px,2vw,22px)}
@media(max-width:560px){.truth{grid-template-columns:minmax(0,1fr)}}
.t-no{font:12px var(--mono);color:var(--accent);padding-top:.95em;letter-spacing:.1em}
.truth h3{font:700 clamp(27px,4.2vw,50px)/1.1 var(--disp);letter-spacing:-.028em;max-width:22ch;text-wrap:balance}
.truth p{color:var(--fg2);margin-top:12px;max-width:52ch;font-size:17px}
.tos{margin-top:clamp(56px,7vw,80px);padding-top:28px;border-top:1px solid var(--rule);color:var(--fg2);font-size:15px;max-width:72ch}
.tos a,.faq-hode .lede a,.svar a{color:var(--fg);text-underline-offset:3px;text-decoration-color:var(--accent)}

/* == 10 Pricing == */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(40px,5vw,60px)}
@media(max-width:1000px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.med{grid-column:1/-1}}
@media(max-width:700px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{position:relative;overflow:hidden;border-radius:22px;padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;gap:10px}
.plan h3{font:500 12.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.amt{font:800 clamp(46px,5.8vw,64px)/1.05 var(--disp);letter-spacing:-.035em;margin-top:6px}
.amt small{font:15px var(--body);letter-spacing:0;color:var(--fg2)}
.p-sub{color:var(--fg2);font-size:15.5px}
.plan .btn{margin-top:18px;align-self:flex-start}
.plan.hot{background:radial-gradient(90% 70% at 100% 0%,#ffa65c33,transparent 60%),linear-gradient(160deg,#19141a,#0A0A0C 64%) #0A0A0C;border-color:#0A0A0C}
.hot::after{content:'';position:absolute;right:26px;top:26px;width:30px;height:23px;border-radius:5px;background:var(--glow);box-shadow:inset 0 0 0 2.5px #f5f5f7eb,0 0 22px #ffa65c8c}
.med{padding:clamp(4px,1.2vw,16px) 0 0 clamp(0px,1.4vw,18px);color:var(--fg2);font-size:16px}
.med p{font:500 12.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);margin-bottom:18px}
.med li+li{margin-top:5px}
.valuta{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:24px;font-size:14.5px;color:var(--fg2)}
.valuta[hidden]{display:none}
.valuta select{font:inherit;color:var(--fg);border:1px solid var(--card-rule);border-radius:100px;padding:8px 36px 8px 16px;max-width:100%;-webkit-appearance:none;appearance:none;cursor:pointer;background:var(--sand) no-repeat right 15px center/9px 5px conic-gradient(from 135deg at 50% 0,var(--muted) 90deg,#0000 0)}
.valuta select:hover{border-color:var(--card-hover)}
.fot{font-size:14px;color:var(--fg3);margin-top:16px}
/* A12: priser.js (G) setter pris-ny ved valutabytte */
[data-pris]{display:inline-block;font-variant-numeric:tabular-nums}
.pris-ny{animation:bla .9s var(--ease)}
@keyframes bla{0%{opacity:0;transform:translateY(.45em) rotateX(70deg)}}

@keyframes pust{50%{box-shadow:inset 0 0 0 var(--k) #f5f5f7f0,0 0 90px #ffa65cb8,0 30px 70px -24px #b8450f99}}
.navn{font:italic 28px/1.1 var(--serif)}
.rolle{font:12.5px var(--mono);color:var(--fg3);letter-spacing:.06em}

/* == 12 FAQ: virker uten skript == */
.faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(30px,6vw,90px);align-items:start}
@media(max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr)}}
@media(min-width:901px){.faq-hode{position:sticky;top:110px}.faq-hode h2{font-size:clamp(38px,4.3vw,56px)}}
.qa details{border-bottom:1px solid var(--rule)}
.qa details:first-child{border-top:1px solid var(--rule)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:600 clamp(18px,1.9vw,21px)/1.3 var(--disp);letter-spacing:-.012em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'';flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);transition:transform .4s var(--ease),background-color .3s,border-color .3s;background:linear-gradient(var(--fg),var(--fg)) center/12px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) center/1.5px 12px no-repeat}
.qa [open] summary::after{transform:rotate(45deg);background-color:var(--sand)}
.svar{padding:0 clamp(0px,4vw,52px) 26px 0;color:var(--fg2);font-size:16.5px;max-width:62ch}
@supports selector(::details-content){:root{interpolate-size:allow-keywords}
  .qa details::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
  .qa details[open]::details-content{height:auto}
}

/* == nedlastingen og tekstbåndet == */
.qr{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px auto 0;text-align:left}
.qr[hidden]{display:none}
.qr img{display:block;width:108px;height:108px;border-radius:12px}
.qr p{font-size:14.5px;color:var(--fg2);max-width:21ch}
.marquee .m-track{animation-duration:66s}

@media(max-width:700px){.tre,.seks{grid-template-columns:minmax(0,1fr)}}

/* == redusert bevegelse == */
@media(prefers-reduced-motion:reduce){.igjen{display:none}.gl{animation:none!important}
  .ill *,.ill *::before,.ill *::after,.pris-ny{animation:none!important}
  .seks .stor:hover,.plans .plan:hover,.evner .evne:hover{translate:none}
  .qa details::details-content{transition:none}
}