/* ==========================================================================
   Akasse.nu 2026
   Layoutsprog: FinFlow — Playfair display, sorte pill-knapper, store bløde
   grå kort med hvide indsatser, ambient pastelgradient, meget luft.
   Brand: Akasse-grøn som accent, navy som mørk flade.
   ========================================================================== */

:root{
  --ground:#F5F5F7;
  --surface:#FFFFFF;
  --surface-soft:#ECECF0;
  --surface-softer:#F0F0F3;

  --ink:#0C0C11;
  --ink-mid:#55555F;
  --ink-soft:#84848F;
  --line:#E3E3E8;
  --line-strong:#D3D3DA;

  --accent:#00B47D;
  --accent-deep:#00875D;
  --cta:#00875D;
  --cta-hover:#006E4B;
  --data-god:#12A377;
  --data-loft:#C69A00;
  --data-lav:#BC4657;
  --data-spor:#26262F;

  /* Datafarver (valideret: lysthedsbånd, kroma, farveblindhed, kontrast) */
  --data-god:#00B47D;
  --data-loft:#E0A400;
  --data-lav:#CE4257;
  --data-spor:#E7E7EC;
  --accent-ink:#00694A;
  --accent-wash:#E2F4EC;

  --navy:#0A2B40;
  --navy-deep:#061E2E;
  --ring-top:#061E2E;
  --halo-top:#BFD4F2;
  --halo-styrke:72%;
  --on-navy:#EEF4F7;

  --gold:#C98A0B;

  --solid:#0A2C40;
  --on-solid:#FFFFFF;

  --logo-bg:#F1F1F4;

  /* Logoets egen grønne — aflæst fra akasse.nu, konstant i begge temaer */
  --brand-green:#00B47D;
  /* Overskriftsgrøn: brandfarven et nøk mørkere, så den klarer 3:1 på lys bund */
  --brand-green-ink:#00996A;
  --font-logo:'Bitter', Georgia, 'Times New Roman', serif;

  --blob-a:#9FE3C6;
  --blob-b:#BFD4F2;
  --blob-c:#F6DDC8;

  --shadow-sm:0 1px 2px rgba(12,12,17,.05);
  --shadow-card:0 1px 2px rgba(12,12,17,.04), 0 12px 34px -18px rgba(12,12,17,.20);
  --shadow-lift:0 2px 6px rgba(12,12,17,.06), 0 26px 54px -22px rgba(12,12,17,.30);

  --chip-h:30px;

  --r-xl:32px;
  --r-card:24px;
  --r-md:16px;
  --r-sm:10px;
  --r-pill:999px;

  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Barlow', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap:1180px;
  --gutter:clamp(18px, 4vw, 34px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B0B0F;
    --surface:#16161D;
    --surface-soft:#1A1A22;
    --surface-softer:#131319;

    --ink:#F3F3F6;
    --ink-mid:#A9A9B6;
    --ink-soft:#83838F;
    --line:#26262F;
    --line-strong:#33333E;

    --accent:#2ED39A;
    --accent-deep:#15AE7C;
    --cta:#00875D;
    --cta-hover:#006E4B;
    --data-god:#12A377;
    --data-loft:#C69A00;
    --data-lav:#BC4657;
    --data-spor:#26262F;
    --accent-ink:#5FE3B6;
    --accent-wash:#0F3A2E;

    --navy:#0E3B55;
    --navy-deep:#0A2C40;
    --ring-top:#A9C9DA;
    --halo-top:#5B8FC4;
    --halo-styrke:68%;
    --on-navy:#EAF4F9;

    --gold:#EDBA45;

    --solid:#F3F3F6;
    --on-solid:#0C0C11;

    --logo-bg:#EEEEF2;
    --brand-green-ink:#00B47D;

    --blob-a:#0E6B4C;
    --blob-b:#173A63;
    --blob-c:#5A3E23;

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -18px rgba(0,0,0,.85);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 26px 54px -22px rgba(0,0,0,.95);
  }
}

:root[data-theme="dark"]{
  --ground:#0B0B0F;
  --surface:#16161D;
  --surface-soft:#1A1A22;
  --surface-softer:#131319;

  --ink:#F3F3F6;
  --ink-mid:#A9A9B6;
  --ink-soft:#83838F;
  --line:#26262F;
  --line-strong:#33333E;

  --accent:#2ED39A;
  --accent-deep:#15AE7C;
  --cta:#00875D;
  --cta-hover:#006E4B;
  --data-god:#12A377;
  --data-loft:#C69A00;
  --data-lav:#BC4657;
  --data-spor:#26262F;
  --accent-ink:#5FE3B6;
  --accent-wash:#0F3A2E;

  --navy:#0E3B55;
  --navy-deep:#0A2C40;
  --ring-top:#A9C9DA;
  --halo-top:#5B8FC4;
  --halo-styrke:68%;
  --on-navy:#EAF4F9;

  --gold:#EDBA45;

  --solid:#F3F3F6;
  --on-solid:#0C0C11;

  --logo-bg:#EEEEF2;
  --brand-green-ink:#00B47D;

  --blob-a:#0E6B4C;
  --blob-b:#173A63;
  --blob-c:#5A3E23;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -18px rgba(0,0,0,.85);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 26px 54px -22px rgba(0,0,0,.95);
}

/* Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font:inherit;color:inherit;}
[hidden]{display:none !important;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;}
html{scroll-behavior:smooth;scroll-padding-top:110px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* Typografi ------------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.022em;text-wrap:balance;}
h1{font-size:clamp(2.5rem,4.9vw,4rem);}
h2{font-size:clamp(1.9rem,3.6vw,3rem);}
h3{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.2;letter-spacing:-.015em;}
.lead{font-size:clamp(1.02rem,1.35vw,1.14rem);color:var(--ink-mid);max-width:56ch;line-height:1.62;}
.prose p{color:var(--ink-mid);margin-bottom:1em;max-width:66ch;}
.prose p:last-child{margin-bottom:0;}
.prose p.mini-note{font-size:.84rem;line-height:1.6;color:var(--ink-soft);border-left:2px solid var(--surface-soft);padding-left:14px;}
.eyebrow{
  display:inline-block;font-family:var(--font-body);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);
}
.num{font-variant-numeric:tabular-nums;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(64px,9vw,128px);}
.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:clamp(34px,5vw,58px);}
.section-head .lead{text-align:center;max-width:52ch;}
.section-head--left{align-items:flex-start;text-align:left;}
.section-head--left .lead{text-align:left;}

/* Knapper — FinFlows pill-sprog ---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:.005em;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  text-align:center;white-space:nowrap;
}
.btn svg{flex:none;}
.btn-primary{background:var(--solid);color:var(--on-solid);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.btn-accent{background:var(--cta);color:#FFFFFF;}
.btn-accent:hover{background:var(--cta-hover);color:#FFFFFF;transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong);}
.btn-quiet:hover{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink);}
.btn-sm{padding:11px 22px;font-size:.92rem;}
.btn-block{width:100%;}

/* Header ---------------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--solid);color:var(--on-solid);padding:12px 20px;}
.skip:focus{left:0;}

.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--ground) 78%, transparent);
  backdrop-filter:saturate(1.6) blur(16px);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.site-header.is-stuck{background:color-mix(in srgb, var(--ground) 94%, transparent);box-shadow:0 1px 0 var(--line);}
.header-inner{display:flex;align-items:center;gap:22px;height:86px;}
.brand{
  font-family:var(--font-logo);font-weight:400;
  font-size:clamp(30px,3.4vw,39px);
  color:var(--brand-green);letter-spacing:normal;line-height:1;
}
.brand span{font-size:.5641em;color:inherit;vertical-align:baseline;}
.main-nav{margin-left:auto;}
.main-nav ul{display:flex;align-items:center;gap:6px;}
.main-nav a{
  display:block;padding:9px 16px;border-radius:var(--r-pill);
  font-size:.97rem;font-weight:500;color:var(--ink-mid);
  transition:color .15s ease;
}
.main-nav a{white-space:nowrap;}
.main-nav a:hover,.main-nav a.is-active{color:var(--ink);}
.header-cta{margin-left:6px;}
.nav-toggle{
  display:none;margin-left:auto;width:46px;height:46px;border-radius:var(--r-pill);
  align-items:center;justify-content:center;background:var(--surface);box-shadow:var(--shadow-sm);
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .2s ease,background-color .2s ease;}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease;}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

.mobile-nav{display:none;padding:6px var(--gutter) 22px;background:var(--ground);border-bottom:1px solid var(--line);}
.mobile-nav.is-open{display:block;}
.mobile-nav a{display:block;padding:14px 2px;font-size:1.05rem;font-weight:500;color:var(--ink-mid);border-bottom:1px solid var(--line);}
.mobile-nav a:last-of-type{border-bottom:none;}
.mobile-nav .btn{margin-top:14px;}
/* Knappen i mobilmenuen er et <a>, og ".mobile-nav a" vejer tungere end
   ".btn-primary" - derfor stod teksten i menuens dæmpede grå på den mørke
   flade i stedet for hvid. Kun 1,6:1 i kontrast, altså næsten ulæselig. */
.mobile-nav a.btn-primary{color:var(--on-solid);}
.mobile-nav a.btn-accent{color:#FFFFFF;}

/* Hero ------------------------------------------------------------------ */
.hero{position:relative;padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,72px);overflow:hidden;}
.hero-glow{position:absolute;inset:-10% -5% auto -5%;height:120%;z-index:0;pointer-events:none;}
.hero-glow i{position:absolute;display:block;border-radius:50%;filter:blur(110px);}
.hero-glow i:nth-child(1){width:44vw;height:38vw;top:-8vw;right:2vw;background:var(--blob-c);opacity:.9;}
.hero-glow i:nth-child(2){width:38vw;height:34vw;top:12vw;right:16vw;background:var(--blob-b);opacity:.78;}
.hero-glow i:nth-child(3){width:34vw;height:30vw;top:20vw;right:-4vw;background:var(--blob-a);opacity:.7;}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(34px,4.5vw,64px);align-items:center;}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:0;}
.pill-tag{
  display:inline-flex;align-items:center;gap:0;padding:8px 18px 8px 13px;
  border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-sm);
  font-size:.84rem;font-weight:600;color:var(--ink-mid);margin-bottom:26px;
}
.pill-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;margin-right:9px;}
.hero h1{margin-bottom:24px;}
.hero h1 em{font-style:italic;color:var(--brand-green-ink);}
.hero .lead{margin-bottom:30px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
.hero-rule{width:min(420px,100%);height:1px;background:var(--line-strong);margin:38px 0 22px;}
.hero-note{display:flex;flex-wrap:wrap;gap:10px 28px;}
.hero-note li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-mid);}
.hero-note svg{color:var(--accent-ink);flex:none;}

.hero-panel{
  background:var(--surface);border-radius:var(--r-xl);padding:30px;
  box-shadow:var(--shadow-lift);display:flex;flex-direction:column;gap:20px;
}
.hero-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.hero-panel-head h2{font-size:1.35rem;}
.hero-panel-head .meta{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
.mini-list{display:flex;flex-direction:column;gap:10px;}
.mini{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;
  padding:14px 16px;border-radius:var(--r-md);background:var(--surface-soft);
  transition:transform .18s ease, background-color .18s ease;
}
.mini:hover{transform:translateX(3px);}
.mini-rank{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-body);font-size:.85rem;font-weight:700;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
  padding-bottom:1px;  /* optisk: cifrene sad målt lidt lavt i cirklen */
  background:var(--solid);color:var(--on-solid);
}
.mini-name{font-weight:600;font-size:.98rem;line-height:1.3;}
.mini-tag{font-size:.78rem;color:var(--ink-soft);}
.mini-price{font-family:var(--font-body);font-weight:700;font-size:1.35rem;text-align:right;line-height:1.1;letter-spacing:-.015em;}
.mini-price small{display:block;font-family:var(--font-body);font-size:.62rem;font-weight:600;color:var(--ink-soft);letter-spacing:.08em;}
.hero-panel-foot{font-size:.85rem;color:var(--ink-mid);margin:0;}
.hero-panel-foot b{color:var(--ink);white-space:nowrap;}

/* Logostribe ------------------------------------------------------------ */
.trust{padding-block:clamp(18px,3vw,34px) clamp(34px,5vw,54px);}
.trust-inner{display:flex;flex-wrap:wrap;align-items:center;gap:22px clamp(28px,5vw,56px);}
.trust-label{font-family:var(--font-display);font-size:1.12rem;font-weight:500;color:var(--ink-mid);}
.trust-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,48px);margin-left:auto;}
.trust-logos img{max-height:30px;width:auto;opacity:.42;filter:grayscale(1);transition:opacity .2s ease, filter .2s ease;}
.trust-logos img:hover{opacity:.85;filter:grayscale(0);}
:root[data-theme="dark"] .trust-logos img{filter:grayscale(1) invert(1) brightness(1.6);}

/* Guide ------------------------------------------------------------------ */
.guide-shell{background:var(--navy-deep);color:var(--on-navy);border-radius:var(--r-xl);overflow:hidden;}
.guide-inner{padding:clamp(30px,4.6vw,60px);}
.guide-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:34px;}
.guide-top .eyebrow{color:var(--accent);}
.guide-top h2{color:var(--on-navy);font-size:clamp(1.9rem,3.4vw,2.9rem);margin-top:12px;}
.guide-progress{display:flex;align-items:center;gap:12px;font-size:.85rem;color:color-mix(in srgb, var(--on-navy) 68%, transparent);}
.guide-bar{width:120px;height:4px;border-radius:var(--r-pill);background:color-mix(in srgb, var(--on-navy) 20%, transparent);overflow:hidden;}
.guide-bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width .35s ease;}
.guide-step{display:none;}
.guide-step.is-active{display:block;animation:fade .3s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.guide-q{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:10px;color:var(--on-navy);}
.guide-help{font-size:.95rem;color:color-mix(in srgb, var(--on-navy) 66%, transparent);margin-bottom:26px;max-width:60ch;}
.guide-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.guide-opt{
  text-align:left;padding:22px;border-radius:var(--r-md);
  background:color-mix(in srgb, var(--on-navy) 7%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--on-navy) 15%, transparent);
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.guide-opt:hover{background:color-mix(in srgb, var(--on-navy) 13%, transparent);transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--accent);}
.guide-opt b{display:block;font-family:var(--font-display);font-size:1.12rem;font-weight:600;margin-bottom:5px;color:var(--on-navy);}
.guide-opt span{font-size:.88rem;line-height:1.5;color:color-mix(in srgb, var(--on-navy) 62%, transparent);}
.guide-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px;}
.guide-back{font-size:.9rem;color:color-mix(in srgb, var(--on-navy) 68%, transparent);text-decoration:underline;text-underline-offset:4px;}
.guide-back:hover{color:var(--on-navy);}

.guide-result{display:none;}
.guide-result.is-active{display:block;animation:fade .3s ease;}
.result-card{
  background:var(--surface);color:var(--ink);border-radius:var(--r-card);
  padding:26px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-top:20px;
}
.result-logo{width:130px;padding:10px 12px;border-radius:var(--r-md);background:var(--logo-bg);display:grid;place-items:center;}
.result-logo img{max-height:56px;width:auto;}
.result-name{font-family:var(--font-display);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;}
.result-why{font-size:.94rem;color:var(--ink-mid);margin-top:4px;}
.result-why b{color:var(--ink);}
.result-alts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;}
.result-alt{
  padding:9px 17px;border-radius:var(--r-pill);font-size:.86rem;font-weight:500;
  background:color-mix(in srgb, var(--on-navy) 9%, transparent);color:var(--on-navy);
}
/* Etiketten foran alternativerne er ikke en chip - den skal hverken have
   ring eller flade, ellers ligner den en tom, venstrestillet pille */
.result-alts-mrk{
  align-self:center;font-size:.86rem;font-weight:500;color:var(--ink-soft);
}
.result-note{
  margin-top:18px;padding:16px 20px;border-radius:var(--r-md);
  background:color-mix(in srgb, var(--on-navy) 7%, transparent);
  font-size:.88rem;line-height:1.6;color:color-mix(in srgb, var(--on-navy) 74%, transparent);
}
.result-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

/* Guide: glødbaggrund venstrestillet + matteret glas ----------------------- */
.guide-shell--glow{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--surface-soft);color:var(--ink);
}
/* Glødelaget klipper sig selv med samme radius som skallen. Den ydre
   overflow:hidden alene klipper ikke de slørede blobs i hjørnerne — derfor
   sad venstre side firkantet. Blobsene er forankret i bunden og stiger op,
   så overskriften i toppen står på en ren flade. */
.guide-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;border-radius:inherit;
  /* clip-path klipper også når de slørede blobs løftes op i et GPU-lag,
     hvor overflow:hidden alene kan svigte - det var derfor hjørnerne
     stadig kunne stå firkantede i nogle browsere */
  clip-path:inset(0 round var(--r-xl));
}
.guide-glow i{position:absolute;display:block;border-radius:50%;filter:blur(100px);}
/* Gløden er spejlet til højre bund. Overskriften og spørgsmålet står i
   venstre side, så farven ligger nu modsat teksten i stedet for under den. */
.guide-glow i:nth-child(1){width:46%;height:125%;bottom:-58%;right:-14%;background:var(--blob-a);opacity:.85;}
.guide-glow i:nth-child(2){width:40%;height:110%;bottom:-48%;right:9%;background:var(--blob-b);opacity:.72;}
.guide-glow i:nth-child(3){width:34%;height:95%;bottom:-38%;right:-7%;background:var(--blob-c);opacity:.6;}
.guide-shell--glow .guide-inner{position:relative;z-index:1;}

/* Teksten skifter til mørkt blæk på den lyse glød */
.guide-shell--glow .guide-top{border-bottom-color:var(--line-strong);}
.guide-shell--glow .guide-top h2,
.guide-shell--glow .guide-q{color:var(--ink);}
.guide-shell--glow .guide-top .eyebrow{color:var(--accent-ink);}
.guide-shell--glow .guide-help{color:var(--ink-mid);}
.guide-shell--glow .guide-progress{color:var(--ink-soft);}
.guide-shell--glow .guide-bar{background:color-mix(in srgb, var(--ink) 14%, transparent);}
.guide-shell--glow .guide-back{color:var(--ink-mid);}
.guide-shell--glow .guide-back:hover{color:var(--ink);}

/* Svarmulighederne som matteret glas */
.guide-shell--glow .guide-opt{
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent),
             0 1px 2px rgba(12,12,17,.04), 0 10px 26px -18px rgba(12,12,17,.3);
}
.guide-shell--glow .guide-opt:hover{
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow:inset 0 0 0 1.5px var(--accent), 0 2px 6px rgba(12,12,17,.06), 0 18px 36px -20px rgba(12,12,17,.36);
}
.guide-shell--glow .guide-opt b{color:var(--ink);}
.guide-shell--glow .guide-opt span{color:var(--ink-mid);}

.guide-shell--glow .result-card{
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent);
}
.guide-shell--glow .result-alt{
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.guide-shell--glow .result-note{
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-left-color:var(--line-strong);color:var(--ink-mid);
}
.guide-shell--glow .result-note a{color:var(--accent-ink);}



/* Filterbar -------------------------------------------------------------- */
/* Sorteringsrækken bliver stående i strømmen — den fulgte før med ved scroll
   og havde sin egen flade at hvile på. Uden klæbning er fladen overflødig. */
.toolbar{
  position:static;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding-block:12px;margin-bottom:18px;   /* polstringen holder rytmen fra før */
}
.toolbar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:0;padding:11px 20px;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:600;background:var(--surface);color:var(--ink-mid);
  box-shadow:var(--shadow-sm);
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.chip:hover{color:var(--ink);box-shadow:var(--shadow-card);}
.chip[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);}
.chip .tick{opacity:0;width:0;margin-right:0;transition:opacity .16s ease,width .16s ease,margin-right .16s ease;}
.chip[aria-pressed="true"] .tick{opacity:1;width:14px;margin-right:8px;}
.sort-field{display:flex;align-items:center;gap:10px;margin-left:auto;}
.sort-field label{font-size:.86rem;color:var(--ink-soft);}
.sort-field select{
  appearance:none;padding:11px 40px 11px 20px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow-sm);border:none;
  font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2384848F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 17px center;
}
.result-count{font-size:.9rem;color:var(--ink-soft);margin-top:14px;text-align:right;}
.result-count b{color:var(--ink);}

#sammenlign .section-head{margin-bottom:clamp(20px,2.6vw,32px);}
#faq .section-head{margin-bottom:clamp(20px,2.4vw,30px);}
#sammenlign{padding-bottom:clamp(30px,4vw,54px);}
#guide{padding-bottom:clamp(28px,3.6vw,48px);}
#viden{padding-top:clamp(22px,2.8vw,38px);padding-bottom:0;}

/* A-kasse-kort ----------------------------------------------------------- */
.cards{display:flex;flex-direction:column;gap:18px;}
.akasse-card{
  position:relative;background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);padding:30px 32px;
  display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:30px;align-items:stretch;
  transition:box-shadow .22s ease, transform .22s ease, background-color .22s ease;
}
.akasse-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);}
/* Topkortet markeres med en hårfin ring plus en blød glorie udenom i stedet
   for en tyk streg. Glorien er sløret, så den toner ud i stedet for at
   ende i en hård kant. Den er den blå fra gløden i toppen og bærer
   opmærksomheden; den hårfine navy-ring holder kanten skarp.
   Begge har egne værdier i mørkt tema — de lyse pasteller og navy
   forsvinder begge i den mørke flade. */
.akasse-card.is-top{
  box-shadow:
    var(--shadow-lift),
    0 0 24px 4px color-mix(in srgb, var(--halo-top) var(--halo-styrke), transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--ring-top) 45%, transparent);
}
/* Glorien viger, når musen er på kortet - præcis som den grønne gør.
   Uden denne regel vinder .akasse-card.is-top over .akasse-card:hover,
   fordi de har samme vægt og is-top står sidst. */
.akasse-card.is-top:hover{box-shadow:var(--shadow-lift);}
.akasse-card .badge{
  position:absolute;top:-12px;left:32px;
  padding:6px 17px;border-radius:var(--r-pill);
  background:var(--solid);color:var(--on-solid);
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.akasse-card.is-top .badge{background:var(--navy-deep);color:var(--on-navy);}
.card-brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.card-logo{
  flex:1 0 74px;width:100%;display:flex;align-items:center;justify-content:center;
  background:var(--logo-bg);border-radius:var(--r-md);padding:10px 14px;
}
.card-logo img{max-height:52px;width:auto;}
.card-name{font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.25;letter-spacing:-.015em;
  display:flex;align-items:center;min-height:var(--chip-h);}
.card-mid{display:flex;flex-direction:column;gap:14px;}
.card-stats{flex:1 0 auto;display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start;min-height:74px;}
.stat{display:flex;flex-direction:column;gap:2px;min-width:100px;}
.stat-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.stat-value{font-family:var(--font-body);font-size:2rem;font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink);}
.stat-value small{font-family:var(--font-body);font-size:.62rem;font-weight:700;color:var(--ink-soft);margin-left:4px;letter-spacing:.07em;}
.stat-value.is-muted{font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--ink-soft);padding-top:12px;letter-spacing:0;}
.stat-sub{font-size:.75rem;color:var(--ink-soft);}
.stat.is-total .stat-value{color:var(--accent-ink);}
.rating{display:flex;flex-direction:column;gap:4px;}
.stars{display:flex;gap:2px;color:var(--gold);}
.stars svg{width:15px;height:15px;}
.rating-text{font-size:.8rem;color:var(--ink-soft);}
.rating-text b{color:var(--ink);}
/* Kampagnemærkat: et tilbud, ikke en egenskab. Den skal derfor se
   anderledes ud end de neutrale chips nedenunder - fyldt flade og
   accentfarve, så den ikke læses som endnu et faktum om a-kassen. */
.kampagne{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:var(--accent-wash);color:var(--accent-ink);
  font-size:.8rem;font-weight:700;line-height:1.35;
}
.kampagne svg{flex:none;}

.card-feats{display:flex;flex-wrap:wrap;gap:7px;}
.feat{
  display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:var(--r-pill);
  min-height:var(--chip-h);background:var(--surface-soft);
  font-size:.78rem;font-weight:500;color:var(--ink-mid);
}
.feat svg{color:var(--accent-ink);flex:none;}
.feat.is-off{color:var(--ink-soft);}
.feat.is-off svg{color:var(--ink-soft);}
.card-act{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:186px;align-self:center;}
.card-act .ad-note{font-size:.7rem;color:var(--ink-soft);text-align:center;}
.compare-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border-radius:var(--r-pill);font-size:.88rem;font-weight:600;
  color:var(--ink-mid);box-shadow:inset 0 0 0 1.5px var(--line-strong);
  transition:box-shadow .16s ease,color .16s ease,background-color .16s ease;
}
.compare-toggle:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);}
.compare-toggle[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none;}
.compare-box{width:15px;height:15px;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1.5px currentColor;display:grid;place-items:center;}
.compare-toggle[aria-pressed="true"] .compare-box{background:var(--on-solid);color:var(--solid);}
.compare-box svg{opacity:0;}
.compare-toggle[aria-pressed="true"] .compare-box svg{opacity:1;}

/* Logo og pris peger samme sted som den grønne knap. Alle tre er
   annoncelinks og bærer rel="sponsored"; kortets "Annoncelink"-note
   dækker dem alle. Prisen skal ikke se ud som et link - ingen streg,
   ingen farveskift - og den springes over i tabuleringen, så man ikke
   skal forbi tre ens links pr. kort for at nå det næste. */
.logo-link{display:block;border-radius:inherit;}
.logo-link:focus-visible{outline-offset:5px;}
.pris-link{color:inherit;text-decoration:none;}
.pris-link:hover{color:inherit;}
.stat.is-total .pris-link{color:var(--accent-ink);}

.empty{text-align:center;padding:64px 24px;background:var(--surface-soft);border-radius:var(--r-xl);}
.empty p{color:var(--ink-mid);margin-bottom:18px;}

/* Gentagelse under listen ------------------------------------------------- */
.flest{margin-top:clamp(16px,2vw,26px);text-align:center;}
.flest-titel{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;
  letter-spacing:-.02em;margin-bottom:28px;text-align:center;
}
/* kun overskriften centreres — kortet skal stå som de andre */
.flest .akasse-card{text-align:left;}
.akasse-card--gentagelse{
  box-shadow:
    var(--shadow-lift),
    0 0 24px 4px color-mix(in srgb, var(--accent) 42%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.akasse-card--gentagelse .badge{background:var(--accent);color:#04231A;}

/* Annoncemarkering ------------------------------------------------------- */
.disclosure{
  display:flex;gap:15px;align-items:flex-start;
  padding:22px 26px;border-radius:var(--r-xl);
  background:var(--surface-soft);margin-bottom:8px;
  font-size:.9rem;line-height:1.6;color:var(--ink-mid);
}
.disclosure svg{flex:none;color:var(--solid);margin-top:3px;width:20px;height:20px;}
.disclosure a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:inherit;}

/* Sammenlign-bakke -------------------------------------------------------- */
.tray{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);
  z-index:70;width:min(720px, calc(100vw - 30px));
  background:var(--solid);color:var(--on-solid);border-radius:var(--r-pill);
  box-shadow:var(--shadow-lift);padding:12px 12px 12px 26px;
  display:flex;align-items:center;gap:16px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.tray.is-open{transform:translate(-50%,0);}
.tray-text{font-size:.92rem;font-weight:500;flex:1;min-width:0;}
.tray-text b{font-weight:700;}
.tray .btn{background:var(--cta);color:#FFFFFF;padding:12px 26px;}
.tray .btn:hover{background:var(--cta-hover);color:#FFFFFF;}
.tray-clear{font-size:.88rem;color:color-mix(in srgb, var(--on-solid) 66%, transparent);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.tray-clear:hover{color:var(--on-solid);}

/* Modal ------------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  background:color-mix(in srgb, #0C0C11 58%, transparent);
  backdrop-filter:blur(6px);
  padding:clamp(14px,4vw,52px);overflow-y:auto;
}
.modal.is-open{display:block;}
.modal-box{
  position:relative;max-width:740px;margin:0 auto;
  background:var(--surface);border-radius:var(--r-xl);
  padding:clamp(28px,4.4vw,52px);box-shadow:var(--shadow-lift);
}
.modal-box.is-wide{max-width:1000px;}
.modal-box h2{margin:12px 0 10px;font-size:clamp(1.7rem,3vw,2.4rem);}
.modal-box h3{margin:26px 0 8px;font-size:1.1rem;}
.modal-box p{color:var(--ink-mid);margin-bottom:12px;font-size:.97rem;}
.modal-close{
  position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-soft);color:var(--ink-mid);
  transition:background-color .15s ease,color .15s ease;
}
.modal-close:hover{background:var(--solid);color:var(--on-solid);}
.modal-date{font-size:.84rem;color:var(--ink-soft);}
.modal-box address{font-style:normal;color:var(--ink-mid);font-size:.97rem;line-height:1.7;}

.form{display:flex;flex-direction:column;gap:16px;margin-top:22px;}
.form label{display:flex;flex-direction:column;gap:7px;font-size:.85rem;font-weight:700;color:var(--ink);letter-spacing:.01em;}
.form input,.form textarea{
  padding:14px 16px;border-radius:var(--r-md);border:none;
  background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:.97rem;font-weight:400;
}
.form input:focus,.form textarea:focus{box-shadow:inset 0 0 0 2px var(--accent);outline:none;}
.form .btn{align-self:flex-start;}
.form-status{font-size:.9rem;color:var(--accent-ink);font-weight:700;}

/* Sammenligningstabel ------------------------------------------------------ */
.cmp-scroll{overflow-x:auto;margin-top:24px;-webkit-overflow-scrolling:touch;}
.cmp{border-collapse:collapse;width:100%;min-width:540px;}
.cmp th,.cmp td{padding:16px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;}
.cmp thead th{border-bottom:2px solid var(--line-strong);}
.cmp tbody th{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);width:160px;}
.cmp td{font-size:.97rem;color:var(--ink);}
.cmp td.best{color:var(--accent-ink);font-weight:700;}
.cmp .cmp-logo{height:46px;display:inline-flex;align-items:center;justify-content:center;background:var(--logo-bg);border-radius:var(--r-sm);padding:6px 12px;}
.cmp .cmp-logo img{max-height:40px;width:auto;}
.cmp .big{font-family:var(--font-body);font-size:1.45rem;font-weight:700;letter-spacing:-.015em;}

/* I sammenligningen stod prisrækkerne i 1,45rem og resten i 0,97rem. To
   størrelser i samme kolonne får tallene til at vippe, og øjet skal finde
   linjen forfra hver gang. Her har alle værdier samme størrelse - fed skrift
   og den grønne markering bærer fremhævningen i stedet for størrelsen.
   Kun i sammenlign-modalen; ydelses- og vilkårstabellerne rører vi ikke. */
#m-compare .cmp td,
#m-compare .cmp .big{font-size:1.05rem;}

/* En note, der hører til beløbet i samme celle. Den må gerne være mindre -
   den er en oplysning om tallet, ikke en værdi der skal sammenlignes på
   tværs, og den står på sin egen linje under det. */
.cmp-note{
  display:block;margin-top:3px;
  font-size:.8rem;font-weight:500;letter-spacing:0;
  color:var(--ink-soft);
}

/* Store bløde indholdskort — FinFlows feature-blokke ----------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:clamp(22px,3vw,30px);align-items:stretch;}
.soft-card{background:var(--surface-soft);border-radius:var(--r-xl);padding:clamp(30px,4.2vw,52px);}
.soft-card--accent{background:var(--surface);box-shadow:var(--shadow-card);display:flex;flex-direction:column;}
.checklist{display:flex;flex-direction:column;gap:11px;margin:8px 0 26px;}
.checklist li{display:flex;align-items:center;gap:13px;font-weight:500;color:var(--ink);}
.checklist svg{flex:none;color:var(--accent-ink);}
.soft-card h2{margin-bottom:20px;}
/* Underoverskrift inde i kortet - brødskrift, så den ikke konkurrerer
   med kortets egen h2 i Playfair */
.soft-card h3{
  font-family:var(--font-body);font-size:1rem;font-weight:700;
  letter-spacing:0;line-height:1.4;color:var(--ink);margin-bottom:10px;
}
.soft-card .eyebrow{margin-bottom:14px;}

.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(22px,3vw,30px);
  margin-top:clamp(20px,2.6vw,28px);}

/* Lønsikring — infografik ------------------------------------------------- */
.lon{
  margin-top:clamp(20px,2.6vw,28px);
  background:var(--surface);border-radius:var(--r-xl);
  padding:clamp(26px,3.6vw,44px);box-shadow:var(--shadow-card);
}
.lon-titel{font-size:clamp(1.45rem,2.4vw,2rem);margin:12px 0 clamp(26px,3vw,36px);}

.lon-blok{max-width:760px;margin:0 0 clamp(28px,3.4vw,40px);}
.lon-blok:last-of-type{margin-bottom:0;}
.lon-blok h4{
  font-family:var(--font-body);font-size:clamp(1rem,1.5vw,1.15rem);font-weight:700;
  letter-spacing:0;color:var(--navy-deep);margin-bottom:16px;
}
:root[data-theme="dark"] .lon-blok h4,
:root:not([data-theme="light"]) .lon-blok h4{color:var(--ink);}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .lon-blok h4{color:var(--navy-deep);} }

.lon-ref{text-align:left;font-size:.86rem;color:var(--ink-mid);padding:7px 0;}
.lon-ref b{color:var(--ink);font-weight:700;}
/* Målestreger: viser hvor langt hver del rækker, med endemarkering */
.lon-linje{height:1px;background:var(--line-strong);width:100%;}
.lon-maal{position:relative;height:1px;background:var(--line-strong);}
.lon-maal::before,.lon-maal::after{
  content:'';position:absolute;width:1px;height:7px;background:var(--line-strong);
}
.lon-maal::before{left:0;bottom:0;}
.lon-maal::after{right:0;bottom:0;}
.lon-maal--ned{margin-bottom:8px;}
.lon-maal--ned::before,.lon-maal--ned::after{bottom:auto;top:0;}

.lon-spor{
  display:flex;gap:2px;height:26px;margin:9px 0;
  background:var(--data-spor);border-radius:5px;overflow:hidden;
}
.lon-fyld{display:block;height:100%;}
.lon-fyld--god{background:var(--data-god);border-radius:5px 0 0 5px;}
/* Den gule er skruet mod ren gul efter ønske. I lyst tema klarer den alle
   paletchecks; i mørkt tema ligger den et lille nøk over lysthedsbåndet -
   bevidst, fordi bjælken er en stor flade med tekstnøgle ved siden af og
   ikke et tyndt mærke, og kontrasten mod fladen er i orden. */
.lon-fyld--mangler{background:var(--data-loft);}
.lon-spor .lon-fyld:last-child{border-radius:0 4px 4px 0;}
.lon-spor .lon-fyld--god:only-child{border-radius:5px 4px 4px 5px;}

.lon-noegle{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 clamp(28px,3.4vw,40px);max-width:760px;}
.lon-noegle li{display:flex;align-items:center;gap:9px;font-size:.84rem;font-weight:600;color:var(--ink-mid);}
.lon-prik{width:12px;height:12px;border-radius:3px;flex:none;}
.lon-prik--god{background:var(--data-god);}
.lon-prik--mangler{background:var(--data-loft);}

.lon-graense-navne,.lon-graense-tekst{display:grid;grid-template-columns:38% 1fr;gap:2px;}
.lon-graense-navne span{font-size:.88rem;font-weight:700;color:var(--ink);padding:0 0 8px;}
.lon-graense-navne span:last-child{color:var(--accent-ink);}
.lon-graense-tekst span{font-size:.8rem;color:var(--ink-soft);padding-top:8px;}
.lon-graense-tekst span:last-child{color:var(--accent-ink);font-weight:600;}
.lon-maal-raekke{display:grid;grid-template-columns:38% 1fr;gap:2px;}
.lon-skala{display:grid;grid-template-columns:38% 1fr;gap:2px;height:26px;margin:9px 0;}
.lon-tak{display:grid;place-items:center;height:100%;color:#fff;}
.lon-tak svg{width:17px;height:17px;}
.lon-tak--lav{background:var(--data-lav);border-radius:5px 0 0 5px;}
.lon-tak--hoej{background:var(--data-god);border-radius:0 5px 5px 0;}

.lon-tabel{margin-top:clamp(24px,3vw,34px);}
.lon-tabel summary{
  cursor:pointer;font-size:.88rem;font-weight:600;color:var(--ink-mid);
  padding:8px 0;list-style:none;display:inline-flex;align-items:center;gap:8px;
}
.lon-tabel summary::-webkit-details-marker{display:none;}
.lon-tabel summary::before{content:'+';font-weight:700;color:var(--accent-ink);}
.lon-tabel[open] summary::before{content:'–';}
.lon-tabel summary:hover{color:var(--ink);}
.lon-tabel .cmp{min-width:460px;}
.lon-tabel .cmp thead th{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}

.lon-note{margin-top:18px;font-size:.82rem;line-height:1.6;color:var(--ink-soft);max-width:78ch;}
.lon-note b{color:var(--ink-mid);}

@media (max-width:560px){
  .lon-ref{font-size:.8rem;}
  .lon-graense-navne,.lon-graense-tekst,.lon-skala{grid-template-columns:42% 1fr;}
  .lon-graense-navne span,.lon-graense-tekst span{font-size:.76rem;}
}

/* FAQ ---------------------------------------------------------------------- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto;}
.faq-item{background:var(--surface-soft);border-radius:var(--r-card);overflow:hidden;transition:background-color .2s ease;}
.faq-item:hover{background:var(--surface);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 28px;text-align:left;
  font-family:var(--font-display);font-size:1.14rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);
}
.faq-icon{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink-mid);transition:transform .25s ease,background-color .2s ease,color .2s ease;}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(135deg);background:var(--solid);color:var(--on-solid);}
.faq-a{display:none;padding:0 28px 26px;color:var(--ink-mid);font-size:.98rem;max-width:70ch;}
.faq-a.is-open{display:block;animation:fade .22s ease;}
.faq-a p{margin-bottom:.8em;}
.faq-a p:last-child{margin-bottom:0;}

/* Slut-CTA ------------------------------------------------------------------ */
.endcta{
  position:relative;overflow:hidden;
  background:var(--navy-deep);color:var(--on-navy);
  border-radius:var(--r-xl);padding:clamp(44px,6vw,84px) clamp(28px,5vw,64px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;
}
.endcta h2{color:var(--on-navy);max-width:18ch;}
.endcta p{color:color-mix(in srgb, var(--on-navy) 68%, transparent);max-width:52ch;}
.endcta .eyebrow{color:var(--accent);}
.endcta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.endcta .btn-primary{background:var(--cta);color:#FFFFFF;}
.endcta .btn-primary:hover{background:var(--cta-hover);color:#FFFFFF;}
.endcta .btn-quiet{color:var(--on-navy);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--on-navy) 30%, transparent);}
.endcta .btn-quiet:hover{background:color-mix(in srgb, var(--on-navy) 12%, transparent);box-shadow:inset 0 0 0 1.5px var(--on-navy);}

/* Footer --------------------------------------------------------------------- */
.site-footer{padding-block:clamp(34px,4vw,52px) 30px;margin-top:clamp(30px,4vw,52px);}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:36px;padding-bottom:34px;border-bottom:1px solid var(--line);}
.footer-brand{font-family:var(--font-logo);font-weight:400;font-size:34px;color:var(--brand-green);letter-spacing:normal;line-height:1;}
.footer-brand span{font-size:.5641em;color:inherit;}
.footer-about{font-size:.92rem;color:var(--ink-mid);margin-top:12px;max-width:40ch;}
.footer-col h3{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;}
.footer-col a{display:block;padding:6px 0;font-size:.95rem;color:var(--ink-mid);}
.footer-col a:hover{color:var(--ink);}
.footer-base{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-top:26px;font-size:.85rem;color:var(--ink-soft);}

/* Responsivt ------------------------------------------------------------------ */
/* Menuen har fået to punkter mere - stram den, før den brydes */
@media (max-width:1180px){
  .header-inner{gap:14px;}
  .main-nav ul{gap:2px;}
  .main-nav a{padding:9px 11px;font-size:.92rem;}
}
@media (max-width:1010px){
  .header-cta{display:none;}
}
@media (max-width:1080px){
  .akasse-card{grid-template-columns:150px minmax(0,1fr);}
  .card-act{grid-column:1 / -1;flex-direction:row;align-items:center;flex-wrap:wrap;}
  .card-act .btn,.card-act .compare-toggle{flex:1;min-width:170px;}
  .card-act .ad-note{flex-basis:100%;text-align:left;}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-glow i:nth-child(1){width:80vw;height:60vw;right:-20vw;}
  .hero-glow i:nth-child(2){width:70vw;height:56vw;right:10vw;top:30vw;}
  .hero-glow i:nth-child(3){width:64vw;height:50vw;right:-16vw;top:56vw;}
  .split{grid-template-columns:1fr;}
  .trust-logos{margin-left:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand-col{grid-column:1 / -1;}
}
@media (max-width:760px){
  /* Logostriben står side om side på store skærme - etiket til venstre,
     logoer til højre. Når den brydes på mobil, ser venstrestillingen
     tilfældig ud, så begge dele centreres. */
  .trust-inner{justify-content:center;text-align:center;}
  .trust-logos{justify-content:center;width:100%;}

  .main-nav,.header-cta{display:none;}
  .nav-toggle{display:flex;}
  .header-inner{height:72px;}
  html{scroll-padding-top:92px;}
  .akasse-card{grid-template-columns:1fr;gap:20px;padding:26px 22px;}
  .card-brand{flex-direction:row;align-items:center;gap:16px;}
  .card-logo{height:60px;width:120px;flex:none;}
  .card-logo img{max-height:42px;}
  .card-mid{gap:14px;}
  .card-stats{gap:18px 28px;min-height:0;}
  .stat{min-width:88px;}
  .stat-value{font-size:1.7rem;}
  .result-card{grid-template-columns:1fr;gap:16px;}
  .result-logo{width:auto;justify-items:start;}
  /* Chippene lå før i en vandret-scrollende række sammen med sorteringen,
     og med tre chips endte select'en 440px uden for skærmen - usynlig,
     med mindre man gættede på at rækken kunne scrolles. Nu ombrydes
     chippene, og sorteringen får sin egen linje i fuld bredde. */
  .toolbar-inner{flex-wrap:wrap;overflow-x:visible;padding-bottom:2px;}
  .toolbar-inner::-webkit-scrollbar{display:none;}
  .chip{flex:none;padding:10px 16px;font-size:.86rem;}
  .sort-field{margin-left:0;flex-basis:100%;}
  .sort-field select{flex:1;}
  .sort-field label{display:none;}
  .tray{border-radius:var(--r-card);padding:16px;flex-wrap:wrap;}
  .tray-text{flex-basis:100%;}
  .tray .btn{flex:1;}
  /* Glorien om gentagelseskortet er beregnet til at ligge om et bredt kort
     med luft omkring. På en telefon fylder kortet næsten hele bredden, og
     den samme glød bliver til en kraftig grøn kant langs skærmen. Her er
     den skruet ned til et anstrøg - ringen bærer markeringen. */
  .akasse-card--gentagelse{
    box-shadow:
      var(--shadow-card),
      0 0 12px 1px color-mix(in srgb, var(--accent) 14%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  }

  .faq-q{padding:20px 22px;font-size:1.05rem;}
  .faq-a{padding:0 22px 22px;}
}
@media (max-width:420px){
  .card-act{flex-direction:column;align-items:stretch;}
  .hero-note{gap:8px 18px;}
}

/* ==========================================================================
   Undersider — komponenter der kun bruges på /fagforening og /student
   ========================================================================== */

/* Trin-forløb ------------------------------------------------------------- */
.trin{
  margin-top:clamp(20px,2.6vw,28px);
  background:var(--surface);border-radius:var(--r-xl);
  padding:clamp(26px,3.6vw,44px);box-shadow:var(--shadow-card);
}
.trin-titel{font-size:clamp(1.45rem,2.4vw,2rem);margin:12px 0 clamp(24px,3vw,34px);}
.trin-liste{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,2.4vw,28px);
}
/* Nummeret er 27px højt og stregen ligger på 13px - 26px lod overskriften
   støde direkte op mod cirklen. 38px giver en synlig luft under begge. */
.trin-kort{position:relative;padding-top:38px;}
.trin-kort::before{
  content:'';position:absolute;top:13px;left:0;right:0;height:2px;background:var(--line-strong);
}
.trin-kort:first-child::before{border-radius:2px 0 0 2px;}
.trin-kort--naa::before{background:var(--data-god);}
.trin-nr{
  position:absolute;top:0;left:0;width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-body);
  font-size:.82rem;font-weight:700;line-height:1;padding-bottom:1px;
  font-variant-numeric:lining-nums tabular-nums;
  background:var(--solid);color:var(--on-solid);
}
.trin-kort--naa .trin-nr{background:var(--data-god);color:#04231A;}
.trin-kort h4{
  font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:0;
  color:var(--ink);margin-bottom:8px;
}
.trin-kort p{font-size:.9rem;line-height:1.6;color:var(--ink-mid);margin:0;}
.trin-kort b{color:var(--ink);}

/* Hvad-er-med-tabel -------------------------------------------------------- */
.ydelser{margin-top:clamp(20px,2.6vw,28px);}
.ydelser .cmp{min-width:640px;}
.ydelser .cmp tbody th{width:auto;text-transform:none;letter-spacing:0;
  font-size:.95rem;font-weight:500;color:var(--ink);font-family:var(--font-body);}
.ydelser .cmp td{text-align:center;width:150px;}
.ja,.nej{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;}
.ja{background:var(--accent-wash);color:var(--accent-ink);}
/* Stregen var sat som tegnet "–". place-items centrerer tekstens linjeboks,
   ikke selve blækket, og fordi tankestregen sidder over grundlinjen landede
   den 1,6px under cirklens midte - synligt ved siden af de geometrisk
   centrerede fluebensikoner. Stregen tegnes derfor nu, så den rammer midten
   uanset skrifttype. Tegnet bliver stående, men usynligt, så det stadig
   læses op og kan markeres som tekst. */
.nej{position:relative;background:var(--surface-soft);color:transparent;}
.nej::before{
  content:'';position:absolute;top:50%;left:50%;
  width:8px;height:2px;border-radius:1px;
  transform:translate(-50%,-50%);
  background:var(--ink-soft);
}
.ydelser-note{margin-top:16px;font-size:.82rem;line-height:1.6;color:var(--ink-soft);max-width:78ch;}

/* Nøgletal-striben --------------------------------------------------------- */
.noegletal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.noegle{
  background:var(--surface-soft);border-radius:var(--r-md);padding:18px 20px;
}
.noegle-tal{
  font-family:var(--font-body);font-size:1.9rem;font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.noegle-tal small{font-size:.55em;font-weight:700;color:var(--ink-soft);margin-left:4px;letter-spacing:.06em;}
.noegle-tekst{font-size:.82rem;line-height:1.5;color:var(--ink-mid);margin-top:5px;}

/* Satsbjælker (genbruger lon-sproget) --------------------------------------- */
.sats-ref{text-align:left;font-size:.86rem;color:var(--ink-mid);padding:7px 0;}
.sats-ref b{color:var(--ink);font-weight:700;}
/* Når nøglen står lige efter sidste blok, mangler den luft ovenfor */
.lon-blok + .lon-noegle{margin-top:clamp(22px,2.8vw,32px);}

/* Prisrække på kortene, når fagforeningen er hovedtallet -------------------- */
.akasse-card--fag .stat.is-total .stat-value{color:var(--accent-ink);}

@media (max-width:560px){
  .trin-liste{gap:20px;}
}


/* === Matteret glas i menuen ==================================================
   Baren lå på 78% dækkende - 94% når den klæbede - så sløringen bag den kunne
   knap ses. Nu er fladen gennemsigtig nok til, at indholdet sløres igennem,
   men tæt nok til, at teksten kan læses, når man ruller hen over de mørke
   sektioner. -webkit- er med, fordi Safari stadig kræver præfiks.
   ========================================================================== */
.site-header{
  background:color-mix(in srgb, var(--ground) 55%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--ground) 70%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  backdrop-filter:saturate(180%) blur(26px);
  box-shadow:0 1px 0 color-mix(in srgb, var(--line) 60%, transparent),
             0 10px 28px -22px rgba(0,0,0,.45);
}

/* Burgermenuen er den samme flade, bare foldet ud. */
.mobile-nav{
  background:color-mix(in srgb, var(--ground) 72%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 50%, transparent);
}

/* Uden backdrop-filter ville fladen bare være halvgennemsigtig, og teksten
   ville flyde sammen med indholdet bagved. Der falder vi tilbage til en
   næsten dækkende bund i stedet. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header,
  .site-header.is-stuck,
  .mobile-nav{ background:color-mix(in srgb, var(--ground) 96%, transparent); }
}