/* ============================================================
   Warmupinbox — Colors & Type
   ------------------------------------------------------------
   Dark-mode first. The product ships both light and dark; the
   dark palette is the "hero" surface (marketing hero, app,
   promo cards) and light is the utility surface (email, docs,
   forms).
   ============================================================ */

/* -------- Fonts -------- */
/* *-latin.woff2 are subsets (latin + latin-ext + punctuation/symbols) built by
   scripts/subset-fonts.mjs from the full files kept alongside. Extending the
   charset = extend RANGES there, re-run, and rename the outputs (immutable
   /fonts/* caching — a changed file must get a new name). */
/* JetBrains Mono self-hosted (v2.304, OFL — license alongside in /fonts/).
   Replaces the Google Fonts @import: keeps font delivery first-party (no IP
   transfer to Google, relevant for EU/GDPR) and drops a render-blocking
   third-party CSS request. Only the two weights the site uses. */

.wui-ds { font-optical-sizing: auto; }

.wui-ds {
  /* =========================================================
     BRAND CORE — same hues across light & dark, shade diffs
     ========================================================= */
  --brand-blue:        #2B7AE9; /* Electric Blue — primary CTAs on light */
  --brand-blue-hero:   #4A93F0; /* Electric Blue — primary on dark */
  --brand-blue-sky:    #60A5FA; /* Sky Blue — data accent, chart secondary */
  --brand-blue-sky-d:  #7BB8FC; /* Sky Blue dark-mode */
  --brand-red:         #FF3B4F; /* Vivid Red — secondary actions, charts */
  --brand-red-hero:    #FF5A6B; /* Vivid Red — dark-mode */
  --brand-rose:        #FB7185; /* Rose — light red shade */
  --brand-rose-d:      #FC8E9E;
  --brand-lime:        #AEEA00; /* Moderná Limetková — success / accent */
  --brand-lime-d:      #C6FF00;
  --brand-yellow:      #FFD600; /* Teplá Žltá — warning / friendly */
  --brand-yellow-d:    #FFE033;
  --brand-indigo:      #1A237E; /* Hlboká Indigo — headings on light, axis */
  --brand-indigo-soft: #B8C1EC; /* Svetlé Indigo — body on dark */

  /* Gradient used in marketing hero, email header, promo chips.
     2-stop blue→red — purple midpoint dropped 2026-06-11 (Victor), aligns with product styleguide */
  --brand-gradient: linear-gradient(90deg, #4A93F0 0%, #FF5A6B 100%);
  --brand-gradient-flat: linear-gradient(90deg, #2B7AE9 0%, #FF3B4F 100%);

  /* =========================================================
     LIGHT SURFACE TOKENS
     ========================================================= */
  --l-bg:          #FFFFFF;
  --l-bg-muted:    #F5F7FA; /* Svetlá Šedá — page bg, chart mesh */
  --l-bg-subtle:   #EEF2F7;
  --l-bg-blue:     #EFF3FF; /* product light canvas (WUI_V2) — available for alt sections echoing the app */
  --l-card:        #FFFFFF;
  --l-border:      #E5E9F0;
  --l-border-strong: #D5DCE5;

  --l-fg:          #1A237E; /* Hlboká Indigo — headings */
  --l-fg-body:     #1F2937; /* body copy on white */
  --l-fg-muted:    #6B7280;
  --l-fg-subtle:   #9CA3AF;
  --l-fg-invert:   #FFFFFF;

  /* =========================================================
     DARK SURFACE TOKENS  (hero / app / promo)
     ========================================================= */
  --d-bg:          #0F1115; /* app shell, outside cards */
  --d-bg-muted:    #151820;
  --d-card:        #1E2128; /* Tmavá Povrchová — cards/panels */
  --d-card-raised: #23262E;
  --d-border:      #2A2D35;
  --d-border-strong: #353842;

  --d-fg:          #F1F5F9; /* primary text on dark */
  --d-fg-body:     #E2E8F0;
  --d-fg-muted:    #9CA3AF;
  --d-fg-subtle:   #6B7280;
  --d-fg-disabled: #6B7280;

  /* =========================================================
     SEMANTIC — status / data
     ========================================================= */
  --ok:       var(--brand-lime);
  --ok-dark:  var(--brand-lime-d);
  --warn:     var(--brand-yellow);
  --warn-dark:var(--brand-yellow-d);
  --err:      var(--brand-red);
  --err-dark: var(--brand-red-hero);
  --info:     var(--brand-blue);
  --info-dark:var(--brand-blue-hero);

  /* Chart stack (inbox/spam/bounced bars) */
  --chart-inbox:   #2B7AE9;
  --chart-inbox-2: #60A5FA;
  --chart-spam:    #FF3B4F;
  --chart-bounced: #FFD600;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-ui:      "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-promo:   "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — pixel-driven because UI is product-centric */
  --fs-xxs: 11px;   --lh-xxs: 16px;
  --fs-xs:  12px;   --lh-xs:  16px;
  --fs-sm:  13px;   --lh-sm:  18px;
  --fs-base:14px;   --lh-base:20px;   /* default body */
  --fs-md:  15px;   --lh-md:  22px;
  --fs-lg:  17px;   --lh-lg:  24px;
  --fs-xl:  20px;   --lh-xl:  28px;
  --fs-2xl: 24px;   --lh-2xl: 32px;
  --fs-3xl: 32px;   --lh-3xl: 40px;
  --fs-4xl: 40px;   --lh-4xl: 48px;
  --fs-5xl: 56px;   --lh-5xl: 64px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Letter-spacing (DM Sans is already tight; we widen labels) */
  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-label:  0.08em; /* eyebrow/overline labels */

  /* =========================================================
     SHAPE — radii / spacing / shadow / motion
     ========================================================= */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-pill: 20px;    /* buttons, badges */
  --r-pill-lg: 24px; /* large CTA, promo card */
  --r-card: 16px;    /* app cards */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Shadows — subtle on light, almost-none on dark (cards
     separate by bg color, not glow) */
  --shadow-sm:   0 1px 2px rgba(15, 17, 21, .06), 0 1px 1px rgba(15,17,21,.04);
  --shadow-md:   0 4px 12px rgba(15, 17, 21, .08);
  --shadow-lg:   0 12px 32px rgba(15, 17, 21, .10);
  --shadow-cta:  0 4px 14px rgba(43, 122, 233, .35);
  --shadow-sec:  0 4px 14px rgba(255, 59, 79, .32);

  /* Motion */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
}

/* ============================================================
   SEMANTIC HOOKS — what designs should reference
   ============================================================ */
.wui-ds,
.wui-ds[data-theme="light"] {
  --bg:         var(--l-bg);
  --bg-muted:   var(--l-bg-muted);
  --bg-subtle:  var(--l-bg-subtle);
  --card:       var(--l-card);
  --border:     var(--l-border);
  --border-strong: var(--l-border-strong);

  --fg:         var(--l-fg);
  --fg-body:    var(--l-fg-body);
  --fg-muted:   var(--l-fg-muted);
  --fg-subtle:  var(--l-fg-subtle);
  --fg-invert:  var(--l-fg-invert);

  --btn-primary-bg:    var(--brand-blue);
  --btn-primary-fg:    #FFFFFF;
  --btn-secondary-bg:  var(--brand-red);
  --btn-secondary-fg:  #FFFFFF;
  --btn-outlined-border: var(--brand-indigo);
  --btn-outlined-fg:   var(--brand-indigo);
  --btn-ghost-fg:      var(--brand-indigo);
  --btn-disabled-bg:   #E5E9F0;
  --btn-disabled-fg:   #9CA3AF;
}

.wui-ds[data-theme="dark"] {
  --bg:         var(--d-bg);
  --bg-muted:   var(--d-bg-muted);
  --bg-subtle:  var(--d-card);
  --card:       var(--d-card);
  --border:     var(--d-border);
  --border-strong: var(--d-border-strong);

  --fg:         var(--d-fg);
  --fg-body:    var(--d-fg-body);
  --fg-muted:   var(--d-fg-muted);
  --fg-subtle:  var(--d-fg-subtle);
  --fg-invert:  #0F1115;

  --btn-primary-bg:    var(--brand-blue-hero);
  --btn-primary-fg:    #FFFFFF;
  --btn-secondary-bg:  var(--brand-red-hero);
  --btn-secondary-fg:  #FFFFFF;
  --btn-outlined-border: #F1F5F9;
  --btn-outlined-fg:   #F1F5F9;
  --btn-ghost-fg:      #F1F5F9;
  --btn-disabled-bg:   #2A2D35;
  --btn-disabled-fg:   #6B7280;
}

/* ============================================================
   BASE + SEMANTIC TYPE CLASSES
   ============================================================ */
.wui-ds, .wui-ds {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wui-ds .h1, .wui-ds h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl); line-height: var(--lh-4xl);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.wui-ds .h2, .wui-ds h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl); line-height: var(--lh-3xl);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.wui-ds .h3, .wui-ds h3 {
  font-size: var(--fs-2xl); line-height: var(--lh-2xl);
  font-weight: var(--fw-semi); letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.wui-ds .h4, .wui-ds h4 {
  font-size: var(--fs-xl); line-height: var(--lh-xl);
  font-weight: var(--fw-semi); color: var(--fg);
}
.wui-ds .h5, .wui-ds h5 {
  font-size: var(--fs-lg); line-height: var(--lh-lg);
  font-weight: var(--fw-semi); color: var(--fg);
}
.wui-ds .p, .wui-ds p {
  font-size: var(--fs-base); line-height: var(--lh-base);
  color: var(--fg-body);
}
.wui-ds .small { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--fg-muted); }
.wui-ds .mono  { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* Eyebrow / Section label — used in nav section titles ("WARMUP", "OUTREACH") */
.wui-ds .eyebrow {
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* Number display — dashboards ("89%", "100") */
.wui-ds .metric {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

/* Warmupinbox — Marketing homepage v2, dark+light */

.wui-ds, .wui-ds * { box-sizing: border-box; margin: 0; padding: 0; }

/* =========================================================
   THEME TOKENS — semantic layer for both modes
   ========================================================= */
.wui-ds, .wui-ds[data-theme="dark"] {
  --page-bg: #0F1115;
  --page-bg-alt: #0B0D11;
  --card-bg: #1E2128;
  --card-bg-raised: #23262E;
  --card-border: #2A2D35;
  --card-border-strong: #353842;
  --fg-primary: #F1F5F9;
  --fg-body: #E2E8F0;
  --fg-muted: #9CA3AF;
  --fg-subtle: #A6ADBA; /* WCAG AA on #1E2128 (~4.85:1) — bumped from #6B7280 (3.12:1) */
  --fg-disabled: #4B5563;
  --accent-primary: #4A93F0;
  --accent-secondary: #FF5A6B;
  --accent-success: #AEEA00;
  --accent-warning: #FFD600;
  --accent-info: #60A5FA;
  --accent-rose: #FB7185;
  --accent-primary-a: rgba(74,147,240,.14);
  --accent-success-a: rgba(174,234,0,.14);
  --accent-secondary-a: rgba(255,90,107,.14);
  --accent-warning-a: rgba(255,214,0,.14);
  --hover-row: #23262E;
  --shadow-card: 0 1px 2px rgba(0,0,0,.2);
  --shadow-heavy: 0 30px 60px -20px rgba(0,0,0,.55);
  --nav-bg: rgba(15,17,21,0.92); /* raised from .72 to clean up seam over hero radial gradient */
  --nav-border: #1B1E24;
  --input-bg: #0F1115;
  color-scheme: dark;
}

.wui-ds[data-theme="light"] {
  --page-bg: #FFFFFF;
  --page-bg-alt: #F5F7FA;
  --card-bg: #FFFFFF;
  --card-bg-raised: #F5F7FA;
  --card-border: #E5E9F0;
  --card-border-strong: #D5DCE5;
  --fg-primary: #1A237E;
  --fg-body: #1F2937;
  --fg-muted: #6B7280;
  --fg-subtle: #9CA3AF;
  --fg-disabled: #D1D5DB;
  --accent-primary: #2B7AE9;
  --accent-secondary: #FF3B4F;
  --accent-success: #7CB800;
  --accent-warning: #D4A600;
  --accent-info: #60A5FA;
  --accent-rose: #FB7185;
  --accent-primary-a: rgba(43,122,233,.10);
  --accent-success-a: rgba(174,234,0,.12);
  --accent-secondary-a: rgba(255,59,79,.10);
  --accent-warning-a: rgba(255,214,0,.12);
  --hover-row: #F5F7FA;
  --shadow-card: 0 1px 3px rgba(15,17,21,.06), 0 1px 2px rgba(15,17,21,.04);
  --shadow-heavy: 0 20px 40px -16px rgba(15,17,21,.12);
  --nav-bg: rgba(255,255,255,0.92);
  --nav-border: #E5E9F0;
  --input-bg: #F5F7FA;
  color-scheme: light;
}

.wui-ds { scroll-behavior: smooth; }
.wui-ds, .wui-ds { background: var(--page-bg); color: var(--fg-body); transition: background .26s, color .26s; } /* offset for sticky nav (68px height + breathing room) */
.wui-ds { font-family: var(--font-ui); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wui-ds a { color: inherit; text-decoration: none; }
.wui-ds img { display: block; }

/* Lucide icon base sizing */
.wui-ds [data-lucide] { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }

/* ---------- shared ---------- */
.wui-ds .wui-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* buttons */
.wui-ds .wui-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  border: 0; cursor: pointer; border-radius: 20px;
  padding: 12px 22px; transition: background .12s var(--ease-out), box-shadow .12s, transform .12s;
  /* max-width beats flex min-width:auto — long labels can't escape the container */
  white-space: nowrap;
  max-width: 100%;
}
.wui-ds .wui-btn-lg { padding: 16px 30px; border-radius: 24px; font-size: 15px; }
/* Compact button — for inline use inside inputs, dense toolbars, etc. */
.wui-ds .wui-btn-sm { padding: 10px 16px; border-radius: 16px; font-size: 13px; }
.wui-ds .wui-btn-sm [data-lucide], .wui-ds .wui-btn-sm .arrow { width: 13px; height: 13px; }
.wui-ds .wui-btn-primary { background: var(--accent-primary); color: #fff; }
.wui-ds .wui-btn-primary:hover { filter: brightness(.88); box-shadow: var(--shadow-cta); transform: translateY(-1px); }
.wui-ds .wui-btn-outlined {
  background: transparent; color: var(--fg-primary);
  box-shadow: inset 0 0 0 1.5px var(--card-border);
}
.wui-ds .wui-btn-outlined:hover { background: var(--card-bg-raised); box-shadow: inset 0 0 0 1.5px var(--card-border-strong); }
.wui-ds .wui-btn-ghost { background: transparent; color: var(--fg-primary); }
.wui-ds .wui-btn-ghost:hover { background: var(--card-bg-raised); }
.wui-ds .wui-btn .arrow { width: 14px; height: 14px; }

/* card */

/* ---------- SKIP LINK ---------- */
/* Visually hidden until keyboard focus, then a pill over the nav. Targets
   the <main id="main"> landmark in BaseLayout. */

/* ---------- ANNOUNCEMENT BAR ---------- */
/* Non-sticky strip above the nav carrying the brand-quality claim. Sits in
   normal flow, so it scrolls away under the sticky nav and leaves the
   megamenu (--nav-h relative to nav) and mobile-drawer offsets untouched.
   Faint brand tint + Lucide icon; text colors swap with the theme tokens. */
/* CTA portion — accent-colored. When wrapped in an <a>, the link inherits this
   and gets the hover underline below. */

/* --- Announcement bar motion --- */
/* Drop-in + typewriter play once per browser session: the head script adds
   `announce-animate` on the first motion-safe visit (then gates it via
   sessionStorage). The typewriter JS wraps the copy in `.announce-ch` spans and
   reveals them. No-JS and reduced-motion never get the class, so the bar stays
   fully visible and static. The arrow's ambient nudge runs on every page but is
   motion-safe only. */
@keyframes announce-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes announce-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes announce-arrow-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  78%           { transform: translateX(3px); }
}
/* Hidden until the typewriter reveals them, char by char. Scoped to animate
   mode so static/repeat loads stay visible even before JS runs. */

/* ---------- NAV ---------- */
.wui-ds .nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nav-border);
  transition: background .26s, border-color .26s;
}
.wui-ds .nav-inner {
  display: flex; align-items: center; gap: 32px;
  height: 68px;
}
.wui-ds .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--fg-primary); }
.wui-ds .nav-brand img { width: 26px; height: 26px; }
.wui-ds .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.wui-ds .nav-link {
  font-size: 14px; font-weight: 500; color: var(--fg-muted);
  padding: 8px 14px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .12s, background .12s;
}
.wui-ds .nav-link:hover { color: var(--fg-primary); background: var(--card-bg-raised); }
.wui-ds .nav-link .caret { width: 12px; height: 12px; opacity: .7; }
.wui-ds .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Theme toggle */
.wui-ds .theme-toggle {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--card-border);
  color: var(--fg-muted); cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
}
.wui-ds .theme-toggle:hover { background: var(--card-bg-raised); color: var(--fg-primary); }
.wui-ds .theme-toggle .t-sun, .wui-ds .theme-toggle .t-moon { position: absolute; width: 16px; height: 16px; transition: opacity .18s; }
.wui-ds[data-theme="dark"] .theme-toggle .t-sun { opacity: 1; }
.wui-ds[data-theme="dark"] .theme-toggle .t-moon { opacity: 0; }
.wui-ds[data-theme="light"] .theme-toggle .t-sun { opacity: 0; }
.wui-ds[data-theme="light"] .theme-toggle .t-moon { opacity: 1; }

/* ---------- HERO ---------- */
.wui-ds .hero .wui-container { position: relative; z-index: 1; }
/* "NETWORK LIVE" treatment stripped to a status dot + muted text — reserves --accent-success
   for actual product status (the deliverability sticker, hero check-marks). */
.wui-ds .hero-meta .stars [data-lucide] { width: 14px; height: 14px; fill: currentColor; }

/* product mock */
.wui-ds .mock-crumbs .chip [data-lucide] { width: 12px; height: 12px; }
.wui-ds .mock-status [data-lucide] { width: 10px; height: 10px; }

/* ---------- LOGO STRIP ---------- */
/* Trust strip — overrides .logo-strip defaults for badge cards */
.wui-ds .logo-strip .trust-row .trust-badge .stars [data-lucide] {
  width: 13px; height: 13px; fill: currentColor;
}

/* ---------- PLACEMENT TEST (FREE TOOL) ---------- */
.wui-ds .placement-meta .m [data-lucide] { width: 13px; height: 13px; color: var(--accent-primary); flex-shrink: 0; }

/* Stepper */

/* Two-column layout: form left, sample report right */

/* Sample report preview */
.wui-ds .report-title [data-lucide] { width: 14px; height: 14px; color: var(--accent-primary); }
.wui-ds .rp-tag [data-lucide] { width: 11px; height: 11px; flex-shrink: 0; }
.wui-ds .rf-item [data-lucide] { width: 14px; height: 14px; color: var(--accent-success); }
.wui-ds .rf-item.rf-warn [data-lucide] { color: var(--accent-warning); }

/* Tool */
.wui-ds .tool-input [data-lucide] { width: 16px; height: 16px; color: var(--fg-muted); flex-shrink: 0; }
/* .tool-input-btn — alias to the canonical .wui-btn .wui-btn-sm .wui-btn-primary so consumers
   that haven't migrated still render correctly. New markup should use .wui-btn variants directly. */
.wui-ds .tool-input-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-primary); color: #fff;
  border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--font-ui); font-weight: 600;
  padding: 10px 16px; border-radius: 16px; font-size: 13px;
  transition: background .12s var(--ease-out), box-shadow .12s, transform .12s, filter .12s;
}
.wui-ds .tool-input-btn:hover { filter: brightness(.88); box-shadow: var(--shadow-cta); transform: translateY(-1px); }
.wui-ds .tool-input-btn [data-lucide] { width: 13px; height: 13px; }

/* Shake animation */
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* Seed block */
.wui-ds .seed-addr [data-lucide] { width: 14px; height: 14px; color: var(--fg-muted); flex-shrink: 0; }
.wui-ds .seed-copy [data-lucide] { width: 12px; height: 12px; }
.wui-ds .seed-actions .wui-btn [data-lucide] { width: 14px; height: 14px; }
.wui-ds .link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; font-family: var(--font-ui); font-size: 13px;
  color: var(--fg-muted); cursor: pointer; transition: color .12s;
}
.wui-ds .link-btn:hover { color: var(--fg-primary); }
.wui-ds .link-btn [data-lucide] { width: 13px; height: 13px; }

/* Result panel */

/* Empty / idle */
.wui-ds .empty-ico [data-lucide] { width: 32px; height: 32px; color: var(--fg-subtle); }

/* Running */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.wui-ds .rr [data-lucide] { width: 14px; height: 14px; color: var(--fg-subtle); }
.wui-ds .rr.done [data-lucide] { color: var(--accent-success); }

/* Result */
.wui-ds .rb-head span [data-lucide] { width: 13px; height: 13px; color: var(--fg-subtle); }
.wui-ds .rf-item [data-lucide] { width: 13px; height: 13px; color: var(--accent-warning); }
.wui-ds .rf-cta [data-lucide] { width: 13px; height: 13px; }

/* ---------- STATS ---------- */
/* Stat units are decorative — color by position implied a status mapping that didn't exist.
   All units now read in --fg-muted so the numerals carry the message. */

/* ---------- HOW IT WORKS ---------- */
/* Mirror the .how-grid columns exactly (repeat(3,1fr) + 20px gap) so each
   circle sits dead-center over its card. Connector lines are drawn between
   adjacent circle centers as pseudo-elements (behind the circles). */

/* ===== In-card next-step text links (stat card + last how-it-works step) ===== */
.wui-ds .card-link [data-lucide] { width: 15px; height: 15px; }

/* ---------- REAL VS SYNTHETIC ---------- */
.wui-ds .vs-list [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.wui-ds .vs-real .vs-list [data-lucide] { color: var(--accent-success); }
.wui-ds .vs-synth .vs-list [data-lucide] { color: var(--accent-secondary); }
/* Pin the optional in-card link to the bottom so the third card's text aligns
   with the other two and the cards read as the same length. */

/* viz: inbox list */

/* viz: engagement cluster */
.wui-ds .viz-eng .n [data-lucide] { width: 14px; height: 14px; }
.wui-ds .viz-eng .n.c [data-lucide] { width: 20px; height: 20px; }

/* viz: optimize */
.wui-ds .viz-opt .stages .s [data-lucide] { width: 12px; height: 12px; }

/* ---------- PROVIDERS ---------- */
.wui-ds .provider-ico-mono [data-lucide] { width: 24px; height: 24px; }
/* Real provider logos (full colour). AWS uses its wordmark via a theme-adaptive mask. */
/* CTA below the provider grid (replaces the dead "30+ more" tile). */

/* ---------- PERSONAS ---------- */
/* Direction is encoded on the unit/sign only (e.g. <span class="d up">+</span>),
   so digits stay neutral and the eye reads delta rather than raw color. */
.wui-ds .persona-viz .campaign .ico [data-lucide] { width: 16px; height: 16px; }

/* ---------- TESTIMONIALS ---------- */

/* case-study number tiles — the proof above the quotes */
.wui-ds .t-card .stars [data-lucide] { width: 16px; height: 16px; fill: currentColor; }

/* ---------- CTA ---------- */
.wui-ds .big-cta-inner .meta .i [data-lucide] { width: 12px; height: 12px; color: var(--accent-success); }

/* ---------- FAQ ---------- */
/* ===== WHY WARMUP ===== */
.wui-ds .why-nav { display: flex; flex-direction: column; }
.wui-ds .faq-aside-cta .wui-btn { justify-content: center; width: 100%; white-space: normal; text-align: center; }

/* ---------- FOOTER ---------- */
.wui-ds .footer {
  padding: 64px 0 40px; background: var(--page-bg-alt); border-top: 1px solid var(--nav-border);
  transition: background .26s;
}
.wui-ds .footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid var(--nav-border);
  align-items: start;
}
.wui-ds .footer-brand { display: flex; flex-direction: column; gap: 16px; }
.wui-ds .footer-brand .b { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--fg-primary); }
.wui-ds .footer-brand .b img { width: 24px; height: 24px; }
.wui-ds .footer-brand p { font-size: 13px; color: var(--fg-muted); line-height: 20px; max-width: 280px; }
.wui-ds .footer-brand .socials { display: flex; gap: 8px; margin-top: 4px; }
.wui-ds .footer-brand .socials a {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-border);
  color: var(--fg-muted); transition: all .12s;
}
.wui-ds .footer-brand .socials a:hover { color: var(--fg-primary); background: var(--card-bg-raised); }
.wui-ds .footer-brand .socials [data-lucide] { width: 14px; height: 14px; }

.wui-ds .footer-col h4 {
  font-size: 11px; color: var(--fg-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px;
}
.wui-ds .footer-col a {
  display: block; font-size: 13px; color: var(--fg-muted); padding: 4px 0;
  transition: color .12s;
}
.wui-ds .footer-col a:hover { color: var(--fg-primary); }

.wui-ds .footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px;
  font-size: 12px; color: var(--fg-subtle);
}
.wui-ds .footer-bottom .right { display: flex; gap: 20px; }

/* reCAPTCHA v3 floating badge: hidden — it overlapped the footer legal links
   on mobile. Google permits hiding it when the attribution text is shown
   instead; pages that load reCAPTCHA render a .recaptcha-note line. */

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .wui-ds .nav-links { display: none; }
}
@media (max-width: 960px) {
  /* The 1—2—3 stepper aligns over the 3-across cards; once they stack it's
     just a disconnected horizontal strip, so hide it. */
  /* Mock metrics drop from 4-col desktop strip to 2x2 — avoids the 4-row
     vertical stack that blew out the hero on phones. */
  .wui-ds .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* Tighter page gutters on phones: 32px each side ate ~16% of a 390px
     viewport and starved multi-column grids (persona metrics, cs-cards). */
  .wui-ds .wui-container { padding: 0 16px; }

  /* Hero copy: keep it inside the gutters. The H1's max-content was pushing
     the copy block wider than the container, clipping the type at the edges. */

  /* Hero CTAs: stack full-width so the two buttons don't run past the gutters. */
  .wui-ds .hero-cta .wui-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }

  /* Hero feature selector: one-line horizontal scroll strip instead of wrapping. */

  /* Hero mock: drop the long email crumb — it overflows and gets clipped on phones. */

  /* Personas: tabs wrap to rows instead of clipping; tighten the card so the
     heading fits inside its (overflow-hidden) box. */
  /* minmax(0,1fr) caps the single column at the card width — the metric labels
     (e.g. "PLACEMENT") were forcing it wider, clipping the 3rd tile + the viz. */
  /* Campaign rows: tighten chrome so the text has room (was wrapping per-word). */

  /* Big CTA: stack the buttons full-width instead of clipping the second one. */
  .wui-ds .big-cta-inner .cta-row .wui-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }

  /* Trust badges: one-line horizontal scroll strip instead of wrapping/stacking. */

  /* Footer legal bar: stack copyright above the legal links instead of
     wrapping "…All rights reserved." around them across three lines. */
  .wui-ds .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Persona metric tiles: "PROMOTIONS TAB" wrapped to two lines and broke the
     row rhythm; smaller label + tighter tile padding keep every label on
     one line at 390px. */
}

/* ---------- Accessibility primitives ---------- */
/* Focus-visible: every interactive control gets a clear keyboard outline.
   Was previously only set on .range-slider — WCAG 2.4.7 AA blocker. */
.wui-ds .wui-btn:focus-visible,
.wui-ds .wui-btn-ghost:focus-visible,
.wui-ds .nav-link:focus-visible,
.wui-ds .tool-input-btn:focus-visible,
.wui-ds .theme-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Reduced motion: catches every animation + transition + transform-on-hover
   in one pass. Honors WCAG 2.3.3. !important is intentional — we want this
   to win over any later transition declaration. */
@media (prefers-reduced-motion: reduce) {
  .wui-ds, .wui-ds *, .wui-ds *::before, .wui-ds *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   MEGAMENU NAVIGATION
   ========================================================= */

/* Wrapper container that holds all panels */
.wui-ds .mega-wrap {
  position: fixed;
  left: 0; right: 0;
  top: var(--nav-h, 68px);
  z-index: 60;
  pointer-events: none;
}
.wui-ds .mega-wrap[hidden] { display: none; }

/* Single panel */
.wui-ds .mega {
  position: relative;
  left: 0; right: 0;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.45);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.wui-ds .mega[hidden] { display: none; }
.wui-ds[data-theme="light"] .mega {
  box-shadow: 0 18px 40px -16px rgba(15,17,21,0.18);
}

.wui-ds .mega[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* Hover-bridge: invisible strip between trigger and panel so the cursor
   doesn't fall through the gap and trigger close. */
.wui-ds .mega::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px; height: 16px;
}

/* Panel inner layouts */
.wui-ds .mega-inner {
  display: grid;
  gap: 36px;
  padding: 32px 32px 40px;
}
.wui-ds .mega-cols-4 { grid-template-columns: 1.1fr 0.9fr 0.9fr 1.1fr; }
.wui-ds .mega-cols-2-wide { grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1100px; }
.wui-ds .mega-cols-resources { grid-template-columns: 2.4fr 1fr; gap: 48px; }

/* Column headers */
.wui-ds .mega-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 16px;
}
.wui-ds .mega-eyebrow--row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}

/* Lists */
.wui-ds .mega-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wui-ds .mega-list--compact { gap: 2px; }
.wui-ds .mega-list--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wui-ds .mega-list--learn { display: grid; grid-template-columns: 1fr; gap: 4px; }
.wui-ds .mega-list--cases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wui-ds .mega-list--tools { gap: 1px; }

/* Big icon + two-line item (used for primary nav links inside a megamenu) */
.wui-ds .mega-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--fg-body);
  transition: background .12s, color .12s;
  font-size: 14px;
}
.wui-ds .mega-item:hover {
  background: var(--card-bg-raised);
  color: var(--fg-primary);
}
.wui-ds .mega-ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--card-bg-raised);
  color: var(--accent-primary);
}
.wui-ds .mega-ico [data-lucide] { width: 16px; height: 16px; }
/* Per-feature colour overrides removed (2026-06-05) — feature/solutions icons are
   monochrome per the design system; they fall back to the .mega-ico base above
   (neutral raised tile + brand-blue icon, which is also the hover state).
   Integration provider icons (.mega-logo-ico) keep their brand colours below. */

.wui-ds .mega-text {
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.35;
}
.wui-ds .mega-text b {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-primary);
}
.wui-ds .mega-text em {
  font-style: normal;
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* Compact single-line item with icon (used for integrations/support) */
.wui-ds .mega-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--fg-body);
  font-size: 13px;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.wui-ds .mega-item-row:hover {
  background: var(--card-bg-raised);
  color: var(--fg-primary);
}
.wui-ds .mega-logo {
  width: 18px; height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Amazon SES uses the AWS wordmark as a theme-adaptive CSS mask (reuses the same
   amazon.svg the /integrations/ page does — one cached file, no extra load). */
.wui-ds .mega-logo--aws {
  display: inline-block;
  background-color: #F1F5F9;
  -webkit-mask: url(/assets/integrations/fav/amazon.svg) center / contain no-repeat;
  mask: url(/assets/integrations/fav/amazon.svg) center / contain no-repeat;
}
.wui-ds[data-theme="light"] .mega-logo--aws { background-color: #232F3E; }
.wui-ds .mega-logo-ico {
  width: 16px; height: 16px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
/* Integration icons are monochrome in the menu (icons here are only 16px — too
   small for legible provider logos). The real full-colour provider logos live on
   the /integrations/ page where the tiles are 48px. (2026-06-05) */
.wui-ds .mega-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-success);
  margin-left: -4px; /* sit snug to the "Status" label, not pushed to the column edge */
  box-shadow: 0 0 0 3px var(--accent-success-a);
}

/* Footer link inside a column */
.wui-ds .mega-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--accent-primary);
  margin-top: 12px;
  transition: gap .12s;
}
.wui-ds .mega-link:hover { gap: 9px; }
.wui-ds .mega-link [data-lucide] { width: 13px; height: 13px; }
.wui-ds .mega-link--inline { margin-top: 0; font-size: 12px; }

/* ----- Featured promo card (Product menu) ----- */
.wui-ds .mega-col--feature { background: var(--page-bg-alt); margin: -32px -32px -40px 0; padding: 28px; border-left: 1px solid var(--card-border); }
.wui-ds .mega-feature {
  display: flex; flex-direction: column; gap: 16px;
  height: 100%;
}
.wui-ds .mega-feature-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent-success-a); color: var(--accent-success);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  align-self: flex-start;
}
.wui-ds .mega-feature-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-success); }
.wui-ds .mega-feature-art {
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--card-border);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.wui-ds .mff-row {
  display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 8px;
  font-size: 11px;
}
.wui-ds .mff-prov { color: var(--fg-primary); font-weight: 500; }
.wui-ds .mff-bar { height: 4px; background: var(--card-border); border-radius: 999px; overflow: hidden; }
.wui-ds .mff-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent-success); }
.wui-ds .mff-row--bad .mff-bar span { background: var(--accent-secondary); }
.wui-ds .mff-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 4px;
  background: var(--accent-success-a); color: var(--accent-success);
}
.wui-ds .mff-row--bad .mff-tag { background: var(--accent-secondary-a); color: var(--accent-secondary); }
.wui-ds .mega-feature-body { display: flex; flex-direction: column; gap: 6px; }
.wui-ds .mega-feature-body b { font-size: 16px; font-weight: 700; color: var(--fg-primary); letter-spacing: -0.01em; }
.wui-ds .mega-feature-body em { font-style: normal; font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
.wui-ds .mega-feature-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--accent-primary);
  margin-top: 4px;
  transition: gap .12s;
}
.wui-ds .mega-feature:hover .mega-feature-cta { gap: 9px; }
.wui-ds .mega-feature-cta [data-lucide] { width: 13px; height: 13px; }

/* ----- Case studies (Solutions) ----- */
.wui-ds .mega-case {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--card-bg-raised);
  box-shadow: inset 0 0 0 1px var(--card-border);
  transition: transform .14s, box-shadow .14s;
}
.wui-ds .mega-case:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--card-border-strong), 0 4px 12px -4px rgba(0,0,0,0.2);
}
.wui-ds .mega-case-name { font-size: 13px; font-weight: 700; color: var(--fg-primary); letter-spacing: -0.01em; }
.wui-ds .mega-case-stat { font-size: 12px; color: var(--fg-muted); }
.wui-ds .mega-case-stat b { font-weight: 700; color: var(--fg-primary); }

/* ----- Tools grid (Resources) ----- */
.wui-ds .mega-tools-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.wui-ds .mega-tools-group-title {
  font-size: 11px; font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.wui-ds .mega-list--tools li a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-body);
  transition: background .12s, color .12s;
}
.wui-ds .mega-list--tools li a:hover {
  background: var(--card-bg-raised);
  color: var(--fg-primary);
}
.wui-ds .mega-list--tools [data-lucide] {
  width: 14px; height: 14px;
  color: var(--fg-subtle);
  flex-shrink: 0;
}
.wui-ds .mega-list--tools li a:hover [data-lucide] { color: var(--accent-primary); }

/* ----- Trigger button (replaces nav-link <a> for buttons) ----- */
.wui-ds .nav-trigger {
  background: none; border: none; cursor: pointer;
  font-family: inherit;
}
.wui-ds .nav-item { position: relative; }
.wui-ds .nav-trigger[aria-expanded="true"] {
  color: var(--fg-primary);
  background: var(--card-bg-raised);
}
.wui-ds .nav-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }
.wui-ds .nav-trigger .caret { transition: transform .14s; }

/* ----- Density variants ----- */
.wui-ds [data-density="compact"] .mega-inner { padding: 22px 32px 28px; gap: 28px; }
.wui-ds [data-density="compact"] .mega-item { padding: 7px 10px; }
.wui-ds [data-density="compact"] .mega-text em { display: none; }
.wui-ds [data-density="compact"] .mega-list--learn .mega-item { gap: 10px; }

/* ----- Icon variants ----- */
.wui-ds [data-icons="off"] .mega-ico,
.wui-ds [data-icons="off"] .mega-list--tools [data-lucide],
.wui-ds [data-icons="off"] .mega-logo,
.wui-ds [data-icons="off"] .mega-logo-ico { display: none !important; }
.wui-ds [data-icons="off"] .mega-list--tools li a { padding-left: 10px; }
.wui-ds [data-icons="off"] .mega-item { padding-left: 10px; }

/* ----- Panel style: anchored card (not full-bleed) ----- */
.wui-ds [data-panel="card"] .mega {
  left: auto; right: auto;
  width: auto;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  margin: 8px 0 0;
  max-width: 920px;
}
.wui-ds [data-panel="card"] .mega .mega-inner { padding: 24px; }
.wui-ds [data-panel="card"] .mega .mega-col--feature { margin: -24px -24px -24px 0; }
.wui-ds [data-panel="card"] .mega-cols-resources { grid-template-columns: 2fr 1fr; gap: 36px; }
.wui-ds [data-panel="card"] .mega-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* When card mode is active, panels position relative to nav-item */
.wui-ds [data-panel="card"] .mega-wrap {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: 95vw;
}

/* ----- Mobile nav: burger + drawer ----- */
.wui-ds .nav-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 10px;
  background: transparent; border: 1px solid var(--card-border);
  color: var(--fg-primary); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wui-ds .nav-burger:hover { background: var(--card-bg-raised); }
.wui-ds .nav-burger [data-lucide] { width: 20px; height: 20px; }
.wui-ds .nav-burger .nb-close { display: none; }
.wui-ds .nav-burger[aria-expanded="true"] .nb-open { display: none; }
.wui-ds .nav-burger[aria-expanded="true"] .nb-close { display: inline-flex; }

.wui-ds .nav-mobile { display: none; }
.wui-ds .nm-inner { display: flex; flex-direction: column; padding: 8px 0 32px; }
.wui-ds .nm-acc { border-bottom: 1px solid var(--card-border); }
.wui-ds .nm-acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px; font-size: 16px; font-weight: 600; color: var(--fg-primary);
}
.wui-ds .nm-acc summary::-webkit-details-marker { display: none; }
.wui-ds .nm-chev { width: 18px; height: 18px; color: var(--fg-muted); transition: transform .18s; flex-shrink: 0; }
.wui-ds .nm-acc[open] .nm-chev { transform: rotate(180deg); }
.wui-ds .nm-acc a {
  display: block; padding: 11px 2px 11px 16px;
  font-size: 15px; color: var(--fg-muted); transition: color .12s;
}
.wui-ds .nm-acc a:last-child { padding-bottom: 18px; }
.wui-ds .nm-acc a:hover { color: var(--fg-primary); }
.wui-ds .nm-link {
  display: block; padding: 16px 2px; font-size: 16px; font-weight: 600;
  color: var(--fg-primary); border-bottom: 1px solid var(--card-border);
}
.wui-ds .nm-cta { display: flex; flex-direction: column; gap: 10px; padding: 22px 2px 0; }
.wui-ds .nm-cta .wui-btn { width: 100%; justify-content: center; padding: 14px 20px; white-space: normal; text-align: center; }
.wui-ds .nm-cta .wui-btn-ghost { border: 1px solid var(--card-border); }

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .wui-ds .mega-wrap { display: none; }
  .wui-ds .nav-trigger .caret { display: none; }
  .wui-ds .nav-links { display: none; }
  .wui-ds .nav-right .wui-btn { display: none; }
  .wui-ds .nav-burger { display: inline-flex; }
  .wui-ds .nav-mobile.is-open {
    display: block;
    position: fixed; left: 0; right: 0;
    top: var(--nav-h, 68px); bottom: 0;
    background: var(--page-bg);
    border-top: 1px solid var(--card-border);
    overflow-y: auto;
    z-index: 49;
  }
}
.wui-ds { display: contents; }