/* ==========================================================================
   e-Pouroshava visual theme (indigo civic theme, styling-only pass)
   --------------------------------------------------------------------------
   One additive stylesheet loaded AFTER every other CSS file. It only adds
   rules: removing its <link> tag restores the previous look with zero
   functional change. No markup, routes, form names, ids or copy depend on it.

   Conventions: design tokens in :root only; components use tokens, never raw
   values. Comments are English-only by repository rule (BengaliCopyTest).
   ========================================================================== */

/* ── 1 · Design tokens ─────────────────────────────────────────────────── */

:root {
  --brand: #4F46E5;
  --brand-700: #4338CA;
  --brand-50: #EEF2FF;
  --accent: #F2A33A;
  --ink: #1E293B;
  --muted: #94A3B8;
  --line: #E5E7EB;
  --canvas: #F8FAFC;
  --surface: #FFFFFF;
  --brand-ink: #1E1B4B;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --section-y: 72px;

  --shadow-sm: 0 1px 2px rgba(30, 27, 75, .06);
  --shadow-md: 0 8px 20px -8px rgba(30, 27, 75, .16);
  --shadow-lg: 0 20px 44px -16px rgba(30, 27, 75, .26);
  --ring: 0 0 0 3px rgba(79, 70, 229, .35);

  /* ── Type: two roles ─────────────────────────────────────────────────────
     · Display  (headings, titles, every bold run) = Hind Siliguri.
     · Reading  (body copy at weight 400)          = Kalpurush (self-hosted).
     · Latin figures/tech labels stay on Inter in the app and inherit here.
     Kalpurush ships a single 400 weight, so anything at >=500 must use the
     display family — that is what the "bold runs" block at the end of this
     file pins down. Keep the two tokens in sync with Kalpurush. */
  --font-display: 'Hind Siliguri', 'HindSiliguriLocal', sans-serif;
  --font: 'Kalpurush', 'Hind Siliguri', 'HindSiliguriLocal', sans-serif;

  /* Re-point the shared portal tokens at the new brand. Admin pages never
     load this file, so the legacy panel keeps its own palette. */
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-light: #EEF2FF;
  --primary-50: #EEF2FF;
  --primary-faint: #EEF2FF;
  --c-primary: #4F46E5;
  --c-primary-hover: #4338CA;
  --c-primary-surface: #EEF2FF;
  --c-primary-faint: #EEF2FF;
  --c-grad: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --c-text: #1E293B;
  --c-text-secondary: #475569;
  --c-text-muted: #94A3B8;
  --border: #E5E7EB;
  --border-light: #F1F5F9;
  --c-border: #E5E7EB;
  --c-divider: #F1F5F9;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --c-radius: 14px;
  --c-radius-lg: 20px;
  --c-radius-sm: 10px;
  --c-radius-pill: 999px;
  --c-shadow-sm: 0 1px 2px rgba(30, 27, 75, .06);
  --c-shadow-lg: 0 20px 44px -16px rgba(30, 27, 75, .26);
  --shadow-xs: 0 1px 2px rgba(30, 27, 75, .06);
}

@media (max-width: 639px) {
  :root { --section-y: 48px; }
}

/* ── 2 · Base: type, links, focus ──────────────────────────────────────── */

body {
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

h3 { font-size: 1.125rem; }

a { text-underline-offset: 3px; }

p, li { overflow-wrap: anywhere; }

:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

/* ── 3 · Buttons: three levels, one shape ───────────────────────────────── */

.c-btn,
.c-lp-btn,
.c-topnav-btn,
.btn-submit,
.c-lp-search-btn,
.c-lp-btn-track {
  transition: background-color 160ms ease-out, border-color 160ms ease-out,
    color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
}

.c-btn:active,
.c-lp-btn:active,
.c-topnav-btn:active,
.btn-submit:active {
  transform: scale(.98);
}

/* Primary: solid brand. */
.c-btn,
.c-lp-btn-solid,
.c-topnav-btn-solid,
.btn-submit,
.c-lp-search-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.c-btn:hover,
.c-lp-btn-solid:hover,
.c-topnav-btn-solid:hover,
.btn-submit:hover,
.c-lp-search-btn:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* Citizen button variants (outline / ghost / white / service / danger /
   disabled). This file loads last, so plain `.c-btn-outline` from citizen.css
   loses every tie against the `.c-btn` recipe above — that turned every quiet
   button into a solid brand block. Compound selectors win on specificity
   instead of on order, so the variants keep working wherever they sit. */
.c-btn.c-btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}

.c-btn.c-btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--text-secondary);
  transform: none;
  box-shadow: none;
}

.c-btn.c-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.c-btn.c-btn-ghost:hover {
  background: var(--gray-100);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

.c-btn.c-btn-white {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}

.c-btn.c-btn-white:hover {
  background: var(--primary-50);
  color: var(--primary-hover);
  border-color: #fff;
}

.c-btn.c-btn-service {
  background: var(--c-service);
  border-color: var(--c-service);
  color: #fff;
}

.c-btn.c-btn-service:hover {
  background: #0A5A6E;
  border-color: #0A5A6E;
  color: #fff;
}

.c-btn.c-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.c-btn.c-btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.c-btn.c-btn-disabled,
.c-btn.c-btn-disabled:hover {
  background: var(--gray-100);
  border-color: var(--border);
  color: var(--text-muted);
  transform: none;
  box-shadow: none;
}

.c-btn.c-btn-hero-ghost {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

.c-btn.c-btn-hero-ghost:hover {
  background: rgba(255, 255, 255, .20);
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}

/* ── Status filter rows ("আমার অভিযোগ" / "আমার আবেদন") ─────────────────────
   Exactly one chip — the filter you are on — is filled solid; every other
   chip is a quiet pill, so "where am I" is readable at a glance. The row
   stays on one line and scrolls sideways on a phone instead of wrapping
   into three rows of identical buttons. */
.c-filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.c-filter-row::-webkit-scrollbar {
  height: 4px;
}

.c-filter-row::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.c-filter-row .c-btn {
  flex: 0 0 auto;
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
}

.c-filter-row .c-btn:hover {
  background: var(--primary-50);
  border-color: var(--brand);
  color: var(--brand-700);
  transform: none;
  box-shadow: none;
}

.c-filter-row .c-btn.is-active,
.c-filter-row .c-btn.is-active:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(79, 70, 229, .45);
}

.c-filter-row .c-btn.is-active.is-service,
.c-filter-row .c-btn.is-active.is-service:hover {
  background: var(--c-service);
  border-color: var(--c-service);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(14, 116, 144, .45);
}

/* Secondary: white fill, brand border. */
.c-lp-btn-outline-dark,
.c-topnav-btn-ghost {
  background: #fff;
  border: 1.5px solid var(--brand);
  color: var(--brand);
}

.c-lp-btn-outline-dark:hover,
.c-topnav-btn-ghost:hover {
  background: var(--brand-50);
  border-color: var(--brand);
  color: var(--brand-700);
  text-decoration: none;
}

/* Tertiary text links: brand with underline on hover. */
.c-section-link,
.c-lp-hero-note a {
  color: var(--brand);
  text-underline-offset: 4px;
}

.c-section-link:hover,
.c-lp-hero-note a:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

/* Arrow glyphs slide on hover. */
.c-lp-svc-arrow,
.c-lp-dept-arrow,
.c-svc-arrow,
.c-section-link {
  display: inline-block;
}

a:hover > .c-lp-svc-arrow,
a:hover > .c-lp-dept-arrow,
a:hover > .c-svc-arrow {
  transform: translateX(4px);
}

.c-lp-svc-arrow,
.c-lp-dept-arrow,
.c-svc-arrow {
  transition: transform 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
}

/* ── 4 · Inputs ────────────────────────────────────────────────────────── */

.c-lp-search-input,
.c-lp-track-form .c-input,
.c-track-form .c-input,
.c-modal .c-input,
.input-wrap input {
  min-height: 48px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #fff;
  font-size: 1rem;
}

.c-lp-search-input::placeholder,
.c-lp-track-form .c-input::placeholder,
.input-wrap input::placeholder {
  color: var(--muted);
}

.c-lp-search:focus-within,
.c-lp-track-form .c-input:focus,
.c-track-form .c-input:focus,
.c-modal .c-input:focus,
.input-wrap input:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}

/* Joined search control: input and button read as one unit on desktop. */
@media (min-width: 640px) {
  .c-lp-track-form,
  .c-track-form {
    flex-wrap: nowrap;
  }

  .c-lp-track-form .c-input,
  .c-track-form .c-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }

  .c-lp-track-form .c-lp-btn-track,
  .c-track-form button[type="submit"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
  }
}

/* ── 5 · Cards, chips, badges ──────────────────────────────────────────── */

.c-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.c-badge {
  border-radius: var(--r-pill);
  font-size: .8125rem;
  padding: 2px 12px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

.c-empty-icon svg {
  width: 28px;
  height: 28px;
}

/* ── 6 · Header ────────────────────────────────────────────────────────── */

.c-topnav {
  min-height: 72px;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 639px) {
  .c-topnav { min-height: 64px; }
}

.c-topnav-brand-text strong {
  color: var(--brand);
  font-weight: 600;
}

.c-topnav-links a {
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.c-topnav-links a:hover {
  background: var(--brand-50);
  color: var(--brand);
}

.c-topnav-links a.is-active {
  background: var(--brand-50);
  color: var(--brand);
}

.c-topnav-actions .c-topnav-btn {
  min-height: 40px;
}

.c-skip:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 3000;
  background: var(--brand);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
}

/* ── 7 · Hero ──────────────────────────────────────────────────────────── */

.c-lp-hero {
  background:
    radial-gradient(55% 75% at 85% 8%, rgba(79, 70, 229, .12), transparent 70%),
    linear-gradient(180deg, var(--canvas) 0%, #FFFFFF 100%);
}

@media (min-width: 1024px) {
  .c-lp-hero-grid { grid-template-columns: 55fr 45fr; }
}

/* Top pill with green dot. */
.c-lp-eyebrow {
  background: var(--brand-50);
  border-color: var(--brand-50);
  color: var(--brand-700);
}

.c-lp-eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 8px;
  vertical-align: 1px;
}

.c-lp-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.3;
}

.c-lp-accent {
  color: var(--brand);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 30 3, 60 3, 118 8' fill='none' stroke='%23F2A33A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") bottom left / 100% .32em no-repeat;
  padding-bottom: .12em;
}

/* Search panel: one white card, the main action. */
.c-lp-search {
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}

.c-lp-hero .c-lp-search { max-width: 100%; }

.c-lp-search-btn {
  min-height: 48px;
}

@media (max-width: 639px) {
  .c-lp-cta-row .c-lp-btn {
    flex: 1 1 100%;
    min-height: 48px;
  }

  .c-lp-cta-row { gap: 12px; }
}

.c-lp-hero-note { color: var(--muted); font-size: .9375rem; }

/* Recolour the existing hero illustration to the brand palette. CSS wins
   over SVG presentation attributes, so the markup stays untouched.
   (Indigo is the artwork's native palette, so no overrides are needed.) */

/* Floating card over the artwork. */
.c-lp-float {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.c-lp-float-chips li {
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--r-pill);
}

/* Green checks before each floating point, no markup change. */
.c-lp-float-chips li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Gentle curve from the hero into the next section. */
.c-lp-hero::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -46px;
  height: 80px;
  background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

.c-lp-hero > * { position: relative; z-index: 1; }

/* ── 8 · Quick services ────────────────────────────────────────────────── */

.c-lp-head { margin-bottom: 24px; }

.c-lp-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.3;
}

.c-lp-head p {
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 60ch;
}

.c-lp-head-row { align-items: baseline; }

@media (max-width: 639px) {
  .c-lp-head-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

.c-lp-svc-grid { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
  .c-lp-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .c-lp-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.c-lp-svc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.c-lp-svc:hover {
  border-color: rgba(79, 70, 229, .4);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.c-lp-svc-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.c-lp-svc:hover .c-lp-svc-icon {
  background: var(--brand);
  color: #fff;
}

.c-lp-svc-meta { color: var(--muted); }

.c-lp-svc-clock {
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--r-pill);
  padding: 2px 12px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
}

.c-lp-svc-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}

.c-lp-svc:hover .c-lp-svc-arrow {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ── 9 · Track section ─────────────────────────────────────────────────── */

.c-lp-section-tint { background: var(--brand-50); }

.c-lp-track-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.c-lp-track-card-sample { border-style: dashed; }

.c-lp-track-card-sample .c-badge-muted {
  background: var(--accent);
  color: #fff;
}

.c-hint { color: var(--muted); }

/* Timeline: done solid brand, current ringed pulse, upcoming quiet. */
.c-tl-item::before,
.c-tl-item::after { background: var(--line); }

.c-tl-item.is-done::before,
.c-tl-item.is-done::after { background: var(--brand); }

.c-tl-item.is-active::before { background: var(--brand); }

.c-tl-item.is-active::after { background: var(--line); }

.c-tl-dot { background: #CBD5E1; box-shadow: 0 0 0 1.5px #CBD5E1; }

.c-tl-item.is-done .c-tl-dot {
  background: var(--brand);
  box-shadow: 0 0 0 1.5px var(--brand);
  color: #fff;
}

.c-tl-item.is-active .c-tl-dot {
  background: #fff;
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 1.5px var(--brand);
  position: absolute;
}

.c-tl-item.is-active .c-tl-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
  animation: tl-pulse 2s ease-out infinite;
}

@keyframes tl-pulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.c-tl-item.is-done .c-tl-label { color: var(--brand); }

.c-tl-item.is-active .c-tl-label { color: var(--brand-700); }

/* ── 10 · Department cards: four soft tints ─────────────────────────────── */

.c-lp-dept {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out,
    transform 200ms ease-out, background-color 200ms ease-out;
}

.c-lp-dept:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.c-lp-dept-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c-lp-dept:nth-child(4n+1) { background: #fff; }
.c-lp-dept:nth-child(4n+1) .c-lp-dept-icon { background: #EEF2FF; color: #4F46E5; }
.c-lp-dept:nth-child(4n+1):hover { background: #EEF2FF; }

.c-lp-dept:nth-child(4n+2) .c-lp-dept-icon { background: #FDF1DD; color: #B26A12; }
.c-lp-dept:nth-child(4n+2):hover { background: #FDF1DD; }

.c-lp-dept:nth-child(4n+3) .c-lp-dept-icon { background: #E6F0FA; color: #1D5FA8; }
.c-lp-dept:nth-child(4n+3):hover { background: #E6F0FA; }

.c-lp-dept:nth-child(4n+4) .c-lp-dept-icon { background: #FBE9EC; color: #B23A4E; }
.c-lp-dept:nth-child(4n+4):hover { background: #FBE9EC; }

.c-lp-dept-count {
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--r-pill);
  padding: 2px 12px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  font-size: .8125rem;
}

/* ── 11 · Benefit strip ────────────────────────────────────────────────── */

.c-lp-mint { background: var(--canvas); }

@media (min-width: 1024px) {
  .c-lp-mint-list li + li {
    border-left: 1px solid var(--line);
    padding-left: 24px;
  }
}

@media (max-width: 1023px) {
  .c-lp-mint-list li + li {
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }
}

.c-lp-mint-icon { color: var(--brand); }

/* ── 12 · How it works ─────────────────────────────────────────────────── */

.c-lp-steps4 { counter-reset: theme-step; }

.c-lp-step4 {
  counter-increment: theme-step;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* Faint oversized numeral behind each step, no markup needed. */
.c-lp-step4::before {
  content: counter(theme-step, bengali);
  position: absolute;
  right: 6px;
  top: -26px;
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--brand-50);
  pointer-events: none;
}

.c-lp-step4-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  position: relative;
}

.c-lp-step4.is-indigo .c-lp-step4-num,
.c-lp-step4.is-green .c-lp-step4-num,
.c-lp-step4.is-orange .c-lp-step4-num {
  background: var(--brand);
}

/* Dashed connector through the number circles on desktop. */
@media (min-width: 1000px) {
  .c-lp-steps4 { position: relative; }

  .c-lp-steps4::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 12%;
    right: 12%;
    border-top: 2px dashed var(--line);
    pointer-events: none;
  }
}

.c-lp-step4 h3 { max-width: none; }

.c-lp-step4 p {
  color: var(--muted);
  max-width: 28ch;
}

/* ── 13 · Footer ───────────────────────────────────────────────────────── */

.c-ft { background: var(--brand-ink); }

.c-ft h4 {
  color: var(--accent);
  font-weight: 600;
}

.c-ft-brand strong { color: #fff; }

.c-ft-about { color: #C9D6D0; }

.c-ft-links a {
  color: #C9D6D0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.c-ft-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.c-ft-contact li { color: #C9D6D0; }

.c-ft-contact svg { color: var(--accent); }

.c-ft-contact a { color: #C9D6D0; }

.c-ft-contact a:hover { color: #fff; }

.c-ft-apk {
  border: 1.5px solid #fff;
  color: #fff;
  min-height: 44px;
}

.c-ft-apk:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-ink);
}

.c-ft-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #C9D6D0;
  font-size: .875rem;
}

/* ── 14 · Login modal ──────────────────────────────────────────────────── */

.c-modal-backdrop { background: rgba(14, 26, 21, .55); }

.c-modal-card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  animation: theme-modal-in 200ms ease-out;
}

.c-modal-backdrop { animation: theme-fade-in 200ms ease-out; }

@keyframes theme-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes theme-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.c-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c-modal-close:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

/* Amber notice for the Google fallback, same box on both auth pages. */
#googleFallback:not([style*="none"]),
#googleFallbackModal:not([style*="none"]) {
  background: #FDF1DD;
  border: 1px solid #F0D9AE;
  border-radius: var(--r-sm);
  padding: 10px 14px;
}

/* ── 15 · Motion: feedback first, reveal second ─────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .c-lp-hero-copy > *,
  .c-lp-hero-visual {
    animation: theme-rise 500ms ease-out backwards;
  }

  .c-lp-hero-copy > *:nth-child(2) { animation-delay: 80ms; }
  .c-lp-hero-copy > *:nth-child(3) { animation-delay: 160ms; }
  .c-lp-hero-copy > *:nth-child(4) { animation-delay: 240ms; }
  .c-lp-hero-copy > *:nth-child(5) { animation-delay: 320ms; }
  .c-lp-hero-visual { animation-delay: 160ms; }

  @keyframes theme-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  /* Scroll reveal where the engine supports it; everywhere else the
     content simply renders (no hidden starting state without support). */
  @supports (animation-timeline: view()) {
    .c-lp-section,
    .c-lp-mint,
    .c-ft {
      animation: theme-rise 450ms ease-out backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 25%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── 16 · Responsive and touch comfort ──────────────────────────────────── */

.c-lp-svc-name,
.c-lp-dept-name,
.c-lp-track-card-title {
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .c-lp-wrap { padding-left: 16px; padding-right: 16px; }

  .c-lp-search { flex-wrap: wrap; }

  .c-lp-search .c-lp-search-btn { flex: 1 1 100%; min-height: 48px; }

  .c-topnav-links a,
  .c-topnav-burger,
  .c-modal-close {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Service icon set: fixed 24px line icons in every host. */
.c-svc-ic-svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Mobile auth buttons: the base layer hides the ghost (login) button under
   560px, leaving phones with register-only. Keep both, compact. */
@media (max-width: 560px) {
  .c-topnav-brand-text { display: none; }
  .c-topnav-actions { gap: 6px; }
  .c-topnav-btn-ghost { display: inline-flex; }
  .c-topnav-btn { min-height: 40px; padding: 0 10px; font-size: 13px; }
}

/* ── Dashboard lists: equal-height cards, bottom-aligned actions ─────────
   The two cards must end on one line even when one side is empty. */
.c-dash-lists { align-items: stretch; }
.c-dash-lists > .c-card { height: 100%; display: flex; flex-direction: column; }
.c-dash-lists > .c-card > .c-mt:last-child { margin-top: auto; padding-top: 14px; }
.c-dash-lists .c-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ── Bold runs: force the display family ─────────────────────────────────
   Kalpurush (the reading font, --font) only has a 400 cut. Every run the
   design sets at 500+ therefore switches to Hind Siliguri, which has real
   bold — no synthetic (faux) bold anywhere. This block is deliberately last
   in the last-loaded stylesheet so it wins ties on specificity.

   Rule: any new rule that sets font-weight >= 500 must add its selector
   here. CitizenWebTest guards a sample of these. */
.btn, .c-btn,
.c-google-btn,
.c-lp-btn,
.c-lp-search-btn,
.c-badge, .badge,
.c-svc-chip,
.c-card-title,
.c-list-title,
.c-empty-title,
.c-page-title,
.c-section-title,
.c-section-link,
.c-svc-name, .c-svc-arrow,
.c-lp-svc-name, .c-lp-svc-clock, .c-lp-svc-arrow,
.c-lp-dept-name, .c-lp-dept-arrow,
.c-lp-brand-name,
.c-lp-link,
.c-lp-eyebrow,
.c-lp-feature-more,
.c-lp-track-title,
.c-lp-track-card-title,
.c-lp-track-steps li.is-now,
.c-lp-step-num, .c-lp-step4-num,
.c-step-num,
.c-lp-float-chips li,
.c-lp-hero-note a,
.c-quick-tile-name,
.c-stat-value,
.c-icon-box,
.c-hero-badge,
.c-tl-dot, .c-tl-label,
.c-crumb a,
.c-modal-foot a,
.c-pagination a, .c-pagination span, .c-pagination .is-current,
.c-table th,
.card-header h5, .card-header h6,
.c-ft h4, .c-ft-apk,
.form-label, .c-label,
.c-svc-facts li, .c-svc-fee-label, .c-svc-help a, .c-help-contact-item a,
.c-faq-item summary, .c-faq-item summary::after,
.c-skip:focus,
.c-bold,
strong, b {
  font-family: var(--font-display);
}

/* Top navigation is its own layer (it also overrides admin.css links). */
.c-topnav-brand-text strong,
.c-topnav-links a,
.c-topnav-links a.is-active,
.c-topnav-btn,
.c-topnav-dot,
.c-topnav-avatar,
.c-topnav-menu a {
  font-family: var(--font-display);
}

/* Landing-page ornaments that render bold text outside the classes above. */
.c-hero-points li::before,
.c-lp-step4:not(:last-child)::after {
  font-family: var(--font-display);
}

/* The AI assistant widget ships its own font stack; keep its chrome on the
   display family and let message bodies fall through to --font. */
.ai-chat-badge,
.ai-chat-title,
.ai-chat-action {
  font-family: var(--font-display);
}