/* Fonts are self-hosted: the page is also the demonstration that nothing is fetched
     from a third party. Same files and licences as the app (app/public/fonts). */
  @font-face { font-family: "Inter"; src: url("/fonts/InterVariable-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
  @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

  /* ── Tokens, verbatim from docs/DESIGN-SYSTEM.md §2 ─────────────────────────── */
  :root {
    /* ── Colour, light ─────────────────────────────────────────────────────── */
    --ground: #f2f2f2;        /* the window; every card sits on it            */
    --card: #ffffff;          /* the surface you read and act on              */
    --ink: #111111;           /* text, filled buttons, selected marks         */
    --ink-2: #3a3a3a;         /* body text on white, secondary labels         */
    --muted: #6b6b6b;         /* captions, meta, placeholders (4.6:1 on ground)*/
    --rule: #e4e4e4;          /* hairline dividers inside a card              */
    --hover: #ededed;         /* row and ghost-button hover fill              */
    --pressed: #e0e0e0;       /* the same, pressed                            */
    --on-ink: #ffffff;        /* text on an ink fill                          */

    /* The three colours that mean something.                                  */
    --recording: #d94f2b;     /* only while audio is being captured           */
    --on-recording: #ffffff;
    --offline: #2e7d46;       /* only the offline / on-this-machine indicator */
    --on-offline: #ffffff;
    --highlight: #ffd21e;     /* one yellow chip: "look here", never a state  */
    --on-highlight: #111111;

    /* ── Radius ───────────────────────────────────────────────────────────── */
    --r-chip: 8px;            /* tags, keycaps, the update badge               */
    --r-control: 12px;        /* buttons, fields, selects, the toggle track    */
    --r-card: 20px;           /* cards in windows ≤ 460 px wide                */
    --r-card-lg: 28px;        /* cards in the meetings window and the website  */
    --r-pill: 999px;          /* status chips, the timer pill, the dictation   */
                              /* overlay, the collapsed recorder               */

    /* ── Spacing, 4 px base ───────────────────────────────────────────────── */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
    --card-pad: var(--s-5);   /* inside a card, narrow windows                 */
    --card-pad-lg: var(--s-7);/* inside a card, meetings window and website    */
    --window-pad: var(--s-4); /* between the window edge and the first card    */

    /* ── Type ─────────────────────────────────────────────────────────────── */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --t-display: 600 32px/1.1 var(--font);   /* website hero only; -0.02em     */
    --t-title:   600 22px/1.25 var(--font);  /* window titles; -0.015em        */
    --t-heading: 600 17px/1.3 var(--font);   /* card titles; -0.01em           */
    --t-body:    400 15px/1.5 var(--font);   /* everything you read            */
    --t-body-sm: 400 13px/1.45 var(--font);  /* captions under a row title     */
    --t-label:   500 15px/1 var(--font);     /* buttons, row titles, chips     */
    --t-meta:    500 11px/1 var(--font);     /* +0.1em, uppercase, --muted     */
    --t-code:    400 13px/1.5 var(--mono);   /* timecodes, paths, keycaps      */
    --t-clock:   500 20px/1 var(--mono);     /* the recorder bar clock; tabular*/

    /* ── Shadow ───────────────────────────────────────────────────────────── */
    --shadow: none;           /* flat; floating windows use the native shadow  */

    /* ── Motion ───────────────────────────────────────────────────────────── */
    --dur-fast: 120ms;        /* hover, pressed, colour                        */
    --dur: 200ms;             /* toggle, segmented control, window arrival     */
    --dur-slow: 320ms;        /* the recorder folding, a card expanding        */
    --ease: cubic-bezier(0.2, 0, 0, 1);        /* the default; settles fast    */
    --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);/* arrivals only                */

    color-scheme: light dark;
    color: var(--ink);
    background: var(--ground);
    font: var(--t-body);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #0e0e0e;
      --card: #1b1b1b;
      --ink: #f2f2f2;
      --ink-2: #c9c9c9;
      --muted: #9a9a9a;        /* 5.4:1 on --card                              */
      --rule: #2c2c2c;
      --hover: #262626;
      --pressed: #303030;
      --on-ink: #111111;

      --recording: #ff6a45;    /* lifted so the square glyph reads on it       */
      --on-recording: #111111;
      --offline: #6ac98a;
      --on-offline: #111111;
      --highlight: #ffd24d;
      --on-highlight: #111111;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  }

  /* ── Base ───────────────────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--ground); color: var(--ink);
    /* The app reads --t-body at 15 px inside a 340 px window; a page is read at arm's
       length and by every age, so body copy here is one step up. Everything else keeps
       the token sizes. */
    font: var(--t-body); font-size: 16px; line-height: 1.55;
    overflow-x: hidden;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }
  p { margin: 0; }
  h1, h2, h3 { margin: 0; color: var(--ink); }
  h1 { font: var(--t-display); letter-spacing: -.02em; text-wrap: balance; }
  h2 { font: var(--t-title); letter-spacing: -.02em; text-wrap: balance; }
  h3 { font: var(--t-heading); letter-spacing: -.01em; }
  code, kbd { font: var(--t-code); }
  code { background: var(--hover); border-radius: var(--r-chip); padding: 1px 6px; color: var(--ink); }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-control); }

  .skip {
    position: absolute; left: var(--s-4); top: -100px; z-index: 10;
    background: var(--ink); color: var(--on-ink); padding: 10px 16px;
    border-radius: var(--r-control); font: var(--t-label); text-decoration: none;
  }
  .skip:focus { top: var(--s-4); }

  /* One column, 1040 wide: three cards of 320 with two 40 px gutters, or one measure of
     about 65 characters at 18 px with room either side. Wider and the eye has to travel. */
  .wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 var(--s-5); }
  @media (min-width: 720px) { .wrap { padding: 0 var(--s-8); } }
  /* Running text never exceeds a comfortable measure, whatever the card around it does. */
  p, li, dd, figcaption, .answer { max-width: 66ch; }

  /* ── Card ───────────────────────────────────────────────────────────────── */
  .card {
    background: var(--card); border-radius: var(--r-card-lg);
    padding: var(--s-6); box-shadow: var(--shadow);
  }
  @media (min-width: 720px) { .card { padding: var(--s-10); } }
  .card > * + * { margin-top: var(--s-3); }
  .card p, .card li { color: var(--ink-2); }
  .card ul { margin: var(--s-3) 0 0; padding-left: 1.2em; }
  .card li + li { margin-top: var(--s-2); }
  .stack { display: grid; gap: var(--s-4); }
  .cols-2 { display: grid; gap: var(--s-4); grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .cols-3 { display: grid; gap: var(--s-4); grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .cols-4 { display: grid; gap: var(--s-4); grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  @media (min-width: 720px) {
    .cols-2 { grid-template-columns: 1fr 1fr; }
    .cols-3 { grid-template-columns: repeat(3, 1fr); }
    .cols-4 { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1024px) { .cols-4 { grid-template-columns: repeat(4, 1fr); } }

  /* ── Sections ───────────────────────────────────────────────────────────── */
  /* 64 px between ideas on a phone, 96 on a laptop: enough that scrolling from one section
     to the next feels like turning a page rather than reading a list. */
  section { padding: 64px 0 0; }
  section:last-of-type { padding-bottom: 64px; }
  @media (min-width: 720px) { section { padding-top: 96px; } section:last-of-type { padding-bottom: 96px; } }
  .section-head { margin-bottom: var(--s-8); max-width: 640px; }
  .section-head > * + * { margin-top: var(--s-3); }
  .section-head .sub { color: var(--ink-2); font-size: 17px; }
  @media (min-width: 720px) { h2 { font-size: 32px; line-height: 1.15; } }
  .meta {
    display: block; font: var(--t-meta); letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
  }

  /* ── Buttons ────────────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-control);
    font: var(--t-label); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .btn-primary { background: var(--ink); color: var(--on-ink); }
  .btn-primary:hover { opacity: .85; }
  .btn-primary:active { opacity: .75; }
  .btn-secondary { background: var(--hover); color: var(--ink); }
  .btn-secondary:hover { background: var(--pressed); }
  .btn-secondary:active { background: var(--rule); }
  .btn-ghost { background: none; color: var(--ink-2); }
  .btn-ghost:hover { background: var(--hover); }
  .btn-ghost:active { background: var(--pressed); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

  /* ── Chips ──────────────────────────────────────────────────────────────── */
  .chip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--s-3);
    border-radius: var(--r-pill); font: var(--t-label); font-size: 13px; white-space: nowrap;
    vertical-align: middle;
  }
  .chip svg { width: 16px; height: 16px; flex: none; }
  .chip-offline { background: var(--offline); color: var(--on-offline); }
  .chip-highlight { background: var(--highlight); color: var(--on-highlight); }
  .chip-neutral { background: var(--hover); color: var(--ink); }
  kbd.chip { height: 24px; padding: 0 var(--s-2); font: var(--t-code); font-weight: 500; }

  .num {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--on-ink);
    font: var(--t-label);
  }

  /* ── Header ─────────────────────────────────────────────────────────────── */
  .site-header { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
  .header-inner { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
  .mark { width: 28px; height: 28px; flex: none; }
  .wordmark { font: var(--t-label); font-weight: 600; font-size: 17px; color: var(--ink); }
  .site-nav { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
  .site-nav .btn-ghost { height: 36px; padding: 0 var(--s-3); color: var(--muted); font-weight: 500; }
  .site-nav .btn-ghost:hover { color: var(--ink); }
  @media (max-width: 719px) {
    .site-nav { width: 100%; order: 3; }
    .site-nav .btn-ghost { font-size: 14px; padding: 0 var(--s-2); }
  }

  /* ── Hero ───────────────────────────────────────────────────────────────── */
  /* No card: the ground is the hero. Centred copy, then the meetings window at a size the
     column cannot hold, ending in a fade to the ground rather than on a hard cut — the
     transcript inside it scrolls, so the window has no natural bottom to show. */
  .hero { padding-top: 64px; overflow: hidden; }
  .hero-copy { text-align: center; }
  .hero-copy > * + * { margin-top: var(--s-5); }
  .hero-copy h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
  .hero-copy .lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; margin-left: auto; margin-right: auto; }
  .hero-copy .actions { justify-content: center; margin-top: var(--s-8); }
  /* Centred blocks must escape the 66ch measure cap on paragraphs, or they centre inside a
     left-flush box and land off-centre. */
  .hero-note { margin-top: 0; max-width: none; }
  .hero-copy p, #contact .section-head p, #kontakt .section-head p { margin-left: auto; margin-right: auto; }
  .hero-shot { margin-top: 64px; margin-bottom: 0; }
  .hero-shot figcaption { font: var(--t-body-sm); color: var(--muted); text-align: center; margin: var(--s-4) auto 0; max-width: 60ch; }
  .hero-shot img {
    width: 100%; height: auto; display: block; margin: 0 auto;
    border-radius: var(--r-card-lg) var(--r-card-lg) 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .hero-page { padding-top: var(--s-8); }
  .hero-page .hero-copy { text-align: left; max-width: 720px; }
  .hero-page .hero-copy h1, .hero-page .hero-copy .lead { margin-left: 0; }
  .hero-page + section { padding-top: 64px; }
  @media (min-width: 720px) {
    .hero { padding-top: 96px; }
    .hero-shot { margin-top: 80px; }
    /* Wider than the column on purpose. Auto margins cannot centre a box that overflows
       its container, so the image is shifted by half its own width instead. */
    .hero-shot img { width: min(1120px, 108vw); margin-left: 50%; transform: translateX(-50%); }
    h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.025em; }
  }
  @media (min-width: 960px) { h1 { font-size: 48px; } }
  @media (min-width: 1100px) { h1 { font-size: 56px; letter-spacing: -.03em; } .hero-page h1 { font-size: 48px; } }

  /* ── Benefits ───────────────────────────────────────────────────────────── */
  /* A title and one sentence. The glyph circles that used to lead each card were six more
     things to look at before the first word, and none of them said anything the title did
     not. */
  .benefit .index { color: var(--muted); }
  .benefit .index + h3 { margin-top: var(--s-6); }
  /* Two lines reserved for every title, so the sentences underneath start on one line
     across the row whether the title wraps or not. */
  .benefit h3 { min-height: 2.6em; }
  .benefit h3 + p { margin-top: var(--s-2); }
  @media (min-width: 720px) { .cols-3 .card { padding: var(--s-8); } }
  .benefit .chip { margin-top: var(--s-2); }
  .card.wide { grid-column: 1 / -1; }

  /* ── The ink band ───────────────────────────────────────────────────────── */
  .band { background: var(--ink); color: var(--on-ink); padding-bottom: 96px; margin-top: 96px; }
  .band .section-head { max-width: 720px; }
  .band h2, .band .meta { color: var(--on-ink); }
  .band .meta { opacity: .6; }
  .band-p { font-size: 20px; line-height: 1.55; max-width: 60ch; color: var(--on-ink); opacity: .85; }
  .band code { background: rgba(127, 127, 127, .25); color: inherit; }
  .band + section { padding-top: 96px; }
  @media (max-width: 719px) { .band { padding-bottom: 64px; margin-top: 64px; } .band-p { font-size: 17px; } }

  /* ── Steps ──────────────────────────────────────────────────────────────── */
  .step { display: flex; gap: var(--s-4); align-items: flex-start; }
  .step > * + * { margin-top: 0; }
  .step h3 + p { margin-top: var(--s-1); }

  /* ── Screens ────────────────────────────────────────────────────────────── */
  .screens { display: grid; gap: var(--s-6) var(--s-3); grid-template-columns: 1fr; }
  @media (min-width: 720px) { .screens { grid-template-columns: 1fr 1fr; } }
  .screens .wide { grid-column: 1 / -1; }
  figure.screen { margin: 0; }
  figure.screen img { margin: 0 auto; }
  figure.screen figcaption { font: var(--t-body-sm); color: var(--muted); margin-top: var(--s-3); max-width: 560px; }
  figure.screen figcaption strong { color: var(--ink); font-weight: 600; }
  .shot-settings img { width: 340px; }
  .shot-setup img { width: 380px; }
  .shot-welcome img { width: 460px; }
  .shot-recorder img { width: 560px; }
  .shot-dictation img { width: 420px; }
  figure.screen.start img { margin-left: 0; }
  /* Two captures keep the app's opaque window ground to their edge; the page rounds them
     so they read as cards like the rest. */
  .shot-meetings img, .shot-welcome img { border-radius: var(--r-card); }
  .modes-shot { margin-top: var(--s-4); }
  .card p, .card li, .card dd, .answer { overflow-wrap: anywhere; }

  /* ── Table ──────────────────────────────────────────────────────────────── */
  .table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s-6)); padding: 0 var(--s-6); }
  @media (min-width: 720px) { .table-wrap { margin: 0 calc(-1 * var(--s-10)); padding: 0 var(--s-10); } }
  table.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
  table.compare th, table.compare td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; }
  table.compare thead th { font: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 0; }
  table.compare tbody th { font: var(--t-label); line-height: 1.4; color: var(--ink); width: 30%; }
  table.compare tbody td { color: var(--ink-2); }
  table.compare tbody tr { border-top: 1px solid var(--rule); }

  /* ── List rows ──────────────────────────────────────────────────────────── */
  .rows { padding-top: 0; padding-bottom: 0; }
  .rows > * + * { margin-top: 0; }
  .row { padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
  .row:first-child { border-top: 0; }
  .facts { margin: 0; }
  .facts dt { font: var(--t-label); line-height: 1.4; color: var(--ink); }
  .facts dd { margin: var(--s-1) 0 0; color: var(--ink-2); }

  /* ── Figures band ───────────────────────────────────────────────────────── */
  .stats { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
  @media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
  .stat-figure { font: var(--t-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .stat-caption { font: var(--t-body-sm); color: var(--muted); margin-top: var(--s-2); }

  /* ── Download ───────────────────────────────────────────────────────────── */
  /* Every card in a grid is a column; whatever comes after its text — a button, a note —
     is pushed to the bottom so the rows of buttons line up across the grid. */
  .cols-2 > .card, .cols-3 > .card, .cols-4 > .card { display: flex; flex-direction: column; }
  .cols-2 > .card > .btn, .cols-3 > .card > .btn, .cols-4 > .card > .btn,
  .cols-2 > .card > .actions, .cols-3 > .card > .actions { margin-top: auto; align-self: flex-start; }
  /* The gap above a pinned button lives on the element before it, so the button's own
     auto margin can collapse to zero in the tallest card without the two touching. */
  .card > :has(+ .btn), .card > :has(+ .actions) { padding-bottom: var(--s-5); }
  .dl .req { font: var(--t-code); color: var(--muted); }
  .dl .note { font: var(--t-body-sm); color: var(--muted); }
  .dl .note strong { color: var(--ink); font-weight: 600; }
  .after { color: var(--ink-2); margin-top: var(--s-6); }

  /* ── FAQ ────────────────────────────────────────────────────────────────── */
  details { border-top: 1px solid var(--rule); }
  details:first-child { border-top: 0; }
  summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-5) 0; font: var(--t-label); font-size: 16px; line-height: 1.4; color: var(--ink);
    min-height: 56px;
  }
  summary::-webkit-details-marker { display: none; }
  summary::after {
    content: ""; flex: none; margin-left: auto; width: 16px; height: 16px;
    background: currentColor; color: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur) var(--ease);
  }
  details[open] summary::after { transform: rotate(180deg); }
  .answer { padding: 0 0 var(--s-5); color: var(--ink-2); }

  /* ── Contact ────────────────────────────────────────────────────────────── */
  /* The closing section is centred like the hero: a 640 px card in the middle of the
     column, its head centred above it, so the page ends where it began. */
  #contact .card, #kontakt .card { max-width: 640px; margin: 0 auto; }
  #contact .section-head, #kontakt .section-head { margin-left: auto; margin-right: auto; text-align: center; }
  .contact-form { display: grid; gap: var(--s-4); }
  .field { display: grid; gap: var(--s-2); }
  .field label { font: var(--t-label); color: var(--ink); }
  input, textarea {
    width: 100%; border: 0; border-radius: var(--r-control); background: var(--hover);
    color: var(--ink); font: var(--t-body); font-size: 16px; padding: 0 var(--s-4);
  }
  input { height: 44px; }
  textarea { min-height: 140px; padding: var(--s-3) var(--s-4); resize: vertical; }
  input::placeholder, textarea::placeholder { color: var(--muted); }
  .contact-form .btn { justify-self: center; }

  /* ── Footer ─────────────────────────────────────────────────────────────── */
  .site-footer { padding: var(--s-10) 0 64px; border-top: 1px solid var(--rule); margin-top: var(--s-8); }
  .footer-inner { display: grid; gap: var(--s-6) var(--s-8); grid-template-columns: 1fr; font: var(--t-body-sm); color: var(--muted); }
  @media (min-width: 720px) { .footer-inner { grid-template-columns: auto 1fr; align-items: start; } .footer-inner .colophon { grid-column: 2; } }
  .footer-inner .brand { margin-right: 0; }
  .footer-inner nav { display: grid; gap: var(--s-1) var(--s-3); grid-template-columns: repeat(2, max-content); }
  @media (min-width: 720px) { .footer-inner nav { grid-template-columns: repeat(4, max-content); } }
  .footer-inner .btn-ghost { height: 32px; padding: 0; font: var(--t-body-sm); color: var(--muted); justify-content: flex-start; }
  .footer-inner .btn-ghost:hover { background: none; color: var(--ink); }

  /* ── Content pages ──────────────────────────────────────────────────────── */
  .crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font: var(--t-body-sm); color: var(--muted); margin-bottom: var(--s-4); }
  .crumbs a { color: var(--muted); }
  .prose h2 { margin-top: 0; }
  .prose p + p, .prose ul + p, .prose p + ul { margin-top: var(--s-3); }
  .prose ul { margin: 0; padding-left: 1.2em; }
  .prose li + li { margin-top: var(--s-2); }
  .prose pre { margin: var(--s-3) 0 0; padding: var(--s-4); background: var(--hover); border-radius: var(--r-control); font: var(--t-code); overflow-x: auto; color: var(--ink); }
  .prose pre code { background: none; padding: 0; }
  .cta { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }
  .cta > * + * { margin-top: 0; }
  .cta p { max-width: 560px; }
  .lang { font: var(--t-body-sm); }
  table.plain { width: 100%; min-width: 520px; border-collapse: collapse; }
  table.plain th, table.plain td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3) var(--s-3) 0; }
  table.plain th { white-space: nowrap; }
  table.plain thead th { font: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 0; }
  table.plain tbody th { font: var(--t-label); line-height: 1.4; color: var(--ink); }
  table.plain tbody td { color: var(--ink-2); }
  table.plain tbody tr { border-top: 1px solid var(--rule); }
  table.compare { min-width: 860px; table-layout: fixed; }
  table.compare th, table.compare td { font-size: 14px; white-space: normal; hyphens: auto; overflow-wrap: break-word; }
  table.compare tbody th { width: 16%; }
  table.compare tbody td:first-of-type { color: var(--ink); font-weight: 500; }
  .placeholder { background: var(--highlight); color: var(--on-highlight); padding: 0 4px; border-radius: 4px; }

  /* ── Gallery: one composed card. Tabs on its top edge, the 16:10 frame directly under
     them, the caption in its footer. The frames come from tools/gallery.py already in the
     page ground colour, so the window in each floats on grey inside the white card, the way
     r1's controls sit in their card. */
  .gallery { margin-top: 0; padding: var(--s-4) var(--s-4) var(--s-5); }
  @media (min-width: 720px) { .gallery { padding: var(--s-5) var(--s-5) var(--s-6); } }
  .gallery > * + * { margin-top: 0; }
  .gallery-head { display: flex; align-items: flex-start; gap: var(--s-4); padding: 0 var(--s-1); margin-bottom: var(--s-4); }
  .gallery-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .gallery-tabs [role="tab"] { height: 36px; padding: 0 var(--s-3); font-size: 14px; color: var(--muted); background: none; }
  .gallery-tabs [role="tab"]:hover { background: var(--hover); color: var(--ink); }
  .gallery-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
  .gallery figure { margin: 0; }
  .gallery img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--r-card); background: var(--ground); }
  .gallery figcaption { font: var(--t-body); font-size: 16px; color: var(--ink-2); padding: var(--s-4) var(--s-1) 0; max-width: none; }
  .gallery-nav { display: flex; gap: var(--s-2); margin-left: auto; flex: none; }
  .gallery-nav .btn { width: 36px; height: 36px; padding: 0; }
  .gallery-nav .btn svg { width: 16px; height: 16px; }
  @media (max-width: 719px) { .gallery-nav { display: none; } }
  .gallery.js [role="tabpanel"][hidden] { display: none; }
  .gallery:not(.js) .gallery-head { display: none; }
  .gallery:not(.js) figure + figure { margin-top: var(--s-6); }
  .hero-screen { margin: 0; }
  .hero-screen img { border-radius: var(--r-card-lg); }
  .hero-screen figcaption { font: var(--t-body); font-size: 16px; color: var(--ink-2); margin-top: var(--s-4); }