@keyframes tcFlash {
    0%   { background:rgba(33,69,107,.16); box-shadow:-12px 0 0 rgba(33,69,107,.16); }
    60%  { background:rgba(33,69,107,.16); box-shadow:-12px 0 0 rgba(33,69,107,.16); }
    100% { background:transparent; box-shadow:-12px 0 0 transparent; }
  }
  section.tc-flash > h2 { animation: tcFlash 3.1s ease-out 1; border-radius:3px; }
  a.tc-navlink:hover { background:#efe8da !important; }
  a.tc-toclink:hover span:last-child { color:#181410 !important; }
  a.tc-toclink.is-active span:last-child { color:#21456B !important; font-weight:600; }
  a.tc-toclink.is-active span:first-child { color:#21456B !important; }
  .tc-poplist a:last-child { border-bottom:none !important; }
  a.tc-artlink { text-decoration:none; color:#181410; }
  a.tc-artlink:hover .tc-arttitle { color:#21456B; }
  input.tc-srch { font-family:'Spline Sans',sans-serif; font-size:15px; color:#181410; background:#fff; border:1px solid #e2dac9; border-radius:5px; width:100%; outline:none; }
  input.tc-srch:focus { border-color:#21456B; }
  .tc-actbtn { display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; color:#46403a; background:#fff; border:1px solid #d8cfbe; border-radius:5px; padding:8px 13px; cursor:pointer; text-decoration:none; }
  .tc-actbtn:hover { border-color:#21456B; color:#21456B; }

  /* ── Layout containers (REQ-593) ────────────────────────────────────────
     The owner opened letterbatch.com/trust on her phone and the content ran
     off the right edge. The fix moved ONLY the layout properties of the
     handful of containers below out of their inline styles and into these
     classes — every other inline style on those elements, and every other
     element on the page, is untouched.

     READ THE DESKTOP RULES AS A TRANSCRIPT: each one reproduces exactly what
     the inline style it replaced already computed to, because the owner's
     lift-and-shift ruling ("no differences") still binds at desktop. All new
     behavior lives in the media queries below. Changing a desktop value here
     is changing the approved desktop design. */
  .tc-headbar   { max-width:1200px; margin:0 auto; padding:0 40px; display:flex; align-items:center; gap:16px; height:68px; }
  .tc-headnav   { margin-left:auto; display:flex; align-items:center; gap:26px; }
  .tc-shell     { max-width:1200px; margin:0 auto; padding:44px 40px 0; display:grid; grid-template-columns:248px 1fr; gap:48px; align-items:start; }
  .tc-side      { position:sticky; top:104px; }
  .tc-rail      { position:sticky; top:104px; }
  .tc-cards     { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .tc-vidcards  { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .tc-split     { display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:start; }
  .tc-doc       { display:grid; grid-template-columns:1fr 200px; gap:44px; align-items:start; }
  .tc-legaldoc  { display:grid; grid-template-columns:1fr 196px; gap:40px; align-items:start; }
  .tc-posture   { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .tc-actions   { display:flex; gap:8px; }
  .tc-tablescroll { overflow:hidden; }
  .tc-statusbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
  .tc-statusact { text-align:right; flex:0 0 auto; }
  .tc-statusfoot { display:flex; justify-content:space-between; }

  /* Tablet and below: the sidebar and every right rail stop being columns and
     become sections stacked above/below the thing they describe. A sticky rail
     in a stacked layout would pin a nav block over the content it links to, so
     sticky is released at the same breakpoint that stacks it. */
  @media (max-width: 900px) {
    .tc-shell    { grid-template-columns:1fr; gap:28px; padding:28px 24px 0; }
    .tc-side     { position:static; top:auto; }
    .tc-rail     { position:static; top:auto; }
    .tc-doc      { grid-template-columns:1fr; gap:26px; }
    .tc-legaldoc { grid-template-columns:1fr; gap:26px; }
    .tc-split    { grid-template-columns:1fr; gap:24px; }
    .tc-posture  { grid-template-columns:repeat(2,1fr); }
  }

  /* Phone: one column of cards, a header that wraps to two rows rather than
     dropping a link, and a subprocessor table that scrolls inside its OWN box
     (docs/specs/ui-tables.md — wide content scrolls in its container; the page
     never scrolls sideways). The table keeps a min-width so the columns stay
     readable instead of being squeezed into unreadable slivers — reachable by
     scrolling beats present but illegible. */
  @media (max-width: 640px) {
    .tc-headbar  { flex-wrap:wrap; height:auto; padding:12px 20px; row-gap:12px; }
    .tc-headnav  { margin-left:0; width:100%; gap:10px; justify-content:space-between; }
    .tc-shell    { padding:24px 18px 0; gap:24px; }
    .tc-cards    { grid-template-columns:1fr; }
    .tc-vidcards { grid-template-columns:1fr; }
    .tc-actions  { flex-wrap:wrap; }
    .tc-tablescroll { overflow-x:auto; overflow-y:hidden; }
    .tc-tablescroll table { min-width:560px; }
    .tc-statusbar { flex-direction:column; align-items:stretch; }
    .tc-statusact { text-align:left; }
    .tc-statusfoot { flex-wrap:wrap; gap:12px; }
  }

  @media (max-width: 460px) {
    .tc-posture { grid-template-columns:1fr; }
  }