@import url("./design-tokens.css");

/*
 * Shared header bootstrap
 * -----------------------
 * This stylesheet provides the structural fallback used before js/v2-shell.js
 * upgrades the page. The shell palette itself is owned by design-tokens.css.
 * Do not create an independent dark/light header theme in this file.
 */
.wu-header-wrapper{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
.wu-site-header{position:relative;z-index:1000;width:100%;color:var(--wu-shell-header-text);background:var(--wu-shell-header-bg);border-bottom:1px solid var(--wu-shell-header-border);box-shadow:var(--wu-shell-header-shadow);font-family:var(--wu-font-ui)}
.wu-header-inner{display:flex;align-items:center;width:min(var(--wu-shell-width),calc(100% - 40px));min-height:60px;margin:0 auto;gap:20px}
.wu-brand{display:inline-flex;align-items:center;flex:none;gap:11px;color:var(--wu-shell-header-text)!important;text-decoration:none!important}.wu-brand:hover{color:var(--wu-shell-header-text)!important;text-decoration:none!important}
.wu-brand-mark{display:block;width:34px;height:34px;flex:none;padding:3px;border:1px solid var(--wu-shell-brand-border);border-radius:10px;background:var(--wu-color-surface);box-shadow:var(--wu-shadow-sm);object-fit:contain}
.wu-brand>span:last-child{display:grid;line-height:1.05}.wu-brand strong{color:var(--wu-shell-header-text);font-size:1rem;letter-spacing:-.025em}.wu-brand small{display:none;margin-top:6px;color:var(--wu-shell-header-muted);font:var(--wu-weight-regular) .7rem/1.2 var(--wu-font-urdu)}
.wu-primary-nav{display:flex;align-items:center;justify-content:flex-end;min-width:0;flex:1;gap:3px}.wu-primary-nav a,.wu-nav-more>summary{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid transparent;border-radius:var(--wu-radius-md);color:var(--wu-shell-nav-text)!important;background:transparent;font-size:.79rem;font-weight:var(--wu-weight-semibold);line-height:1;text-decoration:none!important;white-space:nowrap;transition:background-color var(--wu-transition-fast),color var(--wu-transition-fast),border-color var(--wu-transition-fast)}.wu-primary-nav a:hover,.wu-nav-more>summary:hover{border-color:var(--wu-shell-nav-hover-border);background:var(--wu-color-brand-softer);color:var(--wu-color-brand-strong)!important}.wu-primary-nav a.is-active,.wu-nav-more>summary.is-active{border-color:var(--wu-shell-nav-active-border);background:var(--wu-color-brand-soft);color:var(--wu-color-brand-strong)!important;box-shadow:none}.wu-nav-business{border-color:var(--wu-shell-business-border)!important}.wu-nav-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;color:currentColor;opacity:.86}.wu-nav-icon svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.wu-nav-more{position:relative}.wu-nav-more>summary{cursor:pointer;list-style:none}.wu-nav-more>summary::-webkit-details-marker{display:none}.wu-nav-more>summary span:last-child{font-size:.9rem;line-height:1;opacity:.72}.wu-nav-more-menu{position:absolute;z-index:20;top:calc(100% + 8px);right:0;display:none;min-width:245px;padding:8px;border:1px solid var(--wu-shell-header-border);border-radius:var(--wu-radius-lg);color:var(--wu-shell-header-text);background:var(--wu-shell-menu-bg);box-shadow:var(--wu-shadow-float)}.wu-nav-more[open] .wu-nav-more-menu{display:grid;gap:2px}.wu-nav-more-menu a{display:flex;align-items:center;gap:9px;padding:11px 12px;color:var(--wu-shell-nav-menu-text)!important}.wu-nav-more-menu a:hover,.wu-nav-more-menu a.is-active{color:var(--wu-color-brand-strong)!important;background:var(--wu-color-brand-softer)}.wu-nav-more>summary:focus-visible,.wu-nav-more-menu a:focus-visible{outline:3px solid var(--wu-shell-focus-ring);outline-offset:2px}
.wu-language-toggle,.wu-install-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:4px;border:1px solid var(--wu-color-border-strong);border-radius:var(--wu-radius-md);color:var(--wu-shell-control-text);background:var(--wu-color-surface);font-weight:var(--wu-weight-semibold);cursor:pointer;white-space:nowrap}.wu-language-toggle{gap:6px;padding:9px 11px;font-size:.79rem;line-height:1}.wu-install-toggle{padding:9px 10px;font-size:.76rem;line-height:1}.wu-install-toggle[hidden]{display:none!important}.wu-language-toggle>span:first-child{font-size:.9rem;line-height:1}.wu-language-toggle:hover,.wu-language-toggle:focus-visible,.wu-install-toggle:hover,.wu-install-toggle:focus-visible{border-color:var(--wu-shell-control-hover-border);color:var(--wu-color-brand-strong);background:var(--wu-color-brand-softer);outline:none}.wu-language-toggle:focus-visible,.wu-install-toggle:focus-visible{box-shadow:0 0 0 3px var(--wu-shell-focus-ring)}
.wu-header-ad{width:min(1120px,calc(100% - 32px));margin:12px auto 0;overflow:visible;text-align:center}.wu-header-ad .adsbygoogle{display:block!important;width:100%;max-width:1120px!important;margin:0 auto}.wu-header-ad::before{display:block;margin-bottom:4px;color:var(--wu-color-muted);font-size:.62rem;letter-spacing:.08em;line-height:1;text-transform:uppercase;content:"Advertisement"}
.wu-menu-toggle{display:none;align-items:center;gap:9px;margin-left:auto;padding:9px 11px;border:1px solid var(--wu-color-border-strong);border-radius:var(--wu-radius-md);color:var(--wu-shell-control-text);background:var(--wu-color-surface);font:var(--wu-weight-semibold) .8rem/1 var(--wu-font-ui)}.wu-menu-icon,.wu-menu-icon:before,.wu-menu-icon:after{display:block;width:17px;height:2px;border-radius:2px;background:currentColor;content:""}.wu-menu-icon{position:relative}.wu-menu-icon:before{position:absolute;top:-5px}.wu-menu-icon:after{position:absolute;top:5px}
.wu-nav-icon{transition:color var(--wu-transition-fast),transform var(--wu-transition-fast)}.wu-primary-nav a:hover .wu-nav-icon,.wu-nav-more>summary:hover .wu-nav-icon{color:var(--wu-color-brand-strong);transform:translateY(-1px)}

/* The full tools navigation can outgrow a laptop-width header. */
@media(max-width:1280px){.wu-header-inner{position:relative;width:min(var(--wu-shell-width),calc(100% - 32px))}.wu-menu-toggle{display:inline-flex}.wu-primary-nav{position:absolute;top:calc(100% + 8px);right:0;left:0;display:none;align-items:stretch;padding:10px;border:1px solid var(--wu-shell-header-border);border-radius:var(--wu-radius-lg);background:var(--wu-shell-menu-bg);box-shadow:var(--wu-shadow-float)}.wu-primary-nav.is-open{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.wu-primary-nav a,.wu-nav-more>summary{padding:13px}.wu-nav-more{grid-column:1/-1}.wu-nav-more-menu{position:static;width:auto;min-width:0;margin-top:5px;border-color:var(--wu-shell-header-border);background:var(--wu-color-surface-soft);box-shadow:none;grid-template-columns:1fr 1fr}.wu-primary-nav .wu-feedback-link,.wu-primary-nav .wu-language-toggle{margin:3px 0 0;grid-column:1/-1;text-align:center}.wu-primary-nav .wu-language-toggle{width:100%}}
@media(max-width:520px){.wu-header-inner{width:calc(100% - 24px);min-height:56px}.wu-brand-mark{width:32px;height:32px}.wu-primary-nav.is-open{grid-template-columns:1fr}.wu-nav-more-menu{grid-template-columns:1fr}.wu-primary-nav .wu-feedback-link{grid-column:auto}.wu-menu-label{display:none}.wu-header-inner>.wu-language-toggle{margin-left:0;padding:8px 9px;font-size:.74rem}.wu-header-inner>.wu-language-toggle>span:first-child{display:none}.wu-header-inner>.wu-install-toggle{margin-left:0;padding:8px;font-size:.7rem}.wu-header-ad{width:calc(100% - 24px);margin-top:9px}.wu-header-ad::before{font-size:.58rem}}
@media(prefers-reduced-motion:reduce){.wu-primary-nav a,.wu-nav-icon{transition:none}}

/* Urdu mode is opt-in and keeps the editor's own RTL fields untouched while
   giving the shared shell and reading pages a comfortable Urdu typeface. */
html[dir="rtl"] body{font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu","Segoe UI",Arial,sans-serif}
html[dir="rtl"] body h1,html[dir="rtl"] body h2,html[dir="rtl"] body h3,html[dir="rtl"] body h4,html[dir="rtl"] body h5,html[dir="rtl"] body h6{font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu","Segoe UI",Arial,sans-serif;letter-spacing:0}
html[dir="rtl"] .wu-header-inner,html[dir="rtl"] .wu-primary-nav{direction:rtl}
html[dir="rtl"] .wu-brand{direction:rtl}
html[dir="rtl"] .wu-footer-links{text-align:right}
html[dir="rtl"] .wu-primary-nav .wu-feedback-link,html[dir="rtl"] .wu-language-toggle{margin-left:0;margin-right:4px}

/* The trust bar is a structural fallback. V3 hides it once the shell upgrades. */
.wu-header-trustbar{border-top:1px solid var(--wu-shell-header-border);background:var(--wu-color-surface-soft)}
.wu-header-trustbar-inner{display:flex;align-items:center;gap:16px;width:min(var(--wu-shell-width),calc(100% - 40px));min-height:26px;margin:0 auto;color:var(--wu-shell-header-muted);font-size:.69rem;line-height:1.3}
.wu-header-trust-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.wu-header-trust-icon{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border:1px solid var(--wu-shell-control-hover-border);border-radius:50%;color:var(--wu-color-brand-strong);font-size:.65rem;font-weight:var(--wu-weight-bold);line-height:1}.wu-header-privacy{margin-left:auto;color:var(--wu-color-muted);font-size:.68rem;white-space:nowrap}
html[dir="rtl"] .wu-header-trustbar{text-align:right}html[dir="rtl"] .wu-header-trustbar-inner{direction:rtl}html[dir="rtl"] .wu-header-privacy{margin-right:auto;margin-left:0}
@media(max-width:900px){.wu-header-privacy{display:none}}
@media(max-width:520px){.wu-header-trustbar-inner{justify-content:center;flex-wrap:wrap;gap:5px 13px;width:calc(100% - 24px);min-height:27px;padding:5px 0;font-size:.67rem}.wu-header-trust-icon{width:16px;height:16px}}

/* Shared editorial typography for guides, reference pages and legal copy. */
:root{--wu-text:#263a30;--wu-muted:#607269;--wu-heading:#12271d;--wu-link:#126b40;--wu-line:#dce6e0;--wu-soft:#f4f8f5}
html,body{max-width:100%;overflow-x:clip}
body{color:var(--wu-text);font-family:Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.65;text-rendering:optimizeLegibility}
body h1,body h2,body h3,body h4,body h5,body h6{color:var(--wu-heading);font-family:Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:750;line-height:1.22;letter-spacing:-.025em}
body h1{font-size:clamp(1.9rem,4vw,2.75rem)}body h2{font-size:clamp(1.45rem,2.8vw,2rem)}body h3{font-size:clamp(1.2rem,2.2vw,1.55rem)}body h4{font-size:1.16rem}
body p,body li{color:var(--wu-text);font-size:1rem;line-height:1.72}body a{color:var(--wu-link)}body a:hover{color:#0a4b2b}
body .page-intro{max-width:74ch;margin:0 0 1.5rem;color:#40564a;font-size:1.08rem;line-height:1.75}
body .content-article,body .legal-copy{max-width:860px;margin-inline:auto}body .content-article h2,body .legal-copy h2,body .legal-copy h3{margin-top:2.15rem;margin-bottom:.65rem}body .content-article h3{margin-top:1.6rem}
body .content-article p,body .content-article li,body .legal-copy p,body .legal-copy li{max-width:76ch}body .content-article ol,body .content-article ul,body .legal-copy ol,body .legal-copy ul{padding-left:1.4rem}
body .content-article img{display:block;max-width:100%;height:auto;margin:1rem 0 1.5rem;border:1px solid var(--wu-line);border-radius:12px;box-shadow:0 10px 28px rgba(18,39,29,.08)}
body .compact-list{display:flex;flex-wrap:wrap;gap:8px;padding:0!important;list-style:none}body .compact-list li{padding:5px 10px;border:1px solid var(--wu-line);border-radius:999px;background:var(--wu-soft);font-size:.9rem}
body .steps{max-width:76ch;color:var(--wu-text);font-size:1rem;line-height:1.72}body ul.steps{padding-left:1.35rem}body ul.steps li{margin-bottom:.55rem}
body .card-title{color:var(--wu-heading);font-weight:750}body .card-text{color:var(--wu-text)}body mark.sm{color:var(--wu-link);background:transparent;font-weight:650}
body table{max-width:900px;width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--wu-line);border-radius:12px;background:#fff}body th{padding:12px 14px;color:var(--wu-heading);background:var(--wu-soft);font-size:.86rem;text-align:left}body td{padding:11px 14px;border-top:1px solid var(--wu-line);color:var(--wu-text)}body td:first-child{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;font-size:1.5rem;line-height:1.8;text-align:right}
body [lang="ur"],body [dir="rtl"]{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;line-height:2}
body footer{position:static!important;width:100%!important;box-sizing:border-box;font-size:.92rem}body footer,body footer span{color:rgba(255,255,255,.68)}body footer a{color:rgba(255,255,255,.9)!important}
body img,body iframe,body video,body canvas,body ins.adsbygoogle{max-width:100%!important}body .container-fluid,body .container,body .row{max-width:100%}body.content-page .row{margin-right:0!important;margin-left:0!important}
body .cse-branding-bottom,body .cse-branding-form,body .cse-branding-form form,body #cse-search-results{max-width:100%!important}body .cse-branding-form input[type="text"]{max-width:calc(100vw - 130px)}
body.content-page .twitter-follow-button,body.content-page .fb-like{display:none!important}body.content-page .logo{display:none!important}
body.content-page .col-12.col-md-9>hr.solid{margin-top:8px}
/* Keep every page-level heading on the same visual scale. The editor pages
   use several legacy stylesheets, so the shared class intentionally wins. */
body h1.wu-page-title{margin:0 0 8px!important;color:var(--wu-heading)!important;font-size:clamp(1.8rem,3vw,2.5rem)!important;font-weight:780!important;line-height:1.08!important;letter-spacing:-.045em!important}
body h4.wu-page-subtitle{margin:0!important;color:var(--wu-link)!important;background:transparent!important;font-size:1rem!important;font-weight:650!important;line-height:1.5!important}
body p.wu-page-subtitle{max-width:74ch;margin:0 0 1.5rem!important;color:#40564a!important;font-size:1.05rem!important;line-height:1.75!important}
body footer{padding:28px max(18px,calc((100vw - 1120px)/2)) 0!important;background:#10281c!important;text-align:left}body .wu-footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;max-width:1120px;margin:0 auto}body .wu-footer-links a{font-size:.88rem;text-decoration:none}body .wu-footer-links a:hover{text-decoration:underline}body .wu-footer-note{max-width:1120px;margin:22px auto 0;padding:16px 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.58);font-size:.8rem}
/* Keep the rich editor centered even when Bootstrap or legacy main.css is
   loaded in a different order. */
body.rich-editor-page>.container-fluid>.row:nth-of-type(2){display:grid!important;grid-template-columns:minmax(0,1fr);width:min(1120px,calc(100% - 32px))!important;margin:0 auto!important;padding:48px 0 72px}
body.rich-editor-page>.container-fluid>.row:nth-of-type(2)>.col-6{display:none!important}
body.rich-editor-page>.container-fluid>.row:nth-of-type(2)>.col-12{width:100%!important;max-width:none!important;float:none!important;padding:0!important}
/* The alphabet guide uses legacy Bootstrap column markup in its source. Keep
   that page in normal flow so the shared footer cannot overlap its content. */
body.alphabet-page{margin:0!important;padding:0!important;background:#fff}
body.alphabet-page>.container-fluid{display:block;width:100%;max-width:none!important;margin:0;padding:0}
body.alphabet-page .alphabet-main{display:block;float:none!important;width:100%!important;max-width:none!important;margin:0!important;padding:0 24px 64px;box-sizing:border-box}
body.alphabet-page .alphabet-intro{width:min(1120px,100%);margin:0 auto;padding:40px 0 0}
body.alphabet-page .alphabet-intro .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:24px;margin:0}
body.alphabet-page .alphabet-intro .col-sm{min-width:0;padding:0!important}
body.alphabet-page .alphabet-intro h1{margin-top:0}
body.alphabet-page .alphabet-main>.adsbygoogle{display:block;width:min(1120px,100%);margin:20px auto 0}
body.alphabet-page .alphabet-main>hr.solid{width:min(1120px,100%);margin:24px auto}
body.alphabet-page .alphabet-content{width:100%;max-width:860px;margin:0 auto}
body.alphabet-page .alphabet-content h2{margin-top:0}
body.alphabet-page .alphabet-table{margin-top:24px}
body.alphabet-page .alphabet-table caption{padding:0 14px 10px;color:var(--wu-muted);font-size:.88rem;text-align:left;caption-side:top}
body.alphabet-page .alphabet-table th:first-child{width:38%}
body.alphabet-page .alphabet-table td:first-child{text-align:center}
body.alphabet-page footer{clear:both}
@media(max-width:767px){body{font-size:15px}body p,body li{font-size:.96rem}body .page-intro{font-size:1rem}body .content-article,body .legal-copy{width:100%}body table{font-size:.92rem}body th,body td{padding:9px 10px}}
@media(max-width:767px){body.alphabet-page .alphabet-main{padding:0 16px 48px}body.alphabet-page .alphabet-intro{padding-top:28px}body.alphabet-page .alphabet-intro .row{grid-template-columns:1fr;gap:14px}body.alphabet-page .alphabet-content p.lead{font-size:.98rem}body.alphabet-page .alphabet-table{margin-top:20px}body.alphabet-page .alphabet-table caption{padding-right:10px;padding-left:10px}}

/* Shared footer: a calm, useful end point rather than a single crowded link row. */
body footer.wu-footer{position:relative!important;isolation:isolate;overflow:hidden;width:100%!important;margin-top:clamp(32px,6vw,80px);padding:0!important;border-top:1px solid rgba(216,243,106,.12);color:#dbeae0;background:linear-gradient(135deg,#09291b 0%,#0d3523 54%,#082217 100%)!important;text-align:left}
body footer.wu-footer .wu-footer-glow{position:absolute;z-index:0;top:-180px;right:8%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(104,191,123,.2),transparent 68%);pointer-events:none}
body footer.wu-footer .wu-footer-inner{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin:0 auto;padding:54px 0 22px}
body footer.wu-footer .wu-footer-main{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2.15fr);gap:64px;align-items:start}
body footer.wu-footer .wu-footer-brand-column{max-width:300px}
body footer.wu-footer .wu-footer-brand{display:inline-flex;align-items:center;gap:12px;color:#fff!important;font-size:1.2rem;font-weight:760;letter-spacing:-.025em;text-decoration:none!important}
body footer.wu-footer .wu-footer-brand img{width:44px;height:44px;padding:3px;border:1px solid rgba(255,255,255,.22);border-radius:13px;background:#fff;box-shadow:0 7px 20px rgba(0,0,0,.18);object-fit:contain}
body footer.wu-footer .wu-footer-eyebrow{margin:21px 0 8px;color:#d8f36a;font-size:.68rem;font-weight:800;letter-spacing:.14em;line-height:1.3;text-transform:uppercase}
body footer.wu-footer .wu-footer-description{max-width:28ch;margin:0;color:rgba(231,244,235,.72);font-size:.91rem;line-height:1.7}
body footer.wu-footer .wu-footer-trust{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:22px;color:rgba(231,244,235,.62);font-size:.72rem;line-height:1.45}
body footer.wu-footer .wu-footer-trust>span{display:inline-flex;align-items:center;gap:6px}
body footer.wu-footer .wu-footer-trust-icon{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border:1px solid rgba(216,243,106,.48);border-radius:50%;color:#d8f36a;font-size:.66rem;font-weight:800}
body footer.wu-footer .wu-footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 34px;margin:0!important}
body footer.wu-footer .wu-footer-group{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
body footer.wu-footer .wu-footer-group h2{margin:0 0 7px;color:#f1f9f3;font-size:.74rem;font-weight:800;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}
body footer.wu-footer .wu-footer-group a{display:inline-block;padding:1px 0;color:rgba(231,244,235,.68)!important;font-size:.84rem;line-height:1.45;text-decoration:none!important;transition:color .16s ease,transform .16s ease}
body footer.wu-footer .wu-footer-group a:hover,body footer.wu-footer .wu-footer-group a:focus-visible{color:#fff!important;transform:translateX(2px);outline:none}
body footer.wu-footer .wu-footer-privacy{display:flex;align-items:center;gap:8px;margin-top:48px;padding:13px 16px;border:1px solid rgba(216,243,106,.16);border-radius:10px;color:rgba(231,244,235,.67);background:rgba(255,255,255,.035);font-size:.78rem;line-height:1.5}
body footer.wu-footer .wu-footer-privacy:before{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border-radius:50%;color:#09291b;background:#d8f36a;content:'✓';font-size:.72rem;font-weight:800}
body footer.wu-footer .wu-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding-top:17px;border-top:1px solid rgba(255,255,255,.11)}
body footer.wu-footer .wu-footer-note{max-width:none;margin:0;padding:0;border:0;color:rgba(231,244,235,.56);font-size:.76rem;line-height:1.5}
body footer.wu-footer .wu-footer-made{color:rgba(231,244,235,.48);font-size:.72rem;line-height:1.5}
html[dir="rtl"] body footer.wu-footer{text-align:right}
html[dir="rtl"] body footer.wu-footer .wu-footer-main{direction:rtl}
html[dir="rtl"] body footer.wu-footer .wu-footer-brand{direction:rtl}
html[dir="rtl"] body footer.wu-footer .wu-footer-group{align-items:flex-start}
html[dir="rtl"] body footer.wu-footer .wu-footer-group a:hover,html[dir="rtl"] body footer.wu-footer .wu-footer-group a:focus-visible{transform:translateX(-2px)}
html[dir="rtl"] body footer.wu-footer .wu-footer-privacy{direction:rtl}
html[dir="rtl"] body footer.wu-footer .wu-footer-bottom{direction:rtl}
@media(max-width:900px){body footer.wu-footer .wu-footer-main{grid-template-columns:1fr;gap:38px}body footer.wu-footer .wu-footer-brand-column{max-width:480px}body footer.wu-footer .wu-footer-description{max-width:48ch}}
@media(max-width:620px){body footer.wu-footer{margin-top:40px}body footer.wu-footer .wu-footer-inner{width:calc(100% - 32px);padding:40px 0 18px}body footer.wu-footer .wu-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}body footer.wu-footer .wu-footer-group h2{font-size:.7rem}body footer.wu-footer .wu-footer-group a{font-size:.81rem}body footer.wu-footer .wu-footer-privacy{align-items:flex-start;margin-top:36px;font-size:.76rem}body footer.wu-footer .wu-footer-bottom{align-items:flex-start;flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){body footer.wu-footer .wu-footer-group a{transition:none}}

/* Search-friendly supporting content below interactive tools. */
.seo-content {
    max-width: 1120px;
    margin: 3rem auto 4rem;
    padding: 2rem clamp(1.1rem, 3vw, 2.5rem);
    color: var(--wu-text, #16251f);
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(22, 72, 52, .14);
    border-radius: 1.25rem;
    box-shadow: 0 12px 36px rgba(22, 72, 52, .06);
}
.seo-breadcrumbs { width: min(1120px, calc(100% - 32px)); margin: 1rem auto 0; color: #607269; font-size: .88rem; }
.seo-breadcrumbs a { color: #126b40; font-weight: 650; text-decoration: none; }
.seo-breadcrumbs span { margin: 0 .45rem; }
.seo-content h2 { margin: 0 0 .65rem; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.seo-content h3 { margin: 1.2rem 0 .4rem; font-size: 1.1rem; }
.seo-content p { max-width: 78ch; line-height: 1.7; margin: .35rem 0 .9rem; }
.seo-content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.seo-content-grid article { padding: 1rem; border: 1px solid rgba(22, 72, 52, .12); border-radius: .9rem; background: #f7fbf8; }
.seo-content-grid article h3 { margin-top: 0; }
.seo-content details { margin: .55rem 0; padding: .75rem 1rem; border: 1px solid rgba(22, 72, 52, .14); border-radius: .65rem; background: #fff; }
.seo-content summary { cursor: pointer; font-weight: 700; }
.related-resources ul { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; padding-left: 1.2rem; }
.related-resources a { color: #0f7049; font-weight: 600; }
.guide-meta { color: var(--wu-muted, #607269); font-size: .88rem; }
.guide-example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 1.5rem; }
.guide-example-grid article { padding: 1rem; border: 1px solid rgba(22,72,52,.12); border-radius: .9rem; background: #f7fbf8; }
.guide-example-grid article h3 { margin-top: 0; }
.font-sample { margin: 1rem 0; padding: 1rem 1.25rem; border-left: 4px solid #16824d; border-radius: .6rem; background: #f5faf6; color: #123426; font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 2; text-align: right; }
.font-sample-naskh { font-family: "Noto Naskh Arabic", "Noto Nastaliq Urdu", serif; line-height: 1.8; }
@media (max-width: 700px) { .seo-content { margin-top: 2rem; padding: 1.25rem; } .seo-content-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .guide-example-grid { grid-template-columns: 1fr; } }