:root{
  --bg:#02243d; --bg2:#0a1e18; --panel:#0f2820; --panel2:#132f26; --line:#1f4034;
  --ink:#eaf5ef; --muted:#93b3a3; --faint:#8fb3a1;
  --accent:#7ad4a3; --accent-ink:#04170f; --accent-soft:#173d2d;
  --warm:#f0b866; --bad:#ef7676;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Naskh Arabic",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Naskh Arabic","Noto Sans Devanagari",sans-serif;
}
:root[data-theme="light"]{
  --bg:#f3f9f5; --bg2:#e9f3ec; --panel:#ffffff; --panel2:#f1f8f3; --line:#d8e8de;
  --ink:#0f2a1e; --muted:#4a6858; --faint:#5c7668;
  --accent:#1f7a4d; --accent-ink:#ffffff; --accent-soft:#dff0e6;
  --warm:#8a5a0d; --bad:#b03636;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#f3f9f5; --bg2:#e9f3ec; --panel:#ffffff; --panel2:#f1f8f3; --line:#d8e8de;
  --ink:#0f2a1e; --muted:#4a6858; --faint:#5c7668;
  --accent:#1f7a4d; --accent-ink:#ffffff; --accent-soft:#dff0e6; --warm:#8a5a0d; --bad:#b03636;
}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* futuristic ambient background: faint grid + mouse-reactive particle net (behind all content) */
.fx{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000 45%,transparent 100%);
          mask-image:radial-gradient(130% 100% at 50% 0%,#000 45%,transparent 100%)}
/* keep content above the fx layer even where a section sets its own bg */
.utilbar,header.nav,section,footer.foot,.chatwidget{position:relative;z-index:1}
:root{--page-max:min(1180px,96vw)}  /* 1180 = 760px reading measure + its padding + gutter + 320px sidebar. At 1400 the main column took every spare pixel and left a 320px hole between the text and the sidebar on a wide screen. */
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 22px}
/* ALIGN_PATCH — one left edge down the whole site.
   The nav and the content grid are both min(1400px,96vw) and already agree.
   These two rules bring back the pages that drifted: measured at 1280px, the
   article started 74px right of the logo and home 52px, because each centred a
   narrower box inside a wider one. Line lengths are untouched - only the edge
   the box is anchored to. */
@media(min-width:1260px){.page-sb-main .wrap{margin-inline:0}}
/* The footer is outside the grid, so neither the grid rule nor the
   no-grid rule reached it: on an article it centred a 1080px box inside
   1280 and sat at 100 while the header above it sat at 48. */
footer.foot>.wrap,footer .wrap{max-width:var(--page-max)}
@media(min-width:1260px){.page-sb-main>.band>.wrap,.page-sb-main>.wrap{margin-inline:0}}
/* Home never enters the grid, so it needs the grid's box to line up with the
   header it sits under. */
body:not(:has(.page-sb)) .wrap:not(.wide){max-width:var(--page-max)}
.wrap.wide{max-width:var(--page-max)}  /* was min(1560px,94vw): at 1280 that is 1203 centred, which put the
     hero 12px inside the edge the nav and every other band sit on. */   /* full-bleed hero + trackers */.nav>.wrap{max-width:var(--page-max)}   /* same box as everything else *//* NAV_AUTHORITY_PATCH */

/* header */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;gap:20px;height:86px}
.brand{font-weight:800;font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.brand .m{font-size:20px}
.nav nav{display:flex;gap:22px;margin-left:14px}
.nav nav a{color:var(--muted);font-size:14.5px;font-weight:500}
.nav nav a:hover{color:var(--ink)}
.nav .spacer{flex:1}
/* A base .btn with no colour of its own inherited white, which is
   invisible on a light page when no variant class is applied. */
.btn{color:var(--ink);display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 18px;font-weight:700;font-size:14.5px;border:1px solid transparent;cursor:pointer}
/* #4dda8a on a light page is 1.56:1. Solid WhatsApp green with white ink
   reads in both themes and matches what the button is for. */
.btn-wa{background:#00703c;color:#fff;border:1px solid #00703c;text-shadow:0 1px 1px rgba(0,0,0,.18);gap:12px}
.wa-link{color:#25D366!important;display:inline-flex!important;align-items:center;gap:8px;font-weight:600}
.wa-link .wa-ico{width:1.1em;height:1.1em}
.wa-link:hover{color:#1ebe5d!important}
.btn-wa:hover{background:#1ebe5d;border-color:#1ebe5d}
.wa-ico{width:1.2em;height:1.2em;flex-shrink:0;display:inline-block;vertical-align:-.2em}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
/* Tokens, not white literals. These were invisible in light theme -
   text 1.04:1, border 1.01:1 - because all three values were rgba white. */
.btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5);color:#fff}
.btn:hover{filter:brightness(1.05)}
/* NAV_SHRINK: the menu wins ties. A clipped nav item is a page nobody can
   reach; a narrower search field is a field. Below the floor there is not
   room for both and the field steps aside entirely. */
.hsearch{position:relative;display:flex;align-items:center;margin-left:auto;flex:0 1 auto;min-width:0}
.hsearch input{min-width:0}
#mainnav{flex:0 1 auto;min-width:0}
@media(min-width:881px) and (max-width:1240px){.hsearch{display:none}}
.hsearch input{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:7px 34px 7px 14px;font-size:13.5px;width:142px;
  font-family:inherit;outline:none;transition:width .18s ease,border-color .18s ease}
.hsearch input:focus{border-color:var(--accent);width:208px}
.hsearch input::placeholder{color:var(--faint)}
/* The icon lives inside the field. No second border, no seam, and nothing
   to hover separately from the thing it belongs to. */
.hsearch button{position:absolute;right:3px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:5px 8px;cursor:pointer;color:var(--faint);
  display:flex;align-items:center;line-height:0;transition:color .16s ease}
.hsearch button:hover,.hsearch input:focus ~ button{color:var(--accent)}
.hsearch button svg{width:15px;height:15px;display:block}
/* Safari draws its own clear button on type=search and it collides with ours. */
.hsearch input::-webkit-search-decoration,.hsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
@media(max-width:820px){.hsearch{display:none}}
@media(min-width:821px) and (max-width:880px){.hsearch input{width:112px}}
/* HEADER_FIT - keep the header row inside the viewport above the mobile
   breakpoint. Without these the row is wider than the screen from 821px to
   about 1300px and the whole page scrolls sideways. */
@media(min-width:881px){
  .nav .row{min-width:0}
  .nav nav{min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav nav::-webkit-scrollbar{display:none}
  .brand,.hsearch,.wa-head,.navtoggle{flex-shrink:0}
}
/* Measured: the 5-link nav is clean from 1078px with the button shown. */
@media(max-width:1100px){.wa-head{display:none}}
.themetog{background:rgba(255,255,255,.14);border:0;border-radius:999px;cursor:pointer;
  color:inherit;font-family:inherit;font-size:14px;line-height:1;padding:6px 10px;margin-left:10px}
.themetog:hover{background:rgba(255,255,255,.26)}
.themetog:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.themetog .tt-ic::before{content:"🌙"}
:root[data-theme="light"] .themetog .tt-ic::before{content:"☀️"}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .themetog .tt-ic::before{content:"☀️"}}
/* Pinned ltr: this control CHANGES the page direction, so it must not be
   laid out by it - otherwise the two buttons trade places as you press
   them and the switcher looks like it is showing the wrong language. */
.utilbar .langtog{display:inline-flex;direction:ltr}
/* ---- CRISIS_LINK_CONTRAST -------------------------------------------
   .utilbar uses a 90deg gradient, which is physical and does not mirror,
   while its contents do. In Urdu the crisis link lands on the dark end:
   measured 1.43:1. It failed AA in English too, at 2.74:1. A crisis link
   cannot depend on where it happens to fall in a gradient. */
.utilbar a[href="/questions"]{
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  padding:7px 14px;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.utilbar a[href="/questions"]:hover{background:rgba(0,0,0,.5)}
.utilbar .util-tag{text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* The language control must never be squeezed: it was clipped by ~10px in
   Urdu because the longer Urdu crisis text pushed it past the edge. */
.utilbar .langtog{flex-shrink:0}
.utilbar .row{flex-wrap:wrap;row-gap:6px}

.langtog button{transition:background .12s,color .12s}
.langtog button.on{background:var(--accent);color:var(--accent-ink);font-weight:800}
.util-tag{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.util-tag{display:none}}
.srch-wrap{max-width:760px}
.srch-box{display:flex;gap:8px;margin:18px 0 6px}
.srch-box input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);
  color:var(--ink);border-radius:10px;padding:12px 15px;font-size:15.5px;font-family:inherit;outline:none}
.srch-box input:focus{border-color:var(--accent)}
/* NAV_STICKY_GUARD - this rule was silently deleted once by a stray "//"
   comment above it, which broke the mobile menu completely. Restated here so
   a parse error further up cannot take it out again. */
header.nav{position:sticky;top:0;z-index:50}
.nav nav{z-index:51}
@media(max-width:880px){
  header.nav.open nav{display:flex;box-shadow:0 18px 36px -12px rgba(0,0,0,.55)}
  .nav nav a{min-height:46px;display:flex;align-items:center}
}
/* LANGTOG_ON_UTILBAR — the toggle sits on the utility bar's coloured
   gradient, not on a dark panel, so it needs its own treatment. Anything
   inheriting the panel styling looked like a stray grey box. */
.utilbar .langtog{
  display:inline-flex;align-items:center;margin:0;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 1px 3px rgba(6,26,18,.18);
}
.utilbar .langtog button{
  background:rgba(0,0,0,.3);border:0;cursor:pointer;
  color:#fff;font-family:var(--sans);font-weight:700;
  font-size:12.5px;line-height:1;letter-spacing:.02em;
  padding:7px 14px;min-height:30px;
  text-shadow:0 1px 2px rgba(6,26,18,.35);
  transition:background .15s,color .15s;
}
.utilbar .langtog button:hover{background:rgba(255,255,255,.2)}
.langtog button.busy{opacity:.65}
.langtog button.busy::after{content:"";display:inline-block;width:7px;height:7px;margin-inline-start:6px;border-radius:50%;background:currentColor;animation:langpulse 1s ease-in-out infinite}
@keyframes langpulse{0%,100%{opacity:.25}50%{opacity:1}}
.utilbar .langtog button.on{
  background:#fff;color:#0f2a1e;text-shadow:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}
/* A white ring on a pale pill measured 1.25:1. Dark ring plus a white
   halo works on every part of the gradient. */
.utilbar .langtog button:focus-visible,.utilbar .themetog:focus-visible{outline:2px solid #04120d;outline-offset:-2px;box-shadow:0 0 0 4px rgba(255,255,255,.9)}
/* The Urdu label needs a little more room than "EN". */
.utilbar .langtog button[data-lang="ur"]{font-size:13.5px;padding:6px 14px}

@media(max-width:640px){
  /* The bar centres and drops its tagline on small screens; keep the toggle
     and the crisis link both visible and comfortably tappable. */
  .utilbar .row{gap:10px;flex-wrap:nowrap;padding:6px 22px}
  .utilbar .langtog button{padding:7px 12px;min-height:32px}
  .utilbar a{font-size:12px;white-space:nowrap}
}
/* A nav label that breaks mid-word reads as broken, not as a menu. If the
   bar is tight it should wrap BETWEEN items. */
#mainnav a{white-space:nowrap}
/* LEARN_SUBMENU (owner, 20 Sep 2026): every guide hangs off "Learn". Before
   this they were reachable only from the footer and the /learn grid, and the
   sidebar rail that lists them is desktop-only above 1260px. */
#mainnav .has-sub{position:relative;display:inline-flex;align-items:center}
#mainnav .sub-head{display:inline-flex;align-items:center}
#mainnav .sub-head>a::after{content:"▾";margin-inline-start:5px;font-size:11px;opacity:.65}
/* The caret button is the phone affordance. On a pointer screen the submenu
   opens on hover and focus, so the button would be a second control doing the
   same job. */
#mainnav .subtog{display:none;background:none;border:0;color:inherit;cursor:pointer;
  font-size:15px;line-height:1;padding:0;font-family:inherit}
@media(min-width:881px){
  #mainnav .submenu{position:absolute;top:100%;inset-inline-start:-14px;min-width:278px;
    background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:6px;
    box-shadow:0 18px 36px -12px rgba(0,0,0,.45);display:none;flex-direction:column;z-index:60}
  #mainnav .has-sub:hover .submenu,#mainnav .has-sub:focus-within .submenu{display:flex}
  #mainnav .submenu a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;white-space:normal;line-height:1.35}
  #mainnav .submenu a:hover,#mainnav .submenu a:focus-visible{background:color-mix(in srgb,var(--line) 45%,transparent)}
}
@media(max-width:880px){
  #mainnav .has-sub{display:block;width:100%}
  #mainnav .sub-head>a::after{display:none}
  /* Closed by default. Before this the guide list was rendered open, so the
     drawer began with thirteen article links and every item below Learn was
     off the bottom of the screen. */
  #mainnav .submenu{display:none;flex-direction:column}
  #mainnav .has-sub.open .submenu{display:flex}
  #mainnav .submenu a{padding-inline-start:40px;font-size:14.5px;opacity:.92}
  #mainnav .sub-head{display:flex;align-items:center;width:100%;
    border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
  #mainnav .sub-head>a{flex:1;border-bottom:0}
  #mainnav .subtog{display:inline-flex;align-items:center;justify-content:center;
    width:52px;min-height:48px;color:var(--muted);transition:transform .18s ease}
  #mainnav .has-sub.open .subtog{transform:rotate(180deg);color:var(--accent)}
}
/* NAV_FIT: was capped at 1360px, from when the nav grew with the window.
   The container is a fixed 1180 now, so the nav is just as tight at 1920
   as at 1280 and this has to apply at every desktop width. */
@media(min-width:881px){
  #mainnav{gap:12px}
  #mainnav a{font-size:14px}
}
/* The drawer copies of the header controls. Above the mobile breakpoint the
   header row carries them, so this block is not rendered there. */
.navextra{display:none}
@media(max-width:880px){
  .navextra{display:flex;flex-direction:column;gap:10px;padding:12px 18px 14px;
    border-bottom:1px solid var(--line)}
  .nx-search{display:flex;align-items:center}
  .nx-search input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);
    border-right:0;color:var(--ink);border-radius:10px 0 0 10px;padding:11px 14px;
    font-size:15px;font-family:inherit;outline:none}
  .nx-search input:focus{border-color:var(--accent)}
  .nx-search button{background:var(--panel);color:var(--ink);border:1px solid var(--line);
    border-left:0;border-radius:0 10px 10px 0;padding:11px 14px;cursor:pointer;font-size:15px}
  .nx-wa{justify-content:center;width:100%;min-height:46px}
  /* .nav nav a gives every drawer row a bottom rule; this one is a button. */
  #mainnav .navextra a{border-bottom:0;padding:10px 18px;font-size:15px}
  /* .nav nav a sets a muted link colour and outranks .btn-wa, so without
     this the white label on the WhatsApp green came out grey-green. */
  #mainnav .navextra .nx-wa{color:#fff;font-weight:700;font-size:15px}
}

/* ── the Noah film over the hero ─────────────────────────────────────
   The hero inside this wrapper is untouched; the film sits on top of it
   and fades away to reveal it. */
.hfwrap{position:relative}
/* The hero runs about two thousand pixels tall on a phone, so a layer on
   inset:0 put the Talk to our team button at y=1914 - far below the fold,
   which broke the one rule this whole thing was built around. The film
   covers at most one screenful, so its buttons are always in view. */
.hfilm{position:absolute;top:0;left:0;right:0;bottom:auto;
  height:min(100%,100svh);z-index:6;background:#040708;
  overflow:hidden;opacity:1;transition:opacity 1.1s ease}
.hfilm.gone{opacity:0;pointer-events:none}
/* hidden is a UA stylesheet rule, so any display: below beats it - and two
   of them did, which is why Skip left the film on the page on a phone.
   This stays true however the layout rules change later. */
.hfilm[hidden],.hfthumb[hidden]{display:none!important}
.hfvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:#040708}
/* Keeps the burned-in titles legible over any frame. */
.hfedge{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 88% 76% at 50% 46%,rgba(0,0,0,0) 44%,rgba(0,0,0,.26) 78%,rgba(0,0,0,.62) 100%),
  linear-gradient(to top,rgba(4,7,8,.80) 0%,rgba(4,7,8,.18) 26%,rgba(4,7,8,0) 48%)}
/* Clear of the floating chat widget, which is fixed to the bottom right. */
/* Upper left, well above the controls that live along the bottom. The old
   burned-in text sat in the same corner as Sound and Skip and was printed
   straight through them. */
.hfcards{position:absolute;left:clamp(20px,4.5vw,64px);top:clamp(18px,7%,64px);
  right:clamp(20px,4.5vw,64px);z-index:4;pointer-events:none;
  max-width:min(760px,62%)}
.hfcard{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateY(12px);
  transition:opacity .7s ease,transform .7s ease}
.hfcard.on{opacity:1;transform:none}
.hfk{display:block;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:#F6C21B;margin-bottom:9px;font-weight:700;
  text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}
.hfcard h2{font-family:var(--serif),Georgia,serif;font-weight:400;color:#fff;
  font-size:clamp(25px,3.4vw,52px);line-height:1.08;letter-spacing:-.01em;
  margin:0;text-shadow:0 2px 26px rgba(0,0,0,.8)}
.hfs{margin:11px 0 0;font-size:clamp(14px,1.35vw,19px);color:rgba(255,255,255,.88);
  text-shadow:0 2px 18px rgba(0,0,0,.8)}
.hfu{margin:14px 0 0;font-family:var(--serif),serif;direction:rtl;
  text-align:left;max-width:34ch;font-size:clamp(13.5px,1.3vw,20px);line-height:2;
  color:rgba(255,255,255,.9);text-shadow:0 2px 18px rgba(0,0,0,.85)}

.hfcta{position:absolute;right:22px;bottom:88px;z-index:3;display:flex;gap:10px;
  flex-wrap:wrap;justify-content:flex-end}
.hfcta a{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;
  border-radius:12px;font-weight:700;font-size:15px;text-decoration:none;
  backdrop-filter:blur(6px)}
.hfgo{background:#25D366;color:#fff}
.hfghost{background:rgba(4,7,8,.55);color:#F2EFE9;border:1px solid rgba(242,239,233,.34)}
/* The last frame is the ark of lights - the moment to ask. */
.hfilm.hold .hfgo{box-shadow:0 0 0 4px rgba(37,211,102,.28);transform:scale(1.04)}
.hfilm.hold .hfgo,.hfilm.hold .hfghost{transition:transform .5s ease,box-shadow .5s ease}
.hftools{position:absolute;left:22px;bottom:88px;z-index:3;display:flex;gap:8px}
.hfbtn{min-height:36px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(242,239,233,.28);background:rgba(4,7,8,.5);color:#F2EFE9;
  font-family:inherit;font-size:13px;font-weight:600;backdrop-filter:blur(6px)}
.hfbtn:hover{border-color:#E8B059;color:#E8B059}
.hfbar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:rgba(242,239,233,.16)}
.hfbar i{display:block;height:100%;width:0;background:#E8B059}

/* The corner still, once they have seen it. */
.hfthumb{position:absolute;right:18px;bottom:88px;z-index:5;display:flex;
  align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:14px;
  cursor:pointer;border:1px solid rgba(242,239,233,.24);
  background:rgba(4,7,8,.62);backdrop-filter:blur(8px);color:#F2EFE9;
  font-family:inherit;text-align:left}
.hfthumb:hover{border-color:#E8B059}
.hfthumb img{width:88px;height:50px;object-fit:cover;border-radius:8px;display:block}
.hfplay{position:absolute;left:38px;font-size:16px;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hflabel{display:flex;flex-direction:column;font-size:14px;font-weight:700;
  line-height:1.2}
.hflabel em{font-style:normal;font-weight:400;font-size:12px;color:#AEB6B2}

@media(max-width:880px){
  /* A 16:9 frame cropped to a tall hero loses the burned-in titles, so on a
     phone the whole frame is shown and the bars are left black. */
  /* High in the frame rather than centred, so the letterbox is one band
     under the film instead of two thin ones. */
  .hfvid{object-fit:contain;object-position:center 16%}
  /* A column, not four things pinned to four edges: picture, words,
     buttons, together at the top. */
  .hfilm{display:flex;flex-direction:column}
  .hfvid{position:relative;inset:auto;width:100%;height:auto;
    aspect-ratio:16/9;flex:0 0 auto;object-fit:cover;object-position:center}
  /* The scrim exists to keep type legible over the picture; here the type
     sits underneath it, so it only darkens the shot for no reason. */
  .hfedge{display:none}
  .hfcards{position:relative;left:auto;right:auto;top:auto;
    margin:18px 18px 0;max-width:none;min-height:168px;flex:0 0 auto}
  .hftools{position:relative;left:auto;right:auto;bottom:auto;order:3;
    margin:2px 18px 0;justify-content:flex-start;gap:8px;flex:0 0 auto}
  .hfcta{position:relative;left:auto;right:auto;bottom:auto;order:4;
    margin:14px 18px 16px;justify-content:stretch;flex:0 0 auto}
  .hfcard h2{font-size:clamp(21px,5.6vw,30px)}
  .hfs{font-size:13.5px}
  .hfu{font-size:13px;line-height:1.95}
  .hfcta a{flex:1;justify-content:center;min-height:46px;padding:0 12px;font-size:14.5px}
  .hfthumb{right:12px;bottom:84px;padding:6px 12px 6px 6px}
  .hfthumb img{width:64px;height:38px}
  .hfplay{left:28px;font-size:14px}
  .hflabel{font-size:12.5px}
  .hflabel em{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.hfilm{transition:none}}
.navtoggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:19px;cursor:pointer;margin-left:8px}
@media(max-width:880px){
  .navtoggle{display:inline-flex}
  .nav .row{gap:8px;height:82px}
  .nav .spacer{display:none}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:6px 0;display:none;
    box-shadow:0 16px 34px -14px rgba(0,0,0,.45);
    /* The guide submenu makes this taller than the screen; without its own
       scroll the items past the fold cannot be reached at all. */
    max-height:calc(100dvh - 82px);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
  header.nav.open nav{display:flex}
  .nav nav a{padding:13px 22px;font-size:16px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
  .nav nav a:last-child{border-bottom:0}
  .brand{margin-right:auto;font-size:16px}
  .wa-head{display:none}          /* WhatsApp reachable via hero CTA + chat + community */
  .langtog button{padding:6px 9px;font-size:12px}
  /* breathing room + readable type on phones */
  .hero{padding:28px 0 18px!important}
  .hero p.lead{font-size:15.5px;margin:14px 0 18px}
  .hero .trust{display:none}       /* trim hero so the counter rides above the fold */
  section.band{padding:20px 0}
  .promise{padding:22px}
  /* top bar: drop the long tagline, keep just the crisis CTA, centred */
  .utilbar .row{justify-content:center;height:auto;padding:7px 22px}
  .utilbar .row > span:first-child, .utilbar .spacer{display:none}
/* The crisis link must never be truncated mid-phrase. Below 480px it
   shows a shorter sentence rather than an ellipsis. */
.utilbar .cl-short{display:none}
/* hide-on-questions: the page itself leads with an ASK A QUESTION button,
   so the same words in the bar are just the label twice. */
body.on-questions .utilbar a[href="/questions"]{display:none}
@media(max-width:480px){
  .utilbar .cl-long{display:none}
  .utilbar .cl-short{display:inline}
}
  .utilbar{font-size:12px}
  .utilbar a{font-weight:800}
}
@media(max-width:420px){
  .trust .t{min-width:100%}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn{justify-content:center}
}
/* hero */
/* The rotating phrases wrap to different line counts, so the heading used to
   grow and shrink on every keystroke and drag the whole page with it.
   An invisible copy of the LONGEST phrase shares one grid cell with the live
   text: the grid sizes to its tallest child, so the box is always exactly
   tall enough and never moves. Correct at any width, font or zoom - which
   hand-picked min-heights are not. */
/* HERO_FIX2: the hidden sizer reserves the tallest phrase so the page does
   not jump while the headline types. With align-items:start a short phrase
   pinned to the top and left the rest as a 140px void above the Urdu line;
   centred, the same reservation reads as spacing. */
.tw-h1{display:grid;align-items:center}
.tw-h1 > .tw-sizer,.tw-h1 > .tw-live{grid-area:1/1}
.tw-sizer{visibility:hidden;pointer-events:none;user-select:none}
.tw-live{display:block}
.tw-cursor{display:inline-block;width:3px;height:.85em;background:currentColor;margin-left:4px;vertical-align:-.05em;animation:twblink .75s step-end infinite;border-radius:1px}
@keyframes twblink{0%,100%{opacity:1}50%{opacity:0}}
.hero{position:relative;overflow:hidden;padding:36px 0 18px;
  background:radial-gradient(900px 500px at 78% -12%,#123d2c 0%,transparent 60%),
             radial-gradient(700px 500px at 8% 0%,#0f3326 0%,transparent 55%)}
:root[data-theme="light"] .hero{background:radial-gradient(900px 500px at 78% -12%,#dcf0e4 0%,transparent 60%),radial-gradient(700px 500px at 8% 0%,#e6f4ea 0%,transparent 55%)}
/* Most readers never touch the switcher, so the OS preference needs the
   same treatment - guarded so an explicit dark choice still wins. */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .hero{background:radial-gradient(900px 500px at 78% -12%,#dcf0e4 0%,transparent 60%),radial-gradient(700px 500px at 8% 0%,#e6f4ea 0%,transparent 55%)}}
/* Warm, blurred Pakistani atmosphere behind the hero — text kept readable by a scrim */
.hero::before{content:"";position:absolute;inset:0;background:var(--herobg,url('/assets/hero/mosque.jpg')) center/cover no-repeat;
  opacity:var(--heroop,.55);filter:saturate(1.05) brightness(.96);z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 97%,transparent) 0%,color-mix(in srgb,var(--bg) 93%,transparent) 44%,color-mix(in srgb,var(--bg) 74%,transparent) 62%,color-mix(in srgb,var(--bg) 28%,transparent) 84%,transparent 100%)}
.hero .wrap{position:relative;z-index:1}
/* HERO_SCRIM: below 880 the hero text is full-width, so a left-to-right
   gradient leaves the end of every line sitting on bare photograph. */
@media(max-width:880px){.hero::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 86%,transparent) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 60%,color-mix(in srgb,var(--bg) 88%,transparent) 100%)}}
.hero .eyebrow{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.hero h1{font-family:var(--serif);font-size:clamp(34px,6vw,58px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;font-weight:600}
/* Urdu/Hindi nastaliq/naskh glyphs are tall — tight line-height clips their tops */
html[lang="ur"] h1,html[lang="hi"] h1,html[lang="ur"] h2.title,html[lang="hi"] h2.title{line-height:1.5;padding-top:.1em;overflow:visible}
html[lang="ur"] .hero .urdu,html[lang="hi"] .hero .urdu{line-height:1.6}
.hero .urdu{font-family:var(--serif);font-size:clamp(24px,4vw,36px);color:var(--accent);margin-top:6px}
.hero p.lead{color:var(--muted);font-size:18px;max-width:56ch;margin:14px 0 20px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
/* HERO_CTA: 151 + 173 + 202 and two 14px gaps is 554 in a 482px column, so
   the third button wrapped and the hero ended on a stray. Tightening the
   row fits all three without renaming or dropping any of them. The phone
   rule below 880 still stacks them, which is right on a narrow screen. */
@media(min-width:881px){
  .hero .cta{gap:9px}
  .hero .cta .btn{padding-left:15px;padding-right:15px}
}
/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.trust .t{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
/* HERO_TILES: four tiles with a 150px floor want 642px; the hero's side
   column is 446, so they overflowed it and the last one left the screen.
   Two per row, and no floor, so they size to whatever column they are in. */
@media(min-width:881px){
  .hero-side .trust .t{min-width:0;flex:1 1 calc(50% - 7px)}
}
.trust .t .n{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.trust .t .l{color:var(--muted);font-size:13px;margin-top:2px}
/* colourful 2x2 stat grid on the right of the hero (fills the empty space) */
.trustgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:0}
.trustgrid .t{min-width:0;border:1px solid rgba(255,255,255,.08);padding:22px 20px;backdrop-filter:blur(14px);border-radius:14px}
.trustgrid .t .n{font-size:30px;font-variant-numeric:tabular-nums;font-weight:800;line-height:1}
.trustgrid .t .l{color:rgba(255,255,255,.65);font-size:13px;margin-top:5px;line-height:1.4}
/* dark pastels — enough hue to feel alive, dark enough to stay moody */
.trustgrid .t.c1{background:rgba(20,75,55,.55);border-color:rgba(74,222,128,.22)}.trustgrid .t.c1 /* The stat numbers were mint on a mint-tinted tile: 1.00:1, invisible. */
.n{color:var(--ink)}
.trustgrid .t.c2{background:rgba(16,50,34,.55);border-color:rgba(122,212,163,.22)}.trustgrid .t.c2 .n{color:#b8d465}
.trustgrid .t.c3{background:rgba(90,20,55,.50);border-color:rgba(251,113,133,.22)}.trustgrid .t.c3 .n{color:#fda4af}
.trustgrid .t.c4{background:rgba(85,50,5,.55);border-color:rgba(252,211,77,.22)}.trustgrid .t.c4 .n{color:#fcd34d}.trustgrid .t.c5{grid-column:1/-1;background:rgba(26,58,30,.55);border-color:rgba(184,212,101,.25);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px}.trustgrid .t.c5 .n{color:#b8d465;font-size:clamp(28px,5vw,40px)}.trustgrid .t.c5 .l{color:rgba(255,255,255,.65);font-size:13px;margin-top:4px}.trustgrid .t.c5 .c5-right{text-align:right}.trustgrid .t.c5 .c5-badge{font-size:11px;background:rgba(184,212,101,.18);border:1px solid rgba(184,212,101,.3);color:#b8d465;border-radius:20px;padding:3px 10px;display:inline-block;margin-top:6px}.page-sb{display:block}
/* Text direction and column order are different things. A grid reverses
   its inline axis under RTL, so the sidebar keeps its physical side only
   if the container stays ltr - direction is re-asserted on the children
   so the text inside still reads right-to-left. */
[dir="rtl"] .page-sb{direction:ltr}
[dir="rtl"] .page-sb>*{direction:rtl}
/* SIDEBAR_LIGHT — owner, 5 Oct 2026: "too dark and depressiong - i need it
   to be better on whole website". Rebuilt in the site's tokens so it follows
   the visitor's theme and palette. */
.page-sb-main{}.sidebar-right{display:none}
@media(min-width:1260px){
  .page-sb{display:grid;grid-template-columns:1fr 320px;gap:0;align-items:start;max-width:var(--page-max);margin:0 auto}
  .page-sb-main{min-width:0}
  .sidebar-right{display:flex;flex-direction:column;gap:13px;padding:30px 0 40px 24px;
    position:sticky;top:80px;border-left:1px solid var(--line)}
}
.sb-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 17px}
.sb-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);font-weight:700;margin:0 0 10px}
.sb-p{color:var(--muted);font-size:12.5px;line-height:1.6;margin:0 0 13px}
.sb-p b{color:var(--ink);font-weight:600}

/* One filled button in the whole column. Everything else is a quiet row:
   a page where every control shouts has no primary action at all. */
.sb-btn{display:block;text-align:center;background:var(--accent);color:var(--accent-ink,#052015);
  padding:11px 12px;border-radius:10px;font-weight:700;font-size:13px;letter-spacing:.01em;
  text-decoration:none;transition:filter .15s,transform .15s}
.sb-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.sb-btn.ghost{background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  color:var(--ink);font-weight:500;font-size:12.8px;text-align:left;padding:10px 16px 10px 0;
  margin-top:2px;position:relative;transition:color .15s}
.sb-btn.ghost::after{content:"›";position:absolute;right:2px;top:50%;transform:translateY(-52%);
  color:var(--muted);font-size:15px;line-height:1;transition:transform .15s,color .15s}
.sb-btn.ghost:hover{color:var(--accent);filter:none}
.sb-btn.ghost:hover::after{color:var(--accent);transform:translate(2px,-52%)}
.sb-btn+.sb-btn.ghost{margin-top:10px}
.sb-btn.wa{background:none;color:var(--ink)}
.sb-btn.wa:hover{color:#1da851}

/* The crisis card carries its weight with a rule and a red heading, not
   a pink wash. Still the most findable thing in the column. */
.sb-crisis{background:var(--panel);border-color:color-mix(in srgb,var(--bad,#d94848) 26%,var(--line));
  border-left:3px solid var(--bad,#d94848);padding-left:15px}
.sb-crisis .sb-label{color:var(--bad,#d94848);letter-spacing:.12em}
.sb-crisis-num{display:block;font-size:14.5px;font-weight:700;color:var(--bad,#d94848);
  text-decoration:none;margin:0 0 7px;line-height:1.35}
.sb-crisis-num:hover{text-decoration:underline}
.sb-crisis-sub{color:var(--muted);font-size:12px;line-height:1.6}
.sb-crisis-sub b{color:var(--ink);font-weight:700}
.sb-all-h{display:inline-block;margin-top:10px;font-size:12.3px;color:var(--bad,#d94848);
  text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:.15s}
.sb-all-h:hover{border-bottom-color:currentColor}

/* No tinted surfaces. One panel, one hairline, all the way down. */
.sb-test{background:var(--panel)}

.sb-nav{display:flex;flex-direction:column}
.sb-nav a{color:var(--ink);font-size:12.8px;padding:9px 0;border-bottom:1px solid var(--line);
  text-decoration:none;transition:color .15s,padding-left .15s}
.sb-nav a:last-child{border-bottom:0}
.sb-nav a:hover{color:var(--accent);padding-left:3px}
.sb-more{display:inline-block;margin-top:11px;font-size:12.3px;color:var(--accent);
  text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:.15s}
.sb-more:hover{border-bottom-color:currentColor}

.sb-community{background:var(--panel)}

.sb-contact{display:block;font-size:12.6px;color:var(--ink);text-decoration:none;
  padding:7px 0;border-bottom:1px solid var(--line);transition:color .15s}
.sb-contact:last-of-type{border-bottom:0}
.sb-contact:hover{color:var(--accent)}
.sb-where{font-size:11.5px;color:var(--faint,var(--muted));margin-top:9px}
.sb-badge{display:inline-block;background:var(--accent-soft);
  color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:4px 9px;border-radius:999px;margin-bottom:11px}
.sb-people{display:flex;flex-direction:column;margin-bottom:12px}
.sb-people a,.sb-people div{display:flex;align-items:flex-start;gap:8px;color:var(--muted);
  font-size:12.2px;line-height:1.5;padding:7px 0;border-bottom:1px solid var(--line);
  text-decoration:none}
.sb-people a{color:var(--ink);font-weight:600}
.sb-people a:hover{color:var(--accent)}
.sb-people>:last-child{border-bottom:0}
.sb-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:6px}/* The old dark sidebar rules lived here. Removed, not overridden: they were
   written in rgba(255,255,255,…) for a black panel, and because they came
   after the new ones they won on order and left invisible labels and
   invisible card backgrounds on a light page. */
@media(max-width:880px){.trustgrid .t .n{font-size:26px}}
/* sections */
section.band{padding:32px 0}
.kicker{color:var(--accent);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
h2.title{font-family:var(--serif);font-size:clamp(26px,3.6vw,36px);font-weight:600;letter-spacing:-.01em;margin:8px 0 6px;text-wrap:balance}
.sub{color:var(--muted);max-width:60ch;margin-bottom:16px}
/* 280 not 240: at a 1018px content column, 240 fits FOUR tracks and every
   section ended in a ragged half-row with a hole on the right. */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* ---- ask box ---------------------------------------------------------
   This is the point of the page, so it is a raised card with its own accent
   border rather than another panel of body copy, and the input is sized to
   be typed into rather than read past. */
.askbox-v2{
  background:var(--panel);
  border:2px solid var(--accent);
  border-radius:20px;
  padding:26px 26px 22px;
  margin:0 0 26px;
  box-shadow:0 18px 44px -26px rgba(0,0,0,.5);
}
.askbox-v2 .ab-h{
  font-family:var(--serif);font-size:23px;font-weight:800;
  color:var(--ink);margin:0 0 6px;line-height:1.2;
}
.askbox-v2 .ab-sub{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 16px;max-width:60ch}
.askbox-v2 textarea{
  width:100%;box-sizing:border-box;
  background:var(--bg);
  border:2px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
  min-height:120px;
  color:var(--ink);
  font-family:inherit;font-size:16.5px;line-height:1.6;
  resize:vertical;transition:border-color .15s,box-shadow .15s;
}
.askbox-v2 textarea::placeholder{color:var(--faint)}
.askbox-v2 textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.askbox-v2 .ab-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.askbox-v2 select{
  background:var(--bg);border:2px solid var(--line);border-radius:12px;
  padding:0 14px;min-height:52px;color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:600;
}
.askbox-v2 select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.askbox-v2 .ab-go{
  min-height:52px;padding:0 26px;border:0;border-radius:12px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);
  font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.04em;
  display:inline-flex;align-items:center;justify-content:center;
  transition:filter .15s;
}
.askbox-v2 .ab-go:hover{filter:brightness(1.08)}
.askbox-v2 .ab-go:disabled{opacity:.75;cursor:default}
.askbox-v2 .ab-note{color:var(--faint);font-size:12.5px}
@media(max-width:560px){
  .askbox-v2{padding:20px 18px 18px;border-radius:16px}
  .askbox-v2 .ab-go,.askbox-v2 select{width:100%}
}

/* ---- TOUCH_TARGETS --------------------------------------------------
   44px is the minimum reliable tap size. Everything below was measured in a
   browser at 390px, not guessed. Specificity here is deliberate: an earlier
   attempt with plain .langtog button lost to .utilbar .langtog button. */
@media(max-width:880px){
  /* Utility-bar sizing lives in UTILBAR_V2 - setting min-height here
     too produced three controls at 44/46/44 instead of one height. */
  header.nav .navtoggle{min-height:44px;min-width:44px}
  /* Do NOT set display here. .wa-head is hidden on phones with
     display:none, and a later display:inline-flex on .btn-wa un-hid it -
     putting the header WhatsApp button back on top of the brand. */
  .btn:not(.wa-head),.btn-accent:not(.wa-head),.btn-ghost:not(.wa-head),
  .btn-wa:not(.wa-head){min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  .wa-head{min-height:44px}
  footer.foot .cols a,.bottom-quran,.footlegal a{min-height:44px;
    display:inline-flex;align-items:center}
  .qr-read,.qr-play{min-height:44px}
}


/* ---- fixed furniture ------------------------------------------------
   A fixed element is invisible to layout, so the page has to make room for
   it deliberately. Without this the floating button sits on whatever happens
   to be at the bottom of the viewport - measured covering a helpline's
   opening hours, a self-test CTA, and article cards, on first paint. */

/* The player is furniture too, and it is the one that must win: it owns the
   bottom of the screen while something is playing. */
#depk-player{z-index:90}
#zbtn{z-index:80;transition:transform .18s ease}
/* Playing: lift the button clear of the bar rather than letting them fight
   over the same 52px band. */
body.playing #zbtn{transform:translateY(-84px)}
/* The homepage hero has its own "Talk to our team" button. Two buttons for the
   same action, one pixel apart, is a duplicate - not a stacking problem. */
body.hero-cta-visible #zbtn{opacity:0;pointer-events:none}

/* ---- right sidebar --------------------------------------------------
   It was a fixed 2,613px against a 900px viewport: pages with less content
   ended in up to 1,856px of empty panel, and sticky could never engage
   because the element was taller than the scrollport. */
@media(min-width:1260px){
  /* Not a scrollport. It used to be one with its bar hidden, which kept
     the fault the bar was there to explain: the last card was sliced
     through its own text and nothing said there was more. It is as tall
     as what is in it now and it scrolls with the page. Sticky stays, so
     the part that fits still pins under the header; once the rail is
     taller than the screen sticky has nothing to do, which is honest. */
  .sidebar-right{position:sticky;top:80px;align-self:start;padding-bottom:24px}
}

/* ---- touch targets --------------------------------------------------
   Measured: 24 footer links at ~21px on every page, 114 "Read" links at
   25.6px, the crisis link at 19.2px. All below the 44px minimum. */
/* "More" opens the submenu and goes nowhere: it used to be a link to
   /about, sitting next to the About link. Owner, 25 Oct 2026. */
/* Book a Session sits beside Ask a Question in the top strip and was
   plain text next to a pill. Owner, 25 Oct 2026: "make book button". */
/* Both top-strip buttons are sized together, lower down, in the block
   that sets the rest of the bar. Nothing for them here. */
footer.foot .cols a{display:inline-block;padding:11px 0;line-height:1.35}
.footlegal a{display:inline-block;padding:8px 4px}
.utilbar a{display:inline-block;padding:12px 0}
.langtog button{min-height:44px}
.themetog{min-height:44px;display:inline-flex;align-items:center}
.qr-listen{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);border:0;
  font-family:inherit;font-size:13.5px;font-weight:700;
  transition:filter .15s;
}
.qr-listen:hover{filter:brightness(1.08)}
.qr-listen:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a.qr-sname{text-decoration:none}
a.qr-sname:hover{color:var(--accent);text-decoration:underline}
.qr-num{flex-shrink:0;min-width:34px;text-align:center;color:var(--faint);
  font-variant-numeric:tabular-nums;font-weight:700}
.qr-read{min-height:44px;display:inline-flex;align-items:center}
.qr-play{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
header.nav .brand{display:inline-flex;align-items:center;min-height:44px}

.hq-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:20px}
.hq-q{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;text-decoration:none;transition:.15s}
.hq-q:hover{border-color:var(--accent);background:rgba(122,212,163,.06)}
.hq-cat{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);margin-bottom:5px}
.hq-t{display:block;color:var(--ink);font-size:14.5px;font-weight:650;line-height:1.35}
.hq-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:20px}
.hq-tool{display:flex;flex-direction:column;gap:3px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;transition:.15s}
.hq-tool:hover{border-color:var(--accent);background:rgba(122,212,163,.06)}
.hq-tool b{color:var(--ink);font-size:14.5px}
.hq-tool span:last-child{color:var(--faint);font-size:12.5px}
.hq-ic{font-size:22px;margin-bottom:4px}

.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
@media(max-width:640px){.feat-grid{grid-template-columns:1fr !important}}

/* ---- PHOTO_INK ------------------------------------------------------
   These sit on a photograph with a dark scrim, so their ground is dark in
   every theme state. Their ink was var(--ink), which goes near-black in light
   theme: measured 1.05:1, dark text on a dark photo. Where the ground cannot
   follow the theme, the ink must not either. */
.feat-card,.feat-card h3,.feat-card p,.feat-card b,.feat-card span,
.feat-card li,.feat-card div{color:#f2fbf6}
.feat-card p,.feat-card li{color:rgba(242,251,246,.9)}
.feat-card .ic{color:#f2fbf6}

.hero h1,.hero .lead,.hero .eyebrow,.hero .urdu,.hero p{color:#f2fbf6}
.hero .lead b,.hero p b{color:#fff}
/* The scrim already darkens the photo; this keeps type legible over the
   lighter parts of it without a second overlay. */
.hero h1,.hero .lead,.feat-card h3,.feat-card p{text-shadow:0 1px 3px rgba(0,0,0,.45)}
.feat-card{position:relative;min-height:300px;border-radius:20px;overflow:hidden;background:var(--fbg) center/cover no-repeat;cursor:default;transition:transform .3s,box-shadow .3s}
.feat-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px -16px rgba(0,0,0,.6)}
.feat-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,12,22,.12) 0%,rgba(4,12,22,.55) 45%,rgba(4,12,22,.9) 100%)}
.feat-body{position:absolute;bottom:0;left:0;right:0;padding:26px 24px;z-index:1}
.feat-ic{font-size:30px;margin-bottom:12px;display:block}
.feat-body h3{color:#fff;font-size:19px;font-weight:700;margin:0 0 8px;text-shadow:0 2px 8px rgba(0,0,0,.6);letter-spacing:-.01em}


@media(max-width:640px){}
@media(max-width:640px){}
.feat-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(122,212,163,.22);border:2px solid rgba(122,212,163,.6);color:#7ad4a3;font-weight:800;font-size:15px;backdrop-filter:blur(6px)}
.feat-body p{color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.58;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.card{background:linear-gradient(145deg,var(--panel) 0%,var(--panel2) 100%);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 6px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)}
.card .ic{font-size:24px;display:block;margin-bottom:4px}
.card h3{color:var(--ink);font-size:17px;font-weight:700;margin:12px 0 8px;line-height:1.35}html:not(.anx):not(.dt) .card h3{color:var(--ink)}
.card p{color:var(--muted);font-size:14.5px;line-height:1.58;margin:0}/* was rgba(195,218,242,.78) - a pale literal overriding --muted, which
   put every card body paragraph at 1.28:1 in light theme. */
html:not(.anx):not(.dt) .card p{color:var(--muted)}
.card .tag,.card .badge{background:rgba(122,212,163,.15);color:#7ad4a3;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block;margin-bottom:8px;letter-spacing:.04em}
a.card,.doc{transition:transform .2s,box-shadow .2s,border-color .2s}
a.card:hover,.doc:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.45);border-color:rgba(122,212,163,.22)}
/* how it works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step .num{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#1e4a34 0%,#132e22 100%);color:var(--accent);box-shadow:0 2px 8px rgba(122,212,163,.2);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.step h3{margin:12px 0 6px;font-size:16px}
.step p{color:var(--muted);font-size:14px}
/* privacy */
.promise{background:linear-gradient(145deg,var(--panel) 0%,var(--panel2) 100%);border:1px solid rgba(122,212,163,.13);
  border-radius:22px;padding:22px}
.promise ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
.promise li{display:flex;gap:10px;color:var(--muted);font-size:14.5px}
.promise li b{color:var(--ink)}
.check{color:var(--accent);font-weight:900}
/* crisis band */
.crisis{background:color-mix(in srgb,var(--bad) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line));
  border-radius:20px;padding:26px}
.crisis h3{color:var(--bad);font-size:16px;margin-bottom:6px}
.crisis .lines{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.crisis .lines a{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600}
.crisis .lines a b{color:var(--accent)}
/* find help */
.searchbar{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.field select,.field input{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--ink);font-size:15px;min-width:180px}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:22px}
.doc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.doc .top{display:flex;justify-content:space-between;gap:10px;align-items:start}
.doc h4{font-size:16px;font-weight:700}
.chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.chip.inst{background:color-mix(in srgb,var(--warm) 18%,transparent);color:var(--warm)}
.doc .meta{color:var(--muted);font-size:13.5px;margin-top:8px;display:flex;flex-direction:column;gap:3px}
.doc .meta a{color:var(--accent);font-weight:600}
/* The mega footer. Owner, 22 Oct 2026. Six groups, collapsing to one
   column on a phone - where each heading becomes a real <details> so the
   page does not end in six screens of links. */
/* Multi-column, not grid. A grid lays uneven blocks out in rows and
   strands the last one on a row of its own with the rest of the page
   empty beside it; columns balance the content and always fill the
   width. Owner, 23 Oct 2026, on exactly that hole. */
.megafoot{columns:4 210px;column-gap:30px;
  margin-top:34px;padding-top:28px;border-top:1px solid rgba(122,212,163,.14)}
@media(min-width:1280px){.megafoot{columns:5 210px}}
.mf{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 24px}
.mf summary{list-style:none;cursor:default;font-weight:700;font-size:14px;
  color:var(--fixed-ink);margin-bottom:11px}
.mf summary::-webkit-details-marker{display:none}
.mf-links{display:flex;flex-direction:column}
.mf-links a{color:var(--fixed-dim);font-size:13.5px;line-height:1.5;padding:5px 0;
  text-decoration:none}
.mf-links a:hover{color:var(--fixed-accent)}
.mf-links a i{font-style:normal;opacity:.55;font-size:12px;margin-left:5px}
@media(max-width:720px){
  .megafoot{columns:1;column-gap:0}
  .mf{margin:0;display:block}
  .mf{border-bottom:1px solid rgba(122,212,163,.10)}
  .mf summary{cursor:pointer;padding:13px 0;margin:0;display:flex;align-items:center;
    justify-content:space-between}
  .mf summary::after{content:"+";font-size:17px;opacity:.6;font-weight:400}
  .mf[open] summary::after{content:"−"}
  .mf-links{padding:0 0 12px}
}

/* footer */
footer.foot{border-top:2px solid rgba(122,212,163,.12);padding:40px 0;margin-top:20px;background:#04120d;color:rgba(255,255,255,.88);font-size:13.5px}
footer.foot .cols{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
/* The footer ground is dark in BOTH themes, so its ink cannot follow
   --ink - in light mode that is near-black on near-black (1.17:1). */
/* The footer ground is a literal #04120d in BOTH themes, so everything
   on it needs fixed light ink - tokens resolve to near-black in light
   theme and vanish. */
footer.foot b{color:#e9f5ee}
footer.foot a{color:var(--fixed-dim)}
footer.foot a:hover{color:#fff}
footer.foot .footlegal,footer.foot .footlegal a{color:var(--fixed-dim)}
footer.foot /* Only the footer disclaimer is on a fixed dark ground. Setting this
   unscoped made every other disclaimer light-on-light: 2.45:1. */
footer.foot .disclaimer{color:var(--fixed-dim)}
.disclaimer{background:var(--panel2);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:14px 18px;color:var(--muted);font-size:13.5px;line-height:1.7;margin-top:22px}
/* floating chat */
#zbtn{position:fixed;bottom:20px;right:20px;z-index:80;background:var(--accent);color:var(--accent-ink);
  border:none;border-radius:999px;padding:14px 20px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)}



#zhead .t{font-weight:700;font-size:15px}#zhead .s{color:var(--muted);font-size:12px}
#zhead .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:20px}


.me{align-self:flex-end;background:var(--accent-soft)}
.za{align-self:flex-start;background:var(--bg2);border:1px solid var(--line)}




/* ── Counter band — always dark, always readable ── */
.counterband{background:linear-gradient(135deg,#0d1730,#101a33 55%,#12213c);border-top:1px solid #223049;border-bottom:1px solid #223049;padding:38px 0}
.ctitle{text-align:center;color:#9fb0c9;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}
.crow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:860px){.crow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.crow{grid-template-columns:repeat(2,1fr)}}
.cstat{text-align:center;padding:8px 6px}
.cnum{font-family:var(--serif);font-size:clamp(30px,4.4vw,46px);font-weight:700;color:#8ee0b0;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.crow .cstat:nth-child(1) .cnum{color:#8ee0b0}
.crow .cstat:nth-child(2) .cnum{color:#f28b82}
.crow .cstat:nth-child(3) .cnum{color:#f6c667}
.crow .cstat:nth-child(4) .cnum{color:#f29ac9}
.clab{color:rgba(160,185,215,.72);font-size:12px;line-height:1.4;margin-top:6px}
.csrc{color:rgba(120,150,185,.42);font-size:10.5px;margin-top:4px;font-style:italic}

/* ── Live counter ── */
.livecounter{background:linear-gradient(135deg,#0d1c2e 0%,#0a1520 100%);border-radius:18px;padding:28px;border:1px solid rgba(255,255,255,.06)}
.lc-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:center}
@media(max-width:640px){.lc-inner{grid-template-columns:1fr}}
.lc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.lc-dot{width:8px;height:8px;border-radius:50%;background:#f28b82;box-shadow:0 0 8px #f28b82;flex-shrink:0;animation:lcdot 1.5s ease-in-out infinite}
@keyframes lcdot{0%,100%{opacity:1}50%{opacity:.3}}
.lc-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(160,185,215,.65)}
.lc-num{font-size:clamp(38px,5.5vw,62px);font-weight:900;font-family:var(--serif);letter-spacing:-.03em;color:#f28b82;font-variant-numeric:tabular-nums;line-height:1;transition:color .15s}
.lc-num.flash{color:#ff6b6b}
.lc-prog{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:12px;overflow:hidden}
.lc-prog i{display:block;height:100%;background:linear-gradient(90deg,#f28b82,#ff6b6b);border-radius:2px;transition:width .25s linear}
.lc-mini{font-size:11px;color:rgba(155,180,210,.45);margin-top:8px;font-style:italic}
.lc-h{font-size:18px;font-weight:700;color:#eef3fa;margin:0 0 10px}
.lc-hope{font-size:14px;line-height:1.65;color:rgba(190,215,240,.8);margin:0 0 18px}
.lc-cta{display:inline-block;background:var(--accent);color:#fff;border-radius:10px;padding:11px 20px;font-size:13.5px;font-weight:700;text-decoration:none;transition:opacity .2s}
.lc-cta:hover{opacity:.85}

/* ── Stats band — neutral section, not dark ── */
.statsband{background:var(--bg2);padding:56px 0}
.statsband .title{color:var(--ink)}
.statsband .sub{color:var(--muted)}
.statsband .kicker{color:var(--accent);font-weight:800}

/* Light mode statsband: very subtle warm grey */
.statsband{background:#f2f5f8;padding:56px 0}

/* ── pkgrid layout ── */
.pkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:16px}

/* ── bigstat card — COMPLETE REDESIGN ── */
/* Dark mode: glass card with colored top border */
.bigstat{background:#ffffff;border:1px solid #e2e8f0;border-top:3px solid #f87171;border-radius:14px;padding:22px 18px;position:relative}

/* Light mode: white card, same colored top border */
.bigstat{background:#ffffff;border-color:#e2e8f0;box-shadow:0 2px 10px rgba(0,0,0,.06)}

/* Crisis stats: red top border + red number */
.bigstat .bn{font-size:38px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-family:var(--serif);color:#dc2626;line-height:1;margin-bottom:10px}
/* crisis bn colour already set */

/* Accent line (top 2 PK stats) — amber/orange for severity */
.bigstat.accentline{border-top-color:#fb923c}
.bigstat.accentline .bn{color:#c2410c}
/* accentline bn colour already set */

/* Global stats — blue */
.globalgrid .bigstat{border-top-color:#2563eb;background:#ffffff;border-color:#e2e8f0}
.globalgrid .bigstat .bn{color:#2563eb}
/* light globalgrid bn: already set on .bn directly */
/* light globalgrid: default handles it */

/* Hope stats — green */
.bigstat.hope{border-top:3px solid #16a34a;background:#f0fdf4;border-color:#bbf7d0}
.bigstat.hope .bn{font-size:30px;color:#16a34a}
.bigstat.hope{background:#f0fdf4;border-color:#bbf7d0}
.bigstat.hope .bn{font-size:30px;color:#16a34a}

/* Label text */
.bigstat .bl{color:#374151;font-size:14px;margin-top:0;line-height:1.5}
/* light mode bl: default already dark */
.bigstat.hope .bl{color:#15803d}
/* light mode hope bl: default already dark */

/* Source citation */
.bigstat .bs{color:#334155;font-size:11px;margin-top:10px;font-style:italic;display:block}
/* light bs: default already grey */

/* ── Viz cards (ratio bars + treatment gap) ── */
.viz2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:640px){.viz2{grid-template-columns:1fr}}

.vizcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:22px}
.vizcard{background:#ffffff;border-color:#e2e8f0;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.vzt{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#2b9e6d;margin-bottom:16px}
/* light vzt: default already green */
.vznote{color:#4b5563;font-size:13px;margin-top:14px;line-height:1.6}
/* light vznote: default already dark */
.vzsrc{color:#9ca3af;font-size:11px;margin-top:8px;font-style:italic;display:block}
/* light vzsrc: default already grey */

/* ── Ratio bars ── */
.rbar{margin-bottom:14px}
.rlab{font-size:13.5px;margin-bottom:6px;color:#374151;display:flex;justify-content:space-between}
/* light rlab: default already dark */
.rtrack{height:12px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;position:relative}
.rtrack{background:#e5e7eb}
.rfill{position:absolute;left:0;top:0;height:100%;border-radius:8px;transition:width .8s ease}
.rfill.bad{background:linear-gradient(90deg,#f87171,#dc2626)}
.rfill.warn{background:linear-gradient(90deg,#fbbf24,#d97706)}
.rfill.good{background:linear-gradient(90deg,#4ade80,#16a34a)}
.rval{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:#fff}

/* ── Treatment gap bar ── */
.gapwrap{margin-top:10px}
.gapbar{height:32px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden;margin-bottom:10px}
.gapbar{background:#e5e7eb}
.gapbar>i{display:block;height:100%;background:linear-gradient(90deg,#f87171,#dc2626);transition:width .9s ease}
.gaprow{display:flex;justify-content:space-between;font-size:13px}
.gaprow .bad{color:#dc2626;font-size:18px;font-weight:900;font-family:var(--serif)}
.gaprow .good{color:#16a34a;font-size:18px;font-weight:900;font-family:var(--serif)}
/* gaprow bad already dc2626 in default */
/* gaprow good already 16a34a in default */
.gaprow span{color:#4b5563}
/* light gaprow: default already dark */

/* ── Hope band ── */
.hopeband{margin-top:48px;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.15);border-radius:18px;padding:30px}
.hopeband{background:#f0fdf4;border-color:#bbf7d0}
/* ── Dark mode overrides (text goes light, bg goes dark) ── */

@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .bigstat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
:root:not([data-theme="light"]) .bigstat .bl{color:rgba(210,228,248,.85)}
:root:not([data-theme="light"]) .bigstat .bs{color:rgba(206,224,246,.95)}
:root:not([data-theme="light"]) .bigstat.hope .bl{color:rgba(187,247,208,.85)}
:root:not([data-theme="light"]) .vizcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
:root:not([data-theme="light"]) .vzt{color:rgba(122,212,163,.75)}
:root:not([data-theme="light"]) .vznote{color:rgba(185,208,232,.72)}
:root:not([data-theme="light"]) .vzsrc{color:rgba(140,168,200,.4)}
:root:not([data-theme="light"]) .rlab{color:rgba(210,228,248,.85)}
:root:not([data-theme="light"]) .rtrack{background:rgba(255,255,255,.08)}
:root:not([data-theme="light"]) .gapbar{background:rgba(255,255,255,.08)}
:root:not([data-theme="light"]) .gaprow span{color:rgba(200,220,240,.75)}
:root:not([data-theme="light"]) .gaprow .bad{color:#f87171}
:root:not([data-theme="light"]) .gaprow .good{color:#4ade80}
:root:not([data-theme="light"]) .bigstat .bn{color:#f87171}
:root:not([data-theme="light"]) .bigstat.accentline .bn{color:#fb923c}
:root:not([data-theme="light"]) .globalgrid .bigstat .bn{color:#60a5fa}
:root:not([data-theme="light"]) .bigstat.hope .bn{color:#4ade80}
:root:not([data-theme="light"]) .bigstat.hope{background:rgba(74,222,128,.05);border-color:rgba(74,222,128,.2)}
:root:not([data-theme="light"]) .hopeband{background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.15)}
:root:not([data-theme="light"]) .statsband{background:linear-gradient(180deg,#071310,#0a1a14 40%,#071310)}
}
:root[data-theme="dark"] .bigstat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
:root[data-theme="dark"] .bigstat .bl{color:rgba(210,228,248,.85)}
:root[data-theme="dark"] .bigstat .bs{color:rgba(206,224,246,.95)}
:root[data-theme="dark"] .bigstat.hope .bl{color:rgba(187,247,208,.85)}
:root[data-theme="dark"] .vizcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
:root[data-theme="dark"] .vzt{color:rgba(122,212,163,.75)}
:root[data-theme="dark"] .vznote{color:rgba(185,208,232,.72)}
:root[data-theme="dark"] .vzsrc{color:rgba(140,168,200,.4)}
:root[data-theme="dark"] .rlab{color:rgba(210,228,248,.85)}
:root[data-theme="dark"] .rtrack{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .gapbar{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .gaprow span{color:rgba(200,220,240,.75)}
:root[data-theme="dark"] .gaprow .bad{color:#f87171}
:root[data-theme="dark"] .gaprow .good{color:#4ade80}
:root[data-theme="dark"] .bigstat .bn{color:#f87171}
:root[data-theme="dark"] .bigstat.accentline .bn{color:#fb923c}
:root[data-theme="dark"] .globalgrid .bigstat .bn{color:#60a5fa}
:root[data-theme="dark"] .bigstat.hope .bn{color:#4ade80}
:root[data-theme="dark"] .bigstat.hope{background:rgba(74,222,128,.05);border-color:rgba(74,222,128,.2)}
:root[data-theme="dark"] .hopeband{background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.15)}
:root[data-theme="dark"] .statsband{background:linear-gradient(180deg,#071310,#0a1a14 40%,#071310)}



/* ── ACCESSIBILITY PASS ──────────────────────────────────────
   Everything below deliberately overrides the rules above. Larger type and
   real contrast, because a lot of this audience is reading on a cheap phone
   in bad light, and some of them are older parents. */

/* Labels and citations were 12px and 10.5px at 42% opacity. */
.clab{font-size:14px;line-height:1.5;color:rgba(190,210,235,.92);margin-top:8px}
.csrc{font-size:12px;color:rgba(165,190,220,.75);margin-top:6px;font-style:normal}
.lc-mini{font-size:12.5px;color:rgba(180,205,235,.8);font-style:normal}
.lc-hope{font-size:15px;color:rgba(205,225,245,.92)}
.lc-label{font-size:12.5px;color:rgba(185,205,230,.85)}
.vznote{font-size:14px;color:#3f4a5a}
.vzsrc{font-size:12px;color:#5c6b80;font-style:normal}
.bigstat .bl{font-size:15px;line-height:1.6}
.bigstat .bs{font-size:12px;font-style:normal}
.ctitle{font-size:13.5px}

/* No horizontal overflow anywhere in this band. */
.counterband,.statsband,.livecounter{max-width:100%;overflow-x:hidden}
.crow,.pkgrid,.viz2,.kpi-row{max-width:100%}
.cnum,.lc-num,.bigstat .bn{overflow-wrap:anywhere}

@media(max-width:560px){
  /* Two columns still collided on a 390-412px screen because the labels are
     long sentences, not single words. One column, and give it room. */
  .crow{grid-template-columns:1fr;gap:4px}
  .cstat{padding:16px 14px;text-align:left;display:flex;align-items:baseline;gap:14px;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .cstat:last-child{border-bottom:0}
  .cnum{font-size:32px;flex:0 0 auto;min-width:88px}
  .clab{margin-top:0;font-size:14.5px}
  .csrc{margin-top:3px}
  .cstat > div:last-child{flex:1;min-width:0}

  .lc-inner{grid-template-columns:1fr;gap:20px}
  .lc-num{font-size:40px}
  .livecounter{padding:20px 18px}
  .pkgrid{grid-template-columns:1fr}
  .bigstat{padding:18px 16px}
  .bigstat .bn{font-size:32px}
  .vizcard{padding:18px 16px}
  .hopeband{padding:20px 16px}
  .statsband{padding:38px 0}
}

/* The floating Talk-to-Zara button overlapped the last line of content. */
@media(max-width:820px){
  body{padding-bottom:84px}
}

@media(prefers-reduced-motion:reduce){
  .lc-dot{animation:none}
  .cnum,.lc-num{transition:none}
}

.langtog{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:6px}
.langtog button{background:transparent;border:none;color:var(--muted);padding:7px 11px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.langtog button.on{background:var(--accent);color:var(--accent-ink)}
html[dir="rtl"] .hero,html[dir="rtl"] .band .wrap,html[dir="rtl"] .promise{text-align:right}
html[dir="rtl"] .nav nav,html[dir="rtl"] .cta,html[dir="rtl"] .trust{direction:rtl}
html[lang="ur"] .hero h1,html[lang="ur"] h2.title{font-family:var(--serif)}

@font-face{font-family:'Serif4';src:url('/assets/fonts/serif-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Serif4';src:url('/assets/fonts/serif-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'PlexSans';src:url('/assets/fonts/sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PlexSans';src:url('/assets/fonts/sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'PlexSans';src:url('/assets/fonts/sans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'PlexSans';src:url('/assets/fonts/sans-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --serif:'Serif4',Georgia,'Noto Naskh Arabic',serif;
  --sans:'PlexSans',system-ui,-apple-system,'Segoe UI','Noto Naskh Arabic','Noto Sans Devanagari',sans-serif;
  --bg:#02243d;--bg2:#0a1e18;--panel:#0f2820;--panel2:#132f2657;--line:#1f4034;
  --ink:#eaf5ef;--muted:#93b3a3;--faint:#8fb3a1;--accent:#7ad4a3;--accent-ink:#04170f;--accent-soft:#173d2d;--warm:#c9a24a;--bad:#e06b6b;
}
:root[data-theme="light"]{
  --bg:#f3f9f5;--bg2:#e9f3ec;--panel:#ffffff;--panel2:#f1f8f3;--line:#d8e8de;
  --ink:#0f2a1e;--muted:#4a6858;--faint:#5c7668;--accent:#1f7a4d;--accent-ink:#ffffff;--accent-soft:#dff0e6;--warm:#8a5a0d;--bad:#b03636;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#f3f9f5;--bg2:#e9f3ec;--panel:#ffffff;--panel2:#f1f8f3;--line:#d8e8de;
  --ink:#0f2a1e;--muted:#4a6858;--faint:#5c7668;--accent:#1f7a4d;--accent-ink:#ffffff;--accent-soft:#dff0e6;--warm:#8a5a0d;--bad:#b03636;
}}
body{font-size:16px;letter-spacing:-.003em}
/* utility bar */
/* flowing animated "lights" bar — vibrant gradient sliding smoothly, white text */
.utilbar{border-bottom:0;font-size:12.5px;color:#fff;
  background:linear-gradient(90deg,#06301c,#0b4a2b,#116b3a,#0d5730,#0b4a2b,#06301c);
  background-size:300% 100%;animation:utillights 16s linear infinite}
.utilbar a,.utilbar .em{color:#fff}
.utilbar .em{font-weight:800}
.utilbar,.utilbar a{text-shadow:0 1px 2px rgba(6,26,18,.35)}
@keyframes utillights{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media (prefers-reduced-motion:reduce){.utilbar{animation:none}}
.utilbar .row{display:flex;align-items:center;height:36px;gap:14px}
.utilbar .spacer{flex:1}
/* NOT --muted. This is declared after color:#fff at equal specificity and
   wins, which put the crisis link at 1.00:1 on the gradient. The bar is a
   fixed dark-to-green gradient in both themes, so its ink is fixed too. */
.utilbar a{color:#fff;font-weight:600}
.utilbar a:hover{color:var(--accent)}
/* NOT --ink. The bar is a fixed dark gradient in both themes, so a token
   here resolves to near-black in light: measured 1.29:1. */
.utilbar .em{color:#c8e6a0}
/* nav — tighter, more corporate */
header.nav{background:color-mix(in srgb,var(--bg) 90%,transparent)}
@media(min-width:881px){.nav .row{height:90px}}
.brand{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:-.01em}
.nav nav a{font-size:14px;font-weight:500;letter-spacing:.005em}
.btn{border-radius:9px;font-weight:600;letter-spacing:.005em}
.btn-wa{box-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn-accent{box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* headings + rhythm */
h1{letter-spacing:-.025em!important}
h2.title{letter-spacing:-.015em}
.kicker,.gh em,.vzt,.tile .k,.bigstat .bs,.ctitle{font-family:var(--sans)}
.kicker{position:relative;padding-left:26px}
.kicker::before{content:"";position:absolute;left:0;top:50%;width:18px;height:2px;background:var(--accent);transform:translateY(-50%)}
/* Tight, dense rhythm — no dead space */
section.band{padding:40px 0}
h2.title{margin:6px 0 4px}
.sub{margin-bottom:20px;max-width:70ch}
.grid3,.steps,.pkgrid{gap:14px}
.trust{margin-top:28px}
.hopeband{margin-top:32px}
.hero+*{margin-top:0}
/* cards — hairline + soft shadow, less startup-round */
.card,.vizcard,.bigstat,.doc,.searchbar,.promise,.qcard{border-radius:12px;box-shadow:0 1px 3px rgba(6,26,18,.05),0 8px 24px -16px rgba(6,26,18,.14)}
:root[data-theme="light"] .card,:root[data-theme="light"] .vizcard,:root[data-theme="light"] .bigstat,:root[data-theme="light"] .doc,:root[data-theme="light"] .promise{box-shadow:0 1px 2px rgba(20,32,47,.04),0 12px 30px -20px rgba(20,32,47,.16)}
.card{transition:box-shadow .2s,transform .2s}
a.card:hover,.doc:hover{transform:translateY(-2px);box-shadow:0 8px 30px -12px rgba(10,20,40,.28)}
/* hero — cinematic image + even dark overlay + LIGHT text (readable in any
   language/direction, over any backdrop). Theme-independent by design. */
.hero{padding:60px 0 52px}
.hero::before{background-image:var(--herobg,url('/assets/hero-bg.jpg'))!important;opacity:var(--heroop,.7)!important;filter:saturate(1.05) brightness(.96)!important}
/* hero vignette: darkens the corners so the frame ends softly and the eye
   stays on the headline, whatever the photograph is doing out there. It
   sits ON TOP of the scrim below, which is what actually guarantees the
   white type stays legible and is not traded away for an effect. */
.hero::after{background:
  radial-gradient(118% 88% at 50% 42%, transparent 30%, rgba(4,8,14,.28) 68%, rgba(4,8,14,.62) 100%),
  /* hero left scrim: the words live on the left, so the ground is solid
     there and clears to the right rather than dulling the whole picture
     evenly. Without it the body copy runs across faces and detail. */
  linear-gradient(96deg, rgba(5,14,11,.93) 0%, rgba(5,14,11,.86) 30%,
    rgba(5,14,11,.55) 55%, rgba(5,14,11,.12) 78%, transparent 100%),
  linear-gradient(180deg,rgba(7,12,22,.42),rgba(7,12,22,.34) 55%,rgba(7,12,22,.52))!important}
/* Over a photograph the brand green all but vanishes: --accent is tuned
   for the page's own dark panel, not for an unpredictable image. */
.hero .eyebrow{color:#9FE3BE!important;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.hero h1,.hero .urdu{text-shadow:0 2px 12px rgba(0,0,0,.45)}
.hero p.lead{color:rgba(255,255,255,.92)!important;text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media(max-width:820px){
  /* Stacked on a phone, the columns are gone and the text spans the full
     width, so a left-to-right fade would leave the end of every line bare. */
  .hero::after{background:
    radial-gradient(100% 74% at 50% 44%, transparent 34%, rgba(4,8,14,.22) 72%, rgba(4,8,14,.50) 100%),
    linear-gradient(180deg, rgba(5,14,11,.90) 0%, rgba(5,14,11,.82) 55%,rgba(5,14,11,.88) 100%)!important}
}
/* On a phone the hero is nearly square, so a wide ellipse would crush the
   sides. Rounder, and lighter, because there is less frame to soften. */
@media(max-width:640px){
  .hero::after{background:
    radial-gradient(100% 74% at 50% 44%, transparent 34%, rgba(4,8,14,.22) 72%, rgba(4,8,14,.50) 100%),
    linear-gradient(180deg,rgba(7,12,22,.60),rgba(7,12,22,.50) 55%,rgba(7,12,22,.66))!important}
}
.hero h1{color:#fff!important}
.hero .lead{color:#eaf1fb!important}
.hero .eyebrow{color:#8fe8bf!important}
.hero .urdu{color:#8fe8bf!important}
.hero h1,.hero .lead,.hero .eyebrow,.hero .urdu{text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.6)}
.hero .lead b{color:#fff}
.hero .eyebrow{font-family:var(--sans);letter-spacing:.16em;font-size:12px;color:var(--accent)}
.hero h1{font-weight:700}
.hero p.lead{font-size:18.5px;color:var(--muted);max-width:60ch}
.trust .t{border-radius:12px}
.trust .t .n{font-family:var(--serif)}
/* buttons in hero slightly larger for presence */
.hero .cta .btn{padding:13px 22px;font-size:15px}
/* footer — formal, columned */
footer.foot{background:#04120d;border-top:2px solid rgba(122,212,163,.12);padding:64px 0 36px}
/* No bottom border since 25 Oct 2026: it divided these columns from the
   mega footer, which is gone, and left two rules 26px apart above the
   legal row. .footlegal draws the one line that is wanted. */
footer.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:16px}
footer.foot b{font-weight:600}
@media(max-width:920px){footer.foot .cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}}
/* Below 920px the five desktop tracks collapse to two. */
@media(max-width:560px){footer.foot .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;padding-bottom:28px}
footer.foot .cols>div:first-child{grid-column:1/-1}
footer.foot .cols a,footer.foot .cols div{overflow-wrap:anywhere}
footer.foot .cols>div{min-width:0}}
.footlegal{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;font-size:12px;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px 22px}
/* The separator is drawn, not written, so a wrapped row can never begin
   with a stranded bullet. */
.footlegal-v2{list-style:none;margin:22px 0 0;padding:18px 0 0;gap:6px 0;align-items:baseline;line-height:1.7}
.footlegal-v2 li{display:inline-flex;align-items:baseline}
.footlegal-v2 li:not(:last-child)::after{content:"·";opacity:.45;padding:0 11px}
.footlegal-v2 a{text-decoration:underline;text-underline-offset:2px}
.langtog button{font-weight:600}

html.anx{--serif:'PlexSans',system-ui,'Noto Naskh Arabic',sans-serif} /* airier: sans headings */
/* app-like chrome: soft pill nav, rounded everything, floaty header */
html.anx .nav nav a{padding:8px 14px;border-radius:999px;transition:background .15s,color .15s;color:var(--ink);font-weight:600}
html.anx .nav nav a:hover{background:var(--accent-soft);color:var(--accent)}
html.anx .card,html.anx .doc,html.anx .vizcard{border-radius:22px}
html.anx .btn{border-radius:14px}
/* floating rounded 'pill' header — app-like, visibly different chrome from the other sites */
@media(min-width:881px){
  html.anx header.nav{background:transparent;border-bottom:0;backdrop-filter:none}
  html.anx header.nav .row{margin-top:12px;height:58px;padding:0 20px;border-radius:999px;
    background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(14px);
    border:1px solid var(--line);box-shadow:0 14px 40px -20px rgba(15,155,176,.35)}
}
html.anx .brand{color:var(--ink)}
html.anx{--bg:#eef6fb;--bg2:#e3eff7;--panel:#ffffff;--panel2:#f1f7fb;--line:#d4e3ee;
  --ink:#123240;--muted:#4c6675;--faint:#8aa1ad;--accent:#0f9bb0;--accent-ink:#ffffff;--accent-soft:#d8f0f4;--warm:#e0a34e;--bad:#e0655f}
html.anx[data-theme="dark"]{--bg:#071822;--bg2:#0a2230;--panel:#0e2836;--panel2:#0c2432;--line:#1c3a49;
  --ink:#e6f4f9;--muted:#8fabb8;--faint:#5b7885;--accent:#38c9de;--accent-ink:#042026;--accent-soft:#0e3540}
@media (prefers-color-scheme: dark){html.anx:not([data-theme="light"]){--bg:#071822;--bg2:#0a2230;--panel:#0e2836;--panel2:#0c2432;--line:#1c3a49;
  --ink:#e6f4f9;--muted:#8fabb8;--faint:#5b7885;--accent:#38c9de;--accent-ink:#042026;--accent-soft:#0e3540}}
html.anx h1,html.anx h2.title{font-weight:750;letter-spacing:-.02em}
/* breathing hero (no photo) */
html.anx .hero{padding:48px 0 14px;background:radial-gradient(800px 460px at 80% -10%,var(--accent-soft) 0%,transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2))!important}
html.anx .hero h1{margin-bottom:6px}
html.anx .hero .urdu{margin-bottom:6px}
html.anx .breathe-hero{margin:18px 0 4px}
html.anx .hero::before,html.anx .hero::after{display:none!important}
html.anx .hero h1,html.anx .hero .lead,html.anx .hero .eyebrow,html.anx .hero .urdu{color:var(--ink)!important;text-shadow:none!important}
html.anx .hero .lead{color:var(--muted)!important}
html.anx .hero .eyebrow,html.anx .hero .urdu{color:var(--accent)!important}
.breathe-hero{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:22px 0 6px}
/* 2-column hero — fills the right side, no dead space */
/* minmax(0,..) because an fr track will not shrink below its contents, and
   the live counter's 48px number held the side column at 618px while the
   text column - declared the LARGER of the two - was squeezed to 482. */
.hero-2col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.92fr);gap:36px;align-items:center}
/* hero-below-grid: suicide counter (50%) + stat tiles (50%) */
.hero-below-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(255,255,255,.06)}
.hero-below-left{display:flex;flex-direction:column;justify-content:center}
.hero-below-right{display:flex;flex-direction:column;justify-content:center}
/* People-reached live counter card */
.reach-card{background:linear-gradient(145deg,rgba(20,60,35,.85),rgba(8,30,18,.9));border:1px solid rgba(122,212,163,.22);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.reach-eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(122,212,163,.7);margin-bottom:16px}
.reach-dot{width:7px;height:7px;border-radius:50%;background:#7ad4a3;box-shadow:0 0 8px #7ad4a3;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.reach-num{font-size:clamp(32px,3.5vw,50px);font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#7ad4a3;line-height:1;margin-bottom:8px}
.reach-label{font-size:15px;font-weight:600;color:rgba(200,240,220,.85);margin-bottom:10px}
.reach-sub{font-size:12.5px;color:rgba(122,212,163,.45);line-height:1.55}
/* 2x2 stat grid below suicide tracker */
.trustgrid4{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trustgrid4c{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.trustgrid4c .t .n,.trustgrid4c .t .l{color:#e9f5ee!important}
.trustgrid4c .t{padding:8px 6px;background:rgba(14,40,26,.75)!important;border:1px solid rgba(122,212,163,.15)!important;border-radius:8px;text-align:center}
.trustgrid4c .n{font-size:18px;font-weight:800;color:#c8e6a0!important;line-height:1}
.trustgrid4c .l{font-size:10px;color:rgba(200,235,215,.5)!important;margin-top:2px;line-height:1.3}
/* Fused band: suicide counter (left ~40%) + emergency stats (right ~60%) */
/* ── MISSION BAND ─────────────────────────────── */
.mission-band{background:#060e1a;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.05)}
.mb-label-row{display:flex;align-items:center;justify-content:space-between;padding:8px 24px 0;max-width:min(1400px,98vw);margin:0 auto}
.mb-label-left{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.mb-dot{width:7px;height:7px;border-radius:50%;background:#f28b82;box-shadow:0 0 9px #f28b82;animation:lcdot 1.5s ease-in-out infinite;flex-shrink:0}
.mb-label-right{font-size:10px;color:var(--muted)}
.mb-label-right a{color:rgba(122,212,163,.45);text-decoration:none;font-weight:600}
.mb-label-right a:hover{color:#7ad4a3}
.mb-ticker{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;max-width:min(1400px,98vw);margin:0 auto;padding:0 0 10px}
.mb-ticker::-webkit-scrollbar{display:none}
.mb-tick{flex:1;min-width:130px;padding:20px 16px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}
.mb-tick:last-child{border-right:none}
.mb-tick--live{min-width:180px;flex:1.5;background:rgba(60,6,6,.4);border-right:1px solid rgba(242,139,130,.15);text-align:center;align-items:center}
.mb-tick-eyebrow{font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,139,130,.5);margin-bottom:2px;text-align:center}
.mb-tick-num{font-size:clamp(26px,3vw,44px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#f28b82}
.mb-tick-num.flash{opacity:.6}
.mb-prog{width:80%;height:2px;background:rgba(242,139,130,.15);border-radius:2px;overflow:hidden;margin:4px auto}
.mb-prog i{display:block;height:100%;background:linear-gradient(90deg,#f28b82,#ff5555);border-radius:2px;transition:width .2s linear;width:0}
.mb-tick-lbl{font-size:10.5px;color:rgba(200,220,215,.5);line-height:1.45;max-width:140px;text-align:center;margin-top:2px;width:100%}
.mb-tick-src{font-size:8px;color:rgba(255,255,255,.18);margin-top:1px;font-style:italic;text-align:center;width:100%}
@media(max-width:900px){.mb-ticker{flex-wrap:wrap}.mb-tick{min-width:calc(33.33% - 1px)}.mb-tick--live{min-width:100%;border-right:none;border-bottom:1px solid rgba(242,139,130,.15);flex-direction:row;gap:24px;padding:14px 20px;text-align:left;align-items:center}.mb-tick--live .mb-prog{width:120px}.mb-tick--live .mb-tick-lbl{text-align:left}}
@media(max-width:500px){.mb-tick{min-width:calc(50% - 1px)}}
.mb-hope-strip{display:flex;align-items:center;justify-content:center;gap:0;background:rgba(122,212,163,.06);border-top:1px solid rgba(122,212,163,.12);padding:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.mb-hope-strip::-webkit-scrollbar{display:none}
.mb-hope-item{display:flex;align-items:center;gap:8px;padding:12px 20px;white-space:nowrap;font-size:11px;color:rgba(200,230,215,.55);flex-shrink:0}
.mb-hope-num{font-size:13px;font-weight:800;color:#7ad4a3;font-variant-numeric:tabular-nums}
.mb-hope-txt{color:rgba(200,230,215,.5)}
.mb-hope-cta{gap:16px}
.mb-hope-cta a{font-size:11.5px;font-weight:700;color:rgba(122,212,163,.7);text-decoration:none}
.mb-hope-cta a:hover{color:#7ad4a3}
.mb-hope-div{width:1px;height:30px;background:rgba(255,255,255,.06);flex-shrink:0}
@media(max-width:700px){.mb-hope-div{display:none}.mb-hope-item{padding:10px 14px}}

@media(max-width:860px){.hero-below-grid{grid-template-columns:1fr}}
@media(max-width:880px){.hero-2col{grid-template-columns:1fr;gap:22px}}
.hero-2col:has(.hero-main:only-child){grid-template-columns:1fr}
.hero-side{align-self:center}
.triagecard{background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));border-radius:18px;padding:16px;box-shadow:0 20px 46px -28px rgba(20,50,64,.5)}
.tc-title{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px}
.tc-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--accent);margin-bottom:9px;font-weight:700;color:var(--ink);font-size:14.5px;transition:transform .16s,box-shadow .16s}
.tc-row:last-child{margin-bottom:0}
.tc-row:hover{transform:translateX(4px);box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.tc-row .ic{font-size:18px}
.tc-row .go{margin-left:auto;color:var(--muted);font-weight:800}
.tc-row:nth-of-type(1){border-left-color:#ef6f6f}
.tc-row:nth-of-type(2){border-left-color:#17803d}
.tc-row:nth-of-type(3){border-left-color:#7ad4a3}
.tc-row:nth-of-type(4){border-left-color:#f0a04a}
.tc-row:nth-of-type(5){border-left-color:#12b3a6}
.bh-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.bh-circle{position:relative;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--accent),var(--accent-soft));
  animation:bhpulse 15.2s ease-in-out infinite;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;text-align:center;
  cursor:pointer;user-select:none;box-shadow:0 0 40px -6px color-mix(in srgb,var(--accent) 60%,transparent);transition:box-shadow .4s,background .4s}
.bh-hint{font-size:11px;color:var(--muted);letter-spacing:.02em}
@keyframes bhpulse{0%{transform:scale(.8)}26%{transform:scale(1.15)}52%{transform:scale(1.15)}100%{transform:scale(.8)}}
/* mystical modes — tap the orb to cycle */
.bh-circle[data-mode="1"]{background:radial-gradient(circle,#ffe9a8,#e8b23f 70%);box-shadow:0 0 55px -4px rgba(240,190,80,.75)} /* divine gold */
.bh-circle[data-mode="2"]{background:radial-gradient(circle,#d7ecc0,#5c9e3a 72%);box-shadow:0 0 55px -4px rgba(92,158,58,.7)}  /* cosmic violet */
.bh-circle[data-mode="3"]{background:radial-gradient(circle,#bdeed6,#17803d 70%);animation:bhpulse 15.2s ease-in-out infinite,bhflash 3.4s steps(1) infinite} /* lightning */
.bh-circle[data-mode="4"]{background:radial-gradient(circle,#ffd0a3,#e05a34 72%);box-shadow:0 0 55px -4px rgba(230,90,50,.7)}   /* ember */
.bh-circle[data-mode="5"]{background:radial-gradient(circle,#b6ffe6,#12b39a 70%);box-shadow:0 0 55px -4px rgba(18,190,150,.7)}  /* emerald */
@keyframes bhflash{0%,92%,100%{box-shadow:0 0 55px -4px rgba(70,140,255,.55)}94%{box-shadow:0 0 90px 6px rgba(200,225,255,.95)}96%{box-shadow:0 0 30px -8px rgba(70,140,255,.4)}}
@media (prefers-reduced-motion:reduce){.bh-circle{animation:none}}
/* triage chips */
.triage{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.triage a{border:1px solid transparent;border-radius:999px;padding:9px 17px;font-size:14px;font-weight:700;color:#fff;box-shadow:0 6px 16px -9px rgba(10,40,60,.6);transition:transform .18s,box-shadow .18s}
.triage a:hover{transform:translateY(-2px);box-shadow:0 11px 24px -9px rgba(10,40,60,.75);color:#fff}
/* each triage chip a distinct vibrant colour */
.triage a:nth-child(1){background:linear-gradient(135deg,#f0655f,#e0483f)}
.triage a:nth-child(2){background:linear-gradient(135deg,#17803d,#0f5c33)}
.triage a:nth-child(3){background:linear-gradient(135deg,#7ad4a3,#17803d)}
.triage a:nth-child(4){background:linear-gradient(135deg,#f0a04a,#e07d2b)}
.triage a:nth-child(5){background:linear-gradient(135deg,#12b3a6,#0b9488)}
.triage a:nth-child(6){background:linear-gradient(135deg,#e05fa0,#c73f84)}
/* sticky SOS */
.sosbtn{position:fixed;left:20px;bottom:20px;z-index:82;background:linear-gradient(135deg,#f0655f,#d1493f);color:#fff;border-radius:999px;padding:13px 20px;font-weight:800;font-size:15px;box-shadow:0 8px 24px rgba(200,60,50,.4);animation:sospulse 2.6s ease-in-out infinite}
@keyframes sospulse{0%,100%{box-shadow:0 8px 24px rgba(200,60,50,.4)}50%{box-shadow:0 8px 34px rgba(200,60,50,.7)}}

/* ── SaaS look for anxiety.pk ── */
/* clean daylight hero + soft cool colour wash (no muddy multiply) */
/* no colour wash — the ambient grid + a neuron network carry the hero */
html.anx .hero{position:relative;overflow:hidden;background:transparent!important}
html.anx .hero .neuro{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html.anx .hero>.wrap{position:relative;z-index:2}
html.anx .hero .mesh{position:absolute;inset:-25%;z-index:0;filter:blur(72px);opacity:.5;pointer-events:none}
html.anx .hero .mesh i{position:absolute;border-radius:50%;animation:float 20s ease-in-out infinite}
html.anx .hero .mesh i:nth-child(1){width:44%;height:64%;left:58%;top:-12%;background:var(--accent)}
html.anx .hero .mesh i:nth-child(2){width:40%;height:58%;left:-10%;top:14%;background:#79d6ea;animation-delay:-7s}
html.anx .hero .mesh i:nth-child(3){width:36%;height:52%;left:30%;top:52%;background:#8fe6c8;opacity:.7;animation-delay:-13s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-5%) scale(1.08)}66%{transform:translate(-5%,4%) scale(.95)}}
@media (prefers-reduced-motion:reduce){html.anx .hero .mesh i{animation:none}}
/* gradient headline accent */
html.anx h2.title,html.anx .hero h1{background:linear-gradient(120deg,var(--ink),color-mix(in srgb,var(--accent) 55%,var(--ink)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* glassy cards + hover lift/glow */
html.anx .card,html.anx .vizcard,html.anx .doc,html.anx .searchbar{background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));border-radius:16px;transition:transform .25s,box-shadow .25s,border-color .25s}
html.anx a.card:hover,html.anx .card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 16px 40px -18px color-mix(in srgb,var(--accent) 60%,transparent)}
html.anx .card .ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--accent-soft);font-size:22px;margin-bottom:4px}
/* gradient buttons */
html.anx .btn-accent{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 74%,#000))!important;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
html.anx .btn-accent:hover{transform:translateY(-1px)}
/* feature grid */
.featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.feat{padding:22px}
.feat .fnum{font-family:var(--serif);font-size:26px;font-weight:750;color:var(--accent)}
/* scroll reveal */
html.anx .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.anx .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.anx .reveal{opacity:1;transform:none}}

html.dt{--serif:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Naskh Arabic','Noto Sans Devanagari',sans-serif}
html.dt{--bg:#f4f3fb;--bg2:#eceaf7;--panel:#ffffff;--panel2:#f4f2fc;--line:#e4dff4;
  --ink:#1b1640;--muted:#565080;--faint:#8f89b2;--accent:#6d5cf0;--accent-ink:#ffffff;--accent-soft:#eae6fd;--warm:#c07d1f;--bad:#e0655f}
html.dt[data-theme="dark"]{--bg:#100e26;--bg2:#151233;--panel:#1b1842;--panel2:#181535;--line:#2c2858;
  --ink:#ece9fb;--muted:#a49cd0;--faint:#6c6699;--accent:#8f80ff;--accent-ink:#0d0922;--accent-soft:#241f4d;--warm:#e0a24e;--bad:#e0655f}
@media (prefers-color-scheme:dark){html.dt:not([data-theme="light"]){--bg:#100e26;--bg2:#151233;--panel:#1b1842;--panel2:#181535;--line:#2c2858;
  --ink:#ece9fb;--muted:#a49cd0;--faint:#6c6699;--accent:#8f80ff;--accent-ink:#0d0922;--accent-soft:#241f4d;--warm:#e0a24e;--bad:#e0655f}}
html.dt h1,html.dt h2.title{font-family:var(--serif);font-weight:800;letter-spacing:-.025em}
html.dt .kicker,html.dt .eyebrow{color:var(--accent)!important}
/* pill buttons + soft indigo glows — distinct from the other two sites */
html.dt .btn{border-radius:999px;font-weight:800}
html.dt .btn-accent{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 74%,#000))!important;box-shadow:0 10px 26px -10px rgba(109,92,240,.55)}
html.dt .btn-ghost{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--accent)!important;box-shadow:none!important}
html.dt .btn-ghost:hover{background:var(--accent-soft)!important}
/* softer rounded cards */
html.dt .card,html.dt .vizcard,html.dt .searchbar,html.dt .doc{border-radius:20px;box-shadow:0 14px 34px -24px rgba(60,40,160,.4)}
html.dt .opts label{border-radius:12px}
html.dt .opts label:has(input:checked){background:var(--accent-soft)}
/* crisp header + indigo hero wash on the first band */
html.dt header.nav{background:color-mix(in srgb,var(--panel) 88%,transparent)}
html.dt .nav nav a{color:var(--ink);font-weight:600}
html.dt .nav nav a:hover{color:var(--accent)}
html.dt .band:first-of-type{background:
  radial-gradient(760px 460px at 88% -14%,#d9cffb 0%,transparent 56%),
  radial-gradient(620px 440px at 4% 8%,#e7e1fc 0%,transparent 52%),
  linear-gradient(180deg,#f6f4fe,#efecfa)}
html.dt .urdu{color:var(--accent)}
/* indigo top hairline on the nav for a crisp product feel */
html.dt header.nav{border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
html.dt .dt-expect{border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}

/* MISSION_BAND_FIX ------------------------------------------------- */
/* Readable at arm's length on a cheap phone. Was 10.5px and 8px. */
.mb-tick-lbl{
  font-size:13.5px !important;
  line-height:1.5 !important;
  color:rgba(214,232,228,.88) !important;
  max-width:none !important;
}
.mb-tick-src{
  font-size:11.5px !important;
  color:rgba(190,212,208,.62) !important;
  font-style:normal !important;
  margin-top:4px !important;
}
.mb-tick-eyebrow{font-size:10.5px !important;color:rgba(242,139,130,.8) !important}
.mb-tick-num{letter-spacing:-.01em}

/* Never let the ticker push the page sideways. */
.mission-band,.mb-ticker,.mb-label-row{max-width:100%;overflow-x:hidden}
.mb-ticker{flex-wrap:wrap}

@media(max-width:900px){
  /* One statistic per row. Two columns collided because these labels are
     sentences, not single words. */
  .mb-ticker{flex-direction:column;flex-wrap:nowrap;padding-bottom:0}
  .mb-tick{
    min-width:100% !important;
    width:100% !important;
    flex:0 0 auto !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.07);
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    text-align:left !important;
    gap:16px;
    padding:16px 20px !important;
  }
  .mb-tick:last-child{border-bottom:0}
  .mb-tick--live{
    min-width:100% !important;
    width:100% !important;
    flex:0 0 auto !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:16px !important;
    padding:16px 20px !important;
  }
  .mb-tick-num{
    flex:0 0 auto;
    min-width:104px;
    font-size:30px !important;
    text-align:left !important;
  }
  .mb-tick-lbl,.mb-tick-src{text-align:left !important;width:auto !important}
  /* Label and source share the remaining width instead of overlapping. */
  .mb-tick > .mb-tick-lbl{flex:1;min-width:0}
  .mb-prog,.mb-tick--live .mb-prog{width:100% !important;max-width:150px}
  .mb-label-row{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 20px 4px}
}

@media(max-width:420px){
  .mb-tick,.mb-tick--live{padding:14px 16px !important;gap:12px}
  .mb-tick-num{min-width:88px;font-size:26px !important}
  .mb-tick-lbl{font-size:13px !important}
}

/* LIVE_TICK_FIX ---------------------------------------------------- */

/* The live row has four children on one line, which squeezed its label off
   the right edge. Wrap it and order them deliberately. */
@media(max-width:900px){
  .mb-tick--live{
    flex-wrap:wrap !important;
    align-items:center !important;
    row-gap:6px !important;
    padding:16px 20px !important;
  }
  .mb-tick--live .mb-tick-eyebrow{
    order:1; flex:0 0 100%; width:100%;
    text-align:left !important; margin:0 0 2px !important;
  }
  .mb-tick--live .mb-tick-num{
    order:2; flex:0 0 auto; min-width:0 !important;
    margin-right:14px; font-size:30px !important;
  }
  .mb-tick--live .mb-tick-lbl{
    order:3; flex:1 1 auto; min-width:0;
    text-align:left !important; margin:0 !important;
  }
  /* Decorative, so it sits last and spans the row. */
  .mb-tick--live .mb-prog{
    order:4; flex:0 0 100%; width:100% !important;
    max-width:none !important; margin:4px 0 0 !important;
  }
}

/* The hope strip was clipped at both edges with no sign it scrolled.
   Its classes are .mb-hope-strip / -item / -num / -txt / -div. */
@media(max-width:900px){
  .mb-hope-strip{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px 18px !important;
    overflow:visible !important;
    animation:none !important;
    transform:none !important;
    padding:14px 20px !important;
    justify-content:flex-start !important;
  }
  .mb-hope-item{
    padding:0 !important;
    white-space:normal !important;
    font-size:13.5px !important;
    flex:0 1 auto;
  }
  .mb-hope-txt{color:rgba(205,232,220,.85) !important;font-size:13.5px !important}
  .mb-hope-num{font-size:15px !important}
  .mb-hope-div{display:none !important}

}

/* Nothing in this band may push the page sideways. */
.mission-band *{max-width:100%}
.mission-band{overflow-x:clip}



.dp{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;gap:12px;
  padding:10px 16px;background:rgba(10,18,32,.97);backdrop-filter:blur(12px);
  border-top:1px solid rgba(122,212,163,.25);box-shadow:0 -6px 26px rgba(0,0,0,.4)}
.dp.on{display:flex}
.dp-btn{background:var(--accent);color:var(--accent-ink,#052015);border:0;border-radius:50%;width:42px;height:42px;
  font-size:15px;cursor:pointer;flex-shrink:0;line-height:1;font-family:inherit}
.dp-x{background:transparent;color:rgba(255,255,255,.5);width:32px;height:32px;font-size:20px}
.dp-x:hover{color:#fff}
.dp-meta{min-width:0;flex:0 1 auto}
.dp-title{color:#eaf3ef;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-sub{color:rgba(200,225,215,.65);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-seek{flex:1;min-width:60px;accent-color:var(--accent);height:4px;cursor:pointer}
.dp-time{color:rgba(200,225,215,.6);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0}
.dp-vb{background:transparent;color:rgba(200,225,215,.8);width:34px;height:34px;font-size:15px}
.dp-vb:hover{color:#fff}
.dp-vol{flex:0 0 84px;accent-color:var(--accent);height:4px;cursor:pointer}
@media(max-width:640px){
  .dp{gap:9px;padding:9px 12px;flex-wrap:wrap}
  .dp-meta{flex:1 1 auto;order:1}
  .dp-btn{order:0}
  .dp-x{order:2}
  .dp-seek{order:3;flex:1 1 100%;min-width:0}
  .dp-time{order:4;display:none}
  /* The slider needs room the bar does not have; muting is the half
     of the control that matters on a phone. */
  .dp-vol{display:none}
  .dp-vb{order:2}
  .dp-title{font-size:13px}
}
/* The floating Talk-to-Zara bubble must not sit under the player. */
/* #zbtn, not #zfab - a rename left this aimed at an id that no longer
   exists, so the player was measured covering the whole button. */
body.dp-open .chatwidget,body.dp-open #zbtn{bottom:96px}
/* BTN_FOOTER: the button is fixed bottom-right and overlaps whatever is
   in that corner of the footer - a different item on every page. It
   leaves once the footer is on screen, where the footer's own, bigger
   Talk to our team button takes over. */
/* No fade. The class was correct on every page, but the transition left a
   180ms window where the button was half-visible over footer text, and
   pages that reflow after load (lazy images changing the scroll position)
   re-entered that window repeatedly. An instant swap has no half-state. */
body.at-footer #zbtn{opacity:0;visibility:hidden;pointer-events:none}
/* The bar is 74px at every width, not only under 640px, and it was
   reserving 34px of that - leaving the last row permanently beneath it. */
body.dp-open{padding-bottom:132px}
/* ===== UTILBAR_V2 =====================================================
   Single source of truth for the top bar. Earlier edits left four
   conflicting .row rules and three each for .langtog and .themetog; this
   block is placed last so it settles all of them. Colours are fixed, not
   tokens: the bar's ground is a fixed gradient in both themes. */
.utilbar .row{
  display:flex;align-items:center;gap:12px;
  min-height:56px;height:auto;padding:8px 22px;
  flex-wrap:nowrap;justify-content:flex-start;
  /* Pinned ltr so the controls keep their physical places in Urdu, the same
     way the sidebar does. Children re-assert their own direction, so Urdu
     text inside them still reads right-to-left. */
  direction:ltr;
}
.utilbar .row > *{direction:inherit}
[dir="rtl"] .utilbar .row > a,[dir="rtl"] .utilbar .util-tag{direction:rtl}
/* Every margin in the cluster comes from the row gap, nowhere else -
   a leftover margin-left was adding 14px to one side only. */
.utilbar .langtog,.utilbar .themetog,.utilbar .row > a{margin:0 !important}
.utilbar .util-tag{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(255,255,255,.9);font-size:12.5px;letter-spacing:.01em;text-shadow:none;
}
.utilbar .spacer{display:none}

/* The two buttons on this bar are a pair and are measured as one. The
   only thing that separates them is which is filled: booking is what
   we want pressed, asking is the quieter one next to it. Owner, 25 Oct
   2026, on the two of them before this: "both look from different
   planet" - because the new one was 44px against 40px with its text
   hard against the pill edge, a touch-target rule having quietly beaten
   its own padding on specificity. */
.utilbar a[href="/questions"],.utilbar a.topbook-btn{
  order:1;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  display:inline-flex;align-items:center;gap:6px;
  height:40px;padding:0 16px;border-radius:999px;
  border:1px solid transparent;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  text-decoration:none;text-shadow:none;
  transition:background .15s,border-color .15s,filter .15s;
}
/* Filled, and it keeps its width when the row runs out of room - the
   crisis link is the one allowed to ellipsis, not this. */
.utilbar a.topbook-btn{
  flex:0 0 auto;
  background:var(--accent,#7ad4a3);color:var(--accent-ink,#06130d)!important;
  border-color:rgba(0,0,0,.18);
}
.utilbar a.topbook-btn:hover{filter:brightness(1.06)}

/* The one thing on this bar that must not blend in. */
.utilbar a[href="/questions"]{
  /* Shrinks with an ellipsis rather than pushing the controls off-screen:
     the row was 97px wider than a 390px viewport. */
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;order:1;
  display:inline-flex;align-items:center;gap:6px;
  height:40px;padding:0 16px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  color:#fff;font-weight:700;font-size:12.5px;white-space:nowrap;
  text-shadow:none;transition:background .15s,border-color .15s;
}
.utilbar a[href="/questions"]:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.6)}

/* On a phone they get a line of their own, half each, rather than
   fighting the language control for the same 390px and squeezing the
   crisis link down to "AS". Orders put the controls on line one
   (langtog 2, gear 4) and the pair on line two. */
@media(max-width:640px){
  .utilbar .row{flex-wrap:wrap;row-gap:8px;justify-content:center}
  /* A zero-height break that takes a whole line, sitting between the
     controls and the pair. Without it the first button squeezes onto
     line one beside the language control and the second takes line two
     alone - two buttons the same size is the entire point. */
  .utilbar .row::after{content:'';order:4;flex:0 0 100%;height:0;margin:0}
  .utilbar a[href="/questions"],.utilbar a.topbook-btn{
    order:5;flex:1 1 calc(50% - 6px);min-width:0;
    justify-content:center;padding:0 10px;height:38px;
  }
}

/* A segmented control: one recessed track, one raised thumb. Reads as a
   single control with a current value, not two competing buttons. */
.utilbar .langtog{
  flex-shrink:0;order:2;direction:ltr;
  display:inline-flex;align-items:center;gap:3px;
  height:40px;padding:3px;margin:0;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  overflow:visible;
}
.utilbar .langtog button{
  min-height:34px;height:34px;padding:0 15px;min-width:auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:999px;cursor:pointer;
  color:rgba(255,255,255,.78);
  font-family:var(--sans);font-weight:700;font-size:12.5px;line-height:1;
  letter-spacing:.02em;text-shadow:none;
  transition:background .15s,color .15s;
}
.utilbar .langtog button:hover{color:#fff;background:rgba(255,255,255,.12)}
.utilbar .langtog button.on{
  background:#fff;color:#06301c;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.utilbar .langtog button[data-lang="ur"]{font-size:13.5px;padding:0 14px}

/* Same height and the same recessed treatment, so it belongs to the cluster. */
.utilbar .themetog{
  flex-shrink:0;order:3;margin:0;
  width:40px;height:40px;min-height:40px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;cursor:pointer;
  font-size:15px;line-height:1;
  transition:background .15s,border-color .15s;
}
.utilbar .themetog:hover{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.42)}

.utilbar .langtog button:focus-visible,.utilbar .themetog:focus-visible,
.utilbar a[href="/questions"]:focus-visible{
  outline:2px solid #fff;outline-offset:2px;box-shadow:none;
}
/* Swatch colours are global: the menu shows all ten at once, so they cannot
   come from the active palette own token. */
:root{
  --sw-green:#5ed49d;
  --sw-blossom:#e25081;
  --sw-lilac:#a657db;
  --sw-sky:#57abdb;
  --sw-apricot:#e28f50;
  --sw-butter:#e0bd52;
  --sw-teal:#5ad8d4;
  --sw-periwinkle:#5a5ed8;
  --sw-coral:#e25e50;
  --sw-sage:#8cca68;
}
/* ===== PALETTES ======================================================
   Two independent axes: data-theme is light or dark, data-palette is the
   hue family. Every pair has to work, so these token sets are generated
   from one recipe per mode and each text colour is tuned until it clears
   WCAG AA against the surface it actually sits on. */
:root[data-palette="green"]{--bg:#08141c;--bg2:#0d1e29;--panel:#112531;--panel2:#162c39;--line:#24404f;--ink:#eef4f8;--muted:#92aebf;--faint:#7797a9;--accent:#4cc47f;--accent-ink:#04200f;--accent-soft:#153626;--fixed:#04121c;--bar1:#00205c;--bar2:#003f8f;--bar3:#002f6e;--swatch:#58d08a}
:root[data-palette="green"][data-theme="light"]{--bg:#f5f9fc;--bg2:#e8f1f8;--panel:#ffffff;--panel2:#f7fbfd;--line:#d6e3ef;--ink:#152a3a;--muted:#4b6579;--faint:#5c7589;--accent:#00703c;--accent-ink:#ffffff;--accent-soft:#e4f1e9;--fixed:#04121c;--bar1:#003087;--bar2:#005eb8;--bar3:#00437f;--swatch:#009639}
@media (prefers-color-scheme: light){:root[data-palette="green"]:not([data-theme="dark"]){--bg:#f5f9fc;--bg2:#e8f1f8;--panel:#ffffff;--panel2:#f7fbfd;--line:#d6e3ef;--ink:#152a3a;--muted:#4b6579;--faint:#5c7589;--accent:#00703c;--accent-ink:#ffffff;--accent-soft:#e4f1e9;--fixed:#04121c;--bar1:#003087;--bar2:#005eb8;--bar3:#00437f;--swatch:#009639}}
:root[data-palette="blossom"]{--bg:#14080c;--bg2:#1d0d12;--panel:#251218;--panel2:#2c161d;--line:#44252f;--ink:#f5edf0;--muted:#b18b98;--faint:#98717e;--accent:#e283a3;--accent-ink:#18070c;--accent-soft:#381c25;--fixed:#11060a;--bar1:#2e0714;--bar2:#480c20;--bar3:#390919;--swatch:#e48ba9}
:root[data-palette="blossom"][data-theme="light"]{--bg:#faf4f6;--bg2:#f5e8ec;--panel:#ffffff;--panel2:#faf5f7;--line:#ead8de;--ink:#3a1823;--muted:#764c5a;--faint:#8d6271;--accent:#971741;--accent-ink:#ffffff;--accent-soft:#f4e3e9;--fixed:#11060a;--bar1:#2e0714;--bar2:#480c20;--bar3:#390919;--swatch:#e25a87}
@media (prefers-color-scheme: light){:root[data-palette="blossom"]:not([data-theme="dark"]){--bg:#faf4f6;--bg2:#f5e8ec;--panel:#ffffff;--panel2:#faf5f7;--line:#ead8de;--ink:#3a1823;--muted:#764c5a;--faint:#8d6271;--accent:#971741;--accent-ink:#ffffff;--accent-soft:#f4e3e9;--fixed:#11060a;--bar1:#2e0714;--bar2:#480c20;--bar3:#390919;--swatch:#e25a87}}
:root[data-palette="lilac"]{--bg:#0f0814;--bg2:#170d1d;--panel:#1e1225;--panel2:#23162c;--line:#372544;--ink:#f2edf5;--muted:#a28bb1;--faint:#8b749a;--accent:#bb88dd;--accent-ink:#110718;--accent-soft:#2d1c38;--fixed:#0d0611;--bar1:#1e092c;--bar2:#300f45;--bar3:#250c37;--swatch:#bf90df}
:root[data-palette="lilac"][data-theme="light"]{--bg:#f7f4fa;--bg2:#f0e8f5;--panel:#ffffff;--panel2:#f8f5fa;--line:#e3d8ea;--ink:#2c183a;--muted:#654c76;--faint:#7f6490;--accent:#621d91;--accent-ink:#ffffff;--accent-soft:#eee3f4;--fixed:#0d0611;--bar1:#1e092c;--bar2:#300f45;--bar3:#250c37;--swatch:#ab5fdd}
@media (prefers-color-scheme: light){:root[data-palette="lilac"]:not([data-theme="dark"]){--bg:#f7f4fa;--bg2:#f0e8f5;--panel:#ffffff;--panel2:#f8f5fa;--line:#e3d8ea;--ink:#2c183a;--muted:#654c76;--faint:#7f6490;--accent:#621d91;--accent-ink:#ffffff;--accent-soft:#eee3f4;--fixed:#0d0611;--bar1:#1e092c;--bar2:#300f45;--bar3:#250c37;--swatch:#ab5fdd}}
:root[data-palette="sky"]{--bg:#081014;--bg2:#0d171d;--panel:#121e25;--panel2:#16242c;--line:#253844;--ink:#edf2f5;--muted:#8ba3b1;--faint:#718a98;--accent:#88bedd;--accent-ink:#071218;--accent-soft:#1c2e38;--fixed:#060d11;--bar1:#091f2c;--bar2:#0f3145;--bar3:#0c2737;--swatch:#90c2df}
:root[data-palette="sky"][data-theme="light"]{--bg:#f4f8fa;--bg2:#e8f0f5;--panel:#ffffff;--panel2:#f5f9fa;--line:#d8e3ea;--ink:#182d3a;--muted:#4c6776;--faint:#5a7381;--accent:#1d6691;--accent-ink:#ffffff;--accent-soft:#e3eef4;--fixed:#060d11;--bar1:#091f2c;--bar2:#0f3145;--bar3:#0c2737;--swatch:#5fafdd}
@media (prefers-color-scheme: light){:root[data-palette="sky"]:not([data-theme="dark"]){--bg:#f4f8fa;--bg2:#e8f0f5;--panel:#ffffff;--panel2:#f5f9fa;--line:#d8e3ea;--ink:#182d3a;--muted:#4c6776;--faint:#5a7381;--accent:#1d6691;--accent-ink:#ffffff;--accent-soft:#e3eef4;--fixed:#060d11;--bar1:#091f2c;--bar2:#0f3145;--bar3:#0c2737;--swatch:#5fafdd}}
:root[data-palette="apricot"]{--bg:#140d08;--bg2:#1d140d;--panel:#251a12;--panel2:#2c1f16;--line:#443225;--ink:#f5f0ed;--muted:#b19c8b;--faint:#988271;--accent:#e4ac81;--accent-ink:#180e07;--accent-soft:#38281c;--fixed:#110b06;--bar1:#2e1807;--bar2:#48260c;--bar3:#391e09;--swatch:#e6b189}
:root[data-palette="apricot"][data-theme="light"]{--bg:#faf6f4;--bg2:#f5eee8;--panel:#ffffff;--panel2:#faf8f5;--line:#eae0d8;--ink:#3a2718;--muted:#765e4c;--faint:#816b5a;--accent:#984e16;--accent-ink:#ffffff;--accent-soft:#f4ebe3;--fixed:#110b06;--bar1:#2e1807;--bar2:#48260c;--bar3:#391e09;--swatch:#e2955a}
@media (prefers-color-scheme: light){:root[data-palette="apricot"]:not([data-theme="dark"]){--bg:#faf6f4;--bg2:#f5eee8;--panel:#ffffff;--panel2:#faf8f5;--line:#eae0d8;--ink:#3a2718;--muted:#765e4c;--faint:#816b5a;--accent:#984e16;--accent-ink:#ffffff;--accent-soft:#f4ebe3;--fixed:#110b06;--bar1:#2e1807;--bar2:#48260c;--bar3:#391e09;--swatch:#e2955a}}
:root[data-palette="butter"]{--bg:#141108;--bg2:#1d190d;--panel:#252012;--panel2:#2c2616;--line:#443c25;--ink:#f5f3ed;--muted:#b1a88b;--faint:#988e71;--accent:#e0c985;--accent-ink:#181407;--accent-soft:#38311c;--fixed:#110e06;--bar1:#2e2408;--bar2:#48390d;--bar3:#382d0a;--swatch:#e2cd8d}
:root[data-palette="butter"][data-theme="light"]{--bg:#faf8f4;--bg2:#f5f2e8;--panel:#ffffff;--panel2:#faf9f5;--line:#eae5d8;--ink:#3a3118;--muted:#6d6346;--faint:#786f54;--accent:#846815;--accent-ink:#ffffff;--accent-soft:#f4f0e3;--fixed:#110e06;--bar1:#2e2408;--bar2:#48390d;--bar3:#382d0a;--swatch:#e2c05a}
@media (prefers-color-scheme: light){:root[data-palette="butter"]:not([data-theme="dark"]){--bg:#faf8f4;--bg2:#f5f2e8;--panel:#ffffff;--panel2:#faf9f5;--line:#eae5d8;--ink:#3a3118;--muted:#6d6346;--faint:#786f54;--accent:#846815;--accent-ink:#ffffff;--accent-soft:#f4f0e3;--fixed:#110e06;--bar1:#2e2408;--bar2:#48390d;--bar3:#382d0a;--swatch:#e2c05a}}
:root[data-palette="teal"]{--bg:#081414;--bg2:#0d1d1d;--panel:#122525;--panel2:#162c2b;--line:#254443;--ink:#edf5f5;--muted:#8bb1b0;--faint:#719897;--accent:#8bdad8;--accent-ink:#071817;--accent-soft:#1c3837;--fixed:#061110;--bar1:#0a2b2a;--bar2:#104442;--bar3:#0d3634;--swatch:#92ddda}
:root[data-palette="teal"][data-theme="light"]{--bg:#f4fafa;--bg2:#e8f5f4;--panel:#ffffff;--panel2:#f5fafa;--line:#d8eae9;--ink:#183a39;--muted:#446a69;--faint:#527574;--accent:#1b7976;--accent-ink:#ffffff;--accent-soft:#e3f4f4;--fixed:#061110;--bar1:#0a2b2a;--bar2:#104442;--bar3:#0d3634;--swatch:#62dad6}
@media (prefers-color-scheme: light){:root[data-palette="teal"]:not([data-theme="dark"]){--bg:#f4fafa;--bg2:#e8f5f4;--panel:#ffffff;--panel2:#f5fafa;--line:#d8eae9;--ink:#183a39;--muted:#446a69;--faint:#527574;--accent:#1b7976;--accent-ink:#ffffff;--accent-soft:#e3f4f4;--fixed:#061110;--bar1:#0a2b2a;--bar2:#104442;--bar3:#0d3634;--swatch:#62dad6}}
:root[data-palette="periwinkle"]{--bg:#080914;--bg2:#0d0d1d;--panel:#121225;--panel2:#16162c;--line:#252644;--ink:#ededf5;--muted:#8b8cb1;--faint:#77789c;--accent:#8b8dda;--accent-ink:#070718;--accent-soft:#1c1d38;--fixed:#060711;--bar1:#0a0b2b;--bar2:#101244;--bar3:#0d0e36;--swatch:#9295dd}
:root[data-palette="periwinkle"][data-theme="light"]{--bg:#f4f4fa;--bg2:#e8e9f5;--panel:#ffffff;--panel2:#f5f6fa;--line:#d8d8ea;--ink:#18193a;--muted:#4c4d76;--faint:#646690;--accent:#1f238e;--accent-ink:#ffffff;--accent-soft:#e3e4f4;--fixed:#060711;--bar1:#0a0b2b;--bar2:#101244;--bar3:#0d0e36;--swatch:#6266da}
@media (prefers-color-scheme: light){:root[data-palette="periwinkle"]:not([data-theme="dark"]){--bg:#f4f4fa;--bg2:#e8e9f5;--panel:#ffffff;--panel2:#f5f6fa;--line:#d8d8ea;--ink:#18193a;--muted:#4c4d76;--faint:#646690;--accent:#1f238e;--accent-ink:#ffffff;--accent-soft:#e3e4f4;--fixed:#060711;--bar1:#0a0b2b;--bar2:#101244;--bar3:#0d0e36;--swatch:#6266da}}
:root[data-palette="coral"]{--bg:#140908;--bg2:#1d0e0d;--panel:#251412;--panel2:#2c1816;--line:#442825;--ink:#f5eeed;--muted:#b18f8b;--faint:#987571;--accent:#e28d83;--accent-ink:#180907;--accent-soft:#381f1c;--fixed:#110706;--bar1:#2e0b07;--bar2:#48120c;--bar3:#390e09;--swatch:#e4948b}
:root[data-palette="coral"][data-theme="light"]{--bg:#faf4f4;--bg2:#f5e9e8;--panel:#ffffff;--panel2:#faf6f5;--line:#eadad8;--ink:#3a1b18;--muted:#76504c;--faint:#8a6460;--accent:#972317;--accent-ink:#ffffff;--accent-soft:#f4e5e3;--fixed:#110706;--bar1:#2e0b07;--bar2:#48120c;--bar3:#390e09;--swatch:#e2685a}
@media (prefers-color-scheme: light){:root[data-palette="coral"]:not([data-theme="dark"]){--bg:#faf4f4;--bg2:#f5e9e8;--panel:#ffffff;--panel2:#faf6f5;--line:#eadad8;--ink:#3a1b18;--muted:#76504c;--faint:#8a6460;--accent:#972317;--accent-ink:#ffffff;--accent-soft:#f4e5e3;--fixed:#110706;--bar1:#2e0b07;--bar2:#48120c;--bar3:#390e09;--swatch:#e2685a}}
:root[data-palette="sage"]{--bg:#0d1309;--bg2:#131d0d;--panel:#192512;--panel2:#1e2c16;--line:#304425;--ink:#f0f5ed;--muted:#99b18b;--faint:#7f9871;--accent:#abd095;--accent-ink:#0d1807;--accent-soft:#26381c;--fixed:#0a1007;--bar1:#17280e;--bar2:#253e16;--bar3:#1d3111;--swatch:#b0d39c}
:root[data-palette="sage"][data-theme="light"]{--bg:#f6faf4;--bg2:#edf5e8;--panel:#ffffff;--panel2:#f7faf5;--line:#dfead8;--ink:#243a18;--muted:#526a44;--faint:#617854;--accent:#477a29;--accent-ink:#ffffff;--accent-soft:#eaf3e5;--fixed:#0a1007;--bar1:#17280e;--bar2:#253e16;--bar3:#1d3111;--swatch:#92cd70}
@media (prefers-color-scheme: light){:root[data-palette="sage"]:not([data-theme="dark"]){--bg:#f6faf4;--bg2:#edf5e8;--panel:#ffffff;--panel2:#f7faf5;--line:#dfead8;--ink:#243a18;--muted:#526a44;--faint:#617854;--accent:#477a29;--accent-ink:#ffffff;--accent-soft:#eaf3e5;--fixed:#0a1007;--bar1:#17280e;--bar2:#253e16;--bar3:#1d3111;--swatch:#92cd70}}

/* These grounds are fixed in both modes by design, but they should still
   belong to the chosen palette rather than staying green. */
.utilbar{background:linear-gradient(90deg,var(--bar1),var(--bar2),var(--bar3),var(--bar2),var(--bar1)) !important;
  background-size:300% 100% !important}
footer.foot{background:var(--fixed) !important}
/* Was: background:var(--fixed) !important — which is what made the sidebar a
   black slab on a light page. It now takes the page's own background. */
.sidebar-right{background:transparent}

/* ---- settings menu ----------------------------------------------------
   One control for one decision: how the site looks. The language switcher
   stays separate because it changes the content, not the appearance. */
.setwrap{position:relative;flex-shrink:0;order:4;display:inline-flex}
.setbtn{
  width:40px;height:40px;min-height:40px;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;cursor:pointer;color:#fff;font-size:16px;line-height:1;
  transition:background .15s,border-color .15s,transform .2s;
}
.setbtn:hover{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.42)}
.setwrap.open .setbtn{background:#fff;color:#111;border-color:#fff}
.setwrap.open .set-ic{transform:rotate(60deg)}
.set-ic{display:block;transition:transform .25s}
.setbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* .utilbar is position:relative;z-index:1 - a stacking context - so a child
   can never rise above the page from inside it. The bar itself is lifted. */
body.set-open .utilbar{z-index:400}
/* A reset that sits in the heading rather than as an eleventh swatch:
   it is not another colour, it is the way out. */
.setpop-h .palreset{float:right;background:none;border:0;cursor:pointer;padding:0;
  font:inherit;font-size:12px;font-weight:600;color:var(--accent);text-decoration:underline}
.setpop-h .palreset:hover{filter:brightness(1.15)}
/* The undo. Bottom centre, above the chat button, gone in eight seconds. */
#paltoast{position:fixed;left:16px;right:auto;bottom:22px;z-index:1200;
  display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);white-space:nowrap;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:9px 10px 9px 16px;font-size:14px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.55)}
#paltoast button{background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer;
  border-radius:999px;padding:7px 15px;font:inherit;font-size:13.5px;font-weight:700}
#paltoast button:hover{filter:brightness(1.06)}
@media(max-width:560px){#paltoast{left:12px;bottom:16px;font-size:13px;gap:10px}}
@media(prefers-reduced-motion:no-preference){
  #paltoast{animation:palin .18s ease-out}
  @keyframes palin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}
.setpop{
  position:absolute;top:calc(100% + 10px);right:0;z-index:401;
  display:none;width:296px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:16px;
  box-shadow:0 22px 52px -20px rgba(0,0,0,.55);
  text-align:left;
}
.setwrap.open .setpop{display:block}
.setpop-h{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 9px;font-weight:700;
}
.modetog{display:grid;grid-template-columns:1fr 1fr;gap:6px;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:4px}
.modeb{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--muted);
  font-family:inherit;font-size:13px;font-weight:700;
  transition:background .15s,color .15s;
}
.modeb:hover{color:var(--ink)}
.modeb[aria-checked="true"]{background:var(--panel);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.modeb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.palgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.palsw{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:5px 2px;border-radius:10px;
  font-family:inherit;color:var(--faint);font-size:9.5px;font-weight:600;
}
.palsw span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palsw:hover{background:var(--bg2);color:var(--ink)}
.palsw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.palsw i{width:26px;height:26px;border-radius:999px;display:block;
  border:2px solid transparent;box-shadow:0 0 0 1px var(--line) inset}
.palsw[aria-checked="true"] i{border-color:var(--ink)}
.palsw[aria-checked="true"]{color:var(--ink)}

/* On a phone it becomes a sheet pinned inside both margins, rather than
   hanging off its button and running past the edge. */
@media(max-width:560px){
  .setpop{position:fixed;top:60px;left:10px;right:10px;width:auto}
  .palgrid{grid-template-columns:repeat(5,1fr)}
}

.palsw i[data-swatch="green"]{background:var(--sw-green)}
.palsw i[data-swatch="blossom"]{background:var(--sw-blossom)}
.palsw i[data-swatch="lilac"]{background:var(--sw-lilac)}
.palsw i[data-swatch="sky"]{background:var(--sw-sky)}
.palsw i[data-swatch="apricot"]{background:var(--sw-apricot)}
.palsw i[data-swatch="butter"]{background:var(--sw-butter)}
.palsw i[data-swatch="teal"]{background:var(--sw-teal)}
.palsw i[data-swatch="periwinkle"]{background:var(--sw-periwinkle)}
.palsw i[data-swatch="coral"]{background:var(--sw-coral)}
.palsw i[data-swatch="sage"]{background:var(--sw-sage)}

/* ---- wordmark tagline -------------------------------------------------
   Added as a sibling rather than inside the anchor: applyBrand() matches the
   anchor's contents as a literal string to rebrand the partner sites. */

/* ---- Urdu typography --------------------------------------------------
   Self-hosted: a webfont CDN sees every visitor's IP, and this site's promise
   is that nothing tracks them. Only downloaded when Urdu glyphs are actually
   rendered, so English visitors never fetch the 155KB Nastaliq file. */
@font-face{font-family:'UrduNastaliq';src:url('/assets/fonts/urdu-nastaliq-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'UrduNastaliq';src:url('/assets/fonts/urdu-nastaliq-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'UrduGulzar';src:url('/assets/fonts/urdu-gulzar-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'UrduNaskh';src:url('/assets/fonts/urdu-naskh-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'UrduNaskh';src:url('/assets/fonts/urdu-naskh-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'UrduSans';src:url('/assets/fonts/urdu-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'UrduSans';src:url('/assets/fonts/urdu-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --urdu-font:'UrduNastaliq','Noto Nastaliq Urdu',serif;
  /* 1.06 read heavy at body sizes; Nastaliq does not need scaling up,
     it needs room to slope. */
  --urdu-lh:2.0;
  --urdu-scale:1.0;
}
:root[data-urdufont="gulzar"]{--urdu-font:'UrduGulzar','Gulzar',serif;--urdu-lh:1.95;--urdu-scale:1.0}
:root[data-urdufont="naskh"]{--urdu-font:'UrduNaskh','Noto Naskh Arabic',serif;--urdu-lh:1.85;--urdu-scale:1.0}
:root[data-urdufont="sans"]{--urdu-font:'UrduSans','Noto Sans Arabic',sans-serif;--urdu-lh:1.75;--urdu-scale:1.0}

/* Nastaliq's baseline slopes through each word, so it collides at the leading
   that suits Latin. Applied only where Urdu is actually being rendered. */
html[lang="ur"] body,html[dir="rtl"] body,
html[lang="ur"] .brand-tag,.urdu{
  font-family:var(--urdu-font);
  line-height:var(--urdu-lh);
  font-size:calc(1em * var(--urdu-scale));
}
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3,
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[lang="ur"] .title,html[dir="rtl"] .title{
  /* 1.7 collided at heading sizes - Nastaliq descends further the larger
     it gets, so headings need MORE leading than body text, not less. */
  font-family:var(--urdu-font);line-height:1.85;padding-bottom:.1em;
}
/* Nastaliq descends a long way; inputs and buttons need the room. */
html[lang="ur"] .btn,html[dir="rtl"] .btn,
html[lang="ur"] button,html[dir="rtl"] button,
html[lang="ur"] input,html[dir="rtl"] input,
html[lang="ur"] select,html[dir="rtl"] select,
html[lang="ur"] textarea,html[dir="rtl"] textarea{
  font-family:var(--urdu-font);line-height:1.9;padding-top:.35em;padding-bottom:.45em;
}
/* Numbers and Latin fragments inside Urdu keep the Latin face - Nastaliq
   digits are hard to scan and English words in it look like a mistake. */
html[lang="ur"] .num,html[dir="rtl"] .num,
html[lang="ur"] code,html[dir="rtl"] code{font-family:var(--sans)}

.fontgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:2px}
.fontsw{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:9px 11px;cursor:pointer;font-family:inherit;color:var(--muted);
  font-size:11px;font-weight:600;text-align:left;transition:border-color .15s,color .15s;
}
.fontsw:hover{border-color:var(--accent);color:var(--ink)}
.fontsw[aria-checked="true"]{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.fontsw em{font-style:normal;font-size:17px;line-height:1.9;color:var(--ink);direction:rtl}
.fontsw[data-font="nastaliq"] em{font-family:'UrduNastaliq',serif}
.fontsw[data-font="gulzar"] em{font-family:'UrduGulzar',serif}
.fontsw[data-font="naskh"] em{font-family:'UrduNaskh',serif}
.fontsw[data-font="sans"] em{font-family:'UrduSans',sans-serif}
.brandwrap{display:flex;flex-direction:column;justify-content:center;position:relative;
  gap:1px;margin-right:auto;min-width:0}
.brandwrap .brand{margin-right:0}
/* The logo box was squeezed to 58px at 1280-1440 wide and the name ran over the menu. It keeps its width; the menu gives way. */
.brandwrap{flex-shrink:0}
/* The tagline under the wordmark is position:absolute at top:100%, so it
   hangs outside the brandwrap box and the header row was centring the logo
   alone - 23px of air above it and 8px below the tagline. Giving the wrap a
   bottom margin the height of that overhang makes flex centring account for
   the whole block, so the two gaps match. Measured, not nudged. */
.brandwrap{margin-bottom:16px}
@media(max-width:420px){.brandwrap{margin-bottom:14px}}
header.nav .brand{white-space:nowrap}
#mainnav{min-width:0}
/* 1181-1400 wide: logo, full menu, search and the WhatsApp button did not fit, and the button ran off screen. */
@media(min-width:1241px) and (max-width:1400px){.hsearch input{width:106px} #mainnav{gap:12px} #mainnav a{font-size:14px} .wa-head{margin-left:8px!important;padding-left:12px;padding-right:12px}}
.brand-tag{
  display:block;position:absolute;left:0;right:0;top:100%;margin-top:-3px;text-align:left;
  font-size:12px;font-weight:600;letter-spacing:0;transform-origin:left center;
  color:var(--accent);white-space:nowrap;overflow:hidden;
  opacity:.92;transition:opacity .5s ease,transform .5s ease;
}
.brand-tag.fade{opacity:0}
@media(max-width:420px){.brand-tag{font-size:11px}}
@media (prefers-reduced-motion:reduce){.brand-tag{transition:none}}

/* ---- cards ------------------------------------------------------------
   Flat panels with one border read as a list. A soft accent glow, a tinted
   icon chip and a lift on interaction give them some life without turning a
   mental-health site into a carnival. All of it is driven by --accent, so it
   re-tints with whichever palette is chosen. */
.hq-tool,.hq-q{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft) 0%, transparent 62%),
    linear-gradient(160deg, var(--panel) 0%, var(--panel2) 100%);
  border:1px solid var(--line);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hq-tool::after,.hq-q::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 120%, var(--accent) 0%, transparent 70%);
  opacity:0;transition:opacity .22s ease;
}
.hq-tool:hover,.hq-q:hover,.hq-tool:focus-visible,.hq-q:focus-visible{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 14px 30px -18px var(--accent);
}
.hq-tool:hover::after,.hq-q:hover::after{opacity:.10}
.hq-tool:active,.hq-q:active{transform:translateY(-1px)}

/* The emoji sits in its own tinted chip instead of floating in the corner. */
.hq-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:13px;
  background:var(--accent-soft);
  border:1px solid var(--line);
  font-size:21px;margin-bottom:10px;
}

/* Questions get a rail in the accent so the category reads at a glance. */
.hq-q{border-left:3px solid var(--accent)}
.hq-cat{color:var(--accent);font-weight:700}

/* Tools two-up on phones - their labels are short. Questions and articles
   stay one-up, because their titles are not. */
.hq-tools{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(min-width:700px){.hq-tools{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
.qa-related{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
@media(min-width:760px){.qa-related{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.hq-feed{grid-template-columns:1fr}
@media(min-width:760px){.hq-feed{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}

@media (prefers-reduced-motion:reduce){
  .hq-tool,.hq-q{transition:none}
  .hq-tool:hover,.hq-q:hover{transform:none}
}

/* ---- grid density -----------------------------------------------------
   Fixed counts rather than auto-fill, so the rhythm is identical on every
   screen instead of shifting with the container width. Placed last in this
   sheet because the original auto-fill rules sit further up. */
.hq-tools{grid-template-columns:repeat(2,1fr)}
.hq-feed{grid-template-columns:1fr}
.hq-tools.hq-learn{grid-template-columns:1fr}
@media(min-width:760px){
  .hq-tools{grid-template-columns:repeat(4,1fr)}
  .hq-feed{grid-template-columns:repeat(3,1fr)}
  .hq-tools.hq-learn{grid-template-columns:repeat(2,1fr)}
}

/* On /questions the page leads with its own ASK A QUESTION button, so the
   same words in the top bar and again in a CTA is the label three times. The
   bar keeps its link everywhere else, where it is the way in. */
body.on-questions .utilbar .row > a[href="/questions"]{display:none}
body.on-questions a[href="/questions#ask"]{display:none}

/* ---- footer text tokens ----------------------------------------------
   --fixed is dark in BOTH themes, so footer text cannot take --ink, which
   flips. Pairing a fixed surface with a flipping ink made the headings
   1.13:1 in light mode and the links 1.00:1 in dark. These two are always
   light because the surface they sit on is always dark. */
:root{--fixed-ink:#fdf7f9;--fixed-dim:color-mix(in srgb,#fdf7f9 74%,transparent)}
/* Accent is tuned against --bg, not against the permanently dark --fixed.
   Mixed toward the footer ink so the hue survives and the contrast works. */
:root{--fixed-accent:color-mix(in srgb,var(--accent) 42%,var(--fixed-ink))}
footer.foot a[style*='--accent'],footer.foot .cols a[style*='--accent'],
footer.foot .allart{color:var(--fixed-accent) !important}
footer.foot .btn{color:var(--fixed-ink) !important;
  background:color-mix(in srgb,var(--fixed-ink) 12%,transparent) !important;
  border:1px solid color-mix(in srgb,var(--fixed-ink) 26%,transparent) !important}
footer.foot .btn-accent{color:var(--accent-ink) !important;
  background:var(--accent) !important;border-color:transparent !important}
footer.foot .btn-wa{color:#fff !important;background:#25D366 !important;
  border-color:#25D366 !important;display:inline-flex !important;gap:12px}
footer.foot .btn-wa:hover{background:#1ebe5d !important;border-color:#1ebe5d !important}

footer.foot{color:var(--fixed-dim)}
footer.foot b,footer.foot strong,footer.foot h3,footer.foot h4{color:var(--fixed-ink)}
footer.foot a{color:var(--fixed-dim)}
footer.foot a:hover{color:var(--fixed-ink)}
footer.foot .disclaimer,footer.foot .footlegal,footer.foot .footlegal a,
footer.foot p,footer.foot span,footer.foot div{color:var(--fixed-dim)}
footer.foot .cols a{color:var(--fixed-dim)}

/* ---- close the dead space --------------------------------------------
   The 44px touch target belongs on touch devices, not on a 1400px desktop
   where it added ~150px of empty run to every list. */
@media(min-width:921px){
  footer.foot .cols a{min-height:0;padding:5px 0}
  footer.foot .cols{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
    gap:28px;align-items:start}
  footer.foot{padding:44px 0 28px}
}

/* ---- brand mark -------------------------------------------------------
   Heart + person + leaves in one silhouette. Sized from the type it sits
   beside so the lockup holds together wherever it is used. */
.brand .dpk-mark{width:1.15em;height:1.15em;vertical-align:-.18em;margin-right:.14em;
  flex:0 0 auto}
/* Leaf wordmark (owner, 13 Sep 2026): rotates with the heart mark, header only. */
.brand-leaf{height:2.15em;width:auto;display:block}
@media(max-width:880px){.brand-leaf{height:2.2em}}
@media(max-width:420px){.brand-leaf{height:1.95em}}
/* Dark header, white wordmark — same idea as the heart mark, which also
   goes white on dark (see .nav-dark .dpk-l above). */
.brand-leafwrap{display:inline-flex;align-items:center}
.brand-leaf-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-leaf-light{display:none} :root:not([data-theme="light"]) .brand-leaf-dark{display:inline-block}}
[data-theme="dark"] .brand-leaf-light{display:none}
[data-theme="dark"] .brand-leaf-dark{display:inline-block}
.brand{display:inline-flex;align-items:center;gap:.1em}
/* On the dark header the teal half would disappear into the ground, so the
   halves go white and the yellow disc carries the accent. */
footer.foot .dpk-l,footer.foot .dpk-r,
.nav-dark .dpk-l,.nav-dark .dpk-r{fill:var(--fixed-ink,#fff)}
footer.foot .dpk-r,.nav-dark .dpk-r{opacity:.82}