/* ==========================================================================
   Finanslaget: grafisk profil ovanpå Premium Minimal
   Laddas efter theme.css. Värdena kommer från grafisk-manual/profil.json
   (Version 4.5). Ändra profilen först, sedan den här filen.
   ========================================================================== */

/* ---------- Typsnitt (OFL, får bäddas in) ---------- */
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather Sans"; src: url("fonts/MerriweatherSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("fonts/SourceCodePro-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Primitiver ur profilen */
  --fl-b300: #33C5FF;
  --fl-b500: #009BD9;
  --fl-b700: #066186;
  --fl-b900: #023042;
  --fl-n0: #FCFCFC;
  --fl-n100: #F4F4F5;
  --fl-n200: #E5E5E6;
  --fl-n300: #D5D5D7;
  --fl-n400: #8B8B91;
  --fl-n600: #545459;
  --fl-n700: #414144;
  --fl-n750: #363639;
  --fl-n900: #19191A;
  --fl-n925: #0F0F0F;
  --fl-n950: #09090B;

  /* Ljusa ytor och text (semantiska tokens i profilen) */
  --pm-bg: var(--fl-n0);              /* --surface */
  --pm-bg-alt: var(--fl-n100);        /* --surface-sunken */
  --pm-bg-stage: var(--fl-n200);
  --pm-ink: var(--fl-n950);           /* --text-primary */
  --pm-ink-2: var(--fl-n600);         /* --text-secondary */
  --pm-ink-3: var(--fl-n600);
  --pm-ink-2-tint: var(--fl-n700);    /* sekundärtext på grå ytor */
  --pm-line: var(--fl-n300);          /* --border-strong */

  /* Accent: mörkblå bär knappar och accenter, hover Brand 900.
     Temats varma ton finns inte i profilen och pekar på accenten. */
  --pm-accent: var(--fl-b700);
  --pm-accent-hover: var(--fl-b900);
  --pm-warm: var(--fl-b700);

  /* Mörka scener: neutralerna, accenten växlar till ljusblå för kontrast */
  --pm-dark: var(--fl-n950);
  --pm-dark-2: var(--fl-n925);
  --pm-dark-3: var(--fl-n900);
  --pm-dark-ink: #FAFAFA;
  --pm-dark-ink-2: var(--fl-n400);
  --pm-dark-line: var(--fl-n750);
  --pm-dark-accent: var(--fl-b300);

  /* Typografi */
  --pm-font: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --pm-font-head: "Merriweather Sans", Verdana, sans-serif;
  --pm-font-mono: "Source Code Pro", ui-monospace, monospace;
  --pm-tracking-tight: -0.02em;
  --pm-tracking-snug: -0.012em;

  /* Radie: små för fält och knappar, större för kort */
  --pm-radius-lg: 16px;   /* --r-xl */
  --pm-radius-md: 12px;   /* --r-lg */
  --pm-radius-sm: 8px;    /* --r-md */
  --pm-radius-pill: 999px;
}

/* ---------- Typografi ---------- */
.pm-page { letter-spacing: 0; }

/* Huvudrubriker: Merriweather Sans ExtraBold */
.pm-display, .pm-h1, .pm-h2,
.pm-quote-hero blockquote p, .pm-stat__value, .pm-card__big, .pm-prose h2 {
  font-family: var(--pm-font-head);
  font-weight: 800;
}

/* Underrubriker och fetstil: Inter Bold */
.pm-h3, .pm-eyebrow, .pm-card__title, .pm-card__kicker, .pm-plan__name, .pm-plan__amount,
.pm-person__name, .pm-post__title, .pm-specs dd, .pm-footer__cols h2, .pm-logo {
  font-weight: 700;
}
.pm-lead { font-weight: 400; }
.pm-page code, .pm-page kbd, .pm-page samp { font-family: var(--pm-font-mono); }

/* ---------- Knappar: monokroma, 8 px radie ---------- */
.pm-btn { border-radius: var(--pm-radius-sm); font-weight: 700; font-size: 1rem; letter-spacing: 0; color: var(--fl-n0); }
.pm-btn--small { font-weight: 700; font-size: .875rem; }
.pm-btn--dark { background: var(--fl-b700); }
.pm-btn--dark:hover { background: var(--fl-b900); }
.pm-btn--light { background: var(--fl-n0); color: var(--fl-b700); }
.pm-btn--light:hover { background: var(--fl-n200); }
.pm-btn--ghost { color: var(--fl-b700); box-shadow: inset 0 0 0 1.5px currentColor; }
.pm-btn--ghost:hover { background: var(--fl-b700); color: var(--fl-n0); }
.pm-section--dark .pm-btn--ghost { color: var(--fl-n0); }
.pm-section--dark .pm-btn--ghost:hover { background: var(--fl-n0); color: var(--fl-n950); }
.pm-skip { border-radius: var(--pm-radius-sm); }

/* ---------- Fasta färger i temat som inte går via tokens ---------- */
.pm-page ::selection { background: rgba(6, 97, 134, .16); }
.pm-section--dark ::selection, .pm-card--dark ::selection { background: rgba(51, 197, 255, .35); }
.pm-page :focus-visible { outline-color: var(--fl-b700); }
.pm-section--dark :focus-visible { outline-color: var(--fl-b300); }

.pm-gradient-text { background-image: linear-gradient(100deg, var(--fl-n950) 10%, var(--fl-n600) 90%); }
.pm-section--dark .pm-gradient-text { background-image: linear-gradient(100deg, #FFFFFF 0%, var(--fl-b300) 100%); }
.pm-card__big--warm { background-image: linear-gradient(90deg, var(--fl-b700) 0%, var(--fl-b500) 100%); }
.pm-card--dark .pm-icon { color: var(--fl-b300); }
.pm-dimmer { background-image: linear-gradient(90deg, var(--fl-b900), var(--fl-b500) 50%, var(--fl-b300)); }

.pm-field input:focus, .pm-field select:focus, .pm-field textarea:focus { box-shadow: 0 0 0 4px rgba(6, 97, 134, .15); }

/* CTA-skenet och kortens hoverljus i blått i stället för temats varma ton */
.pm-cta::before { background: radial-gradient(circle, rgba(0, 155, 217, .45) 0%, rgba(6, 97, 134, .25) 32%, transparent 64%); }
@media (hover: hover) and (pointer: fine) {
  .pm-card--dark::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(51, 197, 255, .14), transparent 60%); }
}

/* ==========================================================================
   Header: logotyp och meny
   Logotypen är profilens original (meta.logo), positiv på ljus botten.
   16 px hög som på förra sajten. Frizonen FF (F-bredden gånger två) blir då
   cirka 31 px, så headern är 16 + 2 × 31 = 78 px hög.
   Menyn följer förra sajtens struktur (partials/nav-data.php).
   ========================================================================== */
:root { --pm-header-h: 78px; --fl-nav-bp: 1200px; }

.fl-header { background: rgba(252, 252, 252, .86); border-bottom-color: var(--fl-n200); }
.fl-logo { display: inline-flex; flex-shrink: 0; color: var(--fl-n950); line-height: 0; }
.fl-logo__svg { height: 16px; width: auto; display: block; }

.fl-header .pm-nav { gap: 1.75rem; }
.fl-header .pm-nav__list { gap: 1.5rem; align-items: center; }
.fl-header .pm-nav__list > li > a {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .9375rem; color: var(--fl-n700); letter-spacing: 0;
}
.fl-header .pm-nav__list > li > a:hover,
.fl-header .pm-nav__list > li > a[aria-current="page"] { color: var(--fl-n950); }

.fl-login { gap: .45rem; min-height: 40px; padding: .5rem 1.1rem; }
.fl-login svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* Utfällbara menyer: öppnas vid hover och tangentbordsfokus */
.fl-dd { position: relative; }
.fl-dd__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--pm-ease); }
.fl-dd__panel {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  width: 560px; margin-top: 14px; padding: .75rem;
  background: #FFFFFF; border: 1px solid var(--fl-n200); border-radius: var(--pm-radius-md);
  box-shadow: 0 18px 48px rgba(9, 9, 11, .10), 0 2px 6px rgba(9, 9, 11, .04);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .2s var(--pm-ease), transform .25s var(--pm-ease-out), visibility 0s .25s;
}
/* Osynlig brygga över glappet, så att menyn inte stängs på väg ner */
.fl-dd__panel::before { content: ""; position: absolute; inset: -16px 0 100% 0; }
.fl-dd:hover .fl-dd__panel, .fl-dd:focus-within .fl-dd__panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.fl-dd:hover .fl-dd__chev, .fl-dd:focus-within .fl-dd__chev { transform: rotate(180deg); }

.fl-dd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.fl-header .fl-dd__grid a {
  display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .75rem;
  border-radius: var(--pm-radius-sm); text-decoration: none; color: var(--fl-n950);
  transition: background-color .15s var(--pm-ease);
}
.fl-header .fl-dd__grid a:hover, .fl-header .fl-dd__grid a:focus-visible { background: var(--fl-n100); }
.fl-ico {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--pm-radius-sm);
  background: rgba(6, 97, 134, .08); position: relative;
}
/* Ikonfilen sätts som mask i HTML (style-attributet), så att sökvägen utgår från sidan */
.fl-ico > span {
  position: absolute; inset: 9px; background: var(--fl-b700);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.fl-dd__label { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.fl-dd__label strong { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.fl-dd__label span { font-size: .8125rem; line-height: 1.4; color: var(--fl-n600); }
.fl-header .fl-dd__all {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .5rem; padding: .85rem .75rem .35rem; border-top: 1px solid var(--fl-n200);
  font-size: .875rem; font-weight: 700; color: var(--fl-b700); text-decoration: none;
}
.fl-header .fl-dd__all svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--pm-ease); }
.fl-header .fl-dd__all:hover svg { transform: translateX(3px); }

/* Branscher har nio poster: bredare panel */
.fl-dd:nth-child(2) .fl-dd__panel { width: 600px; }

/* Mobilmeny: samma brytpunkt som i theme.js (1200 px), eftersom logotypen
   och sex menyval inte får plats på en rad under det. */
@media (max-width: 1200px) {
  .fl-header .pm-nav__toggle { display: block; }
  .fl-header .pm-nav {
    position: fixed; inset: var(--pm-header-h) 0 auto 0; height: calc(100dvh - var(--pm-header-h));
    flex-direction: column; align-items: stretch; gap: 2rem;
    padding: 1.5rem var(--pm-gutter) 3rem; overflow-y: auto; overscroll-behavior: contain;
    background: var(--fl-n0);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s var(--pm-ease), transform .4s var(--pm-ease-out), visibility 0s .4s;
  }
  .fl-header.is-open .pm-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .fl-header .pm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .fl-header .pm-nav__list > li { border-bottom: 1px solid var(--fl-n200); }
  .fl-header .pm-nav__list > li > a {
    display: flex; padding: 1rem 0;
    font-family: var(--pm-font-head); font-weight: 800; font-size: 1.375rem; color: var(--fl-n950);
  }
  .fl-dd__chev { display: none; }
  .fl-dd__panel, .fl-dd:hover .fl-dd__panel, .fl-dd:focus-within .fl-dd__panel {
    position: static; width: auto !important; margin: -.25rem 0 1rem; padding: 0;
    border: 0; box-shadow: none; background: none; border-radius: 0;
    opacity: 1; visibility: visible; transform: none;
  }
  .fl-dd__panel::before { display: none; }
  .fl-dd__grid { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .fl-header .fl-dd__grid a { padding: .45rem 0; }
  .fl-header .fl-dd__grid a:hover { background: none; color: var(--fl-b700); }
  .fl-ico, .fl-dd__label span { display: none; }
  .fl-dd__label strong { font-weight: 400; font-size: 1rem; }
  .fl-header .fl-dd__all { border-top: 0; margin-top: .25rem; padding: .45rem 0 0; justify-content: flex-start; gap: .4rem; }
  .fl-login { align-self: flex-start; min-height: 46px; padding: .75rem 1.5rem; font-size: 1rem; }
}
@media (max-width: 560px) { .fl-dd__grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.fl-footer { font-size: .875rem; color: var(--fl-n600); }
.fl-footer a { color: var(--fl-n600); }
.fl-footer a:hover { color: var(--fl-n950); }
.fl-footer__top { display: grid; grid-template-columns: minmax(240px, 1fr) 3fr; gap: 3rem; padding-bottom: 1rem; }
.fl-footer__brand img { width: 220px; height: auto; display: block; margin-bottom: 1.5rem; }
.fl-footer__brand .pm-footer__note { border: 0; padding: 0; max-width: 34ch; }
.fl-footer .pm-footer__cols { padding-block: 0; }
.fl-footer .pm-footer__cols h2 { font-size: .875rem; font-weight: 700; color: var(--fl-n950); }
.fl-footer .pm-footer__bottom { font-size: .8125rem; }
@media (max-width: 1068px) { .fl-footer__top { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 1200px) { .fl-header .pm-nav__list > li > a:focus-visible { outline-offset: -2px; } }

/* ---------- Hero ----------
   Temats 12ch är byggd för ett kort produktnamn. Vårt budskap är en mening
   och får bryta på två rader, ingressen likaså. */
.pm-hero__title { max-width: 20ch; }
.pm-hero__lead { max-width: 44ch; font-weight: 400; }

/* ---------- Objektband i heron ----------
   Små kort med vanliga objekt som rullar förbi. Två identiska listor bredvid
   varandra flyttas en listbredd åt vänster, så att bandet går runt utan skarv.
   Den andra listan är dold för skärmläsare. */
.pm-hero { padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); }
.fl-objekt { margin-top: clamp(4rem, 7vw, 6.5rem); }
.fl-objekt__title { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.fl-objekt__viewport {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fl-objekt__track {
  display: flex; gap: 1rem; padding-right: 1rem; flex-shrink: 0;
  animation: fl-objekt-rull 60s linear infinite;
}
.fl-objekt__viewport:hover .fl-objekt__track { animation-play-state: paused; }
@keyframes fl-objekt-rull { to { transform: translateX(-100%); } }

.fl-objekt__card {
  flex: 0 0 auto; width: clamp(180px, 18vw, 240px);
  background: #FFFFFF; border: 1px solid var(--fl-n200); border-radius: var(--pm-radius-md);
  overflow: hidden; text-align: left;
}
.fl-objekt__card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.fl-objekt__card p { display: flex; flex-direction: column; gap: .1rem; padding: .75rem 1rem .9rem; border-top: 1px solid var(--fl-n200); }
.fl-objekt__card strong { font-size: .9375rem; font-weight: 700; color: var(--fl-n950); line-height: 1.3; }
.fl-objekt__card span { font-size: .8125rem; color: var(--fl-n600); line-height: 1.4; }

/* Utan rörelse: bandet står still och går att svepa i sidled */
@media (prefers-reduced-motion: reduce) {
  .fl-objekt__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--pm-gutter); }
  .fl-objekt__track { animation: none; }
  .fl-objekt__track[aria-hidden="true"] { display: none; }
}

/* ---------- Tjänster (bento) ----------
   Stora kortet beskriver helheten, de fem mindre är en tjänst var.
   Ikonerna är samma Streamline-ikoner som i menyn, tonade i mörkblått. */
.fl-card-ico {
  position: relative; display: block; width: 48px; height: 48px; flex: none;
  border-radius: var(--pm-radius-sm); background: rgba(6, 97, 134, .08); margin-bottom: .5rem;
}
.fl-card-ico > span {
  position: absolute; inset: 12px; background: var(--fl-b700);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.pm-card--dark .fl-card-ico { background: rgba(51, 197, 255, .12); }
.pm-card--dark .fl-card-ico > span { background: var(--fl-b300); }
.fl-tjanst .pm-card__title { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.fl-tjanst .pm-muted { font-size: .9375rem; line-height: 1.5; }
.fl-tjanst__link { margin-top: auto; font-size: .9375rem; }
.fl-tjanst .pm-muted { margin-bottom: .5rem; }
.pm-bento__a .pm-link { margin-top: .25rem; }
.pm-bento__a img { object-position: 60% 40%; }
.pm-card--dark .pm-link { color: var(--fl-b300); }

/* ---------- Textlänkar med chevron ----------
   Understrykningen vid hover ska bara ligga under texten. Ett absolut
   positionerat element ärver inte förälderns text-decoration, så chevronen
   lyfts ur flödet och får sin plats av länkens högermarginal. */
.pm-link { position: relative; padding-right: .7em; width: fit-content; }
.pm-link::after { position: absolute; right: 0; top: 50%; transform: translateY(-54%); }
.pm-link:hover::after { transform: translate(3px, -54%); }

/* ---------- Finanslaget i siffror ----------
   Ersätter temats pressrad. Värdet i rubriktypsnittet, förklaringen under. */
.fl-fakta__list {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.5rem clamp(2.5rem, 7vw, 6rem); text-align: center;
}
.fl-fakta__list li { display: flex; flex-direction: column; gap: .3rem; }
.fl-fakta__list strong {
  font-family: var(--pm-font-head); font-weight: 800; color: var(--fl-n950);
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.01em;
}
.fl-fakta__list span { font-size: .9375rem; color: var(--fl-n600); }
@media (max-width: 640px) { .fl-fakta__list { flex-direction: column; } }

/* ---------- Pennknappen för redigeringsläget ----------
   Visas bara för inloggade i Karl (se skriptet sist i index.html). */
.fl-editpen {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--fl-b700); color: var(--fl-n0);
  box-shadow: 0 10px 28px rgba(9, 9, 11, .24);
  transition: background-color .2s var(--pm-ease), transform .2s var(--pm-ease);
}
.fl-editpen:hover { background: var(--fl-b900); transform: translateY(-2px); }
.fl-editpen:focus-visible { outline: 2px solid var(--fl-b700); outline-offset: 3px; }
.fl-editpen svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- UC-sigill under hero-knapparna ---------- */
.fl-uc { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.5rem; font-size: .875rem; color: var(--fl-n600); }
.fl-uc img { width: auto; height: 24px; flex: none; }
.fl-uc-wrap { text-align: center; }

/* ---------- Trust-band efter heron ----------
   Fyra korta bevis på en rad, åtskilda av tunna linjer. Bockarna och
   stjärnorna är mörkblå: profilens statusfärger är inte dekoration. */
.fl-trust { background: var(--fl-n0); border-bottom: 1px solid var(--fl-n200); padding-block: 1.25rem; }
.fl-trust__list { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .75rem 0; }
.fl-trust__list li {
  display: inline-flex; align-items: center; gap: .55rem;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  font-size: .875rem; color: var(--fl-n700); white-space: nowrap;
}
.fl-trust__list li + li { border-left: 1px solid var(--fl-n200); }
.fl-trust__check {
  width: 18px; height: 18px; padding: 3px; border-radius: 50%; flex: none;
  background: rgba(6, 97, 134, .1); color: var(--fl-b700);
  fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
}
.fl-trust__list img { width: auto; height: 20px; flex: none; }
.fl-trust__stars { width: 80px; height: 16px; color: var(--fl-b700); flex: none; }
@media (max-width: 900px) {
  .fl-trust__list { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
  .fl-trust__list li, .fl-trust__list li + li { border-left: 0; padding-inline: 0; white-space: normal; }
}
@media (max-width: 480px) { .fl-trust__list { grid-template-columns: 1fr; } }

/* ---------- Stora tjänstekortet: text på bilden ----------
   Bilden fyller hela kortet och texten ligger nere till vänster. En mörk
   toning underifrån bär den vita texten, så att kontrasten klarar WCAG AA. */
.fl-bento-bild { justify-content: flex-end; color: #FFFFFF; isolation: isolate; }
.fl-bento-bild img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 62% 40%;
}
.fl-bento-bild::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 9, 11, .82) 0%, rgba(9, 9, 11, .55) 32%, rgba(9, 9, 11, 0) 62%);
}
.fl-bento-bild .pm-card__text { padding-top: 0; padding-bottom: clamp(1.75rem, 3vw, 3.25rem); }
.fl-bento-bild .pm-card__title { color: #FFFFFF; }
.fl-bento-bild .pm-muted { color: rgba(255, 255, 255, .86); }
.fl-bento-bild .pm-link { color: #FFFFFF; font-weight: 700; }
.fl-bento-bild .pm-link:hover { color: #FFFFFF; }

/* ---------- Mörkblå tjänstekort med vågmönster ----------
   Profilen (Designelement, Mönster): vågmönstret i Brand 500 på cirka 50 %
   opacitet mot Brand 700. Där text ligger ovanpå tonas mönstret ut
   diagonalt, så att texten får en lugn yta uppe till vänster. */
.fl-card--brand { background: var(--fl-b700) !important; color: #FFFFFF; isolation: isolate; }
.fl-card--brand::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("patterns/vag-pattern-brand500.svg") right bottom / 560px auto no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 75%);
  mask-image: linear-gradient(135deg, transparent 30%, #000 75%);
}
.fl-card--brand .pm-card__title { color: #FFFFFF; }
.fl-card--brand .pm-muted { color: rgba(255, 255, 255, .84); }
.fl-card--brand .pm-link { color: #FFFFFF; font-weight: 700; }
.fl-card--brand .fl-card-ico { background: rgba(255, 255, 255, .14); }
.fl-card--brand .fl-card-ico > span { background: #FFFFFF; }
.fl-card--brand ::selection { background: rgba(51, 197, 255, .35); color: #FFFFFF; }

/* ---------- Klickbara tjänstekort ----------
   Kortets enda länk sträcks över hela kortet med ett osynligt ::before, så
   att hela ytan går att klicka men tangentbord och skärmläsare fortfarande
   möter en länk per kort. Länktexten ligger i en <span>, och det är den som
   stryks under när man hovrar över kortet. Chevronen står i flödet här. */
.fl-klickbar { cursor: pointer; transition: transform .3s var(--pm-ease), box-shadow .3s var(--pm-ease); }
.fl-klickbar:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(9, 9, 11, .10); }
.fl-kortlank { position: static; padding-right: 0; }
.fl-kortlank::after { position: static; transform: translateY(-.04em); }
.fl-kortlank::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.fl-kortlank:hover { text-decoration: none; }
.fl-klickbar:hover .fl-kortlank span { text-decoration: underline; text-underline-offset: .2em; }
.fl-klickbar:hover .fl-kortlank::after { transform: translate(3px, -.04em); }
.fl-kortlank:focus-visible { outline: none; }
.fl-klickbar:has(.fl-kortlank:focus-visible) { outline: 2px solid var(--fl-b700); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fl-klickbar:hover { transform: none; } }

/* ---------- Budskap med Sverigekonturen ----------
   Uppställningen följer profilens rollup: solid mörkblå yta (Brand 700) med
   Sverigekonturen och payoffen. Kartan är vit i filen och ligger på 45 %
   opacitet, samma värde som på försättsbladen. Värdeorden och deras texter
   är profilens egna (Ideologi, Värdeord). */
.fl-sverige { position: relative; overflow: hidden; isolation: isolate; background: var(--fl-b700); color: #FFFFFF; }
.fl-sverige__karta {
  position: absolute; z-index: -1; pointer-events: none;
  top: 50%; right: max(6vw, calc((100vw - var(--pm-container)) / 2));
  height: calc(100% - 4rem); width: auto; transform: translateY(-50%);
  opacity: .45;
}
.fl-sverige__content { max-width: 46rem; }
.fl-sverige__content .pm-lead { max-width: 36rem; }
.fl-sverige .pm-h1 { color: #FFFFFF; }
.fl-sverige__accent { color: #FFFFFF; }
.fl-sverige .pm-lead { margin-top: 1.5rem; color: rgba(255, 255, 255, .86); }
.fl-varden {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem);
  margin: var(--pm-space-block) 0 0; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .22);
  max-width: 62%;
}
.fl-varden dt { font-weight: 700; font-size: 1.0625rem; color: #FFFFFF; }
.fl-varden dd { margin: .4rem 0 0; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.fl-sverige ::selection { background: rgba(51, 197, 255, .35); color: #FFFFFF; }
@media (max-width: 1068px) {
  .fl-varden { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 70%; }
}
@media (max-width: 734px) {
  .fl-sverige__karta { right: -12%; opacity: .22; }
  .fl-varden { max-width: none; }
}
@media (max-width: 480px) { .fl-varden { grid-template-columns: 1fr; } }

/* ---------- Så enkelt är det ----------
   Temats steg (linjen som ritas in ovanför varje steg) med förra sajtens
   fyra steg och ikoner. Ikonerna i samma platta som tjänstekorten. */
.fl-steg__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fl-steg .fl-card-ico { margin-bottom: 1.25rem; }
.fl-steg .pm-h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.fl-steg .pm-muted { font-size: .9375rem; line-height: 1.55; }
.fl-steg__cta { margin-top: var(--pm-space-block); text-align: center; }
@media (max-width: 1068px) { .fl-steg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fl-steg__list { grid-template-columns: 1fr; } }

/* ---------- Så enkelt är det: rörelse ----------
   Temats streck ovanför stegen är borta. I stället går en tunn bana från
   ikon till ikon. Den fylls i mörkblått medan man scrollar (--fl-p, sätts av
   finanslaget.js) och varje ikon tänds när fyllningen når den.
     --seg  hur långt banan efter steget har fyllts (0–1)
     --on   hur tänd stegets ikon är (0–1)
   Utan skript eller med minskad rörelse är --fl-p 1: allt står tänt. */
.fl-steg__list { --g: clamp(2rem, 4vw, 3.5rem); --fl-p: 1; gap: var(--g); }
.fl-steg .pm-step { border-top: 0; padding-top: 0; }
.fl-steg .pm-step::before { display: none; }
.fl-steg .pm-step {
  --seg: clamp(0, calc(var(--fl-p) * 3 - var(--i)), 1);
  --on: calc(clamp(0, calc((var(--fl-p) * 3 - var(--i)) * 5 + 1), 1) * clamp(0, calc(var(--fl-p) * 20), 1));
}
.fl-steg .fl-card-ico {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--fl-b700) calc(var(--on) * 100%), #E9F0F3);
  transform: scale(calc(.94 + var(--on) * .06));
  transition: background-color .35s var(--pm-ease), transform .35s var(--pm-ease);
}
.fl-steg .fl-card-ico > span {
  background: color-mix(in srgb, #FFFFFF calc(var(--on) * 100%), var(--fl-b700));
  transition: background-color .35s var(--pm-ease);
}

/* Banan: från ikonens högerkant till nästa ikons vänsterkant */
.fl-steg .pm-step:not(:last-child)::after {
  content: ""; position: absolute; pointer-events: none;
  top: 23px; left: calc(48px + 14px); width: calc(100% + var(--g) - 48px - 28px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--fl-b700) calc(var(--seg) * 100%), var(--fl-n200) 0);
}

/* Två och två: ingen bana från radens sista steg */
@media (max-width: 1068px) {
  .fl-steg .pm-step:nth-child(2)::after { display: none; }
}

/* Under varandra: ikonen till vänster om texten, banan går lodrätt */
@media (max-width: 600px) {
  .fl-steg .pm-step { display: grid; grid-template-columns: 48px 1fr; column-gap: 1.25rem; align-items: start; }
  .fl-steg .fl-card-ico { grid-row: span 2; margin-bottom: 0; }
  .fl-steg .pm-step .pm-h3 { margin: .6rem 0 .35rem; }
  .fl-steg .pm-step:nth-child(2)::after { display: block; }
  .fl-steg .pm-step:not(:last-child)::after {
    top: calc(48px + 10px); left: 23px; width: 2px; height: auto; bottom: calc(-1 * var(--g) + 10px);
    background: linear-gradient(180deg, var(--fl-b700) calc(var(--seg) * 100%), var(--fl-n200) 0);
  }
}

/* ---------- Branscher ----------
   Nio bildkort, ikon och namn ovanpå bilden. En mörk toning underifrån bär
   den vita texten (WCAG AA mot bild). Hela kortet är länken. */
.fl-branscher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.fl-bransch {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; border-radius: var(--pm-radius-lg); text-decoration: none; color: #FFFFFF;
}
/* Två kolumner: lite högre kort så att bilden inte blir en smal remsa */
@media (max-width: 900px) and (min-width: 521px) { .fl-bransch { aspect-ratio: 4 / 3; } }
.fl-bransch img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--pm-ease-out);
}
.fl-bransch::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Tät toning nertill där ikon och text står, lätt slöja över resten så att bilden inte tar fokus */
  background: linear-gradient(to top, rgba(9, 9, 11, .88) 0%, rgba(9, 9, 11, .6) 32%, rgba(9, 9, 11, .28) 65%, rgba(9, 9, 11, .18) 100%);
}
.fl-bransch__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .75rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.25;
}
.fl-bransch .fl-card-ico { width: 40px; height: 40px; margin: 0; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fl-bransch .fl-card-ico > span { inset: 10px; background: #FFFFFF; }
.fl-bransch:hover img { transform: scale(1.04); }
.fl-bransch:focus-visible { outline: 2px solid var(--fl-b700); outline-offset: 3px; }
.fl-branscher__alla { margin-top: 2rem; }
@media (max-width: 900px) { .fl-branscher { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fl-branscher { grid-template-columns: 1fr; } .fl-bransch { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .fl-bransch:hover img { transform: none; } }

/* ---------- Hero med bild ----------
   Verkstadsbilden fyller heron. En mörkblå toning (Brand 900) gör den vita
   texten läsbar; den är tätast bakom rubriken och längst ner, där
   objektbandet ligger. Bilden ska senare ersättas av en filmslinga med
   samma första bildruta, så att övergången blir osynlig. */
.fl-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--fl-n900); color: #FFFFFF; }
.fl-hero__bild { position: absolute; inset: 0; z-index: -2; }
.fl-hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.fl-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Neutral skuggning, bara bakom texten: bildens egna färger behålls */
  background: radial-gradient(ellipse 62% 50% at 50% 54%, rgba(9, 9, 11, .58) 0%, rgba(9, 9, 11, .34) 55%, rgba(9, 9, 11, 0) 100%);
}
.fl-hero .pm-hero__title, .fl-hero .pm-hero__lead, .fl-hero .pm-link { text-shadow: 0 1px 2px rgba(9, 9, 11, .35), 0 2px 24px rgba(9, 9, 11, .35); }
.fl-hero .pm-hero__title { color: #FFFFFF; }
.fl-hero .pm-hero__lead { color: rgba(255, 255, 255, .92); }
/* Primärknappen blir vit på den mörka bilden: mörkblått mot mörkblått syns inte */
.fl-hero .pm-btn { background: #FFFFFF; color: var(--fl-b700); }
.fl-hero .pm-btn:hover { background: var(--fl-n200); }
.fl-hero .pm-link { color: #FFFFFF; font-weight: 700; }
.fl-hero ::selection { background: rgba(51, 197, 255, .35); color: #FFFFFF; }
@media (max-width: 734px) { .fl-hero__bild img { object-position: 82% 50%; } }

/* Heron utan objektband: fyller skärmen (högst 860 px) med innehållet centrerat */
.fl-hero {
  min-height: clamp(520px, calc(100svh - var(--pm-header-h)), 860px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(4rem, 8vw, 7rem);
}
/* Objektbandet efter branschrutnätet */
#branscher .fl-objekt { margin-top: clamp(3.5rem, 6vw, 5.5rem); }

/* ---------- Ansökningsformulär (ersätter temats prisplaner) ----------
   Vänster: tre steg (objekt, avtal, företag). Höger: summan, som följer med
   när man scrollar på dator och hamnar sist på mobil. Formuläret är en demo:
   assets/ansokan.js räknar via api/kalkyl.php och skickar ingenting. */
.fl-ansok {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(1rem, 2vw, 1.5rem); align-items: start;
}
.fl-ansok__main { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.fl-ansok__steg {
  margin: 0; min-width: 0; border: 1px solid var(--fl-n200); border-radius: var(--pm-radius-md);
  background: #FFFFFF; padding: clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: 1.1rem;
}
.fl-ansok__steg legend {
  float: left; width: 100%; padding: 0; margin-bottom: .25rem;
  display: flex; align-items: center; gap: .75rem;
  font-weight: 700; font-size: 1.1875rem; line-height: 1.3; color: var(--fl-n950);
}
.fl-ansok__steg legend + * { clear: both; }
.fl-ansok__nr {
  flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--fl-b700); color: var(--fl-n0); font-size: .9375rem;
}

/* Objektrader */
.fl-objektlista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.fl-objektrad {
  display: grid; grid-template-columns: minmax(0, 2fr) 84px minmax(0, 1.2fr) 44px;
  gap: .75rem; align-items: end;
  padding: 1rem; border-radius: var(--pm-radius-sm); background: var(--fl-n100);
}
.fl-objektrad .pm-field input, .fl-objektrad .pm-field select { background-color: #FFFFFF; min-height: 48px; font-size: 1rem; }
.fl-objektrad__ta-bort {
  display: grid; place-items: center; width: 44px; height: 48px; padding: 0;
  border: 0; border-radius: var(--pm-radius-sm); background: transparent; color: var(--fl-n600); cursor: pointer;
}
.fl-objektrad__ta-bort:hover { background: var(--fl-n200); color: var(--fl-n950); }
.fl-objektrad__ta-bort svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fl-objektrad__ta-bort[hidden] { display: grid; visibility: hidden; }
.fl-ansok__lagg {
  justify-self: start; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1rem; border: 1.5px dashed var(--fl-n300); border-radius: var(--pm-radius-sm);
  background: transparent; color: var(--fl-b700); font: inherit; font-weight: 700; cursor: pointer;
}
.fl-ansok__lagg:hover { border-color: var(--fl-b700); background: rgba(6, 97, 134, .05); }
.fl-ansok__lagg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fl-ansok button:focus-visible { outline: 2px solid var(--fl-b700); outline-offset: 2px; }

/* Belopp med "kr" i fältet */
.fl-ansok__kr { position: relative; }
.fl-ansok__kr input { padding-right: 2.75rem; text-align: right; font-variant-numeric: tabular-nums; }
.fl-ansok__kr span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--fl-n600); pointer-events: none; }

/* Avtal */
.fl-ansok__grupp { display: grid; gap: .45rem; }
.fl-ansok__etikett { font-size: var(--pm-fs-small); font-weight: 500; color: var(--pm-ink); }
.fl-ansok__tid { margin-top: 0; justify-self: start; flex-wrap: wrap; }
.fl-ansok__forhojd { max-width: 320px; }
.fl-ansok__valfri { font-weight: 400; color: var(--fl-n600); }
.fl-ansok__hjalp { margin: 0; font-size: var(--pm-fs-micro); color: var(--fl-n600); }
.fl-ansok__hjalp--varning { color: #9A3412; }
.fl-falt--fel input, .fl-falt--fel select { border-color: #B42318; }
.fl-falt--fel label { color: #B42318; }

/* Summan */
.fl-ansok__summa {
  position: sticky; top: calc(var(--pm-header-h, 76px) + 1.5rem);
  border-radius: var(--pm-radius-md); background: var(--fl-b900); color: var(--fl-n0);
  padding: clamp(1.5rem, 2.5vw, 2rem); display: grid; gap: 1rem;
}
.fl-ansok__summa-titel { margin: 0; font-size: 1rem; font-weight: 700; color: rgba(252, 252, 252, .8); }
.fl-ansok__manad { margin: 0; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; line-height: 1; }
.fl-ansok__manad [data-fl-manad] {
  font-family: var(--pm-font-head); font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  transition: opacity .2s var(--pm-ease);
}
.fl-ansok--uppskattning .fl-ansok__manad [data-fl-manad] { opacity: .6; }
.fl-ansok__per { font-weight: 700; color: rgba(252, 252, 252, .8); }
.fl-ansok__status { margin: -.25rem 0 0; font-size: var(--pm-fs-small); color: rgba(252, 252, 252, .75); min-height: 1.5em; }
.fl-ansok__rader { margin: 0; display: grid; gap: .6rem; padding-block: 1rem; border-block: 1px solid rgba(252, 252, 252, .15); }
.fl-ansok__rader div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--pm-fs-small); }
.fl-ansok__rader dt { color: rgba(252, 252, 252, .75); }
.fl-ansok__rader dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.fl-ansok__summa .pm-btn { background: var(--fl-n0); color: var(--fl-b700); margin-top: .25rem; }
.fl-ansok__summa .pm-btn:hover { background: var(--fl-n200); }
.fl-ansok__summa .pm-btn:focus-visible { outline: 2px solid var(--fl-b300); outline-offset: 3px; }
.fl-ansok__villkor, .fl-ansok__demo { margin: 0; font-size: var(--pm-fs-micro); line-height: 1.5; color: rgba(252, 252, 252, .7); }
.fl-ansok__demo { padding: .6rem .75rem; border-radius: var(--pm-radius-sm); background: rgba(51, 197, 255, .12); color: rgba(252, 252, 252, .85); }

/* Tack */
.fl-ansok__tack {
  max-width: 640px; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: 1rem;
  padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--pm-radius-md); background: #FFFFFF; border: 1px solid var(--fl-n200);
}
.fl-ansok__tack:focus { outline: none; }
.fl-ansok__tack p { margin: 0; color: var(--fl-n600); }
.fl-ansok__tack svg { width: 48px; height: 48px; padding: 10px; border-radius: 50%; background: var(--fl-b700); fill: none; stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fl-ansok[hidden], .fl-ansok__tack[hidden] { display: none; }

@media (max-width: 1100px) {
  .fl-objektrad { grid-template-columns: 84px minmax(0, 1fr) 44px; }
  .fl-objektrad__namn { grid-column: 1 / 3; grid-row: 1; }
  .fl-objektrad__ta-bort { grid-column: 3; grid-row: 1; }
  .fl-objektrad__antal { grid-column: 1; }
  .fl-objektrad__pris { grid-column: 2 / -1; }
}
@media (max-width: 900px) {
  .fl-ansok { grid-template-columns: 1fr; }
  .fl-ansok__summa { position: static; }
}
@media (max-width: 520px) {
  .fl-ansok .pm-form__row { grid-template-columns: 1fr; }
  .fl-ansok__tid button { padding-inline: .9rem; }
}