@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --color-sunTop: #FFCF6B;
  --color-sunBottom: #F0671F;
  --color-brand: #E2611C;
  --color-brandStrong: #C2470F;
  --color-brandDeep: #B8430E;
  --color-brandSoft: #FBE6D2;
  --color-onBrand: #FFFFFF;
  --color-navy: #1E2A55;
  --color-ink: #15203B;
  --color-inkMuted: #5A6178;
  --color-inkSoft: #7C8398;
  --color-onInk: #FFF7EC;
  --color-cream: #FFF7EC;
  --color-surface: #FFFFFF;
  --color-surfaceSubtle: #FBF5EA;
  --color-surfaceInk: #15203B;
  --color-line: #E6DDCC;
  --color-lineStrong: #D6CAB2;
  --color-screenBg: #F4F6FB;
  --color-nowBg: #FFF1E2;
  --color-nowInk: #9C4409;
  --color-nextBg: #EEF1F8;
  --color-nextInk: #33407A;
  --color-doneBg: #E7F3EB;
  --color-doneInk: #236B3C;
  --color-doneDeep: #15724F;
  --color-doneMid: #1A7F64;
  --color-toneBlue: #E4ECFB;
  --color-tonePeach: #FCEDE0;
  --color-focus: #0B5FD4;
  --color-focusRing: rgba(11,95,212,0.45);
  --color-ring: rgba(21,32,59,0.10);
  --color-overlay: rgba(21,32,59,0.55);
  --gradient-sun: linear-gradient(180deg, #FFCF6B 0%, #F0671F 100%);
  --gradient-sunRadial: radial-gradient(120% 120% at 50% 0%, #FFCF6B 0%, #F0671F 70%);
  --gradient-brand: linear-gradient(135deg, #E2611C 0%, #C2470F 100%);
  --gradient-warmField: linear-gradient(180deg, #FFF7EC 0%, #FBE9D4 100%);
  --gradient-inkField: linear-gradient(160deg, #1E2A55 0%, #15203B 100%);
  --gradient-doneField: linear-gradient(150deg, #15724F 0%, #1A7F64 100%);
  --gradient-creamFade: linear-gradient(180deg, #FFFFFF 0%, #FFF7EC 100%);
  --font-sans: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 0.79rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: 1.45rem;
  --font-size-h3: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
  --font-size-h2: clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem);
  --font-size-h1: clamp(2.25rem, 1.55rem + 3.1vw, 3.6rem);
  --font-size-display: clamp(2.6rem, 1.7rem + 4vw, 4.4rem);
  --font-leading-tight: 1.12;
  --font-leading-snug: 1.25;
  --font-leading-normal: 1.55;
  --font-leading-relaxed: 1.7;
  --font-tracking-tight: -0.02em;
  --font-tracking-normal: 0;
  --font-tracking-wide: 0.04em;
  --font-tracking-caps: 0.08em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --space-10: 120px;
  --space-px: 1px;
  --space-gutter: clamp(20px, 5vw, 56px);
  --space-section: clamp(56px, 8vw, 120px);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 40px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --radius-phone: 46px;
  --radius-tablet: 26px;
  --shadow-xs: 0 1px 2px rgba(21,32,59,0.05);
  --shadow-sm: 0 2px 6px rgba(21,32,59,0.07);
  --shadow-md: 0 10px 28px rgba(21,32,59,0.10);
  --shadow-lg: 0 26px 64px rgba(21,32,59,0.16);
  --shadow-xl: 0 40px 96px rgba(21,32,59,0.20);
  --shadow-device: 0 44px 100px rgba(21,32,59,0.32);
  --shadow-glow: 0 14px 40px rgba(240,103,31,0.35);
  --shadow-insetLine: inset 0 0 0 1px rgba(21,32,59,0.06);
  --motion-instant: 90ms;
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;
  --motion-slower: 640ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-easeOut: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easeInOut: cubic-bezier(0.45, 0, 0.2, 1);
  --motion-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --breakpoint-sm: 560px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}


:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 8px;
  transform: translateY(calc(-100% - 24px));
  z-index: 30;
  background: var(--color-navy);
  color: var(--color-onInk);
  padding: 12px 18px;
  border-radius: var(--radius-control);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Header control pair — nav · "Meny / Tilpass visning" trigger.
   Uses the unified .btn system; locked order via source order. */

.view-tuner svg {
  display: block;
  flex: none;
  max-width: 100%;
  max-height: 100%;
}

/* ── "Tilpass visning" drawer (role=dialog) ───────────────────────────────── */
.view-tuner[hidden] { display: none; }

.view-tuner {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
}

.view-tuner__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--motion-base, 220ms) var(--motion-ease, ease);
}

.view-tuner[data-open] .view-tuner__scrim { opacity: 1; }

.view-tuner__drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-left: 1px solid var(--color-lineStrong);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--motion-base, 220ms) var(--motion-easeOut, ease);
}

.view-tuner[data-open] .view-tuner__drawer { transform: translateX(0); }
@media (max-width: 640px) {
  .view-tuner__drawer { width: 100vw; border-left: none; }
}

.view-tuner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-line);
}

.view-tuner__title { margin: 0; font-size: 1.2rem; color: var(--color-navy); }

.view-tuner__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--color-lineStrong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-navy);
  cursor: pointer;
}

.view-tuner__close svg { width: 22px; height: 22px; }

.view-tuner__close:hover { border-color: var(--color-navy); }

.view-tuner__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 24px;
}

.view-tuner__label {
  margin: 18px 0 8px;
  font-size: var(--font-size-xs, 0.78rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-inkMuted);
}

.view-tuner__body > .view-tuner__label:first-child { margin-top: 0; }

.view-tuner__group { display: grid; gap: 8px; }

/* Drawer navigation — primary site menu folded in for small screens. Links,
   not toggles, so they get their own class (≥48px, mirrors the option rows). */

.view-tuner__navlink {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--color-lineStrong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: none;
}

.view-tuner__navlink:hover { border-color: var(--color-navy); }

.view-tuner__navlink[aria-current="page"] { border-color: var(--color-navy); background: var(--color-toneBlue); }

/* ONE consistent control style for every option (replaces the 9 mismatched
   pills): a full-width toggle row, ≥44px, selected by border + check, not
   colour alone. */
.view-tuner__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--color-lineStrong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-navy);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.view-tuner__option:hover { border-color: var(--color-navy); }

.view-tuner__option-check {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--color-lineStrong);
  border-radius: 7px;
  background: var(--color-surface);
  color: transparent;
}

.view-tuner__option-check svg { width: 18px; height: 18px; }

.view-tuner__option-label {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.view-tuner__option-desc {
  color: var(--color-inkMuted);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
}

.view-tuner__option[aria-pressed="true"] {
  border-color: var(--color-navy);
  background: var(--color-toneBlue);
}

.view-tuner__option[aria-pressed="true"] .view-tuner__option-check {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-onInk);
}

.view-tuner__status { margin: 14px 0 0; color: var(--color-inkMuted); font-size: 0.9rem; line-height: 1.4; }

.view-tuner__footer {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}

.view-tuner__footer .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .view-tuner__scrim, .view-tuner__drawer { transition: none; }
}

/* =========================================================================
   UNIFIED BUTTON SYSTEM — 3 variants x 3 sizes, ONE radius (--radius-control).
   Canonical names are .btn / .btn--primary|secondary|ghost / .btn--sm|md|lg.
   Pill radius is reserved for segmented controls + status chips, never for
   these buttons.
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* md is the default size: h48 / 0 18px / 16px. */
  min-height: 48px;
  border-radius: var(--radius-control);
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
/* Sizes ------------------------------------------------------------------- */
.btn--md { min-height: 48px; padding: 0 18px; font-size: 16px; }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
/* Variants ---------------------------------------------------------------- */
.btn--primary { color: var(--color-onBrand); background: var(--color-brandDeep); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-brandStrong); box-shadow: var(--shadow-sm); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-lineStrong); color: var(--color-navy); }
.btn--secondary:hover { box-shadow: var(--shadow-sm); border-color: var(--color-navy); }



/* ===== "Tilpass visning" drawer adaptation hooks ======================== */
/* The drawer's structural + control styles live in the base stylesheet
   (.view-tuner / .view-tuner__option / __footer). Here we keep only the
   axis-C adaptation overrides that enlarge / emphasise those controls. */
html[data-adapt-audio-first] .view-tuner__status,
html[data-adapt-all-visual] .view-tuner__status,
html[data-adapt-switch-scanning] .view-tuner__status {
  color: var(--color-navy); font-weight: 800;
}
html[data-adapt-switch-scanning] .view-tuner__option,
html[data-adapt-switch-scanning] .view-tuner__navlink,
html[data-adapt-switch-scanning] .view-tuner__close,
html[data-adapt-switch-scanning] .btn {
  min-height: 56px;
  min-width: 56px;
}
html[data-adapt-switch-scanning] :focus-visible {
  outline-width: 4px; outline-offset: 5px;
}

/* ===== ENKEL — simpler, larger, shorter ================================= */
html[data-view-enkel] [data-priority="detail"] { display: none !important; }

html[data-view-enkel] body { font-size: 1.16rem; line-height: 1.68; }
html[data-view-enkel] main { letter-spacing: 0.005em; }
html[data-view-enkel] .hero { grid-template-columns: 1fr; gap: 26px; padding-top: 26px; }
html[data-view-enkel] .hero-copy { max-width: none; }
html[data-view-enkel] .band-inner, html[data-view-enkel] .hero-inner { max-width: 760px; }
html[data-view-enkel] section { padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(28px, 5vw, 56px); }
html[data-view-enkel] h1 { font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.12; }
html[data-view-enkel] h2 { font-size: clamp(1.45rem, 5vw, 2.05rem); }
html[data-view-enkel] p.intro, html[data-view-enkel] .band-lead { font-size: 1.22rem; line-height: 1.6; }
html[data-view-enkel] .btn {
  min-height: 54px; padding: 14px 24px; font-size: 1.08rem;
}
/* A friendly Enkel intro line, symbol-led, only shown in Enkel. */
.enkel-banner {
  display: none;
  align-items: center; gap: 14px;
  margin: 0 auto clamp(20px, 4vw, 36px);
  max-width: 760px; padding: 16px 20px;
  background: var(--color-cream); border: 2px solid var(--color-lineStrong);
  border-radius: var(--radius-lg); font-size: 1.12rem; font-weight: 600;
}
html[data-view-enkel] .enkel-banner { display: flex; }
/* In the drawer it is a note under the switch, so it wraps to the panel width
   and sits tight against the control rather than spanning a page. */
.view-tuner__group .enkel-banner {
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.view-tuner__group .enkel-banner__symbol { flex: 0 0 auto; }
.view-tuner__group .enkel-banner__symbol img { width: 28px; height: 28px; }

/* Stor tekst and Rolig.
   These used to live in the section stylesheet, which the design-rendered
   landing page does not link — so "Stor tekst" was a control that did nothing
   on the page it mattered most on. They belong with the other view layers,
   which every page loads. */
html[data-a11y~="large"] body,
body[data-a11y~="large"] { font-size: 112.5%; }
html[data-a11y~="large"] body .intro,
html[data-a11y~="large"] body .band-lead,
body[data-a11y~="large"] .intro,
body[data-a11y~="large"] .band-lead { color: var(--color-navy); }
html[data-a11y~="calm"] body .proof-list,
body[data-a11y~="calm"] .proof-list { display: none; }
html[data-a11y~="calm"] body .band,
body[data-a11y~="calm"] .band { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(44px, 6vw, 76px); }

/* Enkel on the design-rendered landing page.
   The rules above target the retired hand-ported markup, so on the design page
   Enkel used to change almost nothing — the toggle was there and did not work.
   These act on what the design actually draws: the decorative layers go quiet,
   the multi-column bands become one column, and the reading measure narrows.
   !important throughout because the design sets these inline. */
html[data-view-enkel] [data-plx-fixed] { display: none !important; }
/* Enkel drops the decorative photography too — same reasoning as Rolig: it is
   scenery, and "enkel" means less to take in, not the same page in one column. */
html[data-view-enkel] img[src*="/assets/photo/"] { display: none !important; }
html[data-view-enkel] [style*="box-shadow"] { box-shadow: none !important; }
/* Enkel shows ONE level, not three stacked.
   Making the band single-column left all three phones on the page and grew it
   by 57% — a simplified view that is a longer scroll is the opposite of the
   point. Enkel keeps the Enkel phone; the caption still names it, and the hero
   switch above still offers all three to anyone who wants to compare. */
html[data-view-enkel] .dgl-grid3 { grid-template-columns: 1fr !important; max-width: 480px; margin-inline: auto; }
html[data-view-enkel] .dgl-grid3 > figure:not(:nth-of-type(2)) { display: none !important; }
html[data-view-enkel] [data-screen-label] > div { max-width: 760px !important; }
.enkel-banner__symbol {
  display: grid;
  justify-items: center;
  gap: 3px;
  flex: none;
  color: var(--color-navy);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}
.enkel-banner__symbol img {
  display: block;
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  flex: none;
}

/* ===== HØY KONTRAST — AAA palette across canonical token roles ========== */
html[data-view-contrast] {
  /* marketing tokens */
  --color-navy: #101320; --color-nextInk: #101320; --color-ink: #0a0c14; --color-inkMuted: #252a38;
  --color-line: #5a6072; --color-lineStrong: #2a2f3d; --color-cream: #ffffff; --color-surface: #ffffff;
  --color-toneBlue: #eef3ff; --color-tonePeach: #fdeede;
  --color-doneInk: #0c5a44; --color-brandDeep: #8a3208; --color-brandStrong: #5e2105; --color-focus: #0033cc;
  /* surface tokens */
  --color-ink: #0a0c14; --color-inkMuted: #252a38; --color-navy: #101320;
  --color-line: #5a6072; --color-lineStrong: #101320; --color-surface: #ffffff;
  --color-surfaceSubtle: #ffffff; --color-screenBg: #ffffff; --color-focus: #0033cc;
}
html[data-view-contrast] .content-card { border: 2px solid #101320; }
/* The "Nå"-highlighted mini row must keep its definition in high contrast. */
html[data-view-contrast] a { text-decoration: underline; text-underline-offset: 2px; }
html[data-view-contrast] .btn--primary { background: #101320; color: #fff; }

/* ===== The view layers on the design-rendered landing page =================
   That page paints with inline hex values, not tokens, so the token overrides
   above slide off it: Høy kontrast changed nothing there, and Rolig,
   Skjermleser først and Bryterstyring set an attribute and stopped. These
   rules act on the design's own palette, matched by the exact values it uses,
   so a dark band keeps its light-on-dark text instead of being flattened.
   ========================================================================= */

/* Høy kontrast: darken the muted inks, solidify the translucent header, and
   drop the decorative photography that sits behind text. */
/* Both spellings on purpose. The design ships hex in the markup, and its
   runtime rewrites every style attribute through the CSSOM at hydration, which
   normalises #1E2A55 to rgb(30, 42, 85). Matching only the hex worked on the
   served HTML and silently stopped applying the moment the page came alive. */
html[data-view-contrast] [style*="color:#5A6178"],
html[data-view-contrast] [style*="color: rgb(90, 97, 120)"],
html[data-view-contrast] [style*="color:#33407A"],
html[data-view-contrast] [style*="color: rgb(51, 64, 122)"] { color: #1c2130 !important; }
html[data-view-contrast] [style*="color:#1E2A55"],
html[data-view-contrast] [style*="color: rgb(30, 42, 85)"] { color: #0a0c14 !important; }
html[data-view-contrast] [style*="color:#C2470F"],
html[data-view-contrast] [style*="color: rgb(194, 71, 15)"],
html[data-view-contrast] [style*="color:#B8430E"],
html[data-view-contrast] [style*="color: rgb(184, 67, 14)"] { color: #5e2105 !important; }
html[data-view-contrast] [style*="color:#236B3C"],
html[data-view-contrast] [style*="color: rgb(35, 107, 60)"] { color: #0c4a2c !important; }
html[data-view-contrast] header[style*="backdrop-filter"] {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border-bottom: 2px solid #0a0c14 !important;
}
html[data-view-contrast] [style*="#E6DDCC"],
html[data-view-contrast] [style*="rgb(230, 221, 204)"],
html[data-view-contrast] [style*="#D6CAB2"],
html[data-view-contrast] [style*="rgb(214, 202, 178)"] { border-color: #2a2f3d !important; }
html[data-view-contrast] [data-plx-fixed] { display: none !important; }
html[data-view-contrast] img[src*="/assets/photo/"] { display: none !important; }
html[data-view-contrast] a:focus-visible,
html[data-view-contrast] button:focus-visible { outline: 4px solid #0033cc !important; outline-offset: 3px !important; }

/* Rolig: the page goes quiet — visibly, not just technically.
   Hiding the parallax washes alone changed nothing a reader would notice: they
   sit behind everything at 0.18 opacity. Calm on this page means the decorative
   photography goes, the shadows flatten, the gradient fills become solid, and
   nothing moves. */
html[data-a11y~="calm"] [data-plx-fixed] { display: none !important; }
html[data-a11y~="calm"] img[src*="/assets/photo/"] { display: none !important; }
html[data-a11y~="calm"] [style*="box-shadow"] { box-shadow: none !important; }
html[data-a11y~="calm"] [style*="background:linear-gradient"],
html[data-a11y~="calm"] [style*="background: linear-gradient"],
html[data-a11y~="calm"] [style*="background:radial-gradient"],
html[data-a11y~="calm"] [style*="background: radial-gradient"] {
  background-image: none !important;
}
html[data-a11y~="calm"] body *,
html[data-a11y~="calm"] body *::before,
html[data-a11y~="calm"] body *::after {
  animation: none !important;
  transition: none !important;
}

/* Skjermleser først: a text-first page. Every decorative image goes — a screen
   reader was never going to read them, and for a sighted user pairing audio
   with the page they are what competes with the words being read. */
html[data-adapt-audio-first] [data-plx-fixed] { display: none !important; }
html[data-adapt-audio-first] img[src*="/assets/photo/"] { display: none !important; }
html[data-adapt-audio-first] [style*="box-shadow"] { box-shadow: none !important; }

/* Stor tekst on the design-rendered landing page.
   Raising the root or body size does nothing here: the design writes an
   explicit font-size inline on nearly every piece of text, so only 39 of 279
   elements grew and the setting read as broken. These map each size the design
   actually uses to a larger one — the same targeted approach the contrast rules
   use, and for the same reason. Both spellings again, because the runtime
   normalises the style attribute at hydration.

   The uplift is smaller on the narrowest screens. A flat 22% pushed the page
   to 373px at a 320px viewport (WCAG 1.4.10) — larger text is worth nothing if
   it costs the reader a sideways scroll. The three clamp() headline sizes are
   left alone: they already scale with the viewport. */
@media (max-width: 400px) {
  html[data-a11y~="large"] [style*="font-size:10px"],
  html[data-a11y~="large"] [style*="font-size: 10px"] { font-size: 11px !important; }
  html[data-a11y~="large"] [style*="font-size:11px"],
  html[data-a11y~="large"] [style*="font-size: 11px"] { font-size: 12px !important; }
  html[data-a11y~="large"] [style*="font-size:11.5px"],
  html[data-a11y~="large"] [style*="font-size: 11.5px"] { font-size: 12.5px !important; }
  html[data-a11y~="large"] [style*="font-size:12px"],
  html[data-a11y~="large"] [style*="font-size: 12px"] { font-size: 13px !important; }
  html[data-a11y~="large"] [style*="font-size:12.5px"],
  html[data-a11y~="large"] [style*="font-size: 12.5px"] { font-size: 14px !important; }
  html[data-a11y~="large"] [style*="font-size:13px"],
  html[data-a11y~="large"] [style*="font-size: 13px"] { font-size: 14.5px !important; }
  html[data-a11y~="large"] [style*="font-size:13.5px"],
  html[data-a11y~="large"] [style*="font-size: 13.5px"] { font-size: 15px !important; }
  html[data-a11y~="large"] [style*="font-size:14px"],
  html[data-a11y~="large"] [style*="font-size: 14px"] { font-size: 15.5px !important; }
  html[data-a11y~="large"] [style*="font-size:14.5px"],
  html[data-a11y~="large"] [style*="font-size: 14.5px"] { font-size: 16px !important; }
  html[data-a11y~="large"] [style*="font-size:15px"],
  html[data-a11y~="large"] [style*="font-size: 15px"] { font-size: 16.5px !important; }
  html[data-a11y~="large"] [style*="font-size:15.5px"],
  html[data-a11y~="large"] [style*="font-size: 15.5px"] { font-size: 17px !important; }
  html[data-a11y~="large"] [style*="font-size:16px"],
  html[data-a11y~="large"] [style*="font-size: 16px"] { font-size: 17.5px !important; }
  html[data-a11y~="large"] [style*="font-size:16.5px"],
  html[data-a11y~="large"] [style*="font-size: 16.5px"] { font-size: 18px !important; }
  html[data-a11y~="large"] [style*="font-size:17px"],
  html[data-a11y~="large"] [style*="font-size: 17px"] { font-size: 18.5px !important; }
  html[data-a11y~="large"] [style*="font-size:18px"],
  html[data-a11y~="large"] [style*="font-size: 18px"] { font-size: 20px !important; }
  html[data-a11y~="large"] [style*="font-size:18.5px"],
  html[data-a11y~="large"] [style*="font-size: 18.5px"] { font-size: 20.5px !important; }
  html[data-a11y~="large"] [style*="font-size:19px"],
  html[data-a11y~="large"] [style*="font-size: 19px"] { font-size: 21px !important; }
  html[data-a11y~="large"] [style*="font-size:20px"],
  html[data-a11y~="large"] [style*="font-size: 20px"] { font-size: 22px !important; }
  html[data-a11y~="large"] [style*="font-size:21px"],
  html[data-a11y~="large"] [style*="font-size: 21px"] { font-size: 23px !important; }
  html[data-a11y~="large"] [style*="font-size:22px"],
  html[data-a11y~="large"] [style*="font-size: 22px"] { font-size: 24px !important; }
  html[data-a11y~="large"] [style*="font-size:24px"],
  html[data-a11y~="large"] [style*="font-size: 24px"] { font-size: 26.5px !important; }
  html[data-a11y~="large"] [style*="font-size:27px"],
  html[data-a11y~="large"] [style*="font-size: 27px"] { font-size: 29.5px !important; }
  html[data-a11y~="large"] [style*="font-size:29px"],
  html[data-a11y~="large"] [style*="font-size: 29px"] { font-size: 32px !important; }
  html[data-a11y~="large"] [style*="font-size:30px"],
  html[data-a11y~="large"] [style*="font-size: 30px"] { font-size: 33px !important; }
  html[data-a11y~="large"] [style*="font-size:36px"],
  html[data-a11y~="large"] [style*="font-size: 36px"] { font-size: 39.5px !important; }
}
@media (min-width: 401px) {
  html[data-a11y~="large"] [style*="font-size:10px"],
  html[data-a11y~="large"] [style*="font-size: 10px"] { font-size: 12px !important; }
  html[data-a11y~="large"] [style*="font-size:11px"],
  html[data-a11y~="large"] [style*="font-size: 11px"] { font-size: 13.5px !important; }
  html[data-a11y~="large"] [style*="font-size:11.5px"],
  html[data-a11y~="large"] [style*="font-size: 11.5px"] { font-size: 14px !important; }
  html[data-a11y~="large"] [style*="font-size:12px"],
  html[data-a11y~="large"] [style*="font-size: 12px"] { font-size: 14.5px !important; }
  html[data-a11y~="large"] [style*="font-size:12.5px"],
  html[data-a11y~="large"] [style*="font-size: 12.5px"] { font-size: 15px !important; }
  html[data-a11y~="large"] [style*="font-size:13px"],
  html[data-a11y~="large"] [style*="font-size: 13px"] { font-size: 16px !important; }
  html[data-a11y~="large"] [style*="font-size:13.5px"],
  html[data-a11y~="large"] [style*="font-size: 13.5px"] { font-size: 16.5px !important; }
  html[data-a11y~="large"] [style*="font-size:14px"],
  html[data-a11y~="large"] [style*="font-size: 14px"] { font-size: 17px !important; }
  html[data-a11y~="large"] [style*="font-size:14.5px"],
  html[data-a11y~="large"] [style*="font-size: 14.5px"] { font-size: 17.5px !important; }
  html[data-a11y~="large"] [style*="font-size:15px"],
  html[data-a11y~="large"] [style*="font-size: 15px"] { font-size: 18.5px !important; }
  html[data-a11y~="large"] [style*="font-size:15.5px"],
  html[data-a11y~="large"] [style*="font-size: 15.5px"] { font-size: 19px !important; }
  html[data-a11y~="large"] [style*="font-size:16px"],
  html[data-a11y~="large"] [style*="font-size: 16px"] { font-size: 19.5px !important; }
  html[data-a11y~="large"] [style*="font-size:16.5px"],
  html[data-a11y~="large"] [style*="font-size: 16.5px"] { font-size: 20px !important; }
  html[data-a11y~="large"] [style*="font-size:17px"],
  html[data-a11y~="large"] [style*="font-size: 17px"] { font-size: 20.5px !important; }
  html[data-a11y~="large"] [style*="font-size:18px"],
  html[data-a11y~="large"] [style*="font-size: 18px"] { font-size: 22px !important; }
  html[data-a11y~="large"] [style*="font-size:18.5px"],
  html[data-a11y~="large"] [style*="font-size: 18.5px"] { font-size: 22.5px !important; }
  html[data-a11y~="large"] [style*="font-size:19px"],
  html[data-a11y~="large"] [style*="font-size: 19px"] { font-size: 23px !important; }
  html[data-a11y~="large"] [style*="font-size:20px"],
  html[data-a11y~="large"] [style*="font-size: 20px"] { font-size: 24.5px !important; }
  html[data-a11y~="large"] [style*="font-size:21px"],
  html[data-a11y~="large"] [style*="font-size: 21px"] { font-size: 25.5px !important; }
  html[data-a11y~="large"] [style*="font-size:22px"],
  html[data-a11y~="large"] [style*="font-size: 22px"] { font-size: 27px !important; }
  html[data-a11y~="large"] [style*="font-size:24px"],
  html[data-a11y~="large"] [style*="font-size: 24px"] { font-size: 29.5px !important; }
  html[data-a11y~="large"] [style*="font-size:27px"],
  html[data-a11y~="large"] [style*="font-size: 27px"] { font-size: 33px !important; }
  html[data-a11y~="large"] [style*="font-size:29px"],
  html[data-a11y~="large"] [style*="font-size: 29px"] { font-size: 35.5px !important; }
  html[data-a11y~="large"] [style*="font-size:30px"],
  html[data-a11y~="large"] [style*="font-size: 30px"] { font-size: 36.5px !important; }
  html[data-a11y~="large"] [style*="font-size:36px"],
  html[data-a11y~="large"] [style*="font-size: 36px"] { font-size: 44px !important; }
}

/* Alt visuelt: the visible counterpart to read-aloud, the one sound the site
   makes. Fixed so it stays with the reader down the page. */
.reading-flag {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 90;
  margin: 0;
  padding: 12px 20px;
  border-radius: 999px;
  background: #1E2A55;
  color: #FFF7EC;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(21, 32, 59, 0.28);
}

/* Bryterstyring: every target on the page big enough to hit with a switch or a
   shaky hand, and a focus ring you cannot lose. */
html[data-adapt-switch-scanning] header a,
html[data-adapt-switch-scanning] header button,
html[data-adapt-switch-scanning] [data-screen-label] a,
html[data-adapt-switch-scanning] [data-screen-label] button,
html[data-adapt-switch-scanning] footer a {
  min-height: 56px !important;
  /* display is deliberately NOT !important. Forcing it re-showed the header CTA
     that the 320px reflow rule hides, and the page went back to overflowing by
     28px under Bryterstyring. A hidden control must stay hidden; growing the
     ones that are visible is the whole point. */
  display: inline-flex;
  align-items: center !important;
}
html[data-adapt-switch-scanning] :focus-visible {
  outline: 4px solid #0033cc !important;
  outline-offset: 3px !important;
}


/* =========================================================================
   MOTION LAYER (subtle, accessibility-gated)
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Tunables ------------------------------------------------------- */
  :root {
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* ---- Hero entrance (§6.4) ------------------------------------------- */
  /* Plays once on load; independent of scroll so the fold animates instantly.
     This lifts the hero copy and stage frame. */
  :where(body:not([data-a11y~="calm"])) .hero-copy {
    animation: dly-hero-rise 0.8s var(--motion-ease) both;
  }
  :where(body:not([data-a11y~="calm"])) .hero-inner .hero-copy {
    animation-duration: 0.7s;
  }
  @keyframes dly-hero-rise {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  /* ---- Chip micro-interactions (§6.3) ---------------------------------- */
  :where(body:not([data-a11y~="calm"])) .proof-list li {
    transition:
      transform 0.2s var(--motion-ease),
      box-shadow 0.2s var(--motion-ease),
      background 0.2s var(--motion-ease),
      border-color 0.2s var(--motion-ease),
      color 0.2s var(--motion-ease);
  }
  :where(body:not([data-a11y~="calm"])) .proof-list li:hover {
    transform: translateY(-1px);
  }

  /* ---- Button polish (§6.3, extends the existing .btn transitions) -- */
  /* STATIC_STYLES already animates color and shadow. Keep buttons spatially
     stable so the public site does not feel busy or jumpy. */
  :where(body:not([data-a11y~="calm"])) .btn:active {
    transform: none;
    transition-duration: 0.08s;
  }
  :where(body:not([data-a11y~="calm"])) :is(.btn--primary, .btn--secondary):focus-visible {
    transform: none;
    box-shadow: var(--shadow-md);
  }

  /* ---- Sun logo: very slow breathe + ray shimmer ---------------------- */
  /* Deliberately glacial (long durations) so it reads as warmth, not motion.
     We animate the whole mark with a sub-pixel scale breathe, and let the rays
     (the <line> children) shimmer their opacity on a long, offset cycle.
     transform-box keeps the scale centred on the SVG's own box. */
  :where(body:not([data-a11y~="calm"])) .sun-mark {
    transform-box: fill-box;
    transform-origin: center;
    animation: dly-sun-breathe 9s ease-in-out infinite;
  }
  :where(body:not([data-a11y~="calm"])) .sun-mark line {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: dly-sun-shimmer 7s ease-in-out infinite;
  }
  @keyframes dly-sun-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
  }
  @keyframes dly-sun-shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.78; }
  }
}

/* =========================================================================
   ROLIG ("calm") OVERRIDE — the site's own reduced-motion choice.
   This is independent of the OS setting: a visitor who picks "Rolig visning"
   gets a completely still page even if their OS allows motion. We hard-disable
   every animation/transition/transform.
   Kept OUTSIDE the no-preference query and using !important so it always wins.
   ========================================================================= */

body[data-a11y~="calm"] .hero-copy,
body[data-a11y~="calm"] .proof-list li,
body[data-a11y~="calm"] .btn,
body[data-a11y~="calm"] .sun-mark,
body[data-a11y~="calm"] .sun-mark line {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}


/* === a11y layer (WCAG 2.1 AA) — additive, scoped, no token restatement) === */

/* --- Visually-hidden / screen-reader-only ---------------------------------
 * Robust off-screen pattern used by polite live regions and any sr-only
 * label. Clip + 1px box keeps the text in
 * the accessibility tree while removing it from the visual + layout flow.
 * The nowrap rule stops the clipped text from being collapsed by a zero
 * width. */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- Focus-visible ring ----------------------------------------------------
 * A single, consistent, high-contrast ring on every interactive surface.
 * Keyboard users always see it; pointer users do not get a stray outline
 * because we only remove the default outline when :focus AND :not(:focus-visible).
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="radio"]:focus-visible,
[role="button"]:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Remove the UA outline ONLY for pointer/programmatic focus; keyboard focus
 * keeps the ring above. Never leave a control with no visible focus state. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

/* --- Reduced motion (WCAG 2.3.3 / motion safety) --------------------------
 * Global guard: when the user asks for less motion we disable transitions,
 * animations and smooth scrolling everywhere. Kept as a near-zero duration so
 * state still settles (no permanently mid-animation elements). */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  html,
  body {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Calm ("Rolig") global motion safety-net (WCAG 2.3.3) ------------------
 * The site's own "Rolig visning" choice sets data-a11y~="calm" on <html> and
 * <body> (see staticScript.ts). The motion layer already neutralises the
 * specific classes it animates, but THIS is the cross-cutting backstop: any
 * animation/transition/transform ANY layer adds — now or later — is zeroed out
 * the moment a visitor picks calm, even if that layer forgot to opt in. We
 * match on both the documentElement and body attribute so it holds regardless
 * of which element the choice landed on. Kept here (not
 * in the motion layer) so it covers the whole site additively and survives any
 * future motion module that an agent writes. */
:root[data-a11y~="calm"] *,
:root[data-a11y~="calm"] *::before,
:root[data-a11y~="calm"] *::after,
body[data-a11y~="calm"] *,
body[data-a11y~="calm"] *::before,
body[data-a11y~="calm"] *::after {
  animation: none !important;
  animation-play-state: paused !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
/* NOTE: deliberately NOT zeroing transform here. transform is also used for
 * LAYOUT (e.g. device frames; the sun). A blanket transform:none broke 320px reflow in calm mode.
 * Hover/active LIFT transforms are already gated off in calm by motionStyles
 * via a body:not(calm) scope, so motion is still fully disabled. */

/* --- Text-spacing resilience (WCAG 1.4.12) --------------------------------
 * Content must not be lost or clipped when a user stylesheet/bookmarklet raises
 * line-height to 1.5×, letter-spacing to 0.12em, word-spacing to 0.16em and
 * paragraph spacing to 2×. We do NOT impose those values (that is the user's
 * job) — we only make the containers that hold interactive labels and copy
 * tolerant of them: allow wrapping and let height grow with content instead of
 * clipping. Scoped to the documented surfaces so layout elsewhere is untouched.
 */
.btn {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Controls that are fixed-height in other layers must grow with spaced text
 * rather than clipping it; relax to height:auto (the ≥44px floor above keeps
 * the target size). We deliberately do NOT pin line-height/letter-spacing here
 * so a user's increased text-spacing (1.4.12) is respected, not overridden. */
.btn {
  height: auto;
}

/* --- Increased contrast (WCAG 1.4.11 robustness) --------------------------
 * Strengthen the borders that separate cards, device frames and controls so
 * boundaries stay perceivable in forced/high-contrast environments. Borders
 * only — we do not override author colours that already meet AA. */
@media (prefers-contrast: more) {

  :focus-visible {
    outline-width: 4px;
  }
}

/* --- Skip-link reinforcement (additive) -----------------------------------
 * The SSR markup already ships a working .skip-link; this only reinforces the
 * focused state so it is unmissable and lands above sticky chrome. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 1000;
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* --- Focus ring contrast on dark / navy surfaces (additive) ----------------
 * The marketing layer's global focus ring is the blue var(--color-focus), which
 * can wash out on the navy-filled active pills and dark bands. We do NOT touch
 * that layer; instead we add a brighter, token-driven ring with a white halo
 * (double outline via box-shadow) on the controls that can sit on a dark fill,
 * so the focus indicator clears 3:1 against BOTH light and dark surfaces
 * (WCAG 2.4.7 / 1.4.11). box-shadow is used for the inner white halo because
 * a single element can carry only one outline. */
.view-tuner__option:focus-visible,
.view-tuner__close:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px var(--color-focus);
}



/* --- Windows High Contrast / forced-colors (WCAG 1.4.1, 1.4.11, 2.4.7) -----
 * In forced-colors mode the OS replaces author colours with a restricted system
 * palette; backgrounds set via gradients/box-shadow vanish and SVG currentColor
 * follows system text. We must: keep a visible focus indicator, restore borders
 * that previously relied on colour/shadow alone, ensure selected state is not
 * conveyed by colour only, and let the sun/device art keep its colours where it
 * is purely decorative. Scoped, additive, no layout changes. */
@media (forced-colors: active) {
  /* Keep every focus ring visible and mapped to a system colour. */
  a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="radio"]:focus-visible,
[role="button"]:focus-visible,
.skip-link:focus,
.skip-link:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    /* Drop the white halo: in forced-colors box-shadow is removed anyway. */
    box-shadow: none;
  }

  /* Cards, frames and controls lose shadow-only / faint borders — restore a
     1px system border so boundaries remain perceivable. */
  .content-card,
.policy-card,
.view-tuner__drawer,
.view-tuner__option,
.btn,
.proof-list li {
    border: 1px solid CanvasText;
  }

  /* Selected / active states are colour-only in the base layers — add a
     forced-colors-visible marker (system Highlight border) so the choice is not
     lost when the palette is overridden (WCAG 1.4.1). */
  [aria-pressed="true"],
[aria-checked="true"],
[aria-selected="true"],
[aria-current="page"],
[aria-current="date"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* The polite live region must remain hidden (not surfaced) in HC mode. */
  .visually-hidden,
.sr-only {
    forced-color-adjust: none;
  }

  /* Keep brand/device illustration colours instead of flattening them to the
     system palette — they are decorative and carry no state. */
  .sun-mark {
    forced-color-adjust: none;
  }

}