/* Third Party Threat Hunting — Evidence-First design system
   Tokens mirror the approved Direction B mockup. */

:root {
  --navy: #0b1f3a;
  --navy-2: #122b4f;
  --navy-line: #1f3a60;
  --blue: #0b3d6e;
  --blue-dark: #062647;
  --sky: #8fb3dc;
  --orange: #ff7a1a;      /* brand accent (TPTH Brand Standard v1.0, Oct 16 2026) */
  --orange-hover: #ff9447;
  --orange-ink: #b54a08;  /* orange text on white/tint: 5.3:1 */
  --pale: #b8c7db;
  --tint: #f3f6fa;
  --line: #d9e0ea;
  --ink: #0f1a2b;
  --muted: #3f4b5c;
  --muted-2: #5b6b80;
  --white: #ffffff;

  --gutter: 16px;
  --max: 1440px;
  --pad-x: clamp(16px, 5vw, 72px);
  --section-y: clamp(40px, 6vw, 64px);
}

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

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

body {
  margin: 0;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
/* Dark surfaces need a light ring — the blue one is ~1.5:1 on navy. */
.masthead :focus-visible, .hero :focus-visible,
.cta :focus-visible, .site-footer :focus-visible, .announce :focus-visible {
  outline-color: var(--white);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; z-index: 100;
}
.skip:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--tint); }
.section--line { border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 32px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split-narrow { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 64px); align-items: center; }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split-narrow { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- type ---------- */
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, 'Courier New', monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue);
}
.mono--sky { color: var(--sky); }
/* .mono.mono--accent, not .mono--accent: .card p { color } would otherwise win. */
.mono.mono--accent { color: var(--orange-ink); }
.mono--muted { color: var(--muted-2); }

.h-hero {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.06; font-weight: 600; letter-spacing: -0.02em;
  text-wrap: balance;
}
.h-page {
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08; font-weight: 600; letter-spacing: -0.02em;
  text-wrap: balance;
}
.h-sec {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15; font-weight: 600; letter-spacing: -0.01em;
  text-wrap: balance;
}
.h-card { font-size: clamp(19px, 2vw, 22px); font-weight: 600; line-height: 1.25; }
.lead { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.5; color: var(--muted); }
.lead--pale { color: var(--pale); }
.small { font-size: 14px; color: var(--muted-2); }

/* ---------- header ---------- */
.announce {
  background: var(--navy-2); color: var(--pale);
  font-size: 14px; text-align: center;
  padding: 9px var(--pad-x);
}
.announce a { color: var(--sky); }
.announce strong { color: var(--white); font-weight: 400; }

.masthead { background: var(--navy); color: var(--white); }
.masthead a:not(.btn) { color: var(--white); text-decoration: none; }
.masthead .btn--on-navy { color: var(--navy); }
.masthead .btn--ghost { color: var(--white); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-name {
  font-weight: 700; font-size: clamp(13px, 1.6vw, 17px);
  letter-spacing: 0.02em; line-height: 1.1;
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.nav a { font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--sky); text-decoration: none; }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--white); padding-bottom: 4px; }

.nav-toggle { display: none; background: none; border: 1px solid var(--pale); color: var(--white);
  padding: 8px 12px; border-radius: 2px; font: inherit; font-size: 14px; cursor: pointer; }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy-2); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px var(--pad-x) 20px; z-index: 50;
  }
  .masthead-inner { position: relative; }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--navy-line); }
  .nav a[aria-current="page"] { border-bottom: 1px solid var(--navy-line); padding-bottom: 12px; }
  .nav .btn { margin-top: 14px; text-align: center; border-bottom: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 13px 24px; border-radius: 2px;
  font-family: inherit; cursor: pointer;
  font-weight: 600; font-size: 16px; text-decoration: none;
  background: var(--navy); color: var(--white); border: 1px solid var(--navy);
}
.btn:hover { background: var(--navy-2); color: var(--white); text-decoration: none; }
/* Primary CTA on navy: brand orange with navy text (6.3:1). */
.btn--on-navy { background: var(--orange); color: var(--navy); border-color: var(--orange); }
.btn--on-navy:hover { background: var(--orange-hover); color: var(--navy); border-color: var(--orange-hover); }
.btn--ghost { background: transparent; color: var(--white); border-color: #4b6488; }
.btn--ghost:hover { background: var(--navy-2); color: var(--white); }
.btn--sec { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--sec:hover { background: var(--tint); color: var(--navy); }
.btn--sm { padding: 10px 16px; font-size: 15px; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* The global reset at the top sets `ul { list-style: none }`, which is right
   for nav and card grids and wrong for a list that is genuinely a list. This
   opts a panel's prose list back in. */
.panel ul.bullets { list-style: disc; padding-left: 20px; margin: 0; }
.panel ul.bullets li { margin-bottom: 10px; }
.panel ul.bullets li:last-child { margin-bottom: 0; }

/* On-demand course cards. */
.od-cards .od-card { display: flex; flex-direction: column; }
.od-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.od-head .h-card { margin: 0; }
.od-flag {
  flex: 0 0 auto; align-self: flex-start;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted-2); background: var(--tint); white-space: nowrap;
}
.od-price { margin: 0 0 2px; font-weight: 600; font-size: 17px; }
.od-meta {
  margin: 0 0 12px; color: var(--muted-2); font-size: 13.5px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
/* Push the action to the bottom so buttons line up across cards of
   uneven copy length. */
.od-card > p:not(.od-price):not(.od-meta):not(.od-soon-note) { flex: 1 1 auto; }
.od-cta { align-self: flex-start; margin-top: 4px; }
.od-ext { font-size: 13px; }
.od-soon-note { margin: 4px 0 0; font-size: 14px; color: var(--muted-2); }

/* Download buttons. Outline rather than solid navy: on the pages these appear
   on there is already a primary action (book a call, see dates), and a second
   solid button competes with it. The file type and size sit inside the button
   so the reader knows what they are getting before they click. */
.btn--dl {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--navy); border-color: var(--navy);
  text-align: left;
}
.btn--dl:hover { background: var(--tint); color: var(--navy); }
.btn--dl:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.dl-icon { flex: 0 0 auto; }
.dl-label { font-weight: 600; }
.dl-meta {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12.5px; font-weight: 400; color: var(--muted-2);
  white-space: nowrap;
}
.btn--dl:hover .dl-meta { color: var(--muted); }
.dl-block { max-width: 72ch; }
.dl-title { margin: 0 0 6px; }
.dl-note { margin: 0 0 18px; color: var(--muted); }
.dl-row { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 520px) {
  /* Stacked and full width, so the label and the meta never collide. */
  .dl-row { flex-direction: column; align-items: stretch; }
  .btn--dl { justify-content: flex-start; }
}

.arrow { font-weight: 600; }

/* ---------- hero ---------- */
.hero { background: var(--navy); color: var(--white); padding-block: clamp(48px, 7vw, 80px); }
.hero .h-hero, .hero .h-page { color: var(--white); }
.hero-frameworks {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline;
  border-top: 1px solid var(--navy-line); padding-top: 24px; margin-top: 40px;
  font-size: 14px; color: var(--pale);
}

/* ---------- cards / tiles / tables ---------- */
.cards {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .cards--2 { grid-template-columns: 1fr; } }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .cards--3 { grid-template-columns: 1fr; } }
.card { background: var(--white); padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.card p { color: var(--muted); }

.panel { border: 1px solid var(--line); padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.panel--dashed { border-style: dashed; justify-content: center; }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .tiles, .tiles--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .tiles, .tiles--2, .tiles--3 { grid-template-columns: 1fr; } }
.tile {
  background: var(--white); border: 1px solid var(--line);
  padding: 20px; display: flex; flex-direction: column; gap: 4px;
}
.tile-value { font-size: clamp(30px, 3.6vw, 38px); font-weight: 600; line-height: 1; }
.tile-label { font-size: 14px; font-weight: 600; }
.tile-note { font-size: 13px; color: var(--muted-2); }
.tile--dark { background: var(--navy-2); border-color: var(--navy-2); color: var(--white); }
.tile--dark .tile-note { color: var(--pale); }

.steps { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--white); border-top: 3px solid var(--navy); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.step span:last-child { color: var(--muted); font-size: 15px; }

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their own content. A 560px-min table therefore widened its container
   and pushed the whole page sideways on a phone, even though .table-scroll is
   perfectly capable of scrolling on its own. min-width:0 lets the container
   shrink so the table scrolls inside it instead of the document. */
.stack, .stack-sm, .split > *, .grid > *, .cards > * { min-width: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--white); border: 1px solid var(--line); }
caption { text-align: left; padding-bottom: 12px; color: var(--muted-2); font-size: 14px; }
th, td { text-align: left; padding: 13px 16px; border-top: 1px solid var(--line); font-size: 15px; vertical-align: top; }
thead th {
  border-top: 0; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 400;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px solid var(--line); padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--ink); }
a.chip:hover { background: var(--tint); text-decoration: none; }

.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 18px 0; font-size: clamp(16px, 1.8vw, 18px); font-weight: 500; cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted-2); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .faq-body { padding: 0 0 18px; color: var(--muted); max-width: 70ch; }

.ph {
  background: #e6ecf3; display: flex; align-items: center; justify-content: center;
  color: var(--muted-2); font-size: 14px; text-align: center; padding: 12px;
}

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.sec-head .note { color: var(--muted-2); font-size: 15px; max-width: 42ch; }

/* ---------- CTA + footer ---------- */
.cta {
  background: var(--navy); color: var(--white);
  padding-block: clamp(40px, 5vw, 56px);
}
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta .h-sec { color: var(--white); max-width: 46ch; }

.site-footer { background: var(--navy); color: var(--pale); padding-block: 56px 28px; border-top: 1px solid var(--navy-line); }
.site-footer a:not(.btn) { color: var(--pale); }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; font-size: 14px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--navy-line); margin-top: 36px; padding-top: 20px;
  font-size: 13px;
}
.site-footer .brand-name { color: var(--white); }

/* ---------- forms ---------- */
.field {
  border: 1px solid var(--line); padding: 12px 14px; font: inherit; font-size: 15px;
  width: 100%; background: var(--white); color: var(--ink); border-radius: 0;
}
.field::placeholder { color: var(--muted-2); }
textarea.field { min-height: 120px; resize: vertical; }
label { font-size: 14px; font-weight: 600; }

/* ---------- print ---------- */
@media print {
  .masthead, .announce, .cta, .nav-toggle, .skip, .site-footer { display: none; }
  body { color: #000; }
}

/* Inline monospace for credential IDs and other literal strings in prose. */
.mono-inline {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  white-space: nowrap;
}

/* A hidden table row must not keep its table display box. */
tr[hidden] { display: none; }

/* ---------------------------------------------------------------- post prose */
/* Article body. Measure is capped at ~68 characters because that is where
   sustained reading stops being comfortable, regardless of screen width. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--ink); }
.prose h2 { font-size: 24px; line-height: 1.25; margin-top: 1.9em; }
.prose h3 { font-size: 19px; line-height: 1.3; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { font-size: 17px; line-height: 1.65; margin-top: .4em; }
.prose blockquote {
  border-left: 3px solid var(--sky);
  padding-left: 20px;
  margin-left: 0;
  color: var(--muted);
}
.prose code {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: .9em;
  background: var(--tint);
  padding: 1px 5px;
}
/* Long URLs in post bodies must wrap rather than force the page sideways. */
.prose a { overflow-wrap: anywhere; }

.chip--sm { font-size: 12px; padding: 3px 9px; }

/* Post titles are links, but should not look like body links. */
.h-card > a { color: inherit; text-decoration: none; }
.h-card > a:hover { text-decoration: underline; }

/* Contact form result. Silent success is indistinguishable from failure, and
   a vanished enquiry is the worst outcome this page can produce. */
.form-status:empty { display: none; }
.form-status {
  font-size: 15px;
  padding: 10px 14px;
  border-left: 3px solid var(--sky);
  background: var(--tint);
}
.form-status.is-ok { border-color: #1a7f4b; }
.form-status.is-error { border-color: #b4342a; }

/* Vendor AI questions resource page. The "good answer / non-answer" pair is
   the useful part, so it gets a tinted block rather than another bullet list —
   a reader scanning for one question's answer needs to find it fast. */
.vq-list { display: flex; flex-direction: column; gap: 26px; max-width: 78ch; }
.vq { border-top: 2px solid var(--navy); padding-top: 14px; }
.vq .h-card { margin: 4px 0 10px; }
.vq-ans { background: var(--tint); padding: 14px 16px; margin-top: 12px; }
.vq-ans p { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.vq-ans p:last-child { margin-bottom: 0; }
.vq-tag {
  display: inline-block; font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; margin-right: 8px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--white);
}
.vq-good { color: #1d5c34; border-color: #b9d4c3; }
.vq-bad  { color: #7a1f1c; border-color: #ddbdbb; }
.callout-strong {
  border-left: 3px solid var(--navy); background: var(--tint);
  padding: 16px 20px; margin-top: 22px; max-width: 78ch;
}
.callout-strong p { margin: 0; }
@media (max-width: 560px) { .vq-tag { display: block; margin: 0 0 6px; } }

/* Consent checkbox. Deliberately not styled into a toggle or a switch: a real
   checkbox is what a visitor recognises as optional, and what an assessor
   recognises as unticked. */
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px;
         color: var(--muted); line-height: 1.5; }
.check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }

/* ---------- Security Agent Mesh diagram ----------
   A four-step flow drawn in markup rather than as an image: it stays sharp at
   any size, reflows to one column on a phone, and a screen reader reads it as
   the ordered list it actually is. */
.mesh { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mesh-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px; row-gap: 2px;
  position: relative; padding-bottom: 20px;
}
.mesh-step:last-child { padding-bottom: 0; }
/* The connector runs from under one badge to the next, so the steps read as a
   sequence rather than four unrelated cards. */
.mesh-step:not(:last-child)::before {
  content: ""; position: absolute; left: 14px; top: 34px; bottom: 6px;
  width: 2px; background: var(--line);
}
.mesh-num {
  grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: grid; place-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13px; font-weight: 500;
}
.mesh-name { font-weight: 600; font-size: 16px; line-height: 1.9; }
.mesh-desc { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ---------- credential verification (/verify/) ----------
   Result panels are colour-coded but never colour-only: each carries a text
   tag (Verified / No match / Revoked) because a colour alone fails for anyone
   who cannot distinguish them, and this page exists to be relied upon. */
.vform label { font-weight: 600; font-size: 15px; }
.vform .field { width: 100%; }
.vr {
  margin-top: 24px; padding: 20px 22px;
  border: 1px solid var(--line); border-left: 4px solid var(--muted-2);
  background: var(--tint);
}
.vr-tag { margin-bottom: 6px; }
.vr--ok { border-left-color: #1f7a4d; background: #eef7f2; }
.vr--ok .vr-tag { color: #1f7a4d; }
.vr--miss { border-left-color: #8a2c25; background: #fbf0ef; }
.vr--miss .vr-tag { color: #8a2c25; }
.vr--revoked { border-left-color: #8a2c25; background: #fbf0ef; }
.vr--revoked .vr-tag { color: #8a2c25; }
.vr--note { border-left-color: var(--blue); }
.vr--note .vr-tag { color: var(--blue); }
.vr p { color: var(--muted); margin-top: 8px; }
.vr-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.vr-facts dt {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2);
}
.vr-facts dd { margin: 3px 0 0; font-weight: 600; font-size: 16px; }


/* ==================== CATRP ethics exam ====================
   Supplied as a self-contained embed and scoped on the way in. Three
   things about the original would have broken the page, so if it is ever
   re-imported from the master artifact, redo all three:
     1. Its rules were written against :root and bare `body`, `a`,
        `button`, `h1`-`h3`. Everything here is scoped to #catrp-exam and #course-exam (the course exams share it).
     2. It carried a prefers-color-scheme dark block that redefined
        --ink, --muted and --muted-2. This site has no dark mode, so on a
        visitor with a dark OS setting that turned the header and footer
        text near-white on white. The block is dropped, not scoped.
     3. Its outer element used class `wrap`, which is the site's own
        container class; renamed to `exam-wrap`.
   It also @imported IBM Plex, which components.py already <link>s.
   ==================================================================== */
/* A leftover fragment of the @import used to sit here and swallowed the palette
   block below, so none of these variables was ever defined (fixed 25 Sep 2026). */

  /* Palette matches thirdpartythreathunting.com's own tokens (navy / blue / sky, plus its exact "good answer / bad answer" green & red pair). */
  :is(#catrp-exam,#course-exam){
    --bg: #F3F6FA;        /* --tint */
    --surface: #FFFFFF;
    --surface-2: #E6ECF3;
    --ink: #0F1A2B;       /* --ink */
    --muted: #3F4B5C;     /* --muted */
    --muted-2: #5B6B80;   /* --muted-2 */
    --accent: #0B1F3A;    /* --navy */
    --accent-hover: #122B4F; /* --navy-2 */
    --accent-ink: #FFFFFF;
    --accent-2: #0B3D6E;  /* --blue */
    --sky: #8FB3DC;
    --border: #D9E0EA;    /* --line */
    --success: #1F7A4D;
    --success-bg: #EEF7F2;
    --success-border: #B9D4C3;
    --danger: #8A2C25;
    --danger-bg: #FBF0EF;
    --danger-border: #DDBDBB;
    --focus: #0B3D6E;
    --radius-sm: 2px;
    --radius-md: 4px;
    --shadow: none;
  }:is(#catrp-exam,#course-exam)[data-theme="dark"]{
    --bg: #0A1526;
    --surface: #0F2140;
    --surface-2: #16305A;
    --ink: #EAF0F9;
    --muted: #ABBCD4;
    --muted-2: #8CA0BE;
    --accent: #8FB3DC;
    --accent-hover: #B8C7DB;
    --accent-ink: #0B1F3A;
    --accent-2: #B8C7DB;
    --sky: #8FB3DC;
    --border: #253E66;
    --success: #7BCE9E;
    --success-bg: #123324;
    --success-border: #1F7A4D;
    --danger: #E8988B;
    --danger-bg: #3A1D18;
    --danger-border: #8A2C25;
    --focus: #8FB3DC;
  }:is(#catrp-exam,#course-exam) *{box-sizing:border-box;}:is(#catrp-exam,#course-exam){
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    padding-inline:16px;
    padding-block:28px 64px;
    line-height:1.55;
  }:is(#catrp-exam,#course-exam) .exam-wrap{max-width:760px; margin:0 auto;}:is(#catrp-exam,#course-exam) h1, :is(#catrp-exam,#course-exam) h2, :is(#catrp-exam,#course-exam) h3{font-family:inherit; font-weight:600; letter-spacing:-0.01em; text-wrap:balance; margin:0;}:is(#catrp-exam,#course-exam) .mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}:is(#catrp-exam,#course-exam) a{color:var(--accent-2);}:is(#catrp-exam,#course-exam) a:hover{color:var(--accent);}:is(#catrp-exam,#course-exam) button{font-family:inherit;}:is(#catrp-exam,#course-exam) /* ---------- header / seal ---------- */
  .masthead{display:flex; align-items:center; gap:16px; margin-bottom:28px;}:is(#catrp-exam,#course-exam) .seal{flex:none; width:40px; height:44px; color:var(--accent);}:is(#catrp-exam,#course-exam) .seal svg{width:100%; height:100%; display:block;}:is(#catrp-exam,#course-exam) .masthead-text .kicker{
    font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent-2); font-weight:500; margin-bottom:4px;
  }:is(#catrp-exam,#course-exam) .masthead-text h1{font-size:21px; font-weight:600; line-height:1.2;}:is(#catrp-exam,#course-exam) .masthead-text .sub{color:var(--muted-2); font-size:14px; margin-top:2px;}:is(#catrp-exam,#course-exam) [hidden]{display:none !important;}:is(#catrp-exam,#course-exam) /* ---------- cards ---------- */
  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:24px;
    box-shadow:var(--shadow);
  }:is(#catrp-exam,#course-exam) .card + .card{margin-top:16px;}:is(#catrp-exam,#course-exam) /* ---------- intro screen ---------- */
  .rules{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px;}:is(#catrp-exam,#course-exam) .rules li{display:flex; gap:10px; font-size:14.5px; color:var(--ink);}:is(#catrp-exam,#course-exam) .rules li .dot{
    flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent);
    color:var(--accent-ink); font-family:'IBM Plex Mono'; font-size:10px; font-weight:500;
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }:is(#catrp-exam,#course-exam) .field{margin-top:16px;}:is(#catrp-exam,#course-exam) .field label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px;}:is(#catrp-exam,#course-exam) .field input{
    width:100%; padding:11px 12px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--surface); color:var(--ink); font-size:15px; font-family:inherit;
  }:is(#catrp-exam,#course-exam) .field input:focus{outline:2px solid var(--focus); outline-offset:1px;}:is(#catrp-exam,#course-exam) .field-row{display:flex; gap:12px; flex-wrap:wrap;}:is(#catrp-exam,#course-exam) .field-row .field{flex:1 1 220px;}:is(#catrp-exam,#course-exam) .btn{
    appearance:none; cursor:pointer; border-radius:var(--radius-sm);
    font-weight:600; font-size:15px; padding:12px 20px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:background-color .15s ease;
    border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  }:is(#catrp-exam,#course-exam) .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}:is(#catrp-exam,#course-exam) .btn-primary:hover:not(:disabled){background:var(--accent-hover); border-color:var(--accent-hover);}:is(#catrp-exam,#course-exam) .btn-primary:disabled{opacity:.45; cursor:not-allowed;}:is(#catrp-exam,#course-exam) .btn-ghost{background:transparent; color:var(--accent); border:1px solid var(--border);}:is(#catrp-exam,#course-exam) .btn-ghost:hover{background:var(--surface-2);}:is(#catrp-exam,#course-exam) .btn-block{width:100%;}:is(#catrp-exam,#course-exam) .attest{
    margin-top:18px; display:flex; gap:10px; align-items:flex-start;
    font-size:13.5px; color:var(--muted); background:var(--surface-2);
    border-radius:var(--radius-md); padding:12px 14px;
  }:is(#catrp-exam,#course-exam) .attest input{margin-top:3px; accent-color:var(--accent);}:is(#catrp-exam,#course-exam) /* ---------- exam progress bar ---------- */
  .progress-bar{
    position:sticky; top:env(safe-area-inset-top, 0px);
    z-index:5; background:var(--bg); padding-block:10px 12px;
    margin-bottom:8px; border-bottom:1px solid var(--border);
  }:is(#catrp-exam,#course-exam) .progress-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}:is(#catrp-exam,#course-exam) .progress-top .label{font-size:13px; font-weight:600; color:var(--muted);}:is(#catrp-exam,#course-exam) .progress-top .count{font-family:'IBM Plex Mono'; font-size:13px; color:var(--accent-2);}:is(#catrp-exam,#course-exam) .progress-track{height:6px; border-radius:var(--radius-sm); background:var(--surface-2); overflow:hidden;}:is(#catrp-exam,#course-exam) .progress-fill{height:100%; background:var(--accent); width:0%; transition:width .2s ease;}:is(#catrp-exam,#course-exam) .cat-nav{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}:is(#catrp-exam,#course-exam) .cat-chip{
    font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.04em; font-weight:500;
    padding:4px 9px; border-radius:var(--radius-sm);
    background:var(--surface); color:var(--muted-2); border:1px solid var(--border);
    text-decoration:none; cursor:pointer;
  }:is(#catrp-exam,#course-exam) .cat-chip.done{color:var(--success); background:var(--success-bg); border-color:var(--success-border);}:is(#catrp-exam,#course-exam) /* ---------- exam sections / questions ---------- */
  .section-head{margin:30px 0 12px;}:is(#catrp-exam,#course-exam) .section-head .eyebrow{
    font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent-2); font-weight:500;
  }:is(#catrp-exam,#course-exam) .section-head h2{font-size:19px; margin-top:4px;}:is(#catrp-exam,#course-exam) .section-head p{color:var(--muted-2); font-size:13.5px; margin-top:4px;}:is(#catrp-exam,#course-exam) .q{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:18px 18px 16px; margin-bottom:12px; scroll-margin-top:120px;
  }:is(#catrp-exam,#course-exam) .q.answered{border-color:var(--success-border);}:is(#catrp-exam,#course-exam) .q-num{
    font-family:'IBM Plex Mono'; font-size:12px; color:var(--accent-2);
    font-weight:500; margin-bottom:6px; display:block;
  }:is(#catrp-exam,#course-exam) .q-prompt{font-size:15.5px; font-weight:500; margin-bottom:12px;}:is(#catrp-exam,#course-exam) .opts{display:grid; gap:8px;}:is(#catrp-exam,#course-exam) .opt{
    display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:10px 12px; cursor:pointer; font-size:14.5px;
    background:var(--bg);
  }:is(#catrp-exam,#course-exam) .opt:hover{border-color:var(--accent-2);}:is(#catrp-exam,#course-exam) .opt input{margin-top:3px; accent-color:var(--accent);}:is(#catrp-exam,#course-exam) .opt.checked{border-color:var(--accent); background:var(--surface-2);}:is(#catrp-exam,#course-exam) .opt .letter{font-family:'IBM Plex Mono'; font-weight:600; color:var(--muted-2); flex:none;}:is(#catrp-exam,#course-exam) .submit-bar{
    position:sticky; bottom:env(safe-area-inset-bottom, 0px); margin-top:20px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:16px 18px; box-shadow:var(--shadow); display:flex; align-items:center;
    justify-content:space-between; gap:14px; flex-wrap:wrap;
  }:is(#catrp-exam,#course-exam) .submit-bar .status{font-size:13.5px; color:var(--muted);}:is(#catrp-exam,#course-exam) /* ---------- results screen ---------- */
  .score-hero{display:flex; gap:24px; align-items:center; flex-wrap:wrap;}:is(#catrp-exam,#course-exam) .gauge{width:132px; height:132px; flex:none; position:relative;}:is(#catrp-exam,#course-exam) .gauge svg{width:100%; height:100%; transform:rotate(-90deg);}:is(#catrp-exam,#course-exam) .gauge .pct{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; font-family:'IBM Plex Mono';
  }:is(#catrp-exam,#course-exam) .gauge .pct .num{font-size:26px; font-weight:600;}:is(#catrp-exam,#course-exam) .gauge .pct .frac{font-size:11px; color:var(--muted);}:is(#catrp-exam,#course-exam) .verdict-badge{
    display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px;
    font-family:'IBM Plex Mono'; letter-spacing:.02em;
    padding:6px 12px; border-radius:var(--radius-sm); margin-bottom:8px;
  }:is(#catrp-exam,#course-exam) .verdict-badge.pass{background:var(--success-bg); color:var(--success); border:1px solid var(--success-border);}:is(#catrp-exam,#course-exam) .verdict-badge.fail{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-border);}:is(#catrp-exam,#course-exam) .score-meta{color:var(--muted); font-size:14px;}:is(#catrp-exam,#course-exam) .score-meta strong{color:var(--ink);}:is(#catrp-exam,#course-exam) .cat-breakdown{margin-top:22px; display:grid; gap:12px;}:is(#catrp-exam,#course-exam) .cat-row .cat-row-top{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px;}:is(#catrp-exam,#course-exam) .cat-row-top .name{font-weight:600;}:is(#catrp-exam,#course-exam) .cat-row-top .fig{font-family:'IBM Plex Mono'; color:var(--muted);}:is(#catrp-exam,#course-exam) .cat-track{height:8px; border-radius:var(--radius-sm); background:var(--surface-2); overflow:hidden;}:is(#catrp-exam,#course-exam) .cat-fill{height:100%; background:var(--accent-2);}:is(#catrp-exam,#course-exam) .review-toggle{margin-top:22px;}:is(#catrp-exam,#course-exam) .review-list{margin-top:14px; display:grid; gap:10px;}:is(#catrp-exam,#course-exam) .rev-item{border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; background:var(--surface);}:is(#catrp-exam,#course-exam) .rev-item.correct{border-left:3px solid var(--success);}:is(#catrp-exam,#course-exam) .rev-item.incorrect{border-left:3px solid var(--danger);}:is(#catrp-exam,#course-exam) .rev-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}:is(#catrp-exam,#course-exam) .rev-head .rq{font-family:'IBM Plex Mono'; font-size:12px; color:var(--muted);}:is(#catrp-exam,#course-exam) .rev-mark{font-size:12px; font-weight:700;}:is(#catrp-exam,#course-exam) .rev-mark.correct{color:var(--success);}:is(#catrp-exam,#course-exam) .rev-mark.incorrect{color:var(--danger);}:is(#catrp-exam,#course-exam) .rev-prompt{font-size:14.5px; font-weight:500; margin-top:4px;}:is(#catrp-exam,#course-exam) .rev-ans{font-size:13.5px; margin-top:8px; color:var(--muted);}:is(#catrp-exam,#course-exam) .rev-ans b{color:var(--ink);}:is(#catrp-exam,#course-exam) .rev-rationale{font-size:13.5px; margin-top:6px; color:var(--muted); font-style:italic;}:is(#catrp-exam,#course-exam) .result-actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}:is(#catrp-exam,#course-exam) .footer-note{margin-top:24px; font-size:12.5px; color:var(--muted-2); text-align:center;}

  @media (max-width:480px){:is(#catrp-exam,#course-exam) .masthead-text h1{font-size:18px;}:is(#catrp-exam,#course-exam) .card{padding:18px;}:is(#catrp-exam,#course-exam) .score-hero{gap:16px;}
  }

:is(#catrp-exam,#course-exam) .namecheck{
  margin-top:16px; padding:12px 14px; font-size:13.5px; line-height:1.5;
  color:var(--exam-ink, #0F1A2B);
  background:#FBF6EC; border-left:3px solid #B9862C;
}
:is(#catrp-exam,#course-exam) .namecheck strong{display:block; margin-bottom:3px;}

/* The credential badge on a verified result. Floated so the facts keep their
   full width on a phone, where the badge drops above them instead. */
.vr{position:relative}
.vr-badge{float:right;width:96px;height:96px;margin:0 0 12px 16px}
@media (max-width:600px){
  .vr-badge{float:none;display:block;margin:0 0 12px}
}


/* ==================== SAM demo (/demo/sam/) ====================
   Built from the site's own components, so almost nothing is needed here.
   These are the four things the page adds that the design system does not
   already have: the runs-today / roadmap lines on an agent card, the
   zero-day timeline, and the sample-portfolio cards. */
.runs{font-family:var(--mono);font-size:12.5px;line-height:1.5;
  border-top:1px dashed var(--line);padding-top:9px;margin:2px 0 0}
.runs b{font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.runs--live{color:#1f7a4d}
.runs--road{color:var(--muted-2)}

.tlist{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--line)}
.tl{position:relative;padding:0 0 26px 22px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-29px;top:4px;width:11px;height:11px;
  border-radius:50%;background:var(--blue);border:2px solid var(--white)}
.tl-time{display:block;font-size:13px;color:var(--blue);font-weight:600}
.tl-label{display:block;font-weight:600;font-size:16px;margin-top:2px}
.tl-desc{display:block;color:var(--muted);font-size:14.5px;margin-top:3px}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.vcard{border:1px solid var(--line);background:var(--white);padding:16px;
  display:flex;flex-direction:column;gap:11px}
.vcard--owned{border-color:var(--blue);box-shadow:inset 0 0 0 1px rgba(11,61,110,.08)}
.vcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vcard-name{display:block;font-weight:600;font-size:16px;line-height:1.2}
.vcard-cat{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted-2);margin-top:3px}
.vpill{font-family:var(--mono);font-size:12px;font-weight:600;padding:3px 10px;
  border-radius:999px;white-space:nowrap}
.vpill--green{background:#eef7f2;color:#1f7a4d}
.vpill--yellow{background:#fbf4e6;color:#8a6512}
.vpill--red{background:#fbf0ef;color:#96382f}
.vstage{display:flex;flex-direction:column;gap:3px;border-top:1px dashed var(--line);padding-top:9px}
.vstage:first-of-type{border-top:none;padding-top:0}
.vstage-l{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.vstage-b{font-size:13px;color:var(--muted);line-height:1.45}
.vstage-b--ill{font-style:italic;color:var(--muted-2)}
.vstage-b--live{color:var(--ink)}
.vlive{font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 7px;
  border-radius:999px;background:#eef7f2;color:#1f7a4d;margin-left:6px;
  letter-spacing:.02em}


/* ============ The Lighthouse demo (/demo/vendor-monitoring/) ============
   Every class is prefixed lh-, because the original block used .wrap,
   .section, .card, .grid, .brand and .field - all six of which this design
   system already defines for other purposes. .field is the worst of them:
   an input style here, a flex wrapper there. Prefixing removes the question
   entirely rather than relying on specificity. */
.lh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.lh-tile{border:1px solid var(--line);background:var(--white);padding:16px 18px;
  display:flex;flex-direction:column;gap:8px}
.lh-tile-l{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2)}
.lh-tile-v{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
.lh-tile-v small{font-size:15px;color:var(--muted-2);font-weight:400}
.lh-tile-v--alert{color:#96382f}
.lh-mix{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.lh-mix-i{display:flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:17px;font-weight:600}
.lh-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.lh-dot--green{background:#1f7a4d}
.lh-dot--yellow{background:#b8860b}
.lh-dot--red{background:#96382f}
.lh-dot--pending{background:var(--muted-2)}

.lh-panel{border:1px solid var(--line);background:var(--white)}
.lh-panel-h{padding:13px 18px;border-bottom:1px solid var(--line)}
.lh-alert{display:flex;gap:12px;align-items:flex-start;padding:11px 18px;
  border-bottom:1px solid var(--line);font-size:14.5px}
.lh-alert:last-child{border-bottom:none}
.lh-alert .lh-dot{margin-top:6px}
.lh-alert-b{display:flex;flex-direction:column;gap:2px}
.lh-alert-t{font-family:var(--mono);font-size:12px;color:var(--muted-2)}
.lh-alert-empty{padding:16px 18px;color:var(--muted-2);font-size:14.5px}

.lh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.lh-v{display:flex;flex-direction:column;gap:13px;text-align:left;width:100%;
  border:1px solid var(--line);background:var(--white);padding:16px;
  font:inherit;color:inherit;cursor:pointer}
.lh-v:hover{border-color:var(--blue)}
.lh-v--open{border-color:var(--blue);box-shadow:inset 0 0 0 1px rgba(11,61,110,.1)}
.lh-v-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lh-v-name{display:block;font-weight:600;font-size:16px;line-height:1.2}
.lh-v-cat{display:block;font-family:var(--mono);font-size:11.5px;
  color:var(--muted-2);margin-top:3px}
.lh-v-meta{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);
  font-size:12px;color:var(--muted-2);border-top:1px dashed var(--line);padding-top:10px}
.lh-chips{display:flex;gap:6px;flex-wrap:wrap}
.lh-chip{display:flex;align-items:center;gap:5px;padding:4px 8px;
  background:var(--tint);border:1px solid var(--line);font-family:var(--mono);
  font-size:11.5px;color:var(--muted)}

.lh-ring{width:56px;height:56px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:conic-gradient(var(--ring) calc(var(--pct)*3.6deg),var(--line) 0)}
.lh-ring--green{--ring:#1f7a4d}
.lh-ring--yellow{--ring:#b8860b}
.lh-ring--red{--ring:#96382f}
.lh-ring--pending{background:var(--line)}
.lh-ring-h{width:42px;height:42px;border-radius:50%;background:var(--white);
  display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:15px}

.lh-detail{grid-column:1/-1;border:1px solid var(--blue);background:var(--tint);
  padding:22px;display:flex;flex-direction:column;gap:22px}
.lh-detail-h{display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;flex-wrap:wrap}
.lh-detail-e{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--blue);display:block;margin-bottom:4px}
.lh-dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.lh-dim{border:1px solid var(--line);background:var(--white);padding:14px;
  display:flex;flex-direction:column;gap:8px}
.lh-dim-t{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.lh-dim-s{font-family:var(--mono);font-size:22px;font-weight:600}
.lh-dim-s small{font-size:13px;color:var(--muted-2);font-family:inherit}
.lh-dim-d{font-size:12.5px;color:var(--muted-2);line-height:1.45}
.lh-dim-na{font-size:12.5px;color:var(--muted-2)}
.lh-bar{display:block;height:6px;background:var(--line);overflow:hidden}
.lh-bar-f{display:block;height:100%}
.lh-bar-f--green{background:#1f7a4d}
.lh-bar-f--yellow{background:#b8860b}
.lh-bar-f--red{background:#96382f}
.lh-bar-f--pending{background:var(--muted-2)}
.lh-sub{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.lh-spark{border:1px solid var(--line);background:var(--white);padding:14px}
.lh-spark-empty{color:var(--muted-2);font-size:13.5px}
.lh-log{border:1px solid var(--line);background:var(--white)}
.lh-log-row{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:13.5px;align-items:flex-start}
.lh-log-row:last-child{border-bottom:none}
.lh-log-t{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  width:92px;flex:none;padding-top:2px;color:var(--muted-2)}
.lh-log-t.lh-med{color:#b8860b}
.lh-log-t.lh-high{color:#96382f}
.lh-log-t.lh-low{color:#1f7a4d}
.lh-log-b{flex:1;color:var(--muted)}

.lh-form{display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);
  background:var(--white);padding:16px}
.lh-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.lh-f{display:flex;flex-direction:column;gap:5px}
.lh-f>span{font-size:13px;color:var(--muted);font-weight:500}
.lh-f--check{flex-direction:row;align-items:center;gap:8px}
.lh-f--check input{width:16px;height:16px}
.lh-f input[type=text],.lh-f input[type=date],.lh-f select,.lh-f textarea{
  font:inherit;font-weight:400;font-size:14px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:0;
  padding:8px 10px;width:100%}
.lh-f textarea{min-height:76px;resize:vertical;line-height:1.5}
.lh-f--check input[type=checkbox]{width:16px;height:16px;padding:0}
.lh-save{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lh-save-n{font-size:13px;color:var(--muted-2)}

.lh-csp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.lh-csp{border:1px solid var(--line);background:var(--white);padding:15px 16px;
  display:flex;flex-direction:column;gap:9px}
.lh-csp-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lh-csp-s{font-size:13.5px;color:var(--muted);line-height:1.4}
.lh-csp-m{font-family:var(--mono);font-size:12px;color:var(--muted-2);
  border-top:1px dashed var(--line);padding-top:8px}

.lh-trace{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.lh-t{border:1px solid var(--line);background:var(--white);padding:16px;
  display:flex;flex-direction:column;gap:12px}
.lh-t--owned{border-color:var(--blue)}
.lh-t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lh-t-s{display:flex;flex-direction:column;gap:4px;border-top:1px dashed var(--line);
  padding-top:10px}
.lh-t-s:first-of-type{border-top:none;padding-top:0}
.lh-t-l{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.lh-t-b{font-size:13.5px;color:var(--muted);line-height:1.45;
  display:flex;flex-direction:column;gap:4px}
.lh-t-b--ill{font-style:italic;color:var(--muted-2)}
.lh-t-note{font-size:12px;color:var(--muted-2);margin-bottom:2px}
.lh-find{display:flex;gap:7px;align-items:flex-start;font-size:13px}
.lh-find .lh-dot{margin-top:5px;width:6px;height:6px}
.lh-live{font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 7px;
  border-radius:999px;background:#eef7f2;color:#1f7a4d;margin-left:6px}

.lh-pill{font-family:var(--mono);font-size:12px;font-weight:600;padding:3px 10px;
  border-radius:999px;white-space:nowrap}
.lh-pill--green{background:#eef7f2;color:#1f7a4d}
.lh-pill--yellow{background:#fbf4e6;color:#8a6512}
.lh-pill--red{background:#fbf0ef;color:#96382f}
.lh-pill--pending{background:var(--tint);color:var(--muted-2)}

.lh-meth summary{cursor:pointer;font-weight:600;font-size:16px}
.lh-meth-b{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.lh-meth-b p{color:var(--muted);font-size:14.5px;line-height:1.55}

/* Course exams: multi-select hint under the prompt. */
#course-exam .q-hint{font-size:12.5px;color:var(--accent-2);font-weight:500;margin:-4px 0 12px;}

/* Speaking testimonial pull quote (no orange: the page CTA keeps the one accent) */
.testimonial { margin: 4px 0 0; border-left: 3px solid var(--sky); padding: 4px 0 4px 20px; }
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); font-style: italic; }
.testimonial figcaption { margin-top: 10px; font-size: 14px; color: var(--muted-2); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.testimonial__src { color: var(--blue); }