.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; cursor: pointer; 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); }
.cs-footer button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.cs-pilot-dialog { border: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, .35); color: var(--cs-ink); max-height: calc(100vh - 32px); max-width: 680px; padding: 0; width: calc(100% - 32px); }
.cs-pilot-dialog::backdrop { background: rgba(8, 14, 26, .78); }
.cs-pilot-form { padding: clamp(22px, 5vw, 36px); }
.cs-pilot-form__header { align-items: start; display: flex; gap: 24px; justify-content: space-between; }
.cs-pilot-form h2 { color: var(--cs-navy); font-family: var(--font-display); font-size: 2rem; line-height: 1.05; margin: 0 0 8px; }
.cs-pilot-form__header p { color: var(--cs-muted); margin: 0 0 26px; }
.cs-dialog-close { align-items: center; background: var(--cs-soft); border: 1px solid var(--cs-line); border-radius: 9px; cursor: pointer; display: flex; flex: 0 0 44px; font-size: 1.5rem; height: 44px; justify-content: center; }
.cs-pilot-form__grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.cs-pilot-form label { color: var(--cs-muted); display: grid; font-size: .82rem; font-weight: 700; gap: 6px; }
.cs-pilot-form label span { font-weight: 400; }
.cs-pilot-form input, .cs-pilot-form textarea { border: 1px solid #aebdce; border-radius: 8px; color: var(--cs-ink); font: inherit; min-height: 46px; padding: 10px 12px; width: 100%; }
.cs-pilot-form textarea { resize: vertical; }
.cs-pilot-form input:focus, .cs-pilot-form textarea:focus, .cs-dialog-close:focus-visible { outline: 3px solid rgba(3, 105, 161, .25); outline-offset: 2px; }
.cs-pilot-form__wide { grid-column: 1 / -1; }
.cs-honeypot { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
#cs-turnstile { margin: 20px 0 12px; min-height: 65px; }
.cs-form-status { color: var(--cs-muted); min-height: 24px; }

@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; }
  .cs-pilot-form__grid { grid-template-columns: 1fr; }
  .cs-pilot-form__wide { grid-column: auto; }
}

@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; }
}

/* ══════════════════════════════════════════════════════════════════
   INVOICE IMAGE UPLOAD LOOP
   ══════════════════════════════════════════════════════════════════ */
.cs-upload { background: var(--cs-white); }
.cs-upload__layout { display: grid; gap: 32px; grid-template-columns: 1fr 320px; align-items: start; }

/* ── drop zone ─────────────────────────────────────────────────── */
.cs-upload__dropzone { align-items: center; background: var(--cs-soft); border: 2px dashed var(--cs-line); border-radius: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 200px; padding: 32px 24px; transition: background .18s ease, border-color .18s ease; }
.cs-upload__dropzone:hover,
.cs-upload__dropzone:focus-within { background: #eef2f7; border-color: var(--cs-amber); }
.cs-upload__dropzone:focus-visible { outline: 3px solid rgba(245, 158, 11, .5); outline-offset: 4px; }
.cs-upload__icon { color: var(--cs-muted); height: 44px; width: 44px; }
.cs-upload__dropzone:hover .cs-upload__icon { color: var(--cs-amber-dark); }
.cs-upload__drop-text { color: var(--cs-ink); font-weight: 700; font-size: 1rem; margin: 0; }
.cs-upload__drop-hint { color: var(--cs-muted); font-size: .82rem; margin: 0; }

/* ── queue list ────────────────────────────────────────────────── */
.cs-upload__queue { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 18px 0 0; max-height: 320px; overflow-y: auto; padding: 0; }
.cs-upload__queue:empty { display: none; }
.cs-upload__queue-item { align-items: center; background: var(--cs-soft); border: 1px solid var(--cs-line); border-radius: 12px; display: grid; gap: 12px; grid-template-columns: 44px 1fr auto; min-height: 56px; padding: 8px 14px; }
.cs-upload__queue-thumb { border-radius: 6px; height: 44px; object-fit: cover; width: 44px; }
.cs-upload__queue-name { color: var(--cs-ink); font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-upload__queue-size { color: var(--cs-muted); font-size: .75rem; }
.cs-upload__queue-remove { background: none; border: 0; border-radius: 8px; color: var(--cs-muted); cursor: pointer; font-size: 1.25rem; line-height: 1; min-height: 32px; min-width: 32px; padding: 0; transition: background .12s ease, color .12s ease; }
.cs-upload__queue-remove:hover { background: #fee2e2; color: var(--cs-red); }

/* ── submit bar ────────────────────────────────────────────────── */
.cs-upload__submit-bar { align-items: center; display: flex; gap: 16px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; }
.cs-upload__submit-bar[hidden] { display: none; }
.cs-upload__count { color: var(--cs-muted); font-size: .88rem; font-weight: 600; margin: 0; }

/* ── preview panel ─────────────────────────────────────────────── */
.cs-upload__preview-panel { background: var(--cs-navy); border-radius: 18px; min-height: 320px; overflow: hidden; position: sticky; top: 100px; }
.cs-upload__preview-empty,
.cs-upload__preview-active { align-items: center; display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 320px; padding: 28px; }
.cs-upload__preview-empty svg { color: #47556b; height: 60px; width: 60px; }
.cs-upload__preview-empty p { color: #94a3b8; font-weight: 700; margin: 0; }
.cs-upload__preview-empty span { color: #64748b; font-size: .82rem; }
.cs-upload__preview-active img { border-radius: 10px; max-height: 280px; max-width: 100%; object-fit: contain; }
.cs-upload__preview-meta { color: #94a3b8; font-size: .78rem; text-align: center; word-break: break-all; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .cs-upload__layout { grid-template-columns: 1fr; }
  .cs-upload__preview-panel { position: static; }
  .cs-upload__preview-empty,
  .cs-upload__preview-active { min-height: 240px; }
}