/* Asaan Filer — mobile-first styles. Colors ONLY via tokens.css vars. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--af-font-body);
  color: var(--af-text);
  background: var(--af-white);
  font-size: 1rem;
  line-height: 1.65;
}
h1, h2, h3 { font-family: var(--af-font-heading); color: var(--af-dark); line-height: 1.25; }
a { color: var(--af-accent); }
a:hover { color: var(--af-accent-dark); }
img { max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; }
.section-alt { background: var(--af-grey-light); }
.section-title { font-size: 1.6rem; text-align: center; margin-bottom: 8px; }
.section-sub { text-align: center; margin-bottom: 36px; }

/* buttons — 44px+ touch targets */
.btn {
  display: inline-block; padding: 14px 26px; min-height: 48px;
  border-radius: var(--af-radius); font-family: var(--af-font-heading);
  font-weight: 600; font-size: 1rem; text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn-primary { background: var(--af-accent); color: var(--af-white); }
.btn-primary:hover { background: var(--af-accent-dark); color: var(--af-white); border-color: var(--af-gold); }
.btn-outline { background: var(--af-white); color: var(--af-primary); border-color: var(--af-primary); }
.btn-outline:hover { border-color: var(--af-gold); color: var(--af-dark); }
.btn-wa { background: transparent; color: var(--af-white); border-color: var(--af-white); }
.btn-wa:hover { color: var(--af-white); border-color: var(--af-gold); }
.success-card .btn-wa { background: var(--af-primary); border-color: var(--af-primary); } /* light card par */
.success-card .btn-wa:hover { border-color: var(--af-gold); }
.btn-block { display: block; width: 100%; }

/* header + hero */
header.site {
  background: var(--af-primary); padding: 14px 0;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; }
.logo {
  display: inline-flex; align-items: center;
  font-family: var(--af-font-heading); font-weight: 700; font-size: 1.15rem;
  color: var(--af-white); text-decoration: none;
}
.logo:hover { color: var(--af-white); }
.logo img { height: 30px; width: auto; display: block; margin-right: 9px; }
.logo .af-dot { color: var(--af-gold); }
.hero { background: var(--af-primary); color: var(--af-white); padding: 56px 0 64px; text-align: center; }
.hero h1 { color: var(--af-white); font-size: 2rem; margin-bottom: 14px; }
.hero h1 .gold-line { display: block; border-bottom: 4px solid var(--af-gold); width: 88px; margin: 14px auto 0; }
.hero p { max-width: 34rem; margin: 0 auto 28px; color: var(--af-grey-light); }
.hero .cta-row { display: flex; flex-direction: column; gap: 12px; max-width: 20rem; margin: 0 auto; }
.hero-points { font-size: .88rem; color: var(--af-grey-light); margin: 22px auto 0; max-width: 34rem; }
.hero-points .sep { color: var(--af-gold); padding: 0 6px; }

/* steps */
.steps { display: grid; gap: 18px; }
.step { background: var(--af-white); border: 1px solid var(--af-grey-border); border-radius: var(--af-radius); padding: 22px; box-shadow: var(--af-shadow); }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 12px;
  background: var(--af-accent); color: var(--af-white);
  font-family: var(--af-font-number); font-weight: 700; font-size: 1.1rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.steps-note { text-align: center; margin-top: 26px; font-weight: 600; color: var(--af-primary); }

/* pricing */
.price-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.price { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--af-white); border-radius: var(--af-radius); overflow: hidden; box-shadow: var(--af-shadow); }
table.price th, table.price td { padding: 14px 12px; text-align: center; border-bottom: 1px solid var(--af-grey-border); }
table.price thead th { background: var(--af-primary); color: var(--af-white); font-family: var(--af-font-heading); font-size: .9rem; }
table.price td.tier-name { text-align: left; font-weight: 600; color: var(--af-dark); font-size: .92rem; max-width: 220px; }
table.price td.amount { font-family: var(--af-font-number); font-weight: 700; color: var(--af-dark); font-size: 1.05rem; white-space: nowrap; }
.addons { margin-top: 26px; display: grid; gap: 8px; }
.addon { display: flex; justify-content: space-between; gap: 12px; background: var(--af-white); border: 1px solid var(--af-grey-border); border-radius: var(--af-radius); padding: 12px 16px; }
.addon .amount { font-family: var(--af-font-number); font-weight: 700; color: var(--af-dark); white-space: nowrap; }
.no-hidden-fee { text-align: center; margin-top: 24px; font-weight: 700; color: var(--af-primary); border-top: 3px solid var(--af-gold); display: table; padding-top: 14px; margin-left: auto; margin-right: auto; }

/* trust */
.trust-grid { display: grid; gap: 16px; }
.trust { background: var(--af-white); border-left: 4px solid var(--af-gold); border-radius: var(--af-radius); padding: 18px 20px; box-shadow: var(--af-shadow); }
.trust h3 { font-size: 1rem; margin-bottom: 4px; }

/* faq */
.faq details { background: var(--af-white); border: 1px solid var(--af-grey-border); border-radius: var(--af-radius); margin-bottom: 10px; padding: 0 18px; }
.faq summary { font-family: var(--af-font-heading); font-weight: 600; color: var(--af-dark); cursor: pointer; padding: 15px 0; list-style-position: inside; }
.faq details p { padding: 0 0 16px; }

/* CSP-safe utilities — inline style attributes render nahi hote (style-src 'self') */
.text-center { text-align: center; }
.hidden { display: none; }
.mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; } .mt-20 { margin-top: 20px; }
.mb-4 { margin-bottom: 4px; } .mb-10 { margin-bottom: 10px; }
.mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; }
.text-left { text-align: left; }
.gap-16 { margin: 16px 0; } .gap-14-24 { margin: 14px 0 24px; }
.policy-wrap { max-width: 720px; }
.policy-h3 { margin: 20px 0 8px; }
.mock-card { border: 3px dashed var(--af-orange); }
.small { font-size: .9rem; } .smaller { font-size: .85rem; }
.strong-dark { color: var(--af-dark); }
.num-font { font-family: var(--af-font-number); font-weight: 700; }
.card-box { border: 1px solid var(--af-grey-border); border-radius: var(--af-radius); padding: 14px 16px; margin-top: 10px; text-align: left; }
.divider-top { border-top: 1px solid var(--af-grey-border); margin-top: 14px; padding-top: 14px; }
.card-title-sm { font-size: 1.3rem; }
.narrow-wrap { max-width: 32rem; }
.dashed-box { border: 1px dashed var(--af-grey-border); border-radius: var(--af-radius); padding: 14px; text-align: center; font-size: .92rem; }
.file-input { padding: 10px; border: 1.5px dashed var(--af-grey-border); border-radius: var(--af-radius); width: 100%; }
.btn-lg { font-size: 1.1rem; }
.btn-header { padding: 9px 16px; min-height: 0; }
.price-hero-md { font-family: var(--af-font-number); font-size: 2.4rem; font-weight: 700; color: var(--af-dark); text-align: center; margin: 8px 0; }
.price-hero-sm { font-family: var(--af-font-number); font-size: 1.6rem; font-weight: 700; color: var(--af-dark); text-align: center; }

/* intake — progress bar */
.progress { margin-bottom: 18px; }
.progress-label {
  text-align: center; font-family: var(--af-font-number); font-weight: 700;
  color: var(--af-primary); font-size: .85rem; margin-bottom: 8px;
}
.progress-track { height: 6px; background: var(--af-grey-light); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--af-accent); border-radius: 3px; transition: width .3s ease; }
/* CSP: width inline nahi de sakte — 10% steps ki classes */
.pw-10 { width: 10%; } .pw-20 { width: 20%; } .pw-30 { width: 30%; } .pw-40 { width: 40%; }
.pw-50 { width: 50%; } .pw-60 { width: 60%; } .pw-70 { width: 70%; } .pw-80 { width: 80%; }
.pw-90 { width: 90%; } .pw-100 { width: 100%; }

/* intake — tappable option cards (radios/checkboxes).
   Selectors carry .lead-card too so they beat the generic .lead-card label/input rules. */
.option-list { display: grid; gap: 10px; margin-top: 14px; }
.option-list-2 { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.option-card, .lead-card label.option-card {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--af-grey-border); border-radius: var(--af-radius);
  padding: 14px 16px; margin: 0; cursor: pointer; background: var(--af-white);
  color: var(--af-dark); font-weight: 500; font-size: 1rem; line-height: 1.45;
  transition: border-color .15s ease, background .15s ease;
}
.option-card:hover { border-color: var(--af-accent); }
.option-card input, .lead-card .option-card input {
  width: 20px; height: 20px; min-height: 0; margin-top: 1px; padding: 0;
  flex-shrink: 0; accent-color: var(--af-accent);
}
.option-card:has(input:checked) { border-color: var(--af-accent); background: var(--af-accent-tint); }
.option-card span { flex: 1; }
.option-card small { display: block; font-weight: 400; color: var(--af-text); font-size: .85rem; }

/* fee / quote */
.fee-amount {
  font-family: var(--af-font-number); font-size: 3rem; font-weight: 700;
  color: var(--af-dark); margin: 8px 0; line-height: 1.1;
}
.fee-breakdown {
  text-align: left; border: 1px solid var(--af-grey-border);
  border-radius: var(--af-radius); padding: 14px 16px; margin-top: 10px; font-size: .92rem;
}
.fee-breakdown .row { display: flex; justify-content: space-between; gap: 12px; }
.fee-breakdown .row + .row { margin-top: 6px; }
.fee-breakdown strong { font-family: var(--af-font-number); color: var(--af-dark); white-space: nowrap; }

/* reusable notice boxes */
.notice { background: var(--af-grey-light); border-radius: var(--af-radius); padding: 12px 14px; font-size: .9rem; }
.notice-warn { background: var(--af-white); border: 2px solid var(--af-orange); }

/* otp */
.otp-input {
  text-align: center; font-family: var(--af-font-number);
  font-size: 1.6rem; letter-spacing: .4em; font-weight: 700;
}

.steps-note-sm { font-weight: 600; color: var(--af-primary); }

/* welcome mini steps */
.mini-steps { text-align: left; margin: 18px 0; display: grid; gap: 4px; }
.mini-step { display: flex; gap: 12px; align-items: center; padding: 8px 0; color: var(--af-dark); font-weight: 500; }
.mini-step .num-sm {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--af-accent); color: var(--af-white);
  font-family: var(--af-font-number); font-weight: 700; font-size: .9rem;
}

/* form */
.lead-card { background: var(--af-white); border-radius: var(--af-radius); box-shadow: var(--af-shadow); padding: 26px 22px; max-width: 30rem; margin: 0 auto; }
.lead-card label { display: block; font-weight: 600; color: var(--af-dark); margin: 14px 0 6px; font-size: .95rem; }
.lead-card input {
  width: 100%; padding: 13px 14px; min-height: 48px; font-size: 1rem;
  border: 1.5px solid var(--af-grey-border); border-radius: var(--af-radius);
  font-family: var(--af-font-body); color: var(--af-dark);
}
.lead-card input:focus-visible { border-color: var(--af-accent); outline: 2px solid var(--af-accent); outline-offset: 2px; }
.lead-card select {
  width: 100%; padding: 13px 14px; min-height: 48px; font-size: 1rem;
  border: 1.5px solid var(--af-grey-border); border-radius: var(--af-radius);
  font-family: var(--af-font-body); color: var(--af-dark); background: var(--af-white);
}
.lead-card select:focus-visible { border-color: var(--af-accent); outline: 2px solid var(--af-accent); outline-offset: 2px; }
.field-error { color: var(--af-accent-dark); font-size: .88rem; margin-top: 4px; font-weight: 600; }
.lead-card .btn { margin-top: 20px; }
.form-note { font-size: .85rem; margin-top: 14px; text-align: center; }
.success-card { text-align: center; }
.success-card .tick {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--af-green); display: flex; align-items: center; justify-content: center;
}
.success-card .tick svg { width: 34px; height: 34px; }

/* footer */
footer.site { background: var(--af-primary); color: var(--af-grey-light); padding: 32px 0; text-align: center; font-size: .9rem; }
footer.site a { color: var(--af-white); }
footer.site a:hover { color: var(--af-white); border-bottom: 2px solid var(--af-gold); }

/* admin */
.admin-body { padding: 20px; font-family: var(--af-font-body); }
.admin-body h1 { font-size: 1.3rem; margin-bottom: 14px; }
.admin-table-scroll { overflow-x: auto; }
table.admin { border-collapse: collapse; width: 100%; min-width: 720px; background: var(--af-white); }
table.admin th, table.admin td { border: 1px solid var(--af-grey-border); padding: 9px 10px; font-size: .9rem; text-align: left; }
table.admin th { background: var(--af-grey-light); color: var(--af-dark); }
tr.contacted-yes td { background: var(--af-grey-light); color: var(--af-text); }
.chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .8rem; font-weight: 700; }
/* per spec §2: green/orange never carry text — chips use dark text + colored border */
.chip-done { background: var(--af-white); border: 1.5px solid var(--af-green); color: var(--af-dark); }
.chip-todo { background: var(--af-white); border: 1.5px solid var(--af-orange); color: var(--af-dark); }
.conflict-banner { background: var(--af-gold); color: var(--af-black); padding: 10px 14px; border-radius: var(--af-radius); font-weight: 700; display: inline-block; margin-bottom: 14px; }
.admin-actions { margin-bottom: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ≥720px */
@media (min-width: 720px) {
  .hero h1 { font-size: 2.7rem; }
  .hero .cta-row { flex-direction: row; max-width: none; justify-content: center; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .addons { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: 2rem; }
}

/* Phase 7 — status tracker (CSP-safe) */
.track { border: 1px solid var(--af-grey-border); border-radius: var(--af-radius); padding: 14px 16px; text-align: left; }
.track-step { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.track-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--af-font-number); font-weight: 700; font-size: .85rem;
  border: 2px solid var(--af-grey-border); color: var(--af-text); background: var(--af-white);
}
.track-done .track-dot { background: var(--af-green); border-color: var(--af-green); color: var(--af-white); }
.track-current .track-dot { border-color: var(--af-primary); color: var(--af-primary); }
.track-done .track-label { color: var(--af-dark); }
.track-current .track-label { color: var(--af-primary); font-weight: 700; }
.track-pending .track-label { color: var(--af-text); }

/* Feedback #3 (2026-08-01) — button press feedback */
.btn, .chip, button { transition: transform .06s ease, filter .06s ease; }
.btn:active, .chip:active, button:active { transform: scale(.96); filter: brightness(.88); }

/* Staff console shell (2026-08-01 best-tool run) — CSP-safe, koi inline nahi */
.staff-nav {
  background: var(--af-primary); padding: 10px 16px;
  display: flex; gap: 4px 14px; align-items: center; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10;
}
.staff-nav-logo {
  font-family: var(--af-font-heading); font-weight: 700; font-size: 1rem;
  color: var(--af-white); text-decoration: none; margin-right: 8px;
}
.staff-nav-link {
  color: var(--af-white); text-decoration: none; font-weight: 600;
  font-size: .92rem; padding: 5px 8px; border-radius: 6px;
}
.staff-nav-link:hover { background: rgba(255,255,255,.14); color: var(--af-white); }
.staff-nav-user { margin-left: auto; }
.staff-nav-user .chip { cursor: pointer; }
.admin-body h1 { margin-bottom: 6px; }
.admin td small a { color: inherit; }
.stage-age { font-size: .78rem; color: var(--af-text); white-space: nowrap; }
.stage-age-hot { color: #B7791F; font-weight: 700; }
.search-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.search-row input { flex: 1; min-width: 200px; padding: 9px 12px; border: 1.5px solid var(--af-grey-border); border-radius: var(--af-radius); }
.search-row button { cursor: pointer; }

/* Client floating WhatsApp help (CSP-safe) */
.wa-fab {
  position: fixed; right: 14px; bottom: 14px; z-index: 20;
  background: #25D366; color: #fff; text-decoration: none;
  border-radius: 24px; padding: 10px 16px; font-weight: 700; font-size: .9rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.wa-fab:hover { color: #fff; filter: brightness(1.05); }
/* Icon ke liye CSS nahi thi — svg apni asal jasamat par phail jata tha aur
   button bad-shakal ho jata. (Yeh markup doosri session ne badla tha.) */
.wa-fab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.wa-fab svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
/* site.js scroll par .show lagata hai. Client pages par JS nahi chalti, is liye
   default nazar aana chahiye — warna wahan button gayab ho jata. */
.wa-fab { opacity: 1; visibility: visible; }

/* Landing FAQ accordion — <details>, zero JS */
.faq details { border: 1px solid var(--af-grey-border); border-radius: var(--af-radius); padding: 12px 16px; margin-top: 10px; background: var(--af-white); }
.faq summary { font-weight: 700; color: var(--af-dark); cursor: pointer; }
.faq details[open] summary { margin-bottom: 8px; }

/* Receipt (print-friendly) */
.receipt-box { max-width: 480px; margin: 0 auto; border: 1px solid var(--af-grey-border); border-radius: var(--af-radius); padding: 22px; }
.receipt-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--af-grey-border); }
.receipt-row:last-child { border-bottom: none; }
@media print { .site, .wa-fab, .no-print { display: none !important; } }
.inline-form { display: inline-block; margin: 2px 4px 2px 0; }

/* Service picker (2026-08-01) — grouped, scannable, sticky CTA (mobile-first) */
.svc-picker { padding-bottom: 8px; }
.svc-group { margin-top: 22px; }
.svc-group:first-of-type { margin-top: 10px; }
.svc-group-title {
  font-family: var(--af-font-heading); font-size: 1rem; font-weight: 700;
  color: var(--af-dark); margin-bottom: 2px;
}
.svc-group-note { font-size: .82rem; color: var(--af-text); margin-bottom: 10px; }
.svc-card > span { display: block; }
.option-card .svc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex: 1 1 100%; }
.option-card .svc-head strong { flex: 1 1 auto; min-width: 0; }
.option-card .svc-fee { flex: 0 0 auto; }
.svc-head strong { line-height: 1.3; }
.svc-fee { white-space: nowrap; font-size: .9rem; color: var(--af-primary); font-weight: 700; }
.svc-card small { display: block; margin-top: 4px; color: var(--af-text); font-size: .82rem; line-height: 1.45; }
.svc-cta {
  position: sticky; bottom: 0; background: var(--af-white);
  padding: 12px 0 4px; margin-top: 20px; z-index: 21; /* wa-fab (19/20) ke upar */
  box-shadow: 0 -8px 16px -8px rgba(0,0,0,.12);
}
/* Picker par sticky CTA hi primary hai — FAB is page par nahi (one primary CTA rule) */
@media (min-width: 768px) { .svc-cta { position: static; box-shadow: none; } }

/* PWA install prompt — discreet, sirf tab dikhta hai jab browser allow kare */
.pwa-install {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px;
  z-index: 19; width: auto; padding: 10px 18px; font-size: .9rem;
  background: var(--af-white); box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
@media (min-width: 768px) { .pwa-install { left: 14px; transform: none; } }

/* landing: baqi services ki fee list (catalogue se banti hai) */
.svc-fees { margin-top: 32px; }
.svc-fees-title { font-size: 1.15rem; font-weight: 700; text-align: center; margin-bottom: 4px; }
.svc-fees-group {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--af-muted); margin: 24px 0 8px;
}
.svc-fees-din { display: block; font-weight: 400; color: var(--af-muted); font-size: .82rem; margin-top: 2px; }

/* ---------- client portal ---------- */
/* bottom nav — safe-area (iPhone gesture bar) ka khayal, 44px+ touch target */
.has-pnav { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.pnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: #fff; border-top: 1px solid var(--af-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pnav-item {
  flex: 1; min-height: 56px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--af-muted); font-size: .7rem; font-weight: 600;
  padding: 6px 2px; transition: color .15s ease;
}
.pnav-item svg { width: 22px; height: 22px; fill: currentColor; }
.pnav-item.is-on { color: var(--af-accent); }
.pnav-item:active { background: var(--af-accent-tint); }

.pgroup-title {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--af-muted); margin: 24px 0 8px;
}
.pcard { padding: 0; overflow: hidden; }
.pcard-pad { margin-bottom: 14px; }

/* file / payment row */
.frow {
  display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: 12px 16px; border-bottom: 1px solid var(--af-line);
  text-decoration: none; color: inherit;
}
.frow:last-child { border-bottom: 0; }
.frow:active { background: var(--af-accent-tint); }
.frow-static:active { background: transparent; }
.frow-main { flex: 1; min-width: 0; display: block; }
.frow-main strong { display: block; font-size: .95rem; }
.frow-main small { display: block; color: var(--af-muted); font-size: .8rem; margin-top: 2px; }
.frow-go { flex: 0 0 auto; color: var(--af-accent); }
.frow-go svg { width: 22px; height: 22px; display: block; }

.ptotal { display: flex; align-items: baseline; justify-content: space-between; }
.ptotal strong { font-size: 1.5rem; color: var(--af-accent); }

/* status pill — rang ke saath lafz bhi, sirf rang par bharosa nahi */
.pill {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; white-space: nowrap;
}
.pill-ok   { background: #E7F6EC; color: #1B7F3B; }
.pill-warn { background: #FEF3C7; color: #92400E; }
.pill-bad  { background: #FEE2E2; color: #991B1B; }
.pill-lock { background: var(--af-gray-light, #F5F7FA); color: var(--af-muted); }

.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-per { font-size: .85rem; font-weight: 400; color: var(--af-muted); }
.plan-facts { margin: 14px 0 0; }
.plan-facts > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--af-line); }
.plan-facts > div:last-child { border-bottom: 0; }
.plan-facts dt { color: var(--af-muted); font-size: .85rem; }
.plan-facts dd { margin: 0; font-weight: 600; font-size: .85rem; }

.btn-quiet {
  background: #F5F7FA; color: #4A5568;
  border: 1.5px solid #CBD5E0; font-weight: 600;
}
.btn-quiet:active { background: #E2E8F0; border-color: #A0AEC0; }

/* staff: client ne plan band karne ko kaha — sab se pehle isse dekho */
.chip-hot { background: #FEE2E2; color: #991B1B; }

/* sirf native app ke andar dikhne wali cheezein (native.js .is-native lagata hai) */
.native-only { display: none; }
.is-native .native-only { display: block; }

/* ---------- blog (SEO) ---------- */
.post-wrap { padding: 24px 0 40px; }
.crumbs { font-size: .82rem; color: var(--af-muted); margin-bottom: 12px; }
.crumbs a { color: var(--af-muted); }
.post-title { font-size: 1.7rem; line-height: 1.25; margin: 0 0 8px; }
.post-meta { color: var(--af-muted); font-size: .85rem; margin: 0 0 22px; }
.post-body { font-size: 1.02rem; line-height: 1.75; }
.post-body h2, .post-h2 { font-size: 1.25rem; line-height: 1.3; margin: 30px 0 10px; }
.post-body h3 { font-size: 1.05rem; margin: 22px 0 8px; }
.post-body p { margin: 0 0 14px; }
.post-body ul, .post-body ol { margin: 0 0 14px; padding-left: 20px; }
.post-body li { margin-bottom: 7px; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .92rem; }
.post-body th, .post-body td { border: 1px solid var(--af-line); padding: 8px 10px; text-align: left; }
.post-body th { background: #F5F7FA; font-weight: 600; }
/* table mobile par page ko chaura na kare */
.post-body { overflow-x: auto; }

.faq-list { margin: 10px 0 0; }
.faq-item { border-bottom: 1px solid var(--af-line); padding: 12px 0; }
.faq-item summary { font-weight: 600; cursor: pointer; min-height: 28px; }
.faq-item p { font-size: .95rem; margin: 8px 0 0; color: var(--af-text); line-height: 1.65; }

.post-cta {
  margin: 34px 0; padding: 22px; border-radius: 12px;
  background: var(--af-accent-tint); text-align: center;
}
.post-cta h2 { margin: 0 0 6px; font-size: 1.15rem; }
.post-cta p { margin: 0 0 14px; color: var(--af-text); }
.post-related { padding-left: 18px; }
.post-related li { margin-bottom: 8px; }
.post-disclaimer { margin-top: 28px; font-size: .85rem; color: var(--af-muted); }

.post-list { display: grid; gap: 10px; }
.post-card {
  display: block; padding: 16px; border: 1px solid var(--af-line);
  border-radius: 12px; background: #fff; text-decoration: none; color: inherit;
}
.post-card strong { display: block; font-size: 1rem; line-height: 1.35; margin-bottom: 5px; }
.post-card small { display: block; color: var(--af-muted); font-size: .86rem; line-height: 1.5; }
.post-card:active { border-color: var(--af-accent); background: var(--af-accent-tint); }

.blog-actions { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px; flex-wrap: wrap; }
.code-area { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.preview-box { border: 1px solid var(--af-line); border-radius: 10px; padding: 16px; background: #fff; }

/* fee breakdown — client ko dikhta hai hamari fee kitni, sarkari kitni */
.fee-split { margin: 12px 0 8px; }
.fee-split > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--af-line); font-size: .88rem;
}
.fee-split > div:last-child { border-bottom: 0; }
.fee-split span:first-child { color: var(--af-muted); }
.fee-split span:last-child { font-weight: 600; white-space: nowrap; }
/* picker card par sarkari fee ka ishara */
.svc-govt { display: block; font-size: .78rem; color: var(--af-muted); margin-top: 2px; }

.refer-list { padding-left: 18px; line-height: 1.7; }
.refer-list li { margin-bottom: 10px; }
.opt { font-weight: 400; color: var(--af-muted); }
.wrap-cell { max-width: 320px; white-space: normal; font-size: .85rem; }

/* blog: machine-jaisi likhai ke ishare */
.robot-flags { margin: 8px 0 0; padding-left: 18px; }
.robot-flags li { margin-bottom: 5px; font-size: .88rem; }


/* ---------- accessibility + performance (web guidelines audit, 2026-08-02) ---------- */

/* Keyboard se chalne walon ko dikhna chahiye woh kahan hain. Mouse se click par
   ring nahi aati (:focus-visible), sirf keyboard par. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--af-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Jis banday ko harkat se takleef hoti hai (motion sickness, migraine, vestibular
   masail) — uske phone ki setting hum par bhi lagni chahiye. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Rakam ke column mein har number ki chaurai barabar ho — warna list scroll
   karte waqt hilti hui lagti hai. */
.amount, .price-hero, .price-hero-md, .price-hero-sm, .num-font,
.fee-split span:last-child, .ptotal strong, .frow-main strong {
  font-variant-numeric: tabular-nums;
}

/* Do baar tap karne par zoom ki 300ms ki der khatam */
a, button, [role="button"], input, select, textarea, summary { touch-action: manipulation; }

/* Heading par link se aayein to woh header ke neeche na chhup jaye */
h1, h2, h3, [id] { scroll-margin-top: 80px; }

/* Keyboard wala banda seedha asal baat par ja sake, poore nav se guzre baghair */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--af-accent); color: #fff; padding: 12px 18px;
  border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* hero ke neeche wale chhote links — CTA se muqabla na karein */
.hero-sub-links { margin-top: 18px; font-size: .875rem; color: var(--af-grey-light); }
.hero-sub-links a { color: #fff; text-decoration: underline; }

/* "jo aap soch rahe hain" — aitraaz pehle hi dur */
.worry-list { margin-top: 6px; }
.worry {
  border: 1px solid var(--af-line); border-radius: 12px;
  background: #fff; margin-bottom: 10px; overflow: hidden;
}
.worry summary {
  padding: 15px 18px; font-weight: 600; cursor: pointer;
  min-height: 44px; display: flex; align-items: center; gap: 10px;
  list-style: none; font-size: .96rem; line-height: 1.4;
}
.worry summary::-webkit-details-marker { display: none; }
.worry summary::after {
  content: "+"; margin-left: auto; font-size: 1.35rem; font-weight: 400;
  color: var(--af-accent); line-height: 1; flex-shrink: 0;
}
.worry[open] summary::after { content: "\2212"; }
.worry[open] summary { border-bottom: 1px solid var(--af-line); }
.worry p { margin: 0; padding: 14px 18px 17px; line-height: 1.7; color: var(--af-text); }


/* ---------- design audit fixes (ui-ux-pro-max, 2026-08-02) ---------- */

/* §6 readable-font-size: 13.6px chhota tha. 14px se neeche body text nahi. */
.form-note, .hero-sub-links, .post-disclaimer, .svc-fees-din, .frow-main small {
  font-size: .875rem;   /* 14px */
}

/* §2 touch-target-size: akele khare links ki tap area 44px honi chahiye.
   Paragraph ke andar wale links par yeh laagu nahi — woh text ka hissa hain. */
.hero-sub-links a, .site-footer a, .crumbs a {
  display: inline-block; padding: 12px 4px; margin: -12px 0;
}

/* §5 whitespace-balance: desktop par hero ke neeche 148px khali para tha.
   Content ke hisaab se padding, fix height nahi. */
@media (min-width: 768px) {
  .hero { padding-top: 56px; padding-bottom: 56px; }
  .hero h1 { font-size: 2.6rem; }
  /* §5 line-length-control: desktop par 60-75 harf per line */
  .hero p { max-width: 62ch; margin-left: auto; margin-right: auto; }
}

/* saboot ki patti — daawe ke saath number */
.proof-bar {
  background: var(--af-gray-light, #F5F7FA);
  border-bottom: 1px solid var(--af-line);
  padding: 20px 0;
}
.proof-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px;
  text-align: center;
}
@media (min-width: 700px) { .proof-grid { grid-template-columns: repeat(4, 1fr); } }
.proof-item strong {
  display: block; font-size: 1.45rem; color: var(--af-accent);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.proof-item span { display: block; font-size: .84rem; color: var(--af-muted); margin-top: 3px; }

/* muqable ki table — hamara sab se mazboot saboot yehi hai */
.vs-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.vs-table th, .vs-table td { padding: 11px 10px; border-bottom: 1px solid var(--af-line); text-align: right; }
.vs-table th:first-child, .vs-table td:first-child { text-align: left; }
.vs-table thead th { font-size: .8rem; color: var(--af-muted); font-weight: 600; }
.vs-table .us { background: var(--af-accent-tint); font-weight: 700; color: var(--af-accent); }
.vs-table thead .us { color: var(--af-accent); }
.vs-table td { font-variant-numeric: tabular-nums; }
.vs-note { font-size: .875rem; color: var(--af-muted); margin-top: 10px; line-height: 1.6; }

/* ---------- site nav (header) ---------- */
.site-bar { display: flex; align-items: center; gap: 16px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav-desk { display: none; }
.nav-desk a {
  color: rgba(255,255,255,.86); text-decoration: none; font-size: .92rem;
  font-weight: 500; padding: 10px 10px; border-radius: 6px; white-space: nowrap;
}
.nav-desk a:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav-desk a.is-on { color: #fff; font-weight: 700; box-shadow: inset 0 -2px 0 var(--af-gold); }

/* "For" dropdown — tiers. Wohi <details> tareeqa jo phone menu use karta hai
   (CSP inline JS rokti hai; details keyboard + screen reader dono se chalta hai). */
.nav-for { position: relative; }
.nav-for summary {
  display: flex; align-items: center; gap: 4px; list-style: none;
  color: rgba(255,255,255,.86); font-size: .92rem; font-weight: 500;
  padding: 10px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.nav-for summary::-webkit-details-marker { display: none; }
.nav-for summary svg { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-for summary:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav-for[open] summary svg { transform: rotate(180deg); }
.nav-for-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 250px; background: var(--af-white); border-radius: var(--af-radius);
  box-shadow: var(--af-shadow); border: 1px solid var(--af-grey-border);
  padding: 8px; display: grid;
}
.nav-for-menu a {
  color: var(--af-dark); font-size: .92rem; font-weight: 500;
  padding: 10px 12px; border-radius: 8px; white-space: nowrap;
}
.nav-for-menu a:hover { background: var(--af-accent-tint); color: var(--af-dark); }
.nav-for-menu a.is-on { font-weight: 700; color: var(--af-accent-dark); }

/* Phone sheet mein "For" group */
.nav-sheet-group { border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 6px; margin-bottom: 6px; }
.nav-sheet-label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--af-gold); padding: 8px 0 2px;
}
.nav-sheet-group a { border-bottom: 0; }

/* Phone ka menu — <details>, koi JS nahi (CSP inline script rokti hai) */
.nav-mob summary {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px; border-radius: 8px;
  color: #fff; font-size: .88rem; font-weight: 600; cursor: pointer;
  list-style: none; border: 1px solid rgba(255,255,255,.28);
}
.nav-mob summary::-webkit-details-marker { display: none; }
.nav-mob summary svg { width: 20px; height: 20px; }
.nav-mob .ic-close { display: none; }
.nav-mob[open] .ic-open { display: none; }
.nav-mob[open] .ic-close { display: block; }

.nav-sheet {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--af-primary); border-top: 1px solid rgba(255,255,255,.14);
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
}
.nav-sheet a {
  display: block; color: rgba(255,255,255,.92); text-decoration: none;
  padding: 14px 4px; min-height: 44px; font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-sheet a.is-on { font-weight: 700; color: var(--af-gold); }
.nav-sheet a:last-child { border-bottom: 0; }
.nav-sheet-cta { margin-top: 12px; text-align: center; }
header.site { position: relative; }

@media (min-width: 900px) {
  .nav-desk { display: flex; align-items: center; gap: 2px; }
  .nav-mob { display: none; }
}
@media (max-width: 899px) { .nav-desk-cta { display: none; } }

/* ---------- footer ---------- */
.foot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px; text-align: left; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
.foot-col h3 {
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0 0 10px; font-weight: 700;
}
.foot-col a {
  display: block; color: rgba(255,255,255,.88); text-decoration: none;
  padding: 8px 0; font-size: .9rem; min-height: 36px;
}
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-legal {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: rgba(255,255,255,.66); line-height: 1.7; text-align: left;
}

/* ---------- testimonials ---------- */
.says-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .says-grid { grid-template-columns: repeat(3, 1fr); } }
.says {
  margin: 0; background: #fff; border: 1px solid var(--af-line);
  border-radius: 14px; padding: 22px 20px; box-shadow: var(--af-shadow);
}
.says-mark { width: 28px; height: 28px; fill: var(--af-accent); opacity: .28; margin-bottom: 8px; }
.says blockquote { margin: 0 0 14px; font-size: .98rem; line-height: 1.7; }
.says figcaption strong { display: block; font-size: .92rem; }
.says figcaption span { display: block; font-size: .84rem; color: var(--af-muted); margin-top: 2px; }

/* ============ VISUAL ROUND — 2026-08-02 ============
   Site saada lag raha tha: sirf text aur flat cards. Ab illustration, icon
   system, gehrai aur rang ki jaan. Rang wohi navy/gold — naql nahi, apna. */

/* ---------- icon system ---------- */
/* Sab icons ek hi zuban mein: 24 grid, 1.75 stroke, currentColor se rang lete
   hain taake har jagah apne aap theek baithein. */
.ico { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.ico-lg { width: 32px; height: 32px; }

/* ---------- hero ---------- */
/* Flat navy ke bajaye halka gradient + peeche roshni ka halqa. Sirf sajawat
   nahi — nazar sar-name aur button par jati hai. */
.hero {
  background:
    radial-gradient(760px 420px at 78% 18%, rgba(26,86,219,.36), transparent 62%),
    radial-gradient(520px 340px at 8% 92%, rgba(251,191,36,.13), transparent 60%),
    linear-gradient(168deg, #3C556F 0%, var(--af-primary) 46%, #2A3B4E 100%);
  position: relative; overflow: hidden;
}
.hero-split { display: grid; gap: 26px; align-items: center; }
.hero-visual { display: flex; justify-content: center; }
.hero-art { width: 100%; max-width: 380px; height: auto; }

@media (min-width: 940px) {
  .hero-split { grid-template-columns: 1.05fr .95fr; gap: 44px; text-align: left; }
  .hero-copy { text-align: left; }
  .hero-copy h1 { font-size: 3rem; line-height: 1.14; }
  .hero-copy h1 .gold-line { margin-left: 0; }
  .hero-copy p { margin-left: 0; }
  .hero-copy .cta-row { margin-left: 0; }
  .hero-art { max-width: 420px; }
}

/* ---------- proof bar ---------- */
.proof-item .proof-ico {
  width: 26px; height: 26px; margin: 0 auto 8px; color: var(--af-accent); opacity: .75;
}

/* ---------- steps ---------- */
/* Number aur icon dono — number tarteeb batata hai, icon kaam batata hai. */
.step { position: relative; padding-top: 26px; }
.step .step-ico {
  width: 34px; height: 34px; color: var(--af-accent); margin-bottom: 12px;
}
.step .num {
  position: absolute; top: 18px; right: 18px;
  width: 30px; height: 30px; font-size: .9rem;
  background: var(--af-accent-tint); color: var(--af-accent);
}

/* ---------- trust cards ---------- */
.trust { position: relative; }
.trust .trust-ico {
  width: 30px; height: 30px; color: var(--af-accent); margin-bottom: 10px;
}

/* ---------- service picker: har card ka apna icon ---------- */
.svc-card { position: relative; }
.svc-card .svc-ico {
  width: 22px; height: 22px; color: var(--af-accent); opacity: .8;
  flex-shrink: 0; margin-top: 2px;
}

/* ---------- section rhythm ---------- */
/* Har section ek jaisi dooriyon par tha — sab barabar, is liye flat lagta tha.
   Ab bari section zyada saans leti hai. */
section { padding: 44px 0; }
@media (min-width: 768px) { section { padding: 68px 0; } }
.hero { padding: 48px 0 52px; }
@media (min-width: 768px) { .hero { padding: 72px 0 76px; } }

/* Halke rang wali section ke oopar barik lakeer — kinara saaf dikhe */
.section-alt { border-top: 1px solid var(--af-line); border-bottom: 1px solid var(--af-line); }

/* ---------- cards mein gehrai ---------- */
/* Ek hi shadow scale — har card apni marzi ki shadow nahi lagata. */
.step, .trust, .says, .post-card, .lead-card {
  box-shadow: 0 1px 2px rgba(15,36,97,.05), 0 4px 14px rgba(15,36,97,.06);
}
.step:hover, .trust:hover, .post-card:hover {
  box-shadow: 0 2px 4px rgba(15,36,97,.07), 0 10px 26px rgba(15,36,97,.11);
  transform: translateY(-2px);
}
.step, .trust, .post-card {
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* ---------- worries: icon ke saath ---------- */
.worry summary::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--af-accent); opacity: .45; flex-shrink: 0;
}
.worry[open] summary::before { opacity: 1; }

/* ---------- muqable ki table ---------- */
.vs-table .us { position: relative; }
.vs-table tbody .us::before {
  content: ""; position: absolute; inset: 0; border-left: 3px solid var(--af-accent);
  pointer-events: none;
}

/* Jise harkat se takleef ho, us ke liye sab thehra hua */
@media (prefers-reduced-motion: reduce) {
  .step:hover, .trust:hover, .post-card:hover { transform: none; }
}

/* ---------- WhatsApp chat (staff) ---------- */
.chat-box {
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
  background: #F5F7FA; border: 1px solid var(--af-line); border-radius: 12px;
  padding: 14px; margin-bottom: 14px;
}
.chat-empty { text-align: center; color: var(--af-muted); margin: 20px 0; }
.bub {
  max-width: 78%; padding: 10px 13px; border-radius: 14px;
  margin-bottom: 10px; font-size: .93rem; line-height: 1.6; white-space: pre-wrap;
  word-break: break-word;
}
.bub-in  { background: #fff; border: 1px solid var(--af-line); border-bottom-left-radius: 4px; }
.bub-out { background: #DCF8C6; margin-left: auto; border-bottom-right-radius: 4px; }
.bub-meta { display: block; margin-top: 5px; font-size: .72rem; color: #6B7280; }

.win-note { padding: 11px 14px; border-radius: 10px; font-size: .88rem; line-height: 1.65; }
.win-ok   { background: #E7F6EC; color: #1B5E32; }
.win-shut { background: #FEF3C7; color: #78350F; }

/* ---------- Landing motion & finishing (site.js ke saath) ---------- */
html { scroll-padding-top: 76px; } /* sticky header anchors na dhake */
header.site { position: sticky; top: 0; z-index: 60; transition: box-shadow .2s ease; }
header.site.scrolled { box-shadow: 0 4px 18px rgba(9, 24, 80, .28); }

/* Hidden state SIRF .js-anim ke neeche — no-JS ya IO fail par sab kuch dikhta hai.
   site.js 3 second ki safety bhi rakhta hai. */
.js-anim .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.js-anim .reveal.in { opacity: 1; transform: none; }
.js-anim .reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js-anim .reveal-stagger.in > * { opacity: 1; transform: none; }

.step, .trust, .says, .addon {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.step:hover, .trust:hover, .says:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(22, 22, 22, .13);
}
.addon:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(22, 22, 22, .10); }

.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--af-wa); color: var(--af-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(22, 22, 22, .25);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .15s ease;
}
.wa-fab.show { opacity: 1; transform: none; pointer-events: auto; }
/* Portal ke safhon par neeche bottom nav hota hai — FAB us par chadh kar
   "Meri Info" ko dhaanp leta tha. Mobile par usay upar khiska dete hain;
   desktop par nav bayein hota hai, is liye wahan zaroorat nahi. */
.has-pnav .wa-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .has-pnav .wa-fab { bottom: 18px; } }
.wa-fab:hover { background: var(--af-wa-dark); color: var(--af-white); }
.wa-fab svg { width: 30px; height: 30px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .wa-fab { transition: none; }
  .step:hover, .trust:hover, .says:hover, .addon:hover { transform: none; }
}

/* ---------- team portal ---------- */
.row-late td { background: #FFF7F7; }
.mini-num { width: 68px; display: inline-block; margin: 0 6px 0 0; padding: 6px 8px; }
.assign-bar {
  display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--af-accent-tint);
  border-radius: 10px; margin-bottom: 12px;
}
.assign-bar label { margin: 0 0 4px; font-size: .82rem; }
.assign-bar select { margin: 0; min-width: 200px; }
.report-days { display: flex; gap: 6px; margin-bottom: 14px; }
.report-days a {
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: .86rem; background: #F5F7FA; color: var(--af-muted); font-weight: 600;
}
.report-days a.is-on { background: var(--af-accent); color: #fff; }
/* Screen reader ke liye label — nazar se chhupa magar mojood */
.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;
}

/* ---------- Client-experience round (CX, 2026-08-02) ---------- */
/* CX-2: bank transfer concierge */
.copy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.copy-row p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.btn-copy { padding: 6px 14px; font-size: .82rem; flex: 0 0 auto; margin: 0; }
.pay-steps { margin: 0 0 4px; padding-left: 20px; }
.pay-steps li { margin-bottom: 8px; line-height: 1.65; font-size: .95rem; }

/* CX-4: celebration */
.celebrate-card { text-align: center; padding: 10px 0 4px; }
.celebrate-emoji { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: 8px; }
.share-row { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.btn-wa-share { background: var(--af-wa); color: var(--af-white); border: none; }
.btn-wa-share:hover { background: var(--af-wa-dark); color: var(--af-white); }

/* CX-5: photo tip */
.tip-box {
  background: var(--af-accent-tint); border-radius: 10px;
  padding: 11px 14px; font-size: .88rem; line-height: 1.65; margin-top: 12px;
}

/* ---------- "Bold" landing (Sample D) — sab classes d- prefix se ---------- */
.d-hero { display: grid; grid-template-columns: 1fr; border-radius: 22px; overflow: hidden; margin: 22px auto 0; max-width: 1160px; }
.d-hero-left { background: linear-gradient(160deg, var(--af-hero-1), var(--af-hero-2)); color: var(--af-white); padding: 44px 28px; display: flex; flex-direction: column; justify-content: center; }
.d-hero-left h1 { font-family: var(--af-font-heading); font-weight: 800; text-transform: uppercase; color: var(--af-white); font-size: 1.9rem; line-height: 1.12; }
.d-hero-left h1 .g { color: var(--af-gold); }
.d-hero-left p { margin: 16px 0 24px; color: #D7E1EC; max-width: 27rem; }
.d-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-gold { background: var(--af-gold); color: #221A00; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.btn-gold:hover { background: var(--af-gold-light); color: #221A00; }
.btn-ghost-w { border: 2px solid rgba(255,255,255,.55); color: var(--af-white); text-transform: uppercase; letter-spacing: .4px; }
.btn-ghost-w:hover { border-color: var(--af-gold); color: var(--af-white); }
.d-hero-right { background: var(--af-amber); min-height: 260px; }
.d-hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.d-hero-links { margin-top: 16px; font-size: .86rem; color: #AFC1D4; }
.d-hero-links a { color: #D7E1EC; }

.d-title { font-family: var(--af-font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.d-title .hi { color: var(--af-green2); }
.d-title .hi2 { color: var(--af-amber-deep); }

.d-tiles { display: grid; gap: 14px; }
.d-tile { border-radius: 18px; padding: 22px 20px; color: var(--af-white); min-height: 250px; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.d-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(22,22,22,.18); }
.d-tile h3 { font-family: var(--af-font-heading); font-weight: 800; text-transform: uppercase; font-size: 1rem; color: var(--af-white); margin-bottom: 14px; }
.d-tile .tags { display: flex; flex-wrap: wrap; gap: 7px; }
.d-tile .tag { border: 1.5px solid rgba(255,255,255,.65); border-radius: 999px; padding: 4px 11px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.d-tile .foot { margin-top: auto; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.9); padding-top: 16px; }
.d-tile { text-decoration: none; }
.t-navy { background: linear-gradient(165deg, #2E5178, var(--af-navy-deep2)); }
.t-amber { background: linear-gradient(165deg, #F0B23C, var(--af-amber-deep)); }
.t-char { background: linear-gradient(165deg, var(--af-char-2), var(--af-char)); }
.t-green { background: linear-gradient(165deg, #27995A, var(--af-green2-deep)); }

.d-bignum { background: var(--af-ink); border-radius: 22px; text-align: center; padding: 48px 24px; }
.d-bignum .n { font-family: var(--af-font-heading); font-weight: 800; font-size: 4rem; color: var(--af-white); line-height: 1; }
.d-bignum .n span { color: var(--af-gold); }
.d-bignum .l1 { font-family: var(--af-font-heading); font-weight: 700; text-transform: uppercase; color: var(--af-gold); font-size: 1.1rem; margin-top: 10px; }
.d-bignum .l2 { color: #9AA6B4; font-weight: 600; margin-top: 6px; font-size: .9rem; }

.d-fee { display: grid; gap: 30px; align-items: center; }
.d-fee-copy h2 { font-size: 1.7rem; }
.d-fee-copy p { margin: 14px 0 20px; }
.d-sign { background: var(--af-gold); border-radius: 20px; padding: 26px 24px; box-shadow: 0 22px 50px rgba(20,32,46,.18); text-align: center; }
.d-sign .lbl { font-family: var(--af-font-heading); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #6B5300; }
.d-sign .fee { font-family: var(--af-font-number); font-weight: 700; font-size: 2.9rem; color: #14202E; margin: 6px 0; }
.d-sign .row { display: flex; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.55); border-radius: 10px; padding: 10px 14px; font-size: .87rem; font-weight: 700; color: #3A2F00; margin-top: 8px; }
.d-sign .foot { margin-top: 13px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6B5300; }
.btn-dark { background: var(--af-dark); color: var(--af-white); text-transform: uppercase; letter-spacing: .4px; }
.btn-dark:hover { background: var(--af-black); color: var(--af-white); border-color: var(--af-gold); }

.d-duo { display: grid; gap: 16px; }
.d-pcard { border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; color: var(--af-white); min-height: 280px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.d-pcard:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(22,22,22,.2); color: var(--af-white); }
.d-pcard .txt { padding: 26px; display: flex; flex-direction: column; }
.d-pcard h3 { font-family: var(--af-font-heading); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; color: var(--af-white); }
.d-pcard p { margin-top: 10px; font-size: .9rem; color: rgba(255,255,255,.88); }
.d-pcard .go { margin-top: auto; align-self: flex-start; background: rgba(0,0,0,.35); border-radius: 999px; padding: 9px 18px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--af-white); }
.d-pcard img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.p-amber { background: var(--af-amber-deep); }
.p-green { background: var(--af-green2-deep); }

@media (min-width: 760px) {
  .d-hero { grid-template-columns: 1.05fr .95fr; margin: 26px 24px 0; }
  .d-hero { margin-left: auto; margin-right: auto; }
  .d-hero-left { padding: 56px; }
  .d-hero-left h1 { font-size: 2.7rem; }
  .d-tiles { grid-template-columns: repeat(4, 1fr); }
  .d-fee { grid-template-columns: 1fr 1fr; }
  .d-duo { grid-template-columns: 1fr 1fr; }
  .d-bignum .n { font-size: 5.5rem; }
  .d-bignum .l1 { font-size: 1.4rem; }
}
@media (max-width: 759px) {
  .d-hero { margin: 14px 14px 0; grid-template-columns: minmax(0, 1fr); }
  .d-hero-left { min-width: 0; padding: 34px 22px; }
  .d-hero-left p, .d-hero-links { max-width: 100%; overflow-wrap: break-word; }
  .d-hero-cta .btn { padding: 13px 18px; }
  .d-tile { min-height: 0; }
  .d-tile .foot { padding-top: 14px; }
  .d-pcard { grid-template-columns: 1fr; }
  .d-pcard img { max-height: 240px; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bold page hero — andar ke public pages (calculator/ATL/blog/refer) ---------- */
.d-page-hero { background: linear-gradient(160deg, var(--af-hero-1), var(--af-hero-2)); color: var(--af-white); padding: 38px 0 34px; }
.d-page-hero h1 { font-family: var(--af-font-heading); font-weight: 800; text-transform: uppercase; color: var(--af-white); font-size: 1.55rem; line-height: 1.18; }
.d-page-hero h1 .g { color: var(--af-gold); }
.d-page-hero p { color: #D7E1EC; margin-top: 10px; max-width: 40rem; }
@media (min-width: 760px) { .d-page-hero h1 { font-size: 2.1rem; } }

/* ---------- TT-fixes (TurboTax teardown, 2026-08-02) ---------- */
.ack-line {
  text-align: center; font-size: .88rem; color: #1E8A4C;
  background: #E7F6EC; border-radius: 8px; padding: 8px 12px;
  margin: 10px 0 2px; line-height: 1.55;
}
.trust-line { color: var(--af-text); opacity: .92; }
.quote-included {
  list-style: none; margin: 14px auto 0; padding: 0; max-width: 340px; text-align: left;
}
.quote-included li { padding: 4px 0 4px 26px; position: relative; font-size: .93rem; line-height: 1.55; }
.quote-included li::before {
  content: "\2713"; position: absolute; left: 2px; color: var(--af-green); font-weight: 700;
}

/* ---------- Product showcase: "Andar se aisa dikhta hai" (2026-08-02) ---------- */
.shots-row {
  display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.shot-card { flex: 0 0 236px; margin: 0; scroll-snap-align: start; }
.phone-frame {
  border: 6px solid var(--af-dark); border-radius: 26px; overflow: hidden;
  background: var(--af-white); box-shadow: 0 10px 28px rgba(22, 22, 22, .16);
}
.phone-frame img { display: block; width: 100%; height: auto; }
.shot-card figcaption {
  font-size: .85rem; color: var(--af-text); text-align: center;
  margin-top: 10px; line-height: 1.55; padding: 0 4px;
}
@media (min-width: 900px) { .shot-card { flex-basis: 252px; } }

/* ---------- Deadline urgency bar (sales-funnel spec §4, 2026-08-02) ---------- */
.deadline-bar {
  background: var(--af-amber); color: #1c2733; text-align: center;
  padding: 10px 16px; font-size: .95rem; letter-spacing: .01em;
}
.deadline-bar strong { font-weight: 700; }

/* ---------- pipeline: list / board toggle ---------- */
.view-switch { display: inline-flex; gap: 4px; margin: 0 0 14px; background: #EEF1F5; padding: 4px; border-radius: 10px; }
.view-switch a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 7px; text-decoration: none;
  font-size: .87rem; font-weight: 600; color: var(--af-muted); min-height: 38px;
}
.view-switch a.is-on { background: #fff; color: var(--af-accent); box-shadow: 0 1px 3px rgba(15,36,97,.14); }
.view-switch .vs-ico { width: 16px; height: 16px; }

/* Board — har stage ka column. Sirf yeh hissa side mein scroll karta hai,
   poora page nahi (warna phone par page hi tirchha ho jata hai). */
.board {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.bcol {
  flex: 0 0 268px; background: #F4F6F9; border-radius: 12px;
  border: 1px solid var(--af-line); scroll-snap-align: start;
  max-height: 74vh; display: flex; flex-direction: column;
}
.bcol-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  border-bottom: 1px solid var(--af-line); position: sticky; top: 0;
  background: #F4F6F9; border-radius: 12px 12px 0 0; z-index: 1;
}
.bcol-head h2 { font-size: .82rem; margin: 0; line-height: 1.3; font-weight: 700; }
.bcol-n {
  margin-left: auto; font-size: .74rem; font-weight: 700;
  background: #fff; border: 1px solid var(--af-line);
  border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums;
}
/* Rang se pata chale ke kaam kis ka hai — text bhi hai, sirf rang par nahi */
.bcol-ours { border-color: var(--af-accent); }
.bcol-ours .bcol-head { border-bottom-color: var(--af-accent); }
.bcol-ours .bcol-head h2 { color: var(--af-accent); }
.bcol-done { opacity: .72; }

.bcol-body { padding: 10px; overflow-y: auto; display: grid; gap: 8px; }
.bcard {
  display: block; background: #fff; border: 1px solid var(--af-line);
  border-radius: 9px; padding: 11px 12px; text-decoration: none; color: inherit;
  position: relative; transition: border-color .15s ease, box-shadow .15s ease;
}
.bcard:hover { border-color: var(--af-accent); box-shadow: 0 3px 10px rgba(15,36,97,.1); }
.bcard strong { display: block; font-size: .9rem; line-height: 1.35; padding-right: 34px; }
.bcard-meta { display: block; font-size: .77rem; color: var(--af-muted); margin-top: 4px; }
.bcard-age {
  position: absolute; top: 10px; right: 11px; font-size: .72rem;
  color: var(--af-muted); font-variant-numeric: tabular-nums;
}
.bcard-hot { border-left: 3px solid #C0392B; }
.bcard-hot .bcard-age { color: #C0392B; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .bcard { transition: none; } }
.bcol-empty { margin: 6px 2px; font-size: .8rem; color: var(--af-muted); text-align: center; }

/* ============ CLIENT FLOW — DESKTOP (Ali, 2026-08-04) ============
   Masla: 1440px par poora client flow ek 512px ki patli column tha aur dono
   taraf khali jagah — phone ka design bara kar diya gaya tha. Yeh sab
   min-width ke andar hai, is liye phone ka tajurba bilkul waisa hi rehta hai. */

@media (min-width: 900px) {
  /* ---- service picker: ek column ke bajaye do ---- */
  /* 19 services ek patli column mein = behisaab scroll. Do column mein poora
     menu ek nazar mein aa jata hai. */
  .svc-picker { max-width: 940px; }
  .svc-picker .option-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start;
  }
  .svc-picker .svc-card { margin: 0; }
  /* Group ka unwan poori chaurai le — do column ke upar */
  .svc-group-title, .svc-group-note { grid-column: 1 / -1; }

  /* ---- intake ke sawal: pehle se bara, magar parhne layak ---- */
  /* Line 65-75 harf se lambi na ho — warna aankh line ka shuru dhoondti hai. */
  .lead-card { max-width: 640px; }
  .lead-card .option-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Client flow par bhi thori zyada saans */
  main > section { padding: 48px 0; }
}

@media (min-width: 1180px) {
  /* Sab se bare screens par teen column — aur bhi kam scroll */
  .svc-picker { max-width: 1120px; }
  .svc-picker .option-list { grid-template-columns: 1fr 1fr 1fr; }
}

/* Sticky CTA desktop par neeche chipka rehna faaltu hai — content ke saath
   chale, warna screen ka hissa bekaar jata hai. */
@media (min-width: 900px) {
  .sticky-cta { position: static; box-shadow: none; padding: 0; background: none; }
  .sticky-cta .btn { max-width: 20rem; margin: 0 auto; }
}

/* ---------- staff nav — do satah (2026-08-04) ---------- */
/* Pehle 21 link ek qatar mein the aur kuch samajh nahi aata tha. Ab upar 5
   group, neeche sirf usi group ke kaam. */
.snav { background: var(--af-primary); color: #fff; }
.snav-top {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px; max-width: 1400px; margin: 0 auto; flex-wrap: wrap;
}
.snav-logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.snav-groups { display: flex; gap: 4px; flex-wrap: wrap; }
.snav-group {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 8px; min-height: 40px;
  color: rgba(255,255,255,.82); text-decoration: none;
  font-weight: 600; font-size: .92rem;
}
.snav-group:hover { color: #fff; background: rgba(255,255,255,.1); }
.snav-group.is-on { color: var(--af-primary); background: #fff; }
.snav-ico { width: 17px; height: 17px; }
.snav-user { margin-left: auto; }
.snav-user button {
  background: transparent; color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: 7px 14px; font-size: .84rem; cursor: pointer; min-height: 38px;
}
.snav-user button:hover { color: #fff; border-color: rgba(255,255,255,.6); }

/* Doosri satah — khule group ke kaam */
.snav-sub {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 0 20px; max-width: 1400px; margin: 0 auto;
  background: #fff; border-bottom: 1px solid var(--af-line);
}
.snav-sub { position: sticky; top: 0; z-index: 30; }
.snav-link {
  padding: 12px 14px; text-decoration: none; font-size: .9rem; font-weight: 600;
  color: var(--af-muted); border-bottom: 3px solid transparent; min-height: 44px;
  display: inline-flex; align-items: center;
}
.snav-link:hover { color: var(--af-text); }
.snav-link.is-on { color: var(--af-accent); border-bottom-color: var(--af-accent); }

/* ---------- documents: guidance + card list (2026-08-04) ---------- */
/* Guidance pehle, kaam baad mein — client ko pata ho sahi file kaisi hoti hai,
   warna aadhi files wapas maangni parti hain aur do din zaya hote hain. */
.doc-help {
  border: 1px solid var(--af-accent); border-radius: 12px;
  background: var(--af-accent-tint); margin: 14px 0 4px; overflow: hidden;
}
.doc-help summary {
  padding: 13px 16px; font-weight: 700; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; gap: 9px; font-size: .95rem;
  color: var(--af-accent); list-style: none;
}
.doc-help summary::-webkit-details-marker { display: none; }
.doc-help summary::after { content: "\25BE"; margin-left: auto; }
.doc-help[open] summary::after { content: "\25B4"; }
.doc-help-body { padding: 0 16px 16px; }
.doc-do { margin: 0 0 12px; padding-left: 20px; }
.doc-do li { margin-bottom: 7px; line-height: 1.6; font-size: .93rem; }
.doc-help-note { margin: 0; font-size: .88rem; line-height: 1.8; color: var(--af-text); }

.doc-list { display: grid; gap: 12px; }
.doc-card {
  border: 1px solid var(--af-line); border-left: 4px solid var(--af-line);
  border-radius: 12px; padding: 15px 16px; background: #fff;
}
.doc-card.is-done { border-left-color: var(--af-green2, #27AE60); background: #FAFDFB; }
.doc-head { display: flex; align-items: flex-start; gap: 11px; }
.doc-num {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--af-accent-tint); color: var(--af-accent);
  font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.is-done .doc-num { background: var(--af-green2, #27AE60); color: #fff; }
.doc-title { display: block; }
.doc-title strong { display: block; font-size: .98rem; line-height: 1.35; }
.doc-state { display: block; font-size: .78rem; color: var(--af-muted); margin-top: 2px; }
.is-done .doc-state { color: var(--af-green2, #27AE60); font-weight: 600; }
.doc-where {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 10px 0 0; font-size: .87rem; color: var(--af-muted); line-height: 1.6;
}
.doc-ico { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; opacity: .7; }

/* Desktop: documents bhi do column — 8-10 document ek nazar mein */
@media (min-width: 900px) {
  .doc-list { grid-template-columns: 1fr 1fr; align-items: start; }
  .doc-help, .doc-list { max-width: none; }
  .narrow-wrap:has(.doc-list) { max-width: 900px; }
}

/* ============================================================
   Intake UX — Ali/Usama team feedback, 2026-08-07
   Back bar upar, floating CTA neeche, cart ka fee breakup.
   ============================================================ */

/* Har intake page ke upar wapas jane ka raasta. Pehle sirf page ke
   neeche link tha — team ko har page par upar chahiye tha. */
.intake-bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--af-white);
  border-bottom: 1px solid var(--af-grey-border);
}
.intake-bar .wrap { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.intake-back {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--af-primary);
  background: var(--af-grey-light); text-decoration: none;
}
.intake-back:hover { background: var(--af-accent-tint); }
.intake-back svg { width: 20px; height: 20px; }
.intake-bar-title { font-weight: 700; color: var(--af-dark); font-size: .98rem; }

/* Floating "Aage Barhein" — team ko har baar scroll kar ke neeche
   jana parta tha. Ab hamesha screen par. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--af-white);
  border-top: 1px solid var(--af-grey-border);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
}
.sticky-cta .wrap { max-width: 560px; }
.sticky-cta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .9rem; font-weight: 600; color: var(--af-text); margin-bottom: 9px;
}
.sticky-cta-row strong { font-size: 1.05rem; color: var(--af-dark); }
/* CTA ke neeche content chhup na jaye. Padding body par — footer har page par
   <section> ke andar nahi hota, is liye section-wali padding usay bacha nahi
   pati thi aur aakhri links bar ke peeche chale jate the. */
body.has-sticky-cta { padding-bottom: 220px; }
@media (min-width: 700px) { body.has-sticky-cta { padding-bottom: 170px; } }
body.has-sticky-cta .wa-fab { bottom: 116px; }

/* Cart ka per-service breakup */
.cart-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
/* Raqam kabhi do line mein na tootay — 'Rs' upar aur '12,000' neeche bura lagta hai */
.cart-line strong:last-child, .receipt-row .num-font { white-space: nowrap; }
.cart-line + .receipt-row { border-top: 1px solid var(--af-grey-border); margin-top: 8px; padding-top: 8px; }
.cart-total-box { background: var(--af-grey-light); }
.chip-govt { background: #FFF4E5; color: #A55A00; font-size: .72rem; padding: 2px 8px; }
.note-box { border-color: var(--af-sky); background: #F4FAFD; }

/* Payment ka tareeqa — naam ke neeche chhoti wazahat */
.pay-method { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.pay-method-label { font-weight: 700; }
.pay-method-note { font-size: .78rem; font-weight: 500; opacity: .82; }

/* ============================================================
   Services picker — dhoondna + category menu (Ali, 2026-08-07)
   20 services ki lambi list scroll karni parti thi.
   ============================================================ */
.svc-tools { position: sticky; top: 0; z-index: 20; background: var(--af-white); padding: 10px 0 8px; }
.svc-search {
  width: 100%; border: 1.5px solid var(--af-grey-border); border-radius: 10px;
  padding: 12px 14px; font-size: 1rem; font-family: inherit;
}
.svc-search:focus { outline: none; border-color: var(--af-accent); }

/* Category menu — mobile par bagal mein scroll hota hai */
.svc-cats { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; -webkit-overflow-scrolling: touch; }
.svc-cats::-webkit-scrollbar { height: 0; }
.svc-cat {
  flex: none; border: 1.5px solid var(--af-grey-border); background: var(--af-white);
  color: var(--af-text); border-radius: 20px; padding: 7px 14px;
  font-size: .84rem; font-weight: 600; font-family: inherit;
  white-space: nowrap; cursor: pointer;
}
.svc-cat:hover { border-color: var(--af-accent); color: var(--af-accent); }
.svc-cat.is-on { background: var(--af-primary); border-color: var(--af-primary); color: var(--af-white); }

.svc-empty { text-align: center; color: var(--af-text); padding: 26px 10px; font-size: .92rem; }
.svc-govt { color: var(--af-text); font-size: .76rem; opacity: .85; }

/* USA LLC — checkbox nahi, Markup Valley ka raasta */
.svc-external {
  display: flex; gap: 12px; align-items: flex-start; text-decoration: none;
  border: 1.5px solid var(--af-sky); background: #F4FAFD;
  border-radius: var(--af-radius); padding: 14px 16px; color: inherit;
}
.svc-external:hover { border-color: var(--af-primary); }
.svc-external > span:last-child { display: block; flex: 1; min-width: 0; }
.svc-external strong { display: block; color: var(--af-dark); }
.svc-external small { display: block; font-size: .85rem; color: var(--af-text); margin-top: 3px; line-height: 1.55; }
.svc-external > .svc-external-flag {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  background: var(--af-sky); color: var(--af-white); letter-spacing: .02em;
}
.svc-external-go { display: inline-block; margin-top: 9px; font-weight: 700; font-size: .88rem; color: #0E5E80; }

/* ============================================================
   Documents — auto-upload, kai files, values (Ali, 2026-08-07)
   ============================================================ */
/* JS chalu ho to "Upload Karein" / "Values Mehfooz Karein" ki zaroorat nahi */
body.js-on .nojs-only, body.js-on #valuesSave { display: none; }

.doc-drop {
  display: block; border: 2px dashed var(--af-grey-border); border-radius: 10px;
  padding: 16px 14px; text-align: center; margin-top: 10px; cursor: pointer;
  background: var(--af-white);
}
.doc-drop:hover { border-color: var(--af-accent); background: var(--af-accent-tint); }
.doc-drop .doc-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.doc-drop-text strong { display: block; color: var(--af-accent); font-size: .95rem; }
.doc-drop-text small { display: block; color: var(--af-muted); font-size: .8rem; margin-top: 3px; }

.doc-files:empty { display: none; }
.doc-file {
  display: flex; align-items: center; gap: 9px;
  background: var(--af-grey-light); border-radius: 8px;
  padding: 8px 10px; margin-top: 8px; font-size: .87rem;
}
.doc-file.is-pending { opacity: .65; }
.doc-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file-size { color: var(--af-muted); font-size: .78rem; white-space: nowrap; }
.doc-file-view { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.doc-file-x {
  border: 0; background: none; color: var(--af-muted); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0 2px;
}
.doc-file-x:hover { color: var(--af-dark); }

/* Value fields — jahan number hi kaafi hai */
.doc-val-label { display: block; font-size: .87rem; font-weight: 600; margin: 12px 0 5px; }
.doc-req { color: #C0392B; font-weight: 700; }
.doc-val {
  width: 100%; border: 1.5px solid var(--af-accent); border-radius: 9px;
  padding: 11px 12px; font-size: 1rem; font-family: var(--af-font-number);
}
.doc-val:focus { outline: none; border-color: var(--af-accent-dark); }
.doc-val.is-saved { background: var(--af-accent-tint); }
.doc-val-hint { font-size: .78rem; color: var(--af-muted); margin: 5px 0 0; }
.doc-optional-line {
  font-size: .8rem; color: var(--af-muted); margin: 12px 0 0;
  padding-top: 10px; border-top: 1px dashed var(--af-grey-border);
}
.doc-msg { font-size: .84rem; margin: 9px 0 0; color: var(--af-muted); }
.doc-msg.is-error { color: #C0392B; font-weight: 600; }

/* Service ki maloomat ka form (company ka naam/pata, bookkeeping) */
.svc-fields { display: block; }
.doc-field {
  width: 100%; border: 1.5px solid var(--af-grey-border); border-radius: 9px;
  padding: 11px 12px; font-size: 1rem; font-family: inherit; background: var(--af-white);
}
.doc-field:focus { outline: none; border-color: var(--af-accent); }
textarea.doc-field { resize: vertical; line-height: 1.5; }

/* ============================================================
   Client home — har service ka apna card (2026-08-07)
   ============================================================ */
.svc-tile { border: 1px solid var(--af-grey-border); border-radius: var(--af-radius); padding: 14px 16px; text-align: left; }
.svc-tile.is-past { opacity: .75; }
.svc-tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.svc-tile-head strong { font-size: 1rem; }
.svc-tile-fee { margin: 8px 0 0; font-size: .92rem; }
.svc-tile-fee small { color: var(--af-muted); font-size: .8rem; }
.svc-tile-step { margin: 7px 0 0; font-size: .82rem; color: var(--af-muted); }
.svc-steps { display: flex; gap: 4px; margin-top: 11px; }
.svc-steps i { flex: 1; height: 5px; border-radius: 3px; background: var(--af-grey-border); }
.svc-steps i.is-done { background: var(--af-green); }
.svc-steps i.is-now { background: var(--af-sky); }
.svc-tile-links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-sm { padding: 8px 14px; font-size: .85rem; width: auto; }


/* ============================================================
   Portal ka DESKTOP version (Ali, 2026-08-07)
   Bottom nav mobile ka pattern hai — 1440px par woh poori chaurai
   mein phail jata tha aur content beech mein ek patli patti reh jata.
   900px se upar: nav bayein taraf sidebar ban jata hai aur content
   khuli jagah le leta hai. Sirf CSS — portal ke paanchon safhe ek
   saath badal jate hain, kisi template ko haath nahi lagana parta.
   ============================================================ */
@media (min-width: 900px) {
  .pnav {
    top: 0; bottom: 0; right: auto; width: 232px;
    flex-direction: column; justify-content: flex-start;
    border-top: 0; border-right: 1px solid var(--af-grey-border);
    padding: 18px 12px; gap: 4px;
    background: var(--af-white);
  }
  .pnav-item {
    flex: 0 0 auto; min-height: 46px; flex-direction: row;
    justify-content: flex-start; gap: 12px;
    padding: 10px 14px; border-radius: 10px; font-size: .92rem;
  }
  .pnav-item svg { width: 20px; height: 20px; }
  .pnav-item.is-on { background: var(--af-accent-tint); }
  .pnav-item:hover { background: var(--af-grey-light); }

  /* Content sidebar ke bagal mein — neeche ki jagah wapas mil gayi */
  .has-pnav { padding-bottom: 0; padding-left: 232px; }
  /* Site header bhi sidebar ke bagal se shuru ho, warna logo nav ke peechhe
     chhup jata hai. */
  .has-pnav > header.site .wrap { padding-left: 8px; }

  /* Portal ke safhe ab patli patti nahi — khuli jagah lete hain */
  .has-pnav .narrow-wrap { max-width: 940px; }
  .has-pnav section { padding: 32px 0; }

  /* Service cards do column mein — ek nazar mein zyada kaam dikhta hai */
  .svc-tile { margin-top: 0; }
  .has-pnav .lead-card .svc-tile + .svc-tile { margin-top: 0; }
  .svc-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }

  /* WhatsApp button sidebar ke upar na chadhe */
  .has-pnav .wa-fab { left: auto; }
}

/* Sidebar bohat chaurai kha jaye to thora chhota */
@media (min-width: 900px) and (max-width: 1100px) {
  .pnav { width: 190px; }
  .has-pnav { padding-left: 190px; }
}

/* ============================================================
   Portal dashboard — hero + dayan panel (Ali, 2026-08-07)
   Ali: "current interface is not easy to understand". Ginti ke
   bajaye saaf lafz, aur ek waqt mein ek hi bara button.
   ============================================================ */
.dash-hero {
  background: linear-gradient(135deg, var(--af-hero-1), var(--af-hero-2));
  color: var(--af-white); border-radius: 14px; padding: 22px 20px; text-align: left;
}
.dash-hero-hi { margin: 0 0 6px; font-size: .86rem; opacity: .85; }
.dash-hero h2 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.3; color: var(--af-white); }
.dash-hero-sub { margin: 0; font-size: .92rem; line-height: 1.6; opacity: .92; }
.dash-hero-sub strong { color: var(--af-gold); }
.dash-hero-btn {
  display: inline-block; width: auto; margin-top: 16px;
  background: var(--af-gold); color: var(--af-primary); font-weight: 700; border: 0;
}
.dash-hero-btn:hover { filter: brightness(1.05); }
.dash-hero-for { margin: 8px 0 0; font-size: .78rem; opacity: .8; }

.dash-cols { display: block; }
.dash-rail { display: grid; gap: 12px; margin-top: 20px; }
.rail-card {
  border: 1px solid var(--af-grey-border); border-radius: 12px;
  padding: 14px 16px; text-align: left; background: var(--af-white);
}
.rail-title {
  margin: 0 0 10px; font-size: .74rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--af-muted);
}
.rail-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 0; font-size: .9rem;
}
.rail-row + .rail-row { border-top: 1px solid var(--af-grey-light); }
.rail-row span { color: var(--af-text); }
.rail-row strong { color: var(--af-dark); text-align: right; }
.rail-row strong.is-ok { color: var(--af-accent); }
.rail-row strong.is-warn { color: var(--af-orange); }

.rail-date { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; }
.rail-date + .rail-date { border-top: 1px solid var(--af-grey-light); }
.rail-date.is-past { opacity: .55; }
.rail-date-box {
  flex: none; width: 44px; border-radius: 8px; background: var(--af-grey-light);
  display: flex; flex-direction: column; align-items: center; padding: 5px 0;
}
.rail-date-box b { font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: var(--af-muted); }
.rail-date-box i { font-style: normal; font-family: var(--af-font-number); font-size: 1.05rem; font-weight: 700; color: var(--af-dark); }
.rail-date-txt { display: block; }
.rail-date-txt strong { display: block; font-size: .87rem; line-height: 1.4; color: var(--af-dark); }
.rail-date-txt small { display: block; font-size: .78rem; color: var(--af-muted); margin-top: 2px; }

.rail-help { background: var(--af-accent-tint); border-color: var(--af-accent); }
.rail-help strong { display: block; font-size: .95rem; color: var(--af-dark); }
.rail-help p { margin: 5px 0 0; font-size: .84rem; color: var(--af-text); line-height: 1.6; }

/* Desktop: do column — kaam bayein, haal dayein (Befiler jaisa) */
@media (min-width: 900px) {
  /* .lead-card ki apni max-width 30rem hai (signup/OTP jaise chhote forms ke
     liye theek). Portal ke safhon par woh dashboard ko 640px mein qaid kar
     deti thi — main column sirf 274px ka bachta tha. */
  .has-pnav .lead-card { max-width: none; padding: 26px 28px; }
  .dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
  .dash-rail { margin-top: 0; position: sticky; top: 18px; }
  .dash-hero { padding: 28px 26px; }
  .dash-hero h2 { font-size: 1.6rem; }
  /* Rail ke bagal mein cards ek column mein behtar lagte hain */
  .dash-main .svc-tile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Nayi service lein — category menu + icon tiles (Ali, 2026-08-07)
   "selection of new services need to be from left hand section and
    on top menu button based on category. also use some symbols"
   ============================================================ */

/* Sidebar ka category hissa — sirf desktop, mobile ke bottom nav mein
   itni jagah nahi hoti */
.pnav-cats { display: none; }
.pnav-cats-title {
  margin: 20px 14px 6px; font-size: .68rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--af-muted);
}
.pnav-cat {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 14px; border-radius: 9px; text-decoration: none;
  color: var(--af-text); font-size: .86rem; font-weight: 500;
}
.pnav-cat:hover { background: var(--af-grey-light); color: var(--af-dark); }
.pnav-cat.is-on { background: var(--af-accent-tint); color: var(--af-accent-dark); font-weight: 700; }
.pnav-cat-ico { width: 17px; height: 17px; flex: none; opacity: .75; }

/* Bottom nav ka "+" wala item thora numaya */
.pnav-add svg { fill: var(--af-accent); }

/* Dashboard par nayi service ka CTA */
.svc-add-cta {
  display: flex; align-items: center; gap: 13px; margin-top: 18px;
  border: 1.5px dashed var(--af-accent); border-radius: 12px;
  padding: 14px 16px; text-decoration: none; color: inherit;
  background: var(--af-accent-tint);
}
.svc-add-cta:hover { background: var(--af-white); }
.svc-add-cta strong { display: block; color: var(--af-dark); font-size: .98rem; }
.svc-add-cta small { display: block; color: var(--af-text); font-size: .82rem; margin-top: 2px; line-height: 1.5; }
.svc-add-ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--af-accent); color: var(--af-white);
  display: grid; place-items: center;
}
.svc-add-ico svg { width: 21px; height: 21px; }
.svc-add-go { margin-left: auto; font-size: 1.3rem; color: var(--af-accent); }

/* Category ka top menu — Befiler jaisa, icon ke saath */
.cat-menu { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; margin-top: 16px; }
.cat-menu::-webkit-scrollbar { height: 0; }
.cat-menu-btn {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 84px; padding: 12px 10px; border-radius: 12px;
  border: 1px solid var(--af-grey-border); background: var(--af-white);
  text-decoration: none; color: var(--af-text); font-size: .74rem; font-weight: 600; text-align: center;
}
.cat-menu-btn:hover { border-color: var(--af-accent); color: var(--af-accent-dark); background: var(--af-accent-tint); }
.cat-menu-ico { width: 22px; height: 22px; }

.cat-block { margin-top: 26px; scroll-margin-top: 16px; }
.cat-title { display: flex; align-items: center; gap: 9px; margin: 0 0 3px; font-size: 1.05rem; color: var(--af-dark); }
.cat-title-ico { width: 19px; height: 19px; color: var(--af-accent); }
.cat-note { margin: 0 0 12px; font-size: .84rem; color: var(--af-muted); }

/* Service tiles — icon + naam + fee */
.svc-tiles { display: grid; gap: 10px; }
.svc-tile-form { display: block; }
.svc-tile-btn {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left;
  border: 1.5px solid var(--af-grey-border); border-radius: 12px;
  padding: 14px; background: var(--af-white); cursor: pointer;
  font-family: inherit; text-decoration: none; color: inherit;
}
.svc-tile-btn:hover { border-color: var(--af-accent); background: var(--af-accent-tint); }
.svc-tile-btn.is-mine { cursor: default; opacity: .7; }
.svc-tile-btn.is-mine:hover { border-color: var(--af-grey-border); background: var(--af-white); }
.svc-tile-ico {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  background: var(--af-accent-tint); color: var(--af-accent-dark);
  display: grid; place-items: center;
}
.svc-tile-ico svg { width: 22px; height: 22px; }
.svc-tile-ico.is-sky { background: #E8F4FB; color: #0E5E80; }
.svc-tile-ico.is-done { background: var(--af-green); color: var(--af-white); }
.svc-tile-body { display: block; flex: 1; min-width: 0; }
.svc-tile-body strong { display: block; font-size: .96rem; color: var(--af-dark); line-height: 1.35; }
.svc-tile-body small { display: block; font-size: .81rem; color: var(--af-text); margin-top: 3px; line-height: 1.5; }
.svc-tile-fee {
  display: inline-block; margin-top: 8px; font-family: var(--af-font-number);
  font-weight: 700; font-size: .88rem; color: var(--af-accent-dark);
}
.svc-tile-fee.is-quote { color: #0E5E80; font-family: inherit; font-size: .84rem; }
.svc-tile-fee.is-have { color: var(--af-muted); font-family: inherit; font-size: .82rem; font-weight: 600; }

@media (min-width: 640px) { .svc-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .pnav-cats { display: block; }
  .svc-tiles { grid-template-columns: repeat(3, 1fr); }
  /* Sidebar mein ab zyada items hain — scroll ho sake */
  .pnav { overflow-y: auto; }
}

/* Referral page — misaal ki base fee commission ke neeche */
.refer-base { display: block; font-size: .78rem; color: var(--af-muted); margin-top: 2px; }

/* Partner ke apne codes aur split (Ali, 2026-08-07) */
.pool-band {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: var(--af-accent-tint); border-radius: var(--af-radius);
  padding: 14px 16px; margin: 14px 0;
}
.pool-band strong { font-size: 1.7rem; color: var(--af-accent-dark); font-family: var(--af-font-number); }
.pool-band span { flex: 1; min-width: 200px; font-size: .88rem; color: var(--af-text); }
.code-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.code-label { display: block; font-size: .8rem; color: var(--af-muted); font-weight: 400; }
.pool-bar { height: 8px; background: var(--af-grey-light); border-radius: 4px; overflow: hidden; margin: 10px 0 6px; }
.pool-bar i { display: block; height: 100%; background: var(--af-accent); }
.split-add { cursor: pointer; font-weight: 600; color: var(--af-accent); font-size: .9rem; }

/* Referral page — sirf pool ka percentage, rupay nahi */
.pool-hero { text-align: center; padding: 24px 16px; }
.pool-hero-num {
  font-family: var(--af-font-number); font-size: 4rem; line-height: 1;
  font-weight: 700; color: var(--af-accent);
}
.pool-hero p { max-width: 520px; margin: 12px auto 0; color: var(--af-text); line-height: 1.7; }
.pool-ways { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 720px) { .pool-ways { grid-template-columns: repeat(3, 1fr); } }
.pool-way {
  border: 1px solid var(--af-grey-border); border-radius: var(--af-radius);
  padding: 14px 16px; text-align: center;
}
.pool-way strong { display: block; color: var(--af-dark); }
.pool-way span { display: block; font-size: .85rem; color: var(--af-muted); margin-top: 4px; }

/* Referral page — client ko tasalli ke liye */
.pool-assure {
  border: 1.5px solid var(--af-green); background: #F4FBF6;
  border-radius: var(--af-radius); padding: 16px 18px; margin-top: 18px;
}
.pool-assure strong { display: block; color: var(--af-dark); margin-bottom: 6px; }
.pool-assure p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--af-text); }

/* Referral program — code dikhane ka khana */
.code-box {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1.5px solid var(--af-accent); background: var(--af-accent-tint);
  border-radius: var(--af-radius); padding: 14px 16px; margin-top: 12px;
}
.code-box-k { font-size: .82rem; color: var(--af-text); }
.code-box-v { font-size: 1.15rem; color: var(--af-accent-dark); word-break: break-all; }

/* ==========================================================================
   Onboarding — shakal Befiler ke asli screens se (Ali ne screenshots diye,
   2026-08-08). Un ka dhancha: upar qadam ki tab patti, bayein chalta hua
   khulasa, beech mein hero icon + sar-nama + khaane, neeche Wapas/Aage.
   Rang hamare apne hain (green-forward), Befiler ka laal nahi.
   CSP: sab kuch class se — koi inline style nahi.
   ========================================================================== */

/* ---- qadam ki tab patti ---- */
.bf-tabs { background: var(--af-primary); position: relative; }
.bf-tabs-list {
  display: flex; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bf-tabs-list::-webkit-scrollbar { display: none; }
.bf-tab { flex: 0 0 auto; }
.bf-tab a {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 13px 16px; white-space: nowrap;
  color: rgba(255,255,255,.62); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.bf-tab a:hover { color: #fff; }
.bf-tab-n {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: inherit;
  font-family: var(--af-font-number); font-size: .68rem; letter-spacing: 0;
}
.bf-tab.is-done a { color: rgba(255,255,255,.88); }
.bf-tab.is-done .bf-tab-n { background: var(--af-green); color: #fff; }
.bf-tab.is-now a { background: var(--af-accent); color: #fff; }
.bf-tab.is-now .bf-tab-n { background: rgba(255,255,255,.28); color: #fff; }
.bf-tabs-bar { height: 3px; background: rgba(255,255,255,.14); }
.bf-tabs-fill { height: 100%; background: var(--af-gold); transition: width .3s ease; }

/* ---- shell: rail + main ---- */
/* Grey poori chaurai par (bf-page), magar content beech mein (bf-shell).
   Pehle dono ek hi element par the aur grid ki tracks apni jagah par jam
   jati thin — bari screen par sab kuch bayein taraf chipak jata tha. */
.bf-page { background: var(--af-grey-light); padding-bottom: 28px; overflow-x: hidden; }
/* Lamba be-tor lafz (email, IBAN, URL) track ko phaila deta hai aur safha
   side-scroll kar jata hai — phir centring bhi tirchi lagti hai. */
.bf-field, .bf-flabel-text, .bf-hint, .bf-tile-text, .bf-yn-text, .bf-rail { overflow-wrap: anywhere; min-width: 0; }
.bf-shell { display: block; }
.bf-rail {
  background: var(--af-dark); color: #fff; padding: 12px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
}
.bf-rail-head {
  margin: 0; width: 100%; font-family: var(--af-font-heading);
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.bf-rail-row { display: flex; align-items: baseline; gap: 6px; font-size: .82rem; color: rgba(255,255,255,.72); }
.bf-rail-row b { font-family: var(--af-font-number); font-size: .95rem; color: #fff; }
.bf-rail-note { margin: 0; width: 100%; font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.66); }
.bf-rail-block { margin: 0; width: 100%; font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.74); }
.bf-rail-k {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 2px;
}
.bf-rail-warn {
  margin: 0; width: 100%; display: flex; gap: 8px; align-items: flex-start;
  font-size: .78rem; line-height: 1.5; color: var(--af-gold);
}
.bf-rail-ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

.bf-main {
  background: var(--af-white); width: 100%; max-width: 720px; margin: 0 auto;
  padding: 22px 16px 28px; min-height: 55vh;
}

/* ---- hero: bara icon + sar-nama ---- */
/* Icon bayein, sar-nama us ke saath — sab ek hi lakeer par (Ali, 2026-08-09).
   Beech mein rakha hua sar-nama aur bayein rakhe hue khaane do alag lakeerein
   bana dete the. */
.bf-hero { display: flex; gap: 14px; align-items: flex-start; text-align: left; margin-bottom: 22px; }
.bf-hero-text { min-width: 0; flex: 1; padding-top: 4px; }
.bf-hero-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
  background: var(--af-accent-tint); color: var(--af-accent);
}
.bf-hero-ok { background: var(--af-green2); color: #fff; }
.bf-ico-lg { width: 26px; height: 26px; }
.bf-ico-md { width: 26px; height: 26px; }
.bf-h1 {
  font-family: var(--af-font-heading); font-size: 1.42rem; line-height: 1.3;
  margin: 0 0 8px; color: var(--af-dark); font-weight: 600;
}
.bf-h1 strong { font-weight: 700; }
.bf-h1-light { font-weight: 400; color: var(--af-text); }
.bf-sub { margin: 0; color: var(--af-text); font-size: .95rem; line-height: 1.6; text-align: left; }
.bf-requests-note { margin: 0 0 12px; font-size: .85rem; }
.bf-h3 {
  font-family: var(--af-font-heading); font-size: 1rem; margin: 26px 0 10px;
  color: var(--af-dark);
}

/* ---- khaane ---- */
.bf-fields { display: grid; gap: 20px; margin-top: 6px; min-width: 0; }
.bf-field { min-width: 0; }
.bf-flabel { margin-bottom: 8px; }
.bf-flabel-text {
  display: block; font-size: .92rem; font-weight: 700; color: var(--af-dark);
  line-height: 1.4; margin: 0;
}
.bf-flabel-big { font-size: 1.02rem; }
/* Chips label ke NEECHE apni line par. Befiler par chips hain hi nahi; yeh
   Ali ki apni shart hai, is liye inhein khamosh rakha hai — sar-nama se
   muqabla na karein. */
.bf-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bf-chip {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font-size: .6rem; font-weight: 600; letter-spacing: .01em; line-height: 1.5;
  border: 1px solid var(--af-line); color: var(--af-muted); background: var(--af-white);
}
.bf-chip-select, .bf-chip-input, .bf-chip-number { border-color: var(--af-sky); color: var(--af-dark); }
.bf-chip-document { border-color: var(--af-orange); color: var(--af-dark); }
.bf-chip-required { border-color: var(--af-accent); color: var(--af-accent); }
.bf-chip-optional { border-color: var(--af-line); color: var(--af-muted); }
.bf-chip-conditional { border-color: var(--af-amber-deep); color: var(--af-amber-deep); }
.bf-chip-kyc, .bf-chip-gate { border-color: var(--af-primary); color: var(--af-primary); }

/* Befiler ke input: chapte, neeche gehri lakeer, halki tint */
.bf-input, .bf-main select.bf-input, .bf-main input.bf-input {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--af-line); border-bottom: 2px solid var(--af-accent);
  border-radius: 8px 8px 0 0; background: #F7FAF8;
  font-family: var(--af-font-body); font-size: 1rem; color: var(--af-dark);
  -webkit-appearance: none; appearance: none;
}
.bf-input:focus { outline: none; border-bottom-color: var(--af-primary); background: #fff; }
.bf-input-num { text-align: right; font-family: var(--af-font-number); }
.bf-main select.bf-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--af-accent) 50%), linear-gradient(135deg, var(--af-accent) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 34px;
}
.bf-sub-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--af-dark); margin-bottom: 5px; }
.bf-grid { display: grid; gap: 14px; }
.bf-hint {
  display: flex; gap: 6px; align-items: flex-start;
  margin: 7px 0 0; font-size: .8rem; line-height: 1.5; color: var(--af-muted);
}
.bf-hint-ico { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--af-accent); }
.bf-err { margin: 0 0 7px; font-size: .82rem; font-weight: 600; color: #B3261E; }

/* ---- inline radios (Befiler ka "Nationality ● Pakistani ○ Foreigner") ---- */
.bf-radios { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 2px; }
.bf-radio { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: .95rem; color: var(--af-dark); }
.bf-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.bf-radio-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--af-grey-border); background: var(--af-white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bf-radio input:checked + .bf-radio-dot {
  border-color: var(--af-accent); box-shadow: inset 0 0 0 4px var(--af-accent);
}
.bf-radio input:focus-visible + .bf-radio-dot { outline: 2px solid var(--af-accent); outline-offset: 2px; }

/* ---- icon tiles (Befiler ka income-source grid) ---- */
.bf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.bf-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; cursor: pointer; padding: 15px 9px;
  border: 1.5px solid var(--af-line); border-radius: 12px; background: var(--af-white);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.bf-tile:hover { border-color: var(--af-accent); }
.bf-tile:active { transform: scale(.98); }
.bf-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.bf-tile-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--af-accent-tint); color: var(--af-accent);
}
.bf-tile-text { font-size: .82rem; font-weight: 600; line-height: 1.35; color: var(--af-dark); }
.bf-tile:has(input:checked) { border-color: var(--af-accent); background: var(--af-accent-tint); }
.bf-tile:has(input:checked) .bf-tile-ico { background: var(--af-accent); color: #fff; }

/* ---- Haan / Nahi (Befiler ke do bare button) ---- */
.bf-yesno { display: flex; flex-wrap: wrap; gap: 12px; }
.bf-yn {
  flex: 1 1 190px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 17px; border: 1.5px solid var(--af-line); border-radius: 12px;
  background: var(--af-white); font-size: .96rem; font-weight: 700; color: var(--af-dark);
  transition: border-color .15s ease, background .15s ease;
}
.bf-yn input { position: absolute; opacity: 0; width: 0; height: 0; }
.bf-yn-dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; line-height: 1;
}
.bf-yn-yes .bf-yn-dot { background: var(--af-green); }
.bf-yn-no .bf-yn-dot { background: #C0392B; }
.bf-yn-text { flex: 1; line-height: 1.35; }
.bf-yn:has(input:checked) { border-color: var(--af-accent); background: var(--af-accent-tint); }

/* ---- document khaana ---- */
.bf-field-doc {
  border: 1px solid var(--af-line); border-left: 4px solid var(--af-orange);
  border-radius: 12px; padding: 15px 16px; background: var(--af-white);
}
.bf-field-doc.is-done { border-left-color: var(--af-green2); background: #FAFDFB; }
.bf-field-member { border: 1px solid var(--af-line); border-left: 4px solid var(--af-primary); border-radius: 12px; padding: 15px 16px; }

/* ---- neeche ke button ---- */
.bf-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.bf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 26px; border-radius: 8px; border: 0;
  font-family: var(--af-font-heading); font-size: .95rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background .15s ease;
}
.bf-btn-primary { background: var(--af-accent); color: #fff; }
.bf-btn-primary:hover { background: var(--af-accent-dark); }
.bf-btn-back { background: var(--af-grey-light); color: var(--af-dark); }
.bf-btn-back:hover { background: #E6EAE7; }
.bf-btn-ghost { background: transparent; color: var(--af-accent); border: 1.5px solid var(--af-accent); margin-top: 8px; width: 100%; }
.bf-gate-cta { margin-top: 12px; }

/* ---- gate, flash, review ---- */
.bf-gate {
  border: 1.5px solid var(--af-orange); border-radius: 12px; background: #FFF8F0;
  padding: 20px 16px; margin-bottom: 22px; text-align: left;
}
.bf-gate-ico { display: inline-flex; color: var(--af-orange); }
.bf-gate-title { font-family: var(--af-font-heading); font-size: 1.1rem; margin: 8px 0 6px; color: var(--af-dark); }
.bf-gate-why { margin: 0 0 6px; color: var(--af-dark); font-size: .94rem; line-height: 1.55; }
.bf-gate-next { margin: 0; color: var(--af-text); font-size: .88rem; line-height: 1.55; }
.bf-flash {
  margin: 0 0 14px; padding: 9px 13px; border-radius: 8px;
  background: var(--af-accent-tint); color: var(--af-dark);
  font-size: .88rem; font-weight: 600;
}
.bf-flash-bad { background: #FDECEA; color: #B3261E; }
.bf-note { margin: 10px 0 0; font-size: .82rem; color: var(--af-muted); text-align: left; }
.bf-note-foot { margin-top: 26px; text-align: left; }
.bf-review { list-style: none; margin: 6px 0 0; padding: 0; }
.bf-review-row {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--af-line); padding: 12px 2px; font-size: .93rem;
}
.bf-review-row:last-child { border-bottom: 0; }
.bf-review-tick { color: var(--af-green2); font-weight: 700; width: 16px; }
.bf-review-title { flex: 1; color: var(--af-dark); }
.bf-review-row a { font-size: .82rem; font-weight: 700; }

/* ---- bara screen: rail bayein taraf, khaane do column ---- */
@media (min-width: 760px) {
  .bf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .bf-wide { grid-column: 1 / -1; }
  .bf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bf-main { padding: 32px 34px 38px; border-radius: 0 0 14px 14px; }
  .bf-h1 { font-size: 1.72rem; }
}
@media (min-width: 980px) {
  /* Kinare par saans lene ki jagah. 980–1120 ke beech shell poori chaurai
     bhar leta tha aur kaala rail bilkul window ke kinare chipak jata tha —
     dekhne mein wohi "left aligned" wala ehsaas deta hai. */
  .bf-page { padding: 0 24px 44px; }
  .bf-shell {
    display: grid; grid-template-columns: 268px minmax(0, 1fr);
    align-items: stretch; gap: 0;
    /* width:100% lazmi hai. Bina is ke grid apni tracks ke barabar simat
       jata hai, aur simte hue box par auto margin centre nahi karti —
       poora safha bayein kinare chipak jata tha. */
    width: 100%; max-width: 1180px; margin-left: 0; margin-right: auto;
    border-radius: 14px; overflow: hidden; box-shadow: 0 2px 18px rgba(22,22,22,.07);
  }
  /* Tab patti bhi usi 1120 par — warna tabs kinare par aur content beech
     mein, do alag lakeeron par baith jate hain. */
  .bf-tabs { padding: 0 24px; }
  .bf-tabs-list, .bf-tabs-bar { width: 100%; max-width: 1180px; margin-left: 0; margin-right: auto; }
  .bf-rail {
    display: block; min-height: 100%; padding: 24px 20px; align-self: stretch;
  }
  .bf-rail-head { margin-bottom: 16px; }
  .bf-rail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .84rem;
  }
  .bf-rail-note, .bf-rail-warn { margin-top: 16px; }
  .bf-rail-block { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .bf-main { margin: 0; max-width: none; width: 100%; border-radius: 0; }
  .bf-rail { border-radius: 0; }
}

/* ==========================================================================
   Managed Accounts — retainer ka mahana record
   ========================================================================== */
.ma-list { list-style: none; margin: 12px 0 0; padding: 0; }
.ma-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--af-line); border-left: 4px solid var(--af-line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: var(--af-white);
}
.ma-row.is-filed { border-left-color: var(--af-green2); background: #FAFDFB; }
.ma-row.is-nil { border-left-color: var(--af-sky); }
.ma-period { font-family: var(--af-font-number); font-weight: 700; color: var(--af-dark); min-width: 92px; }
.ma-note { flex: 1; font-size: .84rem; color: var(--af-muted); }

/* ==========================================================================
   Service guide (.sg-*) — "har service mein kya chahiye".
   Public safha: client kharidne se pehle poora tareeqa dekh leta hai.
   Data lib/service-guide.js se, jo lib/onboarding.js se banta hai.
   ========================================================================== */
.sg-head { padding: 26px 0 8px; }
.sg-head .crumbs { text-align: center; margin-bottom: 10px; }
.sg-lead { color: var(--af-muted); margin-top: 8px; }
.sg-hero-ico {
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--af-accent-tint); color: var(--af-accent);
}
.sg-ico-lg { width: 30px; height: 30px; }
.sg-ico { width: 22px; height: 22px; }

.sg-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 18px 0 0; text-align: left;
}
.sg-meta-i {
  border: 1px solid var(--af-line); border-radius: 10px; padding: 10px 12px; background: var(--af-white);
}
.sg-meta-i span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--af-muted); margin-bottom: 2px; }
.sg-meta-i b { font-size: .95rem; color: var(--af-dark); }

.sg-note {
  margin: 14px 0 0; padding: 11px 14px; border-radius: 10px;
  background: var(--af-accent-tint); color: var(--af-dark); font-size: .87rem; line-height: 1.6;
}
.sg-warn {
  display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0;
  padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--af-gold);
  background: var(--af-gold-light); color: var(--af-dark); font-size: .87rem; line-height: 1.6;
}
.sg-warn-ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }

.sg-sec { padding: 26px 0; }
.sg-sec-alt { background: var(--af-grey-light); }
.sg-sec-gate { background: #FFF8F0; }
.sg-h2 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--af-font-heading); font-size: 1.22rem; color: var(--af-dark); margin: 0 0 6px;
}
.sg-h2-ico { width: 20px; height: 20px; color: var(--af-accent); flex-shrink: 0; }
.sg-sub { margin: 0 0 16px; color: var(--af-text); font-size: .92rem; line-height: 1.6; }

.sg-gates { list-style: none; margin: 0; padding: 0; }
.sg-gates li {
  border-left: 3px solid var(--af-orange); padding: 8px 0 8px 12px; margin-bottom: 10px;
}
.sg-gates strong { display: block; color: var(--af-dark); font-size: .95rem; }
.sg-gates span { display: block; font-size: .83rem; color: var(--af-muted); margin-top: 2px; line-height: 1.55; }

.sg-steps { list-style: none; margin: 0; padding: 0; }
.sg-step { display: flex; gap: 12px; padding-bottom: 20px; }
.sg-step-n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--af-accent); color: #fff;
  font-family: var(--af-font-number); font-weight: 700; font-size: .85rem;
}
.sg-step-body { flex: 1; min-width: 0; }
.sg-step-body > strong { display: block; font-size: 1rem; color: var(--af-dark); }
.sg-step-note { margin: 3px 0 0; font-size: .85rem; color: var(--af-muted); line-height: 1.55; }
.sg-items { list-style: none; margin: 10px 0 0; padding: 0; }
.sg-items li {
  border: 1px solid var(--af-line); border-radius: 10px; padding: 9px 12px;
  margin-bottom: 7px; background: var(--af-white);
}
.sg-item-label { display: block; font-size: .9rem; font-weight: 600; color: var(--af-dark); }
.sg-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sg-item-hint { display: block; font-size: .8rem; color: var(--af-muted); margin-top: 5px; line-height: 1.5; }
.sg-tag {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font-size: .63rem; font-weight: 700; border: 1px solid var(--af-line); color: var(--af-muted);
}
.sg-tag-type { border-color: var(--af-sky); color: var(--af-dark); }
.sg-tag-doc { border-color: var(--af-orange); color: var(--af-dark); }
.sg-tag-required { border-color: var(--af-accent); color: var(--af-accent); }
.sg-tag-optional { border-color: var(--af-line); color: var(--af-muted); }
.sg-tag-conditional { border-color: var(--af-amber-deep); color: var(--af-amber-deep); }
.sg-tag-gate { border-color: var(--af-orange); color: var(--af-orange); }

.sg-docs { list-style: none; margin: 0; padding: 0; }
.sg-doc {
  border: 1px solid var(--af-line); border-left: 4px solid var(--af-line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 9px; background: var(--af-white);
}
.sg-doc.is-req { border-left-color: var(--af-orange); }
.sg-doc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sg-doc-head strong { font-size: .93rem; color: var(--af-dark); }
.sg-doc-src { display: block; font-size: .82rem; color: var(--af-muted); margin-top: 5px; line-height: 1.55; }

.sg-group-title { font-family: var(--af-font-heading); font-size: 1.15rem; margin: 24px 0 2px; color: var(--af-dark); }
.sg-group-note { margin: 0 0 12px; font-size: .85rem; color: var(--af-muted); }
.sg-grid { display: grid; gap: 10px; }
.sg-card {
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  border: 1.5px solid var(--af-line); border-radius: 12px; padding: 13px 14px;
  background: var(--af-white); transition: border-color .15s ease;
}
.sg-card:hover { border-color: var(--af-accent); }
.sg-card-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--af-accent-tint); color: var(--af-accent);
}
.sg-card-body { flex: 1; min-width: 0; }
.sg-card-body strong { display: block; font-size: .96rem; color: var(--af-dark); line-height: 1.35; }
.sg-card-body small { display: block; font-size: .8rem; color: var(--af-muted); margin-top: 2px; line-height: 1.45; }
.sg-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sg-fact {
  font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  border: 1px solid var(--af-line); color: var(--af-muted);
}
.sg-fact-gate { border-color: var(--af-orange); color: var(--af-orange); }
.sg-fact-good { border-color: var(--af-accent); color: var(--af-accent); }
.sg-card-fee {
  flex-shrink: 0; font-family: var(--af-font-number); font-weight: 700;
  font-size: .9rem; color: var(--af-primary); white-space: nowrap;
}
.sg-card-fee small { font-weight: 500; color: var(--af-muted); }
.sg-cta { text-align: center; padding: 8px 0 10px; }
.sg-cta p { margin-bottom: 12px; color: var(--af-text); }

@media (min-width: 720px) {
  .sg-grid { grid-template-columns: 1fr 1fr; }
  .sg-meta { grid-template-columns: repeat(4, 1fr); }
}
.svc-guide-line {
  text-align: center; font-size: .88rem; color: var(--af-text);
  background: var(--af-accent-tint); border-radius: 10px;
  padding: 10px 14px; margin: 0 0 16px; line-height: 1.6;
}
.svc-guide-line a { font-weight: 700; white-space: nowrap; }
/* Pricing ki har qatar ab apne tafseeli safhe ka darwaza hai */
.addon-link { text-decoration: none; color: inherit; transition: border-color .15s ease, background .15s ease; }
.addon-link:hover { border-color: var(--af-accent); background: var(--af-accent-tint); }
.svc-fees-more { display: block; margin-top: 3px; font-size: .78rem; font-weight: 700; color: var(--af-accent); }
.post-cta-alt { margin-top: 10px; text-align: center; font-size: .88rem; }

/* ============ TEAM FEEDBACK ROUND — 2026-08-09 ============
   Ali ki team ne landing page par jo kaha, sab yahan. Purani rules upar hi
   rehti hain; yeh block un par chalta hai taake har tabdeeli ek jagah dikhe.

   1. Rang: blue + white, teesra rang light blue (Markup Valley ka rang).
   2. Service cards halke — gehre tiles nahi, aur hover par saaf light blue.
   3. Ek ek kar ke ubharne wali animation khatam (log confuse hote the).
   4. Fonts: heading Plus Jakarta Sans, matn Inter — naap bhi darust.
   5. Qeemat ka muqabla: table ki jagah card + bar.
   6. Safha chhota — kam section, kam dohrao.
   ============================================================ */

/* ---------- 1. type scale ---------- */
body { font-size: 1.0rem; line-height: 1.7; letter-spacing: -0.003em; }
h1, h2, h3 { letter-spacing: -0.02em; }
.section-title {
  font-size: 1.5rem; font-weight: 800; color: var(--af-dark);
  text-transform: none; letter-spacing: -0.025em; margin-bottom: 6px;
}
.section-title .hi, .section-title .hi2 { color: var(--af-accent); }
.section-sub { font-size: 1rem; color: var(--af-muted); margin-bottom: 30px; }
@media (min-width: 760px) {
  .section-title { font-size: 2rem; }
  .section-sub { font-size: 1.06rem; margin-bottom: 38px; }
}
.btn { font-weight: 700; letter-spacing: 0; border-radius: 10px; }
.link-more { font-weight: 700; text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* ---------- 2. header / language switch ---------- */
.logo .af-dot { color: var(--af-blue-soft); }
.lang-sw {
  display: inline-flex; background: rgba(255,255,255,.14);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.lang-sw a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 32px; padding: 0 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.82); text-decoration: none;
}
.lang-sw a:hover { color: #fff; background: rgba(255,255,255,.16); }
.lang-sw a.is-on { background: var(--af-white); color: var(--af-primary); }

/* ---------- 3. hero ---------- */
.d-hero-left h1 { text-transform: none; letter-spacing: -0.03em; font-size: 2rem; }
.d-hero-left h1 .g { color: var(--af-blue-soft); }
.d-hero-left p { color: #DCE7FE; }
.d-hero-right { background: var(--af-accent-tint); }
.d-hero-links { color: #AFC6F5; }
.d-hero-links a { color: #DCE7FE; }
/* Hero ka pehla button: safed par blue — gold retire ho gaya */
.btn-hero { background: var(--af-white); color: var(--af-primary); text-transform: none; }
.btn-hero:hover { background: var(--af-accent-tint); color: var(--af-accent-dark); }
.btn-ghost-w { text-transform: none; }
.btn-ghost-w:hover { border-color: var(--af-white); background: rgba(255,255,255,.1); }
@media (min-width: 760px) { .d-hero-left h1 { font-size: 2.9rem; } }

/* Deadline ki patti: ab gehre blue par safed — dhyan bhi khinchti hai aur
   theme ke andar bhi rehti hai */
.deadline-bar { background: var(--af-navy-deep); color: #E6EDFB; font-weight: 500; }
.deadline-bar strong { color: var(--af-white); }

/* ---------- 4. service / package cards ---------- */
/* Purane gehre tiles gaye. Ab safed card, light blue kinara, aur hover par
   saaf nazar aane wala light blue — team ka asal aitraaz yehi tha. */
.pkg-grid { display: grid; gap: 14px; }
@media (min-width: 620px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pkg-grid { grid-template-columns: repeat(4, 1fr); } }
.pkg {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--af-white); border: 1.5px solid var(--af-line);
  border-radius: 16px; padding: 22px 20px; text-decoration: none;
  color: var(--af-text);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pkg:hover, .pkg:focus-visible {
  background: var(--af-accent-tint); border-color: var(--af-accent);
  box-shadow: 0 10px 26px rgba(26,86,219,.14); transform: translateY(-3px);
  color: var(--af-text);
}
.pkg-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--af-accent-tint); color: var(--af-accent);
}
.pkg:hover .pkg-ico { background: var(--af-white); }
.pkg-ico .ico { width: 24px; height: 24px; }
.pkg h3 { font-size: 1.12rem; font-weight: 800; color: var(--af-dark); }
.pkg .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pkg .tag {
  background: var(--af-grey-light); border: 1px solid var(--af-line);
  color: var(--af-text); border-radius: 999px; padding: 3px 10px;
  font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.pkg:hover .tag { background: var(--af-white); border-color: var(--af-blue-soft); }
.pkg-price {
  margin-top: auto; padding-top: 12px;
  font-family: var(--af-font-number); font-weight: 700; font-size: 1.5rem;
  color: var(--af-dark); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.pkg-price .lbl {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--af-muted); margin-bottom: 2px;
}
.pkg-price .per { font-size: .9rem; font-weight: 600; color: var(--af-muted); }
.pkg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--af-line); padding-top: 11px;
  font-size: .84rem; font-weight: 600; color: var(--af-muted);
}
.pkg:hover .pkg-foot { border-color: var(--af-blue-soft); }
.pkg-foot .go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--af-accent); color: var(--af-white); font-weight: 700;
}

/* ---------- 5. numbers ki patti ---------- */
.proof-bar { border-top: 1px solid var(--af-line); }
.proof-item strong { font-size: 1.6rem; font-weight: 800; color: var(--af-accent); }
.proof-item .proof-ico { opacity: 1; }

/* ---------- 6. 3 qadam ---------- */
.steps { grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border-radius: 16px; border-color: var(--af-line); }
.step:hover { border-color: var(--af-accent); }
.step .num { background: var(--af-accent); color: var(--af-white); }

/* ---------- 7. qeemat ka muqabla (nayi shakal) ---------- */
/* Table tang lagti thi — 4 column phone par nichore jate the. Ab har service
   ka apna card, aur bar dekhtay hi farq samajh aa jata hai. */
.vs-list { display: grid; gap: 14px; }
@media (min-width: 860px) { .vs-list { grid-template-columns: repeat(2, 1fr); } }
.vs-card {
  background: var(--af-white); border: 1.5px solid var(--af-line);
  border-radius: 16px; padding: 18px 20px;
}
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vs-head h3 { font-size: 1.02rem; font-weight: 800; color: var(--af-dark); }
.vs-save {
  background: var(--af-accent-tint); color: var(--af-accent-dark);
  border-radius: 999px; padding: 4px 12px; font-size: .74rem; font-weight: 700;
  white-space: nowrap;
}
.vs-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; margin-bottom: 9px; }
.vs-row:last-child { margin-bottom: 0; }
.vs-name { font-size: .82rem; color: var(--af-muted); font-weight: 600; }
.vs-track { height: 12px; background: var(--af-grey-light); border-radius: 999px; overflow: hidden; }
.vs-fill { display: block; height: 100%; background: var(--af-line); border-radius: 999px; }
.vs-amt {
  font-family: var(--af-font-number); font-size: .9rem; font-weight: 600;
  color: var(--af-muted); font-variant-numeric: tabular-nums; min-width: 74px; text-align: right;
}
.vs-row.is-us .vs-name { color: var(--af-accent); font-weight: 800; }
.vs-row.is-us .vs-fill { background: var(--af-accent); }
.vs-row.is-us .vs-amt { color: var(--af-dark); font-weight: 800; font-size: 1rem; }
.vs-note { max-width: 46rem; margin-left: auto; margin-right: auto; text-align: center; margin-top: 18px; }
@media (max-width: 400px) { .vs-row { grid-template-columns: 78px 1fr auto; } }

/* ---------- 8. app ka preview (chhota) ---------- */
.mini-title {
  text-align: center; font-family: var(--af-font-heading); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--af-muted);
}
.mini-sub { text-align: center; color: var(--af-muted); font-size: .92rem; margin: 4px 0 20px; }
#andar-se { padding-top: 34px; padding-bottom: 34px; }

/* ---------- 9. reviews ---------- */
.says { border-radius: 16px; }
.says-stars { display: block; color: #F5A524; letter-spacing: 2px; font-size: .95rem; margin-bottom: 8px; }
.says blockquote { color: var(--af-dark); }

/* ---------- 10. bharosa ---------- */
.trust { border-left: 4px solid var(--af-accent); border-radius: 14px; }
.trust-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 11. FAQ ---------- */
.faq details { border-radius: 12px; border-color: var(--af-line); }
.faq details[open] { border-color: var(--af-accent); background: var(--af-white); }
.faq summary { font-weight: 700; }

/* ---------- 12. form + footer ---------- */
.lead-card { border: 1.5px solid var(--af-line); border-radius: 18px; }
footer.site { background: var(--af-navy-deep2); }
footer.site a:hover { border-bottom-color: var(--af-blue-soft); }

/* ---------- 13. ek ek kar ke ubharna khatam ---------- */
/* Team: "change the command of highlighting one option at a time, other wise
   user will get confuse". Section ab bhi narmi se aata hai, magar us ke andar
   ke cards ek saath. */
.js-anim .reveal-stagger > * { transition-delay: 0s !important; }

/* ---------- 14. tax calculator ke sawal ---------- */
/* Pehle "Mahana" aur "Salary" khud tick hote the. Ab kuch bhi pehle se chuna
   hua nahi — is liye sawal ka lafz bhi saaf likha hai. */
.opt-q {
  display: block; margin-top: 18px; margin-bottom: 6px;
  font-weight: 700; color: var(--af-dark); font-size: .95rem;
}
.option-card:has(input:checked) {
  border-color: var(--af-accent); background: var(--af-accent-tint);
  box-shadow: inset 0 0 0 1px var(--af-accent);
}

/* Hero ke upar ki khali jagah kam — pehle section ki padding aur card ka
   margin dono lag rahe the, upar 90px khali para tha. */
#main > .d-hero { padding-top: 0; padding-bottom: 0; margin-top: 16px; }
@media (min-width: 760px) { #main > .d-hero { margin-top: 22px; } }

/* Rakam ke saath "se" / "from" — chhota, halka, ek hi qatar mein */
.pkg-price .pre, .pkg-price .post {
  font-size: .82rem; font-weight: 600; color: var(--af-muted);
  text-transform: none; letter-spacing: 0;
}
.pkg-price .pre { margin-right: 5px; }
.pkg-price .post { margin-left: 5px; }

/* Calculator ka form — pehle rakam wala khana chhota sa inline box tha
   (.card-box par form ki styling nahi lagti thi). Ab poori chaurai. */
.calc-form label { display: block; font-weight: 700; color: var(--af-dark); margin-bottom: 6px; font-size: .95rem; }
.calc-form input[type="text"], .calc-form input[name="amount"] {
  width: 100%; padding: 13px 14px; min-height: 48px; font-size: 1.05rem;
  border: 1.5px solid var(--af-line); border-radius: var(--af-radius);
  font-family: var(--af-font-number); font-weight: 600; color: var(--af-dark);
  font-variant-numeric: tabular-nums;
}
.calc-form input[name="amount"]:focus-visible { border-color: var(--af-accent); }
.calc-form .field-error { margin-bottom: 10px; }

/* Andar ke safhon ka hero bhi ab UPPERCASE nahi — baqi site jaisa */
.d-page-hero h1 { text-transform: none; letter-spacing: -0.025em; }
.d-page-hero h1 .g { color: var(--af-blue-soft); }

/* Muqable ki bar: doosron ki lakeer thori gehri, warna nazar hi nahi aati */
.vs-fill { background: #B9C6DA; }
.vs-row.is-us .vs-fill { background: var(--af-accent); }

/* Chhote phone par header ki qatar: logo do lines mein tut raha tha (zuban ka
   switch aane se jagah kam ho gayi). Sab kuch thora chhota, logo ek hi line. */
@media (max-width: 520px) {
  .logo { font-size: 1rem; white-space: nowrap; }
  .logo img { height: 26px; margin-right: 7px; }
  .lang-sw a { min-width: 32px; padding: 0 8px; font-size: .72rem; }
  .site-bar { gap: 8px; }
  .nav-right { gap: 7px; }
}
@media (max-width: 400px) {
  .nav-mob summary span { display: none; }
  .nav-mob summary { padding: 0 12px; }
}

/* Phone par hero ke do button ek hi qatar mein */
@media (max-width: 520px) {
  .d-hero-cta .btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; }
}

/* Pricing hero ka halka pill: .d-page-hero p ka safed rang jeet raha tha aur
   light-blue par safed matn nazar nahi aata tha */
.d-page-hero .svc-guide-line { color: var(--af-text); }
.d-page-hero .svc-guide-line a { color: var(--af-accent); }

/* Section ki oopar-neeche jagah thori kam — safha "blog jaisa lamba" na lage */
section { padding: 38px 0; }
@media (min-width: 768px) { section { padding: 56px 0; } }


/* ==========================================================================
   STAFF SIDEBAR SHELL (2026-08-15)
   Reskin: ops pages → ops.markupvalley.com style (purple, dark rail, light sidebar)
           sales pages → sales.markupvalley.com style (blue, dark-blue rail, white sidebar)
   Purana top-nav (.snav) ab render nahi hota; CSS rehne dein rollback ke liye.
   ========================================================================== */

/* --- body grid when sidebar is present --- */
body:has(.app-rail) {
  display: grid;
  grid-template-columns: 48px 220px 1fr;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

/* --- mobile bar (hidden on desktop) --- */
.app-mob-bar { display: none; }
.app-overlay { display: none; }

/* --- icon rail (column 1) --- */
.app-rail {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 40;
}
.ar-logo {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; text-decoration: none;
  margin-bottom: 12px; flex-shrink: 0;
}
.ar-btn {
  width: 36px; height: 36px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background .12s; flex-shrink: 0;
}
.ar-ico { width: 18px; height: 18px; }
.ar-spacer { flex: 1; }
.ar-logout { margin-bottom: 4px; flex-shrink: 0; }
.ar-logout button {
  width: 36px; height: 36px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
}

/* rail — ops (green / charcoal) */
.app-rail--ops { background: #2C3E50; }
.app-rail--ops .ar-logo { background: #27AE60; color: #fff; }
.app-rail--ops .ar-btn { color: #7f8c9a; }
.app-rail--ops .ar-btn:hover { background: rgba(255,255,255,.08); color: #b0bec5; }
.app-rail--ops .ar-btn.is-on { background: rgba(39,174,96,.2); color: #5FD68E; }
.app-rail--ops .ar-logout button { color: #7f8c9a; }
.app-rail--ops .ar-logout button:hover { color: #b0bec5; }

/* rail — sales (same green / charcoal — unified brand) */
.app-rail--sales { background: #2C3E50; }
.app-rail--sales .ar-logo { background: #27AE60; color: #fff; }
.app-rail--sales .ar-btn { color: #7f8c9a; }
.app-rail--sales .ar-btn:hover { background: rgba(255,255,255,.08); color: #b0bec5; }
.app-rail--sales .ar-btn.is-on { background: rgba(39,174,96,.2); color: #5FD68E; }
.app-rail--sales .ar-logout button { color: #7f8c9a; }
.app-rail--sales .ar-logout button:hover { color: #b0bec5; }

/* --- sidebar (column 2) --- */
.app-sidebar {
  grid-column: 2;
  overflow-y: auto;
  padding: 14px 12px;
  font-family: var(--af-font-body);
  font-size: 13px;
  z-index: 39;
}
.as-head { margin-bottom: 18px; }
.as-logo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.as-logo-mark {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.as-logo-text { font-weight: 700; font-size: 14px; }
.as-user { font-size: 12px; display: block; margin-left: 34px; }
.as-group-label {
  font-size: 11px; text-transform: uppercase;
  font-weight: 600; letter-spacing: .5px;
  margin-bottom: 6px; padding: 0 10px;
}
.as-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px;
  text-decoration: none; font-weight: 500;
  margin-bottom: 1px; transition: background .1s; min-height: 34px;
}
.as-ico { width: 16px; height: 16px; flex-shrink: 0; }

/* sidebar — ops (white bg, green accent) */
.app-sb--ops {
  background: #fff; border-right: 1px solid #e4e7ec;
}
.app-sb--ops .as-logo-mark { background: #27AE60; }
.app-sb--ops .as-logo-text { color: #2C3E50; }
.app-sb--ops .as-user { color: #7f8c8d; }
.app-sb--ops .as-group-label { color: #7f8c8d; }
.app-sb--ops .as-link { color: #34495E; }
.app-sb--ops .as-link:hover { background: #f0f9f2; }
.app-sb--ops .as-link.is-on { background: #E8F5E9; color: #1E8449; }

/* sidebar — sales (same green — unified brand) */
.app-sb--sales {
  background: #fff; border-right: 1px solid #e4e7ec;
}
.app-sb--sales .as-logo-mark { background: #27AE60; }
.app-sb--sales .as-logo-text { color: #2C3E50; }
.app-sb--sales .as-user { color: #7f8c8d; }
.app-sb--sales .as-group-label { color: #7f8c8d; }
.app-sb--sales .as-link { color: #34495E; }
.app-sb--sales .as-link:hover { background: #f0f9f2; }
.app-sb--sales .as-link.is-on { background: #E8F5E9; color: #1E8449; }

/* --- main content (column 3) --- */
body:has(.app-rail) > .admin-body {
  grid-column: 3;
  padding: 20px 28px;
  overflow-y: auto;
  background: #fff;
}

/* --- mobile: sidebar overlay + top bar --- */
@media (max-width: 767px) {
  body:has(.app-rail) {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .app-mob-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; color: #fff;
    position: sticky; top: 0; z-index: 50; min-height: 48px;
  }
  .app-mob--ops { background: #2C3E50; }
  .app-mob--sales { background: #2C3E50; }
  .mob-menu {
    width: 36px; height: 36px;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; padding: 0;
  }
  .mob-menu svg { width: 22px; height: 22px; }
  .mob-title { font-weight: 700; font-size: 15px; flex: 1; }
  .ar-logout-mob { margin: 0; }
  .mob-logout {
    background: none; border: 1px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.85); padding: 5px 12px; border-radius: 999px;
    font-size: 12px; cursor: pointer;
  }
  .app-rail { display: none; }
  .app-sidebar {
    position: fixed; left: 0; top: 0;
    width: 260px; height: 100vh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  .app-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 55; display: none;
  }
  body.sb-open .app-sidebar { transform: translateX(0); }
  body.sb-open .app-overlay { display: block; }
  body:has(.app-rail) > .admin-body {
    padding: 16px; overflow-y: visible;
  }
}

/* Wealth statement ka hisaab poora na ho — client ko wahin, usi form ke upar.
   Spec: features/wealth-reconcile §5. */
.wealth-gap {
  border: 1px solid #E5B4B4; background: #FDF6F6; border-radius: 12px;
  padding: 16px 18px; margin: 18px 0 4px;
}
.wealth-gap-title { margin: 0 0 6px; font-size: .95rem; color: #8A2B2B; }
.wealth-gap-msg { margin: 0 0 12px; font-size: .9rem; line-height: 1.65; color: var(--af-text); }
.wealth-gap-sum {
  background: #fff; border: 1px solid #EEE; border-radius: 10px;
  padding: 10px 12px; margin: 0 0 10px;
}
.wealth-gap-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .85rem; padding: 5px 0; color: var(--af-text);
}
.wealth-gap-row.is-total { border-top: 1px solid #EEE; margin-top: 4px; padding-top: 8px; font-weight: 600; }
.wealth-gap-row.is-stated { color: var(--af-muted); }
.wealth-gap-row.is-gap {
  border-top: 2px solid #E5B4B4; margin-top: 4px; padding-top: 8px;
  font-weight: 700; color: #8A2B2B;
}
.wealth-gap-note { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--af-muted); }

/* Client detail page */
.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0; }
@media (max-width: 768px) { .cd-grid { grid-template-columns: 1fr; } }
.cd-card { background: var(--af-grey-light, #f8f9fa); border-radius: 8px; padding: 16px; }
.cd-card h3 { margin: 0 0 12px; font-size: 15px; border-bottom: 2px solid var(--af-green, #16a34a); padding-bottom: 6px; }
.cd-field { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.cd-field:last-child { border-bottom: none; }
.cd-label { color: var(--af-muted); font-size: 13px; }
.cd-value { font-weight: 600; text-align: right; max-width: 60%; word-break: break-word; }
.cd-full { grid-column: 1 / -1; }
.cd-section { margin: 24px 0 8px; font-size: 16px; font-weight: 700; }
.cd-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.cd-badge-green { background: #dcfce7; color: #166534; }
.cd-badge-yellow { background: #fef9c3; color: #854d0e; }
.cd-badge-red { background: #fee2e2; color: #991b1b; }
.cd-badge-grey { background: #f3f4f6; color: #374151; }
.cd-iris { background: #fef3c7; border: 1px solid #fbbf24; border-radius: 8px; padding: 12px 16px; margin: 8px 0; }
.cd-timeline { max-height: 300px; overflow-y: auto; }
.cd-event { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13px; }
.cd-event-time { color: var(--af-muted); font-size: 12px; }
.cd-sep { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.1); }
.cd-label-bold { font-weight: 600; }
.cd-docs-head { margin-top: 16px; }

/* Needs-attention items ke do tick, aur client ko bhejne wala email draft.
   Spec: features/client-query-email. */
.na-item { display: flex; flex-direction: column; gap: 8px; }
.na-reason { margin: 0; line-height: 1.6; }
.na-ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.na-ticks label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; cursor: pointer; }

.query-email {
  border: 1px solid var(--af-line, #E4E4E4); border-radius: 12px;
  padding: 16px 18px; margin: 20px 0 4px; background: var(--af-grey-light, #F8F9FA);
}
.query-email-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.query-email-head h3 { margin: 0; }
.query-email label { display: block; font-size: .8rem; color: var(--af-muted, #666); margin-bottom: 4px; }
.query-email input, .query-email textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--af-line, #DDD);
  border-radius: 8px; font: inherit; background: #fff; color: var(--af-text, #2D3748);
}
.query-email-body { line-height: 1.7; resize: vertical; min-height: 240px; white-space: pre-wrap; }

/* ---------- "Choose your tier" strip + footer compliance (tiers) ---------- */
.tier-strip { background: var(--af-grey-light); padding: 26px 0 30px; }
.tier-strip-title {
  text-align: center; font-family: var(--af-font-heading); font-weight: 700;
  font-size: 1.05rem; color: var(--af-dark); margin-bottom: 16px;
}
.tier-strip-grid { display: grid; gap: 10px; }
@media (min-width: 620px) { .tier-strip-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .tier-strip-grid { grid-template-columns: repeat(4, 1fr); } }
.tier-tile {
  display: block; background: var(--af-white); border: 1px solid var(--af-grey-border);
  border-left: 3px solid var(--af-primary); border-radius: var(--af-radius);
  padding: 14px 16px; text-decoration: none; color: var(--af-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tier-tile:hover { border-color: var(--af-gold); box-shadow: var(--af-shadow); color: var(--af-text); }
.tier-tile strong {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--af-font-heading); color: var(--af-dark); font-size: .98rem;
}
.tier-tile span { display: block; font-size: .84rem; line-height: 1.45; margin-top: 3px; }
.tier-tile-pre { border-left-color: var(--af-navy-deep); }
.tier-tile-pre strong { color: var(--af-navy-deep); }
.tier-tile-fi { border-left-color: var(--af-gold); }
.tier-tile .ext-ic { width: 13px; height: 13px; color: var(--af-muted); }

.foot-compliance { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; }
.foot-compliance:hover { color: #fff; text-decoration: underline; }

/* tier chips + filter (admin/staff leads) */
.tier-filter { display: inline-flex; gap: 6px; align-items: center; margin-left: 10px; }
.tier-filter .chip { text-decoration: none; cursor: pointer; }
.tier-chip-pre { background: var(--af-gold-light); border: 1.5px solid var(--af-gold); color: var(--af-dark); }
.tier-chip-cor { background: var(--af-navy-deep); border: 1.5px solid var(--af-navy-deep); color: var(--af-white); }