/* Khrown 2026 override layer
   Laddas efter Carrd-exportens egen CSS. Allt ar additivt och kan tas
   bort genom att stryka de tva taggarna i index.html. */

:root{
  --khr-blue:#2f6bff;
  --khr-line:rgba(255,255,255,.13);

  /* Bakgrundssystem. Basen ar aakta marinbla, inte svart med plommon
     ovanpa. Allt som ror sidans botten ska tunas har, ingen annanstans. */
  --khr-bg:#070b14;          /* grundton, djup marin */
  --khr-bg-lift:#0b1220;     /* paneler som ska ligga ett steg upp */
  --khr-glow:47,107,255;     /* rgb-kanalen for ambient ljus */
}

/* ---------------------------------------------------------------
   1. Typografi
   --------------------------------------------------------------- */
.khr-h1,
.khr-cs-headline,
.khr-cs-page-title,
.khr-ada-h,
.kv-heading,
.khrown-testimonials-heading,
.khr-pain-headline,
.khr-inc-headline,
.khr-hiw-heading,
.khr-faq-heading,
.khr-close-headline,
.khr-book-headline,
.ec-intro{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  line-height:1.1 !important;
}

/* Serifen laser optiskt mindre an Jakarta, sa storleken kompenseras.
   Taket ar medvetet lagre an vad clamp skulle ge pa 1700px+, annars
   blir rad tva orimligt bred och hero tappar sin form. */
.khr-h1{ font-size:clamp(33px,3.5vw,55px) !important; }
.khr-cs-headline,
.khr-pain-headline,
.khr-inc-headline,
.khr-hiw-heading,
.khr-faq-heading,
.khr-close-headline,
.khr-book-headline,
.khrown-testimonials-heading,
.kv-heading{ font-size:clamp(25px,2.6vw,38px) !important; }
.khr-ada-h{ font-size:clamp(19px,1.9vw,27px) !important; }

/* Den bla raden ar en egen taktslag i rubriken. Utan block bryter
   den olika beroende pa fonsterbredd, ibland tva rader och ibland
   tre, vilket gor hero olika stark pa olika skarmar. */
.khr-h1 .accent{ color:var(--khr-blue) !important; display:block !important; font-weight:500 !important; }
.khr-sub{ max-width:33em !important; }

@media (max-width:768px){
  /* Radbrytningen i markupen doljs av Carrds mobilregel. Med serifen
     laser tre korta rader battre an en lang omsluten mening. */
  .khr-h1{ font-size:28px !important; }
  .khr-h1 br{ display:inline !important; }}

/* ---------------------------------------------------------------
   2. Navigation
   --------------------------------------------------------------- */
.khr-nav{
  top:20px !important;
  left:0 !important;
  right:0 !important;
  width:max-content !important;
  max-width:calc(100% - 32px) !important;
  margin:0 auto !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(12,13,16,.5) !important;
  box-shadow:0 6px 28px rgba(0,0,0,.35) !important;
  transition:top .3s cubic-bezier(.4,0,.2,1),
             background .3s ease,
             box-shadow .3s ease,
             transform .3s cubic-bezier(.4,0,.2,1);
}
/* Den tonade linjen ar en signaturdetalj och sitter kvar, men pa
   pillen sjalv och inte som ett eget streck over hela fonstret.
   Insatt fran kanterna sa den foljer rundningen istallet for att
   sticka ut ur den. */
.khr-nav::before{
  content:'' !important;
  display:block !important;
  position:absolute;
  top:0;
  left:16%; right:16%;
  height:1px;
  border-radius:1px;
  background:linear-gradient(90deg,
    rgba(47,107,255,0) 0%,
    #2f6bff 22%,
    #0aa387 58%,
    #34d399 82%,
    rgba(52,211,153,0) 100%);
  z-index:2;
  pointer-events:none;
}

.khr-nav-inner{ height:62px !important; padding:0 10px 0 26px !important; max-width:none !important; }
.khr-nav-logo{ margin-right:34px !important; }
.khr-nav-logo img{ height:26px !important; }
.khr-nav-links{ margin-right:18px !important; }
.khr-nav-link{ padding:8px 17px !important; font-size:15px !important; }
.khr-nav-cta{ padding:11px 22px !important; font-size:14px !important; }

.khr-nav.khr-scrolled{
  top:10px !important;
  background:rgba(12,13,16,.78) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.5) !important;
}
.khr-nav.khr-hidden{ transform:translateY(-140%) !important; }

@media (max-width:900px){
  .khr-nav{
    left:16px !important; right:16px !important;
    width:auto !important; max-width:none !important;
    border-radius:18px !important;
  }
  .khr-nav-inner{ padding:0 10px 0 18px !important; height:58px !important; }

  /* Originalet lat logotypen ha margin-right:auto, vilket tryckte
     hamburgaren mot hogerkanten. Min pill-override satte 34px och
     slog darfor ut den knuffen pa mobil, dar lankarna och CTA:n ar
     dolda och inget annat finns kvar att fylla raden med. */
  .khr-nav-logo{ margin-right:auto !important; }
  .khr-nav-mobile-toggle{ margin-left:0 !important; }}

/* ---------------------------------------------------------------
   3. Hero: hojd och rytm

   Forra versionen tvingade hero till 100vh med centrerat innehall.
   Pa en 1180px hog skarm gav det 990px hero runt 540px innehall,
   alltso ca 450px tomrum. Nu styr paddingen hojden och nasta sektion
   far synas i underkant, vilket ocksa signalerar att sidan fortsatter.
   --------------------------------------------------------------- */
.khr-fx-host{
  position:relative;
}
.khr-wrap{ position:relative; z-index:1; }

/* Avstandet fran nav till eyebrow var 192px, vilket laste som ett hal
   snarare an som luft. Det byggdes av tva lager: Carrds spacer under
   nav-embeden och hero-wrappens egen toppadding. Bada kapas. */
.khr-nav-spacer{ height:96px !important; }

@media (min-width:1100px){
  .khr-wrap{
    min-height:0 !important;
    padding-top:48px !important;
    padding-bottom:96px !important;
  }}

@media (max-width:900px){
  .khr-nav-spacer{ height:84px !important; }}

/* ---------------------------------------------------------------
   4. Hero-animationens lager

   Varden far INTE ha overflow:hidden. Den borjar 150px ner pa sidan,
   under nav-embeden, sa klippning ger en hard vagrat kant precis under
   toppbaren. Uppat overflow ar inte scrollbart och masken tonar ut
   monstret langt innan varden tar slut nedat, sa inget lacker.
   --------------------------------------------------------------- */
.khr-fx{
  position:absolute;
  top:-210px; left:0;
  width:100%;
  height:calc(100% + 300px);
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s ease;
  -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 30%,
      rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 82%);
  mask-image:linear-gradient(180deg,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 30%,
      rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 82%);
}
.khr-fx.khr-fx-in{ opacity:1; }

/* Ambient glod. Ersatter canvasens shadowBlur, som ar den dyraste
   operationen i hela ritningen. Den ligger PA canvasen och inte pa
   varden, eftersom varden borjar 150px ner pa sidan och en bakgrund
   dar ger en hard vagrat kant precis under toppbaren. Canvasen borjar
   ovanfor sidans overkant och bar redan masken. */
.khr-fx{
  background:radial-gradient(ellipse 58% 44% at 64% 30%,
    rgba(47,107,255,.20) 0%,
    rgba(47,107,255,.06) 44%,
    transparent 70%);
}

/* Mobil: hero ar bara ca 470px hog, sa canvasen ligger narmare toppen
   och tonar ut senare, annars hamnar hela monstret ovanfor vyn */
@media (max-width:767px){
  .khr-fx{
    top:-70px;
    height:calc(100% + 130px);
    -webkit-mask-image:linear-gradient(180deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.8) 34%,
        rgba(0,0,0,.35) 58%, rgba(0,0,0,0) 80%);
    mask-image:linear-gradient(180deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.8) 34%,
        rgba(0,0,0,.35) 58%, rgba(0,0,0,0) 80%);
  }}

@media (prefers-reduced-motion:reduce){
  .khr-fx{ display:none; }}

/* ---------------------------------------------------------------
   5. Aktivitetspanelen

   Lag pa rgba(255,255,255,.035), alltsa nastan genomskinlig, sa
   animationen lyste rakt igenom. Den ar sidans starkaste bevis och
   maste sta skarpt.
   --------------------------------------------------------------- */
.khr-feed-window{
  background:
    linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.035)),
    rgba(11,12,15,.78) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.2) !important;
  backdrop-filter:blur(20px) saturate(1.2) !important;
}

/* Rullande flode. Sparet ar dubblerat, sa -50% motsvarar exakt en
   uppsattning rader och loopen blir somlos. */
.khr-feed-list{
  overflow:hidden !important;
  position:relative;
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image:linear-gradient(180deg,
    transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.khr-feed-track{
  display:flex;
  flex-direction:column;
  will-change:transform;
}
.khr-feed-track.khr-feed-run{
  animation-name:khr-feed-scroll;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.khr-feed-window:hover .khr-feed-track{ animation-play-state:paused; }

@keyframes khr-feed-scroll{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}

@media (prefers-reduced-motion:reduce){
  .khr-feed-track{ animation:none !important; }
  .khr-feed-list{ -webkit-mask-image:none; mask-image:none; }}

/* ---------------------------------------------------------------
   6. Footer
   --------------------------------------------------------------- */
.khr-footer-watermark-text{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
  background:linear-gradient(180deg,
      rgba(47,107,255,.20) 0%,
      rgba(47,107,255,.07) 55%,
      transparent 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}

/* ===============================================================
   7. DESIGNSYSTEM

   Sajten laste som staplade block darfor att varje sektion hade
   uppfunnit sina egna varden. Uppmatt fore: sex olika kortstilar
   med radierna 12, 16 och 20px och ramar pa 6, 7, 8 och 9 procent
   vitt, plus fyra olika containerbredder. Harifran finns ett varde
   per sak och inga undantag.
   =============================================================== */
:root{
  --khr-container:1240px;
  --khr-gutter:40px;
  --khr-rhythm:88px;
  --khr-radius:16px;
  --khr-hair:rgba(255,255,255,.08);
  --khr-ease:cubic-bezier(.2,.7,.2,1);
}

@media (max-width:900px){
  :root{ --khr-rhythm:56px; --khr-gutter:20px; }}

/* 7.1 En containerbredd ------------------------------------- */
.khr-wrap,
.khr-pain,
.khr-ada,
.khr-hiw,
.ec-wrap,
.khrown-testimonials,
.khr-book,
.khr-faq,
.khr-footer-content,
.khr-footer-bottom{
  max-width:var(--khr-container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--khr-gutter) !important;
  padding-right:var(--khr-gutter) !important;
}

/* 7.2 En sektionsrytm

   Forsta forsoket satte 144px pa bade topp och botten, vilket gav
   288px mellan varje sektion innan sektionernas egna innermarginaler
   ens raknats in. Uppmatt blev glappen 200 till 336px, alltsa ca 18
   procent av hela sidan var tom. 88px ger 176px som grund.          */
.khr-pain,
.khr-ada,
.khr-hiw,
.ec-wrap,
.khrown-testimonials,
.khr-book,
.khr-faq{
  padding-top:var(--khr-rhythm) !important;
  padding-bottom:var(--khr-rhythm) !important;
}

/* 7.3 En radie och en linje --------------------------------- */
.khr-feed-window,
.khr-pain-bento,
.khr-ada-row,
.ec-window,
.testimonial-card,
.khr-book-cal-wrap{
  border-radius:var(--khr-radius) !important;
  border:1px solid var(--khr-hair) !important;
}

/* 7.4a Sidan har en enda bakgrund

   Efter att mina alternerande ytnivaer togs bort fanns ett band kvar:
   problemsektionen bar en egen bla wash, linear-gradient med 16
   procent pa rgb(33,72,133) i overkanten. Den ar original fran ditt
   Carrd-bygge och inte nagot jag lagt dit, men det ar exakt den kant
   som syns mot hero. Stangs av har. Footerns egen radial pa 4 procent
   ar sa svag att den lamnas kvar.                                   */
#container01{
  background-image:none !important;
}

/* 7.4 Fullbredd pa hero

   Carrds embed-block ligger inne i sidans 1265px-spalt. Hero bryter
   ut sa att konturanimationen far hela fonsterbredden. Ovriga
   sektioner behover det inte, de ar transparenta.                  */
#embed19,
#embed28,
#embed12,
#embed01,
#embed03,
.khr-flow,
.khr-why,
.khr-calc,
.khr-cmp{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(-50vw + 50%) !important;
}

/* Carrds container-block lagger 33px padding pa sin .inner. Pa
   desktop doljs det av max-width 1240, men pa mobil blev
   sektionerna 375, 362 och 308px breda om vartannat. Paddingen
   nollas sa att min egen gutter ar den enda som galler.            */
#container01 .inner,
#container06 .inner,
#container55 .inner{
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:none !important;
}

/* 7.5 Rubrikjustering --------------------------------------- */

/* Vansterstallt overallt utom de tva sektioner som ar avstamp */
.khr-pain-headline,
.khr-hiw-heading,
.ec-intro,
.khr-faq-heading{ text-align:left !important; }

.khrown-testimonials-heading,
.khr-book-headline{ text-align:center !important; }

/* 7.6 Case studies

   Korten byggs om till egna element. Carrds .khr-ada-row lade en
   hojd som inte gick att overrida, sa brodtexten klipptes bort av
   overflow:hidden sa fort korten stalldes tva och tva. Innehallet
   flyttas nu in i .khr-case, som Carrds CSS inte kanner till.

   De tva casen med videobevis star storst, de tva med bara logotyp
   blir ett lugnare andra par.                                      */

.khr-pain-bridge{
  text-align:left !important;
  margin:0 0 48px !important;
  padding:0 !important;
}
.khr-pain-bridge-text{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-weight:600 !important;
  font-size:clamp(25px,2.6vw,38px) !important;
  line-height:1.1 !important;
  letter-spacing:-.02em !important;
  color:#fff !important;
}

.khr-case-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  align-items:stretch;
}

.khr-case{
  display:flex;
  flex-direction:column;
  border:1px solid var(--khr-hair);
  border-radius:var(--khr-radius);
  background:rgba(255,255,255,.025);
  overflow:hidden;
  transition:border-color .2s ease;
}
.khr-case:hover{ border-color:rgba(255,255,255,.16); }

.khr-case .khr-ada-img{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:16 / 9;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden;
}
.khr-case .khr-ada-img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Bilderna ar inte nakna logotyper utan fardiga grafiker med egen
   bakgrund, sa contain med padding lamnade bara en ram runt dem.
   De fyller nu hela rutan precis som videostillbilderna. */
.khr-case.is-logo .khr-ada-img{ background:none; }
.khr-case.is-logo .khr-ada-img img{
  object-fit:cover !important;
  object-position:center !important;
  padding:0 !important;
  width:100% !important;
  height:100% !important;
}

.khr-case .khr-ada-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:28px !important;
  width:auto !important;
}
.khr-case .khr-ada-h{
  font-size:26px !important;
  line-height:1.2 !important;
}
.khr-case .khr-ada-cta{ margin-top:auto !important; }

.khr-case.is-logo .khr-ada-body{ padding:24px !important; }

@media (max-width:900px){
  .khr-case-grid{ grid-template-columns:1fr; gap:16px; }
  .khr-case .khr-ada-body{ padding:22px !important; }
  .khr-case .khr-ada-h{ font-size:22px !important; }
  .khr-case.is-logo .khr-ada-img img{ padding:32px; }}

/* 7.7 Process som kortrad

   Stegen lag som en lodrat lista utan samband. De blir nu tre kort
   i rad, med dagintervallet i monospace, ett spokat ordningstal i
   hornet och leveranserna som en checklista under en hairline.
   Allt befintligt innehall, ingen ny text.                         */
.khr-hiw{ position:relative; }

@media (min-width:900px){
  .khr-hiw{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    align-items:stretch;
  }
  .khr-hiw-heading{ grid-column:1 / -1; }}

.hiw-step{
  position:relative;
  display:block !important;
  padding:28px !important;
  border:1px solid var(--khr-hair);
  border-radius:var(--khr-radius);
  background:rgba(255,255,255,.02);
  overflow:hidden;
}

/* Ordningstalet blir ett spokat tal i hornet istallet for en cirkel */
.hiw-step-left{
  display:block !important;
  width:auto !important;
}
.hiw-step-number{
  position:absolute;
  top:10px; right:18px;
  width:auto !important; height:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-size:82px !important;
  line-height:1 !important;
  color:rgba(255,255,255,.055) !important;
  pointer-events:none;
}
/* Originalets cirkelring ar ett pseudoelement. Utan att doljas
   stracktes den ut over det nya talet och blev en blek klump. */
.hiw-step-number::before,
.hiw-step-number::after{
  display:none !important;
}
.hiw-step-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--khr-blue) !important;
  margin:0 0 18px !important;
}

/* Enda rubrikerna pa sidan som stod i Plus Jakarta Sans 800. Alla
   andra ar Schibsted Grotesk 600. */
.hiw-step-title{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-weight:600 !important;
  font-size:22px !important;
  line-height:1.25 !important;
  letter-spacing:-.018em !important;
  margin:0 0 12px !important;
}
.hiw-step-body{
  font-size:15px !important;
  line-height:1.6 !important;
  max-width:none !important;
  margin:0 0 24px !important;
}

/* Taggarna blir en checklista, inte piller */
.hiw-step-tags{
  display:block !important;
  padding-top:20px !important;
  border-top:1px solid var(--khr-hair);
}
.hiw-step-tag{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
  padding:0 0 10px !important;
  margin:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  width:auto !important;
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif !important;
  font-size:13.5px !important;
  font-weight:450 !important;
  letter-spacing:-.005em !important;
  line-height:1.5 !important;
  color:rgba(255,255,255,.68) !important;
}
.hiw-step-tag:last-child{ padding-bottom:0 !important; }
.hiw-step-tag::before{
  content:'';
  flex:0 0 auto;
  width:5px; height:5px;
  margin-top:6px;
  background:var(--khr-blue);
  border-radius:1px;
}

@media (max-width:900px){
  .hiw-step{ padding:22px !important; margin-bottom:16px !important; }
  .hiw-step-number{ font-size:64px !important; top:6px; right:14px; }}

/* 7.8 Footern: kolumner forst, wordmarken som sockel --------- */
.khr-footer{
  display:flex !important;
  flex-direction:column;
}
.khr-footer-content{ order:1; }
.khr-footer-bottom{
  order:2;
  border-top:1px solid var(--khr-hair) !important;
}
.khr-footer-dots{ order:3; margin-top:56px !important; }
.khr-footer-watermark{ order:4; padding-bottom:0 !important; }

/* 7.9 Rorelsesprak

   En kurva, en distans, en forskjutning. Aldrig mer an tva
   egenskaper samtidigt.                                          */
.khr-rise{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .4s var(--khr-ease),
             transform .4s var(--khr-ease);
}
.khr-rise.khr-in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  .khr-rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  .khr-rail-fill{ transition:none !important; }}


/* Ankarmarkorer for de tre trasiga navigationsmalen. Marginalen
   lyfter malet forbi den fasta nav-pillen. */
.khr-anchor{
  display:block;
  height:0;
  scroll-margin-top:104px;
}

/* 7.11 Avstandet fran rubrik till innehall

   Uppmatt fore: 40, 48, 48, 63, 72 och 84px i de sex sektionerna.
   Samma problem som med kortstilarna, fast ett steg ner. Ett varde.  */
.khr-pain-headline,
.khr-hiw-heading,
.ec-intro,
.khrown-testimonials-heading,
.khr-faq-heading,
.khr-cs-headline{
  margin-bottom:48px !important;
}
.khr-pain-headline + *,
.khr-hiw-heading + *,
.ec-intro + *,
.khrown-testimonials-heading + *,
.khr-faq-heading + *{
  margin-top:0 !important;
}

@media (max-width:900px){
  .khr-pain-headline,
  .khr-hiw-heading,
  .ec-intro,
  .khrown-testimonials-heading,
  .khr-faq-heading,
  .khr-cs-headline{
    margin-bottom:32px !important;
  }}

/* Tre sektioner far sina extra pixlar fran en wrapper eller fran
   rutnatets gap, alltsa inte fran ett syskons marginal, sa de kan
   inte nollas med + *. Marginalen kompenseras istallet exakt:
   ec-wrappern lagger 27px och FAQ 32px.                            */
.ec-intro{ margin-bottom:21px !important; }
/* Carrds embed-CSS ligger i <body> och vinner pa dokumentordning vid
   samma specificitet, sa .khr-faq-heading ensam gav margin-bottom:0 och
   rubriken satt rakt pa forsta gruppetiketten. Foraldern lyfter vikten. */
.khr-faq .khr-faq-heading{ margin-bottom:30px !important; }
/* Luft mellan grupperna, inte bara efter rubriken. */
.khr-faq .khr-faq-section + .khr-faq-section{ margin-top:38px !important; }
.khr-faq .khr-faq-section-label{ margin-bottom:14px !important; }
@media (max-width:640px){
  .khr-faq .khr-faq-heading{ margin-bottom:26px !important; }
  .khr-faq .khr-faq-section + .khr-faq-section{ margin-top:32px !important; }
}

@media (max-width:900px){
  .ec-intro{ margin-bottom:5px !important; }
  .khr-faq-heading{ margin-bottom:0 !important; }}

/* ---------------------------------------------------------------
   8. Tillganglighet

   Uppmatt pa 40 interaktiva element: noll av dem hade nagon synlig
   fokusmarkering, varken outline eller box-shadow. Tangentbords-
   anvandare hade alltsa ingen aning om var de befann sig.

   Kontrast mot bakgrunden rgb(12,13,16), WCAG AA kraver 4.5 for
   brodtext. Proofraden lag pa 4.08 och footertexten pa 3.17.
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{
  outline:2px solid var(--khr-blue) !important;
  outline-offset:3px !important;
  border-radius:4px;
}

.khr-proof{ color:rgba(255,255,255,.58) !important; }
.khr-footer-tagline{ color:rgba(255,255,255,.55) !important; }

/* ===============================================================
   9. Signalflodet och svarsmockupen
   =============================================================== */

.khr-mono-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin:0 0 20px;
}

/* --- 9.1 Flodet ------------------------------------------------ */
/* Sektionerna arver text-align:center fran Carrds .inner, sa
   justeringen satts explicit for att folja systemet. */
.khr-flow{ position:relative; text-align:left; }
.khr-flow-inner{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:var(--khr-rhythm) var(--khr-gutter);
}
.khr-flow-heading{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(25px,2.6vw,38px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 56px;
}
.khr-flow-heading em{ font-style:normal; font-weight:500; color:var(--khr-blue); }

.khr-flow-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.05fr 1fr;
  gap:40px;
  align-items:center;
}
.khr-flow-svg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.khr-flow-col{ position:relative; z-index:1; }

/* Signalpiller. Varierande indrag ger vaifern som gor att kurvorna
   inte alla startar pa samma x och darmed inte lagger sig i klump. */
.khr-sig{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  margin-bottom:8px;
  border:1px solid var(--khr-hair);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  font-size:13px;
  color:rgba(255,255,255,.78);
}
.khr-sig:nth-child(2){ margin-left:8px; }
.khr-sig:nth-child(3){ margin-left:18px; }
.khr-sig:nth-child(4){ margin-left:26px; }
.khr-sig:nth-child(5){ margin-left:26px; }
.khr-sig:nth-child(6){ margin-left:18px; }
.khr-sig:nth-child(7){ margin-left:8px; }
.khr-sig-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--khr-blue);
  flex:0 0 auto;
  animation:khr-sig-pulse 4s ease-in-out infinite;
}
/* Osynkade varaktigheter, sa faltet aldrig pulserar i takt */
.khr-sig:nth-child(2) .khr-sig-dot{ animation-duration:3.1s; }
.khr-sig:nth-child(3) .khr-sig-dot{ animation-duration:4.7s; }
.khr-sig:nth-child(4) .khr-sig-dot{ animation-duration:3.6s; }
.khr-sig:nth-child(5) .khr-sig-dot{ animation-duration:5.3s; }
.khr-sig:nth-child(6) .khr-sig-dot{ animation-duration:4.2s; }
.khr-sig:nth-child(7) .khr-sig-dot{ animation-duration:5.8s; }
.khr-sig:nth-child(8) .khr-sig-dot{ animation-duration:3.4s; }

@keyframes khr-sig-pulse{
  0%,100%{ opacity:.35; }
  50%{ opacity:1; }
}

.khr-stack-card{
  border:1px solid rgba(47,107,255,.28);
  border-radius:var(--khr-radius);
  background:rgba(47,107,255,.05);
  box-shadow:0 0 60px rgba(47,107,255,.10);
  padding:26px;
}
.khr-stack-name{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:15px;
  letter-spacing:.18em;
  color:var(--khr-blue);
  margin:0 0 6px;
}
.khr-stack-sub{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.42);
  margin:0 0 20px;
}
.khr-stack-tools{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.khr-stack-tools span{
  display:block;
  padding:10px 6px;
  text-align:center;
  border:1px solid var(--khr-hair);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  font-size:12px;
  color:rgba(255,255,255,.8);
}

.khr-chan{
  padding:18px 20px;
  margin-bottom:14px;
  border:1px solid var(--khr-hair);
  border-radius:var(--khr-radius);
  background:rgba(255,255,255,.025);
}
.khr-chan:last-child{ margin-bottom:0; }
.khr-chan-k{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--khr-blue);
  margin:0 0 6px;
}
.khr-chan-t{ font-size:14px; color:rgba(255,255,255,.72); margin:0; }

@media (max-width:900px){
  .khr-flow-grid{ grid-template-columns:1fr; gap:28px; }
  .khr-sig{ margin-left:0 !important; }
  .khr-flow-heading{ margin-bottom:36px; }}

/* ===============================================================
   10. "Varfor det inte blir som forra gangen"

   Asymmetrisk komposition, inte ytterligare ett kortrutnat. Rubriken
   star kvar i vanster spalt medan punkterna rullar forbi till hoger.
   Sektionen fore och efter ar bada rutnat, sa den har maste ha en
   egen form for att sidan inte ska kannas som en enda lang lista.
   =============================================================== */
.khr-why{ position:relative; text-align:left; }
.khr-why-inner{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:var(--khr-rhythm) var(--khr-gutter);
}

@media (min-width:1000px){
  .khr-why-inner{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:80px;
    align-items:start;
  }
  .khr-why-head{
    position:sticky;
    top:120px;
  }}

.khr-why-heading{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(27px,2.9vw,43px);
  line-height:1.08;
  letter-spacing:-.022em;
  color:#fff;
  margin:0 0 20px;
}
.khr-why-heading em{ font-style:normal; font-weight:500; color:var(--khr-blue); }
.khr-why-lead{
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.58);
  margin:0;
}

/* Punkterna ar rader med hairline, inte boxar */
.khr-why-grid{ display:block; }
.khr-why-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  padding:26px 0;
  border:0;
  border-top:1px solid var(--khr-hair);
  border-radius:0;
  background:none;
}
.khr-why-item:first-child{ border-top:0; padding-top:0; }

.khr-why-n{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--khr-blue);
  padding-top:4px;
}
.khr-why-t{
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  color:#fff;
  margin:0 0 8px;
}
.khr-why-b{
  font-size:15px;
  line-height:1.62;
  color:rgba(255,255,255,.56);
  margin:0;
}

@media (max-width:1000px){
  .khr-why-lead{ margin-bottom:40px; }}

/* ===============================================================
   11. ROI-kalkylatorn i flodet
   =============================================================== */
.khr-calc{ position:relative; text-align:left; }
.khr-calc-inner{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:var(--khr-rhythm) var(--khr-gutter);
}
.khr-calc-heading{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(25px,2.6vw,38px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 20px;
}
.khr-calc-heading em{ font-style:normal; font-weight:500; color:var(--khr-blue); }
.khr-calc-lead{
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.58);
  max-width:46em;
  margin:0 0 40px;
}
.khr-calc-frame{
  border-radius:var(--khr-radius);
  overflow:hidden;
}
/* Appen ritar sitt eget kort, sa ingen ram eller botten harifran.
   Hojden ar tilltagen sa att den inte far en egen scrollbar inuti
   sidan, vilket ser trasigt ut. */
.khr-calc-frame iframe{
  display:block;
  width:100%;
  height:1060px;
  border:0;
}
@media (max-width:900px){
  .khr-calc-frame iframe{ height:1520px; }}

/* ===============================================================
   12. Sound Familiar som fyra kort

   Sektionen var det sista stallet med ett eget formsprak: en enda
   ruta med interna hairlines, medan resten av sidan ar fristaende
   kort. Nu samma behandling som case-korten och invandnings-
   punkterna, alltsa 2x2 med samma radie, ram och mellanrum.
   =============================================================== */
/* Rutnatet ligger pa .khr-pain-grid, inte pa bento-rutan.
   Bento-rutan ar bara en ram och slapps helt. */
.khr-pain-bento{
  display:block !important;
  border:0 !important;
  background:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.khr-pain-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:20px !important;
}
/* Originalet satter bara border-bottom, sa ovriga sidor arvde
   opak vit fargen. Fargen satts explicit for alla fyra. */
.khr-pain-cell{
  border:1px solid var(--khr-hair) !important;
  border-color:var(--khr-hair) !important;
  border-radius:var(--khr-radius) !important;
  background:rgba(255,255,255,.025) !important;
  padding:28px !important;
  transition:border-color .2s ease;
}
.khr-pain-cell:hover{ border-color:rgba(255,255,255,.16) !important; }

@media (max-width:900px){
  .khr-pain-grid{ grid-template-columns:1fr !important; gap:16px !important; }
  .khr-pain-cell{ padding:22px !important; }}

/* ===============================================================
   13. Jamforelsetabellen
   =============================================================== */
.khr-cmp{ position:relative; text-align:left; }
.khr-cmp-inner{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:var(--khr-rhythm) var(--khr-gutter);
}
.khr-cmp-heading{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(25px,2.6vw,38px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 20px;
}
.khr-cmp-heading em{ font-style:normal; font-weight:500; color:var(--khr-blue); }
.khr-cmp-lead{
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.58);
  max-width:46em;
  margin:0 0 44px;
}

.khr-cmp-scroll{
  overflow-x:auto;
  border:1px solid var(--khr-hair);
  border-radius:var(--khr-radius);
  background:rgba(255,255,255,.02);
}
.khr-cmp-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  font-size:14px;
}
.khr-cmp-table th,
.khr-cmp-table td{
  text-align:left;
  padding:18px 22px;
  border-bottom:1px solid var(--khr-hair);
  vertical-align:top;
}
.khr-cmp-table tbody tr:last-child th,
.khr-cmp-table tbody tr:last-child td{ border-bottom:0; }

.khr-cmp-table thead th{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  font-weight:500;
  padding-top:22px;
  padding-bottom:16px;
}
.khr-cmp-table thead th.is-us{ color:var(--khr-blue); }

.khr-cmp-table tbody th{
  font-weight:500;
  color:rgba(255,255,255,.86);
  width:26%;
}
.khr-cmp-table td{ color:rgba(255,255,255,.5); }

/* Var kolumn markeras hela vagen ner, sa ogat foljer den */
.khr-cmp-table .is-us{
  color:#fff;
  background:rgba(47,107,255,.06);
  box-shadow:inset 1px 0 0 rgba(47,107,255,.22),
             inset -1px 0 0 rgba(47,107,255,.22);
}

@media (max-width:900px){
  .khr-cmp-table th,
  .khr-cmp-table td{ padding:14px 16px; font-size:13px; }}

/* ===============================================================
   14. Tre artefakter med bildtext under
   =============================================================== */

/* ===============================================================
   15. Testimonials
   =============================================================== */
.khrown-testimonials-heading em{
  font-style:normal; font-weight:500;
  color:var(--khr-blue);
}
.testimonial-card{ position:relative; }
.khr-quote{
  display:block;
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-size:44px;
  line-height:.7;
  color:rgba(47,107,255,.4);
  margin-bottom:14px;
}

/* En vag ut ur sektionen istallet for en atervandsgrand */
.khr-tst-cta{
  display:flex;
  justify-content:center;
  margin-top:48px;
}
.khr-tst-cta a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  border-radius:999px;
  background:var(--khr-blue);
  color:#fff;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.khr-tst-cta a:hover{
  background:#4a7dff;
  transform:translateY(-1px);
}
.khr-tst-cta a span{
  width:6px; height:6px;
  border-top:1.5px solid #fff;
  border-right:1.5px solid #fff;
  transform:rotate(45deg);
}

/* ===============================================================
   16. Ytrytm och scrollrorelse

   Forsta forsoket med alternerande ytor gav en hard sjupixels kant
   under nav. Problemet var metoden, inte iden. Nu tonar varje
   upphojd yta in och ut over 140px, sa det finns ingen kant alls,
   bara en ton som kommer och gar medan man rullar.
   =============================================================== */
#embed28, #container06, .khr-cmp{
  background-image:linear-gradient(180deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.022) 140px,
    rgba(255,255,255,.022) calc(100% - 140px),
    rgba(255,255,255,0) 100%);
}

/* Maskinsektionen far en egen bla grund, den ar sidans mittpunkt */
.khr-flow{
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 45%,
      rgba(47,107,255,.07) 0%, rgba(47,107,255,0) 65%),
    linear-gradient(180deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,.015) 160px,
      rgba(255,255,255,.015) calc(100% - 160px),
      rgba(255,255,255,0) 100%);
}

/* Blockmarkor: en hairline som tonar ut mot kanterna, sa den
   markerar en grans utan att dra ett streck tvars over sidan */
.khr-flow::before,
.khr-cmp::before,
#embed28::before,
#container06::before{
  content:'';
  position:absolute;
  top:0; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}
#embed28, #container06{ position:relative; }

/* --- Scrollrorelse ---
   Rubriken ligger kvar en aning nar sektionen kommer in och gar
   sedan pa plats. Bara transform, inget som paverkar layouten. */
.khr-par{
  will-change:transform;
  transition:transform .1s linear;
}

@media (prefers-reduced-motion:reduce){
  .khr-par{ transform:none !important; transition:none !important; }}

/* ===============================================================
   17. Skalvariation, full bredd och en ljus sektion

   Tre problem som hanger ihop: allt lag inom samma spalt, alla
   rubriker var lika stora, och sidan var mork fran topp till botten.
   =============================================================== */

/* --- 17.1 Flodet bryter ut till full bredd ---------------------
   Maskinen ar sidans mittpunkt och ska agera darefter. Den far
   hela fonstret och sidans storsta rubrik efter hero.            */
.khr-flow-inner{
  max-width:1560px !important;
  padding-left:clamp(24px,5vw,80px) !important;
  padding-right:clamp(24px,5vw,80px) !important;
  padding-top:calc(var(--khr-rhythm) * 1.35) !important;
  padding-bottom:calc(var(--khr-rhythm) * 1.35) !important;
}
.khr-flow-heading{
  /* Var clamp(31,4vw,60), alltsa 57.6px vid 1440. Det gjorde
     sektionsrubriken storre an hero-rubriken pa 50.4px, over sidans
     minsta innehall. Nu samma steg som cmp, show, calc och faq. */
  font-size:clamp(25px,2.6vw,38px) !important;
  line-height:1.1 !important;
  letter-spacing:-.022em !important;
  max-width:16em;
  margin-bottom:72px !important;
}
@media (min-width:1200px){
  .khr-flow-grid{ gap:64px; }}

/* 17.2 Den ljusa sektionen ar borttagen. Ett enda ljust block mitt
   i en mork sida utan nagon uppbyggnad las som ett misstag och inte
   som ett beslut. Artefakterna star pa samma morka grund som
   resten, och svarskortet far vara den enda ljusa ytan.        */

/* --- 17.3 Rubrikskala i tre steg -------------------------------
   Hero, en statement-rubrik, och resten. Alla lika stora last som
   en lista, inte som en sida.                                     */
.khr-cmp-heading,
.khr-calc-heading{
  font-size:clamp(25px,2.6vw,38px) !important;
}
.khr-why-heading{
  font-size:clamp(28px,3vw,45px) !important;
}


/* ===============================================================
   18. Testimonials som rullande rad

   Forra versionen kapade korten tvart i bada kanter och la en
   gradient som overlagg, vilket syntes som en morkare fyrkant ovanpa
   innehallet. Raden gar nu i full fonsterbredd och tonas ut med en
   mask pa sjalva elementet, sa korten loses upp mjukt at bada hall
   och det finns ingenting ovanpa.
   =============================================================== */
.khrown-testimonials{ position:relative; }

.testimonial-wall{
  display:block !important;
  columns:auto !important;
  overflow:hidden;
  width:100vw;
  margin-left:calc(-50vw + 50%);
  padding:6px 0 10px;
  /* Kortare och skarpare uttoning. 14 procent motsvarade ungefar
     200px pa varje sida, vilket at upp ett halvt kort. */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
}
.khr-tst-track{
  display:flex;
  gap:20px;
  width:max-content;
  padding-left:clamp(24px,7vw,120px);
  will-change:transform;
}
.khr-tst-track.khr-tst-run{
  animation-name:khr-tst-scroll;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.khrown-testimonials:hover .khr-tst-track{ animation-play-state:paused; }

@keyframes khr-tst-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - 10px)); }
}

.testimonial-card{
  flex:0 0 366px !important;
  width:366px !important;
  max-width:78vw;
  margin:0 !important;
  display:flex !important;
  flex-direction:column;
  break-inside:auto !important;
  padding:46px 26px 26px !important;
  position:relative;
  background:rgba(255,255,255,.028) !important;
  transition:background .25s ease, border-color .25s ease;
}
.khrown-testimonials:hover .testimonial-card{ border-color:rgba(255,255,255,.07) !important; }
.testimonial-card:hover{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.16) !important;
}

/* Personen i underkanten sa att alla kort linjerar dar */
.testimonial-card-quote{ order:1; flex:1 1 auto; font-size:15px !important; }
.testimonial-card-logo{ order:2; margin:22px 0 16px !important; }
.testimonial-card-header{ order:3; margin:0 !important; }

/* Logotyperna var olika hoga och drog kortet ur balans */
.testimonial-card-logo img{
  max-height:26px !important;
  width:auto !important;
  object-fit:contain;
  opacity:.85;
}

.khr-quote{
  position:absolute;
  top:20px; left:26px;
  font-size:30px;
  line-height:1;
  margin:0;
  color:rgba(47,107,255,.45);
}

@media (max-width:900px){
  .testimonial-card{ flex-basis:288px !important; width:288px !important; padding:40px 20px 20px !important; }
  .testimonial-wall{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  }}

@media (prefers-reduced-motion:reduce){
  .khr-tst-track{ animation:none !important; }}

/* ===============================================================
   20. Tre artefakter, omgjord

   Korten var olika hoga och bildtexterna hamnade pa tre olika
   niver. Tredje kortet innehöll ett litet ljust kort i ett stort
   morkt kort med tomrum under, alltsa tva lador och ingen substans.
   Nu ar det en konversation som fyller kortet.
   =============================================================== */

/* ===============================================================
   21. Berattelsen: mailet, svaret, motet

   Mailjamforelsen lag som en egen sektion och trekortsraden som en
   annan, utan samband. De ar nu samma forlopp: 01 mailet som gar ut,
   med en flik for att jamfora mot ett typiskt byramail, 02 svaret
   som kommer tillbaka, 03 motet som hamnar i kalendern.
   =============================================================== */

/* Fullbredds-sektionerna anvander 100vw, vilket ar bredare an
   innehallsytan sa fort en scrollbar tar plats. Det gav en
   horisontell scroll pa smalare fonster. clip istallet for hidden,
   sa att position:sticky i invandningssektionen fortsatter fungera. */
html, body{ overflow-x:clip; }

/* Punkterna ar nu enradiga, sa raderna kan bli tatare och rubriken
   fa mer vikt an brodtexten. */
.khr-why-item{ padding:22px 0; }
.khr-why-t{ font-size:18px; margin-bottom:6px; }
.khr-why-b{ font-size:14.5px; line-height:1.6; }

.khr-founded{
  display:block;
  margin-top:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.09em;
  color:rgba(255,255,255,.34);
}

/* ===============================================================
   22. Trekortsraden: hojd och balans

   Mailet ar mycket langre an de andra tva, sa nar korten tvingades
   lika hoga blev tva av tre nastan tomma. Mailet kapas istallet och
   tonar ut i underkanten, precis som ett langt mail gor i en riktig
   inkorg, och de andra tva borjar uppifran istallet for att sväva
   mitt i rutan.
   =============================================================== */
/* 350px ar ungefar hogsta naturliga innehall av de tre, sa ingen
   ruta star halvtom och mailet kapas dar det anda ar lasbart. */
/* Att kapa pa hojd landar aldrig pa ett styckeslut, brytpunkten
   flyttar sig med fonsterbredden. Mailet kortas istallet pa
   styckeniva, sa det slutar alltid dar en mening slutar. */

/* ===============================================================
   23. Bokningsrutan och fragesektionens balans
   =============================================================== */
.khr-bl{
  display:flex !important;
  align-items:flex-start;
  gap:11px;
  padding:9px 0 !important;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.72);
}
.khr-bl::before{
  content:'';
  flex:0 0 auto;
  width:6px; height:6px;
  margin-top:7px;
  border-radius:1px;
}
.khr-bl.is-yes::before{ background:var(--khr-blue); }
.khr-bl.is-no::before{ background:rgba(255,255,255,.2); }
.khr-bl.is-no{ color:rgba(255,255,255,.44); }

/* Fragesektionen: rubriken tog for stor plats mot punkterna */
@media (min-width:1000px){
  .khr-why-inner{ grid-template-columns:0.72fr 1.28fr; gap:64px; }}
.khr-why-heading{ font-size:clamp(26px,2.7vw,40px) !important; }
.khr-why-t{ font-size:19px; }
.khr-why-b{ font-size:15px; }

/* Kalkylatorn: hojden var for lag och appen fick en egen scrollbar.
   Hojden kan inte matas cross-origin, sa den satts rikligt tilltagen
   tills appen sjalv kan rapportera sin hojd. */
/* Appen ligger pa en annan origin och kan darfor inte rapportera sin
   hojd hit. Hojden ar istallet uppmatt i appen sjalv vid var och en av
   dess tva brytpunkter (900 och 480) och satt med marginal. Appens
   bakgrund ar transparent, sa overskottet syns inte, medan en for lag
   ram ger en egen scrollbar inuti sidan.
   Uppmatt maxhojd: 1680 over 900, 1992 mellan, 2040 under.          */
.khr-calc-frame iframe{ height:1700px !important; }
@media (max-width:980px){
  .khr-calc-frame iframe{ height:2020px !important; }}
@media (max-width:560px){
  .khr-calc-frame iframe{ height:2130px !important; }}

/* ===============================================================
   24. Signaturdetaljer

   Gradientlinjen fanns pa exakt ett stalle. Den aterkommer nu pa
   tre till, sa den last som ett formsprak och inte som en dekoration.
   =============================================================== */
:root{
  --khr-sign:linear-gradient(90deg,#2f6bff 0%,#0aa387 58%,#34d399 100%);
}

/* Ingen gradientlinje pa case-kortet. Den las som en dekoration
   ovanpa videon istallet for som en del av kortet. */

/* Processkortens dagintervall far samma linje under sig */
.hiw-step-eyebrow{ position:relative; padding-bottom:12px !important; }
.hiw-step-eyebrow::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:34px; height:2px;
  background:var(--khr-sign);
}

/* --- Signalen tander sin egen kurva ---------------------------- */
.khr-flow-svg path{
  transition:stroke-width .18s ease, opacity .18s ease;
}
.khr-flow-svg path.is-lit{
  stroke:#5b8cff !important;
  stroke-width:2 !important;
}
.khr-sig{ transition:border-color .18s ease, background .18s ease; cursor:default; }
.khr-sig.is-lit{
  border-color:rgba(47,107,255,.55) !important;
  background:rgba(47,107,255,.1) !important;
}
.khr-sig.is-lit .khr-sig-dot{ animation:none; opacity:1; }
.khr-stack-card{ transition:border-color .18s ease, box-shadow .18s ease; }
.khr-stack-card.is-lit{
  border-color:rgba(47,107,255,.5) !important;
  box-shadow:0 0 70px rgba(47,107,255,.2) !important;
}

/* --- Talen i case-rubrikerna som display ----------------------- */
.khr-big{
  display:block;
  font-size:2.05em;
  line-height:.95;
  font-weight:600;
  letter-spacing:-.03em;
  color:#fff;
  margin-bottom:2px;
}

/* --- Konturmonstret aterkommer svagt bakom maskinen ------------ */
.khr-flow::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    repeating-radial-gradient(circle at 66% 40%,
      rgba(47,107,255,.055) 0 1px, rgba(47,107,255,0) 1px 22px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
.khr-flow-inner{ position:relative; z-index:1; }

/* ===============================================================
   25. Ljuspunkter som vandrar langs kopplingarna

   Buzzleads kurvor ar statiska gradienter, men de har en separat
   animation som skickar pulser langs banorna. Det ar den detaljen
   som far diagrammet att kannas levande utan att nagot flyttar sig
   i layouten.
   =============================================================== */
.khr-travel{
  fill:#7aa5ff;
  offset-rotate:0deg;
  offset-distance:0%;
  animation-name:khr-travel;
  animation-timing-function:cubic-bezier(.45,0,.55,1);
  animation-iteration-count:infinite;
  filter:drop-shadow(0 0 5px rgba(47,107,255,.85));
}
@keyframes khr-travel{
  0%{ offset-distance:0%; opacity:0; }
  12%{ opacity:1; }
  82%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}

/* Navet andas i takt med att pulserna kommer in */
.khr-stack-card{
  animation:khr-hub 4.6s ease-in-out infinite;
}
@keyframes khr-hub{
  0%,100%{ box-shadow:0 0 60px rgba(47,107,255,.10); }
  50%{ box-shadow:0 0 84px rgba(47,107,255,.20); }
}
.khr-stack-card.is-lit{ animation:none; }

/* Verktygsbrickorna tands en i taget nar en puls passerar navet */
.khr-stack-tools span{
  animation:khr-tool 7.2s ease-in-out infinite;
}
.khr-stack-tools span:nth-child(2){ animation-delay:1.2s; }
.khr-stack-tools span:nth-child(3){ animation-delay:2.4s; }
.khr-stack-tools span:nth-child(4){ animation-delay:3.6s; }
.khr-stack-tools span:nth-child(5){ animation-delay:4.8s; }
.khr-stack-tools span:nth-child(6){ animation-delay:6s; }
@keyframes khr-tool{
  0%,86%,100%{ border-color:var(--khr-hair); color:rgba(255,255,255,.8); }
  92%{ border-color:rgba(47,107,255,.45); color:#fff; }
}

/* Kanalkorten till hoger blinkar till nar en puls nar fram */
.khr-chan{ animation:khr-chan 9s ease-in-out infinite; }
.khr-chan:nth-child(3){ animation-delay:3s; }
.khr-chan:nth-child(4){ animation-delay:6s; }
@keyframes khr-chan{
  0%,88%,100%{ border-color:var(--khr-hair); }
  94%{ border-color:rgba(47,107,255,.4); }
}

@media (prefers-reduced-motion:reduce){
  .khr-travel,.khr-stack-card,.khr-stack-tools span,.khr-chan{
    animation:none !important;
  }}

/* ===============================================================
   26. Testimonial-raden: bredd, paus och somlos loop
   =============================================================== */

/* Raden gar inte i full fonsterbredd, men lite bredare an
   containern. En uppsattning kort ar 1930px, sa vid 1440px synligt
   finns fortfarande 490px marginal innan samma kort skulle kunna
   dyka upp i bada andar. */
/* Foraldern ar 1240 med 40px gutter, alltsa 1160 innehall. Raden
   maste bryta ut ur den for att bli bredare, men inte hela vagen
   till fonsterkanten. */
.testimonial-wall{
  width:min(1440px, calc(100vw - 80px)) !important;
  max-width:none !important;
  margin-left:50% !important;
  margin-right:0 !important;
  transform:translateX(-50%);
}
.khr-tst-track{ padding-left:0 !important; }

/* Exakt en uppsattning kort plus ett gap, mätt i JS. Procent gav
   ett hopp vid varvets slut eftersom gapantalet skiljer sig. */
@keyframes khr-tst-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(var(--khr-tst-w, 2000px) * -1)); }
}

/* Pausar bara nar pekaren ar pa ett kort, inte pa mellanrummen
   eller nagon annanstans i sektionen. */
.khrown-testimonials:hover .khr-tst-track{ animation-play-state:running; }
.khr-tst-track:has(.testimonial-card:hover){ animation-play-state:paused !important; }
/* ===============================================================
   25. Forloppet: mailet, svaret, veckan

   Tre smala spalter bredvid varandra gav varje artefakt en tredjedel
   av bredden och ingen av dem plats att visa nagot. Nu ar det tre
   steg under varandra pa full bredd. Steg ett ar Carrds egen
   tvakolumnsjamforelse, som alltid var byggd for att sta bredvid
   varandra. Steg tva ar en ljus inkorg mot mork sida, steg tre en
   mork kalender, sa de tre stegen inte far samma yta.
   =============================================================== */
.khr-show{
  position:relative;
  text-align:left;
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(-50vw + 50%) !important;
  background-image:linear-gradient(180deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.022) 140px,
    rgba(255,255,255,.022) calc(100% - 140px),
    rgba(255,255,255,0) 100%);
}
.khr-show::before{
  content:'';
  position:absolute;
  top:0; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.khr-show-inner{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:118px var(--khr-gutter);
}
.khr-show-heading{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(25px,2.6vw,38px);
  line-height:1.1;
  letter-spacing:-.022em;
  color:#fff;
  max-width:17em;
  margin:0 0 66px;
}
.khr-show-heading em{ font-style:normal; font-weight:500; color:var(--khr-blue); }

/* --- Stegen ---------------------------------------------------- */
.khr-step + .khr-step{ margin-top:88px; }

.khr-step-head{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin:0 0 26px;
}
.khr-step-num{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border-radius:12px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  position:relative;
  overflow:hidden;
}
.khr-step-num::after{
  content:'';
  position:absolute;
  left:8px; right:8px; bottom:6px;
  height:2px;
  border-radius:2px;
  background:var(--khr-sign);
}
.khr-step-txt{ min-width:0; padding-top:1px; }
.khr-step-title{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-size:clamp(19px,1.7vw,24px);
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.2;
  color:#fff;
  margin:0 0 6px;
}
.khr-step-sub{
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.5);
  margin:0;
  max-width:46em;
}

/* --- 01. De tva mailen bredvid varandra ------------------------- */
.khr-mailrow .ec-wrap,
.khr-mailrow{ padding:0 !important; max-width:none !important; }
.khr-mailrow .ec-grid{ gap:24px; align-items:stretch; }
.khr-mailrow .ec-intro{ display:none; }
.khr-mailrow .ec-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px !important;
  letter-spacing:.13em !important;
  margin-bottom:12px !important;
}
.khr-mailrow .ec-label-generic{ color:rgba(255,255,255,.34) !important; }
.khr-mailrow .ec-label-khrown{ color:#34d399 !important; }
.khr-mailrow .ec-window{ border-radius:var(--khr-radius); }

/* --- 02. Konversationen ----------------------------------------
   En inkorg, en trad. Inkommande till vanster pa ljus botten,
   utgaende till hoger pa bla, bokningen som kvitto langst ner.
   Raderna stiger in i tur och ordning via rise-systemet, dar
   transition-delay ligger per rad i markupen. */
.khr-replyrow{
  max-width:820px;
}
.khr-convo{
  border-radius:20px;
  padding:10px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--khr-hair);
}
.khr-convo-bar{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 12px 13px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.khr-convo-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.16);
}
.khr-convo-sub{
  margin-left:auto;
  letter-spacing:.02em;
  text-transform:none;
  color:rgba(255,255,255,.34);
}
.khr-convo-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:2px;
}
.khr-bub-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  max-width:78%;
}
.khr-bub-row.is-out{
  align-self:flex-end;
  flex-direction:row-reverse;
}
.khr-bub-ini{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px; height:30px;
  border-radius:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;
  color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.07);
  margin-bottom:2px;
}
.khr-bub-row.is-out .khr-bub-ini{
  color:#cfe0ff;
  background:rgba(47,107,255,.22);
}
.khr-bub{
  border-radius:16px;
  padding:13px 16px 14px;
  background:#f2f4f7;
  border-bottom-left-radius:6px;
}
.khr-bub-row.is-out .khr-bub{
  background:#11213f;
  border:1px solid rgba(47,107,255,.32);
  border-bottom-left-radius:16px;
  border-bottom-right-radius:6px;
}
.khr-bub-meta{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:12px;
  font-weight:600;
  color:#3b4252;
  margin:0 0 6px;
}
.khr-bub-meta em{
  font-style:normal;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  font-weight:400;
  color:#8b90a0;
}
.khr-bub-row.is-out .khr-bub-meta{ color:rgba(255,255,255,.72); }
.khr-bub-row.is-out .khr-bub-meta em{ color:rgba(255,255,255,.4); }
.khr-bub-p{
  font-size:14.5px;
  line-height:1.55;
  color:#20242e;
  margin:0 0 8px;
}
.khr-bub-p:last-child{ margin-bottom:0; }
.khr-bub-row.is-out .khr-bub-p{ color:rgba(255,255,255,.9); }

/* Kvittot */
.khr-bub-row.is-booked{
  max-width:none;
  align-self:stretch;
  align-items:center;
  gap:13px;
  margin-top:4px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(52,211,153,.1);
  border:1px solid rgba(52,211,153,.34);
}
.khr-booked-tick{
  flex:0 0 auto;
  width:24px; height:24px;
  border-radius:50%;
  background:#34d399;
  position:relative;
}
.khr-booked-tick::after{
  content:'';
  position:absolute;
  left:8px; top:5px;
  width:6px; height:11px;
  border:solid #06281c;
  border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.khr-booked-txt{ min-width:0; }
.khr-booked-t{
  font-size:13.5px;
  font-weight:600;
  color:#fff;
  margin:0 0 2px;
}
.khr-booked-b{
  font-size:13px;
  color:rgba(255,255,255,.62);
  margin:0;
}
.khr-booked-tag{
  margin-left:auto;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#34d399;
}
@media (max-width:640px){
  .khr-bub-row{ max-width:92%; }
  .khr-bub-ini{ display:none; }
}

/* --- 03. Veckan -------------------------------------------------
   Spaltkalendern ar tillbaka. Motekortet ar nytt: ingen bla
   vansterkant, istallet sajtens dotsprak och en tidsrad i mono.
   Veckan raknas fran dagens datum vid varje sidladdning, sa
   dagnumren och dagens-markeringen foljer kalendern av sig sjalva. */
.khr-wg{
  border-radius:20px;
  padding:10px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--khr-hair);
}
.khr-wg-bar{
  display:flex;
  align-items:center;
  padding:8px 12px 14px;
}
.khr-wg-m{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  color:#fff;
}
.khr-wg-c{
  margin-left:auto;
  font-size:12.5px;
  font-weight:600;
  color:#34d399;
}
.khr-wg-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-radius:14px;
  overflow:hidden;
  background:rgba(9,11,16,.42);
  border:1px solid rgba(255,255,255,.055);
}
.khr-wg-day{
  min-height:224px;
  padding:13px 11px 15px;
  border-left:1px solid rgba(255,255,255,.05);
}
.khr-wg-day:first-child{ border-left:0; }
.khr-wg-head{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:12px;
  padding-left:2px;
}
.khr-wg-head span{
  font-size:12.5px;
  font-weight:600;
  color:rgba(255,255,255,.5);
}
.khr-wg-head em{
  font-style:normal;
  font-size:11.5px;
  color:rgba(255,255,255,.32);
}
.khr-wg-day.is-today .khr-wg-head span{ color:#fff; }
.khr-wg-day.is-today .khr-wg-head em{
  display:grid;
  place-items:center;
  min-width:21px; height:21px;
  padding:0 5px;
  border-radius:7px;
  background:var(--khr-blue);
  color:#fff;
  font-weight:600;
}
.khr-wg-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.khr-wg-ev{
  border-radius:11px;
  padding:10px 11px 11px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .25s var(--khr-ease),
             background .25s var(--khr-ease);
}
.khr-wg-ev:hover{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.khr-wg-ev-top{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 6px;
}
.khr-wg-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--khr-blue);
  box-shadow:0 0 0 3px rgba(47,107,255,.14);
  flex:0 0 auto;
}
.khr-wg-ev-top time{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  color:rgba(255,255,255,.5);
}
.khr-wg-ev-w{
  font-size:12.5px;
  font-weight:600;
  line-height:1.3;
  color:#fff;
  margin:0 0 2px;
}
.khr-wg-ev-o{
  font-size:11px;
  line-height:1.3;
  color:rgba(255,255,255,.42);
  margin:0;
}
.khr-wg-ev.is-hot{
  background:rgba(52,211,153,.1);
  border-color:rgba(52,211,153,.32);
}
.khr-wg-ev.is-hot .khr-wg-dot{
  background:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.18);
}
.khr-wg-ev.is-hot time{ color:#34d399; }

@media (max-width:720px){
  .khr-wg-grid{
    grid-template-columns:1fr;
    background:transparent;
    border:0;
    gap:8px;
  }
  .khr-wg-day{
    min-height:0;
    border-left:0;
    border-radius:12px;
    background:rgba(9,11,16,.42);
    border:1px solid rgba(255,255,255,.055);
    padding:11px 11px 13px;
  }
  .khr-wg-body{ flex-direction:row; flex-wrap:wrap; }
  .khr-wg-ev{ flex:1 1 150px; }
}

/* Steg 01: Khrown-mailet forst. Carrd-exporten har byran till
   vanster, men det ratta alternativet ska mota ogat forst. */
.khr-mailrow .ec-grid > .ec-col:first-child{ order:2; }

.khr-show-inner .ec-section-cta{
  margin-top:62px !important;
  text-align:center;
}

/* --- Smalare fonster ------------------------------------------- */
@media (max-width:1080px){
}
@media (max-width:900px){
  .khr-show-inner{ padding:84px var(--khr-gutter); }
  .khr-show-heading{ margin-bottom:48px; }
  .khr-step + .khr-step{ margin-top:64px; }
}
@media (max-width:720px){
}
@media (max-width:640px){
  .khr-step-head{ gap:13px; }
  .khr-step-num{ width:36px; height:36px; border-radius:10px; font-size:11px; }
  .khr-msg-p{ font-size:14px; }
}

/* ===============================================================
   26. Signalstacken far ratt tyngd

   Rubriken var storre an hero-rubriken och innehallet under den var
   mindre an brodtexten. Diagrammet ar sektionens hela poang, sa det
   ar det som ska vaxa. Rutnatet dras ocksa in fran 1296 till 1120,
   for pa full bredd blev kopplingarna sa langa att de tre spalterna
   last som tre separata block istallet for ett forlopp.
   =============================================================== */
.khr-flow-grid{
  max-width:1120px;
  margin:0 auto;
  gap:34px;
  align-items:stretch;
}
/* align-items:center centrerade hela spalten inklusive etiketten, sa
   de tre etiketterna hamnade pa tre olika hojder (295, 399, 363 px).
   Nu ligger etiketterna pa en rad och bara innehallet centreras. */
.khr-flow-col{
  display:flex;
  flex-direction:column;
}
.khr-flow-col > .khr-mono-label{ margin:0 0 18px; }
.khr-flow-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.khr-flow-inner .khr-mono-label{
  font-size:11.5px;
  color:rgba(255,255,255,.5);
}

.khr-sig{
  padding:13px 18px;
  margin-bottom:9px;
  font-size:14.5px;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.038);
  border-color:rgba(255,255,255,.1);
}
.khr-sig-dot{ width:6px; height:6px; }

.khr-stack-card{
  padding:30px 28px;
  border-color:rgba(47,107,255,.38);
  background:rgba(47,107,255,.07);
  box-shadow:0 0 80px rgba(47,107,255,.14);
}
.khr-stack-name{ font-size:16px; margin-bottom:7px; }
.khr-stack-sub{ font-size:11.5px; color:rgba(255,255,255,.5); margin-bottom:22px; }
.khr-stack-tools{ gap:9px; }
.khr-stack-tools span{
  padding:12px 6px;
  font-size:13px;
  color:#fff;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.12);
}

.khr-chan{
  padding:20px 22px;
  margin-bottom:15px;
  background:rgba(255,255,255,.038);
  border-color:rgba(255,255,255,.1);
}
.khr-chan-k{ font-size:11.5px; }
.khr-chan-t{ font-size:15.5px; line-height:1.45; color:rgba(255,255,255,.84); }

@media (max-width:900px){
  .khr-flow-grid{ max-width:none; gap:26px; }
  .khr-flow-body{ display:block; }
  .khr-sig{ font-size:14px; }
  .khr-chan-t{ font-size:15px; }
}

/* ===============================================================
   27. Jamforelsen i Buzzleads tabellform

   Etikettspalten bar formagan, var spalt ar en ren bock, och de
   tva andra spalterna ar korta gra avfardanden utan marken. Raden
   dar in house vinner behaller sin grona bock med flit.
   =============================================================== */
.khr-cmp-table thead th{ padding-bottom:16px !important; }
.khr-cmp-table thead th.is-us span{
  display:inline-block;
  padding:6px 12px;
  border-radius:8px;
  background:rgba(47,107,255,.14);
  border:1px solid rgba(47,107,255,.34);
  color:#fff;
  letter-spacing:.12em;
}
.khr-cmp-table tbody th{
  width:36%;
  padding-right:26px !important;
  color:rgba(255,255,255,.92) !important;
  font-weight:600;
  font-size:14.5px;
}
.khr-cmp-table td{
  font-size:13.5px;
  color:rgba(255,255,255,.5);
}
.khr-cmp-table td.is-us{
  width:110px;
  text-align:center;
}
.khr-cmp-check{
  display:inline-flex;
  vertical-align:-3px;
}
.khr-cmp-check svg{ width:17px; height:17px; display:block; }
.khr-cmp-check svg circle{ fill:#34d399; opacity:.18; }
.khr-cmp-check svg path{
  fill:none;
  stroke:#34d399;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.khr-cmp-check.is-them{ margin-right:8px; }

/* Var spalt far en genomgaende yta sa den last som en kolumn */
.khr-cmp-table .is-us{ background:rgba(47,107,255,.055); }
/* Radie pa en cell i en border-collapse-tabell far inset-skuggorna att
   folja kurvan, sa kolumnens sidlinjer bojde av inat i toppen istallet
   for att ga rakt ner. Kolumnen ar raksidig. */

/* Avslutsraden under tabellen */
.khr-cmp-close{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:26px;
}
.khr-cmp-close p{
  font-size:14.5px;
  line-height:1.6;
  color:rgba(255,255,255,.55);
  margin:0;
  max-width:44em;
}
.khr-cmp-cta{
  flex:0 0 auto;
  margin-left:auto;
  padding:13px 26px;
  border-radius:999px;
  background:var(--khr-blue);
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:filter .2s var(--khr-ease);
}
.khr-cmp-cta:hover{ filter:brightness(1.12); }

/* Smalare fonster: varje rad blir ett kort */
@media (max-width:760px){
  .khr-cmp-scroll{
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
  }
  .khr-cmp-table{ min-width:0; width:100%; }
  .khr-cmp-table,
  .khr-cmp-table tbody,
  .khr-cmp-table tr,
  .khr-cmp-table tbody th,
  .khr-cmp-table td{ display:block; width:auto; }
  .khr-cmp-table thead{ display:none; }
  .khr-cmp-table tbody tr{
    border:1px solid var(--khr-hair);
    border-radius:14px;
    background:rgba(255,255,255,.022);
    padding:18px 18px 8px;
    margin-bottom:12px;
  }
  .khr-cmp-table tbody th{
    width:auto;
    font-size:15px !important;
    line-height:1.35;
    padding:0 0 12px !important;
    border:0 !important;
  }
  .khr-cmp-table tbody th::before{
    content:'';
    display:inline-block;
    width:16px; height:16px;
    margin-right:9px;
    vertical-align:-3px;
    border-radius:50%;
    background:rgba(52,211,153,.16);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%2334d399' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .khr-cmp-table td.is-us{ display:none; }
  .khr-cmp-table td{
    padding:0 0 12px !important;
    border:0 !important;
    background:none !important;
  }
  .khr-cmp-table td::before{
    content:attr(data-col);
    display:block;
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.38);
    margin-bottom:3px;
  }
  .khr-cmp-table tbody tr:first-child .is-us,
  .khr-cmp-table tbody tr:last-child .is-us{ border-radius:0; }
  .khr-cmp-close{ flex-direction:column; align-items:flex-start; }
  .khr-cmp-cta{ margin-left:0; }
}

/* ===============================================================
   28. Footern: separatorn gick inte over hela raden

   .khr-footer ar en flexkolumn och barnen far max-width plus
   margin-left/right:auto for att ligga i sidans spalt. Auto-marginaler
   i tvarriktningen slar av stretch, sa barnen krympte till sitt eget
   innehall: innehallsraden blev 566px och botten 341px i en 1440px
   footer. Linjen over copyrighten var alltsa 341px lang, centrerad,
   och bredare an ingenting den avgransade. Bredden satts explicit.
   =============================================================== */
.khr-footer-content,
.khr-footer-bottom{
  width:100% !important;
}
.khr-footer-bottom{
  padding-top:26px !important;
  padding-bottom:0 !important;
  border-top-color:rgba(255,255,255,.07) !important;
}
.khr-footer-dots{ margin-top:44px !important; }

/* ===============================================================
   29. Fortroendelagret

   Aggregatraden, koparvaggen, driftsiffrorna, foretagsraden i
   footern och grundarblocket. Allt bygger pa tal som redan star i
   casen pa samma sida, sa varje pastaende gar att kontrollera en
   rullning bort.
   =============================================================== */

/* Bevisraden under hero-CTA:n */
.khr-proofline{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.05em;
  color:rgba(255,255,255,.44);
  margin:18px 0 0;
}
.khr-proofline::before{
  content:'';
  display:inline-block;
  width:22px; height:2px;
  border-radius:2px;
  margin-right:10px;
  vertical-align:3px;
  background:var(--khr-sign);
}

/* Grundarblocket i bokningen */
.khr-book-fr-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#34d399;
  margin:0 0 12px;
}
.khr-book-anchorline{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.36);
  margin:18px 0 26px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
}

/* Foretagsraden i footern */
.khr-footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:6px 28px;
  align-items:baseline;
}
.khr-footer-entity{
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,.28);
}
@media (max-width:768px){
  .khr-footer-bottom{ flex-direction:column; gap:8px; }
}

/* Hopfalld kalkylator */
.khr-calc-frame{ position:relative; }
.khr-calc.is-collapsed .khr-calc-frame{
  max-height:600px;
  overflow:hidden;
}
.khr-calc-fade{
  display:none;
  position:absolute;
  left:0; right:0; bottom:0;
  height:200px;
  background:linear-gradient(180deg, rgba(12,13,16,0) 0%, #0c0d10 88%);
  pointer-events:none;
}
.khr-calc.is-collapsed .khr-calc-fade{ display:block; }
.khr-calc-more{
  display:block;
  margin:6px auto 0;
  padding:13px 26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s var(--khr-ease), border-color .2s var(--khr-ease);
}
.khr-calc-more:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.26);
}

/* Bokningen: vanstersidan var 1007px mot kalenderns 612. Listorna
   flyttar ut ur spalterna till en egen rad under bada, sa oversta
   raden ar copy mot kalender och listorna star bredvid varandra. */
.khr-book-lists{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 48px;
  margin:0 0 46px;
  text-align:left;
}
/* Listorna var 14px mot brodtextens 15-16 och lasste som finstilt.
   Nu samma storlek som resten av sektionen. */
.khr-book-lists .khr-book-list-item{ font-size:15px !important; line-height:1.55 !important; }
.khr-book-lists .khr-book-section-label{ font-size:16px !important; }
.khr-book-lists .khr-book-hr{ display:none; }
.khr-book-lists .khr-book-section-label{ margin-top:0; }
@media (max-width:860px){
  .khr-book-lists{ grid-template-columns:1fr; gap:26px; }
}

/* Problemsektionen far Anevos form: eyebrow, empatisk rubrik och en
   monsterigenkannings-rad fore korten. Orden ar vara egna. */
.khr-pain-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--khr-blue);
  margin:0 0 14px;
}
.khr-pain-lead{
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.55);
  max-width:38em;
  margin:-28px 0 48px;
  text-align:left;
}

/* Steg 01: Khrown-mailet ska synas som det ratta alternativet pa
   avstand, inte forst vid lasning. Tydlig gron kontur med mjuk glod,
   medan agentmailet tonas ner ett steg. */
.khr-mailrow .ec-window-khrown{
  border:1px solid rgba(52,211,153,.55) !important;
  box-shadow:0 0 0 1px rgba(52,211,153,.18),
             0 14px 44px rgba(0,0,0,.3),
             0 0 44px rgba(52,211,153,.08);
  position:relative;
}
.khr-mailrow .ec-window-generic{
  opacity:.78;
  border-color:rgba(255,255,255,.06) !important;
}
/* Etiketten blir en badge pa korten sa kopplingen ar omedelbar */
.khr-mailrow .ec-label-khrown{
  display:inline-block;
  padding:5px 11px;
  border-radius:7px;
  background:rgba(52,211,153,.13);
  border:1px solid rgba(52,211,153,.4);
}

/* ===============================================================
   30. Case-index

   Egen sida efter bygget till flera sidor. Fyra kort som lankar
   vidare till varje case, sa varje kund kan indexeras for sig.
   =============================================================== */
.khr-csx{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:118px var(--khr-gutter) 40px;
  text-align:left;
}
.khr-csx-heading{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(30px,4vw,50px);
  line-height:1.08;
  letter-spacing:-.025em;
  color:#fff;
  margin:0 0 14px;
}
.khr-csx-lead{
  font-size:16.5px;
  line-height:1.65;
  color:rgba(255,255,255,.55);
  max-width:44em;
  margin:0 0 52px;
}
.khr-csx-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.khr-csx-card{
  display:block;
  position:relative;
  padding:30px 30px 28px;
  border-radius:var(--khr-radius);
  border:1px solid var(--khr-hair);
  background:rgba(255,255,255,.035);
  text-decoration:none;
  overflow:hidden;
  transition:border-color .25s var(--khr-ease),
             background .25s var(--khr-ease),
             transform .25s var(--khr-ease);
}
.khr-csx-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:var(--khr-sign);
  opacity:0;
  transition:opacity .25s var(--khr-ease);
}
.khr-csx-card:hover{
  border-color:rgba(255,255,255,.17);
  background:rgba(255,255,255,.055);
  transform:translateY(-2px);
}
.khr-csx-card:hover::before{ opacity:1; }
.khr-csx-kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin:0 0 22px;
}
.khr-csx-quote{
  font-size:17px;
  line-height:1.6;
  color:#fff;
  margin:0 0 26px;
  border:0;
  padding:0;
  quotes:none;
}
.khr-csx-quote::before{ content:'\201C'; }
.khr-csx-quote::after{ content:'\201D'; }

.khr-csx-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:16px 0 18px;
  margin-bottom:18px;
  border-top:1px solid var(--khr-hair);
  border-bottom:1px solid var(--khr-hair);
}
.khr-csx-tile strong{
  display:block;
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-size:25px;
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.05;
  color:#fff;
  margin-bottom:5px;
}
.khr-csx-tile span{
  display:block;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  line-height:1.35;
}
.khr-csx-who{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0 0 20px;
}
.khr-csx-who strong{
  font-size:14px;
  font-weight:600;
  color:#fff;
}
.khr-csx-who span{
  font-size:12.5px;
  color:rgba(255,255,255,.45);
}
.khr-csx-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  font-weight:600;
  color:var(--khr-blue);
}
.khr-csx-cta::after{
  content:'';
  width:13px; height:13px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3.5L11.5 7 8 10.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3.5L11.5 7 8 10.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--khr-ease);
}
.khr-csx-card:hover .khr-csx-cta::after{ transform:translateX(3px); }

@media (max-width:820px){
  .khr-csx{ padding:84px var(--khr-gutter) 30px; }
  .khr-csx-grid{ grid-template-columns:1fr; }
  .khr-csx-lead{ margin-bottom:36px; }
  .khr-csx-stat{ font-size:38px; }
}

/* Rubriken i problemsektionen arvde text-align:center fran Carrds
   .khr-pain medan eyebrow, ingress och kortrutnat stod till vanster.
   Alla andra sektionsrubriker pa sidan ar vansterstallda. */
.khr-pain-headline{
  text-align:left !important;
  max-width:17em;
  margin-left:0;
  margin-right:0;
}

/* Carrds embed-CSS ligger i body och vinner darfor over den har filen vid
   samma specificitet. Rubriken behover ett steg till for att sta kvar. */
.khr-pain h2.khr-pain-headline{ text-align:left !important; }

/* Casesidorna: .khr-cs hade ingen maxbredd. Pa en egen URL blir det video
   och brodtext fran kant till kant pa en bred skarm. */
.khr-cs{
  max-width:var(--khr-container);
  margin:0 auto;
  padding-left:var(--khr-gutter) !important;
  padding-right:var(--khr-gutter) !important;
}
@media (max-width:640px){
  .khr-cs{ padding-left:24px !important; padding-right:24px !important; }
}

/* Case-index: siffran pa egen rad. Etiketten bredvid brot till tre rader
   och gjorde att korten inte lasste som en serie. */
.khr-csx-stat{
  display:block;
  font-size:52px;
  margin:0 0 4px;
}
/* ===============================================================
   31. "More case studies" langst ner pa varje casesida

   Utan den ar en casesida en atervandsgrand: enda vagen till nasta
   kund gar via indexet. Tre kort racker, det fjarde ar sidan man
   redan star pa.
   =============================================================== */
.khr-csmore{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:96px var(--khr-gutter) 104px;
  text-align:left;
}
.khr-csmore::before{
  content:'';
  display:block;
  height:1px;
  margin-bottom:44px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.05) 55%,
    rgba(255,255,255,0) 100%);
}
.khr-csmore-head{
  display:flex;
  align-items:baseline;
  gap:20px;
  margin-bottom:30px;
}
.khr-csmore-heading{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.02em;
  color:#fff;
  margin:0;
}
.khr-csmore-all{
  margin-left:auto;
  font-size:13.5px;
  font-weight:600;
  color:var(--khr-blue);
  text-decoration:none;
}
.khr-csmore-all:hover{ text-decoration:underline; }
.khr-csmore-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.khr-csmore .khr-more-card{
  display:block;
  padding:22px 22px 20px;
  border-radius:var(--khr-radius);
  border:1px solid var(--khr-hair);
  background:rgba(255,255,255,.035);
  text-decoration:none;
  transition:border-color .25s var(--khr-ease),
             background .25s var(--khr-ease),
             transform .25s var(--khr-ease);
}
.khr-csmore .khr-more-card:hover{
  border-color:rgba(255,255,255,.17);
  background:rgba(255,255,255,.055);
  transform:translateY(-2px);
}
.khr-more-stat{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-size:30px;
  font-weight:600;
  letter-spacing:-.03em;
  color:#fff;
  margin:0 0 12px;
}
.khr-more-stat span{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  line-height:1.3;
}
.khr-more-name{
  font-size:15px;
  font-weight:600;
  color:#fff;
  margin:0 0 4px;
}
.khr-more-kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
  margin:0;
}
@media (max-width:820px){
  .khr-csmore{ padding:64px var(--khr-gutter) 72px; }
  .khr-csmore-grid{ grid-template-columns:1fr; gap:12px; }
  .khr-more-stat{ font-size:26px; }
}

@media (max-width:820px){
  .khr-csx-quote{ font-size:16px; }
  .khr-csx-tile strong{ font-size:22px; }
}

/* ===============================================================
   32. Bort med etikettmanéret

   JetBrains Mono i versaler med spärr användes på sexton stallen som
   standardetikett. Det ar den mest utslitna "teknisk startup"-tics
   som finns och far sidan att se mallad ut. Mono far bara vara kvar
   dar det faktiskt ar maskindata: klockslag, datum, tider.

   Etiketter blir istallet gemener i brodtextsnittet. Sektionsmarkorer
   far signaturgradienten som streck, vilket ar Khrowns eget uttryck
   och inte nagon annans.
   =============================================================== */
.khr-mono-label,
.khr-chan-k,
.khr-csx-tile span,
.khr-more-label,
.khr-book-fr-label,
.khr-pain-eyebrow,
.hiw-step-eyebrow,
.khr-convo-bar,
.khr-booked-tag,
.khr-week-c,
.khr-csmore-kicker,
.khr-cmp-table thead th,
.khr-cmp-table td::before,
.ec-label{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

/* Sektionsmarkor: gradientstreck plus text, inte versaler */
.khr-pain-eyebrow,
.khr-book-fr-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px !important;
  font-weight:600 !important;
}
.khr-pain-eyebrow::before,
.khr-book-fr-label::before{
  content:'';
  width:26px; height:2px;
  border-radius:2px;
  background:var(--khr-sign);
  flex:0 0 auto;
}
.khr-pain-eyebrow{ color:rgba(255,255,255,.62) !important; }
.khr-book-fr-label{ color:rgba(255,255,255,.62) !important; }

/* Kolumnetiketter i flodet och kanalerna */
.khr-mono-label{ font-size:13px !important; color:rgba(255,255,255,.5) !important; }
.khr-chan-k{ font-size:12.5px !important; font-weight:600 !important; }
.hiw-step-eyebrow{ font-size:12.5px !important; font-weight:500 !important; }

/* Jamforelsens kolumnrubriker */
.khr-cmp-table thead th{
  font-size:13px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,.55) !important;
}
.khr-cmp-table thead th.is-us span{ letter-spacing:0 !important; font-size:13px; }
.khr-cmp-table td::before{ font-size:11.5px !important; }

/* Inkorgsmocken */
.khr-convo-bar{ font-size:12.5px !important; }
.khr-booked-tag{ font-size:11.5px !important; font-weight:600 !important; }

/* Mailetiketterna i steg 01 */
.khr-mailrow .ec-label{ font-size:12.5px !important; font-weight:600 !important; }

/* --- Case-korten: riktiga logotyper istallet for typade etiketter --- */
.khr-csx-logo,
.khr-more-logo{
  display:flex;
  align-items:center;
  height:30px;
  margin-bottom:20px;
}
/* Logotyperna kommer i tre olika skick, uppmatta ur filerna sjalva:
   Solavieve och Eigler ar redan nastan vita och ska inte roras.
   Appetite ar mellanton med genomskinlig botten och maste vitas.
   Diginauts ar en ogenomskinlig JPEG med nastan svart botten, sa den
   far screen-blandning som slapper igenom bakgrunden. */
.khr-csx-logo img,
.khr-more-logo img{
  max-height:30px;
  max-width:132px;
  width:auto;
  object-fit:contain;
  opacity:.9;
  transition:opacity .25s var(--khr-ease);
}
.khr-csx-logo img.is-mask,
.khr-more-logo img.is-mask{ filter:brightness(0) invert(1); opacity:.82; }
.khr-csx-logo img.is-screen,
.khr-more-logo img.is-screen{ mix-blend-mode:screen; }
.khr-csx-card:hover .khr-csx-logo img,
.khr-more-card:hover .khr-more-logo img{ opacity:1; }
.khr-more-logo{ height:24px; margin-bottom:16px; }
.khr-more-logo img{ max-height:24px; max-width:104px; }

.khr-more-stat{
  display:block;
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-size:34px;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  color:#fff;
  margin:0 0 5px;
}
.khr-more-label{
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.5);
  margin:0;
}

/* Statplattorna pa indexkorten */
.khr-csx-tile span{
  font-size:12px !important;
  color:rgba(255,255,255,.48) !important;
}

/* Ansiktet vid citatet. Ett namn med ett ansikte gar att kontrollera,
   ett namn i gra text gor det inte. */
.khr-csx-who{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  gap:12px;
  margin:0 0 20px;
}
.khr-csx-who img{
  width:42px; height:42px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);
}
.khr-csx-who div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.khr-csx-who strong{ font-size:14px; font-weight:600; color:#fff; }
.khr-csx-who span{ font-size:12.5px; color:rgba(255,255,255,.45); }

/* Carrd centrerar bilder globalt. I en flexrad blir portrattet da
   liggande mitt i kortet istallet for framfor namnet. */
.khr-csx-who img,
.khr-csx-logo img,
.khr-more-logo img{
  margin:0 !important;
}

/* Logotyperna hamnade pa 63x30, 30x30, 132x22 och 132x21, alltsa fyra
   olika optiska storlekar. Bredda marken och hall wordmarks lagre, sa
   de vager lika mycket i kortet. */
.khr-csx-logo{ height:38px; }
.khr-csx-logo img{ max-height:24px; max-width:146px; }
.khr-csx-logo img.is-screen{ max-height:38px; max-width:38px; }
.khr-csx-logo img.is-mask{ max-height:32px; max-width:118px; }

.khr-more-logo{ height:30px; }
.khr-more-logo img{ max-height:19px; max-width:116px; }
.khr-more-logo img.is-screen{ max-height:30px; max-width:30px; }
.khr-more-logo img.is-mask{ max-height:25px; max-width:96px; }

/* Ett tidigare block satte flex-direction:column pa samma klass. I en
   kolumn centrerar align-items:center i sidled, sa portratt och namn
   hamnade mitt i kortet. Riktningen satts explicit. */
.khr-csx-who{
  flex-direction:row !important;
  align-items:center;
}
.khr-csx-who > div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

/* ===============================================================
   33. Logotyperna i citatraden

   Varje logotyp hade en handsatt inline-hojd: 18, 28, 28, 40 och 52px.
   Resultatet var fem olika optiska storlekar. Appetites lockup ligger
   ratt, sa den far vara mattstock och wordmarksen vaxer ifatt.

   Tva av dem behover ocksa behandling for mork botten, uppmatt ur
   filerna: Appetite ar en mellanton med genomskinlig botten dar
   ordbilden forsvinner, Diginauts ar en ogenomskinlig JPEG med svart
   botten som annars ritar en svart ruta.
   =============================================================== */
.testimonial-card-logo{
  height:52px !important;
  min-height:52px !important;
  align-items:center;
}
.testimonial-card-logo img{
  width:auto !important;
  object-fit:contain;
}

/* Lockup: mark plus ordbild. Mattstocken. */
.testimonial-card-logo img[alt="Appetite Creative"]{
  height:50px !important;
  max-height:50px !important;
  filter:brightness(0) invert(1);
  opacity:.92;
}

/* Kvadratisk mark pa ogenomskinlig svart botten */
.testimonial-card-logo img[alt="Diginauts"]{
  height:46px !important;
  max-height:46px !important;
  mix-blend-mode:screen;
}

/* Rena ordbilder: laga och breda, sa de behover mer hojd for att vaga lika */
.testimonial-card-logo img[alt="SolaVieve"]{
  height:27px !important;
  max-height:27px !important;
}
.testimonial-card-logo img[alt="Eigler Communication"]{
  height:26px !important;
  max-height:26px !important;
}
.testimonial-card-logo img[alt="Einride"]{
  height:31px !important;
  max-height:31px !important;
  filter:invert(1);
}

/* Casesidorna hade 0 i toppmarginal efter att sektionsrubriken plockats
   bort, sa rubriken lag 12px under den fasta navbaren. Innehallet far
   samma luft mot toppen som ovriga sidor. */
.khr-cs{
  padding-top:76px !important;
  padding-bottom:24px !important;
}
@media (max-width:640px){
  .khr-cs{ padding-top:48px !important; }
}

/* ===============================================================
   34. Korten till ovriga case

   Forsta versionen var logotyp, siffra och etikett uppradade i ovre
   vanstra hornet, sa hela hogersidan stod tom och kortet blev en
   platthallare. Nu bar kortet samma sprak som indexkorten: logotyp
   och pil pa samma rad, talet som ankare, och kundens namn under en
   hairline sa man vet vilket case man ar pa vag till.
   =============================================================== */
.khr-csmore .khr-more-card{
  display:flex;
  flex-direction:column;
  padding:26px 26px 24px;
  position:relative;
  overflow:hidden;
}
.khr-csmore .khr-more-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:var(--khr-sign);
  opacity:0;
  transition:opacity .25s var(--khr-ease);
}
.khr-csmore .khr-more-card:hover::before{ opacity:1; }

.khr-more-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.khr-more-logo{ margin-bottom:0 !important; }

.khr-more-arrow{
  flex:0 0 auto;
  width:15px; height:15px;
  background:rgba(255,255,255,.4);
  transition:background .25s var(--khr-ease),
             transform .25s var(--khr-ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3.5L11.5 7 8 10.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3.5L11.5 7 8 10.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.khr-csmore .khr-more-card:hover .khr-more-arrow{
  background:var(--khr-blue);
  transform:translateX(3px);
}

.khr-csmore .khr-more-stat{
  font-size:40px;
  margin:0 0 6px;
}
.khr-csmore .khr-more-label{
  font-size:13.5px;
  color:rgba(255,255,255,.5);
  margin:0 0 18px;
}
.khr-csmore .khr-more-name{
  margin:auto 0 0;
  padding-top:16px;
  border-top:1px solid var(--khr-hair);
  font-size:14.5px;
  font-weight:600;
  color:#fff;
}
@media (max-width:820px){
  .khr-csmore .khr-more-stat{ font-size:34px; }
}

/* Logotyperna i korten var 52, 112 och 116px breda, alltsa samma
   obalans som citatraden hade. Samma behandling: marken far mer hojd,
   ordbilderna hallas lagre, sa de vager lika. */
.khr-more-logo{ height:36px !important; }
.khr-more-logo img{ max-height:22px !important; max-width:136px !important; }
.khr-more-logo img.is-screen{ max-height:36px !important; max-width:36px !important; }
.khr-more-logo img.is-mask{ max-height:36px !important; max-width:86px !important; }

/* ===============================================================
   35. Appetites logotyp skulle aldrig ha filtrerats

   Jag matte medelljusstyrkan i filen och fick 137, alltsa mellanton,
   och vitade den darfor. Medelvardet dolde att bilden bara har tva
   farger: cirkeln ar krappröd (192,0,48) och bade A:et i den och
   ordbilden ar redan nastan vita (240,240,240).

   brightness(0) invert(1) gjorde alltsa cirkeln vit, varpa det vita
   A:et forsvann in i den och kvar blev en vit klump. Utan filter
   fungerar logotypen som den ar mot mork botten.
   =============================================================== */
.khr-csx-logo img.is-lockup,
.khr-more-logo img.is-lockup{
  filter:none;
  opacity:.95;
}
.khr-csx-logo img.is-lockup{ max-height:34px; max-width:124px; }
.khr-more-logo img.is-lockup{ max-height:34px !important; max-width:112px !important; }

.testimonial-card-logo img[alt="Appetite Creative"]{
  filter:none;
  opacity:1;
}

/* Diginauts JPEG har en botten pa cirka 25/255, alltsa inte riktigt
   svart. mix-blend-mode:screen slapper darfor igenom en synlig ruta.
   contrast(2) kring mittpunkten trycker ner bottnen till aker svart
   ((0.098-0.5)*2+0.5 < 0) och behaller marken vit, sa screen tar bort
   rutan helt. */
.khr-csx-logo img.is-screen,
.khr-more-logo img.is-screen,
.testimonial-card-logo img[alt="Diginauts"]{
  filter:contrast(2);
}

/* ===============================================================
   36. En gemensam logotypruta

   Logotyperna har fyra olika proportioner: 2.1:1, 2.2:1, 5.9:1 och
   6.3:1. Samma hojd at alla gor ordbilderna dubbelt sa breda som
   kortet, samma bredd gor marken frimarksstora. Losningen ar en ruta
   av samma storlek at var och en, dar logotypen skalas sa stor den
   far plats. Da upptar de lika mycket, vilket ar det ogat laser som
   "samma storlek".

   Diginauts JPEG med svart botten ar ersatt av en genererad PNG med
   genomskinlig botten, sa den behover varken blandlage eller filter.
   =============================================================== */
.khr-csx-logo{
  height:48px !important;
  width:172px;
  display:flex;
  align-items:center;
  margin-bottom:24px !important;
}
.khr-csx-logo img,
.khr-csx-logo img.is-plain,
.khr-csx-logo img.is-lockup,
.khr-csx-logo img.is-screen{
  max-height:48px !important;
  max-width:172px !important;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:none;
  mix-blend-mode:normal;
  opacity:.95;
}

.khr-more-logo{
  height:38px !important;
  width:136px;
  display:flex;
  align-items:center;
}
.khr-more-logo img,
.khr-more-logo img.is-plain,
.khr-more-logo img.is-lockup,
.khr-more-logo img.is-screen{
  max-height:38px !important;
  max-width:136px !important;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:none;
  mix-blend-mode:normal;
}

/* Citatraden far samma princip */
.testimonial-card-logo{ height:56px !important; min-height:56px !important; }
.testimonial-card-logo img{
  max-height:56px !important;
  max-width:190px !important;
  height:auto !important;
  width:auto !important;
  object-fit:contain;
}
.testimonial-card-logo img[alt="Diginauts"]{
  filter:none;
  mix-blend-mode:normal;
}
.testimonial-card-logo img[alt="Einride"]{ filter:invert(1); }

/* Indexet slutade 40px under sista kortet och nasta block ("A
   side-by-side of your options") borjade direkt dar. Resten av sidan
   andas ungefar 100px mellan block, sa den far samma rytm. */
.khr-csx{ padding-bottom:104px !important; }
@media (max-width:820px){
  .khr-csx{ padding-bottom:72px !important; }
}

/* ===============================================================
   37. Jamforelsen som gantt

   Namnspalt till vanster, en gemensam ritsyta till hoger, och
   stodlinjer som binder varje datum lodratt genom alla tre spar.
   Linjen vid dag 60 ar betonad: det ar ogonblicket da vi ar klara
   och de andra tva inte ens ar halvvags.

   Alla regler ligger under .kv eftersom embedden bar en universell
   nollstallning (.kv * { margin:0; padding:0 }) som annars vinner.
   =============================================================== */
.kv .kv2{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:96px var(--khr-gutter) 104px;
  text-align:left;
}
.kv .kv2-heading{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(25px,2.6vw,38px);
  line-height:1.1;
  letter-spacing:-.022em;
  color:#fff;
  margin:0 0 12px;
}
.kv .kv2-heading em{ font-style:normal; font-weight:500; color:var(--khr-blue); }
.kv .kv2-lead{
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.55);
  max-width:40em;
  margin:0 0 48px;
}

/* --- Diagrammet ------------------------------------------------- */
.kv .kv2-chart{
  position:relative;
  padding-bottom:6px;
}
.kv .kv2-row{
  display:grid;
  grid-template-columns:190px 1fr;
  column-gap:26px;
  align-items:center;
}
.kv .kv2-row + .kv2-row{ margin-top:14px; }
.kv .kv2-axisrow{ margin-bottom:18px; }
.kv .kv2-rowname{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-size:16.5px;
  font-weight:600;
  letter-spacing:-.015em;
  color:rgba(255,255,255,.66);
  line-height:1.3;
}
.kv .kv2-row.is-us .kv2-rowname{ color:#fff; }
.kv .kv2-rowname em{
  display:block;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-style:normal;
  font-size:12.5px;
  font-weight:400;
  color:rgba(255,255,255,.38);
  margin-top:2px;
}
.kv .kv2-rowplot{ position:relative; }

/* Stodlinjerna: ett lager som ligger bakom alla staplar men bara
   over ritsytan, alltsa till hoger om namnspalten. */
.kv .kv2-gridlayer{
  position:absolute;
  top:0; bottom:0;
  left:216px; right:0;
  pointer-events:none;
}
.kv .kv2-line{
  position:absolute;
  top:26px; bottom:0;
  width:1px;
  background:rgba(255,255,255,.07);
}
.kv .kv2-line.is-hot{
  width:2px;
  background:linear-gradient(180deg,
    rgba(52,211,153,.55) 0%,
    rgba(52,211,153,.14) 100%);
}

/* Axelraden */
.kv .kv2-axis{ height:26px; }
.kv .kv2-tick{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,.42);
}
.kv .kv2-tick:first-child{ transform:none; }
.kv .kv2-tick:last-child{ transform:translateX(-100%); }
.kv .kv2-tick.is-hot{
  color:#34d399;
  font-weight:600;
}

/* Staplarna */
.kv .kv2-bar{
  position:relative;
  height:46px;
  border-radius:11px;
  background:rgba(255,255,255,.028);
}
.kv .kv2-seg{
  position:absolute;
  top:0; bottom:0;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:11px;
  overflow:hidden;
  transform-origin:left center;
  transition:transform 1.05s var(--khr-ease);
}
.kv .kv2-seg span{
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  transition:opacity .4s var(--khr-ease);
}
.kv .kv2-row.is-us .kv2-seg-0{
  background:rgba(47,107,255,.22);
  border:1px solid rgba(47,107,255,.4);
}
.kv .kv2-row.is-us .kv2-seg-0 span{ color:#cfe0ff; }
.kv .kv2-row.is-us .kv2-seg-1{ background:var(--khr-sign); }
.kv .kv2-row.is-us .kv2-seg-1 span{ color:#04210f; font-weight:600; }
.kv .kv2-row:not(.is-us) .kv2-seg{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}
.kv .kv2-row:not(.is-us) .kv2-seg span{ color:rgba(255,255,255,.5); }

/* Slutskyltarna */
.kv .kv2-done{
  position:absolute;
  top:50%;
  transform:translate(16px,-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:13px;
  font-weight:600;
  color:#34d399;
  transition:opacity .5s var(--khr-ease), transform .5s var(--khr-ease);
}
.kv .kv2-done i{
  width:16px; height:16px;
  border-radius:50%;
  background:#34d399;
  position:relative;
}
.kv .kv2-done i::after{
  content:'';
  position:absolute;
  left:5px; top:3px;
  width:4px; height:8px;
  border:solid #06281c;
  border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.kv .kv2-fail{
  position:absolute;
  top:50%; right:14px;
  transform:translateY(-50%);
  white-space:nowrap;
  font-size:12.5px;
  font-weight:500;
  color:rgba(255,255,255,.48);
  transition:opacity .5s var(--khr-ease);
}

/* Hovra ett spar sa dampas de andra: jamforelsen pekas ut av handen */
.kv .kv2-chart:hover .kv2-row:not(.kv2-axisrow){ opacity:.45; transition:opacity .25s var(--khr-ease); }
.kv .kv2-chart:hover .kv2-row:hover{ opacity:1; }
.kv .kv2-row:not(.kv2-axisrow){ transition:opacity .25s var(--khr-ease); }

/* --- Under diagrammet ------------------------------------------- */
.kv .kv2-below{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:40px;
  margin-top:44px;
  padding-top:34px;
  border-top:1px solid var(--khr-hair);
}
.kv .kv2-below-h{
  font-size:13.5px;
  font-weight:600;
  color:rgba(255,255,255,.62);
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.kv .kv2-below-h::before{
  content:'';
  width:26px; height:2px;
  border-radius:2px;
  background:var(--khr-sign);
}
.kv .kv2-steps{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.kv .kv2-step{ min-width:0; }
.kv .kv2-step-d{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:#fff;
  margin-bottom:4px;
}
.kv .kv2-step-t{
  display:block;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.5);
}
.kv .kv2-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0; padding:0;
}
.kv .kv2-chip{
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(47,107,255,.32);
  background:rgba(47,107,255,.08);
  font-size:12.5px;
  color:rgba(255,255,255,.78);
}

.kv .kv2-foot{
  margin:36px 0 0;
  padding-top:24px;
  border-top:1px solid var(--khr-hair);
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.5);
}
.kv .kv2-foot strong{ color:#fff; font-weight:600; }

/* --- Koreografin ------------------------------------------------ */
.kv .kv2.is-armed .kv2-line{ opacity:0; }
.kv .kv2.is-armed .kv2-tick{ opacity:0; }
.kv .kv2.is-armed .kv2-seg{ transform:scaleX(0); }
.kv .kv2.is-armed .kv2-seg span{ opacity:0; }
.kv .kv2.is-armed .kv2-done{ opacity:0; transform:translate(24px,-50%); }
.kv .kv2.is-armed .kv2-fail{ opacity:0; }
.kv .kv2.is-armed .kv2-step{ opacity:0; transform:translateY(8px); }
.kv .kv2.is-armed .kv2-chip{ opacity:0; transform:translateY(6px); }
.kv .kv2.is-armed .kv2-below-h{ opacity:0; }

.kv .kv2.is-run .kv2-line{ opacity:1; }
.kv .kv2.is-run .kv2-tick{ opacity:1; }
.kv .kv2.is-run .kv2-seg{ transform:scaleX(1); }
.kv .kv2.is-run .kv2-seg span{ opacity:1; }
.kv .kv2.is-run .kv2-done{ opacity:1; transform:translate(16px,-50%); }
.kv .kv2.is-run .kv2-fail{ opacity:1; }
.kv .kv2.is-run .kv2-step{ opacity:1; transform:none; }
.kv .kv2.is-run .kv2-chip{ opacity:1; transform:none; }
.kv .kv2.is-run .kv2-below-h{ opacity:1; }

/* Ordningen: linjer och axel, sedan spar 0, 1, 2, sist berattelsen */
.kv .kv2-line{ transition:opacity .5s var(--khr-ease); }
.kv .kv2-tick{ transition:opacity .5s var(--khr-ease); }
.kv .kv2-line:nth-child(2), .kv .kv2-tick:nth-child(2){ transition-delay:.07s; }
.kv .kv2-line:nth-child(3), .kv .kv2-tick:nth-child(3){ transition-delay:.14s; }
.kv .kv2-line:nth-child(4), .kv .kv2-tick:nth-child(4){ transition-delay:.21s; }
.kv .kv2-line:nth-child(5), .kv .kv2-tick:nth-child(5){ transition-delay:.28s; }

.kv .kv2-row{ --kv2-base:calc(.3s + var(--kv2-i,0) * .45s); }
.kv .kv2-seg{ transition-delay:var(--kv2-base); }
.kv .kv2-seg-1{ transition-delay:calc(var(--kv2-base) + .26s); }
.kv .kv2-seg span{ transition-delay:calc(var(--kv2-base) + .55s); }
.kv .kv2-done,
.kv .kv2-fail{ transition-delay:calc(var(--kv2-base) + .85s); }

.kv .kv2-step,
.kv .kv2-chip,
.kv .kv2-below-h{
  transition:opacity .45s var(--khr-ease), transform .45s var(--khr-ease);
}
.kv .kv2-below-h{ transition-delay:1.9s; }
.kv .kv2-step:nth-child(1){ transition-delay:2s; }
.kv .kv2-step:nth-child(2){ transition-delay:2.12s; }
.kv .kv2-step:nth-child(3){ transition-delay:2.24s; }
.kv .kv2-chip:nth-child(1){ transition-delay:2.05s; }
.kv .kv2-chip:nth-child(2){ transition-delay:2.15s; }
.kv .kv2-chip:nth-child(3){ transition-delay:2.25s; }
.kv .kv2-chip:nth-child(4){ transition-delay:2.35s; }

/* --- Smalare fonster -------------------------------------------- */
@media (max-width:900px){
  .kv .kv2{ padding:64px var(--khr-gutter) 72px; }
  .kv .kv2-row{
    grid-template-columns:1fr;
    row-gap:8px;
  }
  .kv .kv2-row + .kv2-row{ margin-top:22px; }
  .kv .kv2-rowname em{ display:inline; margin-left:8px; }
  .kv .kv2-gridlayer{ display:none; }
  .kv .kv2-axisrow .kv2-rowname{ display:none; }
  .kv .kv2-seg span{ display:none; }
  .kv .kv2-done{ font-size:12px; }
  .kv .kv2-fail{ font-size:11.5px; }
  .kv .kv2-below{ grid-template-columns:1fr; gap:30px; }
  .kv .kv2-steps{ grid-template-columns:1fr; gap:14px; }
}

/* ===============================================================
   38. Resan i mailsektionen

   En lodrat rals genom 01, 02, 03 som fylls med gradienten i takt
   med rullningen. Brickan tands nar fyllnaden nar den, sa man ser
   sig sjalv fardas fran mailet, via svaret, till motet.
   =============================================================== */
.khr-journey .khr-show-inner{ position:relative; }
.khr-rail{
  position:absolute;
  width:2px;
  border-radius:2px;
  background:rgba(255,255,255,.07);
  pointer-events:none;
  z-index:0;
}
/* Dammpningen (opacity .55) gor varje steg till en egen stacking
   context, och ralsen lag sist i DOM och ritades da over hela steget,
   sifferbrickan inklusive. Stegen lyfts explicit over ralsen; brickans
   taeckande botten gor resten. */
.khr-journey .khr-step{
  position:relative;
  z-index:1;
}
.khr-rail-fill{
  width:100%;
  height:0;
  border-radius:2px;
  background:linear-gradient(180deg,#2f6bff 0%,#0aa387 58%,#34d399 100%);
  box-shadow:0 0 14px rgba(47,107,255,.35);
}
/* Brickorna ligger over ralsen och tands nar den nar dem */
/* Brickorna blir stationer pa ralsen: cirklar med linjen genom
   mitten, som pa en tunnelbanekarta. Solid botten tacker ralsen,
   sa linjen kan aldrig ga genom siffran. Nadd station far en
   gradientring och gloden vandrar med. */
.khr-journey .khr-step-num{
  position:relative;
  z-index:1;
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  background:#0c0d10;
  transition:border-color .35s var(--khr-ease),
             color .35s var(--khr-ease),
             box-shadow .35s var(--khr-ease);
}
.khr-journey .khr-step-num::after{ content:none; }
.khr-journey .khr-step-num.is-lit{
  border-color:transparent;
  color:#fff;
  box-shadow:0 0 26px rgba(47,107,255,.3);
}
/* Gradientringen ritas som en egen yta bakom en solid kärna, sa
   ringen kan barä hela signaturgradienten utan border-image-trubbel */
.khr-journey .khr-step-num.is-lit::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:50%;
  padding:2px;
  background:var(--khr-sign);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
/* Steget som annu inte ar natt ligger nagot nedtonat, sa resan har
   en riktning aven i stillbild */
.khr-journey .khr-step{
  transition:opacity .45s var(--khr-ease);
}
.khr-journey .khr-step:has(.khr-step-num:not(.is-lit)){ opacity:.55; }
.khr-journey .khr-step:has(.khr-step-num.is-lit){ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .khr-journey .khr-step{ opacity:1 !important; }
}

/* Ralsen loper i en egen vanster fil. Stegens innehall indenteras
   forbi den, i linje med stegrubrikerna, annars hade linjen korsat
   mailkorten pa vagen mellan brickorna. */
.khr-journey .khr-step-body{ margin-left:66px; }
.khr-journey .khr-replyrow{ max-width:786px; }
@media (max-width:700px){
  .khr-rail{ display:none; }
  .khr-journey .khr-step-body{ margin-left:0; }
  .khr-journey .khr-step{ opacity:1 !important; }
}

/* ROI-sidan: rubrik och ingress ovanfor verktyget. Sidan var annars
   en ensam iframe fran en annan origin, alltsa utan egen text att
   indexera och utan nagon ingang for lasaren. */
.khr-roi-intro{
  max-width:var(--khr-container);
  margin:0 auto;
  padding:136px var(--khr-gutter) 0;
  text-align:left;
}
/* Iframen bar tidigare en egen hjalterubrik, sa den har halls liten for
   att inte slass med den. Appen ar nu inbyggd och har ingen. Sidrubriken
   tar over rollen. */
.khr-roi-intro h1{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(30px,4.3vw,48px);
  line-height:1.08;
  letter-spacing:-.025em;
  color:#fff;
  margin:0 0 16px;
  max-width:17em;
}
.khr-roi-intro p{
  font-size:16.5px;
  line-height:1.65;
  color:rgba(255,255,255,.6);
  max-width:46em;
  margin:0;
}
@media (max-width:900px){
  .khr-roi-intro{ padding:124px var(--khr-gutter) 0; }
  .khr-roi-intro h1{ font-size:clamp(25px,6.6vw,34px); margin-bottom:13px; }
  .khr-roi-intro p{ font-size:15px; line-height:1.6; }
}

/* ---------------------------------------------------------------
   39. Bakgrund: bas + ambient + grain
   Carrds embed-CSS ligger i <body> och vinner pa dokumentordning vid
   samma specificitet. Darfor `html body`, inte bara `body`.
   --------------------------------------------------------------- */
html body{ background-color:var(--khr-bg) !important; }

html body::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 62% 48% at 78% 8%,
      rgba(var(--khr-glow),.20) 0%, rgba(var(--khr-glow),0) 60%),
    linear-gradient(200deg,
      rgba(7,11,20,.90) 0%,
      rgba(8,13,24,.95) 58%,
      rgba(17,38,88,.62) 100%),
    url('/assets/images/bg.jpg') !important;
  background-size:200px 200px, cover, cover, cover !important;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat !important;
  background-position:0 0, center, center, center !important;
}

/* ---------------------------------------------------------------
   40. ROI-kalkylator (nativ)
   Ersatter iframen. Carrds embed-CSS nollstaller marginaler brett,
   sa allt som ska halla ett matt sags ut explicit har.
   --------------------------------------------------------------- */
.khr-roi{ padding:96px 0 8px !important; }
.khr-roi-wrap,
.khr-roi-head{
  max-width:var(--khr-container);
  margin:0 auto !important;
  padding-left:var(--khr-gutter) !important;
  padding-right:var(--khr-gutter) !important;
}
.khr-roi-head{ margin-bottom:36px !important; }
.khr-roi-head .khr-roi-title{ max-width:17em; }
.khr-roi-head .khr-roi-sub{ max-width:46em; }
.khr-roi-title{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-weight:600 !important;
  font-size:clamp(28px,3.4vw,42px) !important;
  line-height:1.1 !important;
  letter-spacing:-.02em !important;
  color:#fff !important;
  margin:0 0 14px !important;
  text-align:left !important;
}
.khr-roi-sub{
  font-size:16.5px !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,.62) !important;
  margin:0 !important;
  text-align:left !important;
}

.khr-roi-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
}
.khr-roi-card{
  background:linear-gradient(180deg,
    rgba(255,255,255,.055) 0%, rgba(255,255,255,.022) 100%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:24px 24px 26px !important;
  backdrop-filter:blur(2px);
}
.khr-roi-cardhead{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin:0 0 22px !important;
}
.khr-roi-cardhead h3{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  color:#fff !important;
  margin:0 !important;
}

/* Valutavaljare */
.khr-roi-curs{ display:flex; gap:2px; padding:3px;
  background:rgba(0,0,0,.28); border-radius:9px; }
.khr-roi-cur{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:12.5px !important; line-height:1 !important;
  color:rgba(255,255,255,.5) !important;
  background:none; border:0; cursor:pointer;
  padding:6px 9px !important; border-radius:7px;
  transition:background .18s ease, color .18s ease;
}
.khr-roi-cur:hover{ color:rgba(255,255,255,.85) !important; }
.khr-roi-cur.is-on{
  background:rgba(255,255,255,.11); color:#fff !important; }

/* Reglage */
.khr-roi-inputs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:34px; row-gap:0;
  align-items:start;
}
.khr-roi-inputs .khr-roi-cardhead{ grid-column:1 / -1; }
.khr-roi-inputs .khr-roi-field{ margin:0 !important; }
.khr-roi-field:last-child{ margin-bottom:0 !important; }
.khr-roi-frow{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:0 0 10px !important;
}
.khr-roi-frow label{
  font-size:13.5px !important; line-height:1.35 !important;
  color:rgba(255,255,255,.72) !important;
}
.khr-roi-val{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:15px !important; color:#fff !important;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.khr-roi-hint{
  font-size:12.5px !important; line-height:1.45 !important;
  color:rgba(255,255,255,.38) !important;
  margin:9px 0 0 !important;
}
.khr-roi-range{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:28px;
  margin:0 !important; padding:0 !important;
  cursor:pointer; background:transparent;
  touch-action:pan-y;
}
/* Sjalva linjen ritas pa spartet, inte som bakgrund pa inputen. WebKit
   placerar knappen mot spartet, sa ritas linjen nagon annanstans hamnar
   de pa olika hojd. Elementet ar 28px for tummens skull, spartet 5px. */
.khr-roi-range::-webkit-slider-runnable-track{
  height:5px; border:0; border-radius:99px;
  background:linear-gradient(90deg,
    var(--khr-blue) 0%, #5BA4F5 var(--fill,50%),
    rgba(255,255,255,.11) var(--fill,50%), rgba(255,255,255,.11) 100%);
}
.khr-roi-range::-moz-range-track{
  height:5px; border:0; border-radius:99px;
  background:linear-gradient(90deg,
    var(--khr-blue) 0%, #5BA4F5 var(--fill,50%),
    rgba(255,255,255,.11) var(--fill,50%), rgba(255,255,255,.11) 100%);
}
.khr-roi-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:17px; height:17px; border-radius:50%;
  margin-top:-6px;
  background:#fff; border:0; cursor:grab;
  box-shadow:0 0 0 4px rgba(47,107,255,.28), 0 2px 6px rgba(0,0,0,.45);
  transition:box-shadow .18s ease;
}
.khr-roi-range::-webkit-slider-thumb:active{ cursor:grabbing;
  box-shadow:0 0 0 7px rgba(47,107,255,.34), 0 2px 6px rgba(0,0,0,.45); }
.khr-roi-range::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%;
  background:#fff; border:0; cursor:grab;
  box-shadow:0 0 0 4px rgba(47,107,255,.28);
}
.khr-roi-range:focus-visible{ outline:2px solid var(--khr-blue);
  outline-offset:6px; }

/* Scenarier */
.khr-roi-scen{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:7px; margin:0 0 24px !important;
}
.khr-roi-tab{
  display:flex; flex-direction:column; gap:3px;
  text-align:left; cursor:pointer;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:11px 11px 12px !important;
  transition:background .18s ease, border-color .18s ease;
}
.khr-roi-tab:hover{ background:rgba(255,255,255,.07); }
.khr-roi-tab.is-on{
  background:rgba(47,107,255,.15);
  border-color:rgba(47,107,255,.55);
}
.khr-roi-tabn{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:19px !important; line-height:1 !important; color:#fff !important;
}
.khr-roi-tabl{
  font-size:12px !important; line-height:1.25 !important;
  color:rgba(255,255,255,.82) !important;
}
.khr-roi-tabc{
  font-size:10.5px !important; line-height:1.25 !important;
  color:rgba(255,255,255,.42) !important;
}

/* Tratt */
.khr-roi-stage{ margin:0 0 4px !important; }
.khr-roi-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; min-width:0;
  border-radius:11px; padding:14px 16px !important;
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.khr-roi-stage.is-1 .khr-roi-bar{
  background:linear-gradient(90deg,
    rgba(91,164,245,.26), rgba(91,164,245,.09));
  border-left:2px solid #5BA4F5;
}
.khr-roi-stage.is-2 .khr-roi-bar{
  background:linear-gradient(90deg,
    rgba(47,107,255,.28), rgba(47,107,255,.09));
  border-left:2px solid var(--khr-blue);
}
.khr-roi-stage.is-3 .khr-roi-bar{
  background:linear-gradient(90deg,
    rgba(52,211,153,.26), rgba(52,211,153,.08));
  border-left:2px solid #34D399;
}
.khr-roi-slabel{
  font-size:12.5px !important; line-height:1.3 !important;
  color:rgba(255,255,255,.76) !important;
}
.khr-roi-snum{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-weight:600 !important; font-size:23px !important;
  line-height:1 !important; color:#fff !important;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.khr-roi-sdetail{
  display:block; font-size:11.5px !important;
  color:rgba(255,255,255,.4) !important;
  margin:7px 0 0 16px !important;
}
.khr-roi-op{
  display:flex; align-items:center; gap:10px;
  margin:9px 0 9px 16px !important;
}
.khr-roi-op::before{
  content:''; width:1px; height:15px;
  background:rgba(255,255,255,.18);
}
.khr-roi-op span{
  font-size:11.5px !important;
  color:rgba(255,255,255,.46) !important;
}

/* Jamforelse */
.khr-roi-compare{ margin-top:18px !important; }
.khr-roi-expect{
  display:flex; flex-direction:column; gap:5px;
  align-items:flex-start; text-align:left !important;
  padding:0 0 22px !important; margin:0 0 22px !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.khr-roi-elabel{
  font-size:13px !important; color:rgba(255,255,255,.6) !important; }
.khr-roi-enum{
  font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important;
  font-weight:600 !important;
  font-size:clamp(32px,4.6vw,52px) !important;
  line-height:1 !important; letter-spacing:-.025em !important;
  color:#34D399 !important; font-variant-numeric:tabular-nums;
}
.khr-roi-esub{
  font-size:13px !important; color:rgba(255,255,255,.44) !important; }

.khr-roi-brow{
  display:grid; grid-template-columns:78px 1fr auto;
  align-items:center; gap:14px; padding:7px 0 !important;
  opacity:.55; transition:opacity .2s ease;
}
.khr-roi-brow.is-on{ opacity:1; }
.khr-roi-bname{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:13px !important; color:#fff !important;
}
.khr-roi-bname em{
  font-style:normal; color:rgba(255,255,255,.38) !important;
  font-size:11px !important;
}
.khr-roi-btrack{
  display:block; height:8px; border-radius:99px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.khr-roi-bfill{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--khr-blue),#34D399);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.khr-roi-bval{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:12.5px !important; color:rgba(255,255,255,.8) !important;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.khr-roi-note{
  text-align:left !important;
  font-size:12px !important; line-height:1.5 !important;
  color:rgba(255,255,255,.36) !important;
  margin:20px 0 0 !important;
}

@media (max-width:900px){
  .khr-roi{ padding:64px 0 8px !important; }
  .khr-roi-scen{ grid-template-columns:repeat(2,1fr); }
  .khr-roi-brow{ grid-template-columns:64px 1fr; }
  .khr-roi-bval{ grid-column:2; text-align:right; }
}
@media (prefers-reduced-motion:reduce){
  .khr-roi-bar,.khr-roi-bfill{ transition:none; }
}

/* ---------------------------------------------------------------
   41. Ambient ljus per sektion
   data-amb sats av initAmbient(). Sex platser som roterar, sa ljuset
   vandrar nedat sidan istallet for att sta still bakom allt.

   Ellipserna MASTE tona ut innan blockets over- och underkant. En
   gradient som fortfarande har farg vid kanten ger ett hart hopp mot
   nasta block, och det last som en linje tvars over sidan. Darfor
   ligger alla vertikalt pa 50% och radien x sista stoppet halls under
   50%, sa fargen ar slut nar kanten nas. Bara x-led varieras.
   --------------------------------------------------------------- */
[data-amb]{ background-repeat:no-repeat; }
[data-amb="0"]{ background-image:radial-gradient(ellipse 58% 72% at 14% 50%,
  rgba(47,107,255,.11) 0%, rgba(47,107,255,0) 68%); }
[data-amb="1"]{ background-image:radial-gradient(ellipse 54% 68% at 88% 50%,
  rgba(45,190,190,.075) 0%, rgba(45,190,190,0) 68%); }
[data-amb="2"]{ background-image:radial-gradient(ellipse 60% 70% at 28% 50%,
  rgba(92,86,255,.095) 0%, rgba(92,86,255,0) 68%); }
[data-amb="3"]{ background-image:radial-gradient(ellipse 56% 68% at 76% 50%,
  rgba(47,107,255,.10) 0%, rgba(47,107,255,0) 68%); }
[data-amb="4"]{ background-image:radial-gradient(ellipse 64% 72% at 50% 50%,
  rgba(52,211,153,.055) 0%, rgba(52,211,153,0) 68%); }
[data-amb="5"]{ background-image:radial-gradient(ellipse 58% 68% at 10% 50%,
  rgba(70,96,220,.09) 0%, rgba(70,96,220,0) 68%); }

/* ---------------------------------------------------------------
   42. Mobil: tryckytor och lasbarhet
   iOS vill ha ~44px att sikta pa. Text under 12px blir grot pa en
   telefon aven om den ar precis lagom pa en 27-tums skarm.
   --------------------------------------------------------------- */
@media (max-width:640px){
  .khr-roi-card{ padding:19px 17px 21px !important; }
  .khr-roi-inputs{ grid-template-columns:1fr; row-gap:24px; }
  .khr-roi-cardhead{ margin-bottom:18px !important; }

  .khr-roi-cur{ padding:10px 14px !important; font-size:13.5px !important;
                min-height:36px; }
  .khr-roi-curs{ padding:3px; }

  .khr-roi-field{ margin-bottom:24px !important; }
  .khr-roi-frow label{ font-size:13px !important; }
  .khr-roi-hint{ font-size:12px !important; }
  .khr-roi-range::-webkit-slider-thumb{
    width:22px; height:22px; margin-top:-8.5px; }
  .khr-roi-range::-moz-range-thumb{ width:22px; height:22px; }

  .khr-roi-tabl{ font-size:12.5px !important; }
  .khr-roi-tabc{ font-size:11.5px !important; }
  .khr-roi-tab{ padding:12px 12px 13px !important; }

  .khr-roi-bar{ padding:13px 14px !important; gap:10px; }
  .khr-roi-slabel{ font-size:12px !important; }
  .khr-roi-snum{ font-size:20px !important; }
  .khr-roi-sdetail{ font-size:11.5px !important; }
  .khr-roi-op span{ font-size:12px !important; }

  .khr-roi-note{ font-size:12.5px !important; }
  .khr-roi-esub,.khr-roi-elabel{ font-size:13px !important; }

  /* Ovrig minitext som blir for lat att lasa i handen. */
  .khr-eyebrow{ font-size:11.5px !important; }
  .khr-ada-tag,.khr-wg-ev-o,.khr-founded{ font-size:12px !important; }

  /* Cirkeln i CTA:n stack ut 3px utanfor viewporten. */
  .khr-ada-cta{ max-width:100% !important; }
}

/* Carrd centrerar text pa flera nivaer. Kalkylatorn ar vansterstalld
   rakt igenom, sa arvet bryts en gang har. */
.khr-roi,.khr-roi-wrap,.khr-roi-head,.khr-roi-intro,
.khr-roi *:not(.khr-roi-tabn):not(.khr-roi-snum){
  text-align:left;
}
.khr-roi-hint,.khr-roi-frow label,.khr-roi-sdetail,
.khr-roi-elabel,.khr-roi-esub{ text-align:left !important; }
@media (max-width:900px) and (min-width:641px){
  .khr-roi-inputs{ grid-template-columns:repeat(2,minmax(0,1fr));
                   row-gap:24px; }
}

/* ---------------------------------------------------------------
   43. Omdomen pa telefon: svep istallet for marquee
   En marquee pa 375px blir en smal remsa som drar forbi for fort att
   lasa. Raden blir darfor ett svepbart sparr med snappunkter, och
   dubbletterna (som bara finns for att loopen ska se andlos ut) doljs
   sa samma citat inte dyker upp tva ganger.
   --------------------------------------------------------------- */
.khr-tst-dots{ display:none; }

@media (max-width:640px){
  .testimonial-wall{
    width:100vw !important;
    margin-left:50% !important;
    margin-right:0 !important;
    transform:translateX(-50%) !important;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    /* Kantmasken skulle tona bort just det kort man snappat till. */
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .testimonial-wall::-webkit-scrollbar{ display:none; }

  .khr-tst-track{
    animation:none !important;
    transform:none !important;
    will-change:auto;
    gap:14px;
    /* 8vw i sidled centrerar forsta och sista kortet mot snappunkten. */
    padding:0 8vw !important;
  }
  .khr-tst-track > [aria-hidden="true"]{ display:none !important; }

  .testimonial-card{
    flex:0 0 84vw !important;
    width:84vw !important;
    max-width:none !important;
    scroll-snap-align:center;
    padding:34px 22px 22px !important;
  }

  .khr-tst-dots{
    display:flex;
    justify-content:center;
    gap:7px;
    margin:22px 0 0 !important;
    padding:0 !important;
  }
  .khr-tst-dot{
    width:7px; height:7px; padding:0 !important;
    border:0; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,.22);
    transition:background .2s ease, width .2s ease;
  }
  .khr-tst-dot.is-on{ width:20px; border-radius:99px; background:var(--khr-blue); }
  /* Tryckytan far vara storre an pricken utan att flytta den. */
  .khr-tst-dot::after{
    content:''; position:absolute;
    inset:-14px -6px;
  }
  .khr-tst-dot{ position:relative; }
}

/* ---------------------------------------------------------------
   44. Portrattet i bokningsrutan
   Bilden ar opak, sa plattan ar inbakad i filen istallet for i CSS.
   Har ligger bara storleken pa liten skarm.
   --------------------------------------------------------------- */
@media (max-width:640px){
  .khr-book-founder{ gap:16px !important; }
  .khr-book-founder-img{ width:76px !important; height:76px !important; }
  .khr-book-founder-name{ font-size:19px !important; }
}