/* ===========================================================================
   /demo, «HVORFOR BOOKE EN DEMO?» (tools/ai/hvorfor_demo.py). Lastes bare paa /demo og tvillingene.
   9 Okt 2026 (Martin: «4 Y»): én skjerm. Overskriften og ledet til venstre, og til hoeyre et ark med det kundene har
   oppnaadd (den korte setningen med anlegget under, tallet stort til hoeyre med hva det er under), forklaringen og
   skjemaet under tallene, saa siden leses og saa handles (Martin: «burde book en demo stå under målene?»).
   Stablet paa telefon. Tokens fra stilarkene, aldri fargeverdier i komponentene.
   =========================================================================== */
/* Knappen «Hvorfor booke en demo?» staar ikke paa siden den gaar til, verken i toppen eller i telefonmenyen
   (9 Okt 2026, Martin: «inne på hvorfor booke en demo trenger ikke "hvorfor booke en demo knapp" å være»). Den
   staar i HTML-en fordi toppen maa vaere ordrett lik paa alle sider (oversett.py); dette stilarket lastes bare her. */
html.boom .ai-hdr a.ai-try.ai-try-hdr,html.boom .ai-menu-bunn a.ai-try.ai-menu-cta{display:none}

/* Markeringen i radene (10 Okt 2026, Martin: «4, kjør», etter tools/valg/markering.html): lys blaa bak vanlig tekst,
   saa ordet staar ut uten aa ligne en knapp. contrast.py maaler --ink paa --dm-merk i begge moduser. */
html.boom{--dm-merk:#cce8ff}
html.boom[data-theme="dark"]{--dm-merk:#0a345d}

/* heroen: én skjerm fra 1100 px, to spalter */
html.bred .u-topp.dm-hode{min-height:0;padding-block:clamp(32px,4vw,56px)}
@media (min-width:1100px){html.bred .u-topp.dm-hode{min-height:calc(100svh - 40px);display:grid;align-content:center}
  /* arket med skjemaet kan vaere hoeyere enn skjermen; da blir overskriften staaende mens du ruller forbi tallene */
  html.bred .dm-grid{align-items:start}
  html.bred .dm-v{position:sticky;top:calc(50svh - 160px)}}
html.bred .dm-hode>.b-in{width:100%;justify-self:stretch}
html.bred .dm-grid{display:grid;gap:clamp(32px,4vw,48px)}
@media (min-width:1100px){html.bred .dm-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5vw,96px)}}
/* «Dere har dataene. Vi henter ut verdien.» (16 Okt 2026, Martin: «gå for A»): tre linjer, den foerste setningen paa
   én linje (rundt 7,3 em), saa skriften maales mot spalta (13cqi), ikke skjermen: spalta slutter aa vokse rundt 490 px,
   og med vw ble det fem linjer paa 1920 px. 1.06 gir boksen luft over og under. Begynner boksen en linje, trekkes den
   inn med marg, ikke left, saa det ikke staar et hull mellom boksen og ordet etter. */
html.bred .dm-v{container-type:inline-size}
html.bred .u-topp.dm-hode h1.b-h{font-size:clamp(36px,13cqi,76px);line-height:1.06;max-width:none;text-wrap:balance}
html.boom.boks main .u-topp.dm-hode .dm-v h1.b-h em.kant{left:0;margin-left:-.16em}
@media (max-width:1099px){html.bred .u-topp.dm-hode h1.b-h{max-width:none}}
html.bred .u-topp.dm-hode .b-lede{margin-top:clamp(20px,2.4vw,32px);max-width:26ch;font-size:clamp(19px,1.7vw,26px);line-height:1.3;color:var(--ink)}

/* Ett klikk: skjemaet nederst i arket, «Send» sender (9 Okt 2026). .contact-grid har to spalter paa /contact. */
html.bred .dm-skjema{margin:0;display:block}
html.bred .dm-skjema form.contact .actions{margin-top:16px}
html.bred .dm-skjema form.contact input{min-height:48px}
/* Send i samme stoerrelse som de store knappene i heroen (boom.css, u-stor), 9 Okt 2026, Martin: «større font på Send» */
html.bred .dm-skjema form.contact .kt-send{width:100%;justify-content:center;height:56px;font-size:clamp(20px,1.6vw,22px);letter-spacing:-.02em}
html.bred .dm-med{display:flex;align-items:center;gap:14px;margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
html.bred .dm-med img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}

/* arket med det kundene har oppnaadd */
html.bred .dm-ark{background:var(--surface);border-radius:var(--r-ark);box-shadow:var(--fluid-lift);padding:clamp(24px,2.8vw,44px)}
html.bred .dm-ark h2.dm-ark-h{margin:0 0 clamp(18px,2vw,26px);font:400 15px/1.4 var(--sans);letter-spacing:0;text-transform:none;max-width:none;color:var(--ink-2)}
html.bred .dm-ark h2.dm-book{margin:clamp(22px,2.2vw,28px) 0 10px;font-size:clamp(18px,1.4vw,21px);line-height:1.3;color:var(--ink)}
html.bred .dm-liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,1.6vw,20px)}
html.bred .dm-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline}
html.bred .dm-hi{font:400 clamp(18px,1.4vw,21px)/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
/* Det viktigste i hver setning er markert, saa radene kan leses fort (9 Okt 2026, Martin: «markering av ord i hvert
   punkt»), i lys blaa med sidens vanlige tekst (10 Okt 2026, Martin: «4, kjør»; laks og saa Sensas blaa med svart tekst
   foerst, hvit paa blaa holder bare 3,4:1). Tegnet ferdig, uten animasjon. */
html.bred .dm-hi mark{padding:.03em .16em .015em;border-radius:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:var(--dm-merk);color:var(--ink)}
html.bred .dm-t{grid-row:1/span 2;text-align:right}
html.bred .dm-tn{font:400 clamp(26px,2.2vw,36px)/1 var(--mono);letter-spacing:-.03em;white-space:nowrap;color:var(--ink)}
html.bred .dm-tn b{font-weight:400}
html.bred .dm-tn-h{display:block;margin-top:6px;font-size:15px;line-height:1.35;color:var(--ink-2)}
html.bred .dm-m{grid-column:1;grid-row:2;font-size:15px;color:var(--ink-2)}
/* Paa spansk er tallet «1,2 millones de NOK» (17 Okt 2026, Morten), for bredt til spalten til hoeyre: der staar tallet
   under setningen paa alle bredder, som paa telefon, og krymper saa det faar plass paa smale skjermer. */
html.bred:lang(es) .dm-r{grid-template-columns:minmax(0,1fr)}
html.bred:lang(es) .dm-t,html.bred:lang(es) .dm-m{grid-row:auto}
html.bred:lang(es) .dm-t{text-align:left}
html.bred:lang(es) .dm-tn-h{display:inline;margin:0 0 0 .4em}
@media (max-width:560px){
  html.bred:lang(es) .dm-tn{font-size:min(26px,6vw)}
  html.bred .dm-r{grid-template-columns:minmax(0,1fr)}
  html.bred .dm-t,html.bred .dm-m{grid-row:auto}
  html.bred .dm-t{text-align:left}
  html.bred .dm-tn-h{display:inline;margin:0 0 0 .4em}
}