/* ProperHealth design system — one source for web, and the reference for slides and video.
   Tokens are mirrored in _build/brand.py (used by the PPTX and video renderers). */
@font-face{font-family:"PH Nastaliq";src:url("../fonts/NotoNastaliqUrdu-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PH Nastaliq";src:url("../fonts/NotoNastaliqUrdu-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F7F5F0; --surface:#FFFFFF; --sunk:#EFECE4;
  --ink:#15201E; --ink-2:#46524F; --ink-3:#5F6A67;
  --line:#DDD8CD; --line-2:#C9C3B6;
  --brand:#0E5753; --brand-2:#0A3F3C; --brand-tint:#E3EEEC; --brand-soft:#B9D4CF;
  --ochre:#B7791F; --ochre-tint:#F6ECDB;
  --flag:#A3271B; --flag-tint:#FBEAE6;
  --pending:#7A5300; --pending-tint:#FBF1DC;
  --serif:Georgia,"Noto Serif","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
  --urdu:"PH Nastaliq","Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",serif;
  --measure:40rem; --wide:74rem; --gutter:clamp(16px,4vw,40px);
  --r:6px; --r-lg:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:7.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--brand-2)}
:focus-visible{outline:3px solid var(--ochre);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.01em;line-height:1.15;margin:0}
p{margin:0 0 1em}
strong{font-weight:650}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:var(--measure)}
.skip{position:absolute;inset-inline-start:8px;top:-4rem;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{top:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- review strip + masthead */
.strip{background:var(--pending-tint);color:var(--pending);font-size:.8125rem;line-height:1.4;border-bottom:1px solid #EBD9B4}
.strip .wrap{display:flex;gap:.75rem;align-items:center;padding-top:.45rem;padding-bottom:.45rem;flex-wrap:wrap}
.strip b{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}
.strip a{color:inherit}
.strip a.rd{font-weight:700;margin-inline-start:auto;text-decoration-thickness:2px}
.revcall{padding:1.25rem 0 0}.revbox{display:flex;gap:1.25rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--ochre-tint);border:1px solid #E7CF9E;border-radius:var(--r);padding:1.1rem 1.35rem}
.revbox h2{margin:.1rem 0 .35rem}.revbox p{margin:0;max-width:44rem}
.revbtn{display:inline-block;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;border-radius:999px;padding:.7rem 1.25rem;white-space:nowrap}
.revbtn:hover{background:var(--brand-2)}
.mast{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.mast .wrap{display:flex;align-items:center;gap:1.25rem;min-height:4.25rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex:none}
.brand svg{width:30px;height:30px}
.brand .wm{font:400 1.45rem/1 var(--serif);letter-spacing:-.02em}
.brand .wm i{font-style:normal;color:var(--brand)}
[lang="ur"] .brand>span{display:flex;flex-direction:column;line-height:1.3}
[lang="ur"] .brand .tld{font-size:.62rem;letter-spacing:.08em}
.brand .tld{font:600 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:.15rem}
.nav{display:flex;align-items:center;gap:1.4rem;margin-inline-start:auto}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem;font-weight:550;padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}
.hsearch{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);padding:0 .25rem 0 .85rem;height:2.4rem}
.hsearch input{border:0;background:transparent;font:inherit;font-size:.95rem;width:11rem;color:var(--ink);outline:none;min-width:0}
.hsearch:focus-within{outline:3px solid var(--ochre);outline-offset:1px}
.hsearch button{border:0;background:var(--brand);color:#fff;border-radius:999px;width:1.9rem;height:1.9rem;display:grid;place-items:center;cursor:pointer;flex:none}
.hsearch button svg{width:15px;height:15px}
.lang{line-height:1.4;font-weight:650;font-size:.92rem;text-decoration:none;color:var(--brand);border:1px solid var(--brand-soft);border-radius:999px;padding:.32rem .8rem;white-space:nowrap}
.lang:hover{background:var(--brand-tint)}
.lang .ur{font-family:var(--urdu);font-size:1.05rem;line-height:1.5;display:inline-block}
.menu-btn{display:none;margin-inline-start:auto;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r);height:2.4rem;padding:0 .8rem;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:inline-flex;align-items:center;gap:.4rem}
  .nav{display:none;position:absolute;inset-inline:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gutter) 1rem;margin:0}
  .nav.open{display:flex}
  .nav a{padding:.75rem 0;border-bottom:1px solid var(--line)}
  .hsearch{margin-top:.75rem;height:2.75rem}
  .hsearch input{width:100%;flex:1}
  .lang{align-self:flex-start;margin-top:.75rem}
}

/* ---------- topic journey bar */
.journey{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:4.25rem;z-index:20}
.journey .wrap{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.journey .wrap::-webkit-scrollbar{display:none}
.journey a{flex:none;display:flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.92rem;padding:.8rem .75rem;border-bottom:3px solid transparent;white-space:nowrap}
.journey a svg{width:17px;height:17px;opacity:.8}
.journey a:hover{color:var(--ink)}
.journey a[aria-current="page"]{color:var(--brand-2);border-bottom-color:var(--brand)}
.journey .jt{flex:none;font:400 .95rem/1 var(--serif);color:var(--ink);padding:.8rem 1rem .8rem 0;margin-inline-end:.5rem;border-inline-end:1px solid var(--line);align-self:center;max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.journey .jt{display:none}}

/* ---------- page head */
.crumbs{font-size:.85rem;color:var(--ink-3);padding-top:1.5rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"/";margin-inline-end:.35rem;color:var(--line-2)}
.crumbs a{color:var(--ink-2)}
.head{padding:1.25rem 0 2.25rem;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:end}
.kicker{font:700 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin:0 0 .9rem}
.head h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.7rem);margin-bottom:1rem;overflow-wrap:anywhere}
.head .q{font:400 clamp(1.2rem,1rem + .9vw,1.55rem)/1.35 var(--serif);color:var(--ink-2);margin:0 0 1rem;font-style:italic}
.head .dek{font-size:1.1rem;color:var(--ink-2);max-width:38rem;margin:0}
.meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;padding:.28rem .65rem;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface);line-height:1.3}
.chip.pending{background:var(--pending-tint);border-color:#E7CF9E;color:var(--pending)}
.chip.ok{background:var(--brand-tint);border-color:var(--brand-soft);color:var(--brand-2)}
.chip .dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.glance{border-top:3px solid var(--ink);padding-top:1rem}
.glance h2{font:700 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem}
.glance dl{margin:0}
.glance div{display:grid;grid-template-columns:6.2rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.glance dt{font:400 2rem/1 var(--serif);color:var(--brand-2);white-space:nowrap}
[dir="rtl"] .glance dt[dir="ltr"],[dir="rtl"] .numbers b[dir="ltr"]{text-align:right}
.glance dd{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.45}
@media (max-width:860px){.head{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- sections */
main{display:block}
.sec{padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--line)}
.sec.tint{background:var(--surface)}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;margin-bottom:1.75rem;max-width:46rem}
.sec-h h2{font-size:clamp(1.65rem,1.25rem + 1.6vw,2.4rem)}
.sec-h p{color:var(--ink-2);margin:0;font-size:1.05rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.lead{font:400 clamp(1.2rem,1.05rem + .6vw,1.45rem)/1.55 var(--serif);color:var(--ink)}
.points{list-style:none;margin:0;padding:0}
.points li{padding:1rem 0 1rem 2.1rem;border-bottom:1px solid var(--line);position:relative}
.points li:first-child{border-top:1px solid var(--line)}
.points li::before{content:"";position:absolute;inset-inline-start:.2rem;top:1.55rem;width:.85rem;height:2px;background:var(--brand)}
[dir="rtl"] .points li{padding:1rem 2.1rem 1rem 0}
.prose{max-width:var(--measure)}
.prose p,.prose li{font-size:1.09rem}
.prose ul{padding-inline-start:1.2rem}
.prose li{margin-bottom:.55rem}
.prose h2{font-size:clamp(1.55rem,1.2rem + 1.3vw,2.15rem);margin:3rem 0 1rem}
.prose h2:first-child{margin-top:0}
sup.c{font:700 .68em/0 var(--sans);vertical-align:super;margin-inline-start:.08em;white-space:nowrap}
sup.c a{text-decoration:none;color:var(--brand);padding:0 .08em}
sup.c a:hover{text-decoration:underline}
sup.c a+a::before{content:",";color:var(--ink-3)}

/* figures */
.fig{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1rem,3vw,2rem)}
.fig figcaption{font-size:.92rem;color:var(--ink-2);margin-top:1rem;line-height:1.5;max-width:46rem}
.fig .ft{font:400 1.25rem/1.3 var(--serif);margin:0 0 .25rem}
.fig .fs{font-size:.9rem;color:var(--ink-3);margin:0 0 1.25rem}
.prose .fig{margin:2rem 0}
@media (min-width:1100px){.prose .fig.bleed{margin-inline:-6rem}}

/* flow */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0;counter-reset:f}
.flow .ic b.num{font:400 1.4rem/1 var(--serif);color:var(--brand-2)}
.flow li{position:relative;padding:0 1.25rem 0 0}
.flow .ic{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--brand-tint);color:var(--brand-2);display:grid;place-items:center;margin-bottom:.9rem}
.flow .ic svg{width:1.7rem;height:1.7rem}
.flow li:not(:last-child)::after{content:"";position:absolute;top:1.6rem;inset-inline-start:4rem;inset-inline-end:1.25rem;height:2px;background:repeating-linear-gradient(90deg,var(--brand-soft) 0 6px,transparent 6px 11px)}
.flow h3{font:650 1rem/1.3 var(--sans);margin-bottom:.3rem}
.flow p{font-size:.93rem;color:var(--ink-2);margin:0}
@media (max-width:640px){.flow{grid-template-columns:1fr;gap:1.25rem}.flow li{display:grid;grid-template-columns:3.25rem 1fr;gap:0 1rem;padding:0}.flow .ic{grid-row:span 2;margin:0}.flow li::after{display:none}}

/* stages */
.stages{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-top:1px solid var(--line)}
.stage{padding:1.1rem 1rem 0 0;border-inline-end:1px solid var(--line);padding-inline-start:1rem}
.stage:first-child{padding-inline-start:0}
.stage:last-child{border-inline-end:0}
.stage .n{font:400 2rem/1 var(--serif);color:var(--brand-soft)}
.stage h3{font:650 1rem/1.3 var(--sans);margin:.5rem 0 .35rem}
.stage p{font-size:.9rem;color:var(--ink-2);margin:0 0 1rem;min-height:4.2em}
.meter{margin:.35rem 0}
.meter span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem}
.meter i{display:flex;gap:3px}
.meter b{display:block;height:.55rem;flex:1;border-radius:2px;background:var(--sunk)}
.meter.c-ochre b.on{background:var(--ochre)}
.meter.c-brand b.on{background:var(--brand)}
.meter em{font-style:normal;font-size:.78rem;color:var(--ink-2);display:block;margin-top:.2rem}
.stage.dim{opacity:.28}
.stage.hi{background:linear-gradient(var(--brand-tint),transparent 70%)}
.stages-note{margin-top:1.1rem;font-size:.92rem;font-weight:600;color:var(--brand-2)}
@media (max-width:860px){.stages{grid-template-columns:1fr 1fr}.stage:nth-child(2){border-inline-end:0}.stage:nth-child(3){padding-inline-start:0}.stage{border-bottom:1px solid var(--line)}}
@media (max-width:520px){.stages{grid-template-columns:1fr}.stage{border-inline-end:0;padding-inline-start:0}.stage p{min-height:0}}
[lang="ur"] .meter span{letter-spacing:0;text-transform:none;font-size:.85rem}

/* trend chips (stages) */
.trend{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;margin:.45rem 0;font-size:.82rem}
.trend span{font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.7rem;color:var(--ink-3)}
[lang="ur"] .trend span{letter-spacing:0;text-transform:none;font-size:.85rem}
.trend em{font-style:normal;font-weight:650;padding:.05rem .5rem;border-radius:999px}
.trend.c-ochre em{background:var(--ochre-tint);color:var(--pending)}
.trend.c-brand em{background:var(--brand-tint);color:var(--brand-2)}
/* trial context beside comparison charts */
.chart-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.75rem;align-items:start}
@media (max-width:760px){.chart-wrap{grid-template-columns:minmax(0,1fr)}}
.ctx{background:var(--sunk);border-radius:var(--r);padding:1rem 1.1rem;font-size:.92rem}
.ctx-h{font-weight:700;margin:0 0 .4rem}
.ctx ul{margin:0;padding-inline-start:1.05rem}.ctx li{margin:.3rem 0}
.caution{margin:1rem 0 0;font-size:.92rem;font-weight:600;color:var(--pending);background:var(--pending-tint);border-radius:var(--r);padding:.6rem .9rem}
.illus{width:100%;height:auto;display:block}
/* chart */
.chart{width:100%}
.chart .row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:center;padding:.8rem 0;border-top:1px solid var(--line)}
.chart .row:last-of-type{border-bottom:1px solid var(--line)}
.chart .g{font:400 1.05rem/1.25 var(--serif)}
.chart .bars{display:grid;gap:.4rem}
.chart .bar{display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.chart .bar i{display:block;height:1.35rem;border-radius:0 3px 3px 0;min-width:2px}
[dir="rtl"] .chart .bar i{border-radius:3px 0 0 3px}
.chart .s0 i{background:var(--brand)}
.chart .s1 i{background:var(--ochre)}
.chart .bar b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:2.6rem}
.chart .bar small{color:var(--ink-3)}
.chart .axis{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;font-size:.75rem;color:var(--ink-3);padding-top:.35rem}
.chart .axis div{display:flex;justify-content:space-between}
.legend{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.88rem;margin-bottom:1rem}
.legend span{display:inline-flex;align-items:center;gap:.45rem}
.legend i{width:.9rem;height:.9rem;border-radius:2px;display:inline-block}
@media (max-width:520px){.chart .row,.chart .axis{grid-template-columns:1fr;gap:.4rem}.chart .axis>span{display:none}}

.takeaways{list-style:none;padding:0;margin:0;counter-reset:t}
.takeaways li{counter-increment:t;display:grid;grid-template-columns:2rem 1fr;gap:.5rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.takeaways li::before{content:counter(t);font:400 1.35rem/1.2 var(--serif);color:var(--brand)}

/* contrast + numbers */
.contrast{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:1rem}
.ct{border-radius:var(--r);padding:1.1rem 1.25rem;background:var(--sunk)}
.ct-good{background:var(--brand-tint)}
.ct-caution{background:var(--ochre-tint)}
.ct h3{font:650 1.02rem/1.35 var(--sans);margin-bottom:.5rem}
.ct-good h3{color:var(--brand-2)}.ct-caution h3{color:var(--pending)}
.ct ul{margin:0;padding-inline-start:1.1rem}.ct li{margin:.35rem 0;font-size:.97rem}
.numbers{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:2rem}
.numbers>div{border-top:3px solid var(--ink);padding-top:.9rem}
.numbers b{display:block;font:400 clamp(2.6rem,2rem + 2.5vw,4rem)/1 var(--serif);color:var(--brand-2);margin-bottom:.5rem}
.numbers span{color:var(--ink-2)}
[lang="ur"] .ct h3{font-family:var(--urdu);font-weight:700;line-height:1.9}
@media (max-width:760px){.contrast,.numbers{grid-template-columns:minmax(0,1fr)}}
/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:44rem}
th,td{text-align:start;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:700 .74rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--sunk)}
[lang="ur"] thead th{letter-spacing:0;text-transform:none;font-size:.95rem}
tbody th{font-weight:650}
tbody tr:last-child>*{border-bottom:0}
td.range{font-variant-numeric:tabular-nums;white-space:nowrap}
td.pre{background:var(--ochre-tint)}
@media (max-width:700px){
  .tbl-wrap table{min-width:0}
  .tbl-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-wrap tr,.tbl-wrap tbody th,.tbl-wrap td{display:block}
  .tbl-wrap tbody tr{padding:.9rem 1rem;border-bottom:1px solid var(--line)}
  .tbl-wrap tbody tr:last-child{border-bottom:0}
  .tbl-wrap tbody th{padding:0 0 .4rem;border:0;font-size:1.05rem}
  .tbl-wrap td{padding:.2rem 0;border:0;display:grid;grid-template-columns:7.5rem 1fr;gap:.75rem;white-space:normal}
  .tbl-wrap td::before{content:attr(data-label);font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-top:.15rem}
  [lang="ur"] .tbl-wrap td::before{letter-spacing:0;text-transform:none;font-size:.9rem}
  .tbl-wrap td.pre{background:none}.tbl-wrap td.pre>*:first-child,.tbl-wrap td.pre{color:var(--ink)}
  .tbl-wrap td.na{display:none}
}
.tbl-note{font-size:.9rem;color:var(--ink-2);margin-top:.9rem}

/* history */
.hist{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,4rem)}
@media (max-width:860px){.hist{grid-template-columns:minmax(0,1fr)}}
blockquote{margin:0;padding:0}
.pull{font:400 clamp(1.7rem,1.2rem + 2vw,2.6rem)/1.2 var(--serif);color:var(--brand-2);border-inline-start:3px solid var(--ochre);padding-inline-start:1.25rem}
.pull+cite,.cite{display:block;font-style:normal;font-size:.9rem;color:var(--ink-3);margin-top:.9rem;padding-inline-start:1.5rem}
.boundary{background:var(--sunk);border-radius:var(--r);padding:1rem 1.15rem;font-size:.97rem;margin-top:1.25rem}
.callout{border-inline-start:3px solid var(--brand);background:var(--brand-tint);padding:1rem 1.2rem;border-radius:0 var(--r) var(--r) 0;margin:1.75rem 0}
[dir="rtl"] .callout{border-radius:var(--r) 0 0 var(--r)}
.callout.boundary{border-inline-start-color:var(--ink-3);background:var(--sunk)}

/* steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:0 1.75rem}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.prose .steps{grid-template-columns:1fr}
.steps li{counter-increment:s;padding:1.15rem 0 1.15rem 3rem;border-top:1px solid var(--line);position:relative}
[dir="rtl"] .steps li{padding:1.15rem 3rem 1.15rem 0}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:1.05rem;width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid var(--brand);color:var(--brand);display:grid;place-items:center;font:400 1.05rem/1 var(--serif)}
.steps h3{font:650 1.02rem/1.35 var(--sans);margin-bottom:.25rem}
.steps p{margin:0;color:var(--ink-2);font-size:.95rem}

/* meds + flags */
.list-rule{list-style:none;margin:0;padding:0}
.list-rule li{padding:.95rem 0;border-bottom:1px solid var(--line)}
.list-rule li:first-child{border-top:1px solid var(--line)}
.flags{background:var(--flag-tint);border:1px solid #EFC4BC;border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem)}
.flags h2{color:var(--flag);font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.flags .note{font-size:.85rem;color:#7A3A31;margin:.35rem 0 1rem}
.flags ul{margin:0;padding:0;list-style:none}
.flags li{padding:.75rem 0 .75rem 1.8rem;border-top:1px solid #F0CFC8;position:relative}
[dir="rtl"] .flags li{padding:.75rem 1.8rem .75rem 0}
.flags li::before{content:"!";position:absolute;inset-inline-start:0;top:.8rem;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--flag);color:#fff;font:700 .78rem/1.2rem var(--sans);text-align:center}

/* explore rail (topic destinations) */
.explore{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.explore a{display:grid;grid-template-rows:auto auto 1fr;gap:.3rem;padding:1.25rem;text-decoration:none;color:var(--ink);border-inline-end:1px solid var(--line);min-height:9rem}
.explore a:last-child{border-inline-end:0}
.explore a:hover{background:var(--brand-tint)}
.explore svg{width:1.6rem;height:1.6rem;color:var(--brand)}
.explore b{font:400 1.2rem/1.2 var(--serif);margin-top:.4rem}
.explore span{font-size:.88rem;color:var(--ink-2)}
@media (max-width:860px){.explore{grid-template-columns:1fr 1fr}.explore a{border-bottom:1px solid var(--line)}.explore a:nth-child(2n){border-inline-end:0}}
@media (max-width:480px){.explore{grid-template-columns:1fr}.explore a{border-inline-end:0;min-height:0}.explore a:last-child{border-bottom:0}}

.cta{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:center;background:var(--brand-2);color:#EAF3F1;border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.75rem)}
.cta h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin-bottom:.6rem}
.cta p{margin:0;color:#CFE2DE}
.cta .who{border-inline-start:1px solid rgba(255,255,255,.2);padding-inline-start:1.75rem;font-size:.95rem}
.cta .who a{color:#fff;font-weight:650}
.cta .who small{display:block;color:#A9C7C1;margin-top:.5rem;font-size:.8rem}
@media (max-width:760px){.cta{grid-template-columns:1fr}.cta .who{border:0;padding:0}}

/* article */
.art-head{padding:1.25rem 0 2rem;max-width:50rem}
.art-head h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.4rem);margin-bottom:1rem}
.art-head .dek{font:400 1.25rem/1.5 var(--serif);color:var(--ink-2);margin:0}
.art{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);padding:2.5rem 0 4rem;border-top:1px solid var(--line)}
.toc{position:sticky;top:8.5rem;align-self:start;font-size:.9rem}
.toc h2{font:700 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.75rem}
[lang="ur"] .toc h2,[lang="ur"] .kicker,[lang="ur"] .glance h2{letter-spacing:0;text-transform:none;font-size:.95rem}
.toc ol{list-style:none;margin:0;padding:0;border-inline-start:1px solid var(--line)}
.toc a{display:block;padding:.4rem .9rem;color:var(--ink-2);text-decoration:none;margin-inline-start:-1px;border-inline-start:2px solid transparent;line-height:1.35}
.toc a:hover,.toc a.on{color:var(--ink);border-inline-start-color:var(--brand)}
@media (max-width:900px){.art{grid-template-columns:minmax(0,1fr)}.toc{position:static}}
.prose .first::first-letter{font:400 3.6em/.8 var(--serif);float:left;margin:.08em .1em 0 0;color:var(--brand-2)}
[dir="rtl"] .prose .first::first-letter{float:none;font:inherit;margin:0;color:inherit}
.prose blockquote{margin:2rem 0}
.prose p.pull{font:400 clamp(1.6rem,1.2rem + 1.6vw,2.3rem)/1.25 var(--serif)}
[lang="ur"] .prose p.pull{font-family:var(--serif)}
.endnote{font-size:.9rem;color:var(--ink-2);border-top:1px solid var(--line);margin-top:3rem;padding-top:1.25rem}

/* sources */
.src-group{margin-bottom:3rem}
.src-group h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);margin-bottom:.4rem}
.claims{list-style:none;margin:0;padding:0}
.claim{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding:1.25rem 0;border-top:1px solid var(--line)}
.claim:target{background:var(--ochre-tint);outline:0;box-shadow:0 0 0 .6rem var(--ochre-tint)}
.claim .no{font:400 1.5rem/1.1 var(--serif);color:var(--brand)}
.claim .st{font-weight:600;margin:0 0 .6rem}
.claim blockquote{border-inline-start:3px solid var(--brand-soft);padding:.15rem 0 .15rem 1rem;color:var(--ink-2);font-size:.95rem;margin:0 0 .6rem}
[dir="rtl"] .claim blockquote{padding:.15rem 1rem .15rem 0}
.claim blockquote p{margin:0 0 .35rem}
.claim .by{font-size:.85rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center}
.claim .by a{color:var(--ink-2)}
.ver{display:inline-flex;align-items:center;gap:.3rem;color:var(--brand-2);font-weight:650}
.ver svg{width:14px;height:14px}
.src-list{list-style:none;padding:0;margin:0}
.src-list li{padding:.9rem 0;border-top:1px solid var(--line);font-size:.95rem}
.src-list code{font-size:.78rem;color:var(--ink-3);word-break:break-all}
.held li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem}
@media (max-width:700px){.held li{grid-template-columns:1fr;gap:.25rem}}
.orig{font-size:.8rem;color:var(--ink-3);margin-top:.25rem}

/* lecture */
.deck{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2rem;align-items:start;padding:2rem 0 3rem}
@media (max-width:1000px){.deck{grid-template-columns:minmax(0,1fr)}}
.stage-wrap{background:var(--ink);border-radius:var(--r-lg);padding:clamp(.5rem,1.5vw,1rem)}
.stage-wrap img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#fff;border-radius:4px}
.ctrl{display:flex;align-items:center;gap:.75rem;margin-top:.8rem;color:#E8EFED;flex-wrap:wrap}
.ctrl button{font:inherit;font-weight:650;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:var(--r);padding:.5rem .9rem;cursor:pointer;min-height:2.5rem}
.ctrl button:hover{background:rgba(255,255,255,.1)}
.ctrl button[disabled]{opacity:.35;cursor:default}
.ctrl .count{font-variant-numeric:tabular-nums;font-size:.92rem;margin-inline-start:auto}
.notes{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem}
.notes h2{font:700 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.notes h3{font:400 1.25rem/1.3 var(--serif);margin-bottom:.75rem}
.notes p{font-size:.95rem;color:var(--ink-2)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem;margin-top:2rem}
.thumbs button{border:2px solid transparent;padding:0;background:none;border-radius:4px;cursor:pointer;text-align:start;font:inherit;font-size:.78rem;color:var(--ink-2)}
.thumbs button img{border:1px solid var(--line);border-radius:3px;aspect-ratio:16/9;object-fit:cover;width:100%}
.thumbs button[aria-current="true"]{border-color:var(--brand)}
.thumbs button span{display:block;padding:.3rem .1rem}
.dl{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);color:#fff;text-decoration:none;font-weight:650;border-radius:var(--r);padding:.65rem 1rem;min-height:2.75rem}
.dl:hover{background:var(--brand-2);color:#fff}
.dl svg{width:18px;height:18px}
.dl.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand-soft)}
.dl.ghost:hover{background:var(--brand-tint);color:var(--brand-2)}
.dl small{font-weight:500;opacity:.8}

/* video */
.player{background:var(--ink);border-radius:var(--r-lg);overflow:hidden}
.player video{width:100%;aspect-ratio:16/9;background:#000}
.player video::cue{font-family:"Segoe UI",system-ui,sans-serif;font-size:1.05em;background:rgba(10,30,28,.82)}
[lang="ur"] .player video::cue{font-family:"PH Nastaliq","Noto Nastaliq Urdu",serif;line-height:1.9}
.vid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2rem;padding:2rem 0 3rem;align-items:start}
@media (max-width:1000px){.vid{grid-template-columns:minmax(0,1fr)}}
.transcript{max-height:32rem;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.25rem}
.transcript h2{font:700 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.transcript ol{list-style:none;margin:0;padding:0}
.transcript li{padding:.5rem 0;border-top:1px solid var(--line);font-size:.93rem;display:grid;grid-template-columns:3rem 1fr;gap:.5rem}
.transcript li.on{color:var(--brand-2);font-weight:600}
.transcript button{font:inherit;font-size:.8rem;color:var(--brand);background:none;border:0;padding:0;cursor:pointer;text-align:start;font-variant-numeric:tabular-nums;text-decoration:underline}

/* library */
.lib-head{padding:2rem 0 1.5rem}
.lib-head h1{font-size:clamp(2.1rem,1.5rem + 2.5vw,3.2rem);margin-bottom:.6rem}
.finder{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;margin:1.5rem 0 1rem}
.finder input{font:inherit;font-size:1.1rem;padding:.85rem 1rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);width:100%;color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filters button{font:inherit;font-size:.9rem;font-weight:600;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:.4rem .9rem;cursor:pointer;min-height:2.4rem}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.result-count{font-size:.9rem;color:var(--ink-3);margin:1rem 0 .5rem}
.entries{list-style:none;margin:0;padding:0}
.entry{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:1.5rem;padding:1.4rem 0;border-top:1px solid var(--line);align-items:start}
.entry h2{font-size:1.45rem;margin-bottom:.3rem}
.entry h2 a{color:var(--ink);text-decoration:none}
.entry h2 a:hover{color:var(--brand)}
.entry .grp{font:700 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:.35rem}
[lang="ur"] .entry .grp{letter-spacing:0;text-transform:none;font-size:.9rem}
.entry p{margin:0;color:var(--ink-2);font-size:.97rem}
.entry .go{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
.entry .go a{font-size:.85rem;font-weight:600;text-decoration:none;border:1px solid var(--line-2);border-radius:999px;padding:.3rem .7rem;color:var(--ink-2);background:var(--surface)}
.entry .go a:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:860px){.entry{grid-template-columns:1fr;gap:.6rem}.entry .go{justify-content:flex-start}}
.empty{padding:2.5rem 0;border-top:1px solid var(--line);color:var(--ink-2)}
.empty[hidden]{display:none}
/* the hidden attribute must win over component display rules (.entry is display:grid): library search hides entries this way */
[hidden]{display:none!important}
mark{background:var(--ochre-tint);color:inherit;padding:0 .1em;border-radius:2px}

/* home */
.hero{padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2.5rem,6vw,4rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(2.3rem,1.4rem + 3.1vw,3.7rem);margin-bottom:1.25rem}  /* 2026-11-01: tighter first screen on the live homepage; the three-questions card now sits beside the headline */
@media (min-width:981px){.hero-grid{align-items:start}.hero-grid>.feature{margin-top:2.6rem}}
.hero .dek{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);color:var(--ink-2);max-width:36rem}
.bigsearch{display:flex;gap:.5rem;margin-top:2rem;max-width:36rem}
.bigsearch input{flex:1;min-width:0;font:inherit;font-size:1.1rem;padding:.9rem 1.1rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.bigsearch button{font:inherit;font-weight:650;background:var(--brand);color:#fff;border:0;border-radius:var(--r);padding:0 1.4rem;cursor:pointer}
.bigsearch button:hover{background:var(--brand-2)}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.feature .kicker{margin-bottom:.5rem}
.feature h2{font-size:1.65rem;margin-bottom:.5rem}
.feature h2 a{color:var(--ink);text-decoration:none}
.feature p{color:var(--ink-2);font-size:.97rem}
.feature ol{list-style:none;margin:1rem 0 0;padding:0}
.feature li a{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.feature li a span{color:var(--ink-3);font-weight:500}
.feature li a:hover{color:var(--brand)}
.method{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
.method li{border-top:3px solid var(--ink);padding-top:1rem}
.method b{display:block;font:400 1.3rem/1.25 var(--serif);margin-bottom:.4rem}
.method p{color:var(--ink-2);margin:0;font-size:.97rem}
@media (max-width:800px){.method{grid-template-columns:1fr;gap:1.5rem}}
.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:0 2.5rem}
.groups section{border-top:1px solid var(--line);padding:1rem 0 1.5rem}
.groups h3{font:700 .74rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:.6rem}
[lang="ur"] .groups h3{letter-spacing:0;text-transform:none;font-size:.95rem}
.groups ul{list-style:none;margin:0;padding:0}
.groups li{padding:.3rem 0}
.groups li a{font:400 1.12rem/1.35 var(--serif);color:var(--ink);text-decoration:none}
.groups li a:hover{color:var(--brand);text-decoration:underline}

/* about */
.reg{width:100%;min-width:36rem}
.stat{display:inline-block;font-size:.78rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;white-space:nowrap}
.stat.built{background:var(--brand-tint);color:var(--brand-2)}
.stat.queued{background:var(--sunk);color:var(--ink-2)}
.stat.pending{background:var(--pending-tint);color:var(--pending)}

/* footer */
.foot{background:var(--ink);color:#C9D2CF;margin-top:0;padding:3rem 0 2.5rem;font-size:.92rem}
.foot .cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
@media (max-width:800px){.foot .cols{grid-template-columns:1fr;gap:1.5rem}}
.foot h2{font:700 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8FA39E;margin-bottom:.75rem}
[lang="ur"] .foot h2{letter-spacing:0;text-transform:none;font-size:.95rem}
.foot a{color:#fff}
.foot a[lang="ur"]{font-family:var(--urdu);font-size:1.1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:.2rem 0}
.foot .wm{font:400 1.4rem/1 var(--serif);color:#fff;margin-bottom:.75rem;display:block}
.foot .fine{border-top:1px solid #2E3B38;margin-top:2rem;padding-top:1.25rem;font-size:.82rem;color:#93A29E}

/* ---------- Urdu */
[lang="ur"] body,body[lang="ur"]{font-family:var(--urdu);font-size:1.12rem;line-height:2.15}
[lang="ur"] h1,[lang="ur"] h2,[lang="ur"] h3,[lang="ur"] .lead,[lang="ur"] .q,[lang="ur"] .dek,[lang="ur"] .pull,[lang="ur"] .glance dt,[lang="ur"] .flow h3,[lang="ur"] .stage h3,[lang="ur"] .steps h3,[lang="ur"] .chart .g,[lang="ur"] .explore b,[lang="ur"] .notes h3,[lang="ur"] .fig .ft,[lang="ur"] .entry h2,[lang="ur"] .groups li a,[lang="ur"] .method b{font-family:var(--urdu);font-style:normal;letter-spacing:0}
[lang="ur"] h1{line-height:1.75;font-weight:700}
[lang="ur"] .head h1,[lang="ur"] .art-head h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem)}
[lang="ur"] .hero h1{font-size:clamp(2rem,1.3rem + 3vw,3.4rem)}
[lang="ur"] h2,[lang="ur"] h3{line-height:1.8}
[lang="ur"] .sec-h h2{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem)}
[lang="ur"] .lead{line-height:2.2;font-size:clamp(1.15rem,1rem + .6vw,1.35rem)}
[lang="ur"] .prose p,[lang="ur"] .prose li{font-size:1.12rem;line-height:2.25}
[lang="ur"] .head .q{line-height:2}
[lang="ur"] .dek{line-height:2.1}
[lang="ur"] .chip{line-height:1.9;padding:.05rem .7rem}
[lang="ur"] .nav a,[lang="ur"] .journey a{font-weight:400;font-size:1rem}
[lang="ur"] .points li::before{top:1.9rem}
[lang="ur"] sup.c{font-family:var(--sans)}
[lang="ur"] .pull{line-height:1.9}
[lang="ur"] table{font-size:1rem}
[lang="ur"] td,[lang="ur"] th{line-height:2}
[lang="ur"] .glance dt{font-size:1.7rem;line-height:1.6}
.en-inline{font-family:var(--sans);direction:ltr;unicode-bidi:isolate}
bdi{font-family:var(--sans);font-size:.92em;white-space:nowrap}
bdi.w{white-space:normal}
[dir="rtl"] .flow li:not(:last-child)::after{background:repeating-linear-gradient(270deg,var(--brand-soft) 0 6px,transparent 6px 11px)}

@media print{.revcall,.strip,.mast,.journey,.foot,.ctrl,.thumbs{display:none}.sec{padding:1.25rem 0}body{background:#fff}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* clinic proposals (figures.proposals) */
.props{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.pr{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.25rem;background:var(--paper)}
.pr-h{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-start;justify-content:space-between}
.pr-h h3{font:650 1.05rem/1.45 var(--sans);margin:0;flex:1 1 18rem}
[lang=ur] .pr-h h3{font-family:var(--urdu);font-weight:700;line-height:2}
.pr-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.pr-v.pr-good{background:var(--brand-tint);color:var(--brand-2);border-color:var(--brand-soft)}
.pr-v.pr-caution{background:var(--pending-tint);color:var(--pending);border-color:#E7CF9E}
.pr-v.pr-flag{background:var(--flag-tint);color:var(--flag);border-color:#E9B8AF}
.pr dl{display:grid;grid-template-columns:minmax(8rem,12rem) minmax(0,1fr);gap:.6rem 1.25rem;margin:.9rem 0 0}
.pr dt{font-size:.78rem;font-weight:650;letter-spacing:.03em;color:var(--ink-3);text-transform:uppercase;padding-top:.15rem}
[lang=ur] .pr dt{text-transform:none;letter-spacing:0;font-size:.92rem}
.pr dd{margin:0;font-size:.97rem}
.props.compact .pr{padding:.85rem 1.05rem}
.props.compact .pr-ev{margin:.5rem 0 0;font-size:.95rem;color:var(--ink-2)}
@media (max-width:640px){.pr dl{grid-template-columns:1fr;gap:.15rem}.pr dt{margin-top:.55rem}}

/* articles (blog) index and the clinic-approach page — 2026-10-25 */
.blog-sec{margin:2.5rem 0 0}
.blog-sec>h2,.blog-sec>h3{margin-bottom:.4rem}
.posts{list-style:none;margin:0;padding:0}
.post{padding:1.3rem 0;border-top:1px solid var(--line)}
.post h3{margin:.25rem 0 .4rem}
.post .meta{margin:.5rem 0}
.post .go{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
.post .grp{font:700 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0}
[lang="ur"] .post .grp{letter-spacing:0;text-transform:none;font-size:.9rem}
.post .go a{font-size:.9rem;font-weight:600}

/* homepage: the three layers (2026-10-27) */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:900px){.offers{grid-template-columns:1fr}}
.offer{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.35rem 1.4rem;text-decoration:none;color:var(--ink)}
.offer:hover{border-color:var(--brand)}
.offer .kicker{display:block;margin-bottom:.5rem}
.offer b{display:block;font:400 1.35rem/1.25 var(--serif);margin-bottom:.5rem}
[lang="ur"] .offer b{font-family:var(--urdu);line-height:2}
.offer p{margin:0;color:var(--ink-2);font-size:.95rem}
.coll-topic{margin:1.5rem 0 0}.coll-topic h3{margin-bottom:.2rem}.coll-topic h3 a{color:var(--ink);text-decoration:none}.coll-topic h3 a:hover{text-decoration:underline}

/* per-condition comparison (2026-10-29) */
.care-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-bottom:2.5rem}
.care-col h3,.care-integ h3{font:650 1.05rem/1.35 var(--sans);margin:0 0 .5rem;color:var(--brand-2)}
.care-col .list-rule li{font-size:.98rem}
.lvl{display:inline-flex;align-items:center;font-size:.76rem;font-weight:700;letter-spacing:.02em;padding:.22rem .6rem;border-radius:999px;border:1px solid var(--line);white-space:nowrap;background:var(--sunk);color:var(--ink-2)}
.lvl-established{background:var(--brand-tint);border-color:var(--brand-soft);color:var(--brand-2)}
.lvl-emerging{background:var(--ochre-tint);border-color:#E7CF9E;color:var(--pending)}
.lvl-hypothesis{background:var(--sunk);border-color:var(--line);color:var(--ink-2)}
.lvl-not_supported{background:var(--flag-tint);border-color:#E9B8AF;color:var(--flag)}
.care-legend{margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.9rem;color:var(--ink-3)}
.care-list{list-style:none;margin:0;padding:0}
.care-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-top:1px solid var(--line);align-items:start}
.care-row:last-child{border-bottom:1px solid var(--line)}
.care-row p{margin:0}
.levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.levels li{border-top:3px solid var(--ink);padding-top:.9rem}.levels li .lvl{margin-bottom:.5rem}.levels p{margin:0;color:var(--ink-2);font-size:.95rem}
@media (max-width:900px){.care-grid,.levels{grid-template-columns:1fr}.care-row{grid-template-columns:1fr;gap:.4rem}}

/* reading journey on condition overviews (2026-10-31) */
.onpage{display:flex;align-items:center;gap:.6rem;margin:1.25rem 0 0;padding:.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.onpage-k{font:700 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;flex:none}
.onpage ol{list-style:none;margin:0;padding:0;display:flex;gap:.4rem;counter-reset:j}
.onpage li{flex:none;counter-increment:j}
.onpage a{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--ink-2);text-decoration:none;border:1px solid var(--line-2);border-radius:999px;padding:.3rem .7rem .3rem .45rem;background:var(--surface);white-space:nowrap}
.onpage a::before{content:counter(j);font:700 .7rem/1 var(--sans);color:#fff;background:var(--brand);border-radius:999px;width:1.15rem;height:1.15rem;display:grid;place-items:center}
.onpage a:hover,.onpage a:focus-visible{border-color:var(--brand);color:var(--ink)}
html[lang=ur] .onpage a{font-size:.95rem}

/* homepage section 4: six category cards (2026-11-01) */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.area{border-top:3px solid var(--ink);padding-top:1.1rem;min-width:0}
.area .kicker{margin-bottom:.45rem;color:var(--ink-3)}
.area h3{font:400 clamp(1.35rem,1.15rem + .6vw,1.65rem)/1.2 var(--serif);margin:0 0 .5rem}
.area h3 a{color:var(--ink);text-decoration:none}
.area h3 a:hover{color:var(--brand)}
.area-d{color:var(--ink-2);font-size:.95rem;margin:0 0 .9rem;line-height:1.5}
.area-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .25rem}
.area-list li{display:inline}
.area-list li:not(:last-child)::after{content:"·";color:var(--ink-3);margin:0 .35rem 0 .45rem}
.area-list a{font:400 1.02rem/1.5 var(--serif);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.area-list a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.area-n{margin:1rem 0 0;font-size:.92rem}
.area-n a,.area-all a{color:var(--brand);font-weight:650;text-decoration:none}
.area-n a:hover,.area-all a:hover{text-decoration:underline}
.area-all{margin:2rem 0 0;font-size:1rem}
[lang="ur"] .area h3,[lang="ur"] .area-list a{font-family:var(--urdu);line-height:1.9}
[lang="ur"] .area h3{font-size:clamp(1.25rem,1.05rem + .5vw,1.5rem)}
@media (max-width:980px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.areas{grid-template-columns:1fr;gap:1.5rem}.area{padding-top:.9rem}.area-list a{font-size:1rem}}