/* Throughline component kit v1 (themed) -- INTERNAL, BRG-gated, ships nothing public.
 * Consumes the design-token manifest. Every brand value reads via var(--tl-...).
 * No hardcoded brand hexes, sizes, families, or spacing where a token exists.
 * House style: zero em dashes (commas, periods, parentheses only). Holds in comments too.
 *
 * Posture the CSS serves: a craft studio that keeps receipts, not a startup that raised a round.
 * One accent (burnt clay), reserved for CTAs and the inspect affordance. One soft shadow at most.
 * Hairline borders, tight editorial corners. If it reads like a SaaS landing page, it is wrong.
 *
 * Pairs with tokens-v1.css (referenced, never copied). Dark mode is token-driven, so it just works.
 */

/* Tokens are the source of truth. scaffold.html links tokens-v1.css before this file.
 * @import kept as a belt-and-suspenders fallback so kit.css renders standalone in a pinch. */
@import url("../../brandbook/tokens-v1.css");

/* ---------------------------------------------------------------------------
 * Self-hosted fonts (production requirement).
 * The .woff2 files (Fraunces, Hanken Grotesk, IBM Plex Mono, all open-licensed)
 * get dropped into ./fonts/ at build time. These @font-face stubs declare the
 * families so the production build is one drop-in away. Until the files land,
 * the token fallback stack (Georgia / system-ui / ui-monospace) renders fine.
 * Stubs are commented out so the scaffold does not 404 on missing font files.
 * ------------------------------------------------------------------------- */
/*
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-variable.woff2") format("woff2-variations");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
*/

/* ---------------------------------------------------------------------------
 * Reset + base (token-driven)
 * ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--tl-color-surface);
  color: var(--tl-color-ink);
  font-family: var(--tl-type-body);
  font-size: var(--tl-text-body-size);
  line-height: var(--tl-text-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--tl-color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--tl-color-accent); }

:focus-visible {
  outline: 2px solid var(--tl-color-accent);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--tl-color-border);
  margin: var(--tl-space-7) 0;
}

/* ---------------------------------------------------------------------------
 * Typography scale (every size/line-height is a token)
 * ------------------------------------------------------------------------- */
.tl-display {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-display-size);
  line-height: var(--tl-text-display-lh);
  letter-spacing: -0.02em;
  margin: 0;
}
h1, .tl-h1 {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h1-size);
  line-height: var(--tl-text-h1-lh);
  letter-spacing: -0.015em;
  margin: 0 0 var(--tl-space-4);
}
h2, .tl-h2 {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h2-size);
  line-height: var(--tl-text-h2-lh);
  margin: 0 0 var(--tl-space-4);
}
h3, .tl-h3 {
  font-family: var(--tl-type-body);
  font-weight: 600;
  font-size: var(--tl-text-h3-size);
  line-height: var(--tl-text-h3-lh);
  margin: 0 0 var(--tl-space-3);
}
.tl-lead {
  font-size: var(--tl-text-lead-size);
  line-height: var(--tl-text-lead-lh);
  color: var(--tl-color-muted);
  margin: 0 0 var(--tl-space-5);
  max-width: var(--tl-measure);
}
p { margin: 0 0 var(--tl-space-4); max-width: var(--tl-measure); }
.tl-small { font-size: var(--tl-text-small-size); line-height: var(--tl-text-small-lh); }
.tl-muted { color: var(--tl-color-muted); }

/* The receipt/proof face. Mono, tabular figures, ledger aesthetic. */
.tl-receipt-type {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-receipt-size);
  line-height: var(--tl-text-receipt-lh);
  font-variant-numeric: tabular-nums;
}
.tl-num { font-variant-numeric: tabular-nums; }

/* Eyebrow/kicker label, mono, used above section headings. */
.tl-eyebrow {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-color-muted);
  margin: 0 0 var(--tl-space-3);
}

/* ---------------------------------------------------------------------------
 * Layout: container + grid (uses --tl-container-max + breakpoints)
 * ------------------------------------------------------------------------- */
.tl-container {
  width: 100%;
  max-width: var(--tl-container-max);
  margin-inline: auto;
  padding-inline: var(--tl-space-5);
}
.tl-section { padding-block: var(--tl-space-9); }
.tl-section--tight { padding-block: var(--tl-space-7); }

.tl-grid { display: grid; gap: var(--tl-space-6); }
.tl-grid--2 { grid-template-columns: 1fr; }
.tl-grid--3 { grid-template-columns: 1fr; }

@media (min-width: 768px) { /* --tl-bp-md */
  .tl-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .tl-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .tl-container { padding-inline: var(--tl-space-6); }
}

/* ---------------------------------------------------------------------------
 * Logo lockup helpers (currentColor SVGs; clearspace + min-size from tokens)
 * ------------------------------------------------------------------------- */
.tl-wordmark { display: inline-block; color: var(--tl-color-ink); min-width: var(--tl-logo-wordmark-min); }
.tl-wordmark svg { width: 180px; height: auto; }
.tl-glyph { display: inline-block; color: var(--tl-color-ink); }
.tl-glyph svg { width: var(--tl-logo-glyph-min); height: var(--tl-logo-glyph-min); }
/* Accent may color the line stroke alone as emphasis; never recolor the wordmark text. */
.tl-wordmark--accent-rule .tl-rule { stroke: var(--tl-color-accent); }
/* Reverse lockup: render on primary/dark, set color to surface. */
.tl-on-dark .tl-wordmark, .tl-on-dark .tl-glyph { color: var(--tl-color-surface); }

/* ---------------------------------------------------------------------------
 * Buttons (CtaButton). The accent is reserved for the primary CTA.
 * ------------------------------------------------------------------------- */
.tl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tl-space-2);
  font-family: var(--tl-type-body);
  font-weight: 600;
  font-size: var(--tl-text-body-size);
  line-height: 1;
  padding: var(--tl-space-3) var(--tl-space-5);
  border-radius: var(--tl-radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tl-btn--primary {
  background: var(--tl-color-accent);
  color: var(--tl-color-surface);
}
.tl-btn--primary:hover { background: var(--tl-color-primary); color: var(--tl-color-surface); }
.tl-btn--secondary {
  background: transparent;
  color: var(--tl-color-primary);
  border-color: var(--tl-color-border);
}
.tl-btn--secondary:hover { border-color: var(--tl-color-primary); color: var(--tl-color-primary); }
/* The "inspect" affordance also earns the accent (it is a proof gesture). */
.tl-inspect {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  color: var(--tl-color-accent);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.tl-inspect::before { content: "\2192  "; } /* arrow, not an em dash */
.tl-inspect:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Global shell: header / primary nav
 * ------------------------------------------------------------------------- */
.tl-header {
  border-bottom: 1px solid var(--tl-color-border);
  background: var(--tl-color-surface);
  position: sticky;
  top: 0;
  z-index: 50;
}
.tl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-5);
  padding-block: var(--tl-space-4);
}
.tl-nav { display: flex; align-items: center; gap: var(--tl-space-6); }
.tl-nav__list {
  display: flex;
  align-items: center;
  gap: var(--tl-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-nav__link {
  font-family: var(--tl-type-body);
  font-weight: 500;
  font-size: var(--tl-text-body-size);
  color: var(--tl-color-ink);
  text-decoration: none;
}
.tl-nav__link:hover { color: var(--tl-color-accent); }
.tl-nav__dropdown { position: relative; }
.tl-nav__dropdown-label::after { content: " \25BE"; color: var(--tl-color-muted); } /* small caret */
.tl-nav__menu {
  margin: var(--tl-space-3) 0 0;
  padding: var(--tl-space-3);
  list-style: none;
  border: 1px solid var(--tl-color-border);
  border-radius: var(--tl-radius-md);
  background: var(--tl-color-surface-raised);
}
.tl-nav__menu li { margin: 0; }
.tl-nav__menu a {
  display: block;
  padding: var(--tl-space-2) var(--tl-space-3);
  text-decoration: none;
  color: var(--tl-color-ink);
  border-radius: var(--tl-radius-sm);
}
.tl-nav__menu a:hover { background: var(--tl-color-surface); color: var(--tl-color-accent); }

.tl-nav__toggle { display: none; }

@media (max-width: 767px) { /* below --tl-bp-md: nav collapses to one control */
  .tl-nav__list { display: none; }
  .tl-nav__toggle {
    display: inline-flex;
    background: transparent;
    border: 1px solid var(--tl-color-border);
    border-radius: var(--tl-radius-sm);
    padding: var(--tl-space-2) var(--tl-space-3);
    font-family: var(--tl-type-body);
    color: var(--tl-color-ink);
    cursor: pointer;
  }
}

/* ---------------------------------------------------------------------------
 * Global shell: footer (+ agent roster strip, held dark)
 * ------------------------------------------------------------------------- */
.tl-footer {
  border-top: 1px solid var(--tl-color-border);
  background: var(--tl-color-surface);
  padding-block: var(--tl-space-8) var(--tl-space-7);
  margin-top: var(--tl-space-9);
}
.tl-footer__boilerplate {
  font-family: var(--tl-type-display);
  font-size: var(--tl-text-h3-size);
  line-height: var(--tl-text-h3-lh);
  max-width: 36ch;
  margin: 0 0 var(--tl-space-6);
}
.tl-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-6);
}
@media (min-width: 768px) {
  .tl-footer__cols { grid-template-columns: 2fr 1fr 1fr; }
}
.tl-footer__nav { list-style: none; margin: 0; padding: 0; }
.tl-footer__nav li { margin: 0 0 var(--tl-space-2); }
.tl-footer__nav a { color: var(--tl-color-muted); text-decoration: none; font-size: var(--tl-text-small-size); }
.tl-footer__nav a:hover { color: var(--tl-color-accent); }
.tl-footer__legal {
  margin-top: var(--tl-space-7);
  padding-top: var(--tl-space-5);
  border-top: 1px solid var(--tl-color-border);
  color: var(--tl-color-muted);
  font-size: var(--tl-text-small-size);
}

/* ---------------------------------------------------------------------------
 * HELD-DARK feature flag. Three surfaces ship review-ready but visibly NOT live.
 * AgentRoster (full), footer roster strip, AskAgency: held until the named-agents
 * brief (owed Jae) + Fidelity-7 clear. DiagnosticWidget uses a sibling "coming" state.
 * ------------------------------------------------------------------------- */
.tl-held-dark {
  position: relative;
  filter: grayscale(1);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  border: 1px dashed var(--tl-color-border);
  border-radius: var(--tl-radius-md);
  padding: var(--tl-space-6);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      rgba(110, 104, 94, 0.05) 14px 28px
    );
}
.tl-held-dark__banner {
  position: absolute;
  top: var(--tl-space-3);
  right: var(--tl-space-3);
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tl-color-warning);
  border: 1px solid var(--tl-color-warning);
  border-radius: var(--tl-radius-sm);
  padding: var(--tl-space-1) var(--tl-space-2);
  background: var(--tl-color-surface);
}

/* "Coming, gated" placeholder (DiagnosticWidget, AskAgency mount when off). */
.tl-coming {
  border: 1px dashed var(--tl-color-border);
  border-radius: var(--tl-radius-md);
  padding: var(--tl-space-8) var(--tl-space-6);
  text-align: center;
  color: var(--tl-color-muted);
  background: var(--tl-color-surface-raised);
}
.tl-coming__tag {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-color-warning);
  margin: 0 0 var(--tl-space-3);
}

/* ---------------------------------------------------------------------------
 * HeroSplit (home, product lines): headline + subhead + CTAs | media
 * ------------------------------------------------------------------------- */
.tl-hero-split { padding-block: var(--tl-space-10) var(--tl-space-9); }
.tl-hero-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-7);
  align-items: center;
}
@media (min-width: 1024px) { /* --tl-bp-lg */
  .tl-hero-split__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.tl-hero-split__headline {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-display-size);
  line-height: var(--tl-text-display-lh);
  letter-spacing: -0.02em;
  margin: 0 0 var(--tl-space-5);
}
.tl-hero-split__sub {
  font-size: var(--tl-text-lead-size);
  line-height: var(--tl-text-lead-lh);
  color: var(--tl-color-muted);
  max-width: var(--tl-measure);
  margin: 0 0 var(--tl-space-6);
}
.tl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tl-space-4); }
/* Type-and-space brand: media slot is a framed placeholder, never stock or AI imagery. */
.tl-hero-split__media {
  border: 1px solid var(--tl-color-border);
  border-radius: var(--tl-radius-lg);
  background: var(--tl-color-surface-raised);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tl-color-muted);
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  text-align: center;
  padding: var(--tl-space-6);
}

/* ---------------------------------------------------------------------------
 * HeroSimple (receipts, how-it-works, contact, diagnostic)
 * ------------------------------------------------------------------------- */
.tl-hero-simple { padding-block: var(--tl-space-9) var(--tl-space-7); }
.tl-hero-simple__headline {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h1-size);
  line-height: var(--tl-text-h1-lh);
  letter-spacing: -0.015em;
  margin: 0 0 var(--tl-space-4);
  max-width: 20ch;
}
.tl-hero-simple__sub {
  font-size: var(--tl-text-lead-size);
  line-height: var(--tl-text-lead-lh);
  color: var(--tl-color-muted);
  max-width: var(--tl-measure);
  margin: 0 0 var(--tl-space-5);
}

/* ---------------------------------------------------------------------------
 * ClaimPair (home): the two competitive walls, side by side
 * ------------------------------------------------------------------------- */
.tl-claimpair { display: grid; grid-template-columns: 1fr; gap: var(--tl-space-6); }
@media (min-width: 768px) { .tl-claimpair { grid-template-columns: repeat(2, 1fr); } }
.tl-claim {
  border-left: 2px solid var(--tl-color-accent);
  padding-left: var(--tl-space-5);
}
.tl-claim__title {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h3-size);
  line-height: 1.2;
  margin: 0 0 var(--tl-space-3);
}
.tl-claim__body { color: var(--tl-color-muted); margin: 0; }

/* ---------------------------------------------------------------------------
 * ReceiptStrip / ReceiptGrid: dated, numbered, inspectable proof cards
 * Empty-safe by rule: when no data, render nothing (handled in markup/JS).
 * ------------------------------------------------------------------------- */
.tl-receipt-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-5);
}
@media (min-width: 768px) {
  .tl-receipt-strip { grid-template-columns: repeat(3, 1fr); }
}
.tl-receipt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-5);
}
@media (min-width: 768px) { .tl-receipt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tl-receipt-grid { grid-template-columns: repeat(3, 1fr); } }

.tl-receipt {
  border: 1px solid var(--tl-color-border);
  border-radius: var(--tl-radius-md);
  background: var(--tl-color-surface-raised);
  padding: var(--tl-space-5);
  box-shadow: var(--tl-shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--tl-space-3);
}
.tl-receipt__meta {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  color: var(--tl-color-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  gap: var(--tl-space-3);
}
.tl-receipt__result {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-receipt-size);
  line-height: var(--tl-text-receipt-lh);
  font-variant-numeric: tabular-nums;
  color: var(--tl-color-ink);
  margin: 0;
}
.tl-receipt__client { font-weight: 600; }

/* ---------------------------------------------------------------------------
 * CaseStudy (/receipts/<client>): situation, ran, receipts[], debrief link
 * ------------------------------------------------------------------------- */
.tl-casestudy { display: grid; gap: var(--tl-space-6); max-width: var(--tl-measure); }
.tl-casestudy__section h3 { margin-bottom: var(--tl-space-2); }
.tl-casestudy__receipts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tl-space-3);
}
.tl-casestudy__receipts li {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-receipt-size);
  font-variant-numeric: tabular-nums;
  border-left: 2px solid var(--tl-color-accent);
  padding-left: var(--tl-space-4);
}

/* ---------------------------------------------------------------------------
 * StepRow (home, product lines, how-it-works): ordered operating beats
 * ------------------------------------------------------------------------- */
.tl-steprow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-6);
  counter-reset: tl-step;
}
@media (min-width: 768px) { .tl-steprow { grid-template-columns: repeat(3, 1fr); } }
.tl-step { counter-increment: tl-step; }
.tl-step__num {
  font-family: var(--tl-type-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--tl-text-small-size);
  color: var(--tl-color-accent);
}
.tl-step__num::before { content: counter(tl-step, decimal-leading-zero); }
.tl-step__label {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h3-size);
  margin: var(--tl-space-2) 0 var(--tl-space-2);
}
.tl-step__body { color: var(--tl-color-muted); margin: 0; }

/* ---------------------------------------------------------------------------
 * FounderBand (home/about light, product-line medium): named-principal provenance
 * Big presence by provenance, never portraiture. portrait slot = receipt, not a face.
 * ------------------------------------------------------------------------- */
.tl-founderband {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-6);
  align-items: start;
  border-top: 1px solid var(--tl-color-border);
  border-bottom: 1px solid var(--tl-color-border);
  padding-block: var(--tl-space-7);
}
@media (min-width: 768px) { .tl-founderband { grid-template-columns: 1fr 2fr; } }
.tl-founderband--light { padding-block: var(--tl-space-6); } /* home depth: named and visible, not hero-sized (manifest item 7) */
.tl-founderband--medium { background: var(--tl-color-surface-raised); padding-inline: var(--tl-space-6); border-radius: var(--tl-radius-md); }
.tl-founderband__name {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h2-size);
  line-height: 1.05;
  margin: 0 0 var(--tl-space-2);
}
.tl-founderband__role {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tl-color-muted);
  margin: 0 0 var(--tl-space-4);
}
.tl-founderband__bio { color: var(--tl-color-muted); }
/* Provenance receipt block: a credential ledger, not an aspirational portrait. */
.tl-founderband__provenance {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-receipt-size);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--tl-color-border);
  border-radius: var(--tl-radius-sm);
  padding: var(--tl-space-4);
  background: var(--tl-color-surface);
  list-style: none;
  margin: 0;
  display: grid;
  gap: var(--tl-space-2);
}

/* ---------------------------------------------------------------------------
 * FounderProvenance (/cmo only, deep, full-width): provenance IS the product
 * ------------------------------------------------------------------------- */
.tl-provenance { padding-block: var(--tl-space-9); }
.tl-provenance__lead {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h1-size);
  line-height: var(--tl-text-h1-lh);
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 0 var(--tl-space-6);
}
.tl-provenance__ledger {
  border-top: 2px solid var(--tl-color-ink);
  margin-top: var(--tl-space-6);
}
.tl-provenance__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-2);
  padding-block: var(--tl-space-4);
  border-bottom: 1px solid var(--tl-color-border);
}
@media (min-width: 768px) { .tl-provenance__row { grid-template-columns: 140px 1fr; gap: var(--tl-space-6); } }
.tl-provenance__date {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-receipt-size);
  font-variant-numeric: tabular-nums;
  color: var(--tl-color-accent);
}
.tl-provenance__entry { margin: 0; }

/* ---------------------------------------------------------------------------
 * CardTrio (home): three product-line cards, launch SKU leads
 * ------------------------------------------------------------------------- */
.tl-cardtrio { display: grid; grid-template-columns: 1fr; gap: var(--tl-space-5); }
@media (min-width: 768px) { .tl-cardtrio { grid-template-columns: repeat(3, 1fr); } }
.tl-card {
  border: 1px solid var(--tl-color-border);
  border-radius: var(--tl-radius-md);
  background: var(--tl-color-surface-raised);
  padding: var(--tl-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--tl-space-3);
  text-decoration: none;
  color: var(--tl-color-ink);
  transition: border-color 120ms ease;
}
.tl-card:hover { border-color: var(--tl-color-primary); color: var(--tl-color-ink); }
.tl-card--lead { border-color: var(--tl-color-accent); }
.tl-card--lead .tl-card__lead-tag {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tl-color-accent);
}
.tl-card__title { font-family: var(--tl-type-display); font-weight: 500; font-size: var(--tl-text-h3-size); margin: 0; }
.tl-card__blurb { color: var(--tl-color-muted); margin: 0; flex: 1; }

/* ---------------------------------------------------------------------------
 * FeatureStack (product lines): what it is / what you get
 * ------------------------------------------------------------------------- */
.tl-featurestack { display: grid; gap: var(--tl-space-5); max-width: var(--tl-measure); }
.tl-feature {
  display: grid;
  grid-template-columns: var(--tl-space-6) 1fr;
  gap: var(--tl-space-4);
  align-items: start;
  padding-block: var(--tl-space-4);
  border-bottom: 1px solid var(--tl-color-border);
}
.tl-feature__mark {
  font-family: var(--tl-type-mono);
  color: var(--tl-color-accent);
  font-size: var(--tl-text-h3-size);
  line-height: 1;
}
.tl-feature__title { font-weight: 600; margin: 0 0 var(--tl-space-1); }
.tl-feature__body { color: var(--tl-color-muted); margin: 0; }

/* ---------------------------------------------------------------------------
 * PricingLadder (product lines): renders the ladder SHAPE with no prices when unpriced
 * ------------------------------------------------------------------------- */
.tl-ladder { display: grid; grid-template-columns: 1fr; gap: var(--tl-space-4); }
@media (min-width: 768px) { .tl-ladder { grid-template-columns: repeat(4, 1fr); align-items: stretch; } }
.tl-rung {
  border: 1px solid var(--tl-color-border);
  border-radius: var(--tl-radius-md);
  background: var(--tl-color-surface-raised);
  padding: var(--tl-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tl-space-2);
}
.tl-rung__step {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  color: var(--tl-color-muted);
  font-variant-numeric: tabular-nums;
}
.tl-rung__name { font-family: var(--tl-type-display); font-weight: 500; font-size: var(--tl-text-h3-size); margin: 0; }
.tl-rung__scope { color: var(--tl-color-muted); font-size: var(--tl-text-small-size); margin: 0; flex: 1; }
.tl-rung__price {
  font-family: var(--tl-type-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--tl-text-receipt-size);
  color: var(--tl-color-ink);
}
/* Unpriced state: a develop-then-approve note, not a fake number. */
.tl-rung__price--unset {
  color: var(--tl-color-warning);
  font-style: normal;
}
.tl-rung--free { border-color: var(--tl-color-accent); }

/* ---------------------------------------------------------------------------
 * AgentRoster (nameplate/masthead register, item 6): Name + Role + Owns + monogram
 * NO avatars, NO emoji. Full roster (how-it-works) ships HELD DARK.
 * ------------------------------------------------------------------------- */
.tl-roster { display: grid; grid-template-columns: 1fr; gap: var(--tl-space-5); }
@media (min-width: 768px) { .tl-roster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tl-roster { grid-template-columns: repeat(3, 1fr); } }
.tl-nameplate {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tl-space-4);
  align-items: start;
  border-top: 2px solid var(--tl-color-ink);
  padding-top: var(--tl-space-4);
}
/* Typographic monogram, not an avatar: the agent initial set in the display face. */
.tl-nameplate__monogram {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h2-size);
  line-height: 1;
  color: var(--tl-color-primary);
  width: 1.6em;
  text-align: center;
}
.tl-nameplate__name {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h3-size);
  margin: 0;
}
.tl-nameplate__role {
  font-family: var(--tl-type-body);
  font-weight: 600;
  font-size: var(--tl-text-small-size);
  color: var(--tl-color-muted);
  margin: 0 0 var(--tl-space-2);
}
.tl-nameplate__owns {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  line-height: var(--tl-text-small-lh);
  color: var(--tl-color-ink);
  margin: 0;
}
.tl-nameplate__owns-label { color: var(--tl-color-muted); }

/* Footer roster strip (compact nameplate row). Also ships HELD DARK. */
.tl-roster-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tl-space-4);
}
@media (min-width: 480px) { .tl-roster-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tl-roster-strip { grid-template-columns: repeat(4, 1fr); } }
.tl-roster-strip__item { border-top: 1px solid var(--tl-color-border); padding-top: var(--tl-space-2); }
.tl-roster-strip__name { font-family: var(--tl-type-display); font-weight: 500; font-size: var(--tl-text-body-size); margin: 0; }
.tl-roster-strip__role { font-family: var(--tl-type-mono); font-size: var(--tl-text-small-size); color: var(--tl-color-muted); margin: 0; }

/* ---------------------------------------------------------------------------
 * NotList (about): the five NOTs, affirmed
 * ------------------------------------------------------------------------- */
.tl-notlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tl-space-5); }
.tl-not {
  border-left: 2px solid var(--tl-color-border);
  padding-left: var(--tl-space-5);
}
.tl-not__claim {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h3-size);
  margin: 0 0 var(--tl-space-2);
}
.tl-not__claim::before {
  content: "NOT ";
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  color: var(--tl-color-accent);
  letter-spacing: 0.04em;
}
.tl-not__body { color: var(--tl-color-muted); margin: 0; }

/* ---------------------------------------------------------------------------
 * ProseBlock / PostList / PostDetail: editorial reading, measure protected
 * ------------------------------------------------------------------------- */
.tl-prose { max-width: var(--tl-measure); }
.tl-prose p, .tl-prose ul, .tl-prose ol { max-width: var(--tl-measure); }
.tl-prose h2, .tl-prose h3 { margin-top: var(--tl-space-6); }
.tl-prose blockquote {
  margin: var(--tl-space-5) 0;
  padding-left: var(--tl-space-5);
  border-left: 2px solid var(--tl-color-accent);
  font-family: var(--tl-type-display);
  font-size: var(--tl-text-lead-size);
  color: var(--tl-color-ink);
}

.tl-postlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tl-space-5); }
.tl-post-item {
  border-bottom: 1px solid var(--tl-color-border);
  padding-bottom: var(--tl-space-5);
}
.tl-post-item__date {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  font-variant-numeric: tabular-nums;
  color: var(--tl-color-muted);
}
.tl-post-item__title { font-family: var(--tl-type-display); font-weight: 500; font-size: var(--tl-text-h3-size); margin: var(--tl-space-2) 0; }
.tl-post-item__title a { text-decoration: none; color: var(--tl-color-ink); }
.tl-post-item__title a:hover { color: var(--tl-color-accent); }
.tl-post-item__excerpt { color: var(--tl-color-muted); margin: 0; }

.tl-postdetail { max-width: var(--tl-measure); }
.tl-postdetail__meta {
  font-family: var(--tl-type-mono);
  font-size: var(--tl-text-small-size);
  font-variant-numeric: tabular-nums;
  color: var(--tl-color-muted);
  margin: 0 0 var(--tl-space-5);
}

/* ---------------------------------------------------------------------------
 * CtaBand (global): closing call, one primary accent CTA
 * ------------------------------------------------------------------------- */
.tl-ctaband {
  background: var(--tl-color-primary);
  color: var(--tl-color-surface);
  border-radius: var(--tl-radius-lg);
  padding: var(--tl-space-8) var(--tl-space-7);
  text-align: center;
}
.tl-ctaband__title {
  font-family: var(--tl-type-display);
  font-weight: 500;
  font-size: var(--tl-text-h2-size);
  line-height: var(--tl-text-h2-lh);
  color: var(--tl-color-surface);
  margin: 0 0 var(--tl-space-5);
}
.tl-ctaband .tl-btn--secondary {
  color: var(--tl-color-surface);
  border-color: var(--tl-color-surface);
}
.tl-ctaband .tl-btn--secondary:hover { background: var(--tl-color-surface); color: var(--tl-color-primary); }
.tl-ctaband__actions { display: flex; gap: var(--tl-space-4); justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
 * ContactForm: first-touch capture (routes to Head of Client Services)
 * ------------------------------------------------------------------------- */
.tl-form { max-width: 36rem; display: grid; gap: var(--tl-space-5); }
.tl-field { display: grid; gap: var(--tl-space-2); }
.tl-field__label {
  font-family: var(--tl-type-body);
  font-weight: 600;
  font-size: var(--tl-text-small-size);
}
.tl-field__input, .tl-field__textarea {
  font-family: var(--tl-type-body);
  font-size: var(--tl-text-body-size);
  color: var(--tl-color-ink);
  background: var(--tl-color-surface-raised);
  border: 1px solid var(--tl-color-border);
  border-radius: var(--tl-radius-sm);
  padding: var(--tl-space-3) var(--tl-space-4);
}
.tl-field__input:focus, .tl-field__textarea:focus {
  border-color: var(--tl-color-primary);
  outline: 2px solid var(--tl-color-accent);
  outline-offset: 1px;
}
.tl-field__textarea { min-height: 8rem; resize: vertical; }
.tl-field__hint { font-size: var(--tl-text-small-size); color: var(--tl-color-muted); }
.tl-form__success { color: var(--tl-color-success); font-weight: 600; }
.tl-form__error { color: var(--tl-color-error); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * DiagnosticWidget mount + AskAgency docked mount.
 * DiagnosticWidget: "coming, gated on 3 clean runs" placeholder (not live).
 * AskAgency: held-dark docked control (named-agent surface, Fidelity-7 gate).
 * ------------------------------------------------------------------------- */
.tl-diagnostic-mount { /* the route reserves the slot; widget JS hydrates post-gate */ }

.tl-askagency-dock {
  position: fixed;
  right: var(--tl-space-5);
  bottom: var(--tl-space-5);
  max-width: 280px;
  z-index: 60;
}
.tl-askagency-dock .tl-held-dark { padding: var(--tl-space-5); }
.tl-askagency__control {
  font-family: var(--tl-type-body);
  font-weight: 600;
  font-size: var(--tl-text-small-size);
  color: var(--tl-color-surface);
  background: var(--tl-color-primary);
  border-radius: var(--tl-radius-pill);
  padding: var(--tl-space-3) var(--tl-space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--tl-space-2);
}

/* ---------------------------------------------------------------------------
 * Photography beds (Wave 3 wiring). Supporting, restrained prominence:
 * type and the through-line rule always read first. Images never overflow.
 * ------------------------------------------------------------------------- */
.tl-hero-split__bed,
.tl-section__bed,
.tl-founderband__bed {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tl-radius-md, 8px);
}
.tl-section__bed {
  max-width: 720px;
  margin: 0 0 var(--tl-space-6, 2rem);
}
.tl-section__bed--mood { opacity: 0.9; }
.tl-founderband__bed {
  max-width: 300px;
  margin-top: var(--tl-space-4, 1rem);
}
.tl-hero-split__bed { max-width: 100%; }

/* ---------------------------------------------------------------------------
 * Home hero photographic treatment (woven-seam canonical, added 2026-06-21).
 * Type-first elegance preserved: left column reads first; the photo warms the
 * media slot with human energy. Edge-to-edge cover, warm scrim holds caption.
 * ------------------------------------------------------------------------- */
.tl-hero-split__media--photo {
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 380px;
  border-color: var(--tl-color-border);
}
.tl-hero-split__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% center;
  display: block;
}
.tl-hero-split__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--tl-space-6) var(--tl-space-5) var(--tl-space-4);
  color: #fff;
  background: linear-gradient(to top, rgba(38, 26, 18, 0.78), rgba(38, 26, 18, 0));
  text-align: left;
}
@media (max-width: 1023px) {
  .tl-hero-split__media--photo { min-height: 280px; }
}