/* ==============================================================
   Site standards (2026-09-15). Loaded last on every page, after
   styles.css, the palette layer and each page's own style block.

   1. No trailing arrows (markup change, nothing to style here).
   2. Mono caps only for Bates numbers, exhibit tabs, stamps and data
      labels. Kickers, captions, controls and running text are Geist,
      sentence case.
   3. Floors: 1rem for running text, 0.875rem for labels.
   4. Illustration colors from the tint ramp (see figure color block).
   5. Dark surface state colors: approve #43C99A, running #E8B45A.
   ============================================================== */

:root {
  --text-small: 1rem;        /* was 0.95rem: floor for running text */
  --text-micro: 0.875rem;    /* was 0.72rem: floor for labels */
  --label-track: 0.08em;     /* was 0.14em to 0.22em */
  --on-dark-approve: #43C99A;
  --on-dark-running: #E8B45A;
  --illustration-600: #536176;
  --illustration-500: #7E8CA5;
  --illustration-400: #9AA8C2;
  --illustration-300: #B7C1D3;
  --illustration-200: #D9DFEA;
  --illustration-100: #F5F7FC;
}

/* ---------- Kickers replace the mono caps eyebrows ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--slate);
}
.kicker::before { content: ""; width: 2rem; height: 1px; background: var(--crimson); flex: none; }
.section-head .kicker { margin-bottom: 1.1rem; }
.hero-copy .kicker { margin-bottom: 1.4rem; font-size: 1.06rem; font-weight: 700; color: var(--ink); }
.hero-docket .hero-copy .kicker { order: 1; }
.subhero .kicker { margin-bottom: 1.2rem; }
.pain-panel .kicker { margin-bottom: 1rem; }
.faq-aside .kicker { margin-bottom: 1.1rem; }
.theater .kicker { color: var(--t-slate); }
.video-hero .hero-copy .kicker, .film-subhero .kicker { color: var(--t-ink); }
.video-hero .hero-copy .kicker::before, .film-subhero .kicker::before { background: var(--crimson-action); }
#tools .kicker { color: var(--on-dark-running); }
.video-hero .press .press-caption { color: rgba(233, 237, 244, 0.78); }

/* ---------- Exhibit tabs: the tab holds the label, the figure holds the title ---------- */
.exhibit-tab,
.dark-card .exhibit-tab,
.docket-card .exhibit-tab {
  font-size: 0.875rem;
  letter-spacing: var(--label-track);
  padding: 0.36rem 0.8rem;
  top: -16px;
  white-space: nowrap;
  max-width: none;
}
.ex-title {
  font-family: var(--font-text);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 1.4rem;
  max-width: 62ch;
}
.fig .exhibit-pad > .ex-title { padding-right: 11rem; }
.dark-card .ex-title { color: var(--t-ink); margin: 0.5rem 0 1rem; }
@media (max-width: 640px) {
  .fig .exhibit-pad > .ex-title { padding-right: 0; margin-top: 0.4rem; }
}

/* ---------- Running text: Geist, sentence case, at least 1rem ---------- */
.hero-fn, .price-fn, .faq-fn, .footer-legal p, .copyright, .copyright span,
.fig-caption, .product-status, .trust-item, .record-card-fn, .tr-foot, .nm-desc, .byline, .byline span,
.md-task, .dk-period, .dk-live, .mh-time,
.rb-head > div > span, .rb-total > span:not(.rb-num),
.fn-body p, .folder p, .pr2-out, .pr2-lab p,
.stg2-foot > span, .clk2-key > span, .clk2-zero > span,
.fd-card p, .trg2-box > p, .trg2-labs > span, .trg-box > p {
  font-family: var(--font-text);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}
.fig-caption { line-height: 1.55; }
.byline strong { letter-spacing: normal; }
/* source lists and checklist rows keep their mono face, at the running text floor */
.sources p, .citecheck-row span:not(.ok) { font-size: 1rem; }

/* headings that were set as mono caps */
.pr2-out-col h5, .sh2-col h4, .footer-col h4 {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- Controls and wayfinding: Geist, sentence case, at least 0.875rem ---------- */
.fig-btn, .fig-btn span, .dk-btn, .press-pause, .motion-toggle, .motion-toggle span,
.dp-more summary, .dp-more summary span, .tp-label,
.crumbs, .crumbs a, .crumbs span {
  font-family: var(--font-text);
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- Labels that keep mono caps: stamps, tabs, data labels, at least 0.875rem ---------- */
.moment-head > b, .md-tool, .fs-chip, .md-stamp-btn, .dk-tally > div > span,
.ex2-chip, .ex2-chip b, .rb-time, .rb-state b, .rb-state em, .rb-stamp, .rb-stamp small,
.gate, .soon-flag, .sk-kept, .pr2-hire > span, .pr2-exec,
.stg2-axis > span, .stg2-case small, .stg2-flag, .stg2-day > span, .sh2-chip, .clk2-val,
.fd-role, .founder-role, .trg2-cap, .trg2-who, .trg-cap,
.record-card-head, .ans-table th, .ans-table td[data-label]::before,
.race-scale span, .race-flag, .product-next .label, .citecheck-row .ok {
  font-size: 0.875rem;
  letter-spacing: var(--label-track);
}
/* mono labels in mixed case: case names, times, numbers, the phone number */
.rb-name, .md-tool b, .race-time, .fn-no, .folder-no, .nav-phone, .tr-no, .tr-cap-court {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* step headings in figure 2 and the closing stamp */
.fn-body h4 { font-size: 1.06rem; }
.finale-art .done-stamp { font-size: 1rem; }

/* the sticky phone call to action bar */
.cta-bar-line { font-size: 1rem; }
.cta-bar-sub { font-family: var(--font-text); font-size: 1rem; letter-spacing: normal; text-transform: none; }
.cta-bar .btn-primary { font-size: 0.875rem; }

/* the same floors where the page's own rules are more specific */
.dp-card .md-row .md-tool, .fn .gate, .hub-tile .sk-kept { font-size: 0.875rem; letter-spacing: var(--label-track); }
.dp-card .md-row .md-tool b { font-size: 0.875rem; letter-spacing: 0.02em; }

/* footnote markers */
sup.fn-ref, sup.fn-star, .prose sup, .price-fn sup, .faq-body sup, .fig-caption sup {
  font-size: 0.875rem;
  line-height: 0;
  letter-spacing: normal;
}

/* ---------- Figures refit for the larger labels ---------- */
/* Figure 1: case names never truncate. Wider name column on desktop, name above the bar on phones. */
.rb-rows li { grid-template-columns: minmax(0, 10.5rem) 1fr auto; }
.rb-name { white-space: normal; overflow: visible; text-overflow: clip; }
.rb-stamp { width: max-content; max-width: 88%; text-align: center; }
@media (max-width: 760px) {
  .rb-rows li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3rem; }
  .rb-rows li .rb-name { grid-column: 1; grid-row: 1; }
  .rb-rows li .rb-state { grid-column: 2; grid-row: 1; }
  .rb-rows li .rb-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Figure 3: tiles leave the three column wheel earlier, and go single file on phones */
@media (max-width: 900px) {
  .hub { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .hub-wires { display: none; }
  .hub-core { grid-column: 1 / -1; order: -1; margin-bottom: 0.6rem; }
  .hub-col { display: contents; }
  .hub-tile { grid-template-columns: 48px 1fr; gap: 0.6rem; padding: 0.7rem; min-height: 4.6rem; }
  .hub-tile img, .hub-tile.is-ai .hub-ai, .hub-tile.is-gap .hub-plus { width: 48px; height: 48px; }
  .hub-tile .sk-name { font-size: 1rem; }
  .hub-tile .sk-kept { white-space: normal; }
}
@media (max-width: 560px) {
  .hub { grid-template-columns: minmax(0, 1fr); }
}

/* Figure 4: the cost bar gets the height its 14px segment labels need on phones */
@media (max-width: 560px) {
  .pr2-bar { height: 330px; }
  .pr2-hire span { line-height: 1.2; padding: 0 0.6rem; }
}

/* Figure 5: on narrow screens the timeline stacks, one card per case, stage named above it */
@media (max-width: 900px) {
  .stg2 .stg2-axis { display: none; }
  .stg2 .stg2-lane {
    --x: 0% !important;
    height: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "stage flag" "case case" "trail trail";
    gap: 0.55rem 1rem;
    padding: 0.8rem 0.9rem 0.9rem;
  }
  .stg2 .stg2-lane::before {
    grid-area: stage;
    font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--slate);
  }
  .stg2 .stg2-lane:nth-child(1)::before { content: "Intake"; }
  .stg2 .stg2-lane:nth-child(2)::before { content: "Prelitigation"; }
  .stg2 .stg2-lane:nth-child(3)::before { content: "Litigation"; }
  .stg2 .stg2-case { grid-area: case; position: static; transform: none; white-space: normal; justify-self: start; }
  .stg2 .stg2-case b { font-size: 1rem; }
  .stg2 .stg2-flag { grid-area: flag; position: static; transform: none; align-self: center; }
  .stg2 .stg2-trail { grid-area: trail; position: relative; left: 0; top: auto; transform: none; display: block; height: 8px; }
  body.is-static .stg2 .stg2-trail, body.motion-static .stg2 .stg2-trail { width: 100%; }
  .stg2 .stg2-lanes .stg2-day { position: static; order: -1; width: auto; height: auto; background: none; opacity: 1; animation: none; }
  .stg2 .stg2-lanes .stg2-day span { position: static; }
}

/* ---------- State and figure colors ---------- */
/* finished work on the dark Execute column reads as approved, not running */
.rb-exec .rb-state b { color: var(--on-dark-approve); }
.rb-exec .rb-stamp { color: var(--on-dark-approve); border-color: var(--on-dark-approve); }
/* muted text on dark surfaces: ramp step 400 (7.57:1 on the theater) replaces the off token #7D8CA6 */
.dk-foot, .dk-tally span, .rb-exec .rb-state em, .rb-exec .rb-total span:last-child { color: var(--illustration-400); }

/* ---------- Prelitigation cycle: labels move out of the SVG into HTML ---------- */
.cycle-html { position: relative; max-width: 640px; margin: 0 auto; padding: 2.6rem 0; }
.cycle-html .cyc-ring { position: relative; max-width: 380px; margin: 0 auto; }
.cycle-html svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.cycle-html .cyc-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; max-width: 12ch; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 1.12rem; line-height: 1.3; color: var(--ink);
}
.cycle-html .cyc-steps { list-style: none; margin: 0; padding: 0; }
.cycle-html .cyc-step {
  position: absolute; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--slate);
}
.cycle-html .cyc-top { top: 0; left: 50%; transform: translateX(-50%); }
.cycle-html .cyc-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.cycle-html .cyc-right { left: calc(50% + 200px); top: 50%; transform: translateY(-50%); }
.cycle-html .cyc-left { right: calc(50% + 200px); top: 50%; transform: translateY(-50%); }
@media (max-width: 820px) {
  .cycle-html { padding: 0; }
  .cycle-html .cyc-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin-top: 1.2rem; counter-reset: cyc; }
  .cycle-html .cyc-step { position: static; transform: none; white-space: normal; }
  .cycle-html .cyc-step::before { counter-increment: cyc; content: counter(cyc) ". "; color: var(--crimson); }
}