.cs-page {
  --cs-navy: #0f172a;
  --cs-amber: #f59e0b;
  --cs-amber-dark: #b45309;
  --cs-amber-soft: #fff7e6;
  --cs-teal: #0f766e;
  --cs-red: #b91c1c;
  --cs-ink: #162033;
  --cs-muted: #526174;
  --cs-line: #dbe2ea;
  --cs-soft: #f6f8fb;
  --cs-white: #ffffff;
  background: var(--cs-white);
  color: var(--cs-ink);
}

.cs-page main { overflow: hidden; }
.cs-page [lang="hi"] { font-family: system-ui, "Noto Sans Devanagari", sans-serif; }
.cs-page #cv-nav-placeholder { min-height: var(--nav-h); }
.cs-shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.cs-hero { background: var(--cs-navy); color: var(--cs-white); padding: clamp(64px, 8vw, 104px) 0; }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(48px, 8vw, 112px); align-items: center; }
.cs-hero__copy { max-width: 650px; }
.cs-eyebrow { color: var(--cs-amber-dark); font-size: .78rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; margin: 0 0 16px; text-transform: uppercase; }
.cs-hero .cs-eyebrow,
.cs-cta .cs-eyebrow { color: #fbbf24; }
.cs-hero h1 { color: var(--cs-white); font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -.025em; line-height: .98; margin: 0 0 28px; max-width: 720px; text-wrap: balance; }
.cs-lead { color: #cbd5e1; font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.65; margin: 0 0 30px; max-width: 590px; }
.cs-button { align-items: center; background: var(--cs-amber); border: 2px solid var(--cs-amber); border-radius: 10px; color: #281700; display: inline-flex; font-size: 1rem; font-weight: 800; justify-content: center; min-height: 50px; padding: 12px 24px; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.cs-button:hover { background: #fbbf24; border-color: #fbbf24; transform: translateY(-1px); }
.cs-button:focus-visible,
.cs-workflow__tabs button:focus-visible,
.cs-footer a:focus-visible { outline: 3px solid var(--cs-amber); outline-offset: 4px; }
.cs-quiet { color: #94a3b8; font-size: .88rem; margin: 14px 0 0; }

.cs-phone { background: #05090f; border: 8px solid #293448; border-radius: 34px; box-shadow: 0 28px 70px rgba(0, 0, 0, .32); min-height: 600px; overflow: hidden; position: relative; }
.cs-phone::before { background: #293448; border-radius: 0 0 10px 10px; content: ""; height: 18px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 104px; z-index: 2; }
.cs-phone__top { align-items: center; color: #e2e8f0; display: flex; font-size: .8rem; justify-content: space-between; min-height: 64px; padding: 18px 22px 10px; }
.cs-phone__top span:last-child { color: #94a3b8; }
.cs-camera { align-items: center; background: linear-gradient(145deg, #182231, #080d14); display: flex; flex-direction: column; height: 328px; justify-content: center; position: relative; }
.cs-camera::after { border: 2px solid rgba(245, 158, 11, .9); border-radius: 14px; content: ""; inset: 38px 34px 62px; position: absolute; }
.cs-camera__paper { background: #f8fafc; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); display: grid; gap: 9px; height: 168px; padding: 28px 22px; transform: rotate(-2deg); width: 126px; }
.cs-camera__paper span { background: #cbd5e1; border-radius: 999px; height: 6px; }
.cs-camera__paper span:nth-child(2) { width: 75%; }
.cs-camera p,
.cs-camera > span { bottom: 27px; color: #f8fafc; font-size: .78rem; left: 0; line-height: 1.3; margin: 0; position: absolute; text-align: center; width: 100%; z-index: 1; }
.cs-camera > span { bottom: 10px; color: #cbd5e1; }
.cs-phone__controls { padding: 20px; }
.cs-phone__controls > p { color: #cbd5e1; display: flex; font-size: .78rem; justify-content: space-between; margin: 0 0 12px; }
.cs-phone__controls > p span { color: #94a3b8; }
.cs-vendors { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
.cs-vendors span { align-items: center; background: #263246; border: 2px solid transparent; border-radius: 50%; color: #f8fafc; display: flex; font-weight: 800; justify-content: center; min-height: 56px; }
.cs-vendors span:nth-child(2) { background: #0f766e; }
.cs-vendors span:nth-child(3) { background: #9f3f3f; }
.cs-vendors span:nth-child(4) { background: #5b4ea1; }
.cs-vendors span.is-selected { background: var(--cs-amber); border-color: #fef3c7; color: #281700; }
.cs-quantity { align-items: center; display: grid; gap: 12px; grid-template-columns: 64px 1fr 64px; margin-top: 20px; }
.cs-quantity span,
.cs-quantity strong { align-items: center; border-radius: 12px; display: flex; justify-content: center; min-height: 58px; }
.cs-quantity span { background: #263246; color: #f8fafc; font-size: 2rem; font-weight: 500; }
.cs-quantity strong { color: #f8fafc; font-size: 1.55rem; }

.cs-section { background: var(--cs-white); padding: clamp(72px, 9vw, 112px) 0; }
.cs-section--soft { background: var(--cs-soft); }
.cs-heading { margin-bottom: 36px; max-width: 650px; }
.cs-heading h2,
.cs-cta h2 { color: var(--cs-navy); font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
.cs-workflow { border: 1px solid var(--cs-line); border-radius: 20px; box-shadow: 0 16px 45px rgba(15, 23, 42, .07); overflow: hidden; }
.cs-workflow__tabs { background: var(--cs-soft); border-bottom: 1px solid var(--cs-line); display: none; grid-template-columns: repeat(4, 1fr); }
.cs-js .cs-workflow__tabs { display: grid; }
.cs-workflow__tabs button { align-items: center; border-bottom: 3px solid transparent; color: var(--cs-muted); display: flex; font-weight: 700; gap: 9px; justify-content: center; min-height: 62px; padding: 12px 16px 9px; }
.cs-workflow__tabs button span { align-items: center; border: 1px solid var(--cs-line); border-radius: 50%; display: flex; font-size: .76rem; height: 26px; justify-content: center; width: 26px; }
.cs-workflow__tabs button[aria-selected="true"] { background: var(--cs-white); border-bottom-color: var(--cs-amber); color: var(--cs-navy); }
.cs-workflow__tabs button[aria-selected="true"] span { background: var(--cs-amber); border-color: var(--cs-amber); color: #281700; }
.cs-workflow__panel { align-items: center; display: grid; gap: clamp(32px, 7vw, 96px); grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); min-height: 420px; padding: clamp(32px, 6vw, 72px); }
.cs-workflow__panel[hidden] { display: none; }
.cs-workflow__panel > div:last-child { max-width: 540px; }
.cs-step-label { color: var(--cs-amber-dark); font-size: .8rem; font-weight: 800; letter-spacing: .06em; margin: 0 0 12px; text-transform: uppercase; }
.cs-step-label span { letter-spacing: normal; text-transform: none; }
.cs-workflow__panel h3 { color: var(--cs-navy); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.08; margin: 0 0 14px; }
.cs-workflow__panel > div:last-child > p:last-child { color: var(--cs-muted); font-size: 1.05rem; line-height: 1.7; margin: 0; max-width: 500px; }

.cs-state { align-items: center; background: var(--cs-navy); border-radius: 22px; color: var(--cs-white); display: flex; flex-direction: column; justify-content: center; min-height: 280px; padding: 28px; }
.cs-state--capture { background: linear-gradient(145deg, #233044, #0f172a); gap: 22px; }
.cs-state__paper { background: var(--cs-white); border: 4px solid var(--cs-amber); border-radius: 7px; display: grid; gap: 9px; height: 128px; padding: 28px 22px; width: 96px; }
.cs-state__paper span { background: #cbd5e1; border-radius: 999px; height: 6px; }
.cs-state__vendors { display: flex; gap: 10px; }
.cs-state__vendors i { align-items: center; background: #334155; border-radius: 50%; display: flex; font-style: normal; font-weight: 800; height: 44px; justify-content: center; width: 44px; }
.cs-state__vendors i:first-child { background: var(--cs-amber); color: #281700; }
.cs-state--save { background: #ecfdf5; color: var(--cs-teal); gap: 4px; }
.cs-state--save svg,
.cs-state--send svg { height: 72px; margin-bottom: 12px; width: 72px; }
.cs-state--save strong,
.cs-state--send strong { font-size: 1.2rem; }
.cs-state--save span,
.cs-state--send span { font-size: .88rem; }
.cs-state--send { background: var(--cs-amber-soft); color: var(--cs-amber-dark); gap: 4px; }
.cs-state--check { align-items: stretch; background: var(--cs-soft); gap: 12px; }
.cs-state--check div { align-items: center; background: var(--cs-white); border: 1px solid var(--cs-line); border-radius: 12px; color: var(--cs-ink); display: flex; font-size: .88rem; font-weight: 700; gap: 12px; padding: 18px; }
.cs-state--check i { background: var(--cs-teal); border-radius: 50%; display: block; height: 12px; width: 12px; }
.cs-state--check div:last-child i { background: var(--cs-red); }
.cs-noscript { background: var(--cs-soft); border: 1px solid var(--cs-line); border-radius: 14px; display: grid; gap: 12px; margin-top: 18px; padding: 24px 24px 24px 46px; }

.cs-benefits { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.cs-benefits article { background: var(--cs-white); border: 1px solid var(--cs-line); border-radius: 16px; min-height: 220px; padding: 28px; }
.cs-benefits article > span { color: var(--cs-amber-dark); display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 800; margin-bottom: 40px; }
.cs-benefits h3 { color: var(--cs-navy); font-family: var(--font-display); font-size: 1.55rem; line-height: 1.15; margin: 0 0 10px; }
.cs-benefits p { color: var(--cs-muted); font-size: .95rem; line-height: 1.65; margin: 0; }
.cs-cta { background: var(--cs-navy); color: var(--cs-white); padding: clamp(64px, 8vw, 92px) 0; }
.cs-cta__inner { align-items: center; display: flex; gap: 36px; justify-content: space-between; }
.cs-cta h2 { color: var(--cs-white); }
.cs-cta .cs-eyebrow { margin-bottom: 10px; }
.cs-cta .cs-button { flex-shrink: 0; }
.cs-footer { background: #080e1a; color: #94a3b8; font-size: .82rem; padding: 24px 0; }
.cs-footer__inner,
.cs-footer nav { align-items: center; display: flex; }
.cs-footer__inner { justify-content: space-between; }
.cs-footer nav { gap: 24px; }
.cs-footer a:hover { color: var(--cs-white); }

@media (max-width: 820px) {
  .cs-hero__grid { grid-template-columns: 1fr; }
  .cs-hero__copy { max-width: 620px; }
  .cs-phone { margin-inline: auto; max-width: 370px; width: 100%; }
  .cs-workflow__panel { grid-template-columns: 1fr; }
  .cs-state { min-height: 240px; }
  .cs-benefits { grid-template-columns: 1fr; }
  .cs-benefits article { min-height: 0; }
  .cs-benefits article > span { margin-bottom: 24px; }
}

@media (max-width: 600px) {
  .cs-shell { width: min(100% - 32px, 1120px); }
  .cs-hero { padding: 54px 0 64px; }
  .cs-hero h1 { font-size: clamp(2.65rem, 14vw, 3.55rem); }
  .cs-phone { border-width: 6px; min-height: 560px; }
  .cs-camera { height: 300px; }
  .cs-workflow__tabs { grid-template-columns: repeat(4, minmax(68px, 1fr)); overflow-x: auto; }
  .cs-workflow__tabs button { flex-direction: column; font-size: .75rem; gap: 4px; min-height: 70px; padding-inline: 8px; }
  .cs-workflow__panel { min-height: 0; padding: 24px; }
  .cs-workflow__panel h3 { font-size: 2rem; }
  .cs-workflow__panel > div:last-child > p:last-child { font-size: .98rem; }
  .cs-state { min-height: 220px; }
  .cs-cta__inner { align-items: flex-start; flex-direction: column; }
  .cs-cta .cs-button { width: 100%; }
  .cs-footer__inner { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 360px) {
  .cs-shell { width: calc(100% - 28px); }
  .cs-phone__controls { padding: 16px; }
  .cs-vendors { gap: 7px; }
  .cs-vendors span { min-height: 50px; }
  .cs-quantity { grid-template-columns: 58px 1fr 58px; }
  .cs-workflow__panel { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-button { transition: none; }
  .cs-button:hover { transform: none; }
}