@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/archivo.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/archivo-italic.woff2) format('woff2')}
:root{--font-archivo:'Archivo','Helvetica Neue',Arial,sans-serif;--font-archivo-italic:'Archivo','Helvetica Neue',Arial,sans-serif}
/* The public site's stylesheet, in the RIA app's order (apps/ria-webapp/src/shared/styles/globals.css):
   element defaults, role tokens, the Meridian theme, utilities, the primitives the landing renders,
   then Tailwind. build.mjs prepends the Archivo @font-face block and appends landing.css after
   Tailwind, where the app loads it as a later <link>. postcss-import only inlines top-of-file imports. */
/*
 * Element defaults (@layer base) for the RIA app. Everything else this file carried — the retail
 * form, label and anchor recipes for unthemed documents and `legacy-forms`, the retail helper
 * classes and gradients — left with the retail app (2026-09-18, #1071): every RIA document is
 * themed, and a themed document takes its text color from roles.css and its controls and links
 * from the system stylesheets.
 */
/*
 * Role tokens — the ONE set every primitive and every RIA surface reads
 * (docs/ria_meridian_design_system_plan.md §4c; values from
 * docs/design/meridian-v2/spec.md §1). A role names a MEANING, never a hue:
 *   ink / ink2 / ink3      text, secondary text, muted text
 *   bg / sf / sf2          page ground, surface, subtle surface
 *   rule / rule2 / band    hairline, strong rule, the ground beyond a limit line
 *   acc (+ ink, tint)      the action color: primary button and links only;
 *                          "selected" is ink on --acc-tint
 *   tax (+ tint)           the tax outcome only — never a positive return
 *   warn (+ tint)          near a line, aging, a cancelled tilt
 *   neg (+ tint)           over a line, break, exceeded, tax cost
 *   computed (+ tint,      what the engine computed and has not booked
 *     pattern)             (Meridian hatches it; Flightdeck colors it magenta)
 *   nav (+ tint)           WHERE YOU ARE: the current tab (solid), nav item and filter (tint),
 *                          the sub-nav underline, the current step. Never an action, never a
 *                          state (Chris, 2026-09-09: navigation is not the action color)
 *   selected (+ tint)      what the advisor set: tolerance, budget, engaged mode — marks on scales
 *   ok / pending / planned /  the chip and why-label tones that are not a line, a budget or the tax
 *     modeled / fact (+ tint) outcome (Chris, 2026-09-09: every chip carries a color, none is grey or white,
 *                          none is hatched): ok = active/live (green), pending = draft/discovered/unstaged
 *                          (rose), planned = computed and not booked (violet; the hatch stays on figures),
 *                          modeled = from other data (sky), fact = a plain fact such as a version (slate)
 *   panel-ground           the attention block's ground (dark under Flightdeck)
 *   panel-cell (-neg,     the annunciator's cells: dark when nothing is due, lit
 *     -warn, -place)       by state when something is (Flightdeck)
 *   radius / shadow        shape tokens — components never hardcode them
 *   font-*                 type roles; the families are loaded by next/font in
 *                          apps/ria-webapp/src/shared/fonts.ts and exposed as
 *                          --font-archivo / --font-newsreader / --font-b612 /
 *                          --font-b612-mono / --font-plex / --font-hanken (plan T0.2).
 *                          --font-display leads a figure or a title; --font-label
 *                          sets eyebrows, table headers, chips, buttons and the
 *                          chrome — the same face by default, a sans under a
 *                          theme whose display face is a serif (Charter)
 *   hero-*                 a page's headline strip (KpiStrip `hero`): the plain
 *                          strip's own colors on the second surface by default;
 *                          Charter's slate band
 *   series-1..6            identity palettes (chart series, sleeves) — not status, and since
 *                          2026-09-09 no series shares a hue with the action, tax, warn, neg or
 *                          direction roles (docs/design/color_plan.md)
 *
 * Scope: defined under [data-theme] (any theme), NOT :root, so pages without
 * the attribute — the marketing landing, and retail until it migrates — keep
 * their own palettes untouched. apps/ria-webapp/src/pages/_document.tsx puts
 * data-theme on <html> for every app surface. The defaults below are Meridian
 * V2; themes/*.css override per theme. No legacy variable name is aliased onto
 * a role any more (the alias layer retired with review item 10, 2026-09-05):
 * a themed surface reads roles, and the RIA Tailwind preset points every legacy
 * class key at a role directly.
 */
[data-theme] {
  /* The themed document's ink: base.css colors <html> with retail's --black; a theme colors it with its ink. */
  color: var(--ink);

  --bg: #eef1f5;
  --sf: #ffffff;
  --sf2: #f8f9fc;
  /* the fill under a hovered table row (DataTable, the exposure table) */
  --hover: #f6f7fa;
  /* the ground and ink of a state chip in a card head */
  --chip: #f3f4f7;
  --chip-ink: #4b5060;

  /* a chart card's chrome (design 2026-09-08): the benchmark line in mid-grey, solid hairline grid, the
     zero line one step darker, event markers, and the area fill under a secondary strip */
  --chart-bench: #6b7280;
  --chart-grid: #edeff3;
  --chart-zero: #cdd1da;
  --chart-anno: #b9bec9;
  --chart-area: rgba(107, 114, 128, 0.1);

  --ink: #0e1626;
  --ink2: #46505e;
  --ink3: #66707f;
  /* the faintest text: unit notes, incidental words, the chip dot */
  --faint: #a3a8b4;

  --rule: #dde2e9;
  --rule2: #b9c2cf;
  --band: #eef0f4;

  --acc: #2f44b8;
  --acc-ink: #24359a;
  --acc-tint: #e8ebfa;

  --tax: #0f8f7c;
  --tax-tint: #e1f4f0;

  --warn: #b26a00;
  --warn-tint: #fff4e0;

  --neg: #b3261e;

  /* Direction: the sign of a return or tilt MARK (a bar, a grid tint, a signed σ in a research table); figures on the strip and the paper stay ink. */

  --up: #2e7d32;

  --up-tint: #e3f1e4;

  --down: #c2410c;

  --down-tint: #fbe9e1;
  --neg-tint: #fbe9e7;

  --computed: #0e1626;
  --computed-tint: #f8f9fc;
  --computed-pattern: repeating-linear-gradient(45deg, rgba(14, 22, 38, 0.16) 0 1.5px, transparent 1.5px 6px);

  --selected: #0e1626;
  --selected-tint: #e2e7ef;

  /* where you are (2026-09-09): ink, on a slate tint that is not the action tint */
  --nav: #0e1626;
  --nav-tint: #e2e7ef;

  /* chip tones beyond the line/budget/tax roles (2026-09-09) */
  --ok: #2e7d32;
  --ok-tint: #e3f1e4;
  --pending: #a8327a;
  --pending-tint: #fbe4f1;
  --planned: #6b3fc7;
  --planned-tint: #ede6fb;
  --modeled: #0b7c9a;
  --modeled-tint: #dcf1f7;
  --fact: #3b5a80;
  --fact-tint: #e3ebf5;

  --panel-ground: #ffffff;
  --panel-ground-text: #0e1626;
  /* tones drawn ON the panel ground (the state line under Flightdeck): the same roles by default */
  --on-panel-value: #0e1626;
  --on-panel-selected: #0e1626;
  --on-panel-warn: #b26a00;
  --on-panel-neg: #b3261e;
  --on-panel-computed: #0e1626;
  --on-panel-dim: #7a8494;
  --on-panel-rule: #dde2e9;
  --panel-cell: #f8f9fc;
  --panel-cell-rule: #dde2e9;
  --panel-cell-text: #7a8494;
  --panel-cell-neg: #fbe9e7;
  --panel-cell-neg-rule: #b3261e;
  --panel-cell-neg-text: #b3261e;
  --panel-cell-warn: #fff4e0;
  --panel-cell-warn-rule: #b26a00;
  --panel-cell-warn-text: #b26a00;
  --panel-cell-place: #eef1f5;
  --panel-cell-place-rule: #b9c2cf;
  --panel-cell-place-text: #46505e;

  /* the second surface: a hint of a raised band under the headline figures (Chris, 2026-09-09; --band
     tried and rejected — it is the page ground under Flightdeck, so the strip stopped reading as raised) */
  --hero-ground: var(--sf2);
  --hero-ground-hover: var(--acc-ink);
  --hero-text: var(--ink);
  --hero-dim: var(--ink3);
  --hero-rule: var(--rule);
  --hero-tax: var(--tax);
  --hero-warn: var(--warn);
  --hero-neg: var(--neg);
  --hero-computed: var(--computed);

  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 1px 2px rgba(14, 22, 38, 0.06), 0 2px 8px rgba(14, 22, 38, 0.05);
  --overlay: rgba(14, 22, 38, 0.55);

  /* identity only: cerulean, plum, slate, olive, grey, light grey — none is the action indigo, the tax teal,
     the warn amber, the neg red or a direction green/rust (color plan, 2026-09-09) */
  --series-1: #8e4a9e;
  --series-2: #6f8a1f;
  --series-3: #46505e;
  --series-4: #1b7fa6;
  --series-5: #7a8494;
  --series-6: #b9c2cf;

  --font-sans: var(--font-archivo, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  --font-display: var(--font-archivo, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  --font-serif: var(--font-newsreader, 'Newsreader', Georgia, 'Times New Roman', serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-label: var(--font-display);
  /* Archivo's width axis: hero numerals are set wide; labels stay at 100% (owner, 2026-09-08 — the
     wide labels ran ~20% longer than the design's and clipped in table heads). Other themes set 100%. */
  --display-stretch: 112%;
  --label-stretch: 100%;
}
/*
 * Theme: Meridian V2 — the default (docs/design/meridian-v2/spec.md §1).
 * Restates the roles.css defaults explicitly so a theme file is the complete
 * description of a design system, and so nothing depends on roles.css staying
 * Meridian-valued.
 */
[data-theme='meridian'] {
  --bg: #eef1f5;
  --sf: #ffffff;
  --sf2: #f8f9fc;
  /* the fill under a hovered table row */
  --hover: #f6f7fa;
  /* the ground and ink of a state chip in a card head */
  --chip: #f3f4f7;
  --chip-ink: #4b5060;

  /* a chart card's chrome (design 2026-09-08): the benchmark line in mid-grey, solid hairline grid, the
     zero line one step darker, event markers, and the area fill under a secondary strip */
  --chart-bench: #6b7280;
  --chart-grid: #edeff3;
  --chart-zero: #cdd1da;
  --chart-anno: #b9bec9;
  --chart-area: rgba(107, 114, 128, 0.1);
  --ink: #0e1626;
  --ink2: #46505e;
  --ink3: #66707f;
  /* the faintest text: unit notes, incidental words, the chip dot */
  --faint: #a3a8b4;
  --rule: #dde2e9;
  --rule2: #b9c2cf;
  --band: #eef0f4;
  --acc: #2f44b8;
  --acc-ink: #24359a;
  --acc-tint: #e8ebfa;
  --tax: #0f8f7c;
  --tax-tint: #e1f4f0;
  --warn: #b26a00;
  --warn-tint: #fff4e0;
  --neg: #b3261e;
  /* Direction: the sign of a return or tilt MARK (a bar, a grid tint, a signed σ in a research table); figures on the strip and the paper stay ink. */
  --up: #2e7d32;
  --up-tint: #e3f1e4;
  --down: #c2410c;
  --down-tint: #fbe9e1;
  --neg-tint: #fbe9e7;
  --computed: #0e1626;
  --computed-tint: #f8f9fc;
  --computed-pattern: repeating-linear-gradient(45deg, rgba(14, 22, 38, 0.16) 0 1.5px, transparent 1.5px 6px);
  --selected: #0e1626;
  --selected-tint: #e2e7ef;
  --nav: #0e1626;
  --nav-tint: #e2e7ef;

  /* chip tones (2026-09-09): active, draft/discovered, planned, modeled, a plain fact */
  --ok: #2e7d32;
  --ok-tint: #e3f1e4;
  --pending: #a8327a;
  --pending-tint: #fbe4f1;
  --planned: #6b3fc7;
  --planned-tint: #ede6fb;
  --modeled: #0b7c9a;
  --modeled-tint: #dcf1f7;
  --fact: #3b5a80;
  --fact-tint: #e3ebf5;
  --panel-ground: #ffffff;
  --panel-ground-text: #0e1626;
  --on-panel-value: #0e1626;
  --on-panel-selected: #0e1626;
  --on-panel-warn: #b26a00;
  --on-panel-neg: #b3261e;
  --on-panel-computed: #0e1626;
  --on-panel-dim: #7a8494;
  --on-panel-rule: #dde2e9;
  --panel-cell: #f8f9fc;
  --panel-cell-rule: #dde2e9;
  --panel-cell-text: #7a8494;
  --panel-cell-neg: #fbe9e7;
  --panel-cell-neg-rule: #b3261e;
  --panel-cell-neg-text: #b3261e;
  --panel-cell-warn: #fff4e0;
  --panel-cell-warn-rule: #b26a00;
  --panel-cell-warn-text: #b26a00;
  --panel-cell-place: #eef1f5;
  --panel-cell-place-rule: #b9c2cf;
  --panel-cell-place-text: #46505e;
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 1px 2px rgba(14, 22, 38, 0.06), 0 2px 8px rgba(14, 22, 38, 0.05);
  --overlay: rgba(14, 22, 38, 0.55);
  --series-1: #8e4a9e;
  --series-2: #6f8a1f;
  --series-3: #46505e;
  --series-4: #1b7fa6;
  --series-5: #7a8494;
  --series-6: #b9c2cf;
  --font-sans: var(--font-archivo, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  --font-display: var(--font-archivo, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  --font-serif: var(--font-newsreader, 'Newsreader', Georgia, 'Times New Roman', serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-stretch: 112%;
  --label-stretch: 100%;
}
/*
 * Design-system utilities (plan T0.3). Plain CSS in the utilities layer, the
 * way this repo adds custom classes (no local Tailwind plugins). Each reads a
 * role token (roles.css) so it follows the theme:
 *   .ds-stretch-100 … .ds-stretch-125  font-stretch steps for Archivo's width axis
 *   .display                     the display face at the theme's display width
 *   .eyebrow                     the page/section eyebrow: uppercase, tracked,
 *                                muted, wide — the ONLY uppercase treatment
 *                                besides table headers and strip labels
 *   .sublbl                      every heading inside a panel: sentence case
 *   .tabular / .lining           numerals that stack or sit in running text
 *   .hatch                       the `computed` role's pattern (planned, not booked)
 */
/* buttons — one section of the design-system stylesheet; see index.css for the order. */

/* ---------- buttons: none of them is white (Chris, 2026-09-09). primary is the solid action fill;
   secondary is the action color as ink and hairline on its own tint; danger is the neg color the same
   way; text is inline; textDanger is the quiet destructive control a row may carry (links.css). ---------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-stretch: 100%;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}
.ds-btn:hover {
  text-decoration: none;
}
.ds-btn:disabled,
.ds-btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.55;
}
.ds-btn:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.ds-btn--primary {
  background: var(--acc);
  color: var(--sf);
  border-color: var(--acc);
}
.ds-btn--primary:hover {
  background: var(--acc-ink);
  border-color: var(--acc-ink);
  color: var(--sf);
}
.ds-btn--secondary {
  background: var(--acc-tint);
  color: var(--acc-ink);
  border-color: var(--acc);
}
.ds-btn--secondary:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--sf);
}
.ds-btn--danger {
  background: var(--neg-tint);
  color: var(--neg);
  border-color: var(--neg);
}
.ds-btn--danger:hover {
  background: var(--neg);
  border-color: var(--neg);
  color: var(--sf);
}
.ds-btn--danger:focus-visible {
  outline-color: var(--neg);
}
/* text and textDanger: the link treatment, owned by links.css */
.ds-btn--sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.ds-btn--text.ds-btn--sm,
.ds-btn--textDanger.ds-btn--sm {
  padding: 0 4px;
}

/* Flightdeck: the action color is ink, so a secondary button would be ink on grey; it takes the
   engaged green tint instead, and primary stays the ink fill. */
[data-theme='flightdeck'] .ds-btn {
  height: 32px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
}
[data-theme='flightdeck'] .ds-btn--sm {
  height: 26px;
  font-size: 11px;
}
[data-theme='flightdeck'] .ds-btn--secondary {
  background: var(--selected-tint);
  color: var(--ink);
  border-color: var(--selected);
}
[data-theme='flightdeck'] .ds-btn--secondary:hover {
  background: var(--selected);
  border-color: var(--selected);
  color: var(--sf);
}

/* Charter: 36px buttons on the small radius; the primary button is the slate of the band. */
[data-theme='charter'] .ds-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
}
[data-theme='charter'] .ds-btn--sm {
  height: 30px;
  padding: 0 11px;
}
[data-theme='charter'] .ds-btn--text,
[data-theme='charter'] .ds-btn--textDanger {
  padding: 0 6px;
}
[data-theme='charter'] .ds-btn--text.ds-btn--sm,
[data-theme='charter'] .ds-btn--textDanger.ds-btn--sm {
  padding: 0 4px;
}
[data-theme='charter'] .ds-btn--primary {
  background: var(--hero-ground);
  border-color: var(--hero-ground);
  color: var(--hero-text);
}
[data-theme='charter'] .ds-btn--primary:hover {
  background: var(--hero-ground-hover);
  border-color: var(--hero-ground-hover);
  color: var(--hero-text);
}
/* chips and the status map — one section of the design-system stylesheet; see index.css for the order. */

/* ---------- chips: the design's state chip — 11.5px at 500, a 4px corner, no border. Every tone is
   the ink of its own hue on that hue's tint, under every theme: none is grey, none is white, none is
   hatched (Chris, 2026-09-09; the hatch remains the computed treatment for FIGURES, in sentence.css).
   Flightdeck keeps its bordered uppercase shape on the same tints. ---------- */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--fact-tint);
  color: var(--fact);
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid transparent;
  margin: -1px 0;
}
.ds-chip--neg {
  background: var(--neg-tint);
  color: var(--neg);
}
.ds-chip--warn {
  background: var(--warn-tint);
  color: var(--warn);
}
.ds-chip--new {
  background: var(--acc-tint);
  color: var(--acc-ink);
}
/* active, live, receiving */
.ds-chip--ok {
  background: var(--ok-tint);
  color: var(--ok);
}
/* draft, discovered, unstaged: pending the advisor */
.ds-chip--faint {
  background: var(--pending-tint);
  color: var(--pending);
}
/* a plain fact: a version, a mode */
.ds-chip--neutral {
  background: var(--fact-tint);
  color: var(--fact);
}
.ds-chip--tax {
  background: var(--tax-tint);
  color: var(--tax);
}
/* computed and not yet booked */
.ds-chip--computed {
  background: var(--planned-tint);
  color: var(--planned);
}
/* from other data */
.ds-chip--modeled {
  background: var(--modeled-tint);
  color: var(--modeled);
}
[data-theme='flightdeck'] .ds-chip {
  height: 18px;
  padding: 0 6px;
  margin: 0;
  line-height: 1;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  font-stretch: 100%;
  border-color: currentColor;
}

/* ---------- tokens: the entries of a picked list, on the chip's shape at the field's size ---------- */
.ds-token {
  padding: 3px 6px 3px 10px;
  font-size: 12.5px;
  line-height: 18px;
  margin: 0;
  max-width: 100%;
}
.ds-token-label {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-token-note {
  flex: none;
  font-weight: 400;
  opacity: 0.75;
  white-space: nowrap;
}
.ds-token-note::before {
  content: '· ';
}
.ds-token-x {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  line-height: 1;
  font-size: 14px;
  color: inherit;
  opacity: 0.7;
}
.ds-token-x:hover:not(:disabled) {
  opacity: 1;
  background: var(--sf);
}
.ds-token-x:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.ds-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* the `.why` label: the same tones as text, no tint */
.ds-why {
  font-family: var(--font-label);
  font-stretch: 105%;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}
.ds-why--neg {
  color: var(--neg);
}
.ds-why--warn {
  color: var(--warn);
}
.ds-why--new {
  color: var(--acc-ink);
}
.ds-why--ok {
  color: var(--ok);
}
.ds-why--faint {
  color: var(--pending);
}
.ds-why--neutral {
  color: var(--fact);
}
.ds-why--tax {
  color: var(--tax);
}
.ds-why--computed {
  color: var(--planned);
}
.ds-why--modeled {
  color: var(--modeled);
}

/* Charter: pills. */
[data-theme='charter'] .ds-chip {
  height: 21px;
  padding: 0 9px;
  margin: 0;
  line-height: 1;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.02em;
}
[data-theme='charter'] .ds-why {
  font-size: 11px;
  font-stretch: 100%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- a status as a dot and words (a table row's state): not a pill, so it never reads as a button ---------- */
.ds-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink2);
  white-space: nowrap;
}
.ds-status i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink3);
}
.ds-status--ok i {
  background: var(--ok);
}
.ds-status--neg i {
  background: var(--neg);
}
.ds-status--warn i {
  background: var(--warn);
}
.ds-status--live i {
  background: var(--acc);
}
/* your move: the action-ink dot and the words in ink, so the row that needs the advisor stands out */
.ds-status--new {
  color: var(--ink);
  font-weight: 600;
}
.ds-status--new i {
  background: var(--acc-ink);
}
.ds-status--faint {
  color: var(--ink3);
}
.ds-status--faint i {
  background: var(--rule2);
}
/* A row's outcome as one mark (2026-09-09): the state's own hue, no tint and no pill — a chip would
   read as a label to click, and down a column of forty rows the words repeat. The sentence behind
   the mark is its tooltip and its accessible name. */
.ds-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--ink3);
}
.ds-mark--ok {
  color: var(--ok);
}
.ds-mark--warn {
  color: var(--warn);
}
.ds-mark--neg {
  color: var(--neg);
}
.ds-mark--faint {
  color: var(--rule2);
}
/* A linked mark (2026-09-09): an icon button — a bigger glyph inside a 30px box with a hairline
   border in the mark's own tone, filling with that tone's tint on hover. It is an anchor, so
   links.css excludes `.ds-mark` from the one link treatment (no action color, no underline). A
   30px box fits a 42px row and a 58px two-line row without touching the row height. `faint` has
   no tint to fill with and a border in rule2 would vanish, so it borders in ink3. */
.ds-mark--link {
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: var(--sf);
  cursor: pointer;
  transition:
    background-color 0.1s ease,
    box-shadow 0.1s ease;
}
.ds-mark--link svg {
  width: 18px;
  height: 18px;
}
.ds-mark--link.ds-mark--faint {
  color: var(--ink3);
}
.ds-mark--link:hover,
.ds-mark--link:focus-visible {
  background: var(--sf2);
}
.ds-mark--link.ds-mark--ok:hover,
.ds-mark--link.ds-mark--ok:focus-visible {
  background: var(--ok-tint);
}
.ds-mark--link.ds-mark--warn:hover,
.ds-mark--link.ds-mark--warn:focus-visible {
  background: var(--warn-tint);
}
.ds-mark--link.ds-mark--neg:hover,
.ds-mark--link.ds-mark--neg:focus-visible {
  background: var(--neg-tint);
}
.ds-mark--link:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}
/* A mark that carries its own word (issue 1001): the box grows to the text instead of staying a
   square, so a column whose state is the whole answer still reads without a hover — a native
   tooltip opens on neither touch nor keyboard focus. The word is INK, not the mark's tone: the
   glyph carries the color, and forty rows of a colored word would read as forty alarms. Placed
   after the --link block so a linked mark with a word takes the wider box. */
.ds-mark--word {
  width: auto;
  gap: 6px;
  justify-content: flex-start;
}
.ds-mark--link.ds-mark--word {
  padding: 0 9px;
}
.ds-mark-word {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
/* the scales, the wash-window glyph, position against target — one section of the design-system stylesheet; see index.css for the order. */

/* ---------- devices: the scales, the wash-window glyph, position against target ----------
   Every fill and stroke is currentColor or a class (spec §5), so a state class on an
   element sets it. The Flightdeck rules below recolor the same markup: tinted within /
   near / beyond bands, the limit in the selected green, B612 labels. */
.ds-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ds-hatch-stroke {
  fill: var(--ink);
  fill-opacity: 0.16;
}
.ds-scale,
.ds-scale-mini,
.ds-wvt,
.ds-moon {
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.ds-scale {
  display: block;
}
.ds-scale text,
.ds-scale-mini text {
  font-size: 11px;
  fill: currentColor;
  color: var(--ink3);
}
.ds-scale .val {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.ds-scale .lim-lbl {
  font-weight: 700;
  color: var(--ink);
}
.ds-scale .plan-lbl {
  font-size: 11px;
  color: var(--ink2);
}
.ds-scale .ax,
.ds-scale-mini .ax,
.ds-wvt .ax {
  stroke: var(--rule2);
  stroke-width: 1;
}
.ds-scale .tk {
  stroke: var(--rule2);
  stroke-width: 1;
}
.ds-scale .tk-warn {
  stroke: var(--warn);
  stroke-width: 1;
}
.ds-scale .band,
.ds-scale-mini .band {
  fill: var(--band);
}
.ds-scale .band-within,
.ds-scale .band-near,
.ds-scale-mini .band-within,
.ds-scale-mini .band-near {
  display: none;
}
.ds-scale .lim {
  stroke: var(--ink);
  stroke-width: 2;
}
.ds-scale-mini .lim-r {
  fill: var(--ink);
}
.ds-scale-mini .tk-warn {
  fill: var(--warn);
}
.ds-scale .mk,
.ds-scale-mini .mk,
.ds-wvt .mk {
  fill: currentColor;
  color: var(--ink);
}
.ds-wvt .mk {
  color: var(--ink2);
}
.ds-wvt .tgt {
  fill: var(--ink);
}
.ds-scale .hist {
  fill: currentColor;
  color: var(--rule2);
}
.ds-scale .plan,
.ds-scale-mini .plan {
  fill: url(#ds-hatch);
}
.ds-scale .plan-end {
  stroke: var(--ink2);
  stroke-width: 1;
}
.ds-scale .proj {
  fill: var(--sf);
  stroke: var(--ink2);
  stroke-width: 1;
}
.ds-moon .ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}
.ds-moon .fill {
  fill: var(--ink2);
}
.ds-scale .warn,
.ds-scale-mini .warn,
.ds-wvt .warn {
  color: var(--warn);
}
.ds-scale .neg,
.ds-scale-mini .neg,
.ds-wvt .neg {
  color: var(--neg);
}
.ds-scale .tax,
.ds-scale-mini .tax {
  color: var(--tax);
}
.ds-scval {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ds-scval .ds-faint,
.ds-scval.ds-faint {
  font-weight: 500;
  color: var(--ink3);
}
.ds-scval.warn {
  color: var(--warn);
}
.ds-scval.neg {
  color: var(--neg);
}
.ds-wvt-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

[data-theme='flightdeck'] .ds-scale text,
[data-theme='flightdeck'] .ds-scale-mini text {
  font-family: var(--font-display);
  font-size: 11px;
}
[data-theme='flightdeck'] .ds-scale .val,
[data-theme='flightdeck'] .ds-scale .plan-lbl {
  font-size: 11px;
}
[data-theme='flightdeck'] .ds-scale .band-within,
[data-theme='flightdeck'] .ds-scale .band-near,
[data-theme='flightdeck'] .ds-scale-mini .band-within,
[data-theme='flightdeck'] .ds-scale-mini .band-near {
  display: inline;
}
[data-theme='flightdeck'] .ds-scale .band-within,
[data-theme='flightdeck'] .ds-scale-mini .band-within {
  fill: var(--selected-tint);
}
[data-theme='flightdeck'] .ds-scale .band-near,
[data-theme='flightdeck'] .ds-scale-mini .band-near {
  fill: var(--warn-tint);
}
[data-theme='flightdeck'] .ds-scale .band,
[data-theme='flightdeck'] .ds-scale-mini .band {
  fill: var(--neg-tint);
}
[data-theme='flightdeck'] .ds-scale .ax,
[data-theme='flightdeck'] .ds-scale .tk,
[data-theme='flightdeck'] .ds-scale-mini .ax,
[data-theme='flightdeck'] .ds-wvt .ax {
  stroke: var(--ink3);
}
[data-theme='flightdeck'] .ds-scale .lim {
  stroke: var(--selected);
}
[data-theme='flightdeck'] .ds-scale-mini .lim-r {
  fill: var(--selected);
}
[data-theme='flightdeck'] .ds-scale .lim-lbl {
  color: var(--selected);
}
[data-theme='flightdeck'] .ds-scale .hist {
  color: var(--ink3);
}
[data-theme='flightdeck'] .ds-scale .plan,
[data-theme='flightdeck'] .ds-scale-mini .plan {
  fill: var(--computed-tint);
}
[data-theme='flightdeck'] .ds-scale .plan-end,
[data-theme='flightdeck'] .ds-scale .proj {
  stroke: var(--computed);
}
[data-theme='flightdeck'] .ds-scale .plan-lbl {
  color: var(--computed);
}
[data-theme='flightdeck'] .ds-scale .warn,
[data-theme='flightdeck'] .ds-scale-mini .warn {
  color: var(--warn);
}
[data-theme='flightdeck'] .ds-scale .neg,
[data-theme='flightdeck'] .ds-scale-mini .neg {
  color: var(--neg);
}

/* Charter: tracking is blue, so the firm histogram of accounts by tracking is drawn in it. */
[data-theme='charter'] .ds-scale .hist {
  color: var(--acc);
}
/* fields, and the native checkbox on the selected role — one section of the design-system stylesheet; see index.css for the order. */

/* ---------- fields ---------- */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ds-field-label {
  cursor: default;
}
/* ---- Why the class is doubled below (Chris, 2026-09-10) ----
   `@tailwind base` emits flowbite's form reset (node_modules/flowbite/plugin.js,
   option `forms`, on by default) AFTER this stylesheet: globals.css @imports the
   system files above the @tailwind at-rules, because postcss-import only inlines
   top-of-file imports. That reset's selector list —
   `[type='text'], [type='email'], … , [multiple], textarea, select` — is ONE
   attribute selector, the same specificity as `.ds-input`, so on any input that
   CARRIES a type attribute it won on source order: square corners, a gray-500
   border, 8px/12px padding, 16px text and a blue focus ring. Inputs with no type
   attribute kept this recipe, which is why the client-contact row (typeless, so
   password managers don't claim it) and every NumberField / SearchField /
   ticker box (`type='text'`, `type='search'`) rendered as two different controls
   on one form. `select` and `textarea` are element selectors there and already
   lost — except `select:not([size])`, which was adding a second chevron.
   Doubling the class outranks all of it. Size (width/height) stays at single-class
   specificity so a `w-20` / `h-64` utility on the element still wins; only the
   properties flowbite also sets are inside the doubled rules. Any new field
   property that flowbite's list sets belongs in a doubled rule, not a plain one. */
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  height: 32px;
}
.ds-input.ds-input,
.ds-select.ds-select,
.ds-textarea.ds-textarea {
  padding: 0 10px;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  background: var(--sf);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 30px;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.ds-input::-moz-placeholder, .ds-textarea::-moz-placeholder {
  color: var(--ink3);
}
.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ink3);
}
/* One focus treatment: the accent border, never flowbite's blue ring. */
.ds-input.ds-input:focus,
.ds-select.ds-select:focus,
.ds-textarea.ds-textarea:focus {
  border-color: var(--acc);
  box-shadow: none;
  outline: none;
}
.ds-input.ds-input:disabled,
.ds-select.ds-select:disabled,
.ds-textarea.ds-textarea:disabled {
  background: var(--sf2);
  color: var(--ink3);
  cursor: not-allowed;
}
.ds-input--sm,
.ds-select--sm {
  height: 28px;
}
.ds-input--sm.ds-input--sm,
.ds-select--sm.ds-select--sm {
  padding: 0 8px;
  font-size: 12.5px;
  line-height: 26px;
}
.ds-input--error.ds-input--error,
.ds-select--error.ds-select--error,
.ds-textarea--error.ds-textarea--error {
  border-color: var(--neg);
}
.ds-textarea {
  height: auto;
  min-height: 72px;
  resize: vertical;
}
.ds-textarea.ds-textarea {
  padding: 6px 10px;
  line-height: 1.45;
}
/* ---------- a composite field: a `.ds-input` box holding a bare control ----------
   The amount + unit pair in the scenario modal and the cash reserve in the designer
   put the recipe on a wrapper and a plain <input>/<select> inside it. Descendant
   specificity (0,1,1) outranks the flowbite forms base, which otherwise repaints
   the inner control at 16px/1.5 with its own border and white ground — a taller,
   larger-typed field inside a 13px box. The inner control inherits the box. */
.ds-input > :is(input, select),
.ds-select > :is(input, select),
.ds-unitpick > select {
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.ds-input > :is(input, select)::-moz-placeholder {
  color: var(--ink3);
}
.ds-input > :is(input, select)::placeholder {
  color: var(--ink3);
}

/* A textarea the advisor pastes into: a holdings list is data, and it lines up. */
.ds-textarea--mono.ds-textarea--mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.ds-select-wrap {
  position: relative;
  display: block;
}
.ds-select.ds-select {
  padding-right: 28px;
}
.ds-select-chevron {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  pointer-events: none;
  color: var(--ink3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Right-aligned figures: a number in a table column reads against the column, not
   the box it sits in. Doubled for the same reason as the recipe above. */
.ds-input--right.ds-input--right {
  text-align: right;
}

/* ---------- a number whose unit is a CHOICE (NumberField `units`) ----------
   The box carries the field recipe; the number and the unit picker sit inside it,
   so % / $ / sh is chosen in the field rather than beside it. One control, one
   height — this replaced the segmented box welded to an input in the designer's
   cash reserve and the amount+unit pair in the scenario modal. */
.ds-amount {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds-amount > input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: inherit;
}
.ds-unitpick {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--ink3);
}
.ds-unitpick > select {
  padding-right: 11px;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.ds-unitpick > svg {
  position: absolute;
  right: 0;
  width: 8px;
  height: 8px;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-input:focus-within .ds-unitpick {
  color: var(--ink2);
}

/* ---------- a unit inside the field (NumberField: $ before, % after) ---------- */
.ds-affix-wrap {
  position: relative;
  display: block;
}
.ds-affix {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--ink3);
  font-size: 13px;
  pointer-events: none;
}
.ds-affix--pre {
  left: 10px;
}
.ds-affix--post {
  right: 10px;
}
.ds-input--pre.ds-input--pre {
  padding-left: 21px;
}
.ds-input--post.ds-input--post {
  padding-right: 24px;
}
.ds-input--sm.ds-input--sm.ds-input--pre {
  padding-left: 19px;
}
.ds-input--sm.ds-input--sm.ds-input--post {
  padding-right: 22px;
}
.ds-input--sm ~ .ds-affix,
.ds-affix-wrap:has(.ds-input--sm) .ds-affix {
  font-size: 12.5px;
}
.ds-affix-wrap:has(.ds-input--sm) .ds-affix--pre {
  left: 8px;
}
.ds-affix-wrap:has(.ds-input--sm) .ds-affix--post {
  right: 8px;
}

.ds-field-hint {
  font-size: 11.5px;
  color: var(--ink3);
}
.ds-field-error {
  font-size: 11.5px;
  color: var(--neg);
}

/* ---------- a native checkbox on the selected role (creator forms) ---------- */
[data-theme] :is(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--selected);
  cursor: pointer;
}
.ds-check {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--selected);
  cursor: pointer;
}

/* ---------- the large field (NumberField `lg`, design "Transition Plan Outcomes" 3a, 2026-09-14):
   17px figures on 11px 14px padding, the affix at the same size. Doubled like the base recipe. ---------- */
.ds-input--lg {
  height: 46px;
}
.ds-input--lg.ds-input--lg {
  padding: 0 14px;
  font-size: 17px;
  line-height: 44px;
}
.ds-input--lg.ds-input--lg.ds-input--pre {
  padding-left: 34px;
}
.ds-input--lg.ds-input--lg.ds-input--post {
  padding-right: 36px;
}
.ds-affix-wrap:has(.ds-input--lg) .ds-affix {
  font-size: 17px;
}
.ds-affix-wrap:has(.ds-input--lg) .ds-affix--pre {
  left: 14px;
}
.ds-affix-wrap:has(.ds-input--lg) .ds-affix--post {
  right: 14px;
}

/* ---------- the date field (DateField, issue 876) ----------
   A `.ds-input` box holding the typed text control and the calendar button that
   opens the native picker. The picker itself is a real date input parked in the
   box with no size: `display: none` would make showPicker() throw, and it must
   stay in the layout for the button to have something to open. */
.ds-datefield {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds-datefield > input[type='text'] {
  flex: 1 1 auto;
  min-width: 0;
}
.ds-datefield-pick {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
}
.ds-datefield-pick:hover,
.ds-input:focus-within > .ds-datefield-pick {
  color: var(--ink2);
}
.ds-datefield-pick > svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-datefield-native.ds-datefield-native {
  width: 0;
  height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---------- the file pick (FilePicker, issue 997) ----------
   The native `<input type='file'>` paints its own button and its own "No file chosen"
   text in the browser's font, sitting on the bottom of whatever box holds it. The real
   input is clipped to a pixel here — clipped, not `display: none`, so it keeps keyboard
   focus and the form can still reset it — and the visible control is a secondary Button
   with the chosen name beside it, centred on the button's line. */
.ds-filepick {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 34px;
}
.ds-filepick-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink2);
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ds-filepick-input.ds-filepick-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
/* the slider and distribution strip — one section of the design-system stylesheet; see index.css for the order. */

/* ---------- slider and distribution strip ---------- */
.ds-slider,
.ds-dist {
  --ds-thumb: 16px;
}
.ds-slider {
  position: relative;
  height: 20px;
}
/* The axis: the stretch the thumb's centre travels, inset by half a thumb at either side so a
   position in % on it is the thumb's own. The track, the fill, the mark and the input sit on it;
   a DistributionStrip `align`ed beneath insets its bars by the same half thumb. */
.ds-slider-axis {
  position: absolute;
  inset: 0 calc(var(--ds-thumb) / 2);
}
.ds-slider-track,
.ds-slider-fill {
  position: absolute;
  top: 8px;
  height: 4px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.ds-slider-track {
  background: var(--rule2);
}
.ds-slider-fill {
  background: var(--selected);
}
.ds-slider-mark {
  position: absolute;
  top: 5px;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  background: var(--ink3);
  pointer-events: none;
}
/* Scoped under .ds-slider so these beat flowbite's input[type='range'] rules (0,1,1). The input
   draws only its thumb: its own track is transparent over the spans above. */
.ds-slider .ds-range {
  position: absolute;
  top: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  cursor: pointer;
}
.ds-slider .ds-range:focus {
  outline: none;
}
.ds-slider .ds-range::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.ds-slider .ds-range::-moz-range-track {
  height: 4px;
  background: transparent;
}
.ds-slider .ds-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ds-thumb);
  height: var(--ds-thumb);
  margin-top: calc((4px - var(--ds-thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--selected);
}
.ds-slider .ds-range::-moz-range-thumb {
  width: var(--ds-thumb);
  height: var(--ds-thumb);
  border: 0;
  border-radius: 50%;
  background: var(--selected);
}
.ds-slider .ds-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.ds-slider .ds-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.ds-slider .ds-range:disabled {
  cursor: not-allowed;
}
.ds-slider .ds-range:disabled::-webkit-slider-thumb {
  background: var(--rule2);
}
.ds-slider .ds-range:disabled::-moz-range-thumb {
  background: var(--rule2);
}
.ds-slider--disabled .ds-slider-track {
  background: var(--rule);
}
.ds-slider--disabled .ds-slider-fill,
.ds-slider--disabled .ds-slider-mark {
  background: var(--rule2);
}
.ds-dist {
  margin-top: 6px;
}
.ds-dist--aligned .ds-dist-bars,
.ds-dist--aligned .ds-dist-labels {
  margin-left: calc(var(--ds-thumb) / 2);
  margin-right: calc(var(--ds-thumb) / 2);
}
.ds-dist-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1px;
}
.ds-dist-bars i {
  display: block;
  flex: 1;
  min-height: 0;
  background: var(--rule2);
}
.ds-dist-ref {
  position: absolute;
  top: 2px;
  bottom: 0;
  margin-left: -0.5px;
  border-left: 1px dashed var(--ink);
}
.ds-dist-target {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--selected);
}
.ds-dist-labels {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink3);
}
.ds-dist-labels span:nth-child(2) {
  color: var(--ink2);
}
.ds-dist-labels--at span:nth-child(2) {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* links: one treatment inherited by every anchor — one section of the design-system stylesheet; see index.css for the order. */

/* anchors that are not links in the reading sense keep their own recipe (see the links block) */
a.ds-ann-cell,
a.ds-ann-cell:hover,
.ds-step-link,
.ds-step-link:hover,
.ds-menu a,
.ds-menu a:hover {
  text-decoration: none;
}

/* ---------- links: ONE treatment, inherited by every anchor on a themed document ----------
   `[data-theme] a:where(…)` reaches every anchor except the chrome named inside the :where()
   — the buttons rendered as links, the wordmark, the nav, crumbs, sub-nav, menu, steps,
   annunciator cells, status marks and callout cards, which keep their own recipes. The selector
   outranks a single class, so a card missing from the list loses its padding, border and tint when
   it renders as an anchor (issue 1058: the designer's margin callout). A <button> that should read as a link takes
   `.ds-link`; a text Button, an empty state's action and the state line's action are the same
   thing and share these rules. This block sits last so it wins over the button sizes above.
   The action color at the surrounding size, weight 600, no underline until hover; under
   Flightdeck ink with a hairline underline at rest. Never style a link with utilities. */
[data-theme]
  a:where(
    :not(
      .ds-btn,
      .ds-wordmark,
      .ds-step-link,
      .ds-ann-cell,
      .ds-empty-action,
      .ds-nav a,
      .ds-crumbs a,
      .ds-subnav a,
      .ds-menu a,
      .ds-mark,
      .ds-callout,
      .ds-navcard
    )
  ),
.ds-link,
.ds-btn--text,
.ds-btn--textDanger,
.ds-empty-action,
.ds-state-action {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--acc);
  text-decoration: none;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ds-btn--text,
.ds-btn--textDanger,
.ds-empty-action {
  white-space: nowrap;
}
.ds-btn--text,
.ds-btn--textDanger {
  padding: 0 6px;
}
.ds-btn--text.ds-btn--sm,
.ds-btn--textDanger.ds-btn--sm {
  padding: 0 4px;
}
[data-theme]
  a:where(
    :not(
      .ds-btn,
      .ds-wordmark,
      .ds-step-link,
      .ds-ann-cell,
      .ds-empty-action,
      .ds-nav a,
      .ds-crumbs a,
      .ds-subnav a,
      .ds-menu a,
      .ds-mark,
      .ds-callout,
      .ds-navcard
    )
  ):hover,
.ds-link:hover,
.ds-btn--text:hover,
.ds-empty-action:hover,
.ds-state-action:hover {
  color: var(--acc-ink);
  text-decoration: underline;
}
/* textDanger — quiet danger (Chris, 2026-09-10): muted words at rest, the neg color on hover. The one
   destructive control a row may carry (Delete, Ignore, Remove); a red word at rest down forty rows is
   forty red words, and a bordered button would compete with the row's real action. Inside a table it
   also fades until the row is hovered or focused (table.css). */
.ds-btn--textDanger {
  color: var(--ink3);
  font-weight: 500;
  font-size: 12.5px;
}
.ds-btn--textDanger:hover {
  color: var(--neg);
  text-decoration: underline;
}
.ds-btn--textDanger:focus-visible {
  outline-color: var(--neg);
}
/* ds-link--danger — the ONE destructive link standing in a sentence (the designer's "Discard the
   draft", Chris 2026-09-18): the neg color at rest, because there is one of it and the sentence is
   about it. A row's destructive control stays textDanger, quiet until hovered. */
.ds-link.ds-link--danger {
  color: var(--neg);
}
.ds-link.ds-link--danger:hover {
  color: var(--neg);
  text-decoration: underline;
}
.ds-link.ds-link--danger:focus-visible {
  outline-color: var(--neg);
}
.ds-link:disabled,
.ds-btn--text:disabled,
.ds-btn--textDanger:disabled {
  color: var(--ink3);
  text-decoration: none;
  cursor: default;
}
[data-theme='flightdeck']
  a:where(
    :not(
      .ds-btn,
      .ds-wordmark,
      .ds-step-link,
      .ds-ann-cell,
      .ds-empty-action,
      .ds-nav a,
      .ds-crumbs a,
      .ds-subnav a,
      .ds-menu a,
      .ds-mark,
      .ds-callout,
      .ds-navcard
    )
  ),
[data-theme='flightdeck'] .ds-link,
[data-theme='flightdeck'] .ds-btn--text,
[data-theme='flightdeck'] .ds-empty-action,
[data-theme='flightdeck'] .ds-state-action {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule2);
}
[data-theme='flightdeck']
  a:where(
    :not(
      .ds-btn,
      .ds-wordmark,
      .ds-step-link,
      .ds-ann-cell,
      .ds-empty-action,
      .ds-nav a,
      .ds-crumbs a,
      .ds-subnav a,
      .ds-menu a,
      .ds-mark,
      .ds-callout,
      .ds-navcard
    )
  ):hover,
[data-theme='flightdeck'] .ds-link:hover,
[data-theme='flightdeck'] .ds-btn--text:hover,
[data-theme='flightdeck'] .ds-empty-action:hover,
[data-theme='flightdeck'] .ds-state-action:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}
/* Flightdeck underlines its links instead of coloring them, so textDanger keeps the underline —
   a bare red word with no underline would read as a status, not a control. */
[data-theme='flightdeck'] .ds-btn--textDanger {
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink3);
  text-decoration: underline;
  text-decoration-color: var(--rule2);
}
[data-theme='flightdeck'] .ds-btn--textDanger:hover {
  color: var(--neg);
  text-decoration-color: currentColor;
}
[data-theme='flightdeck'] .ds-link:disabled,
[data-theme='flightdeck'] .ds-btn--text:disabled,
[data-theme='flightdeck'] .ds-btn--textDanger:disabled {
  color: var(--ink3);
  text-decoration: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: var(--rule); /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-sans); /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono); /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: var(--ink3); /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: var(--ink3); /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before {
  border-style: solid;
  border-color: #e5e7eb;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before {
  border-bottom-width: 1px;
  border-right-width: 1px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before {
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before {
  border-top-width: 1px;
  border-right-width: 1px;
}

.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
  bottom: -4px;
}

.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
  top: -4px;
}

.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
  right: -4px;
}

.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
  left: -4px;
}

.tooltip.invisible > .tooltip-arrow:before {
  visibility: hidden;
}

[data-popper-arrow],[data-popper-arrow]:before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

[data-popper-arrow] {
  visibility: hidden;
}

[data-popper-arrow]:before {
  content: "";
  visibility: visible;
  transform: rotate(45deg);
}

[data-popper-arrow]:after {
  content: "";
  visibility: visible;
  transform: rotate(45deg);
  position: absolute;
  width: 9px;
  height: 9px;
  background: inherit;
}

[role="tooltip"] > [data-popper-arrow]:before {
  border-style: solid;
  border-color: #e5e7eb;
}

[role="tooltip"] > [data-popper-arrow]:after {
  border-style: solid;
  border-color: #e5e7eb;
}

[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before {
  border-bottom-width: 1px;
  border-right-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after {
  border-bottom-width: 1px;
  border-right-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before {
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after {
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before {
  border-top-width: 1px;
  border-right-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after {
  border-top-width: 1px;
  border-right-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] {
  bottom: -5px;
}

[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] {
  top: -5px;
}

[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] {
  right: -5px;
}

[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] {
  left: -5px;
}

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: var(--ink3);
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: var(--acc);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: var(--acc);
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--ink3);
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: var(--ink3);
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  background: none;
}

select:not([size]) {
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='var(--ink3)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 0.75em 0.75em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

:is([dir=rtl]) select:not([size]) {
  background-position: left 0.75rem center;
  padding-right: 0.75rem;
  padding-left: 0;
}

[multiple] {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: var(--acc);
  background-color: #fff;
  border-color: var(--ink3);
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: var(--acc);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 0.55em 0.55em;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 0.55em 0.55em;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-size: 1em 1em;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
  background-color: currentColor;
  border-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.55em 0.55em;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px auto inherit;
}

input[type=file]::file-selector-button {
  color: white;
  background: var(--ink);
  border: 0;
  font-weight: 500;
  font-size: .875rem;
  cursor: pointer;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 2rem;
  padding-right: 1rem;
  margin-inline-start: -1rem;
  margin-inline-end: 1rem;
}

input[type=file]::file-selector-button:hover {
  background: var(--ink2);
}

:is([dir=rtl]) input[type=file]::file-selector-button {
  padding-right: 2rem;
  padding-left: 1rem;
}

input[type="range"]::-webkit-slider-thumb {
  height: 1.25rem;
  width: 1.25rem;
  background: var(--acc);
  border-radius: 9999px;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="range"]:disabled::-webkit-slider-thumb {
  background: var(--ink3);
}

input[type="range"]:focus::-webkit-slider-thumb {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1px;
  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}

input[type="range"]::-moz-range-thumb {
  height: 1.25rem;
  width: 1.25rem;
  background: var(--acc);
  border-radius: 9999px;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="range"]:disabled::-moz-range-thumb {
  background: var(--ink3);
}

input[type="range"]::-moz-range-progress {
  background: var(--acc);
}

input[type="range"]::-ms-fill-lower {
  background: var(--acc);
}
  html {
    font-size: 16px;
    font-optical-sizing: auto;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
  font-size: 1rem;
  line-height: 1.5rem;
    max-width: 100vw;
    overflow-x: hidden;
}

  /* Remove the arrows for number inputs. */
  input[type='number'] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  font-weight: 600;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.end-2\.5 {
  inset-inline-end: 0.625rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.table {
  display: table;
}
.hidden {
  display: none;
}
.h-screen {
  height: 100vh;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-1\/4 {
  width: 25%;
}
.w-1\/5 {
  width: 20%;
}
.w-1\/6 {
  width: 16.666667%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-xl {
  max-width: 36rem;
}
.grow {
  flex-grow: 1;
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rounded {
  border-radius: var(--radius);
}
.border {
  border-width: 1px;
}
.border-black {
  border-color: var(--ink);
}
.border-error {
  border-color: var(--neg);
}
.border-gray {
  border-color: var(--ink2);
}
.border-info {
  border-color: var(--warn-tint);
}
.border-primary {
  border-color: var(--acc);
}
.border-secondary {
  border-color: var(--sf);
}
.border-success {
  border-color: var(--tax);
}
.border-tertiary {
  border-color: var(--ink2);
}
.border-warning {
  border-color: var(--warn);
}
.bg-black {
  background-color: var(--ink);
}
.bg-error {
  background-color: var(--neg);
}
.bg-error-50 {
  background-color: var(--neg-tint);
}
.bg-error-lt {
  background-color: var(--neg-tint);
}
.bg-gray {
  background-color: var(--ink2);
}
.bg-gray-50 {
  background-color: var(--rule);
}
.bg-gray-lt {
  background-color: var(--bg);
}
.bg-info {
  background-color: var(--warn-tint);
}
.bg-info-lt {
  background-color: var(--warn-tint);
}
.bg-primary {
  background-color: var(--acc);
}
.bg-primary-lt {
  background-color: var(--acc-tint);
}
.bg-secondary {
  background-color: var(--sf);
}
.bg-secondary-lt {
  background-color: var(--sf2);
}
.bg-success {
  background-color: var(--tax);
}
.bg-success-lt {
  background-color: var(--tax-tint);
}
.bg-tertiary {
  background-color: var(--ink2);
}
.bg-tertiary-lt {
  background-color: var(--sf2);
}
.bg-warning {
  background-color: var(--warn);
}
.bg-warning-50 {
  background-color: var(--warn-tint);
}
.bg-warning-lt {
  background-color: var(--warn-tint);
}
.text-2xs {
  font-size: .6875rem;
  line-height: 1rem;
}
.uppercase {
  text-transform: uppercase;
}
.text-black {
  color: var(--ink);
}
.text-error {
  color: var(--neg);
}
.text-gray {
  color: var(--ink2);
}
.text-info {
  color: var(--warn-tint);
}
.text-primary {
  color: var(--acc);
}
.text-secondary {
  color: var(--sf);
}
.text-success {
  color: var(--tax);
}
.text-tertiary {
  color: var(--ink2);
}
.text-warning {
  color: var(--warn);
}
.shadow {
  --tw-shadow: var(--shadow);
  --tw-shadow-colored: var(--shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .ds-sublbl {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }
  .ds-hatch {
    background-color: var(--computed-tint);
    background-image: var(--computed-pattern, none);
  }

/*
 * The RIA marketing homepage (/) — design handoff "Homepage Redesign", layout 1a (2026-09-18).
 *
 * Linked by pages/index.tsx alone, never global. The page is pinned to Meridian
 * (shared/theme.ts), so every color, radius and shadow here is a role token; nothing in this
 * file is a literal color. Every rule sits under `.lp` so it outranks the themed document's
 * anchor rule (`[data-theme] a:where(…)`, links.css) and flowbite's form reset.
 */

.lp {
  /* Basket and sleeve identity, in the design's order: cerulean, plum, slate, olive, grey. Meridian
     numbers its series differently, so the landing names its own. Never the action or tax hue. */
  --lp-s1: var(--series-4);
  --lp-s2: var(--series-1);
  --lp-s3: var(--series-3);
  --lp-s4: var(--series-2);
  --lp-s5: var(--series-5);
  --lp-gutter: 28px;

  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  /* the design's default leading, not the app base's 1.5 */
  line-height: normal;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.lp *,
.lp *::before,
.lp *::after {
  box-sizing: border-box;
}
.lp h1,
.lp h2,
.lp h3,
.lp h4,
.lp p {
  margin: 0;
}
.lp img {
  display: block;
  max-width: 100%;
}
.lp :focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* ---------- shared pieces ---------- */
.lp .lp-wrap,
.lp .lp-split,
.lp .lp-hero,
.lp .lp-facts-wrap {
  max-width: 1384px;
  margin: 0 auto;
}
.lp .lp-eyebrow {
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink3);
}
.lp .lp-h2 {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 46px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.lp .lp-lead {
  max-width: 520px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink2);
  text-wrap: pretty;
}
.lp .lp-tax {
  color: var(--tax);
}
.lp .lp-neg {
  color: var(--neg);
}
.lp .lp-figure {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 34px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.015em;
}
.lp .lp-figure-unit {
  font-size: 15px;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
}
.lp .lp-btn-lg {
  height: 46px;
  padding: 0 20px;
  font-size: 15px;
}

.lp .lp-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.lp .lp-checks li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 22px;
}
.lp .lp-checks:last-child {
  margin-bottom: 0;
}
.lp .lp-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: var(--radius);
  background: var(--acc-tint);
  color: var(--acc-ink);
}

/* ---------- hero ---------- */
.lp .lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 64px;
  align-items: start;
  padding: 56px var(--lp-gutter) 60px;
}
/* No nav bar: the page opens on the logo, level with the top of the auth panel. */
.lp .lp-hero-logo {
  width: auto;
  height: 30px;
  margin-bottom: 40px;
}
.lp .lp-hero .lp-eyebrow {
  margin-bottom: 22px;
}
/* The site's contact panel starts level with the top of the h1, not the logo: 30 (logo) + 40 (its
   margin) + 12 (the eyebrow's rendered line at 11.5px, line-height normal, measured in Archivo)
   + 22 (its margin) = 104px. */
.lp .lp-hero--contact .lp-auth {
  margin-top: 104px;
}
.lp .lp-hero h1 {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 58px;
  line-height: 62px;
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.lp .lp-hero h1 em {
  font-family: var(--font-archivo-italic, var(--font-display));
  font-style: italic;
  color: var(--acc);
}
.lp .lp-hero-kicker {
  max-width: 560px;
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
}
.lp .lp-hero-body {
  max-width: 560px;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink2);
  text-wrap: pretty;
}
.lp .lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.lp .lp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
}
.lp .lp-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lp .lp-hero-meta span::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

/* ---------- the hero's auth panel ---------- */
.lp .lp-auth {
  padding: 26px 28px 24px;
  background: var(--sf);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lp .lp-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 32px;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
}
.lp .lp-auth-tabs button {
  border: 0;
  background: var(--sf);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
}
.lp .lp-auth-tabs button:first-child {
  border-right: 1px solid var(--rule);
}
.lp .lp-auth-tabs button.is-active {
  background: var(--ink);
  color: var(--sf);
}
.lp .lp-auth-title {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.lp .lp-auth-sub {
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
/* Google Identity Services draws its own button into this slot; the height is held while it loads. */
.lp .lp-auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.lp .lp-auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink3);
}
.lp .lp-auth-or::before,
.lp .lp-auth-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.lp .lp-auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp .lp-auth-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sf2);
  font-size: 12.5px;
}
.lp .lp-auth-identity svg {
  flex: none;
}
.lp .lp-auth-identity-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.lp .lp-auth-identity-text b {
  font-weight: 600;
}
.lp .lp-auth-identity-text span {
  color: var(--ink3);
}
.lp .lp-auth-identity .ds-link {
  flex: none;
  font-size: 12.5px;
}
.lp .lp-auth-line {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink2);
}
.lp .lp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
}
.lp .lp-field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  background: var(--sf);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  box-shadow: none;
  outline: none;
}
.lp .lp-field input::-moz-placeholder {
  color: var(--ink3);
}
.lp .lp-field input::placeholder {
  color: var(--ink3);
}
.lp .lp-field input:focus {
  border-color: var(--acc);
  box-shadow: none;
  outline: none;
}
.lp .lp-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lp .lp-auth-row {
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
}
.lp .lp-auth-row a {
  font-weight: 500;
}
.lp .lp-auth-error {
  font-size: 13px;
  line-height: 19px;
  color: var(--neg);
}
/* the contact panel's sent state: the sub line's type, in ink */
.lp .lp-auth-done {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
}
/* the contact form's honeypot: out of sight and out of the tab order, still in the DOM for bots */
.lp .lp-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.lp .lp-auth-inline {
  align-self: flex-start;
  font-size: 13px;
}
.lp .lp-auth-submit {
  width: 100%;
  height: 44px;
  margin-top: 6px;
  font-size: 14px;
}
.lp .lp-auth-alt {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink3);
}
.lp .lp-auth-alt .ds-link {
  font-size: 12.5px;
}

/* ---------- "Did you know" ---------- */
.lp .lp-facts-wrap {
  padding: 0 var(--lp-gutter) 80px;
}
.lp .lp-facts {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr);
  background: var(--sf2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--acc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lp .lp-facts-lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 22px 20px;
  border-right: 1px solid var(--rule);
}
.lp .lp-facts-lead .lp-eyebrow {
  margin-bottom: 0;
}
.lp .lp-facts-lead-text {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.lp .lp-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
}
.lp .lp-fact:last-child {
  padding-right: 40px;
  border-right: 0;
}
.lp .lp-fact-figure {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 48px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.lp .lp-fact-unit {
  font-size: 18px;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
}
.lp .lp-fact-claim {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.lp .lp-fact-sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.lp .lp-fact-sub b {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- feature bands ---------- */
.lp .lp-band--sf {
  background: var(--sf);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.lp .lp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  padding: 88px var(--lp-gutter);
}
/* The copy comes first in the markup (and first when the columns stack); here the mock takes the left. */
.lp .lp-split--mock-left > :last-child {
  order: -1;
}
.lp .lp-wrap {
  padding: 88px var(--lp-gutter);
}

/* the composite feature's mock: a model assembling */
.lp .lp-mock-frame {
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.lp .lp-blend {
  background: var(--sf);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lp .lp-blend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.lp .lp-blend-title {
  font-size: 14px;
  font-weight: 600;
}
.lp .lp-blend-title .ds-chip {
  margin-left: 6px;
  vertical-align: 1px;
}
.lp .lp-blend-meta {
  font-size: 11.5px;
  color: var(--ink3);
}
.lp .lp-blend-body {
  padding: 10px 18px 4px;
}
.lp .lp-blend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px 44px;
  gap: 14px;
  align-items: center;
  height: 38px;
  border-bottom: 1px solid var(--rule);
}
.lp .lp-blend-name {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}
.lp .lp-blend-sub {
  font-size: 11.5px;
  line-height: 15px;
  color: var(--ink3);
}
.lp .lp-blend-track {
  height: 8px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--band);
}
.lp .lp-blend-bar {
  height: 8px;
  transform-origin: left;
}
.lp .lp-blend-pct {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
}
.lp .lp-blend-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 14px 0 12px;
}
.lp .lp-blend-label {
  margin-bottom: 2px;
  font-size: 11.5px;
  color: var(--ink3);
}

/* ---------- the transition carousel ---------- */
.lp .lp-story {
  background: var(--sf);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lp .lp-story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--sf2);
  border-bottom: 1px solid var(--rule);
}
.lp .lp-story-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.lp .lp-story-meta {
  font-size: 11.5px;
  color: var(--ink3);
}
.lp .lp-story-body {
  padding: 22px 22px 20px;
}
.lp .lp-beat {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.lp .lp-beat-title {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lp .lp-beat-sub {
  font-size: 13.5px;
  line-height: 20px;
  color: var(--ink2);
}
.lp .lp-beat-stage {
  min-width: 0;
}
.lp .lp-beat-stage svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  font-family: var(--font-sans);
}
.lp .lp-beat-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.lp .lp-beat-tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
}
.lp .lp-beat-tabs button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px 9px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sf);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink2);
  cursor: pointer;
}
.lp .lp-beat-tabs button.is-active {
  border-color: var(--ink);
  background: var(--selected-tint);
  color: var(--ink);
}
.lp .lp-beat-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--ink);
}
.lp .lp-beat-buttons {
  display: flex;
  gap: 6px;
}
.lp .lp-beat-buttons button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  background: var(--sf);
  color: var(--ink);
  cursor: pointer;
}
.lp .lp-beat-buttons button:hover,
.lp .lp-beat-tabs button:not(.is-active):hover {
  background: var(--hover);
}

/* ---------- the sample-sleeve constructor ---------- */
.lp .lp-lab-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.lp .lp-lab-head .lp-eyebrow {
  margin-bottom: 10px;
}
.lp .lp-lab-head .lp-h2 {
  margin-bottom: 0;
}
.lp .lp-lab-head p {
  max-width: 440px;
  font-size: 15px;
  line-height: 23px;
  color: var(--ink2);
  text-wrap: pretty;
}
.lp .lp-lab {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: 24px;
  align-items: start;
}
.lp .lp-lab-panel {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.lp .lp-lab-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}
.lp .lp-lab-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 18px;
}
.lp .lp-lab-presets button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  background: var(--sf);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.lp .lp-lab-presets button:hover {
  background: var(--hover);
}
.lp .lp-lab-presets button.is-active {
  border-color: var(--ink);
  background: var(--selected-tint);
}
.lp .lp-lab-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp .lp-lab-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 76px 24px;
  gap: 10px;
  align-items: center;
}
.lp .lp-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.lp .lp-lab-row .ds-select {
  text-overflow: ellipsis;
}
.lp .lp-lab-weight.lp-lab-weight {
  text-align: right;
}
.lp .lp-lab-remove {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink3);
  cursor: pointer;
}
.lp .lp-lab-remove:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}
.lp .lp-lab-remove:disabled {
  opacity: 0.35;
  cursor: default;
}
.lp .lp-lab-add {
  margin-top: 8px;
  font-size: 12.5px;
}
.lp .lp-lab-note {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink3);
}
.lp .lp-lab-mix {
  margin-top: 14px;
}
.lp .lp-lab-mixbar {
  display: flex;
  gap: 2px;
  height: 8px;
  overflow: hidden;
  border-radius: 2px;
}
.lp .lp-lab-mixbar span {
  flex-basis: 0;
}
.lp .lp-lab-mixbar span.is-empty {
  flex-grow: 1;
  background: var(--band);
}
.lp .lp-lab-mixlegend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink3);
}
.lp .lp-lab-mixlegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp .lp-lab-mixlegend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.lp .lp-lab-divider {
  height: 1px;
  margin: 18px 0 14px;
  background: var(--rule);
}
.lp .lp-lab-size {
  max-width: 220px;
}
.lp .lp-lab-size .ds-input.ds-input {
  font-weight: 600;
}
.lp .lp-lab-assume {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 2px;
}
.lp .lp-lab-slider-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.lp .lp-lab-slider-row b {
  font-weight: 600;
}
.lp .lp-lab-assume .lp-lab-note {
  margin-top: 0;
}
.lp .lp-lab-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lp .lp-lab-results-head .lp-lab-label {
  margin-bottom: 0;
}
.lp .lp-lab-composite {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.lp .lp-lab-composite-sub {
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.lp .lp-lab-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sf2);
}
.lp .lp-lab-stats > div {
  min-width: 0;
  padding: 12px 16px;
}
.lp .lp-lab-stats > div:first-child {
  border-right: 1px solid var(--rule);
}
.lp .lp-lab-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink3);
}
.lp .lp-lab-stat-value {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.015em;
}
.lp .lp-lab-stat-sub {
  font-size: 12px;
  color: var(--ink3);
}
.lp .lp-lab-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: var(--ink3);
}
.lp .lp-lab-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lp .lp-lab-legend .sw {
  display: inline-block;
  width: 18px;
}
.lp .lp-lab-legend .sw.di {
  border-top: 2.5px solid var(--ink);
}
.lp .lp-lab-legend .sw.etf {
  border-top: 2px dashed var(--chart-bench);
}
.lp .lp-lab-chart {
  position: relative;
}
.lp .lp-lab-chart svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
}
/* Sizes in viewBox units. The text scales with the 780-unit chart, so 14 units stays at 11px or more
   only while the chart is at least 613px wide: 650px at 1366 draws 11.7px (15 units, 12.5px). Under
   613px the chart renders tight (.lp-lab-chart--tight, below): this text hides and the row under the
   chart states the ends. */
.lp .lp-lab-chart .ax {
  font-size: 14px;
  fill: var(--ink3);
}
.lp .lp-lab-chart .ep-name {
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink3);
}
.lp .lp-lab-chart .ep-val {
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
}
.lp .lp-lab-chart .hit {
  pointer-events: all;
}
/* The chart's ends as a line of text, shown only while the chart is too narrow for its own labels. */
.lp .lp-lab-ends {
  display: none;
}
/* A tight chart (under 613px; set by CompoundingChart from the same width that picks its viewBox):
   14 units would draw under 11px there. Measured on the site build: 1300 → 615px (11.0px, labels
   kept); 1280 → 604px (10.8px) and 1100 → 507px (9.1px), two columns; 700 → 602px (10.8px), one
   column; 390 → 308px (5.5px). Each of those under 613 hides the labels and shows the ends row. */
.lp .lp-lab-chart--tight .ax,
.lp .lp-lab-chart--tight .ep-name,
.lp .lp-lab-chart--tight .ep-val {
  display: none;
}
.lp .lp-lab-chart--tight + .lp-lab-ends {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink3);
}
.lp .lp-lab-chart--tight + .lp-lab-ends b {
  font-weight: 600;
  color: var(--ink);
}
.lp .lp-lab-tip {
  position: absolute;
  top: 10px;
  z-index: 5;
  min-width: 178px;
  padding: 10px 12px;
  pointer-events: none;
  background: var(--sf);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 12px;
}
.lp .lp-lab-tip .t-when {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink3);
}
.lp .lp-lab-tip .t-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.lp .lp-lab-tip .t-row span {
  color: var(--ink3);
}
.lp .lp-lab-tip .t-row b {
  font-weight: 600;
}
.lp .lp-lab-tip .t-diff {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.lp .lp-lab-tip .t-diff b {
  color: var(--tax);
}
.lp .lp-lab-empty {
  padding: 40px 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink3);
}

/* ---------- the CTA band: the one ink ground on the page ---------- */
.lp .lp-cta {
  background: var(--ink);
  color: var(--sf);
}
.lp .lp-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  max-width: 1384px;
  margin: 0 auto;
  padding: 72px var(--lp-gutter);
}
.lp .lp-cta h2 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 46px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.lp .lp-cta p {
  max-width: 640px;
  font-size: 17px;
  line-height: 26px;
  color: var(--rule2);
}
.lp .lp-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lp .lp-cta-buttons button {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.lp .lp-cta-primary {
  border: 1px solid var(--sf);
  background: var(--sf);
  color: var(--ink);
}
.lp .lp-cta-primary:hover {
  background: var(--selected-tint);
}
.lp .lp-cta-ghost {
  border: 1px solid var(--ink3);
  background: transparent;
  color: var(--sf);
}
.lp .lp-cta-ghost:hover {
  border-color: var(--sf);
}
.lp .lp-cta :focus-visible {
  outline-color: var(--sf);
}

/* ---------- footer ---------- */
.lp .lp-foot {
  background: var(--sf);
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink2);
}
.lp .lp-foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 36px;
  max-width: 1384px;
  margin: 0 auto;
  padding: 44px var(--lp-gutter) 32px;
  border-bottom: 1px solid var(--rule);
}
.lp .lp-foot-logo {
  width: auto;
  height: 24px;
  margin-bottom: 14px;
}
.lp .lp-foot-blurb {
  max-width: 280px;
}
.lp .lp-foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.lp .lp-foot-col h4 {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink3);
}
.lp .lp-foot-col a,
.lp .lp-foot-col button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 400;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.lp .lp-foot-col a:hover,
.lp .lp-foot-col button:hover {
  color: var(--acc-ink);
  text-decoration: underline;
}
.lp .lp-foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 1384px;
  margin: 0 auto;
  padding: 18px var(--lp-gutter) 24px;
  font-size: 12px;
  color: var(--ink3);
}

/* ---------- legal pages (site/legal → terms.html, privacy.html): counsel's markup, as written ---------- */
.lp .lp-legal-head,
.lp .lp-legal {
  max-width: calc(760px + 2 * var(--lp-gutter));
  margin: 0 auto;
  padding-right: var(--lp-gutter);
  padding-left: var(--lp-gutter);
}
.lp .lp-legal-head {
  padding-top: 56px;
  padding-bottom: 8px;
}
.lp .lp-legal-head .lp-hero-logo {
  margin-bottom: 48px;
}
.lp .lp-legal-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 46px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.lp .lp-legal-updated {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink3);
}
.lp .lp-legal {
  padding-top: 24px;
  padding-bottom: 72px;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink2);
  overflow-wrap: anywhere;
}
.lp .lp-legal h2 {
  margin: 40px 0 12px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lp .lp-legal h3 {
  margin: 28px 0 8px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
}
.lp .lp-legal > :first-child {
  margin-top: 0;
}
.lp .lp-legal p {
  margin: 0 0 16px;
}
.lp .lp-legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
  list-style: disc;
}
.lp .lp-legal li {
  margin-bottom: 6px;
}
.lp .lp-legal strong {
  font-weight: 600;
  color: var(--ink);
}
.lp .lp-legal a {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp .lp-legal a:hover {
  color: var(--acc-ink);
}

/* ---------- disclosures: every note on the page, numbered, under the footer ---------- */
.lp .lp-disclosures {
  background: var(--sf);
  border-top: 1px solid var(--rule);
}
.lp .lp-disclosures-inner {
  max-width: 1384px;
  margin: 0 auto;
  padding: 20px var(--lp-gutter) 32px;
}
.lp .lp-disclosures .lp-eyebrow {
  margin-bottom: 10px;
}
.lp .lp-disclosures ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  line-height: 17px;
  color: var(--ink3);
}
.lp .lp-fn-num {
  font-weight: 600;
}
/* the marker at the thing a note qualifies */
.lp .lp-fn {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
}
.lp .lp-fn a {
  color: var(--ink3);
  text-decoration: none;
}
.lp .lp-fn a:hover {
  color: var(--ink);
}
.lp .lp-foot-legal {
  display: flex;
  flex-shrink: 0;
  gap: 20px;
}
.lp .lp-foot-legal a {
  font-weight: 400;
  color: inherit;
}
.lp .lp-foot-legal a:hover {
  color: var(--ink);
}

/* ---------- ≤1024: one column ---------- */
/* ---------- demos: three published walkthroughs ---------- */
.lp .lp-demos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.lp .lp-demo {
  margin: 0;
}
.lp .lp-demo-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.lp .lp-demo-title {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- questions: one disclosure per question ---------- */
.lp .lp-faq {
  max-width: 880px;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}
.lp .lp-faq-item {
  border-bottom: 1px solid var(--rule);
}
.lp .lp-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
}
.lp .lp-faq-item summary::-webkit-details-marker {
  display: none;
}
.lp .lp-faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-weight: 400;
  color: var(--ink3);
}
.lp .lp-faq-item[open] summary::after {
  content: '−';
}
.lp .lp-faq-item p {
  max-width: 760px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink2);
}

@media (max-width: 1024px) {
  .lp .lp-demos {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp .lp-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .lp .lp-hero--contact .lp-auth {
    margin-top: 0;
  }
  .lp .lp-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp .lp-facts-lead,
  .lp .lp-fact {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .lp .lp-fact:last-child {
    padding-right: 24px;
    border-bottom: 0;
  }
  .lp .lp-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .lp .lp-split--mock-left > :last-child {
    order: 0;
  }
  /* Stacked, a mock would stretch to the page and its scene with it; it keeps the width it is drawn at. */
  .lp .lp-mock-frame,
  .lp .lp-story {
    max-width: 720px;
  }
  .lp .lp-lab-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp .lp-lab {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp .lp-cta-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .lp .lp-foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .lp .lp-foot-grid > :first-child {
    grid-column: 1 / -1;
  }
}

/* ---------- ≤640: phone ---------- */
@media (max-width: 640px) {
  .lp {
    --lp-gutter: 20px;
  }
  .lp .lp-legal-head {
    padding-top: 32px;
  }
  .lp .lp-legal-head .lp-hero-logo {
    margin-bottom: 32px;
  }
  .lp .lp-legal-title {
    font-size: 30px;
    line-height: 36px;
  }
  .lp .lp-legal h2 {
    margin-top: 32px;
    font-size: 20px;
    line-height: 26px;
  }
  .lp .lp-legal h3 {
    font-size: 17px;
  }
  .lp .lp-hero {
    padding-top: 32px;
    padding-bottom: 40px;
  }
  .lp .lp-hero-logo {
    height: 26px;
    margin-bottom: 32px;
  }
  .lp .lp-hero h1 {
    font-size: 36px;
    line-height: 42px;
  }
  .lp .lp-hero-kicker {
    font-size: 19px;
    line-height: 26px;
  }
  .lp .lp-h2,
  .lp .lp-cta h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .lp .lp-split,
  .lp .lp-wrap {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .lp .lp-cta-inner {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .lp .lp-facts-wrap {
    padding-bottom: 56px;
  }
  .lp .lp-auth {
    padding: 22px 20px 20px;
  }
  .lp .lp-fact-figure {
    font-size: 36px;
    line-height: 40px;
  }
  .lp .lp-mock-frame {
    padding: 16px;
  }
  .lp .lp-blend-row {
    grid-template-columns: minmax(0, 1fr) 64px 36px;
    gap: 10px;
    height: auto;
    min-height: 38px;
    padding: 5px 0;
  }
  .lp .lp-story-meta {
    display: none;
  }
  /* 13px sides, not 16: at a 390px viewport the stage is then 322px, over the 320px its smallest
     label needs to draw at 11px (transitionCarousel.tsx, MIN_LABEL_W). */
  .lp .lp-story-body {
    padding: 18px 13px 16px;
  }
  .lp .lp-beat {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .lp .lp-beat-tab-name {
    display: none;
  }
  .lp .lp-beat-tabs button {
    text-align: center;
  }
  .lp .lp-lab-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp .lp-lab-stats > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .lp .lp-foot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp .lp-foot-bottom {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp * {
    scroll-behavior: auto;
  }
}

/* ---------- Page texture (2026-10-29): contour-line sheets behind the ground bands, on with ?theme=contour ----------
   Four SVG topographic sheets, 24 levels each, (texture-contour-*.svg: iso-lines of a smooth height field, 1px non-scaling strokes, one
   contour in the brand blue-to-green gradient) run the full width behind the hero and fact strip as one, the transition
   band, the FAQ band and the ink CTA band; the white bands stay clean. Every text block knocks the lines out with a
   feathered halo of its own ground, so a line never crosses copy. Below the stacking breakpoint the sheets go. */
.lp[data-lp-theme='contour'] .lp-hero {
  position: relative;
}
.lp[data-lp-theme='contour'] .lp-hero > * {
  position: relative;
  z-index: 1;
}
.lp[data-lp-theme='contour'] #transition,
.lp[data-lp-theme='contour'] #faq,
.lp[data-lp-theme='contour'] .lp-cta {
  position: relative;
  isolation: isolate;
}
.lp[data-lp-theme='contour'] .lp-hero::before,
.lp[data-lp-theme='contour'] #transition::before,
.lp[data-lp-theme='contour'] #faq::before,
.lp[data-lp-theme='contour'] .lp-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* The hero is the one band narrower than the viewport: its sheet bleeds to both edges and runs on behind the fact
   strip; the first white band, lifted above it, hides the overshoot. */
.lp[data-lp-theme='contour'] .lp-hero::before {
  z-index: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: -520px;
  background-image: url(/assets/texture-contour-a.svg);
}
.lp[data-lp-theme='contour'] .lp-facts-wrap,
.lp[data-lp-theme='contour'] .lp-band--sf {
  position: relative;
  z-index: 1;
}
.lp[data-lp-theme='contour'] #transition::before {
  background-image: url(/assets/texture-contour-b.svg);
}
.lp[data-lp-theme='contour'] #faq::before {
  background-image: url(/assets/texture-contour-c.svg);
}
.lp[data-lp-theme='contour'] .lp-cta::before {
  background-image: url(/assets/texture-contour-ink.svg);
}
/* Knockouts: each text block sits on a halo of its band's ground. */
.lp[data-lp-theme='contour'] .lp-hero-copy > *,
.lp[data-lp-theme='contour'] #transition .lp-split > div:first-child > *,
.lp[data-lp-theme='contour'] #faq .lp-wrap > * {
  width: -moz-fit-content;
  width: fit-content;
  background: var(--bg);
  box-shadow:
    0 0 0 10px var(--bg),
    0 0 22px 16px var(--bg);
}
.lp[data-lp-theme='contour'] #faq .lp-faq {
  width: auto;
}
.lp[data-lp-theme='contour'] .lp-cta-inner > div:first-child > *,
.lp[data-lp-theme='contour'] .lp-cta-buttons {
  width: -moz-fit-content;
  width: fit-content;
  background: var(--ink);
  box-shadow:
    0 0 0 10px var(--ink),
    0 0 22px 16px var(--ink);
}
/* The FAQ is a ground band only while its sheet shows; below the breakpoint it keeps its white band. */
@media (min-width: 1025px) {
  .lp[data-lp-theme='contour'] #faq {
    background: var(--bg);
  }
}
@media (max-width: 1024px) {
  .lp[data-lp-theme='contour'] .lp-hero::before,
  .lp[data-lp-theme='contour'] #transition::before,
  .lp[data-lp-theme='contour'] #faq::before,
  .lp[data-lp-theme='contour'] .lp-cta::before {
    display: none;
  }
  .lp[data-lp-theme='contour'] .lp-hero-copy > *,
  .lp[data-lp-theme='contour'] #transition .lp-split > div:first-child > *,
  .lp[data-lp-theme='contour'] #faq .lp-wrap > *,
  .lp[data-lp-theme='contour'] .lp-cta-inner > div:first-child > *,
  .lp[data-lp-theme='contour'] .lp-cta-buttons {
    width: auto;
    background: none;
    box-shadow: none;
  }
}