/* ==========================================================================
   TALENTSIO — designsystem för de statiska sidorna
   Speglar exakt appens befintliga tokens (Tailwind + Inter, mörkt tema).
   Enda filen som styr utseendet. Byt ett värde här — alla 76 sidor följer med.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* --- ytor (från --brand-*) --- */
  --ts-bg:#0D0D0D;            /* app-bakgrund      */
  --ts-surface:#181818;       /* kort, KPI-boxar   */
  --ts-surface-2:#111111;     /* sidopanel         */
  --ts-input:#222222;         /* formulärfält      */
  --ts-scroll-track:#0f0f10;
  --ts-scroll-thumb:#2A2A2D;
  --ts-scroll-thumb-hover:#3A3A3D;
  /* --- ramar --- */
  --ts-line:#2A2A2A;
  --ts-line-soft:#232326;
  /* --- text --- */
  --ts-ink:#FFFFFF;
  --ts-ink-2:#D4D4D4;
  --ts-ink-3:#A3A3A3;
  --ts-ink-4:#737373;
  --ts-ink-5:#525252;
  /* --- primär: orange --- */
  --ts-accent:#FF5C00;
  --ts-accent-hover:#FF7326;
  --ts-accent-soft:rgba(255,92,0,0.10);
  --ts-accent-tint:#3a1a0a;
  --ts-accent-link:#FF7A2F;
  --ts-accent-link-hover:#FF9E5C;
  --ts-selection:#FF6600;
  /* --- sekundär: grön --- */
  --ts-green:#1A8A4A;
  --ts-green-hover:#157A41;
  --ts-green-tint:#0F3A1F;
  /* --- status --- */
  --ts-warn:#E0C341;
  --ts-bad:#DC2626;
  --ts-bad-text:#FF6A4D;
  --ts-bad-tint:#3B1717;
  /* --- typografi --- */
  --ts-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ts-fs-xs:12px; --ts-fs-sm:13px; --ts-fs-base:15px; --ts-fs-lg:18px;
  --ts-fs-h4:22px; --ts-fs-h3:28px; --ts-fs-h2:36px; --ts-fs-h1:24px; --ts-fs-hero:60px;
  /* --- rum --- */
  --ts-1:4px; --ts-2:8px; --ts-3:12px; --ts-4:16px; --ts-5:20px;
  --ts-6:24px; --ts-8:32px; --ts-10:40px; --ts-12:48px; --ts-16:64px;
  /* --- radie (Tailwind-skalan appen använder) --- */
  --ts-r-sm:6px;    /* rounded-md  */
  --ts-r:8px;       /* rounded-lg  */
  --ts-r-lg:12px;   /* rounded-xl  */
  --ts-r-pill:999px;
  --ts-maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
::selection{background:var(--ts-selection);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ts-scroll-track)}
::-webkit-scrollbar-thumb{background:var(--ts-scroll-thumb);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--ts-scroll-thumb-hover)}
body{margin:0;background:var(--ts-bg);color:var(--ts-ink);font-family:var(--ts-font);
  font-size:var(--ts-fs-base);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ts-accent-link);text-decoration:none}
a:hover{color:var(--ts-accent-link-hover)}
:focus-visible{outline:2px solid var(--ts-accent);outline-offset:2px;border-radius:var(--ts-r-sm)}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--ts-3);color:var(--ts-ink)}
h1{font-size:var(--ts-fs-h1);font-weight:700}
h2{font-size:var(--ts-fs-h2);font-weight:700}
h3{font-size:var(--ts-fs-h3);font-weight:700;letter-spacing:-.01em}
h4{font-size:var(--ts-fs-h4);font-weight:700}
@media(max-width:700px){h2{font-size:26px}h3{font-size:21px}}
p{margin:0 0 var(--ts-4)}
.ts-wrap{max-width:var(--ts-maxw);margin:0 auto;padding:0 var(--ts-6)}
.ts-skip{position:absolute;left:-9999px}
.ts-skip:focus{left:var(--ts-4);top:var(--ts-4);background:var(--ts-surface);padding:var(--ts-3);z-index:999;border-radius:var(--ts-r)}

/* ---------- header ---------- */
.ts-header{background:var(--ts-bg);border-bottom:1px solid var(--ts-line);position:sticky;top:0;z-index:50}
.ts-header .ts-wrap{display:flex;align-items:center;gap:var(--ts-6);padding-top:14px;padding-bottom:14px}
.ts-logo{font-weight:800;font-size:20px;color:var(--ts-ink);letter-spacing:-.035em}
.ts-logo:hover{color:var(--ts-ink)}
.ts-nav{display:flex;gap:var(--ts-6);font-size:var(--ts-fs-base)}
.ts-nav a{color:#A3A3A3;font-weight:500}
.ts-nav a:hover{color:var(--ts-ink)}
.ts-header-cta{margin-left:auto;display:flex;gap:var(--ts-2);align-items:center}
@media(max-width:900px){.ts-nav{display:none}}

/* ---------- knappar ---------- */
.ts-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ts-2);
  border:1px solid transparent;border-radius:var(--ts-r);padding:10px 20px;
  font:inherit;font-size:var(--ts-fs-base);font-weight:600;cursor:pointer;
  background:var(--ts-accent);color:#fff;transition:background .13s,border-color .13s,color .13s}
.ts-btn:hover{background:var(--ts-accent-hover);color:#fff}
.ts-btn--cta{background:var(--ts-accent)}
.ts-btn--cta:hover{background:var(--ts-accent-hover)}
/* grön pill — samma mönster som "Book now" i appens nav */
.ts-btn--pill{background:var(--ts-green);border-radius:var(--ts-r-pill);padding:9px 20px}
.ts-btn--pill:hover{background:var(--ts-green-hover)}
.ts-btn--ghost{background:transparent;color:var(--ts-ink);border-color:var(--ts-line)}
.ts-btn--ghost:hover{background:var(--ts-surface);color:var(--ts-ink);border-color:#3A3A3D}
.ts-btn--lg{padding:14px 28px;font-size:16px}
.ts-btn--block{width:100%}
.ts-header-cta .ts-btn--ghost{border-radius:var(--ts-r-pill)}
.ts-header-cta .ts-btn--cta{border-radius:var(--ts-r-pill)}

/* ---------- hero ---------- */
.ts-hero{background:var(--ts-bg);padding:var(--ts-16) 0 var(--ts-10);border-bottom:1px solid var(--ts-line)}
.ts-hero h1{font-size:var(--ts-fs-hero);font-weight:800;letter-spacing:-.035em;
  line-height:1.03;margin-bottom:var(--ts-4);max-width:19ch}
.ts-hero .ts-lede{font-size:var(--ts-fs-lg);color:var(--ts-ink-3);margin-bottom:var(--ts-6);max-width:62ch}
@media(max-width:900px){.ts-hero h1{font-size:44px}}
@media(max-width:640px){.ts-hero h1{font-size:34px}.ts-hero{padding:var(--ts-10) 0 var(--ts-8)}}

/* sökfält */
.ts-search{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);
  padding:6px;display:flex;gap:4px;flex-wrap:wrap;max-width:900px}
.ts-search .f{flex:1;min-width:132px;padding:10px 14px;border-radius:var(--ts-r-sm)}
.ts-search .f+.f{border-left:1px solid var(--ts-line)}
.ts-search .f .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ts-ink-4);font-weight:700}
.ts-search .f .v{font-size:var(--ts-fs-base);font-weight:600;color:var(--ts-ink);margin-top:2px}
.ts-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--ts-4)}
.ts-quick a{background:var(--ts-surface);border:1px solid var(--ts-line);color:var(--ts-ink-2);
  font-size:var(--ts-fs-sm);border-radius:var(--ts-r-pill);padding:5px 14px}
.ts-quick a:hover{border-color:var(--ts-accent);color:var(--ts-accent);background:var(--ts-accent-soft)}

/* ---------- layout ---------- */
.ts-main{padding:var(--ts-8) 0 var(--ts-16)}
.ts-section{margin-bottom:var(--ts-10)}
.ts-section > h2{margin-bottom:var(--ts-5)}

/* ---------- kort & paneler ---------- */
.ts-panel{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);padding:var(--ts-5)}
.ts-listing{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);
  padding:var(--ts-4);display:grid;grid-template-columns:124px 1fr auto;gap:var(--ts-5);
  align-items:center;margin-bottom:var(--ts-3);transition:border-color .13s}
.ts-listing:hover{border-color:#3A3A3D}
.ts-listing--sponsored{border-color:var(--ts-accent);background:linear-gradient(90deg,var(--ts-accent-tint),var(--ts-surface) 55%)}
@media(max-width:760px){.ts-listing{grid-template-columns:1fr}}
.ts-thumb{height:88px;border-radius:var(--ts-r);background:linear-gradient(140deg,#2a2a2d,#181818)}
.ts-listing h3{font-size:17px;margin-bottom:3px;letter-spacing:-.01em}
.ts-listing h3 a{color:var(--ts-ink)}
.ts-listing h3 a:hover{color:var(--ts-accent)}
.ts-listing .ts-tagline{font-size:var(--ts-fs-sm);color:var(--ts-ink-3);margin:0 0 var(--ts-2)}
.ts-price{text-align:right}
.ts-price b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ts-ink)}
.ts-price span{font-size:var(--ts-fs-xs);color:var(--ts-ink-4)}

/* ---------- pills ---------- */
.ts-pills{display:flex;gap:6px;flex-wrap:wrap}
.ts-pill{font-size:11.5px;background:var(--ts-input);border-radius:var(--ts-r-pill);
  padding:3px 11px;color:var(--ts-ink-3);white-space:nowrap;font-weight:500}
.ts-pill--ok{background:var(--ts-green-tint);color:#4ec27f;font-weight:700}
.ts-pill--promo{background:var(--ts-accent-tint);color:var(--ts-accent);font-weight:700}
.ts-pill--new{background:var(--ts-accent-soft);color:var(--ts-accent);font-weight:700}

/* ---------- statsremsa — appens orange strip ---------- */
.ts-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ts-accent);
  border-radius:var(--ts-r-lg);overflow:hidden}
@media(max-width:760px){.ts-stats{grid-template-columns:1fr 1fr}}
.ts-stat{background:var(--ts-accent);padding:var(--ts-5) var(--ts-5)}
.ts-stat b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.1}
.ts-stat span{font-size:11.5px;color:rgba(255,255,255,.86);text-transform:uppercase;
  letter-spacing:.09em;font-weight:600;display:block;margin-top:var(--ts-1)}
@media(max-width:640px){.ts-stat b{font-size:26px}}

/* ---------- steg ---------- */
.ts-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ts-4)}
@media(max-width:900px){.ts-steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ts-steps{grid-template-columns:1fr}}
.ts-step{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);
  padding:var(--ts-5)}
.ts-step b{display:block;margin-bottom:var(--ts-2);color:var(--ts-accent);font-size:var(--ts-fs-base);font-weight:700}
.ts-step p{font-size:var(--ts-fs-sm);color:var(--ts-ink-3);margin:0;line-height:1.6}

/* ---------- tabell ---------- */
.ts-table{width:100%;border-collapse:collapse;font-size:var(--ts-fs-base);
  background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);
  overflow:hidden;margin-bottom:var(--ts-4)}
.ts-table th,.ts-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--ts-line-soft)}
.ts-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ts-ink-4);background:var(--ts-surface-2);font-weight:700}
.ts-table td{color:var(--ts-ink-2)}
.ts-table td strong{color:var(--ts-ink)}
.ts-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
  white-space:nowrap;color:var(--ts-ink)}
.ts-table tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.ts-faq details{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);
  padding:var(--ts-4) var(--ts-5);margin-bottom:var(--ts-2)}
.ts-faq summary{font-weight:600;cursor:pointer;font-size:var(--ts-fs-lg);list-style:none;color:var(--ts-ink)}
.ts-faq summary::-webkit-details-marker{display:none}
.ts-faq summary::after{content:"+";float:right;color:var(--ts-accent);font-weight:800;margin-left:var(--ts-4)}
.ts-faq details[open] summary::after{content:"−"}
.ts-faq details p{margin:var(--ts-3) 0 0;color:var(--ts-ink-3);font-size:var(--ts-fs-base)}

/* ---------- brödtext ---------- */
.ts-prose{max-width:74ch}
.ts-prose h2{font-size:var(--ts-fs-h3);margin-top:var(--ts-10)}
.ts-prose h3{font-size:var(--ts-fs-h4);margin-top:var(--ts-8)}
.ts-prose p,.ts-prose li{color:var(--ts-ink-3)}
.ts-prose li{margin-bottom:var(--ts-2)}
.ts-prose strong{color:var(--ts-ink);font-weight:600}
.ts-prose .ts-lede{font-size:var(--ts-fs-lg);color:var(--ts-ink-2)}
.ts-prose blockquote{border-left:3px solid var(--ts-accent);margin:var(--ts-6) 0;
  padding:var(--ts-1) var(--ts-5);color:var(--ts-ink-2);font-size:var(--ts-fs-lg);
  background:var(--ts-accent-tint);border-radius:0 var(--ts-r) var(--ts-r) 0}
.ts-prose hr{border:0;border-top:1px solid var(--ts-line);margin:var(--ts-8) 0}

/* ---------- länkrutnät ---------- */
.ts-linkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ts-2) var(--ts-5);
  font-size:var(--ts-fs-base);margin-bottom:var(--ts-5)}
@media(max-width:820px){.ts-linkgrid{grid-template-columns:1fr 1fr}}
.ts-linkgrid a{color:var(--ts-ink-2)}
.ts-linkgrid a:hover{color:var(--ts-accent)}
.ts-section h3.ts-small{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ts-ink-4);font-weight:700;margin:var(--ts-6) 0 var(--ts-3)}

/* ---------- brödsmulor ---------- */
.ts-crumbs{font-size:var(--ts-fs-sm);color:var(--ts-ink-5);padding:var(--ts-4) 0;
  border-bottom:1px solid var(--ts-line)}
.ts-crumbs a{color:var(--ts-ink-4)}
.ts-crumbs a:hover{color:var(--ts-accent)}
.ts-crumbs .sep{margin:0 8px;opacity:.5}
.ts-crumbs [aria-current]{color:var(--ts-ink-3)}

/* ---------- sponsorplats (lager 4) ---------- */
.ts-sponsor{border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);padding:var(--ts-5);
  background:var(--ts-surface);display:flex;gap:var(--ts-4);align-items:center;color:var(--ts-ink-3)}
.ts-sponsor .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ts-ink-4);font-weight:700;margin-bottom:2px}
.ts-sponsor strong{color:var(--ts-ink)}

/* ---------- sidfot ---------- */
.ts-footer{background:var(--ts-bg);border-top:1px solid var(--ts-line);
  color:var(--ts-ink-3);padding:var(--ts-12) 0 var(--ts-6);font-size:var(--ts-fs-base)}
.ts-footer a{color:#D4D4D4}
.ts-footer a:hover{color:var(--ts-ink)}
.ts-footer h4{color:var(--ts-ink-4);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:var(--ts-4);font-weight:700}
.ts-footcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--ts-8)}
@media(max-width:900px){.ts-footcols{grid-template-columns:1fr 1fr}}
.ts-footer ul{list-style:none;padding:0;margin:0}
.ts-footer li{margin-bottom:var(--ts-2)}
.ts-legal{border-top:1px solid var(--ts-line);margin-top:var(--ts-8);padding-top:var(--ts-5);
  color:var(--ts-ink-5);font-size:var(--ts-fs-sm)}

/* ---------- hjälpklasser ---------- */
.ts-muted{color:var(--ts-ink-3)}
.ts-small{font-size:var(--ts-fs-sm)}
.ts-center{text-align:center}
.ts-flex{display:flex;gap:var(--ts-3);align-items:center;flex-wrap:wrap}