/*
  Shared styling for the public pages at waheedalpharma.tech.

  Hand-written CSS with no build step: prerender.tsx copies this file to
  dist/style.css verbatim, and every page links it at /style.css. It is not
  imported by a component, so nothing here is tree-shaken or hashed — which is
  also why the class names in src/components/ must match it by hand.

  Clinical Sanctuary (CLAUDE.md §10): surface tiers instead of 1px dividers,
  tinted shadows rather than neutral grey, generous radii, the primary gradient
  reserved for the mark and the primary call to action.

  Tokens are copied from infra/billing-web/index.html deliberately rather than
  imported: that page is opened mid-payment and must not depend on a second
  request completing. Keep the two in step by hand — they are the same brand.

  No web fonts. A landing page reviewed by a payment processor should render
  instantly on a slow Pakistani connection, and the system stack lands on the
  same humanist shape the app uses.

  ── REBUILT 2026-08-08 ───────────────────────────────────────────────────────

  Ammar's report: the site "seems childish" and "sections are getting repeated
  quickly". One cause for both. Every section was a .card — same white fill,
  same radius, same padding, same shadow — stacked in an 860px column, so the
  page had no rhythm and read as a phone screen enlarged.

  Three changes carry the fix, and all three are §10 read properly rather than
  departures from it:

  1. SECTIONS ARE BANDS, NOT CARDS. §10 asks for "background-shade shifts,
     tonal transitions" as section boundaries. A card around each section draws
     a boundary around the CONTENT instead of between the SECTIONS, and repeats
     the same outline every time. A band shifts the surface tier under a whole
     full-bleed section, so the boundary is the tonal step and nothing is drawn.
     Adjacent bands must be different tiers — see the ordering in each page.

  2. A REAL TYPE SCALE. It was 34 → 21 → 15px, which is nearly flat; nothing
     signalled importance, and flat hierarchy is most of what reads as juvenile.
     Display type now runs to ~62px and is set with clamp(), so it is a scale
     rather than three sizes.

  3. THE COLUMN IS 1120px, NOT 860px, and the hero is two columns. A single
     narrow column of rounded boxes at desktop width is a phone screen blown up
     however good the boxes are.
*/
:root {
  --surface: #f7f9fb;
  --surface-lowest: #ffffff;
  --surface-low: #f1f4f6;
  --surface-high: #e7ecee;
  --primary: #00685f;
  --primary-container: #008378;
  /* Only used by the one `deep` band per page. Darker than --primary so white
     text clears AA comfortably (7.9:1) rather than sitting near the line. */
  --primary-deep: #00544c;
  --on-primary: #ffffff;
  --on-surface: #191c1e;
  --on-surface-variant: #40484a;
  --muted: #8a9294;
  --secondary-container: #bdece2;
  --on-secondary-container: #0f3730;
  --tertiary-container: #ffdcc2;
  --on-tertiary-container: #4a2600;

  /* Interactive elements keep §10's 16px floor. Panels came down from 28px:
     with sections no longer wrapped in cards, a panel is a rare object rather
     than the page's basic unit, and 28px on a large rectangle is the app-card
     look this rebuild is moving away from. Buttons stay fully round per §10. */
  --radius-md: 16px;
  --radius-lg: 20px;

  --shadow: 0 14px 38px rgba(0, 106, 97, 0.10);
  --shadow-soft: 0 6px 20px rgba(0, 106, 97, 0.06);

  /* The content column. Bands span the viewport; this is what sits inside. */
  --wrap: 1120px;
  --gutter: clamp(20px, 4vw, 40px);

  --font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
}

* { box-sizing: border-box; }

html {
  /* The header is sticky, so an anchor jump must stop clear of it — otherwise
     "Partner with us" scrolls the partner heading underneath the header. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
[id] { scroll-margin-top: 96px; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

main { display: block; }

/* Visible only when reached by keyboard, and unmistakable when it is. */
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Bands and the content column ───────────────────────────────────────────
   .band spans the viewport and carries the tone; .wrap inside it holds the
   column. The split is the whole mechanism: a tonal shift that stops at the
   column edge is just another card. */
.band {
  padding: clamp(52px, 6.5vw, 92px) 0;
}
.band.tight {
  padding: clamp(26px, 3.2vw, 40px) 0;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Long-form prose is read end to end; a 1120px measure is unreadable for it. */
.wrap.narrow { max-width: 760px; }

/* Surface tiers. Adjacent bands must differ — §10 forbids two identical tiers
   side by side, and that rule is what makes a boundary visible without one
   being drawn. `t-surface` is the page's own background: the baseline the
   others step away from, so it needs no declaration of its own. */
.band.t-tint  { background: var(--surface-low); }
.band.t-paper { background: var(--surface-lowest); }

/* The top of the page: a soft wash of the brand hue that resolves into the
   page background, so the hero has presence without a picture behind it. */
.band.t-hero {
  background:
    radial-gradient(58% 78% at 12% 0%, rgba(0, 131, 120, 0.13), rgba(0, 131, 120, 0) 70%),
    linear-gradient(180deg, #eaf2f3, var(--surface) 78%);
  padding-top: clamp(36px, 4.5vw, 64px);
  /* A band's own bottom padding meets the next band's top padding, so the
     default put ~185px of nothing between the hero and the first section — a
     void that reads as a missing element rather than as air. The hero closes
     tighter and the section below keeps its full opening. */
  padding-bottom: clamp(30px, 3.4vw, 50px);
}
/* …and the section directly under a hero opens tighter for the same reason.
   Every other band keeps the full opening, because there the padding is what
   separates two sections rather than what follows a page's first statement. */
.band.t-hero + .band { padding-top: clamp(34px, 3.6vw, 54px); }
html[dir="rtl"] .band.t-hero {
  background:
    radial-gradient(58% 78% at 88% 0%, rgba(0, 131, 120, 0.13), rgba(0, 131, 120, 0) 70%),
    linear-gradient(180deg, #eaf2f3, var(--surface) 78%);
}

/* A different READER, not a different topic: the partner block. Tinted toward
   the secondary container. The gradient runs vertically so it needs no RTL
   counterpart — an angled one would lean the wrong way in Urdu. */
.band.t-accent {
  background: linear-gradient(
    180deg,
    rgba(189, 236, 226, 0.9),
    rgba(189, 236, 226, 0.34)
  );
}

/* ONE per page. The dark band is the page's anchor — the thing your eye finds
   when you scroll past — and a second one would cost the first its job. */
.band.t-deep {
  background-color: var(--primary-deep);
  background-image: radial-gradient(
    115% 150% at 12% 0%,
    rgba(0, 131, 120, 0.62),
    rgba(0, 84, 76, 0) 64%
  );
  color: rgba(255, 255, 255, 0.88);
}
html[dir="rtl"] .band.t-deep {
  background-image: radial-gradient(
    115% 150% at 88% 0%,
    rgba(0, 131, 120, 0.62),
    rgba(0, 84, 76, 0) 64%
  );
}
.band.t-deep p { color: rgba(255, 255, 255, 0.88); }
.band.t-deep .label { color: rgba(255, 255, 255, 0.66); }

/* ── Header ─────────────────────────────────────────────────────────────────
   Sticky and glassed. This is the one place §10's glassmorphism rule applies
   on the site — and it is why the header needs no rule beneath it: the blur
   and the diffused tinted shadow separate it from the page on their own. */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 1px 28px rgba(0, 106, 97, 0.06);
}
/* Where the blur is unsupported the fallback is opaque, never a transparent
   header with page text scrolling through it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.site { background: rgba(255, 255, 255, 0.97); }
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* THE LOGO — the real one, as of 2026-08-08. This was a "+" glyph in a gradient
   tile, a stand-in nobody had replaced, and it is the same mark the app ships
   (apps/mobile/assets/logo-mark.png) so the site and the app are recognisably
   one business.

   IT IS INLINED AS A DATA URI, which is a deliberate trade rather than
   laziness. Every file this site serves needs its own `location` block in
   infra/nginx/default.conf.template — the config lists /style.css, /pricing and
   the rest one by one — so a /logo.png would build perfectly, deploy, and 404
   until somebody remembered the nginx side. Inlined it cannot break that way,
   it costs no second request on a slow connection, and it is cached with the
   stylesheet rather than separately. The cost is ~14KB of base64 in a file that
   is otherwise ~24KB, paid once for the only image on the whole site.

   Sized slightly over 100% so the transparent margin around the source's
   rounded square is cropped out of the box, and clipped to its own corner
   radius so nothing shows at the corners on the tinted footer. */
.mark {
  width: 42px; height: 42px; border-radius: 26%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAYAAABxlTA0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAARGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAABYoAMABAAAAAEAAABYAAAAAOeASBAAAAHLaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj42MjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+NjI0PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CvYcQxwAACZ/SURBVHgBrX1pjF3HlV691wvZ7CbFXRRJcd9MUlwkijRFSR5Z1thanIHjjD12HCD5kdjBBIOJkAQzNjRDywgGQQD9GGQA/zEGsGxLlu1BLGtkWTIlitq576K4ijvZTTbJJtnd7DXfd5aquve9lm1kiv1uVZ3zne+cqlu3bt3lPVbCH5CGQ6iE3t75O06d+tqZ9o6//cdXftNw9VYfpWFwaBAZCratoYVqGAQCGSZO2DRjVRUsUCPJUCgLQAhEVsFWyAxYL0vGQeDGXwH5MDesS0aBuZC4SAYBjIbQpgmjW8K///znB2dNnfzde+fMeS6MHn3MLAn8nYlh/M4Ed9We7u71v3j3vW9tO3z0iRPt7eM7rl4NjY0Nocros5S3u6ApVMyADfNUT09djmH9E3AO1Q4dAQoQcaWwyVxypWzDaFD/wGCYNmlimDNlytWV8+a+9PiaNd+fOnHiewhlSAw/YTNSuNFkuKtr0c/37P3Ob7Zv//qx9o7G3lu3QkO1Kh0rgUZkKmhoqYERR2+utGIhgJKejL7DIi4WqE0p4kzPwSgDNUG0FIMpK1JdQxyO+5IldvTg8BAG8Ogwb9Lkgc+uWvWTr9/36e9VRo8+mixrSyOEq8Cz7e1f/eEbbz7zxv7906/duB6aGxqj07pDwPilsWxgrb8aSd5e7/tPshMMNuURWNPB8CQ8JQfS8TVRQACccGcjoCJOhk2CCRCE9MPpsHVMa1i/YOG5f/vQQ08unjXjp/UoKavbluEXXmjedtdd33n2jS1P7T5xAruPRwKh3JdmUteSlLUptlEpagEjyUtI7YARgnbs78nl8HLOkcoPO1c7OEMYN+MYRp8MYW8tnz1r+BsPPvi9Bw4f+p+Vr3wFJ6RiokkhDR840Pzm4ODf/eC1TU8ePX02NGGejR1EZN6A3Pp3tT63K3g0TsqcI3OoIhXk7soU/yJ1di6J4CgOpBpiILLDoG9wMMy/447wjfs/88wXTrf8deUrywqdXM3tYVrZ2dz87X/c9MaTR85o55q/BJMIrMqyfxxRrufyvOw83mtedwxyocJIGR5SZR1Ihh6hKCSZzuv1coexA+slscEBrbtBEE0NDeHYuXPhR29veXLz/IFvA1IwLnRw59XrX/7hpjeeOnTyFObbhnou/nDZSA3xMKj35FjWTc6RJIcqJz+Kc4xI6mwcYxyCcFkdeOoSBqWBCdxtPDdbQVCGxO5uwrnp2Lmz4WfvvPPUiZPnv6wa3cYOHr52bcHzmzf//fYjR6ujGhtzjPssygo1ePPYNL6CtlBxXC60YHMRy0LFM4ucbJRYt1COYFPmqKlHglKzKJcPifHBn5zUagiIA9CWKMM22jmSd588UX3hnbf+fvhqz1w3k2E6vHFj9e0ZM5/58Vtv39/d26Pt0eYJTqYcOh8x0aEp84a7LLcryxxPea6TMpUoGEb62blyrMuY1+MjtoA3XuIzOQ99HiFRJA7Tco1w6xz4UZRu3WkIl27eHDuxrW3Cs7NmvvjdzZuHdQR/5zvrXt2162vnL1+CPU3wwZ+YaTHGTVmio0ckmnhi2ep2VKsmkztU8tyWAsNJYx0YZUnvqkLugeWcI5Tlai7XRSLtZK4kdD6yvpRRmxmwaB+XVquV0HHtSnj90IGv9fzX/3EvKaugqby+d99/3nrkKBYMccaQXsxHjJN4HuOpEUSN9TM9lGVWr9chCQozPZfzaCRFRpOhUHSeorS2FnHKy52YJ/MGR3QIb5/oFJZ2QnAWwhtxEbbv9OmmV3ft+HOyVMPVq3O2HTn6xc6uazJ6pRHeosy7jihs3annGSYW6dH1tpc8CM+lbeIsWhUK2lgTjYQjmRMyHwmXM3tcI4CrkOs/4wZvHou7o2PpC9GrbwkB7e283hV2nTjxxdDZeWf1SrX61SMXLoxvrDaoy3KQidHCrBEU5eLFRAVNyU78lGRFsz+s5nH///LSHp0k/2QUc52gKW+aXnIBLHgPVZzLbYRjuF9zqOPK16vtnVef/rj9YmgoLMsUGGllPnKSLHfPIoJNoY4K67DVGIxzJK6MVooFLvKUAOW6qeWo1aGiEuBkKhBF2UhjilIW8JEFgoWrsbtvYfKK5YrwUU7bBkwMZ3A+u3T9+tPVwxcuNHX39FpICi7QQES/1HjcUjZ6UVpgIopKK9gU4fBIQhsnTMqRS6QTG8ujHzMxXVlMrXQYzUpKqcLO9cS6C5bLSce1SktUInQensl6+/vCsfaLTQ2tS5ZuvHTzeuAZUAC0pBceJuIto5LO8n1FjH2QFZKbeF5QZpWyXvxCn7eyjCnXM7pCkbjIg8Oc7Snv0KhPlpE+FpIu8jl3DSYRcmd2Xb8ZqvuOHZPbj9pbiMkxpUOKXGk2suCJdbzH4c5dV8oL8JJO2u8AdeisyY/rk8ZDzyUJb1LSFVI9Hgfk4DxG15dtBVMU8pbukbNnsKpo4i1IMKJDc4j7KEgBcLn7EqNcKDtGBbTVUgKkUmRIhTyAvJwQwldUoSaCIrMfrnFaKBoZI21hJ6YOYAWRG2eRlcKiRH2bbVmN81ojJ2RPSu01zUt0RaUQllndwpwWLHKZ4wqAT6zUt6iV1nRuXVaLO5qzQBk++ItisaXcE8umzcVUF41CBdcVjbKHM2ARw1pG6AGQjMnmZK3k24xQzHMOcLIHMohalgXFSIgpI3KPeTmO2lyYl7OjrNwp2kvuyfPaWHK6kcpsJuYH78QE0zUeyfnJycvYsp4clGkSy9zcFXV7IOeuZ+TGxS5I0j+kZPw1bsox4DHREG6s48PU1NhUx3lqb4oAPBBzbmisxL2ZgHIyy32JZdInIpTiaKyJ1mC5PC+ruugm19fzp/p6mkJMecUd0MjLPocUBk8yYqcODg6FxqaGMGXy+DB92pTQNm5M2LrjYBjqHzQi4kuRcLCaSCPlCB7BicgloCKJx9mPO/kMwh+B6wqjIlcx8lAUZ1F1Aovo2K09uGxd4hFhh/f1D+BxTHpMRXs+vW7A1WYDlpM1Mee0pM4TdUzO77kIcDIDrw6yEAYGhiTUSZNvC4sWzAqL8Zk2dVJoaRkdrly7HnbsOoQHn3g9QTic2MijjAXoACLCbvzmYBog6WlUy6XtAPbwmgULwoI7pikRnjj0Dw6EG909uJt0LZy70omrmBuhD7KmhiY5VOKu9V1c4IR//ZObJY+vXRPGtYwRBB8wduNJ9kW8JnDm0uVw8drVMIAd24x71v7KQFwIiIU1MPYo2+ay5JQDg1J2LvkwHsKC+TPCvas/FebMmo6nx6NkJ3MQ9WOHoxL9JRYyWGJ/Sc/TH5L1X6MXVFobiMrT1ilv3uoN/+nxx8Lo5uaktFLXzZvhMB45vb5vT3hz34FwuasrjOL85cnbXOpscvf09YfxrW3hv/zJFx0dc/J+dOZM2Lxnb3gdnys3u8MoWWZGCAqR3IQecYaBiFL2ATtv5syp4aENd4f5c2fKNcEAjs7+/n4gBCUdp3OxdV4pbmUG1tXktmrDrPXrN1bkPoSRKVq25VBdVcXS7uzly+EGGrhh+TIhljUvKRDUKHT69MmTwoaly8KGTy0JFzDyjp09hxdVmnQnC87Z1MZrFXAfOPlxWD1vbrhj0iQXS07eGZMnhw3LloX7ly0N5zouhRMXL2Kt+fs83qLT9Bm053wP3Lcq/MkXHgy3T5mIKW8wntDUsQbKI+Uarsp27jkkzwd1iiAib0jWu2qMHTgcGmatW78xYG5jL9WDy/kgV5gx774dxnOo1fPm462XCeoLPsqPuse3tYWHV68KPT23wl50HOfRgiOvWHx01YdpobPrevjju1fX8OkoGQ7jx44Nf7RqJebGrnDg9Ol4s6om1DhKkobTDqeAL/+rPwrr7lkubecIZXJ4nlcxf3Rcvhr27DuMaPEvUsUCLPOy1dDBVaUV7sImwmOhoBYnt3pvhZ9ueh1RpZ0jTwIkTO0x2YsYYX/5b74UHr93Tbg14IdezqdYkcAfX3DZfvhI2Hf8hIjIET/gJpr1UU1N4b9/9U/DA8uXhr4BzJP1kvRGagSXXC3o3D/70ufC0sVzZSogV5685jkpeH4ZxCtULLs8txFpHUU1rliK6EjiNp47jDHxkN2Kjjh+/gLEumd17+IMiknIA5ccim9izp562212GHqjS8yo8ijgCfLF994Td+WjgkL1MyzTwzcfeyy0No+CP4GXNrmQO2c4PPbIfWHunOmhD/M9U0RI56XBQh1Pgpwibt7ojjiOYrZXLWmNDzOKCgmrHwpdHh0VQFpxOuEyMl4K3hwaCP+8dWsdi8TrHTRl/Pjw8IoV4ZacQDITD45OLJhmjM73Pzoc+JIhk8cYy7SxgBdMnx7WLlqIUawdRkwxKbAPfpcvnYfP/Ni5itOOP3X+or2DYd7QuWKJzZUrXRklpcoZI8sDFC0F2Dk2FMQ4x7DsH1FKXSU6elTKE8xru3fjMcl1s1C5Y3JOah5de28YM6rZRrdpJcuRHDXVcBlLvbf27VdCbImQnUXyHA75Y1ja2TOZiE8t0KNpTGtLeGD9KnRicWLkkm/3fsyv6FDu2NR5SsVl3CXMwZyLtVslEii51vWOTlY8BkQDmF8NCFMyZtVJRJXRoG6XusTz8Dl/5Wp4becuBebbIoVoFsycEe6ePw+vhNbOmSlUGoIbJ8RXduzEBQCunup0qoQoyBDuXbQozJ12u6xpTYTMGbHWxYltGebcOyZjtRBPaHhpBMu8/Yc+Dt3dfWHunTNlJUErjYBuMT1g/vUOJreOd91q3TzBSD1qt3P6lTk43wsKAdI9xI6mABZGkuahisyDL2/dZoe+4cRVJGEckrhDnli31moeDpjjySDZ8GWOg3jLaO/x44bPM+ISdvSoUeGhFXfJBQ9ZeYWmam0dR9/ShXMg0lFHaQOmuLMXO8L72/eFtauXSufmHkhAuwsdl8N1dDIpa5P2REEecbDXJkaJ4SCVPwk1yaxER2qnenbEYaxzt2POTImcikoyLa1b8qkwa8rk4mgTqNsoLzuoH6Pt19u2lyhMH6Xq56GVK0MrOlpr6EIUpIzN6OamMGnibfCJowF1ehoYHA4vvvg6On5WaG0dHU/KpNXdgqkKHXzs47NYQRSnlejakF4nrzpVDplUREhFLLCiVQaozqJd1BHuJrgrEX71/geiS1KrlrJWXNvLaMM0IR0Q9e4pCmQubu+5jlfJiXRv1KPMk1DsxRDmTp8Wls6ahSkF0491IpFDwLRg3m8c3SQvUVPWhA7fsfNguN7VHVavWqqXw5CneDAyMZJ68BWJ4yfOyminXd3kHSHGWYy8vKZBJI2ADBQZs0MBOG8XcyaeKLZ+dESu2FTCLU8uqcbu86XbI/fcHVqxHs31jhSZzfPVhkqYu3hWuNCjZ/HYoQBFajt2eWL87MoV8WrM9bQZ0zIKV5LVMICbSHz+eL2rJ7z1/t6wAZfILaObZScoo1vhRg1e3f341LnQ0XFFLqG1RdhabGyf9ApNzEwz7T/uILiCKM5/xBnSW4tc4Ukj/BCqGQqkQONu4P7ESx/4kg1C6z02kJ/MTZiHd2rvmT9fTnbKX3IIIQ/n6dMmh3lzZoQjXR1y84VYRlgbpUo24BJ6UtvY+MqrsMJ3M0Yw7/IN41jgKwrvfrAvDGN1sGr5Ij2JMj6CjZjlQUwhvEUJVUosC5Ai7xMKTJhjIUrPi4jPE4DK5ca2t0RqSuBVq+Q87DbtyZZsKo6syocqG4O9+xiWbITwooSdr580KoZwiN1z12Is60aFK7duhsu93QDJmBFO8R19aGHaxIlh9XysUnChEhNsuNRqGMYzsmqjrAje37onLF88L7S1jdGdL4GYBeKT1cXBY+E45t/8XkccvN6hHjhMK2wHKdhQlJiN3ME23LiPfD/RwPYz2ykk3Aofcj7fO3/lWvhtvSWbo2kntiF8GjeCZk+dIt95gFQV1IGQ8+bYsWPCwgV3onMGxN/F3rTYF5jwmIFEoZHgCyrC5psKjlPerOm71Y91bjNu2nwk90aWLJ6N6cSj1w6hTSOmuwvtV8JvN2+Vc4DwOMxJvdVRrgXZSlwK1AuNtFuMy7tUQcSre5o7keaCyAibEByXbLxqij3JUoYROczH4Bs7D+OGja6JDWC0nB4W4+w+blyrjDDeXOIo5o1+IQNcx0sWhwQTwprFC8P08RPiXMylIe/8deLGUB9OWgc+PBGmTpkQ7pg+BetjjnRw2DzAzu28diP8/JebQteNHllFuD+J23wUyyqUbiy0EyO4NrzIkBVolVnKoSAtTPO9ofmG5uFz58OOw0dEIpZuKr3MCrzaEfLI6tVhLDpaVgkCphY3ckY1hXtWLJG5lPM3D7Ubg7dCey+vGJkiaewf6SNsbmttDeuWLJbvtymyIquE46fPhzNn2kPHpath8eI5+KYQl2ZCBjrcZsU8fQm653/2m9COEczlZ0qZvyTUknOwXZL0OKcFOtiFppPMWmqcjoizH+S0q7UlEt+QRNQv+ZJNOIxPuI3Nsjl4KrJ6QfHKjk8R5tw5DSe4SYXF/yB4T3R3yojWaI3E4oz7D8qHsJrgSc0Tb5PuP3Q8bMXSrIpBsGjBbLlkpmkVHckdvGPnofDD51+WHcA5mPvQqJ0my7WtmcCKGhO37Oaau2kkjKQ+UgUsA8VIssxGokp0F3DJ9v7hw+E4RnLGlhm5WIN5fO3awhTCEbti2QK8XOvX/uqbJ8bOvpuhq7+3yEW6GLQW7sINe17M+GUxO7ujvTN8ePjjMAHTzvTbJ0nHMr6Pjp0KP3r+lfDLl7fgtmSvLM+0g6zNaGOkj54p0fhrlQktjxAdqGLMtmanXPXIM2Kbv9UWcvyxm6/39mYXHmTCeAexcJu5++HJbu7UqXK/gKN30oS2MH8e7gsU7lfweNF/J69d0tDI6pxRooUWrDwewNOW4j2PilxoTJk8Di/nDYRtOz8Mz/701+FnP98UTp/GG6YYtbxys/ASI9pYlOU1thyfuIe1J9QYU1sOpdDrZiZ1Nisl1xCcyIjIpxDeldq0Z4/dZaM1tAYXNmy8zs7Qkx2eVOPSeBXm3tYxLZhqxIymAiaeK5WfvrY5XMWdNlUgk5Ri8VaQcwzuWXMnsAnsJl48tF/uCj/44S/Diy+/FU6euiBHSvH1XefMcwbDT56yBokq9kAE4QQr0ZsgBVmPLlrVFNRxdI8CH69fwL3cTbvSXTYfsTSPWOPiY6U2XNm1tbWElcsW6twbw9EYG/Gk49z5y2HTB7vCNkxBTKIRXM6ohgtnzgxL8JH7D8ASwfZ29/SFnt4+vPfQGBrQ4TzhZmOFtHWSctZGrjF4g/IoSFKYg3Ol0uUSK5cbI2IKVc9AJVhs2CH//MF2W7IVY9bRq16omT1tWlg5e06YjZPb+PFjwxCXY+QUWua4+4UT1YcHjsl7E2/s2qOE0bVz0UA/nHc/ixtAnHaYdHzxSLKPSIl1Epatw6SUbxynMvcmtaIqN7JnckSLRe5AywU0KyJ2A5+fHeu5WvEK6PDZs+GDQx9FmhiYQBOe8i8/sCGsWblELonldiOtqACMc+P1Ljy2P3YaL4KMCjtxC/MsnioLIJIqVmYEo35wxfIwcWxbmiYgJ1zOzSzLiCA4kZgpZJZEkPSOdQkpWCany8QSFf4ugdNoDpD4LEpRK+JYk+CyXE00PG6J4dh58d33pIE6aiEvUgGhNutxH2HZ3Nl2YmIgUSVzJ5dZV/GGjVx03LiB6Wc3AJ6UQ7dJxkvn9VgTy0NROnbneQwuK7XRWaJaAqKheUHGWk7lNppzmSa70sUGLURZpCjUrMIdEgPP3JGGS7btR4+FI3hhhKEoNQzwpyMNEv7JFFAN01rG6S1FBUpgMm9izty197DcCaNBA3h/i0dV+jSZAdQm8jPxnge/1F5MyYYl/yRMCiCVHGi2yKjzT7K1EgKIaxId3kqlzjhj8V9KXi44hFrkInREZoPd393XF16yB6N6UsVJBfgc7Z6mj7ktNFVSZxDDM/+p0xdCO28b2tUVrxiPX7gQ9p84EZ15h1Kg86yqVs6fFxbPmC7LQI5GjYEgASpIth4FKxqdQKwmnK4BUd4PglaTNNbAUZWGeudgKOZAHZkMiA41ERoxLOATHWU4g4uOV0Wv79kXnxBT5xzSWGm1srQ2jgozWm6DndbVXyUcwMmNv9EgCXj+4xOJ/Fmgu/fcvGD0NobP4/4z32sQWqFWfiW0gLJJlBzSbhRkynRSEzK+KIokWhBmUWIEM1BCo9CtzKcqNNR6mFKY3ibxJFTY8Gzejhstr+5ISzYC8hEnBraZP3ZKGFPVd9k4YjsuXwtHj5+Jo9ex7Lh3Dx7CW0C8ywZHdChOHcHoNEIuA6fhtQEu2VRiwFIQpaoQOaXY2cZnVtdFjy5QJ3a70oWOsrpgXOe5Y7Lc93QmqimyM/hsrZe/UlXshQyrUbU2jQoLx07Vx/DYObvwytJNftVMHLHLiOPoqOCty2t4tH8gckiYstFpSH0Nh4njxoVvPvYFuf+gL1STA0ByuhFELEqVjBoOS5pQp+/CTnB7M5TMeGgkd0P4PoDFnlYQEBAsPrjJjERGa0s5hiLxmTmkjGf+4xcuYsl2iFXhdZ/mReRaHg4z2yaGVRPuDE3YHx9i9eBzL0G6eoED/PHxz2u4mNFOo1NNqRNShzy67t7w7T/7U30vA7CIlrlQW8WtlKAUsfHFTGFqLAQUOBONFOkweS9C5hjHIVe4Qlh2ME1ZVz1rSFQaoEaX63FM0c+v3vsAI8B2aCQ2RuHCdIWcmNvHjMPvA/SGy51dtnogYTHxYmY/Hu3zdVlJWSysx462wmdwl62NT56tLjFzk9lZNLXthCLiOQDtk4QSgWyEAxtZRbiR+ECFvlNgI3RohhH7xJ1KFrQLmnGy23HseDh06jREsKKhJAfyXKBlBs/Sr3Hz3rUGLpjwKOjBKiWe7CJnLCjeqltx0XPuyhWZXoQXcs0zfFb0IOlHxJmOdtpPKKHgOy3FiVWE0RcaQQ7hoV1C15QiDprfhaMxO42d8UtceGhK0cpOLbHwneKd2CGcv2OiI36SqTw/24JXrG709IiiHpcb/Hbn7sxLKWpwytFszlRbwphOelZ6F3qDSEgWl1tV5ZLUazTOy6hm7VBq7kpPGZZSD879CgyYCEOhGQ9G30RnXOjsVDXAUW+87oHvWdzAbc/cpUEKGVcpZ/BC+Ja9+wrycuVMR0fAT+YUdpiMOl8SwIC+3b/n5InTASsjJTdA7iMepwg0jwK2stzSMpG11HliJMSRQ7OCuEzBk9KV7u7wi7feERUDz/2KC2z4MuFmdBivBA0IB8DytExHeULcfI/tuc1bQrfsED1BS0zAig/gN+3eE67Bd/5CnviDznOh9X6wnPYcBi7OXXtZdoA4JBmlOsXJOtgtKecnJ+Ko9OTFtMR2TeRUgQNZy8oeIkcxfgczvI2RLBBgJMAMuwmHMm938iaPJkTFUUCMdHIGhog3lo6cPx++/9LLCken5IibmD5e2bpDR2+miG2hTHoZBZbhyvvB47YJNynUk2x1WkoCtalzw52Q6J++3IvZMgaJI3FJSQM15cggORGw6fxBt6d/8nx4ZduOzCM9421NTB/Pv7mlcChTnneZxIDhAaF98KAUN9d/8c674Qcv/9oeFbkyhBe2vBU+bu/Ack93mIxqDi9CQMIOimFLgXL0JduPj+QiwUZsvMI6BD4F5P2FMr4Ec99GPvsqGKW4VC71xBpLVpAgXShD3rxQ5h/G4xgU+ZoTH8Hz/d/T7e3ydQC+U3bw1Knwv174eTiJW5H5Cx8FHlb0j6yFxJfCeWI88PFJuad8Dd9M+r/vvx+e3/wWnlxYhyJguNfOtZgk48bqLEi/xXpSsXWZuFTJwsFeqdz/l/9tuCp39aEwS+seJREmbFwo9oVKxlgsGp3TFpVWI4bPzXii4u+18e4YHxXxx4ViKrTGpLJXUebQIokkADGSWJVLYhDxERO/18clotPo6FULH5miM4Aut1ARXmxY1EyNyluJRcDQqB05hjGAGo1TTaxSkBkZZU5homJmSg5gt89zqqWekxi22b4DzI7gyYqL89hw70jxpp2nxTh7mgb8Np/RD3+NT+ZqlPUqMDkWFt43ItACI5tPhyhBgYRMvCAYk6g83xYUXlFf3OpJLjNPYagD7VVvGLTOkTvJylEtx5dxMCsQm4HLYEQ7GVlUmRtpKHWipJASbT5FkoyDddkprMvHCtEWcolJBKzoJ+OEQJvLAhMgRGkASec7nyquTZVJc5HZhm2245DBaBJCFt0xgxIKYCTmhFULbGtEcAazgkvSEOd0NHYZ5AxaA8/JrEwuicdsxJAExUS6GpUQF3FSI2cdeA2H4YgWHW28IEQ6+Dzqgg7DVzu4YJAYaCrmeZDOxNzLIBKmyAMr6FQdhcXGZ+I49JJRsfXmRzNuTSANzDbkLKtyP1BKFZskTiUyiblzMLdyzYDJdNnoSHgh4zIN41hcZAa8uxZ7yBzEiDwez0nkSWTc4EMOiY78dcAckYyaO4dqwpn7B0VNsotFT5U32JQJL0pIPSfAy55DlK/rCckJvameqz5tLRI1IWfGS1TUmwlXLdVbuM9aGvNi6UM99hONnDDPBeghQSGTrdWZ4aM1M2Lm5OTMk5mpyPAmY1ZQ53ZWLsRaRy8ikBizV6VjZOUQCep4ykU5QcGPXvGJCG3sx68ENI7BulEexLhRbDwFGH2aaetYjnqPNPeMcl51585t9VJVpTVCI6qRMwYntjz3WdYRIjJsrANrjim3J07K6CgZKG4TSVgo+o+2epzqfAAhTCt4uFB99L4NeJEDd7VJjs6TTFhYZS1PqEuQJnPyHFKvHEeGTQuZE3FR9lN2yx3tvLUFjZ36qLMy61GmjSaMbdB/UlOM49yGbYttpTBvrIOTfZIojj+H8PCq1aF69/z5/RUsyONZmjbuRHJsvB6dWLCU/z7Jccw9TuYuJwfL/vE6BY6nWvCyIQLJ9IaR4UF1DnGcY6WOjflPnG5YYwwo/okamzgYMhy4HCODEiquHu6aPae/Ora5+W+mjB2nL9rROZT07R+KJGDyyccLohGclmxLtSQrxDqEJPXkcsgkZm5E5goAWXSZi0XGjZOhLDJiXYZyFLJMuemiH6NWBwTFRDoJyrCa8egrskaDUoGeJuG/gRjT1Pg31XVLFvx49oSJV/ljFPQll3g8NPxDX/4PHsSJRKCsqchSqkljs6qis620FwASIslWZLIxoM6WBom4SCuHsOM1SjUkL0umY+YwL0AvojgNKMC5mYtfK4g8W4IoDlvR0xcSuMjC733c3tJ69eGlK5+t4kWvMyvnzP1VC143VYeCU+/qM5F4HSQ6pTi7uqMPSaWqi61JhimCYjsTGLEDY7CCPsaROKREOHqFHaMa3WaUhXZRG6liwWRmKt8c0vnBaBKnlnSbmcsPIc2bMvlXLTMnnePrq8NPrL3vH2aPm4B7LhzF0qxCTDGKxB31FPknCgsF12YjTKLBJs9Zlrobm7Mox+hAOXU09QUDNXQ8cmUwHmpZ9A+KcWlGUoPpGCz7quOHfHkyyABe7J7c0NS/buHSf2DfypXc7T+YtG3V7FnPNchrnoa0LIaX+2A5r5ujiI2OdWdlbVKNAA0NHqUyQskSk0nRfspYy3HRkUuTwErqCls53ilM3GLEqokyDdy4ZyOKHkwOsO+MyIqRXukbCIsn3/7cQ1t+s41yeR5T2VgZ6unsfGr3kSOP7L/ccUfLGPykFu8Z5h5ZJncuI0NJph1RIyZSbNNgsUBVDBpzYPzuRvolQsFu/rS/fGFvXqEztbjzjWOppF6SAdWPe2OIWuY6WGJNKrdUc98BkRAXFvgFlblt487/6/UPP1W5f5lcXtjNnhBaJk489aX7H/yL6aNbh/hdMl7mMdGee4p8whUJRZ06nHAxUTvdGsYz2MaB5HyuE3vZWBNN4f6gEk7ZUOdYFTjM6WJOtSilFVphHXLtTClEOAuccqmLsboWcpraG3IuBRjf/cAiYUpz89Dn7l75F2vuX3bKlbGDKXji7df/6dG77/neeNyflR9jK3jIFvtuzRxO+dEdysjKTTVABAJfhiQaNgu1lAgVeG7DuCItOyJ1RtlegLEdZmQuCtzCGUnFp8FiMLLCgkbu1VAqewIvIWLeHYWfO1g3Z8H3/sPBff8UDVAocwT+Z1HPbN39d6/u2/NkF35GsMm+RMKDkfCCgQSuLadzNlQpvTcKaOiUAwUtR1gZp4iaebAAK1TUwPlYi+rMJ2KMEI4IYKRFgo0GGZdidPCoJYeZdjDwOMr78MtbjfiK7qfnzHvmf3/ugb+qrFlT+OGgwgiWuJYt63uytemvH1mx4uk2LOi68Sa5DgAQwoe4YSz5R8LELtAYYoB5VYXZ9hOVjnMnVodNfTMqTJOboMz3PkQDfda9cQe4tKBz98j1Pk3yKmzsEPz14ptOzT29wxvmzX+6XueShuHUTaCs/J8fPfeVV7fveOZ8983pTTjx8dv0YkGlBc8Zge7pmG1MhJCgwro3gkDZoyoUvwkjJOwRkXuHRagV6IukgqI/KWATnYtAY2IRGOk8MZSN8SdXZHMetVaIWLq9iIjDfMvvYWO1MKmx+dz6hQuf/Ks//48vMAK3yvMiX66x8ptvfjD3J2++sfHE5Y6v3xgaxPee8KvO/GUmPJRUY+XVAcQypXIgSVG0dV0nZ9o4jVA4gc9NhFE2Os4EY94Ti5acy2pGqoQ5p3ugTFcmMllo+NYGcrgNf4qxH699VbBSGNvYNLBk+syffPG++zd+/jPrTqiv+luNtb4uSvmfSf149dr17xw88K2TFy8+cflm9/g+zM+jMaqr+BUR/XakBsgGStCw1uCkZ1CxXFizMopeI4PYCAF3EpNuyaZ8IkwbCL1T1UJR1l2CEzq3z0mEGhsb/eofAMHAHzqVXyfjPMufDGurVq/OmjTlpbVLFn//W9/46r/Mf5qaWiJ+K6+88d7svUcP/7sTF8//7XsHDzY04Fvx+mY/wsPxHxuLDpW1JAnQAOwGaSLbxPhl/LNtptcTJBpl7SOPjyz2MctDxAuXUNJSEsQAKJfwoUKZTF9CIjAFIEb6YBI72VKgNSqlZA0ZxIhdu2jR4MI7Znx3+cxZz37h0YdOQm8MQvOJm/8H0WSdyjtpkWsAAAAASUVORK5CYII=");
  background-size: 104%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-soft);
  flex: 0 0 auto;
  text-decoration: none;
  display: block;
}
.mark.small { width: 24px; height: 24px; box-shadow: none; }

.wordmark { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.tag {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-surface-variant); line-height: 1.3;
}
.spacer { flex: 1 1 auto; }

/* The counter's number, on every page. Ordering happens on the phone today,
   so it should not require scrolling to find. */
a.call {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
  color: var(--on-surface);
  background: var(--surface-low);
  padding: 9px 15px; border-radius: 999px;
  flex: 0 0 auto;
}
a.call:hover { background: var(--surface-high); }
a.call svg { width: 14px; height: 14px; color: var(--primary); flex: 0 0 auto; }

/* The language switch is a link, not a script toggle: it works with JS off,
   it is shareable, and the two languages are separate URLs anyway. */
a.lang {
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--on-surface-variant);
  background: var(--surface-low);
  padding: 9px 15px; border-radius: 999px;
  flex: 0 0 auto;
}
a.lang:hover { background: var(--surface-high); }

/* The one in-site nav link, next to the language switch. Plain text rather
   than a third pill, so the header does not become a row of buttons. */
a.nav {
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--on-surface-variant);
  flex: 0 0 auto;
}
a.nav:hover { color: var(--primary); }

/* Below this the hero's own call button is the first thing on the page, so the
   header's copy of the number is redundant and only costs room. */
@media (max-width: 780px) {
  a.call { display: none; }
}
/* The tagline wraps onto a second line on a handset, which makes the sticky
   header taller on every page and leaves the brand name sitting off-centre
   against it. The name and the mark say who this is; the qualifier is what a
   narrow screen can afford to lose. */
@media (max-width: 480px) {
  .tag { display: none; }
  .brand { font-size: 17px; }
}
@media (max-width: 420px) {
  header.site .wrap { gap: 10px; }
  .mark { width: 38px; height: 38px; }
  a.nav { font-size: 13px; }
  a.lang { padding: 8px 12px; font-size: 12px; }
}

/* ── Hero ───────────────────────────────────────────────────────────────────
   Two columns: the promise, and the counter's details as a panel. A single
   centred column of text is what made the old top of the page read as an app
   screen rather than a business's front page. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
/* A grid item defaults to min-width:auto, so a long unbroken word — a URL, or
   an Urdu compound — would push the column wider than its track instead of
   wrapping, and the panel beside it would be squeezed off the page. */
.hero-copy { min-width: 0; }

/* Both pages lead with a statement and no panel beside it — the home page's
   contact panel came out on 2026-08-08, since it opened the site by printing a
   phone number the header already carried. The measure is set on the HEADLINE,
   not on the column: constraining the column squeezed the lede paragraph
   underneath it into a 22ch ribbon. */
.hero.solo { grid-template-columns: minmax(0, 1fr); }
.hero.solo h1 { max-width: 16ch; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}

/* The four assurances under the hero actions. Set as chips rather than a
   sentence: the hero has to be believed at a glance, and four short claims do
   that where a paragraph asks to be read. Laid out with flex and gap so the row
   mirrors under Urdu with no second rule. */
ul.trust {
  list-style: none; padding: 0;
  margin: clamp(26px, 3vw, 36px) 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
ul.trust li {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  padding: 8px 16px 8px 13px;
  font-size: 13.5px; font-weight: 600;
  color: var(--on-surface-variant);
  box-shadow: var(--shadow-soft);
}
/* Logical padding, so the tighter side follows the dot under RTL. */
ul.trust li { padding-inline: 13px 16px; }
.dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px;
  background: var(--primary-container);
}

h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  font-weight: 700;
  /* Stops a two-line headline breaking after one short word. */
  text-wrap: balance;
}
/* Policy pages: a document title, not a marketing headline. */
h1.doc {
  font-size: clamp(28px, 3.4vw, 36px);
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}

.lede {
  font-size: clamp(16.5px, 1.55vw, 19px);
  color: var(--on-surface-variant);
  margin: 0;
  max-width: 52ch;
}

/* ── Section headings ───────────────────────────────────────────────────────
   Unnumbered on purpose — see SectionHead in components/ui.tsx. The band's
   tonal shift is what marks a new section; an ordinal above the heading would
   claim a sequence the page does not have, and would collide with the real
   numbering inside "How it works". */
.head { margin-bottom: clamp(24px, 3vw, 38px); }
h2 {
  font-size: clamp(23px, 2.8vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.028em;
  margin: 0;
  font-weight: 700;
}
.head .lede { margin-top: 14px; }

h3 { font-size: 16px; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 14px; color: var(--on-surface-variant); font-size: 16px; }
p.tight { margin-bottom: 0; }
strong { color: var(--on-surface); }

.label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; font-weight: 700;
}

a.more { color: var(--primary); font-weight: 700; text-decoration: none; }
a.more:hover { text-decoration: underline; }

/* Small print: a qualifier that belongs to the block above but does not need a
   panel around it. The page carried four grey caveat boxes before this. */
.fine {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 10px;
  max-width: 56ch;
}
/* --muted is tuned against the near-white surfaces. On the mint accent band it
   drops to roughly 2.6:1, which is below AA for body text and looked washed out
   next to the button it qualifies — so fine print there steps up a tone. It is
   still visibly secondary; it is just readable. */
.band.t-accent .fine { color: var(--on-surface-variant); }
/* Fine print that follows a block rather than a heading needs its own air, or
   it reads as the last line of what it is qualifying. */
dl.contact + .fine { margin-top: 20px; }
.ticks + .fine { margin-top: 16px; }
.actions + .fine { margin-top: 14px; }

/* ── Two-column blocks ──────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
}
.split .aside h3 { margin-top: 0; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 780px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}

/* One line and an action, side by side. Used by the `deep` strip. */
.strip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 28px;
}
/* Both shapes this strip takes: a titled block on the home page, a bare line on
   the pricing page. Without the second selector the pricing sentence runs the
   full 1120px, which is unreadable at 16px. */
.strip > div, .strip > p { max-width: 62ch; }
.strip .actions { margin-top: 0; max-width: none; }

/* ── Panels ─────────────────────────────────────────────────────────────────
   Now used for what a panel is actually for — a discrete object on the page
   (a pricing plan, the contact details, a policy document) — rather than as a
   wrapper around every heading on the site. */
.card {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--shadow);
}
/* The Plus plan. A tonal shift rather than a border, per the no-1px rule; the
   panels nested inside lift back toward white so the tiers still alternate. */
.card.accent {
  background: linear-gradient(150deg, var(--secondary-container), var(--surface-lowest) 62%);
}
.card.accent .note { background: rgba(255, 255, 255, 0.66); }
.card.accent .pill { background: var(--surface-lowest); }

/* A pricing plan. Two of these sit in a grid and therefore stretch to the same
   height whatever they hold, so the shorter one used to end in a third of a
   white panel with nothing in it. Laying the card out as a column lets
   .plan-foot take the slack and sit on the bottom edge, which turns that void
   into ordinary spacing above an action. */
.card.plan { display: flex; flex-direction: column; }
.plan-foot { margin-top: auto; padding-top: clamp(18px, 2vw, 26px); }
.plan-foot .actions { margin-top: 16px; }
.plan-foot .note { margin-top: 0; }
/* A plan's action spans its own card. One of the two carries a note above the
   button and the other does not, so left-aligned buttons of different widths
   would read as two unrelated links; full-width, they read as a matched pair
   of choices, which is what a pricing page is. */
.plan-foot .btn { width: 100%; }

.pill {
  display: inline-block;
  background: var(--secondary-container); color: var(--on-secondary-container);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  margin-bottom: 14px;
}

/* Plan name and its badge on one line. */
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.plan-head .label, .plan-head .pill { margin-bottom: 0; }

.price { display: flex; align-items: baseline; gap: 9px; margin: 2px 0 10px; flex-wrap: wrap; }
.price b { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.035em; color: var(--on-surface); }
.price span { color: var(--on-surface-variant); font-size: 14px; }

.note {
  background: var(--surface-low);
  border-radius: var(--radius-md);
  padding: 14px 16px; font-size: 14px; color: var(--on-surface-variant);
  margin-top: 16px;
}
.note b { color: var(--on-surface); }

/* The warmer tertiary tint, and after this rebuild the only tinted caveat box
   left on the home page — which is the point of it. */
.callout {
  background: var(--tertiary-container); color: var(--on-tertiary-container);
  border-radius: var(--radius-md); padding: 15px 17px; font-size: 14px;
  margin-top: 18px;
}

/* A statement the business makes about its own conduct — a reason to order,
   not a disclaimer — so it is set as a lead-in line over a tint that fades out
   rather than as another grey box. The fade is a tonal transition, which is
   what §10 asks for in place of a rule. */
.assurance {
  margin-top: clamp(26px, 3vw, 40px);
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(189, 236, 226, 0.62), rgba(189, 236, 226, 0));
}
html[dir="rtl"] .assurance {
  background: linear-gradient(270deg, rgba(189, 236, 226, 0.62), rgba(189, 236, 226, 0));
}
.assurance b { display: block; font-size: 16.5px; color: var(--on-surface); margin-bottom: 4px; }
.assurance span { font-size: 14.5px; color: var(--on-surface-variant); }

/* ── Feature tiles ──────────────────────────────────────────────────────────
   A surface tier above the band that holds them, which is how they are
   separated: no rules, no bullets. Three across — six of these in two columns
   was a tall ladder of near-identical rows. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

.tile {
  background: var(--surface-lowest);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
}
.tile b { display: block; font-size: 16px; color: var(--on-surface); margin-bottom: 6px; letter-spacing: -0.01em; }
.tile span { font-size: 14.5px; color: var(--on-surface-variant); }

/* The drawn icon above a tile's title.
   Decorative — every tile says the same thing in words directly beneath — so
   these carry no label and are aria-hidden in the markup. They exist because a
   grid of six text blocks is a wall of paragraphs whatever the copy says, and
   an icon is what lets the eye pick the one it wants. */
.tile .ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  margin-bottom: 14px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.tile .ic svg { width: 21px; height: 21px; display: block; }
/* On the accent band the chip's own tint IS the band's, so it would vanish. */
.band.t-accent .tile .ic { background: var(--surface-lowest); color: var(--primary); }
/* A white tile on a white band is invisible; step down instead of up so the
   tiers still alternate whichever band a page puts these on. */
.band.t-paper .tile { background: var(--surface-low); box-shadow: none; }
.band.t-accent .tile { background: rgba(255, 255, 255, 0.68); box-shadow: none; }

/* ── Numbered process ───────────────────────────────────────────────────────
   Two treatments, because this renders twice on the home page and one
   treatment meant the partner block's steps read as the customer's steps
   appearing a second time. */
ol.lane, ol.rundown, ul.ticks { list-style: none; padding: 0; margin: 0; }

/* Read across the page: what "how it works" is. */
ol.lane {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 780px) { ol.lane { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
ol.lane .n {
  display: block;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700; letter-spacing: -0.05em; line-height: 1;
  color: rgba(0, 106, 97, 0.24);
  margin-bottom: 10px;
}
ol.lane b { display: block; font-size: 17px; color: var(--on-surface); margin-bottom: 6px; letter-spacing: -0.01em; }
ol.lane div span { font-size: 14.5px; color: var(--on-surface-variant); }

/* A tight vertical list, for steps that sit in a column beside other content. */
ol.rundown li { display: flex; gap: 13px; align-items: flex-start; padding: 9px 0; }
ol.rundown .n {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 999px;
  background: var(--surface-lowest); color: var(--primary);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; line-height: 1;
  margin-top: 1px;
}
ol.rundown b { display: block; font-size: 15px; color: var(--on-surface); }
ol.rundown div span { font-size: 14px; color: var(--on-surface-variant); }

ul.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 15.5px; }
ul.ticks li > span:last-child { color: var(--on-surface-variant); }
.tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
  background: var(--secondary-container); color: var(--on-secondary-container);
  display: grid; place-items: center;
  margin-top: 2px;
}
.tick svg { width: 13px; height: 13px; display: block; }
/* The chip's own tint is the band's tint here, so it would disappear. */
.band.t-accent .tick { background: var(--surface-lowest); color: var(--primary); }

/* ── Calls to action ────────────────────────────────────────────────────────
   The signature gradient is reserved for `.btn.primary` (§10), so a section
   carries one obvious primary action and everything else is a ghost. Laid out
   with flex and gap, never a margin on one side, so the row mirrors under Urdu
   without a second rule. */
.actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-top: 24px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 14px 28px; border-radius: 999px;
  white-space: nowrap;
}
.btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  box-shadow: var(--shadow);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost {
  background: var(--surface-lowest); color: var(--primary);
  box-shadow: var(--shadow-soft);
}
.btn.ghost:hover { background: var(--surface-low); }
/* A white ghost button inside a white card is a shadow and nothing else — on
   the Free plan it read as an underlined caption rather than as the choice it
   is. Inside a card it steps down a tier instead of up. */
.card .btn.ghost { background: var(--surface-low); box-shadow: none; }
.card .btn.ghost:hover { background: var(--surface-high); }
/* For the one `deep` band: the gradient on a solid brand background is the
   gradient competing with itself. */
.btn.light { background: var(--surface-lowest); color: var(--primary-deep); }
.btn.light:hover { filter: brightness(0.96); }

/* `.dial` — the phone number spelled out beside a tel: button — was deleted on
   2026-08-08 along with its three uses. The number is printed in the header on
   every page and once more in the home page's contact block, and nowhere else;
   see the note on `a.call` for why repeating it cost it its weight. A desktop
   reader, for whom tel: does nothing, has it in the header on whatever page
   they are on. */

/* ── Paired figures ─────────────────────────────────────────────────────────
   Two statements about price set side by side (the delivery fee, the partner
   discount). Both open with an eyebrow and a large figure so they start at the
   same height and in the same voice — before this one led with a small grey
   label and the other with a green pill, and the band read as two unrelated
   leftovers rather than as one row. */
.figure > p:last-child { margin-bottom: 0; }
.figure .price { margin-bottom: 14px; }

/* ── Contact details ────────────────────────────────────────────────────── */
dl.contact { margin: 0; display: grid; gap: 15px; }
dl.contact dt { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
dl.contact dd { margin: 4px 0 0; font-size: 15.5px; color: var(--on-surface); }
dl.contact a { color: var(--primary); text-decoration: none; font-weight: 600; }
dl.contact a:hover { text-decoration: underline; }
/* The number is the most useful object on the page; it is sized like it. */
a.tel { font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer.site { background: var(--surface-high); }
footer.site .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 26px;
  padding-top: 28px;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}
.foot-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--on-surface-variant);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; }
.foot-links a { color: var(--on-surface-variant); text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--primary); text-decoration: underline; }

/* ── Policy pages ───────────────────────────────────────────────────────── */
.prose { font-size: 15.5px; }
.prose p, .prose li { color: var(--on-surface-variant); }
.prose h3 { font-size: 16px; margin: 26px 0 8px; }
.prose ul { padding-inline-start: 20px; margin: 0 0 12px; }
.prose li { margin-bottom: 7px; }
.updated { font-size: 13px; color: var(--muted); margin: 0 0 24px; }

/* ── Urdu ───────────────────────────────────────────────────────────────────
   The Latin stack has no Arabic-script coverage, so the Urdu face is separate.
   Two corrections that the previous stylesheet got wrong and that matter more
   than they look:

   1. NEGATIVE TRACKING IS APPLIED TO URDU BY EVERY HEADING RULE ABOVE. Arabic
      script is cursive, and letter-spacing inserts gaps between glyphs that
      are meant to join — so tight display tracking, which is what makes the
      English headline look considered, visually breaks the Urdu one. Zeroed.

   2. NASTALIQ NEEDS FAR MORE LEADING THAN LATIN. Its glyphs cascade down and
      to the left across a line, so a line-height tuned for Latin clips
      descenders into the line beneath — worst exactly where type is largest. */
html[dir="rtl"] body {
  font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", var(--font);
  line-height: 1.9;
}
html[dir="rtl"] { text-align: right; }
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .brand,
html[dir="rtl"] .price b,
html[dir="rtl"] .tile b,
html[dir="rtl"] ol.lane b,
html[dir="rtl"] ol.lane .n,
html[dir="rtl"] .assurance b {
  letter-spacing: 0;
}
html[dir="rtl"] h1 { line-height: 1.45; }
html[dir="rtl"] h2 { line-height: 1.5; }
html[dir="rtl"] .lede { line-height: 1.95; }
/* Wide tracking on an uppercase Latin label is a device Arabic script has no
   use for; it only pulls the joined forms apart. */
html[dir="rtl"] .tag,
html[dir="rtl"] .pill,
html[dir="rtl"] .label,
html[dir="rtl"] dl.contact dt {
  letter-spacing: 0;
}
/* Nastaliq sets tall; the tick and the numeral chip should meet the first line
   of text rather than float above it. */
html[dir="rtl"] .tick { margin-top: 6px; }
html[dir="rtl"] ol.rundown .n { margin-top: 5px; }

/* THE SMALL PANELS NEEDED THE SAME TREATMENT AS THE HEADINGS, and did not have
   it until 2026-08-08 — rendering the Urdu pricing page is what showed it. Two
   distinct failures, both from the same cause:

   1. A Nastaliq ascender rises well above the Latin cap height, so the note's
      bold lead-in was CLIPPED BY THE TOP EDGE of its own panel at the default
      14px padding.
   2. Its glyphs then cascade down and to the left across a line, so at 14px
      the body's 1.9 leading is not enough and the second line collides with
      the first — which is exactly the note this file already carries about
      display type, applying at small sizes too.

   Both are fixed with room rather than with a smaller face: shrinking Urdu to
   make it fit is how a translation ends up looking like an afterthought. */
html[dir="rtl"] .note,
html[dir="rtl"] .callout {
  padding: 18px 18px 16px;
  line-height: 2.1;
}
html[dir="rtl"] .fine { line-height: 2.05; }
/* Chips are a single line, so they need the height rather than the leading. */
html[dir="rtl"] ul.trust li { padding-block: 10px 9px; line-height: 1.6; }
html[dir="rtl"] .pill { padding: 8px 13px; line-height: 1.6; }