/* Reading first: a narrow Arabic column with a quiet contents rail. The cost ledger is the only thing allowed to run wide. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;padding-top:clamp(20px,3vw,36px);font-size:.875rem;color:var(--ds-text-3)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ds-text-2);text-decoration:none}.crumbs a:hover{color:var(--ds-accent)}
.phead{max-width:880px;padding-block:clamp(16px,3vw,32px) clamp(28px,4vw,48px)}
.phead>*{animation:rise var(--ds-dur-4) var(--ds-ease-out) both}
.phead .kicker{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;font-weight:600;color:var(--ds-accent);text-decoration:none}
.phead h1{font-size:clamp(1.9rem,1.4rem + 2.6vw,3.5rem)}
.pm{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:16px;font-size:.9375rem;color:var(--ds-text-3)}
.note-top{margin-top:18px;background-color:var(--ds-surface-2);border-radius:var(--ds-radius-sm);padding:12px 16px;font-size:.9375rem;color:var(--ds-text-2);line-height:1.7;max-width:62ch}
.note-top b{color:var(--ds-text);font-weight:600}
.pgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,6vw,88px);border-top:1px solid var(--ds-border);padding-top:clamp(28px,4vw,56px)}
.ptoc{position:sticky;top:104px;align-self:start;display:grid;font-size:.9375rem;max-height:calc(100vh - 120px);overflow:auto}
.ptoc b{font-size:.875rem;font-weight:600;color:var(--ds-text-3);margin-bottom:6px}
.ptoc a{display:flex;align-items:center;min-height:44px;padding-block:6px;line-height:1.5;color:var(--ds-text-2);text-decoration:none;border-inline-start:1.5px solid var(--ds-border);padding-inline-start:14px;transition:color var(--ds-dur-1) ease-out,border-color var(--ds-dur-1) ease-out}
.ptoc a:hover{color:var(--ds-accent);border-inline-start-color:var(--ds-accent)}
.body{min-width:0;direction:rtl;text-align:right}
.body>p,.body>ul{max-width:64ch;font-size:1.125rem;line-height:2;color:var(--ds-text-2)}
.body>p+p{margin-top:16px}
.body h2{font-size:clamp(1.4rem,1.2rem + 1vw,2rem);margin-block:clamp(40px,5vw,64px) 16px;scroll-margin-top:100px;line-height:1.4}
.body .standfirst{font:400 clamp(1.25rem,1.1rem + .7vw,1.625rem)/1.75 var(--ds-font-display);color:var(--ds-text);max-width:34em}
.body ul{margin:14px 0;padding-inline-start:22px;display:grid;gap:6px}
.body li::marker{color:var(--ds-accent)}
.eq{background-color:var(--ds-accent-wash);border-radius:var(--ds-radius-sm);padding:18px 22px;color:var(--ds-text)!important;font-weight:500;margin-block:16px}
.ledger{margin:18px 0 22px;border:1px solid var(--ds-border);border-radius:var(--ds-radius);overflow:hidden}
.split-bar{display:flex;height:12px;gap:2px;padding:0}
.split-bar i{background-color:var(--ds-chart-2);display:block}.split-bar b{background-color:var(--ds-accent);display:block}
.ledger .tbl{font-size:.9375rem;min-width:520px;text-align:right}
.ledger .tbl th{text-align:right}
.ledger .tbl th,.ledger .tbl td{padding:12px 16px}
.ledger .c{font-weight:600;white-space:nowrap}
.ledger .sum td{font-weight:600;background-color:var(--ds-surface-2)}
.ledger .net td{font-weight:700;background-color:var(--ds-accent-wash);color:var(--ds-accent)}
.leak{display:grid;margin-block:14px;max-width:72ch}
.leak>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding-block:18px;border-top:1px solid var(--ds-border)}
.leak .n{font:600 1.75rem/1.2 var(--ds-font-display);color:var(--ds-accent)}
.leak p{font-size:1.0625rem;line-height:1.9;color:var(--ds-text-2)}.leak b{color:var(--ds-text);font-weight:600}
.pull{font:500 clamp(1.4rem,1.2rem + 1vw,2rem)/1.5 var(--ds-font-display)!important;color:var(--ds-text)!important;margin-block:24px!important}
.tip{display:grid;gap:8px;background-color:var(--ds-surface-2);border-radius:var(--ds-radius);padding:22px 24px;margin-block:26px;max-width:64ch}
.tip small{font-size:.875rem;font-weight:600;color:var(--ds-accent)}
.tip p{color:var(--ds-text);line-height:1.8}.tip .btn{justify-self:start;margin-top:6px}
.after{margin-top:clamp(36px,5vw,56px)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags a{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;border-radius:var(--ds-radius-md);background-color:var(--ds-surface-2);color:var(--ds-text-2);text-decoration:none;font-size:.875rem}
.tags a:hover{color:var(--ds-accent)}
.share{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-block:1px solid var(--ds-border);padding-block:14px;margin-top:24px}
.share div{display:flex;flex-wrap:wrap;gap:8px}
.share a{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;border:1px solid var(--ds-border-strong);border-radius:var(--ds-radius-md);color:var(--ds-text);text-decoration:none;font-size:.875rem;font-weight:500}
.nextp{display:grid;gap:4px;padding-block:24px;color:inherit;text-decoration:none}
.nextp small{color:var(--ds-text-3);font-size:.875rem}
.nextp b{font:500 clamp(1.125rem,1rem + .6vw,1.5rem)/1.45 var(--ds-font-display);transition:color var(--ds-dur-1) ease-out}
.nextp:hover{color:inherit}.nextp:hover b{color:var(--ds-accent)}
.final{margin-top:clamp(28px,4vw,48px)}
@supports (animation-timeline:view()){.leak>div,.ledger,.tip{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 26%}}
@media (max-width:1020px){.pgrid{grid-template-columns:minmax(0,1fr)}.ptoc{position:static;max-height:none;border-bottom:1px solid var(--ds-border);padding-bottom:14px}.ptoc a{border:0;padding-inline-start:0}}
@media (max-width:560px){.body>p,.body>ul{font-size:1.0625rem;line-height:1.95}.tip .btn{justify-self:stretch}}
/* Arabic headlines on the English page must not inherit the tight Latin leading and tracking, which breaks letter joining */
.pg h1[lang="ar"],.pg h2[lang="ar"],.pg h3[lang="ar"],.pg .body[lang="ar"] h2{line-height:1.4;letter-spacing:0}