/* tokens.css */
/* Generated by web/tools/tokens.py. Edit the script, not this file. */

:root {
  /* Raw scales (OKLCH). Components never use these directly. */
  --rose-50: oklch(97.5% 0.013 1.3); /* #FFF3F6 */
  --rose-100: oklch(94.0% 0.030 1.3); /* #FEE3EA */
  --rose-200: oklch(88.0% 0.067 1.3); /* #FEC6D5 */
  --rose-300: oklch(80.0% 0.096 1.3); /* #F2A4BA */
  --rose-400: oklch(70.6% 0.116 1.3); /* #DB809B */
  --rose-500: oklch(60.6% 0.137 1.3); /* #C25B7D */
  --rose-600: oklch(50.6% 0.158 1.3); /* #A8325F */
  --rose-700: oklch(43.6% 0.143 1.3); /* #8B234C */
  --rose-800: oklch(37.0% 0.129 1.3); /* #72153B */
  --rose-900: oklch(30.5% 0.115 1.3); /* #59072B */
  --rose-950: oklch(24.5% 0.099 1.3); /* #42001D */

  --plum-50: oklch(97.5% 0.007 339.8); /* #FAF5F8 */
  --plum-100: oklch(94.7% 0.007 339.8); /* #F1ECEF */
  --plum-200: oklch(89.5% 0.007 339.8); /* #E0DADE */
  --plum-300: oklch(82.2% 0.008 339.8); /* #C9C3C6 */
  --plum-400: oklch(73.5% 0.013 339.8); /* #AFA6AC */
  --plum-500: oklch(64.2% 0.018 339.8); /* #958990 */
  --plum-600: oklch(55.0% 0.023 339.8); /* #7B6D76 */
  --plum-700: oklch(49.2% 0.033 337.1); /* #6E5A68 */
  --plum-800: oklch(38.0% 0.032 339.8); /* #4E3C48 */
  --plum-900: oklch(29.7% 0.036 339.8); /* #3A2633 */
  --plum-950: oklch(22.0% 0.030 339.8); /* #24151F */

  --gold-50: oklch(97.5% 0.023 81.2); /* #FFF6E6 */
  --gold-100: oklch(95.8% 0.039 81.2); /* #FFEFD4 */
  --gold-200: oklch(91.5% 0.049 81.2); /* #F4E0BF */
  --gold-300: oklch(85.3% 0.057 81.2); /* #E2CCA5 */
  --gold-400: oklch(77.6% 0.067 81.2); /* #CCB285 */
  --gold-500: oklch(69.3% 0.078 81.2); /* #B59863 */
  --gold-600: oklch(61.1% 0.089 81.2); /* #9F7E41 */
  --gold-700: oklch(53.4% 0.099 81.2); /* #8A661B */
  --gold-800: oklch(43.6% 0.086 81.2); /* #694C08 */
  --gold-900: oklch(33.8% 0.069 81.2); /* #493301 */
  --gold-950: oklch(24.5% 0.049 81.2); /* #2C1E01 */

  --pearl-50: oklch(97.5% 0.012 297.0); /* #F7F5FE */
  --pearl-100: oklch(93.9% 0.032 297.0); /* #EDE7FE */
  --pearl-200: oklch(87.8% 0.039 297.0); /* #D9D2EE */
  --pearl-300: oklch(81.1% 0.048 297.0); /* #C4BBDD */
  --pearl-400: oklch(72.8% 0.042 297.0); /* #AAA2BF */
  --pearl-500: oklch(64.1% 0.036 297.0); /* #8E88A0 */
  --pearl-600: oklch(55.4% 0.030 297.0); /* #746F82 */
  --pearl-700: oklch(47.2% 0.024 297.0); /* #5C5968 */
  --pearl-800: oklch(39.4% 0.019 297.0); /* #47444F */
  --pearl-900: oklch(31.7% 0.013 297.0); /* #333138 */
  --pearl-950: oklch(24.5% 0.009 297.0); /* #212024 */

  --sea-50: oklch(97.5% 0.012 242.4); /* #F0F8FF */
  --sea-100: oklch(95.4% 0.023 242.4); /* #E3F2FF */
  --sea-200: oklch(90.8% 0.025 242.4); /* #D3E3F0 */
  --sea-300: oklch(83.7% 0.030 242.4); /* #B9CCDC */
  --sea-400: oklch(75.1% 0.026 242.4); /* #A0B1BE */
  --sea-500: oklch(66.0% 0.022 242.4); /* #87949F */
  --sea-600: oklch(56.9% 0.018 242.4); /* #6E7981 */
  --sea-700: oklch(48.3% 0.014 242.4); /* #586066 */
  --sea-800: oklch(40.2% 0.011 242.4); /* #43494E */
  --sea-900: oklch(32.1% 0.007 242.4); /* #303437 */
  --sea-950: oklch(24.5% 0.006 242.4); /* #1E2123 */

  --mint-50: oklch(97.5% 0.036 163.2); /* #E2FFF0 */
  --mint-100: oklch(92.7% 0.032 163.2); /* #D5EEE1 */
  --mint-200: oklch(88.0% 0.040 163.2); /* #C1E0D0 */
  --mint-300: oklch(81.2% 0.036 163.2); /* #AEC9BB */
  --mint-400: oklch(73.0% 0.031 163.2); /* #97AEA2 */
  --mint-500: oklch(64.2% 0.026 163.2); /* #7F9288 */
  --mint-600: oklch(55.5% 0.021 163.2); /* #68776F */
  --mint-700: oklch(47.2% 0.017 163.2); /* #535F59 */
  --mint-800: oklch(39.5% 0.012 163.2); /* #414944 */
  --mint-900: oklch(31.7% 0.008 163.2); /* #2F3331 */
  --mint-950: oklch(24.5% 0.008 163.2); /* #1D221F */

  --green-50: oklch(97.5% 0.035 160.4); /* #E4FFEF */
  --green-100: oklch(95.4% 0.037 160.4); /* #DBF8E8 */
  --green-200: oklch(90.9% 0.043 160.4); /* #C9EAD7 */
  --green-300: oklch(84.3% 0.051 160.4); /* #AFD6C0 */
  --green-400: oklch(76.2% 0.061 160.4); /* #90BEA5 */
  --green-500: oklch(67.6% 0.071 160.4); /* #6FA588 */
  --green-600: oklch(59.1% 0.082 160.4); /* #4E8D6D */
  --green-700: oklch(51.0% 0.092 160.4); /* #2C7654 */
  --green-800: oklch(42.0% 0.081 160.4); /* #1A5A3E */
  --green-900: oklch(33.0% 0.070 160.4); /* #074029 */
  --green-950: oklch(24.5% 0.053 160.4); /* #012818 */

  --amber-50: oklch(97.5% 0.015 55.4); /* #FFF4EE */
  --amber-100: oklch(95.6% 0.026 55.4); /* #FFEDE1 */
  --amber-200: oklch(91.3% 0.053 55.4); /* #FFDAC1 */
  --amber-300: oklch(84.9% 0.069 55.4); /* #F2C2A3 */
  --amber-400: oklch(77.1% 0.082 55.4); /* #DEA782 */
  --amber-500: oklch(68.7% 0.095 55.4); /* #C88A5F */
  --amber-600: oklch(60.3% 0.109 55.4); /* #B26E3C */
  --amber-700: oklch(52.5% 0.122 55.4); /* #9E5412 */
  --amber-800: oklch(43.0% 0.104 55.4); /* #7A3D03 */
  --amber-900: oklch(33.5% 0.081 55.4); /* #552902 */
  --amber-950: oklch(24.5% 0.060 55.4); /* #351700 */

  --red-50: oklch(97.5% 0.012 28.7); /* #FFF4F2 */
  --red-100: oklch(95.3% 0.023 28.7); /* #FFEAE7 */
  --red-200: oklch(90.6% 0.048 28.7); /* #FFD5CE */
  --red-300: oklch(83.9% 0.088 28.7); /* #FFB5AA */
  --red-400: oklch(75.7% 0.117 28.7); /* #F29285 */
  --red-500: oklch(67.0% 0.138 28.7); /* #DD7163 */
  --red-600: oklch(58.3% 0.159 28.7); /* #C84D41 */
  --red-700: oklch(50.1% 0.178 28.7); /* #B3261E */
  --red-800: oklch(41.4% 0.158 28.7); /* #8E120E */
  --red-900: oklch(32.7% 0.133 28.7); /* #690102 */
  --red-950: oklch(24.5% 0.099 28.7); /* #450101 */

  /* Semantic colour tokens: the only colours components may use. */
  --bg: oklch(98.1% 0.006 350.8); /* #FCF7F9 */
  --surface: oklch(100.0% 0.000 89.9); /* #FFFFFF */
  --surface-tint: oklch(93.6% 0.023 350.1); /* #F7E4EC */
  --secondary: oklch(93.7% 0.022 302.9); /* #EDE7F7 */
  --ink: oklch(22.0% 0.030 339.8); /* #24151F */
  --ink-muted: oklch(49.2% 0.033 337.1); /* #6E5A68 */
  --ink-berry: oklch(37.1% 0.130 1.6); /* #72153B */
  --primary: oklch(50.6% 0.158 1.3); /* #A8325F */
  --primary-hover: oklch(43.5% 0.143 1.3); /* #8B234C */
  --on-primary: oklch(100.0% 0.000 89.9); /* #FFFFFF */
  --accent: oklch(53.4% 0.099 81.2); /* #8A661B */
  --accent-decor: oklch(73.1% 0.112 84.4); /* #C9A24E */
  --decor-blush: oklch(89.8% 0.041 346.3); /* #F3D3E3 */
  --border: oklch(64.3% 0.018 341.6); /* #958990 */
  --divider: oklch(90.8% 0.019 342.1); /* #EADCE4 */
  --focus-ring: oklch(50.6% 0.158 1.3); /* #A8325F */
  --success: oklch(51.0% 0.092 160.4); /* #2C7654 */
  --warning: oklch(52.5% 0.122 55.4); /* #9E5412 */
  --error: oklch(50.1% 0.178 28.7); /* #B3261E */
  --sale: oklch(43.5% 0.143 1.3); /* #8B234C */

  /* Gradients and tinted shadows */
  --gradient-hero: radial-gradient(120% 90% at 70% 10%, var(--pearl-100) 0%, transparent 55%), radial-gradient(90% 80% at 10% 30%, var(--rose-100) 0%, transparent 60%), var(--bg);
  --gradient-iridescent: conic-gradient(from 210deg, var(--rose-100), var(--pearl-200), var(--sea-200), var(--mint-100), var(--gold-100), var(--rose-100));
  --shadow-tint: 330 45% 30%;
  --shadow-1: 0 1px 2px hsl(var(--shadow-tint) / .08), 0 2px 8px hsl(var(--shadow-tint) / .06);
  --shadow-2: 0 4px 12px hsl(var(--shadow-tint) / .08), 0 12px 32px hsl(var(--shadow-tint) / .10);
  --shadow-3: 0 12px 24px hsl(var(--shadow-tint) / .10), 0 32px 72px hsl(var(--shadow-tint) / .16);
  --glow-primary: 0 8px 28px hsl(338 55% 42% / .32);

  /* 3D scene reads these at runtime, so a rebrand updates WebGL too */
  --three-pearl-base: var(--pearl-50);
  --three-pearl-sheen: var(--rose-200);
  --three-iris-1: var(--rose-200);
  --three-iris-2: var(--sea-200);
  --three-iris-3: var(--mint-100);
  --three-light-key: var(--gold-100);
  --three-fog: var(--bg);
  --three-sparkle: var(--gold-200);

  /* Type */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-display-ar: "El Messiri", "Readex Pro", "Geeza Pro", Tahoma, sans-serif;
  --font-body: "Readex Pro", "Segoe UI", system-ui, -apple-system, Tahoma, sans-serif;
  --step-n2: clamp(0.7378rem, 0.7441rem + -0.0268vw, 0.7200rem);
  --step-n1: clamp(0.8854rem, 0.8803rem + 0.0219vw, 0.9000rem);
  --step-0: clamp(1.0625rem, 1.0405rem + 0.0939vw, 1.1250rem);
  --step-1: clamp(1.2750rem, 1.2288rem + 0.1972vw, 1.4062rem);
  --step-2: clamp(1.5300rem, 1.4498rem + 0.3423vw, 1.7578rem);
  --step-3: clamp(1.8360rem, 1.7088rem + 0.5427vw, 2.1973rem);
  --step-4: clamp(2.2032rem, 2.0119rem + 0.8163vw, 2.7466rem);
  --step-5: clamp(2.6438rem, 2.3659rem + 1.1859vw, 3.4332rem);
  --step-6: clamp(3.1726rem, 2.7786rem + 1.6810vw, 4.2915rem);
  --step-7: clamp(3.8071rem, 3.2588rem + 2.3396vw, 5.3644rem);
  --leading-body: 1.55;
  --leading-body-ar: 1.75;
  --leading-display: 1.08;
  --leading-display-ar: 1.3;
  --measure: 65ch;

  /* Space (4 px base) and radius */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;
  --section-y: clamp(4rem, 2.6rem + 6vw, 8rem);
  --gutter: clamp(1rem, .6rem + 2vw, 2.5rem);
  --container: 76rem;
  --radius-1: 12px; --radius-2: 16px; --radius-3: 24px; --radius-4: 32px; --radius-pill: 999px;

  /* Motion */
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms; --dur-5: 1000ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 120ms; --dur-4: 160ms; --dur-5: 200ms; }
}

/* base.css */
/* Base: reset, typography, layout primitives. Colours come only from tokens.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

:lang(ar) body, body:lang(ar) { line-height: var(--leading-body-ar); font-weight: 400; }

/* Grain: 3% tactile noise over everything, prevents gradient banding */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--rose-200); color: var(--ink); }

/* ---------- Typography ---------- */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-display);
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
  font-optical-sizing: auto;
}

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4, :lang(ar) .display {
  font-family: var(--font-display-ar);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--leading-display-ar);
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0; text-wrap: pretty; }
.lead { font-size: var(--step-1); color: var(--ink-muted); max-width: 52ch; line-height: 1.5; }

.eyebrow {
  display: inline-block;
  font-size: var(--step-n1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-weight: 600; }

/* One or two words per heading at most. Bodoni italic in English, rose in Arabic. */
.accent-word { font-style: italic; color: var(--ink-berry); font-weight: 400; }
:lang(ar) .accent-word { font-style: normal; color: var(--primary); font-weight: 700; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: 1em; }
.prose h2 { font-size: var(--step-3); margin-block-start: 1.6em; }
.prose h3 { font-size: var(--step-1); margin-block-start: 1.4em; }
.prose ul { padding-inline-start: 1.2em; }

/* Code, hex values and numbers stay left-to-right inside Arabic text */
code, .hex, .swatch-hex, [data-ltr] { direction: ltr; unicode-bidi: isolate; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; }

.muted { color: var(--ink-muted); }
.small { font-size: var(--step-n1); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Layout ---------- */

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

.section { padding-block: var(--section-y); }
.section-tint { background: var(--surface-tint); }
.section-lilac { background: var(--secondary); }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.grid { display: grid; gap: var(--grid-gap, var(--space-5)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }
.grid > *, .cluster > *, .stack > * { min-width: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -4rem;
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-1);
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  transition: top var(--dur-2) var(--ease-out-soft);
}
.skip-link:focus { top: var(--space-4); color: var(--surface); }

/* Arrows and chevrons point the reading direction */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* Sadu weave rule: the Bedouin textile pattern, as a decorative divider */
.sadu {
  height: 14px;
  border: 0;
  margin: 0;
  background:
    linear-gradient(135deg, var(--accent-decor) 25%, transparent 25%) -7px 0 / 14px 14px,
    linear-gradient(225deg, var(--accent-decor) 25%, transparent 25%) -7px 0 / 14px 14px,
    linear-gradient(315deg, var(--rose-300) 25%, transparent 25%) 0 0 / 14px 14px,
    linear-gradient(45deg, var(--rose-300) 25%, transparent 25%) 0 0 / 14px 14px;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* components.css */
/* Components. Each one uses semantic tokens only. */

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pearl mark ---------- */
.pearl {
  --size: 1.6rem;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  flex: none;
  background:
    radial-gradient(circle at 32% 28%, var(--surface) 0 14%, transparent 46%),
    var(--gradient-iridescent);
  box-shadow: inset -.18em -.22em .4em hsl(var(--shadow-tint) / .22), var(--shadow-1);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 3rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 1.4em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-weight: 550;
  font-size: var(--step-0);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease-out-soft), box-shadow var(--dur-3) var(--ease-out-soft),
              background-color var(--dur-2) var(--ease-out-soft), color var(--dur-2) var(--ease-out-soft);
}
.btn:active, .btn.is-active { transform: scale(.97); transition-duration: var(--dur-1); }
.btn-sm { --btn-h: 2.5rem; font-size: var(--step-n1); padding: 0 1.1em; }
.btn-lg { --btn-h: 3.5rem; font-size: var(--step-1); padding: 0 1.6em; }
.btn-block { width: 100%; }

/* Primary: the only fully saturated element on a screen, never decorative */
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-2px); box-shadow: var(--glow-primary); }
.btn-primary:active, .btn-primary.is-active { transform: translateY(0) scale(.97); }

/* Shimmer sweep every ~6s, primary CTA only */
.btn-primary.btn-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, hsl(0 0% 100% / .28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shimmer 6s var(--ease-in-out) 2s infinite;
}
@keyframes shimmer { 0%, 82% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover, .btn-secondary.is-hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-2); }

.btn-ghost { background: transparent; color: var(--primary); padding-inline: .6em; }
.btn-ghost:hover, .btn-ghost.is-hover { color: var(--primary-hover); background: var(--rose-50); }

.btn:focus-visible, .btn.is-focus { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--plum-100);
  color: var(--ink-muted);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.btn[disabled]::after { display: none; }

/* Loading: label stays for screen readers, a pearl pulse replaces the spinner */
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .btn-label { opacity: 0; }
.btn[aria-busy="true"]::before {
  content: "";
  position: absolute;
  width: .8em; height: .8em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 1.2em 0 0 currentColor, -1.2em 0 0 currentColor;
  animation: pearls 1s var(--ease-in-out) infinite;
}
@keyframes pearls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 3rem;
  padding: .4em 1.1em;
  border-radius: var(--radius-1);
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  line-height: 1.15;
}
.store-badge small { display: block; font-size: .7em; opacity: .8; }
.store-badge:hover { color: var(--surface); background: var(--plum-900); }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label { font-weight: 500; font-size: var(--step-n1); color: var(--ink); }
.field-label .optional { color: var(--ink-muted); font-weight: 350; }
.field-hint { font-size: var(--step-n1); color: var(--ink-muted); }

.input {
  width: 100%;
  min-height: 3.25rem;
  padding: .75em 1em;
  border-radius: var(--radius-1);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: max(16px, var(--step-0)); /* never zooms on iOS */
  transition: border-color var(--dur-2) var(--ease-out-soft), box-shadow var(--dur-3) var(--ease-out-soft);
}
.input::placeholder { color: var(--plum-600); opacity: 1; }
.input:hover { border-color: var(--plum-700); }
.input:focus, .input.is-focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--rose-100), 0 0 24px var(--rose-100); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--red-100); }
.input.is-valid { border-color: var(--success); }
.input:disabled { background: var(--plum-50); color: var(--ink-muted); cursor: not-allowed; }

.field-msg { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--step-n1); }
.field-msg .icon { margin-top: .15em; }
.field-error { color: var(--error); }
.field-success { color: var(--success); }

.input-group { display: flex; gap: var(--space-2); }
.input-group .input { flex: 1; }
.input-prefix {
  display: inline-flex; align-items: center; padding: 0 .9em;
  border-radius: var(--radius-1); border: 1.5px solid var(--border); background: var(--plum-50);
  color: var(--ink-muted); font-variant-numeric: tabular-nums; direction: ltr;
}

/* Checkbox with a real input underneath */
.check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; font-size: var(--step-n1); color: var(--ink-muted); }
.check input { appearance: none; flex: none; width: 1.5rem; height: 1.5rem; margin: 0; border-radius: 7px; border: 1.5px solid var(--border); background: var(--surface); display: grid; place-content: center; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2); }
.check input::after { content: ""; width: .7rem; height: .4rem; border: 2.5px solid var(--on-primary); border-top: 0; border-inline-end: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--dur-2) var(--ease-bounce); }
[dir="rtl"] .check input::after { transform: rotate(45deg) scaleX(-1) translate(1px, -1px) scale(0); }
.check input:checked { background: var(--primary); border-color: var(--primary); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
[dir="rtl"] .check input:checked::after { transform: rotate(45deg) scaleX(-1) translate(1px, -1px) scale(1); }
.check input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Chips and sticker badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .35em .85em;
  border-radius: var(--radius-pill);
  font-size: var(--step-n1); font-weight: 500;
  background: var(--surface-tint); color: var(--ink);
  white-space: nowrap;
}
.chip-gold { background: var(--gold-100); }
.chip-lilac { background: var(--secondary); }
.chip-success { background: var(--green-100); color: var(--success); }
.chip-line { background: transparent; border: 1.5px solid var(--divider); color: var(--ink-muted); }

.sticker {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .5em 1em;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-berry);
  font-weight: 600; font-size: var(--step-n1);
  box-shadow: var(--shadow-2);
  transform: rotate(-4deg);
  transition: transform var(--dur-3) var(--ease-bounce);
}
.sticker:hover { transform: rotate(3deg) scale(1.05); }
[dir="rtl"] .sticker { transform: rotate(4deg); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-3);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--divider);
}
.card-glass {
  background: hsl(0 0% 100% / .62);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid hsl(0 0% 100% / .7);
  box-shadow: var(--shadow-2);
}
.card-feature { display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--dur-3) var(--ease-out-soft), box-shadow var(--dur-3) var(--ease-out-soft); }
.card-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card-icon { width: 3rem; height: 3rem; border-radius: var(--radius-2); display: grid; place-content: center; background: var(--surface-tint); color: var(--primary); }
.card-icon .icon { width: 1.5rem; height: 1.5rem; }

/* ---------- Accordion (native details) ---------- */
.accordion { border-top: 1px solid var(--divider); }
.accordion details { border-bottom: 1px solid var(--divider); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0;
  font-weight: 500; font-size: var(--step-1);
  cursor: pointer; list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { transition: transform var(--dur-3) var(--ease-out-soft); color: var(--primary); }
.accordion details[open] summary .icon { transform: rotate(45deg); }
.accordion .accordion-body { padding-bottom: var(--space-5); color: var(--ink-muted); max-width: var(--measure); }

/* ---------- Toast ---------- */
.toast-region { position: fixed; inset-inline: 0; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: var(--space-2); z-index: 90; pointer-events: none; padding-inline: var(--gutter); }
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: .8em 1.2em;
  border-radius: var(--radius-pill);
  background: var(--ink); color: var(--surface);
  box-shadow: var(--shadow-3);
  font-size: var(--step-n1);
  pointer-events: auto;
  animation: toast-in var(--dur-3) var(--ease-bounce);
}
.toast .icon { color: var(--gold-200); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ---------- Skeleton ---------- */
.skeleton { border-radius: var(--radius-1); background: linear-gradient(90deg, var(--rose-50), var(--rose-100), var(--rose-50)); background-size: 200% 100%; animation: skeleton 1.4s linear infinite; min-height: 1em; }
@keyframes skeleton { to { background-position: -200% 0; } }

/* ---------- Announcement bar ---------- */
.announce { background: var(--ink); color: var(--surface); font-size: var(--step-n1); }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 2.5rem; padding-block: var(--space-2); text-align: center; }
.announce a { color: var(--gold-200); font-weight: 500; }
.announce a:hover { color: var(--surface); }
.announce-close { flex: none; display: grid; place-content: center; width: 2.25rem; height: 2.25rem; border: 0; background: transparent; color: var(--surface); border-radius: 50%; cursor: pointer; }
.announce-close:hover { background: hsl(0 0% 100% / .12); }
.announce .icon { color: var(--gold-200); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: transform var(--dur-3) var(--ease-out-soft), background-color var(--dur-3), box-shadow var(--dur-3); }
.site-header.is-scrolled { background: hsl(330 40% 98% / .82); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--divider); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4.5rem; }

.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-word { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1; }
.brand-word-ar { font-family: var(--font-display-ar); font-style: normal; font-weight: 600; font-size: var(--step-1); color: var(--primary); }
:lang(ar) .brand-word { font-family: var(--font-display-ar); font-style: normal; font-weight: 700; }

.nav ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9em; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: var(--step-n1); font-weight: 450; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--surface-tint); color: var(--ink-berry); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.lang-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .8em; border-radius: var(--radius-pill); border: 1.5px solid var(--divider); color: var(--ink); text-decoration: none; font-size: var(--step-n1); font-weight: 500; }
.lang-toggle:hover { border-color: var(--ink); color: var(--ink); }
.lang-toggle:lang(ar) { font-family: var(--font-display-ar); font-size: var(--step-0); }

.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--divider); background: var(--surface); color: var(--ink); place-content: center; cursor: pointer; }

.mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--space-6); overflow-y: auto; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobile-menu nav a { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; border-bottom: 1px solid var(--divider); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: var(--step-3); }
:lang(ar) .mobile-menu nav a { font-family: var(--font-display-ar); }

@media (max-width: 60rem) {
  .nav, .header-actions .btn { display: none; }
  .menu-toggle { display: grid; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--plum-200); padding-block: var(--space-9) var(--space-7); margin-top: var(--space-8); }
.site-footer a { color: var(--surface); text-decoration: none; }
.site-footer a:hover { color: var(--gold-200); text-decoration: underline; }
.footer-grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(10rem, 1fr)); }
.footer-grid h2 { font-family: var(--font-body); font-size: var(--step-n1); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-200); font-weight: 500; margin-bottom: var(--space-4); }
:lang(ar) .footer-grid h2 { letter-spacing: 0; text-transform: none; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-brand .brand-word { color: var(--surface); }
.footer-brand p { margin-top: var(--space-4); max-width: 32ch; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--plum-800); font-size: var(--step-n1); }
@media (max-width: 40rem) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-2); border: 1px solid var(--divider); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--step-n1); }
th, td { padding: .75em 1em; text-align: start; border-bottom: 1px solid var(--divider); vertical-align: top; }
th { font-weight: 500; color: var(--ink-muted); background: var(--plum-50); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* pages.css */
/* Page sections. Tokens only. */

.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.back-arrow { transform: scaleX(-1); }
[dir="rtl"] .back-arrow { transform: none; }
.h3-size { font-size: var(--step-2); }
.section-head { display: grid; gap: var(--space-3); max-width: 46rem; }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tick-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.tick-list .icon { color: var(--success); margin-top: .2em; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--gradient-hero); padding-block: var(--space-7) var(--space-9); overflow: clip; }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero-copy { max-width: 38rem; }
.hero h1 { font-size: var(--step-7); }
:lang(ar) .hero h1 { font-size: var(--step-6); }
.hero-sub h1 { font-size: var(--step-6); }
:lang(ar) .hero-sub h1 { font-size: var(--step-5); }
.hero-quiz { align-self: flex-start; margin-inline-start: -.6em; }
.hero-visual { position: relative; display: grid; place-items: center; min-height: 34rem; }
.hero-pearl {
  position: absolute;
  width: min(30rem, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  inset-inline-end: -8%;
  top: 2%;
  background:
    radial-gradient(circle at 30% 26%, var(--surface) 0 10%, transparent 42%),
    radial-gradient(circle at 70% 78%, var(--rose-100) 0 18%, transparent 55%),
    var(--gradient-iridescent);
  box-shadow: inset -2.5rem -3rem 6rem hsl(var(--shadow-tint) / .16), inset 1.5rem 1.5rem 4rem var(--surface), var(--shadow-3);
  opacity: .92;
}
.hero-sticker { position: absolute; z-index: 2; bottom: 9%; inset-inline-start: 0; }
@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .hero-visual { min-height: 30rem; }
  .hero-pearl { width: min(24rem, 80%); inset-inline-end: 0; }
}

/* Join form */
.join-form { display: grid; gap: var(--space-3); max-width: 34rem; }
.join-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.join-row .input { flex: 1 1 15rem; min-height: 3.5rem; border-radius: var(--radius-pill); padding-inline: 1.3em; }
.join-row .btn { flex: 0 0 auto; }
@media (max-width: 30rem) { .join-row .btn { flex: 1 1 100%; } }
.join-msg:empty { display: none; }
.join-trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--step-n1); color: var(--ink-muted); }
.join-trust span { display: inline-flex; align-items: center; gap: .35em; }
.join-trust .icon { color: var(--success); width: 1.05em; height: 1.05em; }
.join-done { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-2); background: var(--green-50); color: var(--ink); border: 1px solid var(--green-200); }
.join-done .icon { color: var(--success); margin-top: .15em; }

/* ---------- Phone mock-up (real HTML, mirrors the iOS app) ---------- */
.phone {
  position: relative;
  z-index: 1;
  width: min(19rem, 78vw);
  aspect-ratio: 9 / 19;
  border-radius: 2.8rem;
  padding: .6rem;
  background: var(--ink);
  box-shadow: var(--shadow-3), 0 0 0 1px hsl(0 0% 100% / .08) inset;
  transform: rotate(-3deg);
}
[dir="rtl"] .phone { transform: rotate(3deg); }
.phone-screen {
  height: 100%;
  border-radius: 2.25rem;
  background: var(--plum-50);
  overflow: hidden;
  padding: 1.6rem .95rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .7rem;
  line-height: 1.35;
}
.ph-top { display: flex; justify-content: space-between; align-items: center; }
.ph-brand { font-family: var(--font-display); font-style: italic; color: var(--primary); font-size: 1rem; }
:lang(ar) .ph-brand { font-family: var(--font-display-ar); font-style: normal; font-weight: 700; }
.ph-lang { display: grid; place-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--divider); font-size: .62rem; }
.ph-greet { color: var(--ink-muted); }
.ph-name { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; margin-top: -.3rem; }
:lang(ar) .ph-name { font-family: var(--font-display-ar); font-weight: 700; }
.ph-card { background: var(--surface); border: 1px solid var(--divider); border-radius: .9rem; padding: .6rem; }
.ph-hero { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.ph-ring { width: 4rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; background:
  radial-gradient(circle, transparent 55%, transparent 56%), conic-gradient(var(--primary) calc(var(--p) * 360deg), var(--divider) 0); position: relative; }
.ph-ring::before { content: ""; position: absolute; inset: .3rem; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--surface) 0 12%, transparent 46%), var(--gradient-iridescent); }
.ph-ring span { position: relative; font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.ph-hero-body { display: grid; gap: .15rem; }
.ph-eyebrow { font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
:lang(ar) .ph-eyebrow { letter-spacing: 0; }
.ph-hero-body b { font-family: var(--font-display); font-weight: 500; font-size: .9rem; line-height: 1.15; }
:lang(ar) .ph-hero-body b { font-family: var(--font-display-ar); font-weight: 700; }
.ph-when { color: var(--ink-muted); font-size: .6rem; }
.ph-progress { font-size: .58rem; font-weight: 600; margin-top: .1rem; }
.ph-step { justify-self: start; display: inline-flex; align-items: center; gap: .25rem; margin-top: .15rem; padding: .2rem .5rem; border-radius: 99px; background: var(--surface-tint); color: var(--primary); font-size: .58rem; font-weight: 600; }
.ph-step .icon { width: .65rem; height: .65rem; }
.ph-chev { font-size: .7rem; line-height: 1; }
.ph-invite { display: flex; gap: .45rem; align-items: flex-start; font-size: .56rem; }
.ph-invite > div { display: grid; gap: .3rem; }
.ph-buttons { display: flex; gap: .25rem; }
.ph-buttons i { font-style: normal; font-weight: 600; font-size: .52rem; padding: .15rem .45rem; border-radius: 99px; border: 1px solid var(--divider); }
.ph-buttons i.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ph-strip { padding: .55rem .65rem; border-radius: .9rem; background: var(--gold-100); font-size: .6rem; }
.ph-pots { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ph-pots .ph-card { display: grid; gap: .2rem; }
.ph-pots b { font-size: .6rem; font-weight: 600; }
.ph-pots span { font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-pots i { display: block; height: .25rem; border-radius: 99px; background: linear-gradient(90deg, var(--primary) var(--w), var(--divider) 0); }
.ph-pots em { font-style: normal; font-size: .5rem; color: var(--ink-muted); }
.ph-pots em.ph-ok { justify-self: start; padding: .05rem .4rem; border-radius: 99px; background: var(--green-100); color: var(--success); font-weight: 600; }
[dir="rtl"] .ph-pots i { background: linear-gradient(-90deg, var(--primary) var(--w), var(--divider) 0); }
.ph-year { margin-top: .1rem; }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ph-tiles .ph-card { display: grid; gap: .1rem; align-content: start; }
.ph-tiles b { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ph-tiles span { font-size: .52rem; color: var(--ink-muted); }
/* On narrow screens the phone shrinks but its text doesn't, so drop the least important block */
@media (max-width: 420px) { .ph-year, .ph-tiles { display: none; } }
.ph-nudge { display: flex; gap: .45rem; align-items: flex-start; font-size: .58rem; }
.ph-dot { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--surface-tint); box-shadow: inset 0 0 0 .3rem var(--rose-200); }
.ph-tabs { margin-top: auto; display: flex; justify-content: space-around; padding-top: .45rem; border-top: 1px solid var(--divider); }
.ph-tabs i { width: .9rem; height: .9rem; border-radius: .3rem; background: var(--plum-200); }
.ph-tabs i.on { background: var(--primary); }

/* ---------- Facts strip ---------- */
.facts { background: var(--ink); color: var(--plum-100); padding-block: var(--space-7); }
.facts-title { font-family: var(--font-body); font-size: var(--step-n1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-200); margin-bottom: var(--space-5); }
:lang(ar) .facts-title { letter-spacing: 0; text-transform: none; font-family: var(--font-body); }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.facts-list li { display: grid; gap: var(--space-2); }
.fact-num { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; color: var(--surface); }
.facts-list p { max-width: 32ch; color: var(--plum-200); }
.facts-src { margin-top: var(--space-5); color: var(--plum-300); }

/* ---------- Features ---------- */
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.feature-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.card-cta { background: var(--ink); color: var(--surface); border-color: var(--ink); justify-content: space-between; }
.card-cta h3 { color: var(--surface); }
.card-cta p { color: var(--plum-200); }
.card-cta .btn { align-self: flex-start; margin-top: var(--space-3); }

/* ---------- Story with the pearl strand ---------- */
.story-grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.story-visual { position: sticky; top: 7rem; display: grid; place-items: center; min-height: 26rem; }
.strand { position: relative; width: min(24rem, 100%); aspect-ratio: 1; }
.strand::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1.5px solid var(--accent-decor); opacity: .55; }
.strand-pearl {
  --a: calc(var(--i) * 72deg - 90deg);
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  left: calc(50% + 38% * cos(var(--a)) - 11%);
  top: calc(50% + 38% * sin(var(--a)) - 11%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--surface) 0 12%, transparent 46%), var(--gradient-iridescent);
  box-shadow: inset -.6rem -.8rem 1.4rem hsl(var(--shadow-tint) / .18), var(--shadow-2);
  transition: transform var(--dur-4) var(--ease-out-soft), box-shadow var(--dur-4);
}
.strand-pearl.is-lit { transform: scale(1.22); box-shadow: inset -.6rem -.8rem 1.4rem hsl(var(--shadow-tint) / .18), 0 0 0 4px var(--surface), 0 0 40px var(--rose-200); }
.story-steps { display: grid; gap: var(--space-6); }
.story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.story-step { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-3); background: var(--surface); box-shadow: var(--shadow-1); }
.story-n { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-berry); }
.story-steps > .btn { justify-self: start; }
@media (max-width: 60rem) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-visual { position: relative; top: 0; min-height: 18rem; }
  .strand { width: min(17rem, 80%); }
}

/* ---------- Year strip ---------- */
.year { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.year li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius-3); background: var(--surface); border: 1px solid var(--divider); }
.year-date { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-berry); }
:lang(ar) .year-date { font-family: var(--font-display-ar); font-weight: 600; }
.year b { font-weight: 500; }
.year .chip { justify-self: start; }
.year-yours { background: var(--gradient-iridescent) !important; border-color: transparent !important; }

/* ---------- How it works ---------- */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); counter-reset: none; }
.how li { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-3); background: var(--surface); }
.how-n { display: grid; place-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 600; }
.how-compact li { padding: var(--space-5); border: 1px solid var(--divider); }

/* ---------- Privacy ---------- */
.privacy-band { background: var(--ink); color: var(--plum-100); }
.privacy-band h2 { color: var(--surface); }
.privacy-band .lead { color: var(--plum-200); }
.privacy-band .eyebrow { color: var(--gold-200); }
.privacy-grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.privacy-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.privacy-points li { display: flex; gap: var(--space-4); align-items: flex-start; }
.privacy-points .icon { flex: none; width: 1.6rem; height: 1.6rem; color: var(--gold-200); margin-top: .1em; }
.privacy-points b { color: var(--surface); font-weight: 500; }
.privacy-points .muted { color: var(--plum-200); }
@media (max-width: 52rem) { .privacy-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* ---------- Name story ---------- */
.name-grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: center; }
.name-pearl { aspect-ratio: 1; max-width: 18rem; width: 100%; }
.name-pearl .pearl { width: 100%; height: 100%; box-shadow: inset -2rem -2.4rem 4rem hsl(var(--shadow-tint) / .2), var(--shadow-3); }
@media (max-width: 52rem) { .name-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .name-pearl { max-width: 9rem; } }

/* ---------- Comparison ---------- */
.compare th[scope="row"] { font-weight: 450; color: var(--ink); background: transparent; }
.compare thead th { text-align: center; }
.compare td { text-align: center; }
.compare .compare-durra { background: var(--rose-50); color: var(--ink-berry); font-weight: 600; }
.compare thead .compare-durra { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); }
:lang(ar) .compare thead .compare-durra { font-family: var(--font-display-ar); font-style: normal; }
.compare .yes, .compare .no, .compare .part { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.compare .yes { color: var(--success); font-weight: 600; }
.compare .yes::before { content: "●"; font-size: .7em; }
.compare .no { color: var(--ink-muted); }
.compare .part { color: var(--warning); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 52rem) { .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

/* ---------- Sellers band ---------- */
.sellers-band-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-7); border-radius: var(--radius-4); background: var(--secondary); }
.sellers-band-inner > .stack { max-width: 40rem; }

/* ---------- Final CTA ---------- */
.final-cta { background: var(--gradient-hero); }
.final-inner { align-items: center; text-align: center; }
.final-inner .lead { margin-inline: auto; }
.final-inner .join-form { width: 100%; margin-inline: auto; }
.final-inner .join-trust { justify-content: center; }
.final-pearl { --size: 4.5rem; }

/* ---------- Sellers page ---------- */
.seller-card-demo { position: relative; z-index: 1; width: min(22rem, 86vw); transform: rotate(2deg); }
[dir="rtl"] .seller-card-demo { transform: rotate(-2deg); }
.demo-mono { display: grid; place-content: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--gradient-iridescent); font-family: var(--font-display); font-size: var(--step-2); }
:lang(ar) .demo-mono { font-family: var(--font-display-ar); font-weight: 700; }
.demo-dots { display: inline-flex; }
.demo-dots i { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--surface); margin-inline-start: -.45rem; background: radial-gradient(circle at 32% 28%, var(--surface) 0 14%, transparent 50%), var(--gradient-iridescent); }
.demo-dots i:first-child { margin-inline-start: 0; }
.demo-order { display: flex; align-items: center; gap: var(--space-2); justify-content: center; min-height: 2.75rem; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-weight: 550; font-size: var(--step-n1); }
.who-card { max-width: 46rem; display: grid; gap: var(--space-4); }
.apply-grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 60rem) { .apply-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }
.form-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 1.3em) 55%, calc(100% - .95em) 55%; background-size: .35em .35em; background-repeat: no-repeat; padding-inline-end: 2.5em; }
[dir="rtl"] select.input { background-position: 1.3em 55%, .95em 55%; }
textarea.input { min-height: 7rem; resize: vertical; line-height: 1.5; }
.form-msg:empty { display: none; }

/* Chip-style checkboxes */
.chip-choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-choice legend { margin-bottom: var(--space-3); }
.chip-choice label { position: relative; cursor: pointer; }
.chip-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-choice span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1em; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--surface); font-size: var(--step-n1); transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.chip-choice input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip-choice input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Quiz ---------- */
.quiz-section { background: var(--gradient-hero); min-height: 70vh; }
.quiz-wrap { max-width: 44rem; display: grid; gap: var(--space-6); }
.quiz-head h1 { font-size: var(--step-5); }
.quiz-card { display: grid; gap: var(--space-5); }
.quiz-progress { height: .5rem; border-radius: var(--radius-pill); background: var(--plum-100); overflow: hidden; }
.quiz-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary); transition: width var(--dur-3) var(--ease-out-soft); }
.quiz-q { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.quiz-q legend { padding: 0; margin-bottom: var(--space-3); }
.quiz-q legend h2 { font-size: var(--step-3); }
.quiz-opt { position: relative; display: block; cursor: pointer; }
.quiz-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.quiz-opt span { display: flex; align-items: center; min-height: 3.5rem; padding: .8em 1.2em; border-radius: var(--radius-2); border: 1.5px solid var(--divider); background: var(--surface); transition: border-color var(--dur-2), background-color var(--dur-2), transform var(--dur-2) var(--ease-out-soft); }
.quiz-opt:hover span { border-color: var(--border); transform: translateY(-1px); }
.quiz-opt input:checked + span { border-color: var(--primary); background: var(--rose-50); color: var(--ink-berry); font-weight: 500; }
.quiz-opt input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.quiz-nav { min-height: 3rem; }
.quiz-result { display: grid; gap: var(--space-6); }
.result-top { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-5); align-items: center; }
@media (max-width: 30rem) { .result-top { grid-template-columns: minmax(0, 1fr); } }
.result-ring { width: 7.5rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; position: relative; background: conic-gradient(var(--primary) calc(var(--p) * 360deg), var(--divider) 0); transition: --p var(--dur-5); }
.result-ring::before { content: ""; position: absolute; inset: .55rem; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--surface) 0 12%, transparent 46%), var(--gradient-iridescent); }
.result-ring span { position: relative; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }
.result-join { padding-top: var(--space-5); border-top: 1px solid var(--divider); }
.quiz-result > .btn-ghost { justify-self: start; }

/* ---------- Welcome ---------- */
.welcome { background: var(--gradient-hero); }
.welcome-wrap { max-width: 50rem; }
.welcome-head { align-items: flex-start; }
.welcome-pearl { --size: 4rem; }
.share-card { justify-content: space-between; }

/* ---------- Legal and support ---------- */
.legal { padding-block: var(--space-8) var(--space-9); }
.legal-wrap { max-width: 48rem; display: grid; gap: var(--space-6); }
.legal-head h1 { font-size: var(--step-5); }
.legal .prose h2 { font-family: var(--font-body); font-size: var(--step-1); font-weight: 600; }
:lang(ar) .legal .prose h2 { font-family: var(--font-body); }
.legal .prose li + li { margin-top: .4em; }
.support-grid { max-width: 48rem; display: grid; gap: var(--space-7); }

/* ---------- 404 ---------- */
.notfound { background: var(--gradient-hero); min-height: 60vh; display: grid; place-items: center; }
.notfound-inner { align-items: center; text-align: center; }
.notfound-pearl { --size: 6rem; animation: roll 6s var(--ease-in-out) infinite alternate; }
@keyframes roll { from { transform: translateX(-1.5rem) rotate(-30deg); } to { transform: translateX(1.5rem) rotate(30deg); } }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.quiz-nav [data-quiz-next] { margin-inline-start: auto; }
.ph-list { display: grid; gap: .3rem; }
.ph-row { display: flex; justify-content: space-between; gap: .4rem; font-size: .6rem; padding-top: .3rem; border-top: 1px solid var(--divider); }
.ph-row b { font-weight: 500; }
.ph-row span { color: var(--ink-muted); white-space: nowrap; }

/* ---------- Values ---------- */
.values { background: var(--bg); }
.values-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.value-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-3); background: var(--surface); border: 1px solid var(--divider); box-shadow: var(--shadow-1); }
.value-term { font-family: var(--font-display-ar); font-weight: 700; font-size: var(--step-3); line-height: 1.2; color: var(--ink-berry); }
.value-card h3 { font-size: var(--step-1); }
:lang(ar) .value-term { display: none; } /* on Arabic pages the heading itself is the Arabic term */
:lang(ar) .value-card h3 { font-size: var(--step-2); color: var(--ink-berry); }
.value-quote { margin: auto 0 0; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-inline-start: 3px solid var(--accent-decor); background: var(--gold-50); border-radius: 0 var(--radius-1) var(--radius-1) 0; }
[dir="rtl"] .value-quote { border-radius: var(--radius-1) 0 0 var(--radius-1); }
.value-quote p { font-family: var(--font-display); font-style: italic; font-size: var(--step-0); line-height: 1.5; color: var(--ink); }
:lang(ar) .value-quote p { font-family: var(--font-display-ar); font-style: normal; font-weight: 500; font-size: var(--step-1); line-height: 1.9; }
.value-quote cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: var(--step-n1); color: var(--ink-muted); }

/* styleguide.css */
/* Style-guide page only */

.sg-hero { background: var(--gradient-hero); padding-block: var(--space-9) var(--space-7); }
.sg-toc ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.sg-toc .chip { text-decoration: none; }
.sg-toc .chip:hover { border-color: var(--ink); color: var(--ink); }

.swatch-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.swatch { display: grid; gap: var(--space-1); font-size: var(--step-n1); }
.swatch-chip { height: 4.5rem; border-radius: var(--radius-2); border: 1px solid var(--divider); }
.swatch code { font-size: .85em; }
.swatch-hex { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.scales { display: grid; gap: var(--space-3); }
.scale { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.scale-name { font-size: var(--step-n1); }
.scale-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); border-radius: var(--radius-1); overflow: hidden; direction: ltr; }
.scale-steps li { height: 2.75rem; display: grid; place-items: end start; padding: .25rem .35rem; font-size: .68rem; font-variant-numeric: tabular-nums; }
.scale-steps .on-light { color: var(--ink); }
.scale-steps .on-dark { color: var(--surface); }
@media (max-width: 40rem) { .scale { grid-template-columns: minmax(0, 1fr); } .scale-steps li span { display: none; } }

.sg-iris { height: 7rem; border-radius: var(--radius-4); background: var(--gradient-iridescent); box-shadow: var(--shadow-2); }

.contrast .sample { display: inline-block; padding: .3em .7em; border-radius: 8px; border: 1px solid var(--divider); font-weight: 500; }
.contrast .hex { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.result { display: inline-block; padding: .15em .7em; border-radius: var(--radius-pill); font-weight: 500; }
.res-pass { background: var(--green-100); color: var(--success); }
.res-fail { background: var(--red-100); color: var(--error); }
.res-decor { background: var(--plum-100); color: var(--ink-muted); }

.type-scale { display: grid; gap: var(--space-2); }
.type-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-4); padding-block: var(--space-2); border-bottom: 1px solid var(--divider); }
.type-row code { font-size: var(--step-n2); color: var(--ink-muted); }
.type-row p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.type-display { font-family: var(--font-display); }
:lang(ar) .type-display { font-family: var(--font-display-ar); font-weight: 600; }

.sg-states { display: grid; gap: var(--space-5); }
.sg-state-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
@media (max-width: 40rem) { .sg-state-row, .type-row { grid-template-columns: minmax(0, 1fr); } }
.sg-label { font-size: var(--step-n1); font-weight: 500; color: var(--ink-muted); }

.sg-ease { position: relative; padding: var(--space-5); border-radius: var(--radius-2); background: var(--surface); border: 1px solid var(--divider); display: grid; gap: var(--space-4); }
.sg-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--gradient-iridescent); box-shadow: var(--shadow-1); transition: transform var(--dur-5) var(--ease); }
.sg-ease:hover .sg-dot { transform: translateX(min(9rem, 60%)); }
[dir="rtl"] .sg-ease:hover .sg-dot { transform: translateX(max(-9rem, -60%)); }

.sg-radii span, .sg-shadows span { display: grid; place-content: center; width: 6rem; height: 4.5rem; background: var(--surface); border: 1px solid var(--divider); font-size: var(--step-n1); color: var(--ink-muted); }
.sg-shadows span { border-radius: var(--radius-2); border: 0; }