@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans+Arabic:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap");
@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css");

/* Native [hidden] must beat component display: rules (e.g. .vxw-wa / .vxw-btn). */
[hidden] { display: none !important; }

/* ===== Tokens (VetX Web Design System, generated from tokens.json) ===== */
/* VetX Web Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --deep-tide: #0D4F68;
  --clinical-blue: #1A7FA8;
  --clinical-blue-hover: #0F5F80;
  --teal-pulse: #3CB8C4;
  --mist: #C8EEF1;
  --blue-50: #E6F4F9;
  --blue-100: #C2E3EF;
  --on-primary: #FFFFFF;
  --surface-page: #FFFFFF;
  --surface-alt: #F3F6F8;
  --surface-card: #FFFFFF;
  --surface-sunken: #EEF2F5;
  --surface-inverse: var(--deep-tide);
  --surface-inverse-raised: #135C79;
  --text-primary: #15232C;
  --text-secondary: #4A5A66;
  --text-muted: #5F6F7B;
  --text-link: #156F94;
  --ink-inverse: #FFFFFF;
  --ink-inverse-muted: #B9D3DE;
  --inverse-button: #FFFFFF;
  --on-inverse-button: var(--deep-tide);
  --border: #E1E7EC;
  --border-strong: #7D8E9A;
  --border-inverse: #3A7590;
  --focus-ring: var(--clinical-blue);
  --focus-ring-inverse: #FFFFFF;
  --success: #1D9E75;
  --success-bg: #E1F5EE;
  --success-text: #0F6E56;
  --warning: #EF9F27;
  --warning-bg: #FAEEDA;
  --warning-text: #854F0B;
  --danger: #C43B3B;
  --danger-bg: #FCEBEB;
  --danger-text: #A32D2D;
  --info-bg: #E6F1FB;
  --info-text: #185FA5;
  --neutral-bg: #EDF1F4;
  --neutral-text: #3E4E5A;
  --whatsapp: #25D366;
  --whatsapp-hover: #1EBE5A;
  --on-whatsapp: #072E16;
  --scrim: rgba(7, 24, 32, 0.48);
  --shadow-raised: 0 1px 2px rgba(13, 79, 104, 0.06);
  --shadow-featured: 0 12px 32px rgba(13, 79, 104, 0.14);
  --shadow-screenshot: 0 24px 64px rgba(13, 79, 104, 0.18);
  --shadow-popover: 0 8px 24px rgba(13, 79, 104, 0.14);
}
[data-theme="dark"] {
  --deep-tide: #0D4F68;
  --clinical-blue: #4FB0D8;
  --clinical-blue-hover: #7CC5E3;
  --teal-pulse: #3CB8C4;
  --mist: #173F4A;
  --blue-50: #12313D;
  --blue-100: #1A4253;
  --on-primary: #05202B;
  --surface-page: #0A161D;
  --surface-alt: #0D1C24;
  --surface-card: #11222C;
  --surface-sunken: #152A35;
  --surface-inverse: #071820;
  --surface-inverse-raised: #0F2A36;
  --text-primary: #E6EEF2;
  --text-secondary: #A9BAC4;
  --text-muted: #8A9DA8;
  --text-link: var(--clinical-blue);
  --ink-inverse: #E8F1F5;
  --ink-inverse-muted: #93AEBB;
  --inverse-button: #E8F1F5;
  --on-inverse-button: #071820;
  --border: #21384A;
  --border-strong: #5A7383;
  --border-inverse: #21384A;
  --focus-ring: #7CC5E3;
  --focus-ring-inverse: #E8F1F5;
  --success: #3DC495;
  --success-bg: #0F2E25;
  --success-text: #7EE0BC;
  --warning: #F2B04D;
  --warning-bg: #33250D;
  --warning-text: #F5C77E;
  --danger: #F07070;
  --danger-bg: #3A1616;
  --danger-text: #FFA8A8;
  --info-bg: #10283A;
  --info-text: #9CCBF5;
  --neutral-bg: #1C2F3A;
  --neutral-text: #C3D2DA;
  --whatsapp: #25D366;
  --whatsapp-hover: #4BE083;
  --on-whatsapp: #072E16;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-featured: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-screenshot: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5);
}
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-gutter: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 100px;
  --size-control: 48px;
  --size-control-sm: 40px;
  --size-header: 72px;
  --size-content: 1200px;
  --size-prose: 720px;
  --size-form: 560px;
  --size-icon-tile: 48px;
  --size-whatsapp-fab: 56px;
  --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
}
.hero { font-family: var(--font-sans); font-size: 56px; line-height: 1.12; font-weight: 500; letter-spacing: -0.03em; }
.section-title { font-family: var(--font-sans); font-size: 36px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.subsection { font-family: var(--font-sans); font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.price { font-family: var(--font-sans); font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; }
.card-title { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; font-weight: 500; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 1.4; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: 500; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; font-weight: 400; }

/* ===== Components (bundle.css) ===== */

/* VetX Web — component styles. Every class is prefixed vxw-.
   Logical properties only (inline-start/end), so one stylesheet serves dir="ltr" and dir="rtl". */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--text-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; }
[dir="rtl"], [dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] { line-height: 1.85; }
[dir="rtl"] .vxw-flip { transform: scaleX(-1); }
.vxw-num { font-variant-numeric: tabular-nums; }
.vxw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.vxw-on-inverse :where(a, button, input, select, textarea, summary):focus-visible { outline-color: var(--focus-ring-inverse); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Preview helpers (cards only) */
.vxw-pad { padding: var(--space-gutter); }
.vxw-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.vxw-stack { display: flex; flex-direction: column; gap: var(--space-base); }

/* Layout */
.vxw-container { width: 100%; max-width: calc(var(--size-content) + 2 * var(--space-xl)); margin-inline: auto; padding-inline: var(--space-xl); }
.vxw-section { padding-block: var(--space-4xl); background: var(--surface-page); }
.vxw-section--alt { background: var(--surface-alt); }
.vxw-section--inverse { background: var(--surface-inverse); color: var(--ink-inverse); }
@media (max-width: 1024px) { .vxw-section { padding-block: var(--space-3xl); } .vxw-container { padding-inline: var(--space-gutter); } }
@media (max-width: 767px) { .vxw-section { padding-block: var(--space-2xl); } .vxw-container { padding-inline: var(--space-base); } }

/* Type helpers mirror tokens.css styles, with responsive steps */
.vxw-hero-title { font: 500 56px/1.12 var(--font-sans); letter-spacing: -0.03em; margin: 0; color: var(--text-primary); text-wrap: balance; }
[dir="rtl"] .vxw-hero-title { line-height: 1.35; }
.vxw-section-title { font: 500 36px/1.2 var(--font-sans); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
[dir="rtl"] .vxw-section-title { line-height: 1.4; }
.vxw-lead { font: 400 20px/1.6 var(--font-sans); color: var(--text-secondary); margin: 0; max-width: var(--size-prose); }
[dir="rtl"] .vxw-lead { line-height: 1.8; }
@media (max-width: 767px) { .vxw-hero-title { font-size: 36px; } .vxw-section-title { font-size: 28px; } .vxw-lead { font-size: 17px; } }

/* Wordmark (no logo file: set in type) */
.vxw-wordmark { font: 500 22px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--text-primary); text-decoration: none; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.vxw-wordmark b { font-weight: 500; color: var(--clinical-blue); }
.vxw-on-inverse .vxw-wordmark { color: var(--ink-inverse); }
.vxw-on-inverse .vxw-wordmark b { color: var(--teal-pulse); }

/* Button */
.vxw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: var(--size-control); padding: 0 22px; border-radius: var(--radius-sm); border: 1px solid transparent; font: 500 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; }
.vxw-btn i { font-size: 20px; }
.vxw-btn--primary { background: var(--clinical-blue); color: var(--on-primary); }
.vxw-btn--primary:hover { background: var(--clinical-blue-hover); }
.vxw-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.vxw-btn--secondary:hover { background: var(--blue-50); border-color: var(--clinical-blue); }
.vxw-btn--ghost { background: transparent; color: var(--text-link); padding-inline: 12px; }
.vxw-btn--ghost:hover { background: var(--blue-50); }
.vxw-btn--inverse { background: var(--inverse-button); color: var(--on-inverse-button); }
.vxw-btn--inverse:hover { background: var(--mist); }
.vxw-btn--outline-inverse { background: transparent; color: var(--ink-inverse); border-color: var(--ink-inverse-muted); }
.vxw-btn--outline-inverse:hover { border-color: var(--ink-inverse); background: var(--surface-inverse-raised); }
.vxw-btn--sm { min-height: var(--size-control-sm); padding: 0 16px; font-size: 14px; }
.vxw-btn--block { width: 100%; }
.vxw-btn[disabled], .vxw-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.vxw-btn[aria-busy="true"] { cursor: progress; }
.vxw-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: vxw-spin .8s linear infinite; }
@keyframes vxw-spin { to { transform: rotate(360deg); } }
.vxw-cta-note { font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); margin: var(--space-sm) 0 0; }
.vxw-on-inverse .vxw-cta-note { color: var(--ink-inverse-muted); }

/* WhatsApp */
.vxw-wa { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--size-control); padding: 0 20px; border-radius: var(--radius-pill); background: var(--whatsapp); color: var(--on-whatsapp); font: 500 15px/1.2 var(--font-sans); text-decoration: none; border: 0; cursor: pointer; }
.vxw-wa:hover { background: var(--whatsapp-hover); }
.vxw-wa i { font-size: 22px; }
.vxw-wa--fab { position: fixed; inset-block-end: var(--space-gutter); inset-inline-end: var(--space-gutter); width: var(--size-whatsapp-fab); height: var(--size-whatsapp-fab); padding: 0; justify-content: center; box-shadow: var(--shadow-popover); z-index: 40; }
.vxw-wa--fab i { font-size: 28px; }
.vxw-wa--fab.vxw-wa--static { position: static; }

/* Chips and badges */
.vxw-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 4px 10px; border-radius: var(--radius-xs); background: var(--neutral-bg); color: var(--neutral-text); font: 500 13px/1.4 var(--font-sans); }
.vxw-badge-popular { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 4px 12px; border-radius: var(--radius-pill); background: var(--clinical-blue); color: var(--on-primary); font: 500 13px/1.4 var(--font-sans); }
.vxw-eyebrow { display: block; font: 500 13px/1.4 var(--font-sans); color: var(--text-link); margin: 0 0 var(--space-md); }

/* Site header */
.vxw-header { position: sticky; top: 0; z-index: 30; background: var(--surface-page); border-block-end: 1px solid var(--border); }
.vxw-header__bar { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--size-header); }
.vxw-nav { display: flex; align-items: center; gap: var(--space-xs); margin-inline-end: auto; }
.vxw-nav a, .vxw-nav summary { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-primary); font: 500 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; list-style: none; }
.vxw-nav summary::-webkit-details-marker { display: none; }
.vxw-nav a:hover, .vxw-nav summary:hover { background: var(--blue-50); }
.vxw-nav a[aria-current="page"] { color: var(--text-link); }
.vxw-nav details { position: relative; }
.vxw-nav details[open] summary i { transform: rotate(180deg); }
.vxw-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-width: 300px; padding: var(--space-sm); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); display: grid; gap: 2px; z-index: 5; }
.vxw-menu a { display: grid; grid-template-columns: 24px 1fr; column-gap: var(--space-md); align-items: start; padding: 10px 12px; }
.vxw-menu a i { font-size: 20px; color: var(--clinical-blue); padding-block-start: 2px; }
.vxw-menu a span { font: 400 13px/1.5 var(--font-sans); color: var(--text-secondary); grid-column: 2; }
.vxw-header__actions { display: flex; align-items: center; gap: var(--space-sm); }
.vxw-header__login { color: var(--text-primary); font: 500 15px/1.2 var(--font-sans); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-sm); }
.vxw-header__login:hover { background: var(--blue-50); }
.vxw-header__burger { display: none; }
@media (max-width: 1024px) { .vxw-nav, .vxw-header__login, .vxw-header .vxw-lang { display: none; } .vxw-header__burger { display: inline-flex; } .vxw-header__bar { gap: var(--space-base); justify-content: space-between; } }

/* Language switch */
.vxw-lang { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-primary); font: 500 15px/1.2 var(--font-sans); text-decoration: none; border: 1px solid var(--border); }
.vxw-lang:hover { border-color: var(--border-strong); }
.vxw-lang i { font-size: 18px; color: var(--text-secondary); }
.vxw-on-inverse .vxw-lang { color: var(--ink-inverse); border-color: var(--border-inverse); }
.vxw-on-inverse .vxw-lang i { color: var(--ink-inverse-muted); }

/* Mobile menu */
.vxw-drawer { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-base); display: grid; gap: 2px; max-width: 360px; }
.vxw-drawer a { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font: 500 16px/1.3 var(--font-sans); }
.vxw-drawer a:hover { background: var(--blue-50); }
.vxw-drawer hr { border: 0; border-block-start: 1px solid var(--border); margin: var(--space-sm) 0; width: 100%; }

/* Breadcrumbs */
.vxw-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }
.vxw-crumbs a { color: var(--text-link); text-decoration: none; }
.vxw-crumbs a:hover { text-decoration: underline; }
.vxw-crumbs i { font-size: 14px; }
.vxw-crumbs [aria-current="page"] { color: var(--text-secondary); }

/* Hero */
.vxw-hero { padding-block: var(--space-3xl) var(--space-4xl); background: var(--surface-page); overflow: hidden; }
.vxw-hero__grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-2xl); align-items: center; }
.vxw-hero__copy { display: flex; flex-direction: column; gap: var(--space-gutter); }
.vxw-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.vxw-hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-gutter); margin: 0; padding: 0; list-style: none; font: 400 14px/1.5 var(--font-sans); color: var(--text-secondary); }
.vxw-hero__facts li { display: inline-flex; align-items: center; gap: 6px; }
.vxw-hero__facts i { color: var(--clinical-blue); font-size: 18px; }
.vxw-hero__visual { position: relative; }
@media (max-width: 1024px) { .vxw-hero__grid { grid-template-columns: 1fr; } }

/* Product shot: browser frame around a real screenshot (placeholder until supplied) */
.vxw-shot { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-screenshot); overflow: hidden; }
.vxw-shot__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-block-end: 1px solid var(--border); background: var(--surface-alt); }
.vxw-shot__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.vxw-shot__url { margin-inline-start: var(--space-md); flex: 1; max-width: 280px; height: 22px; border-radius: var(--radius-xs); background: var(--surface-sunken); font: 400 12px/22px var(--font-mono); color: var(--text-muted); padding-inline: 10px; direction: ltr; text-align: start; }
.vxw-shot__body { aspect-ratio: 16 / 10; background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-muted); font: 400 14px/1.5 var(--font-sans); text-align: center; padding: var(--space-gutter); }
.vxw-shot__body img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vxw-shot--bare .vxw-shot__body { padding: 0; }

/* The hero moment: patient record + the WhatsApp reminder that brings the pet back */
.vxw-moment { position: relative; padding-block-end: 132px; padding-inline-end: 40px; }
.vxw-record { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-screenshot); padding: var(--space-gutter); display: grid; gap: var(--space-base); }
.vxw-record__head { display: flex; align-items: center; gap: var(--space-md); }
.vxw-record__avatar { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--mist); display: grid; place-items: center; color: var(--deep-tide); font-size: 26px; flex: none; }
.vxw-record__name { font: 500 18px/1.3 var(--font-sans); margin: 0; }
.vxw-record__meta { font: 400 14px/1.5 var(--font-sans); color: var(--text-secondary); margin: 0; }
.vxw-record__vax { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.vxw-record__vax div { display: grid; grid-template-columns: 1fr auto; gap: var(--space-base); padding: 10px 14px; font: 400 14px/1.5 var(--font-sans); border-block-end: 1px solid var(--border); }
.vxw-record__vax div:last-child { border-block-end: 0; }
.vxw-record__vax .vxw-due { background: var(--blue-50); }
.vxw-when { font: 400 13px/1.5 var(--font-sans); color: var(--text-secondary); }
.vxw-when time { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.vxw-record__vax .vxw-due .vxw-when { color: var(--text-primary); }
.vxw-bubble { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: min(320px, 80%); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); padding: var(--space-base); display: grid; gap: var(--space-sm); }
.vxw-bubble__from { display: flex; align-items: center; gap: var(--space-sm); font: 500 13px/1.4 var(--font-sans); color: var(--text-secondary); }
.vxw-bubble__from i { width: 24px; height: 24px; border-radius: 50%; background: var(--whatsapp); color: var(--on-whatsapp); display: grid; place-items: center; font-size: 15px; }
.vxw-bubble p { margin: 0; font: 400 14px/1.6 var(--font-sans); }
.vxw-bubble__reply { justify-self: end; background: var(--blue-50); border-radius: var(--radius-md); padding: 6px 12px; font: 400 14px/1.5 var(--font-sans); }

/* Trust strip: true facts, no invented numbers */
.vxw-trust { border-block: 1px solid var(--border); background: var(--surface-page); }
.vxw-trust__list { display: grid; grid-template-columns: repeat(5, 1fr); margin-block: 0; padding-block: 0; list-style: none; }
.vxw-trust__list li { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-gutter) var(--space-base); font: 500 15px/1.4 var(--font-sans); border-inline-start: 1px solid var(--border); }
.vxw-trust__list li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.vxw-trust__list i { font-size: 24px; color: var(--deep-tide); flex: none; }
@media (max-width: 1024px) { .vxw-trust__list { grid-template-columns: repeat(2, 1fr); } .vxw-trust__list li { border-inline-start: 0; padding-inline-start: 0; padding-block: var(--space-base); } }

/* Section heading */
.vxw-heading { display: grid; gap: var(--space-base); margin-block-end: var(--space-xl); max-width: var(--size-prose); }
.vxw-heading--center { margin-inline: auto; text-align: center; }
.vxw-heading--center .vxw-lead { margin-inline: auto; }
.vxw-on-inverse .vxw-section-title { color: var(--ink-inverse); }
.vxw-on-inverse .vxw-lead { color: var(--ink-inverse-muted); }

/* Feature tile: a link, not a box. Border only, no shadow. */
.vxw-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-gutter); }
@media (max-width: 1024px) { .vxw-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vxw-tiles { grid-template-columns: 1fr; } }
.vxw-tile { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-gutter); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); color: inherit; text-decoration: none; transition: border-color .12s; }
.vxw-tile:hover { border-color: var(--clinical-blue); }
.vxw-tile__icon { width: var(--size-icon-tile); height: var(--size-icon-tile); border-radius: var(--radius-md); background: var(--mist); color: var(--deep-tide); display: grid; place-items: center; font-size: 26px; }
.vxw-tile h3 { font: 500 18px/1.4 var(--font-sans); margin: 0; }
.vxw-tile p { font: 400 15px/1.65 var(--font-sans); color: var(--text-secondary); margin: 0; }
.vxw-tile__more { font: 500 14px/1.4 var(--font-sans); color: var(--text-link); display: inline-flex; align-items: center; gap: 4px; margin-block-start: var(--space-xs); }
.vxw-tile__plan { justify-self: start; }

/* Feature row: text beside a screenshot, alternating sides */
.vxw-frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.vxw-frow + .vxw-frow { margin-block-start: var(--space-4xl); }
.vxw-frow--flip .vxw-frow__copy { order: 2; }
.vxw-frow__copy { display: grid; gap: var(--space-base); }
.vxw-frow__copy h3 { font: 500 24px/1.3 var(--font-sans); letter-spacing: -0.01em; margin: 0; }
.vxw-frow__copy > p { margin: 0; color: var(--text-secondary); }
.vxw-checks { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.vxw-checks li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-sm); font: 400 15px/1.6 var(--font-sans); }
.vxw-checks i { color: var(--clinical-blue); font-size: 20px; padding-block-start: 2px; }
@media (max-width: 1024px) { .vxw-frow { grid-template-columns: 1fr; } .vxw-frow--flip .vxw-frow__copy { order: 0; } }

/* Steps: a real sequence, so numbered */
.vxw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gutter); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.vxw-steps li { counter-increment: step; display: grid; gap: var(--space-sm); padding: var(--space-gutter); border-radius: var(--radius-md); background: var(--surface-inverse-raised); color: var(--ink-inverse); }
.vxw-steps li::before { content: counter(step); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ink-inverse-muted); font: 500 16px/1 var(--font-sans); margin-block-end: var(--space-sm); }
.vxw-steps h3 { font: 500 18px/1.4 var(--font-sans); margin: 0; }
.vxw-steps p { margin: 0; font: 400 15px/1.65 var(--font-sans); color: var(--ink-inverse-muted); }
@media (max-width: 1024px) { .vxw-steps { grid-template-columns: 1fr; } }

/* Testimonial */
.vxw-quote { margin: 0; display: grid; gap: var(--space-gutter); max-width: 760px; }
.vxw-quote blockquote { margin: 0; font: 400 24px/1.5 var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); text-wrap: pretty; }
[dir="rtl"] .vxw-quote blockquote { line-height: 1.75; }
.vxw-quote figcaption { display: flex; align-items: center; gap: var(--space-md); }
.vxw-quote__photo { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-sunken); object-fit: cover; flex: none; display: grid; place-items: center; color: var(--text-muted); font-size: 22px; }
.vxw-quote__name { font: 500 15px/1.4 var(--font-sans); display: block; }
.vxw-quote__role { font: 400 14px/1.4 var(--font-sans); color: var(--text-secondary); display: block; }

/* CTA band */
.vxw-cta { background: var(--surface-inverse); color: var(--ink-inverse); border-radius: var(--radius-lg); padding: var(--space-3xl) var(--space-xl); text-align: center; display: grid; justify-items: center; gap: var(--space-gutter); }
.vxw-cta h2 { font: 500 36px/1.2 var(--font-sans); letter-spacing: -0.02em; margin: 0; max-width: 680px; text-wrap: balance; }
.vxw-cta p { margin: 0; color: var(--ink-inverse-muted); max-width: 560px; font-size: 18px; }
.vxw-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
@media (max-width: 767px) { .vxw-cta { padding: var(--space-2xl) var(--space-lg); } .vxw-cta h2 { font-size: 28px; } }

/* Billing toggle */
.vxw-toggle { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border); }
.vxw-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.vxw-toggle label { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 8px 18px; border-radius: var(--radius-pill); font: 500 15px/1.2 var(--font-sans); color: var(--text-secondary); cursor: pointer; }
.vxw-toggle input:checked + label { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-raised); }
.vxw-toggle input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.vxw-toggle__save { font: 500 12px/1.3 var(--font-sans); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--mist); color: var(--text-primary); }

/* Plan card */
.vxw-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gutter); align-items: stretch; }
@media (max-width: 1024px) { .vxw-plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.vxw-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-gutter); padding: var(--space-xl) var(--space-gutter); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.vxw-plan--featured { border: 2px solid var(--clinical-blue); box-shadow: var(--shadow-featured); }
.vxw-plan__badge { position: absolute; inset-block-start: -14px; inset-inline-start: var(--space-gutter); }
.vxw-plan__name { font: 500 24px/1.3 var(--font-sans); letter-spacing: -0.01em; margin: 0; }
.vxw-plan__for { margin: 4px 0 0; color: var(--text-secondary); font: 400 15px/1.55 var(--font-sans); }
.vxw-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.vxw-plan__cur { font: 500 15px/1 var(--font-sans); color: var(--text-secondary); }
.vxw-plan__was {
  font: 500 22px/1.1 var(--font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.vxw-plan__was[hidden] { display: none; }
.vxw-plan__amount { font: 500 40px/1.1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vxw-plan__amount--tbd { color: var(--text-muted); }
.vxw-plan__per { font: 400 15px/1 var(--font-sans); color: var(--text-secondary); }
.vxw-plan__price-note { margin: 6px 0 0; font: 400 13px/1.5 var(--font-sans); color: var(--text-muted); }
.vxw-plan__contact { font: 500 28px/1.2 var(--font-sans); letter-spacing: -0.02em; }
.vxw-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-md); font: 400 14px/1.55 var(--font-sans); }
.vxw-plan li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-sm); }
.vxw-plan li i { color: var(--clinical-blue); font-size: 18px; padding-block-start: 1px; }
.vxw-plan__inherit { font: 500 14px/1.5 var(--font-sans); color: var(--text-primary); }
.vxw-plan__foot { margin-block-start: auto; display: grid; gap: var(--space-sm); }

/* Comparison table */
.vxw-compare-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.vxw-compare { width: 100%; border-collapse: collapse; font: 400 15px/1.5 var(--font-sans); min-width: 640px; }
.vxw-compare caption { text-align: start; padding: var(--space-base) var(--space-gutter); font: 400 13px/1.5 var(--font-sans); color: var(--text-muted); caption-side: bottom; }
.vxw-compare th, .vxw-compare td { padding: 14px var(--space-gutter); border-block-end: 1px solid var(--border); text-align: center; vertical-align: middle; }
.vxw-compare th[scope="row"] { text-align: start; font-weight: 400; }
.vxw-compare th[scope="row"] small { display: block; color: var(--text-muted); font-size: 13px; }
.vxw-compare thead th { position: sticky; top: 0; background: var(--surface-card); font: 500 16px/1.3 var(--font-sans); vertical-align: bottom; }
.vxw-compare thead th:first-child { text-align: start; font: 400 14px/1.4 var(--font-sans); color: var(--text-secondary); }
.vxw-compare .vxw-col-featured { background: var(--blue-50); }
.vxw-compare tbody tr.vxw-compare__group th { text-align: start; font: 500 15px/1.4 var(--font-sans); background: var(--surface-alt); padding-block: 10px; }
.vxw-compare tbody tr:last-child th, .vxw-compare tbody tr:last-child td { border-block-end: 0; }
.vxw-yes { color: var(--clinical-blue); font-size: 22px; }
.vxw-no { color: var(--text-muted); }
.vxw-val { font: 400 14px/1.4 var(--font-sans); color: var(--text-primary); }

/* FAQ accordion: native details/summary */
.vxw-faq { display: grid; gap: var(--space-md); max-width: var(--size-prose); }
.vxw-faq details { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.vxw-faq details[open] { border-color: var(--blue-100); }
.vxw-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-base); padding: 18px var(--space-gutter); cursor: pointer; list-style: none; font: 500 17px/1.45 var(--font-sans); border-radius: var(--radius-md); }
.vxw-faq summary::-webkit-details-marker { display: none; }
.vxw-faq summary i { font-size: 20px; color: var(--text-secondary); transition: transform .15s; flex: none; }
.vxw-faq details[open] summary i { transform: rotate(45deg); }
.vxw-faq__a { padding: 0 var(--space-gutter) var(--space-gutter); color: var(--text-secondary); }
.vxw-faq__a p { margin: 0 0 var(--space-md); }
.vxw-faq__a p:last-child { margin: 0; }
.vxw-faq__a a { color: var(--text-link); }

/* Forms */
.vxw-form { display: grid; gap: var(--space-base); max-width: var(--size-form); padding: var(--space-xl); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.vxw-form__title { font: 500 24px/1.3 var(--font-sans); margin: 0; }
.vxw-form__intro { margin: 0; color: var(--text-secondary); font-size: 15px; }
.vxw-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-base); }
@media (max-width: 600px) { .vxw-form__pair { grid-template-columns: 1fr; } .vxw-form { padding: var(--space-lg); } }
.vxw-field { display: grid; gap: 6px; }
.vxw-field label { font: 500 15px/1.4 var(--font-sans); }
.vxw-field label small { font-weight: 400; color: var(--text-muted); font-size: 13px; }
.vxw-input { width: 100%; min-height: var(--size-control); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); font: 400 16px/1.4 var(--font-sans); }
select.vxw-input { appearance: none; background-image: none; padding-inline-end: 40px; }
.vxw-select { position: relative; }
.vxw-select i { position: absolute; inset-inline-end: 14px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); }
.vxw-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--focus-ring); }
.vxw-input[aria-invalid="true"] { border-color: var(--danger); }
.vxw-input--ltr { direction: ltr; text-align: start; }
[dir="rtl"] .vxw-input--ltr { text-align: right; }
.vxw-help { font: 400 13px/1.5 var(--font-sans); color: var(--text-muted); margin: 0; }
.vxw-error { font: 400 13px/1.5 var(--font-sans); color: var(--danger); margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.vxw-error[hidden] { display: none !important; }
.vxw-error i { font-size: 16px; padding-block-start: 1px; }
.vxw-compare-wrap[data-expanded="false"] .vxw-compare__extra { display: none; }
.vxw-advanced { margin-block: 12px; }
.vxw-advanced > summary { cursor: pointer; font: 500 14px/1.4 var(--font-sans); color: var(--text-secondary); }

.vxw-consent { font: 400 13px/1.6 var(--font-sans); color: var(--text-muted); margin: 0; }
.vxw-consent a { color: var(--text-link); }
.vxw-done { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--success-bg); color: var(--success-text); max-width: var(--size-form); }
.vxw-done i { font-size: 32px; color: var(--success); }
.vxw-done h3 { margin: 0; font: 500 22px/1.3 var(--font-sans); color: var(--text-primary); }
.vxw-done p { margin: 0; color: var(--text-primary); }
.vxw-done ol { margin: 0; padding-inline-start: 20px; color: var(--text-primary); display: grid; gap: 4px; }

/* Sticky mobile CTA bar */
.vxw-sticky { position: fixed; inset-inline: 0; inset-block-end: 0; display: flex; gap: var(--space-sm); padding: 12px var(--space-base) calc(12px + env(safe-area-inset-bottom)); background: var(--surface-card); border-block-start: 1px solid var(--border); box-shadow: var(--shadow-popover); z-index: 35; }
.vxw-sticky .vxw-btn { flex: 1; }
.vxw-sticky--static { position: static; }
@media (min-width: 768px) { .vxw-sticky:not(.vxw-sticky--static) { display: none; } }

/* Blog card */
.vxw-post { display: grid; gap: var(--space-md); color: inherit; text-decoration: none; }
.vxw-post__img { aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-muted); overflow: hidden; }
.vxw-post__img img { width: 100%; height: 100%; object-fit: cover; }
.vxw-post h3 { margin: 0; font: 500 18px/1.45 var(--font-sans); }
.vxw-post:hover h3 { color: var(--text-link); }
.vxw-post p { margin: 0; color: var(--text-secondary); font-size: 15px; }
.vxw-post__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; font: 400 13px/1.4 var(--font-sans); color: var(--text-muted); }

/* Footer */
.vxw-footer { background: var(--surface-inverse); color: var(--ink-inverse); padding-block: var(--space-3xl) var(--space-xl); }
.vxw-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-xl); }
.vxw-footer__brand p { color: var(--ink-inverse-muted); font-size: 15px; margin: var(--space-base) 0; max-width: 280px; }
.vxw-footer h3 { font: 500 15px/1.4 var(--font-sans); margin: 0 0 var(--space-base); }
.vxw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vxw-footer a { color: var(--ink-inverse-muted); text-decoration: none; font-size: 15px; }
.vxw-footer a:hover { color: var(--ink-inverse); text-decoration: underline; }
.vxw-footer__contact { display: grid; gap: 10px; margin-block-start: var(--space-base); }
.vxw-footer__contact a { display: inline-flex; align-items: center; gap: var(--space-sm); }
.vxw-footer__contact span { direction: ltr; unicode-bidi: isolate; }
.vxw-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-base); margin-block-start: var(--space-2xl); padding-block-start: var(--space-gutter); border-block-start: 1px solid var(--border-inverse); font-size: 14px; color: var(--ink-inverse-muted); }
@media (max-width: 1024px) { .vxw-footer__grid { grid-template-columns: 1fr 1fr; } .vxw-footer__brand { grid-column: 1 / -1; } }

/* Journey map (showcase) */
.vxw-journey { display: grid; grid-template-columns: 148px repeat(7, 1fr); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); font: 400 13px/1.5 var(--font-sans); }
.vxw-journey > div { padding: 12px; border-block-end: 1px solid var(--border); border-inline-start: 1px solid var(--border); }
.vxw-journey > .vxw-j-rowhead { border-inline-start: 0; background: var(--surface-alt); font-weight: 500; color: var(--text-secondary); }
.vxw-journey > .vxw-j-last { border-block-end: 0; }
.vxw-journey .vxw-j-stage { background: var(--surface-inverse); color: var(--ink-inverse); border-inline-start-color: var(--border-inverse); }
.vxw-journey .vxw-j-stage b { display: block; font: 500 15px/1.3 var(--font-sans); }
.vxw-journey .vxw-j-stage span { color: var(--ink-inverse-muted); font-size: 12px; }
.vxw-journey .vxw-j-key { background: var(--blue-50); }
.vxw-journey code { font: 400 12px/1.5 var(--font-mono); background: var(--surface-sunken); padding: 1px 5px; border-radius: var(--radius-xs); display: inline-block; margin: 1px 0; }
.vxw-journey .vxw-j-cta { font-weight: 500; color: var(--text-link); }


/* ---------- Page-level styles for the website screens (built on the vxw- components) ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.vxw-skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--surface-card); padding: 8px 14px; border-radius: var(--radius-sm); }
.vxw-skip:focus { top: 12px; }
main { display: block; }

/* Inner-page hero */
.vxw-page-hero { padding-block: var(--space-2xl) var(--space-3xl); background: var(--surface-page); }
.vxw-page-hero .vxw-crumbs { margin-block-end: var(--space-gutter); }
.vxw-page-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.vxw-page-hero__copy { display: grid; gap: var(--space-gutter); align-content: start; }
.vxw-page-hero--narrow .vxw-page-hero__copy { max-width: var(--size-prose); }
.vxw-page-hero .vxw-hero-title { font-size: 48px; }
@media (max-width: 1024px) { .vxw-page-hero__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .vxw-page-hero .vxw-hero-title { font-size: 32px; } }

/* Problems -> outcomes */
.vxw-problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gutter); }
.vxw-problem { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-gutter); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.vxw-problem__was { display: flex; gap: var(--space-sm); align-items: flex-start; margin: 0; font: 400 15px/1.6 var(--font-sans); color: var(--text-secondary); }
.vxw-problem__was i { color: var(--text-muted); font-size: 18px; padding-block-start: 3px; }
.vxw-problem h3 { margin: 0; font: 500 18px/1.45 var(--font-sans); }
.vxw-problem p:last-child { margin: 0; color: var(--text-secondary); font-size: 15px; }
@media (max-width: 1024px) { .vxw-problems { grid-template-columns: 1fr; } }

/* Tiles in 3 columns (related features) */
.vxw-tiles--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .vxw-tiles--3 { grid-template-columns: 1fr; } }
.vxw-more-link { margin-block-start: var(--space-xl); }

/* Pricing page */
.vxw-pricing-head { display: grid; justify-items: center; gap: var(--space-gutter); margin-block-end: var(--space-2xl); text-align: center; }
.vxw-pricing-head .vxw-heading { margin-block-end: 0; }
.vxw-plans-note { text-align: center; margin: var(--space-gutter) auto 0; font: 400 14px/1.6 var(--font-sans); color: var(--text-muted); max-width: var(--size-prose); }
.vxw-plans-note a { color: var(--text-link); }
.vxw-includes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-base) var(--space-gutter); margin: 0; padding: var(--space-gutter); list-style: none; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.vxw-includes li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-sm); font: 400 15px/1.5 var(--font-sans); }
.vxw-includes i { color: var(--clinical-blue); font-size: 20px; }
@media (max-width: 1024px) { .vxw-includes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vxw-includes { grid-template-columns: 1fr; } }
.vxw-compare td.vxw-start { text-align: start; }

/* Plan section heading on the home page */
.vxw-plans-teaser .vxw-plan ul li:nth-child(n+4) { display: none; }

/* Demo page */
.vxw-demo { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-2xl); align-items: start; }
.vxw-demo__copy { display: grid; gap: var(--space-gutter); padding-block-start: var(--space-base); }
.vxw-demo__copy h2 { font: 500 20px/1.4 var(--font-sans); margin: 0; }
.vxw-demo__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-base); }
.vxw-demo__list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-md); align-items: start; }
.vxw-demo__list .vxw-tile__icon { width: 44px; height: 44px; font-size: 22px; }
.vxw-demo__list b { display: block; font-weight: 500; }
.vxw-demo__list span { color: var(--text-secondary); font-size: 15px; }
.vxw-demo__alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-base) var(--space-gutter); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-alt); }
.vxw-demo__alt p { margin: 0; flex: 1 1 200px; font-size: 15px; }
.vxw-demo .vxw-form, .vxw-demo .vxw-done { max-width: none; }
.vxw-done[hidden], .vxw-form[hidden] { display: none; }
@media (max-width: 1024px) { .vxw-demo { grid-template-columns: 1fr; } }

/* FAQ / article page */
.vxw-faqpage { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-2xl); align-items: start; }
.vxw-faqpage__nav { position: sticky; top: calc(var(--size-header) + 24px); display: grid; gap: 2px; }
.vxw-faqpage__nav a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font: 500 15px/1.4 var(--font-sans); }
.vxw-faqpage__nav a:hover { background: var(--blue-50); color: var(--text-primary); }
.vxw-faqpage__group { scroll-margin-top: calc(var(--size-header) + 24px); }
.vxw-faqpage__group + .vxw-faqpage__group { margin-block-start: var(--space-2xl); }
.vxw-faqpage__group h2 { font: 500 24px/1.3 var(--font-sans); margin: 0 0 var(--space-base); }
.vxw-faq-search { position: relative; max-width: var(--size-prose); margin-block-end: var(--space-xl); }
.vxw-faq-search i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 20px; pointer-events: none; }
.vxw-faq-search .vxw-input { padding-inline-start: 44px; }
.vxw-faq-empty { color: var(--text-secondary); }
.vxw-pending { color: var(--text-muted); font-style: normal; }
@media (max-width: 1024px) { .vxw-faqpage { grid-template-columns: 1fr; } .vxw-faqpage__nav { position: static; display: flex; flex-wrap: wrap; gap: var(--space-sm); } .vxw-faqpage__nav a { border: 1px solid var(--border); } }

/* Mobile menu overlay */
.vxw-drawer-wrap { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: none; }
.vxw-drawer-wrap[data-open="true"] { display: block; }
.vxw-drawer-wrap .vxw-drawer { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(360px, 88vw); max-width: none; border-radius: 0; border: 0; align-content: start; overflow-y: auto; }
.vxw-drawer__top { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 12px; }
.vxw-drawer__close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); cursor: pointer; font-size: 22px; }

/* Sticky CTA + FAB coordination */
.vxw-sticky { transform: translateY(110%); transition: transform .2s; }
.vxw-sticky[data-show="true"] { transform: none; }
.vxw-sticky:not([data-show="true"]) { visibility: hidden; }
body[data-sticky="true"] .vxw-wa--fab { display: none; }
@media (max-width: 767px) { body { padding-block-end: 0; } .vxw-wa--fab { inset-block-end: 16px; inset-inline-end: 16px; } }

/* Screens index page */
.vxw-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gutter); }
.vxw-screens .vxw-tile { gap: var(--space-sm); }
.vxw-screens__links { display: flex; gap: var(--space-base); flex-wrap: wrap; margin-block-start: var(--space-sm); }
.vxw-screens__links a { color: var(--text-link); font-weight: 500; }
@media (max-width: 1024px) { .vxw-screens { grid-template-columns: 1fr; } }