/* ============================================================
   Vettio
   Palette sampled from the logo and from the hero footage.
   ============================================================ */

:root{
  --canvas:#0B1424;
  --panel:#121E33;
  --panel-2:#18263E;
  --accent:#35CDAC;
  --accent-hover:#52E0C2;
  --accent-muted:#1A8094;
  --blue:#466DE3;
  --text-primary:#E9EEF7;
  --text-secondary:#98A7C0;

  --line:#22314C;            /* quiet dividers */
  --line-int:#48699A;        /* interactive borders, 3.3:1 on canvas */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --gut:clamp(20px,5vw,80px);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
  margin:0;
  padding:0;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:"Sora",system-ui,sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#08111F;padding:12px 18px;border-radius:0 0 10px 0;font-weight:500}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}

/* ============================================================
   The fixed environment: one place behind everything
   ============================================================ */

.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.env-glow-a{width:60vw;height:60vw;left:-14vw;top:8vh;background:radial-gradient(circle,rgba(26,128,148,.26),transparent 68%);animation:drift-a 110s var(--ease-soft) -24s infinite alternate}
.env-glow-b{width:54vw;height:54vw;right:-12vw;top:52vh;background:radial-gradient(circle,rgba(70,109,227,.2),transparent 68%);animation:drift-b 130s var(--ease-soft) -40s infinite alternate}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,-9vh,0) scale(1.14)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-8vw,7vh,0) scale(.94)}}

.env-grain{position:absolute;inset:-50%;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

.env-dust{position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(53,205,172,.5),transparent),
    radial-gradient(1.5px 1.5px at 78% 14%,rgba(70,109,227,.45),transparent),
    radial-gradient(1px 1px at 42% 66%,rgba(53,205,172,.35),transparent),
    radial-gradient(1.5px 1.5px at 88% 74%,rgba(26,128,148,.5),transparent),
    radial-gradient(1px 1px at 28% 88%,rgba(233,238,247,.25),transparent),
    radial-gradient(1px 1px at 62% 40%,rgba(70,109,227,.3),transparent);
  animation:motes 76s linear -18s infinite}
@keyframes motes{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14vh,0)}}

.nav,main,.foot{position:relative;z-index:1}

/* ============================================================
   Nav
   ============================================================ */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:18px var(--gut);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(9,17,31,.78);backdrop-filter:blur(14px);padding-block:11px;border-bottom-color:var(--line)}

.brand{display:flex;align-items:center;gap:10px}
.mark{width:22px;height:23px;flex:none}
.brand-word{font-family:"Sora",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.015em}

.nav-links{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto;font-size:15px;color:var(--text-secondary)}
.nav-links a{position:relative;transition:color .35s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ============================================================
   Buttons and links
   ============================================================ */

.btn{
  display:inline-block;background:var(--accent);color:#08111F;
  font-family:"Sora",sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:999px;
  transition:transform .4s var(--ease),background .35s var(--ease),box-shadow .45s var(--ease);
  box-shadow:0 0 0 rgba(53,205,172,0);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 34px rgba(53,205,172,.24)}
.btn-sm{padding:10px 19px;font-size:14.5px;margin-left:0}
.btn-lg{padding:18px 38px;font-size:18px}

.link{
  font-size:15.5px;color:var(--text-secondary);position:relative;
  transition:color .35s var(--ease);align-self:center;
}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;opacity:.45;transform:scaleX(1);transform-origin:left;transition:transform .45s var(--ease)}
.link:hover{color:var(--text-primary)}
.link:hover::after{transform:scaleX(.4)}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a,.link{min-height:44px;display:inline-flex;align-items:center}
}

/* ============================================================
   HERO: the pinned scrub stage
   ============================================================ */

.hero{position:relative;height:580vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#070D18}

.poster,#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:50% 50%;transition:opacity .9s var(--ease)}
#hero-video{opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

/* Layer 1 of the legibility system: the always-on base scrim */
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
/* The text column sits left, so the left side carries a little more weight */
.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,12,22,.74) 0%,rgba(7,12,22,.42) 33%,rgba(7,12,22,0) 60%)}

.loader{position:absolute;right:clamp(20px,4vw,52px);bottom:clamp(20px,4vw,52px);color:var(--accent);opacity:.85;transition:opacity .5s var(--ease)}
.ring{width:40px;height:40px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .12s linear}
.stage.video-ready .loader{opacity:0}
.chev{width:26px;height:40px;color:var(--text-secondary);animation:chev 2.6s var(--ease-soft) -.4s infinite}
@keyframes chev{0%,100%{transform:translateY(-4px);opacity:.4}50%{transform:translateY(4px);opacity:.95}}

/* --- the caption bands --- */

.bands{position:absolute;inset:0;display:grid;pointer-events:none;isolation:isolate;z-index:2}
.band{
  position:relative;
  grid-area:1/1;align-self:center;justify-self:start;
  padding-left:var(--gut);padding-right:var(--gut);
  max-width:min(660px,58vw);
  opacity:0;text-shadow:var(--tshadow);
}
/* Layer 2: the per-band scrim, anchored on the text column, riding --k */
.band::before{
  content:"";position:absolute;inset:-6% -20% -6% -12%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 66% 68% at 30% 50%,rgba(5,5,10,.70) 0%,rgba(5,5,10,.48) 46%,rgba(5,5,10,0) 76%);
}
.band-3::before{background:radial-gradient(ellipse 66% 68% at 30% 50%,rgba(5,5,10,.72) 0%,rgba(5,5,10,.5) 46%,rgba(5,5,10,0) 76%)}
.band .btn{text-shadow:none}

.band-line{font-family:"Sora",sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(34px,5.3vw,74px);max-width:15ch;margin:0}
.band-head{font-size:clamp(36px,5.6vw,80px);max-width:14ch;margin:0}
.band-sub{margin-top:22px;max-width:44ch;color:#D3DCEC;font-size:clamp(16px,1.25vw,19px);line-height:1.6}
.band-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:baseline;pointer-events:auto}

/* split spans */
.vis{display:block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) blur-to-sharp, band 1 */
.e-blur{position:relative;display:block}
.e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));will-change:opacity}
.e-blur .sharp{position:relative;opacity:var(--k,0);will-change:opacity}

/* (b) grid snap-align, band 2 */
.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))}

/* (d) word-punch with overshoot, band 3 */
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6;color:var(--accent)}

/* (e) word-by-word rise into a staged settle, band 4 */
.e-settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 26px))}
.band-4 .band-sub{opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0)) * 14px))}
.band-4 .band-cta{opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0)) * 14px))}

/* --- the designed static hero --- */

.static-hero{position:absolute;inset:0;display:none;align-items:center;z-index:3}
.static-inner{padding:0 var(--gut);max-width:640px}
.static-head{font-size:clamp(33px,8.6vw,54px);max-width:13ch;text-shadow:var(--tshadow)}
.static-sub{margin-top:18px;max-width:38ch;color:#D3DCEC;text-shadow:0 1px 10px rgba(5,5,10,.85)}
.static-hero .btn{margin-top:28px}
.static-note{margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.04em;color:var(--text-secondary)}

.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4}
.cue span{display:block;width:1px;height:46px;background:linear-gradient(to bottom,transparent,var(--accent));animation:cue 3.2s var(--ease-soft) -.8s infinite}
@keyframes cue{0%,100%{opacity:.15;transform:scaleY(.5);transform-origin:top}50%{opacity:.85;transform:scaleY(1);transform-origin:top}}

/* ============================================================
   THE FIVE STATIC-HERO GATES
   These five strings must stay character-for-character identical
   to the GATES array in app.js.
   ============================================================ */

@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:100svh;height:100vh}
  /* This path never requests the desktop poster and never the video.
     A wide static hero gets the 16:9 resting frame. */
  .stage{position:relative;background:#070D18 url("hero-ending.jpg") 50% 50%/cover no-repeat}
  .bands,.loader,#hero-video,.cue{display:none}
  .static-hero{display:flex;align-items:center}
  .scrim{background:radial-gradient(ellipse 130% 90% at 40% 55%,rgba(10,10,18,0) 30%,rgba(10,10,18,.5) 100%)}
  .vignette{background:linear-gradient(90deg,rgba(7,12,22,.9) 0%,rgba(7,12,22,.62) 40%,rgba(7,12,22,.12) 76%)}
}

/* A portrait screen gets a small portrait crop instead, and the copy sits
   above the mint glow that rests low in that frame. */
@media (max-width: 720px) and (orientation: portrait),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse){
  .stage{background-image:url("hero-still.jpg")}
  .vignette{background:linear-gradient(180deg,rgba(7,12,22,.88) 0%,rgba(7,12,22,.72) 30%,rgba(7,12,22,.4) 58%,rgba(7,12,22,.58) 100%)}
  .static-hero{align-items:flex-start}
  .static-inner{padding-top:clamp(92px,15vh,150px)}
}

/* scrub-capable but short: keep the scrub, drop the overlays with no room */
@media (max-height:560px) and (min-width:721px){
  .cue{display:none}
  .band-sub{display:none}
}

/* the static hero on a short screen: centre it, trim the block, clear the nav */
@media (max-height:620px){
  .static-hero{align-items:center}
  .static-inner{padding-top:44px}
  .static-head{font-size:clamp(27px,5.4vh,40px)}
  .static-sub{margin-top:12px;font-size:15px}
  .static-hero .btn{margin-top:18px}
  .static-note{margin-top:10px}
}

/* ============================================================
   Shared section furniture
   ============================================================ */

.sec{position:relative;padding-block:clamp(84px,11vw,168px)}

/* Noen kickere er ekte h2-overskrifter, så de må nulle ut h-reglene */
.kicker{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:12.5px;line-height:1.5;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}

/* "Eksempel" og "Planlagt": merkelapper som skal være umulige å overse */
/* Solid bakgrunn, ikke gjennomsiktig, så kontrasten er den samme uansett
   hva som ligger bak. Målt til 6,8 mot 1. */
.tag-example{display:inline-block;margin-right:9px;padding:3px 8px;border-radius:5px;
  font-size:11px;letter-spacing:.14em;color:#8FA8F2;
  background:#16233C;border:1px solid #3A5488}

.status-pill{display:inline-flex;align-items:center;margin-left:2px;padding:5px 11px;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#C4D0E4;background:rgba(12,22,40,.88);border:1px solid var(--line-int);white-space:nowrap}

.lede-note{margin-top:14px;max-width:56ch;font-size:14.5px;line-height:1.65;color:#7E8DA8}

.plan-planned{display:inline-block;margin-left:10px;vertical-align:middle;
  font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#8FA8F2}

.lede{color:var(--text-secondary);font-size:clamp(17px,1.35vw,20px);max-width:56ch;margin-top:22px}

/* entrance choreography */
.reveal .part{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.reveal.in .part{opacity:1;transform:none}
.reveal .part:nth-child(2){--d:90ms}
.reveal .part:nth-child(3){--d:180ms}
.reveal .part:nth-child(4){--d:270ms}
.reveal .part:nth-child(5){--d:360ms}
.reveal .part:nth-child(6){--d:450ms}
.reveal.done .part{--d:0ms !important}

/* ============================================================
   Ansvaret
   ============================================================ */

.sec-duty .duty-head{font-size:clamp(30px,4.3vw,60px);max-width:16ch}
.facts{margin-top:clamp(46px,6vw,84px);display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fact{background:var(--canvas);padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,34px);position:relative;overflow:hidden}
.fact::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .8s var(--ease)}
.fact:hover::after{opacity:.7}
.fig{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:clamp(19px,1.9vw,26px);color:var(--text-primary);letter-spacing:-.01em}
.fig-note{margin-top:12px;color:var(--text-secondary);font-size:15px;line-height:1.6;max-width:32ch}

/* ============================================================
   Slik funker det
   ============================================================ */

.steps{position:relative;padding-left:clamp(0px,4vw,56px)}
.thread{position:absolute;left:clamp(-2px,1.2vw,18px);top:8px;bottom:8px;width:2px;height:auto;overflow:visible}
#thread-line{filter:drop-shadow(0 0 6px rgba(53,205,172,.55))}

.step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,72px);align-items:center;
  padding-block:clamp(36px,5vw,72px)}
.step-flip .step-text{order:2}
.step-no{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px}
.step-text h3{font-size:clamp(25px,3.1vw,42px);max-width:14ch}
.step-text p{margin-top:16px;color:var(--text-secondary);max-width:42ch}
.step-img{position:relative;border-radius:16px;overflow:hidden;background:var(--panel)}
.step-img::after{content:"";position:absolute;inset:0;border-radius:16px;border:1px solid var(--line);pointer-events:none}
.step-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transform:scale(1.001);transition:transform 1.4s var(--ease)}
.step-img:hover img{transform:scale(1.045)}

/* ============================================================
   Prøv blikket
   ============================================================ */

.sec-try{padding-block:0}
.try{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;overflow:hidden;
  border-block:1px solid var(--line)}
.try-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.try-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,22,.88) 0%,rgba(7,12,22,.5) 44%,rgba(7,12,22,0) 78%),linear-gradient(0deg,rgba(7,12,22,.62),transparent 55%)}

.try-line{position:absolute;left:0;right:0;height:2px;top:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 22px 3px rgba(53,205,172,.5);opacity:calc(.25 + .75*var(--p,0))}

.try-find{position:absolute;right:clamp(18px,6vw,120px);display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateX(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.try-find.on{opacity:1;transform:none}
.try-find-1{top:15%}
.try-find-2{top:35%}
.try-find-3{top:55%}
.try-find-4{top:75%}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(53,205,172,.16);flex:none;
  margin-top:7px}
.chip{background:rgba(8,8,15,.6);border:1px solid rgba(96,96,126,.34);border-radius:11px;backdrop-filter:blur(10px);
  padding:9px 14px;text-shadow:0 1px 3px rgba(5,5,10,.85)}
.chip-t{display:block;font-family:"Manrope",sans-serif;font-size:14px;font-weight:500;line-height:1.35;
  color:var(--text-primary);white-space:nowrap}
.chip-c{display:block;margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--accent);white-space:nowrap}

.try-copy{position:relative;padding:clamp(34px,5vw,74px) var(--gut);max-width:min(620px,64vw)}
.try-copy h2{font-size:clamp(27px,3.5vw,48px);max-width:13ch;text-shadow:var(--tshadow)}
.try-body{margin-top:16px;color:#C8D3E6;max-width:38ch;text-shadow:0 1px 8px rgba(5,5,10,.8)}

.hold{margin-top:28px;position:relative;overflow:hidden;cursor:pointer;
  background:transparent;color:var(--text-primary);border:1px solid var(--line-int);border-radius:999px;
  padding:14px 30px;min-height:48px;font-family:"Sora",sans-serif;font-weight:600;font-size:15.5px;
  transition:border-color .4s var(--ease),color .4s var(--ease);-webkit-user-select:none;user-select:none;touch-action:none}
.hold:hover{border-color:var(--accent)}
.reveal .hold.part{transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),border-color .4s var(--ease),color .4s var(--ease)}
.hold-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);
  transform:scaleX(var(--p,0));transform-origin:left;opacity:.92}
.hold-label{position:relative;transition:color .35s var(--ease)}
.hold.filled .hold-label{color:#08111F}
.try-done{margin-top:20px;max-width:34ch;color:var(--accent);font-size:15.5px;
  opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.try-done.on{opacity:1;transform:none}

/* ============================================================
   Pris
   ============================================================ */

.pris-head h2{font-size:clamp(28px,3.8vw,54px);max-width:14ch}
.pris-head p{margin-top:18px;color:var(--text-secondary);max-width:44ch;font-size:clamp(16px,1.25vw,19px)}

/* The cards keep their own height on purpose: the free one is short, the paid
   one is long, and that difference is the argument. */
.plans{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2vw,28px);align-items:start}
.plan{position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(170deg,var(--panel),rgba(11,20,36,.55));
  padding:clamp(26px,3vw,44px)}
.plan-lead{border-color:var(--accent-muted);background:linear-gradient(170deg,var(--panel-2),rgba(11,20,36,.6))}
.plan-lead::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.plan-lead::after{content:"";position:absolute;left:-30%;right:-30%;top:-70%;height:180%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(53,205,172,.15),transparent 62%);opacity:.5}
.sec-pris.live .plan-lead::after{animation:planglow 11s var(--ease-soft) -3s infinite alternate}
@keyframes planglow{from{opacity:.28}to{opacity:.85}}

.plan-tag{position:relative;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary)}
.plan-lead .plan-tag{color:var(--accent)}
.plan-price{position:relative;font-family:"Sora",sans-serif;font-weight:700;line-height:1;
  font-size:clamp(34px,4vw,52px);letter-spacing:-.025em;margin-top:14px}
.plan-sub{position:relative;margin-top:11px;color:var(--text-secondary);font-size:15px;max-width:30ch}
.plan-list{position:relative;list-style:none;margin:28px 0 0;padding:0;display:grid;gap:13px}
.plan-list li{position:relative;padding-left:27px;font-size:15.5px;line-height:1.55;color:#C4D0E4;max-width:34ch}
.plan-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--accent-muted)}
.plan-lead .plan-list li::before{border-color:var(--accent);background:rgba(53,205,172,.24)}

/* the paid column carries its weight in words, not just ticks */
.plan-list-rich{gap:21px}
.plan-list-rich li{max-width:42ch;font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.plan-list-rich li::before{top:.42em}
.plan-list-rich li strong{display:block;margin-bottom:5px;font-family:"Sora",sans-serif;font-weight:600;
  font-size:16.5px;line-height:1.3;letter-spacing:-.012em;color:var(--text-primary)}

.plan-foot{position:relative;margin-top:26px;font-size:14.5px;line-height:1.6;color:#7E8DA8;max-width:32ch}
.plan .btn{position:relative;margin-top:32px;align-self:flex-start}

.plan-anchor{margin-top:clamp(26px,3vw,40px);font-family:"IBM Plex Mono",monospace;font-size:13px;
  line-height:1.7;letter-spacing:.02em;color:var(--text-secondary);max-width:58ch}

/* ============================================================
   Selger du
   ============================================================ */

.sell-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,78px);align-items:center}
.sell-img{border-radius:16px;overflow:hidden;position:relative;background:var(--panel)}
.sell-img::after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:16px;pointer-events:none}
.sell-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sell-text h2{font-size:clamp(28px,3.6vw,50px);max-width:11ch}
.sell-text p{margin-top:18px;color:var(--text-secondary);max-width:42ch}

/* ============================================================
   Spørsmål
   ============================================================ */

.faq{margin-top:8px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);
  padding:24px 40px 24px 0;position:relative;font-family:"Sora",sans-serif;font-weight:600;
  font-size:clamp(17px,1.6vw,22px);letter-spacing:-.015em;transition:color .35s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.q-no{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--accent);flex:none}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--line-int);border-bottom:1.5px solid var(--line-int);
  transform:translateY(-70%) rotate(45deg);transition:transform .45s var(--ease),border-color .35s var(--ease)}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--accent)}
.qa .a{overflow:hidden;height:auto;transition:height .5s var(--ease)}
.qa .a p{padding:0 clamp(30px,5vw,80px) 28px;color:var(--text-secondary);max-width:64ch}

/* ============================================================
   CTA
   ============================================================ */

.sec-cta{text-align:center;overflow:hidden;padding-block:clamp(100px,13vw,190px)}
.cta-mark{position:absolute;left:50%;top:50%;width:min(640px,86vw);height:auto;
  transform:translate(-50%,-50%);color:var(--panel-2);opacity:.45;z-index:-1}
.sec-cta.live .cta-mark{animation:ctapulse 12s var(--ease-soft) -3s infinite alternate}
@keyframes ctapulse{from{opacity:.32}to{opacity:.6}}
.cta-inner h2{font-size:clamp(31px,4.6vw,66px);max-width:17ch;margin-inline:auto}
.cta-inner p{margin-top:20px;color:var(--text-secondary);max-width:54ch;margin-inline:auto}
.cta-inner .btn-lg{margin-top:36px}

.cta-mail{margin-top:30px !important;font-size:clamp(17px,1.4vw,20px) !important;
  color:var(--text-primary) !important}
.cta-mail a{color:var(--accent);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1.5px;transition:color .3s var(--ease)}
.cta-mail a:hover{color:var(--accent-hover)}

.cta-note{margin-top:26px !important;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px !important;line-height:1.8;letter-spacing:.02em;color:#8A99B4 !important;
  max-width:46ch !important}

@media (pointer:coarse){ .cta-mail a{display:inline-block;min-height:44px;line-height:44px} }

/* ============================================================
   Footer
   ============================================================ */

.foot{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,66px)}
.foot-grid{display:grid;gap:clamp(24px,3vw,36px)}
.foot-top{display:flex;flex-wrap:wrap;gap:20px clamp(22px,4vw,56px);align-items:baseline;
  justify-content:space-between}

.foot-links{display:flex;flex-wrap:wrap;gap:10px clamp(14px,2.2vw,26px);font-size:15px;color:var(--text-secondary)}
.foot-links a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(152,167,192,.4);
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.foot-links a:hover{color:var(--text-primary);text-decoration-color:var(--accent)}

/* Bedriftsopplysninger. Ehandelsloven § 8 krever dem, og de skal nås fra hver side. */
.foot-fine{font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.85;letter-spacing:.01em;
  color:#8A99B4;max-width:76ch;padding-top:clamp(20px,2.5vw,28px);border-top:1px solid var(--line)}
.foot-org{color:#B4C2D8}
.foot-org a{text-decoration:underline;text-underline-offset:3px}
.foot-org a:hover{color:var(--accent)}
.foot-fine p+p{margin-top:8px}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:900px){
  .nav-links{display:none}
  .step{grid-template-columns:1fr;gap:24px}
  .step-flip .step-text{order:0}
  .plans{grid-template-columns:1fr}
  .sell-grid{grid-template-columns:1fr}
  .sell-img{order:2}
  /* Under to kolonner går funnene inn i vanlig flyt over teksten, så de
     aldri kan havne oppå overskriften uansett hvor høy seksjonen blir. */
  .try{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    min-height:min(86vh,760px);padding-top:clamp(26px,5vh,56px)}
  .try-find{position:relative;top:auto;right:auto;left:auto;margin:0 var(--gut) 12px;align-self:flex-start}
  .try-copy{max-width:100%;margin-top:auto}
  .foot-top{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px){
  .chip-t,.chip-c{white-space:normal}
  .chip-t{font-size:13.5px}
  .try-find{margin-bottom:10px}
}

/* ============================================================
   Dokumentsider: personvern, vilkår, angrerett, cookies
   ============================================================ */

.doc{background:var(--canvas)}
.doc .doc-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;
  padding:16px var(--gut);background:rgba(9,17,31,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.doc .doc-nav .brand{margin-right:auto}

.doc-wrap{width:min(760px,100% - var(--gut)*2);margin-inline:auto;
  padding-block:clamp(48px,7vw,96px) clamp(60px,8vw,110px)}

.doc-wrap h1{font-size:clamp(30px,4.2vw,50px);max-width:20ch}
.doc-updated{margin-top:18px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#8A99B4}

.doc-wrap h2{margin-top:clamp(40px,5vw,64px);font-size:clamp(21px,2.3vw,28px);max-width:26ch}
.doc-wrap h3{margin-top:32px;font-size:clamp(17px,1.7vw,20px);font-weight:600;max-width:34ch}
.doc-wrap p,.doc-wrap li{color:#C4D0E4;font-size:16.5px;line-height:1.75;max-width:68ch}
.doc-wrap p{margin-top:16px}
.doc-wrap ul,.doc-wrap ol{margin:16px 0 0;padding-left:24px;display:grid;gap:10px}
.doc-wrap li::marker{color:var(--accent)}
.doc-wrap a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.doc-wrap a:hover{color:var(--accent-hover)}
.doc-wrap strong{color:var(--text-primary);font-weight:500}

.doc-lead{margin-top:24px !important;font-size:18px !important;color:var(--text-primary) !important}

.doc-box{margin-top:28px;padding:22px 24px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line)}
.doc-box.warn{border-color:rgba(255,138,107,.5);background:rgba(255,138,107,.07)}
.doc-box p:first-child{margin-top:0}

.doc-table{margin-top:24px;width:100%;border-collapse:collapse;text-align:left}
.doc-table th,.doc-table td{padding:13px 14px;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.6;vertical-align:top;color:#C4D0E4}
.doc-table th{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#8A99B4}
.doc-table td:first-child{color:var(--text-primary)}
@media (max-width:620px){
  .doc-table,.doc-table tbody,.doc-table tr,.doc-table td{display:block;width:100%}
  .doc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .doc-table tr{padding-block:14px;border-bottom:1px solid var(--line)}
  .doc-table td{border:0;padding:3px 0}
  .doc-table td::before{content:attr(data-l) ": ";color:#8A99B4}
}

.doc .foot{margin-top:0}

/* ============================================================
   Pause everything that is not being looked at
   ============================================================ */

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   Reduced motion, honored completely
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .reveal .part{opacity:1 !important;transform:none !important}
  .try-find{opacity:1 !important;transform:none !important}
  .try-done{opacity:1 !important;transform:none !important}
  .try-line{top:100%;opacity:1}
  .hold-fill{transform:scaleX(1)}
  .band .w,.band .c{opacity:1 !important;transform:none !important}
  .cue{display:none}
}

/* The pinned state the JS applies when reduced motion flips on mid-session */
.pinned .part{opacity:1 !important;transform:none !important}
.try.pinned .try-find{opacity:1;transform:none}
.try.pinned .try-done{opacity:1;transform:none}