/* =============================================================
   ZARAS — Home Platform section  ·  home-platform.v1.css
   Refreshes the home #product teaser into the command-board /
   operating-record system shared by the /platform hero and the
   home hero. Direction: "Board -> one record" (Variant B, locked).

   Consumes the page :root tokens already defined in index.html
   (--bg*, --ink*, --rule*, --signal*, --mono, --sans, --maxw,
   --gutter). The ONLY tokens added here are the dispatch status
   palette below, which index.html does not define.

   Namespace: hp-* (shared section chrome + atmosphere + glass)
   and hpb-* (the board -> record composition). No dependency on
   home-atmosphere for #product — this module is self-contained;
   the old #product rules in home-atmosphere are removed in the
   same bump (see the handoff README integration plan).

   TEAL is the only signal colour. No blue (the platform page's
   --plat-rgb glow is platform-only and is not used here).
   ============================================================= */

:root {
  /* index.html's :root defines --rule / --rule-hi but NOT --rule-soft
     (it lived in command-board.v1.css). The masked grid needs it, so the
     module self-contains it here. */
  --rule-soft:  rgba(255,250,240,0.05);
  --c-onsite:   #76c7b2;
  --c-enroute:  #e4c46b;
  --c-hold:     #c47a7a;
  --c-done:     #3a3935;
  --c-upcoming: #a8a39a;
}

/* =============================================================
   SECTION SHELL — full-bleed atmospheric stage. Mirrors the
   .platform-stage philosophy: heading/prose/foot stay shell-width,
   the proof surface can breathe wider.
   ============================================================= */
.hp-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 0 108px;
  border-top: 1px solid var(--rule);
  container-type: inline-size;
}
.anchor-alias { display: block; height: 0; width: 0; overflow: hidden; scroll-margin-top: 96px; }

.hp-inner {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hp-shell { max-width: var(--maxw); margin: 0 auto; }

/* ---- Atmosphere: radial-masked grid + blurred teal/warm zones --- */
.hp-substrate { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hp-substrate-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right,  var(--rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(118% 120% at var(--mesh-x, 64%) 46%, #000 0%, #000 50%, transparent 90%);
          mask-image: radial-gradient(118% 120% at var(--mesh-x, 64%) 46%, #000 0%, #000 50%, transparent 90%);
}
.hp-zone { position: absolute; border-radius: 50%; filter: blur(80px); }
.hp-zone--teal {
  width: 860px; height: 660px; right: -140px; top: -12%;
  background: radial-gradient(closest-side, rgba(118,199,178,0.13), transparent 70%);
}
.hp-zone--warm {
  width: 540px; height: 460px; left: -8%; top: 40%;
  background: radial-gradient(closest-side, rgba(255,250,240,0.035), transparent 70%);
}
.hp-substrate svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hp-route    { fill: none; stroke: rgba(255,250,240,0.055); stroke-width: 1; }
.hp-route.hi { stroke: rgba(255,250,240,0.10); }
.hp-route.trace {
  stroke: rgba(118,199,178,0.6); stroke-width: 1.5;
  stroke-dasharray: 8 460;
  filter: drop-shadow(0 0 5px rgba(118,199,178,0.5));
  animation: hp-trace 15s linear infinite;
}
@keyframes hp-trace {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  7%   { opacity: 0.9; }
  93%  { opacity: 0.9; }
  100% { stroke-dashoffset: -468; opacity: 0; }
}
.hp-node      { fill: rgba(255,250,240,0.16); }
.hp-node.hi   { fill: rgba(255,250,240,0.30); }
.hp-node.live {
  fill: var(--signal);
  filter: drop-shadow(0 0 7px rgba(118,199,178,0.85));
  animation: hp-node-breath 2.6s ease-in-out infinite;
}
@keyframes hp-node-breath { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } }
/* inward vignette so the composition focuses */
.hp-section::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 96% at 50% 38%, transparent 56%, rgba(0,0,0,0.46) 100%);
}

/* =============================================================
   SHARED CHROME — eyebrow chip, headline, sub, stat row, CTA
   ============================================================= */
.hp-head { max-width: 760px; }

.hp-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--rule-hi);
  border-radius: 999px;
  background: rgba(255,255,255,0.018);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-sub);
  backdrop-filter: blur(4px);
  margin-bottom: 26px;
}
.hp-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  animation: hp-pulse 2.4s ease-out infinite;
}
.hp-eyebrow .sep { width: 1px; height: 12px; background: var(--rule-hi); }
.hp-eyebrow .mute { color: var(--ink-mute); }
@keyframes hp-pulse {
  0%   { box-shadow: 0 0 0 0 var(--signal-weak); }
  70%  { box-shadow: 0 0 0 9px rgba(118,199,178,0); }
  100% { box-shadow: 0 0 0 0 rgba(118,199,178,0); }
}

.hp-h2 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(34px, 5.2cqw, 60px);
  color: var(--ink);
  text-wrap: balance;
  max-width: 17ch;
}
.hp-h2 em { font-style: italic; color: var(--signal-ink); }

.hp-sub {
  margin-top: 22px;
  color: var(--ink-sub);
  font-size: clamp(15px, 1.4cqw, 17px);
  line-height: 1.55;
  max-width: 54ch;
  text-wrap: pretty;
}
.hp-sub strong { color: var(--ink); font-weight: 500; }

/* Compact stat / proof row — echoes the platform hero strip */
.hp-stats {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--rule);
}
.hp-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 26px 0 0; }
.hp-stat + .hp-stat { padding-left: 26px; border-left: 1px solid var(--rule); }
.hp-stat .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
}
.hp-stat .v {
  color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hp-stat .v em { font-style: normal; color: var(--signal-ink); }

/* CTA — the single clear link to /platform */
.hp-link {
  display: inline-flex; align-items: center; gap: 11px;
  align-self: flex-start;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-sub);
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color 180ms ease, border-bottom-color 180ms ease;
}
.hp-link:hover { color: var(--signal-ink); border-bottom-color: var(--signal-rule); }
.hp-link .arr { display: inline-block; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.hp-link:hover .arr { transform: translateX(3px); }

/* =============================================================
   GLASS SURFACE PRIMITIVES — aura, floor, sheen, board glass.
   Shared by the variants so all three read as one material system.
   ============================================================= */
.hp-surface { position: relative; }
.hp-aura {
  position: absolute; inset: -8% -6% -10% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 60% at 56% 46%, rgba(118,199,178,0.15) 0%, rgba(118,199,178,0.04) 44%, transparent 78%);
  filter: blur(14px);
}
.hp-floor {
  position: absolute; left: 8%; right: 8%; bottom: -3.5%; height: 60px; z-index: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,0.72), transparent 72%);
  filter: blur(14px); pointer-events: none;
}
.hp-glass {
  position: relative; z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 13%),
    var(--bg-sub);
  border: 1px solid var(--rule-hi);
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 0 rgba(0,0,0,0.45),
    0 60px 120px -44px rgba(0,0,0,0.95),
    0 20px 44px -24px rgba(0,0,0,0.7);
}
/* specular sweep */
.hp-sheen {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden;
  border-radius: inherit; mix-blend-mode: screen;
}
.hp-sheen::before {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -40%; width: 18%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.012) 42%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.012) 58%, transparent 100%);
  transform: skewX(-14deg);
  animation: hp-sheen 10s ease-in-out infinite;
}
@keyframes hp-sheen {
  0%, 32% { transform: skewX(-14deg) translateX(-60px); opacity: 0; }
  42%     { opacity: 0.55; }
  54%     { opacity: 0.55; }
  62%     { transform: skewX(-14deg) translateX(880px); opacity: 0; }
  100%    { transform: skewX(-14deg) translateX(880px); opacity: 0; }
}

/* Surface header band — DISPATCH · clock · LIVE */
.hp-band {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--rule);
  background: rgba(255,250,240,0.012);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.hp-band-l { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-sub); }
.hp-band-l .live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 8px var(--signal); animation: hp-pulse 2.3s ease-out infinite;
}
.hp-band-clock { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.hp-band-legend { display: inline-flex; gap: 15px; font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-mute); }
.hp-band-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hp-lg { width: 8px; height: 8px; border-radius: 2px; background: var(--ink-faint); }
.hp-lg-onsite { background: var(--c-onsite); }
.hp-lg-enroute { background: var(--c-enroute); }
.hp-lg-hold { background: var(--c-hold); }
.hp-lg-done { background: var(--c-done); }

@media (prefers-reduced-motion: reduce) {
  .hp-section *, .hp-section *::before, .hp-section *::after { animation: none !important; transition: none !important; }
}


.hpb-layout { display: grid; gap: 40px; }

.hpb-stage { margin-top: 4px; position: relative; }
.hpb-wrap { position: relative; max-width: 1160px; }

/* the merged surface: board (flex 1) + record (fixed) */
.hpb-merge {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 366px;
  border: 1px solid var(--rule-hi); border-radius: 15px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 13%), var(--bg-sub);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 0 rgba(0,0,0,0.45),
    0 64px 120px -42px rgba(0,0,0,0.96),
    0 22px 48px -26px rgba(0,0,0,0.72);
}

/* ---- BOARD side (breadth: the whole day) ---- */
.hpb-board { border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-width: 0; }
.hpb-board-body { padding: 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.hpb-jobs { display: flex; flex-direction: column; gap: 9px; }

.hpb-job {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: rgba(255,250,240,0.02);
}
.hpb-job .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.hpb-job .pip[data-st="enroute"] { background: var(--c-enroute); }
.hpb-job .pip[data-st="hold"] { background: var(--c-hold); }
.hpb-job .pip[data-st="done"] { background: var(--c-done); }
.hpb-job-main { min-width: 0; }
.hpb-job-t { color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpb-job-t .tag { margin-left: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-mute); font-weight: 400; }
.hpb-job-m { margin-top: 4px; color: var(--ink-sub); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; }
.hpb-job-status { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); text-align: right; white-space: nowrap; }

/* secondary rows are dimmer so the selected job is unmistakable */
.hpb-job.is-secondary { opacity: 0.62; }
.hpb-job.is-secondary .hpb-job-t { color: var(--ink-sub); font-weight: 400; }
.hpb-job[data-st="enroute"] .hpb-job-status { color: var(--c-enroute); }
.hpb-job[data-st="hold"] { border-style: dashed; border-color: rgba(196,122,122,0.30); }
.hpb-job[data-st="hold"] .hpb-job-status { color: #dba6a6; }

/* the SELECTED job — the one the wire carries to its record (teal) */
.hpb-job.is-selected {
  opacity: 1;
  background: linear-gradient(180deg, rgba(118,199,178,0.12) 0%, rgba(118,199,178,0.03) 100%);
  border-color: var(--signal-rule);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(118,199,178,0.20), 0 0 32px rgba(118,199,178,0.18);
}
.hpb-job.is-selected .hpb-job-t { color: var(--signal-ink); }
.hpb-job.is-selected .hpb-job-status { color: var(--c-onsite); }
.hpb-job.is-selected .pip {
  background: var(--signal); box-shadow: 0 0 0 3px var(--signal-weak), 0 0 10px var(--signal);
  display: flex; align-items: center; justify-content: center;
}
.hpb-job.is-selected .pip svg { width: 7px; height: 7px; }
.hpb-job.is-selected .pip svg path { stroke: #06140f; stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hpb-sel-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal-ink); background: var(--signal-weak); border: 1px solid var(--signal-rule);
  vertical-align: middle;
}

/* board foot — the selected-job BRIDGE label (carries continuity on mobile) */
.hpb-board-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
}
.hpb-bridge { display: inline-flex; align-items: center; gap: 9px; color: var(--signal-ink); }
.hpb-bridge .lbl { color: var(--ink-mute); }
.hpb-bridge .arr { color: var(--signal); }
.hpb-board-foot .day { color: var(--ink-mute); }

/* ---- RECORD side (depth: one connected record, PAID) ---- */
.hpb-rail {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.014) 0%, transparent 18%), #0b0a09;
  position: relative;
}
.hpb-rail::before { /* recessed seam shadow so the board reads as primary */
  content: ""; position: absolute; left: 0; top: 54px; bottom: 0; width: 26px;
  background: linear-gradient(90deg, rgba(0,0,0,0.42), transparent); pointer-events: none; z-index: 2;
}
.hpb-rail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 22px; position: relative; z-index: 3; background: #0b0a09;
  box-shadow: 0 1px 0 var(--rule);
}
.hpb-rail-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.hpb-rail-linked {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--signal-ink);
  padding: 4px 9px; border: 1px solid var(--signal-rule); border-radius: 999px; background: var(--signal-weak);
}
.hpb-rail-linked .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: hp-pulse 2.3s ease-out infinite; }

.hpb-rail-client { padding: 17px 22px 16px; border-bottom: 1px solid var(--rule); position: relative; z-index: 3; }
.hpb-rail-name { color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: -0.014em; }
.hpb-rail-scope { color: var(--ink-sub); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; margin-top: 6px; }

.hpb-events { padding: 16px 22px; border-bottom: 1px solid var(--rule); position: relative; z-index: 3; }
.hpb-rail-list { list-style: none; position: relative; display: grid; gap: 14px; }
.hpb-rail-list::before { content: ""; position: absolute; left: 4px; top: 7px; bottom: 7px; width: 1px; background: var(--rule); }
.hpb-event { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; padding-left: 20px; }
.hpb-event::before { content: ""; position: absolute; left: 1px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-sub); border: 1px solid var(--bg-sub); z-index: 1; }
.hpb-event-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-sub); }
.hpb-event-v { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
/* final event = paid, teal */
.hpb-event--paid::before { background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.hpb-event--paid .hpb-event-k { color: var(--signal-ink); }
.hpb-event--paid .hpb-event-v { color: var(--signal-ink); }

/* payment payoff — fully PAID. Borrows Variant C's finality: one clean,
   confident beat, not a dense invoice replica. */
.hpb-pay {
  margin-top: auto; padding: 20px 22px 22px; border-top: 1px solid var(--rule);
  position: relative; z-index: 3; overflow: hidden;
  background: linear-gradient(180deg, rgba(118,199,178,0.12), rgba(118,199,178,0.02));
}
.hpb-pay::before {
  content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 2px;
  background: var(--signal); box-shadow: 0 0 16px rgba(118,199,178,0.7);
  animation: hpb-accent-pulse 3.2s ease-in-out infinite;
}
@keyframes hpb-accent-pulse { 0%,100% { box-shadow: 0 0 12px rgba(118,199,178,0.5); } 50% { box-shadow: 0 0 24px rgba(118,199,178,0.95); } }
.hpb-pay-top { display: flex; align-items: center; gap: 13px; }
.hpb-pay-seal {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--signal-weak); border: 1.5px solid var(--signal-rule);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px rgba(118,199,178,0.06), 0 0 22px rgba(118,199,178,0.4);
}
.hpb-pay-seal svg { width: 19px; height: 19px; }
/* base = drawn (reduced-motion safe); animation just re-draws it in */
.hpb-pay-seal svg path { stroke: var(--signal); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 0; animation: hpb-check 520ms cubic-bezier(.65,0,.35,1) 600ms both; }
@keyframes hpb-check { from { stroke-dashoffset: 22; } }
.hpb-pay-top-txt .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal-ink); }
.hpb-pay-top-txt .m { margin-top: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.02em; }
.hpb-pay-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.hpb-pay-amount .val { font-family: var(--sans); font-size: 34px; font-weight: 500; letter-spacing: -0.026em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.hpb-pay-amount .status {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal-ink);
  padding: 5px 11px; border-radius: 999px; background: var(--signal-weak); border: 1px solid var(--signal-rule);
}
.hpb-pay-bal { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-mute); }
.hpb-pay-bal em { font-style: normal; color: var(--signal-ink); }

/* ---- connector wire (selected job → PAID seal) ---- */
.hpb-wire { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: visible; }
.hpb-wire-line { fill: none; stroke: rgba(118,199,178,0.5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(118,199,178,0.3)); }
.hpb-wire-flow {
  fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26 200; filter: drop-shadow(0 0 5px rgba(118,199,178,0.7));
  animation: hpb-wire-flow 4.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes hpb-wire-flow {
  0%   { stroke-dashoffset: 226; opacity: 0; }
  16%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.hpb-wire-node { fill: var(--signal); filter: drop-shadow(0 0 6px rgba(118,199,178,0.9)); }
.hpb-wire-dock { fill: var(--bg-sub); stroke: var(--signal); stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(118,199,178,0.7)); }

/* foot: proof row (breadth) + single CTA */
.hpb-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 8px; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
/* Tablet/mobile: stack board OVER record; wire hidden. Continuity is
   carried by the bridge label + the matching JOB id pill + shared teal. */
@container (max-width: 900px) {
  .hpb-merge { grid-template-columns: 1fr; }
  .hpb-board { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hpb-rail::before { display: none; }
  .hpb-wire { display: none; }
}
@container (max-width: 560px) {
  .hpb-job { grid-template-columns: auto 1fr; column-gap: 12px; }
  .hpb-job-status { grid-column: 2; text-align: left; margin-top: 3px; }
  .hpb-board-foot { flex-direction: column; align-items: flex-start; gap: 7px; }
  .hpb-pay-amount .val { font-size: 28px; }
  .hpb-board-body { padding: 12px; }
}

/* Eyebrow chip: intentional 2-line stack on narrow phones. The dot spans
   both rows; "ZARAS · Platform" sits on row 1, "Live · 5 crews · Tue 14 Oct"
   on row 2; the vertical rule is hidden and the chip hugs its content.
   Scoped to .hp-section's container-type: inline-size (no nearer query
   container). */
@container (max-width: 560px) {
  .hp-eyebrow { display: inline-grid; grid-template-columns: auto 1fr;
                align-items: center; column-gap: 10px; row-gap: 2px; }
  .hp-eyebrow .dot { grid-column: 1; grid-row: 1 / 3; }
  .hp-eyebrow .sep { display: none; }
}