/* Sensa — site styles. Tokens come from the Squarespace theme the site used until 2026. */
/* ---------------------------------------------------------------------------
   Colour system. Dark is Sensa's default look, so it lives in bare :root and
   applies unless the visitor asks for light with the header toggle.
     :root                     -> the complete dark palette (the default)
     [data-theme="light"]      -> light, chosen with the toggle
   Components never use a colour literal. If a colour is not in these blocks,
   it is a bug. Run tools/contrast.py after any change here.
   --------------------------------------------------------------------------- */
:root{
  --paper:#1a2427;
  --surface:#222d30;
  --surface-2:#293437;
  --wash:#1d3c45;
  --ink:#e8eff0;
  --ink-2:#b2c2c4;
  --ink-3:#97a9ac;
  --rule:#667d81;
  --rule-soft:#4a5f64;
  --rule-hair:#2b383b;
  --field:#738a8e;
  --accent:#73eea7;
  --on-accent:#05271a;
  --invert:#e8eff0;
  --on-invert:#1a2427;
  --fill-sky:#183f52;
  --on-fill-sky:#cfe7fa;
  --fill-mint:#1a3d2c;
  --on-fill-mint:#c9ebd8;
  --fill-bright:#1a3a43;
  --on-fill-bright:#cfe8ed;
  --fill-deep:#2e3c40;
  --on-fill-deep:#e8eff0;
  --good:#5ec489;
  --bad:#e8837a;
  --header-bg:rgba(26,36,39,.86);
  --overlay:rgba(0,0,0,.62);
  --shadow:rgba(0,0,0,.5);
  --focus:#8bcbff;
  --hero-base:#1a2427;
  --hero-image:linear-gradient(135deg,#1c343b 0%,#1a2427 48%,#1e2c39 100%);
  --hero-photo:url(../img/sea-1.webp);
  --hero-scrim:linear-gradient(to bottom,rgba(0,0,0,.24) 0%,rgba(0,0,0,.42) 40%,rgba(0,0,0,.58) 100%);
  --focus-halo:#0b1418;
  --core-bg:#2a3a3e;
  --core-ink:#e8eff0;
  --core-edge:#8ccfff;
  --edge-sky:#8bcbff;
  --edge-mint:#9aebb8;
  --edge-bright:#b8e8ee;
  --edge-deep:#9fb3b7;
  --photo-ink:#16211f;
  --art-filter:brightness(0) invert(1);
  --on-photo:#ffffff;
  --sans:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Azeret Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:14px;
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  color-scheme:dark;
}

/* Light, chosen with the header toggle. */
:root[data-theme="light"]{
  --paper:#f7f9fa;
  --surface:#ffffff;
  --surface-2:#eaf1f3;
  --wash:#d9f2f4;
  --ink:#16211f;
  --ink-2:#47585c;
  --ink-3:#4f6366;
  --rule:#7d9094;
  --rule-soft:#c2d0d3;
  --rule-hair:#dae3e5;
  --field:#3d4e52;
  --accent:#04844d;
  --on-accent:#f2fbf6;
  --invert:#16211f;
  --on-invert:#f7f9fa;
  --fill-sky:#8bcbff;
  --on-fill-sky:#0d1c28;
  --fill-mint:#9aebb8;
  --on-fill-mint:#0d2416;
  --fill-bright:#ddeff2;
  --on-fill-bright:#16211f;
  --fill-deep:#2f3f42;
  --on-fill-deep:#f2f7f8;
  --good:#146c3a;
  --bad:#9b2c22;
  --header-bg:rgba(247,249,250,.86);
  --overlay:rgba(0,0,0,.55);
  --shadow:rgba(20,32,34,.13);
  --focus:#16211f;
  --hero-base:#eaf1f3;
  --hero-image:url(../img/bg.webp);
  --art-filter:none;
  --focus-halo:#ffffff;
  --core-bg:#16211f;
  --core-ink:#f7f9fa;
  --core-edge:#16211f;
  --edge-sky:#2f6d99;
  --edge-mint:#2d7a4e;
  --edge-bright:#4a8f99;
  --edge-deep:#8fa5a9;
  --photo-ink:#16211f;
  --hero-scrim:linear-gradient(to bottom,rgba(0,0,0,.24) 0%,rgba(0,0,0,.42) 40%,rgba(0,0,0,.58) 100%);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 var(--sans);color:var(--ink);background:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--sans);font-weight:400;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-0.01em}
h1{font-size:clamp(34px,4.6vw,58px)}
h2{font-size:clamp(26px,3.2vw,40px)}
h3{font-size:clamp(22px,2.4vw,30px)}
h4{font-size:19px;font-weight:600}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.45}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:820px}
section{padding-block:clamp(56px,7vw,104px)}
.bg-light{background:var(--surface-2)}
.bg-bright{background:var(--wash)}
.bg-white{background:var(--paper)}
.bg-dark{background:var(--invert);color:var(--on-invert)}
.bg-gradient{background-color:var(--hero-base);background-image:var(--hero-image);background-size:cover;background-position:center;background-repeat:no-repeat}
.center{text-align:center}
.mono{font-family:var(--mono)}
.eyebrow{font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
.muted{color:var(--ink-2)}

/* buttons */
.btn{display:inline-block;font-size:14px;line-height:1.2;padding:14px 26px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .12s,background .15s}
.btn:hover{transform:translateY(-1px)}
/* Two tones, because a focused control can sit on the page or inside a dark
   panel. The halo fills the offset gap, the outline sits just outside it, so
   one of the two always contrasts with whatever is behind. */
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 4px var(--focus-halo)}
/* HOPP TIL INNHOLDET (WCAG 2.4.1, docs/wcag-2026-10-07.md funn 15, 7 Okt 2026): foerste lenke paa siden, usynlig til
   den faar fokus, da staar den oeverst til venstre over menyen. */
.ai-hopp{position:fixed;left:16px;top:12px;z-index:1000;padding:10px 16px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:15px;text-decoration:none;transform:translateY(-200%)}
.ai-hopp:focus,.ai-hopp:focus-visible{transform:none}
/* Ikke i utskrift (17 Okt 2026, Mortens PDF av sidene): en fast lenke staar paa hvert ark og dekket teksten under. */
@media print{.ai-hopp{display:none}}
/* STOPP BEVEGELSE (WCAG 2.2.2, funn 5): valget i bunnen gjoer det samme som redusert bevegelse i systemet. */
html[data-ro] *,html[data-ro] *::before,html[data-ro] *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
/* FOKUS UNDER PILLEN (WCAG 2.4.11, funn 12): «Book en demo» nederst til hoeyre dekker aldri det som har fokus. */
html{scroll-padding-bottom:84px}
/* HOEY KONTRAST (WCAG 1.4.11, funn 10): i Windows hoey kontrast er den egne pekeren borte og systemets peker tilbake. */
@media (forced-colors:active){html.boom.has-tip,html.boom.has-tip *{cursor:auto!important}html.boom.has-tip a,html.boom.has-tip button,html.boom.has-tip summary,html.boom.has-tip label{cursor:pointer!important}.boom-tip-w,.boom-dot{display:none!important}}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-dark{background:var(--invert);color:var(--on-invert)}
.btn-light{background:var(--surface);color:var(--ink)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--rule-hair)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a:not(.btn){font-size:15px;text-decoration:none;color:var(--ink)}
.nav .btn{font-size:13.5px;text-decoration:none}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
.nav .btn{padding:12px 22px}
.nav-toggle{display:none;background:none;border:1px solid var(--field);border-radius:8px;padding:8px 10px;font-size:13px;cursor:pointer}
@media (max-width:820px){
  .nav-toggle{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--surface);flex-direction:column;align-items:flex-start;padding:18px var(--gutter) 24px;border-bottom:1px solid var(--rule-hair);gap:16px}
  .nav.open{display:flex}
}

/* hero */
.hero{padding-block:clamp(72px,10vw,150px)}
.hero h1{max-width:20ch;margin-inline:auto}
.hero .lead{max-width:44ch;margin:26px auto 0}
.hero .cta{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-left h1,.hero-left .lead{margin-inline:0}

/* split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.split .text{max-width:56ch}
.split .text h2,.split .text h3{margin-bottom:22px}
.split img{width:100%;height:100%;max-height:560px;object-fit:cover;border-radius:220px 24px 24px 220px}
@media (max-width:820px){.split{grid-template-columns:1fr}.split img{max-height:320px;border-radius:24px}}

/* cards */
.cards{display:grid;gap:18px;margin-top:34px}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cards-3,.cards-4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:26px 26px 28px}
.card h4{margin-bottom:12px}
.card p{font-size:15.5px}
.card-soft{border-color:var(--rule-soft)}
.result{max-width:560px;margin:34px auto 0;text-align:center;background:var(--wash)}
.result h4{font-size:22px;font-weight:400}
.result strong{display:block;font-size:18px;margin-bottom:10px}

/* use case cards */
.case{display:flex;flex-direction:column;padding:0;overflow:hidden}
.case .art{padding:26px 26px 0;display:flex;justify-content:center;align-items:flex-end;height:180px}
.case .art img{max-height:150px;width:auto}
.case .body{padding:22px 26px 26px;border-top:1px solid var(--rule)}
.case .cat{font-style:italic;font-weight:400;font-size:17px;margin-bottom:6px}
.case .body a{font-size:14px;display:inline-block;margin-top:12px}

/* quote */
.quote blockquote{margin:0 auto;max-width:760px;text-align:center}
.quote blockquote p{font-size:clamp(22px,2.4vw,32px);line-height:1.3;margin-bottom:22px}
.quote cite{font-style:normal;display:block;line-height:1.4}
.quote cite b{display:block;font-weight:600}

/* photo band */
.band{padding:0;height:clamp(240px,40vw,520px);background:var(--surface-2)}
.band img{width:100%;height:100%;object-fit:cover}

/* contact block */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:28px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
address{font-style:normal;line-height:1.5;margin-top:22px}
form.contact{display:grid;gap:16px}
form.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){form.contact .row{grid-template-columns:1fr}}
form.contact label{display:block;font-size:14px;margin-bottom:6px}
form.contact label small{font-size:11px;color:var(--ink-2);margin-left:6px}
form.contact input,form.contact textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--ink)}
form.contact input::placeholder,form.contact textarea::placeholder{color:var(--ink-3);opacity:1}
form.contact textarea{min-height:140px;resize:vertical}
form.contact .actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Meldingen etter Send deler navn med statusmerket lenger ned (.status), men er tekst: ingen pille og ingen prikk,
   og tom staar den ikke (3 Okt 2026, Martin: «hva er den lille knappen til høyre for send?»). */
/* Og den brytes som tekst: merket har nowrap og inline-flex, og en lang feilmelding dyttet panelet ut til siden
   (7 Okt 2026, Martin: «ui blir dårlig pga. feiltekst»). */
form.contact .status{display:block;white-space:normal;overflow-wrap:anywhere;font-size:14px;font-weight:400;line-height:1.5;padding:0;border:0;border-radius:0}
form.contact .status::before{content:none}
form.contact .status:empty{display:none}
form.contact .status.ok{color:var(--good)}
form.contact .status.err{color:var(--bad)}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* product modules */
.module{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;margin-top:28px;align-items:stretch}
@media (max-width:820px){.module{grid-template-columns:1fr}}
.module .pill{border-radius:36px 14px 14px 36px;padding:34px 30px}
.module .pill h3{margin-bottom:14px}
.module .pill h4{font-weight:400;font-size:20px;margin-bottom:18px}
.module .pill p{font-size:15.5px}
.module .detail{border:1px solid var(--rule);border-radius:var(--radius);padding:30px;background:var(--surface)}
.module .detail p,.module .detail li{font-size:15.5px}
.module .detail ul{padding-left:20px;margin:0 0 14px}
.module .detail li{margin:6px 0}
.module .detail h5{font-size:15.5px;font-weight:600;margin:14px 0 4px}
/* In dark the four fills sit within 1.1:1 of each other, so the accent stripe,
   not the fill, is what tells Edge from DataOps from Storage from Access. */
.module .pill{border-left:4px solid transparent}
.pill-sky{background:var(--fill-sky);color:var(--on-fill-sky);border-left-color:var(--edge-sky)}
.pill-mint{background:var(--fill-mint);color:var(--on-fill-mint);border-left-color:var(--edge-mint)}
.pill-bright{background:var(--fill-bright);color:var(--on-fill-bright);border-left-color:var(--edge-bright)}
.pill-dark{background:var(--fill-deep);color:var(--on-fill-deep);border-left-color:var(--edge-deep)}
@media (max-width:820px){.module .pill{border-radius:var(--radius)}}

/* definition rows */
.rows{display:grid;gap:0;margin-top:10px}
.rows .row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,60px);padding:34px 0;border-top:1px solid var(--rule-soft)}
.rows .row:first-child{border-top:0}
.rows .row h4{font-weight:400;font-size:22px}
.rows .row h4 small{display:block;font-size:16px;color:var(--ink-2);margin-top:6px}
@media (max-width:760px){.rows .row{grid-template-columns:1fr;gap:10px}}

/* team */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
@media (max-width:980px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.team{grid-template-columns:1fr}}
/* LENKEN NEDERST STAAR PAA LINJE PAA TVERS AV RADEN, 22 Sep 2026. Martin: "paa
   about saa maa linkedin lenke ligge overrett paa alle." Malt laa de seks paa
   863, 911, 863, 1453, 1501 og 1477, fordi en lengre biografi skjoev sin egen
   lenke ned. Kortet er en flex-kolonne og lenken tar margin-top:auto, som er
   noeyaktig samme rettelse produktkortene paa forsiden trengte 18 Sep. Paddingen
   er MINSTE avstand, for et kort der teksten allerede fyller hoeyden og auto
   loeser seg til null. */
.person{display:flex;flex-direction:column}
.person > .go-link{margin-top:auto;align-self:flex-start;padding-top:18px}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);border:1px solid var(--rule)}
.person h4{margin:16px 0 2px}
.person .role{color:var(--ink-2);margin-bottom:10px}
.person p{font-size:15.5px}
.person a{font-size:14px}

/* cta dark with photo */
.cta-photo{position:relative;color:var(--on-photo);isolation:isolate;text-align:center}
.cta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-photo::after{content:"";position:absolute;inset:0;background:var(--overlay);z-index:-1}
.cta-photo .lead{max-width:60ch;margin:18px auto 30px}
/* The ground here is a scrimmed photo in both themes, so this button does not
   follow the theme: it stays white with dark text, or it dissolves into the sea. */
.cta-photo .btn-light{background:var(--on-photo);color:var(--photo-ink);border-color:transparent}

/* case pages */
.case-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,72px);align-items:center}
.case-row img{max-height:340px;width:auto;margin-inline:auto}
.case-row h3{margin-bottom:18px}
.case-row .impact{border-top:1px solid var(--rule);padding-top:14px;margin-top:18px}
@media (max-width:820px){.case-row{grid-template-columns:1fr}.case-row img{max-height:220px}}

/* footer */
.site-footer{background:var(--paper);border-top:1px solid var(--rule-hair);padding-block:48px 28px;font-size:15px}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;align-items:start}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer img{height:32px;width:auto}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.site-footer a{text-decoration:underline;text-underline-offset:3px}
.site-footer .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:36px;font-size:13px;color:var(--ink-2)}
.site-footer .legal button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* consent */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;display:none;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 10px 30px var(--shadow)}
.consent.open{display:flex}
.consent p{font-size:14px;margin:0;max-width:70ch}
.consent .btns{display:flex;gap:10px;flex-wrap:wrap}
.consent .btn{padding:10px 18px;font-size:13px}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== /new front page draft (Horizon structure, Sensa identity) ===== */
.draft-bar{background:var(--invert);color:var(--on-invert);font-family:var(--mono);font-size:12.5px;padding:8px var(--gutter);display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.draft-bar a{color:var(--on-invert)}
.eyebrow-line{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.eyebrow-line::before{content:"";width:22px;height:1px;background:var(--ink-2)}
.center .eyebrow-line{justify-content:center}
.two-tone .alt{color:var(--ink-3)}
.hero-new{padding-block:clamp(64px,8vw,120px) clamp(40px,5vw,64px)}
.hero-new h1{max-width:18ch;margin-inline:auto;min-height:2.3em;overflow-wrap:break-word}
body{overflow-x:hidden}
@media (max-width:480px){.hero-new h1{font-size:clamp(28px,8.5vw,38px)}}
.rot{display:inline-block;position:relative;color:var(--ink);border-bottom:3px solid var(--accent);padding-bottom:2px;transition:opacity .25s}
.rot.fade{opacity:0}
.hero-new .lead{max-width:52ch;margin:24px auto 0}
.hero-new .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1px solid var(--rule-soft)}
@media (max-width:760px){.proof{grid-template-columns:1fr}}
.proof .v{font-size:clamp(34px,4vw,48px);line-height:1;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.proof .v small{font-size:.45em;font-weight:400;margin-left:4px}
.proof .l{margin-top:8px;font-size:15px;max-width:30ch;margin-inline:auto}
.proof a{display:inline-block;margin-top:8px;font-size:12.5px;text-decoration:none;border-bottom:1px solid currentColor}
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
@media (max-width:980px){.mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.mods{grid-template-columns:1fr}}
.mod{display:flex;flex-direction:column;gap:10px}
.mod .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.mod h4{font-size:22px;font-weight:600}
.mod p{flex:1}
.mod .tags{display:flex;flex-wrap:wrap;gap:6px}
.mod .tag{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--rule-hair)}
.mod .more{font-size:13px;text-decoration:none;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);padding-top:12px;margin-top:6px}
.link-center{text-align:center;margin-top:26px;font-size:14px}

/* demo panel */
.demo{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(18px,3vw,30px);margin-top:34px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,36px)}
@media (max-width:900px){.demo{grid-template-columns:1fr}}
.demo .head{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.demo .badge{background:var(--wash);color:var(--ink);border:1px solid var(--rule-hair);border-radius:999px;padding:2px 10px;text-transform:none;letter-spacing:0}
.switch{display:flex;gap:8px;flex-wrap:wrap}
.switch button{font-size:13px;padding:10px 16px;border-radius:999px;border:1px solid var(--field);background:var(--surface);color:var(--ink);cursor:pointer}
.switch button[aria-pressed="true"]{background:var(--invert);color:var(--on-invert);border-color:var(--invert)}
.demo .setup{margin-top:18px;font-size:15px}
.demo .setup dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:12px 0 0}
.demo .setup dt{font-size:12px;color:var(--ink-2);padding-top:3px}
.demo .setup dd{margin:0}
.demo details{margin-top:16px;font-size:14px}
.demo summary{cursor:pointer;font-size:13px}
.demo details ul{padding-left:18px;margin:8px 0 0}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:460px){.kpis{grid-template-columns:1fr}}
.kpi2{border:1px solid var(--rule-soft);border-radius:10px;padding:14px 16px;background:var(--surface-2)}
.kpi2 .l{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.kpi2 .v{font-size:30px;font-weight:600;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.kpi2 .v small{font-size:.5em;font-weight:400;margin-left:3px}
.kpi2 .v.is-word{font-size:17px;font-weight:400;color:var(--ink-2);letter-spacing:0}
.kpi2 .d{font-family:var(--mono);font-size:11.5px;margin-top:6px}
.kpi2 .t{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin:5px 0 0}
.kpi2 .d.good{color:var(--good)}.kpi2 .d.bad{color:var(--bad)}.kpi2 .d.flat{color:var(--ink-3)}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 0;font-size:12px}
.flow span{border:1px solid var(--rule-soft);border-radius:999px;padding:4px 12px;transition:background .2s,color .2s}
.flow span.pulse{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.flow i{color:var(--ink-3)}
.story{margin-top:16px;padding:14px 16px;border-radius:10px;background:var(--wash);font-size:15px}
.story a{font-size:13px;display:inline-block;margin-top:6px}
.demo .foot{grid-column:1/-1;font-size:13px;color:var(--ink-2);border-top:1px solid var(--rule-soft);padding-top:12px;margin-top:4px}

/* questions */
.qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
@media (max-width:820px){.qs{grid-template-columns:1fr}}
.q h4{font-size:21px;font-weight:600;margin-bottom:12px}
.q p{font-size:15.5px}

/* why + shot */
.why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:start;margin-top:34px}
@media (max-width:900px){.why{grid-template-columns:1fr}}
.args{display:grid;gap:22px}
.args h4{font-size:19px;font-weight:600;margin-bottom:6px}
.args p{font-size:15.5px}
.shot{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:13px;color:var(--ink-2)}
.shot-cap{font-size:13px;color:var(--ink-3);margin-top:8px}

/* one platform strip */
.platform{display:grid;grid-template-columns:minmax(0,4fr) auto minmax(0,4fr) auto minmax(0,4fr);gap:14px;align-items:center;margin-top:30px}
@media (max-width:820px){.platform{grid-template-columns:1fr}.platform .arrow{transform:rotate(90deg);justify-self:center}}
.platform .box{border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px;background:var(--surface);min-height:100%}
.platform .box.core{background:var(--core-bg);color:var(--core-ink);border-color:var(--core-edge)}
.platform .box .k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.platform .box h4{font-size:18px;font-weight:600;margin:6px 0 8px}
.platform .box ul{margin:0;padding-left:18px;font-size:14.5px}
.platform .arrow{font-size:22px;color:var(--ink-3);text-align:center}

/* steps + contact */
.after{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
@media (max-width:900px){.after{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.after{grid-template-columns:1fr}}
.after .st{border-top:2px solid var(--field);padding-top:14px}
.after .n{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.after h4{font-size:17px;font-weight:600;margin:6px 0 6px}
.after p{font-size:14.5px}
/* `hidden` virker ikke paa et element som har faatt sin egen display, og
   .person-card er flex: UA-stilarkets [hidden]{display:none} taper mot en
   forfatterregel. Denne linja gjoer attributtet sant igjen, og den maa staa FOER
   regelen under eller den taper paa filrekkefoelge. Feilen sto paa siden til
   Martin sendte et skjermbilde av den 22 Sep 2026. */
/* TREDJE GANG I SAMME OEKT: `hidden` virker ikke paa et element som har faatt sin
   egen display. UA-stilarkets [hidden]{display:none} er en forfatterregel paa
   0,1,0 og taper mot hva som helst tyngre. **Gir du et element display, og
   bruker hidden paa det, maa du skrive denne linja samtidig.** Begge staar her
   samlet slik at neste tilfelle ser at det er et moenster og ikke et uhell. */
.person-card[hidden],.contact-til[hidden]{display:none}
/* KONTAKTVELGEREN, 24 Sep 2026: seks ansikter ved siden av skjemaet, og et trykk velger hvem
   meldingen gaar til (site.js, velg()). Emnet staar over navnet fordi det er det man leter
   etter; tittelen er stille under. Valgt ansikt faar en ring i blekk, og de fem andre dempes,
   saa valget kan leses paa avstand uten at noe kodes med farge. Ansiktene er 72px i en
   sirkel, fra utsnittene i tools/ai/ansikter.py. */
/* Seks ansikter i tre kolonner trenger ~460px; skjemaets venstre spalte var 5 av 12, ~405px,
   og da brast emne, navn og tittel over tre linjer hver. Med velgeren deler spaltene likt. */
.contact-grid:has(.kv){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:820px){.contact-grid:has(.kv){grid-template-columns:1fr}}
.kv{margin-top:clamp(28px,3.4vw,44px);container-type:inline-size}
.kv-k{font-size:15px;color:var(--ink-2);margin:0 0 18px}
.kv-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}
.kv-p{
  appearance:none;background:none;border:0;margin:-8px;padding:8px;border-radius:14px;
  font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;min-width:0;
}
/* Runde, 24 Sep 2026: "kan bildene vaere runde?" */
.kv-p img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;margin:0 0 12px;
  outline:2px solid transparent;outline-offset:3px;transition:outline-color .16s ease,opacity .16s ease;
}
.kv-t{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink-2)}
.kv-n{font-size:15px;line-height:1.3;color:var(--ink);margin-top:3px}
.kv-r{font-size:13.5px;line-height:1.35;color:var(--ink-2);margin-top:2px}
.kv-p:hover img{outline-color:var(--rule)}
.kv-p[aria-pressed="true"] img{outline-color:var(--ink)}
.kv.har-valg .kv-p:not([aria-pressed="true"]) img{opacity:.45}
.kv.har-valg .kv-p:not([aria-pressed="true"]):hover img{opacity:1}
.kv-p:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@container (max-width:380px){.kv-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.kv-p img{transition:none}}
/* MOETEBOOKEREN, 24 Sep 2026 (convert.py, site.js): fem dager i kolonner, ledige halvtimer som
   piller. Tidene er sifre og staar i monoskriften; en valgt tid er en lys flate med blekkkant,
   samme tilstand som et valgt chatforslag. Blokken er skjult til skriptet har tegnet dagene. */
.mb[hidden]{display:none}
.mb{margin:2px 0 0}
/* Kommer til naar en som tar moeter blir valgt, i stedet for aa hoppe inn. */
.mb.mb-inn{animation:mb-inn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes mb-inn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mb.mb-inn{animation:none}}
.mb-k{font-size:15px;color:var(--ink);margin:0}
.mb-s{font-size:14px;color:var(--ink-2);margin:4px 0 14px}
.mb-hvem{color:var(--ink)}
.mb-dager{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.mb-dag{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Ukedagen over datoen: paa én linje gikk "man. 28.09" over i nabokolonnen allerede ved 1100. */
.mb-d{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.2;color:var(--ink-2);margin:0 0 4px}
.mb-d span{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.mb-t{
  appearance:none;font:500 13px/1 var(--mono);padding:9px 0;border:1px solid var(--rule);
  border-radius:999px;background:none;color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.mb-t:hover{border-color:var(--ink)}
.mb-t[aria-pressed="true"]{background:var(--surface-2);border-color:var(--ink)}
.mb-t:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mb-ingen{font-size:13px;color:var(--ink-3);margin:6px 0 0}
.mb-bla{margin:12px 0 0}
.mb-uke{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.mb-uke:hover{text-decoration:underline;text-underline-offset:3px}
.mb-valgt{font-size:14px;color:var(--ink);margin:10px 0 0;min-height:1.4em}
.mb-valgt:empty{min-height:0;margin:0}
.person-card{display:flex;gap:16px;align-items:center;border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;background:var(--surface);margin-top:22px}
.person-card img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.person-card b{display:block}
.person-card small{display:block;color:var(--ink-2)}
.person-card a{font-size:13px}

/* faq */
.faq{max-width:820px;margin-top:26px}
.faq details{border-top:1px solid var(--rule-soft);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--rule-soft)}
.faq summary{cursor:pointer;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ink-2)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;max-width:64ch;color:var(--ink-2)}

/* ===== language toggle ===== */
.lang{display:inline-flex;border:1px solid var(--field);border-radius:999px;overflow:hidden;font-family:var(--mono);font-size:12.5px;margin-left:auto}
.lang a,.lang span{padding:7px 12px;text-decoration:none;color:var(--ink)}
.lang [aria-current="true"]{background:var(--invert);color:var(--on-invert)}
.lang a:hover{background:var(--surface-2)}
.site-header .wrap{gap:16px}
/* One height for every control in the header row. The CTA carries weight
   through its fill, not by being taller than its neighbours. */
.site-header .nav .btn,.site-header .lang,.site-header .theme-toggle{height:36px;box-sizing:border-box}
.site-header .nav .btn{display:inline-flex;align-items:center;padding:0 20px}
.site-header .lang a,.site-header .lang span{display:inline-flex;align-items:center;padding:0 12px}
.site-header .theme-toggle{padding:0 12px 0 10px}
.site-header .nav{margin-left:auto}
.site-header .lang{margin-left:0}
@media (max-width:820px){.site-header .lang{margin-left:auto}.site-header .nav-toggle{margin-left:0}}

/* sector honesty strip under the hero proof numbers */
.sector{max-width:70ch;margin:26px auto 0;padding-top:20px;border-top:1px solid var(--rule-hair);font-size:15px;color:var(--ink-2)}
.sector b{color:var(--ink);font-weight:600}
/* small sector label on the question cards */
.q .k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:10px}
/* footer is now two columns (Overhaus credit removed) */
.site-footer .cols{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (min-width:761px){.site-footer .cols ul{justify-self:end;text-align:right}}

/* ===== theme toggle (sits beside the language toggle) ===== */
.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--field);background:transparent;color:inherit;border-radius:999px;padding:6px 12px 6px 10px;font-size:12.5px;line-height:1;cursor:pointer}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle svg{display:block;flex:none}
.theme-toggle .t-moon{display:none}
.theme-toggle[aria-pressed="true"] .t-sun{display:none}
.theme-toggle[aria-pressed="true"] .t-moon{display:block}
.theme-toggle .t-label{display:inline-block;min-width:3.2em;text-align:left}
@media (max-width:560px){.theme-toggle .t-label{display:none}.theme-toggle{padding:7px 10px}}

/* ===== artwork that is dark-on-transparent =====
   logo.webp and the three use-case line drawings have no background of their
   own, so on a dark page they would disappear. --art-filter is `none` in light
   and forces them to white in dark. */
.brand img,.site-footer img,.case .art img,.case-row img{filter:var(--art-filter)}

/* Where the platform runs, as a row rather than a paragraph. The eyebrow names
   the category; this names the sectors without arguing about them. */
.sectors{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 10px;
  max-width:70ch;margin:24px auto 0;padding-top:20px;border-top:1px solid var(--rule-hair);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-2);
}
.sectors .k{text-transform:uppercase;letter-spacing:.09em;font-size:11px;color:var(--ink-3);margin-right:4px}
.sectors i{font-style:normal;color:var(--ink-3)}

/* ===========================================================================
   Components added with the September 2026 rewrite: the figure component, the
   hero switch, the value-case list, the platform diagram.
   =========================================================================== */

/* Typefaces come from the Sensa visual profile guide, not from preference:
   Open Sans is the main font, semibold for headings, and Azeret Mono is the
   secondary font used for numbers and symbols. Inherited from site.css. */
h1,h2,h3{font-weight:600}
.eyebrow-line{letter-spacing:.1em;font-size:12px}

/* ---------------------------------------------------------------------------
   The figure component.
   Sensa's own voice rule says a number always carries a unit and a source.
   That is a design rule as much as a writing rule, so it gets one component
   with four levels the eye reads in order: magnitude, unit, what it measures,
   where it came from. The source is never hidden behind a hover or a footnote.
   --------------------------------------------------------------------------- */
.fig{display:flex;flex-direction:column;gap:0}
.fig-v{
  font-family:var(--mono);
  font-size:clamp(32px,3.8vw,46px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"zero" 1;   /* slashed zero: this is instrument data */
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:.14em;
}
/* The unit is not part of the magnitude. It is set in the mono, smaller and
   quieter, so the eye lands on the number first and reads the unit second. */
.fig-u{
  font-family:var(--mono);
  font-size:.42em;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--ink-2);
  white-space:nowrap;
}
.fig-l{
  margin-top:12px;
  font-size:15.5px;
  line-height:1.45;
  color:var(--ink);
  max-width:32ch;
}
.fig-s{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid var(--rule-hair);
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.45;
  letter-spacing:.015em;
  color:var(--ink-3);
  text-decoration:none;
  display:block;
  max-width:32ch;
}
a.fig-s:hover{color:var(--ink);border-top-color:var(--field)}
.fig-s .arr{color:var(--ink-3)}
.center .fig{align-items:center;text-align:center}
.center .fig-l,.center .fig-s{margin-inline:auto}

/* the hero's three figures, rebuilt on the component */
.proof-v2{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(40px,6vw,72px);padding-top:32px;
  border-top:1px solid var(--rule-soft);
}
@media (max-width:760px){.proof-v2{grid-template-columns:1fr;gap:34px}}

/* ---------------------------------------------------------------------------
   The signal figure.
   A data platform's site with no data on it is a contradiction. This is the
   shape of the finding described in the feed-waste case: feeding tapers off
   through the evening, then a dump just before midnight to hit the daily
   target. It is drawn schematically and says so.
   --------------------------------------------------------------------------- */
.signal{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(24px,4vw,56px);align-items:center;margin-top:36px;
}
@media (max-width:900px){.signal{grid-template-columns:1fr}}
.signal-plot{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:20px 22px 16px;
}
.signal-plot figcaption{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-hair);
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--ink-3);
}
.signal-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:6px;
}
.signal-title{font-size:15px;font-weight:600;color:var(--ink)}
.signal-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.signal svg{width:100%;height:auto;display:block;overflow:visible}

/* chart marks: recessive grid, one 2px trace, the anomaly carried by a
   labelled marker rather than by colour alone */
.sig-grid{stroke:var(--rule-hair);stroke-width:1}
.sig-axis{stroke:var(--rule-soft);stroke-width:1}
.sig-tick{fill:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.sig-area{fill:var(--accent);opacity:.14}
.sig-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sig-dot{fill:var(--bad);stroke:var(--surface);stroke-width:2}
.sig-call{stroke:var(--bad);stroke-width:1;stroke-dasharray:3 3}
.sig-label{fill:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:600}
.sig-sub{fill:var(--ink-2);font-family:var(--mono);font-size:10.5px}
.sig-ylab{fill:var(--ink-3);font-family:var(--mono);font-size:10.5px}

.signal-note h3{font-size:clamp(20px,2.1vw,26px);font-weight:500;margin-bottom:14px}
.signal-note p{font-size:15.5px;color:var(--ink-2);max-width:40ch}
.signal-note .fig{margin-top:26px}
.signal-note .fig-v{font-size:clamp(28px,3vw,38px)}

/* The SVG scales with its container, so at phone width every label inside it
   shrinks with the drawing and stops being readable. Text inside the chart is
   therefore sized in user units that grow as the drawing shrinks, and the
   secondary annotation line steps aside rather than being rendered at 5px. */
@media (max-width:620px){
  .signal-plot{padding:16px 14px 12px}
  .sig-tick{font-size:22px}
  /* the 0/maks pair collides with the first time tick at this size, and the
     caption already says the vertical axis is relative */
  .sig-ylab{display:none}
  .sig-label{font-size:27px}
  .sig-sub{display:none}
  .sig-dot{r:7}
  .sig-line{stroke-width:3}
}
@media (max-width:900px) and (min-width:621px){
  .sig-tick,.sig-ylab{font-size:14px}
  .sig-label{font-size:17px}
  .sig-sub{font-size:13px}
}

/* ===========================================================================
   The switch: the daily report against the same week in real time.
   This replaces the rotating word. The rotating word was Horizon's device and
   said nothing; this one makes Sensa's actual argument without an adjective.
   Both states share one viewBox so flipping swaps content without reflow.
   =========================================================================== */
.flip{max-width:900px;margin:clamp(34px,5vw,52px) auto 0;text-align:left}
.flip-switch{display:inline-flex;border:1px solid var(--field);border-radius:999px;padding:3px;gap:3px;margin-bottom:18px}
.flip-switch button{
  font-family:var(--mono);font-size:12.5px;line-height:1;padding:9px 16px;
  border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;
}
.flip-switch button[aria-pressed="true"]{background:var(--invert);color:var(--on-invert)}
.flip-switch button:hover[aria-pressed="false"]{color:var(--ink)}

.flip-plot{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px 16px}
.flip-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.flip-title{font-size:15px;font-weight:600}
.flip-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.flip svg{width:100%;height:auto;display:block;overflow:visible}
.flip [hidden]{display:none!important}
.flip-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--rule-hair);
}
.flip-read{font-size:15px;max-width:44ch}
.flip-read b{display:block;font-size:19px;font-weight:500;letter-spacing:-0.015em;margin-bottom:4px}
.flip-note{font-size:11px;color:var(--ink-3);margin-top:12px;text-align:center}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;
  padding:5px 11px;border-radius:999px;border:1px solid var(--rule-soft);color:var(--ink-2);white-space:nowrap;
}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.chip.is-ok::before{background:var(--good)}
.chip.is-bad::before{background:var(--bad)}
.sig-bar{fill:var(--accent);opacity:.55}
.sig-target{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 4}
.sig-targetlab{fill:var(--ink-3);font-family:var(--mono);font-size:10.5px}
@media (max-width:620px){
  .flip-switch button{padding:9px 12px;font-size:11.5px}
  .flip-plot{padding:16px 14px 12px}
  .sig-targetlab{font-size:20px}
  .sig-bar{opacity:.65}
}
@media (prefers-reduced-motion: no-preference){
  .flip-plot svg g{animation:flipin .28s ease-out}
  @keyframes flipin{from{opacity:.25}to{opacity:1}}
}

/* the header CTA carries weight through fill, not a pale tint */
.site-header .nav .btn-primary{background:var(--invert);color:var(--on-invert)}
.hero-new h1{min-height:0}

/* ===========================================================================
   Value cases with their evidence status.
   The framework's evidence discipline says never state an estimate as a result.
   Showing the status openly turns that constraint into the differentiator:
   a company selling trusted data says how much it trusts its own claims.
   =========================================================================== */
.cases-list{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--rule-soft)}
.vcase{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;
  gap:clamp(14px,3vw,40px);align-items:start;
  padding:24px 0;border-bottom:1px solid var(--rule-soft);
}
@media (max-width:900px){.vcase{grid-template-columns:1fr;gap:10px;padding:20px 0}}
.vcase h4{font-size:19px;font-weight:600;letter-spacing:-0.01em}
.vcase p{font-size:15px;color:var(--ink-2);margin:0}
.vcase .who{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:7px}
.status{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;align-self:start;
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  padding:5px 11px;border-radius:999px;border:1px solid var(--rule-soft);color:var(--ink-2);
}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.status.s-3::before{background:var(--good)}
.status.s-2::before{background:var(--accent)}
.status.s-1::before{background:var(--ink-3)}
.status-key{
  display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
}
.status-key span{display:inline-flex;align-items:center;gap:7px}
.status-key i{width:7px;height:7px;border-radius:50%;font-style:normal;flex:none}

/* the three structural gaps */
.gaps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
@media (max-width:820px){.gaps{grid-template-columns:1fr}}
.gap-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;display:block}

/* the four properties that must hold together */
.props{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
@media (max-width:980px){.props{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.props{grid-template-columns:1fr}}
.prop{border-top:2px solid var(--field);padding-top:14px}
.prop h4{font-size:17px;font-weight:600;margin-bottom:6px}
.prop p{font-size:14.5px;color:var(--ink-2)}

/* how to start: five numbered steps */
.start{counter-reset:s;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:30px}
@media (max-width:980px){.start{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.start{grid-template-columns:1fr}}
.start li{counter-increment:s;list-style:none;border-top:1px solid var(--rule-soft);padding-top:14px}
.start li::before{content:"0" counter(s);font-family:var(--mono);font-size:12px;color:var(--accent);display:block;margin-bottom:8px}
.start h4{font-size:16px;font-weight:600;margin-bottom:5px}
.start p{font-size:14px;color:var(--ink-2)}
.start{padding:0;margin-left:0}

/* ===========================================================================
   Unity in one view, REDRAWN 17 Sep 2026 in the register taken from sanity.io
   for /boom. Martin, on the first drawing: "this looks like a school project,
   i want it to scream at investors and it people."

   What went: the white panel, the three pastel tiles (one hue per capability),
   the icons, the rounded cards, the wordmark in the corner. What the drawing is
   now, and each is a device off sanity.io's own product diagrams:

     - four stages, each with a mono index, a heading and a ruled list;
     - ONE panel on the accent for Sensa's own layer, dark ink on it: the one
       hot object on the page;
     - connectors that carry a moving dash toward a filled square, so the flow
       is drawn rather than pointed at, and it stops under reduced motion;
     - lists instead of tiles: a line of text beats a box.

   Hierarchy is size and tracking, never a hue per capability. Tokens only, so
   the same drawing renders in all four palettes; the two skins restate only
   the weights and the label faces.

   Second pass, same day, on Martin's read once it sat on /ai: "this dosent
   match the overall format now, also there is dots in the background of it."
   The dot-grid ground, the outer frame, the dashed outlines and the corner
   brackets were sanity.io's furniture and made the drawing a foreign object
   between the case cards and the product cards. The stages are now the page's
   own cards, --surface on --rule at 18px, and the drawing has no frame of its
   own. What survives of the borrowed register is the reading: one accent
   panel, ruled lists, a mono index, a moving dash.

   Cascade note: `.boom main h3` (0,1,2) and `.sd main h3` (0,2,1) both outrank
   a bare `.arch-h`, so both skins carry `.x main .arch-h` at 0,2,1 or better.
   =========================================================================== */
.arch{
  display:grid;
  grid-template-columns:minmax(0,5fr) 44px minmax(0,7fr) 44px minmax(0,5fr) 44px minmax(0,5fr);
  align-items:stretch;margin-top:34px;
}
/* three-stage variant, used by the IT page: their plant, Unity, their environment */
.arch-3st{grid-template-columns:minmax(0,5fr) 72px minmax(0,7fr) 72px minmax(0,5fr)}
.arch-st{
  display:flex;flex-direction:column;min-width:0;position:relative;
  background:var(--surface);border:1px solid var(--rule);border-radius:18px;
  padding:clamp(18px,2vw,24px);
}
/* Three classes deep on purpose: the bridge block at the end of this file sets
   `.ai-doc main p{margin-top:0}` and `.ai-doc main h3{font-size:clamp(...)}` at
   0,2,1, which silently flattened the footer to the list and capped the core
   heading at 26px. 0,3,0 settles it; the skins go one class heavier again. */
.arch .arch-st .arch-k{
  display:flex;align-items:baseline;gap:10px;margin:0 0 10px;
  font-size:12px;line-height:1.3;color:var(--ink-3);
}
.arch-k span{
  font-family:var(--mono);font-size:12px;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.arch .arch-st .arch-h{font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-0.02em;margin:0 0 16px;color:var(--ink)}
.arch-ls{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.3}
.arch-ls li{padding:9px 0;border-top:1px solid var(--rule-soft);color:var(--ink)}
.arch-ls li:last-child{border-bottom:1px solid var(--rule-soft)}
.arch-ls small{display:block;font-size:12.5px;line-height:1.3;color:var(--ink-3);margin-top:2px}
.arch .arch-st .arch-f{margin:auto 0 0;padding-top:14px;font-size:13px;line-height:1.35;color:var(--ink-3)}

/* connectors: a dashed line drifting toward a filled square at the receiving
   end. The optional label says what crosses the boundary. */
.arch-ln{position:relative;min-width:0}
.arch-ln::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 10px);
  background-size:10px 1px;
}
.arch-ln::after{
  content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;
  background:var(--accent);
}
.arch-ln small{
  position:absolute;left:50%;top:calc(50% - 24px);transform:translateX(-50%);
  font-size:11.5px;line-height:1.3;color:var(--ink-3);white-space:nowrap;
}
@keyframes arch-flow{to{background-position:10px 0}}
@keyframes arch-flow-v{to{background-position:0 10px}}
@media (prefers-reduced-motion:no-preference){
  .arch-ln::before{animation:arch-flow 1.1s linear infinite}
}

/* stage 2: Sensa's own layer, the one hot object */
.arch-core{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.arch .arch-core .arch-k,.arch .arch-core .arch-k span,.arch .arch-core .arch-h{color:var(--on-accent)}
.arch .arch-core .arch-h{font-size:28px;margin-bottom:18px}
.arch-caps{list-style:none;margin:0;padding:0}
.arch-caps li{padding:11px 0;border-top:1px solid color-mix(in oklab,var(--on-accent) 30%,transparent)}
.arch-caps li:last-child{border-bottom:1px solid color-mix(in oklab,var(--on-accent) 30%,transparent)}
.arch-caps b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-0.01em;line-height:1.25}
.arch-caps span{display:block;font-size:13px;line-height:1.35;margin-top:2px}
/* the governance line as a status chip: on-accent fill, accent text */
.arch .arch-st .arch-tag{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  margin:auto 0 0;padding-top:18px;font-size:12.5px;line-height:1.3;color:var(--on-accent);
}
.arch-tag b{font-weight:600;background:var(--on-accent);color:var(--accent);padding:4px 8px;border-radius:2px}

@media (max-width:1100px){
  .arch,.arch-3st{grid-template-columns:1fr}
  .arch-ln{height:48px}
  .arch-ln::before{
    left:50%;right:auto;top:0;bottom:0;height:auto;width:1px;
    background:repeating-linear-gradient(180deg,var(--accent) 0 5px,transparent 5px 10px);
    background-size:1px 10px;animation-name:arch-flow-v;
  }
  .arch-ln::after{right:auto;left:50%;top:auto;bottom:0;margin:0 0 0 -3.5px}
  .arch-ln small{display:none}
  .arch .arch-core .arch-h{font-size:24px}
}

/* the one-way notice under the IT diagram: a line, not a card */
.uoneway{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.uoneway b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.uoneway span{display:block;font-size:14px;color:var(--ink-2);line-height:1.5;margin-top:4px;max-width:72ch}

/* layer detail rows below the diagram */
.layers{display:grid;gap:0;margin-top:34px}
.layer{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(18px,4vw,56px);padding:28px 0;border-top:1px solid var(--rule-soft)}
@media (max-width:820px){.layer{grid-template-columns:1fr;gap:12px}}
.layer h3{font-size:22px;font-weight:600;letter-spacing:-0.015em}
.layer .answers{font-size:12px;color:var(--ink-3);margin-top:10px;display:block}
.layer ul{margin:0;padding-left:18px;font-size:15.5px;display:grid;gap:6px}
.layer p{font-size:15.5px;margin-bottom:12px}

/* the figure sits inside a case card, so it needs less air than in a hero */
.case .fig{margin-top:14px}
.case .fig-v{font-size:26px}
.case .fig-u{font-size:.5em}
.case .fig-l{margin-top:8px;font-size:14.5px}
.case .fig-s{margin-top:9px;font-size:11px}

/* ===========================================================================
   The document layout, added 15 Sep 2026.

   Why it exists: the card-and-eyebrow pattern the rest of this stylesheet uses
   is the same pattern every competitor and every site generator produces. It
   reads as a template. This set is structurally the opposite: asymmetric,
   left-aligned, rule-based and typographically coded rather than symmetric,
   centred, card-based and colour-coded.

   Two rules keep it honest:
     1. The left rail carries INFORMATION, never a decorative label. A rail that
        says "Case-estimat, anleggets egne data" is a document. A rail that says
        "PRODUKTENE" is the thing we are getting away from.
     2. No horizontal rule before a heading, no two-tone heading, no equal card
        grid. If a section needs one of those to read, rewrite the section.
   =========================================================================== */
.doc{max-width:1060px;margin:0 auto;padding-inline:var(--gutter)}
.doc-s{padding-block:clamp(54px,6.6vw,92px) 0}
/* Each .doc-s sits alone in its own .doc wrapper, so :last-of-type used to match
   every section and every gap carried a top AND a bottom padding: 154px of air
   between sections at 1280px. Only the last block on the page needs the bottom. */
main > .doc:last-child .doc-s{padding-bottom:clamp(56px,7vw,96px)}

/* the asymmetric row: narrow rail, wide body, hairline above */
.doc-r{
  display:grid;grid-template-columns:minmax(0,186px) minmax(0,1fr);
  gap:clamp(18px,3.5vw,64px);padding-block:clamp(22px,3vw,34px);
  border-top:1px solid var(--rule-soft);align-items:start;
}
.doc-r.open{border-top:0;padding-top:0}
@media (max-width:760px){
  .doc-r{grid-template-columns:minmax(0,1fr);gap:9px}
}
/* the rail. Mono, but sentence case: tracked uppercase micro-labels are the tell. */
.doc-rail{font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.doc-rail b{display:block;color:var(--ink-2);font-weight:500}
.doc-rail .n{font-family:var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.doc-body{min-width:0}
.doc-body > *:first-child{margin-top:0}

/* type: hierarchy by size and weight, never by a grey second clause */
.doc h1{font-size:clamp(36px,5.6vw,68px);font-weight:700;letter-spacing:-0.032em;line-height:1.02}
.doc h2{font-size:clamp(23px,2.5vw,33px);font-weight:600;letter-spacing:-0.022em;line-height:1.1}
.doc h3{font-size:19px;font-weight:600;letter-spacing:-0.012em}
.doc .say{font-size:clamp(18px,1.9vw,23px);line-height:1.48;color:var(--ink);max-width:40ch}
.doc .t{font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:66ch}
.doc .t + .t{margin-top:13px}

/* the hero: two columns, so real product output sits in the first screen */
.doc-hero{
  display:grid;grid-template-columns:minmax(0,11fr) minmax(0,12fr);
  gap:clamp(30px,5vw,72px);align-items:center;
  padding-block:clamp(44px,6vw,86px) clamp(40px,5vw,70px);
}
@media (max-width:980px){.doc-hero{grid-template-columns:1fr;gap:34px}}
.doc-hero h1{font-size:clamp(31px,4.1vw,49px);letter-spacing:-0.028em;line-height:1.06}
.doc-hero .cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.doc-hero .flip{margin:0;max-width:none}
.doc .flip{margin-top:0;max-width:none}
/* one radius in this layout, and it belongs to the buttons */
.doc .flip-plot{border-radius:2px}

/* A photographic hero. It exists to give the eye somewhere to rest: the page
   was too dense, and subtraction plus one image is the fix. Only three things
   are allowed in here — a headline, one sentence and one button. If a fourth
   turns up, it belongs further down the page. */
.hero-photo{
  position:relative;isolation:isolate;color:var(--on-photo);
  background:var(--hero-base) var(--hero-photo) center 52% / cover no-repeat;
  padding-block:clamp(132px,24vw,300px) clamp(40px,6vw,76px);
  margin-bottom:0;
}
.hero-photo::before{content:"";position:absolute;inset:0;background:var(--hero-scrim);z-index:0}
.hero-photo > *{position:relative;z-index:1}
.hero-photo h1{font-size:clamp(29px,3.9vw,49px);font-weight:700;letter-spacing:-0.028em;
  line-height:1.08;max-width:24ch;text-wrap:balance}
.hero-photo .say{margin-top:20px;max-width:36ch;color:var(--on-photo);opacity:.95;
  font-size:clamp(18px,1.95vw,24px);line-height:1.34;letter-spacing:-0.008em;font-weight:600}
.hero-photo h1 .turn{display:block;margin-top:.34em;opacity:.86;white-space:nowrap}
.hero-photo .say .turn{display:block;margin-top:.24em;opacity:.78;font-weight:400}
.hero-photo .cta{margin-top:30px}

/* The two doors. They were bordered half-columns, which reads as a table row.
   A door is an object: its own surface, its own edge, the whole thing clickable. */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media (max-width:760px){.doors{grid-template-columns:1fr}}
.door{
  display:block;text-decoration:none;color:inherit;position:relative;
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:clamp(24px,3vw,34px) clamp(22px,2.6vw,32px) clamp(58px,5vw,64px);
  transition:border-color .16s ease,background .16s ease;
}
.door:hover{border-color:var(--field);background:var(--surface-2)}
.door h3{font-size:clamp(21px,2.2vw,27px);font-weight:600;letter-spacing:-0.02em;margin:0 0 10px}
.door .who{font-size:13px;color:var(--ink-3);display:block;margin-bottom:14px;letter-spacing:.01em}
.door p{font-size:16px;line-height:1.5;color:var(--ink-2);margin:0;max-width:34ch}
.door .go{
  position:absolute;left:clamp(22px,2.6vw,32px);bottom:clamp(22px,2.6vw,28px);
  font-size:15px;color:var(--accent);display:inline-flex;align-items:center;gap:9px;
}
.door:hover .go{text-decoration:underline;text-underline-offset:4px}

/* real tables, because everyone else puts numbers in card tiles */
.doc-t{width:100%;border-collapse:collapse;margin-top:6px}
.doc-t th,.doc-t td{text-align:left;padding:14px 18px 14px 0;border-top:1px solid var(--rule-soft);vertical-align:top}
.doc-t thead th{
  border-top:0;border-bottom:1px solid var(--rule);padding-top:0;
  font-size:11.5px;color:var(--ink-3);font-weight:400;
}
.doc-t td:first-child{font-weight:600;white-space:nowrap;padding-right:26px}
.doc-t td:nth-child(2){color:var(--ink-2);font-size:15.5px}
.doc-t td:last-child{padding-right:0;white-space:nowrap}
.doc-tw{overflow-x:auto}
@media (max-width:700px){.doc-t{min-width:560px}}

/* evidence status: a mark and a word, not a coloured pill */
/* The three evidence levels are a SCALE, not three categories, so the mark encodes
   strength by how much ink it carries, not by hue. Three hues could never hold 15
   OKLab apart in both themes once the accent, the warning colour and the diagram
   hues were already placed, and a scale shown as unrelated colours misreads anyway.
   Filled = documented. Thick outline = confirmed. Thin outline = hypothesis. */
.ev{font-size:13.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.ev::before{content:"";width:10px;height:10px;flex:none;box-sizing:border-box}
.ev-1{color:var(--accent)}
.ev-1::before{background:currentColor}
.ev-2{color:var(--accent)}
.ev-2::before{border:2.5px solid currentColor}
.ev-3{color:var(--ink-3)}
.ev-3::before{border:1.5px solid currentColor}

/* a measured figure, set as a record rather than a marketing tile */
.doc-fig{font-family:var(--mono);line-height:1.15}
.doc-fig .v{font-size:clamp(34px,4vw,46px);font-weight:500;color:var(--ink);letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;display:block}
.doc-fig .v small{font-size:.42em;font-weight:400;margin-left:5px;letter-spacing:0}
.doc-fig .u{display:block;font-family:var(--sans);font-size:13.5px;color:var(--ink-2);margin-top:9px;line-height:1.45}
.doc-fig .src{display:block;font-family:var(--sans);font-size:12.5px;color:var(--ink-3);margin-top:12px;line-height:1.5}

/* a document quote: a rule and a size change, no box */
.doc-q{border-top:2px solid var(--ink);padding-top:26px;margin-top:8px}
.doc-q blockquote{margin:0;font-size:clamp(19px,2.3vw,28px);line-height:1.34;letter-spacing:-0.018em;max-width:26ch}
.doc-q cite{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:18px;line-height:1.6}
/* The one customer block on the page: their site, their words, their face. The
   photo is FishGlobe's own, used with permission, and credited. It is cropped
   wide so the block stays short. */
.qfig{margin:0 0 clamp(22px,2.8vw,32px)}
.qfig img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;
  object-position:center 56%;border-radius:2px}
.qfig figcaption{margin-top:9px;font-size:12.5px;color:var(--ink-3)}
.qwho{display:flex;align-items:center;gap:14px;margin-top:20px}
.qwho cite{margin-top:0}
.qface{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}

/* a numbered sequence that really is a sequence */
.doc-seq{list-style:none;margin:0;padding:0}
.doc-seq li{display:grid;grid-template-columns:minmax(0,186px) minmax(0,1fr);
  gap:clamp(18px,3.5vw,64px);padding-block:20px;border-top:1px solid var(--rule-soft)}
@media (max-width:760px){.doc-seq li{grid-template-columns:minmax(0,1fr);gap:6px}}
.doc-seq .s{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.doc-seq h3{font-size:17px;margin-bottom:6px}
.doc-seq p{font-size:15.5px;color:var(--ink-2);margin:0;max-width:60ch}

/* the closing block */
.doc-end{border-top:2px solid var(--ink);padding-top:clamp(26px,3vw,38px);margin-top:clamp(40px,5vw,64px)}

/* ===========================================================================
   The reveal. Replaces the toggle that made the visitor do the work of
   discovering the story. It plays itself, in three beats:
     1  seven daily totals rise, every one of them on target
     2  they fade, the same day is drawn hour by hour
     3  the feed spike before midnight lands, and is marked
   Under prefers-reduced-motion nothing animates: both states are simply on
   screen at once, which tells the same story without movement.
   =========================================================================== */
.reveal{border:1px solid var(--rule);background:var(--surface);border-radius:2px;overflow:hidden}
.reveal-top{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:baseline;
  padding:16px 20px;border-bottom:1px solid var(--rule-soft);
}
.reveal-top h3{font-size:16px;font-weight:600;margin:0}
.reveal-top .src{font-size:12.5px;color:var(--ink-3)}
.reveal-plot{position:relative;padding:8px 10px 0}
.reveal svg{display:block;width:100%;height:auto}

/* the caption changes with the beat: it is the story, not a legend */
.reveal-cap{
  display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:start;
  padding:16px 20px 18px;border-top:1px solid var(--rule-soft);min-height:88px;
}
.reveal-cap .beat{
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;padding-top:3px;
}
.reveal-cap p{margin:0;font-size:17px;line-height:1.4;color:var(--ink);max-width:52ch}
.reveal-cap small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.45}
.reveal-cap .step{display:none}
.reveal-cap .step.on{display:block}

.reveal-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:0 20px 16px;font-size:12.5px;color:var(--ink-3)}
.reveal-replay{
  background:none;border:1px solid var(--field);color:var(--ink-2);border-radius:999px;
  padding:7px 15px;font:inherit;font-size:13px;cursor:pointer;
}
.reveal-replay:hover{color:var(--ink)}

/* --- beat 1: the bars --- */
.rv-bar{fill:var(--edge-sky);transform-box:fill-box;transform-origin:bottom;
  transform:scaleY(0);transition:transform .52s cubic-bezier(.2,.7,.3,1)}
.reveal.b1 .rv-bar,.reveal.b2 .rv-bar,.reveal.b3 .rv-bar{transform:scaleY(1)}
.reveal.b2 .rv-bars,.reveal.b3 .rv-bars{opacity:0;transition:opacity .5s ease .1s}
.rv-bars{opacity:1;transition:opacity .4s ease}
.rv-target{stroke:var(--good);stroke-width:1.5;stroke-dasharray:5 4;opacity:0;transition:opacity .4s ease}
.reveal.b1 .rv-target{opacity:1}
.reveal.b2 .rv-target,.reveal.b3 .rv-target{opacity:.32}

/* --- beat 2: the hourly line --- */
.rv-line{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.15s cubic-bezier(.35,.1,.25,1)}
.reveal.b2 .rv-line,.reveal.b3 .rv-line{stroke-dashoffset:0}
.rv-area{fill:var(--edge-sky);opacity:0;transition:opacity .6s ease .5s}
.reveal.b2 .rv-area,.reveal.b3 .rv-area{opacity:.14}

/* --- beat 3: the spike lands --- */
.rv-spike{opacity:0;transition:opacity .3s ease}
.reveal.b3 .rv-spike{opacity:1}
.rv-spike circle{fill:var(--bad)}
.rv-spike .ring{fill:none;stroke:var(--bad);stroke-width:2;opacity:.5}
.reveal.b3 .rv-spike .ring{animation:rvping 1.6s ease-out .1s 2}
@keyframes rvping{from{r:7;opacity:.55}to{r:21;opacity:0}}
.rv-callout{fill:none;stroke:var(--bad);stroke-width:1.4}
.rv-ctext{fill:var(--bad);font-family:var(--sans);font-size:13px;font-weight:600}

.rv-hours{opacity:0;transition:opacity .45s ease .45s}
.reveal.b2 .rv-hours,.reveal.b3 .rv-hours{opacity:1}
.rv-axis{stroke:var(--rule-soft);stroke-width:1}
.rv-tick{fill:var(--ink-3);font-family:var(--sans);font-size:12px}
.rv-tlab{fill:var(--good);font-family:var(--sans);font-size:12px}

/* SVG text scales with the drawing, so on a phone it has to be set in bigger
   user units to come out at a readable pixel size. */
@media (max-width:430px){.hero-photo h1 .turn{white-space:normal}}
@media (max-width:700px){
  .rv-ctext{font-size:25px}
  .rv-tick,.rv-tlab{font-size:22px}
  .rv-line{stroke-width:3.4}
  .rv-spike circle{r:8}
  .rv-callout{stroke-width:2.2}
  .reveal-cap{grid-template-columns:auto 1fr;gap:0 11px}
  .reveal-cap p{font-size:16px}
}
.reveal-replay{white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .rv-bar,.rv-bars,.rv-line,.rv-area,.rv-spike,.rv-target,.rv-spike .ring{
    transition:none!important;animation:none!important;
  }
  .rv-bar{transform:scaleY(1)}
  .rv-bars{opacity:.35}
  .rv-hours{opacity:1}
  .rv-line{stroke-dashoffset:0}
  .rv-area{opacity:.14}
  .rv-spike,.rv-target{opacity:1}
  .reveal-cap .step{display:block}
  .reveal-cap .step + .step{margin-top:12px}
  .reveal-replay{display:none}
}

/* Icons. They carry meaning where a word alone is slow to scan: one per
   recurring decision, one per door. House style is the platform diagram's:
   24x24, 1.7 stroke, currentColor, drawn to read down to 20px. */
.doc-t td.ic{width:34px;padding-right:0}
.doc-t td.ic svg{width:22px;height:22px;color:var(--ink-3);display:block;margin-top:1px}
.doc-t tr:hover td.ic svg{color:var(--accent)}
@media (max-width:700px){.doc-t td.ic{width:28px}.doc-t td.ic svg{width:20px;height:20px}}

.door .ic{width:30px;height:30px;color:var(--accent);display:block;margin-bottom:16px}

/* The three questions. A different rhythm on purpose: no rail, no body column,
   just the question at heading size with the sting under it. The page was one
   cadence from top to bottom, and a reader needs a change of pace to feel a
   story move. Each question must be one a driftsleder genuinely cannot answer
   with confidence — otherwise it reads as a quiz. */
/* Two columns, not stacked: the question set at h2 size over a half-empty row
   made three full-width rules with nothing on the right of them, and the
   questions came out larger than the section headings below. Question left,
   the sting right, first baselines aligned. */
.asks{margin-top:0;border-top:1px solid var(--rule)}
.ask{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);
  gap:clamp(18px,3.2vw,46px);align-items:baseline;
  padding-block:clamp(18px,2.2vw,28px);border-bottom:1px solid var(--rule-soft)}
@media (max-width:760px){.ask{grid-template-columns:1fr;gap:9px}}
.ask h3{
  font-size:clamp(20px,1.95vw,25px);font-weight:600;letter-spacing:-0.018em;
  line-height:1.22;margin:0;
}
.ask p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}

/* Big numbers as a device. Horizon puts three under the hero and they carry the
   page; ours differ in one way that matters: every figure states what kind of
   evidence it is, directly under it. That is the version of this move we are
   allowed to make, and it is the one competitors cannot copy without admitting
   their own numbers are unlabelled. */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);
  margin-top:clamp(26px,3.4vw,42px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--rule)}
@media (max-width:760px){.nums{grid-template-columns:1fr;gap:26px}}
.nums .n{min-width:0}
.nums .v{
  display:block;font-family:var(--mono);font-weight:500;color:var(--accent);
  font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}
.nums .v small{font-size:.4em;margin-left:4px;letter-spacing:0}
.nums .lab{display:block;font-size:15.5px;line-height:1.35;color:var(--ink);margin-top:14px;max-width:22ch}
.nums .ev{margin-top:12px}
.nums .src{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-3);margin-top:8px;max-width:30ch}

/* The products. A card is right here and nowhere else on this page: a product IS
   a separate object you can buy, which is exactly what a border and a fill mean.
   Every competitor puts these high on the front page; we had none at all. */
.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:clamp(26px,3.4vw,40px)}
@media (max-width:900px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.prods{grid-template-columns:1fr}}
.prod{
  display:block;text-decoration:none;color:inherit;min-width:0;
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:22px 22px 20px;transition:border-color .16s ease,background .16s ease;
}
.prod:hover{border-color:var(--field);background:var(--surface-2)}
.prod .ic{width:26px;height:26px;color:var(--accent);display:block;margin-bottom:16px}
.prod .k{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:7px}
.prod h3{font-size:19px;font-weight:600;letter-spacing:-0.015em;margin:0}
.prod p{margin:9px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.prod .go{display:inline-block;margin-top:14px;font-size:14px;color:var(--accent)}
.prod:hover .go{text-decoration:underline;text-underline-offset:4px}

/* "What we do", stolen from Manolin with pride: a visual on one side, two plain
   sentences on the other. The power is in the sentences. The visual was first the
   white Sensa Unity panel from the platform diagram; it read as a foreign object
   on a dark page and spoke spec-sheet. Replaced 16 Sep 2026 with .wflow, which
   says what the two sentences say, in the page's own colours. */
.wwd{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:clamp(28px,5vw,72px);
  align-items:center}
@media (max-width:900px){.wwd{grid-template-columns:1fr;gap:30px}}
.wwd .k{display:block;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:12px}
.wwd h2{font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-0.025em;line-height:1.08}
.wwd .say{font-size:clamp(17px,1.75vw,21px);line-height:1.45;color:var(--ink);margin-top:20px;max-width:34ch}
.wwd .say + .say{margin-top:14px;color:var(--ink-2)}
.wwd .wflow{margin:0}

/* The three beats of the sentences beside it: data comes in, gets a status, gets
   used. Only the middle icon takes the accent, because the status is the part no
   competitor publishes. Same surface, border and 2px corner as the product cards
   below, so the section reads as one family. */
.wflow{background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:clamp(20px,2.4vw,26px)}
.wstep{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;
  align-items:start;padding:clamp(16px,1.9vw,20px) 0;border-top:1px solid var(--rule-hair)}
.wstep:first-child{border-top:0;padding-top:0}
.wstep:last-child{padding-bottom:0}
.wstep .ic{width:24px;height:24px;color:var(--ink-3);margin-top:2px}
.wstep.is-key .ic{color:var(--accent)}
.wstep b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-0.012em;color:var(--ink)}
.wstep span{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* ===========================================================================
   /ai — the chat-first landing, second iteration of the front page.
   Reference is openai.com, whose hero is a chat field with a rotating
   placeholder and a row of destination pills, not the aquaculture rivals.
   Two departures from the document layout at /lab, both deliberate: corners
   are round here because the product's own chat is round, and the page is
   centred rather than railed. Everything else still comes from the tokens.
   Hand-written, not generated. There is no builder for this page.
   =========================================================================== */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.ai-page{background:var(--paper)}
/* Sticky at every width: the menu is the only navigation now that the footer
   list is gone, so it has to stay within reach the whole way down. */
.ai-hdr{
  position:sticky;top:0;z-index:70;
  background:var(--header-bg);backdrop-filter:saturate(160%) blur(10px);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:14px var(--gutter);
}
.ai-hdr::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule-hair);
}
/* Anchor jumps must not land under the bar. */
/* The header hides on the way down and returns on the way up, 18 Sep 2026: "sa den
   folger i prinsippet nedover mens man scroller men gjemmer seg slik at man har storre
   plass til innholdet". The transform is here and the decision is in ai.js. Two things
   it must not break: the scroll-margin below still assumes a visible header, because an
   anchor jump shows it; and prefers-reduced-motion opts out entirely, so a reader who
   asked for stillness keeps a header that never moves. */
.ai-hdr{transition:transform .24s ease}
.ai-hdr.is-away{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){
  .ai-hdr{transition:none}
  .ai-hdr.is-away{transform:none}
}
.ai-sec,.ai-shorts,.ai-hero,.ai-scale{scroll-margin-top:84px}
.ai-brand{display:flex;align-items:center;flex:none}
.ai-brand img{width:88px;height:auto;display:block;filter:var(--art-filter)}
/* Links and dropdown buttons have to sit on the SAME line. A flex row defaults
   to align-items:stretch, so the anchors grew to the row height and their text
   rode at the top of the box while each button's inline-flex centred its own.
   Both element types now get the same box: centred, same padding, same leading. */
.ai-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);margin-left:auto}
/* .ai-dd-t er "Produkter", som er en lenke OG en nedtrekksbryter. Den er et
   barnebarn av .ai-nav og ble derfor ikke truffet av `> a`: den kom ut som
   inline, understreket og 16px/400 mens naboene var inline-flex, rene og
   15px/500, og pilen kunne ikke legge seg ut i en inline-boks. */
.ai-nav > a,.ai-dd > button,.ai-nav .ai-dd-t{
  display:inline-flex;align-items:center;font-size:14.5px;line-height:1.2;
  padding:6px 0;color:var(--ink-2);text-decoration:none;
}
.ai-nav > a:hover,.ai-nav .ai-dd-t:hover{color:var(--ink)}
/* display:inline-block is load-bearing. As a flex item in the header the button
   is blockified anyway, but anywhere else it stayed inline, and an inline box
   ignores vertical padding and margins for layout: on the reel's end card it
   overlapped the paragraph above it. */
.ai-try{
  display:inline-block;flex:none;font-size:14px;font-weight:600;text-decoration:none;
  background:var(--accent);color:var(--on-accent);
  padding:9px 16px;border-radius:999px;
}
.ai-try:hover{text-decoration:underline;text-underline-offset:3px}
/* 760, moved up from 620 on 20 Sep 2026 when the chat field went into the bar.
   Between those two widths there is no room for the logo, four menu words, three
   languages AND a field, and the field's label is the point of it; the menu and
   the languages have a panel of their own and the field does not. Every rule that
   makes the header a phone header keys on this number: the nav, the languages,
   the burger, and the matchMedia in ai.js that closes the panel on the way back
   up. Move one and you have to move all five. */
@media (max-width:760px){
  .ai-nav{display:none}
  .ai-hdr{gap:10px}
  /* The English header keeps a CTA where the Norwegian one has the chat; it moves
     into the panel here, because logo + field + button + menu does not fit. */
  .ai-try-hdr{display:none}
}

.ai-hero{
  max-width:760px;margin:0 auto;padding:clamp(56px,11vh,132px) var(--gutter) 0;
  text-align:center;
}
/* The positioning line. It was set at muted micro-size and nobody read it; at
   16.5px in secondary ink it is the first sentence on the page without
   competing with the question under it. */
.ai-kicker{
  font-size:clamp(15px,1.5vw,17px);font-weight:600;color:var(--ink-2);
  margin:0 0 16px;letter-spacing:-0.005em;
}
.ai-hero h1{
  font-size:clamp(27px,3.9vw,42px);font-weight:600;letter-spacing:-0.025em;
  line-height:1.12;margin:0 0 clamp(26px,3.4vw,38px);text-wrap:balance;
}

/* The field. Round, roomy, and the only thing on the page asking for input. */
.ai-box{
  position:relative;
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:30px;padding:8px 8px 8px 22px;
  transition:border-color .16s ease;
}
.ai-box:focus-within{border-color:var(--accent)}
.ai-box input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font:inherit;font-size:16.5px;color:var(--ink);padding:13px 0;
}
.ai-box input::placeholder{color:var(--ink-3)}
.ai-box button{
  flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;
}
.ai-box button svg{width:19px;height:19px}

/* The rotating hint sits over the field, not in its placeholder attribute, so it
   can be animated. pointer-events:none keeps every click going to the input, and
   the layer is aria-hidden because the <label> already names the field. */
.ai-ph{
  position:absolute;left:22px;right:62px;top:50%;transform:translateY(-50%);
  pointer-events:none;overflow:hidden;white-space:nowrap;text-align:left;
  font-size:16.5px;line-height:1.3;color:var(--ink-3);
  transition:opacity .16s ease;
}
.ai-ph > span{display:inline-block}
/* Every character is laid out from the start and only its visibility changes, so
   the line never reflows while it types. NO transition: a fade left four or five
   characters half-visible at once, which reads as a cloud wiping across rather
   than a hand typing. The edge has to be hard. */
.ai-ph .c{visibility:hidden}
.ai-ph .c.on{visibility:visible}
.ai-ph.is-off{opacity:0}

.ai-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  margin-top:clamp(18px,2.4vw,26px);
}
.ai-chip{
  font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer;
  background:var(--surface);border:1px solid var(--rule-soft);
  border-radius:999px;padding:9px 16px;
  transition:border-color .16s ease,color .16s ease;
}
.ai-chip:hover{border-color:var(--field);color:var(--ink)}

/* The reply. Left-aligned, because an answer is read, not scanned. */
.ai-answer{
  text-align:left;max-width:640px;margin:clamp(34px,4.4vw,52px) auto 0;
  padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--rule-hair);
}
.ai-q{
  font-size:14px;color:var(--ink-3);margin:0 0 14px;
}
.ai-a p{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0}
.ai-a p + p{margin-top:12px}
/* The row under an answer holds the link out, the copy icon and the bookmark. The note for a colleague
   (.ai-send) was taken off the answers 3 Okt 2026; the pill is still «Kopier listen» on the datakart. It is a flex row so the two sit on one line and wrap
   together on a phone rather than the button dropping below a short link.
   `font:inherit` is a SHORTHAND and silently resets line-height, which is the trap
   that put the nav words on two different heights in September, so the line-height
   is restated after it. It is a button and not an anchor, so the site-wide link
   rule cannot reach it and no :not() has to be added to that selector. */
.ai-more{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.ai-send{font:inherit;font-size:14px;line-height:1.1;color:var(--ink-2);background:none;
  border:1px solid var(--rule);border-radius:999px;padding:9px 15px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease}
.ai-send:hover,.ai-send:focus-visible{border-color:var(--accent);color:var(--accent)}
.ai-send.is-done{border-color:var(--accent);color:var(--accent)}
/* Kopier svaret, et ikon uten ord (3 Okt 2026, Martin viste kopiknappen i Claude). Ved lenken; til hoeyre ble
   proevd og angret samme dag (Martin: «angre»). Ordet staar ved pekeren
   (data-tip i ai.js) og i aria-label; flaten kommer bare ved hover, og firkantene blir en hake naar det er kopiert. */
.ai-kopi{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;margin:0 0 0 -4px;color:var(--ink-2);
  background:none;border:0;border-radius:8px;cursor:pointer;transition:color .18s ease,background-color .18s ease}
.ai-kopi svg{width:17px;height:17px}
.ai-kopi:hover,.ai-kopi:focus-visible{color:var(--ink);background:var(--rule-soft)}
.ai-kopi.is-done{color:var(--ink)}
/* Lagre til senere (sensaLagret i ai.js, 3 Okt 2026): bokmerket rett etter kopiknappen, som ett par; fylt naar det er lagret. */
.ai-kopi.ai-lagre{margin-left:-16px}
.ai-lagre.is-done svg path{fill:currentColor}
.ai-more a{font-size:14.5px;color:var(--accent);text-decoration:none}
.ai-more a:hover{text-decoration:underline;text-underline-offset:4px}

/* /ai — value cases. The section the page is really for: the chat gets you in,
   this is what you came to find out. Three figures, then the one customer we are
   allowed to name, with their own words and their own site.
   Every figure carries its evidence mark, same scale as everywhere else. */
.ai-sec{max-width:1140px;margin:0 auto;padding:clamp(76px,9vw,132px) var(--gutter) 0}
main > section:last-child{padding-bottom:clamp(64px,7.5vw,104px)}
/* No eyebrow above these. A label that only repeats the heading under it is the
   thing that makes a page look generated; removed 16 Sep 2026 on Martin's read.
   The small labels that remain, on the cards, name a sector or a category and
   therefore carry information the heading does not. */
.ai-sec-h h2{
  font-size:clamp(26px,3.3vw,40px);font-weight:600;letter-spacing:-0.025em;
  line-height:1.1;margin:0;max-width:24ch;text-wrap:balance;
}
.ai-lede{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:18px 0 0;max-width:62ch}

.ai-cases{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:clamp(30px,3.8vw,46px);
}
@media (max-width:900px){.ai-cases{grid-template-columns:1fr}}
.ai-case{
  background:var(--surface);border:1px solid var(--rule);border-radius:18px;
  padding:clamp(22px,2.4vw,28px);min-width:0;
}
.ai-case-k{font-size:12.5px;color:var(--ink-3);margin:0}
.ai-num{
  font-family:var(--mono);font-size:clamp(38px,4.6vw,56px);font-weight:500;
  color:var(--accent);letter-spacing:-0.03em;line-height:1;margin:16px 0 0;
  font-variant-numeric:tabular-nums;
}
.ai-num small{font-size:.36em;margin-left:5px;letter-spacing:0}
.ai-case h3{
  font-size:16.5px;font-weight:600;letter-spacing:-0.01em;line-height:1.3;
  margin:12px 0 0;color:var(--ink);
}
.ai-case > p:not(.ai-case-k):not(.ai-case-src):not(.ai-num){
  font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:11px 0 0;
}
.ai-case .ev{margin-top:18px}
.ai-case-src{font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:8px 0 0}

/* The named case. Who said it on the left, what they said on the right. Name,
   title and their mark sit OUTSIDE the bubble: crammed inside they turned a
   remark into a business card, which is what made it look homemade. */
.ai-feat{
  margin-top:clamp(30px,3.6vw,48px);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,3.6vw,52px);align-items:center;
}
.ai-cred{display:flex;flex-direction:column;align-items:flex-start;flex:none}
.ai-face{
  width:clamp(104px,13vw,168px);height:auto;aspect-ratio:1;
  border-radius:50%;object-fit:cover;
}
.ai-cred-n{margin:18px 0 0;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.ai-cred-t{margin:4px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.45;white-space:nowrap}
.ai-cred-t a{color:var(--ink-2);text-decoration:none}
.ai-cred-t a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* The bubble is the only container: a card around the portrait AND the bubble was
   a box inside a box, which made the moment read as a component. It takes the
   same --surface as the three figure cards above it, so a free-standing quote
   still belongs to the section it sits in.
   No outline: a hairline measured 1.03 against its own fill, which reads as a
   rendering artefact rather than a line. */
/* The bubble carries a --rule outline, the same line the three figure cards
   above it have. It went without one until 17 Sep 2026, on the reasoning that
   the lift from --paper to --surface carried the shape; measured, that lift is
   1.06 in light and 1.12 in dark, so it carried the shape in neither, and in
   light a white bubble on a near-white page simply was not there. Martin: "den
   kan bli mer synlig så vi ser at det er en snakkeboble." --rule measures 3.34
   against the fill in light and 3.24 in dark, which is a line in both. */
.ai-bubble{
  position:relative;min-width:0;margin:0;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:20px;padding:clamp(24px,2.8vw,38px);
  font-size:clamp(19px,2.3vw,29px);line-height:1.32;
  letter-spacing:-0.02em;color:var(--ink);text-wrap:pretty;
}
/* The tail is still one rotated square, but now it has to CONTINUE the outline
   rather than just be more of the bubble. Rotated 45deg, the two edges that
   form the leftward point are the original left and bottom, so those two carry
   the line and the other two stay bare; the square's own fill sits over the
   bubble's border and opens it where the tail joins. */
.ai-bubble::before{
  content:"";position:absolute;left:-9px;top:46px;width:16px;height:16px;
  transform:rotate(45deg);background:var(--surface);
  border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);
  border-radius:0 0 0 3px;
}
@media (max-width:700px){
  .ai-feat{grid-template-columns:1fr;gap:20px}
  .ai-cred{
    width:100%;flex-direction:row;align-items:center;flex-wrap:wrap;
    gap:0 16px;
  }
  .ai-face{width:76px}
  .ai-cred-t{white-space:normal}
  .ai-cred-n{margin:0}
  .ai-cred-t{margin:3px 0 0;width:100%;padding-left:92px}
  /* stacked the other way round, so the tail points up at the portrait */
  .ai-bubble::before{left:34px;top:-8px}
}
/* /ai — the scale claim. The one place on the site that raises its voice, so it
   gets its own band. The boldness sits on the SIZE OF THE SEARCH SPACE, which is
   checkable, not on the word "solve": an optimiser prunes, it does not
   enumerate, and the paragraph under the numbers says so. A CTO who does the
   arithmetic must find it holds, or the claim costs us more than it earns. */
/* No band. Stacking coloured strips was how each section got solved locally,
   and together they made the page layers on layers; the 104px figure is loud
   enough on its own. */
.ai-scale{margin-top:clamp(76px,9vw,132px)}
.ai-scale-in{max-width:1140px;margin:0 auto;padding-inline:var(--gutter)}
/* The heading is now the question an operator actually has, and the claim sits
   under it as the answer's difficulty. Led with the boast alone it arrived out of
   nowhere; Martin read it as misplaced and out of context. */
.ai-scale h2{
  font-size:clamp(27px,4.1vw,52px);font-weight:600;letter-spacing:-0.032em;
  line-height:1.06;margin:0;text-wrap:balance;
}
.ai-scale-l{
  font-size:clamp(17px,1.8vw,21px);line-height:1.45;color:var(--ink-2);
  margin:clamp(14px,1.6vw,20px) 0 0;max-width:44ch;
}

/* The two figures side by side, not stacked in a list: the comparison IS the
   point, and a ratio of 10^250 cannot be drawn as a bar. The size difference
   between the two numbers is the illustration. */
.ai-vs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,64px);
  margin:clamp(24px,2.8vw,36px) 0 0;max-width:46rem;
}
@media (max-width:620px){.ai-vs{grid-template-columns:1fr;gap:26px}}
.ai-vs-r{min-width:0}
.ai-vs dt{margin:0}
.ai-vs .num{
  display:block;font-family:var(--mono);font-weight:500;letter-spacing:-0.035em;
  font-variant-numeric:tabular-nums;color:var(--ink-3);
  font-size:clamp(30px,3.4vw,42px);line-height:1;
}
.ai-vs .num sup{font-size:.5em;vertical-align:super;letter-spacing:0}
.ai-vs-big .num{color:var(--accent);font-size:clamp(50px,8.4vw,104px)}
.ai-vs dd{
  margin:14px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-3);max-width:26ch;
}
.ai-vs-big dd{color:var(--ink-2);font-size:15.5px}

.ai-scale-t{
  font-size:16.5px;line-height:1.6;color:var(--ink-2);
  margin:clamp(22px,2.6vw,32px) 0 0;max-width:58ch;
}
.ai-scale-src{font-size:13px;color:var(--ink-3)}
.ai-scale-cta{display:inline-block;margin-top:clamp(20px,2.4vw,28px)}

/* Footer. One row on desktop, stacked on a phone. */
.ai-foot{border-top:1px solid var(--rule-hair)}
.ai-foot-in{
  max-width:1140px;margin:0 auto;padding:clamp(30px,3.4vw,44px) var(--gutter);
  display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);flex-wrap:wrap;
}
.ai-foot-nav{display:flex;gap:clamp(12px,1.8vw,24px);flex-wrap:wrap}
.ai-foot-nav a{font-size:14px;color:var(--ink-2);text-decoration:none}
.ai-foot-nav a:hover{color:var(--ink)}
.ai-social{display:flex;gap:12px}
.ai-social a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);border:1px solid var(--rule-soft);
  transition:color .16s ease,border-color .16s ease;
}
.ai-social a:hover{color:var(--accent);border-color:var(--accent)}
.ai-social svg{width:17px;height:17px}
/* Ingen ring rundt ikonene, 2 Okt 2026 (Martin: «de hvite rundingen rundt linkdin og youtube, de ser
   ikke bra ut»). Flaten er fortsatt 34 px saa de er lette aa treffe; bare tegnet vises. /ai, den
   frosne siden, har sin egen fot uten Personvern og beholder ringene. */
.ai-foot-in:has(.ai-foot-pv) .ai-social{gap:4px;margin-right:-8px}
.ai-foot-in:has(.ai-foot-pv) .ai-social a{border:0;border-radius:0;transition:color .16s ease}
.ai-foot-in:has(.ai-foot-pv) .ai-social a:hover{color:var(--ink)}
.ai-foot-in:has(.ai-foot-pv) .ai-social svg{width:18px;height:18px}
/* Hover paa ikonene, 3 Okt 2026 (Martin: «hover over linkedin og youtube så må det komme indikasjon på at vi kan
   trykke»). Bare fargen skiftet, og det saas nesten ikke. Naa vokser en graa runding fram bak tegnet, samme
   graa fyll som «Se produktene». Ingen ring i hvile; den ble tatt ut 2 Okt. */
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-social a{position:relative;isolation:isolate;color:var(--ink-2)}
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-social a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:var(--surface-2);transform:scale(0);transition:transform .35s cubic-bezier(.3,.7,.2,1);pointer-events:none}
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-social a:is(:hover,:focus-visible){color:var(--ink)}
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-social a:is(:hover,:focus-visible)::before{transform:scale(1)}
@media (prefers-reduced-motion:reduce){html.boom .ai-foot-in:has(.ai-foot-pv) .ai-social a::before{transition:none}}
/* Det samme paa ordene i bunnlinja, 3 Okt 2026 (Martin: «gjør det samme på språk og personvern også»): Personvern,
   Informasjonskapsler, adressen, Se introen og EN faar en graa pille bak ordet i stedet for understrek. Pillen
   ligger utenfor ordet (::before med negativ inset), saa ingenting flytter seg. NO og ES kan ikke trykkes paa og
   faar ingen. ES var --rule og forsvant mot flaten (Martin: «ser nesten ikke ES»); naa er den --ink-3 som NO. */
html.boom .ai-foot-in:has(.ai-foot-pv) :is(.ai-foot-pv,.ai-foot-adr,.ai-foot-intro,.ai-lang a){position:relative;isolation:isolate}
html.boom .ai-foot-in:has(.ai-foot-pv) :is(.ai-foot-pv,.ai-foot-adr,.ai-foot-intro,.ai-lang a)::before{content:"";position:absolute;inset:-5px -10px;z-index:-1;
  border-radius:999px;background:var(--surface-2);transform:scale(.6);opacity:0;transition:transform .35s cubic-bezier(.3,.7,.2,1),opacity .2s ease;pointer-events:none}
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-lang a::before{inset:-5px -7px}
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-lang{gap:14px}
html.boom .ai-foot-in:has(.ai-foot-pv) :is(.ai-foot-pv,.ai-foot-adr,.ai-foot-intro,.ai-lang a):is(:hover,:focus-visible){color:var(--ink);text-decoration:none}
html.boom .ai-foot-in:has(.ai-foot-pv) :is(.ai-foot-pv,.ai-foot-adr,.ai-foot-intro,.ai-lang a):is(:hover,:focus-visible)::before{transform:scale(1);opacity:1}
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-lang .off{color:var(--ink-3)}
/* Spraaket du er paa har pillen hele tiden, 3 Okt 2026 (Martin: «den kan indikere hvilket språk man er på nå»). */
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-lang [aria-current]{position:relative;isolation:isolate;color:var(--ink)}
html.boom .ai-foot-in:has(.ai-foot-pv) .ai-lang [aria-current]::before{content:"";position:absolute;inset:-5px -7px;z-index:-1;border-radius:999px;background:var(--surface-2);pointer-events:none}
@media (prefers-reduced-motion:reduce){html.boom .ai-foot-in:has(.ai-foot-pv) :is(.ai-foot-pv,.ai-foot-adr,.ai-foot-intro,.ai-lang a)::before{transition:none}}
.ai-lang{display:flex;gap:8px;font-size:13px;color:var(--ink-3)}
.ai-lang a{color:var(--ink-2);text-decoration:none}
.ai-lang a:hover{color:var(--ink)}
.ai-foot-c{font-size:13px;color:var(--ink-3);margin:0}
/* The address carries the split between the footer's two clusters, because it
   is the last element that exists in BOTH languages: chrome.py cuts the intro
   link out of the English footer, so an auto margin there would silently stop
   working on eleven pages. It is a link to the map from 23 Sep 2026, and it
   takes the same hover as the intro link beside it rather than a permanent
   underline: it is still a utility line and not a call to action. */
.ai-foot-adr{font-size:13px;color:var(--ink-3);margin:0 auto 0 0;text-decoration:none}
.ai-foot-adr:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* The way back to the intro. Same size and same ink as the copyright beside it,
   because it is the same kind of thing: a utility, not content. NO arrow, which
   is the rule the "Se omtale" link left behind when it was taken out of this row
   on 18 Sep 2026: an arrow is a call to action inside content and decoration
   next to a copyright line. */
.ai-foot-intro{font-size:13px;color:var(--ink-3);text-decoration:none}
.ai-foot-intro:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .ai-foot-in{flex-direction:column;align-items:flex-start;gap:18px}
  .ai-foot-adr{margin-right:0}
}
/* TO LINJER SOM LESES OVENFRA, 2 Okt 2026 (Martin: «hierarkiet er litt rart. hvordan skal man lese
   det?»). Oeverst hvem vi er og hvor du ellers finner oss: merket til venstre, LinkedIn og YouTube til
   hoeyre. Under, i smaa grå bokstaver, det smaa: til venstre fakta (opphavsrett og adresse), til
   hoeyre det man kan trykke paa (personvern, informasjonskapsler, introen, spraak). Foer sto fire
   ulike ting i samme rad som logoen og opphavsretten alene under, saa raden hadde ingen rekkefoelge.
   Delingen til hoeyre baeres av Personvern-lenken, som finnes paa begge spraak. Historikken (to rader
   23 Sep, én linje 1 Okt) staar i beslutningsloggen. :has(.ai-foot-pv) holder regelen unna /ai. */
@media (min-width:761px){
  .ai-foot-in:has(.ai-foot-pv){row-gap:clamp(18px,2vw,26px);column-gap:clamp(14px,1.8vw,24px)}
  .ai-foot-in:has(.ai-foot-pv) > .ai-brand{order:1}
  .ai-foot-in:has(.ai-foot-pv) > .ai-social{order:2;margin-left:auto}
  .ai-foot-in:has(.ai-foot-pv)::after{content:"";order:3;flex-basis:100%;height:0}
  .ai-foot-in:has(.ai-foot-pv) > .ai-foot-c{order:4}
  .ai-foot-in:has(.ai-foot-pv) > .ai-foot-adr{order:5;margin-right:0}
  .ai-foot-in:has(.ai-foot-pv) > .ai-foot-pv{order:6}
  .ai-foot-in:has(.ai-foot-pv) > a.ai-foot-pv{margin-left:auto}
  .ai-foot-in:has(.ai-foot-pv) > .ai-foot-intro{order:7}
  .ai-foot-in:has(.ai-foot-pv) > .ai-lang{order:8;margin-left:clamp(6px,1vw,14px)}
}
/* Paa telefon samme lesing: merket og ikonene oeverst, saa fakta, saa lenkene i én rad som brekker. */
@media (max-width:760px){
  .ai-foot-in:has(.ai-foot-pv){flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 20px}
  .ai-foot-in:has(.ai-foot-pv) > .ai-brand{order:1}
  .ai-foot-in:has(.ai-foot-pv) > .ai-social{order:2;margin-left:auto}
  .ai-foot-in:has(.ai-foot-pv)::after{content:"";order:3;flex-basis:100%;height:0}
  .ai-foot-in:has(.ai-foot-pv) > .ai-foot-c{order:4}
  .ai-foot-in:has(.ai-foot-pv) > .ai-foot-adr{order:5;flex-basis:100%;margin-top:-8px}
  .ai-foot-in:has(.ai-foot-pv) > .ai-foot-pv{order:6}
  .ai-foot-in:has(.ai-foot-pv) > .ai-foot-intro{order:7}
  .ai-foot-in:has(.ai-foot-pv) > .ai-lang{order:8}
}

/* /ai — dropdown nav. Three words plus a button at the top; everything else is
   one hover away. Hover opens it on a pointer, the button opens it on a tap or
   a keyboard, and Escape closes it. Hidden below 620px, where the page has no
   nav at all yet. */
.ai-dd{position:relative}
.ai-dd > button,.ai-dd > .ai-dd-t{font-family:inherit;font-weight:inherit;background:none;border:0;cursor:pointer;gap:6px}
.ai-dd > button::after,.ai-dd > .ai-dd-t::after{
  content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .16s ease;
}
.ai-dd > button:hover,.ai-dd > .ai-dd-t:hover{color:var(--ink)}
.ai-dd:hover > button::after,.ai-dd:hover > .ai-dd-t::after,
.ai-dd > button[aria-expanded="true"]::after,.ai-dd:focus-within > .ai-dd-t::after{
  transform:translateY(1px) rotate(225deg);
}
.ai-dd-p{
  position:absolute;top:calc(100% + 10px);left:-14px;z-index:40;
  min-width:230px;padding:8px;border-radius:14px;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 18px 44px var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
/* Naa ogsaa paa FOKUS paa selve lenken, ikke bare inne i panelet: naar
   "Produkter" er en lenke navigerer Enter, saa en tastaturbruker maatte ellers
   forlate siden for aa se de seks. Med :focus-within paa .ai-dd aapner nedtrekket
   naar man tabber til ordet, og Enter gaar til oversikten. */
.ai-dd:hover .ai-dd-p,.ai-dd > button[aria-expanded="true"] + .ai-dd-p,
html:not(.boom) .ai-dd:focus-within .ai-dd-p,.ai-dd-p:focus-within{opacity:1;visibility:visible;transform:none}
/* Paa BOOM-sidene aapner fokus alene ikke nedtrekket (APG Disclosure Navigation, apg-gjennomgang nr. 13, 7 Okt 2026):
   pilen ved «Produkter» og «Om oss» er knapper med aria-expanded. */
/* Escape lukker nedtrekket selv om fokus eller pekeren er der (WCAG 1.4.13, funn 9, 7 Okt 2026); ai.js tar klassen
   av naar pekeren eller fokus gaar ut. */
.ai-dd.is-lukket .ai-dd-p{opacity:0!important;visibility:hidden!important}
/* PANELET ER IKKE EN LISTE MED GRAA UNDERTEKST, 23 Sep 2026: "jeg er ikke
   imponert nok over nedtrekksmenyen ... kan den gjoeres litt mindre generisk og
   litt mer elegant og stilren?" Feilen var at den ikke brukte sidens eget
   argument: seks lenker paa 14,5px med en graa linje under hver er akkurat den
   nedtrekksmenyen enhver SaaS-side har. Her baerer STOERRELSE og SPERRING
   hierarkiet, som er det sanity.io-skalaen laerer, saa navnet gaar opp i
   displayskriften og kategorien blir en stille linje under. Ingen fyllfarge paa
   hover: raden faar sidens egen strek som tegner seg inn fra venstre, den samme
   som produktkortene og "Se omtale" i bunnmargen bruker. */
.ai-dd-p a{
  display:block;padding:9px 12px 11px;border-radius:0;text-decoration:none;color:var(--ink);
}
.ai-dd-n{
  display:block;font-size:16px;line-height:1.25;letter-spacing:-.02em;position:relative;
  width:max-content;max-width:100%;
}
/* Streken hoerer til NAVNET og ikke til raden, ellers ligger den under
   kategorien og leser som en understreking av begge. scaleX fra venstre koster
   ingen layout; en bredde-overgang ville reflowet panelet. */
.ai-dd-n::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.ai-dd-p a:hover .ai-dd-n::after,.ai-dd-p a:focus-visible .ai-dd-n::after{transform:scaleX(1)}
.ai-dd-p a span:not(.ai-dd-n){display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px}
.ai-dd-p a:hover span:not(.ai-dd-n){color:var(--ink-2)}
/* SEKS I ÉN KOLONNE ER 400px, altsaa en liste man leser. To kolonner gjoer det
   til et lite rutenett man skanner, samme form som de seks kortene paa forsiden.
   Selskap blir staaende som kolonne: fire korte ord er ingen liste. */
.ai-dd-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;
  min-width:min(430px,calc(100vw - 2 * var(--gutter)));
}

/* /ai — the shorts screen. One band, not three: the heading used to float in a
   strip of page between the teal claim above and the full-bleed stage below,
   which read as a gap rather than a section. Heading and player now share the
   band, and the blurred backdrop sits behind both.
   A 9:16 clip cannot be full width without stretching or cropping it: at 1280px
   wide it would have to be 2276px tall. So the BAND goes edge to edge and the
   flanks are filled with the clip's own poster, blurred, which costs one image
   rather than a second video decode.
   One deliberate difference from YouTube Shorts: the wheel is never captured.
   Shorts owns its whole page; this sits on a front page, and a section that eats
   the scroll while someone is reading on is worse than no section. There is no
   nested scroll container. Clips change by button, key and swipe. */
/* No band and no blurred backdrop either. The blur existed to fill the flanks of
   a full-bleed stage; on a light ground it turned to grey mud, and the stacked
   strips were the thing that made the page feel layered. The player has a shadow
   and the page has one background. */
.ai-shorts{padding-top:clamp(76px,9vw,132px)}
.ai-shorts-in{max-width:1140px;margin:0 auto;padding-inline:var(--gutter);text-align:center}
.ai-shorts-h{max-width:52ch;margin-inline:auto}

.sh-stage{
  --sh-hmax:min(880px,calc(100vh - 210px));
  --sh-chrome:calc((2 * var(--gutter)) + 136px);
  --sh-w:min(calc(var(--sh-hmax) * 9 / 16), calc(100vw - var(--sh-chrome)));
  --sh-h:calc(var(--sh-w) * 16 / 9);
  --sh-rail:46px;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(28px,3.4vw,44px);
  max-width:1140px;margin-inline:auto;padding-inline:var(--gutter);
}

.sh-stage::before{content:"";width:var(--sh-rail);flex:none}
.sh-screen{
  position:relative;width:var(--sh-w);height:var(--sh-h);flex:none;
  overflow:hidden;border-radius:18px;background:var(--paper);
  box-shadow:0 30px 80px var(--shadow);
  touch-action:pan-y;
}
.sh-screen:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sh-item{
  position:absolute;inset:0;display:grid;
  transform:translateY(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),visibility .42s;
}
.sh-item.is-on{transform:translateY(0);visibility:visible}
.sh-item.is-past{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.sh-item{transition:none}}
.sh-item video{width:100%;height:100%;object-fit:cover;display:block;grid-area:1/1}

.sh-over{
  grid-area:1/1;align-self:end;z-index:2;padding:22px 22px 24px;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.34) 72%,transparent 100%);
}
.sh-over .sh-t{font-size:19px;font-weight:600;color:#fff;margin:0;line-height:1.25}
.sh-over .sh-d{font-size:14px;color:#fff;opacity:.94;margin:7px 0 0;line-height:1.45}
.sh-over a{display:inline-block;margin-top:13px;font-size:14px;color:#fff;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sh-pos{
  position:absolute;top:15px;right:17px;z-index:3;margin:0;
  font-family:var(--mono);font-size:12px;color:#fff;opacity:.82;
  font-variant-numeric:tabular-nums;
}
.sh-end{background:var(--surface);place-items:center;text-align:center}
.sh-end-in{padding:28px;max-width:26ch}
.sh-end .sh-t{color:var(--ink);font-size:21px;font-weight:600;margin:0}
.sh-end .sh-d{color:var(--ink-2);font-size:15px;margin:11px 0 0;line-height:1.5}
.sh-end .ai-try{margin-top:20px}

.sh-rail{display:flex;flex-direction:column;gap:12px;flex:none}
.sh-nav{
  width:46px;height:46px;border-radius:50%;cursor:pointer;flex:none;
  background:var(--surface);border:1px solid var(--rule);color:var(--ink);
  display:grid;place-items:center;transition:color .16s ease,border-color .16s ease;
}
.sh-nav:hover{color:var(--accent);border-color:var(--accent)}
.sh-nav[disabled]{opacity:.32;cursor:default}
.sh-nav[disabled]:hover{color:var(--ink);border-color:var(--rule)}
.sh-nav svg{width:19px;height:19px;grid-area:1/1}
.sh-mute .sh-on{display:none}
.sh-mute[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.sh-mute[aria-pressed="true"] .sh-on{display:block}
.sh-mute[aria-pressed="true"] .sh-off{display:none}

@media (max-width:620px){
  .sh-stage{
    --sh-rail:40px;
    --sh-chrome:calc((2 * var(--gutter)) + 90px);
    --sh-w:min(calc(min(720px,(100vh - 190px)) * 9 / 16), calc(100vw - var(--sh-chrome)));
    gap:10px;
  }
  .sh-nav{width:40px;height:40px}
}

/* /ai — products. Same card family as the value cases, so the page reads as one
   system. The button tells the truth about what happens next: a filled "Prøv"
   only where something really runs in the browser, an outline "Be om demo"
   where it does not. When a demo ships, the card's tag and button flip. */
.ai-prods{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:clamp(30px,3.8vw,46px);
}
@media (max-width:900px){.ai-prods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ai-prods{grid-template-columns:1fr}}
.ai-prod{
  position:relative;min-width:0;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule);border-radius:18px;
  padding:clamp(22px,2.4vw,28px);
}
.pr-ic{width:26px;height:26px;color:var(--accent);display:block;margin-bottom:16px}
.pr-tag{
  position:absolute;top:clamp(20px,2.2vw,26px);right:clamp(20px,2.2vw,26px);
  font-size:11.5px;line-height:1;padding:6px 10px;border-radius:999px;
  color:var(--ink-3);border:1px solid var(--rule-soft);
}
.pr-live{color:var(--accent);border-color:var(--accent)}
.ai-prod h3{
  font-size:19px;font-weight:600;letter-spacing:-0.015em;margin:7px 0 0;color:var(--ink);
}
.pr-b{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:10px 0 0}
.pr-do{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:20px}
.pr-more{font-size:14px;color:var(--ink-2);text-decoration:none}
.pr-more:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* The "ask us" variant of the try button: same shape, no fill, so the eye can
   tell at a glance which products are actually live. */
.ai-try-q{background:none;color:var(--ink);border:1px solid var(--rule)}
.ai-try-q:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* /ai — theme switch and language, kept to an icon and three letters so the
   header stays four words wide. ES is present but inactive: the page is not
   translated, and a live link to a page that does not exist is a 404, not a
   feature. */
/* Language and the theme switch are utilities, not navigation. Separation is by
   space alone: a rule here was tried 16 Sep 2026 and cut the same day. */
.ai-tools{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);flex:none;
  margin-left:clamp(8px,1.8vw,24px);
}
@media (max-width:760px){.ai-tools{margin-left:auto}}
.ai-theme{
  width:32px;height:32px;border-radius:50%;cursor:pointer;flex:none;
  background:none;border:1px solid var(--rule-soft);color:var(--ink-2);
  display:grid;place-items:center;transition:color .16s ease,border-color .16s ease;
}
.ai-theme:hover{color:var(--accent);border-color:var(--accent)}
.ai-theme svg{width:16px;height:16px;grid-area:1/1}
/* The icon shows what the button DOES, not what you are looking at: a sun in
   dark mode because clicking gives you light, a moon in light mode. That matches
   the aria-label, which has always named the action. */
.ai-theme .ai-moon{display:none}
[data-theme="light"] .ai-theme .ai-moon{display:block}
[data-theme="light"] .ai-theme .ai-sun{display:none}
.ai-langs{display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1}
.ai-langs a{color:var(--ink-3);text-decoration:none}
.ai-langs a:hover{color:var(--ink)}
.ai-langs [aria-current]{color:var(--ink);font-weight:600}
.ai-langs .off{color:var(--rule);cursor:default}
@media (max-width:760px){.ai-langs{display:none}}

/* /ai — the phone menu, below 760px. Full-height panel under the header rather
   than a cramped dropdown: the page has fourteen destinations and a phone has
   one thumb. Closes on Escape, on a tap outside, on any link, and if the window
   grows past the breakpoint while it is open. */
.ai-burger{
  display:none;width:36px;height:36px;border-radius:50%;cursor:pointer;flex:none;
  background:none;border:1px solid var(--rule-soft);color:var(--ink-2);
  padding:0;place-items:center;align-content:center;justify-items:center;gap:5px;
}
.ai-burger span{display:block;width:15px;height:1.5px;background:currentColor;
  transition:transform .18s ease,opacity .18s ease}
.ai-burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.ai-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:760px){.ai-burger{display:grid}}

.ai-menu{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:60;
  background:var(--paper);overflow-y:auto;
  padding:76px var(--gutter) 40px;
}
.ai-menu[hidden]{display:none}
.ai-menu-in{display:flex;flex-direction:column}
.ai-menu-k{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  margin:22px 0 6px;
}
.ai-menu-in > .ai-menu-k:first-child{margin-top:4px}
/* :not(.ai-menu-cta) matters. Without it this rule outranks .ai-try on
   specificity and paints the button's label in body ink on the accent fill,
   which is 1.2:1. The contrast tool cannot catch that: both colours are legal
   tokens, the bug is which selector wins. */
.ai-menu-in > a:not(.ai-menu-cta){
  display:block;padding:11px 0;text-decoration:none;font-size:17px;color:var(--ink);
  border-bottom:1px solid var(--rule-hair);
}
.ai-menu-in > a span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.ai-menu-lang{display:flex;flex-direction:column;gap:2px;font-size:15px}
.ai-menu-lang > *{padding:9px 0;color:var(--ink-2);text-decoration:none}
.ai-menu-lang [aria-current]{color:var(--ink);font-weight:600}
.ai-menu-lang .off{color:var(--ink-3)}
.ai-menu-tema button{font:inherit;text-align:left;background:none;border:0;cursor:pointer;color:var(--ink-2)}
.ai-menu-tema [aria-pressed="true"]{color:var(--ink);font-weight:600;cursor:default}
.sd .ai-menu-tema,.sd .ai-menu-k-tema{display:none}
.ai-menu-cta{margin-top:24px;text-align:center;padding:14px 18px;font-size:15.5px}
body.ai-locked{overflow:hidden}
@media (min-width:761px){.ai-menu{display:none}}


/* /ai — coverage. Four cards carrying each article's own preview image, same
   family as the FishGlobe feature: picture, source, headline. Those images are
   the ones each publisher puts out for exactly this purpose, but Shifter's two
   are their photographs and should be cleared before this page goes public. */
.nw{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:clamp(28px,3.4vw,42px);
}
@media (max-width:900px){.nw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.nw{grid-template-columns:1fr}}
.nw-card{
  display:flex;flex-direction:column;min-width:0;text-decoration:none;
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  overflow:hidden;transition:border-color .16s ease;
}
.nw-card:hover{border-color:var(--field)}
.nw-card > img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover}
/* Where the article's own picture shows someone who has nothing to do with us, a
   brand tile is more honest than borrowing a stranger's face. */
.nw-mark{aspect-ratio:8/5;display:grid;place-items:center;background:var(--wash)}
.nw-mark img{width:38%;max-width:150px;height:auto;filter:var(--art-filter)}
.nw-who{
  font-size:12.5px;color:var(--ink-3);margin:16px 18px 0;
}
.nw-who span::before{content:"\00b7";margin:0 7px}
.nw-card h3{
  font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-0.01em;
  color:var(--ink);margin:8px 18px 0;
}
/* Two of the headlines are about the event, not about us. This line says why the
   card is on our page at all. */
.nw-us{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin:8px 18px 0}
.nw-go{
  display:block;font-size:14px;color:var(--accent);
  margin:auto 18px 18px;padding-top:16px;
}
.nw-card:hover .nw-go{text-decoration:underline;text-underline-offset:4px}

/* /ai — product pages, generated by tools/ai/build.py. They reuse the front
   page's header, menu and footer verbatim, so only the page body needs rules. */
.pp-hero{max-width:1140px}
.pp-hero h1{
  font-size:clamp(34px,5vw,62px);font-weight:600;letter-spacing:-0.032em;
  line-height:1.04;margin:0;
}
/* Kategorien staar UNDER navnet fra 23 Sep 2026, saa den beskriver det i stedet
   for aa varsle det. 12px luft: naer nok til aa hoere til overskriften, ikke saa
   naer at den ser ut som en andre linje av den. Ikonet staar PAA den linja, ikke
   over navnet: 17px arver etikettens egen farge, saa de to leser som ett merke og
   ikke som to objekter. Det var 30px i aksentfargen over navnet til 23 Sep, der
   det var et tredje element foer emnet. */
.pp-hero .ai-case-k{margin-top:12px;display:flex;align-items:center;gap:8px}
.pp-ic{width:17px;height:17px;flex:none}
.pp-lead{
  font-size:clamp(19px,2.3vw,29px);line-height:1.3;letter-spacing:-0.02em;
  color:var(--ink);margin:clamp(14px,1.8vw,20px) 0 0;max-width:24ch;
}
.pp-intro{
  font-size:16.5px;line-height:1.62;color:var(--ink-2);
  margin:clamp(18px,2.2vw,26px) 0 0;max-width:58ch;
}
.pp-hero .ai-try{margin-top:clamp(22px,2.6vw,30px)}

/* De to lenkene paa et personkort staar i samme rad, "Snakk med" foerst fordi
   det er den vi vil at folk skal bruke. LinkedIn er den de kjenner og finner
   uansett. margin-top:auto paa raden, ikke paa lenken, naar de er to. */
.person .person-lenker{display:flex;flex-wrap:wrap;gap:18px 26px;margin:0;
  margin-top:auto;padding-top:18px}
.person .person-lenker .go-link{margin-top:0;padding-top:0}
/* Kortet FALLER NED naar noen trykker "Snakk med <fornavn>" paa samme side.
   Det er dét som gjoer at valget leses som noe som skjedde, og ikke som noe som
   alltid sto der. transform og opacity, saa den koster ingen layout. */
@keyframes kort-ned{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.person-card.faller{animation:kort-ned .32s cubic-bezier(.22,.61,.36,1) both}
.contact-valgt:not(:has(.contact-til:not([hidden]))){margin:0}
@media (prefers-reduced-motion:reduce){.person-card.faller{animation:none}}

/* Hvem meldingen er til, naar noen kom hit via "Snakk med <fornavn>". Staar
   skjult ellers, saa skjemaet ser likt ut for den som bare fant fram hit. */
.contact-til{
  display:flex;align-items:baseline;gap:8px;margin:0 0 4px;
  font-size:14.5px;color:var(--ink-3);
}
.contact-til b{color:var(--ink);font-weight:600}

/* UNITY AI I MELDINGSFELTET. Den FINNER, den finner ikke paa: forslagene er
   sider og svar vi allerede har skrevet, funnet med den samme rangereren
   spoer-baren bruker. Derfor staar det ogsaa i klartekst under brikkene hva de
   er, saa ingen tror at noe er generert. */
.msg-ai{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s ease,opacity .3s ease}
.msg-ai.is-on{grid-template-rows:1fr;opacity:1}
.msg-ai-inn{overflow:hidden;min-height:0}
/* 3 Okt 2026: spoersmaalet er ord som tekstforslagene over feltet (streken ved hover og under det som er tatt med),
   og foerste setning av svaret staar under. Ingen piller, ingen ramme. */
.msg-ai-h{font-size:15px;line-height:1.4;color:var(--ink-2);margin:16px 0 6px}
.msg-ai-s{margin:0 0 10px}
/* «+» foran viser at spoersmaalet kan tas med, haken at det er tatt med (3 Okt 2026, Martin: «a»). Svaret staar
   rykket inn under teksten, ikke under tegnet. */
.msg-ai-c{
  font:inherit;font-size:15px;line-height:1.4;color:var(--ink);background:none;border:0;padding:2px 0;cursor:pointer;text-align:left;
  display:inline-flex;align-items:baseline;gap:10px;
}
.msg-ai-t{
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:6px;
  transition:text-decoration-color .16s ease;
}
.msg-ai-c:is(:hover,:focus-visible,[aria-pressed=true]) .msg-ai-t{text-decoration-color:currentColor}
.msg-ai-m{flex:none;width:12px;height:12px;align-self:center;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.msg-ai-ok,.msg-ai-c[aria-pressed=true] .msg-ai-pl{display:none}
.msg-ai-c[aria-pressed=true] .msg-ai-ok{display:inline}
.msg-ai-a{padding-left:22px}
.msg-ai-a{font-size:15px;line-height:1.5;color:var(--ink-2);margin:2px 0 0;max-width:96ch}
@media (prefers-reduced-motion:reduce){.msg-ai,.msg-ai-t{transition:none}}

/* MOENSTER 02: lenken som foerer videre, 22 Sep 2026. En strek tegner seg inn fra
   venstre under ordene og pilen tar et skritt ut av linja den satt i. Utheving i
   TYPEN og ikke et felt bak, som er hele argumentet til dette designet, og ingen
   av dem koster layout; en bredde-overgang ville flyttet naboene.
   Paa kortene drives det fra HELE kortet; her er lenken selv utloeseren, fordi
   dette er frittstaaende lenker i loepende tekst. Samme utseende, ulik trigger. */
.ai-doc .go-link{
  display:inline-flex;align-items:center;gap:8px;position:relative;
  padding-bottom:3px;text-decoration:none;
}
.ai-doc .go-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.ai-doc .go-link i{font-style:normal;display:inline-block;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.ai-doc .go-link:hover::after,.ai-doc .go-link:focus-visible::after{transform:scaleX(1)}
.ai-doc .go-link:hover i,.ai-doc .go-link:focus-visible i{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){
  .ai-doc .go-link::after,.ai-doc .go-link i{transition:none}
}

/* KARTET: de seks produktene som én graf, likt paa alle seks sidene. Det er
   navigasjon og illustrasjon i ett, saa produktnodene er EKTE lenker (<a> i
   SVG-en, med aria-label), og den du staar paa er merket aria-current. En
   skjermleser og en soekemotor faar dermed de seks uansett hva tegningen gjoer.
   Kartet er ÉN vei inn, aldri den eneste: menyen, forrige/neste og rutenettet
   paa forsiden staar. Graf som navigasjon feiler alltid paa samme maate naar den
   er alt du har. */
.pp-kart{
  display:block;width:100%;max-width:560px;height:auto;overflow:visible;
}
/* KARTET VED OVERSKRIFTEN, 22 Sep 2026. Det er det foerste en leser moeter paa
   siden, slik brikkene er det foerste paa datakartet: samme mekanikk to steder
   er det som gjoer den gjenkjennbar. Under 1040px stables den under teksten,
   fordi en spalte paa under 500px gjoer navnene ulesbare. */
.pp-hero-t{min-width:0}
.pp-kart-fig{margin:clamp(26px,3vw,36px) 0 0;min-width:0}
@media (min-width:1040px){
  /* START, IKKE CENTER. Med center sentreres tekstspalten mot kartet, og siden
     ingressene er 124 til 278 tegn lange, startet ikonet og overskriften paa sin
     egen hoeyde paa hver av de seks sidene: "icon og overskrift til de
     forskjellige produktene maa komme paa samme sted, slik at de ikke faar endre
     start punkt i toppen." Begge spaltene festes til toppen, saa baade
     overskriften og tegningen staar paa samme y uansett hvor lang teksten er. */
  .pp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
    gap:clamp(30px,3.4vw,52px);align-items:start}
  .pp-kart-fig{margin:0}
}
/* Bildeteksten er det som LAERER bort trykket. To setninger om hvorfor grafen
   finnes, og saa selve handlingen paa egen linje og et hakk ned, saa den ikke
   konkurrerer med grunnen. UGODKJENT COPY: staar paa check.py sin aapne liste. */
.pp-kart-cap{
  font:400 15px/1.45 var(--sans);letter-spacing:-0.01em;color:var(--ink-2);
  margin:clamp(14px,1.6vw,18px) 0 0;max-width:46ch;
}
/* Alt som ikke hoerer til produktet du staar paa ligger i ro og venter. */
.pp-kart-av line{stroke:var(--ink);stroke-opacity:.16;stroke-width:1}
.pp-kart-paa line{stroke:var(--ink);stroke-opacity:.62;stroke-width:1.8}
.pp-kart-n{fill:var(--ink);fill-opacity:.22}
.pp-kart-n.pp-on{fill-opacity:.55}
/* De seks er destinasjoner, de fire delte substantivene er ledd. Foer 22 Sep
   var radien graden alene, og da ble Utstyr stoerre enn Unity AI. Nodene har to
   stoerrelser fra generatoren; her faar produktene ogsaa fullt blekk, saa det
   ikke er stoerrelsen alene som baerer forskjellen. */
.pp-kart-n.pp-p{fill-opacity:.42}
.pp-kart-n.pp-p.pp-on{fill-opacity:.72}
.pp-kart-n.pp-na{fill-opacity:1}
/* RINGEN sitter bare rundt de seks. Den er affordansen: formen selv sier hvilke
   noder som er steder aa gaa til, uten at en setning maa si det. */
.pp-kart-ring{fill:none;stroke:var(--ink);stroke-opacity:.26;stroke-width:1.2;
  transition:stroke-opacity .2s ease,r .2s ease}
/* "Du er her" er FYLLSTYRKE, ikke farge: samme blekk som de andre ringene, i
   full styrke og et hakk tykkere. Aksjonsblaatt ble vurdert og forkastet, ikke
   fordi det er ulovlig som grafisk merke, men fordi fokusringen paa siden er
   nettopp en 2px blaa ring: da ville "du er her" og "tastaturet staar her"
   vaert samme merke. */
.pp-kart-ring.pp-na{stroke:var(--ink);stroke-opacity:1;stroke-width:2.2}
/* Navnet og glorien er to elementer: glorien (.pp-kart-g) er en kopi bak, bare
   strek. Strek og fyll paa samme tekst spiste bokstavene i Safari, som tegner
   bokstav for bokstav (2 Okt 2026, «disse er helt uleselig»). Svakeste navn er
   .62, ikke .42, og skriften er et hakk stoerre. */
.pp-kart-t{
  font:400 13.5px/1 var(--sans);fill:var(--ink);fill-opacity:.62;
}
.pp-kart-g{fill:none;fill-opacity:1;stroke:var(--paper);stroke-width:8;stroke-linejoin:round;
  stroke-opacity:.85;pointer-events:none}
.pp-kart-t.pp-on{fill-opacity:.85}
.pp-kart-t.pp-p{font-size:16px;fill-opacity:.78}
.pp-kart-t.pp-p.pp-on{fill-opacity:.9}
/* Der du staar er navnet halvfett og i fullt blekk. Stoerrelsen er graden, som
   ellers i systemet, saa Unity er stoerst fordi den beroerer flest. */
.pp-kart-t.pp-na{font-weight:600;fill-opacity:1}
.pp-kart-r,.pp-kart-gr{font:400 13px/1 var(--sans)}
.pp-kart-r{fill:var(--ink);fill-opacity:.66}
.pp-kart-g.pp-kart-gr{fill:none;stroke-width:4.5}
/* Hele noden er trykkflaten, ikke bare prikken: samme gest som kortene, en
   utheving i TYPEN og ikke et felt bak. */
.pp-kart-a{cursor:pointer}
.pp-kart-a .pp-kart-n{transition:fill-opacity .2s ease,r .2s ease}
.pp-kart-a .pp-kart-t{transition:fill-opacity .2s ease}
.pp-kart-a:hover .pp-kart-n,.pp-kart-a:focus-visible .pp-kart-n{fill-opacity:.9}
.pp-kart-a:hover .pp-kart-ring,.pp-kart-a:focus-visible .pp-kart-ring{stroke-opacity:.75}
.pp-kart-a:hover .pp-kart-t,.pp-kart-a:focus-visible .pp-kart-t{fill-opacity:1}
.pp-kart-a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .pp-kart-a .pp-kart-n,.pp-kart-a .pp-kart-t,.pp-kart-ring{transition:none}
}
@media (max-width:620px){
  /* Ti navngitte noder paa 318px er 0,46 i skala og 6px skrift. Kartet blir
     rullbart sidelengs i stedet for ulesbart, med en peker om at det gaar. */
  .pp-kart{max-width:none;width:480px}
  .pp-kart-boks{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

.pp-hero .ai-try{margin-top:clamp(22px,2.6vw,30px)}

/* NIVAA 3 i grafsystemet: fragmentet som merke paa en produktside, 22 Sep 2026.
   Faa NAVNGITTE noder, ikke et lite node-nettverk: et nett paa 500px er tekstur,
   og en liten etterligning av en stor tegning er daarligere enn ingen. Det som
   laanes fra forsiden er ordforraadet, ikke bildet, og bare to merker av fem:
   noden hvis stoerrelse er graden, og kanten som stopper ved randen av prikken.
   Ingen bildetekst: setningen den tegner staar rett over den, og en tekst under
   ville vaert eyebrow-regelen paa nytt. Blekk og vekter er sidens egne tokens,
   saa merket foelger begge visningene uten en eneste egen farge. */
.pp-mark{
  display:block;width:100%;max-width:540px;height:auto;
  margin:clamp(22px,2.8vw,34px) 0 0;
}
/* To lag. Veven er bakgrunnen og skal lese som stoff; det tente er produktets
   egne noder og veien mellom dem. Forholdet mellom dem er hele figuren: samme
   regel som paa forsiden, der ruten baerer 5,5 ganger blekket per lengdeenhet
   som nettet rundt. */
/* Veven loeses opp mot kantene i stedet for aa stoppe i en rett strek. En hard
   rektangelkant er nettopp det Martin sendte tilbake paa gjenkjennelsestabellen
   ("naa ser vi rektangelboksen ligge over node-nettverket"), og et utsnitt av en
   vev skal lese som et utsnitt. Masken ligger paa VEVEN alene, ikke paa svg-en:
   en maske gjelder ogsaa barna, og lagt paa hele figuren ville den tonet ned
   baade den tente ruten og navnene. Den svarte i gradienten er et alfa-stopp. */
.pp-mark-vev{
  -webkit-mask-image:radial-gradient(ellipse 58% 60% at 50% 50%,#000 38%,transparent 100%);
  mask-image:radial-gradient(ellipse 58% 60% at 50% 50%,#000 38%,transparent 100%);
}
.pp-mark-vev line{stroke:var(--ink);stroke-opacity:.13;stroke-width:1}
.pp-mark-vev circle{fill:var(--ink);fill-opacity:.20}
.pp-mark-tent line{stroke:var(--ink);stroke-opacity:.62;stroke-width:1.8}
.pp-mark-tent circle{fill:var(--ink);fill-opacity:.88}
/* Glorie i papirfargen, saa en kant kan gaa bak et ord i stedet for gjennom det.
   Sidens eget triks, det samme som baerer ordmerket paa introen og "Utforsk"
   over kula, og det er merke 02 brukt paa merkets egen typografi. */
.pp-mark text{paint-order:stroke;stroke:var(--paper);stroke-width:4.5}
.pp-mark-n{font:400 14px/1 var(--sans);fill:var(--ink)}
/* Kantens navn er underordnet nodenes: det er relasjonen som forklarer, ikke
   den som navngir. Stoerrelsen gjoer jobben, ikke en svakere farge paa en
   allerede svak tekst. */
.pp-mark-r{font:400 13px/1 var(--sans);fill:var(--ink-3)}
.pp-mark-h{font:600 15px/1 var(--sans);fill:var(--ink)}
/* Liggende paa bred skjerm, staaende paa smal. Begge tegnes alltid og CSS
   velger: paa 390px vises den liggende paa 318px, altsaa halv skala, og en
   etikett paa 14 enheter blir 7 piksler. Aa skru opp skriftstoerrelsen hjelper
   ikke, fordi den maales i de samme enhetene som skaleres ned. */
.pp-mark-p{display:none;max-width:340px}
@media (max-width:560px){
  .pp-mark-w{display:none}
  .pp-mark-p{display:block}
}


.pp-h{
  font-size:clamp(23px,2.6vw,32px);font-weight:600;letter-spacing:-0.022em;
  line-height:1.1;margin:0;
}
.pp-dos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px);
  margin-top:clamp(26px,3.2vw,40px);
}
@media (max-width:820px){.pp-dos{grid-template-columns:1fr;gap:22px}}
.pp-do{min-width:0;padding-top:18px;border-top:1px solid var(--rule-soft)}
.pp-do h3{font-size:17px;font-weight:600;letter-spacing:-0.012em;margin:0;color:var(--ink)}
.pp-do p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:9px 0 0}
.pp-note{
  font-size:15.5px;line-height:1.6;color:var(--ink-2);
  margin:clamp(26px,3vw,38px) 0 0;max-width:62ch;
  padding-left:18px;border-left:2px solid var(--accent);
}
/* a single figure sits alone rather than stretching across three columns */
.ai-cases-1{grid-template-columns:minmax(0,380px)}

/* the scale claim is a section heading here, not the page's own h1 */
.ai-scale-h{
  font-size:clamp(25px,3.4vw,42px);font-weight:600;letter-spacing:-0.03em;
  line-height:1.08;margin:0;text-wrap:balance;
}

/* ===========================================================================
   /ai — bridge. The rest of the site, put into the /ai system.
   The copy on /product, /usecases, /about, /contact and /it is governed by the
   messaging framework and was approved as it stands, so it is NOT retyped: the
   markup keeps its old component names and is restyled here. tools/ai/convert.py
   removes the devices the /ai iteration retired (coloured bands, eyebrow
   labels, two-tone headings, the photo CTA band) and swaps in the /ai chrome.
   Scoped to .ai-doc, never to .ai-page. /ai and the six product pages are
   .ai-page too, and a rule on `.ai-page main > section` outranks .ai-hero and
   would take the front page's hero padding with it.
   =========================================================================== */

/* Same rhythm as .ai-sec: top padding only, and the last section closes the
   page. Sections used to carry padding on both sides, which doubled every gap. */
.ai-doc main > section{padding:clamp(76px,9vw,132px) 0 0}
.ai-doc main > section:last-child{padding-bottom:clamp(64px,7.5vw,104px)}
.ai-doc .wrap{max-width:1140px}
.ai-doc .narrow{max-width:860px}
.ai-doc .hero h1,.ai-doc .hero .lead{margin-inline:0}

/* Type. The old pages set headings at weight 400 one step larger; /ai is 600
   and tighter, and its body copy is 16.5px secondary ink rather than a 22px
   lead. Sub-headings inside a list come down to 17-19px so a row of them cannot
   outshout the section heading above, which is what happened on /lab. */
.ai-doc main h1{
  font-size:clamp(34px,5vw,62px);font-weight:600;letter-spacing:-0.032em;line-height:1.04;
}
/* 34ch, raised from 26 on 17 Sep 2026 after sweeping every page for headings
   that broke when they would have fitted. A measure is meant to wrap a long
   heading; it is not meant to miss by two pixels, which is what 26ch did to
   "Før dere booker, de vanlige fem." with 1140px of room beside it. 34ch is
   about forty characters at the display size: short for a line of prose, ample
   for a heading, and everything that genuinely runs long still wraps. Judge a
   cap by WHERE the break lands, not by whether one happens: after 34ch every
   two-line heading on the site breaks at a comma, a full stop or a clause. */
.ai-doc main h2{
  font-size:clamp(26px,3.3vw,40px);font-weight:600;letter-spacing:-0.025em;
  line-height:1.1;max-width:34ch;
}
.ai-doc main h3{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-0.02em;line-height:1.15}
.ai-doc main h4{font-size:17px;font-weight:600;letter-spacing:-0.012em}
.ai-doc main .lead{font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:62ch}
.ai-doc main .hero .lead,.ai-doc main .narrow .lead{font-size:17.5px}
.ai-doc main p{margin-top:0}
.ai-doc main a:not(.ai-try):not(.pr-more){color:var(--ink);text-underline-offset:3px}
.ai-doc main a:not(.ai-try):hover{color:var(--accent)}
.ai-doc address{font-size:15px;line-height:1.55;color:var(--ink-2)}
.ai-doc .link-center{text-align:left;font-size:15px}
.ai-doc .muted{color:var(--ink-2)}

/* A four-up row of one-sentence blocks is not four objects, so it loses the
   box and keeps the rule: the same treatment .pp-do gets on a product page. */
.ai-doc .cards{gap:clamp(18px,2.6vw,36px);margin-top:clamp(26px,3.2vw,40px)}
.ai-doc .card{
  background:none;border:0;border-top:1px solid var(--rule-soft);border-radius:0;
  padding:18px 0 0;min-width:0;
}
.ai-doc .card h4{margin:0}
.ai-doc .card p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:9px 0 0}

/* The two-column rule-separated lists were already close to the /ai look; they
   only needed their headings brought down and their body set as body copy. */
.ai-doc .layer{padding:26px 0}
.ai-doc .layer h3{font-size:18px;font-weight:600;letter-spacing:-0.012em}
.ai-doc .layer p,.ai-doc .layer ul{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ai-doc .layer .answers{font-size:12.5px;color:var(--ink-3)}
.ai-doc .rows .row{padding:30px 0}
.ai-doc .rows .row h4{font-size:19px;font-weight:600;letter-spacing:-0.015em}
.ai-doc .rows .row h4 small{font-size:14.5px;margin-top:5px}
.ai-doc .rows .row p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* Figures take the accent, like .ai-num on the front page: the number is the
   thing the section is for. The evidence line under it is untouched — every
   number has to keep stating whether it is measured, estimated or modelled. */
.ai-doc .fig-v{color:var(--accent)}
.ai-doc .fig-l{font-size:15px;color:var(--ink-2)}

/* The status pill becomes an evidence mark: same three-step scale, but encoded
   by FILL like .ev everywhere else, so the page carries one evidence language
   instead of a pill with a green dot beside a mono source line. */
.ai-doc .status{
  border:0;border-radius:0;background:none;padding:0;
  font-family:var(--sans);font-size:13.5px;letter-spacing:0;color:var(--ink-2);
}
.ai-doc .status::before{width:10px;height:10px;border-radius:0;box-sizing:border-box;background:none}
.ai-doc .status.s-3{color:var(--accent)}
.ai-doc .status.s-3::before{background:currentColor}
.ai-doc .status.s-2{color:var(--accent)}
.ai-doc .status.s-2::before{border:2.5px solid currentColor;background:none}
.ai-doc .status.s-1{color:var(--ink-3)}
.ai-doc .status.s-1::before{border:1.5px solid currentColor;background:none}

.ai-doc .team{gap:clamp(18px,2.4vw,30px)}
.ai-doc .person img{border-radius:18px}
.ai-doc .person h4{margin:16px 0 2px}
.ai-doc .person .role{font-size:13.5px;color:var(--ink-3);margin-bottom:10px}
.ai-doc .person p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ai-doc .person a{font-size:13.5px;color:var(--ink-2);text-decoration:none}
.ai-doc .person a:hover{color:var(--accent)}

/* The form. Round like the chat field it sits under, and the send button is the
   same pill as every other call to action on the site. */
.ai-doc form.contact input,.ai-doc form.contact textarea{border-radius:12px;padding:13px 16px}
.ai-doc form.contact label{font-size:13.5px;color:var(--ink-2)}
.ai-doc form.contact .ai-try{border:0;cursor:pointer;padding:12px 22px;font-size:14px}

/* What is left of the closing photo band: the words, on the page's own ground.
   Centred text was the photo's doing; these pages are left-aligned throughout. */
.ai-doc .ai-cta{text-align:left;color:inherit}
.ai-doc .ai-cta .lead{margin:16px 0 26px;max-width:56ch}

/* The five blocks carried over from the old front page, 16 Sep 2026. Each keeps
   its own component; what changes is that rules thin out, boxes come off, and
   labels made of words move to Open Sans. */

/* Seven decisions. Three tracks per row: what it is, what changes, how far the
   evidence reaches. Already rule-separated, so only the type needed bringing in. */
.ai-doc .cases-list{margin-top:clamp(26px,3.2vw,40px)}
.ai-doc .vcase h4{font-size:18px;font-weight:600;letter-spacing:-0.012em}
.ai-doc .vcase p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ai-doc .vcase .who{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-3)}

/* ANNENHVER SIDE, 23 Sep 2026. Martin: "presentere informasjon der med
   bilde+tekst, saa tekst+bilde, osv. over hverandre ... det bryter litt opp og
   gjoer det enkelt for besoekende aa skille og lese."

   Vekslingen ligger i CSS og ikke i markupen: DOM-rekkefoelgen er tekst foerst,
   saa en telefon faar den riktige rekkefoelgen gratis og en skjermleser leser
   sakene i den rekkefoelgen de staar. Bare partallsradene bytter om, og bare der
   det er to spalter. */
.ai-doc .vcase{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,60px);align-items:center;
  padding:clamp(28px,3.6vw,48px) 0;
}
.ai-doc .vcase:nth-child(even) .vcase-t{order:2}
.ai-doc .vcase-t > div{margin:0}
.ai-doc .vcase-t > p{margin:14px 0 0}
.ai-doc .vcase-t .status{margin-top:18px}
.ai-doc .vcase-f{margin:0;min-width:0}
@media (max-width:860px){
  .ai-doc .vcase{grid-template-columns:1fr;gap:20px}
  /* Tilbake til kildens rekkefoelge naar det bare er én spalte: en figur over
     teksten sin ville staatt foer overskriften den hoerer til. */
  .ai-doc .vcase:nth-child(even) .vcase-t{order:0}
}

/* The key that explains the three marks. It used three HUES, which is the
   traffic light the evidence rule forbids, and it was set in the mono although
   it renders nothing but words. Same fill scale as .ev and .status now. */
.ai-doc .status-key{font-family:var(--sans);font-size:13px;color:var(--ink-2);gap:10px 30px}
.ai-doc .status-key i{width:10px;height:10px;border-radius:0;box-sizing:border-box;background:none}
.ai-doc .status-key .k-3{background:var(--accent)}
.ai-doc .status-key .k-2{border:2.5px solid var(--accent)}
.ai-doc .status-key .k-1{border:1.5px solid var(--ink-3)}

/* Four properties and the four booking steps: a 2px rule in the field colour
   was the old system drawing attention to the divider. One hairline, like .pp-do. */
.ai-doc .prop,.ai-doc .after .st{border-top:1px solid var(--rule-soft);padding-top:18px}
.ai-doc .props,.ai-doc .after{gap:clamp(18px,2.6vw,36px);margin-top:clamp(26px,3.2vw,40px)}
.ai-doc .prop h4,.ai-doc .after h4{font-size:17px;font-weight:600;margin:0}
.ai-doc .prop p,.ai-doc .after p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:9px 0 0}
/* "Steg 1" is a word with a digit after it, so it is Open Sans, not the mono. */
.ai-doc .after .n{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);margin-bottom:6px}

/* Five steps to a first implementation. The 01-05 numbering STAYS: unlike the
   rail numbers dropped from /lab, this is a real sequence and the order is the
   information, so the mono is right and the numbers earn their place. */
.ai-doc .start{gap:clamp(16px,2.2vw,30px);margin-top:clamp(26px,3.2vw,40px)}
.ai-doc .start li{border-top:1px solid var(--rule-soft);padding-top:18px}
.ai-doc .start h4{font-size:16px;font-weight:600;margin:0 0 5px}
.ai-doc .start p{font-size:14px;line-height:1.5;color:var(--ink-2)}

/* The five questions. */
.ai-doc .faq{max-width:70ch;margin-top:clamp(26px,3.2vw,40px)}
.ai-doc .faq summary{font-size:17px;font-weight:600;letter-spacing:-0.012em}
.ai-doc .faq details p{font-size:14.5px;line-height:1.6;max-width:66ch}

/* A person with a face is an object, so this one keeps its box. */
.ai-doc .person-card{border-radius:18px;padding:16px 20px}
.ai-doc .person-card b{font-size:15.5px}
.ai-doc .person-card small{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:2px}
.ai-doc .person-card a{font-size:13.5px}
@media (max-width:900px){
  .ai-doc .props,.ai-doc .after{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-doc .start{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .ai-doc .props,.ai-doc .after,.ai-doc .start{grid-template-columns:1fr}
}

/* The user stories on the cases page, added 16 Sep 2026.
   Two components, both deliberately plain: the page already carries figures and
   evidence marks further down, and a story that arrives in a box competes with
   the proof it is supposed to set up. */

/* "Kjenner du deg igjen?" Two columns, one row per pattern: how it usually is on
   the left in secondary ink, what changes on the right in full ink. The contrast
   is carried by weight and colour, not by two coloured panels, which is the band
   rule. The column heads are the only labels and they name the two states. */
.ai-doc .rec{margin-top:clamp(26px,3.2vw,40px);border-bottom:1px solid var(--rule-soft)}
.ai-doc .rec-h,.ai-doc .rec-r{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,4vw,56px);border-top:1px solid var(--rule-soft);
}
.ai-doc .rec-h{padding:0 0 12px;border-top:0}
.ai-doc .rec-h p{font-size:12.5px;color:var(--ink-3);margin:0}
.ai-doc .rec-r{padding:20px 0}
.ai-doc .rec-r p{margin:0;font-size:15.5px;line-height:1.5}
/* Én setning per celle fra 23 Sep 2026, samme kilde som forsiden. Svaret i fullt
   blekk, problemet dempet. */
.ai-doc .rec-r p{font-size:18px;line-height:1.35;max-width:34ch}
.ai-doc .rec-a{color:var(--ink-3)}
.ai-doc .rec-b{color:var(--ink)}
@media (max-width:760px){
  .ai-doc .rec-h{display:none}
  .ai-doc .rec-r{grid-template-columns:1fr;gap:8px}
}

/* The three cards on the front page are a teaser for /usecases; this is the way
   through. One line, no button: the page already has six of those. */
/* the platform drawing on /ai and /boom sits under a section heading, so it
   takes the same air as the case grid rather than a document's 34px */
.ai-sec .arch,.boom-sec .arch{margin-top:clamp(30px,3.8vw,46px)}
.ai-seemore{margin:clamp(22px,2.6vw,30px) 0 0;font-size:15px}
.ai-seemore a{color:var(--ink-2);text-decoration:none}
.ai-seemore a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* BOOM vs Visuell profil — the comparison switch, injected by ai.js. Scaffolding:
   goes with the block in ai.js when a direction is chosen. Tokens only, so it
   reads correctly under whichever skin is on. */
.ai-switch{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;
  display:flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);
}
.ai-switch button{
  font:inherit;font-size:12px;line-height:1;padding:8px 12px;border:0;border-radius:999px;
  background:none;color:var(--ink-2);cursor:pointer;white-space:nowrap;flex:0 0 auto;
}
.ai-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:600}
.ai-switch button:hover{color:var(--ink)}
/* SKILLET OG BRUDDET GIKK MED KRAFT, 23 Sep 2026. Bryteren hadde to slags
   knapper - to design som er en lagret TILSTAND, og et par som var HANDLINGER -
   og en haarstrek i et bredere mellomrom sa hvor gruppen byttet jobb. Med kraft
   borte er det bare de to designene igjen, altsaa én gruppe, og da er det
   ingenting aa skille. `.is-cut` og `.ai-switch-br` er ute av bade markup og
   stilark; de staar i _backup/kraft-20260923/ hvis en tredje sammenligning
   noensinne kommer tilbake. */
@media (max-width:520px){
  /* left:50% makes the available width HALF the viewport, so max-width could
     never give it more: at 320px the control had 160px to wrap in and broke into
     three rows. Pinned to both gutters instead, it has the width the max-width
     was already asking for, and the only break left is the placed one. */
  .ai-switch{flex-wrap:wrap;left:12px;right:12px;transform:none;
    justify-content:center;max-width:none;row-gap:3px}
}
@media (max-width:400px){
  .ai-switch button{font-size:11.5px;padding:8px 9px}
}
.ai-chip.is-on{
  background:var(--accent);color:var(--on-accent);
  border-color:var(--accent);font-weight:600;
}
.ai-chip.is-on:hover{background:var(--accent);color:var(--on-accent)}

/* /ai — the stack on /product. The six capability blocks on that page were
   already written as name, one-line claim, paragraph, which is the shape a
   stack needs; what they lacked was an ORDER and the layer underneath them.
   They are restaged bottom-up, with one layer added under them: the sources the
   customer already owns. Naming that bottom layer honestly is the whole point,
   because "dataene finnes allerede, betydningen gjør ikke det" only lands if
   the reader can see that the layer it describes is one they already paid for.

   Copy is untouched. Every heading, claim, paragraph and bullet is lifted from
   this page or from /it; the only new words are the four in "Gjennom alle
   lagene" / "Through every layer".

   There is NO figure beside this list, and there was one for an hour. It was a
   190px column of six 36px boxes in the gutter, and it read as a filter menu
   rather than a stack: too small to be a drawing, and it printed all six names
   a second time. The page already has its drawing directly above, .arch, which
   is 1044px wide and carries the same layers. One drawing per architecture.
   Reference: legora.com/product/aos, read 17 Sep 2026.
   -------------------------------------------------------------------------- */
.ai-doc .stk{margin-top:26px}
.ai-doc .stk-list{list-style:none;margin:0;padding:0}
.ai-doc .stk-i{border-top:1px solid var(--rule-soft)}
.ai-doc .stk-i:last-child{border-bottom:1px solid var(--rule-soft)}
.ai-doc .stk-i.stk-through{border-top:2px solid var(--rule)}
.ai-doc .stk-b{
  width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) 16px;gap:16px;
  align-items:start;text-align:left;padding:17px 0;cursor:pointer;
  background:none;border:0;color:inherit;
  font-family:inherit;font-size:inherit;line-height:inherit;
}
.ai-doc .stk-b:hover .stk-h{text-decoration:underline;text-underline-offset:3px}
.ai-doc .stk-b:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ai-doc .stk-n{font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--ink-3)}
.ai-doc .stk-k{display:block;font-size:12px;line-height:1.5;color:var(--ink-3)}
.ai-doc .stk-h{display:block;font-size:19px;font-weight:600;line-height:1.35}
.ai-doc .stk-c{
  display:block;margin-top:3px;font-size:15px;line-height:1.5;
  color:var(--ink-2);max-width:62ch;
}
.ai-doc .stk-x{position:relative;width:14px;height:14px;margin-top:6px;justify-self:end}
.ai-doc .stk-x::before,.ai-doc .stk-x::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;
  background:var(--ink-3);
}
.ai-doc .stk-x::after{transform:rotate(90deg);transition:transform .16s ease}
.ai-doc .stk-b[aria-expanded="true"] .stk-x::after{transform:none}
.ai-doc .stk-p{padding:0 0 24px 48px}
.ai-doc .stk-p[hidden]{display:none}
.ai-doc .stk-p p{margin:0 0 10px;max-width:66ch}
.ai-doc .stk-p ul{margin:0;padding-left:19px;color:var(--ink-2)}
.ai-doc .stk-p li{margin:5px 0;max-width:62ch}
@media (max-width:620px){
  .ai-doc .stk-p{padding-left:0}
}


/* The footer carried a "Se omtale" link for one afternoon and lost it again,
   18 Sep 2026, on the reasoning rather than on taste: /omtale is already reached
   from the Selskap menu and from the phone menu, so the footer was a third route
   to one page; this footer deliberately has no menu, so one content link in a row
   of brand, social, language and copyright was a menu of one; and it sat under the
   design switch, which is what made the collision visible. If it ever comes back,
   it comes back without the arrow: an arrow is a call to action inside content and
   decoration in a utility row. */
/* ES is inert in the footer for the same reason it is inert in the header: /es
   does not exist and a live link would be a 404. Same markup, same --rule step,
   so the three languages read the same in both places. */
.ai-lang .off{color:var(--rule);cursor:default}

/* /ai — SPØR SENSA in the header, 20 Sep 2026. Martin: "naar man ikke er inne paa
   selve forsiden, burde sensa unity ai chat vaere tilgjengelig i toppen." It stands
   where "Prøv Sensa Unity" stood, because that button's only job was to send you to
   this chat; the panel drops below the bar exactly the way .ai-dd-p does, so the
   header has ONE dropdown treatment and not two.

   At rest it is a button that looks like a field. Opening it hides that button
   without collapsing its box and lays the panel over the same spot, so the field
   arrives where the words were rather than below them. Below 900px there is no
   room for the words, so the same control is the glyph alone. */
/* THE LOGO IS THE WAY HOME, and it was the only link in the chrome that gave no
   sign of being one. Martin asked 20 Sep 2026 whether home should be the logo or
   a nav item of its own; the logo is the strongest convention on the web and a
   sixth top-level word would overflow the bar at 760px, so it stays the logo and
   gets the feedback every other link here already has. Both copies of it, header
   and footer, go to the front page, so one rule covers them. */
.ai-brand{transition:opacity .16s ease}
.ai-brand:hover{opacity:.7}

/* ONE WIDTH, worn by the resting bar and by the open field. Martin, 20 Sep 2026:
   "chatten trenger ikke utvide seg naar man trykker paa den, da kan det heller
   vaere den stoerrelsen (lengden) den maa vaere." It cannot be the other way round
   and have the bar grow to the panel's 440: measured, a centred bar can be at most
   296px at 1280 before it reaches "Produkter", so the panel is the wide one and the
   FIELD keeps the bar's size. The suggestions under it are wider, which is what a
   result list is allowed to be; the thing you click does not move or change size. */
.ai-ask{position:relative;flex:none;--ask-w:clamp(186px,19vw,258px)}
.ai-ask.is-away,.ai-try-hdr.is-away{display:none}
/* At rest it is a small copy of the field on the front page: the words on the
   left, the same round send button on the right, nothing else. The glyph that was
   here was a speech bubble, and Martin cut it 20 Sep 2026 ("fjern det som ser ut
   som et forsoek paa en snakkeboble"). It carried nothing the words did not. */
.ai-ask-t{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  width:var(--ask-w);max-width:100%;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  padding:4px 4px 4px 16px;font:inherit;font-size:14px;line-height:1.3;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease;
}
.ai-ask-t span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ai-ask-t:hover{border-color:var(--ink-3);color:var(--ink)}
/* visibility, not display: the box has to keep its width or the whole header
   shifts sideways the moment the panel opens. */
.ai-ask.is-open .ai-ask-t{visibility:hidden}

/* One send button, worn twice: as a plain <i> inside the resting bar, and as the
   real submit button inside the open field. Same size, same place, so opening the
   panel does not move it. */
.ai-ask-s{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:0;padding:0;cursor:pointer;background:var(--accent);color:var(--on-accent);
}
.ai-ask-s svg{width:15px;height:15px}

/* NO BOX. Martin, 20 Sep 2026: "trenger dropdown menyen en ramme rundt seg? naa
   gaar rammen rundt hele chatten og ned. kan det heller ikke bare poppe ned
   kategoriene". A card around a field, four pills and a list is a frame around
   three things that already have their own edges; what it added was one more
   rectangle on a page whose rule is one ground. The panel is a position and a
   width now. The field keeps its pill and the topics keep theirs, because those
   are controls; what has no edge of its own gets the fog below instead. */
.ai-ask-p{
  position:absolute;top:-9px;right:-8px;z-index:41;
  width:min(440px,calc(100vw - 2 * var(--gutter)));
  padding:8px;
}
.ai-ask-f{
  display:flex;align-items:center;gap:8px;
  width:var(--ask-w);max-width:100%;margin-left:auto;
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;
  padding:4px 4px 4px 16px;
}
.ai-ask-f:focus-within{border-color:var(--accent)}
.ai-ask-f input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font:inherit;font-size:15px;color:var(--ink);padding:3px 0;
}
.ai-ask-f input::placeholder{color:var(--ink-3)}
/* Tekstfeltet, 24 Sep 2026: som input-en det erstatter, uten haandtak; hoeyden settes av
   ai.js (én til fire linjer). Over én linje tar feltet hele panelets bredde, blir en
   avrundet boks, og knappen staar nederst. */
.ai-ask-f textarea{
  flex:1;min-width:0;background:none;border:0;outline:none;resize:none;display:block;
  font:inherit;font-size:15px;line-height:1.4;color:var(--ink);padding:5px 0;margin:0;overflow-y:hidden;
}
.ai-ask-f textarea::placeholder{color:var(--ink-3)}
.ai-ask-f textarea:focus-visible{box-shadow:none}
.ai-ask-f.is-multi{width:100%;border-radius:18px;align-items:flex-end}
/* The ring belongs to the field, not to the input inside it: the wrapper is what
   the visitor sees as the control, and two rings a pixel apart is noise. */
.ai-ask-f input:focus-visible{box-shadow:none}

/* A VISIBLE SCROLLBAR, on Martin's "nedtrekksmenyen burde vise en slags line bar
   paa siden som indikerer at man kan scrolle her", 20 Sep 2026. macOS hides its
   overlay scrollbars until you already scroll, which is exactly no use to someone
   who does not know there is more; a styled scrollbar is not an overlay one, so
   declaring it is what makes it stay. Track and thumb both, because a lone thumb
   floating in the margin does not read as a bar. scrollbar-gutter keeps the rows
   from shifting 6px sideways the moment a filtered list stops scrolling. */
/* NO scrollbar-gutter. It reserves 10px on the right whether or not anything
   scrolls, and the cloud is a child of the scroller, so the reserved strip pushed
   the cloud's right edge 10px inside the field's and broke the alignment on the
   side the panel grows from. It was there to stop a 10px shift when a list starts
   scrolling; a topic is five rows and fits at every width tested, so that shift is
   now the rare case and the alignment is the common one. */
/* NOT scrollbar-width and NOT scrollbar-color on this element, however standard
   they are: from Chrome 121 either of them makes ::-webkit-scrollbar be IGNORED,
   and what they give back on macOS is the overlay scrollbar that hides itself,
   which is the thing being fixed. Measured: with them, the list reserved 0px and
   showed nothing at rest; without them, 6px and a bar that is always there. They
   go in a block only a browser without the pseudo-element reads, which is
   Firefox, where the standard properties are the only way to say this at all. */
@supports not selector(::-webkit-scrollbar){
  .ai-ask-l,.ai-ask-b{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
}
/* Thumb only, 4px, inset, no track: Martin's "rullefelt er for lang og stor, gjoer
   den flott og elegant", 20 Sep 2026. The track was a full-height line down the
   side of the panel, and a 6px thumb at two thirds of it is a bar, not a hint. The
   scrollbar is declared 10px wide and the thumb carries a 3px TRANSPARENT border
   with background-clip:content-box, which is the only way to inset a thumb: what
   shows is 4px, away from the edge, and the track is nothing at all. --rule at
   rest and --ink-3 under the pointer, so it is a whisper until you reach for it.
   It is also needed far less often now that a topic shows five rows and not
   fourteen. */
.ai-ask-l::-webkit-scrollbar,.ai-ask-b::-webkit-scrollbar{width:10px}
.ai-ask-l::-webkit-scrollbar-track,.ai-ask-b::-webkit-scrollbar-track{background:transparent}
.ai-ask-l::-webkit-scrollbar-thumb,.ai-ask-b::-webkit-scrollbar-thumb{
  background:var(--rule);border-radius:999px;
  border:3px solid transparent;background-clip:content-box;
}
.ai-ask-l::-webkit-scrollbar-thumb:hover,.ai-ask-b::-webkit-scrollbar-thumb:hover{
  background:var(--ink-3);background-clip:content-box;
}
.ai-ask-l{margin-top:8px;max-height:min(56vh,420px);overflow-y:auto}
/* The two group labels earn their place by saying what pressing will DO: one
   answers here, the other leaves the page. Open Sans, sentence case: they render
   words, so the mono is wrong, and ALL CAPS is what reads as generated. */
/* Bold, on "kategorinavnene kan gjerne vaere uthevet". A label that is quieter
   than what it labels does not sort anything. */
.ai-ask-k{margin:8px 10px 4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}

/* THE CLOUD. Four topics as nodes: the dot is the node and its size is the degree,
   so the topic holding five answers carries the biggest one, exactly as the drawing
   behind the page sizes a hub by its edges. The count is the only number in here,
   so it is the mono and the name beside it is not. */

/* THE FOG. "hvis man trykker paa kategoriene saa faar forslagene en slags blurry
   sky til bakgrunn." Rows of text floating straight on the page are unreadable, so
   they need a ground; a card would be the box that was just removed. This is the
   page itself, blurred and lifted, with NO EDGE: a radial mask dissolves it before
   it reaches a corner, so it reads as a cloud under the words rather than a shape
   behind them. The black in that mask is an ALPHA stop, not a colour.

   It sits on ::before with z-index:-1 inside an isolated stacking context, because
   a mask applies to an element's CHILDREN too: masking the block itself would fade
   the questions along with their ground, which is the same trap the shorts pool
   hit on 19 Sep. */
.ai-ask-sub,.ai-ask-res,.ai-ask-a{position:relative;isolation:isolate}
/* inset:0 and the room comes from the block's own PADDING, never from a negative
   inset. Bled outwards it overflowed the scrolling list it sits in and Chrome put
   a horizontal scrollbar across the bottom of the cloud. */
.ai-ask-sub::before,.ai-ask-res::before,.ai-ask-a::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:26px;
  background:var(--surface-2);opacity:.96;
  -webkit-backdrop-filter:blur(30px) saturate(130%);
  backdrop-filter:blur(30px) saturate(130%);
  -webkit-mask-image:radial-gradient(124% 122% at 50% 48%,rgb(0 0 0) 84%,transparent 100%);
  mask-image:radial-gradient(124% 122% at 50% 48%,rgb(0 0 0) 84%,transparent 100%);
}
/* --surface-2, not --paper, on "skyen kan vaere litt mer synlig". Opacity cannot
   make a white cloud visible on a white page, however high it goes: what makes a
   shape read is that it is a different colour from what it sits on. The tile is
   one real step off the page and the dissolving edge does the rest. Bigger came
   with it: more padding, a wider mask and a softer outer eighth.

   .96, and the mask solid to 84 % of the radius. Two rounds to get here: at .82
   with the fade starting at 64 % a 72px headline read straight through the cloud
   and the questions were words over words. **A 30px blur of 72px type is still a
   big dark smear**, so the answer is not more blur, it is enough fill to stop the
   page and a fade that lives only in the last fifth. The edge is the soft thing;
   the middle has to carry text. */
.ai-ask-sub{margin:12px 0 2px;padding:18px 22px 18px 36px}
/* The edge: one hairline running down from the open node, past everything that
   hangs off it. ::after, because ::before is the fog now. */
.ai-ask-sub::after{
  content:"";position:absolute;left:22px;top:20px;bottom:20px;width:1px;background:var(--rule);
}
.ai-ask-res{padding:16px 18px}
/* They arrive in order, the way a node arrives before the edges that reach it. */
@keyframes ai-ask-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.ai-ask-sub .ai-ask-r{animation:ai-ask-in .22s ease both;animation-delay:calc(var(--i,0) * 26ms)}
@media (prefers-reduced-motion:reduce){
  .ai-ask-sub .ai-ask-r{animation:none}
}
.ai-ask-r{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-radius:14px;padding:8px 10px;font:inherit;color:var(--ink);
}
.ai-ask-rt{display:block;font-size:14.5px;line-height:1.35}
.ai-ask-rd{display:block;font-size:12.5px;line-height:1.35;color:var(--ink-3);margin-top:1px}
.ai-ask-r:hover,.ai-ask-r.is-on{background:var(--surface-2)}
.ai-ask-n{margin:12px 10px;font-size:13.5px;color:var(--ink-3)}

/* THE FOG MUST NOT SCROLL AWAY FROM ITS OWN TEXT. The cloud is an absolutely
   positioned ::before at inset:0, and inside a SCROLL CONTAINER such a box is
   sized to the padding box and then scrolls with the content: scroll a long
   answer and the ground slides up off the bottom of it, leaving the last
   paragraph, the link and the copy button lying straight on the page over
   whatever the page has there. On /about that was three portrait photographs.
   It has been latent since the cloud was built and only showed once an answer
   was long enough to scroll, which the summary answers are every time.

   So the block that carries the fog does not scroll, and the PARAGRAPHS do. The
   question echo and the row with the link and the copy button stay put, which is
   also the better reading: what you can do with the answer does not scroll out
   of sight while you read it. */
.ai-ask-a{margin:12px 0 2px;padding:20px 22px}
.ai-ask-b{max-height:min(44vh,330px);overflow-y:auto}
/* --ink-2, not --ink-3: it is the echo of the question and it sits in the top
   corner, which is where the cloud is thinnest. The weakest text on the page does
   not belong in the softest part of its ground. */
.ai-ask-q{margin:0 0 8px;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.ai-ask-b p{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--ink)}
/* Same row in the header panel, where the space is 440px rather than the hero's
   860, so the button wraps under the link instead of beside it more often. The
   type is one step down to match the panel's own. */
.ai-ask-m{margin:2px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ai-ask-m .ai-send{font-size:13.5px;padding:8px 13px}
.ai-ask-m a{font-size:14px;color:var(--ink);text-underline-offset:3px}

/* ONE PLACE AT EVERY DESKTOP WIDTH, 23 Sep 2026. Martin: "spoer unity ai flytter
   seg naar man skalerer vinduet ... ser at den kan bryte over Produkter i visse
   skalerings-tilfeller." Both halves were one fault. The bar was centred on the
   PAGE above 1260 and sat in the right cluster below it, so it changed role as
   the window changed; and page-centre cannot hold, because the menu is pinned to
   the right and grows toward the middle while the centre stays put. The
   arithmetic, measured: the right cluster (menu, gap, languages, theme, gutter)
   is 557px, so a centred bar has (w - 1114 - 2 * margin) to live in, which is
   118px at 1280 against a 186px minimum. It only clears from about 1350 up, and
   the old formula was short by roughly a hundred pixels: measured -16px at 1260,
   -21 at 1300, -7 at 1400. So the bar now sits between the menu and the
   language/theme cluster at every width from 760, which is where a utility field
   is looked for and is one relationship instead of two. The panel keeps the
   right anchor the base rule already gives it. */

/* PHONE MODE STARTS AT 760, not 620, from 20 Sep 2026. It had to move: with a
   field in the bar there is no width between 620 and 760 for logo, four menu
   words, three languages and a chat field, and the label is the whole point of
   the field. Below 760 the menu and the languages move into the panel that
   already carries them, and the bar takes the space they leave, between the logo
   and the burger. Measured at 320px, the tightest real phone: the bar gets 150px,
   which holds "Spor Unity AI" and the send button with nothing cut. */
@media (max-width:760px){
  .ai-ask{position:static;order:2;flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end}
  .ai-tools{order:3}
  /* 12 and 8, not 16 and 10: at 320px the label had 84px and wanted 87, so it
     ellipsised three pixels from the end. Six pixels back from the padding and
     the gap is cheaper than a shorter label. */
  /* A phone is the one place the field SHOULD have the whole width: you are
     typing on it, and 240px of panel to type into is mean. */
  .ai-ask{--ask-w:100%}
  .ai-ask-t{max-width:240px;padding-left:12px;gap:8px}
  .ai-ask-p{top:calc(100% + 8px);left:var(--gutter);right:var(--gutter);width:auto;transform:none}
  .ai-ask.is-open .ai-ask-t{visibility:visible;border-color:var(--ink-3)}
}

/* Personvern i bunnmargen tar adressens form, uten dens auto-marg: det er
   adressen som deler de to klyngene. */
.ai-foot-pv{font-size:13px;color:var(--ink-3);margin:0;text-decoration:none}
.ai-foot-pv:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* /personvern er lesestoff og ikke en salgsside: seksjonsoverskriftene er et
   trinn ned og faar luft over seg, saa hvert emne staar for seg. */
.ai-doc main .pv h2,.boom.ai-doc main .pv h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15;margin:clamp(34px,4vw,48px) 0 12px}
.ai-doc main .pv h2:first-child,.boom.ai-doc main .pv h2:first-child{margin-top:0}
.ai-doc main .pv h3,.boom.ai-doc main .pv h3{font-size:19px;line-height:1.3;letter-spacing:-.01em;margin:26px 0 8px}
.ai-doc main .pv ul{margin:6px 0 16px;padding-left:1.2em}
.ai-doc main .pv li{margin:4px 0}
.ai-doc main .pv p{margin:0 0 12px}

/* SAMTYKKEBANNERET i /ai-systemet, 23 Sep 2026. Nede til venstre og ikke midt
   paa, fordi designbryteren staar midt nede. Ingen skygge: en haarstrek og
   sidens egen grunn skiller det fra innholdet, som alt annet paa siden. Knappene
   er sidens egne piller, med den fylte som ja. */
.ai-cs{position:fixed;left:16px;bottom:16px;z-index:120;max-width:min(520px,calc(100vw - 32px));
  display:none;flex-direction:column;gap:14px;padding:18px 20px;
  background:var(--paper);border:1px solid var(--rule);border-radius:18px}
.ai-cs.open{display:flex}
.ai-cs p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0}
.ai-cs p a{color:var(--ink);text-underline-offset:3px}
.ai-cs-b{display:flex;gap:10px;flex-wrap:wrap}
.ai-cs-b button{font:inherit;font-size:14px;line-height:1;padding:11px 18px;border-radius:999px;cursor:pointer;
  background:none;color:var(--ink);border:1px solid var(--ink)}
.ai-cs-b button.is-a{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ai-cs-b button:hover{text-decoration:underline;text-underline-offset:4px}
/* Knappen i foten skal se ut som lenken ved siden av den. */
button.ai-foot-pv,button.ai-foot-ro{font:inherit;font-size:13px;background:none;border:0;padding:0;cursor:pointer}
/* TRYKKFLATER PAA MINST 24 PX (WCAG 2.5.8, docs/wcag-2026-10-07.md funn 18, 7 Okt 2026): smaa lenker og knapper faar
   en usynlig flate rundt seg, saa ingenting flytter seg paa skjermen. */
.ai-foot-in > a,.ai-foot-in > button,.ai-lang a,.ai-langs a,.vk-alle button{position:relative}
.ai-foot-in > a::after,.ai-foot-in > button::after,.ai-lang a::after,.ai-langs a::after,.vk-alle button::after{
  content:'';position:absolute;inset:-5px -3px}
/* Flaten holdes inne i lenken (funksjonstest M06 og F21, 14 Okt 2026): uten en posisjonert forelder vokste den til
   heroen paa /ai/unity-ai/ og tok trykket fra «Book en demo» paa alle tre spraak. */
html.boom .u-pil{position:relative}
html.boom .u-pil::before{content:'';position:absolute;inset:-4px 0}
html.boom .ai-tillit summary{min-height:24px}
html.boom .ai-tillit a{padding-block:4px}
/* OVERSKRIFTER PAA SMAL SKJERM (WCAG 1.4.10, funn 13): stoerrelsen faar ordene til aa passe (F50, 15 Okt 2026);
   orddeling ga «SAMMEN-HENGEN» og «SPØRS-MÅL». Brytingen er bare en sikring mot klipping. */
@media (max-width:480px){html.boom main :is(h1,h2,.b-end){overflow-wrap:break-word}}