/* lemon-brand.css — LEMON translation of the Vercel vercel-brand.css architecture.
 * Namespaced .lemon-brand primitives for official LEMON-branded documents and
 * reports. All selectors and custom properties are namespaced under
 * :where(.lemon-brand ...). Token values mirror docs/design.md (keep in sync).
 * Independently authored: the anatomy and behaviors translate the Vercel
 * foundation; prose and rules do not. Vercel source:
 * https://vercel.com/geist/vercel-brand.css
 *
 * Wrap the document in <div class="lemon-brand"> and link this file once from
 * the HTML head. Fonts (Plus Jakarta Sans, JetBrains Mono) are loaded by the
 * host page — this file never fetches fonts. LEMON is a light-first brand: the
 * cream canvas is the default reading surface and Deep Navy is the only dark
 * surface, so dark themes are opt-in (data-theme / .dark-theme / a .dark host)
 * rather than an OS default.
 *
 * Two-color lockup note. The LEMON wordmark (yellow dot + black/white
 * wordmark) cannot be reproduced as a currentColor mask, so:
 *   - .lemon-wordmark / .lemon-logo paint the single-color dot mark
 *     (/brand/lemon-mark.svg) through a mask and follow currentColor, for
 *     small mark contexts only.
 *   - The full lockup is an <img class="lemon-logo-img"> (or a non-replaced
 *     element carrying .lemon-wordmark). Its artwork is painted as a CSS
 *     background whose image is a custom property (--lemon-logo-img) so navy
 *     scopes can swap in the white variant without JavaScript. The img src is
 *     a no-stylesheet fallback; while styles apply, the content box collapses
 *     to zero so only the themed background paints.
 */
:where(.lemon-brand) {
  color-scheme: light;

  /* Typefaces — hosts load the fonts; stacks retain system fallbacks. */
  --lemon-font-sans:
    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lemon-font-mono:
    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Brand palette — docs/design.md, value authority. */
  --lemon-navy: #0d1b2a; /* primary — structure, headers, inverted bands */
  --lemon-yellow: #ffd900; /* secondary — the single accent */
  --lemon-canvas: #fffdf7; /* warm cream page ground */
  --lemon-white: #ffffff; /* cards and panels on the canvas */
  --lemon-pale: #fff6d6; /* tertiary — soft warm emphasis */
  --lemon-neutral: #f1f3f5; /* warm gray supporting surfaces */
  --lemon-edge: #ece7d8; /* warm hairline — replaces cool grays */
  --lemon-accent: #8b6700; /* deepened yellow for small text on light */

  /* Semantic surfaces. Plain fallback first, then the light-dark() pair so
   * older engines keep the light theme. Dark = sanctioned Deep Navy surfaces. */
  --lemon-surface-primary: #fffdf7;
  --lemon-surface-primary: light-dark(#fffdf7, #0d1b2a);
  --lemon-surface-secondary: #ffffff;
  --lemon-surface-secondary: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
  /* Contrast fields stay navy in both themes instead of inverting with text. */
  --lemon-surface-contrast: #0d1b2a;

  /* Semantic text. Light secondary is navy ~64% over the canvas; the deepened
   * hex constant is the AA-safe fallback. Dark mirrors white-at-opacity. */
  --lemon-text-primary: #0d1b2a;
  --lemon-text-primary: light-dark(#0d1b2a, #ffffff);
  --lemon-text-secondary: #4c5a66;
  --lemon-text-secondary: light-dark(#4c5a66, rgba(255, 255, 255, 0.64));
  --lemon-text-muted: rgba(13, 27, 42, 0.5);
  --lemon-text-muted: light-dark(
    rgba(13, 27, 42, 0.5),
    rgba(255, 255, 255, 0.5)
  );
  --lemon-text-on-contrast: #ffffff;
  --lemon-text-on-contrast-secondary: rgba(255, 255, 255, 0.64);
  --lemon-text-on-contrast-muted: rgba(255, 255, 255, 0.5);

  /* Hairlines and borders. The warm edge is a light-surface color; navy
   * surfaces use white-at-alpha borders instead. */
  --lemon-border-subtle: #ece7d8;
  --lemon-border-subtle: light-dark(#ece7d8, rgba(255, 255, 255, 0.1));
  --lemon-border-default: rgba(13, 27, 42, 0.12);
  --lemon-border-default: light-dark(
    rgba(13, 27, 42, 0.12),
    rgba(255, 255, 255, 0.12)
  );
  --lemon-border-strong: rgba(13, 27, 42, 0.28);
  --lemon-border-strong: light-dark(
    rgba(13, 27, 42, 0.28),
    rgba(255, 255, 255, 0.3)
  );
  --lemon-border-on-contrast: rgba(255, 255, 255, 0.12);

  /* Focus ring — lemon yellow on both themes. */
  --lemon-focus: #ffd900;
  --lemon-focus: light-dark(#ffd900, #ffd900);

  /* Semantic tone accents. LEMON carries no semaphore palette; meaning is
   * paired with glyphs (check / cross / icons). Info and success use the
   * structural navy on light (the yellow accent role on navy); warning and
   * error use the deepened accent, which is the AA-safe attention color on
   * light grounds. */
  --lemon-color-info: #0d1b2a;
  --lemon-color-info: light-dark(#0d1b2a, #ffd900);
  --lemon-color-success: #0d1b2a;
  --lemon-color-success: light-dark(#0d1b2a, #ffd900);
  --lemon-color-warning: #8b6700;
  --lemon-color-warning: light-dark(#8b6700, #ffd900);
  --lemon-color-error: #8b6700;
  --lemon-color-error: light-dark(#8b6700, #ffd900);

  /* Two-color lockup artwork. Reassigned to the white variant on navy scopes
   * (dark themes and contrast bands) further down. */
  --lemon-logo-img: url("/brand/lemon-logo.svg");

  /* Category series are a monochrome navy ladder by default. Reserve the
   * chromatic token (yellow) for meaning: series-primary and primary bars. */
  --lemon-chart-1: #0d1b2a;
  --lemon-chart-1: light-dark(#0d1b2a, #ffffff);
  --lemon-chart-2: rgba(13, 27, 42, 0.62);
  --lemon-chart-2: light-dark(
    rgba(13, 27, 42, 0.62),
    rgba(255, 255, 255, 0.62)
  );
  --lemon-chart-3: rgba(13, 27, 42, 0.38);
  --lemon-chart-3: light-dark(
    rgba(13, 27, 42, 0.38),
    rgba(255, 255, 255, 0.38)
  );
  --lemon-chart-4: var(--lemon-chart-1);
  --lemon-chart-5: var(--lemon-chart-2);
  --lemon-chart-6: var(--lemon-chart-3);

  /* Spacing scale (px): 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96. */
  --lemon-space-1: 4px;
  --lemon-space-2: 8px;
  --lemon-space-3: 12px;
  --lemon-space-4: 16px;
  --lemon-space-5: 20px;
  --lemon-space-6: 24px;
  --lemon-space-8: 32px;
  --lemon-space-10: 40px;
  --lemon-space-12: 48px;
  --lemon-space-16: 64px;
  --lemon-space-24: 96px;

  /* Radii: sm 4, md 8, lg 12, controls ~10, CTA band 24, pill 9999. */
  --lemon-radius-sm: 4px;
  --lemon-radius: 8px;
  --lemon-radius-lg: 12px;
  --lemon-radius-control: 10px;
  --lemon-radius-marker: 10px;
  --lemon-radius-band: 24px;
  --lemon-radius-pill: 999px;

  /* Type scale — fluid display type per the brand law. */
  --lemon-type-hero: clamp(34px, 4.4vw, 58px);
  --lemon-type-title: clamp(28px, 3.6vw, 42px);
  --lemon-type-lede: 1.125rem;
  --lemon-type-body: 1rem;
  --lemon-type-compact: 0.875rem;
  --lemon-type-label: 0.75rem;
  --lemon-weight-regular: 400;
  --lemon-weight-medium: 500;
  --lemon-weight-semibold: 600;
  --lemon-weight-bold: 700;
  --lemon-weight-extrabold: 800;
  --lemon-leading-body: 1.6;
  --lemon-leading-display: 1.05;
  --lemon-leading-title: 1.1;
  --lemon-leading-lede: 1.6;
  --lemon-leading-compact: 1.5;

  /* Flow rhythm and measures. */
  --lemon-flow-tight: var(--lemon-space-2);
  --lemon-flow-copy: var(--lemon-space-4);
  --lemon-flow-group: var(--lemon-space-8);
  --lemon-flow-section: var(--lemon-space-16);
  --lemon-reading-width: 68ch;
  --lemon-display-measure: 24ch;
  --lemon-title-measure: 26ch;
  --lemon-content-width: 1200px;
  --lemon-chart-min-width: 640px;

  /* Controls. */
  --lemon-control-height: 36px;
  --lemon-control-height-touch: 44px;

  box-sizing: border-box;
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--lemon-surface-primary);
  color: var(--lemon-text-primary);
  font-family: var(--lemon-font-sans);
  font-size: 16px;
  font-weight: var(--lemon-weight-regular);
  line-height: var(--lemon-leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@supports selector(body:has(> .lemon-brand)) {
  body:has(> .lemon-brand) {
    margin: 0;
  }
}
:where(.lemon-brand *, .lemon-brand *::before, .lemon-brand *::after) {
  box-sizing: inherit;
}
/* Published display primitives must never override the HTML hidden state. */
.lemon-brand[hidden],
:where(.lemon-brand) [hidden] {
  display: none !important;
}
/* OS dark preference only applies to scopes that did not choose a theme. */
@media (prefers-color-scheme: dark) {
  :where(
    .lemon-brand[data-theme="auto"]:not(.light-theme):not(.dark-theme),
    .lemon-brand:not([data-theme]):not(.light-theme):not(.dark-theme)
  ) {
    color-scheme: dark;
  }
}
/* Host theme classes override the OS preference without a theme package. */
:where(.light .lemon-brand, .lemon-brand.light) {
  color-scheme: light;
  --lemon-logo-img: url("/brand/lemon-logo.svg");
}
:where(.dark .lemon-brand, .lemon-brand.dark) {
  color-scheme: dark;
  --lemon-logo-img: url("/brand/lemon-logo-white.svg");
}
/* Explicit LEMON themes override host and OS themes. If both classes are
 * present, dark wins. Navy scopes repaint the lockup in white. */
:where(
  .lemon-brand.light-theme,
  .lemon-brand[data-theme="light"]:not(.light-theme):not(.dark-theme)
) {
  color-scheme: light;
  --lemon-logo-img: url("/brand/lemon-logo.svg");
}
:where(
  .lemon-brand.dark-theme,
  .lemon-brand[data-theme="dark"]:not(.light-theme):not(.dark-theme)
) {
  color-scheme: dark;
  --lemon-logo-img: url("/brand/lemon-logo-white.svg");
}
/* Namespaced utility forms of the theme classes — equivalent to applying
 * .light-theme/.dark-theme on the scope element. If both are present, dark
 * wins by source order. */
:where(.lemon-brand.lemon-light-theme) {
  color-scheme: light;
  --lemon-logo-img: url("/brand/lemon-logo.svg");
}
:where(.lemon-brand.lemon-dark-theme) {
  color-scheme: dark;
  --lemon-logo-img: url("/brand/lemon-logo-white.svg");
}
/* Element resets inside the scope. */
:where(.lemon-brand)
  :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote, pre) {
  margin-block-start: 0;
}
:where(.lemon-brand) :where(h1, h2, h3, h4) {
  color: var(--lemon-text-primary);
  font-weight: var(--lemon-weight-extrabold);
  text-wrap: balance;
}
:where(.lemon-brand) .lemon-display,
:where(.lemon-brand) .lemon-title,
:where(.lemon-brand) .lemon-heading-24,
:where(.lemon-brand) .lemon-heading-20,
:where(.lemon-brand) .lemon-heading-16 {
  color: var(--lemon-text-primary);
  font-weight: var(--lemon-weight-extrabold);
  text-wrap: balance;
}
:where(.lemon-brand)
  :where(
    h1,
    h2,
    h3,
    h4,
    .lemon-display,
    .lemon-title,
    .lemon-heading-24,
    .lemon-heading-20,
    .lemon-heading-16
  )
  strong {
  color: inherit;
  font-weight: inherit;
}
:where(.lemon-brand)
  :where(p, li, dd, blockquote, figcaption, .lemon-summary, .lemon-lede)
  strong {
  color: var(--lemon-text-primary);
  font-weight: var(--lemon-weight-semibold);
}
:where(.lemon-brand) :where([id]) {
  scroll-margin-top: var(--lemon-space-8);
}
/* The marker-highlight effect behind key headline words: inline yellow with
 * per-line rounding, navy text. One per headline at most. */
:where(.lemon-brand) mark {
  background: var(--lemon-yellow);
  border-radius: var(--lemon-radius-marker);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--lemon-navy);
  font-weight: var(--lemon-weight-bold);
  padding-inline: 0.1em;
}
/* Fluid display hierarchy — hero clamp on h1/title/display, title clamp on
 * h2/heading-24, fixed steps below. */
:where(.lemon-brand) h1,
:where(.lemon-brand) .lemon-title {
  max-width: var(--lemon-title-measure);
  margin-block-end: var(--lemon-space-4);
  font-size: var(--lemon-type-hero);
  line-height: var(--lemon-leading-display);
  letter-spacing: -0.035em;
}
:where(.lemon-brand) .lemon-display {
  max-width: var(--lemon-display-measure);
  font-size: var(--lemon-type-hero);
  line-height: var(--lemon-leading-display);
  letter-spacing: -0.035em;
}
:where(.lemon-brand) h2,
:where(.lemon-brand) .lemon-heading-24 {
  margin-block-end: var(--lemon-space-4);
  font-size: var(--lemon-type-title);
  line-height: var(--lemon-leading-title);
  letter-spacing: -0.025em;
}
:where(.lemon-brand) h3,
:where(.lemon-brand) .lemon-heading-20 {
  margin-block-end: var(--lemon-space-3);
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
:where(.lemon-brand) h4,
:where(.lemon-brand) .lemon-heading-16 {
  margin-block-end: var(--lemon-space-2);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
:where(.lemon-brand) p {
  margin-block-end: var(--lemon-space-4);
  line-height: var(--lemon-leading-body);
  text-wrap: pretty;
}
:where(.lemon-brand) :where(ul, ol) {
  margin-block-end: var(--lemon-space-4);
  padding-inline-start: 1.25rem;
}
:where(.lemon-brand) li {
  line-height: var(--lemon-leading-body);
}
:where(.lemon-brand) :where(.lemon-reading, .lemon-flow, .lemon-list) li + li {
  margin-block-start: var(--lemon-flow-tight);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow, .lemon-list)
  li
  > :where(p, ul, ol) {
  margin-block-end: 0;
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow, .lemon-list)
  li
  > p
  + p {
  margin-block-start: var(--lemon-flow-tight);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow, .lemon-list)
  li
  > :where(ul, ol) {
  margin-block-start: var(--lemon-flow-tight);
}
:where(.lemon-brand) .lemon-list-compact li + li {
  margin-block-start: var(--lemon-space-1);
}
:where(.lemon-brand) dt {
  font-weight: var(--lemon-weight-medium);
  line-height: var(--lemon-leading-body);
}
:where(.lemon-brand) dd {
  margin-inline-start: 0;
  color: var(--lemon-text-secondary);
  line-height: var(--lemon-leading-body);
}
:where(.lemon-brand) dt:not(:first-child) {
  margin-block-start: var(--lemon-flow-copy);
}
:where(.lemon-brand) dt + dd {
  margin-block-start: var(--lemon-space-1);
}
:where(.lemon-brand) blockquote {
  margin-inline: 0;
  margin-block-end: var(--lemon-flow-copy);
  padding-block: var(--lemon-space-2);
  color: var(--lemon-text-secondary);
  font-size: 1.125rem;
  line-height: 1.75rem;
}
:where(.lemon-brand) :where(p, li, dd, figcaption, .lemon-label, .lemon-meta) {
  overflow-wrap: anywhere;
}
:where(.lemon-brand) :where(td, th) {
  overflow-wrap: break-word;
}
:where(.lemon-brand) :where(a) {
  color: inherit;
  text-decoration-color: var(--lemon-text-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(.lemon-brand) a:hover {
  text-decoration-color: currentColor;
}
:where(.lemon-brand) .lemon-link {
  color: var(--lemon-text-primary);
  font-weight: var(--lemon-weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--lemon-text-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(.lemon-brand) .lemon-link:hover {
  text-decoration-color: currentColor;
}
:where(.lemon-brand) .lemon-link[data-variant="highlight"] {
  color: var(--lemon-accent);
}
:where(.lemon-brand) .lemon-link[data-variant="secondary"] {
  color: var(--lemon-text-secondary);
  font-weight: var(--lemon-weight-regular);
}
:where(.lemon-brand) .lemon-link[data-variant="secondary"]:hover {
  color: var(--lemon-text-primary);
}
:where(.lemon-brand)
  :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--lemon-focus);
  outline-offset: 2px;
}
:where(.lemon-brand) :where(code, kbd, samp, pre) {
  font-family: var(--lemon-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}
:where(.lemon-brand) :where(code, kbd) {
  border: 1px solid var(--lemon-border-subtle);
  border-radius: var(--lemon-radius-sm);
  background: var(--lemon-neutral);
  padding: 0.1em 0.3em;
  font-size: 0.875em;
}
:where(.lemon-brand) .lemon-formula {
  display: block;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}
/* Formula semantics always remain wrap-safe, including additive authored
 * classes. */
:where(.lemon-brand)
  :is(
    .lemon-formula,
    [data-lemon-formula],
    [data-formula],
    [class*="lemon-" i][class*="formula" i],
    [class*="lemon-" i][class*="equation" i]
  ) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal !important;
}
:where(.lemon-brand) pre {
  overflow: auto;
  border: 1px solid var(--lemon-border-subtle);
  border-radius: var(--lemon-radius);
  background: var(--lemon-surface-secondary);
  padding: var(--lemon-space-4);
  font-size: 0.8125rem;
  line-height: 1.55;
}
:where(.lemon-brand) pre code {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: inherit;
}
:where(.lemon-brand) :where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
  height: auto;
}
:where(.lemon-brand) figure {
  margin-inline: 0;
  margin-block-end: var(--lemon-space-8);
}
:where(.lemon-brand) figcaption,
:where(.lemon-brand) .lemon-caption {
  margin-block-start: var(--lemon-space-3);
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand) .lemon-shell {
  width: min(calc(100% - 48px), var(--lemon-content-width));
  margin-inline: auto;
  padding-block: clamp(40px, 7vw, 80px);
  container-name: lemon-shell;
  container-type: inline-size;
}
:where(.lemon-brand) .lemon-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lemon-space-6);
  row-gap: 0;
  padding-block-end: clamp(32px, 5vw, 56px);
}
:where(.lemon-brand) .lemon-header > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin-block: 0;
}
:where(.lemon-brand) .lemon-header > :where(h1, .lemon-title, .lemon-display) {
  grid-column: 1 / span 8;
}
:where(.lemon-brand) .lemon-header > :where(.lemon-summary, .lemon-lede) {
  grid-column: 1 / span 7;
}
:where(.lemon-brand) .lemon-header > * + * {
  margin-block-start: var(--lemon-flow-copy);
}
:where(.lemon-brand)
  .lemon-header
  > .lemon-context
  + :where(h1, .lemon-title, .lemon-display) {
  margin-block-start: var(--lemon-space-3);
}
:where(.lemon-brand) .lemon-masthead {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--lemon-space-3) var(--lemon-space-6);
  align-items: first baseline;
}
/* Unknown masthead content stays readable instead of entering a narrow track. */
:where(.lemon-brand) .lemon-masthead > * {
  grid-column: 1 / -1;
  min-width: 0;
}
@supports selector(.lemon-masthead:has(> .lemon-identity)) {
  :where(.lemon-brand)
    .lemon-masthead:has(> .lemon-identity):has(> .lemon-document-meta)
    > .lemon-identity {
    grid-column: 1;
    grid-row: 1;
  }
  :where(.lemon-brand)
    .lemon-masthead:has(> .lemon-identity):has(> .lemon-document-meta)
    > .lemon-document-meta {
    grid-column: 2;
    grid-row: 1;
  }
}
:where(.lemon-brand)
  .lemon-header
  > .lemon-masthead
  + :where(h1, .lemon-title, .lemon-display) {
  margin-block-start: clamp(32px, 4vw, 48px);
}
:where(.lemon-brand) .lemon-identity {
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: var(--lemon-space-2);
  color: var(--lemon-text-primary);
  font-size: var(--lemon-type-compact);
  font-weight: var(--lemon-weight-medium);
  line-height: var(--lemon-leading-compact);
  white-space: nowrap;
}
/* Small identity marks may be inline images or SVG (height 18px). */
:where(.lemon-brand) .lemon-identity > :where(img, svg) {
  width: auto;
  max-width: 128px;
  height: 18px;
}
/*
 * Two-color lockup rendering (see the header note). .lemon-wordmark and
 * .lemon-logo are single-color dot masks so currentColor follows the theme —
 * intended for small mark contexts. The full yellow-dot lockup is painted by
 * .lemon-logo-img and .lemon-wordmark[data-lockup="true"] via --lemon-logo-img.
 */
:where(.lemon-brand) .lemon-wordmark,
:where(.lemon-brand) .lemon-logo {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("/brand/lemon-mark.svg");
  mask-image: url("/brand/lemon-mark.svg");
}
:where(.lemon-brand) .lemon-wordmark {
  width: 18px;
  height: 18px;
}
:where(.lemon-brand) .lemon-logo {
  width: 16px;
  height: 16px;
}
/* The dot mark is always brand yellow when the author opts out of the
 * theme-following single-color treatment. */
:where(.lemon-brand) .lemon-logo[data-color="brand"],
:where(.lemon-brand) .lemon-wordmark[data-color="brand"] {
  background-color: var(--lemon-yellow);
}
/*
 * Full two-color lockup. Painted as a CSS background so navy scopes can swap
 * to /brand/lemon-logo-white.svg via --lemon-logo-img without JS. The content
 * box collapses to zero (padding swallows it) so a replaced <img> src never
 * double-paints; the src remains a no-stylesheet fallback.
 */
:where(.lemon-brand) .lemon-identity > img.lemon-logo-img,
:where(.lemon-brand) .lemon-footer > img.lemon-logo-img,
:where(.lemon-brand) .lemon-wordmark[data-lockup="true"] {
  display: inline-block;
  box-sizing: border-box;
  width: 92px;
  height: 34px;
  padding: 17px 46px;
  background: var(--lemon-logo-img) no-repeat center / contain;
  background-origin: border-box;
  /* Full-lockup wordmarks must not inherit the small-mark dot mask. */
  -webkit-mask-image: none;
  mask-image: none;
}
/* .lemon-logo-img may also sit anywhere a masthead logo belongs. */
:where(.lemon-brand) .lemon-logo-img {
  object-fit: contain;
}
:where(.lemon-brand) .lemon-document-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: first baseline;
  justify-content: flex-end;
  gap: var(--lemon-space-1) var(--lemon-space-4);
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-label);
  line-height: var(--lemon-leading-compact);
}
/* Semantic child elements keep the metadata role instead of body paragraph
 * leading. */
:where(.lemon-brand) .lemon-document-meta > * {
  margin-block: 0;
  font-size: var(--lemon-type-label);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand)
  :where(
    .lemon-masthead,
    .lemon-identity,
    .lemon-document-meta,
    .lemon-recipient,
    .lemon-state,
    .lemon-date,
    .lemon-confidentiality
  )
  > * {
  margin-block: 0;
}
:where(.lemon-brand)
  :where(.lemon-recipient, .lemon-state, .lemon-date, .lemon-confidentiality) {
  overflow-wrap: anywhere;
}
:where(.lemon-brand) :where(.lemon-state, .lemon-confidentiality) {
  color: var(--lemon-text-primary);
  font-weight: var(--lemon-weight-medium);
}
:where(.lemon-brand) .lemon-state[data-status="verified"] {
  color: var(--lemon-color-success);
}
:where(.lemon-brand) .lemon-summary,
:where(.lemon-brand) .lemon-lede {
  max-width: var(--lemon-reading-width);
  color: var(--lemon-text-primary);
  font-size: var(--lemon-type-lede);
  line-height: var(--lemon-leading-lede);
}
/* Semantic wrappers keep their editorial leading when prose uses children. */
:where(.lemon-brand)
  :is(.lemon-summary, .lemon-lede)
  > :where(p, ul, ol, blockquote),
:where(.lemon-brand) :is(.lemon-summary, .lemon-lede) > :where(ul, ol) > li {
  font-size: inherit;
  line-height: inherit;
}
:where(.lemon-brand) .lemon-reading {
  max-width: var(--lemon-reading-width);
}
/* Intrinsic content may scroll locally, but published layout primitives must
 * not widen the page. */
:where(.lemon-brand)
  :where(
    .lemon-flow,
    .lemon-grid,
    .lemon-split,
    .lemon-calculator,
    .lemon-calculator-layout,
    .lemon-table-wrap,
    .lemon-chart,
    .lemon-chart-viewport
  ) {
  min-inline-size: 0;
  max-inline-size: 100%;
}
:where(.lemon-brand)
  :where(
    .lemon-flow,
    .lemon-grid,
    .lemon-split,
    .lemon-calculator,
    .lemon-calculator-layout
  )
  > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}
/* Keep unwrapped narrative readable without narrowing tables, charts, or data
 * regions. */
:where(.lemon-brand) .lemon-header > :where(p, ul, ol, dl, blockquote),
:where(.lemon-brand)
  .lemon-section
  > :where(h2, h3, h4, p, ul, ol, dl, blockquote),
:where(.lemon-brand) .lemon-flow > :where(p, ul, ol, dl, blockquote) {
  max-width: var(--lemon-reading-width);
}
:where(.lemon-brand) :where(.lemon-reading, .lemon-flow) > * {
  margin-block: 0;
}
:where(.lemon-brand) :where(.lemon-reading, .lemon-flow) > * + * {
  margin-block-start: var(--lemon-flow-copy);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow)
  > :where(h2):not(:first-child) {
  margin-block-start: var(--lemon-flow-section);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow)
  > :where(h3):not(:first-child) {
  margin-block-start: var(--lemon-space-8);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow)
  > :where(h4):not(:first-child) {
  margin-block-start: var(--lemon-flow-group);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow)
  > h1
  + :where(p, ul, ol, dl, blockquote),
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow)
  > h2
  + :where(p, ul, ol, dl, blockquote) {
  margin-block-start: var(--lemon-flow-copy);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow)
  > h3
  + :where(p, ul, ol, dl, blockquote) {
  margin-block-start: var(--lemon-space-3);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow)
  > h4
  + :where(p, ul, ol, dl, blockquote) {
  margin-block-start: var(--lemon-flow-tight);
}
:where(.lemon-brand)
  :where(.lemon-reading, .lemon-flow)
  > :where(figure, pre, .lemon-table-wrap, .lemon-figure, .lemon-chart) {
  margin-block: var(--lemon-flow-group) var(--lemon-space-8);
}
:where(.lemon-brand) .lemon-stack {
  display: grid;
  gap: var(--lemon-flow-copy);
}
:where(.lemon-brand) .lemon-stack[data-gap="tight"] {
  gap: var(--lemon-flow-tight);
}
:where(.lemon-brand) .lemon-stack[data-gap="group"] {
  gap: var(--lemon-flow-group);
}
:where(.lemon-brand) .lemon-stack[data-gap="section"] {
  gap: var(--lemon-flow-section);
}
:where(.lemon-brand) .lemon-stack > * {
  min-width: 0;
  margin-block: 0;
}
:where(.lemon-brand)
  :where(
    .lemon-header,
    .lemon-grid,
    .lemon-metrics,
    .lemon-comparison,
    .lemon-metric,
    .lemon-calculator,
    .lemon-field
  )
  > :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote, pre) {
  margin-block: 0;
}
:where(.lemon-brand)
  :where(
    .lemon-section,
    .lemon-surface,
    .lemon-callout,
    .lemon-note,
    .lemon-decision,
    .lemon-recommendation,
    .lemon-next-step,
    .lemon-band,
    .lemon-footer
  )
  > :last-child {
  margin-block-end: 0;
}
:where(.lemon-brand) .lemon-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lemon-space-6);
  padding-block: 0;
}
:where(.lemon-brand) .lemon-section > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin-block: 0;
}
:where(.lemon-brand)
  .lemon-section
  > :where(h2, h3, h4, p, ul, ol, dl, blockquote, .lemon-reading) {
  grid-column: 1 / span 7;
}
:where(.lemon-brand) .lemon-section > * + * {
  margin-block-start: var(--lemon-flow-copy);
}
/* Explicit section grids own peer and row rhythm through their grid gap. */
:where(.lemon-brand) .lemon-section.lemon-grid > * + * {
  margin-block-start: 0;
}
/* A split section introduction aligns the first text baselines rather than
 * merely aligning unlike heading and paragraph boxes at their top edges. */
@supports selector(.lemon-section:has(> h2.lemon-span-6 + p.lemon-span-6)) {
  :where(.lemon-brand)
    .lemon-section.lemon-grid:has(> h2.lemon-span-6 + p.lemon-span-6)
    > :where(h2.lemon-span-6, p.lemon-span-6) {
    align-self: baseline;
  }
}
/* Plain narrative lists need readable item rhythm even without a flow wrapper. */
:where(.lemon-brand)
  .lemon-section
  > :where(ul, ol):not(
    .lemon-legend,
    .lemon-list-compact,
    [role="listbox"],
    [role="menu"],
    [role="menubar"],
    [role="navigation"],
    [role="tablist"]
  )
  > li
  + li {
  margin-block-start: var(--lemon-flow-tight);
}
/* Preserve editorial heading rhythm even when a section omits .lemon-flow. */
:where(.lemon-brand) .lemon-section > h2:not(:first-child) {
  margin-block-start: var(--lemon-flow-section);
}
:where(.lemon-brand) .lemon-section > h3:not(:first-child) {
  margin-block-start: var(--lemon-space-8);
}
:where(.lemon-brand) .lemon-section > h4:not(:first-child) {
  margin-block-start: var(--lemon-flow-group);
}
:where(.lemon-brand) .lemon-section > h3 + :where(p, ul, ol, dl, blockquote) {
  margin-block-start: var(--lemon-space-3);
}
:where(.lemon-brand) .lemon-section > h4 + :where(p, ul, ol, dl, blockquote) {
  margin-block-start: var(--lemon-flow-tight);
}
:where(.lemon-brand)
  .lemon-section
  > :where(
    figure,
    pre,
    .lemon-action,
    .lemon-decision,
    .lemon-recommendation,
    .lemon-next-step,
    .lemon-band,
    .lemon-evidence,
    .lemon-table-wrap,
    .lemon-figure,
    .lemon-chart,
    .lemon-calculator,
    .lemon-metrics,
    .lemon-stat-strip,
    .lemon-comparison,
    .lemon-result-group
  ) {
  margin-block-start: var(--lemon-flow-group);
}
:where(.lemon-brand) .lemon-section + .lemon-section {
  margin-block-start: clamp(48px, 5vw, 64px);
}
/* The optional opening context is still part of the opening; the first chapter
 * needs the same boundary as later sibling sections after that context
 * reflows. */
:where(.lemon-brand) .lemon-opening + .lemon-section {
  margin-block-start: clamp(48px, 5vw, 64px);
}
:where(.lemon-brand) .lemon-chapter:not(.lemon-reading):not(.lemon-flow) > * {
  margin-block: 0;
}
:where(.lemon-brand)
  :where(main, .lemon-flow)
  > .lemon-chapter
  + .lemon-chapter {
  margin-block-start: clamp(64px, 8vw, 96px);
}
:where(.lemon-brand) .lemon-chapter > .lemon-section + .lemon-section {
  margin-block-start: clamp(32px, 4vw, 48px);
}
:where(.lemon-brand)
  .lemon-chapter.lemon-stack
  > .lemon-section
  + .lemon-section {
  margin-block-start: 0;
}
/* A complete evidence component followed by narrative is a semantic boundary
 * only when its direct parent does not already own rhythm or placement. Keep
 * this after chapter resets so responsive peer stacking cannot erase the gap. */
:where(.lemon-brand)
  :is(
    .lemon-section:not(.lemon-grid):not(.lemon-stack):not(.lemon-flow),
    .lemon-chapter:not(.lemon-reading):not(.lemon-flow):not(.lemon-stack)
  )
  > :where(
    figure,
    pre,
    .lemon-action,
    .lemon-decision,
    .lemon-recommendation,
    .lemon-next-step,
    .lemon-band,
    .lemon-evidence,
    .lemon-table-wrap,
    .lemon-figure,
    .lemon-chart,
    .lemon-calculator,
    .lemon-metrics,
    .lemon-stat-strip,
    .lemon-comparison,
    .lemon-result-group
  )
  + :is(.lemon-reading, .lemon-flow, h2, h3) {
  margin-block-start: var(--lemon-space-8);
}
:where(.lemon-brand) .lemon-band {
  display: grid;
  gap: var(--lemon-space-4);
  border: 0;
  background: transparent;
  padding: 0;
}
:where(.lemon-brand) .lemon-band > * {
  min-width: 0;
  margin-block: 0;
}
/* Contrast bands are the LEMON emphasis tool: a Deep Navy field that stays
 * navy in both themes. Semantic tokens re-map so children invert without
 * per-component overrides, and the two-color lockup repaints white. */
:where(.lemon-brand) .lemon-band[data-tone="contrast"] {
  --lemon-text-primary: var(--lemon-text-on-contrast);
  --lemon-text-secondary: var(--lemon-text-on-contrast-secondary);
  --lemon-text-muted: var(--lemon-text-on-contrast-muted);
  --lemon-border-subtle: var(--lemon-border-on-contrast);
  --lemon-border-default: var(--lemon-border-on-contrast);
  --lemon-border-strong: var(--lemon-text-on-contrast);
  --lemon-logo-img: url("/brand/lemon-logo-white.svg");
  border-color: var(--lemon-border-on-contrast);
  background: var(--lemon-surface-contrast);
  color: var(--lemon-text-on-contrast);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(
    h1,
    h2,
    h3,
    h4,
    .lemon-display,
    .lemon-title,
    .lemon-heading-24,
    .lemon-heading-20,
    .lemon-heading-16,
    .lemon-lede,
    .lemon-summary,
    .lemon-stat-value,
    .lemon-metric-value,
    .lemon-identity,
    strong
  ) {
  color: var(--lemon-text-on-contrast);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(
    .lemon-context,
    .lemon-label,
    .lemon-meta,
    .lemon-helper,
    .lemon-metric-detail,
    figcaption
  ) {
  color: var(--lemon-text-on-contrast-secondary);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(.lemon-action, .lemon-decision, .lemon-stat-strip) {
  border-color: var(--lemon-border-on-contrast);
}
:where(.lemon-brand) .lemon-band[data-tone="contrast"] :where(a, .lemon-link) {
  color: var(--lemon-text-on-contrast);
  text-decoration-color: var(--lemon-text-on-contrast-secondary);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  .lemon-link[data-variant] {
  color: var(--lemon-text-on-contrast);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  .lemon-link[data-variant="secondary"] {
  color: var(--lemon-text-on-contrast-secondary);
}
/* The one sanctioned full-yellow moment: the LEMON final-CTA band. Navy text,
 * navy control accents, 24px radius. Local token remap keeps nested primitives
 * correct and keeps the black lockup legible. */
:where(.lemon-brand) .lemon-band[data-tone="accent"] {
  --lemon-text-primary: #0d1b2a;
  --lemon-text-secondary: rgba(13, 27, 42, 0.72);
  --lemon-text-muted: rgba(13, 27, 42, 0.5);
  --lemon-border-subtle: rgba(13, 27, 42, 0.14);
  --lemon-border-default: rgba(13, 27, 42, 0.2);
  --lemon-border-strong: #0d1b2a;
  --lemon-focus: #0d1b2a;
  --lemon-logo-img: url("/brand/lemon-logo.svg");
  border: 0;
  background: var(--lemon-yellow);
  color: #0d1b2a;
  border-radius: var(--lemon-radius-band);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
}
:where(.lemon-brand) .lemon-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--lemon-space-6);
}
:where(.lemon-brand) .lemon-grid > * {
  grid-column: 1 / -1;
  min-width: 0;
}
:where(.lemon-brand) .lemon-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--lemon-space-6);
  align-items: start;
}
:where(.lemon-brand) .lemon-split[data-ratio="equal"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
:where(.lemon-brand) .lemon-split[data-ratio="wide"] {
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}
:where(.lemon-brand) .lemon-split > * {
  min-width: 0;
}
/*
 * A source-ordered opening composition: claim, decisive proof, then optional
 * context. The split variant shares one desktop band; the stacked variant
 * gives the proof the full report measure. Decoration remains opt-in. */
:where(.lemon-brand) .lemon-opening {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--lemon-space-6);
  min-inline-size: 0;
  max-inline-size: 100%;
  border: 0;
  background: transparent;
  padding: 0;
}
:where(.lemon-brand) .lemon-opening > * {
  grid-column: 1 / -1;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-block: 0;
}
:where(.lemon-brand) .lemon-opening > .lemon-opening-claim {
  grid-row: 1;
}
:where(.lemon-brand) .lemon-opening > .lemon-opening-proof {
  grid-row: 2;
}
:where(.lemon-brand) .lemon-opening > .lemon-opening-context {
  grid-row: 3;
  max-width: var(--lemon-reading-width);
}
:where(.lemon-brand) .lemon-opening[data-layout="split"] {
  row-gap: var(--lemon-space-4);
}
:where(.lemon-brand)
  .lemon-opening[data-layout="split"]
  > .lemon-opening-claim {
  grid-column: 1 / span 7;
  grid-row: 1;
}
:where(.lemon-brand)
  .lemon-opening[data-layout="split"]
  > .lemon-opening-proof {
  grid-column: 8 / -1;
  grid-row: 1;
}
:where(.lemon-brand)
  .lemon-opening[data-layout="split"]
  > .lemon-opening-context {
  grid-column: 1 / span 7;
  grid-row: 2;
}
:where(.lemon-brand)
  .lemon-opening
  :where(.lemon-opening-claim, .lemon-opening-proof, .lemon-opening-context)
  > * {
  max-inline-size: 100%;
}
/* The opening grid owns space between its regions; child margins own only
 * rhythm within a region. This prevents the last heading or paragraph margin
 * from being added to the grid gap. */
:where(.lemon-brand)
  .lemon-opening
  :where(.lemon-opening-claim, .lemon-opening-proof, .lemon-opening-context)
  > :last-child {
  margin-block-end: 0;
}
:where(.lemon-brand) .lemon-metrics,
:where(.lemon-brand) .lemon-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--lemon-space-8);
}
/*
 * Opt comparable two-child peers into shared desktop heading and body rows.
 * Subgrid is progressive enhancement; older engines reserve two heading lines.
 * Peers with additional content and narrow layouts keep ordinary flow. */
@media (min-width: 801px) {
  @supports not (grid-template-rows: subgrid) {
    :where(.lemon-brand)
      .lemon-comparison[data-align="rows"]
      > .lemon-stack:has(> :nth-child(2):last-child)
      > :first-child {
      min-block-size: calc(2 * 1.375rem);
    }
  }
  @supports (grid-template-rows: subgrid) {
    :where(.lemon-brand) .lemon-comparison[data-align="rows"] {
      row-gap: var(--lemon-flow-copy);
    }
    :where(.lemon-brand)
      .lemon-comparison[data-align="rows"]
      > .lemon-stack:has(> :nth-child(2):last-child) {
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: var(--lemon-flow-copy);
    }
  }
}
/*
 * A flat, responsive length comparison for two to six non-negative values
 * that share one unit, zero baseline, and domain maximum. Exact labels and
 * values remain normal HTML; only the mark width is supplied inline. */
:where(.lemon-brand) .lemon-bar-comparison {
  min-inline-size: 0;
  max-inline-size: 100%;
}
:where(.lemon-brand) .lemon-bar-list {
  display: grid;
  gap: var(--lemon-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.lemon-brand) .lemon-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: var(--lemon-space-2) var(--lemon-space-4);
  min-inline-size: 0;
}
:where(.lemon-brand) :is(.lemon-bar-label, .lemon-bar-value) {
  min-inline-size: 0;
  color: var(--lemon-text-primary);
  font-size: var(--lemon-type-compact);
  font-weight: var(--lemon-weight-medium);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand) .lemon-bar-value {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: end;
}
:where(.lemon-brand) .lemon-bar-track {
  display: block;
  grid-column: 1 / -1;
  inline-size: 100%;
  block-size: 8px;
  overflow: hidden;
  border-radius: var(--lemon-radius-pill);
  background: var(--lemon-surface-secondary);
}
:where(.lemon-brand) .lemon-bar-fill {
  display: block;
  inline-size: 0;
  max-inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  background: var(--lemon-text-primary);
}
/* Monochrome navy ladder by default; the single primary bar earns the yellow
 * accent. Reference bars and non-primary peers stay muted so the comparison
 * reads from one focal value. */
:where(.lemon-brand) .lemon-bar[data-role="reference"] .lemon-bar-fill {
  background: var(--lemon-text-secondary);
}
:where(.lemon-brand)
  .lemon-bar-list:has(> .lemon-bar[data-role="primary"])
  > .lemon-bar:not([data-role="primary"])
  .lemon-bar-fill {
  background: var(--lemon-text-secondary);
}
:where(.lemon-brand) .lemon-bar[data-role="primary"] .lemon-bar-fill {
  background: var(--lemon-yellow);
}
:where(.lemon-brand) .lemon-span-4 {
  grid-column: span 4;
}
:where(.lemon-brand) .lemon-span-5 {
  grid-column: span 5;
}
:where(.lemon-brand) .lemon-span-6 {
  grid-column: span 6;
}
:where(.lemon-brand) .lemon-span-7 {
  grid-column: span 7;
}
:where(.lemon-brand) .lemon-span-8 {
  grid-column: span 8;
}
:where(.lemon-brand) .lemon-span-12 {
  grid-column: 1 / -1;
}
/* Explicit full-span table ownership must survive page-owned grid placement. */
:where(.lemon-brand) .lemon-table-wrap.lemon-span-12 {
  grid-column: 1 / -1 !important;
}
:where(.lemon-brand) .lemon-context,
:where(.lemon-brand) .lemon-label {
  color: var(--lemon-text-secondary);
  line-height: 1.4;
}
/* .lemon-context is the eyebrow above headings: small, bold, tracked, quiet. */
:where(.lemon-brand) .lemon-context {
  font-size: var(--lemon-type-label);
  font-weight: var(--lemon-weight-bold);
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}
/* .lemon-label is the small UI/field label: precise, medium, tracked. */
:where(.lemon-brand) .lemon-label {
  font-size: var(--lemon-type-label);
  font-weight: var(--lemon-weight-medium);
  letter-spacing: 0.05em;
  line-height: 1;
}
:where(.lemon-brand) :where(.lemon-context, .lemon-label) strong {
  color: var(--lemon-text-primary);
  font-weight: var(--lemon-weight-semibold);
}
:where(.lemon-brand) .lemon-meta {
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-label);
  font-weight: var(--lemon-weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
:where(.lemon-brand) .lemon-surface {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
/* Containment is opt-in. Use it only when a region has a real boundary. */
:where(.lemon-brand)
  :where(
    .lemon-surface[data-variant="contained"],
    .lemon-surface[data-contained="true"]
  ) {
  border: 1px solid var(--lemon-border-subtle);
  border-radius: var(--lemon-radius);
  background: var(--lemon-surface-secondary);
  padding: var(--lemon-space-6);
}
:where(.lemon-brand) .lemon-action,
:where(.lemon-brand) .lemon-decision,
:where(.lemon-brand) .lemon-recommendation {
  display: grid;
  gap: var(--lemon-space-3);
  border: 0;
  padding-block: 0;
}
/* These roles may be applied directly to prose; inline children must stay
 * inline. */
:where(.lemon-brand) :is(p, li, blockquote).lemon-decision,
:where(.lemon-brand) :is(p, li, blockquote).lemon-recommendation,
:where(.lemon-brand) :is(p, li, blockquote).lemon-action {
  display: block;
}
:where(.lemon-brand)
  :where(.lemon-action, .lemon-decision, .lemon-recommendation)
  > :where(p, ul, ol) {
  max-inline-size: var(--lemon-reading-width);
}
:where(.lemon-brand) .lemon-next-step {
  display: grid;
  grid-template-columns: minmax(160px, 4fr) minmax(0, 8fr);
  gap: var(--lemon-space-4) var(--lemon-space-6);
  align-items: first baseline;
  border: 0;
  padding-block: 0;
}
:where(.lemon-brand) .lemon-next-step > * {
  grid-column: 1 / -1;
}
@supports selector(.lemon-next-step:has(> :nth-child(2):last-child)) {
  :where(.lemon-brand)
    .lemon-next-step:has(> :nth-child(2):last-child)
    > :first-child {
    grid-column: 1;
  }
  :where(.lemon-brand)
    .lemon-next-step:has(> :nth-child(2):last-child)
    > :nth-child(2) {
    grid-column: 2;
  }
}
:where(.lemon-brand) .lemon-action > *,
:where(.lemon-brand) .lemon-decision > *,
:where(.lemon-brand) .lemon-evidence > *,
:where(.lemon-brand) .lemon-recommendation > *,
:where(.lemon-brand) .lemon-next-step > * {
  min-width: 0;
  margin-block: 0;
}
:where(.lemon-brand) .lemon-evidence {
  display: grid;
  gap: var(--lemon-space-4);
  border: 0;
  background: transparent;
  padding-block: 0;
}
:where(.lemon-brand) .lemon-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--lemon-space-8);
  border: 0;
  background: transparent;
}
/* A sole peer group has no sibling topology to preserve, so it owns its grid. */
:where(.lemon-brand)
  .lemon-grid
  > :is(.lemon-stat-strip, .lemon-metrics, .lemon-result-group):only-child {
  grid-column: 1 / -1 !important;
}
:where(.lemon-brand) .lemon-stat {
  display: grid;
  align-content: start;
  gap: var(--lemon-space-2);
  min-width: 0;
  background: transparent;
  padding: 0;
}
:where(.lemon-brand) .lemon-stat > * {
  margin-block: 0;
}
:where(.lemon-brand)
  :is(.lemon-stat-label, .lemon-stat > .lemon-label:first-child) {
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  font-weight: var(--lemon-weight-regular);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand)
  :is(.lemon-stat-value, .lemon-stat > :is(strong, output):nth-child(2)) {
  color: var(--lemon-text-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--lemon-weight-extrabold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.15;
  max-inline-size: 100%;
  overflow-wrap: normal;
  word-break: normal;
}
:where(.lemon-brand)
  .lemon-stat[data-priority="primary"]
  :is(.lemon-stat-value, :is(strong, output):nth-child(2)) {
  font-size: clamp(2rem, 4vw, 2.5rem);
}
:where(.lemon-brand)
  .lemon-stat[data-priority="supporting"]
  :is(.lemon-stat-value, :is(strong, output):nth-child(2)) {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}
:where(.lemon-brand) :is(.lemon-stat-detail, .lemon-stat > .lemon-meta) {
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-label);
  font-weight: var(--lemon-weight-regular);
  line-height: 1.5;
}
:where(.lemon-brand) .lemon-metric {
  display: grid;
  align-content: start;
  gap: var(--lemon-space-2);
}
:where(.lemon-brand)
  :is(.lemon-metric-label, .lemon-metric > .lemon-label:first-child) {
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  font-weight: var(--lemon-weight-regular);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand)
  :is(.lemon-metric-value, .lemon-metric > :is(strong, output):nth-child(2)) {
  color: var(--lemon-text-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--lemon-weight-extrabold);
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  max-inline-size: 100%;
  overflow-wrap: normal;
  word-break: normal;
}
:where(.lemon-brand) :is(.lemon-metric-detail, .lemon-metric > .lemon-meta) {
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand) .lemon-note {
  border: 0;
  padding-block: var(--lemon-space-3);
}
:where(.lemon-brand) .lemon-callout {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
:where(.lemon-brand)
  :where(
    .lemon-callout[data-variant="contained"],
    .lemon-callout[data-contained="true"],
    .lemon-callout[data-tone="info"],
    .lemon-callout[data-tone="success"],
    .lemon-callout[data-tone="warning"],
    .lemon-callout[data-tone="error"]
  ) {
  border: 0;
  border-radius: var(--lemon-radius-lg);
  background: var(--lemon-surface-secondary);
  padding: var(--lemon-space-5);
}
/* Tone fills use the sanctioned LEMON emphasis surfaces — warm pale for
 * meaning, warm gray for quiet notes — with a small inline accent bar in the
 * tone color so color never carries meaning alone. */
:where(.lemon-brand) .lemon-callout[data-tone="info"] {
  background: var(--lemon-neutral);
  border-inline-start: 3px solid var(--lemon-color-info);
}
:where(.lemon-brand) .lemon-callout[data-tone="success"] {
  background: var(--lemon-pale);
  border-inline-start: 3px solid var(--lemon-yellow);
}
:where(.lemon-brand) .lemon-callout[data-tone="warning"] {
  background: var(--lemon-pale);
  border-inline-start: 3px solid var(--lemon-color-warning);
}
:where(.lemon-brand) .lemon-callout[data-tone="error"] {
  background: var(--lemon-pale);
  border-inline-start: 3px solid var(--lemon-color-error);
}
:where(.lemon-brand) .lemon-note[data-tone="info"] {
  border-inline-start: 3px solid var(--lemon-color-info);
}
:where(.lemon-brand) .lemon-note[data-tone="success"] {
  border-inline-start: 3px solid var(--lemon-yellow);
}
:where(.lemon-brand) .lemon-note[data-tone="warning"] {
  border-inline-start: 3px solid var(--lemon-color-warning);
}
:where(.lemon-brand) .lemon-note[data-tone="error"] {
  border-inline-start: 3px solid var(--lemon-color-error);
}
:where(.lemon-brand) .lemon-table-wrap {
  position: relative;
  display: block;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: auto;
  border: 0;
  container-type: inline-size;
}
/* Evidence tables always own the complete desktop evidence track. */
:where(.lemon-brand) :where(.lemon-section, .lemon-grid) > .lemon-table-wrap {
  grid-column: 1 / -1;
  inline-size: 100%;
}
:where(.lemon-brand) .lemon-overflow-cue {
  display: none;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lemon-space-3);
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: var(--lemon-space-2);
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  font-weight: var(--lemon-weight-regular);
  line-height: var(--lemon-leading-compact);
  overflow-wrap: break-word;
}
:where(.lemon-brand) .lemon-overflow-cue::after {
  content: "\2192";
  flex: none;
  color: var(--lemon-text-primary);
  font-size: var(--lemon-type-body);
  line-height: 1;
}
:where(.lemon-brand[dir="rtl"]) .lemon-overflow-cue::after {
  content: "\2190";
}
/* Full-width evidence is resilient when a shell-level reading wrapper is used
 * by mistake. */
@supports (width: 1cqi) {
  :where(.lemon-brand)
    .lemon-shell
    > :where(.lemon-reading, .lemon-section.lemon-reading)
    > :is(
      .lemon-table-wrap,
      .lemon-chart,
      .lemon-figure,
      .lemon-evidence,
      .lemon-comparison,
      .lemon-calculator,
      .lemon-result-group
    ),
  :where(.lemon-brand)
    .lemon-shell
    > .lemon-section
    > .lemon-reading
    > :is(
      .lemon-table-wrap,
      .lemon-chart,
      .lemon-figure,
      .lemon-evidence,
      .lemon-comparison,
      .lemon-calculator,
      .lemon-result-group
    ),
  :where(.lemon-brand)
    .lemon-shell
    > main
    > :where(.lemon-reading, .lemon-section.lemon-reading)
    > :is(
      .lemon-table-wrap,
      .lemon-chart,
      .lemon-figure,
      .lemon-evidence,
      .lemon-comparison,
      .lemon-calculator,
      .lemon-result-group
    ),
  :where(.lemon-brand)
    .lemon-shell
    > main
    > .lemon-section
    > .lemon-reading
    > :is(
      .lemon-table-wrap,
      .lemon-chart,
      .lemon-figure,
      .lemon-evidence,
      .lemon-comparison,
      .lemon-calculator,
      .lemon-result-group
    ),
  :where(.lemon-brand)
    .lemon-shell
    > .lemon-section
    > :where(.lemon-reading, .lemon-flow)
    > :is(
      .lemon-table-wrap,
      .lemon-chart,
      .lemon-figure,
      .lemon-evidence,
      .lemon-comparison,
      .lemon-calculator,
      .lemon-result-group
    ),
  :where(.lemon-brand)
    .lemon-shell
    > main
    > .lemon-section
    > :where(.lemon-reading, .lemon-flow)
    > :is(
      .lemon-table-wrap,
      .lemon-chart,
      .lemon-figure,
      .lemon-evidence,
      .lemon-comparison,
      .lemon-calculator,
      .lemon-result-group
    ) {
    width: 100cqi;
    max-width: 100cqi;
  }
}
:where(.lemon-brand) .lemon-figure,
:where(.lemon-brand) .lemon-chart {
  min-width: 0;
}
:where(.lemon-brand) .lemon-chart {
  overflow: visible;
}
:where(.lemon-brand) .lemon-chart-viewport > .lemon-chart-desktop {
  display: block;
}
:where(.lemon-brand) .lemon-chart-viewport > .lemon-chart-mobile {
  display: none;
}
:where(.lemon-brand) .lemon-chart-viewport {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
:where(.lemon-brand) .lemon-chart-header {
  display: grid;
  gap: var(--lemon-space-1);
  margin-block-end: var(--lemon-space-4);
}
:where(.lemon-brand) .lemon-chart-header > * {
  max-width: var(--lemon-reading-width);
  margin-block: 0;
}
:where(.lemon-brand) .lemon-chart-title {
  color: var(--lemon-text-primary);
  font-size: var(--lemon-type-body);
  font-weight: var(--lemon-weight-semibold);
  line-height: var(--lemon-leading-body);
  letter-spacing: -0.02em;
}
:where(.lemon-brand) .lemon-chart-description {
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand) .lemon-chart-plot,
:where(.lemon-brand) .lemon-chart-viewport {
  position: relative;
  min-width: 0;
}
:where(.lemon-brand) .lemon-chart :where(svg, .lemon-chart-plot) {
  max-width: 100%;
}
/* A plot without a local viewport must reflow rather than widen the document. */
:where(.lemon-brand) .lemon-chart > :where(svg, .lemon-chart-plot) {
  min-width: 0 !important;
}
:where(.lemon-brand) .lemon-chart :where(svg) {
  width: 100%;
}
:where(.lemon-brand) .lemon-chart text {
  fill: var(--lemon-text-secondary);
  font-family: var(--lemon-font-sans);
  font-size: 12px;
}
:where(.lemon-brand) .lemon-chart text.lemon-mono {
  font-family: var(--lemon-font-mono);
}
:where(.lemon-brand)
  .lemon-chart
  :is(.lemon-chart-direct-label, .lemon-chart-annotation, .lemon-chart-value) {
  font-size: 12px;
  line-height: 16px;
}
:where(.lemon-brand)
  .lemon-chart
  :is(.lemon-chart-direct-label, .lemon-chart-value) {
  fill: var(--lemon-text-primary);
  color: var(--lemon-text-primary);
  font-size: 14px;
  font-weight: var(--lemon-weight-medium);
  font-variant-numeric: tabular-nums;
}
:where(.lemon-brand) .lemon-chart .lemon-chart-annotation {
  fill: var(--lemon-text-primary);
  color: var(--lemon-text-primary);
}
:where(.lemon-brand) .lemon-chart .lemon-chart-annotation-line {
  fill: none;
  stroke: var(--lemon-border-strong);
  stroke-dasharray: 3 3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
:where(.lemon-brand) .lemon-chart-gridline {
  fill: none;
  stroke: var(--lemon-border-subtle);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
:where(.lemon-brand) .lemon-chart-axis {
  fill: none;
  stroke: var(--lemon-border-default);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
:where(.lemon-brand) .lemon-series-stroke {
  fill: none;
  stroke: var(--lemon-series-color, var(--lemon-chart-1));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
:where(.lemon-brand) .lemon-series-fill {
  fill: var(--lemon-series-color, var(--lemon-chart-1));
}
:where(.lemon-brand) .lemon-data-point {
  fill: var(--lemon-surface-primary);
  stroke: var(--lemon-series-color, var(--lemon-chart-1));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
:where(.lemon-brand) table {
  width: 100%;
  border-collapse: collapse;
  caption-side: top;
  font-size: var(--lemon-type-compact);
  line-height: var(--lemon-leading-compact);
  font-variant-numeric: tabular-nums;
}
:where(.lemon-brand) caption {
  padding: 0 0 var(--lemon-space-3);
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  line-height: var(--lemon-leading-compact);
  text-align: left;
}
/* Keep table context in the visible scrollport while columns move beneath it. */
@supports (width: 1cqi) {
  :where(.lemon-brand) .lemon-table-wrap > table > caption {
    position: sticky;
    inset-inline-start: 0;
    inline-size: 100cqi;
    max-inline-size: 100cqi;
    min-inline-size: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    white-space: normal;
  }
}
:where(.lemon-brand) :where(th, td) {
  border-bottom: 1px solid var(--lemon-border-subtle);
  padding: 10px var(--lemon-space-3);
  text-align: left;
  vertical-align: baseline;
}
:where(.lemon-brand) :where(th, td):first-child {
  padding-inline-start: 0;
}
/* Preserve meaningful row labels. Prefer local table scrolling to
 * character-by-character wrapping. */
:where(.lemon-brand) .lemon-table-wrap > table :is(th, td):first-child {
  min-inline-size: 8ch;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: normal;
}
:where(.lemon-brand) :where(th, td):last-child {
  padding-inline-end: 0;
}
:where(.lemon-brand) thead th {
  border-bottom-color: var(--lemon-border-default);
  background: transparent;
  color: var(--lemon-text-secondary);
  font-weight: var(--lemon-weight-medium);
  hyphens: none;
  overflow-wrap: normal;
  vertical-align: bottom;
  word-break: normal;
}
:where(.lemon-brand) th > .lemon-meta {
  display: block;
  margin-block-start: var(--lemon-space-1);
}
:where(.lemon-brand) .lemon-table-wrap > table thead th:first-child {
  overflow-wrap: normal;
}
:where(.lemon-brand) tbody th {
  background: transparent;
  color: var(--lemon-text-primary);
  font-weight: var(--lemon-weight-medium);
}
/* Let long technical identifiers yield inside semantic ledger columns. */
:where(.lemon-brand)
  .lemon-table-wrap
  > table
  :is(th, td):not([data-align="numeric"]):not(.lemon-numeric)
  .lemon-mono:not(.lemon-numeric) {
  overflow-wrap: anywhere;
  word-break: normal;
}
:where(.lemon-brand) tbody tr:last-child > :where(th, td) {
  border-bottom-color: var(--lemon-border-default);
}
:where(.lemon-brand) .lemon-numeric {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-wrap: normal;
}
:where(.lemon-brand) :where(th, td)[data-align="numeric"],
:where(.lemon-brand) :where(th, td).lemon-numeric {
  white-space: nowrap;
  overflow-wrap: normal;
  text-align: right;
}
:where(.lemon-brand) .lemon-table-wrap[data-density="compact"] :where(th, td) {
  padding: 5px var(--lemon-space-2);
}
/* Comparison rows earn the yellow dot, not a color wash: emphasis stays quiet
 * and paired with the glyph the author supplies. */
:where(.lemon-brand)
  .lemon-table-wrap[data-variant="comparison"]
  tbody
  tr[data-recommended="true"],
:where(.lemon-brand)
  .lemon-table-wrap[data-variant="comparison"]
  :where(th, td)[data-recommended="true"],
:where(.lemon-brand) :where(tr, th, td).lemon-table-emphasis {
  background: var(--lemon-surface-secondary);
}
:where(.lemon-brand)
  .lemon-table-wrap[data-variant="comparison"]
  tbody
  tr[data-recommended="true"]
  > :first-child {
  font-weight: var(--lemon-weight-medium);
}
:where(.lemon-brand)
  .lemon-table-wrap[data-sticky-first="true"]
  :where(th, td):first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--lemon-surface-primary);
  box-shadow: inset -1px 0 var(--lemon-border-subtle);
}
:where(.lemon-brand)
  .lemon-table-wrap[data-sticky-first="true"]
  thead
  th:first-child {
  z-index: 2;
  background: var(--lemon-surface-secondary);
}
:where(.lemon-brand)
  .lemon-table-wrap[data-sticky-first="true"][data-variant="comparison"]
  tbody
  tr[data-recommended="true"]
  > :first-child,
:where(.lemon-brand)
  .lemon-table-wrap[data-sticky-first="true"]
  :where(th, td):first-child.lemon-table-emphasis {
  background: var(--lemon-surface-secondary);
  box-shadow: inset -1px 0 var(--lemon-border-subtle);
}
:where(.lemon-brand) .lemon-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lemon-space-3) var(--lemon-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand) .lemon-legend > li + li {
  margin-block-start: 0;
}
:where(.lemon-brand) .lemon-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-inline-end: var(--lemon-space-2);
  border: 1px solid rgba(13, 27, 42, 0.28);
  border-radius: 3px;
  background: var(--lemon-series-color, var(--lemon-chart-1));
}
:where(.lemon-brand) .lemon-series-1 {
  --lemon-series-color: var(--lemon-chart-1);
}
:where(.lemon-brand) .lemon-series-2 {
  --lemon-series-color: var(--lemon-chart-2);
}
:where(.lemon-brand) .lemon-series-3 {
  --lemon-series-color: var(--lemon-chart-3);
}
:where(.lemon-brand) .lemon-series-4 {
  --lemon-series-color: var(--lemon-chart-4);
}
:where(.lemon-brand) .lemon-series-5 {
  --lemon-series-color: var(--lemon-chart-5);
}
:where(.lemon-brand) .lemon-series-6 {
  --lemon-series-color: var(--lemon-chart-6);
}
/* Dash patterns keep monochrome series distinguishable without color alone. */
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-stroke.lemon-series-2,
    .lemon-series-2 .lemon-series-stroke
  ) {
  stroke-dasharray: 8 4;
}
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-stroke.lemon-series-3,
    .lemon-series-3 .lemon-series-stroke
  ) {
  stroke-dasharray: 3 3;
}
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-stroke.lemon-series-4,
    .lemon-series-4 .lemon-series-stroke
  ) {
  stroke-dasharray: 10 3 2 3;
}
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-stroke.lemon-series-5,
    .lemon-series-5 .lemon-series-stroke
  ) {
  stroke-dasharray: 1 4;
}
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-stroke.lemon-series-6,
    .lemon-series-6 .lemon-series-stroke
  ) {
  stroke-dasharray: 12 4 3 4;
}
/* Narrative roles add emphasis without changing an assigned category color.
 * The primary role is the one sanctioned yellow series moment. */
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-primary:not(
      .lemon-series-1,
      .lemon-series-2,
      .lemon-series-3,
      .lemon-series-4,
      .lemon-series-5,
      .lemon-series-6
    ),
    [data-role="primary"]:not(
      .lemon-series-1,
      .lemon-series-2,
      .lemon-series-3,
      .lemon-series-4,
      .lemon-series-5,
      .lemon-series-6
    )
  ) {
  --lemon-series-color: var(--lemon-yellow);
}
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-stroke.lemon-series-primary,
    .lemon-series-primary .lemon-series-stroke,
    .lemon-series-stroke[data-role="primary"],
    [data-role="primary"] .lemon-series-stroke
  ) {
  stroke-width: 2.5;
}
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-reference:not(
      .lemon-series-1,
      .lemon-series-2,
      .lemon-series-3,
      .lemon-series-4,
      .lemon-series-5,
      .lemon-series-6
    ),
    [data-role="reference"]:not(
      .lemon-series-1,
      .lemon-series-2,
      .lemon-series-3,
      .lemon-series-4,
      .lemon-series-5,
      .lemon-series-6
    )
  ) {
  --lemon-series-color: var(--lemon-chart-2);
}
:where(.lemon-brand)
  .lemon-chart
  :where(
    .lemon-series-stroke.lemon-series-reference,
    .lemon-series-reference .lemon-series-stroke,
    .lemon-series-stroke[data-role="reference"],
    [data-role="reference"] .lemon-series-stroke
  ) {
  stroke-dasharray: 4 4;
  stroke-width: 1.5;
}
/* LEMON control shapes. The CTA (primary) is the yellow button with navy
 * text; secondary is the quiet hairline outline; ghost has no border at all. */
:where(.lemon-brand) :where(button, .lemon-button) {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: var(--lemon-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--lemon-space-2);
  border: 1px solid var(--lemon-border-default);
  border-radius: var(--lemon-radius-control);
  background: transparent;
  color: var(--lemon-text-primary);
  padding: 7px 18px;
  font: var(--lemon-weight-semibold) 0.9375rem/1.25 var(--lemon-font-sans);
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out,
    filter 150ms ease-out;
}
:where(.lemon-brand) :where(button, .lemon-button) > :where(img, svg) {
  flex: none;
}
:where(.lemon-brand) :where(button, .lemon-button):hover {
  border-color: var(--lemon-border-strong);
  background: rgba(13, 27, 42, 0.05);
}
:where(.lemon-brand) :where(button, .lemon-button)[data-variant="primary"] {
  border-color: var(--lemon-yellow);
  background: var(--lemon-yellow);
  color: #0d1b2a;
  font-weight: var(--lemon-weight-bold);
}
:where(.lemon-brand)
  :where(button, .lemon-button)[data-variant="primary"]:hover {
  filter: brightness(0.97);
  background: var(--lemon-yellow);
}
:where(.lemon-brand) :where(button, .lemon-button)[data-variant="ghost"] {
  border-color: transparent;
  background: transparent;
  color: var(--lemon-text-secondary);
}
:where(.lemon-brand) :where(button, .lemon-button)[data-variant="ghost"]:hover {
  border-color: transparent;
  background: rgba(13, 27, 42, 0.05);
  color: var(--lemon-text-primary);
}
:where(.lemon-brand) :where(button, .lemon-button):active {
  background: rgba(13, 27, 42, 0.08);
}
:where(.lemon-brand)
  :where(button, .lemon-button)[data-variant="primary"]:active {
  filter: brightness(0.94);
  background: var(--lemon-yellow);
}
/* Pressed / selected controls flip to the structural navy surface. */
:where(.lemon-brand)
  :where(
    button[aria-pressed="true"],
    .lemon-button[aria-pressed="true"],
    button[data-selected="true"],
    .lemon-button[data-selected="true"],
    button[data-state="active"],
    .lemon-button[data-state="active"]
  ) {
  border-color: var(--lemon-text-primary);
  background: var(--lemon-text-primary);
  color: #fffdf7;
  color: light-dark(#fffdf7, #0d1b2a);
}
:where(.lemon-brand)
  :where(
    button[aria-pressed="true"],
    .lemon-button[aria-pressed="true"],
    button[data-selected="true"],
    .lemon-button[data-selected="true"],
    button[data-state="active"],
    .lemon-button[data-state="active"]
  ):hover {
  border-color: var(--lemon-text-primary);
  background: var(--lemon-text-primary);
}
:where(.lemon-brand)
  :where(button, .lemon-button):where(:disabled, [aria-disabled="true"]) {
  border-color: var(--lemon-border-subtle);
  background: var(--lemon-neutral);
  color: var(--lemon-text-muted);
  cursor: not-allowed;
  filter: none;
  opacity: 0.5;
}
:where(.lemon-brand)
  :where(button, .lemon-button)[data-variant="primary"]:where(
    :disabled,
    [aria-disabled="true"]
  ) {
  border-color: var(--lemon-yellow);
  background: var(--lemon-yellow);
  color: #0d1b2a;
  opacity: 0.5;
}
:where(.lemon-brand)
  :where(button, .lemon-button)[data-variant="ghost"]:where(
    :disabled,
    [aria-disabled="true"]
  ) {
  border-color: transparent;
  background: transparent;
  opacity: 0.5;
}
/* Buttons inside the navy emphasis band: quiet controls become white-outline
 * ghosts and the primary CTA flips to white on navy. */
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(button, .lemon-button) {
  border-color: var(--lemon-border-on-contrast);
  background: transparent;
  color: var(--lemon-text-on-contrast);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(button, .lemon-button)[data-variant="primary"] {
  border-color: var(--lemon-text-on-contrast);
  background: var(--lemon-text-on-contrast);
  color: #0d1b2a;
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(button, .lemon-button):hover {
  border-color: var(--lemon-text-on-contrast-secondary);
  background: var(--lemon-border-on-contrast);
  color: var(--lemon-text-on-contrast);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(button, .lemon-button)[data-variant="primary"]:hover {
  border-color: var(--lemon-text-on-contrast);
  background: var(--lemon-text-on-contrast);
  filter: brightness(0.95);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(button, .lemon-button)[data-variant="ghost"] {
  border-color: var(--lemon-text-on-contrast);
  color: var(--lemon-text-on-contrast);
}
:where(.lemon-brand)
  .lemon-band[data-tone="contrast"]
  :where(
    button[aria-pressed="true"],
    .lemon-button[aria-pressed="true"],
    button[data-selected="true"],
    .lemon-button[data-selected="true"]
  ) {
  border-color: var(--lemon-text-on-contrast);
  background: var(--lemon-text-on-contrast);
  color: #0d1b2a;
}
/* Inside the yellow final-CTA band the primary flips to navy with cream text;
 * ghost and outline controls read as navy text on yellow. */
:where(.lemon-brand)
  .lemon-band[data-tone="accent"]
  :where(button, .lemon-button) {
  border-color: rgba(13, 27, 42, 0.24);
  background: transparent;
  color: #0d1b2a;
}
:where(.lemon-brand)
  .lemon-band[data-tone="accent"]
  :where(button, .lemon-button)[data-variant="primary"] {
  border-color: #0d1b2a;
  background: #0d1b2a;
  color: #fffdf7;
}
:where(.lemon-brand)
  .lemon-band[data-tone="accent"]
  :where(button, .lemon-button)[data-variant="primary"]:hover {
  filter: none;
  background: rgba(13, 27, 42, 0.88);
}
:where(.lemon-brand)
  .lemon-band[data-tone="accent"]
  :where(button, .lemon-button)[data-variant="ghost"] {
  border-color: transparent;
  color: #0d1b2a;
}
:where(.lemon-brand)
  .lemon-band[data-tone="accent"]
  :where(button, .lemon-button):hover {
  background: rgba(13, 27, 42, 0.08);
}
:where(.lemon-brand) .lemon-action-row,
:where(.lemon-brand) .lemon-actions,
:where(.lemon-brand) .lemon-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lemon-space-3);
}
:where(.lemon-brand)
  :where(.lemon-action-row, .lemon-actions, .lemon-cluster)
  > * {
  margin-block: 0;
}
:where(.lemon-brand)
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
  width: 100%;
  min-height: var(--lemon-control-height);
  border: 1px solid var(--lemon-border-default);
  border-radius: var(--lemon-radius-control);
  background: var(--lemon-surface-primary);
  color: var(--lemon-text-primary);
  padding: var(--lemon-space-2) var(--lemon-space-3);
  font: var(--lemon-weight-regular) 0.9375rem/1.4 var(--lemon-font-sans);
}
:where(.lemon-brand)
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ):hover {
  border-color: var(--lemon-border-strong);
}
:where(.lemon-brand)
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ):disabled {
  cursor: not-allowed;
  background: var(--lemon-surface-secondary);
  color: var(--lemon-text-secondary);
  opacity: 0.7;
}
:where(.lemon-brand)
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not(
        [type="range"]
      )[aria-invalid="true"],
    select[aria-invalid="true"],
    textarea[aria-invalid="true"],
    input:not([type="checkbox"]):not([type="radio"]):not(
        [type="range"]
      ):user-invalid,
    select:user-invalid,
    textarea:user-invalid,
    .lemon-field[data-invalid="true"] input,
    .lemon-field[data-invalid="true"] select,
    .lemon-field[data-invalid="true"] textarea
  ) {
  border-color: var(--lemon-color-error);
}
:where(.lemon-brand) input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 28px;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  accent-color: var(--lemon-text-primary);
  cursor: pointer;
}
:where(.lemon-brand) input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: var(--lemon-radius-pill);
  background: var(--lemon-border-default);
}
:where(.lemon-brand) input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid var(--lemon-surface-primary);
  border-radius: 50%;
  background: var(--lemon-text-primary);
  box-shadow: 0 0 0 1px var(--lemon-border-strong);
}
:where(.lemon-brand) input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: var(--lemon-radius-pill);
  background: var(--lemon-border-default);
}
:where(.lemon-brand) input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: var(--lemon-radius-pill);
  background: var(--lemon-text-primary);
}
:where(.lemon-brand) input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--lemon-surface-primary);
  border-radius: 50%;
  background: var(--lemon-text-primary);
  box-shadow: 0 0 0 1px var(--lemon-border-strong);
}
:where(.lemon-brand) input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
:where(.lemon-brand) .lemon-range-ends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lemon-space-4);
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-label);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
:where(.lemon-brand) :where(.lemon-range-min, .lemon-range-max) {
  margin: 0;
}
:where(.lemon-brand) .lemon-range-max {
  margin-inline-start: auto;
  text-align: end;
}
:where(.lemon-brand) :where(input[type="checkbox"], input[type="radio"]) {
  width: auto;
  min-height: auto;
  accent-color: var(--lemon-text-primary);
}
:where(.lemon-brand) .lemon-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lemon-space-6);
  border: 0;
  border-radius: 0;
  padding: 0;
}
:where(.lemon-brand)
  :where(
    .lemon-calculator[data-variant="contained"],
    .lemon-calculator[data-contained="true"]
  ) {
  border: 1px solid var(--lemon-border-subtle);
  border-radius: var(--lemon-radius);
  padding: var(--lemon-space-6);
}
:where(.lemon-brand) .lemon-calculator-layout,
:where(.lemon-brand) .lemon-calculator[data-layout="split"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lemon-space-6);
}
@supports selector(.lemon-calculator:has(> .lemon-calculator-inputs)) {
  /* Preferred calculator composition. Source order keeps the decisive result
   * first on narrow screens while desktop places one control column beside one
   * continuous result column. The generated grid line is the only divider. */
  :where(.lemon-brand)
    :where(.lemon-calculator, .lemon-calculator-layout):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden])) {
    grid-template-columns: minmax(0, 5fr) minmax(260px, 4fr);
    grid-template-areas: "inputs output";
    gap: var(--lemon-space-8);
    align-items: stretch;
  }
  :where(.lemon-brand)
    :where(.lemon-calculator, .lemon-calculator-layout):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))
    > .lemon-calculator-inputs {
    grid-area: inputs;
  }
  :where(.lemon-brand)
    :where(.lemon-calculator, .lemon-calculator-layout):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))
    > .lemon-calculator-output {
    grid-area: output;
  }
  :where(.lemon-brand)
    .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden])) {
    grid-template-columns: minmax(0, 5fr) 1px minmax(260px, 4fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "inputs divider primary"
      "inputs divider output";
    column-gap: 0;
    row-gap: var(--lemon-space-6);
    align-items: start;
  }
  :where(.lemon-brand)
    .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))::before {
    content: "";
    grid-area: divider;
    align-self: stretch;
    background: var(--lemon-border-subtle);
  }
  :where(.lemon-brand)
    .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))
    > .lemon-result[data-priority="primary"] {
    grid-area: primary;
    border-block-start: 0;
    padding-block-start: 0;
    padding-inline-start: var(--lemon-space-8);
  }
  :where(.lemon-brand)
    .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))
    > .lemon-calculator-inputs {
    grid-area: inputs;
    padding-inline-end: var(--lemon-space-8);
  }
  :where(.lemon-brand)
    .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))
    > .lemon-calculator-output {
    grid-area: output;
    border-inline-start: 0;
    padding-inline-start: var(--lemon-space-8);
  }
}
:where(.lemon-brand)
  :where(.lemon-calculator-inputs, .lemon-calculator-output) {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--lemon-space-6);
}
:where(.lemon-brand) .lemon-calculator-output {
  border-inline-start: 0;
  padding-inline-start: 0;
}
/* The output owns the split boundary instead of inheriting it from source
 * order. */
@supports selector(.lemon-calculator:has(> .lemon-calculator-inputs)) {
  :where(.lemon-brand)
    :where(.lemon-calculator, .lemon-calculator-layout):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))
    > .lemon-calculator-output {
    border-inline-start: 1px solid var(--lemon-border-subtle);
    padding-inline-start: var(--lemon-space-8);
  }
}
:where(.lemon-brand) .lemon-calculator-output > :where(h2, h3, h4, p) {
  margin-block: 0;
}
:where(.lemon-brand) .lemon-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lemon-space-2);
}
:where(.lemon-brand) .lemon-control-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lemon-space-4);
  min-width: 0;
}
:where(.lemon-brand) .lemon-unit-field {
  display: flex;
  min-width: 0;
  min-height: var(--lemon-control-height);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--lemon-border-default);
  border-radius: var(--lemon-radius-control);
  background: var(--lemon-surface-primary);
}
:where(.lemon-brand) .lemon-unit-field:hover {
  border-color: var(--lemon-border-strong);
}
:where(.lemon-brand) .lemon-unit-field:focus-within {
  border-color: var(--lemon-focus);
  outline: 2px solid var(--lemon-focus);
  outline-offset: 2px;
}
:where(.lemon-brand)
  .lemon-unit-field
  > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  min-width: 0;
  min-height: calc(var(--lemon-control-height) - 2px);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: var(--lemon-space-3);
  outline: 0;
}
:where(.lemon-brand)
  .lemon-unit-field
  > :where(.lemon-unit-prefix, .lemon-unit-suffix, .lemon-unit) {
  flex: none;
  color: var(--lemon-text-secondary);
  padding-inline: var(--lemon-space-3);
  font-size: var(--lemon-type-compact);
  line-height: var(--lemon-leading-compact);
  white-space: nowrap;
}
:where(.lemon-brand) .lemon-unit-field > .lemon-unit-prefix {
  padding-inline-end: 0;
}
:where(.lemon-brand)
  .lemon-unit-field
  > :where(.lemon-unit-suffix, .lemon-unit) {
  padding-inline-start: 0;
}
:where(.lemon-brand)
  :where(
    .lemon-unit-field[data-invalid="true"],
    .lemon-unit-field:has(> [aria-invalid="true"]),
    .lemon-unit-field:has(> :user-invalid),
    .lemon-field[data-invalid="true"] .lemon-unit-field
  ) {
  border-color: var(--lemon-color-error);
}
:where(.lemon-brand) .lemon-helper,
:where(.lemon-brand) .lemon-error {
  margin-block: 0;
  font-size: var(--lemon-type-label);
  line-height: 1.5;
}
:where(.lemon-brand) .lemon-helper {
  color: var(--lemon-text-secondary);
}
:where(.lemon-brand) .lemon-error {
  color: var(--lemon-color-error);
  font-weight: var(--lemon-weight-medium);
}
:where(.lemon-brand) .lemon-error:empty {
  display: none;
}
:where(.lemon-brand)
  :where(
    .lemon-calculator,
    .lemon-field,
    .lemon-result,
    .lemon-calculator > *
  ) {
  min-width: 0;
}
:where(.lemon-brand) .lemon-result {
  display: grid;
  align-content: start;
  gap: var(--lemon-space-1);
  border-top: 1px solid var(--lemon-border-subtle);
  padding-block-start: var(--lemon-space-4);
  font-variant-numeric: tabular-nums;
}
:where(.lemon-brand)
  .lemon-opening-proof
  > .lemon-result[data-priority="primary"] {
  border-block-start: 0;
  padding-block-start: 0;
}
:where(.lemon-brand)
  .lemon-calculator-output
  > .lemon-result:nth-child(1 of .lemon-result) {
  border-top: 0;
  padding-block-start: 0;
}
:where(.lemon-brand)
  :is(.lemon-result-label, .lemon-result > .lemon-label:first-child) {
  margin: 0;
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-label);
  line-height: 1.5;
}
:where(.lemon-brand)
  :is(.lemon-result-value, .lemon-result > :is(strong, output):nth-child(2)) {
  margin: 0;
  color: var(--lemon-text-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--lemon-weight-extrabold);
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  max-inline-size: 100%;
  overflow-wrap: normal;
  word-break: normal;
}
:where(.lemon-brand)
  :where(.lemon-metric, .lemon-result)[data-priority="supporting"]
  :is(
    .lemon-metric-value,
    .lemon-result-value,
    :is(strong, output):nth-child(2)
  ),
:where(.lemon-brand)
  :where(.lemon-metric-value, .lemon-result-value)[data-priority="supporting"] {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}
:where(.lemon-brand)
  :where(.lemon-stat, .lemon-metric, .lemon-result)[data-priority="primary"]
  :is(
    .lemon-stat-value,
    .lemon-metric-value,
    .lemon-result-value,
    :is(strong, output):nth-child(2)
  ),
:where(.lemon-brand)
  :where(
    .lemon-stat-value,
    .lemon-metric-value,
    .lemon-result-value
  )[data-priority="primary"],
:where(.lemon-brand) .lemon-value-primary {
  color: var(--lemon-text-primary);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--lemon-weight-extrabold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.15;
  max-inline-size: 100%;
  overflow-wrap: normal;
  word-break: normal;
}
/* Values scale to the width of the peer track that owns them. */
@supports (font-size: 1cqi) {
  :where(.lemon-brand)
    :where(
      .lemon-stat-strip,
      .lemon-metrics,
      .lemon-result-group,
      .lemon-stat,
      .lemon-metric,
      .lemon-result
    ) {
    container-type: inline-size;
  }
  :where(.lemon-brand)
    :is(
      .lemon-stat-value,
      .lemon-metric-value,
      .lemon-result-value,
      .lemon-stat > :is(strong, output):nth-child(2),
      .lemon-metric > :is(strong, output):nth-child(2),
      .lemon-result > :is(strong, output):nth-child(2)
    ) {
    font-size: clamp(1.25rem, 12cqi, 2rem);
  }
  :where(.lemon-brand)
    :where(.lemon-stat, .lemon-metric, .lemon-result)[data-priority="primary"]
    :is(
      .lemon-stat-value,
      .lemon-metric-value,
      .lemon-result-value,
      :is(strong, output):nth-child(2)
    ),
  :where(.lemon-brand)
    :where(
      .lemon-stat-value,
      .lemon-metric-value,
      .lemon-result-value
    )[data-priority="primary"] {
    font-size: clamp(1.5rem, 14cqi, 2.5rem);
  }
}
/* Visual peers keep one value role; priority must be expressed outside the
 * peer group. */
:where(.lemon-brand)
  :is(
    .lemon-stat-strip > .lemon-stat,
    .lemon-metrics > .lemon-metric,
    .lemon-result-group > .lemon-result
  )
  :is(.lemon-stat-value, .lemon-metric-value, .lemon-result-value),
:where(.lemon-brand)
  :is(
    .lemon-stat-strip > .lemon-stat,
    .lemon-metrics > .lemon-metric,
    .lemon-result-group > .lemon-result
  )
  > :is(strong, output):nth-child(2) {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
@supports (font-size: 1cqi) {
  :where(.lemon-brand)
    :is(
      .lemon-stat-strip > .lemon-stat,
      .lemon-metrics > .lemon-metric,
      .lemon-result-group > .lemon-result
    )
    :is(.lemon-stat-value, .lemon-metric-value, .lemon-result-value),
  :where(.lemon-brand)
    :is(
      .lemon-stat-strip > .lemon-stat,
      .lemon-metrics > .lemon-metric,
      .lemon-result-group > .lemon-result
    )
    > :is(strong, output):nth-child(2) {
    font-size: clamp(1.25rem, 4cqi, 2rem);
  }
}
:where(.lemon-brand) :is(.lemon-result-detail, .lemon-result > .lemon-meta) {
  margin: var(--lemon-space-1) 0 0;
  color: var(--lemon-text-secondary);
  font-size: var(--lemon-type-compact);
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand) .lemon-result-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--lemon-space-8);
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
:where(.lemon-brand) .lemon-result-group > * {
  min-width: 0;
}
/* Horizontal result peers are one visual group, not a stack of ruled
 * results. */
:where(.lemon-brand) .lemon-result-group > .lemon-result {
  border-top: 0;
  padding-block-start: 0;
}
/* Keep peer labels, values, and details on shared rows. */
@supports not (grid-template-rows: subgrid) {
  :where(.lemon-brand)
    :is(
      .lemon-stat-strip
        > .lemon-stat
        > :is(.lemon-stat-label, .lemon-label):first-child,
      .lemon-metrics
        > .lemon-metric
        > :is(.lemon-metric-label, .lemon-label):first-child,
      .lemon-result-group
        > .lemon-result
        > :is(.lemon-result-label, .lemon-label):first-child
    ) {
    min-block-size: calc(2 * 1.125rem);
  }
}
@supports (grid-template-rows: subgrid) {
  :where(.lemon-brand)
    :is(.lemon-stat-strip, .lemon-metrics, .lemon-result-group) {
    row-gap: var(--lemon-space-2);
  }
  :where(.lemon-brand)
    :is(
      .lemon-stat-strip > .lemon-stat,
      .lemon-metrics > .lemon-metric,
      .lemon-result-group > .lemon-result
    ) {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--lemon-space-2);
    container-type: normal;
  }
  :where(.lemon-brand)
    :is(
      .lemon-stat-strip > .lemon-stat,
      .lemon-metrics > .lemon-metric,
      .lemon-result-group > .lemon-result
    ):not(:last-child) {
    margin-block-end: calc(var(--lemon-space-8) - var(--lemon-space-2));
  }
}
/* Frame a flat evidence or table region with a parent .lemon-surface; do not
 * combine the classes on one node. */
:where(.lemon-brand)
  :where(.lemon-surface, .lemon-evidence, .lemon-calculator)
  :is(.lemon-surface, .lemon-evidence, .lemon-calculator, .lemon-table-wrap) {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
:where(.lemon-brand) .lemon-sources {
  color: var(--lemon-text-secondary);
  font-size: 0.8125rem;
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand) .lemon-footer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lemon-space-6);
  align-items: center;
  border: 0;
  padding-block: var(--lemon-space-16) 0;
  color: var(--lemon-text-secondary);
  font-size: 0.8125rem;
  line-height: var(--lemon-leading-compact);
}
:where(.lemon-brand) .lemon-footer > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin-block: 0;
}
:where(.lemon-brand) .lemon-footer > .lemon-logo {
  grid-column: 1;
  color: var(--lemon-text-primary);
}
@supports selector(.lemon-footer:has(> :nth-child(2):last-child)) {
  :where(.lemon-brand)
    .lemon-footer:has(> .lemon-logo:first-child):has(> :nth-child(2):last-child)
    > :nth-child(2) {
    grid-column: 8 / -1;
    justify-self: end;
    text-align: end;
  }
}
:where(.lemon-brand) select {
  background-color: var(--lemon-surface-primary);
}
:where(.lemon-brand) textarea {
  min-height: 96px;
  resize: vertical;
}
:where(.lemon-brand) details {
  border-top: 1px solid var(--lemon-border-subtle);
  padding-block: var(--lemon-space-4);
}
:where(.lemon-brand) summary {
  font-weight: var(--lemon-weight-medium);
  cursor: pointer;
}
:where(.lemon-brand) .lemon-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
:where(.lemon-brand) .lemon-skip-link {
  position: fixed;
  inset-block-start: var(--lemon-space-3, 12px);
  inset-inline-start: var(--lemon-space-3, 12px);
  z-index: 1000;
  transform: translateY(calc(-100% - var(--lemon-space-6, 24px)));
  border-radius: var(--lemon-radius-control, 10px);
  background: var(--lemon-navy, #0d1b2a);
  color: var(--lemon-canvas, #fffdf7);
  padding: var(--lemon-space-2, 8px) var(--lemon-space-3, 12px);
  font-family: var(
    --lemon-font-sans,
    "Plus Jakarta Sans",
    ui-sans-serif,
    system-ui,
    sans-serif
  );
  font-size: 0.875rem;
  font-weight: var(--lemon-weight-medium, 500);
  line-height: 1.25rem;
}
:where(.lemon-brand) .lemon-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--lemon-focus, #ffd900);
  outline-offset: 2px;
}
/* Three equal peers stay one row on wide layouts and one deliberate stack on
 * narrow layouts. */
@media (min-width: 801px) {
  @supports selector(.lemon-stat-strip:has(> :nth-child(3):last-child)) {
    :where(.lemon-brand)
      :is(
        .lemon-stat-strip,
        .lemon-metrics,
        .lemon-comparison,
        .lemon-result-group
      ):has(> :nth-child(3):last-child) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
@media (max-width: 800px) {
  @supports selector(.lemon-stat-strip:has(> :nth-child(3):last-child)) {
    :where(.lemon-brand)
      :is(
        .lemon-stat-strip,
        .lemon-metrics,
        .lemon-comparison,
        .lemon-result-group
      ):has(> :nth-child(3):last-child) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}
@media (min-width: 801px) and (max-width: 900px) {
  :where(.lemon-brand) .lemon-stat-strip[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@supports selector(.lemon-stat-strip:has(> .lemon-stat)) {
  @media (min-width: 801px) and (max-width: 900px) {
    :where(.lemon-brand)
      .lemon-stat-strip:has(> .lemon-stat:nth-child(4):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}
@media (min-width: 600px) and (max-width: 1000px) {
  :where(.lemon-brand)
    :is(.lemon-header, .lemon-section, .lemon-footer, .lemon-grid) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  :where(.lemon-brand) .lemon-opening {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  :where(.lemon-brand)
    .lemon-opening[data-layout="split"]
    > .lemon-opening-claim {
    grid-column: 1 / span 3;
  }
  :where(.lemon-brand)
    .lemon-opening[data-layout="split"]
    > .lemon-opening-proof {
    grid-column: 4 / -1;
  }
  :where(.lemon-brand)
    .lemon-opening[data-layout="split"]
    > .lemon-opening-context {
    grid-column: 1 / span 3;
  }
  :where(.lemon-brand)
    .lemon-header
    > :where(h1, .lemon-title, .lemon-display) {
    grid-column: 1 / span 5;
  }
  :where(.lemon-brand) .lemon-header > :where(.lemon-summary, .lemon-lede),
  :where(.lemon-brand)
    .lemon-section
    > :where(h2, h3, h4, p, ul, ol, dl, blockquote, .lemon-reading) {
    grid-column: 1 / span 4;
  }
  :where(.lemon-brand)
    :where(.lemon-span-6, .lemon-span-7, .lemon-span-8, .lemon-span-12) {
    grid-column: 1 / -1;
  }
  @supports selector(.lemon-footer:has(> :nth-child(2):last-child)) {
    :where(.lemon-brand)
      .lemon-footer:has(> .lemon-logo:first-child):has(
        > :nth-child(2):last-child
      )
      > :nth-child(2) {
      grid-column: 4 / -1;
    }
  }
}
@media (max-width: 599px) {
  :where(.lemon-brand)
    :is(.lemon-header, .lemon-section, .lemon-footer, .lemon-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lemon-space-4);
  }
  :where(.lemon-brand) .lemon-grid > * {
    grid-column: 1 / -1;
  }
  :where(.lemon-brand) .lemon-opening,
  :where(.lemon-brand) .lemon-opening[data-layout="split"],
  :where(.lemon-brand) .lemon-opening[data-layout="stack"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :where(.lemon-brand)
    .lemon-header
    > :where(h1, .lemon-title, .lemon-display, .lemon-summary, .lemon-lede),
  :where(.lemon-brand)
    .lemon-section
    > :where(h2, h3, h4, p, ul, ol, dl, blockquote, .lemon-reading) {
    grid-column: 1 / -1;
  }
  @supports selector(.lemon-footer:has(> :nth-child(2):last-child)) {
    :where(.lemon-brand)
      .lemon-footer:has(> .lemon-logo:first-child):has(
        > :nth-child(2):last-child
      )
      > :nth-child(2) {
      grid-column: 2 / -1;
    }
  }
}
@media (max-width: 800px) {
  :where(.lemon-brand) .lemon-overflow-cue {
    display: flex;
  }
  :where(.lemon-brand) .lemon-shell {
    width: 100%;
    padding-inline-start: calc(
      var(--lemon-space-4) + env(safe-area-inset-left, 0px)
    );
    padding-inline-end: calc(
      var(--lemon-space-4) + env(safe-area-inset-right, 0px)
    );
    padding-block: var(--lemon-space-10);
  }
  :where(.lemon-brand) .lemon-opening,
  :where(.lemon-brand) .lemon-opening[data-layout="split"],
  :where(.lemon-brand) .lemon-opening[data-layout="stack"] {
    gap: var(--lemon-space-4);
  }
  :where(.lemon-brand) .lemon-opening > .lemon-opening-claim,
  :where(.lemon-brand) .lemon-opening > .lemon-opening-proof,
  :where(.lemon-brand) .lemon-opening > .lemon-opening-context,
  :where(.lemon-brand)
    .lemon-opening[data-layout="split"]
    > .lemon-opening-claim,
  :where(.lemon-brand)
    .lemon-opening[data-layout="split"]
    > .lemon-opening-proof,
  :where(.lemon-brand)
    .lemon-opening[data-layout="split"]
    > .lemon-opening-context {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  :where(.lemon-brand) .lemon-masthead {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  :where(.lemon-brand) .lemon-masthead > * {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  @supports selector(.lemon-masthead:has(> .lemon-identity)) {
    :where(.lemon-brand)
      .lemon-masthead:has(> .lemon-identity):has(> .lemon-document-meta)
      > .lemon-identity,
    :where(.lemon-brand)
      .lemon-masthead:has(> .lemon-identity):has(> .lemon-document-meta)
      > .lemon-document-meta {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }
  :where(.lemon-brand) .lemon-document-meta {
    justify-content: flex-start;
  }
  :where(.lemon-brand) .lemon-split > *,
  :where(.lemon-brand) .lemon-next-step > * {
    grid-column: 1 / -1;
  }
  :where(.lemon-brand) .lemon-split,
  :where(.lemon-brand) .lemon-calculator-layout,
  :where(.lemon-brand) .lemon-calculator[data-layout="split"],
  :where(.lemon-brand) .lemon-result-group,
  :where(.lemon-brand) .lemon-next-step {
    grid-template-columns: minmax(0, 1fr);
  }
  @supports selector(.lemon-calculator:has(> .lemon-calculator-inputs)) {
    :where(.lemon-brand)
      :where(.lemon-calculator, .lemon-calculator-layout):has(
        > .lemon-calculator-inputs:not([hidden])
      ):has(> .lemon-calculator-output:not([hidden])) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: none;
      gap: var(--lemon-space-6);
    }
    :where(.lemon-brand)
      :where(.lemon-calculator, .lemon-calculator-layout):has(
        > .lemon-calculator-inputs:not([hidden])
      ):has(> .lemon-calculator-output:not([hidden]))
      > .lemon-calculator-inputs,
    :where(.lemon-brand)
      :where(.lemon-calculator, .lemon-calculator-layout):has(
        > .lemon-calculator-inputs:not([hidden])
      ):has(> .lemon-calculator-output:not([hidden]))
      > .lemon-calculator-output {
      grid-area: auto;
    }
    :where(.lemon-brand)
      .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
        > .lemon-calculator-inputs:not([hidden])
      ):has(> .lemon-calculator-output:not([hidden]))::before {
      display: none;
    }
    :where(.lemon-brand)
      .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
        > .lemon-calculator-inputs:not([hidden])
      ):has(> .lemon-calculator-output:not([hidden])) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      grid-template-areas: none;
      gap: var(--lemon-space-6);
    }
    :where(.lemon-brand)
      .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
        > .lemon-calculator-inputs:not([hidden])
      ):has(> .lemon-calculator-output:not([hidden]))
      > .lemon-result[data-priority="primary"],
    :where(.lemon-brand)
      .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
        > .lemon-calculator-inputs:not([hidden])
      ):has(> .lemon-calculator-output:not([hidden]))
      > .lemon-calculator-inputs,
    :where(.lemon-brand)
      .lemon-calculator:has(> .lemon-result[data-priority="primary"]):has(
        > .lemon-calculator-inputs:not([hidden])
      ):has(> .lemon-calculator-output:not([hidden]))
      > .lemon-calculator-output {
      grid-area: auto;
      padding-inline: 0;
    }
  }
  :where(.lemon-brand)
    :where(.lemon-calculator-inputs, .lemon-calculator-output) {
    border-block-start: 0;
    border-inline-start: 0;
    padding-block-start: 0;
    padding-inline-start: 0;
  }
  :where(.lemon-brand)
    :where(.lemon-calculator, .lemon-calculator-layout):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))
    > .lemon-calculator-output:not(:first-child) {
    border-block-start: 1px solid var(--lemon-border-subtle);
    border-inline-start: 0;
    padding-block-start: var(--lemon-space-6);
    padding-inline-start: 0;
  }
  :where(.lemon-brand)
    :where(.lemon-calculator, .lemon-calculator-layout):has(
      > .lemon-calculator-inputs:not([hidden])
    ):has(> .lemon-calculator-output:not([hidden]))
    > .lemon-calculator-output:first-child:not(:last-child) {
    border-block-end: 1px solid var(--lemon-border-subtle);
    border-inline-start: 0;
    padding-block-end: var(--lemon-space-6);
    padding-inline-start: 0;
  }
  :where(.lemon-brand) .lemon-next-step > .lemon-actions {
    justify-self: start;
  }
  @supports selector(.lemon-next-step:has(> :nth-child(2):last-child)) {
    :where(.lemon-brand)
      .lemon-next-step:has(> :nth-child(2):last-child)
      > :first-child,
    :where(.lemon-brand)
      .lemon-next-step:has(> :nth-child(2):last-child)
      > :nth-child(2) {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }
  :where(.lemon-brand)
    :where(
      .lemon-surface[data-variant="contained"],
      .lemon-surface[data-contained="true"],
      .lemon-calculator[data-variant="contained"],
      .lemon-calculator[data-contained="true"]
    ) {
    padding: var(--lemon-space-4);
  }
  :where(.lemon-brand) .lemon-evidence {
    padding-block: 0;
  }
  :where(.lemon-brand)
    :where(.lemon-surface, .lemon-evidence, .lemon-calculator)
    :is(.lemon-surface, .lemon-evidence, .lemon-calculator, .lemon-table-wrap) {
    padding: 0;
  }
  :where(.lemon-brand) :where(button, .lemon-button) {
    min-height: var(--lemon-control-height-touch);
  }
  :where(.lemon-brand)
    :where(
      input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
      select,
      textarea
    ) {
    min-height: var(--lemon-control-height-touch);
    font-size: 16px;
  }
  :where(.lemon-brand) :where(.lemon-unit-field, input[type="range"]) {
    min-height: var(--lemon-control-height-touch);
  }
  :where(.lemon-brand)
    .lemon-unit-field
    > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-height: calc(var(--lemon-control-height-touch) - 2px);
  }
  :where(.lemon-brand) .lemon-chart-viewport > .lemon-chart-desktop {
    display: none;
  }
  :where(.lemon-brand) .lemon-chart-viewport > .lemon-chart-mobile {
    display: block;
  }
  :where(.lemon-brand)
    .lemon-chart:not([data-mobile="scroll"])
    :where(.lemon-chart-plot, .lemon-chart-viewport > svg) {
    min-width: 0 !important;
    max-width: 100%;
  }
  :where(.lemon-brand)
    .lemon-chart[data-mobile="scroll"]
    .lemon-chart-viewport
    > :where(svg, .lemon-chart-plot) {
    min-width: var(--lemon-chart-min-width) !important;
    max-width: none;
  }
  :where(.lemon-brand) .lemon-formula {
    overflow: visible;
  }
  /* Preserve readable columns locally instead of compressing wide evidence
   * into character-level labels. */
  :where(.lemon-brand)
    .lemon-table-wrap:is(
      :not([data-mobile="stack"]),
      [data-mobile="stack"]:has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      ),
      [data-mobile="stack"]:has(tbody > tr:nth-child(6))
    )
    > table:has(> thead > tr > :nth-child(5)) {
    min-inline-size: 40rem;
  }
  :where(.lemon-brand)
    .lemon-table-wrap:is(
      :not([data-mobile="stack"]),
      [data-mobile="stack"]:has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      ),
      [data-mobile="stack"]:has(tbody > tr:nth-child(6))
    )
    > table:has(> thead > tr > :nth-child(7)) {
    min-inline-size: 52rem;
  }
  /* A successfully stacked table no longer scrolls, so an adjacent cue is
   * stale. The stack applies only when every body cell carries a data-label
   * and the table has fewer than six rows. */
  :where(.lemon-brand)
    .lemon-overflow-cue:has(+ .lemon-table-wrap[data-mobile="stack"]):not(
      :has(
        + .lemon-table-wrap[data-mobile="stack"]
          :where(tbody, tfoot)
          td:not([data-label]),
        + .lemon-table-wrap[data-mobile="stack"]
          :where(tbody, tfoot)
          td[data-label=""]
      )
    ):not(
      :has(+ .lemon-table-wrap[data-mobile="stack"] tbody > tr:nth-child(6))
    ),
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    + .lemon-overflow-cue {
    display: none;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    ) {
    overflow: visible;
    border: 0;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    :where(table, tbody, tfoot, tr, th, td) {
    display: block;
    width: 100%;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    caption {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    thead {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    :where(tbody, tfoot)
    tr {
    border-block: 1px solid var(--lemon-border-subtle);
    padding: var(--lemon-space-4) 0;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    :where(tbody, tfoot)
    tr
    + tr {
    margin-block-start: -1px;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    tfoot
    tr {
    margin-block-start: -1px;
    border-block-color: var(--lemon-border-strong);
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"][data-variant="comparison"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    tbody
    tr[data-recommended="true"] {
    border-color: var(--lemon-border-strong);
    background: var(--lemon-surface-secondary);
    padding-inline: var(--lemon-space-3);
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    :where(tbody, tfoot)
    th {
    border: 0;
    padding: 0 0 var(--lemon-space-2);
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    :where(tbody, tfoot)
    td {
    display: grid;
    grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1fr);
    gap: var(--lemon-space-3);
    border: 0;
    padding: var(--lemon-space-2) 0;
    text-align: start;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    tfoot
    :where(th, td) {
    font-weight: var(--lemon-weight-medium);
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"][data-sticky-first="true"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    :where(th, td):first-child {
    position: static;
    box-shadow: none;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"][data-sticky-first="true"][data-variant="comparison"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    tbody
    tr[data-recommended="true"]
    > :first-child {
    box-shadow: none;
  }
  :where(.lemon-brand)
    .lemon-table-wrap[data-mobile="stack"]:not(
      :has(tbody > tr:nth-child(6))
    ):not(
      :has(
        :where(tbody, tfoot) td:not([data-label]),
        :where(tbody, tfoot) td[data-label=""]
      )
    )
    :where(tbody, tfoot)
    td::before {
    content: attr(data-label);
    color: var(--lemon-text-secondary);
    font-weight: var(--lemon-weight-regular);
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
  }
}
/* Defensive mobile safety for wide semantic tables. Canonical markup should
 * still provide its own linked cue, but omitted attributes cannot make five
 * or more columns visually undiscoverable. Valid stacks and narrower native
 * tables remain unchanged. */
@media (max-width: 640px) {
  @supports selector(
    .lemon-table-wrap:has(> table > thead > tr > :nth-child(5))
  ) {
    :where(.lemon-brand)
      .lemon-table-wrap:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(5)) {
      overflow-x: auto;
      overscroll-behavior-inline: contain;
    }
    :where(.lemon-brand)
      .lemon-table-wrap:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(5)):not(
        .lemon-overflow-cue + .lemon-table-wrap
      )::before {
      content: "Scroll horizontally to see all columns.  \2192";
      position: sticky;
      inset-inline-start: 0;
      z-index: 4;
      display: block;
      inline-size: 100cqi;
      padding-block: var(--lemon-space-2);
      background: var(--lemon-surface-primary);
      color: var(--lemon-text-secondary);
      font-size: var(--lemon-type-compact);
      font-weight: var(--lemon-weight-regular);
      line-height: var(--lemon-leading-compact);
      white-space: normal;
    }
    :where(.lemon-brand[dir="rtl"])
      .lemon-table-wrap:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(5)):not(
        .lemon-overflow-cue + .lemon-table-wrap
      )::before {
      content: "Scroll horizontally to see all columns.  \2190";
    }
    :where(.lemon-brand)
      .lemon-table-wrap:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(5))
      :is(thead, tbody, tfoot)
      > tr
      > :first-child {
      position: sticky;
      inset-inline-start: 0;
      z-index: 2;
      background: var(--lemon-surface-primary);
      box-shadow: inset -1px 0 var(--lemon-border-subtle);
    }
    :where(.lemon-brand)
      .lemon-table-wrap:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(5))
      thead
      > tr
      > :first-child {
      z-index: 3;
      background: var(--lemon-surface-secondary);
    }
    :where(.lemon-brand)
      .lemon-table-wrap:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(5))[data-variant="comparison"]
      tbody
      tr[data-recommended="true"]
      > :first-child {
      background: var(--lemon-surface-secondary);
    }
    /* Replace a trailing authored cue with the source-ordered fallback above. */
    :where(.lemon-brand)
      .lemon-table-wrap:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(5))
      + .lemon-overflow-cue {
      display: none;
    }
  }
}
/* A four-column option comparison is wider than a narrow reading track even
 * though it falls below the general five-column safety threshold. Preserve a
 * valid authored stack; otherwise guarantee local overflow and expose it only
 * while the shell is narrower than the 32rem evidence floor. */
@container lemon-shell (width < 32rem) {
  @supports selector(
    .lemon-table-wrap:has(> table > thead > tr > :nth-child(4))
  ) {
    :where(.lemon-brand)
      .lemon-table-wrap[data-variant="comparison"]:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(4)):not(
        :has(> table > thead > tr > :nth-child(5))
      ):not(:has(> table > thead [colspan])) {
      overflow-x: auto;
      overscroll-behavior-inline: contain;
    }
    :where(.lemon-brand)
      .lemon-table-wrap[data-variant="comparison"]:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(4)):not(
        :has(> table > thead > tr > :nth-child(5))
      ):not(:has(> table > thead [colspan]))
      > table {
      min-inline-size: 32rem;
    }
    :where(.lemon-brand)
      .lemon-table-wrap[data-variant="comparison"]:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(4)):not(
        :has(> table > thead > tr > :nth-child(5))
      ):not(:has(> table > thead [colspan])):not(
        .lemon-overflow-cue + .lemon-table-wrap
      )::before {
      content: "Scroll horizontally to see all columns.  \2192";
      position: sticky;
      inset-inline-start: 0;
      z-index: 4;
      display: block;
      inline-size: 100cqi;
      padding-block: var(--lemon-space-2);
      background: var(--lemon-surface-primary);
      color: var(--lemon-text-secondary);
      font-size: var(--lemon-type-compact);
      font-weight: var(--lemon-weight-regular);
      line-height: var(--lemon-leading-compact);
      white-space: normal;
    }
    :where(.lemon-brand[dir="rtl"])
      .lemon-table-wrap[data-variant="comparison"]:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(4)):not(
        :has(> table > thead > tr > :nth-child(5))
      ):not(:has(> table > thead [colspan])):not(
        .lemon-overflow-cue + .lemon-table-wrap
      )::before {
      content: "Scroll horizontally to see all columns.  \2190";
    }
    :where(.lemon-brand)
      .lemon-table-wrap[data-variant="comparison"]:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(4)):not(
        :has(> table > thead > tr > :nth-child(5))
      ):not(:has(> table > thead [colspan]))
      :is(thead, tbody, tfoot)
      > tr
      > :first-child {
      position: sticky;
      inset-inline-start: 0;
      z-index: 2;
      background: var(--lemon-surface-primary);
      box-shadow: inset -1px 0 var(--lemon-border-subtle);
    }
    :where(.lemon-brand)
      .lemon-table-wrap[data-variant="comparison"]:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(4)):not(
        :has(> table > thead > tr > :nth-child(5))
      ):not(:has(> table > thead [colspan]))
      thead
      > tr
      > :first-child {
      z-index: 3;
      background: var(--lemon-surface-secondary);
    }
    :where(.lemon-brand)
      .lemon-table-wrap[data-variant="comparison"]:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(4)):not(
        :has(> table > thead > tr > :nth-child(5))
      ):not(:has(> table > thead [colspan]))
      tbody
      tr[data-recommended="true"]
      > :first-child {
      background: var(--lemon-surface-secondary);
    }
    :where(.lemon-brand)
      .lemon-table-wrap[data-variant="comparison"]:is(
        :not([data-mobile="stack"]),
        [data-mobile="stack"]:has(
          :where(tbody, tfoot) td:not([data-label]),
          :where(tbody, tfoot) td[data-label=""]
        ),
        [data-mobile="stack"]:has(tbody > tr:nth-child(6))
      ):has(> table > thead > tr > :nth-child(4)):not(
        :has(> table > thead > tr > :nth-child(5))
      ):not(:has(> table > thead [colspan]))
      + .lemon-overflow-cue {
      display: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(.lemon-brand *, .lemon-brand *::before, .lemon-brand *::after) {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  :where(.lemon-brand) .lemon-stat-strip[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (forced-colors: active) {
  :where(.lemon-brand)
    :where(
      .lemon-surface,
      .lemon-callout,
      .lemon-table-wrap,
      .lemon-calculator,
      .lemon-evidence,
      .lemon-action,
      .lemon-decision,
      .lemon-recommendation,
      .lemon-next-step,
      .lemon-band,
      .lemon-stat-strip,
      .lemon-unit-field
    ) {
    border: 1px solid CanvasText;
  }
  :where(.lemon-brand)
    :where(.lemon-surface, .lemon-evidence, .lemon-calculator)
    :is(.lemon-surface, .lemon-evidence, .lemon-calculator, .lemon-table-wrap) {
    border: 0;
  }
  :where(.lemon-brand) .lemon-stat {
    background: Canvas;
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
  :where(.lemon-brand) .lemon-band[data-tone="contrast"] {
    background: Canvas;
    color: CanvasText;
  }
  :where(.lemon-brand)
    .lemon-band[data-tone="contrast"]
    :where(
      h1,
      h2,
      h3,
      h4,
      p,
      a,
      .lemon-link,
      .lemon-label,
      .lemon-meta,
      .lemon-stat-value
    ) {
    color: CanvasText;
  }
  :where(.lemon-brand)
    :where(a, button, input, select, textarea):focus-visible {
    outline-color: Highlight;
  }
  :where(.lemon-brand)
    :where(
      button[aria-pressed="true"],
      .lemon-button[aria-pressed="true"],
      button[data-selected="true"],
      .lemon-button[data-selected="true"],
      button[data-state="active"],
      .lemon-button[data-state="active"]
    ) {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  :where(.lemon-brand) input[type="range"]::-webkit-slider-runnable-track {
    background: CanvasText;
  }
  :where(.lemon-brand) input[type="range"]::-webkit-slider-thumb {
    border-color: Canvas;
    background: Highlight;
  }
  :where(.lemon-brand) input[type="range"]::-moz-range-track {
    background: CanvasText;
  }
  :where(.lemon-brand) input[type="range"]::-moz-range-thumb {
    border-color: Canvas;
    background: Highlight;
  }
}
/*
 * Typography modifiers belong after component typography so they remain
 * composable with any published component class without using !important.
 */
:where(.lemon-brand) .lemon-mono {
  font-family: var(--lemon-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}