/* MD Capital — 2026 extension layer
 *
 * Companion to styles-CJpwQI5c.css, which is a PURGED Tailwind build: only the
 * ~420 utility classes the former React app happened to use survive in it, so
 * no new Tailwind class can be introduced by writing it into markup. Everything
 * authored after the static rebuild therefore styles itself here, through the
 * same design tokens (--primary, --background, --foreground, --border …) that
 * the original stylesheet defines on :root. The two files stay independent:
 * nothing here overrides an existing utility.
 *
 * Bilingual: English and Arabic ship in the same document. The language switch
 * sets [data-lang] on <html> and every localised node carries [data-en]/[data-ar]
 * so a switch never re-fetches and never loses scroll position.
 */

/* ---------------------------------------------------------------- tokens -- */

/* ------------------------------------------------------------------ themes --
 *
 * Two complete palettes, neither an inversion of the other.
 *
 * The site's own stylesheet (styles-CJpwQI5c.css) is a purged Tailwind build
 * whose utilities all resolve through var(--background) / var(--foreground) /
 * var(--primary) — including the alpha variants, which Tailwind emits as
 * `color: var(--foreground)` plus a color-mix. Redefining those three tokens
 * therefore re-themes every page without touching that file. The only literal
 * colour left in the markup is the footer's bg-[#080808], overridden below.
 *
 * Structure required by the house standard, and it matters: a viewer has THREE
 * states, not two. An explicit choice stamps data-theme; the default "system"
 * setting stamps nothing, so only prefers-color-scheme separates the two. Hence
 * bare :root carries the full light palette, the media query is guarded so an
 * explicit light choice beats a dark OS, and [data-theme="dark"] repeats it so
 * the toggle wins in the other direction.
 *
 * THE GOLD SHIFTS BETWEEN THEMES, DELIBERATELY. #C9A14A sits at roughly 2.4:1
 * on an ivory ground — unreadable as text. Light mode drops it to a deeper
 * #8A6D22 (about 5.2:1) for anything carrying meaning, and keeps the brighter
 * gold only for large display type and rules where contrast is not load-bearing.
 */

:root {
  color-scheme: light;

  /* Tokens owned by the Tailwind build — redefining them re-themes the site. */
  --background: oklch(98.2% 0.006 85);
  --foreground: oklch(22% 0.012 75);
  --primary: #7D621E;
  --primary-glow: #9C7B2A;
  --muted-foreground: oklch(46% 0.018 78);
  --border: oklch(62% 0.035 80 / 0.42);
  --ring: #7D621E;
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 50% 35%, oklch(92% 0.045 85 / 0.75), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, oklch(95% 0.02 80 / 0.8), transparent 70%);
  --gradient-text: linear-gradient(180deg, #9C7B2A 0%, #7D621E 55%, #5E4A16 100%);
  --shadow-glow: 0 0 60px oklch(70% 0.09 82 / 0.14), 0 0 140px oklch(60% 0.07 75 / 0.08);

  /* Tokens owned by this file. */
  --mdc-footer: oklch(95.5% 0.008 82);
  --mdc-panel: oklch(100% 0 0);
  --mdc-panel-2: oklch(96% 0.007 84);
  --mdc-ink: oklch(22% 0.012 75);
  --mdc-ink-2: oklch(38% 0.014 76);
  --mdc-ink-3: oklch(50% 0.016 78);
  --mdc-rule: oklch(62% 0.035 80 / 0.42);
  --mdc-rule-soft: oklch(62% 0.035 80 / 0.2);
  --mdc-gold: #7D621E;
  --mdc-gold-dim: #634E17;
  --mdc-ok: oklch(45% 0.11 155);
  --mdc-warn: oklch(48% 0.11 70);
  --mdc-bad: oklch(48% 0.17 27);
  --mdc-input: oklch(99% 0.003 85);
  --mdc-focus: 0 0 0 2px oklch(98.2% 0.006 85), 0 0 0 4px #7D621E;
  --mdc-ambient: 0.42;

  --mdc-max: 72rem;
  --mdc-prose: 66ch;
  --mdc-gap: clamp(1rem, 2.5vw, 2rem);
  --mdc-section-y: clamp(3.5rem, 8vw, 7rem);
  --mdc-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mdc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mdc-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* The dark palette. Declared once, applied from two selectors. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: oklch(7% 0 0);
    --foreground: oklch(97% 0.005 90);
    --primary: #C9A14A;
    --primary-glow: #E6B35A;
    --muted-foreground: oklch(68% 0.02 85);
    --border: oklch(32% 0.04 80 / 0.4);
    --ring: #C9A14A;
    --gradient-hero:
      radial-gradient(ellipse 80% 60% at 50% 35%, oklch(22% 0.06 78 / 0.55), transparent 70%),
      radial-gradient(ellipse 60% 40% at 50% 100%, oklch(14% 0.03 70 / 0.6), transparent 70%);
    --gradient-text: linear-gradient(180deg, oklch(90% 0.1 90) 0%, #C9A14A 50%, oklch(50% 0.09 68) 100%);
    --shadow-glow: 0 0 80px oklch(74% 0.12 82 / 0.25), 0 0 180px oklch(55% 0.1 70 / 0.15);
    --mdc-footer: #080808;
    --mdc-panel: oklch(11% 0.008 80);
    --mdc-panel-2: oklch(14% 0.01 80);
    --mdc-ink: oklch(97% 0.005 90);
    --mdc-ink-2: oklch(78% 0.015 85);
    --mdc-ink-3: oklch(62% 0.018 85);
    --mdc-rule: oklch(32% 0.04 80 / 0.4);
    --mdc-rule-soft: oklch(32% 0.04 80 / 0.18);
    --mdc-gold: #C9A14A;
    --mdc-gold-dim: oklch(60% 0.09 78);
    --mdc-ok: oklch(72% 0.13 155);
    --mdc-warn: oklch(78% 0.14 75);
    --mdc-bad: oklch(65% 0.19 25);
    --mdc-input: oklch(9% 0.004 80);
    --mdc-focus: 0 0 0 2px oklch(7% 0 0), 0 0 0 4px #C9A14A;
    --mdc-ambient: 1;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(7% 0 0);
  --foreground: oklch(97% 0.005 90);
  --primary: #C9A14A;
  --primary-glow: #E6B35A;
  --muted-foreground: oklch(68% 0.02 85);
  --border: oklch(32% 0.04 80 / 0.4);
  --ring: #C9A14A;
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 50% 35%, oklch(22% 0.06 78 / 0.55), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, oklch(14% 0.03 70 / 0.6), transparent 70%);
  --gradient-text: linear-gradient(180deg, oklch(90% 0.1 90) 0%, #C9A14A 50%, oklch(50% 0.09 68) 100%);
  --shadow-glow: 0 0 80px oklch(74% 0.12 82 / 0.25), 0 0 180px oklch(55% 0.1 70 / 0.15);
  --mdc-footer: #080808;
  --mdc-panel: oklch(11% 0.008 80);
  --mdc-panel-2: oklch(14% 0.01 80);
  --mdc-ink: oklch(97% 0.005 90);
  --mdc-ink-2: oklch(78% 0.015 85);
  --mdc-ink-3: oklch(62% 0.018 85);
  --mdc-rule: oklch(32% 0.04 80 / 0.4);
  --mdc-rule-soft: oklch(32% 0.04 80 / 0.18);
  --mdc-gold: #C9A14A;
  --mdc-gold-dim: oklch(60% 0.09 78);
  --mdc-ok: oklch(72% 0.13 155);
  --mdc-warn: oklch(78% 0.14 75);
  --mdc-bad: oklch(65% 0.19 25);
  --mdc-input: oklch(9% 0.004 80);
  --mdc-focus: 0 0 0 2px oklch(7% 0 0), 0 0 0 4px #C9A14A;
  --mdc-ambient: 1;
}

/* The one literal colour left in the markup, and the ambient hero layers, which
   are built for a dark ground and would read as grime at full strength on a
   light one. */
.bg-\[\#080808\] { background-color: var(--mdc-footer); }
.mdc-ambient { opacity: var(--mdc-ambient); }
.mdc-blob { mix-blend-mode: multiply; }
:root[data-theme="dark"] .mdc-blob { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mdc-blob { mix-blend-mode: screen; }
}


/* Light-mode alpha correction.
 *
 * The retired build leans on text-foreground/40 … /85 and text-primary/80 for
 * hierarchy. Those alphas were chosen against a near-black ground, where a
 * faint white still reads. Against ivory the same alphas collapse: measured on
 * the built pages, /40 came out at 2.46:1 and primary/80 at 3.06:1, both below
 * the 4.5:1 needed for body-size text.
 *
 * The alphas are therefore raised in light mode only — the hierarchy is
 * preserved (each step is still lighter than the one above it) while every step
 * clears AA. Dark mode keeps the original values untouched.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .text-foreground\/40 { color: color-mix(in oklab, var(--foreground) 72%, transparent); }
  :root:not([data-theme="dark"]) .text-foreground\/50 { color: color-mix(in oklab, var(--foreground) 76%, transparent); }
  :root:not([data-theme="dark"]) .text-foreground\/60 { color: color-mix(in oklab, var(--foreground) 82%, transparent); }
  :root:not([data-theme="dark"]) .text-foreground\/70 { color: color-mix(in oklab, var(--foreground) 88%, transparent); }
  :root:not([data-theme="dark"]) .text-foreground\/80,
  :root:not([data-theme="dark"]) .text-foreground\/85 { color: var(--foreground); }
  :root:not([data-theme="dark"]) .text-primary\/80 { color: var(--primary); }
}
:root[data-theme="light"] .text-foreground\/40 { color: color-mix(in oklab, var(--foreground) 72%, transparent); }
:root[data-theme="light"] .text-foreground\/50 { color: color-mix(in oklab, var(--foreground) 76%, transparent); }
:root[data-theme="light"] .text-foreground\/60 { color: color-mix(in oklab, var(--foreground) 82%, transparent); }
:root[data-theme="light"] .text-foreground\/70 { color: color-mix(in oklab, var(--foreground) 88%, transparent); }
:root[data-theme="light"] .text-foreground\/80,
:root[data-theme="light"] .text-foreground\/85 { color: var(--foreground); }
:root[data-theme="light"] .text-primary\/80 { color: var(--primary); }


/* Dark-mode alpha correction. Measured on the built pages: text-foreground/40 at
   10px came out at 3.41:1 against the page ground, below the 4.5:1 AA needs for
   text this size. /50 sits at 3.9:1. Both are raised just enough to clear it;
   the larger alphas already pass and are left alone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .text-foreground\/40 { color: color-mix(in oklab, var(--foreground) 62%, transparent); }
  :root:not([data-theme="light"]) .text-foreground\/50 { color: color-mix(in oklab, var(--foreground) 66%, transparent); }
}
:root[data-theme="dark"] .text-foreground\/40 { color: color-mix(in oklab, var(--foreground) 62%, transparent); }
:root[data-theme="dark"] .text-foreground\/50 { color: color-mix(in oklab, var(--foreground) 66%, transparent); }

/* ------------------------------------------------------------ bilingual -- */

/* Both languages ship in the same document as sibling spans and only the active
   one is displayed — the pattern already proven on legacykey.ae, so the two
   sites stay maintainable by the same hands. Two rules do the whole switch.
   `hidden` is never used, so a node never fights the UA stylesheet. */
:root[data-lang="en"] .ar { display: none; }
:root[data-lang="ar"] .en { display: none; }

/* Block-level pairs opt in, so a paragraph never collapses to inline. */
.en.b, .ar.b { display: block; }

/* Arabic sets its own face and runs right-to-left inside the shell. Isolation
   stops a bracket or digit at a boundary from reordering its neighbours. */
.ar { font-family: var(--mdc-arabic); direction: rtl; unicode-bidi: isolate; }
:root[data-lang="ar"] body { font-family: var(--mdc-arabic); }

/* Arabic has no lettercase and no meaningful tracking: the mono eyebrow
   treatment that carries the English brand voice becomes unreadable if applied
   literally, so it is neutralised rather than inherited. */
:root[data-lang="ar"] .mdc-mono,
:root[data-lang="ar"] .mdc-eyebrow,
:root[data-lang="ar"] .font-mono {
  font-family: var(--mdc-arabic);
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
}
:root[data-lang="ar"] .mdc-btn { letter-spacing: 0; text-indent: 0; text-transform: none; }

/* Directional flips for anything whose meaning depends on reading order. */
:root[data-lang="ar"] .mdc-flip { direction: rtl; text-align: right; }
:root[data-lang="ar"] .mdc-arrow { display: inline-block; transform: scaleX(-1); }

/* Theme switch. The icon shown is the theme you would GET by pressing it, not
   the one you are in — a sun on a dark page, a moon on a light one. */
.mdc-themeswitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border: 1px solid var(--mdc-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--mdc-ink-3);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.mdc-themeswitch:hover { color: var(--mdc-gold); border-color: var(--mdc-gold); }
.mdc-themeswitch:focus-visible { outline: none; box-shadow: var(--mdc-focus); }
.mdc-themeswitch .mdc-i-sun { display: none; }
.mdc-themeswitch .mdc-i-moon { display: block; }
:root[data-theme="dark"] .mdc-themeswitch .mdc-i-sun { display: block; }
:root[data-theme="dark"] .mdc-themeswitch .mdc-i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mdc-themeswitch .mdc-i-sun { display: block; }
  :root:not([data-theme="light"]) .mdc-themeswitch .mdc-i-moon { display: none; }
}

.mdc-langswitch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--mdc-rule);
  border-radius: 2px;
  overflow: hidden;
  background: transparent;
}
.mdc-langswitch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mdc-ink-3);
  font-family: var(--mdc-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.mdc-langswitch button:hover { color: var(--mdc-gold); }
.mdc-langswitch button[aria-pressed="true"] {
  color: var(--background);
  background: var(--mdc-gold);
}
.mdc-langswitch button:focus-visible { outline: none; box-shadow: var(--mdc-focus); }

/* ------------------------------------------------------------ mobile nav -- */

/* Real markup in every page rather than built at runtime, so the button works
   before the first line of JS. Collapsed by max-height instead of display:none
   so the transition has something to animate and so the links stay in the
   accessibility tree only when open (inert via visibility). */
.mdc-mobilenav {
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  background: color-mix(in oklab, var(--background) 97%, transparent);
  border-bottom: 1px solid var(--mdc-rule);
  transition: max-height 260ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 260ms;
}
.mdc-mobilenav[data-open] {
  max-height: 32rem;
  visibility: visible;
  transition: max-height 320ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}
.mdc-mobilenav > nav { padding-block: 0.5rem 1.5rem; }
.mdc-mobilenav a:focus-visible { outline: none; box-shadow: var(--mdc-focus); }
@media (prefers-reduced-motion: reduce) {
  .mdc-mobilenav, .mdc-mobilenav[data-open] { transition: none; }
}

/* Header gains a ground only once the page has scrolled under it. */
[data-mdc-header][data-scrolled] {
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--mdc-rule-soft);
}

/* ---------------------------------------------------------------- layout -- */

.mdc-wrap {
  max-width: var(--mdc-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.mdc-section { padding-block: var(--mdc-section-y); }
.mdc-section + .mdc-section { border-top: 1px solid var(--mdc-rule-soft); }
.mdc-stack { display: flex; flex-direction: column; gap: var(--mdc-gap); }
.mdc-stack-sm { display: flex; flex-direction: column; gap: 0.75rem; }

.mdc-grid { display: grid; gap: var(--mdc-gap); }
.mdc-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.mdc-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.mdc-prose { max-width: var(--mdc-prose); }
.mdc-prose p { color: var(--mdc-ink-2); line-height: 1.75; }
.mdc-prose p + p { margin-top: 1rem; }

/* ------------------------------------------------------------------ type -- */

.mdc-eyebrow {
  font-family: var(--mdc-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--mdc-gold);
}
.mdc-h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--mdc-ink);
  text-wrap: balance;
  margin: 0;
}
.mdc-h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--mdc-ink);
  margin: 0;
}
.mdc-lede { font-size: 1.0625rem; line-height: 1.7; color: var(--mdc-ink-2); }
.mdc-small { font-size: 0.8125rem; line-height: 1.65; color: var(--mdc-ink-3); }
.mdc-mono {
  font-family: var(--mdc-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- panel -- */

.mdc-panel {
  background: var(--mdc-panel);
  border: 1px solid var(--mdc-rule);
  border-radius: 2px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.mdc-panel-quiet { background: transparent; border-color: var(--mdc-rule-soft); }

/* A licensed-activity chip. Sits above a service so the permitted scope is
   never separated from the claim it authorises. */
.mdc-licence {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mdc-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdc-gold-dim);
  border: 1px solid var(--mdc-rule);
  border-radius: 2px;
  padding: 3px 8px;
}
.mdc-licence::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mdc-gold);
  flex: none;
}
.mdc-licence-out {
  color: var(--mdc-ink-3);
  border-style: dashed;
}
.mdc-licence-out::before { background: var(--mdc-ink-3); }

/* ------------------------------------------------------------------ form -- */

.mdc-form { display: flex; flex-direction: column; gap: 1.125rem; }
.mdc-field { display: flex; flex-direction: column; gap: 0.4rem; }
.mdc-field > label {
  font-family: var(--mdc-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mdc-ink-3);
}
.mdc-req { color: var(--mdc-gold); }

.mdc-input,
.mdc-select,
.mdc-textarea {
  width: 100%;
  background: var(--mdc-input);
  border: 1px solid var(--mdc-rule);
  border-radius: 2px;
  color: var(--mdc-ink);
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.7rem 0.8rem;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.mdc-textarea { min-height: 8rem; resize: vertical; }
.mdc-input::placeholder, .mdc-textarea::placeholder { color: oklch(48% 0.01 85); }
.mdc-input:hover, .mdc-select:hover, .mdc-textarea:hover { border-color: var(--mdc-gold-dim); }
.mdc-input:focus-visible,
.mdc-select:focus-visible,
.mdc-textarea:focus-visible {
  outline: none;
  border-color: var(--mdc-gold);
  box-shadow: var(--mdc-focus);
}
.mdc-input[aria-invalid="true"],
.mdc-textarea[aria-invalid="true"],
.mdc-select[aria-invalid="true"] { border-color: var(--mdc-bad); }

.mdc-error {
  font-size: 0.75rem;
  color: var(--mdc-bad);
  min-height: 1rem;
}
.mdc-error:empty { min-height: 0; }

.mdc-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--mdc-ink-2);
}
.mdc-consent input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--mdc-rule);
  border-radius: 2px;
  background: var(--mdc-input);
  cursor: pointer;
  flex: none;
  position: relative;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.mdc-consent input[type="checkbox"]:checked {
  background: var(--mdc-gold);
  border-color: var(--mdc-gold);
}
.mdc-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px 4px 5px 4px;
  border: solid var(--background);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.mdc-consent input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--mdc-focus); }

/* The honeypot is clipped, not display:none — a bot that respects visibility
   still fills a field it can read in the DOM. It stays out of the
   accessibility tree and out of the tab order.
   It is CLIPPED rather than pushed to left:-9999px: an off-screen negative
   offset extends the scrollable area the moment direction flips to RTL, which
   is exactly how this page acquired an 11,264px document in Arabic.
   Autofill safety comes from the field's name, `autocomplete="off"` and
   `tabindex="-1"` — not from how it is hidden. legacykey.ae clips a field
   named `company` carrying a real <label>Company</label>, so browsers fill it
   and the enquiry is silently discarded. */
.mdc-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------- button -- */

.mdc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.4rem;
  border: 1px solid var(--mdc-gold);
  border-radius: 2px;
  background: transparent;
  color: var(--mdc-gold);
  font-family: var(--mdc-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.mdc-btn:hover { background: oklch(74% 0.12 82 / 0.12); }
.mdc-btn:focus-visible { outline: none; box-shadow: var(--mdc-focus); }
.mdc-btn[disabled], .mdc-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.mdc-btn-solid { background: var(--mdc-gold); color: var(--background); }
.mdc-btn-solid:hover { background: var(--mdc-gold-dim); border-color: var(--mdc-gold-dim); }
.mdc-btn-quiet { border-color: var(--mdc-rule); color: var(--mdc-ink-2); }
.mdc-btn-quiet:hover { border-color: var(--mdc-gold); color: var(--mdc-gold); background: transparent; }

/* --------------------------------------------------------------- feedback -- */

.mdc-note {
  border: 1px solid var(--mdc-rule);
  border-left-width: 2px;
  border-left-color: var(--mdc-gold);
  border-radius: 2px;
  padding: 0.9rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--mdc-ink-2);
  background: oklch(74% 0.12 82 / 0.04);
}
.mdc-note-ok { border-left-color: var(--mdc-ok); background: oklch(72% 0.13 155 / 0.05); }
.mdc-note-bad { border-left-color: var(--mdc-bad); background: oklch(65% 0.19 25 / 0.05); }
:root[data-lang="ar"] .mdc-note { border-left-width: 1px; border-right-width: 2px; }

/* ---------------------------------------------------------------- tables -- */

.mdc-tablewrap { overflow-x: auto; border: 1px solid var(--mdc-rule); border-radius: 2px; }
.mdc-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.875rem; }
.mdc-table th {
  text-align: left;
  font-family: var(--mdc-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mdc-ink-3);
  font-weight: 400;
  padding: 0.7rem 0.9rem;
  background: var(--mdc-panel-2);
  border-bottom: 1px solid var(--mdc-rule);
}
.mdc-table td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--mdc-rule-soft);
  color: var(--mdc-ink-2);
  vertical-align: top;
}
.mdc-table tr:last-child td { border-bottom: 0; }
.mdc-table .num { font-variant-numeric: tabular-nums; }
:root[data-lang="ar"] .mdc-table th, :root[data-lang="ar"] .mdc-table td { text-align: right; }

/* ------------------------------------------------------------------ misc -- */

.mdc-hr { border: 0; border-top: 1px solid var(--mdc-rule-soft); margin: 0; }

/* Clipped rather than positioned off-screen, for the same RTL reason as the
   honeypot above: a skip link parked at left:-9999px is a direct child of
   <body>, outside any overflow-hidden section, so in Arabic it dragged the
   document width to 11,264px and gave every page a horizontal scrollbar. */
.mdc-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 100;
}
.mdc-skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  inset-inline-start: 1rem;
  top: 1rem;
  padding: 0.6rem 1rem;
  background: var(--mdc-panel);
  border: 1px solid var(--mdc-gold);
  border-radius: 2px;
  color: var(--mdc-gold);
  font-family: var(--mdc-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Scroll reveal. The animation is applied only once JS has confirmed it can
   observe the element; without JS every .mdc-reveal is fully visible, so a
   scripting failure can never leave the page blank. */
.mdc-reveal { opacity: 1; }
html.mdc-js .mdc-reveal { opacity: 0; transform: translateY(14px); }
html.mdc-js .mdc-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.mdc-js .mdc-reveal { opacity: 1; transform: none; }
  html.mdc-js .mdc-reveal.is-in { transition: none; }
  .mdc-btn, .mdc-input, .mdc-select, .mdc-textarea, .mdc-langswitch button {
    transition: none;
  }
}

@media print {
  .mdc-langswitch, .mdc-btn { display: none; }
  .mdc-panel { border-color: #999; }
}