/* Proceeds Ledger: shared stylesheet.
   Noema 3.0 values. Dark only: there is no light theme and no prefers-color-scheme switch.
   Component CSS reads --pl-* tokens only; raw colour values live in the token block.
   Solid surfaces only. No blur, glow or atmosphere.
   Page-specific rules live in landing.css, tool.css and doc.css.
   Source of the values: noema/src/design-system (tokens.css, design-system.css, patterns.css). */

/* ================= Fonts: self-hosted, latin subset, SIL OFL 1.1 (licenses in ../fonts/) ================= */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ================= Tokens ================= */
/* Proceeds Ledger tokens = Noema 3.0 values, verbatim.
   Source: noema/src/design-system/tokens.css (generated from tokens.ts).
   Each comment names the Noema variable · tokens.json path. Noema is dark-only. */
:root {
  color-scheme: dark;

  /* ---- Surfaces ---- */
  --pl-canvas: #030918;          /* --noema-void · color.canvas (page field) */
  --pl-solid: #0b1024;           /* --noema-solid = --noema-surface · color.surface.card = material.solid.bg */
  --pl-raised: #161f2c;          /* --noema-raised · color.surface.raised (tooltip/popover; always solid) */
  --pl-fill: #f6f4ef12;          /* --noema-fill · color.fill (the one neutral fill) */
  --pl-fill-hover: #f6f4ef1f;    /* --noema-fill-hover · color.fill-hover */
  --pl-fill-pressed: #f6f4ef29;  /* --noema-fill-pressed · color.fill-pressed */
  --pl-selected: #f6f4ef29;      /* --noema-selected · color.selected */
  --pl-divider: #f6f4ef1f;       /* --noema-divider · color.divider (rows, sections) */
  --pl-overlay: #020917cc;       /* --noema-material-backdrop · color.overlay (scrim) */
  --pl-disabled-bg: #28323e;     /* --noema-disabled · color.disabled.bg */
  --pl-disabled-text: #d3dce3;   /* --noema-disabled-text · color.disabled.text */

  /* ---- Edges ---- */
  --pl-control-border: #758398;  /* --noema-control-border · color.border.control: the ONLY edge a control uses */
  --pl-edge: #cbd4ff24;          /* --noema-material-border · material.glass.content.edge: card/header/menu edge */
  --pl-edge-hover: #d2dbff3d;    /* --noema-material-border-hover · material.glass.content.edge-hover */
  --pl-border-quiet: #3b4960;    /* --noema-border (2.0 key): disabled checkbox edge only */

  /* ---- Text (always opaque, never transparency) ---- */
  --pl-text: #f6f4ef;            /* --noema-text · text.primary */
  --pl-text-muted: #ccd6e3;      /* --noema-muted · text.muted (secondary) */
  --pl-text-subtle: #b9c6d7;     /* --noema-subtle · text.subtle (metadata) */
  --pl-text-on-action: #101b29;  /* --noema-action-text · text.on-action (only on --pl-action or a filled accent) */

  /* ---- Primary action (ivory; never tinted) ---- */
  --pl-action: #eeeae0;          /* --noema-action · action.bg */
  --pl-action-hover: #fffdf7;    /* --noema-action-hover · action.bg-hover */
  --pl-action-pressed: #d7d4cc;  /* --noema-action-pressed · action.bg-pressed */

  /* ---- Focus ---- */
  --pl-focus: #f5e5bf;           /* --noema-focus · focus.ring */
  --pl-focus-width: 2px;         /* --noema-control-focus-width · focus.width */
  --pl-focus-offset: 4px;        /* --noema-control-focus-offset · focus.offset */

  /* ---- Accent scope (Noema's accent variable; NOT the action) ---- */
  --pl-chapter-i: #c4e0f7;       /* --noema-chapter-i (ice) */
  --pl-chapter-ii: #d7c2f1;      /* --noema-chapter-ii (lilac) */
  --pl-chapter-iii: #e7cdad;     /* --noema-chapter-iii (wheat) */
  --pl-chapter-iv: #dfdfd8;      /* --noema-chapter-iv (stone, near-neutral) */
  --pl-accent: var(--pl-chapter-i); /* DERIVED: one site accent (ice) for every page */

  /* ---- States: label + the 5-step ladder (state.<s>.hover/selected/halo/strong/label) ---- */
  --pl-success: #a8d9c3;           /* --noema-success · state.success.label */
  --pl-success-hover: #182031;     /* state.success.hover */
  --pl-success-selected: #212c3a;  /* state.success.selected (notice fill) */
  --pl-success-halo: #2a3844;      /* state.success.halo */
  --pl-success-strong: #3d5057;    /* state.success.strong */
  --pl-warning: #efd099;           /* --noema-warning = --noema-warning-label · state.warning.label */
  --pl-warning-hover: #1d1f2d;     /* state.warning.hover */
  --pl-warning-selected: #2b2b34;  /* --noema-warning-fill · state.warning.selected */
  --pl-warning-halo: #39363b;      /* state.warning.halo */
  --pl-warning-strong: #544d49;    /* state.warning.strong */
  --pl-danger: #efb1b6;            /* --noema-danger = --noema-danger-label · state.danger.label */
  --pl-danger-hover: #1d1d30;      /* state.danger.hover */
  --pl-danger-selected: #2b2738;   /* --noema-danger-fill · state.danger.selected */
  --pl-danger-halo: #393041;       /* state.danger.halo */
  --pl-danger-strong: #544453;     /* state.danger.strong */
  /* Info: Noema has NO info hue. Info notice = --pl-fill with a --pl-text-muted icon (COMPONENTS.md › Notice).
     Not imported on purpose: role.* ice/sand/violet (Noema "Today" roles), art/well colours, atmosphere. */

  /* ---- Tint ladder: color-mix(in srgb, <accent|state|action> <step>, transparent). Never hand-pick a %. ---- */
  --pl-tint-wash: 5%;   --pl-tint-glow: 7%;   --pl-tint-faint: 10%; --pl-tint-soft: 14%;
  --pl-tint-quiet: 16%; --pl-tint-hover: 18%; --pl-tint-halo: 20%;  --pl-tint-press: 22%;
  --pl-tint-rule: 24%;  --pl-tint-edge: 28%;  --pl-tint-ring: 40%;  --pl-tint-line: 45%;
  --pl-tint-bloom: 55%;                                         /* --noema-tint-* */

  /* ---- Materials and elevation (only floating layers cast a shadow) ---- */
  --pl-shadow-none: none;                                              /* --noema-shadow-low · shadow.none */
  --pl-shadow-action: inset 0 1px 0 #ffffffa6, 0 3px 9px #00000016;    /* --noema-shadow-action (ivory button) */
  --pl-shadow-lift: inset 0 1px 0 #ffffff0a, 0 18px 40px -18px #00000099; /* --noema-shadow-lift (the one offer card) */
  --pl-shadow-menu: 0 18px 40px -16px #000000b3;                       /* --noema-shadow-menu */
  --pl-shadow-float: 0 24px 80px #02061566, inset 0 1px 0 #e6ebff14;   /* --noema-shadow-float (dialog/sheet only) */
  --pl-specular: inset 0 1px 0 #ffffff1a, inset 0 -1px 0 #02061559;    /* --noema-material-glass-specular */
  --pl-sheen: linear-gradient(180deg, #f6f4ef12 0%, #f6f4ef04 28%, #f6f4ef00 55%); /* --noema-material-glass-sheen */
  --pl-glow-action: 0 0 32px -6px;   /* --noema-glow-action (+ colour) */
  --pl-glow-halo-dot: 5px;           /* --noema-glow-halo-dot */

  /* ---- Font families ---- */
  --pl-font-ui: Figtree, "Figtree Fallback", ui-sans-serif, system-ui, sans-serif; /* --noema-font-body = --noema-font-display · font.ui */
  --pl-font-wordmark: var(--pl-font-ui);                    /* DERIVED: Plex Serif is not shipped, so the wordmark is Figtree 600 (same stack as the UI) */
  --pl-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* --noema-font-mono · font.data (real code/data only) */

  /* ---- Weights (only three exist) ---- */
  --pl-weight-regular: 400;   /* --noema-type-weight-body */
  --pl-weight-medium: 500;    /* base.font.weight.medium */
  --pl-weight-semibold: 600;  /* --noema-type-weight-heading = --noema-type-weight-action */

  /* ---- Base type ---- */
  --pl-type-body: 1rem;            /* --noema-type-body (floor for body text) */
  --pl-type-body-large: 1.125rem;  /* --noema-type-body-large */
  --pl-type-metadata: 0.875rem;    /* --noema-type-metadata (caption/label/note/eyebrow; 14px floor) */
  --pl-type-support: 0.9375rem;    /* --noema-type-scale-support */
  --pl-type-tag: 0.8125rem;        /* --noema-type-scale-tag (13px; 1–2 words, semibold only) */
  --pl-leading-body: 1.5;          /* --noema-type-line-body */
  --pl-leading-heading: 1.2;       /* --noema-type-line-heading */
  --pl-leading-note: 1.25rem;      /* --noema-type-scale-note-leading */
  --pl-tracking-heading: -0.02em;  /* --noema-type-tracking-heading */
  --pl-tracking-label: 0.005em;    /* type.label (base.tracking.wide-1) */
  --pl-tracking-eyebrow: 0.01em;   /* --noema-type-scale-eyebrow-tracking */

  /* ---- Standard scale (public pages / hero moments) ---- */
  --pl-type-headline: clamp(2.75rem, 7vw, 4.5rem);   /* --noema-type-scale-headline */
  --pl-leading-headline: 1.04;                       /* …-headline-leading */
  --pl-tracking-headline: -0.035em;                  /* …-headline-tracking */
  --pl-type-heading: clamp(2rem, 3.6vw, 3.25rem);    /* --noema-type-scale-heading */
  --pl-leading-heading-scale: 1.1;                   /* …-heading-leading */
  --pl-tracking-heading-scale: -0.025em;             /* …-heading-tracking */
  --pl-type-statement: clamp(1.5rem, 2.4vw, 2rem);   /* --noema-type-scale-statement (leading 1.2, tracking -0.02em) */
  --pl-type-numeral: clamp(2.5rem, 4vw, 3.5rem);     /* --noema-type-scale-numeral (leading 1) */
  --pl-tracking-numeral: -0.03em;                    /* …-numeral-tracking */
  --pl-type-title: clamp(1.375rem, 2vw, 1.5rem);     /* --noema-type-scale-title */
  --pl-leading-title: 1.25;                          /* …-title-leading */
  --pl-type-intro: clamp(1.25rem, 1.7vw, 1.625rem);  /* --noema-type-scale-intro (weight 500) */
  --pl-leading-intro: 1.3;                           /* …-intro-leading */
  --pl-type-lead: clamp(1.0625rem, 1.4vw, 1.25rem);  /* --noema-type-scale-lead */
  --pl-leading-lead: 1.55;                           /* …-lead-leading */
  /* Product sizes for working views (literals in design-system.css: heading-section and heading-card) */
  --pl-type-heading-section: 2rem;    /* 600 / 1.2 / -0.02em */
  --pl-type-heading-card: 1.625rem;   /* 600 / 1.27 / -0.02em */

  /* ---- Space ladder ---- */
  --pl-space-1: 0.25rem; --pl-space-2: 0.5rem; --pl-space-3: 0.75rem; --pl-space-4: 1rem;
  --pl-space-5: 1.5rem;  --pl-space-6: 2rem;   --pl-space-7: 3rem;    --pl-space-8: 4rem;
  --pl-space-9: 6rem;                                           /* --noema-space-1 … -9 */

  /* ---- Layout ---- */
  --pl-content: 80rem;                              /* --noema-layout-content */
  --pl-reading: 42rem;                              /* --noema-layout-reading (prose cap) */
  --pl-form: 30rem;                                 /* --noema-layout-form */
  --pl-tool: 60rem;                                   /* DERIVED: tool column on app.html (~960px) */
  --pl-gutter: clamp(1rem, 4vw, 3rem);              /* --noema-layout-gutter (16px at 375px) */
  --pl-header-height: 4rem;                         /* --noema-layout-header-height */
  --pl-anchor-offset: 5rem;                         /* --noema-layout-anchor-offset */
  --pl-column-gap: clamp(2rem, 5vw, 4.5rem);        /* --noema-layout-column-gap */
  --pl-block-gap: clamp(3rem, 6vw, 5rem);           /* --noema-layout-block-gap */
  --pl-head-gap: clamp(2.5rem, 5vw, 4rem);          /* --noema-layout-head-gap */
  --pl-band-pad-block: clamp(2rem, 5vw, 4.5rem);    /* --noema-layout-band-pad-block */
  --pl-band-pad-inline: clamp(1.5rem, 4vw, 3.5rem); /* --noema-layout-band-pad-inline */
  --pl-app-pad-top: clamp(1.5rem, 3vw, 2.5rem);     /* --noema-layout-app-pad-top */
  --pl-app-head-gap: clamp(1.5rem, 2.5vw, 2rem);    /* --noema-layout-app-head-gap */
  --pl-app-pad-bottom: clamp(3rem, 6vw, 5rem);      /* --noema-layout-app-pad-bottom */

  /* ---- Radii (radius follows size) ---- */
  --pl-radius-pill: 999px;          /* --noema-radius-pill: every control */
  --pl-radius-input: 0.75rem;       /* --noema-radius-input: text fields, selects */
  --pl-radius-md: 0.75rem;          /* --noema-radius-md: icon tile, menu item */
  --pl-radius-sm: 0.625rem;         /* --noema-radius-sm: skeleton, tooltip */
  --pl-radius-well: 0.5rem;         /* --noema-radius-well */
  --pl-radius-media: 0.25rem;       /* --noema-radius-media: checkbox box, thumbnails, inline code */
  --pl-radius-xl: 1.75rem;          /* --noema-radius-xl: dialog */
  --pl-radius-surface-md: 1.125rem; /* --noema-radius-surface-md: inner block, callout, error */
  --pl-radius-surface-lg: 1.5rem;   /* --noema-radius-surface-lg: card, menu panel */
  --pl-radius-surface-xl: 2rem;     /* --noema-radius-surface-xl: band, stage */

  /* ---- Controls and icons ---- */
  --pl-control-min: 2.75rem;      /* --noema-control-min (44px) */
  --pl-control-primary: 3rem;     /* --noema-control-primary (48px) */
  --pl-control-chip: 2rem;        /* control.height.chip */
  --pl-icon-xs: 14px; --pl-icon-s: 16px; --pl-icon-m: 20px; --pl-icon-l: 24px; /* --noema-icon-* */
  --pl-icon-stroke: 1.75;         /* --noema-icon-stroke (control icons) */
  --pl-icon-stroke-fine: 1.5;     /* --noema-icon-stroke-fine (pictograms) */
  --pl-icon-dot: 6px;             /* --noema-icon-dot */

  /* ---- Motion (durations + easing only) ---- */
  --pl-motion-fast: 160ms;   /* --noema-motion-fast: hover, press, focus, chrome fades */
  --pl-motion-base: 220ms;   /* --noema-motion-base: disclosures, menus, active swaps */
  --pl-motion-slow: 520ms;   /* --noema-motion-slow: one reveal max (not needed here) */
  --pl-motion-open: 400ms;   /* --noema-motion-open */
  --pl-ease: cubic-bezier(.2, .8, .2, 1);          /* --noema-ease = --noema-motion-easing: colour-only chrome */
  --pl-ease-out: cubic-bezier(.22, 1, .36, 1);     /* --noema-motion-ease-out: entrances, hover, feedback */
  --pl-ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* --noema-motion-ease-in-out */
  --pl-ease-open: cubic-bezier(.3, 0, .2, 1);      /* --noema-motion-ease-open */
  --pl-spring: cubic-bezier(.34, 1.56, .64, 1);    /* --noema-motion-spring (toggle/thumb) */

  /* ---- Layers ---- */
  --pl-z-base: 0; --pl-z-raised: 10; --pl-z-tooltip: 40; --pl-z-modal: 50; /* --noema-z-* (sticky header uses raised) */

  /* ---- Component hooks used by the recipes below (not Noema tokens) ---- */
  --pl-pill-halo: var(--pl-fill);  /* DERIVED: ring behind the status dot; .pill-ok, .pill-warn and .pill-err override it */
  --pl-progress: 0%;               /* DERIVED: width of .progress > span; the page sets it inline on .progress */
}

/* Breakpoints (bp.*; mobile-first, min-width ONLY; vars can't go in @media):
   s = 37.5rem (600px)  m = 56.25rem (900px)  l = 75rem (1200px)  xl = 100rem (1600px) */

/* Large, tall screens: Noema bumps body and metadata one step (design-system.css) */
@media (min-width: 1600px) and (min-height: 850px) {
  :root { --pl-type-body: var(--pl-type-body-large); --pl-type-metadata: 1rem; }
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--pl-space-4); } /* header is static, so anchors need only a little air */
body {
  margin: 0; min-height: 100svh;
  background: var(--pl-canvas); color: var(--pl-text);
  font-family: var(--pl-font-ui); font-size: var(--pl-type-body);
  font-weight: var(--pl-weight-regular); line-height: var(--pl-leading-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Noema root smoothing */
}
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; }
:where(fieldset) { padding: 0; border: 0; min-width: 0; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }               /* app.js relies on this */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--pl-focus-width) solid var(--pl-focus);
  outline-offset: var(--pl-focus-offset);
}
:is(h1, h2, h3, h4, p, div, section, main, article)[tabindex="-1"]:focus { outline: none; } /* script-focused regions draw no ring */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { /* DERIVED */
  position: absolute; left: var(--pl-space-2); top: -4rem; z-index: var(--pl-z-modal);
  display: inline-flex; align-items: center; min-height: var(--pl-control-min);
  padding: 0 var(--pl-space-4); border-radius: var(--pl-radius-pill);
  background: var(--pl-action); color: var(--pl-text-on-action);
  font-weight: var(--pl-weight-semibold); text-decoration: none;
}
.skip-link:focus { top: var(--pl-space-2); }

/* Accent scope: one accent per section; never on the action, a state, or a background fill */
.accent-i { --pl-accent: var(--pl-chapter-i); }
.accent-ii { --pl-accent: var(--pl-chapter-ii); }
.accent-iii { --pl-accent: var(--pl-chapter-iii); }
.accent-iv { --pl-accent: var(--pl-chapter-iv); }

/* ================= Page shell / container / sections ================= */
.container { width: min(100% - var(--pl-gutter) * 2, var(--pl-content)); margin-inline: auto; } /* Noema container */
.container-reading { width: min(100% - var(--pl-gutter) * 2, var(--pl-reading)); margin-inline: auto; }
.section { padding-block: var(--pl-space-8); }                                 /* Noema section on the void */
@media (min-width: 56.25rem) { .section { padding-block: var(--pl-space-9); } } /* Noema uses 800px here; bp.m used */
.section-head { display: grid; gap: var(--pl-space-4); max-width: 48rem; margin-bottom: var(--pl-head-gap); } /* Noema section head */
.tool-page { padding-block: var(--pl-app-pad-top) var(--pl-app-pad-bottom); } /* app page rhythm */
.page-head { display: grid; gap: var(--pl-space-2); margin-bottom: var(--pl-app-head-gap); } /* AppPageHeader: eyebrow + h1 + support */
.page-head h1 { font: var(--pl-weight-semibold) var(--pl-type-heading-section)/var(--pl-leading-heading) var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-heading); text-wrap: balance; }
.stack > * + * { margin-top: var(--pl-space-4); }   /* flow utility */
.mt-1 { margin-top: var(--pl-space-3); }            /* app.js class; site value was 0.75rem */

/* Eyebrow: the accent label + hairline that opens a section (Noema eyebrow). Sentence case, never uppercase */
.eyebrow {
  display: flex; align-items: center; gap: var(--pl-space-4); margin: 0 0 var(--pl-space-2);
  font: var(--pl-weight-semibold) var(--pl-type-metadata)/var(--pl-leading-note) var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-eyebrow); color: var(--pl-accent);
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pl-accent) var(--pl-tint-line), transparent), var(--pl-divider) 40%);
}
.rule-accent { border-top: 1px solid color-mix(in srgb, var(--pl-accent) var(--pl-tint-rule), transparent); }

/* ================= Header: static, solid, one row at every width =================
   Replaces Noema's sticky, wrapping header. 64px in total (63px content + 1px border).
   Below 56.25rem the four links sit in a <details class="nav-menu"> dropdown (no JS). */
.site-header {
  position: relative;                              /* containing block of the open menu; no z-index, so the menu joins the root stacking context */
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--pl-solid); border-bottom: 1px solid var(--pl-divider);
}
.header-inner {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: var(--pl-space-3);
  min-height: calc(var(--pl-header-height) - 1px);  /* plus the 1px border = 64px */
  padding-block: var(--pl-space-2);
}
@media (min-width: 37.5rem) { .header-inner { gap: var(--pl-space-4); } }
.brand {
  display: inline-flex; align-items: center; gap: var(--pl-space-2);
  flex: 0 1 auto; min-width: 0;                    /* may wrap to two lines below ~350px instead of overflowing the page */
  min-height: var(--pl-control-min); color: var(--pl-text); text-decoration: none;
}
.brand-name { /* wordmark: plain text, Figtree 600; size and tracking DERIVED for a 15-character name */
  font-family: var(--pl-font-wordmark); font-weight: var(--pl-weight-semibold);
  font-size: clamp(1.125rem, 4.5vw, 1.375rem); line-height: 1; letter-spacing: var(--pl-tracking-heading);
}
@media (min-width: 37.5rem) { .brand-name { font-size: 1.5rem; } } /* = Noema .public-page__brand-sm 24px */
.site-nav { display: none; flex: 0 1 auto; min-width: 0; }   /* phones use .nav-menu instead */
.nav-list {                                          /* Noema nav pill */
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--pl-space-1);
  margin: 0; padding: var(--pl-space-1); list-style: none;
  border-radius: var(--pl-radius-pill); background: var(--pl-fill);
}
.nav-list a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; /* Noema literal values */
  border-radius: var(--pl-radius-pill);
  font-size: var(--pl-type-support); font-weight: var(--pl-weight-medium); line-height: 1.25;
  color: var(--pl-text); text-decoration: none; white-space: nowrap;
  transition: background-color var(--pl-motion-fast) var(--pl-ease);
}
.nav-list a:hover { background: var(--pl-fill-hover); }
.nav-list a[aria-current="page"] { background: var(--pl-selected); } /* DERIVED from legal policy pills */
.header-actions { display: flex; flex: none; align-items: center; gap: var(--pl-space-1); }
@media (min-width: 37.5rem) { .header-actions { gap: var(--pl-space-2); } }
.header-actions .btn { min-height: var(--pl-control-min); padding: 0 calc(var(--pl-space-3) - 1px);
  font-size: var(--pl-type-metadata); white-space: nowrap; box-shadow: none; }
@media (min-width: 37.5rem) { .header-actions .btn { padding: 0 calc(var(--pl-space-4) - 1px); font-size: var(--pl-type-support); } }
.nav-menu summary { list-style: none; }               /* summary carries .btn .btn-ghost .btn-sm */
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary.btn-ghost { background: var(--pl-selected); text-decoration: none; } /* open menu: the button reads as pressed; (0,3,1) out-ranks .btn-ghost:hover (0,3,0) */
.nav-menu-list {                                      /* open dropdown, right-aligned to the gutter */
  position: absolute; top: 100%; right: var(--pl-gutter); z-index: var(--pl-z-tooltip);
  min-width: 14rem; margin: var(--pl-space-1) 0 0; padding: var(--pl-space-2); list-style: none;
  background: var(--pl-raised); border: 1px solid var(--pl-edge);
  border-radius: var(--pl-radius-surface-lg); box-shadow: var(--pl-shadow-menu);
}
.nav-menu-list a {
  display: flex; align-items: center; width: 100%; min-height: var(--pl-control-min);
  padding: 0 var(--pl-space-4); border-radius: var(--pl-radius-md);
  font-size: var(--pl-type-support); font-weight: var(--pl-weight-medium); line-height: 1.25;
  color: var(--pl-text); text-decoration: none;
  transition: background-color var(--pl-motion-fast) var(--pl-ease);
}
.nav-menu-list a:hover { background: var(--pl-fill-hover); }
.nav-menu-list a[aria-current="page"] { background: var(--pl-selected); }
@media (min-width: 56.25rem) {
  .header-inner { position: relative; }  /* containing block of the centered nav pill; only from here up, because below it the open menu is positioned against .site-header */
  .site-nav { display: block; position: absolute; left: 50%; transform: translateX(-50%); } /* centered on the header, so the pill sits in the same place on every page, whatever the header actions hold */
  .nav-menu { display: none; }
}

/* ================= Footer ================= */
.site-footer { padding: 2.5rem 0 var(--pl-space-8); border-top: 1px solid var(--pl-divider); margin-top: var(--pl-block-gap); }
.footer-cols {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--pl-space-2);
  column-gap: var(--pl-column-gap); margin-bottom: 2.5rem;
}
@media (min-width: 27.5rem) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--pl-space-6); column-gap: var(--pl-space-5); }
  .footer-brand { grid-column: 1 / -1; } }                       /* Noema: 440px / 640px steps */
@media (min-width: 40rem) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 15rem)); justify-content: start; column-gap: var(--pl-column-gap); }
  .footer-brand { grid-column: auto; } }
.footer-heading { display: flex; align-items: center; min-height: var(--pl-control-min);
  font: var(--pl-weight-semibold) var(--pl-type-metadata)/var(--pl-leading-note) var(--pl-font-ui); color: var(--pl-text); }
.footer-links { display: grid; margin: 0; padding: 0; list-style: none; }
.footer-links li { display: flex; align-items: center; min-height: var(--pl-control-min); }
.footer-links a {
  display: inline-flex; align-items: center; min-height: var(--pl-control-min);
  color: var(--pl-text-muted); font-size: var(--pl-type-support); text-decoration: none; overflow-wrap: anywhere;
  transition: color var(--pl-motion-fast) var(--pl-ease);
}
.footer-links a:hover { color: var(--pl-text); text-decoration: underline; text-underline-offset: 0.3em; }
.footer-legal { /* trademark lines, seller line, "Not accounting or tax advice…" */
  margin: 0; max-width: var(--pl-reading);
  color: var(--pl-text-subtle); font-size: var(--pl-type-metadata); line-height: var(--pl-leading-note);
}
.footer-legal + .footer-legal { margin-top: var(--pl-space-2); }

/* ================= Headings and body text ================= */
h1, .t-headline {          /* one per public page (landing H1) */
  font: var(--pl-weight-semibold) var(--pl-type-headline)/var(--pl-leading-headline) var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-headline); text-wrap: balance; color: var(--pl-text);
}
h2, .t-heading {           /* section H2 on public pages */
  font: var(--pl-weight-semibold) var(--pl-type-heading)/var(--pl-leading-heading-scale) var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-heading-scale); text-wrap: balance; color: var(--pl-text);
}
h3, .t-title {             /* card and step titles (no tracking, as Noema) */
  font: var(--pl-weight-semibold) var(--pl-type-title)/var(--pl-leading-title) var(--pl-font-ui);
  text-wrap: balance; color: var(--pl-text);
}
.t-statement { font: var(--pl-weight-semibold) var(--pl-type-statement)/var(--pl-leading-heading) var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-heading); text-wrap: balance; }
.t-intro { font: var(--pl-weight-medium) var(--pl-type-intro)/var(--pl-leading-intro) var(--pl-font-ui);
  text-wrap: pretty; color: var(--pl-text); max-width: 34ch; } /* line under the H1; 34ch from the landing hero */
.lead, .t-lead { max-width: 62ch; font-size: var(--pl-type-lead); line-height: var(--pl-leading-lead);
  text-wrap: pretty; color: var(--pl-text-muted); }
p { text-wrap: pretty; }
.small, .t-support { font-size: var(--pl-type-support); line-height: var(--pl-leading-body); }
.muted { color: var(--pl-text-muted); }
.subtle { color: var(--pl-text-subtle); }
.t-note { font-size: var(--pl-type-metadata); line-height: var(--pl-leading-note); color: var(--pl-text-subtle); } /* meta line under a CTA */
.t-card-heading { font: var(--pl-weight-semibold) var(--pl-type-heading-card)/1.27 var(--pl-font-ui); letter-spacing: var(--pl-tracking-heading); }
strong, b { font-weight: var(--pl-weight-semibold); }  /* emphasis = semibold, same size, never italic */
em, i { font-style: normal; font-weight: var(--pl-weight-semibold); }
/* Working view (app.html): h1 uses .page-head (2rem); .tool-step > h2 uses .t-card-heading size; h3 inside cards = .t-title */

/* ================= Links ================= */
a { color: var(--pl-text); text-decoration: underline; text-decoration-color: var(--pl-text-subtle);
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  transition: text-decoration-color var(--pl-motion-fast) var(--pl-ease); }
a:hover { text-decoration-color: var(--pl-text); text-decoration-thickness: 2px; } /* COMPONENTS: "thicker underline" */
/* Links are always underlined (colour is never the cue). Nav, footer, buttons opt out explicitly above/below. */

/* ================= Buttons ================= */
.btn {                                        /* Noema button: fill-only pill, 1px transparent edge keeps geometry */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pl-space-2);
  min-height: var(--pl-control-min); padding: 0.625rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--pl-radius-pill);
  background: var(--pl-fill); color: var(--pl-text);
  font: var(--pl-weight-semibold) var(--pl-type-body)/1.4 var(--pl-font-ui);
  text-align: center; text-decoration: none; text-wrap: balance; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--pl-motion-fast) var(--pl-ease), color var(--pl-motion-fast) var(--pl-ease);
}
.btn-primary {                                /* Noema primary CTA: ONE per decision */
  min-height: var(--pl-control-primary); padding: 0 calc(var(--pl-space-5) - 1px); line-height: 1.5;
  background: var(--pl-action); color: var(--pl-text-on-action); box-shadow: var(--pl-shadow-action);
}
.btn-primary:hover:not(:disabled, [aria-disabled="true"]) { background: var(--pl-action-hover); }
.btn-primary:active:not(:disabled, [aria-disabled="true"]) { background: var(--pl-action-pressed); }
.btn-secondary { background: var(--pl-fill); color: var(--pl-text); }       /* Noema secondary / quiet */
.btn-secondary:hover:not(:disabled, [aria-disabled="true"]) { background: var(--pl-fill-hover); }
.btn-secondary:active:not(:disabled, [aria-disabled="true"]) { background: var(--pl-fill-pressed); }
.btn-secondary[aria-pressed="true"] { background: var(--pl-selected); }      /* + a check icon from the caller */
.btn-ghost {                                  /* Noema "text" variant */
  min-height: var(--pl-control-min); padding: 0 var(--pl-space-3);
  background: none; color: var(--pl-text);
  font-size: var(--pl-type-support); font-weight: var(--pl-weight-medium); line-height: 1.5;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pl-edge-hover);
}
.btn-ghost:hover:not(:disabled, [aria-disabled="true"]) { background: none; text-decoration-color: var(--pl-text); }
.btn-danger { background: var(--pl-danger-selected); color: var(--pl-danger); } /* never a solid red button */
.btn-danger:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--pl-danger) 10%, var(--pl-danger-selected)); }
.btn-danger:active:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--pl-danger) 16%, var(--pl-danger-selected)); }
.btn-sm { min-height: var(--pl-control-min); padding: 0 calc(var(--pl-space-4) - 1px);
  font-size: var(--pl-type-support); line-height: 1.5; white-space: nowrap; } /* Noema small CTA */
.btn-lg { min-height: var(--pl-control-primary); padding: 0.85rem 1.5rem; font-size: var(--pl-type-body); } /* Noema large button */
.btn-block { width: 100%; }
/* No .btn-featured: Noema's glowing CTA is not shipped (solid surfaces only). */
.btn:disabled, .btn[aria-disabled="true"] {   /* busy = aria-disabled (keeps focus), looks like disabled */
  opacity: 1; background: var(--pl-disabled-bg); color: var(--pl-disabled-text); box-shadow: none; cursor: not-allowed;
}
.btn-ghost:disabled, .btn-ghost[aria-disabled="true"] { background: none; color: var(--pl-disabled-text); text-decoration: none; }
.btn svg { width: var(--pl-icon-s); height: var(--pl-icon-s); flex: none; fill: none; stroke: currentColor;
  stroke-width: var(--pl-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } /* aria-hidden="true" on the svg */
.btn-arrow { transition: transform var(--pl-motion-base) var(--pl-ease-out); } /* inline SVG arrow; "→" is not in the subset */
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pl-space-3); }
.btn-pair { display: flex; flex-direction: column; gap: var(--pl-space-3); }  /* ConsentCard: equal-width decline (left) + confirm (right) */
@media (min-width: 37.5rem) { .btn-pair { flex-direction: row; } }
.btn-pair > .btn { flex: 1; min-height: var(--pl-control-primary); }
/* Hero/offer CTA pattern: .btn-primary, then a .t-note line under it (e.g. "No signup. Sample data.") */

/* ================= Inputs / selects / checkbox / file drop zone ================= */
.form-grid { display: grid; gap: var(--pl-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.375rem), 1fr)); }
.field { display: grid; gap: var(--pl-space-2); min-width: 0; align-content: start; }             /* Noema field */
.field > label, .label { font-size: var(--pl-type-body); font-weight: var(--pl-weight-medium); color: var(--pl-text); } /* Noema label; always visible */
.hint { font-size: var(--pl-type-metadata); line-height: var(--pl-leading-note); color: var(--pl-text-muted); } /* Noema help text; tie with aria-describedby */
.field-error { padding: 0.5rem 0.75rem; border-radius: var(--pl-radius-surface-md);                /* Noema error */
  background: var(--pl-danger-selected); color: var(--pl-danger);
  font-size: var(--pl-type-metadata); line-height: var(--pl-leading-note); }
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), select, textarea) { /* Noema control */
  width: 100%; min-height: var(--pl-control-primary); padding: 0.7rem 0.8rem;
  border: 1px solid var(--pl-control-border); border-radius: var(--pl-radius-input);
  background-color: var(--pl-fill); color: var(--pl-text); font: inherit;   /* 16px: no iOS zoom */
  transition: border-color var(--pl-motion-fast) var(--pl-ease);
}
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), select, textarea):hover:not(:disabled) {
  border-color: var(--pl-text-muted); }                  /* DERIVED (Noema's checkbox hover step) */
::placeholder { color: var(--pl-text-subtle); opacity: 1; }
:where(input, select, textarea):disabled { color: var(--pl-disabled-text); background-color: var(--pl-disabled-bg); cursor: not-allowed; }
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--pl-danger); } /* + error text; never colour alone */
textarea { min-height: 6rem; resize: vertical; }
select {                                                 /* DERIVED chevron drawn in currentColor, no image file */
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.375rem) 50%, calc(100% - 1rem) 50%;
  background-size: 0.375rem 0.375rem; background-repeat: no-repeat;
}
select option { background-color: var(--pl-solid); color: var(--pl-text); }
.field-check { display: flex; align-items: center; gap: 0.65rem; min-height: var(--pl-control-min); color: var(--pl-text-muted); } /* Noema check row */
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; cursor: pointer;
  accent-color: var(--pl-action); } /* DERIVED: native box; Noema draws a mark over appearance:none (needs an extra element) */

.dropzone {                                              /* DERIVED: Noema has no drop zone. Layout (flex column) is set by the fix below */
  position: relative; gap: var(--pl-space-2);
  min-height: 7.5rem; padding: var(--pl-space-5); text-align: center; cursor: pointer;
  border: 1px dashed var(--pl-control-border); border-radius: var(--pl-radius-surface-md);
  background: var(--pl-fill); color: var(--pl-text);
  transition: background-color var(--pl-motion-fast) var(--pl-ease), border-color var(--pl-motion-fast) var(--pl-ease);
}
/* Mandatory fix (UX audit section 3): the drop zone is a <label> inside .field, so it must out-rank the generic .field > label rule
   and always be a centred flex column. */
.field .dropzone, .dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: var(--pl-weight-regular);
}
.dropzone:hover { background: var(--pl-fill-hover); border-color: var(--pl-text-muted); }
.dropzone.is-dragover { background: var(--pl-selected); border-style: solid; border-color: var(--pl-text-muted); }
.dropzone.has-file { border-style: solid; }
.dropzone.has-error { border-style: solid; border-color: var(--pl-danger); }  /* the .err text says what is wrong */
.dropzone:has(input:focus-visible) { outline: var(--pl-focus-width) solid var(--pl-focus); outline-offset: var(--pl-focus-offset); }
.dropzone-title { font-weight: var(--pl-weight-semibold); }
.dropzone-hint { font-size: var(--pl-type-support); color: var(--pl-text-muted); }
.file-list, .file-meta { min-width: 0; overflow-wrap: anywhere; font-size: var(--pl-type-support); color: var(--pl-text-muted); }
.file-list { display: grid; gap: var(--pl-space-2); margin: 0; padding: 0; list-style: none; } /* DERIVED: app.js renders one <li> per report file */
.file-list:empty { display: none; }
.file-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pl-space-2) var(--pl-space-4);
  padding: var(--pl-space-3) var(--pl-space-4); border-radius: var(--pl-radius-surface-md); background: var(--pl-fill); }

/* ================= Cards / panels ================= */
.card {                       /* solid surface: edge and specular on --pl-solid; the glass sheen is not applied */
  min-width: 0; padding: var(--pl-space-4);
  border: 1px solid var(--pl-edge); border-radius: var(--pl-radius-surface-lg);
  background: var(--pl-solid); box-shadow: var(--pl-specular); /* no drop shadow in flow */
}
@media (min-width: 37.5rem) { .card { padding: var(--pl-space-5); } }              /* Noema card */
.card-lg { padding: clamp(var(--pl-space-5), 4vw, var(--pl-space-6)); }            /* pricing/offer card padding */
.card-offer {                 /* the $149 card: accent edge + the one allowed card shadow (Noema pricing plus card) */
  border-color: color-mix(in srgb, var(--pl-accent) var(--pl-tint-edge), var(--pl-edge-hover));
  box-shadow: var(--pl-specular), var(--pl-shadow-lift);
}
.price { font: var(--pl-weight-semibold) var(--pl-type-numeral)/1.1 var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-numeral); font-variant-numeric: tabular-nums; color: var(--pl-text); }
.card-link { transition: transform var(--pl-motion-base) var(--pl-ease-out), border-color var(--pl-motion-base) var(--pl-ease-out); }
@media (hover: hover) { .card-link:hover { transform: translateY(-2px); border-color: var(--pl-edge-hover); } } /* whole-card link only */
.panel { padding: var(--pl-space-4); border-radius: var(--pl-radius-surface-md); background: var(--pl-fill); } /* inner block; never a card in a card */
.tool-step + .tool-step { margin-top: var(--pl-space-5); }
.tool-step > h2 { font: var(--pl-weight-semibold) var(--pl-type-heading-card)/1.27 var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-heading); margin-bottom: var(--pl-space-4); }
.tool-step fieldset + fieldset { margin-top: var(--pl-space-5); }
.tool-step legend { margin-bottom: var(--pl-space-3); padding: 0; font-weight: var(--pl-weight-semibold); }
.license-box { padding: var(--pl-space-4); border-radius: var(--pl-radius-surface-md); background: var(--pl-fill); }
.divider, hr { border: 0; border-top: 1px solid var(--pl-divider); margin: var(--pl-space-5) 0; }
.band {                       /* Noema band as a flat solid: the accent wash at the 5% step over --pl-solid (no gradient) */
  border-radius: var(--pl-radius-surface-xl); padding: var(--pl-band-pad-block) var(--pl-band-pad-inline);
  background: color-mix(in srgb, var(--pl-accent) var(--pl-tint-wash), var(--pl-solid));
  border: 1px solid color-mix(in srgb, var(--pl-accent) var(--pl-tint-faint), transparent);
}

/* ================= Callouts / alerts (Noema Notice; .note/.ok/.warn/.err are app.js names) ================= */
.callout, .note, .ok, .warn, .err {
  padding: var(--pl-space-4); border-radius: var(--pl-radius-surface-md);
  background: var(--pl-fill); color: var(--pl-text);
  font-size: var(--pl-type-body); line-height: var(--pl-leading-body);
}
.callout > * + *, .note > * + *, .ok > * + *, .warn > * + *, .err > * + * { margin-top: var(--pl-space-2); }
.callout-title { display: flex; align-items: center; gap: var(--pl-space-2);
  font: var(--pl-weight-medium) var(--pl-type-metadata)/var(--pl-leading-note) var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-label); }                     /* type.label */
.callout-title svg { width: var(--pl-icon-s); height: var(--pl-icon-s); flex: none; fill: none; stroke: currentColor;
  stroke-width: var(--pl-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.callout-info .callout-title, .note .callout-title { color: var(--pl-text-muted); }               /* info: fill + muted icon */
.callout-success, .ok { background: var(--pl-success-selected); }                                  /* DERIVED (Noema uses Toast for success) */
.callout-success .callout-title, .ok .callout-title { color: var(--pl-success); }
.callout-warning, .warn { background: var(--pl-warning-selected); }                                /* state.warning.selected */
.callout-warning .callout-title, .warn .callout-title { color: var(--pl-warning); }
.callout-danger, .err { background: var(--pl-danger-selected); }                                   /* role="alert" */
.callout-danger .callout-title, .err .callout-title { color: var(--pl-danger); }
:is(.callout, .note, .ok, .warn, .err) :is(ul, ol) { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--pl-space-1); }
:is(.note, .ok, .warn, .err).small { padding: var(--pl-space-3) var(--pl-space-4); font-size: var(--pl-type-support); }
/* Every callout must open with a word ("Checks passed", "Needs attention") or icon + word: state is never colour alone. */

/* ================= Badges / status pills ================= */
.badge {                      /* Noema chip badge: static fact, not a control */
  display: inline-flex; align-items: center; gap: var(--pl-space-2);
  min-height: var(--pl-control-chip); padding: 0.25rem 0.75rem; border-radius: var(--pl-radius-pill);
  background: var(--pl-fill); color: var(--pl-text-muted);
  font: var(--pl-weight-medium) var(--pl-type-metadata)/1.25rem var(--pl-font-ui);
}
.badge-outline { background: none; box-shadow: inset 0 0 0 1px var(--pl-divider); color: var(--pl-text-subtle); } /* version/date line */
.badge-accent { background: color-mix(in srgb, var(--pl-accent) var(--pl-tint-soft), transparent); color: var(--pl-accent); }
.pill {                       /* status pill (StatusLine dot + word), DERIVED composition */
  display: inline-flex; align-items: center; gap: var(--pl-space-2);
  min-height: var(--pl-control-chip); padding: 0.25rem 0.75rem; border-radius: var(--pl-radius-pill);
  background: var(--pl-fill); color: var(--pl-text-muted);
  font: var(--pl-weight-medium) var(--pl-type-metadata)/1.25rem var(--pl-font-ui);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill-ok, .pill-warn, .pill-err { --pl-pill-halo: var(--pl-fill); }
.pill-ok::before, .pill-warn::before, .pill-err::before {
  content: ""; width: var(--pl-icon-dot); height: var(--pl-icon-dot); flex: none; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 var(--pl-glow-halo-dot) var(--pl-pill-halo);
  margin-inline: var(--pl-glow-halo-dot) 0;
}
.pill-ok { background: var(--pl-success-selected); color: var(--pl-success); --pl-pill-halo: var(--pl-success-halo); }
.pill-warn { background: var(--pl-warning-selected); color: var(--pl-warning); --pl-pill-halo: var(--pl-warning-halo); }
.pill-err { background: var(--pl-danger-selected); color: var(--pl-danger); --pl-pill-halo: var(--pl-danger-halo); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--pl-space-2); }
.table .pill { min-height: 1.5rem; padding: 0 0.625rem;   /* dense-table size = Noema tag (1–2 words, semibold) */
  font: var(--pl-weight-semibold) var(--pl-type-tag)/1 var(--pl-font-ui); }

/* ================= Tables (dense, numeric) ================= */
.table-wrap {                 /* app.js: role=region aria-label tabindex=0 — keyboard scrollable */
  position: relative; overflow-x: auto;   /* position: relative is the mandatory fix (UX audit section 3): it keeps absolutely positioned .visually-hidden spans inside the scroll box */
  max-width: 100%; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pl-edge); border-radius: var(--pl-radius-surface-md); background: var(--pl-solid);
}
@media (min-width: 56.25rem) { .table-wrap { max-height: 70vh; overflow: auto; } } /* DERIVED: makes the sticky header work (sticky is inert inside an overflow box without a height cap) */
.table { width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--pl-type-support); line-height: var(--pl-leading-body); font-variant-numeric: tabular-nums; }
.table caption { caption-side: top; text-align: left; padding: var(--pl-space-3) var(--pl-space-3) var(--pl-space-2);
  font: var(--pl-weight-semibold) var(--pl-type-metadata)/var(--pl-leading-note) var(--pl-font-ui); color: var(--pl-text); }
.table :is(th, td) { padding: var(--pl-space-2) var(--pl-space-3); border-bottom: 1px solid var(--pl-divider);
  text-align: left; vertical-align: top; white-space: nowrap; }
.table thead th { position: sticky; top: 0; z-index: 1; background: var(--pl-solid);
  color: var(--pl-text-muted); font-weight: var(--pl-weight-semibold); vertical-align: bottom; }
.table tbody th[scope="row"] { font-weight: var(--pl-weight-medium); color: var(--pl-text); }
.table :is(th, td).num { text-align: right; }           /* app.js puts .num on numeric th/td */
.table td.checks { white-space: normal; min-width: 10rem; }
.table tbody tr:last-child :is(th, td) { border-bottom: 0; }
@media (hover: hover) { .table tbody tr:hover { background: var(--pl-fill); } }        /* ListRow neutral wash */
.table tfoot :is(th, td) { font-weight: var(--pl-weight-semibold); color: var(--pl-text);
  border-top: 1px solid var(--pl-edge-hover); border-bottom: 0; }                          /* DERIVED totals rule */
/* Noema's own comparison/legal tables (sparser): th/td padding var(--pl-space-4) var(--pl-space-2) or space-3/space-4, body size. */

/* ================= Result summaries (app.js .summary / .result-block) — DERIVED from Noema stats ================= */
.result-block { margin-top: var(--pl-space-5); display: grid; gap: var(--pl-space-4); }
.result-block > h3 { margin: 0; }
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-space-4) var(--pl-space-5);
  padding-top: var(--pl-space-4); border-top: 1px solid color-mix(in srgb, var(--pl-accent) var(--pl-tint-rule), transparent); }
@media (min-width: 56.25rem) { .summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.summary > div { min-width: 0; display: grid; gap: var(--pl-space-1); }
.summary dt { font-size: var(--pl-type-support); color: var(--pl-text-muted); }
.summary dd { font: var(--pl-weight-semibold) var(--pl-type-title)/var(--pl-leading-title) var(--pl-font-ui);
  font-variant-numeric: tabular-nums; color: var(--pl-text); overflow-wrap: anywhere; }
.file-checks { display: grid; gap: var(--pl-space-2); }
.legend { font-size: var(--pl-type-support); color: var(--pl-text-muted); }

/* ================= "How it works" list (index .steps) ================= */
.steps { display: grid; gap: var(--pl-space-5); margin: 0; padding: 0; list-style: none; counter-reset: pl-step; } /* add role="list" (Safari drops list semantics with list-style:none) */
@media (min-width: 56.25rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-space-6); } }
.steps > li { counter-increment: pl-step; display: grid; gap: var(--pl-space-3); align-content: start; min-width: 0;
  padding-top: var(--pl-space-5); border-top: 1px solid color-mix(in srgb, var(--pl-accent) var(--pl-tint-rule), transparent); }
.steps > li::before { content: counter(pl-step); justify-self: start; }  /* gets .step-index look below */
.steps > li > p { color: var(--pl-text-muted); }

/* ================= Stepper / progress for the 3-step tool flow ================= */
.step-index, .steps > li::before {              /* Noema step index */
  display: inline-grid; place-items: center; min-width: 2rem; height: 1.5rem; padding: 0 var(--pl-space-2);
  border-radius: var(--pl-radius-pill); background: var(--pl-solid); box-shadow: inset 0 0 0 1px var(--pl-divider);
  color: var(--pl-text-subtle); font: var(--pl-weight-semibold) var(--pl-type-tag)/1 var(--pl-font-ui);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--pl-motion-base) var(--pl-ease-out), color var(--pl-motion-base) var(--pl-ease-out);
}
.stepper { display: flex; flex-direction: column; gap: var(--pl-space-1); margin: 0; padding: 0; list-style: none; } /* <ol role="list" class="stepper"> */
@media (min-width: 37.5rem) {
  .stepper { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--pl-space-2) var(--pl-space-4); }
  .stepper > li + li::before { content: ""; width: var(--pl-space-5); height: 1px; background: var(--pl-divider); } /* DERIVED connector */
}
.stepper > li { display: flex; align-items: center; gap: var(--pl-space-3); min-height: var(--pl-control-min);
  color: var(--pl-text-muted); font: var(--pl-weight-medium) var(--pl-type-support)/1.25 var(--pl-font-ui); }
.stepper > li[aria-current="step"] { color: var(--pl-text); font-weight: var(--pl-weight-semibold); }
.stepper > li[aria-current="step"] .step-index, .step-index[aria-current="step"] {
  background: var(--pl-accent); box-shadow: none; color: var(--pl-text-on-action); }        /* current step */
.stepper > li[data-state="done"] .step-index { background: var(--pl-selected); box-shadow: none; color: var(--pl-text); } /* DERIVED; add visually-hidden "(done)" */
.progress { height: 0.5rem; border-radius: var(--pl-radius-pill); background: var(--pl-fill); overflow: hidden; } /* Noema progress: real, measurable progress only */
.progress > span { display: block; height: 100%; width: var(--pl-progress, 0%); border-radius: inherit; background: var(--pl-action);
  transition: width var(--pl-motion-base) var(--pl-ease-out); }

/* ================= FAQ: details/summary (Noema FAQ) ================= */
.faq details { border-bottom: 1px solid var(--pl-divider); interpolate-size: allow-keywords; }
.faq details:first-child { border-top: 1px solid var(--pl-divider); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pl-space-4);
  min-height: var(--pl-space-8); padding: var(--pl-space-4) 0;
  font-size: 1.0625rem; font-weight: var(--pl-weight-medium); line-height: 1.35;   /* Noema literals */
  text-wrap: balance; color: var(--pl-text); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {        /* plus that turns into a cross */
  content: ""; flex: none; width: var(--pl-icon-xs); height: var(--pl-icon-xs); color: var(--pl-accent);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--pl-motion-base) var(--pl-ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { max-width: 62ch; padding-right: 0; color: var(--pl-text-muted); } /* Noema styles only p; generalized */
.faq details > :not(summary) + :not(summary) { margin-top: var(--pl-space-3); }
.faq details > :last-child { padding-bottom: var(--pl-space-5); }
@media (min-width: 40rem) { .faq details > :not(summary) { padding-right: 40px; } }
.faq details::details-content { block-size: 0; overflow: clip;
  transition: block-size var(--pl-motion-base) var(--pl-ease-out), content-visibility var(--pl-motion-base) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ================= Code / mono (real code and data only; never small labels) ================= */
code, kbd, samp, .mono { font-family: var(--pl-font-mono); font-weight: var(--pl-weight-regular); font-size: 0.9375em; font-variant-ligatures: none; }
:not(pre) > code { padding: 0.125em 0.375em; border-radius: var(--pl-radius-media); background: var(--pl-fill); color: var(--pl-text); overflow-wrap: anywhere; }
pre { margin: 0; max-width: 100%; padding: var(--pl-space-4); border-radius: var(--pl-radius-surface-md); background: var(--pl-fill);
  font: var(--pl-weight-regular) var(--pl-type-metadata)/1.5 var(--pl-font-mono);
  white-space: pre-wrap; overflow-wrap: anywhere; }     /* Noema callout pre */
/* Money figures stay Figtree + tabular-nums (verified tnum); mono for CSV headers, file names, license keys, account codes. */

/* ================= Legal pages (Terms / Privacy / Refund) — Noema legal-document.css, condensed ================= */
.legal-page { padding-block: clamp(var(--pl-space-6), 5vw, var(--pl-space-8)) var(--pl-block-gap); overflow-wrap: anywhere; }
.legal-page > .container-reading { display: grid; }
.legal-head { display: grid; justify-items: start; gap: var(--pl-space-4); margin-bottom: var(--pl-head-gap); }
.legal-head .eyebrow { justify-self: stretch; }                     /* "Legal" eyebrow, accent IV */
.legal-head h1 { font-size: var(--pl-type-heading); line-height: var(--pl-leading-heading-scale); letter-spacing: var(--pl-tracking-heading-scale); } /* title on heading role, not headline */
.legal-head .lead { margin: 0; }
.legal-meta { font-variant-numeric: tabular-nums; }                 /* version/date as .badge.badge-outline */
.legal-body { display: grid; gap: var(--pl-space-7); min-width: 0; }
.legal-body section { scroll-margin-top: var(--pl-space-4); }
.legal-body h2 { font: var(--pl-weight-semibold) var(--pl-type-title)/var(--pl-leading-title) var(--pl-font-ui); letter-spacing: 0; margin: 0 0 var(--pl-space-4); }
.legal-body :is(p, li) { margin: 0; font-size: var(--pl-type-body); line-height: var(--pl-leading-lead); color: var(--pl-text); }
.legal-body section > * + :is(p, ul, ol, table) { margin-top: var(--pl-space-4); }
.legal-body :is(ul, ol) { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--pl-space-3); }
.legal-body li { padding-left: var(--pl-space-1); }
.legal-body li::marker { color: var(--pl-text-subtle); font-variant-numeric: tabular-nums; }
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--pl-space-2); margin-top: var(--pl-block-gap);
  padding-top: var(--pl-space-6); border-top: 1px solid var(--pl-divider); } /* policy links as .btn.btn-secondary.btn-sm */
.legal-nav .btn[aria-current="page"] { background: var(--pl-selected); }

/* ================= Accessibility media fallbacks ================= */
@media (prefers-reduced-motion: reduce) {        /* DERIVED: Noema ships none; colour changes become instant, nothing moves */
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:hover .btn-arrow { transform: none; }
  .card-link:hover { transform: none; }
  .faq details::details-content { transition: none; }   /* own rule: a pseudo-element the universal selector does not reach */
}
@media (prefers-contrast: more) {
  .card, .site-header, .table-wrap, .license-box, .nav-menu-list { border-color: var(--pl-control-border); background: var(--pl-solid); }
}
@media (forced-colors: active) {
  .btn, .card, .dropzone, .pill, .badge, .step-index, :where(input, select, textarea) { border: 1px solid CanvasText; }
  :focus-visible, .dropzone:has(input:focus-visible) { outline-color: Highlight; }
  input[type="checkbox"] { appearance: auto; }
}
/* DERIVED print: legal pages and journal tables on paper. System colours, no raw hex. */
@media print {
  :root { color-scheme: light; }
  *, *::before, *::after { background: transparent !important; color: CanvasText !important; box-shadow: none !important; }
  .site-header nav, .header-actions, .btn, .dropzone, .skip-link { display: none !important; }
  .card, .table-wrap { border: 1px solid CanvasText; max-height: none; overflow: visible; }
  .table thead th { position: static; }
}
/* foundation: complete */