/* =========================================================
   FORSIDEN, Easy Eiendom (2026-09-28). Bare forsiden lenker denne fila,
   og alt er avgrenset til body.tg-home. Kortene følger DESIGN.md: tolv
   kolonner, komplette strekrader på kol 1, 5, 9 og 12 ved kortets rader
   (topp, blokkstart, bunn), all tekst på kol 1, 5 eller 9, luft som
   skille, farger og mål bare fra tokens.css og skalaen. Prototypens
   verdier er oversatt til systemets: 44/52 for titler, 22 for korttitler,
   18/16 for lesing, 14 for små, mono 11 for etiketter.

   Kortene (2026-10-07): hero, verdien under filmen (#system0), produktstigen
   (#solutions0), Se hva som er mulig (#mulig0), Innsikt (#innsikt0) og kontakt.
   Dialogene (.tg-dialog) er AI og agenter, artikkelen, kalenderen og skjemaet.
   ========================================================= */

/* Rader: som .kol-1 til .kol-4 i grunn.css, men r4 vises høyrestilt også under 900 (som heroens .c4). */
.tg-home .rad{display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px}
.tg-home .r1{grid-column:1/span 2;min-width:0;position:relative}
.tg-home .r2,.tg-home .r3{display:none}
.tg-home .r4{grid-column:3/span 2;display:flex;flex-direction:column;align-items:flex-end}
@media(min-width:900px){
  .tg-home .rad{grid-template-columns:repeat(12,1fr);column-gap:16px}
  .tg-home .r1{grid-column:1/span 4}.tg-home .r2{display:block;grid-column:5/span 4}.tg-home .r3{display:block;grid-column:9/span 2}.tg-home .r4{grid-column:11/span 2}
}
.tg-home .bunnrad{margin-top:60px;align-items:end}
@media(min-width:900px){.tg-home .bunnrad{margin-top:80px}}
/* En strekrad inni én celle: to streker, den andre høyrestilt (.hoyre, kol 9 og 12) eller på kol 3 under 900 (.mobil). */
.tg-home .strekrad{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
@media(min-width:900px){.tg-home .strekrad{column-gap:16px}.tg-home .strekrad.mobil .strek+.strek{display:none}}
.tg-home .strekrad.hoyre .strek+.strek{justify-self:end}
@media(max-width:899px){.tg-home .strekrad.hoyre{display:none}}
.tg-home .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Korttittel i trinnet 22 (kortets tittel under 900 i grunnen). */
.tg-home .tg-tittel-m{font-family:var(--sans);font-weight:400;font-size:22px;line-height:108%;letter-spacing:-.05rem}
.tg-home .tg-tittel-s{font-family:var(--sans);font-weight:400;font-size:18px;line-height:112%;letter-spacing:-.04rem}
.tg-home svg text{font-family:var(--sans);line-height:100%}
.tg-home .f-moerk{fill:var(--knapp-moerk)}.tg-home .f-lys{fill:var(--lys)}.tg-home .f-kort{fill:var(--kort)}.tg-home .f-blekk{fill:var(--blekk)}.tg-home .f-tone{fill:var(--tone-tekst)}
.tg-home .s-lys{stroke:var(--lys)}.tg-home .s-dempet{stroke:var(--dempet)}.tg-home .s-tone{stroke:var(--tone-tekst)}
.tg-home .pil path{fill:currentColor}

/* HERO. Film fyller, slør, én tittel nede til venstre uten avspillingsknapp. */
.tg-home .hero.er-hero{padding-top:14px}
.tg-home .hero .ramme{position:relative;background:var(--blekk);height:max(560px,72vh);overflow:hidden}
@media(min-width:900px){.tg-home .hero.er-hero{padding-top:22px}.tg-home .hero .ramme{height:max(560px,calc(100svh - 132px))}}
.tg-home .hero .medie{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tg-home .hero .medie.hero-image{opacity:0}
.tg-home .hero .ramme.film-feilet .medie{opacity:1}
.tg-home .hero .overlegg{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;color:var(--hvit)}
.tg-home .hero .overlegg .strek{background:var(--lys)}
.tg-home .hero .senter{flex:1;align-items:end;align-content:end;row-gap:22px;padding-top:40px;padding-bottom:40px}
.tg-home .herocopy{grid-column:1/span 4}
@media(min-width:900px){.tg-home .herocopy{grid-column:1/span 8}}
.tg-home .hero h1{font-family:var(--sans);font-weight:400;font-size:28px;line-height:100%;letter-spacing:-.08rem;color:var(--hvit)}
@media(min-width:600px){.tg-home .hero h1{font-size:44px;letter-spacing:-.12rem}}
@media(min-width:1200px){.tg-home .hero h1{font-size:52px;letter-spacing:-.16rem}}
/* P1-01 (2026-10-15): underlinje og to like valg i heroen. Rammen vokser med innholdet (min-height), så H1, underlinje
   og begge valg alltid synes; filmen fyller bak. Valgene står på kol 1 og 5 (span 4) fra 900, stablet under. */
.tg-home .hero .ramme{height:auto;min-height:max(560px,72vh);display:flex;flex-direction:column}
@media(min-width:900px){.tg-home .hero .ramme{height:auto;min-height:max(560px,calc(100svh - 132px))}}
.tg-home .hero .overlegg{position:relative;inset:auto;flex:1}
.tg-home .hero .senter{padding-top:28px;padding-bottom:28px;row-gap:16px}
@media(min-width:900px){.tg-home .hero .senter{padding-top:40px;padding-bottom:40px;row-gap:22px}}
.tg-home .hero-under{margin-top:16px;max-width:46ch;font-family:var(--sans);font-size:18px;line-height:132%;letter-spacing:-.04rem;color:var(--lys);text-wrap:pretty}
@media(min-width:900px){.tg-home .hero-under{margin-top:22px;font-size:22px;letter-spacing:-.05rem}}
.tg-home .hero-valg{grid-column:1/-1;align-self:stretch;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--medieradius);background:rgba(27,31,30,.4);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:var(--hvit)}
/* Fra 900 står teksten i valgene på kol 1 og 5: flaten går 22 px ut i venstre takrenne og slutter 22 px før neste kolonne. */
@media(min-width:900px){.tg-home .hero-valg{padding:22px;gap:16px;margin:0 22px 0 -22px}.tg-home .hero-valg.a{grid-column:1/span 4}.tg-home .hero-valg.b{grid-column:5/span 4}}
.tg-home .hero-valg .eyebrow .dempet{color:var(--lys-dempet);margin-left:8px}
.tg-home .hero-valg .tekst{flex:1;font-family:var(--sans);font-size:16px;line-height:132%;letter-spacing:-.03rem;color:var(--lys)}
@media(min-width:900px){.tg-home .hero-valg .tekst{font-size:18px;letter-spacing:-.04rem}}
.tg-home .hero-valg .handling{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tg-home .hero-valg .knapp.lys{background:var(--lys);color:var(--blekk)}
.tg-home .hero-valg .knapp.lys::before{border:1px solid var(--lys)}
.tg-home .hero-valg .sekundaer{font-family:var(--sans);font-size:16px;line-height:118%;letter-spacing:-.03rem;color:var(--hvit);text-decoration:underline;text-underline-offset:var(--understrek-avstand);text-decoration-thickness:1px;text-decoration-color:var(--lys-dempet)}
.tg-home .hero-valg .sekundaer:hover{text-decoration-color:var(--hvit)}



.tg-home #solutions0,.tg-home #easycortex,.tg-home #ai-og-agenter,.tg-home #system0,.tg-home #mulig0,.tg-home #innsikt0{scroll-margin-top:120px}
@media(max-width:899px){.tg-home #solutions0,.tg-home #easycortex,.tg-home #ai-og-agenter,.tg-home #system0,.tg-home #mulig0,.tg-home #innsikt0{scroll-margin-top:88px}}
.tg-home #solutions0:focus-visible{outline:1px solid var(--blekk);outline-offset:-4px}

/* VERDIEN UNDER FILMEN (#system0.verdi-b, eierens skisse B 2026-10-07). Tre soner med hvert sitt midtstilte
   utsagn over en levende graf: 44 domener som trekkes sammen til én graf fra sone til sone mens man ruller
   (forside.js punkt 2). Den tredje sonen har tre faner. Teksten står midtstilt etter eierens ønske (.fritt,
   DESIGN.md §4); strekradene er komplette øverst og nederst. Titler 52 fra 1200 (som heroen), 44 fra 600, 32 under. */
/* Hver sone fyller skjermen under toppfeltet (64 under 900, 84 fra 900), så neste utsagn ikke synes før man ruller
   (eieren 2026-10-07). Innholdet står midt i sonen; utsagnet toner inn og løfter seg når sonen nærmer seg midten (forside.js). */
.tg-home .vb-sone{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);padding:80px 0}
@media(min-width:900px){.tg-home .vb-sone{min-height:calc(100vh - 84px);min-height:calc(100svh - 84px);padding:120px 0}}
.tg-home .vb-sone:last-of-type{padding-bottom:40px}
.tg-home .vb-sone.bevegelse .vb-utsagn{will-change:opacity,transform}
/* Én graf bak alle tre sonene (2026-10-09, eieren: «connecte bakgrunnsanimasjonen mellom seksjonene»): lerretet står
   fast under toppfeltet mens sonene ruller forbi, så grafen henger sammen fra første utsagn til fanene. Kortet klipper
   med clip i stedet for hidden, så det ikke blir en egen rullebeholder og lerretet kan stå fast mot skjermen. */
.tg-home .verdi-b>.kort{overflow:clip}
/* Uten gradnettet (2026-10-13, eieren: «blir for utydelig og gjør animasjonen bråkete»): grafen står alene på kortflaten. */
.tg-home .verdi-b>.kort{background-image:none}
.tg-home .vb-reise{position:relative}
.tg-home .vb-scene{position:absolute;inset:0;pointer-events:none}
.tg-home .vb-graf{position:sticky;top:64px;width:100%;height:calc(100vh - 64px);height:calc(100svh - 64px);display:block;pointer-events:none}
@media(min-width:900px){.tg-home .vb-graf{top:84px;height:calc(100vh - 84px);height:calc(100svh - 84px)}}
/* P1-16 (2026-10-15): den ene nettverksanimasjonen som er igjen på forsiden er dempet, også på store skjermer. */
.tg-home .vb-graf{opacity:.6}
@media(max-width:599px){.tg-home .vb-graf{opacity:.5}}
.tg-home .vb-utsagn{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding:0 var(--indre-mobil)}
.tg-home .vb-utsagn h2{max-width:20ch;font-family:var(--sans);font-weight:400;font-size:32px;line-height:102%;letter-spacing:-.1rem;text-wrap:balance}
@media(min-width:600px){.tg-home .vb-utsagn h2{font-size:44px;letter-spacing:-.12rem}}
@media(min-width:1200px){.tg-home .vb-utsagn h2{font-size:52px;letter-spacing:-.16rem}}
.tg-home .vb-utsagn p{max-width:44ch;font-family:var(--sans);font-size:18px;line-height:132%;letter-spacing:-.04rem;color:var(--tone-tekst);text-wrap:pretty}
@media(min-width:900px){.tg-home .vb-utsagn p{font-size:22px;letter-spacing:-.05rem}}
/* P3-05 (2026-10-15): kortfargen som flate bak innledningen, så grafens linjer ikke går gjennom brødteksten (WCAG 1.4.3). */
.tg-home .vb-sone>.vb-utsagn{align-self:center;max-width:min(760px,calc(100% - 2 * var(--indre-mobil)));padding:28px 22px;border-radius:var(--medieradius);background:var(--kort)}
@media(min-width:900px){.tg-home .vb-sone>.vb-utsagn{padding:40px}}
/* P1-03 (2026-10-15): A- og B-blokken i sone to og tre. Teksten står på kol 1 (span 4) med kortfargen som flate bak, så grafen
   ikke går gjennom brødteksten (P3-05); bildet fyller kol 5 til 12. Kundecaset står under teksten på kol 1. Stablet under 900. */
.tg-home .vb-blokk{position:relative;row-gap:22px;align-items:start;width:100%}
.tg-home .vb-tekst{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:22px;margin:0 -22px;border-radius:var(--medieradius);background:var(--kort)}
.tg-home .vb-tekst h2{font-family:var(--sans);font-weight:400;font-size:32px;line-height:102%;letter-spacing:-.1rem;text-wrap:balance}
@media(min-width:600px){.tg-home .vb-tekst h2{font-size:44px;letter-spacing:-.12rem}}
.tg-home .vb-tekst .eyebrow .dempet{color:var(--tone-tekst);margin-left:8px}
.tg-home .vb-brod{font-family:var(--sans);font-size:18px;line-height:132%;letter-spacing:-.04rem;text-wrap:pretty}
.tg-home .vb-bevis{font-family:var(--sans);font-size:16px;line-height:132%;letter-spacing:-.03rem;color:var(--tone-tekst)}
.tg-home .vb-figur{grid-column:1/-1;margin:0}
.tg-home .vb-figur img{display:block;width:100%;height:auto;border-radius:var(--medieradius)}
.tg-home .vb-figur.moerk img{background:var(--blekk)}
/* P1-10 (2026-10-15): blokken under heroen. Samme oppsett som A- og B-blokken, uten scrollgrafen bak. */
.tg-home .gl-blokk .vb-tekst{background:none}
.tg-home .gl-bevis{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tg-home .gl-bevis li{font-family:var(--sans);font-size:16px;line-height:132%;letter-spacing:-.03rem;color:var(--tone-tekst)}
.tg-home .gl-figur .gl-graf{display:block;width:100%;height:auto;border-radius:var(--medieradius)}
.tg-home .gl-figur figcaption{margin-top:12px}
.tg-home .gl-figur figcaption a{text-decoration:underline;text-underline-offset:var(--understrek-avstand);text-decoration-thickness:1px;text-decoration-color:var(--tone-lenke)}
/* P1-12 og P1-16 (2026-10-15): ARK-linjen, og under kartet anbudspoenget med de to løpene fra /grunnerverv (stille, uten
   animasjon) og setningen om eldre dokumenter. Løpene er skilt av luft, ingen streker per rad. */
.tg-home .vb-ark{font-family:var(--sans);font-size:18px;line-height:132%;letter-spacing:-.04rem;color:var(--tone-tekst)}
.tg-home .vb-ark abbr{text-decoration:none;color:var(--blekk)}
.tg-home .vb-ark b{font-weight:500;color:var(--blekk)}
.tg-home .vb-loep{grid-column:1/-1;display:grid;gap:22px;padding:22px;margin:0 -22px;border-radius:var(--medieradius);background:var(--kort)}
.tg-home .vb-loep-tittel{font-family:var(--sans);font-size:22px;line-height:118%;letter-spacing:-.05rem;text-wrap:balance}
.tg-home .vb-spor-rad{display:grid;gap:8px}
.tg-home .vb-spor{display:block;position:relative;height:12px;border-radius:var(--medieradius);background:var(--knapp-graa);overflow:hidden}
.tg-home .vb-spor i{position:absolute;inset:0;transform-origin:left center}
.tg-home .vb-spor.manuelt i{background:var(--dempet);transform:scaleX(.08)}
.tg-home .vb-spor.auto i{background:var(--blekk)}
.tg-home .vb-aerlig{font-family:var(--sans);font-size:16px;line-height:132%;letter-spacing:-.03rem;color:var(--tone-tekst)}
.tg-home .vb-case{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--medieradius);background:var(--knapp-graa);color:var(--blekk);transition:background-color var(--t-hover)}
.tg-home .vb-case:hover{background:var(--lys)}
.tg-home .vb-case .eyebrow .dempet{color:var(--tone-tekst);margin-left:8px}
.tg-home .vb-case-tekst{font-family:var(--sans);font-size:22px;line-height:118%;letter-spacing:-.05rem}
.tg-home .vb-case .les{display:inline-flex;align-items:center;gap:8px}
.tg-home .vb-case .les .pil{width:7px;height:6px}.tg-home .vb-case .les .pil path{fill:currentColor}
@media(min-width:900px){
  .tg-home .vb-tekst{grid-column:1/span 4;grid-row:1}
  .tg-home .vb-figur{grid-column:5/span 8;grid-row:1}
  .tg-home .vb-case{grid-column:1/span 4;grid-row:2;margin:0 22px 0 -22px}
  .tg-home .vb-loep{grid-column:5/span 8;grid-row:2;margin:0 -22px}
  .tg-home .vb-brod{font-size:22px;letter-spacing:-.05rem}
}
.tg-home .vb-faner{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:60px var(--indre-mobil) 28px}
.tg-home .vb-fane{min-height:44px;padding:0 16px;border:0;border-radius:6px;background:var(--knapp-graa);color:var(--blekk);cursor:pointer;transition:background var(--t-hover)}
.tg-home .vb-fane[aria-selected="true"]{background:var(--knapp-moerk);color:var(--hvit)}
.tg-home .vb-fane:focus-visible{outline:1px solid var(--blekk);outline-offset:3px}
@media(hover:hover){.tg-home .vb-fane[aria-selected="false"]:hover{background:var(--lys)}}
.tg-home .vb-paneler{position:relative;padding:0 var(--indre-mobil)}
@media(min-width:900px){.tg-home .vb-paneler{padding:0 var(--indre)}}
.tg-home .vb-panel{display:grid;justify-items:start;gap:16px;max-width:880px;margin:0 auto;padding:28px 22px;border-radius:var(--kortradius)}
@media(min-width:900px){.tg-home .vb-panel{padding:60px}}
.tg-home .vb-panel[hidden]{display:none}
.tg-home .vb-panel.data{background:var(--foundation-data-bg)}
.tg-home .vb-panel.tek{background:var(--foundation-tech-bg)}
.tg-home .vb-panel.fag{background:var(--foundation-expertise-bg)}
.tg-home .vb-panel h3{font-family:var(--sans);font-weight:400;font-size:28px;line-height:102%;letter-spacing:-.08rem}
@media(min-width:900px){.tg-home .vb-panel h3{font-size:44px;letter-spacing:-.12rem}}
.tg-home .vb-linje{max-width:60ch;font-size:16px;line-height:132%;letter-spacing:-.03rem}
@media(min-width:900px){.tg-home .vb-linje{font-size:18px;letter-spacing:-.04rem}}
.tg-home .vb-punkt{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tg-home .vb-punkt li{position:relative;padding-left:22px;font-size:16px;line-height:132%;letter-spacing:-.03rem}
@media(min-width:900px){.tg-home .vb-punkt li{font-size:18px;letter-spacing:-.04rem}}
.tg-home .vb-punkt li::before{content:"";position:absolute;left:2px;top:.5em;border-left:6px solid transparent;border-bottom:6px solid var(--blekk)}
.tg-home .vb-brikker{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.tg-home .vb-brikker li{padding:8px 12px;border-radius:4px;background:var(--dempet-lys);font-size:14px;line-height:112%;letter-spacing:-.026rem}
.tg-home .vb-brikker a{color:var(--blekk);text-decoration:underline;text-underline-offset:var(--understrek-avstand);text-decoration-thickness:1px}
.tg-home .vb-panel .knapp-wrap{margin-top:12px}

/* SE HVA SOM ER MULIG (#mulig0) og INNSIKT (#innsikt0), 2026-10-07. Midtstilt hode (.fritt), så flater på kol 1, 5 og 9.
   Flatene er lenker; teksten inni står med flatens egen luft (unntaket for flater i DESIGN.md §4). Under 900 stables de. */
.tg-home .mulig-hode{display:flex;flex-direction:column;align-items:center;gap:12px;margin:16px 0 32px;text-align:center}
@media(min-width:900px){.tg-home .mulig-hode{margin:20px 0 48px}} /* 2026-10-09: mindre luft rundt overskriften (eieren) */
.tg-home .mulig-hode h2{font-family:var(--sans);font-weight:400;font-size:32px;line-height:102%;letter-spacing:-.1rem}
@media(min-width:900px){.tg-home .mulig-hode h2{font-size:44px;letter-spacing:-.12rem}}
.tg-home .mulig-hode p{max-width:52ch;font-size:16px;line-height:132%;letter-spacing:-.03rem;color:var(--tone-tekst)}
@media(min-width:900px){.tg-home .mulig-hode p{font-size:18px;letter-spacing:-.04rem}}
.tg-home .mulig-flater,.tg-home .innsikt-flater{display:grid;grid-template-columns:1fr;gap:14px}
.tg-home .flate{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:220px;padding:22px;overflow:hidden;border-radius:var(--kortradius);background:var(--hvit);color:var(--blekk);text-decoration:none}
.tg-home .flate h3{max-width:22ch;margin-top:12px;font-family:var(--sans);font-weight:400;font-size:22px;line-height:108%;letter-spacing:-.05rem}
@media(min-width:900px){.tg-home .flate h3{font-size:28px;line-height:102%;letter-spacing:-.08rem}}
.tg-home .flate .les{display:inline-flex;gap:8px}
.tg-home a.flate:focus-visible{outline:1px solid var(--blekk);outline-offset:4px}
@media(hover:hover){.tg-home a.flate:hover .les{text-decoration:underline;text-underline-offset:var(--understrek-avstand)}}
.tg-home .flate.moerk{background:var(--blekk);color:var(--hvit)}
.tg-home .flate.moerk .eyebrow{color:var(--lys)}
.tg-home .flate.bilde{color:var(--hvit);background:var(--blekk);min-height:280px}
.tg-home .flate.bilde img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tg-home .flate.bilde::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,31,30,.6) 0%,rgba(27,31,30,0) 45%,rgba(27,31,30,.7) 100%)}
.tg-home .flate.bilde>:not(img){position:relative;z-index:1}
/* Easy Labs (2026-10-09): bildet fyller kortet fra kant til kant under teksten. */
.tg-home .flate.ark img{display:block;width:calc(100% + 44px);max-width:none;height:auto;margin:0 -22px;aspect-ratio:16/10;object-fit:cover}
.tg-home .flate.ark .tone{max-width:34ch;margin-top:12px}
/* Våre data (2026-10-09): et lite nettverk av datapunkter koblet til én midte, nede til høyre i kortet. */
.tg-home .flate.data .data-graf{position:absolute;right:-12px;bottom:-12px;width:62%;height:auto;pointer-events:none}
.tg-home .flate.data>:not(.data-graf){position:relative;z-index:1}
@media(max-width:899px){.tg-home .flate.data{min-height:280px}.tg-home .flate.data .data-graf{width:68%}}
.tg-home .data-graf .k line{stroke:var(--regel);stroke-width:1}
.tg-home .data-graf .n circle{fill:var(--tone-tekst)}
.tg-home .data-graf .midt{fill:var(--blekk)}
.tg-home .data-graf .ring{fill:none;stroke:var(--blekk);stroke-width:1;transform-origin:200px 130px;animation:data-ring 3.6s ease-out infinite}
@keyframes data-ring{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
/* Kom i gang (2026-10-09): hele kortet er knappen, i samme lyse farge som «Snakk med oss» i bunnteksten. */
.tg-home .flate.cta{background:var(--lys);color:var(--blekk);transition:background var(--t-hover)}
.tg-home .flate.cta h3{max-width:16ch}
.tg-home .flate.cta .les{align-items:center;justify-content:space-between;width:100%}
.tg-home .flate.cta .pil{width:14px;height:12px;flex:none}
.tg-home .flate.cta .pil path{fill:currentColor}
@media(hover:hover){.tg-home a.flate.cta:hover{background:var(--hvit)}.tg-home a.flate.cta:hover .les{text-decoration:none}}
/* Innsikt (2026-10-09): artikkelbildet i de tre små kortene, øverst på mobil og til høyre fra 900. */
.tg-home .flate.med-bilde img{display:block;width:calc(100% + 44px);max-width:none;height:auto;margin:-22px -22px 0;aspect-ratio:16/9;object-fit:cover}
.tg-home .mp-tall{display:grid;gap:22px;margin:0}
.tg-home .mp-tall div{display:flex;flex-direction:column;gap:8px}
.tg-home .mp-tall dt{font-size:14px;line-height:112%;letter-spacing:-.026rem;color:var(--lys)}
.tg-home .mp-tall dd{margin:0;font-size:32px;line-height:100%;letter-spacing:-.1rem;font-variant-numeric:tabular-nums}
.tg-home .mp-tall .endring{font-size:14px;line-height:112%;letter-spacing:-.026rem;color:var(--lys)}
.tg-home .mp-reserve{max-width:44ch;font-size:16px;line-height:132%;letter-spacing:-.03rem;color:var(--lys)}
.tg-home .flate.stor img{position:relative;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--medieradius);background:var(--hvit)}
.tg-home .flate.stor h3{max-width:24ch}
.tg-home .flate .emne{margin-left:12px;color:var(--hvit)}
.tg-home .innsikt-mer{margin-top:40px;text-align:center}
@media(min-width:900px){
  .tg-home .mulig-flater,.tg-home .innsikt-flater{grid-template-columns:repeat(12,1fr);gap:16px}
  .tg-home .mulig-flater{grid-template-rows:280px 280px 280px} /* 2026-10-09: Om oss og Kom i gang like høye */
  .tg-home .flate{padding:28px}
  .tg-home .flate.mp{grid-column:1/span 8;grid-row:1}
  .tg-home .flate.ark{grid-column:9/span 4;grid-row:1/span 2}
  .tg-home .flate.tomt{grid-column:1/span 4;grid-row:2/span 2}
  .tg-home .flate.data{grid-column:5/span 4;grid-row:2}
  .tg-home .flate.om{grid-column:5/span 4;grid-row:3}
  .tg-home .flate.cta{grid-column:9/span 4;grid-row:3}
  .tg-home .flate.ark{justify-content:flex-start}
  .tg-home .flate.ark .les{margin-top:auto}
  .tg-home .flate.ark img{flex:1 1 auto;min-height:0;width:calc(100% + 56px);margin:0 -28px;aspect-ratio:auto}
  .tg-home .flate.med-bilde{display:grid;grid-template-columns:minmax(0,1fr) 42%;grid-template-rows:1fr auto;column-gap:28px}
  .tg-home .flate.med-bilde img{grid-column:2;grid-row:1/span 2;width:calc(100% + 28px);height:calc(100% + 56px);margin:-28px -28px -28px 0;aspect-ratio:auto}
  .tg-home .flate.med-bilde>div{grid-column:1;grid-row:1}
  .tg-home .flate.med-bilde .les{grid-column:1;grid-row:2}
  .tg-home .mp-tall{grid-template-columns:repeat(3,1fr);gap:16px}
  .tg-home .mp-tall dd{font-size:44px;letter-spacing:-.12rem}
  .tg-home .flate.stor{grid-column:1/span 6;grid-row:1/span 3}
  .tg-home .innsikt-flater>.flate:not(.stor){grid-column:7/span 6}
  .tg-home .innsikt-mer{margin-top:60px}
}
@media(prefers-reduced-motion:reduce){.tg-home .vb-fane{transition:none}.tg-home .data-graf .ring{animation:none;opacity:0}}

/* LØSNINGER (#solutions0). Faste bilder: forklaring i kol 1 til 3, navn i 5 til 8, bilde i 9 til 11 og pil mot 12. */
.tg-home .solution-list{margin-top:60px}
.tg-home .solution-item{position:relative}
.tg-home .solution-item+.solution-item{margin-top:40px}
@media(min-width:900px){.tg-home .solution-item+.solution-item{margin-top:60px}}
.tg-home .solution-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px;align-items:end;color:var(--blekk)}
@media(min-width:900px){.tg-home .solution-row{grid-template-columns:repeat(12,1fr);column-gap:16px}}
.tg-home .solution-row p{grid-column:1/span 4;max-width:var(--maal-kort)}
.tg-home .solution-row h3{grid-column:1/span 3;margin-top:12px;min-width:0;overflow-wrap:anywhere}
.tg-home .solution-arrow{grid-column:4;justify-self:end;align-self:end;width:14px;height:14px;transition:transform var(--t-hover)}
@media(min-width:900px){.tg-home .solution-row p{grid-column:1/span 3;align-self:start}.tg-home .solution-row h3{grid-column:5/span 7;margin-top:0}.tg-home .solution-arrow{grid-column:12;width:22px;height:22px}}
.tg-home .solution-arrow path{fill:none;stroke:currentColor;stroke-width:1.5}
.tg-home .solution-row:hover .solution-arrow{transform:translate(3px,-3px)}
.tg-home .solution-row:focus-visible{outline:1px solid var(--blekk);outline-offset:8px}
.tg-home .solution-row h3 strong{font-weight:500}
.tg-home .solution-preview{grid-column:1/span 4;margin-top:22px;min-width:0;max-width:360px}
@media(min-width:900px){
  .tg-home .solution-item{align-items:center}
  .tg-home .solution-row{grid-row:1;align-items:center;min-height:100%}
  .tg-home .solution-row p,.tg-home .solution-arrow{align-self:center}
  .tg-home .solution-row h3{grid-column:5/span 4}
  .tg-home .solution-preview{grid-column:9/span 3;grid-row:1;width:100%;max-width:360px;margin:0;pointer-events:none}
  .tg-home .solution-preview figcaption{display:none}
}
@media(min-width:900px) and (max-width:1199px){.tg-home .solution-row h3{font-size:32px;line-height:102%;letter-spacing:-.1rem}}
.tg-home .solution-preview img,.tg-home .solution-preview svg{width:100%;height:auto;display:block;border-radius:var(--medieradius);background:var(--knapp-graa)}
.tg-home .solution-preview figcaption{margin-top:12px;max-width:var(--maal-bred)}

/* PRODUKTSTIGEN MED STORT BILDE (#solutions0.stige, 2026-10-01, forslag C fra Design-lerretet).
   Fra 900 px: navnene og forklaringene står i kol 1 til 4, og ett stort bilde i kol 5 til 12
   følger valget. Bildene ligger fortsatt i hvert sitt <li> (testene og ankrene #easycortex og
   #ai-og-agenter er uendret), men er plassert oppå hverandre mot listas høyre side og bytter
   med en myk overgang. Valget følger pekeren og tastaturet; uten valg går stigen av seg selv
   med fremdriftsfelt som karusellen. Under 900 px er stigen som før. */
@media(min-width:900px){
  .tg-home #solutions0.stige .solution-list{position:relative;margin-top:40px;padding:0 var(--indre);min-height:calc(41vw + 40px)}
  .tg-home #solutions0.stige .solution-item{position:static;display:block;padding:0;width:calc((100% - 11*var(--gap))/12*4 + 3*var(--gap))}
  .tg-home #solutions0.stige .solution-item+.solution-item{margin-top:40px}
  .tg-home #solutions0.stige .solution-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--dempet);transition:color var(--t-hover)}
  .tg-home #solutions0.stige .solution-row h3{order:-1;margin:0;font-size:44px;line-height:102%;letter-spacing:-.12rem}
  .tg-home #solutions0.stige .solution-row p{max-width:var(--maal);align-self:auto;color:inherit}
  .tg-home #solutions0.stige .solution-arrow{order:2;align-self:flex-start;width:22px;height:22px;color:transparent;transition:color var(--t-hover),transform var(--t-hover)}
  .tg-home #solutions0.stige .solution-item.aktiv .solution-row{color:var(--blekk)}
  .tg-home #solutions0.stige .solution-item.aktiv .solution-arrow{color:var(--blekk)}
  .tg-home #solutions0.stige .solution-preview{position:absolute;top:0;right:var(--indre);width:calc((100% - 2*var(--indre) - 11*var(--gap))/12*8 + 7*var(--gap));max-width:none;margin:0;pointer-events:none}
  /* Avdekkingen styrer figurens egen opasitet; valget styrer innholdet i den. */
  .tg-home #solutions0.stige .solution-preview>*{opacity:0;transition:opacity .6s ease}
  .tg-home #solutions0.stige .solution-item.aktiv .solution-preview>*,.tg-home #solutions0.stige:not(.klar) .solution-item:first-child .solution-preview>*{opacity:1}
  .tg-home #solutions0.stige .solution-preview img,.tg-home #solutions0.stige .solution-preview svg{aspect-ratio:16/10;height:auto;object-fit:cover}
  .tg-home #solutions0.stige .solution-preview figcaption{display:block;margin-top:12px}
  .tg-home #solutions0.stige .stige-fremdrift{display:flex;gap:8px;margin-top:40px}
  .tg-home #solutions0.stige .stige-fremdrift span{display:block;width:32px;height:2px;background:var(--regel);position:relative;overflow:hidden}
  .tg-home #solutions0.stige .stige-fremdrift span i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blekk)}
  .tg-home #solutions0.stige .stige-fremdrift span.ferdig i{width:100%}
  .tg-home #solutions0.stige .stige-fremdrift span.gaar i{animation:stige-fyll 4.4s linear forwards}
}
@media(min-width:900px) and (max-width:1199px){.tg-home #solutions0.stige .solution-row h3{font-size:32px;letter-spacing:-.1rem}}
@media(min-width:2000px){.tg-home #solutions0.stige .solution-list{min-height:calc(820px + 40px)}}
@keyframes stige-fyll{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.tg-home #solutions0.stige .solution-preview>*{transition:none}.tg-home #solutions0.stige .stige-fremdrift{display:none}}
.tg-home .stige-fremdrift{display:none}



/* Kontakt: to store knapper direkte på siden, med sentrert tekst. */
.tg-home .contact-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tg-home .contact-actions .tg-cta{position:relative;justify-content:center;min-height:180px;padding:28px 66px;text-align:center;font-size:32px;line-height:102%;letter-spacing:-.1rem;border-color:transparent}
.tg-home .contact-actions .demo-cta{background:var(--knapp-graa);color:var(--blekk)}
.tg-home .contact-actions .demo-cta:hover{background:var(--lys)}
.tg-home .contact-actions .inquiry-cta{background:var(--blekk);color:var(--hvit)}
.tg-home .contact-actions .inquiry-cta:hover{background:var(--knapp-moerk)}
.tg-home .contact-actions .tg-cta:focus-visible{outline:2px solid var(--blekk);outline-offset:4px}
.tg-home .contact-actions .pil{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:24px;height:24px}
.tg-home .contact-actions .pil path{fill:none;stroke:currentColor;stroke-width:1.5}
.tg-home .contact-actions .hjelp{display:block;margin-top:10px;font-size:16px;line-height:112%;letter-spacing:-.03rem;opacity:.72}
@media(max-width:599px){.tg-home .contact-actions{grid-template-columns:1fr;gap:14px}.tg-home .contact-actions .tg-cta{min-height:160px;font-size:28px;letter-spacing:-.08rem;padding-inline:56px}.tg-home .contact-actions .pil{right:22px}}

/* AI og agenter */
.tg-dialog ol{list-style:none;padding:0;margin:0}
.tg-dialog .ai-lead{margin-top:22px;max-width:var(--maal-bred)}
.tg-dialog .ai-workflow{margin-top:60px}
.tg-dialog .ai-workflow>h3{margin-top:14px;max-width:var(--maal-kort)}
.tg-dialog .ai-workflow-intro{margin-top:16px;max-width:var(--maal-bred)}
.tg-dialog .ai-workflow-steps{display:grid;grid-template-columns:1fr;gap:22px 16px;margin-top:40px}
@media(min-width:900px){.tg-dialog .ai-workflow-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tg-dialog .ai-workflow-steps h4{margin-top:12px}
.tg-dialog .ai-workflow-steps p{margin-top:8px;max-width:var(--maal)}
.tg-dialog .ai-task-example{margin-top:40px;padding:18px;background:var(--lys);border-radius:6px}
@media(min-width:900px){.tg-dialog .ai-task-example{padding:22px}}
.tg-dialog .ai-task-example blockquote{margin-top:12px;max-width:var(--maal-bred)}
.tg-dialog .ai-workflow-note{margin-top:16px;max-width:var(--maal-bred)}
.tg-dialog .ai-offerings{display:grid;grid-template-columns:1fr;gap:22px 16px;margin-top:60px}
@media(min-width:900px){.tg-dialog .ai-offerings{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tg-dialog .ai-offerings h3{margin-top:12px}
.tg-dialog .ai-offerings p{margin-top:12px;max-width:var(--maal)}
.tg-dialog .ai-foundation{margin-top:60px;padding:18px;background:var(--lys);border-radius:6px}
@media(min-width:900px){.tg-dialog .ai-foundation{padding:22px}}
.tg-dialog .ai-foundation>p{margin-top:12px;max-width:var(--maal-bred)}
.tg-dialog .ai-source-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:16px}
.tg-dialog .ai-next{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:40px}
.tg-dialog .ai-next p{max-width:var(--maal)}
/* Artikkelen: lesespalten som i grunnens .lesing, 656 bred. */
.tg-dialog .reader-article{max-width:656px;margin-top:40px}
.tg-dialog .article-title{margin-top:12px;max-width:none;outline:none}
.tg-dialog .article-lead{margin-top:22px}
.tg-dialog .article-body{margin-top:40px}
.tg-dialog .article-body p{margin-bottom:22px}
.tg-dialog .article-body h3{margin:40px 0 12px}
.tg-dialog .article-body ul{list-style:disc;padding-left:40px;margin-bottom:22px}
.tg-dialog .article-body li{margin-bottom:12px}
.tg-dialog .article-body li::marker{color:var(--dempet)}
.tg-dialog .article-body b{font-weight:500;color:var(--blekk)}
.tg-dialog .article-action{margin-top:40px}