/* NomiDar public landing page — warm-paper light theme with hand-authored
   dark-mode tokens (the source design was light-only). */
html,
body,
#app {
    min-height: 100%;
    overflow-y: auto !important;
    scroll-behavior: smooth;
}

.mud-layout,
.mud-main-content {
    min-height: 100dvh;
    overflow: visible !important;
}

.mw-landing {
    /* Light (default) */
    --mw-page: #faf9f7;
    --mw-ink: #1b1a19;
    --mw-muted: #5d5852;
    --mw-muted-2: #6e6862;
    --mw-line: #e7e3dd;
    --mw-line-strong: #ded8d0;
    --mw-surface-hover: #f4f1ec;
    --mw-chip-hover: #f0ece6;
    --mw-accent: #8a1538;
    --mw-accent-bright: #a92049;
    --mw-accent-soft: rgba(138, 21, 56, .09);
    --mw-accent-soft-strong: rgba(138, 21, 56, .5);
    --mw-teal: #0d8d7d;
    --mw-teal-bright: #2ac3a8;
    --mw-teal-ink: #8be8d8;
    --mw-teal-ink-soft: #7fe0d0;
    --mw-teal-node: #63d9c5;
    --mw-dark-bg: #1a1918;
    --mw-dark-ink: #f5f4f2;
    --mw-dark-muted: rgba(245, 244, 242, .62);
    --mw-dark-line: rgba(255, 255, 255, .12);
    --mw-shadow: 0 28px 70px rgba(26, 25, 24, .14);
    min-height: 100dvh;
    width: 100%;
    color: var(--mw-ink);
    background: var(--mw-page);
    font-family: "IBM Plex Sans", "Tajawal", system-ui, sans-serif !important;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}

html.mud-dark .mw-landing {
    --mw-page: #121110;
    --mw-ink: #f5f4f2;
    --mw-muted: rgba(245, 244, 242, .66);
    --mw-muted-2: rgba(245, 244, 242, .54);
    --mw-line: rgba(255, 255, 255, .1);
    --mw-line-strong: rgba(255, 255, 255, .16);
    --mw-surface-hover: #1c1b1a;
    --mw-chip-hover: #201f1e;
    --mw-accent: #b8285a;
    --mw-accent-bright: #cf3868;
    --mw-accent-soft: rgba(184, 40, 90, .16);
    --mw-accent-soft-strong: rgba(184, 40, 90, .6);
    --mw-dark-bg: #0c0b0a;
    --mw-shadow: 0 28px 70px rgba(0, 0, 0, .5);
}

.mw-landing[dir="rtl"] {
    /* Zain is used for display headings only (see per-heading .mw-landing[dir="rtl"] rules
       below) — its Arabic-Indic digit glyphs render as Western digit shapes, so it must not
       be the base body font or every number on the page (times, ref codes, counts) is wrong. */
    font-family: "Tajawal", system-ui, sans-serif !important;
}

/* The app-wide stylesheet forces a single font on every element per direction via
   `html[dir] * { font-family: … !important }` (NomiDar.styles.css). That rule predates
   this page and isn't something to touch here, so every font choice below — including this
   reassertion of the two base fonts — has to out-specify AND out-important it: two classes
   plus the dir attribute (.mw-landing[dir] *) beats its one type selector plus attribute
   (html[dir] *). Every subsequent exception (Zain headings, IBM Plex Mono kickers/codes)
   must in turn be at least as specific as this rule, with !important, to still apply. */
.mw-landing[dir="ltr"] * {
    font-family: "IBM Plex Sans", "Tajawal", system-ui, sans-serif !important;
}

.mw-landing[dir="rtl"] * {
    font-family: "Tajawal", system-ui, sans-serif !important;
}

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

.mw-landing button,
.mw-landing a {
    font: inherit;
}

.mw-landing button {
    border: 0;
}

.mw-landing a {
    color: inherit;
    text-decoration: none;
}

.mw-landing :where(a, button):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mw-accent) 65%, white);
    outline-offset: 3px;
    border-radius: 10px;
}

.mw-wrap {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
    position: relative;
}

/* ══════════════════════════════════════════════════════════════════════
   Redesigned landing page (governance-first brief).
   Everything above this line — scroll shell, colour tokens, font rules,
   focus ring, .mw-wrap — is the original base and is kept as-is.
   ══════════════════════════════════════════════════════════════════════ */

.mw-landing {
    --mw-surface: #ffffff;
    --mw-tint: #f3f0eb;
    --mw-teal-text: #0a6b60;
    --mw-teal-soft: rgba(13, 141, 125, .1);
    --mw-shot-canvas: #ffffff;
    --mw-ease: cubic-bezier(.2, .65, .2, 1);
    --mw-hover: 160ms ease;
    --mw-radius: 18px;
    --mw-card-shadow: 0 1px 2px rgba(26, 25, 24, .04), 0 10px 28px rgba(26, 25, 24, .05);
    --mw-card-shadow-hover: 0 2px 4px rgba(26, 25, 24, .05), 0 16px 36px rgba(26, 25, 24, .09);
    --mw-bezel: #1a1918;
    --mw-shadow-tight: 0 12px 28px rgba(26, 25, 24, .12);
}

html.mud-dark .mw-landing {
    --mw-surface: #1a1918;
    --mw-tint: #161514;
    --mw-teal-text: #63d9c5;
    --mw-teal-soft: rgba(42, 195, 168, .14);
    --mw-shot-canvas: #121110;
    --mw-card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .25);
    --mw-card-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .4);
    --mw-bezel: #2a2826;
    --mw-shadow-tight: 0 12px 28px rgba(0, 0, 0, .45);
}

.mw-landing img,
.mw-landing video {
    max-width: 100%;
}

.mw-landing :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) {
    margin: 0;
}

.mw-landing :is(ul, ol) {
    padding: 0;
    list-style: none;
}

.mw-landing :is(h1, h2, h3, h4) {
    overflow-wrap: break-word;
}

/* Arabic display headings use Zain; must out-rank `.mw-landing[dir="rtl"] *` in the base block. */
.mw-landing[dir="rtl"] :is(.mw-hero-title, .mw-section-title, .mw-final h2) {
    font-family: "Zain", sans-serif !important;
}

/* Small uppercase labels use IBM Plex Mono in English only. */
.mw-landing[dir="ltr"] :is(.mw-kicker, .mw-label, .mw-sample-badge, .mw-tender-no, .mw-device-url, .mw-frame-label) {
    font-family: "IBM Plex Mono", monospace !important;
}

.mw-skip {
    position: absolute;
    inset-inline-start: 16px;
    inset-block-start: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--mw-accent);
    color: #fff !important;
    font-weight: 600;
    transition: inset-block-start var(--mw-hover);
}

.mw-skip:focus {
    inset-block-start: 12px;
}

#main:focus {
    outline: none;
}

/* The router's FocusOnNavigate moves focus to the headline on every load; the heading is outside the
   tab order, so its ring tells a keyboard user nothing and only frames the hero. Focus itself stays for
   screen readers (the same rule as the sign-in pages' titles in auth.css). */
.mw-hero-title:focus,
.mw-hero-title:focus-visible {
    outline: none;
}

/* ── Buttons & links ───────────────────────────────────────────────── */
.mw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--mw-hover), border-color var(--mw-hover), color var(--mw-hover),
                box-shadow var(--mw-hover), transform var(--mw-hover);
}

.mw-landing[dir="rtl"] .mw-btn {
    font-size: 15px;
}

.mw-btn:hover {
    transform: translateY(-1px);
}

.mw-btn-large {
    min-height: 50px;
    padding: 0 24px;
    font-size: 15px;
}

.mw-landing[dir="rtl"] .mw-btn-large {
    font-size: 16px;
}

.mw-btn-primary {
    background: var(--mw-accent);
    color: #fff !important;
    box-shadow: 0 6px 18px var(--mw-accent-soft);
}

.mw-btn-primary:hover {
    background: var(--mw-accent-bright);
    box-shadow: 0 10px 24px var(--mw-accent-soft);
}

.mw-btn-quiet {
    border-color: var(--mw-line-strong);
    background: var(--mw-surface);
    color: var(--mw-ink);
}

.mw-btn-quiet:hover {
    border-color: var(--mw-ink);
    background: var(--mw-surface-hover);
}

.mw-btn-white {
    background: #fff;
    color: #1b1a19 !important;
}

.mw-btn-white:hover {
    background: #f4f1ec;
}

.mw-btn-outline {
    border-color: rgba(255, 255, 255, .45);
    color: #fff !important;
}

.mw-btn-outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
}

.mw-arrow {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
}

.mw-landing[dir="rtl"] .mw-arrow {
    transform: rotate(-45deg);
}

.mw-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mw-accent) !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-color: transparent !important;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--mw-hover), color var(--mw-hover);
}

.mw-text-link:hover {
    text-decoration-color: currentColor !important;
}

.mw-icon-button {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--mw-line) !important;
    border-radius: 12px;
    background: var(--mw-surface);
    color: var(--mw-ink);
    cursor: pointer;
    transition: background-color var(--mw-hover), border-color var(--mw-hover);
}

.mw-icon-button:hover {
    border-color: var(--mw-line-strong) !important;
    background: var(--mw-surface-hover);
}

.mw-language-button {
    font-size: 14px;
    font-weight: 700;
}

/* ── Status & sample-data labels ───────────────────────────────────── */
.mw-sample-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--mw-line-strong);
    border-radius: 999px;
    background: var(--mw-surface);
    color: var(--mw-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mw-landing[dir="rtl"] .mw-sample-badge {
    font-size: 12px;
    letter-spacing: 0;
}

.mw-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mw-teal-soft);
    color: var(--mw-teal-text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.mw-landing[dir="rtl"] .mw-status {
    font-size: 13px;
}

.mw-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mw-teal);
}

/* ── Top bar & navigation ──────────────────────────────────────────── */
.mw-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    border-block-end: 1px solid var(--mw-line);
    background: color-mix(in srgb, var(--mw-page) 88%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
}

.mw-topbar-inner {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.mw-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
}

.mw-landing .mw-logo {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: var(--mw-accent);
    color: #fff;
    font-family: "Zain", sans-serif !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.mw-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.mw-brand-title {
    color: var(--mw-ink);
    font-size: 16px;
    font-weight: 700;
}

.mw-brand-sub {
    color: var(--mw-muted-2);
    font-size: 11.5px;
}

.mw-landing[dir="rtl"] .mw-brand-sub {
    font-size: 12.5px;
}

.mw-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.mw-nav-links {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.mw-nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--mw-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--mw-hover), color var(--mw-hover);
}

.mw-landing[dir="rtl"] .mw-nav-links a {
    font-size: 15px;
}

.mw-nav-links a:hover {
    background: var(--mw-chip-hover);
    color: var(--mw-ink);
}

.mw-nav-menu-actions,
.mw-menu-button {
    display: none;
}

.mw-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.mw-signin {
    padding-inline: 8px;
    color: var(--mw-ink) !important;
    font-size: 14px;
    font-weight: 600;
}

.mw-menu-icon {
    position: relative;
    width: 16px;
    height: 12px;
}

.mw-menu-icon i {
    position: absolute;
    inset-inline: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 200ms ease, inset-block-start 200ms ease;
}

.mw-menu-icon i:first-child {
    inset-block-start: 2px;
}

.mw-menu-icon i:last-child {
    inset-block-start: 8px;
}

.mw-menu-icon[data-open="true"] i:first-child {
    inset-block-start: 5px;
    transform: rotate(45deg);
}

.mw-menu-icon[data-open="true"] i:last-child {
    inset-block-start: 5px;
    transform: rotate(-45deg);
}

/* ── Shared section scaffolding ────────────────────────────────────── */
.mw-section {
    padding-block: 96px;
    scroll-margin-block-start: 68px;
}

.mw-section-tinted {
    background: var(--mw-tint);
    border-block: 1px solid var(--mw-line);
}

.mw-section-heading {
    max-width: 700px;
}

.mw-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--mw-accent);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mw-landing[dir="rtl"] .mw-kicker {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

.mw-kicker i {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.mw-section-title {
    margin-block-start: 14px !important;
    color: var(--mw-ink);
    font-size: clamp(1.75rem, 2.6vw, 2.45rem);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.16;
    text-wrap: balance;
}

.mw-landing[dir="rtl"] .mw-section-title {
    font-size: clamp(1.95rem, 3vw, 2.7rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.32;
}

.mw-section-text {
    margin-block-start: 14px !important;
    max-width: 620px;
    color: var(--mw-muted);
    font-size: 16px;
    line-height: 1.7;
}

.mw-landing[dir="rtl"] .mw-section-text {
    font-size: 17.5px;
    line-height: 1.9;
}

.mw-card {
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius);
    background: var(--mw-surface);
    box-shadow: var(--mw-card-shadow);
}

.mw-card:hover {
    border-color: var(--mw-line-strong);
    box-shadow: var(--mw-card-shadow-hover);
    transform: translateY(-2px);
}

.mw-label {
    color: var(--mw-accent);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mw-landing[dir="rtl"] .mw-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.mw-checklist {
    display: grid;
    gap: 10px;
}

.mw-checklist li {
    position: relative;
    padding-inline-start: 26px;
    color: var(--mw-ink);
    font-size: 14.5px;
    line-height: 1.6;
}

.mw-landing[dir="rtl"] .mw-checklist li {
    font-size: 16px;
    line-height: 1.75;
}

/* Teal tick: a small rotated L drawn with borders. */
.mw-checklist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    inset-block-start: .42em;
    width: 12px;
    height: 7px;
    /* Physical borders on purpose: a tick reads the same in both directions. */
    border-left: 2px solid var(--mw-teal);
    border-bottom: 2px solid var(--mw-teal);
    transform: rotate(-45deg);
}

/* ── Product screenshots (shown whole: no crop, no zoom, no overlays) ── */
.mw-device,
.mw-shot {
    border: 1px solid var(--mw-line-strong);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mw-shot-canvas);
    box-shadow: 0 22px 56px rgba(27, 26, 25, .13);
}

html.mud-dark .mw-landing :is(.mw-device, .mw-shot) {
    box-shadow: 0 22px 56px rgba(0, 0, 0, .45);
}

.mw-device-bar,
.mw-shot-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 6px 14px;
    border-block-end: 1px solid var(--mw-line);
    background: var(--mw-surface-hover);
}

.mw-device-dots {
    display: inline-flex;
    gap: 6px;
}

.mw-device-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mw-line-strong);
}

.mw-device-url {
    color: var(--mw-muted-2);
    font-size: 11.5px;
    direction: ltr;
}

.mw-device-bar .mw-sample-badge,
.mw-shot-bar .mw-sample-badge {
    margin-inline-start: auto;
}

.mw-device img,
.mw-shot img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Wide captures scroll sideways inside their own frame on narrow screens; the page never does. */
.mw-shot-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.mw-shot-scroll:focus-visible {
    outline: 2px solid var(--mw-accent);
    outline-offset: -2px;
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.mw-hero {
    padding-block: 72px 40px;
}

.mw-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 56px;
    align-items: center;
}

.mw-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mw-hero-title {
    color: var(--mw-ink);
    font-size: clamp(2.3rem, 4.4vw, 3.6rem);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.06;
    text-wrap: balance;
}

.mw-landing[dir="rtl"] .mw-hero-title {
    font-size: clamp(2.4rem, 4.2vw, 3.35rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
}

.mw-lead {
    display: grid;
    gap: 12px;
    max-width: 580px;
    color: var(--mw-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* First paragraph says what the platform does and who it is for, so it leads visually. */
.mw-lead p:first-child {
    color: var(--mw-ink);
}

.mw-landing[dir="rtl"] .mw-lead {
    font-size: 19px;
    line-height: 1.9;
}

.mw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 6px;
}

.mw-hero-preview {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.mw-decision {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--mw-line);
    border-radius: 16px;
    background: var(--mw-surface);
    box-shadow: var(--mw-card-shadow);
}

.mw-decision-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mw-decision .mw-shot-scroll {
    border: 1px solid var(--mw-line);
    border-radius: 10px;
    background: var(--mw-shot-canvas);
}

.mw-decision img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.mw-decision p {
    color: var(--mw-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.mw-landing[dir="rtl"] .mw-decision p {
    font-size: 15px;
    line-height: 1.8;
}

.mw-hero-preview figcaption {
    color: var(--mw-muted-2);
    font-size: 12.5px;
    text-align: center;
}

.mw-landing[dir="rtl"] .mw-hero-preview figcaption {
    font-size: 14px;
}

/* ── Capabilities (#capabilities) ──────────────────────────────────── */
/* Seven cards on four columns: the ICV card spans two, so the grid fills two full rows (and, on two
   columns, one full row plus three pairs). */
.mw-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-block-start: 40px !important;
}

/* Each card spans three rows of the grid (label, title, body) through a subgrid, so the titles and the
   texts of the cards in one row start on the same line even where a title wraps. */
.mw-capability {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 8px;
    align-content: start;
    padding: 24px;
}

.mw-capability-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-capability-wide {
    grid-column: span 2;
}

.mw-capability-tag {
    color: var(--mw-accent);
    font-size: 12px;
    font-weight: 600;
}

.mw-landing[dir="rtl"] .mw-capability-tag {
    font-size: 13.5px;
    font-weight: 700;
}

.mw-capability h3 {
    color: var(--mw-ink);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
    text-wrap: balance;
}

.mw-landing[dir="rtl"] .mw-capability h3 {
    font-size: 19px;
    font-weight: 700;
}

.mw-capability-text {
    color: var(--mw-muted);
    font-size: 14.5px;
    line-height: 1.65;
    text-wrap: pretty;
}

.mw-landing[dir="rtl"] .mw-capability-text {
    font-size: 16px;
    line-height: 1.85;
}

.mw-capability .mw-checklist {
    margin-block-start: 6px !important;
}

/* A setup step the feature needs before it is on, pinned to the foot of its card. */
.mw-capability-note {
    margin-block-start: auto !important;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--mw-line);
    color: var(--mw-teal-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    text-wrap: pretty;
}

.mw-landing[dir="rtl"] .mw-capability-note {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.75;
}

/* ── Pillars & controls (#governance) ──────────────────────────────── */
.mw-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-block-start: 44px !important;
}

.mw-pillar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 28px;
    overflow: hidden;
}

.mw-pillar > :not(.mw-art) {
    margin-inline: 26px !important;
}

.mw-pillar h3 {
    margin-block-start: 14px !important;
    color: var(--mw-ink);
    font-size: 21px;
    font-weight: 650;
}

.mw-landing[dir="rtl"] .mw-pillar h3 {
    font-size: 23px;
    font-weight: 700;
}

.mw-pillar-text {
    color: var(--mw-muted);
    font-size: 15px;
    line-height: 1.6;
}

.mw-landing[dir="rtl"] .mw-pillar-text {
    font-size: 16.5px;
    line-height: 1.8;
}

.mw-pillar .mw-label {
    margin-block-start: 8px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--mw-line);
}

.mw-controls {
    margin-block-start: 64px;
}

.mw-subsection-title {
    color: var(--mw-ink);
    font-size: 22px;
    font-weight: 650;
}

.mw-landing[dir="rtl"] .mw-subsection-title {
    font-size: 25px;
    font-weight: 700;
}

.mw-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-block-start: 22px;
}

.mw-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}

.mw-control-wide {
    grid-column: 1 / -1;
    gap: 18px;
}

.mw-control-copy {
    display: grid;
    gap: 8px;
    max-width: 760px;
}

.mw-control h4 {
    color: var(--mw-ink);
    font-size: 17px;
    font-weight: 650;
}

.mw-landing[dir="rtl"] .mw-control h4 {
    font-size: 19px;
    font-weight: 700;
}

.mw-control p {
    color: var(--mw-muted);
    font-size: 14.5px;
    line-height: 1.65;
}

.mw-landing[dir="rtl"] .mw-control p {
    font-size: 16px;
    line-height: 1.85;
}

.mw-control .mw-shot {
    box-shadow: none;
}

/* ── Platform scope (#modules) ─────────────────────────────────────── */
/* Governance framework strip above the module grid. */
.mw-frame-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-block-start: 40px;
    padding: 16px 20px;
    border: 1px solid var(--mw-accent-soft-strong);
    border-radius: 16px;
    background: color-mix(in srgb, var(--mw-accent) 4%, var(--mw-surface));
}

.mw-frame-label {
    color: var(--mw-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mw-landing[dir="rtl"] .mw-frame-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.mw-frame-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mw-frame-items li {
    padding: 6px 12px;
    border: 1px solid var(--mw-accent-soft-strong);
    border-radius: 999px;
    background: var(--mw-surface);
    color: var(--mw-ink);
    font-size: 13px;
    font-weight: 500;
}

.mw-landing[dir="rtl"] .mw-frame-items li {
    font-size: 14.5px;
}

/* Illustration panel shared by pillar and module cards. The artwork is square on its own
   navy canvas; it is shown whole (contain) on a matching panel, never cropped or stretched. */
.mw-art {
    position: relative;
    aspect-ratio: 16 / 10;
    margin: -1px -1px 0;
    border-radius: var(--mw-radius) var(--mw-radius) 0 0;
    overflow: hidden;
    background: #0a0f1e;
}

/* Pinned to the panel so the whole square artwork is letterboxed inside it (never cropped). */
.mw-art img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Module cards: three per row. */
.mw-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-block-start: 24px !important;
}

/* The 13th card sits in the middle column of the last row. */
.mw-module:last-child:nth-child(3n + 1) {
    grid-column: 2;
}

.mw-module {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mw-module-body {
    display: grid;
    gap: 6px;
    padding: 18px 20px 22px;
}

.mw-module-group {
    color: var(--mw-accent);
    font-size: 12px;
    font-weight: 600;
}

.mw-landing[dir="rtl"] .mw-module-group {
    font-size: 13.5px;
    font-weight: 700;
}

.mw-module h3 {
    color: var(--mw-ink);
    font-size: 19px;
    font-weight: 650;
}

.mw-landing[dir="rtl"] .mw-module h3 {
    font-size: 21px;
    font-weight: 700;
}

.mw-module p {
    color: var(--mw-muted);
    font-size: 14.5px;
    line-height: 1.55;
}

.mw-landing[dir="rtl"] .mw-module p {
    font-size: 16px;
    line-height: 1.75;
}

/* Screenshots under the module grid. */
.mw-scope-shots-title {
    margin-block-start: 56px !important;
}

.mw-scope-shots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-block-start: 20px;
}

.mw-scope-shot {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

.mw-scope-shot figcaption {
    color: var(--mw-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.mw-landing[dir="rtl"] .mw-scope-shot figcaption {
    font-size: 15px;
    line-height: 1.8;
}

.mw-scope-shot figcaption strong {
    color: var(--mw-ink);
}

/* ── How it works (#how) ───────────────────────────────────────────── */
.mw-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-block-start: 44px !important;
    counter-reset: none;
}

.mw-step {
    position: relative;
    display: grid;
    gap: 10px;
    align-content: start;
    padding-block-start: 22px;
    border-block-start: 2px solid var(--mw-line-strong);
}

.mw-step:last-child {
    border-block-start-color: var(--mw-teal);
}

.mw-step-number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mw-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.mw-step:last-child .mw-step-number {
    background: var(--mw-teal-text);
}

html.mud-dark .mw-step:last-child .mw-step-number {
    color: #0c0b0a;
}

.mw-step h3 {
    color: var(--mw-ink);
    font-size: 18.5px;
    font-weight: 650;
}

.mw-landing[dir="rtl"] .mw-step h3 {
    font-size: 21px;
    font-weight: 700;
}

.mw-step p {
    color: var(--mw-muted);
    font-size: 15px;
    line-height: 1.65;
}

.mw-landing[dir="rtl"] .mw-step p {
    font-size: 16.5px;
    line-height: 1.85;
}

.mw-feature-shot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: 36px;
    align-items: center;
    margin-block-start: 56px !important;
}

.mw-feature-shot figcaption {
    display: grid;
    gap: 10px;
}

.mw-feature-shot h3,
.mw-video-copy h3 {
    color: var(--mw-ink);
    font-size: 20px;
    font-weight: 650;
}

.mw-landing[dir="rtl"] :is(.mw-feature-shot h3, .mw-video-copy h3) {
    font-size: 22px;
    font-weight: 700;
}

.mw-feature-shot p,
.mw-video-copy p {
    color: var(--mw-muted);
    font-size: 15px;
    line-height: 1.65;
}

.mw-landing[dir="rtl"] :is(.mw-feature-shot p, .mw-video-copy p) {
    font-size: 16.5px;
    line-height: 1.85;
}

.mw-video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 32px;
    align-items: center;
    margin-block-start: 40px;
    padding: 28px;
    border: 1px solid var(--mw-line);
    border-radius: 20px;
    background: var(--mw-tint);
}

.mw-video-copy {
    display: grid;
    gap: 10px;
}

.mw-video-player video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--mw-line-strong);
    border-radius: 12px;
    background: #000;
}

/* ── Mobile app (#mobile) ──────────────────────────────────────────── */
.mw-mobile-points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 28px;
    margin-block-start: 40px !important;
}

/* Each point spans two rows of the list (title, text) through a subgrid, so the texts in a row
   start on one line even where a title wraps (the longer Arabic titles do at desktop widths). */
.mw-mobile-point {
    position: relative;
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 8px;
    align-content: start;
    padding-inline-start: 26px;
}

/* The same teal tick as .mw-checklist; physical borders so it reads the same in both directions. */
.mw-mobile-point::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    inset-block-start: .5em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--mw-teal);
    border-bottom: 2px solid var(--mw-teal);
    transform: rotate(-45deg);
}

.mw-mobile-point h3 {
    color: var(--mw-ink);
    font-size: 16.5px;
    font-weight: 650;
    line-height: 1.35;
    text-wrap: balance;
}

.mw-landing[dir="rtl"] .mw-mobile-point h3 {
    font-size: 19px;
    font-weight: 700;
}

.mw-mobile-point p {
    color: var(--mw-muted);
    font-size: 14.5px;
    line-height: 1.65;
    text-wrap: pretty;
}

.mw-landing[dir="rtl"] .mw-mobile-point p {
    font-size: 16px;
    line-height: 1.8;
}

.mw-mobile-shots {
    display: grid;
    gap: 14px;
    margin-block-start: 52px !important;
}

/* Three phones in reading order (right to left in Arabic, as the grid follows dir); the middle
   one sits higher. The bottom padding leaves room for the frame shadow. */
.mw-phones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 290px));
    justify-content: center;
    align-items: start;
    gap: clamp(20px, 4vw, 56px);
    padding-block: 4px 30px;
}

.mw-phones:focus-visible {
    outline: 2px solid var(--mw-accent);
    outline-offset: 4px;
    border-radius: 12px;
}

/* Pure-CSS device frame: a dark bezel around the whole capture (lighter in the dark theme, where
   the page's near-black would swallow it). Corner radii are elliptical percentages of the
   600x1303 screen, so they scale with the phone; the rounded screen corners clip only the blank
   background beside the status bar and the tab bar. */
.mw-phone {
    padding: 8px;
    border: 1px solid var(--mw-line-strong);
    border-radius: 15% / 7.1%;
    background: var(--mw-bezel);
    box-shadow: var(--mw-shadow);
}

.mw-phone:not(:nth-child(2)) {
    margin-block-start: 44px;
}

.mw-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12.5% / 5.76%;
}

.mw-mobile-shots figcaption {
    color: var(--mw-muted-2);
    font-size: 12.5px;
    text-align: center;
}

.mw-landing[dir="rtl"] .mw-mobile-shots figcaption {
    font-size: 14px;
}

/* ── Fit by organisation size (#fit) ───────────────────────────────── */
.mw-fit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-block-start: 40px;
}

.mw-fit {
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 30px 28px;
}

.mw-fit-primary {
    border-color: var(--mw-accent-soft-strong);
    border-block-start: 4px solid var(--mw-accent);
}

.mw-fit h3 {
    color: var(--mw-ink);
    font-size: 20px;
    font-weight: 650;
    line-height: 1.35;
}

.mw-landing[dir="rtl"] .mw-fit h3 {
    font-size: 22px;
    font-weight: 700;
}

/* ── Live tenders (#tenders, only when tenders exist) ──────────────── */
.mw-tenders-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 40px;
}

.mw-tender {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 22px;
}

.mw-tender-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mw-tender-no {
    color: var(--mw-muted-2);
    font-size: 12px;
    direction: ltr;
    unicode-bidi: isolate;
}

.mw-tender h3 {
    color: var(--mw-ink);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.4;
}

.mw-landing[dir="rtl"] .mw-tender h3 {
    font-size: 19px;
    font-weight: 700;
}

.mw-tender-company {
    color: var(--mw-muted);
    font-size: 14px;
}

.mw-tender-category {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mw-chip-hover);
    color: var(--mw-muted);
    font-size: 12px;
}

.mw-tender-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-block-start: auto !important;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--mw-line);
}

.mw-tender-meta dt {
    color: var(--mw-muted-2);
    font-size: 12px;
}

.mw-tender-meta dd {
    color: var(--mw-ink);
    font-size: 14px;
    font-weight: 600;
}

.mw-tenders-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-start: 24px;
    color: var(--mw-muted);
    font-size: 14.5px;
}

.mw-tenders-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Trust (#trust) ────────────────────────────────────────────────── */
.mw-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-block-start: 40px !important;
}

.mw-trust {
    display: grid;
    gap: 8px;
    align-content: start;
    padding-inline-start: 18px;
    border-inline-start: 3px solid var(--mw-teal);
}

.mw-trust h3 {
    color: var(--mw-ink);
    font-size: 17px;
    font-weight: 650;
}

.mw-landing[dir="rtl"] .mw-trust h3 {
    font-size: 19px;
    font-weight: 700;
}

.mw-trust p {
    color: var(--mw-muted);
    font-size: 14.5px;
    line-height: 1.65;
}

.mw-landing[dir="rtl"] .mw-trust p {
    font-size: 16px;
    line-height: 1.85;
}

.mw-trust-link {
    margin-block-start: 32px !important;
}

/* ── Closing call to action & footer ───────────────────────────────── */
.mw-final {
    padding-block: 88px;
    background: var(--mw-accent);
    color: #fff;
}

html.mud-dark .mw-final {
    background: #5e0f27;
}

.mw-final-inner {
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
}

.mw-final h2 {
    max-width: 760px;
    color: #fff;
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-wrap: balance;
}

.mw-landing[dir="rtl"] .mw-final h2 {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
}

.mw-final p {
    max-width: 560px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.7;
}

.mw-landing[dir="rtl"] .mw-final p {
    font-size: 17.5px;
}

.mw-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-block-start: 10px;
}

.mw-footer {
    padding-block: 32px;
    border-block-start: 1px solid var(--mw-line);
}

.mw-footer-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.mw-footer-positioning {
    color: var(--mw-muted-2);
    font-size: 13px;
}

.mw-landing[dir="rtl"] .mw-footer-positioning {
    font-size: 14.5px;
}

.mw-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.mw-footer-links a {
    color: var(--mw-muted);
    font-size: 14px;
    transition: color var(--mw-hover);
}

.mw-footer-links a:hover {
    color: var(--mw-accent);
}

/* ── Reveal motion (driven by wwwroot/js/landing-motion.js) ─────────────
   Reveals animate `opacity` + the individual `translate` property, so hover
   lifts on the same element (which use `transform`) never fight them. Content
   is hidden only once the script has set html.mw-motion. */
.mw-landing [data-reveal] {
    --mw-rd: 420ms;
    --mw-rise: 14px;
    transition: opacity var(--mw-rd) var(--mw-ease) var(--mw-d, 0ms),
                translate var(--mw-rd) var(--mw-ease) var(--mw-d, 0ms),
                transform var(--mw-hover), box-shadow var(--mw-hover),
                border-color var(--mw-hover), background-color var(--mw-hover);
}

.mw-hero [data-reveal] {
    --mw-rd: 450ms;
    --mw-rise: 10px;
}

html.mw-motion .mw-landing [data-reveal]:not([data-revealed]) {
    opacity: 0;
    translate: 0 var(--mw-rise);
}

/* Keyboard focus inside a not-yet-revealed block shows it at once. */
html.mw-motion .mw-landing [data-reveal]:focus-within {
    opacity: 1;
    translate: none;
}

/* Re-created by a Blazor re-render after it was already shown: no second animation. */
.mw-landing [data-revealed="instant"] {
    transition: transform var(--mw-hover), box-shadow var(--mw-hover),
                border-color var(--mw-hover), background-color var(--mw-hover);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .mw-landing [data-reveal] {
        translate: none !important;
        transition: opacity 120ms linear !important;
    }

    .mw-landing :is(.mw-btn, .mw-card):hover {
        transform: none;
    }

    .mw-landing *,
    .mw-landing *::before,
    .mw-landing *::after {
        scroll-behavior: auto !important;
    }
}

@media print {
    html.mw-motion .mw-landing [data-reveal] {
        opacity: 1 !important;
        translate: none !important;
    }
}

/* ── Responsive ────────────────────────────────────────────────────── */
/* The top bar keeps its six links and Book a demo down to 981px by dropping lower-priority items
   in turn: Sign in, then the brand subtitle, then the Contact link (Book a demo opens the same
   page). Breakpoints come from the bar's measured width with the page's web fonts, English being
   the wider language, and leave about 20px to spare at each step. At 980px and below the links
   fold into the menu panel, which carries Sign in, Contact and Book a demo again. */
@media (max-width: 1220px) {
    .mw-signin {
        display: none;
    }
}

@media (min-width: 981px) and (max-width: 1150px) {
    .mw-brand-sub {
        display: none;
    }
}

@media (min-width: 981px) and (max-width: 1060px) {
    .mw-nav-contact {
        display: none;
    }
}

@media (max-width: 1080px) {
    .mw-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .mw-hero-preview {
        max-width: 760px;
    }

    .mw-feature-shot,
    .mw-video {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .mw-mobile-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Collapse the navigation into a menu panel. */
@media (max-width: 980px) {
    /* Anchor the menu panel to the full-width sticky bar, not the centred content column. */
    .mw-topbar .mw-topbar-inner {
        position: static;
    }

    .mw-menu-button {
        display: inline-grid;
    }

    .mw-nav {
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        padding: 12px 16px 18px;
        border-block-end: 1px solid var(--mw-line);
        background: var(--mw-page);
        box-shadow: 0 18px 30px rgba(26, 25, 24, .1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
    }

    .mw-nav[data-open="true"] {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
    }

    .mw-nav-links {
        flex-direction: column;
        gap: 2px;
    }

    .mw-nav-links a {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    .mw-nav-menu-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-block-start: 12px;
        padding-block-start: 14px;
        border-block-start: 1px solid var(--mw-line);
    }

    .mw-topbar-cta {
        display: none;
    }

    .mw-pillars,
    .mw-steps,
    .mw-trust-grid,
    .mw-tenders-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mw-pillars,
    .mw-steps {
        max-width: 640px;
    }

    .mw-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-module:last-child:nth-child(3n + 1) {
        grid-column: auto;
    }

    .mw-scope-shots {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Thin table-row captures stay legible by scrolling inside their frame. */
    .mw-shot-scroll-strip img {
        min-width: 760px;
    }
}

@media (max-width: 720px) {
    .mw-wrap {
        width: calc(100% - 32px);
    }

    .mw-topbar-inner {
        min-height: 60px;
        gap: 12px;
    }

    .mw-brand-sub {
        display: none;
    }

    .mw-section {
        padding-block: 64px;
        scroll-margin-block-start: 60px;
    }

    .mw-hero {
        padding-block: 40px 56px;
    }

    .mw-actions {
        display: grid;
    }

    .mw-actions .mw-btn {
        width: 100%;
        white-space: normal;
    }

    .mw-controls-grid,
    .mw-fit-grid,
    .mw-capability-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mw-capability-grid {
        gap: 16px;
        margin-block-start: 32px !important;
    }

    .mw-capability-wide {
        grid-column: auto;
    }

    .mw-fit,
    .mw-control,
    .mw-capability {
        padding: 20px;
    }

    .mw-pillar {
        padding-block-end: 22px;
    }

    .mw-pillar > :not(.mw-art) {
        margin-inline: 20px !important;
    }

    .mw-module-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mw-video {
        padding: 18px;
    }

    .mw-shot-scroll-wide img {
        min-width: 620px;
    }

    .mw-mobile-points {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .mw-mobile-shots {
        margin-block-start: 36px !important;
    }

    /* The phones become a row that scrolls sideways inside itself, edge to edge (it spans the
       16px gutters and pads them back), with the next phone peeking in; the page never scrolls.
       A scroller clips vertically as well, so the phones take a tighter shadow here and the
       block padding covers all of it; the negative block margins keep the spacing unchanged. */
    .mw-phones {
        display: flex;
        /* From the start edge: a centred row would overflow on both sides, and the part past the
           start edge cannot be scrolled to. */
        justify-content: flex-start;
        gap: 16px;
        margin: -12px -16px -20px;
        padding: 16px 16px 44px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: thin;
    }

    .mw-phones:focus-visible {
        outline-offset: -2px;
    }

    .mw-phone {
        flex: 0 0 min(72%, 260px);
        scroll-snap-align: start;
        box-shadow: var(--mw-shadow-tight);
    }

    .mw-phone:not(:nth-child(2)) {
        margin-block-start: 0;
    }

    .mw-final {
        padding-block: 64px;
    }

    .mw-final-actions {
        display: grid;
        width: 100%;
    }

    .mw-final-actions .mw-btn {
        white-space: normal;
    }

    .mw-footer-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

@media (max-width: 380px) {
    .mw-nav-menu-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .mw-device-url {
        display: none;
    }
}