@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-toneGreen: #E5F3E9;
  --color-tonePeach: #FCEDE0;
  --color-toneLilac: #EEEAF9;
  --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;
}
:root {
  color-scheme: light;
  /* -------------------------------------------------------------------------
     LEGACY ALIASES — the single source of truth is src/lib/tokens.ts, emitted
     by renderRootTokensCss() as the canonical color, radius and shadow custom
     properties. To avoid a mass rename, the older selectors keep working
     through these aliases. There is now exactly ONE navy (--color-navy) and ONE
     coherent orange family (brand / brandStrong / brandDeep). No raw brand,
     surface or ink hex lives here.
     IMPORTANT: never write the literal asterisk-slash sequence in this comment
     (e.g. a glob like color-asterisk-slash-radius) — it closes the CSS comment
     early and the parser then eats the first real declaration below as a bad
     declaration up to the first semicolon, silently dropping --navy. That made
     background: var(--navy) paint transparent and the dark Trygghet /
     Støtteperson-portal bands invisible. */
  --navy: var(--color-navy);
  --navy-soft: var(--color-nextInk);
  --ink: var(--color-navy);
  --muted: var(--color-inkMuted);
  --line: var(--color-line);
  --line-strong: var(--color-lineStrong);
  --page: var(--color-cream);
  --section: var(--color-surface);
  --section-warm: var(--color-cream);
  --card: var(--color-surface);
  --pastel-blue: var(--color-toneBlue);
  --pastel-green: var(--color-toneGreen);
  --pastel-peach: var(--color-tonePeach);
  --pastel-lilac: var(--color-toneLilac);
  --green-ink: var(--color-doneInk);
  /* The CTA orange resolves to the AA-safe deep orange; "orange-dark" to the
     deep-saturated strong orange — one orange family, no second CTA orange. */
  --orange: var(--color-brandDeep);
  --orange-dark: var(--color-brandStrong);
  --amber: var(--color-sunTop);
  --focus: var(--color-focus);
  /* The canonical --radius-* and --shadow-* come from renderRootTokensCss().
     Buttons / CTAs reference --radius-control (12px) directly below. */
  --maxw: 1180px;
  /* Fallback stack only — renderRootTokensCss() emits the real --font-sans /
     --font-display (Atkinson Hyperlegible / Bricolage Grotesque, self-hosted). */
  font-family: var(--font-sans, system-ui), -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* The wide-screen content column lives HERE, next to the value it widens, and
   not in the section stylesheet. design-fonts.css re-emits this whole alias
   block after styles.css, so a --maxw override anywhere else was overwritten by
   the 1180px above it and never applied — measured 1180px at 1920 and at 2560.
   Media queries add no specificity, so the later declaration simply won. */
@media (min-width: 1600px) { :root { --maxw: 1320px; } }



:focus-visible { outline: 3px solid var(--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(--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(--focus, #0B5FD4);
  outline-offset: 3px;
}

/* Header control pair — nav · "Meny / Tilpass visning" trigger.
   Uses the unified .btn system; locked order via source order. */
.header-tuner-trigger { flex: none; white-space: nowrap; gap: 8px; }

.site-header svg,
.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(--card);
  border-left: 1px solid var(--line-strong);
  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(--line);
}

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

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

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

.view-tuner__close:hover { border-color: var(--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(--muted);
}

.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__nav { display: grid; gap: 8px; }

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

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

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

/* 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(--line-strong);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--navy);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

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

.view-tuner__option-check {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  background: var(--card);
  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(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
}

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

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

.view-tuner__status { margin: 14px 0 0; color: var(--muted); 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(--line);
  background: var(--card);
}

.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.
   The legacy .button family is kept as an alias of the SAME rules so existing
   markup (and the static-site test) keeps rendering, but now converges on a
   single orange (--color-brandDeep), single navy and 12px corners. Pill radius
   is reserved for segmented controls + status chips, never for these buttons.
   ========================================================================= */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* md is the default size: h44 / 0 18px / 16px. */
  min-height: 44px;
  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--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }

.btn--md { min-height: 44px; padding: 0 18px; font-size: 16px; }

.btn--lg,
.button.big { min-height: 52px; padding: 0 28px; font-size: 17px; }

/* Variants ---------------------------------------------------------------- */
.btn--primary,
.button.primary { color: var(--color-onBrand); background: var(--color-brandDeep); box-shadow: var(--shadow-sm); }

.btn--primary:hover,
.button.primary:hover { background: var(--color-brandStrong); box-shadow: var(--shadow-sm); }

.btn--secondary,
.button.secondary { background: var(--color-surface); border-color: var(--color-lineStrong); color: var(--navy); }

.btn--secondary:hover,
.button.secondary:hover { box-shadow: var(--shadow-sm); border-color: var(--navy); }

.btn--ghost,
.button.ghost { background: transparent; border-color: currentColor; color: var(--color-onBrand); }

.btn--ghost:hover,
.button.ghost:hover { background: rgba(255,255,255,0.12); }

/* Ghost on a LIGHT surface — AA contrast is carried by the class, not the
   ancestor, so an unscoped ghost can never render white-on-cream. */
.btn--ghost-on-light { background: transparent; border-color: var(--color-lineStrong); color: var(--navy); }

.btn--ghost-on-light:hover { background: rgba(31,42,90,0.06); border-color: var(--navy); }


/* The hero secondary now carries .btn--ghost-on-light explicitly, so no
   descendant override is needed. */

/* Proof chips — three short trust claims as an icon row under the hero CTAs. */
.proof-chips { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); padding: 0; margin: var(--space-7, 40px) 0 0; list-style: none; }

/* ===== "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(--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,
html[data-adapt-switch-scanning] .button,
html[data-adapt-switch-scanning] .header-tuner-trigger,
html[data-adapt-switch-scanning] .dly-demo__chip,
html[data-adapt-switch-scanning] .dly-seg__btn,
html[data-adapt-switch-scanning] .bruk-phone__open,
html[data-adapt-switch-scanning] .dly-demo__cta-link {
  min-height: 56px;
  min-width: 56px;
}
html[data-adapt-switch-scanning] :focus-visible {
  outline-width: 4px; outline-offset: 5px;
}
html[data-adapt-all-visual] .day-status,
html[data-adapt-all-visual] .proof-chip,
html[data-adapt-all-visual] .trust-pill {
  border: 2px solid currentColor;
}

/* ===== ENKEL — simpler, larger, shorter ================================= */
.enkel-only { display: none; }
html[data-view-enkel] .enkel-only { display: revert; }
html[data-view-enkel] [data-priority="detail"],
html[data-view-enkel] .detail-only { 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-stage { order: -1; }
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] .button,
html[data-view-enkel] .dly-demo__cta-link {
  min-height: 54px; padding: 14px 24px; font-size: 1.08rem;
}
/* Single-column the grids that remain visible in Enkel (profiles/pricing). */
html[data-view-enkel] .price-grid,
html[data-view-enkel] .level-grid,
html[data-view-enkel] .profile-grid,
html[data-view-enkel] .persona-grid { grid-template-columns: 1fr !important; }
/* 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(--section-warm); border: 2px solid var(--line-strong);
  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,
html[data-a11y~="large"] body .mode-card p,
html[data-a11y~="large"] body .feature-card p,
body[data-a11y~="large"] .intro,
body[data-a11y~="large"] .band-lead,
body[data-a11y~="large"] .mode-card p,
body[data-a11y~="large"] .feature-card p { color: var(--navy); }
html[data-a11y~="calm"] body .proof-list,
html[data-a11y~="calm"] body .persona-story,
html[data-a11y~="calm"] body .device-caption,
body[data-a11y~="calm"] .proof-list,
body[data-a11y~="calm"] .persona-story,
body[data-a11y~="calm"] .device-caption { 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); }
html[data-a11y~="calm"] body .feature-card,
html[data-a11y~="calm"] body .mode-card,
html[data-a11y~="calm"] body .problem-card,
body[data-a11y~="calm"] .feature-card,
body[data-a11y~="calm"] .mode-card,
body[data-a11y~="calm"] .problem-card { box-shadow: none; border-color: var(--navy); }


/* 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] .dgl-plx-wide { 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(--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 both token namespaces =========== */
html[data-view-contrast] {
  /* marketing tokens */
  --navy: #101320; --navy-soft: #101320; --ink: #0a0c14; --muted: #252a38;
  --line: #5a6072; --line-strong: #2a2f3d; --page: #ffffff; --section: #ffffff;
  --section-warm: #ffffff; --card: #ffffff;
  --pastel-blue: #eef3ff; --pastel-green: #e9f7ef; --pastel-peach: #fdeede; --pastel-lilac: #efeafd;
  --green-ink: #0c5a44; --orange: #8a3208; --orange-dark: #5e2105; --focus: #0033cc;
  /* demo-island 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] .day-card,
html[data-view-contrast] .dly-card,
html[data-view-contrast] .content-card,
html[data-view-contrast] .price-card,
html[data-view-contrast] .mini-screen,
html[data-view-contrast] .dly-frame__screen { border: 2px solid #101320; }
/* The "Nå"-highlighted mini row must keep its definition in high contrast. */
html[data-view-contrast] .mini-row.now { outline: 2px solid #101320; outline-offset: -2px; }
html[data-view-contrast] a { text-decoration: underline; text-underline-offset: 2px; }
html[data-view-contrast] .button.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)
   Default state for every reveal target is SETTLED + VISIBLE. The hidden
   pre-reveal state is introduced only under prefers-reduced-motion:
   no-preference, so no-JS / reduced-motion / Rolig always show content.
   ========================================================================= */

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

  /* ---- Tunables ------------------------------------------------------- */
  :root {
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-reveal-dur: 0.62s;
    --motion-reveal-rise: 18px;
    --motion-stagger: 90ms;
  }

  /* ---- Scroll reveal (§6.1) ------------------------------------------- */
  /* Tagged marketing bands rise + fade in once JS adds .is-revealed (in view).
     Scoped with :where(body:not([data-a11y~="calm"])) so Rolig never hides the
     content (the hidden start state simply never applies). Default (no JS /
     reduced-motion / calm) = fully visible. */
  :where(body:not([data-a11y~="calm"])) [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-rise), 0);
    transition:
      opacity var(--motion-reveal-dur) var(--motion-ease),
      transform var(--motion-reveal-dur) var(--motion-ease);
    will-change: opacity, transform;
  }
  :where(body:not([data-a11y~="calm"])) [data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    /* Release the compositor hint once settled. */
    will-change: auto;
  }
  /* Small, tasteful stagger for grouped siblings. */
  :where(body:not([data-a11y~="calm"])) [data-reveal][data-reveal-delay="1"] { transition-delay: calc(var(--motion-stagger) * 1); }
  :where(body:not([data-a11y~="calm"])) [data-reveal][data-reveal-delay="2"] { transition-delay: calc(var(--motion-stagger) * 2); }
  :where(body:not([data-a11y~="calm"])) [data-reveal][data-reveal-delay="3"] { transition-delay: calc(var(--motion-stagger) * 3); }

  /* ---- Hero entrance (§6.4) ------------------------------------------- */
  /* Plays once on load; independent of scroll so the fold animates instantly.
     The phone already has its own phone-rise; this lifts copy + 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-stage {
    animation: dly-hero-rise 0.8s var(--motion-ease) 0.12s 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); }
  }

  /* ---- Card / surface micro-interactions (§6.3) ----------------------- */
  /* These elements already have shadow/border styling in STATIC_STYLES; we
     only add a transition + a gentle hover/focus lift. transform+box-shadow
     only, so nothing reflows. Each rule is scoped to
     :where(body:not([data-a11y~="calm"])) so Rolig is still through the cascade. */
  :where(body:not([data-a11y~="calm"])) :is(
    .day-card,
    .feature-card,
    .trust-card,
    .problem-card,
    .mode-card,
    .price-card,
    .story-card,
    .persona-card,
    .mini-figure,
    .device-figure
  ) {
    transition:
      transform 0.26s var(--motion-ease),
      box-shadow 0.26s var(--motion-ease),
      border-color 0.26s var(--motion-ease);
  }

  /* Interactive cards (links) get a clearer hover/active lift. */
  :where(body:not([data-a11y~="calm"])) :is(.story-card, .persona-card):hover,
  :where(body:not([data-a11y~="calm"])) :is(.story-card, .persona-card):focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  :where(body:not([data-a11y~="calm"])) :is(.story-card, .persona-card):active {
    transform: translateY(-1px);
    transition-duration: 0.08s;
  }

  /* Non-interactive info cards get a barely-there hover float for liveliness. */
  :where(body:not([data-a11y~="calm"])) :is(.feature-card, .trust-card, .mode-card, .price-card):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
  /* The featured pricing card sits slightly proud; keep its emphasis on hover. */
  :where(body:not([data-a11y~="calm"])) .price-card.featured:hover {
    box-shadow: var(--shadow-lg);
  }

  /* The day cards inside the phone mock breathe just a touch on hover. */
  :where(body:not([data-a11y~="calm"])) .day-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }

  /* ---- Chip / tab / control micro-interactions (§6.3) ----------------- */
  :where(body:not([data-a11y~="calm"])) :is(
    .level-tab,
    .hero-mode-button,
    .proof-list li,
    .day-action,
    .story-badge,
    .persona-badge
  ) {
    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"])) :is(.level-tab, .hero-mode-button):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  :where(body:not([data-a11y~="calm"])) :is(.level-tab, .hero-mode-button):active {
    transform: translateY(0);
    transition-duration: 0.08s;
  }
  /* The selected tab/chip settles flat — it is the resting, "pressed" state. */
  :where(body:not([data-a11y~="calm"])) :is(.level-tab, .hero-mode-button)[aria-pressed="true"] {
    transform: none;
  }
  :where(body:not([data-a11y~="calm"])) .proof-list li:hover {
    transform: translateY(-1px);
  }

  /* ---- Button polish (§6.3, extends the existing .button 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"])) .button:active {
    transform: none;
    transition-duration: 0.08s;
  }
  :where(body:not([data-a11y~="calm"])) :is(.button.primary, .button.secondary):focus-visible {
    transform: none;
    box-shadow: var(--shadow-md);
  }

  /* FAQ disclosure marker eases when toggled. */
  :where(body:not([data-a11y~="calm"])) .faq-item summary {
    transition: color 0.2s var(--motion-ease);
  }

  /* ---- 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 and force reveal targets visible.
   Kept OUTSIDE the no-preference query and using !important so it always wins.
   ========================================================================= */

body[data-a11y~="calm"] [data-reveal],
body[data-a11y~="calm"] .hero-copy,
body[data-a11y~="calm"] .hero-stage,
body[data-a11y~="calm"] .phone,
body[data-a11y~="calm"] .day-card,
body[data-a11y~="calm"] .feature-card,
body[data-a11y~="calm"] .trust-card,
body[data-a11y~="calm"] .problem-card,
body[data-a11y~="calm"] .mode-card,
body[data-a11y~="calm"] .price-card,
body[data-a11y~="calm"] .story-card,
body[data-a11y~="calm"] .persona-card,
body[data-a11y~="calm"] .mini-figure,
body[data-a11y~="calm"] .device-figure,
body[data-a11y~="calm"] .level-tab,
body[data-a11y~="calm"] .hero-mode-button,
body[data-a11y~="calm"] .proof-list li,
body[data-a11y~="calm"] .button,
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 the demo's polite live region
 * (.dly-demo__live) 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; the .*--focusable variant lets a skip target reveal itself. */
.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;
}

.visually-hidden--focusable:focus,
.visually-hidden--focusable:focus-within,
.sr-only--focusable:focus,
.sr-only--focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !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,
.dly-seg__btn:focus-visible,
.dly-nav__tab:focus-visible,
.dly-demo__chip:focus-visible,
.dly-readaloud:focus-visible,
.dly-demo__cta-link:focus-visible,
.dly-demo__cta a:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--color-focus, var(--focus, #1F6FEB));
  outline-offset: 3px;
  border-radius: 8px;
}

/* Inset the ring on tightly-packed segmented controls so it never collides
 * with the neighbouring control, while staying clearly visible. */
.dly-seg__btn:focus-visible,
.dly-nav__tab:focus-visible {
  outline-offset: 2px;
}

/* 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),
.dly-seg__btn:focus:not(:focus-visible),
.dly-nav__tab:focus:not(:focus-visible),
.dly-demo__chip:focus:not(:focus-visible),
.dly-readaloud:focus:not(:focus-visible),
.dly-demo__cta-link:focus:not(:focus-visible) {
  outline: none;
}

/* --- Minimum target size (WCAG 2.5.5 / 2.5.8) ------------------------------
 * Guarantee >= 44x44 CSS px for the interactive demo controls. Scoped to the
 * documented demo classes only, so it never inflates dense marketing UI.
 * Size FLOOR only — display/flex/colour/layout stay with the demo-styles layer
 * (those controls are already inline-flex), so this stays conflict-free no
 * matter which layer is concatenated last. */
.dly-seg__btn,
.dly-nav__tab,
.dly-demo__chip,
.dly-readaloud,
.dly-demo__cta-link {
  min-height: 44px;
  min-width: 44px;
}

/* --- 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. Pre-reveal hidden states are forced
 * visible so no content can be stranded transparent/translated. 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. .tablet-scale.is-scaled shrinks the static device mock; 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. */

/* Anything a layer hid behind a reveal/entrance must be shown under calm. */
:root[data-a11y~="calm"] [data-reveal],
body[data-a11y~="calm"] [data-reveal] {
  opacity: 1 !important;
}

/* --- 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.
 */
.dly-seg__btn,
.dly-nav__tab,
.dly-demo__chip,
.dly-readaloud,
.dly-demo__cta-link,
.level-tab,
.hero-mode-button,
.button,
.price-cta,
.feature-card,
.mode-card,
.problem-card,
.story-card,
.price-card,
.persona-card,
.dly-card,
.dly-list,
.dly-routine {
  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. */
.dly-seg__btn,
.dly-nav__tab,
.dly-demo__chip,
.level-tab,
.hero-mode-button,
.button {
  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) {
  .feature-card,
  .mode-card,
  .problem-card,
  .story-card,
  .price-card,
  .dly-demo,
  .dly-demo__chip,
  .dly-seg,
  .dly-seg__btn,
  .dly-nav,
  .dly-nav__tab,
  .dly-readaloud,
  .device-phone,
  .device-tablet,
  .phone-screen {
    border-width: 2px;
    border-style: solid;
    border-color: var(--navy, currentColor);
  }

  .dly-seg__btn--active,
  .dly-nav__tab--active,
  .dly-demo__chip--active {
    outline: 2px solid var(--navy, currentColor);
    outline-offset: -2px;
  }

  :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, var(--focus, #1F6FEB));
  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. */
.hero-mode-button:focus-visible,
.level-tab:focus-visible,
.header-tuner-trigger:focus-visible,
.view-tuner__option:focus-visible,
.view-tuner__close:focus-visible,
.button:focus-visible,
.price-cta:focus-visible,
.story-card:focus-visible,
.persona-card:focus-visible,
.site-header nav a:focus-visible,
.footer-nav a:focus-visible,
.dly-seg--device .dly-seg__btn:focus-visible,
.dly-readaloud:focus-visible,
.dly-demo__cta-link:focus-visible,
.dly-stotte__action:focus-visible,
.dly-cal__day--today:focus-visible {
  outline: 3px solid var(--color-focus, var(--focus, #1F6FEB));
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px var(--color-focus, var(--focus, #1F6FEB));
}

/* --- Scrollable demo screen is keyboard-reachable (WCAG 2.1.1) -------------
 * .dly-screen scrolls (overflow-y:auto) and can hold off-screen content. A
 * scroll container with no focusable child is a keyboard trap of content; make
 * it tabbable so keyboard-only users can scroll it. Additive: the demo never
 * sets tabindex on this element. */
.dly-frame__screen .dly-screen:focus-visible {
  outline: 3px solid var(--color-focus, var(--focus, #1F6FEB));
  outline-offset: -3px;
}

/* --- Cross-browser fallbacks owned by the a11y layer ----------------------- */

/* Firefox/Edge legacy parsers want comma-separated rect() for the deprecated
 * clip. The demo layer's .dly-demo__live uses the space-separated form; pin a
 * standards-correct, comma-separated value here as belt-and-braces so the live
 * region is reliably clipped (not just visually hidden) in every engine. */
.dly-demo__live {
  clip: rect(0, 0, 0, 0) !important;
}

/* backdrop-filter is unprefixed in Edge/Chrome and Firefox (>=103) but the
 * translucent chrome MUST stay legible if the filter is unsupported or disabled
 * (e.g. FF with layout.css.backdrop-filter disabled). Guarantee an opaque-enough
 * fallback only where no blur is applied. @supports keeps modern engines on the
 * designed translucent look. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--page, #fffbf5);
  }
  .phone-nav,
  .dly-nav {
    background: #ffffff;
  }
}


/* --- 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,
  .dly-seg__btn:focus-visible,
  .dly-nav__tab:focus-visible,
  .dly-demo__chip:focus-visible,
  .dly-cal__day: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. */
  .feature-card,
  .mode-card,
  .problem-card,
  .story-card,
  .price-card,
  .trust-card,
  .content-card,
  .policy-card,
  .persona-card,
  .mini-screen,
  .day-card,
  .tablet-routine,
  .header-tuner-trigger,
  .view-tuner__drawer,
  .view-tuner__option,
  .button,
  .hero-mode-button,
  .level-tab,
  .proof-list li,
  .mode-controls li,
  .dly-demo,
  .dly-demo__chip,
  .dly-seg,
  .dly-seg__btn,
  .dly-tilpass,
  .dly-rotate,
  .dly-adapt-toggle,
  .dly-nav,
  .dly-nav__tab,
  .dly-readaloud,
  .dly-card,
  .dly-list,
  .dly-routine,
  .dly-contact,
  .dly-stotte__action {
    border: 1px solid CanvasText;
  }

  /* The device bezel / screen still need to read as a physical edge. */
  .phone-frame,
  .phone-screen,
  .tablet-frame,
  .tablet-screen,
  .dly-frame__bezel,
  .dly-frame__screen {
    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"],
  .dly-seg__btn--active,
  .dly-adapt-toggle--on,
  .dly-nav__tab--active,
  .dly-demo__chip--active,
  .level-tab[aria-pressed="true"],
  .hero-mode-button[aria-pressed="true"],
  .day-card.now,
  .dly-card--now {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* The polite live region must remain hidden (not surfaced) in HC mode. */
  .dly-demo__live,
  .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,
  .analog-clock,
  .symbol-tile,
  .symbol-tile img,
  .dly-symbol,
  .dly-symbol img,
  .dly-clock,
  .dly-frame__cam,
  .phone-island,
  .phone-island-cam {
    forced-color-adjust: none;
  }

  /* The orange "now/active" progress bar conveys meaning via fill width; keep
     it visible against the forced background. */
  .day-progress {
    border: 1px solid CanvasText;
  }
  .day-progress span {
    background: Highlight;
    forced-color-adjust: none;
  }
}

/* ===========================================================================
   CROSS-BROWSER SAFETY NET  (DoD §12.2) — additive, @supports-guarded only.
   Composed last; modern Edge/Chrome/Firefox match none of these queries.
   =========================================================================== */

/* --- backdrop-filter: ship the -webkit- pairing where only the prefixed form
 * is recognised. Standards engines (Edge/Chrome/FF) already honour the
 * unprefixed property set by staticStylesBase.ts / demoStylesPart2.ts; this is
 * a no-op for them and a safety net for prefixed-only engines. The a11y layer
 * still owns the OPAQUE fallback for the no-blur-at-all case, so legibility is
 * guaranteed either way. Additive: same translucent backgrounds, just blurred
 * on more engines. */
@supports ((-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px)))) {
  .site-header {
    -webkit-backdrop-filter: saturate(160%) blur(12px);
  }
  .phone-nav {
    -webkit-backdrop-filter: saturate(160%) blur(8px);
  }
  .dly-nav {
    -webkit-backdrop-filter: saturate(1.4) blur(6px);
  }
}

/* --- Bare container-query lengths: a few decorative sizes use a raw `Ncqmin`
 * with NO clamp() px floor (the Dynamic-Island pill and the demo symbol art).
 * In an engine without container-query length units those resolve to 0 and the
 * element vanishes. The frame is already sized in px/vw, so a fixed px size for
 * the inner art keeps the device shell believable. This block applies ONLY when
 * cqmin is unsupported; supporting engines keep the fluid container sizing. */
@supports not (width: 1cqmin) {
  /* Dynamic Island pill (portrait) — demoStylesPart1.ts: width:30cqmin / height:8cqmin */
  .dly-frame__island {
    width: 92px;
    height: 24px;
  }
  /* Dynamic Island (landscape) — demoStylesPart1.ts: width:8cqmin / height:26cqmin */
  .dly-frame--landscape .dly-frame__island {
    width: 24px;
    height: 92px;
  }
  /* Demo symbol art — demoStylesPart3.ts: .dly-symbol--xl uses
   * min(calc(var(--u)*18), 70cqmin). --u already has a 3.4px static fallback in
   * demoStylesPart1.ts, so calc(var(--u)*18) ≈ 61px is a sane size; pin the
   * min() ceiling to px so the second operand can never collapse the symbol to
   * 0 without cqmin. */
  .dly-symbol--xl {
    width: min(calc(var(--u) * 18), 200px);
    height: min(calc(var(--u) * 18), 200px);
  }
}