:root {
  --canvas: #F4F6FB;
  --surface: #FFFFFF;
  --surface-muted: #F8FAFC;
  --border: #E7EAF3;
  --ink: #1E293B;
  --ink-soft: #475569;
  --muted: #94A3B8;
  --primary: #4F46E5;
  --primary-alt: #7C3AED;
  --link: #3B5BDB;
  --green: #16A34A;
  --amber: #F59E0B;
  --danger: #E11D48;
  --radius: 16px;
  --header-h: 66px;
  --guide-bar-h: 54px; /* measured at runtime by site.js */
  --font-body: Cairo, Inter, system-ui, sans-serif;
  --font-display: Cairo, Inter, system-ui, sans-serif;
  --shadow: 0 8px 18px rgba(30, 41, 59, 0.06);
  /* Per-script leading. Latin metrics clip Devanagari matras and crowd
     Arabic-script lines. */
  --lh-body: 1.55;
  --lh-head: 1.08;
}
/* Arabic and Urdu both render in Cairo (ac407ce): same metrics, same leading. */
html[lang="ar"], html[lang="ur"] { --lh-head: 1.3; --lh-body: 1.7 }
html[lang="hi"] {
  --font-body: "Noto Sans Devanagari", Inter, sans-serif;
  --font-display: "Noto Sans Devanagari", Inter, sans-serif;
  --lh-body: 1.75;
  --lh-head: 1.4;
}

* { box-sizing: border-box }
/* The UA sets [hidden] { display: none }, which ANY author display rule beats.
   Everything hidden here is toggled by the .hidden attribute, so pin it. */
[hidden] { display: none !important }
html, body { margin: 0 }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--header-h);
}
a { color: inherit; text-decoration: none }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 800;
  line-height: var(--lh-head); margin: 0;
}
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px }
.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; font-weight: 700; transition: top .15s ease;
}
.skip:focus { top: 10px }

header {
  position: fixed; inset-inline: 0; top: 0; height: var(--header-h);
  z-index: 50; display: flex; align-items: center;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
}
.bar { display: flex; align-items: center; gap: 16px; height: var(--header-h); width: 100% }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; background: none; border: 0; color: inherit; cursor: pointer; font-family: inherit }
.brand img { width: 36px; height: 36px; border-radius: 10px }
.spacer { flex: 1 }
.nav { display: flex; gap: 26px; font-weight: 600; font-size: 15px; color: var(--ink-soft) }
.nav a, .nav button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0 }
.nav a:hover, .nav button:hover { color: var(--primary) }
.nav [aria-current="page"] { color: var(--primary); font-weight: 800 }

/* Language picker — a button + listbox, because a native <select> popup cannot
   be styled and rendered the six scripts in the OS font at OS size. */
.langpick { position: relative }
.langpick-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: 999px; padding: 8px 14px;
  font-weight: 700; font-size: 13px; font-family: var(--font-body);
  background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.langpick-btn:hover { border-color: var(--primary); color: var(--primary) }
.langpick-btn .chev { transition: transform .18s ease }
.langpick-btn[aria-expanded="true"] .chev { transform: rotate(180deg) }
.langpick-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 220px; padding: 6px; margin: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 14px 34px rgba(30, 41, 59, .16);
}
.langpick-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 15px;
}
.langpick-list li:hover, .langpick-list li.cursor { background: var(--surface-muted) }
.langpick-list li[aria-selected="true"] { color: var(--primary) }
.langpick-list li[aria-selected="true"]::after { content: "\2713"; font-weight: 800 }
/* Each option is written in its own script, so it needs its own font. */
.langpick-list li[data-lang="hi"] { font-family: "Noto Sans Devanagari", Inter, sans-serif }
.langpick-list li[data-lang="ar"],
.langpick-list li[data-lang="ur"] { font-family: Cairo, sans-serif }
.langpick-list li[data-lang="en"],
.langpick-list li[data-lang="es"],
.langpick-list li[data-lang="pt"] { font-family: Inter, system-ui, sans-serif }

.burger {
  display: none; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: var(--surface-muted); place-items: center; cursor: pointer; color: var(--ink);
}
@media (max-width: 760px) {
  .nav { display: none }
  /* The drawer already carries a picker; two on one bar is noise. */
  header .langpick { display: none }
  .burger { display: grid }
}

.drawer-overlay { position: fixed; inset: 0; background: rgba(30, 41, 59, .4); z-index: 70 }
#site-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: min(320px, 86vw);
  background: var(--surface); z-index: 80; padding: 20px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
}
#site-drawer .drawer-nav { display: flex; flex-direction: column; gap: 12px; font-weight: 700 }
#site-drawer .drawer-nav button { background: none; border: 0; text-align: start; font: inherit; cursor: pointer; padding: 10px 8px; border-radius: 12px; color: inherit }
#site-drawer .drawer-nav button:hover { background: var(--surface-muted) }
#site-drawer .drawer-nav [aria-current="page"] { background: rgba(79,70,229,.1); color: var(--primary) }
.drawer-close {
  align-self: end; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: var(--surface-muted); cursor: pointer; color: var(--ink); font-size: 20px; line-height: 1;
}

.hero { position: relative; padding: 64px 0 56px; overflow: hidden }
.glow { position: absolute; inset: 0; z-index: 0; pointer-events: none }
.glow::before {
  content: ""; position: absolute; width: 620px; height: 620px; inset-inline-end: -160px; top: -180px;
  background: radial-gradient(circle, rgba(79,70,229,.22), transparent 62%);
}
.glow::after {
  /* Kept fully inside the hero: .hero clips overflow, and a radial cut off
     mid-fade reads as a stray grey panel rather than a glow. */
  content: ""; position: absolute; width: 520px; height: 520px; inset-inline-start: -180px; bottom: 30px;
  background: radial-gradient(circle, rgba(22,163,74,.16), transparent 62%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; text-align: center } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--border); color: var(--primary); font-weight: 700; font-size: 13px;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 20px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(22,163,74,.18) }
.hero h1 { font-size: clamp(34px, 5.4vw, 58px); letter-spacing: -.02em }
.hero h1 .hl { color: var(--primary); position: relative; white-space: nowrap }
.hero h1 .hl::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .06em; height: .16em;
  background: rgba(22,163,74,.35); z-index: -1; border-radius: 3px;
}
.lede { font-size: clamp(16px, 2vw, 19px); color: var(--ink-soft); max-width: 34em; margin: 20px 0 30px }
@media (max-width: 900px) { .lede { margin-inline: auto } }
.refcode {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 10px 16px; border-radius: 12px; background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.35); width: fit-content;
}
.refcode-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; letter-spacing: 3px; direction: ltr }
@media (max-width: 900px) { .refcode { margin-inline: auto } }
.badges { display: flex; gap: 14px; flex-wrap: wrap }
@media (max-width: 900px) { .badges { justify-content: center } }
.badge { display: block; transition: transform .18s ease }
.badge:hover { transform: translateY(-3px) }
.badge img { height: 52px; display: block }
.badge.gp img { height: 56px; margin: -2px }

.stage-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 22px }
.phone {
  width: clamp(214px, 62vw, 252px); aspect-ratio: 1080/2340; background: #0c0b17;
  border-radius: 36px; padding: 10px; box-shadow: var(--shadow); position: relative;
}
.phone::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 20px; background: #0c0b17; border-radius: 0 0 14px 14px; z-index: 2;
}
.viewport { width: 100%; height: 100%; overflow: hidden; border-radius: 26px; direction: ltr; background: #fff }
.track { display: flex; height: 100%; will-change: transform; transition: transform .5s cubic-bezier(.22,.61,.36,1) }
.track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; background: #fff }
.cap { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); min-height: 1.2em; text-align: center }
.ctrls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 2px }
.arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer; display: grid; place-items: center; color: var(--ink);
}
/* "Previous" must point at the start edge, which flips with the writing direction. */
[dir="rtl"] .arrow svg { transform: scaleX(-1) }
.arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink) }
.dots { display: flex; gap: 8px }
.dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--border); cursor: pointer; padding: 0 }
.dots button.on { background: var(--primary); width: 26px; border-radius: 5px }

section { padding: 72px 0 }
.sec-head { text-align: center; max-width: 38em; margin: 0 auto 44px }
.sec-head h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.02em }
.sec-head p { color: var(--ink-soft); font-size: 17px; margin-top: 12px }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 540px) { .grid { grid-template-columns: 1fr } }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; opacity: 0; transform: translateY(18px); transition: .6s cubic-bezier(.22,.61,.36,1);
}
.card.in { opacity: 1; transform: none }
.card .ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  margin-bottom: 16px; background: rgba(79,70,229,.1); color: var(--primary);
}
.card:nth-child(3n+2) .ic { background: rgba(22,163,74,.12); color: var(--green) }
.card h3 { font-size: 19px; margin-bottom: 7px }
.card p { margin: 0; color: var(--ink-soft); font-size: 15px }

.band {
  background: var(--ink); color: #fff; border-radius: 30px; padding: 56px 40px;
  text-align: center; position: relative; overflow: hidden;
}
.band::before {
  content: ""; position: absolute; width: 460px; height: 460px; inset-inline-start: -120px; top: -160px;
  background: radial-gradient(circle, rgba(79,70,229,.5), transparent 60%);
}
.band::after {
  content: ""; position: absolute; width: 420px; height: 420px; inset-inline-end: -140px; bottom: -180px;
  background: radial-gradient(circle, rgba(22,163,74,.35), transparent 60%);
}
.band > * { position: relative; z-index: 1 }
.band h2 { font-size: clamp(26px, 4vw, 40px); color: #fff }
.band p { color: #c9c5e6; margin: 14px auto 26px; max-width: 30em }
.band .badges { justify-content: center }

footer { padding: 56px 0 40px; border-top: 1px solid var(--border); margin-top: 20px }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap }
.socials { display: flex; gap: 12px }
.socials a {
  width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); display: grid; place-items: center; color: var(--ink);
}
.socials a:hover { transform: translateY(-3px) }
.socials a.ig:hover { background: #E4405F; color: #fff; border-color: #E4405F }
.socials a.fb:hover { background: #1877F2; color: #fff; border-color: #1877F2 }
.socials a.yt:hover { background: #FF0000; color: #fff; border-color: #FF0000 }
.foot .copy { color: var(--ink-soft); font-size: 14px }

.prose { max-width: 760px; margin: 40px auto; padding: 0 20px }
.prose h1 { font-size: 1.8rem; letter-spacing: 0 }
.prose h2 { font-size: 1.25rem; margin-top: 2rem }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0 }
.prose .meta { color: var(--ink-soft) }
.prose ul { padding-inline-start: 1.2rem }
.prose li { margin: 0.4rem 0 }
.prose a { color: var(--primary) }

/* ---------- User Guide ---------- */
.guide { max-width: 1020px; margin: 36px auto 0; padding: 0 20px }
.guide-head h1 { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -.02em }
.guide-head .lede { margin: 16px 0 0; max-width: 46em }
@media (max-width: 900px) { .guide-head .lede { margin-inline: 0 } }
/* Sticky section bar. Sits under the fixed header and is the guide's only
   navigator. It wraps rather than scrolling sideways — an off-screen chip on a
   fixed bar is unreachable — so its height varies with width and language, and
   site.js measures it into --guide-bar-h for scroll-margin to use. */
.guide-bar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
}
.guide-tabs {
  max-width: 1020px; margin: 0 auto; padding: 9px 20px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.guide-tabs button {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 7px 13px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink-soft); cursor: pointer;
}
.guide-tabs button:hover { border-color: var(--primary); color: var(--primary) }
.guide-tabs button[aria-current="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.guide-tabs .n {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: var(--surface-muted); color: var(--ink-soft);
  font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 800; line-height: 1;
}
.guide-tabs button[aria-current="true"] .n { background: rgba(255,255,255,.24); color: #fff }
@media (max-width: 560px) {
  .guide-tabs { padding: 7px 16px; gap: 6px }
  .guide-tabs button { padding: 6px 11px; font-size: 13px }
  /* Position already conveys the order, and dropping the badge saves a whole
     wrapped row of a bar that is stuck to the top of a small screen. */
  .guide-tabs .n { display: none }
}

/* A link to another guide section, inline in the copy. */
.xref {
  border: 0; padding: 0; background: none; font: inherit; font-weight: 700;
  color: var(--primary); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: rgba(79,70,229,.35);
}
.xref:hover { text-decoration-color: var(--primary) }

.guide-section { margin: 56px 0; scroll-margin-top: calc(var(--header-h) + var(--guide-bar-h) + 18px) }
.guide-section > h2 { font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -.01em }
.sec-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.tier {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.tier.free { background: rgba(22,163,74,.13); color: #15803D }
.tier.pro { background: rgba(79,70,229,.12); color: var(--primary) }
.tier.mixed { background: rgba(245,158,11,.16); color: #B45309 }
.sec-lede { color: var(--ink-soft); margin: 0 0 8px; max-width: 46em }

.step { display: grid; grid-template-columns: 1fr 250px; gap: 30px; align-items: start; margin: 30px 0 }
.step.noshot { grid-template-columns: 1fr }
@media (max-width: 820px) { .step, .step.noshot { grid-template-columns: 1fr } }
.step-body { min-width: 0 }
.step-title { display: flex; align-items: baseline; gap: 12px; font-size: 19px; font-weight: 800; font-family: var(--font-display); margin: 0 0 8px }
.step-n {
  flex: 0 0 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 800;
  font-family: Inter, system-ui, sans-serif; line-height: 1; align-self: start;
}
.step-body p { margin: 0 0 10px; color: var(--ink-soft) }
.step-body p:last-child { margin-bottom: 0 }
.step-body strong { color: var(--ink) }
/* In-app labels. Kept light: a whole paragraph of heavy chips is unreadable. */
.ui {
  font-weight: 700; font-size: .95em; background: var(--surface-muted);
  border-radius: 6px; padding: 0 5px; color: var(--ink); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--border);
}

figure.shot { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px }
@media (max-width: 820px) { figure.shot { align-items: flex-start } }
.shot .frame {
  width: 100%; max-width: 250px; aspect-ratio: 1080/2340; background: #0c0b17;
  border-radius: 30px; padding: 8px; box-shadow: var(--shadow); position: relative;
}
.shot .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 23px; display: block; background: #fff }
.shot figcaption { font-size: 13px; color: var(--muted); text-align: center; max-width: 250px }
@media (max-width: 820px) { .shot figcaption { text-align: start } }


.hint {
  border-inline-start: 4px solid var(--amber); background: #FEF4E2;
  padding: 14px 18px; margin: 26px 0 0;
  /* Logical radii so the flat edge stays with the coloured bar under RTL. */
  border-start-start-radius: 0; border-end-start-radius: 0;
  border-start-end-radius: var(--radius); border-end-end-radius: var(--radius);
}
.hint b { display: block; margin-bottom: 4px }

.faq { display: grid; gap: 10px; margin: 24px 0 0 }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 4px 18px;
}
.faq details[open] { border-color: var(--primary) }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; float: inline-end; font-weight: 800; color: var(--primary) }
.faq details[open] summary::after { content: "\2212" }
.faq p { margin: 0 0 14px; color: var(--ink-soft) }

.to-top {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink-soft);
}
.to-top:hover { color: var(--primary); border-color: var(--primary) }

.reveal { opacity: 0; transform: translateY(20px); animation: rise .8s cubic-bezier(.22,.61,.36,1) forwards }
.reveal.d1 { animation-delay: .08s } .reveal.d2 { animation-delay: .16s } .reveal.d3 { animation-delay: .24s }
@keyframes rise { to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
  .card { opacity: 1; transform: none }
}