/* CAM Audit design system — assembled for the server-rendered app.
   Source: Claude Design export (tokens + component CSS + leak_report kit). */


/* ===== tokens/fonts.css ===== */
/* CAM Audit — Webfonts
   The IBM Plex superfamily: engineered, audit-grade, with true tabular figures.
   Currently loaded from Google Fonts CDN. To self-host, replace the @import below
   with local @font-face rules pointing at binaries in assets/fonts/. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');


/* ===== tokens/colors.css ===== */
/* CAM Audit — Color tokens
   Calm, institutional, audit-grade. Color carries meaning, never decoration.
   Semantic spine: red = over-billing / exposure, green = under-recovery you can reclaim,
   amber = disputable, neutral gray = needs proof. */

:root {
  /* ---- Neutral ink scale (cool slate) ---- */
  --ink-900: #11161f;
  --ink-800: #1b2330;
  --ink-700: #2a3340;
  --ink-600: #3d4757;
  --ink-500: #5b6573;
  --ink-400: #828b98;
  --ink-300: #aab1bb;
  --ink-200: #d3d8de;
  --ink-150: #e2e6ea;
  --ink-100: #eef1f4;
  --ink-50:  #f6f8fa;

  /* ---- Paper / surfaces ---- */
  --paper:        #f7f7f4;  /* page — a hair of warmth so it reads "document", not "screen" */
  --paper-card:   #ffffff;
  --paper-sunken: #f1f1ec;
  --paper-inset:  #fbfbf9;

  /* ---- Brand: "audit ink" petrol-blue (trust, calm authority) ---- */
  --brand-900: #102943;
  --brand-700: #163a5e;
  --brand-600: #1c4a76;
  --brand-500: #235b8c;   /* primary action */
  --brand-400: #3f7ab0;
  --brand-200: #b9d0e4;
  --brand-100: #e6eef5;
  --brand-50:  #f1f6fa;

  /* ---- Exposure red (over-billing, audit risk) — serious, not alarmist ---- */
  --red-800: #7a1c14;
  --red-700: #951f15;
  --red-600: #b42318;
  --red-500: #c5392c;
  --red-200: #f3c6c1;
  --red-100: #fbe6e3;
  --red-50:  #fdf3f1;

  /* ---- Recovery green (money to reclaim) — deep, ledger-green ---- */
  --green-800: #0f4f30;
  --green-700: #14613a;
  --green-600: #167247;
  --green-500: #1f9258;
  --green-200: #bfe2cd;
  --green-100: #e2f1e8;
  --green-50:  #f0f8f3;

  /* ---- Amber (disputable confidence tier) ---- */
  --amber-800: #784a08;
  --amber-700: #8f5a09;
  --amber-600: #a96d0c;
  --amber-200: #f1d9a6;
  --amber-100: #fbeed3;
  --amber-50:  #fdf7ea;

  /* ===== Semantic aliases ===== */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --text-onbrand: #ffffff;
  --text-link:    var(--brand-600);

  --surface-page:   var(--paper);
  --surface-card:   var(--paper-card);
  --surface-sunken: var(--paper-sunken);
  --surface-inset:  var(--paper-inset);
  --surface-brand:  var(--brand-600);

  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--brand-200);

  /* Money & meaning */
  --exposure:        var(--red-600);
  --exposure-strong: var(--red-700);
  --exposure-soft:   var(--red-50);
  --exposure-border: var(--red-200);
  --recovery:        var(--green-700);
  --recovery-strong: var(--green-800);
  --recovery-soft:   var(--green-50);
  --recovery-border: var(--green-200);

  /* Confidence tiers */
  --tier-ironclad-fg: var(--green-700);
  --tier-ironclad-bg: var(--green-100);
  --tier-ironclad-bd: var(--green-200);
  --tier-disputable-fg: var(--amber-700);
  --tier-disputable-bg: var(--amber-100);
  --tier-disputable-bd: var(--amber-200);
  --tier-needsproof-fg: var(--ink-600);
  --tier-needsproof-bg: var(--ink-100);
  --tier-needsproof-bd: var(--ink-200);

  /* Focus */
  --focus-ring: color-mix(in srgb, var(--brand-500) 45%, transparent);
}


/* ===== tokens/typography.css ===== */
/* CAM Audit — Typography tokens
   IBM Plex superfamily. Sans for UI/body, Serif for editorial report headers,
   Mono for rule tags, clause citations, and fine print. Figures are ALWAYS tabular. */

:root {
  --font-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.20 minor-third, tuned) */
  --text-2xs: 0.6875rem;  /* 11px — micro labels, legal */
  --text-xs:  0.75rem;    /* 12px — captions, tags */
  --text-sm:  0.8125rem;  /* 13px — secondary UI */
  --text-md:  0.9375rem;  /* 15px — body default */
  --text-lg:  1.0625rem;  /* 17px — lead body */
  --text-xl:  1.3125rem;  /* 21px — card titles */
  --text-2xl: 1.625rem;   /* 26px — section heads */
  --text-3xl: 2.125rem;   /* 34px — page titles */
  --text-4xl: 2.75rem;    /* 44px — hero */
  --text-5xl: 4rem;       /* 64px — the money number */
  --text-6xl: 5.25rem;    /* 84px — hero money, desktop */

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Line heights */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Tracking */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-snug:    -0.01em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.02em; /* @kind font */
  --ls-caps:    0.08em;   /* @kind font */

  /* Numerics — use on any element showing money or counts */
  --fvn-tabular: "tnum" 1, "lnum" 1; /* @kind font */
}

/* Utility you can apply directly: tabular, lined figures for ledgers & money */
.tnum { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--fvn-tabular); }


/* ===== tokens/spacing.css ===== */
/* CAM Audit — Spacing, radius, and layout tokens
   4px base grid. Generous but disciplined — an audit document, not a dashboard. */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* Radii — restrained. Documents have square-ish corners. */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1080px; /* @kind spacing */
  --container-wide: 1280px; /* @kind spacing */
  --gutter: clamp(1rem, 4vw, 3rem); /* @kind spacing */
}


/* ===== tokens/effects.css ===== */
/* CAM Audit — Borders, shadows, and motion tokens
   Shadows are soft, low, and cool — paper lifting slightly off a desk, never glossy. */

:root {
  /* Hairline borders do most of the structural work */
  --border-hair: 1px solid var(--border-subtle);
  --border-line: 1px solid var(--border-default);

  /* Elevation — subtle, cool-tinted, layered */
  --shadow-xs: 0 1px 1px rgba(17, 22, 31, 0.04);
  --shadow-sm: 0 1px 2px rgba(17, 22, 31, 0.05), 0 1px 1px rgba(17, 22, 31, 0.04);
  --shadow-md: 0 2px 4px rgba(17, 22, 31, 0.05), 0 4px 12px rgba(17, 22, 31, 0.06);
  --shadow-lg: 0 4px 8px rgba(17, 22, 31, 0.05), 0 12px 28px rgba(17, 22, 31, 0.08);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Inset for sunken inputs / ledger wells */
  --shadow-inset: inset 0 1px 2px rgba(17, 22, 31, 0.06);

  /* Motion — calm. Things settle, they don't bounce. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
}


/* ===== tokens/base.css ===== */
/* CAM Audit — base layer. Light-touch reset + document defaults. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Money and counts read as ledger figures everywhere */
.money, .figure { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

::selection { background: var(--brand-100); color: var(--brand-900); }


/* ===== components/audit/RuleTag.jsx (component css) ===== */
.cam-ruletag {
    display: inline-flex; align-items: center;
    font-family: var(--font-mono); font-weight: var(--fw-semibold);
    font-size: var(--text-xs); line-height: 1; letter-spacing: 0;
    color: var(--brand-700); background: var(--brand-50);
    border: 1px solid var(--brand-100); border-radius: var(--radius-xs);
    padding: 4px 7px; white-space: nowrap;
  }
  .cam-ruletag--muted { color: var(--ink-600); background: var(--ink-50); border-color: var(--ink-150); }

  .cam-cite {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-weight: var(--fw-medium);
    font-size: var(--text-xs); line-height: 1;
    color: var(--ink-600); white-space: nowrap;
  }
  .cam-cite__icon { width: 12px; height: 12px; flex: 0 0 auto; color: var(--ink-400); }
  .cam-cite__ref { color: var(--ink-800); border-bottom: 1px dashed var(--ink-300); padding-bottom: 1px; }
  a.cam-cite { text-decoration: none; }
  a.cam-cite:hover .cam-cite__ref { color: var(--brand-700); border-bottom-color: var(--brand-400); }


/* ===== components/audit/ConfidencePill.jsx (component css) ===== */
.cam-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-sans); font-weight: var(--fw-semibold);
    font-size: var(--text-xs); line-height: 1; letter-spacing: var(--ls-wide);
    text-transform: uppercase; padding: 5px 10px 5px 8px;
    border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap;
  }
  .cam-pill__mark { width: 12px; height: 12px; flex: 0 0 auto; display: inline-flex; }
  .cam-pill--ironclad   { color: var(--tier-ironclad-fg); background: var(--tier-ironclad-bg); border-color: var(--tier-ironclad-bd); }
  .cam-pill--disputable { color: var(--tier-disputable-fg); background: var(--tier-disputable-bg); border-color: var(--tier-disputable-bd); }
  .cam-pill--needsproof { color: var(--tier-needsproof-fg); background: var(--tier-needsproof-bg); border-color: var(--tier-needsproof-bd); }


/* ===== components/audit/StatCallout.jsx (component css) ===== */
.cam-stat { display: flex; flex-direction: column; gap: var(--space-3); }
  .cam-stat__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-500);
  }
  .cam-stat__chip { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
  .cam-stat__value {
    font-family: var(--font-sans); font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: var(--ls-tight); line-height: 0.95;
    font-size: clamp(2.75rem, 6vw, 5.25rem);
    display: inline-flex; align-items: baseline; gap: 2px;
  }
  .cam-stat__sign { font-size: 0.62em; font-weight: var(--fw-semibold); transform: translateY(-0.04em); }
  .cam-stat__cents { font-size: 0.5em; font-weight: var(--fw-semibold); color: color-mix(in srgb, currentColor 62%, transparent); align-self: flex-start; margin-top: 0.25em; }
  .cam-stat__sub { font-family: var(--font-sans); font-size: var(--text-md); color: var(--ink-600); line-height: var(--lh-snug); }
  .cam-stat__sub b { color: var(--ink-800); font-weight: var(--fw-semibold); }

  .cam-stat--exposure .cam-stat__value { color: var(--exposure-strong); }
  .cam-stat--exposure .cam-stat__chip { background: var(--exposure); }
  .cam-stat--recovery .cam-stat__value { color: var(--recovery-strong); }
  .cam-stat--recovery .cam-stat__chip { background: var(--recovery); }
  .cam-stat--neutral  .cam-stat__value { color: var(--ink-900); }
  .cam-stat--neutral  .cam-stat__chip { background: var(--ink-400); }

  .cam-stat--sm .cam-stat__value { font-size: clamp(1.75rem, 3vw, 2.25rem); }


/* ===== components/audit/FindingCard.jsx (component css) ===== */
.cam-finding {
    position: relative; display: grid; grid-template-columns: 1fr auto;
    gap: var(--space-4) var(--space-6); align-items: start;
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    padding: var(--space-5) var(--space-6); padding-left: calc(var(--space-6) + 4px);
    overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
  .cam-finding::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cam-rail, var(--exposure)); }
  .cam-finding--interactive { cursor: pointer; }
  .cam-finding--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }

  .cam-finding__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .cam-finding__metarow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .cam-finding__title {
    font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-xl);
    color: var(--text-strong); letter-spacing: var(--ls-snug); line-height: var(--lh-snug);
    text-wrap: balance;
  }
  .cam-finding__expl { font-size: var(--text-md); color: var(--ink-600); line-height: var(--lh-normal); max-width: 62ch; text-wrap: pretty; }
  .cam-finding__citerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }

  .cam-finding__amount {
    text-align: right; white-space: nowrap; align-self: center;
    font-family: var(--font-sans); font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: clamp(1.5rem, 2.4vw, 2.05rem); letter-spacing: var(--ls-tight); line-height: 1;
  }
  .cam-finding__amount .cam-finding__cents { font-size: 0.62em; color: color-mix(in srgb, currentColor 60%, transparent); }
  .cam-finding__amount-label { display: block; margin-top: 6px; font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }

  .cam-finding--exposure { --cam-rail: var(--exposure); }
  .cam-finding--exposure .cam-finding__amount { color: var(--exposure-strong); }
  .cam-finding--exposure .cam-finding__amount-label { color: var(--exposure); }
  .cam-finding--recovery { --cam-rail: var(--recovery); }
  .cam-finding--recovery .cam-finding__amount { color: var(--recovery-strong); }
  .cam-finding--recovery .cam-finding__amount-label { color: var(--recovery); }

  /* Locked / freemium */
  .cam-finding--locked .cam-finding__title,
  .cam-finding--locked .cam-finding__expl { filter: blur(5px); user-select: none; }
  .cam-finding--locked .cam-finding__amount { filter: blur(0.4px); }
  .cam-finding__lock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink-500); }
  .cam-finding__lock svg { width: 13px; height: 13px; }

  @media (max-width: 600px) {
    .cam-finding { grid-template-columns: 1fr; }
    .cam-finding__amount { text-align: left; }
  }


/* ===== components/core/Button.jsx (component css) ===== */
.cam-btn {
    --_bg: var(--brand-600); --_fg: var(--text-onbrand); --_bd: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font-family: var(--font-sans); font-weight: var(--fw-semibold); line-height: 1;
    letter-spacing: var(--ls-snug); white-space: nowrap; cursor: pointer;
    border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
    border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
    text-decoration: none; -webkit-font-smoothing: antialiased;
  }
  .cam-btn:hover { text-decoration: none; }
  .cam-btn:active { transform: translateY(0.5px); }
  .cam-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .cam-btn[disabled], .cam-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

  /* sizes */
  .cam-btn--sm { font-size: var(--text-sm); padding: 7px 12px; }
  .cam-btn--md { font-size: var(--text-md); padding: 10px 16px; }
  .cam-btn--lg { font-size: var(--text-lg); padding: 14px 22px; border-radius: var(--radius-lg); }

  /* variants */
  .cam-btn--primary { --_bg: var(--brand-600); --_fg: #fff; box-shadow: var(--shadow-sm); }
  .cam-btn--primary:hover { --_bg: var(--brand-700); }
  .cam-btn--secondary { --_bg: var(--paper-card); --_fg: var(--brand-700); --_bd: var(--border-default); box-shadow: var(--shadow-xs); }
  .cam-btn--secondary:hover { --_bg: var(--brand-50); --_bd: var(--brand-200); }
  .cam-btn--ghost { --_bg: transparent; --_fg: var(--brand-700); }
  .cam-btn--ghost:hover { --_bg: var(--brand-50); }
  .cam-btn--danger { --_bg: var(--red-600); --_fg: #fff; box-shadow: var(--shadow-sm); }
  .cam-btn--danger:hover { --_bg: var(--red-700); }
  .cam-btn--success { --_bg: var(--green-700); --_fg: #fff; box-shadow: var(--shadow-sm); }
  .cam-btn--success:hover { --_bg: var(--green-800); }

  .cam-btn--block { display: flex; width: 100%; }
  .cam-btn__icon { display: inline-flex; flex: 0 0 auto; }


/* ===== components/core/Card.jsx (component css) ===== */
.cam-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .cam-card--flat { box-shadow: none; }
  .cam-card--raised { box-shadow: var(--shadow-md); }
  .cam-card--inset { background: var(--surface-inset); box-shadow: var(--shadow-inset); }
  .cam-card--pad-sm { padding: var(--space-4); }
  .cam-card--pad-md { padding: var(--space-6); }
  .cam-card--pad-lg { padding: var(--space-8); }
  .cam-card--interactive { transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); cursor: pointer; }
  .cam-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }
  /* Accent rail: a thin meaningful left edge (use for exposure/recovery) */
  .cam-card--rail { position: relative; overflow: hidden; }
  .cam-card--rail::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cam-rail, var(--border-strong)); }


/* ===== components/core/Badge.jsx (component css) ===== */
.cam-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-sans); font-weight: var(--fw-semibold);
    font-size: var(--text-xs); line-height: 1; letter-spacing: var(--ls-snug);
    padding: 4px 9px; border-radius: var(--radius-pill);
    border: 1px solid transparent; white-space: nowrap;
  }
  .cam-badge--square { border-radius: var(--radius-xs); }
  .cam-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
  .cam-badge--neutral { color: var(--ink-600); background: var(--ink-100); border-color: var(--ink-200); }
  .cam-badge--brand { color: var(--brand-700); background: var(--brand-100); border-color: var(--brand-200); }
  .cam-badge--exposure { color: var(--red-700); background: var(--red-100); border-color: var(--red-200); }
  .cam-badge--recovery { color: var(--green-700); background: var(--green-100); border-color: var(--green-200); }
  .cam-badge--warning { color: var(--amber-700); background: var(--amber-100); border-color: var(--amber-200); }
  /* solid */
  .cam-badge--solid.cam-badge--brand { color: #fff; background: var(--brand-600); border-color: transparent; }
  .cam-badge--solid.cam-badge--exposure { color: #fff; background: var(--red-600); border-color: transparent; }
  .cam-badge--solid.cam-badge--recovery { color: #fff; background: var(--green-700); border-color: transparent; }


/* ===== ui_kits/leak_report/kit.css ===== */
/* CAM Audit — Leak Report kit layout. Composes DS tokens; structure only. */

.lr {
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
}

/* ---- App bar ---- */
.lr-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-5);
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.lr-bar__logo { display: flex; align-items: center; gap: 10px; }
.lr-bar__crumb { font-size: var(--text-sm); color: var(--ink-500); display: flex; align-items: center; gap: 8px; min-width: 0; }
.lr-bar__crumb b { color: var(--ink-800); font-weight: var(--fw-semibold); }
.lr-bar__sep { color: var(--ink-300); }
.lr-bar__spacer { flex: 1; }
.lr-bar__actions { display: flex; align-items: center; gap: 10px; }

/* ---- Page container ---- */
.lr-main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-10) var(--gutter) var(--space-24); }
.lr-section { margin-top: var(--space-12); }
.lr-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.lr-section__title { font-size: var(--text-2xl); font-weight: var(--fw-semibold); color: var(--text-strong); letter-spacing: var(--ls-snug); }
.lr-section__note { font-size: var(--text-sm); color: var(--ink-500); }

/* ---- Hero ---- */
.lr-hero {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.lr-hero__top { padding: var(--space-8) var(--space-10) var(--space-6); }
.lr-hero__eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--space-6); }
.lr-hero__eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-300); }
.lr-hero__label { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--ink-800); font-weight: 500; margin-bottom: var(--space-5); }
.lr-hero__label span { color: var(--ink-500); }
.lr-hero__metics { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-12); align-items: flex-end; }
.lr-hero__foot {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4) var(--space-10);
  background: var(--surface-inset); border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--ink-600);
}
.lr-hero__foot svg { width: 15px; height: 15px; color: var(--green-600); flex: 0 0 auto; }

/* mini stats */
.lr-mini { display: flex; flex-direction: column; gap: 4px; }
.lr-mini__v { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--ink-900); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); line-height: 1; }
.lr-mini__k { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-500); }

/* ---- Findings list ---- */
.lr-findings { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- GL upsell ---- */
.lr-gl {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--brand-900), #0c2138);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  color: #fff;
}
.lr-gl__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; }
.lr-gl__kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--brand-200); margin-bottom: var(--space-4); }
.lr-gl__title { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: #fff; letter-spacing: var(--ls-snug); margin-bottom: var(--space-3); text-wrap: balance; }
.lr-gl__body { font-size: var(--text-md); color: #cdd9e6; line-height: var(--lh-normal); max-width: 56ch; }
.lr-gl__amount { text-align: right; }
.lr-gl__amount .v { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: var(--fw-bold); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); line-height: 1; white-space: nowrap; }
.lr-gl__amount .v .c { font-size: 0.55em; opacity: 0.7; }
.lr-gl__amount .cap { margin-top: 8px; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--brand-200); }
.lr-gl__cta { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.lr-gl__pill { display:inline-flex; align-items:center; gap:6px; font-size: var(--text-xs); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color: var(--ink-600); background: var(--ink-100); border:1px solid var(--ink-200); padding:5px 10px; border-radius: var(--radius-pill); white-space: nowrap; }

/* ---- Trust signals ---- */
.lr-trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lr-trust__item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.lr-trust__icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; }
.lr-trust__icon svg { width: 18px; height: 18px; }
.lr-trust__t { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--text-md); margin-bottom: 3px; }
.lr-trust__d { font-size: var(--text-sm); color: var(--ink-600); line-height: var(--lh-normal); }

/* ---- CTA bar ---- */
.lr-cta {
  margin-top: var(--space-12);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.lr-cta__copy { font-size: var(--text-lg); color: var(--ink-700); }
.lr-cta__copy b { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* ---- Plan toggle (segmented) ---- */
.lr-seg { display: inline-flex; padding: 3px; background: var(--ink-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); gap: 2px; }
.lr-seg button { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-500); background: transparent; border: none; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.lr-seg button[aria-pressed="true"] { background: var(--surface-card); color: var(--brand-700); box-shadow: var(--shadow-xs); }

/* freemium unlock band */
.lr-unlock { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6) var(--space-8); background: var(--brand-50); border: 1px dashed var(--brand-200); border-radius: var(--radius-lg); flex-wrap: wrap; }
.lr-unlock__t { font-weight: var(--fw-semibold); color: var(--brand-900); font-size: var(--text-md); }
.lr-unlock__d { font-size: var(--text-sm); color: var(--ink-600); margin-top: 2px; }

@media (max-width: 760px) {
  .lr-hero__top { padding: var(--space-6); }
  .lr-hero__foot { padding: var(--space-4) var(--space-6); }
  .lr-gl { padding: var(--space-6); }
  .lr-gl__grid { grid-template-columns: 1fr; }
  .lr-gl__amount { text-align: left; }
  .lr-trust { grid-template-columns: 1fr; }
  .lr-bar__crumb { display: none; }
}