/* Formprov D, variant B: natten som ett flöde (flod.html, flod.js).
   Fotot och dygnsklockan står i ett lager som står still bakom heron och berättelsen (position: sticky). Texten och
   produktbitarna scrollar som vanligt ovanpå. På dator står slagen i
   en spalt till vänster på en mörk toning, och fönstret syns till höger. På mobil står fotot överst och slagen
   kommer upp på en panel, med en bit tomt foto mellan slagen där fotot hinner tona över till nästa tid. Lagret står i
   ett spår (.flod-spar) lika högt som flödet, så att det släpper där flödet slutar. */
.flod { position: relative; background: var(--natt); }
.flod-spar { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.flod-lager { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--natt); transition: background-color .8s ease; }
.flod-lager.ljus { background: var(--morgon); }
.flod > section { position: relative; z-index: 1; }
.flod-aktiv .flod .start-hero, .flod-aktiv .flod-berattelse { background: transparent; }
.flod-aktiv .flod .hero-bild { visibility: hidden; }
.flod-intro, .flod-zoom { position: absolute; inset: 0; }
.flod-zoom { will-change: transform; }
.flod-aktiv:not(.flod-still) .flod-intro { animation: scen-in 12s cubic-bezier(.16, .84, .3, 1) both; }
.flod-bild { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.flod-bild img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.flod-bild img:first-child, .flod-bild .flod-slackt { opacity: 1; }
.flod-bild .flod-slackt { transition: opacity 2s ease-in-out; }
.flod-bild .flod-slackt.tand { opacity: 0; }
.flod-glod {
  position: absolute; width: calc(var(--r, 60px) * 2); height: calc(var(--r, 60px) * 2); margin: calc(var(--r, 60px) * -1) 0 0 calc(var(--r, 60px) * -1);
  border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .5), rgba(255, 170, 90, .16) 55%, rgba(255, 170, 90, 0));
}
/* Dator: en mörk toning till vänster bakom spalten, och en ljus i morgonen. */
.flod-toning { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(10, 22, 32, .92) 0, rgba(10, 22, 32, .86) 48%, rgba(10, 22, 32, 0) 68%); }
.flod-toning-ljus { background: linear-gradient(90deg, rgba(241, 245, 243, .94) 0, rgba(241, 245, 243, .88) 48%, rgba(241, 245, 243, 0) 68%); }
.flod-toning-hoger { background: linear-gradient(270deg, rgba(10, 22, 32, .92) 0, rgba(10, 22, 32, .86) 48%, rgba(10, 22, 32, 0) 68%); }
/* På slutet tonar fotot mot morgonens ton, som "Tre delar" fortsätter i. */
.flod-morgon { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; opacity: 0; background: linear-gradient(rgba(241, 245, 243, 0), var(--morgon)); }
/* Dygnsklockan uppe till höger. Formen och färgerna kommer från start.css (.dygn, .dygn-tid). */
.flod-klocka { position: absolute; top: calc(var(--sidhuvud) + 20px); right: 24px; display: flex; align-items: center; gap: 10px; opacity: 0; }
.flod-klocka .dygn, .flod-klocka .dygn-tid { position: static; opacity: 1; will-change: auto; }
.flod-klocka .dygn { width: 64px; height: 64px; }
.flod-klocka .dygn-oppet { stroke-width: 12; }
.flod-klocka .dygn-nu { r: 15; }
.flod-klocka .dygn-tid { font-size: 16px; }

/* Slagen. Spaltens vänsterkant är --spalt, och tråden går i marginalen till vänster om den. Varje slag börjar med
   sin tid, som står vid en punkt på tråden. */
/* Slagen växlar mellan vänster och höger (.flod-hoger), så att varje slag får sin plats och tråden svänger över
   fotot mellan dem. --spalt-hoger är vänsterkanten för en spalt som slutar lika långt från högerkanten som heronas text
   börjar från vänster. Procenten räknas mot hela bredden där variablerna används. */
.flod {
  --spalt: max(calc(var(--gutter) + 36px), calc((100% - var(--max)) / 2 + var(--gutter) + 36px));
  --spalt-hoger: calc(100% - max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) - min(36rem, 44vw));
}
/* Heronas mörka nederkant fortsätter en bit ned i berättelsen och tonar ut, så att ingen kant syns. */
.flod-berattelse::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55svh; z-index: -1; pointer-events: none; background: linear-gradient(rgba(6, 14, 22, .9), rgba(6, 14, 22, .55) 40%, rgba(6, 14, 22, 0)); }
.flod-berattelse { padding: 0 0 8svh; }
/* Slagen är så höga som sitt innehåll. Luften mellan dem räcker för att fotot ska hinna tona över och tråden svänga. */
.flod-steg { display: flex; align-items: center; padding: 11svh 0; }
/* Luft ovanför första slaget, där tråden kommer i en båge från chattrutan i heron. */
.flod-steg:first-of-type { padding-top: 28svh; }
.flod-innehall { width: min(36rem, 44vw); margin-left: var(--spalt); display: grid; gap: clamp(24px, 4vh, 40px); }
.flod-tid { margin: 0 0 calc(-1 * clamp(8px, 2vh, 20px)); font-size: 1rem; font-weight: 650; line-height: 1.4; color: var(--honung); font-variant-numeric: tabular-nums; }
.flod-steg ~ .flod-steg .flod-tid { color: var(--sken); }
.flod .flod-ljus .flod-tid { color: var(--jade-mork); }
/* Gryningens två små slag: en tid och ett kort på en egen mörk platta, så att fotot syns runt dem. */
.flod-paus { display: flex; align-items: center; padding: 13svh 0; }
.flod-paus-innehall { width: min(24rem, 34vw); margin-left: var(--spalt); display: grid; gap: 12px; }
.flod-paus .flod-tid { margin: 0; justify-self: start; padding: .15em .65em; border-radius: 999px; background: rgba(10, 24, 34, .74); color: var(--sken); }
.flod-kort {
  display: grid; gap: 10px; padding: 18px 20px 20px; border-radius: 16px; color: #E7EEEC;
  background: rgba(10, 24, 34, .8); box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .16), 0 16px 40px rgba(0, 0, 0, .25);
}
.flod-kort h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.15; }
.flod-kort p { margin: 0; font-size: .98rem; line-height: 1.5; color: #D5E2E2; }
.flod-kort .tg-krypt { display: grid; justify-items: start; margin-top: 4px; font-size: 12.5px; line-height: 1.3; color: #D5E2E2; }
.flod-kort .kodruta { margin-top: 4px; }
.flod-hoger .flod-innehall, .flod-hoger.flod-paus .flod-paus-innehall { margin-left: var(--spalt-hoger); }
/* Gryningens två kort står bredvid varandra i en bredare spalt med samma högerkant. */
.flod-gryning .flod-paus-innehall, .flod-hoger.flod-gryning .flod-paus-innehall {
  width: min(46rem, 54vw); margin-left: calc(100% - max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) - min(46rem, 54vw));
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px;
}
.gryning-del { display: grid; gap: 12px; }
.gryning-del .flod-tid { margin: 0; justify-self: start; padding: .15em .65em; border-radius: 999px; background: rgba(10, 24, 34, .74); color: var(--sken); }
@media (max-width: 1100px) and (min-width: 861px) {
  .flod-gryning .flod-paus-innehall, .flod-hoger.flod-gryning .flod-paus-innehall { width: min(26rem, 44vw); margin-left: var(--spalt-hoger); grid-template-columns: minmax(0, 1fr); }
}
/* Tråden (flod.js): honung från chattrutan till chatten klockan 01.30, sedan mint och i morgonljuset jade. Spetsen
   glöder där läsaren är och punkterna tänds när den passerar. */
.flod-trad { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
.flod-trad path { fill: none; stroke-width: 2; stroke-linecap: round; }
.flod-trad-punkt { stroke-width: 2; }
.flod-trad-spets { transition: fill .4s ease; filter: drop-shadow(0 0 5px rgba(255, 214, 160, .95)) drop-shadow(0 0 14px rgba(240, 178, 106, .7)); }
.flod-trad-spets.gron { filter: drop-shadow(0 0 5px rgba(200, 245, 230, .95)) drop-shadow(0 0 14px rgba(127, 200, 189, .7)); }
.flod .steg-bit { justify-self: start !important; }
.flod-ljus .steg-text h3, .flod-ljus .steg-under { color: var(--blak); }
.flod .bit-fonster { padding: 0; background: none; }
.flod .bit-fonster .fonster-band { display: block; width: 100%; height: auto; }
.flod .bit-ring { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 18px; padding: 0; background: none; }
.flod .bit-ring svg { width: 104px; max-height: none; }
.flod .bit-ring figcaption { padding: 0; background: none; font-size: 1rem; line-height: 1.35; }
.flod .bit-telefon { height: min(68vh, 600px); }
.flod .bit-arbetsvy { width: 100%; }

@media (max-width: 860px) {
  .flod-lager { height: 100lvh; }
  .flod-toning { display: none; }
  /* Bildens nederkant tonar mot natten, eller mot morgonen på slutet. */
  .flod-bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(rgba(15, 34, 49, 0), var(--natt)); transition: opacity .8s ease; }
  .flod-lager.ljus .flod-bild::after { background: linear-gradient(rgba(241, 245, 243, 0), var(--morgon)); }
  .flod-klocka { top: calc(var(--sidhuvud) + 12px); right: var(--gutter); }
  .flod-klocka .dygn { width: 48px; height: 48px; }
  .flod-klocka .dygn-oppet { stroke-width: 15; }
  .flod-klocka .dygn-nu { r: 18; }
  .flod { --spalt: calc(var(--gutter) + 22px); }
  .flod-hoger .flod-innehall { margin-left: 0; }
  .flod-paus { display: block; min-height: 0; padding: 26svh 0 0; }
  .flod-paus-innehall, .flod-hoger.flod-paus .flod-paus-innehall, .flod-hoger.flod-gryning .flod-paus-innehall { width: auto; margin: 0 var(--gutter) 0 var(--spalt); grid-template-columns: minmax(0, 1fr); }
  .flod-berattelse { padding-bottom: 0; }
  .flod-steg, .flod-steg:first-of-type { display: block; min-height: 0; padding: 30svh 0 0; }
  .flod-innehall {
    width: auto; margin: 0; padding: 32px var(--gutter) 40px var(--spalt); gap: 18px;
    background: linear-gradient(rgba(15, 34, 49, 0), var(--natt) 52px);
  }
  .flod-ljus .flod-innehall { background: linear-gradient(rgba(241, 245, 243, 0), var(--morgon) 52px); }
  .flod .steg-text h3 { font-size: clamp(1.4rem, 1rem + 2.2vw, 1.9rem); line-height: 1.12; }
  .flod .steg-under { margin-top: 10px; font-size: 1rem; }
  .flod .bit-ring svg { width: 96px; }
  .flod .bit-arbetsvy { width: 100%; }
  .flod .bit-arbetsvy .post.is-dold { display: none; }
}
/* 08.30: ärendet kommer ur personens chatt. Chattens bubblor skymtar bakom ärendekortet, uppe till höger, suddiga så att
   de inte går att läsa, eftersom hela samtalet stannar hos personen. Koden glöder när tråden når fram (flod.js). */
.flod-ursprung-bit { position: relative; isolation: isolate; }
.flod-ursprung {
  position: absolute; z-index: -1; top: -38px; right: -38px; width: min(60%, 330px); display: grid; gap: 7px;
  filter: blur(3.4px); opacity: .55; pointer-events: none;
}
.flod-ursprung .bubbla { margin: 0; max-width: 94%; padding: .55em .8em; border-radius: 1em; font-size: 13px; line-height: 1.35; }
.flod-ursprung .bubbla-person { justify-self: end; border-bottom-right-radius: .3em; }
.flod-ursprung .bubbla-ai { justify-self: start; border-bottom-left-radius: .3em; }
.flod .kod.glod { animation: kod-glod 1.8s ease-out; border-radius: 4px; }
@media (max-width: 860px) {
  .flod-ursprung-bit { margin-top: 18px; }
  .flod-ursprung { top: -30px; right: -10px; width: 64%; }
}

/* "En tjänst. Tre delar." i variant B: en dygnsremsa, tre fält som sitter ihop och går från natt (chatten) via morgon
   (kunskapsstödet) till eftermiddag (statistiken), som undersidornas tider på dygnet. Varje fält har en läsbar bit av
   produkten överst och namnet, rollen och en mening under. Inga foton här, berättelsen ovanför bär stämningen. */
.delar-dygn .delar-ingress { margin-bottom: clamp(28px, 5vh, 48px); }
/* Märket ovanför "En tjänst. Tre delar.": resans slut, där berättelsen landar i namnet. */
.delar-marke { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); margin: 0 0 clamp(22px, 4vh, 40px); font-family: var(--rubrik); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: .03em; color: var(--ink); }
.delar-marke .logga-skiva { width: clamp(64px, 3rem + 3vw, 96px); height: clamp(64px, 3rem + 3vw, 96px); background: var(--vit); box-shadow: 0 0 0 1px var(--kant), 0 18px 40px -22px rgba(16, 38, 46, .4); }
.delar-marke .logga-skiva img { width: 74%; height: 74%; }
.delar-dygn h2 { padding-left: 0; }
.remsa-kalla svg { margin-top: 2px; }
.dygnsremsa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 24px; overflow: hidden; box-shadow: 0 34px 60px -34px rgba(16, 38, 46, .45); }
.remsa-del { display: grid; grid-template-rows: auto 1fr; gap: clamp(24px, 3vw, 36px); padding: clamp(24px, 2.8vw, 40px); }
.remsa-natt { background: radial-gradient(110% 70% at 85% 0%, rgba(168, 230, 212, .1), rgba(168, 230, 212, 0) 60%), var(--natt); color: #E7EEEC; }
.remsa-morgon { background: var(--ljusmint); color: var(--blak); }
.remsa-eftermiddag { background: var(--eftermiddag); color: var(--blak); }
.remsa-bild { display: grid; align-content: center; min-height: 236px; }
.remsa-text h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); line-height: 1.1; }
.remsa-text p { margin: 0; line-height: 1.5; }
.remsa-text .remsa-roll { margin: 6px 0 12px; font-weight: 650; }
.remsa-natt .remsa-roll { color: var(--honung); }
.remsa-morgon .remsa-roll, .remsa-eftermiddag .remsa-roll { color: var(--jade-mork); }
.remsa-text a { display: inline-block; margin-top: 16px; font-weight: 600; color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.remsa-natt a { text-decoration-color: var(--sken); }
.remsa-morgon a, .remsa-eftermiddag a { text-decoration-color: var(--jade); }
/* Chatten */
.remsa-chatt { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .16); }
.remsa-chatt-rad { display: flex; align-items: center; gap: 8px; margin: 0 2px 4px; font-size: 13px; color: #B9CBC8; }
.remsa-chatt-rad img { border-radius: 50%; background: #FFFFFF; }
.remsa-chatt-rad b { color: #E7EEEC; letter-spacing: .03em; }
.remsa-chatt .bubbla { margin: 0; max-width: 88%; padding: .6em .9em; border-radius: 1.1em; font-size: 15px; line-height: 1.4; }
.remsa-chatt .bubbla-person { justify-self: end; border-bottom-right-radius: .3em; }
.remsa-chatt .bubbla-ai { justify-self: start; border-bottom-left-radius: .3em; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .14); }
/* Kunskapsstödet och statistiken: ett vitt fönster */
.remsa-fonster { display: grid; gap: 10px; padding: 16px 18px 18px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 14px 30px -18px rgba(16, 38, 46, .45); color: var(--blak); }
.remsa-fraga { margin: 0; font-weight: 650; font-size: 15px; line-height: 1.35; }
.remsa-svar { margin: 0; font-size: 15px; line-height: 1.45; color: #2A3F45; }
.remsa-kalla { justify-self: start; display: inline-flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; padding: 5px 10px; border-radius: 9px; background: #DCEFE7; color: var(--jade-mork); font-weight: 600; font-size: 13px; }
.remsa-kalla svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.remsa-etikett { margin: 0; font-weight: 650; font-size: 14px; }
.remsa-staplar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; height: 124px; }
.remsa-staplar span { display: grid; justify-items: center; align-content: end; gap: 5px; height: 100%; font-size: 12.5px; color: #41585E; }
.remsa-staplar b { font-size: 13px; color: var(--blak); font-variant-numeric: tabular-nums; }
.remsa-staplar i { display: block; width: 100%; height: calc(var(--h) * 78px); border-radius: 6px 6px 2px 2px; background: var(--jade); }
.remsa-summa { display: flex; gap: 18px; margin: 2px 0 0; font-size: 14px; color: #41585E; }
.remsa-summa b { margin-right: 4px; font-size: 1.35rem; color: var(--blak); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .dygnsremsa { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .remsa-bild { min-height: 0; }
}

/* Trygghet på startsidan: två spalter med löften, en per halva av rubriken. Personens löften har honungsfärgade punkter
   och era har gröna. Bara text, som en vilopunkt efter produktens bilder. Rubriken i sin helhet står dold som h2. */
.trygghet-lofte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 96px); margin-bottom: clamp(36px, 6vh, 56px); }
.lofte h3 { margin-bottom: clamp(24px, 4vh, 36px); font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.2rem); line-height: 1.04; }
.lofte ul { display: grid; gap: clamp(20px, 3.2vh, 28px); margin: 0; padding: 0; list-style: none; }
.lofte li { position: relative; max-width: 34rem; padding-left: 28px; font-size: 1.02rem; line-height: 1.5; color: #C9D8D6; }
.lofte li::before { content: ""; position: absolute; left: 0; top: .52rem; width: 10px; height: 10px; border-radius: 50%; }
.lofte-person li::before { background: var(--honung); box-shadow: 0 0 12px rgba(240, 178, 106, .55); }
.lofte-vikt h2 { max-width: 16ch; margin-bottom: clamp(18px, 3vh, 28px); line-height: 1.04; }
.trygghet .lofte-ingress { max-width: 30rem; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.45; color: #E7EEEC; }
.lofte-person ul { padding-top: .5rem; }
.lofte li b { display: block; margin-bottom: 3px; font-family: var(--rubrik); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight: 600; line-height: 1.25; color: #F1F5F3; }
@media (max-width: 760px) { .trygghet-lofte { grid-template-columns: minmax(0, 1fr); } }

/* Valet samma natt: chatten frågar om en människa får veta, AI:ns förslag till sammanfattning är godkänt och personen
   väljer hur verksamheten får kontakt. Samma ord som i Chattens demo. */
.flod .bit-val { width: min(300px, 100%); height: auto; aspect-ratio: auto; }
.flod .bit-val .telefon-innehall { justify-content: flex-start; gap: .55em; padding-top: 12px; }
.flod .bit-val .bubbla-ai { max-width: 92%; }
.val-sammanfattning { display: grid; gap: .3em; margin: .1em 0 0; padding: .7em .85em; border-radius: 14px; background: rgba(168, 230, 212, .07); box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .22); font-size: .9em; line-height: 1.35; color: #E3EEEA; }
.val-sammanfattning small { font-size: .85em; color: #A9BFC0; }
.val-godkand { justify-self: start; display: inline-flex; align-items: center; gap: .35em; margin-top: .15em; font-size: .85em; font-weight: 600; color: var(--sken); }
.val-godkand svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.val-fraga { margin: .35em 0 0; font-size: .92em; font-weight: 650; color: #F1F5F3; }
.val-alt, .val-kryss { position: relative; display: grid; margin: 0; padding: .5em .8em .5em 2.05em; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .2); font-size: .86em; line-height: 1.3; color: #D5E2E2; }
.val-alt b { font-weight: 600; }
.val-alt small { font-size: .9em; color: #A9BFC0; }
.val-alt::before, .val-kryss::before { content: ""; position: absolute; left: .75em; top: .62em; width: .8em; height: .8em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(213, 226, 226, .5); }
.val-alt.is-vald { background: rgba(168, 230, 212, .09); box-shadow: inset 0 0 0 1.5px var(--sken); color: #FFFFFF; }
.val-alt.is-vald::before { background: radial-gradient(circle, var(--sken) 0 32%, transparent 38%); box-shadow: inset 0 0 0 1.5px var(--sken); }
.val-kryss { box-shadow: none; padding-top: .25em; padding-bottom: .1em; color: #A9BFC0; }
.val-kryss::before { top: .32em; border-radius: 3px; }
@media (max-width: 860px) {
  .flod .bit-val { width: 100%; }
  .val-sammanfattning small, .val-alt small { display: none; }
  /* Telefonerna utan statusrad på mobil, så att de tar mindre plats. */
  .flod .bit-telefon .telefon-status { display: none; }
}