/* ==========================================================================
   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)
     · 10 promotions: the top bar's offer, the cards' prices and countdowns (P14 UC)
   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);
  --deal: var(--as-warn-700);               /* P14: an offer's badge, its text --on-deal (5.4:1, D-522) */
  --on-deal: var(--as-neutral-0);
  --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);
  --deal: var(--as-warn-300);               /* 11.7:1 with --on-deal */
  --on-deal: var(--as-night-950);
  --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);
    --deal: var(--as-warn-300);
    --on-deal: var(--as-night-950);
    --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)); }
.nobr { white-space: nowrap; }        /* main.js glueDash(): "Liveness -" never split, no line starts with "-" */
.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,
.mobile-menu nav a[aria-current="page"] { 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-custom { max-width: 60ch; margin: 28px auto 0; color: var(--text-2); 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%; }
/* three cards side by side: their six rows (logo, title, what, why, checks, actions) line up across the cards, as
   the plans' do, so the primary buttons share one line even where the selfie card's links wrap (AR, UR, EN 1024) */
@media (min-width: 1024px) {
  .svc-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .svc-card__actions { margin-block-start: 0; align-content: flex-start; }
}
@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; }
.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__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 > .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); }
.faq__list .faq__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-block-start: -10px;
  padding-block-end: 8px; }
/* inline-block with padding: a 44 px target that is not a flex container (a flex item drops the spaces around the
   name's glued dash, main.js glueDash) */
.faq__links a { display: inline-block; padding-block: 10px; font-weight: 600; }
.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: 767px) {     /* a phone or a narrow tablet: 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: 1199px) {    /* the end column always under the disclaimer (not only where a language wraps it):
                                   its rows start at the edge, none ragged (P11.0.1) */
  .footer-bottom { flex-direction: column; }
  .footer-bottom__end { align-items: flex-start; }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* the support chat's launcher (widget.css: fixed, 60 px, 16 px from the bottom right): room for it under the last
   row and under a focused control, and out of the way while the mobile menu covers the page (P11.0.1) */
html:has(.asw-launcher:not([hidden])) { scroll-padding-block-end: 92px; }
html:has(.asw-launcher:not([hidden])) .site-footer { padding-block-end: 108px; }
html.menu-open .asw-launcher { visibility: hidden; }
/* ═══ /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 ═══ */

/* ═══ 10 · promotions (P14 UC; D-522, D-523): news.js and promo.js ════════════════════════════════════════════════ */
/* the top bar's offer (#promoBar) takes the news bar's place: one line of 40 px at every width, under the nav and
   over the hero's top padding (at least 40 px) — it moves nothing when it comes (no layout shift: CLS), the header
   keeps its height and html.has-news-bar its offsets (the mobile menu, in-page jumps start below it). Below 600 px it
   says the deal and the time left: the title, the button's words and "Ends in" are read, not shown */
.promo-bar { position: absolute; inset-block-start: 100%; inset-inline: 0;
  background: linear-gradient(90deg, var(--as-brand-800), var(--as-brand-600)); color: #fff; font-size: 14px; }
.promo-bar__inner { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.promo-bar .icon { flex: none; width: 18px; height: 18px; }
.promo-bar__link { display: flex; flex: 1 1 auto; align-items: baseline; gap: 12px; min-width: 0; color: #fff;
  text-decoration: none; }
.promo-bar__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-bar__title { font-weight: 700; }
.promo-bar__deal { margin-inline-start: 6px; }
.promo-bar__cta { flex: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.promo-bar__link:hover .promo-bar__text { text-decoration: underline; text-underline-offset: 3px; }
.promo-bar__clock { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 2px 10px;
  border-radius: var(--as-radius-pill); background: color-mix(in srgb, #fff 16%, transparent);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.promo-bar__clock .icon { width: 16px; height: 16px; }
.promo-bar__close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; }
.promo-bar__close:hover { background: color-mix(in srgb, #fff 14%, transparent); }
.promo-bar :focus-visible { outline-color: #fff; }
/* the open mobile menu covers the offer (main.js makes it inert with the page behind) */
html:has(#promoBar:not([hidden])) .mobile-menu { inset-block-start: var(--header-h); }
@media (max-width: 599px) {
  .promo-bar { font-size: 13px; }
  .promo-bar__inner { gap: 8px; }
  .promo-bar__title, .promo-bar__cta, .promo-bar .clock-words { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .promo-bar__deal { margin: 0; text-decoration: underline; text-underline-offset: 3px; }
  .promo-bar__clock { padding-inline: 8px; }
  .promo-bar__clock .icon { display: none; }
}
@media (max-width: 399px) {
  .promo-bar__inner > .icon { display: none; }
}
/* a card's offer (promo.js offers): the struck price above the offer's (.plan__was), then the badge and the
   countdown under the price */
.plan__offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-block-start: 10px; }
.plan__deal { padding: 3px 10px; border-radius: var(--as-radius-pill); background: var(--deal); color: var(--on-deal);
  font: 700 12.5px/1.3 var(--font-body); }
.plan__clock { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13.5px;
  font-variant-numeric: tabular-nums; }
.plan__clock .icon { width: 16px; height: 16px; }
@media (forced-colors: active) {
  .plan__deal, .promo-bar__clock { border: 1px solid CanvasText; }
}
/* ═══ /10 ═══ */