.reinstatement-page {
  background:
    radial-gradient(48% 38% at 88% 0%, var(--glow-4), transparent 62%),
    radial-gradient(50% 40% at 6% 4%, var(--glow-5), transparent 64%),
    var(--void);
}

.ri-alert-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--glow-3);
}

.ri-hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: calc(var(--header) + clamp(3.5rem, 7vw, 6.4rem)) 0 clamp(4.5rem, 8vw, 7rem);
  overflow: clip;
}
.ri-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}
.ri-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(450px, .92fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}
/* Sawal bara, jawab chhota. ⚠️ Pehle dono ek hi size (6.7rem) me the aur
   teen lakeeron me tootte the, aur doosri lakeer --gold-text thi — light
   theme me gadla bhoora. Ab jawab indigo (baqi site ki heading jaisa). */
.ri-hero-copy h1 { margin-top: 1.2rem; color: var(--chrome); font-weight: 600; }
.ri-hero-copy h1 span { color: inherit; }
.ri-hero-copy h1 .ri-h1a { font-size: clamp(3.3rem, 7vw, 6.3rem); line-height: .98; letter-spacing: -.055em; }
.ri-hero-copy h1 .ri-h1b { --k: 1; margin-top: .12em; color: var(--blue-hi); font-size: clamp(1.8rem, 3.3vw, 2.9rem); line-height: 1.06; letter-spacing: -.04em; }
.ri-hero-copy > p:not(.eyebrow) {
  max-width: 590px;
  margin-top: 1.55rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.7;
}
.ri-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
/* Teen facts — About ke numbers wali hi sheeshe ki patti. Pehle ek patli
   mono lakeer thi (".60rem"), nazar hi nahi aati thi. dt pehle (screen
   reader: "Case review, £0"), nazar me aadad oopar. */
.ri-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 34rem;
  margin: 2.1rem 0 0;
  border-radius: 18px;
  background: var(--tile-fill);
  box-shadow:
    inset 0 1px 0 var(--g-rim-top),
    inset 0 -1px 0 var(--g-rim-bottom),
    0 0 0 1px var(--g-edge),
    0 12px 26px -18px var(--g-shadow);
}
.ri-facts > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .45rem;
  min-width: 0;
  padding: .95rem 1.1rem .9rem;
}
.ri-facts > div + div { box-shadow: inset 1px 0 0 var(--line); }
.ri-facts > div:nth-child(2) { --f: 1; }
.ri-facts > div:nth-child(3) { --f: 2; }
.ri-facts dt { color: var(--faint); font: 600 .58rem/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ri-facts dd { margin: 0; color: var(--chrome); font: 600 1.4rem/1 var(--display); letter-spacing: -.025em; white-space: nowrap; }

/* Signature: a real intake docket rather than another marketing card. */
.ri-docket {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--panel), var(--panel-quiet)); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  box-shadow: 0 34px 90px rgba(22,18,52,.22);
  overflow: hidden;
}
.ri-docket::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rim), transparent);
}
.ri-docket-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font: 600 .72rem var(--mono);
  letter-spacing: .09em;
}
.ri-docket-bar > b {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  color: var(--green);
  font-weight: 500;
}
.ri-docket-bar > b i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* Tabs ke neeche narangi patti chuni hui tab tak sarakti hai (transform —
   char barabar column, is liye --i × 100%). */
.ri-case-tabs { --i: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.ri-tab-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 2;
  width: 25%;
  height: 2px;
  background: var(--gold);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform .45s var(--ease);
}
.ri-case-tab {
  position: relative;
  min-height: 57px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: transparent;
  color: var(--faint);
  font: 600 .84rem var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.ri-case-tab:last-child { border-right: 0; }
.ri-case-tab:hover { color: var(--text); background: var(--panel-quiet); }
.ri-case-tab.is-active { color: var(--gold-text); background: var(--gold-faint); }
.ri-case-tab:focus-visible { outline-offset: -3px; }
.ri-docket-body { padding: clamp(1.25rem, 3vw, 2rem); }
.ri-case-status { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.ri-case-status span, .ri-send-label, .ri-docket-result span {
  display: block;
  color: var(--faint);
  font: 600 .68rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ri-case-status b { display: block; margin-top: .6rem; color: var(--chrome); font: 600 1.5rem/1.2 var(--display); letter-spacing: -.02em; }
/* Notice ka matlab, seedhe lafzon me — ek lakeer */
.ri-case-status p { margin-top: .45rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.ri-send-label { margin-top: 1.25rem; }
.ri-docket-body ul { display: grid; gap: .52rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.ri-docket-body li { position: relative; padding: .62rem .75rem .62rem 1.85rem; border-radius: 7px; background: var(--panel-quiet); color: var(--text); font-size: .92rem; }
.ri-docket-body li::before { content: ''; position: absolute; left: .68rem; top: .87rem; width: 7px; height: 4px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); }
.ri-docket-result { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ri-docket-result b { color: var(--gold-text); text-align: right; font-size: .95rem; }

.ri-honesty { border-block: 1px solid var(--line); background: var(--gold-faint); }
.ri-honesty .shell { min-height: 68px; display: flex; align-items: center; gap: 1.25rem; }
.ri-honesty strong { color: var(--gold-text); font: 600 .87rem var(--display); white-space: nowrap; }
.ri-honesty span { color: var(--muted); font-size: .8rem; }
.ri-honesty a { display: inline-flex; align-items: center; min-height: 24px; margin-left: auto; color: var(--chrome); font: 600 .75rem var(--display); white-space: nowrap; }
.ri-honesty a:hover { color: var(--gold-text); }

.ri-cases { background: linear-gradient(180deg, var(--deep), var(--void)); }
.ri-case-bands { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.ri-case-bands article { min-width: 0; padding: 1.7rem 1.35rem 1rem 0; border-right: 1px solid var(--line); }
.ri-case-bands article + article { padding-left: 1.35rem; }
.ri-case-bands article:last-child { border-right: 0; }
.ri-case-bands b { display: block; color: var(--gold-text); font: 600 .72rem var(--mono); letter-spacing: .07em; }
.ri-case-bands span { display: block; margin-top: 1.2rem; color: var(--chrome); font: 600 1rem var(--display); }
.ri-case-bands p { margin-top: .5rem; color: var(--muted); font-size: .79rem; line-height: 1.55; }

.ri-process-section {
  border-block: 1px solid var(--line-soft);
  background: var(--deep);
}
.ri-process-head, .ri-proof-head {
  display: grid;
  grid-template-columns: 1fr .72fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 3rem;
}
.ri-process-head h2, .ri-proof-head h2, .ri-faq-title h2 {
  margin-top: .85rem;
  color: var(--chrome);
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  line-height: .98;
  font-weight: 600;
  letter-spacing: -.045em;
}
.ri-process-head > p, .ri-proof-head > p { max-width: 500px; justify-self: end; color: var(--muted); font-size: .91rem; }
.ri-process { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ri-process li { position: relative; min-width: 0; padding: 2rem 1.3rem 0 0; border-right: 1px solid var(--line); }
.ri-process li + li { padding-left: 1.3rem; }
.ri-process li:last-child { border-right: 0; }
.ri-process li::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px var(--deep); }
.ri-process li + li::before { left: 1.3rem; }
.ri-process span { color: var(--faint); font: 500 .59rem var(--mono); }
.ri-process b { display: block; margin-top: .72rem; color: var(--chrome); font: 600 1.08rem var(--display); }
.ri-process p { margin-top: .5rem; color: var(--muted); font-size: .79rem; }

.ri-proof-section { background: var(--void); }
.ri-proof-section[hidden] { display: none; }
.ri-proof-section .proof-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.ri-faq-section { background: linear-gradient(180deg, var(--deep), var(--void)); }
.ri-faq-layout { display: grid; grid-template-columns: .6fr 1.4fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.ri-faq-title { position: sticky; top: calc(var(--header) + 2rem); }
.ri-faq-title h2 { font-size: clamp(2.6rem, 4vw, 3.9rem); }
.ri-faq-section .faq-list details:first-child { border-top: 1px solid var(--line); }

.ri-contact-card { border-top: 1px solid var(--line); }
.ri-contact-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.ri-contact-card span { color: var(--faint); font: 500 .56rem var(--mono); letter-spacing: .09em; }
.ri-contact-card b { color: var(--chrome); text-align: right; font-size: .84rem; }
.ri-footer { padding-block: 1.8rem calc(1.8rem + env(safe-area-inset-bottom)); }
.ri-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ri-footer-inner .brand { margin: 0; }
.ri-footer-inner > div { display: flex; align-items: center; gap: 1.2rem; color: var(--faint); font-size: .7rem; }
.ri-footer-inner > div a { display: flex; align-items: center; min-height: 24px; color: var(--muted); }
.ri-footer-inner > div a:hover { color: var(--chrome); }
.ri-footer-inner > div span { margin: 0; color: var(--faint); font: .58rem var(--mono); }

@media (max-width: 1000px) {
  .ri-hero-grid { grid-template-columns: 1fr 440px; gap: 2.5rem; }
}

@media (max-width: 850px) {
  .ri-hero { min-height: auto; }
  .ri-hero-grid { grid-template-columns: 1fr; }
  .ri-docket { width: min(100%, 620px); }
  .ri-honesty .shell { flex-wrap: wrap; gap: .35rem 1rem; padding-block: 1rem; }
  .ri-honesty a { width: 100%; margin-left: 0; margin-top: .3rem; }
  .ri-case-bands { grid-template-columns: 1fr 1fr; }
  .ri-case-bands article:nth-child(2) { border-right: 0; }
  .ri-case-bands article:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ri-case-bands article:nth-child(3) { padding-left: 0; }
  .ri-faq-layout { grid-template-columns: 1fr; }
  .ri-faq-title { position: static; }

  /* Touch targets: these sat at 16-18px tall, under the 24px WCAG 2.5.8 minimum. */
  .ri-honesty a { min-height: 44px; }
  .ri-footer-inner > div a { min-height: 30px; }
}

@media (max-width: 640px) {
  .ri-hero { padding-top: calc(var(--header) + 3.2rem); }
  .ri-hero-copy h1 .ri-h1a { font-size: clamp(2.9rem, 14vw, 4.4rem); }
  .ri-hero-copy h1 .ri-h1b { font-size: clamp(1.55rem, 7vw, 2.2rem); }
  .ri-actions .btn { flex: 1; padding-inline: 1rem; }
  .ri-facts > div { padding: .85rem .8rem .8rem; }
  .ri-facts dd { font-size: 1.15rem; }
  .ri-docket-bar { font-size: .62rem; }
  .ri-case-tab { min-height: 52px; font-size: .72rem; }
  .ri-docket-result { display: block; }
  .ri-docket-result b { display: block; margin-top: .35rem; text-align: left; }
  .ri-case-bands { grid-template-columns: 1fr; }
  .ri-case-bands article, .ri-case-bands article + article { padding: 1.3rem 0; border-right: 0; border-top: 1px solid var(--line); }
  .ri-case-bands article:first-child { border-top: 0; }
  .ri-process-head, .ri-proof-head { grid-template-columns: 1fr; align-items: start; }
  .ri-process-head > p, .ri-proof-head > p { justify-self: start; }
  .ri-process { grid-template-columns: 1fr 1fr; }
  .ri-process li:nth-child(even) { border-right: 0; }
  .ri-process li:nth-child(n+3) { margin-top: 2.3rem; }
  .ri-process li:nth-child(odd) { padding-left: 0; }
  .ri-process li:nth-child(odd)::before { left: 0; }
  .ri-footer-inner { align-items: flex-start; flex-direction: column; }
  .ri-footer-inner > div { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .ri-actions { flex-direction: column; }
  .ri-actions .btn { width: 100%; }
}


/* ==========================================================================
   Reinstatement page ko wahi maadda

   Us page ka apna signature panel `.ri-docket` hai (ek asli intake docket,
   ek aur marketing card nahi) aur contact card `.ri-contact-card`. Dono ko
   console wali refraction milni chahiye — warna do bhai alag alag sheeshe
   ke bane lagte hain.
   ========================================================================== */
.ri-docket,
.ri-contact-card {
  position: relative;
  border: 0 !important;
  border-radius: 30px;
  background:
    linear-gradient(152deg, var(--g-hi) 0%, transparent 46%),
    var(--g-fill) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(190%) brightness(var(--g-bright));
          backdrop-filter: blur(var(--g-blur)) saturate(190%) brightness(var(--g-bright));
  box-shadow:
    0 34px 74px -30px var(--g-shadow),
    0 2px 6px -1px var(--g-shadow-near),
    inset 0 1.5px 0 var(--g-rim-top),
    inset 0 -1.5px 0 var(--g-rim-bottom),
    inset 18px 0 30px -22px var(--g-rim-side),
    inset -18px 0 30px -22px var(--g-rim-side),
    0 0 0 1px var(--g-edge) !important;
}
/* .ri-docket::before pehle se ek hairline hai — usay refraction ki
   tirchi chamak bana diya, alag element ki zaroorat nahi. */
.ri-docket::before {
  height: auto !important;
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg,
    var(--g-sheen) 0%, transparent 30%, transparent 70%, var(--g-sheen-2) 100%) !important;
}
.ri-docket > * { position: relative; z-index: 2; }
.ri-docket-body li { background: var(--g-fill-2); }


/* ==========================================================================
   HERO v2 — harkat (EK dafa, sirf transform/opacity)

   Heading ki dono lakeerein apne parde se uthti hain (home.css ka .ab-ln /
   ab-line — ye page home.css bhi load karta hai), phir jumla, buttons aur
   teen facts. Case file me "send these first" ki qataarein baayen se aati
   hain aur har ek ka hara tick apni baari par ubharta hai, aakhir me "First
   answer". Tab badalne par wahi harkat foran (.is-swapped — chhoti delay),
   aur narangi patti nayi tab tak sarakti hai. Base CSS = aakhri haalat.
   ========================================================================== */
.ri-alert-dot { position: relative; }
.ri-alert-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
}
.ri-hero-copy.is-visible .ri-alert-dot::after { animation: ab-ping 1.8s cubic-bezier(0, 0, .2, 1) .9s 3; }
.ri-hero-copy.is-visible .ab-ln > span { animation: ab-line 1.1s var(--ease) calc(.1s + var(--k, 0) * .14s) both; }
.ri-hero-copy.is-visible > p:not(.eyebrow) { animation: ab-lift .8s var(--ease) .45s both; }
.ri-hero-copy.is-visible .ri-actions { animation: ab-lift .8s var(--ease) .55s both; }
.ri-hero-copy.is-visible .ri-facts > div { animation: ab-lift .7s var(--ease) calc(.68s + var(--f, 0) * .09s) both; }

#caseNeeds li:nth-child(2) { --n: 1; }
#caseNeeds li:nth-child(3) { --n: 2; }
.ri-docket.is-visible #caseNeeds li { animation: ri-row .5s var(--ease) calc(.5s + var(--n, 0) * .16s) both; }
.ri-docket.is-visible #caseNeeds li::before { animation: ri-tick .45s var(--ease) calc(.62s + var(--n, 0) * .16s) both; }
.ri-docket.is-visible .ri-docket-result { animation: ab-lift .6s var(--ease) 1.1s both; }
/* Tab badalne par: nayi qataarein foran, "First answer" JS (WAAPI) chalata hai */
.ri-docket.is-swapped #caseNeeds li { animation-delay: calc(.04s + var(--n, 0) * .1s); }
.ri-docket.is-swapped #caseNeeds li::before { animation-delay: calc(.12s + var(--n, 0) * .1s); }
.ri-docket.is-swapped .ri-docket-result { animation: none; }
@keyframes ri-row  { from { opacity: 0; transform: translateX(-10px); } }
@keyframes ri-tick { from { opacity: 0; transform: rotate(-45deg) scale(.2); } }

@media (prefers-reduced-motion: reduce) {
  .ri-tab-bar { transition: none; }
}


/* ==========================================================================
   CASE LOOP — reinstatement ka safar, ek gol raaste par

   Home ke REAL SEQUENCE ka bhai (client: "wahi concept, us se bhi behtar").
   Wahan van order le kar chalti hai; yahan ek CASE TAG ("MC011 · …")
   dial jaise gol raaste par chaar stations (Review → Evidence → Appeal →
   Fix) ke gird ghoomta hai. Farq jo is ko aage le jate hain:
     • Account ka TAALA ghoomta hai aur hamesha SEEDHA rehta hai (ulti
       ghumaai — rc-upright). Chhalla amber (review) → indigo (evidence,
       appeal) → hara, aur Fix par taala khul jata hai — kahani ka anjaam.
       (Pehle "MC011 · Under review" wala lamba tag tha; side ke stations par
       wo station ke nishan ke oopar chadh jata tha — hata diya.)
     • Raasta ek ghadi ka dial hai (60 chhote, 12 bare nishan), sadak nahi.
     • Chaar scene, har ek kai hisson me: notice par lens chalta hai aur
       wajah wali lakeerein ubharti hain → teen kaghaz case file me jate hain
       aur list tick hoti hai → appeal khud likhi jati hai, Submit dabta hai,
       chitthi hawai jahaz ban kar urti hai → health ki sui laal se hare par,
       REINSTATED ki mohar.
   Rang ki zaban baqi site wali: tangerine = abhi (chalta qadam, aap ka
   case), indigo = ho chuka, hara = natija.

   ⏱ EK HI GHADI: 18s, 4 station × 4.5s (3.5s rukna + 1s chalna).
      Station i: pohanch i × 25%, rawangi i × 25% + 19.44%.
      • rc-drive / rc-upright / rc-ring-* / rc-shackle / rc-on-* / rc-done-* / rc-trail-*
        → seedhe ghadi ke %.
      • Scene aur us ke purze → apni khirki (25%) ke %, delay
        `--rd = i × 4.5s − 18s` (manfi — home wali wajah: musbat delay ke
        "pehle" hisse me sab scene ek saath nazar aate). 1% = .18s.
      ⚠️ Ek timing badlo to sab badlo.

   Usool: sirf transform aur opacity. Koi glow nahi. Sab animation page
   load par bante hain aur ek saath chalte/rukte hain (reveal ke baad,
   screen par ho, pause na daba ho). Base CSS = reduced motion ki khari
   tasveer: tag Fix par, 01–03 mukammal, "Reinstated".
   Home ke .rs-paper / .rs-ln / .rs-kick / .rs-art / .rs-status aur .rt-*
   yahan dobara istemal hue hain — un ke --rs-* rang .rc par diye gaye hain.
   ========================================================================== */

.rc {
  --rs-ease: cubic-bezier(.4, 0, .2, 1);
  --rs-road: #E4E0F6;
  --rs-edge: rgba(67, 56, 202, .18);
  --rs-node: #FFFFFF;
  --rs-paper: #FFFFFF;
  --rs-ink: #262247;
  --rs-muted: #625D8A;
  --rs-soft: rgba(38, 34, 71, .12);
  --rs-ok: #0B7A46;
  --rc-bad: #C8323A;
  /* ⚠️ Tags ki likhai: --gold-text (#A84800) apni .16 wali goli par, --deep
     band ke oopar sirf 4.37:1 tha (naapa gaya). #9A4200 = 4.98:1. Dark me
     --gold-text khud 6.3:1 deta hai. */
  --rc-tag-ink: #9A4200;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rc {
    --rs-road: rgba(255, 255, 255, .075);
    --rs-edge: rgba(168, 159, 255, .26);
    --rs-node: #1B1840;
    --rs-paper: #26234C;
    --rs-ink: #ECEAFF;
    --rs-muted: #A9A5D6;
    --rs-soft: rgba(255, 255, 255, .15);
    --rs-ok: #3DDC97;
    --rc-bad: #FF7A80;
    --rc-tag-ink: var(--gold-text);
  }
}
:root[data-theme="dark"] .rc {
  --rs-road: rgba(255, 255, 255, .075);
  --rs-edge: rgba(168, 159, 255, .26);
  --rs-node: #1B1840;
  --rs-paper: #26234C;
  --rs-ink: #ECEAFF;
  --rs-muted: #A9A5D6;
  --rs-soft: rgba(255, 255, 255, .15);
  --rs-ok: #3DDC97;
  --rc-bad: #FF7A80;
  --rc-tag-ink: var(--gold-text);
}
.rc-toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Heading: baqi site wala paimana, lakeer-ba-lakeer parde se */
.ri-process-head h2 span { color: inherit; }
.ri-process-head h2 .ab-hl { color: var(--blue-hi); }
.ri-process-head.is-visible .ab-ln > span { animation: ab-line 1.1s var(--ease) calc(.08s + var(--k, 0) * .13s) both; }
@media (min-width: 761px) {
  .ri-process-head h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.04; letter-spacing: -.04em; }
}

/* ── Baayen: dial, stations, tag aur beech ki screen ──────────────────── */
.rc-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; container-type: inline-size; }
.rc-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rc-track { fill: none; stroke: var(--rs-road); stroke-width: 28; }
.rc-edge { fill: none; stroke: var(--rs-edge); stroke-width: 1.2; }
/* r=176 ka gher 1105.84 — 60 chhote nishan (1.2 + 17.23), 12 bare (2.4 + 89.75) */
.rc-ticks { fill: none; stroke: var(--rs-edge); stroke-width: 6; stroke-dasharray: 1.2 17.231; stroke-dashoffset: .6; }
.rc-ticks.is-major { stroke-width: 13; stroke-dasharray: 2.4 89.753; stroke-dashoffset: 1.2; }
.rc-trail { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.rc-link { fill: none; stroke: var(--rs-edge); stroke-width: 2; stroke-linecap: round; }
.rc-n-base { fill: var(--rs-node); stroke: var(--rs-edge); stroke-width: 1.5; }
.rc-n-ic { stroke: var(--blue-hi); }
.rc-n-ping { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; }
.rc-n-done { fill: var(--blue); opacity: 0; }
.rc-n-ic-done { stroke: #fff; opacity: 0; }
.rc-n-on { fill: var(--gold); opacity: 0; }
.rc-n-ic-on { stroke: var(--ink-on-accent); opacity: 0; }

/* Taala: poora dabba markaz ke gird ghoomta hai (taala oopar raaste par,
   r=205 → 95/600 = 15.83%); andar ulta ghoom kar seedha rehta hai.
   Chaurai 8.4% (= 600 me 50): side ke station 534 se shuru hote hain, taala
   505 ± 25 — 4 ka faasla. Is se chaura mat karna. */
.rc-orbit { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: rotate(270deg); }
.rc-tag { position: absolute; left: 50%; top: 15.8333%; width: 8.4%; transform: translate(-50%, -50%); }
.rc-upright { transform: rotate(-270deg); }
.rc-puck { display: block; width: 100%; height: auto; overflow: visible; }
.rc-p-shadow { fill: var(--g-shadow); opacity: .35; }
.rc-p-bg { fill: var(--rs-paper); stroke: var(--rs-soft); stroke-width: 1; }
.rc-p-ring { fill: none; stroke-width: 3.4; opacity: 0; }
.rc-p0 { stroke: #F2A33A; }
.rc-p1 { stroke: var(--blue); }
.rc-p2 { stroke: var(--green-fill); opacity: 1; }
.rc-shackle { fill: none; stroke: var(--rs-ink); stroke-width: 3.2; stroke-linecap: round; transform: translateY(-3px) rotate(-34deg); }
.rc-body { fill: var(--rs-ink); }
.rc-hole { fill: var(--rs-paper); }
.rc-hole-s { fill: none; stroke: var(--rs-paper); stroke-width: 1.8; stroke-linecap: round; }

/* Beech ki gol screen — dial ke andar (r=165 → 55%) */
.rc-hub {
  position: absolute;
  z-index: 1;
  left: 22.5%;
  top: 22.5%;
  width: 55%;
  height: 55%;
  overflow: hidden;
  border-radius: 50%;
  container-type: inline-size;
  background:
    linear-gradient(152deg, var(--g-hi) 0%, transparent 46%),
    var(--g-fill);
  box-shadow:
    0 24px 50px -28px var(--g-shadow),
    inset 0 1.5px 0 var(--g-rim-top),
    inset 0 -1.5px 0 var(--g-rim-bottom),
    inset 16px 0 26px -20px var(--g-rim-side),
    inset -16px 0 26px -20px var(--g-rim-side),
    0 0 0 1px var(--g-edge);
}
.rc-scene {
  --rd: calc(var(--i, 0) * 4.5s - 18s);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqi;
  padding: 0 9cqi;
  text-align: center;
  opacity: 0;
}
.rc-scene.is-snap { opacity: 1; }

/* Scenes ke purze */
.r0-hl { fill: #FF8A3D; fill-opacity: .3; }
.rc-lens { fill: #fff; fill-opacity: .35; stroke: var(--blue-hi); stroke-width: 3.5; }
.rc-lens-h { fill: none; stroke: var(--blue-hi); stroke-width: 5; stroke-linecap: round; }
.rc-empty { fill: none; stroke: var(--rs-soft); stroke-width: 1.6; }
.rc-needle { fill: none; stroke: var(--rs-ink); stroke-width: 3.2; stroke-linecap: round; }
.rc-hubdot { fill: var(--rs-ink); }
.rt-bad { fill: var(--rc-bad); font: 700 9px var(--body); }
.rc-stamp-lg { font-size: 11.5px; letter-spacing: .12em; }

/* Pause — home wala hi button, stage ke oopar daayen kone me */
.rc-pause {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text);
  background: var(--tile-fill);
  box-shadow: inset 0 1px 0 var(--g-rim-top), 0 0 0 1px var(--g-edge);
  cursor: pointer;
  transition: transform .16s var(--ease);
  -webkit-tap-highlight-color: var(--tap);
}
.rc-pause::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.rc-pause:active { transform: scale(.94); }
.rc-toggle:checked ~ .rc-stage .ps-ico-pause { opacity: 0; transform: scale(.6); }
.rc-toggle:checked ~ .rc-stage .ps-ico-play  { opacity: 1; transform: none; }
.rc-toggle:focus-visible ~ .rc-stage .rc-pause { outline: 3px solid var(--blue-hi); outline-offset: 3px; }

/* ── Daayen: chaar qadam, jo us waqt chal raha ho wo jagta hai ────────── */
.rc-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rc-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 10px;
  border-radius: 16px;
}
.rc-steps li > :not(.rc-hl) { position: relative; z-index: 1; }
.rc-hl {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--g-fill);
  box-shadow:
    inset 0 1px 0 var(--g-rim-top),
    inset 0 -1px 0 var(--g-rim-bottom),
    0 0 0 1px var(--g-edge),
    inset 3px 0 0 var(--gold),
    0 12px 26px -18px var(--g-shadow);
  opacity: 0;
}
.rc-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: var(--blue-hi);
  background: var(--tile-fill);
  box-shadow: inset 0 1px 0 var(--g-rim-top), 0 0 0 1px var(--g-edge);
}
.rc-ico svg { width: 22px; height: 22px; stroke: currentColor; }
.rc-ico-on {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: var(--ink-on-accent);
  background: var(--gold);
  opacity: 0;
}
.rc-tick {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--deep);
  opacity: 0;
}
.rc-tick::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 3.6px;
  width: 3.6px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
.rc-num { display: block; color: var(--blue-hi); font: 600 .6rem/1 var(--mono); letter-spacing: .12em; }
.rc-steps b { display: flex; align-items: center; gap: .5rem; margin-top: 4px; color: var(--chrome); font: 600 1.05rem/1.2 var(--display); letter-spacing: -.01em; }
/* Aadad jo safhe par pehle se likhe hain: review free, appeal 2–4 din */
.rc-steps b em {
  padding: .22rem .5rem;
  border-radius: 999px;
  color: var(--rc-tag-ink);
  background: var(--gold-soft);
  font: 700 .56rem/1 var(--mono);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rc-steps p { margin-top: 3px; color: var(--muted); font-size: .84rem; line-height: 1.45; }

/* ── Khari tasveer (reduced motion) — harkat in sab ko hara deti hai ──── */
.rc-s0 .rc-done-l,
.rc-s1 .rc-done-l,
.rc-s2 .rc-done-l,
.rc-s3 .rc-on-l { opacity: 1; }
.rc-t0, .rc-t1, .rc-t2 { opacity: 1; }
.r3-bad { opacity: 0; }

/* ── Harkat — longhand, taake rokne wala qaida jeete ──────────────────── */
.rc .ra {
  animation-duration: 18s;
  animation-timing-function: var(--rs-ease);
  animation-delay: var(--rd, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: paused;
  transform-box: fill-box;
  transform-origin: center;
}
.rc .rc-orbit   { animation-name: rc-drive;   animation-timing-function: cubic-bezier(.45, 0, .25, 1); transform-box: border-box; }
.rc .rc-upright { animation-name: rc-upright; animation-timing-function: cubic-bezier(.45, 0, .25, 1); transform-box: border-box; }
/* Taala: chhalle ke rang, har pohanch par halki si dhadkan, Fix par khulna.
   rc-bump 4.5s (= ek station) — har pohanch par khud dohraati hai. */
.rc .rc-p0 { animation-name: rc-ring-0; animation-timing-function: linear; }
.rc .rc-p1 { animation-name: rc-ring-1; animation-timing-function: linear; }
.rc .rc-p2 { animation-name: rc-ring-2; animation-timing-function: linear; }
.rc .rc-bump { animation-name: rc-bump; animation-duration: 4.5s; animation-timing-function: ease-out; transform-box: border-box; }
.rc .rc-shackle { animation-name: rc-shackle; transform-box: view-box; transform-origin: 36.4px 24px; }
.rc .rc-scene  { animation-name: rc-scene; animation-timing-function: linear; transform-box: border-box; }
.rc .rc-n-ping { animation-name: rc-ping; animation-timing-function: ease-out; animation-delay: calc(var(--i) * 4.5s - 18s); }
.rc .rc-t0 { animation-name: rc-trail-0; animation-timing-function: linear; }
.rc .rc-t1 { animation-name: rc-trail-1; animation-timing-function: linear; }
.rc .rc-t2 { animation-name: rc-trail-2; animation-timing-function: linear; }
.rc .rc-t3 { animation-name: rc-trail-3; animation-timing-function: linear; }
.rc .rc-s0 .rc-on-l { animation-name: rc-on-0; animation-timing-function: linear; }
.rc .rc-s1 .rc-on-l { animation-name: rc-on-1; animation-timing-function: linear; }
.rc .rc-s2 .rc-on-l { animation-name: rc-on-2; animation-timing-function: linear; }
.rc .rc-s3 .rc-on-l { animation-name: rc-on-3; animation-timing-function: linear; }
.rc .rc-s0 .rc-done-l { animation-name: rc-done-0; animation-timing-function: linear; }
.rc .rc-s1 .rc-done-l { animation-name: rc-done-1; animation-timing-function: linear; }
.rc .rc-s2 .rc-done-l { animation-name: rc-done-2; animation-timing-function: linear; }
.rc .rc-s3 .rc-done-l { animation-name: rc-done-3; animation-timing-function: linear; }

/* 01 Review — notice aata hai, lens do lakeeron par chalta hai, wo lakeerein
   narangi ubharti hain, phir "Worth appealing" */
.rc .r0-note    { animation-name: r0-note; }
.rc .r0-hl      { animation-name: r0-hl; transform-origin: 0 50%; animation-delay: calc(var(--rd) + var(--k, 0) * .72s); }
.rc .r0-lens    { animation-name: r0-lens; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
.rc .r0-verdict { animation-name: r0-verdict; }
/* 02 Evidence — teen kaghaz case file me, list ka har khana tick */
.rc .r1-doc   { animation-name: r1-doc; animation-delay: calc(var(--rd) + var(--k, 0) * .54s); }
.rc .r1-tick  { animation-name: r1-tick; animation-delay: calc(var(--rd) + var(--k, 0) * .54s); }
.rc .r1-match { animation-name: r1-match; }
/* 03 Appeal — lakeerein likhi jati hain, Submit, chitthi ud jati hai */
.rc .r2-fly   { animation-name: r2-fly; }
.rc .r2-line  { animation-name: r2-line; transform-origin: 0 50%; animation-delay: calc(var(--rd) + var(--k, 0) * .23s); }
.rc .r2-btn   { animation-name: r2-btn; }
.rc .r2-plane { animation-name: r2-plane; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
.rc .r2-dot   { animation-name: r2-dot; animation-delay: calc(var(--rd) + var(--k, 0) * .2s); }
.rc .r2-done  { animation-name: r2-done; }
/* 04 Fix — sui laal se hare par, At risk → Good, mohar, do chips */
.rc .r3-needle { animation-name: r3-needle; transform-box: view-box; transform-origin: 64px 98px; }
.rc .r3-bad    { animation-name: r3-bad; }
.rc .r3-good   { animation-name: r3-good; }
.rc .r3-stamp  { animation-name: r3-stamp; }
.rc .r3-chip   { animation-name: r3-chip; animation-delay: calc(var(--rd) + var(--k, 0) * .36s); }
.r3-needle { transform: rotate(58deg); }

/* Chalna / rukna: reveal ke baad, screen par ho, aur pause na daba ho.
   (0,4,0) dono — rokne wala baad me, is liye wo jeet-ta hai. */
.rc.is-visible:not(.is-off) .ra { animation-play-state: running; }
.rc .rc-toggle:checked ~ * .ra { animation-play-state: paused; }

/* ── Ghadi: 18s ke seedhe % ─────────────────────────────────────────── */
@keyframes rc-drive {
  0%, 19.44%  { transform: rotate(0deg); }
  25%, 44.44% { transform: rotate(90deg); }
  50%, 69.44% { transform: rotate(180deg); }
  75%, 94.44% { transform: rotate(270deg); }
  100%        { transform: rotate(360deg); }
}
@keyframes rc-upright {
  0%, 19.44%  { transform: rotate(0deg); }
  25%, 44.44% { transform: rotate(-90deg); }
  50%, 69.44% { transform: rotate(-180deg); }
  75%, 94.44% { transform: rotate(-270deg); }
  100%        { transform: rotate(-360deg); }
}
/* taale ka chhalla: amber (review) → indigo (evidence + appeal) → hara
   (Fix par pohanch ke ek second baad, jab taala khulta hai) */
@keyframes rc-ring-0 { 0%, 24.4% { opacity: 1; } 25.4%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rc-ring-1 { 0%, 24.4% { opacity: 0; } 25.4%, 79.6% { opacity: 1; } 80.6%, 100% { opacity: 0; } }
@keyframes rc-ring-2 { 0%, 79.6% { opacity: 0; } 80.6%, 99% { opacity: 1; } 100% { opacity: 0; } }
/* kunda: band → Fix par (≈ 80%) oopar uth kar ghoom jata hai → chakkar ke aakhir band */
@keyframes rc-shackle {
  0%, 79.4% { transform: none; }
  80.6%     { transform: translateY(-4px) rotate(-38deg); }
  81.4%, 99% { transform: translateY(-3px) rotate(-34deg); }
  100%      { transform: none; }
}
/* har pohanch par halki dhadkan (4.5s ki apni ghadi, shuru = pohanch) */
@keyframes rc-bump { 0% { transform: scale(1.12); } 7% { transform: none; } 100% { transform: none; } }
/* jis station par tag khara hai */
@keyframes rc-on-0 { 0%, 19.44% { opacity: 1; } 20.44%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rc-on-1 { 0%, 24% { opacity: 0; } 25%, 44.44% { opacity: 1; } 45.44%, 100% { opacity: 0; } }
@keyframes rc-on-2 { 0%, 49% { opacity: 0; } 50%, 69.44% { opacity: 1; } 70.44%, 100% { opacity: 0; } }
@keyframes rc-on-3 { 0%, 74% { opacity: 0; } 75%, 94.44% { opacity: 1; } 95.44%, 100% { opacity: 0; } }
/* jahan se tag guzar chuka — chakkar ke aakhir tak, phir reset */
@keyframes rc-done-0 { 0%, 19.44% { opacity: 0; } 20.44%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-done-1 { 0%, 44.44% { opacity: 0; } 45.44%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-done-2 { 0%, 69.44% { opacity: 0; } 70.44%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-done-3 { 0%, 94.44% { opacity: 0; } 95.44%, 99% { opacity: 1; } 100% { opacity: 0; } }
/* raaste ka tukra tag ke chalte waqt jalta hai */
@keyframes rc-trail-0 { 0%, 19.44% { opacity: 0; } 25%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-trail-1 { 0%, 44.44% { opacity: 0; } 50%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-trail-2 { 0%, 69.44% { opacity: 0; } 75%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-trail-3 { 0%, 94.44% { opacity: 0; } 99% { opacity: 1; } 100% { opacity: 0; } }

/* ── Khirki ke % (khirki = 25%, 1% = .18s) ───────────────────────────── */
@keyframes rc-ping {
  0%   { opacity: .85; transform: none; }
  3%   { opacity: 0; transform: scale(1.75); }
  100% { opacity: 0; transform: scale(1.75); }
}
@keyframes rc-scene {
  0%    { opacity: 0; transform: scale(.96); }
  1.2%  { opacity: 1; transform: none; }
  23.8% { opacity: 1; transform: none; }
  25.2% { opacity: 0; transform: scale(1.02); }
  100%  { opacity: 0; transform: scale(.96); }
}
/* 01 */
@keyframes r0-note    { 0%, .8% { opacity: 0; transform: translateY(10px); } 2.2%, 24.8% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes r0-hl      { 0%, 4.6% { transform: scaleX(0); } 7%, 24.8% { transform: none; } 25%, 100% { transform: scaleX(0); } }
@keyframes r0-lens {
  0%, 2.4%   { opacity: 0; transform: translate(-96px, -30px); }
  3.4%, 4.4% { opacity: 1; transform: translate(-96px, -30px); }
  7%         { opacity: 1; transform: translate(-12px, -30px); }
  8.6%       { opacity: 1; transform: translate(-96px, -10px); }
  11.2%      { opacity: 1; transform: translate(-18px, -10px); }
  12.6%      { opacity: 0; transform: translate(-6px, -4px); }
  100%       { opacity: 0; transform: translate(-6px, -4px); }
}
@keyframes r0-verdict { 0%, 13.6% { opacity: 0; transform: scale(.6); } 14.8% { opacity: 1; transform: scale(1.06); } 15.4%, 24.8% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: scale(.6); } }
/* 02 */
@keyframes r1-doc   { 0%, 2.6% { opacity: 0; transform: translate(-112px, 6px) rotate(-14deg); } 3.2% { opacity: 1; } 5.6%, 24.8% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translate(-112px, 6px) rotate(-14deg); } }
@keyframes r1-tick  { 0%, 5.4% { opacity: 0; transform: scale(.3); } 6.4% { opacity: 1; transform: scale(1.14); } 7%, 24.8% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes r1-match { 0%, 13.4% { opacity: 0; transform: translateY(6px); } 14.6%, 24.8% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(6px); } }
/* 03 */
@keyframes r2-fly   { 0%, .6% { opacity: 0; transform: translateY(10px); } 2% { opacity: 1; transform: none; } 12.8% { opacity: 1; transform: none; } 14.8%, 100% { opacity: 0; transform: translate(62px, -34px) scale(.28) rotate(-10deg); } }
@keyframes r2-line  { 0%, 2.4% { transform: scaleX(0); } 3.6%, 24.8% { transform: none; } 25%, 100% { transform: scaleX(0); } }
@keyframes r2-btn   { 0%, 9.6% { opacity: 0; transform: translateY(6px); } 10.6%, 11.6% { opacity: 1; transform: none; } 12.1% { opacity: 1; transform: scale(.9); } 12.7% { opacity: 1; transform: none; } 13.8%, 100% { opacity: 0; transform: none; } }
@keyframes r2-plane { 0%, 13.6% { opacity: 0; transform: translate(-52px, 30px) scale(.5); } 14.6% { opacity: 1; transform: translate(-30px, 18px); } 18.4% { opacity: 1; transform: translate(26px, -16px); } 19.8%, 100% { opacity: 0; transform: translate(44px, -26px); } }
@keyframes r2-dot   { 0%, 15.2% { opacity: 0; } 16% { opacity: .9; } 21%, 100% { opacity: 0; } }
@keyframes r2-done  { 0%, 15.6% { opacity: 0; transform: scale(.7); } 16.8% { opacity: 1; transform: scale(1.04); } 17.4%, 24.8% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: scale(.7); } }
/* 04 */
@keyframes r3-needle { 0%, 2.2% { transform: rotate(-72deg); } 8% { transform: rotate(66deg); } 9.4%, 24.8% { transform: rotate(58deg); } 25%, 100% { transform: rotate(-72deg); } }
@keyframes r3-bad    { 0%, 7% { opacity: 1; } 7.8%, 24.8% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes r3-good   { 0%, 7.4% { opacity: 0; } 8.4%, 24.8% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes r3-stamp  { 0%, 10% { opacity: 0; transform: scale(1.8); } 10.9% { opacity: 1; transform: scale(.94); } 11.5%, 24.8% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes r3-chip   { 0%, 13% { opacity: 0; transform: translateY(6px); } 14.2%, 24.8% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(6px); } }

/* ── Chhoti screen: pehle dial, phir qadam ──────────────────────────── */
@media (max-width: 999px) {
  .rc { grid-template-columns: minmax(0, 1fr); }
  .rc-stage { width: min(100%, 540px); margin-inline: auto; }
  .rc-steps { grid-template-columns: 1fr 1fr; column-gap: 10px; }
}
@media (max-width: 640px) {
  .rc-steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  /* (0,4,0) — har animation-name wale qaide se bhari. Khari tasveer upar
     ki base CSS hai: tag Fix par, "Reinstated", Fix ka scene. */
  .rc.rc .ra.ra { animation: none; }
  .rc-pause { display: none; }
}