/* The blog's own base rules: what the web app's globals.css (its fonts and
   Tailwind's preflight) gives the content pages, which the shared
   stylesheets assume. The font
   addresses are the web app's; the blog serves embedded copies there. */
@font-face {
  font-family: Archivo;
  src: url('/blog/_assets/archivo.7150c0ec5ad3.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: JetBrains;
  src: url('/blog/_assets/jetbrains-mono.1e06740a02a4.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
:root {
  --font-archivo: Archivo;
  --font-inter: Archivo;
  --font-mono: JetBrains, 'JetBrains Mono', ui-monospace, monospace;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}
ol,
ul {
  list-style: none;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: inherit;
}
table {
  border-collapse: collapse;
  text-indent: 0;
  border-color: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
code,
pre {
  font-family: var(--font-mono);
}
summary {
  display: list-item;
}
svg {
  display: block;
  vertical-align: middle;
}
[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/* Generated by apps/blog-site/cmd/genassets from apps/web-app; do not edit. */

/* apps/web-app/app/brand.css */
/* Approved Vercel identity, shared by authentication (see auth.css) and the live workspace.

   Two layers. The primitives below are the brand palette and never change.
   Component styles never use them directly: they use the semantic tokens in
   the next block, which name a role (canvas, text, action, boundary). Light
   values equal today's coral identity exactly; the Ember dark values live in
   one place further down. A rule that pairs cream with ink on purpose (a
   cream chip on an ink band) keeps the primitives, because it reads the same
   in both themes. */
:root {
  --brand-coral: #ed6c4f;
  --brand-ink: #171412;
  --brand-muted: #40251f;
  --brand-panel: #f28a72;
  --brand-raised: #f8b5a3;
  --brand-soft: #e66347;
  --brand-on-ink: #fff0eb;
  --brand-line: rgb(23 20 18 / 18%);
  --brand-line-strong: rgb(23 20 18 / 38%);
}
/* Semantic tokens, coral light (design/BRAND-GUIDE.md). `.lp-theme-light`
   pins a subtree to light in every theme: illustrations of someone else's
   site and previews of coral share images. */
:root,
.lp-theme-light {
  color-scheme: light;
  /* Surfaces: page, section, card or input, and the ink band. */
  --surface-0: var(--brand-coral);
  --surface-1: var(--brand-panel);
  --surface-2: var(--brand-raised);
  --surface-soft: var(--brand-soft);
  --surface-inverse: var(--brand-ink);
  /* Text on the surfaces above, and on the ink band. */
  --text: var(--brand-ink);
  --text-muted: var(--brand-muted);
  --text-inverse: var(--brand-on-ink);
  --text-inverse-quiet: rgb(255 240 235 / 80%);
  /* The second line of a display headline. */
  --headline-accent: var(--brand-ink);
  /* The one dominant action: the black pill. */
  --action-bg: var(--brand-ink);
  --action-fg: var(--brand-on-ink);
  --action-hover: #352722;
  /* Small solid marks: selected segments, chips, badges, dots, meters, tips. */
  --emphasis-bg: var(--brand-ink);
  --emphasis-fg: var(--brand-on-ink);
  /* Lines. A boundary is a border that is the only edge of a control. */
  --border: var(--brand-line);
  --border-strong: var(--brand-line-strong);
  --border-boundary: var(--brand-line-strong);
  --border-solid: var(--brand-ink);
  --inverse-rule: var(--brand-ink);
  /* An inset edge for large ink bands: none in light, a coral rule in Ember. */
  --band-edge: transparent;
  --focus-ring: var(--brand-ink);
  /* Status tones, the warm scale (design/BRAND-GUIDE.md, "Status colour"):
     danger for high severity and a D, warn for medium and a C, chrome for
     the ring on an A. Never mint, green or blue. */
  --tone-danger: #a3241a;
  --tone-danger-fg: var(--brand-on-ink);
  --tone-warn: #f5b13d;
  --tone-warn-fg: var(--brand-ink);
  /* Warn as a stroke or text on coral and raised surfaces, where amber fades. */
  --tone-warn-strong: #9a5c00;
  --tone-chrome: #d9d3ce;
  /* Severity and evidence. */
  --sev-high-bg: var(--tone-danger);
  --sev-high-fg: var(--tone-danger-fg);
  --sev-medium-bg: var(--tone-warn);
  --sev-medium-fg: var(--tone-warn-fg);
  --evidence-bg: var(--brand-raised);
  --evidence-fg: var(--brand-ink);
  --evidence-rule: var(--brand-line-strong);
  /* An inline notice: the raised surface in light and in Ember. */
  --notice-bg: var(--brand-raised);
  /* Channels for translucent colour: rgb(var(--tint-rgb) / 8%). Tints wash a
     surface, lines draw rules, shadows and scrims stay dark. */
  --tint-rgb: 23 20 18;
  --line-rgb: 23 20 18;
  --shadow-rgb: 23 20 18;
  --scrim-rgb: 23 20 18;
  /* Theme switches for markup that has a file per theme (the wordmark), and
     the background the lock footage is graded against. */
  --display-light: block;
  --display-dark: none;
  --lock-stage: #ec6b4d;

  /* Elevation is a hard offset, never a blur (design/BRAND-GUIDE.md), the
     same language as the landing's receipts and playful CTA. A lifted element
     moves up by the difference, so its shadow edge stays where it was. */
  --shadow-color: var(--brand-ink);
  --shadow-lift-0: 0 0 0 var(--shadow-color);
  --shadow-lift-1: 0 2px 0 var(--shadow-color); /* resting cards */
  --shadow-lift-2: 0 4px 0 var(--shadow-color); /* hover, raised */
  --shadow-lift-3: 0 8px 0 var(--shadow-color); /* popovers, sheets */
  --shadow-offset-2: 3px 4px 0 var(--shadow-color); /* playful offset, hero cards */

  /* Older names, kept for markup and inline styles that still use them. */
  --lp-lift-0: var(--shadow-lift-0);
  --lp-lift-1: var(--shadow-lift-1);
  --lp-lift-2: var(--shadow-lift-2);
  --lp-lift-3: var(--shadow-lift-3);
  --lp-offset-2: var(--shadow-offset-2);
  --lp-surface-0: var(--surface-0);
  --lp-surface-1: var(--surface-1);
  --lp-surface-2: var(--surface-2);
  --lp-surface-ink: var(--surface-inverse);
  --lp-ease-spring: cubic-bezier(0.3, 1.4, 0.5, 1);
  --lp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Ember, the dark theme (docs/plans/2026-10-07-ember-dark-mode.md). It applies
   when the device prefers dark and nobody chose light, or when someone chose
   dark (the theme helper sets data-theme on <html> only for an explicit
   choice). Both are screen only, so printing stays coral light. The two
   blocks must stay identical. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --surface-0: #120d0a;
    --surface-1: #1b1411;
    --surface-2: #261b16;
    --surface-soft: rgb(237 108 79 / 18%);
    --surface-inverse: #0a0706;
    --text: var(--brand-on-ink);
    --text-muted: rgb(255 240 235 / 66%);
    --text-inverse: var(--brand-on-ink);
    --text-inverse-quiet: rgb(255 240 235 / 72%);
    --headline-accent: var(--brand-coral);
    --action-bg: var(--brand-coral);
    --action-fg: var(--brand-ink);
    --action-hover: var(--brand-panel);
    --emphasis-bg: var(--brand-coral);
    --emphasis-fg: var(--brand-ink);
    --border: rgb(237 108 79 / 22%);
    --border-strong: rgb(237 108 79 / 48%);
    --border-boundary: rgb(237 108 79 / 65%);
    --border-solid: rgb(237 108 79 / 65%);
    --inverse-rule: rgb(237 108 79 / 40%);
    --band-edge: rgb(237 108 79 / 40%);
    --focus-ring: var(--brand-on-ink);
    /* #d23b2c put the white on a high-severity chip at 4.30:1, just under
       what AA asks of 13px text; this clears it at 4.56 and still reads as
       the same red against Ember's surfaces. */
    --tone-danger: #cc3729;
    --tone-danger-fg: var(--brand-on-ink);
    --tone-warn: #f5b13d;
    --tone-warn-fg: var(--brand-ink);
    --tone-warn-strong: #f5b13d;
    --tone-chrome: #cfc8c2;
    --sev-high-bg: var(--tone-danger);
    --sev-high-fg: var(--tone-danger-fg);
    --sev-medium-bg: var(--tone-warn);
    --sev-medium-fg: var(--tone-warn-fg);
    --evidence-bg: #0a0706;
    --evidence-fg: var(--brand-on-ink);
    --evidence-rule: rgb(237 108 79 / 40%);
    --notice-bg: var(--surface-2);
    --tint-rgb: 255 240 235;
    --line-rgb: 237 108 79;
    --shadow-rgb: 0 0 0;
    --scrim-rgb: 0 0 0;
    --shadow-color: #000;
    --display-light: none;
    --display-dark: block;
    --lock-stage: #120f0a;
  }
}
@media screen {
  :root[data-theme='dark'] {
    color-scheme: dark;
    --surface-0: #120d0a;
    --surface-1: #1b1411;
    --surface-2: #261b16;
    --surface-soft: rgb(237 108 79 / 18%);
    --surface-inverse: #0a0706;
    --text: var(--brand-on-ink);
    --text-muted: rgb(255 240 235 / 66%);
    --text-inverse: var(--brand-on-ink);
    --text-inverse-quiet: rgb(255 240 235 / 72%);
    --headline-accent: var(--brand-coral);
    --action-bg: var(--brand-coral);
    --action-fg: var(--brand-ink);
    --action-hover: var(--brand-panel);
    --emphasis-bg: var(--brand-coral);
    --emphasis-fg: var(--brand-ink);
    --border: rgb(237 108 79 / 22%);
    --border-strong: rgb(237 108 79 / 48%);
    --border-boundary: rgb(237 108 79 / 65%);
    --border-solid: rgb(237 108 79 / 65%);
    --inverse-rule: rgb(237 108 79 / 40%);
    --band-edge: rgb(237 108 79 / 40%);
    --focus-ring: var(--brand-on-ink);
    /* #d23b2c put the white on a high-severity chip at 4.30:1, just under
       what AA asks of 13px text; this clears it at 4.56 and still reads as
       the same red against Ember's surfaces. */
    --tone-danger: #cc3729;
    --tone-danger-fg: var(--brand-on-ink);
    --tone-warn: #f5b13d;
    --tone-warn-fg: var(--brand-ink);
    --tone-warn-strong: #f5b13d;
    --tone-chrome: #cfc8c2;
    --sev-high-bg: var(--tone-danger);
    --sev-high-fg: var(--tone-danger-fg);
    --sev-medium-bg: var(--tone-warn);
    --sev-medium-fg: var(--tone-warn-fg);
    --evidence-bg: #0a0706;
    --evidence-fg: var(--brand-on-ink);
    --evidence-rule: rgb(237 108 79 / 40%);
    --notice-bg: var(--surface-2);
    --tint-rgb: 255 240 235;
    --line-rgb: 237 108 79;
    --shadow-rgb: 0 0 0;
    --scrim-rgb: 0 0 0;
    --shadow-color: #000;
    --display-light: none;
    --display-dark: block;
    --lock-stage: #120f0a;
  }
}
/* ---------- text roles (design/BRAND-GUIDE.md, "Text roles") ----------
   Seven roles cover every product surface. Archivo for all words, labels
   included, in sentence case; JetBrains Mono only for code, evidence, ids
   and timestamps. UI text never drops below 13px (12px only for legal
   footnotes), and on coral every role stays at full opacity. Selectors adopt
   the roles through these variables or the `.lp-t-*` classes. */
:root {
  --lp-t-sans: var(--font-archivo), Archivo, Arial, sans-serif;
  --lp-t-mono: var(--font-mono), monospace;
  --lp-t-display: 800 clamp(56px, 7vw, 96px) / 1 var(--lp-t-sans);
  --lp-t-display-tracking: -0.045em;
  --lp-t-heading: 750 clamp(28px, 3.2vw, 40px) / 1.1 var(--lp-t-sans);
  --lp-t-heading-tracking: -0.035em;
  --lp-t-title: 700 clamp(20px, 1.6vw, 22px) / 1.25 var(--lp-t-sans);
  --lp-t-title-tracking: -0.02em;
  --lp-t-body: 450 clamp(16px, 1.25vw, 18px) / 1.6 var(--lp-t-sans);
  --lp-t-support: 500 14px / 1.5 var(--lp-t-sans);
  --lp-t-label: 650 13px / 1.35 var(--lp-t-sans);
  --lp-t-label-tracking: 0.01em;
  --lp-t-code: 500 13px / 1.5 var(--lp-t-mono);
  /* Status chips (tags, severity, when to fix) share one height, so a row
     of mixed chips lines up on one centre line. */
  --lp-chip-height: 26px;
  /* Inverse (on ink): words in inverse text, quiet roles at 80%. */
  --lp-t-on-ink-quiet: var(--text-inverse-quiet);
}
.lp-t-display,
.lp-t-heading,
.lp-t-title,
.lp-t-body,
.lp-t-support,
.lp-t-label,
.lp-t-code {
  margin: 0;
  color: var(--text);
  text-transform: none;
}
.lp-t-display {
  font: var(--lp-t-display);
  letter-spacing: var(--lp-t-display-tracking);
}
.lp-t-heading {
  font: var(--lp-t-heading);
  letter-spacing: var(--lp-t-heading-tracking);
}
.lp-t-title {
  font: var(--lp-t-title);
  letter-spacing: var(--lp-t-title-tracking);
}
.lp-t-body {
  font: var(--lp-t-body);
  letter-spacing: 0;
}
.lp-t-support {
  font: var(--lp-t-support);
  letter-spacing: 0;
  color: var(--text-muted);
}
.lp-t-label {
  font: var(--lp-t-label);
  letter-spacing: var(--lp-t-label-tracking);
  color: var(--text-muted);
}
/* Code and evidence: as written, ink on the raised surface. */
.lp-t-code {
  font: var(--lp-t-code);
  letter-spacing: 0;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--evidence-bg);
  color: var(--evidence-fg);
  overflow-wrap: anywhere;
}
:is([data-theme='ink'], .lp-inverse)
  :is(.lp-t-display, .lp-t-heading, .lp-t-title, .lp-t-body) {
  color: var(--text-inverse);
}
:is([data-theme='ink'], .lp-inverse) :is(.lp-t-support, .lp-t-label) {
  color: var(--text-inverse-quiet);
}
:is([data-theme='ink'], .lp-inverse) .lp-t-code {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
/* The themed wordmark (components/brand/Wordmark.tsx). */
.lp-brand-body img.lp-wordmark-ink {
  display: var(--display-light);
}
.lp-brand-body img.lp-wordmark-white {
  display: var(--display-dark);
}
body.lp-brand-body {
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-archivo), Archivo, Arial, sans-serif;
  font-weight: 450;
  line-height: 1.55;
}
/* Shared reading rules: balanced headings, natural prose, and safe wrapping
   for long addresses in narrow cards. Code blocks keep their own whitespace. */
.lp-brand-body :where(h1, h2, h3, h4) {
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.lp-brand-body :where(p, li, dd, dt, label) {
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.lp-brand-body :where(button, input, select, textarea) {
  font-family: inherit;
}
/* Native checkboxes and radios take the ink (light text in Ember), never
   the browser's blue or grey. */
.lp-brand-body :where(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--text);
}
.lp-brand-body :where(code, time) {
  font-variant-numeric: tabular-nums;
}
.lp-t-display,
.lp-t-heading,
.lp-t-title {
  text-wrap: balance;
}
.lp-t-body,
.lp-t-support {
  text-wrap: pretty;
}
.lp-brand-body ::selection {
  background: var(--emphasis-bg);
  color: var(--emphasis-fg);
}
/* Existing utility-based administration forms inherit the product identity. */
.lp-shell :is([class*='text-neutral-'], [class*='text-blue-']) {
  color: var(--text);
}
.lp-shell :is([class*='text-neutral-600'], [class*='text-neutral-400']) {
  color: var(--text-muted);
}
.lp-shell :is([class*='bg-white'], [class*='bg-neutral-']) {
  background: var(--surface-1);
}
/* Utility-styled textareas and selects land on the panel colour; autofill matches it. */
.lp-shell
  :is(textarea, select):is([class*='bg-white'], [class*='bg-neutral-']) {
  --lp-field-bg: var(--surface-1);
}
.lp-shell [class*='border-neutral-'] {
  border-color: var(--border-boundary);
}
.lp-shell :is(input, textarea, select) {
  box-shadow: none;
}
/* Primary actions, including links styled as buttons, use the graphite pill. */
.lp-shell :is(button, a)[class*='bg-blue-'] {
  background: var(--action-bg);
  color: var(--action-fg);
  border-radius: 999px;
  min-height: 44px;
}
.lp-shell :is(button, a)[class*='bg-blue-']:hover {
  background: var(--action-hover);
}
.lp-shell button[class*='bg-white'] {
  border-radius: 999px;
  min-height: 44px;
}
.lp-shell [class*='shadow-sm'] {
  box-shadow: none;
}
.lp-global-header button {
  border-radius: 999px;
  min-height: 36px;
  font-size: 12px;
}
/* Browser autofill paints its own pale blue fill (a UA !important background) and
   black text behind remembered values. An inset shadow in the field's own colour
   covers it, so a filled field looks exactly like an empty one. Fields whose
   surface is not the raised coral set --lp-field-bg. A rule that draws a focus ring
   with box-shadow must keep the fill: `box-shadow: var(--lp-field-fill, 0 0 #0000), <ring>`. */
.lp-brand-body :is(input, textarea, select):is(:autofill, :-webkit-autofill) {
  --lp-field-fill: 0 0 0 1000px var(--lp-field-bg, var(--surface-2)) inset;
  -webkit-box-shadow: var(--lp-field-fill);
  box-shadow: var(--lp-field-fill);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition:
    background-color 600000s 0s,
    color 600000s 0s,
    border-color 150ms ease;
}

/* Route loading states (components/ui/BrandLoading.tsx). Placeholders show at
   once: with a persistent shell, an invisible placeholder reads as a blank page.
   They start as a quiet 5% ink outline; a navigation still waiting after 400ms
   deepens to 8% and a 12% band sweeps across every 1.2s, so a slow page reads as
   working. Reduced motion keeps the fill and drops the sweep. */
@keyframes lp-skeleton-deepen {
  to {
    background-color: rgb(var(--tint-rgb) / 8%);
  }
}
@keyframes lp-shimmer {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
/* The global header belongs to finished pages only; a root-level loader never swaps it in. */
body:has(.lp-loading[data-route-loading]) .lp-global-header {
  display: none;
}
.lp-skeleton {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  background-color: rgb(var(--tint-rgb) / 5%);
  /* Off the element until the sweep starts. */
  background-image: linear-gradient(
    90deg,
    transparent 35%,
    rgb(var(--tint-rgb) / 12%) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  animation:
    lp-skeleton-deepen 200ms ease 400ms forwards,
    lp-shimmer 1.2s linear 400ms infinite;
}
.lp-skeleton[data-shape='pill'] {
  border-radius: 999px;
}
.lp-skeleton[data-tone='on-ink'] {
  background-color: rgb(255 240 235 / 10%);
  background-image: linear-gradient(
    90deg,
    transparent 35%,
    rgb(255 240 235 / 12%) 50%,
    transparent 65%
  );
  animation: lp-shimmer 1.2s linear 400ms infinite;
}
.lp-loading-stack {
  display: grid;
  gap: 16px;
}
.lp-loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .lp-skeleton,
  .lp-skeleton[data-tone='on-ink'] {
    animation: lp-skeleton-deepen 1ms linear 400ms forwards;
    background-image: none;
  }
}
[data-reduced-motion='true'] .lp-skeleton {
  background-image: none;
}

/* LoadingLink's pending mark (components/app/LoadingLink.tsx) keeps the old
   delay: it only appears once a navigation has taken 400ms, then fades in. The
   doubled specificity and !important keep the delay under the reduced-motion
   rules that switch every animation off inside the shells. */
@keyframes lp-pending-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.lp-brand-body .lp-pending-delayed {
  animation: lp-pending-in 200ms ease 400ms both !important;
}
@media (prefers-reduced-motion: reduce) {
  body.lp-brand-body .lp-pending-delayed {
    animation: lp-pending-in 1ms linear 400ms both !important;
  }
}
/* LoadingLink's pending mark sits at the end of the link, out of flow, so the link
   never widens or wraps. */
.lp-link-pending {
  position: absolute;
  white-space: pre;
}

/* Hostname headings (components/ui/HostHeading.tsx). The host never wraps: its size
   comes inline from its length against the container width (100cqi), clamped between
   --lp-host-min and the page's --lp-host-comfort. Past the floor the middle is cut and
   the registrable end stays. Page rules keep margins, weight and colour on the h1. */
.lp-host-heading {
  container-type: inline-size;
  min-width: 0;
}
.lp-host-heading > .lp-host-title {
  max-width: none;
  overflow-wrap: normal;
}
.lp-host-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}
.lp-host-heading[data-phrase] .lp-host-visual {
  display: inline-flex;
  vertical-align: bottom;
}
/* A host in running UI (HostText): the same middle cut, inline. */
.lp-host-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}
.lp-host-line {
  display: flex;
  min-width: 0;
  max-width: 100%;
}
/* The padding keeps descenders clear of the ellipsis clip; the margin gives it back. */
.lp-host-head,
.lp-host-tail {
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.lp-host-head {
  flex: 0 1 auto;
  /* Never a sliver of the first letter: at least "w…" shows. */
  min-width: min(2.5ch, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The registrable end never shrinks; only a tail wider than the column is cut. */
.lp-host-tail {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reserve the visible prefix when a long registrable tail fills the column. */
.lp-host-head + .lp-host-tail {
  max-width: calc(100% - min(2.5ch, 100%));
}

/* Site identity (components/ui/SiteIcon.tsx): the site's favicon on a raised
   tile, or the first letter of its name when there is none to show. */
.lp-site-icon {
  --lp-site-icon: 32px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--lp-site-icon);
  height: var(--lp-site-icon);
  overflow: hidden;
  /* Round and lowercase on purpose: square capital tiles are grades. */
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-mono), 'JetBrains Mono', monospace;
  font-size: calc(var(--lp-site-icon) * 0.44);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.lp-site-icon-letter {
  text-transform: lowercase;
}
.lp-site-icon[data-size='20'] {
  --lp-site-icon: 20px;
}
.lp-site-icon[data-size='40'] {
  --lp-site-icon: 40px;
}
.lp-site-icon[data-size='48'] {
  --lp-site-icon: 48px;
  box-shadow: var(--shadow-lift-1);
}
.lp-site-icon img {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  object-fit: contain;
  opacity: 0;
}
.lp-site-icon[data-state='loaded'] img {
  opacity: 1;
}
.lp-site-icon[data-state='loaded'] .lp-site-icon-letter {
  visibility: hidden;
}
/* A host heading with its icon: the icon sits on the name's line, and the row
   carries the heading's outer margins. */
.lp-site-host {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-width: 0;
  margin: 16px 0 20px;
}
.lp-site-host > .lp-host-heading {
  flex: 1;
}
.lp-site-host .lp-host-heading > .lp-host-title {
  margin-block: 0;
}
.lp-site-host > .lp-site-icon {
  margin-bottom: 0.2em;
}
@media (max-width: 480px) {
  .lp-site-host {
    gap: 12px;
  }
  .lp-site-host > .lp-site-icon[data-size='48'] {
    --lp-site-icon: 36px;
  }
}

/* Public language picker shares the product's quiet pill and menu surfaces. */
.lp-language-picker {
  display: inline-flex;
  flex: none;
}
.lp-language-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  max-width: 220px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 14px / 1.2 var(--lp-t-sans);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.lp-language-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-language-trigger > svg {
  flex: none;
}
.lp-language-trigger:is(:hover, [aria-expanded='true']) {
  background: rgb(var(--tint-rgb) / 8%);
}
.lp-language-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .lp-language-trigger {
    max-width: 180px;
    padding-inline: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-language-trigger {
    transition: none;
  }
}
[data-reduced-motion='true'] .lp-language-trigger {
  transition: none;
}

/* apps/web-app/app/lander-presence.css */
/* Marketing presence: larger type, tactile actions, original lock choreography. */
.landing-view .platform-header {
  gap: 32px;
  min-height: 104px;
  height: auto;
  padding-block: 20px;
}
.landing-view .platform-header img {
  width: 148px;
}
.landing-view .platform-header nav {
  gap: 26px;
}
.landing-view .platform-header nav a {
  font-size: 18px;
  font-weight: 550;
  position: relative;
}
.landing-view .platform-header nav a::after {
  content: '';
  height: 2px;
  background: currentColor;
  position: absolute;
  bottom: 5px;
  inset-inline: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.landing-view .platform-header nav a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}
.landing-view .platform-account {
  gap: 16px;
  font-size: 17px;
  font-weight: 550;
}
.landing-view .platform-account > a:not(.lp-playful-cta) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.landing-view .platform-account > button,
.landing-view .platform-account > div > button {
  font: inherit;
  min-height: 44px;
}
.landing-view .platform-account [role='listbox'] {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
  font-family: var(--font-archivo), sans-serif;
}
.landing-view .platform-account [role='listbox'] button {
  color: var(--text);
  font: inherit;
  min-height: 48px;
}
.landing-view .platform-account [role='option'][aria-selected='true'] button {
  background: var(--surface-1);
}
.landing-view .platform a.lp-playful-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 76px;
  border: 2px solid var(--action-bg);
  border-radius: 999px;
  padding: 10px 10px 10px 30px;
  background: var(--action-bg);
  color: var(--action-fg);
  font-family: var(--font-archivo), sans-serif;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.025em;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.3),
    box-shadow 0.35s,
    color 0.2s;
}
.lp-playful-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface-2);
  clip-path: circle(0 at calc(100% - 36px) 50%);
  transition: clip-path 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.landing-view .platform a.lp-playful-cta:is(:hover, :focus-visible) {
  color: var(--text);
  transform: translateY(-4px);
  box-shadow: 0 6px 0 var(--shadow-color);
}
.lp-playful-cta:is(:hover, :focus-visible)::before {
  clip-path: circle(150% at calc(100% - 36px) 50%);
}
.landing-view .platform a.lp-playful-cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--shadow-color);
}
.lp-cta-label {
  display: block;
  position: relative;
  overflow: hidden;
  line-height: 1.3;
}
.lp-cta-label > span {
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-cta-label > span[aria-hidden] {
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
}
.lp-playful-cta:is(:hover, :focus-visible) .lp-cta-label > span {
  transform: translateY(-100%);
}
.lp-cta-arrow {
  display: block;
  position: relative;
  overflow: hidden;
  width: 52px;
  height: 52px;
  flex: none;
  background: var(--surface-2);
  color: var(--text);
  border-radius: 50%;
  transition:
    background 0.25s,
    color 0.25s;
}
.lp-cta-arrow > svg {
  position: absolute;
  inset: 13px;
  width: 26px;
  height: 26px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-cta-arrow > svg:last-child {
  transform: translate(-150%, 150%);
}
.lp-playful-cta:is(:hover, :focus-visible) .lp-cta-arrow {
  background: var(--action-bg);
  color: var(--action-fg);
}
.lp-playful-cta:is(:hover, :focus-visible) .lp-cta-arrow > svg:first-child {
  transform: translate(150%, -150%);
}
.lp-playful-cta:is(:hover, :focus-visible) .lp-cta-arrow > svg:last-child {
  transform: translate(0, 0);
}
.landing-view .platform a.lp-cta-compact {
  font-size: 17px;
  min-height: 54px;
  gap: 14px;
  padding: 6px 6px 6px 20px;
}
.lp-cta-compact .lp-cta-arrow {
  width: 38px;
  height: 38px;
}
.lp-cta-compact .lp-cta-arrow > svg {
  width: 22px;
  height: 22px;
  inset: 8px;
}
.landing-view .unlock-sample {
  font-size: 18px;
  font-weight: 550;
  min-height: 48px;
}
.hero-journey {
  position: relative;
}
.hero-journey .lander-hero {
  padding-top: 32px;
  gap: 32px;
}
.hero-journey .lander-hero h1 {
  font-size: clamp(54px, 5.6vw, 86px);
}
.hero-journey .lander-hero-copy > p:not(.pilot-note) {
  font-size: 22px;
  line-height: 1.5;
}
.hero-journey .lander-hero .pilot-note {
  font-size: 14px;
}
.interactive-lock {
  --lock-x: 0deg;
  --lock-y: 0deg;
  position: relative;
}
.lock-hit-area {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 40%;
  touch-action: pan-y;
}
.lock-sculpture {
  display: block;
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 500px;
  margin: auto;
  transform: perspective(900px) rotateX(var(--lock-x)) rotateY(var(--lock-y));
  transition: transform 0.2s ease-out;
}
.lock-poster,
.lock-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mask-image: radial-gradient(ellipse at center, #000 53%, transparent 73%);
}
.lock-canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.interactive-lock[data-lock-motion='full'] .lock-canvas[data-ready='true'] {
  opacity: 1;
}
.interactive-lock[data-lock-motion='full']:has(.lock-canvas[data-ready='true'])
  .lock-poster {
  visibility: hidden;
}
.landing-view .lander-receipt {
  margin: 0;
  padding: 26px 28px;
  gap: 14px;
  border-radius: 12px;
  background: var(--surface-1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s;
}
.landing-view .lander-receipt:is(:hover, :focus-visible) {
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: 5px 6px 0 var(--shadow-color);
  background: var(--surface-2);
}
.lander-receipt .receipt-eyebrow {
  font-family: var(--font-archivo), sans-serif;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}
.lander-receipt strong {
  font-family: var(--font-archivo), sans-serif;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.1;
  max-width: 18ch;
}
.lander-receipt > span:last-child {
  font-size: 18px;
  font-weight: 550;
}
.lander-receipt > span:last-child svg {
  margin-left: auto;
  width: 28px;
  height: 28px;
  transition: transform 0.3s;
}
.lander-receipt:is(:hover, :focus-visible) > span:last-child svg {
  transform: translate(3px, -3px);
}
.landing-view .findings-counter {
  padding: 44px 0;
  min-height: 210px;
}
.landing-view .counter-value {
  font-family: var(--font-archivo), sans-serif;
  font-size: clamp(60px, 9vw, 116px);
  font-weight: 750;
  letter-spacing: -0.07em;
}
.landing-view .counter-reading h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
}
.landing-view .counter-reading p {
  font-size: 16px;
}
@media (min-width: 901px) and (min-height: 651px) {
  .hero-journey[data-lock-motion='full'] {
    min-height: 175svh;
  }
  .hero-journey[data-lock-motion='full'] .lander-hero {
    position: sticky;
    top: 0;
    min-height: 100svh;
    padding-block: 24px 40px;
  }
}
@media (max-width: 1250px) {
  .landing-view .platform-header {
    flex-wrap: wrap;
    gap: 10px 24px;
  }
  .landing-view .platform-header nav {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 32px;
  }
  .landing-view .platform-account {
    margin-left: auto;
  }
  .hero-journey .lander-hero h1 {
    font-size: clamp(48px, 5.6vw, 70px);
  }
  .hero-journey .lander-hero-copy > p:not(.pilot-note) {
    font-size: 20px;
  }
}
@media (max-width: 900px) {
  .hero-journey .lander-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-journey .lander-hero-visual {
    width: 100%;
    max-width: 500px;
    justify-self: center;
  }
  .hero-journey .lander-hero h1 {
    font-size: clamp(46px, 7.6vw, 72px);
  }
  .landing-view .platform .platform-header a.lp-cta-compact {
    display: none;
  }
  .lock-sculpture {
    max-width: 400px;
  }
}
@media (max-width: 580px) {
  .landing-view .platform-header {
    padding-block: 16px 8px;
  }
  .landing-view .platform-header img {
    width: 120px;
  }
  .landing-view .platform-header nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 20px;
  }
  .landing-view .platform-header nav a {
    font-size: 16px;
  }
  .landing-view .platform-account {
    gap: 10px;
    font-size: 16px;
  }
  .landing-view .platform-account > div > button {
    padding-inline: 8px;
    font-size: 14px;
  }
  .hero-journey .lander-hero {
    padding-top: 28px;
  }
  .hero-journey .lander-hero h1 {
    font-size: clamp(42px, 10.5vw, 60px);
  }
  .landing-view .platform a.lp-playful-cta {
    font-size: 20px;
    min-height: 68px;
    gap: 20px;
    padding-left: 24px;
    max-width: 100%;
  }
  .lp-cta-arrow {
    width: 44px;
    height: 44px;
  }
  .lp-cta-arrow > svg {
    inset: 10px;
    width: 24px;
    height: 24px;
  }
  .landing-view .unlock-sample {
    font-size: 17px;
  }
  .landing-view .lander-receipt {
    padding: 24px;
  }
  .landing-view .counter-reading {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-journey[data-lock-motion='full'] {
    min-height: 0;
  }
  .hero-journey[data-lock-motion='full'] .lander-hero {
    position: static;
    min-height: 0;
  }
  .lock-sculpture {
    transform: none;
  }
  .lp-cta-label > span,
  .lp-cta-arrow > svg {
    transition: none;
  }
  .lp-playful-cta:is(:hover, :focus-visible) .lp-cta-label > span {
    transform: none;
  }
  .landing-view .platform a.lp-playful-cta:is(:hover, :focus-visible),
  .landing-view .lander-receipt:is(:hover, :focus-visible) {
    transform: none;
  }
}
[data-reduced-motion='true'] .lock-sculpture {
  transform: none;
}
[data-reduced-motion='true']
  .lp-playful-cta:is(:hover, :focus-visible)
  .lp-cta-label
  > span {
  transform: none;
}
[data-reduced-motion='true'] .lp-playful-cta,
[data-reduced-motion='true'] .lp-playful-cta *,
[data-reduced-motion='true'] .lp-playful-cta::before,
[data-reduced-motion='true'] .lander-receipt {
  transition: none !important;
}
/* Crop only the empty padding in the source art, preserving a generous lock. */
.lock-sculpture {
  aspect-ratio: auto;
  height: min(44svh, 380px);
}
.lock-poster,
.lock-canvas {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
}
@media (min-width: 901px) and (min-height: 651px) {
  .hero-journey[data-lock-motion='full'] .lander-hero {
    min-height: calc(100svh - 104px);
  }
}
@media (max-width: 580px) {
  .lock-sculpture {
    height: 300px;
  }
}
.landing-view .counter-reading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.landing-view .counter-value {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.landing-view .counter-value > span {
  flex-wrap: nowrap;
}
@media (max-width: 900px) {
  .landing-view .counter-reading {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
[data-reduced-motion='true']
  .platform
  a.lp-playful-cta:is(:hover, :focus-visible),
[data-reduced-motion='true'] .lander-receipt:is(:hover, :focus-visible) {
  transform: none;
}
.landing-view .pulse-offer-card > .pilot-note {
  margin-bottom: 24px;
}

/* apps/web-app/app/public-chrome.css */
/* The public frame every public page shares: the `.landing-v3` type scale,
   the header (navigation, Resources, account, menus and the primary action)
   and the ink footer. Pages that only frame their own content with it (the
   quick check, docs, content pages and the 404) load this sheet alone; the
   landing and the marketing pages add lander-v3.css and hero-live-lock.css,
   which load after it. Keep header and footer rules here, page rules there. */
body:has(.landing-v3) .lp-global-header {
  display: none;
}
.landing-v3 {
  --v3-display: clamp(52px, 6.6vw, 104px);
  color: var(--text);
  font-family: var(--font-archivo), sans-serif;
  padding: 0 64px;
}
.landing-v3 :is(h1, h2, h3, p) {
  margin: 0;
}
.landing-v3 h1 {
  font-size: var(--v3-display);
  line-height: 0.99;
  font-weight: 750;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.landing-v3 h1 span {
  display: block;
}
.landing-v3 h2 {
  font-size: clamp(36px, 4.1vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 750;
  text-wrap: balance;
}
.landing-v3 h3 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.landing-v3 p {
  font-size: 17px;
  line-height: 1.55;
  max-width: 52ch;
}
.landing-v3 .v3-lead {
  font-size: 22px;
  line-height: 1.45;
  max-width: 34ch;
}
.landing-v3 a {
  color: inherit;
  text-decoration: none;
}
.landing-v3 :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}
.v3-header {
  min-height: 104px;
  display: flex;
  gap: 32px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.v3-header > a {
  flex: none;
}
.v3-header img {
  width: 148px;
  height: auto;
}
.v3-header .lp-product-nav {
  margin: 0 auto;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.v3-header .lp-product-nav a {
  font-size: 16px;
  font-weight: 500;
}
/* Resources: a disclosure in the header row, opening a two-column panel on
   the raised surface. The panel keeps its ink text on the ink header too. */
.v3-header .v3-public-nav {
  align-items: center;
}
.v3-header .lp-product-nav > a[aria-current='page'],
.v3-resources-trigger[data-current] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.v3-resources {
  position: relative;
}
.v3-resources-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.v3-resources-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.v3-resources-trigger[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.v3-account {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 16px;
}
.landing-v3 .v3-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 64px;
  padding: 16px 28px;
  border: 1px solid var(--action-bg);
  border-radius: 999px;
  background: var(--action-bg);
  color: var(--action-fg);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;
  width: fit-content;
}
.v3-cta svg {
  width: 24px;
  height: 24px;
  flex: none;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .v3-cta:hover svg {
    transform: translate(3px, -3px);
  }
}
.landing-v3 .v3-cta-compact {
  min-height: 44px;
  font-size: 16px;
  gap: 16px;
  padding: 10px 20px;
}
.landing-v3 .v3-cta-inverse {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--surface-2);
}
.v3-skip {
  position: absolute;
  top: -200px;
  left: 24px;
  z-index: 10;
  padding: 16px;
  background: var(--action-bg);
  color: var(--action-fg) !important;
}
.v3-account .v3-menu {
  display: none;
}
.v3-menu-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-solid);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.v3-menu-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.v3-header[data-theme='ink'] .v3-menu-button {
  border-color: var(--brand-on-ink);
}
.v3-menu-button[aria-expanded='true'] {
  background: var(--emphasis-bg);
  color: var(--emphasis-fg);
}
.v3-header[data-theme='ink'] .v3-menu-button[aria-expanded='true'] {
  background: var(--brand-on-ink);
  color: var(--brand-ink);
}
.v3-skip:focus {
  top: 16px;
}
@media (max-width: 1100px) {
  .landing-v3 {
    padding: 0 32px;
  }
  .v3-header {
    gap: 24px;
  }
  .v3-header .lp-product-nav {
    gap: 16px;
  }
  .v3-account .v3-cta {
    display: none;
  }
}
/* Under 900px the four header links no longer fit beside the account and the
   primary action, so the navigation moves into the menu (the account menu
   when signed in). One row: wordmark, then the account or the menu, and the
   primary action. */
@media (max-width: 899px) {
  .v3-header {
    justify-content: space-between;
    gap: 12px;
  }
  .v3-header .lp-product-nav,
  .v3-account .v3-sign-in,
  .v3-account .v3-theme-toggle {
    display: none;
  }
  .v3-account {
    gap: 8px;
  }
  .v3-account .v3-menu {
    display: block;
  }
  /* Menus open under the header at its right gutter, not under their button,
     which can sit mid-row and push a menu off the left edge. */
  .landing-v3 .v3-header .lp-account {
    position: static;
  }
  .landing-v3 .v3-header .lp-account-menu {
    top: calc(100% + 8px);
    right: var(--v3-gutter, 24px);
    width: min(320px, calc(100vw - 2 * var(--v3-gutter, 24px)));
  }
}
@media (max-width: 767px) {
  .landing-v3 {
    padding: 0 24px;
    --v3-display: 52px;
  }
  .v3-header {
    min-height: 72px;
    padding-block: 12px;
  }
  .v3-header img {
    width: 112px;
  }
  .landing-v3 .v3-lead {
    font-size: 19px;
  }
  .landing-v3 .v3-cta {
    min-height: 56px;
    font-size: 18px;
    padding: 14px 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3 *,
  .landing-v3 *::before,
  .landing-v3 *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
.landing-v3[data-reduced-motion='true'] *,
.landing-v3[data-reduced-motion='true'] *::before,
.landing-v3[data-reduced-motion='true'] *::after {
  transition: none !important;
  animation: none !important;
}
.v3-footer {
  padding: 32px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}
.v3-footer img {
  width: 132px;
  height: auto;
}
/* Its own row under the wordmark, starting on the same 64px margin. */
.v3-footer-links {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.landing-v3 .v3-footer p {
  font-size: 14px;
  flex-basis: 100%;
  max-width: none;
}
.v3-footer button {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none;
}
.v3-footer .v3-footer-legal {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  font-size: 14px;
}
.v3-footer .v3-footer-legal > * {
  white-space: nowrap;
}
/* The row reads the same; each link answers to a 24px tall target, which a
   14px line alone does not give. */
.v3-footer .v3-footer-legal :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
/* Cookie settings is a button that reads as the links beside it. */
.v3-footer .v3-footer-legal .v3-footer-cookie {
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
@media (max-width: 767px) {
  .v3-footer {
    gap: 24px;
  }
  /* Five links (Pricing, Terms, Privacy, Methodology, Sign in) wrap on phones
     instead of breaking a label across lines. */
  .v3-footer-links {
    margin-left: 0;
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 24px;
  }
  .v3-footer-links a {
    white-space: nowrap;
  }
}
/* Narrow phones: the primary action drops its key disc so the header row
   still fits the wordmark, the action and the menu or account disc. */
@media (max-width: 399px) {
  .landing-v3 .v3-header .v3-account .v3-cta {
    padding-inline: 16px;
  }
  .landing-v3 .v3-header .v3-account .v3-cta-key {
    display: none;
  }
}
@media (max-width: 359px) {
  body .landing-v3 {
    --v3-gutter: 16px;
    padding-inline: 16px;
  }
  body .landing-v3 .v3-header img {
    width: 96px;
  }
}

/* ---------- chapters, the sticky header and the primary action's keyhole ---------- */
.landing-v3 {
  --v3-gutter: 64px;
  /* The lock footage's own background (brand.css), so its frame edge stays invisible. */
  --v3-lock-coral: var(--lock-stage);
  --v3-header-h: 104px;
}
/* The footer is the page's last chapter, full bleed in ink. The landing's own
   chapters (the same rules for every [data-chapter]) are in hero-live-lock.css. */
.landing-v3 .v3-footer[data-chapter='ink'] {
  --border: rgb(255 240 235 / 16%);
  --border-strong: rgb(255 240 235 / 34%);
  --border-boundary: rgb(255 240 235 / 34%);
  margin-inline: calc(var(--v3-gutter) * -1);
  padding-inline: var(--v3-gutter);
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.landing-v3 .v3-footer {
  border-top: 0;
  padding-block: 48px;
}
.landing-v3 .v3-footer button {
  color: var(--text-inverse);
}

/* ---------- sticky header that follows the chapter behind it ---------- */
.landing-v3 .v3-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-inline: calc(var(--v3-gutter) * -1);
  padding-inline: var(--v3-gutter);
  background: var(--v3-lock-coral);
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}
.v3-header .v3-wordmark-ink {
  display: var(--display-light);
}
.v3-header .v3-wordmark-white {
  display: var(--display-dark);
}
.landing-v3 .v3-header[data-theme='ink'] {
  --border: rgb(255 240 235 / 16%);
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.v3-header[data-theme='ink'] .v3-wordmark-ink {
  display: none;
}
.v3-header[data-theme='ink'] .v3-wordmark-white {
  display: block;
}
.v3-header[data-theme='ink'] .v3-cta {
  background: var(--brand-on-ink);
  border-color: var(--brand-on-ink);
  color: var(--brand-ink);
}
.landing-v3 .v3-header[data-theme='raised'] {
  background: var(--surface-2);
}
/* The primary action stays reachable at every width. */
.landing-v3 .v3-account .v3-cta {
  display: inline-flex;
}
/* The homepage keeps the header's pill out of sight while the hero form
   shows (Header, ctaMode 'afterHero'), then lets it settle in. */
.landing-v3 .v3-header-cta > .v3-cta {
  transition:
    opacity 240ms var(--lp-ease-out, ease-out),
    transform 240ms var(--lp-ease-out, ease-out),
    visibility 0s,
    background-color 0.2s ease,
    color 0.2s ease;
}
.landing-v3 .v3-header-cta[data-hidden] > .v3-cta {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 180ms ease-in,
    transform 180ms ease-in,
    visibility 0s 180ms;
}

/* ---------- primary action: black pill with a graphite keyhole disc ---------- */
.landing-v3 .v3-cta {
  padding-right: 14px;
}
.v3-cta-key {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  aspect-ratio: 1;
  align-self: center;
  border-radius: 50%;
  background: url('/blog/_assets/keyhole-button.a549057d0ad9.webp')
    center / cover;
  /* Machined rim: a chrome catch-light above, a dark seat below. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 35%),
    inset 0 -2px 3px rgb(0 0 0 / 45%),
    0 0 0 1px rgb(255 255 255 / 14%);
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.landing-v3 .v3-cta-compact {
  padding-right: 10px;
}
.landing-v3 .v3-cta-compact .v3-cta-key {
  flex-basis: 26px;
  min-width: 26px;
  max-width: 26px;
  width: 26px;
  height: 26px;
}
@media (hover: hover) {
  .v3-cta:hover .v3-cta-key {
    transform: rotate(-90deg);
  }
}
.v3-cta:focus-visible .v3-cta-key {
  transform: rotate(-90deg);
}

/* A long label with a narrow-screen twin (the header's "Your dashboard"). */
.v3-cta-short {
  display: none;
}
.landing-v3 .v3-header .v3-cta {
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .v3-cta .v3-cta-long {
    display: none;
  }
  .v3-cta .v3-cta-short {
    display: inline;
  }
}

@media (max-width: 1100px) {
  .landing-v3 {
    --v3-gutter: 32px;
  }
}
@media (max-width: 767px) {
  .landing-v3 {
    --v3-gutter: 24px;
    --v3-header-h: 0px;
  }
  .landing-v3 .v3-header img {
    width: 112px;
    height: auto;
    flex: none;
  }
  .landing-v3 .v3-header .v3-cta {
    min-height: 40px;
    gap: 10px;
    padding: 6px 9px 6px 16px;
    font-size: 15px;
    white-space: nowrap;
  }
  .landing-v3 .v3-header .v3-cta-key {
    flex-basis: 26px;
    min-width: 26px;
    max-width: 26px;
    width: 26px;
    height: 26px;
  }
  .landing-v3 .v3-account {
    gap: 12px;
  }
  /* Once scrolling, the header collapses to one row: wordmark, sign in, action. */
  .landing-v3 .v3-header[data-scrolled='true'] {
    min-height: 0;
    padding-block: 12px;
  }
  .v3-header[data-scrolled='true'] .lp-product-nav {
    display: none;
  }
}

@media (max-width: 899px) {
  .v3-account .lp-language-desktop {
    display: none;
  }
}

@media (max-width: 767px) {
  .landing-v3 .v3-account {
    min-width: 0;
    gap: 8px;
  }
  .landing-v3 .v3-header .v3-cta {
    min-width: 0;
    flex-shrink: 1;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
}

/* apps/web-app/app/buttons.css */
/* Button system (components/ui/LpButton.tsx). Shared variants use one motion
   language with the landing's keyhole CTA: fine ink edges, the
   spring ease on the disc, no blur and no glow.

   primary    ink pill, optional keyhole disc that turns like a key. One per screen.
   secondary  raised pill with a fine ink edge and a restrained lift.
   ghost      transparent pill; a raised fill slides in from the left.
   link       compact outlined action; its icon nudges on hover.

   Legacy classes are mapped onto the variants here, so every existing callsite
   gains the same character without being rewritten:
   .lp-button, .lp-qc-primary, .lp-auth-submit and the utility primary
   (bg-blue-*) take the primary look without the disc; .lp-secondary and the
   share pills take secondary; .lp-text-button is the link. */

.lp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--border-solid);
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* A full-width pill cannot grow, so a label longer than the container (a
   narrow phone, a longer translation) wraps onto a second line instead of
   running past the edge. Labels that fit stay on one line. */
.lp-btn-block {
  width: 100%;
  white-space: normal;
}
.lp-btn-block .lp-btn-label {
  text-wrap: balance;
}
.lp-btn-label {
  min-width: 0;
}
.lp-btn > svg,
.lp-btn-icon {
  flex: none;
}

/* ---------- primary ---------- */
.lp-btn-primary {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1.05rem;
}
.lp-btn-primary.lp-btn-lg {
  min-height: 64px;
  padding: 0 32px;
  gap: 24px;
  font-size: 1.2rem;
}
.lp-btn-primary[data-keyhole] {
  padding-right: 9px;
}
.lp-btn-primary.lp-btn-lg[data-keyhole] {
  padding-right: 13px;
}
.lp-btn-primary[data-keyhole].lp-btn-block {
  justify-content: space-between;
  padding-left: 24px;
  text-align: left;
}
/* Room above and below when a long label wraps; one-line pills keep their
   min-height, so nothing moves for them. */
.lp-btn-block:is(.lp-btn-primary, .lp-btn-secondary, .lp-btn-ghost) {
  padding-block: 6px;
}
/* The disc is cut from the lock's own face, as on the landing (.v3-cta-key). */
.lp-btn-key {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: url('/blog/_assets/keyhole-button.a549057d0ad9.webp')
    center / cover;
  /* Machined rim: a chrome catch-light above, a dark seat below. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 35%),
    inset 0 -2px 3px rgb(0 0 0 / 45%),
    0 0 0 1px rgb(255 255 255 / 14%);
  transition: transform 0.45s var(--lp-ease-spring);
}
.lp-btn-lg .lp-btn-key {
  width: 38px;
  height: 38px;
}
@media (hover: hover) {
  .lp-btn:hover:not(:disabled, [aria-disabled='true']) .lp-btn-key {
    transform: rotate(-90deg);
  }
}
.lp-btn:focus-visible .lp-btn-key {
  transform: rotate(-90deg);
}

:is(
  .lp-btn-primary,
  .lp-button,
  .lp-qc-primary,
  .lp-auth-submit,
  .lp-shell :is(button, a)[class*='bg-blue-']
) {
  border: 1px solid var(--action-bg);
  background-color: var(--action-bg);
  color: var(--action-fg);
  box-shadow: inset 0 1px 0 rgb(255 240 235 / 12%);
  transition:
    transform 180ms var(--lp-ease-out),
    box-shadow 180ms var(--lp-ease-out),
    background-color 180ms ease;
}
/* Lifting an ink pill over an ink shadow reads as depth only if the face
   lightens a touch, so the edge below shows as its side. */
:is(
    .lp-btn-primary,
    .lp-button,
    .lp-qc-primary,
    .lp-auth-submit,
    .lp-shell :is(button, a)[class*='bg-blue-']
  ):is(:hover, :focus-visible):not(:disabled, [aria-disabled='true']) {
  background-color: var(--action-hover);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgb(255 240 235 / 18%),
    0 3px 0 rgb(var(--shadow-rgb) / 18%);
}

/* ---------- secondary ---------- */
:is(.lp-btn-secondary, .lp-secondary, .lp-share-primary, .lp-share-option) {
  border: 1px solid var(--border-strong);
  background-color: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgb(255 240 235 / 24%);
  transition:
    transform 160ms var(--lp-ease-out),
    box-shadow 160ms var(--lp-ease-out),
    background-color 160ms ease;
}
:is(.lp-btn-secondary, .lp-secondary, .lp-share-primary, .lp-share-option):is(
    :hover,
    :focus-visible
  ):not(:disabled, [aria-disabled='true']) {
  background-color: var(--surface-2);
  border-color: var(--border-solid);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgb(var(--shadow-rgb) / 14%);
}

/* Pressed: every lifting variant sits flat on its shadow edge. */
:is(
    .lp-btn-primary,
    .lp-btn-secondary,
    .lp-button,
    .lp-secondary,
    .lp-qc-primary,
    .lp-auth-submit,
    .lp-share-primary,
    .lp-share-option,
    .lp-shell :is(button, a)[class*='bg-blue-']
  ):active:not(:disabled, [aria-disabled='true']) {
  transform: translateY(1px);
  box-shadow: none;
  transition-duration: 60ms;
}

/* ---------- ghost ---------- */
.lp-btn-ghost {
  border-color: var(--border-boundary);
  background: linear-gradient(var(--surface-2) 0 0) left / 0% 100% no-repeat;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    background-size 220ms var(--lp-ease-out),
    border-color 160ms ease;
}
.lp-btn-ghost:is(:hover, :focus-visible):not(
    :disabled,
    [aria-disabled='true']
  ) {
  border-color: var(--border-solid);
  background-size: 100% 100%;
}

/* ---------- link ---------- */
/* Product actions remain anchors when they navigate, with a visible hit area
   and the same edge treatment as buttons. Prose/navigation links are separate. */
:is(.lp-btn-link, .lp-text-button, .lp-site-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms var(--lp-ease-out);
}
:is(.lp-btn-link, .lp-text-button, .lp-site-link):is(
    :hover,
    :focus-visible
  ):not(:disabled, [aria-disabled='true']) {
  border-color: var(--border-solid);
  background-color: var(--surface-2);
  transform: translateY(-1px);
}
:is(.lp-btn-link, .lp-text-button, .lp-site-link):active:not(
    :disabled,
    [aria-disabled='true']
  ) {
  transform: translateY(1px);
}
.lp-btn-link .lp-btn-icon {
  transition: transform 180ms var(--lp-ease-out);
}
.lp-btn-link:is(:hover, :focus-visible) .lp-btn-icon {
  transform: translateX(3px);
}

/* ---------- shared states ---------- */
:is(
  .lp-btn,
  .lp-text-button,
  .lp-site-link,
  .lp-share-primary,
  .lp-share-option
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
/* Busy (aria-busy, set by LpButton's `busy`): the working label shows on the
   usual face, dimmed a little, and a keyhole button's key keeps turning, as
   if picking the lock, until the work is done. */
:is(
  .lp-btn,
  .lp-button,
  .lp-secondary,
  .lp-text-button,
  .lp-site-link,
  .lp-qc-primary,
  .lp-auth-submit
)[aria-busy='true'] {
  cursor: progress;
  opacity: 0.8;
}
.lp-btn[aria-busy='true'] .lp-btn-key {
  animation: lp-key-turn 600ms linear infinite;
}
@keyframes lp-key-turn {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-btn[aria-busy='true'] .lp-btn-key {
    animation: none;
  }
}
[data-reduced-motion='true'] .lp-btn[aria-busy='true'] .lp-btn-key {
  animation: none;
}

/* Unavailable (disabled and not busy): never a dimmed ink pill, which reads as
   muddy brown on coral. Primaries turn into a raised key with muted ink text
   and a dashed edge; secondaries and ghosts lose their fill; links go muted.
   No lift, no hover, `not-allowed`. */
:is(
    .lp-btn-primary,
    .lp-button,
    .lp-qc-primary,
    .lp-auth-submit,
    .lp-shell :is(button, a)[class*='bg-blue-']
  ):is(:disabled, [aria-disabled='true']):not([aria-busy='true']) {
  border: 1px dashed var(--text-muted);
  background-color: var(--surface-2);
  color: var(--text-muted);
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}
:is(.lp-btn-primary, .lp-button):is(:disabled, [aria-disabled='true']):not(
    [aria-busy='true']
  )
  .lp-btn-key {
  filter: grayscale(1);
  opacity: 0.4;
  box-shadow: none;
}
:is(
    .lp-btn-secondary,
    .lp-secondary,
    .lp-btn-ghost,
    .lp-share-primary,
    .lp-share-option
  ):is(:disabled, [aria-disabled='true']):not([aria-busy='true']) {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}
:is(.lp-btn-link, .lp-text-button, .lp-site-link):is(
    :disabled,
    [aria-disabled='true']
  ):not([aria-busy='true']) {
  color: var(--text-muted);
  text-decoration-style: dashed;
  text-decoration-color: var(--border-strong);
  opacity: 1;
  cursor: not-allowed;
}

/* Share control (components/share/ShareButton.tsx): secondary pills, compact, so
   the page's one ink primary action stays dominant. */
.lp-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
}
.lp-share-primary,
.lp-share-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-archivo), Archivo, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
@media (max-width: 480px) {
  .lp-share-primary,
  .lp-share-option {
    padding: 0 14px;
  }
}

/* Segmented controls: the chosen option is a key sitting up off the track. */
.lp-choice input:checked + span,
.lp-qc-dialect-options a[aria-current='page'] {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift-1);
}
.lp-choice span,
.lp-qc-dialect-options a {
  transition:
    background-color 0.18s,
    color 0.18s,
    transform 0.18s var(--lp-ease-out),
    box-shadow 0.18s var(--lp-ease-out);
}

/* ---------- icon-only: a 40px ink disc like the keyhole ---------- */
/* Logout (components/logout-button.tsx) and the compact search trigger. The
   disc is 40px; its hit area reaches 44px. Ink chapters of the landing header
   invert it. */
.lp-icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--action-bg);
  border-radius: 999px;
  background: var(--action-bg);
  color: var(--action-fg);
  box-shadow: var(--shadow-lift-0);
  cursor: pointer;
  transition:
    transform 160ms var(--lp-ease-out),
    box-shadow 160ms var(--lp-ease-out);
}
.lp-icon-button::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
}
.landing-view .platform-account > button.lp-icon-button {
  min-height: 40px;
}
.lp-icon-button svg {
  width: 18px;
  height: 18px;
}
.lp-icon-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift-1);
}
.lp-icon-button:active:not(:disabled) {
  transform: none;
  box-shadow: var(--shadow-lift-0);
}
.lp-icon-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.lp-icon-button:disabled {
  cursor: progress;
  opacity: 0.6;
}
.v3-header[data-theme='ink'] .lp-icon-button {
  border-color: var(--brand-on-ink);
  background: var(--brand-on-ink);
  color: var(--brand-ink);
}
.v3-header[data-theme='ink'] .lp-icon-button:hover:not(:disabled) {
  box-shadow: 0 2px 0 var(--brand-on-ink);
}
.v3-header[data-theme='ink'] .lp-icon-button:focus-visible {
  outline-color: var(--brand-on-ink);
}

/* Workspace search: a ghost pill with its shortcut, a disc on small screens. */
.lp-shell .lp-search-trigger {
  border-color: var(--border-boundary);
  background: linear-gradient(var(--surface-2) 0 0) left / 0% 100% no-repeat;
  color: var(--text);
  transition:
    background-size 220ms var(--lp-ease-out),
    border-color 160ms ease;
}
.lp-shell .lp-search-trigger:is(:hover, :focus-visible) {
  border-color: var(--border-solid);
  background-size: 100% 100%;
}
@media (max-width: 700px) {
  .lp-shell .lp-search-trigger {
    position: relative;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-color: var(--action-bg);
    background: var(--action-bg);
    color: var(--action-fg);
    transition:
      transform 160ms var(--lp-ease-out),
      box-shadow 160ms var(--lp-ease-out);
  }
  .lp-shell .lp-search-trigger::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
  }
  .lp-shell .lp-search-trigger:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift-1);
  }
}

/* ---------- account pill (components/app/AccountMenu.tsx) ---------- */
/* A raised pill with an ink disc carrying the workspace (or person) initial.
   It lifts like a secondary button; its menu is a raised sheet at lift-3. The
   landing header's ink chapters invert it. */
.lp-account {
  position: relative;
}
.lp-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 240px;
  min-height: 44px;
  padding: 3px 14px 3px 3px;
  border: 1px solid var(--border-solid);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-lift-1);
  cursor: pointer;
  transition:
    transform 160ms var(--lp-ease-out),
    box-shadow 160ms var(--lp-ease-out);
}
.lp-account-pill:hover:not(:disabled),
.lp-account-pill[aria-expanded='true'] {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift-2);
}
.lp-account-pill:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: var(--shadow-lift-0);
}
.lp-account-pill:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.lp-account-pill:disabled {
  cursor: progress;
  opacity: 0.6;
}
/* The app top bar shows only the disc; the menu names the person. */
.lp-account-pill--disc {
  padding: 3px;
}
/* The signed-in email heads the app account menu; long ones truncate. */
.lp-account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-account-disc {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--emphasis-bg);
  color: var(--emphasis-fg);
  font-size: 1rem;
  font-weight: 800;
  /* The same machined catch-light as the keyhole disc. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    inset 0 -2px 3px rgb(0 0 0 / 45%);
}
.lp-account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-account-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--lp-ease-out);
}
.lp-account-pill[aria-expanded='true'] .lp-account-chevron {
  transform: rotate(180deg);
}
.lp-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(280px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--border-solid);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-lift-3);
  font-size: 0.9rem;
  text-align: left;
}
.lp-account-group + .lp-account-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.lp-account-heading {
  margin: 0;
  padding: 8px 10px 4px;
  color: var(--text-muted);
  font-family: var(--lp-t-sans);
  font-size: 13px;
  letter-spacing: var(--lp-t-label-tracking);
  text-transform: none;
}
.lp-account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.lp-account-item:is(:hover, :focus-visible),
.lp-account-language:is(:hover, :focus-visible) {
  background: var(--surface-1);
  outline: none;
}
.lp-account-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-account-check {
  flex: none;
  width: 16px;
  height: 16px;
}
.lp-account-error {
  margin: 0;
  padding: 4px 10px 8px;
  font-size: 0.8rem;
}
.lp-account-languages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 0 0 2px;
}
.lp-account-language {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.lp-account-language:is(
  [aria-checked='true'],
  [aria-current='true'],
  [aria-pressed='true']
) {
  border-color: var(--border-solid);
  font-weight: 700;
}
/* A language being saved (LanguageSelector): the group is aria-busy and the
   chosen item reads "Saving…" until the page reloads in it. */
.lp-account-language:disabled {
  cursor: progress;
}
.lp-account-group[aria-busy='true']
  .lp-account-language:not([data-state='saving']) {
  opacity: 0.55;
}
.lp-account-language[data-state='saving'] {
  border-color: var(--border-solid);
  font-weight: 700;
}
/* Signing out (useSignOut): the item stays focusable and reads "Signing out…". */
.lp-account-item[aria-busy='true'] {
  cursor: progress;
}
/* Fingers get 44px rows; a mouse keeps the compact menu. */
@media (pointer: coarse) {
  .lp-account-language {
    min-height: 44px;
  }
}
/* Appearance (components/theme/ThemeMenuChoice.tsx): three choices in a row. */
.lp-account-themes {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr);
}
/* The phone menu's Dark mode item (LandingMenu): a ring that fills when on. */
.lp-account-theme {
  justify-content: space-between;
}
.lp-account-theme::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-solid);
  border-radius: 50%;
}
.lp-account-theme[aria-checked='true']::after {
  border-color: var(--emphasis-bg);
  background: var(--emphasis-bg);
}
/* The sun and moon switch (components/theme/ThemeToggle.tsx): brand.css shows
   the moon in light and the sun in Ember, before hydration. */
.lp-theme-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-theme-icon-moon {
  display: var(--display-light);
}
.lp-theme-icon-sun {
  display: var(--display-dark);
}
.lp-account-signout {
  justify-content: flex-start;
}
/* The icon-only logout disc (.lp-icon-button), at the start of the row. */
.lp-account-signout-disc {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--emphasis-bg);
  color: var(--emphasis-fg);
  transition: transform 160ms var(--lp-ease-out);
}
.lp-account-signout-disc svg {
  width: 16px;
  height: 16px;
}
.lp-account-signout:is(:hover, :focus-visible) .lp-account-signout-disc {
  transform: translateX(2px);
}
/* Product links passed in by the landing header, for phones only. */
.lp-account-links {
  display: none;
}
.lp-account-links + .lp-account-group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* Matches the landing header, whose navigation moves into menus under 900px. */
@media (max-width: 899px) {
  .lp-account-links {
    display: block;
  }
  .lp-account-links + .lp-account-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 560px) {
  /* Phones keep the disc; the name moves into the menu's accessible label. */
  .lp-account-pill {
    padding-right: 10px;
    gap: 6px;
  }
  .lp-account-name {
    display: none;
  }
}
@media (max-width: 480px) {
  /* Just the disc, so the wordmark keeps its size beside the primary action. */
  .lp-account-pill {
    padding: 3px;
  }
  .lp-account-chevron {
    display: none;
  }
}
.v3-header[data-theme='ink'] .lp-account-pill {
  border-color: var(--brand-on-ink);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: 0 2px 0 var(--brand-on-ink);
}
.v3-header[data-theme='ink'] .lp-account-disc {
  background: var(--brand-on-ink);
  color: var(--brand-ink);
}
.v3-header[data-theme='ink'] .lp-account-pill:focus-visible {
  outline-color: var(--brand-on-ink);
}

/* ---------- reduced motion: no transforms, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(
    .lp-btn,
    .lp-btn-key,
    .lp-button,
    .lp-secondary,
    .lp-qc-primary,
    .lp-auth-submit,
    .lp-share-primary,
    .lp-share-option,
    .lp-text-button,
    .lp-site-link,
    .lp-icon-button,
    .lp-search-trigger,
    .lp-account-pill,
    .lp-account-chevron,
    .lp-account-signout-disc,
    .lp-btn-icon,
    .lp-choice span,
    .lp-segment button,
    .lp-qc-dialect-options a,
    .lp-shell :is(button, a)[class*='bg-blue-']
  ) {
    transition: none !important;
    transform: none !important;
  }
}
[data-reduced-motion='true']
  :is(
    .lp-btn,
    .lp-btn-key,
    .lp-button,
    .lp-secondary,
    .lp-qc-primary,
    .lp-auth-submit,
    .lp-share-primary,
    .lp-share-option,
    .lp-text-button,
    .lp-site-link,
    .lp-icon-button,
    .lp-search-trigger,
    .lp-account-pill,
    .lp-account-chevron,
    .lp-account-signout-disc,
    .lp-btn-icon,
    .lp-choice span,
    .lp-segment button,
    .lp-qc-dialect-options a,
    [class*='bg-blue-']
  ) {
  transition: none !important;
  transform: none !important;
}

/* apps/web-app/app/motion.css */
/* Motion primitives. CSS only, no animation runtime. Every primitive here is
   triggered (entering, opening, navigating); the one continuous animation a
   screen may have stays with the lock or the scan. Reduced motion, from the OS
   or AccessibilityConfig ([data-reduced-motion='true']), shows end states. */

/* ---------- Durations ---------- */
/* instant: hover fills and pressed states. quick: menus, popovers, tooltips.
   move: sliding indicators and underlines. panel: sheets, rail, toasts. */
:root {
  --lp-dur-instant: 90ms;
  --lp-dur-quick: 140ms;
  --lp-dur-move: 180ms;
  --lp-dur-panel: 240ms;
}

/* Route content appears at full opacity immediately. Navigation itself is
   feedback; a second entrance animation makes a ready page feel delayed. */

/* ---------- .lp-rise: enter with a 16px rise and a fade ---------- */
/* Stagger with an inline `--i` (0, 1, 2...), capped so long lists never wait.
   The list rises once on load. Where scroll-driven animation exists, items
   further down also rise as they scroll into view: a second animation on
   other properties (`filter`, `transform`), which is already at rest for an
   item on screen at load, so the first screen keeps its staggered rise. */
@keyframes lp-rise {
  from {
    opacity: 0;
    /* `translate`, not `transform`, so hover lifts on the same card still ease. */
    translate: 0 16px;
  }
}
@keyframes lp-rise-scroll {
  from {
    filter: opacity(0);
    transform: translateY(16px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-rise {
    animation: lp-rise 420ms var(--lp-ease-out) both;
    animation-delay: calc(min(var(--i, 0), 8) * 60ms);
  }
  @supports (animation-timeline: view()) {
    .lp-rise {
      animation:
        lp-rise 420ms var(--lp-ease-out) calc(min(var(--i, 0), 8) * 60ms) both,
        lp-rise-scroll auto linear both;
      animation-timeline: auto, view();
      animation-range:
        normal,
        entry 5% entry 90%;
    }
  }
}
[data-reduced-motion='true'] .lp-rise {
  animation: none !important;
}
/* The spotlight tour scrolls the page to each target; entrance animations
   would restyle every card it passes. */
html[data-tour-open] .lp-rise {
  animation: none;
}

/* ---------- .lp-reveal-height: expand without measuring ---------- */
/* On any element: toggle `data-open='true'` (or the `is-open` class) and wrap
   the content in one child. On <details>, the content animates by itself where
   ::details-content exists and opens instantly elsewhere. */
.lp-reveal-height:not(details) {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms var(--lp-ease-out);
}
.lp-reveal-height:not(details) > * {
  min-height: 0;
  overflow: hidden;
}
.lp-reveal-height:is([data-open='true'], .is-open):not(details) {
  grid-template-rows: 1fr;
}
@supports selector(::details-content) {
  details.lp-reveal-height {
    interpolate-size: allow-keywords;
  }
  details.lp-reveal-height::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 260ms var(--lp-ease-out),
      content-visibility 260ms allow-discrete;
  }
  details.lp-reveal-height[open]::details-content {
    block-size: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal-height,
  details.lp-reveal-height::details-content {
    transition: none !important;
  }
}
[data-reduced-motion='true'] .lp-reveal-height,
[data-reduced-motion='true'] details.lp-reveal-height::details-content {
  transition: none !important;
}

/* ---------- route cross-fade ---------- */
/* Full document navigations (the landing and the app are separate root
   layouts) cross-fade in 180ms where cross-document view transitions exist.
   Client-side navigations inside a layout keep BrandLoading; React's
   <ViewTransition> needs Next's experimental React channel, which is not
   worth the risk for a fade. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: var(--lp-ease-out);
  }
}

/* apps/web-app/app/content-pages.css */
/* Public content pages (plan P5.4): /blog, /guides, /checks, /compare and
   /tools on the marketing shell. Brand tokens only (app/brand.css), so the
   pages follow whichever theme the tokens carry. One reading column, thin
   ink rules, Archivo for words and JetBrains Mono for code only. */

/* The shell fills the window, so a short page (an empty section, the 404)
   still has the footer at the bottom. */
.content-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.content-main {
  flex: 1;
}
.content-article {
  max-width: 760px;
  margin: 64px auto 96px;
}
.landing-v3 .content-article h1 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  margin-top: 16px;
}
.landing-v3 .content-article p {
  max-width: none;
}
.landing-v3 .content-lead {
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-muted);
}
.content-crumbs a {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.landing-v3 .content-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}
.landing-v3 .content-byline span {
  color: var(--text);
  font-weight: 650;
}
.landing-v3 .content-bias {
  margin-top: 24px;
  padding: 16px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--lp-surface-1);
}

/* The body: answer first, question headings, readable measure. */
.content-body {
  margin-top: 32px;
}
.landing-v3 .content-body :is(h2, h3, h4) {
  margin-top: 48px;
  letter-spacing: -0.035em;
  line-height: 1.15;
  scroll-margin-top: 96px;
  text-wrap: balance;
}
.landing-v3 .content-body h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 750;
}
.landing-v3 .content-body h3 {
  font-size: 22px;
  font-weight: 700;
}
.landing-v3 .content-body h4 {
  font-size: 18px;
  font-weight: 700;
}
.landing-v3 .content-body p,
.content-body li {
  font-size: 18px;
  line-height: 1.65;
}
.landing-v3 .content-body p {
  margin-top: 16px;
}
.content-body :is(ul, ol) {
  margin-top: 16px;
  padding-left: 24px;
}
.content-body ul {
  list-style: disc;
}
.content-body ol {
  list-style: decimal;
}
.content-body li + li {
  margin-top: 8px;
}
.content-body a,
.content-sources a,
.content-related a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.content-body blockquote {
  margin-top: 24px;
  padding-left: 24px;
  border-left: 2px solid var(--border-solid);
}
.content-body code {
  font-family: var(--font-mono), monospace;
  font-size: 0.88em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--lp-surface-2);
  overflow-wrap: anywhere;
}
.content-code {
  margin-top: 24px;
  padding: 16px 24px;
  border-radius: 16px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  overflow-x: auto;
}
.content-code code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre;
}

/* After the body: FAQ, the one action, related pages, sources, author. */
.content-faq,
.content-cta,
.content-related,
.content-sources,
.content-author {
  margin-top: 64px;
}
.landing-v3
  :is(.content-faq, .content-related, .content-sources, .content-author)
  h2 {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.landing-v3 .content-bias p {
  font-size: 16px;
  line-height: 1.5;
}
.content-faq details {
  border-top: 1px solid var(--border-strong);
  padding: 24px 0;
}
.content-faq details:first-of-type {
  margin-top: 24px;
}
.content-faq summary {
  font-size: 20px;
  font-weight: 650;
  cursor: pointer;
}
.landing-v3 .content-faq details p {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
}
.content-cta {
  padding: 32px;
  border-radius: 24px;
  background: var(--lp-surface-1);
  border: 1px solid var(--border-strong);
}
.landing-v3 .content-cta h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 750;
  letter-spacing: -0.035em;
}
.landing-v3 .content-cta p {
  margin: 16px 0 24px;
}
.content-related ul,
.content-sources ol {
  margin-top: 16px;
  padding-left: 24px;
}
.content-related ul {
  list-style: disc;
}
.content-sources ol {
  list-style: decimal;
}
.content-related li,
.content-sources li {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
}
.content-sources span {
  color: var(--text-muted);
}
.content-author {
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}
.landing-v3 .content-author p {
  margin-top: 8px;
}
.landing-v3 .content-author .content-author-name {
  margin-top: 16px;
  font-weight: 650;
}

/* Section indexes. */
.content-listing {
  margin-top: 48px;
  border-top: 1px solid var(--border-strong);
}
.content-listing li {
  border-bottom: 1px solid var(--border-strong);
}
.content-listing a {
  display: grid;
  gap: 8px;
  padding: 24px 0;
  color: var(--text);
}
.content-listing-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.content-listing a:hover .content-listing-title {
  text-decoration-thickness: 2px;
}
.content-listing-description {
  font-size: 17px;
  line-height: 1.5;
}
.content-listing time {
  font-size: 14px;
  color: var(--text-muted);
}
.landing-v3 .content-empty {
  margin-top: 48px;
  font-size: 18px;
}
.content-missing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
/* The 404 inside the docs shell: the docs' main column, no page gutter. */
.landing-v3.docs-missing {
  grid-area: main;
  padding: 0 var(--docs-gutter, 48px);
}
.docs-missing .content-article {
  margin: 96px 0;
}
@media (max-width: 767px) {
  .landing-v3.docs-missing {
    padding: 0 16px;
  }
  .docs-missing .content-article {
    margin: 40px 0 64px;
  }
}
.landing-v3 .content-empty a {
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.content-loading {
  display: grid;
  gap: 16px;
  padding: 0 24px;
}

@media (max-width: 767px) {
  .content-article {
    margin: 40px auto 64px;
  }
  .landing-v3 .content-lead {
    font-size: 18px;
  }
  .landing-v3 .content-body p,
  .content-body li {
    font-size: 17px;
  }
  .content-cta {
    padding: 24px;
  }
  .content-code {
    padding: 16px;
    margin-inline: -8px;
  }
}

/* The component allowlist: tables, callouts, fix prompts and figures. */
.content-table {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
}
.content-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}
.content-table :is(th, td) {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.content-table thead th {
  font-weight: 700;
  background: var(--lp-surface-1);
  border-bottom: 1px solid var(--border-strong);
}
.content-table tbody th {
  font-weight: 650;
}
.content-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}
/*
 * On a phone a row reads as a card: the row's question, then each value
 * under its column name, so no cell is cut off at the edge.
 */
@media (max-width: 640px) {
  .content-table :is(table, tbody, tr, th, td) {
    display: block;
  }
  .content-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .content-table tbody tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-strong);
  }
  .content-table tbody tr:last-child {
    border-bottom: 0;
  }
  .content-table tbody :is(th, td) {
    padding: 4px 16px;
    border-bottom: 0;
  }
  .content-table tbody th {
    padding-top: 8px;
  }
  .content-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: var(--text-muted);
  }
}
.content-callout {
  margin-top: 24px;
  padding: 16px 24px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: var(--lp-surface-1);
}
.content-callout[data-tone='warning'] {
  border: 2px solid var(--border-solid);
}
.landing-v3 .content-callout p:first-child {
  margin-top: 0;
}
.content-fix-prompt {
  margin-top: 24px;
}
.content-fix-prompt figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 650;
}
/* One tap copies the whole prompt; it answers Copied or Couldn't copy. */
.content-copy {
  flex: none;
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid var(--border-solid);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}
.content-copy:hover,
.content-copy[data-state='copied'] {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.content-copy:focus-visible {
  outline: 2px solid var(--border-solid);
  outline-offset: 2px;
}
.content-fix-prompt pre {
  margin-top: 8px;
  padding: 16px 24px;
  border-radius: 16px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.content-body .content-fix-prompt code {
  padding: 0;
  background: none;
  color: inherit;
  font-family: var(--font-mono), monospace;
  font-size: 14px;
  line-height: 1.6;
}
.content-figure {
  margin-top: 24px;
}
.content-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
}
.content-figure figcaption {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-muted);
}

/* The check catalogue index, grouped (plan P5.3). */
.content-listing-group {
  margin-top: 56px;
}
.landing-v3 .content-listing-group h2 {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.content-listing-group .content-listing {
  margin-top: 16px;
}

/* The compact call to action after a page's first section: one line and a
   secondary pill, so the closing panel stays the page's one dominant action. */
.content-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 40px;
  padding: 16px 16px 16px 24px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: var(--lp-surface-1);
}
.landing-v3 .content-body .content-inline-cta p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.landing-v3 .content-body a.content-inline-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--border-solid);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}
.landing-v3 .content-body a.content-inline-link:hover {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
@media (max-width: 640px) {
  .content-inline-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 20px;
  }
}

/* apps/web-app/app/landing-menu.css */
@media (max-width: 899px) {
  /* The signed-out menu is a sheet across the header's width (LandingMenu). */
  .landing-v3 .v3-header .v3-menu .lp-account-menu {
    left: var(--v3-gutter, 24px);
    width: auto;
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    padding: 8px;
    transform-origin: top center;
    animation: v3-menu-in 200ms var(--lp-ease-out, ease-out) both;
  }
  .v3-menu .v3-menu-more {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4px;
  }
  .v3-menu .lp-account-group.v3-menu-cta-group {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
  }
  /* One black pill, whatever colour the header has taken on behind it. */
  .landing-v3 .v3-header .v3-account .v3-menu .v3-menu-cta {
    display: flex;
    width: 100%;
    min-height: 52px;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px 6px 20px;
    border-color: var(--action-bg);
    background: var(--action-bg);
    color: var(--action-fg);
    font-size: 17px;
  }
  .landing-v3 .v3-header .v3-menu .v3-menu-cta .v3-cta-key {
    display: block;
    flex-basis: 36px;
    min-width: 36px;
    max-width: 36px;
    width: 36px;
    height: 36px;
  }
}
@keyframes v3-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* apps/web-app/app/resources-menu.css */
.v3-resources-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(800px, calc(100vw - 48px));
  padding: 16px;
  border: 1px solid var(--border-solid);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-lift-3);
  transform: translateX(-50%);
}
.v3-resources-panel[hidden] {
  display: none;
}
/* Bridges the gap under the trigger so hover intent survives the move. */
.v3-resources-panel::before {
  content: '';
  position: absolute;
  inset: -13px 0 auto;
  height: 12px;
}
.v3-resources-panel section {
  display: grid;
  align-content: start;
  gap: 4px;
}
.v3-resources-panel .v3-resources-group {
  margin: 0;
  padding: 4px 12px 8px;
  color: var(--text-muted);
  font: var(--lp-t-label);
  letter-spacing: var(--lp-t-label-tracking);
}
.v3-resources-panel ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v3-header .v3-resources-panel a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
.v3-resources-panel a span:first-child {
  font-size: 16px;
  font-weight: 650;
}
.v3-resources-panel a span:last-child {
  color: var(--text-muted);
  font: var(--lp-t-support);
}
.v3-resources-panel a:is(:hover, :focus-visible),
.v3-resources-panel a[aria-current='page'] {
  background: var(--surface-1);
  outline: none;
}
.v3-resources-panel a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--shadow-color);
}

/* apps/web-app/components/language-picker-menu.css */
.lp-language-popup {
  position: fixed;
  inset: auto;
  width: min(224px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 6px 0 rgb(var(--shadow-rgb) / 12%);
  font-family: var(--lp-t-sans);
}
.lp-language-heading {
  margin: 0;
  padding: 6px 10px 10px;
  color: var(--text-muted);
  font: 600 13px / 1.3 var(--lp-t-sans);
}
.lp-language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: 500 14px / 1.3 var(--lp-t-sans);
  text-align: start;
  cursor: pointer;
}
.lp-language-option[aria-checked='true'] {
  background: var(--emphasis-bg);
  color: var(--emphasis-fg);
  font-weight: 650;
}
.lp-language-option:is(:hover, :focus-visible):not([aria-checked='true']) {
  background: rgb(var(--tint-rgb) / 8%);
}
.lp-language-option:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.lp-language-option[aria-checked='true']:focus-visible {
  outline-color: var(--emphasis-fg);
}
.lp-language-option:disabled {
  cursor: progress;
}

/* apps/web-app/app/consent.css */
/* The optional-cookie banner (components/consent). Fixed to the bottom edge
   so it never moves the page; on a phone it spans the width. */
.lp-consent {
  position: fixed;
  /* Above the help launcher and panel: both consent choices must stay reachable. */
  z-index: 70;
  inset-inline: 16px;
  bottom: 16px;
  max-width: 440px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin-inline-start: auto;
  padding: 20px;
  border: 1px solid var(--border-solid);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 8px 0 rgb(var(--shadow-rgb) / 0.12);
}
.lp-consent-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
}
.lp-consent-body,
.lp-consent-status {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.lp-consent-body a {
  color: inherit;
  text-decoration: underline;
}
.lp-consent-status {
  color: var(--text-muted);
}
.lp-consent-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.lp-consent-actions > :only-child {
  grid-column: 1 / -1;
}
.lp-consent-actions .lp-btn {
  white-space: normal;
}