/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --ink: #1c1b19;
  --ink-soft: #4a463e;
  --sand: #f6f2e9;
  --paper: #ffffff;
  --teal: #0f5f5f;
  --teal-deep: #0a3d3d;
  --teal-bright: #12a894;
  --gold: #a8752a;
  --gold-soft: #f1e3c9;
  --coral: #d9534f;
  --purple: #5b3e8f;
  --purple-deep: #3a2661;
  --line: #ddd7c8;
  --line-soft: #ece7da;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgba(28, 27, 25, 0.06), 0 1px 1px rgba(28, 27, 25, 0.04);
  --shadow-2: 0 4px 14px rgba(28, 27, 25, 0.08), 0 2px 4px rgba(28, 27, 25, 0.05);
  --shadow-3: 0 12px 32px rgba(28, 27, 25, 0.12), 0 4px 10px rgba(28, 27, 25, 0.06);
  --shadow-hero: 0 20px 48px rgba(10, 61, 61, 0.14), 0 6px 16px rgba(10, 61, 61, 0.08);
  --gradient-accent: linear-gradient(135deg, var(--teal-bright), var(--teal-deep) 130%);
  --gradient-badge: linear-gradient(90deg, rgba(18, 168, 148, 0.12), rgba(91, 62, 143, 0.10));
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Tahoma", sans-serif;
}

/* Urdu reuses every html[lang="ar"] rule in this file (same RTL layout),
   but needs its own typeface — Nastaliq is the script style Urdu readers
   actually expect, quite different from Arabic's Naskh style. Redefining
   the variable here, rather than duplicating 39 font-family rules, is
   what lets every one of those existing rules pick up the right font
   automatically. */
html[lang="ur"] {
  --font-arabic: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
}

* { box-sizing: border-box; }

/* Smooth in-page navigation, with scroll-margin-top on every anchor
   target so the sticky header never covers the top of the section you
   just navigated to (topbar is ~154px on desktop, ~105px on mobile —
   see the media query override below). */
html { scroll-behavior: smooth; }
#compare-intro, #compare, #offers, #results, #highlights, #ledger,
#operators, #categories, #how-it-works, #faq, #guide, #methodology {
  scroll-margin-top: 168px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--sand);
  background-image:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(15, 95, 95, 0.05), transparent),
    radial-gradient(ellipse 700px 400px at -5% 20%, rgba(168, 117, 42, 0.05), transparent);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body , html[lang="ur"] body {
  font-family: var(--font-arabic);
}
html[lang="ar"] .wordmark, html[lang="ur"] .wordmark,
html[lang="ar"] h1, html[lang="ur"] h1,
html[lang="ar"] h2, html[lang="ur"] h2,
html[lang="ar"] h3, html[lang="ur"] h3,
html[lang="ar"] .stub__price, html[lang="ur"] .stub__price,
html[lang="ar"] .highlight-card__price, html[lang="ur"] .highlight-card__price,
html[lang="ar"] .slider-line__value , html[lang="ur"] .slider-line__value {
  font-family: var(--font-arabic);
}
html[lang="ar"] body , html[lang="ur"] body { font-size: 16.5px; }

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--teal-deep);
  letter-spacing: -0.01em;
}
html[lang="ar"] h1, html[lang="ur"] h1, html[lang="ar"] h2, html[lang="ur"] h2, html[lang="ar"] h3 , html[lang="ur"] h3 { letter-spacing: 0; }

::selection { background: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Logical direction helpers so RTL flips automatically */
.stub, .op-row, .stub__operator, .ledger__op,
.highlight-card__op, .topbar__inner, .topbar__nav {
  direction: inherit;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(246, 242, 233, 0.88);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--teal-deep);
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.15s var(--ease);
}
.wordmark:hover { opacity: 0.8; }
.wordmark__icon { align-self: center; border-radius: 8px; flex: none; }
.wordmark__ar {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gold);
}
.topbar__nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.topbar__nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.topbar__nav a:hover { border-bottom-color: var(--gold); color: var(--ink); }
.topbar__controls { display: flex; align-items: center; gap: 12px; flex: none; }
.topbar__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--teal-deep);
  cursor: pointer;
  flex: none;
}
.topbar__updated {
  font-size: 0.76rem;
  color: var(--teal);
  background: var(--gold-soft);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.lang-switch {
  border: 1px solid var(--teal-deep);
  background: var(--teal-deep);
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.lang-switch:hover { background: var(--teal); transform: translateY(-1px); }

.lang-dropdown { position: relative; flex: none; }
.lang-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--teal-deep);
  background: var(--teal-deep);
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.lang-dropdown__trigger:hover { background: var(--teal); transform: translateY(-1px); }
.lang-dropdown__chevron { transition: transform 0.15s var(--ease); flex: none; }
.lang-dropdown__chevron--up { transform: rotate(180deg); }
.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 140px;
  z-index: 30;
}
.lang-dropdown__option {
  display: block;
  width: 100%;
  text-align: start;
  background: none;
  border: none;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}
.lang-dropdown__option:hover { background: var(--sand); }
.lang-dropdown__option--active { color: var(--teal-deep); font-weight: 700; background: var(--gold-soft); }
.lang-switch:active { transform: translateY(0); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { max-width: 1160px; margin: 0 auto; padding: 46px 28px 0; position: relative; }
.hero::before {
  /* Soft radial glow anchored behind the headline — reads as a premium
     "hero banner" without needing a full-bleed colored panel. */
  content: "";
  position: absolute;
  top: -48px;
  inset-inline-start: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(18, 168, 148, 0.10), rgba(91, 62, 143, 0.06) 55%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 1;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.hero__copy { max-width: 640px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-badge);
  border: 1px solid rgba(18, 168, 148, 0.25);
  color: var(--teal-deep);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
html[lang="ar"] .hero__badge , html[lang="ur"] .hero__badge { padding: 5px 9px 5px 13px; }
.hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(18, 168, 148, 0.18);
  flex: none;
}

/* Semantic, keyword-carrying <h1> — now also the bold visual headline
   (previously this weight lived on a separate non-semantic tagline). */
.hero__h1 { margin: 0 0 12px; }
.hero__h1-line {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero__h1-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[lang="ar"] .hero__h1-line , html[lang="ur"] .hero__h1-line { font-family: var(--font-arabic); font-size: 1.9rem; line-height: 1.4; letter-spacing: 0; }

.hero__lede {
  font-size: 0.96rem;
  font-style: italic;
  color: var(--ink-soft);
  max-width: none;
  white-space: nowrap;
  line-height: 1.6;
  margin: 0 0 20px;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero__cta-primary, .hero__cta-secondary {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), transform 0.1s var(--ease), background 0.15s var(--ease);
}
html[lang="ar"] .hero__cta-primary, html[lang="ur"] .hero__cta-primary, html[lang="ar"] .hero__cta-secondary , html[lang="ur"] .hero__cta-secondary { font-family: var(--font-arabic); }
.hero__cta-primary {
  background: var(--teal-deep);
  background-image: var(--gradient-accent);
  color: var(--paper);
  border: none;
  box-shadow: var(--shadow-2);
}
.hero__cta-primary:hover { box-shadow: var(--shadow-3); transform: translateY(-1px); }
.hero__cta-secondary {
  background: var(--paper);
  color: var(--teal-deep);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-1);
}
.hero__cta-secondary:hover { border-color: var(--teal-bright); box-shadow: var(--shadow-2); transform: translateY(-1px); }

.hero__trustbar { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
.trust-chip__icon { font-size: 0.95em; }
.trust-chip--live {
  border-color: rgba(18, 168, 148, 0.35);
  color: var(--teal-deep);
  font-weight: 600;
}

/* ── Hero operator trust grid (right column) ─────────────────────── */
.trust-grid {
  padding: 4px 24px 0;
  position: relative;
}
.trust-grid__head {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
}
html[lang="ar"] .trust-grid__head , html[lang="ur"] .trust-grid__head { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

.trust-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 20px;
  margin-bottom: 0;
  padding: 0 8px;
}
.trust-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.trust-grid__item:hover { transform: translateY(-3px); }
.trust-grid__item:hover .op-mark { box-shadow: 0 4px 12px rgba(10, 61, 61, 0.22); }
.trust-grid__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
}
html[lang="ar"] .trust-grid__label , html[lang="ur"] .trust-grid__label { font-family: var(--font-arabic); }

/* ── Option A: Top Pick Spotlight (alternate hero panel) ─────────── */
.spotlight {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  padding: 24px 26px 26px;
  position: relative;
  overflow: hidden;
}
.spotlight::before {
  content: "";
  position: absolute;
  top: 0; inset-inline-start: 0; inset-inline-end: 0;
  height: 4px;
  background: var(--gradient-accent);
}
.spotlight__head {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
html[lang="ar"] .spotlight__head , html[lang="ur"] .spotlight__head { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.spotlight__badge {
  display: inline-block;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.spotlight__op { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.spotlight__opname { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--teal-deep); }
html[lang="ar"] .spotlight__opname , html[lang="ur"] .spotlight__opname { font-family: var(--font-arabic); }
.spotlight__plan { font-size: 0.88rem; color: var(--ink-soft); }
.spotlight__price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.spotlight__price span { font-size: 0.9rem; font-weight: 400; color: var(--ink-soft); margin-inline-start: 4px; }
.spotlight__note { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 22px; }
.spotlight__cta {
  width: 100%;
  background: var(--teal-deep);
  background-image: var(--gradient-accent);
  color: var(--paper);
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 16px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-2);
}
html[lang="ar"] .spotlight__cta , html[lang="ur"] .spotlight__cta { font-family: var(--font-arabic); }

/* ── Option B: Live Stats Strip (alternate hero panel) ────────────── */
.stats-strip {
  background: var(--teal-deep);
  background-image: linear-gradient(160deg, var(--teal-deep), #0d4a4a 130%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  padding: 28px 26px 26px;
  color: var(--paper);
}
.stats-strip__head {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
html[lang="ar"] .stats-strip__head , html[lang="ur"] .stats-strip__head { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.stats-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.stats-strip__item { text-align: center; }
.stats-strip__num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--paper); }
.stats-strip__label { font-size: 0.72rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
html[lang="ar"] .stats-strip__label , html[lang="ur"] .stats-strip__label { font-family: var(--font-arabic); }
.stats-strip__cta {
  width: 100%;
  background: var(--paper);
  color: var(--teal-deep);
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 16px;
  border-radius: 999px;
  cursor: pointer;
}
html[lang="ar"] .stats-strip__cta , html[lang="ur"] .stats-strip__cta { font-family: var(--font-arabic); }

/* ── Workspace: wide matcher + offers sidebar ───────────────────── */
/* Deliberately NOT CSS Grid: a grid row's height equals its tallest
   cell, so when the offers sidebar has more content than the matcher,
   the shorter matcher column left a large dead gap before the next
   section (reported bug). Taking the sidebar out of flow via absolute
   positioning means only .workspace__main (the matcher) determines the
   container's height, so page flow always hugs the matcher's real
   height regardless of how tall/short the sidebar's content is. */
.workspace {
  max-width: 1160px;
  margin: 32px auto 0;
  padding: 0 28px;
  position: relative;
}
.workspace__main {
  width: calc(65% - 14px);
  min-width: 0;
}
.workspace__side {
  position: absolute;
  top: 0;
  inset-inline-end: 28px;
  width: calc(35% - 14px);
  min-width: 0;
  height: 100%; /* fallback before JS measures the matcher; see Workspace component */
}

.matcher {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  padding: 30px 34px 32px;
  transition: box-shadow 0.2s var(--ease);
  position: relative;
  overflow: hidden;
}
.matcher::before {
  content: "";
  position: absolute;
  top: 0; inset-inline-start: 0; inset-inline-end: 0;
  height: 4px;
  background: var(--gradient-accent);
}
.matcher__row { margin-bottom: 20px; }
.matcher__row:last-of-type { margin-bottom: 22px; }
.matcher__label {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
  font-weight: 500;
}
.matcher__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}
.matcher__grid .matcher__row { margin-bottom: 20px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  padding: 8px 15px;
  font-size: 0.88rem;
  border-radius: 20px;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}
.pill:hover { border-color: var(--teal); color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.pill--active {
  background: var(--gradient-accent);
  border-color: var(--teal-deep);
  color: var(--paper);
  box-shadow: var(--shadow-1);
}
.pill--active:hover { filter: brightness(1.06); }

.slider-line { display: flex; align-items: center; gap: 16px; }
.slider-line input[type="range"] {
  flex: 1;
  accent-color: var(--teal);
  height: 4px;
  cursor: pointer;
}
.slider-line__value {
  font-family: var(--font-display);
  font-weight: 600;
  min-width: 92px;
  text-align: end;
  color: var(--teal-deep);
  font-size: 1rem;
}

.matcher__submit {
  width: 100%;
  background: var(--teal-deep);
  background-image: var(--gradient-accent);
  color: var(--paper);
  border: none;
  padding: 15px 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  transition: box-shadow 0.2s var(--ease), transform 0.1s var(--ease);
}
.matcher__submit:hover { box-shadow: var(--shadow-3); transform: translateY(-1px); }
.matcher__submit:active { transform: translateY(0); }
html[lang="ar"] .matcher__submit , html[lang="ur"] .matcher__submit { font-family: var(--font-arabic); }

/* ── Offers sidebar (compact, next to matcher) ──────────────────── */
.offers-side {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-2);
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.offers-side__title { font-size: 1.05rem; margin: 0 0 4px; }
.offers-side__lede { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }
.offers-side__list { display: flex; flex-direction: column; gap: 12px; }
.offer-card--side { padding: 13px 14px; }
.offer-card--side .offer-card__title { font-size: 0.88rem; margin-bottom: 5px; }
.offer-card--side .offer-card__desc { font-size: 0.78rem; }
/* ── Results widget (horizontal scroll cards, relevant to selection) ── */
.results-widget { max-width: 1160px; margin: 44px auto 0; padding: 0 28px; }
.results-widget__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.carousel-nav { display: flex; gap: 8px; flex: none; }
.carousel-nav__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.carousel-nav__btn:hover:not(:disabled) { background: var(--teal-deep); background-image: var(--gradient-accent); color: var(--paper); border-color: transparent; }
.carousel-nav__btn:disabled { opacity: 0.35; cursor: default; }
html[lang="ar"] .carousel-nav__btn svg , html[lang="ur"] .carousel-nav__btn svg { transform: scaleX(-1); }

.results-widget__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar hidden in favor of the dot indicators below — native swipe
     and the prev/next arrows both still work, this only hides the bar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.results-widget__scroll::-webkit-scrollbar { display: none; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.carousel-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease), width 0.2s var(--ease);
}
.carousel-dots__dot:hover { background: var(--teal-bright); }
.carousel-dots__dot--active {
  background: var(--teal-deep);
  background-image: var(--gradient-accent);
  transform: scale(1.3);
}

.plan-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 48px) / 4);
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.plan-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.plan-card--clickable { cursor: pointer; }
.plan-card--featured {
  border: 2px solid var(--teal-bright);
  background: linear-gradient(165deg, var(--paper), #f2fbf9 120%);
  box-shadow: var(--shadow-2);
}
.plan-card__ribbon {
  position: absolute;
  top: -11px;
  inset-inline-start: 16px;
  background: var(--gradient-accent);
  color: var(--paper);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-1);
}
.plan-card__head { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.plan-card__op { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--teal-deep); }
html[lang="ar"] .plan-card__op , html[lang="ur"] .plan-card__op { font-family: var(--font-arabic); }
.plan-card__plan { color: var(--ink-soft); font-size: 0.8rem; }
.plan-card__price { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.plan-card__price span { font-size: 0.78rem; font-weight: 400; color: var(--ink-soft); margin-inline-start: 3px; }
.plan-card__reason { font-size: 0.82rem; color: var(--teal-deep); margin: 0 0 10px; font-weight: 500; line-height: 1.4; }
.plan-card__specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; color: var(--ink-soft); }
.plan-card__specs li::before { content: "· "; color: var(--gold); font-weight: 700; }

.empty-note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  color: var(--ink-soft);
  font-size: 0.96rem;
  box-shadow: var(--shadow-1);
}

/* ── Highlights ──────────────────────────────────────────────── */
.highlights { max-width: 1160px; margin: 56px auto 0; padding: 0 28px; }
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.highlight-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  position: relative;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.highlight-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.highlight-card__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-soft);
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.highlight-card__op { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.highlight-card__opname { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--teal-deep); }
html[lang="ar"] .highlight-card__opname , html[lang="ur"] .highlight-card__opname { font-family: var(--font-arabic); }
.highlight-card__plan { color: var(--ink-soft); font-size: 0.84rem; }
.highlight-card__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--teal-deep); margin-bottom: 8px; }
.highlight-card__price span { font-size: 0.78rem; font-weight: 400; color: var(--ink-soft); margin-inline-start: 3px; }
.highlight-card__note { font-size: 0.86rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ── Guide (SEO content — genuinely useful long-form guidance) ─── */
.guide { max-width: 1160px; margin: 64px auto 0; padding: 0 28px; }
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.guide-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.guide-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.guide-card__icon { font-size: 1.5rem; display: block; margin-bottom: 10px; }
.guide-card h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin: 0 0 8px;
  line-height: 1.35;
}
html[lang="ar"] .guide-card h3 , html[lang="ur"] .guide-card h3 { font-family: var(--font-arabic); }
.guide-card p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; line-height: 1.65; }

/* ── Package Categories ──────────────────────────────────────── */
.pkg-cats { max-width: 1160px; margin: 20px auto 0; padding: 0 28px; }
.pkg-cats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.pkg-cat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  text-align: start;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s var(--ease), transform 0.15s var(--ease), border-color 0.15s var(--ease);
  font-family: inherit;
}
.pkg-cat-card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); border-color: var(--teal-bright); }
.pkg-cat-card__icon { font-size: 1.6rem; display: block; margin-bottom: 10px; }
.pkg-cat-card h3 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin: 0 0 6px;
}
html[lang="ar"] .pkg-cat-card h3 , html[lang="ur"] .pkg-cat-card h3 { font-family: var(--font-arabic); }
.pkg-cat-card p { font-size: 0.8rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ── How It Works ────────────────────────────────────────────── */
.how-works { max-width: 1160px; margin: 64px auto 0; padding: 0 28px; }
.how-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.how-works__step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px 24px 24px;
  text-align: center;
  box-shadow: var(--shadow-1);
}
.how-works__num {
  position: absolute;
  top: -16px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-2);
}
html[lang="ar"] .how-works__num , html[lang="ur"] .how-works__num { inset-inline-start: 50%; transform: translateX(50%); }
.how-works__icon { font-size: 1.8rem; display: block; margin: 12px 0 12px; }
.how-works__step h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
html[lang="ar"] .how-works__step h3 , html[lang="ur"] .how-works__step h3 { font-family: var(--font-arabic); }
.how-works__step p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq { max-width: 1160px; margin: 64px auto 0; padding: 0 28px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.faq-item--open { border-color: var(--teal-bright); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  text-align: start;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
  padding: 16px 20px;
  cursor: pointer;
}
html[lang="ar"] .faq-item__q , html[lang="ur"] .faq-item__q { font-family: var(--font-arabic); }
.faq-item__chevron {
  flex: none;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--teal-deep);
  line-height: 1;
}
.faq-item__a {
  padding: 0 20px 18px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* ── Offer cards (base style, used inside sidebar) ──────────────── */
.offer-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--coral);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.offer-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.offer-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.offer-card__op { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; color: var(--teal-deep); }
html[lang="ar"] .offer-card__op , html[lang="ur"] .offer-card__op { font-family: var(--font-arabic); }
.offer-card__tag {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--coral);
  background: rgba(217, 83, 79, 0.1);
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  margin-inline-start: auto;
}
.offer-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; line-height: 1.3; }
html[lang="ar"] .offer-card__title , html[lang="ur"] .offer-card__title { font-family: var(--font-arabic); }
.offer-card__desc { font-size: 0.86rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.offers-disclaimer {
  margin: 14px 2px 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.5;
}

/* ── All Plans (renamed Ledger — vertical scroll widget) ────────── */
.ledger, .all-plans { max-width: 1160px; margin: 56px auto 0; padding: 0 28px; }
.ledger__head { margin-bottom: 20px; }
.ledger__head h2 { font-size: 1.5rem; margin-bottom: 6px; }
.ledger__head p { color: var(--ink-soft); margin: 0; }

/* Vertical scroll widget — replaces the old <table> per requirement:
   "result should be in widget or scroll view instead of tabular form". */
.all-plans__scroll {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  background: var(--paper);
  max-height: 520px;
  overflow-y: auto;
}
.all-plans__scroll::-webkit-scrollbar { width: 8px; }
.all-plans__scroll::-webkit-scrollbar-track { background: var(--sand); }
.all-plans__scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.all-plans__scroll::-webkit-scrollbar-thumb:hover { background: var(--teal-bright); }

.plan-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.12s var(--ease);
}
.plan-row:last-child { border-bottom: none; }
.plan-row:hover { background: rgba(15, 95, 95, 0.035); }
.plan-row--top { background: var(--gold-soft); }
.plan-row--top:hover { background: #ecdcb4; }
.plan-row__main { flex: 1; min-width: 0; }
.plan-row__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-row__op { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--teal-deep); }
html[lang="ar"] .plan-row__op , html[lang="ur"] .plan-row__op { font-family: var(--font-arabic); }
.plan-row__plan { font-size: 0.86rem; color: var(--ink); }
.plan-row__specs { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.plan-row__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  white-space: nowrap;
  text-align: end;
}
.plan-row__price span { font-size: 0.7rem; font-weight: 400; color: var(--ink-soft); margin-inline-start: 2px; }
.ledger__empty { text-align: center; color: var(--ink-soft); padding: 30px; }

.tag-est {
  font-size: 0.68rem;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 1px 5px;
  margin-inline-start: 8px;
  border-radius: 10px;
  vertical-align: middle;
}

.op-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.op-mark--logo {
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.op-mark--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  box-sizing: border-box;
}

/* ── Operator directory — logo grid, no descriptions ────────────── */
.operators { max-width: 1160px; margin: 64px auto 0; padding: 0 28px; }
.op-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.op-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.op-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.op-card__logo { margin-bottom: 2px; }
.op-card__name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
html[lang="ar"] .op-card__name , html[lang="ur"] .op-card__name { font-family: var(--font-arabic); }
.op-badge {
  font-size: 0.68rem;
  font-family: var(--font-body);
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 12px;
}
html[lang="ar"] .op-badge , html[lang="ur"] .op-badge { font-family: var(--font-arabic); }
.op-badge--mno { background: #e2ede9; color: var(--teal-deep); }
.op-badge--mvno { background: var(--gold-soft); color: var(--gold); }
.op-card__actions { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; }
.op-card__link {
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--teal-deep);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.op-card__link:hover { background: var(--sand); border-color: var(--teal); }
.op-card__link--coverage {
  background: var(--teal-deep);
  background-image: var(--gradient-accent);
  color: var(--paper);
  border-color: transparent;
}
.op-card__link--coverage:hover { filter: brightness(1.08); }


/* ── Footer ──────────────────────────────────────────────────── */
.foot { max-width: 1160px; margin: 72px auto 0; padding: 28px 28px 36px; border-top: 1px solid var(--line); }
.foot__trademark { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.6; margin: 0 0 18px; text-align: center; }
.foot__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.foot__copyright { color: var(--ink-soft); font-size: 0.84rem; }
.foot__links { display: flex; align-items: center; gap: 10px; }
.foot__links a { color: var(--ink-soft); font-size: 0.84rem; text-decoration: none; }
.foot__links a:hover { color: var(--teal); text-decoration: underline; }
.foot__sep { color: var(--line); font-size: 0.8rem; }

/* ── Back to top ─────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--teal-deep);
  background-image: var(--gradient-accent);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-3);
  z-index: 30;
  animation: back-to-top-in 0.2s var(--ease);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(10, 61, 61, 0.28); }
.back-to-top:active { transform: translateY(0); }
@keyframes back-to-top-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 880px) {
  .back-to-top { bottom: 16px; inset-inline-end: 16px; width: 42px; height: 42px; }
}

/* ── Loading / Error states ─────────────────────────────────── */
.load-state {
  max-width: 640px;
  margin: 100px auto;
  padding: 0 28px;
  text-align: center;
  color: var(--ink-soft);
}
.load-state__spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  border: 3px solid var(--line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: muqarana-spin 0.8s linear infinite;
}
@keyframes muqarana-spin { to { transform: rotate(360deg); } }
.load-state--error { color: var(--coral); }
.load-state--error strong { color: var(--ink); }
.load-state__hint { margin-top: 14px; font-size: 0.86rem; color: var(--ink-soft); }
.load-state__hint code {
  background: var(--sand);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.85em;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1040px) and (min-width: 881px) {
  .op-grid { grid-template-columns: repeat(3, 1fr); }
  .pkg-cats__grid { grid-template-columns: repeat(3, 1fr); }
  .plan-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 880px) {
  #compare-intro, #compare, #offers, #results, #highlights, #ledger,
  #operators, #categories, #how-it-works, #faq, #guide, #methodology {
    scroll-margin-top: 118px;
  }
  /* Interacting with a filter (especially the range sliders) can trigger
     the mobile browser's own "scroll focused element into view" behavior,
     which sometimes leaves the submit button just outside the viewport.
     Pinning it to the bottom of the screen guarantees it's always reachable
     without an extra manual scroll, regardless of where that lands. */
  .matcher__submit {
    position: sticky;
    bottom: 12px;
    z-index: 6;
    box-shadow: 0 6px 20px rgba(10, 61, 61, 0.35);
  }
  .hero__copy { max-width: 100%; }
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero__h1-line { font-size: 1.85rem; }
  .hero__lede { white-space: normal; }
  html[lang="ar"] .hero__h1-line , html[lang="ur"] .hero__h1-line { font-size: 1.6rem; }
  .hero::before { width: 320px; height: 320px; top: -32px; }
  .hero__ctas { flex-direction: column; }
  .plan-card { flex-basis: 82%; }
  .hero__cta-primary, .hero__cta-secondary { width: 100%; text-align: center; }
  .trust-grid__grid { gap: 16px 18px; }
  .workspace__main { width: 100%; }
  .workspace__side {
    position: static !important;
    width: 100%;
    height: auto !important;
    max-height: none;
    margin-top: 20px;
  }
  .matcher { padding: 24px 20px 26px; }
  .matcher__grid { grid-template-columns: 1fr; gap: 0; }
  .foot__bar { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .foot__bar > .foot__sep { display: none; }
  .foot { padding-bottom: 76px; } /* clears the fixed Back-to-top button on mobile */
  .highlight-grid { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .op-grid { grid-template-columns: repeat(2, 1fr); }
  .pkg-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .how-works__grid { grid-template-columns: 1fr; gap: 34px; }
  .topbar { position: relative; }
  .topbar__hamburger { display: flex; }
  .topbar__nav { display: none; }
  .topbar__nav--open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 6px 20px 12px;
    box-shadow: var(--shadow-2);
    z-index: 25;
  }
  .topbar__nav--open a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.98rem;
  }
  .topbar__nav--open a:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
  .pkg-cats__grid { grid-template-columns: 1fr; }
}

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