/* يقين · yaqeen.help
 *
 * Every colour, size, radius and duration below is a token from s08 of the
 * design system, or a proportion lifted from LIB-01 (the library home screen).
 * The one exception is the lockup, which follows the owner's standing rule
 * rather than the design file: the product's own mark, then a thin wordmark
 * over a sub-line. The lamp the design file drew is not the mark and never was.
 *
 * Contents
 *   1. tokens          s08a light · s08b dark · s08d type · s08e space
 *   2. reset & base
 *   3. language switch (the EN toggle hides one of two copies, no JS needed)
 *   4. lockup          the mark, then يقين thin over its Arabic sub-line
 *   5. header
 *   6. hero            CMP-07, the navy card on the light page
 *   7. services        CMP-06 surface cards
 *   8. waitlist        CMP-03 button, CMP-08 field geometry
 *   9. disclaimer      locked text, 12.5px floor (support.html only)
 *  10. footer
 *  11. document pages  privacy · terms · support
 */

/* ------------------------------------------------------------------ */
/* 1. tokens                                                           */
/* ------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  /* s08a · COLOR · LIGHT. The palette itself carries no amber: the one amber in
     the system is --brand-mark, which belongs to the logo the product already
     ships and is used only where the mark itself speaks. */
  --brand-mark: #f09a16;
  /* Navy on the mark's amber, in both schemes, because the mark is the same
     amber in both. 7.57:1, so it clears the floor as button text. */
  --on-brand-mark: #0e1a33;
  --bg: #d6dfef;
  --paper: #f7f9fc;
  --paper-solid: #f7f9fc;
  --ink: #0e1a33;
  --muted: rgba(14, 26, 51, 0.6);
  --whisper: rgba(14, 26, 51, 0.55);
  --divider: rgba(14, 26, 51, 0.12);
  --primary: #0e1a33;
  --on-primary: #f7f9fc;
  --selection: rgba(14, 26, 51, 0.12);
  --glow: none;
  --status-active: #14663f;
  --status-repealed: #8c2f26;

  /* The muted role taken to the contrast floor. s08a's whisper (0.55) and muted
     (0.60) are tuned for a 390px screen; on a web page some of that text sits
     on --bg, which s08a says never carries text directly, and some of it is
     small. At 0.72 both cases clear 4.5:1 and the role still reads as
     secondary. */
  --muted-strong: rgba(14, 26, 51, 0.72);

  /* The hero is a navy card on the light page in light mode (LIB-01 light),
     and a caramel 7% surface in dark mode (LIB-01 dark). These roles let the
     same markup carry both without a second set of classes. */
  --hero-bg: #0e1a33;
  --hero-border: transparent;
  --hero-ink: #f7f9fc;
  --hero-muted: rgba(247, 249, 252, 0.72);
  --hero-eyebrow: rgba(247, 249, 252, 0.65);
  --hero-rule: rgba(247, 249, 252, 0.5);
  --hero-paper: #f7f9fc;
  --hero-paper-ink: #0e1a33;
  --hero-paper-muted: rgba(14, 26, 51, 0.6);
  --hero-hairline: rgba(247, 249, 252, 0.25);
  --hero-ghost: rgba(247, 249, 252, 0.1);

  /* The one ambient radial is dark only (s08h). */
  --ambient: transparent;

  /* TYPE. One family, both scripts: IBM Plex Sans Arabic is the whole UI face
     (the wordmark, headings, body, buttons, form labels) and IBM Plex Sans is
     its latin companion, used for anything that reads left to right inside an
     Arabic line. system-ui is the only fallback; there is nothing else worth
     falling back to that would not change the shape of the page.

     Only 200 to 600 is loaded, so nothing here may ask for 700: the browser
     would draw a synthetic bold instead. */
  --font-ar: "IBM Plex Sans Arabic", system-ui;
  --font-latin: "IBM Plex Sans", system-ui;
  --font-law: "IBM Plex Sans Arabic", system-ui;

  /* s08e · SPACE · RADIUS · MOTION */
  --r-row: 16px;
  --r-panel: 20px;
  --r-hero: 24px;
  --r-field: 14px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-pill: 180ms;
  --t-page: 260ms;
  --touch: 44px;

  --shell: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* s08b · COLOR · DARK. Navy, never black. Amber is interaction only.
   The palette is written twice on purpose: once for the visitor who has
   expressed no choice and whose system asks for dark, and once for the
   visitor who pressed the toggle. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0e1a33;
    --paper: rgba(245, 235, 221, 0.07);
    --paper-solid: #1a2540;
    --ink: #f5ebdd;
    --muted: rgba(245, 235, 221, 0.6);
    --whisper: rgba(245, 235, 221, 0.55);
    --divider: rgba(245, 235, 221, 0.12);
    --primary: #f09a16;
    --on-primary: #0e1a33;
    --selection: rgba(240, 154, 22, 0.22);
    --glow: 0 0 18px rgba(240, 154, 22, 0.45);
    --status-active: #6dbf97;
    --status-repealed: #e08c82;
    --muted-strong: rgba(245, 235, 221, 0.72);

    --hero-bg: rgba(245, 235, 221, 0.07);
    --hero-border: rgba(245, 235, 221, 0.12);
    --hero-ink: #f5ebdd;
    --hero-muted: rgba(245, 235, 221, 0.72);
    --hero-eyebrow: rgba(245, 235, 221, 0.65);
    --hero-rule: rgba(245, 235, 221, 0.5);
    --hero-paper: rgba(245, 235, 221, 0.09);
    --hero-paper-ink: #f5ebdd;
    --hero-paper-muted: rgba(245, 235, 221, 0.6);
    --hero-hairline: rgba(245, 235, 221, 0.22);
    --hero-ghost: rgba(245, 235, 221, 0.07);

    --ambient: rgba(240, 154, 22, 0.14);
  }
}

html[data-theme="dark"] {
  --bg: #0e1a33;
  --paper: rgba(245, 235, 221, 0.07);
  --paper-solid: #1a2540;
  --ink: #f5ebdd;
  --muted: rgba(245, 235, 221, 0.6);
  --whisper: rgba(245, 235, 221, 0.55);
  --divider: rgba(245, 235, 221, 0.12);
  --primary: #f09a16;
  --on-primary: #0e1a33;
  --selection: rgba(240, 154, 22, 0.22);
  --glow: 0 0 18px rgba(240, 154, 22, 0.45);
  --status-active: #6dbf97;
  --status-repealed: #e08c82;
  --muted-strong: rgba(245, 235, 221, 0.72);

  --hero-bg: rgba(245, 235, 221, 0.07);
  --hero-border: rgba(245, 235, 221, 0.12);
  --hero-ink: #f5ebdd;
  --hero-muted: rgba(245, 235, 221, 0.72);
  --hero-eyebrow: rgba(245, 235, 221, 0.65);
  --hero-rule: rgba(245, 235, 221, 0.5);
  --hero-paper: rgba(245, 235, 221, 0.09);
  --hero-paper-ink: #f5ebdd;
  --hero-paper-muted: rgba(245, 235, 221, 0.6);
  --hero-hairline: rgba(245, 235, 221, 0.22);
  --hero-ghost: rgba(245, 235, 221, 0.07);

  --ambient: rgba(240, 154, 22, 0.14);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* ------------------------------------------------------------------ */
/* 2. reset & base                                                     */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The user agent hides [hidden] with a rule any class selector outruns, and
   this file gives display to several elements that get hidden at run time.
   One place to say it, so nothing stays on screen after it is dismissed. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* s08h · at most one ambient radial per dark screen, and none in light. This is
   it: the page background carries it and nothing else does.
 *
 * It is a background image rather than a positioned element on purpose. An
 * absolutely positioned circle hanging off the top left corner grows the
 * document's scroll width by however far it hangs, which is a horizontal
 * scrollbar on a page that has no horizontal content. A background cannot.
 *
 * LIB-01 dark places it at top -90, left -50 on a 390 wide screen. The same
 * relationship, scaled, and physically left in both writing directions. */
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--ambient), transparent 65%);
  background-repeat: no-repeat;
  background-position: -80px -120px;
  background-size: 520px 520px;
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  overflow-x: hidden;
}

::selection {
  background: var(--selection);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Western digits, latin words and identifiers: IBM Plex Sans, tabular, always
   LTR inside an RTL line (s08f). */
.latin,
.num {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
}

.num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  transform: translateY(-200%);
  z-index: 20;
  background: var(--primary);
  color: var(--on-primary);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-row) var(--r-row);
  font-size: 14px;
  font-weight: 600;
}

.skip:focus {
  inset-inline-start: var(--gutter);
  transform: translateY(0);
}

/* ------------------------------------------------------------------ */
/* 3. language switch                                                  */
/* ------------------------------------------------------------------ */

html[lang="ar"] [data-lang="en"],
html[lang="en"] [data-lang="ar"] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* 4. lockup · the logotype                                            */
/* ------------------------------------------------------------------ */

/* The identity: the Yaqeen mark, then يقين set thin with the Arabic sub-line
   under it. The mark is the one the live product already carries, so the two
   read as one brand rather than two.
   The text lines share one edge, which is the right edge in Arabic and the left
   edge in English, so the column start does the work and no rule has to name a
   side. */
.lockup {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  text-align: start;
  gap: 9px;
  text-decoration: none;
  padding-block: 6px;
  color: var(--ink);
}

.lockup__mark {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
}

.lockup__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 1px;
}

/* The wordmark. Weight 200 is the thin the logotype is drawn at: 100 goes
   fragile at header size and drops out on a coarse screen, 200 holds its
   strokes. Arabic joins its letters, so tracking stays exactly at normal;
   letter-spacing here would break the joins apart. */
.lockup__name {
  display: block;
  font-family: var(--font-ar);
  font-size: 24px;
  font-weight: 200;
  letter-spacing: normal;
  line-height: 1.25;
  color: var(--ink);
}

.lockup__name--latin {
  font-family: var(--font-latin);
}

/* The sub-line, at 44% of the wordmark. Light, never tracked out.
   Colour: the card asks for --whisper, and --whisper reaches 4.5:1 in dark but
   only 3.56:1 in light, which this size of text does not pass on. --muted-strong
   is the role this file already keeps for exactly that case (see its comment in
   the token block); it reads as the same quiet second line and clears the floor
   in both schemes. */
.lockup__sub {
  display: block;
  font-family: var(--font-ar);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--muted-strong);
}

.lockup__sub--latin {
  font-family: var(--font-latin);
}

/* ------------------------------------------------------------------ */
/* 5. header                                                           */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-bottom: 1px solid var(--divider);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CMP-04 geometry at a 44px touch target (s08e touch.min). */
.control {
  min-width: var(--touch);
  min-height: var(--touch);
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-pill) var(--ease), border-color var(--t-pill) var(--ease);
}

.control:hover {
  background: var(--paper-solid);
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}

.control__latin {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.control__icon {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The toggle shows the scheme it would move you to: a moon while the page is
   light, a sun while it is dark. The four rules below cover the visitor who
   has expressed no choice as well as the one who has, and they work with
   scripting off. Order matters: the explicit choice is written last so it
   beats the system preference. */
.control__icon--sun {
  display: none;
}

.control__icon--moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .control__icon--sun {
    display: block;
  }

  html:not([data-theme="light"]) .control__icon--moon {
    display: none;
  }
}

html[data-theme="dark"] .control__icon--sun {
  display: block;
}

html[data-theme="dark"] .control__icon--moon {
  display: none;
}

html[data-theme="light"] .control__icon--sun {
  display: none;
}

html[data-theme="light"] .control__icon--moon {
  display: block;
}

/* ------------------------------------------------------------------ */
/* 6. hero · CMP-07                                                    */
/* ------------------------------------------------------------------ */

.hero {
  margin-block: clamp(20px, 4vw, 40px) 0;
}

/* LIB-01: margin 14/12, background #0E1A33, radius 24, padding 22/20/16.
   Scaled up for the web; the ratios between padding, radius and type are the
   ones from the screen. */
.hero__card {
  background: var(--hero-bg);
  border: 1px solid var(--hero-border);
  border-radius: var(--r-hero);
  padding: clamp(24px, 5vw, 56px) clamp(20px, 4.5vw, 52px) clamp(20px, 4vw, 44px);
  color: var(--hero-ink);
  position: relative;
  overflow: hidden;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--hero-eyebrow);
}

.eyebrow::before {
  content: "";
  width: clamp(18px, 2.4vw, 28px);
  height: 1.5px;
  flex: none;
  background: var(--hero-rule);
}

/* The brand is the hero. Everything in the card is centred on one axis: mark,
   name, line, action. */
.hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__mark {
  display: block;
  width: clamp(56px, 8vw, 80px);
  height: clamp(56px, 8vw, 80px);
  border-radius: clamp(13px, 1.9vw, 19px);
}

/* The wordmark, at hero size and the same weight 200 the logotype is drawn at.
   Arabic joins, so tracking stays at normal. */
.hero__title {
  font-size: clamp(46px, 8vw, 84px);
  font-weight: 200;
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--hero-ink);
  margin-top: clamp(12px, 1.8vw, 20px);
}

.hero__sub {
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--hero-muted);
  margin-top: clamp(2px, 0.6vw, 6px);
  max-width: 56ch;
}

/* The paper card inside the navy: LIB-01 gives radius 14, padding 11/14. */
.hero__action {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--hero-paper);
  border-radius: var(--r-field);
  padding: clamp(11px, 1.6vw, 16px) clamp(14px, 1.8vw, 20px);
  margin-top: clamp(15px, 2.4vw, 28px);
  min-height: var(--touch);
  max-width: 560px;
  color: var(--hero-paper-ink);
  text-decoration: none;
  transition: transform var(--t-pill) var(--ease);
}

.hero__action:hover {
  transform: translateY(-1px);
}

.hero__action:focus-visible {
  outline-color: var(--hero-ink);
}

.hero__action-label {
  display: block;
  font-size: clamp(13.5px, 1.4vw, 15px);
  font-weight: 500;
  line-height: 1.5;
}

.hero__action-hint {
  display: block;
  font-size: clamp(10.5px, 1.1vw, 12px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--hero-paper-muted);
  margin-top: 2px;
}

.hero__arrow {
  margin-inline-start: auto;
  width: 17px;
  height: 17px;
  flex: none;
  stroke: var(--hero-paper-ink);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[dir="rtl"] .hero__arrow {
  transform: scaleX(-1);
}

/* Coming soon, at headline size, because it is the single most important fact
   on the page: there is nothing to sign into yet. */
.hero__status {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 15px);
  margin-top: clamp(20px, 3vw, 34px);
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 300;
  line-height: 1.35;
  color: var(--hero-ink);
}

.hero__blink {
  width: clamp(11px, 1.4vw, 15px);
  height: clamp(11px, 1.4vw, 15px);
  border-radius: 50%;
  flex: none;
  background: var(--brand-mark);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-mark) 60%, transparent);
  animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-mark) 55%, transparent);
  }
  50% {
    opacity: 0.35;
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--brand-mark) 0%, transparent);
  }
}

/* A blinking dot is decoration, not information: the word beside it already
   carries the meaning, so it holds still when the system asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  .hero__blink {
    animation: none;
  }
}

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(18px, 2.8vw, 30px);
}


.pill-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--hero-ghost);
  border: 1px solid var(--hero-hairline);
  color: var(--hero-ink);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-pill) var(--ease);
}

.pill-ghost:hover {
  background: color-mix(in srgb, var(--hero-ink) 16%, transparent);
}

.pill-ghost:focus-visible {
  outline-color: var(--hero-ink);
}

/* ------------------------------------------------------------------ */
/* 7. sections & doors                                                 */
/* ------------------------------------------------------------------ */

.section {
  margin-block: clamp(36px, 7vw, 76px);
}

.section__head {
  margin-bottom: clamp(16px, 2.4vw, 26px);
}

.section__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(10px, 1.2vw, 11.5px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted-strong);
}

.section__eyebrow::before {
  content: "";
  width: 18px;
  height: 1.5px;
  flex: none;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.section__title {
  font-size: clamp(21px, 2.8vw, 29px);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 8px;
  text-wrap: balance;
}

.section__lede {
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted-strong);
  margin-top: 8px;
  max-width: 62ch;
}

.doors {
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .doors {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* CMP-06 · surface card: paper fill, 1px hairline, radius 20 for panels. */
.door {
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: var(--r-panel);
  padding: clamp(18px, 2.2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.door__tile {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.door__icon {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.door__name {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  line-height: 1.5;
}

.door__line {
  font-size: clamp(12.5px, 1.3vw, 14px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
}

/* The screen identifier badge from s00, borrowed as a quiet label. Small and
   letter-spaced, so it takes --muted-strong rather than whisper. */
.door__tag {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--muted-strong);
  margin-top: auto;
  padding-top: 4px;
}

/* ------------------------------------------------------------------ */
/* 8. nature panel · the concentric motif from the atlas card          */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* 9. waitlist                                                         */
/* ------------------------------------------------------------------ */

.waitlist {
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: var(--r-panel);
  padding: clamp(22px, 3.4vw, 40px);
}

.form {
  margin-top: clamp(18px, 2.4vw, 26px);
  display: grid;
  gap: 14px;
  max-width: 720px;
}

@media (min-width: 620px) {
  .form__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

.field {
  display: grid;
  gap: 6px;
}

.field__label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.field__optional {
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  margin-inline-start: 6px;
}

/* CMP-08 field geometry, at a 44px minimum height. */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  min-height: var(--touch);
  padding: 11px 14px;
  border-radius: var(--r-field);
  border: 1px solid var(--divider);
  background: var(--paper-solid);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.field input::placeholder {
  color: var(--muted);
  font-weight: 300;
}

.field input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.field input[aria-invalid="true"] {
  border-color: var(--status-repealed);
}

.field__error {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--status-repealed);
  min-height: 0;
}

.field__error:empty {
  display: none;
}

/* Mobile number is typed in western digits and reads left to right even in an
   Arabic line (s08f). */
.field input[type="tel"],
.field input[type="email"] {
  direction: ltr;
  text-align: start;
  font-family: var(--font-latin);
  font-weight: 500;
}

html[dir="rtl"] .field input[type="tel"],
html[dir="rtl"] .field input[type="email"] {
  text-align: right;
}

.consent {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  min-height: var(--touch);
  padding-block: 4px;
}

.consent input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  margin-top: 0.42em;
  accent-color: var(--primary);
}

.consent a {
  color: var(--ink);
  text-underline-offset: 3px;
}

/* The honeypot. A person never sees it and never tabs into it; something
   filling it in is not a person. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* CMP-03 · primary button. Day: navy fill, paper label. Night: amber fill,
   navy label, and it is one of the permitted glow bearers. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--glow);
  font-family: var(--font-ar);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  justify-self: start;
  transition: transform var(--t-pill) var(--ease), opacity var(--t-pill) var(--ease);
}

/* The one action on the page. It sits on the navy hero card, so it takes the
   paper surface that card already uses for its inner tiles rather than
   --primary, which is that same navy and would vanish into it. Declared after
   .btn so it wins on source order, not on a bumped selector.
   The border earns its keep in dark, where --hero-paper is a 9% wash that sits
   at 1.28:1 against the card and leaves the page's only call to action reading
   as a disabled ghost. In light the border paints the same colour as the fill,
   so the light button is unchanged to the pixel. */
.btn--hero {
  background: var(--brand-mark);
  color: var(--on-brand-mark);
  border-color: transparent;
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-mark) 45%, transparent);
  justify-self: center;
  text-decoration: none;
}

.btn--hero:hover {
  box-shadow: 0 0 30px color-mix(in srgb, var(--brand-mark) 62%, transparent);
}

/* The inherited :focus-visible draws in currentColor, which on both of these
   buttons is the same colour as whatever sits behind them: near white on the
   light page for .btn, navy on the navy card for .btn--hero. Both rings were
   invisible. Draw against the surface instead of against the button. */
.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.btn--hero:focus-visible {
  outline: 2px solid var(--hero-ink);
  outline-offset: 3px;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.62;
  cursor: progress;
}

/* Busy, success and failure. Only one of the three is ever shown. */
.form__status {
  border-radius: var(--r-row);
  border: 1px solid var(--divider);
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
}

.form__status[hidden] {
  display: none;
}

.form__status--ok {
  border-color: color-mix(in srgb, var(--status-active) 45%, transparent);
  color: var(--ink);
}

.form__status--ok strong {
  display: block;
  font-weight: 600;
  color: var(--status-active);
  margin-bottom: 2px;
}

.form__status--bad {
  border-color: color-mix(in srgb, var(--status-repealed) 45%, transparent);
  color: var(--ink);
}

.form__status--bad strong {
  display: block;
  font-weight: 600;
  color: var(--status-repealed);
  margin-bottom: 2px;
}

.form__status a {
  color: var(--ink);
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* 10. disclaimer · s08h, text locked, 12.5px floor                    */
/* ------------------------------------------------------------------ */

.disclaimer {
  margin-block: clamp(28px, 5vw, 52px);
  border: 1px solid var(--divider);
  border-radius: var(--r-row);
  background: var(--paper);
  padding: 16px 18px;
  display: flex;
  align-items: start;
  gap: 12px;
}

.disclaimer p {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* 11. footer                                                          */
/* ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--divider);
  padding-block: clamp(24px, 3.5vw, 36px) clamp(28px, 4vw, 44px);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: 12px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-pill);
}

.site-footer__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__legal {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted-strong);
  padding-top: 12px;
}

/* ------------------------------------------------------------------ */
/* 12. document pages                                                  */
/* ------------------------------------------------------------------ */

.doc {
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: var(--r-panel);
  padding: clamp(22px, 3.6vw, 48px);
  margin-block: clamp(20px, 4vw, 40px);
  max-width: 78ch;
}

.doc__title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.4;
}

.doc__meta {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 6px;
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--divider);
}

.doc h2 {
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 600;
  line-height: 1.6;
  margin-top: clamp(24px, 3vw, 34px);
}

.doc h3 {
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 600;
  line-height: 1.6;
  margin-top: 18px;
}

.doc p {
  font-size: clamp(13px, 1.4vw, 14.5px);
  font-weight: 300;
  line-height: 1.9;
  color: var(--ink);
  margin-top: 10px;
}

.doc ul {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

/* The bullet is positioned, not laid out. A flex li turns every inline child
   into its own flex item, so a sentence containing <strong>, a link or a number
   span comes apart into side by side columns. These list items are legal prose
   and are full of exactly that. */
.doc ul li {
  position: relative;
  padding-inline-start: 15px;
  font-size: clamp(13px, 1.4vw, 14.5px);
  font-weight: 300;
  line-height: 1.9;
  color: var(--ink);
}

.doc ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.8em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.doc a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.doc__table {
  margin-top: 14px;
  border: 1px solid var(--divider);
  border-radius: var(--r-row);
  overflow: hidden;
}

.doc__table dl {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .doc__table dl {
    grid-template-columns: 34% 1fr;
  }
}

.doc__table dt,
.doc__table dd {
  margin: 0;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.8;
  border-top: 1px solid var(--divider);
}

.doc__table dl > dt:first-of-type,
.doc__table dl > dt:first-of-type + dd {
  border-top: 0;
}

.doc__table dt {
  font-weight: 600;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.doc__table dd {
  font-weight: 300;
  color: var(--muted);
}

@media (max-width: 619px) {
  .doc__table dd {
    border-top: 0;
  }
}

/* ------------------------------------------------------------------ */
/* motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__action:hover,
  .btn:hover:not(:disabled) {
    transform: none;
  }
}