/* ==========================================================================
   Mogtama3 by HAiCapita: shared design tokens and components
   One file serves mogtama3.com and dafa.mogtama3.com.
   Colours: HAiCapita palette plus warm neutrals. Add no others.
   ========================================================================== */

:root {
  /* Palette */
  --night: #063540;      /* Sovereign Night: dark blocks, hero, footer */
  --abyss: #0A3D4A;      /* Deep Abyss: dark blocks */
  --teal: #0B7A8F;       /* Sovereign Teal: actions, links, Wa3i */
  --gold: #E4B44C;       /* Intelligence Gold: accents, Dafa; text only on Night/Abyss */
  --gold-aged: #C49A30;  /* Aged Gold: accents */
  --mist: #EBF4F6;       /* Teal Mist: light tint blocks, Hemma */
  --sand: #F7F2E8;       /* Sand: warm backgrounds */
  --sand2: #EFE6D3;      /* Sand 2: warm backgrounds */
  --ink: #0A2730;        /* Headings */
  --body: #31474F;       /* Body text, small captions */
  --mute: #7A8D94;       /* Large captions, field borders (3.46:1 on white) */
  --line: #DFE5E5;       /* Decorative borders */
  --clay: #B4472C;       /* Dafa only; error text */
  --nile: #2C7A5B;       /* Mizan only */
  --white: #FFFFFF;

  /* Type */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --f-ar: 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', sans-serif;

  /* Shape */
  --r-sm: 12px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-pill: 999px;

  /* Depth: layered shadows tinted with Sovereign Night, plus inner hairline */
  --hair: inset 0 0 0 1px rgba(6, 53, 64, .08);
  --sh-1: 0 1px 2px rgba(6, 53, 64, .05), 0 6px 18px -6px rgba(6, 53, 64, .10);
  --sh-2: 0 2px 4px rgba(6, 53, 64, .06), 0 18px 40px -12px rgba(6, 53, 64, .20);
  --sh-3: 0 4px 8px rgba(6, 53, 64, .08), 0 32px 64px -20px rgba(6, 53, 64, .30);

  /* Context colours (overridden per section) */
  --fg: var(--ink);
  --fg-2: var(--body);
  --link: var(--teal);
  --ring: var(--teal);
  --rule: var(--gold-aged);
}

/* ---------- Display settings (set on <html> by the header) ---------- */
html[data-m3-text="lg"] { font-size: 118.75%; }
html[data-m3-contrast="high"] { --mute: #31474F; --line: #31474F; }
html[data-m3-contrast="high"] .m3,
html[data-m3-contrast="high"] .m3 * { --fg-2: var(--fg); }
html[data-m3-contrast="high"] .wash,
html[data-m3-contrast="high"] .wm,
html[data-m3-contrast="high"] .bleed__img { display: none !important; }
html[data-m3-contrast="high"] .m3 a:not(.btn):not(.card):not(.chip):not(.nav__a) { text-decoration: underline !important; }
html[data-m3-contrast="high"] .card,
html[data-m3-contrast="high"] .panel,
html[data-m3-contrast="high"] .chip { box-shadow: inset 0 0 0 2px currentColor !important; }

@keyframes m3-draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes m3-gather {
  from { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes m3-glow { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .6; transform: scale(1.08); } }
@keyframes m3-par { from { transform: translate3d(0, -5%, 0) scale(1.08); } to { transform: translate3d(0, 5%, 0) scale(1.08); } }
@keyframes m3-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .m3 *, .m3 *::before, .m3 *::after { animation: none !important; transition: none !important; }
}
html[data-m3-motion="reduce"] .m3 *,
html[data-m3-motion="reduce"] .m3 *::before,
html[data-m3-motion="reduce"] .m3 *::after { animation: none !important; transition: none !important; }

/* ---------- Base ---------- */
body { margin: 0; background: var(--white); color: var(--body); }
.m3 {
  container: page / inline-size;
  position: relative;
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'calt';
}
.m3 *, .m3 *::before, .m3 *::after { box-sizing: border-box; }
.m3:lang(ar) { font-family: var(--f-ar); font-size: 1.125rem; line-height: 1.75; }
.m3 :lang(ar) { font-family: var(--f-ar); }
.m3 [lang="ar"] { line-height: 1.75; }
.m3 img { max-width: 100%; display: block; }
.m3 h1, .m3 h2, .m3 h3, .m3 h4, .m3 h5, .m3 p, .m3 ul, .m3 ol, .m3 figure, .m3 blockquote, .m3 dl, .m3 dd { margin: 0; }
.m3 ul, .m3 ol { padding: 0; }
.m3 ul.list, .m3 ol.list { padding-inline-start: 1.25em; display: grid; gap: .5em; }
.m3 ul.list li::marker { color: var(--gold-aged); }
.m3 :where(a) { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.m3 :where(a):hover { text-decoration-thickness: 2px; }
.m3 :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.m3 button { font: inherit; }
.m3 strong, .m3 b { color: var(--fg); font-weight: 600; }
.m3 ::selection { background: var(--gold); color: var(--night); }

/* LTR islands inside Arabic: numbers, emails, URLs, phone numbers, Latin names */
.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .dir-icon { transform: scaleX(-1); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -200px; z-index: 100; background: var(--night); color: var(--white) !important; padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; outline: 3px solid var(--gold); }

/* ---------- Type scale (Latin), Arabic one step larger ---------- */
.t-hero, .t-h1, .t-h2, .t-h3, .t-num { font-family: var(--f-display); font-weight: 600; color: var(--fg); font-optical-sizing: auto; }
.t-hero { font-size: clamp(2.5rem, 1.15rem + 4.6cqi, 5.25rem); line-height: 1.02; letter-spacing: -0.028em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.t-h1 { font-size: clamp(2.2rem, 1.15rem + 3.1cqi, 4rem); line-height: 1.05; letter-spacing: -0.024em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.t-h2 { font-size: clamp(1.85rem, 1.1rem + 2.2cqi, 3rem); line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: 'opsz' 96, 'SOFT' 30; }
.t-h3 { font-size: clamp(1.3rem, 1.05rem + .7cqi, 1.625rem); line-height: 1.22; letter-spacing: -0.01em; font-variation-settings: 'opsz' 48; }
.t-h4 { font-family: var(--f-sans); font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: var(--fg); }
.t-num { font-size: clamp(2.6rem, 1.6rem + 2.6cqi, 4rem); line-height: 1; letter-spacing: -0.03em; font-variation-settings: 'opsz' 144; }
.t-lead { font-size: clamp(1.125rem, 1rem + .45cqi, 1.375rem); line-height: 1.55; color: var(--fg-2); }
.t-body { font-size: 1rem; line-height: 1.65; }
.t-small { font-size: .875rem; line-height: 1.55; }
.t-label { font-family: var(--f-mono); font-weight: 500; font-size: .75rem; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.t-mono { font-family: var(--f-mono); font-size: .875rem; letter-spacing: 0; }
.t-meaning { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: .9375rem; line-height: 1.45; color: var(--fg-2); font-variation-settings: 'opsz' 14; }
.t-gold { color: var(--gold); }   /* only inside .on-dark sections */
.t-fg { color: var(--fg); }
.t-fg2 { color: var(--fg-2); }
.t-center { text-align: center; }
.measure { max-width: 62ch; }
.measure-s { max-width: 44ch; }

.t-hero:lang(ar) { font-family: var(--f-ar); font-weight: 700; font-size: clamp(2.75rem, 1.3rem + 4.9cqi, 5.5rem); line-height: 1.3; letter-spacing: 0; }
.t-h1:lang(ar) { font-family: var(--f-ar); font-weight: 700; font-size: clamp(2.4rem, 1.3rem + 3.3cqi, 4.25rem); line-height: 1.32; letter-spacing: 0; }
.t-h2:lang(ar) { font-family: var(--f-ar); font-weight: 700; font-size: clamp(2rem, 1.2rem + 2.4cqi, 3.25rem); line-height: 1.38; letter-spacing: 0; }
.t-h3:lang(ar) { font-family: var(--f-ar); font-weight: 600; font-size: clamp(1.4rem, 1.15rem + .75cqi, 1.75rem); line-height: 1.45; letter-spacing: 0; }
.t-h4:lang(ar) { font-size: 1.25rem; line-height: 1.55; }
.t-num:lang(ar) { font-family: var(--f-display); }
.t-lead:lang(ar) { font-size: clamp(1.25rem, 1.1rem + .45cqi, 1.5rem); line-height: 1.75; }
.t-body:lang(ar) { font-size: 1.125rem; line-height: 1.75; }
.t-small:lang(ar) { font-size: 1rem; line-height: 1.7; }
.t-label:lang(ar) { font-family: var(--f-ar); font-weight: 600; font-size: .9375rem; letter-spacing: 0; text-transform: none; }
.t-meaning:lang(ar) { font-family: var(--f-ar); font-style: normal; font-size: 1rem; }

/* ---------- Sections and colour blocks ---------- */
.sec { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 8cqi, 128px); }
.sec--tight { padding-block: clamp(40px, 5cqi, 72px); }
.sec--white { background: var(--white); }
.sec--sand { background: var(--sand); --link: var(--night); }
.sec--sand2 { background: var(--sand2); --link: var(--night); }
.sec--mist { background: var(--mist); --link: var(--night); }
.sec--night, .sec--abyss, .on-dark { --fg: var(--white); --fg-2: var(--mist); --link: var(--gold); --ring: var(--gold); --rule: var(--gold); color: var(--mist); }
.sec--night { background: var(--night); }
.sec--abyss { background: var(--abyss); }
.sec--teal, .on-teal { background: var(--teal); --fg: var(--white); --fg-2: var(--white); --link: var(--white); --ring: var(--white); --rule: var(--white); color: var(--white); }
.sec--nile, .on-nile { background: var(--nile); --fg: var(--white); --fg-2: var(--sand); --link: var(--white); --ring: var(--white); --rule: var(--sand); color: var(--sand); }
.wrap { position: relative; width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4.5cqi, 64px); }
.wrap--narrow { max-width: 880px; }
.wrap--wide { max-width: 1400px; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }

/* Watermark: one large glyph per section at 4 to 5% opacity */
.wm { position: absolute; z-index: -1; pointer-events: none; opacity: .05; color: var(--fg); inset-inline-end: -3%; top: 50%; transform: translateY(-50%); }
.wm--start { inset-inline-end: auto; inset-inline-start: -3%; }
.on-dark .wm, .sec--night .wm, .sec--abyss .wm { opacity: .06; color: var(--gold); }

/* Duotone photo textures (Sovereign Night to Teal Mist), low-opacity wash with slow parallax */
.wash { position: absolute; inset: -6% 0; z-index: -2; pointer-events: none; background-size: cover; background-position: center; opacity: .2; mix-blend-mode: luminosity; }
.wash--strong { opacity: .34; }
.sec--sand .wash, .sec--mist .wash, .sec--white .wash { opacity: .16; mix-blend-mode: multiply; }
@supports (animation-timeline: view()) {
  .wash { animation: m3-par linear both; animation-timeline: view(); animation-range: cover; }
}
/* Duotone sources (Wikimedia Commons, credited with PhotoCredit). Phones get the 960 px file. */
.wash--nile { background-image: url("/img/textures/nile-1920.webp"); }
.wash--muizz { background-image: url("/img/textures/muizz-1920.webp"); }
.wash--bibalex { background-image: url("/img/textures/bibalex-1920.webp"); }
.wash--azhar { background-image: url("/img/textures/azhar-1920.webp"); }
.wash--benban { background-image: url("/img/textures/benban-1920.webp"); }
@container page (max-width: 640px) {
  .wash--nile { background-image: url("/img/textures/nile-960.webp"); }
  .wash--muizz { background-image: url("/img/textures/muizz-960.webp"); }
  .wash--bibalex { background-image: url("/img/textures/bibalex-960.webp"); }
  .wash--azhar { background-image: url("/img/textures/azhar-960.webp"); }
  .wash--benban { background-image: url("/img/textures/benban-960.webp"); }
}

/* Full-bleed photo divider behind a dark scrim */
.bleed { position: relative; isolation: isolate; overflow: hidden; background: var(--night); min-height: clamp(260px, 30cqi, 440px); display: flex; align-items: flex-end; color: var(--mist); --fg: var(--white); --fg-2: var(--mist); --link: var(--gold); --ring: var(--gold); }
.bleed__img, .bleed__img.wash { position: absolute; inset: -6% 0; z-index: -2; background-size: cover; background-position: center; opacity: .62; mix-blend-mode: normal; }
.bleed__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(6, 53, 64, .55); }
@supports (animation-timeline: view()) {
  .bleed__img { animation: m3-par linear both; animation-timeline: view(); animation-range: cover; }
}
.credit { font-family: var(--f-mono); font-size: .75rem; line-height: 1.5; color: var(--fg-2); }
.credit a { color: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7rem 1.5rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; background: transparent; color: var(--fg);
  font-family: var(--f-sans); font-weight: 600; font-size: 1rem; line-height: 1.25;
  text-decoration: none !important; text-align: center; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:lang(ar) { font-family: var(--f-ar); font-size: 1.0625rem; }
.btn:hover { transform: translateY(-1px); }
.btn--sm { min-height: 44px; padding: .5rem 1.1rem; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: .9rem 1.85rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--teal); color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--sh-1); }
.btn--primary:hover { background: var(--abyss); box-shadow: var(--sh-2); }
.btn--gold { background: var(--gold); color: var(--night); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--sh-1); }
.btn--gold:hover { background: var(--gold-aged); }
.btn--night { background: var(--night); color: var(--white); box-shadow: var(--sh-1); }
.btn--night:hover { background: var(--abyss); }
.btn--light { background: var(--white); color: var(--night); box-shadow: var(--sh-1); }
.btn--light:hover { background: var(--mist); }
.btn--ghost { border-color: currentColor; color: var(--fg); }
.btn--ghost:hover { background: rgba(6, 53, 64, .06); }
.on-dark .btn--ghost:hover, .sec--night .btn--ghost:hover, .sec--abyss .btn--ghost:hover, .sec--teal .btn--ghost:hover, .sec--nile .btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.btn--clay { background: var(--clay); color: var(--white); box-shadow: var(--sh-1); }
.btn--soon, .btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; transform: none !important; }
.btn--soon { background: transparent; color: var(--fg); border: 1.5px dashed currentColor; box-shadow: none; }
.btn--soon .pill { margin-inline-start: .25rem; }
.btn .ico { width: 1.15em; height: 1.15em; flex: none; }

/* Icon-only buttons (44px targets) */
.ibtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1.5px solid transparent; background: transparent; color: var(--fg); cursor: pointer; }
.ibtn:hover { background: rgba(6, 53, 64, .07); }
.on-dark .ibtn:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Pills and chips ---------- */
.pill { display: inline-flex; align-items: center; gap: .4em; padding: .28rem .7rem; border-radius: var(--r-pill); font-family: var(--f-sans); font-weight: 600; font-size: .75rem; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; }
.pill:lang(ar) { font-family: var(--f-ar); font-size: .875rem; }
.pill--gold { background: var(--gold); color: var(--night); }
.pill--sand { background: var(--sand2); color: var(--ink); }
.pill--mist { background: var(--mist); color: var(--night); }
.pill--white { background: var(--white); color: var(--night); box-shadow: var(--hair); }
.pill--night { background: var(--night); color: var(--white); }
.pill--glass { background: rgba(255, 255, 255, .12); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.pill--outline { box-shadow: inset 0 0 0 1px currentColor; color: var(--fg); }
.pill--sample { background: var(--sand2); color: var(--ink); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .6875rem; }
.pill--sample:lang(ar) { font-family: var(--f-ar); text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; padding-block: .3rem; padding-inline: .3rem 1rem; border-radius: var(--r-pill); background: var(--white); color: var(--ink) !important; text-decoration: none !important; font-weight: 500; font-size: .9375rem; line-height: 1.3; box-shadow: var(--hair), var(--sh-1); transition: transform .2s ease, box-shadow .2s ease; }
.chip:hover { transform: translateY(-2px); box-shadow: var(--hair), var(--sh-2); }
.chip__n { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--night); color: var(--gold); font-family: var(--f-mono); font-weight: 600; font-size: .875rem; }
.chip--plain { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mute); padding-inline: 1rem; }
.chip[aria-pressed="true"], .chip--on { background: var(--night); color: var(--white) !important; box-shadow: none; }

/* ---------- Cards and panels ---------- */
.card { position: relative; background: var(--white); border-radius: var(--r-card); padding: clamp(20px, 2.2cqi, 32px); color: var(--fg-2); box-shadow: var(--hair), var(--sh-1); }
.panel { position: relative; border-radius: var(--r-panel); padding: clamp(24px, 3.2cqi, 48px); box-shadow: var(--hair), var(--sh-1); background: var(--white); }
:where(a.card) { display: block; }
a.card, .card--link { text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; }
a.card:hover, .card--link:hover { transform: translateY(-2px); box-shadow: var(--hair), var(--sh-2); }
.card--sand { background: var(--sand); --link: var(--night); }
.card--sand2 { background: var(--sand2); --link: var(--night); }
.card--mist { background: var(--mist); --link: var(--night); }
.card--night { background: var(--night); --fg: var(--white); --fg-2: var(--mist); --link: var(--gold); --ring: var(--gold); color: var(--mist); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--sh-2); }
.card--abyss { background: var(--abyss); --fg: var(--white); --fg-2: var(--mist); --link: var(--gold); --ring: var(--gold); color: var(--mist); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--sh-2); }
.card--teal { background: var(--teal); --fg: var(--white); --fg-2: var(--white); --link: var(--white); --ring: var(--white); color: var(--white); }
.card--nile { background: var(--nile); --fg: var(--white); --fg-2: var(--sand); --link: var(--white); --ring: var(--white); color: var(--sand); }
.card--glass { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); --fg: var(--white); --fg-2: var(--mist); --link: var(--gold); --ring: var(--gold); color: var(--mist); }
:is(.sec--night, .sec--abyss, .sec--teal, .sec--nile, .on-dark) .panel:not([class*="card--"]):not(.on-dark):not(.on-teal):not(.on-nile) { --fg: var(--ink); --fg-2: var(--body); --link: var(--teal); --ring: var(--teal); color: var(--body); }
.on-dark .card:not([class*="card--"]) { --fg: var(--ink); --fg-2: var(--body); --link: var(--teal); --ring: var(--teal); }
/* Inset accent: a small gold dot inside the card (never an edge stripe) */
.adot { position: absolute; top: 20px; inset-inline-end: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(228, 180, 76, .18); }
.icon-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; flex: none; background: var(--mist); color: var(--night); }
.icon-tile--sand { background: var(--sand2); color: var(--clay); }
.icon-tile--night { background: var(--night); color: var(--gold); }
.icon-tile--glass { background: rgba(255,255,255,.1); color: var(--gold); }

/* Programme colours */
.prog--dafa { background: var(--sand); --fg: var(--ink); --fg-2: var(--body); --link: var(--night); --ring: var(--teal); --accent: var(--clay); color: var(--body); }
.prog--wa3i { background: var(--teal); --fg: var(--white); --fg-2: var(--white); --link: var(--white); --ring: var(--white); --accent: var(--white); color: var(--white); }
.prog--geel { background: var(--abyss); --fg: var(--white); --fg-2: var(--mist); --link: var(--gold); --ring: var(--gold); --accent: var(--gold); color: var(--mist); }
.prog--hemma { background: var(--mist); --fg: var(--night); --fg-2: var(--body); --link: var(--night); --ring: var(--teal); --accent: var(--night); color: var(--body); }
.prog--mizan { background: var(--nile); --fg: var(--white); --fg-2: var(--sand); --link: var(--white); --ring: var(--white); --accent: var(--sand); color: var(--sand); }

/* Fact tiles with visible source lines */
.fact { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.fact__src { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(122, 141, 148, .35); font-size: .8125rem; line-height: 1.5; color: var(--fg-2); }
.fact__src a { color: var(--link); word-break: break-word; }
.fact__src:lang(ar) { font-size: .9375rem; }

/* ---------- Grids (collapse by container width) ---------- */
.g { display: grid; gap: var(--gap, clamp(16px, 2cqi, 28px)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.g-split-r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.g-half { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }

/* Programmes bento: Dafa gets the largest card */
.bento { display: grid; gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); }
.bento > .b-dafa { grid-column: span 7; grid-row: span 2; }
.bento > .b-wa3i { grid-column: span 5; }
.bento > .b-geel { grid-column: span 5; }
.bento > .b-hemma { grid-column: span 6; }
.bento > .b-mizan { grid-column: span 6; }

@container page (max-width: 1100px) {
  .g-4, .g-5, .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-split, .g-split-r, .g-half { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > * { grid-column: span 1 !important; grid-row: auto !important; }
  .bento > .b-dafa { grid-column: 1 / -1 !important; }
  .hide-md { display: none !important; }
}
@container page (max-width: 640px) {
  .g-2, .g-3, .g-4, .g-5 { grid-template-columns: minmax(0, 1fr); }
  .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .bento > * { grid-column: 1 / -1 !important; }
  .span-2 { grid-column: auto; }
  .hide-sm { display: none !important; }
  .stack-sm { flex-direction: column !important; align-items: stretch !important; }
  .stack-sm > .btn { width: 100%; }
}
@container page (min-width: 641px) { .only-sm { display: none !important; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; min-width: 0; }
.label { font-weight: 600; font-size: .9375rem; line-height: 1.4; color: var(--fg); }
.label .opt { font-weight: 400; color: var(--fg-2); }
.hint { font-size: .875rem; line-height: 1.5; color: var(--fg-2); }
.label:lang(ar) { font-size: 1.0625rem; }
.hint:lang(ar) { font-size: 1rem; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: .75rem 1rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--mute); background: var(--white); color: var(--ink);
  font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 132px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--mute); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--body); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; border-color: var(--ring); }
.select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.75rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 21px) 52%, calc(100% - 15px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
[dir="rtl"] .select { background-position: 15px 52%, 21px 52%; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.error { display: block; position: relative; padding-inline-start: 28px; color: var(--clay); font-weight: 500; font-size: .9375rem; line-height: 1.45; }
.error::before { content: '!'; content: '!' / ''; position: absolute; inset-inline-start: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--clay); color: var(--white); font: 700 .75rem/1 var(--f-sans); }
.on-dark .error, .sec--night .error { color: var(--gold); }
.on-dark .error::before, .sec--night .error::before { background: var(--gold); color: var(--night); }
/* Light panels and cards inside dark sections keep clay errors */
:is(.sec--night, .sec--abyss, .on-dark) :is(.panel:not([class*="card--"]):not(.on-dark), .card:not([class*="card--"]), .success) .error { color: var(--clay); }
:is(.sec--night, .sec--abyss, .on-dark) :is(.panel:not([class*="card--"]):not(.on-dark), .card:not([class*="card--"]), .success) .error::before { background: var(--clay); color: var(--white); }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 8px; cursor: pointer; line-height: 1.45; color: var(--fg-2); }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--mute); background: var(--white); display: grid; place-items: center; cursor: pointer; }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--teal); border-color: var(--teal); }
.check input[type="checkbox"]:checked::after { content: ''; width: 11px; height: 6px; border-left: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white); transform: translateY(-1px) rotate(-45deg); }
.check input[type="radio"]:checked::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--white); }
.check input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.check input[aria-invalid="true"] { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.on-dark .check input:checked { background: var(--gold); border-color: var(--gold); }
.on-dark .check input[type="checkbox"]:checked::after { border-color: var(--night); }
fieldset.group { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; min-width: 0; }
fieldset.group > legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; color: var(--fg); }
.turnstile { display: flex; align-items: center; gap: 12px; width: min(100%, 300px); min-height: 64px; padding: 12px 16px; border-radius: 10px; border: 1.5px dashed var(--mute); color: var(--fg-2); font-family: var(--f-mono); font-size: .75rem; line-height: 1.4; }
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-card); background: var(--mist); color: var(--body); }
.notice--sand { background: var(--sand2); }
.success { display: grid; gap: 12px; padding: clamp(24px, 3cqi, 40px); border-radius: var(--r-panel); background: var(--mist); color: var(--body); }

/* Switch (display settings) */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 0; background: transparent; color: var(--ink); text-align: start; cursor: pointer; font-weight: 500; }
.switch:hover { background: var(--mist); }
.switch__track { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); box-shadow: inset 0 0 0 1.5px var(--mute); transition: background-color .2s ease; }
.switch__track::after { content: ''; position: absolute; top: 4px; inset-inline-start: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(6,53,64,.3); transition: inset-inline-start .2s ease; }
.switch[aria-pressed="true"] .switch__track { background: var(--teal); box-shadow: none; }
.switch[aria-pressed="true"] .switch__track::after { inset-inline-start: 22px; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); --fg: var(--ink); --fg-2: var(--body); --link: var(--teal); --ring: var(--teal); color: var(--body); }
.hdr--dark { background: rgba(6, 53, 64, .96); box-shadow: 0 1px 0 rgba(255,255,255,.08); --fg: var(--white); --fg-2: var(--mist); --link: var(--gold); --ring: var(--gold); color: var(--mist); }
.hdr--sand { background: rgba(247, 242, 232, .95); box-shadow: 0 1px 0 var(--sand2); }
.hdr__in { display: flex; align-items: center; gap: 16px; max-width: 1400px; margin-inline: auto; min-height: 76px; padding: 12px clamp(16px, 3cqi, 40px); }
.hdr__logo { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--fg); border-radius: 10px; flex: none; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 12px; }
.nav__a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--fg); font-family: inherit; font-weight: 500; font-size: .9375rem; line-height: 1.2; text-decoration: none !important; white-space: nowrap; cursor: pointer; }
.nav__a:lang(ar) { font-size: 1.0625rem; }
.nav__a:hover { background: rgba(6, 53, 64, .06); }
.hdr--dark .nav__a:hover { background: rgba(255, 255, 255, .1); }
.nav__a[aria-current="page"]::after { content: ''; position: absolute; bottom: 3px; inset-inline-start: 50%; width: 5px; height: 5px; margin-inline-start: -2.5px; border-radius: 50%; background: var(--gold-aged); }
.hdr--dark .nav__a[aria-current="page"]::after { background: var(--gold); }
.hdr__tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.hdr__menu-btn { display: none; }
.pop { position: absolute; z-index: 70; top: calc(100% + 8px); min-width: 260px; padding: 10px; border-radius: 20px; background: var(--white); color: var(--body); box-shadow: var(--hair), var(--sh-3); --fg: var(--ink); --fg-2: var(--body); --link: var(--teal); --ring: var(--teal); }
.pop--end { inset-inline-end: 0; }
.pop--start { inset-inline-start: 0; }
.pop__a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 14px; color: var(--ink) !important; text-decoration: none !important; font-weight: 500; }
.pop__a:hover { background: var(--mist); }
.pop__a[aria-current="true"], .pop__a[aria-current="page"] { background: var(--mist); }
.mega { width: min(720px, 92cqi); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 12px; }
.sheet { position: absolute; z-index: 65; top: 100%; inset-inline: 0; max-height: calc(100vh - 76px); overflow: auto; padding: 16px clamp(16px, 3cqi, 40px) 32px; background: var(--white); color: var(--body); box-shadow: var(--sh-3); --fg: var(--ink); --fg-2: var(--body); --link: var(--teal); --ring: var(--teal); }
.sheet__a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 8px; border-bottom: 1px solid var(--line); color: var(--ink) !important; text-decoration: none !important; font-weight: 600; font-size: 1.0625rem; }
.lang-code { display: none; }
@container page (max-width: 1199px) {
  .nav, .hdr__cta { display: none !important; }
  .hdr__menu-btn { display: inline-grid; }
}
/* French and Portuguese labels run longer: fold the navigation earlier */
@container page (max-width: 1299px) {
  .hdr:is(:lang(fr), :lang(pt)) .nav, .hdr:is(:lang(fr), :lang(pt)) .hdr__cta { display: none !important; }
  .hdr:is(:lang(fr), :lang(pt)) .hdr__menu-btn { display: inline-grid; }
}
@container page (max-width: 640px) {
  .lang-name { display: none; }
  .lang-code { display: inline; }
  .hdr__in { min-height: 64px; gap: 8px; }
  .hdr__by { display: none; }
}

/* ---------- Footer ---------- */
.ftr { background: var(--night); color: var(--mist); --fg: var(--white); --fg-2: var(--mist); --link: var(--gold); --ring: var(--gold); position: relative; isolation: isolate; overflow: hidden; }
.ftr a { color: var(--mist); text-decoration: none; }
.ftr a:hover { color: var(--white); text-decoration: underline; }
.ftr__h { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 500; }
.ftr__h:lang(ar) { font-family: var(--f-ar); letter-spacing: 0; text-transform: none; font-size: .9375rem; font-weight: 600; }
.ftr__list { list-style: none; display: grid; gap: 4px; }
.ftr__list a { display: inline-flex; align-items: center; min-height: 36px; }
.ftr .input { background: rgba(255, 255, 255, .06); border-color: rgba(235, 244, 246, .55); color: var(--white); }
.ftr .input::placeholder { color: rgba(235, 244, 246, .7); }

/* ---------- Glyphs ---------- */
.glyph { display: block; flex: none; overflow: visible; }
.glyph.draw { view-timeline: --glyph block; }
.glyph.draw :is(path, line, circle, ellipse, rect, polyline) { stroke-dasharray: 300; animation: m3-draw 1.8s cubic-bezier(.6, .05, .25, 1) both; }
@supports (animation-timeline: view()) {
  .glyph.draw :is(path, line, circle, ellipse, rect, polyline) { animation-duration: auto; animation-timeline: --glyph; animation-range: entry 0% entry 100%; }
}
.glyph .gfill { stroke: none; fill: currentColor; animation: none !important; }
.grule { display: flex; align-items: center; gap: 14px; color: var(--rule); }
.grule__l { flex: 1 1 0; height: 1px; background: currentColor; opacity: .5; }

/* Logo */
.lg { display: inline-flex; align-items: center; gap: .7em; color: var(--fg); line-height: 1; }
.lg--stacked { flex-direction: column; text-align: center; gap: .6em; }
.lg__txt { display: flex; flex-direction: column; gap: .32em; }
.lg--stacked .lg__txt { align-items: center; }
.lg__word { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; line-height: 1; white-space: nowrap; }
.lg__word--ar { font-family: var(--f-ar); font-weight: 700; letter-spacing: 0; line-height: 1.1; }
.lg__by { font-family: var(--f-sans); font-weight: 500; letter-spacing: .02em; line-height: 1; opacity: .88; white-space: nowrap; }
.lg__by--ar { font-family: var(--f-ar); letter-spacing: 0; }
.lg__gold-l { color: var(--gold-aged); }
.lg__gold-d { color: var(--gold); }
.lg__mark { flex: none; display: block; }
.gather circle { transform-box: fill-box; transform-origin: center; animation: m3-gather 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.gather .glow { animation: m3-glow 4.8s ease-in-out 1.8s infinite; transform-box: fill-box; transform-origin: center; }

/* Programme marks */
.pm { display: inline-flex; align-items: center; gap: .75em; line-height: 1; color: var(--fg); }
.pm__tile { display: grid; place-items: center; flex: none; border-radius: 28%; }
.pm__name { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.015em; font-variation-settings: 'opsz' 72; }
.pm__alt { font-family: var(--f-ar); font-weight: 600; }
.pm__alt-lat { font-family: var(--f-display); font-weight: 600; }
.pm__by { font-family: var(--f-sans); font-weight: 500; opacity: .85; }
.pm__by-ar { font-family: var(--f-ar); font-weight: 500; opacity: .85; }

/* ---------- Placeholders: anything not supplied in the brief ---------- */
.ph { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 220px; padding: 24px; border-radius: var(--r-card); border: 1.5px dashed var(--mute); color: var(--body); text-align: center; font-family: var(--f-mono); font-size: .8125rem; line-height: 1.5; background: repeating-linear-gradient(135deg, rgba(6, 53, 64, .035) 0 10px, transparent 10px 20px); }
.on-dark .ph, .sec--night .ph, .sec--abyss .ph { border-color: rgba(235, 244, 246, .5); color: var(--mist); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 10px, transparent 10px 20px); }
.ph:lang(ar) { font-family: var(--f-ar); font-size: .9375rem; }
.tbc { padding: .05em .35em; border-radius: 5px; background: var(--sand2); color: var(--ink); font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-dark .tbc, .sec--night .tbc, .sec--abyss .tbc, .sec--teal .tbc, .sec--nile .tbc, .card--night .tbc, .card--abyss .tbc, .prog--wa3i .tbc, .prog--geel .tbc, .prog--mizan .tbc { background: rgba(255, 255, 255, .14); color: var(--white); }
/* On Teal and Nile Green, light tints fail contrast: placeholders become white chips, glass gets a Night tint */
:is(.sec--teal, .sec--nile, .on-teal, .on-nile, .prog--wa3i, .prog--mizan, .card--teal, .card--nile) .tbc { background: var(--white); color: var(--ink); }
:is(.sec--teal, .sec--nile, .on-teal, .on-nile, .prog--wa3i, .prog--mizan, .card--teal, .card--nile) .pill--glass { background: rgba(6, 53, 64, .42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
:is(.sec--teal, .sec--nile, .on-teal, .on-nile, .prog--wa3i, .prog--mizan) .card--glass { background: rgba(6, 53, 64, .3); --fg-2: var(--white); color: var(--white); }
.review { display: inline-flex; align-items: center; gap: 6px; padding: .2rem .6rem; border-radius: var(--r-pill); background: var(--sand2); color: var(--ink); font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Phone mockup (Dafa screens) ---------- */
.phone { position: relative; flex: none; width: 300px; height: 620px; padding: 11px; border-radius: 48px; background: var(--night); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), var(--sh-3); }
.phone::before { content: ''; position: absolute; top: 20px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 999px; background: var(--night); z-index: 3; }
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 38px; background: var(--sand); color: var(--body); --fg: var(--ink); --fg-2: var(--body); --link: var(--night); --ring: var(--teal); }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-card); box-shadow: var(--hair), var(--sh-1); background: var(--white); }
.tbl { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.tbl th { background: var(--night); color: var(--white); text-align: start; padding: 14px 18px; font-weight: 600; vertical-align: bottom; }
.tbl td { padding: 16px 18px; border-top: 1px solid var(--line); vertical-align: top; color: var(--body); }
.tbl tbody tr:nth-child(even) td { background: rgba(235, 244, 246, .45); }

/* ---------- FAQ (native details/summary) ---------- */
.faq { border-radius: var(--r-card); background: var(--white); box-shadow: var(--hair), var(--sh-1); }
.faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 22px; list-style: none; cursor: pointer; font-weight: 600; color: var(--ink); border-radius: var(--r-card); }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mist); color: var(--night); font: 500 1.25rem/1 var(--f-sans); }
.faq[open] > summary::after { content: '\2212'; background: var(--gold); }
.faq__a { padding: 0 22px 22px; color: var(--body); }

/* ---------- Steps / journey ---------- */
.step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--night); color: var(--gold); font: 600 1rem/1 var(--f-mono); }
.on-dark .step__n, .sec--night .step__n, .sec--abyss .step__n { background: var(--gold); color: var(--night); }

/* ---------- Tabs / segmented control ---------- */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--mist); }
.seg__b { min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--night); font-weight: 600; cursor: pointer; }
.seg__b[aria-pressed="true"], .seg__b[aria-selected="true"] { background: var(--white); box-shadow: var(--sh-1); }

/* ---------- Easy Read ---------- */
.easy { font-size: 1.3125rem; line-height: 1.8; color: var(--ink); }
.easy:lang(ar) { font-size: 1.4375rem; line-height: 1.9; }
.easy__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--line); }
.easy__pic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 22px; background: var(--mist); color: var(--night); }
.easy strong { color: var(--night); font-weight: 700; }
@container page (max-width: 640px) {
  .easy__row { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .easy__pic { width: 72px; height: 72px; border-radius: 18px; }
}

/* ---------- Abstract MENA dot grid (no borders) ---------- */
.dotmap { display: block; width: 100%; height: auto; }

/* Hero symbol: dots drift in and form the circle around the gold dot */
.gather .g1 { --dx: -25px; --dy: -169px; animation-delay: .05s; }
.gather .g2 { --dx: 106px; --dy: -145px; animation-delay: .18s; }
.gather .g3 { --dx: 125px; --dy: -19px; animation-delay: .1s; }
.gather .g4 { --dx: 23px; --dy: 86px; animation-delay: .26s; }
.gather .g5 { --dx: -65px; --dy: 111px; animation-delay: .14s; }
.gather .g6 { --dx: -145px; --dy: 28px; animation-delay: .3s; }
.gather .g7 { --dx: -131px; --dy: 46px; animation-delay: .08s; }
.gather .g8 { --dx: -138px; --dy: -124px; animation-delay: .22s; }
.gather .o1 { --dx: 40px; --dy: -8px; animation-delay: .5s; }
.gather .o2 { --dx: 64px; --dy: -93px; animation-delay: .62s; }
.gather .o3 { --dx: 161px; --dy: -132px; animation-delay: .44s; }
.gather .o4 { --dx: 153px; --dy: -55px; animation-delay: .7s; }
.gather .o5 { --dx: 24px; --dy: -51px; animation-delay: .56s; }
.gather .o6 { --dx: 40px; --dy: 107px; animation-delay: .78s; }
.gather .o7 { --dx: -7px; --dy: 90px; animation-delay: .48s; }
.gather .o8 { --dx: 43px; --dy: 65px; animation-delay: .66s; }
.gather .o9 { --dx: -9px; --dy: 10px; animation-delay: .58s; }
.gather .o10 { --dx: -129px; --dy: 22px; animation-delay: .74s; }
.gather .o11 { --dx: -42px; --dy: 37px; animation-delay: .52s; }
.gather .o12 { --dx: -122px; --dy: 33px; animation-delay: .82s; }
.gather .o13 { --dx: -97px; --dy: -54px; animation-delay: .46s; }
.gather .o14 { --dx: -22px; --dy: -14px; animation-delay: .68s; }
.gather .o15 { --dx: -96px; --dy: -61px; animation-delay: .6s; }
.gather .o16 { --dx: -13px; --dy: -21px; animation-delay: .76s; }
.gather .gc { animation-name: m3-fade-up; animation-duration: 1.2s; }