/* ════════════════════════════════════════════════════════════════
   toca.io/legal · additions to the shared toca.health stylesheet.
   Everything structural (tokens, nav, bands, film fold, forms,
   sliders, certs, footer) comes from site.css so the two sites
   stay siblings. Only legal-specific components live here.
   ════════════════════════════════════════════════════════════════ */

/* ── Named firms, where health uses Trust logos ──────────────── */
.proof-bar--names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2xl);
  row-gap: var(--space-md);
  justify-content: flex-start;
  justify-items: start;
  align-items: baseline;
}
.proof-bar--names .firm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw + .5rem, 1.45rem);
  letter-spacing: .01em;
  line-height: 1;
  color: var(--color-ink-2);
  white-space: nowrap;
}

/* ── The estate · HTML grid, not SVG, so it reflows on a phone ─ */
.est { display: grid; margin-top: var(--space-md); }
.est[data-view="before"] .est-panel--after { display: none; }
.est[data-view="after"] .est-panel--before { display: none; }
.est-toggle { display: inline-flex; gap: .4rem; margin-top: var(--space-lg);
  border: 1px solid var(--color-rule); border-radius: 999px; padding: .3rem; background: var(--color-paper-3); }
.est-toggle button { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-ink-2); background: none; border: 0;
  border-radius: 999px; padding: .5rem 1rem; cursor: pointer; }
.est-toggle button.is-on { background: var(--color-ink); color: var(--color-paper); }
.est-panel { animation: estIn .35s ease; }
@keyframes estIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .est-panel { animation: none; } }
.est-panel { margin: 0; }
.est-cap { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin: 0 0 var(--space-md); }
.est-cap b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.45rem; line-height: 1.05; color: var(--color-ink);
}
.est-cap span {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .09em; text-transform: uppercase; color: var(--color-muted);
}
.est-panel--after .est-cap span { color: var(--color-accent-text); }

.est-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .9fr);
  gap: var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-ink);
}
.est-rows { list-style: none; margin: 0; padding: 0; }
.est-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .9fr);
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.est-src { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.est-mid {
  font-size: var(--text-sm); color: var(--color-muted);
  padding-left: var(--space-md);
  border-left: 2px dotted var(--color-rule);
}
.est-panel--after .est-mid {
  color: var(--color-ink); font-weight: 500;
  border-left: 2px solid var(--color-accent-solid);
}
.est-mid small {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; color: var(--color-muted); font-weight: 400;
}
.est-cms { font-size: var(--text-sm); color: var(--color-muted); }
.est-rows li:not(:first-child) .est-cms { visibility: hidden; }
.est-cms b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--color-ink); }
.est-foot { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 760px) {
  .est-head { display: none; }
  .est-rows li { grid-template-columns: 1fr; gap: var(--space-xs); padding: var(--space-lg) 0; }
  .est-mid { padding-left: var(--space-md); }
  .est-rows li .est-cms { display: none; }
  .est-panel > .est-cms-m { display: block; margin-top: var(--space-md); }
}
.est-cms-m { display: none; font-size: var(--text-sm); color: var(--color-muted); }

/* ── The step catalogue ─────────────────────────────────────── */
.cat-scroll { margin-top: var(--space-xl); }
.cat { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-sm); line-height: 1.5; }
.cat thead th {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs);
  letter-spacing: .09em; text-transform: uppercase; color: var(--color-muted);
  padding: 0 var(--space-md) var(--space-sm) 0;
  border-bottom: 2px solid var(--color-ink); vertical-align: bottom;
}
.cat tbody td {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top; color: var(--color-ink-2);
}
.cat tbody tr:last-child td { border-bottom: 1px solid var(--color-ink); }
.cat tbody td:first-child { width: 34%; }
.cat tbody td:nth-child(2) { width: 26%; }
.cat tbody td b { display: block; font-weight: 500; font-size: var(--text-base); line-height: 1.35; color: var(--color-ink); }
.cat tbody td small {
  display: block; margin-top: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted);
}
.cat-by { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .05em; color: var(--color-ink); white-space: nowrap; }
.cat-price { font-family: var(--font-mono); color: var(--color-accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 820px) {
  .cat, .cat tbody, .cat tr, .cat td { display: block; width: auto; }
  .cat thead { position: absolute; left: -9999px; }
  .cat tbody tr { border-bottom: 1px solid var(--color-ink); padding: var(--space-lg) 0; }
  .cat tbody td { border: 0; padding: 0 0 var(--space-xs); width: auto !important; }
  .cat tbody td[data-l]::before {
    content: attr(data-l);
    display: block; margin-bottom: 2px;
    font-family: var(--font-mono); font-size: var(--text-xs);
    letter-spacing: .09em; text-transform: uppercase; color: var(--color-muted);
  }
}

/* ── Cost-per-step calculator ───────────────────────────────── */
.calc-band { background: var(--color-paper-2); }
.calc-answer { border-top: 2px solid var(--color-ink); padding-top: var(--space-lg); }
.calc-answer .model-figs { gap: var(--space-xl); }
.calc-hero b { color: var(--color-accent-text); }
.calc-ev {
  margin: var(--space-lg) 0 0; font-size: var(--text-sm);
  color: var(--color-muted); max-width: 44ch;
}
.calc-ev b { color: var(--color-ink); font-weight: 500; }

/* ── Named-firm stories ─────────────────────────────────────── */
.stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-xl); }
@media (max-width: 800px) { .stories { grid-template-columns: 1fr; } }
.story { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); }
.story-firm { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--color-ink-2); }
.story-firm span { color: var(--color-muted); }
.story h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.05;
  margin: var(--space-xs) 0 var(--space-sm); color: var(--color-ink);
}
.story p { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.story blockquote { margin: 0 0 var(--space-sm); border-left: 2px solid var(--color-accent-solid); padding-left: var(--space-md); }
.story blockquote p { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: var(--color-ink); margin: 0 0 var(--space-2xs); }
.story blockquote cite { font-style: normal; font-size: var(--text-sm); color: var(--color-muted); }
.story-src { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; }
.story-src a { color: var(--color-accent-text); text-decoration: none; border-bottom: 1px solid var(--color-accent-solid); }
.story-src span { color: var(--color-muted); }

/* ── Integration pills ──────────────────────────────────────── */
.intg { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.intg li {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em;
  color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px; padding: .45rem .8rem; background: var(--color-paper-3);
}

/* ── Where the cost hides ───────────────────────────────────── */
.jobs { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-2xl); }
@media (max-width: 760px) { .jobs { grid-template-columns: 1fr; } }
.jobs li { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
.jobs li b { display: block; font-size: var(--text-base); font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-2xs); }

/* On a phone the two-column grid stacks inputs above outputs, which means
   you move a slider and can't see the number it changes. Flip them. */
@media (max-width: 900px) {
  .calc-band .trust-result { display: flex; flex-direction: column; gap: var(--space-2xl); }
  .calc-band .calc-answer { order: -1; }
}

/* the shared summary is a single-line flex row; ours carries a longer hint.
   The flex gap also opens a space before the hint's leading comma —
   "workings , and" — so cancel it. Same artefact exists on toca.health. */
.calc-band .workings > summary { flex-wrap: wrap; row-gap: 0; }
.calc-band .workings > summary .wk-hint { margin-left: -.5em; }

/* the chain is written as three lines; the shared rule doesn't honour \n */
.calc-band .wk-chain { white-space: pre-line; }
@media (max-width: 600px) {
  /* the hint's leading comma looks like a typo once it wraps to its own line */
  .calc-band .workings > summary .wk-hint { display: none; }
}

/* proof bar throughput entries */
.firm--stat { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: .95rem !important; color: var(--color-muted); white-space: nowrap; }
.firm--stat b { color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-right: .35rem; letter-spacing: .01em; }
.cite-note { color: var(--color-muted); font-style: normal; }

.quote--studio { margin: var(--space-lg) 0 var(--space-xl); max-width: 34rem; }

/* ── Sticky demo bar · mobile only ──────────────────────────────────
   The nav is absolutely positioned over the hero, not sticky, so past
   the first fold there was no way to convert without scrolling back.
   Hidden on the contact and thanks pages (already there) and whenever
   a calculator CTA is on screen, so the two never stack. */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta {
    display: flex; position: fixed; z-index: 60;
    left: 0; right: 0; bottom: 0;
    align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--color-ink); color: var(--color-paper);
    border-top: 1px solid rgba(255,255,255,.14);
    transform: translateY(110%); transition: transform .28s ease;
  }
  .sticky-cta.is-on { transform: none; }
  .sticky-cta p { margin: 0; font-size: .82rem; line-height: 1.3; color: #cfc4b3; }
  .sticky-cta .chip {
    flex: none; background: var(--color-accent-solid);
    border-color: var(--color-accent-solid); color: #fff; padding: .55rem 1rem;
  }
  body.has-sticky-cta { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }