/* p-infobox: an in-research product with no photo. The hero is a drawn prober with the box
   on top (wide and small versions), the dark band a drawn data path (wide and tall), and the
   four kanban screenshots sit in a 2 x 2 grid. Colours are proto.css tokens only. */
.ibx-hero .pdp-model { font-size: clamp(56px, 7.4vw, 104px); letter-spacing: -.02em; }
.ibx-art .n-top { fill: var(--paper); }
.ibx-art .n-left, .ibx-art .n-soft { fill: var(--surface); }
.ibx-art .n-right, .ibx-art .n-win { fill: var(--scene); }
.ibx-art :is(.n-top, .n-left, .n-right, .n-soft, .n-win) { stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; }
.ibx-art .n-seam { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.ibx-art .n-screen, .ibx-art .n-port { fill: var(--copy); stroke: var(--copy); stroke-width: 1.5; stroke-linejoin: round; }
.ibx-art .o-top { fill: var(--sky); }
.ibx-art .o-left { fill: var(--blue); }
.ibx-art .o-right { fill: var(--blue-deep); }
.ibx-art :is(.o-top, .o-left, .o-right) { stroke: var(--blue-deep); stroke-width: 1.5; stroke-linejoin: round; }
.ibx-art .o-led { stroke: var(--sky); stroke-width: 3; stroke-linecap: round; fill: none; }
.ibx-art .cable { stroke: var(--blue); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ibx-art .lead { stroke: var(--muted); stroke-width: 1; fill: none; }
.ibx-art .dot, .ibx-art .lab-ours { fill: var(--blue); }
.ibx-art .ibx-small { display: none; }
@media (max-width: 600px) {
  .ibx-art .ibx-wide { display: none; }
  .ibx-art .ibx-small { display: block; }
}

/* key facts are words, not numerals: same row, smaller set */
.ibx-facts .num-v { font-size: clamp(26px, 3vw, 42px); letter-spacing: -.01em; margin: 12px 0 10px; }

/* the data path on the dark band */
.ibx-band .sec-head p, .ibx-flow figcaption { color: var(--dark-muted); }
.ibx-flow { margin-block: 0; }
.ibx-flow .sep { stroke: var(--panel-line); stroke-width: 1; fill: none; }
.ibx-flow .tag { fill: none; stroke: var(--panel-ink); stroke-width: 1; }
.ibx-flow .ibx-tall { display: none; }
@media (max-width: 720px) {
  .ibx-flow .ibx-wide { display: none; }
  .ibx-flow .ibx-tall { display: block; min-width: 0; max-width: 420px; }
}

/* the four kanban pages, uncropped (16:9 screenshots) */
.ibx-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
.ibx-shots figure { margin: 0; display: grid; gap: 14px; align-content: start; min-width: 0; }
.ibx-shots .media { aspect-ratio: 16 / 9; outline: 1px solid var(--line); }
.ibx-shots figcaption { font-size: 14.5px; line-height: 1.65; color: var(--copy); max-width: 36em; }
.ibx-shots figcaption b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; font-weight: 500; }
.ibx-shots-note { margin-top: 32px; }
@media (max-width: 760px) { .ibx-shots { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* stage: the four project steps carry a one-line description each */
.ibx-steps-h { margin-top: 72px; }
.ibx-steps li span { display: block; margin-top: 6px; padding-right: 20px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.6; }
.ibx-note { margin-top: 32px; }