/* Nexar: mörk stil för de statiska undersidorna, så att de följer startsidan.
   Länkas in efter sidans egen <style>, så samma specificitet vinner på
   källordning. Filen rör bara utseende. Rubriknivåer, innehåll, metadata,
   canonical och strukturerad data lämnas orörda. */

:root {
  --bg: #000000;
  --bg2: #000000;
  --ink: #F5F5F5;
  --dim: rgba(245, 245, 245, 0.55);
  --dim2: rgba(245, 245, 245, 0.72);
  --border: rgba(245, 245, 245, 0.1);
  /* Ljusa ytor (CTA-bandet) behåller riktigt papper och bläck. */
  --nx-paper: #ffffff;
  --nx-ink: #000000;
}

html {
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
}

::selection {
  background: rgba(245, 245, 245, 0.18);
}

/* ── Header, som den fasta headern på startsidan ───────────────── */

nav,
nav.nav {
  /* Helt täckande: halvgenomskinligt blev grått över de vita banden. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav-logo img,
.bar-logo img,
.foot-logo img {
  filter: invert(1);
}

.nav-back {
  color: var(--dim);
}

.nav-back:hover {
  color: var(--ink);
}

/* Bokningsknappen i headern, samma form som på startsidan. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-book {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.nav-book:hover {
  background: rgba(245, 245, 245, 0.9);
}

.nav-book:focus-visible,
.nav-back:focus-visible,
.nav-logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(245, 245, 245, 0.5);
  border-radius: 4px;
}

/* ── Inget mono: samma typsnitt som resten av sajten ───────────── */

.assure,
.bar-tag,
.bar-trust,
.btn-secondary,
.byline,
.comp-badge,
.comp-h,
.counts .cl,
.cover-art .c-label,
.cover-img span,
.cta-note,
.d-num,
.eyebrow,
.faq-item summary::after,
.field label,
.foot-back,
.foot-company,
.log,
.nav-back,
.post-meta,
.post-more,
.post-thumb span,
.related a span,
.res-eyebrow,
.scan-side .st-eyebrow,
.sec-label,
.stat .cl,
.takeaway .k,
.verdict {
  font-family: "DM Sans", sans-serif;
}

/* ── Ytor och bilder ───────────────────────────────────────────── */

.cover-img {
  background: var(--bg2);
  border: 1px solid var(--border);
}

.cover-img img {
  filter: none;
}

.flex-note {
  background: var(--bg2);
  border-left-color: var(--ink);
}

.deliverable:hover {
  background: var(--bg2);
}

/* ── Knappar på mörk yta: vit knapp, mörk text ─────────────────── */

.btn-primary,
.submit {
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
}

.btn-primary:hover,
.submit:hover {
  background: rgba(245, 245, 245, 0.9);
}

.btn-primary svg,
.submit .ico {
  background: var(--bg);
  color: var(--ink);
}

/* ── CTA-bandet: vitt band med svart text, som på startsidan ───── */

.cta-band {
  background: var(--nx-paper);
  color: var(--nx-ink);
  border-radius: 20px;
}

.cta-band h2 {
  color: var(--nx-ink);
}

.cta-band p {
  color: rgba(26, 26, 26, 0.6);
}

.cta-btn {
  background: var(--nx-ink);
  color: var(--nx-paper);
  border-radius: 8px;
}

.cta-btn:hover {
  background: #000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.cta-btn svg,
.cta-btn .ico {
  background: var(--nx-paper);
  color: var(--nx-ink);
}

.cta-note {
  color: rgba(26, 26, 26, 0.5);
}

/* Casesidans vita avslutning: knappen i samma svart som sidan, inte mörkgrå,
   och pilrutan som på startsidan (svart med tunn ljus kant). */
.cta-home-btn {
  background: var(--nx-ink);
}

.cta-home-btn .ico {
  background: var(--nx-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ── Sidfot ────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--border);
}

.foot-company {
  color: var(--dim);
}

.foot-back {
  color: var(--dim);
}

.foot-back:hover {
  color: var(--ink);
}

/* ── Sidmarginal på hero ───────────────────────────────────────
   .hero anger padding med kortform efter .wrap, vilket nollställer
   sidmarginalen. Rubrikerna låg därför dikt mot skärmkanten på mobil.
   Longhand här återställer den utan att röra det vertikala. */

.hero {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 700px) {
  .hero {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── Smal skärm ────────────────────────────────────────────────── */

@media (max-width: 640px) {
  nav,
  nav.nav {
    padding: 0 24px;
    height: 72px;
  }

  /* Samma header som startsidan: logga och bokningsknapp. Tillbakalänken
     är överflödig när loggan redan går till startsidan, och tillsammans
     med knappen blev raden bredare än skärmen. */
  .nav-back {
    display: none;
  }

  .nav-logo img {
    height: 26px;
  }
}

/* ── Integritetspolicyn ────────────────────────────────────────
   Den sidan har egna hårdkodade färger i stället för variabler,
   så den behöver uttryckliga regler. */

.page-doc .nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.page-doc .nav-back {
  color: var(--dim);
}

.page-doc .nav-back:hover {
  color: var(--ink);
}

.page-doc h1,
.page-doc h2,
.page-doc h3 {
  color: var(--ink);
}

.page-doc p,
.page-doc ul li {
  color: var(--dim2);
}

.page-doc .meta {
  color: var(--dim);
  border-bottom: 1px solid var(--border);
}

.page-doc a {
  color: var(--ink);
}

/* Knappen är mörk text på ljus platta, inte en vanlig länk. */
.page-doc a.nav-book {
  color: var(--bg);
}

.page-doc .foot {
  border-top: 1px solid var(--border);
}

.page-doc .foot p {
  color: var(--dim);
}

/* ── Analyssidan ───────────────────────────────────────────────
   Den har en egen topprad och ytterligare variabler. */

:root {
  --hair: rgba(245, 245, 245, 0.08);
}

.field input,
.field select,
.field textarea {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--ink);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(245, 245, 245, 0.38);
}

.card {
  background: var(--bg2);
  border-color: var(--border);
}

@media (max-width: 640px) {
  .bar {
    padding: 0 24px;
    gap: 12px;
  }

  /* Tre element på 390 px blev överlappande. Loggan och märket räcker. */
  .bar-trust {
    display: none;
  }

  .bar-logo img {
    height: 24px;
  }
}