/* MartGain Phase 4 extension. Every visual role comes from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--surface); font-family: var(--font-sans); margin: 0; }
[dir="rtl"] body, [dir="rtl"] .mg-header, [dir="rtl"] .mg-footer { font-family: var(--font-arabic); }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:where(a, button, input, select, textarea, summary, [role="tab"], [tabindex]):focus-visible {
  outline: var(--mg-focus-width) solid var(--focus);
  outline-offset: var(--mg-focus-offset);
}
[hidden] { display: none !important; }
.mg-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.mg-section { padding-block: var(--space-16); }
.mg-flow > * + * { margin-block-start: var(--space-4); }
.mg-muted { color: var(--ink-muted); }
.mg-inline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.mg-field { display: grid; gap: var(--space-2); min-width: 0; }
.mg-field label, .mg-field legend { font-weight: 700; }
.mg-input { min-height: var(--tap-min); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); border: var(--hairline) solid var(--line-strong); font: inherit; min-width: 0; }
.mg-field select { cursor: pointer; }
.mg-hint { color: var(--ink-muted); }
.mg-field:has([aria-invalid="true"]) .mg-hint { color: var(--danger); }
.mg-link { background: transparent; padding: var(--space-2) 0; min-height: var(--tap-min); display: inline-flex; align-items: center; color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--space-1); font: inherit; cursor: pointer; }
.mg-btn { min-height: var(--tap-min); padding: var(--space-3) var(--space-6); border: var(--hairline) solid transparent; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: none; transition: background var(--mg-animation-duration), color var(--mg-animation-duration); }
.mg-btn-primary { background: var(--accent); color: var(--on-accent); }
.mg-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.mg-btn-ghost { background: transparent; color: var(--ink); }
.mg-btn:disabled, .mg-btn[aria-disabled="true"] { opacity: .54; cursor: not-allowed; }
.mg-card { background: var(--surface-raised); padding: var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); }
.mg-state { padding: var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.mg-state[data-tone="error"] { border-inline-start: var(--mg-focus-width) solid var(--danger); }
.mg-state[data-tone="success"] { border-inline-start: var(--mg-focus-width) solid var(--accent-ink); }
.mg-acc-item { border-block-end: var(--hairline) solid var(--line); }
.mg-acc-item summary { min-height: var(--tap-min); padding-block: var(--space-3); cursor: pointer; font-weight: 700; }
.mg-acc-item p { margin: 0 0 var(--space-4); }
.mg-stat { container-type: inline-size; display: grid; gap: var(--space-2); }
.mg-stat .numeral { font-size: clamp(var(--mg-type-wordmark), 24cqi, var(--mg-type-numeral)); color: var(--accent-ink); display: block; }
.mg-price { display: grid; gap: var(--space-2); }
.mg-price-main { font-weight: 700; font-size: var(--mg-type-subheading); }
.mg-wa { display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--tap-min); padding: var(--space-2) var(--space-4); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; }
.mg-icon { width: var(--space-6); height: var(--space-6); flex: none; }
.mg-control { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); cursor: pointer; }
.mg-control input { width: var(--space-4); height: var(--space-4); accent-color: var(--accent-ink); }
.mg-addon-row { justify-content: space-between; border-block-end: var(--hairline) solid var(--line); }
.mg-tabs { display: grid; gap: var(--space-4); }
.mg-tablist { display: flex; flex-wrap: wrap; gap: var(--space-2); border-block-end: var(--hairline) solid var(--line); }
.mg-tablist [role="tab"] { min-height: var(--tap-min); border: 0; border-block-end: var(--mg-focus-width) solid transparent; background: none; color: var(--ink-muted); cursor: pointer; font: inherit; padding: var(--space-3); }
.mg-tablist [role="tab"][aria-selected="true"] { color: var(--accent-ink); border-block-end-color: var(--focus); }
.mg-tabs [role="tabpanel"] { padding-block: var(--space-4); }
.mg-table-wrap { max-width: 100%; overflow-x: auto; }
.mg-table { border-collapse: collapse; width: 100%; text-align: start; min-width: calc(var(--space-12) * 10); }
.mg-table caption { padding-block: var(--space-3); text-align: start; }
.mg-table :is(td,th) { border-block-end: var(--hairline) solid var(--line); text-align: start; padding: var(--space-3); }
.mg-code { margin: 0; }
.mg-code figcaption, .mg-screenshot figcaption { font-size: var(--mg-type-small); color: var(--ink-muted); padding-block: var(--space-2); }
.mg-code pre { direction: ltr; text-align: start; max-width: 100%; overflow-x: auto; background: var(--surface-raised); border-radius: var(--radius-sm); padding: var(--space-4); }
.mg-code code { color: var(--ink); unicode-bidi: plaintext; direction: ltr; }
.mg-screenshot { margin: 0; }
.mg-screenshot img { display: block; border-radius: var(--radius-md); border: var(--hairline) solid var(--line); }
.mg-article-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--mg-type-small); color: var(--ink-muted); }
.mg-header { flex-wrap: wrap; min-height: var(--mg-header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-block-end: var(--hairline) solid var(--line); }
.mg-logo { display: inline-flex; align-items: center; padding-inline: var(--space-2); }
.mg-logo img { width: var(--mg-logo-width); height: auto; }
[data-theme="dark"] .mg-logo-light, [data-theme="light"] .mg-logo-dark { display: none; }
.mg-header-links { flex-wrap: wrap; display: flex; gap: var(--space-4); align-items: center; }
.mg-header-links a { min-height: var(--tap-min); display: inline-flex; align-items: center; text-decoration: none; }
.mg-icon-btn { min-height: var(--tap-min); min-width: var(--tap-min); background: transparent; border: var(--hairline) solid var(--line-strong); color: var(--ink); cursor: pointer; border-radius: var(--radius-sm); }
.mg-mobile-only { display: none; }
.mg-menu-trigger { border: 0; gap: var(--space-1); }
.mg-menu-group { position: relative; }
.mg-mega { position: absolute; z-index: 30; inset-inline-start: 0; min-width: min(85vw, var(--container-max)); background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); }
.mg-mega-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit,minmax(calc(var(--space-12) * 3 + var(--space-8) + var(--space-1)),1fr)); }
.mg-mega-grid section { display: flex; flex-direction: column; }
.mg-mega-grid a { display: inline-flex; min-height: var(--tap-min); align-items: center; }
.mg-mobile-nav { background: var(--surface-raised); padding: var(--space-4); border-block-end: var(--hairline) solid var(--line); }
.mg-mobile-nav ul { margin: 0; list-style: none; padding: 0; }
.mg-mobile-nav a { display: flex; align-items: center; min-height: var(--tap-min); text-decoration: none; border-block-end: var(--hairline) solid var(--line); }
.mg-language-switch { display: flex; align-items: center; gap: var(--space-3); }
.mg-language-switch a { min-height: var(--tap-min); display: inline-flex; align-items: center; }
.mg-language-switch [aria-current="page"] { color: var(--accent-ink); font-weight: 700; }
.mg-search { max-width: var(--measure); display: grid; gap: var(--space-2); }
.mg-search .mg-inline .mg-input { flex: 1; }
.mg-footer { border-block-start: var(--hairline) solid var(--line); padding-block: var(--space-16); }
.mg-footer-columns { display: grid; grid-template-columns: repeat(auto-fit,minmax(calc(var(--space-12) * 3 + var(--space-8) + var(--space-1)),1fr)); gap: var(--space-8); }
.mg-footer a { min-height: var(--tap-min); display: flex; align-items: center; }
.mg-consent { position: fixed; inset-inline: var(--space-4); bottom: var(--space-4); z-index: 100; max-width: var(--measure); margin-inline: auto; padding: var(--space-6); border-radius: var(--radius-md); border: var(--hairline) solid var(--line-strong); background: var(--surface-raised); color: var(--ink); }
.mg-consent p { margin-block-start: 0; }
.mg-skip-link { position: absolute; transform: translateY(-200%); background: var(--surface); color: var(--ink); padding: var(--space-4); z-index: 999; }
.mg-skip-link:focus { transform: translateY(0); }
.mg-demo-control { min-height: var(--tap-min); }
.mg-demo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(calc(var(--space-12) * 5),1fr)); gap: var(--space-4); }
@media (min-width: 769px) { .mg-container { padding-inline: var(--space-12); } .mg-section { padding-block: var(--space-24); } }
@media (max-width: 768px) { .mg-mobile-only { display: inline-flex; align-items: center; justify-content: center; } .mg-header-links { display:none; } .mg-header { flex-wrap: wrap; } .display-xl { font-size: var(--mg-type-hero-mobile); } .display { font-size: var(--mg-type-display-mobile); } .h1 { font-size: var(--mg-type-h1-mobile); } .mg-mega { position: static; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }