/* ==========================================================================
   ADX Flamingo - grunden (flamingo.css)

   Flamingos egen design: typsnitt, tokens, baselement, de delade
   primitiverna (.fl-wrap, .fl-sec, .fl-btn, .fl-card ...), sidhuvud,
   mobilmeny, sidfot, personalremsan, utkastnotisen, 404 och de delade
   blocktypernas Flamingo-mallar (templates/website/blocks/flamingo/
   steps, quotes, bar, split, plans, compare, faq, prose, spacer).
   Flamingo-egna block (fl_*) bor i flamingo-blocks.css.

   Allt är scopat under body.fl och varje klass börjar med fl-, så inget läcker
   till ADX-sajten. Brytpunkter: 900 och 560 px (760 för menyn, samma som
   static/js/menu.js; 600 för jämförelsetabellen).
   ========================================================================== */

/* ---------- Typsnitt: självhostade (static/fonts/files, SIL OFL) ---------- */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("../fonts/files/instrument-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("../fonts/files/instrument-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/files/geist-mono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/files/geist-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens (det delade kontraktet - samma namn i flamingo-blocks.css) ---------- */
.fl{
  --fl-ink:#14121C; --fl-body:#4A4757; --fl-muted:#5D5A6B; --fl-faint:#8A879A;
  --fl-line:#E8E6EF; --fl-soft:#F0EEF5; --fl-panel:#FBFAFD; --fl-panel2:#F6F5FA; --fl-white:#FFFFFF;
  --fl-violet:#6B4EF0; --fl-violet-ink:#4A2FC9; --fl-ok:#1E8A4C; --fl-hot:#FD7C5A; --fl-pink:#D63FB8;
  --fl-band:linear-gradient(90deg,#9EC3FF,#8365F3 30%,#F27AD9 60%,#FD7C5A 82%,#FE9F30);
  --fl-text-grad:linear-gradient(90deg,#6B4EF0,#D63FB8 55%,#F0652F);
  --fl-pastel:linear-gradient(120deg,#EEF3FF,#F4EEFF 45%,#FFEFF8 75%,#FFF3E6);
  --fl-sans:"Instrument Sans",system-ui,sans-serif; --fl-mono:"Geist Mono",ui-monospace,monospace;
  --fl-r-sm:12px; --fl-r-md:18px; --fl-r-lg:28px; --fl-r-xl:36px;
  --fl-shadow:0 24px 60px rgba(20,18,28,.12); --fl-shadow-soft:0 30px 70px rgba(20,18,28,.08); --fl-shadow-violet:0 20px 50px rgba(131,101,243,.12);
  --fl-wrap:1240px; --fl-gutter:32px;
  /* Halva avståndet mellan två sektioner: varje .fl-sec bär det över och
     under sig, så två block i rad hamnar 96 px (64 px i mobil) isär. */
  --fl-sec-y:48px;
  /* Ljus ton av lila för markeringar (jämförelsetabellens sista kolumn). */
  --fl-violet-tint:#F4F0FF;
}
@media (max-width:560px){
  .fl{--fl-gutter:16px; --fl-sec-y:32px}
}

/* ---------- Bas ---------- */
body.fl{
  margin:0;background:var(--fl-white);color:var(--fl-ink);
  font-family:var(--fl-sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Banden sticker ut ur sina lådor med flit; sidan ska aldrig kunna
     scrollas i sidled för det. Varje låda klipper också själv. */
  overflow-x:clip;
  /* Sidfoten längst ner även på korta sidor (verktyget, 404). */
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
body.fl.mob-menu-open{overflow:hidden}
.fl *,.fl *::before,.fl *::after{box-sizing:border-box}
/* :where() håller specificiteten på noll, så verktygslagret (dockan,
   orbarna i site-tools.css) och blockens egna klasser alltid vinner. */
:where(.fl) :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd){margin:0}
:where(.fl) :where(h1,h2,h3,h4,h5,h6){font-weight:600;line-height:1.1;letter-spacing:-.03em}
:where(.fl) :where(img,video){max-width:100%;height:auto}
:where(.fl) :where(button,input,select,textarea){font:inherit;color:inherit}
:where(.fl) a{color:var(--fl-ink)}
:where(.fl) a:hover{color:var(--fl-violet)}
:where(.fl) :focus-visible{outline:2px solid var(--fl-violet);outline-offset:3px}
:where(.fl) ::selection{background:#E4DCFF;color:var(--fl-ink)}
:where(.fl) [hidden]{display:none !important}

/* ---------- Primitiver (kontraktet) ---------- */
.fl-wrap{width:100%;max-width:var(--fl-wrap);margin-inline:auto;padding-inline:var(--fl-gutter)}
.fl-sec{position:relative;padding-block:var(--fl-sec-y)}
.fl-sec-head{display:flex;flex-direction:column;gap:14px;max-width:780px;margin-bottom:40px}
.fl-sec-head:last-child{margin-bottom:0}
.fl-kicker{font-family:var(--fl-mono);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--fl-violet)}
.fl-h1{font-size:clamp(44px,7vw,84px);font-weight:600;letter-spacing:-.05em;line-height:.95}
.fl-h2{font-size:clamp(34px,5vw,56px);font-weight:600;letter-spacing:-.045em;line-height:1}
.fl-h3{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.fl-lead{font-size:20px;line-height:1.55;color:var(--fl-body);max-width:640px}
.fl-grad{background:var(--fl-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.fl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;
  background:var(--fl-ink);color:var(--fl-white);border:1px solid var(--fl-ink);border-radius:999px;
  padding:12px 20px;font-family:var(--fl-sans);font-size:16px;font-weight:600;line-height:1.25;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.fl-btn:hover{background:#2C2838;border-color:#2C2838;color:var(--fl-white);transform:translateY(-1px)}
.fl-btn:active{transform:none}
.fl-btn--ghost{background:var(--fl-white);color:var(--fl-ink);border-color:var(--fl-line)}
.fl-btn--ghost:hover{background:var(--fl-white);color:var(--fl-ink);border-color:var(--fl-ink)}
.fl-btn--light{background:var(--fl-white);color:var(--fl-ink);border-color:var(--fl-white)}
.fl-btn--light:hover{background:#ECE9F5;border-color:#ECE9F5;color:var(--fl-ink)}
.fl-btn--sm{font-size:15px;padding:9px 16px}
.fl-btn--lg{font-size:17px;padding:16px 26px}

.fl-chip{display:inline-flex;align-items:center;gap:6px;background:var(--fl-white);border:1px solid var(--fl-line);border-radius:999px;padding:6px 12px;font-size:14px;line-height:1.3;color:var(--fl-ink)}

.fl-card{position:relative;overflow:hidden;overflow:clip;background:var(--fl-white);border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);padding:30px}
/* Allt i kortet utom bandet målas ovanpå bandet. */
.fl-card > :where(:not(.fl-ribbon)){position:relative}
.fl-card--soft{background:var(--fl-panel2);border-color:transparent}
.fl-card--dark{background:var(--fl-ink);border-color:var(--fl-ink);color:var(--fl-white)}
.fl-card--dark .fl-kicker{color:#C9C3FF}
.fl-card--dark :where(p,li){color:#D6D3E0}
.fl-card--dark :where(a:not(.fl-btn)){color:var(--fl-white)}
.fl-card--pastel{background:var(--fl-pastel);border-color:transparent}

/* Bandet: dekor, aldrig innehåll. Placeras med en egen modifierare; lådan
   runt måste vara position:relative och klippa. Lådorna här skriver
   overflow:hidden följt av overflow:clip: clip gör inte lådan till en
   scrollbehållare, så scrollIntoView eller fokus kan aldrig skjuta
   innehållet i sidled bakom bandet (hidden är reserv för äldre Safari). */
.fl-ribbon{
  position:absolute;pointer-events:none;user-select:none;max-width:none;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 55%,transparent 96%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 55%,transparent 96%);
}

/* Bocklista: lila bock i en ljus rund platta. Används av split och plans. */
.fl-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fl-checks li{position:relative;padding-left:32px;font-size:16px;line-height:1.55;color:var(--fl-body)}
.fl-checks li::before{content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;background:var(--fl-check-bg,#EEE8FF)}
.fl-checks li::after{
  content:"";position:absolute;left:5px;top:7px;width:11px;height:11px;background:var(--fl-check,var(--fl-violet));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.5 2.4L10 3.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.5 2.4L10 3.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Skip-länk och personalremsa ---------- */
.fl-skip{position:absolute;left:16px;top:-120px;z-index:2000;background:var(--fl-ink);color:var(--fl-white);padding:10px 16px;border-radius:var(--fl-r-sm);font-weight:600;text-decoration:none}
.fl-skip:focus,.fl-skip:hover{top:12px;color:var(--fl-white)}

.fl-staffbar{position:relative;z-index:30;background:var(--fl-ink);color:var(--fl-white)}
.fl-staffbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--fl-band)}
.fl-staffbar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-block:10px 13px}
.fl-staffbar__text{font-size:16px;line-height:1.45;color:var(--fl-white)}

.fl-staffbar form{margin:0}
.fl-staffbar__btn{background:transparent;color:var(--fl-white);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:7px 14px;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.fl-staffbar__btn:hover{background:var(--fl-white);color:var(--fl-ink)}
.fl-staffbar__btn:focus-visible{outline-color:var(--fl-white)}

/* ---------- Sidhuvud ---------- */
.fl-header{position:relative;z-index:20}
.fl-header__in{display:flex;align-items:center;gap:12px 28px;min-height:76px;padding-block:14px}
.fl-brand{display:inline-flex;align-items:center;gap:12px;flex:none;min-height:44px;color:var(--fl-ink);text-decoration:none}
.fl-brand:hover{color:var(--fl-ink)}
.fl-brand__adx{display:block;height:18px;width:auto}
.fl-brand__name{display:inline-flex;align-items:center;padding-left:12px;border-left:1px solid var(--fl-line)}
.fl-brand__logo{display:block;height:20px;width:auto}
.fl-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;min-width:0}
.fl-nav a{padding:6px 0;font-size:16px;white-space:nowrap;color:var(--fl-body);text-decoration:none;background:var(--fl-band) no-repeat left bottom/0 2px;transition:background-size .2s ease,color .15s ease}
.fl-nav a:hover{color:var(--fl-ink);background-size:100% 2px}
.fl-nav a[aria-current="page"]{color:var(--fl-ink);font-weight:600;background-size:100% 2px}
.fl-header__end{display:flex;align-items:center;gap:6px 20px;margin-left:auto}
.fl-header__out{margin:0}
.fl-header__link{display:inline-block;padding:6px 0;white-space:nowrap;border:0;background:none;font-size:16px;line-height:1.4;color:var(--fl-body);text-decoration:none;cursor:pointer}
.fl-header__link:hover{color:var(--fl-violet)}
.fl-header__end .fl-btn[aria-current="page"]{background:var(--fl-white);color:var(--fl-ink);border-color:var(--fl-ink)}

.fl-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid var(--fl-line);border-radius:50%;background:var(--fl-white);cursor:pointer}
.fl-burger span{display:block;width:18px;height:2px;border-radius:1px;background:var(--fl-ink)}
.fl-burger:hover{border-color:var(--fl-ink)}

/* ---------- Mobilmenyn (menu.js: [data-menu-open] / [data-menu-close]) ---------- */
.fl-mob-menu{
  position:fixed;inset:0;z-index:1100;display:flex;flex-direction:column;gap:20px;
  padding:14px var(--fl-gutter) 28px;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#F4EEFF 0,var(--fl-white) 260px);
}
.fl-mob-menu__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.fl-mob-menu__kicker{margin-top:8px}
.fl-mob-menu__links{display:flex;flex-direction:column}
.fl-mob-menu__links a{padding:12px 0;border-bottom:1px solid var(--fl-soft);font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.2;color:var(--fl-ink);text-decoration:none;overflow-wrap:anywhere}
.fl-mob-menu__links a[aria-current="page"]{color:var(--fl-violet-ink)}
.fl-mob-menu__cta{width:100%;padding:16px 20px;font-size:17px}
.fl-mob-menu__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-top:16px;border-top:1px solid var(--fl-soft)}
.fl-mob-menu__foot form{margin:0}
.fl-mob-menu__foot a,.fl-mob-menu__foot button{padding:6px 0;border:0;background:none;font-size:17px;color:var(--fl-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Surfplatta: sidlänkarna får en egen rad under loggan och knapparna. */
@media (max-width:1099px){
  .fl-header__in{flex-wrap:wrap;row-gap:0}
  .fl-nav{order:3;flex-basis:100%;gap:0 22px}
}
@media (max-width:760px){
  .fl-header__in{min-height:68px;padding-block:12px}
  .fl-nav,.fl-header__end{display:none}
  .fl-burger{display:inline-flex}
}
@media (min-width:761px){
  .fl-mob-menu{display:none !important}
}

/* ---------- Innehållsytan, utkastnotisen, sidfoten ---------- */
.fl-main{display:block;flex:1 0 auto;padding-bottom:var(--fl-sec-y)}
/* Byråns docka ligger fast nere till vänster på telefonen: låt sidfotens
   sista rad gå att scrolla fram förbi den. Bara när dockan finns. */
@media (max-width:560px){body.fl:has(.c-admin-dock) .fl-footer__in{padding-bottom:72px}}
.fl-draftnote{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;
  padding:6px 14px 6px 6px;border:1px dashed #F5B26B;border-radius:999px;background:#FFF3E6;
  font-size:16px;line-height:1.4;color:#7A430D;
}
.fl-draftnote b{background:var(--fl-ink);color:var(--fl-white);border-radius:999px;padding:3px 10px;font-size:14px;font-weight:600}

.fl-footer{position:relative;background:var(--fl-panel);border-top:1px solid var(--fl-soft)}
.fl-footer__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:32px 40px;font-size:16px;color:var(--fl-muted)}
.fl-footer a{color:var(--fl-body);text-underline-offset:3px}
.fl-footer a:hover{color:var(--fl-violet)}
@media (max-width:560px){
  /* Tumvänlig länk: kanten ökar tryckytan utan att raden växer. */
  .fl-footer__in a{padding-block:10px}
  /* Byråns docka (site-tools.css) är 72 px och skymmer brödtext i
     telefonbredd. Bara på Flamingos sidor: mindre, närmare hörnet och lite
     genomskinlig tills den öppnas. ADX-sajten behåller sin docka. */
  body.fl .c-admin-dock{left:8px;bottom:8px}
  body.fl .c-admin-dock__toggle{width:48px;height:48px}
  body.fl .c-admin-dock:not(.is-open) .c-admin-dock__toggle{opacity:.85}
}

/* ---------- 404 ---------- */
.fl-404{overflow:hidden;overflow:clip;padding-block:clamp(56px,10vw,120px)}
.fl-404__ribbon{right:-160px;top:-80px;width:780px;opacity:.85}
.fl-404__in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.fl-404__in .fl-lead{max-width:560px}
.fl-404__path{font-family:var(--fl-mono);font-size:.85em;color:var(--fl-ink);background:var(--fl-panel2);border-radius:8px;padding:2px 8px;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fl-404__actions{margin-top:6px}

/* ==========================================================================
   Delade blocktyper i Flamingo-design (templates/website/blocks/flamingo/)
   ========================================================================== */

/* ---------- steps: numrerade kort ---------- */
.fl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px}
.fl-step{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 28px 30px;border-radius:var(--fl-r-lg);background:var(--fl-panel2)}
/* Ett tunt band från siffran mot kortets kant: stegen läses som en bana. */
.fl-step::after{content:"";position:absolute;left:84px;right:28px;top:47px;height:2px;border-radius:2px;background:var(--fl-band);opacity:.55}
.fl-step__num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:8px;border-radius:50%;background:var(--fl-ink);color:var(--fl-white);font-family:var(--fl-mono);font-size:14px;font-weight:500;line-height:1}
.fl-step__title{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.fl-step__text{font-size:16px;line-height:1.6;color:var(--fl-body)}

/* ---------- quotes: kundcitat ---------- */
.fl-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.fl-quote{display:flex;flex-direction:column;gap:20px;margin:0;padding:30px;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);background:var(--fl-white)}
.fl-quote__mark{
  display:block;width:36px;height:28px;background:var(--fl-band);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Cpath d='M0 20A8 8 0 1 0 8 12C8 8 10 5 14 3L13 0C5 3 0 10 0 20ZM20 20A8 8 0 1 0 28 12C28 8 30 5 34 3L33 0C25 3 20 10 20 20Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Cpath d='M0 20A8 8 0 1 0 8 12C8 8 10 5 14 3L13 0C5 3 0 10 0 20ZM20 20A8 8 0 1 0 28 12C28 8 30 5 34 3L33 0C25 3 20 10 20 20Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fl-quote__text{font-size:19px;line-height:1.5;letter-spacing:-.01em;color:var(--fl-ink)}
.fl-quote__who{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:16px;line-height:1.4;color:var(--fl-muted)}
.fl-quote__who::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:var(--fl-violet)}

/* ---------- bar: den stora avslutande uppmaningen ---------- */
.fl-cta{
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
  padding:clamp(40px,7vw,80px) clamp(24px,5vw,56px);
  border-radius:var(--fl-r-xl);background:var(--fl-pastel);
}
.fl-cta > :where(:not(.fl-ribbon)){position:relative}
.fl-cta__ribbon{right:-120px;top:-180px;width:760px}
.fl-cta__title{max-width:620px;font-size:clamp(34px,5vw,64px);font-weight:600;letter-spacing:-.05em;line-height:.98;overflow-wrap:break-word}
.fl-cta__note{max-width:480px;font-size:19px;line-height:1.55;color:var(--fl-body)}

/* ---------- split: text + bild ---------- */
.fl-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(28px,4vw,64px)}
.fl-split__media{order:-1;min-width:0}
.fl-split--right .fl-split__media{order:0}
.fl-split__body{display:flex;flex-direction:column;gap:16px;min-width:0}
.fl-split__title{font-size:clamp(30px,4vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.fl-split__text{font-size:18px;line-height:1.6;color:var(--fl-body)}
.fl-split__body .fl-checks{margin-top:6px}
.fl-split__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:var(--fl-fx,50%) var(--fl-fy,50%);border-radius:var(--fl-r-lg);background:var(--fl-panel2)}
/* Utan vald bild: en pastellyta med bandet i stället för en tom ruta. */
.fl-split__deco{position:relative;overflow:hidden;overflow:clip;aspect-ratio:4/3;border-radius:var(--fl-r-lg);background:var(--fl-pastel)}
.fl-split__ribbon{left:-6%;top:4%;width:112%}

/* ---------- plans: paketkort, mittenkortet mörkt ---------- */
.fl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:16px;align-items:start}
.fl-plan{display:flex;flex-direction:column;gap:18px;padding:32px}
.fl-plan__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.fl-plan__title{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.fl-plan__mini{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--fl-violet-tint);color:var(--fl-violet-ink);font-size:12px;font-weight:700;line-height:1.3}
.fl-plan__price{display:flex;flex-direction:column;gap:4px}
.fl-plan__amount{font-size:clamp(34px,4vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1.05;overflow-wrap:anywhere}
.fl-plan__note{font-size:16px;line-height:1.45;color:var(--fl-muted)}
.fl-plan__desc{font-size:16px;line-height:1.6;color:var(--fl-body)}
.fl-plan__cta{width:100%;margin-top:auto;padding-block:13px}
.fl-plan__features + .fl-plan__cta{margin-top:auto}
.fl-plan--featured{box-shadow:var(--fl-shadow)}
.fl-plan--featured .fl-plan__ribbon{right:-150px;top:-60px;width:440px;opacity:.4}
.fl-plan--featured :where(.fl-plan__title,.fl-plan__amount){color:var(--fl-white)}
.fl-plan--featured .fl-plan__mini{background:var(--fl-white);color:var(--fl-ink)}
.fl-plan--featured .fl-plan__note{color:#C9C5D6}
.fl-plan--featured .fl-plan__desc,.fl-plan--featured .fl-checks li{color:#D6D3E0}
.fl-plan--featured .fl-checks{--fl-check-bg:rgba(255,255,255,.12);--fl-check:#C9C3FF}

/* ---------- compare: jämförelsetabell, kort under 600 px ---------- */
.fl-compare-wrap{overflow:hidden;border:1px solid var(--fl-line);border-radius:24px;background:var(--fl-white)}
.fl-compare{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.fl-compare th,.fl-compare td{padding:16px 20px;text-align:left;vertical-align:middle}
.fl-compare thead th{background:var(--fl-panel);font-size:16px;font-weight:600;color:var(--fl-ink)}
.fl-compare thead th:first-child{font-family:var(--fl-mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--fl-muted)}
.fl-compare tbody tr{border-top:1px solid var(--fl-soft)}
.fl-compare tbody th{font-weight:500;color:var(--fl-ink)}
.fl-compare td{color:var(--fl-muted)}
/* Sista kolumnen är den som säljs: lila rubrik, fet text, ljus ton. */
.fl-compare thead th:last-child{background:#EEE8FF;color:var(--fl-violet-ink);font-weight:700}
.fl-compare td:last-child{background:var(--fl-violet-tint);color:var(--fl-ink);font-weight:600}
.fl-compare__mark{display:inline-block;vertical-align:middle}
.fl-compare__mark--yes{
  width:22px;height:22px;border-radius:50%;background:#E3F3EA;position:relative;
}
.fl-compare__mark--yes::after{
  content:"";position:absolute;inset:5px;background:var(--fl-ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.5 2.4L10 3.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.5 2.4L10 3.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fl-compare td:last-child .fl-compare__mark--yes{background:var(--fl-ink)}
.fl-compare td:last-child .fl-compare__mark--yes::after{background:var(--fl-white)}
.fl-compare__mark--no{width:12px;height:2px;border-radius:1px;background:#B7B3C5}

@media (max-width:599px){
  .fl-compare-wrap{overflow:visible;border:0;border-radius:0;background:none}
  .fl-compare,.fl-compare tbody,.fl-compare tr,.fl-compare th,.fl-compare td{display:block}
  .fl-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .fl-compare tbody{display:flex;flex-direction:column;gap:12px}
  .fl-compare tbody tr{overflow:hidden;border:1px solid var(--fl-line);border-radius:var(--fl-r-md);background:var(--fl-white)}
  .fl-compare tbody th{padding:16px 18px 12px;font-size:17px;font-weight:600}
  .fl-compare td{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 18px;border-top:1px solid var(--fl-soft);text-align:right}
  .fl-compare td::before{content:attr(data-label);flex:0 1 auto;text-align:left;font-weight:500;color:var(--fl-body)}
  .fl-compare td:last-child::before{color:var(--fl-violet-ink);font-weight:700}
}

/* ---------- faq: utfällbara rader ---------- */
.fl-faq-sec--split .fl-faq-sec__in{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:start;gap:48px}
.fl-faq-sec--split .fl-sec-head{position:sticky;top:24px;margin-bottom:0}
.fl-faq{border-top:1px solid var(--fl-line)}
.fl-faq__item{border-bottom:1px solid var(--fl-line)}
.fl-faq__q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;list-style:none;cursor:pointer;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.fl-faq__q::-webkit-details-marker{display:none}
.fl-faq__q::marker{content:""}
.fl-faq__icon{position:relative;flex:none;width:32px;height:32px;border:1px solid var(--fl-line);border-radius:50%;transition:background-color .2s ease,border-color .2s ease}
.fl-faq__icon::before,.fl-faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:var(--fl-ink);transition:transform .2s ease,background-color .2s ease}
.fl-faq__icon::after{transform:rotate(90deg)}
.fl-faq__q:hover .fl-faq__icon{border-color:var(--fl-ink)}
.fl-faq__item[open] .fl-faq__icon{background:var(--fl-ink);border-color:var(--fl-ink)}
.fl-faq__item[open] .fl-faq__icon::before,.fl-faq__item[open] .fl-faq__icon::after{background:var(--fl-white)}
.fl-faq__item[open] .fl-faq__icon::after{transform:rotate(0deg)}
.fl-faq__a{max-width:760px;padding:0 52px 24px 0;font-size:17px;line-height:1.65;color:var(--fl-body)}
.fl-faq__a :where(p,ul,ol) + :where(p,ul,ol){margin-top:12px}
.fl-faq__a a{color:var(--fl-violet-ink);text-underline-offset:3px}

/* ---------- prose: läsbar spalt med formaterad text ---------- */
.fl-prose{max-width:720px;font-size:18px;line-height:1.7;color:var(--fl-body)}
.fl-prose h2{margin-bottom:20px;font-size:clamp(30px,4vw,42px);font-weight:600;letter-spacing:-.04em;line-height:1.08;color:var(--fl-ink)}
.fl-prose :where(h3,h4){margin-top:36px;font-size:24px;letter-spacing:-.025em;line-height:1.2;color:var(--fl-ink)}
.fl-prose :where(p,ul,ol,blockquote) + :where(p,ul,ol,blockquote){margin-top:18px}
.fl-prose :where(h3,h4) + :where(p,ul,ol){margin-top:12px}
.fl-prose :where(ul,ol){padding-left:1.3em}
.fl-prose li + li{margin-top:6px}
.fl-prose li::marker{color:var(--fl-violet)}
.fl-prose :where(strong,b){font-weight:600;color:var(--fl-ink)}
.fl-prose a{color:var(--fl-violet-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fl-prose a:hover{color:var(--fl-violet)}
.fl-prose blockquote{padding-left:20px;border-left:3px solid var(--fl-violet);font-size:20px;color:var(--fl-ink)}

/* ---------- spacer: tomt utrymme (höjden kommer ur blockets data) ---------- */
.fl-spacer{height:4rem}

/* ---------- Bildens fokuspunkt (MediaFile.focal_x/_y) i steg om 5 % ----------
   Mallen räknar fram stegen med {% widthratio %}: fl-fx-10 = 50 %. Klasser i
   stället för ett style-attribut i mallen; fem procent syns inte i ett
   beskuret foto. */
.fl-fx-0{--fl-fx:0%}.fl-fx-1{--fl-fx:5%}.fl-fx-2{--fl-fx:10%}.fl-fx-3{--fl-fx:15%}.fl-fx-4{--fl-fx:20%}.fl-fx-5{--fl-fx:25%}.fl-fx-6{--fl-fx:30%}
.fl-fx-7{--fl-fx:35%}.fl-fx-8{--fl-fx:40%}.fl-fx-9{--fl-fx:45%}.fl-fx-10{--fl-fx:50%}.fl-fx-11{--fl-fx:55%}.fl-fx-12{--fl-fx:60%}.fl-fx-13{--fl-fx:65%}
.fl-fx-14{--fl-fx:70%}.fl-fx-15{--fl-fx:75%}.fl-fx-16{--fl-fx:80%}.fl-fx-17{--fl-fx:85%}.fl-fx-18{--fl-fx:90%}.fl-fx-19{--fl-fx:95%}.fl-fx-20{--fl-fx:100%}
.fl-fy-0{--fl-fy:0%}.fl-fy-1{--fl-fy:5%}.fl-fy-2{--fl-fy:10%}.fl-fy-3{--fl-fy:15%}.fl-fy-4{--fl-fy:20%}.fl-fy-5{--fl-fy:25%}.fl-fy-6{--fl-fy:30%}
.fl-fy-7{--fl-fy:35%}.fl-fy-8{--fl-fy:40%}.fl-fy-9{--fl-fy:45%}.fl-fy-10{--fl-fy:50%}.fl-fy-11{--fl-fy:55%}.fl-fy-12{--fl-fy:60%}.fl-fy-13{--fl-fy:65%}
.fl-fy-14{--fl-fy:70%}.fl-fy-15{--fl-fy:75%}.fl-fy-16{--fl-fy:80%}.fl-fy-17{--fl-fy:85%}.fl-fy-18{--fl-fy:90%}.fl-fy-19{--fl-fy:95%}.fl-fy-20{--fl-fy:100%}

/* ---------- Mellanrummets höjd i steg om 4 px (0-400 px) ----------
   spacer.html räknar om blockets höjd (px, rem eller em, som i ADX) till
   steg: 4rem = 64 px = fl-sp-16. Utanför skalan, eller ett värde utan
   enhet som går att räkna om (procent, var()), ger standardhöjden 4rem. */
.fl-sp-0{height:0}.fl-sp-1{height:4px}.fl-sp-2{height:8px}.fl-sp-3{height:12px}.fl-sp-4{height:16px}.fl-sp-5{height:20px}.fl-sp-6{height:24px}.fl-sp-7{height:28px}.fl-sp-8{height:32px}.fl-sp-9{height:36px}
.fl-sp-10{height:40px}.fl-sp-11{height:44px}.fl-sp-12{height:48px}.fl-sp-13{height:52px}.fl-sp-14{height:56px}.fl-sp-15{height:60px}.fl-sp-16{height:64px}.fl-sp-17{height:68px}.fl-sp-18{height:72px}.fl-sp-19{height:76px}
.fl-sp-20{height:80px}.fl-sp-21{height:84px}.fl-sp-22{height:88px}.fl-sp-23{height:92px}.fl-sp-24{height:96px}.fl-sp-25{height:100px}.fl-sp-26{height:104px}.fl-sp-27{height:108px}.fl-sp-28{height:112px}.fl-sp-29{height:116px}
.fl-sp-30{height:120px}.fl-sp-31{height:124px}.fl-sp-32{height:128px}.fl-sp-33{height:132px}.fl-sp-34{height:136px}.fl-sp-35{height:140px}.fl-sp-36{height:144px}.fl-sp-37{height:148px}.fl-sp-38{height:152px}.fl-sp-39{height:156px}
.fl-sp-40{height:160px}.fl-sp-41{height:164px}.fl-sp-42{height:168px}.fl-sp-43{height:172px}.fl-sp-44{height:176px}.fl-sp-45{height:180px}.fl-sp-46{height:184px}.fl-sp-47{height:188px}.fl-sp-48{height:192px}.fl-sp-49{height:196px}
.fl-sp-50{height:200px}.fl-sp-51{height:204px}.fl-sp-52{height:208px}.fl-sp-53{height:212px}.fl-sp-54{height:216px}.fl-sp-55{height:220px}.fl-sp-56{height:224px}.fl-sp-57{height:228px}.fl-sp-58{height:232px}.fl-sp-59{height:236px}
.fl-sp-60{height:240px}.fl-sp-61{height:244px}.fl-sp-62{height:248px}.fl-sp-63{height:252px}.fl-sp-64{height:256px}.fl-sp-65{height:260px}.fl-sp-66{height:264px}.fl-sp-67{height:268px}.fl-sp-68{height:272px}.fl-sp-69{height:276px}
.fl-sp-70{height:280px}.fl-sp-71{height:284px}.fl-sp-72{height:288px}.fl-sp-73{height:292px}.fl-sp-74{height:296px}.fl-sp-75{height:300px}.fl-sp-76{height:304px}.fl-sp-77{height:308px}.fl-sp-78{height:312px}.fl-sp-79{height:316px}
.fl-sp-80{height:320px}.fl-sp-81{height:324px}.fl-sp-82{height:328px}.fl-sp-83{height:332px}.fl-sp-84{height:336px}.fl-sp-85{height:340px}.fl-sp-86{height:344px}.fl-sp-87{height:348px}.fl-sp-88{height:352px}.fl-sp-89{height:356px}
.fl-sp-90{height:360px}.fl-sp-91{height:364px}.fl-sp-92{height:368px}.fl-sp-93{height:372px}.fl-sp-94{height:376px}.fl-sp-95{height:380px}.fl-sp-96{height:384px}.fl-sp-97{height:388px}.fl-sp-98{height:392px}.fl-sp-99{height:396px}
.fl-sp-100{height:400px}

/* ---------- Mellanstora skärmar ---------- */
@media (max-width:900px){
  .fl-split{grid-template-columns:1fr}
  .fl-split--right .fl-split__media{order:-1}
  .fl-faq-sec--split .fl-faq-sec__in{grid-template-columns:1fr;gap:32px}
  .fl-faq-sec--split .fl-sec-head{position:static}
}

/* ---------- Telefon ---------- */
@media (max-width:560px){
  .fl-lead{font-size:18px}
  .fl-brand{gap:10px}
  .fl-brand__adx{height:16px}
  .fl-brand__name{padding-left:10px}
  .fl-brand__logo{height:17px}
  .fl-sec-head{margin-bottom:28px}
  .fl-card{padding:24px}
  .fl-step{padding:24px}
  .fl-step::after{left:80px;right:24px;top:43px}
  .fl-quote{padding:24px}
  .fl-quote__text{font-size:18px}
  .fl-plan{padding:26px 24px}
  .fl-cta{gap:20px;padding-top:150px;border-radius:var(--fl-r-lg)}
  .fl-cta__ribbon{right:-150px;top:-70px;width:440px}
  .fl-cta__note{font-size:18px}
  .fl-cta .fl-btn{width:100%}
  .fl-faq__q{padding:18px 0;font-size:17px}
  .fl-faq__a{padding-right:0;font-size:16px}
  .fl-prose{font-size:17px}
  .fl-404__ribbon{right:-300px;top:-60px;width:560px;opacity:.45}
  .fl-mob-menu__links a{font-size:26px}
}

/* ---------- Mindre rörelse ---------- */
@media (prefers-reduced-motion:reduce){
  .fl *,.fl *::before,.fl *::after{transition:none !important}
  .fl-btn:hover{transform:none}
}