/* snuepi: the shared layer for every public page (the front page and the rest of the site).
   Fonts, tokens, buttons, the preview notice, the header and the footer. Lifted unchanged from the front page (public/home.css),
   which is the design reference: logo blues only (#0A2E8F #033EA9 #0051BA #0078CB #0094D7 #2FD0F2, ink #112233), light only,
   hairline rings, one easing curve, ink pill buttons, sentence-case small labels, two text greys. No inline styles (CSP).
   Loaded first by every page: public/landing.html (then home.css) and every other page (then site.css and the page sheet).
   The header and footer markup come from one place too: src/site-chrome.mjs. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonter/geist-variabel.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonter/geist-mono-variabel.woff2') format('woff2')}

:root{
  color-scheme:light;
  /* surfaces: an off-white page and a two-step tray tinted toward the logo blue */
  --bg:#FCFCFD;
  --surface:#F4F5F7;
  --surface-2:#ECEEF1;
  --ink:#112233;
  /* two text levels only: ink, and one grey; the grey second half of a headline is a deliberate lighter step */
  --ink-2:#6B7686;
  --ink-3:#6B7686;
  --soft:#8A95A6;
  --line:rgba(17,34,51,.09);
  --line-2:rgba(17,34,51,.06);
  --navy:#0A2E8F;
  --accent:#0051BA;
  --accent-soft:#EAF2FC;
  --cyan:#2FD0F2;
  --night:#07142F;
  --night-2:#0C1D40;
  --night-ink:#F2F6FC;
  --night-ink-2:#A9B9D6;
  --night-hair:rgba(255,255,255,.09);
  /* hairline rings + faint lift, never above 4% except the ring */
  --ring:0 0 0 .5px rgba(17,34,51,.14);
  --shadow-sm:0 0 0 .5px rgba(17,34,51,.13),0 1px 1px rgba(17,34,51,.04),0 2px 4px rgba(17,34,51,.04);
  --shadow:0 0 0 .5px rgba(17,34,51,.12),0 1px 2px rgba(17,34,51,.04),0 8px 24px -8px rgba(17,34,51,.08),0 32px 64px -32px rgba(10,46,143,.16);
  --shadow-float:0 0 0 .5px rgba(17,34,51,.12),0 2px 4px rgba(17,34,51,.04),0 12px 32px -12px rgba(17,34,51,.14);
  /* radius vocabulary */
  --r-lg:20px;
  --r-md:12px;
  --r-pill:999px;
  /* type */
  --display:"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-16:16px;--fs-18:18px;--fs-22:22px;
  --fs-h2:clamp(32px,3.1vw,44px);
  --fs-h1:clamp(40px,4.15vw,60px);
  /* motion: one curve for entrances and hovers (the hero and the front-page diagrams keep their own loops) */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-reveal:600ms;
  --t-fast:150ms;
  --t-med:300ms;
  /* layout */
  --max:1176px;
  --gutter:32px;
  --space-section:120px;
  --space-band:56px;
  /* a fine film grain (SVG turbulence) laid over the blue art so it reads as material, not a flat gradient */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* a white card on the off-white page (the rest of the site; the front page sets #fff where it needs it) */
  --card:#fff;
}
/* the chrome is self-contained (zero specificity, so every rule below wins): pages without the front page reset still get plain links, block logos and no list indents */
:where(.nav,footer,.status) a{text-decoration:none}
:where(.nav,footer) img{display:block;max-width:100%}
:where(.nav,footer) :where(nav,p){margin:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:16px}
.wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* buttons: two sizes of pill, never bold; ink primary, white secondary with a hairline */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--r-pill);font-size:var(--fs-15);font-weight:450;letter-spacing:.005em;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--navy)}
.btn-ghost{color:var(--ink);background:#fff;box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--surface)}
.btn .arr{transition:transform var(--t-med) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* status: the preview notice, required and kept quiet */
.status{background:var(--bg);color:var(--ink-3);font-size:var(--fs-13);line-height:1.5;box-shadow:inset 0 -.5px 0 rgba(17,34,51,.12)}
.status-in{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:10px var(--gutter);min-height:40px;display:flex;align-items:flex-start;gap:10px}
.status-in::before{content:"";width:6px;height:6px;align-self:flex-start;margin-top:calc(.75em - 3px);border-radius:50%;background:var(--accent);flex:none}
.status b{color:var(--ink);font-weight:500}
.beta-av .kun-beta,.beta-pa .kun-ikke-beta{display:none}
.pris-gratis .kun-gebyr,.pris-gebyr .kun-gratis{display:none!important}
.nav{position:sticky;top:0;z-index:50;background:rgba(252,253,254,0);box-shadow:0 .5px 0 transparent;transition:background var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),backdrop-filter var(--t-med) var(--ease)}
.nav.scrolled{background:rgba(252,252,253,.86);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 .5px 0 rgba(17,34,51,.12)}
/* over the front page's dark bands (#how, #promise) the header turns dark too, with the light logo (public/ikoner/logo-lys.svg) */
.nav.scrolled.dark{background:rgba(7,20,47,.72);box-shadow:0 .5px 0 rgba(255,255,255,.12)}
.nav.dark .top-nav,.nav.dark .nav-cta .login{color:#fff}
.nav.dark .top-nav a:hover,.nav.dark .top-nav a.on,.nav.dark .nav-cta .login:hover,.nav.dark .menu summary:hover,.nav.dark .menu[open] summary{background:rgba(255,255,255,.1)}
.nav.dark .btn-primary{background:#fff;color:var(--ink)}
.nav.dark .btn-primary:hover{background:var(--night-ink)}
.nav.dark .menu summary i,.nav.dark .menu summary i::before,.nav.dark .menu summary i::after{background:#fff}
.nav .brand img.lys{display:none}
.nav.dark .brand img.lys{display:block}
.nav.dark .brand img.mork{display:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:26px;width:auto}
.top-nav{display:flex;gap:4px;font-size:var(--fs-14);color:var(--ink)}
.top-nav a{padding:6px 12px;border-radius:var(--r-pill);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.top-nav a:hover{background:rgba(17,34,51,.05)}
.top-nav a.on{background:rgba(17,34,51,.05)}
.nav-cta{display:flex;align-items:center;gap:8px;font-size:var(--fs-14)}
.nav-cta .login{color:var(--ink);height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--r-pill);transition:background var(--t-fast) var(--ease)}
.nav-cta .login:hover{background:rgba(17,34,51,.05)}
.nav-cta .btn{height:36px;padding:0 16px;font-size:var(--fs-14)}
.menu{display:none;position:relative}
.menu summary{list-style:none;width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.menu summary:hover,.menu[open] summary{background:rgba(17,34,51,.05)}
.menu summary::-webkit-details-marker{display:none}
.menu summary i,.menu summary i::before,.menu summary i::after{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;position:relative}
.menu summary i::before,.menu summary i::after{content:"";position:absolute;left:0}
.menu summary i::before{top:-5px}.menu summary i::after{top:5px}
.menu nav{position:absolute;right:0;top:44px;min-width:220px;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-float);padding:6px;display:grid}
.menu nav a{padding:10px 12px;border-radius:8px;font-size:var(--fs-15);transition:background var(--t-fast) var(--ease)}
.menu nav a:hover{background:var(--surface)}

/* footer */
footer{box-shadow:inset 0 .5px 0 rgba(17,34,51,.12);padding:72px 0 40px;font-size:var(--fs-14)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,max-content);gap:56px}
.fcol{display:grid;gap:24px;align-content:start}
/* the eight sectors sit in two compact columns */
.fgrid nav[aria-label^="Who"]{grid-template-columns:repeat(2,max-content);column-gap:28px}
.fgrid nav[aria-label^="Who"] b{grid-column:1/-1}
.fgrid h4,.fgrid nav b{font-family:var(--sans);font-weight:500;font-size:var(--fs-13);color:var(--ink);margin-bottom:6px;display:block}
.fgrid nav{display:grid;gap:0;align-content:start}
.fgrid nav a{color:var(--ink-3);display:inline-flex;align-items:center;min-height:32px;padding:4px 0;font-size:var(--fs-13);white-space:nowrap;transition:color var(--t-fast) var(--ease)}.fgrid nav a:hover{color:var(--ink)}
.fgrid .about{color:var(--ink-3);max-width:220px;margin-top:16px;font-size:var(--fs-13);line-height:1.55}
.fgrid .brand img{height:24px}
/* the footer's low "More" group: free tools, the report, the business on-ramp and the sector pages, kept for search */
.fmore{margin-top:48px;padding-top:20px;box-shadow:inset 0 .5px 0 rgba(17,34,51,.1);display:grid;gap:4px}
.fmore > b{font-family:var(--sans);font-weight:500;font-size:var(--fs-13);color:var(--ink-3);margin-bottom:4px}
.fmore nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.fmore nav b{font-weight:500;font-size:12px;color:var(--ink-3);min-width:110px}
.fmore nav a{color:var(--ink-3);display:inline-flex;align-items:center;min-height:30px;font-size:12px;transition:color var(--t-fast) var(--ease)}.fmore nav a:hover{color:var(--ink)}
.legal{margin-top:32px;padding-top:20px;box-shadow:inset 0 .5px 0 rgba(17,34,51,.1);display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink-3);font-size:var(--fs-13);flex-wrap:wrap}
.legal-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.legal a{color:var(--ink-3);display:inline-flex;align-items:center;min-height:32px;padding:6px 0;transition:color var(--t-fast) var(--ease)}
.legal a:hover{color:var(--ink)}

/* responsive: the same breakpoints as the front page */
@media (max-width:1040px){
  :root{--space-section:104px;--space-band:56px}
  .top-nav{display:none}
  .menu{display:block}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid > div:first-child{grid-column:1/-1}
  .fgrid nav[aria-label^="Who"]{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--gutter:20px;--space-section:80px;--space-band:40px;--fs-h1:34px;--fs-h2:30px}
  .status{font-size:12px}
  .status-in{gap:8px;min-height:40px;padding:8px var(--gutter)}
  .status-more{display:none}
  .nav .wrap{height:56px;gap:12px}
  .brand img{height:22px}
  .nav-cta{gap:4px}
  .nav-cta .login{display:none}
  .nav-cta .btn{height:34px;padding:0 14px;font-size:var(--fs-13)}
  .fgrid nav[aria-label^="Who"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid nav[aria-label^="Who"] a{white-space:normal}
  .fcol{display:contents}
  .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .fgrid nav a{white-space:normal}
  footer{padding:56px 0 32px}
}
@media (max-width:420px){
  .nav-cta .btn{padding:0 12px}
}