:root {
  color-scheme: light;
  /* -------------------------------------------------------------------------
     LEGACY ALIASES — the single source of truth is src/lib/tokens.ts, emitted
     by renderRootTokensCss() as the canonical --color-*/--radius-*/--shadow-*
     custom properties. To avoid a mass rename, the older selectors keep working
     through these aliases. There is now exactly ONE navy (--color-navy) and ONE
     coherent orange family (brand / brandStrong / brandDeep). No raw brand,
     surface or ink hex lives here. (var() resolves lazily at use time, so the
     order of these declarations vs. renderRootTokensCss() does not matter.)
     ----------------------------------------------------------------------- */
  --navy: var(--color-navy);
  --navy-soft: var(--color-nextInk);
  --ink: var(--color-navy);
  --muted: var(--color-inkMuted);
  --line: var(--color-line);
  --line-strong: var(--color-lineStrong);
  --page: var(--color-cream);
  --section: var(--color-surface);
  --section-warm: var(--color-cream);
  --card: var(--color-surface);
  --pastel-blue: var(--color-toneBlue);
  --pastel-green: var(--color-toneGreen);
  --pastel-peach: var(--color-tonePeach);
  --pastel-lilac: var(--color-toneLilac);
  --green-ink: var(--color-doneInk);
  /* The CTA orange resolves to the AA-safe deep orange; "orange-dark" to the
     deep-saturated strong orange — one orange family, no second CTA orange. */
  --orange: var(--color-brandDeep);
  --orange-dark: var(--color-brandStrong);
  --amber: var(--color-sunTop);
  --focus: var(--color-focus);
  /* The canonical --radius-* and --shadow-* come from renderRootTokensCss().
     Buttons / CTAs reference --radius-control (12px) directly below. */
  --maxw: 1180px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { letter-spacing: 0; }

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

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

/* Logo / wordmark */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .sun-mark { display: block; flex: none; }
.brand-word {
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -1.5px;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 251, 245, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
}
.site-header nav a { text-decoration: none; padding: 8px 4px; border-radius: var(--radius-sm); transition: color 0.18s ease, background 0.18s ease; }
.site-header nav a:hover { color: var(--navy); }
.site-header nav a[aria-current="page"] { color: var(--navy); background: rgba(201,79,18,0.09); }
/* Header control pair — nav · "Tilpass visning" · "Prøv demoen".
   Both use the unified .btn system; locked order via source order. */
.header-tuner-trigger { white-space: nowrap; gap: 8px; }
.header-tuner-trigger__icon { width: 18px; height: 18px; flex: none; }
.header-cta { white-space: nowrap; box-shadow: none; }
/* The demo CTA carries a full label and a ≤390px short label. */
.header-cta__short { display: none; }
@media (max-width: 390px) {
  .header-cta__full { display: none; }
  .header-cta__short { display: inline; }
}
/* The trigger collapses to its icon (it keeps an aria-label) below ~460px so
   the header pair never wraps to two lines on small phones — the full
   "Tilpass visning"+"Prøv demoen" pair only fits comfortably above that. */
@media (max-width: 459px) {
  .header-tuner-trigger { padding: 0 12px; }
  .header-tuner-trigger__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ── "Tilpass visning" drawer (role=dialog) ───────────────────────────────── */
.view-tuner[hidden] { display: none; }
.view-tuner {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
}
.view-tuner__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--motion-base, 220ms) var(--motion-ease, ease);
}
.view-tuner[data-open] .view-tuner__scrim { opacity: 1; }
.view-tuner__drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--motion-base, 220ms) var(--motion-easeOut, ease);
}
.view-tuner[data-open] .view-tuner__drawer { transform: translateX(0); }
@media (max-width: 640px) {
  .view-tuner__drawer { width: 100vw; border-left: none; }
}
.view-tuner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.view-tuner__title { margin: 0; font-size: 1.2rem; color: var(--navy); }
.view-tuner__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--navy);
  cursor: pointer;
}
.view-tuner__close svg { width: 22px; height: 22px; }
.view-tuner__close:hover { border-color: var(--navy); }
.view-tuner__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; }
.view-tuner__label {
  margin: 18px 0 8px;
  font-size: var(--font-size-xs, 0.78rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.view-tuner__body > .view-tuner__label:first-child { margin-top: 0; }
.view-tuner__group { display: grid; gap: 8px; }
/* ONE consistent control style for every option (replaces the 9 mismatched
   pills): a full-width toggle row, ≥44px, selected by border + check, not
   colour alone. */
.view-tuner__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--navy);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.view-tuner__option:hover { border-color: var(--navy); }
.view-tuner__option-check {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  background: var(--card);
  color: transparent;
}
.view-tuner__option-check svg { width: 18px; height: 18px; }
.view-tuner__option-label { min-width: 0; }
.view-tuner__option[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--pastel-blue);
}
.view-tuner__option[aria-pressed="true"] .view-tuner__option-check {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--color-onInk);
}
.view-tuner__status { margin: 14px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.view-tuner__footer {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.view-tuner__footer .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .view-tuner__scrim, .view-tuner__drawer { transition: none; }
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  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 { grid-template-columns: 1fr; max-width: 820px; }
.hero-copy { max-width: 660px; }
.eyebrow {
  margin: 0 0 var(--space-3, 14px);
  color: var(--orange-dark);
  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(--navy); }
.intro { margin: var(--space-5, 22px) 0 0; color: var(--muted); font-size: var(--font-size-lg, 1.1875rem); line-height: var(--font-leading-normal, 1.6); max-width: 580px; }
.hero-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  max-width: 560px;
}
.hero-mode-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.76);
  color: var(--navy);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.hero-mode-button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--color-onInk);
}
.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. */
.hero-actions { align-items: center; gap: var(--space-5, 24px); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--orange-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.text-link:hover { border-bottom-color: var(--orange-dark); }
/* =========================================================================
   UNIFIED BUTTON SYSTEM — 3 variants x 3 sizes, ONE radius (--radius-control).
   Canonical names are .btn / .btn--primary|secondary|ghost / .btn--sm|md|lg.
   The legacy .button family is kept as an alias of the SAME rules so existing
   markup (and the static-site test) keeps rendering, but now converges on a
   single orange (--color-brandDeep), single navy and 12px corners. Pill radius
   is reserved for segmented controls + status chips, never for these buttons.
   ========================================================================= */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* md is the default size: h44 / 0 18px / 16px. */
  min-height: 44px;
  border-radius: var(--radius-control);
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
/* Sizes ------------------------------------------------------------------- */
.btn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn--md { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn--lg,
.button.big { min-height: 52px; padding: 0 28px; font-size: 17px; }
/* Variants ---------------------------------------------------------------- */
.btn--primary,
.button.primary { color: var(--color-onBrand); background: var(--color-brandDeep); box-shadow: var(--shadow-sm); }
.btn--primary:hover,
.button.primary:hover { background: var(--color-brandStrong); box-shadow: var(--shadow-sm); }
.btn--secondary,
.button.secondary { background: var(--color-surface); border-color: var(--color-lineStrong); color: var(--navy); }
.btn--secondary:hover,
.button.secondary:hover { box-shadow: var(--shadow-sm); border-color: var(--navy); }
.btn--ghost,
.button.ghost { background: transparent; border-color: currentColor; color: var(--color-onBrand); }
.btn--ghost:hover,
.button.ghost:hover { background: rgba(255,255,255,0.12); }

.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(--line-strong);
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-pill);
  padding: 9px 15px;
  font-weight: 600;
  color: var(--navy);
  font-size: var(--font-size-sm, 0.9rem);
}
.proof-list li::before { content: "✓ "; color: var(--green-ink); font-weight: 800; }

/* Hero ghost secondary lives on a LIGHT surface, so it needs ink text and a
   visible AA border (the default .button.ghost is tuned for dark bands). */
.hero-actions .button.ghost { background: transparent; border-color: var(--line-strong); color: var(--navy); }
.hero-actions .button.ghost:hover { background: rgba(31,42,90,0.06); border-color: var(--navy); }

/* Proof chips — three short trust claims as an icon row under the hero CTAs. */
.proof-chips { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); padding: 0; margin: var(--space-7, 40px) 0 0; list-style: none; }
.proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px solid var(--line-strong);
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--navy);
  font-size: var(--font-size-sm, 0.92rem);
}
.proof-chip-icon { display: inline-grid; place-items: center; color: var(--green-ink); }
.proof-chip-icon svg { width: 20px; height: 20px; }

/* Quiet demo-before-payment claim line (contract proof points). */
.hero-claims { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: var(--space-4, 16px) 0 0; list-style: none; }
.hero-claims li { color: var(--muted); font-size: var(--font-size-sm, 0.9rem); font-weight: 600; }
.hero-claims li:not(:last-child)::after { content: "·"; margin-left: 14px; color: var(--line-strong); }

.hero-stage { display: flex; justify-content: center; }

/* Phone mock - reusable realistic modern smartphone shell */
.phone {
  --phone-width: 300px;
  width: min(var(--phone-width), 100%);
  max-width: 100%;
  animation: phone-rise 0.7s cubic-bezier(0.2,0.8,0.2,1) both;
}
.phone-hero { --phone-width: 300px; }
.phone-showcase { --phone-width: clamp(260px, 23vw, 330px); animation: none; }
.phone-compact { --phone-width: 260px; }
@keyframes phone-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.phone-frame {
  position: relative;
  display: grid;
  background: linear-gradient(155deg, #2a3252 0%, #11162c 46%, #060a18 100%);
  border-radius: 46px;
  padding: 11px;
  box-shadow:
    0 30px 70px rgba(13, 20, 48, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 1.5px rgba(255, 255, 255, 0.06) inset,
    0 0 0 2px rgba(6, 10, 24, 0.9);
}
/* faint rim highlight */
.phone-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 40px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
/* side buttons */
.phone-btn { position: absolute; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #2c3556, #10152b); z-index: 1; }
.phone-btn-vol { left: -3px; top: 116px; height: 70px; }
.phone-btn-pwr { right: -3px; top: 134px; height: 50px; }
.phone-screen { position: relative; background: var(--page); border-radius: 36px; overflow: hidden; aspect-ratio: 9 / 18.6; min-height: 0; display: flex; flex-direction: column; }
/* Dynamic-Island-style pill */
.phone-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #05070f; border-radius: var(--radius-pill); z-index: 5; display: flex; align-items: center; justify-content: flex-end; padding-right: 11px; }
.phone-island-cam { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #25406b, #05070f 70%); box-shadow: 0 0 0 1px rgba(80,120,180,0.25); }
.phone-status { display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; padding: 14px 18px 4px; font-size: 0.8rem; font-weight: 700; color: var(--navy); }
.phone-status-time { letter-spacing: 0.01em; grid-column: 1; }
.phone-status-icons { grid-column: 3; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--navy); min-width: 0; }
.status-glyph { display: inline-flex; align-items: center; }
.status-glyph.cell svg { width: 15px; height: 11px; }
.status-glyph.wifi svg { width: 15px; height: 11px; }
.status-glyph.batt svg { width: 21px; height: 13px; }
.phone-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px 10px; gap: 10px; }
.phone-brand { display: inline-flex; align-items: center; gap: 7px; }
.phone-brand strong { font-size: 1.1rem; color: var(--navy); letter-spacing: -0.04em; }
.clock-cluster { display: flex; align-items: center; gap: 8px; }
.analog-clock { width: 54px; height: 54px; flex: none; }
.analog-clock.clock-sm { width: 38px; height: 38px; }
.analog-clock.clock-xs { width: 30px; height: 30px; }
.clock-face { fill: #fff; stroke: var(--line-strong); stroke-width: 3; }
.clock-tick { stroke: var(--navy); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.clock-tick.major { stroke-width: 3.4; opacity: 1; }
.clock-numeral { fill: var(--navy); font-size: 9px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.clock-hand { stroke: var(--navy); stroke-linecap: round; }
.clock-hand.hour { stroke-width: 5; }
.clock-hand.minute { stroke-width: 3.4; }
.clock-pin { fill: var(--navy); }
.time-text { display: grid; gap: 1px; text-align: right; }
.time-text b { font-size: 1.05rem; color: var(--navy); }
.time-text span { font-size: 0.64rem; color: var(--muted); }
.phone-body { padding: 4px 14px 14px; flex: 1; }
.day-greeting { margin: 6px 2px 2px; font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.day-section-label { margin: 8px 2px 8px; font-weight: 700; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.day-list { display: grid; gap: 10px; }
.day-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; animation: card-in 0.4s ease both; }
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.day-card-main { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 11px; }
.day-card.now { border-color: var(--orange); }
.day-card.done { opacity: 0.7; }
.symbol-tile { display: grid; place-items: center; border-radius: 14px; overflow: hidden; }
.symbol-tile img { width: 72%; height: 72%; object-fit: contain; display: block; }
.tone-blue { background: var(--pastel-blue); color: #28407e; }
.tone-green { background: var(--pastel-green); color: var(--green-ink); }
.tone-peach { background: var(--pastel-peach); color: var(--orange-dark); }
.tone-lilac { background: var(--pastel-lilac); color: #4b3d8f; }
.day-symbol { width: 52px; height: 52px; }
.day-card-body { min-width: 0; }
.day-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.day-card-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--navy); }
.day-status { font-size: 0.66rem; font-weight: 800; padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.day-status.now { color: var(--orange-dark); background: rgba(226,92,20,0.16); }
.day-status.done { color: var(--green-ink); background: var(--pastel-green); }
.day-status.next { color: #28407e; background: var(--pastel-blue); }
.day-time, .day-loc { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.row-ico { display: inline-flex; }
.row-ico svg { width: 15px; height: 15px; }
.day-chevron { color: var(--muted); align-self: center; }
.day-chevron svg { width: 18px; height: 18px; }
.day-progress { height: 4px; background: var(--pastel-peach); margin: 0 11px 11px; border-radius: var(--radius-pill); overflow: hidden; }
.day-progress span { display: block; height: 100%; width: 62%; background: var(--orange); border-radius: var(--radius-pill); }
.day-actions { display: flex; gap: 8px; margin-top: 14px; }
.day-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 8px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.85rem; background: var(--pastel-blue); color: var(--navy); }
.day-action .row-ico svg { width: 16px; height: 16px; }
.day-action.accent { background: var(--pastel-peach); color: var(--orange-dark); }
/* Bottom tab bar — flush to the screen, inside .phone-screen */
.phone-nav { margin-top: auto; background: rgba(255,255,255,0.96); border-top: 1px solid var(--line); backdrop-filter: saturate(160%) blur(8px); padding: 7px 6px 4px; }
.phone-tabs { display: flex; justify-content: space-around; align-items: flex-start; }
.phone-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; color: var(--muted); font-size: 0.56rem; font-weight: 700; letter-spacing: -0.01em; }
.phone-tab-ico { display: inline-flex; }
.phone-tab-ico svg { width: 22px; height: 22px; }
.phone-tab-label { line-height: 1; text-align: center; }
.phone-tab.active { color: var(--orange); }
.phone-tab.nav-bilde { display: none; }
.phone-home-indicator { display: block; width: 108px; height: 5px; border-radius: var(--radius-pill); background: var(--navy); opacity: 0.32; margin: 6px auto 2px; }
/* Bilde profile collapses to Min dag + Mer */
.phone-screen[data-active="bilde"] .phone-tab.nav-full { display: none; }
.phone-screen[data-active="bilde"] .phone-tab.nav-bilde { display: flex; }

/* Profile variants on live phone */
.phone-screen[data-active="bilde"] .day-greeting,
.phone-screen[data-active="bilde"] .day-section-label { text-align: center; }
.phone-screen[data-active="bilde"] .day-card-main { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 20px; gap: 14px; }
.phone-screen[data-active="bilde"] .day-symbol { width: 130px; height: 130px; }
.phone-screen[data-active="bilde"] .day-card-top { flex-direction: column; gap: 8px; }
.phone-screen[data-active="bilde"] .day-card-title { font-size: 1.6rem; }
.phone-screen[data-active="bilde"] .day-time, .phone-screen[data-active="bilde"] .day-loc { justify-content: center; font-size: 0.95rem; }
.phone-screen[data-active="bilde"] .day-chevron { display: none; }
.phone-screen[data-active="enkel"] .day-symbol { width: 64px; height: 64px; }
.phone-screen[data-active="enkel"] .day-card-title { font-size: 1.3rem; }
.phone-screen[data-active="enkel"] .day-loc { display: none; }
.phone-screen[data-active="full"] .day-card-main { grid-template-columns: 44px 1fr auto; padding: 9px; }
.phone-screen[data-active="full"] .day-symbol { width: 44px; height: 44px; }
.phone-screen[data-active="full"] .day-card-title { font-size: 0.95rem; }
.day-extra { margin-top: 12px; display: grid; gap: 6px; }
.day-extra span { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 600; color: var(--muted); background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; }
.day-extra span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-ink); }
/* 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-strip { background: var(--section); border-top: 1px solid var(--line); }
.band-problem { background: var(--section-warm); border-top: 1px solid var(--line); }
.band-levels { background: var(--section); border-top: 1px solid var(--line); }
.band-mode { background: var(--section); border-top: 1px solid var(--line); }
.band-features { background: var(--section-warm); border-top: 1px solid var(--line); }
.band-stories { background: var(--section); border-top: 1px solid var(--line); }
.band-trust { background: var(--navy); color: var(--color-onInk); border-top: 1px solid var(--line); }
.band-pricing { background: var(--section-warm); border-top: 1px solid var(--line); }
.band-faq { background: var(--section); border-top: 1px solid var(--line); }
.band-final { background: linear-gradient(135deg, var(--color-navy), var(--navy-soft)); color: var(--color-onInk); }
.band-policy { background: var(--section); border-top: 1px solid var(--line); }

.band-head { max-width: 760px; margin: 0 0 var(--space-7, 48px); }
.band-head--manual { margin-bottom: var(--space-5, 24px); }
.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(--navy);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.band-trust .band-head h2 { color: var(--color-onInk); }
.band-lead { margin: var(--space-4, 16px) 0 0; color: var(--muted); font-size: var(--font-size-lg, 1.1875rem); line-height: var(--font-leading-normal, 1.55); }
.band-trust .band-lead { color: #c4d2f5; }

/* Problem grid */
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 24px); align-items: stretch; }
.problem-card { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--card); padding: clamp(22px, 3vw, 32px); }
.problem-card.solution { border-color: var(--orange); box-shadow: var(--shadow-md); }
.problem-tag { display: inline-block; font-weight: 800; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 14px; }
.problem-tag.accent { color: var(--orange-dark); }
.con-list, .pro-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.con-list li, .pro-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--navy-soft); line-height: 1.5; }
.con-list li::before { content: "–"; color: var(--muted); font-weight: 800; }
.pro-list li::before { content: "✓"; color: var(--green-ink); font-weight: 800; }

/* Visningsprofiler */
.mini-row-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4, 16px); margin-bottom: var(--space-7, 48px); }
.mini-figure { margin: 0; display: grid; gap: 12px; }
.mini-figure figcaption { display: grid; gap: 2px; color: var(--muted); font-size: 0.86rem; }
.mini-figure figcaption strong { color: var(--navy); font-size: 1rem; }
.mini-screen { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--card); padding: 14px; min-height: 230px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.mini-head { display: flex; align-items: center; justify-content: space-between; }
.mini-time { font-weight: 800; color: var(--navy); font-size: 0.82rem; }
.mini-label { margin: 4px 0 0; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mini-symbol { width: 38px; height: 38px; }
.mini-bilde { align-items: center; justify-content: center; text-align: center; }
.mini-big-symbol { width: 110px; height: 110px; }
.mini-big-title { margin: 4px 0; font-size: 1.5rem; font-weight: 800; color: var(--navy); }
.mini-readaloud { display: inline-flex; align-items: center; gap: 6px; background: var(--pastel-blue); color: var(--navy); font-weight: 700; font-size: 0.82rem; padding: 8px 14px; border-radius: var(--radius-pill); }
.mini-readaloud .row-ico svg { width: 16px; height: 16px; }
.mini-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 14px; padding: 10px; font-weight: 700; color: var(--navy); }
.mini-card.big { padding: 16px; font-size: 1.15rem; }
.mini-card.big .mini-symbol { width: 52px; height: 52px; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.mini-row.now { background: var(--pastel-peach); }
.mini-row.dense { padding: 6px; }
.mini-row-text { display: grid; }
.mini-row-text b { color: var(--navy); font-size: 0.92rem; }
.mini-row-text small { color: var(--muted); font-size: 0.74rem; }
.mini-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.74rem; font-weight: 600; border-top: 1px solid var(--line); padding-top: 8px; }
.mini-foot .row-ico svg { width: 15px; height: 15px; }
/* Footer chip (Kalender / PDF) — a small pill beside the dictate/sync icons. */
.mini-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--pastel-blue); color: var(--navy); font-weight: 700; font-size: 0.7rem; }
.mini-chip .row-ico svg { width: 13px; height: 13px; }

/* Full · Vis støtte av mini — a navy dense header strip mirroring .dly-selv__head:
   analog clock + date + "sist synket" line, white-on-navy. */
.mini-selv-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin: -2px -2px 2px; border-radius: var(--radius-md); background: var(--navy); color: #fff; }
.mini-selv-head-text { display: grid; gap: 1px; min-width: 0; }
.mini-selv-head-text b { font-size: 0.84rem; font-weight: 800; line-height: 1.1; }
.mini-selv-head-text small { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; color: rgba(255,255,255,0.82); }
.mini-selv-head-text small .row-ico svg { width: 12px; height: 12px; }
/* On the dark header the analog clock flips to light-on-dark. */
.mini-selv-head .clock-face { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.5); }
.mini-selv-head .clock-tick { stroke: rgba(255,255,255,0.6); }
.mini-selv-head .clock-tick.major { stroke: #fff; }
.mini-selv-head .clock-numeral { fill: #fff; }
.mini-selv-head .clock-hand { stroke: #fff; }
.mini-selv-head .clock-pin { fill: var(--orange); }
.mini-label--earlier { color: var(--muted); }

.levels-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.levels-phone-col { display: grid; justify-items: center; gap: 18px; position: sticky; top: 92px; }
.level-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.level-tab { display: grid; align-content: center; gap: 2px; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-control); background: var(--card); color: var(--navy); cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease; min-height: 44px; }
.level-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.level-tab-label { font-weight: 800; font-size: 1rem; }
.level-tab-tag { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.level-tab[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--color-onInk); box-shadow: var(--shadow-md); }
.level-tab[aria-pressed="true"] .level-tab-tag { color: #c4d2f5; }
.levels-hint { margin: 0; color: var(--muted); font-size: 0.86rem; text-align: center; max-width: 280px; }
.mode-panels { border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--card); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-sm); }
.mode-panel[hidden] { display: none; }
.mode-panel h3 { margin: 0 0 10px; font-size: 1.4rem; color: var(--navy); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mode-panel-tag { font-size: 0.76rem; font-weight: 700; color: var(--orange-dark); background: var(--pastel-peach); padding: 4px 10px; border-radius: var(--radius-pill); }
.mode-panel p { margin: 0 0 10px; color: var(--muted); line-height: 1.6; }
.mode-panel-value { color: var(--navy-soft) !important; }
.mode-controls-label { margin: 18px 0 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mode-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; list-style: none; }
.mode-controls li { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 13px; background: var(--section-warm); font-weight: 600; font-size: 0.88rem; color: var(--navy); }

/* Device showcase — phone / tablet */
.band-devices { background: var(--section); border-top: 1px solid var(--line); }
.device-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: clamp(16px, 2.6vw, 34px);
  align-items: end;
  margin-top: clamp(28px, 5vw, 58px);
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,251,245,0.38)),
    linear-gradient(180deg, rgba(220,231,255,0.42), rgba(252,231,214,0.28));
  box-shadow: 0 34px 90px rgba(31,42,90,0.12);
  overflow: hidden;
}
.device-grid::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(31,42,90,0.06);
  border-radius: 26px;
  pointer-events: none;
}
.device-figure { margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; width: 100%; max-width: 100%; position: relative; z-index: 1; }
.device-phone { grid-column: 1 / 5; grid-row: 1; z-index: 3; align-self: end; transform: translate(34px, 10px); }
.device-tablet { grid-column: 4 / 13; grid-row: 1; z-index: 2; align-self: end; transform: translateX(-6px); }
.device-figure figcaption {
  display: inline-grid;
  gap: 2px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  box-shadow: var(--shadow-sm);
}
.device-figure figcaption strong { color: var(--navy); font-size: 1rem; }
.device-caption { margin: var(--space-6, 32px) auto 0; max-width: 760px; text-align: center; color: var(--muted); font-size: var(--font-size-base, 0.96rem); line-height: 1.55; }

/* shared device UI typography reset inside frames */
.device-ui { display: flex; flex-direction: column; height: 100%; }

/* Tablet */
.tablet { --tablet-content-scale: 0.92; width: min(100%, 720px); max-width: 720px; min-width: 0; }
.tablet-showcase { max-width: 720px; }
.tablet-compact { max-width: 560px; }
.tablet-frame {
  position: relative;
  background: linear-gradient(155deg, #2a3252, #11162c);
  border-radius: 30px;
  padding: 16px;
  box-shadow: 0 26px 60px rgba(13,20,48,0.35), 0 0 0 1.5px rgba(255,255,255,0.06) inset, 0 0 0 2px rgba(6,10,24,0.9);
}
.tablet-cam { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #25406b, #05070f 70%); }
.tablet-screen { position: relative; background: var(--page); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.tablet-scale { width: 100%; height: 100%; }
.tablet-scale.is-scaled { width: calc(100% / var(--tablet-content-scale)); height: calc(100% / var(--tablet-content-scale)); transform: scale(var(--tablet-content-scale)); transform-origin: top left; }
.tablet-ui { padding: 14px 16px; gap: 12px; }
.tablet-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tablet-panes { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; flex: 1; min-height: 0; }
.tablet-pane { min-width: 0; display: flex; flex-direction: column; }
.tablet-pane-side { border-left: 1px solid var(--line); padding-left: 16px; }
.tablet-routines { display: grid; gap: 8px; }
.tablet-routine { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 9px 10px; }
.tablet-routine-symbol { width: 38px; height: 38px; flex: none; }
.tablet-routine-text { display: grid; min-width: 0; }
.tablet-routine-text b { color: var(--navy); font-size: 0.92rem; }
.tablet-routine-text small { color: var(--muted); font-size: 0.74rem; }
.tablet-pane-side .day-actions { margin-top: auto; }

/* Mode / feature / trust / story grids */
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 24px); align-items: stretch; }
.mode-grid--single { grid-template-columns: minmax(0, 720px); }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5, 24px); align-items: stretch; }
.mode-card { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--card); padding: clamp(22px, 3vw, 32px); }
.mode-card h3 { margin: 0 0 10px; color: var(--navy); font-size: var(--font-size-xl, 1.25rem); }
.mode-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.55; }
.mode-card .check-list, .mode-card .a11y-pill-list { margin-top: auto; }
.portal-a11y-card { background: var(--navy); color: var(--color-onInk); }
.portal-a11y-card h3, .portal-a11y-card p { color: var(--color-onInk); }
.a11y-pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.a11y-pill-list li { border: 1px solid rgba(255,255,255,0.32); border-radius: var(--radius-pill); padding: 7px 12px; background: rgba(255,255,255,0.12); color: #fff; font-size: 0.88rem; font-weight: 700; }
.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(--navy-soft); 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(--green-ink);
  border-radius: 6px;
  color: var(--green-ink);
  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; }
}

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5, 24px); align-items: stretch; }
.feature-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 28px); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--pastel-blue); color: var(--navy); margin-bottom: 16px; }
.feature-icon svg { width: 26px; height: 26px; }
.feature-card h3 { margin: 0 0 8px; color: var(--navy); font-size: 1.15rem; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.55; }

.trust-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-lg); padding: 26px; }
.trust-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(255,178,62,0.18); color: #FFD0A8; margin-bottom: 16px; }
.trust-icon svg { width: 26px; height: 26px; }
.trust-card h3 { margin: 0 0 8px; color: var(--color-onInk); font-size: 1.12rem; }
.trust-card p { margin: 0; color: #c8d5f6; line-height: 1.55; }
.trust-foot { margin: var(--space-6, 32px) 0 0; }
.trust-grid + .trust-foot .button.secondary { background: var(--card); }

/* Trust row — a compact four-icon trust strip leading the trust band. */
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); padding: 0; margin: 0 0 var(--space-6, 32px); list-style: none; }
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-onInk);
}
.trust-pill > span:last-child { min-width: 0; }
.trust-pill-icon { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; color: #FFD0A8; }
.trust-pill-icon svg { width: 20px; height: 20px; }

.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 24px); align-items: stretch; }
.story-card { display: flex; gap: 18px; align-items: flex-start; padding: 20px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--orange); }
.story-card.emphasised { grid-column: 1 / -1; border-color: var(--orange); background: var(--section-warm); }
.story-symbol { width: 60px; height: 60px; flex: none; }
.story-body { display: grid; gap: 6px; min-width: 0; }
.story-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.story-name { font-size: 1.18rem; font-weight: 800; color: var(--navy); }
.story-badge { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); background: var(--pastel-blue); border-radius: var(--radius-pill); padding: 3px 10px; }
.story-text { color: var(--muted); line-height: 1.45; }
.story-link { color: var(--orange-dark); font-weight: 700; margin-top: 2px; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5, 24px); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--card); padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-sm); }
.price-card.featured { border: 2px solid var(--orange); box-shadow: var(--shadow-md); transform: translateY(-6px); }
.price-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--orange); color: var(--color-onBrand); font-weight: 800; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 14px; border-radius: var(--radius-pill); }
.price-card h3 { margin: 0; color: var(--navy); font-size: 1.3rem; }
.price-amount { margin: 14px 0 4px; font-size: 2.2rem; font-weight: 800; color: var(--navy); line-height: 1.1; display: grid; }
.price-amount span { font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.price-blurb { margin: 8px 0 18px; color: var(--muted); line-height: 1.5; }
.price-card .check-list { margin-bottom: 24px; }
.price-cta { margin-top: auto; width: 100%; }
.price-note { margin: var(--space-6, 32px) 0 0; color: var(--muted); text-align: center; }
.price-note a { color: var(--orange-dark); font-weight: 700; }

/* FAQ */
.band-faq-inner { max-width: 820px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--card); padding: 4px 20px; }
.faq-item summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::after { content: "+"; color: var(--orange); font-weight: 800; font-size: 1.4rem; }
.faq-item[open] summary::after { content: "–"; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }

/* Final CTA */
.final-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.final-inner h2 { margin: 0; font-size: var(--font-size-h2, clamp(1.9rem, 4vw, 2.8rem)); line-height: var(--font-leading-tight, 1.12); letter-spacing: var(--font-tracking-tight, -0.02em); color: var(--color-onInk); }
.final-inner p { margin: var(--space-4, 16px) auto 0; color: #d6e0fb; font-size: var(--font-size-lg, 1.1rem); line-height: var(--font-leading-normal, 1.55); max-width: 540px; }
.final-inner .actions { justify-content: center; margin-top: var(--space-6, 32px); }

/* 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(--line-strong); border-radius: var(--radius-lg); padding: 28px; background: var(--card); }
.content-card h2 { margin: 0 0 12px; font-size: 1.25rem; color: var(--navy); }
.content-card p { margin: 0; color: var(--muted); 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(--pastel-blue); color: var(--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(--line-strong);
  background: var(--card);
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.3;
  color: var(--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(--green-ink); }
.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); }
.policy-card { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--card); padding: 28px; }
.policy-card h2 { margin: 0 0 12px; font-size: 1.25rem; color: var(--navy); }
.policy-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.policy-card .check-list { margin-top: 16px; }

/* Footer */
footer { background: var(--section); border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) var(--space-gutter, clamp(20px, 5vw, 56px)); }
.footer-top { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7, 40px); align-items: start; }
.footer-brand p { margin: 14px 0 0; color: var(--muted); max-width: 420px; line-height: 1.55; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; font-weight: 600; align-items: flex-start; }
.footer-nav a { text-decoration: none; color: var(--navy-soft); }
.footer-nav a:hover { color: var(--orange-dark); }
.footer-bottom { max-width: var(--maxw); margin: 32px auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--muted); font-size: 0.9rem; }
.footer-bottom a { color: var(--orange-dark); font-weight: 600; }

/* DEMO persona-picker */
.picker-main { min-height: calc(100vh - 76px); display: flex; align-items: center; justify-content: center; padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 48px); position: relative; }
.picker-main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: none; }
.picker-inner { width: 100%; max-width: 760px; text-align: center; }
.picker-title { margin: 0 0 14px; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.06; color: var(--navy); }
.picker-lead { margin: 0 auto 32px; max-width: 560px; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.persona-grid { display: grid; grid-template-columns: 1fr; gap: 14px; text-align: left; }
.persona-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.persona-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--orange); }
.persona-card-emphasised { border: 2px solid var(--orange); background: var(--section-warm); }
.persona-symbol { flex: 0 0 auto; width: 64px; height: 64px; }
.persona-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.persona-name { font-size: 1.18rem; font-weight: 800; color: var(--navy); }
.persona-badge { align-self: flex-start; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); background: var(--pastel-blue); border-radius: var(--radius-pill); padding: 3px 10px; }
.persona-card-emphasised .persona-badge { background: var(--card); color: var(--orange-dark); }
.persona-story { color: var(--muted); font-size: 0.96rem; line-height: 1.45; }
.persona-go { flex: 0 0 auto; color: var(--muted); }
.persona-go svg { width: 26px; height: 26px; }
.persona-card-emphasised .persona-go { color: var(--orange); }
.picker-footer { margin: 28px 0 0; color: var(--muted); font-size: 0.92rem; }

/* Responsive */
@media (min-width: 720px) {
  .persona-grid { grid-template-columns: repeat(2, 1fr); }
  .persona-card[data-persona="jonas"] { grid-column: 1 / -1; }
}
/* Mid-desktop (≈1025–1480px): tighten the header gap, nav column-gap and nav
   font just enough that 7 links + the visning-tuner + the CTA stay on ONE row
   (no links dropped). Above this the default generous spacing applies. */
@media (min-width: 1025px) and (max-width: 1480px) {
  .site-header { gap: 16px; }
  .site-header nav { gap: 6px 16px; font-size: 0.94rem; }
}
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero-stage { order: -1; }
  .levels-layout { grid-template-columns: 1fr; }
  .levels-phone-col { position: static; }
  .mode-grid, .trust-grid, .feature-grid, .price-grid, .section-grid, .problem-grid, .story-grid, .policy-grid { grid-template-columns: 1fr 1fr; }
  .mini-row-wrap { grid-template-columns: 1fr 1fr; }
  .device-grid { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; padding: 22px; border-radius: 26px; overflow: visible; }
  .device-phone, .device-tablet { grid-column: 1; grid-row: auto; transform: none; margin-top: 0; }
  .tablet { --tablet-content-scale: 0.84; }
  .price-card.featured { transform: none; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-nav { justify-content: flex-start; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 0; }
  .site-header { position: relative; z-index: 200; flex-wrap: nowrap; gap: 10px; padding: 12px 16px; }
  .brand-word { font-size: 1.45rem; }
  .site-header nav { display: none; }
  .header-tuner-trigger { order: 2; margin-left: auto; min-height: 44px; padding: 0 12px; font-size: 0.92rem; }
  .header-cta { margin-left: 0; min-height: 44px; padding: 0 12px; font-size: 0.92rem; }
  .hero { padding-top: 28px; gap: 24px; }
  .hero-stage { order: 0; }
  .hero .phone { --phone-width: min(300px, 88vw); }
  .mode-grid, .trust-grid, .feature-grid, .price-grid, .section-grid, .problem-grid, .story-grid, .policy-grid, .level-tabs, .mini-row-wrap { grid-template-columns: 1fr; }
  .story-card.emphasised { grid-column: auto; }
  .actions { width: 100%; }
  .actions .button { flex: 1; }
  .tablet-panes { grid-template-columns: 1fr; }
  .tablet-pane-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; }
  .tablet-frame { width: 100%; max-width: calc(100vw - 40px); padding: 10px; }
  .tablet-screen { aspect-ratio: 4 / 3; }
  .tablet-screen .tablet-panes { grid-template-columns: 1.25fr 1fr; gap: 16px; }
  .tablet-screen .tablet-pane-side { border-left: 1px solid var(--line); padding-left: 16px; border-top: none; padding-top: 0; }
  .tablet { --tablet-content-scale: 0.46; }
  .tablet-ui { padding: 12px 14px; gap: 10px; }
  .tablet-routine { padding: 8px 9px; }
}
html[data-a11y="large"] body,
body[data-a11y="large"] { font-size: 112.5%; }
html[data-a11y="large"] body .intro,
html[data-a11y="large"] body .band-lead,
html[data-a11y="large"] body .mode-card p,
html[data-a11y="large"] body .feature-card p,
body[data-a11y="large"] .intro,
body[data-a11y="large"] .band-lead,
body[data-a11y="large"] .mode-card p,
body[data-a11y="large"] .feature-card p { color: var(--navy); }
html[data-a11y="calm"] body .proof-list,
html[data-a11y="calm"] body .persona-story,
html[data-a11y="calm"] body .device-caption,
body[data-a11y="calm"] .proof-list,
body[data-a11y="calm"] .persona-story,
body[data-a11y="calm"] .device-caption { display: none; }
html[data-a11y="calm"] body .band,
body[data-a11y="calm"] .band { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(44px, 6vw, 76px); }
html[data-a11y="calm"] body .feature-card,
html[data-a11y="calm"] body .mode-card,
html[data-a11y="calm"] body .problem-card,
body[data-a11y="calm"] .feature-card,
body[data-a11y="calm"] .mode-card,
body[data-a11y="calm"] .problem-card { box-shadow: none; border-color: var(--navy); }
@media (min-width: 1600px) { :root { --maxw: 1320px; } }
@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, .feature-card p, .mode-card p { color: var(--navy); }
}


.calendar-integrations {
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-screenBg) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--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__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.calendar-provider-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  min-height: 100%;
  padding: 18px;
  border: 1px solid var(--line-strong);
  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(--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(--muted); }
.calendar-provider-card__access {
  align-self: end;
  font-size: 0.9rem;
  color: var(--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(--orange);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-weight: 750;
  color: var(--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-toneBlue: #E4ECFB;
  --color-toneGreen: #E5F3E9;
  --color-tonePeach: #FCEDE0;
  --color-toneLilac: #EEEAF9;
  --color-focus: #0B5FD4;
  --color-focusRing: rgba(11,95,212,0.45);
  --color-ring: rgba(21,32,59,0.10);
  --color-overlay: rgba(21,32,59,0.55);
  --gradient-sun: linear-gradient(180deg, #FFCF6B 0%, #F0671F 100%);
  --gradient-sunRadial: radial-gradient(120% 120% at 50% 0%, #FFCF6B 0%, #F0671F 70%);
  --gradient-brand: linear-gradient(135deg, #E2611C 0%, #C2470F 100%);
  --gradient-warmField: linear-gradient(180deg, #FFF7EC 0%, #FBE9D4 100%);
  --gradient-inkField: linear-gradient(160deg, #1E2A55 0%, #15203B 100%);
  --gradient-creamFade: linear-gradient(180deg, #FFFFFF 0%, #FFF7EC 100%);
  --font-sans: -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-done-bg: var(--color-doneBg, #E7F3EB);
  --bruk-done-ink: var(--color-doneInk, #236B3C);
  --bruk-screen: var(--color-screenBg, #F4F6FB);

  display: block;
  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);
}
.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);
}

/* ---- 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;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-height: 48px;
  padding: 12px 22px;
  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__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1, 4px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.bruk-toc__item { margin: 0; }
.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__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; }

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

/* ---- Hero controls: edition switch + print ------------------------------- */
.bruk-hero__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4, 16px) var(--space-5, 24px);
}

/* 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); }
/* 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: rgba(255,255,255,0.92); }

/* ---- Chapters ------------------------------------------------------------ */
.bruk-chapters { display: grid; gap: var(--space-7, 48px); }

.bruk-ch {
  box-sizing: border-box;
  min-width: 0;
  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));
}

.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__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);
}
.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;
}
.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 {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--bruk-muted);
  text-align: center;
  max-width: 46ch;
}

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

/* 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__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);
  border: 2px solid var(--bruk-line-strong);
  border-radius: var(--radius-xl, 30px);
}
.bruk-ch__caption {
  margin: 0;
  max-width: 40ch;
  font-size: var(--font-size-lg, 1.1875rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--bruk-ink);
}

/* 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-ch { padding-left: 16px; padding-right: 16px; }
}

/* ---- 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: 72%; height: 72%; }
.bruk-symfig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 28vw, 160px);
  height: clamp(120px, 28vw, 160px);
  color: var(--bruk-brand-strong);
  background: var(--color-tonePeach, #FCEDE0);
  border: 2px solid var(--bruk-line-strong);
  border-radius: var(--radius-xl, 30px);
}

/* ---- 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; }
[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; }
/* 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 — phone mock, screens, ASK tiles, calendar
   ========================================================================= */

.bruk-phone {
  position: relative;
  width: 100%;
  max-width: min(280px, 100%);
  aspect-ratio: 9 / 18.5;
  padding: 14px;
  background: linear-gradient(160deg, #2a3354 0%, #15203B 100%);
  border-radius: var(--radius-phone, 46px);
  box-shadow: var(--shadow-lg, 0 26px 64px rgba(21,32,59,0.16));
}
.bruk-phone__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 18px;
  background: #15203B;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.bruk-phone__screen {
  position: relative;
  height: 100%;
  padding: 14px 12px;
  background: var(--bruk-screen);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bruk-phone__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bruk-ink);
  padding: 0 4px 2px;
}
.bruk-phone__dots {
  width: 26px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bruk-ink) 60%, var(--bruk-line-strong) 60%);
  opacity: 0.7;
}
.bruk-phone__bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.65);
}

/* Generic in-screen surface */
.bruk-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  font-size: 0.82rem;
  color: var(--bruk-ink);
}
.bruk-screen__title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;

  flex-wrap: wrap;
}
.bruk-screen__date, .bruk-screen__sub { font-weight: 500; color: var(--bruk-muted); }
.bruk-screen__sub { margin: 0; font-size: 0.8rem; }
.bruk-screen__kicker {
  margin: 4px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bruk-muted);
}
.bruk-screen__hint, .bruk-screen__big { margin: 0; }
.bruk-screen__big {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}
.bruk-screen__hint { font-size: 0.74rem; color: var(--bruk-muted); }
.bruk-center { text-align: center; justify-content: center; }

.bruk-screen__readaloud,
.bruk-bigbtn .bruk-screen__readaloud {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-onBrand, #FFFFFF);
  background: var(--bruk-brand-strong);
  border-radius: var(--radius-pill, 999px);
}
.bruk-bigbtn { display: flex; justify-content: center; }
.bruk-bigbtn .bruk-screen__readaloud { font-size: 0.9rem; padding: 10px 18px; }

.bruk-screen__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bruk-screen__list--tight { gap: 5px; }
.bruk-screen__list--check { gap: 6px; }

.bruk-row, .bruk-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: var(--bruk-surface);
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-sm, 10px);
}
.bruk-row__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.bruk-row__text b { font-weight: 700; }
.bruk-row__text small { color: var(--bruk-muted); font-size: 0.72rem; }
.bruk-row__status {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill, 999px);
}
/* Status uses BOTH colour and a text label, so meaning is never colour-only. */
.bruk-row--now { border-color: var(--bruk-now-ink); background: var(--bruk-now-bg); }
.bruk-row__status--now { background: var(--bruk-now-ink); color: #fff; }
.bruk-row--next { background: var(--bruk-next-bg); }
.bruk-row__status--next { background: var(--bruk-next-ink); color: #fff; }
.bruk-row--done { background: var(--bruk-done-bg); }
.bruk-row--done .bruk-row__text b { color: var(--bruk-done-ink); }
.bruk-row__status--done { background: var(--bruk-done-ink); color: #fff; }

/* ASK symbol tiles */
.bruk-ask {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-tonePeach, #FCEDE0);
  border-radius: var(--radius-md, 16px);
  padding: 4px;
}
.bruk-ask img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bruk-ask--sm { width: 34px; height: 34px; border-radius: var(--radius-sm, 10px); }
.bruk-ask--md { width: 56px; height: 56px; }
.bruk-ask--lg { width: 104px; height: 104px; align-self: center; }
.bruk-ask-inline { width: 22px; height: 22px; vertical-align: -4px; }

/* Tick / checkbox */
.bruk-tick {
  flex: 0 0 auto;
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 2px solid var(--bruk-line-strong);
  border-radius: 7px;
  background: var(--bruk-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bruk-tick--done {
  border-color: var(--bruk-done-ink);
  background: var(--bruk-done-ink);
  color: #fff;
}
.bruk-check--done .bruk-row__text b { color: var(--bruk-done-ink); }
.bruk-lock { margin-left: auto; color: var(--bruk-muted); display: inline-flex; }

/* Bilde-profile big card / Enkel big cards */
.bruk-screen--bilde { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.bruk-bigcard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-weight: 700;
  background: var(--bruk-surface);
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-md, 16px);
}
.bruk-bigcard--now { background: var(--bruk-now-bg); border-color: var(--bruk-now-ink); }

/* Start screen */
.bruk-screen--start { align-items: stretch; text-align: center; gap: 10px; }
.bruk-startlogo { display: flex; justify-content: center; }
.bruk-choice {
  padding: 10px;
  border-radius: var(--radius-md, 16px);
  background: var(--bruk-brand-strong);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bruk-choice b { font-size: 0.96rem; }
.bruk-choice small { font-size: 0.72rem; opacity: 0.92; }
.bruk-choice--ghost {
  background: var(--bruk-surface);
  color: var(--bruk-ink);
  border: 2px solid var(--bruk-line-strong);
}

/* Alert screen */
.bruk-screen--alert { justify-content: center; }
.bruk-alert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 14px 12px;
  background: var(--bruk-surface);
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-lg, 22px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(21,32,59,0.07));
}
.bruk-alert__title { margin: 0; font-weight: 700; font-size: 0.92rem; }
.bruk-alert__btns { display: grid; gap: 6px; width: 100%; }
.bruk-btn {
  padding: 9px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-pill, 999px);
  background: var(--bruk-cream);
  border: 1px solid var(--bruk-line-strong);
  color: var(--bruk-ink);
  text-align: center;
}
.bruk-btn--ok { background: var(--bruk-brand-strong); border-color: var(--bruk-brand-strong); color: #fff; }
.bruk-btn--help { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--bruk-now-bg); border-color: var(--bruk-now-ink); color: var(--bruk-now-ink); }

/* Timer ring (nedtelling) */
.bruk-timerring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.bruk-timerring__num {
  position: absolute;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--bruk-brand-strong);
}

/* Sync / offline badges */
.bruk-syncbadge, .bruk-shield { align-self: center; }
.bruk-syncbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--bruk-next-ink);
  background: var(--bruk-next-bg);
  border-radius: var(--radius-pill, 999px);
}
.bruk-shield { color: var(--bruk-brand-strong); display: flex; justify-content: center; }

/* Mini calendar */
.bruk-cal {
  background: var(--bruk-surface);
  border: 1px solid var(--bruk-line);
  border-radius: var(--radius-md, 16px);
  padding: 8px;
}
.bruk-cal { min-width: 0; }
.bruk-cal__head, .bruk-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
}
.bruk-cal__cell, .bruk-cal__wd { min-width: 0; }
.bruk-cal__wd {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--bruk-muted);
  text-transform: uppercase;
  padding-bottom: 2px;
}
.bruk-cal__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 600;
  border-radius: 6px;
  color: var(--bruk-ink);
}
.bruk-cal__cell--empty { visibility: hidden; }
.bruk-cal__cell--today {
  background: var(--bruk-brand-strong);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--color-brandSoft, #FBE6D2);
}
.bruk-cal__dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bruk-brand);
}
.bruk-cal__cell--today .bruk-cal__dot { background: #fff; }

/* Laptop + sharing illustration */
.bruk-share {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  justify-items: center;
  width: 100%;
}
.bruk-laptop { width: 100%; max-width: min(320px, 100%); }
.bruk-laptop__screen {
  background: var(--bruk-screen);
  border: 10px solid #15203B;
  border-radius: 14px 14px 0 0;
  padding: 12px;
  font-size: 0.82rem;
  display: grid;
  gap: 8px;
}
.bruk-laptop__base {
  display: block;
  height: 10px;
  background: linear-gradient(180deg, #2a3354, #15203B);
  border-radius: 0 0 10px 10px;
  margin: 0 auto;
  width: 100%;
  max-width: none;
}
.bruk-share__link { display: flex; align-items: center; gap: 4px; width: 60%; justify-content: center; }
.bruk-share__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bruk-brand); flex: 0 0 auto; }
.bruk-share__wire { height: 3px; flex: 1 1 auto; background: repeating-linear-gradient(90deg, var(--bruk-brand) 0 8px, transparent 8px 14px); }
.bruk-share .bruk-phone { max-width: 200px; }

@media (min-width: 560px) {
  .bruk-share { grid-template-columns: 1.1fr auto 0.9fr; }
  .bruk-share__link { width: auto; min-width: 56px; }
}

/* Profiles grid (four small phones) */
.bruk-profiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 3vw, 28px);
  width: 100%;
}
@media (min-width: 520px) {
  .bruk-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bruk-profile { margin: 0; display: grid; gap: 8px; justify-items: center; }
.bruk-profile .bruk-phone { max-width: 190px; }
.bruk-profile figcaption {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--bruk-muted);
  text-align: center;
}
.bruk-profile__tag {
  display: inline-block;
  font-weight: 700;
  color: var(--bruk-brand-strong);
}
@media (min-width: 1080px) {
  .bruk-profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Visually-hidden helper local to the manual (does not depend on a global). */
.bruk-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

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

/* Focus-visible rings on every interactive manual control (TOC links, edition
   buttons, print) — keyboard users always see where they are. */
.bruk-toc__item a:focus-visible,
.bruk-ed__btn:focus-visible,
.bruk-print:focus-visible {
  outline: 3px solid var(--bruk-focus, #0B5FD4);
  outline-offset: 2px;
}

/* Forced-colors (Windows high contrast): keep the selected edition and the
   chapter symbol tiles visible as real outlines (meaning is never colour-only). */
@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-symfig, .bruk-toc__sym { forced-color-adjust: auto; }
}

/* =========================================================================
   PRINT — turn the page into a real, shippable A4 manual. The selected edition
   prints (non-selected chapters/shapes stay display:none via data-manual-edition).
   ========================================================================= */
@media print {
  @page {
    size: A4 portrait;
    margin: 18mm 16mm 20mm;
  }

  /* Hide all site chrome and interactive-only controls (documented hooks). */
  header.site-header,
  footer,
  .view-tuner,
  .bruk-ed,
  .bruk-print,
  .skip-link {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Force background art / ASK symbols to actually print. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .bruk {
    max-width: none;
    margin: 0;
    padding: 0;
    color: #000;
  }

  /* Running header: Dagly wordmark + "Bruksanvisning" on every printed page. */
  .bruk-hero {
    background: #fff !important;
    border: 0;
    border-bottom: 2px solid #000;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 8mm;
    margin: 0 0 8mm;
  }
  .bruk-hero::before {
    content: "Dagly · Bruksanvisning";
    display: block;
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4mm;
    color: #000;
  }
  .bruk-eyebrow { color: #000; }
  .bruk-h1 { font-size: 24pt; color: #000; }
  .bruk-intro { color: #000; font-size: 12pt; max-width: none; }

  /* Table of contents prints as a plain index. */
  .bruk-toc {
    background: #fff;
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
    margin-bottom: 8mm;
  }
  .bruk-toc__heading { color: #000; }
  .bruk-toc__list { grid-template-columns: 1fr 1fr; }
  .bruk-toc__item a { color: #000; min-height: 0; padding: 2px 0; }
  .bruk-toc__num { background: #000 !important; color: #fff !important; width: 22px; height: 22px; }
  .bruk-toc__sym { color: #000; }

  .bruk-chapters { gap: 0; }

  /* Each chapter is one self-contained block that does not split across pages. */
  .bruk-ch {
    break-inside: avoid;
    page-break-inside: avoid;
    background: #fff;
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 6mm;
    padding: 5mm;
  }
  .bruk-ch__sym {
    background: #000 !important;
    color: #fff !important;
    box-shadow: none;
    width: 34px;
    height: 34px;
  }
  .bruk-ch__title { color: #000; font-size: 15pt; }
  .bruk-ch__num { color: #000; }
  .bruk-ch__lead, .bruk-ch__steps li, .bruk-ch__caption { color: #000; font-size: 10.5pt; }
  .bruk-ch__steps li::before { background: #000 !important; color: #fff !important; }
  .bruk-ch__figure figcaption { color: #000; }
  .bruk-ch__shape--full {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
    gap: 5mm;
  }
  .bruk-ch__bigsym, .bruk-symfig { color: #000; background: #fff !important; border-color: #000; }

  /* Keep phone illustrations crisp and contained on paper. */
  .bruk-phone {
    background: #fff !important;
    border: 1.5pt solid #000;
    box-shadow: none;
    max-width: 56mm;
  }
  .bruk-phone__notch, .bruk-phone__bar { display: none; }
  .bruk-phone__screen { background: #fff !important; }
  .bruk-profiles { grid-template-columns: repeat(2, 1fr); }
  .bruk-profile .bruk-phone, .bruk-share .bruk-phone { max-width: 44mm; }
  .bruk-row, .bruk-check, .bruk-bigcard, .bruk-alert, .bruk-cal, .bruk-laptop__screen {
    border-color: #000 !important;
  }

  /* Contact block + a print footer line on the last page. */
  .bruk-contact {
    background: #fff !important;
    border: 1px solid #000;
    border-radius: 0;
    break-inside: avoid;
    margin-top: 6mm;
  }
  .bruk-contact h2, .bruk-contact p, .bruk-contact a, .bruk-contact__label { color: #000 !important; }
  .bruk-contact::after {
    content: "post@tinko.no · dagly.no · TINKO AS";
    display: block;
    margin-top: 5mm;
    padding-top: 3mm;
    border-top: 1px solid #000;
    font-size: 9pt;
    text-align: center;
    color: #000;
  }
}



/* =========================================================================
   DEMO SECTION  (.dly-demo)
   The driveable marketing demo: heading, persona chips, switch controls,
   the device stage, the polite live region and the deep-link CTA.
   ========================================================================= */

.dly-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-ink);
  font-family: var(--font-sans);
}

.dly-demo__heading {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

/* --- Persona chips ------------------------------------------------------- */

.dly-demo__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}

.dly-demo__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.dly-demo__chip-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
}

.dly-demo__chip-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-inkMuted);
  letter-spacing: 0.02em;
}

.dly-demo__chip--active {
  border-color: var(--color-brand);
  background: var(--color-nowBg);
  box-shadow: var(--shadow-md);
}

.dly-demo__chip--active .dly-demo__chip-name {
  color: var(--color-brandStrong);
}

.dly-demo__chip--active .dly-demo__chip-badge {
  color: var(--color-brandStrong);
}

/* --- Switch controls row (ModeSwitch + DeviceSwitch) --------------------- */

.dly-demo__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  width: 100%;
}

/* Primary control group — a single calm, centered column: a quiet label over
   one full-width 3-segment level switch. One clear control, no clutter. */
.dly-demo__controls--primary {
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

.dly-demo__controls-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-inkMuted);
}

/* The primary level switch fills its calm column and lays its three segments
   out as equal columns so Bilde / Enkel / Full always sit on ONE tidy row. */
.dly-demo__controls--primary .dly-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  flex-wrap: nowrap;
}

.dly-demo__controls--primary .dly-seg__btn {
  width: 100%;
  padding-inline: var(--space-2);
}

/* --- Stage that holds the device frame ----------------------------------- */

.dly-demo__stage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: var(--space-5) 0;
}

/* --- Polite live region: keep it visually offscreen WITHOUT relying on the
   global .visually-hidden helper (scoped, so the a11y agent stays in charge). */

.dly-demo__live {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Deep-link CTA into the full seeded app ------------------------------ */

.dly-demo__cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Clean premium SECONDARY CTA, consistent with the site's .button.secondary
   system: light surface, navy ink, a calm line border and the shared button
   radius/height. Reads as a quiet companion to the primary CTAs, not an
   orange slab. */
.dly-demo__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  max-width: 360px;
  padding: 0 28px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-navy);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dly-demo__cta-link:hover {
  border-color: var(--color-navy);
  box-shadow: var(--shadow-md);
}

/* =========================================================================
   SEGMENTED CONTROLS  (.dly-seg) — ModeSwitch (profil) + DeviceSwitch
   Pill segmented control with a clear active state and 44px touch targets.
   ========================================================================= */

.dly-seg {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surfaceSubtle);
  box-shadow: inset 0 1px 2px rgba(27, 34, 64, 0.05);
}

.dly-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-inkMuted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.dly-seg__btn--active {
  background: var(--color-surface);
  color: var(--color-navy);
  box-shadow: var(--shadow-sm);
}

.dly-seg--device .dly-seg__btn--active {
  background: var(--color-navy);
  color: #fff;
}

/* =========================================================================
   DEVICE FRAMES  (.dly-frame)
   One frame that hosts the same screen as phone / tablet / wall, portrait &
   landscape. The screen is aspect-ratio'd from --frame-w / --frame-h and is a
   CSS container; everything inside scales off it.
   ========================================================================= */

.dly-frame {
  --frame-w: 390;
  --frame-h: 844;
  /* Bezel/border thickness, kept proportional but clamped for realism. */
  --bezel: clamp(8px, 2.4cqmin, 16px);
  /* Height budget for the whole frame so a tall (portrait) device can never
     overflow the viewport and clip its own bezel below the fold. The screen
     height = frame-width * frame-h / frame-w, so we cap the *width* by the
     aspect ratio: width <= cap-h * frame-w / frame-h. 84svh leaves room for the
     demo controls; svh tracks the *small* mobile viewport so address-bar
     chrome never re-clips. The min() keeps the per-variant width clamps and the
     100% container guard, then layers the aspect-derived height cap on top —
     whichever constraint binds first wins, so NO dimension clips. (§5.4) */
  --frame-cap-h: 84svh;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: min(
    100%,
    calc(var(--frame-cap-h) * var(--frame-w) / var(--frame-h))
  );
}
/* The wall sits on a desk stand that adds height below the panel; trim its
   height budget so the panel + neck + base together still clear the viewport. */
.dly-frame--wall {
  --frame-cap-h: 72svh;
}
/* Older engines without svh fall back to vh (declared first, svh overrides). */
@supports not (height: 1svh) {
  .dly-frame { --frame-cap-h: 80vh; }
  .dly-frame--wall { --frame-cap-h: 68vh; }
}

/* The bezel is the physical body: rounded, dark, with the deep device shadow. */
.dly-frame__bezel {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--bezel);
  background: linear-gradient(160deg, #2b3354 0%, #161c33 60%, #0f1426 100%);
  box-shadow:
    var(--shadow-device),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08),
    inset 0 0 0 3px rgba(0, 0, 0, 0.35);
}

/* The actual app viewport: fixed aspect-ratio, light background, a CSS
   container so inner units (cqmin/cqi) resolve against the screen size. */
.dly-frame__screen {
  position: relative;
  display: block;
  aspect-ratio: var(--frame-w) / var(--frame-h);
  width: 100%;
  /* (Global "* { box-sizing: border-box }" reset keeps the Høy-kontrast 2px
     border — added by viewModeStyles — inside the screen, so it never
     overflows the bezel padding. No local box-sizing needed.) */
  overflow: hidden;
  background: var(--color-screenBg);
  container-type: size;
  container-name: screen;
  /* The single scaling unit the in-screen app UI is built on. A static px
     fallback precedes the container unit so the whole in-frame UI never
     collapses to 0 where container queries are unsupported (B-12). */
  --u: 3.4px;
  --u: 3.4cqmin;
  font-family: var(--font-sans);
  color: var(--color-ink);
}

/* ---- Phone -------------------------------------------------------------- */

.dly-frame--phone .dly-frame__bezel {
  border-radius: var(--radius-phone);
}
.dly-frame--phone .dly-frame__screen {
  border-radius: calc(var(--radius-phone) - var(--bezel) + 2px);
}
/* The phone status bar sits in the Dynamic-Island row — time on the left,
   battery on the right, the island centred between them. It is absolutely
   positioned and the scrolling screen is pushed down by its height, so the app
   header (greeting/date) always clears the island. (.dly-screen is inset:0.) */
.dly-frame--phone .dly-frame__screen {
  --statusbar-h: clamp(36px, 13cqmin, 56px);
}
.dly-frame--phone .dly-statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: var(--statusbar-h);
  padding-top: clamp(12px, 4.6cqmin, 24px);
  align-items: flex-start;
}
.dly-frame--phone .dly-screen {
  top: var(--statusbar-h);
}
.dly-frame--phone.dly-frame--showcase {
  width: clamp(240px, 78vw, 320px);
}
.dly-frame--phone.dly-frame--hero {
  width: clamp(250px, 80vw, 340px);
}
.dly-frame--phone.dly-frame--compact {
  width: clamp(200px, 60vw, 260px);
}
/* Landscape phone is wider than tall — size by viewport width. */
.dly-frame--phone.dly-frame--landscape {
  width: clamp(360px, 90vw, 620px);
}

/* Dynamic Island — the camera pill near the top of the phone. */
.dly-frame__island {
  position: absolute;
  top: calc(var(--bezel) + 1.4cqmin);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30cqmin;
  max-width: 116px;
  height: 8cqmin;
  max-height: 30px;
  min-height: 18px;
  border-radius: var(--radius-pill);
  background: #05070f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.dly-frame--landscape .dly-frame__island {
  /* In landscape the island rides the short (left) edge. */
  top: 50%;
  left: calc(var(--bezel) + 1.4cqmin);
  transform: translateY(-50%);
  width: 8cqmin;
  height: 26cqmin;
  max-height: 116px;
}

/* Side buttons on the phone body. */
.dly-frame__btn {
  position: absolute;
  z-index: 1;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #3a4366 0%, #20263f 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
.dly-frame__btn--vol,
.dly-frame__btn--silent,
.dly-frame__btn--pwr {
  width: 3px;
}
.dly-frame__btn--silent {
  left: -3px;
  top: 16%;
  height: 5%;
}
.dly-frame__btn--vol {
  left: -3px;
  top: 24%;
  height: 12%;
}
.dly-frame__btn--pwr {
  right: -3px;
  top: 22%;
  height: 9%;
}
/* Rotate the button rail to the bottom/top edge when the phone lies down. */
.dly-frame--landscape .dly-frame__btn--silent {
  left: 16%;
  top: auto;
  bottom: -3px;
  width: 5%;
  height: 3px;
}
.dly-frame--landscape .dly-frame__btn--vol {
  left: 24%;
  top: auto;
  bottom: -3px;
  width: 12%;
  height: 3px;
}
.dly-frame--landscape .dly-frame__btn--pwr {
  left: 22%;
  right: auto;
  top: -3px;
  width: 9%;
  height: 3px;
}

/* ---- Tablet ------------------------------------------------------------- */

.dly-frame--tablet .dly-frame__bezel {
  /* Thin, uniform bezel. */
  --bezel: clamp(10px, 3cqmin, 20px);
  border-radius: var(--radius-tablet);
}
.dly-frame--tablet .dly-frame__screen {
  border-radius: calc(var(--radius-tablet) - var(--bezel) + 2px);
  /* Static px fallback before the container unit (B-12). */
  --u: 2.4px;
  --u: 2.4cqmin;
}
.dly-frame--tablet.dly-frame--showcase {
  width: clamp(320px, 86vw, 560px);
}
.dly-frame--tablet.dly-frame--portrait {
  width: clamp(300px, 70vw, 460px);
}
.dly-frame--tablet.dly-frame--compact {
  width: clamp(260px, 60vw, 400px);
}

/* ---- Wall (wide 16:10 panel on a slim desk stand) ----------------------- */

.dly-frame--wall {
  width: clamp(340px, 92vw, 720px);
}
.dly-frame--wall .dly-frame__bezel {
  --bezel: clamp(6px, 1.6cqmin, 12px);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #20263f 0%, #0c1022 100%);
}
.dly-frame--wall .dly-frame__screen {
  border-radius: var(--radius-sm);
  /* Static px fallback before the container unit (B-12). */
  --u: 1.9px;
  --u: 1.9cqmin;
}

/* Desk stand under the wall panel: a slim neck on a flat base. */
.dly-frame__stand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.dly-frame__stand-neck {
  width: clamp(10px, 4%, 24px);
  height: clamp(14px, 4cqmin, 34px);
  background: linear-gradient(180deg, #2b3354, #1a2038);
  border-radius: 0 0 4px 4px;
}
.dly-frame__stand-base {
  width: clamp(120px, 38%, 280px);
  height: clamp(8px, 1.6cqmin, 14px);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #232a47, #12172b);
  box-shadow: var(--shadow-lg);
}

/* ---- Camera lenses (tablet + wall) and the shared camera dot ------------ */

.dly-frame__lens {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dly-frame--tablet .dly-frame__lens,
.dly-frame--wall .dly-frame__lens {
  top: calc(var(--bezel) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Portrait tablet: camera centred on the top short edge (already correct);
   landscape tablet: camera rides the centre of the left long edge. */
.dly-frame--tablet.dly-frame--landscape .dly-frame__lens {
  top: 50%;
  left: calc(var(--bezel) / 2);
  transform: translate(-50%, -50%);
}

.dly-frame__cam {
  display: block;
  width: clamp(6px, 1.4cqmin, 11px);
  height: clamp(6px, 1.4cqmin, 11px);
}
.dly-frame__cam-ring { fill: #05070f; }
.dly-frame__cam-lens { fill: #11203f; }
.dly-frame__cam-glint { fill: rgba(255, 255, 255, 0.6); }

/* =========================================================================
   IN-SCREEN APP CHROME  (status bar + bottom nav)
   ========================================================================= */

/* ---- StatusBar (exported primitive; HH:MM + cellular/wifi/battery) ------ */

.dly-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6) calc(var(--u) * 0.4);
  color: var(--color-ink);
  font-size: calc(var(--u) * 1.25);
  font-weight: var(--font-weight-semibold);
}
.dly-statusbar__time {
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.dly-statusbar__icons {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  color: var(--color-ink);
}
.dly-statusbar__glyph {
  display: block;
  height: calc(var(--u) * 1.25);
  width: auto;
}

/* ---- BottomNav (.dly-nav) — navigation of profil-exposed destinations --- */

.dly-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: calc(var(--u) * 0.4);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(6px);
  border-top: 1px solid var(--color-line);
}
.dly-nav__tabs {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: calc(var(--u) * 0.3);
  padding: 0 calc(var(--u) * 0.6);
}
.dly-nav__tab {
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.3);
  min-width: 0;
  min-height: calc(var(--u) * 6.2);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.2);
  border: 0;
  background: transparent;
  color: var(--color-inkMuted);
  /* Bottom-tab label — floor at 12px so it never drops to ~9px on small frames. */
  font-size: max(12px, calc(var(--u) * 0.95));
  font-weight: var(--font-weight-medium);
  line-height: 1.05;
  cursor: pointer;
}
.dly-nav__ico {
  display: inline-flex;
}
.dly-nav__ico svg {
  display: block;
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
}
.dly-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dly-nav__tab--active {
  color: var(--color-brandStrong);
  font-weight: var(--font-weight-semibold);
}
.dly-nav__tab--more {
  color: var(--color-inkMuted);
  cursor: default;
}
/* Home indicator pill at the very bottom of the screen. */
.dly-nav__home {
  display: block;
  width: 36%;
  height: calc(var(--u) * 0.55);
  margin: calc(var(--u) * 0.5) auto;
  border-radius: var(--radius-pill);
  background: rgba(27, 34, 64, 0.32);
}

/* =========================================================================
   APP SCREEN ROOT  (.dly-screen)
   The same content fills every frame; it scrolls within the screen and leaves
   room for the absolutely-positioned bottom nav.
   ========================================================================= */

.dly-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6);
  /* Leave room for the bottom nav (≈ 8 units tall) + safe area. */
  padding-bottom: calc(var(--u) * 9);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-size: calc(var(--u) * 1.25);
}
.dly-screen::-webkit-scrollbar { display: none; }

/* Date line under the Standard greeting card. */
.dly-screen__date {
  margin: calc(var(--u) * 0.2) 0 0;
  font-size: calc(var(--u) * 1.15);
  color: var(--color-inkMuted);
}
.dly-screen__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
  margin: 0;
  padding: 0;
}
.dly-screen__list-item { display: block; }
.dly-screen__empty {
  margin: auto;
  font-size: calc(var(--u) * 1.4);
  color: var(--color-inkMuted);
}

/* A whole card wrapped in a select <button>: strip button chrome, full width. */
.dly-card-select {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-lg);
}

/* =========================================================================
   ACTIVITY CARD  (.dly-card)
   White card with soft elevation; a left status spine tinted by tone.
   ========================================================================= */

.dly-card {
  --tone-bg: var(--color-surface);
  --tone-ink: var(--color-ink);
  --tone-spine: var(--color-line);
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.dly-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--u) * 0.6);
  background: var(--tone-spine);
}
.dly-card--now {
  --tone-bg: var(--color-nowBg);
  --tone-ink: var(--color-nowInk);
  --tone-spine: var(--color-nowInk);
}
.dly-card--next {
  --tone-bg: var(--color-nextBg);
  --tone-ink: var(--color-nextInk);
  --tone-spine: var(--color-nextInk);
}
.dly-card--done {
  --tone-bg: var(--color-doneBg);
  --tone-ink: var(--color-doneInk);
  --tone-spine: var(--color-doneInk);
}

.dly-card__main {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  padding-left: calc(var(--u) * 1.6);
}
.dly-card__symbol { flex: none; }
.dly-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.35);
}
.dly-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 0.8);
}
.dly-card__title {
  margin: 0;
  font-size: calc(var(--u) * 1.45);
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dly-card__status {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.8);
  border-radius: var(--radius-pill);
  background: var(--tone-bg);
  color: var(--tone-ink);
  font-size: calc(var(--u) * 0.95);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.dly-card__status--now { background: var(--color-nowBg); color: var(--color-nowInk); }
.dly-card__status--next { background: var(--color-nextBg); color: var(--color-nextInk); }
.dly-card__status--done { background: var(--color-doneBg); color: var(--color-doneInk); }

.dly-card__time,
.dly-card__loc {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  margin: 0;
  font-size: calc(var(--u) * 1.1);
  color: var(--color-inkMuted);
  font-variant-numeric: tabular-nums;
}
.dly-card__rowico {
  display: inline-flex;
  flex: none;
  color: var(--color-inkMuted);
}
.dly-card__rowico svg {
  display: block;
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
}

/* Big variant for Bilde / Enkel: larger symbol, title and pills. */
.dly-card--big .dly-card__main {
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 1.6);
  padding-left: calc(var(--u) * 2);
}
.dly-card--big .dly-card__title { font-size: calc(var(--u) * 1.85); line-height: 1.12; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; }
.dly-card--big .dly-card__time,
.dly-card--big .dly-card__loc { font-size: calc(var(--u) * 1.4); }
.dly-card--big .dly-card__status { font-size: calc(var(--u) * 1.15); }

/* =========================================================================
   READ-ALOUD BUTTON  (.dly-readaloud) — "Les opp"
   ========================================================================= */

.dly-readaloud {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  margin-top: calc(var(--u) * 0.4);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: #fff;
  font-size: calc(var(--u) * 1.2);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.dly-readaloud__ico { display: inline-flex; }
.dly-readaloud__ico svg {
  display: block;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
}

/* =========================================================================
   SYMBOL TILE  (.dly-symbol) — tinted ASK-symbol tile (only allowed raster)
   ========================================================================= */

.dly-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--color-toneBlue);
}
.dly-symbol img {
  display: block;
  width: 64%;
  height: 64%;
  object-fit: contain;
}
.dly-symbol--blue { background: var(--color-toneBlue); }
.dly-symbol--green { background: var(--color-toneGreen); }
.dly-symbol--peach { background: var(--color-tonePeach); }
.dly-symbol--lilac { background: var(--color-toneLilac); }

.dly-symbol--sm { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: var(--radius-sm); }
.dly-symbol--md { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
.dly-symbol--lg { width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: var(--radius-lg); }
.dly-symbol--xl {
  width: min(calc(var(--u) * 18), 70cqmin);
  height: min(calc(var(--u) * 18), 70cqmin);
  border-radius: var(--radius-xl);
}

/* =========================================================================
   ANALOG CLOCK  (.dly-clock) — Full (Vis støtte av) header clock
   ========================================================================= */

.dly-clock {
  display: block;
  flex: none;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
}
.dly-clock--xs { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); }
.dly-clock--sm { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.dly-clock--md { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }

.dly-clock__face { fill: var(--color-surface); stroke: var(--color-line); stroke-width: 2; }
.dly-clock__tick { stroke: var(--color-inkMuted); stroke-width: 1.4; stroke-linecap: round; }
.dly-clock__tick--major { stroke: var(--color-navy); stroke-width: 2.4; }
.dly-clock__numeral {
  fill: var(--color-navy);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: var(--font-sans);
}
.dly-clock__hand { stroke: var(--color-navy); stroke-linecap: round; }
.dly-clock__hand--hour { stroke-width: 4.2; }
.dly-clock__hand--minute { stroke-width: 3; }
.dly-clock__pin { fill: var(--color-brand); }

/* =========================================================================
   MIN DAG — shared timeline sections (Full (Vis støtte on/off))
   A small eyebrow label above a list of activity cards. The three levels all
   reuse .dly-card but compose it into visibly different layouts (below).
   ========================================================================= */

.dly-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
}
.dly-section__label {
  margin: 0;
  font-size: calc(var(--u) * 1.05);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-inkMuted);
}

/* =========================================================================
   MIN DAG — greeting card (Full (Vis støtte on/off))
   Avatar initial + "Hei, {navn}" + subtitle, with the Dikter / Synk quick
   actions on the trailing edge. This is the strongest "Full vs Enkel"
   tell at a glance.
   ========================================================================= */

.dly-greet {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-nowBg), var(--color-surface));
  box-shadow: var(--shadow-sm);
}
.dly-greet__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: #fff;
  font-size: calc(var(--u) * 2);
  font-weight: var(--font-weight-bold);
}
.dly-greet__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.2);
}
.dly-greet__name {
  margin: 0;
  font-size: calc(var(--u) * 1.9);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-navy);
}
.dly-greet__subtitle {
  margin: 0;
  font-size: calc(var(--u) * 1.1);
  color: var(--color-inkMuted);
}
.dly-greet__actions {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: calc(var(--u) * 0.5);
}
.dly-greet__action {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  min-height: max(36px, calc(var(--u) * 3.4));
  padding: calc(var(--u) * 0.4) calc(var(--u) * 0.9);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-navy);
  /* Real button label — floor at 14px so it never drops to ~10px on small frames. */
  font-size: max(14px, calc(var(--u) * 1.05));
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.dly-greet__action-ico { display: inline-flex; }
.dly-greet__action-ico svg {
  display: block;
  width: calc(var(--u) * 1.4);
  height: calc(var(--u) * 1.4);
}

/* =========================================================================
   MIN DAG — tool rows (Full (Vis støtte on/off))
   Timer + Påminnelser side by side (.dly-toolrow), then a full-width
   Humørsjekk secondary tool. Bilde and Enkel never render these.
   ========================================================================= */

.dly-toolrow {
  display: flex;
  gap: calc(var(--u) * 0.9);
}
.dly-tool {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  min-height: max(44px, calc(var(--u) * 4.4));
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-toneGreen);
  color: var(--color-navy);
  /* Real button label — never below 14px however small the device scales. */
  font-size: max(14px, calc(var(--u) * 1.2));
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.dly-tool--secondary {
  width: 100%;
  background: var(--color-surface);
}
.dly-tool__ico { display: inline-flex; }
.dly-tool__ico svg {
  display: block;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
}

/* Add-activity button: dashed pill that reads as a "create" affordance. */
.dly-addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  min-height: max(44px, calc(var(--u) * 4.6));
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4);
  border: 1.5px dashed var(--color-brand);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-brandStrong);
  font-size: calc(var(--u) * 1.25);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.dly-addbtn__ico { display: inline-flex; }
.dly-addbtn__ico svg {
  display: block;
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
}

/* =========================================================================
   MIN DAG — Full · Vis støtte på (greeting + sectioned day + tools)
   ========================================================================= */

.dly-standard {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
}
.dly-standard .dly-screen__date { margin: 0; }

/* =========================================================================
   MIN DAG — Bilde (one giant symbol, "Etterpå" preview, OK / Trenger hjelp)
   ========================================================================= */

.dly-bilde {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.4);
  height: 100%;
}
.dly-bilde-hero {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.2);
  text-align: center;
}
.dly-bilde-hero__title {
  margin: 0;
  font-size: calc(var(--u) * 3);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-navy);
}
.dly-bilde-hero__photo {
  margin: 0;
  font-size: calc(var(--u) * 1.5);
  color: var(--color-inkMuted);
}
.dly-bilde-hero .dly-readaloud {
  margin-top: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 1) calc(var(--u) * 2.2);
  font-size: calc(var(--u) * 1.7);
}
.dly-bilde-hero .dly-readaloud__ico svg {
  width: calc(var(--u) * 2.1);
  height: calc(var(--u) * 2.1);
}

/* Small "Etterpå" (next) preview under the hero — keeps Bilde uncluttered. */
.dly-bilde-next {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.2);
  border-radius: var(--radius-lg);
  background: var(--color-nextBg);
}
.dly-bilde-next__label {
  margin: 0;
  flex: none;
  font-size: calc(var(--u) * 1.2);
  font-weight: var(--font-weight-bold);
  color: var(--color-nextInk);
}
.dly-bilde-next__tile { flex: none; }
.dly-bilde-next__title {
  min-width: 0;
  font-size: calc(var(--u) * 1.4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

/* Big OK / Trenger hjelp action pair (>= 56px touch floor for Bilde). */
.dly-bilde-actions {
  display: flex;
  gap: calc(var(--u) * 1);
}
.dly-bilde-actions__ok,
.dly-bilde-actions__help {
  flex: 1 1 0;
  min-height: max(56px, calc(var(--u) * 5.4));
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2);
  border: 0;
  border-radius: var(--radius-lg);
  font-size: calc(var(--u) * 1.6);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.dly-bilde-actions__ok {
  background: var(--color-doneInk);
  color: #fff;
}
.dly-bilde-actions__help {
  background: var(--color-toneBlue);
  color: var(--color-navy);
}

/* =========================================================================
   MIN DAG — Enkel (read-aloud row, two big Nå / Neste blocks, density toggle)
   ========================================================================= */

.dly-enkel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.4);
}
.dly-enkel__read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.7);
  min-height: max(56px, calc(var(--u) * 5.2));
  padding: calc(var(--u) * 1) calc(var(--u) * 1.4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: #fff;
  font-size: calc(var(--u) * 1.5);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.dly-enkel__read .dly-readaloud__ico svg {
  width: calc(var(--u) * 1.9);
  height: calc(var(--u) * 1.9);
}
.dly-enkel__block {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
}
.dly-enkel__label {
  margin: 0;
  font-size: calc(var(--u) * 1.6);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dly-enkel__block--now .dly-enkel__label { color: var(--color-nowInk); }
.dly-enkel__block--next .dly-enkel__label { color: var(--color-nextInk); }
.dly-enkel__block--later .dly-enkel__label { color: var(--color-inkMuted); }
/* Density toggle ("Vis mer / Vis mindre"): a calm full-width outline pill. */
.dly-enkel__density {
  min-height: max(48px, calc(var(--u) * 4.8));
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surfaceSubtle);
  color: var(--color-navy);
  font-size: calc(var(--u) * 1.3);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* =========================================================================
   MIN DAG — Full · Vis støtte av (dense clock+sync header, full day, compact tools)
   Visibly DENSER and more calendar-forward than Full · Vis støtte på: tighter gaps, an
   analog clock and a sync-status line up top, plus "Tidligere i dag".
   ========================================================================= */

.dly-selv {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.95);
}
.dly-selv__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.1);
  border-radius: var(--radius-lg);
  background: var(--color-navy);
  color: #fff;
}
.dly-selv__clock { flex: none; }
/* On the dark dense header the clock face flips to light-on-dark. */
.dly-selv__clock .dly-clock__face { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.5); }
.dly-selv__clock .dly-clock__tick { stroke: rgba(255, 255, 255, 0.55); }
.dly-selv__clock .dly-clock__tick--major { stroke: #fff; }
.dly-selv__clock .dly-clock__numeral { fill: #fff; }
.dly-selv__clock .dly-clock__hand { stroke: #fff; }
.dly-selv__clock .dly-clock__pin { fill: var(--color-sunBottom); }
.dly-selv__head-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.25);
  min-width: 0;
}
.dly-selv__date {
  margin: 0;
  font-size: calc(var(--u) * 1.6);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}
.dly-selv__sync {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  margin: 0;
  font-size: calc(var(--u) * 1);
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
}
.dly-selv__sync-dot {
  flex: none;
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
  border-radius: var(--radius-pill);
  background: var(--color-doneInk);
}
/* Full (Vis støtte av) packs its support tools into one tighter card-like cluster. */
.dly-selv__tools {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.9);
  border-radius: var(--radius-lg);
  background: var(--color-surfaceSubtle);
}
/* Denser cards + sections throughout Full · Vis støtte av vs på. */
.dly-selv .dly-section { gap: calc(var(--u) * 0.4); }
.dly-selv .dly-screen__list { gap: calc(var(--u) * 0.6); }
.dly-selv .dly-greet {
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.1);
  background: var(--color-surface);
}

/* =========================================================================
   KALENDER  (.dly-cal) — calm month grid
   ========================================================================= */

.dly-cal__header { display: flex; align-items: baseline; }
.dly-cal__month {
  margin: 0;
  font-size: calc(var(--u) * 1.9);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
}
.dly-cal__weekdays,
.dly-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--u) * 0.4);
}
.dly-cal__weekday {
  text-align: center;
  font-size: calc(var(--u) * 0.95);
  font-weight: var(--font-weight-semibold);
  color: var(--color-inkMuted);
}
.dly-cal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.3);
  aspect-ratio: 1;
  min-height: calc(var(--u) * 4);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: calc(var(--u) * 1.2);
  cursor: pointer;
}
.dly-cal__num { font-variant-numeric: tabular-nums; line-height: 1; }
.dly-cal__day--muted { color: var(--color-inkMuted); background: transparent; }
.dly-cal__day--busy { background: var(--color-surfaceSubtle); }
.dly-cal__day--today {
  background: var(--color-navy);
  color: #fff;
  font-weight: var(--font-weight-bold);
}
.dly-cal__pips {
  display: inline-flex;
  gap: calc(var(--u) * 0.25);
}
.dly-cal__pip {
  width: calc(var(--u) * 0.5);
  height: calc(var(--u) * 0.5);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}
.dly-cal__day--today .dly-cal__pip { background: #fff; }
.dly-cal__note {
  margin: calc(var(--u) * 0.4) 0 0;
  font-size: calc(var(--u) * 1.1);
  color: var(--color-inkMuted);
}

/* =========================================================================
   RUTINER  (.dly-routine / .dly-step) — step-by-step routines
   ========================================================================= */

.dly-routine-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
}
.dly-routine {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.9);
  padding: calc(var(--u) * 1.3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.dly-routine__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 0.8);
}
.dly-routine__title {
  margin: 0;
  font-size: calc(var(--u) * 1.5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
}
.dly-routine__time {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.4);
  margin: 0;
  font-size: calc(var(--u) * 1.1);
  color: var(--color-inkMuted);
  font-variant-numeric: tabular-nums;
}
.dly-routine__clock-icon {
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
}
.dly-routine__steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1);
  margin: 0;
  padding: 0;
}
.dly-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.4);
  width: calc(var(--u) * 6);
  text-align: center;
}
.dly-step__tile {
  position: relative;
  display: inline-flex;
}
.dly-step__check {
  position: absolute;
  right: calc(var(--u) * -0.4);
  bottom: calc(var(--u) * -0.4);
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  padding: calc(var(--u) * 0.25);
  border-radius: var(--radius-pill);
  background: var(--color-doneInk);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.dly-step__label {
  font-size: calc(var(--u) * 1);
  color: var(--color-ink);
  line-height: 1.15;
}
.dly-step--done .dly-step__label {
  color: var(--color-doneInk);
  font-weight: var(--font-weight-semibold);
}
.dly-step--done .dly-symbol { outline: 2px solid var(--color-doneInk); outline-offset: -1px; }
.dly-routine__progress {
  margin: 0;
  font-size: calc(var(--u) * 1.1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-doneInk);
}

/* =========================================================================
   HUSKELISTER  (.dly-list) — checklists
   ========================================================================= */

.dly-list-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
}
.dly-list {
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 1.3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.dly-list__header {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.9);
  padding-bottom: calc(var(--u) * 0.9);
  margin-bottom: calc(var(--u) * 0.4);
  border-bottom: 1px solid var(--color-line);
}
.dly-list__symbol { flex: none; }
.dly-list__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: calc(var(--u) * 1.45);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
}
.dly-list__count {
  flex: none;
  font-size: calc(var(--u) * 1.1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-inkMuted);
  font-variant-numeric: tabular-nums;
}
.dly-list__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.dly-list__item {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.9);
  padding: calc(var(--u) * 0.7) 0;
  font-size: calc(var(--u) * 1.25);
  color: var(--color-ink);
}
.dly-list__item + .dly-list__item {
  border-top: 1px solid var(--color-surfaceSubtle);
}
.dly-list__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
  border: 2px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--color-surface);
}
.dly-list__box svg {
  width: 80%;
  height: 80%;
}
.dly-list__box--done {
  border-color: var(--color-doneInk);
  background: var(--color-doneInk);
}
.dly-list__label { min-width: 0; }
.dly-list__item--done .dly-list__label {
  color: var(--color-inkMuted);
  text-decoration: line-through;
}

/* =========================================================================
   STØTTE  (.dly-stotte / .dly-contact) — people + big actions
   ========================================================================= */

.dly-stotte__intro {
  margin: 0;
  font-size: calc(var(--u) * 1.4);
  color: var(--color-ink);
}
.dly-stotte__contacts {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.9);
}
.dly-contact {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.dly-contact__symbol { flex: none; }
.dly-contact__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dly-contact__name {
  font-size: calc(var(--u) * 1.4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
}
.dly-contact__role {
  font-size: calc(var(--u) * 1.1);
  color: var(--color-inkMuted);
}
.dly-stotte__actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.9);
  margin-top: calc(var(--u) * 0.4);
}
.dly-stotte__action {
  /* >= 44px real-px target floor (WCAG 2.5.5/2.5.8); the --u value scales the
     button visually inside the frame but never below the AA target (B-14). */
  min-height: max(44px, calc(var(--u) * 5));
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4);
  border: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-sunTop), var(--color-sunBottom));
  color: #fff;
  font-size: calc(var(--u) * 1.5);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

/* =========================================================================
   PROFIL-SPECIFIC DENSITY TWEAKS
   Bilde / Enkel push generous sizing; Full (Vis støtte on/off) is the calmest, fullest.
   ========================================================================= */

.dly-screen--bilde {
  justify-content: center;
  padding: calc(var(--u) * 1.8);
  padding-bottom: calc(var(--u) * 9);
}
.dly-screen--enkel { gap: calc(var(--u) * 1.6); }
/* Full (Vis støtte on/off) is the tightest, fullest layout: trim the screen
   padding so the dense day reads as more calendar-forward. */
.dly-screen--full {
  gap: calc(var(--u) * 0.95);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  padding-bottom: calc(var(--u) * 9);
}

/* =========================================================================
   FOCUS — visible keyboard focus on every interactive demo control.
   ========================================================================= */

.dly-demo__chip:focus-visible,
.dly-demo__cta-link:focus-visible,
.dly-seg__btn:focus-visible,
.dly-nav__tab:focus-visible,
.dly-card-select:focus-visible,
.dly-readaloud:focus-visible,
.dly-cal__day:focus-visible,
.dly-stotte__action:focus-visible,
.dly-greet__action:focus-visible,
.dly-tool:focus-visible,
.dly-addbtn:focus-visible,
.dly-enkel__read:focus-visible,
.dly-enkel__density:focus-visible,
.dly-bilde-actions__ok:focus-visible,
.dly-bilde-actions__help:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* =========================================================================
   MOTION — every transition/animation is opt-in for users who allow motion.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .dly-demo__chip,
  .dly-demo__cta-link,
  .dly-seg__btn,
  .dly-nav__tab,
  .dly-card,
  .dly-readaloud,
  .dly-cal__day,
  .dly-stotte__action,
  .dly-greet__action,
  .dly-tool,
  .dly-addbtn,
  .dly-enkel__read,
  .dly-enkel__density,
  .dly-bilde-actions__ok,
  .dly-bilde-actions__help {
    transition:
      background-color var(--motion-base) var(--motion-ease),
      color var(--motion-base) var(--motion-ease),
      border-color var(--motion-base) var(--motion-ease),
      box-shadow var(--motion-base) var(--motion-ease),
      transform var(--motion-fast) var(--motion-ease);
  }

  .dly-demo__chip:hover,
  .dly-seg__btn:hover,
  .dly-nav__tab:hover,
  .dly-greet__action:hover,
  .dly-tool:hover {
    transform: translateY(-1px);
  }
  .dly-demo__cta-link:hover,
  .dly-readaloud:hover,
  .dly-stotte__action:hover,
  .dly-addbtn:hover,
  .dly-enkel__read:hover,
  .dly-bilde-actions__ok:hover,
  .dly-bilde-actions__help:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  .dly-demo__chip:active,
  .dly-seg__btn:active,
  .dly-nav__tab:active,
  .dly-card-select:active,
  .dly-readaloud:active,
  .dly-stotte__action:active,
  .dly-greet__action:active,
  .dly-tool:active,
  .dly-addbtn:active,
  .dly-enkel__read:active,
  .dly-enkel__density:active,
  .dly-bilde-actions__ok:active,
  .dly-bilde-actions__help:active {
    transform: translateY(0) scale(0.98);
  }

  /* Soft cross-fade when the active screen swaps inside the frame. */
  .dly-frame__screen .dly-screen {
    animation: dly-screen-in var(--motion-slow) var(--motion-ease);
  }
}

@keyframes dly-screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   ROLIG ("calm") OVERRIDE — the site's own reduced-motion choice.
   Mirrors the block in motionStyles.ts: a visitor who picks "Rolig visning"
   (body[data-a11y="calm"]) gets a completely still interactive demo island —
   no transitions, no hover/active lift, no cross-fade — even when the OS allows
   motion. Kept OUTSIDE the no-preference query and using !important so it
   always wins over the gated rules above.
   ========================================================================= */

body[data-a11y="calm"] .dly-demo,
body[data-a11y="calm"] .dly-demo__chip,
body[data-a11y="calm"] .dly-demo__cta-link,
body[data-a11y="calm"] .dly-seg__btn,
body[data-a11y="calm"] .dly-nav__tab,
body[data-a11y="calm"] .dly-frame,
body[data-a11y="calm"] .dly-frame__screen,
body[data-a11y="calm"] .dly-screen,
body[data-a11y="calm"] .dly-card,
body[data-a11y="calm"] .dly-card-select,
body[data-a11y="calm"] .dly-readaloud,
body[data-a11y="calm"] .dly-cal__day,
body[data-a11y="calm"] .dly-stotte__action,
body[data-a11y="calm"] .dly-greet__action,
body[data-a11y="calm"] .dly-tool,
body[data-a11y="calm"] .dly-addbtn,
body[data-a11y="calm"] .dly-enkel__read,
body[data-a11y="calm"] .dly-enkel__density,
body[data-a11y="calm"] .dly-bilde-actions__ok,
body[data-a11y="calm"] .dly-bilde-actions__help {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* =========================================================================
   RESPONSIVE — make the whole demo usable on a real phone visiting dagly.no.
   Below --breakpoint-sm (560px) controls stack and the frame shrinks.
   ========================================================================= */

@media (max-width: 560px) {
  .dly-demo {
    gap: var(--space-4);
    padding: var(--space-5) var(--space-3);
  }
  .dly-demo__chips {
    gap: var(--space-2);
  }
  .dly-demo__chip {
    flex: 1 1 calc(50% - var(--space-2));
    padding: var(--space-2) var(--space-3);
  }
  .dly-demo__controls {
    flex-direction: column;
    gap: var(--space-3);
  }
  .dly-seg {
    width: 100%;
    justify-content: stretch;
  }
  .dly-seg__btn {
    flex: 1 1 auto;
    padding: 0 var(--space-2);
  }
  /* The primary level switch (Bilde / Enkel / Full) stays a single tidy row of
     three equal segments on a phone — never a 2 + 1 wrap. */
  .dly-demo__controls > .dly-seg:not(.dly-seg--device):not(.dly-demo__reset) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dly-demo__controls > .dly-seg:not(.dly-seg--device):not(.dly-demo__reset) .dly-seg__btn {
    width: 100%;
    min-width: 0;
  }
  /* The device switch is now three short options (Telefon / Nettbrett /
     Veggskjerm); a 3-column grid keeps them even on a phone. */
  .dly-seg--device {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    border-radius: 32px;
  }
  .dly-seg--device .dly-seg__btn {
    width: 100%;
    min-height: 52px;
    white-space: normal;
    line-height: 1.16;
  }
  /* On a phone, the on-device "landscape" frames would be tiny — let them
     use the full available width. */
  .dly-frame--phone.dly-frame--landscape,
  .dly-frame--tablet,
  .dly-frame--wall {
    width: 100%;
  }
  .dly-frame--phone.dly-frame--showcase,
  .dly-frame--phone.dly-frame--hero {
    width: min(78vw, 300px);
  }
  .dly-demo__cta-link {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================================
   "TILPASS VISNING" — the single progressive-disclosure panel that holds every
   secondary control (Vis støtte, enhet, visningsalternativ, tilpasninger,
   reset). Built on a native <details> so it is keyboard-operable and exposes
   aria-expanded for free. A casual visitor leaves it closed; the NAV evaluator
   opens it.
   ========================================================================= */

.dly-tilpass {
  width: 100%;
  max-width: 720px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surfaceSubtle);
}

.dly-tilpass__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}

.dly-tilpass__summary::-webkit-details-marker {
  display: none;
}

.dly-tilpass__summary::after {
  content: "▾";
  margin-inline-start: auto;
  font-size: 0.9em;
  color: var(--color-inkMuted);
}

.dly-tilpass[open] > .dly-tilpass__summary::after {
  content: "▴";
}

.dly-tilpass__ico {
  font-size: 1.1em;
  line-height: 1;
}

.dly-tilpass__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-line);
}

.dly-tilpass__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.dly-tilpass__field--reset {
  align-items: stretch;
}

.dly-tilpass__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-inkMuted);
  letter-spacing: 0.01em;
}

/* --- Device kind switch + rotate ---------------------------------------- */

.dly-device {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.dly-rotate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.dly-rotate[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.dly-rotate__ico {
  font-size: 1.1em;
  line-height: 1;
}

/* --- Adaptation toggles (axis C) ---------------------------------------- */

.dly-adapt-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dly-adapt-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.dly-adapt-toggle__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-inkMuted);
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  line-height: 1;
  background: var(--color-surface);
}

.dly-adapt-toggle--on {
  border-color: var(--color-brand);
  background: var(--color-nowBg);
  color: var(--color-brandStrong);
}

.dly-adapt-toggle--on .dly-adapt-toggle__box {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

/* =========================================================================
   AXIS B — REPRESENTATION. The screen host carries data-rep; CSS shows or
   hides the symbol/photo tile vs the text label. No information is lost to
   assistive tech: when the title is hidden the symbol's alt carries the name,
   and when the tile is hidden the title text remains.
   ========================================================================= */

/* Skrift: text only — hide every symbol/photo tile. */
.dly-frame__screen-host[data-rep="skrift"] .dly-symbol {
  display: none;
}

/* Foto / Symbol: image only — hide the activity title text. The tile alt
   still announces the activity, and Enkel/Bilde keep their own big titles. */
.dly-frame__screen-host[data-rep="foto"] .dly-card__title,
.dly-frame__screen-host[data-rep="symbol"] .dly-card__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Foto: give the tile a photo-frame treatment so "Foto" is visibly distinct
   from "Symbol" even when both reuse the ASK art in the demo. */
.dly-frame__screen-host[data-rep="foto"] .dly-symbol,
.dly-frame__screen-host[data-rep="foto-skrift"] .dly-symbol {
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1.5px var(--color-line), var(--shadow-sm);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.04));
}

/* =========================================================================
   AXIS C — ADAPTATIONS applied inside the frame. Class hooks set by LiveDemo.
   ========================================================================= */

/* Stor tekst — scale the in-frame app type up. */
.dly-frame__screen-host.dly-adapt--large {
  font-size: 1.14em;
  line-height: 1.4;
}

/* Høy kontrast — push ink/surface contrast and strengthen borders. */
.dly-frame__screen-host.dly-adapt--contrast {
  --color-ink: #000;
  --color-inkMuted: #1a1a1a;
  --color-surface: #fff;
  --color-line: #000;
}
.dly-frame__screen-host.dly-adapt--contrast .dly-card,
.dly-frame__screen-host.dly-adapt--contrast .dly-section,
.dly-frame__screen-host.dly-adapt--contrast .dly-symbol {
  border: 2px solid #000;
}

/* Les opp — surface the read-aloud affordances (a calm visual cue, not audio
   in the static demo). A small speaker badge highlights every "Les opp". */
.dly-frame__screen-host.dly-adapt--read .dly-readaloud {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =========================================================================
   FOCUS + MOTION for the new controls.
   ========================================================================= */

.dly-tilpass__summary:focus-visible,
.dly-rotate:focus-visible,
.dly-adapt-toggle:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .dly-rotate,
  .dly-adapt-toggle {
    transition:
      background-color var(--motion-base) var(--motion-ease),
      color var(--motion-base) var(--motion-ease),
      border-color var(--motion-base) var(--motion-ease),
      box-shadow var(--motion-base) var(--motion-ease);
  }
}

/* «Rolig» calm override — keep the new controls perfectly still even when the
   OS allows motion (double-gated alongside prefers-reduced-motion above). */
body[data-a11y="calm"] .dly-rotate,
body[data-a11y="calm"] .dly-adapt-toggle,
body[data-a11y="calm"] .dly-tilpass {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* The in-frame «Rolig» adaptation stills the demo screen content too. */
.dly-frame__screen-host.dly-adapt--calm,
.dly-frame__screen-host.dly-adapt--calm * {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* =========================================================================
   RESPONSIVE — the 3-kind device switch is short, so it can sit inline; the
   "Tilpass visning" panel and its fields stack on small screens.
   ========================================================================= */

@media (max-width: 560px) {
  .dly-seg--rep {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .dly-seg--rep .dly-seg__btn {
    width: 100%;
    white-space: normal;
    line-height: 1.16;
  }
  .dly-device {
    width: 100%;
  }
  .dly-adapt-group {
    width: 100%;
  }
  .dly-adapt-toggle {
    flex: 1 1 calc(50% - var(--space-2));
  }
}



/* ===== "Tilpass visning" drawer adaptation hooks ======================== */
/* The drawer's structural + control styles live in the base stylesheet
   (.view-tuner / .view-tuner__option / __footer). Here we keep only the
   axis-C adaptation overrides that enlarge / emphasise those controls. */
html[data-adapt-audio-first] .view-tuner__status,
html[data-adapt-all-visual] .view-tuner__status,
html[data-adapt-switch-scanning] .view-tuner__status {
  color: var(--navy); font-weight: 800;
}
html[data-adapt-switch-scanning] .view-tuner__option,
html[data-adapt-switch-scanning] .header-cta,
html[data-adapt-switch-scanning] .button,
html[data-adapt-switch-scanning] .header-tuner-trigger,
html[data-adapt-switch-scanning] .dly-demo__chip,
html[data-adapt-switch-scanning] .dly-demo__cta-link {
  min-height: 56px;
}
html[data-adapt-switch-scanning] :focus-visible {
  outline-width: 4px; outline-offset: 5px;
}
html[data-adapt-all-visual] .day-status,
html[data-adapt-all-visual] .proof-chip,
html[data-adapt-all-visual] .trust-pill {
  border: 2px solid currentColor;
}

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

html[data-view-enkel] body { font-size: 1.16rem; line-height: 1.68; }
html[data-view-enkel] main { letter-spacing: 0.005em; }
html[data-view-enkel] .hero { grid-template-columns: 1fr; gap: 26px; padding-top: 26px; }
html[data-view-enkel] .hero-stage { order: -1; }
html[data-view-enkel] .hero-copy { max-width: none; }
html[data-view-enkel] .band-inner, html[data-view-enkel] .hero-inner { max-width: 760px; }
html[data-view-enkel] section { padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(28px, 5vw, 56px); }
html[data-view-enkel] h1 { font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.12; }
html[data-view-enkel] h2 { font-size: clamp(1.45rem, 5vw, 2.05rem); }
html[data-view-enkel] p.intro, html[data-view-enkel] .band-lead { font-size: 1.22rem; line-height: 1.6; }
html[data-view-enkel] .button,
html[data-view-enkel] .header-cta,
html[data-view-enkel] .dly-demo__cta-link {
  min-height: 54px; padding: 14px 24px; font-size: 1.08rem;
}
/* Single-column the grids that remain visible in Enkel (profiles/pricing). */
html[data-view-enkel] .price-grid,
html[data-view-enkel] .level-grid,
html[data-view-enkel] .profile-grid,
html[data-view-enkel] .persona-grid { grid-template-columns: 1fr !important; }
/* A friendly Enkel intro line, symbol-led, only shown in Enkel. */
.enkel-banner {
  display: none;
  align-items: center; gap: 14px;
  margin: 0 auto clamp(20px, 4vw, 36px);
  max-width: 760px; padding: 16px 20px;
  background: var(--section-warm); border: 2px solid var(--line-strong);
  border-radius: var(--radius-lg); font-size: 1.12rem; font-weight: 600;
}
html[data-view-enkel] .enkel-banner { display: flex; }
.enkel-banner img { width: 44px; height: 44px; flex: none; }

/* ===== HØY KONTRAST — AAA palette across both token namespaces =========== */
html[data-view-contrast] {
  /* marketing tokens */
  --navy: #101320; --navy-soft: #101320; --ink: #0a0c14; --muted: #252a38;
  --line: #5a6072; --line-strong: #2a2f3d; --page: #ffffff; --section: #ffffff;
  --section-warm: #ffffff; --card: #ffffff;
  --pastel-blue: #eef3ff; --pastel-green: #e9f7ef; --pastel-peach: #fdeede; --pastel-lilac: #efeafd;
  --green-ink: #0c5a44; --orange: #8a3208; --orange-dark: #5e2105; --focus: #0033cc;
  /* demo-island tokens */
  --color-ink: #0a0c14; --color-inkMuted: #252a38; --color-navy: #101320;
  --color-line: #5a6072; --color-lineStrong: #101320; --color-surface: #ffffff;
  --color-surfaceSubtle: #ffffff; --color-screenBg: #ffffff; --color-focus: #0033cc;
}
html[data-view-contrast] .day-card,
html[data-view-contrast] .dly-card,
html[data-view-contrast] .content-card,
html[data-view-contrast] .price-card,
html[data-view-contrast] .mini-screen,
html[data-view-contrast] .dly-frame__screen { border: 2px solid #101320; }
/* The "Nå"-highlighted mini row must keep its definition in high contrast. */
html[data-view-contrast] .mini-row.now { outline: 2px solid #101320; outline-offset: -2px; }
html[data-view-contrast] a { text-decoration: underline; text-underline-offset: 2px; }
html[data-view-contrast] .header-cta,
html[data-view-contrast] .button.primary { background: #101320; color: #fff; }



/* =========================================================================
   MOTION LAYER (subtle, accessibility-gated)
   Default state for every reveal target is SETTLED + VISIBLE. The hidden
   pre-reveal state is introduced only under prefers-reduced-motion:
   no-preference, so no-JS / reduced-motion / Rolig always show content.
   ========================================================================= */

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

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

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

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

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

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

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

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

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

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

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

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

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

body[data-a11y="calm"] [data-reveal],
body[data-a11y="calm"] .hero-copy,
body[data-a11y="calm"] .hero-stage,
body[data-a11y="calm"] .phone,
body[data-a11y="calm"] .day-card,
body[data-a11y="calm"] .feature-card,
body[data-a11y="calm"] .trust-card,
body[data-a11y="calm"] .problem-card,
body[data-a11y="calm"] .mode-card,
body[data-a11y="calm"] .price-card,
body[data-a11y="calm"] .story-card,
body[data-a11y="calm"] .persona-card,
body[data-a11y="calm"] .mini-figure,
body[data-a11y="calm"] .device-figure,
body[data-a11y="calm"] .level-tab,
body[data-a11y="calm"] .hero-mode-button,
body[data-a11y="calm"] .proof-list li,
body[data-a11y="calm"] .button,
body[data-a11y="calm"] .header-cta,
body[data-a11y="calm"] .sun-mark,
body[data-a11y="calm"] .sun-mark line {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}



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

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

.visually-hidden--focusable:focus,
.visually-hidden--focusable:focus-within,
.sr-only--focusable:focus,
.sr-only--focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

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

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

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

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

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

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

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

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

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

/* --- Text-spacing resilience (WCAG 1.4.12) --------------------------------
 * Content must not be lost or clipped when a user stylesheet/bookmarklet raises
 * line-height to 1.5×, letter-spacing to 0.12em, word-spacing to 0.16em and
 * paragraph spacing to 2×. We do NOT impose those values (that is the user's
 * job) — we only make the containers that hold interactive labels and copy
 * tolerant of them: allow wrapping and let height grow with content instead of
 * clipping. Scoped to the documented surfaces so layout elsewhere is untouched.
 */
.dly-seg__btn,
.dly-nav__tab,
.dly-demo__chip,
.dly-readaloud,
.dly-demo__cta-link,
.level-tab,
.hero-mode-button,
.button,
.header-cta,
.price-cta,
.feature-card,
.mode-card,
.problem-card,
.story-card,
.price-card,
.persona-card,
.dly-card,
.dly-list,
.dly-routine {
  overflow-wrap: break-word;
  word-break: normal;
}

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

/* --- Increased contrast (WCAG 1.4.11 robustness) --------------------------
 * Strengthen the borders that separate cards, device frames and controls so
 * boundaries stay perceivable in forced/high-contrast environments. Borders
 * only — we do not override author colours that already meet AA. */
@media (prefers-contrast: more) {
  .feature-card,
  .mode-card,
  .problem-card,
  .story-card,
  .price-card,
  .dly-demo,
  .dly-demo__chip,
  .dly-seg,
  .dly-seg__btn,
  .dly-nav,
  .dly-nav__tab,
  .dly-readaloud,
  .device-phone,
  .device-tablet,
  .phone-screen {
    border-width: 2px;
    border-style: solid;
    border-color: var(--navy, currentColor);
  }

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

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

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

/* --- Focus ring contrast on dark / navy surfaces (additive) ----------------
 * The marketing layer's global focus ring is the blue var(--color-focus), which
 * can wash out on the navy-filled active pills and dark bands. We do NOT touch
 * that layer; instead we add a brighter, token-driven ring with a white halo
 * (double outline via box-shadow) on the controls that can sit on a dark fill,
 * so the focus indicator clears 3:1 against BOTH light and dark surfaces
 * (WCAG 2.4.7 / 1.4.11). box-shadow is used for the inner white halo because
 * a single element can carry only one outline. */
.hero-mode-button:focus-visible,
.level-tab:focus-visible,
.header-tuner-trigger:focus-visible,
.view-tuner__option:focus-visible,
.view-tuner__close:focus-visible,
.button:focus-visible,
.header-cta:focus-visible,
.price-cta:focus-visible,
.story-card:focus-visible,
.persona-card:focus-visible,
.site-header nav a:focus-visible,
.footer-nav a:focus-visible,
.dly-seg--device .dly-seg__btn:focus-visible,
.dly-readaloud:focus-visible,
.dly-demo__cta-link:focus-visible,
.dly-stotte__action:focus-visible,
.dly-cal__day--today:focus-visible {
  outline: 3px solid var(--color-focus, var(--focus, #1F6FEB));
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px var(--color-focus, var(--focus, #1F6FEB));
}

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

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

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

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


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

  /* Cards, frames and controls lose shadow-only / faint borders — restore a
     1px system border so boundaries remain perceivable. */
  .feature-card,
  .mode-card,
  .problem-card,
  .story-card,
  .price-card,
  .trust-card,
  .content-card,
  .policy-card,
  .persona-card,
  .mini-screen,
  .day-card,
  .tablet-routine,
  .header-tuner-trigger,
  .view-tuner__drawer,
  .view-tuner__option,
  .header-cta,
  .button,
  .hero-mode-button,
  .level-tab,
  .proof-list li,
  .mode-controls li,
  .dly-demo,
  .dly-demo__chip,
  .dly-seg,
  .dly-seg__btn,
  .dly-tilpass,
  .dly-rotate,
  .dly-adapt-toggle,
  .dly-nav,
  .dly-nav__tab,
  .dly-readaloud,
  .dly-card,
  .dly-list,
  .dly-routine,
  .dly-contact,
  .dly-stotte__action {
    border: 1px solid CanvasText;
  }

  /* The device bezel / screen still need to read as a physical edge. */
  .phone-frame,
  .phone-screen,
  .tablet-frame,
  .tablet-screen,
  .dly-frame__bezel,
  .dly-frame__screen {
    border: 1px solid CanvasText;
  }

  /* Selected / active states are colour-only in the base layers — add a
     forced-colors-visible marker (system Highlight border) so the choice is not
     lost when the palette is overridden (WCAG 1.4.1). */
  [aria-pressed="true"],
  [aria-checked="true"],
  [aria-selected="true"],
  [aria-current="page"],
  [aria-current="date"],
  .dly-seg__btn--active,
  .dly-adapt-toggle--on,
  .dly-nav__tab--active,
  .dly-demo__chip--active,
  .level-tab[aria-pressed="true"],
  .hero-mode-button[aria-pressed="true"],
  .day-card.now,
  .dly-card--now {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

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

  /* Keep brand/device illustration colours instead of flattening them to the
     system palette — they are decorative and carry no state. */
  .sun-mark,
  .analog-clock,
  .symbol-tile,
  .symbol-tile img,
  .dly-symbol,
  .dly-symbol img,
  .dly-clock,
  .dly-frame__cam,
  .phone-island,
  .phone-island-cam {
    forced-color-adjust: none;
  }

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


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

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

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