/* ============================================================
   TeknikScout — Shared Stylesheet
   ts-styles.css
   
   Usage: <link rel="stylesheet" href="/ts-styles.css">
   
   REUSABLE CLASSES:
   .ts-nav         Fixed navigation bar
   .ts-hamburger   Mobile menu button
   .ts-drawer      Slide-out navigation drawer
   .ts-page        Outer page wrapper (max 1440px)
   .ts-layout      Two-column grid (main + sidebar)
   .ts-main        Left content column
   .ts-sidebar     Right sticky sidebar
   .ts-hero        Page hero panel
   .ts-panel       Content section panel
   .ts-label       Eyebrow label (cyan uppercase)
   .ts-h2          Section heading
   .ts-body        Body paragraph
   .ts-badge       Updated/status badge
   .ts-chip        Quick-info chip
   .ts-info        Coloured info box (data-color=cyan|gold|green|red)
   .ts-step-grid   Numbered step grid
   .ts-snabbguide  3-column quick-step row
   .ts-do-dont     Do / Don't two-column grid
   .ts-table       Data table
   .ts-price-cards Price highlight cards
   .ts-cta         CTA strip
   .ts-faq         FAQ accordion
   .ts-related     Related pages grid
   .ts-side-card   Sidebar module card
   .btn-primary    Primary button
   .btn-outline    Outline button
   ============================================================ */

/* ============================================================
   TEKNIKSCOUT MASTER CSS
   Brand tokens → Layout system → Components → Responsive
   ============================================================ */

/* ── TOKENS ── */
:root {
  --bg:    #0a0e17;
  --bg2:   #0f1520;
  --bg3:   #141c2e;
  --cyan:  #00c8e8;
  --gold:  #ffb700;
  --white: #f0f4ff;
  --grey:  #6b7a99;
  --green: #00e676;
  --red:   #ff3d57;
  --yellow:#ffd600;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --gap:   24px;
  --gap-lg:48px;
  --nav-h: 56px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--white); font-family:'Barlow',sans-serif; overflow-x:hidden; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { display:block; }

/* ============================================================
   NAV
   ============================================================ */
.ts-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center; gap:16px; padding:0 20px;
  background:rgba(10,14,23,0.97);
  border-bottom:1px solid rgba(0,200,232,0.12);
  backdrop-filter:blur(10px);
}
.ts-hamburger {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-sm);
  cursor:pointer; flex-shrink:0;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:10px 12px;
  transition:background 0.2s, border-color 0.2s;
}
.ts-hamburger:hover,
.ts-hamburger.open { background:rgba(0,200,232,0.15); border-color:rgba(0,200,232,0.4); }
.ts-hamburger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; }
.ts-nav-logo img { height:38px; width:auto; }

/* ============================================================
   SLIDE-OUT SIDEBAR (mobile nav)
   ============================================================ */
.ts-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:300; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.ts-overlay.open { opacity:1; pointer-events:all; }
.ts-drawer {
  position:fixed; top:0; left:-320px; bottom:0; width:300px; z-index:400;
  background:var(--bg2); border-right:1px solid rgba(0,200,232,0.12);
  overflow-y:auto; transition:left 0.3s; padding-bottom:40px;
}
.ts-drawer.open { left:0; }
.ts-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.ts-drawer-close {
  background:none; border:none; color:var(--grey); cursor:pointer; font-size:22px; padding:4px 8px;
  transition:color 0.2s;
}
.ts-drawer-close:hover { color:var(--white); }
.ts-drawer-section { padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.ts-drawer-section-title {
  padding:10px 20px 6px; font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--cyan);
}
.ts-drawer-link {
  display:flex; align-items:center; gap:10px; padding:10px 20px;
  color:var(--grey); font-size:15px; font-weight:500;
  transition:color 0.15s, background 0.15s;
}
.ts-drawer-link:hover { color:var(--white); background:rgba(255,255,255,0.03); }
.ts-drawer-link .dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ts-drawer-toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; color:var(--white); font-size:15px; font-weight:600;
  cursor:pointer; user-select:none; transition:color 0.15s;
}
.ts-drawer-toggle:hover { color:var(--cyan); }
.ts-drawer-toggle .chevron { font-size:12px; color:var(--grey); transition:transform 0.2s; }
.ts-drawer-toggle.open .chevron { transform:rotate(180deg); }
.ts-drawer-sub { display:none; }
.ts-drawer-sub.open { display:block; }
.ts-drawer-sub-link {
  display:block; padding:8px 20px 8px 44px;
  color:var(--grey); font-size:14px; transition:color 0.15s;
}
.ts-drawer-sub-link:hover { color:var(--cyan); }

/* ============================================================
   OUTER PAGE WRAPPER
   ============================================================ */
.ts-breadcrumb {
  max-width:1440px; margin:0 auto;
  padding:calc(var(--nav-h) + 24px) 40px 0;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--grey);
}
.ts-breadcrumb a { color:var(--cyan); }
.ts-breadcrumb a:hover { text-decoration:underline; }
.ts-breadcrumb span { opacity:0.5; }

.ts-back {
  display:inline-flex; align-items:center; gap:8px;
  margin:10px 40px 0;
  max-width:1440px;
  color:var(--cyan); font-size:13px; font-weight:700;
  padding:8px 14px;
  background:rgba(0,200,232,0.06); border:1px solid rgba(0,200,232,0.18);
  border-radius:var(--radius-sm);
  transition:background 0.2s, border-color 0.2s;
}
.ts-back:hover { background:rgba(0,200,232,0.12); border-color:rgba(0,200,232,0.35); }

/* ── Main two-column layout ── */
.ts-page {
  max-width:1440px; margin:0 auto;
  padding:24px 40px 60px;
}
.ts-layout {
  display:grid;
  grid-template-columns: 1fr;
  gap:var(--gap);
}
.ts-main  { min-width:0; }
.ts-sidebar { display:none; } /* shown on desktop */

/* ============================================================
   HERO
   ============================================================ */
.ts-hero {
  background:var(--bg2);
  border:1px solid rgba(0,200,232,0.14);
  border-radius:var(--radius-lg);
  padding:36px 40px 32px;
  margin-bottom:var(--gap);
}
.ts-hero-label {
  font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:12px;
}
.ts-hero-h1 {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(32px,4vw,52px); line-height:1.05;
  margin-bottom:16px;
}
.ts-hero-sub {
  color:var(--grey); font-size:16px; line-height:1.75;
  max-width:680px; margin-bottom:20px;
}
.ts-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,200,232,0.08); border:1px solid rgba(0,200,232,0.2);
  border-radius:var(--radius-sm); padding:8px 14px;
  font-size:13px; color:var(--grey);
}
.ts-badge::before {
  content:''; display:inline-block; width:8px; height:8px;
  border-radius:50%; background:var(--green); flex-shrink:0;
}
.ts-hero-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.ts-chip {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg3); border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-sm); padding:8px 14px;
  font-size:13px; color:var(--grey);
}
.ts-chip strong { color:var(--white); font-weight:600; }

/* ============================================================
   CONTENT MODULES
   ============================================================ */

/* Shared label + heading */
.ts-label {
  font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:10px; display:block;
}
.ts-h2 {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(22px,2.4vw,32px); color:var(--white);
  padding-bottom:12px; margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.ts-body {
  color:var(--grey); font-size:15px; line-height:1.8; margin-bottom:16px;
}
.ts-body strong { color:var(--white); font-weight:600; }
.ts-body a { color:var(--cyan); font-weight:600; }
.ts-body a:hover { text-decoration:underline; }

/* Section panel — wraps each major content block */
.ts-panel {
  background:var(--bg2);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--radius-lg);
  padding:28px 32px;
  margin-bottom:var(--gap);
}

/* Snabbguide — 3 quick-step cards */
.ts-snabbguide {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px; margin:20px 0;
}
.ts-snabb-card {
  background:var(--bg3); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-md); padding:20px;
  display:flex; flex-direction:column; gap:8px;
}
.ts-snabb-num {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:32px; color:var(--cyan); line-height:1;
}
.ts-snabb-title { font-weight:700; font-size:14px; color:var(--white); }
.ts-snabb-desc { font-size:13px; color:var(--grey); line-height:1.6; }
.ts-snabb-desc a { color:var(--cyan); font-weight:600; }

/* Step grid — numbered steps, 2-col on desktop */
.ts-step-grid {
  display:grid; grid-template-columns:1fr;
  gap:12px; margin:20px 0;
}
.ts-step {
  background:var(--bg3); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-md); padding:18px 20px;
  display:flex; align-items:flex-start; gap:16px;
  transition:border-color 0.2s;
}
.ts-step:hover { border-color:rgba(0,200,232,0.2); }
.ts-step-num {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:rgba(0,200,232,0.1); border:2px solid rgba(0,200,232,0.3);
  color:var(--cyan); font-family:'Barlow Condensed',sans-serif;
  font-size:15px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.ts-step-title { font-weight:700; font-size:15px; color:var(--white); margin-bottom:4px; }
.ts-step-desc  { font-size:14px; color:var(--grey); line-height:1.7; }
.ts-step-desc strong { color:var(--white); }

/* Info box — coloured highlight box */
.ts-info {
  border-radius:var(--radius-md); padding:20px 22px; margin:16px 0;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.ts-info[data-color="cyan"]  { background:rgba(0,200,232,0.06);  border-color:rgba(0,200,232,0.2);  }
.ts-info[data-color="gold"]  { background:rgba(255,183,0,0.06);  border-color:rgba(255,183,0,0.2);  }
.ts-info[data-color="green"] { background:rgba(0,230,118,0.06);  border-color:rgba(0,230,118,0.2);  }
.ts-info[data-color="red"]   { background:rgba(255,61,87,0.06);  border-color:rgba(255,61,87,0.2);  }
.ts-info-label {
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:10px; display:block;
}
.ts-info[data-color="cyan"]  .ts-info-label { color:var(--cyan);  }
.ts-info[data-color="gold"]  .ts-info-label { color:var(--gold);  }
.ts-info[data-color="green"] .ts-info-label { color:var(--green); }
.ts-info[data-color="red"]   .ts-info-label { color:var(--red);   }
.ts-info ul { list-style:none; padding:0; }
.ts-info ul li {
  font-size:14px; color:var(--grey); line-height:1.75;
  padding:4px 0 4px 20px; position:relative;
}
.ts-info ul li::before { content:'→'; position:absolute; left:0; }
.ts-info[data-color="cyan"]  ul li::before { color:var(--cyan);  }
.ts-info[data-color="gold"]  ul li::before { color:var(--gold);  }
.ts-info[data-color="green"] ul li::before { color:var(--green); }
.ts-info[data-color="red"]   ul li::before { color:var(--red);   }
.ts-info ul li strong { color:var(--white); }
.ts-info ul li a      { color:var(--cyan); font-weight:600; }
.ts-info p { font-size:14px; color:var(--grey); line-height:1.7; }
.ts-info p strong { color:var(--white); }
.ts-info p a { color:var(--cyan); font-weight:600; }

/* Do / Don't */
.ts-do-dont {
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px; margin:20px 0;
}
.ts-do, .ts-dont {
  border-radius:var(--radius-md); padding:20px;
}
.ts-do   { background:rgba(0,230,118,0.05); border:1px solid rgba(0,230,118,0.2); }
.ts-dont { background:rgba(255,61,87,0.05); border:1px solid rgba(255,61,87,0.2); }
.ts-do-label, .ts-dont-label {
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:12px; display:block;
}
.ts-do-label   { color:var(--green); }
.ts-dont-label { color:var(--red); }
.ts-do ul, .ts-dont ul { list-style:none; padding:0; }
.ts-do ul li, .ts-dont ul li {
  font-size:14px; color:var(--grey); line-height:1.7;
  padding:4px 0 4px 20px; position:relative;
}
.ts-do   ul li::before { content:'✓'; position:absolute; left:0; color:var(--green); font-weight:700; }
.ts-dont ul li::before { content:'✗'; position:absolute; left:0; color:var(--red);   font-weight:700; }

/* Data table */
.ts-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:14px; }
.ts-table th {
  padding:10px 16px; text-align:left;
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--grey); border-bottom:1px solid rgba(255,255,255,0.08);
}
.ts-table td { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--grey); }
.ts-table tr:last-child td { border-bottom:none; }
.ts-table .ts-val { color:var(--gold); font-weight:700; }
.ts-table strong { color:var(--white); }

/* Price highlight cards */
.ts-price-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0;
}
.ts-price-card {
  background:rgba(255,183,0,0.06); border:1px solid rgba(255,183,0,0.15);
  border-radius:var(--radius-sm); padding:14px 16px;
}
.ts-price-card .amount {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:26px; color:var(--gold);
}
.ts-price-card .desc { font-size:13px; color:var(--grey); margin-top:3px; }

/* CTA strip */
.ts-cta {
  background:var(--bg2);
  border:1px solid rgba(0,200,232,0.15); border-left:3px solid var(--cyan);
  border-radius:var(--radius-lg); padding:28px 32px;
  margin:32px 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.ts-cta-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:22px; margin-bottom:4px;
}
.ts-cta-sub { font-size:14px; color:var(--grey); }
.ts-cta-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cyan); color:#000; font-weight:700; font-size:14px;
  padding:13px 24px; border-radius:var(--radius-sm);
  transition:transform 0.2s, box-shadow 0.2s; white-space:nowrap;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,200,232,0.25); }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--cyan); font-weight:700; font-size:14px;
  padding:12px 22px; border-radius:var(--radius-sm);
  border:1px solid rgba(0,200,232,0.3); white-space:nowrap;
  transition:border-color 0.2s;
}
.btn-outline:hover { border-color:var(--cyan); }

/* FAQ */
.ts-faq { display:grid; gap:10px; margin:20px 0; }
.ts-faq-item {
  background:var(--bg3); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-md); overflow:hidden;
}
.ts-faq-q {
  padding:16px 20px; font-weight:600; font-size:14px; color:var(--white);
  cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:12px; user-select:none;
}
.ts-faq-q:hover { color:var(--cyan); }
.ts-faq-icon { color:var(--cyan); font-size:20px; flex-shrink:0; transition:transform 0.2s; line-height:1; }
.ts-faq-a {
  padding:0 20px 16px; font-size:14px; color:var(--grey); line-height:1.7; display:none;
}
.ts-faq-a a { color:var(--cyan); font-weight:600; }
.ts-faq-item.open .ts-faq-a  { display:block; }
.ts-faq-item.open .ts-faq-icon { transform:rotate(45deg); }
/* FAQ via <details> element */
details.ts-faq-item { list-style:none; }
details.ts-faq-item summary {
  padding:16px 20px; font-weight:600; font-size:14px; color:var(--white);
  cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:12px; user-select:none; list-style:none;
}
details.ts-faq-item summary::-webkit-details-marker { display:none; }
details.ts-faq-item summary::after {
  content:'+'; color:var(--cyan); font-size:18px; flex-shrink:0;
  transition:transform 0.2s;
}
details.ts-faq-item[open] summary::after { transform:rotate(45deg); }
.ts-faq-answer {
  padding:0 20px 16px; font-size:14px; color:var(--grey); line-height:1.7;
}
.ts-faq-answer a { color:var(--cyan); font-weight:600; }

/* Related pages */
.ts-related {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px; margin:20px 0;
}
.ts-related-card {
  background:var(--bg3); border-radius:var(--radius-md); padding:18px;
  display:flex; flex-direction:column; gap:4px;
  transition:border-color 0.2s, transform 0.2s;
  border:1px solid rgba(255,255,255,0.06);
}
.ts-related-card:hover { transform:translateY(-2px); border-color:rgba(0,200,232,0.2); }
.ts-related-label { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.ts-related-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:18px; color:var(--white); }
.ts-related-desc { font-size:12px; color:var(--grey); }

/* Mobile platform nav */
.ts-platform-nav {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:20px 0;
}
.ts-platform-link {
  background:var(--bg2); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-sm); padding:11px 8px;
  text-align:center; font-size:13px; font-weight:600; color:var(--grey);
  transition:border-color 0.2s, color 0.2s;
}
.ts-platform-link:hover  { color:var(--white); border-color:rgba(0,200,232,0.2); }
.ts-platform-link.active { color:var(--gold); border-color:rgba(255,183,0,0.3); }

/* ============================================================
   SIDEBAR MODULES
   ============================================================ */
.ts-side-card {
  background:var(--bg2); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-md); padding:18px;
}
.ts-side-label {
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:10px; display:block;
}
.ts-side-title { font-size:14px; color:var(--grey); line-height:1.6; margin-bottom:14px; }
.ts-side-nav-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-radius:var(--radius-sm); margin-bottom:6px;
  font-size:13px; font-weight:600; color:var(--grey);
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  transition:border-color 0.2s, color 0.2s;
}
.ts-side-nav-link:hover  { color:var(--white); border-color:rgba(255,255,255,0.15); }
.ts-side-nav-link.active { color:var(--gold); border-color:rgba(255,183,0,0.3); background:rgba(255,183,0,0.04); }
.ts-side-btn {
  display:block; background:var(--cyan); color:#000; font-weight:700; font-size:14px;
  padding:12px 16px; border-radius:var(--radius-sm); text-align:center; margin-top:10px;
  transition:transform 0.2s;
}
.ts-side-btn:hover { transform:translateY(-2px); }
.ts-side-link {
  display:block; color:var(--cyan); font-weight:700; font-size:13px;
  padding:10px 16px; border-radius:var(--radius-sm); text-align:center;
  border:1px solid rgba(0,200,232,0.3); margin-top:8px;
  transition:border-color 0.2s;
}
.ts-side-link:hover { border-color:var(--cyan); }

/* ============================================================
   FOOTER
   ============================================================ */
.ts-footer {
  max-width:1440px; margin:0 auto; padding:28px 40px;
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:16px; color:var(--grey); font-size:13px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.ts-footer-links { display:flex; flex-wrap:wrap; gap:20px; }
.ts-footer-links a { color:var(--grey); transition:color 0.15s; }
.ts-footer-links a:hover { color:var(--cyan); }
.ts-footer-disclaimer {
  width:100%; padding-top:12px; border-top:1px solid rgba(255,255,255,0.04);
  font-size:12px; color:var(--grey); line-height:1.6;
}
.ts-footer-disclaimer a { color:var(--cyan); font-weight:600; }
.ts-footer-inner {
  width:100%; display:flex; flex-direction:column; align-items:center;
  gap:14px; text-align:center;
}
.ts-footer-logo { flex-shrink:0; }
.ts-footer-copy {
  font-size:12px; color:var(--grey); opacity:0.7;
}

/* ── CTA Buttons (50-series pages) ── */
.ts-cta-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 24px; border-radius:var(--radius-sm);
  font-weight:700; font-size:14px;
  text-decoration:none; white-space:nowrap;
  transition:transform 0.15s, opacity 0.15s;
}
.ts-cta-btn:hover { transform:translateY(-1px); opacity:0.9; }
.ts-cta-btn-sec {
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 24px; border-radius:var(--radius-sm);
  font-weight:700; font-size:14px; color:var(--cyan);
  background:transparent; border:1px solid rgba(0,200,232,0.3);
  text-decoration:none; white-space:nowrap;
  transition:border-color 0.15s, background 0.15s;
}
.ts-cta-btn-sec:hover {
  border-color:var(--cyan); background:rgba(0,200,232,0.06);
}

/* ── CTA Block (centered CTA wrapper) ── */
.ts-cta-block {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:24px;
}

/* ── Trust panel (RTX 5060 Ti) ── */
.ts-trust-panel {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:12px 18px; margin-bottom:var(--gap);
  background:rgba(0,200,232,0.03);
  border:1px solid rgba(0,200,232,0.12);
  border-radius:var(--radius-md); font-size:13px; color:var(--grey);
}
.ts-trust-item {
  display:inline-flex; align-items:center; gap:6px;
}
.ts-trust-icon { font-size:14px; flex-shrink:0; }
.ts-trust-badge {
  display:inline-block; padding:3px 10px; border-radius:6px;
  font-size:11px; font-weight:700; letter-spacing:1px;
  background:rgba(0,200,232,0.08); color:var(--cyan);
  border:1px solid rgba(0,200,232,0.2);
}

/* ── Panel label (alternate to ts-label) ── */
.ts-panel-label {
  display:block; font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:10px;
}

/* ── Price divider (thin line between sections) ── */
.ts-price-divider {
  height:1px; background:rgba(255,255,255,0.06); margin:12px 0 16px;
}

/* ── Sidebar panel (alternate wrapper) ── */
.ts-side-panel {
  background:var(--bg2); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-md); padding:18px;
}
.ts-side-fact {
  font-size:13px; color:var(--grey); line-height:1.6; margin-bottom:8px;
}

/* ── GPU Badge variants (gpu-priser hub) ── */
.badge-budget {
  background:rgba(0,200,232,0.12); color:var(--cyan);
  border:1px solid rgba(0,200,232,0.25);
}
.badge-mid {
  background:rgba(0,230,118,0.1); color:var(--green);
  border:1px solid rgba(0,230,118,0.25);
}
.badge-high {
  background:rgba(255,183,0,0.1); color:var(--gold);
  border:1px solid rgba(255,183,0,0.25);
}
.badge-used {
  background:rgba(255,255,255,0.05); color:var(--grey);
  border:1px solid rgba(255,255,255,0.1);
}

/* ── Source tags (homepage data strip) ── */
.sources-strip {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px 0; margin-top:8px;
}
.source-tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:6px;
  font-size:12px; font-weight:600; color:var(--grey);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}

/* ============================================================
   SCI-FI DIVIDER ACCENT (between panels, optional)
   ============================================================ */
.ts-divider {
  height:1px; background:linear-gradient(to right,transparent,rgba(0,200,232,0.2),transparent);
  margin:8px 0 24px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Mobile first — already set above */

@media (max-width: 600px) {
  /* Spacing */
  .ts-breadcrumb   { padding-top:calc(var(--nav-h) + 16px); padding-left:16px; padding-right:16px; }
  .ts-back         { margin-left:16px; margin-right:16px; }
  .ts-page         { padding:16px 16px 48px; }
  .ts-hero         { padding:24px 18px 20px; }
  .ts-panel        { padding:20px 16px; margin-bottom:16px; }
  .ts-cta          { padding:20px 16px; flex-direction:column; align-items:stretch; }
  .ts-footer       { flex-direction:column; align-items:flex-start; padding:20px 16px; }

  /* Grids single column */
  .ts-snabbguide   { grid-template-columns:1fr; }
  .ts-do-dont      { grid-template-columns:1fr; }
  .ts-platform-nav { grid-template-columns:repeat(2,1fr); }
  .ts-step-grid    { grid-template-columns:1fr; }
  .ts-related      { grid-template-columns:1fr 1fr; }

  /* Typography */
  .ts-hero-h1  { font-size:clamp(26px, 8vw, 38px); line-height:1.08; }
  .ts-h2       { font-size:clamp(20px, 6vw, 28px); }
  .ts-hero-sub { max-width:100%; font-size:15px; }
  .ts-body     { font-size:15px; }

  /* Buttons full width */
  .btn-primary,
  .btn-outline     { width:100%; justify-content:center; text-align:center; white-space:normal; }
  .ts-cta-actions  { flex-direction:column; gap:10px; width:100%; }

  /* Table horizontal scroll */
  .ts-table-wrap   { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ts-table        { white-space:nowrap; min-width:340px; }

  /* Nav */
  .ts-hamburger    { padding:12px 14px; }
  .ts-nav-logo img { height:34px; }

  /* Chips */
  .ts-hero-chips   { gap:8px; }
  .ts-chip         { font-size:12px; padding:7px 11px; }
}

@media (min-width: 900px) {
  /* Outer containers */
  .ts-breadcrumb { padding-left:72px; padding-right:72px; }
  .ts-back       { margin-left:72px; }
  .ts-page       { padding:32px 72px 70px; }
  .ts-footer     { padding-left:72px; padding-right:72px; }

  /* Two-column layout */
  .ts-layout {
    display:grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap:56px;
    align-items:start;
  }
  .ts-sidebar {
    display:flex;
    flex-direction:column;
    gap:14px;
    position:sticky;
    top:calc(var(--nav-h) + 24px);
  }

  /* Hide mobile platform nav on desktop */
  .ts-platform-nav { display:none; }

  /* Content width improvements */
  .ts-hero         { padding:40px 44px 36px; }
  .ts-panel        { padding:32px 36px; }
  .ts-h2           { font-size:clamp(24px, 2.2vw, 34px); }
  .ts-body         { font-size:16px; line-height:1.85; }
  .ts-hero-h1      { font-size:clamp(36px, 3.5vw, 56px); }

  /* Step grid — 2 columns */
  .ts-step-grid    { grid-template-columns:1fr 1fr; }
  .ts-step         { padding:22px 24px; }

  /* Larger info box text */
  .ts-info ul li   { font-size:15px; }
  .ts-do ul li,
  .ts-dont ul li   { font-size:15px; }

  /* Table */
  .ts-table        { font-size:15px; }
  .ts-table th,
  .ts-table td     { padding:14px 18px; }
}

/* ============================================================
   SUB-NAVIGATION BAR (breadcrumbs + quick links)
   Sits below ts-nav on all pages
   ============================================================ */
.ts-subnav {
  position:sticky; top:var(--nav-h); z-index:150;
  margin-top:var(--nav-h); /* clear fixed navbar */
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 20px;
  height:40px;
  background:rgba(15,21,32,0.97);
  border-bottom:1px solid rgba(255,255,255,0.05);
  backdrop-filter:blur(8px);
  font-size:13px;
}
.ts-subnav-left {
  display:flex; align-items:center; gap:14px;
  min-width:0; /* allow text truncation */
}
.ts-subnav-back {
  display:inline-flex; align-items:center; gap:4px;
  color:var(--cyan); font-weight:600; font-size:13px;
  white-space:nowrap; text-decoration:none;
  padding:4px 10px; border-radius:6px;
  background:rgba(0,200,232,0.06);
  border:1px solid rgba(0,200,232,0.15);
  transition:background 0.15s, border-color 0.15s;
  flex-shrink:0;
}
.ts-subnav-back:hover {
  background:rgba(0,200,232,0.12);
  border-color:rgba(0,200,232,0.3);
}
.ts-subnav-breadcrumbs {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--grey);
  min-width:0; overflow:hidden;
}
.ts-subnav-bc {
  color:var(--grey); text-decoration:none;
  transition:color 0.15s; white-space:nowrap;
}
.ts-subnav-bc:hover { color:var(--cyan); }
.ts-subnav-sep {
  color:rgba(255,255,255,0.2); font-size:11px; flex-shrink:0;
}
.ts-subnav-current {
  color:var(--white); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ts-subnav-right {
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.ts-subnav-link {
  display:inline-flex; align-items:center;
  padding:4px 12px; border-radius:6px;
  font-size:12px; font-weight:600; color:var(--grey);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  white-space:nowrap; text-decoration:none;
  transition:color 0.15s, border-color 0.15s, background 0.15s;
}
.ts-subnav-link:hover {
  color:var(--cyan);
  border-color:rgba(0,200,232,0.25);
  background:rgba(0,200,232,0.06);
}

/* Mobile: hide quick-link pills, show breadcrumbs only */
@media (max-width: 768px) {
  .ts-subnav { padding:0 16px; }
  .ts-subnav-right { display:none; }
}
@media (min-width: 900px) {
  .ts-subnav { padding:0 72px; }
}

/* ============================================================
   RETAILER ROW — v3 (50-series pill-button layout)
   retailer-right wraps price + CTA on the right side
   ============================================================ */
.retailer-right {
  display:flex; align-items:center; gap:12px;
  margin-left:auto; flex-shrink:0;
}
.retailer-cta-btn {
  display:inline-flex; align-items:center;
  padding:6px 14px; border-radius:20px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase;
  color:var(--cyan); white-space:nowrap;
  background:rgba(0,200,232,0.08);
  border:1px solid rgba(0,200,232,0.2);
  transition:background 0.15s, border-color 0.15s;
}
.retailer-row:hover .retailer-cta-btn {
  background:rgba(0,200,232,0.15);
  border-color:rgba(0,200,232,0.4);
}
@media (max-width: 480px) {
  .retailer-right { gap:8px; }
  .retailer-cta-btn { padding:5px 10px; font-size:11px; }
}

/* === MOBILE FIXES — May 7 2026 === */
/* Fix 1: Price wrapping - keep number and kr on same line */
.amount, .gpu-price, .ts-chip strong, .retailer-price, .gpu-price-row .gpu-price {
  white-space: nowrap;
}
/* Fix 3: Comparison table horizontal scroll on mobile */
@media (max-width: 768px) {
  .ts-comp-table-wrap, .ts-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ts-comp-table-wrap table, .ts-table-wrap table {
    min-width: 520px;
  }
  .ts-comp-table-wrap::after, .ts-table-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg2));
    pointer-events: none;
  }
  .ts-comp-table-wrap, .ts-table-wrap {
    position: relative;
  }
}
/* Fix 2: gpu-priser cards - spacing between price and label */
.gpu-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.gpu-price-label {
  margin-left: 4px;
}

/* Fix: push retailer-cta to right on 30/40-series rows without retailer-right wrapper */
.retailer-cta {
  margin-left:auto; flex-shrink:0;
}

/* ============================================================
   DESKTOP DENSITY — tighter layout on wide screens
   Mobile stays unchanged (all rules inside min-width queries)
   ============================================================ */
@media (min-width: 900px) {
  /* Reduce vertical gaps between panels */
  .ts-panel { margin-bottom:18px; }
  .ts-hero { margin-bottom:18px; }
  
  /* Tighter panel padding */
  .ts-panel { padding:26px 32px; }
  
  /* Wider content on guide/analys pages with no sidebar */
  .ts-main { max-width:none; }
  
  /* Reduce section padding on hub pages */
  section { padding:32px 24px; }
}

@media (min-width: 1200px) {
  /* On very wide screens, use more horizontal space */
  .ts-page { max-width:1540px; padding:28px 56px 60px; }
  .ts-footer { max-width:1540px; }
  
  /* Wider sidebar gap */
  .ts-layout { gap:48px; }
  .ts-sidebar { width:320px; }
}

/* GPU card grids — 3 columns on desktop, 2 on tablet, 1 on mobile */
.ts-related {
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
@media (min-width: 900px) {
  .ts-related { grid-template-columns:repeat(3,1fr); gap:14px; }
}

/* Price cards — side by side on desktop */
@media (min-width: 900px) {
  .ts-price-cards {
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:12px;
  }
}

/* Snabbguide — 3 columns on desktop */
@media (min-width: 900px) {
  .ts-snabbguide { grid-template-columns:repeat(3,1fr); }
}

/* Step grid — 3 columns on wide screens */
@media (min-width: 1200px) {
  .ts-step-grid { grid-template-columns:repeat(3,1fr); }
}