/* ==========================================================================
   mehr-ui.css — MehrAfraz Asia design system
   Phase 2 (design foundation) + Phase 3 (production shell) + Phase 4A (first
   migrated page: news list). Unminified; no build step.

   LOAD ORDER   bootstrap.min.css → style.min.css (legacy, temporary) →
                font-awesome.min.css → mehr-ui.css → per-page <head> styles
   OPT-IN       Everything except @font-face, :root tokens, the root font-size
                reset and the modal-open padding fix is scoped to the `.mu` class.
                MIGRATION PERIOD: the master page puts `.mu` on the site header
                and footer only, NOT on <body>, so unmigrated page content keeps
                its legacy look. A migrated page opts in by wrapping its content
                in an element with class `mu` (see section 12).
   DIRECTION    Persian-first, RTL-native: logical properties, flex and grid.
                Requires <html dir="rtl">. Use .mu-ltr for technical Latin runs.
   BOOTSTRAP    Bootstrap 3.3.7 stays as a behaviour substrate (modal, collapse,
                dropdown, carousel). Section 9 re-skins its hooks under `.mu`.

   CONTENTS
     1  Fonts               6  Navigation, header, footer
     2  Tokens              7  Content components
     3  Base                8  Forms, feedback, overlays
     4  Layout              9  Bootstrap 3 + legacy hook bridge
     5  Utilities          10  Icons · 11 Motion and print
                           12  Production shell + legacy coexistence
   ========================================================================== */

/* 1. FONTS ---------------------------------------------------------------- */
/* Vazirmatn variable font (SIL OFL 1.1, see /font/Vazirmatn-OFL.txt).
   One file carries every real weight from 100 to 900; nothing is synthesised. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../font/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("../font/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn Arabic";
  src: url("../font/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("../font/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}

/* 2. TOKENS --------------------------------------------------------------- */
:root {
  /* Brand green. 500 is the legacy lime (#8abd06), 800 the legacy deep olive
     (#3e5600). 700 is the action colour: 5.1:1 on white. */
  --mu-green-50: #f5f9ea;
  --mu-green-100: #e9f3d0;
  --mu-green-200: #d3e7a2;
  --mu-green-300: #b7d66b;
  --mu-green-400: #9eca35;
  --mu-green-500: #8abd06;
  --mu-green-600: #6b9a06;
  --mu-green-700: #4f7a08;
  --mu-green-800: #3e5600;
  --mu-green-900: #2c3d03;
  --mu-green-950: #1a2502;

  /* Neutrals: grey with a slight moss bias so it sits with the brand green. */
  --mu-n-0: #ffffff;
  --mu-n-25: #fbfcfa;
  --mu-n-50: #f4f6f1;
  --mu-n-100: #eaede6;
  --mu-n-200: #dde1d7;
  --mu-n-300: #c5cabd;
  --mu-n-400: #9aa292;
  --mu-n-500: #6b7364;
  --mu-n-600: #555c50;
  --mu-n-700: #3d433a;
  --mu-n-800: #272c25;
  --mu-n-900: #161b14;
  --mu-n-950: #0e120c;

  /* Semantic roles */
  --mu-bg: var(--mu-n-25);
  --mu-surface: var(--mu-n-0);
  --mu-surface-sunken: var(--mu-n-50);
  --mu-surface-hover: var(--mu-n-100);
  --mu-ink: #11170f;               /* dark surface: club band, code blocks */
  --mu-ink-raised: #1c241a;
  --mu-ink-border: #2d382a;

  --mu-text: var(--mu-n-900);
  --mu-text-2: var(--mu-n-700);
  --mu-text-muted: var(--mu-n-600);
  --mu-text-subtle: var(--mu-n-500);
  --mu-text-on-ink: #eef2e9;
  --mu-text-on-ink-muted: #aab4a1;
  --mu-text-on-primary: #ffffff;

  --mu-border: var(--mu-n-200);
  --mu-border-strong: var(--mu-n-300);
  --mu-border-control: #8c9485;     /* 3.1:1 against white for form controls */

  --mu-primary: var(--mu-green-700);
  --mu-primary-hover: var(--mu-green-800);
  --mu-primary-active: var(--mu-green-900);
  --mu-primary-soft: var(--mu-green-50);
  --mu-primary-soft-border: var(--mu-green-200);
  --mu-link: var(--mu-green-700);
  --mu-link-hover: var(--mu-green-900);
  --mu-accent-on-ink: var(--mu-green-400);

  --mu-success: #1a7443;
  --mu-success-bg: #e9f6ee;
  --mu-success-border: #b5dfc5;
  --mu-warning: #855600;
  --mu-warning-solid: #d48a05;
  --mu-warning-bg: #fdf4de;
  --mu-warning-border: #f0d9a0;
  --mu-danger: #b3261e;
  --mu-danger-hover: #8f1d17;
  --mu-danger-bg: #fdecea;
  --mu-danger-border: #f2beb9;
  --mu-info: #1f5fa8;
  --mu-info-bg: #eaf2fb;
  --mu-info-border: #bcd4ef;
  --mu-danger-on-ink: #ffb4ab;

  /* Code block palette (on --mu-ink) */
  --mu-code-text: #dfe7d6;
  --mu-code-keyword: #b7d66b;
  --mu-code-string: #f2c879;
  --mu-code-comment: #8c9884;

  /* Typography */
  --mu-font-sans: "Vazirmatn", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
  /* "Vazirmatn Arabic" is the same file limited to Arabic-script code points,
     so Persian inside code keeps its joining forms while Latin stays monospaced. */
  --mu-font-mono: "Vazirmatn Arabic", "Cascadia Mono", "Cascadia Code", Consolas, "SFMono-Regular", Menlo, "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace;

  --mu-fs-display: clamp(2.125rem, 1.35rem + 3.6vw, 4rem);
  --mu-fs-h1: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --mu-fs-h2: clamp(1.4375rem, 1.2rem + 1.1vw, 2rem);
  --mu-fs-h3: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --mu-fs-h4: 1.0625rem;
  --mu-fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --mu-fs-body: 1rem;
  --mu-fs-sm: .875rem;
  --mu-fs-xs: .8125rem;
  --mu-fs-code: .875rem;

  --mu-fw-regular: 400;
  --mu-fw-medium: 500;
  --mu-fw-semibold: 600;
  --mu-fw-bold: 700;
  --mu-fw-extrabold: 800;

  /* Persian script needs more leading than Latin at every size. */
  --mu-lh-display: 1.3;
  --mu-lh-heading: 1.45;
  --mu-lh-snug: 1.6;
  --mu-lh-body: 1.95;
  --mu-lh-ui: 1.5;

  /* Spacing: 4px base */
  --mu-1: .25rem;
  --mu-2: .5rem;
  --mu-3: .75rem;
  --mu-4: 1rem;
  --mu-5: 1.25rem;
  --mu-6: 1.5rem;
  --mu-8: 2rem;
  --mu-10: 2.5rem;
  --mu-12: 3rem;
  --mu-16: 4rem;
  --mu-20: 5rem;
  --mu-24: 6rem;

  /* Layout. Breakpoints (min-width, mobile first) cannot be variables in
     media queries; the values are listed here as the single reference:
     sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */
  --mu-container: 76rem;
  --mu-container-narrow: 46rem;
  --mu-gutter: clamp(1rem, 4vw, 2.5rem);
  --mu-section-y: clamp(3rem, 2rem + 5vw, 6.5rem);
  --mu-header-h: 3.75rem;
  --mu-control-h: 2.875rem;        /* 46px: comfortably above the 44px target */
  --mu-control-h-sm: 2.5rem;

  /* Shape */
  --mu-r-xs: .25rem;
  --mu-r-sm: .5rem;
  --mu-r-md: .75rem;
  --mu-r-lg: 1rem;
  --mu-r-xl: 1.5rem;
  --mu-r-pill: 999px;

  /* Elevation: used sparingly; hairline borders carry most separation. */
  --mu-shadow-1: 0 1px 2px rgba(17, 23, 15, .06), 0 1px 1px rgba(17, 23, 15, .04);
  --mu-shadow-2: 0 6px 16px -4px rgba(17, 23, 15, .10), 0 2px 4px -2px rgba(17, 23, 15, .06);
  --mu-shadow-3: 0 22px 48px -16px rgba(17, 23, 15, .22), 0 8px 16px -8px rgba(17, 23, 15, .08);
  --mu-shadow-4: 0 36px 90px -24px rgba(17, 23, 15, .40), 0 12px 24px -12px rgba(17, 23, 15, .18);

  /* Focus */
  --mu-focus: var(--mu-green-700);
  --mu-focus-on-ink: var(--mu-green-400);
  --mu-focus-halo: rgba(79, 122, 8, .22);
  --mu-focus-width: 2px;
  --mu-focus-offset: 2px;

  /* Motion */
  --mu-dur-1: 120ms;
  --mu-dur-2: 200ms;
  --mu-dur-3: 320ms;
  --mu-ease: cubic-bezier(.2, .7, .2, 1);

  /* Stacking. Bootstrap's modal layer (1040 backdrop / 1050 dialog) is kept. */
  --mu-z-raised: 10;
  --mu-z-sticky: 100;
  --mu-z-header: 200;
  --mu-z-dropdown: 300;
  --mu-z-backdrop: 1040;
  --mu-z-modal: 1050;
  --mu-z-toast: 1080;
}

@media (min-width: 1024px) {
  :root { --mu-header-h: 4.5rem; }
}
@media (min-width: 1536px) {
  :root { --mu-container: 84rem; }
}

/* 3. BASE ----------------------------------------------------------------- */
/* Bootstrap 3 sets html{font-size:10px}. Bootstrap itself only uses px, so
   restoring the browser default is safe and makes rem and user zoom work. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--mu-header-h) + 1rem);
  scrollbar-gutter: stable;
}

body.mu,
.mu {
  font-family: var(--mu-font-sans);
  font-size: var(--mu-fs-body);
  font-weight: var(--mu-fw-regular);
  line-height: var(--mu-lh-body);
  letter-spacing: 0;               /* never track Persian: it breaks joining */
  color: var(--mu-text);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
body.mu {
  margin: 0;
  background: var(--mu-bg);
  color-scheme: light;
  overflow-wrap: break-word;
  min-block-size: 100vh;
}
/* Bootstrap pads the body while a modal is open; with a stable scrollbar
   gutter that would shift an RTL page. */
body.mu.modal-open { padding-inline: 0 !important; }

:where(.mu) *,
:where(.mu) *::before,
:where(.mu) *::after { box-sizing: border-box; }

:where(.mu) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: inherit;
  font-weight: var(--mu-fw-bold);
  line-height: var(--mu-lh-heading);
  color: var(--mu-text);
  text-wrap: balance;
}
:where(.mu) h1 { font-size: var(--mu-fs-h1); font-weight: var(--mu-fw-extrabold); line-height: 1.35; }
:where(.mu) h2 { font-size: var(--mu-fs-h2); }
:where(.mu) h3 { font-size: var(--mu-fs-h3); }
:where(.mu) h4 { font-size: var(--mu-fs-h4); font-weight: var(--mu-fw-semibold); }
:where(.mu) h5 { font-size: var(--mu-fs-body); font-weight: var(--mu-fw-semibold); }
:where(.mu) h6 { font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-semibold); }

:where(.mu) p { margin: 0; text-wrap: pretty; }
:where(.mu) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.mu) small { font-size: var(--mu-fs-sm); }
:where(.mu) :is(b, strong) { font-weight: var(--mu-fw-bold); }
:where(.mu) hr { margin: var(--mu-8) 0; border: 0; border-block-start: 1px solid var(--mu-border); }
:where(.mu) img { max-inline-size: 100%; block-size: auto; vertical-align: middle; }
:where(.mu) :is(button, input, select, textarea) { font: inherit; letter-spacing: inherit; color: inherit; }
:where(.mu) label { margin: 0; font-weight: inherit; max-inline-size: none; }
:where(.mu) table { border-collapse: collapse; }

:where(.mu) a {
  color: var(--mu-link);
  text-decoration: none;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  transition: color var(--mu-dur-1) var(--mu-ease);
}
:where(.mu) a:hover { color: var(--mu-link-hover); text-decoration: none; }
:where(.mu) a:focus { text-decoration: none; }

/* Focus: one visible treatment everywhere, keyboard only. */
.mu :focus { outline: none; }
.mu :focus-visible {
  outline: var(--mu-focus-width) solid var(--mu-focus);
  outline-offset: var(--mu-focus-offset);
}
.mu ::selection { background: var(--mu-green-200); color: var(--mu-n-950); }

/* Technical text */
:where(.mu) :is(code, kbd, samp, pre) {
  font-family: var(--mu-font-mono);
  font-size: var(--mu-fs-code);
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0;
}
:where(.mu) code {
  padding: .1em .4em;
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-xs);
  background: var(--mu-surface-sunken);
  color: var(--mu-n-800);
  white-space: normal;
  overflow-wrap: anywhere;
}
:where(.mu) kbd {
  padding: .1em .45em;
  border: 1px solid var(--mu-border-strong);
  border-block-end-width: 2px;
  border-radius: var(--mu-r-xs);
  background: var(--mu-surface);
  color: var(--mu-text);
  box-shadow: none;
  font-weight: var(--mu-fw-medium);
}
:where(.mu) pre {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  line-height: 1.7;
  text-align: left;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
:where(.mu) pre code { padding: 0; border: 0; background: none; color: inherit; white-space: inherit; }

/* 4. LAYOUT --------------------------------------------------------------- */
.mu-container {
  inline-size: 100%;
  max-inline-size: calc(var(--mu-container) + 2 * var(--mu-gutter));
  margin-inline: auto;
  padding-inline: var(--mu-gutter);
}
.mu-container--narrow { max-inline-size: calc(var(--mu-container-narrow) + 2 * var(--mu-gutter)); }
.mu-container--fluid { max-inline-size: none; }

.mu-section { padding-block: var(--mu-section-y); }
.mu-section--tight { padding-block: calc(var(--mu-section-y) * .6); }
.mu-section--sunken { background: var(--mu-surface-sunken); border-block: 1px solid var(--mu-border); }
.mu-section--surface { background: var(--mu-surface); }
.mu-section + .mu-section--sunken,
.mu-section--sunken + .mu-section { border-block-start: 0; }

.mu-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mu-4) var(--mu-8);
  margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.mu-section__titles { display: grid; gap: var(--mu-2); max-inline-size: 44rem; min-inline-size: 0; }
.mu-section__lead { color: var(--mu-text-muted); font-size: var(--mu-fs-lead); line-height: var(--mu-lh-body); }
.mu-section__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mu-2); }

.mu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mu-2);
  font-size: var(--mu-fs-xs);
  font-weight: var(--mu-fw-semibold);
  line-height: var(--mu-lh-ui);
  color: var(--mu-primary);
}
.mu-eyebrow::before {
  content: "";
  inline-size: 1.25rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--mu-green-500);
}

/* Auto-fitting grid. Set --mu-min to change the smallest column. */
.mu-grid {
  --mu-min: 16rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--mu-min), 100%), 1fr));
  gap: var(--mu-5);
}
.mu-grid > * { min-inline-size: 0; }
.mu-grid--2 { grid-template-columns: 1fr; }
.mu-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .mu-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mu-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mu-stack { display: grid; gap: var(--mu-4); align-content: start; }
.mu-stack > * { min-inline-size: 0; }
.mu-stack--sm { gap: var(--mu-2); }
.mu-stack--lg { gap: var(--mu-8); }
.mu-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mu-3); }

/* Main + aside, aside sticks under the header on wide screens. */
.mu-split { display: grid; gap: var(--mu-8); align-items: start; }
.mu-split > * { min-inline-size: 0; }
@media (min-width: 1024px) {
  .mu-split { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); gap: var(--mu-12); }
  .mu-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-split--aside-start { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); }
  .mu-split__sticky { position: sticky; inset-block-start: calc(var(--mu-header-h) + var(--mu-6)); }
}

/* Horizontal rail: native scroll + snap, follows the document direction. */
.mu-rail {
  --mu-per-view: 1.15;
  --mu-rail-gap: var(--mu-4);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--mu-per-view) - 1) * var(--mu-rail-gap)) / var(--mu-per-view));
  gap: var(--mu-rail-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--mu-gutter);
  margin-inline: calc(var(--mu-gutter) * -1);
  padding-inline: var(--mu-gutter);
  padding-block: var(--mu-1) var(--mu-4);
  scrollbar-width: thin;
  scrollbar-color: var(--mu-n-300) transparent;
}
.mu-rail > * { scroll-snap-align: start; min-inline-size: 0; }
@media (min-width: 480px) { .mu-rail { --mu-per-view: 1.6; } }
@media (min-width: 768px) { .mu-rail { --mu-per-view: 2.5; --mu-rail-gap: var(--mu-5); } }
@media (min-width: 1024px) { .mu-rail { --mu-per-view: 3.25; } }
@media (min-width: 1280px) { .mu-rail { --mu-per-view: 4; } }

/* 5. UTILITIES ------------------------------------------------------------ */
/* Isolated left-to-right run for phone numbers, e-mail, URLs, API paths,
   code and prices inside Persian text. */
.mu-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.mu-ltr--block { display: block; }
.mu-ltr--end { text-align: right; }
.mu-rtl { direction: rtl; unicode-bidi: isolate; }
.mu-num { font-variant-numeric: tabular-nums; }
.mu-mono { font-family: var(--mu-font-mono); font-size: .9375em; }
.mu-break { overflow-wrap: anywhere; }
.mu-nowrap { white-space: nowrap; }

.mu-muted { color: var(--mu-text-muted); }
.mu-subtle { color: var(--mu-text-subtle); }
.mu-lead { font-size: var(--mu-fs-lead); color: var(--mu-text-2); line-height: var(--mu-lh-body); }
.mu-small { font-size: var(--mu-fs-sm); line-height: 1.8; }
.mu-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--mu-2);
  font-size: var(--mu-fs-xs);
  font-weight: var(--mu-fw-medium);
  line-height: var(--mu-lh-ui);
  color: var(--mu-text-subtle);
}
.mu-display {
  font-size: var(--mu-fs-display);
  font-weight: var(--mu-fw-extrabold);
  line-height: var(--mu-lh-display);
  text-wrap: balance;
}
/* Marker highlight for one phrase inside a display heading. */
.mu-mark {
  background: linear-gradient(to top, var(--mu-green-200) 0 .34em, transparent .34em);
  color: inherit;
  padding-inline: .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mu-sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mu-skip {
  position: absolute;
  inset-block-start: var(--mu-2);
  inset-inline-start: var(--mu-2);
  z-index: calc(var(--mu-z-modal) + 100);
  padding: var(--mu-2) var(--mu-4);
  border-radius: var(--mu-r-sm);
  background: var(--mu-ink);
  color: var(--mu-text-on-ink) !important;
  font-weight: var(--mu-fw-semibold);
  transform: translateY(-200%);
}
.mu-skip:focus { transform: none; }

@media (max-width: 767.98px) { .mu-hide-below-md { display: none !important; } }
@media (max-width: 1023.98px) { .mu-hide-below-lg { display: none !important; } }
@media (min-width: 1024px) { .mu-hide-from-lg { display: none !important; } }

/* Neutralise a layout <table> emitted by a server control (asp:Login,
   RadioButtonList) so its cells can be laid out with flex or grid. */
.mu-detable,
.mu-detable > tbody,
.mu-detable > tbody > tr,
.mu-detable > tbody > tr > td { display: block; inline-size: 100%; padding: 0; border: 0; }

/* Defensive wrapper for admin-authored HTML coming from the database. */
.mu-prose { max-inline-size: 46rem; color: var(--mu-text-2); font-size: 1.0625rem; overflow-wrap: anywhere; }
.mu-prose > * + * { margin-block-start: 1.15em; }
.mu-prose p { line-height: var(--mu-lh-body) !important; text-align: start !important; }
.mu-prose :is(h2, h3, h4) { margin-block-start: 1.8em; color: var(--mu-text); }
.mu-prose :is(ul, ol) { padding-inline-start: 1.4em; list-style: revert; }
.mu-prose li + li { margin-block-start: .4em; }
.mu-prose li::marker { color: var(--mu-green-600); }
.mu-prose a { text-decoration: underline; }
.mu-prose img { border-radius: var(--mu-r-md); }
.mu-prose table { display: block; max-inline-size: 100%; overflow-x: auto; }
.mu-prose [style*="font-family"], .mu-prose font { font-family: inherit !important; }
/* 6. NAVIGATION, HEADER, FOOTER -------------------------------------------- */

/* Utility strip above the header: contact shortcuts and login. ≥1024px only. */
.mu-topbar {
  display: none;
  background: var(--mu-surface-sunken);
  border-block-end: 1px solid var(--mu-border);
  font-size: var(--mu-fs-xs);
  line-height: var(--mu-lh-ui);
  color: var(--mu-text-muted);
}
.mu-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mu-6); min-block-size: 2.25rem; }
.mu-topbar__list { display: flex; align-items: center; gap: var(--mu-6); }
.mu-topbar a { display: inline-flex; align-items: center; gap: var(--mu-2); color: var(--mu-text-muted); font-weight: var(--mu-fw-medium); }
.mu-topbar a:hover { color: var(--mu-text); }
.mu-topbar .mu-icon { color: var(--mu-n-400); }
@media (min-width: 1024px) { .mu-topbar { display: block; } }

/* Header: one sticky white bar. Logo at the start, navigation, actions at the end. */
.mu-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--mu-z-header);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-block-end: 1px solid var(--mu-border);
}
.mu-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mu-3);
  min-block-size: var(--mu-header-h);
}
.mu-header__actions { display: flex; align-items: center; gap: var(--mu-2); margin-inline-start: auto; }

.mu-brand { display: inline-flex; align-items: center; gap: var(--mu-3); color: var(--mu-text) !important; min-inline-size: 0; }
.mu-brand__logo { inline-size: 2.5rem; block-size: 2.5rem; object-fit: contain; flex: none; }
.mu-brand__text { display: grid; line-height: 1.3; min-inline-size: 0; }
.mu-brand__name { font-size: 1.0625rem; font-weight: var(--mu-fw-extrabold); white-space: nowrap; }
.mu-brand__tag { display: none; font-size: .6875rem; font-weight: var(--mu-fw-medium); color: var(--mu-text-subtle); letter-spacing: .08em; white-space: nowrap; }
@media (min-width: 1280px) { .mu-brand__tag { display: block; } }

/* Menu button (mobile and tablet). Bootstrap toggles aria-expanded on it. */
.mu-nav-toggle {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-md);
  background: var(--mu-surface);
  color: var(--mu-text);
  cursor: pointer;
  transition: background-color var(--mu-dur-1) var(--mu-ease), border-color var(--mu-dur-1) var(--mu-ease);
}
.mu-nav-toggle:hover { background: var(--mu-surface-hover); border-color: var(--mu-border-strong); }
.mu-nav-toggle .mu-icon { grid-area: 1 / 1; inline-size: 1.375rem; block-size: 1.375rem; transition: opacity var(--mu-dur-2) var(--mu-ease), transform var(--mu-dur-2) var(--mu-ease); }
.mu-nav-toggle .mu-icon--close { opacity: 0; transform: rotate(-45deg) scale(.7); }
.mu-nav-toggle[aria-expanded="true"] .mu-icon--menu { opacity: 0; transform: rotate(45deg) scale(.7); }
.mu-nav-toggle[aria-expanded="true"] .mu-icon--close { opacity: 1; transform: none; }

/* Navigation. Below 1024px it is a full-width panel under the bar, driven by
   Bootstrap collapse (.collapse / .in / .collapsing). */
.mu-nav {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  max-block-size: calc(100vh - var(--mu-header-h));
  max-block-size: calc(100dvh - var(--mu-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mu-surface);
  border-block-end: 1px solid var(--mu-border);
  box-shadow: var(--mu-shadow-3);
}
.mu-nav__inner { display: grid; gap: var(--mu-4); padding: var(--mu-3) var(--mu-gutter) var(--mu-6); }
.mu-nav__list { display: grid; gap: 2px; }
.mu-nav__item { position: static; }
.mu-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mu-2);
  min-block-size: 3rem;
  padding: var(--mu-2) var(--mu-3);
  border-radius: var(--mu-r-md);
  font-size: 1.0625rem;
  font-weight: var(--mu-fw-medium);
  line-height: var(--mu-lh-ui);
  color: var(--mu-text-2) !important;
  background: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mu-dur-1) var(--mu-ease), color var(--mu-dur-1) var(--mu-ease);
}
.mu-nav__link:hover { background: var(--mu-surface-hover); color: var(--mu-text) !important; }
.mu-nav__link[aria-current="page"],
.mu-nav__item.is-active > .mu-nav__link { color: var(--mu-green-800) !important; background: var(--mu-primary-soft); font-weight: var(--mu-fw-semibold); }
.mu-nav__link .mu-icon { inline-size: 1.125rem; block-size: 1.125rem; color: var(--mu-n-400); transition: transform var(--mu-dur-2) var(--mu-ease); }
.mu-nav__item.open > .mu-nav__link { background: var(--mu-surface-hover); color: var(--mu-text) !important; }
.mu-nav__item.open > .mu-nav__link .mu-icon { transform: rotate(180deg); }
.mu-nav__extra { display: grid; gap: var(--mu-3); padding-block-start: var(--mu-4); border-block-start: 1px solid var(--mu-border); }

/* Mega menu. Markup keeps Bootstrap's dropdown hooks:
   li.dropdown > a.dropdown-toggle[data-toggle=dropdown] + ul.dropdown-menu.mu-mega */
.mu .mu-mega {
  position: static;
  float: none;
  display: none;
  inline-size: auto;
  min-inline-size: 0;
  margin: var(--mu-1) 0 var(--mu-2);
  padding: var(--mu-3);
  border: 0;
  border-radius: var(--mu-r-md);
  background: var(--mu-surface-sunken);
  box-shadow: none;
  font-size: inherit;
  text-align: start;
  list-style: none;
}
.mu .open > .mu-mega { display: grid; gap: var(--mu-4); }
.mu-mega__col { min-inline-size: 0; }
.mu .mu-mega__title {
  display: flex;
  align-items: center;
  gap: var(--mu-2);
  padding: var(--mu-1) var(--mu-2) var(--mu-2);
  font-size: var(--mu-fs-xs);
  font-weight: var(--mu-fw-semibold);
  line-height: var(--mu-lh-ui);
  color: var(--mu-text-subtle);
  white-space: normal;
}
.mu-mega__title .mu-icon { color: var(--mu-green-600); }
.mu-mega__list { display: grid; gap: 2px; }
.mu-mega__list a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: var(--mu-2) var(--mu-3);
  border-radius: var(--mu-r-sm);
  font-size: var(--mu-fs-body);
  font-weight: var(--mu-fw-medium);
  line-height: var(--mu-lh-snug);
  color: var(--mu-text) !important;
  white-space: normal;
  transition: background-color var(--mu-dur-1) var(--mu-ease);
}
.mu-mega__list a:hover,
.mu-mega__list a:focus-visible { background: var(--mu-surface); box-shadow: inset 0 0 0 1px var(--mu-border); }
.mu-mega .divider { display: none; }

@media (min-width: 1024px) {
  .mu-nav-toggle { display: none; }
  .mu-nav {
    position: static;
    display: block !important;      /* override Bootstrap .collapse on desktop */
    block-size: auto !important;
    max-block-size: none;
    overflow: visible;
    margin-inline: var(--mu-4) 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .mu-nav__inner { display: block; padding: 0; }
  .mu-nav__list { display: flex; align-items: center; gap: 2px; }
  .mu-nav__link {
    min-block-size: 2.5rem;
    padding: var(--mu-1) var(--mu-3);
    border-radius: var(--mu-r-pill);
    font-size: .9375rem;
    justify-content: flex-start;
  }
  .mu-nav__extra { display: none; }

  .mu .mu-mega {
    position: absolute;
    inset-block-start: calc(100% + 1px);
    inset-inline: 0;
    z-index: var(--mu-z-dropdown);
    inline-size: min(50rem, 100%);
    margin: 0 auto;
    padding: var(--mu-4);
    border: 1px solid var(--mu-border);
    border-block-start: 0;
    border-radius: 0 0 var(--mu-r-lg) var(--mu-r-lg);
    background: var(--mu-surface);
    box-shadow: var(--mu-shadow-3);
  }
  .mu .open > .mu-mega { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--mu-4); }
  .mu-mega__col { padding: var(--mu-2); border-radius: var(--mu-r-md); }
  .mu-mega__col + .mu-mega__col { background: var(--mu-surface-sunken); }
  .mu-mega__col--wide .mu-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mu-2); }
  .mu-mega__col--wide .mu-mega__title { grid-column: 1 / -1; }
  .mu-mega__list a { font-size: .9375rem; min-block-size: 2.5rem; }
}
/* 1024–1279px: the seven links, brand and call to action share one row, so
   the links tighten and the support button drops to its icon. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .mu-nav { margin-inline-start: var(--mu-2); }
  .mu-nav__link { padding-inline: .5625rem; font-size: .875rem; }
  .mu-header__actions .mu-btn { inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0; border-radius: var(--mu-r-md); }
  .mu-header__actions .mu-btn > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .mu-header__actions .mu-btn .mu-icon { inline-size: 1.25rem; block-size: 1.25rem; }
}
@media (min-width: 1280px) {
  .mu-nav { margin-inline-start: var(--mu-8); }
  .mu-nav__link { padding-inline: var(--mu-4); }
}

/* Customer club: the one dark, high-contrast band on the page. Sits above the footer. */
.mu-club {
  position: relative;
  display: grid;
  gap: var(--mu-6);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--mu-r-xl);
  background: var(--mu-ink);
  color: var(--mu-text-on-ink);
  overflow: hidden;
  isolation: isolate;
}
.mu-club::before {             /* signal-grid texture, fades toward the text */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(158, 202, 53, .34) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 55%);
  mask-image: linear-gradient(to right, #000, transparent 55%);
}
[dir="ltr"] .mu-club::before { -webkit-mask-image: linear-gradient(to left, #000, transparent 55%); mask-image: linear-gradient(to left, #000, transparent 55%); }
.mu-club__text { display: grid; gap: var(--mu-2); max-inline-size: 34rem; }
.mu-club__kicker { font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-semibold); color: var(--mu-accent-on-ink); line-height: var(--mu-lh-ui); }
.mu-club__title { font-size: var(--mu-fs-h2); font-weight: var(--mu-fw-extrabold); color: #fff; line-height: var(--mu-lh-heading); }
.mu-club__desc { color: var(--mu-text-on-ink-muted); }
.mu-club__form { display: grid; gap: var(--mu-2); min-inline-size: 0; }
.mu-club__status { font-size: var(--mu-fs-sm); line-height: 1.7; margin: 0 !important; }
/* The code-behind writes inline color:red / color:green on the status text.
   Remap those two values to tones that are readable on the dark band. */
.mu-club__status[style*="red"] { color: var(--mu-danger-on-ink) !important; }
.mu-club__status[style*="green"] { color: var(--mu-green-300) !important; }
.mu-club :focus-visible { outline-color: var(--mu-focus-on-ink); }
@media (min-width: 1024px) {
  .mu-club { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--mu-12); }
}

/* Footer: light, quiet, structured. */
.mu-footer { margin-block-start: var(--mu-section-y); background: var(--mu-surface-sunken); border-block-start: 1px solid var(--mu-border); }
.mu-footer--with-club { margin-block-start: calc(var(--mu-section-y) + 5rem); }
.mu-footer--with-club .mu-club { margin-block-start: -5rem; }
.mu-footer__main { display: grid; gap: var(--mu-10) var(--mu-8); padding-block: var(--mu-12) var(--mu-10); }
.mu-footer__brand { display: grid; gap: var(--mu-4); align-content: start; max-inline-size: 24rem; }
.mu-footer__about { color: var(--mu-text-muted); font-size: var(--mu-fs-sm); line-height: 1.9; }
.mu-footer__contact { display: grid; gap: 0; justify-items: start; font-size: var(--mu-fs-sm); }
.mu-footer__contact a { display: inline-flex; align-items: center; gap: var(--mu-2); min-block-size: 2.5rem; color: var(--mu-text-2); font-weight: var(--mu-fw-medium); }
.mu-footer__contact a:hover { color: var(--mu-link-hover); }
.mu-footer__contact .mu-icon { color: var(--mu-green-600); }
.mu-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-8) var(--mu-6); }
.mu-footer__col:first-child { grid-column: 1 / -1; }
.mu-footer__title { margin-block-end: var(--mu-3); font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-bold); color: var(--mu-text); line-height: var(--mu-lh-ui); }
.mu-footer__links { display: grid; gap: 2px; }
.mu-footer__links a {
  display: inline-block;
  padding-block: .5rem;
  font-size: var(--mu-fs-sm);
  line-height: 1.7;
  color: var(--mu-text-muted);
}
.mu-footer__links a:hover { color: var(--mu-text); text-decoration: underline; }
.mu-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mu-3) var(--mu-6);
  padding-block: var(--mu-5);
  border-block-start: 1px solid var(--mu-border);
  font-size: var(--mu-fs-xs);
  color: var(--mu-text-subtle);
}
.mu-footer__social { display: flex; gap: var(--mu-1); }
.mu-footer__social a {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--mu-r-pill);
  color: var(--mu-text-muted);
  transition: background-color var(--mu-dur-1) var(--mu-ease), color var(--mu-dur-1) var(--mu-ease);
}
.mu-footer__social a:hover { background: var(--mu-n-200); color: var(--mu-text); }
@media (min-width: 768px) {
  .mu-footer__cols { grid-template-columns: 1.3fr 1fr 1fr; }
  .mu-footer__col:first-child { grid-column: auto; }
}
@media (min-width: 1024px) {
  .mu-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: var(--mu-16); }
}

/* Breadcrumb */
.mu-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mu-1) var(--mu-2); font-size: var(--mu-fs-xs); line-height: var(--mu-lh-ui); color: var(--mu-text-subtle); }
.mu-breadcrumb a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--mu-text-muted); font-weight: var(--mu-fw-medium); }
.mu-breadcrumb a:hover { color: var(--mu-text); }
.mu-breadcrumb li { display: inline-flex; align-items: center; gap: var(--mu-2); }
.mu-breadcrumb li + li::before { content: "/"; color: var(--mu-n-300); }
.mu-breadcrumb [aria-current] { color: var(--mu-text); font-weight: var(--mu-fw-medium); }

/* Header actions collapse to icon-only buttons on the narrowest screens. */
@media (max-width: 479.98px) {
  .mu-header__actions .mu-btn { inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0; border-radius: var(--mu-r-md); }
  .mu-header__actions .mu-btn > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .mu-header__actions .mu-btn .mu-icon { inline-size: 1.25rem; block-size: 1.25rem; }
}
/* 7. CONTENT COMPONENTS ---------------------------------------------------- */

/* Hero (home). Headline row, then a wide framed stage for the banner carousel. */
.mu-hero {
  position: relative;
  padding-block: clamp(2.25rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.mu-hero::before {             /* signal grid: the page's one recurring motif */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, var(--mu-n-300) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 12% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 75% at 12% 0%, #000 10%, transparent 72%);
}
[dir="ltr"] .mu-hero::before { transform: scaleX(-1); }
.mu-hero__head { display: grid; gap: var(--mu-5); }
.mu-hero__titles { display: grid; gap: var(--mu-4); justify-items: start; min-inline-size: 0; }
.mu-hero__title { font-size: var(--mu-fs-display); font-weight: var(--mu-fw-extrabold); line-height: var(--mu-lh-display); max-inline-size: 22ch; }
.mu-hero__side { display: grid; gap: var(--mu-6); align-content: end; min-inline-size: 0; }
.mu-hero__lead { font-size: var(--mu-fs-lead); color: var(--mu-text-2); max-inline-size: 34rem; }
.mu-hero__actions { display: flex; flex-wrap: wrap; gap: var(--mu-3); }
@media (max-width: 479.98px) { .mu-hero__actions > * { flex: 1 1 100%; } }
.mu-hero__stage { margin-block-start: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 1024px) {
  .mu-hero__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--mu-16); align-items: end; }
}

/* Framed media stage (banner carousel, product photo, map). */
.mu-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-lg);
  background: var(--mu-surface);
  box-shadow: var(--mu-shadow-3);
}
.mu-stage img { display: block; inline-size: 100%; block-size: auto; }
.mu-stage--flat { box-shadow: none; }
@media (min-width: 768px) { .mu-stage { border-radius: var(--mu-r-xl); } }

/* Page heading band for inner pages. */
.mu-pagehead {
  position: relative;
  padding-block: clamp(1.5rem, 1rem + 2.5vw, 3rem) clamp(1.75rem, 1rem + 3vw, 3.5rem);
  background: var(--mu-surface);
  border-block-end: 1px solid var(--mu-border);
  overflow: hidden;
  isolation: isolate;
}
.mu-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, var(--mu-n-300) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 45%);
  mask-image: linear-gradient(to right, #000, transparent 45%);
  opacity: .8;
}
[dir="ltr"] .mu-pagehead::before { transform: scaleX(-1); }
.mu-pagehead__inner { display: grid; gap: var(--mu-3); justify-items: start; }
.mu-pagehead__title { font-size: var(--mu-fs-h1); font-weight: var(--mu-fw-extrabold); line-height: 1.35; }
.mu-pagehead__lead { max-inline-size: 42rem; font-size: var(--mu-fs-lead); color: var(--mu-text-muted); }
.mu-pagehead__meta { display: flex; flex-wrap: wrap; gap: var(--mu-2) var(--mu-3); margin-block-start: var(--mu-2); }

/* Card base. Border first; shadow only on hover or when raised. */
.mu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-lg);
  background: var(--mu-surface);
  transition: border-color var(--mu-dur-2) var(--mu-ease), box-shadow var(--mu-dur-2) var(--mu-ease), transform var(--mu-dur-2) var(--mu-ease);
}
.mu-card__body { display: grid; gap: var(--mu-2); align-content: start; padding: var(--mu-5); flex: 1; }
.mu-card--raised { box-shadow: var(--mu-shadow-2); }
.mu-card--pad { padding: var(--mu-6); }
/* Whole-card link: put .mu-card__link on the title anchor. */
.mu-card__link { color: inherit !important; }
.mu-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mu-card--link:hover { border-color: var(--mu-border-strong); box-shadow: var(--mu-shadow-2); transform: translateY(-2px); }
.mu-card--link:has(:focus-visible) { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: var(--mu-focus-offset); }
.mu-card--link .mu-card__link:focus-visible { outline: none; }

/* "More" affordance at the bottom of a link card. */
.mu-more {
  display: inline-flex;
  align-items: center;
  gap: var(--mu-2);
  font-size: var(--mu-fs-sm);
  font-weight: var(--mu-fw-semibold);
  line-height: var(--mu-lh-ui);
  color: var(--mu-link);
}
.mu-more .mu-icon { inline-size: 1.125rem; block-size: 1.125rem; transition: transform var(--mu-dur-2) var(--mu-ease); }
.mu-card--link:hover .mu-more .mu-icon,
a.mu-more:hover .mu-icon { transform: translateX(-4px); }
[dir="ltr"] .mu-card--link:hover .mu-more .mu-icon,
[dir="ltr"] a.mu-more:hover .mu-icon { transform: translateX(4px); }

/* Product card. Legacy product art is small (about 100–220px), so the media
   well centres it at natural size and never upscales it. */
.mu-product-card__media {
  display: grid;
  place-items: center;
  block-size: 10.5rem;
  padding: var(--mu-4);
  border-block-end: 1px solid var(--mu-border);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background:
    radial-gradient(circle at 1px 1px, var(--mu-n-200) 1px, transparent 0) 0 0 / 16px 16px,
    var(--mu-surface-sunken);
}
.mu-product-card__media img { inline-size: auto; max-inline-size: 100%; max-block-size: 7.5rem; object-fit: contain; }
.mu-product-card__title { font-size: 1.125rem; font-weight: var(--mu-fw-bold); line-height: var(--mu-lh-snug); }
.mu-product-card__desc { color: var(--mu-text-muted); font-size: .9375rem; line-height: 1.85; }
.mu-product-card .mu-more { margin-block-start: var(--mu-2); }

/* Electronics card: horizontal from 480px, media at the start edge. */
.mu-product-card--wide .mu-product-card__media { block-size: 9rem; }
@media (min-width: 480px) {
  .mu-product-card--wide { flex-direction: row; }
  .mu-product-card--wide .mu-product-card__media {
    flex: 0 0 38%;
    block-size: auto;
    min-block-size: 9.5rem;
    border-block-end: 0;
    border-inline-end: 1px solid var(--mu-border);
    border-start-end-radius: 0;
    border-end-start-radius: inherit;
  }
}

/* Product detail: summary panel (audience, price, call to action). */
.mu-summary { display: grid; gap: var(--mu-5); padding: var(--mu-6); border: 1px solid var(--mu-border); border-radius: var(--mu-r-lg); background: var(--mu-surface); box-shadow: var(--mu-shadow-2); }
.mu-summary__media { display: grid; place-items: center; padding: var(--mu-5); border-radius: var(--mu-r-md); background: var(--mu-surface-sunken); }
.mu-summary__media img { max-block-size: 9rem; inline-size: auto; }
.mu-deflist { display: grid; gap: 0; margin: 0; }
.mu-deflist__row { display: grid; gap: var(--mu-1); padding-block: var(--mu-3); border-block-end: 1px solid var(--mu-border); }
.mu-deflist__row:first-child { padding-block-start: 0; }
.mu-deflist__row:last-child { border-block-end: 0; padding-block-end: 0; }
.mu-deflist dt { font-size: var(--mu-fs-xs); font-weight: var(--mu-fw-medium); color: var(--mu-text-subtle); line-height: var(--mu-lh-ui); }
.mu-deflist dd { margin: 0; font-weight: var(--mu-fw-semibold); line-height: var(--mu-lh-snug); color: var(--mu-text); }
.mu-price { display: inline-flex; align-items: baseline; gap: var(--mu-2); font-size: 1.625rem; font-weight: var(--mu-fw-extrabold); line-height: 1.3; color: var(--mu-text); }
.mu-price__unit { font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-medium); color: var(--mu-text-muted); }

/* Feature tiles. .is-plus marks the tiles the code-behind renders as greenBox. */
.mu-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr)); gap: var(--mu-2); }
.mu-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--mu-3);
  min-block-size: 3.25rem;
  padding: var(--mu-3) var(--mu-4);
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-md);
  background: var(--mu-surface);
  font-size: .9375rem;
  font-weight: var(--mu-fw-medium);
  line-height: 1.7;
  color: var(--mu-text);
}
.mu-feature > .mu-icon { margin-block-start: .2em; color: var(--mu-n-400); }
.mu-feature.is-plus { border-color: var(--mu-primary-soft-border); background: var(--mu-primary-soft); }
.mu-feature.is-plus > .mu-icon { color: var(--mu-green-700); }
.mu-legend { display: flex; flex-wrap: wrap; gap: var(--mu-2) var(--mu-5); font-size: var(--mu-fs-xs); color: var(--mu-text-muted); }
.mu-legend span { display: inline-flex; align-items: center; gap: var(--mu-2); }
.mu-legend i { inline-size: .75rem; block-size: .75rem; border: 1px solid var(--mu-border-strong); border-radius: 3px; background: var(--mu-surface); }
.mu-legend i.is-plus { border-color: var(--mu-green-300); background: var(--mu-green-100); }

/* News card */
.mu-news-list { display: grid; gap: var(--mu-5); }
@media (min-width: 1024px) { .mu-news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mu-news-card { flex-direction: column; overflow: hidden; }
.mu-news-card__media { aspect-ratio: 16 / 9; background: var(--mu-surface-sunken); overflow: hidden; }
.mu-news-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--mu-dur-3) var(--mu-ease); }
.mu-news-card:hover .mu-news-card__media img { transform: scale(1.03); }
.mu-news-card__title { font-size: 1.125rem; font-weight: var(--mu-fw-bold); line-height: var(--mu-lh-snug); }
.mu-news-card__excerpt { color: var(--mu-text-muted); font-size: .9375rem; line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mu-news-card .mu-more { margin-block-start: var(--mu-2); }
@media (min-width: 480px) {
  .mu-news-card { flex-direction: row; }
  .mu-news-card__media { flex: 0 0 34%; aspect-ratio: auto; min-block-size: 11rem; }
}

/* Listing grid: one column on phones, two from 768px, three from 1024px.
   --lead lets the first card span the row (see the .newsall bridge, section 9).
   An emptied list collapses, and a following .mu-empty--auto takes its place. */
.mu-news-list--grid { grid-template-columns: minmax(0, 1fr); gap: var(--mu-3); }
.mu-news-list--grid:empty { display: none; }
@media (min-width: 768px) { .mu-news-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-6); } }
@media (min-width: 1024px) { .mu-news-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Customer / logo card */
.mu-logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-3); }
.mu-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--mu-3);
  padding: var(--mu-4) var(--mu-3);
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-md);
  background: var(--mu-surface);
  text-align: center;
  min-inline-size: 0;
}
.mu-logo-card__mark { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; flex: none; }
.mu-logo-card__mark img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; }
.mu-logo-card__name { font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-medium); line-height: 1.7; color: var(--mu-text); margin: 0; }
@media (min-width: 640px) {
  .mu-logo-grid { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
  .mu-logo-card { flex-direction: row; text-align: start; padding: var(--mu-3) var(--mu-4); min-block-size: 5rem; gap: var(--mu-4); align-items: center; }
  .mu-logo-card__mark { inline-size: 3rem; block-size: 3rem; }
}

/* Documentation layout and endpoint card */
.mu-toc { display: grid; gap: 2px; padding: var(--mu-3); border: 1px solid var(--mu-border); border-radius: var(--mu-r-lg); background: var(--mu-surface); }
.mu-toc__title { padding: var(--mu-1) var(--mu-3) var(--mu-2); font-size: var(--mu-fs-xs); font-weight: var(--mu-fw-semibold); color: var(--mu-text-subtle); }
.mu-toc a { display: flex; align-items: center; justify-content: space-between; gap: var(--mu-2); min-block-size: 2.75rem; padding: var(--mu-2) var(--mu-3); border-radius: var(--mu-r-sm); font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-medium); line-height: var(--mu-lh-snug); color: var(--mu-text-2); }
.mu-toc a:hover { background: var(--mu-surface-hover); color: var(--mu-text); }
.mu-toc a[aria-current] { background: var(--mu-primary-soft); color: var(--mu-green-800); }

.mu-doc-section { display: grid; gap: var(--mu-4); }
.mu-doc-section + .mu-doc-section { margin-block-start: var(--mu-10); padding-block-start: var(--mu-10); border-block-start: 1px solid var(--mu-border); }
.mu-doc-section__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mu-3); }

.mu-endpoint { border: 1px solid var(--mu-border); border-radius: var(--mu-r-lg); background: var(--mu-surface); overflow: hidden; }
.mu-endpoint__row { display: grid; gap: var(--mu-2); padding: var(--mu-4) var(--mu-5); }
.mu-endpoint__row + .mu-endpoint__row { border-block-start: 1px solid var(--mu-border); }
.mu-endpoint__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mu-2); font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-semibold); color: var(--mu-text); line-height: var(--mu-lh-snug); }
.mu-endpoint__label a { color: inherit; }
.mu-endpoint__label a:hover { color: var(--mu-link); text-decoration: underline; }
/* The URL itself: monospace, LTR, scrolls inside its own box if too long. */
.mu-url {
  display: flex;
  align-items: center;
  gap: var(--mu-2);
  min-block-size: var(--mu-control-h);
  padding: var(--mu-1) var(--mu-1) var(--mu-1) var(--mu-4);
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-md);
  background: var(--mu-surface-sunken);
  direction: ltr;
  min-inline-size: 0;
}
.mu-url__value { flex: 1; min-inline-size: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mu-font-mono); font-size: var(--mu-fs-code); line-height: 2.2; color: var(--mu-n-800); scrollbar-width: none; unicode-bidi: isolate; text-align: left; }
.mu-url__value::-webkit-scrollbar { display: none; }
.mu-url .mu-btn { flex: none; }
.mu-link-list { display: flex; flex-wrap: wrap; gap: var(--mu-2); }

/* Code block */
.mu-code { border-radius: var(--mu-r-lg); background: var(--mu-ink); color: var(--mu-code-text); overflow: hidden; direction: ltr; }
.mu-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--mu-3); padding: var(--mu-2) var(--mu-4); border-block-end: 1px solid var(--mu-ink-border); font-family: var(--mu-font-mono); font-size: var(--mu-fs-xs); color: var(--mu-text-on-ink-muted); }
.mu-code__body { padding: var(--mu-4) var(--mu-5); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--mu-n-600) transparent; }
.mu-code pre { color: inherit; tab-size: 2; }
.mu-code :focus-visible { outline-color: var(--mu-focus-on-ink); }
.mu-code .tok-k { color: var(--mu-code-keyword); }
.mu-code .tok-s { color: var(--mu-code-string); }
.mu-code .tok-c { color: var(--mu-code-comment); font-style: normal; }

/* Contact block */
.mu-contact { display: grid; gap: 0; border: 1px solid var(--mu-border); border-radius: var(--mu-r-lg); background: var(--mu-surface); overflow: hidden; }
.mu-contact__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--mu-1) var(--mu-4); align-items: start; padding: var(--mu-4) var(--mu-5); color: inherit !important; }
.mu-contact__item + .mu-contact__item { border-block-start: 1px solid var(--mu-border); }
a.mu-contact__item:hover { background: var(--mu-surface-sunken); }
.mu-contact__icon { grid-row: span 2; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--mu-r-md); background: var(--mu-primary-soft); color: var(--mu-green-700); }
.mu-contact__label { font-size: var(--mu-fs-xs); font-weight: var(--mu-fw-medium); color: var(--mu-text-subtle); line-height: var(--mu-lh-ui); }
.mu-contact__value .mu-ltr { font-size: clamp(.8125rem, 3.9vw, 1rem); }
.mu-contact__value { font-weight: var(--mu-fw-semibold); line-height: 1.8; color: var(--mu-text); min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 479.98px) {
  .mu-contact__item { gap: var(--mu-1) var(--mu-3); padding: var(--mu-4); }
  .mu-contact__icon { inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--mu-r-sm); }
  .mu-card--pad, .mu-summary { padding: var(--mu-4); }
}
.mu-map { aspect-ratio: 16 / 10; inline-size: 100%; border: 1px solid var(--mu-border); border-radius: var(--mu-r-lg); background: var(--mu-surface-sunken); overflow: hidden; }
.mu-map > * { inline-size: 100% !important; block-size: 100% !important; }

/* Badges */
.mu-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-block-size: 1.625rem;
  padding: .125rem .625rem;
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-pill);
  background: var(--mu-surface-sunken);
  font-size: var(--mu-fs-xs);
  font-weight: var(--mu-fw-semibold);
  line-height: 1.4;
  color: var(--mu-text-2);
  white-space: nowrap;
}
.mu-badge--brand { border-color: var(--mu-primary-soft-border); background: var(--mu-primary-soft); color: var(--mu-green-800); }
.mu-badge--success { border-color: var(--mu-success-border); background: var(--mu-success-bg); color: var(--mu-success); }
.mu-badge--warning { border-color: var(--mu-warning-border); background: var(--mu-warning-bg); color: var(--mu-warning); }
.mu-badge--danger { border-color: var(--mu-danger-border); background: var(--mu-danger-bg); color: var(--mu-danger); }
.mu-badge--info { border-color: var(--mu-info-border); background: var(--mu-info-bg); color: var(--mu-info); }
.mu-badge--ink { border-color: var(--mu-ink); background: var(--mu-ink); color: var(--mu-text-on-ink); }
.mu-badge--mono { font-family: var(--mu-font-mono); letter-spacing: .02em; direction: ltr; }
.mu-badge__dot { inline-size: .4375rem; block-size: .4375rem; border-radius: 50%; background: currentColor; }

/* Table and GridView presentation. Wrap in .mu-table-wrap: the only place
   where horizontal scrolling is acceptable. */
.mu-table-wrap { overflow-x: auto; border: 1px solid var(--mu-border); border-radius: var(--mu-r-lg); background: var(--mu-surface); scrollbar-width: thin; }
.mu-table-wrap > .mu-table { min-inline-size: 34rem; }
.mu-table code { white-space: nowrap; }
.mu-table { inline-size: 100%; border: 0 !important; border-collapse: collapse; font-size: var(--mu-fs-sm); line-height: 1.7; background: transparent; }
.mu-table :is(th, td) { padding: var(--mu-3) var(--mu-4); border: 0 !important; border-block-end: 1px solid var(--mu-border) !important; text-align: start; vertical-align: middle; }
.mu-table th { background: var(--mu-surface-sunken); font-size: var(--mu-fs-xs); font-weight: var(--mu-fw-semibold); color: var(--mu-text-muted); white-space: nowrap; }
.mu-table td > a:only-child { display: inline-block; padding-block: var(--mu-2); font-weight: var(--mu-fw-semibold); }
.mu-table tr:last-child > td { border-block-end: 0 !important; }
.mu-table tbody tr:hover > td { background: var(--mu-n-25); }
.mu-table tr.is-selected > td { background: var(--mu-primary-soft); }
.mu-table td.mu-table__num, .mu-table th.mu-table__num { text-align: end; font-variant-numeric: tabular-nums; }
/* GridView pager row: <tr class="mu-table__pager"><td colspan><table><tr><td>… */
.mu-table__pager > td { padding: var(--mu-3) var(--mu-4); background: var(--mu-surface-sunken); }
.mu-table__pager table { margin-inline: auto; }
.mu-table__pager table td { padding: 0 2px !important; border: 0 !important; }
.mu-table__pager :is(a, span) { display: inline-grid; place-items: center; min-inline-size: 2.5rem; block-size: 2.5rem; padding-inline: var(--mu-2); border-radius: var(--mu-r-sm); font-weight: var(--mu-fw-semibold); color: var(--mu-text-2); }
.mu-table__pager a:hover { background: var(--mu-n-200); }
.mu-table__pager span { background: var(--mu-ink); color: #fff; }

/* Empty and loading states */
.mu-empty { display: grid; justify-items: center; gap: var(--mu-3); padding: var(--mu-12) var(--mu-6); border: 1px dashed var(--mu-border-strong); border-radius: var(--mu-r-lg); background: var(--mu-surface); text-align: center; }
.mu-empty__icon { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--mu-surface-sunken); color: var(--mu-n-500); font-size: 1.25rem; }
.mu-empty__title { font-size: 1.125rem; font-weight: var(--mu-fw-bold); }
.mu-empty__text { max-inline-size: 28rem; color: var(--mu-text-muted); font-size: .9375rem; }
/* Shown only when the element before it has no content (a Literal that wrote
   nothing). The source must leave no whitespace inside that element. */
.mu-empty--auto { display: none; }
:empty + .mu-empty--auto { display: grid; }

.mu-skeleton { display: block; block-size: 1em; border-radius: var(--mu-r-sm); background: linear-gradient(90deg, var(--mu-n-100) 25%, var(--mu-n-50) 50%, var(--mu-n-100) 75%) 0 0 / 200% 100%; animation: mu-shimmer 1.4s linear infinite; }
.mu-skeleton--title { block-size: 1.5rem; inline-size: 60%; }
.mu-skeleton--media { block-size: 9rem; border-radius: var(--mu-r-md); }
.mu-spinner { display: inline-block; inline-size: 1.25em; block-size: 1.25em; border: 2px solid var(--mu-n-200); border-block-start-color: var(--mu-primary); border-radius: 50%; animation: mu-spin .7s linear infinite; vertical-align: -.25em; }
@keyframes mu-shimmer { to { background-position: -200% 0; } }
@keyframes mu-spin { to { transform: rotate(360deg); } }
/* 8. FORMS, FEEDBACK, OVERLAYS -------------------------------------------- */

/* Buttons. Works on <a>, <button> and <input type=submit|button>
   (asp:Button renders an <input>, so there is no icon-only dependency). */
:is(.mu-btn, :where(.mu) .btn) {
  --_bg: var(--mu-surface);
  --_fg: var(--mu-text);
  --_bd: var(--mu-border-strong);
  --_bg-h: var(--mu-surface-hover);
  --_bd-h: var(--mu-n-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mu-2);
  min-block-size: var(--mu-control-h);
  padding: .5rem 1.25rem;
  border: 1px solid var(--_bd);
  border-radius: var(--mu-r-md);
  background: var(--_bg);
  color: var(--_fg) !important;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: var(--mu-fw-semibold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--mu-dur-1) var(--mu-ease), border-color var(--mu-dur-1) var(--mu-ease), color var(--mu-dur-1) var(--mu-ease), transform var(--mu-dur-1) var(--mu-ease), box-shadow var(--mu-dur-1) var(--mu-ease);
}
:is(.mu-btn, :where(.mu) .btn):hover { background: var(--_bg-h); border-color: var(--_bd-h); }
:is(.mu-btn, :where(.mu) .btn):focus { background: var(--_bg); border-color: var(--_bd); }
:is(.mu-btn, :where(.mu) .btn):active { transform: translateY(1px); }
/* Bootstrap's pressed-state colours are more specific; match them. */
.mu .btn:active, .mu .btn.active, .mu .btn:active:hover, .mu .btn:active:focus { background: var(--_bg-h); border-color: var(--_bd-h); box-shadow: none; }
:is(.mu-btn, :where(.mu) .btn)[disabled], :is(.mu-btn, :where(.mu) .btn).is-disabled, :is(.mu-btn, :where(.mu) .btn)[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
:is(.mu-btn, :where(.mu) .btn) .mu-icon { inline-size: 1.125rem; block-size: 1.125rem; }

:is(.mu-btn--primary, :where(.mu) .btn-primary, :where(.mu) .btn-success) { --_bg: var(--mu-primary); --_fg: var(--mu-text-on-primary); --_bd: var(--mu-primary); --_bg-h: var(--mu-primary-hover); --_bd-h: var(--mu-primary-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, var(--mu-shadow-1); }
.mu-btn--ink { --_bg: var(--mu-ink); --_fg: #fff; --_bd: var(--mu-ink); --_bg-h: var(--mu-n-800); --_bd-h: var(--mu-n-800); }
:is(.mu-btn--ghost, :where(.mu) .btn-link) { --_bg: transparent; --_bd: transparent; --_bd-h: transparent; }
.mu-btn--soft { --_bg: var(--mu-primary-soft); --_fg: var(--mu-green-800); --_bd: var(--mu-primary-soft-border); --_bg-h: var(--mu-green-100); --_bd-h: var(--mu-green-300); }
:is(.mu-btn--danger, :where(.mu) .btn-danger) { --_bg: var(--mu-danger); --_fg: #fff; --_bd: var(--mu-danger); --_bg-h: var(--mu-danger-hover); --_bd-h: var(--mu-danger-hover); }
.mu-btn--danger-outline { --_fg: var(--mu-danger); --_bd: var(--mu-danger-border); --_bg-h: var(--mu-danger-bg); --_bd-h: var(--mu-danger); }
.mu-btn--on-ink { --_bg: var(--mu-green-500); --_fg: var(--mu-n-950); --_bd: var(--mu-green-500); --_bg-h: var(--mu-green-400); --_bd-h: var(--mu-green-400); }
:is(.mu-btn--sm, :where(.mu) .btn-sm) { min-block-size: var(--mu-control-h-sm); padding: .25rem .875rem; font-size: var(--mu-fs-sm); border-radius: var(--mu-r-sm); }
:is(.mu-btn--lg, :where(.mu) .btn-lg) { min-block-size: 3.25rem; padding: .75rem 1.625rem; font-size: 1rem; }
:is(.mu-btn--block, :where(.mu) .btn-block) { display: flex; inline-size: 100%; }
.mu-btn--icon { inline-size: var(--mu-control-h); padding: 0; }
.mu-btn--icon:is(.mu-btn--sm, :where(.mu) .btn-sm) { inline-size: var(--mu-control-h-sm); }
:is(.mu-btn, :where(.mu) .btn).is-loading { color: transparent !important; position: relative; pointer-events: none; }
:is(.mu-btn, :where(.mu) .btn).is-loading::after { content: ""; position: absolute; inline-size: 1.125rem; block-size: 1.125rem; border: 2px solid rgba(255, 255, 255, .45); border-block-start-color: #fff; border-radius: 50%; animation: mu-spin .7s linear infinite; }

/* Fields */
.mu-field { display: grid; gap: var(--mu-2); align-content: start; min-inline-size: 0; }
.mu-label { display: flex; align-items: baseline; gap: var(--mu-2); font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-semibold); line-height: var(--mu-lh-ui); color: var(--mu-text); }
.mu-label__opt { font-size: var(--mu-fs-xs); font-weight: var(--mu-fw-regular); color: var(--mu-text-subtle); }
.mu-hint { font-size: var(--mu-fs-xs); line-height: 1.7; color: var(--mu-text-muted); }

:is(.mu-input, :where(.mu) .form-control),
:is(.mu-textarea, :where(.mu) textarea.form-control),
:is(.mu-select, :where(.mu) select.form-control) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: var(--mu-control-h);
  padding: .5rem .875rem;
  border: 1px solid var(--mu-border-control);
  border-radius: var(--mu-r-md);
  background-color: var(--mu-surface);
  color: var(--mu-text);
  font-size: 1rem;                  /* 16px: stops iOS zooming on focus */
  line-height: 1.6;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--mu-dur-1) var(--mu-ease), box-shadow var(--mu-dur-1) var(--mu-ease), background-color var(--mu-dur-1) var(--mu-ease);
}
:is(.mu-input, :where(.mu) .form-control)::placeholder, :is(.mu-textarea, :where(.mu) textarea.form-control)::placeholder { color: var(--mu-n-500); opacity: 1; }
:is(.mu-input, :where(.mu) .form-control):hover, :is(.mu-textarea, :where(.mu) textarea.form-control):hover, :is(.mu-select, :where(.mu) select.form-control):hover { border-color: var(--mu-n-500); }
:is(.mu-input, :where(.mu) .form-control):focus, :is(.mu-textarea, :where(.mu) textarea.form-control):focus, :is(.mu-select, :where(.mu) select.form-control):focus,
:is(.mu-input, :where(.mu) .form-control):focus-visible, :is(.mu-textarea, :where(.mu) textarea.form-control):focus-visible, :is(.mu-select, :where(.mu) select.form-control):focus-visible {
  outline: none;
  border-color: var(--mu-focus);
  border-radius: var(--mu-r-md);
  box-shadow: 0 0 0 3px var(--mu-focus-halo), 0 0 0 1px var(--mu-focus) inset;
}
:is(.mu-input, :where(.mu) .form-control)[disabled], :is(.mu-textarea, :where(.mu) textarea.form-control)[disabled], :is(.mu-select, :where(.mu) select.form-control)[disabled],
:is(.mu-input, :where(.mu) .form-control)[readonly] { background-color: var(--mu-surface-sunken); color: var(--mu-text-muted); cursor: not-allowed; }
:is(.mu-textarea, :where(.mu) textarea.form-control) { min-block-size: 8rem; padding-block: .75rem; line-height: 1.9; resize: vertical; }
:is(.mu-select, :where(.mu) select.form-control) {
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555c50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.125rem;
  background-position: left .75rem center;
  cursor: pointer;
}
[dir="ltr"] :is(.mu-select, :where(.mu) select.form-control) { background-position: right .75rem center; }
/* Latin-only values (mobile number, e-mail, username) typed left-to-right but
   kept on the reading-start edge; the Persian placeholder stays RTL. */
.mu-input--ltr { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.mu-input--ltr::placeholder { direction: rtl; text-align: right; }
[dir="ltr"] .mu-input--ltr, [dir="ltr"] .mu-input--ltr::placeholder { text-align: left; direction: ltr; }

/* Validation. State is carried by icon + text + border, never colour alone. */
.mu-field.is-invalid :is(:is(.mu-input, :where(.mu) .form-control), :is(.mu-textarea, :where(.mu) textarea.form-control), :is(.mu-select, :where(.mu) select.form-control)),
:is(:is(.mu-input, :where(.mu) .form-control), :is(.mu-textarea, :where(.mu) textarea.form-control), :is(.mu-select, :where(.mu) select.form-control)).is-invalid,
:is(:is(.mu-input, :where(.mu) .form-control), :is(.mu-textarea, :where(.mu) textarea.form-control), :is(.mu-select, :where(.mu) select.form-control))[aria-invalid="true"] { border-color: var(--mu-danger); box-shadow: 0 0 0 1px var(--mu-danger) inset; }
.mu-field.is-valid :is(:is(.mu-input, :where(.mu) .form-control), :is(.mu-textarea, :where(.mu) textarea.form-control), :is(.mu-select, :where(.mu) select.form-control)) { border-color: var(--mu-success); }
.mu-field__msg { display: flex; align-items: flex-start; gap: var(--mu-2); font-size: var(--mu-fs-xs); font-weight: var(--mu-fw-medium); line-height: 1.7; }
.mu-field__msg .mu-icon { inline-size: 1rem; block-size: 1rem; margin-block-start: .2em; }
.mu-field__msg--error { color: var(--mu-danger); }
.mu-field__msg--success { color: var(--mu-success); }

/* Checkbox and radio */
.mu-check { display: inline-flex; align-items: flex-start; gap: var(--mu-3); min-block-size: 2.75rem; padding-block: .5rem; cursor: pointer; font-size: .9375rem; line-height: 1.7; }
.mu-check input {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: .2em 0 0;
  border: 1.5px solid var(--mu-border-control);
  border-radius: .3125rem;
  background: var(--mu-surface) center / 0 no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--mu-dur-1) var(--mu-ease), border-color var(--mu-dur-1) var(--mu-ease);
}
.mu-check input[type="radio"] { border-radius: 50%; }
.mu-check input:hover { border-color: var(--mu-n-600); }
.mu-check input:checked { border-color: var(--mu-primary); background-color: var(--mu-primary); background-size: .875rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.mu-check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 0 34%, transparent 38%); background-size: 100%; }
.mu-check input:focus-visible { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: var(--mu-focus-offset); }

/* Segmented choice. Also styles the <table> that asp:RadioButtonList renders:
   table.mu-segmented > tbody > tr > td > input + label */
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) { display: inline-flex; flex-wrap: wrap; gap: var(--mu-1); padding: var(--mu-1); border: 1px solid var(--mu-border); border-radius: var(--mu-r-md); background: var(--mu-surface-sunken); inline-size: fit-content; max-inline-size: 100%; justify-self: start; }
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) :is(tbody, tr) { display: contents; }
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) td { display: block; padding: 0; border: 0; }
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mu-2);
  flex: 1 1 auto;
  min-block-size: 2.5rem;
  min-inline-size: 4rem;
  margin: 0;
  padding: .25rem .875rem;
  border-radius: var(--mu-r-sm);
  font-size: var(--mu-fs-sm);
  font-weight: var(--mu-fw-medium);
  white-space: nowrap;
  line-height: 1.5;
  color: var(--mu-text-muted);
  cursor: pointer;
  transition: background-color var(--mu-dur-1) var(--mu-ease), color var(--mu-dur-1) var(--mu-ease), box-shadow var(--mu-dur-1) var(--mu-ease);
}
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) label:hover { color: var(--mu-text); }
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) input:checked + label { background: var(--mu-surface); color: var(--mu-text); font-weight: var(--mu-fw-semibold); box-shadow: var(--mu-shadow-1), 0 0 0 1px var(--mu-border); }
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) input:checked + label::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--mu-green-600); }
:is(.mu-segmented, :where(.mu) .checkboxListorder > table) input:focus-visible + label { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: 1px; }

/* Input + button joined on one line (customer club, search). */
.mu-input-group { display: flex; align-items: stretch; inline-size: 100%; padding: var(--mu-1); border: 1px solid var(--mu-border-control); border-radius: var(--mu-r-md); background: var(--mu-surface); transition: border-color var(--mu-dur-1) var(--mu-ease), box-shadow var(--mu-dur-1) var(--mu-ease); }
.mu-input-group:focus-within { border-color: var(--mu-focus); box-shadow: 0 0 0 3px var(--mu-focus-halo); }
.mu-input-group :is(.mu-input, :where(.mu) .form-control) { flex: 1; min-inline-size: 0; min-block-size: 2.625rem; border: 0; background: transparent; box-shadow: none !important; padding-inline: .75rem; }
.mu-input-group :is(.mu-btn, :where(.mu) .btn) { flex: none; min-block-size: 2.625rem; border-radius: var(--mu-r-sm); }
.mu-input-group--on-ink { border-color: var(--mu-ink-border); background: var(--mu-ink-raised); }
.mu-input-group--on-ink:focus-within { border-color: var(--mu-focus-on-ink); box-shadow: 0 0 0 3px rgba(158, 202, 53, .25); }
.mu-input-group--on-ink :is(.mu-input, :where(.mu) .form-control) { color: #fff; }
.mu-input-group--on-ink :is(.mu-input, :where(.mu) .form-control)::placeholder { color: var(--mu-text-on-ink-muted); }

.mu-form { display: grid; gap: var(--mu-5); }
.mu-form__row { display: grid; gap: var(--mu-5); }
@media (min-width: 640px) { .mu-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mu-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mu-3); padding-block-start: var(--mu-2); }
.mu-form__actions--end { justify-content: flex-end; }

/* Alerts and inline status */
.mu-alert {
  --_c: var(--mu-info);
  --_bg: var(--mu-info-bg);
  --_bd: var(--mu-info-border);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mu-1) var(--mu-3);
  padding: var(--mu-4) var(--mu-5);
  border: 1px solid var(--_bd);
  border-radius: var(--mu-r-md);
  background: var(--_bg);
  color: var(--mu-text);
  font-size: .9375rem;
  line-height: 1.8;
}
.mu-alert > .mu-icon { grid-row: span 2; margin-block-start: .25em; color: var(--_c); }
.mu-alert__title { font-weight: var(--mu-fw-bold); color: var(--_c); line-height: 1.7; }
.mu-alert__text { grid-column: 2; color: var(--mu-text-2); }
.mu-alert--success { --_c: var(--mu-success); --_bg: var(--mu-success-bg); --_bd: var(--mu-success-border); }
.mu-alert--warning { --_c: var(--mu-warning); --_bg: var(--mu-warning-bg); --_bd: var(--mu-warning-border); }
.mu-alert--danger { --_c: var(--mu-danger); --_bg: var(--mu-danger-bg); --_bd: var(--mu-danger-border); }

.mu-status { display: inline-flex; align-items: flex-start; gap: var(--mu-2); font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-medium); line-height: 1.7; }
.mu-status:empty { display: none; }
.mu-status--success { color: var(--mu-success); }
.mu-status--error { color: var(--mu-danger); }
.mu-status--pending { color: var(--mu-text-muted); }

/* Pagination */
.mu-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mu-1); margin: var(--mu-8) 0 0; padding: 0; list-style: none; }
.mu-pagination :is(a, span) {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.75rem;
  block-size: 2.75rem;
  padding-inline: var(--mu-3);
  border: 1px solid transparent;
  border-radius: var(--mu-r-md);
  font-size: .9375rem;
  font-weight: var(--mu-fw-semibold);
  line-height: 1;
  color: var(--mu-text-2);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--mu-dur-1) var(--mu-ease), border-color var(--mu-dur-1) var(--mu-ease);
}
.mu-pagination a:hover { background: var(--mu-surface-hover); color: var(--mu-text); }
.mu-pagination .is-current :is(a, span), .mu-pagination [aria-current="page"] { background: var(--mu-ink); color: #fff; }
.mu-pagination .is-disabled :is(a, span) { color: var(--mu-n-400); pointer-events: none; }
.mu-pagination .is-edge :is(a, span) { border-color: var(--mu-border); background: var(--mu-surface); padding-inline: var(--mu-4); }
@media (max-width: 479.98px) {
  .mu-pagination { gap: 2px; }
  .mu-pagination :is(a, span) { min-inline-size: 2.5rem; block-size: 2.5rem; padding-inline: var(--mu-2); }
  .mu-pagination .is-edge :is(a, span) { padding-inline: var(--mu-3); }
}
/* 9. BOOTSTRAP 3 + LEGACY HOOK BRIDGE --------------------------------------
   Bootstrap 3 stays loaded for behaviour. These rules make its components,
   and the class names the code-behind writes into HTML strings, render in the
   new design without touching Bootstrap or any .cs file.
   (Buttons, inputs and the RadioButtonList table are bridged in section 8
   through shared selectors.)                                                */

/* Bootstrap grid columns are physical floats; inside redesigned regions the
   parent decides the layout instead. */
.mu .mu-reset-cols > [class*="col-"] { float: none; inline-size: auto; padding: 0; min-block-size: 0; position: static; }
.mu .mu-reset-cols::before, .mu .mu-reset-cols::after { display: none; }
.mu .text-justify { text-align: start; }

/* Forms */
.mu .form-group { margin: 0 0 var(--mu-4); }
.mu .form-group:last-child { margin-block-end: 0; }
.mu .help-block { margin: 0; font-size: var(--mu-fs-sm); line-height: 1.7; color: var(--mu-text-muted); }
.mu .help-block:empty { display: none; }
.mu .help-block.text-warning,
.mu .has-error .help-block { color: var(--mu-danger); font-weight: var(--mu-fw-medium); }
.mu .help-block.text-warning::before { content: "!"; display: inline-grid; place-items: center; inline-size: 1.125rem; block-size: 1.125rem; margin-inline-end: var(--mu-2); border-radius: 50%; background: var(--mu-danger); color: #fff; font-size: .75rem; font-weight: var(--mu-fw-bold); line-height: 1; vertical-align: .05em; }
.mu .has-error .form-control { border-color: var(--mu-danger); box-shadow: 0 0 0 1px var(--mu-danger) inset; }

/* Modal: centred dialog from 768px, bottom sheet below. */
.mu .modal { z-index: var(--mu-z-modal); padding: 0 !important; text-align: start; }
.mu .modal-backdrop { z-index: var(--mu-z-backdrop); background: var(--mu-n-950); }
.mu .modal-backdrop.in { opacity: .55; }
.mu .modal-dialog { position: fixed; inset-inline: 0; inset-block-end: 0; inline-size: auto; max-inline-size: none; margin: 0; }
.mu .modal.fade .modal-dialog { transform: translateY(100%); transition: transform var(--mu-dur-3) var(--mu-ease); }
.mu .modal.in .modal-dialog { transform: none; }
.mu .modal-content {
  display: flex;
  flex-direction: column;
  max-block-size: 92vh;
  max-block-size: 92dvh;
  border: 0;
  border-radius: var(--mu-r-xl) var(--mu-r-xl) 0 0;
  background: var(--mu-surface);
  box-shadow: var(--mu-shadow-4);
  overflow: hidden;
}
.mu .modal-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--mu-4);
  padding: var(--mu-4) var(--mu-5);
  border-block-end: 1px solid var(--mu-border);
  background: var(--mu-surface);
}
.mu .modal-header::before, .mu .modal-header::after,
.mu .modal-footer::before, .mu .modal-footer::after { display: none; }
.mu .modal-header :is(h3, h4, .modal-title) { margin: 0; font-size: 1.1875rem; font-weight: var(--mu-fw-bold); line-height: var(--mu-lh-snug); color: var(--mu-text); }
.mu .modal-header .close {
  float: none;
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: 0 calc(var(--mu-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--mu-r-pill);
  background: none;
  color: var(--mu-text-muted);
  font-family: var(--mu-font-mono);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
  opacity: 1;
  cursor: pointer;
}
.mu .modal-header .close:hover { background: var(--mu-surface-hover); color: var(--mu-text); }
.mu .modal-body { padding: var(--mu-5); overflow-y: auto; overscroll-behavior: contain; }
.mu .modal-footer { padding: var(--mu-4) var(--mu-5); border-block-start: 1px solid var(--mu-border); background: var(--mu-surface-sunken); text-align: start; }
.mu .modal-footer .input-group,
.mu .mu-actions { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: var(--mu-3); inline-size: 100%; }
.mu .modal-footer .btn + .btn { margin: 0; }
/* The legacy dismiss button is btn-danger; in a dialog it reads as a quiet secondary action. */
.mu .modal-footer .btn-danger { --_bg: var(--mu-surface); --_fg: var(--mu-text); --_bd: var(--mu-border-strong); --_bg-h: var(--mu-surface-hover); --_bd-h: var(--mu-n-400); box-shadow: none; }
.mu .modal-footer .btn { flex: 1 1 8rem; }
/* "واحد :" label + RadioButtonList inside the support modal */
.mu .modal-body .form-group.container-fluid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mu-2) var(--mu-4); padding: 0; }
.mu .modal-body .form-group.container-fluid::before, .mu .modal-body .form-group.container-fluid::after { display: none; }
.mu .modal-body .form-group.container-fluid > span { float: none !important; font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-semibold); }
.mu .checkboxListorder { display: block; inline-size: auto; }
@media (min-width: 768px) {
  .mu .modal { overflow-y: auto; }
  .mu .modal-dialog { position: relative; inset: auto; inline-size: min(34rem, calc(100% - 3rem)); margin: 3rem auto; }
  .mu .modal.fade .modal-dialog { transform: translateY(1rem) scale(.98); }
  .mu .modal.in .modal-dialog { transform: none; }
  .mu .modal-content { max-block-size: none; border-radius: var(--mu-r-xl); }
  .mu .modal-body { overflow: visible; padding: var(--mu-6); }
  .mu .modal-header, .mu .modal-footer { padding-inline: var(--mu-6); }
  .mu .modal-footer .btn { flex: 0 1 auto; min-inline-size: 7.5rem; }
}

/* Pagination as written by allnews.aspx.cs:
   ul.pagination > li.page-item[.active|.disabled] > a.page-link
   First item = previous, last item = next. Order follows the document
   direction, so in RTL "previous" sits at the right-hand end. */
.mu .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--mu-1); margin: var(--mu-10) 0 0; padding: 0; border-radius: 0; }
.mu .pagination:empty { display: none; }
.mu .pagination > li { display: block; }
.mu .pagination > li > :is(a, span) {
  position: static;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mu-2);
  min-inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: 0;
  padding: 0 var(--mu-3);
  border: 1px solid transparent;
  border-radius: var(--mu-r-md) !important;
  background: none;
  font-size: .9375rem;
  font-weight: var(--mu-fw-semibold);
  line-height: 1;
  color: var(--mu-text-2);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--mu-dur-1) var(--mu-ease), border-color var(--mu-dur-1) var(--mu-ease), color var(--mu-dur-1) var(--mu-ease);
}
.mu .pagination > li > a:hover { background: var(--mu-surface-hover); border-color: transparent; color: var(--mu-text); }
.mu .pagination > li > a:focus { background: none; border-color: transparent; color: var(--mu-text-2); }
.mu .pagination > .active > :is(a, span),
.mu .pagination > .active > :is(a, span):hover,
.mu .pagination > .active > :is(a, span):focus { background: var(--mu-ink); border-color: var(--mu-ink); color: #fff; cursor: default; }
/* Previous / next: bordered buttons with a direction-aware chevron. */
.mu .pagination > li:is(:first-child, :last-child) > a,
.mu .pagination > li:is(:first-child, :last-child) > a:focus { padding-inline: var(--mu-4); border-color: var(--mu-border-strong); background: var(--mu-surface); color: var(--mu-text); }
.mu .pagination > li:is(:first-child, :last-child) > a:hover { border-color: var(--mu-n-400); background: var(--mu-surface-hover); }
.mu .pagination > li:first-child > a::before,
.mu .pagination > li:last-child > a::after { content: ""; flex: none; inline-size: .4375rem; block-size: .4375rem; border: solid currentColor; border-width: 0; transform: rotate(45deg); }
.mu .pagination > li:first-child > a::before { border-block-start-width: 1.75px; border-inline-start-width: 1.75px; }
.mu .pagination > li:last-child > a::after { border-block-end-width: 1.75px; border-inline-end-width: 1.75px; }
[dir="ltr"] .mu .pagination > li:first-child > a::before,
[dir="ltr"] .mu .pagination > li:last-child > a::after { transform: rotate(-45deg); }
.mu .pagination > .disabled > :is(a, span),
.mu .pagination > .disabled > :is(a, span):focus,
.mu .pagination > li.disabled:is(:first-child, :last-child) > a { border-color: var(--mu-border); background: var(--mu-surface-sunken); color: var(--mu-n-500); cursor: not-allowed; pointer-events: none; }
/* Phones: page numbers on one line, previous / next as two full-width
   buttons underneath (the ::before is the line break). */
@media (max-width: 479.98px) {
  .mu .pagination::before { content: ""; order: 1; flex: 0 0 100%; block-size: var(--mu-2); }
  .mu .pagination > li:is(:first-child, :last-child) { order: 2; flex: 1 1 0; }
  .mu .pagination > li:is(:first-child, :last-child) > a { inline-size: 100%; block-size: 3rem; }
}

/* Carousel (home banners, news images) */
.mu .carousel-inner > .item > img,
.mu .carousel-inner > .item > a > img { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; }
.mu .carousel-indicators { inset: auto 0 var(--mu-3) 0; display: flex; justify-content: center; align-items: center; gap: var(--mu-2); inline-size: auto; margin: 0; padding: 0; }
.mu .carousel-indicators li,
.mu .carousel-indicators li.active { position: relative; flex: none; inline-size: .5rem; block-size: .5rem; margin: 0; border: 0; border-radius: var(--mu-r-pill); background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(17, 23, 15, .35); transition: inline-size var(--mu-dur-2) var(--mu-ease), background-color var(--mu-dur-2) var(--mu-ease); }
.mu .carousel-indicators li::after { content: ""; position: absolute; inset: -.75rem -.25rem; }   /* larger hit area */
.mu .carousel-indicators li.active { inline-size: 1.5rem; background: #fff; }
.mu .carousel-control {
  inset-block: 50% auto;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-start: -1.375rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: var(--mu-shadow-2);
  color: var(--mu-text);
  font-size: 1rem;
  text-shadow: none;
  opacity: 0;
  filter: none;
  transition: opacity var(--mu-dur-2) var(--mu-ease);
}
.mu .carousel-control.left { left: var(--mu-4); }
.mu .carousel-control.right { right: var(--mu-4); left: auto; }
.mu .carousel:hover .carousel-control, .mu .carousel-control:focus-visible { opacity: 1; }
.mu .carousel-control > :is(.glyphicon, .fa, .mu-icon) { position: static; margin: 0; inline-size: 1.25rem; block-size: 1.25rem; font-size: 1rem; }
@media (max-width: 767.98px) { .mu .carousel-control { display: none; } }

/* Generic Bootstrap dropdown menu (not the mega menu) */
.mu .dropdown-menu:not(.mu-mega) { inset-inline: 0 auto; float: none; min-inline-size: 12rem; margin-block-start: var(--mu-1); padding: var(--mu-2); border: 1px solid var(--mu-border); border-radius: var(--mu-r-md); box-shadow: var(--mu-shadow-3); font-size: var(--mu-fs-sm); text-align: start; }
.mu .dropdown-menu:not(.mu-mega) > li > a { padding: var(--mu-2) var(--mu-3); border-radius: var(--mu-r-sm); color: var(--mu-text); line-height: 1.7; }
.mu .dropdown-menu:not(.mu-mega) > li > a:hover { background: var(--mu-surface-hover); color: var(--mu-text); }

/* ---- Class names written by code-behind strings --------------------------- */

/* News list item (allnews.aspx.cs):
   article.container-fluid.newsall
     > div.col-*-9   ( a > h2 , p.mu-meta , p , a.btn[aria-label] )
     > div.col-*-3.divNews ( a[tabindex=-1] > img )
   The text column is flattened (display: contents) so the card itself can
   place image, date, title, excerpt and action on one grid. Three layouts:
     tile     image on top — default from 768px, and the lead card on phones
     compact  thumbnail beside date + title, excerpt full width — below 768px
     lead     image beside text across the whole row — first card, from 768px
   Nothing is clamped or cut: the excerpt always shows in full.
   --mu-news-fit: `contain` keeps square artwork and logos whole (the stock
   /image/news.jpg is a square tile). Set it to `cover` on .mu-news-list once
   every news image is a photograph. */
.mu .newsall {
  --_pad: var(--mu-5);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas: "media" "meta" "title" "body" "more";
  inline-size: auto;
  min-inline-size: 0;
  margin: 0;
  padding: 0 0 var(--_pad);
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-lg);
  background: var(--mu-surface);
  box-shadow: none;
  overflow: hidden;
  transition: border-color var(--mu-dur-2) var(--mu-ease), box-shadow var(--mu-dur-2) var(--mu-ease), transform var(--mu-dur-2) var(--mu-ease);
}
.mu .newsall::before, .mu .newsall::after { display: none; }
.mu .newsall:hover { border-color: var(--mu-border-strong); box-shadow: var(--mu-shadow-2); transform: translateY(-2px); }
.mu .newsall > [class*="col-"] { float: none; inline-size: auto; min-block-size: 0; padding: 0; position: static; }
.mu .newsall > [class*="col-"]:not(.divNews) { display: contents; }
.mu .newsall > [class*="col-"]:not(.divNews) > * { min-inline-size: 0; margin-inline: var(--_pad); }

/* Image well */
.mu .newsall .divNews {
  grid-area: media;
  display: grid;
  block-size: auto;
  aspect-ratio: 16 / 9;
  margin-block-end: var(--mu-4);
  border-block-end: 1px solid var(--mu-border);
  background-color: var(--mu-surface-sunken);
  background-image: radial-gradient(circle at 1px 1px, var(--mu-n-200) 1px, transparent 0);
  background-size: 16px 16px;
  overflow: hidden;
}
.mu .newsall .divNews > a { display: grid; place-items: center; min-block-size: 0; padding: var(--mu-news-pad, var(--mu-4)); }
.mu .newsall .divNews img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  min-block-size: 0;
  object-fit: var(--mu-news-fit, contain);
  border-radius: var(--mu-r-sm);
  /* alt text of an image that failed to load */
  overflow: hidden;
  font-size: var(--mu-fs-xs);
  line-height: var(--mu-lh-ui);
  color: var(--mu-text-subtle);
  text-align: center;
  transition: transform var(--mu-dur-3) var(--mu-ease);
}
.mu .newsall:hover .divNews img { transform: scale(1.03); }

/* Date line */
.mu .newsall .mu-meta { grid-area: meta; justify-self: start; margin-block: 0 var(--mu-1); color: var(--mu-text-muted); }
.mu .newsall .mu-meta::before { content: ""; flex: none; inline-size: .375rem; block-size: .375rem; border-radius: 50%; background: var(--mu-green-500); }

/* Title link */
.mu .newsall > [class*="col-"] > a:not(.btn) { grid-area: title; display: block; border-radius: var(--mu-r-xs); color: var(--mu-text); }
.mu .newsall :is(h2, h3, h4) { margin: 0; font-size: 1.125rem; font-weight: var(--mu-fw-bold); line-height: var(--mu-lh-snug); color: inherit; text-wrap: balance; transition: color var(--mu-dur-1) var(--mu-ease); }
.mu .newsall:hover :is(h2, h3, h4) { color: var(--mu-link-hover); }

/* Excerpt */
.mu .newsall p:not(.mu-meta) { grid-area: body; margin-block: var(--mu-2) 0; color: var(--mu-text-muted); font-size: .9375rem; line-height: 1.9; }
.mu .newsall p:not(.mu-meta):empty { display: none; }

/* Action. Its ::before stretches over the card, so the whole card is one target. */
.mu .newsall .btn {
  grid-area: more;
  justify-self: start;
  align-self: end;
  float: none !important;
  min-block-size: 2.75rem;
  margin-block: var(--mu-3) calc(var(--mu-3) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--mu-r-xs);
  background: none;
  box-shadow: none;
  color: var(--mu-link) !important;
  font-size: var(--mu-fs-sm);
  white-space: normal;
}
.mu .newsall:hover .btn { color: var(--mu-link-hover) !important; }
.mu .newsall .btn::before { content: ""; position: absolute; inset: 0; }
.mu .newsall .btn::after { content: ""; flex: none; inline-size: .4375rem; block-size: .4375rem; border: solid currentColor; border-width: 0 0 1.75px 1.75px; transform: rotate(45deg); transition: translate var(--mu-dur-2) var(--mu-ease); }
[dir="ltr"] .mu .newsall .btn::after { border-width: 0 1.75px 1.75px 0; transform: rotate(-45deg); }
.mu .newsall:hover .btn::after { translate: -4px 0; }
[dir="ltr"] .mu .newsall:hover .btn::after { translate: 4px 0; }

/* compact: phones */
@media (max-width: 767.98px) {
  .mu .newsall {
    --_pad: var(--mu-4);
    grid-template-columns: clamp(4.25rem, 22vw, 5.5rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "media meta" "media title" "body body" "more more";
    column-gap: var(--mu-3);
    padding: var(--_pad) var(--_pad) var(--mu-1);
  }
  .mu .newsall > [class*="col-"]:not(.divNews) > * { margin-inline: 0; }
  .mu .newsall .divNews { align-self: start; aspect-ratio: 1; margin: 0; border: 1px solid var(--mu-border); border-radius: var(--mu-r-md); }
  .mu .newsall .divNews > a { padding: 0; }
  .mu .newsall .divNews img { border-radius: 0; }
  .mu .newsall :is(h2, h3, h4) { font-size: 1.0625rem; }
  .mu .newsall p:not(.mu-meta) { margin-block-start: var(--mu-3); }
  .mu .newsall .btn { margin-block: var(--mu-1) 0; }
  .mu .newsall:hover { transform: none; }
}

/* lead: the first card of a `.mu-news-list--lead` list, on the first page only.
   "First page" is read from the pager (its previous item is disabled), so no
   server-side flag is needed. Browsers without :has() show a uniform grid. */
@media (max-width: 767.98px) {
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child {
    --_pad: var(--mu-4);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "media" "meta" "title" "body" "more";
    padding: 0 0 var(--mu-1);
  }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child > [class*="col-"]:not(.divNews) > * { margin-inline: var(--_pad); }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child .divNews { aspect-ratio: 16 / 9; margin-block-end: var(--mu-4); border: 0; border-block-end: 1px solid var(--mu-border); border-radius: 0; }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child .divNews > a { padding: var(--mu-news-pad, var(--mu-4)); }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child .divNews img { border-radius: var(--mu-r-sm); }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child :is(h2, h3, h4) { font-size: 1.25rem; }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child p:not(.mu-meta) { margin-block-start: var(--mu-2); }
}
@media (min-width: 768px) {
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child {
    --_pad: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "media meta" "media title" "media body" "media more";
    padding: 0;
  }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child > [class*="col-"]:not(.divNews) > * { margin-inline: var(--_pad); }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child .divNews { aspect-ratio: auto; min-block-size: clamp(15rem, 10rem + 14vw, 22rem); margin: 0; border-block-end: 0; border-inline-end: 1px solid var(--mu-border); }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child .divNews > a { padding: var(--mu-news-pad, var(--mu-6)); }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child .mu-meta { margin-block-start: var(--_pad); }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child :is(h2, h3, h4) { font-size: var(--mu-fs-h2); line-height: var(--mu-lh-heading); }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child p:not(.mu-meta) { margin-block-start: var(--mu-3); font-size: 1rem; }
  .mu:has(.pagination > .disabled:first-child) .mu-news-list--lead > .newsall:first-child .btn { margin-block: var(--mu-4) calc(var(--_pad) - var(--mu-3)); font-size: .9375rem; }
}

/* Feature tiles (product.aspx.cs):
   div.col-*.mainBoxFeature > div.container-fluid.(defaultbox|greenBox).FeatureBox.FeatureboxChild > h6
   Give their existing wrapper <div> the class .mu-feature-grid. */
.mu .mu-feature-grid > .mainBoxFeature { float: none; inline-size: auto; min-block-size: 0; padding: 0; display: flex; }
.mu .FeatureBox {
  display: flex;
  align-items: flex-start;
  gap: var(--mu-3);
  inline-size: 100%;
  min-block-size: 3.25rem;
  margin: 0;
  padding: var(--mu-3) var(--mu-4);
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-md);
  background: var(--mu-surface);
}
.mu .FeatureBox::after { display: none; }
.mu .FeatureBox::before {
  content: "";
  display: block;
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: .3em;
  background-color: var(--mu-n-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mu .FeatureBox h6 { margin: 0; font-size: .9375rem; font-weight: var(--mu-fw-medium); line-height: 1.7; color: var(--mu-text); }
.mu .FeatureBox.greenBox { border-color: var(--mu-primary-soft-border); background: var(--mu-primary-soft); }
.mu .FeatureBox.greenBox::before { background-color: var(--mu-green-700); }

/* Customer tiles (customer.aspx, 50 static blocks):
   div.container-fluid.CustomerBox > div.CustomerboxChild (h6) + div.CustomerboxChild (img) */
.mu .CustomerBox {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mu-3);
  block-size: 100%;
  margin: 0;
  padding: var(--mu-4) var(--mu-3);
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-md);
  background: var(--mu-surface);
  text-align: center;
}
.mu .CustomerBox::before, .mu .CustomerBox::after { display: none; }
.mu .CustomerBox > .CustomerboxChild { float: none; inline-size: auto; min-block-size: 0; padding: 0; min-inline-size: 0; }
.mu .CustomerBox > .CustomerboxChild:last-child { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; flex: none; }
.mu .CustomerBox img { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 3.5rem; object-fit: contain; }
.mu .CustomerBox h6 { margin: 0; font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-medium); line-height: 1.7; color: var(--mu-text); }
@media (min-width: 640px) {
  .mu .CustomerBox { flex-direction: row-reverse; justify-content: flex-end; text-align: start; min-block-size: 5rem; padding: var(--mu-3) var(--mu-4); gap: var(--mu-4); }
  .mu .CustomerBox > .CustomerboxChild:last-child { inline-size: 3rem; block-size: 3rem; }
  .mu .CustomerBox img { max-block-size: 3rem; }
}

.mu .mu-logo-grid > .mainboxCustomer { float: none; inline-size: auto; min-block-size: 0; padding: 0; }

/* Success dialog: #myModalSuccess .modal-dialogSuccess > .modal-content > .modal-body (button.close + h4) */
.mu .modal-dialogSuccess .modal-body { position: relative; display: grid; justify-items: center; gap: var(--mu-3); padding: var(--mu-10) var(--mu-6); text-align: center; }
.mu .modal-dialogSuccess .close { position: absolute; inset-block-start: var(--mu-3); inset-inline-end: var(--mu-3); float: none; display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; font-size: 1.5rem; font-weight: 400; color: var(--mu-text-muted); text-shadow: none; opacity: 1; }
.mu .modal-dialogSuccess .close:hover { background: var(--mu-surface-hover); }
.mu .modal-dialogSuccess h4 { display: grid; justify-items: center; gap: var(--mu-4); font-size: 1.1875rem; font-weight: var(--mu-fw-bold); line-height: var(--mu-lh-snug); }
.mu .Modal-success { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: 50%; background: var(--mu-success-bg); color: var(--mu-success); font-size: 2rem; }

/* Product rail driven by js/Mehr.js (.MultiCarousel). Mehr.js writes pixel
   widths and a translateX with left-to-right maths; these rules hand the
   layout to a native, direction-aware scroll-snap rail instead. The script
   keeps running untouched; its two arrow buttons are hidden. */
.mu .MultiCarousel { float: none; inline-size: auto; overflow: visible; padding: 0; margin: 0; }
.mu .MultiCarousel .MultiCarousel-inner {
  --mu-per-view: 1.15;
  --mu-rail-gap: var(--mu-4);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--mu-per-view) - 1) * var(--mu-rail-gap)) / var(--mu-per-view));
  gap: var(--mu-rail-gap);
  inline-size: auto !important;
  transform: none !important;
  transition: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--mu-gutter);
  margin-inline: calc(var(--mu-gutter) * -1);
  padding: var(--mu-1) var(--mu-gutter) var(--mu-4);
  scrollbar-width: thin;
  scrollbar-color: var(--mu-n-300) transparent;
}
.mu .MultiCarousel .item { float: none; inline-size: auto !important; padding: 0; scroll-snap-align: start; min-inline-size: 0; display: flex; }
.mu .MultiCarousel .item > a { display: flex; inline-size: 100%; color: inherit; }
/* Mehr.js buttons. Their own translate maths is neutralised above; js/mehr-ui.js
   makes them scroll the strip and adds <html class="mu-js-rail">. Without that
   script they stay hidden and the strip is still swipeable and keyboard-reachable.
   The buttons are physical: .leftLst moves to the left, .rightLst to the right.
   They sit on the heading row of the section (.mu-home__products). */
.mu .MultiCarousel :is(.leftLst, .rightLst) { display: none; }
@media (min-width: 768px) {
  .mu-js-rail .mu .MultiCarousel :is(.leftLst, .rightLst) {
    --_bg: var(--mu-surface); --_fg: var(--mu-text); --_bd: var(--mu-border-strong); --_bg-h: var(--mu-surface-hover); --_bd-h: var(--mu-n-400);
    position: absolute;
    inset-block-start: 0;
    display: inline-grid;
    background: var(--_bg);
    border: 1px solid var(--_bd);
    color: var(--_fg) !important;
    place-items: center;
    inline-size: 2.75rem;
    min-block-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border-radius: 50%;
    box-shadow: none;
    pointer-events: auto;
    cursor: pointer;
  }
  .mu-js-rail .mu .MultiCarousel .leftLst { left: var(--mu-gutter); right: auto; }
  .mu-js-rail .mu .MultiCarousel .rightLst { left: calc(var(--mu-gutter) + 3.25rem); right: auto; }
  .mu-js-rail .mu .MultiCarousel :is(.leftLst, .rightLst).is-end { opacity: .38; pointer-events: none; }
  .mu-js-rail .mu .MultiCarousel.is-static :is(.leftLst, .rightLst) { display: none; }
}
@media (min-width: 480px) { .mu .MultiCarousel .MultiCarousel-inner { --mu-per-view: 1.6; } }
@media (min-width: 768px) { .mu .MultiCarousel .MultiCarousel-inner { --mu-per-view: 2.5; --mu-rail-gap: var(--mu-5); } }
@media (min-width: 1024px) { .mu .MultiCarousel .MultiCarousel-inner { --mu-per-view: 3.25; } }
@media (min-width: 1280px) { .mu .MultiCarousel .MultiCarousel-inner { --mu-per-view: 4; } }
/* Product box inside the rail: a > div.BoxProduct > img + (h3|h4).lead + p[runat]
   Legacy art is small (100–217px); the well shows it at natural size. */
.mu .BoxProduct {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 0;
  margin: 0;
  padding: 0 0 var(--mu-5);
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-r-lg);
  background: var(--mu-surface);
  overflow: hidden;
  text-align: start;
  transition: border-color var(--mu-dur-2) var(--mu-ease), box-shadow var(--mu-dur-2) var(--mu-ease), transform var(--mu-dur-2) var(--mu-ease);
}
.mu .BoxProduct:hover { border: 1px solid var(--mu-border-strong); }
.mu a:hover > .BoxProduct { border-color: var(--mu-border-strong); box-shadow: var(--mu-shadow-2); transform: translateY(-2px); }
.mu .MultiCarousel .item > a:focus-visible { outline: none; }
.mu .MultiCarousel .item > a:focus-visible > .BoxProduct { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: var(--mu-focus-offset); }
.mu .BoxProduct > img {
  box-sizing: content-box;
  float: none;
  display: block;
  inline-size: calc(100% - 2rem);
  max-inline-size: none;
  block-size: 7.5rem;
  max-block-size: none;
  object-fit: scale-down;
  margin: 0 0 var(--mu-5);
  padding: 1.5rem 1rem;
  border-block-end: 1px solid var(--mu-border);
  background:
    radial-gradient(circle at 1px 1px, var(--mu-n-200) 1px, transparent 0) 0 0 / 16px 16px,
    var(--mu-surface-sunken);
}
.mu .BoxProduct > :is(h3, h4, .lead) { margin: 0 var(--mu-5) var(--mu-2); padding: 0; font-size: 1.125rem; font-weight: var(--mu-fw-bold); line-height: var(--mu-lh-snug); color: var(--mu-text) !important; transition: color var(--mu-dur-1) var(--mu-ease); }
.mu a:hover > .BoxProduct > :is(h3, h4, .lead) { color: var(--mu-link-hover) !important; }
.mu .BoxProduct > p { float: none; margin: 0 var(--mu-5); padding: 0; color: var(--mu-text-muted); font-size: .9375rem; line-height: 1.85; text-align: start; }
.mu .BoxProduct > p:empty { display: none; }

/* 10. ICONS ---------------------------------------------------------------- */
/* Icons: 24px stroke set drawn as CSS masks, coloured by currentColor.
   Paths adapted from Feather Icons (MIT, github.com/feathericons/feather). */
.mu-icon{display:inline-block;flex:none;inline-size:1.25em;block-size:1.25em;vertical-align:-.25em;background-color:currentColor;-webkit-mask:var(--mu-i) center/contain no-repeat;mask:var(--mu-i) center/contain no-repeat}
.mu-icon--sm{inline-size:1em;block-size:1em;vertical-align:-.15em}
.mu-icon--lg{inline-size:1.5em;block-size:1.5em}
@media (forced-colors:active){.mu-icon{background-color:CanvasText;forced-color-adjust:none}}
.mu-icon--menu{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22/%3E%3C/svg%3E")}
.mu-icon--close{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6L6 18%22/%3E%3C/svg%3E")}
.mu-icon--chevron-down{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E")}
.mu-icon--chevron-left{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 6l-6 6 6 6%22/%3E%3C/svg%3E")}
.mu-icon--chevron-right{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6l6 6-6 6%22/%3E%3C/svg%3E")}
.mu-icon--arrow-left{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 12H5M11 6l-6 6 6 6%22/%3E%3C/svg%3E")}
.mu-icon--arrow-right{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E")}
.mu-icon--phone{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z%22/%3E%3C/svg%3E")}
.mu-icon--mail{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z%22/%3E%3Cpath d=%22M22 6l-10 7L2 6%22/%3E%3C/svg%3E")}
.mu-icon--map-pin{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E")}
.mu-icon--user{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E")}
.mu-icon--users{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M23 21v-2a4 4 0 0 0-3-3.87%22/%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22/%3E%3C/svg%3E")}
.mu-icon--search{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22M21 21l-4.35-4.35%22/%3E%3C/svg%3E")}
.mu-icon--check{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6L9 17l-5-5%22/%3E%3C/svg%3E")}
.mu-icon--check-circle{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 11.08V12a10 10 0 1 1-5.93-9.14%22/%3E%3Cpath d=%22M22 4L12 14.01l-3-3%22/%3E%3C/svg%3E")}
.mu-icon--alert{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z%22/%3E%3Cpath d=%22M12 9v4M12 17h.01%22/%3E%3C/svg%3E")}
.mu-icon--info{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4M12 8h.01%22/%3E%3C/svg%3E")}
.mu-icon--x-circle{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M15 9l-6 6M9 9l6 6%22/%3E%3C/svg%3E")}
.mu-icon--code{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 18l6-6-6-6M8 6l-6 6 6 6%22/%3E%3C/svg%3E")}
.mu-icon--download{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22M7 10l5 5 5-5M12 15V3%22/%3E%3C/svg%3E")}
.mu-icon--external{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22/%3E%3Cpath d=%22M15 3h6v6M10 14L21 3%22/%3E%3C/svg%3E")}
.mu-icon--copy{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%229%22 width=%2213%22 height=%2213%22 rx=%222%22/%3E%3Cpath d=%22M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1%22/%3E%3C/svg%3E")}
.mu-icon--calendar{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M16 2v4M8 2v4M3 10h18%22/%3E%3C/svg%3E")}
.mu-icon--clock{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 6v6l4 2%22/%3E%3C/svg%3E")}
.mu-icon--cpu{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%222%22/%3E%3Crect x=%229%22 y=%229%22 width=%226%22 height=%226%22/%3E%3Cpath d=%22M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3%22/%3E%3C/svg%3E")}
.mu-icon--message{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%22/%3E%3C/svg%3E")}
.mu-icon--file{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6M16 13H8M16 17H8%22/%3E%3C/svg%3E")}
.mu-icon--send{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 2L11 13%22/%3E%3Cpath d=%22M22 2l-7 20-4-9-9-4 20-7z%22/%3E%3C/svg%3E")}
.mu-icon--support{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 18v-6a9 9 0 0 1 18 0v6%22/%3E%3Cpath d=%22M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z%22/%3E%3C/svg%3E")}
.mu-icon--fax{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9V2h12v7%22/%3E%3Cpath d=%22M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2%22/%3E%3Crect x=%226%22 y=%2214%22 width=%2212%22 height=%228%22/%3E%3C/svg%3E")}
.mu-icon--globe{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3Cpath d=%22M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z%22/%3E%3C/svg%3E")}
.mu-icon--layers{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2L2 7l10 5 10-5-10-5z%22/%3E%3Cpath d=%22M2 17l10 5 10-5M2 12l10 5 10-5%22/%3E%3C/svg%3E")}
.mu-icon--signal{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 20v-4M10 20v-8M15 20V8M20 20V4%22/%3E%3C/svg%3E")}
.mu-icon--shield{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%22/%3E%3C/svg%3E")}
.mu-icon--login{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4%22/%3E%3Cpath d=%22M10 17l5-5-5-5M15 12H3%22/%3E%3C/svg%3E")}
.mu-icon--instagram{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%222%22 width=%2220%22 height=%2220%22 rx=%225%22/%3E%3Cpath d=%22M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z%22/%3E%3Cpath d=%22M17.5 6.5h.01%22/%3E%3C/svg%3E")}
.mu-icon--facebook{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z%22/%3E%3C/svg%3E")}
.mu-icon--tag{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z%22/%3E%3Cpath d=%22M7 7h.01%22/%3E%3C/svg%3E")}
.mu-icon--server{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%222%22 width=%2220%22 height=%228%22 rx=%222%22/%3E%3Crect x=%222%22 y=%2214%22 width=%2220%22 height=%228%22 rx=%222%22/%3E%3Cpath d=%22M6 6h.01M6 18h.01%22/%3E%3C/svg%3E")}
.mu-icon--home{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22/%3E%3Cpath d=%22M9 22V12h6v10%22/%3E%3C/svg%3E")}
.mu-icon--inbox{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 12h-6l-2 3h-4l-2-3H2%22/%3E%3Cpath d=%22M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z%22/%3E%3C/svg%3E")}
.mu-icon--plus{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E")}
/* Direction-aware arrows: "forward" follows the reading direction (points left in RTL). */
.mu-icon--forward{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 12H5M11 6l-6 6 6 6%22/%3E%3C/svg%3E")}
.mu-icon--back{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E")}
.mu-icon--chevron-forward{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 6l-6 6 6 6%22/%3E%3C/svg%3E")}
.mu-icon--chevron-back{--mu-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6l6 6-6 6%22/%3E%3C/svg%3E")}
[dir="ltr"] .mu-icon--forward,[dir="ltr"] .mu-icon--back,[dir="ltr"] .mu-icon--chevron-forward,[dir="ltr"] .mu-icon--chevron-back{transform:scaleX(-1)}

/* 11. MOTION AND PRINT ---------------------------------------------------- */
/* Legacy page-load slide-in is retired wherever the new system is active. */
.mu .animated { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .mu *, .mu *::before, .mu *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .mu .mu-card--link:hover, .mu .newsall:hover, .mu a:hover > .BoxProduct { transform: none; }
  .mu-skeleton { animation: none; background: var(--mu-n-100); }
}

@media print {
  .mu-topbar, .mu-header, .mu-footer, .mu-club, .mu .modal, .mu .modal-backdrop, .mu-nav-toggle { display: none !important; }
  body.mu { background: #fff; }
  .mu-section { padding-block: 1.5rem; }
  .mu a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; direction: ltr; unicode-bidi: isolate; }
}

/* 12. PRODUCTION SHELL + LEGACY COEXISTENCE (Phase 3) ----------------------
   Rules the live master page needs while Css/Style.min.css is still loaded
   and most pages are still legacy markup. Everything here is scoped to the
   shell (.mu-header, .mu-footer, .mu-main) so page content is not restyled.
   Remove the "legacy" parts together with Style.min.css in the cleanup phase. */

/* Pairs with html{scrollbar-gutter:stable} in section 3: Bootstrap pads the
   body by the scrollbar width while a modal is open, which would now shift
   the page sideways. Same rule as body.mu.modal-open, for pages whose body
   is not `.mu` yet. */
body.modal-open { padding-inline: 0 !important; }

/* Content region. No width, colour or font is imposed: legacy pages bring
   their own #content column. flow-root keeps legacy floats out of the footer. */
.mu-main { display: flow-root; min-inline-size: 0; }

/* Header and footer are the `.mu` roots during migration, so they repeat the
   two body.mu properties they rely on. */
.mu-header, .mu-footer { overflow-wrap: break-word; color-scheme: light; }
.mu-footer { position: relative; }

/* Header bar. DOM order is brand → menu button → nav → actions (the menu button
   stays before the nav, as in the legacy master); the button is placed last
   visually. */
.mu-header__bar > .mu-nav-toggle { order: 3; flex: none; }
.mu-header__bar > .mu-brand { flex: none; }
.mu-header__login { display: none; }
@media (min-width: 1024px) {
  .mu-header__login { display: inline-flex; }
}
/* Legacy ID rule sets 20px white text on the mobile support link. */
.mu-header #OnlineRequestMoblie { font-size: .9375rem; }

/* Bootstrap adds a full-screen .dropdown-backdrop on touch devices when the
   dropdown is not inside .navbar-nav. At z-index 990 it would sit above the
   mega menu and swallow the first tap on a product link. */
.mu-header .dropdown-backdrop { display: none; }
@media (min-width: 1024px) {
  .mu-header .dropdown-backdrop { display: block; z-index: calc(var(--mu-z-dropdown) - 1); }
}

/* Customer club: status text. The code-behind writes inline colours; these
   selectors do not depend on the class surviving a server-side change. */
.mu-club__form > p { margin: 0; font-size: var(--mu-fs-sm); line-height: 1.7; }
.mu-club__form > p[style*="red"] { color: var(--mu-danger-on-ink) !important; }
.mu-club__form > p[style*="green"] { color: var(--mu-green-300) !important; }
.mu-club__form > p:empty { display: none; }
/* Legacy `#MobileNoClub{direction:rtl}` would flip the digits field back. */
.mu-club #MobileNoClub { direction: ltr; }

/* Footer without the preview's about/contact column: the brand takes its own
   width and the link columns take the rest. */
.mu-footer__main--slim .mu-footer__brand { max-inline-size: none; }
@media (min-width: 1024px) {
  .mu-footer__main--slim { grid-template-columns: auto minmax(0, 1fr); gap: var(--mu-16); }
}
.mu-footer__bottom > p { margin: 0; }

/* ---- Migrated pages (Phase 4) --------------------------------------------
   A migrated page wraps its content in `<div class="mu mu-page">` and drops
   its per-page `.bg` photo styles. `.mu` is still not on <body>, so this
   wrapper carries the page surface. It must not create a stacking context:
   Bootstrap appends the modal backdrop to <body>, and a page's own modals
   live in a sibling `<div class="mu">`, not inside `.mu-page`. */
.mu-page { background: var(--mu-bg); color-scheme: light; overflow-wrap: break-word; }
.mu-pagehead .mu-breadcrumb { margin-block-end: var(--mu-1); }
/* Backdrop of a migrated page's modal (it is a child of <body>, outside `.mu`). */
body:has(.mu .modal) > .modal-backdrop { background: var(--mu-n-950); }
body:has(.mu .modal) > .modal-backdrop.in { opacity: .55; }
/* The strip between a migrated page and the footer takes the page tone. */
.mu-shell:has(.mu-page) { background: var(--mu-bg); }

/* 13. PAGE COMPOSITIONS (Phase 4B onward) ----------------------------------
   Layouts of individual migrated pages. Each block names the page it serves.
   Same scoping rule as everywhere else: `.mu`, a `mu-*` class, or :has(). */

/* ---- News detail (Content/news.aspx) --------------------------------------
   article.mu-article > .mu-pagehead (breadcrumb, h1#NewsTitle, span#NewsTime)
                      > .mu-article__layout ( .mu-article__media | .mu-article__body )
   Phones: image first, then text. From 1024px: text at the reading start,
   image in a sticky column at the end. */
.mu-article__layout { display: grid; gap: var(--mu-8); align-items: start; }
.mu-article__layout > * { min-inline-size: 0; }
.mu-article__body { display: grid; gap: var(--mu-10); }
.mu-article__body > * { min-inline-size: 0; }
.mu-article__body > :empty { display: none; }
.mu .newsdetail { color: inherit; }
.mu .productDetails { margin: 0; font-size: inherit; }
.mu-pagehead .mu-meta { font-size: var(--mu-fs-sm); color: var(--mu-text-muted); }
.mu-pagehead .mu-meta:not(:empty)::before { content: ""; flex: none; inline-size: .375rem; block-size: .375rem; border-radius: 50%; background: var(--mu-green-500); }
.mu-article .mu-pagehead__title { max-inline-size: 28ch; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.375rem); line-height: 1.5; }
.mu-article .mu-prose p:empty { display: none; }
@media (min-width: 1024px) {
  .mu-article__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--mu-16); }
  .mu-article__media { order: 2; position: sticky; inset-block-start: calc(var(--mu-header-h) + var(--mu-6)); }
}
/* No picture (empty src, or nothing written): the text takes the full row. */
.mu-article__layout:has(.carousel-inner:empty),
.mu-article__layout:has(.carousel-inner > .item:only-child > img[src=""]) { grid-template-columns: minmax(0, 1fr); }
.mu-article__layout:has(.carousel-inner:empty) > .mu-article__media,
.mu-article__layout:has(.carousel-inner > .item:only-child > img[src=""]) > .mu-article__media { display: none; }

/* Image carousel written by news.aspx.cs: div.item[.active].thumbnail > img.
   A fixed 4:3 well keeps the page from jumping between pictures of different
   shapes; pictures are fitted whole, never cropped or stretched. */
.mu-article__media .carousel { background: var(--mu-surface-sunken); }
.mu-article__media .carousel-inner > .item { aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mu-article__media .carousel-inner > .item > img { inline-size: 100%; block-size: 100%; object-fit: contain; font-size: var(--mu-fs-xs); color: var(--mu-text-subtle); }
.mu-article__media .carousel-control { opacity: 1; }
.mu-article__media .carousel-inner:has(> .item:only-child) ~ .carousel-control { display: none; }
@media (max-width: 767.98px) {
  .mu-article__media .carousel-control { display: grid; inline-size: 2.5rem; block-size: 2.5rem; margin-block-start: -1.25rem; }
  .mu-article__media .carousel-control.left { left: var(--mu-2); }
  .mu-article__media .carousel-control.right { right: var(--mu-2); }
}

/* Related links written by news.aspx.cs as: <h2>…</h2><li><a>…</a></li>…
   (list items without a list element; laid out here as a link list). */
.mu-related { display: grid; gap: 0; padding-block-start: var(--mu-8); border-block-start: 1px solid var(--mu-border); }
.mu-related > h2 { margin-block-end: var(--mu-3); font-size: var(--mu-fs-h3); }
.mu-related > li { display: block; list-style: none; border-block-end: 1px solid var(--mu-border); }
.mu-related > li > a { display: flex; align-items: center; justify-content: space-between; gap: var(--mu-3); min-block-size: 3rem; padding-block: var(--mu-2); font-weight: var(--mu-fw-medium); line-height: var(--mu-lh-snug); }
.mu-related > li > a::after { content: ""; flex: none; inline-size: .4375rem; block-size: .4375rem; border: solid currentColor; border-width: 0 0 1.75px 1.75px; transform: rotate(45deg); }
[dir="ltr"] .mu-related > li > a::after { border-width: 0 1.75px 1.75px 0; transform: rotate(-45deg); }

/* ---- Home (Default.aspx) ---------------------------------------------------
   .mu-home > h1.mu-sr-only
            > section.mu-home__hero  (banner carousel #carousel-746132)
            > section.mu-home__products ×2 (h2 + .MultiCarousel rail)
   No headline copy: the banners are the hero (owner decision 1). */
.mu-home__hero { position: relative; padding-block: clamp(1rem, .5rem + 2.5vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--mu-surface); border-block-end: 1px solid var(--mu-border); overflow: hidden; isolation: isolate; }
.mu-home__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, var(--mu-n-300) 1px, transparent 0); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); opacity: .7; }

/* Banner stage. The banners are 2.7:1 artwork with text baked in, about
   1349px wide: the frame never exceeds the container (so they are not
   upscaled) and pictures are fitted whole, never cropped. */
.mu-hero-carousel { display: grid; gap: var(--mu-4); }
.mu-hero-carousel > .carousel-inner { aspect-ratio: 1349 / 500; background: var(--mu-surface-sunken); box-shadow: var(--mu-shadow-3); }
.mu-hero-carousel > .carousel-inner > .item { block-size: 100%; }
.mu-hero-carousel > .carousel-inner > .item::before { content: none; }
.mu-hero-carousel > .carousel-inner > .item > img { inline-size: 100%; block-size: 100%; object-fit: contain; max-block-size: none; margin: 0; font-size: var(--mu-fs-sm); color: var(--mu-text-subtle); }
.mu-hero-carousel__bar { display: flex; align-items: center; justify-content: center; gap: var(--mu-3); }
.mu-hero-carousel__ctl { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--mu-border); border-radius: 50%; background: var(--mu-surface); color: var(--mu-text) !important; transition: background-color var(--mu-dur-1) var(--mu-ease), border-color var(--mu-dur-1) var(--mu-ease); }
.mu-hero-carousel__ctl:hover { background: var(--mu-surface-hover); border-color: var(--mu-border-strong); }
.mu-hero-carousel.is-single .mu-hero-carousel__bar,
.mu-hero-carousel.is-empty { display: none; }
/* Indicators sit under the picture, in the control row, not on the artwork. */
.mu .mu-hero-carousel .carousel-indicators { position: static; inset: auto; gap: var(--mu-1); min-block-size: 2.75rem; padding-inline: var(--mu-3); border: 1px solid var(--mu-border); border-radius: var(--mu-r-pill); background: var(--mu-surface); }
.mu .mu-hero-carousel .carousel-indicators li,
.mu .mu-hero-carousel .carousel-indicators li.active { inline-size: .5rem; block-size: .5rem; background: var(--mu-n-300); box-shadow: none; text-indent: -999px; cursor: pointer; }
.mu .mu-hero-carousel .carousel-indicators li::before { content: none; }
.mu .mu-hero-carousel .carousel-indicators li::after { inset: -1.125rem -.125rem; }
.mu .mu-hero-carousel .carousel-indicators li.active { inline-size: 1.75rem; background: var(--mu-green-600); }
@media (max-width: 479.98px) {
  /* Phones: the stage runs edge to edge so the baked-in banner text stays as large as possible. */
  .mu-home__hero { padding-block-start: 0; }
  .mu-home__hero > .mu-container { padding-inline: 0; }
  .mu-hero-carousel > .carousel-inner { border-inline: 0; border-block-start: 0; border-radius: 0; box-shadow: none; }
}

/* Product sections */
.mu-home__products { position: relative; padding-block: calc(var(--mu-section-y) * .7); }
.mu .topProduct { margin: 0; }
.mu-home__products:nth-of-type(odd) { background: var(--mu-surface); border-block: 1px solid var(--mu-border); }
.mu-home__products > .mu-container { position: relative; }
.mu-home__products .mu-section__head { min-block-size: 2.75rem; align-items: center; margin-block-end: var(--mu-6); }
.mu-home__products .mu-section__head h2 { display: flex; align-items: center; gap: var(--mu-3); color: var(--mu-text); }
.mu-home__products .mu-section__head h2::before { content: ""; flex: none; inline-size: .375rem; block-size: 1.5em; border-radius: var(--mu-r-pill); background: var(--mu-green-500); }
@media (min-width: 768px) { .mu-js-rail .mu-home__products .mu-section__head { padding-inline-end: 7rem; } }
.mu .BoxProductRolling { direction: inherit; }
.mu .MultiCarousel { position: static; }
.mu .MultiCarousel .MultiCarousel-inner { float: none; }
.mu .MultiCarousel p { float: none; }
/* The rail must not paint a scrollbar track across a section that fits. */
.mu .MultiCarousel.is-static .MultiCarousel-inner { overflow-x: visible; padding-block-end: var(--mu-1); }
@media (min-width: 1536px) { .mu .MultiCarousel .MultiCarousel-inner { --mu-per-view: 4; } }
/* A short list (electronics, 3 items): no peeking card on wide screens, and
   the card turns horizontal so three of them fill the row. */
@media (min-width: 768px) {
  .mu-home__products--few .MultiCarousel .MultiCarousel-inner { --mu-per-view: 2.2; }
}
@media (min-width: 1024px) {
  .mu-home__products--few .MultiCarousel .MultiCarousel-inner { --mu-per-view: 3; }
  .mu-home__products--few .BoxProduct { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: var(--mu-5); padding: 0; }
  .mu-home__products--few .BoxProduct > img { grid-row: 1 / -1; inline-size: auto; block-size: 100%; min-block-size: 7.5rem; margin: 0; padding: var(--mu-4); border-block-end: 0; border-inline-end: 1px solid var(--mu-border); box-sizing: border-box; inline-size: 100%; }
  .mu-home__products--few .BoxProduct > :is(h3, h4, .lead) { align-self: end; margin: var(--mu-5) 0 var(--mu-2); margin-inline-end: var(--mu-5); }
  .mu-home__products--few .BoxProduct > p { align-self: start; margin: 0 0 var(--mu-5); margin-inline-end: var(--mu-5); }
  .mu-home__products--few .BoxProduct > :is(h3, h4, .lead):last-child,
  .mu-home__products--few .BoxProduct > :is(h3, h4, .lead):has(+ p:empty) { grid-row: 1 / -1; align-self: center; margin-block: 0; }
}

/* ---- Product detail (Content/product.aspx) ----------------------------------
   .mu-product > .mu-product__head ( summary: breadcrumb, h1#pageTitle, facts, action | media )
               > .mu-product__main ( .mu-product-body, .mu-product__features, .mu-related )
   The code-behind writes the two facts as single strings ("مناسب برای : …",
   "قیمت : … ریال"); they are shown as written. */
.mu-product__intro { display: grid; gap: var(--mu-8); align-items: center; }
.mu-product__intro > * { min-inline-size: 0; }
.mu-product__summary { display: grid; gap: var(--mu-4); justify-items: start; }
.mu-product__facts { display: grid; gap: var(--mu-2); inline-size: 100%; max-inline-size: 34rem; margin-block-start: var(--mu-2); }
.mu-product__fact { position: relative; display: block; margin: 0; padding: var(--mu-3) var(--mu-4); padding-inline-start: 3.25rem; border: 1px solid var(--mu-border); border-radius: var(--mu-r-md); background: var(--mu-surface); color: var(--mu-text); font-size: 1rem; font-weight: var(--mu-fw-medium); line-height: 1.8; }
.mu-product__fact:empty { display: none; }
.mu-product__fact::before { content: ""; position: absolute; inset-inline-start: var(--mu-4); inset-block-start: 1rem; inline-size: 1.25rem; block-size: 1.25rem; background-color: var(--mu-green-600); -webkit-mask: var(--_i) center / contain no-repeat; mask: var(--_i) center / contain no-repeat; }
.mu-product__fact--audience { --_i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.mu-product__fact--price { --_i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); font-size: 1.125rem; font-weight: var(--mu-fw-bold); font-variant-numeric: tabular-nums; }
.mu-product__actions { display: flex; flex-wrap: wrap; gap: var(--mu-3); margin-block-start: var(--mu-2); }
@media (max-width: 479.98px) { .mu-product__actions, .mu-product__actions > .mu-btn { inline-size: 100%; } }

/* Media frame. `.bg` receives `background: url(…)` from the inline <style>
   that product.aspx.cs writes; these longhands only place it. When
   js/mehr-ui.js has swapped in an <img> (.has-img) the background is dropped. */
.mu-product__media { display: grid; aspect-ratio: 16 / 10; border: 1px solid var(--mu-border); border-radius: var(--mu-r-lg); background: radial-gradient(circle at 1px 1px, var(--mu-n-200) 1px, transparent 0) 0 0 / 16px 16px, var(--mu-surface-sunken); overflow: hidden; }
.mu-product__media > .mu-product__image { position: static; inline-size: auto; block-size: auto; min-block-size: 0; margin: var(--mu-5); opacity: 1; z-index: auto; display: grid; place-items: center; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; }
.mu-product__media > .mu-product__image.has-img { margin: 0; background: none !important; }
.mu-product__image > img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; min-block-size: 0; object-fit: scale-down; }
.mu-product__image > img.is-fill { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mu-product__media { max-block-size: 26rem; }
.mu-product__intro:has(.mu-product__image.is-missing) { grid-template-columns: minmax(0, 1fr); }
.mu-product__intro:has(.mu-product__image.is-missing) > .mu-product__media { display: none; }
@media (min-width: 1024px) {
  .mu-product__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mu-16); }
}

/* Product not found: the code-behind does not render the title (an empty title is treated the same way). */
.mu-product__missing { display: none; margin: var(--mu-section-y) auto; max-inline-size: min(40rem, calc(100% - 2 * var(--mu-gutter))); }
.mu-product:is(:has(#ContentPlaceHolder1_pageTitle:empty), :not(:has(#ContentPlaceHolder1_pageTitle))) > .mu-product__missing { display: grid; }
.mu-product:is(:has(#ContentPlaceHolder1_pageTitle:empty), :not(:has(#ContentPlaceHolder1_pageTitle))) > :is(.mu-product__head, .mu-product__main) { display: none; }

.mu-product__sections { display: grid; gap: var(--mu-12); }
.mu-product__sections > * { min-inline-size: 0; }
.mu-product__sections > :empty { display: none; }
.mu .contactBox.mu-prose { margin: 0; padding: 0; border: 0; background: none; color: var(--mu-text-2); max-inline-size: 52rem; }
.mu .contactBox.mu-prose :is(p, h1, h2, h3, h4, h5, h6, li, span, div) { color: inherit; }
.mu .contactBox.mu-prose :is(h1, h2, h3, h4) { color: var(--mu-text); }
/* DB-authored product text: each line arrives as <p class="text-justify" style="line-height:3">. */
.mu-product-body p:empty { display: none; }
.mu-product-body :is(img, iframe, video) { max-inline-size: 100%; block-size: auto; }
.mu-product-body iframe { aspect-ratio: 16 / 9; inline-size: 100%; border: 0; }
.mu-product-body :is(pre, code) { white-space: pre-wrap; overflow-wrap: anywhere; }
.mu-product-body [style*="width"] { max-inline-size: 100%; }
.mu-product__features { display: grid; gap: var(--mu-5); }
.mu-product__features:has(.mu-feature-grid:empty) { display: none; }
.mu-product__features > h2 { font-size: var(--mu-fs-h3); }
.mu-product__features .mu-feature-grid { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--mu-3); }

/* ---- About us (Content/aboutus.aspx) ---------------------------------------
   Company narrative from the database (config.AboutUsDes, one <p> per line)
   in a reading column, with a quiet column of existing site links beside it. */
.mu-about__layout { align-items: start; }
.mu-about__body { font-size: 1.0625rem; }
.mu-about__body p:empty { display: none; }
.mu-about__body:empty { display: none; }
@media (min-width: 1024px) { .mu-about__layout { grid-template-columns: minmax(0, 46rem) minmax(16rem, 20rem); justify-content: space-between; } }

/* Link cards: a short vertical list of destinations (icon, label, chevron). */
.mu-linkcards { display: grid; gap: var(--mu-2); }
.mu-linkcards a { display: flex; align-items: center; gap: var(--mu-3); min-block-size: 3.5rem; padding: var(--mu-3) var(--mu-4); border: 1px solid var(--mu-border); border-radius: var(--mu-r-md); background: var(--mu-surface); color: var(--mu-text); font-weight: var(--mu-fw-semibold); line-height: var(--mu-lh-snug); transition: border-color var(--mu-dur-1) var(--mu-ease), background-color var(--mu-dur-1) var(--mu-ease); }
.mu-linkcards a:hover { border-color: var(--mu-border-strong); background: var(--mu-surface-hover); color: var(--mu-text); }
.mu-linkcards a > span { flex: 1; min-inline-size: 0; }
.mu-linkcards a > .mu-icon:first-child { color: var(--mu-green-600); }
.mu-linkcards a > .mu-icon:last-child { inline-size: 1rem; block-size: 1rem; color: var(--mu-n-400); }

/* ---- Customers (Content/customer.aspx) --------------------------------------
   ul.mu-logo-grid--wall > li.mu-logo-card ( .mu-logo-card__mark > img , h2.mu-logo-card__name )
   Every logo sits in the same white well, fitted whole (never cropped,
   stretched or enlarged past its file size); the name is always visible. */
.mu-logo-grid--wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-3); }
.mu-logo-grid--wall > .mu-logo-card { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; min-block-size: 0; padding: 0; border-radius: var(--mu-r-lg); overflow: hidden; text-align: center; transition: border-color var(--mu-dur-2) var(--mu-ease), box-shadow var(--mu-dur-2) var(--mu-ease); }
.mu-logo-grid--wall > .mu-logo-card:hover { border-color: var(--mu-border-strong); box-shadow: var(--mu-shadow-1); }
.mu-logo-grid--wall .mu-logo-card__mark { inline-size: auto; block-size: clamp(6.5rem, 5rem + 6vw, 8.5rem); padding: var(--mu-4); background: var(--mu-surface); }
.mu-logo-grid--wall .mu-logo-card__mark img { max-inline-size: min(100%, 7rem); max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; font-size: 0; }
.mu-logo-grid--wall .mu-logo-card__name { display: grid; place-items: center; flex: 1; padding: var(--mu-3); border-block-start: 1px solid var(--mu-border); background: var(--mu-surface-sunken); font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-medium); line-height: 1.75; color: var(--mu-text); text-wrap: balance; }
/* Missing or broken logo file (class set by js/mehr-ui.js): neutral mark, name stays. */
.mu-logo-card__mark:has(img.is-missing)::before { content: ""; inline-size: 2.5rem; block-size: 2.5rem; background-color: var(--mu-n-300); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat; }
.mu-logo-card__mark img.is-missing { display: none; }
@media (min-width: 640px) { .mu-logo-grid--wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mu-4); } }
@media (min-width: 1024px) { .mu-logo-grid--wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mu-logo-grid--wall { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mu-5); } }

/* ---- Contact (Content/contactUs.aspx, Content/document.aspx) ----------------
   Both pages share this block. Form card at the reading start, contact
   details and map beside it from 1024px. */
.mu-contactpage__layout { display: grid; gap: var(--mu-6); align-items: start; }
.mu-contactpage__layout > * { min-inline-size: 0; }
@media (min-width: 1024px) { .mu-contactpage__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--mu-10); } }
.mu-contactpage .contactBox { float: none; inline-size: auto; margin: 0; }
.mu-contactpage__form.contactBox { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.mu .ContactUsForm { margin: 0; padding: 0; border: 0; background: none; }
.mu-contactpage__formtitle { display: flex; align-items: center; gap: var(--mu-3); font-size: var(--mu-fs-h3); color: var(--mu-text); }
.mu-contactpage__formtitle .mu-icon { color: var(--mu-green-600); }
.mu-contactpage .mu-form .form-group { margin: 0; }
.mu-contactpage__status:not(:has(> :not(:empty))) { display: none; }
/* Success text: asp:Label#statussend1 (span.statusSendContactUs), only rendered after a successful send. */
.mu .statusSendContactUs { display: flex; align-items: flex-start; gap: var(--mu-3); padding: var(--mu-3) var(--mu-4); border: 1px solid var(--mu-success-border); border-radius: var(--mu-r-md); background: var(--mu-success-bg); color: var(--mu-success); font-size: .9375rem; font-weight: var(--mu-fw-semibold); line-height: 1.8; }
.mu .statusSendContactUs:empty { display: none; }
.mu .statusSendContactUs::before { content: ""; flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .2em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4L12 14.01l-3-3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4L12 14.01l-3-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.mu-contactpage .mu-actions { flex-direction: row-reverse; justify-content: flex-start; }
.mu-contactpage .mu-actions .btn-danger { --_bg: var(--mu-surface); --_fg: var(--mu-text); --_bd: var(--mu-border-strong); --_bg-h: var(--mu-surface-hover); --_bd-h: var(--mu-n-400); box-shadow: none; }
.mu-contactpage .mu-actions .btn { min-inline-size: 8rem; }
@media (max-width: 479.98px) { .mu-contactpage .mu-actions .btn { flex: 1 1 0; min-inline-size: 0; } }
.mu-contactpage__info { display: grid; gap: var(--mu-5); }
.mu .contactaddress { margin: 0; padding: 0; }
.mu .contactaddress a.mu-contact__item:not([href]) { cursor: default; }
.mu .contactaddress a.mu-contact__item:not([href]):hover { background: none; }
.mu-contact__label { align-self: end; }
.mu-contact__value.mu-rtl { font-variant-numeric: tabular-nums; }
/* Google map: fills a responsive frame (was a fixed 400×440px canvas in a clipped box). */
.mu .mapgoogle.mu-map { block-size: auto; overflow: hidden; aspect-ratio: 16 / 10; }
.mu .mu-map > #gmap_canvas { inline-size: 100% !important; block-size: 100% !important; }
.mu #gmap_canvas img { max-inline-size: none !important; background: none !important; }

/* ---- Login (Login/login.aspx) ------------------------------------------------
   asp:Login renders table#…Login1.mu-detable > tr > td > (LayoutTemplate).
   The card replaces Css/login-theme.css, which this page no longer links. */
.mu-login { position: relative; padding-block: clamp(2rem, 1rem + 5vw, 5rem); overflow: hidden; isolation: isolate; }
.mu-login::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, var(--mu-n-300) 1px, transparent 0); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%); }
.mu .mu-login__card { position: static; inline-size: 100%; max-inline-size: 27rem; margin-inline: auto; padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); border: 1px solid var(--mu-border); border-radius: var(--mu-r-xl); background: var(--mu-surface); box-shadow: var(--mu-shadow-3); text-align: start; }
.mu-login__head { display: grid; justify-items: center; gap: var(--mu-4); margin-block-end: var(--mu-6); padding-block-end: var(--mu-6); border-block-end: 1px solid var(--mu-border); text-align: center; }
.mu-login__logo { inline-size: 3.25rem; block-size: auto; }
.mu-login .mu-login__title { margin: 0; font-size: 1.375rem; font-weight: var(--mu-fw-extrabold); line-height: 1.5; color: var(--mu-text); opacity: 1; text-align: center; }
.mu-login__form { display: grid; gap: var(--mu-4); }
.mu-login__form > table > tbody > tr > td { display: grid; gap: var(--mu-4); }
.mu-login__form .mu-field { margin: 0; }
/* The code-behind always sets a placeholder equal to the visible label. */
.mu-login__form .mu-field .mu-input::placeholder { color: transparent; }
.mu-login__form :is(.mu-input, .mu-btn) { margin: 0; }
.mu-login__form .mu-btn--block { inline-size: 100%; }
.mu-login__links { display: flex; justify-content: center; margin: 0; }
.mu-login__links .mu-btn { --_fg: var(--mu-link); inline-size: auto; }
.mu-login__recover { display: grid; gap: var(--mu-3); padding: var(--mu-4); border: 1px solid var(--mu-border); border-radius: var(--mu-r-md); background: var(--mu-surface-sunken); }
.mu-login__status:has(> span:empty), .mu-login__status:empty { display: none; }
.mu-login__status > span { display: flex; align-items: flex-start; gap: var(--mu-3); padding: var(--mu-3) var(--mu-4); border: 1px solid var(--mu-info-border); border-radius: var(--mu-r-md); background: var(--mu-info-bg); color: var(--mu-text); font-size: .9375rem; font-weight: var(--mu-fw-medium); line-height: 1.8; }
.mu-login__status > span::before { content: ""; flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .2em; background-color: var(--mu-info); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.mu-login__register { margin: 0; padding-block-start: var(--mu-4); border-block-start: 1px solid var(--mu-border); text-align: center; font-size: var(--mu-fs-sm); }
.mu-login__register a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: var(--mu-fw-semibold); }

/* ---- Standalone pages (Completeinfo.aspx, RegisterComplete.aspx) -------------
   These pages have no master page: <body class="mu mu-standalone"> carries the
   design system and they load mehr-ui.css only (no Bootstrap, no scripts). */
.mu-standalone__bar { background: var(--mu-surface); border-block-end: 1px solid var(--mu-border); }
.mu-standalone__bar > .mu-container { display: flex; align-items: center; min-block-size: var(--mu-header-h); }

/* Long form: Completeinfo.aspx. One page, one postback target; cards group
   the fields, a two-column grid from 640px. Panels that only toggle
   visibility (.mu-ci__contents) do not interrupt the grid. */
.mu-ci { display: grid; gap: var(--mu-5); padding-block: clamp(1.5rem, 1rem + 3vw, 3.5rem) var(--mu-16); }
.mu-ci > * { min-inline-size: 0; }
.mu-ci__title { font-size: var(--mu-fs-h1); }
.mu-ci__notice .mu-alert__title { font-size: 1rem; line-height: 1.9; }
.mu-ci__status { display: block; padding: var(--mu-3) var(--mu-4); border: 1px solid var(--_bd, var(--mu-border)); border-inline-start-width: 4px; border-radius: var(--mu-r-md); background: var(--_bg, var(--mu-surface)); color: var(--mu-text); font-size: .9375rem; font-weight: var(--mu-fw-medium); line-height: 1.9; }
.mu-ci__status:empty { display: none; }
.mu-ci__status--info { --_bd: var(--mu-success-border); --_bg: var(--mu-success-bg); }
.mu-ci__status--todo { --_bd: var(--mu-warning-border); --_bg: var(--mu-warning-bg); }
.mu-ci__status--error { --_bd: var(--mu-danger-border); --_bg: var(--mu-danger-bg); color: var(--mu-danger); font-weight: var(--mu-fw-semibold); }
.mu-ci__office { display: grid; gap: var(--mu-5); }
.mu-ci__card { padding: clamp(1.125rem, .75rem + 2vw, 2rem); }
.mu-ci__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mu-5); }
.mu-ci__grid > *, .mu-ci__contents > * { min-inline-size: 0; }
.mu-ci__contents { display: contents; }
@media (min-width: 640px) {
  .mu-ci__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-ci__field--wide { grid-column: 1 / -1; }
}
.mu-ci__heading { display: flex; align-items: center; gap: var(--mu-3); margin-block-start: var(--mu-4); font-size: var(--mu-fs-h3); font-weight: var(--mu-fw-bold); line-height: var(--mu-lh-heading); color: var(--mu-text); }
.mu-ci__heading::before { content: ""; flex: none; inline-size: .375rem; block-size: 1.4em; border-radius: var(--mu-r-pill); background: var(--mu-green-500); }
.mu-ci .mu-label:empty { display: none; }
.mu-ci :is(.mu-input, .mu-select, .mu-textarea)[disabled] { background-color: var(--mu-surface-sunken) !important; color: var(--mu-text-muted); cursor: not-allowed; opacity: 1; }
.mu-ci input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.mu-ci input[type="number"]::-webkit-outer-spin-button, .mu-ci input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Server-side validation: Completeinfo.aspx.cs paints a rejected field with
   BackColor #FF6666 (an inline style). Shown here as a bordered error state
   with a mark on the label, so it does not depend on colour alone. */
.mu-ci :is(input, select, textarea):is([style*="FF6666" i], [style*="255, 102, 102"]) { background-color: var(--mu-danger-bg) !important; border-color: var(--mu-danger); box-shadow: 0 0 0 1px var(--mu-danger) inset; }
.mu-ci .mu-field:has(:is([style*="FF6666" i], [style*="255, 102, 102"])) > .mu-label { color: var(--mu-danger); }
.mu-ci .mu-field:has(:is([style*="FF6666" i], [style*="255, 102, 102"])) > .mu-label::after { content: "!"; display: inline-grid; place-items: center; inline-size: 1.125rem; block-size: 1.125rem; border-radius: 50%; background: var(--mu-danger); color: #fff; font-size: .75rem; font-weight: var(--mu-fw-bold); line-height: 1; }
.mu-ci__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mu-3); }
.mu-ci__actions .mu-btn--lg { min-inline-size: 10rem; }
@media (max-width: 479.98px) { .mu-ci__actions .mu-btn { flex: 1 1 100%; } }
.mu-ci__preview { display: block; max-inline-size: min(100%, 18.75rem); block-size: auto; border: 1px solid var(--mu-border); border-radius: var(--mu-r-md); background: var(--mu-surface-sunken); }

/* File input (asp:FileUpload) */
.mu-file { display: block; inline-size: 100%; min-block-size: var(--mu-control-h); padding: .375rem; border: 1px dashed var(--mu-border-control); border-radius: var(--mu-r-md); background: var(--mu-surface); color: var(--mu-text-2); font-size: var(--mu-fs-sm); line-height: 1.6; cursor: pointer; }
.mu-file::file-selector-button { margin-inline-end: var(--mu-3); min-block-size: 2.125rem; padding: .25rem .875rem; border: 1px solid var(--mu-border-strong); border-radius: var(--mu-r-sm); background: var(--mu-surface-sunken); color: var(--mu-text); font: inherit; font-weight: var(--mu-fw-semibold); cursor: pointer; }
.mu-file:hover::file-selector-button { background: var(--mu-surface-hover); }
.mu-file:focus-visible { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: var(--mu-focus-offset); }

/* Confirmation: RegisterComplete.aspx */
.mu-done { display: grid; place-items: center; min-block-size: calc(100vh - var(--mu-header-h)); padding-block: var(--mu-12); }
.mu-done__card { align-items: center; gap: var(--mu-5); inline-size: 100%; padding: clamp(1.5rem, 1rem + 4vw, 3.5rem); text-align: center; box-shadow: var(--mu-shadow-2); }
.mu-done__icon { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: 50%; background: var(--mu-success-bg); color: var(--mu-success); font-size: 1.5rem; }
.mu-done__title { font-size: var(--mu-fs-h2); }
.mu-done__link { white-space: normal; min-block-size: 3rem; line-height: 1.7; }

/* ---- API entry (Content/api.aspx) ---------------------------------------------
   Compatibility page for {lang}/مستندات-وب-سرویس: one link to the Developer
   Portal (/docs/) and the existing service links filled in by api.aspx.cs.
   The documentation itself is not styled here; the portal has its own CSS. */
.mu-apilinks__portal { display: flex; align-items: center; gap: var(--mu-4); padding: clamp(1rem, .75rem + 1.5vw, 1.75rem); border-radius: var(--mu-r-lg); background: var(--mu-ink); color: var(--mu-text-on-ink) !important; transition: background-color var(--mu-dur-1) var(--mu-ease); }
.mu-apilinks__portal:hover { background: var(--mu-ink-raised); }
.mu-apilinks__portal:focus-visible { outline-color: var(--mu-focus); }
.mu-apilinks__portal-icon { display: grid; place-items: center; flex: none; inline-size: 3rem; block-size: 3rem; border-radius: var(--mu-r-md); background: var(--mu-green-500); color: var(--mu-n-950); }
.mu-apilinks__portal-text { display: grid; gap: var(--mu-1); flex: 1; min-inline-size: 0; }
.mu-apilinks__portal-text strong { font-size: 1.1875rem; font-weight: var(--mu-fw-extrabold); line-height: var(--mu-lh-snug); color: #fff; }
.mu-apilinks__portal-text span { font-size: var(--mu-fs-sm); line-height: 1.8; color: var(--mu-text-on-ink-muted); }
.mu-apilinks__portal > .mu-icon:last-child { color: var(--mu-accent-on-ink); }
.mu-apilinks__grid { display: grid; gap: var(--mu-4); margin-block-start: var(--mu-6); align-items: start; }
@media (min-width: 768px) { .mu-apilinks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-5); } }
.mu-apilinks__group { padding: var(--mu-5); gap: var(--mu-3); }
.mu-apilinks__title { font-size: 1.0625rem; font-weight: var(--mu-fw-bold); text-align: start; unicode-bidi: plaintext; display: block; }
.mu-apilinks__title > span { display: inline; font-size: inherit; font-weight: inherit; color: inherit; }
.mu-apilinks__list { display: grid; }
.mu-apilinks__list > li { display: grid; gap: 0; padding-block: var(--mu-2); border-block-start: 1px solid var(--mu-border); min-inline-size: 0; }
.mu-apilinks__link { display: inline-flex; align-items: center; min-block-size: 2.5rem; font-weight: var(--mu-fw-semibold); }
.mu-apilinks__url { display: block; font-family: var(--mu-font-mono); font-size: var(--mu-fs-xs); line-height: 1.7; color: var(--mu-text-muted); text-align: right; overflow-wrap: anywhere; }

/* ---- Home, competitive pass (2026-10-09) -----------------------------------------
   Three static blocks added to Default.aspx around the product rails:
   .mu-home > div.mu-home__intro          eyebrow, h2, lead, two actions, ul.mu-home__caps (six link cards)
            > section.mu-home__dev        .mu-split--even: text column | .mu-code sample
            > section.mu-home__customers  ul.mu-logo-grid--wall.mu-home__logos (eight cards) + link to the full list
   Built from existing parts (.mu-section__head, .mu-eyebrow, .mu-card--link, .mu-more, .mu-code, .mu-badge,
   .mu-logo-card); only the composition is new. Placed after the Customers block on purpose: the logo grid
   below overrides its column steps. */
.mu-home__intro { padding-block: calc(var(--mu-section-y) * .75) calc(var(--mu-section-y) * .35); }
.mu-home__intro .mu-section__head { align-items: center; }
.mu-home__caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mu-3); }
.mu-home__cap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: var(--mu-1) var(--mu-4); padding: var(--mu-5); }
.mu-home__cap-icon { grid-row: 1 / span 3; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--mu-r-md); background: var(--mu-primary-soft); color: var(--mu-green-700); }
.mu-home__cap > :is(h3, p, .mu-more) { grid-column: 2; }
.mu-home__cap > h3 { font-size: 1.0625rem; line-height: var(--mu-lh-snug); }
.mu-home__cap > p { color: var(--mu-text-muted); font-size: .9375rem; line-height: 1.85; }
.mu-home__cap > .mu-more { margin-block-start: var(--mu-2); justify-self: start; }
/* Phones: compact tiles, two per row (icon + title). The sentence and the "more" line return from 640px. */
@media (max-width: 639.98px) {
  .mu-home__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-2); }
  .mu-home__cap { align-items: center; gap: var(--mu-3); padding: var(--mu-3); border-radius: var(--mu-r-md); min-block-size: 4.5rem; }
  .mu-home__cap-icon { grid-row: auto; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--mu-r-sm); }
  .mu-home__cap > h3 { font-size: .9375rem; }
  .mu-home__cap > :is(p, .mu-more) { display: none; }
}
@media (max-width: 479.98px) {
  .mu-home__intro .mu-section__actions { inline-size: 100%; }
  .mu-home__intro .mu-section__actions > .mu-btn { flex: 1 1 0; min-inline-size: 0; padding-inline: var(--mu-3); }
}
@media (min-width: 640px) { .mu-home__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-4); } }
@media (min-width: 1024px) { .mu-home__caps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mu-5); } }

.mu-home__dev-layout { align-items: center; }
.mu-home__dev-text { display: grid; gap: var(--mu-4); justify-items: start; min-inline-size: 0; }
.mu-home__dev-tags { display: flex; flex-wrap: wrap; gap: var(--mu-2); }
.mu-home__dev-tags .mu-badge { min-block-size: 2rem; color: var(--mu-text-2); transition: border-color var(--mu-dur-1) var(--mu-ease), background-color var(--mu-dur-1) var(--mu-ease); }
.mu-home__dev-tags .mu-badge:hover { border-color: var(--mu-border-strong); background: var(--mu-surface-hover); color: var(--mu-text); }
.mu-home__dev-sample { display: grid; gap: var(--mu-3); min-inline-size: 0; }
.mu-home__dev-sample .mu-code__bar { direction: ltr; }
/* Bootstrap's normalize makes <pre> its own scroller; here the labelled, focusable body scrolls instead. */
.mu-home__dev-sample .mu-code__body { max-block-size: 24rem; }
.mu-home__dev-sample .mu-code pre { overflow: visible; inline-size: max-content; min-inline-size: 100%; }

.mu-home__customers { border-block-start: 1px solid var(--mu-border); }
.mu-home__customers .mu-section__head { align-items: center; }
.mu-home__customers a.mu-more { min-block-size: 2.75rem; }
/* The well has a fixed height: give its single grid row that height so the logo's max-block-size
   resolves and a square logo is scaled down to fit instead of running under the name. */
.mu-home__logos .mu-logo-card__mark { grid-template-rows: minmax(0, 1fr); }
.mu-logo-grid.mu-home__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-3); }
@media (min-width: 768px) { .mu-logo-grid.mu-home__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mu-4); } }

/* ---- Home, owner-confirmed capabilities (2026-10-09) ------------------------------
   Inside div.mu-home__intro, in this order:
     p.mu-home__uptime        one compact figure under the lead (no new section)
     ul.mu-home__feats        three link cards: verification code (OTP), service SMS to the advertising
                              blacklist, brand-name sending. Tinted so they read as service capabilities,
                              not as the six web-service operations below. Their text stays visible on
                              phones: the second card's scope ("service line only") must never be hidden.
     p.mu-home__caps-label    label of the six operation cards
   Same parts as the block above (.mu-card--link, .mu-more); only the composition is new. */
.mu-home__uptime { display: inline-flex; align-items: center; gap: var(--mu-2); justify-self: start; min-block-size: 2.25rem; margin-block-start: var(--mu-2); padding: var(--mu-1) var(--mu-4); border: 1px solid var(--mu-primary-soft-border); border-radius: var(--mu-r-pill); background: var(--mu-primary-soft); color: var(--mu-green-800); font-size: var(--mu-fs-sm); font-weight: var(--mu-fw-medium); line-height: var(--mu-lh-ui); }
.mu-home__uptime .mu-icon { flex: none; inline-size: 1.125rem; block-size: 1.125rem; }
.mu-home__uptime strong { font-size: 1.0625rem; font-weight: var(--mu-fw-bold); color: var(--mu-green-900); }

.mu-home__feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mu-3); margin-block-end: var(--mu-8); }
.mu-home__feat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: var(--mu-1) var(--mu-4); padding: var(--mu-5); border-color: var(--mu-primary-soft-border); background: var(--mu-primary-soft); }
.mu-home__feat.mu-card--link:hover { border-color: var(--mu-green-300); }
.mu-home__feat-icon { grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--mu-primary-soft-border); border-radius: var(--mu-r-md); background: var(--mu-surface); color: var(--mu-green-700); }
.mu-home__feat > :is(h3, p, .mu-more) { grid-column: 2; }
.mu-home__feat > h3 { font-size: 1.0625rem; line-height: var(--mu-lh-snug); }
.mu-home__feat > p { color: var(--mu-text-2); font-size: .9375rem; line-height: 1.85; }
.mu-home__feat > .mu-more { margin-block-start: var(--mu-2); justify-self: start; align-self: end; color: var(--mu-green-800); }
@media (max-width: 639.98px) {
  .mu-home__feats { margin-block-end: var(--mu-6); }
  .mu-home__feat { gap: var(--mu-1) var(--mu-3); padding: var(--mu-4); border-radius: var(--mu-r-md); }
  .mu-home__feat-icon { inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--mu-r-sm); }
  .mu-home__feat > h3 { font-size: 1rem; }
  .mu-home__feat > p { font-size: var(--mu-fs-sm); line-height: 1.8; }
}
@media (min-width: 1024px) { .mu-home__feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mu-5); } }
/* Three narrow columns: the icon sits above the text so the descriptions keep a readable measure. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .mu-home__feat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .mu-home__feat-icon { grid-row: auto; margin-block-end: var(--mu-2); }
  .mu-home__feat > :is(h3, p, .mu-more) { grid-column: 1; }
}

.mu-home__caps-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mu-1) var(--mu-3); margin-block-end: var(--mu-4); color: var(--mu-text-muted); font-size: var(--mu-fs-sm); line-height: var(--mu-lh-snug); }
.mu-home__caps-label strong { color: var(--mu-text); font-size: var(--mu-fs-body); font-weight: var(--mu-fw-semibold); }
@media (max-width: 639.98px) { .mu-home__caps-label > span { display: none; } }