:root {
  color-scheme: light;
  --ink: #12141a;
  --muted: #6d7280;
  --line: #dedfe3;
  --paper: #f5f4f0;
  --blue: #155eef;
  --green: #087443;
  --red: #b42318;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero { min-height: 450px; position: relative; display: grid; grid-template-columns: 180px 1fr 160px; align-items: start; padding: 34px 0 64px; border-bottom: 1px solid var(--ink); }
.brand { font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.hero-copy { align-self: center; max-width: 760px; }
.kicker { margin: 0 0 15px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(58px, 8.4vw, 110px); line-height: .9; letter-spacing: -.075em; }
.lede { max-width: 600px; margin: 32px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.live { justify-self: end; font-size: 12px; font-weight: 700; }
.live span { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: #12b76a; border-radius: 50%; box-shadow: 0 0 0 5px rgba(18,183,106,.12); }
.controls { display: flex; justify-content: space-between; align-items: center; padding: 25px 0; border-bottom: 1px solid var(--line); }
.market-tabs { display: flex; gap: 8px; }
button { font: inherit; }
.market-tab { padding: 10px 16px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.market-tab.active { color: #fff; background: var(--ink); }
.updated { color: var(--muted); font-size: 12px; }
.section-title { display: flex; justify-content: space-between; align-items: end; padding: 70px 0 28px; }
h2 { margin: 0; font-size: clamp(34px, 5vw, 64px); letter-spacing: -.055em; }
.summary { color: var(--muted); font-size: 13px; }
.inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.inventory-card { min-height: 225px; display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.store-code { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.status { padding: 6px 9px; font-size: 11px; font-weight: 800; border-radius: 999px; }
.status.available { color: var(--green); background: #ecfdf3; }
.status.unavailable { color: var(--red); background: #fef3f2; }
.status.unknown { color: #475467; background: #f2f4f7; }
.inventory-card h3 { margin: 26px 0 6px; font-size: 22px; letter-spacing: -.025em; }
.variant { color: var(--muted); font-size: 14px; }
.store { margin-top: auto; font-size: 14px; font-weight: 650; }
.checked { margin-top: 7px; color: #98a2b3; font-size: 11px; }
.empty { padding: 60px; color: var(--muted); text-align: center; background: #fff; border: 1px dashed #c8cad0; }
.empty strong { color: var(--ink); font-size: 20px; }
.empty p { max-width: 600px; margin: 12px auto 0; line-height: 1.65; }
footer { display: flex; justify-content: space-between; padding: 70px 0 35px; color: var(--muted); font-size: 11px; }

@media (max-width: 800px) {
  main { width: min(100% - 28px, 1180px); }
  .hero { min-height: 390px; grid-template-columns: 1fr auto; }
  .hero-copy { grid-column: 1 / -1; }
  .lede { font-size: 16px; }
  .inventory-grid { grid-template-columns: 1fr; }
  .section-title { align-items: start; flex-direction: column; gap: 15px; }
  .controls, footer { align-items: flex-start; flex-direction: column; gap: 18px; }
}