/* ===========================================================================
   ULTIMAT, /old/ultimat/, 29 Sep 2026 (tools/ai/ultimat.py).
   Claudes forslag til forsiden, produktsiden og bruksomraadene, etter salgsdokumentene i
   Salg > Sales guideline documents. Bygger paa baandene i seksjoner-ti.css og henger paa
   html.bred, saa ingen annen side naas. Bare tokens; hvert baand har sine egne.
   Status vises med form, aldri farge: fylt kvadrat er dokumentert, halvt er bekreftet
   problem, tomt er verdihypotese.
   =========================================================================== */

/* ---- statusmerket ------------------------------------------------------------------------ */
html.bred .u-ev{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
html.bred .u-ev::before{content:"";width:10px;height:10px;border:1.5px solid var(--ink);flex:none}
html.bred .u-ev-1::before{background:var(--ink)}
html.bred .u-ev-2::before{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
html.bred .u-ev-case::before{border-radius:50%}
html.bred .u-key{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;gap:18px;max-width:60ch}
html.bred .u-key li{display:grid;grid-template-columns:minmax(190px,auto) 1fr;gap:20px;align-items:baseline;font-size:16px;line-height:1.45;color:var(--ink-2)}

/* ---- lenke med pil ----------------------------------------------------------------------- */
html.bred .u-pil{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
html.bred .u-pil i{font-style:normal;transition:transform .3s}
html.bred .u-pil:hover i{transform:translateX(5px)}
html.bred .u-b-go{display:flex;flex-wrap:wrap;gap:28px}
html.bred .u-under{margin:clamp(32px,4vw,56px) 0 0;font-size:16px;color:var(--ink-2)}
html.bred .u-kick{margin:0 0 28px;font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---- 01 doegntotalen --------------------------------------------------------------------- */
html.bred .u-dogn .b-h em,html.bred .u-lag .b-h em,html.bred .u-stabel .b-h em{font-style:normal;color:var(--ink-3)}
html.bred .u-dogn-rad{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:clamp(40px,5vw,72px)}
html.bred .u-tall{display:grid;gap:12px;text-decoration:none;color:var(--ink);max-width:34ch}
/* «3 months» er bredere enn spalten (1 Okt 2026); paa engelsk staar et enhetsord mindre, som paa /usecases */
html.bred .u-tall .u-pil{margin-top:8px}

/* ---- sju beslutninger ------------------------------------------------------------------- */
html.bred .u-bl{margin-top:clamp(40px,5vw,80px);border-top:1px solid var(--rule)}
html.bred .u-b{border-bottom:1px solid var(--rule)}
html.bred .u-b summary{
  list-style:none;cursor:pointer;display:grid;align-items:baseline;gap:24px;
  grid-template-columns:48px minmax(140px,220px) minmax(0,1fr) auto 20px;padding:26px 0;
}
html.bred .u-b summary::-webkit-details-marker{display:none}
html.bred .u-b-n{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
html.bred .u-b-o{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
html.bred .u-b-h{font-size:clamp(20px,2vw,30px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);max-width:34ch}
html.bred .u-b-plus{position:relative;width:14px;height:14px;align-self:center}
html.bred .u-b-plus::before,html.bred .u-b-plus::after{content:"";position:absolute;inset:6px 0 auto;height:1.5px;background:var(--ink);transition:transform .3s}
html.bred .u-b-plus::after{transform:rotate(90deg)}
html.bred .u-b[open] .u-b-plus::after{transform:rotate(0)}
html.bred .u-b-a{
  display:grid;align-items:baseline;gap:24px;padding:26px 0;text-decoration:none;
  grid-template-columns:48px minmax(140px,220px) minmax(0,1fr) auto 20px;
}
html.bred .u-b-pil{color:var(--ink);font-size:20px;transition:transform .3s}
html.bred .u-b-a:hover .u-b-pil{transform:translateX(5px)}
html.bred .u-b-a:hover .u-b-h{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
html.bred .u-tre-kort li{font-weight:500;font-stretch:112%;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.03em;line-height:1;color:var(--ink)}
html.bred .u-b-body{padding:0 0 30px calc(48px + 220px + 48px);max-width:calc(60ch + 316px)}
html.bred .u-b-body p{margin:0 0 18px;font-size:17px;line-height:1.5;color:var(--ink-2)}
html.bred .u-b-body .u-b-go{margin:0}

/* ---- hvor Sensa sitter ------------------------------------------------------------------ */
html.bred .u-lag-fig{display:grid;gap:14px;margin:clamp(48px,6vw,96px) 0 clamp(40px,5vw,64px)}
html.bred .u-lag-rad{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
html.bred .u-lag-rad li{
  flex:1 1 150px;padding:18px 16px;background:var(--papir);border:1px solid var(--rule);
  font:500 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:center;
}
html.bred .u-lag-opp li{border-style:dashed}
html.bred .u-lag-unity{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;padding:clamp(26px,3vw,44px);
  background:var(--ink);color:var(--paper);
}
html.bred .u-lag-unity b{flex:1 1 100%;font-weight:500;font-stretch:112%;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.03em;line-height:1}
html.bred .u-lag-unity span{font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
html.bred .u-lag-unity span::before{content:"+ ";opacity:.6}

/* ---- fase 1 ----------------------------------------------------------------------------- */
html.bred .u-fase-l{list-style:none;margin:clamp(40px,5vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule)}
html.bred .u-fase-l li{display:grid;gap:40px;align-content:start;padding:20px 20px 0 0;font-size:clamp(17px,1.4vw,21px);line-height:1.25;color:var(--ink)}
html.bred .u-fase-l li+li{padding-left:20px;border-left:1px solid var(--rule)}
html.bred .u-fase-l span{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--ink-2)}
html.bred.rv-on .u-fase-l li[data-rv]{transition-delay:calc(var(--i) * 120ms)}

/* ---- toppen paa produkt og bruk --------------------------------------------------------- */
html.bred .u-topp{padding-top:clamp(160px,18vw,260px)}
html.bred .u-topp .b-lede{margin-top:clamp(28px,3vw,44px);max-width:44ch}
/* Toppen staar paa flaten og starter som alle andre sider, 2 Okt 2026 (Martin: «alle sider man kommer inn på skal
   ha et snev av gjenkjennbarhet»): overskriften i BOOM-skriften, ikke brede versaler. Overskriftene lenger ned er
   som foer. 112-trinnet som forsiden fra 3 Okt 2026 (Martin: «A på alle undersider»): paa 72 var tittelen svakere
   enn seksjonene under den. */
html.bred .u-topp h1.b-h{
  font-stretch:100%;font-weight:400;text-transform:none;max-width:18ch;
  font-size:clamp(44px,8.8vw,112px);line-height:1;letter-spacing:-.04em;
}

/* ---- produkt: lagene --------------------------------------------------------------------- */
html.bred .u-st{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);margin-top:clamp(40px,5vw,80px);align-items:start}
html.bred .u-st-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
html.bred .u-st-k{
  all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:24px;width:100%;cursor:pointer;
  padding:clamp(20px,2.2vw,32px) clamp(20px,2vw,28px);border:1px solid var(--rule);color:var(--ink);
  font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;line-height:1.1;transition:background .3s,color .3s;
}
html.bred .u-st-k span{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
html.bred .u-st-k:hover{border-color:var(--ink)}
html.bred .u-st-k[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
html.bred .u-st-k[aria-pressed="true"] span{color:var(--paper)}
html.bred .u-st-k:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html.bred .u-st-l li{--inn:0%}
html.bred .u-st-l li:nth-child(1){--inn:12%}
html.bred .u-st-l li:nth-child(2){--inn:8%}
html.bred .u-st-l li:nth-child(3){--inn:4%}
html.bred .u-st-l li .u-st-k{margin-left:var(--inn);width:calc(100% - var(--inn))}
html.bred .u-st-p h3{margin:0 0 18px;font-weight:500;font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;line-height:1;color:var(--ink)}
html.bred .u-st-p p{margin:0;max-width:42ch;font-size:18px;line-height:1.5;color:var(--ink-2)}
html.bred .u-st-p .u-st-pr{display:flex;flex-wrap:wrap;gap:28px;margin-top:32px}

/* ---- produkt: radene -------------------------------------------------------------------- */
html.bred .u-pr-l{margin-top:clamp(40px,5vw,80px);border-top:1px solid var(--rule)}
html.bred .boom main a.u-pr{
  position:relative;isolation:isolate;display:grid;align-items:baseline;gap:24px;text-decoration:none;
  grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr) 40px;
  padding:clamp(28px,3vw,44px) max(var(--pad),calc((100vw - var(--maks)) / 2 + var(--pad)));
  border-bottom:1px solid var(--rule);color:var(--ink);
}
html.bred .u-pr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
html.bred .u-pr-n{font-weight:500;font-stretch:112%;font-size:clamp(26px,2.8vw,44px);letter-spacing:-.03em;line-height:1;transition:color .3s}
html.bred .u-pr-h{font-size:clamp(18px,1.6vw,24px);line-height:1.3;color:var(--ink-2);transition:color .3s}
html.bred .u-pr-k{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);transition:color .3s}
html.bred .u-pr-pil{font-size:28px;justify-self:end;transition:transform .3s,color .3s}
@media (hover:hover){
  html.bred .u-pr:hover::before{transform:scaleY(1)}
  html.bred .u-pr:hover :is(.u-pr-n,.u-pr-h,.u-pr-k,.u-pr-pil){color:var(--paper)}
  html.bred .u-pr:hover .u-pr-pil{transform:translateX(6px)}
}

/* ---- produkt: ikke en erstatning --------------------------------------------------------- */
html.bred .u-tre{list-style:none;margin:clamp(48px,6vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
html.bred .u-tre li{padding:28px 28px 0 0}
html.bred .u-tre li+li{padding-left:28px;border-left:1px solid var(--rule)}
html.bred .u-tre h3{margin:0 0 16px;font-weight:500;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
html.bred .u-tre p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:34ch}

/* ---- bruk: casene ----------------------------------------------------------------------- */
html.bred .u-case-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,88px);align-items:end}
/* Det lengste ordet faar plass i spalta (2 Okt 2026): --ord er tegnene i det lengste ordet (ordmaal() i
   ultimat.py), ,87 em er et bredt versaltegn i denne skriften med litt luft. Samme klemme som .b-h under. */
html.bred .u-case-top>div:first-child{container-type:inline-size;min-width:0}
html.bred .b-h.u-case-h{font-size:min(clamp(36px,5.4vw,92px),calc(100cqi / (var(--ord,10) * .87)))}
html.bred .u-case-k{margin:0 0 20px;font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
html.bred .u-case-n{display:grid;gap:14px}
html.bred .u-n-l{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
html.bred .u-n-m{display:flex;flex-wrap:wrap;gap:10px 20px;margin:4px 0 0}
html.bred .u-n-m>span:last-child{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
html.bred .u-steg{list-style:none;margin:clamp(48px,6vw,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
html.bred .u-steg li{padding:24px 28px 0 0}
html.bred .u-steg li+li{padding-left:28px;border-left:1px solid var(--rule)}
html.bred .u-sn{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
html.bred .u-steg h3{margin:20px 0 12px;font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
html.bred .u-steg p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
/* /resultater som sensa.no/usecases (3 Okt 2026, Martin: «luft og oversikt»): tre rader i ett kort paa flaten,
   tallet til venstre, tittelen til hoeyre og + som aapner historien. Kortet loefter seg som toppmenyen. */
/* 14 Okt 2026, Martin: «sub-overskriften her ser ikke bra ut». Linja var klemt til 40ch, to korte linjer under en
   overskrift i full bredde, og sto klistret til den. Naa én linje paa skjerm, med luft over som i toppen. */
html.bred .u-resultater .b-lede{max-width:none;margin-top:clamp(20px,2.2vw,32px)}
/* overskriften hoeyere opp, med samme luft over som /it (moetet 6 Okt 2026, nr. 17: «headline come higher up») */
html.bred .u-topp.u-resultater{padding-top:clamp(96px,9vw,140px)}
html.bred .u-rs-l{margin-top:clamp(48px,6vw,96px);background:var(--surface);border-radius:var(--r-ark);box-shadow:var(--fluid-lift);transition:background-color .45s,box-shadow .45s}
html.bred .u-rs{scroll-margin-top:120px}
html.bred .u-rs+.u-rs::before{content:"";position:absolute;top:0;left:var(--u-rs-m);right:var(--u-rs-m);border-top:1px solid var(--rule);transition:opacity .3s}
html.bred .u-rs summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr) auto;gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(28px,3.2vw,48px) 0}
html.bred .u-rs summary::-webkit-details-marker{display:none}
html.bred .u-rs-n{font:400 clamp(44px,5vw,84px)/.9 var(--mono);letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
html.bred .u-rs-n small{font-size:.5em;letter-spacing:0}
html.bred .u-rs-t{display:grid;gap:12px;justify-items:start}
html.bred .u-rs-t .u-case-k{margin:0}
html.bred .u-rs h2{margin:0;font-weight:400;font-size:clamp(22px,2.3vw,34px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);max-width:28ch}
html.bred .u-rs-tall{display:grid;gap:14px;justify-items:start}
html.bred .u-rs-h{font-size:16px;line-height:1.5;color:var(--ink-2)}
/* Historien i én setning under tittelen, og «Se hvordan» ved +, saa casen forstaas uten aa trykke (8 Okt 2026, Martin:
   «nå må man faktisk trykke for å åpne noe, som er et potensielt hinder», valgte C). Ordene ved + er skjult for
   skjermlesere, saa raden ikke bytter navn; de viker naar raden er aapen. */
html.bred .u-rs-s{margin-top:2px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:56ch}
html.bred .u-rs-go{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--ink-2);white-space:nowrap}
html.bred .u-rs[open] .u-rs-se{visibility:hidden}
html.bred .u-rs-se{transition:color .3s}
html.bred .u-rs summary:hover .u-rs-se{color:var(--ink)}
html.bred .u-rs-pl{position:relative;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px var(--rule);transition:transform .3s}
html.bred .u-rs-pl::before,html.bred .u-rs-pl::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:var(--ink)}
html.bred .u-rs-pl::after{transform:rotate(90deg)}
html.bred .u-rs[open] .u-rs-pl{transform:rotate(45deg)}
/* Hover som knappene (fyll): + fylles med --ink og streken blir flaten (3 Okt 2026, Martin: «ingen hover effekt») */
html.bred .u-rs-pl{transition:transform .3s,background .3s}
html.bred .u-rs-pl::before,html.bred .u-rs-pl::after{transition:background .3s}
html.bred .u-rs summary:hover .u-rs-pl,html.bred .u-rs summary:focus-visible .u-rs-pl{background:var(--ink);box-shadow:none}
html.bred .u-rs summary:hover .u-rs-pl::before,html.bred .u-rs summary:hover .u-rs-pl::after,
html.bred .u-rs summary:focus-visible .u-rs-pl::before,html.bred .u-rs summary:focus-visible .u-rs-pl::after{background:var(--surface)}
html.bred .u-rs summary h2{transition:color .3s}
html.bred .u-rs summary:hover h2{color:var(--ink-2)}
html.bred .u-rs summary:focus:not(:focus-visible){outline:none}
html.bred .u-rs-inn{padding:0 0 clamp(32px,3.6vw,56px)}
html.bred .u-rs-inn .u-steg{margin-top:0}
html.bred .u-rs-lagre{display:flex;justify-content:flex-end;margin:16px -7px 0 0}
html.bred .u-rs-lagre .ai-lagre{margin:0}
html.bred .u-rs-type{margin:24px 0 0;font:500 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:760px){
  html.bred .u-rs summary{grid-template-columns:minmax(0,1fr) auto;row-gap:16px;align-items:start}
  html.bred .u-rs-tall{grid-column:1}
  html.bred .u-rs-t{grid-column:1/-1;grid-row:2}
  html.bred .u-rs-go{grid-column:2;grid-row:1}
}
/* Paa spansk er enhetene ord («33 millones de NOK», 17 Okt 2026, Morten), for brede til aa staa ved tallet: ordet staar
   paa linja under, uten mellomrommet foran (1ch i Azeret Mono), og gaar ikke inn i «Vea cómo» eller teksten. */
html.bred:lang(es) .u-rs-n small.ord{display:block;margin-top:.3em;font-size:.4em;text-indent:-1ch}
@media (min-width:761px){html.bred:lang(es) .u-rs-n small.ord{white-space:normal}}
/* Paa engelsk staar valutaen foran tallet (17 Okt 2026, Morten: «NOK 33 million»), og hele linja er for bred til
   tallspalten: «million» staar paa linja under, som enhetene paa spansk, saa tallet ikke gaar inn i tittelen. */
html.bred:lang(en) .u-rs-n small.ord:first-child~small.ord{display:block;margin-top:.3em;font-size:.4em;text-indent:-1ch}
@media (prefers-reduced-motion:reduce){html.bred .u-rs-pl,html.bred .u-rs-pl::before,html.bred .u-rs-pl::after,html.bred .u-rs summary h2,html.bred .u-rs-se{transition:none}}
/* Raden som er aapen loefter seg ut av kortet som et eget ark, med toppmenyens skygge (3 Okt 2026, Martin: «så vi vet
   hvor vi står», valgte «arket, én om gangen»). Én om gangen er details sitt eget name i ultimat.py; der nettleseren
   ikke kan det, faar to aapne ark luft mellom seg. Noden i margen og nedtoning av de andre radene ble vist og forkastet. */
html.bred .u-rs{position:relative;--u-rs-m:clamp(20px,3vw,48px);--u-rs-ut:clamp(6px,1vw,16px);padding:0 var(--u-rs-m);transition:margin .45s cubic-bezier(.2,.7,.2,1),padding .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s,border-radius .45s}
html.bred .u-rs[open]{margin:0 calc(-1*var(--u-rs-ut));padding:0 calc(var(--u-rs-m) + var(--u-rs-ut));border-radius:var(--r-ark);background:var(--surface);box-shadow:var(--fluid-lift),0 0 0 1px var(--rule);z-index:1}
html.bred :is(.u-rs[open],.u-rs[open]+.u-rs)::before{opacity:0}
html.bred .u-rs[open]+.u-rs[open]{margin-top:clamp(12px,1.4vw,20px)}
/* Kortet deler seg rundt det aapne arket (8 Okt 2026, Martin: «sterkere ark», «b, kjør»; mer loeft og en strek ble vist):
   radene over og under blir egne kort, og arket staar alene i luften mellom dem. Ingen farge. Margen ligger i radene, ikke i
   kortet, saa teksten staar stille; bare luften rundt arket glir. */
html.bred .u-rs-l:has(.u-rs[open]){background-color:transparent;box-shadow:none}
html.bred .u-rs-l:has(.u-rs[open]) .u-rs:not([open]){background:var(--surface);box-shadow:var(--fluid-lift)}
html.bred .u-rs-l:has(.u-rs[open]) .u-rs:not([open]):is(:first-child,.u-rs[open]+*){border-top-left-radius:28px;border-top-right-radius:28px}
html.bred .u-rs-l:has(.u-rs[open]) .u-rs:not([open]):is(:last-child,:has(+.u-rs[open])){border-bottom-left-radius:28px;border-bottom-right-radius:28px}
html.bred .u-rs-l:has(.u-rs[open]) .u-rs[open]{margin:clamp(28px,3.4vw,48px) calc(-1*var(--u-rs-ut))}
html.bred .u-rs-l:has(.u-rs[open]) .u-rs[open]:first-child{margin-top:0}
html.bred .u-rs-l:has(.u-rs[open]) .u-rs[open]:last-child{margin-bottom:0}
/* Ingen graa firkant over raden naar du trykker paa telefon (8 Okt 2026, Martin: «rister fortsatt») */
html.bred .u-rs summary{-webkit-tap-highlight-color:transparent}
/* Ved bytte mellom to aapne rader glir ikke margene, saa raden du trykket paa staar stille (ultimat.js, 8 Okt 2026) */
html.bred .u-rs-l.u-rs-bytt .u-rs{transition:box-shadow .45s,border-radius .45s}
@media (prefers-reduced-motion:reduce){html.bred :is(.u-rs-l,.u-rs,.u-rs::before){transition:none}}

/* ---- bruk: er dette for dere? ----------------------------------------------------------- */
html.bred .u-sj-l{list-style:none;margin:clamp(40px,5vw,80px) 0 0;padding:0;border-top:1px solid var(--rule)}
html.bred .u-sj{
  all:unset;box-sizing:border-box;display:flex;align-items:center;gap:28px;width:100%;cursor:pointer;
  padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid var(--rule);color:var(--ink-2);
  font-size:clamp(22px,2.6vw,40px);letter-spacing:-.025em;line-height:1.15;transition:color .3s;
}
html.bred .u-sj:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
html.bred .u-sj-b{flex:none;width:26px;height:26px;border:1.5px solid var(--ink);position:relative}
html.bred .u-sj[aria-pressed="true"]{color:var(--ink)}
html.bred .u-sj[aria-pressed="true"] .u-sj-b{background:var(--ink)}
html.bred .u-sj[aria-pressed="true"] .u-sj-b::after{
  content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg);
}
html.bred .u-sj-svar{margin:clamp(32px,4vw,56px) 0 0;font-size:clamp(18px,1.6vw,22px);color:var(--ink)}
html.bred .u-sj-svar b{font:400 clamp(40px,4vw,64px)/1 var(--mono);letter-spacing:-.04em;margin-right:6px}
html.bred .u-sj-svar a{color:var(--ink)}

/* ---- telefon ---------------------------------------------------------------------------- */
@media (max-width:899px){
  html.bred .u-b summary{grid-template-columns:32px minmax(0,1fr) 16px;gap:10px 14px}
  html.bred .u-b-o{grid-column:2;grid-row:1}
  html.bred .u-b-h{grid-column:2}
  html.bred .u-b summary .u-ev{grid-column:2}
  html.bred .u-b-plus{grid-column:3;grid-row:1}
  html.bred .u-b-a{grid-template-columns:32px minmax(0,1fr) 16px;gap:10px 14px}
  html.bred .u-b-a .u-b-o,html.bred .u-b-a .u-b-h,html.bred .u-b-a .u-ev{grid-column:2}
  html.bred .u-b-a .u-b-o{grid-row:1}
  html.bred .u-b-pil{grid-column:3;grid-row:1}
  html.bred .u-b-body{padding-left:46px}
  html.bred .u-fase-l{grid-template-columns:1fr}
  html.bred .u-fase-l li,html.bred .u-fase-l li+li{grid-template-columns:40px 1fr;gap:12px;padding:18px 0;border-left:0;border-bottom:1px solid var(--rule)}
  html.bred .u-st,html.bred .u-case-top{grid-template-columns:1fr}
  html.bred .u-st-l li:nth-child(n){--inn:0%}
  html.bred .boom main a.u-pr{grid-template-columns:minmax(0,1fr) 28px;gap:10px}
  html.bred .u-pr-h,html.bred .u-pr-k{grid-column:1}
  html.bred .u-pr-pil{grid-row:1;grid-column:2}
  html.bred :is(.u-tre,.u-steg){grid-template-columns:1fr}
  html.bred :is(.u-tre,.u-steg) li,html.bred :is(.u-tre,.u-steg) li+li{padding:24px 0;border-left:0;border-bottom:1px solid var(--rule)}
  html.bred .u-key li{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html.bred :is(.u-pr,.u-pr::before,.u-st-k,.u-sj,.u-pil i,.u-b-plus::after,.u-b-pil){transition:none}
}

/* ===========================================================================
   FORSIDEN ETTER INTROEN, 29 Sep 2026. Samme form som introen (kino.html): spoersmaalet i en
   pille med send-knapp, svaret med de viktige ordene i Instrument Serif kursiv, og en kildelinje.
   =========================================================================== */
html.bred .u-neste .b-h em{
  font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:-.01em;
}
html.bred .u-neste .b-h em{font-size:1.1em;color:var(--ink)}
html.bred .u-q{flex:1;padding:10px 0;font-size:clamp(18px,1.7vw,22px);line-height:1.35;color:var(--ink)}
html.bred .u-q .u-c{display:inline-block;width:2px;height:1.1em;vertical-align:-.18em;margin-left:1px;background:var(--ink);animation:u-blink 1s steps(1) infinite}
@keyframes u-blink{50%{opacity:0}}
/* pila .u-go staar i boom.css fra 1 Okt 2026 */

/* ---- 01 andre anlegg har allerede spurt ------------------------------------------------------ */
html.bred .u-d{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--ink);vertical-align:.05em}

/* ---- 02 neste spoersmaal er ditt ---------------------------------------------------------- */
html.bred .u-ne{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);margin-top:clamp(40px,5vw,80px);align-items:start}
html.bred .u-nq-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
html.bred .u-nq{
  all:unset;box-sizing:border-box;display:flex;align-items:center;gap:0;width:100%;cursor:pointer;
  padding:22px 0;border-bottom:1px solid var(--rule);color:var(--ink-3);
  font-size:clamp(19px,1.8vw,26px);line-height:1.25;letter-spacing:-.02em;transition:color .3s,gap .3s;
}
html.bred .u-nq::before{content:"";flex:none;width:0;height:10px;background:var(--ink);transition:width .3s}
html.bred .u-nq:hover{color:var(--ink)}
html.bred .u-nq[aria-pressed="true"]{color:var(--ink);gap:16px}
html.bred .u-nq[aria-pressed="true"]::before{width:10px}
html.bred .u-nq:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
html.bred .u-ne-r{position:sticky;top:120px}
html.bred .u-np-ps{margin-top:36px}
html.bred .u-np{transition:opacity .5s}
html.bred .u-np.venter{opacity:0}
html.bred .u-np h3{margin:0 0 16px;max-width:22ch;font-weight:500;font-size:clamp(26px,2.6vw,40px);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
html.bred .u-np p{margin:0;max-width:46ch;font-size:17px;line-height:1.5;color:var(--ink-2)}
html.bred .u-np .u-np-m{margin:22px 0 26px}

@media (max-width:899px){
  html.bred .u-ne-r{position:static}
}
@media (prefers-reduced-motion:reduce){
  html.bred :is(.u-nq,.u-nq::before,.u-np,.u-go){transition:none}
  html.bred .u-q .u-c{animation:none}
}

/* ===========================================================================
   MARTINS FEM NOTATER, 29 Sep 2026 (docs/overlevering-ultimat.md).
   =========================================================================== */

/* ---- 5 overskriftene i heroens skrift: Archivo bred, 600, versaler (som .b-hero h1) ---------- */
html.bred .b-h{
  font-weight:600;font-stretch:122%;text-transform:uppercase;max-width:none;
  font-size:clamp(min(36px,7.6vw),5.4vw,92px);line-height:.9;letter-spacing:-.025em;
}
/* Under 480 px krymper minstestoerrelsen med bredden, saa det lengste ordet (SAMMENHENGEN) faar plass uten deling (F50). */
html.bred .b-h-xl{font-size:clamp(40px,7.4vw,138px);line-height:.88}
html.bred .b-h em{text-transform:none}

/* ---- 1 boks i stedet for kursiv (laast 3 Okt 2026): markeringstusjen fra kino runde 15. Boksen er
   tekstens egen blekk, saa den er logoens svarte paa lyse flater og lys paa svarte, og skriften
   inni er flaten. Runde 2 (29 Sep 2026, Martin: «noen overlappet hverandre og var skjeve»):
   - Overskriften er mindre og har mer luft med boks, saa «HAR ALLEREDE» faar plass paa én linje
     og to bokser under hverandre har en fast glipe (linjehoeyde 1,08, boksen 96 % av skrifthoeyden).
   - Begynner boksen en linje (.kant, ultimat.js), staar den et tusjstrøk ut til venstre, saa ordene
     inni staar i samme kant som linja over. Midt i en linje beholder den mellomrommet.
   - Boksen tegnes naar ordene passerer 70 % av skjermen paa vei opp, og viskes ut igjen naar du
     ruller tilbake (klassen paa, ultimat.js). ------------------------------------------------- */
html.bred.boks .u-neste .b-h{font-size:clamp(32px,3.9vw,56px);line-height:1.2}
/* Boksen i overskriftene (.b-h em med .kant, .paa, u-tegn og laksen) staar i boom.css fra 1 Okt 2026
   og deles med forsiden. */
@media (max-width:899px){html.bred.boks .u-neste .b-h{font-size:clamp(28px,8.7vw,56px)}}
/* ro (laast 3 Okt 2026, QA 2.8): markeringen er laksen fra «Book en demo», og Svar mister det som gjentar seg, som
   systemene under hvert spoersmaal i strømmen (30 Sep 2026, Martin om Svar: «alle "too busy"»). Laksen (--u-merk) og
   ro i strømmen staar i boom.css fra 1 Okt 2026. */
html.bred.u-ro .u-svar :is(.u-s-sy,.u-ev){display:none}

/* ---- 4 fargene paa baandene: nett, laast 3 Okt 2026 (QA 2.8); de andre fargene er tatt av (commit 87f94eb).
   To lyse baand etter hverandre skilles med en strek. ---------------------------------------------------- */
html.bred .b-papir+.b-papir{border-top:1px solid var(--rule)}
/* nett (standard fra 1 Okt 2026, bare avslutningen): baandet har ingen flate og sidens egne tokens, saa den levende flaten og
   nettet bak hele siden synes gjennom, som paa forsiden. Nettet dempes av ai.js som der. */
html.bred .b-nett{background:transparent}

/* ---- veksle: ingen strek mellom casene (Martin 30 Sep 2026); prikkene er fjernet (2 Okt 2026) */

/* ---- 01 tallene i Svar (forslagene til kroken og bevisene er laast til ingen og rad og tatt av 3 Okt 2026, QA 2.8,
   Martin: «De valgte låses, og resten tas av»; de staar i commit 87f94eb). Svar er bare chattene i én spalte. */
html.bred[data-krok="ingen"] .u-sv-topp{grid-template-columns:minmax(0,1fr)}
html.bred .u-bv-n{font:400 clamp(44px,5vw,84px)/1 var(--mono);letter-spacing:-.04em;white-space:nowrap;color:var(--ink)}
html.bred .u-bv-n b{font-weight:inherit}
/* Mellomrom foer enheten staar i teksten («15 %», «3 mnd.», 3 Okt 2026, Martin); mono gjoer det et helt tegn bredt, saa det smalnes */
html.bred .u-bv-n small{margin-left:0;word-spacing:-.3em;font-size:.48em;letter-spacing:0}


/* ---- spoersmaalsstroemmen (#uStrom, ultimat.js; standard fra 30 Sep 2026). Ett og ett kort kommer inn under det forrige
   og skrives, fem kort én gang ovenfra og ned (ingen karusell fra 1 Okt 2026). Andre runde samme dag (Martin, med sanity.io/content-agent): rett paa
   baandet, og hvert kort er chatfeltet fra heroen, i sidens egne farger. Baandet har sine egne tokens, saa
   sidens hentes paa <html> under egne navn og settes tilbake i kortet: hvitt felt paa svart i lys modus,
   moerkt felt paa lyst baand i moerk. Chattene som fyllte seg (#uFeed, ?sp=svar) ble tatt helt ut 3 Okt 2026
   (Martin: «ta dem bort»); de ligger i commit b5ed963. */
/* Selve strømmen, kortene og pila staar i boom.css fra 1 Okt 2026 og deles med forsiden (#strom). */
/* Overskriften over chattene (u-over, standard fra 2 Okt 2026, Martin: «over, legg det på forsiden», etter «skal
   overskriften komme over chattene? nå når de er sidestilt kan det kanskje være litt rart?»), laast 3 Okt 2026: chattene
   staar i én spalte, slik telefonen alltid har vist dem. ai.js skriver kortene ett og ett naar du ruller til dem, én gang
   per fane. */
html.bred.u-over .u-sv-topp{grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px)}
html.bred.u-over .u-svar .u-strom{max-width:760px}
/* Bare chatten (krok ingen, 2 Okt 2026, Martin: «chattene må vel midtstilles»): uten overskrift staar chattene midt paa.
   Full bredde opp til max-width (3 Okt 2026): auto-marger i et rutenett krymper listen til innholdet, og ai.js maaler
   kortene med tom tekst, saa flaten sto smal mens spoersmaalet ble skrevet forbi den. */
html.bred[data-krok="ingen"] .u-svar .u-strom{margin-inline:auto;width:100%}
/* Tallene under bare chatten (2 Okt 2026, Martin: «svært minimalistisk og pent»): tre tall midt paa, hva de er under.
   Hele tallet er lenken; ved hover blir teksten under lysere. */
html.bred .u-r3w{margin-top:clamp(72px,9vw,128px);text-align:center}
html.bred .u-r3{list-style:none;margin:0 auto;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(24px,4vw,64px);text-align:center}
html.bred .boom main .u-r3 a{display:grid;justify-items:center;gap:14px;text-decoration:none;color:var(--ink)}
html.bred .u-r3 .u-bv-n{font-size:clamp(52px,5.6vw,92px)}
html.bred .u-r3-h{font-size:16px;line-height:1.4;color:var(--ink-2);max-width:18em;transition:color .3s ease}
/* Ord i sidens skrift, bare sifrene i mono (8 Okt 2026, Martin: «A»; samme feil som 18 Sep) */
html.bred .u-r3-k{margin-top:-8px;font:400 14px/1.4 var(--sans);color:var(--ink-2)}
html.bred .u-r3 a:is(:hover,:focus-visible) .u-r3-h{color:var(--ink)}
html.bred.rv-on .u-r3 li[data-rv]{transition-delay:calc(var(--i) * .15s)}
/* rad (3 Okt 2026, Martin: «f»): smaa versaler over, tallene med luft mellom */
html.bred .u-rd-o{margin:0 auto clamp(32px,4vw,48px);max-width:none;font:400 15px/1.4 var(--sans);color:var(--ink-2)}
/* Mono som i foerste utgave (3 Okt 2026, Martin: «den første var best»); hver tekst paa én linje */
html.bred .u-rd .u-r3-h{max-width:none;white-space:nowrap}
html.bred .u-r3.u-rd{gap:0 clamp(32px,5vw,96px);max-width:1200px}
/* Anleggstypen staar paa samme linje i alle tre spaltene (3 Okt 2026, Martin: «anleggs eller kategori må stå på linje») */
html.bred .boom main .u-rd a{height:100%;grid-template-rows:auto 1fr auto}
@media (max-width:1000px){html.bred .u-rd .u-r3-h{white-space:normal}}
/* Uten de loddrette strekene fra 7 Okt 2026, luften skiller tallene (designeren, Martin: «7B») */
html.bred .u-rd li{padding:0}
/* Spansk er lengre: fra 1001 til 1199 px ble «menos medio de biofiltro, misma garantía» kuttet og anleggstypen brutt.
   Smalere marger og 15 px holder hver tekst paa én linje der (3 Okt 2026); norsk og engelsk er som foer */
@media (min-width:1001px) and (max-width:1199px){
  html.bred[lang=es] .u-rd li{padding:0 2px}
  html.bred[lang=es] .boom main .u-rd a{padding-left:8px;padding-right:8px}
  html.bred[lang=es] .u-rd .u-r3-h{font-size:15px}
}
/* Hvert tall er lenken til casen, med hoveren fra /omtale (3 Okt 2026, Martin: «når man hover over disse må det
   indikeres», «bruk hover estetikken fra omtale på en kreativ måte»): tallet blir en flis med baandenes radius, en
   lys tone (--fyll) fylles som en sirkel fra der pekeren kommer inn og trekker seg ut der den gaar (ai.js gir --mx,
   --my og --mr), og tallet trekker seg sakte naermere. Pekeren faar «Se casen» (data-tip). */
html.bred .boom main .u-rd a{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-ark);padding:clamp(24px,2.6vw,36px) clamp(12px,1.6vw,24px)}
html.bred :is(.u-rd a,.pd-t-a)::before{
  content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);
  width:calc(var(--mr,400px) * 2);height:calc(var(--mr,400px) * 2);margin:calc(var(--mr,400px) * -1) 0 0 calc(var(--mr,400px) * -1);
  border-radius:50%;background:var(--fyll);transform:scale(0);transition:transform .55s cubic-bezier(.3,.7,.2,1);
}
html.bred :is(.u-rd a,.pd-t-a):is(:hover,:focus-visible)::before{transform:scale(1)}
html.bred :is(.u-rd .u-bv-n,.pd-t-a .pd-t-n){transform-origin:50% 100%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.bred :is(.u-rd a:is(:hover,:focus-visible) .u-bv-n,.pd-t-a:is(:hover,:focus-visible) .pd-t-n){transform:scale(1.06)}
html.bred :is(.u-rd a,.pd-t-a):focus-visible{outline:0}
@media (prefers-reduced-motion:reduce){
  html.bred :is(.u-rd a,.pd-t-a)::before{transition:none}
  html.bred :is(.u-rd .u-bv-n,.pd-t-a .pd-t-n){transition:none}
  html.bred :is(.u-rd a,.pd-t-a):is(:hover,:focus-visible) :is(.u-bv-n,.pd-t-n){transform:none}
}
@media (max-width:760px){
  html.bred .u-r3{grid-template-columns:1fr}
  /* Ingen streker paa telefon heller, luften skiller tallene (7 Okt 2026, Martin: «trenger ikke linjene hvis du gir dem
     litt mer luft») */
  html.bred .u-r3.u-rd{row-gap:40px}
}

/* ---- luft mellom seksjonene (Martin 30 Sep 2026: «mellom hver seksjon kan det være litt luft slik at du ser bakgrunn
   og kontekstgrafen bak som vokser»). Den levende flaten og nettet staar allerede fast bak hele siden; baandene dekker
   dem, og luften slipper dem fram. */
html.bred.u-luft main>.b-band+.b-band{margin-top:clamp(64px,10vw,160px)}
/* /resultater og /produkter: avslutningen staar rett under kortet, ikke en skjerm lenger ned, og like langt under paa
   begge (3 Okt 2026, Martin: «på den tomme siden her burde det vel være noe», «ikke lik avstand luft») */
html.bred :is(.u-resultater,.pd-oversikt){padding-bottom:0}
html.bred.u-luft main>:is(.u-resultater,.pd-oversikt)+.b-band{margin-top:0}
html.bred :is(.u-resultater,.pd-oversikt)+.u-fase{padding-top:clamp(64px,8vw,128px)}
/* Forsiden (/, /en, /es): én fast luft mellom alle seksjoner, fra innhold til innhold (17 Okt 2026, Martin: «A, kjør: én
   fast luft mellom alle seksjoner på forsiden»). Foer var det padding pluss margin med unntakene over, 121 til 453 px ved
   1512 px. Luften deles likt paa baandet over og under; sitatet har egen flate og faar halve luften som margin rundt
   den. 240 px ved 1512, 120 px paa telefon. :has(>#chat) gir id-vekt, saa unntakene over ikke naar forsiden. */
html.bred main:has(>#chat){--luft:clamp(120px,16vw,240px)}
html.bred.u-luft main:has(>#chat)>.b-band+.b-band{margin-top:0}
html.bred main:has(>#chat)>.b-band.b-nett{padding-top:calc(var(--luft) / 2);padding-bottom:calc(var(--luft) / 2)}
html.bred.u-luft main:has(>#chat)>.b-band.b-dyp{margin-block:calc(var(--luft) / 2)}
html.bred main:has(>#chat)>.b-hero{padding-bottom:calc(var(--luft) / 2)}
/* nettet sterkere forbi heroen (u-nett, ultimat.js), der det bare synes i luften; ai.js setter opasiteten inline */
html.bred.u-luft .boom-net{transition:opacity .8s ease}
/* Med farge nett (laast 3 Okt 2026): der er bare avslutningen gjennomsiktig, og u-nett slipper naar den er i bildet. */
html.bred.u-luft.u-nett .boom-net{opacity:.6!important}

@media (max-width:899px){
  html.bred .u-sv-topp{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
}

/* ===========================================================================
   RUNDE 3, 29 Sep 2026: Martins fem bilder (sanity, en knapp med film bak, Interfere og Bunsen).
   Valgene stod bak flagg; de er laast og resten er tatt av 3 Okt 2026 (QA 2.8, commit 87f94eb).
   =========================================================================== */

/* ---- 1 store knapper. Filmen bak «Book en demo» ved hover er tatt ut 1 Okt 2026 (Martin: «fjern filmen
   inni "book en demo", den gir ikke mening for folk»). Stoerrelsen staar i boom.css. ------------- */

/* ---- 3 tekst som kommer fram mens du ruller, etter Bunsen. Ordene i Birthes sitat
   og i avslutningen staar svake og fylles ett og ett i takt med rullingen, begge veier (--o,
   ultimat.js). Uten skript eller under redusert bevegelse staar alt fullt. ------------------- */
/* Reglene staar i boom.css fra 1 Okt 2026 og deles med forsiden. */

/* ---- 4 filmbaandet, etter Bunsen: én film over hele bredden med tittelen og en pille nede til venstre («bred», laast
   3 Okt 2026). De tre staaende kortfilmene (?film=tre) ble tatt helt ut 3 Okt 2026 (Martin: «ta dem bort»).
   Produktsidene bruker fortsatt .u-ft-go til «Alle filmene». ---------------- */
html.bred #film{padding-bottom:0}
/* Sitatet og filmen er to seksjoner igjen fra 8 Okt 2026 (Martin: «a»): som én seksjon (7 Okt, «3B») leste sitatet seg som
   en bildetekst til filmen. Filmen har eget skinn og vanlig luft over seg, paa samme lyse flate, og starter med en ren kant. */
/* Ingen margin mellom dem, ellers synes den levende flaten som et baand mellom to lyse seksjoner (designerens poeng i 3B) */
html.bred #sitat+#film,html.bred.u-luft main>#sitat+#film{margin-top:0}
/* Mindre luft mellom Birthe og filmen (8 Okt 2026, Martin: «mindre luft mellom Birthe og filmen»): bare filmens egen luft over skinnet */
html.bred #sitat:has(+#film){padding-bottom:0}
html.bred #film .b-h{margin-top:clamp(20px,2vw,32px)}
html.bred .u-fb{position:relative;margin-top:clamp(40px,5vw,80px);height:min(100vh,62vw);min-height:420px;overflow:hidden}
html.bred .u-fb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Flaten er hel bak teksten (7 Okt 2026): paa den lyse flaten staar moerk tekst, og video bak den var for svak kontrast.
   Fra 8 Okt 2026 (Martin: «gjør videoen litt større, slik at faden kommer lengre nede») er filmen hoeyere, og fade-en
   henger paa teksten i stedet for paa halve filmen: hel flate bak teksten og ned til kanten, fade over --fb-fade over
   den. Saa starter fade-en like lavt som teksten tillater, paa alle hoeyder. */
/* Myk fade (9 Okt 2026, Martin: «det er liksom en strek her»): en rett, lineaer fade starter og slutter braatt, og
   starten synes som en strek over de moerke partiene i filmen. Stegene foelger en S-kurve (smootherstep). */
html.bred .u-fb-t::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:calc(-1 * var(--fb-fade));bottom:calc(-1 * var(--fb-bunn));background:linear-gradient(transparent calc(var(--fb-fade) * 0),color-mix(in srgb,var(--paper) 1.6%,transparent) calc(var(--fb-fade) * 0.125),color-mix(in srgb,var(--paper) 10.4%,transparent) calc(var(--fb-fade) * 0.25),color-mix(in srgb,var(--paper) 27.4%,transparent) calc(var(--fb-fade) * 0.375),color-mix(in srgb,var(--paper) 50%,transparent) calc(var(--fb-fade) * 0.5),color-mix(in srgb,var(--paper) 72.6%,transparent) calc(var(--fb-fade) * 0.625),color-mix(in srgb,var(--paper) 89.6%,transparent) calc(var(--fb-fade) * 0.75),color-mix(in srgb,var(--paper) 98.4%,transparent) calc(var(--fb-fade) * 0.875),var(--paper) calc(var(--fb-fade) * 1));pointer-events:none}
/* Under sitatet starter filmen med en ren kant (8 Okt 2026, Martin: «fade ut her ser ikke bra ut», «a»): fade-en ovenfra
   (7 Okt, «3B») ble et graatt belte av lys flate over moerk video og kuttet grafikken i filmen. Lang myk fade er forkastet. */
html.bred .u-fb-t{
  position:absolute;left:0;right:0;bottom:var(--fb-bunn);z-index:1;box-sizing:border-box;
  max-width:var(--maks);margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;
}
html.bred .u-fb-t .u-case-k{flex-basis:100%;margin:0}
html.bred .u-fb-h{margin:0;max-width:18ch;color:var(--ink);font-weight:500;font-stretch:112%;font-size:clamp(28px,3.4vw,56px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
/* linja under tittelen (1 Okt 2026): tittel og linje staar sammen til venstre, knappen til hoeyre */
html.bred .u-fb-t:has(.u-fb-p){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 40px}
html.bred .u-fb-t:has(.u-fb-p) .u-case-k{grid-column:1/-1}
html.bred .u-fb-p{grid-column:1;margin:0;max-width:44ch;color:var(--ink-2);font-size:clamp(17px,1.3vw,20px);line-height:1.45;text-wrap:pretty}
html.bred .u-fb-t:has(.u-fb-p) .u-reel{grid-column:2;grid-row:2/span 2}
@media (max-width:760px){html.bred .u-fb-t:has(.u-fb-p){grid-template-columns:1fr}html.bred .u-fb-t:has(.u-fb-p) .u-reel{grid-column:1;grid-row:auto;justify-self:start}}
/* Hele bildet i filmen (8 Okt 2026, Martin: «se mer av bildet i videoen som faden per nå ligger over ... uten å zoome inn»):
   fra 900 px staar videoen i sitt eget format, 16:9, og teksten under den paa flaten i stedet for oppaa. Bare fade-en
   ligger over bildet. Hoeyst en skjerm hoey. Ogsaa paa telefon (8 Okt 2026, Martin: «gjør det samme på telefon»): 3:4 viste
   under halve bredden av bildet, og teksten dekket nedre halvdel av det. */
html.bred .u-fb{height:auto;min-height:0;padding-bottom:var(--fb-bunn);--fb-fade:clamp(48px,9vw,144px);--fb-bunn:clamp(20px,3vw,48px)}
html.bred .u-fb video{position:relative;inset:auto;height:auto;aspect-ratio:16/9;max-height:100vh}
html.bred .u-fb-t{position:relative;bottom:auto}
/* Pause og lyd i filmen (9 Okt 2026, Martin: «det må være tekst på den - kanskje til og med av og på med lyd»): karusellens
   knapper, oeverst til hoeyre i bildet paa sidens linje, i flatens farge saa de synes over filmen. Tekstingen staar
   over fade-en (`ultimat.js`) i en stoerrelse som passer filmen; nettleserens 5 % av hoeyden blir 36 px her. */
html.bred .u-fb-styr{position:absolute;z-index:2;top:clamp(12px,1.6vw,24px);right:max(var(--pad),calc((100% - var(--maks)) / 2 + var(--pad)));display:flex;gap:10px}
html.bred .u-fb-styr .u-kar-lyd{background:var(--surface);border-color:transparent;box-shadow:var(--fluid-lift)}
html.bred .u-fb-styr .u-kar-lyd:hover{background:var(--ink);color:var(--paper)}
html.bred .u-fb video::cue{font-family:'Open Sans',system-ui,sans-serif;font-size:clamp(15px,1.4vw,22px)}
html.bred .u-fb video::-webkit-media-text-track-display{white-space:normal!important;overflow-wrap:break-word!important}
/* «Start med ett spoersmaal» (1 Okt 2026, Martin: «knappene ... burde vaere til venstre»): linja og knappene
   staar under hverandre, til venstre, paa alle sider som har avslutningen */
html.bred #start .b-end-rad{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:clamp(24px,2.6vw,40px)}
/* Hver setning paa sin linje (2 Okt 2026): «Vi starter med én beslutning, ikke hele datalandskapet.» brakk paa
   440 px og la «datalandskapet.» alene. Paa telefon brekker setningene som vanlig. */
html.bred #start .b-end-rad .b-lede{max-width:34em}
/* Avslutningen og bunnen paa én skjerm (5 Okt 2026, Martin: «den er litt for dyp»): helt nede sto overskriften
   under toppmenyen, paa 13 tommer og paa LG. Overskriften krymper etter skjermhoeyden, og er aldri stoerre enn at
   «Start med ett» staar paa én linje i spalta (1296 px), saa den er to linjer. Bunnen kommer tettere under. */
/* Samme dag, paa LG (Martin: «burde den ikke klare å skalere etter hvilke skjerm eller størrelse på vindu?»):
   avslutningen sto lavt med tom flate over. Den fyller nå skjermen sammen med bunnen (rundt 200 px) og staar
   midt i den, og paa hoeye skjermer vokser overskriften til tre linjer og opptil 196 px, som foer. */
html.bred #start{padding-block:clamp(24px,3vw,48px);min-height:calc(100svh - 200px);display:flex;flex-direction:column;justify-content:center}
html.bred #start>.b-in{width:100%}
/* Under kortet paa /produkter og /resultater faar avslutningen luften fra 3 Okt tilbake (17 Okt 2026, Martin: «det må vel
   være litt mer luft mellom disse to? jeg syntes de står veldig tett»): #start over tok den, saa merket sto 24 px under. */
html.bred main>:is(.u-resultater,.pd-oversikt)+#start{padding-top:clamp(64px,8vw,128px)}
/* og «04 Neste steg» skal ogsaa vaere med (Martin samme dag, paa MacBook Pro): mindre luft under merket og over
   linja, og overskriften regner med merket i hoeyden */
html.bred #start .rail{margin-bottom:clamp(24px,2.4vw,40px)}
html.bred #start .b-end-rad{margin-top:clamp(28px,3.4vw,56px)}
/* Tre linjer paa alle spraak, én setning per linje (16 Okt 2026, Martin: «må være lik antall linjer på de forskjellige
   språkene, engelsk er alt for høy overskrift, ta utgangspunkt i norsk versjon»): linjene brytes bare ved <br>, og
   skriften krymper saa den lengste linja er like bred som «Start lite.» (Archivo 600, 122 %: «Prove value.» er 1,24
   ganger bredere, «Empiece en pequeño.» 2,02). En ny oversettelse trenger ny --fit. */
html.bred #start .b-end{--fit:1;white-space:nowrap}
html.bred[lang=en] #start .b-end{--fit:.8}
html.bred[lang=es] #start .b-end{--fit:.49}
html.bred #start .b-end{font-size:calc(var(--fit) * clamp(min(46px,12.2vw),min(9.4vw,136px,(100svh - 620px) / 1.94),136px))}
@media (min-height:1120px){html.bred #start .b-end{font-size:calc(var(--fit) * clamp(46px,min(10vw,(100svh - 763px) / 2.91),196px))}}
/* #film i velgeren: skinnets lenkeregel (0,5,2 i boom.css) maler ellers teksten i sidens blekk */
html.bred #film a.u-reel{
  display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:clamp(17px,1.4vw,20px);text-decoration:none;
}
html.bred #film .u-reel i{font-style:normal;transition:transform .3s}
html.bred #film .u-reel:hover i{transform:translateX(5px)}
html.bred .u-ft-go{margin:clamp(28px,3vw,44px) 0 0}

/* ---- 5 filmene, /filmer (2 Okt 2026, Martin: «større videoramme og mulighetene til å bla i en slags karusell,
   høyre og venstre. lag denne litt mer spennende»). Filmen i midten er stor og spiller; naboene staar ved
   siden av, mindre, svakt vridd bort og dempet, og glir inn naar du blar. Rammen er satt etter hoeyden paa
   skjermen, saa den fyller den, og aldri bredere enn 600 px. Teksten staar paa bunnen av filmen, i baandets
   farge, saa rammen kan bruke hele hoeyden og ikke deler den med en bildetekst under. Hjoernene er 28 px, som oeya i toppen. Glorien
   bak er plakaten til filmen som spiller, uskarp; den er ett bilde, ikke en film til. Helningen og dempingen
   regnes fra rullingen i ultimat.js (--p er avstanden fra midten i kort, --a det samme uten fortegn). ---- */
html.bred .u-kar{
  --kw:min(calc((100svh - 140px) * 9 / 16),82vw,600px);
  --kgap:clamp(14px,2vw,36px);
  padding-bottom:clamp(56px,6vw,104px);overflow:hidden;
}
html.bred .u-kar .rail{margin-bottom:clamp(20px,2.4vw,40px)}
/* Pausen er foerst i Tab (APG Carousel, docs/apg-gjennomgang-2026-10-07.md nr. 14, 7 Okt 2026): raden med pause, streker
   og lyd staar foer filmene i koden og legges under dem her. */
html.bred .u-kar{display:flex;flex-direction:column}
html.bred .u-kar > .b-in{width:100%}
html.bred .u-kar > .u-kar-styr{order:1}
html.bred .u-kar > .u-ft-go{order:2}
/* Strekene er like brede som filmen, og pause og lyd staar som et par midt under dem (7 Okt 2026, Martin: «B»,
   tools/valg ?p=karstyr). Pausen er fortsatt foerst i koden og i Tab; strekene legges over med order. */
html.bred .u-kar .u-kar-styr{flex-wrap:wrap;row-gap:6px;column-gap:12px}
html.bred .u-kar .u-kar-ss{order:-1;flex:0 0 100%;width:auto;padding-inline:max(0px,calc((100% - var(--kw)) / 2))}
/* Filmer, toppen og karusellen i én seksjon (2 Okt 2026, Martin: «alt for mye luft i toppen»), uten synlig tittel og
   med brede kort (samme dag: «vekk med tittel. hvert videokort kan være mye bredere»). Klippene er liggende
   skjermbilder i en staaende ramme med uskarp fyll over og under, saa 16:9 viser innholdet og kutter fyllet. Teksten
   staar under filmen i kortet, ikke over bildet, og kortet er saa hoeyt at det og stripene staar paa én skjerm. */
html.bred .u-kar.u-topp{padding-top:clamp(16px,2vw,32px)}
html.bred .u-kar:is(.u-topp,.pd-film){--kw:min(calc((100svh - 440px) * 16 / 9),88vw,1040px)}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-styr{margin-top:clamp(12px,1.4vw,20px)}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-pil{top:calc(24px + var(--kw) * 9 / 32)}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-glod{width:calc(var(--kw) * 1.4);height:calc(var(--kw) * .8)}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-k{border-radius:var(--r-ark);overflow:hidden;background:var(--surface);box-shadow:var(--fluid-lift)}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-v{aspect-ratio:16/9;border-radius:0;box-shadow:none}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-t{
  position:relative;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px) clamp(20px,2.2vw,28px);border-radius:0;background:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,3vw,48px);align-items:start;
}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-t .u-case-k{grid-column:1;margin-bottom:12px}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-h{grid-column:1}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-d{grid-column:2;grid-row:1 / span 2;margin:0 0 14px}
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-t .u-pil{grid-column:2}
/* Filmen toner over i teksten paa produktsidene (9 Okt 2026, Martin: «gjør det samme på produktsidene»; /filmer samme dag): samme myke
   S-kurve som filmen paa forsiden (`.u-fb-t::before`), i kortets farge, og like stor del av bildet (rundt 16 %).
   Ogsaa paa telefon (14 Okt 2026, funksjonstest M03): med minst 48 px var overgangen en fjerdedel av filmen der, og
   tekstingen, som staar 8 % over bunnen (`loft()` i `ultimat.js`), forsvant i det hvite. */
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-v{background:var(--surface)}   /* ingen graa halvpiksel der filmen slutter */
html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-t::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 2px);height:clamp(24px,calc(var(--kw) * .09),144px);background:linear-gradient(transparent 0%,color-mix(in srgb,var(--surface) 1.6%,transparent) 12.5%,color-mix(in srgb,var(--surface) 10.4%,transparent) 25%,color-mix(in srgb,var(--surface) 27.4%,transparent) 37.5%,color-mix(in srgb,var(--surface) 50%,transparent) 50%,color-mix(in srgb,var(--surface) 72.6%,transparent) 62.5%,color-mix(in srgb,var(--surface) 89.6%,transparent) 75%,color-mix(in srgb,var(--surface) 98.4%,transparent) 87.5%,var(--surface) 100%);pointer-events:none}
@media (max-width:760px){
  html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-t{grid-template-columns:minmax(0,1fr)}
  html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-d,html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-t .u-pil{grid-column:1;grid-row:auto}
  html.bred .u-kar:is(.u-topp,.pd-film) .u-kar-d{margin:10px 0 14px}
}
html.bred .u-kar-scene{position:relative}
html.bred .u-kar-glod{
  position:absolute;left:50%;top:6%;width:calc(var(--kw) * 2.4);height:calc(var(--kw) * 1.5);
  translate:-50% 0;background:center/cover no-repeat;filter:blur(90px) saturate(1.3);opacity:.5;
  border-radius:50%;pointer-events:none;transition:background-image .7s ease;
}
html.bred .u-kar-spor{
  position:relative;list-style:none;margin:0;padding:24px max(16px,calc(50% - var(--kw) / 2)) 8px;
  display:flex;gap:var(--kgap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
html.bred .u-kar-spor::-webkit-scrollbar{display:none}
/* Sporet tar piltastene; med fokus faar filmen i midten ringen (WCAG 2.4.7, funn 3, 7 Okt 2026). */
html.bred .u-kar-spor:focus-visible{outline:none;box-shadow:none}
html.bred .u-kar-spor:focus-visible .u-kar-k.is-on .u-kar-v{outline:2px solid var(--focus);outline-offset:4px}
html.bred .u-kar-k{
  position:relative;flex:0 0 var(--kw);scroll-snap-align:center;scroll-snap-stop:always;
  transform:perspective(1600px) rotateY(calc(var(--p,0) * -11deg)) scale(calc(1 - var(--a,0) * .14));
  transform-origin:50% 40%;
}
html.bred .u-kar-v{
  position:relative;aspect-ratio:9/16;border-radius:28px;overflow:hidden;isolation:isolate;
  background:var(--surface-2);box-shadow:var(--fluid-lift);
}
html.bred .u-kar-k:not(.is-on) .u-kar-v{cursor:pointer}
html.bred .u-kar-v video{width:100%;height:100%;object-fit:cover;display:block}
html.bred .u-kar-v video::cue,html.bred .pd-ek-v video::cue{font-family:'Open Sans',system-ui,sans-serif}   /* tekstingen, funn 11 */
@media (max-width:700px){html.bred .u-kar-v video::cue,html.bred .pd-ek-v video::cue{font-size:15px}}   /* nettleserens 5 % av filmhoeyden blir 9 px paa telefon */
html.bred .u-kar-v video::-webkit-media-text-track-display,html.bred .pd-ek-v video::-webkit-media-text-track-display{white-space:normal!important;overflow-wrap:break-word!important}   /* Chrome setter nowrap paa selve linja, saa en lang linje gikk ut av bildet paa telefon (9 Okt 2026). Ogsaa filmen paa Labs (17 Okt 2026): Mortens lengre linje i pm-1-camera gikk ut av bildet der */
/* dempingen: et lag i baandets farge over naboene, ikke et filter paa filmen */
html.bred .u-kar-v::after{
  content:"";position:absolute;inset:0;z-index:1;background:var(--paper);pointer-events:none;
  opacity:min(.62,calc(var(--a,0) * .55));
}
/* stoppet med et trykk: en rolig trekant midt i bildet */
html.bred .u-kar-v::before{
  content:"";position:absolute;z-index:2;left:50%;top:50%;width:46px;height:54px;margin:-27px 0 0 -18px;
  background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%);
  opacity:0;scale:.8;transition:opacity .2s ease,scale .3s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
html.bred .u-kar-k.is-pause .u-kar-v::before{opacity:.9;scale:1}
/* teksten ligger paa bunnen av filmen; under ordene er flaten hel i baandets farge, saa kontrasten er
   den samme som ellers i baandet, og bare over dem toner den ut mot bildet */
html.bred .u-kar-t{
  position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(72px,9svh,120px) 28px 26px;
  border-radius:0 0 28px 28px;background:linear-gradient(to bottom,transparent,var(--paper) 46%);
  opacity:max(0,calc(1 - var(--a,0) * 2.4));translate:0 calc(var(--a,0) * 16px);
}
html.bred .u-kar-t .u-pil{margin:0}
/* et trykk paa teksten gaar gjennom til filmen og stopper den; bare lenken i filmen som spiller tar imot */
html.bred .u-kar-t{pointer-events:none}
html.bred .u-kar-k.is-on .u-kar-t a{pointer-events:auto}
html.bred .u-kar-t .u-case-k{display:flex;align-items:center;gap:12px;margin:0 0 14px}
html.bred .u-kar-nr{background:var(--ink);color:var(--paper);padding:6px 7px 5px}
html.bred .u-kar-h{
  margin:0;color:var(--ink);font-weight:500;font-stretch:112%;font-size:clamp(22px,2vw,32px);
  line-height:1.05;letter-spacing:-.025em;text-wrap:balance;
}
html.bred .u-kar-d{margin:12px 0 18px;max-width:40ch;color:var(--ink-2);font-size:16px;line-height:1.45;text-wrap:pretty}
html.bred .u-kar-sl{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:32px;text-align:center;
}
html.bred .u-kar-sl .u-kar-d{margin:6px 0 26px}
/* pilene staar ved kantene av baandet, midt paa filmen */
html.bred .u-kar-pil{
  position:absolute;z-index:3;top:calc(24px + var(--kw) * 8 / 9);translate:0 -50%;
  display:grid;place-items:center;width:60px;height:60px;padding:0;border-radius:50%;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  transition:background-color .25s ease,color .25s ease,opacity .25s ease;
}
html.bred .u-kar-pil svg{width:26px;height:26px;transition:translate .3s}
html.bred .u-kar-pil-v{left:var(--pad)}
html.bred .u-kar-pil-h{right:var(--pad)}
html.bred .u-kar-pil:not(:disabled):hover{background:var(--ink);color:var(--paper)}
html.bred .u-kar-pil-v:not(:disabled):hover svg{translate:-3px 0}
html.bred .u-kar-pil-h:not(:disabled):hover svg{translate:3px 0}
html.bred .u-kar-pil:disabled{opacity:.28}
/* tolv streker: hvor du er, og hvor langt filmen har kommet. Hver strek er en knapp. */
html.bred .u-kar-styr{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,28px);margin-top:clamp(20px,2.4vw,36px)}
html.bred .u-kar-ss{display:flex;gap:6px;width:min(calc(var(--kw) * 1.3),100%)}
html.bred .u-kar-s{flex:1;height:28px;padding:0;border:0;background:none;cursor:pointer}
html.bred .u-kar-s i{position:relative;display:block;height:3px;border-radius:2px;background:var(--rule);overflow:hidden}
html.bred .u-kar-s i::before{
  content:"";position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;
  transform:scaleX(var(--t,0));transition:transform .26s linear;
}
html.bred .u-kar-s.is-past i::before{transform:none;transition:none}
html.bred .u-kar-s:not(.is-on):not(.is-past) i::before{transition:none}
html.bred .u-kar-s:hover i{background:var(--ink-3)}
html.bred .u-kar-lyd{
  flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;
  border:1px solid var(--rule);background:none;color:var(--ink);transition:background-color .25s ease,color .25s ease;
}
html.bred .u-kar-lyd svg{width:22px;height:22px}
html.bred .u-kar-lyd:hover{background:var(--ink);color:var(--paper)}
html.bred .u-kar-lyd.er-paa .u-kar-av,html.bred .u-kar-lyd:not(.er-paa) .u-kar-paa{display:none}
/* Pause og spill (WCAG 2.2.2, docs/wcag-2026-10-07.md funn 2): ett ikon om gangen, etter om filmene staar. */
html.bred .u-kar-pause.er-pause .u-kar-pa,html.bred .u-kar-pause:not(.er-pause) .u-kar-sp{display:none}
/* Fullskjerm (M23): staar svakt paa sluttkortet, som ikke har noen film. */
html.bred .u-kar-full:disabled{opacity:.28;pointer-events:none}
@media (max-width:760px){
  html.bred .u-kar-pil{display:none}
  html.bred .u-kar-v{border-radius:22px}
  html.bred .u-kar-t{border-radius:0 0 22px 22px;padding:64px 20px 20px}
  html.bred .u-kar-spor{-webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-motion:reduce){
  html.bred .u-kar-k{transform:none}
  html.bred .u-kar-t{translate:none}
  html.bred .u-kar-glod,html.bred .u-kar-s i::before{transition:none}
}

/* ---- produktsidene /ai/<slug>/ (produktsider.py, 2 Okt 2026) ----------------------------------------
   Martin: «lag disse produktsidene litt mer spennende. match kreativiteten til resten av hjemmesiden». */
html.bred .u-pp-topp .boom-cta{margin-top:clamp(32px,3.4vw,48px)}
/* Signalflyten (build.py) i full bredde i «Hva den gjør»: inn til venstre, ut til hoeyre, én node. */
/* Kartet over de seks, stort nok til aa lese; glorien er papiret baandet staar paa. */
html.bred .u-pp-kart .pp-kart-fig{margin:clamp(32px,4vw,64px) 0 0}
html.bred .u-pp-kart .pp-kart{max-width:900px;margin-inline:auto}
html.bred .u-pp-kart .pp-kart-cap{margin-inline:auto;text-align:center}
html.bred .b-papir .pp-kart-g{stroke:var(--papir)}
/* Optimizer: 10^330 mot 10^80, og hvert tall skrevet helt ut under. */
html.bred .u-sk{list-style:none;margin:clamp(48px,6vw,96px) 0 0;padding:0;display:grid;gap:clamp(36px,4vw,64px)}
html.bred .u-sk-r{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:18px clamp(24px,3vw,56px)}
html.bred .u-sk-n{font:400 clamp(72px,11vw,184px)/.82 var(--mono);letter-spacing:-.05em;color:var(--ink)}
html.bred .u-sk-r:not(.u-sk-stor) .u-sk-n{font-size:clamp(44px,5.4vw,92px)}
html.bred .u-sk-n sup{font-size:.4em;line-height:0;vertical-align:top;position:relative;top:.42em;margin-left:.06em;letter-spacing:-.03em}
html.bred .u-sk-t{font-size:18px;line-height:1.35;color:var(--ink);max-width:30ch;padding-bottom:.3em}
html.bred .u-sk-z{grid-column:1/-1;font:400 13px/1.55 var(--mono);letter-spacing:.12em;color:var(--ink-3);word-break:break-all}
html.bred .u-sk-under{display:grid;gap:14px;margin-top:clamp(36px,4vw,56px);max-width:62ch}
html.bred .u-sk-under p{margin:0;font-size:18px;line-height:1.5;color:var(--ink-2)}
@media (max-width:720px){
  html.bred .u-sk-r{grid-template-columns:1fr}
}

/* ---- forslag B: produktet i bruk (old/produktsider-ny/<slug>/, produktsider.py, 2 Okt 2026) -------------
   Martin om utgaven over: «ikke særlig oversiktlig, kreativt, logisk og visuelt riktig eller forståelig».
   Toppen i to spalter: hva det er til venstre, produktet selv til hoeyre (filmen, ellers kartet). */
html.bred .pb-topp{padding-top:clamp(128px,12vw,184px)}
html.bred .pb-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);align-items:center}
html.bred .pb-kat{margin:18px 0 0;font:500 13px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
html.bred .pb-topp .b-lede{margin-top:clamp(24px,2.4vw,36px)}
html.bred .pb-intro{margin:18px 0 0;max-width:52ch;font-size:17px;line-height:1.55;color:var(--ink-2)}
html.bred .pb-topp .boom-cta{margin-top:clamp(28px,3vw,44px)}
html.bred .pb-kart .pp-kart{max-width:100%}
/* Beviset: ett tall, ett regnestykke eller én setning */
html.bred .pb-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end}
html.bred .pb-res .pb-linje{margin-top:0}
/* Stegene i lesestoerrelse: tallet, navnet og linja under */
html.bred .pb-slik .u-sn{font-size:15px}
html.bred .pb-slik .u-steg h3{font-size:clamp(24px,2.4vw,36px);line-height:1.05;letter-spacing:-.025em}
html.bred .pb-slik .u-steg p{font-size:17px;max-width:34ch}
html.bred .pb-tall{margin:clamp(24px,3vw,40px) 0 0;font:400 clamp(96px,14vw,220px)/.85 var(--mono);letter-spacing:-.05em;color:var(--ink)}
html.bred .pb-tall small{font-size:.4em;margin-left:.08em;letter-spacing:-.02em}
html.bred .pb-hva{margin:18px 0 0;font-size:clamp(24px,2.4vw,36px);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
html.bred .pb-linje{margin:clamp(20px,2vw,28px) 0 0;max-width:58ch;font-size:18px;line-height:1.55;color:var(--ink-2)}
html.bred .pb-fot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:clamp(24px,2.4vw,36px) 0 0}
html.bred .pb-fot>span:not(.ev){font-size:15px;color:var(--ink-3)}
html.bred .pb-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin:clamp(40px,5vw,72px) 0 0;max-width:1100px}
html.bred .pb-vs div{border-top:1px solid var(--rule);padding-top:24px}
html.bred .pb-vs dt{font:400 clamp(64px,9vw,148px)/.9 var(--mono);letter-spacing:-.05em;color:var(--ink)}
html.bred .pb-vs div+div dt{font-size:clamp(40px,5vw,84px)}
html.bred .pb-vs sup{font-size:.4em;line-height:0;vertical-align:top;position:relative;top:.42em;margin-left:.04em}
html.bred .pb-vs dd{margin:16px 0 0;font-size:18px;line-height:1.4;color:var(--ink);max-width:28ch}
/* De andre produktene: navn og linje, hele raden er lenken */
html.bred .pb-a{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;border-top:1px solid var(--rule);max-width:1100px}
html.bred .pb-a a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;align-items:baseline;gap:6px 32px;padding:22px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
html.bred .pb-a-n{font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:-.02em}
html.bred .pb-a-l{font-size:17px;line-height:1.45;color:var(--ink-2)}
html.bred .pb-a i{font-style:normal;transition:transform .3s}
html.bred .pb-a a:hover i{transform:translateX(5px)}
@media (max-width:899px){
  html.bred .pb-grid{grid-template-columns:1fr}
  html.bred .pb-a a{grid-template-columns:minmax(0,1fr) auto}
  html.bred .pb-a-l{grid-column:1;grid-row:2}
  html.bred .pb-a i{grid-row:1/span 2;align-self:center}
}
@media (max-width:720px){html.bred :is(.pb-vs,.pb-res){grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html.bred .pb-a i{transition:none}}

/* ---- forslag D: kort og stille (old/produktsider-d/<slug>/, produktsider.py, 2 Okt 2026) ---------------------
   Martin: «lag den nå minimalistisk og visuelt elegant. det blir for langt og mye rot». Fire deler: toppen (uten
   ikon, Martin 2 Okt: «ekstremt malplassert»), stegene paa én linje som tegnes fram, tallene som lenker til casene, og produktene
   paa én rad. Strekene tegnes fram én gang; sirkler og rammer toner inn. */
html.bred .pd-ic{display:block;flex:none;overflow:visible;color:var(--ink)}
html.bred .pd-topp .pb-kat{margin:0 0 20px}
html.bred.rv-on .pd-ic-f [pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.5,0,.2,1) .15s}
html.bred.rv-on .pd-ic-f :not([pathLength]){transition:opacity .8s .9s}
html.bred.rv-on [data-rv]:not(.is-in) .pd-ic-f [pathLength]{stroke-dashoffset:1}
html.bred.rv-on [data-rv]:not(.is-in) .pd-ic-f :not([pathLength]){opacity:0}
/* Stegene: ikonene paa én linje som tegnes fra det foerste til det siste, teksten under hvert */
html.bred .pd-f{--s:56px;--g:clamp(28px,4vw,72px);list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g)}
html.bred .pd-f::before{content:"";position:absolute;top:calc(var(--s) / 2);left:calc(var(--s) / 2);right:calc((100% - (var(--n) - 1) * var(--g)) / var(--n) - var(--s) / 2);height:1px;background:var(--ink-3);transform-origin:left center}
html.bred .pd-ic-f{position:relative;width:var(--s);height:var(--s);padding:12px;box-sizing:border-box;border-radius:50%;background:var(--papir);box-shadow:0 0 0 1px var(--rule),0 0 0 10px var(--papir);stroke-width:1.4}
/* Paa Dyphav (stegene paa /ai/unity-ai/) har sirkelen baandets farge: --papir er sidens lyse flate, og det lyse ikonet
   forsvant i en lys sirkel (6 Okt 2026, Martin: «hva er disse svake sirklene inni de hvite ballene?») */
html.bred .b-dyp .pd-ic-f{background:var(--paper);box-shadow:0 0 0 1px var(--rule),0 0 0 10px var(--paper)}
html.bred .pd-f h3{margin:28px 0 0;font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
html.bred .pd-f p{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:34ch}
html.bred.rv-on .pd-f::before{transition:transform 1.6s cubic-bezier(.5,0,.2,1) .2s}
html.bred.rv-on .pd-f:not(.is-in)::before{transform:scaleX(0)}
html.bred.rv-on .pd-f li{transition:opacity .7s calc(.3s + var(--i) * .35s),transform .7s calc(.3s + var(--i) * .35s)}
html.bred.rv-on .pd-f:not(.is-in) li{opacity:0;transform:translateY(12px)}
html.bred.rv-on .pd-f .pd-ic [pathLength]{transition-delay:calc(.4s + var(--i) * .35s)}
html.bred .pd-linje{margin:clamp(40px,5vw,64px) 0 0;max-width:72ch;font-size:17px;line-height:1.55;color:var(--ink-2)}
/* lenken staar paa egen linje, og streken tegnes fram fra venstre ved hover, som .go-link (Martin 2 Okt 2026: «ikke
   strek uten hover, men når musepeker hover over så får den strek, som alle andre lignende») */
html.bred .pd-linje .u-pil{position:relative;display:flex;width:fit-content;margin-top:16px;padding-bottom:6px;white-space:nowrap}
html.bred .u-ft-go .u-pil{position:relative;padding-bottom:6px}
html.bred :is(.pd-linje,.u-ft-go) .u-pil::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)}
html.bred :is(.pd-linje,.u-ft-go) .u-pil:is(:hover,:focus-visible)::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){html.bred :is(.pd-linje,.u-ft-go) .u-pil::after{transition:none}}
/* Filmene paa produktsidene er karusellen fra /filmer, midtstilt, med «Alle filmene» midt under (3 Okt 2026,
   Martin: «karusell, midstill, og ha hover strek under alle filmene») */
html.bred .pd-film .u-ft-go{margin:clamp(28px,3vw,44px) var(--pad) 0;text-align:center}
html.bred .pd-bare .u-pil{margin-top:0}
/* Tallene: hvert tall er lenken til sin case */
html.bred .pd-t{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(32px,4vw,72px)}
html.bred .pd-t a{display:grid;align-content:start;gap:12px;color:var(--ink);text-decoration:none}
html.bred .pd-t-n{font:400 clamp(72px,8vw,128px)/.85 var(--mono);letter-spacing:-.05em}
html.bred .pd-t-n small{font-size:.4em;margin-left:.08em;letter-spacing:-.02em}
html.bred .pd-t-h{margin-top:12px;font-size:18px;line-height:1.4;max-width:28ch}
html.bred .pd-t-k{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
html.bred .pd-t a:hover .pd-t-h{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
html.bred .pd-t[style="--n:1"] .pd-t-n{font-size:clamp(96px,14vw,220px)}
/* Produktsidene ferdige, 3 Okt 2026 (Martin: «tomme og rare, uferdige - gjør de ferdig»): overskrift i hver seksjon,
   filmene, beslutningene fra /resultater og sitatet (produktsider.py). */
html.bred .pd-slik .b-h,html.bred .pd-brukes .b-h{max-width:20ch}
html.bred .pd-b1{max-width:1100px}
html.bred .pd-b1 .b-h{font-size:clamp(30px,4vw,68px)}
html.bred .pd-b-p{margin:clamp(24px,2.4vw,36px) 0 0;max-width:58ch;font-size:18px;line-height:1.55;color:var(--ink-2)}
html.bred .pd-b-ev{margin:clamp(20px,2vw,28px) 0 0}
html.bred .pd-b-tall{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,104px);max-width:none}
html.bred .pd-b-tall>:not(.pd-t-a){grid-column:1}
html.bred .pd-t-a{grid-column:2;grid-row:1/span 4;align-self:end;display:grid;gap:12px;color:var(--ink);text-decoration:none}
html.bred .pd-t-a .pd-t-n{font-size:clamp(88px,11vw,180px)}
html.bred .pd-t-a .u-pil{margin-top:8px}
/* Samme flis som tallene i Svar (3 Okt 2026, Martin: «gjør det samme på pellet monitor-siden»). Flisen gaar utenfor
   teksten (negativ marg), saa tallet staar der det sto; pila glir fram naar hele flisen er under pekeren. */
html.bred .pd-t-a{--fp:clamp(20px,2.2vw,32px);position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-ark);padding:var(--fp);margin:calc(-1 * var(--fp))}
html.bred .pd-t-a .pd-t-n{transform-origin:0 100%}
html.bred .pd-t-a:is(:hover,:focus-visible) .u-pil i{transform:translateX(5px)}
html.bred .pd-bn{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-top:1px solid var(--rule)}
html.bred .pd-bn li{padding:28px 28px 0 0}
html.bred .pd-bn li+li{padding-left:28px;border-left:1px solid var(--rule)}
html.bred .pd-bn .u-case-k{margin-bottom:16px}
html.bred .pd-bn h3{margin:0;font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
html.bred .pd-bn p:not(.u-case-k){margin:14px 0 20px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:40ch}
@media (max-width:899px){
  html.bred .pd-b-tall{grid-template-columns:1fr}
  html.bred .pd-t-a{grid-column:1;grid-row:auto;margin-top:calc(clamp(40px,8vw,64px) - var(--fp))}
  html.bred .pd-bn{grid-template-columns:1fr}
  html.bred .pd-bn li,html.bred .pd-bn li+li{padding:24px 0;border-left:0;border-bottom:1px solid var(--rule)}
}
/* Produktene som mosaikk, som /omtale (2 Okt 2026, Martin: «denne må seksjoneres litt mer ... ta en titt på omtale
   siden»): fem fliser med smale fuger der baandet skinner gjennom, bare de ytre hjoernene runde, og flisen fylles
   graatt fra der pekeren kommer inn (ai.js binder .pd-a a som knappene). Siste rad er alltid full. */
html.bred .pd-a{--pd-flis:var(--surface);--pd-fyll:var(--surface-2);list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;--pd-r:var(--r-ark);border-radius:var(--pd-r);overflow:hidden;isolation:isolate}
html.bred .b-dyp .pd-a{--pd-flis:var(--grid);--pd-fyll:var(--grid)}
html.bred .pd-a li{display:flex}
html.bred .pd-a :is(a,.pd-her){position:relative;z-index:0;overflow:hidden;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:start;column-gap:14px;row-gap:14px;padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,32px) clamp(30px,3vw,44px);background:var(--pd-flis);color:var(--ink);text-decoration:none}
html.bred .pd-a a::before{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,0);width:calc(var(--mr,600px) * 2);height:calc(var(--mr,600px) * 2);margin:calc(var(--mr,600px) * -1) 0 0 calc(var(--mr,600px) * -1);border-radius:50%;background:var(--pd-fyll);transform:scale(0);transition:transform .55s cubic-bezier(.3,.7,.2,1)}
html.bred .pd-a a:is(:hover,:focus-visible)::before{transform:scale(1)}
html.bred .pd-a-n{font-size:clamp(18px,1.4vw,21px);line-height:1.15;letter-spacing:-.01em}
html.bred .pd-a-l{grid-column:1/-1;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:30ch}
html.bred .pd-ic-a{width:32px;height:auto;stroke-width:1.4}
/* Ikonene gjoer det de gjoer paa produktkortene og i menyen (boom.css, «The six product icons»), naar flisen har
   pekeren (Martin 2 Okt 2026: «disse ikonene må ha tilhørende animasjon som de har fra før»). Overgangene for
   Optimizer og Pellet Monitor staar alt globalt i boom.css; Unity sine henger der paa .boom-i, saa de staar her. */
html.bred .pd-ic-a.i-unity .k1,html.bred .pd-ic-a.i-unity .k3{transition:translate .34s cubic-bezier(.22,.61,.36,1)}
html.bred .pd-a a:is(:hover,:focus-visible) .i-unity .k1{translate:0 -2.6px}
html.bred .pd-a a:is(:hover,:focus-visible) .i-unity .k3{translate:0 2.6px}
html.bred .pd-a a:is(:hover,:focus-visible) .i-ai .d1{animation:ai-think .9s ease-in-out infinite}
html.bred .pd-a a:is(:hover,:focus-visible) .i-ai .d2{animation:ai-think .9s ease-in-out .15s infinite}
html.bred .pd-a a:is(:hover,:focus-visible) .i-ai .d3{animation:ai-think .9s ease-in-out .3s infinite}
html.bred .pd-a a:is(:hover,:focus-visible) .i-opt :is(.a1,.a2){opacity:0}
html.bred .pd-a a:is(:hover,:focus-visible) .i-opt .n1{opacity:0;translate:0 6.5px}
html.bred .pd-a a:is(:hover,:focus-visible) .i-opt .n2{opacity:0;translate:0 -6.5px}
html.bred .pd-a a:is(:hover,:focus-visible) .i-opt .k3{fill:currentColor}
html.bred .pd-a a:is(:hover,:focus-visible) .i-log .w1{animation:log-write .42s ease .05s both}
html.bred .pd-a a:is(:hover,:focus-visible) .i-log .w2{animation:log-write .42s ease .3s both}
html.bred .pd-a a:is(:hover,:focus-visible) .i-log .w3{animation:log-write .42s ease .55s both}
html.bred .pd-a a:is(:hover,:focus-visible) .i-pellet .needle{rotate:74deg}
html.bred .pd-a a:is(:hover,:focus-visible) .i-pellet .tick{opacity:1;transition-delay:.35s}
html.bred .pd-a a:is(:hover,:focus-visible) .i-labs .b1{animation:labs-drop .46s cubic-bezier(.34,1.5,.5,1) .04s both}
html.bred .pd-a a:is(:hover,:focus-visible) .i-labs .b2{animation:labs-drop .46s cubic-bezier(.34,1.5,.5,1) .18s both}
html.bred .pd-a a:is(:hover,:focus-visible) .i-labs .b3{animation:labs-drop .46s cubic-bezier(.34,1.5,.5,1) .32s both}
@media (prefers-reduced-motion:reduce){html.bred .pd-ic-a *,html.bred .pd-a a:hover .pd-ic-a *{animation:none!important;transition:none!important;translate:none!important;rotate:none!important}}
@media (max-width:1099px){html.bred .pd-a{grid-template-columns:repeat(3,minmax(0,1fr))}html.bred .pd-a li:last-child{grid-column:span 2}}
@media (max-width:720px){html.bred .pd-a{grid-template-columns:1fr}html.bred .pd-a li:last-child{grid-column:auto}}
/* alle seks paa /produkter: tre og tre, saa to og to; raden er alltid full */
html.bred .pd-a-6{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Produktet siden handler om (3 Okt 2026): flisen er aapen mot baandet med en tynn kant i flisens farge, og noden
   med en ring som puster staar foran «Du er her». */
html.bred .pd-a .pd-her{background:transparent;box-shadow:inset 0 0 0 1px var(--pd-flis);cursor:default}
/* Mosaikken klipper flisene med sine runde hjoerner, saa kanten forsvant der flisen staar i et hjoerne (6 Okt 2026,
   Martin: «i hjørnet på du er her boksen, ser du at streken ikke synes»). Flisen faar samme runding i hjoernet sitt:
   tre og tre er 1, 3, 4 og 6, to og to er 1, 2, 5 og 6, og én og én er 1 og 6. */
html.bred .pd-a-6 li:nth-child(1) .pd-her{border-radius:var(--pd-r) 0 0 0}
html.bred .pd-a-6 li:nth-child(3) .pd-her{border-radius:0 var(--pd-r) 0 0}
html.bred .pd-a-6 li:nth-child(4) .pd-her{border-radius:0 0 0 var(--pd-r)}
html.bred .pd-a-6 li:nth-child(6) .pd-her{border-radius:0 0 var(--pd-r) 0}
@media (max-width:1099px){
  html.bred .pd-a-6 li:nth-child(n) .pd-her{border-radius:0}
  html.bred .pd-a-6 li:nth-child(1) .pd-her{border-radius:var(--pd-r) 0 0 0}
  html.bred .pd-a-6 li:nth-child(2) .pd-her{border-radius:0 var(--pd-r) 0 0}
  html.bred .pd-a-6 li:nth-child(5) .pd-her{border-radius:0 0 0 var(--pd-r)}
  html.bred .pd-a-6 li:nth-child(6) .pd-her{border-radius:0 0 var(--pd-r) 0}
}
@media (max-width:720px){
  html.bred .pd-a-6 li:nth-child(n) .pd-her{border-radius:0}
  html.bred .pd-a-6 li:nth-child(1) .pd-her{border-radius:var(--pd-r) var(--pd-r) 0 0}
  html.bred .pd-a-6 li:nth-child(6) .pd-her{border-radius:0 0 var(--pd-r) var(--pd-r)}
}
html.bred .pd-her-m{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
html.bred .pd-her-m i{position:relative;width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
html.bred .pd-her-m i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid currentColor;animation:pd-her 2.4s ease-out infinite}
@keyframes pd-her{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){html.bred .pd-her-m i::after{animation:none;opacity:.5}}
@media (max-width:1099px){html.bred .pd-a-6{grid-template-columns:repeat(2,minmax(0,1fr))}html.bred .pd-a-6 li:last-child{grid-column:auto}}
@media (max-width:720px){html.bred .pd-a-6{grid-template-columns:1fr}}
/* Treet paa /produkter og forsiden (15 Okt 2026, Martin: «c Treet er den jeg likte best»): Sensa Unity i full bredde
   oeverst, plattformen, og de fire som bygger paa den i én rad under, to og to under 1100 px og én og én under 720 px.
   «Eksempel: Pellet Monitor» staar som én lenke nederst i Labs-flisa (.pd-a-eks), til eksempelet paa Labs-siden; ute
   og tilbake 16 Okt 2026 (Martin: «legg tilbake eksempel under sensa lab»). Flisa faar plass til den i bunnen, og
   lenken ligger over flisa, ikke i den. */
html.bred .pd-a-tre{grid-template-columns:repeat(4,minmax(0,1fr))}
html.bred .pd-a-tre li:first-child{grid-column:1/-1}
html.bred .pd-a-tre li:last-child{grid-column:auto}
html.bred .pd-a li.pd-a-m{position:relative}
html.bred .pd-a li.pd-a-m > a:first-child{padding-bottom:calc(clamp(30px,3vw,44px) + 34px)}
html.bred .pd-a a.pd-a-eks{position:absolute;z-index:1;left:clamp(22px,2.2vw,32px);right:clamp(22px,2.2vw,32px);bottom:clamp(24px,2.4vw,36px);
  flex:none;display:block;overflow:visible;padding:2px 0;background:none;font-size:15px;line-height:1.5;color:var(--ink-2)}
html.bred .pd-a a.pd-a-eks::before{display:none}
html.bred .pd-a a.pd-a-eks span{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
html.bred .pd-a a.pd-a-eks:is(:hover,:focus-visible) span{text-decoration-color:currentColor}
@media (max-width:1099px){html.bred .pd-a-tre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){html.bred .pd-a-tre{grid-template-columns:1fr}}
/* Produktene paa /produkter staar i Dyphav, 3 Okt 2026 (Martin: «da kan produktene bli blå», etter at «Ikke en erstatning.»
   ble tatt ut). Overskriften staar fortsatt paa flaten. Hver flis er Dyphav som baandene paa forsiden, uten lyst lag over og
   uten toning (toningen ble flekkete flis for flis), og mellomrommene er ikke fylt, saa flaten synes mellom flisene (Martin: «ikke dyphav, bruk den vi har på forsiden, og
   ikke fyll strekene i mellom»). De moerke tokens kommer fra listen i seksjoner-ti.css. */
/* Lyse fliser i lys modus fra 7 Okt 2026, som baandene (designerens tilbakemelding, Martin: «1B»). */
html.bred .pd-oversikt .pd-a{--pd-flis:var(--surface);--pd-fyll:var(--surface-2);color:var(--ink-2)}
html.bred[data-theme="dark"] .pd-oversikt .pd-a{--pd-flis:var(--paper);--pd-fyll:var(--surface-2)}
html.bred.rv-on .pd-a{transition:opacity .8s .2s}
html.bred.rv-on .pd-a:not(.is-in){opacity:0}
@media (max-width:899px){
  html.bred .pd-t{grid-template-columns:1fr}
}
@media (max-width:899px){
  html.bred .pd-f{grid-template-columns:1fr;row-gap:36px}
  html.bred .pd-f::before{display:none}
  html.bred .pd-f li{position:relative;display:grid;grid-template-columns:var(--s) minmax(0,1fr);column-gap:24px;align-content:start}
  html.bred .pd-f li>*{grid-column:2}
  html.bred .pd-f .pd-ic-f{grid-column:1;grid-row:1/span 2}
  html.bred .pd-f h3{margin-top:14px}
  html.bred .pd-f li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--s) / 2);top:calc(var(--s) + 12px);bottom:-24px;width:1px;background:var(--ink-3)}
}
@media (prefers-reduced-motion:reduce){
  html.bred .pd-ic-f [pathLength],html.bred .pd-ic-f :not([pathLength]){animation:none!important;transition:none!important;stroke-dashoffset:0!important;opacity:1!important}
  html.bred .pd-f::before,html.bred .pd-f li,html.bred .pd-a{transition:none!important;transform:none!important;opacity:1!important}
  html.bred .pd-a a::before{display:none}
  html.bred .pd-a a:is(:hover,:focus-visible){background:var(--pd-fyll)}
}

/* VERKTOEYET PAA UNITY AI-SIDEN, nytt oppsett 3 Okt 2026 (Martin: «designet er ikke godt nok ... flere valg, men at de
   er kollapset», og valgte forslag C). Én spalte: brikkene, og rett under dem tallet med hvor mange systemer det gjelder,
   tre av spoersmaalene og samtalen. INGEN STREK mellom brikkene og tallet (Martin: «streken ... kan virke som et skille
   ... det må være helt tydelig at de to henger sammen»): bare luften i en vanlig avstand, og ordene «med disse N
   systemene» (ai.js) binder tallet til valget. */
html.bred .pd-verk .vk-sub{margin:clamp(14px,1.6vw,20px) 0 0;font-size:clamp(17px,1.4vw,19px);line-height:1.45;color:var(--ink-2);letter-spacing:-.01em}
html.bred .pd-verk .vk{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.6vw,32px);margin-top:clamp(28px,3.4vw,44px);align-items:start}
html.bred .pd-verk .kart-chip[hidden]{display:none}
html.bred .pd-verk .vk-rad{display:flex;flex-wrap:wrap;gap:10px}
html.bred .pd-verk .vk-mer{font:400 15px/1.2 var(--sans);letter-spacing:-.01em;padding:11px 4px;border:0;background:none;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-3)}
html.bred .pd-verk .vk-mer:hover{text-decoration-color:var(--ink)}
/* Velg alle og Fjern alle (6 Okt 2026, ai.js) staar rett etter «Velg systemene dere har.», som .kart-all paa /datakart/:
   understreket tekst og ikke piller, fordi en pille er et valg og disse er handlinger */
html.bred .pd-verk .vk-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
html.bred .pd-verk .vk-alle{display:inline-flex;gap:16px}
/* Eksempelanlegget staar paa egen linje over valget (6 Okt 2026, Martin: «det er ikke "ditt anlegg"»). */
html.bred .pd-verk .vk-eks{flex-basis:100%}
html.bred .pd-verk .vk-alle button{border:0;background:none;padding:0;font:400 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
html.bred .pd-verk .vk-alle button:hover:not(:disabled){color:var(--ink)}
html.bred .pd-verk .vk-alle button:disabled{opacity:.38;cursor:default;text-decoration:none}
html.bred .pd-verk .vk-n{display:flex;flex-direction:column;align-items:flex-start}
html.bred .pd-verk .vk-tall{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px}
html.bred .pd-verk .boom-kart-tall{font:400 clamp(48px,5vw,72px)/.9 var(--mono);letter-spacing:-.04em}
html.bred .pd-verk .boom-kart-ord{max-width:none}
html.bred .pd-verk .vk-liste{display:grid;gap:10px;list-style:none;margin:20px 0 0;padding:0;counter-reset:vk;max-width:72ch}
html.bred .pd-verk .vk-liste li{counter-increment:vk;display:grid;grid-template-columns:3ch minmax(0,1fr);gap:12px;font-size:17px;line-height:1.45;color:var(--ink)}
html.bred .pd-verk .vk-liste li::before{content:counter(vk,decimal-leading-zero);font:400 13px/1.9 var(--mono);color:var(--ink-3)}
html.bred .pd-verk .vk-liste li.vk-til{color:var(--ink-3);counter-increment:none}
html.bred .pd-verk .vk-liste li.vk-til::before{content:""}
/* «og N til» aapner resten rett under, i tre grupper med etiketten i railens skrift (6 Okt 2026, Martin valgte A). V-en
   snur seg som «Flere spørsmål» i chatten. */
html.bred .pd-verk .vk-til-b{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-3)}
html.bred .pd-verk .vk-til-b:hover{color:var(--ink);text-decoration-color:var(--ink)}
html.bred .pd-verk .vk-til-b svg{width:12px;height:12px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
html.bred .pd-verk .vk-til-b[aria-expanded=true] svg{transform:rotate(180deg)}
html.bred .pd-verk .vk-rest[hidden]{display:none}
html.bred .pd-verk .vk-gruppe{margin:32px 0 0;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
html.bred .pd-verk .vk-rest .vk-liste{margin-top:14px}
@media (prefers-reduced-motion:reduce){html.bred .pd-verk .vk-til-b svg{transition:none}}
/* Knappen sier hvor mange systemer den tar med, og bokmerket er en pille med ordet «Lagre», like hoey som knappen og
   med tynn strek som «Se produktene»; linja under er borte (3 Okt 2026, Martin: «make this more sexy», valgte C).
   «Kopier listen» er en lik pille ved siden av (6 Okt 2026). */
html.bred .pd-verk .vk-go{margin:clamp(24px,2.6vw,32px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi){margin:0;width:auto;height:clamp(56px,2.4vw + 26px,64px);padding:0 24px 0 20px;gap:10px;
  display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink);
  font:400 clamp(17px,.9vw + 6px,20px)/1 var(--sans);letter-spacing:-.005em}
/* Pillene fylles graatt fra der pekeren kommer inn, som «Se produktene» (6 Okt 2026, Martin: «denne knappen har ikke
   samme animasjon som de andre kanppen»): samme sirkel i bakgrunnen (--fyll-r i boom.css), og ai.js gir dem pekerens plass. */
html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi),
html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi):is(:hover,:focus-visible){
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--surface-2) var(--fyll-r),transparent calc(var(--fyll-r) + 1px)) padding-box}
html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi){--fyll-r:-2px;transition:--fyll-r .5s cubic-bezier(.3,.7,.2,1),color .18s ease}
html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi):is(:hover,:focus-visible){--fyll-r:var(--mr,160px)}
@media (prefers-reduced-motion:reduce){html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi){transition:none}}
html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi) svg{width:20px;height:20px}
html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi)[hidden]{display:none}
/* Paa telefon staar «Lagre» ved siden av knappen (3 Okt 2026, Martin: «Lagre bør stå ved siden av knappen på telefon
   også»): bokmerket blir en rund knapp uten ord (aria-label sier det), og knappen mister pila og litt luft, saa begge
   faar plass ned til 360 px. Smalere enn det legger bokmerket seg under. */
@media (max-width:560px){
  html.bred .pd-verk .vk-go{gap:8px}
  html.bred .pd-verk .vk-go .boom-btn{padding:0 22px;font-size:16px}
  html.bred .pd-verk .vk-go .boom-btn::after{display:none}
  html.bred .pd-verk .vk-go :is(.ai-lagre,.vk-kopi){width:clamp(56px,2.4vw + 26px,64px);padding:0;justify-content:center}
  html.bred .pd-verk .vk-go .vk-lagre-ord{display:none}
  /* «Kopier listen» faar ikke plass paa samme linje og legger seg under, med ordene, saa den ikke staar som et ensomt ikon */
  html.bred .pd-verk .vk-go .vk-kopi{width:auto;padding:0 24px 0 20px}
  html.bred .pd-verk .vk-go .vk-kopi .vk-lagre-ord{display:inline}
}

/* Produktsidene paa én skjerm (8 Okt 2026, Martin: «det er for mye scrolling og store og små bokstaver», saa «A på alle»):
   toppen til venstre, Problemet og Løsningen i et ark til hoeyre, ingen versaler, ingen skinner, ingen ikoner. Filmen er
   mindre, og avslutningen staar paa én rad. Bare tokens fra boom.css. */
html.bred :is(.pd-skjerm,.pd-verk,.pd-film) .u-pil{text-transform:none;letter-spacing:0;font-family:"Open Sans",system-ui,sans-serif;font-size:16px}
html.bred main :is(.pd-verk,.pd-film).b-band{padding-block:clamp(40px,5vw,72px)}
html.bred .pd-skjerm.u-topp{min-height:0;padding-block:clamp(40px,5vw,72px)}
html.bred .pd-skjerm .pd-grid{display:grid;gap:40px;align-items:center}
@media (min-width:1100px){html.bred .pd-skjerm .pd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,5vw,96px)}}
html.bred .pd-skjerm .pd-navn{margin:0 0 18px;font:400 16px/1.4 "Open Sans",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink-2)}
html.bred .pd-skjerm h1.b-h{font-size:clamp(40px,5vw,76px);line-height:1.02;max-width:12ch;text-transform:none;letter-spacing:-.01em}
html.bred .pd-skjerm .pd-ark{display:grid;gap:14px;background:var(--surface);box-shadow:var(--fluid-lift);border-radius:var(--r-ark);padding:clamp(24px,3vw,44px)}
html.bred .pd-skjerm .pd-ark p{margin:0}
html.bred .pd-skjerm .pd-lab{font:400 15px/1.5 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-3)}
html.bred .pd-skjerm .pd-ark .pd-lab:not(:first-child){margin-top:18px}
html.bred main .pd-skjerm .pd-ark h2.b-h{margin:0;max-width:none;font:400 clamp(24px,2.1vw,32px)/1.25 var(--sans);font-stretch:100%;
  letter-spacing:-.005em;text-transform:none;text-align:left;color:var(--ink)}
/* Ordet i <em> staar i problemet for parene paa /en og /es; i arket er det vanlig tekst, som i forslaget Martin valgte */
html.bred main .pd-skjerm .pd-ark h2.b-h em{font-style:normal;background:none;padding:0;color:inherit;box-shadow:none}
html.bred .pd-skjerm .pd-t{margin-top:10px!important;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:60ch}
html.bred .pd-skjerm .pd-steg{list-style:none;margin:0;padding:0;display:grid;gap:18px}
html.bred .pd-skjerm .pd-steg li{display:grid;grid-template-columns:2.2em 1fr;column-gap:4px;font-size:17px;line-height:1.55}
html.bred .pd-skjerm .pd-n{grid-row:1/3;font:400 17px/1.55 var(--mono);color:var(--ink-3)}
html.bred .pd-skjerm .pd-steg b{font-weight:400;color:var(--ink)}
html.bred .pd-skjerm .pd-steg span:not(.pd-n){color:var(--ink-2)}
html.bred .pd-skjerm .pd-note{margin-top:22px!important;font-size:16px;color:var(--ink-2)}
html.bred .pd-skjerm .pd-note .u-pil{margin-left:.6em}
/* Labs-siden (16 Okt 2026, sjette runde, Martin: «kjør c, men videoen må være større»): eksempelet foerst, med navnet,
   en stor overskrift og Mortens linje paa flaten, saa ett ark med filmen og appen side om side. Filmene er kapitler i
   arket (Martin: «videoen under virker litt detached fra eksempelet»), og filmen er like bred som arket, med appen og
   kapitlene under. Ingenting under arket: «Hva dere kan lage» er tatt av (Martin: «overflødig»). Foer: 6cc7302a.
   /ai/video-til-handling/ sender til #eksempel, saa seksjonen lander under toppoeya. */
html.bred main .pd-eks{scroll-margin-top:96px}
html.bred main .pd-eks.b-band{padding-block:clamp(24px,3vw,48px) clamp(56px,6vw,96px)}
html.bred.u-luft main>.pd-topp+.pd-eks{margin-top:0}
html.bred main .pd-eks .pd-ek-topp{display:grid;gap:clamp(18px,1.8vw,26px);margin-bottom:clamp(32px,3.6vw,56px)}
html.bred main .pd-eks .pd-ek-topp .pd-navn{margin:0}
html.bred main .pd-eks .pd-ek-topp h2.b-h{margin:0;max-width:24ch;font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1.1;
  text-transform:none;font-stretch:100%;letter-spacing:-.015em;text-align:left;text-wrap:balance}
html.bred main .pd-eks .pd-ek-topp .b-lede{margin:0;font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:var(--ink-2);max-width:44ch;text-align:left}
html.bred main .pd-eks .pd-ek-ark{display:grid;gap:clamp(20px,2.4vw,40px);background:var(--surface);box-shadow:var(--fluid-lift);
  border-radius:var(--r-ark);padding:clamp(10px,1vw,16px)}
/* Filmen staar i originalformatet (16 Okt 2026, Martin: «hva med å ha filmen i opprinnelig format slik at fullskjerm kan
   brukes?»): kapitlene er klippet fra den liggende kilden, som er 4:3 med svarte felt paa sidene i en 16:9-fil. Feltene er
   klippet bort (<slug>-liggende.mp4, 1440 x 1080), med samme lyd og tid som de staaende, saa tekstingen passer. Ingenting
   beskjaeres, heller ikke paa telefon eller i fullskjerm. Filmen er saa bred som arket tillater uten aa bli hoeyere enn
   skjermen. Fra 1100 px staar appen og kapitlene i en spalte til hoeyre for filmen (se under), ellers under den. Foer: midtbaandet av de staaende filmene i 16:9, 8cef75c9;
   hoeykant (9:16) i en smal spalte til venstre, e4303a8c. */
html.bred main .pd-eks .pd-ek-v{position:relative;aspect-ratio:4/3;width:min(100%,calc((100svh - 140px) * 4 / 3));justify-self:center;
  border-radius:calc(var(--r-ark) - 8px);overflow:hidden;background:var(--ink)}
html.bred main .pd-eks .pd-ek-v video{display:block;width:100%;height:100%;object-fit:contain}
/* Du blar som i karusellen (16 Okt 2026, Martin: «det burde være en bla funksjon på filmene, slik som i karusellen»).
   Pilene er smale soner ved kantene (17 Okt 2026, Martin: «when i press almost any place on the video, it changes to
   next, we cant have that. also the next buttons on the sides are to invisible now»): et trykk ytterst til venstre er
   forrige, ytterst til hoeyre neste, og et trykk midt paa filmen er pause og spill som foer. Pila er en liten skive i
   samme stil som pause, lyd og fullskjerm, litt gjennomsiktig til pekeren er over den, og staar helt ved kanten, saa den
   dekker lite av filmen. Paa den foerste filmen er venstre borte. Foer: hver sin halvdel med pila skjult (2000cf87), og
   runde knapper paa 60 px inne paa filmen (8bbd478f). */
html.bred main .pd-eks .pd-ek-v .u-kar-pil{display:flex;align-items:center;top:0;bottom:0;translate:none;z-index:1;
  width:clamp(56px,9%,96px);height:auto;padding:0 clamp(8px,1vw,14px);border:0;border-radius:0;background:none;
  color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.bred main .pd-eks .pd-ek-v .u-kar-pil-v{left:0;justify-content:flex-start}
html.bred main .pd-eks .pd-ek-v .u-kar-pil-h{right:0;justify-content:flex-end}
html.bred main .pd-eks .pd-ek-v .u-kar-pil svg{box-sizing:border-box;width:40px;height:40px;padding:9px;border-radius:50%;
  background:var(--surface);box-shadow:var(--fluid-lift);opacity:.82;transition:opacity .25s ease,background-color .25s ease,color .25s ease,translate .3s}
html.bred main .pd-eks .pd-ek-v .u-kar-pil:not(:disabled):hover{background:none;color:var(--paper)}
html.bred main .pd-eks .pd-ek-v .u-kar-pil:not(:disabled):is(:hover,:focus-visible) svg{opacity:1;background:var(--ink)}
html.bred main .pd-eks .pd-ek-v .u-kar-pil:focus-visible{outline:0}
html.bred main .pd-eks .pd-ek-v .u-kar-pil:focus-visible svg{outline:2px solid var(--on-media);outline-offset:2px;color:var(--paper)}
html.bred main .pd-eks .pd-ek-v .u-kar-pil:disabled{opacity:0;pointer-events:none}
@media (max-width:760px){html.bred main .pd-eks .pd-ek-v .u-kar-pil{width:52px;padding:0 8px}
  html.bred main .pd-eks .pd-ek-v .u-kar-pil svg{width:36px;height:36px;padding:8px}}
/* Fullskjerm viser hele filmen, aldri beskaaret (16 Okt 2026): object-fit fra rammen gjaldt ogsaa der. */
html.boom video:fullscreen{object-fit:contain}
html.boom video:-webkit-full-screen{object-fit:contain}
html.bred main .pd-eks .pd-ek-styr{position:absolute;z-index:2;top:14px;right:14px;display:flex;gap:8px}
html.bred main .pd-eks .pd-ek-styr .u-kar-lyd{background:var(--surface);border-color:transparent;box-shadow:var(--fluid-lift)}
html.bred main .pd-eks .pd-ek-styr .u-kar-lyd:hover{background:var(--ink);color:var(--paper)}
html.bred main .pd-eks .pd-ek-side{display:grid;gap:14px;padding:clamp(4px,1vw,16px) clamp(8px,2vw,32px) clamp(12px,1.6vw,24px)}
@media (max-width:1099px){html.bred main .pd-eks .pd-ek-side{padding:4px 8px 12px}}
@media (min-width:900px){html.bred main .pd-eks .pd-ek-side{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,4vw,72px);align-items:start;align-content:start}
  html.bred main .pd-eks .pd-ek-side .pd-ek-kaps{grid-column:2;grid-row:1/span 2;margin:0}}
/* Fra 1100 px staar appen og kapitlene i en spalte til hoeyre for filmen (17 Okt 2026, Martin: «A, kjør», etter «teksten
   og alt under videoen kommer ikke frem siden det er på bunn»): filmen er saa bred som skjermhoeyden tillater, og spalta
   faar resten, minst 340 px, saa filmen, appen og de tre filmene staar i samme skjerm. Foer: under filmen, 640b29f1. */
@media (min-width:1100px){html.bred main .pd-eks .pd-ek-ark{grid-template-columns:minmax(0,calc((100svh - 140px) * 4 / 3)) minmax(340px,1fr);align-items:start}
  html.bred main .pd-eks .pd-ek-v{width:100%;justify-self:stretch}
  html.bred main .pd-eks .pd-ek-side{grid-template-columns:none;align-content:start;padding:clamp(12px,1.6vw,28px) clamp(12px,1.6vw,28px) 12px 0}
  html.bred main .pd-eks .pd-ek-side .pd-ek-kaps{grid-column:auto;grid-row:auto;margin:14px 0 0}}
html.bred main .pd-eks .pd-ek-side h3.b-h{margin:0;max-width:none;font:400 clamp(24px,2.1vw,32px)/1.25 var(--sans);font-stretch:100%;
  letter-spacing:-.005em;text-transform:none;text-align:left;color:var(--ink)}
html.bred main .pd-eks .pd-ek-side .pd-t{margin:0!important;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:54ch}
html.bred main .pd-eks .pd-ek-kaps{margin:10px 0 0;padding:0;list-style:none;display:grid}
html.bred main .pd-eks .pd-ek-kap{display:grid;grid-template-columns:2.6em minmax(0,1fr);width:100%;min-height:44px;margin:0;
  padding:12px 0;border:0;border-top:1px solid var(--rule);background:none;color:inherit;font:inherit;text-align:left;
  position:relative;cursor:pointer}
html.bred main .pd-eks .pd-ek-kap::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:calc(var(--p,0) * 100%);background:var(--ink)}
/* Noden paa enden av streken (17 Okt 2026, Martin: «skulle disse hatt en node på seg slik av vi ser at den beveger
   seg?»): samme runde node som i toppmenyen, bare paa filmen som spiller, og den foelger --p fra filmens tid. */
html.bred main .pd-eks .pd-ek-kap.is-on::before{content:"";position:absolute;z-index:1;top:-4px;left:calc(var(--p,0) * 100% - 3.5px);
  width:7px;height:7px;border-radius:50%;background:var(--ink);pointer-events:none}
html.bred main .pd-eks .pd-ek-n{font:400 15px/1.6 var(--mono);color:var(--ink-3)}
html.bred main .pd-eks .pd-ek-kh{font-size:16px;line-height:1.5;color:var(--ink)}
html.bred main .pd-eks .pd-ek-kap:not(.is-on) .pd-ek-kh{color:var(--ink-2)}
html.bred main .pd-eks .pd-ek-kap:hover .pd-ek-kh{color:var(--ink)}
html.bred main .pd-eks .pd-ek-alle{margin:clamp(20px,2vw,28px) 0 0}
html.bred .u-kar.pd-film{--kw:min(calc((100svh - 360px) * 16 / 9),88vw,720px)}
/* Telefonen ligger ned (14 Okt 2026, funksjonstest M04): bredden over trekker fra mer enn skjermen er hoey, og filmen
   ble 0 px. Paa en lav, liggende skjerm fyller filmen hoeyden i stedet. */
@media (orientation:landscape) and (max-height:600px){
  html.bred .u-kar.u-topp{--kw:min(calc((100svh - 32px) * 16 / 9),88vw,1040px)}
  html.bred .u-kar.pd-film{--kw:min(calc((100svh - 32px) * 16 / 9),88vw,720px)}
}
html.bred main .pd-verk h2.b-h{text-transform:none;font-stretch:100%;letter-spacing:-.01em;font-size:clamp(28px,3vw,44px);max-width:none}
html.bred .pd-verk .vk-gruppe{text-transform:none;letter-spacing:0;font-size:14px}
/* Ingen avslutning (8 Okt 2026, Martin: «velg a»): arket eller filmen er slutten, og bunnen kommer etter luften mellom seksjonene. */
html.bred main:has(>.pd-skjerm){padding-bottom:clamp(48px,6vw,96px)}

/* ---- Forsiden etter Mortens versjon (13 Okt 2026, Martin: «ellers går du for mortens versjon på resterende - han eier
   nettsiden og innholdet»; ultimat.py, forside()). Flyttet fra forslaget i tools/lab/forslag_morten.py (54584e70). ---- */
/* Kundenes resultater: linja om hvordan verdien ble beregnet under hver rad, og investeringen for seg under en linje */
.u-rs-v{display:block;margin-top:8px;font-size:15px;color:var(--ink-2)}
.u-rs-skille{margin:clamp(36px,4vw,56px) 0 14px;font-size:17px;color:var(--ink-2)}
#resultater .u-rs-skille+.u-rs-l{margin-top:0}
#resultater{padding-bottom:clamp(64px,8vw,128px)}
#produktene{padding-bottom:clamp(64px,8vw,128px)}
/* Problemene Sensa løser: ett kort per bransje (C fra lerretet, 14 Okt 2026, Martin: «C er fin, lag den»). Kortet
   loefter seg av flaten, ikonet staar foran navnet, hvert punkt har en hårstrek over seg og ett uthevet ord. */
.u-pb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);margin-top:clamp(28px,3vw,44px);max-width:1280px}
.u-pb>div{padding:26px 28px 12px;border-radius:var(--r-ark);background:color-mix(in srgb,var(--surface) 80%,transparent);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--fluid-lift)}
.boom main .u-pb h3{margin:0;display:flex;align-items:center;gap:12px;font-size:clamp(21px,1.8vw,24px);font-weight:600;line-height:1.2;color:var(--ink)}
.u-pb h3 svg{width:28px;height:28px;flex-shrink:0}
.u-pb ul{list-style:none;margin:16px 0 0;padding:0}
.u-pb li{padding:14px 0;border-top:1px solid var(--rule);font-size:17px;line-height:1.45;color:var(--ink)}
.u-pb li b{font-weight:650}
/* Havbruk som tre eksempler (16 Okt 2026): aksen med ikon paa en liten linje, tittelen, og teksten under. */
.u-pb .u-pb-akse{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:15px;color:var(--ink-2)}
.u-pb .u-pb-akse svg{width:18px;height:18px;flex-shrink:0}
.u-pb .u-pb-eks b{display:block;margin-bottom:4px;font-weight:600}
/* Slik kommer dere i gang: fire nummererte steg under «Start med ett spørsmål.» De og linja under staar i ett ark som
   kortene i «Problemene Sensa løser», med avrundingen til produktboksene over (14 Okt 2026, Martin: «de 4 stegene er
   ikke særlig synlig med node-bakgrunn», «burde ikke avrundingen ha lik avrunding som boksene til produktene over?»).
   Arket er like bredt som produktboksene, uten eget tak (16 Okt 2026, Martin: «kjør a»): kantene staar paa samme linje. */
.u-gang-ark{margin:clamp(28px,3vw,44px) 0 0;padding:clamp(24px,2.6vw,36px);border-radius:var(--r-ark);
background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:var(--fluid-lift)}
/* Naar siden har trappet ned (sensaYtelse), er kortene og arket helt dekkende uten blur: blur over en flate som
   tegnes paa nytt, maa regnes paa nytt hvert bilde (15 Okt 2026, Morten paa storskjerm). */
html[data-ytelse] .u-pb>div,html[data-ytelse] .u-gang-ark{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
/* Fasene er en tidslinje (16 Okt 2026, Martin: «velg 04 H»): en node per fase paa en tynn strek, og hver spalte er
   like bred som ukene fasen tar (--uker fra ultimat.py, 2fr 4fr 6fr 3fr). Den siste noden er hul og streken stiplet,
   fordi skaleringen ikke har noen slutt. Under 900 px staar tidslinjen loddrett (den smaleste fasen ble for
   smal for «Tilkobling» ved 780 px), med streken til venstre. */
.u-gang{--gap:clamp(20px,2.4vw,40px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:var(--uker,repeat(4,minmax(0,1fr)));gap:0 var(--gap)}
.boom main .u-gang-ark .b-lede{margin:clamp(28px,3vw,40px) 0 0;max-width:none}
.u-gang li{position:relative;min-width:0;padding-top:34px;display:grid;row-gap:6px;align-content:start;font-size:17px;line-height:1.55}
.u-gang li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--ink);z-index:1}
.u-gang li::after{content:"";position:absolute;left:0;right:calc(-1 * var(--gap));top:10px;border-top:1px solid var(--ink-3)}
.u-gang li:last-child::before{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.u-gang li:last-child::after{right:0;border-top-style:dashed}
.u-gang .u-gang-u{font:400 15px/1.4 var(--mono);letter-spacing:.02em;color:var(--ink-2)}
.u-gang b{font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
@media(max-width:900px){.u-pb{grid-template-columns:1fr}.u-pb>div{padding:22px 22px 8px}}
@media(max-width:900px){.u-gang{grid-template-columns:1fr;gap:28px}.u-gang li{padding:0 0 0 34px}.u-gang li::before{top:6px}
.u-gang li::after{left:5px;right:auto;top:12px;bottom:-34px;border-top:0;border-left:1px solid var(--ink-3)}
.u-gang li:last-child::after{bottom:-8px;border-left-style:dashed}}
/* Linja i arket er 20 px paa telefon, ikke 17 som stegene (14 Okt 2026, Martin: «litt større på telefon»). */
@media(max-width:560px){.boom main .u-gang-ark .b-lede{font-size:20px;line-height:1.4}}
/* Knappene under arket staar over hverandre paa telefon og er like brede, saa bred som den lengste, med ordet midt i
   (14 Okt 2026, Martin: «gjør knappene under arket like brede på telefon»). Gjelder avslutningen paa alle sidene. */
@media(max-width:560px){html.bred #start .boom-cta{display:grid;grid-template-columns:max-content}
  html.bred #start .boom-cta .boom-btn{justify-content:center}}
/* Flere eksempler: den blaa knappen «Book et møte» til venstre og én linje etter den, under kortet paa /resultater
   (14 Okt 2026, Martin: «tekst og en knapp, ikke hyperlink i tekst», «gjør knappen blå og ha den før teksten på venstre siden»). */
html.bred .u-rs-mer{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:clamp(28px,3vw,40px)}
html.bred .u-rs-mer p{margin:0;max-width:52ch;font-size:17px;color:var(--ink-2);text-wrap:pretty}