/* Line 17390 (capability-page-harness-router-to-the-bar-r1): /capabilities/harness-router. Rides the /harnesses sheet
   (ns-hlp-*) and adds only what this page has: the try-it chips and card slot, the uses, the links, the dated shots and
   the prices. --ns-* tokens from css/ns-tokens.css (light and dark), 375 px first, one filled next step. */
.ns-chr-cta { display: grid; gap: 10px; justify-items: start; }
.ns-chr-btn { width: 100%; }
.ns-chr-quiet-link { font-size: .9375rem; }
.ns-chr-try { padding: 16px; border-radius: var(--ns-radius, 12px); background: var(--ns-surface, #f1f3f4); border: 1px solid var(--ns-gold-border, rgba(176, 96, 0, .3)); }
.ns-chr-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.ns-chr-chip { min-height: 44px; padding: 8px 16px; font: inherit; font-size: .9375rem; font-weight: 500; color: var(--ns-text, #202124); background: var(--ns-card, #fff); border: 1px solid var(--ns-border-strong, rgba(60, 64, 67, .26)); border-radius: 999px; cursor: pointer; }
.ns-chr-chip:hover { border-color: var(--ns-gold, #f9ab00); }
.ns-chr-chip:focus-visible { outline: 2px solid var(--ns-gold, #f9ab00); outline-offset: 2px; }
.ns-chr-say { margin: 12px 0 0; min-height: 1.5em; font-size: .9375rem; color: var(--ns-text, #202124); }
.ns-chr-say:empty { display: none; }
.ns-chr-slot[hidden] { display: none; }
.ns-chr-for { margin-top: 8px; }
.ns-chr-uses, .ns-chr-prices, .ns-chr-shots, .ns-chr-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.ns-chr-uses > li, .ns-chr-prices > li { padding: 16px; border: 1px solid var(--ns-border, rgba(60, 64, 67, .14)); border-radius: var(--ns-radius, 12px); background: var(--ns-card, #fff); }
.ns-chr-uses .ns-hlp-h3, .ns-chr-prices .ns-hlp-h3 { margin-top: 0; }
.ns-chr-uses p, .ns-chr-prices p { margin: 4px 0 0; }
.ns-chr-amount { font-weight: 500; color: var(--ns-gold-light, #b06000); }
.ns-chr-links { margin-top: 20px; gap: 4px; }
.ns-chr-links li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--ns-border, rgba(60, 64, 67, .14)); }
.ns-chr-links a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; }
.ns-chr-links span { font-size: .9375rem; color: var(--ns-text-2, #5f6368); }
.ns-chr-shots figure { margin: 0; }
.ns-chr-shots img { display: block; width: 100%; height: auto; border-radius: var(--ns-radius, 12px); border: 1px solid var(--ns-border-strong, rgba(60, 64, 67, .26)); background: var(--ns-surface, #f1f3f4); }
.ns-chr-shots figcaption { margin-top: 8px; font-size: .9375rem; line-height: 1.5; }
.ns-chr-close { text-align: left; padding-bottom: 8px; }

@media (min-width: 768px) {
    .ns-chr-btn { width: auto; }
    .ns-chr-cta { grid-auto-flow: column; align-items: center; justify-content: start; gap: 16px; }
    .ns-chr-cta .ns-chr-btn { margin-top: 0; }
    .ns-chr-cta { margin-top: 20px; }
    .ns-chr-uses, .ns-chr-prices { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .ns-chr-shots { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
