/* The desk at work (/product): real console captures, framed on paper, and the gate's and a
   checkpoint's text drawn as Relay product-example cards. */
.product-page { --paper-slip: #f5f1ed; }
.product-page h1, .product-page h2, .product-page h3 { font-family: var(--display); font-weight: 400; margin: 0; }
.product-page .nav-links a[aria-current="page"] { color: var(--blue); }

.product-intro { padding: clamp(2.5rem, 5vh, 4rem) var(--gutter) clamp(3rem, 5vw, 4.5rem); }
.product-intro h1 { max-width: none; font-size: clamp(3.5rem, 8vw, 8rem); line-height: 0.96; letter-spacing: -0.015em; }
.product-intro h1 span { display: block; white-space: normal; }
.product-lede { max-width: 46ch; margin: 1.75rem 0 0; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 500; line-height: 1.4; }

.product-shot { margin: 0; min-width: 0; }
.product-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper-slip); }
.product-shot figcaption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); }
.product-board { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.product-zoom { display: none; }
.product-board img { box-shadow: 0 1.5rem 3rem -2rem rgb(21 19 18 / 0.45); }

.product-reading { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin: 2rem 0 0; padding: 1.5rem 0 0; list-style: none; border-top: 1px solid var(--ink); }
.product-reading h2 { font-size: 2rem; line-height: 1; }
.product-reading p { margin: 0.6rem 0 0; max-width: 34ch; color: var(--muted); line-height: 1.5; }

.product-scene { padding: clamp(3rem, 5vw, 5rem) var(--gutter); border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(16rem, 0.38fr) minmax(0, 0.62fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.product-heading h2 { font-size: clamp(3rem, 4.5vw, 5.25rem); line-height: 0.98; letter-spacing: -0.01em; }
.product-heading h2 span { display: block; }
.product-heading h2 span:last-child { color: var(--blue); }
.product-gate .product-heading h2 span:last-child { color: var(--red); }
.product-thread .product-heading h2 span:last-child { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; }
.product-heading p { max-width: 38ch; margin: 1.5rem 0 0; line-height: 1.5; }
.product-heading { position: sticky; top: 2rem; }

.product-pair { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.product-pair-phone { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr); }
.product-phone img { border-radius: 1.25rem; }

.gate-rounds { display: grid; gap: 1.25rem; }
.gate-verdict { --relay-fill: var(--paper-slip); --relay-stroke: var(--ink); padding: 1.5rem clamp(1.5rem, 3vw, 2.25rem); color: var(--ink); }
.gate-verdict-held { --relay-stroke: var(--red); --relay-fill: transparent; }
.gate-verdict h3 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; }
.gate-verdict-held h3 { color: var(--red); }
.gate-ran { margin: 0.9rem 0 0; max-width: 56ch; line-height: 1.5; }
.gate-finding { margin: 0.9rem 0 0; line-height: 1.5; }
.gate-finding strong { display: inline-block; margin-right: 0.35rem; padding: 0 0.4rem; border-radius: 3px; background: rgb(21 19 18 / 0.08); font: 700 0.75rem/1.6 monospace; }
.gate-verdict-held .gate-finding strong { background: var(--red); color: var(--paper-slip); }
.gate-finding code, .gate-run dd { font: 0.82rem/1.5 monospace; overflow-wrap: anywhere; }
.gate-run { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem 1.5rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid rgb(21 19 18 / 0.2); }
.gate-run dt { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.gate-run dd { margin: 0.15rem 0 0; }
.product-note { grid-column: 2; margin: -1rem 0 0; font-size: 0.85rem; color: var(--muted); }

.checkpoint-note { --relay-fill: var(--yellow); --relay-stroke: transparent; padding: 1.75rem clamp(1.5rem, 3vw, 2.5rem); color: var(--ink); }
.checkpoint-note h3 { margin-top: 0.5rem; font-size: clamp(2.5rem, 3.5vw, 3.5rem); line-height: 1; }
.checkpoint-note dl { margin: 1rem 0 0; }
.checkpoint-note dl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 0.8rem; border-top: 1px solid rgb(21 19 18 / 0.25); }
.checkpoint-note dt { font-size: 0.85rem; font-weight: 700; }
.checkpoint-note dd { margin: 0; line-height: 1.5; }

.product-start { padding: clamp(3.5rem, 6vw, 6rem) var(--gutter); border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.product-start h2 { font-size: clamp(3rem, 4.5vw, 5.5rem); line-height: 0.98; letter-spacing: -0.01em; }
.product-start h2 span { display: block; }
.product-start h2 span:last-child { color: var(--blue); }
.product-start-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.product-start .section-link { margin-top: 0; padding-inline: 1.25rem 0.75rem; }
.product-start .section-link:first-child { color: var(--paper); background: var(--blue); border-color: var(--blue); border-radius: 6px; }
.product-start .section-link:first-child:hover { background: var(--ink); border-color: var(--ink); }

main [data-relay-ticket].gate-verdict:not(.relay-ready), main .checkpoint-note:not(.relay-ready) { background-color: var(--paper-slip); }

@media (max-width: 980px) {
  .product-scene { grid-template-columns: minmax(0, 1fr); }
  .product-heading { position: static; }
  .product-note { grid-column: 1; margin-top: 0; }
}

@media (max-width: 680px) {
  .product-reading { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .product-pair, .product-pair-phone { grid-template-columns: minmax(0, 1fr); }
  .product-phone { max-width: 18rem; }
  .product-zoom { display: block; }
  .gate-run { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkpoint-note dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .product-start { display: grid; }
}

@media (forced-colors: active) {
  .product-shot img { border-color: CanvasText; }
}