/* Longplay webfonts.
   Primary pair: DM Serif Display (display) + Lato (body/UI).
   Served from Google Fonts CDN. For offline/print embedding, replace with
   local @font-face rules pointing at licensed binaries. */
/* Sora — heavy geometric display sans, used for bold accent words (variable, latin) */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/sora-var.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font-00.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font-01.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font-03.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/font-04.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/font-05.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font-06.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font-07.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/font-08.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/font-09.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font-11.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/font-12.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/font-13.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;
}


/* Longplay colour system.
   Three separate layers — keep them separate:
   1. Ambient brand palette (mood + surface)
   2. Service-tier taxonomy
   3. Functional data-viz palette (diagrams and audits ONLY)
   Plus reserved scales: lifecycle stages, Hierarchy of Strategy chips. */

:root {
  /* ---- 1. Ambient brand palette ---- */
  --lp-navy: #1B2252;        /* primary dark — use instead of pure black */
  --lp-mid-blue: #263370;    /* secondary */
  --lp-slate: #3D4F6B;       /* body text on light */
  --lp-gray-blue: #8FA3C0;   /* fine print, secondary text */
  --lp-light-blue: #D4DFF0;  /* backgrounds and washes */
  --lp-pale-blue: #DEEBF5;   /* backgrounds and washes */
  --lp-off-white: #EDF1F8;   /* use instead of stark white on large fields */
  --lp-teal: #5BBFB9;        /* accent */
  --lp-mint: #7ECFCA;        /* accent — chips and pills */
  --lp-lavender: #B4AEDD;    /* tier tint only, never an ambient page gradient */
  --lp-lilac-wash: rgba(180,174,221,0.16); /* flat, low-opacity section background for alternating rhythm */
  --lp-coral: #D45B6A;       /* tiny inline emphasis ONLY — never bg/gradient/shadow */

  /* ---- Brand refresh: blue + soft gold, white/grey/black, glass ---- */
  --lp-blue: #2E6BE6;        /* brand blue */
  --lp-blue-deep: #1B2252;   /* deep navy blue */
  --lp-gold: #B8862F;        /* soft golden accent */
  --gradient-accent-text: linear-gradient(120deg, #8FC2FF 0%, #4E93F5 60%, #3A7DE8 100%);  /* light glassy blue */
  --lp-accent-word: #9fb4d8;  /* accent words, light steel-blue */
  --font-accent: 'Sora', 'Lato', "Helvetica Neue", sans-serif;  /* sans display — headlines */
  --font-serif: 'DM Serif Display', Georgia, serif;  /* serif — accent/emphasis words */
  --gradient-brand: linear-gradient(122deg, #1B2252 0%, #2E6BE6 100%);         /* mono blue */
  --gradient-gold: linear-gradient(120deg, #B8862F 0%, #E0BE78 100%);
  --glass-bg: rgba(255,255,255,0.5);
  --glass-border: rgba(255,255,255,0.66);

  /* ---- Semantic aliases ---- */
  --text-display: var(--lp-navy);
  --text-body: var(--lp-slate);
  --text-secondary: var(--lp-gray-blue);
  --text-on-dark: #FFFFFF;
  --text-on-dark-soft: var(--lp-pale-blue);
  --text-accent-inline: var(--lp-coral);

  --surface-page: var(--lp-off-white);
  --surface-card: rgba(255, 255, 255, 0.78);
  --surface-card-solid: #F7FAFD;
  --surface-dark: var(--lp-navy);
  --surface-wash-blue: var(--lp-pale-blue);
  --surface-wash-mint: #E3F3F1;

  --accent: var(--lp-teal);
  --accent-soft: var(--lp-mint);

  /* ---- 2. Service-tier taxonomy ---- */
  --tier-exec: #B4AEDD;        /* Exec & VP Consulting — lavender */
  --tier-channel: #7ECFCA;     /* Channel & Program Management — mint teal */
  --tier-execution: #EDF1F8;   /* Execution & Production — off-white / soft warm gray */

  /* ---- 3. Functional data-viz palette (diagrams and audits ONLY) ---- */
  --viz-healthy: #3FB97F;  /* healthy step, strong conversion */
  --viz-watch: #E7B53C;    /* average, watch */
  --viz-leak: #DB5C4E;     /* leak, lapsed, churn, needs attention */
  /* Neutral volume/stage: blue family + lavender. Red and amber NEVER leave diagrams. */

  /* ---- Lifecycle stage colours (reserved for lifecycle identity only) ---- */
  --lc-01-awareness: #CFC8E8;
  --lc-02-interest: #BFC6E8;
  --lc-03-consideration: #C2E3CE;
  --lc-04-intent: #AEDCB6;
  --lc-05-evaluation: #EFE0A6;
  --lc-06-purchase: #F4D2AC;
  --lc-07-adoption: #F3C2A6;
  --lc-08-retention: #EEB1A0;
  --lc-09-expansion: #E9A39A;
  --lc-10-advocacy: #E59892;

  /* ---- Hierarchy of Strategy chip colours ---- */
  --hos-1-diagnostics: #BFE0DB;
  --hos-2-roadmap: #CDE7C6;
  --hos-3-planning: #F0E2AE;
  --hos-4-briefs: #F3CFC2;
  --hos-5-layout: #CBD8EC;
  --hos-6-design: #D9CFEA;
}

/* Longplay typography.
   Display + signature lines: DM Serif Display (italic for signature).
   Body, UI, labels: Lato 300/400/700.
   PowerPoint / non-embedded fallback: Georgia + Calibri.
   One display face per page. Headline figures in serif; table figures in Lato. */

:root {
  --font-display: 'Sora', 'Lato', "Helvetica Neue", sans-serif;  /* non-accent display now sans; serif reserved for accents (--font-serif) */
  --font-body: "Lato", Calibri, "Helvetica Neue", sans-serif;

  --weight-light: 300;   /* default reading weight for body */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Type scale */
  --text-xs: 11px;      /* fine print */
  --text-sm: 13px;      /* secondary, captions */
  --text-base: 16px;    /* body */
  --text-lg: 19px;      /* lead paragraph */
  --display-sm: 28px;
  --display-md: 40px;
  --display-lg: 56px;
  --display-xl: 76px;   /* hero / headline figures */

  --leading-body: 1.65;
  --leading-display: 1.08;
  --tracking-eyebrow: 0.16em;
  --tracking-caps: 0.10em;
}

/* Longplay spacing, radii, borders, shadows.
   Whitespace is a feature: generous margins, editorial grid.
   Depth from light and line — fine gradient hairline borders + soft shadows,
   never hard outlines or heavy fills. */

:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Hairlines */
  --hairline-navy: 1px solid rgba(27, 34, 82, 0.55); /* @kind other */
  --hairline-slate: 1px solid rgba(61, 79, 107, 0.30); /* @kind other */
  --hairline-light: 1px solid rgba(212, 223, 240, 0.9); /* @kind other */
  --hairline-on-dark: 1px solid rgba(222, 235, 245, 0.18); /* @kind other */

  /* Gradient hairline (cards, dividers) */
  --gradient-hairline: linear-gradient(135deg,
      rgba(91, 191, 185, 0.55),
      rgba(143, 163, 192, 0.35) 45%,
      rgba(180, 174, 221, 0.55)); /* @kind other */
  --gradient-accent-rule: linear-gradient(90deg, #5BBFB9, #B4AEDD); /* @kind other */

  /* Shadows — always navy-tinted, never gray or black */
  --shadow-soft: 0 2px 10px rgba(27, 34, 82, 0.06);
  --shadow-card: 0 2px 8px rgba(27, 34, 82, 0.05), 0 16px 40px -16px rgba(27, 34, 82, 0.16);
  --shadow-lift: 0 8px 20px rgba(27, 34, 82, 0.10), 0 32px 72px -24px rgba(27, 34, 82, 0.28);
}

/* Longplay utility classes — the background accent kit, surfaces, and
   recurring editorial patterns. Accents stay faint; one or two per surface. */

/* ---------- Base ---------- */
.lp-body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ---------- Type patterns ---------- */
.lp-display {
  font-family: var(--font-accent);
  font-weight: 700;
  line-height: var(--leading-display);
  color: var(--text-display);
  letter-spacing: -0.02em;
}
.lp-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--text-display);
}
.lp-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.lp-eyebrow--navy { color: var(--lp-navy); }
.lp-eyebrow--mint { color: var(--lp-teal); }

/* ---------- Surfaces ---------- */
/* No flat blocks of solid colour. Light surfaces get soft glows;
   solid navy is reserved for genuine dark surfaces. */
.lp-surface {
  background:
    radial-gradient(48% 60% at 12% 0%, rgba(126, 207, 202, 0.30), transparent 70%),
    radial-gradient(44% 56% at 92% 12%, rgba(180, 174, 221, 0.26), transparent 70%),
    radial-gradient(60% 70% at 50% 110%, rgba(212, 223, 240, 0.6), transparent 70%),
    var(--lp-off-white);
}
.lp-surface-dark {
  background:
    radial-gradient(52% 64% at 16% 4%, rgba(91, 191, 185, 0.22), transparent 70%),
    radial-gradient(46% 58% at 88% 90%, rgba(180, 174, 221, 0.20), transparent 70%),
    var(--lp-navy);
  color: var(--text-on-dark-soft);
}
.lp-surface-dark .lp-display,
.lp-surface-dark .lp-signature { color: #FFFFFF; }
.lp-surface-dark .lp-eyebrow { color: var(--lp-mint); }

/* ---------- Card ---------- */
/* Fine gradient hairline border + soft navy shadow. Never a hard outline. */
.lp-card {
  background:
    linear-gradient(var(--surface-card-solid), var(--surface-card-solid)) padding-box,
    var(--gradient-hairline) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.lp-card--dark {
  background:
    linear-gradient(#222A5E, #1E2557) padding-box,
    linear-gradient(135deg, rgba(126, 207, 202, 0.4), rgba(143, 163, 192, 0.15) 45%, rgba(180, 174, 221, 0.4)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* ---------- Background accent kit ---------- */
/* Hairline grid — the structure beneath the work */
.lp-bg-grid {
  background-image:
    linear-gradient(rgba(27, 34, 82, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 34, 82, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
}
.lp-bg-grid--on-dark {
  background-image:
    linear-gradient(rgba(222, 235, 245, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 235, 245, 0.09) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Dot field — subtle texture for large quiet areas */
.lp-bg-dots {
  background-image: radial-gradient(rgba(27, 34, 82, 0.16) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
.lp-bg-dots--on-dark {
  background-image: radial-gradient(rgba(222, 235, 245, 0.18) 1px, transparent 1.5px);
  background-size: 22px 22px;
}

/* Crosshair mark — precise, measured registration.
   Drawn with background gradients; tint via --crosshair-color. */
.lp-crosshair {
  width: 14px;
  height: 14px;
  background-image:
    linear-gradient(var(--crosshair-color, rgba(61, 79, 107, 0.7)), var(--crosshair-color, rgba(61, 79, 107, 0.7))),
    linear-gradient(var(--crosshair-color, rgba(61, 79, 107, 0.7)), var(--crosshair-color, rgba(61, 79, 107, 0.7)));
  background-size: 1px 100%, 100% 1px;
  background-position: 50% 0, 0 50%;
  background-repeat: no-repeat;
}

/* Rules and dividers */
.lp-rule-navy { border: 0; border-top: var(--hairline-navy); }
.lp-rule-slate { border: 0; border-top: var(--hairline-slate); }
.lp-rule-light { border: 0; border-top: var(--hairline-light); }
.lp-rule-gradient {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(91, 191, 185, 0.9), rgba(180, 174, 221, 0.9), transparent);
}
.lp-rule-fade {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(27, 34, 82, 0.35), transparent);
}

/* Corner brackets — editorial framing of a focus.
   Drawn with background gradients (composes with background-color);
   tint via --bracket-color, arm length via --bracket-size. */
.lp-brackets {
  background-image:
    linear-gradient(var(--bracket-color, rgba(143, 163, 192, 0.85)), var(--bracket-color, rgba(143, 163, 192, 0.85))),
    linear-gradient(var(--bracket-color, rgba(143, 163, 192, 0.85)), var(--bracket-color, rgba(143, 163, 192, 0.85))),
    linear-gradient(var(--bracket-color, rgba(143, 163, 192, 0.85)), var(--bracket-color, rgba(143, 163, 192, 0.85))),
    linear-gradient(var(--bracket-color, rgba(143, 163, 192, 0.85)), var(--bracket-color, rgba(143, 163, 192, 0.85)));
  background-size:
    var(--bracket-size, 18px) 1px, 1px var(--bracket-size, 18px),
    var(--bracket-size, 18px) 1px, 1px var(--bracket-size, 18px);
  background-position: left top, left top, right bottom, right bottom;
  background-repeat: no-repeat;
}

/* Crystal ball — the signature luminous device. Use large, alone, rarely.
   Glows hardest on a dark navy field. Size via inline width/height. */
.lp-crystal-ball {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 30% 30%, rgba(126, 207, 202, 0.85), rgba(126, 207, 202, 0) 60%),
    radial-gradient(circle at 72% 38%, rgba(180, 174, 221, 0.75), rgba(180, 174, 221, 0) 62%),
    radial-gradient(circle at 55% 80%, rgba(91, 191, 185, 0.7), rgba(38, 51, 112, 0) 70%),
    radial-gradient(circle at 50% 50%, #2A3370 0%, #1B2252 100%);
  box-shadow:
    0 0 60px 8px rgba(126, 207, 202, 0.25),
    0 0 120px 24px rgba(180, 174, 221, 0.18),
    inset 0 0 40px rgba(222, 235, 245, 0.25);
}

/* ---------- Editorial patterns ---------- */
/* Header pill — top right, navy with white tracked caps */
.lp-header-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--lp-navy);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
}

/* Capability chip — mint rounded pill with navy text */
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lp-mint);
  color: var(--lp-navy);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
}

/* ---------- Tables — editorial, never heavy ---------- */
.lp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-body);
  font-variant-numeric: lining-nums tabular-nums;
}
.lp-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
  padding: 0 var(--space-4) var(--space-3) var(--space-4);
  border-bottom: var(--hairline-navy);
}
.lp-table tbody td {
  padding: var(--space-4);
  border-bottom: var(--hairline-light);
}
.lp-table tbody td:first-child {
  color: var(--lp-navy);
  font-weight: var(--weight-bold);
}

/* Status dots — data-viz palette, diagrams and tables only */
.lp-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: baseline;
}
.lp-dot--healthy { background: var(--viz-healthy); }
.lp-dot--watch { background: var(--viz-watch); }
.lp-dot--leak { background: var(--viz-leak); }
.lp-dot--neutral { background: var(--lp-gray-blue); }