/* ============================================================
   Nordbox — document pages (app support, privacy, copyright)

   Long-form reading, on top of main.css. Nothing here sets a
   font family: the two tokens in main.css already swap to Cairo
   and IBM Plex Sans Arabic on /ar, and a hardcoded family would
   silently stay Latin.
   ============================================================ */

.doc-hero {
  padding: calc(var(--nav-h) + clamp(52px, 9vw, 96px)) 0 clamp(28px, 4vw, 44px);
  background: var(--night);
  color: var(--paper);
}
.doc-hero h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.4rem); }
.doc-hero .lead { margin-top: 20px; max-width: 52ch; }
.doc-hero .stamp {
  margin-top: 26px;
  font-size: 13.5px;
  color: rgba(250, 250, 249, 0.5);
}

/* the three app pages link to each other from every one of them */
.doc-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}
.doc-switch a {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 17px;
  border-radius: 99px;
  border: 1px solid rgba(250, 250, 249, 0.16);
  color: rgba(250, 250, 249, 0.78);
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease-spring);
}
.doc-switch a:hover { background: rgba(250, 250, 249, 0.08); color: var(--paper); transform: translateY(-2px); }
.doc-switch a[aria-current="page"] { background: var(--grad); border-color: transparent; color: #fff; }

/* ---------- the article ---------- */
.doc {
  padding: clamp(48px, 7vw, 84px) 0 clamp(64px, 9vw, 110px);
}
.doc-body { max-width: 68ch; }
.doc-body h2 {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  margin: clamp(42px, 5vw, 58px) 0 14px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 {
  font-size: 1.08rem;
  margin: 28px 0 10px;
}
.doc-body p { color: var(--ink-2); margin-bottom: 14px; }
.doc-body p.big {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);
  color: var(--ink);
  line-height: 1.55;
}
.doc-body ul {
  margin: 0 0 16px;
  padding-inline-start: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.doc-body ul li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--ink-2);
}
.doc-body ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad);
}
.doc-body a:not(.btn) {
  color: var(--north-2);
  font-weight: 500;
  box-shadow: inset 0 -1px 0 rgba(61, 93, 138, 0.35);
  transition: box-shadow 0.25s, color 0.25s;
}
.doc-body a:not(.btn):hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--north-1); }
.doc-body strong { color: var(--ink); font-weight: 600; }

/* a short, plain-language summary above a long section */
.doc-note {
  margin: 0 0 30px;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.doc-note p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.doc-note p + p { margin-top: 10px; }
.doc-note b { color: var(--ink); }

/* ---------- contact cards (support page) ---------- */
.reach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: clamp(36px, 5vw, 54px);
}
@media (max-width: 720px) { .reach { grid-template-columns: 1fr; } }
/* One card, on its own: WhatsApp is the only way in now. */
.reach.solo { grid-template-columns: 1fr; }
.reach-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.reach-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.reach-card .ic {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(127, 179, 224, 0.16);
  color: var(--north-2);
}
.reach-card.wa .ic { background: rgba(37, 211, 102, 0.14); color: #1f9d54; }
.reach-card h3 { font-size: 1.02rem; margin-bottom: 3px; }
.reach-card span { font-size: 14.5px; color: var(--ink-2); }

/* ---------- questions ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: clip;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 14px;
}
html[lang="ar"] .faq summary { letter-spacing: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-inline-start: auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .ans { padding: 0 22px 20px; }
.faq .ans p { font-size: 15px; color: var(--ink-2); margin-bottom: 10px; }
.faq .ans p:last-child { margin-bottom: 0; }

/* ---------- support form ---------- */
.sform {
  margin-top: clamp(40px, 6vw, 64px);
  background: var(--night-2);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  color: var(--paper);
}
.sform h2 { color: var(--paper); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: 8px; }
.sform > p, .sform-inner > p { color: rgba(250, 250, 249, 0.6); font-size: 15px; margin-bottom: 26px; }
.sform .q-grid-2 { margin-bottom: 14px; }
.sform .q-textarea { margin-bottom: 18px; }
.sform .row-end { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* the bot trap. Never moved off-canvas with a big negative offset: in RTL that
   is a real overflow, and the whole page gains ten thousand pixels of scroll. */
.sform .hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.sform .note { font-size: 13px; color: rgba(250, 250, 249, 0.4); margin-top: 16px; }
.sform.sent .sform-inner { display: none; }
.sform-done { display: none; text-align: center; padding: 12px 0; }
.sform.sent .sform-done { display: block; }
.sform-done .check {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--grad);
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.sform-done h3 { font-size: 1.5rem; color: var(--paper); margin-bottom: 8px; }
.sform-done p { color: rgba(250, 250, 249, 0.6); max-width: 40ch; margin-inline: auto; }
@media (max-width: 620px) { .q-grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   The support form — bug, feature, or something else

   One form with three shapes. The visitor picks what they are
   here for first, and only the fields that matter to that answer
   are shown. A bug report asks for the version and the steps; a
   feature request would be rude to ask the same.
   ============================================================ */

.sform fieldset { border: 0; margin: 0 0 4px; padding: 0; }
.sform legend, .f-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.55);
  margin-bottom: 12px;
  padding: 0;
}
html[lang="ar"] .sform legend, html[lang="ar"] .f-label { letter-spacing: 0; }

/* ---------- what are you here for ---------- */
.kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
@media (max-width: 720px) { .kinds { grid-template-columns: 1fr; } }
.kind {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: start;
  padding: 16px 17px;
  border-radius: 16px;
  border: 1.5px solid rgba(250, 250, 249, 0.16);
  background: rgba(250, 250, 249, 0.04);
  color: rgba(250, 250, 249, 0.86);
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.kind:hover { border-color: rgba(250, 250, 249, 0.4); transform: translateY(-2px); }
.kind .ic {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(127, 179, 224, 0.16);
  color: var(--north-1);
  transition: background 0.25s, color 0.25s;
}
.kind b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--paper);
}
html[lang="ar"] .kind b { letter-spacing: 0; }
.kind small { display: block; font-size: 13px; line-height: 1.45; color: rgba(250, 250, 249, 0.5); margin-top: 2px; }
.kind[aria-pressed="true"] {
  border-color: transparent;
  background: rgba(127, 179, 224, 0.14);
  box-shadow: 0 0 0 1.5px var(--north-1);
}
.kind[aria-pressed="true"] .ic { background: var(--grad); color: #fff; }

/* ---------- fields ---------- */
.f-row { margin-bottom: 14px; }
.f-row:last-child { margin-bottom: 0; }
.sform .q-textarea { margin-bottom: 0; }

.q-select {
  width: 100%;
  background: rgba(250, 250, 249, 0.05);
  border: 1px solid rgba(250, 250, 249, 0.15);
  border-radius: 14px;
  color: var(--paper);
  font: inherit;
  font-size: 15.5px;
  padding: 15px 44px 15px 17px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fafaf9' stroke-opacity='.55' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color 0.25s, background-color 0.25s;
}
[dir="rtl"] .q-select { padding: 15px 17px 15px 44px; background-position: left 16px center; }
.q-select:focus { outline: none; border-color: var(--north-1); background-color: rgba(250, 250, 249, 0.08); }
.q-select.err { border-color: #e07f7f; }
/* The list itself is drawn by the operating system, which uses the page's
   colours for it — on a dark card that leaves white text on white. */
.q-select option { background: #1c2430; color: #fafaf9; }

/* ---------- phone, with its country code ---------- */
.phone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 10px;
}
@media (max-width: 460px) { .phone { grid-template-columns: 1fr; } }
/* A phone number reads left to right in every language, so the whole control
   stays LTR even on the Arabic side. Without this the space reserved for the
   dial code ends up on the opposite edge from the dial code itself. */
.phone .num-wrap { position: relative; display: block; direction: ltr; }
.phone .dial {
  position: absolute;
  inset-inline-start: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(250, 250, 249, 0.55);
  pointer-events: none;
  direction: ltr;
}
/* The gap for the dial code is set again in JS from the real width of
   the text, because +1 and +961 are not the same width. */
.phone .num { padding-inline-start: 72px; direction: ltr; text-align: start; }

/* ---------- the parts that come and go ---------- */
.only { display: none; }
.only.on { display: block; animation: fieldIn 0.35s var(--ease-out); }
@keyframes fieldIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.f-hint { font-size: 13px; color: rgba(250, 250, 249, 0.42); margin-top: 8px; }
.sform hr {
  border: 0;
  border-top: 1px solid rgba(250, 250, 249, 0.12);
  margin: 26px 0;
}

/* A link straight to a section — the kind App Review is sent to — must land
   with the heading visible, not tucked under the fixed menu bar. */
.doc-body [id] { scroll-margin-top: calc(var(--nav-h, 60px) + 28px); }

/* ============================================================
   Privacy: one policy per app

   /apps/privacy opens on a choice, not a wall of text: every app
   we publish, by its icon and its name, each leading to its own
   policy. The last card is "Other apps", which leads down the
   same page to the policy that covers everything else — kept on
   this URL because the apps and App Review already link here.
   ============================================================ */

.policy-intro { max-width: 60ch; margin-bottom: clamp(22px, 3vw, 30px); }
.policy-intro h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
.policy-intro p { color: var(--ink-2); margin-top: 8px; }

.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 920px;
}
@media (max-width: 700px) { .policy-grid { grid-template-columns: 1fr; } }

.policy-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 16px 16px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
[dir="rtl"] .policy-card { padding: 16px 16px 16px 20px; }
.policy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.policy-card:focus-visible { outline: 2.5px solid var(--north-2); outline-offset: 3px; }

.pc-text { flex: 1; min-width: 0; }
.pc-text b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
html[lang="ar"] .pc-text b { letter-spacing: 0; }
.pc-text small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-3); }

.pc-go {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2);
  color: var(--ink-2);
  transition: background 0.3s, color 0.3s, transform 0.35s var(--ease-spring);
}
.policy-card:hover .pc-go { background: var(--ink); color: var(--paper); transform: translateX(3px); }
[dir="rtl"] .pc-go svg { transform: scaleX(-1); }
[dir="rtl"] .policy-card:hover .pc-go { transform: translateX(-3px); }
/* "Other apps" leads down the page, not sideways */
.policy-card.other .pc-go svg { transform: rotate(90deg); }
.policy-card.other:hover .pc-go { transform: translateY(3px); }

/* App icons. A Mac icon file carries its own rounded shape and a clear
   margin; an iPhone icon is a plain square the phone rounds itself. The
   square ones are drawn at the size a Mac icon's body takes up, with the
   corners rounded here, so a row of mixed icons lines up. */
.pc-art {
  width: 60px; aspect-ratio: 1; flex-shrink: 0;
  display: grid; place-items: center;
}
.pc-art img { width: 100%; height: 100%; display: block; }
.pc-art.square img,
.pc-art.mark > span {
  width: 80.5%; height: 80.5%;
  border-radius: 22.5%;
  box-shadow: 0 1px 2px rgba(16, 21, 29, 0.1), 0 6px 14px rgba(16, 21, 29, 0.14);
}
.pc-art.mark > span {
  display: grid; place-items: center;
  background: var(--night);
  color: var(--north-1);
}

/* the heading the "Other apps" card leads to */
.other-head {
  max-width: 68ch;
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: clamp(36px, 5vw, 52px);
  border-top: 1px solid var(--line);
  margin-bottom: clamp(26px, 3.5vw, 36px);
  scroll-margin-top: calc(var(--nav-h, 60px) + 20px);
}
.other-head h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); margin-top: 10px; }
.other-head > p { color: var(--ink-2); margin-top: 10px; }
.other-head .stamp { font-size: 13.5px; color: var(--ink-3); margin-top: 12px; }

/* ---------- one app's own policy page ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: rgba(250, 250, 249, 0.62);
  transition: color 0.25s;
}
.back-link:hover { color: var(--paper); }
[dir="rtl"] .back-link svg { transform: scaleX(-1); }
.ap-head {
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 24px);
  margin-top: clamp(26px, 4vw, 36px);
  margin-bottom: clamp(10px, 2vw, 20px);
}
.ap-head .pc-art { width: clamp(76px, 10vw, 104px); }
.ap-head h1 { margin-top: 6px; }
.doc-pending {
  max-width: 60ch;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--ink-2);
}
.doc-pending a { color: var(--north-2); font-weight: 600; }

/* numbered lists and tables, for the per-app policies */
.doc-body ol {
  margin: 0 0 16px;
  padding-inline-start: 24px;
  display: grid;
  gap: 10px;
  color: var(--ink-2);
}
.doc-body ol li::marker { color: var(--north-2); font-weight: 600; }
.doc-table {
  overflow-x: auto;
  margin: 6px 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}
.doc-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc-table th,
.doc-table td {
  text-align: start;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.doc-table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper-2);
}
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { min-width: 9em; }
.doc-note ul, .doc-note ol { margin-bottom: 10px; }
/* A web address in a table cell is one long word; without this it refuses to
   wrap and squeezes every other column. */
.doc-table a { overflow-wrap: break-word; }