html[data-theme='original'] {
  color-scheme: light;
}

html[data-theme='nordlys'] {
  color-scheme: dark;
}

html[data-theme='retro'] {
  color-scheme: light;
}

html[data-theme='original'],
html[data-theme='original'] body.vokser-marketing {
  --blue: #3d00ff;
  --dark-blue: #060080;
  --black: #000000;
  --dark-gray: #20221d;
  --gray: #b3b0aa;
  --white: #ffffff;
  --greige: #c2c2ac;
  --greige-2: #e7e7de;
  --greige-3: #f3f3ee;
  --sand: #eeeae3;
  --sand-2: #f4f2ee;
  --sand-3: #f8f7f4;
  --ink-2: #4c4e47;
  --theme-footer-bg: #20221d;
  --theme-footer-text: #f8f7f4;
  --theme-footer-muted: rgba(248, 247, 244, 0.72);
  --theme-footer-label: rgba(248, 247, 244, 0.72);
  --theme-btn-fill: #3d00ff;
  --theme-btn-hover-fill: #20221d;
  --theme-btn-text: #ffffff;
  --theme-logo-filter: none;
  --font-display: var(--font-schibsted), 'Schibsted Grotesk', Arial, sans-serif;
  --font-body: var(--font-schibsted), 'Schibsted Grotesk', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --r-lg: 8px;
  --r-md: 4px;
  --gap-bento: 24px;
  --theme-heading-weight: 500;
  --theme-heading-track: -0.018em;
  --theme-body-track: 0;
  --theme-tile-shadow: none;
  --theme-tile-hover-shadow: none;
}

html[data-theme='nordlys'],
html[data-theme='nordlys'] body.vokser-marketing {
  --blue: #5eecc4;
  --dark-blue: #0e7490;
  --black: #ecfdf5;
  --dark-gray: #d1fae5;
  --gray: #86b8a5;
  --white: #0c1929;
  --greige: #1a3a4a;
  --greige-2: #142a38;
  --greige-3: #0f2233;
  --sand: #0a1628;
  --sand-2: #061018;
  --sand-3: #0e1e30;
  --ink-2: #b8e6d0;
  --theme-footer-bg: #040c14;
  --theme-footer-text: #d1fae5;
  --theme-footer-muted: rgba(209, 250, 229, 0.72);
  --theme-footer-label: rgba(209, 250, 229, 0.78);
  --theme-btn-fill: #0f766e;
  --theme-btn-hover-fill: #065f46;
  --theme-btn-text: #ecfdf5;
  --theme-logo-filter: brightness(0) invert(1);
  --font-display: 'Outfit', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r-lg: 18px;
  --r-md: 12px;
  --gap-bento: 12px;
  --theme-heading-weight: 600;
  --theme-heading-track: -0.025em;
  --theme-body-track: 0.01em;
  --theme-tile-shadow: 0 0 0 1px rgba(62, 232, 165, 0.14), 0 12px 32px -18px rgba(0, 0, 0, 0.78);
  --theme-tile-hover-shadow:
    0 0 0 1px rgba(62, 232, 165, 0.38),
    0 0 28px -6px rgba(45, 212, 191, 0.22),
    0 20px 44px -16px rgba(0, 0, 0, 0.62);
}

html[data-theme='retro'],
html[data-theme='retro'] body.vokser-marketing {
  --blue: #060080;
  --dark-blue: #060080;
  --black: #000000;
  --dark-gray: #20221d;
  --gray: #b3b0aa;
  --white: #ffffff;
  --greige: #c2c2ac;
  --greige-2: #e7e7de;
  --greige-3: #f3f3ee;
  --sand: #deded6;
  --sand-2: #e0ddd4;
  --sand-3: #f3f3ee;
  --ink-2: #4c4e47;
  --theme-tab: #b3b0aa;
  --theme-footer-bg: #20221d;
  --theme-footer-text: #f8f7f4;
  --theme-footer-muted: rgba(248, 247, 244, 0.72);
  --theme-footer-label: rgba(248, 247, 244, 0.72);
  --theme-btn-fill: #060080;
  --theme-btn-hover-fill: #20221d;
  --theme-btn-text: #ffffff;
  --theme-logo-filter: none;
  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-body: 'Libre Franklin', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r-lg: 4px;
  --r-md: 2px;
  --gap-bento: 12px;
  --theme-heading-weight: 700;
  --theme-heading-track: 0;
  --theme-body-track: 0;
  --theme-tile-shadow: 0 1px 2px rgba(32, 34, 29, 0.07);
  --theme-tile-hover-shadow: 0 4px 12px -4px rgba(32, 34, 29, 0.14);
}

html[data-theme='original'] body.vokser-marketing {
  font-family: var(--font-body);
  color: var(--dark-gray);
  background: var(--sand-2);
  letter-spacing: var(--theme-body-track);
}

html[data-theme='nordlys'] body.vokser-marketing {
  font-family: var(--font-body);
  color: var(--dark-gray);
  background:
    radial-gradient(ellipse 120% 80% at 18% -8%, rgba(62, 232, 165, 0.24) 0%, transparent 52%),
    radial-gradient(ellipse 90% 65% at 78% 12%, rgba(45, 212, 191, 0.18) 0%, transparent 48%),
    radial-gradient(ellipse 70% 55% at 52% 88%, rgba(16, 185, 129, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 45% 35% at 62% 42%, rgba(167, 243, 208, 0.07) 0%, transparent 58%),
    linear-gradient(180deg, #061018 0%, #0a1628 42%, #0c1a2e 100%);
  background-attachment: fixed;
  letter-spacing: var(--theme-body-track);
}

@media (max-width: 940px) {
  html[data-theme='nordlys'] body.vokser-marketing {
    background-attachment: scroll;
  }
}

html[data-theme='retro'] body.vokser-marketing {
  font-family: var(--font-body);
  color: var(--dark-gray);
  background:
    linear-gradient(180deg, rgba(194, 194, 172, 0.14) 0%, transparent 28%),
    var(--greige-2);
  letter-spacing: var(--theme-body-track);
}

.vokser-marketing h1,
.vokser-marketing h2,
.vokser-marketing h3,
.vokser-marketing h4,
.vokser-marketing .hero-module h1,
.vokser-marketing .stat .num,
.vokser-marketing .case-foot .metric,
.vokser-marketing .step h4,
.vokser-marketing .tile h3,
.vokser-marketing .tile .flip-card-title {
  font-family: var(--font-display);
  font-weight: var(--theme-heading-weight);
  letter-spacing: var(--theme-heading-track);
}

.vokser-marketing .eyebrow,
.vokser-marketing .tag,
.vokser-marketing .step .idx,
.vokser-marketing .footer-col h4,
.vokser-marketing .ai-badge {
  font-family: var(--font-mono);
}

.vokser-marketing .brand-symbol,
.vokser-marketing .brand-logotype,
.vokser-marketing .mark {
  filter: var(--theme-logo-filter, none);
}

.vokser-marketing .footer-brand {
  color: #fff;
}

.vokser-marketing .footer-brand__symbol,
.vokser-marketing .footer-brand__logotype {
  filter: brightness(0) invert(1);
}

.vokser-marketing .tile > .skin {
  box-shadow: var(--theme-tile-shadow);
}

.vokser-marketing .tile:hover > .skin,
.vokser-marketing .tile:focus-within > .skin {
  box-shadow: var(--theme-tile-hover-shadow);
}

/* backdrop-filter lives on ::before rather than .topbar itself — applying it
   directly to .topbar would make it a containing block for its fixed-position
   descendant (.nav-mobile, the full-screen mobile menu drawer), collapsing
   that drawer down to the topbar's own ~77px height instead of the viewport.
   A pseudo-element gets the same visual blur without that side effect. */
html[data-theme='nordlys'] .vokser-marketing .topbar {
  background: transparent;
  border-bottom-color: rgba(62, 232, 165, 0.2);
}

html[data-theme='nordlys'] .vokser-marketing .topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 22, 40, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme='retro'] .vokser-marketing .topbar {
  background: var(--greige-3);
  border-bottom: 2px solid var(--greige);
}

html[data-theme='retro'] .vokser-marketing .tile > .skin {
  background: var(--greige-3);
  border: 1px solid var(--greige);
  border-top: 5px solid var(--theme-tab);
  border-radius: 2px 2px var(--r-lg) var(--r-lg);
}

html[data-theme='retro'] .vokser-marketing .tile > .peek {
  background: var(--greige-2);
  border-color: var(--greige);
  border-radius: 2px;
}

html[data-theme='retro'] .vokser-marketing .t-sand > .skin {
  background: var(--sand);
  border-color: var(--greige);
  border-top-color: var(--theme-tab);
}

html[data-theme='retro'] .vokser-marketing .t-greige > .skin {
  background: var(--greige-2);
  border-color: var(--greige);
  border-top-color: var(--theme-tab);
}

html[data-theme='retro'] .vokser-marketing .t-white > .skin {
  background: var(--greige-3);
  border-color: var(--greige);
  border-top-color: var(--theme-tab);
}

html[data-theme='retro'] .vokser-marketing .t-ink > .skin {
  background: var(--surface-inverse, var(--dark-gray));
  border-color: var(--dark-gray);
  border-top: 4px solid var(--greige);
  border-radius: 2px 2px var(--r-lg) var(--r-lg);
  color: rgba(248, 247, 244, 0.82);
}

html[data-theme='retro'] .vokser-marketing .t-ink .mark {
  filter: brightness(0) invert(1);
}

html[data-theme='retro'] .vokser-marketing .t-blue > .skin {
  background: var(--blue);
  border-color: var(--blue);
  border-top: 4px solid var(--blue);
  border-radius: 2px 2px var(--r-lg) var(--r-lg);
  color: #fff;
}

html[data-theme='retro'] .vokser-marketing .t-blue h3,
html[data-theme='retro'] .vokser-marketing .t-blue p,
html[data-theme='retro'] .vokser-marketing .t-blue .tag,
html[data-theme='retro'] .vokser-marketing .t-blue .stat .num {
  color: #fff;
}

html[data-theme='retro'] .vokser-marketing .t-blue .btn-bento.pale {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.78);
}

html[data-theme='retro'] .vokser-marketing .t-blue .btn-bento.pale::before {
  display: none;
}

html[data-theme='retro'] .vokser-marketing .t-blue .btn-bento.pale:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: #fff;
}

html[data-theme='retro'] .vokser-marketing .eyebrow,
html[data-theme='retro'] .vokser-marketing .tag {
  color: var(--blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
}

html[data-theme='retro'] .vokser-marketing .step {
  background: var(--greige-3);
  border: 1px solid var(--greige);
  border-left: 5px solid var(--theme-tab);
  border-radius: 2px;
}

html[data-theme='retro'] .vokser-marketing .step .bar i {
  background: var(--blue);
}

html[data-theme='retro'] .vokser-marketing .step .idx {
  color: var(--blue);
}

html[data-theme='retro'] .vokser-marketing .btn-bento,
html[data-theme='retro'] .vokser-marketing .ai-toolbar-btn,
html[data-theme='retro'] .vokser-marketing .ai-theme-dropdown__trigger {
  border-radius: 2px;
}

html[data-theme='retro'] .vokser-marketing .btn-bento:not(.outline):not(.pale),
html[data-theme='retro'] .vokser-marketing .ai-btn--primary,
html[data-theme='retro'] .vokser-marketing .ai-toolbar-btn--accent {
  background: var(--theme-btn-fill);
  border-color: var(--theme-btn-fill);
  color: var(--theme-btn-text);
}

html[data-theme='retro'] .vokser-marketing .btn-bento:not(.outline):not(.pale)::before {
  background: var(--theme-btn-hover-fill);
}

html[data-theme='retro'] .vokser-marketing .btn-bento:not(.outline):not(.pale):hover,
html[data-theme='retro'] .vokser-marketing .ai-btn--primary:hover,
html[data-theme='retro'] .vokser-marketing .ai-toolbar-btn--accent:hover {
  border-color: var(--theme-btn-hover-fill);
  color: var(--theme-btn-text);
}

html[data-theme='retro'] .vokser-marketing .face.back {
  background: var(--blue);
  color: #fff;
}

html[data-theme='retro'] .vokser-marketing .face.back h3,
html[data-theme='retro'] .vokser-marketing .face.back p {
  color: #fff;
}

html[data-theme='retro'] .vokser-marketing footer.vokser-footer {
  background: var(--theme-footer-bg);
  color: var(--theme-footer-text);
}

html[data-theme='retro'] .vokser-marketing .footer-mark p,
html[data-theme='retro'] .vokser-marketing .footer-col a,
html[data-theme='retro'] .vokser-marketing .footer-col li,
html[data-theme='retro'] .vokser-marketing .footer-bottom a,
html[data-theme='retro'] .vokser-marketing .footer-bottom .fmeta {
  color: var(--theme-footer-muted);
}

html[data-theme='retro'] .vokser-marketing .footer-col h4,
html[data-theme='retro'] .vokser-marketing .footer-col__heading {
  color: var(--theme-footer-label);
}

html[data-theme='retro'] .vokser-marketing .footer-col .muted {
  color: rgba(248, 247, 244, 0.58);
}

html[data-theme='retro'] .vokser-marketing .footer-brand__symbol,
html[data-theme='retro'] .vokser-marketing .footer-brand__logotype {
  filter: brightness(0) invert(1);
}

html[data-theme='retro'] .vokser-marketing .footer-col a:hover,
html[data-theme='retro'] .vokser-marketing .footer-bottom a:hover {
  color: var(--theme-footer-text);
}

html[data-theme='retro'] .vokser-marketing .stat .num {
  color: var(--blue);
}

html[data-theme='retro'] .vokser-marketing .t-ink .stat .num {
  color: #fff;
}

html[data-theme='retro'] .vokser-marketing .plate {
  background: var(--greige-3);
  border: 1px solid var(--greige);
  border-radius: 2px;
}

html[data-theme='retro'] .vokser-marketing h2,
html[data-theme='retro'] .vokser-marketing .hero-module h1 {
  font-style: normal;
  text-transform: none;
}

html[data-theme='retro'] .vokser-marketing .person > .skin {
  background: var(--greige-3);
  border: 1px solid var(--greige);
  border-top: 5px solid var(--theme-tab);
}

html[data-theme='retro'] .vokser-marketing .person .pb {
  background: var(--greige-3);
  border-top: 1px solid var(--greige-2);
}

html[data-theme='nordlys'] .vokser-marketing .eyebrow,
html[data-theme='nordlys'] .vokser-marketing .tag {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

html[data-theme='nordlys'] .vokser-marketing .t-blue > .skin {
  background: linear-gradient(155deg, #065f46 0%, #0e7490 48%, #134e4a 100%);
  border-color: rgba(62, 232, 165, 0.42);
  box-shadow: inset 0 1px 0 rgba(167, 243, 208, 0.12), 0 0 22px -8px rgba(45, 212, 191, 0.24);
}

html[data-theme='nordlys'] .vokser-marketing .key-point-card--blue {
  background: linear-gradient(155deg, #065f46 0%, #0e7490 48%, #134e4a 100%);
  border-color: rgba(62, 232, 165, 0.42);
}

html[data-theme='nordlys'] .vokser-marketing .t-ink > .skin {
  background: rgba(6, 16, 24, 0.9);
  border-color: rgba(45, 212, 191, 0.28);
}

html[data-theme='nordlys'] .vokser-marketing .t-sand > .skin,
html[data-theme='nordlys'] .vokser-marketing .t-greige > .skin,
html[data-theme='nordlys'] .vokser-marketing .t-white > .skin {
  background: rgba(12, 25, 41, 0.76);
  border-color: rgba(62, 232, 165, 0.18);
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento,
html[data-theme='nordlys'] .vokser-marketing .ai-toolbar-btn,
html[data-theme='nordlys'] .vokser-marketing .ai-theme-dropdown__trigger {
  border-radius: 10px;
}

html[data-theme='nordlys'] .vokser-marketing .step {
  background: rgba(12, 25, 41, 0.76);
  border-color: rgba(62, 232, 165, 0.18);
}

html[data-theme='nordlys'] .vokser-marketing .process-steps__number {
  background: rgba(12, 25, 41, 0.76);
  border-color: rgba(62, 232, 165, 0.42);
}

html[data-theme='nordlys'] .vokser-marketing .step .bar i {
  background: linear-gradient(90deg, #10b981, #2dd4bf, #3ee8a5);
}

html[data-theme='nordlys'] .vokser-marketing .stat .num {
  color: var(--black);
}

html[data-theme='nordlys'] .vokser-marketing .case-veil {
  background: linear-gradient(
    175deg,
    rgba(10, 22, 40, 0.32) 0%,
    rgba(6, 16, 24, 0.48) 40%,
    rgba(4, 12, 20, 0.84) 72%,
    rgba(2, 8, 14, 0.94) 100%
  );
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento:not(.outline):not(.pale) {
  background: var(--theme-btn-fill);
  border-color: var(--theme-btn-fill);
  color: var(--theme-btn-text);
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento:not(.outline):not(.pale)::before {
  background: var(--theme-btn-hover-fill);
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento:not(.outline):not(.pale):hover {
  border-color: var(--theme-btn-hover-fill);
  color: var(--theme-btn-text);
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento.outline {
  background: transparent;
  color: #ecfdf5;
  border-color: rgba(236, 253, 245, 0.78);
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento.outline:hover {
  background: rgba(236, 253, 245, 0.06);
  color: #ecfdf5;
  border-color: #ecfdf5;
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento.pale,
html[data-theme='nordlys'] .vokser-marketing .t-blue .btn-bento.pale {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.78);
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento.pale::before {
  display: none;
}

html[data-theme='nordlys'] .vokser-marketing .btn-bento.pale:hover,
html[data-theme='nordlys'] .vokser-marketing .t-blue .btn-bento.pale:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: #fff;
}

html[data-theme='nordlys'] .vokser-marketing .ai-toolbar-btn--accent {
  background: var(--theme-btn-fill);
  border-color: var(--theme-btn-fill);
  color: var(--theme-btn-text);
}

html[data-theme='nordlys'] .vokser-marketing .ai-toolbar-btn--accent:hover {
  background: var(--theme-btn-hover-fill);
  border-color: var(--theme-btn-hover-fill);
  color: var(--theme-btn-text);
}

html[data-theme='nordlys'] .vokser-marketing .ai-theme-dropdown__trigger:hover,
html[data-theme='nordlys'] .vokser-marketing .ai-theme-dropdown__option.is-active .ai-theme-dropdown__name {
  color: var(--blue);
}

html[data-theme='nordlys'] .vokser-marketing .navlinks {
  color: var(--ink-2);
}

html[data-theme='nordlys'] .vokser-marketing .lede,
html[data-theme='nordlys'] .vokser-marketing .tile p {
  color: var(--ink-2);
}

html[data-theme='nordlys'] .vokser-marketing .t-blue .tag,
html[data-theme='nordlys'] .vokser-marketing .t-blue .eyebrow {
  color: #ecfdf5;
}

html[data-theme='nordlys'] .vokser-marketing .face.back {
  background: var(--theme-btn-fill);
  color: var(--theme-btn-text);
}

html[data-theme='nordlys'] .vokser-marketing .face.back h3,
html[data-theme='nordlys'] .vokser-marketing .face.back p {
  color: var(--theme-btn-text);
}

html[data-theme='nordlys'] .vokser-marketing footer.vokser-footer {
  background: var(--theme-footer-bg);
  color: var(--theme-footer-text);
}

html[data-theme='nordlys'] .vokser-marketing .footer-mark p,
html[data-theme='nordlys'] .vokser-marketing .footer-col a,
html[data-theme='nordlys'] .vokser-marketing .footer-col li,
html[data-theme='nordlys'] .vokser-marketing .footer-bottom a,
html[data-theme='nordlys'] .vokser-marketing .footer-bottom .fmeta {
  color: var(--theme-footer-muted);
}

html[data-theme='nordlys'] .vokser-marketing .footer-col h4,
html[data-theme='nordlys'] .vokser-marketing .footer-col__heading {
  color: var(--theme-footer-label);
}

html[data-theme='nordlys'] .vokser-marketing .footer-col .muted {
  color: rgba(209, 250, 229, 0.58);
}

html[data-theme='nordlys'] .vokser-marketing .footer-brand__symbol,
html[data-theme='nordlys'] .vokser-marketing .footer-brand__logotype {
  filter: brightness(0) invert(1);
}

html[data-theme='nordlys'] .vokser-marketing .footer-col a:hover,
html[data-theme='nordlys'] .vokser-marketing .footer-bottom a:hover {
  color: var(--theme-footer-text);
}

html[data-theme='nordlys'] .vokser-marketing .ai-btn--primary {
  background: var(--theme-btn-fill);
  border-color: var(--theme-btn-fill);
  color: var(--theme-btn-text);
}

html[data-theme='nordlys'] .vokser-marketing .ai-btn--primary:hover {
  background: var(--theme-btn-hover-fill);
  border-color: var(--theme-btn-hover-fill);
  color: var(--theme-btn-text);
}

html[data-theme='nordlys'] .vokser-marketing .ai-btn--outline {
  background: transparent;
  color: #ecfdf5;
  border-color: rgba(236, 253, 245, 0.78);
}

html[data-theme='nordlys'] .vokser-marketing .ai-btn--outline:hover {
  background: rgba(236, 253, 245, 0.06);
  color: #ecfdf5;
  border-color: #ecfdf5;
}

html[data-theme='retro'] .vokser-marketing .case-veil {
  background: linear-gradient(
    175deg,
    rgba(248, 247, 244, 0.08) 0%,
    rgba(32, 34, 29, 0.28) 42%,
    rgba(32, 34, 29, 0.78) 70%,
    rgba(18, 20, 16, 0.92) 100%
  );
}

html[data-theme] .vokser-marketing a:focus-visible,
html[data-theme] .vokser-marketing button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}


/* ------------------------------------------------------------------
   Dark mode for the original theme (toggled by ModeToggle, stored in
   localStorage "vokser-mode", set as html[data-mode] before paint).
   Text tokens (--black, --dark-gray, --ink-2) turn light; surface tokens
   (--white, --sand*, --greige*) turn dark so no card stays white. Dark bands
   and cards use --surface-inverse, a step lighter than the page. One blue.
   ------------------------------------------------------------------ */
html[data-theme='original'][data-mode='dark'],
html[data-theme='original'][data-mode='dark'] body.vokser-marketing {
  color-scheme: dark;
  --black: #f1efe9;
  --dark-gray: #e6e4de;
  --ink-2: #a9a79f;
  --gray: #55574f;
  --white: #1d1f1a;
  --greige: #45473f;
  --greige-2: #2d2f29;
  --greige-3: #1f211c;
  --sand: #1f211c;
  --sand-2: #141512;
  --sand-3: #191a16;
  --surface-inverse: #262822;
  --on-inverse: #f4f2ee;
  --theme-footer-bg: #0e0f0c;
  --theme-btn-hover-fill: #262822;
  --theme-logo-filter: brightness(0) invert(1);
}

/* Cards inside a dark band keep light text in dark mode. */
html[data-mode='dark']
  .vokser-marketing
  .band-dark
  :is(.skin, .kontakt-person, .kontakt-form input, .kontakt-form textarea) {
  --black: #f1efe9;
  --dark-gray: #e6e4de;
  --ink-2: #a9a79f;
}

/* Literal light fills that would otherwise stay white. */
html[data-mode='dark'] .vokser-marketing :is(.plate, .band-dark-gray) {
  background: var(--surface-inverse);
}
html[data-mode='dark'] .vokser-marketing .plate {
  border-color: var(--greige-2);
}
html[data-mode='dark'] .vokser-marketing .band-blue .btn-bento:not(.pale):not(.outline) {
  background: var(--on-inverse);
  border-color: var(--on-inverse);
}

/* Carried over from the old automatic dark mode: parts built on literal or
   design-system colours that the token remap above does not reach. */
html[data-mode='dark'] .vokser-marketing footer.vokser-footer {
  background: var(--theme-footer-bg);
  color: var(--theme-footer-text);
}
html[data-mode='dark'] .vokser-marketing .btn-bento::before {
  background: var(--theme-btn-hover-fill);
}
html[data-mode='dark'] .vokser-marketing .btn-bento:hover {
  border-color: var(--theme-btn-hover-fill);
}
html[data-mode='dark'] .vokser-marketing .t-ink > .skin {
  background: var(--surface-inverse);
  border-color: var(--greige-2);
}
html[data-mode='dark'] .vokser-marketing .process-steps__number {
  background: transparent;
  border-color: rgb(255 255 255 / 35%);
}
html[data-mode='dark'] .vokser-marketing .process-steps__item::after {
  background: rgb(255 255 255 / 12%);
}
/* Brand blue is ~2:1 as text on the dark page, so inline text links use the
   light text colour (underlined) instead of a second, lighter blue. */
html[data-mode='dark'] .vokser-marketing :is(.tile p a, .kontakt-form-panel > p a, .kontakt-office a, .kontakt-person__contact a:hover, .person .ci a:hover, .kontakt-form .req, .aktuelt-article__back, .case-detail__back, .case-detail__overview-card h2, .summary-box__title, .summary-box__toggle, .content-end-meta__label, .ai-brief__block h2, .navlinks a:hover, .navlinks a[aria-current='page']) {
  color: var(--black);
}
html[data-mode='dark'] .vokser-marketing :is(a, button):focus-visible {
  outline-color: var(--on-inverse);
}
html[data-mode='dark'] .vokser-marketing .form-error {
  color: #ff6b52;
}