/* ==========================================================================
   Appservices — the v2 landing and the guides (P11; index-v2.html, docs.html, offline.html). tokens.css is linked
   first; this file maps its own names onto it (D-411) and holds no colour literal outside the three token blocks
   below, except #fff for the stage's pictures (show.css). Logical properties everywhere (RTL mirrors itself), no
   global reduced-motion rule (C-10: each component handles it), no CSS `order` on .plan (D-409).
   Blocks, each owned by one pull request (the P11 plan 4.3; append inside your block, never reorder another's):
     0 tokens and base (PR-0) · 1 header, menus, mobile menu (PR-1) · 2 hero (PR-1) · 3 trust strip (PR-1 markup,
     PR-3 data states) · 4 services, how it works (PR-1) · 5 news, pricing (PR-1) · 6 FAQ, final band (PR-1)
     · 7 footer, help line, theme control (PR-1) · 8 install button and dialog (PR-2) · 9 offline page (PR-2)
   The stage is show.css (PR-2), the guides' layout docs.css (PR-4).
   ========================================================================== */

/* ═══ 0 · tokens and base (P11 PR-0) ═══════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light dark;
  --bg: var(--as-neutral-0);
  --bg-2: var(--as-neutral-50);
  --surface: var(--as-neutral-0);
  --surface-2: var(--as-neutral-75);
  --text: var(--as-neutral-950);
  --text-2: var(--as-neutral-800);
  --muted: var(--as-neutral-600);
  --line: var(--as-neutral-150);
  --line-2: var(--as-neutral-200);
  --brand: var(--as-brand-600);
  --brand-hover: var(--as-brand-800);
  --brand-soft: var(--as-brand-50);
  --brand-text: var(--as-brand-700);
  --on-brand-soft: var(--as-brand-700);      /* text on --brand-soft: 7.5:1 (D-424) */
  --on-brand: var(--as-neutral-0);
  --focus: var(--as-brand-600);
  --ok: var(--as-ok-600);
  --warn: var(--as-warn-700);
  --danger: var(--as-danger-600);
  --shadow-s: var(--as-shadow-s);
  --shadow-m: var(--as-shadow-m);
  --shadow-l: var(--as-shadow-l);
  --header-bg: color-mix(in srgb, var(--as-neutral-0) 90%, transparent);
  --font-display: var(--as-font-display);
  --font-body: var(--as-font-body);
  --container: 1200px;
  --gutter: var(--as-gutter);
  --header-h: 68px;
  --section-y: clamp(64px, 8vw, 112px);
  --ease: var(--as-ease);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--as-night-950);
  --bg-2: var(--as-night-900);
  --surface: var(--as-night-850);
  --surface-2: var(--as-night-800);
  --text: var(--as-night-100);
  --text-2: var(--as-night-200);
  --muted: var(--as-night-300);
  --line: var(--as-night-700);
  --line-2: var(--as-night-600);
  --brand: var(--as-brand-500);
  --brand-hover: var(--as-brand-600);
  --brand-soft: var(--as-night-750);
  --brand-text: var(--as-night-brand);
  --on-brand-soft: var(--as-brand-300);     /* 5.1:1 on night-750 (the brand text: 3.9:1) */
  --on-brand: var(--as-neutral-0);
  --focus: var(--as-night-brand);
  --ok: var(--as-ok-300);
  --warn: var(--as-warn-300);
  --danger: var(--as-danger-300);
  --header-bg: color-mix(in srgb, var(--as-night-950) 90%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--as-night-950);
    --bg-2: var(--as-night-900);
    --surface: var(--as-night-850);
    --surface-2: var(--as-night-800);
    --text: var(--as-night-100);
    --text-2: var(--as-night-200);
    --muted: var(--as-night-300);
    --line: var(--as-night-700);
    --line-2: var(--as-night-600);
    --brand: var(--as-brand-500);
    --brand-hover: var(--as-brand-600);
    --brand-soft: var(--as-night-750);
    --brand-text: var(--as-night-brand);
    --on-brand-soft: var(--as-brand-300);
    --on-brand: var(--as-neutral-0);
    --focus: var(--as-night-brand);
    --ok: var(--as-ok-300);
    --warn: var(--as-warn-300);
    --danger: var(--as-danger-300);
    --header-bg: color-mix(in srgb, var(--as-night-950) 90%, transparent);
  }
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html[lang="ar"] body, html[lang="ur"] body { font-family: var(--as-font-arabic); }
html[lang="ar"] :is(h1, h2, h3), html[lang="ur"] :is(h1, h2, h3) { font-family: var(--as-font-arabic-display); }
html[data-i18n-pending] body { visibility: hidden; }
[hidden] { display: none !important; }        /* a class's display never shows a hidden element */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand-text); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--text); line-height: 1.2; text-wrap: balance; }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--gutter); }
.skip-link { position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--as-radius-10); background: var(--brand); color: var(--on-brand); }
.skip-link:focus { inset-block-start: 12px; }
.anchor-alias { display: block; position: relative; inset-block-start: calc(-1 * var(--header-h)); }
.section { padding-block: var(--section-y); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 20px; border: 1px solid transparent; border-radius: var(--as-radius-12); font-weight: 600;
  line-height: 1.2; text-decoration: none; white-space: nowrap; }
.btn--sm { min-height: 44px; padding: 8px 14px; font-size: 15px; }
.btn--lg { min-height: 52px; padding: 14px 24px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--line-2); }
.btn--secondary:hover { border-color: var(--brand); }
.btn--outline { background: transparent; color: var(--brand-text); border-color: var(--brand); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-text); }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }
@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  :focus-visible { outline-color: Highlight; }
}
/* ═══ /0 ═══ */

/* ═══ 1 · header, Services menu, language, account entry, mobile menu (P11 PR-1; PR-0's working base) ═══════ */
.site-header { position: sticky; inset-block-start: 0; z-index: var(--as-z-header); background: var(--header-bg);
  border-block-end: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(10px); }
.nav { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none;
  font: 800 19px/1 var(--font-display); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a, .nav-menu__btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  padding: 8px 12px; border-radius: var(--as-radius-10); color: var(--text-2); font-weight: 500;
  text-decoration: none; }
.nav-links > a:hover, .nav-menu__btn:hover { color: var(--on-brand-soft); background: var(--brand-soft); }
.nav-links > a[aria-current="page"], .nav-links .is-active { color: var(--brand-text); }
.nav-menu__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-menu { position: relative; }
.nav-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-width: 280px;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--as-radius-14); background: var(--surface);
  box-shadow: var(--shadow-m); }
.nav-menu__list a, .nav-menu__list button { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 8px 12px; border-radius: var(--as-radius-10); color: var(--text); font-weight: 500;
  text-align: start; text-decoration: none; }
.nav-menu__list a:hover, .nav-menu__list button:hover { background: var(--brand-soft);
  color: var(--on-brand-soft); }
.nav-menu__list--svc { min-width: 340px; }
.logo { width: 28px; height: 28px; flex: none; }
.logo--lg { width: 52px; height: 52px; }
.lg-tile { fill: var(--as-brand-600); }
.lg-w { fill: #fff; }
.lg-soft { fill-opacity: .45; }
.lg-wl { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lg-wl.lg-soft { stroke-opacity: .6; }
.lg-badge { fill: var(--as-ok-500); stroke: #fff; stroke-width: 1.2; }
.lg-tick { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-end { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.nav-login { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--text);
  font-weight: 600; text-decoration: none; }
.nav-login:hover { color: var(--brand-text); }
.lang-select { min-height: 44px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--as-radius-10);
  background: var(--surface); color: var(--text); font: inherit; }
.nav-account .avatar-menu { position: relative; }
.nav-account .nav-menu__list { inset-inline: auto 0; min-width: 240px; }
.avatar-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 4px 10px;
  border-radius: var(--as-radius-pill); font-weight: 600; }
.avatar-btn:hover { background: var(--brand-soft); }
.avatar-btn bdi { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand);
  color: var(--on-brand); font-weight: 700; text-transform: uppercase; }
.avatar-menu__who { padding: 8px 12px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--as-radius-10); }
.burger:hover { background: var(--brand-soft); }
.mobile-menu { position: fixed; inset: calc(var(--header-h) + var(--banner-h, 0px)) 0 0; z-index: var(--as-z-header);
  overflow-y: auto; padding: 16px var(--gutter) 32px; background: var(--bg); }
.mobile-menu nav { display: grid; margin-block-start: 16px; }
.mobile-menu nav a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 4px;
  border-block-end: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; }
.mobile-menu__label { padding-block: 8px 0; color: var(--muted); font-size: 14px; }
.mobile-menu .btn-row .btn { flex: 1 1 100%; }
.mobile-install { display: none; width: 100%; margin-block-end: 12px; }
.mobile-menu__lang { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; color: var(--text); font-weight: 600; }
html.menu-open { overflow: hidden; }
/* the news bar (S2/news.js) sits in the header, one line (40 px): with it shown (html.has-news-bar), the mobile
   menu, in-page jumps and the anchor aliases start below it, so the burger stays reachable to close the menu */
html.has-news-bar { --banner-h: 40px; scroll-padding-top: calc(var(--header-h) + var(--banner-h) + 16px); }
html.has-news-bar .anchor-alias { inset-block-start: calc(-1 * (var(--header-h) + var(--banner-h))); }
.news-bar { background: var(--as-navy-900); color: #fff; font-size: 14px; }
.news-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.news-bar__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-bar__more { flex: none; color: var(--as-brand-200); text-underline-offset: 3px; }
.news-bar__close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; }
.news-bar__close:hover { background: color-mix(in srgb, #fff 14%, transparent); }
@media (max-width: 980px) {
  .nav { gap: 12px; }
  .nav-links, .nav-login, .nav-end > .lang-select-wrap, .nav-account { display: none; }
  .burger { display: inline-flex; }
  .nav-install { width: 44px; padding: 0; }
  .nav-install__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; }
}
@media (max-width: 430px) {
  .site-header .brand__name, .nav-install { display: none; }
  .mobile-install { display: flex; }
}
@media (max-width: 360px) {
  .nav-cta { display: none; }
}
/* ═══ /1 ═══ */

/* ═══ 2 · hero (P11 PR-1; the stage itself is show.css, PR-2) ═══════════════════════════════════════════════ */
.hero { position: relative; isolation: isolate; padding-block: clamp(40px, 4.5vw, 64px) clamp(40px, 5vw, 72px); }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: min(760px, 100%);
  background-image: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent),
    linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  mask-image: radial-gradient(70% 80% at 50% 0%, black 30%, transparent 75%); pointer-events: none; }
.hero-copy { max-width: 940px; margin-inline: auto; text-align: center; }
.hero-title { font-size: clamp(34px, 5.6vw, 60px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
html[lang="ar"] .hero-title, html[lang="ur"] .hero-title { line-height: 1.35; letter-spacing: 0; }
.hero-title .grad { color: var(--brand-text); }
@media (min-width: 768px) {
  .hero-title .grad { white-space: nowrap; }
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-title .grad { background: linear-gradient(90deg, var(--brand-text),
      color-mix(in srgb, var(--brand-text) 55%, var(--as-cyan-400)));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero-lead { max-width: 640px; margin: 20px auto 0; color: var(--text-2); font-size: clamp(17px, 1.6vw, 20px); }
.hero-ctas { justify-content: center; margin-block-start: 28px; }
.hero-pay { margin-block-start: 14px; color: var(--muted); font-size: 14px; }
.lp-show-wrap { max-width: 1120px; margin: clamp(32px, 3.5vw, 44px) auto 0; }
@media (max-width: 480px) {
  .hero-ctas .btn { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  .hero-title .grad { background: none; color: CanvasText; }
}
/* ═══ /2 ═══ */

/* ═══ 3 · trust strip (P11 PR-1 markup; PR-3 its data states) ══════════════════════════════════════════════ */
.trust { padding-block: 8px var(--section-y); }
.trust__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.trust__stat { min-width: 220px; padding: 18px 28px; border: 1px solid var(--line); border-radius: var(--as-radius-16);
  background: var(--surface); box-shadow: var(--shadow-s); color: var(--text-2); text-align: center; }
.trust__stat :is(b, strong, dd) { display: block; margin: 0; color: var(--text);
  font: 800 clamp(26px, 3vw, 34px)/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.trust__note { max-width: 760px; margin: 14px auto 0; color: var(--muted); font-size: 13px; text-align: center; }
.trust__reviews { margin-block-start: clamp(40px, 5vw, 64px); text-align: center; }
.trust__lead { margin-block-start: 8px; color: var(--muted); }
.trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block-start: 28px;
  text-align: start; }
.trust__grid > figure { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--as-radius-16); background: var(--surface);
  box-shadow: var(--shadow-s); }
.trust__grid blockquote { flex: 1; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.trust__grid figcaption { color: var(--muted); font-size: 14px; }
.trust__grid figcaption bdi { color: var(--text); font-weight: 600; }
.trust { --star: var(--as-warn-700); }    /* 3:1 or more on the card (WCAG 1.4.11): warn-700 light, 400 dark */
:root[data-theme="dark"] .trust { --star: var(--as-warn-400); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .trust { --star: var(--as-warn-400); }
}
.trust__grid svg { fill: var(--star); stroke: var(--star); stroke-width: 1.5; stroke-linejoin: round; }
#reviewsMore { margin-block-start: 20px; }
@media (max-width: 1023px) {
  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .trust__grid { grid-template-columns: 1fr; }
}
/* ── PR-3: what trust.js draws (D-406): the two numbers, the footnote, the review cards, Show more on phones ── */
.trust { padding-block: clamp(40px, 6vw, 64px); }
.trust__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px; margin: 0; }
.trust__stat { display: flex; flex: 0 1 220px; flex-direction: column-reverse; align-items: center; min-width: 0;
  text-align: center; }
.trust-stat__value { margin: 0; color: var(--text); font-size: clamp(30px, 4vw, 40px); font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.trust-stat__label { color: var(--text-2); font-size: 16px; }
.trust__note { max-width: 72ch; margin: 12px auto 0; color: var(--muted); font-size: 13px; text-align: center;
  text-wrap: balance; }
.trust__reviews { margin-block-start: clamp(32px, 5vw, 48px); }
.trust__reviews h2 { text-align: center; }
.trust__lead { margin: 8px auto 0; max-width: 60ch; color: var(--text-2); text-align: center; }
/* flex, not grid: a last row of one or two cards is centred instead of leaving an empty cell */
.trust__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-block-start: 24px; }
.trust__grid > .trust-card { flex: 0 0 calc((100% - 32px) / 3); }
.trust-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 20px;
  border: 1px solid var(--line); border-radius: var(--as-radius-14); background: var(--surface);
  box-shadow: var(--shadow-s); }
.trust-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.trust-card__stars { inline-size: 100px; block-size: 20px; }
.trust-card__stars .on { fill: var(--warn); stroke: var(--warn); }
.trust-card__stars .off { fill: transparent; stroke: var(--muted); stroke-width: 1.4; }
.trust-card__text { flex: 1 1 auto; margin: 0; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
.trust-card__by { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.trust__reviews > .btn { display: flex; margin: 16px auto 0; }
@media (max-width: 1023px) {
  .trust__grid > .trust-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 759px) {
  .trust__grid > .trust-card { flex-basis: 100%; }
  .trust__stats { flex-wrap: nowrap; gap: 12px; }
  .trust__stat { flex: 1 1 0; max-width: 220px; padding: 16px 10px; }
  .trust-stat__label { font-size: 15px; }
  .trust__grid:not(.is-open) > .is-extra { display: none; }
}
@media (min-width: 760px) {
  .trust__reviews > .btn { display: none; }
}
@media (forced-colors: active) {
  .trust-card__stars .on { fill: CanvasText; stroke: CanvasText; }
}
/* ── /PR-3 ── */
/* ═══ /3 ═══ */

/* ═══ 4 · services, how it works (P11 PR-1) ═════════════════════════════════════════════════════════════════ */
.section--tint { background: var(--bg-2); }
.section-head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.section-lead { margin-block-start: 12px; color: var(--text-2); font-size: clamp(16px, 1.4vw, 18px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.svc-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line);
  border-radius: var(--as-radius-20); background: var(--surface); box-shadow: var(--shadow-s);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.svc-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow-m); }
.svc-card h3 { margin-block-start: 6px; font-size: 21px; }
.svc-card__what { color: var(--text); font-weight: 500; }
.svc-card__why { color: var(--muted); }
.checks { display: grid; gap: 8px; margin-block-start: 4px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 15px; }
.checks .icon { width: 18px; height: 18px; margin-block-start: 3px; color: var(--ok); stroke-width: 2.4; }
.svc-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-block-start: auto;
  padding-block-start: 12px; }
.svc-card__link, .link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--brand-text); font-weight: 600; text-decoration: none; }
.svc-card__link:hover, .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.svc-card__link .icon, .link-arrow .icon { width: 18px; height: 18px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.step { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: var(--as-radius-20);
  background: var(--surface); counter-increment: step; }
.step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 51px;
  inset-inline-start: calc(100% + 2px); width: 20px; border-block-start: 2px dashed var(--line-2); }
.step__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--as-radius-14);
  background: var(--brand-soft); color: var(--on-brand-soft); }
.step__icon .icon { width: 24px; height: 24px; }
.step h3 { display: flex; align-items: baseline; gap: 10px; margin-block-start: 18px; font-size: 19px; }
.step h3::before { content: counter(step); display: inline-grid; place-items: center; flex: none; width: 26px;
  height: 26px; border-radius: 50%; background: var(--brand); color: var(--on-brand);
  font: 700 14px/1 var(--font-body); }
.step p { margin-block-start: 8px; color: var(--text-2); }
.how__more { margin-block-start: 28px; text-align: center; }
.svc-card__actions .btn { white-space: normal; text-align: center; }
/* the Guide link on its own line in every card, so the three primary buttons line up (the selfie card has two
   download links) */
.svc-card__actions > a[href^="/docs#"] { flex-basis: 100%; }
@media (max-width: 1023px) {
  .svc-grid { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
  .svc-grid, .steps { gap: 16px; }
  .svc-card, .step { padding: 22px; }
}
@media (max-width: 759px) {
  .svc-grid, .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
}
/* ═══ /4 ═══ */

/* ═══ 5 · news, pricing (P11 PR-1) ═══════════════════════════════════════════════════════════════════════════ */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
  margin-block-start: 28px; }
.news-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--as-radius-16); background: var(--surface); }
.news-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--as-navy-900); overflow: hidden; }
.news-card__media img, .news-card__media iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }
.news-card__play, .news-card__poster { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; }
.news-card__play img { position: absolute; inset: 0; }
.news-card__play .play { position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: var(--as-brand-600); }
.news-card__hint { font-size: 13px; text-decoration: underline; }
.news-card__body { display: grid; gap: 8px; padding: 20px 22px 22px; }
.news-card__date { color: var(--muted); font-size: 13px; }
.news-card__title { font-size: 18px; }
.news-card__summary, .news-card__text { color: var(--text-2); overflow-wrap: anywhere; }
.news-card__more summary { color: var(--brand-text); font-weight: 600; cursor: pointer; }
.news-card__text :is(ul, ol) { padding-inline-start: 20px; list-style: revert; }
.news-card__links { display: grid; gap: 6px; font-size: 14.5px; }
.offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  max-width: 1100px; margin: 0 auto 28px; padding: 16px 20px; border: 1px solid var(--brand);
  border-radius: var(--as-radius-16); background: var(--brand-soft); }
.offer__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-width: 0; }
.offer__tag, .plan__promo { padding: 2px 10px; border-radius: var(--as-radius-pill); background: var(--brand);
  color: var(--on-brand); font-size: 13px; font-weight: 700; }
.offer__desc { flex-basis: 100%; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.offer__code code { font-family: var(--as-font-mono); font-weight: 600; }
.offer__until, .plan__offer { color: var(--muted); font-size: 13.5px; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;
  max-width: 1100px; margin-inline: auto; padding-block-start: 12px; }
.plan { position: relative; display: grid; grid-row: span 9; grid-template-rows: subgrid; row-gap: 0; padding: 28px;
  border: 1px solid var(--line); border-radius: var(--as-radius-20); background: var(--surface);
  box-shadow: var(--shadow-s); }
.plan--featured { border: 2px solid var(--brand); box-shadow: var(--shadow-l); transform: translateY(-8px); }
.plan__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 20px; }
.plan__tag { padding: 4px 10px; border-radius: var(--as-radius-pill); background: var(--brand); color: var(--on-brand);
  font: 700 12px/1.3 var(--font-body); }
.plan__price { display: flex; flex-wrap: wrap; align-items: last baseline; gap: 4px 8px; margin-block-start: 18px; }
.plan__amount { color: var(--text); font: 800 40px/1.05 var(--font-display); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; }
.plan__amount--ask { font-size: 24px; }
.plan__currency { color: var(--text-2); font-size: 15px; font-weight: 700; }
.plan__period { color: var(--muted); font-size: 15px; }
.plan__was { display: block; margin-block-end: 4px; color: var(--muted); font-size: 16px; font-weight: 500; }
.plan__offer { margin-block-start: 8px; }
.plan__desc { margin-block-start: 10px; color: var(--text-2); font-size: 15px; }
.plan__features { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px;
  margin-block-start: 20px; padding-block-start: 20px; border-block-start: 1px solid var(--line); }
.plan__features li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 12px; color: var(--text-2); font-size: 15px; }
.plan__features strong { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700; }
.plan__none { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; }
.plan__none::before { content: ""; flex: none; width: 10px; border-block-start: 2px solid currentColor; }
.plan__extras { display: grid; align-content: start; gap: 10px; margin-block-start: 16px; }
.plan__extras:empty { margin: 0; }
.plan__extra { display: flex; gap: 10px; color: var(--text-2); font-size: 15px; }
.plan__extra::before { content: ""; flex: none; width: 12px; height: 6px; margin-block-start: 7px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.plan__info { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-2);
  border-radius: 50%; color: var(--brand-text); font: 700 13px/1 var(--font-body); }
.plan__info:hover, .plan__info[aria-expanded="true"] { border-color: var(--brand); background: var(--brand-soft);
  color: var(--on-brand-soft); }
.plan__note { margin-block-start: 16px; padding: 8px 12px; border-radius: var(--as-radius-10);
  background: var(--brand-soft); color: var(--text-2); font-size: 14px; }
.plan > .btn { align-self: end; margin-block-start: 24px; }
.plan--ask { grid-row: auto; display: flex; flex-direction: column; align-items: center; gap: 16px;
  grid-column: 1 / -1; justify-self: center; width: min(100%, 560px); text-align: center; }
.plans-peruse { max-width: 760px; margin: 28px auto 0; color: var(--text-2); text-align: center; text-wrap: balance; }
.plans-peruse a { font-weight: 600; }
.plans-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-block-start: 28px;
  color: var(--muted); font-size: 14px; }
.plans-notes li { display: inline-flex; align-items: center; gap: 8px; }
.plans-notes li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); }
@media (max-width: 759px) {     /* a left-aligned list (the bullet beside its first line), centred as a block */
  .plans-notes { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%;
    margin-inline: auto; }
  .plans-notes li { align-items: flex-start; }
  .plans-notes li::before { margin-block-start: .6em; }
}
@media (max-width: 899px) {     /* phones and tablets: one centred column, the raised card first (plans.js) */
  .plans-grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .plan--featured { transform: none; }
}
/* ═══ /5 ═══ */

/* ═══ 6 · FAQ, final band (P11 PR-1) ═════════════════════════════════════════════════════════════════════════ */
.faq { max-width: calc(860px + 2 * var(--gutter)); }
.faq__list { display: grid; gap: 12px; }
.faq__list details { border: 1px solid var(--line); border-radius: var(--as-radius-16); background: var(--surface); }
.faq__list details[open] { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px;
  padding: 14px 20px; color: var(--text); font-weight: 600; cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-block-start: -4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.faq__list details[open] summary::after { margin-block-start: 4px; transform: rotate(-135deg); }
.faq__list details p { padding: 0 20px 18px; color: var(--text-2); }
.band { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px);
  border-radius: var(--as-radius-30); background: linear-gradient(135deg, var(--as-brand-600), var(--as-brand-800));
  color: #fff; text-align: center; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(80% 90% at 50% 100%, black, transparent); }
.band h2 { color: #fff; }
.band__lead { max-width: 560px; margin: 12px auto 0; color: color-mix(in srgb, #fff 88%, transparent); }
.band .btn-row { justify-content: center; margin-block-start: 28px; }
.btn--light { background: #fff; color: var(--as-brand-700); }
.btn--light:hover { background: var(--as-brand-50); }
.band__login { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; color: #fff;
  font-weight: 600; text-underline-offset: 4px; }
.band :focus-visible { outline-color: #fff; }
/* the download gate's dialog (S2/gate.js) */
.gate { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line);
  border-radius: var(--as-radius-20); background: var(--surface); color: var(--text); box-shadow: var(--shadow-l); }
.gate::backdrop { background: color-mix(in srgb, var(--as-navy-950) 55%, transparent); }
.gate__body { display: grid; gap: 12px; padding: 32px 28px 28px; text-align: center; }
.gate__body h2 { font-size: 22px; }
.gate__body p { color: var(--text-2); }
.gate__actions { display: grid; gap: 10px; margin-block-start: 8px; }
.gate__close { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--muted); font-size: 24px; }
.gate__close:hover { background: var(--brand-soft); color: var(--text); }
/* ═══ /6 ═══ */

/* ═══ 7 · footer, help line, theme control (P11 PR-1; PR-0's working base) ═════════════════════════════════ */
.site-footer { padding-block: 56px 32px; border-block-start: 1px solid var(--line); background: var(--bg-2);
  color: var(--text-2); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.footer-about { margin-block-start: 12px; max-width: 34ch; color: var(--muted); }
.footer-col h2 { margin-block-end: 12px; font-size: 15px; }
.footer-col li + li { margin-block-start: 8px; }
.footer-col a, .footer-help a, .footer-legal-links a { color: var(--text-2); }
.footer-col a, .footer-legal-links a { text-decoration: none; }
.footer-col a:hover, .footer-legal-links a:hover { text-decoration: underline; }
.footer-col a:hover, .footer-help a:hover, .footer-legal-links a:hover { color: var(--brand-text); }
.ext { display: inline-flex; align-items: center; gap: 4px; }
.icon--sm { width: 14px; height: 14px; }
.footer-help { margin-block-start: 32px; padding: 16px 20px; border: 1px solid var(--line);
  border-radius: var(--as-radius-14); background: var(--surface); line-height: 2; }
.footer-help__lead { color: var(--text); font-weight: 600; }
.footer-help__sep { padding-inline: 4px; color: var(--muted); }
.footer-help a { display: inline-block; }     /* a line wraps between the links, not inside one */
@media (max-width: 559px) {     /* a phone: one item per line, no stray separator */
  .footer-help__sep { display: none; }
  .footer-help a[href^="/"] { display: block; inline-size: fit-content; }
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px;
  margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--line);
  color: var(--muted); font-size: 14px; }
.footer-legal { max-width: 70ch; }
.footer-bottom__end { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.theme-control { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 4px;
  border: 1px solid var(--line-2); border-radius: var(--as-radius-12); }
.theme-control legend { float: inline-start; padding-inline: 8px 4px; color: var(--muted); }
.theme-control label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px;
  border-radius: var(--as-radius-8); cursor: pointer; }
.theme-control label:has(input:checked) { background: var(--brand-soft); color: var(--on-brand-soft); }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom__end { align-items: flex-start; }
}
/* ═══ /7 ═══ */

/* ═══ 8 · install button and dialog (P11 PR-2) ══════════════════════════════════════════════════════════════ */
.nav-install .icon { width: 18px; height: 18px; }
.install-dialog { box-sizing: border-box; width: min(460px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--as-radius-16);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-l); }
.install-dialog::backdrop { background: color-mix(in srgb, var(--as-navy-900) 60%, transparent); }
.install-dialog__body { display: grid; gap: 16px; padding: 24px; }
.install-dialog__head { display: flex; align-items: center; gap: 12px; }
.install-dialog__head img { width: 40px; height: 40px; }
.install-dialog__head h2 { font-size: 22px; }
.install-dialog__lead { color: var(--text-2); }
.install-steps { display: grid; gap: 10px; margin-block-start: 14px; counter-reset: install-step; }
.install-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--as-radius-12); background: var(--bg-2);
  counter-increment: install-step; }
.install-steps .icon { box-sizing: border-box; width: 40px; height: 40px; padding: 9px;
  border-radius: var(--as-radius-10); background: var(--brand-soft); color: var(--on-brand-soft); }
.install-steps strong { display: block; font-weight: 600; line-height: 1.4; }
.install-steps strong::before { content: counter(install-step) ". "; color: var(--brand-text); }
.install-steps strong + span { display: block; margin-block-start: 2px; color: var(--muted); font-size: 14px; }
.install-dialog__actions { justify-content: flex-end; }
@media (forced-colors: active) {
  .install-steps li { border-color: CanvasText; }
}
/* ═══ /8 ═══ */

/* ═══ 9 · offline page (P11 PR-2) ═══════════════════════════════════════════════════════════════════════════ */
.offline { display: grid; justify-items: center; gap: 12px; max-width: 560px; padding-block: 96px;
  text-align: center; }
.offline h1 { font-size: clamp(28px, 4vw, 40px); }
.offline p { color: var(--muted); }
.offline__logo { width: 56px; height: 56px; margin-block-end: 8px; }
.offline__more { font-family: var(--as-font-arabic); }
.offline__retry { margin-block-start: 16px; }
/* ═══ /9 ═══ */