:root{--bg:#0a0f0d;--bg2:#0f1612;--bg3:#141c18;--surface:#1a2420;--border:#2a3d35;--accent:#3ddc84;--accent2:#2ab86a;--gold:#c8a96e;--red:#e05c5c;--blue:#5ca4e0;--purple:#a07de0;--text:#e8ede9;--text2:#9db5a6;--text3:#7a9a88;--mono:'DM Mono',monospace;--serif:'DM Serif Display',serif;--sans:'Instrument Sans',sans-serif;--orange:#e8a046;--orange-soft:rgba(232,160,70,0.15);--radius:6px;--red-soft:rgba(224,92,92,0.15);--text-muted:#5c7a68;--white:#ffffff;--accent-03:rgba(61,220,132,0.03);--accent-04:rgba(61,220,132,0.04);--accent-05:rgba(61,220,132,0.05);--accent-06:rgba(61,220,132,0.06);--accent-08:rgba(61,220,132,0.08);--accent-10:rgba(61,220,132,0.1);--accent-15:rgba(61,220,132,0.15);--accent-20:rgba(61,220,132,0.2);--red-06:rgba(224,92,92,0.06);--red-07:rgba(224,92,92,0.07);--red-08:rgba(224,92,92,0.08);--red-10:rgba(224,92,92,0.1);--red-15:rgba(224,92,92,0.15);--red-20:rgba(224,92,92,0.2);--red-25:rgba(224,92,92,0.25);--red-30:rgba(224,92,92,0.3);--red-40:rgba(224,92,92,0.4);--gold-08:rgba(200,169,110,0.08);--gold-10:rgba(200,169,110,0.1);--gold-20:rgba(200,169,110,0.2);--purple-08:rgba(160,125,224,0.08);--purple-20:rgba(160,125,224,0.2);--blue-08:rgba(92,164,224,0.08);--blue-10:rgba(92,164,224,0.1);--blue-20:rgba(92,164,224,0.2);--border-15:rgba(42,61,53,0.15);--border-20:rgba(42,61,53,0.2);--border-30:rgba(42,61,53,0.3);--border-35:rgba(42,61,53,0.35);--border-40:rgba(42,61,53,0.4);--border-50:rgba(42,61,53,0.5);--silver-10:rgba(192,192,192,0.1);--silver-20:rgba(192,192,192,0.2);--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem}

/* Safe area insets for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
  header[role="banner"] {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .nav-mobile {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overscroll-behavior-y:none}
a,button,summary{cursor:pointer;touch-action:manipulation}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.82;overflow-wrap:break-word;word-wrap:break-word}
a{color:inherit;text-decoration:none}
p{font-size:0.88rem;color:var(--text2);line-height:1.82;margin-bottom:1.1rem}
h3{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin:var(--space-8) 0 0.6rem}
li{line-height:1.75}
code{font-family:var(--mono);font-size:0.8rem;letter-spacing:-0.02em;background:var(--surface);padding:0.1rem 0.4rem;color:var(--accent)}
header[role="banner"]{position:sticky;top:0;z-index:100}
nav{background:rgba(10,15,13,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;gap:var(--space-4)}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav-logo small{display:none}
.nav-links{display:flex;list-style:none;gap:0;flex-wrap:nowrap;overflow:hidden}
.nav-links a{font-family:var(--mono);font-size:0.62rem;color:var(--text3);letter-spacing:0.06em;text-transform:uppercase;padding:0.4rem 0.6rem;transition:color 0.2s;white-space:nowrap;display:block}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-warn{font-family:var(--mono);font-size:0.57rem;color:var(--red);border:1px solid var(--red-40);padding:0.2rem 0.5rem;white-space:nowrap;opacity:0.8;flex-shrink:0}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:12px;width:48px;height:48px;align-items:center;justify-content:center;flex-shrink:0}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text3);transition:transform 0.25s,opacity 0.25s,background 0.25s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(10,15,13,0.99);border-bottom:1px solid var(--border);z-index:101;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-2) 0}
@supports (backdrop-filter: blur(20px)) {
.nav-mobile{background:rgba(10,15,13,0.85);backdrop-filter:blur(20px)}
}
.nav-mobile.open{display:block}
.nav-mobile a{display:block;font-family:var(--mono);font-size:0.75rem;color:var(--text2);letter-spacing:0.08em;text-transform:uppercase;padding:0.8rem 2rem;border-bottom:1px solid var(--border-30);transition:color 0.2s}
.nav-mobile a:hover,.nav-mobile a.active{color:var(--accent);background:var(--accent-04)}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:0.5rem;left:0.5rem;width:auto;height:auto;background:var(--accent);color:var(--bg);padding:var(--space-2) 1rem;font-family:var(--mono);font-size:0.75rem;z-index:9999;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.hero{background:var(--bg2);border-bottom:1px solid var(--border);padding:var(--space-20) 0 4rem}
.hero-inner{max-width:1100px;margin:0 auto;padding:0 2rem}
.hero-tag{font-family:var(--mono);font-size:0.6rem;color:var(--accent);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:1.2rem;display:flex;align-items:center;gap:var(--space-2)}
.hero-tag::before{content:'';width:20px;height:1px;background:var(--accent)}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;margin-bottom:1.2rem;text-align:left}
.hero h1 em{color:var(--accent);font-style:italic}
.hero-desc{font-size:0.95rem;color:var(--text2);max-width:620px;line-height:1.8;margin-bottom:var(--space-8)}
.hero-meta{display:flex;gap:var(--space-6);flex-wrap:wrap}
.hm{font-family:var(--mono);font-size:0.62rem;color:var(--text3);letter-spacing:0.07em;display:flex;align-items:center;gap:0.3rem}
.hm.green{color:var(--accent)}
.breadcrumb{padding:0.9rem 2rem;font-family:var(--mono);font-size:0.6rem;color:var(--text3);letter-spacing:0.06em;max-width:1100px;margin:0 auto}
.breadcrumb a{color:var(--text3);transition:color 0.2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{margin:0 0.4rem;opacity:0.5}
main[id="main-content"]{display:block}
.section{padding:var(--space-16) 2rem;max-width:1100px;margin:0 auto}
.divider{border:none;border-top:1px solid var(--border);margin:3.5rem 0}
.section-tag{font-family:var(--mono);font-size:0.58rem;color:var(--accent);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:var(--space-3)}
.section-title{font-family:var(--serif);font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.15;margin-bottom:1.1rem;text-align:left}
.section-desc{font-size:0.9rem;color:var(--text2);max-width:640px;line-height:1.75;margin-bottom:var(--space-12)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.sidebar-wrap{display:grid;grid-template-columns:1fr 280px;gap:var(--space-12);align-items:start}
.sidebar{position:sticky;top:80px}
.sb-box{background:var(--bg2);border:1px solid var(--border);padding:1.6rem;margin-bottom:var(--space-6)}
.sb-title{font-family:var(--mono);font-size:0.57rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--text3);margin-bottom:0.85rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
.sb-links{list-style:none}
.sb-links li{margin-bottom:0.3rem}
.sb-links a{font-size:0.8rem;color:var(--text2);display:flex;align-items:center;gap:0.4rem;padding:0.15rem 0;transition:color 0.2s}
.sb-links a::before{content:'→';color:var(--accent);font-size:0.7rem}
.sb-links a:hover{color:var(--accent)}
.sf-row{display:flex;justify-content:space-between;align-items:center;padding:0.55rem 0;border-bottom:1px solid var(--border-40);font-size:0.75rem}
.sf-row:last-child{border-bottom:none}
.sf-key{color:var(--text3);font-family:var(--mono);font-size:0.56rem;letter-spacing:0.08em;text-transform:uppercase}
.sf-val{color:var(--text2)}
.badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:0.57rem;letter-spacing:0.07em;text-transform:uppercase;padding:0.18rem 0.45rem;white-space:nowrap}
.b-green{background:var(--accent-10);color:var(--accent);border:1px solid var(--accent-20)}
.b-red{background:var(--red-10);color:var(--red);border:1px solid var(--red-20)}
.b-gold{background:var(--gold-10);color:var(--gold);border:1px solid var(--gold-20)}
.b-blue{background:var(--blue-10);color:var(--blue);border:1px solid var(--blue-20)}
.info{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:1.2rem 1.6rem;font-size:0.84rem;color:var(--text2);line-height:1.65;margin-bottom:var(--space-6)}
.info.gold{border-left-color:var(--gold)}
.info.red{border-left-color:var(--red)}
.info.purple{border-left-color:var(--purple)}
.info strong{color:var(--text)}
.warn{background:var(--red-07);border:1px solid var(--red-20);padding:1.2rem 1.6rem;display:flex;gap:var(--space-3);font-size:0.8rem;color:#e8b8b8;line-height:1.55;margin-bottom:var(--space-6)}
.warn-icon{color:var(--red);flex-shrink:0}
.reviewed{background:var(--accent-05);border:1px solid var(--accent-15);padding:var(--space-3) 1rem;font-size:0.77rem;color:var(--text2);line-height:1.55;margin-bottom:var(--space-6);display:flex;gap:0.8rem;border-radius:2px}
.reviewed strong{color:var(--accent)}
.reviewed a{color:var(--accent);text-decoration:underline}
.acc{border:1px solid var(--border);margin-bottom:var(--space-3)}
.acc-head{background:var(--bg2);padding:1.1rem 1.6rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:0.88rem;color:var(--text);font-weight:500;user-select:none;transition:background 0.15s}
.acc-head:hover{background:var(--bg3)}
.acc-icon{color:var(--accent);transition:transform 0.2s;flex-shrink:0;margin-left:1rem}
.acc-body{display:none;padding:1.4rem 1.6rem;border-top:1px solid var(--border);background:var(--bg);font-size:0.84rem;color:var(--text2);line-height:1.85}
.acc-body p{margin-bottom:0.9rem}
.acc-body p:last-child{margin-bottom:0}
.acc.open .acc-body{display:block}
.acc.open .acc-icon{transform:rotate(45deg)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--border)}
.card{background:var(--bg2);padding:1.8rem;display:block;transition:background 0.15s}
.card:hover{background:var(--bg3)}
.card-icon{font-size:1.5rem;margin-bottom:var(--space-4)}
.card-title{font-family:var(--serif);font-size:1.05rem;color:var(--text);margin-bottom:var(--space-2)}
.card-desc{font-size:0.78rem;color:var(--text2);line-height:1.7}
.card-tag{display:inline-block;margin-top:var(--space-4);font-family:var(--mono);font-size:0.55rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.15rem 0.4rem}
.t-human{background:var(--accent-08);color:var(--accent);border:1px solid var(--accent-20)}
.t-long{background:var(--purple-08);color:var(--purple);border:1px solid var(--purple-20)}
.t-kos{background:var(--gold-08);color:var(--gold);border:1px solid var(--gold-20)}
.t-lag{background:var(--red-08);color:var(--red);border:1px solid var(--red-20)}
.t-res{background:var(--blue-08);color:var(--blue);border:1px solid var(--blue-20)}
.use-case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4);margin:var(--space-6) 0}
.use-case{background:var(--bg2);border:1px solid var(--border);padding:var(--space-6)}
.uc-priority{font-family:var(--mono);font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:var(--space-2)}
.uc-name{font-size:0.9rem;font-weight:600;color:var(--text);margin-bottom:var(--space-2)}
.uc-desc{font-size:0.78rem;color:var(--text2);line-height:1.7}
.p-high{color:var(--accent)}
.p-mid{color:var(--gold)}
.p-low{color:var(--blue)}
.safety-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-6) 0}
.safety-box{background:var(--bg2);border:1px solid var(--border);padding:var(--space-6)}
.safety-title{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:var(--space-3)}
.blend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--border);margin:var(--space-6) 0}
.blend-card{background:var(--bg2);padding:1.8rem}
.blend-num{font-family:var(--serif);font-size:2rem;color:var(--text3);line-height:1;margin-bottom:0.6rem}
.blend-name{font-size:0.9rem;font-weight:600;color:var(--text);margin-bottom:0.4rem}
.blend-dose{font-family:var(--mono);font-size:0.65rem;color:var(--accent);margin-bottom:var(--space-3)}
.blend-desc{font-size:0.78rem;color:var(--text2);line-height:1.6}
.data-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--space-8) 0}
.data-table{width:100%;border-collapse:collapse;font-size:0.81rem;min-width:480px}
.data-table th{font-family:var(--mono);font-size:0.57rem;letter-spacing:0.1em;text-transform:uppercase;color:#7a9a88;padding:0.8rem 1.1rem;text-align:left;border-bottom:1px solid var(--border);background:var(--surface)}
.data-table td{padding:0.8rem 1.1rem;border-bottom:1px solid var(--border-50);color:var(--text2);vertical-align:top}
.data-table td:first-child{color:var(--text);font-weight:500}
.data-table tr:hover td{background:var(--bg3)}
.data-table td code{font-family:var(--mono);font-size:0.71rem;background:var(--surface);padding:0.1rem 0.3rem;color:var(--accent)}
.data-table td a{color:var(--accent);text-decoration:underline;cursor:pointer}
.data-table td a:hover{color:var(--accent2);text-decoration:underline}
.ref-section{display:block;width:auto;max-width:100%;box-sizing:border-box;margin:4rem 0 2.5rem 0;padding:var(--space-10);background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--text3);border-radius:3px;position:static;clear:both}
.ref-section h3{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text3);margin-bottom:var(--space-6);padding-bottom:0.75rem;border-bottom:1px solid var(--border)}
.ref-item{margin-bottom:var(--space-8);padding-bottom:2rem;border-bottom:1px solid var(--border-35)}
.ref-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.ref-authors{display:block;font-size:0.82rem;color:var(--text);font-weight:600;margin-bottom:0.35rem}
.ref-title-sv{display:block;font-size:0.84rem;color:var(--text2);margin-bottom:0.2rem;line-height:1.5}
.ref-title-en{display:block;font-size:0.75rem;color:var(--text3);font-style:italic;margin-bottom:0.35rem;line-height:1.4}
.ref-journal{display:block;font-size:0.75rem;color:var(--text3);margin-top:0.35rem;line-height:1.5}
footer{background:var(--bg2);border-top:1px solid var(--border);margin-top:5rem}
.footer-bottom{padding:1.1rem 2rem}
#back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:var(--accent);color:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;opacity:0;transform:translateY(10px);transition:opacity 0.3s,transform 0.3s;z-index:200;border-radius:2px}
#back-to-top:focus{outline:2px solid var(--accent);outline-offset:3px}
@media print{
nav,.nav-mobile,#back-to-top,.skip-link{display:none !important}
.section{padding:var(--space-4) 0 !important}
a[href]::after{content:" (" attr(href) ")";font-size:0.7rem}
}
@media (max-width:900px){
.nav-links{display:none}
.nav-hamburger{display:flex}
.nav-warn{display:none}
.sidebar-wrap{grid-template-columns:1fr}
.sidebar{position:static}
.two-col{grid-template-columns:1fr}
.safety-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
nav{padding:0 1rem}
.hero{padding:var(--space-12) 0 2.5rem}
.hero h1{font-size:1.9rem}
.hero-desc{margin-bottom:var(--space-6)}
.section{padding:var(--space-12) 1.25rem}
.breadcrumb{padding:0.6rem 1rem}
.section-title{font-size:1.5rem}
.ref-section{padding:var(--space-6) 1.25rem;margin:var(--space-12) 0 2rem 0}
.sb-box{padding:var(--space-5)}
.info,.warn{padding:var(--space-4) 1.25rem}
.reviewed{font-size:0.74rem}
.acc-head{padding:var(--space-4) 1.25rem;font-size:0.82rem}
.acc-body{padding:1.1rem 1.25rem}
.data-table th,.data-table td{padding:0.7rem 0.85rem;font-size:0.78rem}
.card-grid{grid-template-columns:1fr}
.blend-grid{grid-template-columns:1fr}
.use-case-grid{grid-template-columns:1fr}
.safety-grid{grid-template-columns:1fr}
.footer-bottom{padding:var(--space-4)}
#back-to-top{bottom:1.5rem;right:1.5rem}
}
@media (max-width:380px){
.hero h1{font-size:1.65rem}
}


/* Icon + text rows (3rem icon column) */
.g-icon-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  align-items: start;
}
.g-icon-row--border { border-bottom: 1px solid var(--border-50); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST GRID UTILITY CLASSES
   All collapse to 1 column on ≤600px
   ═══════════════════════════════════════════════════════════════ */
.g-2col-lg  { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); }
.g-2col-sm  { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-bottom:var(--space-4); }
.g-3col     { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-6); }
.g-1-2col   { display:grid; grid-template-columns:1fr 2fr; gap:var(--space-8); align-items:start; }
.g-2col-border { display:grid; grid-template-columns:1fr 1fr; gap:1px;
                 background:var(--border); border:1px solid var(--border);
                 margin-bottom:var(--space-8); }

/* ── GLOBAL OVERFLOW PROTECTION ─────────────────────────────────
   (handled by body max-width and responsive grids below)       */

/* ── MOBILE BREAKPOINT: ≤900px ──────────────────────────────── */
@media (max-width:900px) {
.g-1-2col{ grid-template-columns:1fr; }
}

/* ── MOBILE BREAKPOINT: ≤600px ──────────────────────────────── */
@media (max-width:600px) {
/* All grid utilities collapse to single column */
  .g-2col-lg, .g-2col-sm, .g-3col, .g-1-2col, .g-2col-border{
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
/* Inline grids — catch-all with higher specificity via nesting */
  [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
/* Tables: allow horizontal scroll inside wrapper */
  .data-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
.data-table{
    min-width: 520px;
  }
/* Prevent images/SVGs from overflowing */
  img, svg{ max-width: 100%; height: auto; }
/* Hero tag / meta pills: wrap */
  .hero-meta{ flex-wrap: wrap; gap: 0.5rem; }
.hero-tag{ font-size: 0.65rem; }
/* Section padding tighter */
  .section{ padding: 2.5rem 1rem; }
.hero{ padding: 2.5rem 0 2rem; }
/* Breadcrumb: allow wrap */
  .breadcrumb{ white-space: normal; word-break: break-word; }
/* Nav warn text shorter on very small screens */
  .nav-warn{ display: none; }
}

/* ── TINY SCREENS: ≤380px ───────────────────────────────────── */
@media (max-width:380px) {
[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
.g-2col-lg, .g-2col-sm, .g-3col, .g-1-2col, .g-2col-border{
    grid-template-columns: 1fr !important;
  }
.hero h1{ font-size: 1.6rem; }
.section-title{ font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   SAKNADE KLASSER — Layout & sektioner
   ═══════════════════════════════════════════════════════════════════ */
/* .container and .content-section defined below with max-width:1100px */
.content-section p { display:block; max-width:740px; margin:0 auto 1.2rem; line-height:1.8; color:var(--text2); }
.content-section h2, .content-section h3 { display:block; max-width:1100px; margin:2rem 0 1rem; text-align:left; }
.content-section ul, .content-section ol { display:block; max-width:740px; margin:0 auto 1.5rem; padding-left:2rem; }
.content-section li { margin-bottom:var(--space-2); color:var(--text2); line-height:1.7; }
.section-header { margin-bottom:32px; max-width:1100px; }
.section-label { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text3); }

/* ═══════════════════════════════════════════════════════════════════
   SAKNADE KLASSER — Verktygssektion (startsida)
   ═══════════════════════════════════════════════════════════════════ */
.tools-section { margin-top:64px; }
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--border); }
.tool-card { background:var(--surface); padding:var(--space-8); transition:background 0.3s ease; }
.tool-card:hover { background:var(--bg3); }
.tool-card h3 { font-family:var(--sans); font-size:1.25rem; margin:0; }
.tool-card h3 a { color:var(--text); text-decoration:none; }
.tool-card h3 a:hover { color:var(--accent); }
.categories-section { margin-top:64px; }
.category-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--border); }
.category-card { background:var(--surface); padding:var(--space-8); transition:background 0.3s ease; }
.category-card:hover { background:var(--bg3); }
.category-card h3 { font-family:var(--sans); font-size:1.25rem; margin-top:var(--space-2); }
.category-card h3 a { color:var(--text); text-decoration:none; }
.category-card h3 a:hover { color:var(--accent); }
.cc-meta { font-family:var(--mono); font-size:11px; color:var(--text3); text-transform:uppercase; }
.cat-card { background:var(--surface); padding:var(--space-6); border-left:3px solid var(--accent); transition:background 0.3s ease; }
.cat-card:hover { background:var(--bg3); }
.cat-icon { font-size:1.5rem; margin-right:0.75rem; }

/* ═══════════════════════════════════════════════════════════════════
   SAKNADE KLASSER — Jämförelseverktyg
   ═══════════════════════════════════════════════════════════════════ */
.compare-controls { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:32px; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:4px; }
.compare-group { display:flex; flex-direction:column; gap:8px; flex:1; min-width:200px; }
.compare-group label { font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--text3); letter-spacing:0.05em; }
.compare-actions { display:flex; gap:12px; margin-top:16px; }
.compare-empty { text-align:center; padding:64px 24px; color:var(--text3); }
.compare-empty-icon { font-size:3rem; margin-bottom:16px; opacity:0.5; }
.tab-nav { display:flex; gap:1px; background:var(--border); margin-bottom:32px; }
.tab-btn { flex:1; padding:12px 16px; background:var(--surface); border:none; font-family:var(--sans); font-size:14px; color:var(--text); cursor:pointer; transition:background 0.3s ease,color 0.3s ease; }
.tab-btn.active { background:var(--accent); color:#000; }
.tab-btn:hover:not(.active) { background:var(--bg3); }
.share-url { display:flex; gap:8px; margin-top:16px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:var(--sans); font-size:14px; cursor:pointer; border-radius:4px; transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease; }
.btn:hover { background:var(--accent); color:#000; border-color:var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   SAKNADE KLASSER — Interaktionsverktyg
   ═══════════════════════════════════════════════════════════════════ */
.ix-group { display:flex; flex-direction:column; gap:8px; flex:1; min-width:200px; }
.ix-group label { font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--text3); letter-spacing:0.05em; }
.ix-result { margin-top:24px; }
.ix-library { margin-top:48px; padding-top:32px; border-top:1px solid var(--border); }
.ix-library-title { font-size:clamp(1.4rem,3vw,2rem); margin-bottom:24px; }
.ix-actions { display:flex; gap:12px; margin-top:16px; }
.ix-empty { text-align:center; padding:64px 24px; color:var(--text3); }
.ix-empty-icon { font-size:3rem; margin-bottom:16px; opacity:0.5; }
.ix-disclaimer { margin-top:32px; padding:16px; background:var(--gold-08); border:1px solid var(--gold); border-radius:4px; font-size:13px; color:var(--text2); }

/* ═══════════════════════════════════════════════════════════════════
   SAKNADE KLASSER — Sökfunktion
   ═══════════════════════════════════════════════════════════════════ */
.search-hero { text-align:center; padding:80px 0 48px; }
.search-wrap { position:relative; max-width:700px; margin:0 auto; }
.search-input { width:100%; padding:16px 48px 16px 20px; background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:var(--sans); font-size:16px; border-radius:4px; outline:none; transition:border-color 0.3s ease,box-shadow 0.3s ease; }
.search-input:focus { border-color:var(--accent); }
.search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:1.2rem; pointer-events:none; }
.search-clear { position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text3); font-size:1.2rem; cursor:pointer; padding:0; }
.search-clear:hover { color:var(--text); }
.search-results { position:absolute; top:100%; left:0; right:0; margin-top:8px; background:var(--surface); border:1px solid var(--border); border-radius:4px; max-height:400px; overflow-y:auto; z-index:100; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.all-results { margin-top:48px; }
.popular-section { margin-top:48px; }
.popular-title { font-family:var(--mono); font-size:12px; text-transform:uppercase; color:var(--text3); letter-spacing:0.1em; margin-bottom:16px; }
.popular-grid { display:flex; flex-wrap:wrap; gap:8px; }
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin-top:24px; }

/* ═══════════════════════════════════════════════════════════════════
   SAKNADE KLASSER — Gemensamma komponenter
   ═══════════════════════════════════════════════════════════════════ */
.related-peptides { margin-top:48px; padding-top:32px; border-top:1px solid var(--border); }
.related-card { background:var(--surface); padding:var(--space-6); border-left:3px solid var(--accent); transition:background 0.3s ease; }
.related-card:hover { background:var(--bg3); }
.update-log { margin-top:32px; }
.accordion summary::-webkit-details-marker { display:none; }
.main-col { flex:1; min-width:0; }
a.active-site, span.active-site { color:var(--accent); }
.resp-grid-body { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--border); }
.uc-card { background:var(--surface); padding:var(--space-6); transition:background 0.3s ease; }
.uc-card:hover { background:var(--bg3); }
.tool-nav { display:flex; gap:1px; background:var(--border); margin-bottom:32px; }
.site-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:13px; text-decoration:none; border-radius:4px; transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease; }
.site-btn:hover { background:var(--accent); color:#000; border-color:var(--accent); }

/* ── Tillagda klasser (kompletering) ── */
.calc-container { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:24px; }
.categories-title { font-size:clamp(1.4rem,3vw,2rem); margin-bottom:24px; }

/* ═══════════════════════════════════════════════════════════════════
   VARNINGSSIDOR — CSS för oseriosa aktorer
   ═══════════════════════════════════════════════════════════════════ */
/* Hero för varningssidor */
.hero--warning { background:linear-gradient(135deg, var(--red-15) 0%, var(--bg2) 100%); border-bottom:2px solid var(--red-30); }
.hero-label { font-family:var(--mono); font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--red); margin-bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2); }
.hero-label::before { content:''; width:24px; height:2px; background:var(--red); }
/* Disclaimer box */
.disclaimer-box { background:var(--red-08); border:1px solid var(--red-25); border-left:3px solid var(--red); padding:1.2rem 1.6rem; display:flex; gap:var(--space-3); font-size:0.84rem; color:#e8b8b8; line-height:1.6; margin:var(--space-8) 0; border-radius:2px; }
.disclaimer-icon { flex-shrink:0; font-size:1.2rem; }
/* Warning article */
.warning-article { max-width:780px; }
.warning-article h2 { font-family:var(--serif); font-size:clamp(1.3rem,2.5vw,1.8rem); color:var(--text); margin:2.5rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--border); }
.warning-article p { font-size:0.9rem; color:var(--text2); line-height:1.85; margin-bottom:1.2rem; }
.warning-article ul { margin:var(--space-4) 0 1.5rem 1.5rem; }
.warning-article li { font-size:0.88rem; color:var(--text2); line-height:1.75; margin-bottom:var(--space-2); }
.warning-article strong { color:var(--text); }
/* Lead/ingress text */
.warning-article .lead, .content-section .lead { font-size:1rem; color:var(--text); line-height:1.8; }
/* Related warnings grid */
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--border); margin-top:var(--space-6); }
.related-card { background:var(--surface); padding:var(--space-6); display:block; text-decoration:none; transition:background 0.3s ease,border-color 0.3s ease; border-left:3px solid var(--red); }
.related-card:hover { background:var(--bg3); border-left-color:var(--accent); }
.related-title { font-family:var(--serif); font-size:1.1rem; color:var(--text); margin-bottom:var(--space-2); }
.related-desc { font-size:0.78rem; color:var(--text2); line-height:1.65; }
/* Content section base */
.content-section { padding:var(--space-12) 0; }
.container { max-width:1100px; margin:0 auto; padding:0 2rem; }

/* ═══════════════════════════════════════════════════════════════
   MOBILANPASSNING — Komplett responsivt stöd
   ═══════════════════════════════════════════════════════════════ */

/* ── Surfplatta (≤ 900px) ── */
@media (max-width: 900px) {
.tools-grid,
  .category-grid,
  main .categories-grid, .tools-section .categories-grid { grid-template-columns: repeat(2, 1fr); }
.compare-controls,
  .compare-group,
  .ix-group{ width: 100%; }
.hero-title{ font-size: clamp(1.8rem, 5vw, 3rem); }
.section-title{ font-size: clamp(1.4rem, 4vw, 2rem); }
.container{ padding: 0 16px; }
.content-section{ padding: 32px 0; }
}

/* ── Mobil (≤ 600px) ── */
@media (max-width: 600px) {
/* Navigation — hamburger */
  html body .nav-links { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: rgba(10,15,13,0.98); flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 2rem; gap: 0; z-index: 99; }
@supports (backdrop-filter: blur(20px)) {
  .nav-links{ background: rgba(10,15,13,0.90); backdrop-filter: blur(20px); }
}
html body .nav-links.active { display: flex; }
.nav-links a{ font-size: 0.8rem; padding: 1rem; width: 100%; text-align: center; border-bottom: 1px solid var(--border); }
html body .nav-hamburger { display: flex; }
.nav-warn{ display: none; }
.nav-logo small{ display: none; }
/* Layout */
  .container{ padding: 0 12px; }
.content-section{ padding: 24px 0; }
.section{ padding: 1.5rem 1rem; }
/* Grids → 1 kolumn */
  .tools-grid,
  .category-grid,
  .categories-grid,
  .resp-grid-body,
  /* Sök */
  html body .search-hero { padding: 40px 0 24px; }
html body .search-input { font-size: 16px; }
html body .search-results { position: static; margin-top: 8px; max-height: 300px; }
/* Verktyg */
  .compare-controls,
  .tab-nav{ flex-direction: column; }
/* Kort */
  .tool-card,
  .category-card,
  .cat-card,
  .uc-card{ padding: 1.2rem; }
/* Typografi */
  .hero-title{ font-size: clamp(1.6rem, 6vw, 2.5rem); }
html body .hero-subtitle { font-size: 0.85rem; }
.section-title{ font-size: clamp(1.2rem, 5vw, 1.8rem); }
html body h3 { font-size: 0.65rem; }
p{ font-size: 0.85rem; line-height: 1.7; }
/* Footer */
  footer .footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
/* Kalkylatorer */
  html body .calc-container { padding: 16px; }
/* Relaterade */
  .related-peptides .category-grid { grid-template-columns: 1fr; }
/* Populära sökningar */
  .popular-grid{ justify-content: center; }
}

/* ── Liten mobil (≤ 400px) ── */
@media (max-width: 400px) {
.hero-title{ font-size: 1.4rem; }
.section-title{ font-size: 1.1rem; }
.container{ padding: 0 10px; }
.tool-card,
  .category-card{ padding: 1rem; }
}

/* ── Touch-vänlighet ── */
@media (pointer: coarse) {
.nav-links a,
  .tab-btn,
  .btn,
  .site-btn{ min-height: 44px; }
.search-input,
  select,
  input{ font-size: 16px !important; }
}

.e,.d{display:inline}.e::before{content:attr(data-e)}

/* ── TABLE OF CONTENTS ─────────────────────────────────────────── */
.toc{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:var(--space-6) 2rem;margin:0 auto 2.5rem;max-width:740px;border-radius:0 6px 6px 0}

.toc-title{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2)}
.toc-title::before{content:'→';font-size:0.8rem}
.toc ol{list-style:none;counter-reset:toc;padding:0;margin:0}
.toc ol li{margin-bottom:0.4rem;padding-left:0;font-size:0.82rem}
.toc ol li::before{counter-increment:toc;content:counter(toc) ".";color:var(--accent);font-family:var(--mono);font-size:0.65rem;margin-right:0.6rem}
.toc ol li a{color:var(--text2);transition:color 0.2s}
.toc ol li a:hover{color:var(--accent)}
.toc ul{list-style:none;padding:0;margin:0}
.toc ul li{margin-bottom:0.35rem;font-size:0.8rem;color:var(--text3);padding-left:1.2rem;position:relative}
.toc ul li::before{content:'—';position:absolute;left:0;color:var(--border)}

/* ── SUMMARY / KEY TAKEAWAYS ───────────────────────────────────── */
.summary-box{background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--gold);padding:1.8rem 2rem;margin:0 auto 2.5rem;max-width:740px;border-radius:0 0 6px 6px}

.summary-title{font-family:var(--serif);font-size:1.2rem;color:var(--text);margin-bottom:1.2rem}
.summary-list{list-style:none;padding:0;margin:0}
.summary-list li{font-size:0.85rem;color:var(--text2);line-height:1.7;padding:var(--space-2) 0;padding-left:1.5rem;position:relative;border-bottom:1px solid var(--border-30)}
.summary-list li:last-child{border-bottom:none}
.summary-list li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:bold}
.summary-list li strong{color:var(--text)}

/* ── WARNING PAGE LAYOUT ───────────────────────────────────────── */
.warn-hero{background:var(--bg2);border-bottom:1px solid var(--border);padding:var(--space-12) 2rem 2.5rem}
.warn-hero-inner{max-width:1100px;margin:0 auto}
.warn-hero-tag{font-family:var(--mono);font-size:0.6rem;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:var(--space-3)}
.warn-hero h1{font-family:var(--serif);font-size:2.2rem;line-height:1.2;margin-bottom:var(--space-4);color:var(--text)}
.warn-hero-desc{color:var(--text2);font-size:1rem;max-width:700px;line-height:1.6;margin-bottom:var(--space-6)}
.warn-section{padding:var(--space-12) 2rem;max-width:1100px;margin:0 auto}
.warn-section .content-section{max-width:1100px;margin-left:auto;margin-right:auto}
.warn-section .content-section h2,.warn-section .content-section h3{max-width:1100px;margin-left:0;margin-right:0;text-align:left}
.warn-section .content-section p,.warn-section .content-section ul,.warn-section .content-section ol{max-width:740px;margin-left:0;margin-right:auto}
.warn-section h2{font-family:var(--serif);font-size:1.4rem;color:var(--text);margin:2.5rem 0 1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
.warn-section h2:first-child{margin-top:0}
.warn-section p{color:var(--text2);line-height:1.8;margin-bottom:1.2rem}
.warn-section ul,.warn-section ol{color:var(--text2);line-height:1.7;margin-bottom:1.2rem;padding-left:1.5rem}
.warn-section li{margin-bottom:var(--space-2)}
.warn-section img{max-width:100%;border-radius:8px;border:1px solid var(--border);margin:1.5rem auto;display:block}
.warn-section table{max-width:100%;overflow-x:auto;display:block}
.warn-section .alert-box{max-width:740px;margin-left:auto;margin-right:auto}

/* ═══════════════════════════════════════════════════════════════════════════════
   SAKNADE KLASSER — tillagda efter QA-audit
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Lässtid ─────────────────────────────────────────────── */
.lasstid{font-family:var(--mono);font-size:0.65rem;color:var(--text3);letter-spacing:0.08em;text-transform:uppercase}

/* ── FAQ ────────────────────────────────────────────────── */
.faq-container{margin:var(--space-8) 0}
.faq-section{padding:var(--space-12) 0}
.faq-q{font-weight:500;color:var(--text)}
.faq-a{color:var(--text2)}

/* ── Native <details>/<summary> accordion (warning pages) ── */
.u-card-mb75 { border:1px solid var(--border);border-radius:2px;margin-bottom:var(--space-3);overflow:hidden; }
/* FAQ summary styling: se FAQ ACCORDION-sektionen ovan */
.u-card-mb75[open] summary::after { content:'−'; }
.u-card-mb75 .u-mt075 { padding:1.4rem 1.6rem;border-top:1px solid var(--border);background:var(--bg);font-size:0.84rem;color:var(--text2);line-height:1.85;margin:0; }

/* ── Apotekssökning ─────────────────────────────────────── */
.apo-search-wrap{position:relative;margin-bottom:var(--space-8);max-width:600px}
.apo-search-input{width:100%;padding:var(--space-3) 2.5rem 0.75rem 1rem;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-family:var(--sans);font-size:0.9rem;border-radius:2px}
.apo-search-input:focus{outline:none;border-color:var(--accent)}
.apo-search-icon{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
.apo-search-clear{position:absolute;right:2.5rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;font-size:1.2rem;line-height:1}
.apo-results-wrap{margin-top:var(--space-8)}
.apo-results-header{display:flex;justify-content:space-between;align-items:center;padding:0.7rem 1rem;background:var(--bg2);border:1px solid var(--border);border-bottom:none;font-family:var(--mono);font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3)}
.apo-result-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:0.7rem 1rem;border-bottom:1px solid var(--border-40);font-size:0.8rem;align-items:center}
.apo-result-row:nth-child(odd){background:rgba(10,15,13,0.3)}
.apo-result-row:hover{background:var(--accent-03)}
.apo-result-name{font-weight:500;color:var(--text)}
.apo-result-city{color:var(--text2)}
.apo-result-mun{color:var(--text3);font-family:var(--mono);font-size:0.7rem}
.apo-result-org{color:var(--text2);font-size:0.75rem}
.apo-result-holder{font-size:0.75rem;color:var(--text2)}
.apo-no-results{text-align:center;padding:var(--space-12);color:var(--text3);font-size:0.9rem}
.apo-notice{background:var(--bg2);border:1px solid var(--border);padding:var(--space-4) 1.2rem;font-size:0.82rem;color:var(--text2);line-height:1.6;margin:var(--space-6) 0;border-radius:2px}
.apotek-crosslink{background:rgba(92,164,224,0.05);border:1px solid var(--blue-20);border-left:3px solid var(--blue);padding:var(--space-4) 1.4rem;margin:var(--space-6) 0;font-size:0.85rem;color:var(--text2);line-height:1.6;border-radius:2px}

/* ── Artikel-layout ─────────────────────────────────────── */
.article-content{max-width:780px}
.article-content h2{font-family:var(--serif);font-size:clamp(1.3rem,2.5vw,1.8rem);color:var(--text);margin:2.5rem 0 1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
.article-content h3{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin:var(--space-8) 0 0.6rem}
.article-content p{font-size:0.9rem;color:var(--text2);line-height:1.85;margin-bottom:1.2rem}
.article-content ul,.article-content ol{color:var(--text2);line-height:1.7;margin-bottom:1.2rem;padding-left:1.5rem}
.article-content li{margin-bottom:var(--space-2)}
.article-content strong{color:var(--text)}
.article-nav{display:flex;gap:var(--space-4);margin:var(--space-8) 0;flex-wrap:wrap}

/* ── Badges ─────────────────────────────────────────────── */
.b-silver{background:var(--silver-10);color:#c0c0c0;border:1px solid var(--silver-20)}
.t-edu{background:var(--blue-08);color:var(--blue);border:1px solid var(--blue-20)}
.t-mek{background:var(--purple-08);color:var(--purple);border:1px solid var(--purple-20)}
.t-np{background:var(--gold-08);color:var(--gold);border:1px solid var(--gold-20)}
.t-warn{background:var(--red-08);color:var(--red);border:1px solid var(--red-20)}

/* ── Tabeller ───────────────────────────────────────────── */
.table-wrapper{overflow-x:auto;margin:var(--space-6) 0;border:1px solid var(--border)}
.comparison-table{width:100%;border-collapse:collapse;font-size:0.82rem}
.comparison-table th{background:var(--bg2);font-family:var(--mono);font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);padding:0.7rem 1rem;text-align:left;font-weight:400;border-bottom:1px solid var(--border)}
.comparison-table td{padding:0.7rem 1rem;border-bottom:1px solid var(--border-40);color:var(--text2);vertical-align:top}
.comparison-table tr:hover td{background:var(--accent-03)}
.chain-table{width:100%;border-collapse:collapse;font-size:0.78rem;margin:var(--space-4) 0}
.chain-table th{background:var(--bg2);font-family:var(--mono);font-size:0.55rem;color:var(--text3);padding:var(--space-2) 0.7rem;text-align:left;border-bottom:1px solid var(--border)}
.chain-table td{padding:var(--space-2) 0.7rem;border-bottom:1px solid var(--border-30);color:var(--text2)}
.chain-table-wrap{overflow-x:auto}
.chain-total{font-weight:500;color:var(--text);border-top:2px solid var(--border)}
.economy-table{width:100%;border-collapse:collapse;font-size:0.8rem;margin:var(--space-4) 0}
.economy-table th{background:var(--bg2);font-family:var(--mono);font-size:0.55rem;color:var(--text3);padding:0.6rem 0.8rem;text-align:left;border-bottom:1px solid var(--border)}
.economy-table td{padding:0.6rem 0.8rem;border-bottom:1px solid var(--border-30);color:var(--text2)}
.network-table{width:100%;border-collapse:collapse;font-size:0.8rem;margin:var(--space-4) 0}
.network-table th{background:var(--bg2);font-family:var(--mono);font-size:0.55rem;color:var(--text3);padding:0.6rem 0.8rem;text-align:left;border-bottom:1px solid var(--border)}
.network-table td{padding:0.6rem 0.8rem;border-bottom:1px solid var(--border-30);color:var(--text2)}
.reviews-table{width:100%;border-collapse:collapse;font-size:0.8rem;margin:var(--space-4) 0}
.reviews-table th{background:var(--bg2);font-family:var(--mono);font-size:0.55rem;color:var(--text3);padding:0.6rem 0.8rem;text-align:left;border-bottom:1px solid var(--border)}
.reviews-table td{padding:0.6rem 0.8rem;border-bottom:1px solid var(--border-30);color:var(--text2)}
.risk-table{width:100%;border-collapse:collapse;font-size:0.8rem;margin:var(--space-4) 0}
.risk-table th{background:var(--bg2);font-family:var(--mono);font-size:0.55rem;color:var(--text3);padding:0.6rem 0.8rem;text-align:left;border-bottom:1px solid var(--border)}
.risk-table td{padding:0.6rem 0.8rem;border-bottom:1px solid var(--border-30);color:var(--text2)}
.timeline-table{width:100%;border-collapse:collapse;font-size:0.8rem;margin:var(--space-4) 0}
.timeline-table th{background:var(--bg2);font-family:var(--mono);font-size:0.55rem;color:var(--text3);padding:0.6rem 0.8rem;text-align:left;border-bottom:1px solid var(--border)}
.timeline-table td{padding:0.6rem 0.8rem;border-bottom:1px solid var(--border-30);color:var(--text2)}
.wiki-table{width:100%;border-collapse:collapse;font-size:0.8rem;margin:var(--space-4) 0}
.wiki-table th{background:var(--bg2);font-family:var(--mono);font-size:0.55rem;color:var(--text3);padding:0.6rem 0.8rem;text-align:left;border-bottom:1px solid var(--border)}
.wiki-table td{padding:0.6rem 0.8rem;border-bottom:1px solid var(--border-30);color:var(--text2)}

/* ── Tidslinje ──────────────────────────────────────────── */
.timeline{position:relative;padding-left:2rem;margin:var(--space-6) 0}
.timeline::before{content:'';position:absolute;left:0.5rem;top:0;bottom:0;width:1px;background:var(--border)}
.timeline-item{position:relative;margin-bottom:var(--space-6);padding-left:1rem}
.timeline-item::before{content:'';position:absolute;left:-1.85rem;top:0.4rem;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.timeline-year{font-family:var(--mono);font-size:0.65rem;color:var(--accent);letter-spacing:0.1em;margin-bottom:0.3rem}

/* ── Guide-steg ─────────────────────────────────────────── */
.guide-steps{margin:var(--space-8) 0}
.guide-step{display:flex;gap:var(--space-6);margin-bottom:var(--space-8);padding-bottom:2rem;border-bottom:1px solid var(--border)}
.guide-step:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.guide-step-num{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:0.85rem;font-weight:700}
.guide-step-body{flex:1}
.guide-step-body h3{margin-top:0}

/* ── Recensent/Granskare ────────────────────────────────── */
.reviewer-box{background:var(--bg2);border:1px solid var(--border);padding:1.2rem 1.6rem;display:flex;gap:var(--space-4);margin:var(--space-8) 0;border-radius:2px}
.reviewer-icon{flex-shrink:0;font-size:2rem}
.reviewer-info{flex:1}
.reviewer-separator{border:none;border-top:1px solid var(--border);margin:var(--space-4) 0}
.reviewer-text{font-size:0.85rem;color:var(--text2);line-height:1.7}
.reviewer-text strong{color:var(--text)}
.reviewer-date{font-family:var(--mono);font-size:0.6rem;color:var(--text3);margin-top:var(--space-2)}

/* ── Rapporter ──────────────────────────────────────────── */
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4);margin:var(--space-6) 0}
.report-card{background:var(--bg2);border:1px solid var(--border);padding:var(--space-6);display:flex;flex-direction:column}
.report-card-icon{font-size:1.5rem;margin-bottom:var(--space-3)}

/* ── Övrigt ─────────────────────────────────────────────── */
.alert-warning{background:var(--red-08);border:1px solid var(--red-20);border-left:3px solid var(--red);padding:var(--space-4) 1.4rem;margin:var(--space-6) 0;font-size:0.85rem;color:#e8b8b8;line-height:1.6;border-radius:2px}
.alert-critical{background:rgba(224,92,92,0.12);border:1px solid var(--red-30);border-left:3px solid var(--red);padding:1.2rem 1.6rem;margin:var(--space-6) 0;font-size:0.9rem;color:#e8b8b8;line-height:1.6;border-radius:2px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,var(--accent-08) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(160,125,224,0.06) 0%,transparent 50%);pointer-events:none}
.hero-content{position:relative;z-index:1}
.info-box{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:var(--space-4) 1.2rem;font-size:0.84rem;color:var(--text2);line-height:1.6;margin:var(--space-4) 0}
.loading{color:var(--text3);font-family:var(--mono);font-size:0.8rem;text-align:center;padding:var(--space-8)}
.numbered-list{counter-reset:num;margin:var(--space-4) 0;padding-left:0;list-style:none}
.numbered-list li{counter-increment:num;padding-left:2rem;position:relative;margin-bottom:var(--space-3);font-size:0.88rem;color:var(--text2);line-height:1.7}
.numbered-list li::before{content:counter(num);position:absolute;left:0;top:0;font-family:var(--mono);font-size:0.7rem;color:var(--accent);width:1.5rem;text-align:center;background:var(--accent-10);border-radius:2px}
.page-title{font-family:var(--serif);font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.15;margin-bottom:1.1rem}
.references{font-size:0.78rem;color:var(--text3);line-height:1.6}
.references-list{list-style:none;counter-reset:ref}
.references-list li{counter-increment:ref;padding:0.4rem 0 0.4rem 2rem;border-bottom:1px solid var(--border-20);position:relative;font-size:0.75rem;color:var(--text3)}
.references-list li::before{content:counter(ref);position:absolute;left:0;font-family:var(--mono);font-size:0.6rem;color:var(--accent)}
.sources-section{padding:var(--space-8) 0}
.status-badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:0.57rem;letter-spacing:0.07em;text-transform:uppercase;padding:0.18rem 0.45rem;white-space:nowrap}
.styled-list{list-style:none;padding:0}
.styled-list li{padding:0.4rem 0 0.4rem 1.5rem;position:relative;font-size:0.88rem;color:var(--text2);line-height:1.7;border-bottom:1px solid var(--border-20)}
.styled-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-size:0.8rem}
.warn-crosslink{background:rgba(224,92,92,0.05);border:1px solid var(--red-15);border-left:3px solid var(--red);padding:var(--space-4) 1.4rem;margin:var(--space-6) 0;font-size:0.85rem;color:var(--text2);line-height:1.6;border-radius:2px}

/* ── UTILITY-KLASSER (minskar inline styles) ── */
.u-accent-mono{color:var(--accent);font-family:var(--mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase}
.u-nowrap{white-space:nowrap}
.u-mono-sm{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text3)}
.u-accent-txt{color:var(--accent)}
.u-text2{color:var(--text2)}
.u-text3{color:var(--text3)}
.u-block{display:block}
.u-mt1{margin-top:var(--space-4)}
.u-mb1{margin-bottom:var(--space-4)}
.u-tac{text-align:center}
.u-fz-sm{font-size:0.85rem}
.u-lh-rel{line-height:1.7}

/* ── UTILITY-KLASSER RUND 2 ── */
.u-flex-center-s{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.u-flex-center2{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.u-fz72-rem{color:var(--text3);font-style:italic;font-size:0.72rem}
.u-fz14-mt8{font-size:14px;color:var(--text3);margin:8px 0 0}
.u-fz-clamp{font-size:clamp(1.4rem,3vw,2rem)}
.u-mono-green{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--accent)}
.u-block-nodec{display:block;text-decoration:none;color:inherit}
.u-fw600-mb6{font-weight:600;font-size:1rem;color:var(--text);margin-bottom:6px}
.u-fz13-lh16{font-size:13px;color:var(--text2);line-height:1.6;margin:0}
.u-btn-sm{margin-top:12px;display:inline-block;padding:6px 16px;font-size:12px}
.u-card-bg{background:var(--surface);padding:var(--space-6);transition:background 0.3s ease}
.u-h5-style{font-family:var(--sans);font-size:1.1rem;margin-top:var(--space-2)}
.u-section-border{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.u-mb3{margin-bottom:var(--space-12)}
.u-text-sec-nodec{color:var(--text2);text-decoration:none;font-size:0.85rem}
.u-ml12-gr{margin-left:12px;color:var(--accent);font-size:12px}
.u-fz7{font-size:0.7rem}
.u-info-box2{margin-top:3rem;padding:var(--space-6);background:var(--bg2);border:1px solid var(--border);border-radius:4px}
.u-flex-gap-wrap{display:flex;gap:var(--space-4);flex-wrap:wrap}
.u-mt32{margin-top:32px}
.u-fz13-m0{font-size:13px;color:var(--text3);margin:0}
.u-fz84-lh19-pl{font-size:0.84rem;color:var(--text2);line-height:1.9;padding-left:1.5rem}
.u-m0-mb8{margin:0 0 8px}
.u-fz82-lh17-mb8{font-size:0.82rem;color:var(--text2);line-height:1.7;margin:0 0 8px}
.u-card-box{margin-top:12px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:4px}
.u-cursor-mono{cursor:pointer;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text3)}
.u-pt140{padding-top:140px}
.u-p-btn{padding:0.6rem 0.75rem}
.u-h3-style{font-size:1.4rem;font-weight:700;margin-top:2.5rem;margin-bottom:var(--space-4)}

/* ── UTILITY-KLASSER RUND 3 ── */
.u-mb05{margin-bottom:var(--space-2)}
.u-accent-mono-mb{font-family:var(--mono);font-size:0.6rem;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:var(--space-2)}
.u-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--border);margin-top:24px}
.u-text-main2{color:var(--text)}
.u-card-p24{padding:24px;background:var(--surface);border:1px solid var(--border)}
.u-mono-upper-mb{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text3);margin-bottom:8px}
.u-fz13-lh16-m0{font-size:13px;color:var(--text2);margin:0;line-height:1.6}
.u-gold{color:var(--gold)}
.u-text3-mb24{color:var(--text3);margin-bottom:24px}
.u-primary-fz{color:var(--accent);font-size:1.15rem;margin-bottom:var(--space-2)}
.u-fz15{font-size:1.5rem}
.u-container{max-width:1100px;margin:0 auto;padding:0 2rem}
.u-accent-nodec{color:var(--accent);text-decoration:none}
.u-fz82-lh17-m0{font-size:0.82rem;color:var(--text2);line-height:1.7;margin:0}
.u-btn-sm2{margin-top:10px;display:inline-block;padding:6px 16px;font-size:12px}
.u-mb15{margin-bottom:var(--space-6)}
.u-border-fade{border-color:rgba(255,255,255,0.06);margin:var(--space-6) 0}
.u-text2-lh18{color:var(--text2);line-height:1.8}
.u-card-mb75{margin-bottom:var(--space-3);background:var(--surface);padding:var(--space-4);border-radius:var(--radius)}
.u-fw600-cursor{font-weight:600;cursor:pointer}
.u-mt075{margin-top:var(--space-3)}
.u-fz78-lh18{font-size:0.78rem;color:var(--text3);line-height:1.8}
.u-border-bb{border-bottom:1px solid var(--border)}
.u-fz95-mt{font-size:0.95rem;color:var(--text);margin-top:var(--space-4)}
.u-text2-mb16{color:var(--text2);margin-bottom:16px}
.u-h4-style{font-size:1.15rem;font-weight:700;margin-top:var(--space-6);margin-bottom:var(--space-3)}
.u-blue{color:var(--blue)}
.u-card-block{background:var(--surface);padding:var(--space-4);border-radius:var(--radius);text-decoration:none;color:var(--text);display:block;border:1px solid var(--border)}
.u-accent-block-mb{color:var(--accent);display:block;margin-bottom:0.25rem}
.u-fz85-sec{font-size:0.85rem;color:var(--text2)}
.u-bg-card-p15{background:var(--surface);padding:var(--space-6)}
.u-code-sm{background:var(--surface);padding:0.1rem 0.3rem;color:var(--accent);font-family:var(--mono)}
.u-accent-mono-ls{font-family:var(--mono);font-size:0.6rem;color:var(--text3);letter-spacing:0.1em;text-transform:uppercase}
.u-flex-col{display:flex;flex-direction:column;gap:0.35rem}
.u-card-block2{display:block;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:20px;text-decoration:none;color:var(--text);transition:border-color 0.2s}
.u-mono-upper-mb4{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text3);margin-bottom:4px}
.u-fz13-lh15{font-size:13px;color:var(--text2);line-height:1.5}
.u-nodec{text-decoration:none}
.u-flex-card{flex:1;min-width:260px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;transition:transform .2s,border-color .2s}

/* ── UTILITY-KLASSER RUND 4 ── */
.u-mono-upper-mb8b{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);margin-bottom:8px}
.u-h5-fw{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--text);margin-bottom:6px}
.u-accent-mono-sm{color:var(--accent);font-size:13px;font-family:var(--mono)}
.u-red-badge{background:var(--red-soft);color:var(--red);font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:2px}
.u-row-flex{padding:0.3rem 0;border-bottom:1px solid var(--border-40);display:flex;gap:var(--space-2)}
.u-p-btn-red{padding:0.6rem 0.75rem;color:var(--red)}
.u-card-bg2{background:var(--surface);padding:var(--space-8);transition:background 0.3s ease}
.u-code-inline{font-family:var(--mono);background:var(--surface);padding:0.1rem 0.4rem;font-size:0.8rem}
.u-p-tac{padding:var(--space-3);text-align:center}
.u-mono-red-badge{font-family:var(--mono);font-size:11px;background:var(--red-soft);color:var(--red);padding:2px 8px;border-radius:2px}
.u-fz13-mt2{font-size:1.3rem;margin-top:var(--space-8)}
.u-mt48{margin-top:48px}
.u-mb15-pl{margin-bottom:var(--space-6);padding-left:1.5rem}
.u-p-btn-orange{padding:0.6rem 0.75rem;color:var(--orange)}
.u-tar{text-align:right}
.u-input-base{background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:0.84rem;padding:0.6rem 0.9rem;width:100%;outline:none}
.u-fz95-mt15{font-size:0.95rem;color:var(--text);margin-top:var(--space-6)}
.u-accent-mono-xs{font-family:var(--mono);font-size:0.55rem;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:0.8rem}
.u-fz78-mb8{font-size:0.78rem;color:var(--text2);margin-bottom:0.8rem}
.u-fz7-mt8{font-size:0.7rem;color:var(--text3);margin-top:0.8rem}
.u-flex-center-mb{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.u-fz14-mb1{font-size:14px;color:var(--text3);margin-bottom:var(--space-4)}
.u-dn{display:none}
.u-mb32{margin-bottom:32px}
.u-mb2{margin-bottom:var(--space-8)}
.u-mb0{margin-bottom:0}
.u-warn-box{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-8);font-size:0.85rem;background:var(--surface);padding:var(--space-4);border-left:4px solid var(--red)}
.u-orange-badge{font-family:var(--mono);font-size:11px;background:var(--orange-soft);color:var(--orange);padding:2px 8px;border-radius:2px}

/* ═══════════════════════════════════════════════════════════════════════════════
   SAKNADE KLASSER — tillagda efter mobil-UX audit 2026-07-05
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Footer-klasser (125 förekomster) ─────────────────────── */
.footer-brand{font-family:var(--serif);font-size:1.1rem;color:var(--text);margin-bottom:var(--space-2)}
.footer-desc{font-size:0.78rem;color:var(--text3);line-height:1.6;margin-bottom:var(--space-4)}
.footer-title{font-family:var(--mono);font-size:0.55rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text3);margin-bottom:var(--space-3)}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{margin-bottom:0.35rem}
.footer-list a{font-size:0.78rem;color:var(--text2);transition:color 0.2s}
.footer-list a:hover{color:var(--accent)}

/* ── Utility-klasser ──────────────────────────────────────── */
.u-green{color:var(--accent)}
.u-text-main{color:var(--text)}
.u-text-red{color:var(--red)}
.u-fz-12{font-size:0.75rem}
.section-gap{margin-top:3rem}

/* ── Peptid-kort (27 förekomster) ─────────────────────────── */
.peptid-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-6);transition:background 0.3s ease,border-color 0.3s ease}
.peptid-card:hover{background:var(--bg3);border-color:var(--accent)}

/* ── FAQ (8 förekomster) ──────────────────────────────────── */
.faq{margin:var(--space-8) 0}

/* ── Varningssidor (2+2 förekomster) ──────────────────────── */
.warning-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--border);margin-top:var(--space-6)}
.warning-card{background:var(--surface);padding:var(--space-6);border-left:3px solid var(--red);transition:background 0.3s ease}
.warning-card:hover{background:var(--bg3)}

/* ── Övrigt ───────────────────────────────────────────────── */
.reviewer-bar{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:var(--space-3) 1rem;font-size:0.78rem;color:var(--text2);margin:var(--space-6) 0;display:flex;align-items:center;gap:var(--space-3)}
.medical-disclaimer{background:var(--red-06);border:1px solid rgba(224,92,92,0.18);border-left:3px solid var(--red);padding:var(--space-4) 1.2rem;font-size:0.8rem;color:var(--text2);line-height:1.6;margin:var(--space-6) 0}
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cursor{position:fixed;width:20px;height:20px;border:1px solid var(--accent);border-radius:50%;pointer-events:none;z-index:9999;transition:transform 0.1s,opacity 0.2s;opacity:0.5}
.cursor-follower{position:fixed;width:8px;height:8px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:9999;transition:transform 0.08s}
.calc-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.6rem 1.2rem;background:var(--accent);color:var(--bg);font-family:var(--sans);font-size:0.85rem;font-weight:500;border:none;border-radius:2px;cursor:pointer;transition:background 0.15s}
.calc-btn:hover{background:var(--accent2)}

/* ── DROPDOWN-MENY ── */
.nav-dropdown{position:relative}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--bg2);border:1px solid var(--border);border-top:none;min-width:260px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.4);padding:var(--space-2) 0;max-height:70vh;overflow-y:auto}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:var(--space-2) 1.2rem;font-family:var(--mono);font-size:0.65rem;color:var(--text2);text-transform:uppercase;letter-spacing:0.06em;transition:background 0.15s,color 0.15s;border-bottom:1px solid var(--border-20);white-space:nowrap}
.nav-dropdown-menu a:last-child{border-bottom:none}
.nav-dropdown-menu a:hover{background:var(--accent-06);color:var(--accent)}
.nav-dropdown-menu .dd-label{padding:0.4rem 1.2rem;font-family:var(--mono);font-size:0.55rem;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;border-bottom:1px solid var(--border)}
.nav-dropdown-menu .dd-warn{color:var(--red)}
.nav-dropdown-menu .dd-warn:hover{background:var(--red-06)}

/* ── FOOTER-GRID ── */
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8);max-width:1100px;margin:0 auto;padding:var(--space-12) 2rem 2rem}
.footer-brand .nav-logo{display:block;margin-bottom:var(--space-4)}
.footer-desc{font-size:0.85rem;color:var(--text2);line-height:1.7;max-width:280px}
.footer-list{list-style:none;padding:0}
.footer-list li{margin-bottom:0.3rem}
.footer-list a{font-size:0.85rem;color:var(--text2);transition:color 0.2s}
.footer-list a:hover{color:var(--accent)}
@media (max-width:700px){
.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
}
@media (max-width:500px){
.footer-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FAQ ACCORDION — Enhetlig standard för alla varianter
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Container: alla FAQ-containers får samma border och spacing */
.faq-item,
details.u-card-mb75,
details.accordion {
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: var(--space-3);
  overflow: hidden;
}

/* Summary/Question: enhetlig styling oavsett variant */
.faq-question,
.u-card-mb75 summary,
.accordion summary {
  width: 100%;
  background: var(--bg2);
  padding: 1.1rem 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-align: left;
  list-style: none;
  transition: background 0.15s;
  text-transform: none;
  letter-spacing: normal;
}

.faq-question:hover,
.u-card-mb75 summary:hover,
.accordion summary:hover {
  background: var(--bg3);
}

/* +/− indicator: alltid ::after för konsekvens */
.faq-question::after,
.u-card-mb75 summary::after,
.accordion summary::after {
  content: '+';
  color: var(--accent);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Dölj default ::before från .accordion */
.accordion summary::before {
  display: none;
}

/* Öppen state: − tecken */
.faq-question[aria-expanded="true"]::after,
.u-card-mb75[open] summary::after,
.accordion[open] summary::after {
  content: '−';
}

/* Answer/Content panel: enhetlig */
.faq-answer,
.u-card-mb75 .u-mt075,
.accordion .u-mt075 {
  display: none;
  padding: 1.4rem 1.6rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.84rem;
  color: var(--text2);
  line-height: 1.85;
}

/* Visa answer när open */
.faq-item.open .faq-answer,
.u-card-mb75[open] .u-mt075,
.accordion[open] .u-mt075 {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VARNINGSSIDOR — Fixar för box-bredder, text-radavstånd och symmetri
   ═══════════════════════════════════════════════════════════════════════════════ */

/* QA/warning boxar — konsekvent bredd och symmetrisk padding */
.u-warn-box {
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.25rem 1.5rem;
  line-height: 1.75;
}

/* Lead/ingress-text — bättre radavstånd */
.warning-article .lead,
.container .lead {
  line-height: 1.95;
  margin-bottom: 2.5rem;
}

/* Brödtext på varningssidor — symmetriskt radavstånd */
.warning-article p,
.container p {
  line-height: 1.92;
  margin-bottom: 1.35rem;
}

/* Accordion/FAQ-kort — konsekvent bredd och padding */
.u-card-mb75 {
  box-sizing: border-box;
  width: 100%;
}

.u-card-mb75 p {
  line-height: 1.88;
  padding: 0 0.25rem;
}

/* Relaterade varningskort — konsekvent bredd */
.related-grid {
  box-sizing: border-box;
  width: 100%;
}

.u-card-block {
  box-sizing: border-box;
  padding: 1.25rem;
}

.u-card-block .u-fz85-sec {
  line-height: 1.75;
}

/* Listor på varningssidor — bättre radavstånd */
.u-mb15-pl li,
.u-mb05 {
  line-height: 1.85;
  margin-bottom: 0.75rem;
}

/* Sektionstitlar — konsekvent avstånd */
.u-h3-style {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.35;
}

.u-h4-style {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Kontext-box längst ner på varningssidor */
.container > div[style*="border-left:4px solid var(--red)"] {
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.container > div[style*="border-left:4px solid var(--red)"] p {
  line-height: 1.8;
}

/* Breadcrumb på varningssidor — konsekvent padding */
.container > nav[aria-label="breadcrumb"] {
  margin-bottom: 1.5rem;
  padding: 0.5rem 0;
}

/* ── TOUCH :active-STATES ── */
button:active, a:active, .acc-head:active{transform:scale(0.97);transition:transform 0.1s}
.nav-hamburger:active span{opacity:0.6}
.card:active{transform:translateY(1px)}
@media (hover:none) and (pointer:coarse){
button:active, a:active, .acc-head:active{transform:scale(0.97)}
}

/* ── Reduced motion accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY-KLASSER RUND 5 — Inline style migration (autogenererade)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hero title small (inline style replacement) */
.u-hero-title-sm{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;line-height:1.2;margin-bottom:var(--space-3);max-width:800px}

/* Hero subtitle */
.u-hero-subtitle{font-size:1.1rem;color:var(--text2);max-width:700px}

/* Lead text (warning pages) */
.u-lead-text{font-size:1.15rem;color:var(--text2);line-height:1.8;margin-bottom:var(--space-8)}

/* Warning badge (red pill) */
.u-warn-badge{display:inline-block;background:var(--red);color:var(--white);padding:0.35rem 0.75rem;border-radius:var(--radius);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-4)}

/* Grid auto-fit 200px */
.u-grid-auto200{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin-bottom:var(--space-8)}

/* Grid auto-fit 180px */
.u-grid-auto180{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-3);font-size:0.85rem}

/* Grid auto-fit 260px */
.u-grid-auto260{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}

/* Warning box large (red border card) */
.u-warn-box-lg{background:var(--surface);padding:var(--space-6);border-radius:var(--radius);border-left:4px solid var(--red);margin-top:3rem}

/* H5 bold heading */
.u-h5-bold{font-size:1.1rem;font-weight:700;margin-bottom:var(--space-3)}

/* Max-width utilities */
.u-mw800{max-width:800px}
.u-mw900{max-width:900px}

/* Section background */
.u-bg-section{background:var(--bg2);padding:var(--space-12) 0 2rem}

/* Breadcrumb nav style */
.u-breadcrumb-nav{margin-bottom:var(--space-6);font-size:0.8rem;color:var(--text2)}

/* Padding utilities */
.u-pt120{padding-top:120px}
.u-pb60{padding-bottom:60px}
.u-pt20{padding-top:20px}

/* Info box green */
.u-info-box-green{background:rgba(0,255,136,0.05);border-left:4px solid var(--accent);padding:var(--space-6) 2rem;margin-bottom:var(--space-12);border-radius:var(--radius)}

/* Flex center mb small */
.u-flex-center-sm{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}

/* Primary text 1.1rem */
.u-primary-fz11{color:var(--accent);font-size:1.1rem}

/* Margin 0 + text3 color */
.u-m0-text3{margin:0;color:var(--text3)}

/* Mobile grid overrides */
@media (max-width:600px){
.u-grid-auto200{grid-template-columns:1fr}
.u-grid-auto180{grid-template-columns:1fr}
.u-grid-auto260{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST REFACTOR — Min-width progressive enhancement
   These override the desktop-first defaults when the viewport is large enough.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Mobile-first base: these components already have mobile-friendly defaults
   via the max-width:600px media queries above. The following min-width queries
   add progressive enhancement for tablet and desktop. */

/* Tablet+: 601px and up */
@media (min-width: 601px) {
  /* Hero: more breathing room on tablet */
  .hero {
    padding: var(--space-12) var(--space-6) var(--space-10);
  }
  .hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.5rem);
  }
  .hero-desc {
    font-size: 0.95rem;
    margin-bottom: var(--space-8);
  }

  /* Section: standard tablet padding */
  .section {
    padding: var(--space-16) var(--space-6);
  }

  /* Container: add horizontal padding */
  .container {
    padding: 0 var(--space-6);
  }

  /* Grids: restore multi-column */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .use-case-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .safety-grid {
    grid-template-columns: 1fr 1fr;
  }
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  /* Typography */
  .section-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
  }
  .breadcrumb {
    padding: 0.9rem var(--space-8);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-8) var(--space-8);
  }
  .footer-bottom {
    padding: var(--space-4) var(--space-8);
  }
}

/* Desktop: 901px and up */
@media (min-width: 901px) {
  /* Hero: full desktop experience */
  .hero {
    padding: var(--space-20) var(--space-8) var(--space-16);
  }
  .hero h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
  }

  /* Section: full desktop padding */
  .section {
    padding: var(--space-16) var(--space-8);
  }
  .container {
    padding: 0 var(--space-8);
  }

  /* Sidebar: restore side-by-side layout */
  .sidebar-wrap {
    grid-template-columns: 1fr 280px;
    gap: var(--space-12);
  }
  .sidebar {
    position: sticky;
    top: 80px;
  }

  /* Typography */
  .section-title {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  }

  /* Footer */
  .footer-grid {
    padding: var(--space-12) var(--space-8) var(--space-8);
  }

  /* Warning hero */
  .warn-hero {
    padding: var(--space-12) var(--space-8) var(--space-10);
  }
  .warn-section {
    padding: var(--space-12) var(--space-8);
  }

  /* Accordion */
  .acc-head {
    padding: var(--space-5) var(--space-6);
    font-size: 0.88rem;
  }
  .acc-body {
    padding: var(--space-6) var(--space-6);
  }

  /* Info/warn boxes */
  .info,
  .warn {
    padding: var(--space-5) var(--space-6);
  }
}

/* ── Content section & page components mobile-first ── */
@media (min-width: 601px) {
  .content-section {
    padding: var(--space-8) 0;
  }
  .tools-section,
  .categories-section {
    margin-top: var(--space-16);
  }
  .search-hero {
    padding: 80px 0 48px;
  }
  .tool-card,
  .category-card {
    padding: var(--space-8);
  }
  .page-title {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  }
  .warn-hero h1 {
    font-size: 2.2rem;
  }
}

@media (min-width: 901px) {
  .content-section {
    padding: var(--space-12) 0;
  }
  .compare-controls,
  .tab-nav {
    flex-direction: row;
  }
  .calc-container {
    padding: var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════════════
   QA-FIX: Undvik dubblerad padding .section + .container
   ──────────────────────────────────────────────────────────────
   .section har padding:0 2rem + max-width:1100px
   .container har padding:0 2rem + max-width:1100px
   När .container ligger inuti .section > .content-section
   blir total sidopadding 64px istället för 32px (hero-inner).
   Detta skapar visuell indentering av rubriker på varningssidor.
   ═══════════════════════════════════════════════════════════════ */
.section .content-section .container {
  padding-left: 0;
  padding-right: 0;
}