.dir-shell { max-width: 1100px; margin: 0 auto; padding: 28px; }
  /* Left-align the hero — the shared marketing .hero centers text; directory
     pages must read as a left-aligned page/company card, never centered. */
  /* Section keeps only vertical padding; the full-width gradient bg still spans
     edge-to-edge (via .hero::before). All horizontal work lives on the inner
     container so it mirrors .dir-shell's content column exactly (same max-width,
     same margin:0 auto centering, same 28px inset) → header and body cards share
     one left edge at every width. */
  .dir-hero { padding: 40px 0 22px; text-align: left; }
  .dir-hero .container-narrow { max-width: 1100px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
  .dir-hero h1 { font-size: 40px; line-height: 1.1; margin: 0 0 10px; }
  .dir-hero p.lead { max-width: 640px; margin-left: 0; margin-right: 0; }
  .dir-hero .hero-cta, .dir-hero .hero-meta { justify-content: flex-start; }
  .dir-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
  .dir-stat { display: flex; flex-direction: column; }
  .dir-stat b { font-size: 26px; font-family: var(--font-mono); color: var(--accent); }
  .dir-stat span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-family: var(--font-mono); }
  .dir-section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
  .dir-section-h h2 { font-size: 22px; margin: 0; }
  .dir-section-h .muted-small { white-space: nowrap; }
  .dir-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  /* BROWSE grids (top ports / browse by state / cities in state) — the short
     navigation cards, as opposed to the carrier-RESULT grids, which override
     grid-template-columns inline and are unaffected by anything below.
     grid-auto-rows:1fr is what makes every card the SAME SIZE: all rows are
     implicit here, so 1fr resolves each to the tallest row's height and a short
     name ("Guam") can no longer produce a shorter card than a wrapping one
     ("U.S. Virgin Islands"). Column count is handled per-breakpoint below. */
  .dir-grid--browse { grid-auto-rows: 1fr; }
  .dir-grid--browse > .dir-card { display: flex; flex-direction: column; }
  .dir-grid--browse > .dir-card .cnt { margin-top: auto; padding-top: 12px; }
  .dir-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; text-decoration: none; color: inherit; display: block; transition: border-color 0.15s ease, transform 0.15s ease; }
  .dir-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
  .dir-card h3 { margin: 0 0 4px; font-size: 17px; }
  .dir-card .sub { font-size: 12px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
  .dir-card .cnt { margin-top: 12px; font-size: 22px; font-family: var(--font-mono); color: var(--accent); }
  .dir-card .cnt small { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-left: 4px; }
  .dir-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
  .dir-chip { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.04em; padding: 6px 12px; border-radius: var(--radius-chip); border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
  .dir-chip:hover { border-color: var(--border-strong); }
  .dir-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .carrier-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; text-decoration: none; color: inherit; display: block; transition: border-color 0.15s ease; }
  .carrier-card:hover { border-color: var(--border-strong); }
  .carrier-card .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
  .carrier-card h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; }
  .carrier-card-legal { font-size: 12px; color: var(--muted); margin: 0 0 4px; line-height: 1.3; }
  .carrier-card .meta { font-size: 12px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
  .carrier-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
  .carrier-facts .f { display: flex; flex-direction: column; }
  .carrier-facts .f b { font-size: 15px; font-family: var(--font-mono); }
  .carrier-facts .f span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
  .pill { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-chip); white-space: nowrap; }
  .pill-dray { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
  .pill-good { background: rgba(46, 160, 87, 0.14); color: #57c274; border: 1px solid rgba(46, 160, 87, 0.4); }
  .pill-warn { background: rgba(214, 158, 46, 0.14); color: #e0b054; border: 1px solid rgba(214, 158, 46, 0.4); }
  .pill-bad { background: rgba(220, 76, 76, 0.14); color: #e88; border: 1px solid rgba(220, 76, 76, 0.4); }
  .pill-none { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
  .pill-eq { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border); }
  /* Carrier-card chip row — always narrow, so it always uses the count-aware
     grid partition (>=2 pills per line, never a stranded orphan). 1 pill keeps
     its natural width (left-aligned); 2+ fill equal columns. */
  .card-chips { display: grid; gap: 8px; margin-top: 12px; align-items: stretch; }
  .card-chips .pill { display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; }
  .card-chips[data-n="1"] { grid-template-columns: max-content; }
  .card-chips[data-n="2"], .card-chips[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-chips[data-n="3"], .card-chips[data-n="5"], .card-chips[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dir-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 28px 0 8px; }
  .dir-pager .muted-small { font-family: var(--font-mono); }
  .dir-empty { padding: 60px 24px; text-align: center; color: var(--muted); }
  .src-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .src-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; text-decoration: none; color: inherit; display: block; }
  .src-card:hover { border-color: var(--border-strong); }
  .src-card h3 { margin: 0 0 6px; font-size: 16px; }
  .src-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
  .src-card .go { display: inline-block; margin-top: 10px; font-size: 12px; font-family: var(--font-mono); color: var(--accent); }
  .lookup-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
  .lookup-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
  .lookup-row .input { flex: 1 1 220px; }
  .lookup-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .lookup-toggle button { background: transparent; color: var(--muted); border: 0; padding: 0 16px; font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
  .lookup-toggle button.on { background: var(--accent-soft); color: var(--accent); }
  .lookup-result { margin-top: 18px; }
  .lookup-result .row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .lookup-result .row:last-child { border-bottom: 0; }
  .lookup-result .row .k { color: var(--muted); }
  .lookup-result .row .v { font-family: var(--font-mono); text-align: right; }
  /* Breadcrumbs */
  .dir-crumbs { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.03em; color: var(--muted); margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .dir-crumbs a { color: var(--muted); text-decoration: none; }
  .dir-crumbs a:hover { color: var(--accent); }
  .dir-crumbs .sep { opacity: 0.5; }
  .dir-crumbs .cur { color: var(--ink-soft); }
  /* Faceted two-column layout */
  .dir-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 24px; align-items: start; }
  .dir-rail { position: sticky; top: 16px; }
  .facet-group { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; margin-bottom: 12px; }
  .facet-group h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-family: var(--font-mono); }
  .facet-src { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--muted); opacity: 0.8; display: block; margin: 0 0 8px; }
  .facet-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--ink-soft); font-size: 13px; border: 1px solid transparent; }
  .facet-opt:hover { background: var(--surface-2); }
  .facet-opt .cb { font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-chip); padding: 1px 8px; min-width: 20px; text-align: center; }
  .facet-opt.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
  .facet-opt.active .cb { color: var(--accent); border-color: var(--accent); background: transparent; }
  .facet-opt.disabled { opacity: 0.5; cursor: not-allowed; }
  .facet-opt.disabled .cb { text-transform: uppercase; font-size: 9px; letter-spacing: 0.05em; }
  /* Carrier-capabilities (Tier-3, claim-driven) group — visually secondary to
     the working FMCSA facets: subdued surface, per-kind sub-labels, claim CTA. */
  .facet-group--claim { background: var(--surface-2); border-style: dashed; }
  .facet-group--claim .cap-sub { margin-top: 10px; }
  .facet-group--claim .cap-sub:first-of-type { margin-top: 6px; }
  .cap-sublabel { display: block; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); opacity: 0.85; margin: 0 0 3px 8px; }
  .cap-claim-cta { display: inline-block; margin-top: 12px; font-size: 12px; font-family: var(--font-mono); color: var(--accent); text-decoration: none; }
  .cap-claim-cta:hover { text-decoration: underline; }
  .facet-opt .lbl { display: flex; align-items: center; gap: 7px; }
  .facet-check { width: 14px; height: 14px; border: 1px solid var(--border-strong); border-radius: 4px; display: inline-block; flex: 0 0 auto; }
  .facet-opt.active .facet-check { background: var(--accent); border-color: var(--accent); }
  /* Ports & terminals unfolding picker — ONE combined list (seaports + inland
     rail ramps), grouped US / Canada, with a client-side free-text filter. */
  details.port-picker { padding: 0; overflow: hidden; }
  .port-picker-sum { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 14px 16px; }
  .port-picker-sum::-webkit-details-marker { display: none; }
  .port-picker-sum::after { content: '▾'; color: var(--muted); font-size: 11px; margin-left: auto; align-self: center; transition: transform 0.15s ease; }
  details[open] .port-picker-sum::after { transform: rotate(180deg); }
  @media (prefers-reduced-motion: reduce) { .port-picker-sum::after { transition: none; } }
  .port-picker-sum .pp-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-family: var(--font-mono); }
  .port-picker-sum .pp-hint { font-size: 10px; font-family: var(--font-mono); color: var(--muted); opacity: 0.7; }
  .port-picker-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-lg); }
  .port-picker-body { padding: 0 16px 14px; }
  .pp-search { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
  .pp-search-lbl { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .pp-search-input { width: 100%; box-sizing: border-box; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
  .pp-search-input::placeholder { color: var(--muted); }
  .pp-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .pp-list { max-height: 320px; overflow-y: auto; }
  .pp-country + .pp-country { margin-top: 6px; }
  .pp-country-h { margin: 6px 0 2px; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); opacity: 0.85; }
  .pp-empty { font-size: 12px; color: var(--muted); padding: 8px 2px; }
  .rail-toggle { display: none; }
  /* Slim breadcrumb bar for the hero-less results view. */
  .dir-crumbbar { padding-top: 22px; padding-bottom: 0; }
  .dir-shell--tight { padding-top: 14px; }
  /* Carrier-name free-text search — sits above the results bar. Squared 4px
     corners, 8px grid, theme-aware tokens; the input + button never wrap apart
     awkwardly (button drops full-width under the field at ≤640px). */
  .dir-search { margin: 0 0 14px; }
  .dir-search-lbl { display: block; font-size: 12px; font-family: var(--font-mono); color: var(--muted); margin: 0 0 6px; }
  .dir-search-row { display: flex; gap: 8px; align-items: stretch; }
  .dir-search-input { flex: 1 1 auto; min-width: 0; font-family: var(--font-sans); font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; padding: 10px 12px; min-height: 44px; }
  .dir-search-input::placeholder { color: var(--muted); }
  .dir-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .dir-search-btn { flex: 0 0 auto; border-radius: 4px; }
  .dir-search-hint { display: block; font-size: 11px; color: var(--muted); margin: 6px 0 0; }
  @media (max-width: 640px) {
    .dir-search-row { flex-wrap: wrap; }
    .dir-search-btn { width: 100%; }
  }
  /* Single tidy control bar: count on the left, compact sort <select> on the
     right. Wraps to two rows only at very narrow widths (never mid-control). */
  .results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 14px; }
  .results-bar .rc { font-size: 15px; min-width: 0; }
  .results-bar .rc b { font-family: var(--font-mono); color: var(--accent); font-size: 20px; }
  .sort-ctl { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .sort-lbl { font-size: 11px; color: var(--muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
  .sort-select { position: relative; display: inline-flex; align-items: center; }
  .sort-select::after { content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); pointer-events: none; }
  .sort-select select { appearance: none; -webkit-appearance: none; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 8px 30px 8px 12px; font-family: var(--font-mono); font-size: 13px; line-height: 1.2; cursor: pointer; min-width: 168px; }
  .sort-select select:hover { border-color: var(--border-strong); }
  .sort-select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
  /* Squared asc/desc direction toggle — pairs with the sort <select> (same
     height + squared 8px corners, never pill-round). Theme-aware via tokens. */
  .sort-dir { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
  .sort-dir:hover { border-color: var(--border-strong); color: var(--ink); }
  .sort-dir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
  .sort-dir-ico { color: var(--accent); font-size: 10px; line-height: 1; }
  .sort-noscript { display: inline-flex; gap: 8px; flex-wrap: wrap; }
  .sort-noscript a { font-size: 12px; font-family: var(--font-mono); color: var(--accent); text-decoration: none; }
  .applied-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; align-items: center; }
  .applied-chip { font-size: 12px; font-family: var(--font-mono); padding: 5px 10px; border-radius: var(--radius-chip); border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
  .applied-chip .x { opacity: 0.7; }
  .applied-chip:hover .x { opacity: 1; }
  .applied-clear { font-size: 12px; font-family: var(--font-mono); color: var(--muted); text-decoration: underline; }
  .dir-pagenums { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; margin: 26px 0 8px; }
  .dir-pagenums a, .dir-pagenums span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--ink-soft); font-family: var(--font-mono); font-size: 13px; padding: 0 8px; }
  .dir-pagenums a:hover { border-color: var(--border-strong); }
  .dir-pagenums .cur { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .dir-pagenums .gap { border: 0; min-width: 16px; color: var(--muted); }
  /* ── Selectable carrier cards + sticky directory action bar ─────────────── */
  .cc-sel { position: relative; }
  /* Make room at the card top-right so the checkbox chip never sits on the
     Drayage pill (the pill is the right item of .top; padding shifts it left). */
  .cc-sel .carrier-card .top { padding-right: 40px; }
  /* Selection control: a ≥44px tap target stacked ABOVE the card link (z-index)
     so a tap toggles selection and never navigates. The visible 18px checkbox
     lives inside a bordered chip pinned top-right; the label's asymmetric padding
     extends the hit area DOWN + LEFT (away from the card title) to a comfortable
     44px without visually growing the chip. onclick stopPropagation is belt-and-
     suspenders (the link is a SIBLING, so a checkbox click never bubbles to it). */
  .cc-check { position: absolute; top: 6px; right: 6px; z-index: 4; margin: 0; display: inline-flex; align-items: flex-start; padding: 6px 6px 20px 20px; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cc-box { display: inline-flex; padding: 4px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 4px; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, background 0.15s ease; }
  .cc-check:hover .cc-box { border-color: var(--accent); }
  .cc-check:has(.cc-cb:checked) .cc-box { border-color: var(--accent); background: var(--accent-soft); }
  .cc-check:has(.cc-cb:focus-visible) .cc-box { outline: 2px solid var(--accent); outline-offset: 2px; }
  .cc-cb { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--accent-fill); }
  /* One-line legend above the grid — makes the per-card checkbox's purpose
     obvious without crowding each card. Mirrors the action-bar hint wording. */
  .cc-legend { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
  .cc-legend-box { flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface-2); }
  .qf-actionbar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 20px 0 0; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-md); }
  .qf-ab-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .qf-ab-count { font-size: 14px; color: var(--ink); }
  .qf-ab-count b { font-family: var(--font-mono); color: var(--accent); font-size: 18px; }
  .qf-ab-hint { font-size: 11px; color: var(--muted); }
  .qf-actionbar[data-mode="dots"] .qf-ab-hint { visibility: hidden; }
  .qf-ab-actions { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
  .qf-ab-btn { flex: 0 0 auto; }
  /* Desktop shows the full labels ("Request rates from N carriers →", "Save
     selected (N)", "Export list"); the compact "(N)" parens are mobile-only. */
  .qf-ab-rfqpar { display: none; }
  .qf-ab-fmts { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .qf-ab-fmt { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--accent); text-decoration: none; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
  .qf-ab-fmt:hover { border-color: var(--accent); }
  .qf-ab-fmt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* "— free" suffix on the topnav Claim CTA: drop it on small screens so the
     always-visible CTA never widens the header into horizontal overflow. */
  @media (max-width: 560px) { .site-actions .tn-free { display: none; } }
  @media (max-width: 640px) {
    /* Compact slim card: count on top, then all three actions on ONE row (no
       longer full-width stacked). Short labels ("Request rates (N)", "Save (N)",
       "Export") keep them on one line down to 360px. padding-right on the button
       row reserves the bottom-right corner for the chat FAB (which stays snug in
       the corner) so its rightmost button never sits under the launcher. XLSX/CSV
       drop to their own left-aligned line, clear of the corner FAB. */
    .qf-actionbar { flex-direction: column; align-items: stretch; gap: 8px; bottom: 8px; padding: 10px 12px; }
    .qf-ab-hint { display: none; }
    .qf-ab-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 6px; padding-right: 66px; }
    .qf-ab-btn { flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 12px; white-space: nowrap; justify-content: center; text-align: center; }
    .qf-ab-rfq { flex: 1.5 1 auto; }
    /* Drop the count from the RFQ button on phones (it's redundant with the
       "N carriers filtered/selected" line above) so all three fit one row. */
    .qf-ab-rfqfull, .qf-ab-rfqw, .qf-ab-rfqof, .qf-ab-rfqn, .qf-ab-rfqpar { display: none; }
    .qf-ab-savefull, .qf-ab-exportfull { display: none; }
    .qf-ab-fmts { flex: 1 1 100%; justify-content: flex-start; gap: 12px; }
  }
  @media (max-width: 900px) {
    .dir-layout { grid-template-columns: 1fr; }
    .dir-rail { position: static; }
    .rail-toggle { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; color: var(--ink); font-size: 14px; font-family: var(--font-mono); cursor: pointer; margin-bottom: 12px; }
    .dir-rail[data-collapsed="1"] .facet-group { display: none; }
  }
  @media (max-width: 640px) {
    .dir-hero h1 { font-size: 30px; }
    /* Mobile inset: pad the CONTENT containers (not the full-width .dir-hero
       section, whose horizontal padding is 0) so the header's inner container
       and the body share the same 18px left edge — no double-padding. */
    .dir-shell { padding-left: 18px; padding-right: 18px; }
    .dir-hero .container-narrow { padding-left: 18px; padding-right: 18px; }
    .dir-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .carrier-facts { gap: 14px; }
    /* Two EQUAL columns for the browse cards all the way down to 320px.
       minmax(0,1fr) — not the default minmax(auto,1fr) — is the part that
       stops a long territory name's min-content width from widening its track
       and pushing the page into horizontal scroll. Tighter padding + a stacked
       count keeps a ~137px card readable at 320px. */
    .dir-grid--browse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dir-grid--browse > .dir-card { padding: 14px 14px; min-width: 0; }
    .dir-grid--browse > .dir-card h3 { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
    .dir-grid--browse > .dir-card .cnt { font-size: 19px; padding-top: 10px; }
    .dir-grid--browse > .dir-card .cnt small { display: block; margin-left: 0; margin-top: 2px; }
    /* Odd count: the final card fills the row rather than sitting alone beside
       an empty half — see browseGrid(). Every row is full at two columns. */
    .dir-grid--browse[data-odd="1"] > .dir-card:last-child { grid-column: 1 / -1; }
    /* Sort bar: count on its own row, then the full sort control (label + select
       + direction toggle) together on the next — never stacks mid-control, never
       leaves the toggle orphaned. */
    .results-bar { align-items: flex-start; }
    .sort-ctl { flex: 1 1 100%; justify-content: flex-start; }
    .sort-select { flex: 1 1 auto; }
    .sort-select select { min-width: 0; width: 100%; }
    .sort-dir { flex: 0 0 auto; }
  }
  @media (max-width: 420px) {
    /* Result/detail grids still collapse to one column on the narrowest phones.
       The BROWSE grids deliberately do NOT: a full-width card holding one short
       state name and a count wasted the whole right half of the screen, which
       is the defect this excludes them from. */
    .dir-grid:not(.dir-grid--browse) { grid-template-columns: 1fr; }
  }
  /* Sub-375px phones (360/320): a single long browse-chip label (e.g. a full
     port-group name) has a nowrap min-content wider than the results column,
     which forces ~14px of horizontal page scroll at 360px. Let these chips
     wrap on the narrowest phones so they fit the column — no effect at ≥375px,
     where the chip already fits within the viewport. */
  @media (max-width: 374px) {
    .dir-chips .dir-chip { white-space: normal; }
  }
  /* ── Carrier profile (rich, DrayLocator-structured card) ────────────────── */
  .cp-caps { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 12px 0 4px; }
  /* Each badge GROUP (credentials / equipment) lays out on its own row. Desktop:
     a simple flex row — 4 credential or 5 equipment badges fit one line, so no
     wrap + no orphan. Narrow widths switch to a count-aware grid below so every
     line keeps >=2 badges (never a stranded single). */
  .cp-badgegroup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; overflow-x: clip; width: 100%; }
  .cp-eqwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .cp-eqlabel { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  @media (max-width: 640px) {
    /* Count-aware partition: columns chosen so no line ends with exactly one
       badge — 2→2, 3→3, 4→2×2, 5→3+2, 6→3×2. Equal 1fr columns + wrapping text
       (white-space:normal) means long labels never overflow the clipped group. */
    .cp-badgegroup { display: grid; gap: 8px; align-items: stretch; }
    .cp-badgegroup .cp-badge { justify-content: center; text-align: center; white-space: normal; font-size: 10px; padding: 4px 8px; min-width: 0; }
    .cp-badgegroup[data-n="1"] { grid-template-columns: max-content; }
    .cp-badgegroup[data-n="2"], .cp-badgegroup[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-badgegroup[data-n="3"], .cp-badgegroup[data-n="5"], .cp-badgegroup[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Variable-length chip rows (cargo specialties up to 13, self-declared
       capabilities) can't use a per-count data-n map, so enforce the same
       no-orphan rule structurally: a 2-column grid, and when the count is ODD
       the first chip spans both columns — so the remaining even count fills
       clean pairs and the last row always has ≥2 (a sole chip is fine alone). */
    /* Doubled class (.cp-chiprow.cp-chiprow, specificity 0,2,0) so these beat the
       base .cp-chiprow flex rule, which is defined LATER in source order — media
       queries add no specificity, so an equal-specificity base rule further down
       would otherwise win the cascade and leave this grid dead. */
    .cp-chiprow.cp-chiprow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .cp-chiprow.cp-chiprow > * { min-width: 0; }
    .cp-chiprow.cp-chiprow > .cp-badge, .cp-chiprow.cp-chiprow > .cp-chip { justify-content: center; text-align: center; white-space: normal; }
    .cp-chiprow.cp-chiprow > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  }
  .cp-badge-active { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-chip); background: var(--success-bg); color: var(--success); border: 1px solid var(--success); display: inline-flex; align-items: center; gap: 6px; }
  .cp-badge-active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; }
  /* The badge is now ALWAYS in the markup and toggled by the live-authority
     hydration, so the server HTML stays byte-identical while the client can
     still add or remove it. An author display rule BEATS the UA stylesheet's
     [hidden] rule, so without this line the hidden attribute would be inert and
     every carrier would render "Active" — including the ones that are not. */
  .cp-badge-active[hidden] { display: none; }
  /* Live-authority line: the current FMCSA reading with its own date, rendered
     only when a live check actually returned. Deliberately styled as a plain
     muted note, not a success/alert colour — it is a dated fact, not a verdict,
     and colouring it would editorialise about a real business. */
  .cp-authlive { margin-top: 12px; }
  .cp-authlive[hidden] { display: none; }
  .cp-claimline { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
  .cp-claimline a { color: var(--accent); text-decoration: none; }
  .cp-claimline a:hover { text-decoration: underline; }
  .cp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 24px; align-items: start; margin-top: 24px; }
  .cp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .cp-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
  .cp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
  .cp-card > h2.cp-h { margin-top: 0; }
  .cp-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-family: var(--font-mono); margin: 0 0 16px; }
  .cp-about { margin: 0; line-height: 1.6; color: var(--ink-soft); font-size: 15px; }
  .cp-datagrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cp-dt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .cp-dt .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-family: var(--font-mono); }
  .cp-dt .v { font-size: 16px; color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; word-break: break-word; }
  .cp-verify-link { display: inline-block; margin-top: 16px; font-size: 13px; font-family: var(--font-mono); color: var(--accent); text-decoration: none; }
  .cp-verify-link:hover { text-decoration: underline; }
  .cp-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
  .cp-chip { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.02em; padding: 8px 12px; border-radius: var(--radius-chip); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .cp-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .cp-chip.good { border-color: var(--success); color: var(--success); background: var(--success-bg); }
  .cp-chip.muted { opacity: 0.6; }
  .cp-chip .tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
  .cp-note { margin: 16px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
  /* Safety-record rate context — muted, own line, never colour-coded. */
  .cp-safety-ctx { display: block; margin-top: 2px; font-size: 12px; font-family: var(--font-sans, inherit); font-variant-numeric: normal; color: var(--muted); line-height: 1.4; }
  .cp-safety-lede { margin-top: 0; margin-bottom: 16px; }
  .cp-loc { margin: 0 0 8px; line-height: 1.6; color: var(--ink-soft); font-size: 14px; }
  .cp-loc:last-child { margin-bottom: 0; }
  .cp-loc .lk { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
  /* "Also operating in" — carrier-declared other metros. Sits below the base
     location lines; reuses .cp-eqlabel + .cp-chip / .cp-chiprow (which carries
     the no-orphan mobile grid). Small top gap separates it from the port line. */
  .cp-alsoloc { margin-top: 12px; }
  .cp-contact-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .cp-contact-row:last-of-type { border-bottom: 0; }
  .cp-contact-row .k { color: var(--muted); }
  .cp-contact-row .v { font-family: var(--font-mono); text-align: right; word-break: break-word; }
  .cp-contact-row .v a { color: var(--accent); text-decoration: none; }
  .cp-hidden { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
  .cp-gated { margin-top: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); padding: 16px; }
  .cp-gated h3 { margin: 0 0 4px; font-size: 13px; color: var(--ink-soft); }
  .cp-gated p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
  /* Directory Pro contacts gate — blurred teaser + upgrade CTA (free) / reveal
     affordance (Pro). Token-only + theme-aware; buttons stack full-width so the
     no-orphan-wrap rule is moot (never an inline pill group). */
  .cp-gated .cp-gated-teaser { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; }
  .cp-gated-blur { font-family: var(--font-mono); font-size: 12px; color: var(--muted); filter: blur(3px); user-select: none; letter-spacing: 0.5px; }
  .cp-gated .btn { width: 100%; justify-content: center; }
  .cp-gated .cp-unlock-btn { margin-bottom: 8px; }
  .cp-gated .cp-reveal-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
  .cp-gated .cp-reveal-form { margin: 10px 0 0; }
  /* PR C — the revealed enriched-contacts result (swapped in by the inline
     enhancement script). Token-only + theme-aware; cards stack full-width so
     the no-orphan-wrap rule is moot. */
  .cp-reveal-result { margin-top: 12px; }
  .cp-reveal-list { display: flex; flex-direction: column; gap: 12px; }
  .cp-reveal-note { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
  .cp-reveal-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface-2); }
  .cp-reveal-name { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
  .cp-reveal-conf { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-chip); border: 1px solid var(--border); color: var(--muted); }
  .cp-reveal-conf--high { color: var(--accent); border-color: var(--accent); }
  .cp-reveal-msg { margin: 0; font-size: 13px; color: var(--muted); }
  .cp-reveal-msg--error { color: var(--ink-soft); font-weight: 500; }
  .cp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .cp-actions .btn { width: 100%; justify-content: center; }
  /* ── Credential badges — distinct solid colours + pure-CSS hover/focus tooltip ─
     Palette defined as tokens (bg + text colour chosen for AA contrast). Solid
     colour = a credential the carrier ACTUALLY has (FMCSA-verified ones render
     now); self-declared credentials the carrier hasn't verified stay muted with
     a compact "Claim" affordance. Every badge is keyboard-focusable and carries a
     tooltip (data-tip → ::after on :hover/:focus). The badge rows clip horizontal
     overflow so a tooltip never triggers page horizontal scroll at 375px. */
  :root {
    /* Maersk-corner rule: EVERY directory badge / chip / pill uses this one small
       squared radius — no fully-rounded pills anywhere in the directory. */
    --radius-chip: 4px;
    --badge-dray-bg: #2563eb;        --badge-dray-fg: #ffffff;
    --badge-hazmat-bg: #ea580c;      --badge-hazmat-fg: #111827;
    --badge-reefer-bg: #14b8a6;      --badge-reefer-fg: #111827;
    --badge-dryvan-bg: #0f766e;      --badge-dryvan-fg: #ffffff;
    --badge-tanker-bg: #0369a1;      --badge-tanker-fg: #ffffff;
    --badge-flatbed-bg: #b45309;     --badge-flatbed-fg: #ffffff;
    --badge-drybulk-bg: #6d28d9;     --badge-drybulk-fg: #ffffff;
    --badge-authority-bg: #475569;   --badge-authority-fg: #ffffff;
    --badge-safety-good-bg: #15803d; --badge-safety-good-fg: #ffffff;
    --badge-safety-warn-bg: #d97706; --badge-safety-warn-fg: #111827;
    --badge-safety-bad-bg: #b91c1c;  --badge-safety-bad-fg: #ffffff;
    --badge-safety-none-bg: #6b7280; --badge-safety-none-fg: #ffffff;
    --badge-uiia-bg: #7c3aed;        --badge-uiia-fg: #ffffff;
    --badge-twic-bg: #4338ca;        --badge-twic-fg: #ffffff;
    --badge-bonded-bg: #166534;      --badge-bonded-fg: #ffffff;
    --badge-transload-bg: #92400e;   --badge-transload-fg: #ffffff;
    --badge-yard-bg: #334155;        --badge-yard-fg: #ffffff;
    --badge-tip-bg: #1f2937;         --badge-tip-fg: #f9fafb;
    --badge-tip-border: rgba(148, 163, 184, 0.28);
    --badge-focus: #2563eb;
  }
  .cp-chiprow, .cp-caps, .cp-nameline { overflow-x: clip; }
  .cp-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-chip); border: 1px solid transparent; white-space: nowrap; cursor: help; }
  .cp-badge:focus-visible, .cp-fmcsa:focus-visible { outline: 2px solid var(--badge-focus); outline-offset: 2px; }
  .cp-badge--dray { background: var(--badge-dray-bg); color: var(--badge-dray-fg); }
  .cp-badge--hazmat { background: var(--badge-hazmat-bg); color: var(--badge-hazmat-fg); }
  .cp-badge--reefer { background: var(--badge-reefer-bg); color: var(--badge-reefer-fg); }
  .cp-badge--dryvan { background: var(--badge-dryvan-bg); color: var(--badge-dryvan-fg); }
  .cp-badge--tanker { background: var(--badge-tanker-bg); color: var(--badge-tanker-fg); }
  .cp-badge--flatbed { background: var(--badge-flatbed-bg); color: var(--badge-flatbed-fg); }
  .cp-badge--drybulk { background: var(--badge-drybulk-bg); color: var(--badge-drybulk-fg); }
  .cp-badge--authority { background: var(--badge-authority-bg); color: var(--badge-authority-fg); }
  .cp-badge--safety-good { background: var(--badge-safety-good-bg); color: var(--badge-safety-good-fg); }
  .cp-badge--safety-warn { background: var(--badge-safety-warn-bg); color: var(--badge-safety-warn-fg); }
  .cp-badge--safety-bad { background: var(--badge-safety-bad-bg); color: var(--badge-safety-bad-fg); }
  .cp-badge--safety-none { background: var(--badge-safety-none-bg); color: var(--badge-safety-none-fg); }
  .cp-badge--uiia { background: var(--badge-uiia-bg); color: var(--badge-uiia-fg); }
  .cp-badge--twic { background: var(--badge-twic-bg); color: var(--badge-twic-fg); }
  .cp-badge--bonded { background: var(--badge-bonded-bg); color: var(--badge-bonded-fg); }
  .cp-badge--transload { background: var(--badge-transload-bg); color: var(--badge-transload-fg); }
  .cp-badge--yard { background: var(--badge-yard-bg); color: var(--badge-yard-fg); }
  .cp-badge--claim { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
  .cp-badge--claim .tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; white-space: nowrap; flex: 0 0 auto; }
  /* Self-declared credentials → a UNIFORM card grid: 2-up on desktop, 1-up on
     narrow mobile. Each card is the same height per row (align-items:stretch),
     credential name left + compact "Claim" button right, so long labels
     (Customs-bonded / C-TPAT, Transload / warehouse) wrap gracefully WITHIN the
     card without making its row ragged. */
  .cp-claimgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .cp-claimgrid .cp-badge--claim { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 100%; white-space: normal; text-align: left; padding: 10px 12px; }
  .cp-claimgrid .cp-badge-label { min-width: 0; overflow-wrap: anywhere; }
  @media (max-width: 480px) {
    .cp-claimgrid { grid-template-columns: 1fr; }
  }
  .cp-tip[data-tip]:hover::after,
  .cp-tip[data-tip]:focus::after,
  .cp-tip[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    z-index: 30; width: max-content; max-width: min(240px, 72vw);
    white-space: normal; text-align: left; text-transform: none; letter-spacing: normal;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; line-height: 1.45;
    padding: 9px 11px; border-radius: 8px;
    background: var(--badge-tip-bg); color: var(--badge-tip-fg); border: 1px solid var(--badge-tip-border);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35); pointer-events: none;
  }
  .cp-tip[data-tip]:hover::before,
  .cp-tip[data-tip]:focus::before,
  .cp-tip[data-tip]:focus-visible::before {
    content: ''; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-bottom-color: var(--badge-tip-bg); z-index: 31; pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .cp-tip[data-tip]::after, .cp-tip[data-tip]::before { transition: none; }
  }
  /* ── JS-positioned tooltip (directory-tooltip.js) ──────────────────────────
     When the script runs it flags <html class="js-tips"> and disables the CSS
     ::after/::before tooltip above (avoids a double tooltip). The .qf-tip node
     lives on <body> so it escapes every overflow:clip badge-row ancestor, and
     the embedded "✓" renders in the green success token via .qf-tip-check.
     No-JS users keep the CSS tooltip; aria-label carries the name regardless. */
  html.js-tips .cp-tip[data-tip]:hover::after,
  html.js-tips .cp-tip[data-tip]:focus::after,
  html.js-tips .cp-tip[data-tip]:focus-visible::after,
  html.js-tips .cp-tip[data-tip]:hover::before,
  html.js-tips .cp-tip[data-tip]:focus::before,
  html.js-tips .cp-tip[data-tip]:focus-visible::before { display: none !important; }
  .qf-tip {
    position: fixed; left: 0; top: 0; z-index: 9999; visibility: hidden;
    width: max-content; max-width: min(240px, 72vw);
    white-space: normal; text-align: left; text-transform: none; letter-spacing: normal;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; line-height: 1.45;
    padding: 8px 11px; border-radius: 8px;
    background: var(--badge-tip-bg); color: var(--badge-tip-fg); border: 1px solid var(--badge-tip-border);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35); pointer-events: none;
    opacity: 0; transition: opacity 0.12s ease;
  }
  .qf-tip.is-open { opacity: 1; }
  .qf-tip::after {
    content: ''; position: absolute; left: var(--tip-arrow-x, 50%); transform: translateX(-50%);
    border: 6px solid transparent;
  }
  .qf-tip[data-pos="above"]::after { top: 100%; border-top-color: var(--badge-tip-bg); }
  .qf-tip[data-pos="below"]::after { bottom: 100%; border-bottom-color: var(--badge-tip-bg); }
  .qf-tip-check { color: var(--success); font-weight: 700; }
  @media (prefers-reduced-motion: reduce) {
    .qf-tip { transition: none; }
  }
  /* ── DrayLocator-structured header: [monogram] name · Active · FMCSA / claim
     on the right, subtitle, then the squared badge row — all left-aligned. ──── */
  .cp-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; text-align: left; margin: 14px 0 0; }
  .cp-idblock { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
  .cp-monogram { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 8px; margin-top: 2px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 21px; font-weight: 700; letter-spacing: 0.04em; }
  .cp-idtext { min-width: 0; }
  .cp-nameline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .cp-nameline h1 { font-size: 30px; line-height: 1.15; margin: 0; }
  .cp-fmcsa { position: relative; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; cursor: help; }
  .cp-subtitle { margin: 8px 0 0; }
  .cp-headrow .cp-claimline { margin: 4px 0 0; }
  /* Profile trailing blocks — desktop defaults (classes replace former inline
     styles so mobile can tighten them below). */
  .cp-crosslinks { margin-top: 24px; }
  .cp-claimcard { margin-top: 24px; padding: 24px; text-align: center; }
  /* The global .site-footer carries a generous marketing gap (72px margin-top +
     44px padding-top). On a short carrier profile that reads as a dead band
     between the claim card and the footer. Trim it — SCOPED to the profile via
     the profile's sibling footer, so every other page's footer is untouched.
     Uses ~ (not +) because a <script> sits between <main> and the footer. */
  main.dir-shell--cp ~ .site-footer { margin-top: 32px; }
  @media (max-width: 640px) {
    .cp-nameline h1 { font-size: 24px; }
    .cp-monogram { width: 46px; height: 46px; font-size: 18px; }
  }
  @media (max-width: 900px) {
    .cp-layout { grid-template-columns: 1fr; }
    .cp-side { position: static; }
  }
  @media (max-width: 640px) {
    .cp-card { padding: 16px; }
    /* Tighten the profile on mobile so it reads dense — no airy section gaps,
       no dead band before the footer (see the base rules above). */
    .cp-layout { margin-top: 16px; gap: 12px; }
    .cp-main, .cp-side { gap: 12px; }
    .cp-crosslinks { margin-top: 16px; }
    /* Nearby shortcut chips: on narrow widths the nowrap pills used to stack
       one-per-row (dead space on the right). Pack them into a 2-up grid that
       fills the width; when the count is ODD the first chip spans both columns
       so the last row always keeps >=2 (no orphaned single) — the same
       no-orphan pattern .cp-chiprow uses. */
    .cp-crosslinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cp-crosslinks .dir-chip { white-space: normal; text-align: center; }
    .cp-crosslinks .dir-chip:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
    .cp-claimcard { margin-top: 16px; padding: 16px; }
    main.dir-shell--cp { padding-bottom: 8px; }
    /* Generalized from the profile-only trim: EVERY directory footer (results,
       state, profile) gets the same tight gap + trimmed top/bottom padding on
       mobile, killing the ~110px dead band the base 104px bottom padding left
       below the © / links row. The scoped line re-asserts 16px on the profile,
       whose desktop-scoped rule above (0,2,1) would otherwise win over this
       general selector on mobile too. */
    .site-footer { margin-top: 16px; padding-top: 24px; padding-bottom: 32px; }
    main.dir-shell--cp ~ .site-footer { margin-top: 16px; }
  }
  @media (max-width: 380px) {
    .cp-datagrid { grid-template-columns: 1fr; }
  }
  /* ── Carrier-profile TABS ─────────────────────────────────────────────────
     Pure-CSS, no-framework, SEO-safe tabs. The four section panels are ALL
     present in the HTML (crawlers index every field); CSS only hides the
     inactive ones. The mechanism is a native radio group: four visually-hidden
     but keyboard-FOCUSABLE radio inputs sit as siblings before the labels +
     panels. Selecting a radio (click a label, or Arrow-key within the group —
     native radio behaviour) flips :checked, and the general-sibling combinator
     reveals the matching panel. Works with zero JS; Arrow keys navigate + switch
     tabs for free; focus is shown on the label via :focus-visible. Theme-aware
     tokens only — no hardcoded colours. */
  .cp-tabs { display: flex; flex-wrap: wrap; position: relative; margin-top: 24px; }
  /* Visually hidden, still focusable (not display:none / visibility:hidden). */
  .cp-tab-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .cp-tab {
    flex: 1 1 0; min-width: 0; text-align: center; cursor: pointer; user-select: none;
    padding: 13px 14px; font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.04em;
    color: var(--muted); background: var(--surface);
    border: 1px solid var(--border); border-bottom-width: 2px; border-right: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cp-tab:first-of-type { border-top-left-radius: var(--radius-lg); }
  .cp-tab:last-of-type { border-right: 1px solid var(--border); border-top-right-radius: var(--radius-lg); }
  .cp-tab:hover { color: var(--ink-soft); background: var(--surface-2); }
  .cp-tab-input:checked + .cp-tab { color: var(--accent); background: var(--surface); border-bottom-color: var(--accent); }
  .cp-tab-input:focus-visible + .cp-tab { outline: 2px solid var(--accent); outline-offset: -2px; }
  .cp-tab-sm { display: none; }
  .cp-panel { flex: 0 0 100%; width: 100%; min-width: 0; display: none; padding-top: 16px; }
  #cp-tab-overview:checked ~ .cp-panel--overview,
  #cp-tab-services:checked ~ .cp-panel--services,
  #cp-tab-safety:checked ~ .cp-panel--safety,
  #cp-tab-contact:checked ~ .cp-panel--contact { display: flex; flex-direction: column; gap: 16px; }
  /* Cargo-class specialties: a neutral chip group (variable length → the same
     flex-wrap chip row the full-enumeration list already uses). */
  .cp-badge--cargo, .cp-badge--fact { background: var(--surface-2); color: var(--ink-soft); border-color: var(--border); text-transform: none; letter-spacing: 0.02em; }
  /* Credential FACTS carry figures, so tabular digits; outline-and-tint, never a
     fill — a measured credential should not out-shout the category badges. */
  .cp-badge--fact { font-variant-numeric: tabular-nums; cursor: default; }
  .cp-cargorow { margin-top: 2px; }
  .cp-factrow { margin-top: 8px; }
  /* Variable-length data grids (1–3 insurance rows): odd count ⇒ the first item
     spans both columns, so the last line never strands a single figure. Same
     structural no-orphan rule the chip rows use. */
  .cp-datagrid--auto > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .cp-asof { margin-top: 14px; }
  @media (max-width: 640px) {
    .cp-tabs { margin-top: 16px; }
    .cp-tab { padding: 10px 6px; font-size: 11px; letter-spacing: 0.02em; }
    .cp-tab-lg { display: none; }
    .cp-tab-sm { display: inline; }
  }

  /* ── Shipper nav state + Directory Pro join/checkout surface ───────────── */
  /* THE SIGNED-IN HEADER IS AN ACCOUNT MENU, NOT AN INLINE ROW, AND THAT IS
     ARITHMETIC. Every earlier measurement of this header was taken logged OUT,
     where it fits with ~9px to spare. Hydrated, the slot laid out the email
     (capped at 200px), the "Directory Pro ✓" chip (125px) and Manage (53px)
     INLINE — 403px where the anonymous "Sign in" it replaces is 52px. The
     header card's content box is 938px at the 1024px collapse point and never
     exceeds 1134px (max-width 1180 less padding), so the demand was:

       brand 132 + nav 491 + [theme 40 + slot 403 + CTA 216] = 1310px

     …which overflows the card by 234px at 1024px and still by 68px at 1600px —
     the "Claim your listing — free" CTA pushed outside the card and the theme
     toggle clipped, on all ~334k directory pages. Measured: 0px anonymous,
     131px peak for a free shipper (1024–1132), 264px peak for a Pro shipper
     (1024 all the way to 1600). Dropping the email or shortening the chip does
     not close it — chip + Manage alone is 190px against a ~94px budget — so
     the identity folds into ONE compact control (~58px, i.e. the width the
     anonymous "Sign in" already spent) and the email, plan and billing action
     move into its panel.

     <details> because it needs no wiring: the drawer's groups already use it,
     and the slot is injected AFTER HEADER_SCRIPTS has bound [data-nav-dd], so
     a nav-dd panel here would never open. Open state is a 1px accent OUTLINE,
     never a fill (DESIGN-SYSTEM.md §4). Tokens only, both themes. */
  .nav-shipper { display: inline-flex; align-items: center; }
  .nav-shipper--auth { gap: 12px; }
  .nav-email { font-size: 13px; color: var(--ink-soft); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-pro-chip { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-chip); background: var(--success-bg); color: var(--success); border: 1px solid var(--success); white-space: nowrap; }
  .nav-upgrade, .nav-manage { white-space: nowrap; }

  .nav-acct { position: relative; }
  .nav-acct > summary {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 40px; padding: 4px 8px;
    list-style: none; cursor: pointer;
    background: transparent; color: var(--ink);
    border: 1px solid var(--border-strong); border-radius: 10px;
    transition: border-color 0.16s ease, color 0.16s ease;
  }
  .nav-acct > summary::-webkit-details-marker { display: none; }
  .nav-acct > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-acct > summary:hover, .nav-acct[open] > summary { border-color: var(--accent); color: var(--accent); }
  .nav-acct-ini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    font-size: 12px; font-weight: 700; line-height: 1;
    background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  }
  .nav-acct--pro .nav-acct-ini { background: var(--success-bg); color: var(--success); border-color: var(--success); }
  .nav-acct-caret { width: 12px; height: 12px; transition: transform 0.18s ease; }
  .nav-acct[open] .nav-acct-caret { transform: rotate(180deg); }
  .nav-acct-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    min-width: 240px; max-width: 320px; padding: 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  }
  html[data-theme="light"] .nav-acct-panel { box-shadow: 0 18px 42px rgba(10, 37, 64, 0.14); }
  .nav-acct-head { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
  /* The panel is where the address is finally allowed its full length — the
     200px ellipsis cap above exists only for the retired inline layout. */
  .nav-acct-panel .nav-email { max-width: none; overflow: visible; white-space: normal; overflow-wrap: anywhere; color: var(--ink); }
  .nav-acct-plan { font-size: 12px; color: var(--muted); }
  .nav-acct-panel a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
  .nav-acct-panel a:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .nav-acct > summary, .nav-acct-caret { transition: none; }
  }

  .join-shell { max-width: 720px; }
  .join-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card, 16px); padding: 24px; }
  .join-panel h2 { margin: 0 0 8px; font-size: 22px; text-align: left; }
  .join-sub { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
  .join-badge-row { margin-bottom: 12px; }
  .join-features { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
  .join-features li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink); line-height: 1.5; }
  .join-features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 700; }
  .join-price { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 0 16px; }
  .join-price b { font-size: 24px; font-weight: 700; color: var(--ink); }
  .join-price span { font-size: 13px; color: var(--ink-soft); }
  .join-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
  .join-plan { border: 1px solid var(--border); border-radius: var(--radius-input, 12px); background: var(--surface-2); padding: 16px; }
  .join-plan--pro { border-color: var(--accent); }
  .join-plan-head { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
  .join-plan-price { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
  .join-plan .join-features { margin-top: 0; }
  @media (max-width: 560px) { .join-split { grid-template-columns: 1fr; } }
  .join-form { display: grid; gap: 12px; margin: 0 0 12px; }
  .join-field { display: block; position: relative; border: 1px solid var(--border); border-radius: var(--radius-input, 12px); background: var(--surface-2); padding: 8px 12px; }
  .join-field:focus-within { border-color: var(--accent); }
  .join-field-label { display: block; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
  .join-field input { width: 100%; border: 0; background: transparent; color: var(--ink); font-size: 16px; padding: 2px 0 0; outline: none; }
  .join-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
  .join-actions .btn { flex: 1 1 auto; min-width: 180px; justify-content: center; }
  .join-msg { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); min-height: 20px; }
  .join-msg--ok { color: var(--success); }
  .join-msg--err { color: var(--error); }

  /* Premium GLASS on the shipper subscribe panel (funnel surface 3) — the
     $19/mo Directory Pro path should read as premium as the trucker pricing
     flagship. Regular-material glass + accent outline/glow; the input FIELDS
     (.join-field) keep their SOLID --surface-2 fill (glass never sits behind
     typed text). Directory is dark by default (style.css :root) with a
     html[data-theme="light"] override. -webkit-backdrop-filter is paired and
     an @supports-not SOLID fallback ships. */
  .join-panel {
    background: rgba(34, 40, 42, 0.60);
    border: 1px solid rgba(13, 60, 252, 0.55);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow:
      0 0 0 1px rgba(13, 60, 252, 0.22),
      0 10px 34px rgba(13, 60, 252, 0.16),
      0 8px 32px rgba(0, 0, 0, 0.30);
  }
  html[data-theme="light"] .join-panel {
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(13, 60, 252, 0.45);
    box-shadow:
      0 0 0 1px rgba(13, 60, 252, 0.14),
      0 12px 40px rgba(13, 60, 252, 0.12),
      0 8px 32px rgba(10, 37, 64, 0.10);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .join-panel { background: rgba(34, 40, 42, 0.98); }
    html[data-theme="light"] .join-panel { background: rgba(255, 255, 255, 0.98); }
  }

  .dir-upgrade-banner { border: 1px solid var(--border); border-radius: var(--radius-card, 16px); padding: 16px; margin-bottom: 16px; font-size: 15px; line-height: 1.5; color: var(--ink); }
  .dir-upgrade-banner strong { color: var(--ink); }
  .dir-upgrade-banner a { color: var(--accent); }
  .dir-upgrade-banner--ok { background: var(--success-bg); border-color: var(--success); }
  .dir-upgrade-banner--info { background: var(--accent-soft); border-color: var(--accent); }

  /* Below the nav's collapse point the header is brand + theme + CTA + burger,
     so the hydrated shipper account slot (email / Pro chip / Manage) is hidden
     to avoid crowding + horizontal overflow in the top bar. Matches the single
     canonical breakpoint in nav-unify.css (the header collapses at ≤1023px). */
  @media (max-width: 1023px) {
    .nav-shipper { display: none; }
  }
  @media (max-width: 640px) {
    .nav-email { display: none; }
    .join-panel { padding: 16px; }
    .join-actions .btn { flex: 1 1 100%; }
  }
  /* ── Saved lists (Directory Pro, PR D) ──────────────────────────────────
     The "Save" affordance on cards + profile, its popover, and the saved-lists
     page rows. Theme-aware, tokens only. */
  .cp-headactions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  /* Primary shipper action group (Request a rate + Save). flex-wrap keeps >=2 per
     line where they fit and stacks each control full-width otherwise — never a
     stranded orphan, no horizontal overflow at 375px. */
  .cp-headcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
  .cp-rfq-btn { white-space: nowrap; }
  @media (max-width: 640px) {
    .cp-headactions { align-items: flex-start; }
    .cp-headcta { justify-content: flex-start; }
  }
  .qf-save { position: relative; display: inline-flex; }
  .cc-sel { display: flex; flex-direction: column; }
  .cc-sel .carrier-card { flex: 1 1 auto; }
  .qf-save-btn { display: inline-flex; align-items: center; gap: 6px; }
  .qf-save-ic { font-size: 15px; line-height: 1; font-weight: 700; }
  .qf-save-pop { position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); width: 260px; max-width: 80vw;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.28); padding: 12px; }
  .qf-save-pop h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
  .qf-save-pop p { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
  .qf-save-lists { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; margin-bottom: 8px; }
  .qf-save-list { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: var(--ink); cursor: pointer; }
  .qf-save-list:hover, .qf-save-list:focus-visible { border-color: var(--accent); }
  .qf-save-list .n { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
  .qf-save-list[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
  .qf-save-new { display: flex; gap: 8px; margin-top: 8px; }
  .qf-save-new input { flex: 1 1 auto; min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: var(--ink); }
  .qf-save-msg { margin: 8px 0 0; font-size: 12px; color: var(--accent); }
  .qf-save-msg--err { color: var(--ink-soft); }
  .qf-save-cta { display: block; margin-top: 8px; }

  /* Saved-lists page */
  .sl-wrap { display: flex; flex-direction: column; gap: 16px; }
  .sl-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .sl-list > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 16px 20px; font-size: 16px; font-weight: 600; color: var(--ink); }
  .sl-list > summary::-webkit-details-marker { display: none; }
  .sl-list > summary .n { font-size: 12px; color: var(--muted); font-family: var(--font-mono); font-weight: 500; }
  .sl-body { padding: 0 20px 20px; }
  .sl-empty { color: var(--muted); font-size: 13px; margin: 0; }
  .sl-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-top: 1px solid var(--border); }
  .sl-row .lk { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
  .sl-row .lk:hover { color: var(--accent); }
  .sl-row .sub { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
  .sl-rm { flex: 0 0 auto; }

  /* ── Two-audience band (directory landing) ──────────────────────────────
     Shipper value-prop + RFQ/Directory Pro entry, shown as a peer to the
     carrier "Claim your listing" path. Tokens only, theme-aware, left-aligned.
     auto-fit → 2 columns on desktop, a clean single-column stack on mobile. */
  .dir-audience { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .aud-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; }
  .aud-eyebrow { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
  .aud-card h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.2; text-align: left; }
  .aud-lead { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
  .aud-card .join-features { margin-top: 14px; }
  .aud-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .aud-cta-row .btn { flex: 1 1 180px; justify-content: center; }
  @media (max-width: 640px) {
    .aud-card { padding: 18px; }
    .aud-cta-row .btn { flex: 1 1 100%; }
  }

  /* ── Glass tokens (directory-local; canonical DESIGN-SYSTEM values) ────────
     landing-glass.css isn't linked on directory pages, so we define the few
     glass tokens the toolbar / action bar / modal need here. rgba() literals are
     NOT flagged by the hardcoded-color guard. Dark-default base + light override
     (mirrors style.css theming). Solid fallbacks (*-solid) feed the @supports
     no-backdrop-filter path so embedded / privacy contexts stay readable. */
  :root {
    --glass-ultra-bg: rgba(18, 22, 26, 0.62);
    --glass-ultra-brd: rgba(255, 255, 255, 0.10);
    --glass-ultra-solid: rgba(18, 22, 26, 0.97);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  }
  html[data-theme="light"] {
    --glass-ultra-bg: rgba(255, 255, 255, 0.64);
    --glass-ultra-brd: rgba(255, 255, 255, 0.55);
    --glass-ultra-solid: rgba(255, 255, 255, 0.98);
    --glass-shadow: 0 8px 32px rgba(10, 37, 64, 0.12);
  }

  /* ── D1: unified results toolbar — filters entry + count + sort as ONE cluster.
     Replaces the old separate results-bar + applied-chips rows. The mobile rail
     "Filters" toggle is relocated INTO this bar (see .rt-main .rail-toggle) so the
     filter entry point and the sort control read as one control group. */
  .results-toolbar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
  .rt-main { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
  .rt-main .rc { font-size: 15px; min-width: 0; margin-right: auto; }
  .rt-main .rc b { font-family: var(--font-mono); color: var(--accent); font-size: 20px; }
  .rt-main .sort-ctl { flex: 0 0 auto; }
  .rt-main .rail-toggle { display: none; } /* desktop: rail always visible, no toggle */
  .results-toolbar .applied-chips { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); }

  /* ── D4: fold long facet lists (Show more / Show less). Rendered OPEN so no-JS
     + crawlers see every facet link; the fold script collapses it and reveals the
     toggle. True height animation via grid-template-rows 0fr↔1fr, reduced-motion
     guarded. Selected/again = accent text, never a bright fill. */
  .facet-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.22s ease; }
  .facet-fold[data-collapsed="1"] { grid-template-rows: 0fr; }
  .facet-fold > .facet-fold-inner { overflow: hidden; min-height: 0; }
  .facet-more { display: inline-flex; align-items: center; gap: 6px; margin: 8px 2px 2px; padding: 4px 6px; background: transparent; border: 0; color: var(--accent); font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
  .facet-more:hover { text-decoration: underline; }
  .facet-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  .facet-more .facet-more-ico { font-size: 9px; transition: transform 0.18s ease; }
  .facet-more[aria-expanded="true"] .facet-more-ico { transform: rotate(180deg); }
  @media (prefers-reduced-motion: reduce) { .facet-fold, .facet-more .facet-more-ico { transition: none; } }

  /* ── Category accordions — each facet-group's <h3> header toggles its body.
     Rendered OPEN (no-JS + crawlers see every facet link); ACCORDION_SCRIPT
     folds them all on load so the rail is compact and results lead. Height
     animates via grid-template-rows 0fr↔1fr, reduced-motion guarded. */
  .facet-acc-h { margin: 0; }
  .facet-acc-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
  .facet-acc-ttl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-family: var(--font-mono); }
  .facet-acc-btn:hover .facet-acc-ttl { color: var(--ink-soft); }
  .facet-acc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  .facet-acc-ico { flex: 0 0 auto; font-size: 9px; color: var(--muted); transition: transform 0.18s ease; }
  .facet-group[data-acc="open"] .facet-acc-ico { transform: rotate(180deg); }
  .facet-acc-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.22s ease; margin-top: 8px; }
  .facet-group[data-acc="closed"] .facet-acc-body { grid-template-rows: 0fr; margin-top: 0; }
  .facet-acc-body > .facet-acc-inner { overflow: hidden; min-height: 0; }
  @media (prefers-reduced-motion: reduce) { .facet-acc-body, .facet-acc-ico { transition: none; } }

  /* ── D2: multi-select save — action-bar "Save selected (N)" + list-picker /
     empty-state modal. The (N) suffix only shows once ≥1 card is ticked. */
  .qf-ab-save[data-count="0"] .qf-ab-saven { display: none; }
  .qf-modal-backdrop { position: fixed; inset: 0; z-index: 2147482600; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 7, 12, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; }
  .qf-modal-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.18s ease; }
  .qf-modal { width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--glass-ultra-bg); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--glass-ultra-brd); border-radius: 16px; box-shadow: var(--glass-shadow); padding: 22px; transform: translateY(10px) scale(0.98); transition: transform 0.18s ease; }
  .qf-modal-backdrop.open .qf-modal { transform: none; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .qf-modal { background: var(--glass-ultra-solid); } }
  @media (prefers-reduced-motion: reduce) { .qf-modal-backdrop, .qf-modal { transition: opacity 0.18s ease; } .qf-modal { transform: none; } }
  .qf-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
  .qf-modal-head h2 { margin: 0; font-size: 18px; line-height: 1.25; color: var(--ink); }
  .qf-modal-x { flex: 0 0 auto; background: transparent; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 6px; }
  .qf-modal-x:hover { color: var(--ink); }
  .qf-modal-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .qf-modal p { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
  .qf-modal-steps { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .qf-modal-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
  .qf-modal-steps .n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); font-family: var(--font-mono); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
  .qf-modal-lists { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; margin: 4px 0 14px; }
  .qf-modal-list { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font-size: 14px; text-align: left; cursor: pointer; }
  .qf-modal-list:hover, .qf-modal-list:focus-visible { border-color: var(--accent); outline: none; }
  .qf-modal-list .n { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
  .qf-modal-newlbl { display: block; font-size: 12px; font-family: var(--font-mono); color: var(--muted); margin: 0 0 6px; }
  .qf-modal-new { display: flex; gap: 8px; }
  .qf-modal-new input { flex: 1 1 auto; min-width: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 6px; padding: 10px 12px; font-size: 14px; font-family: inherit; min-height: 44px; }
  .qf-modal-new input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .qf-modal-msg { margin: 12px 0 0; font-size: 13px; color: var(--accent); }
  .qf-modal-msg--err { color: var(--ink-soft); }
  .qf-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

  @media (max-width: 900px) {
    /* Relocated rail toggle sits inline in the toolbar (not the old full-width
       bar): auto width, no bottom margin, squared to match the sort control. */
    .rt-main .rail-toggle { display: inline-flex; width: auto; margin: 0; }
  }

  /* Complete city index (/directory/{state}/cities) — a dense A-Z link list.
     Appended at the END of DIRECTORY_CSS on purpose: the spacing/colour guards
     are line-based, so inserting mid-file renumbers every later baseline. */
  .ci-grp { margin: 0 0 18px; }
  .ci-grp:last-child { margin-bottom: 0; }
  .ci-ltr {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .ci-grp .dir-chip { font-size: 13px; }
  .ci-grp .dir-chip .muted-small { margin-left: 6px; opacity: 0.7; }

  /* Decade jump links under the numbered pager on long hub series. Keeps every
     page of a 146-page city hub within two hops of page 1. */
  .dir-pagejumps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 8px;
  }
  .dir-pagejumps a {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 6px;
  }
  .dir-pagejumps a:hover { color: var(--text); background: var(--surface-2); }

  /* ── Directory subsite footer — grouped, not a flat link soup ────────────
     It used to be ONE centred inline row of 11 unlabelled links, which told the
     visitor nothing about which of them were for them. It now mirrors the three
     header menus IN THE HEADER'S OWN ORDER — For Carriers & Brokers, then For
     Shippers, then Free Tools — and closes with Company, exactly like the
     marketing PREMIUM_FOOTER. (The comment used to claim header order while the
     markup ran For Shippers first; code and comment now agree, and the order is
     asserted in navInformationArchitecture.test.ts.) Column headings are
     LEFT-aligned (the base .site-footer centres its text — headings never
     centre, per the standing rule), and the legal line keeps the centred
     utility treatment.

     THE COMPANY COLUMN IS ALSO HOW /partners BECAME REACHABLE. Partners &
     affiliates is a revenue surface that existed in exactly one place on the
     whole site — the Company column of PREMIUM_FOOTER — so the ~334k-page
     directory subsite, which uses this footer and not that one, linked to it
     from nowhere at all.

     TRACK LADDER — 4 → 2 → 1, and the fourth column is what makes that legal.
     With N columns in T tracks the last row holds "N mod T" columns, so any T
     where "N mod T === 1" strands one column alone (DESIGN-SYSTEM.md §8). At
     N=3 the only orphan-free ladder was 3 → 1, and the "repeat(2, …)" rule that
     shipped here produced exactly the forbidden 2+1 — FREE TOOLS alone beside
     207–344px of dead space from 421 to 720px. At N=4 both 4 and 2 divide
     cleanly, so the mid band is a true 2×2 and only the ≤640px stack remains. */
  .site-footer .dirfoot {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 32px;
    text-align: left;
  }
  .site-footer .dirfoot-col { display: flex; flex-direction: column; align-items: flex-start; }
  .site-footer .dirfoot-head {
    margin: 0 0 8px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink);
  }
  .site-footer .dirfoot-col a { display: block; margin: 0; padding: 4px 0; font-size: 13px; }
  .site-footer .dirfoot-legal {
    max-width: 1120px;
    margin: 24px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
    /* Separator-joined links wrapped 4+1 at 375px, stranding the last one on a
       line of its own. Balance splits them evenly instead. Support moved up
       into the Company column, so this line is now © + three links.

       NO mailto: IN THE DIRECTORY CHROME. The Company column reaches us via
       /support rather than a mailto — carrierProfileContact.test.ts asserts a
       contact-hidden carrier profile contains NO "mailto:" anywhere in the
       page, and a site-wide address in the footer would defeat that check on
       every one of the ~334k profiles. */
    text-wrap: balance;
  }
  @media (max-width: 980px) {
    .site-footer .dirfoot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  }
  /* PHONE: TWO COLUMNS, NOT ONE TALL STACK (Alex, 2026-09). N=4 here, and
     4 mod 2 === 0, so the two-track grid the 980px step already establishes is
     orphan-free at 375px as well — the phone step only tightens the gutter. */
  @media (max-width: 640px) {
    .site-footer .dirfoot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  }