@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-scheme: light;
  --maxw: 1180px;
  font-family: var(--font-sans, system-ui), -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 1600px) { :root { --maxw: 1320px; } }
* { box-sizing: border-box; }
/* No element may force a horizontal scrollbar: a stray wide band, an
   over-long word or a fixed-width media must never widen the page past the
   viewport (this was the live mobile "nav wrapping / sideways scroll" symptom).
   overflow-x: clip keeps sticky/position layout intact (unlike hidden). */
html, body { max-width: 100%; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
/* Replaced media never overflows its column on small screens. */
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
/* Headings and the wordmark carry the display face; the design's tight optical
   tracking comes with it. Body copy stays in Atkinson at tracking 0. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--font-tracking-tight, -0.02em);
}
h1 { font-weight: 800; }



: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; }
}


/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 7vw, 92px) clamp(20px, 5vw, 64px);
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none;
}
.hero-inner { max-width: var(--maxw); }
.hero-copy { max-width: 820px; }
.eyebrow {
  margin: 0 0 var(--space-3, 14px);
  color: var(--color-brandStrong);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--font-size-xs, 0.78rem);
  letter-spacing: var(--font-tracking-caps, 0.08em);
}
h1 { margin: 0; font-size: var(--font-size-display, clamp(2.6rem, 1.7rem + 4vw, 4.4rem)); line-height: var(--font-leading-tight, 1.05); letter-spacing: var(--font-tracking-tight, -0.02em); color: var(--color-navy); overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.intro { margin: var(--space-5, 22px) 0 0; color: var(--color-inkMuted); font-size: var(--font-size-lg, 1.1875rem); line-height: var(--font-leading-normal, 1.6); max-width: 580px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); margin-top: var(--space-6, 32px); }
/* Hero keeps ONE strong primary CTA; the secondary is a quiet inline jump link,
   not a competing button. */
/* =========================================================================
   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); }


.proof-list { display: flex; flex-wrap: wrap; gap: var(--space-2, 10px); padding: 0; margin: var(--space-7, 40px) 0 0; list-style: none; }
.proof-list li {
  border: 1px solid var(--color-lineStrong);
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-pill);
  padding: 9px 15px;
  font-weight: 600;
  color: var(--color-navy);
  font-size: var(--font-size-sm, 0.9rem);
}
.proof-list li::before { content: "✓ "; color: var(--color-doneInk); font-weight: 800; }

/* Main content establishes its own stacking context. */
main { position: relative; z-index: 1; }


/* Bands — vertical rhythm driven by the token spacing scale (--space-section,
   --space-gutter from lib/tokens.ts) so every band shares one cadence. */
.band { padding: var(--space-section, clamp(56px, 8vw, 120px)) var(--space-gutter, clamp(20px, 5vw, 56px)); }
.band-inner { max-width: var(--maxw); margin: 0 auto; }
.band-policy { background: var(--color-surface); border-top: 1px solid var(--color-line); }

/* Download and evaluation */
.download-hero { padding: clamp(64px, 9vw, 112px) var(--space-gutter, clamp(20px, 5vw, 56px)) clamp(40px, 6vw, 72px); background: linear-gradient(145deg, var(--color-cream), var(--color-surface)); }
.download-hero__copy { max-width: 820px; margin: 0 auto; text-align: center; }
.download-hero h1 { margin: 0; color: var(--color-navy); font-size: clamp(2.6rem, 7vw, 5.25rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.download-hero .intro { max-width: 700px; margin: 24px auto 0; }
.download-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.download-proof li { padding: 9px 15px; border: 1px solid var(--color-lineStrong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-navy); font-weight: 700; }
.download-platforms { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-gutter, clamp(20px, 5vw, 56px)) clamp(64px, 9vw, 112px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); }
.download-platform { min-width: 0; padding: clamp(26px, 4vw, 42px); border: 1px solid var(--color-lineStrong); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.download-platform__eyebrow { margin: 0 0 10px; color: var(--color-brandStrong); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.download-platform h2 { margin: 0; color: var(--color-navy); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.download-platform__action { align-self: flex-start; margin-top: 26px; }
.download-platform__action[aria-disabled="true"] { cursor: not-allowed; opacity: .72; }
.download-platform__note { color: var(--color-inkMuted); line-height: 1.6; margin: 22px 0; }
.download-platform__store { display: grid; gap: 4px; margin: auto 0 0; padding: 18px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.download-platform__store span { color: var(--color-inkMuted); font-size: .86rem; }
.download-platform__store strong { color: var(--color-navy); }
.download-metadata { display: grid; gap: 0; margin: 18px 0 0; font-size: .86rem; }
.download-metadata div { display: grid; grid-template-columns: minmax(90px, .34fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-line); }
.download-metadata dt { color: var(--color-inkMuted); font-weight: 700; }
.download-metadata dd { margin: 0; min-width: 0; color: var(--color-navy); overflow-wrap: anywhere; }
.download-metadata--pending { color: var(--color-inkMuted); line-height: 1.55; }
.download-chain { padding: clamp(56px, 8vw, 96px) var(--space-gutter, clamp(20px, 5vw, 56px)); background: var(--color-navy); color: var(--color-onInk); text-align: center; }
.download-chain > .eyebrow { color: inherit; }
.download-chain h2 { color: inherit; margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); }
.download-chain ol { max-width: var(--maxw); margin: 42px auto 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; counter-reset: chain; }
.download-chain li { min-width: 0; padding: 22px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-lg); display: grid; gap: 8px; counter-increment: chain; }
.download-chain li::before { content: counter(chain); width: 30px; height: 30px; margin: 0 auto 4px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brandDeep); color: white; font-weight: 800; }
.download-chain li span { color: #d6e0fb; line-height: 1.45; font-size: .9rem; }
.download-chain__build { margin: 28px auto 0; color: #d6e0fb; overflow-wrap: anywhere; }
.download-chain__build code { color: white; }
@media (max-width: 760px) { .download-platforms { grid-template-columns: 1fr; } .download-chain ol { grid-template-columns: 1fr; } .download-chain li { grid-template-columns: auto 1fr; text-align: left; align-items: center; } .download-chain li::before { grid-row: 1 / 3; margin: 0; } }

.band-head { max-width: 760px; margin: 0 0 var(--space-7, 48px); }
.band-head h2 {
  margin: 0;
  font-size: var(--font-size-h2, clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem));
  line-height: var(--font-leading-tight, 1.12);
  letter-spacing: var(--font-tracking-tight, -0.02em);
  color: var(--color-navy);
  /* balance beats hyphenation for two-line display headings: overflow-wrap
     anywhere + hyphens auto used to split words mid-stem ("In-genting").
     break-word still guarantees no overflow at 320px, it just waits until a
     word truly cannot fit. */
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
.band-lead { margin: var(--space-4, 16px) 0 0; color: var(--color-inkMuted); font-size: var(--font-size-lg, 1.1875rem); line-height: var(--font-leading-normal, 1.55); }

/* Mode / feature / trust / story grids */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--color-nextInk); font-size: 0.95rem; line-height: 1.45; }
/* Fixed-width marker box keeps every line's text aligned to one hanging indent
   (consistent with .policy-pill). The check is drawn as a bordered box + glyph
   so it survives Høy kontrast / forced-colors, not colour-only. */
.check-list li::before {
  content: "✓";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--color-doneInk);
  border-radius: 6px;
  color: var(--color-doneInk);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
}
@media (forced-colors: active) {
  .check-list li::before { border-color: CanvasText; color: CanvasText; }
  .view-tuner__option[aria-pressed="true"] .view-tuner__option-check { background: Highlight; color: HighlightText; }
  .view-tuner__option[aria-pressed="true"] { border-color: Highlight; }
}

/* Supporting page sections */
.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5, 24px); padding: 0 var(--space-gutter, clamp(20px, 5vw, 56px)) clamp(40px, 6vw, 72px); max-width: var(--maxw); margin: 0 auto; }
.content-card { border: 1px solid var(--color-lineStrong); border-radius: var(--radius-lg); padding: 28px; background: var(--color-surface); }
.content-card h2 { margin: 0 0 12px; font-size: 1.25rem; color: var(--color-navy); }
.content-card p { margin: 0; color: var(--color-inkMuted); line-height: 1.6; }
.content-card ul { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.content-card ul li { background: var(--color-toneBlue); color: var(--color-navy); font-weight: 600; border-radius: var(--radius-pill); padding: 6px 12px; font-size: 0.86rem; }

/* Privacy policy */
.policy-row { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); padding: 0; margin: 0 0 var(--space-6, 32px); list-style: none; }
.policy-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--color-lineStrong);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy);
}
.policy-pill > span:last-child { min-width: 0; }
.policy-pill-icon { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--color-doneInk); }
.policy-pill-icon svg { width: 20px; height: 20px; }
.policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 24px); min-width: 0; }
.policy-card { width: 100%; min-width: 0; border: 1px solid var(--color-lineStrong); border-radius: var(--radius-lg); background: var(--color-surface); padding: clamp(20px, 5vw, 28px); }
.policy-card h2 { margin: 0 0 12px; font-size: 1.25rem; color: var(--color-navy); display: flex; align-items: center; gap: 10px; }
/* The icon is decorative — the heading text carries the meaning — so it is
   aria-hidden and sized to sit on the cap height rather than lead the line. */
.policy-card__icon { flex: none; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-toneBlue); color: var(--color-navy); }
.policy-card__icon svg { width: 18px; height: 18px; }
.policy-card__link { margin-top: 16px; }
.policy-card p { margin: 0; color: var(--color-inkMuted); line-height: 1.6; }
.policy-card .check-list { margin-top: 16px; }
.policy-disclosure { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.policy-disclosure > strong { color: var(--color-navy); line-height: 1.35; }
.policy-disclosure > span { min-width: 0; }

/* Footer */
footer { background: var(--color-surface); border-top: 1px solid var(--color-line); padding: clamp(40px, 5vw, 64px) var(--space-gutter, clamp(20px, 5vw, 56px)); }

/* Mid-desktop (≈1025–1480px): tighten the header gap, nav column-gap and nav
   font just enough that the 4 links + the Meny/Tilpass-visning trigger stay on
   ONE row. Above this the default generous spacing applies. */
@media (max-width: 1024px) {
  .section-grid, .policy-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 0; }
  .hero { padding-top: 28px; gap: 24px; }
  .section-grid, .policy-grid { grid-template-columns: 1fr; }
  .actions { width: 100%; }
  .actions .btn { flex: 1; }
}
/* --maxw at >= 1600px now lives in staticStylesBase.ts,
   because that block is re-emitted after this one and used to overwrite it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
@media (prefers-contrast: more) {
  .proof-list li, .band-lead { color: var(--color-navy); }
}


/* Subscription and sales terms — a calm purchase overview followed by one
   continuous, readable legal document. */
.subscription-hero {
  padding: clamp(56px, 8vw, 112px) var(--space-gutter, clamp(20px, 5vw, 56px)) clamp(48px, 7vw, 88px);
  background:
    linear-gradient(110deg, rgba(255,251,245,0.96), rgba(247,238,225,0.78)),
    var(--color-cream);
  border-bottom: 1px solid var(--color-line);
}
.subscription-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, 0.94fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.subscription-hero__copy { max-width: 680px; }
.subscription-hero h1 {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--color-navy);
  font-size: var(--font-size-h1, clamp(2.8rem, 2rem + 3.2vw, 5.2rem));
  line-height: 0.98;
  letter-spacing: var(--font-tracking-tight, -0.03em);
  text-wrap: balance;
}
.subscription-hero__lead {
  max-width: 620px;
  margin: var(--space-6, 32px) 0 0;
  color: var(--color-inkMuted);
  font-size: var(--font-size-lg, 1.1875rem);
  line-height: 1.6;
}
.subscription-hero .actions { margin-top: var(--space-6, 32px); }
.subscription-hero__license {
  max-width: 620px;
  margin: var(--space-5, 24px) 0 0;
  padding-left: 16px;
  border-left: 4px solid var(--color-doneInk);
  color: var(--color-nextInk);
  line-height: 1.55;
}
.subscription-hero__license strong { display: block; color: var(--color-navy); }
.subscription-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--color-lineStrong);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.82);
  box-shadow: var(--shadow-md);
}
.subscription-plan {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--color-lineStrong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.subscription-plan--featured { border: 2px solid var(--color-brandDeep); }
.subscription-plan__flag {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-tonePeach);
  color: var(--color-brandDeep);
  font-size: 0.76rem;
  font-weight: 800;
}
.subscription-plan h2 { margin: 0; color: var(--color-navy); font-size: 1.05rem; }
.subscription-plan__price { margin: 12px 0 0; color: var(--color-navy); font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.05; }
.subscription-plan__price span { display: block; margin-top: 6px; color: var(--color-inkMuted); font-size: 0.82rem; font-weight: 650; }
.subscription-plan__note { margin: 16px 0 0; color: var(--color-inkMuted); font-size: 0.9rem; line-height: 1.5; }
.subscription-plans__foot { grid-column: 1 / -1; margin: 2px 4px 0; color: var(--color-inkMuted); font-size: 0.86rem; line-height: 1.5; }

.subscription-trust { padding: 0 var(--space-gutter, clamp(20px, 5vw, 56px)); background: var(--color-navy); color: var(--color-onInk); }
.subscription-trust ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.subscription-trust li { display: grid; gap: 5px; min-width: 0; padding: 24px clamp(18px, 3vw, 36px); border-left: 1px solid rgba(255,255,255,0.18); }
.subscription-trust li:last-child { border-right: 1px solid rgba(255,255,255,0.18); }
.subscription-trust strong { color: #fff; font-size: 1rem; }
.subscription-trust span { color: #cbd5f2; font-size: 0.88rem; line-height: 1.45; }

.subscription-provider { padding: clamp(56px, 8vw, 96px) var(--space-gutter, clamp(20px, 5vw, 56px)); background: var(--color-surface); }
.subscription-provider__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr); gap: clamp(36px, 6vw, 80px); align-items: end; max-width: var(--maxw); margin: 0 auto; }
.subscription-provider h2 { max-width: 600px; margin: 10px 0 18px; color: var(--color-navy); font-size: var(--font-size-h2, clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem)); line-height: 1.12; text-wrap: balance; }
.subscription-provider p { max-width: 620px; margin: 0; color: var(--color-inkMuted); line-height: 1.65; }
.subscription-provider__channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.subscription-provider__channels li { display: grid; align-content: start; gap: 6px; min-height: 118px; padding: 20px; border: 1px solid var(--color-lineStrong); border-top: 4px solid var(--color-brandDeep); border-radius: var(--radius-lg); background: var(--color-surface); }
.subscription-provider__channels strong { color: var(--color-navy); }
.subscription-provider__channels span { color: var(--color-inkMuted); font-size: 0.88rem; line-height: 1.45; }

.terms-shell { padding: clamp(56px, 8vw, 104px) var(--space-gutter, clamp(20px, 5vw, 56px)); border-top: 1px solid var(--color-line); background: #f8f4ed; }
.terms-shell__inner { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 790px); gap: clamp(36px, 6vw, 84px); align-items: start; justify-content: center; max-width: var(--maxw); margin: 0 auto; }
.terms-nav { position: sticky; top: 108px; min-width: 0; }
.terms-nav__eyebrow { margin: 0 0 8px; color: var(--color-brandStrong); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.terms-nav h2 { margin: 0; color: var(--color-navy); font-size: 1.45rem; line-height: 1.22; }
.terms-nav ol { display: grid; gap: 2px; margin: 24px 0 0; padding: 0; list-style: none; }
.terms-nav a { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; min-height: 44px; padding: 10px 8px; border-radius: 10px; color: var(--color-nextInk); font-size: 0.9rem; font-weight: 650; line-height: 1.35; text-decoration: none; }
.terms-nav a:hover { background: rgba(255,255,255,0.72); color: var(--color-navy); }
.terms-nav a span { color: var(--color-brandStrong); font-variant-numeric: tabular-nums; }
.terms-nav__help { display: grid; gap: 5px; margin-top: 26px; padding: 18px; border: 1px solid var(--color-lineStrong); border-radius: var(--radius-md); background: rgba(255,255,255,0.68); color: var(--color-navy); font-size: 0.9rem; }
.terms-nav__help a { display: inline; min-height: 0; padding: 0; color: var(--color-brandStrong); text-decoration: underline; text-underline-offset: 3px; }
.terms-document { min-width: 0; overflow: hidden; border: 1px solid var(--color-lineStrong); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.terms-document__head { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--color-line); background: linear-gradient(135deg, #fff, #fff8ef); }
.terms-document__head h2 { margin: 8px 0 0; color: var(--color-navy); font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.12; }
.terms-version { display: grid; flex: none; gap: 4px; margin: 0; text-align: right; }
.terms-version span { color: var(--color-inkMuted); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.terms-version strong { color: var(--color-navy); font-size: 0.9rem; }
.terms-article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: clamp(18px, 3vw, 30px); padding: clamp(28px, 4vw, 48px); scroll-margin-top: 100px; }
.terms-article + .terms-article { border-top: 1px solid var(--color-line); }
.terms-article__number { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--color-lineStrong); border-radius: 50%; color: var(--color-brandStrong); font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.terms-article__content { min-width: 0; }
.terms-article h2 { margin: 4px 0 16px; color: var(--color-navy); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; text-wrap: balance; }
.terms-article p { margin: 0; color: var(--color-nextInk); font-size: 1rem; line-height: 1.72; }
.terms-article ul { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.terms-article li { position: relative; padding-left: 26px; color: var(--color-inkMuted); line-height: 1.58; }
.terms-article li::before { content: ""; position: absolute; left: 2px; top: 0.68em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-doneInk); }

.subscription-contact { display: flex; justify-content: space-between; gap: 36px; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--space-gutter, clamp(20px, 5vw, 56px)); }
.subscription-contact > div:first-child { max-width: 700px; }
.subscription-contact h2 { margin: 10px 0 14px; color: var(--color-navy); font-size: var(--font-size-h2, clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem)); line-height: 1.12; text-wrap: balance; }
.subscription-contact p { margin: 0; color: var(--color-inkMuted); line-height: 1.6; }
.subscription-contact .actions { flex: none; }

@media (max-width: 980px) {
  .subscription-hero__inner, .subscription-provider__inner { grid-template-columns: 1fr; }
  .subscription-hero__copy { max-width: 760px; }
  .subscription-plans { max-width: 720px; }
  .terms-shell__inner { grid-template-columns: 1fr; }
  .terms-nav { position: static; }
  .terms-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms-nav__help { max-width: 420px; }
}

@media (max-width: 700px) {
  .subscription-hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .subscription-plans, .subscription-provider__channels, .subscription-trust ul { grid-template-columns: 1fr; }
  .subscription-trust li, .subscription-trust li:last-child { border-right: 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .subscription-trust li:last-child { border-bottom: 0; }
  .subscription-provider__channels li { min-height: 0; }
  .terms-nav ol { grid-template-columns: 1fr; }
  .terms-document__head { display: grid; align-items: start; }
  .terms-version { text-align: left; }
  .terms-article { grid-template-columns: 1fr; }
  .subscription-contact { display: grid; }
  .subscription-contact .actions { justify-self: start; }
}

@media (max-width: 390px) {
  .subscription-hero, .subscription-provider, .terms-shell, .subscription-contact { padding-left: 18px; padding-right: 18px; }
  .subscription-plans { padding: 12px; }
  .subscription-plan { padding: 20px; }
  .subscription-hero .actions, .subscription-contact .actions { display: grid; grid-template-columns: 1fr; }
  .subscription-hero .btn, .subscription-contact .btn { width: 100%; }
  .terms-document__head, .terms-article { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .terms-nav a { scroll-behavior: auto; }
}

@media (forced-colors: active) {
  .subscription-plan--featured, .subscription-provider__channels li, .subscription-hero__license { border-color: Highlight; }
  .terms-article li::before { background: CanvasText; }
}


.calendar-integrations {
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-screenBg) 100%);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.calendar-integrations__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.calendar-integrations__copy { max-width: 620px; }
.calendar-integrations__boundary {
  margin: 14px 0 0;
  color: var(--color-navy);
  font-weight: 750;
}
.calendar-integrations__proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.calendar-provider-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  min-height: 100%;
  padding: 18px;
  border: 1px solid var(--color-lineStrong);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow-sm);
}
.calendar-provider-card__badge {
  width: fit-content;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-onInk);
  font-weight: 800;
  font-size: 0.82rem;
}
.calendar-provider-card h3 { margin: 0; font-size: 1.05rem; }
.calendar-provider-card p { margin: 0; color: var(--color-inkMuted); }
.calendar-provider-card__access {
  align-self: end;
  font-size: 0.9rem;
  color: var(--color-navy);
  font-weight: 800;
}
.calendar-integrations__guardrails {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.calendar-integrations__guardrails li {
  padding: 14px 16px;
  border-left: 4px solid var(--color-brandDeep);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-weight: 750;
  color: var(--color-navy);
}
@media (max-width: 900px) {
  .calendar-integrations__inner,
  .calendar-integrations__proof,
  .calendar-integrations__guardrails {
    grid-template-columns: 1fr;
  }
}


: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;
}


/* =========================================================================
   BRUKSANVISNING — the printable, visual user manual
   ========================================================================= */

.bruk {
  --bruk-ink: var(--color-ink, #15203B);
  --bruk-muted: var(--color-inkMuted, #5A6178);
  --bruk-surface: var(--color-surface, #FFFFFF);
  --bruk-cream: var(--color-cream, #FFF7EC);
  --bruk-line: var(--color-line, #E6DDCC);
  --bruk-line-strong: var(--color-lineStrong, #D6CAB2);
  --bruk-brand: var(--color-brand, #E2611C);
  --bruk-brand-strong: var(--color-brandStrong, #C2470F);
  --bruk-focus: var(--color-focus, #0B5FD4);
  --bruk-now-bg: var(--color-nowBg, #FFF1E2);
  --bruk-now-ink: var(--color-nowInk, #9C4409);
  --bruk-next-bg: var(--color-nextBg, #EEF1F8);
  --bruk-next-ink: var(--color-nextInk, #33407A);
  --bruk-screen: var(--color-screenBg, #F4F6FB);

  display: block;
  box-sizing: border-box;
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 56px) var(--space-gutter, clamp(20px, 5vw, 56px)) var(--space-9, 88px);
  color: var(--bruk-ink);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  line-height: var(--font-leading-normal, 1.55);
}

/* ---- Hero ---------------------------------------------------------------- */
.bruk-hero {
  margin: 0 0 var(--space-7, 48px);
  padding: clamp(20px, 4vw, 40px);
  background: var(--gradient-warmField, linear-gradient(180deg, #FFF7EC 0%, #FBE9D4 100%));
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(21,32,59,0.07));
}
.bruk-eyebrow {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--font-tracking-caps, 0.08em);
  text-transform: uppercase;
  color: var(--bruk-brand-strong);
  overflow-wrap: anywhere;
}
.bruk-h1 {
  margin: 0 0 var(--space-3, 12px);
  font-size: var(--font-size-h1, clamp(2.25rem, 1.55rem + 3.1vw, 3.6rem));
  line-height: var(--font-leading-tight, 1.12);
  letter-spacing: var(--font-tracking-tight, -0.02em);
  color: var(--bruk-ink);
}
.bruk-intro {
  margin: 0 0 var(--space-5, 24px);
  max-width: 60ch;
  font-size: var(--font-size-lg, 1.1875rem);
  color: var(--bruk-muted);
  overflow-wrap: anywhere;
}

.bruk-nojs {
  box-sizing: border-box;
  margin: 0 0 var(--space-5, 24px);
  padding: var(--space-4, 16px);
  color: var(--bruk-ink);
  background: var(--bruk-next-bg);
  border: 2px solid var(--bruk-next-ink);
  border-radius: var(--radius-md, 16px);
}
.bruk-nojs h2 { margin: 0 0 6px; font-size: 1.25rem; }
.bruk-nojs p { margin: 0 0 12px; }
.bruk-nojs .bruk-format { width: fit-content; max-width: 100%; }

/* ---- Start here: task-led routes before the complete reference ----------- */
.bruk-paths {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
  margin: 0 0 var(--space-7, 48px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bruk-cream);
  background: color-mix(in srgb, var(--bruk-cream) 48%, var(--bruk-surface));
  border-radius: var(--radius-md, 16px);
}
.bruk-paths__head { max-width: 30ch; }
.bruk-paths__eyebrow {
  margin: 0 0 6px;
  color: var(--bruk-brand-strong);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bruk-paths__head h2 {
  margin: 0 0 8px;
  color: var(--bruk-ink);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.18;
}
.bruk-paths__head > p:not(.bruk-paths__eyebrow) {
  margin: 0;
  color: var(--bruk-muted);
  line-height: 1.55;
}
.bruk-paths__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 16px;
  padding: 9px 14px;
  color: var(--color-onBrand, #FFFFFF);
  background: var(--bruk-brand-strong);
  border-radius: var(--radius-control, 12px);
  font-weight: 800;
  text-decoration: none;
}
.bruk-paths__download:hover { background: var(--bruk-brand); }
.bruk-paths__download:focus-visible {
  outline: 3px solid var(--bruk-focus);
  outline-offset: 3px;
}
.bruk-paths__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bruk-paths__list li { min-width: 0; }
.bruk-paths__link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  color: var(--bruk-ink);
  background: var(--bruk-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-control, 12px);
  text-decoration: none;
  transition: border-color var(--motion-fast, 140ms) ease, box-shadow var(--motion-fast, 140ms) ease;
}
.bruk-paths__link:hover {
  border-color: var(--bruk-line-strong);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(21,32,59,0.08));
}
.bruk-paths__link:focus-visible {
  outline: 3px solid var(--bruk-focus);
  outline-offset: 3px;
}
.bruk-paths__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--bruk-brand-strong);
  background: var(--bruk-cream);
  border-radius: 10px;
}
.bruk-paths__symbol .bruk-sym { width: 24px; height: 24px; }
.bruk-paths__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.bruk-paths__copy strong { line-height: 1.25; }
.bruk-paths__copy span {
  color: var(--bruk-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}
.bruk-paths__arrow { color: var(--bruk-brand-strong); }

@media (max-width: 820px) {
  .bruk-paths { grid-template-columns: 1fr; }
  .bruk-paths__head { max-width: 58ch; }
}

@media (max-width: 560px) {
  .bruk-paths__list { grid-template-columns: 1fr; }
  .bruk-paths__link { min-height: 68px; }
}

/* ---- Print button — the shared .btn--secondary (one orange family, ONE
   control radius). It no longer ships a second solid orange fill: on the narrow
   bruksanvisning column this used to collide with the edition cards' orange. -- */
.bruk-print {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-height: 48px;
  min-width: 0;
  padding: 12px 18px;
  font: inherit;
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--bruk-ink);
  background: var(--bruk-surface);
  border: 1.5px solid var(--bruk-line-strong);
  border-radius: var(--radius-control, 12px);
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(21,32,59,0.07));
  transition: border-color var(--motion-fast, 140ms) ease, transform var(--motion-fast, 140ms) ease;
}
.bruk-print:hover { border-color: var(--bruk-brand-strong); }
.bruk-print:active { transform: translateY(1px); }
.bruk-print__ico { display: inline-flex; color: var(--bruk-brand-strong); }

/* ---- Table of contents --------------------------------------------------- */
.bruk-toc {
  margin: 0 0 var(--space-8, 64px);
  padding: clamp(16px, 3vw, 28px);
  background: var(--bruk-surface);
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(21,32,59,0.05));
}
.bruk-toc__heading {
  margin: 0 0 var(--space-4, 16px);
  font-size: var(--font-size-xl, 1.45rem);
  color: var(--bruk-ink);
}
.bruk-toc__intro {
  max-width: 62ch;
  margin: calc(var(--space-2, 8px) * -1) 0 var(--space-4, 16px);
  color: var(--bruk-muted);
}
.bruk-toc__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1, 4px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bruk-toc;
}
.bruk-toc__item {
  margin: 0;
  counter-increment: bruk-toc;
}
.bruk-toc__item a {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 10px);
  color: var(--bruk-ink);
  text-decoration: none;
  transition: background var(--motion-fast, 140ms) ease;
}
.bruk-toc__item a:hover { background: var(--bruk-cream); }
.bruk-toc__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-onBrand, #FFFFFF);
  background: var(--bruk-brand-strong);
  border-radius: var(--radius-pill, 999px);
}
.bruk-toc__num::before { content: counter(bruk-toc); }
.bruk-toc__label { font-weight: var(--font-weight-medium, 500); min-width: 0; overflow-wrap: anywhere; }
.bruk-toc__sym {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--bruk-brand-strong);
}
.bruk-toc__sym .bruk-sym--sm { width: 22px; height: 22px; }

/* ---- Categorised innholdsfortegnelse: named groups, not a flat 40-item list -- */
.bruk-toc__group { margin: 0; }
.bruk-toc__cat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
  font-size: var(--font-size-lg, 1.1875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--bruk-brand-strong);
}
.bruk-toc__group:first-child .bruk-toc__cat { margin-top: 0; }
.bruk-toc__cat-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 800;
  color: var(--color-onBrand, #FFFFFF);
  background: var(--bruk-brand-strong);
  border-radius: var(--radius-pill, 999px);
}
.bruk-toc__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1, 4px);
}

@media (min-width: 720px) {
  .bruk-toc__sublist { grid-template-columns: 1fr 1fr; gap: var(--space-2, 8px) var(--space-5, 24px); }
}

/* ---- Hero controls: edition switch + print ------------------------------- */
.bruk-hero__controls {
  display: block;
  max-width: 760px;
}

/* Edition switch (Bilde / Enkel / Full), styled like «Tilpass visning». */
.bruk-ed { display: grid; gap: var(--space-2, 8px); }
.bruk-ed__label {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--font-tracking-caps, 0.08em);
  text-transform: uppercase;
  color: var(--bruk-brand-strong);
}
/* Equal-height segmented cards: every edition tile stretches to the tallest. */
.bruk-ed__row { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: stretch; }
.bruk-ed__btn {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 8px 16px;
  font: inherit;
  text-align: left;
  color: var(--bruk-ink);
  background: var(--bruk-surface);
  border: 2px solid var(--bruk-line-strong);
  border-radius: var(--radius-control, 12px);
  cursor: pointer;
  transition: border-color var(--motion-fast, 140ms) ease, background var(--motion-fast, 140ms) ease;
}
.bruk-ed__btn:hover { border-color: var(--bruk-brand); }
.bruk-ed__name { font-weight: var(--font-weight-bold, 700); font-size: var(--font-size-base, 1rem); }
.bruk-ed__hint { font-size: var(--font-size-sm, 0.8rem); color: var(--bruk-muted); }
.bruk-ed__status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  min-width: 0;
  margin-right: auto;
  padding: 8px 12px 8px 8px;
  color: var(--bruk-next-ink);
  background: var(--bruk-next-bg);
  border: 1.5px solid color-mix(in srgb, var(--bruk-next-ink) 28%, var(--bruk-line));
  border-radius: var(--radius-control, 12px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.25;
}
.bruk-ed__status-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-onBrand, #FFFFFF);
  background: var(--bruk-next-ink);
  border-radius: 50%;
}
.bruk-ed__status-mark svg { display: block; }
.bruk-ed__utility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}
/* Selection conveyed by BOTH a filled tile AND aria-pressed (never colour-only). */
.bruk-ed__btn[aria-pressed="true"] {
  background: var(--bruk-brand-strong);
  border-color: var(--bruk-brand-strong);
  color: var(--color-onBrand, #FFFFFF);
}
.bruk-ed__btn[aria-pressed="true"] .bruk-ed__hint { color: var(--color-onBrand); }

/* ---- Search + downloads -------------------------------------------------- */
.bruk-tools {
  margin: 0 0 var(--space-7, 48px);
  padding: clamp(16px, 3vw, 28px);
  display: grid;
  gap: var(--space-5, 24px);
  background: var(--bruk-surface);
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(21,32,59,0.05));
}
.bruk-tools__heading,
.bruk-downloads__heading {
  margin: 0;
  font-size: var(--font-size-xl, 1.45rem);
  line-height: var(--font-leading-snug, 1.25);
  color: var(--bruk-ink);
}
.bruk-search {
  display: grid;
  gap: var(--space-2, 8px);
}
.bruk-search__label {
  font-weight: var(--font-weight-bold, 700);
  color: var(--bruk-ink);
}
.bruk-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2, 8px);
  align-items: stretch;
}
.bruk-search__input,
.bruk-search__clear,
.bruk-format {
  border-radius: var(--radius-control, 12px);
}
.bruk-search__input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  font: inherit;
  font-size: var(--font-size-base, 1rem);
  color: var(--bruk-ink);
  background: var(--bruk-surface);
  border: 1.5px solid var(--bruk-line-strong);
}
.bruk-search__input::placeholder { color: var(--bruk-muted); opacity: 1; }
.bruk-search__clear {
  min-width: 96px;
  min-height: 52px;
  padding: 0 18px;
  font: inherit;
  font-weight: var(--font-weight-bold, 700);
  color: var(--bruk-ink);
  background: var(--bruk-cream);
  border: 1.5px solid var(--bruk-line-strong);
  cursor: pointer;
}
.bruk-search__clear:disabled {
  cursor: not-allowed;
  color: var(--bruk-muted);
  opacity: 0.72;
}
.bruk-search__help,
.bruk-search__status,
.bruk-search__empty,
.bruk-format__meta {
  margin: 0;
  color: var(--bruk-muted);
  font-size: var(--font-size-sm, 0.875rem);
}
.bruk-search__status { font-weight: var(--font-weight-semibold, 600); }
.bruk-search__empty {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  color: var(--bruk-now-ink);
  background: var(--bruk-now-bg);
  border: 1px solid var(--bruk-now-ink);
  border-radius: var(--radius-control, 12px);
}
.bruk-downloads {
  display: grid;
  gap: var(--space-3, 12px);
  padding-top: var(--space-5, 24px);
  border-top: 1px solid var(--bruk-line);
}
.bruk-downloads__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3, 12px);
}
.bruk-format {
  min-width: 0;
  min-height: 72px;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  display: grid;
  align-content: center;
  gap: 4px;
  color: var(--bruk-ink);
  background: var(--bruk-cream);
  border: 1.5px solid var(--bruk-line-strong);
  text-decoration: none;
}
.bruk-format--link {
  background: var(--bruk-surface);
  cursor: pointer;
}
.bruk-format--link:hover { border-color: var(--bruk-brand-strong); }
.bruk-format__title {
  font-weight: var(--font-weight-bold, 700);
  color: var(--bruk-ink);
}

@media (max-width: 560px) {
  .bruk-search__row,
  .bruk-downloads__list {
    grid-template-columns: 1fr;
  }
  .bruk-search__clear { width: 100%; }
  .bruk-ed__row { display: grid; grid-template-columns: 1fr; width: 100%; }
  .bruk-ed__btn { width: 100%; }
}

/* Keep the current-edition marker and the PDF action together when there is
   room. They only stack below the point where their labels would otherwise
   wrap or become smaller than a usable control. */
@media (max-width: 420px) {
  .bruk-ed__utility-row { flex-wrap: nowrap; gap: 6px; }
  .bruk-ed__status {
    flex: 0 1 auto;
    gap: 5px;
    min-height: 44px;
    padding: 7px;
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .bruk-ed__status-mark { width: 24px; height: 24px; }
  .bruk-print {
    flex: 1 1 0;
    min-height: 44px;
    padding: 8px 7px;
    gap: 4px;
    font-size: 0.75rem;
    letter-spacing: -0.015em;
    line-height: 1.1;
    white-space: nowrap;
  }
  .bruk-print__ico svg { width: 16px; height: 16px; }
}

@media (max-width: 340px) {
  .bruk-ed__utility-row { flex-wrap: wrap; }
  .bruk-ed__status,
  .bruk-print { width: 100%; }
}

/* ---- Hurtigkort ---------------------------------------------------------- */
.bruk-quick-card {
  width: min(100%, 500px);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 20px);
  color: var(--bruk-ink);
  background: linear-gradient(145deg, var(--bruk-cream), var(--bruk-surface));
  border: 1.5px solid var(--bruk-line-strong);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(21,32,59,0.05));
}
.bruk-quick-card__lead {
  margin: 0 0 14px;
  color: var(--bruk-muted);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.42;
  text-align: center;
}
.bruk-quick-card__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bruk-quick-card__item {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 66px;
  padding: 10px;
  background: var(--bruk-surface);
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-control, 12px);
}
.bruk-quick-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-onBrand, #FFFFFF);
  background: var(--bruk-brand-strong);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
}
.bruk-quick-card__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--bruk-brand-strong);
  background: var(--bruk-cream);
  border-radius: 10px;
}
.bruk-quick-card__symbol .bruk-sym { width: 24px; height: 24px; }
.bruk-quick-card__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.18;
}
.bruk-quick-card__copy strong { font-size: 0.94rem; overflow-wrap: anywhere; }
.bruk-quick-card__copy span { color: var(--bruk-muted); font-size: 0.75rem; overflow-wrap: anywhere; }

@media (max-width: 400px) {
  .bruk-quick-card__list { grid-template-columns: 1fr; }
}

/* ---- Chapters ------------------------------------------------------------ */
.bruk-chapters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-7, 48px);
  counter-reset: bruk-chapter;
}

/* Part divider that opens each named section of the manual (screen). */
.bruk-part {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  scroll-margin-top: 104px;
  padding: clamp(22px, 4vw, 38px);
  background: var(--bruk-cream, #FFF7EC);
  border-left: 8px solid var(--bruk-brand-strong, #C24E12);
  border-radius: var(--radius-md, 16px);
}
.bruk-part__eyebrow {
  margin: 0 0 8px;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bruk-brand-strong, #C24E12);
}
.bruk-part__title {
  margin: 0 0 10px;
  font-size: var(--font-size-2xl, 1.75rem);
  line-height: 1.12;
  color: var(--bruk-ink);
  overflow-wrap: anywhere;
}
.bruk-part__intro {
  margin: 0;
  max-width: 56ch;
  font-size: var(--font-size-lg, 1.1875rem);
  line-height: 1.55;
  color: var(--bruk-muted);
  overflow-wrap: anywhere;
}

.bruk-ch {
  scroll-margin-top: 104px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: clamp(20px, 3vw, 36px);
  background: var(--bruk-surface);
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(21,32,59,0.07));
  counter-increment: bruk-chapter;
}
.bruk-ch:focus-visible,
.bruk-part:focus-visible {
  outline: 4px solid var(--bruk-focus);
  outline-offset: 4px;
}

.bruk-ch__head {
  display: flex;
  gap: var(--space-3, 12px);
  align-items: center;
  margin: 0 0 var(--space-4, 16px);
  min-width: 0;
}
.bruk-ch__sym {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-onBrand, #FFFFFF);
  background: var(--gradient-brand, linear-gradient(135deg, #E2611C 0%, #C2470F 100%));
  border-radius: var(--radius-lg, 22px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(21,32,59,0.07));
}
.bruk-ch__sym .bruk-sym--sm { width: 30px; height: 30px; }
.bruk-ch__title {
  margin: 0;
  min-width: 0;
  font-size: var(--font-size-h2, clamp(1.55rem, 1.15rem + 1.7vw, 2.3rem));
  line-height: var(--font-leading-snug, 1.25);
  letter-spacing: var(--font-tracking-tight, -0.02em);
  color: var(--bruk-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bruk-ch__num { color: var(--bruk-brand-strong); }
.bruk-ch__num::before { content: counter(bruk-chapter) "."; }

.bruk-ch__shape { box-sizing: border-box; min-width: 0; }
.bruk-ch__lead {
  margin: 0 0 var(--space-4, 16px);
  font-size: var(--font-size-lg, 1.1875rem);
  color: var(--bruk-ink);
  overflow-wrap: anywhere;
}
.bruk-ch__steps {
  margin: 0 0 var(--space-5, 24px);
  padding-left: 0;
  list-style: none;
  counter-reset: bruk-step;
  display: grid;
  gap: var(--space-3, 12px);
}
.bruk-ch__steps li {
  position: relative;
  padding-left: 38px;
  color: var(--bruk-ink);
  counter-increment: bruk-step;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bruk-ch__steps li::before {
  content: counter(bruk-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-onBrand, #FFFFFF);
  background: var(--bruk-brand);
  border-radius: 50%;
}

/* Full-shape illustration. Figures never exceed the column width so a 320px
   viewport reflows without a horizontal scrollbar (WCAG 1.4.10). */
.bruk-ch__figure { margin: 0; display: grid; gap: var(--space-3, 12px); justify-items: center; max-width: 100%; }
.bruk-ch__figure > * { max-width: 100%; }
.bruk-ch__figure figcaption {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--bruk-muted);
  text-align: center;
  max-width: 46ch;
}
.bruk-ch__figure-kind { color: var(--bruk-ink); font-weight: 800; }
.bruk-ch__figure > [role="img"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.bruk-ch__figure > [role="img"] > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bruk-ch__figure > [role="img"] > * > * { min-width: 0; overflow-wrap: anywhere; }

/* Editorial orientation photos make the first two chapters feel human while
   still keeping the real Dagly screen visible inside the tablet. They are one
   clear visual each, so their chapter headers intentionally do not repeat a
   second unrelated pictogram. */
.bruk-ch__head--feature-photo .bruk-ch__sym { display: none; }
.bruk-manual-photo {
  position: relative;
  width: min(100%, 720px);
  overflow: hidden;
  background: var(--bruk-cream);
  border: 1.5px solid var(--bruk-line-strong);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(21,32,59,0.07));
}
.bruk-manual-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.bruk-manual-photo .bruk-visual-kind {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
}

/* Full shape lays out as text + illustration from a comfortable width. */
.bruk-ch__shape--full { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: start; }
.bruk-ch__shape--simple {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}
.bruk-ch__copy { min-width: 0; max-width: 68ch; }
@media (min-width: 880px) {
  .bruk-ch__shape--full,
  .bruk-ch__shape--simple {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    align-items: center;
  }
  .bruk-ch__shape--full .bruk-ch__copy,
  .bruk-ch__shape--simple .bruk-ch__copy { grid-column: 1; }
  .bruk-ch__shape--full .bruk-ch__copy .bruk-ch__steps,
  .bruk-ch__shape--simple .bruk-ch__copy .bruk-ch__steps { margin-bottom: 0; }
  .bruk-ch__shape--full .bruk-ch__figure,
  .bruk-ch__shape--simple .bruk-ch__figure { grid-column: 2; grid-row: 1; }
}

/* Picture shape: one big symbol + a read-aloud caption. */
.bruk-ch__shape--picture { display: grid; justify-items: center; gap: var(--space-4, 16px); text-align: center; }
.bruk-ch__shape--picture .bruk-ch__figure { width: 100%; }
.bruk-ch__bigsym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 30vw, 168px);
  height: clamp(120px, 30vw, 168px);
  color: var(--bruk-brand-strong);
  background: var(--color-tonePeach, #FCEDE0);
  box-shadow: inset 0 0 0 2px var(--bruk-line-strong);
  border-radius: var(--radius-xl, 30px);
}

/* On the narrowest phones (≈320px) trim side padding so the column reflows
   without a horizontal scrollbar (WCAG 1.4.10). */
@media (max-width: 360px) {
  .bruk { padding-left: 16px; padding-right: 16px; }
  .bruk-eyebrow { font-size: 0.75rem; letter-spacing: 0.04em; }
  .bruk-ch { padding-left: 16px; padding-right: 16px; }
  .bruk-hero,
  .bruk-paths,
  .bruk-tools,
  .bruk-toc { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 560px) {
  .bruk-ch__figure > [role="img"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .bruk-paths *,
  .bruk-tools *,
  .bruk-toc * { overflow-wrap: anywhere; }
}

html[data-a11y~="large"] .bruk-ch__shape--full,
html[data-a11y~="large"] .bruk-paths {
  grid-template-columns: minmax(0, 1fr);
}
html[data-a11y~="large"] .bruk-ch__copy { max-width: 64ch; }

/* ---- Per-chapter pictogram (inline decorative SVG) ----------------------- */
.bruk-sym { display: inline-flex; align-items: center; justify-content: center; }
.bruk-sym svg { display: block; width: 100%; height: 100%; }
.bruk-sym--sm { width: 26px; height: 26px; }
.bruk-sym--lg { width: 64%; height: 64%; }

/* ---- Edition gating: show only the selected edition's chapters/shapes ----
   The page renders every chapter + all shapes once; CSS reveals exactly the
   chapters included in the selected edition and the right shape for each.
   Default (no attribute yet) behaves as Full. */
.bruk-ch__shape { display: none; }
[data-manual-edition="bilde"] .bruk-ch:not([data-ed-bilde]),
[data-manual-edition="enkel"] .bruk-ch:not([data-ed-enkel]),
[data-manual-edition="full"]  .bruk-ch:not([data-ed-full]) { display: none; }
[data-manual-edition="bilde"] .bruk-toc__item:not([data-ed-bilde]),
[data-manual-edition="enkel"] .bruk-toc__item:not([data-ed-enkel]),
[data-manual-edition="full"]  .bruk-toc__item:not([data-ed-full]) { display: none; }
.bruk-ch[data-search-hidden="1"],
.bruk-toc__item[data-search-hidden="1"] { display: none !important; }
[data-manual-edition="bilde"] .bruk-ch[data-ed-bilde="picture"] .bruk-ch__shape--picture,
[data-manual-edition="enkel"] .bruk-ch[data-ed-enkel="simple"] .bruk-ch__shape--simple,
[data-manual-edition="full"]  .bruk-ch .bruk-ch__shape--full { display: grid; }
/* Bilde already leads with one clear illustration or app screen. Keeping the
   small header pictogram beside it repeats the same idea (especially in
   «Om denne bruksanvisningen»), so reserve that header treatment for text-led
   editions. The title remains the visible and semantic chapter heading. */
[data-manual-edition="bilde"] .bruk-ch__head .bruk-ch__sym { display: none; }
/* No saved attribute = Full default. */
.bruk:not([data-manual]) .bruk-ch__shape--full,
html:not([data-manual-edition]) .bruk-ch__shape--full { display: grid; }


/* =========================================================================
   ILLUSTRATIONS — screens, ASK tiles, calendar
   ========================================================================= */

/* Provenance is visible, not inferred from a decorative device frame.
   Explanatory diagrams use this neutral, content-sized illustration canvas
   and can grow at 200% text. */
.bruk-visual-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  max-width: 100%;
  padding: 5px 10px;
  color: var(--bruk-next-ink);
  background: var(--bruk-next-bg);
  border: 1px solid var(--bruk-line-strong);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.bruk-illustration {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  min-width: 0;
}
.bruk-illustration__canvas {
  min-width: 0;
  padding: clamp(14px, 3vw, 22px);
  color: var(--bruk-ink);
  background: var(--bruk-screen);
  border: 1.5px solid var(--bruk-line-strong);
  border-radius: var(--radius-md, 16px);
}
/* The default chapter visual: the chapter pictogram, centred on the canvas. */
[data-manual-symbol-illustration] .bruk-illustration__canvas {
  display: grid;
  place-items: center;
  padding-block: clamp(20px, 4vw, 32px);
}
[data-manual-symbol-illustration] .bruk-sym {
  width: 96px;
  height: 96px;
}

.bruk-install-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
  width: min(100%, 600px);
  min-width: 0;
}
.bruk-install-channels {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.bruk-install-channels__grid { display: grid; gap: 10px; }
.bruk-install-channels__grid > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  color: var(--bruk-ink);
  background: var(--bruk-card);
  border: 1.5px solid var(--bruk-line-strong);
  border-radius: var(--radius-md, 16px);
}
.bruk-install-channels__grid small { color: var(--bruk-muted); line-height: 1.4; }
.bruk-install-channels > p { margin: 0; color: var(--bruk-muted); font-size: 0.88rem; line-height: 1.45; }

@media (max-width: 640px) {
  .bruk-install-visual { grid-template-columns: minmax(0, 1fr); }
}




/* ASK symbol tiles */
.bruk-ask {
  flex: 0 0 auto;
  display: inline-grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  background: var(--color-tonePeach, #FCEDE0);
  border-radius: var(--radius-md, 16px);
  padding: 4px 5px 3px;
  text-align: center;
}
.bruk-ask__art {
  display: inline-grid;
  place-items: center;
  min-width: 0;
}
.bruk-ask img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bruk-ask__label {
  max-width: 100%;
  color: var(--bruk-ink);
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.bruk-ask--md { width: 64px; min-height: 70px; }
.bruk-ask--md .bruk-ask__art { width: 46px; height: 46px; }
.bruk-ask--md .bruk-ask__label { font-size: 0.62rem; }
.bruk-ask-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  align-items: stretch;
  justify-items: center;
  gap: var(--space-3, 12px);
  width: min(100%, 560px);
  margin-inline: auto;
}
.bruk-ask-legend .bruk-ask {
  width: 100%;
  max-width: 92px;
  min-height: 86px;
}



/* ---- Contact ------------------------------------------------------------- */
.bruk-contact {
  margin: var(--space-8, 64px) 0 0;
  padding: clamp(20px, 3vw, 32px);
  background: var(--gradient-warmField, linear-gradient(180deg, #FFF7EC 0%, #FBE9D4 100%));
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-xl, 30px);
}
.bruk-contact,
.bruk-contact p,
.bruk-contact li,
.bruk-contact a,
.bruk-contact__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bruk-contact h2 { margin: 0 0 var(--space-3, 12px); font-size: var(--font-size-xl, 1.45rem); }
.bruk-contact p { margin: 0 0 var(--space-4, 16px); max-width: 60ch; color: var(--bruk-muted); }
.bruk-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2, 8px); }
.bruk-contact__list li { display: flex; gap: var(--space-3, 12px); flex-wrap: wrap; align-items: baseline; }
.bruk-contact__label {
  min-width: 92px;
  font-weight: 700;
  font-size: var(--font-size-sm, 0.875rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bruk-brand-strong);
}
.bruk-contact a { color: var(--bruk-focus); }

/* Decorative motion is double-gated: only animate when the OS allows motion and
   the visitor has not chosen "Rolig". Default = no decorative transitions. */
.bruk-print, .bruk-toc__item a, .bruk-ed__btn, .bruk-search__clear, .bruk-format--link { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y~="calm"]) .bruk-print { transition: background var(--motion-fast, 140ms) ease; }
  html:not([data-a11y~="calm"]) .bruk-toc__item a { transition: background var(--motion-fast, 140ms) ease; }
  html:not([data-a11y~="calm"]) .bruk-ed__btn { transition: border-color var(--motion-fast, 140ms) ease, background var(--motion-fast, 140ms) ease; }
  html:not([data-a11y~="calm"]) .bruk-search__clear,
  html:not([data-a11y~="calm"]) .bruk-format--link { transition: border-color var(--motion-fast, 140ms) ease, background var(--motion-fast, 140ms) ease; }
}

/* Focus-visible rings on every interactive manual control. */
.bruk-toc__item a:focus-visible,
.bruk-paths__link:focus-visible,
.bruk-paths__download:focus-visible,
.bruk-ed__btn:focus-visible,
.bruk-print:focus-visible,
.bruk-search__input:focus-visible,
.bruk-search__clear:focus-visible,
.bruk-format--link:focus-visible {
  outline: 3px solid var(--bruk-focus, #0B5FD4);
  outline-offset: 2px;
}

/* Forced-colors: keep selected edition and symbols visible as real outlines. */
@media (forced-colors: active) {
  .bruk-ed__btn { border: 2px solid ButtonText; }
  .bruk-ed__btn[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .bruk-ch__sym, .bruk-ch__bigsym, .bruk-toc__sym { forced-color-adjust: auto; }
  .bruk-illustration__canvas,
.bruk-visual-kind { border: 2px solid CanvasText; }
}

/* Print-only cover is hidden on the web page and shown only in the generated PDF. */
.bruk-pdf-cover { display: none; }

/* The shared marketing footer uses a text-only mail link. Give that final
   manual action the WCAG 2.2 minimum web target without changing the footer
   geometry on other public routes. */
body[data-variant="manual"] footer a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Browser zoom at 200% turns a 320px device viewport into 160 CSS pixels.
   Keep the reading column and conceptual visuals inside that viewport instead
   of relying on the global overflow clip. */
@media (max-width: 200px) {
  body > header {
    gap: 4px !important;
    padding: 8px 4px !important;
  }
  body > header > a:first-child { gap: 4px !important; }
  body > header > a:first-child .sun-mark { width: 24px; height: 24px; }
  body > header > a:first-child span { font-size: 21px !important; }
  [data-view-tuner-trigger] {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .bruk { padding: 12px 4px 64px; }
  .bruk-hero,
  .bruk-paths,
  .bruk-tools,
  .bruk-toc,
  .bruk-contact,
  .bruk-nojs { padding: 8px; border-radius: 10px; }
  .bruk-ch,
  .bruk-part { padding: 8px; border-radius: 10px; }
  .bruk-ch__head { gap: 6px; }
  .bruk-ch__sym { width: 36px; height: 36px; border-radius: 12px; }
  .bruk-ch__sym .bruk-sym--sm { width: 22px; height: 22px; }
  .bruk-ch__title,
  .bruk-part__title { font-size: 1.15rem; }
  .bruk-h1 { font-size: 1.75rem; }
  .bruk-intro,
  .bruk-ch__lead,
  .bruk-part__intro { font-size: 1rem; }

  .bruk-ch__steps { gap: 8px; }
  .bruk-ch__steps li { padding-left: 27px; }
  .bruk-ch__steps li::before { width: 21px; height: 21px; font-size: 0.68rem; }
  .bruk-paths__link { min-height: 56px; padding: 7px; gap: 6px; }
  .bruk-paths__symbol { width: 28px; height: 28px; }
  .bruk-paths__arrow { display: none; }
  .bruk-toc__item a { gap: 6px; padding: 6px 4px; }
  .bruk-toc__sym { display: none; }
  .bruk-toc__num { width: 24px; height: 24px; }

  .bruk-ed,
.bruk-ed__row,
.bruk-ed__btn,
.bruk-print,
.bruk-search__input,
.bruk-search__clear,
.bruk-format { min-width: 0; width: 100%; max-width: 100%; }
  .bruk-ed__btn,
.bruk-print,
.bruk-search__input,
.bruk-search__clear,
.bruk-format { padding-inline: 8px; overflow-wrap: anywhere; }

  .bruk-illustration__canvas { padding: 4px; }
  .bruk-visual-kind { padding: 4px 6px; font-size: 0.68rem; }

  .bruk-ch__figure { width: 100%; min-width: 0; }
  .bruk-ch__figure > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .bruk-ch__figure *,
.bruk-contact * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
/* =========================================================================
   PRINT - polished A4 PDF generated from the accessible HTML manual.
   ========================================================================= */
@media print {
  @page {
    size: A4 portrait;
    margin: 13mm 0 15mm;
  }

  footer,
.view-tuner,
.bruk-paths,
.bruk-tools,
.bruk-ed,
.bruk-print,
.skip-link {
    display: none !important;
  }

  html,
  body {
    background: #fffaf2 !important;
    color: #15203B !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .bruk {
    max-width: none;
    margin: 0;
    padding: 0;
    color: #15203B;
    --pdf-ink: #15203B;
    --pdf-muted: #596174;
    --pdf-card: #ffffff;
    --pdf-line: #ead8c4;
    --pdf-orange: #D94F12;
    --pdf-blue: #236A8F;
    --pdf-green: #23734A;
    --pdf-plum: #8D2C5F;
    --pdf-gold: #A76500;
    --pdf-soft-orange: #fff0e6;
    --pdf-soft-blue: #eaf5fb;
    --pdf-soft-green: #e9f5ee;
    --pdf-soft-plum: #f7eaf2;
    --pdf-soft-gold: #fff3d9;
  }

  .bruk-pdf-cover {
    display: grid;
    /* Chromium reserves the configured print header and footer outside this
       canvas. Keep the complete cover inside that printable height so its
       contact row never spills onto an otherwise empty second page. */
    min-height: 235mm;
    padding: 15mm 15mm 13mm;
    grid-template-rows: auto 1fr auto;
    gap: 9mm;
    break-after: page;
    page-break-after: always;
    color: var(--pdf-ink);
    background:
      linear-gradient(180deg, rgba(255, 250, 242, 0) 0%, rgba(255, 250, 242, 0.92) 64%),
      radial-gradient(circle at 84% 20%, rgba(217, 79, 18, 0.2), transparent 36%),
      radial-gradient(circle at 12% 78%, rgba(35, 106, 143, 0.16), transparent 34%),
      #fffaf2;
  }
  .bruk-pdf-cover__top,
  .bruk-pdf-cover__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8mm;
  }
  .bruk-pdf-cover__eyebrow,
  .bruk-pdf-cover__badge,
  .bruk-pdf-cover__foot {
    margin: 0;
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .bruk-pdf-cover__eyebrow { color: var(--pdf-orange); }
  .bruk-pdf-cover__badge {
    padding: 2.5mm 5mm;
    color: #fff;
    background: var(--pdf-orange);
    border-radius: 999px;
  }
  .bruk-pdf-cover__main {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 11mm;
    align-items: center;
  }
  .bruk-pdf-cover__brand {
    margin: 0 0 4mm;
    font-size: 21pt;
    font-weight: 800;
    color: var(--pdf-orange);
  }
  .bruk-pdf-cover__title {
    margin: 0;
    font-size: 44pt;
    line-height: 1.04;
    letter-spacing: 0;
    color: var(--pdf-ink);
  }
  .bruk-pdf-cover__lead {
    margin: 6mm 0 0;
    max-width: 18em;
    font-size: 18pt;
    line-height: 1.28;
    color: var(--pdf-muted);
  }
  .bruk-pdf-cover__cards {
    margin-top: 11mm;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3mm;
  }
  .bruk-pdf-cover__cards span {
    padding: 4mm 4.5mm;
    font-size: 11pt;
    font-weight: 800;
    background: #fff;
    border: 1.2pt solid var(--pdf-line);
    border-left: 4pt solid var(--pdf-orange);
    border-radius: 5mm;
  }
  .bruk-pdf-cover__visual {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 4mm;
  }
  .bruk-pdf-cover__visual figcaption {
    max-width: 31em;
    margin: 0;
    font-size: 10.5pt;
    text-align: center;
    color: var(--pdf-muted);
  }
  .bruk-pdf-cover__foot {
    padding-top: 5mm;
    border-top: 1.2pt solid var(--pdf-line);
    color: var(--pdf-muted);
  }

  .bruk-hero {
    display: none !important;
  }

  .bruk-toc {
    position: relative;
    background: var(--pdf-card);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-inside: auto;
    page-break-inside: auto;
    break-after: page;
    page-break-after: always;
    margin: 0;
    padding: 15mm 16mm 14mm;
  }
  .bruk-toc::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 9mm;
    background: linear-gradient(90deg, var(--pdf-orange), var(--pdf-blue), var(--pdf-green));
  }
  .bruk-toc__heading {
    margin: 0 0 7mm;
    color: var(--pdf-ink);
    font-size: 22pt;
    line-height: 1.08;
  }
  .bruk-toc__list {
    display: block;
  }
  .bruk-toc__group {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 5mm;
  }
  .bruk-toc__cat {
    display: flex;
    align-items: center;
    gap: 2.8mm;
    margin: 0 0 2.4mm;
    color: var(--pdf-ink);
    font-size: 12.5pt;
    font-weight: 800;
  }
  .bruk-toc__sublist {
    display: block;
  }
  .bruk-toc__cat-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 6mm;
    height: 6mm;
    background: var(--pdf-orange) !important;
    color: #fff !important;
    border-radius: 999px;
    font-size: 8.5pt;
  }
  .bruk-toc__item a {
    min-height: 0;
    padding: 0.8mm 0;
    color: var(--pdf-ink);
    border-bottom: 0.5pt solid #efe2d2;
  }
  .bruk-toc__num {
    background: var(--pdf-orange) !important;
    color: #fff !important;
    width: 5.2mm;
    height: 5.2mm;
    font-size: 7pt;
  }
  .bruk-toc__label {
    font-size: 9pt;
    line-height: 1.12;
    font-weight: 800;
  }
  .bruk-toc__sym {
    color: var(--pdf-orange);
    width: 5.2mm;
    height: 5.2mm;
  }

  .bruk-part {
    --chapter-accent: var(--pdf-orange);
    --chapter-soft: var(--pdf-soft-orange);
    break-before: page;
    page-break-before: always;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
    min-height: 256mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0 22mm;
    background: var(--chapter-soft);
    border-top: 16mm solid var(--chapter-accent);
    overflow: hidden;
  }
  .bruk-part--1 { --chapter-accent: var(--pdf-orange); --chapter-soft: var(--pdf-soft-orange); }
  .bruk-part--2 { --chapter-accent: var(--pdf-blue); --chapter-soft: var(--pdf-soft-blue); }
  .bruk-part--3 { --chapter-accent: var(--pdf-green); --chapter-soft: var(--pdf-soft-green); }
  .bruk-part--4 { --chapter-accent: var(--pdf-plum); --chapter-soft: var(--pdf-soft-plum); }
  .bruk-part--5 { --chapter-accent: var(--pdf-gold); --chapter-soft: var(--pdf-soft-gold); }
  .bruk-part--6 { --chapter-accent: var(--pdf-orange); --chapter-soft: var(--pdf-soft-orange); }
  .bruk-part__eyebrow {
    margin: 0 0 7mm;
    font-size: 14pt;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--chapter-accent) !important;
  }
  .bruk-part__title {
    margin: 0 0 9mm;
    font-size: 40pt;
    line-height: 1.04;
    letter-spacing: 0;
    color: var(--pdf-ink);
  }
  .bruk-part__intro {
    margin: 0;
    max-width: 24em;
    font-size: 16pt;
    line-height: 1.5;
    color: var(--pdf-muted);
  }

  .bruk-chapters { gap: 0; }

  .bruk-ch {
    --chapter-accent: var(--pdf-orange);
    --chapter-soft: var(--pdf-soft-orange);
    break-inside: auto;
    page-break-inside: auto;
    break-after: page;
    page-break-after: always;
    background: var(--pdf-card);
    border: 0;
    border-top: 10mm solid var(--chapter-accent);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 15mm 12mm;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .bruk-ch:nth-child(5n + 2) { --chapter-accent: var(--pdf-blue); --chapter-soft: var(--pdf-soft-blue); }
  .bruk-ch:nth-child(5n + 3) { --chapter-accent: var(--pdf-green); --chapter-soft: var(--pdf-soft-green); }
  .bruk-ch:nth-child(5n + 4) { --chapter-accent: var(--pdf-plum); --chapter-soft: var(--pdf-soft-plum); }
  .bruk-ch:nth-child(5n + 5) { --chapter-accent: var(--pdf-gold); --chapter-soft: var(--pdf-soft-gold); }
  .bruk-ch__head {
    align-items: center;
    gap: 4mm;
    margin: 0 -15mm 9mm;
    padding: 7mm 15mm;
    background: var(--chapter-soft);
  }
  .bruk-ch__sym {
    background: var(--chapter-accent) !important;
    color: #fff !important;
    box-shadow: none;
    width: 10mm;
    height: 10mm;
    border-radius: 4mm;
  }
  .bruk-ch__sym .bruk-sym--sm { width: 7mm; height: 7mm; }
  .bruk-ch__title {
    color: var(--pdf-ink);
    font-size: 18pt;
    line-height: 1.14;
    letter-spacing: 0;
  }
  .bruk-ch__num { color: var(--chapter-accent); }
  .bruk-ch__lead {
    color: var(--pdf-ink);
    font-size: 11.2pt;
    line-height: 1.45;
  }
  .bruk-ch__steps { gap: 3mm; }
  .bruk-ch__steps li {
    color: var(--pdf-ink);
    font-size: 10.8pt;
    line-height: 1.42;
    padding-left: 9mm;
  }
  .bruk-ch__steps li::before {
    background: var(--chapter-accent) !important;
    color: #fff !important;
    width: 6.5mm;
    height: 6.5mm;
    top: -0.4mm;
    font-size: 8.5pt;
  }
  .bruk-ch__figure figcaption {
    margin-top: 3mm;
    color: var(--pdf-muted);
    font-size: 9.5pt;
  }
  .bruk-ch__figure-kind { color: var(--pdf-ink); }
  .bruk-ch__shape--full {
    grid-template-columns: minmax(0, 1.05fr) minmax(54mm, 0.95fr);
    align-items: start;
    gap: 10mm;
    flex: 1 1 auto;
    padding-top: 2mm;
  }
  .bruk-ch__shape--full .bruk-ch__copy {
    grid-column: 1;
    min-width: 0;
  }
  .bruk-ch__shape--full .bruk-ch__figure {
    grid-column: 2;
    grid-row: 1;
  }
  .bruk-ch__shape--full .bruk-ch__copy .bruk-ch__steps {
    margin-bottom: 0;
  }
  .bruk-ch__bigsym {
    color: var(--chapter-accent);
    background: var(--chapter-soft) !important;
    box-shadow: inset 0 0 0 0.5mm var(--chapter-accent);
    width: 58mm;
    min-height: 46mm;
    height: auto;
    border-radius: 10mm;
  }
  .bruk-ch__shape--full .bruk-ch__figure { justify-self: center; align-self: start; }
  .bruk-ch__head--feature-photo .bruk-ch__sym { display: none; }
  .bruk-manual-photo {
    width: 100%;
    max-width: 68mm;
    border: 0.8pt solid var(--pdf-line);
    border-radius: 4mm;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .bruk-manual-photo .bruk-visual-kind {
    top: 2mm;
    left: 2mm;
  }

  /* The troubleshooting chapter intentionally covers the complete recovery
     ladder. Keep that single decision aid together instead of orphaning the
     last two recovery steps on an otherwise blank page. */
  #hvis-noe-gar-galt .bruk-ch__head { margin-bottom: 6mm; }
  #hvis-noe-gar-galt .bruk-ch__shape--full { gap: 7mm; padding-top: 0; }
  #hvis-noe-gar-galt .bruk-ch__lead { font-size: 10pt; line-height: 1.35; }
  #hvis-noe-gar-galt .bruk-ch__steps { gap: 1.25mm; }
  #hvis-noe-gar-galt .bruk-ch__steps li {
    font-size: 9.2pt;
    line-height: 1.28;
    padding-left: 8mm;
  }
  #hvis-noe-gar-galt .bruk-ch__steps li::before {
    width: 5.8mm;
    height: 5.8mm;
    font-size: 7.5pt;
  }
  #hvis-noe-gar-galt .bruk-ch__figure figcaption {
    margin-top: 2mm;
    font-size: 8.6pt;
  }

  .bruk-install-visual {
    grid-template-columns: minmax(0, 1fr) 58mm;
    gap: 4mm;
    width: 100%;
  }
  .bruk-install-channels { gap: 2mm; }
  .bruk-install-channels__grid { gap: 2mm; }
  .bruk-install-channels__grid > span { padding: 2.4mm; border-radius: 3mm; }
  .bruk-install-channels > p { font-size: 7.5pt; }
  .bruk-visual-kind {
    min-height: 0;
    padding: 1.2mm 2.4mm;
    color: var(--pdf-ink);
    background: var(--pdf-soft-blue) !important;
    border: 0.8pt solid var(--pdf-line);
    font-size: 7.5pt;
  }
  .bruk-illustration {
    gap: 2.5mm;
    max-width: 76mm;
  }
  .bruk-illustration__canvas {
    padding: 3.5mm;
    background: #f4f6fb !important;
    border: 0.8pt solid var(--pdf-line);
    border-radius: 4mm;
  }
  .bruk-ask {
    background: #fff !important;
  }
  .bruk-ask {
    border: 0.6pt solid var(--pdf-line);
    padding: 0.8mm 0.9mm 0.7mm;
  }
  .bruk-ask--md {
    width: 16mm;
    min-height: 18mm;
  }
  .bruk-ask--md .bruk-ask__art {
    width: 11mm;
    height: 11mm;
  }
  .bruk-ask__label {
    color: var(--pdf-ink) !important;
    font-weight: 800;
    line-height: 1.05;
  }
  .bruk-ask--md .bruk-ask__label { font-size: 6.4pt; }
  .bruk-ask-legend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.8mm;
    width: 100%;
  }
  .bruk-ask-legend .bruk-ask {
    width: 100%;
    max-width: none;
    min-height: 18mm;
  }

  .bruk-contact {
    background: var(--pdf-soft-orange) !important;
    border: 1.2pt solid var(--pdf-line);
    border-radius: 7mm;
    break-inside: avoid;
    margin-top: 7mm;
    padding: 8mm;
  }
  .bruk-contact h2,
  .bruk-contact p,
  .bruk-contact a,
  .bruk-contact__label {
    color: var(--pdf-ink) !important;
  }
  .bruk-contact::after {
    content: "support@dagly.no - dagly.no - TINKO AS";
    display: block;
    margin-top: 5mm;
    padding-top: 3mm;
    border-top: 1px solid var(--pdf-line);
    font-size: 9pt;
    text-align: center;
    color: var(--pdf-muted);
  }
}



/* ===== "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;
  }

}