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

  .lp-navlang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 8px;
    font: 500 13px/1 var(--font-mono);
    color: var(--text-secondary);
    text-decoration: none;
  }

  .lp-navlang:hover {
    background: var(--color-base-100);
  }

  @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 six 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);
  }

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

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