/* Formprov D: startsidan, omgång 4. Bara det som är unikt för startsidan; allt gemensamt ligger i gemensam.css.
   En sak per skärm och högst två textstorlekar per avsnitt. Färgen går natt, morgon, kväll och sjögrönt, med en
   enda mjuk övergång från natt till morgon i slutet av natten.
   Heron och natten är en scen (.scen[data-scen][data-helskarm]): heron är förloppets första bild i hela
   skärmen. Med skript och utan reducerad rörelse (html.scen-aktiv) glider bilden på plats och ett fönster tänds.
   När man scrollar tonar heronas text ut, och tre meningar tonas in en i taget över samma scen, med ett andetag
   utan text vid gryningen (gemensam.js). Utan skript eller med reducerad rörelse är heron en stillbild med
   fönstret tänt och natten ett lugnt flöde med stillbilder. Den förra versionen ligger i start-omgang2.css. */

/* Sidhuvudet ligger genomskinligt över heron, med en svag toning uppifrån, och blir fast när man har scrollat
   förbi (gemensam.js sätter .over-hero). */
.sidhuvud-over { position: fixed; top: 0; left: 0; right: 0; }
.sidhuvud.over-hero { background: linear-gradient(rgba(6, 14, 22, .62), rgba(6, 14, 22, 0)); box-shadow: none; }
.sidhuvud.over-hero:has(.meny.oppen) { background: var(--natt); }

/* Hero: en helskärmsbild som en filmaffisch. Rubriken står i himlen, definitionen och knapparna nere till
   vänster över de mörka taken. Två storlekar: rubriken och allt annat. */
.start-hero { position: relative; isolation: isolate; display: flex; height: 100svh; min-height: 560px; padding: 0; overflow: hidden; }
.hero-bild { position: absolute; inset: 0; z-index: -2; }
/* Bilden förankras uppåt så att så mycket himmel som möjligt syns: rubriken ska stå i himlen, inte över taken. */
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 0%; }
.start-hero::before, .start-hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.start-hero::before { top: 0; height: 58%; background: linear-gradient(rgba(6, 14, 22, .6), rgba(6, 14, 22, .38) 45%, rgba(6, 14, 22, 0)); }
.start-hero::after { bottom: 0; height: 52%; background: linear-gradient(to top, rgba(6, 14, 22, .9), rgba(6, 14, 22, .74) 42%, rgba(6, 14, 22, 0)); }
.hero-innehall {
  width: 100%; display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--sidhuvud) + clamp(12px, 3vh, 36px)); padding-bottom: clamp(28px, 6vh, 64px);
}
.start-hero .hero-for, .start-hero .hero-ingress, .start-hero .knapp { font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); }
.start-hero .hero-for { max-width: none; margin: 0 0 clamp(8px, 1.6vh, 16px); color: #E7EEEC; }
.start-hero h1 {
  max-width: none; margin: 0; color: #F4F7F6;
  font-size: clamp(2.6rem, min(5.6vw, 8.4vh), 6.4rem); font-weight: 560; line-height: .98; letter-spacing: -.018em;
}
.start-hero h1 .rad { display: block; }
/* Nere till vänster definitionen och knapparna. Chattrutan står till höger ovanför, nära det tända fönstret. */
.hero-botten { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 330px); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
.hero-fraga { grid-column: 2; grid-row: 1; margin: 0 0 clamp(16px, 3vh, 32px); }
.start-hero .hero-ingress { grid-column: 1; grid-row: 2; margin: 0; line-height: 1.5; color: #E7EEEC; }
.start-hero .knappar { grid-column: 1; grid-row: 3; margin-top: clamp(18px, 3vh, 28px); }
/* Chattrutan: en första fråga i personens honung och chattens svar, på en mörk platta. */
.hero-fraga {
  display: grid; gap: 7px; width: 100%; padding: 10px 10px 11px; border-radius: 18px; background: rgba(10, 24, 34, .74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .22), 0 16px 40px rgba(0, 0, 0, .35);
}
.hero-fraga figcaption { display: flex; align-items: center; gap: 7px; margin: 0 2px 2px; color: #DCE8E5; font-size: 13px; font-weight: 600; }
.hero-fraga figcaption img { border-radius: 50%; background: #FFFFFF; }
.hero-fraga time { margin-left: auto; color: var(--sken); font-variant-numeric: tabular-nums; }
.hero-fraga .bubbla { margin: 0; max-width: 88%; padding: .6em .9em; border-radius: 1.1em; font-size: 15px; line-height: 1.38; }
.hero-fraga .bubbla-person { justify-self: end; border-bottom-right-radius: .3em; }
.hero-fraga .bubbla-ai { justify-self: start; border-bottom-left-radius: .3em; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .16); }
/* Med rörelse tonar rutan fram när fönstret har tänts, och svaret kommer en stund efter frågan. */
.hero-fraga, .hero-fraga .bubbla-ai { transition: opacity .9s ease .6s, translate .9s cubic-bezier(.2, .7, .2, 1) .6s; }
.hero-fraga .bubbla-ai { transition-delay: 2s; }
/* Med rörelse är rutan gömd från första stund (html.vantar-ljus sätts i sidans head) tills fönstret har tänts, så att den
   inte syns, försvinner och kommer tillbaka. Skulle skriptet aldrig tända fönstret visas den ändå efter tio sekunder. */
html.vantar-ljus .hero-fraga, html.vantar-ljus .hero-fraga .bubbla-ai { opacity: 0; translate: 0 10px; animation: hero-fraga-anda .9s ease 10s forwards; }
@keyframes hero-fraga-anda { to { opacity: 1; translate: none; } }
@media (max-width: 960px) {
  .hero-botten { grid-template-columns: minmax(0, 1fr); }
  .hero-fraga { grid-column: 1; width: min(330px, 100%); justify-self: end; }
  .start-hero .hero-ingress { max-width: 36rem; }
}
@media (max-width: 760px) {
  .hero-bild img { object-position: 64% 50%; }
  .start-hero h1 { font-size: clamp(2.05rem, 9.4vw, 2.75rem); line-height: 1; }
  .hero-fraga { width: min(310px, 88%); margin-bottom: 16px; }
  .hero-fraga .bubbla { font-size: 14px; }
  .start-hero .knappar { flex-wrap: nowrap; gap: 8px; }
  .start-hero .knapp { min-height: 46px; padding: 0 clamp(10px, 3.4vw, 14px); font-size: clamp(.8rem, 3.6vw, .95rem); white-space: nowrap; }
  .start-hero .hero-ingress { font-size: 1rem; }
  .start-hero .hero-for { font-size: .95rem; }
}
/* Det samlade ögonblicket när sidan laddas: bilden glider på plats och rubrikens rader tonar fram. */
@keyframes scen-in { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rad-in { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
.scen-aktiv .hero-bild img, .scen-intro { animation: scen-in 12s cubic-bezier(.16, .84, .3, 1) both; transform-origin: 50% 50%; }
.scen-aktiv .start-hero h1 .rad { animation: rad-in 1.6s cubic-bezier(.2, .7, .2, 1) .3s both; }
.scen-aktiv .start-hero h1 .rad + .rad { animation-delay: .5s; }

/* Natten utan rörelse: ett lugnt flöde med stillbilder */
.scen { position: relative; background: var(--natt); }
.forlopp { padding: clamp(24px, 4vh, 48px) 0 var(--luft); }
.forlopp-steg { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 8vh, 88px); }
.steg { display: grid; grid-template-columns: minmax(0, min(40%, 34rem)) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 64px); align-items: center; }
.steg-foto { grid-column: 1 / -1; margin: 0; aspect-ratio: 3 / 2; max-height: 62svh; border-radius: 6px; overflow: hidden; background: var(--platta); }
.steg-foto img { width: 100%; height: 100%; object-fit: cover; }
.steg-andetag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steg-andetag .steg-foto { grid-column: auto; }
.steg .steg-bit { justify-self: center; }
.steg-text h3 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); font-weight: 560; line-height: 1.08; letter-spacing: -.012em; max-width: 20ch; }
.steg-under { margin: 16px 0 0; max-width: 40ch; font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.steg-under a { color: inherit; }
@media (max-width: 860px) {
  .steg { grid-template-columns: minmax(0, 1fr); }
  .steg .steg-bit { justify-self: start; }
  .steg-andetag { grid-template-columns: minmax(0, 1fr); }
}
/* Valet att se natten i rörelse när enheten ber om minskad rörelse (gemensam.js). */
.rorelse-val { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 clamp(36px, 6vh, 56px); padding: 14px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--linje-stark); }
.rorelse-val p { margin: 0; flex: 1 1 18rem; max-width: none; color: var(--ink); }
.rorelse-val .knapp { color: var(--ink); }
/* Natten utan rörelse på mobil (reducerad rörelse eller inget skript) har samma bildspråk som i rörelse: fotot i
   full bredd och texten på nattens yta under det. Gryningens två bilder och morgonens bild står kant i kant, som en
   remsa där det ljusnar, och morgonsteget står på morgonens ljusa yta, som "Tre delar" fortsätter i. */
@media (max-width: 860px) {
  html:not(.scen-aktiv) .forlopp { padding: 36px 0 0; }
  html:not(.scen-aktiv) .forlopp-steg { gap: 0; }
  html:not(.scen-aktiv) .steg { gap: 18px; padding-bottom: 64px; }
  html:not(.scen-aktiv) .steg-andetag { gap: 0; padding-bottom: 0; }
  html:not(.scen-aktiv) .steg-foto { position: relative; margin: 0 calc(-1 * var(--gutter)); aspect-ratio: 4 / 3; max-height: none; border-radius: 0; }
  html:not(.scen-aktiv) .steg-foto img { object-position: 70% 60%; }
  html:not(.scen-aktiv) .steg-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(rgba(15, 34, 49, 0), var(--yta)); }
  html:not(.scen-aktiv) .steg-andetag .steg-foto::after { display: none; }
  html:not(.scen-aktiv) .steg-andetag .steg-foto:first-child::after { display: block; top: 0; bottom: auto; height: 30%; background: linear-gradient(var(--yta), rgba(15, 34, 49, 0)); }
  html:not(.scen-aktiv) .steg-ljus {
    --yta: var(--morgon); --ink: #10262E; --ink-mjuk: #41585E; --linje: rgba(16, 38, 46, .14); --linje-stark: rgba(16, 38, 46, .34); --accent: var(--jade);
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 56px; background: var(--yta); color: var(--ink);
  }
  html:not(.scen-aktiv) .steg-ljus .steg-foto::after { background: linear-gradient(rgba(241, 245, 243, 0), var(--yta)); }
  html:not(.scen-aktiv) .steg-ljus .steg-text h3, html:not(.scen-aktiv) .steg-ljus .steg-under { color: var(--blak); }
}

/* Produktbitarna */
/* Telefonen som en riktig telefon: lika hög som en verklig telefon på skärmen, med läsbar text. */
.bit-telefon { width: auto; height: min(72vh, 680px); aspect-ratio: 9 / 19.5; padding: 16px 14px 14px; border-radius: 44px; font-size: clamp(14px, 1.9vh, 17px); }
.bit-telefon .telefon-status { font-size: .8em; padding: 2px 16px 10px; }
.bit-telefon .telefon-adress { font-size: .74em; }
.bit-telefon .telefon-rad b { font-size: .9em; }
.bit-telefon .telefon-roll, .bit-telefon .lamna { font-size: .76em; }
.bit-telefon .telefon-innehall { flex: 1; min-height: 0; justify-content: flex-end; gap: .7em; padding: 14px 4px 8px; }
.bit-telefon .ai-not { font-size: .8em; margin-bottom: auto; }
.bit-telefon .bubbla { padding: .7em .9em; border-radius: 1.15em; }
.bit-telefon .bubbla-person { border-bottom-right-radius: .35em; }
.bit-telefon .bubbla-ai { border-bottom-left-radius: .35em; }
.bit-telefon .telefon-falt { font-size: .88em; }
.bit-lank { margin: 14px 0 0; font-size: 1rem; font-weight: 600; }
.bit-lank a { color: #E7EEEC; text-decoration-color: var(--sken); text-decoration-thickness: 2px; }
.bit-lank a.har-fokus { outline: 3px solid var(--sken); outline-offset: 3px; border-radius: 4px; }
.bit-arbetsvy { width: min(46vw, 640px); font-size: 16px; }
.bit-arbetsvy .fonster-list { font-size: 14px; padding: 14px 24px; }
.bit-arbetsvy .fonster-kropp { padding: clamp(18px, 2vw, 28px); }
.bit-arbetsvy .etikett, .bit-arbetsvy .markering, .bit-arbetsvy .status { font-size: 13.5px; }
/* Ljustråden i scenen: en tunn linje ur det tända fönstret (gemensam.js), i personens varma ljus fram till telefonen. */
.scen-trad { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scen-trad path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.scen-trad .trad-natt { stroke: var(--honung); }
/* Från OMTNK och framåt är tråden grön: jade i morgonljuset. */
.scen-trad .trad-morgon { stroke: var(--trad-morgon); }
.scen-snapp { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }
/* Bron från scenens nederkant till "Tre delar", i dokumentets koordinater. */
.scen-bro { position: absolute; left: 0; z-index: 5; overflow: visible; pointer-events: none; }
.trad-bro { fill: none; stroke: var(--trad-morgon); stroke-width: 1.5; stroke-linecap: round; }
.scen-steg .kod.glod { animation: kod-glod 1.8s ease-out; border-radius: 4px; }
@keyframes kod-glod { 0% { background: rgba(127, 200, 189, 0); } 30% { background: rgba(127, 200, 189, .5); box-shadow: 0 0 0 4px rgba(127, 200, 189, .35); } 100% { background: rgba(127, 200, 189, 0); box-shadow: 0 0 0 4px rgba(127, 200, 189, 0); } }
/* 100 fönster: 16 är tända och ett är tänt till 40 procent, i samma varma ljus som fönstren i fotot. */
.bit-fonster { margin: 0; padding: 28px 40px; background: radial-gradient(closest-side, rgba(10, 22, 32, .8), rgba(10, 22, 32, .66) 70%, rgba(10, 22, 32, 0)); }
.bit-fonster svg { display: block; width: min(36vw, 460px); max-height: 66vh; height: auto; }
.bit-fonster rect { fill: rgba(168, 230, 212, .05); stroke: rgba(231, 238, 236, .32); stroke-width: 1; }
.bit-fonster .fonster-tant { fill: url(#varmt); stroke: none; filter: drop-shadow(0 0 3px rgba(240, 178, 106, .55)); }
.bit-fonster .fonster-halv { fill: url(#halvt); }
.bit-fonster .fonster-band { display: none; }
.fonster-band .fonster-tant { fill: url(#varmt-band); }
.fonster-band .fonster-halv { fill: url(#halvt-band); }
/* 24-timmarsringen: dygnet som en ring, exemplets öppettider som en båge och 22.14 som en prick utanför.
   En mjuk mörk toning bakom, som bakom all text över foton. */
.bit-ring { margin: 0; display: grid; justify-items: center; gap: 10px; padding: 28px 36px 24px; background: radial-gradient(closest-side, rgba(10, 22, 32, .82), rgba(10, 22, 32, .7) 70%, rgba(10, 22, 32, 0)); }
.bit-ring svg { width: min(34vw, 440px); max-height: 58vh; height: auto; overflow: visible; }
.ring-dygn, .ring-streck { fill: none; stroke: rgba(231, 238, 236, .5); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ring-oppet { fill: none; stroke: var(--sken); stroke-width: 6; stroke-linecap: round; }
.ring-nu { fill: var(--honung); }
.ring-tid { fill: var(--honung); font: 600 17px var(--sans); font-variant-numeric: tabular-nums; }
/* Förklaringen står på en egen mörk platta, eftersom den kan hamna över tända fönster i fotot. */
.bit-ring figcaption { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(10, 24, 34, .85); font-size: 1.1rem; color: #E7EEEC; }
.bit-ring figcaption::before { content: ""; width: 16px; height: 6px; border-radius: 3px; background: var(--sken); }
/* Telefonen står längst till höger, så att fönstret får plats mellan texten och telefonen. */
.steg-bit:has(.bit-telefon) { justify-self: end !important; }
/* På smala skärmar står produktbitarna på en mörk panel (se Natten i rörelse), så de behöver ingen egen toning.
   De är kompakta, så att fotot ovanför panelen får plats: fönstren i fem rader, ringen bredvid sin förklaring och
   telefonen utan adressfält och skrivfält. */
@media (max-width: 860px) {
  .steg-bit:has(.bit-telefon) { justify-self: stretch !important; }
  .bit-telefon { width: 100%; max-width: 420px; height: auto; aspect-ratio: auto; padding: 10px 10px 12px; border-radius: 26px; font-size: 13.5px; }
  .bit-telefon .telefon-adress, .bit-telefon .ai-not, .bit-telefon .telefon-falt { display: none; }
  .bit-telefon .telefon-status { padding: 2px 12px 6px; }
  .bit-telefon .telefon-rad { padding: 2px 4px 8px; }
  .bit-telefon .telefon-innehall { flex: none; gap: .5em; padding: 10px 2px 0; }
  .bit-telefon .bubbla { padding: .6em .85em; }
  .bit-lank { text-wrap: balance; }
  .bit-arbetsvy { width: calc(100vw - 2 * var(--gutter)); font-size: 14px; }
  .bit-arbetsvy .fonster-list { display: none; }
  .bit-fonster { padding: 0; background: none; }
  .bit-fonster .fonster-kvadrat { display: none; }
  .bit-fonster .fonster-band { display: block; width: min(100%, 420px); max-height: none; }
  .bit-ring { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 20px; padding: 0; background: none; }
  .bit-ring svg { width: 132px; max-height: none; }
  .bit-ring figcaption { padding: 0; background: none; font-size: 1rem; line-height: 1.35; align-items: flex-start; }
  .bit-ring figcaption::before { flex: none; margin-top: .5em; }
}

/* Natten i rörelse */
.scen-aktiv .scen .start-hero, .scen-aktiv .scen .forlopp { position: relative; z-index: 1; background: transparent; }
/* Heronas egen bild visas tills scenen har laddat sin första bild. Sedan tar scenen över, i samma läge. */
/* I scenen ligger heronas toningar i lagret i stället, så att de står still och tonar ut med texten. */
.scen-aktiv [data-helskarm] .start-hero::before, .scen-aktiv [data-helskarm] .start-hero::after { display: none; }
[data-helskarm] .scen-lager .scen-toning-sida {
  background:
    linear-gradient(rgba(6, 14, 22, .6), rgba(6, 14, 22, .38) 26%, rgba(6, 14, 22, 0) 58%),
    linear-gradient(to top, rgba(6, 14, 22, .9), rgba(6, 14, 22, .74) 22%, rgba(6, 14, 22, 0) 52%);
}
.scen-aktiv .scen-klar .hero-bild { visibility: hidden; }
.scen-intro { position: absolute; inset: 0; }
/* Flödet blir en scrollsträcka: tidslinjen är 3,6 bildhöjder (fyra steg om 0,9, där andetaget är två halva),
   plus 1,3 för morgonens sista bild och för att scenen ska rulla undan. Texten finns kvar för skärmläsare. */
.scen-aktiv .forlopp { height: calc(100svh * 5.25); padding: 0; }
/* Tidslinjen är 4,5 bildhöjder (fyra steg om 0,9 och ett andetag om 0,9) och börjar 0,55 bildhöjder in i heron
   (data-start). Här blir den 3,95 bildhöjder, plus 1,3 för morgonens sista bild och för att scenen ska rulla undan. */
.scen-aktiv .forlopp > .ram { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scen-spar { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scen-lager { position: sticky; top: 0; overflow: hidden; height: 100svh; }
.scen-lager a { pointer-events: auto; }
.scen-kamera { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.scen-kamera img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bild-x, 50%) var(--bild-y, 45%); }
.scen-kamera img + img { opacity: 0; }
/* Det släckta fönstret: samma bild som den första, men med ett fönster släckt. Den tonas bort en gång. */
.scen-kamera .scen-slackt { opacity: 1; transition: opacity 2s ease-in-out; }
.scen-kamera .scen-slackt.tand { opacity: 0; }
/* Det ensamma fönstret glöder en aning mitt i natten. Ingen markering, bara ljuset. */
.scen-glod {
  position: absolute; left: var(--glod-x); top: var(--glod-y); width: calc(var(--glod-r) * 2); height: calc(var(--glod-r) * 2);
  margin: calc(var(--glod-r) * -1) 0 0 calc(var(--glod-r) * -1); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .5), rgba(255, 170, 90, .16) 55%, rgba(255, 170, 90, 0));
  mix-blend-mode: screen;
}
/* Toningar ligger bara bakom text som syns. Ingen glasruta, bara mörker eller ljus i bildens kant. */
.scen-toning-sida, .scen-toning-steg, .scen-toning-ljus, .scen-morgon { position: absolute; pointer-events: none; }
.scen-toning-sida { inset: 0; background: linear-gradient(90deg, rgba(15, 34, 49, .93) 0%, rgba(15, 34, 49, .88) 48%, rgba(15, 34, 49, 0) 76%); }
.scen-toning-steg { inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(10, 22, 32, .9) 0, rgba(10, 22, 32, .84) var(--text-h, 45%), rgba(10, 22, 32, 0) calc(var(--text-h, 45%) + 18vw)); }
.scen-toning-ljus { inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(241, 245, 243, .9) 0, rgba(241, 245, 243, .86) var(--text-h, 45%), rgba(241, 245, 243, 0) calc(var(--text-h, 45%) + 14vw)); }
/* Den enda mjuka övergången: från nattens sista bild till morgonens ton. */
.scen-morgon { left: 0; right: 0; bottom: 0; height: 45%; opacity: 0; background: linear-gradient(rgba(241, 245, 243, 0), var(--morgon)); }
.scen-steglager { position: absolute; inset: 0; display: flex; align-items: center; padding-top: var(--sidhuvud); }
.scen-steglager .ram { width: 100%; display: grid; }
.scen-rad {
  width: 100%; display: grid;
  padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-right: max(var(--gutter), 72px);
}
.scen-steg {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, min(40%, 34rem)) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 64px);
  align-items: center; opacity: 0; visibility: hidden; will-change: opacity, transform;
}
.scen-steg .steg-bit { justify-self: center; }
.scen-steg-ljus .steg-text h3, .scen-steg-ljus .steg-under { color: var(--blak); }
/* Dygnsklockan (gemensam.js): dygnet som en ring, med exemplets öppettider som en mint båge och en visare i personens
   honung. Den står liten uppe till höger på en mörk skiva, med veckodagen och tiden till vänster, och går med bilderna.
   I ringens slag växer den till ringens plats och tiden står i mitten. Inom öppettiderna blir den grön, och i
   morgonljuset står den på en ljus skiva. .dygn-plats är bara en markör för den lilla klockans plats och storlek. */
.dygn-plats { position: absolute; top: calc(var(--sidhuvud) + 20px); right: 24px; width: 56px; height: 56px; pointer-events: none; }
.dygn, .dygn-tid { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform; }
.dygn { overflow: visible; }
.dygn-skiva { fill: rgba(10, 24, 34, .8); }
.dygn-ring, .dygn-streck { fill: none; stroke: rgba(231, 238, 236, .5); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .6s ease; }
.dygn-oppet { fill: none; stroke: var(--sken); stroke-linecap: round; }
.dygn-visare { stroke: var(--honung); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .6s ease; }
.dygn-nu { fill: var(--honung); transition: fill .6s ease; }
.dygn-tid {
  display: grid; justify-items: center; padding: .32em .75em .38em; border-radius: 999px; background: rgba(10, 24, 34, calc(.8 * var(--platta, 1)));
  color: #E7EEEC; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dygn-tid small { font-size: .72em; font-weight: 600; color: #C3D3D0; }
.dygn-tid b { font-weight: 650; color: var(--honung); transition: color .6s ease; }
.dygn.oppet .dygn-ring, .dygn.oppet .dygn-visare { stroke: var(--sken); }
.dygn.oppet .dygn-nu { fill: var(--sken); }
.dygn-tid.oppet b { color: var(--sken); }
.dygn.ljus .dygn-skiva { fill: rgba(241, 245, 243, .9); }
.dygn.ljus .dygn-ring, .dygn.ljus .dygn-streck { stroke: rgba(16, 38, 46, .4); }
.dygn.ljus .dygn-oppet { stroke: var(--jade); }
.dygn.ljus .dygn-visare { stroke: #A8641E; }
.dygn.ljus .dygn-nu { fill: #A8641E; }
.dygn.ljus.oppet .dygn-ring, .dygn.ljus.oppet .dygn-visare { stroke: var(--jade-mork); }
.dygn.ljus.oppet .dygn-nu { fill: var(--jade-mork); }
.dygn-tid.ljus { background: rgba(241, 245, 243, calc(.9 * var(--platta, 1))); color: var(--blak); }
.dygn-tid.ljus small { color: #41585E; }
.dygn-tid.ljus b { color: #8F5414; }
.dygn-tid.ljus.oppet b { color: var(--jade-mork); }
/* Ringens slag visar sin förklaring, men själva ringen är klockan, som har vuxit dit. */
.har-dygn .scen-steg .bit-ring svg { visibility: hidden; }
@media (max-width: 960px) {
  .scen-toning-sida { background: linear-gradient(180deg, rgba(15, 34, 49, .93) 0%, rgba(15, 34, 49, .88) 55%, rgba(15, 34, 49, 0) 85%); }
}
/* På smala skärmar får texten inte stå över fotot. Den står på en panel i nederkant, natt eller morgon, som
   tonar in med texten. Fotot glider upp ovanför panelen så att fönstret syns (gemensam.js), och under gryningens
   andetag finns ingen panel och fotot fyller skärmen. */
@media (max-width: 860px) {
  .scen-toning-steg { background: linear-gradient(to bottom, rgba(15, 34, 49, 0) calc(var(--steg-topp, 40%) - 96px), rgba(15, 34, 49, .97) calc(var(--steg-topp, 40%) - 18px)); }
  .scen-toning-ljus { background: linear-gradient(to bottom, rgba(241, 245, 243, 0) calc(var(--steg-topp, 40%) - 96px), rgba(241, 245, 243, .97) calc(var(--steg-topp, 40%) - 18px)); }
  /* Lagret är lika högt som skärmen när adressfältet är dolt (lvh), så att ingen rand syns under panelen, medan
     texten håller sig inom den del som syns när adressfältet visas (svh). */
  .scen-lager { height: 100lvh; }
  .scen-aktiv .forlopp { height: calc(100lvh * 5.25); }
  .scen-steglager { inset: 0 0 calc(100lvh - 100svh) 0; align-items: flex-end; padding-bottom: clamp(20px, 3.4svh, 32px); }
  html.scen-aktiv { scroll-snap-type: y proximity; }
  /* Alla steg står i samma ruta, lika hög som det högsta steget, med innehållet uppifrån. Panelen börjar alltså på
     samma höjd i varje slag och rubriken står alltid på samma ställe. Fotot ovanför behöver då inte flytta sig. */
  .scen-steg { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; align-self: stretch; align-content: start; }
  .scen-steg .bit-lank { display: none; }
  .scen-steg .steg-bit { justify-self: start; }
  .scen-steg .steg-text h3 { font-size: clamp(1.4rem, 1rem + 2.2vw, 1.9rem); line-height: 1.12; }
  .scen-steg .steg-under { margin-top: 10px; font-size: 1rem; }
  .scen-rad { padding-inline: var(--gutter); }
  .scen-steg .bit-arbetsvy .post.is-dold { display: none; }
  .dygn-plats { top: calc(var(--sidhuvud) + 12px); right: var(--gutter); width: 48px; height: 48px; }
  /* Klockan växer i fotot ovanför panelen, så panelen visar bara förklaringen. */
  .har-dygn .scen-steg .bit-ring { grid-template-columns: minmax(0, 1fr); }
  .har-dygn .scen-steg .bit-ring svg { display: none; }
}

/* En tjänst. Tre delar. En tråd av ljus från personens fråga i chatten till skrivbordet där medarbetaren tar
   vid, med en tunnare streckad gren till statistiken, som bara räknar. Kvittot med koden färdas längs tråden.
   Två storlekar: rubriken och allt annat. Tråden ligger i ett SVG-lager med samma proportioner som fotoraden
   och bandet under den (1000 × 299), så att den stämmer även utan skript. Med skript ritas den med scrollen. */
.delar h2 { margin-bottom: 14px; }
.delar-ingress { max-width: 52ch; margin: 0 0 clamp(32px, 6vh, 56px); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--ink-mjuk); }
.trad-ram { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3%; font-size: 1.05rem; line-height: 1.45; }
.del { display: contents; }
.del img { grid-row: 1; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--platta); }
.del-chatten > * { grid-column: 1; }
.del-kunskap > * { grid-column: 2; }
.del-statistik > * { grid-column: 3; }
.trad-band { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 1000 / 90; }
/* Etapperna är etiketter som sitter på tråden, som hållplatser. */
.etapper { grid-row: 2; align-self: end; display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 0 0 2px; list-style: none; position: relative; z-index: 2; }
.etapper li {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--vit); box-shadow: 0 0 0 1px var(--kant), 0 3px 10px rgba(16, 38, 46, .06); font-size: .9rem; line-height: 1.2; color: var(--blak);
}
.etapper li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); }
.del-kunskap .etapper, .del-statistik .etapper { justify-content: center; }
.del-text { grid-row: 3; padding-top: 18px; }
.del-text h3 { font-size: clamp(1.3rem, 1.15rem + .4vw, 1.5rem); font-weight: 600; line-height: 1.2; }
.del-text p { margin: 0 0 12px; max-width: 32ch; }
.del-text .del-roll { margin: 4px 0 10px; font-size: .95rem; color: var(--ink-mjuk); }
.del-text a { font-weight: 600; }
/* En glimt av produkten i varje foto: chatten i nattens hud, ett svar med källa och användningen i staplar.
   Glimtarna ligger där tråden inte går (gemensam.js ritar tråden i bandet under fotona). */
.vinjett {
  grid-row: 1; align-self: start; position: relative; z-index: 2; width: min(64%, 240px); margin: 5%; padding: 11px 12px;
  border-radius: 14px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 10px 28px rgba(6, 14, 22, .28);
}
.vinjett p { margin: 0; max-width: none; }
/* Chattens glimt står till höger i fotot, så att telefonen och trådens början syns till vänster. */
.vinjett-chatt { justify-self: end; width: 50%; margin: 5% 4% 0 0; display: grid; gap: 7px; background: #13293A; color: #DCE8E5; font-size: 12px; }
.vinjett-rad { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid rgba(168, 230, 212, .14); font-size: 11.5px; }
.vinjett-rad span:last-child { color: #9FB6B6; }
.vinjett-symbol { width: 14px; height: 14px; border-radius: 50%; background: var(--sjogron); box-shadow: inset 0 0 0 3px #E1EEE5; }
.vinjett-person { justify-self: end; max-width: 86%; padding: 6px 10px; border-radius: 12px 12px 4px 12px; background: var(--honung); color: #1D1A13; }
.vinjett-ai { justify-self: start; max-width: 90%; padding: 6px 10px; border-radius: 12px 12px 12px 4px; background: #1F3B4C; }
.vinjett-kb, .vinjett-stat { justify-self: start; background: var(--vit); color: var(--blak); }
.vinjett-kb { display: grid; gap: 6px; }
.vinjett-fraga { font-weight: 650; }
.vinjett-svar { color: #41585E; }
.vinjett-kalla { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #DCEFE7; color: var(--jade-mork); font-weight: 600; font-size: 11.5px; }
.vinjett-kalla::before { content: ""; width: 8px; height: 10px; border-radius: 1.5px; box-shadow: inset 0 0 0 1.5px currentColor; }
.vinjett-etikett { font-weight: 650; }
.vinjett-staplar { display: flex; align-items: flex-end; gap: 8px; height: 46px; margin: 8px 0 8px; border-bottom: 1px solid var(--kant); }
.vinjett-staplar i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: var(--jade); }
.vinjett-tal { display: flex; gap: 14px; color: #41585E; }
.vinjett-tal b { margin-right: 3px; font-size: 14px; color: var(--blak); font-variant-numeric: tabular-nums; }
.trad-lager { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1000 / 299; z-index: 1; pointer-events: none; }
.trad-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trad-svg path { fill: none; stroke: var(--trad-morgon); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trad-huvud { stroke-width: 1.5; }
.trad-gren { stroke-width: 1; stroke-dasharray: 3 6; }
.trad-glod { position: absolute; left: 11.59%; top: 44.72%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(closest-side, rgba(168, 230, 212, .7), rgba(127, 200, 189, .22) 60%, rgba(127, 200, 189, 0)); }
.trad-kvitto {
  position: absolute; left: 53.76%; top: 55.89%; translate: -50% calc(-100% - 10px);
  padding: 3px 9px; border-radius: 7px; background: var(--vit); box-shadow: 0 0 0 1px var(--kant), 0 4px 14px rgba(16, 38, 46, .14);
  font-size: .95rem; font-weight: 650; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--blak); white-space: nowrap;
}
/* Med skript ritas tråden med scrollen (gemensam.js sätter --trad mellan 0 och 1). */
/* Med en linje som inte skalas räknas strecken i skärmens mått, så tråden ritas med skalad linje och en
   tjocklek som gemensam.js räknar om till 1,5 px. */
.trad-aktiv .trad-huvud { vector-effect: none; stroke-width: var(--trad-bredd, 1.5); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--trad, 1)); }
.trad-aktiv .trad-gren { opacity: var(--gren, 1); }
@media (max-width: 860px) {
  /* På mobil står korten under varandra, med tråden lodrätt längs vänsterkanten: hel från chattens bild till
     kunskapsstödets, streckad vidare till statistikens. --mitt är fotots halva höjd. */
  .trad-ram { --mitt: calc((100vw - 2 * var(--gutter) - 30px) / 3); display: block; padding-left: 30px; }
  .trad-lager, .trad-band { display: none; }
  .del { display: block; position: relative; padding-bottom: 36px; }
  .del::before { content: ""; position: absolute; left: -22px; top: var(--mitt); bottom: calc(var(--mitt) * -1); border-left: 1.5px solid var(--trad-morgon); }
  .del-kunskap::before { border-left: 1px dashed var(--trad-morgon); }
  /* Rubriken står i samma spalt som korten, så att tråden kan gå längs vänsterkanten utan att korsa den. */
  .delar h2 { padding-left: 30px; }
  .del-statistik::before { display: none; }
  .del-chatten::after { content: ""; position: absolute; left: -45px; top: calc(var(--mitt) - 23px); width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(168, 230, 212, .75), rgba(127, 200, 189, .25) 60%, rgba(127, 200, 189, 0)); }
  .etapper { display: flex; flex-wrap: wrap; justify-content: flex-start !important; gap: 8px; padding: 14px 0 0; }
  .vinjett { position: absolute; top: 12px; right: 12px; width: min(62%, 230px); margin: 0; }
  .vinjett-chatt { width: min(54%, 200px); font-size: 11.5px; }
}

/* Kväll: tryggheten i ett band med det dämpade fotot, sedan TNKOM och frågorna i samma ton. */
.trygghet { position: relative; overflow: hidden; padding: var(--luft) 0; }
.trygghet-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.trygghet::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(19, 58, 64, .6), rgba(19, 58, 64, .88) 70%, var(--yta)); }
.trygghet-ram { position: relative; z-index: 2; }
.trygghet h2 { max-width: 20ch; margin-bottom: clamp(28px, 5vh, 44px); }
.trygghet-lista { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
/* Varje sak är ett kort med en liten bit av tjänsten ovanför meningen, i samma hud som telefonen. */
.trygghet-lista li {
  display: flex; flex-direction: column; padding: 18px 18px 20px; border-radius: 16px;
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.trygghet-lista p { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.tg-bild { display: grid; align-content: center; gap: 6px; min-height: 132px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.3; color: #D5E2E2; }
.tg-val span { position: relative; padding: 7px 10px 7px 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .2); }
.tg-val span::before { content: ""; position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(213, 226, 226, .55); }
.tg-val .vald { background: rgba(168, 230, 212, .1); box-shadow: inset 0 0 0 1.5px var(--sken); color: #FFFFFF; font-weight: 600; }
.tg-val .vald::before { background: radial-gradient(circle, var(--sken) 0 2.6px, transparent 3.2px); box-shadow: inset 0 0 0 1.5px var(--sken); }
.tg-krypt { justify-items: start; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(6, 18, 22, .35); }
.tg-etikett { color: #A9BFC0; }
.tg-chiffer { display: flex; flex-wrap: wrap; gap: 6px 5px; width: 100%; }
.tg-chiffer i { width: var(--b); height: 9px; border-radius: 5px; background: rgba(168, 230, 212, .32); }
.tg-las { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(168, 230, 212, .14); color: var(--sken); font-weight: 600; }
.tg-las svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.tg-las rect { fill: currentColor; }
.tg-dagar { display: flex; gap: 4px; height: 30px; }
.tg-dagar i { flex: 1; border-radius: 4px; background: var(--sken); }
.tg-dagar i:nth-child(n+8) { opacity: .75; } .tg-dagar i:nth-child(n+10) { opacity: .5; } .tg-dagar i:nth-child(n+12) { opacity: .25; }
.tg-dagar i:nth-child(n+14) { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1px rgba(213, 226, 226, .3); }
.tg-skala { display: flex; justify-content: space-between; color: #A9BFC0; font-variant-numeric: tabular-nums; }
.tg-beslut span { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.tg-beslut b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; }
.tg-beslut em { padding: 3px 9px; border-radius: 999px; font-style: normal; font-weight: 600; font-size: 11.5px; }
.tg-person { background: rgba(168, 230, 212, .1); box-shadow: inset 0 0 0 1.5px var(--sken); color: #FFFFFF; }
.tg-person b { background: var(--sken); color: var(--blak); }
.tg-person em { background: var(--sken); color: var(--blak); }
.tg-ai { box-shadow: inset 0 0 0 1px rgba(213, 226, 226, .2); color: #A9BFC0; }
.tg-ai b { box-shadow: inset 0 0 0 1.5px rgba(213, 226, 226, .4); }
.tg-ai em { box-shadow: inset 0 0 0 1px rgba(213, 226, 226, .35); }
.trygghet p { margin: 0; font-size: 1.1rem; }
.trygghet a, .tnkom a { color: var(--sken); font-weight: 600; }
@media (max-width: 1100px) { .trygghet-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* På mobil står bilden till vänster och meningen till höger i varje kort, så att de fyra ryms utan att bli små. */
@media (max-width: 600px) {
  .trygghet-lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .trygghet-lista li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px; }
  .tg-bild { min-height: 0; margin: 0; font-size: 11.5px; }
  .tg-beslut span { grid-template-columns: 26px minmax(0, 1fr); row-gap: 4px; }
  .tg-beslut b { width: 26px; height: 26px; grid-row: span 2; }
  .tg-beslut em { justify-self: start; }
  .trygghet-lista p { font-size: 1rem; }
}
.tnkom { padding: clamp(28px, 5vh, 48px) 0; border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.tnkom p { margin-block: 0; max-width: var(--max); font-size: 1.1rem; }
.kvall .fragor-lista summary, .kvall .fragor-lista p, .kvall .fragor-huvud p { font-size: 1.1rem; }

/* Pilot i sjögrönt, med morgonens bild */
.start-pilot .pilot-ram { align-items: center; }
.start-pilot .pilot-steg b { font-size: inherit; }
.start-pilot .pilot-steg, .start-pilot .kontakt { font-size: 1.1rem; }
.start-pilot .kontakt { margin-top: clamp(24px, 4vh, 36px); }
.start-pilot .kontakt > a { font-weight: 600; align-self: flex-start; overflow-wrap: anywhere; }
.start-pilot .kontakt small { font-size: inherit; }
.pilot-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--platta); }
/* Pilotens steg längs en stig, som spåret i snön. Stegen är lika höga så att stigen träffar varje cirkel. */
.stig { position: relative; }
.stig-linje { position: absolute; left: 0; top: 0; width: 40px; height: 100%; overflow: visible; }
.stig-linje path { fill: none; stroke: var(--blak); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.start-pilot .pilot-steg { position: relative; display: grid; grid-auto-rows: 1fr; counter-reset: steg; }
.start-pilot .pilot-steg li {
  counter-increment: steg; display: flex; flex-direction: column; justify-content: center; min-height: 76px;
  padding: 10px 0 10px 64px; border-top: 0; position: relative;
}
.start-pilot .pilot-steg li::before {
  content: counter(steg); display: grid; place-items: center; position: absolute; left: 3px; top: 50%; translate: 0 -50%;
  width: 34px; height: 34px; border-radius: 50%; background: var(--ljusmint); box-shadow: inset 0 0 0 1.5px var(--blak);
  font-family: var(--rubrik); font-size: inherit; font-weight: 650; color: var(--blak);
}