/* bidi brand layer for the redesigned pages: the reference design's components (approved 15 October 2026).
   Taken from the reference package's site.css without its tokens (tokens.css holds them), its header and
   footer (menu.css holds the site's own) and its .wrap grid (tokens.css). Pages that follow the reference
   design load it after tokens.css; every size is a token. */

/* =====================================================================
   Components. Every size below is a token from the block above
   (SPACING.md sections 4-7). Raw px only for hairlines and artwork (section 11).
   ===================================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; text-wrap: balance; }
/* Running text never ends on a single word: pretty wrapping evens out the last lines */
p, li, small, .aside .item span, .howto span, .addon > div > span, .plans-foot > span { text-wrap: pretty; }
/* No weight of its own (:where), so a component's own shape and ring win: a focused pill stays a pill. */
:where(:focus-visible) { outline: 2px solid var(--cobalt-2); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--cobalt); color: #fff; }


/* Dirham sign (U+20C3). Drawn as a mask because most fonts lack the glyph.
   Swap for the official artwork before launch. Size and nudge are glyph metrics (em). */
.dh {
  display: inline-block; width: .74em; height: .74em; vertical-align: -.02em; margin-right: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' d='M7 3.5v17M7 3.5h3.5a8.5 8.5 0 0 1 0 17H7M2 9.5h17.5M2 14.5h17.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' d='M7 3.5v17M7 3.5h3.5a8.5 8.5 0 0 1 0 17H7M2 9.5h17.5M2 14.5h17.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.price .dh, .addon .p .dh { margin-right: var(--sp-4); }

/* Shared entrance: answers, panels, notices. Transform + opacity only. */
@keyframes ansIn { from { opacity: 0; transform: translateY(calc(-1 * var(--sp-8))); } to { opacity: 1; transform: none; } }
/* The open menu stays opaque and unrolls from the header edge, so the page never shows through it */
@keyframes menuIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* ---------- Buttons (section 7.1) ----------
   Hover fill and border live on ::before and only its opacity fades. Text colour is instant. */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: var(--h-md); padding: 0 var(--sp-16); border-radius: var(--r-pill);
  background: var(--raised); color: var(--text); border: 1px solid var(--line-2);
  font: var(--type-small); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: scale var(--dur-move) var(--spring), opacity var(--dur-fade) var(--ease-fade);
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--lift); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  opacity: 0; transition: opacity var(--dur-fade) var(--ease-fade);
}
.btn:hover::before { opacity: 1; }
.btn:active { scale: .96; transition-duration: var(--dur-press); }
.btn.primary { background: var(--pill); color: var(--pill-ink); border-color: transparent; }
.btn.primary::before { background: #fff; box-shadow: none; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost::before { background: rgba(255,255,255,.04); box-shadow: none; }
.btn.ghost:hover { color: var(--text); }
.btn.outline { background: transparent; color: var(--text); }
.btn.outline::before { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.btn.lg { height: var(--h-lg); padding: 0 var(--sp-24); font: var(--type-body); font-weight: 600; }
.btn .arr { transition: translate var(--dur-move) var(--spring); }
.btn:hover .arr { translate: var(--sp-4) 0; }
/* An arrow points the reading way: in Arabic (right to left) the glyph is mirrored and its nudge goes left. */
[dir="rtl"] .arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arr { translate: calc(-1 * var(--sp-4)) 0; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- Sliding pill (shared by nav, tabs and the FAQ) ----------
   The white pill sits above the labels and carries dark copies of them (.slider-ink),
   revealed by its own clip-path, so labels are never recoloured mid-slide. */
.slider {
  position: absolute; inset: 0; z-index: 2; background: var(--pill); opacity: 0; pointer-events: none;
  transition: clip-path var(--dur-move) var(--spring), opacity var(--dur-fade) var(--ease-fade);
}
.slider-ink { position: absolute; inset: 0; }
.ink-item { position: absolute; left: 0; top: 0; display: grid; place-items: center; color: var(--pill-ink); white-space: nowrap; }
.seg .ink-item { font: var(--type-small); font-weight: 600; }

/* ---------- Type roles (section 5) ---------- */
.eyebrow { font: var(--type-micro); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-2); }
.h1 { font: var(--type-display); letter-spacing: var(--track-display); }
.h2 { font: var(--type-headline); letter-spacing: var(--track-headline); }
.h3 { font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }
.lede { font: var(--type-lede); color: var(--text-2); max-width: var(--measure); }
.muted { color: var(--text-2); }
/* --text-3 is 3.3:1, under AA for words this size: dim words take the second grey too. */
.dim { color: var(--text-2); }
.grad {
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.55));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

section { padding-block: var(--sec); }
.sec-head { display: grid; gap: var(--headline-lede); max-width: var(--measure-head); margin-bottom: var(--group); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Page heads for inner pages (section 7.3) ---------- */
.page-head { display: grid; gap: var(--display-lede); padding-block: var(--head-top) var(--group); }
.page-head .h1 { max-width: var(--measure-title); }

/* ---------- Sliding segmented control (section 7.1) ---------- */
.seg {
  justify-self: start; position: relative; display: inline-flex; gap: var(--sp-4); padding: var(--sp-4); max-width: 100%;
  border-radius: var(--r-pill); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
}
.seg button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  height: var(--h-sm); padding: 0 var(--sp-16); border: 0; border-radius: var(--r-pill); background: none;
  color: var(--text-2); cursor: pointer; font: var(--type-small); font-weight: 600; white-space: nowrap;
  transition: scale var(--dur-move) var(--spring);
}
.seg button:hover, .seg button.lit { color: var(--text); }
.seg button:active { scale: .96; transition-duration: var(--dur-press); }
@media (max-width: 767.98px) {
  .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: calc(var(--h-sm) / 2 + var(--sp-4)); }
}

/* ---------- Forms (section 4.5): label 8 input 4 error-slot(20) 12 next label ---------- */
.field { display: grid; gap: 0; }
.field label { font: var(--type-small); font-weight: 600; color: var(--text); }
.field label .req { color: var(--text-2); margin-inline-start: var(--sp-4); }
.field .input { margin-top: var(--row); }
.field .err { margin-top: var(--pair); min-height: 20px; }
.input {
  display: block; width: 100%; height: var(--h-lg); padding: 0 var(--in-s); border-radius: var(--r-md);
  background: var(--panel); color: var(--text); border: 1px solid var(--field-line);
  font: var(--type-body); font-weight: 500;
}
textarea.input { height: auto; min-height: 120px; padding: var(--sp-12) var(--in-s); resize: vertical; }
.input::placeholder { color: var(--text-2); }
.input:focus { outline: none; border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.28); }
.input[aria-invalid="true"] { border-color: #E5484D; }
.err { color: #FF8589; font: var(--type-caption); }

/* ---------- Reveal on scroll: one observer per section, transform only (section 10.3) ---------- */
.rise { transition: transform var(--dur-reveal) var(--spring); }
.js .rise.pre { transform: translateY(var(--sp-16)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .js .rise.pre { transform: none; opacity: 1; }
}