.cs-stage { display: grid; gap: var(--space-4); align-items: center; }
.cs-stage > * { min-width: 0; }
.cs-stage > .mock-note { grid-column: 1 / -1; }
.cs-book { width: 100%; box-shadow: var(--shadow); }
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
.cs-hero-note { margin-top: 0.8em; }
.page-clients .cs-hero .cs-rates .k-hide-m { display: none; }
.page-clients .cs-hero .cs-rates tr.cs-pick > * { transition: background-color 0.4s var(--ease-smooth); }
.page-clients .cs-hero:not([data-step]) .cs-rates tr.cs-pick > *, .page-clients .cs-hero[data-step="2"] .cs-rates tr.cs-pick > *, .page-clients .cs-hero[data-step="3"] .cs-rates tr.cs-pick > * { background: var(--orange-wash); }
.page-clients .cs-hero:not([data-step]) .cs-rates tr.cs-pick > :first-child, .page-clients .cs-hero[data-step="2"] .cs-rates tr.cs-pick > :first-child, .page-clients .cs-hero[data-step="3"] .cs-rates tr.cs-pick > :first-child { box-shadow: inset 3px 0 0 var(--orange); }
.page-clients .fhero-stage { container-type: inline-size; }
.cs-stage { gap: var(--space-3); }
.cs-stage > .browser { align-self: stretch; display: flex; flex-direction: column; }
.cs-stage > .browser > .app { flex: 1; align-content: start; }
.cs-book { font-size: 11.5px; padding: 1em 1.1em 1.1em; }
.cs-book .k-pagehead { margin-bottom: 0.7em; }
.cs-book .k-form { grid-template-columns: 1fr 1fr; gap: 0.6em 0.8em; }
.cs-book .k-form > .cs-pair, .cs-book .k-form > .k-note, .cs-book .k-form > .k-form-foot, .cs-book .k-form > .k-field:first-child, .cs-book .k-form > .k-field:nth-child(4) { grid-column: 1 / -1; }
.cs-book .k-input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-hero .cs-role { padding-block: 0.6em 0.7em; }
@container (min-width: 36rem) {
  .cs-stage { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .cs-book { align-self: stretch; }
  .cs-book .k-form { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 60em) { .cs-book { font-size: 12px; } }
.cs-empty { color: transparent; }
.page-clients .k-field > em { min-height: 1.3em; }
.js [data-step="3"] .cs-save { animation: kPress 0.5s var(--ease-out) both; }
.js .cs-hero[data-step="2"] .k-field.is-auto .k-input { animation: csFill 0.9s var(--ease-out) both; }
@keyframes csFill { 0% { box-shadow: 0 0 0 0.35em var(--orange-wash); } 100% { box-shadow: 0 0 0 0 transparent; } }
.cs-tabcount { margin-bottom: 0.4em; font-size: 0.76em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-3); }
.cs-tabs { flex-wrap: wrap; white-space: normal; }
.cs-tabs span { padding: 0.5em 0.6em; font-size: 0.94em; }
.cs-tabs--last { margin-bottom: 0; }
.cs-client .k-swap--block { min-height: 6.6em; }
.cs-req { width: min(100%, 26rem); }
.cs-req-title { display: flex; align-items: baseline; gap: 0.6em; font-weight: 700; font-size: 1.1em; color: var(--app-text); }
.cs-req-title span { font-weight: 500; font-size: 0.85em; color: var(--app-text-3); }
.cs-req-h { margin: 0.95em 0 0.4em; font-size: 0.76em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-3); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 0.35em; }
.cs-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.35em 0; color: var(--app-text); font-weight: 500; }
.cs-row + .cs-row { border-top: 1px solid var(--app-bg-alt); }
.cs-rates td, .cs-rates th { font-variant-numeric: tabular-nums; }
.cs-up { color: var(--green-text); }
.cs-down { color: var(--red-text); }
.page-clients .cs-rates tr.cs-neg > * { background: var(--red-bg); }
.page-clients .cs-rates tr.cs-neg > :first-child { box-shadow: inset 3px 0 0 var(--red); }
.cs-nmw { width: min(100%, 32em); }
.js [data-step="2"] .cs-bad { animation: kShake 0.5s var(--ease-smooth) both; }
.js .cs-nmw[data-step="1"] .cs-save { animation: kPress 0.5s var(--ease-out) 1.1s both; }
@media (max-width: 39.99em) { .page-clients .cs-rates th, .page-clients .cs-rates td { padding-inline: 0.45em; } .page-clients .cs-rates tbody th { white-space: normal; } }
.page-clients .cs-rates th span.k-hide-s { display: none; }
.page-clients .cs-rates th, .page-clients .cs-rates td { padding-inline: 0.5em; }
.page-clients .cs-rates tr > :first-child { padding-left: 0.9em; }
.page-clients .cs-rates tr > :last-child { padding-right: 0.9em; }
.cs-role { margin-top: 0.8em; padding: 0.8em 0.9em 0.9em; border-radius: 0.9em; background: var(--app-bg-alt); }
.cs-role-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em; margin-bottom: 0.6em; font-weight: 700; color: var(--app-text); }
.cs-role-h span { font-weight: 500; font-size: 0.88em; color: var(--app-text-3); }
.cs-fill { width: 100%; max-width: 36rem; }
.jp-screen .cs-req { max-width: 26rem; }
.jp-screen .cs-nmw { width: 100%; max-width: 36rem; }
.page-clients .jp-screen .screen--lg { font-size: 12.5px; }
@media (min-width: 60em) { .page-clients .jp-screen .screen--lg { font-size: 13.5px; } }
@media (max-width: 29.99em) { .page-clients .jp-screen .k-form--2 { grid-template-columns: 1fr 1fr; gap: 0.7em 0.7em; } .page-clients .jp-screen .k-form--2 > .k-field:first-child, .page-clients .jp-screen .k-form--2 > .k-field:nth-child(2) { grid-column: 1 / -1; } .page-clients .jp-screen .screen--lg { font-size: 11.5px; } .page-clients .jp-screen .k-form--2 .k-input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.page-clients .cs-hero .cs-rates tr > :nth-child(7) { display: none; }
@media (min-width: 60em) {
  .page-clients #clients .jx--side > .jx-stage { align-self: stretch; }
  .page-clients #clients .jx--side > .jx-side { grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; }
  .js .page-clients #clients .jx-side .jx-tabs { margin-top: auto; }
  .page-clients #clients .jx-side .eyebrow { margin-bottom: var(--space-3); }
  .page-clients #clients .jp--row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 75em) {
  .page-clients #clients .jx--side { grid-template-columns: minmax(0, 20.5rem) minmax(0, 1fr); gap: var(--space-8); }
  .page-clients #clients .jp--row > .jp-copy { padding-block: 1.75rem; }
  .page-clients #clients .jp-screen .cs-req { font-size: 14px; }
}
@media (max-width: 35.99em) { .js .page-clients #clients .jx-tabs > li:last-child { grid-column: 1 / -1; } }
@media (max-width: 39.99em) { .page-clients .cs-hero .cs-role { display: none; } }
.page-clients .cs-sites th, .page-clients .cs-sites td { padding-inline: 0.5em; }
.page-clients .cs-sites tr > :first-child { padding-left: 0.9em; }
.page-clients .cs-sites tr > :last-child { padding-right: 0.9em; }
.page-clients .cs-sites .badge { white-space: nowrap; }
@container (min-width: 36rem) and (max-width: 42rem) { .page-clients .cs-hero .cs-rates tr > :nth-child(3) { display: none; } }
.cs-pair { align-items: end; }
@media (min-width: 60em) {
  html:not(.js) .page-clients #clients .jx-side .jx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-4); }
}
@media (max-width: 39.99em) { .page-clients .k-input--select { padding-inline: 0.6em; gap: 0.35em; } }