/* ============================================================================
   Vertex — landing surface. Design system "لوحة الخدمة" / Service Board,
   direction A, approved 2026-09-11 (program/design/app-directions.html).

   Arabic is the primary language. Every box uses logical properties, so the
   page is right-to-left because <html dir> says so, not because of an RTL
   override sheet. Latin tracking is applied only in LTR: letter-spacing in
   Arabic prises joined letters apart and is always wrong.

   ONE gutter (--vx-gutter), ONE vertical rhythm (--vx-section), ONE border
   weight (1px --vx-hair), FOUR radii (field / button / card / pill). No
   section invents its own.

   Owner-editable colours still win: --bs-body-bg, --header-bg, --footer and
   --footer-bottom come from the admin panel (business settings) through the
   layout's inline <style>; the approved palette is only the fallback.
   ========================================================================= */

:root {
    /* -- palette (approved direction A) ----------------------------------- */
    --vx-navy: #1E3A6E;
    --vx-navy-ink: #162C54;   /* label on amber: 5.53:1. #1E3A6E is 4.46:1 and misses AA */
    --vx-navy-soft: #E4E9F2;
    --vx-ground: #EEF0EC;
    --vx-surface: #FFFFFF;
    --vx-amber: #E1932E;
    --vx-amber-deep: #C87F1E;
    --vx-green: #1E7F6B;
    /* Text on the 12% green tint. The token green itself measures 4.17:1 there —
       axe-core caught it; this is 6.01:1. Same pattern as --vx-navy-ink on amber. */
    --vx-green-ink: #176455;
    --vx-hair: #D8DCD6;
    --vx-ink: #14181F;
    --vx-muted: #4B5563;
    /* The focus ring is a UI component: WCAG 1.4.11 wants 3:1 against what is
       behind it, and the signal amber manages only 2.18:1 on the cement ground.
       The ring is therefore navy-ink on light surfaces (12.03:1) and amber on the
       dark ones, which is what --vx-focus is re-pointed at below. */
    --vx-focus: #162C54;

    /* -- resolved surfaces: owner setting first, palette second ------------ */
    --vx-page: var(--bs-body-bg, #EEF0EC);
    --vx-chrome: var(--header-bg, rgba(238, 240, 236, .82));
    --vx-footer: var(--footer, #1E3A6E);
    --vx-on-footer: #FFFFFF;
    --vx-on-footer-muted: #C8D2E4;
    --vx-footer-hair: rgba(255, 255, 255, .18);

    /* -- spacing: one scale, constant multiplier --------------------------- */
    --vx-1: 4px;
    --vx-2: 8px;
    --vx-3: 12px;
    --vx-4: 16px;
    --vx-5: 24px;
    --vx-6: 32px;
    --vx-7: 48px;
    --vx-8: 64px;

    --vx-gutter: clamp(16px, 4vw, 40px);
    --vx-section: clamp(48px, 7vw, 96px);
    --vx-max: 1240px;
    --vx-util-h: 41px;   /* 40px row + its 1px border; the header's sticky offset */
    --vx-bar-h: 69px;    /* 68px row + its 1px border; what stays pinned */

    /* -- radii: four values, nothing else ---------------------------------- */
    --vx-r-field: 6px;
    --vx-r-btn: 10px;
    --vx-r-card: 14px;
    --vx-r-pill: 999px;

    --vx-shadow: 0 1px 2px rgba(20, 24, 31, .04), 0 8px 24px -12px rgba(20, 24, 31, .18);
    --vx-shadow-lift: 0 2px 4px rgba(20, 24, 31, .06), 0 18px 40px -18px rgba(20, 24, 31, .28);

    /* -- type -------------------------------------------------------------- */
    --vx-font-head: "Cairo", "Segoe UI", "Noto Kufi Arabic", "Tahoma", system-ui, sans-serif;
    --vx-font-body: "IBM Plex Sans Arabic", "Segoe UI", "Noto Sans Arabic", "Tahoma", system-ui, sans-serif;

    --vx-t-display: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
    --vx-t-h2: clamp(1.5rem, 1.22rem + 1.2vw, 2.05rem);
    --vx-t-h3: 1.1875rem;
    --vx-t-body: 1rem;
    --vx-t-small: .9375rem;
    --vx-t-micro: .8125rem;

    color-scheme: light;
}

/* Dark theme. The body class and the localStorage key are the ones the site
   already used (`dark-theme` / `landingTheme`) — the toggle keeps working. */
body.dark-theme {
    --vx-navy: #9DC0F5;
    --vx-navy-ink: #121213;
    --vx-navy-soft: #1F2733;
    --vx-ground: #121213;
    --vx-surface: #1A1D22;
    --vx-amber: #F0AE55;
    --vx-amber-deep: #D9963C;
    --vx-green: #4FD1B0;
    --vx-green-ink: #4FD1B0;
    --vx-hair: #39404A;
    --vx-ink: #E8EBEF;
    --vx-muted: #A7B0BC;
    --vx-focus: #F0AE55;   /* 9.71:1 on the dark ground, 8.76:1 on a dark card */
    /* --vx-page has to be re-resolved HERE, not left to :root. `--vx-page:
       var(--bs-body-bg, #EEF0EC)` on :root is computed where :root's own
       --bs-body-bg is, and the site's dark palette sets --bs-body-bg on <body>.
       Without this line the sections that carry no background of their own kept
       the light cement ground while everything around them went dark. */
    --vx-page: var(--bs-body-bg, #121213);
    --vx-chrome: var(--header-bg, rgba(18, 18, 19, .86));
    --vx-footer: var(--footer, #0E1620);
    --vx-on-footer: #E8EBEF;
    --vx-on-footer-muted: #A7B0BC;
    --vx-footer-hair: rgba(255, 255, 255, .12);
    color-scheme: dark;
}

/* The theme class has always lived on <body>; color-scheme belongs on the root so
   the scrollbar and native form controls follow it too. */
:root:has(body.dark-theme) {
    color-scheme: dark;
}

/* ---------------------------------------------------------------- reset -- */
/* Scoped to the chrome and to the redesigned page, so the legacy stylesheet
   that the other landing pages still load is not disturbed. */

.vx-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--vx-page);
    color: var(--vx-ink);
    font-family: var(--vx-font-body);
    font-size: var(--vx-t-body);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.vx-body footer {
    margin-top: auto;
}

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

:where(.vx-page, .vx-chrome) :where(img) {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Every reset below is wrapped in :where() so it carries ZERO specificity. A plain
   `.vx-page p { margin: 0 }` is (0,1,1) and silently beats every single-class rule
   that sets a margin — which is exactly how the opener's lede, eyebrow and proof
   strip lost their spacing the first time this file was written. */
:where(.vx-page, .vx-chrome) :where(h1, h2, h3, h4) {
    font-family: var(--vx-font-head);
    font-weight: 700;
    color: var(--vx-navy);
    margin: 0;
    line-height: 1.3;
    text-wrap: balance;
}

/* Long words, long URLs and long owner-written titles stay inside their box. */
.vx-page,
.vx-chrome {
    overflow-wrap: anywhere;
}

:where(.vx-page, .vx-chrome) :where(p) {
    margin: 0;
}

:where(.vx-page, .vx-chrome) :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The pinned bar must not sit on top of an anchored section. */
.vx-page [id] {
    scroll-margin-top: calc(var(--vx-bar-h) + var(--vx-4));
}

/* Latin display type wants negative tracking as it grows. Arabic never does —
   letter-spacing breaks the joins — so this is gated on direction. */
[dir="ltr"] .vx-display,
[dir="ltr"] .vx-section__title {
    letter-spacing: -.02em;
}

.vx-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------- utilities -- */

/* ONE side gutter, and it clears a notch when the phone is held sideways. */
.vx-wrap {
    width: 100%;
    max-width: var(--vx-max);
    margin-inline: auto;
    padding-inline: max(var(--vx-gutter), env(safe-area-inset-left)) max(var(--vx-gutter), env(safe-area-inset-right));
}

.vx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.vx-skip {
    position: absolute;
    inset-inline-start: var(--vx-gutter);
    top: var(--vx-2);
    z-index: 60;
    transform: translateY(-160%);
    background: var(--vx-amber);
    color: var(--vx-navy-ink);
    font-family: var(--vx-font-head);
    font-weight: 700;
    padding: var(--vx-3) var(--vx-5);
    border-radius: var(--vx-r-btn);
    text-decoration: none;
    transition: transform 140ms ease-out;
}

.vx-skip:focus {
    transform: translateY(0);
}

/* One focus ring for the whole surface. Always visible, never removed. */
.vx-chrome :focus-visible,
.vx-page :focus-visible {
    outline: 3px solid var(--vx-focus);
    outline-offset: 2px;
    border-radius: var(--vx-r-field);
}

/* On the two navy surfaces a navy ring would disappear, so those flip to the
   signal amber — 4.46:1 on the provider panel, 5.53:1 on the footer's bottom bar. */
.vx-footer,
.vx-provider {
    --vx-focus: var(--vx-amber);
}

/* No 300ms double-tap delay on anything you can press, and a tap highlight that
   is chosen rather than inherited from the browser. */
.vx-page a,
.vx-page button,
.vx-page summary,
.vx-chrome a,
.vx-chrome button,
.vx-chrome summary,
.vx-chrome input {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30, 58, 110, .18);
}

.vx-footer :focus-visible {
    outline-color: var(--vx-amber);
}

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

.vx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vx-2);
    min-height: 50px;
    padding: var(--vx-3) var(--vx-5);
    border: 1px solid transparent;
    border-radius: var(--vx-r-btn);
    font-family: var(--vx-font-head);
    font-weight: 700;
    font-size: var(--vx-t-small);
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: transform 110ms ease-out, background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}

.vx-btn:active {
    transform: scale(.98);
}

/* Amber is the signal colour. ONE amber action per screenful — it is what the
   customer is meant to press. Everything else is navy or an outline. */
.vx-btn--primary {
    background: var(--vx-amber);
    color: var(--vx-navy-ink);
}

.vx-btn--primary:hover {
    background: var(--vx-amber-deep);
    color: var(--vx-navy-ink);
}

.vx-btn--solid {
    background: var(--vx-navy);
    color: var(--vx-surface);
}

body.dark-theme .vx-btn--solid {
    color: #121213;
}

.vx-btn--solid:hover {
    background: var(--vx-navy-ink);
    color: var(--vx-surface);
}

body.dark-theme .vx-btn--solid:hover {
    background: var(--vx-navy);
    color: #121213;
}

.vx-btn--ghost {
    background: transparent;
    color: var(--vx-navy);
    border-color: currentColor;
    border-width: 1px;
}

.vx-btn--ghost:hover {
    background: var(--vx-navy-soft);
    color: var(--vx-navy);
}

.vx-btn--sm {
    min-height: 40px;
    padding: var(--vx-2) var(--vx-4);
    font-size: var(--vx-t-micro);
}

.vx-btn__icon {
    width: 18px;
    height: 18px;
    flex: none;
}

/* ------------------------------------------------------------------ card -- */

.vx-card {
    background: var(--vx-surface);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-card);
    padding: var(--vx-5);
}

/* The service-sheet detail from direction A: a perforated top edge, so a card
   that stands for a real job reads like a torn-off ticket. Decorative only. */
.vx-ticket {
    position: relative;
    padding-top: var(--vx-6);
}

.vx-ticket::before {
    content: "";
    position: absolute;
    inset-inline: var(--vx-4);
    top: var(--vx-4);
    height: 2px;
    background-image: radial-gradient(circle at 2px 50%, var(--vx-hair) 0 2px, transparent 2px);
    background-size: 9px 4px;
    background-repeat: repeat-x;
}

.vx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--vx-2);
    font-family: var(--vx-font-head);
    font-weight: 700;
    font-size: var(--vx-t-micro);
    color: var(--vx-navy);
    background: var(--vx-navy-soft);
    border-radius: var(--vx-r-pill);
    padding: var(--vx-1) var(--vx-4);
    margin: 0 0 var(--vx-4);
}

.vx-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--vx-r-pill);
    background: var(--vx-amber);
    flex: none;
}

/* --------------------------------------------------------------- header --- */

/* The header sticks by exactly the height of its utility row LESS than zero, so the
   utility row scrolls away and only the 69px main bar stays pinned. On a 390 × 844
   phone that is 41px of screen given back on every scroll, without splitting the
   banner landmark in two or spending a line of JavaScript on it.
   The row therefore has a fixed height and must never wrap — the phone number
   truncates instead, and it is repeated in full in the footer. */
.vx-header {
    position: sticky;
    top: calc(var(--vx-util-h) * -1);
    z-index: 30;
    background: var(--vx-chrome);
    backdrop-filter: saturate(170%) blur(14px);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    border-bottom: 1px solid var(--vx-hair);
}

.vx-header__util {
    height: var(--vx-util-h);
    border-bottom: 1px solid var(--vx-hair);
}

.vx-header__util-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vx-3);
    height: 100%;
    flex-wrap: nowrap;
}

.vx-header__bar-in {
    display: flex;
    align-items: center;
    gap: var(--vx-4);
    min-height: calc(var(--vx-bar-h) - 1px);
}

.vx-logo {
    flex: none;
    display: block;
}

.vx-logo img {
    height: 42px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.vx-tel {
    display: inline-flex;
    align-items: center;
    gap: var(--vx-2);
    min-width: 0;
    color: var(--vx-navy);
    font-weight: 600;
    font-size: var(--vx-t-micro);
    text-decoration: none;
    padding-block: var(--vx-1);
    white-space: nowrap;
    overflow: hidden;
}

.vx-tel span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vx-tel:hover {
    text-decoration: underline;
}

.vx-tel svg {
    width: 15px;
    height: 15px;
    flex: none;
}

/* language switcher: <details>, so it costs no JavaScript to open */
.vx-lang {
    position: relative;
}

.vx-lang > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--vx-2);
    cursor: pointer;
    color: var(--vx-navy);
    font-weight: 600;
    font-size: var(--vx-t-micro);
    padding: var(--vx-1) var(--vx-3);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-pill);
    background: var(--vx-surface);
    min-height: 30px;
}

.vx-lang > summary::-webkit-details-marker {
    display: none;
}

.vx-lang > summary svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.vx-lang__menu {
    position: absolute;
    z-index: 40;
    inset-inline-start: 0;
    top: calc(100% + var(--vx-2));
    min-width: 200px;
    background: var(--vx-surface);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-card);
    box-shadow: var(--vx-shadow-lift);
    padding: var(--vx-2);
}

.vx-lang__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vx-3);
    padding: var(--vx-2) var(--vx-3);
    border-radius: var(--vx-r-field);
    color: var(--vx-ink);
    text-decoration: none;
    font-size: var(--vx-t-small);
}

.vx-lang__menu a:hover {
    background: var(--vx-navy-soft);
    color: var(--vx-navy);
}

.vx-lang__code {
    color: var(--vx-muted);
    font-size: var(--vx-t-micro);
}

.vx-lang__menu [aria-current="true"] .vx-lang__code {
    color: var(--vx-green);
}

.vx-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    background: var(--vx-surface);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-pill);
    color: var(--vx-navy);
    cursor: pointer;
}

.vx-theme svg {
    width: 16px;
    height: 16px;
}

.vx-theme .vx-theme__moon {
    display: none;
}

body.dark-theme .vx-theme .vx-theme__moon {
    display: block;
}

body.dark-theme .vx-theme .vx-theme__sun {
    display: none;
}

.vx-nav {
    margin-inline-start: auto;
}

.vx-nav ul {
    display: flex;
    align-items: center;
    gap: var(--vx-1);
}

.vx-nav a {
    display: block;
    padding: var(--vx-2) var(--vx-3);
    border-radius: var(--vx-r-field);
    color: var(--vx-ink);
    font-weight: 600;
    font-size: var(--vx-t-small);
    text-decoration: none;
    white-space: nowrap;
}

.vx-nav a:hover {
    color: var(--vx-navy);
    background: var(--vx-navy-soft);
}

/* The underline is the only thing that says "you are here", so it is a state
   indicator and WCAG 1.4.11 wants 3:1 behind it. Amber gives 2.18:1 on the
   chrome; navy gives 9.71:1. aria-current carries the same fact to a reader. */
.vx-nav a.is-active {
    color: var(--vx-navy);
    box-shadow: inset 0 -2px 0 0 var(--vx-navy);
}

.vx-burger {
    display: none;
    margin-inline-start: auto;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: var(--vx-surface);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-btn);
    color: var(--vx-navy);
    cursor: pointer;
    padding: 0;
}

.vx-burger svg {
    width: 20px;
    height: 20px;
}

.vx-burger .vx-burger__close {
    display: none;
}

.vx-burger[aria-expanded="true"] .vx-burger__close {
    display: block;
}

.vx-burger[aria-expanded="true"] .vx-burger__open {
    display: none;
}

.vx-header__action {
    flex: none;
}

/* The contact link lives in the bar on desktop and inside the menu on mobile;
   it is never rendered twice at the same width. */
.vx-nav__cta {
    display: none;
}

@media (max-width: 900px) {
    .vx-nav__cta {
        display: block;
        border-top: 1px solid var(--vx-hair);
        margin-top: var(--vx-2);
        padding-top: var(--vx-2);
    }

    .vx-burger {
        display: inline-flex;
    }

    .vx-nav {
        display: none;
        order: 9;
        width: 100%;
        margin-inline-start: 0;
        padding-block: var(--vx-2) var(--vx-4);
        border-top: 1px solid var(--vx-hair);
    }

    .vx-nav.is-open {
        display: block;
    }

    .vx-header__bar-in {
        flex-wrap: wrap;
    }

    .vx-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .vx-nav a {
        padding: var(--vx-3) var(--vx-2);
    }

    .vx-nav a.is-active {
        box-shadow: inset 3px 0 0 0 var(--vx-navy);
    }

    [dir="rtl"] .vx-nav a.is-active {
        box-shadow: inset -3px 0 0 0 var(--vx-navy);
    }

    .vx-header__action {
        display: none;
    }
}

/* --------------------------------------------------------------- section -- */

.vx-page {
    display: block;
}

.vx-section {
    padding-block: var(--vx-section);
}

.vx-section--tight {
    padding-block: calc(var(--vx-section) * .62);
}

.vx-section--alt {
    background: var(--vx-surface);
    border-block: 1px solid var(--vx-hair);
}

.vx-section__head {
    max-width: 62ch;
    margin: 0 0 var(--vx-7);
}

.vx-section__title {
    font-size: var(--vx-t-h2);
    font-weight: 800;
    text-wrap: balance;
}

.vx-section__lede {
    margin-top: var(--vx-3);
    color: var(--vx-muted);
    font-size: var(--vx-t-small);
}

/* ---------------------------------------------------------------- opener -- */

.vx-opener {
    padding-block: clamp(40px, 6vw, 84px) var(--vx-section);
}

.vx-opener__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.vx-display {
    font-size: var(--vx-t-display);
    font-weight: 800;
    line-height: 1.25;
    color: var(--vx-navy);
    margin: 0;
    text-wrap: balance;
}

.vx-opener__lede {
    margin-top: var(--vx-4);
    max-width: 54ch;
    color: var(--vx-muted);
    font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
}

.vx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vx-3);
    margin-top: var(--vx-6);
}

/* The proof strip: real counts from the catalogue, never an invented claim. */
.vx-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vx-5) var(--vx-7);
    margin-top: var(--vx-7);
    padding-top: var(--vx-5);
    border-top: 1px solid var(--vx-hair);
}

.vx-proof__n {
    display: block;
    font-family: var(--vx-font-head);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--vx-navy);
}

.vx-proof__l {
    display: block;
    font-size: var(--vx-t-micro);
    color: var(--vx-muted);
}

/* The four owner-uploaded slots, as a service board. Each keeps its own
   placeholder fallback, so the board is complete before a single upload. */
.vx-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vx-3);
}

.vx-board__cell {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--vx-surface);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-card);
    aspect-ratio: 4 / 5;
    max-width: 100%;
}

.vx-board__cell:nth-child(1) {
    aspect-ratio: 4 / 3;
}

.vx-board__cell:nth-child(4) {
    aspect-ratio: 4 / 3;
}

.vx-board__cell:nth-child(2n) {
    transform: translateY(var(--vx-5));
}

.vx-board__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------- catalogue -- */

.vx-grid {
    display: grid;
    gap: var(--vx-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.vx-cat {
    display: flex;
    flex-direction: column;
    gap: var(--vx-3);
}

.vx-cat__top {
    display: flex;
    align-items: center;
    gap: var(--vx-3);
}

.vx-cat__icon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--vx-r-btn);
    border: 1px solid var(--vx-hair);
    background: var(--vx-ground);
    overflow: hidden;
}

.vx-cat__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vx-cat__name {
    font-size: var(--vx-t-h3);
    font-weight: 700;
}

.vx-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vx-2);
}

.vx-fact {
    display: inline-flex;
    align-items: center;
    gap: var(--vx-1);
    font-size: var(--vx-t-micro);
    color: var(--vx-navy);
    background: var(--vx-navy-soft);
    border-radius: var(--vx-r-pill);
    padding: var(--vx-1) var(--vx-3);
}

.vx-fact--green {
    color: var(--vx-green-ink);
    background: color-mix(in srgb, var(--vx-green) 12%, transparent);
}

/* children disclosure: <details>, no JavaScript, keyboard-operable for free */
.vx-cat__more {
    margin-top: auto;
    border-top: 1px solid var(--vx-hair);
    padding-top: var(--vx-3);
}

.vx-cat__more > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--vx-2);
    cursor: pointer;
    color: var(--vx-navy);
    font-family: var(--vx-font-head);
    font-weight: 700;
    font-size: var(--vx-t-small);
    min-height: 32px;
}

.vx-cat__more > summary::-webkit-details-marker {
    display: none;
}

.vx-cat__more > summary svg {
    width: 15px;
    height: 15px;
    transition: transform 140ms ease-out;
}

[dir="rtl"] .vx-cat__more > summary svg {
    transform: scaleX(-1);
}

.vx-cat__more[open] > summary svg {
    transform: rotate(90deg);
}

[dir="rtl"] .vx-cat__more[open] > summary svg {
    transform: scaleX(-1) rotate(90deg);
}

.vx-cat__note {
    margin-top: var(--vx-3);
    color: var(--vx-muted);
    font-size: var(--vx-t-micro);
}

.vx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vx-2);
    margin-top: var(--vx-3);
}

.vx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--vx-2);
    padding: var(--vx-1) var(--vx-3) var(--vx-1) var(--vx-1);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-pill);
    font-size: var(--vx-t-micro);
    background: var(--vx-ground);
}

[dir="rtl"] .vx-chip {
    padding: var(--vx-1) var(--vx-1) var(--vx-1) var(--vx-3);
}

.vx-chip img {
    width: 26px;
    height: 26px;
    border-radius: var(--vx-r-pill);
    object-fit: cover;
    flex: none;
    background: var(--vx-surface);
}

.vx-cat__figure {
    margin: 0 0 var(--vx-6);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-card);
    overflow: hidden;
    background: var(--vx-surface);
    max-height: 320px;
}

.vx-cat__figure img {
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
}

/* -------------------------------------------------------------- how it -- */

.vx-steps {
    display: grid;
    gap: var(--vx-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    counter-reset: vxstep;
}

/* The numeral is absolutely positioned, so the card has to reserve its height:
   the badge sits 24px down, is 34px tall, and the title starts 16px below it. */
.vx-step {
    position: relative;
    padding-top: calc(var(--vx-5) + 34px + var(--vx-4));
}

.vx-step::before {
    counter-increment: vxstep;
    content: counter(vxstep);
    position: absolute;
    top: var(--vx-5);
    inset-inline-start: var(--vx-5);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--vx-r-pill);
    background: var(--vx-navy);
    color: var(--vx-surface);
    font-family: var(--vx-font-head);
    font-weight: 800;
    font-size: var(--vx-t-small);
    font-variant-numeric: tabular-nums;
}

body.dark-theme .vx-step::before {
    color: #121213;
}

.vx-step h3 {
    font-size: var(--vx-t-h3);
    margin-bottom: var(--vx-2);
}

.vx-step p {
    color: var(--vx-muted);
    font-size: var(--vx-t-small);
}

/* ------------------------------------------------------------------ about -- */

.vx-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.vx-about__body p {
    margin-top: var(--vx-4);
    color: var(--vx-muted);
    max-width: 60ch;
}

.vx-about__figure {
    margin: 0;
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-card);
    overflow: hidden;
    background: var(--vx-surface);
    aspect-ratio: 5 / 4;
    max-width: 100%;
}

.vx-about__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------ specialities -- */

.vx-spec {
    display: flex;
    gap: var(--vx-4);
    align-items: flex-start;
}

.vx-spec__icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--vx-r-btn);
    border: 1px solid var(--vx-hair);
    background: var(--vx-ground);
    overflow: hidden;
}

.vx-spec__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vx-spec h3 {
    font-size: var(--vx-t-h3);
    margin-bottom: var(--vx-2);
}

.vx-spec p {
    color: var(--vx-muted);
    font-size: var(--vx-t-small);
}

/* --------------------------------------------------------------- features -- */

.vx-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
}

.vx-feature + .vx-feature {
    margin-top: var(--vx-4);
}

.vx-feature h3 {
    font-size: var(--vx-t-h3);
    margin-bottom: var(--vx-2);
}

.vx-feature p {
    color: var(--vx-muted);
    font-size: var(--vx-t-small);
}

/* Phone frames drawn in CSS: no iphone-frame.png, no binary shipped. */
.vx-shots {
    display: flex;
    gap: var(--vx-3);
    justify-content: center;
    align-items: flex-end;
}

.vx-shot {
    margin: 0;
    width: min(148px, 42%);
    aspect-ratio: 9 / 19;
    border: 6px solid var(--vx-navy);
    border-radius: 22px;
    overflow: hidden;
    background: var(--vx-ground);
    box-shadow: var(--vx-shadow);
}

.vx-shot--second {
    width: min(124px, 36%);
    opacity: .94;
}

.vx-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------------------------- testimonials -- */

.vx-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(100%, 320px), 1fr);
    gap: var(--vx-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--vx-3);
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.vx-rail > * {
    scroll-snap-align: start;
}

@media (min-width: 900px) {
    .vx-rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
        grid-auto-columns: auto;
        overflow-x: visible;
    }
}

.vx-quote {
    display: flex;
    flex-direction: column;
    gap: var(--vx-3);
}

.vx-quote blockquote {
    margin: 0;
    color: var(--vx-ink);
    font-size: var(--vx-t-small);
}

.vx-quote__who {
    display: flex;
    align-items: center;
    gap: var(--vx-3);
    margin-top: auto;
    padding-top: var(--vx-3);
    border-top: 1px solid var(--vx-hair);
}

.vx-quote__who img {
    width: 44px;
    height: 44px;
    border-radius: var(--vx-r-pill);
    object-fit: cover;
    flex: none;
    border: 1px solid var(--vx-hair);
}

.vx-quote__name {
    display: block;
    font-family: var(--vx-font-head);
    font-weight: 700;
    color: var(--vx-navy);
}

.vx-quote__role {
    display: block;
    font-size: var(--vx-t-micro);
    color: var(--vx-muted);
}

/* ------------------------------------------------------------- provider -- */

.vx-provider {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    background: var(--vx-navy);
    border-radius: var(--vx-r-card);
    border: 1px solid var(--vx-navy);
    padding: clamp(24px, 4vw, 48px);
}

.vx-provider h2,
.vx-provider p {
    color: var(--vx-surface);
}

body.dark-theme .vx-provider {
    background: var(--vx-surface);
    border-color: var(--vx-hair);
}

body.dark-theme .vx-provider h2 {
    color: var(--vx-navy);
}

body.dark-theme .vx-provider p {
    color: var(--vx-ink);
}

.vx-provider p {
    margin-top: var(--vx-3);
    opacity: .92;
    font-size: var(--vx-t-small);
}

.vx-provider__figure {
    margin: 0;
    width: clamp(96px, 14vw, 168px);
    border-radius: var(--vx-r-card);
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    flex: none;
}

/* ------------------------------------------------------------ newsletter -- */

.vx-newsletter {
    background: var(--vx-surface);
    border-top: 1px solid var(--vx-hair);
    padding-block: var(--vx-7);
}

.vx-newsletter__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: center;
}

/* The newsletter is a white band INSIDE <footer>, so it must opt out of the
   footer's white-on-navy heading colour or the heading is white on white. */
.vx-footer .vx-newsletter h2 {
    font-size: var(--vx-t-h2);
    font-weight: 800;
    color: var(--vx-navy);
    margin-bottom: 0;
}

.vx-newsletter p {
    margin-top: var(--vx-2);
    color: var(--vx-muted);
    font-size: var(--vx-t-small);
}

.vx-field {
    display: flex;
    gap: var(--vx-2);
    flex-wrap: wrap;
}

.vx-field input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 50px;
    padding: var(--vx-3) var(--vx-4);
    font: inherit;
    font-size: var(--vx-t-small);
    color: var(--vx-ink);
    background: var(--vx-ground);
    border: 1px solid var(--vx-hair);
    border-radius: var(--vx-r-field);
}

.vx-field input::placeholder {
    color: var(--vx-muted);
    opacity: 1;
}

/* The stamped-ticket focus state from direction A: a navy ring plus an amber
   rule under the field. */
.vx-field input:focus-visible {
    outline: 2px solid var(--vx-navy);
    outline-offset: 1px;
    box-shadow: 0 3px 0 0 var(--vx-amber);
}

/* ----------------------------------------------------------------- footer -- */

.vx-footer {
    background: var(--vx-footer);
    color: var(--vx-on-footer);
}

.vx-footer a {
    color: var(--vx-on-footer);
    text-decoration: none;
}

.vx-footer a:hover {
    text-decoration: underline;
}

.vx-footer__top {
    padding-block: var(--vx-8) var(--vx-7);
    display: grid;
    gap: var(--vx-7);
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}

.vx-footer__top h2 {
    font-size: var(--vx-t-h3);
    color: var(--vx-on-footer);
    margin-bottom: var(--vx-4);
}

.vx-footer__blurb {
    color: var(--vx-on-footer-muted);
    font-size: var(--vx-t-small);
    margin: var(--vx-4) 0 var(--vx-5);
    max-width: 40ch;
}

.vx-footer__logo img {
    height: 44px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.vx-footer__links li + li {
    margin-top: var(--vx-2);
}

.vx-footer__links a {
    font-size: var(--vx-t-small);
    color: var(--vx-on-footer-muted);
}

.vx-footer__links a:hover {
    color: var(--vx-on-footer);
}

.vx-contact {
    display: flex;
    gap: var(--vx-3);
    align-items: flex-start;
    font-size: var(--vx-t-small);
}

.vx-contact + .vx-contact {
    margin-top: var(--vx-5);
}

.vx-contact svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 4px;
    color: var(--vx-amber);
}

.vx-contact__label {
    display: block;
    font-size: var(--vx-t-micro);
    color: var(--vx-on-footer-muted);
}

.vx-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vx-2);
    margin-bottom: var(--vx-5);
}

/* The brand marks on disk are drawn in a fixed blue (#1455AC), which would be
   invisible on the navy footer — so each one sits on a light chip. */
.vx-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--vx-r-pill);
    background: #FFFFFF;
    border: 1px solid var(--vx-footer-hair);
    transition: box-shadow 140ms ease-out, transform 110ms ease-out;
}

.vx-social a:hover {
    box-shadow: 0 0 0 3px var(--vx-amber);
}

.vx-social a:active {
    transform: scale(.96);
}

.vx-social img {
    width: 18px;
    height: 18px;
}

.vx-applinks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vx-2);
}

.vx-applinks .vx-btn {
    min-height: 0;
    padding: var(--vx-2) var(--vx-3);
    background: rgba(255, 255, 255, .08);
    border-color: var(--vx-footer-hair);
    color: var(--vx-on-footer);
}

/* The store badges are ~300px wide at their intrinsic size; the frame is 32px tall
   and the width follows. (An <img height> attribute cannot do this on its own — the
   reset's `height: auto` outranks a presentational attribute.) */
.vx-applinks img {
    height: 32px;
    width: auto;
}

.vx-applinks .vx-btn:hover {
    background: rgba(255, 255, 255, .16);
    color: var(--vx-on-footer);
}

/*
 | The bottom bar is a DARKER SHADE OF THE FOOTER, not its own colour.
 |
 | The layout has always fed --footer-bottom from the `header_background`
 | setting — the same key that paints the header — and there is no fourth colour
 | field in the admin panel for it. On a site whose header is light (the default
 | seed is a pale blue) that put #C8D2E4 copyright text on a pale blue bar. The
 | three colour fields the owner actually has still drive exactly what they
 | always drove: body_background the page, header_background the header,
 | footer_background the footer. Reported rather than "fixed" in the layout,
 | because the mapping itself is another team's file.
 */
.vx-footer__bottom {
    background: var(--vx-footer);
    background: color-mix(in srgb, var(--vx-footer) 84%, #000);
    border-top: 1px solid var(--vx-footer-hair);
    padding-block: var(--vx-4);
    text-align: center;
    font-size: var(--vx-t-micro);
    color: var(--vx-on-footer-muted);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
    .vx-footer__top {
        grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .vx-opener__grid,
    .vx-about,
    .vx-newsletter__in,
    .vx-feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .vx-provider {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        justify-items: center;
    }

    .vx-board__cell:nth-child(2n) {
        transform: none;
    }

    .vx-footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vx-6);
        padding-block: var(--vx-7) var(--vx-6);
    }
}

@media (max-width: 560px) {
    .vx-proof {
        gap: var(--vx-4) var(--vx-6);
    }

    .vx-actions .vx-btn {
        flex: 1 1 100%;
    }
}

/* ------------------------------------------------- user preference media -- */

@media (prefers-reduced-motion: reduce) {

    .vx-page *,
    .vx-chrome * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .vx-btn:active {
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .vx-header {
        background: var(--vx-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    :root {
        --vx-hair: #6B7280;
        --vx-muted: #1F2937;
    }

    .vx-header {
        background: var(--vx-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media print {

    .vx-header,
    .vx-newsletter,
    .vx-skip {
        display: none !important;
    }
}