/* Cream instrument design selected by Marc for consolidation, 2026-09-13. */
.preview-banner {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 0.55rem 1.2rem;
  text-align: center;
}
.preview-banner strong { color: var(--red); font-weight: 500; }

/* One workbench illustration replaces the roll/reach/rise placeholder wells. */
.bench-art {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.bench-art img { display: block; width: 100%; height: auto; }

/* 6+1 under lede — rounded-square instrument keys (not mist circles / phone Glyph) */
.led-bar {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 0.65rem 0 0.85rem;
}
.led-bar span {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: #3A3A3A;
  border: 1px solid var(--ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 18%, transparent);
}
.led-bar span.rec {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent);
}

/* Compact supply LED strip above SEND */
.led-bar.supply {
  margin: 0.55rem 0 0.55rem;
  gap: 4px;
}
.led-bar.supply span {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

body.theme-paper .supply-send {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
body.theme-paper .supply-send:hover { color: var(--paper); filter: brightness(1.05); }

/* One red SEND on Support — works on chassis + paper */
body.theme-chassis .supply-send,
body.theme-paper a.btn.supply-send {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
body.theme-chassis .supply-send:hover,
body.theme-paper a.btn.supply-send:hover {
  color: var(--paper);
  filter: brightness(1.05);
}

/* Lower instrument drawer — handles + WORK pads + supply */
.instrument-drawer {
  position: relative;
  padding-left: 3.1rem;
  padding-right: 3.1rem;
}
.drawer-handle {
  position: absolute;
  top: 50%;
  width: 1.35rem;
  height: 4.6rem;
  margin-top: -2.3rem;
  border: 2px solid var(--ink);
  border-radius: 0.55rem;
  background:
    linear-gradient(90deg, #2a2a2a 0%, #5a5a5a 35%, #3a3a3a 70%, #1f1f1f 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 25%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 25%, transparent);
}
.drawer-handle::before {
  content: "";
  position: absolute;
  inset: 0.45rem 0.28rem;
  border-radius: 0.35rem;
  background: #0D0D0D;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
}
.drawer-handle.left { left: 0.85rem; }
.drawer-handle.right { right: 0.85rem; }

.drawer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(14rem, 0.85fr);
  gap: 1.25rem 1.6rem;
  align-items: start;
}
.drawer-work .field-head,
.drawer-supply .field-head { margin-bottom: 0.75rem; }

/* Dimpled WORK pads — tactile keys, not flat SaaS cells */
.work-pads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
a.work-pad,
.work-pad {
  display: block;
  text-decoration: none;
  color: inherit;
  margin: 0;
  padding: 0.95rem 0.75rem 0.85rem;
  min-height: 7.2rem;
  border: 2px solid var(--ink);
  border-radius: 0.55rem;
  background-color: #D8D4CC;
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ink) 16%, transparent) 0 1.1px, transparent 1.35px);
  background-size: 7px 7px;
  background-position: 3px 3px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--ink) 12%, transparent),
    0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
a.work-pad:hover { color: inherit; filter: brightness(0.98); }
.work-pad .num {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel, #3A3A3A);
  margin-bottom: 0.35rem;
}
.work-pad h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.work-pad p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--steel, #3A3A3A);
}
.work-pad.live {
  background-color: #CFCBC2;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent);
}

.drawer-supply .supply-send {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0;
  padding: 1.05rem 0.85rem;
  letter-spacing: 0.18em;
  border-radius: 0.35rem;
  border: 2px solid var(--red);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 25%, transparent),
    0 2px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}
.drawer-supply .supply-so {
  margin: 0.65rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--steel, #3A3A3A);
}

@media (max-width: 720px) {
  .instrument-drawer { padding-left: 1.2rem; padding-right: 1.2rem; }
  .drawer-handle { display: none; }
  .drawer-grid { grid-template-columns: 1fr; }
  .work-pads { grid-template-columns: 1fr; }
}

.led-bar.supply span,
.led-bar.supply span.rec {
  background: #3A3A3A !important;
  border-color: var(--ink) !important;
}

/* —— Sitewide control language (square keys, dimpled pads, one red SEND) —— */

/* Primary CTA keys: bordered chunky square; steel idle; red only for primary stamp */
.btn,
a.btn,
button.btn {
  display: inline-block;
  justify-self: start;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--steel, #3A3A3A);
  color: var(--silk);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.4rem;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 22%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--ink) 35%, transparent),
    0 2px 0 color-mix(in srgb, var(--ink) 28%, transparent);
}
.btn:hover,
a.btn:hover,
button.btn:hover {
  background: #2a2a2a;
  border-color: var(--ink);
  color: var(--silk);
  filter: none;
}

/* Chunky red SEND / live record key (a.key.live primary stamp) */
a.key.live,
.key.live,
a.key.live.supply-send,
.key.live.supply-send,
a.btn.supply-send,
button.btn.supply-send {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  background: var(--red);
  color: var(--paper, var(--silk));
  border: 2px solid var(--red);
  border-radius: 0.35rem;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.05rem 0.85rem;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 25%, transparent),
    0 2px 0 color-mix(in srgb, var(--ink) 22%, transparent);
  writing-mode: horizontal-tb;
  transform: none;
  cursor: pointer;
}
a.key.live:hover,
.key.live:hover,
a.key.live.supply-send:hover,
.key.live.supply-send:hover,
a.btn.supply-send:hover,
button.btn.supply-send:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper, var(--silk));
  filter: brightness(1.05);
}

/* Gallery LAST/NEXT stay compact vertical keys — override block SEND spread */
.gallery a.key.live,
.gallery .key.live {
  display: block;
  width: auto;
  letter-spacing: 0.14em;
  padding: 0.9rem 0.35rem;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

/* Secondary door keys — pad/key, not bare underline */
a.door-key {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 0.95rem;
  border: 2px solid var(--ink);
  border-radius: 0.35rem;
  background-color: #D8D4CC;
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ink) 16%, transparent) 0 1.1px, transparent 1.35px);
  background-size: 7px 7px;
  background-position: 3px 3px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--ink) 12%, transparent),
    0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
a.door-key:hover {
  color: var(--ink);
  filter: brightness(0.98);
}
.lanes td a.door-key { margin: -0.2rem 0; }

/* How / Work / Support mute cells → dimpled pads (04 Support may stay red stamp) */
.cell.pad,
a.cell.pad {
  text-decoration: none;
  color: var(--ink);
  background-color: #D8D4CC;
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ink) 16%, transparent) 0 1.1px, transparent 1.35px);
  background-size: 7px 7px;
  background-position: 3px 3px;
  border-right-color: color-mix(in srgb, var(--ink) 28%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.cell.pad:hover,
a.cell.pad:hover { color: var(--ink); filter: brightness(0.98); }
.cell.pad .num,
a.cell.pad .num { color: var(--steel, #3A3A3A); }
.cell.pad h3,
a.cell.pad h3 { color: var(--ink); letter-spacing: 0.06em; }
.cell.pad p,
a.cell.pad p { color: var(--steel, #3A3A3A); }

/* 04 Support red stamp wins over pad dimple when both present */
.cell.support,
a.cell.support {
  background: var(--red);
  background-image: none;
  color: var(--white, #fff);
  box-shadow: none;
}
.cell.support .num,
.cell.support h3,
.cell.support p,
a.cell.support .num,
a.cell.support h3,
a.cell.support p { color: var(--white, #fff); }

/* Support doors row: one full-width live SEND */
.doors a.key.live,
.doors .key.live,
.doors a.btn.supply-send {
  flex: 1 1 100%;
  width: 100%;
  max-width: 34rem;
}

/* Consolidated public site: legible navigation and compact mobile first screen. */
body.theme-paper .nav-links a { color: var(--steel); }
body.theme-paper .nav-links a:hover,
body.theme-paper .nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.cell h2 { font-size: 1.2rem; letter-spacing: 0.02em; }
.offer-cells { margin: 1.5rem 0; }
@media (max-width: 600px) {
  .site-nav { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .wordmark { white-space: nowrap; }
  .nav-links { width: 100%; justify-content: space-between; gap: 0.5rem; letter-spacing: 0.08em; }
  .first-copy { order: -1; }
}

/* Matrix is a schematic illustration until product photography is ready. */
.matrix-grid {
  aspect-ratio: 2 / 1;
  width: 100%;
  border: 8px solid var(--ink);
  background-color: var(--ink);
  background-image: radial-gradient(circle, var(--gray) 35%, transparent 40%);
  background-size: calc(100% / 64) calc(100% / 32);
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}
.product-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.product-preview .lede { margin-top: 0.8rem; }
.matrix-intro .matrix-grid { max-width: 42rem; margin: 2rem 0 1rem; }
.optional { font-weight: 400; }
[data-waitlist-status] { min-height: 1.55em; margin-top: 0.75rem; }
@media (max-width: 700px) { .product-preview { grid-template-columns: 1fr; } }

/* Business hero: a clear statement, a short explanation, and two useful paths. */
.first-copy .hero-title { font-size: clamp(2.15rem, 4.1vw, 3.65rem); line-height: 1.02; text-wrap: initial; }
.hero-lede { font-size: 1.15rem; margin-top: 1.2rem; font-weight: 500; }
.hero-summary { max-width: 43ch; margin-top: 0.55rem; color: var(--steel); }
.hero-secondary { font-size: 0.95rem; }
.first-copy .doors { gap: 0.8rem 1.2rem; }

/* Matrix scene display, adapted to the site palette from the product hero. */
.matrix-demo { min-width: 0; }
.matrix-hangers { display: flex; justify-content: space-between; padding: 0 18%; margin-bottom: 0.5rem; }
.matrix-hangers i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.matrix-display { padding: 0.7rem; background: var(--chassis); border: 2px solid var(--steel); border-radius: 4px; }
.matrix-display img { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; image-rendering: pixelated; background: var(--chassis); }
.matrix-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.8rem 0; }
.matrix-controls p { font-family: var(--font-mono); font-size: 0.7rem; }
.matrix-controls p span { display: block; color: var(--steel); margin-top: 0.1rem; }
.matrix-controls button { border: 1px solid var(--ink); padding: 0.5rem; font-family: var(--font-mono); font-size: 0.65rem; }
.matrix-scenes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; }
.matrix-scenes button { min-width: 0; padding: 0.25rem; border: 1px solid var(--gray); background: var(--paper); }
.matrix-scenes button[aria-pressed="true"] { border-color: var(--red); outline: 1px solid var(--red); }
.matrix-scenes img { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; image-rendering: pixelated; }
.matrix-scenes span { display: block; margin-top: 0.25rem; font-family: var(--font-mono); font-size: clamp(0.48rem, 0.75vw, 0.64rem); }
.matrix-demo-note { font-size: 0.72rem; color: var(--steel); margin-top: 0.8rem; }
.matrix-price { font-family: var(--font-cond); font-size: 2rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.matrix-price span { display: inline-block; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; vertical-align: middle; }
.matrix-product-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.4rem; align-items: center; }
.matrix-product-copy .lede { margin: 1rem 0; }
.matrix-product-copy > p:not(.field-head):not(.matrix-price):not(.doors):not(.lede) { color: var(--steel); }
.matrix-kit { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem; align-items: center; }
.matrix-cad { margin: 0; }
.matrix-cad img { width: 100%; height: auto; }
.matrix-cad figcaption { font-family: var(--font-mono); font-size: 0.7rem; color: var(--steel); margin-top: 0.8rem; }
.matrix-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }
.matrix-paths a { display: inline-block; margin-top: 1rem; }
@media (max-width: 800px) {
  .matrix-product-hero, .matrix-kit { grid-template-columns: 1fr; }
  .matrix-product-copy { order: -1; }
}
@media (max-width: 600px) {
  .first-copy .hero-title { font-size: clamp(2rem, 7.4vw, 2.6rem); }
  .matrix-paths { grid-template-columns: 1fr; }
  .matrix-scenes { gap: 0.3rem; }
}