/* ============================================================
   Worldly Treasures Liquidators:Inventory Page Template
   Design tokens + base + components
   Type: Inter Tight / Inter / IBM Plex Mono / Source Serif 4 (italic accent)

   Ported verbatim from design_handoff_inventory_page/styles.css (ADR-0016).
   Byte-faithful: no className/DOM change. The PHP render reproduces the
   prototype DOM exactly; only the SOURCE of copy/data moved to pageContext.
   ============================================================ */

:root {
  /* Brand palette */
  --navy: #1d2c3c;
  --navy-700: #243748;
  --navy-600: #2e4255;
  --gold: #d7a849;
  --gold-light: #f2cd7c;
  --gold-dark: #a87925;
  --ivory: #f3f3f3;
  --muted-ivory: #f5f0e6;
  --burgundy: #7c1d1d;
  --teal: #1d7c6f;
  --copper: #d17b28;
  --charcoal: #2e2e2e;

  /* Semantic */
  --paper: #f7f4ec;          /* warm page base */
  --paper-2: #efe9db;        /* slightly deeper warm */
  --ink: #1d2c3c;
  --ink-soft: #4a5663;
  --ink-faint: #8a93a0;
  --line: #d9d1bf;           /* warm hairline */
  --line-soft: #e6dfcf;
  --card: #fbf9f3;

  /* Type */
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Source Serif 4", Georgia, serif;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 3px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--gold); color: var(--navy); }

/* ---------- Typographic primitives ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow .idx { color: var(--gold-dark); }
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--gold-dark);
  display: inline-block;
}

.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-dark);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  color: var(--ink);
}

.section-title {
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.025em;
}

.mono { font-family: var(--mono); }

/* ---------- Layout shell ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: clamp(56px, 7vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.section-head p.lede {
  max-width: 38ch;
  color: var(--ink-soft);
  font-size: 15px;
  margin: 12px 0 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 13px 22px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--paper);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: var(--cta-bg, var(--gold)); border-color: var(--cta-bg, var(--gold)); color: var(--cta-fg, var(--navy)); }
.btn--gold:hover { filter: brightness(1.06); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--paper); }
.btn--sm { padding: 9px 14px; font-size: 11px; }
.btn--block { width: 100%; justify-content: center; }
.btn--on-navy { border-color: rgba(255,255,255,.25); background: transparent; color: var(--paper); }
.btn--on-navy:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

.arrow { font-family: var(--mono); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  background: var(--navy);
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  z-index: 60;
}
.ticker--sticky { position: sticky; top: 0; }
.ticker__inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 0;
  height: 38px; padding: 0 var(--gutter);
  overflow: hidden;
}
.ticker__live {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; padding-right: 22px;
  border-right: 1px solid rgba(255,255,255,.16);
  color: var(--gold-light);
  flex-shrink: 0;
}
.ticker__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(29,124,111,.7);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(29,124,111,.6); }
  70% { box-shadow: 0 0 0 7px rgba(29,124,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,124,111,0); }
}
.ticker__feed { overflow: hidden; flex: 1; margin-left: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.ticker__track { display: inline-flex; gap: 38px; white-space: nowrap; animation: marquee 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker__item { color: rgba(247,244,236,.78); }
.ticker__item .up { color: var(--teal); }
.ticker__item .sold { color: var(--gold); }
.ticker__item b { color: var(--paper); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__dot { animation: none; }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 76px; padding: 0 var(--gutter);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; transition: color .15s;
}
.nav a:hover { color: var(--navy); }
.nav a.active { color: var(--navy); }
.header__cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 940px) { .nav { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(168,121,37,.10) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  opacity: .6;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: 48px; align-items: end;
  padding: clamp(48px, 6vw, 86px) 0 clamp(40px, 5vw, 64px);
}
.hero h1 {
  font-size: clamp(46px, 7.2vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.035em;
}
.hero h1 .accent { font-size: 0.92em; }
.hero__sub {
  margin: 26px 0 30px;
  max-width: 46ch; font-size: 16.5px; color: var(--ink-soft);
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Live count panel */
.live {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 22px 24px 20px;
  border-radius: var(--radius);
}
.live__top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.live__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.live__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(86px, 11vw, 150px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.live__caption { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.04em; margin-top: 14px; }
.live__updated { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .live { max-width: 320px; margin-left: auto; margin-right: auto; }
  /* Mobile hero: center the full stack (left-aligned reads poorly on phones, build-26).
     Desktop unchanged. Eyebrow is inline-flex and h1/sub are blocks, so text-align
     centers them; the CTA row and qualifier pill are flex, so they need justify-content. */
  .hero__copy { text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__cta { justify-content: center; }
  /* Pill wrap discipline (Joe's mobile catch, 2026-07-03): the qualifier text breaks only
   BETWEEN segments, never mid-phrase, and wrapped lines center. Shared by the homepage,
   archive, and container hero pills. */
.hero__qual { text-align: center; }
.hero__qual-seg { white-space: nowrap; }

.hero__qual { justify-content: center; }
  .hero__side { align-items: center; }
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats {
  background: var(--muted-ivory);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 26px var(--gutter); border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: 0; }
.stat__k { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; }
.stat__k .accent { font-size: 0.7em; }
.stat__l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
@media (max-width: 760px) { .stats__inner { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } }

/* ============================================================
   INVENTORY TOOLBAR
   ============================================================ */
/* Filter toolbar, Option A (Joe, build-75). Each facet (Category, Vendor, ...) is a row
   with its label in a fixed left gutter so the chip rows line up; below them a divided
   control bar holds the load count (left) and the Manifested toggle + Sort (right).
   Hairline/mono aesthetic, structured not boxed. Shared by the /truckloads/ archive and
   every container page via WTL_Inventory_Render::filter_toolbar(). */
.toolbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: 14px;
}
.toolbar__group { display: flex; gap: 14px; align-items: baseline; margin-bottom: 13px; }
.toolbar__label {
  flex: 0 0 78px; align-self: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.toolbar__chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--gold-dark); color: var(--navy); }
.chip--on { background: var(--navy); border-color: var(--navy); color: var(--paper); }
/* Divided control bar under the facet rows. */
.toolbar__controls {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.toolbar__spacer { flex: 1 1 auto; }
.toolbar__count { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }
.toolbar__count b { color: var(--navy); }
/* Manifested = one toggle box with a checkbox square that fills when active. */
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.toggle__box {
  width: 13px; height: 13px; flex: none; position: relative;
  border: 1px solid var(--ink-faint); border-radius: 3px;
}
.toggle:hover { border-color: var(--gold-dark); color: var(--navy); }
.toggle.chip--on { border-color: var(--navy); color: var(--navy); }
.toggle.chip--on .toggle__box { background: var(--navy); border-color: var(--navy); }
.toggle.chip--on .toggle__box::after {
  content: ""; position: absolute; left: 3.5px; top: 0.5px;
  width: 4px; height: 8px; border: solid var(--paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
/* Soft image disclaimer under the toolbar: muted, single, never per-tile (Joe, 2026-06-22). */
.grid__disclaimer { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink-soft); opacity: 0.85; margin: 0 0 20px; }
.select {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--navy); cursor: pointer;
}
/* Mobile: the label sits above its chips, and the control bar wraps with Sort full-width.
   Mobile-first house rule (Joe). */
@media (max-width: 600px) {
  .toolbar__group { flex-direction: column; align-items: stretch; gap: 7px; margin-bottom: 14px; }
  .toolbar__label { flex: none; }
  .toolbar__controls { flex-wrap: wrap; }
  .toolbar__spacer { display: none; }
  .toolbar .select { flex: 1 1 auto; }
}
.density-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.density-toggle button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 12px; border: 0; background: var(--card); color: var(--ink-soft);
}
.density-toggle button.on { background: var(--navy); color: var(--paper); }

/* ============================================================
   LOAD GRID:GALLERY
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tile {
  background: var(--card);
  padding: 0;
  display: flex; flex-direction: column;
  position: relative;
  transition: background .15s;
}
.tile:hover { background: #fff; }
.tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 8px, var(--paper) 8px 16px);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tile__media .ph {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); background: rgba(247,244,236,.82); padding: 5px 9px; border-radius: 2px;
}
.tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tile__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.tile__vendor {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em;
  color: var(--navy); background: rgba(247,244,236,.85); padding: 1px 9px; border-radius: 2px;
}

.badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; padding: 4px 8px; border-radius: 2px; line-height: 1;
  display: inline-flex; align-items: center; gap: 5px;
}
.badge--manifested { background: var(--teal); color: #fff; }
.badge--unmanifested { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.badge--new { background: var(--gold); color: var(--navy); }
.badge--pending { background: var(--muted-ivory); color: var(--gold-dark); border: 1px dashed var(--gold-dark); }

.tile__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.tile__cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 6px; }
.tile__title { font-size: 17px; font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; }
.tile__meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-top: 8px; letter-spacing: 0.02em; }
.tile__meta .sep { color: var(--line); margin: 0 6px; }
.tile__desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 10px; }
.tile__region { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 12px; }
.pin { width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--copper); display: inline-block; flex-shrink: 0; }

.tile__foot { margin-top: auto; padding-top: 14px; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.price__retail { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); text-decoration: line-through; }
.price__now { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--gold-dark); letter-spacing: -0.02em; }
.price__now.clean { color: var(--gold-dark); }
.price__contact { font-family: var(--display); font-weight: 650; font-size: 19px; color: var(--navy); }
.price__tier { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); width: 100%; margin-bottom: 2px; }
.price__note { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-faint); width: 100%; margin-top: 3px; }
.tile__actions { display: flex; align-items: center; gap: 10px; }
.tile__manifest { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tile__manifest:hover { color: var(--navy); border-color: var(--gold-dark); }
.tile__manifest-ext { font-size: 9px; vertical-align: super; opacity: 0.7; border: 0; }
.tile__date { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.06em; }

/* SOLD state */
.tile--sold .tile__media { filter: grayscale(.5) opacity(.85); }
.sold-stamp {
  position: absolute; z-index: 3; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-9deg);
  font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: 0.04em;
  color: var(--burgundy); border: 3px solid var(--burgundy); padding: 4px 16px; border-radius: 3px;
  background: rgba(247,244,236,.7); text-transform: uppercase;
}
.tile--sold .price__now, .tile--sold .price__contact { color: var(--ink-faint); }

/* build-150: Discontinued rides the sold treatment with its own stamp text (a longer
   word, so the stamp steps down a size to keep its rotation inside the tile). */
.sold-stamp--disc { font-size: 20px; padding: 4px 12px; letter-spacing: 0.03em; }

/* build-150: Currently Unavailable. Softly dimmed, NOT grayscaled (it is expected
   back); the navy badge names the state and the alert form is the tile's action. */
.tile--unavail .tile__media { filter: opacity(.88); }
.tile--unavail .price__now, .tile--unavail .price__contact { color: var(--ink-faint); }
.badge--unavail { background: var(--navy); color: #f7f4ec; }

/* ============================================================
   LOAD GRID:DATA ROW (Bloomberg density)
   ============================================================ */
.rows { border: 1px solid var(--line); background: var(--card); }
.rows__head, .row {
  display: grid;
  grid-template-columns: 64px 1.7fr 0.9fr 1fr 0.7fr 150px;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}
.rows__head {
  height: 38px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  background: var(--muted-ivory);
}
.row { min-height: 64px; border-bottom: 1px solid var(--line-soft); transition: background .12s; padding-top: 12px; padding-bottom: 12px; }
.row:last-child { border-bottom: 0; }
.row:hover { background: #fff; }
.row__vendor { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); }
.row__title { font-size: 14px; font-weight: 600; line-height: 1.2; }
.row__cat { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); margin-top: 3px; }
.row__sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.row__meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.row__price .price__now { font-size: 18px; }
.row__price .price__retail { font-size: 10.5px; }
.row__price .price__contact { font-size: 14px; }
.row__date { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.row__action { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.row--sold { opacity: .72; }
.row__soldtag { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; color: var(--burgundy); border: 1px solid var(--burgundy); padding: 3px 7px; border-radius: 2px; }
@media (max-width: 880px) {
  .rows__head { display: none; }
  .row { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 16px 16px; }
  .row__action { justify-content: flex-start; }
}

/* Load-more / thin */
.grid-foot { display: flex; justify-content: center; padding: 32px 0 0; }

/* ============================================================
   EDITORIAL (evergreen context)
   ============================================================ */
.editorial { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 80px); }
.editorial__aside .pull {
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--navy);
  border-left: 2px solid var(--gold); padding-left: 18px;
}
.editorial__body { columns: 2; column-gap: 38px; font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.editorial__body p { margin: 0 0 16px; break-inside: avoid; }
.editorial__body .dropcap::first-letter {
  font-family: var(--display); font-weight: 700; font-size: 52px; float: left; line-height: 0.8; padding: 4px 10px 0 0; color: var(--navy);
}
@media (max-width: 820px) { .editorial { grid-template-columns: 1fr; } .editorial__body { columns: 1; } }

/* ============================================================
   HOW WE WORK
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step { background: var(--paper); padding: 26px 22px 30px; }
.step__n { font-family: var(--mono); font-size: 12px; color: var(--gold-dark); letter-spacing: 0.1em; }
.step__t { font-size: 15px; font-weight: 650; margin: 14px 0 8px; }
.step__d { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Three steps */
.bigsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.bigstep__n { font-family: var(--serif); font-style: italic; font-size: 40px; color: var(--gold-dark); }
.bigstep__t { font-size: 21px; font-weight: 680; margin: 10px 0 10px; letter-spacing: -0.02em; }
.bigstep__d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 760px) { .bigsteps { grid-template-columns: 1fr; } }

/* ============================================================
   SOURCES (dark navy)
   ============================================================ */
.dark { background: var(--navy); color: var(--paper); }
.dark .eyebrow { color: rgba(247,244,236,.55); }
.dark .eyebrow::before { background: var(--gold); }
.dark .section-title { color: var(--paper); }
.dark .accent { color: var(--gold-light); }
.sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); margin-top: 8px; }
.source { background: var(--navy); padding: 22px 24px; font-family: var(--serif); font-style: italic; font-size: 18px; color: rgba(247,244,236,.92); }
.source span { display: block; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
@media (max-width: 760px) { .sources { grid-template-columns: 1fr; } }

/* ============================================================
   TRUST BLOCK:Protected Buyer Funds
   ============================================================ */
.trust {
  background: var(--muted-ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  padding: 30px 36px;
}
.trust__seal {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid var(--teal); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-align: center; line-height: 1.2;
  flex-shrink: 0;
}
.trust__t { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.trust__d { font-size: 14px; color: var(--ink-soft); margin-top: 6px; max-width: 60ch; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr; text-align: left; gap: 18px; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quote { background: var(--card); padding: 30px 32px; }
.quote__stars { color: var(--gold); letter-spacing: 3px; font-size: 13px; }
.quote__t { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--navy); margin: 14px 0 18px; }
.quote__who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.quote__who b { color: var(--navy); font-weight: 600; }
@media (max-width: 700px) { .quotes { grid-template-columns: 1fr; } }

/* ============================================================
   BROWSE THE INDEX
   ============================================================ */
.index-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px); }
.index-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.index-links { display: flex; flex-wrap: wrap; gap: 7px; }
.index-links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink-soft); text-decoration: none; transition: all .15s;
}
.index-links a:hover { border-color: var(--gold-dark); color: var(--navy); background: var(--card); }
.index-links a .n { color: var(--ink-faint); margin-left: 6px; }
@media (max-width: 760px) { .index-block { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; padding: 20px 0;
  display: flex; align-items: center; gap: 16px; color: var(--navy);
}
.faq__q .qn { font-family: var(--mono); font-size: 11px; color: var(--gold-dark); }
.faq__q .qt { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; flex: 1; }
.faq__q .qx { font-family: var(--mono); font-size: 18px; color: var(--ink-faint); transition: transform .2s; }
.faq__item.open .qx { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.faq__a .inner { padding: 0 0 22px 43px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; max-width: 70ch; }
.faq__item.open .faq__a { max-height: 320px; }

/* ============================================================
   NOTIFY / ALERT CAPTURE
   ============================================================ */
.notify {
  background: var(--navy); color: var(--paper);
  border-radius: var(--radius); padding: clamp(30px, 4vw, 48px);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
.notify h3 { color: var(--paper); font-size: clamp(24px, 3vw, 34px); }
.notify h3 .accent { color: var(--gold-light); }
.notify p { color: rgba(247,244,236,.72); font-size: 14.5px; margin: 10px 0 0; max-width: 50ch; }
.notify__form { display: flex; gap: 8px; flex-wrap: wrap; }
.field {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--paper);
  min-width: 230px;
}
.field::placeholder { color: rgba(247,244,236,.4); }
.field:focus { outline: none; border-color: var(--gold); }
.notify__ok { font-family: var(--mono); font-size: 13px; color: var(--gold-light); }
@media (max-width: 720px) { .notify { grid-template-columns: 1fr; } }

/* Absence-alert capture (build-21): SMS-only, on a LIGHT surface (sold tile + thin state).
   The base .field is tuned for the dark notify panel, so .field--light re-skins it. */
.field--light { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.field--light::placeholder { color: var(--ink-faint); }
.alertform { display: flex; flex-direction: column; gap: 8px; }
.alertform__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; line-height: 1.45; color: var(--ink-soft); max-width: 56ch; cursor: pointer; }
.consent input { margin-top: 2px; flex-shrink: 0; }
.tile__alert { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.tile__alert > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color .15s, color .15s;
}
.tile__alert > summary::-webkit-details-marker { display: none; }
.tile__alert > summary:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.tile__alert[open] > summary { color: var(--gold-dark); border-color: var(--gold-dark); margin-bottom: 10px; }
/* build-180: two inputs (first name + phone) now share the row with the button. A bare
   flex: 1 with min-width: 0 let both text fields shrink to unreadable slivers before
   wrapping; a real flex-basis + floor makes the row wrap the button (or a field) onto its
   own line once the row can't fit both fields at a legible width, on top of the existing
   sub-420px column stack. */
.tile__alert .field--light { flex: 1 1 130px; min-width: 96px; }
.tile__alert .notify__ok { color: var(--teal); margin-top: 8px; }
@media (max-width: 420px) { .alertform__row { flex-direction: column; align-items: stretch; } }

/* ============================================================
   THIN / EMPTY STATE
   ============================================================ */
.thin {
  border: 1px dashed var(--line); background: var(--card); border-radius: var(--radius);
  padding: 36px 32px; margin-bottom: 30px;
}
.thin__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.thin__head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--copper); }
.thin h3 { font-size: 20px; }
.thin p { font-size: 14px; color: var(--ink-soft); margin: 6px 0 22px; max-width: 64ch; }
.thin__alt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.finalcta { text-align: center; padding: clamp(64px, 9vw, 130px) 0; }
.finalcta h2 { font-size: clamp(38px, 6vw, 86px); line-height: 0.96; letter-spacing: -0.035em; }
.finalcta p { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 28px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy); color: rgba(247,244,236,.7); }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding: 56px var(--gutter) 30px; max-width: 1320px; margin: 0 auto; }
.footer__brand { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--paper); margin-bottom: 14px; }
.footer__logo { display: block; width: 200px; max-width: 100%; height: auto; margin-bottom: 16px; }
.footer p.small { font-size: 13px; line-height: 1.6; max-width: 34ch; }
.footer h5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer a { color: rgba(247,244,236,.7); text-decoration: none; font-size: 13.5px; }
.footer a:hover { color: var(--paper); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); max-width: 1320px; margin: 0 auto; padding: 20px var(--gutter); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.disclaimer { font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: rgba(247,244,236,.45); letter-spacing: 0.02em; max-width: 90ch; }
.footer__meta { font-family: var(--mono); font-size: 10.5px; color: rgba(247,244,236,.45); letter-spacing: 0.06em; }
@media (max-width: 820px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__inner { grid-template-columns: 1fr; } }

/* ============================================================
   QUOTE MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(29,44,60,.55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 5vh, 64px) 16px; overflow-y: auto;
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper); border-radius: var(--radius); max-width: 520px; width: 100%;
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(29,44,60,.3);
  animation: rise .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise { from { transform: translateY(14px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.modal__head { padding: 22px 26px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal__head h3 { font-size: 22px; letter-spacing: -0.02em; }
.modal__head .sub { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; margin-top: 6px; }
.modal__x { background: none; border: 1px solid var(--line); border-radius: 50%; width: 32px; height: 32px; color: var(--ink-soft); font-size: 16px; flex-shrink: 0; }
.modal__x:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.modal__loadref {
  margin: 0 26px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.modal__loadref .vc { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--navy); }
.modal__loadref .info { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); line-height: 1.5; }
.modal__loadref .info b { color: var(--navy); }
/* Per-load manifest trust line (Phase 2 sub-step 1): wraps to its own row under the load reference.
   Populated live by inventory.js from the chosen tile's data-manifested; doctrine-safe per-load fact. */
.modal__loadref .modal__manifest-trust {
  flex-basis: 100%; padding-top: 8px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--navy);
  display: flex; align-items: center; gap: 6px;
}
.modal__loadref .modal__manifest-trust[hidden] { display: none; }
.modal__loadref .modal__manifest-trust[data-state="no"] { color: var(--ink-soft); }
.modal__loadref .modal__manifest-trust[data-state="yes"]::before { content: "\2713"; font-weight: 700; }
.modal__body { padding: 20px 26px 26px; }
.modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formfield { margin-bottom: 14px; }
.formfield label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 6px; }
.formfield input, .formfield select {
  width: 100%; font-family: var(--body); font-size: 14px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink);
}
.formfield input:focus, .formfield select:focus { outline: none; border-color: var(--gold-dark); }
.modal__note { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); line-height: 1.6; margin-top: 4px; }
.modal__freight { font-size: 12px; line-height: 1.5; color: var(--ink-soft); background: var(--muted-ivory); border-left: 2px solid var(--gold); padding: 9px 11px; border-radius: 4px; margin-top: 6px; }
.modal__freight b { color: var(--ink); }
.modal__success { padding: 44px 30px; text-align: center; }
.modal__success .check { width: 54px; height: 54px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 18px; }
.modal__success h3 { font-size: 24px; margin-bottom: 10px; }
.modal__success p { font-size: 14px; color: var(--ink-soft); max-width: 40ch; margin: 0 auto; }
.modal__params { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 18px; word-break: break-all; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 2px; }
@media (max-width: 520px) { .modal__row { grid-template-columns: 1fr; } }

/* Hidden utility for the JS-driven modal (server-rendered, toggled by inventory.js) */
[hidden] { display: none !important; }

/* ============================================================
   ELEVATION PASS (build-22): design + CRO
   ------------------------------------------------------------
   Layered on top of the verbatim ADR-0016 base above. Same design
   system (Inter Tight / Inter / IBM Plex Mono / Source Serif 4), same
   DOM and class names (the render contract + build-20/21 surfaces are
   untouched). This block refines treatment (paper grain, orchestrated
   motion, a dark navy hero, hover lift, burgundy closer) and adds the
   CRO components (price-floor qualifier, just-landed strip, mobile
   sticky bar, USP ticker pill, empty-state flip). Guardrails, every
   data-evt / data-wtl hook, and the absence-only alert model are
   preserved. Does NOT touch .header / .nav / .brand (build-20 nav,
   styled here + in site-nav.css).
   ============================================================ */

:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow-card: 0 1px 0 var(--line-soft), 0 18px 40px -28px rgba(29, 44, 60, .45);
  --header-h: 128px;
}
@media (max-width: 940px) { :root { --header-h: 88px; } }

/* Paper grain: a tactile, brand-neutral texture over the page. Fixed,
   non-interactive, below the chrome (ticker 60 / nav 80 / modal 200). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Keep the in-flow build-20 header bar above the grain overlay (the nav dropdown
   panels and drawer already carry higher z-index; this only lifts the bar itself). */
.header { position: relative; z-index: 10; }

/* Build-22 logo enlargement (Joe): the wordmark goes ~2.5x the build-20 40px mark.
   The header grows to fit it; --header-h (above) keeps the mobile drawer offset in
   site-nav.css in lockstep so the slide-in drawer still starts exactly below the
   header. NOTE: if wtl-logo.png looks soft at this size, it needs a higher-res source. */
.header__inner { height: var(--header-h); }
.brand img { height: 100px; width: auto; }
@media (max-width: 940px) { .brand img { height: 60px; } }

/* Buttons: lift + gold-light wash on hover (no fill pseudo, so unwrapped
   button text is never occluded), arrow nudges right. */
.btn .arrow { display: inline-block; transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--gold { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.btn--gold:hover {
  background: var(--gold-light); filter: none;
  transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(167, 121, 37, .7);
}

/* ---- Hero, elevated to a dark navy masthead ---- */
.hero { background: var(--navy); color: #fff; }
.hero::after {
  content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgba(215, 168, 73, .14), transparent 70%);
  pointer-events: none;
}
.hero__inner { z-index: 1; }
.hero .eyebrow { color: var(--gold); }
.hero .eyebrow .idx { color: var(--gold-light); }
.hero .eyebrow::before { background: var(--gold); }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--gold); }
.hero__sub { color: #cdd6e0; }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hero__copy { min-width: 0; }
.hero__side { display: flex; flex-direction: column; gap: 16px; align-self: center; }
.hero__side .live { box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .6); }

/* Hero price-floor qualifier pill (CRO 1). Category entry price, never a
   per-load number; pre-qualifies pallet-only traffic above the form. */
.hero__qual {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px;
  color: var(--gold-light); border: 1px solid rgba(215, 168, 73, .4);
  background: rgba(215, 168, 73, .08); padding: 9px 14px; border-radius: 999px;
}

/* Just-landed strip (CRO 2): newest real loads as a teaser. CODE + category
   + age only (guardrail-safe), light cards that pop on the navy hero. */
.justlanded__lab {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}
.justlanded__row { display: flex; gap: 8px; flex-wrap: wrap; }
.jl {
  flex: 1; min-width: 96px; text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 11px;
  display: flex; flex-direction: column; gap: 3px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.jl:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .6); }
.jl__code { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--navy); letter-spacing: -0.02em; }
.jl__cat { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); }
.jl__age { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-faint); }
/* Phase 2 slice 3: non-numeric top-categories teaser below the strip. Muted white to sit on the
   dark hero side beneath the row, dimmer than the .65 label so it reads as a secondary glance. */
.justlanded__teaser {
  margin-top: 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  line-height: 1.45; color: rgba(255, 255, 255, .5);
}

/* Delivery Coverage panel (build-183): region container pages only, above the
   live-count card in the hero side column. Dark panel with a gold left/border
   accent naming the DESTINATION states the region ships to (never sourcing/
   origin, guardrail #2). Text-flow wrap (no flex grid), so it wraps cleanly at
   any width down to 360px with zero extra breakpoints. */
.coverage {
  border: 1px solid rgba(215, 168, 73, .35);
  border-left: 3px solid var(--gold);
  background: rgba(0, 0, 0, .22);
  padding: 18px 20px;
  border-radius: var(--radius);
}
.coverage__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.coverage__states {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}
.coverage__states b { color: #fff; font-weight: 600; }
.coverage__dot { color: var(--gold-dark); }
@media (max-width: 400px) {
  .coverage { padding: 15px 16px; }
  .coverage__states { font-size: 12.5px; line-height: 1.65; }
}

/* Stats: bigger, tabular figures. */
.stat__k { font-size: clamp(30px, 4vw, 46px); font-variant-numeric: tabular-nums; }

/* Tiles: hover lift + depth instead of a flat bg swap. */
.tile { transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .15s; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(29, 44, 60, .7); z-index: 2; }

/* Editorial: warm muted band, sticky aside, mono byline, single-column body. */
.section--editorial { background: var(--muted-ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.editorial__by { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.section--editorial .editorial__body { columns: 1; }
.section--editorial .editorial__body p { max-width: 62ch; }
/* Sticky aside only on true desktop (>=940px), where the mobile sticky bar is
   hidden, so the mobile two-sticky budget (ticker + bar) is never exceeded. */
@media (min-width: 940px) { .section--editorial .editorial__aside { position: sticky; top: 96px; } }

/* Final CTA: burgundy closer with a faint dot field. */
.finalcta { background: var(--burgundy); color: #fff; position: relative; overflow: hidden; }
.finalcta::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px); background-size: 26px 26px;
}
.finalcta .wrap { position: relative; }
.finalcta h2 { color: #fff; }
.finalcta h2 .accent { color: var(--gold-light); }
.finalcta p { color: rgba(255, 255, 255, .7); }

/* Optional-field hint on the trimmed quote form (CRO 3, payload unchanged). */
.formfield label .opt { margin-left: 6px; font-size: 9px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }

/* USP ticker pill (CRO 5): the hourly-refresh differentiator, site-wide. */
.ticker__refresh {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0;
  padding-right: 18px; margin-right: 6px; border-right: 1px solid rgba(255, 255, 255, .16);
  color: var(--gold); font-weight: 600; letter-spacing: 0.08em;
}
.ticker__spin { display: inline-block; animation: spin 6s linear infinite; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* build-127: with the marquee hidden, the count's right separator dangled as a lone "|"
   after "available now" (Joe's phone catch, 2026-07-03). Drop it with the feed. */
@media (max-width: 768px) { .ticker__feed { display: none; } .ticker__live { border-right: 0; padding-right: 0; } }
@media (max-width: 430px) { .ticker__refresh { display: none; } }

/* Empty-state flip (CRO 6): the SMS alert is the primary action, browse-all
   is the secondary path; adjacency to in-stock peers stays. */
.alertform--primary { margin-top: 18px; }
.alertform--primary .alertform__row { max-width: 480px; }
.thin__browse { margin-top: 16px; }
.thin__adjacent { margin-top: 26px; }

/* Mobile sticky quote bar: bottom conversion rail, slides in past the hero.
   Mobile-only; with the sticky ticker that is the two-sticky budget. */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px var(--gutter); transform: translateY(110%); transition: transform .3s var(--ease);
}
.stickybar.show { transform: translateY(0); }
.stickybar__lc { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); display: flex; align-items: center; gap: 8px; }
.stickybar__lc b { color: #fff; }
@media (min-width: 940px) { .stickybar { display: none; } }

/* Orchestrated motion. Hero load stagger is pure CSS (resolves to visible
   even without JS). Scroll reveal is gated on body.wtl-anim, which inventory.js
   sets on init, so the page is fully visible if JS never runs (no hidden trap). */
.hl { opacity: 0; transform: translateY(20px); animation: heroIn .7s var(--ease) forwards; }
.hl-1 { animation-delay: .05s; } .hl-2 { animation-delay: .14s; } .hl-3 { animation-delay: .23s; }
.hl-4 { animation-delay: .32s; } .hl-5 { animation-delay: .42s; } .hl-6 { animation-delay: .5s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
/* build-115 (audit P-lcp): the H1 is the LCP element on every hero (container /
   archive / retarget). Painting it at opacity 0 behind a .14s delay added roughly
   300-900ms of mobile LCP on exactly the templates paid traffic lands on, so the
   H1 slides WITHOUT fading (visible from first paint); every other .hl keeps the
   approved fade-slide unchanged. */
h1.hl { opacity: 1; animation-name: heroInMove; }
@keyframes heroInMove { to { transform: none; } }
body.wtl-anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
body.wtl-anim .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hl { animation: none; opacity: 1; transform: none; }
  .ticker__spin { animation: none; }
  body.wtl-anim .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   HERO ELEVATION (build-23): "the inventory floor"
   ------------------------------------------------------------
   A craft pass on the hero, WITHIN the locked brand (navy / gold /
   Inter Tight / IBM Plex Mono / Source Serif 4 italic). An editorial
   headline meeting a live data instrument: layered navy atmosphere,
   a breathing gold skylight, a receding warehouse-floor grid, drawn
   hairline + underline on load, and the live count rebuilt as a
   premium terminal. Pure CSS, no markup / measurement / guardrail
   change; real treated warehouse photos drop into .hero__bg later.
   All effects fail safe (content shows if an effect is unsupported);
   motion is reduced-motion gated.
   ============================================================ */

/* Layered navy atmosphere: lit-from-above gradient, a gold "skylight"
   radial upper-right, a faint teal wash lower-left tying to the live pulse. */
.hero {
  background:
    radial-gradient(110% 80% at 86% -12%, rgba(215, 168, 73, .18), transparent 52%),
    radial-gradient(70% 60% at -8% 112%, rgba(29, 124, 111, .12), transparent 60%),
    linear-gradient(180deg, #213245 0%, #1d2c3c 50%, #16222e 100%);
}
/* Receding warehouse-floor grid: faint gold lines that fade up the frame. */
.hero__bg {
  background-image:
    linear-gradient(rgba(215, 168, 73, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 168, 73, .045) 1px, transparent 1px);
  background-size: 68px 68px, 68px 68px;
  background-position: center bottom;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 78%);
  mask-image: linear-gradient(180deg, transparent 6%, #000 78%);
}
/* The skylight glow breathes slowly (position inherited from the base rule). */
.hero::after {
  width: 64%; height: 130%;
  background: radial-gradient(closest-side, rgba(215, 168, 73, .20), transparent 72%);
  animation: heroGlow 9s ease-in-out infinite;
}
@keyframes heroGlow { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* Eyebrow: a precise mono index; its gold hairline draws in on load. */
.hero .eyebrow { letter-spacing: .24em; gap: 12px; }
.hero .eyebrow::before { width: 0; animation: ruleDraw .7s var(--ease) .15s forwards; }
@keyframes ruleDraw { to { width: 34px; } }

/* Headline: tighter, with depth on navy; a gold underline draws under the
   serif accent. The accent stays a solid gold fill (no clip) so it can never
   vanish on an unsupported browser; only the underline is animated. */
.hero h1 { letter-spacing: -.04em; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.hero h1 .accent { position: relative; color: var(--gold); }
.hero h1 .accent::after {
  content: ""; position: absolute; left: 2px; right: 10px; bottom: .1em; height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(215, 168, 73, 0));
  transform-origin: left; transform: scaleX(0);
  animation: underlineDraw .6s var(--ease) .55s forwards;
}
@keyframes underlineDraw { to { transform: scaleX(1); } }

/* Qualifier: a precise spec chip. */
.hero__qual {
  border-color: rgba(215, 168, 73, .45); background: rgba(215, 168, 73, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* The live count rebuilt as a premium terminal: gold top rule, warm gradient
   face, layered depth, a hairline under the figure, refined mono. */
.hero__side .live {
  position: relative; overflow: hidden; padding-top: 26px;
  background: linear-gradient(180deg, #fffefb, var(--card));
  border-color: rgba(215, 168, 73, .30);
  box-shadow: 0 34px 64px -32px rgba(0, 0, 0, .72), 0 2px 0 rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.hero__side .live::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
}
.hero__side .live__label { letter-spacing: .2em; }
.hero__side .live__num { filter: drop-shadow(0 2px 1px rgba(29, 44, 60, .12)); }
.hero__side .live__caption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* Just-landed chips: precise, with a gold edge on hover. */
.jl { border-color: var(--line-soft); }
.jl:hover { border-color: var(--gold-dark); }
.justlanded__lab { letter-spacing: .18em; }

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .hero .eyebrow::before { width: 34px; animation: none; }
  .hero h1 .accent::after { transform: scaleX(1); animation: none; }
}

/* ============================================================
   BUILD-24 FIXES: nav z-order, header spacing, mobile header,
   index labels, the sold-tile notify button.
   ============================================================ */

/* Dropdown panels must clear the sticky ticker (z-60). build-22b set the header
   to z-10 (to sit above the grain), which trapped the panels (z-80 within it)
   BELOW the ticker, clipping their tops. Lift the whole header above the ticker;
   it is not sticky, so it never overlaps the ticker in the layout. */
.header { z-index: 70; }

/* Desktop: breathing room between the phone number and the CTA. */
.header__cta { gap: 28px; }

/* Mobile header: a tighter bar with no floating middle button (the CTA lives in
   the drawer and the sticky bottom bar), logo + burger balanced at the edges.
   Overrides the build-22b mobile --header-h / logo size. */
@media (max-width: 940px) {
  :root { --header-h: 72px; }
  .brand img { height: 48px; }
  .header__cta { display: none; }
}

/* "Browse the Index" headers: clean gold eyebrow-labels (matching the section
   eyebrows), not full-width underlines that read like broken input fields. */
.index-col__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--gold); border: 0; padding: 0; margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 9px;
}
.index-col__label::before {
  content: ""; width: 18px; height: 1.5px; background: var(--gold); display: inline-block; flex: none;
}

/* Sold-tile absence alert: the toggle now reads as a real button (navy fill,
   gold on hover and when open), full width on the tile. */
.tile__alert > summary {
  width: 100%; justify-content: center; font-weight: 600;
  background: var(--navy); color: var(--paper); border-color: var(--navy);
}
.tile__alert > summary:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.tile__alert[open] > summary { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* ============================================================
   BUILD-25 FIXES: logo size (cropped asset), hero CTA width,
   full-width tile CTA, footer brand + legal links.
   ============================================================ */

/* Logo: the cropped wtl-logo-header.webp (no 65% square padding; display-size 2x
   WebP since build-115, P-logo) renders its full
   height, so the mark finally reads big. Desktop ~79px, mobile ~54px
   (build-51: reduced 10% from build-25's 88/60 per Joe, logo read a touch big). */
.brand img { height: 79px; width: auto; }
@media (max-width: 940px) {
  :root { --header-h: 88px; }   /* up from build-24's 72px, room for the bigger mobile logo */
  .brand img { height: 54px; }
}

/* Hero: the gold CTA matches the qualifier-pill width. The wrapper sizes to its
   widest child (the qualifier) and the button stretches to fill it; on narrow
   screens both go full width (the qualifier wraps). */
.hero__actions { display: flex; flex-direction: column; gap: 18px; align-items: stretch; width: fit-content; max-width: 100%; }
.hero__actions .hero__cta { width: 100%; }
.hero__actions .hero__cta .btn { width: 100%; justify-content: center; }
.hero__actions .hero__qual { width: 100%; }
@media (max-width: 860px) { .hero__actions { width: 100%; } }

/* Tile CTA: full width on its own row, so "Get My Delivered Price" reads on one
   line instead of stacking three in a cramped button; manifest + date sit below. */
.tile__actions { flex-wrap: wrap; row-gap: 12px; }
.tile__actions .btn { width: 100%; justify-content: center; }

/* Footer: a legal row (copyright + Privacy / Terms / Disclaimer) beneath the
   disclaimer paragraph. */
.footer__bottom { flex-direction: column; align-items: stretch; }
.footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal-links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(247, 244, 236, .6); text-decoration: none; transition: color .15s;
}
.footer__legal-links a:hover { color: var(--gold); }

/* ============================================================
   BUILD-32: per-axis index/hub pages (Truckloads by Vendor /
   Region / Category). Card grid for /truckloads/{vendors|regions|
   categories}/. Mobile-first: 1 col, 2 up at 620px, 3 up at 980px.
   Reuses the hero / section / live chrome above.
   ============================================================ */
.axisidx { display: grid; grid-template-columns: 1fr; gap: 14px; }
.axisidx__card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; text-decoration: none; color: var(--ink);
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.axisidx__card:hover {
  transform: translateY(-2px); border-color: var(--gold);
  box-shadow: 0 14px 32px -22px rgba(29, 44, 60, .5);
}
.axisidx__label { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .01em; }
.axisidx__go {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--gold-dark);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
}
.axisidx__go .arrow { display: inline-block; transition: transform .15s var(--ease); }
.axisidx__card:hover .axisidx__go .arrow { transform: translateX(4px); }
@media (min-width: 620px) { .axisidx { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .axisidx { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   BUILD-34: the "Next Drop" absence state (WTL_Inventory_Render::
   thin_state). Replaces the dashed empty box with a confident dark
   feature panel. Reuses the alertform / consent / btn--gold /
   field--light wiring (the GHL alert rail) untouched; only the shell
   + layout are new. Mobile-first: stacks 1-col, 2-col >= 920px.
   ============================================================ */
.drop {
  position: relative; overflow: hidden; border-radius: 16px; color: #fff; margin-bottom: 30px;
  padding: clamp(26px, 4.2vw, 52px);
  background: linear-gradient(158deg, #1d2c3c 0%, #1a2734 55%, #15202c 100%);
  box-shadow: 0 36px 70px -44px rgba(16, 24, 33, .75);
}
.drop__sky {
  position: absolute; top: -45%; right: -12%; width: 64%; height: 150%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(215, 168, 73, .20), transparent 70%);
}
.drop__floor {
  position: absolute; inset: auto 0 0 0; height: 120px; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(215, 168, 73, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 168, 73, .10) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent);
}
.drop__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; }
.drop__eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-light); display: flex; align-items: center; gap: 11px; margin-bottom: 18px;
}
.drop__eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: drop-pulse 2.1s infinite; }
@keyframes drop-pulse {
  0% { box-shadow: 0 0 0 0 rgba(215, 168, 73, .55); }
  70% { box-shadow: 0 0 0 11px rgba(215, 168, 73, 0); }
  100% { box-shadow: 0 0 0 0 rgba(215, 168, 73, 0); }
}
.drop__h { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; color: #fff; }
.drop__h .g { color: var(--gold); }
.drop__p { color: #cdd6e0; font-size: 15.5px; max-width: 52ch; margin: 0 0 22px; }
.drop__ticks { display: flex; flex-direction: column; gap: 11px; }
.drop__tick { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #b9c4cf; }
.drop__tick .c { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(215, 168, 73, .14); color: var(--gold); font-size: 11px; }
.drop__cap { background: var(--card); color: var(--ink); border-radius: 13px; padding: 24px; border-top: 3px solid var(--gold); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .55); }
.drop__cap-label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 7px; }
.drop__cap-h { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; margin: 0 0 14px; }
.drop__cap .alertform--primary { margin-top: 0; }
.drop__cap .alertform--primary .alertform__row { max-width: none; }
.drop__cap .field--light { width: 100%; background: #fff; }
.drop__cap .btn--block { width: 100%; justify-content: center; margin-top: 2px; }
.drop__cap .consent { margin-top: 4px; }
.drop__cap-alt { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.drop__cap-alt a { color: var(--gold-dark); text-decoration: none; font-weight: 600; }
.drop__cap-alt a:hover { text-decoration: underline; }
.drop__foot { position: relative; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .10); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.drop__foot-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8ea0b0; }
.drop__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.drop__chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #e2e8ee; text-decoration: none; font-size: 13.5px; transition: border-color .15s, background .15s, transform .15s; }
.drop__chip:hover { border-color: var(--gold); background: rgba(215, 168, 73, .10); transform: translateY(-1px); }
.drop__chip .n { font-family: var(--mono); color: var(--gold); font-size: 11px; }
@media (min-width: 920px) { .drop__grid { grid-template-columns: 1.12fr .88fr; gap: 50px; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .drop__eyebrow .pulse { animation: none; } }

/* ============================================================
   QUOTE MODAL REFRESH (build-47, Joe review)
   ------------------------------------------------------------
   Centered headline, CTA-first order, and the trust/legal blocks
   moved below the button with room to breathe. Targets the global
   quote modal (wp_footer); becomes the pattern for every inventory
   optin form once Joe finalizes.
   ============================================================ */
.modal__head { display: block; text-align: center; position: relative; }
.modal__head .sub { max-width: 44ch; margin-left: auto; margin-right: auto; }
.modal__head .modal__x { position: absolute; top: 16px; right: 16px; }

/* CTA now sits directly under the form fields, with separation above. */
.modal__cta { margin-top: 22px; }

/* The three trust/legal blocks live below the CTA; even spacing so each breathes. */
.modal__fine { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.modal__fine .modal__freight,
.modal__fine .modal__note,
.modal__fine .consent { margin-top: 0; }

/* ============================================================
   INVENTORY SIGNALS (AI Max depth sections)
   Clean, useful visible summary + collapsed details for fantastic UX
   while keeping every specific phrase and live count fully crawlable
   for Google AI Max ad headline generation.
   ============================================================ */

.inventory-signals {
  margin-top: 0;
}

.signals-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(20px, 3.4vw, 30px);
}

/* Zero-inventory page: drop the panel chrome, render the disclosure + note plainly. */
.signals-panel--bare {
  background: none;
  border: 0;
  padding: 0;
}

.signals-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.signals-head .eyebrow {
  color: var(--gold-dark);
}

.inventory-signals h2 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 6px 0 0;
  color: var(--navy);
}

.signals-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.signals-live__freq { color: var(--ink-faint); }

@keyframes wtl-signals-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.66); }
}

.signals-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  animation: wtl-signals-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .signals-live__dot { animation: none; }
}

.signals-rule {
  height: 1px;
  background: var(--line-soft);
  margin: 16px 0 18px;
}

.signals-hero {
  display: flex;
  align-items: flex-end;
  gap: clamp(22px, 5vw, 52px);
  flex-wrap: wrap;
}

.signals-count {
  display: flex;
  align-items: flex-end;
  gap: 13px;
}

.signals-num {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 8vw, 4.4rem);
  line-height: 0.8;
  color: var(--navy);
}

.signals-numlabel {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink-soft);
  padding-bottom: 6px;
  max-width: 8ch;
}

.signals-manifest {
  flex: 1 1 240px;
  min-width: 220px;
  padding-bottom: 4px;
}

.signals-manifest__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

.signals-bar {
  height: 7px;
  border-radius: 999px;
  display: flex;
  overflow: hidden;
  background: var(--line-soft);
}

.signals-bar__man { flex: 0 0 auto; background: var(--gold); }
.signals-bar__un { flex: 1 1 auto; background: #cfc6b2; }

/* Manifested proportion quantized to 5% buckets (exact counts live in the legend);
   keeps the bar data-driven without an inline style (ADR-0046). */
.signals-bar__man.is-0 { width: 0; }
.signals-bar__man.is-5 { width: 5%; }
.signals-bar__man.is-10 { width: 10%; }
.signals-bar__man.is-15 { width: 15%; }
.signals-bar__man.is-20 { width: 20%; }
.signals-bar__man.is-25 { width: 25%; }
.signals-bar__man.is-30 { width: 30%; }
.signals-bar__man.is-35 { width: 35%; }
.signals-bar__man.is-40 { width: 40%; }
.signals-bar__man.is-45 { width: 45%; }
.signals-bar__man.is-50 { width: 50%; }
.signals-bar__man.is-55 { width: 55%; }
.signals-bar__man.is-60 { width: 60%; }
.signals-bar__man.is-65 { width: 65%; }
.signals-bar__man.is-70 { width: 70%; }
.signals-bar__man.is-75 { width: 75%; }
.signals-bar__man.is-80 { width: 80%; }
.signals-bar__man.is-85 { width: 85%; }
.signals-bar__man.is-90 { width: 90%; }
.signals-bar__man.is-95 { width: 95%; }
.signals-bar__man.is-100 { width: 100%; }

.signals-legend {
  display: flex;
  gap: 18px;
  margin-top: 9px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.signals-legend__sw {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: middle;
}

.signals-legend__sw--man { background: var(--gold); }
.signals-legend__sw--un { background: #cfc6b2; }
.signals-legend b { font-family: var(--mono); font-weight: 700; color: var(--navy); }

.signals-mixlabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 20px 0 10px;
}

.signals-mix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signals-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  font-size: 0.85rem;
  line-height: 1;
}

.signals-chip__cat {
  color: var(--navy);
  font-weight: 500;
}

.signals-chip__n {
  color: var(--gold-dark);
  font-weight: 700;
  font-family: var(--mono);
  font-size: 0.9rem;
}

.signals-sizes {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: 16px 0 0;
}

.signals-sizes b { color: var(--ink-soft); font-weight: 600; }

.signals-details {
  margin-top: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
}

.signals-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  font-size: 0.85rem;
  color: var(--gold-dark);
  font-weight: 600;
}

.signals-details summary::-webkit-details-marker {
  display: none;
}

.signals-details__caret {
  font-family: var(--mono);
  color: var(--gold);
  transition: transform 0.18s ease;
}

.signals-details[open] summary {
  border-bottom: 1px solid var(--line-soft);
}

.signals-details[open] .signals-details__caret {
  transform: rotate(90deg);
}

.signals-deep {
  padding: 6px 15px 15px;
}

.signals-deep .signals-h {
  font-family: var(--display);
  font-size: 0.92rem;
  margin: 14px 0 4px;
  color: var(--ink);
}

.signals-deep .signals-body {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

.signals-deep .signals-list {
  margin: 6px 0 12px 18px;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink);
}

.signals-deep .signals-list .eg {
  color: var(--ink-faint);
}

.signals-note {
  font-size: 11px;
  color: var(--ink-faint);
  margin: 14px 0 0;
}

@media (max-width: 560px) {
  .signals-num { font-size: clamp(2.6rem, 15vw, 3.4rem); }
  .signals-hero { gap: 18px; }
  .signals-manifest { min-width: 100%; }
}

/* ============================================================
   RETARGET SOLD-LANDING (build-146 redesign of the 144/145 band) -
   "the board" moment above the hero, shown only when the ?load=
   the visitor clicked is sold or gone. The masthead sits on the
   dark board (the ADR-0029 absence-panel ground, continuous with
   the status band): story vertically centered beside the load's
   REAL tile (SOLD-stamped, price + description), thesis-scale
   head, gold-light serif pull, the state as a stamp chip echoing
   the tile badge. The recommender's closest live matches answer
   on ivory below the gold edge, as real quotable tiles. Every
   product element is the shared tile system. Mobile-first:
   story, then card, then matches, stacked. The --gone variant
   keeps the slim light band (no record, no product moment).
   ============================================================ */
.rt-missed { background: var(--muted-ivory); border-bottom: 3px solid var(--gold); }
.rt-missed__board { background: var(--navy); border-top: 1px solid rgba(247,244,236,.12); padding: 30px 0 36px; }
.rt-missed__board:not(:last-child) { border-bottom: 3px solid var(--gold); }
.rt-missed__grid { display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* build-145 (Joe's phone catch, the hero-A rule): story copy + CTA center on
   mobile; left alignment is the desktop two-column treatment below. */
.rt-missed__story { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.rt-missed__card { margin: 0 auto; }
.rt-missed__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.rt-missed__board .rt-missed__eyebrow { color: rgba(247,244,236,.55); display: flex; align-items: center; gap: 10px; }
.rt-missed__state { background: var(--burgundy); color: #f7f4ec; font-weight: 700; font-size: 10px; letter-spacing: 0.14em; padding: 3px 8px 2px; border-radius: 2px; }
.rt-missed__head { font-size: clamp(1.9rem, 5.5vw, 3.05rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--paper); margin: 0; text-wrap: balance; }
.rt-missed__head-sm { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--navy); margin: 4px 0 0; }
.rt-missed__pull { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--gold-light); margin: 0; }
.rt-missed__sub { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 2px 0 0; max-width: 52ch; }
.rt-missed__board .rt-missed__sub { color: rgba(247,244,236,.72); }
.rt-missed__cta { margin-top: 10px; }
.rt-missed__board .btn--ghost { color: var(--paper); border-color: rgba(247,244,236,.45); background: transparent; }
.rt-missed__board .btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.rt-missed__alert { margin-top: 8px; width: 100%; max-width: 420px; }
.rt-missed__alert .tile__alert { margin: 0; border-top: 0; padding-top: 0; }
.rt-missed__board .rt-missed__alert .tile__alert > summary { color: var(--paper); border-color: rgba(247,244,236,.4); }
.rt-missed__board .rt-missed__alert .consent { color: rgba(247,244,236,.6); }
.rt-missed__board .rt-missed__alert .notify__ok { color: var(--gold-light); }
.rt-missed__card { max-width: 380px; width: 100%; border: 1px solid rgba(247,244,236,.16); box-shadow: 0 22px 48px rgba(10,17,24,.45); }
.rt-missed__card .tile { margin: 0; }
.rt-missed__recs { padding: 24px 0 28px; }
.rt-missed__recs-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 14px; }
.rt-missed__recs-grid { grid-template-columns: 1fr; }
.rt-missed--gone { padding: 18px 0; }
.rt-missed--gone .rt-missed__cta { margin-top: 10px; }
@media (min-width: 768px) {
  .rt-missed__board { padding: 44px 0 48px; }
  .rt-missed__grid { flex-direction: row; align-items: center; gap: 48px; }
  .rt-missed__grid--nocard { flex-direction: column; }
  .rt-missed__story { flex: 1 1 auto; align-items: flex-start; text-align: left; }
  /* No card to balance against: the lone story centers on the board, like mobile. */
  .rt-missed__grid--nocard .rt-missed__story { align-items: center; text-align: center; }
  .rt-missed__card { flex: 0 0 360px; max-width: 360px; margin: 0; }
  .rt-missed__recs { padding: 28px 0 34px; }
  .rt-missed__recs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   RETARGET HERO (build-110) - class-retarget-render.php ONLY.
   Every other section on the retarget page (reviews/protection/
   how-we-work/faq/grid/finalcta) reuses the SHARED components
   above unchanged. These rules style only the retarget page's own
   hero, so nothing here touches the 35+ approved container pages.
   ============================================================ */
.rt-hero__inner { max-width: 700px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.rt-hero__eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.rt-hero__eyebrow .bar { width: 24px; height: 1px; background: currentColor; opacity: 0.55; }
.rt-hero__h1 { color: #fff; max-width: 19ch; margin-top: 18px; font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.06; text-wrap: balance; }
.rt-hero__pull { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.9vw, 19px); color: var(--gold-light); margin: 16px 0 0; max-width: 40ch; }
.rt-hero__sub { color: rgba(243, 243, 243, 0.82); max-width: 56ch; margin-top: 14px; font-size: 15px; line-height: 1.55; }
.rt-hero__actions { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rt-hero__cta { font-size: 13px; padding: 16px 30px; }
.rt-hero__phone { font-size: 14px; color: rgba(243, 243, 243, 0.72); text-decoration: none; }
.rt-hero__phone b { color: var(--gold-light); font-weight: 600; }
.rt-hero__proof { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(243, 243, 243, 0.82); }
.rt-hero__proof .stars { display: inline-flex; gap: 2px; }

/* The live slice ticket: one flat proof card (paper surface floating on the
   navy hero) in place of a scatter of separate trust badges. Ledger rows read
   like a real manifest slip: label left, value right, mono. Every value is
   either already-computed server context or a fail-soft JS fill (never a
   fabricated figure); gated on has_loads, so an empty slice shows no ticket. */
}

/* ===== The LOCKED retarget hero (build-130): the objection ledger =====
   Joe's pick through two preview rounds; the fourth row (the relationship
   mission) added at lock. */
.rt-ledger { margin: 26px auto 0; max-width: 620px; text-align: left; border-top: 1px solid rgba(255,255,255,.14); }
.rt-ledger__row { display: flex; gap: 18px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.14); align-items: baseline; }
.rt-ledger__k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); flex: 0 0 92px; }
.rt-ledger__v { color: rgba(243,243,243,.88); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 480px) { .rt-ledger__row { flex-direction: column; gap: 4px; } .rt-ledger__k { flex-basis: auto; } }