
.kv { display: grid; grid-template-columns: 9em 1fr; gap: 8px 16px; margin: 0; }
.bound { font-size: var(--fs-body); color: var(--w6a-ink-900); margin: 16px 0 0; padding-left: 16px; border-left: 2px solid var(--w6a-border); max-width: 38em; }
.rgrid, .capsgrid { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.panel .fig, .panel .vx-chart { margin: 0; }
@media (max-width: 900px) {
  .rgrid, .capsgrid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .panel { padding: 16px; }
}
.h1 .n { color: var(--w6a-brand); }
.works-hero { position: relative; padding-right: 64px; padding-bottom: 24px; }
.works-hero .vx-phone { position: absolute; right: 0; bottom: 0; width: 150px; }
.shows { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.show { display: grid; grid-template-rows: auto 1fr; gap: 20px; }
.show__stage { position: relative; }
.show__stage--dual { padding-right: 56px; padding-bottom: 20px; }
.show__stage--dual .vx-phone { position: absolute; right: 0; bottom: 0; width: 120px; }
.show__stage .vx-browser { margin: 0; }
.show__txt .h3 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.show__kind { margin: 4px 0 12px; color: var(--w6a-ink-500); }
.show .bignum__l { flex-basis: 100%; font-size: var(--fs-small); color: var(--w6a-ink-500); }
.wk__lock { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); color: var(--w6a-ink-500); margin: 12px 0 0; }
.wk__lock svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--w6a-brand); }
.wk__go { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-weight: 600; color: var(--w6a-brand); }
.wk__full { font-weight: 600; }
.wk__hl { padding-left: 1.2em; margin: 8px 0 12px; }
.allhead { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: center; }
.allhead .vx-chart { max-width: 300px; }
.band { list-style: none; margin: 24px 0 0; padding: 4px 4px 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.wk { scroll-snap-align: start; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 20px; display: flex; flex-direction: column; }
.wk__top { display: flex; justify-content: space-between; align-items: center; }
.wk__y { font-size: var(--fs-small); color: var(--w6a-ink-500); }
.wk__n { font: 600 44px/1 var(--w6a-font-display); color: var(--w6a-brand); margin: 16px 0 6px; }
.wk__note { font-size: var(--fs-small); color: var(--w6a-ink-500); margin: 0; min-height: 4.8em; }
.wk__t { font-size: var(--fs-h3); margin: 12px 0 2px; }
.wk__k { margin: 0; font-size: var(--fs-small); }
.wk__caps { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 0; }
.cap { font-size: 12px; padding: 1px 8px; border-radius: var(--w6a-radius-pill); border: var(--hair); color: var(--w6a-ink-300); }
.cap--on { background: var(--w6a-brand-tint); color: var(--w6a-brand-deep); border-color: transparent; }
.band__hint { display: flex; gap: 6px; align-items: center; }
.band__hint svg { width: 16px; height: 16px; }
.offer { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; }
.olist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.olist li { background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 16px 20px; }
.olist__t { font-weight: 600; margin: 0; }
.olist__p { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; font-size: var(--fs-small); color: var(--w6a-ink-500); }
.olist__p svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--w6a-ok); }
@media (max-width: 900px) {
  .works-hero { padding-right: 40px; }
  .works-hero .vx-phone { width: 96px; }
  .shows, .allhead, .offer { grid-template-columns: 1fr; }
  .show__stage--dual { padding-right: 40px; }
  .show__stage--dual .vx-phone { width: 84px; }
  .allhead .vx-chart { max-width: 260px; }
  .band { grid-auto-columns: 78%; }
}
.cta__in { grid-template-columns: auto 1fr; }
.cta__route { grid-column: 1 / -1; }
.cta__in .btn-row { grid-column: 1 / -1; }
@media (min-width: 901px) { .phead__grid { grid-template-columns: 4fr 8fr; } }
