/* ==========================================================================
   Lot Board — marketing page (namespace: lbm-)
   Sits on the shared mk-* system in wow-marketing.css and only adds what this
   page's signature needs: a service hangtag, the kiosk keypad, and the zone
   grid. Those three things ARE the product's whole interaction, so the page
   is built out of them rather than out of stock feature cards.
   ========================================================================== */

.lbm {
  --lbm-tag: #2BA0FF;      /* Lot Board brand accent — matches the navy/blue logo */
  --lbm-parked: #29C46A;
  /* The real board flags an aged car in AMBER (assets/css/lotboard.css:344 and
     lot-lookup.css:67), not red. A marketing page that invents a scarier colour
     than the product uses is teaching the wrong signal. */
  --lbm-aged: #F5A623;
}

/* ---------- hero: the wall, rendered ---------- */
.lbm-hero { padding-top: 92px; padding-bottom: 76px; }
/* mk-h1 is tuned for a full-bleed hero (up to 92px). This hero is two columns,
   so the headline has roughly half the width and the stock size runs straight
   over the kiosk. Scaled to the column it actually lives in. */
.lbm-hero .mk-h1 { font-size: clamp(38px, 5vw, 64px); }
.lbm-hero .mk-lead { max-width: 46ch; }
.lbm-hero-in {
  display: grid; gap: 46px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.lbm-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--lbm-tag); margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.lbm-eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--line2); }

/* ---------- the kiosk slab ---------- */
.lbm-kiosk {
  background: var(--panel); border: 1px solid var(--line2); border-radius: 16px;
  padding: 22px; display: grid; gap: 20px;
  grid-template-columns: minmax(0, 172px) minmax(0, 1fr);
  box-shadow: 0 30px 70px -40px #000;
}
.lbm-kiosk-bar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: -4px;
}
.lbm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lbm-parked); }
.lbm-kiosk-bar .sp { margin-left: auto; }

/* the hangtag — a punched card, the way it hangs off a mirror */
.lbm-tag {
  position: relative; background: var(--ivory); color: var(--ink);
  border-radius: 8px; padding: 30px 14px 16px; text-align: center;
  box-shadow: 0 10px 26px -14px #000;
}
.lbm-tag::before {                       /* the punch hole */
  content: ""; position: absolute; top: 10px; left: 50%; translate: -50% 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--panel); box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.lbm-tag-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;
}
.lbm-slots { display: flex; justify-content: center; gap: 5px; }
.lbm-slot {
  width: 28px; height: 40px; border-radius: 5px;
  background: #E4DFD4; border: 1px solid var(--ivory-line);
  font-family: var(--mono); font-weight: 600; font-size: 24px; line-height: 38px;
  color: var(--ink);
}
.lbm-slot.is-on { background: #fff; border-color: var(--lbm-tag); }

/* keypad */
.lbm-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
.lbm-key {
  appearance: none; border: 1px solid var(--line2); background: var(--panel2);
  color: var(--bright); border-radius: 8px; padding: 12px 0;
  font-family: var(--mono); font-size: 15px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.lbm-key:hover { background: #232a31; border-color: #38414a; }
.lbm-key:active { transform: translateY(1px); }
.lbm-key:focus-visible { outline: 2px solid var(--lbm-tag); outline-offset: 2px; }
.lbm-key.wide { grid-column: span 2; }
.lbm-key.enter { background: var(--lbm-tag); border-color: var(--lbm-tag); color: #16181A; font-weight: 600; }
.lbm-key.enter[disabled] { opacity: .3; cursor: not-allowed; }

/* zone grid — the right half of the real kiosk */
.lbm-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-content: start; }
.lbm-zone {
  position: relative; border: 1px solid var(--line2); background: var(--panel2);
  border-radius: 10px; padding: 14px 12px; min-height: 96px; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--bright); cursor: pointer; overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}
.lbm-zone:focus-visible { outline: 2px solid var(--lbm-tag); outline-offset: 2px; }
.lbm-zone .n {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--mono); font-size: 26px; font-weight: 600; color: var(--white);
}
.lbm-zone .n.zero { color: var(--faint); }
.lbm-zone .nm { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.lbm-zone .ht { font-family: var(--mono); font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.lbm-zone.is-armed { border-color: var(--lbm-tag); }
.lbm-zone.is-hit { border-color: var(--lbm-parked); background: #16241C; }

/* the porter question — the real kiosk asks per car, never remembers */
.lbm-ask {
  grid-column: 1 / -1; border-top: 1px solid var(--line);
  padding-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--silver); min-height: 42px;
}
.lbm-ask b { color: var(--white); font-weight: 600; }
.lbm-who {
  appearance: none; border: 1px solid var(--line2); background: transparent;
  color: var(--bright); border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; cursor: pointer;
}
.lbm-who:hover { border-color: var(--lbm-tag); color: var(--white); }
.lbm-who:focus-visible { outline: 2px solid var(--lbm-tag); outline-offset: 2px; }
.lbm-done { color: var(--lbm-parked); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- the sequence: 01..04, a real order of operations ---------- */
.lbm-seq { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lbm-step { background: var(--graphite); padding: 30px 28px; display: grid; gap: 8px; }
.lbm-step .no {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--lbm-tag);
}
.lbm-step h3 { font-family: var(--disp); font-size: clamp(19px, 2.2vw, 24px); margin: 0; color: var(--white); }
.lbm-step p { margin: 0; color: var(--silver); font-size: 15px; line-height: 1.6; }
@media (min-width: 860px) { .lbm-seq { grid-template-columns: repeat(2, 1fr); } }

/* ---------- aging strip ---------- */
.lbm-age { display: grid; gap: 10px; }
.lbm-row {
  display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 14px;
  border: 1px solid var(--line2); border-radius: 10px; padding: 12px 16px; background: var(--panel);
}
.lbm-row .tg { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--white); }
.lbm-row .zn { font-size: 13.5px; color: var(--silver); }
.lbm-row .ag { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--faint); }
.lbm-row.is-aged { border-color: color-mix(in srgb, var(--lbm-aged) 55%, var(--line2)); }
.lbm-row.is-aged .ag { color: var(--lbm-aged); }

/* ---------- status note ---------- */
.lbm-status {
  border: 1px solid var(--line2); border-left: 3px solid var(--lbm-tag);
  border-radius: 0 12px 12px 0; padding: 24px 26px; background: var(--panel);
}
.lbm-status h3 { margin: 0 0 8px; font-family: var(--disp); font-size: 19px; color: var(--white); }
.lbm-status p { margin: 0; color: var(--silver); line-height: 1.65; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .lbm-hero-in { grid-template-columns: 1fr; gap: 34px; }
  .lbm-hero { padding-top: 64px; }
}
@media (max-width: 560px) {
  .lbm-kiosk { grid-template-columns: 1fr; }
  .lbm-zones { grid-template-columns: repeat(2, 1fr); }
  .lbm-row { grid-template-columns: 62px 1fr; }
  .lbm-row .ag { grid-column: 2; }
}

/* Motion is one orchestrated moment (a car parking), so switching it off must
   still leave a readable, complete picture — never a blank stage. */
@media (prefers-reduced-motion: reduce) {
  .lbm-key, .lbm-zone, .lbm-slot { transition: none !important; }
  .lbm-zone.is-hit { animation: none !important; }
}