@charset "utf-8";
/* Product pages. The product's own accent drives every accented surface here,
   set once as --accent on :root by page_start(). Nothing below names a color. */

.prod-head { background: var(--bg-soft); }
.prod-head-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-8); align-items: center; }
.prod-head .d1 { max-inline-size: 20ch; }
.prod-head .lede { margin-top: var(--s-4); max-inline-size: 58ch; }
.prod-head .btn-row { margin-top: var(--s-5); }

.prod-mark { text-align: center; }
.prod-ico { margin: 0 auto; width: 96px; height: 96px; }
.prod-mark .cadence {
  display: block; margin-top: var(--s-3); font: 400 var(--t-12)/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep);
}
@media (max-width: 900px) {
  .prod-head-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .prod-mark { text-align: left; }
  .prod-ico { margin: 0; width: 64px; height: 64px; }
}

/* The spine, made visible: a thin accent rule under every section head on a
   product page, so the reader always knows whose page they are on. */
.prod-head { border-bottom: 3px solid var(--accent); }

.faq details + details { margin-top: 0; }
.faq .a a { color: var(--accent-deep); }

.ladder .n { background: var(--accent-deep); }
.pin { background: var(--accent-deep); }
.pinkey i { background: var(--accent-deep); }
.spec-table tbody th { border-left-color: var(--accent); }
.pull { border-left-color: var(--accent); }
.handoff { border-left-color: var(--accent); }
.stat .n { color: var(--accent-deep); }

.product-document-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; border-top: 1px solid var(--line); }
.product-document-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.product-document-list b { display: block; margin-top: var(--s-2); }
.product-document-list p { margin: var(--s-2) 0 0; max-inline-size: 70ch; }
@media (max-width: 640px) { .product-document-list li { grid-template-columns: 1fr; gap: var(--s-4); } }