/* ============================================================
   VIVTAG — design system
   Zero dependencies. No framework, no reset library, no webfont,
   no icon font, no third-party anything. Every rule written here.
   ============================================================ */

/* ---------- 1. tokens ---------------------------------------- */
:root {
  /* ----------------------------------------------------------------
     One palette, two modes, six accents.

     Colour carries meaning here rather than decoration: indigo is the
     brand and the HSRP strip, teal means current, amber means running
     out, rose means lapsed, and each console section gets its own hue
     so you know where you are before you read the heading.
     ---------------------------------------------------------------- */

  /* --- hues, mode-independent --- */
  --h-indigo: #2440e0;
  --h-violet: #7a5af8;
  --h-teal:   #06b6a4;
  --h-cyan:   #0ea5e9;
  --h-amber:  #d97706;
  --h-rose:   #e5484d;

  /* --- light mode surfaces --- */
  --ink-900: #0b0d12;
  --ink-700: #333a47;
  --ink-500: #646c7c;
  --ink-300: #9aa2b2;
  --line:    rgba(11, 13, 18, .09);
  --line-2:  rgba(11, 13, 18, .05);
  --paper:   #f4f6fb;
  --card:    #ffffff;
  --frost:   rgba(255, 255, 255, .72);
  --sunk:    rgba(11, 13, 18, .028);

  --ind:      var(--h-indigo);
  --ind-700:  #1a2fb8;
  --ind-300:  #9aabf7;
  --ind-100:  #edf1fe;
  --violet:   var(--h-violet);

  --stamp:    #059b8c;
  --stamp-100:#e0f7f4;
  --hold:     #b45309;
  --hold-100: #fdf2dc;
  --void:     var(--h-rose);
  --void-100: #fdecec;

  /* the section accent — overridden per surface */
  --accent:      var(--h-indigo);
  --accent-soft: #edf1fe;
  --accent-deep: #1a2fb8;
  --grad-accent: linear-gradient(135deg, #2f4bf0 0%, #2440e0 45%, #5a3ff0 100%);

  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  --plate: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --r-sm: 9px;
  --r:    13px;
  --r-lg: 18px;
  --r-xl: 26px;

  --sh-1: 0 1px 2px rgba(11,13,18,.04), 0 1px 3px rgba(11,13,18,.03);
  --sh-2: 0 1px 2px rgba(11,13,18,.03), 0 8px 18px -6px rgba(11,13,18,.08);
  --sh-3: 0 2px 6px rgba(11,13,18,.04), 0 24px 48px -12px rgba(11,13,18,.16);
  --sh-glow: 0 6px 20px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  --ring: 0 0 0 1px var(--line);

  --grad-ind: var(--grad-accent);
  --grad-dk:  linear-gradient(150deg, #1a2130 0%, #0d1017 60%, #171f2e 100%);

  --mesh-1: rgba(36,64,224,.055);
  --mesh-2: rgba(122,90,248,.05);
  --mesh-3: rgba(6,182,164,.035);

  --tray-w: 372px;
  --gutter: 28px;

  color-scheme: light;
}

/* ================= DARK ================= */
[data-theme="dark"] {
  --ink-900: #e8ecf5;
  --ink-700: #b6c0d2;
  --ink-500: #8b96ab;
  --ink-300: #5b6579;
  --line:    rgba(255, 255, 255, .10);
  --line-2:  rgba(255, 255, 255, .06);
  --paper:   #0b0f17;
  --card:    #141a26;
  --frost:   rgba(20, 26, 38, .74);
  --sunk:    rgba(255, 255, 255, .045);

  --h-indigo: #6b8afd;
  --h-violet: #a78bfa;
  --h-teal:   #2dd4bf;
  --h-cyan:   #38bdf8;
  --h-amber:  #fbbf24;
  --h-rose:   #fb7185;

  --ind:      var(--h-indigo);
  --ind-700:  #4c6ef0;
  --ind-300:  #3a4a80;
  --ind-100:  rgba(107,138,253,.16);

  --stamp:     #2dd4bf;
  --stamp-100: rgba(45,212,191,.16);
  --hold:      #fbbf24;
  --hold-100:  rgba(251,191,36,.16);
  --void:      #fb7185;
  --void-100:  rgba(251,113,133,.16);

  --accent-soft: rgba(107,138,253,.16);
  --accent-deep: #8ea6ff;
  --grad-accent: linear-gradient(135deg, #4f6ef5 0%, #3f57e8 45%, #7a5af8 100%);

  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.55);
  --sh-3: 0 8px 20px rgba(0,0,0,.5), 0 28px 60px -14px rgba(0,0,0,.7);
  --ring: 0 0 0 1px rgba(255,255,255,.09);

  --mesh-1: rgba(107,138,253,.13);
  --mesh-2: rgba(167,139,250,.10);
  --mesh-3: rgba(45,212,191,.07);

  color-scheme: dark;
}

/* ---- per-section accents ---- */
[data-accent="indigo"] { --accent: var(--h-indigo); --accent-soft: color-mix(in srgb, var(--h-indigo) 12%, transparent);
  --grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--h-indigo) 88%, #fff) 0%, var(--h-indigo) 50%, var(--h-violet) 100%); }
[data-accent="violet"] { --accent: var(--h-violet); --accent-soft: color-mix(in srgb, var(--h-violet) 12%, transparent);
  --grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--h-violet) 85%, #fff) 0%, var(--h-violet) 50%, var(--h-indigo) 100%); }
[data-accent="teal"]   { --accent: var(--h-teal); --accent-soft: color-mix(in srgb, var(--h-teal) 12%, transparent);
  --grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--h-teal) 85%, #fff) 0%, var(--h-teal) 50%, var(--h-cyan) 100%); }
[data-accent="cyan"]   { --accent: var(--h-cyan); --accent-soft: color-mix(in srgb, var(--h-cyan) 12%, transparent);
  --grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--h-cyan) 85%, #fff) 0%, var(--h-cyan) 50%, var(--h-indigo) 100%); }
[data-accent="amber"]  { --accent: var(--h-amber); --accent-soft: color-mix(in srgb, var(--h-amber) 13%, transparent);
  --grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--h-amber) 85%, #fff) 0%, var(--h-amber) 50%, var(--h-rose) 100%); }
[data-accent="rose"]   { --accent: var(--h-rose); --accent-soft: color-mix(in srgb, var(--h-rose) 12%, transparent);
  --grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--h-rose) 85%, #fff) 0%, var(--h-rose) 50%, var(--h-violet) 100%); }

/* ---------- 2. reset ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

html { height: 100%; }
body {
  margin: 0;
  transition: background-color .3s ease, color .3s ease;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--paper);
  background-image:
    radial-gradient(58rem 34rem at 8% -8%,  var(--mesh-1), transparent 60%),
    radial-gradient(46rem 30rem at 105% 4%, var(--mesh-2), transparent 62%),
    radial-gradient(40rem 26rem at 50% 108%, var(--mesh-3), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--ind);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.vt-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. the plate (signature element) ------------------ */
/* A real Indian plate: white ground, embossed black characters,
   blue IND strip with the chakra. It fills in live as you type.   */
.plate {
  --plate-h: 76px;
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--plate-h);
  border-radius: 8px;
  border: 2px solid #101216;
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f7f9 52%, #e9ebef 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(18,20,26,.10),
    var(--sh-1);
  overflow: hidden;
  transition: box-shadow .28s ease, transform .28s ease;
}
.plate::after {                       /* rivet-lit top highlight */
  content: "";
  position: absolute; inset: 2px 2px auto 2px; height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  pointer-events: none;
}
.plate__ind {
  flex: 0 0 30px;
  background: linear-gradient(180deg, var(--ind) 0%, var(--ind-700) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 7px 0 6px;
  border-right: 1px solid rgba(0,0,0,.35);
}
.plate__chakra {
  width: 15px; height: 15px; border-radius: 50%;
  background:
    repeating-conic-gradient(#fff 0 6deg, transparent 6deg 15deg);
  box-shadow: inset 0 0 0 1.5px #fff;
  opacity: .55;
  transition: opacity .3s ease;
}
.plate__ind-txt {
  font-family: var(--plate);
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  color: #fff; opacity: .75;
  transition: opacity .3s ease;
}
.plate__chars {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: .08em;
  font-family: var(--plate);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: .055em;
  color: #101216;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(0,0,0,.16);
  white-space: nowrap;
  padding-inline: 8px;
}
.plate__chars .ph { color: var(--ink-300); text-shadow: none; font-weight: 700; }

/* type straight into the plate — the field IS the plate */
.plate__input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--plate);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: .055em;
  color: #101216;
  text-align: center;
  text-transform: uppercase;
  padding-inline: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(0,0,0,.16);
}
.plate__input::placeholder { color: var(--ink-300); font-weight: 700; text-shadow: none; }
.plate--live:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(18,20,26,.10),
    0 0 0 3px var(--ind-100), var(--sh-2);
}

/* long strings (BH series, 4-letter series) must not clip */
.plate[data-len="long"] .plate__chars,
.plate[data-len="long"] .plate__input { font-size: 25px; letter-spacing: .03em; }
.plate--sm[data-len="long"] .plate__chars { font-size: 17px; letter-spacing: .02em; }

.plate[data-state="valid"] {
  border-color: #0d0f13;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(18,20,26,.12),
    0 0 0 3px var(--ind-100), var(--sh-2);
}
.plate[data-state="valid"] .plate__chakra,
.plate[data-state="valid"] .plate__ind-txt { opacity: 1; }
.plate[data-state="valid"] { animation: plate-seat .42s cubic-bezier(.2,.9,.3,1.2); }
@keyframes plate-seat {
  0%   { transform: translateY(-3px) scale(.985); }
  60%  { transform: translateY(1px)  scale(1.008); }
  100% { transform: none; }
}
.plate[data-state="taken"] {
  border-color: var(--void);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px var(--void-100);
}
.plate--sm { --plate-h: 54px; border-radius: 6px; }
.plate--sm .plate__ind { flex-basis: 22px; padding: 5px 0 4px; }
.plate--sm .plate__chakra { width: 11px; height: 11px; }
.plate--sm .plate__ind-txt { font-size: 7px; }
.plate--sm .plate__chars { font-size: 21px; }

/* ---------- 4. shell ----------------------------------------- */
/* Sticky footer. Everything under body holds its own height except
   the one wrapper that should absorb the slack.
   `body > .vp-page` (a class) used to out-rank `body > main` (types),
   so <main class="vp-page"> never stretched and every short admin or
   portal page left several hundred px of dead space. */
.vt-shell { flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; }
body > * { flex: 0 0 auto; width: 100%; }
body > main,
body > .vt-shell,
body > .va-wrap { flex: 1 0 auto; }
/* `margin: 0 auto` on a flex item CANCELS cross-axis stretch, so the
   centred wrappers collapsed to content width the moment body became
   a flex column. width:100% restores the fill; max-width still caps
   and the auto margins still centre. */
body > .vs-band { width: auto; }
.vs-foot { flex-shrink: 0; margin-top: auto; }

.vt-top {
  position: sticky; top: 0; z-index: 40;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
  height: 58px;
}
.vt-brand {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
}
.vt-brand b { color: var(--ind); font-weight: 800; }
.vt-brand span {
  font-family: var(--data); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500);
}
.vt-top__spacer { flex: 1; }
.vt-exit {
  font-size: 13px; color: var(--ink-500); padding: 6px 10px;
  border-radius: var(--r-sm);
}
.vt-exit:hover { color: var(--ink-900); background: var(--line-2); }

.vt-body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--tray-w) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

/* ---------- 5. tray (left rail) ------------------------------- */
.vt-tray {
  position: sticky; top: 58px;
  align-self: start;
  height: calc(100vh - 58px);
  overflow-y: auto;
  padding: 24px var(--gutter) 32px;
  background: var(--card);
  border-right: 1px solid var(--line);
}
.vt-tray__eyebrow {
  font-family: var(--data);
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-500);
  margin-bottom: 10px;
}
.vt-tray__meta {
  margin: 14px 0 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
}
.vt-tray__meta div { min-width: 0; }
.vt-tray__meta dt {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 600; margin-bottom: 2px;
}
.vt-tray__meta dd {
  font-family: var(--data); font-size: 13px; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-tray__meta dd:empty::after { content: "—"; color: var(--ink-300); }

.vt-slots { display: grid; gap: 6px; }
.vt-slots > * { min-width: 0; }
.vt-slot {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease;
}
.vt-slot:hover { background: var(--line-2); }
.vt-slot[data-active="1"] { background: var(--ind-100); border-color: var(--ind-300); }
.vt-slot__tick {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  background: var(--card);
  transition: background .2s ease, border-color .2s ease;
}
.vt-slot__tick::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); transition: all .2s ease;
}
.vt-slot__name { font-size: 13.5px; color: var(--ink-700); min-width: 0; }
.vt-slot__state {
  font-family: var(--data); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-300);
}
.vt-slot[data-state="done"] .vt-slot__tick { border-color: var(--stamp); background: var(--stamp); }
.vt-slot[data-state="done"] .vt-slot__tick::after {
  width: 9px; height: 5px; border-radius: 0; background: none;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.vt-slot[data-state="done"] .vt-slot__name { color: var(--ink-900); font-weight: 500; }
.vt-slot[data-state="done"] .vt-slot__state { color: var(--stamp); }
.vt-slot[data-state="skip"] .vt-slot__state { color: var(--ink-300); }
.vt-slot[data-state="err"]  .vt-slot__tick { border-color: var(--void); }
.vt-slot[data-state="err"]  .vt-slot__tick::after { background: var(--void); }
.vt-slot[data-state="err"]  .vt-slot__state { color: var(--void); }

.vt-meter { margin-top: 22px; }
.vt-meter__bar {
  height: 4px; border-radius: 99px; background: var(--line-2); overflow: hidden;
}
.vt-meter__fill {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--ind), #3a63d0);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.vt-meter__txt {
  margin-top: 8px; font-size: 12px; color: var(--ink-500);
}
.vt-meter__txt b { color: var(--ink-900); font-weight: 600; }

/* ---------- 6. stage (right) --------------------------------- */
.vt-stage { padding: 34px var(--gutter) 120px; max-width: 780px; }

.vt-step { display: none; animation: step-in .3s ease both; }
.vt-step[data-on="1"] { display: block; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.vt-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--data);
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ind);
  margin-bottom: 12px;
}
.vt-eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.vt-h1 {
  font-size: 27px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.2; margin-bottom: 8px;
}
.vt-lede { font-size: 15px; color: var(--ink-500); max-width: 56ch; }
.vt-block { margin-top: 30px; }
.vt-block__h {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-700);
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* ---------- 7. fields ---------------------------------------- */
.vt-grid { display: grid; gap: 16px; }
.vt-grid > * { min-width: 0; }
.vt-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vt-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.vt-span-2 { grid-column: span 2; }

.vt-field { display: grid; gap: 6px; min-width: 0; }
.vt-label {
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  display: flex; align-items: center; gap: 6px;
}
.vt-label em {
  font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-300);
}
.vt-label i {
  font-style: normal; color: var(--void); font-weight: 700;
}
.vt-hint { font-size: 12.5px; color: var(--ink-500); }
.vt-err {
  font-size: 12.5px; color: var(--void); font-weight: 500;
  display: none;
}
.vt-field[data-invalid="1"] .vt-err { display: block; }

.vt-input, .vt-select, .vt-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 14.5px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.vt-input::placeholder, .vt-textarea::placeholder { color: var(--ink-300); }
.vt-input:hover, .vt-select:hover, .vt-textarea:hover { border-color: var(--ink-300); }
.vt-input:focus, .vt-select:focus, .vt-textarea:focus {
  outline: none;
  border-color: var(--ind);
  box-shadow: 0 0 0 3px var(--ind-100);
}
.vt-field[data-invalid="1"] .vt-input,
.vt-field[data-invalid="1"] .vt-select {
  border-color: var(--void); box-shadow: 0 0 0 3px var(--void-100);
}
.vt-textarea { min-height: 84px; resize: vertical; }
.vt-select {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: right 15px top 51%, right 10px top 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.vt-input--data { font-family: var(--data); letter-spacing: .02em; }
.vt-input--plate {
  font-family: var(--plate); font-weight: 800; font-size: 20px;
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
  padding: 13px 12px;
}

/* segmented — for one-of-three choices that must not stack */
.vt-seg {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--line-2); border-radius: 8px;
  border: 1px solid var(--line);
}
.vt-seg button {
  padding: 7px 15px; border-radius: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-500);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.vt-seg button:hover { color: var(--ink-900); }
.vt-seg button[aria-pressed="true"] {
  background: var(--card); color: var(--ink-900);
  font-weight: 600; box-shadow: var(--sh-1);
}

/* checkbox / consent */
.vt-check {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px;
  align-items: start; cursor: pointer;
  padding: 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--card);
  transition: border-color .16s ease, background .16s ease;
}
.vt-check:hover { border-color: var(--ink-300); }
.vt-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.vt-check__box {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1.5px solid var(--ink-300); background: var(--card);
  display: grid; place-items: center; margin-top: 1px;
  transition: all .16s ease;
}
.vt-check__box::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px,-1px) scale(.5);
  opacity: 0; transition: all .16s ease;
}
.vt-check input:checked ~ .vt-check__box { background: var(--ind); border-color: var(--ind); }
.vt-check input:checked ~ .vt-check__box::after { opacity: 1; transform: rotate(-45deg) translate(1px,-1px) scale(1); }
.vt-check input:focus-visible ~ .vt-check__box { box-shadow: 0 0 0 3px var(--ind-100); }
.vt-check__txt { font-size: 13.5px; color: var(--ink-700); line-height: 1.55; }
.vt-check:has(input:checked) { border-color: var(--ind-300); background: var(--ind-100); }

/* ---------- 8. document tile (the upload control) ------------- */
/* One tile per document. Both sides live in the same tile so a
   two-sided card is one task, not two file inputs.               */
.vt-docs { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.vt-docs > * { min-width: 0; }

.vt-doc {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.vt-doc:hover { border-color: var(--ink-300); box-shadow: var(--sh-1); }
.vt-doc[data-state="done"] { border-color: var(--stamp); }
.vt-doc[data-state="err"]  { border-color: var(--void); }

.vt-doc__head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px 10px;
  border-bottom: 1px solid var(--line-2);
}
.vt-doc__name { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; }
.vt-doc__req {
  font-family: var(--data); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-300); font-weight: 600;
}
.vt-doc__req[data-r="1"] { color: var(--void); }

.vt-doc__sides { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line-2); }
.vt-doc__sides[data-two="1"] { grid-template-columns: 1fr 1fr; }

.vt-side {
  position: relative;
  background: var(--card);
  min-height: 118px;
  display: grid; place-items: center;
  cursor: pointer;
  text-align: center;
  padding: 14px 10px;
  transition: background .16s ease;
}
.vt-side:hover { background: var(--line-2); }
.vt-side:focus-visible {
  outline: none;
  background: var(--ind-100);
  box-shadow: inset 0 0 0 2px var(--ind);
}
.vt-side.is-drag { background: var(--ind-100); box-shadow: inset 0 0 0 2px var(--ind); }
.vt-side input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.vt-side__glyph {
  width: 30px; height: 36px; margin: 0 auto 8px;
  border: 1.5px solid var(--ink-300); border-radius: 3px;
  position: relative; background: var(--card);
}
.vt-side__glyph::before {              /* folded corner */
  content: ""; position: absolute; top: -1px; right: -1px;
  width: 11px; height: 11px;
  background: var(--card);
  border-left: 1.5px solid var(--ink-300);
  border-bottom: 1.5px solid var(--ink-300);
  border-radius: 0 0 0 3px;
}
.vt-side__glyph::after {               /* ruled lines */
  content: ""; position: absolute; left: 5px; right: 5px; top: 18px; height: 9px;
  background:
    linear-gradient(var(--ink-300) 1.5px, transparent 0) 0 0/100% 4.5px repeat-y;
  opacity: .8;
}
.vt-side__lbl {
  font-size: 12.5px; font-weight: 500; color: var(--ink-700);
}
.vt-side__sub { font-size: 11px; color: var(--ink-300); margin-top: 2px; }

.vt-side__file {
  position: absolute; inset: 0;
  display: none;
  background: var(--card);
}
.vt-side[data-filled="1"] .vt-side__file { display: block; }
.vt-side[data-filled="1"] .vt-side__empty { visibility: hidden; }
.vt-side__thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--line-2);
}
.vt-side__pdf {
  width: 100%; height: 100%;
  display: grid; place-content: center; gap: 4px;
  background: var(--line-2);
  font-family: var(--data); font-size: 11px; color: var(--ink-700);
  text-align: center; padding: 8px;
}
.vt-side__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(0deg, rgba(18,20,26,.86), rgba(18,20,26,0));
  color: #fff; font-size: 10.5px;
  font-family: var(--data);
}
.vt-side__bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-side__bar b { font-weight: 700; opacity: .85; }
.vt-side__x {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
  flex: 0 0 auto;
}
.vt-side__x:hover { background: var(--void); }

.vt-doc__foot {
  padding: 9px 13px; border-top: 1px solid var(--line-2);
  display: grid; gap: 6px;
}
.vt-doc__num {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--data); font-size: 12.5px; letter-spacing: .03em;
  text-transform: uppercase;
}
.vt-doc__num:focus { outline: none; border-color: var(--ind); box-shadow: 0 0 0 3px var(--ind-100); }
.vt-doc__note { font-size: 11.5px; color: var(--ink-500); }

/* ---------- 9. selfie capture -------------------------------- */
.vt-face {
  display: grid; grid-template-columns: 260px 1fr; gap: 26px;
  align-items: start;
}
.vt-face__stage {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #101216;
  display: grid; place-items: center;
}
.vt-face__stage video, .vt-face__stage img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1);
}
.vt-face__stage img.no-mirror { transform: none; }
.vt-face__guide {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 30% at 50% 44%, transparent 98%, rgba(16,18,22,.62) 100%);
}
.vt-face__guide::after {
  content: "";
  position: absolute; left: 50%; top: 44%;
  width: 76%; height: 60%;
  transform: translate(-50%,-50%);
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: 50%;
}
.vt-face__idle {
  color: var(--ink-300); font-size: 13px; text-align: center; padding: 20px;
}
.vt-face__acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- 10. buttons -------------------------------------- */
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease,
              color .16s ease, transform .06s ease;
  white-space: nowrap;
}
.vt-btn:active { transform: translateY(1px); }
.vt-btn[disabled] { opacity: .45; pointer-events: none; }
.vt-btn--go { background: var(--ind); color: #fff; }
.vt-btn--go:hover { background: var(--ind-700); }
.vt-btn--line { border-color: var(--line); background: var(--card); color: var(--ink-700); }
.vt-btn--line:hover { border-color: var(--ink-300); color: var(--ink-900); }
.vt-btn--ghost { color: var(--ink-500); padding-inline: 12px; }
.vt-btn--ghost:hover { color: var(--ink-900); background: var(--line-2); }
.vt-btn--sm { padding: 7px 13px; font-size: 13px; }

.vt-nav {
  position: fixed; left: var(--tray-w); right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--gutter);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.vt-nav__spacer { flex: 1; }
.vt-nav__note { font-size: 12.5px; color: var(--ink-500); }

/* ---------- 11. status pills, review rows -------------------- */
.vt-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-family: var(--data); font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.vt-pill--ok   { background: var(--stamp-100); color: var(--stamp); }
.vt-pill--hold { background: var(--hold-100);  color: var(--hold); }
.vt-pill--bad  { background: var(--void-100);  color: var(--void); }
.vt-pill--idle { background: var(--line-2);    color: var(--ink-500); }

.vt-review { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.vt-review__row {
  display: grid; grid-template-columns: 150px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
}
.vt-review__row:last-child { border-bottom: 0; }
.vt-review__k { font-size: 12.5px; color: var(--ink-500); font-weight: 500; }
.vt-review__v { font-family: var(--data); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.vt-review__v.is-empty { color: var(--ink-300); font-family: var(--ui); font-style: italic; }
.vt-review__thumbs { display: flex; gap: 5px; margin-top: 6px; }
.vt-review__thumbs img,
.vt-review__thumbs span {
  width: 38px; height: 28px; border-radius: 3px; object-fit: cover;
  border: 1px solid var(--line); background: var(--line-2);
  display: grid; place-items: center;
  font-family: var(--data); font-size: 8px; color: var(--ink-500);
}

.vt-callout {
  display: grid; grid-template-columns: 3px 1fr; gap: 14px;
  border-radius: var(--r); overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  padding: 0 0 0 0;
}
.vt-callout::before { content: ""; background: var(--ind); }
.vt-callout > div { padding: 13px 16px 14px 2px; }
.vt-callout h4 { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.vt-callout p { font-size: 13px; color: var(--ink-500); }
.vt-callout--warn::before { background: var(--hold); }
.vt-callout--bad::before  { background: var(--void); }

/* ---------- 12. toast ---------------------------------------- */
.vt-toasts {
  position: fixed; right: 20px; bottom: 84px; z-index: 90;
  display: grid; gap: 8px; justify-items: end;
}
.vt-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border-radius: 9px;
  background: var(--ink-900); color: #fff;
  font-size: 13.5px; box-shadow: var(--sh-3);
  animation: toast-in .26s cubic-bezier(.2,.9,.3,1.1) both;
  max-width: 360px;
}
.vt-toast[data-kind="bad"]  { background: var(--void); }
.vt-toast[data-kind="ok"]   { background: var(--stamp); }
.vt-toast.is-out { animation: toast-out .2s ease forwards; }
@keyframes toast-in  { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform:none } }
@keyframes toast-out { to   { opacity:0; transform: translateY(6px) } }

/* ---------- 13. sheet / modal -------------------------------- */
.vt-sheet {
  position: fixed; inset: 0; z-index: 80;
  display: none; place-items: center;
  padding: 20px;
  background: rgba(18,20,26,.5);
}
.vt-sheet[data-on="1"] { display: grid; }
.vt-sheet__box {
  width: min(560px, 100%);
  max-height: 86vh; overflow: auto;
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: sheet-in .24s cubic-bezier(.2,.9,.3,1.05) both;
}
@keyframes sheet-in { from { opacity:0; transform: translateY(12px) scale(.985) } to { opacity:1; transform:none } }
.vt-sheet__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.vt-sheet__head h3 { font-size: 16px; font-weight: 700; flex: 1; }
.vt-sheet__body { padding: 20px; }
.vt-sheet__foot {
  padding: 14px 20px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end;
}
.vt-x {
  width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center; color: var(--ink-500); font-size: 19px;
}
.vt-x:hover { background: var(--line-2); color: var(--ink-900); }

/* ---------- 14. responsive ----------------------------------- */
@media (max-width: 1080px) {
  :root { --tray-w: 300px; --gutter: 22px; }
  .vt-face { grid-template-columns: 210px 1fr; }
}

@media (max-width: 860px) {
  .vt-body { grid-template-columns: 1fr; }

  .vt-tray {
    position: sticky; top: 58px; z-index: 20;
    height: auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 14px var(--gutter);
    display: grid; grid-template-columns: auto 1fr; gap: 14px;
    align-items: center;
  }
  .vt-tray__eyebrow, .vt-tray__meta, .vt-slots { display: none; }
  .vt-tray .plate { --plate-h: 50px; width: 168px; flex: 0 0 168px; }
  .vt-tray .plate__chars { font-size: 18px; letter-spacing: .03em; }
  .vt-tray .plate[data-len="long"] .plate__chars { font-size: 14px; letter-spacing: .01em; }
  .vt-tray .plate__ind { flex-basis: 21px; }
  .vt-tray .plate__chakra { width: 10px; height: 10px; }
  .vt-tray .plate__ind-txt { font-size: 7px; }
  .vt-meter { margin-top: 0; }

  .vt-stage { padding: 24px var(--gutter) 108px; }
  .vt-nav { left: 0; }
  .vt-h1 { font-size: 23px; }

  .vt-docs { grid-template-columns: 1fr; }
  .vt-grid--2, .vt-grid--3 { grid-template-columns: 1fr; }
  .vt-span-2 { grid-column: auto; }
  .vt-face { grid-template-columns: 1fr; }
  .vt-face__stage { max-width: 280px; }
  .vt-review__row { grid-template-columns: 1fr; gap: 4px; }
  .vt-toasts { right: 12px; left: 12px; bottom: 78px; justify-items: stretch; }
  .vt-toast { max-width: none; }
}

@media (max-width: 460px) {
  .vt-side { min-height: 100px; padding: 11px 6px; }
  .vt-side__sub { display: none; }
  .vt-nav { padding: 11px 16px; }
  .vt-nav__note { display: none; }
  .vt-btn { padding: 11px 16px; }
}

@media (max-width: 360px) {
  .vt-doc__sides[data-two="1"] { grid-template-columns: 1fr; }
}

/* the tray already carries the plate on desktop — don't say it twice */
@media (min-width: 861px) { #reviewPlate { display: none; } }

/* ---------- 15. print (the tray becomes a receipt) ------------ */
@media print {
  .vt-top, .vt-nav, .vt-toasts, .vt-meter { display: none !important; }
  .vt-body { grid-template-columns: 1fr; }
  .vt-tray { position: static; height: auto; border: 0; }
  .vt-step { display: block !important; }
}

/* ============================================================
   16. VERIFIER CONSOLE
   The old admin screen stacked 43 inputs in one column and put
   the document images in a separate block below them, so a
   verifier scrolled between the evidence and the field. Here the
   document sits beside only the fields that come off it.
   ============================================================ */

.vw-body {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr) 400px;
  height: calc(100vh - 58px);
  overflow: hidden;
}

/* --- queue rail --- */
.vw-queue {
  border-right: 1px solid var(--line);
  background: var(--card);
  overflow-y: auto;
  padding: 16px 0 24px;
}
.vw-queue__h {
  font-family: var(--data);
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-500);
  padding: 0 16px 10px;
}
.vw-qitem {
  display: grid; gap: 3px;
  width: 100%; text-align: left;
  padding: 10px 16px;
  border-left: 3px solid transparent;
}
.vw-qitem:hover { background: var(--line-2); }
.vw-qitem[aria-current="true"] { background: var(--ind-100); border-left-color: var(--ind); }
.vw-qitem__reg {
  font-family: var(--plate); font-weight: 800; font-size: 14px;
  letter-spacing: .05em;
}
.vw-qitem__meta {
  font-size: 11.5px; color: var(--ink-500);
  display: flex; align-items: center; gap: 6px;
}
.vw-qitem__age { font-family: var(--data); }
.vw-qitem__age[data-late="1"] { color: var(--void); font-weight: 600; }

/* --- viewer --- */
.vw-view {
  background: #1a1c22;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0; overflow: hidden;
}
.vw-view__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #22252d;
  border-bottom: 1px solid #2e323c;
  color: #e8eaee;
}
.vw-view__title { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.vw-view__title b { font-family: var(--data); font-weight: 500; color: #9aa2b1; margin-left: 8px; font-size: 11.5px; }
.vw-tool {
  width: 30px; height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  color: #c3c9d4; font-size: 13px; font-family: var(--data);
}
.vw-tool:hover { background: #333844; color: #fff; }
.vw-tool[aria-pressed="true"] { background: var(--ind); color: #fff; }

.vw-canvas {
  position: relative; overflow: auto;
  display: grid; place-items: center;
  padding: 20px;
}
.vw-canvas img {
  max-width: none;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  transition: transform .2s ease;
  background: #fff;
}
.vw-canvas__none {
  color: #6d7482; font-size: 13px; text-align: center;
  display: grid; gap: 8px; justify-items: center;
}

.vw-film {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px;
  background: #22252d;
  border-top: 1px solid #2e323c;
  overflow-x: auto;
}
.vw-film button {
  flex: 0 0 auto;
  width: 54px; height: 40px; border-radius: 5px;
  border: 2px solid transparent;
  background: #313640;
  overflow: hidden;
  display: grid; place-items: center;
  font-family: var(--data); font-size: 9px; color: #9aa2b1;
}
.vw-film button img { width: 100%; height: 100%; object-fit: cover; }
.vw-film button[aria-current="true"] { border-color: var(--ind); }

/* --- panel --- */
.vw-panel {
  border-left: 1px solid var(--line);
  background: var(--card);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0; overflow: hidden;
}
.vw-panel__head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.vw-panel__form { overflow-y: auto; padding: 18px 20px 24px; }
.vw-panel__foot {
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  display: grid; gap: 10px;
  background: var(--card);
}

.vw-steps { display: flex; gap: 4px; margin-bottom: 14px; }
.vw-steps button {
  flex: 1; height: 4px; border-radius: 99px;
  background: var(--line);
  position: relative;
}
.vw-steps button[data-s="ok"]   { background: var(--stamp); }
.vw-steps button[data-s="bad"]  { background: var(--void); }
.vw-steps button[aria-current="true"] { background: var(--ind); }
.vw-steps button[aria-current="true"][data-s="ok"]  { background: var(--stamp); box-shadow: 0 0 0 2px var(--stamp-100); }
.vw-steps button[aria-current="true"][data-s="bad"] { background: var(--void);  box-shadow: 0 0 0 2px var(--void-100); }

.vw-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-reason {
  padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-700);
  transition: all .14s ease;
}
.vw-reason:hover { border-color: var(--ink-300); }
.vw-reason[aria-pressed="true"] {
  background: var(--void); border-color: var(--void); color: #fff; font-weight: 500;
}

.vw-acts { display: flex; gap: 8px; }
.vw-acts .vt-btn { flex: 1; }
.vt-btn--ok  { background: var(--stamp); color: #fff; }
.vt-btn--ok:hover { background: #096440; }
.vt-btn--bad { border: 1px solid var(--void); color: var(--void); background: var(--card); }
.vt-btn--bad:hover { background: var(--void); color: #fff; }

.vw-keys {
  font-family: var(--data); font-size: 10.5px; color: var(--ink-300);
  display: flex; gap: 12px; justify-content: center;
}
.vw-keys kbd {
  font-family: var(--data);
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 4px; color: var(--ink-500);
}

.vw-auto {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-500);
  padding: 7px 10px; border-radius: 6px;
  background: var(--hold-100); color: #7a5a08;
  margin-bottom: 14px;
}

@media (max-width: 1180px) {
  .vw-body { grid-template-columns: minmax(0,1fr) 360px; }
  .vw-queue { display: none; }
}
@media (max-width: 820px) {
  .vw-body { grid-template-columns: 1fr; grid-template-rows: 46vh 1fr; height: auto; overflow: visible; }
  .vw-panel { border-left: 0; border-top: 1px solid var(--line); }
  .vw-view { min-height: 46vh; }
}

/* ============================================================
   17. AUTH
   One screen for sign in and create account. The old login.php
   carried two full forms, a role select and a third business
   variant across three files.
   ============================================================ */
.va-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 46%;
}
.va-form {
  display: grid; place-items: center;
  padding: 40px 28px;
}
.va-box { width: min(400px, 100%); }
.va-brand {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  margin-bottom: 30px;
}
.va-brand b { color: var(--ind); }
.va-h { font-size: 25px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 6px; }
.va-sub { font-size: 14px; color: var(--ink-500); margin-bottom: 24px; }
.va-fields { display: grid; gap: 15px; }
/* grid children default to min-width:auto and refuse to shrink below
   their max-content width — which for a row of <input> is enormous */
.va-fields > * { min-width: 0; }
.va-foot { margin-top: 20px; font-size: 13.5px; color: var(--ink-500); text-align: center; }
.va-foot button { color: var(--ind); font-weight: 600; }
.va-foot button:hover { text-decoration: underline; }
.va-legal { margin-top: 22px; font-size: 11.5px; color: var(--ink-300); text-align: center; line-height: 1.6; }

/* OTP boxes — six characters, paste-aware */
.va-otp { display: flex; gap: 8px; }
.va-otp input {
  flex: 1; min-width: 0;
  height: 52px; text-align: center;
  font-family: var(--data); font-size: 20px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.va-otp input:focus {
  outline: none; border-color: var(--ind); box-shadow: 0 0 0 3px var(--ind-100);
}
.va-otp input[data-on="1"] { border-color: var(--ink-300); }
.va-resend {
  margin-top: 9px; font-size: 12.5px; color: var(--ink-500);
  display: flex; align-items: center; gap: 8px;
}
.va-resend button { color: var(--ind); font-weight: 600; }
.va-resend button[disabled] { color: var(--ink-300); font-weight: 400; pointer-events: none; }

/* right panel — a wall of plates, the product's own vernacular */
.va-side {
  background: var(--ind-700);
  background-image:
    radial-gradient(120% 100% at 100% 0%, #2a54c4 0%, transparent 60%),
    linear-gradient(160deg, #1b3fa0 0%, #10225a 100%);
  padding: 48px 44px;
  display: grid; align-content: center; gap: 26px;
  overflow: hidden;
  position: relative;
}
.va-side__h {
  color: #fff; font-size: 30px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.18; max-width: 15ch;
}
.va-side__p { color: #c3d0ee; font-size: 14.5px; max-width: 34ch; line-height: 1.6; }
.va-stack { display: grid; gap: 12px; max-width: 300px; }
.va-stack .plate { transform: rotate(-2deg); }
.va-stack .plate:nth-child(2) { transform: rotate(1.4deg) translateX(22px); }
.va-stack .plate:nth-child(3) { transform: rotate(-1deg) translateX(-10px); }

@media (max-width: 900px) {
  .va-wrap { grid-template-columns: 1fr; }
  .va-side { display: none; }
  .va-form { padding: 32px 20px 48px; align-items: start; }
}