/* ============================================================
   SARTH LEGAL APP — WEBSITE STYLESHEET
   Brand: Sarth — Find It. Know It. Act On It.
   Developed by: Sun Integrated Technologies Pvt. Ltd.
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a2e;
  background: #ffffff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul { list-style: none; }

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  --navy:        #1B3A6B;
  --navy-dark:   #0d2147;
  --navy-light:  #2E5FA3;
  --teal:        #0F7862;
  --teal-light:  #e6f5f1;
  --gold:        #B7950B;
  --gold-light:  #fef9e7;
  --gray-50:     #f8f9fa;
  --gray-100:    #f1f3f4;
  --gray-200:    #e8eaed;
  --gray-400:    #9aa0a6;
  --gray-600:    #5f6368;
  --gray-800:    #3c4043;
  --white:       #ffffff;
  --red:         #c0392b;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   24px;

  --nav-height:  64px;
  --max-width:   1140px;
  --section-pad: 80px 20px;
}

/* ── Typography ───────────────────────────────────────────── */
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 600; }
p { line-height: 1.7; }

/* ── Layout Utilities ─────────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--section-pad); }
.section--gray { background: var(--gray-50); }
.section--navy { background: var(--navy-dark); }
.section--teal { background: var(--teal); }
.text-center { text-align: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

/* ── Section Headers ──────────────────────────────────────── */
.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy-light);
  margin-bottom: 12px;
}
.section-eyebrow--white { color: rgba(255,255,255,0.6); }
.section-title { color: var(--navy-dark); margin-bottom: 12px; }
.section-title--white { color: #ffffff; }
.section-sub {
  font-size: 1.05rem;
  color: var(--gray-600);
  max-width: 560px;
  margin-bottom: 48px;
  /* Centered by default — a max-width paragraph inside a centered heading
     block (.text-center) needs its own box centered via margin, not just
     its text; relying on every page remembering to add the --center
     modifier below is exactly how pages like nclt.html ended up with
     left-aligned copy under a centered heading. --center is kept as a
     harmless no-op for any existing markup that still uses it. */
  margin-left: auto;
  margin-right: auto;
}
.section-sub--white { color: rgba(255,255,255,0.7); }
.section-sub--center { margin-left: auto; margin-right: auto; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: var(--gray-100); }
.btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.9); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #0a6050; transform: translateY(-1px); }
.btn-lg { padding: 15px 32px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; }
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-group--center { justify-content: center; }

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  height: var(--nav-height);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-logo-mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.nav-logo-text { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.5px; }
.nav-logo-tagline { font-size: 10px; color: var(--gray-400); display: block; margin-top: -2px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  padding: 6px 12px;
  font-size: 14px;
  color: var(--gray-800);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  font-weight: 500;
  cursor: pointer;
}
.nav-link:hover { background: var(--gray-100); color: var(--navy); }
.nav-link.active { color: var(--navy); font-weight: 600; }
.nav-dropdown { position: relative; }
/* The trigger link is stretched to the full nav-bar height (rather than
   just its own text's height) so .nav-dropdown's box — the menu's
   positioning anchor — spans the whole bar too. That's what makes
   `top: 100%` below land exactly on the nav's bottom edge instead of a
   few px above it, which is what actually reads as "merged with the
   nav" instead of a detached floating card. */
.nav-dropdown > .nav-link { height: var(--nav-height); display: flex; align-items: center; border-radius: 0; }
.nav-dropdown-menu {
  /* Flush against the bottom of the nav bar (top:100%, no gap, no top
     border/radius) with the same white background — reads as one
     continuous surface attached to the nav rather than a separate
     floating card hovering below it. */
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 240px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}
.nav-dropdown-item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--gray-800);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.nav-dropdown-item:hover { background: var(--gray-100); color: var(--navy); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login-btn, .nav-register-btn {
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
}
.mobile-auth-links { display: none; }
.nav-login-btn { color: var(--navy); }
.nav-login-btn:hover { background: var(--gray-100); }
.nav-register-btn { color: var(--navy); border: 1px solid var(--navy); }
.nav-register-btn:hover { background: var(--navy); color: #fff; }
.nav-download-btn {
  background: var(--navy);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.nav-download-btn:hover { background: var(--navy-light); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001; /* stays above the dropdown panel/backdrop it controls */
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Burger → X, once nav.js toggles aria-expanded="true" on click */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-login-btn, .nav-register-btn { display: none; }

  /* The logged-in "Hi, <name> ▾" pill is nowrap by design (desktop
     dropdown trigger) — on a narrow phone that plus the full logo
     lockup plus the burger button don't all fit on one line, and
     since flex items don't shrink below their content's natural
     width by default, the row was overflowing the viewport instead
     of wrapping — which is what was dragging the open mobile panel
     left and clipping its text (its containing block inherited the
     overflowed width). Letting these shrink/collapse keeps the whole
     top bar within the screen at any width. */
  .nav-inner { gap: 10px; }
  .nav-logo-tagline { display: none; }
  .nav-user-btn { padding: 6px 10px 6px 6px; gap: 6px; }
  .nav-actions { gap: 6px; }

  /* The dropdown panel itself: always in the DOM (not display:none) so it
     can transition smoothly — collapsed via max-height + opacity when
     closed, expanded when nav.js adds .nav-open. This is what was missing
     entirely before: the button existed but nothing ever showed the menu,
     because there was no open/close state — or the click handler — for it
     to toggle in the first place. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    padding: 8px 20px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.28s ease, opacity 0.2s ease;
  }
  .nav-links.nav-open {
    max-height: calc(100vh - var(--nav-height));
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;
  }
  .nav-link { padding: 12px 8px; width: 100%; }
  /* Undo the desktop-only full-bar-height stretch on dropdown triggers —
     in the mobile stacked list they should size to their own text like
     every other .nav-link, not sit 64px tall. */
  .nav-dropdown > .nav-link { height: auto; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    display: none;
    box-shadow: none;
    border: none;
    background: var(--gray-100);
    margin: 2px 0 6px;
    width: 100%;
  }
  /* Hover doesn't exist on touch — nav.js toggles this class on tap. */
  .nav-dropdown.mobile-open .nav-dropdown-menu { display: block; }

  .mobile-auth-links { display: flex; gap: 10px; padding: 12px 8px 8px; margin-top: 6px; border-top: 1px solid var(--gray-200); }
  .mobile-auth-links .nav-login-btn, .mobile-auth-links .nav-register-btn { display: inline-flex; justify-content: center; flex: 1; }
}

@media (max-width: 420px) {
  /* Smaller phones: the name text is the last thing that still won't
     fit next to the logo + burger button — drop it and keep just the
     avatar circle. "My Profile" / "Sign Out" etc. are still one tap
     away from that avatar, nothing is lost, just not shown inline. */
  .nav-user-name { display: none; }
  .nav-user-btn { padding: 6px; border-radius: 50%; }
  .nav-logo-text { font-size: 17px; }
}

/* ── Authentication pages ───────────────────────────────── */
.auth-page { min-height: calc(100vh - 73px); background: linear-gradient(135deg, #f4f7fc 0%, #eef6ff 50%, #f8fafc 100%); padding: 58px 20px; }
.auth-shell { max-width: 1050px; margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1.05fr; background: #fff; border: 1px solid var(--gray-200); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 70px rgba(17, 42, 79, 0.14); }
.auth-visual { position: relative; padding: 56px 44px; color: #fff; background: linear-gradient(150deg, var(--navy-dark), var(--navy) 58%, var(--navy-light)); overflow: hidden; }
.auth-visual::before, .auth-visual::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); }
.auth-visual::before { width: 330px; height: 330px; top: -150px; right: -140px; }
.auth-visual::after { width: 230px; height: 230px; bottom: -105px; left: -95px; }
.auth-visual-content { position: relative; z-index: 1; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 58px; }
.auth-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--navy); font-weight: 800; font-size: 20px; padding: 6px; overflow: hidden; }
.auth-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.auth-brand-name { font-size: 24px; font-weight: 800; }
.auth-visual h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin-bottom: 18px; }
.auth-visual p { color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.75; }
.auth-points { display: grid; gap: 14px; margin-top: 34px; }
.auth-point { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.auth-point-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.13); }
.auth-form-panel { padding: 52px 54px; display: flex; flex-direction: column; justify-content: center; }
.auth-form-panel h2 { color: var(--navy-dark); margin-bottom: 8px; }
.auth-lead { color: var(--gray-600); font-size: 14px; margin-bottom: 30px; }
.auth-lead a, .auth-footer-link { color: var(--navy-light); font-weight: 700; }
.auth-form { display: grid; gap: 18px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-field label { display: block; color: var(--gray-800); font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.auth-input-wrap { position: relative; }
.auth-input { width: 100%; min-height: 48px; padding: 12px 44px 12px 14px; color: var(--gray-800); background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; font: inherit; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.auth-input:focus { border-color: var(--navy-light); box-shadow: 0 0 0 4px rgba(31,78,140,.1); }
.password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 5px; border: 0; background: transparent; color: var(--gray-600); cursor: pointer; font-size: 16px; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; }
.auth-check { display: flex; align-items: flex-start; gap: 8px; color: var(--gray-600); line-height: 1.45; }
.auth-check input { margin-top: 3px; accent-color: var(--navy); }
.auth-submit { min-height: 50px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(17,42,79,.2); transition: transform .15s, background .15s; }
.auth-submit:hover { background: var(--navy-light); transform: translateY(-1px); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--gray-400); font-size: 12px; margin: 22px 0; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--gray-200); }
.auth-app-link { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; border: 1px solid var(--gray-200); border-radius: 10px; color: var(--navy); font-size: 14px; font-weight: 700; }
.auth-app-link:hover { background: var(--gray-100); }
.auth-message { display: none; padding: 12px 14px; border-radius: 9px; font-size: 13px; }
/* auth.js sets className to one of these directly (and toggles
   style.display itself) rather than adding a modifier onto a base
   green style, so both states need their own colors here. */
.auth-message--success { background: #e9f7ef; color: #176b3a; }
.auth-message--error { background: #fdecea; color: #b3261e; }
@media (max-width: 800px) { .auth-shell { grid-template-columns: 1fr; max-width: 570px; } .auth-visual { padding: 38px 32px; } .auth-brand { margin-bottom: 28px; } .auth-points { grid-template-columns: 1fr 1fr; } .auth-form-panel { padding: 42px 32px; } }
@media (max-width: 520px) { .nav-download-btn { padding: 8px 11px; font-size: 12px; } .auth-page { padding: 24px 12px; } .auth-visual, .auth-form-panel { padding: 32px 22px; } .auth-points { grid-template-columns: 1fr; } .auth-row { grid-template-columns: 1fr; } .auth-options { align-items: flex-start; flex-direction: column; } }

/* ── Hero Sections ────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
  padding: 80px 20px 88px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.02);
  border-radius: 50%;
}
.hero-inner { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 5px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 24px;
}
.hero-badge-dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; flex-shrink: 0; }
.hero-title { color: #ffffff; margin-bottom: 8px; }
.hero-title span { color: #93c5fd; }
.hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin-bottom: 16px;
  /* Centered by default — see .section-sub comment above; same reasoning
     applies to every hero section site-wide, court pages included. */
  margin-left: auto;
  margin-right: auto;
}
.hero-sub--center { margin-left: auto; margin-right: auto; }
.hero-tagline {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  margin-bottom: 32px;
  letter-spacing: 0.3px;
}
.tagline-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tagline-step { font-size: 1.1rem; font-weight: 700; color: #fff; }
.tagline-separator { color: rgba(255,255,255,0.3); font-size: 18px; }
.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 48px;
  flex-wrap: wrap;
  /* Centered by default — same reasoning as .hero-sub/.section-sub. */
  justify-content: center;
}
.hero-stats--center { justify-content: center; }
.hero-stat-num { font-size: 1.75rem; font-weight: 700; color: #fff; }
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.hero-divider { width: 1px; background: rgba(255,255,255,0.15); align-self: stretch; }

/* ── Court Page Hero ──────────────────────────────────────── */
/* .court-hero pages (nclt.html and every other court page sharing this
   class) were missing the .text-center utility index.html's hero has,
   which is why their hero copy sat left-aligned instead of centered like
   the homepage. Baked directly in here so every current and future page
   using .hero/.court-hero centers automatically — no per-page class to
   remember or forget. */
.hero { text-align: center; }
.court-hero { padding: 60px 20px 72px; }
.court-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 20px;
}
.court-hero-breadcrumb a { color: rgba(255,255,255,0.55); }
.court-hero-breadcrumb span { color: rgba(255,255,255,0.3); }
.court-badge {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ── Search Widget ────────────────────────────────────────── */
.search-widget {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 640px;
  margin: 32px auto 0;
}
.search-widget--white {
  background: #fff;
  border-color: var(--gray-200);
  box-shadow: var(--shadow-lg);
  margin: -40px auto 0;
  position: relative;
  z-index: 10;
}
.search-widget-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
}
.search-widget-title--dark { color: var(--navy-dark); }
.search-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.search-tabs--light { background: var(--gray-100); }
.search-tab {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  text-align: center;
  transition: all 0.15s;
  border: none;
  background: transparent;
}
.search-tab--light { color: var(--gray-600); }
.search-tab.active { background: #fff; color: var(--navy); }
.search-tab--light.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.search-row { display: flex; gap: 10px; margin-bottom: 10px; }
.search-input {
  flex: 1;
  padding: 11px 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  font-size: 14px;
  color: #1a1a2e;
  outline: none;
  transition: border-color 0.15s;
}
.search-input--light { background: var(--gray-50); border-color: var(--gray-200); }
.search-input:focus { border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(46,95,163,0.1); }
.search-select {
  padding: 11px 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  font-size: 13px;
  color: #1a1a2e;
  cursor: pointer;
  outline: none;
}
.search-select--light { background: var(--gray-50); border-color: var(--gray-200); }
/* DRT search widget: a plain <select> with no flex-basis sizes itself off
   its populated OPTIONS (location names, case types, years — filled in by
   JS after load), not off its row's available width the way .search-input
   already does via flex:1. That made each dropdown a different, content-
   dependent width, so the columns didn't line up between the "Case
   Number" and "Party Name" rows. Give every select in this widget the
   same predictable sizing: the two "pick one of several" selects (DRT
   location, case type) share the row 50/50 like the row below splits
   between its input and select, and the year select — paired with a wide
   text input, not another select — gets a fixed width instead of one that
   jumps around with whichever year string happens to be selected. */
.drt-panel .search-select { flex: 1 1 0; min-width: 0; }
.drt-panel .drt-case-year-select { flex: 0 0 140px; }

/* Same fix, same reasoning, applied to every other court search widget that
   pairs multiple selects in one row (NCLT, CAT, ITAT, Supreme Court, All
   High Courts, District Courts) — otherwise unstyled selects there would
   size to their own option text instead of sharing the row evenly, leaving
   ragged columns and dead space at the row's right edge. */
.nclt-panel .search-select { flex: 1 1 0; min-width: 0; }
.nclt-panel .nclt-case-year-select { flex: 0 0 140px; }

.cat-panel .search-select { flex: 1 1 0; min-width: 0; }
.cat-panel .cat-case-year-select { flex: 0 0 140px; }

.itat-panel .search-select { flex: 1 1 0; min-width: 0; }
.itat-panel .itat-year-select { flex: 0 0 140px; }

.hc-search-widget .search-select { flex: 1 1 0; min-width: 0; }
/* Wider than the other pages' 140px year column: this page's placeholder
   reads "Select Case Year" (longer than "Select Year" elsewhere) and was
   getting clipped by the dropdown arrow at 140px. */
.hc-search-widget .hc-case-year-select { flex: 0 0 168px; }

.dc-search-widget .search-select { flex: 1 1 0; min-width: 0; }

/* Supreme Court's party-search row (Case Category + Case Status) — the
   only two-select row on that page; its Case Number row already balances
   fine (a select next to a full-width input) so it's left alone. */
.sci-split-select { flex: 1 1 0; min-width: 0; }

/* A select left alone in its own row (e.g. a year picker on its own line)
   should still span the row like every other field does, not shrink to
   its option text and leave the rest of the row empty. */
.search-row > .search-select:only-child { flex: 1 1 0; min-width: 0; }
.search-btn {
  padding: 11px 22px;
  background: var(--navy-light);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.search-btn:hover { background: var(--navy); }
.search-btn--teal { background: var(--teal); }
.search-btn--teal:hover { background: #0a6050; }
.search-hint { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 8px; }
.search-hint--dark { color: var(--gray-400); }
.search-hint a { color: var(--white); text-decoration: underline; }
.search-hint a:hover { color: var(--white); opacity: 0.85; }

/* ── Feature Cards ────────────────────────────────────────── */
.feature-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all 0.2s;
}
.feature-card:hover { border-color: var(--navy-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 20px;
}
.feature-icon--blue { background: #e8f0fe; }
.feature-icon--teal { background: var(--teal-light); }
.feature-icon--gold { background: var(--gold-light); }
.feature-icon--red  { background: #fdf0ef; }
.feature-icon--purple { background: #f3e8fd; }
.feature-icon--green { background: #e6f4ea; }
.feature-title { font-size: 16px; font-weight: 700; color: var(--navy-dark); margin-bottom: 8px; }
.feature-desc { font-size: 14px; color: var(--gray-600); line-height: 1.6; }

/* ── Court Cards ──────────────────────────────────────────── */
.court-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s;
  cursor: pointer;
}
.court-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.court-card-header { display: flex; align-items: center; gap: 12px; }
.court-card-icon {
  width: 40px;
  height: 40px;
  background: var(--navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.court-card-name { font-size: 15px; font-weight: 700; color: var(--navy-dark); }
.court-card-location { font-size: 12px; color: var(--gray-400); }
.court-card-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.court-pill {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
}
.court-pill--blue { background: #e8f0fe; color: var(--navy-light); }
.court-card-link { font-size: 13px; font-weight: 600; color: var(--navy-light); display: flex; align-items: center; gap: 4px; }

/* Cards that also carry a "Add to My Case" slot: the clickable "go to
   detail" region becomes an inner anchor (.court-card-body) so the card
   itself is a plain, non-interactive <div> — .mycase-slot in the footer
   below is a sibling, never nested inside the anchor. */
.court-card-body { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.court-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--gray-200);
}
/* Search results no longer show an "Add to My Case" button (see
   mycase-widget.js — that's detail-page-only now), so a result that isn't
   already saved renders an empty .mycase-slot. Collapsing the whole footer
   in that case (toggled by mycase-widget.js, not just the slot) removes
   the now-pointless divider line + padding instead of leaving a bar of
   dead space under every unsaved card. */
.court-card-footer--empty {
  display: none;
}

/* ── "Add to My Case" widget (js/mycase-widget.js) ────────────────────── */
.mycase-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1.5px solid var(--navy-light);
  background: #fff;
  color: var(--navy-light);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.mycase-btn:hover { background: var(--navy-light); color: #fff; }
.mycase-btn--loading { opacity: 0.65; cursor: default; border-style: dashed; }
.mycase-btn--loading:hover { background: #fff; color: var(--navy-light); }
.mycase-btn--retry { border-color: var(--gold); color: var(--gold); }
.mycase-btn--retry:hover { background: var(--gold); color: #fff; }
.mycase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.mycase-badge--saved { background: var(--teal-light); color: var(--teal); }
.mycase-badge--limit { background: var(--gold-light); color: #7d6608; }
.mycase-badge--limit a { color: inherit; text-decoration: underline; margin-left: 2px; }

/* Detail-page title bar — case title on the left, "Add to My Case" pinned
   to the top-right corner of the same navy bar. Buttons/badges get a
   light-on-dark variant here since the bar's own background is navy. */
.case-detail-titlebar {
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.case-detail-titlebar .case-detail-titlebar-title { flex: 1 1 auto; min-width: 0; }
.case-detail-titlebar .mycase-btn { border-color: rgba(255,255,255,0.7); background: transparent; color: #fff; flex-shrink: 0; }
.case-detail-titlebar .mycase-btn:hover { background: #fff; color: var(--navy-light); }
.case-detail-titlebar .mycase-btn--loading { border-style: dashed; opacity: 0.8; }
.case-detail-titlebar .mycase-btn--loading:hover { background: transparent; color: #fff; }
.case-detail-titlebar .mycase-btn--retry { border-color: var(--gold-light); color: var(--gold-light); }
.case-detail-titlebar .mycase-btn--retry:hover { background: var(--gold-light); color: var(--navy); }
.case-detail-titlebar .mycase-badge--saved { background: rgba(255,255,255,0.18); color: #fff; }
.case-detail-titlebar .mycase-badge--limit { background: rgba(255,255,255,0.18); color: #ffe9a8; }
.case-detail-titlebar .mycase-badge--limit a { color: #fff; }
/* Deprecated — kept only in case an older card still references it. */
.case-header-actions { display: flex; justify-content: flex-end; padding: 12px 16px; background: #f8f9fa; border-top: 1px solid #e8eaed; }

/* ── Steps / Process ──────────────────────────────────────── */
.steps-row { display: flex; gap: 0; position: relative; align-items: flex-start; }
.steps-line {
  position: absolute;
  top: 24px;
  left: calc(16.67% + 24px);
  right: calc(16.67% + 24px);
  height: 2px;
  background: var(--gray-200);
}
.step { flex: 1; text-align: center; position: relative; z-index: 1; padding: 0 12px; }
.step-number {
  width: 48px;
  height: 48px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  margin: 0 auto 14px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--gray-200);
}
.step-number--teal { background: var(--teal); }
.step-label { font-size: 15px; font-weight: 700; color: var(--navy-dark); margin-bottom: 6px; }
.step-desc { font-size: 13px; color: var(--gray-600); line-height: 1.5; }

/* ── Info Cards / Stats ───────────────────────────────────── */
.stat-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}
.stat-num { font-size: 2.25rem; font-weight: 800; color: var(--navy); letter-spacing: -1px; }
.stat-label { font-size: 13px; color: var(--gray-600); margin-top: 4px; }
.stat-card--navy { background: var(--navy); border-color: var(--navy); }
.stat-card--navy .stat-num { color: #fff; }
.stat-card--navy .stat-label { color: rgba(255,255,255,0.6); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--gray-200);
  padding: 0;
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-q-icon { font-size: 20px; color: var(--navy-light); flex-shrink: 0; transition: transform 0.2s; }
.faq-item.open .faq-q-icon { transform: rotate(45deg); }
.faq-a {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.7;
  padding: 0 0 20px;
  display: none;
}
.faq-item.open .faq-a { display: block; }

/* ── Testimonials ─────────────────────────────────────────── */
.testi-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.testi-stars { color: #f59e0b; font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.testi-text { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 36px;
  height: 36px;
  background: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.testi-name { font-size: 13px; font-weight: 700; color: var(--navy-dark); }
.testi-role { font-size: 11px; color: var(--gray-400); }

/* ── Find My Case / Premium ───────────────────────────────── */
.no-fee-banner {
  background: linear-gradient(135deg, #0a4d3a 0%, #0f7862 100%);
  border-radius: var(--radius-xl);
  padding: 48px;
  text-align: center;
  color: #fff;
}
.no-fee-title { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.no-fee-sub { font-size: 1.05rem; color: rgba(255,255,255,0.75); margin-bottom: 28px; }
.trust-badges { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.trust-badge { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.85); }
.trust-badge-icon { font-size: 20px; }

/* ── Download App Strip ───────────────────────────────────── */
.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}
.app-btn--play { background: #fff; color: var(--navy); }
.app-btn--play:hover { background: var(--gray-100); }
.app-btn--apple { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.app-btn--apple:hover { background: rgba(255,255,255,0.18); }
.app-btn-icon { font-size: 22px; }
.app-btn-sub { font-size: 10px; font-weight: 400; display: block; opacity: 0.7; }
.app-btn-main { font-size: 15px; display: block; }

/* ── Blog Cards ───────────────────────────────────────────── */
.blog-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s;
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card-img { height: 160px; background: var(--gray-100); position: relative; }
.blog-card-img-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.blog-card-body { padding: 20px; }
.blog-card-tag { font-size: 11px; font-weight: 700; color: var(--navy-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.blog-card-title { font-size: 16px; font-weight: 700; color: var(--navy-dark); margin-bottom: 8px; line-height: 1.4; }
.blog-card-excerpt { font-size: 13px; color: var(--gray-600); line-height: 1.6; margin-bottom: 14px; }
.blog-card-meta { font-size: 12px; color: var(--gray-400); display: flex; align-items: center; gap: 8px; }

/* ── Table ────────────────────────────────────────────────── */
.sarth-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sarth-table th {
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
}
.sarth-table th:first-child { border-radius: 8px 0 0 0; }
.sarth-table th:last-child { border-radius: 0 8px 0 0; }
.sarth-table td { padding: 12px 16px; border-bottom: 1px solid var(--gray-200); color: var(--gray-800); }
.sarth-table tr:hover td { background: var(--gray-50); }
.sarth-table tr:last-child td { border-bottom: none; }
.sarth-table-wrap { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }

/* ── Notice / Alert ───────────────────────────────────────── */
.notice {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
}
.notice--info { background: #e8f0fe; border-left: 4px solid var(--navy-light); color: var(--navy-dark); }
.notice--success { background: var(--teal-light); border-left: 4px solid var(--teal); color: #0a4d3a; }
.notice--warning { background: var(--gold-light); border-left: 4px solid var(--gold); color: #7d6608; }
.notice-icon { font-size: 18px; flex-shrink: 0; }

/* ── Courts Strip ─────────────────────────────────────────── */
.courts-strip {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 20px;
  overflow: hidden;
}
.courts-strip-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.courts-strip-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.courts-strip-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.court-strip-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: all 0.15s;
}
.court-strip-pill:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--navy-dark);
  padding: 60px 20px 32px;
  color: rgba(255,255,255,0.6);
}
.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.footer-brand-name { font-size: 18px; font-weight: 700; color: #fff; }
.footer-tagline { font-size: 12px; color: rgba(255,255,255,0.35); font-style: italic; margin-bottom: 16px; }
.footer-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.7; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social-btn {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.footer-social-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.footer-link { display: block; font-size: 13px; color: rgba(255,255,255,0.45); padding: 4px 0; transition: color 0.15s; text-decoration: none; }
.footer-link:hover { color: rgba(255,255,255,0.9); }
.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.3); }
.footer-credit { font-size: 12px; color: rgba(255,255,255,0.25); }
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Chips / Badges ───────────────────────────────────────── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.badge--blue { background: #e8f0fe; color: var(--navy-light); }
.badge--teal { background: var(--teal-light); color: var(--teal); }
.badge--gold { background: var(--gold-light); color: var(--gold); }
.badge--red  { background: #fdf0ef; color: var(--red); }
.badge--new  { background: #e8f5e9; color: #1b5e20; }

/* ── Keyword / SEO Content Lists ─────────────────────────── */
.info-block { padding: 40px 0; }
.info-block h2 { color: var(--navy-dark); margin-bottom: 16px; }
.info-block h3 { color: var(--navy); margin-bottom: 10px; margin-top: 24px; }
.info-block p { color: var(--gray-600); margin-bottom: 14px; }
.info-block ul { margin: 10px 0 16px 20px; }
.info-block li { color: var(--gray-600); margin-bottom: 6px; font-size: 15px; }
.info-block li::marker { color: var(--navy-light); }

/* ── Page-specific Helpers ────────────────────────────────── */
.page-header { padding: 40px 20px 32px; border-bottom: 1px solid var(--gray-200); }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-400); margin-bottom: 16px; }
.breadcrumb a { color: var(--navy-light); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--gray-200); }

/* ── Responsive Adjustments ───────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-pad: 56px 20px; }
  .hero { padding: 56px 20px 64px; }
  .hero-stats { gap: 24px; }
  .steps-row { flex-direction: column; gap: 24px; }
  .steps-line { display: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .btn-lg { padding: 13px 24px; font-size: 15px; }
  .no-fee-banner { padding: 32px 24px; }
  .search-row { flex-direction: column; }
  /* .drt-case-year-select's fixed flex-basis: 140px (added for the desktop
     row, so its width stops jumping around with the selected year) is
     measured along the row's main axis — which .search-row just flipped
     to vertical above, turning that same "140px" into a height instead of
     a width. Reset it back to a normal full-width stacked field here. */
  .drt-panel .drt-case-year-select { flex: 1 1 auto; }
  .tagline-steps { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-stats { gap: 20px; }
  .hero-divider { display: none; }
}

/* ── Print / Accessibility ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
:focus-visible { outline: 3px solid var(--navy-light); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Auth-gate modal ──────────────────────────────────────────────────────
   Shown in place of a hard redirect to login.html whenever a signed-out
   visitor tries to open a case's full details from an anonymous search
   result. Two halves: left promotes the mobile app (where all of this is
   free to use without hitting this wall), right offers Login/Register to
   keep going on the web right now. Injected once into <body> by
   SarthAuthGate (see nav.js) and reused for every gated link on the page. */
.sarth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 71, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.sarth-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
body.sarth-modal-open { overflow: hidden; }
.sarth-modal {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 780px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.22s ease;
}
.sarth-modal-overlay.open .sarth-modal { transform: translateY(0) scale(1); }
.sarth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0,0,0,0.06);
  color: var(--gray-800);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.sarth-modal-close:hover { background: rgba(0,0,0,0.12); }
.sarth-modal-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sarth-modal-half {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sarth-modal-promo {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.sarth-modal-app-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow-md);
}
.sarth-modal-app-icon img { width: 100%; height: 100%; object-fit: cover; }
.sarth-modal-promo h2 {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.sarth-modal-promo p {
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 14px;
}
.sarth-modal-store-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}
.sarth-store-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: background 0.15s, border-color 0.15s;
}
.sarth-store-badge:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }
.sarth-store-badge svg { flex-shrink: 0; width: 22px; height: 22px; fill: #fff; }
.sarth-store-badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.sarth-store-badge-text small { font-size: 10px; color: rgba(255,255,255,0.7); }
.sarth-store-badge-text span { font-size: 14px; font-weight: 600; color: #fff; }
.sarth-modal-auth {
  background: #fff;
  color: var(--gray-800);
}
.sarth-modal-auth h3 {
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 12px;
}
.sarth-modal-auth p {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 24px;
}
.sarth-modal-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.sarth-modal-login-btn, .sarth-modal-register-btn {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s;
}
.sarth-modal-login-btn {
  background: var(--navy);
  color: #fff;
}
.sarth-modal-login-btn:hover { background: var(--navy-dark); }
.sarth-modal-register-btn {
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.sarth-modal-register-btn:hover { background: var(--gray-100); }
.sarth-modal-auth-hint {
  margin-top: 18px;
  font-size: 12px;
  color: var(--gray-400);
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .sarth-modal-halves { grid-template-columns: 1fr; }
  .sarth-modal-promo { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .sarth-modal-half { padding: 32px 24px; }
}

/* ── Download page hero ───────────────────────────────────────────────────
   Two-column layout: headline/benefits/store badges on the left, a
   scannable QR code card on the right. Reuses .hero's navy gradient. */
.download-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}
/* .hero-sub centers itself by margin:auto site-wide by default (see its
   own comment in sarth.css) — this hero's left column needs it flush
   left instead, and free to use the column's full width. */
.download-hero-grid .hero-sub { margin-left: 0; margin-right: 0; max-width: none; }
.download-benefits { list-style: none; margin: 24px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.download-benefits li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,0.88); font-size: 15px; }
.download-benefits li::before { content: '✓'; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.qr-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  text-align: center;
  max-width: 280px;
  margin: 0 auto;
}
.qr-card img { width: 100%; max-width: 208px; height: auto; margin: 0 auto 16px; display: block; border-radius: var(--radius-sm); }
.qr-card-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.qr-card-caption { font-size: 13px; color: var(--gray-600); line-height: 1.5; }
@media (max-width: 860px) {
  .download-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .download-benefits li { justify-content: center; }
  .download-benefits { align-items: center; }
}