/* Svarly. A real page in rooms: dark at both ends, white between them, lime at the end. The white comes up over the locked
   dark part, and the dark comes back up over the white the same way. The dark ground is drawn by felt.js. */
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(./_delt/fonter/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(./_delt/fonter/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(./_delt/fonter/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(./_delt/fonter/instrument-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA}
:root{--natt:#08090A;--blekk:#111214;--papir:#F4F4F1;--flate:#fff;--lime:#C6F432;--lime-myk:#EEF9C7;--stein:#6E6F6C;--linje:#E6E6E3;--tekst:#F2F2EF;--svak:#A3A49F;--strek:rgba(255,255,255,.14);
  --kunde:#4A2545;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--marg:clamp(20px,3.4vw,56px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--natt);-webkit-text-size-adjust:100%;overflow-x:clip}
.nb{white-space:nowrap}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:transparent;color:var(--tekst);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{font-weight:500;letter-spacing:-.04em}
h2{font-size:clamp(38px,5.1vw,80px);line-height:1.02}
.lead{font-size:clamp(17px,1.45vw,21px);line-height:1.45}
.skjult{visibility:hidden}

#felt{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.ingen-gl #felt{display:none}
.ingen-gl #slutt,.ingen-gl .fot{background:var(--lime)}
main,.fot{position:relative;z-index:1}
.natt{color:var(--tekst)}
.dag{color:var(--blekk)}

/* The full stop in the headings is the logo's dot. It stands still */
.punkt{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;vertical-align:baseline;background:var(--lime)}
.dag .punkt{box-shadow:0 0 0 .016em var(--blekk)}
.fjord .punkt,.band .punkt{box-shadow:none}
.punkt.blekk{background:var(--blekk);box-shadow:none}

/* Top */
.nav{position:fixed;z-index:20;left:50%;top:12px;transform:translateX(-50%);width:min(calc(100% - 24px),1360px);height:58px;display:flex;align-items:center;gap:22px;padding:0 10px 0 20px;border-radius:16px;color:var(--tekst);background:rgba(20,21,23,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);transition:background-color .35s,color .35s,box-shadow .35s,transform .45s cubic-bezier(.3,.8,.3,1)}
.nav.borte{transform:translate(-50%,-90px)}
#logo circle{fill:var(--lime);transition:fill .3s}
.nav.lys #logo circle,.nav.pa-lime #logo circle{fill:currentColor}
.nav.lys{color:var(--blekk);background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(17,18,20,.08),0 8px 30px -18px rgba(17,18,20,.3)}
.nav.pa-lime{color:var(--blekk);background:rgba(198,244,50,.6);box-shadow:inset 0 0 0 1px rgba(17,18,20,.14)}
.nav .logo{display:block;margin-right:auto}
.nav .logo svg{display:block;height:25px;width:auto}
.nav nav{display:flex;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}
.nav nav a{padding:7px 12px;border-radius:9px;font-size:15px;font-weight:500;transition:background-color .2s}
.nav nav a:hover{background:rgba(127,127,127,.16)}
.nav .inn{font-size:15px;font-weight:500}
.knapp{display:inline-flex;align-items:center;height:50px;padding:0 22px;border-radius:12px;background:var(--lime);color:var(--blekk);font-weight:600;font-size:16px;white-space:nowrap;transition:background-color .2s,transform .2s}
.knapp:hover{transform:translateY(-1px)}
.knapp.liten{height:40px;padding:0 15px;font-size:15px;border-radius:10px}
.knapp.sort{background:var(--blekk);color:#fff}
.nav.pa-lime .knapp{background:var(--blekk);color:#fff}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Hero: the demo. Text and the address field to the left, a browser in the arch with the chat open to the right */
#helt{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(96px,13vh,126px) var(--marg) 46px}
.helt-v{position:relative;z-index:2}
#helt h1{max-width:9.4em;font-size:clamp(44px,5.1vw,86px);line-height:.98;letter-spacing:-.045em}
.helt-under{margin-top:22px;max-width:26em;font-size:clamp(17px,1.45vw,21px);line-height:1.45;color:var(--svak)}
.prov{width:min(570px,100%);margin-top:30px}
.prov-rad{display:flex;gap:8px;padding:6px;border-radius:14px;background:rgba(24,25,27,.86);box-shadow:inset 0 0 0 1px var(--strek);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:box-shadow .2s}
.prov-rad:focus-within{box-shadow:inset 0 0 0 1px var(--lime)}
#prov-felt{flex:1;min-width:0;height:48px;padding:0 14px;border:0;background:transparent;color:var(--tekst);font:400 17px/1 var(--sans);outline:none}
#prov-felt::placeholder{color:#7D7E7A}
#prov-knapp{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 18px;border:0;border-radius:10px;background:var(--lime);color:var(--blekk);font-weight:600;font-size:15.5px;white-space:nowrap;cursor:pointer;transition:filter .2s}
#prov-knapp:hover{filter:brightness(1.06)}
#prov-knapp:disabled{opacity:.6;cursor:progress}
#prov-knapp svg{width:17px;height:17px}
.prov-samtykke{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .35s ease,margin-top .35s ease,opacity .3s;font-size:13px;line-height:1.4;color:#8A8B87}
.prov.apen .prov-samtykke{max-height:40px;margin-top:10px;opacity:1}
.prov-robot{display:none;margin-top:10px}
.prov-robot.synlig{display:block}
.prov-melding{min-height:1.45em;margin-top:8px;font-size:14px;line-height:1.45;color:var(--svak)}
.prov-melding.feil{color:#FFA594}
.prov-melding button{padding:0;border:0;background:none;color:var(--tekst);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.helt-v .fakta{margin-top:26px;padding-top:20px;border-top:1px solid var(--strek)}
.fakta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px)}
.fakta div{padding-left:14px;border-left:1px solid var(--strek)}
.fakta dt{font-size:clamp(26px,2.4vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1}
.fakta dd{margin-top:7px;font-size:14px;line-height:1.35;color:var(--svak)}
.helt-h{height:min(calc(100svh - 140px),780px);min-height:440px}
.merke-plass{position:absolute;right:clamp(10px,5vw,90px);top:44%;width:min(42vw,62vh);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}

/* The demo stage, drawn at 720 x 720 (400 x 540 on a phone) and fitted to its room */
.hb-bue{position:absolute;left:80px;top:0;width:560px;height:720px;border-radius:280px 280px 30px 30px;background:radial-gradient(circle,rgba(198,244,50,.42) 1px,transparent 1.7px) 0 0/10px 10px,linear-gradient(rgba(20,22,18,.55),rgba(12,13,14,.2));box-shadow:inset 0 0 0 1px rgba(198,244,50,.26),inset 0 40px 120px -40px rgba(198,244,50,.25);-webkit-mask-image:linear-gradient(#000 55%,rgba(0,0,0,.35));mask-image:linear-gradient(#000 55%,rgba(0,0,0,.35))}
.hv{position:absolute;left:18px;top:172px;z-index:2;width:600px;height:400px;overflow:hidden;border-radius:14px;background:#F6F3EC;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 100px -40px rgba(0,0,0,.85)}
.hv-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#ECE7DD}
.hv-bar span{width:10px;height:10px;border-radius:50%;background:#D8D2C5}
.hv-bar em{display:flex;align-items:center;gap:6px;margin:0 auto;padding:3px 30px;border-radius:7px;background:#F6F3EC;color:#4E4A42;font-style:normal;font-size:12.5px;transform:translateX(-24px);max-width:62%}
.hv-bar em svg{flex:none;width:12px;height:12px;color:#8C877C}
.hv-bar em b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-side{position:absolute;left:0;right:0;top:34px;bottom:0;overflow:hidden}
.hv-ajob{position:absolute;left:0;top:0;width:100%;will-change:transform}
.hv-ajob img{position:absolute;left:0;top:0;max-width:none;height:auto;display:block}
#hv-avsnitt{position:absolute;display:block;border-radius:4px;background:var(--lime);mix-blend-mode:multiply;opacity:0}
.hv-deres{position:absolute;inset:0;overflow:hidden;background:#FAFAF8;opacity:0;visibility:hidden}
.hv-skjelett{padding:26px 28px}
.hv-skjelett b{display:block;margin-bottom:18px;font:500 26px/1.1 Georgia,"Times New Roman",serif;color:#2A2A28;letter-spacing:-.01em}
.hv-skjelett i{display:block;height:11px;margin-top:10px;border-radius:6px;background:#E8E7E2;width:62%}
.hv-skjelett i+i{width:48%}
.hv-skjelett i.kort{width:30%;height:28px;margin-top:18px;border-radius:7px;background:#DCDBD5}
.hv-skjelett span{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.hv-skjelett span i{width:auto;height:90px;margin:0;border-radius:10px}
#hv-bilde{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0}
.hv-sider{position:absolute;inset:0;padding:22px 250px 22px 26px;background:#FAFAF8;color:#2A2A28;opacity:0;visibility:hidden}
.hv-sider>b{display:block;margin-bottom:12px;font:500 22px/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.hv-sider ol{list-style:none}
.hv-sider li{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid #ECEAE4;font-size:13px;break-inside:avoid;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-sider li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px rgba(17,18,20,.25)}
.hv-skann{position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(transparent,rgba(198,244,50,.32));border-bottom:2px solid var(--lime);opacity:0;pointer-events:none}
.hv-deres.leser .hv-skann{opacity:1;animation:skann 2.2s ease-in-out infinite}
@keyframes skann{from{transform:translateY(-120px)}to{transform:translateY(380px)}}
.h-les{position:absolute;left:34px;top:226px;z-index:3;width:300px;padding:14px 16px 12px;border-radius:14px;background:rgba(17,18,20,.94);color:var(--tekst);font-size:13px;line-height:1.35;box-shadow:0 0 0 1px rgba(198,244,50,.3),0 24px 60px -24px rgba(0,0,0,.7);opacity:0;visibility:hidden}
.h-les>b{display:block;margin-bottom:8px;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-les ol{list-style:none;min-height:100px}
.h-les li{display:flex;align-items:baseline;gap:8px;padding:3px 0;color:var(--svak);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-les li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lime);transform:translateY(-1px)}
.h-les li:last-child{color:var(--tekst)}
.h-les-tall{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--strek);font:500 12.5px/1.3 var(--mono);color:var(--lime)}
.hc,.ks-chat,#chat{color:#16171A}
/* The widget makes an open chat fill a phone screen. These are pictures of a chat, so they keep their own size */
.hc .sw-panel,#chat .sw-panel,.ks-chat .sw-panel{border-radius:18px}
@media (max-width:520px){.hc .sw-panel{width:316px!important;height:360px!important}#chat .sw-panel{width:380px!important;height:600px!important}.ks-chat .sw-panel{width:330px!important;height:566px!important}}
.hc{position:absolute;left:398px;top:230px;right:auto;bottom:auto;z-index:4;font-family:var(--sans);--k:#4A2545;--kt:#fff;--kd:#4A2545;--kdt:#fff;--kkant:#4A2545}
.hc .sw-panel{display:flex;width:312px;height:470px;max-height:none;animation:none;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.9)}
.hc .sw-logo{overflow:hidden}
.hc .sw-logo.bokstav{background:var(--kd);color:var(--kdt);font-weight:600;font-size:15px;display:grid;place-items:center;box-shadow:none}
.hc-logg{display:flex;flex-direction:column;gap:10px;padding:14px 14px 10px;overflow-y:auto;scrollbar-width:none}
.hc-logg::-webkit-scrollbar{display:none}
.hc-logg .sw-melding{max-width:90%;font-size:14px}
.hc-logg .sw-forslag{display:flex;flex-wrap:wrap;gap:6px;margin-top:0}
.hc-logg .sw-forslag button{padding:7px 11px;border:1px solid #E2DCD1;border-radius:16px;background:#FBFAF7;color:#16171A;font:500 13px/1.3 var(--sans);text-align:left;cursor:pointer;transition:border-color .2s}
.hc-logg .sw-forslag button:hover{border-color:#16171A}
.hc-logg .sw-skjema{gap:7px;padding:12px}
.hc-signal{background:none;color:inherit;border-radius:4px;padding:1px 3px;margin:-1px -3px}
.hc-lapp{align-self:flex-end;margin-top:-5px;padding:3px 9px;border-radius:99px;background:var(--lime);color:var(--blekk);font-size:11.5px;font-weight:600}
.hc-system{align-self:stretch;padding:10px 12px;border-radius:12px;background:#111214;color:#F2F2EF;font-size:13px;line-height:1.4}
.hc-system a{display:inline-block;margin-top:8px;padding:6px 11px;border-radius:8px;background:var(--lime);color:var(--blekk);font-weight:600;text-decoration:none}
.hc textarea{resize:none}
.h-lead{position:absolute;left:0;top:598px;z-index:5;width:336px;padding:12px 14px 10px;border-radius:14px;background:#fff;color:var(--blekk);font-size:13.5px;box-shadow:0 0 0 1px rgba(17,18,20,.06),0 30px 60px -24px rgba(0,0,0,.7);opacity:0;visibility:hidden}
.hl-topp{display:flex;justify-content:space-between;margin-bottom:8px;font-size:12.5px;color:var(--stein)}
.hl-topp b{color:var(--blekk);font-weight:600}
.hl-rad{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:8px 9px;border-radius:8px;background:var(--lime-myk);box-shadow:inset 3px 0 0 var(--lime)}
.hl-rad>i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--blekk);color:#fff;font-style:normal;font-size:13px;font-weight:600}
.hl-rad b{display:block;font-weight:500;line-height:1.25}
.hl-rad small{display:block;font-size:12px;color:var(--stein)}
.h-lead p{margin-top:8px;font-size:12.5px;color:var(--stein)}
.h-linje{position:absolute;left:0;top:0;z-index:3;width:720px;height:720px;overflow:visible;pointer-events:none}

/* The statement, between two bands of the questions customers ask */
#ingress{position:relative;min-height:92vh;padding:9vh 0 14vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(40px,8vh,84px);overflow:hidden}
#ingress .stor{padding:0 var(--marg)}
.stor{max-width:21em;font-size:clamp(32px,4.5vw,70px);line-height:1.1;letter-spacing:-.035em;font-weight:500}
.stor .o{opacity:.17}
.merk{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 92%/calc(var(--m,0)*100%) 94%;color:inherit;padding:0 .08em;margin:0 -.08em;border-radius:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:color .25s}
.merk.pa{color:var(--blekk)}
.baand{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.rad{display:flex;gap:12px;width:max-content;will-change:transform}
.spm{flex:none;padding:11px 17px;border-radius:18px 18px 5px 18px;background:rgba(30,31,34,.86);box-shadow:inset 0 0 0 1px var(--strek);font-size:16px;line-height:1.3;color:#D9DAD5;white-space:nowrap;transition:background-color .5s,color .5s,box-shadow .5s}
#rad-2 .spm{border-radius:18px 18px 18px 5px}
.spm.lys{background:var(--lime);color:var(--blekk);box-shadow:none}

/* Pinned rooms */
.scene{position:relative;height:var(--h,200vh)}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.brett-ramme{position:relative;min-width:0;min-height:0}
.brett{position:absolute;left:0;top:0;transform-origin:0 0}

/* Reading: the page comes in tilted while the section scrolls in, with the other pages behind it */
#lese{position:relative;z-index:0;height:calc(158vh + 100vh + 50vw)}
#lese .pin{z-index:0;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(24px,3.4vw,56px);align-items:center;padding:90px var(--marg) 60px}
.lese-tekst{position:relative;z-index:1}
.lese-tekst h2{font-size:clamp(34px,4.1vw,64px)}
.lese-tekst .lead{margin-top:22px;max-width:25em;color:var(--svak)}
.teller{display:flex;align-items:baseline;gap:9px;margin-top:30px;color:var(--svak);font-size:17px}
.teller b{min-width:1.3em;font-size:56px;line-height:1;font-weight:500;letter-spacing:-.04em;color:var(--tekst);font-variant-numeric:tabular-nums}
#lese .brett-ramme{height:100%}
#rom-s{position:absolute;left:30px;top:30px;width:900px;height:660px;perspective:1700px;perspective-origin:50% 45%}
#rom{position:absolute;inset:0;transform-style:preserve-3d;visibility:hidden}
#nettsted,.ark{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#F6F3EC}
.ark{box-shadow:0 0 0 1px var(--strek)}
.ark img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ark::after{content:"";position:absolute;inset:0;background:rgba(12,13,14,.5)}
#rom{will-change:transform}
#nettsted,.ark{outline:1px solid transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden}
#nettsted{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.8)}
#nettsted>img{display:block;width:100%;height:auto}
.nett-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#ECE7DD}
.nett-bar span{width:10px;height:10px;border-radius:50%;background:#D8D2C5}
.nett-bar em{margin:0 auto;padding:3px 40px;border-radius:7px;background:#F6F3EC;color:#6F6A5E;font-style:normal;font-size:12px;transform:translateX(-24px)}
.tagg{position:absolute;padding:3px 8px;border-radius:6px;background:var(--blekk);color:var(--lime);font:500 12px/1.3 var(--mono);opacity:0;box-shadow:0 0 0 1px rgba(198,244,50,.5)}
.skann{position:absolute;left:0;right:0;top:0;height:900px;margin-top:-900px;background:linear-gradient(rgba(198,244,50,.13),rgba(198,244,50,.13) 82%,rgba(198,244,50,.38));border-bottom:2px solid var(--lime);box-shadow:0 6px 18px -6px rgba(198,244,50,.7);mix-blend-mode:multiply;opacity:0;pointer-events:none}

/* Panels: the dark surface the product stands on */
.panel{position:relative;border-radius:26px;background:var(--blekk);overflow:hidden;isolation:isolate}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(198,244,50,.55) 1px,transparent 1.6px);background-size:9px 9px;-webkit-mask-image:radial-gradient(70% 90% at 92% 100%,#000,transparent 72%);mask-image:radial-gradient(70% 90% at 92% 100%,#000,transparent 72%)}

/* The white part: a real surface, so it covers what is locked under it */
#dagen{position:relative;z-index:3;margin-top:calc(-100vh - 50vw);background:var(--papir);background-image:radial-gradient(circle,rgba(17,18,20,.085) 1px,transparent 1.5px);background-size:11px 11px;border-radius:50vw 50vw 0 0}

/* Arch text */
.bue-tekst{position:relative;padding:calc(50vw * .56) var(--marg) 13vh;text-align:center}
.bue-tekst h2{max-width:13em;margin:0 auto}
.bue-tekst .lead{margin:20px auto 0;max-width:24em}
.natt .bue-tekst .lead{color:var(--svak)}

/* The heading that answers itself: three dots type, and become its full stop */
.svar-tittel{position:relative}
.ml{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .14em;margin:0 -.02em -.14em}
.mo{display:inline-block;will-change:transform}
.svar-punkt{opacity:0;will-change:transform}
.kode-tittel .svar-punkt{box-shadow:none}
.prikker{position:absolute;left:0;top:0;display:flex;gap:.07em;pointer-events:none;opacity:0;will-change:transform}
.prikker i{width:.13em;height:.13em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 .016em var(--blekk)}
html:not(.pauset) .prikker i{animation:hopp 1.05s ease-in-out infinite}
.prikker i:nth-child(2){animation-delay:.14s}
.prikker i:nth-child(3){animation-delay:.28s}
@keyframes hopp{0%,55%,100%{transform:translateY(0)}28%{transform:translateY(-.13em)}}

/* Questions in the arches */
.himmel{position:absolute;left:0;top:0;width:100%;height:50vw;z-index:1;pointer-events:none}
.hm{position:absolute;left:0;top:0;display:flex;align-items:center;gap:9px;padding:9px 11px 9px 15px;border-radius:16px 16px 16px 5px;background:#fff;color:#55565A;font-size:15.5px;line-height:1.25;white-space:nowrap;box-shadow:0 0 0 1px rgba(17,18,20,.07),0 16px 34px -20px rgba(17,18,20,.4);opacity:0;will-change:transform,opacity;transition:color .35s}
.hm.langt{background:#FBFBF9;font-size:14px}
.hm.svart{color:var(--blekk)}
.hm-skriver{display:flex;gap:3px;padding:0 2px}
.hm-skriver b{width:5px;height:5px;border-radius:50%;background:#B9B9B4}
html:not(.pauset) .hm-skriver b{animation:hopp2 1s ease-in-out infinite}
.hm-skriver b:nth-child(2){animation-delay:.15s}
.hm-skriver b:nth-child(3){animation-delay:.3s}
.hm-svar{display:none;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--lime);color:var(--blekk);box-shadow:0 0 0 1.5px var(--blekk)}
.hm-svar svg{width:11px;height:11px}
.hm.svart .hm-skriver{display:none}
.hm.svart .hm-svar{display:grid;animation:hm-pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes hm-pop{from{transform:scale(.2)}}
/* The dark arch must stay one surface. A blur behind a star, or a star with its own layer painted in the middle of the
   arch's content, splits the arch into many layers the size of the section, and Chrome then sometimes drops the one with
   the dark ground for a frame, so the white under it shows. So: no backdrop blur in #kvelden, and the stars paint last */
.himmel.natt{z-index:6}
.hm.natt{transform:translate(-50%,-50%) scale(.9);background:#17181B;color:#C9CAC5;font-size:14.5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);will-change:auto;transition:opacity .6s,transform .7s cubic-bezier(.3,.8,.3,1),color .35s}
.hm.natt.vist{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hm.natt.svart{color:#F2F2EF}
.hm.natt .hm-skriver b{background:#77787A}
.hm.natt .hm-svar{box-shadow:none}

/* The code before the lime: a heading, and the site's index.html where the line is typed in */
.kode-del{position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding:0 var(--marg);color:var(--tekst);opacity:0;pointer-events:none}
.kode-innhold{width:min(700px,52vw)}
.kode-tittel{font-size:clamp(34px,4.1vw,64px);max-width:11em}
.kode-tekst .lead{margin-top:16px;max-width:27em;color:var(--svak)}
.kode-vindu{margin-top:clamp(22px,3.6vh,38px);border-radius:16px;overflow:hidden;background:#141517;color:#C9CAC5;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.8);font:400 14px/1.75 var(--mono)}
.kv-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:#1B1C1F;border-bottom:1px solid rgba(255,255,255,.07)}
.kv-bar span{width:10px;height:10px;border-radius:50%;background:#34353A}
.kv-bar em{margin-left:12px;font-style:normal;font-size:12.5px;color:#8A8B87}
.kv-kode{padding:14px 0 16px}
.kv-l{display:flex;gap:16px;padding:0 18px;white-space:pre}
.kv-l b{flex:none;width:16px;text-align:right;font-weight:400;color:#55565A}
.kv-l span{min-width:0}
.kv-ny span{white-space:pre-wrap;overflow-wrap:anywhere}
.kt{font-style:normal;color:#8A8B87}
.ka{font-style:normal;color:#E6E7E2}
.ks{font-style:normal;color:#C6F432}
.kv-ny{background:rgba(198,244,50,.07);box-shadow:inset 2px 0 0 var(--lime)}
#kv-tekst{color:var(--lime)}
.kv-caret{display:inline-block;width:2px;height:1.15em;margin-left:1px;vertical-align:-.2em;background:var(--lime)}
html:not(.pauset) .kv-caret{animation:blink 1s steps(1) infinite}
.kv-status{display:flex;align-items:center;gap:8px;padding:9px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;color:#8A8B87;font-family:var(--sans)}
.kv-status i{width:8px;height:8px;border-radius:50%;background:#55565A;transition:background-color .3s,box-shadow .3s}
.kv-status.lagret{color:#F2F2EF}
.kv-status.lagret i{background:var(--lime);box-shadow:0 0 0 4px rgba(198,244,50,.18)}

/* The chat on a-job.no */
#samtale .pin{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:clamp(20px,3vw,48px);align-items:stretch;padding:84px var(--marg) 56px}
.steg-kol{align-self:center}
.steg{list-style:none}
.note{margin-top:18px;font-size:14.5px;color:var(--stein)}
.steg li{position:relative;padding:18px 0 20px;border-top:1px solid rgba(17,18,20,.14)}
.steg li:last-child{border-bottom:1px solid rgba(17,18,20,.14)}
.steg button{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.steg h3{font-size:clamp(23px,2.25vw,33px);line-height:1.08;letter-spacing:-.03em;color:var(--stein);transition:color .3s}
.steg li.aktiv h3{color:var(--blekk)}
.mer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.3,.8,.3,1)}
.mer p{overflow:hidden;font-size:17px;line-height:1.45;color:#50514F}
.steg li.aktiv .mer{grid-template-rows:1fr}
.steg li.aktiv .mer p{padding-top:10px}
.fremdrift{position:absolute;left:0;right:0;top:-1px;height:2px}
.fremdrift b{display:block;height:100%;background:var(--blekk);transform:scaleX(var(--f,0));transform-origin:0 0}
#samtale .panel{min-height:0;display:flex}
#sam-ramme{flex:1}
#sam-brett{width:1064px;height:790px}
#sam-nettsted{position:absolute;left:24px;top:30px;width:940px;height:687px;overflow:hidden;border-radius:14px;background:#F6F3EC;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 100px -40px rgba(0,0,0,.75)}
.sam-bilde{position:relative}
.sam-bilde img{display:block;width:100%;height:auto}
#avsnitt{position:absolute;display:block;border-radius:5px;background:var(--lime);mix-blend-mode:multiply;opacity:0}
/* The closed chat, as «Kort» looks on a-job.no */
.kort-boble{position:absolute;right:24px;bottom:24px;z-index:3;display:flex;align-items:center;gap:12px;width:300px;padding:13px 14px;border-radius:16px;background:#fff;color:#171512;font-family:var(--sans);box-shadow:0 0 0 1px rgba(23,21,18,.06),0 26px 60px -22px rgba(0,0,0,.6);transform-origin:100% 100%}
.kb-logo{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #EEE9E0;display:grid;place-items:center;overflow:hidden}
.kb-logo img{display:block;width:100%;height:100%;padding:6px;object-fit:contain}
.kb-navn{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.kb-navn b{font-size:15px;font-weight:600}
.kb-navn small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#2F7D4A}
.kb-navn small::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.kort-boble svg{flex:none;width:20px;height:20px;color:#67635C}
#chat{position:absolute;right:24px;bottom:24px;left:auto;top:auto;width:380px;height:600px;z-index:4;font-family:var(--sans);visibility:hidden;transform-origin:100% 100%;--k:#4A2545;--kt:#fff;--kd:#4A2545;--kdt:#fff;--kkant:#4A2545}
#chat .sw-panel{display:flex;width:380px;height:600px;max-height:none;animation:none;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 34px 80px -24px rgba(0,0,0,.85)}
#vindu{position:relative;display:block;overflow:hidden;padding:0;flex:1}
.samt{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:16px;visibility:hidden}
#s1{visibility:inherit}
#m2{position:absolute;left:16px}
#signal-ord{background:none;color:inherit;border-radius:4px;padding:1px 3px;margin:-1px -3px}
#chat .sw-skjema,#chat .sw-booking{animation:none}
#chat .sw-steg{animation:none}
#takk,#booket{position:absolute;left:16px;right:16px;width:auto}
.sw-inn textarea{resize:none}
.sw-send{display:grid;place-items:center}
.sw-send svg{width:18px;height:18px}
#linje{position:absolute;inset:0;width:1064px;height:790px;z-index:5;pointer-events:none;overflow:visible}
.lapp{display:inline-block;padding:2px 9px;border-radius:99px;font-style:normal;font-size:12px;font-weight:500;background:var(--lime);color:var(--blekk);white-space:nowrap}
.lapp.mork{background:var(--blekk);color:#fff}
.lapp.signal{position:absolute;z-index:5;padding:5px 12px;font-size:13px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);visibility:hidden}
.lead-kort{position:absolute;left:46px;bottom:38px;z-index:5;width:560px;padding:14px 16px 12px;border-radius:14px;background:#fff;color:var(--blekk);font-size:14px;box-shadow:0 0 0 1px rgba(17,18,20,.06),0 30px 60px -24px rgba(0,0,0,.6);visibility:hidden}
.lead-topp{display:flex;justify-content:space-between;margin-bottom:10px;font-size:13px;color:var(--stein)}
.lead-topp b{color:var(--blekk);font-weight:600}
.lead-rad{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;background:var(--lime-myk);box-shadow:inset 3px 0 0 var(--lime)}
.lead-rad>i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--blekk);color:#fff;font-style:normal;font-size:12px;font-weight:600}
.lead-rad b{display:block;font-weight:500;font-size:14.5px;line-height:1.25}
.lead-rad small{display:block;font-size:12.5px;color:var(--stein)}
.lead-kort p{margin-top:9px;font-size:13px;color:var(--stein)}

/* What it can do, on the fjord. Each card shows its feature at work */
.funksjoner{padding:12vh var(--marg) 12vh}
.fjord{position:relative;overflow:hidden;border-radius:26px;padding:clamp(28px,4.4vw,64px);color:#fff;isolation:isolate}
.fjord>img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;z-index:-2;will-change:transform}
.fjord::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(10,18,24,.5),rgba(10,18,24,.04) 40%)}
.fjord-topp{min-height:clamp(150px,24vh,240px)}
.fjord-topp h2{max-width:11em}
.kort-rutenett{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fkort{position:relative;padding:12px 12px 22px;border-radius:18px;color:var(--blekk);background:rgba(247,247,244,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 30px 60px -40px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);transform:perspective(1100px) translateY(calc((1 - var(--inn,1)) * 70px)) rotateX(calc(var(--rx,0deg) + (1 - var(--inn,1)) * 14deg)) rotateY(var(--ry,0deg));opacity:calc(.35 + .65 * var(--inn,1));will-change:transform}
.fkort::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(198,244,50,.28),transparent 62%);opacity:var(--glod,0);mix-blend-mode:multiply}
.fkort h3{margin:16px 10px 0;font-size:21px;letter-spacing:-.02em;line-height:1.15}
.fkort>p{margin:7px 10px 0;font-size:15.5px;line-height:1.42;color:#434441}
.vin{position:relative;height:160px;overflow:hidden;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,18,20,.07);padding:13px 14px;font-size:12.5px;line-height:1.35;color:var(--blekk)}
.v-mus{position:absolute;left:0;top:0;z-index:4;width:16px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 1.5v14.2l3.8-3.6 2.9 6.4 2.7-1.2-2.9-6.3h5.3z' fill='%23111214' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));opacity:0;transform-origin:2px 2px}
/* Kunnskap */
.v-topp{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-size:12px;color:var(--stein)}
.v-topp>b{color:var(--blekk);font-size:13px}
.v-topp span b{color:var(--blekk);font-weight:600}
.v-rad{display:flex;align-items:center;gap:8px;margin-top:5px;padding:6px 8px;border-radius:7px;box-shadow:inset 0 0 0 1px #EFEFEC;transition:background-color .35s}
.v-rad span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-rad.lyser{background:var(--lime-myk)}
.bry{flex:none;position:relative;width:27px;height:15px;border-radius:8px;background:#DADAD6;transition:background-color .25s}
.bry::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform .25s,background-color .25s}
.bry.pa{background:var(--blekk)}
.bry.pa::after{transform:translateX(12px);background:var(--lime)}
/* Regler */
.vr-liste{display:flex;flex-direction:column;gap:4px}
.vr-liste span{display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:7px;box-shadow:inset 0 0 0 1px #EFEFEC}
.vr-liste span::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--stein)}
.vr-liste .vr-ny{opacity:0;background:var(--lime-myk)}
.vr-felt{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:center;height:32px;padding:0 4px 0 10px;border-radius:8px;background:#FAFAF8;box-shadow:inset 0 0 0 1px #DADAD6}
.vr-tekst{white-space:nowrap;overflow:hidden}
.vr-caret{flex:none;width:1px;height:14px;margin-left:1px;background:var(--blekk)}
html:not(.pauset) .vr-caret{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.vr-knapp{margin-left:auto;padding:5px 9px;border-radius:6px;background:var(--blekk);color:#fff;font-size:11.5px;font-weight:600}
/* Riktig person */
.vp-meg,.vt-q{margin-left:auto;width:fit-content;max-width:86%;padding:7px 10px;border-radius:12px 12px 3px 12px;background:var(--kunde);color:#fff}
.vp-bot{display:flex;gap:7px;align-items:flex-start;margin-top:8px}
.vp-bot i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--blekk);color:#fff;font-style:normal;font-size:10px;font-weight:600;display:grid;place-items:center}
.vp-bot span{padding:7px 10px;border-radius:12px 12px 12px 3px;background:#F3F1EC}
.vp-bot b{font-weight:600}
.vp-knapp{display:inline-block;margin:8px 0 0 31px;padding:6px 11px;border-radius:99px;background:var(--kunde);color:#fff;font-weight:600;font-size:11.5px}
/* Bedriften bak leadet */
.vf-topp{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid #EFEFEC}
.vf-topp b{display:block;font-size:13px}
.vf-topp small{display:block;font-size:11.5px;color:var(--stein)}
.vf-treff{padding:2px 8px;border-radius:99px;background:var(--lime);font-style:normal;font-size:11px;font-weight:600}
.v-firma dl{margin-top:5px}
.v-firma dl div{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.v-firma dt{color:var(--stein)}
.v-firma dd{position:relative;min-width:70px;font-weight:500;text-align:right}
.v-firma dd.laster::before{content:"";position:absolute;right:0;top:3px;width:70px;height:10px;border-radius:5px;background:linear-gradient(90deg,#EEEEEA,#F8F8F5,#EEEEEA);background-size:200% 100%;animation:skimmer 1s linear infinite}
@keyframes skimmer{to{background-position:-200% 0}}
.vf-kilde{position:absolute;left:14px;bottom:10px;font-size:11px;color:var(--stein)}
/* Rett et svar */
.vt-bot{position:relative;margin-top:8px;width:90%;min-height:44px;padding:7px 10px;border-radius:12px 12px 12px 3px;background:#F3F1EC}
.vt-feil{position:relative;display:inline-block}
.vt-feil i{position:absolute;left:-1px;right:-1px;top:54%;height:1.5px;background:#B42318;transform:scaleX(0);transform-origin:0 50%}
.vt-riktig{position:absolute;left:10px;right:10px;top:7px;opacity:0}
.vt-bunn{display:flex;align-items:center;gap:9px;margin-top:9px}
.vt-knapp{padding:5px 9px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #DADAD6;font-size:11.5px;font-weight:600}
.vt-merke{font-size:11.5px;font-weight:500;color:#2F7D4A;opacity:0}
/* API og webhooks */
.v-api{background:#141517;color:#E8E8E4;box-shadow:none}
.va-kode{min-height:72px;margin:0;font:400 11.5px/1.55 var(--mono);white-space:pre;color:#C9CAC5;overflow:hidden}
.va-kode .k{color:var(--lime)}
.va-vei{position:relative;height:2px;margin:9px 0 10px;background:repeating-linear-gradient(90deg,#3A3B3D 0 6px,transparent 6px 10px)}
.va-puls{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);opacity:0}
.va-mal{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:8px;background:#1F2023;font:400 11.5px/1.3 var(--mono)}
.va-ok{padding:2px 7px;border-radius:99px;background:#2F7D4A;color:#fff;font-style:normal;font-size:11px;opacity:0}
.fjord-lenke{display:flex;align-items:center;gap:8px;width:fit-content;margin:26px auto 4px;padding:11px 18px;border-radius:12px;background:rgba(17,18,20,.72);color:#fff;font-weight:600;font-size:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background-color .2s}
.fjord-lenke:hover{background:rgba(17,18,20,.75)}
.fjord-lenke svg{width:17px;height:17px}
.kort-prikker{display:none;justify-content:center;gap:6px;margin-top:12px}
.kort-prikker i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background-color .25s,width .25s}
.kort-prikker i.pa{width:18px;border-radius:3px;background:#fff}

/* The laptop that becomes the whole window */
#app-scene .pin{overflow:hidden;background:#EFEDE8}
#laptop{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#app-flate{position:absolute;left:0;top:0;width:100px;height:100px;background:#F4F4F2;transform-origin:0 0;will-change:transform}
#app-ramme{position:absolute;left:0;top:0;border:0;background:#F4F4F2;transform-origin:0 0;pointer-events:none;will-change:transform}
.app-tekst{position:absolute;z-index:1;left:0;right:0;top:clamp(84px,12vh,120px);padding:0 var(--marg);text-align:center;color:var(--blekk)}
.app-tekst h2{font-size:clamp(34px,4.2vw,66px)}
.app-tekst .lead{margin-top:10px;color:#50514F}
.app-hint{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:12px;color:var(--tekst);background:rgba(17,18,20,.9);font-size:14.5px;white-space:nowrap;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s,background-color .3s}
.app-hint.vis{opacity:1;pointer-events:auto}
.app-aktiv .app-hint{background:rgba(17,18,20,.96);box-shadow:0 0 0 1px var(--lime),0 14px 34px -14px rgba(0,0,0,.6)}
.app-hint button{display:flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:0;border-radius:8px;background:var(--lime);color:var(--blekk);font-weight:600;font-size:14px;cursor:pointer}
.app-hint svg{width:14px;height:14px}
.app-apne,#app-still{display:none}

/* The phone: text to the left, the phone between the end of the text and the end of the band */
#varsel{position:relative;height:calc(190vh + 100vh + 50vw)}
#varsel .pin{display:flex;align-items:center;overflow:visible;padding:0 var(--marg)}
.band{position:relative;width:100%;min-height:min(64vh,600px);display:flex;align-items:center;padding:clamp(30px,5vw,72px);border-radius:26px;background:var(--blekk);color:var(--tekst);overflow:hidden;isolation:isolate}
#ringer{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.band-tekst{position:relative;z-index:1;width:min(46%,600px)}
.band-tekst h2{font-size:clamp(34px,4.1vw,64px)}
.band-tekst .lead{margin-top:20px;max-width:24em;color:var(--svak)}
.tlf-steg{list-style:none;margin-top:30px;border-top:1px solid var(--strek);counter-reset:steg}
.tlf-steg li{position:relative;display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--strek);font-size:17px;color:#7D7E7A;transition:color .35s}
.tlf-steg li::before{counter-increment:steg;content:counter(steg);width:16px;font:500 13px/1 var(--mono)}
.tlf-steg li.aktiv{color:var(--tekst)}
.tlf-steg li.aktiv::before{color:var(--lime)}
.tlf-steg li i{position:absolute;left:0;right:0;bottom:-1px;height:1px}
.tlf-steg li i b{display:block;height:100%;background:var(--lime);transform:scaleX(var(--f,0));transform-origin:0 0}
.telefon{position:absolute;left:62%;top:50%;width:min(41vh,350px);aspect-ratio:746/1500;margin-top:calc(min(41vh,350px) * -1.005);will-change:transform;filter:drop-shadow(0 40px 50px rgba(0,0,0,.5))}
.tlf-rist{position:absolute;inset:0}
.tlf-rist>img{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.skjerm{position:absolute;left:0;top:0;width:360px;height:840px;transform-origin:0 0;overflow:hidden;background:#000;z-index:1}
.laas{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:82px;background:#0B0C0D url(bilder/tapet.jpg) center/cover;color:#fff;font-family:var(--sans)}
.laas .dato,.laas .tid{text-shadow:0 2px 16px rgba(0,0,0,.35)}
.laas .dato{font-size:18px;font-weight:500;opacity:.88}
.laas .tid{font-size:92px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.varsel{position:absolute;left:14px;right:14px;top:300px;display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;padding:13px;border-radius:22px;background:rgba(240,240,236,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--blekk);font-size:14.5px;line-height:1.3;visibility:hidden}
.varsel i{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--blekk)}
.varsel svg{width:29px;height:29px}
.varsel b{display:block;font-weight:600}
.varsel small{align-self:start;color:#6E6F6C}
.innboks{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:var(--blekk);font-family:var(--sans);font-size:15.5px;line-height:1.4;visibility:hidden}
.i-topp{display:flex;align-items:center;gap:10px;padding:56px 16px 12px;border-bottom:1px solid #EFEFEC}
.i-topp svg{flex:none;width:22px;height:22px;color:#8A8B88}
.i-topp b{display:block;font-size:15.5px;font-weight:600;line-height:1.25}
.i-topp small{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:#B54708}
.i-topp small::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-du{display:none}
.i-logg{position:relative;flex:1;display:flex;flex-direction:column;gap:11px;padding:16px;overflow:hidden}
.i-bot{color:#3A3B3D}
.i-kunde{align-self:flex-end;max-width:86%;padding:9px 12px;border-radius:14px 14px 4px 14px;background:#EDEDEA}
.i-sys{align-self:center;font-size:12.5px;color:#6E6F6C}
.i-meg{align-self:flex-start;max-width:90%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:var(--blekk);color:#fff}
.i-venter{display:flex;gap:4px;padding:13px 14px}
.i-venter span{width:7px;height:7px;border-radius:50%;background:#9A9A96}
html:not(.pauset) .i-venter span{animation:hopp2 1s ease-in-out infinite}
.i-venter span:nth-child(2){animation-delay:.15s}
.i-venter span:nth-child(3){animation-delay:.3s}
@keyframes hopp2{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}}
.i-bunn{position:relative;min-height:104px;padding:12px 16px 40px;border-top:1px solid #EFEFEC}
.i-knapp{display:flex;justify-content:center;align-items:center;height:48px;border-radius:11px;background:var(--blekk);color:#fff;font-weight:600}
.i-skriv{position:absolute;left:16px;right:16px;top:12px;display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 6px 6px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px #DADAD6;font-size:15px}
.i-skriv span{flex:1;min-width:0;line-height:1.3}
.i-skriv b{flex:none;width:36px;height:36px;border-radius:9px;background:var(--blekk);color:#fff;display:grid;place-items:center}
.i-skriv b svg{width:17px;height:17px}
.trykk{position:absolute;left:0;top:0;z-index:6;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(150,150,150,.32);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3.5px rgba(17,18,20,.2),0 6px 16px rgba(0,0,0,.2);opacity:0;pointer-events:none}

/* Evening: the same arch, and the same desk after closing time */
#kvelden{position:relative;z-index:4;display:flex;flex-direction:column;margin-top:calc(-100vh - 50vw);padding-bottom:7vh;background:var(--natt);border-radius:50vw 50vw 0 0;overflow:hidden;min-height:calc(50vw + 100vh + 2px)}
#kvelden .bue-tekst{z-index:2;padding:calc(50vw * .5) var(--marg) 0}
.kveld-pult{position:relative;z-index:1;flex:1 0 auto;min-height:46vw;margin-top:-3vw;overflow:hidden;contain:paint}
.kveld-pult::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(var(--natt),rgba(8,9,10,0) 22%,rgba(8,9,10,0) 70%,var(--natt))}
#kveld-bilde{position:absolute;left:-7.5%;top:calc(50% - 35vw);width:115%;height:auto;max-width:none}
.kveld-skjerm{position:absolute;z-index:1;overflow:hidden;background:#F6F3EC;box-shadow:0 0 80px 18px rgba(205,222,255,.16)}
.ks-innhold{position:absolute;left:0;top:0;width:960px;height:606px;transform-origin:0 0}
.ks-side{display:block;width:100%;height:100%;object-fit:cover;object-position:top;filter:brightness(.97)}
.ks-chat{position:absolute;right:18px;bottom:18px;left:auto;top:auto;z-index:1;font-family:var(--sans);--k:#4A2545;--kt:#fff;--kd:#4A2545;--kdt:#fff;--kkant:#4A2545}
.ks-chat .sw-panel{display:flex;width:330px;height:566px;max-height:none;animation:none;box-shadow:0 0 0 1px rgba(23,21,18,.08),0 24px 60px -24px rgba(0,0,0,.5)}
.ks-logg{position:relative;flex:1;display:block;overflow:hidden;padding:0}
.ks-grp{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:14px;visibility:hidden}
.ks-grp .sw-skriver{position:static}
.sprak{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:-10vw;padding:0 var(--marg)}
.sprak-kort{padding:16px 18px 18px;border-radius:18px;background:rgba(18,19,21,.92);box-shadow:inset 0 0 0 1px var(--strek);transition:box-shadow .4s,transform .4s}
.sprak-kort.aktiv{box-shadow:inset 0 0 0 1px rgba(198,244,50,.7),0 20px 50px -24px rgba(198,244,50,.35);transform:translateY(-6px)}
.sprak-kort span{display:block;margin-bottom:12px;font-size:14px;color:var(--svak)}
.s-q{margin-left:auto;width:fit-content;max-width:92%;padding:9px 13px;border-radius:15px 15px 4px 15px;background:var(--lime);color:var(--blekk);font-size:16px;line-height:1.35}
.s-a{margin-top:9px;width:fit-content;max-width:92%;padding:9px 13px;border-radius:15px 15px 15px 4px;background:#2A2B2E;font-size:16px;line-height:1.35}

/* Questions */
#sporsmal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);padding:7vh var(--marg) 22vh}
details{border-bottom:1px solid var(--strek)}
.sp-h{border-top:1px solid var(--strek)}
summary{display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:clamp(18px,1.6vw,23px);line-height:1.3;letter-spacing:-.01em;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:13px;height:13px;margin-top:.4em;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{max-width:34em;padding:0 34px 24px 0;color:var(--svak);font-size:18px;line-height:1.5}

/* Lime ending */
#slutt{color:var(--blekk)}
#slutt .pin{display:flex;align-items:center;padding:0 var(--marg)}
.slutt-tekst{position:relative;z-index:1;width:min(660px,52vw);opacity:0}
.slutt-tekst h2{font-size:clamp(44px,6vw,96px);line-height:.98}
.slutt-tekst p{margin-top:20px;max-width:27em;font-size:clamp(18px,1.5vw,22px)}
.kode{display:flex;align-items:center;gap:14px;margin:26px 0 16px;padding:13px 13px 13px 18px;border-radius:12px;background:var(--blekk);color:#F2F2EF;font:400 14px/1.5 var(--mono)}
.kode code{flex:1;min-width:0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.kode button{flex:none;height:36px;padding:0 13px;border:1px solid rgba(255,255,255,.26);border-radius:8px;background:transparent;cursor:pointer;font:500 14px/1 var(--sans)}
.slutt-merke{top:50%;right:clamp(-40px,1vw,40px);width:min(50vw,84vh)}
.fot{color:var(--blekk);padding:0 var(--marg);overflow:hidden}
.fot-rad{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:18px 0;border-top:1px solid rgba(17,18,20,.24);font-size:15px;font-weight:500}
.fot-rad nav{display:flex;gap:22px;flex-wrap:wrap}
.stor-logo svg,.fot-lys svg{display:block;width:100%;height:auto}
/* The big mark at the bottom, laid out as on a-job.no, sayable.no and omnifai.no: faint letters, the symbol in full,
   faded in from above and cut by the bottom of the page, with a light that follows the pointer */
.fot-merke{margin-top:56px;aspect-ratio:4001.4/580;overflow:hidden}
.fot-merke-inn{position:relative;-webkit-mask-image:linear-gradient(180deg,transparent 14%,rgba(0,0,0,.45) 38%,#000 56%);mask-image:linear-gradient(180deg,transparent 14%,rgba(0,0,0,.45) 38%,#000 56%)}
.fot-merke .t{fill:rgba(17,18,20,.14)}
.fot-merke .fm path{stroke:var(--blekk)}
.fot-merke .fm circle{fill:var(--blekk)}
.fot-glod{position:absolute;left:-4%;top:6%;width:32%;height:94%;background:radial-gradient(closest-side,rgba(255,255,255,.42),rgba(255,255,255,.12) 55%,rgba(255,255,255,0));pointer-events:none}
.fot-lys{position:absolute;inset:0;opacity:0;transition:opacity .32s;pointer-events:none;--mx:-999px;--my:-999px;-webkit-mask-image:radial-gradient(circle 170px at var(--mx) var(--my),#000 0%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);mask-image:radial-gradient(circle 170px at var(--mx) var(--my),#000 0%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%)}
.fot-lys.pa{opacity:1}
.fot-lys .t{fill:rgba(17,18,20,.3)}
.fot-lys .fm path{stroke:transparent}
.fot-lys .fm circle{fill:transparent}
.fot-merke-inn.vent{opacity:0;transform:translateY(14px)}
.fot-merke-inn.inn{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}

/* Text version */
#rolig{display:none}
.rolig .nav nav{display:none}
.rolig #felt,.rolig #side,.rolig .fot{display:none}
.rolig #rolig{display:block;max-width:680px;margin:0 auto;padding:120px 24px 80px}
.rolig #rolig h1{font-size:64px;line-height:1}
.rolig #rolig h2{font-size:34px;line-height:1.1;margin-top:44px}
.rolig #rolig p{margin-top:12px;color:var(--svak);font-size:19px}
.rolig #rolig a{color:var(--lime)}
html.pauset *{animation-play-state:paused!important}

/* Tablets: rooms stack */
@media (max-width:1100px){
  #lese .pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:18px;padding:90px var(--marg) 60px}
  #samtale .pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:14px;padding:84px var(--marg) 56px}
  .steg-kol{align-self:start}
  .steg li{display:none;padding:0;border:0!important}
  .steg li.aktiv{display:block}
  .fremdrift{display:none}
  #samtale .note{position:absolute;left:var(--marg);right:var(--marg);bottom:18px;margin:0;font-size:12.5px;text-align:center}
  .kort-rutenett{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band-tekst{width:48%}
  .band-tekst h2{font-size:clamp(28px,4.2vw,46px)}
  .tlf-steg li{font-size:15px;padding:9px 0}
  #helt{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:40px}
  .helt-h{height:min(86vw,660px)}
  .slutt-merke{top:auto;bottom:-6vh;right:-10vw;width:60vw;transform:none}
  .slutt-tekst{width:min(640px,86vw)}
  .sprak{grid-template-columns:minmax(0,1fr);max-width:620px;margin-left:auto;margin-right:auto}
}

/* Phones */
@media (max-width:760px){
  .nav{height:52px;padding:0 7px 0 14px;gap:12px}
  .nav nav,.nav .inn{display:none}
  .nav .logo svg{height:22px}
  /* The text sits lower and closer to the demo. The demo keeps its place: it moves up as much as the text moves down */
  #helt{--ned:44px;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:calc(84px + var(--ned)) 16px 56px}
  .prov{position:relative;z-index:3}
  .helt-v{display:contents}
  #helt h1{font-size:9.6vw;line-height:1}
  .helt-under{margin-top:-6px;font-size:15.5px;line-height:1.4}
  .prov{margin-top:0}
  #prov-knapp span{display:none}
  #prov-knapp{padding:0 14px}
  .helt-h{order:4;height:calc((100vw - 32px) * 1.35);min-height:0;margin-top:calc(var(--ned) * -1)}
  .helt-v .fakta{order:5;margin-top:4px}
  .hb-bue{left:30px;width:340px;height:540px;border-radius:170px 170px 22px 22px}
  .hv{left:0;top:96px;width:400px;height:290px}
  .hc{left:74px;top:174px}
  .hc .sw-panel{width:316px;height:360px}
  .h-lead,.h-linje{display:none}
  .h-les{left:10px;top:138px;width:250px}
  .hv-sider{padding:16px}
  .helt-v .fakta{padding-top:0}
  .fakta{grid-template-columns:minmax(0,1fr);gap:0}
  .fakta div{display:flex;align-items:baseline;gap:14px;padding:11px 0 10px;border-left:0;border-bottom:1px solid var(--strek)}
  .fakta dt{flex:none;width:58px;font-size:24px}
  .fakta dd{margin-top:0;font-size:14.5px}
  .spm{font-size:14px;padding:9px 13px}
  #ingress{min-height:0;padding:9vh 0 11vh;gap:34px}
  #lese{height:calc(150vh + 100vh + 50vw)}
  #lese .pin{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:22px;padding:84px 20px 48px}
  #lese .brett-ramme{flex:0 1 calc((100vw - 40px) * 1.0535);height:auto;min-height:0}
  .lese-tekst h2{font-size:32px}
  .lese-tekst .lead{margin-top:8px;font-size:15.5px}
  .teller{margin-top:6px;font-size:15px}
  .teller b{font-size:30px}
  .bue-tekst{padding:calc(50vw * 1.06) 20px 3vh}
  .bue-tekst h2{font-size:32px}
  #samtale .pin{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:80px 14px 50px}
  #samtale .panel{flex:0 1 calc((100vw - 28px) * 1.6);min-height:0}
  #samtale .steg-kol{align-self:stretch;flex:none}
  .steg h3{font-size:23px}
  .mer p{font-size:15px}
  .steg li.aktiv .mer p{padding-top:3px}
  #samtale .panel{border-radius:18px}
  #sam-nettsted,#linje{display:none}
  #sam-brett{width:400px;height:640px}
  #chat{left:10px;right:auto;bottom:10px}
  .kort-boble{right:10px;bottom:10px;width:290px}
  .lead-kort{left:10px;bottom:10px;width:380px}
  .lead-rad{grid-template-columns:34px 1fr auto}
  .lead-rad .mork{display:none}
  .lapp.signal{display:none!important}
  .funksjoner{padding:5vh 12px 6vh}
  .fjord{border-radius:18px;padding:22px 12px 12px}
  .fjord-topp{padding:0 8px;min-height:190px}
  .fjord-topp{min-height:150px}
  .kort-rutenett{display:flex;gap:10px;margin:0 -12px -14px;padding:0 12px 20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 12px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kort-rutenett::-webkit-scrollbar{display:none}
  .fkort{flex:0 0 84%;scroll-snap-align:start}
  .kort-prikker{display:flex}
  #app-scene{height:auto!important}
  #app-scene .pin{position:relative;height:auto;display:flex;flex-direction:column;align-items:center;padding:5vh 16px 8vh;background:none;overflow:visible}
  #laptop,#app-flate{display:none}
  .app-tekst{position:static;order:1;padding:0 4px 26px}
  .app-tekst h2{font-size:32px}
  #app-ramme{display:none}
  #app-still{display:block;order:2;position:relative;width:min(310px,80vw);height:auto;aspect-ratio:780/1300;object-fit:cover;object-position:top;border-radius:22px;background:#F4F4F2;box-shadow:0 0 0 1px rgba(17,18,20,.1),0 40px 70px -34px rgba(17,18,20,.55);cursor:pointer;-webkit-mask-image:linear-gradient(#000 62%,transparent 90%);mask-image:linear-gradient(#000 62%,transparent 90%)}
  .app-apne{display:flex;order:3;margin:-64px auto 0;position:relative;z-index:2;height:48px;align-items:center;gap:8px;padding:0 22px;border:0;border-radius:12px;background:var(--blekk);color:#fff;font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 14px 30px -14px rgba(17,18,20,.6)}
  html.app-apen .nav{display:none}
  html.app-apen main{z-index:40}
  html.app-apen #dagen{z-index:50}
  html.app-apen #app-ramme{display:block;position:fixed;inset:0;width:100vw!important;height:100dvh!important;z-index:60;transform:none!important;pointer-events:auto}
  html.app-apen .app-hint{position:fixed;z-index:61;opacity:1;pointer-events:auto;left:50%;right:auto;bottom:10px;padding:5px}
  html.app-apen .app-hint span{display:none}
  #varsel{height:calc(150vh + 100vh + 50vw)}
  #varsel .pin{--tb:min(60vw,calc((100svh - 390px) * .497));--th:calc(var(--tb) * 2.011);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:70px 14px 24px}
  .band{flex:none;display:block;min-height:0;height:auto;padding:26px 20px calc(var(--th) + 58px);border-radius:18px}
  .band-tekst{width:auto}
  .band-tekst h2{font-size:34px;line-height:1.04}
  .band-tekst .lead{margin-top:10px;font-size:16.5px}
  .tlf-steg{position:relative;min-height:26px;margin-top:12px;border:0}
  .tlf-steg li{position:absolute;left:0;right:0;top:0;padding:0;border:0;font-size:16px;color:var(--tekst);opacity:0;transition:opacity .35s}
  .tlf-steg li.aktiv{opacity:1}
  .tlf-steg li i{display:none}
  .telefon{top:auto;bottom:38px;left:50%;right:auto;width:var(--tb);margin:0 0 0 calc(var(--tb) / -2)}
  #kvelden .bue-tekst{padding:calc(50vw * 1.06) 20px 0}
  /* The questions in the arches, smaller, in the arch's top above the heading */
  .himmel{height:calc(50vw * 1.06)}
  .hm,.hm.langt{gap:7px;padding:7px 9px 7px 12px;border-radius:14px 14px 14px 4px;font-size:13px}
  .hm.natt{font-size:13px}
  .hm-svar{width:16px;height:16px}
  .hm-svar svg{width:10px;height:10px}
  .kode-del{align-items:flex-start;padding:clamp(88px,13svh,120px) 16px 24px}
  .kode-innhold{width:100%}
  .kode-tittel{font-size:30px}
  .kode-tekst .lead{margin-top:8px;font-size:15.5px}
  .kode-vindu{margin-top:16px;font-size:11.5px}
  .kv-l{white-space:pre-wrap;gap:10px;padding:0 12px}
  .kv-l b{width:12px}
  .kveld-pult{min-height:96vw;margin-top:0}
  #kveld-bilde{left:-60%;width:220%;top:calc(50% - 66vw)}
  .sprak{margin-top:-12vw;padding:0 16px}
  #sporsmal{grid-template-columns:minmax(0,1fr);gap:18px;padding:6vh 16px 9vh}
  #slutt .pin{align-items:flex-start;padding:clamp(96px,14svh,124px) 16px 0}
  .slutt-tekst{width:auto}
  .slutt-merke{right:-18vw;top:auto;bottom:-5vh;width:80vw;transform:none}
  .kode{flex-direction:column;align-items:stretch;font-size:12.5px}
  .fot{padding:0 16px}
  .fot-merke{margin-top:40px}
}