/* Akari starter kit · style
 *
 * Dress it in the brand from RETNING.md: change the tokens first, then the components.
 * Keep the behaviour hooks (data attributes) and the rules marked KEEP.
 *
 * Everything is in cascade layers. Two kinds of rule stay unlayered, at the very end:
 * [hidden] (RULES.md L12), and the overrides of what Akari Engine injects (the cookie banner,
 * the privacy notice), because injected CSS is unlayered and would beat any layer.
 */
@layer base, components, pages;

@layer base {
  /* ---------- Tokens (AGENTS.md requires the first eight) ---------- */
  :root {
    --color-bg: #F3F3ED;            /* Papir */
    --color-surface: #FBFBF7;
    --color-text: #103442;          /* Navy */
    --color-text-muted: #4C6369;    /* Grå */
    --color-accent: #4454A0;        /* Indigo */
    --color-accent-muted: #E2E5F5;
    --font-display: 'Red Hat Display', var(--fallback-sans);
    --font-body: 'DM Sans', var(--fallback-sans);

    /* Roles (Munin profilmanual) */
    --color-deep: #0B2936;          /* header/footer and the iPhone bars (I1) */
    --color-navy: #103442;
    --color-on-deep: #F5F6F0;       /* Hvit */
    --color-on-deep-muted: #B9C6CB;
    --color-glans: #B8C2F0;
    --color-glans-hover: #CDD4F5;
    --color-on-accent: #F5F6F0;
    --color-rec: #E5484D;           /* only: recording now */
    --color-line: #D9DCD3;
    --color-line-on-deep: rgb(245 246 240 / 0.14);
    --color-card-on-deep: #103442;
    --color-field: #7E8E92;          /* field borders: 3:1 against the surface (A1) */
    --color-error: #A3261C;
    --color-focus: #4454A0;
    --color-focus-on-deep: #B8C2F0;
    --color-pat-a: rgb(245 246 240 / 0.028);
    --color-pat-b: rgb(245 246 240 / 0.04);
    --color-pat-c: rgb(184 194 240 / 0.06);
    --color-glans-halo: rgb(184 194 240 / 0.16);
    --color-glans-clear: rgb(184 194 240 / 0);
    --color-moon-halo: rgb(184 194 240 / 0.08);
    --color-rune: rgb(184 194 240 / 0.22);
    --color-paper: #F5F6F0;
    --color-paper-edge: #C9CFD3;
    --font-rune: 'Noto Sans Runic', 'Apple Symbols', 'Segoe UI Historic', serif;
    /* The app, drawn in the demo (Munin's dark theme) */
    --color-m-bg: #161B21;
    --color-m-side: #1E2730;
    --color-m-card: #24303A;
    --color-m-notif: #2B3540;
    --color-m-line: rgb(255 255 255 / 0.08);
    --color-m-line-strong: rgb(255 255 255 / 0.2);
    --color-m-text: #F1F3F5;
    --color-m-muted: #A3AFBA;
    --color-m-light: #5A6570;
    --color-m-rec-bg: #3A2629;
    --color-m-rec-line: #6B3438;
    --color-m-rec-text: #F28B8E;
    --color-m-good: #8BD3A8;
    --color-m-wave2: #7D8BD6;
    --color-m-room: #8E9BEB;
    --color-m-sys: #62C38B;
    --color-m-stop: #C8464C;
    --color-m-cursor: rgb(255 255 255 / 0.35);
    --color-m-dim: rgb(10 14 18 / 0.55);
    --fallback-sans: 'Akari Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Spacing: calm and generous (BUILDING.md §3) */
    --space-section: clamp(56px, min(9vw, 10vh), 128px);   /* by the height too: a laptop is wide but low (L13) */
    --space-head: clamp(28px, min(4vw, 5vh), 56px);
    --gap: 24px;
    --gutter: clamp(20px, 5vw, 48px);
    --measure: 66ch;
    --wrap: 1200px;
    --radius: 10px;
    --radius-lg: 12px;
    --header-h: 72px;
    --bar-h: 64px;

    /* Type */
    --step--1: 0.875rem;
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    --step-3: clamp(2rem, min(1.4rem + 2.4vw, 6.5vh), 3.25rem);
    --step-4: clamp(2.75rem, min(1.4rem + 4vw, 8.8vh), 5rem);

    /* Motion: at most 0.4 s for the interface (AGENTS.md) */
    --dur: 0.32s;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    color-scheme: light;
  }

  /* The fallback font is sized to the web font, so the swap does not move the page (Y7).
     Measure the values with: node verktoy/fontmetrics.mjs "Figtree" */
  @font-face {
    font-family: 'Akari Fallback';
    src: local('Arial');
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 25%;
    line-gap-override: 0%;
  }

  *, *::before, *::after { box-sizing: border-box; }

  /* KEEP: html and body carry the colour of the iPhone bars; main carries the page (I1). */
  html {
    background-color: var(--color-deep);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    background-color: var(--color-deep);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  main {
    display: block;
    background-color: var(--color-bg);
    overflow-x: clip;
  }
  /* KEEP: an instant restore after the menu closes (T4), and the scroll lock while it is open. */
  html[data-instant] { scroll-behavior: auto; }
  html[data-locked], html[data-locked] body { overflow: hidden; }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--color-text);
  }
  h1 { font-size: var(--step-4); font-weight: 800; line-height: 0.98; }
  h2 { font-weight: 800; }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); line-height: 1.25; }
  p, li, dd, figcaption, blockquote { text-wrap: pretty; }
  p { margin: 0 0 1em; max-width: var(--measure); }
  :is(h1, h2, h3) + :is(p, ul, ol) { margin-top: 0.75em; }
  p:last-child { margin-bottom: 0; }
  /* KEEP: no automatic hyphenation (L9). */
  * { hyphens: manual; }

  a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  svg.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.2em; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

  /* KEEP: anchor targets clear the header (never scroll-padding on html). */
  [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

  .nw { white-space: nowrap; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .skip {
    position: absolute; left: 12px; top: -100px; z-index: 100;
    padding: 12px 16px; background: var(--color-surface); color: var(--color-text);
    border-radius: var(--radius);
  }
  .skip:focus { top: 12px; }

  .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .section { padding-block: var(--space-section); }
  .section__head { margin-bottom: var(--space-head); max-width: 760px; }
  /* The contact section on a wide screen: the heading and the lead beside the form, so the whole form and
     its heading are one laptop screen (L13). */
  @media (min-width: 900px) {
    [data-form] > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
    [data-form] > .wrap > .section__head { margin-bottom: 0; }
  }
  .eyebrow { margin: 0 0 14px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
  .lead { font-size: var(--step-1); line-height: 1.5; color: var(--color-text-muted); }
}

@layer components {
  /* ---------- Buttons: radius 8, no pills, no shadows (BUILDING.md §3) ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 22px;
    border: 1.5px solid transparent; border-radius: var(--radius);
    font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .btn:active { transform: translateY(1px); }
  .btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
  .btn--primary:hover { background: var(--color-deep); }
  .btn--ghost { border-color: currentColor; background: transparent; }
  .btn--ghost:hover { background: var(--color-accent-muted); }
  .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 20;
    background: var(--color-deep); color: var(--color-on-deep);
    padding-top: env(safe-area-inset-top);
  }
  .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
  .site-header__logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
  .site-header__logo img { height: 36px; width: auto; }
  .site-nav { display: flex; align-items: center; gap: 4px; }
  .site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; border-radius: var(--radius); }
  .site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { text-decoration: underline; }
  .site-nav .btn { margin-left: 12px; }
  .menu-button {
    display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px;
    background: transparent; border: 1.5px solid currentColor; border-radius: var(--radius); cursor: pointer;
  }

  /* ---------- The menu takeover (T2–T12) ---------- */
  .takeover {
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: var(--color-deep); color: var(--color-on-deep);
    overscroll-behavior: contain;
  }
  .takeover::backdrop { background: var(--color-deep); }
  .takeover[open] { display: flex; flex-direction: column; animation: takeover-in var(--dur) var(--ease); }
  .takeover__top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: var(--header-h); padding: env(safe-area-inset-top) var(--gutter) 0;
    flex: none;
  }
  .takeover__top h2 { font-size: var(--step-1); color: inherit; }
  .takeover__close {
    display: inline-grid; place-items: center; width: 48px; height: 48px;
    background: transparent; color: inherit; border: 1.5px solid currentColor; border-radius: var(--radius); cursor: pointer;
  }
  .takeover__body { flex: 1; overflow-y: auto; padding: 16px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
  .takeover__links { list-style: none; margin: 0 0 32px; padding: 0; }
  .takeover__links a { display: flex; align-items: center; min-height: 56px; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--color-line-on-deep); }
  @keyframes takeover-in { from { transform: translateY(16px); } }

  /* ---------- Carousel (K1–K9): a grid on desktop, a carousel on the phone ---------- */
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
  .cards > li { min-width: 0; }
  .carousel-bar { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
  .carousel-bar__count { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
  .carousel-bar__buttons { display: flex; gap: 8px; }
  .carousel-bar button { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1.5px solid var(--color-line); border-radius: var(--radius); cursor: pointer; }
  .carousel-bar button:disabled { opacity: 0.4; cursor: default; }

  .card { height: 100%; padding: 28px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
  .card h3 { margin-bottom: 12px; }
  .card > a, .link-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
  details > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }

  /* ---------- Form (S1–S15) ---------- */
  .form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 640px; }
  .form fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .form legend { padding: 0; margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }
  .field { display: grid; gap: 6px; min-width: 0; }
  .field label { font-weight: 600; }
  .field__hint { margin: 0; font-size: var(--step--1); color: var(--color-text-muted); }
  .field input, .field select, .field textarea {
    width: 100%; min-height: 48px; padding: 12px 14px;
    font-size: max(16px, 1rem); /* KEEP: 16 px or iOS zooms (S9) */
    background: var(--color-surface); border: 1.5px solid var(--color-field); border-radius: var(--radius);
  }
  .field textarea { min-height: 104px; resize: vertical; }   /* three lines: the whole form fits a laptop screen (L13) */
  .field [aria-invalid="true"] { border-color: var(--color-error); }
  .field__error { margin: 0; color: var(--color-error); font-weight: 600; font-size: 0.95rem; }
  .form__summary { padding: 16px 20px; border: 2px solid var(--color-error); border-radius: var(--radius); background: var(--color-surface); }
  .form__summary ul { margin: 8px 0 0; padding-left: 20px; }
  .form__progress { margin: 0; font-weight: 600; color: var(--color-text-muted); }
  .form__steps { display: flex; justify-content: space-between; gap: 12px; }
  /* KEEP: the submit button stands in its own block: the published privacy notice goes before it. */
  [data-submit-row] { display: flex; flex-wrap: wrap; gap: 12px; }
  .form[aria-busy="true"] [type="submit"] { opacity: 0.7; cursor: progress; }
  .form__status, .form__answer { scroll-margin: calc(var(--header-h) + 16px) 0 calc(var(--bar-h) + 24px); }
  .form__status { margin: 16px 0 0; font-weight: 600; }
  .form__status:empty { margin: 0; }
  .form__answer { margin-top: 24px; padding: 28px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
  .form__answer h3 { margin-bottom: 8px; }
  /* KEEP: the honeypot is off screen, inert and aria-hidden in the markup (S1). */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* ---------- Action bar (H1–H6, E2) ---------- */
  .actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: none; align-items: center; gap: 10px;
    padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)) 72px; /* 72 px: the cookie button's slot */
    background: var(--color-deep); color: var(--color-on-deep);
    transform: translateY(110%);
    transition: transform var(--dur) var(--ease);
  }
  .actionbar[data-visible="true"] { transform: none; }
  .actionbar .btn { flex: 1; min-height: 48px; padding-inline: 12px; }
  .actionbar__slot { position: absolute; left: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }

  /* ---------- Slot: designed placeholder for missing content (D2) ---------- */
  .slot {
    display: grid; align-content: center; gap: 6px; min-height: 120px; padding: 20px 24px;
    border: 1.5px dashed var(--color-field); border-radius: var(--radius-lg);
    background: var(--color-surface); color: var(--color-text-muted);
  }
  .slot--image { min-height: 0; place-content: center; justify-items: center; text-align: center; padding: 12px; }
  .slot--image .icon { width: 28px; height: 28px; color: var(--color-text-muted); }
  .slot--mark { display: inline-grid; place-items: center; flex: none; width: 56px; height: 48px; min-height: 0; padding: 0; }
  .slot--mark .slot__type { font-size: 0.875rem; letter-spacing: 0; }
  .slot__type { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
  .slot__text { font-size: 0.95rem; line-height: 1.5; max-width: 44ch; }

  /* ---------- Reveal (E5, A7): visible without JavaScript ---------- */
  html[data-js] .reveal:not([data-shown]) { opacity: 0; transform: translateY(16px); }
  .reveal { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

  /* ---------- Footer (E8) ---------- */
  .site-footer { background: var(--color-deep); color: var(--color-on-deep); padding: 64px 0 calc(32px + env(safe-area-inset-bottom)); }
  .site-footer a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .site-footer p { margin: 0; }
  .site-footer__grid > div { display: grid; align-content: start; gap: 4px; }
  .takeover__contact { margin-top: 32px; display: grid; gap: 4px; }
  .takeover__contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
  .takeover__contact p { margin: 0; opacity: 0.8; }
  .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; }
  .site-footer__legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-line-on-deep); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
  .site-footer__legal p { margin: 0; }

  /* ---------- Phone (the one breakpoint, T3: keep it equal to script.js) ---------- */
  @media (max-width: 899.98px) {
    .site-nav { display: none; }
    .menu-button { display: inline-flex; }
    .actionbar { display: flex; }
    /* Room for the action bar, in the footer's own colour (no light band above it). */
    body:has(.actionbar) .site-footer { padding-bottom: calc(32px + var(--bar-h) + env(safe-area-inset-bottom)); }
    .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); }
    .btn-row .btn { width: 100%; }
    [data-submit-row] .btn { width: 100%; }

    [data-carousel] {
      display: flex; gap: 16px;
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
      margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
      scrollbar-width: none;
    }
    [data-carousel]::-webkit-scrollbar { display: none; }
    [data-carousel] > li { flex: 0 0 82%; scroll-snap-align: start; scroll-margin-inline: var(--gutter); }
    .carousel-bar { display: flex; }
  }

  /* Landscape phone: fixed elements take little room (H5, T10) */
  @media (max-height: 480px) and (orientation: landscape) {
    .site-header { position: static; }
    .actionbar { padding-block: 4px calc(4px + env(safe-area-inset-bottom)); }
    .actionbar .btn { min-height: 44px; }
    .takeover__links a { min-height: 48px; font-size: var(--step-1); }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
    html[data-js] .reveal:not([data-shown]) { opacity: 1; transform: none; }
  }
}

@layer pages {
  /* ---------- Munin: shared pieces ---------- */
  .h-second { display: block; color: var(--color-accent); }
  .deep .h-second { color: var(--color-glans); }
  .deep { position: relative; background: var(--color-deep); color: var(--color-on-deep); overflow-x: clip; }
  .deep :is(h1, h2, h3) { color: var(--color-on-deep); }
  .deep .eyebrow { color: var(--color-glans); }
  .deep .lead { color: var(--color-on-deep-muted); }
  .deep :focus-visible { outline-color: var(--color-focus-on-deep); }
  .deep > .wrap { position: relative; }
  .pat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .pat__a { fill: var(--color-pat-a); }
  .pat__b { fill: var(--color-pat-b); }
  .pat__c { fill: var(--color-pat-c); }

  /* Buttons in Munin's clothes: Glans with navy text on Deep, Navy with Glans text on Papir */
  .btn--glans { background: var(--color-glans); color: var(--color-navy); }
  .btn--glans:hover { background: var(--color-glans-hover); }
  .btn--navy { background: var(--color-navy); color: var(--color-glans); }
  .btn--navy:hover { background: var(--color-accent); color: var(--color-on-accent); }
  .btn--sm { min-height: 44px; padding: 10px 16px; }
  .btn .icon { width: 1.1em; height: 1.1em; }
  .deep .btn--ghost { color: var(--color-on-deep); }
  .deep .btn--ghost:hover { background: var(--color-line-on-deep); }

  /* The download buttons: the visitor's own system is the primary (data-os, set by script.js) */
  .btn--dl { border-color: currentColor; background: transparent; color: inherit; }
  .btn--dl:hover { background: var(--color-accent-muted); }
  .deep .btn--dl:hover { background: var(--color-line-on-deep); }
  html:not([data-os="windows"]) .btn--dl[data-dl="mac"],
  html[data-os="windows"] .btn--dl[data-dl="windows"] { border-color: transparent; background: var(--color-navy); color: var(--color-glans); }
  html:not([data-os="windows"]) .btn--dl[data-dl="mac"]:hover,
  html[data-os="windows"] .btn--dl[data-dl="windows"]:hover { background: var(--color-accent); color: var(--color-on-accent); }
  html:not([data-os="windows"]) .deep .btn--dl[data-dl="mac"],
  html[data-os="windows"] .deep .btn--dl[data-dl="windows"] { background: var(--color-glans); color: var(--color-navy); }
  html:not([data-os="windows"]) .deep .btn--dl[data-dl="mac"]:hover,
  html[data-os="windows"] .deep .btn--dl[data-dl="windows"]:hover { background: var(--color-glans-hover); color: var(--color-navy); }

  /* ---------- Header ---------- */
  .site-header { border-bottom: 1px solid var(--color-line-on-deep); }
  .site-header__logo img { height: 27px; width: auto; }
  .site-nav a:not(.btn) { color: var(--color-on-deep-muted); font-weight: 500; }
  .site-nav a:not(.btn):hover { color: var(--color-on-deep); text-decoration: none; }
  .site-nav .btn { margin-left: 16px; }
  .menu-button { color: var(--color-on-deep); }
  .takeover__links a { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
  .takeover__links { counter-reset: nav; }
  .takeover__links li { counter-increment: nav; }
  .takeover__links a::before { content: counter(nav, decimal-leading-zero); min-width: 2.4em; font-size: 0.875rem; letter-spacing: 0.1em; color: var(--color-glans); }
  .takeover__note { margin: 0 0 8px; color: var(--color-on-deep-muted); }
  .takeover__contact a { gap: 10px; }
  .takeover { animation-name: takeover-up; }
  @keyframes takeover-up { from { transform: translateY(24px); } }

  /* ---------- 1 · Hero ---------- */
  .hero { padding: clamp(28px, min(5vw, 6vh), 64px) 0 0; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__logo { margin: 0 0 clamp(16px, 3vh, 28px); }
  .hero__logo img { width: clamp(150px, 16vw, 200px); height: auto; }
  .hero h1 { font-size: clamp(2.75rem, min(5.2vw, 9.4vh), 5.25rem); text-wrap: wrap; }
  .hero .lead { margin: clamp(16px, 2.6vh, 24px) 0 0; max-width: 34ch; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); }
  .dl-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.4vh, 32px); }
  .dl-row .btn { min-height: 52px; padding-inline: 22px; }
  .hero__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 18px 0 0; padding: 0; font-size: 0.9375rem; color: var(--color-on-deep-muted); }
  .hero__meta li { display: inline-flex; align-items: center; gap: 8px; }
  .hero__meta .icon { width: 1.05em; height: 1.05em; color: var(--color-glans); }
  .hero__sub { margin: clamp(10px, 1.6vh, 16px) 0 0; max-width: none; font-family: var(--font-display); font-size: clamp(1.6rem, min(2.4vw, 4.6vh), 2.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: var(--color-on-deep); }
  .hero__sub .h-second, .hero__sub .h-line, .hero h1 .h-line, .hero .lead .line { display: block; }
  .hero h1 .hl { color: var(--color-glans); }
  .hero__phone { display: none; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--color-line-on-deep); border-radius: var(--radius); color: var(--color-on-deep); font-size: 0.9375rem; }
  html[data-os="mobile"] .hero__phone { display: flex; }
  .hero__phone .icon { margin-top: 2px; color: var(--color-glans); }

  .hero__visual { position: relative; margin: 0; }
  .hero__shot { border-radius: 14px 14px 0 0; overflow: hidden; line-height: 0; }
  .hero__shot img { width: 100%; height: auto; }

  /* The signature: the app's own three notifications, in order */
  .notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .note { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--color-card-on-deep); border: 1px solid var(--color-line-on-deep); color: var(--color-on-deep-muted); font-size: 0.9375rem; line-height: 1.4; }
  .note strong { display: block; color: var(--color-on-deep); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; }
  .note > span:last-child { font-size: 0.875rem; }
  .note__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--color-deep); }
  .note__icon img { width: 26px; height: 26px; }
  .rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-rec); }
  .note--done { border-color: var(--color-glans); }

  /* ---------- 2 · How ---------- */
  .split-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: var(--space-head); }
  .split-head__text { margin: 0; color: var(--color-text-muted); }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .step { position: relative; display: grid; align-content: start; gap: 8px; padding: 28px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
  .step h3 { font-size: var(--step-1); }
  .step p { margin: 0; }
  .step__no { font-family: var(--font-display); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-accent); }
  .step__label { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
  .step--deep { background: var(--color-deep); border-color: var(--color-deep); color: var(--color-on-deep-muted); }
  .step--deep h3 { color: var(--color-on-deep); }
  .step--deep .step__no, .step--deep .step__label { color: var(--color-glans); }
  .step--deep > p:not(.step__label) { position: relative; max-width: 30ch; }
  .step__raven { position: absolute; right: 18px; top: 18px; width: 64px; height: auto; }
  .note-line { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; color: var(--color-text-muted); }
  .note-line .icon { margin-top: 3px; color: var(--color-accent); }

  /* ---------- 3 · Brief ---------- */
  .brief { padding-bottom: var(--space-section); }
  .brief__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 28px; border-top: 1px solid var(--color-line); }
  .brief .eyebrow { margin: 4px 0 0; font-size: 0.875rem; letter-spacing: 0.12em; color: var(--color-text-muted); }
  .brief p { margin: 0; max-width: 72ch; color: var(--color-text-muted); }

  /* ---------- 4 · Picker ---------- */
  .picker { background: var(--color-surface); border-block: 1px solid var(--color-line); }
  .picker__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .picker__lead { margin: 16px 0 0; color: var(--color-text-muted); }
  .picker__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .picker__tabs [role="tab"], .showcase__tabs [role="tab"] {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px;
    border: 1.5px solid var(--color-line); border-radius: var(--radius); background: var(--color-bg);
    font-weight: 500; cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .picker__tabs [role="tab"]:hover { border-color: var(--color-accent); }
  .picker__tabs [role="tab"][aria-selected="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-glans); }
  .picker__tabs .icon { width: 1.1em; height: 1.1em; }
  .answer { padding: clamp(20px, 3vw, 32px); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
  .answer__type { margin: 0 0 12px; font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; letter-spacing: -0.02em; }
  .answer__rows { margin: 0; display: grid; }
  .answer__rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--color-line); }
  .answer__rows dt { display: flex; align-items: center; gap: 8px; font-weight: 700; }
  .answer__rows dt .icon { color: var(--color-accent); }
  .answer__rows dd { margin: 0; color: var(--color-text-muted); }
  .answer__say { margin: 12px 0 0; padding: 16px 18px; border-left: 3px solid var(--color-accent); background: var(--color-accent-muted); border-radius: 0 var(--radius) var(--radius) 0; }
  .answer__say p { margin: 0; }
  .answer__say-label { margin-bottom: 4px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
  .answer__foot { margin: 12px 0 0; color: var(--color-text-muted); }
  .picker__foot { margin: 14px 0 0; font-size: 0.9375rem; color: var(--color-text-muted); }

  /* ---------- 5 · The box ---------- */
  .box { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
  .box__top { display: flex; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
  .box__grid { list-style: none; margin: 0; padding: 0; }
  .box__grid li { display: flex; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--color-line); }
  .box__grid li:last-child { border-bottom: 0; }
  .box__grid li > .icon { width: 24px; height: 24px; margin-top: 2px; color: var(--color-accent); }
  .box__grid h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
  .box__grid p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--color-text-muted); }

  /* ---------- 6 · Showcase ---------- */
  .showcase__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .showcase__tabs { display: flex; gap: 8px; margin-top: 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .showcase__tabs::-webkit-scrollbar { display: none; }
  .showcase__tabs [role="tab"] { flex: none; background: transparent; border-color: var(--color-line-on-deep); color: var(--color-on-deep-muted); }
  .showcase__tabs [role="tab"] span { font-family: var(--font-display); font-weight: 800; font-size: 0.875rem; color: var(--color-glans); }
  .showcase__tabs [role="tab"]:hover { border-color: var(--color-glans); color: var(--color-on-deep); }
  .showcase__tabs [role="tab"][aria-selected="true"] { background: var(--color-glans); border-color: var(--color-glans); color: var(--color-navy); }
  .showcase__tabs [role="tab"][aria-selected="true"] span { color: var(--color-navy); }
  .showcase__note { margin: 16px 0 0; font-size: 0.875rem; color: var(--color-on-deep-muted); }
  .shot { margin: 0; }
  .shot img { width: 100%; height: auto; border-radius: 12px; }
  .shot figcaption { margin-top: 12px; color: var(--color-on-deep-muted); }

  /* ---------- 7 · Compare ---------- */
  .cmp { border-top: 1px solid var(--color-line); }
  .cmp__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
  .cmp__row--head { display: none; }
  .cmp__row [role="rowheader"] { font-family: var(--font-display); font-weight: 700; }
  .cmp__row [role="cell"] { color: var(--color-text-muted); }
  .cmp__row [role="cell"]::before { content: attr(data-p) ": "; font-weight: 700; color: var(--color-text); }
  .cmp__row [role="cell"] strong { color: var(--color-text); }
  .cmp__foot { margin: 20px 0 0; color: var(--color-text-muted); }

  /* ---------- 8 · Download ---------- */
  .download { background: var(--color-surface); border-top: 1px solid var(--color-line); }
  .dl-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dl-card { display: grid; align-content: start; gap: 12px; padding: clamp(22px, 3vw, 32px); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
  .dl-card__os { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
  .dl-card h3 { font-size: var(--step-2); font-weight: 800; }
  .dl-card__facts { margin: 0; color: var(--color-text-muted); }
  .dl-card .btn { justify-self: start; min-height: 52px; }
  html[data-os="windows"] .dl-card[data-platform="windows"], html:not([data-os="windows"]) .dl-card[data-platform="mac"] { border-color: var(--color-accent); }
  .dl-card__how { border-top: 1px solid var(--color-line); padding-top: 4px; }
  .dl-card__how summary { list-style: none; justify-content: space-between; gap: 12px; }
  .dl-card__how summary::-webkit-details-marker { display: none; }
  .dl-card__how summary .icon { transition: transform var(--dur) var(--ease); }
  .dl-card__how[open] summary .icon { transform: rotate(180deg); }
  .dl-card__how ol { margin: 4px 0 8px; padding-left: 22px; display: grid; gap: 8px; color: var(--color-text-muted); }
  .dl-card__how strong { color: var(--color-text); }
  .dl-after { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dl-after li { display: flex; gap: 12px; align-items: flex-start; color: var(--color-text-muted); font-size: 0.9375rem; }
  .dl-after strong { color: var(--color-text); }
  .dl-after .icon { margin-top: 2px; color: var(--color-accent); }
  .dl-after a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font-weight: 600; color: var(--color-accent); }

  /* ---------- 9 · FAQ ---------- */
  .faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq__ask { margin: 16px 0 0; color: var(--color-text-muted); }
  .faq__ask a { font-weight: 600; color: var(--color-accent); }
  .faq__list { border-top: 1px solid var(--color-line); }
  .faq__list details { border-bottom: 1px solid var(--color-line); }
  .faq__list summary { list-style: none; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; }
  .faq__list summary::-webkit-details-marker { display: none; }
  .faq__list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--color-line); border-radius: 8px; font-weight: 500; color: var(--color-accent); transition: transform var(--dur) var(--ease); }
  .faq__list details[open] summary::after { transform: rotate(45deg); }
  .faq__list summary:hover { color: var(--color-accent); }
  .faq__list details > div { padding: 0 0 16px; color: var(--color-text-muted); }

  /* ---------- 10 · Contact ---------- */
  .contact__mark { display: none; }
  .people { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
  .people li { display: flex; gap: 14px; align-items: center; }
  .people picture, .people img { flex: none; width: 64px; height: 64px; border-radius: 50%; }
  .people p { margin: 0; }
  .people__name { font-family: var(--font-display); font-weight: 700; color: var(--color-on-deep); }
  .people__role { font-size: 0.9375rem; color: var(--color-on-deep-muted); }
  .people__links { display: flex; flex-wrap: wrap; gap: 0 14px; }
  .people__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-glans); font-size: 0.9375rem; }
  .contact__card { padding: clamp(22px, 3vw, 32px); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); }
  .contact__card :focus-visible { outline-color: var(--color-focus); }
  .contact__title { font-size: var(--step-1); font-weight: 800; color: var(--color-text); }
  .deep .contact__title, .deep .form__answer h3 { color: var(--color-text); }
  .contact__lead { margin: 6px 0 18px; color: var(--color-text-muted); }
  .form { max-width: none; gap: 14px; }
  .form__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .field input, .field textarea { background: var(--color-surface); border-color: var(--color-field); }
  .field input:focus, .field textarea:focus { border-color: var(--color-accent); }
  .form__answer { background: var(--color-bg); }
  .form__raven { display: block; width: 48px; height: 48px; margin-bottom: 8px; background: url(assets/images/munin-symbol-papir.svg) center / contain no-repeat; }

  /* ---------- Footer ---------- */
  .site-footer { border-top: 1px solid var(--color-line-on-deep); }
  .site-footer__brand img { width: 140px; height: auto; margin-bottom: 12px; }
  .site-footer__brand p { color: var(--color-on-deep-muted); }
  .site-footer__label { margin-bottom: 4px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-glans); }
  .site-footer a { justify-content: flex-start; text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; }
  .site-footer__legal { color: var(--color-on-deep-muted); }

  /* ---------- Wide screens (the one breakpoint, T3) ---------- */
  @media (min-width: 900px) {
    .hero { padding-top: clamp(32px, 6vh, 72px); }
    .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: clamp(32px, 4vw, 56px); align-items: center; min-height: calc(100svh - var(--header-h) - clamp(32px, 6vh, 72px)); max-height: 860px; }
    .hero__text { padding-bottom: clamp(24px, 5vh, 64px); }
    .hero__visual { align-self: center; }
    .hero__shot { width: min(calc(100% - 24px), calc((100svh - var(--header-h) - 96px) * 1.39)); margin-left: auto; border-radius: 16px 0 0 0; }
    .hero__shot img { width: auto; max-width: none; height: auto; min-width: 100%; }
    .notes { position: absolute; left: -56px; bottom: clamp(20px, 4vh, 48px); width: 248px; gap: 8px; }
    .note { box-sizing: border-box; }
    .split-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .brief__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
    .picker__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
    .picker__tabs { flex-direction: column; align-items: stretch; max-width: 340px; gap: 6px; }
    .picker h2 { font-size: clamp(2rem, min(3.2vw, 6.4vh), 3rem); }
    .picker__lead { margin-top: 12px; }
    .answer { padding: 22px 26px; }
    .answer__type { margin-bottom: 6px; }
    .answer__rows > div { grid-template-columns: 136px minmax(0, 1fr); gap: 14px; padding: 9px 0; }
    .answer__rows dd, .answer__say p:not(.answer__say-label) { font-size: 0.96875rem; line-height: 1.55; }
    .answer__say { padding: 12px 16px; }
    .picker__foot { margin-top: 10px; }
    .picker__tabs [role="tab"] { justify-content: flex-start; }
    .box__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .box .carousel-bar { display: none; }
    .box__grid li { border-right: 1px solid var(--color-line); }
    .box__grid li:nth-child(3n) { border-right: 0; }
    .box__grid li:nth-last-child(-n+3) { border-bottom: 0; }
    .showcase__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
    .showcase__tabs { flex-direction: column; align-items: stretch; overflow: visible; margin-inline: 0; padding-inline: 0; max-width: 300px; }
    .showcase__tabs [role="tab"] { justify-content: flex-start; }
    .shot img { width: min(100%, calc((100svh - var(--header-h) - 120px) * 1.39)); }
    .cmp__row { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; }
    .cmp__row--head { display: grid; padding-block: 12px; }
    .cmp__row--head [role="columnheader"] { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; }
    .cmp__row--head .icon { color: var(--color-accent); }
    .cmp__row [role="cell"]::before { content: none; }
    .dl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .dl-after { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; }
    .contact > .wrap { align-items: center; }
    .contact__mark { display: block; width: 140px; height: auto; margin-bottom: 24px; }
    .form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Phone: the signature moves under the screenshot, the screenshot keeps its crop */
  @media (max-width: 899.98px) {
    .box { background: transparent; border: 0; border-radius: 0; overflow: visible; }
    .box__top { display: none; }
    .box__grid li { flex-direction: column; gap: 12px; height: 100%; padding: 22px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
    .box__grid li:last-child { border-bottom: 1px solid var(--color-line); }
    .compare-gap { display: none; }
    .hero h1 { font-size: clamp(2.3rem, 10.6vw, 3rem); }
    .dl-row { display: grid; grid-template-columns: minmax(0, 1fr); }
    /* The app on top, small; both download buttons in the first screen (M2) */
    .hero { padding-top: 14px; }
    .hero__grid { gap: 18px; }
    .hero__visual { order: -1; margin-right: calc(-1 * var(--gutter)); }
    .hero__shot { max-height: 132px; border-radius: 10px 0 0 10px; }
    .hero__shot img { width: 400px; max-width: none; }
    .notes { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 0; width: auto; }
    .notes .note:not(:first-child) { display: none; }
    .notes .note { padding: 6px 10px; }
    .hero__logo { margin-bottom: 12px; }
    .hero__logo img { width: 132px; }
    .hero__meta { margin-top: 14px; }

  }

  /* The notifications arrive one by one, once (only when the script runs and motion is welcome) */
  @media (prefers-reduced-motion: no-preference) {
    html[data-js] .notes[data-play] .note { animation: note-in 0.4s var(--ease) both; }
    html[data-js] .notes[data-play] .note:nth-child(2) { animation-delay: 1.4s; }
    html[data-js] .notes[data-play] .note:nth-child(3) { animation-delay: 2.8s; }
    @keyframes note-in { from { clip-path: inset(0 0 100% 0 round 14px); transform: translateY(10px); } }
  }

  /* ---------- Alfa tag (hero) ---------- */
  .hero__logo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
  .tag { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 10px; border: 1.5px solid var(--color-glans); border-radius: 6px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-glans); text-decoration: none; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .tag:hover { background: var(--color-glans); color: var(--color-navy); }

  /* ---------- Two-line headings: one line each on a wide screen ---------- */
  .h-lines .h-line, .h-lines .h-second { display: block; }


  /* ---------- 1b · The hero: Munin recording, in a Mac window floating in 3D (built in code) ---------- */
  .float { position: relative; margin: 0; }
  .float__stage { position: relative; perspective: 1800px; padding: 18px 0 34px; }
  .float__stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, var(--color-glans-halo), var(--color-glans-clear)); }
  .float__win { position: relative; z-index: 1; width: 100%; aspect-ratio: 900 / 580; overflow: hidden; border-radius: 14px; border: 1px solid var(--color-m-line-strong); background: var(--color-m-bg); transform: rotateY(-11deg) rotateX(5deg); transform-origin: 60% 50%; }
  .rec { position: absolute; left: 0; top: 0; width: 900px; height: 580px; display: grid; grid-template-columns: 236px minmax(0, 1fr); transform-origin: 0 0; transform: scale(var(--k, 1)); font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--color-m-text); background: var(--color-m-bg); }
  @supports (zoom: 2) { .rec { transform: none; zoom: var(--k, 1); } }
  .rec .icon { width: 16px; height: 16px; }
  .rec__side { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 8px 8px; padding: 12px; border-radius: 14px; background: var(--color-m-side); border: 1px solid var(--color-m-line); }
  .rec__top { display: flex; align-items: center; justify-content: space-between; color: var(--color-m-muted); }
  .rec__brand { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; font-family: var(--font-display); font-size: 24px; font-weight: 700; }
  .rec__card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--color-m-rec-line); background: var(--color-m-rec-bg); color: var(--color-m-rec-text); }
  .rec__card b { display: block; font-size: 15px; }
  .rec__mono::after { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 600; }
  .rec__card .rec__mono::after { font-size: 14px; color: var(--color-m-rec-text); }
  .rec__nav { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
  .rec__nav li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
  .rec__nav em { margin-left: auto; font-style: normal; color: var(--color-glans); }
  .rec__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--color-m-muted); }
  .rec__foot span { margin-left: auto; }
  .rec__main { display: grid; align-content: start; gap: 18px; padding: 34px 30px 20px; min-width: 0; }
  .rec__eyebrow { margin: 0 0 6px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-m-muted); }
  .rec__title { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
  .rec__sub { margin: 4px 0 0; color: var(--color-m-muted); }
  .rec__chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--color-m-line-strong); font-weight: 600; }
  .rec__strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 14px; background: var(--color-m-card); border: 1px solid var(--color-m-line); }
  .rec__time { display: flex; align-items: center; gap: 10px; }
  .rec__mono--big::after { font-size: 24px; color: var(--color-m-text); }
  .rec__meters { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-width: 0; }
  .rec__src, .rec__state { font-size: 14px; color: var(--color-m-muted); }
  .rec__bars { display: flex; align-items: center; justify-content: space-between; height: 22px; overflow: hidden; }
  .rec__bars i { flex: none; width: 3px; height: 22px; border-radius: 2px; background: var(--color-m-room); transform: scaleY(max(0.14, calc(var(--h) * var(--amp, 1) * var(--wv, 1)))); }
  .rec__bars--sys i { background: var(--color-m-sys); }
  .rec__stop { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 20px; background: var(--color-m-stop); color: var(--color-m-text); font-weight: 700; white-space: nowrap; }
  .rec__notes { display: grid; gap: 8px; padding: 18px 22px; border-radius: 14px; background: var(--color-m-card); border: 1px solid var(--color-m-line); }
  .rec__noteshead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--color-m-line); }
  .rec__cardtitle { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; }
  .rec__mark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--color-m-line-strong); background: transparent; color: var(--color-m-text); font: inherit; font-weight: 700; cursor: pointer; transition: background-color var(--dur) var(--ease), transform 0.12s var(--ease); }
  .rec__mark:hover { background: var(--color-m-line); }
  .rec__mark:active { transform: scale(0.95); }
  .rec__mark:focus-visible { outline: 3px solid var(--color-glans); outline-offset: 2px; }
  .rec__saved { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--color-m-muted); }
  /* Shared by the hero: the running clock, the typed notes, the starred moments */
  .live__clock { --lm: 10; --ls: 41; }
  .live__clock::after { content: counter(lm) ":" counter(ls, decimal-leading-zero); counter-reset: lm var(--lm) ls var(--ls); font-variant-numeric: tabular-nums; }
  .live__line { margin: 0; font-size: 16px; }
  .live__line span { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
  .live__star { display: none; margin: 0; font-size: 16px; color: var(--color-glans); font-weight: 600; }
  .live__at::before { content: attr(data-time); font-variant-numeric: tabular-nums; }
  [data-live][data-marks="1"] .live__star--1, [data-live][data-marks="2"] :is(.live__star--1, .live__star--2) { display: block; }
  @media (prefers-reduced-motion: no-preference) {
    .float__win { animation: float 7s ease-in-out infinite; }
    @keyframes float { 0%, 100% { transform: rotateY(-11deg) rotateX(5deg) translateY(0); } 50% { transform: rotateY(-9deg) rotateX(4deg) translateY(-10px); } }
    .live__clock { animation: lt-s 60s steps(60, end) -41s infinite, lt-m 3600s steps(60, end) -41s infinite; }
    @keyframes lt-s { from { --ls: 0; } to { --ls: 60; } }
    @keyframes lt-m { from { --lm: 10; } to { --lm: 70; } }
    .rec__bars i { animation: wv 0.8s ease-in-out infinite alternate; animation-delay: var(--d); }
    @keyframes wv { from { --wv: 0.25; } to { --wv: 1; } }
    /* Turn-taking: the room speaks, then the call, then the room again */
    .rec__bars--room { animation: amp-room 9s ease-in-out infinite; }
    .rec__bars--sys { animation: amp-sys 9s ease-in-out infinite; }
    @keyframes amp-room { 0%, 42% { --amp: 1; } 50%, 90% { --amp: 0.2; } 100% { --amp: 1; } }
    @keyframes amp-sys { 0%, 42% { --amp: 0.2; } 50%, 90% { --amp: 1; } 100% { --amp: 0.2; } }
    .live__line--1 span { animation: m-type 1.6s steps(23) both 0.8s; }
    .live__line--2 span { animation: m-type 1.6s steps(25) both 4.6s; }
    .live__star { animation: star-in 0.32s var(--ease) both; }
    @keyframes star-in { from { transform: translateX(-8px); clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    .rec .m-dot { animation: rec-blink 1.6s ease-in-out infinite; }
    @keyframes rec-blink { 50% { transform: scale(0.75); } }
  }

  /* ---------- 2 · Before and after, side by side ---------- */
  .ba { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
  .ba__head { display: none; }
  .ba__list { list-style: none; margin: 0; padding: 0; }
  .ba__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 20px; border-bottom: 1px solid var(--color-line); }
  .ba__gain { position: relative; }
  .ba__row:last-child { border-bottom: 0; }
  .ba__row p { margin: 0; }
  .ba__pain { position: relative; justify-self: start; color: var(--color-text-muted); font-size: 0.9375rem; }
  .ba__pain::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--color-text-muted); transform-origin: 0 50%; }
  .ba__arrow { display: none; }
  .ba__gain { display: flex; gap: 10px; align-items: center; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
  .ba__gain .icon { flex: none; width: 22px; height: 22px; color: var(--color-accent); }
  /* Each row is struck out as it scrolls into place (data-done from script.js), then its answer arrives */
  @media (prefers-reduced-motion: no-preference) {
    html[data-js] .ba__row:not([data-done]) .ba__pain::after { transform: scaleX(0); }
    html[data-js] .ba__row:not([data-done]) :is(.ba__gain, .ba__arrow) { clip-path: inset(0 100% 0 0); }
    .ba__pain::after { transition: transform 0.4s var(--ease); }
    .ba__pain { transition: color 0.4s var(--ease); }
    html[data-js] .ba__row:not([data-done]) .ba__pain { color: var(--color-text); }
    .ba__gain, .ba__arrow { transition: clip-path 0.4s var(--ease) 0.25s; }
    .ba__arrow { transition-delay: 0.15s; }
  }

  /* ---------- 3 · The myth: the raven's day ---------- */
  .myth__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .myth__head { margin-bottom: clamp(16px, 2.4vh, 24px); }
  .myth__turn .line { display: block; }
  .myth__tale { margin: 0; font-size: var(--step-1); line-height: 1.5; color: var(--color-on-deep-muted); max-width: 32ch; }
  .myth__turn { margin: 16px 0 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; color: var(--color-glans); }
  .myth__rune { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--color-line-on-deep); color: var(--color-on-deep-muted); font-size: 0.9375rem; }
  .myth__glyphs { font-family: var(--font-rune); font-size: 1.5rem; letter-spacing: 0.14em; color: var(--color-glans); }
  .myth__replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 20px; padding: 8px 14px; border: 1.5px solid var(--color-line-on-deep); border-radius: var(--radius); background: transparent; color: var(--color-on-deep); font-weight: 600; cursor: pointer; transition: border-color var(--dur) var(--ease); }
  .myth__replay:hover { border-color: var(--color-glans); }
  html:not([data-js]) .myth__replay { display: none; }
  .day { width: 100%; height: auto; overflow: visible; }
  .day__stars circle { fill: var(--color-glans); transition: opacity 0.6s var(--ease); }
  .myth:not([data-step="3"]) .day__stars circle { visibility: hidden; }
  .day__runes { font-family: var(--font-rune); font-size: 30px; letter-spacing: 0.3em; fill: var(--color-rune); }
  .day__sky { fill: none; stroke: none; }
  .day__arc { fill: none; stroke: var(--color-line-on-deep); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
  .day__lit { fill: none; stroke: var(--color-glans); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  .day__stop { fill: var(--color-deep); stroke: var(--color-glans); stroke-width: 3; }
  .day__halo { fill: var(--color-glans-halo); }
  .day__disc { fill: var(--color-glans); }
  .day__cut { fill: var(--color-deep); visibility: hidden; }
  .myth[data-step="3"] .day__cut { visibility: visible; }
  .myth[data-step="3"] .day__halo { fill: var(--color-moon-halo); }
  .day__bird { visibility: hidden; }
  .myth:not([data-bird]) .day__bird--stand, .myth[data-bird="stand"] .day__bird--stand,
  .myth[data-bird="listen"] .day__bird--listen, .myth[data-bird="fly"] .day__bird--fly { visibility: visible; }
  .day__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .day__step { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--color-line-on-deep); border-radius: var(--radius-lg); background: var(--color-card-on-deep); color: var(--color-on-deep-muted); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .day__step strong { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-on-deep); }
  .day__no { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-glans); }
  .myth[data-step="0"] :is(.day__step--1, .day__step--2, .day__step--3),
  .myth[data-step="1"] :is(.day__step--2, .day__step--3),
  .myth[data-step="2"] .day__step--3 { border-color: transparent; background: transparent; transform: translateY(6px); }
  .myth[data-step="0"] :is(.day__step--1, .day__step--2, .day__step--3) strong,
  .myth[data-step="1"] :is(.day__step--2, .day__step--3) strong,
  .myth[data-step="2"] .day__step--3 strong { color: var(--color-on-deep-muted); }
  .myth[data-step="0"] :is(.day__stop--1, .day__stop--2, .day__stop--3),
  .myth[data-step="1"] :is(.day__stop--2, .day__stop--3),
  .myth[data-step="2"] .day__stop--3 { stroke: var(--color-line-on-deep); }

  /* ---------- 4 · The calculator ---------- */
  .calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .calc__inputs { display: grid; gap: 22px; align-content: start; }
  .calc__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: baseline; }
  .calc__field label { font-weight: 600; }
  .calc__field output { font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; color: var(--color-accent); font-variant-numeric: tabular-nums; }
  .calc__field input { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
  .calc__how { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
  .calc__out { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px; grid-template-areas: "big stack" "lead stack" "facts stack"; gap: 6px 24px; align-content: start; padding: clamp(22px, 3vw, 32px); background: var(--color-deep); color: var(--color-on-deep-muted); border-radius: var(--radius-lg); }
  .calc__big { grid-area: big; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .calc__num { font-family: var(--font-display); font-size: clamp(3.5rem, min(7vw, 12vh), 6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; color: var(--color-on-deep); font-variant-numeric: tabular-nums; }
  .calc__unit { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; color: var(--color-glans); }
  .calc__lead { grid-area: lead; margin: 0; }
  .calc__facts { grid-area: facts; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--color-line-on-deep); display: grid; gap: 10px; }
  .calc__facts div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 10px; }
  .calc__facts dt { color: var(--color-on-deep-muted); }
  .calc__facts dd { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; color: var(--color-on-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .stack { grid-area: stack; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 8px; min-height: 260px; }
  .stack__ruler { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.875rem; color: var(--color-on-deep-muted); text-align: right; }
  .stack__well { position: relative; border-bottom: 2px solid var(--color-line-on-deep); }
  .stack__paper { position: absolute; left: 6px; right: 6px; bottom: 0; height: 50%; max-height: 100%; background: repeating-linear-gradient(to top, var(--color-paper) 0 3px, var(--color-paper-edge) 3px 4px); border-radius: 2px 2px 0 0; transition: height 0.4s var(--ease); }
  .stack__label { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; text-align: center; }
  .stack__label strong { color: var(--color-on-deep); }

  /* ---------- 5 · Privacy: where the data goes ---------- */
  .pv { display: grid; gap: 20px; }
  .pv .picker__tabs { flex-direction: row; flex-wrap: wrap; max-width: none; margin: 0; }
  .pv__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: clamp(18px, 3vw, 28px); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
  .flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 26px 12px; padding: 44px 0 4px; }
  .flow::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 70px; border-top: 2px dashed var(--color-line); }
  .flow__node { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 700; font-size: 0.9375rem; }
  .flow__node .icon { width: 52px; height: 52px; padding: 13px; border-radius: 14px; background: var(--color-surface); border: 1.5px solid var(--color-line); color: var(--color-text); }
  .flow__node--mac .icon { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-glans); }
  .flow__node--bin { grid-column: 2; grid-row: 2; }
  .flow__node--off { color: var(--color-text-muted); }
  .flow__node--off .icon { border-style: dashed; color: var(--color-text-muted); background: transparent; }
  .tok { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; background: var(--color-glans); color: var(--color-navy); top: 4px; left: 16.6%; transform: translateX(-50%); }
  .tok .icon { width: 1em; height: 1em; }
  .tok--text, .tok--notes { left: 50%; background: var(--color-navy); color: var(--color-glans); }
  .tok--back { left: 50%; background: var(--color-accent); color: var(--color-on-accent); }
  .flow--cloud .tok--back { visibility: visible; }
  .tok--stay { left: 50%; }
  .tok--notes { left: 50%; }
  /* End state without motion: audio in the bin, text at Claude (or kept on the machine) */
  .tok--audio { left: calc(50% + 74px); top: calc(100% - 52px); }
  .flow--cloud .tok--text { left: 83.3%; }
  .flow--cloud .tok--back { top: 4px; }
  @media (prefers-reduced-motion: no-preference) {
    .pv__panel:not([hidden]) .tok--audio { animation: tok-audio 2.6s var(--ease) both; }
    .pv__panel:not([hidden]) .flow--cloud .tok--text { animation: tok-cloud 2.6s var(--ease) both; }
    .pv__panel:not([hidden]) .flow--cloud .tok--back { animation: tok-back 3.4s var(--ease) both; }
    .pv__panel:not([hidden]) .tok--stay { animation: tok-stay 2.6s var(--ease) both; }
    .pv__panel:not([hidden]) .tok--notes { animation: tok-pop 0.6s var(--ease) both 0.3s; }
    @keyframes tok-audio { 0% { left: 16.6%; top: 4px; } 30% { left: 50%; top: 4px; } 55% { left: 50%; top: 4px; } 100% { left: calc(50% + 74px); top: calc(100% - 52px); } }
    @keyframes tok-cloud { 0%, 35% { left: 50%; clip-path: inset(0 0 0 100%); } 45% { left: 50%; clip-path: inset(0); } 100% { left: 83.3%; clip-path: inset(0); } }
    @keyframes tok-back { 0%, 70% { left: 83.3%; visibility: visible; clip-path: inset(0 0 0 100%); } 78% { left: 83.3%; clip-path: inset(0); } 100% { left: 50%; top: 4px; visibility: visible; clip-path: inset(0); } }
    @keyframes tok-stay { 0%, 35% { left: 50%; clip-path: inset(0 0 0 100%); } 45% { clip-path: inset(0); left: 50%; } 70% { left: 62%; } 85% { left: 50%; } 100% { left: 50%; } }
    @keyframes tok-pop { from { transform: translateX(-50%) scale(0.6); } }
  }
  .pv__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--color-text-muted); }
  .pv__facts strong { color: var(--color-text); }
  .pv__panel .answer__say { margin: 0; }
  .pv__promise { display: flex; gap: 12px; align-items: flex-start; max-width: none; margin: 0; color: var(--color-text-muted); }
  .pv__promise .icon { flex: none; width: 24px; height: 24px; color: var(--color-accent); }
  .pv__promise strong { color: var(--color-text); }

  /* ---------- 6 · The demo: the app, animated ---------- */
  .demo { display: grid; gap: 16px; }
  .demo__frame { position: relative; width: min(100%, 980px, calc((100svh - var(--header-h) - 360px) * 1.6)); min-width: min(100%, 560px); margin-inline: auto; aspect-ratio: 960 / 600; overflow: hidden; border-radius: 16px; border: 1px solid var(--color-line-on-deep); background: var(--color-m-bg); }
  .mock { position: absolute; left: 0; top: 0; width: 960px; height: 600px; display: grid; grid-template-columns: 220px minmax(0, 1fr); transform-origin: 0 0; transform: scale(var(--k, 1)); backface-visibility: hidden; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--color-m-text); background: var(--color-m-bg); }
  @supports (zoom: 2) { .mock { transform: none; zoom: var(--k, 1); } }
  .mock .icon { width: 16px; height: 16px; }
  .mock__side { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 10px 10px; padding: 14px 12px; border-radius: 14px; background: var(--color-m-side); }
  .mock__lights { display: flex; gap: 7px; } .mock__lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--color-m-light); }
  .mock__brand { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-family: var(--font-display); font-size: 21px; font-weight: 700; }
  .mock__new { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 20px; background: var(--color-glans); color: var(--color-navy); font-weight: 700; }
  .mock__reccard { display: none; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-m-rec-line); background: var(--color-m-rec-bg); color: var(--color-m-rec-text); }
  .mock__reccard b { display: block; }
  .mock__nav { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
  .mock__nav li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--color-m-text); }
  .mock__nav li.is-on { background: var(--color-m-card); font-weight: 700; }
  .mock__nav em { margin-left: auto; font-style: normal; color: var(--color-glans); }
  .mock__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--color-m-muted); }
  .mock__foot span { margin-left: auto; }
  .mock__main { position: relative; padding: 34px 34px 20px; overflow: hidden; }
  .sc { display: none; }
  .m-h1 { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-m-text); }
  .m-h2 { margin: 22px 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
  .m-sub { margin: 4px 0 0; color: var(--color-m-muted); }
  .m-small { margin: 10px 0 0; color: var(--color-m-muted); font-size: 14px; }
  .m-eyebrow { margin: 0 0 6px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-glans); }
  .m-eyebrow--muted { color: var(--color-m-muted); display: flex; gap: 6px; align-items: center; }
  .m-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 24px; font-weight: 700; }
  .m-card { margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--color-m-card); border: 1px solid var(--color-m-line); }
  .m-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 16px; border: 1px solid var(--color-m-line); color: var(--color-m-text); }
  .m-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; font-weight: 700; white-space: nowrap; transition: transform 0.15s var(--ease), filter 0.15s var(--ease); }
  .m-next .m-btn { display: flex; width: max-content; margin-top: 12px; }
  .m-btn--glans { background: var(--color-glans); color: var(--color-navy); }
  .m-btn--ghost { border: 1px solid var(--color-m-line-strong); color: var(--color-m-text); }
  .m-btn[data-pressed], .m-notif[data-pressed] { transform: scale(0.94); filter: brightness(1.15); }
  .m-rows { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--color-m-card); }
  .m-rows li, .m-steprow { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--color-m-line); }
  .m-rows li:last-child { border-bottom: 0; }
  .m-rows small, .m-steprow small { display: block; color: var(--color-m-muted); font-size: 14px; }
  .m-check { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; border: 1.5px solid var(--color-m-line-strong); }
  .m-banner { display: none; align-items: center; gap: 14px; margin: -14px 0 18px; padding: 12px 16px; border-radius: 14px; background: var(--color-m-card); border: 1px solid var(--color-m-line); }
  .m-banner__text { flex: 1; }
  .m-stage--2 { display: none; }
  .m-progress { display: block; width: 100%; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--color-m-line); overflow: hidden; }
  .m-progress i { display: block; width: 100%; height: 100%; background: var(--color-glans); transform-origin: 0 50%; transform: scaleX(1); }
  .m-rechead { display: flex; justify-content: space-between; gap: 20px; }
  .m-rechead .m-chip { margin-top: 12px; }
  .m-recctl { display: grid; justify-items: end; align-content: start; gap: 12px; }
  .m-recctl p { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; }
  .m-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-rec); }
  .m-timer::after { content: "10:" counter(s, decimal-leading-zero); counter-reset: s var(--s); font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 0.02em; margin-left: 8px; color: var(--color-m-text); }
  .m-timer--small::after { font-size: 14px; margin-left: 0; color: var(--color-m-rec-text); }
  .m-timer { --s: 41; }
  .m-notes { min-height: 290px; }
  .m-notes__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--color-m-line); }
  .m-cardtitle { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
  .m-type { margin: 0 0 14px; font-size: 16px; }
  .m-type span { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
  .m-saved { display: flex; align-items: center; gap: 6px; margin: 30px 0 0; color: var(--color-m-muted); }
  .m-tabs { display: inline-flex; gap: 4px; margin: 16px 0 18px; padding: 4px; border-radius: 12px; background: var(--color-m-card); }
  .m-tabs span { padding: 6px 12px; border-radius: 9px; font-weight: 600; }
  .m-tabs .is-on { border: 1.5px solid var(--color-glans); }
  .m-verdict { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--color-m-good); font-weight: 700; }
  .m-big { margin: 6px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
  .m-actions { display: flex; gap: 10px; margin-top: 14px; }
  .m-actions--end { justify-content: flex-end; }
  .m-step { margin-top: 16px; padding: 12px 16px; }
  .m-step .m-steprow { padding: 4px 0 0; border: 0; }
  .m-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .m-signals div { display: grid; gap: 2px; }
  .m-signals small { color: var(--color-m-muted); font-size: 14px; }
  .m-signals em { font-style: normal; color: var(--color-m-muted); font-size: 14px; }
  .m-modal { display: none; position: absolute; z-index: 3; left: 50%; top: 50%; width: 520px; transform: translate(-50%, -50%); padding: 24px; border-radius: 18px; background: var(--color-m-side); border: 1px solid var(--color-m-line-strong); }
  .m-modaltitle { margin: 6px 0 4px; font-family: var(--font-display); font-size: 26px; font-weight: 700; }
  .m-quote { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--color-m-card); }
  .m-quote b { display: block; margin-bottom: 4px; }
  .m-seg { display: inline-flex; gap: 4px; margin: 12px 0 12px; padding: 4px; border-radius: 12px; background: var(--color-m-card); }
  .m-seg span { padding: 5px 14px; border-radius: 9px; font-weight: 600; }
  .m-seg .is-on { border: 1.5px solid var(--color-glans); }
  .m-mail { display: grid; gap: 10px; padding: 16px; border-radius: 12px; background: var(--color-m-card); }
  .m-line { margin: 0; }
  .m-notif { display: none; position: absolute; z-index: 4; right: 16px; top: 16px; width: 340px; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--color-m-notif); border: 1px solid var(--color-m-line-strong); transition: transform 0.15s var(--ease); }
  .m-notif p { margin: 0; color: var(--color-m-muted); }
  .m-notif b { display: block; color: var(--color-m-text); }
  .m-cursor { position: absolute; z-index: 9; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--color-m-cursor); border: 2px solid var(--color-m-text); transform: translate(var(--cx, 700px), var(--cy, 520px)); transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
  .mock__main::after { content: ""; position: absolute; inset: 0; background: var(--color-m-dim); visibility: hidden; }
  /* Scenes */
  .demo[data-scene="1"] .sc--idag, .demo[data-scene="2"] .sc--idag, .demo[data-scene="4"] .sc--idag, .demo[data-scene="5"] .sc--idag { display: block; }
  .demo[data-scene="3"] .sc--rec { display: block; }
  .demo[data-scene="6"] .sc--over, .demo[data-scene="7"] .sc--over { display: block; }
  .demo[data-scene="2"] .m-modal--consent, .demo[data-scene="7"] .m-modal--mail { display: block; }
  .demo:is([data-scene="2"], [data-scene="7"]) .mock__main::after { visibility: visible; }
  .demo[data-scene="3"] .mock__reccard { display: flex; }
  .demo:is([data-scene="4"], [data-scene="5"]) .m-banner { display: flex; }
  .demo[data-scene="5"] .m-stage--1 { display: none; }
  .demo[data-scene="5"] .m-stage--2 { display: inline; }
  .demo[data-scene="5"] .m-notif { display: flex; }
  .demo:is([data-scene="4"], [data-scene="5"]) .m-next .m-btn { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .demo[data-playing][data-scene="3"] .m-timer { animation: m-tick 6s steps(64) both; }
    .demo[data-playing][data-scene="3"] .m-type--1 span { animation: m-type 1.6s steps(24) both 0.5s; }
    .demo[data-playing][data-scene="3"] .m-type--2 { animation: m-show 0.01s both 3.4s; }
    .demo[data-playing][data-scene="3"] .m-type--2 span { animation: m-type 1.8s steps(42) both 3.4s; }
    .demo[data-playing][data-scene="4"] .m-progress i { animation: m-fill 4s linear both; }
    .demo[data-playing][data-scene="5"] .m-progress i { animation: none; }
    .demo[data-playing][data-scene="5"] .m-notif { animation: m-slide 0.45s var(--ease) both 0.3s; }
    .demo[data-playing][data-scene="6"] .m-signals div { animation: m-rise 0.4s var(--ease) both; }
    .demo[data-playing][data-scene="6"] .m-signals div:nth-child(1) { animation-delay: 0.9s; }
    .demo[data-playing][data-scene="6"] .m-signals div:nth-child(2) { animation-delay: 1.1s; }
    .demo[data-playing][data-scene="6"] .m-signals div:nth-child(3) { animation-delay: 1.3s; }
    .demo[data-playing][data-scene="6"] :is(.m-verdict, .m-big) { animation: m-rise 0.4s var(--ease) both 0.3s; }
    .demo[data-playing][data-scene="7"] .m-line { animation: m-wipe 0.5s var(--ease) both; }
    .demo[data-playing][data-scene="7"] .m-line--2 { animation-delay: 0.4s; }
    .demo[data-playing][data-scene="7"] .m-line--3 { animation-delay: 0.8s; }
    .demo[data-playing][data-scene="7"] .m-line--4 { animation-delay: 1.3s; }
    .demo[data-playing][data-scene="7"] .m-line--5 { animation-delay: 1.8s; }
    @keyframes m-tick { from { --s: 0; } to { --s: 41; } }
    @keyframes m-type { from { width: 0; } }
    @keyframes m-show { from { visibility: hidden; } to { visibility: visible; } }
    @keyframes m-fill { from { transform: scaleX(0); } }
    @keyframes m-slide { from { transform: translateX(380px); } }
    @keyframes m-rise { from { transform: translateY(10px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  }
  .demo:not([data-playing]) .m-cursor { visibility: hidden; }
  .demo__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
  .demo__play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--color-line-on-deep); border-radius: var(--radius); background: transparent; color: var(--color-on-deep); font-weight: 600; cursor: pointer; }
  .demo__play:hover { border-color: var(--color-glans); }
  html:not([data-js]) .demo__play { display: none; }
  .demo__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .demo__chips button { position: relative; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-line-on-deep); border-radius: var(--radius); background: transparent; color: var(--color-on-deep-muted); font-weight: 600; cursor: pointer; overflow: hidden; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .demo__chips button:hover { color: var(--color-on-deep); border-color: var(--color-glans); }
  .demo__chips button[aria-current="step"] { color: var(--color-navy); background: var(--color-glans); border-color: var(--color-glans); }
  .demo .showcase__note { margin: 0; text-align: center; }


  /* ---------- 7b · Roadmap ---------- */
  .road { position: relative; margin-top: clamp(40px, 6vh, 64px); padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--color-deep); color: var(--color-on-deep-muted); overflow: hidden; }
  .road__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 28px; }
  .road__title { font-size: var(--step-2); font-weight: 800; color: var(--color-on-deep); }
  .road__note { margin: 0; font-size: 0.9375rem; }
  .road__note a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font-weight: 600; color: var(--color-glans); }
  .road__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .road__list::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 2px dashed var(--color-line-on-deep); }
  .road__item { position: relative; display: grid; gap: 4px; align-content: start; padding-left: 62px; min-height: 44px; }
  .road__item p { margin: 0; }
  .road__dot { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-deep); border: 2px dashed var(--color-line-on-deep); color: var(--color-glans); }
  .road__dot .icon { width: 20px; height: 20px; }
  .road__item--now .road__dot { border: 2px solid var(--color-glans); background: var(--color-glans); }
  .road__item--now .road__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--color-glans); }
  .road__when { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-glans); }
  .road__item h4 .line, .site-footer__brand .line { display: block; }
  .road__item h4 { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; color: var(--color-on-deep); }
  .road__item--now h4 { color: var(--color-glans); }
  @media (prefers-reduced-motion: no-preference) {
    .road__item--now .road__dot::after { animation: road-pulse 2.4s var(--ease) infinite; }
    @keyframes road-pulse { from { transform: scale(1); border-color: var(--color-glans); } to { transform: scale(1.7); border-color: var(--color-glans-clear); } }
    .road[data-shown] .road__item { animation: road-in 0.4s var(--ease) both; }
    .road[data-shown] .road__item:nth-child(2) { animation-delay: 0.15s; }
    .road[data-shown] .road__item:nth-child(3) { animation-delay: 0.3s; }
    .road[data-shown] .road__item:nth-child(4) { animation-delay: 0.45s; }
    @keyframes road-in { from { transform: translateY(10px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(-20px -20px -20px -20px); } }
  }

  /* ---------- 8 · Download: your machine big, the others small ---------- */
  .os { width: 1.15em; height: 1.15em; flex: none; }
  .dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dl-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .dl-card__logo .os { width: 40px; height: 40px; color: var(--color-text); }
  .dl-card__you { display: none; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: 6px; background: var(--color-accent-muted); color: var(--color-accent); font-weight: 700; font-size: 0.875rem; }
  html[data-os="mac"] [data-platform="mac"] .dl-card__you,
  html[data-os="windows"] [data-platform="windows"] .dl-card__you,
  html[data-os="linux"] [data-platform="linux"] .dl-card__you { display: inline-flex; }
  .dl-card--soon { background: transparent; border-style: dashed; }
  .dl-card--soon .dl-card__logo .os { color: var(--color-text-muted); }
  .dl-card--soon a { font-weight: 600; color: var(--color-accent); }
  html:not([data-os="windows"]):not([data-os="linux"]) .dl-card[data-platform="mac"],
  html[data-os="windows"] .dl-card[data-platform="windows"],
  html[data-os="linux"] .dl-card[data-platform="linux"] { border-color: var(--color-accent); border-width: 2px; }

  /* ---------- 7 · Alpha ---------- */
  .alfa__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .alfa .section__head { margin-bottom: clamp(16px, 2.4vh, 24px); }
  .alfa__lead { margin: 0; color: var(--color-text-muted); }
  .alfa__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
  .alfa__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--color-text-muted); }
  .alfa__list .icon { margin-top: 3px; color: var(--color-accent); }
  .alfa__list strong { display: block; color: var(--color-text); }
  .alfa__list a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px -12px; font-weight: 600; color: var(--color-accent); }
  .alfa .cmp { align-self: center; }
  .cmp__row--head .os { color: var(--color-text); }
  .cmp-acc { border-top: 1px solid var(--color-line); }
  .cmp-acc details { border-bottom: 1px solid var(--color-line); }
  .cmp-acc summary { list-style: none; justify-content: space-between; min-height: 52px; font-family: var(--font-display); font-weight: 700; }
  .cmp-acc summary::-webkit-details-marker { display: none; }
  .cmp-acc summary .icon { transition: transform var(--dur) var(--ease); color: var(--color-accent); }
  .cmp-acc details[open] summary .icon { transform: rotate(180deg); }
  .cmp-acc dl { margin: 0 0 14px; display: grid; gap: 6px; }
  .cmp-acc dl div { display: flex; justify-content: space-between; gap: 16px; }
  .cmp-acc dt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
  .cmp-acc dd { margin: 0; text-align: right; color: var(--color-text-muted); }

  @media (min-width: 900px) {
    .h-lines .h-line, .h-lines .h-second { white-space: nowrap; }
    .h-lines { font-size: clamp(2rem, min(3.6vw, 7vh), 3.25rem); }
    .ba__head { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
    .ba__head span { display: flex; align-items: center; gap: 8px; }
    .ba__head span:last-child { color: var(--color-accent); }
    .ba__row { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 24px; }
    .ba__pain { font-size: 1.0625rem; }
    .ba__arrow { display: grid; place-items: center; color: var(--color-accent); }
    .myth__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
    .day { max-height: calc(100svh - var(--header-h) - 300px); }
    .day__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
    .pv__panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; }
    .pv__panel .flow { grid-row: 1 / span 2; }
    .alfa__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
    .road__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
    .cmp-acc { display: none; }
    .pv__promise { font-size: 0.9375rem; }
    .road__list::before { left: 22px; right: 0; top: 21px; bottom: auto; border-left: 0; border-top: 2px dashed var(--color-line-on-deep); }
    .road__item { padding-left: 0; padding-top: 60px; }

    .dl { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; grid-template-areas: "big a" "big b"; gap: 20px; }
    .dl-card { grid-area: a; }
    html:not([data-os="windows"]):not([data-os="linux"]) .dl-card[data-platform="mac"],
    html[data-os="windows"] .dl-card[data-platform="windows"],
    html[data-os="linux"] .dl-card[data-platform="linux"] { grid-area: big; align-content: center; padding: clamp(28px, 3.5vw, 44px); }
    html:not([data-os="windows"]):not([data-os="linux"]) .dl-card[data-platform="linux"],
    html[data-os="windows"] .dl-card[data-platform="linux"],
    html[data-os="linux"] .dl-card[data-platform="windows"] { grid-area: b; }
    html:not([data-os="windows"]):not([data-os="linux"]) .dl-card[data-platform="windows"],
    html[data-os="windows"] .dl-card[data-platform="mac"],
    html[data-os="linux"] .dl-card[data-platform="mac"] { grid-area: a; }
    /* The big card: bigger logo and title. The small ones: compact */
    html:not([data-os="windows"]):not([data-os="linux"]) .dl-card[data-platform="mac"] :is(h3),
    html[data-os="windows"] .dl-card[data-platform="windows"] h3,
    html[data-os="linux"] .dl-card[data-platform="linux"] h3 { font-size: var(--step-3); }
    html:not([data-os="windows"]):not([data-os="linux"]) .dl-card[data-platform="mac"] .dl-card__logo .os,
    html[data-os="windows"] .dl-card[data-platform="windows"] .dl-card__logo .os,
    html[data-os="linux"] .dl-card[data-platform="linux"] .dl-card__logo .os { width: 64px; height: 64px; }
  }
  /* Phone overrides that must come after the components they change (same breakpoint, T3) */
  @media (max-width: 899.98px) {
    /* The app picture goes: the page shows the app further down */
    .hero__visual { display: none; }
    /* Before and after: a compact list, the answer aligned under the struck-out problem */
    .ba__row { gap: 4px; padding: 14px 18px; }
    .ba__row .ba__pain { margin-left: 32px; font-size: 0.875rem; }
    /* Privacy: the facts carry it on the phone; the moving diagram is for wide screens */
    .flow { display: none; }
    .pv__panel { gap: 14px; }
    /* Alpha: the comparison as an accordion */
    .alfa .cmp { display: none; }
    /* The myth: the day goes above the runes */
    .myth__text { display: contents; }
    .myth__tale { order: 1; } .myth__turn { order: 2; margin-top: 0; } .myth__stage { order: 3; } .myth__rune { order: 4; margin-top: 0; } .myth__replay { order: 5; justify-self: start; margin-top: 0; }
    /* Privacy: the meeting types scroll sideways */
    .pv .picker__tabs[role="tablist"] { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
    .pv .picker__tabs::-webkit-scrollbar { display: none; }
    .pv .picker__tabs [role="tab"] { flex: none; scroll-snap-align: start; }
    /* The demo: pause is enough */
    .demo__bar .demo__chips { display: none; }
  }
}

/* ---------- Unlayered: what Akari Engine injects (E1, E2) ---------- */
body #cc-main {
  --cc-btn-primary-bg: var(--color-accent);
  --cc-btn-primary-color: var(--color-on-accent);
  --cc-btn-primary-hover-bg: var(--color-deep);
  --cc-btn-primary-hover-color: var(--color-on-deep);
  --cc-toggle-on-bg: var(--color-accent);
  --cc-toggle-on-knob-bg: var(--color-surface);
}
body .floating-cookie-btn {
  position: fixed; left: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 31;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--color-accent); color: var(--color-on-accent);
}
body .ae-privacy-notice { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }

@media (min-width: 1240px) { .pv__promise > span { white-space: nowrap; } }

/* The demo's recording timer counts with an animated integer. */
@property --s { syntax: '<integer>'; inherits: true; initial-value: 41; }
@property --lm { syntax: '<integer>'; inherits: true; initial-value: 10; }
@property --ls { syntax: '<integer>'; inherits: true; initial-value: 41; }
@property --amp { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --wv { syntax: '<number>'; inherits: false; initial-value: 1; }

/* ---------- Unlayered, and last: [hidden] always hides (L12) ---------- */
[hidden]:not([hidden="until-found"]) { display: none; }