/* ============================================================
   ADX – site.css
   Extraherad EXAKT ur strict-design-guide.html (2026-08-27).
   Enda avvikelser: (1) självhostade typsnitt nedan i stället för
   systemantaganden – samma familjer, samma vikter (GDPR:
   inga anrop till tredjepartsdomäner, se mönsterkatalogen §4),
   (2) SPA-regeln .page{display:none} utgår – varje sida är ett
   eget dokument med egen URL, precis som guidens egen kommentar
   föreskriver. Rör du utseendet: ändra i guiden först.
   ============================================================ */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/files/space-grotesk-v22-latin_latin-ext-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/files/inter-v20-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/files/inter-v20-latin_latin-ext-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/files/inter-v20-latin_latin-ext-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/files/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/files/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/files/ibm-plex-mono-v20-latin_latin-ext-600.woff2') format('woff2')}

  :root{
    --radius:16px;
    --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
    --grot:'Space Grotesk','Inter',-apple-system,sans-serif;
  }
  body.text-dark{
    --fg:#101214;
    --fg-soft:rgba(16,18,20,.72);
    --panel:rgba(255,255,255,.5);
    --panel-solid:rgba(255,255,255,.72);
    --menu-bg:rgba(255,255,255,.92);
    --border:rgba(16,18,20,.28);
    --border-soft:rgba(16,18,20,.16);
    --btn-bg:#101214;
    --btn-fg:#ffffff;
    --logo-filter:none;
  }
  body.text-light{
    --fg:#ffffff;
    --fg-soft:rgba(255,255,255,.78);
    --panel:rgba(12,12,14,.32);
    --panel-solid:rgba(12,12,14,.5);
    --menu-bg:rgba(10,10,12,.92);
    --border:rgba(255,255,255,.35);
    --border-soft:rgba(255,255,255,.2);
    --btn-bg:#ffffff;
    --btn-fg:#101214;
    --logo-filter:invert(1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:auto}
  body{
    color:var(--fg);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:19px;line-height:1.55;
    min-height:100vh;
    transition:color .5s ease;
    -webkit-font-smoothing:antialiased;
    background:#0e0e10;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  h1,h2,h3,h4{overflow-wrap:break-word}

  #gradient-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
  .page-root{position:relative;z-index:1}
  .wrap{max-width:1240px;margin:0 auto;padding:0 22px}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:20;padding:16px 0}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pill{
    display:flex;align-items:center;gap:8px;
    background:var(--panel-solid);
    border:1px solid var(--border);
    border-radius:999px;
    padding:12px 22px;
    backdrop-filter:blur(10px);
    transition:background .5s ease,border-color .5s ease;
  }
  .logo-pill img{height:22px;width:auto;filter:var(--logo-filter);transition:filter .5s ease}
  .nav-links{gap:2px;padding:8px}
  .nav-links a{
    font-family:var(--mono);
    font-size:16px;letter-spacing:.06em;text-transform:uppercase;
    padding:8px 15px;border-radius:999px;
    color:var(--fg-soft);white-space:nowrap;
  }
  .nav-links a:hover{color:var(--fg)}
  .nav-links a.active{background:var(--btn-bg);color:var(--btn-fg)}
  .nav-cta{
    background:var(--btn-bg);color:var(--btn-fg);
    border:1px solid var(--btn-bg);
    font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;
    white-space:nowrap;cursor:pointer;
  }
  .nav-cta:hover{transform:translateY(-1px)}
  .menu-btn{
    display:none;cursor:pointer;
    font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--fg);white-space:nowrap;
  }

  /* ---------- Mobile menu ---------- */
  .mobile-menu{
    position:fixed;inset:10px;z-index:60;display:none;
    flex-direction:column;
    background:var(--menu-bg);
    border:1px solid var(--border);
    border-radius:24px;
    backdrop-filter:blur(24px);
    padding:26px 28px;
    overflow:auto;
  }
  .mobile-menu.open{display:flex}
  .mm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
  .mm-head img{height:22px;filter:var(--logo-filter)}
  .mm-close{
    cursor:pointer;font-family:var(--mono);font-size:16px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--fg);
    border:1px solid var(--border);border-radius:999px;padding:10px 20px;
  }
  .mobile-menu nav{display:flex;flex-direction:column}
  .mobile-menu nav a{
    font-family:var(--grot);font-weight:700;text-transform:uppercase;
    font-size:clamp(30px,8vw,42px);line-height:1.15;
    padding:14px 0;border-top:1px solid var(--border-soft);
  }
  .mobile-menu nav a.active::after{content:" ←";font-family:var(--mono);font-size:.5em;vertical-align:middle}
  .mm-sub{margin-top:26px}
  .mm-sub h6{
    font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:.12em;
    text-transform:uppercase;color:var(--fg-soft);margin-bottom:12px;
  }
  .mm-sub-links{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
  .mm-sub-links a{font-size:18px;font-weight:500}
  .mm-foot{margin-top:auto;padding-top:26px;font-family:var(--mono);font-size:16px;color:var(--fg-soft);display:flex;flex-direction:column;gap:8px}

  /* ---------- Type ---------- */
  .kicker{
    font-family:var(--mono);
    font-size:17px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--fg-soft);
  }
  h1{
    font-family:var(--grot);font-weight:700;text-transform:uppercase;
    font-size:clamp(42px,8vw,108px);
    line-height:.98;letter-spacing:-.01em;
  }
  h2{
    font-family:var(--grot);font-weight:700;text-transform:uppercase;
    font-size:clamp(32px,5vw,60px);line-height:1.02;
  }
  h3{font-family:var(--grot);font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.1}
  .lead{font-size:clamp(19px,2vw,24px);color:var(--fg-soft);max-width:680px}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    background:var(--btn-bg);color:var(--btn-fg);
    font-family:var(--mono);font-size:17px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    padding:16px 32px;border-radius:999px;border:0;cursor:pointer;
    transition:background .5s ease,color .5s ease,transform .15s ease;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn.ghost{
    background:var(--panel);color:var(--fg);
    border:1px solid var(--border);backdrop-filter:blur(8px);
  }

  /* ---------- Panels & placeholders ---------- */
  .panel{
    background:var(--panel);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    backdrop-filter:blur(8px);
    transition:background .5s ease,border-color .5s ease;
  }
  .ph{
    border:1px dashed var(--border);
    border-radius:var(--radius);
    background:var(--panel);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--fg-soft);text-align:center;padding:12px;
    min-height:220px;
  }
  .ph::before{content:"[ ";opacity:.6}
  .ph::after{content:" ]";opacity:.6}

  /* ---------- Pages / sections ---------- */
  .page{padding-bottom:40px}
  section{padding:72px 0 0}
  .sec-head{margin-bottom:40px}
  .sec-head .kicker{margin-bottom:18px}
  .sec-head p{font-size:20px;color:var(--fg-soft);max-width:560px;margin-top:18px}

  /* Hero — OBS: endast padding-top, så att .wrap-paddingen i sidled behålls
     (buggfix: "padding:56px 0 0" nollade tidigare sidopaddingen i surfplatteläge) */
  .hero{padding-top:56px}
  .hero .kicker{margin-bottom:24px}
  .hero .lead{margin:28px 0 36px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
  .hero-media{margin-top:56px}
  .hero-media .ph{min-height:min(420px,52vw)}

  .chips{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
  .chip{padding:24px 26px}
  .chip .v{font-family:var(--grot);font-weight:700;font-size:25px;text-transform:uppercase}
  .chip .k{font-family:var(--mono);font-size:16px;color:var(--fg-soft);margin-top:6px}

  .marquee{
    overflow:hidden;margin-top:64px;
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
    padding:20px 0;
  }
  .marquee-track{
    display:flex;gap:56px;width:max-content;
    animation:marq 36s linear infinite;
    font-family:var(--mono);font-size:18px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fg-soft);white-space:nowrap;
  }
  @keyframes marq{to{transform:translateX(-50%)}}

  .case{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
  .case .ph{min-height:420px;height:100%}
  .case .body{padding:clamp(26px,4vw,44px);display:flex;flex-direction:column}
  .case .body p{color:var(--fg-soft);font-size:20px;margin-top:16px}
  .case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:auto;padding-top:30px}
  .case-stat .v{font-family:var(--grot);font-weight:700;font-size:clamp(22px,2.4vw,30px)}
  .case-stat .k{font-family:var(--mono);font-size:16px;color:var(--fg-soft);margin-top:4px}

  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .step{padding:32px 30px}
  .step .num{font-family:var(--mono);font-size:17px;color:var(--fg-soft);margin-bottom:20px}
  .step h3{font-size:23px;text-transform:uppercase;margin-bottom:12px}
  .step p{color:var(--fg-soft);font-size:18px}

  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .quote{padding:36px 34px;display:flex;flex-direction:column;gap:22px}
  .quote .mark{font-family:var(--grot);font-size:44px;font-weight:700;line-height:.5;opacity:.5}
  .quote p{font-size:20px;line-height:1.5}
  .quote .who{font-family:var(--mono);font-size:16px;color:var(--fg-soft);margin-top:auto}

  .why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .why .item{padding:36px 34px}
  .why .num{font-family:var(--mono);font-size:17px;color:var(--fg-soft);margin-bottom:22px}
  .why h3{font-size:25px;text-transform:uppercase;margin-bottom:14px}
  .why p{color:var(--fg-soft);font-size:19px}

  .bar{
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:26px 34px;margin-top:64px;flex-wrap:wrap;
  }
  .bar .l{font-family:var(--grot);font-weight:700;font-size:clamp(22px,2.6vw,26px);text-transform:uppercase}
  .bar .r{font-family:var(--mono);font-size:18px}

  .svc-row{
    display:grid;grid-template-columns:100px 1fr auto;gap:24px;align-items:center;
    padding:32px;margin-bottom:14px;cursor:pointer;
  }
  .svc-row .num{font-family:var(--mono);font-size:18px;color:var(--fg-soft)}
  .svc-row h3{text-transform:uppercase}
  .svc-row:hover h3{text-decoration:underline}
  .svc-row p{color:var(--fg-soft);font-size:19px;margin-top:10px;max-width:640px}
  .svc-row .tag{
    font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--fg-soft);border:1px solid var(--border);border-radius:999px;
    padding:10px 18px;white-space:nowrap;
  }

  .split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:stretch}
  .split .ph{min-height:360px;height:100%}
  .split .body{padding:clamp(26px,4vw,44px)}
  .split .body .kicker{margin-bottom:16px}
  .split .body p{color:var(--fg-soft);font-size:20px;margin-top:16px}
  .split ul{list-style:none;margin-top:24px}
  .split li{
    font-size:19px;padding:13px 0;border-top:1px solid var(--border-soft);
    display:flex;gap:14px;
  }
  .split li::before{content:"→";font-family:var(--mono)}

  .folio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .folio-card{padding:16px;display:flex;flex-direction:column;gap:18px}
  .folio-card .ph{min-height:230px}
  .folio-card h3{font-size:23px;text-transform:uppercase;padding:0 10px}
  .folio-card .meta{
    font-family:var(--mono);font-size:16px;color:var(--fg-soft);
    padding:0 10px 10px;letter-spacing:.06em;text-transform:uppercase;
  }

  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .plan{padding:38px 34px;display:flex;flex-direction:column}
  .plan .mini{font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:20px}
  .plan h3{font-size:32px;text-transform:uppercase}
  .plan .desc{color:var(--fg-soft);font-size:18px;margin:10px 0 24px}
  .plan .price{font-family:var(--grot);font-size:29px;font-weight:700}
  .plan .price small{font-size:17px;font-weight:400;color:var(--fg-soft)}
  .plan .note{font-family:var(--mono);font-size:16px;color:var(--fg-soft);margin-top:6px}
  .plan ul{list-style:none;margin:26px 0 32px;display:flex;flex-direction:column;gap:12px}
  .plan li{font-size:18px;color:var(--fg-soft);display:flex;gap:12px}
  .plan li::before{content:"+";font-family:var(--mono);color:var(--fg)}
  .plan .btn{margin-top:auto}

  .table-scroll{overflow-x:auto;border-radius:var(--radius)}
  .compare{width:100%;min-width:720px;border-collapse:collapse;font-size:18px}
  .compare th{
    font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
    text-align:left;padding:20px 24px;border-bottom:1px solid var(--border);color:var(--fg);
  }
  .compare th:not(:first-child),.compare td:not(:first-child){text-align:center}
  .compare td{padding:17px 24px;border-bottom:1px solid var(--border-soft);color:var(--fg-soft)}
  .compare td:first-child{color:var(--fg);font-weight:500}
  .compare td.y{font-family:var(--mono);color:var(--fg)}
  .compare td.n{font-family:var(--mono);opacity:.45}
  .compare tr:last-child td{border-bottom:none}

  .newsletter{padding:clamp(28px,4vw,44px);margin-top:64px}
  .newsletter .kicker{margin-bottom:14px}
  .newsletter h3{text-transform:uppercase;margin-bottom:22px}
  .nl-form{display:flex;gap:12px;flex-wrap:wrap}
  .nl-form input{
    flex:1;min-width:220px;
    background:transparent;border:1px solid var(--border);border-radius:999px;
    padding:15px 26px;font-family:var(--mono);font-size:17px;color:var(--fg);
    outline:none;transition:border-color .3s;
  }
  .nl-form input::placeholder{color:var(--fg-soft)}
  .nl-form input:focus{border-color:var(--fg)}
  .nl-note{font-family:var(--mono);font-size:16px;color:var(--fg-soft);margin-top:16px}

  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
  .contact-card{padding:clamp(28px,4vw,40px)}
  .contact-card .kicker{margin-bottom:16px}
  .contact-card .big{font-family:var(--grot);font-weight:700;font-size:clamp(23px,2.6vw,32px);word-break:break-word}

  .team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .member{padding:14px;display:flex;flex-direction:column;gap:14px}
  .member .ph{min-height:240px}
  .member .name{font-family:var(--grot);font-weight:700;font-size:22px;padding:0 8px}
  .member .role{font-family:var(--mono);font-size:16px;color:var(--fg-soft);padding:0 8px 8px;text-transform:uppercase;letter-spacing:.06em}

  .faq details{margin-bottom:12px}
  .faq summary{
    cursor:pointer;list-style:none;
    padding:26px 90px 26px 30px;
    font-family:var(--grot);font-weight:700;font-size:clamp(20px,2.4vw,28px);
    text-transform:uppercase;position:relative;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"[ + ]";font-family:var(--mono);font-weight:400;font-size:18px;
    position:absolute;right:26px;top:50%;transform:translateY(-50%);
    color:var(--fg-soft);
  }
  .faq details[open] summary::after{content:"[ – ]"}
  .faq details p{color:var(--fg-soft);padding:0 30px 28px;font-size:20px;max-width:820px}

  /* SEO-textblock på tjänstesidor */
  .prose{max-width:820px}
  .prose h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px}
  .prose p{font-size:20px;color:var(--fg-soft);margin-bottom:18px}
  .prose + .prose{margin-top:48px}

  /* Relaterade tjänster */
  .related{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
  .related a{
    font-family:var(--mono);font-size:17px;letter-spacing:.06em;text-transform:uppercase;
    border:1px solid var(--border);border-radius:999px;padding:12px 24px;
    background:var(--panel);backdrop-filter:blur(8px);
  }
  .related a:hover{background:var(--btn-bg);color:var(--btn-fg)}

  footer{margin-top:96px;padding:0 0 40px}
  .foot{padding:clamp(28px,4vw,48px)}
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
  .foot-top img{height:26px;filter:var(--logo-filter);transition:filter .5s ease}
  .foot-desc{font-size:19px;color:var(--fg-soft);max-width:380px;margin-top:20px}
  .foot-cols{display:flex;gap:64px;flex-wrap:wrap}
  .foot-cols h5{
    font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--fg-soft);margin-bottom:18px;font-weight:500;
  }
  .foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:12px}
  .foot-cols a{font-size:19px;font-weight:500}
  .foot-cols a:hover{text-decoration:underline}
  .foot-bottom{
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    border-top:1px solid var(--border-soft);padding-top:26px;
    font-family:var(--mono);font-size:16.5px;color:var(--fg-soft);
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1080px){
    .nav-links a{padding:8px 11px;font-size:15.5px}
  }
  @media (max-width:960px){
    body{font-size:18px}
    .nav-links{display:none}
    .menu-btn{display:flex}
    .chips{grid-template-columns:1fr 1fr}
    .case{grid-template-columns:1fr}
    .case .ph{min-height:280px}
    .steps{grid-template-columns:1fr 1fr}
    .quotes{grid-template-columns:1fr}
    .why{grid-template-columns:1fr}
    .svc-row{grid-template-columns:1fr;gap:10px;padding:26px}
    .svc-row .tag{justify-self:start}
    .split{grid-template-columns:1fr}
    .split .ph{min-height:260px}
    .folio{grid-template-columns:1fr 1fr}
    .plans{grid-template-columns:1fr}
    .team{grid-template-columns:1fr 1fr}
    .contact-grid{grid-template-columns:1fr}
    .foot-cols{gap:36px}
  }
  @media (max-width:600px){
    .wrap{padding:0 16px}
    .pill{padding:11px 16px}
    .nav-cta{font-size:15px}
    .chips{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .folio{grid-template-columns:1fr}
    .team{grid-template-columns:1fr}
    .case-stats{grid-template-columns:1fr}
    .hero-actions .btn{width:100%}
    .bar{padding:24px}
    .faq summary{padding:22px 74px 22px 22px}
    .faq details p{padding:0 22px 24px}
  }


/* ============================================================
   TILLÄGG utanför guiden - medvetet och minimalt:
   1) a11y: skip-länken (osynlig tills fokus).
   2) Redigeringsoverlayen (pennor + dock) - självförsörjande lager
      portat från systersajten, ärver aldrig sidans tema
      (mönsterkatalogen §3: redigeringspennor).
   3) Formulär i guidens formspråk (förfrågan/nyhetsbrev): samma
      pill-inputs som .nl-form, mono-etiketter som .kicker.
   4) Botskyddets honeypot-fält (.bc-field) - utanför skärmen,
      aldrig display:none (en del botar hoppar över dolda fält).
   ============================================================ */

.skip-link {
    position: absolute; top: -100%; left: 16px;
    background: var(--color-accent); color: #fff;
    padding: 8px 16px; border-radius: var(--radius-sm);
    z-index: 9999; font-weight: 600; font-size: 0.875rem;
}
.skip-link:focus { top: 16px; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


.c-admin-dock {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.c-admin-dock__toggle {
    position: relative;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: oklch(0.96 0.18 115.3);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
}
.c-admin-dock__toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.c-admin-dock__toggle:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.c-admin-dock.is-open .c-admin-dock__toggle svg {
    transform: rotate(45deg);
    transition: transform 0.2s;
}

/* Unread badge on the icon */
.c-admin-dock__dot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e11d48;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* Pop-up menu */
.c-admin-dock__menu {
    display: none;
    flex-direction: column;
    min-width: 210px;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.c-admin-dock.is-open .c-admin-dock__menu {
    display: flex;
    animation: admin-dock-in 0.14s ease-out;
}
@keyframes admin-dock-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.c-admin-dock__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #1a1d21;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.12s;
}
.c-admin-dock__item:hover {
    background: #f4f5f7;
    opacity: 1;
}

.c-admin-dock__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #e11d48;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

@media print {
    .c-admin-dock { display: none; }
}


/* ---------- Formulär (förfrågan) ---------- */
.adx-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:clamp(28px,4vw,44px)}
.adx-form .field{display:flex;flex-direction:column;gap:8px}
.adx-form .field.full{grid-column:1 / -1}
.adx-form label{font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft)}
.adx-form input,.adx-form select,.adx-form textarea{
  background:transparent;border:1px solid var(--border);border-radius:18px;
  padding:14px 22px;font-family:var(--mono);font-size:17px;color:var(--fg);
  outline:none;transition:border-color .3s;width:100%;
}
.adx-form input::placeholder,.adx-form textarea::placeholder{color:var(--fg-soft)}
.adx-form input:focus,.adx-form select:focus,.adx-form textarea:focus{border-color:var(--fg)}
.adx-form select{appearance:none}
.adx-form textarea{min-height:160px;resize:vertical;border-radius:var(--radius)}
.adx-form .form-actions{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.adx-form .form-note{font-family:var(--mono);font-size:16px;color:var(--fg-soft)}
.adx-form .errors{grid-column:1 / -1;font-family:var(--mono);font-size:16px;color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;background:var(--panel)}
.form-success{padding:clamp(28px,4vw,44px)}
.form-success h3{text-transform:uppercase;margin-bottom:12px}
.form-success p{color:var(--fg-soft);font-size:19px}
@media (max-width:720px){.adx-form{grid-template-columns:1fr}}

.faq-answer{color:var(--fg-soft);padding:0 30px 28px;font-size:20px;max-width:820px}
.faq-answer p{margin-bottom:12px}

.bc-field{position:absolute !important;left:-9999px !important;top:auto !important;width:1px;height:1px;overflow:hidden}