/* Public landing page on /welcome (#827) — the approved mock docs/mockups/landing.html,
   ported onto the daisyUI theme tokens (LD-12): not one colour is declared here, every value
   is a --color-* token of the active theme (or a mix of one), so light, dark and a child
   project's own palette all follow without a line of this file changing.

   Plain CSS served by AssetMapper and linked from the landing's `stylesheets` block only — no
   application screen downloads it. It is deliberately NOT a Tailwind input: it needs no
   Tailwind directive, and the Tailwind bundle builds one input per `tailwind:build` run, so a
   second input would have needed a second build step in the Dockerfile, CI and the QA gate.
   The utilities the landing templates use still come from app.css's build, which scans every
   template; DeadCssClassTest checks class names against that build plus this file. The
   tokens it reads (--color-*, --font-*, --shadow-paper, --text-*) are app.css's, loaded first;
   its `components` layer joins the layer order app.css's build declares. Every selector is scoped under the
   `lp-` prefix, and the whole file sits in the `components` layer, so a utility class still
   wins over it.

   Mock variable → theme token:
     --b1 → --color-base-100    --b2 → --color-base-200    --b3 → --color-base-300
     --bc → --color-base-content
     --p  → --color-primary     --pc → --color-primary-content
     --p2 → --color-brand-gradient-end
     --ok → --color-success     --info → --color-info      --warn → --color-warning
   The two quieter text levels are the app's own --text-secondary / --text-muted (app.css),
   not the mock's 72%/52% mixes: those are the ones measured for contrast in both themes.

   Motion (LD-9, LD-19): the Foundation → Products pulse is the one functional animation, and
   it and the other diagrams' flows run once, while on screen, settling within five seconds;
   the hero window tilt and the language strip are driven by Stimulus
   (landing_motion_controller.js, landing_marquee_controller.js), and the card lift is a plain
   hover. Nothing moves by itself under prefers-reduced-motion; the scroll-linked tilt is also
   off below 768px.

   Touch targets: every control of the landing's own is at least 44px tall (the shared legal
   links in the footer are not the landing's, LD-20). */

@layer components {
  .lp {
    --lp-line: color-mix(in oklab, var(--color-base-content) 10%, transparent);
    --lp-glow: color-mix(in oklab, var(--color-brand-gradient-end) 40%, transparent);
    --lp-win-shadow: 0 2px 4px color-mix(in oklab, var(--color-base-content) 5%, transparent),
      0 40px 80px -40px color-mix(in oklab, var(--color-brand-gradient-end) 50%, transparent);

    background: var(--color-base-200);
    color: var(--color-base-content);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    overflow-x: clip;
  }

  .lp h1,
  .lp h2,
  .lp h3 {
    text-wrap: balance;
  }

  .lp-gut {
    padding-inline: max(16px, 4vw);
  }

  .lp-w {
    max-width: 1160px;
    margin-inline: auto;
  }

  .lp-mono {
    font-family: var(--font-mono);
  }

  .lp-eyebrow {
    display: block;
    font: 500 13px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .lp a:focus-visible,
  .lp button:focus-visible,
  .lp summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
  }

  /* Buttons: the mock's pill, not daisyUI's .btn — the landing is its own surface. */
  .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font: 600 16px/1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .lp-btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-content);
  }

  .lp-btn-ghost {
    background: transparent;
    color: var(--color-primary);
  }

  .lp-btn-ghost::after {
    content: "›";
    font-size: 22px;
    line-height: 0;
    transform: translateY(-1px);
  }

  .lp-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
  }

  /* Header — translucent sticky bar */
  .lp-nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 40;
    background: color-mix(in oklab, var(--color-base-200) 78%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--lp-line);
  }

  .lp-nav-row {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 56px;
  }

  .lp-logo {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 9px;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
  }

  .lp-logo-mark {
    width: 22px;
    height: 22px;
  }

  .lp-nav-links {
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .lp-nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
  }

  .lp-nav-links a:hover {
    color: var(--color-base-content);
  }

  .lp-nav-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
  }

  .lp-nav-end .lp-btn {
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }

  .lp-nav-signin {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
  }

  @media (max-width: 760px) {
    .lp-nav-links,
    .lp-nav-signin {
      display: none;
    }
  }

  /* Hero */
  .lp-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 9vw, 112px) 0;
    text-align: center;
  }

  .lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(var(--lp-line) 1px, transparent 1px) 0 0 / 56px 56px,
      linear-gradient(90deg, var(--lp-line) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, black, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 20%, black, transparent 75%);
  }

  .lp-hero > .lp-w {
    position: relative;
  }

  .lp-ver {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    font-size: 14px;
    color: var(--text-secondary);
  }

  .lp-ver-tag {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-content);
    font: 500 12px/1 var(--font-mono);
  }

  .lp-hero-stack {
    margin-top: 18px;
  }

  .lp-hero-title {
    margin-top: 18px;
    font-size: clamp(44px, 8.4vw, 104px);
    line-height: 0.98;
    font-weight: 900;
    letter-spacing: -0.045em;
  }

  .lp-grad {
    background: linear-gradient(100deg, var(--color-primary) 10%, var(--color-brand-gradient-end) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .lp-lead {
    max-width: 40ch;
    margin: 22px auto 0;
    font-size: clamp(18px, 2vw, 22px);
    color: var(--text-secondary);
  }

  .lp-stage {
    position: relative;
    margin-top: clamp(40px, 6vw, 72px);
    perspective: 1600px;
  }

  .lp-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 18%;
    width: 80%;
    height: 70%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, var(--lp-glow), transparent);
    filter: blur(30px);
    pointer-events: none;
  }

  /* The product window, built from UI rather than a screenshot. Flat by default; tilted
     only where the scroll-linked motion is allowed to flatten it again (LD-9). */
  .lp-win {
    position: relative;
    max-width: 1060px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: var(--color-base-100);
    box-shadow: var(--lp-win-shadow);
    text-align: left;
    transform: rotateX(var(--lp-tilt, 0deg)) scale(var(--lp-scale, 1));
    transform-origin: 50% 0;
  }

  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .lp-win {
      --lp-tilt: 18deg;
      --lp-scale: 0.96;
      will-change: transform;
    }
  }

  .lp-win::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--lp-line);
    pointer-events: none;
  }

  .lp-win-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lp-line);
  }

  .lp-win-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-base-300);
  }

  .lp-win-body {
    display: grid;
    grid-template-columns: 210px 1fr;
    min-height: 380px;
  }

  .lp-side {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 12px;
    border-right: 1px solid var(--lp-line);
    font-size: 14px;
    color: var(--text-secondary);
  }

  .lp-side-ws {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-base-200);
    color: var(--color-base-content);
    font-weight: 600;
  }

  .lp-side-ws-mark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-brand-gradient-end));
  }

  .lp-side-item {
    padding: 8px 10px;
    border-radius: 10px;
  }

  .lp-side-item-on {
    background: color-mix(in oklab, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-weight: 600;
  }

  .lp-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 22px 26px;
  }

  .lp-main-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
  }

  .lp-main-head .lp-btn {
    margin-left: auto;
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
  }

  .lp-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 0.8fr) 96px 56px;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--lp-line);
    font-size: 14px;
  }

  .lp-row-sub {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
  }

  .lp-row-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .lp-av {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    color: var(--color-primary-content);
    background: var(--color-primary);
  }

  .lp-av-2 {
    background: var(--color-brand-gradient-end);
  }

  .lp-av-3 {
    background: var(--color-success);
    color: var(--color-success-content);
  }

  .lp-av-4 {
    background: var(--color-warning);
    color: var(--color-warning-content);
  }

  .lp-pill {
    justify-self: start;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
  }

  .lp-pill-ok {
    background: color-mix(in oklab, var(--color-success) 14%, transparent);
    color: var(--color-success);
  }

  .lp-pill-run {
    background: color-mix(in oklab, var(--color-info) 14%, transparent);
    color: var(--color-info);
  }

  .lp-pill-wait {
    background: color-mix(in oklab, var(--color-warning) 16%, transparent);
    color: var(--color-warning);
  }

  @media (max-width: 760px) {
    .lp-win-body {
      grid-template-columns: 1fr;
    }

    .lp-side {
      display: none;
    }

    .lp-row {
      grid-template-columns: 30px minmax(0, 1fr) 90px;
    }

    .lp-row-role,
    .lp-row-time {
      display: none;
    }
  }

  /* Proof numbers under the hero */
  .lp-stats {
    position: relative;
    z-index: 1;
    background: var(--color-base-100);
    border-bottom: 1px solid var(--lp-line);
  }

  .lp-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: 28px;
  }

  .lp-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline: 24px;
  }

  .lp-stat:first-child {
    padding-left: 0;
  }

  .lp-stat + .lp-stat {
    border-left: 1px solid var(--lp-line);
  }

  .lp-stat-value {
    font: 800 clamp(32px, 4vw, 44px)/1 var(--font-sans);
    letter-spacing: -0.04em;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
  }

  .lp-stat-label {
    font-size: 15px;
    line-height: 1.35;
    color: var(--text-secondary);
  }

  @media (max-width: 760px) {
    .lp-stats-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 22px;
    }

    .lp-stat:nth-child(3) {
      padding-left: 0;
      border-left: 0;
    }
  }

  /* Section scaffolding */
  .lp-sec {
    padding-block: clamp(72px, 10vw, 128px);
  }

  .lp-sec-alt {
    background: var(--color-base-100);
  }

  .lp-sec-h {
    display: grid;
    gap: 14px;
    max-width: 760px;
  }

  .lp-sec-h-center {
    margin-inline: auto;
    justify-items: center;
    text-align: center;
  }

  .lp-h2 {
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.035em;
  }

  .lp-h2-quiet {
    color: var(--text-muted);
  }

  /* Language strip — a marquee of real locale-switch buttons (LD-10) */
  .lp-langbox {
    display: grid;
    gap: 18px;
    justify-items: center;
    text-align: center;
  }

  .lp-langbox-title {
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .lp-langbox-lead {
    color: var(--text-secondary);
  }

  .lp-marq {
    margin-top: 22px;
    overflow: hidden;
    padding-block: 8px 14px;
    cursor: grab;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }

  .lp-marq-drag {
    cursor: grabbing;
  }

  .lp-marq-drag .lp-lang {
    pointer-events: none;
  }

  .lp-marq-track {
    display: flex;
    gap: 10px;
    width: max-content;
    margin-inline: auto;
    user-select: none;
    -webkit-user-select: none;
  }

  .lp-marq-moving {
    margin-inline: 0;
    will-change: transform;
  }

  .lp-marq-ctl {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
  }

  .lp-marq-pause {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    color: var(--text-secondary);
    font: 500 13px/1 var(--font-sans);
    cursor: pointer;
  }

  .lp-marq-pause[aria-pressed="true"] {
    color: var(--color-base-content);
  }

  /* Nothing moves by itself under reduced motion, so there is nothing to pause — and the
     hint's "or" would then follow nothing. */
  @media (prefers-reduced-motion: reduce) {
    .lp-marq-pause,
    .lp-marq-hint {
      display: none;
    }
  }

  .lp-marq-hint {
    align-self: center;
    font-size: 12px;
    color: var(--text-muted);
  }

  .lp-lang {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    color: var(--color-base-content);
    font: 500 15px/1 var(--font-sans);
    white-space: nowrap;
    cursor: pointer;
  }

  .lp-lang-code {
    font: 500 12px/1 var(--font-mono);
    color: var(--text-muted);
  }

  .lp-lang[aria-current="true"] {
    background: var(--color-primary);
    color: var(--color-primary-content);
  }

  /* Full primary-content, not a faded mix: a 70% mix measured 4.00:1 on dark primary. */
  .lp-lang[aria-current="true"] .lp-lang-code {
    color: var(--color-primary-content);
  }

  @media (prefers-reduced-motion: no-preference) {
    .lp-lang {
      transition: transform 0.15s;
    }

    .lp-lang:hover {
      transform: translateY(-1px);
    }
  }

  /* Flags are pictures of real-world flags, so their fills are the flags' own colours and
     live in the SVG (templates/landing/_flag.html.twig). A locale with no flag drawn gets a
     neutral token-coloured plate. */
  .lp-flag {
    display: block;
    flex: none;
    width: 24px;
    height: 16px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--lp-line);
  }

  .lp-flag-blank {
    fill: var(--color-base-300);
  }

  /* Time saved */
  .lp-saved {
    display: grid;
    gap: 36px;
    justify-items: center;
  }

  .lp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 860px;
  }

  .lp-chip-skip,
  .lp-chip-spend {
    padding: 11px 16px;
    border-radius: 999px;
    font: 500 15px/1 var(--font-sans);
  }

  .lp-chip-skip {
    background: var(--color-base-100);
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
  }

  .lp-chip-spend {
    background: color-mix(in oklab, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-weight: 600;
  }

  .lp-spend {
    display: grid;
    gap: 14px;
    justify-items: center;
  }

  .lp-spend-lead {
    font: 500 13px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Split sections: text + line diagram */
  .lp-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
  }

  @media (min-width: 861px) {
    .lp-split-rev {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .lp-split-rev .lp-diagram {
      order: -1;
    }
  }

  @media (max-width: 860px) {
    .lp-split {
      grid-template-columns: 1fr;
    }
  }

  .lp-list {
    display: grid;
    gap: 18px;
    margin-top: 28px;
  }

  .lp-list-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    font-size: 16px;
    color: var(--text-secondary);
  }

  .lp-list-check {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  }

  .lp-list-check::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 5px;
    width: 6px;
    height: 9px;
    border: solid var(--color-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .lp-list-title {
    display: block;
    color: var(--color-base-content);
    font-size: 17px;
    font-weight: 700;
  }

  .lp-diagram {
    position: relative;
    max-width: 100%;
    aspect-ratio: 1.15;
    overflow: hidden;
    border-radius: 24px;
    background: var(--color-base-200);
  }

  .lp-sec:not(.lp-sec-alt) .lp-diagram {
    background: var(--color-base-100);
  }

  /* The security diagram grew a row per sign-in provider in v14 and no longer matches the
     ratio the other three share; without this it sits 9% smaller inside the same card. */
  .lp-diagram-tall {
    aspect-ratio: 460 / 440;
  }

  .lp-diagram svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .lp-d-grid {
    stroke: var(--lp-line);
    stroke-width: 1;
  }

  .lp-d-line {
    fill: none;
    stroke: color-mix(in oklab, var(--color-primary) 55%, transparent);
    stroke-width: 1.25;
  }

  .lp-d-dash {
    stroke-dasharray: 4 5;
  }

  .lp-d-flow {
    fill: none;
    stroke: var(--color-brand-gradient-end);
    stroke-width: 2;
    stroke-dasharray: 6 10;
  }

  .lp-d-box {
    fill: var(--color-base-100);
    stroke: color-mix(in oklab, var(--color-primary) 35%, transparent);
    stroke-width: 1;
  }

  .lp-d-box-err {
    stroke: color-mix(in oklab, var(--color-warning) 60%, transparent);
  }

  .lp-d-box-ok {
    stroke: color-mix(in oklab, var(--color-success) 60%, transparent);
  }

  .lp-d-hub {
    fill: var(--color-primary);
  }

  .lp-d-layer {
    fill: color-mix(in oklab, var(--color-brand-gradient-end) 18%, transparent);
  }

  .lp-d-text {
    font-family: var(--font-mono);
    font-size: 12px;
    fill: var(--text-secondary);
  }

  .lp-d-sm {
    font-size: 11px;
    fill: var(--text-muted);
  }

  .lp-d-small {
    font-size: 10px;
    opacity: 0.85;
  }

  .lp-d-hl {
    fill: var(--color-primary-content);
    font-weight: 500;
  }

  .lp-d-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    fill: var(--color-base-content);
  }


  /* The diagrams' motion (LD-9, LD-19): the Foundation -> Products pulse (an update leaves the
     foundation, reaches each product and is acknowledged there, and the version ticks over)
     and the dashed flows of the other diagrams. The rules below the class-less ones are the
     SETTLED state — the meaningful end, and all that reduced motion or a visitor without the
     controller ever sees. `.lp-diagram-play` is set by landing_motion_controller.js only
     while a diagram is on screen, and only once: every animation is finite and ends by itself
     inside five seconds (WCAG 2.2.2), `both` holding its last frame, which is that settled
     state. The dots are SVG <animateMotion>, started from the same controller. */
  .lp-d-pulse {
    fill: var(--color-brand-gradient-end);
    visibility: hidden;
  }

  .lp-d-got {
    fill: var(--color-success);
    font-weight: 700;
  }

  .lp-d-ver-old {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .lp-diagram-play .lp-d-flow {
      animation: lp-dash 1.6s linear 3;
    }

    .lp-diagram-play .lp-d-got {
      animation: lp-got 3.6s linear 1 both;
    }

    .lp-diagram-play .lp-d-ver-new {
      animation: lp-ver-new 3.6s steps(1) 1 both;
    }

    .lp-diagram-play .lp-d-ver-old {
      animation: lp-ver-old 3.6s steps(1) 1 both;
    }

    .lp-diagram-play .lp-d-pulse {
      visibility: visible;
    }
  }

  @keyframes lp-dash {
    to {
      stroke-dashoffset: -32;
    }
  }

  @keyframes lp-got {
    0%,
    44% {
      opacity: 0;
    }

    48%,
    100% {
      opacity: 1;
    }
  }

  @keyframes lp-ver-new {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes lp-ver-old {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  /* Features intro */
  .lp-groupnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
  }

  .lp-groupnav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    color: var(--color-base-content);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }

  .lp-groupnav-link:hover {
    background: var(--color-base-300);
  }

  /* Product foundation cards — all visible at once */
  .lp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 48px;
  }

  @media (max-width: 980px) {
    .lp-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 620px) {
    .lp-cards {
      grid-template-columns: 1fr;
    }
  }

  .lp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    padding: 24px;
    border-radius: 24px;
    background: var(--color-base-100);
  }

  /* A last card left alone in its row spans the row: text beside the picture. Written as a
     position, not a class, so a project with another number of cards gets it too. The row
     length follows the column count above: three over 980px, two between 621px and 980px. */
  @media (min-width: 981px) {
    .lp-card:last-child:nth-child(3n + 1) {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto auto 1fr;
      column-gap: 32px;
    }

    .lp-card:last-child:nth-child(3n + 1) > .lp-art {
      grid-column: 2;
      grid-row: 1 / span 4;
      margin-top: 0;
    }
  }

  @media (min-width: 621px) and (max-width: 980px) {
    .lp-card:last-child:nth-child(2n + 1) {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto auto 1fr;
      column-gap: 32px;
    }

    .lp-card:last-child:nth-child(2n + 1) > .lp-art {
      grid-column: 2;
      grid-row: 1 / span 4;
      margin-top: 0;
    }
  }

  .lp-card-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .lp-card-text {
    color: var(--text-secondary);
    font-size: 15px;
  }

  .lp-kicker {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  @media (prefers-reduced-motion: no-preference) {
    .lp-card {
      transition: transform 0.25s;
    }

    .lp-card:hover {
      transform: translateY(-3px);
    }
  }

  .lp-art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 170px;
    margin-top: auto;
    overflow: hidden;
    border-radius: 16px;
    background: var(--color-base-200);
  }

  .lp-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 60% at 50% 110%, var(--lp-glow), transparent 70%);
    pointer-events: none;
  }

  .lp-art > * {
    position: relative;
  }

  .lp-dev {
    display: grid;
    gap: 6px;
    width: min(250px, 100%);
    font-size: 12px;
  }

  .lp-dev-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--color-base-100);
    font-weight: 600;
  }

  .lp-toggle {
    position: relative;
    flex: none;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: var(--color-base-300);
  }

  .lp-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-base-100);
  }

  .lp-toggle-on {
    background: var(--color-primary);
  }

  .lp-toggle-on::after {
    left: 14px;
  }

  .lp-switch-mark {
    font-weight: 700;
    color: var(--text-muted);
  }

  .lp-switch-mark-on {
    color: var(--color-success);
  }

  .lp-codes {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    font: 500 14px/1.4 var(--font-mono);
    color: var(--text-secondary);
  }

  .lp-dt {
    display: grid;
    gap: 4px;
    width: min(260px, 100%);
    font-size: 12px;
  }

  .lp-dt-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
  }

  .lp-dt-chip {
    padding: 6px 8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font: 500 11px/1 var(--font-sans);
  }

  .lp-dt-chip-ghost {
    background: var(--color-base-100);
    color: var(--text-secondary);
  }

  .lp-dt-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 44px;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--color-base-100);
  }

  .lp-dt-head {
    background: transparent;
    color: var(--text-muted);
    font: 500 10px/1.4 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .lp-dt-time {
    text-align: right;
    color: var(--text-muted);
  }

  .lp-phone {
    display: grid;
    place-items: center;
    width: 112px;
    height: 150px;
    margin-top: auto;
    margin-bottom: -36px;
    padding: 16px;
    border-radius: 22px 22px 0 0;
    background: var(--color-base-100);
    box-shadow: inset 0 0 0 5px var(--color-base-content), var(--shadow-paper);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
  }

  .lp-swatches {
    display: flex;
    gap: 8px;
  }

  .lp-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-base-100);
  }

  .lp-swatch-primary {
    background: var(--color-primary);
  }

  .lp-swatch-gradient {
    background: var(--color-brand-gradient-end);
  }

  .lp-swatch-success {
    background: var(--color-success);
  }

  .lp-swatch-warning {
    background: var(--color-warning);
  }

  .lp-swatch-content {
    background: var(--color-base-content);
  }

  /* The "Aa" sample: the theme's own surface and text, then the same pair inverted — a
     token pair in both halves, so it stays true to whichever palette is live (LD-12). */
  .lp-aa {
    display: flex;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 12px;
    font-size: 28px;
    font-weight: 700;
  }

  .lp-aa-light {
    padding: 8px 18px;
    background: var(--color-base-100);
    color: var(--color-base-content);
  }

  .lp-aa-dark {
    padding: 8px 18px;
    background: var(--color-base-content);
    color: var(--color-base-100);
  }

  /* How it works */
  .lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 48px;
  }

  @media (max-width: 860px) {
    .lp-steps {
      grid-template-columns: 1fr;
    }
  }

  .lp-step {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 26px;
    border-radius: 24px;
    background: var(--color-base-200);
  }

  .lp-step-n {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-content);
    font: 500 14px/1 var(--font-mono);
  }

  .lp-step-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .lp-step-text {
    color: var(--text-secondary);
    font-size: 15px;
  }

  /* FAQ */
  .lp-faq {
    display: grid;
    gap: 10px;
    max-width: 820px;
    margin: 44px auto 0;
  }

  .lp-faq-item {
    overflow: hidden;
    padding: 0 24px;
    border-radius: 18px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
  }

  .lp-faq-q {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-inline: -24px;
    padding: 20px 24px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 18px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }

  .lp-faq-q::-webkit-details-marker {
    display: none;
  }

  .lp-faq-q::after {
    content: "+";
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    color: var(--color-primary);
    transition: transform 0.2s;
  }

  .lp-faq-item[open] .lp-faq-q::after {
    transform: rotate(45deg);
  }

  .lp-faq-a {
    max-width: 64ch;
    padding-bottom: 20px;
    color: var(--text-secondary);
  }

  /* Final call to action */
  .lp-final {
    position: relative;
    overflow: hidden;
    text-align: center;
  }

  .lp-final::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -40%;
    width: 90%;
    height: 90%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, var(--lp-glow), transparent);
    filter: blur(20px);
    pointer-events: none;
  }

  .lp-final-inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 22px;
  }

  .lp-final-title {
    font-size: clamp(40px, 7vw, 88px);
    line-height: 0.98;
    font-weight: 900;
    letter-spacing: -0.045em;
  }

  .lp-final-lead {
    color: var(--text-secondary);
    font-size: 19px;
  }

  .lp-final .lp-cta {
    margin-top: 0;
  }

  /* The product's own social profiles (#875): a quiet band, smaller than a content section. */
  .lp-social {
    padding-block: clamp(48px, 6vw, 72px);
  }

  .lp-social-inner {
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
  }

  /* Footer */
  .lp-foot {
    padding-block: 32px;
    border-top: 1px solid var(--lp-line);
    font-size: 14px;
    color: var(--text-secondary);
  }

  .lp-foot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
  }

  .lp-foot-end {
    margin-left: auto;
  }

  /* The shared legal-links partial stacks its list; in this footer it runs in a row. */
  .lp-foot-end ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
  }

  /* Link to /about in the footer row */
  .lp-foot-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
  }

  .lp-foot-link:hover {
    color: var(--color-base-content);
  }

  /* /about section (#887, docs/mockups/about.html): tab bar under the header, page head. */
  .lp-subnav {
    position: sticky;
    top: calc(56px + env(safe-area-inset-top, 0px));
    z-index: 39;
    background: var(--color-base-200);
    border-bottom: 1px solid var(--lp-line);
  }

  .lp-subnav-row {
    display: flex;
    gap: 4px;
    padding-block: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lp-subnav-row::-webkit-scrollbar {
    display: none;
  }

  .lp-subnav-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
  }

  .lp-subnav-link:hover {
    background: var(--color-base-300);
    color: var(--color-base-content);
  }

  .lp-subnav-link[aria-current="page"] {
    background: var(--color-base-content);
    color: var(--color-base-100);
  }

  .lp-head {
    padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 56px);
  }

  .lp-head-inner {
    display: grid;
    gap: 16px;
    justify-items: start;
  }

  .lp-head-title {
    max-width: 860px;
    font-size: clamp(38px, 6.4vw, 76px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.045em;
  }

  .lp-head-lead {
    max-width: 52ch;
    font-size: clamp(18px, 2vw, 21px);
    color: var(--text-secondary);
  }

  .lp-final-compact .lp-final-title {
    font-size: clamp(34px, 5.4vw, 64px);
  }

  /* About hub catalogue (#888, docs/mockups/about.html): status legend, group links, groups. */
  .lp-cat-legend,
  .lp-cat-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .lp-cat-top {
    display: grid;
    gap: 14px;
    padding-bottom: 28px;
  }

  .lp-cat-jump a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }

  .lp-cat-jump a:hover {
    background: var(--color-base-300);
  }

  .lp-cat-icon {
    flex: none;
    width: 1em;
    height: 1em;
    color: var(--color-primary);
  }

  .lp-cat-jump .lp-cat-icon {
    font-size: 16px;
  }

  .lp-cat-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  .lp-cat-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .lp-cat-status-available {
    background: color-mix(in oklab, var(--color-success) 14%, transparent);
    color: var(--color-success);
  }

  .lp-cat-status-next {
    background: color-mix(in oklab, var(--color-info) 14%, transparent);
    color: var(--color-info);
  }

  .lp-cat-status-planned {
    background: color-mix(in oklab, var(--color-warning) 16%, transparent);
    color: var(--color-warning);
  }

  .lp-cat {
    padding-bottom: clamp(64px, 9vw, 112px);
  }

  .lp-cat-groups {
    display: grid;
    gap: 20px;
  }

  .lp-cat-group {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: clamp(20px, 4vw, 56px);
    padding: clamp(22px, 3vw, 36px);
    border-radius: 28px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    scroll-margin-top: 132px;
  }

  @media (max-width: 860px) {
    .lp-cat-group {
      grid-template-columns: 1fr;
    }
  }

  .lp-cat-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: 10px;
    column-gap: 10px;
  }

  @media (min-width: 861px) {
    .lp-cat-head {
      position: sticky;
      top: 132px;
      align-self: start;
    }
  }

  .lp-cat-head .lp-cat-icon {
    font-size: 26px;
  }

  .lp-cat-title {
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -0.03em;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .lp-cat-head > p,
  .lp-cat-more {
    grid-column: 1 / -1;
  }

  .lp-cat-head > p {
    color: var(--text-secondary);
    font-size: 16px;
  }

  .lp-cat-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    justify-self: start;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
  }

  .lp-cat-more::after {
    content: " →";
  }

  .lp-cat-more:hover {
    text-decoration: underline;
  }

  .lp-cat-features {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .lp-cat-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--lp-line);
  }

  .lp-cat-feature:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .lp-cat-feature-title {
    font-size: 17px;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lp-cat-feature > p {
    grid-column: 1;
    color: var(--text-secondary);
    font-size: 15px;
  }

  .lp-cat-tag {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    justify-items: end;
    gap: 6px;
  }

  .lp-cat-issues {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 8px;
    font: 500 12px/1 var(--font-mono);
  }

  .lp-cat-issues a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-secondary);
    text-decoration: none;
  }

  .lp-cat-issues a:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }

  @media (max-width: 520px) {
    .lp-cat-feature {
      grid-template-columns: 1fr;
    }

    .lp-cat-tag {
      grid-column: 1;
      grid-row: auto;
      grid-auto-flow: column;
      justify-content: start;
      justify-items: start;
      align-items: center;
    }

    .lp-cat-issues {
      justify-content: flex-start;
    }
  }

  .lp-cat-empty {
    padding: clamp(40px, 7vw, 80px) 24px;
    border-radius: 28px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    text-align: center;
  }

  .lp-cat-empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: var(--color-base-200);
    color: var(--text-muted);
    font-size: 26px;
  }

  .lp-cat-empty h2 {
    font-size: 24px;
    letter-spacing: -0.02em;
  }

  .lp-cat-empty p {
    margin-top: 8px;
    color: var(--text-secondary);
  }

  /* About /quality page (#889, docs/mockups/about.html): lead under a section heading, the
     "read more" reference, red/green steps, guard cards, CI runs, terminal, pager. */
  .lp-sec-lead {
    max-width: 56ch;
    font-size: 18px;
    color: var(--text-secondary);
  }

  .lp-q-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 24px;
    list-style: none;
    border-radius: 24px;
    background: var(--color-base-100);
    font: 500 13px/1.5 var(--font-mono);
  }

  .lp-sec:not(.lp-sec-alt) .lp-q-steps {
    background: var(--color-base-200);
  }

  .lp-q-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--color-base-200);
  }

  .lp-sec:not(.lp-sec-alt) .lp-q-step {
    background: var(--color-base-100);
  }

  .lp-q-step small {
    display: block;
    margin-top: 2px;
    font: 400 12px/1.4 var(--font-sans);
    color: var(--text-muted);
  }

  .lp-q-mark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font: 700 12px/1 var(--font-sans);
    color: var(--color-base-100);
  }

  .lp-q-mark-n {
    background: var(--text-muted);
  }

  .lp-q-mark-r {
    background: var(--color-warning);
    color: var(--color-warning-content);
  }

  .lp-q-mark-g {
    background: var(--color-success);
    color: var(--color-success-content);
  }

  .lp-q-cards,
  .lp-q-runs {
    display: grid;
    gap: 16px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
  }

  .lp-q-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-q-runs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 980px) {
    .lp-q-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 860px) {
    .lp-q-runs {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 620px) {
    .lp-q-cards {
      grid-template-columns: 1fr;
    }
  }

  .lp-q-card,
  .lp-q-run {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
    column-gap: 8px;
    border-radius: 22px;
  }

  .lp-q-card > :not(.lp-q-ico):not(code),
  .lp-q-run > :not(.lp-q-ico):not(.lp-q-when) {
    grid-column: 1 / -1;
  }

  .lp-q-card {
    gap: 8px 8px;
    padding: 22px;
    background: var(--color-base-200);
  }

  .lp-q-card code {
    font: 500 13px/1.3 var(--font-mono);
    color: var(--color-primary);
    word-break: break-word;
  }

  .lp-q-card h3 {
    font-size: 19px;
    letter-spacing: -0.01em;
  }

  .lp-q-card p {
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-q-ico {
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-size: 16px;
  }

  .lp-q-icon {
    width: 1em;
    height: 1em;
  }

  .lp-q-run {
    gap: 14px 8px;
    padding: 24px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
  }

  .lp-q-when {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .lp-q-run h3 {
    font-size: 21px;
    letter-spacing: -0.015em;
  }

  .lp-q-run > p:last-child {
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-q-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-q-chips li {
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--color-base-200);
    font: 500 13px/1 var(--font-sans);
    color: var(--text-secondary);
  }

  .lp-term {
    margin: 0;
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--color-base-200);
    box-shadow: var(--shadow-paper);
    font: 500 14px/1.7 var(--font-mono);
    color: var(--color-base-content);
    overflow-x: auto;
  }

  .lp-term-prompt {
    color: var(--color-info);
  }

  .lp-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding-block: 32px;
    border-top: 1px solid var(--lp-line);
  }

  .lp-pager-link {
    display: grid;
    gap: 4px;
    min-width: 200px;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    text-decoration: none;
  }

  .lp-pager-link:hover {
    background: var(--color-base-300);
  }

  .lp-pager-link small {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .lp-pager-link b {
    font-size: 18px;
    color: var(--color-primary);
  }

  .lp-pager-next {
    margin-inline-start: auto;
    text-align: end;
  }

  /* About /extending page (#889, docs/mockups/about-extending.html): the two layers, the
     update steps, what stays the child's. Cards and the rule reuse the /quality classes. */
  .lp-q-layers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 44px;
  }

  @media (max-width: 760px) {
    .lp-q-layers {
      grid-template-columns: 1fr;
    }
  }

  .lp-q-layer {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 24px;
    border-radius: 24px;
    background: var(--color-base-200);
  }

  .lp-q-layer-own {
    background: color-mix(in oklab, var(--color-warning) 10%, var(--color-base-100));
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--color-warning) 45%, transparent);
  }

  .lp-q-layer h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    letter-spacing: -0.015em;
  }

  .lp-q-layer h3 .lp-q-icon {
    font-size: 20px;
    color: var(--color-primary);
  }

  .lp-q-layer-own h3 .lp-q-icon {
    color: var(--color-warning);
  }

  .lp-q-layer p {
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-q-tree {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-q-tree li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--color-base-100);
  }

  .lp-q-tree code {
    font: 500 13px/1.45 var(--font-mono);
    overflow-wrap: anywhere;
  }

  .lp-q-tree span {
    margin-inline-start: auto;
    font: 400 12px/1.4 var(--font-sans);
    text-align: end;
    color: var(--text-muted);
  }

  @media (max-width: 520px) {
    .lp-q-tree li {
      flex-direction: column;
      gap: 2px;
    }

    .lp-q-tree span {
      margin-inline-start: 0;
      text-align: start;
    }
  }

  .lp-q-rule {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-q-rule .lp-q-icon {
    flex: none;
    margin-top: 2px;
    font-size: 20px;
    color: var(--color-primary);
  }

  .lp-q-rule b {
    color: var(--color-base-content);
  }

  .lp-q-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 980px) {
    .lp-q-flow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .lp-q-flow {
      grid-template-columns: 1fr;
    }
  }

  .lp-q-flow li {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 22px;
    border-radius: 22px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
  }

  .lp-q-num {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-content);
    font: 500 13px/1 var(--font-mono);
  }

  .lp-q-flow h3 {
    font-size: 19px;
    letter-spacing: -0.01em;
  }

  .lp-q-flow p {
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-q-flow code {
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--color-base-200);
    font: 500 12px/1.4 var(--font-mono);
    color: var(--color-primary);
    overflow-wrap: anywhere;
  }

  .lp-q-keep {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 860px) {
    .lp-q-keep {
      grid-template-columns: 1fr;
    }
  }

  .lp-q-keep li {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 22px;
    border-radius: 22px;
    background: var(--color-base-200);
  }

  .lp-q-keep h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
  }

  .lp-q-keep h3 .lp-q-icon {
    font-size: 17px;
    color: var(--color-primary);
  }

  .lp-q-keep p {
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-q-keep code {
    font: 500 12px/1.4 var(--font-mono);
    overflow-wrap: anywhere;
  }

  /* About /monetization page (#899, docs/mockups/about-monetization.html): option cards (pros,
     cons, the "what needs doing" list), the compatibility matrix, the ready-made combinations.
     Status pills reuse .lp-cat-status; "undecided" is the one the catalogue has no word for. */
  .lp-mn-status-open {
    background: color-mix(in oklab, var(--color-base-content) 9%, transparent);
    color: var(--text-secondary);
  }

  .lp-h2 em {
    font-style: normal;
  }

  .lp-mn-num {
    font: 500 13px/1 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }

  .lp-mn-pc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
  }

  @media (max-width: 760px) {
    .lp-mn-pc {
      grid-template-columns: 1fr;
    }
  }

  .lp-mn-box,
  .lp-mn-todo,
  .lp-mn-combo {
    border-radius: 22px;
    background: var(--color-base-200);
  }

  .lp-sec:not(.lp-sec-alt) .lp-mn-box,
  .lp-sec:not(.lp-sec-alt) .lp-mn-todo {
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
  }

  .lp-mn-box {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 22px 24px;
  }

  .lp-mn-box h3,
  .lp-mn-todo h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .lp-mn-pro h3 {
    color: var(--color-success);
  }

  .lp-mn-con h3 {
    color: var(--color-warning);
  }

  .lp-mn-box ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-mn-box li {
    position: relative;
    padding-inline-start: 22px;
    font-size: 16px;
    color: var(--text-secondary);
  }

  .lp-mn-box li::before {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-weight: 700;
  }

  .lp-mn-pro li::before {
    content: "+";
    color: var(--color-success);
  }

  .lp-mn-con li::before {
    content: "\2212";
    color: var(--color-warning);
  }

  .lp-mn-box li b,
  .lp-mn-todo li b {
    font-weight: 600;
    color: var(--color-base-content);
  }

  .lp-mn-todo {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding: 22px 24px;
  }

  .lp-mn-todo h3 {
    margin-bottom: 8px;
  }

  .lp-mn-todo ol {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-mn-todo li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    align-items: start;
    padding-block: 12px;
    border-top: 1px solid var(--lp-line);
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-mn-todo li:first-child {
    padding-top: 0;
    border-top: 0;
  }

  @media (max-width: 520px) {
    .lp-mn-todo li {
      grid-template-columns: 1fr;
    }

    .lp-mn-todo li .lp-cat-status {
      justify-self: start;
    }
  }

  /* The matrix scrolls inside its own box on a wide-enough screen; on a phone it becomes one
     card per pair. */
  .lp-mn-mxw {
    margin-top: 40px;
    overflow-x: auto;
    border-radius: 24px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
  }

  .lp-mn-mx {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 15px;
  }

  .lp-mn-mx th,
  .lp-mn-mx td {
    padding: 16px 18px;
    border-top: 1px solid var(--lp-line);
    text-align: start;
    vertical-align: top;
  }

  .lp-mn-mx thead th {
    border-top: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .lp-mn-mx tbody th {
    width: 150px;
    font-size: 15px;
    white-space: nowrap;
  }

  .lp-mn-mx td {
    border-inline-start: 1px solid var(--lp-line);
    color: var(--text-secondary);
  }

  .lp-mn-mx td[data-pair] {
    width: 30%;
  }

  .lp-mn-mx td .lp-cat-status {
    margin-bottom: 8px;
  }

  .lp-mn-mx td.lp-mn-self {
    background: var(--color-base-200);
  }

  @media (max-width: 760px) {
    .lp-mn-mxw {
      overflow: visible;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }

    .lp-mn-mx,
    .lp-mn-mx tbody,
    .lp-mn-mx tr,
    .lp-mn-mx td,
    .lp-mn-mx td[data-pair] {
      display: block;
      width: auto;
      min-width: 0;
    }

    .lp-mn-mx thead,
    .lp-mn-mx th[scope="row"],
    .lp-mn-mx td.lp-mn-self {
      display: none;
    }

    .lp-mn-mx td {
      margin-bottom: 12px;
      padding: 20px 22px;
      border: 0;
      border-radius: 22px;
      background: var(--color-base-200);
    }

    .lp-mn-mx td::before {
      content: attr(data-pair);
      display: block;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 700;
      color: var(--color-base-content);
    }
  }

  .lp-mn-v-plus {
    background: color-mix(in oklab, var(--color-success) 14%, transparent);
    color: var(--color-success);
  }

  .lp-mn-v-ok {
    background: color-mix(in oklab, var(--color-info) 14%, transparent);
    color: var(--color-info);
  }

  .lp-mn-v-x {
    background: color-mix(in oklab, var(--color-warning) 16%, transparent);
    color: var(--color-warning);
  }

  .lp-mn-combos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
  }

  @media (max-width: 980px) {
    .lp-mn-combos {
      grid-template-columns: 1fr;
    }
  }

  .lp-mn-combo {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 24px;
  }

  .lp-mn-combo-first {
    outline: 2px solid color-mix(in oklab, var(--color-primary) 40%, transparent);
  }

  .lp-mn-badge {
    justify-self: start;
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .lp-mn-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-mn-parts li {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-base-100);
    font: 500 13px/1 var(--font-sans);
  }

  .lp-mn-combo h3 {
    font-size: 21px;
    letter-spacing: -0.015em;
  }

  .lp-mn-combo p {
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-mn-combo dl {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: 15px;
  }

  .lp-mn-combo dt {
    font-weight: 600;
  }

  .lp-mn-combo dd {
    margin: 0 0 6px;
    color: var(--text-secondary);
  }

  .lp-mn-note {
    max-width: 70ch;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-muted);
  }


  /* About /showcase page and the landing's built-with teaser (#917, docs/mockups/about-showcase.html):
     the fan diagram, the product cards, the layers diagram and the teaser tiles. The status pill
     reuses .lp-cat-status. The products' own icon colours live inside their image files. */
  .lp-sc-fan {
    margin-top: 40px;
    padding: clamp(16px, 3vw, 28px);
    border-radius: 28px;
    background: var(--color-base-200);
  }

  .lp-sec-alt .lp-sc-fan {
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
  }

  .lp-sc-fan svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .lp-sc-line {
    stroke: color-mix(in oklab, var(--color-primary) 45%, transparent);
    stroke-width: 1.5;
    fill: none;
  }

  .lp-sc-up {
    stroke: var(--color-brand-gradient-end);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 6 8;
  }

  .lp-sc-core {
    fill: var(--color-primary);
  }

  .lp-sc-node {
    fill: var(--color-base-200);
    stroke: var(--lp-line);
  }

  .lp-sc-node-text,
  .lp-sc-sm,
  .lp-sc-core-text {
    font-family: var(--font-sans);
    font-size: 14px;
    fill: var(--color-base-content);
  }

  .lp-sc-sm {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: var(--text-muted);
  }

  .lp-sc-core-text {
    font-size: 16px;
    font-weight: 700;
    fill: var(--color-primary-content);
  }

  .lp-sc-products {
    display: grid;
    gap: 20px;
    margin-top: 44px;
  }

  .lp-sc-prod {
    scroll-margin-top: 130px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(20px, 4vw, 48px);
    padding: clamp(22px, 3vw, 34px);
    border-radius: 28px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
  }

  @media (max-width: 860px) {
    .lp-sc-prod {
      grid-template-columns: 1fr;
    }
  }

  .lp-sc-head {
    display: grid;
    gap: 12px;
    align-content: start;
  }

  .lp-sc-id {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .lp-sc-id img {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--lp-line);
  }

  .lp-sc-id h3 {
    font-size: clamp(22px, 2.6vw, 28px);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .lp-sc-id small {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-sc-head p {
    font-size: 16px;
    color: var(--text-secondary);
  }

  .lp-sc-head .lp-cat-status {
    justify-self: start;
  }

  .lp-sc-go {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
  }

  .lp-sc-go::after {
    content: " ↗";
    white-space: pre;
  }

  .lp-sc-nolink {
    font-size: 14px;
    color: var(--text-muted);
  }

  .lp-sc-feat {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-sc-feat li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    font-size: 15px;
    color: var(--text-secondary);
  }

  .lp-sc-feat li::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  }

  .lp-sc-feat b,
  .lp-sc-next b {
    color: var(--color-base-content);
  }

  .lp-sc-next {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: color-mix(in oklab, var(--color-info) 8%, var(--color-base-200));
  }

  .lp-sc-label,
  .lp-sc-adds-label {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .lp-sc-label {
    color: var(--color-info);
  }

  .lp-sc-next ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-sc-next li {
    position: relative;
    padding-inline-start: 16px;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .lp-sc-next li::before {
    content: "→";
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-info);
  }

  .lp-sc-adds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
  }

  .lp-sc-adds-label {
    margin-inline-end: 4px;
  }

  .lp-sc-chip,
  .lp-sc-chips li {
    padding: 7px 10px;
    border-radius: 999px;
    font: 500 13px/1.2 var(--font-sans);
    overflow-wrap: anywhere;
  }

  .lp-sc-chip {
    background: color-mix(in oklab, var(--color-warning) 12%, transparent);
    color: var(--color-base-content);
  }

  .lp-sc-stack {
    display: grid;
    gap: 10px;
    max-width: 860px;
    margin-top: 40px;
  }

  .lp-sc-lay {
    display: grid;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 20px;
  }

  .lp-sc-lay h4 {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .lp-sc-own {
    background: color-mix(in oklab, var(--color-warning) 10%, var(--color-base-100));
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--color-warning) 45%, transparent);
  }

  .lp-sc-own h4 {
    color: var(--color-warning);
  }

  .lp-sc-tpl {
    background: var(--color-base-200);
  }

  .lp-sc-tpl h4 {
    color: var(--color-primary);
  }

  .lp-sc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-sc-chips li {
    padding: 8px 11px;
    background: var(--color-base-100);
  }

  .lp-sc-arrow {
    justify-self: center;
    font: 500 12px/1 var(--font-mono);
    color: var(--text-muted);
  }

  .lp-sc-teaser {
    display: grid;
    gap: 22px;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 28px;
    background: var(--color-base-100);
    box-shadow: var(--shadow-paper);
  }

  .lp-sc-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  @media (max-width: 760px) {
    .lp-sc-tiles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .lp-sc-tile {
    display: grid;
    gap: 8px;
    justify-items: start;
    padding: 16px;
    border-radius: 18px;
    background: var(--color-base-200);
    text-decoration: none;
  }

  .lp-sc-tile:hover {
    background: var(--color-base-300);
  }

  .lp-sc-tile img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .lp-sc-tile b {
    font-size: 16px;
  }

  .lp-sc-tile small {
    font-size: 13px;
    color: var(--text-secondary);
  }

  .lp-sc-more {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
  }

  .lp-sc-more::after {
    content: " →";
    white-space: pre;
  }
}