/* ============================================================
   Azwaj shared theme ("Two Squares, One Seal", v2)

   One stylesheet for every page. The block between the two
   @critical markers is ALSO inlined in the <head> of every page, so
   the first screen paints without waiting for this file. That copy is
   never kept by hand: pages carry an empty <style data-critical> slot
   and services/criticalCss.js fills it from this file when site.js
   builds the page (tests/check-theme.js pins it). The prototype and
   the offline 3D render tools live outside the repo, in
   AZWAJ_Site_Redesign/proto-final.

   Motion rules, in one place:
   1. Everything that moves sits inside
      @media (prefers-reduced-motion: no-preference). Under "reduce"
      the page shows the settled, static frame.
   2. Only transform and opacity animate (three listed line drawings
      aside: the hero squares, the Trust check, the Privacy tick).
   3. Nothing loops. Build once, then stillness.
   4. Only opacity and transform start states are gated on
      html.js-motion, which /site/motion.js adds after it has marked
      everything already on screen. No layout property ever waits for
      JavaScript, so a late script never moves the page.
   Reading measure: --measure is 36em (about 70 characters of Plus
   Jakarta Sans), not 66ch. A ch is the width of the digit 0, and this
   face has very wide digits: 66ch came out near 95 characters a line,
   and it also changed width when the web font replaced the fallback.
   ============================================================ */

/* @critical-start */
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;src:url(/site/fonts/pjs-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;src:url(/site/fonts/pjs-700.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url(/site/fonts/pjs-800.woff2) format('woff2')}
@font-face{font-family:'PJS Fallback';font-weight:400;src:local('Arial'),local('Roboto');size-adjust:103.7%;ascent-override:100.1%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:'PJS Fallback';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold');size-adjust:99.2%;ascent-override:104.6%;descent-override:22.4%;line-gap-override:0%}
@font-face{font-family:'PJS Fallback';font-weight:800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold');size-adjust:101.3%;ascent-override:102.5%;descent-override:21.9%;line-gap-override:0%}
:root{
  --maroon:#7A1E3C;--maroon-deep:#5C142C;--maroon-ink:#3F0D1E;
  --rose:#D89A6A;--rose-ink:#95532E;--rose-soft:#F3E0D2;--rose-pale:#FBF1E9;
  --cream:#FAF6F3;--cream-deep:#F1E7DF;--paper:#FFFDFB;
  --ink:#2B0F1A;--ink-body:#4F3F3A;--ink-soft:#736560;--border:#EADFD8;
  --on-dark:#F6E9E2;--on-dark-soft:#E6D2C8;
  --shadow:0 24px 60px -22px rgba(63,13,30,.30);
  --shadow-sm:0 10px 28px -14px rgba(63,13,30,.32);
  --r-card:20px;--r-sm:12px;--r-pill:999px;
  --head-h:68px;--container:1160px;--gutter:16px;--measure:36em;
  --pad-top:40px;--pad-bot:clamp(64px,9vw,112px);
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-settle:cubic-bezier(.34,1.3,.5,1);
  --font-sans:'Plus Jakarta Sans',sans-serif;
  --serif:Georgia,'Noto Serif',serif;
  --star4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C12.9 8.6 15.4 11.1 22.5 12 15.4 12.9 12.9 15.4 12 22.5 11.1 15.4 8.6 12.9 1.5 12 8.6 11.1 11.1 8.6 12 1.5z'/%3E%3C/svg%3E");
}
@media (min-width:600px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{color-scheme:light;scroll-padding-top:calc(var(--head-h) + 16px)}
body{font-family:var(--font-sans);background:var(--cream);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
b,strong{font-weight:700}
::selection{background:var(--rose-soft);color:var(--maroon-ink)}
/* No border-radius here (phase 3 review): theme.css links after each page's
   own <style>, so a radius on this rule squared off pill buttons and round
   avatars on focus. The outline follows the element's own radius. */
:focus-visible{outline:3px solid var(--maroon);outline-offset:3px}
/* The hidden attribute always wins over a component's display (an
   inline-flex button with hidden set was still showing, and dead). */
[hidden]{display:none!important}
.on-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--cream)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:12px;top:-80px;z-index:200;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--cream);color:var(--maroon);font-weight:700;font-size:15px;box-shadow:var(--shadow-sm)}
.skip:focus{top:12px}
.sr,.sf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.brand{display:flex;align-items:center;gap:11px;min-height:44px;min-width:0}
.brand svg{width:36px;height:36px;border-radius:10px;background:var(--maroon);padding:3px;flex:none}
.brand .bt{display:block;min-width:0}
.brand .nm{display:block;font-weight:800;font-size:20px;letter-spacing:.2px;color:var(--maroon);line-height:1}
.brand .tg{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--rose-ink);text-transform:uppercase;margin-top:4px;line-height:1.2}

.site-head{position:relative;z-index:60;background:var(--cream);border-bottom:1px solid var(--border)}
nav.site-head{position:sticky;top:0}
.site-head .nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--head-h)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:700;color:var(--ink-body)}
.nav-links a:hover{color:var(--maroon);background:var(--rose-pale)}
.nav-links a.nav-cta{margin-left:8px;padding:0 20px;border-radius:var(--r-pill);background:var(--maroon);color:#fff;box-shadow:var(--shadow-sm)}
.nav-links a.nav-cta:hover{background:var(--maroon-deep);color:#fff}
.menu-btn{display:none;align-items:center;gap:9px;text-decoration:none;min-height:44px;padding:0 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--paper);font:inherit;font-size:15px;font-weight:700;color:var(--maroon);cursor:pointer;flex:none}
.menu-ic{position:relative;width:18px;height:12px;flex:none}
.menu-ic::before,.menu-ic::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor}
.menu-ic::before{top:1px;box-shadow:0 4px 0 currentColor}
.menu-ic::after{bottom:1px}
.site-head.open .menu-ic::before{transform:translateY(4px) rotate(45deg);box-shadow:none}
.site-head.open .menu-ic::after{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1060px){.nav-links a{padding:0 9px;font-size:14.5px}}
@media (max-width:900px){
  .site-head .nav-in{flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
  .nav-links{width:100%;overflow-x:auto;padding-bottom:4px}
  .nav-links a{white-space:nowrap}
}
/* The collapsed phone menu. Keyed to (scripting:enabled), not to a class
   motion.js adds, so the header never shifts when the script arrives.
   The Menu control is an <a href="#navlinks">: if scripting is on but
   motion.js never runs (blocked, failed download), following the link
   makes .nav-links the :target and the same open state applies, so the
   control is never inert. With motion.js it toggles .open instead and
   the jump is prevented. */
@media (max-width:900px) and (scripting:enabled){
  .site-head .nav-in{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .nav-links{width:auto;overflow:visible;padding:0}
  .menu-btn{display:inline-flex;margin-left:auto}
  .nav-links a:not(.nav-cta){display:none}
  .nav-links a.nav-cta{margin-left:0;padding:0 16px;font-size:14.5px}
  .site-head.open .nav-links,.nav-links:target{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:8px var(--gutter) 18px;background:var(--cream);border-bottom:1px solid var(--border);box-shadow:0 24px 40px -24px rgba(63,13,30,.35)}
  .site-head.open .nav-links a,.nav-links:target a{display:flex;min-height:48px;font-size:17px;color:var(--ink);padding:0 12px}
  .site-head.open .nav-links a.nav-cta,.nav-links:target a.nav-cta{justify-content:center;margin-top:8px;color:#fff}
}
/* Under 500px the closed row is brand + Menu only: the whole (closed)
   link list leaves the row, so its CTA and its flex gap no longer
   squeeze the "Created in Pairs" tagline onto two lines (it wrapped at
   430-499px, the big iPhones, and jumped on every tap at 320px). The
   CTA is still in the opened menu and in the hero right below. */
@media (max-width:499px) and (scripting:enabled){.site-head:not(.open) .nav-links:not(:target){display:none}}
@media (max-width:359px){.brand .tg{letter-spacing:.08em}}

.btn-solid,.btn-ghost,.btn-cream,.btn-cream-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--r-pill);font-weight:700;font-size:17px;line-height:1.2;text-align:center;transition:transform .2s var(--ease-out)}
.btn-solid{background:var(--maroon);color:#fff;box-shadow:var(--shadow-sm)}
.btn-solid:hover{background:var(--maroon-deep)}
.btn-ghost{border:2px solid var(--maroon);color:var(--maroon);background:transparent}
.btn-ghost:hover{background:var(--rose-pale)}
.btn-cream{background:var(--cream);color:var(--maroon-ink);box-shadow:0 10px 26px -12px rgba(0,0,0,.45)}
.btn-cream:hover{background:#fff}
.btn-cream-ghost{border:2px solid var(--cream);color:var(--cream);background:transparent}
.btn-cream-ghost:hover{background:rgba(250,246,243,.12)}
.btn-solid:hover,.btn-ghost:hover,.btn-cream:hover,.btn-cream-ghost:hover{transform:translateY(-2px)}

.kick{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink);line-height:1.5}
.kick::before{content:"";width:10px;height:10px;flex:none;background:currentColor;-webkit-mask:var(--star4) center/contain no-repeat;mask:var(--star4) center/contain no-repeat}
.on-dark .kick{color:var(--on-dark-soft)}
/* Header aside (guide, partners): in the header, so first paint. */
.site-head .head-aside{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:15px;font-weight:700;color:var(--ink-soft)}
.site-head a.head-aside{padding:0 12px;border-radius:10px;color:var(--maroon)}
.site-head a.head-aside:hover{background:var(--rose-pale)}
/* @critical-end */

/* ---------- Inner pages (about, legal): page head band and reading
   column. Also inlined, on inner pages only (@critical-inner). ---------- */
/* @critical-inner-start */
:root{--lat-faint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23D89A6A' stroke-opacity='.22'%3E%3Cpath d='M19 19h26v26H19zM32 13.6L50.4 32 32 50.4 13.6 32zM32 0v13.6M32 50.4V64M0 32h13.6M50.4 32H64'/%3E%3C/g%3E%3C/svg%3E");}
.page-head{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream-deep),var(--cream));border-bottom:1px solid var(--border)}
.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--lat-faint) 0 0/64px 64px;-webkit-mask-image:radial-gradient(70% 90% at 85% 20%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 85% 20%,#000,transparent 75%)}
.page-head .ph-in{position:relative;max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding:44px var(--gutter) 38px}
.page-head .khatam{position:absolute;right:var(--gutter);top:50%;width:150px;height:150px;margin-top:-75px}
@media (min-width:701px) and (max-width:1099px){.page-head .ph-in>:not(.khatam){max-width:calc(100% - 180px)}}
@media (min-width:1100px){.page-head .khatam{right:-190px}}
.page-head h1{font-size:clamp(34px,5.4vw,50px);line-height:1.08;letter-spacing:-.025em;font-weight:800;color:var(--maroon-ink);max-width:560px}
@media (max-width:700px){.page-head .khatam{width:72px;height:72px;margin-top:0;top:14px;opacity:.8}.page-head h1{max-width:calc(100% - 80px)}}
.khatam{display:block}
.khatam .k-sq{position:absolute;inset:17%;border:1.6px solid var(--maroon);border-radius:3px}
.khatam .k-r{border-color:var(--rose);transform:rotate(45deg)}
.khatam .k-oct{position:absolute;inset:24%;background:var(--rose-pale);clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.khatam svg{position:absolute;inset:31%;width:38%;height:38%}
.prose{max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding:36px var(--gutter) 64px}
.prose h2{font-size:24px;line-height:1.25;letter-spacing:-.01em;font-weight:800;color:var(--maroon-ink);margin:56px 0 12px}
.prose p,.prose li{font-size:18px;line-height:1.7;color:var(--ink-body)}
.prose p{margin:0 0 16px}
.prose strong{color:var(--ink)}
.prose a{color:var(--maroon);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--rose)}
.prose ul{list-style:none;margin:0 0 18px}
.prose ul>li{position:relative;padding-left:28px;margin:9px 0}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:12px;background:var(--rose);-webkit-mask:var(--star4) center/contain no-repeat;mask:var(--star4) center/contain no-repeat}
@media (prefers-reduced-motion:no-preference){
  .khatam.draw .k-m{animation:k-in .8s var(--ease-out) both}
  .khatam.draw .k-r{animation:k-turn 1.1s .2s var(--ease-settle) both}
  .khatam.draw .k-oct,.khatam.draw svg{animation:k-in .7s .75s var(--ease-out) both}
}
@keyframes k-in{from{opacity:0;transform:scale(.7)}}
@keyframes k-turn{from{opacity:0;transform:rotate(0deg) scale(.8)}}
/* @critical-inner-end */

/* ---------- Lattice and girih strap ---------- */
:root{
  --lat-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23D89A6A' stroke-opacity='.17'%3E%3Cpath d='M19 19h26v26H19zM32 13.6L50.4 32 32 50.4 13.6 32zM32 0v13.6M32 50.4V64M0 32h13.6M50.4 32H64'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------- Footer (full and compact share one rule set) ---------- */
footer.site-footer{position:relative;background:var(--maroon-ink);color:var(--on-dark);padding:56px 0 30px;font-size:15px;line-height:1.6}
footer.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--lat-dark) 0 0/64px 64px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
footer.site-footer .sf-wrap{position:relative;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
footer.site-footer .sf-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:30px 26px;margin-bottom:34px}
footer.site-footer.sf-compact .sf-grid{grid-template-columns:1.8fr 1fr 1fr 1fr}
footer.site-footer .sf-lockup{display:flex;align-items:center;gap:11px;margin-bottom:16px}
footer.site-footer .sf-lockup svg{width:36px;height:36px;background:var(--maroon);border-radius:10px;padding:3px;flex:none}
footer.site-footer .sf-nm{display:block;color:#fff;font-weight:800;font-size:18px;letter-spacing:.2px;line-height:1.1}
footer.site-footer .sf-tg{display:block;color:var(--on-dark-soft);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
footer.site-footer .sf-blurb{font-size:15px;line-height:1.7;color:var(--on-dark);max-width:320px;margin:0 0 18px}
footer.site-footer h2,footer.site-footer h4{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);margin:4px 0 10px;font-weight:700}
footer.site-footer h2::before,footer.site-footer h4::before{content:"";width:7px;height:7px;flex:none;background:var(--rose);transform:rotate(45deg)}
footer.site-footer .sf-col a{display:flex;align-items:center;min-height:36px;color:var(--on-dark);font-size:15px}
footer.site-footer .sf-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer.site-footer .sf-social{display:flex;gap:10px;flex-wrap:wrap}
footer.site-footer .sf-social a{width:44px;height:44px;min-height:44px;justify-content:center;border-radius:50%;border:1px solid rgba(232,214,206,.4);color:var(--on-dark);transition:transform .2s var(--ease-out)}
footer.site-footer .sf-social a:hover{background:var(--rose);border-color:var(--rose);color:var(--maroon-ink);text-decoration:none;transform:translateY(-2px)}
footer.site-footer .sf-social svg{width:19px;height:19px}
footer.site-footer .sf-playbadge{display:inline-block;margin-top:18px;line-height:0;border-radius:8px;min-height:0}
footer.site-footer .sf-playbadge img{height:44px;width:auto}
footer.site-footer .sf-cp{font-size:13px;color:var(--on-dark-soft);line-height:1.7;text-align:center;border-top:1px solid rgba(232,214,206,.2);padding-top:22px}
@media (max-width:880px){
  footer.site-footer{padding:44px 0 26px}
  footer.site-footer .sf-grid,footer.site-footer.sf-compact .sf-grid{grid-template-columns:repeat(2,1fr);gap:26px 18px;margin-bottom:26px}
  footer.site-footer .sf-brand{grid-column:1/-1}
  footer.site-footer .sf-blurb{max-width:none}
}

/* ---------- Components (inner pages, Sept 2026 phase 2) ----------
   For the legal, help and commerce pages (privacy, guide, child safety,
   delete account, refunds, shipping, pricing, contact, partners). Every
   rule is scoped under .prose (the reading column) or uses a class that
   index.html, about.html and terms.html never carry, so those three
   pages render exactly as before. Nothing here is first paint: these
   pages link theme.css inside <main>, just before the .prose column,
   followed by the empty, parser-blocking /site/hold.js (Firefox would
   otherwise keep parsing and paint the column unstyled), so the page
   head paints from the inline critical blocks and nothing in the column
   paints before these rules arrive in any engine (no layout shift, and no
   need to copy a rule inline; the header aside, the only component in
   the header, lives in @critical-start). No start state hides
   anything and nothing moves; reveals, where a web page wants them,
   stay the [data-rv] hook below. Contrast: small text is --rose-ink or
   --ink-soft, never --rose; input borders are --ink-soft (3:1 against
   paper, WCAG 1.4.11). */
:root{--measure-w:612px;--octa:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}

/* Header: one quiet item on the right of the lockup (a plain text
   "azwaj.io", or a single safe link such as "App Guide"). */

/* Type inside the column: h3, numbered lists, muted notes, badges, code */
.prose h3{font-size:19px;line-height:1.35;font-weight:800;color:var(--maroon-ink);margin:30px 0 8px}
.prose .lead{font-size:20px;line-height:1.6;color:var(--ink)}
.prose .muted,.prose .hint{font-size:16px;line-height:1.6;color:var(--ink-soft)}
.prose ol{list-style:none;counter-reset:pr;margin:0 0 20px}
.prose ol>li{counter-increment:pr;position:relative;min-height:32px;padding-left:46px;margin:14px 0}
.prose ol>li::before{content:counter(pr);position:absolute;left:0;top:.05em;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--maroon);color:#fff;font-size:15px;font-weight:800;line-height:1;clip-path:var(--octa)}
.prose h2 .dm{position:relative;display:inline-block;width:14px;height:14px;margin:0 14px .16em 3px;vertical-align:middle;border:1.6px solid var(--maroon);border-radius:2px}
.prose h2 .dm::after{content:"";position:absolute;inset:-1.6px;border:1.6px solid var(--rose);border-radius:2px;transform:rotate(45deg)}
.prose .pill{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;margin-right:6px;border-radius:var(--r-pill);background:var(--rose-soft);color:var(--maroon);font-size:13px;font-weight:800;letter-spacing:.08em;line-height:1;vertical-align:.12em}
.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;padding:1px 6px;border-radius:6px;background:var(--rose-pale);border:1px solid var(--rose-soft);color:var(--maroon-ink);overflow-wrap:anywhere}
.prose pre{margin:0 0 16px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--cream);color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.prose pre code{padding:0;border:0;background:none;font-size:inherit}
.prose address,.prose .addr{font-style:normal;margin:0 0 16px;padding:16px 20px;background:var(--paper);border:1px solid var(--border);border-left:4px solid var(--rose);border-radius:4px 16px 16px 4px}

/* Buttons inside the column keep their own colours (.prose a would
   otherwise underline them and paint them maroon). */
.prose a.btn-solid,.prose a.btn-ghost,.prose a.btn-cream,.prose a.btn-cream-ghost{text-decoration:none}
.prose a.btn-solid,.prose a.btn-solid:hover{color:#fff}
.prose a.btn-ghost{color:var(--maroon)}
.prose a.btn-cream{color:var(--maroon-ink)}
.prose a.btn-cream-ghost{color:var(--cream)}
button.btn-solid{border:0;cursor:pointer;font-family:inherit}
.prose .actions,.cta-band .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0 0}
@media (max-width:479px){.prose .actions>[class^="btn-"]{width:100%}}

/* Card: a quiet paper panel. .ihead + .ic put an icon tile in a heading. */
.prose .card{margin:24px 0;padding:24px 22px;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
.prose .card>:first-child{margin-top:0}
.prose .card>:last-child{margin-bottom:0}
.prose .card>h2:first-child{padding-top:0;border-top:0}
.prose .ihead{display:flex;align-items:center;gap:12px}
.prose .ic{position:relative;display:inline-flex;vertical-align:middle;margin-right:12px;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:12px;background:var(--rose-pale);border:1px solid var(--rose-soft);color:var(--maroon)}
.prose .ihead>.ic,.icard>.ic{margin-right:0}
.prose .ic svg{width:20px;height:20px}
@media (min-width:600px){.prose .card{padding:28px 30px}}

/* Callouts. .callout = a note; .warn = something that cannot be undone;
   .stance = a statement of what Azwaj is and is not (on dark). */
.prose .callout{position:relative;margin:24px 0;padding:18px 20px;background:var(--rose-pale);border:1px solid var(--rose-soft);border-left:4px solid var(--rose);border-radius:4px 16px 16px 4px;font-size:17px;line-height:1.65;color:var(--ink-body)}
.prose .callout p,.prose .callout li{font-size:17px}
.prose .callout>:last-child{margin-bottom:0}
.prose .callout.warn{padding-left:62px;background:var(--rose-soft);border-color:var(--rose);border-left-color:var(--maroon);color:var(--ink)}
.prose .callout.warn::before{content:"!";content:"!"/"";position:absolute;left:16px;top:17px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--maroon);color:#fff;font-size:17px;font-weight:800;line-height:1;clip-path:var(--octa)}
.prose .callout.stance{z-index:0;overflow:hidden;padding:22px 48px 22px 22px;background:linear-gradient(135deg,var(--maroon),var(--maroon-ink));border:0;border-radius:var(--r-card);color:var(--on-dark);font-size:18px}
.prose .callout.stance::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--lat-dark) 0 0/64px 64px;-webkit-mask-image:radial-gradient(80% 120% at 100% 0,#000,transparent 70%);mask-image:radial-gradient(80% 120% at 100% 0,#000,transparent 70%)}
.prose .callout.stance::after{content:"";position:absolute;right:18px;top:20px;width:16px;height:16px;background:var(--rose);-webkit-mask:var(--star4) center/contain no-repeat;mask:var(--star4) center/contain no-repeat}
.prose .callout.stance p{font-size:18px;color:var(--on-dark)}
.prose .callout.stance strong,.prose .callout.stance a{color:#fff}
.prose .callout.stance :focus-visible{outline-color:var(--cream)}
.prose .callout .lbl{display:block;margin-bottom:4px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink)}
.prose .callout .em{font-size:21px;font-weight:800;line-height:1.3;color:var(--maroon)}
.prose .callout .em a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}

/* A list whose items carry their own icon (an inline svg first child). */
.prose ul.iconlist>li{padding-left:32px}
.prose ul.iconlist>li::before{content:none}
.prose ul.iconlist>li>svg{position:absolute;left:0;top:.3em;width:20px;height:20px;color:var(--maroon)}

/* Tables. Always inside .table-wrap: on a phone it scrolls sideways
   inside its own frame (never the page), and the covers (local) and
   shadows (scroll) show an edge while there is more to see. Rule lines,
   not zebra rows: a cell background would hide that edge. */
.table-wrap{margin:20px 0 26px;overflow-x:auto;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(90deg,var(--paper) 30%,rgba(255,253,251,0)) left center/32px 100% no-repeat local,
    linear-gradient(270deg,var(--paper) 30%,rgba(255,253,251,0)) right center/32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(63,13,30,.2),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(63,13,30,.2),transparent) right center/14px 100% no-repeat scroll,var(--paper)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums}
.table-wrap caption{caption-side:top;padding:14px 16px 0;text-align:left;font-size:15px;color:var(--ink-soft)}
.table-wrap th,.table-wrap td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.table-wrap tbody tr:last-child>*,.table-wrap table>tr:last-child>*{border-bottom:0}
.table-wrap th{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--maroon-ink);border-bottom:2px solid var(--rose-soft)}
.table-wrap td{color:var(--ink-body)}
.table-wrap td strong{color:var(--ink)}
.table-wrap td.amt{font-weight:800;color:var(--maroon);white-space:nowrap}
.table-wrap.prices th:not(:first-child),.table-wrap.prices td:not(:first-child){white-space:nowrap}
@media (max-width:420px){.table-wrap table{font-size:15px}.table-wrap th,.table-wrap td{padding:11px 9px}}
@media (max-width:360px){.table-wrap th,.table-wrap td{padding:10px 6px}.table-wrap th:first-child,.table-wrap td:first-child{padding-left:10px}.table-wrap.prices table{font-size:14px}}

/* Questions: <details class="qa"><summary>..</summary><p>..</p></details> */
.qa{margin:0 0 12px;padding:0 20px;background:var(--paper);border:1px solid var(--border);border-radius:16px}
.qa[open]{box-shadow:var(--shadow-sm)}
.qa>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:14px 0;list-style:none;cursor:pointer;font-size:18px;font-weight:700;line-height:1.35;color:var(--maroon-ink)}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:hover{color:var(--maroon)}
.qa>summary::after{content:"";width:30px;height:30px;flex:none;clip-path:var(--octa);background:linear-gradient(var(--maroon),var(--maroon)) center/12px 2.4px no-repeat,linear-gradient(var(--maroon),var(--maroon)) center/2.4px 12px no-repeat,var(--rose-pale)}
.qa[open]>summary::after{background:linear-gradient(var(--maroon),var(--maroon)) center/12px 2.4px no-repeat,var(--rose-soft)}
.prose .qa>:not(summary){margin:0 0 18px}

/* On this page: chips. Keep the label first (<strong>), any <br> is
   hidden; anchors land below the header through scroll-padding. */
.toc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 12px;padding:18px;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card)}
.toc>strong,.toc>b{flex-basis:100%;margin-bottom:2px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink)}
.toc br{display:none}
.toc a,.prose .toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--rose-pale);border:1px solid var(--rose-soft);color:var(--maroon);font-size:15px;font-weight:700;line-height:1.25;text-decoration:none}
.toc a:hover,.prose .toc a:hover{background:var(--rose-soft)}

/* Forms (the delete-account request): <form class="form"> */
.form label{display:block;margin:22px 0 8px;font-size:16px;font-weight:700;color:var(--ink)}
.form label:first-child{margin-top:0}
.form input:not([type=checkbox]):not([type=radio]),.form textarea,.form select{display:block;width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--ink-soft);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit;font-size:17px;line-height:1.4}
.form textarea{min-height:120px;resize:vertical}
.form ::placeholder{color:var(--ink-soft);opacity:1}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--maroon)}
.form :user-invalid{border-color:var(--maroon);box-shadow:0 0 0 3px var(--rose-soft)}
.form .req{color:var(--maroon)}
.form .hint{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.form .checkrow{display:flex;align-items:flex-start;gap:12px;min-height:44px;font-weight:400}
.form .checkrow input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--maroon)}
.form .err{margin-top:8px;font-size:15px;font-weight:700;color:var(--maroon)}
.form .btn-solid{width:100%;margin-top:28px}

/* Ways to reach us: rows with big tap targets */
.prose .reach{margin:24px 0;padding:4px 20px;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
.prose .reach p{margin:0;padding:12px 0;border-top:1px solid var(--border);font-size:17px}
.prose .reach p:first-child{border-top:0}
.prose .reach strong{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-ink)}
.prose .reach a{display:inline-flex;align-items:center;min-height:44px;font-size:19px;vertical-align:middle;overflow-wrap:anywhere}

/* Steps: numbered cards (keep the number as text in .stepno) */
.stepgrid{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0 8px}
@media (min-width:760px){.stepgrid{grid-template-columns:repeat(3,1fr)}}
.stepcard{padding:24px 22px;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
.stepno{position:relative;z-index:0;width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:#fff;font-size:19px;font-weight:800;line-height:1}
.stepno::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--maroon);clip-path:var(--octa)}
.stepno::after{content:"";position:absolute;inset:3px;z-index:-2;background:var(--rose-soft);border:1.8px solid var(--rose);border-radius:3px;transform:rotate(45deg)}
.prose .stepcard h3,.prose .icard h3{margin:0 0 8px}
.prose .stepcard p,.prose .icard p{font-size:17px;margin:0 0 10px}
.prose .stepcard>:last-child,.prose .icard>:last-child{margin-bottom:0}

/* Feature cards in a grid (an .ic tile or an emoji leads each) */
.icards{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0}
@media (min-width:640px){.icards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:760px){.icards.three{grid-template-columns:repeat(3,1fr)}}
.icard{padding:22px 20px;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
.icard>.ic{margin-bottom:14px}
.stat-k{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink);line-height:1.4}
.stat-v{margin:6px 0 4px;font-size:clamp(28px,4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--maroon)}
.stat-s{font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* On-dark call to action band (the homepage join band, as a panel) */
.cta-band{position:relative;z-index:0;overflow:hidden;margin:56px 0 0;padding:clamp(36px,6vw,56px) clamp(22px,5vw,48px);border-radius:var(--r-card);background:linear-gradient(135deg,var(--maroon),var(--maroon-ink));color:var(--on-dark);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--lat-dark) 0 0/64px 64px;-webkit-mask-image:radial-gradient(70% 90% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 90% at 50% 40%,#000,transparent)}
.cta-band h2,.prose .cta-band h2{margin:0 0 12px;padding-top:0;border-top:0;font-size:clamp(26px,4.4vw,36px);line-height:1.15;letter-spacing:-.02em;color:#fff}
.cta-band p,.prose .cta-band p{max-width:var(--measure-w);margin:0 auto;font-size:18px;color:var(--on-dark)}
.cta-band .actions{justify-content:center}
.cta-band .khatam{position:relative;width:84px;height:84px;margin:0 auto 18px}
.cta-band .khatam .k-m{border-color:var(--on-dark)}
.cta-band :focus-visible{outline-color:var(--cream)}

/* A done state (delete-requested): the tick in the khatam octagon */
.donemark{width:76px;height:76px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:var(--rose-pale);clip-path:var(--octa);color:var(--maroon)}
.donemark svg{width:32px;height:32px}

/* A wider column for marketing pages with card grids: text keeps the
   reading measure, the grids and the band use the full width. Last in
   this section so its side margins win. */
.prose.wide{max-width:calc(1040px + 2 * var(--gutter))}
.prose.wide>:where(:not(.stepgrid,.icards,.cta-band,.table-wrap,.full)){max-width:var(--measure-w);margin-left:auto;margin-right:auto}

/* ---------- Motion (all of it gated) ----------
   Reveals are one-shot: motion.js watches [data-rv] blocks and
   [data-rv-host] sections and adds .is-in once. */
@media (prefers-reduced-motion:no-preference){
  .js-motion [data-rv].is-in{transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
  .js-motion [data-rv]:not(.is-in){opacity:0;transform:translateY(22px)}
  .js-motion [data-rv].is-in.d1{transition-delay:.08s}
  .js-motion [data-rv].is-in.d2{transition-delay:.16s}
  .js-motion [data-rv].is-in.d3{transition-delay:.24s}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Print: a page printed before it was scrolled would otherwise print
   every not-yet-revealed block at its opacity 0 start state (the
   IntersectionObserver never runs for the print layout). motion.js marks
   every block revealed on beforeprint; here nothing may be caught
   mid-transition, so the print is the settled final frame. */
@media print{*,*::before,*::after{transition:none!important;animation:none!important}}