/*!
* WIZSP UI — CSS framework for HTML sites & dashboards
* Version 1.0.0 · 2026-10
* Brand source: WIZSP business card (Navy CMYK 100/85/0/40, Signal Blue CMYK 81/57/0/20, Outfit)
*
* Usage:
*
*
*
*
* Contents
* 01 Tokens 11 Navigation 21 Progress / loaders
* 02 Dark theme 12 Breadcrumbs / pager 22 Avatars
* 03 Reset 13 Tabs / segmented 23 Tooltip / popover
* 04 Typography 14 Accordion 24 Section blocks (hero, CTA, features, stats, pricing, testimonial, logos, FAQ, timeline, steps, team)
* 05 Layout 15 Badges / tags 25 Footer
* 06 Buttons 16 Alerts / toasts 26 Dashboard shell (sidebar, topbar)
* 07 Links 17 Modal / drawer 27 Dashboard widgets (KPI, chart, activity, kanban, filters, empty states)
* 08 Forms 18 Dropdown / menu 28 Utilities
* 09 Boxes / cards 19 Tables 29 Motion & accessibility
* 10 Header 20 Lists / media 30 Print
*/
/* ===================================================================== 01 TOKENS */
:root {
/* Brand */
--wz-navy: #001799;
--wz-blue: #2758CC;
--wz-white: #FFFFFF;
/* Navy / blue scale */
--wz-navy-950: #000A47;
--wz-navy-900: #000E6B;
--wz-navy-800: #001286;
--wz-navy-700: #001799;
--wz-blue-600: #2758CC;
--wz-blue-500: #3B6BDB;
--wz-blue-400: #6A8EE3;
--wz-blue-300: #8FA8E8;
--wz-blue-200: #C3D1F3;
--wz-blue-100: #E3E9F9;
--wz-blue-50: #F3F6FD;
/* Neutrals (navy-tinted) */
--wz-ink: #0B1033;
--wz-slate-800: #252B4D;
--wz-slate-700: #363C5E;
--wz-slate-600: #4A5070;
--wz-slate-500: #6A7090;
--wz-slate-400: #8A8FA8;
--wz-slate-300: #B6BACB;
--wz-line: #DCE0EC;
--wz-line-soft: #EBEEF5;
--wz-surface-2: #F7F8FB;
--wz-paper: #FFFFFF;
/* Semantic */
--wz-success: #1E7A4F; --wz-success-bg: #E6F3EC; --wz-success-line: #B4DCC6;
--wz-warning: #B26B00; --wz-warning-bg: #FBF1E0; --wz-warning-line: #EDCF9C;
--wz-danger: #C42B3B; --wz-danger-bg: #FBE9EB; --wz-danger-line: #EFB8BF;
--wz-info: #2758CC; --wz-info-bg: #E3E9F9; --wz-info-line: #C3D1F3;
/* Chart palette (ordered) */
--wz-chart-1: #001799;
--wz-chart-2: #2758CC;
--wz-chart-3: #8FA8E8;
--wz-chart-4: #1E7A4F;
--wz-chart-5: #B26B00;
--wz-chart-6: #6A7090;
/* Role aliases (themeable) */
--wz-bg: var(--wz-paper);
--wz-bg-subtle: var(--wz-blue-50);
--wz-bg-muted: var(--wz-surface-2);
--wz-bg-inverse: var(--wz-navy);
--wz-text: var(--wz-ink);
--wz-text-muted: var(--wz-slate-600);
--wz-text-subtle: var(--wz-slate-500);
--wz-text-inverse: var(--wz-white);
--wz-heading: var(--wz-navy);
--wz-accent: var(--wz-blue);
--wz-border-color: var(--wz-line);
--wz-border-strong: var(--wz-slate-300);
/* Typography */
--wz-font: 'Outfit', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--wz-font-greek: 'Manrope', 'Outfit', system-ui, sans-serif;
--wz-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
--wz-text-display: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
--wz-text-h1: clamp(2.25rem, 1.75rem + 2.2vw, 3.25rem);
--wz-text-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
--wz-text-h3: 1.375rem;
--wz-text-h4: 1.125rem;
--wz-text-h5: 1rem;
--wz-text-lead: 1.25rem;
--wz-text-body: 1.0625rem;
--wz-text-md: 1rem;
--wz-text-small: 0.875rem;
--wz-text-xs: 0.75rem;
--wz-text-label: 0.8125rem;
--wz-weight-light: 300;
--wz-weight-regular: 400;
--wz-weight-medium: 500;
--wz-weight-semibold: 600;
--wz-weight-bold: 700;
--wz-leading-tight: 1.1;
--wz-leading-snug: 1.3;
--wz-leading-body: 1.6;
--wz-tracking-display: -0.02em;
--wz-tracking-heading: -0.01em;
--wz-tracking-label: 0.12em;
/* Spacing — 4px base */
--wz-space-0: 0;
--wz-space-1: 4px;
--wz-space-2: 8px;
--wz-space-3: 12px;
--wz-space-4: 16px;
--wz-space-5: 24px;
--wz-space-6: 32px;
--wz-space-7: 48px;
--wz-space-8: 64px;
--wz-space-9: 96px;
--wz-space-10: 128px;
--wz-section-y: clamp(56px, 8vw, 96px);
--wz-gutter: clamp(20px, 4vw, 48px);
/* Layout */
--wz-container: 1200px;
--wz-container-wide: 1440px;
--wz-container-narrow: 760px;
--wz-measure: 65ch;
--wz-header-h: 72px;
--wz-sidebar-w: 260px;
--wz-sidebar-w-collapsed: 72px;
--wz-topbar-h: 64px;
/* Shape */
--wz-radius-0: 0;
--wz-radius-1: 2px;
--wz-radius-2: 4px;
--wz-radius-pill: 999px;
--wz-radius: var(--wz-radius-1);
--wz-border-w: 1px;
--wz-border: var(--wz-border-w) solid var(--wz-border-color);
--wz-border-accent: 2px solid var(--wz-navy);
/* Elevation — used only for floating layers (menus, modals, toasts) */
--wz-shadow-0: none;
--wz-shadow-float: 0 1px 2px rgba(11, 16, 51, .06), 0 8px 24px rgba(11, 16, 51, .10);
--wz-shadow-modal: 0 24px 64px rgba(0, 10, 71, .28);
--wz-overlay: rgba(0, 10, 71, .55);
/* Focus */
--wz-focus-ring: 0 0 0 3px var(--wz-blue-100), 0 0 0 4px var(--wz-blue);
--wz-focus-ring-inverse: 0 0 0 3px var(--wz-navy), 0 0 0 4px var(--wz-white);
/* Motion */
--wz-ease: cubic-bezier(.2, .7, .2, 1);
--wz-ease-in-out: cubic-bezier(.65, 0, .35, 1);
--wz-dur-1: 120ms;
--wz-dur-2: 180ms;
--wz-dur-3: 260ms;
/* Z-index */
--wz-z-header: 100;
--wz-z-dropdown: 200;
--wz-z-drawer: 300;
--wz-z-modal: 400;
--wz-z-toast: 500;
--wz-z-tooltip: 600;
/* Controls */
--wz-control-h-sm: 36px;
--wz-control-h: 44px;
--wz-control-h-lg: 52px;
color-scheme: light;
}
/* ===================================================================== 02 DARK THEME */
[data-theme="dark"], .wz-theme-dark {
--wz-bg: var(--wz-navy-950);
--wz-bg-subtle: #00105A;
--wz-bg-muted: #000D52;
--wz-bg-inverse: var(--wz-white);
--wz-text: #E9EDFA;
--wz-text-muted: #A9B3D9;
--wz-text-subtle: #8792BF;
--wz-text-inverse: var(--wz-navy);
--wz-heading: var(--wz-white);
--wz-accent: var(--wz-blue-300);
--wz-border-color: #1C2A7A;
--wz-border-strong: #33449A;
--wz-paper: var(--wz-navy-950);
--wz-line: #1C2A7A;
--wz-line-soft: #13206B;
--wz-surface-2: #000D52;
--wz-success-bg: rgba(30, 122, 79, .18); --wz-success: #5FC394;
--wz-warning-bg: rgba(178, 107, 0, .18); --wz-warning: #F0B35A;
--wz-danger-bg: rgba(196, 43, 59, .2); --wz-danger: #F2828E;
--wz-info-bg: rgba(143, 168, 232, .14); --wz-info: var(--wz-blue-300);
--wz-focus-ring: 0 0 0 3px var(--wz-navy-950), 0 0 0 4px var(--wz-blue-300);
color-scheme: dark;
}
/* Navy surface section (like the back of the card) */
.wz-surface-navy {
--wz-bg: var(--wz-navy);
--wz-bg-subtle: var(--wz-navy-800);
--wz-text: var(--wz-white);
--wz-text-muted: var(--wz-blue-100);
--wz-text-subtle: var(--wz-blue-300);
--wz-heading: var(--wz-white);
--wz-accent: var(--wz-blue-300);
--wz-border-color: rgba(255, 255, 255, .18);
--wz-focus-ring: var(--wz-focus-ring-inverse);
background: var(--wz-navy);
color: var(--wz-white);
}
.wz-surface-subtle { background: var(--wz-bg-subtle); }
.wz-surface-muted { background: var(--wz-bg-muted); }
/* ===================================================================== 03 RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--wz-font);
font-size: var(--wz-text-body);
line-height: var(--wz-leading-body);
color: var(--wz-text);
background: var(--wz-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
:lang(el) { font-family: var(--wz-font-greek); }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }
::selection { background: var(--wz-blue-100); color: var(--wz-navy); }
:focus-visible { outline: none; box-shadow: var(--wz-focus-ring); }
/* ===================================================================== 04 TYPOGRAPHY */
h1, h2, h3, h4, h5, h6, .wz-h1, .wz-h2, .wz-h3, .wz-h4, .wz-h5, .wz-display {
margin: 0 0 .5em;
font-weight: var(--wz-weight-semibold);
color: var(--wz-heading);
line-height: var(--wz-leading-tight);
letter-spacing: var(--wz-tracking-display);
text-wrap: balance;
}
.wz-display { font-size: var(--wz-text-display); line-height: 1.02; letter-spacing: -0.025em; }
h1, .wz-h1 { font-size: var(--wz-text-h1); }
h2, .wz-h2 { font-size: var(--wz-text-h2); line-height: 1.15; }
h3, .wz-h3 { font-size: var(--wz-text-h3); line-height: var(--wz-leading-snug); letter-spacing: var(--wz-tracking-heading); }
h4, .wz-h4 { font-size: var(--wz-text-h4); line-height: var(--wz-leading-snug); letter-spacing: 0; }
h5, .wz-h5, h6 { font-size: var(--wz-text-h5); line-height: var(--wz-leading-snug); letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
.wz-lead { font-size: var(--wz-text-lead); line-height: 1.55; color: var(--wz-text-muted); }
.wz-small, small { font-size: var(--wz-text-small); }
.wz-xs { font-size: var(--wz-text-xs); }
.wz-muted { color: var(--wz-text-muted); }
.wz-subtle { color: var(--wz-text-subtle); }
.wz-label, .wz-eyebrow {
display: inline-block;
font-size: var(--wz-text-label);
font-weight: var(--wz-weight-medium);
letter-spacing: var(--wz-tracking-label);
text-transform: uppercase;
color: var(--wz-accent);
line-height: 1.4;
}
.wz-label--plain { text-transform: none; } /* card style: "Co-Founder" */
strong, b { font-weight: var(--wz-weight-semibold); }
em, i { font-style: italic; }
mark { background: var(--wz-blue-100); color: var(--wz-navy); padding: 0 .2em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; } sub { bottom: -.25em; }
blockquote, .wz-quote {
margin: var(--wz-space-6) 0;
padding: 0 0 0 var(--wz-space-5);
border-left: 2px solid var(--wz-navy);
font-size: var(--wz-text-lead);
line-height: 1.5;
color: var(--wz-heading);
}
blockquote cite, .wz-quote cite { display: block; margin-top: var(--wz-space-3); font-size: var(--wz-text-small); font-style: normal; color: var(--wz-text-muted); }
.wz-pullquote { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: var(--wz-weight-medium); letter-spacing: -0.01em; line-height: 1.25; color: var(--wz-heading); border: 0; padding: 0; }
code, kbd, samp, pre { font-family: var(--wz-font-mono); font-size: .875em; }
code { background: var(--wz-bg-subtle); color: var(--wz-navy); padding: .12em .4em; border-radius: var(--wz-radius-1); }
[data-theme="dark"] code { color: var(--wz-blue-200); }
kbd { display: inline-block; padding: .1em .45em; border: var(--wz-border); border-bottom-width: 2px; border-radius: var(--wz-radius-2); background: var(--wz-bg); font-size: .8em; }
pre { margin: 0 0 1.5em; padding: var(--wz-space-5); background: var(--wz-navy-950); color: #E3E9F9; overflow: auto; line-height: 1.7; border-radius: var(--wz-radius-0); }
pre code { background: none; color: inherit; padding: 0; }
hr, .wz-divider { border: 0; border-top: var(--wz-border); margin: var(--wz-space-7) 0; }
.wz-divider--strong { border-top: var(--wz-border-accent); }
.wz-divider--label { display: flex; align-items: center; gap: var(--wz-space-3); border: 0; font-size: var(--wz-text-label); color: var(--wz-text-subtle); letter-spacing: var(--wz-tracking-label); text-transform: uppercase; }
.wz-divider--label::before, .wz-divider--label::after { content: ""; flex: 1; border-top: var(--wz-border); }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: .35em; }
li::marker { color: var(--wz-accent); }
dl { margin: 0 0 1em; }
dt { font-weight: var(--wz-weight-semibold); color: var(--wz-heading); }
dd { margin: 0 0 .75em; color: var(--wz-text-muted); }
/* Long-form article content */
.wz-prose { max-width: var(--wz-measure); }
.wz-prose > * + * { margin-top: 0; }
.wz-prose h2 { margin-top: 2em; }
.wz-prose h3 { margin-top: 1.6em; }
.wz-prose img, .wz-prose figure { margin: 2em 0; }
.wz-prose a { text-decoration: underline; }
/* ===================================================================== 05 LAYOUT */
.wz-container { width: 100%; max-width: calc(var(--wz-container) + var(--wz-gutter) * 2); margin-inline: auto; padding-inline: var(--wz-gutter); }
.wz-container--wide { max-width: calc(var(--wz-container-wide) + var(--wz-gutter) * 2); }
.wz-container--narrow { max-width: calc(var(--wz-container-narrow) + var(--wz-gutter) * 2); }
.wz-container--fluid { max-width: none; }
.wz-section { padding-block: var(--wz-section-y); }
.wz-section--sm { padding-block: calc(var(--wz-section-y) * .6); }
.wz-section--lg { padding-block: calc(var(--wz-section-y) * 1.4); }
.wz-section + .wz-section--bordered, .wz-section--bordered { border-top: var(--wz-border); }
.wz-section-head { display: flex; flex-direction: column; gap: var(--wz-space-3); max-width: 720px; margin-bottom: var(--wz-space-7); }
.wz-section-head > * { margin: 0; }
.wz-section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.wz-section-head--split { max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--wz-space-5); }
.wz-grid { display: grid; gap: var(--wz-space-5); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wz-grid > * { grid-column: span 12; }
.wz-col-1 { grid-column: span 1; } .wz-col-2 { grid-column: span 2; } .wz-col-3 { grid-column: span 3; }
.wz-col-4 { grid-column: span 4; } .wz-col-5 { grid-column: span 5; } .wz-col-6 { grid-column: span 6; }
.wz-col-7 { grid-column: span 7; } .wz-col-8 { grid-column: span 8; } .wz-col-9 { grid-column: span 9; }
.wz-col-10 { grid-column: span 10; } .wz-col-11 { grid-column: span 11; } .wz-col-12 { grid-column: span 12; }
@media (max-width: 900px) { .wz-grid > [class*="wz-col-"] { grid-column: span 12; } .wz-grid > .wz-col-md-6 { grid-column: span 6; } }
.wz-auto-grid { display: grid; gap: var(--wz-space-5); grid-template-columns: repeat(auto-fit, minmax(min(var(--wz-min, 260px), 100%), 1fr)); }
.wz-cols-2 { display: grid; gap: var(--wz-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-cols-3 { display: grid; gap: var(--wz-space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-cols-4 { display: grid; gap: var(--wz-space-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .wz-cols-3, .wz-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wz-cols-2, .wz-cols-3, .wz-cols-4 { grid-template-columns: minmax(0, 1fr); } }
.wz-split { display: grid; gap: var(--wz-space-7); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.wz-split--60 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.wz-split--40 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
@media (max-width: 900px) { .wz-split, .wz-split--60, .wz-split--40 { grid-template-columns: minmax(0, 1fr); gap: var(--wz-space-6); } }
.wz-stack { display: flex; flex-direction: column; gap: var(--wz-gap, var(--wz-space-4)); }
.wz-stack > * { margin: 0; }
.wz-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wz-gap, var(--wz-space-3)); }
.wz-row { display: flex; align-items: center; gap: var(--wz-gap, var(--wz-space-4)); }
.wz-between { display: flex; align-items: center; justify-content: space-between; gap: var(--wz-space-4); flex-wrap: wrap; }
.wz-center { display: grid; place-items: center; }
.wz-gap-1 { --wz-gap: var(--wz-space-1); } .wz-gap-2 { --wz-gap: var(--wz-space-2); } .wz-gap-3 { --wz-gap: var(--wz-space-3); }
.wz-gap-4 { --wz-gap: var(--wz-space-4); } .wz-gap-5 { --wz-gap: var(--wz-space-5); } .wz-gap-6 { --wz-gap: var(--wz-space-6); }
.wz-gap-7 { --wz-gap: var(--wz-space-7); } .wz-gap-8 { --wz-gap: var(--wz-space-8); }
.wz-ratio { position: relative; aspect-ratio: var(--wz-ratio, 16 / 9); overflow: hidden; background: var(--wz-bg-subtle); }
.wz-ratio > img, .wz-ratio > video, .wz-ratio > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.wz-ratio--1 { --wz-ratio: 1; } .wz-ratio--4-3 { --wz-ratio: 4 / 3; } .wz-ratio--4-5 { --wz-ratio: 4 / 5; } .wz-ratio--21-9 { --wz-ratio: 21 / 9; }
/* ===================================================================== 06 BUTTONS */
.wz-btn {
--_bg: var(--wz-navy); --_fg: var(--wz-white); --_bd: var(--wz-navy);
--_bg-h: var(--wz-blue); --_fg-h: var(--wz-white); --_bd-h: var(--wz-blue);
display: inline-flex; align-items: center; justify-content: center; gap: var(--wz-space-2);
min-height: var(--wz-control-h);
padding: 0 22px;
font-family: var(--wz-font);
font-size: var(--wz-text-md);
font-weight: var(--wz-weight-medium);
line-height: 1;
letter-spacing: .005em;
text-decoration: none;
white-space: nowrap;
color: var(--_fg);
background: var(--_bg);
border: var(--wz-border-w) solid var(--_bd);
border-radius: var(--wz-radius);
cursor: pointer;
user-select: none;
transition: background-color var(--wz-dur-2) var(--wz-ease), color var(--wz-dur-2) var(--wz-ease), border-color var(--wz-dur-2) var(--wz-ease), transform var(--wz-dur-1) var(--wz-ease);
}
.wz-btn:hover { background: var(--_bg-h); color: var(--_fg-h); border-color: var(--_bd-h); }
.wz-btn:active { transform: translateY(1px); }
.wz-btn:focus-visible { box-shadow: var(--wz-focus-ring); }
.wz-btn svg { width: 1.125em; height: 1.125em; flex: none; }
.wz-btn--primary { /* default */ }
.wz-btn--accent { --_bg: var(--wz-blue); --_bd: var(--wz-blue); --_bg-h: var(--wz-navy); --_bd-h: var(--wz-navy); }
.wz-btn--secondary, .wz-btn--outline { --_bg: transparent; --_fg: var(--wz-heading); --_bd: currentColor; --_bg-h: var(--wz-bg-subtle); --_fg-h: var(--wz-heading); --_bd-h: var(--wz-heading); }
.wz-btn--secondary { --_bd: var(--wz-navy); }
.wz-btn--ghost { --_bg: transparent; --_fg: var(--wz-heading); --_bd: transparent; --_bg-h: var(--wz-bg-subtle); --_fg-h: var(--wz-heading); --_bd-h: transparent; }
.wz-btn--subtle { --_bg: var(--wz-blue-100); --_fg: var(--wz-navy); --_bd: var(--wz-blue-100); --_bg-h: var(--wz-blue-200); --_fg-h: var(--wz-navy); --_bd-h: var(--wz-blue-200); }
.wz-btn--white { --_bg: var(--wz-white); --_fg: var(--wz-navy); --_bd: var(--wz-white); --_bg-h: var(--wz-blue-100); --_fg-h: var(--wz-navy); --_bd-h: var(--wz-blue-100); }
.wz-btn--outline-white { --_bg: transparent; --_fg: var(--wz-white); --_bd: rgba(255,255,255,.7); --_bg-h: rgba(255,255,255,.1); --_fg-h: var(--wz-white); --_bd-h: var(--wz-white); }
.wz-btn--danger { --_bg: var(--wz-danger); --_bd: var(--wz-danger); --_bg-h: #A21F2E; --_bd-h: #A21F2E; }
.wz-btn--danger-outline { --_bg: transparent; --_fg: var(--wz-danger); --_bd: var(--wz-danger-line); --_bg-h: var(--wz-danger-bg); --_fg-h: var(--wz-danger); --_bd-h: var(--wz-danger); }
.wz-btn--success { --_bg: var(--wz-success); --_bd: var(--wz-success); --_bg-h: #166140; --_bd-h: #166140; }
.wz-btn--link { --_bg: transparent; --_fg: var(--wz-accent); --_bd: transparent; --_bg-h: transparent; --_fg-h: var(--wz-heading); --_bd-h: transparent; padding: 0; min-height: auto; text-decoration: underline; text-underline-offset: 3px; }
.wz-surface-navy .wz-btn--primary, .wz-surface-navy .wz-btn:not([class*="wz-btn--"]) { --_bg: var(--wz-white); --_fg: var(--wz-navy); --_bd: var(--wz-white); --_bg-h: var(--wz-blue-100); --_fg-h: var(--wz-navy); --_bd-h: var(--wz-blue-100); }
.wz-surface-navy .wz-btn--secondary { --_fg: var(--wz-white); --_bd: rgba(255,255,255,.7); --_bg-h: rgba(255,255,255,.1); --_fg-h: var(--wz-white); --_bd-h: var(--wz-white); }
.wz-btn--xs { min-height: 28px; padding: 0 10px; font-size: var(--wz-text-xs); }
.wz-btn--sm { min-height: var(--wz-control-h-sm); padding: 0 14px; font-size: var(--wz-text-small); }
.wz-btn--lg { min-height: var(--wz-control-h-lg); padding: 0 28px; font-size: 1.0625rem; }
.wz-btn--xl { min-height: 60px; padding: 0 36px; font-size: 1.125rem; }
.wz-btn--block { display: flex; width: 100%; }
.wz-btn--icon { padding: 0; width: var(--wz-control-h); }
.wz-btn--icon.wz-btn--sm { width: var(--wz-control-h-sm); }
.wz-btn--icon.wz-btn--lg { width: var(--wz-control-h-lg); }
.wz-btn--pill { border-radius: var(--wz-radius-pill); }
.wz-btn--arrow::after { content: "→"; transition: transform var(--wz-dur-2) var(--wz-ease); }
.wz-btn--arrow:hover::after { transform: translateX(3px); }
.wz-btn:disabled, .wz-btn[aria-disabled="true"], .wz-btn.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }
.wz-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.wz-btn.is-loading::before { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--_fg); border-right-color: transparent; border-radius: 50%; animation: wz-spin .7s linear infinite; }
.wz-btn-group { display: inline-flex; }
.wz-btn-group > .wz-btn + .wz-btn { margin-left: -1px; }
.wz-btn-group > .wz-btn:not(:first-child):not(:last-child) { border-radius: 0; }
.wz-btn-group > .wz-btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wz-btn-group > .wz-btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wz-btn-group > .wz-btn:hover, .wz-btn-group > .wz-btn.is-active { position: relative; z-index: 1; }
.wz-btn-row { display: flex; flex-wrap: wrap; gap: var(--wz-space-3); align-items: center; }
/* Floating action button */
.wz-fab { position: fixed; right: var(--wz-space-5); bottom: var(--wz-space-5); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--wz-navy); color: var(--wz-white); border: 0; box-shadow: var(--wz-shadow-float); z-index: var(--wz-z-dropdown); transition: background var(--wz-dur-2) var(--wz-ease); }
.wz-fab:hover { background: var(--wz-blue); }
/* ===================================================================== 07 LINKS */
a { color: var(--wz-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--wz-dur-1) var(--wz-ease); }
a:hover { color: var(--wz-heading); }
.wz-link { color: var(--wz-accent); font-weight: var(--wz-weight-medium); text-decoration: none; }
.wz-link:hover { text-decoration: underline; }
.wz-link--arrow { display: inline-flex; align-items: center; gap: .35em; font-weight: var(--wz-weight-medium); text-decoration: none; }
.wz-link--arrow::after { content: "→"; transition: transform var(--wz-dur-2) var(--wz-ease); }
.wz-link--arrow:hover::after { transform: translateX(3px); }
.wz-link--quiet { color: inherit; text-decoration: none; }
.wz-link--quiet:hover { color: var(--wz-accent); }
.wz-link--external::after { content: "↗"; margin-left: .2em; font-size: .85em; }
.wz-skip-link { position: absolute; left: var(--wz-space-4); top: -100px; z-index: 9999; padding: var(--wz-space-3) var(--wz-space-4); background: var(--wz-navy); color: var(--wz-white); text-decoration: none; }
.wz-skip-link:focus { top: var(--wz-space-4); }
/* ===================================================================== 08 FORMS */
.wz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--wz-space-5); }
.wz-field--inline { flex-direction: row; align-items: center; gap: var(--wz-space-3); }
.wz-form-label, .wz-field > label { font-size: var(--wz-text-small); font-weight: var(--wz-weight-medium); color: var(--wz-text); }
.wz-required::after { content: " *"; color: var(--wz-danger); }
.wz-optional { font-weight: var(--wz-weight-regular); color: var(--wz-text-subtle); }
.wz-help { font-size: var(--wz-text-small); color: var(--wz-text-muted); line-height: 1.45; }
.wz-error-text { font-size: var(--wz-text-small); color: var(--wz-danger); line-height: 1.45; }
.wz-success-text { font-size: var(--wz-text-small); color: var(--wz-success); }
.wz-input, .wz-select, .wz-textarea,
input[type="text"].wz, input[type="email"].wz {
width: 100%;
min-height: var(--wz-control-h);
padding: 10px 14px;
font-family: var(--wz-font);
font-size: var(--wz-text-md);
line-height: 1.4;
color: var(--wz-text);
background: var(--wz-bg);
border: var(--wz-border-w) solid var(--wz-border-color);
border-radius: var(--wz-radius);
transition: border-color var(--wz-dur-1) var(--wz-ease), box-shadow var(--wz-dur-1) var(--wz-ease);
appearance: none;
}
.wz-input::placeholder, .wz-textarea::placeholder { color: var(--wz-slate-400); }
.wz-input:hover, .wz-select:hover, .wz-textarea:hover { border-color: var(--wz-border-strong); }
.wz-input:focus, .wz-select:focus, .wz-textarea:focus { outline: none; border-color: var(--wz-blue); box-shadow: 0 0 0 3px var(--wz-blue-100); }
.wz-input:disabled, .wz-select:disabled, .wz-textarea:disabled { background: var(--wz-bg-muted); color: var(--wz-text-subtle); cursor: not-allowed; }
.wz-input[readonly] { background: var(--wz-bg-muted); }
.wz-input--sm, .wz-select--sm { min-height: var(--wz-control-h-sm); padding: 6px 10px; font-size: var(--wz-text-small); }
.wz-input--lg, .wz-select--lg { min-height: var(--wz-control-h-lg); padding: 12px 16px; font-size: 1.0625rem; }
.wz-textarea { min-height: 128px; resize: vertical; }
.wz-select {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23001799' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
}
.wz-select[multiple] { background-image: none; padding-right: 14px; min-height: 120px; }
.is-invalid .wz-input, .wz-input.is-invalid, .wz-input:user-invalid, .wz-select.is-invalid, .wz-textarea.is-invalid { border-color: var(--wz-danger); }
.is-invalid .wz-input:focus, .wz-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--wz-danger-bg); }
.wz-input.is-valid { border-color: var(--wz-success); }
/* Input with icon / addon */
.wz-input-icon { position: relative; display: block; }
.wz-input-icon > svg, .wz-input-icon > .wz-input-icon__i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--wz-text-subtle); pointer-events: none; }
.wz-input-icon > .wz-input { padding-left: 42px; }
.wz-input-icon--end > svg { left: auto; right: 14px; }
.wz-input-icon--end > .wz-input { padding-left: 14px; padding-right: 42px; }
.wz-input-group { display: flex; align-items: stretch; }
.wz-input-group > .wz-input { flex: 1; min-width: 0; }
.wz-input-group > * + * { margin-left: -1px; }
.wz-input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wz-input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wz-input-addon { display: flex; align-items: center; padding: 0 14px; background: var(--wz-bg-muted); border: var(--wz-border); color: var(--wz-text-muted); font-size: var(--wz-text-small); white-space: nowrap; }
.wz-input-group > .wz-input:focus { position: relative; z-index: 1; }
/* Checkbox & radio */
.wz-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--wz-text-md); line-height: 1.4; }
.wz-check + .wz-check { margin-top: 0; }
.wz-check input[type="checkbox"], .wz-check input[type="radio"] {
appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0;
border: 1.5px solid var(--wz-border-strong); background: var(--wz-bg); border-radius: var(--wz-radius-1);
display: grid; place-items: center; cursor: pointer;
transition: background var(--wz-dur-1) var(--wz-ease), border-color var(--wz-dur-1) var(--wz-ease);
}
.wz-check input[type="radio"] { border-radius: 50%; }
.wz-check input:hover { border-color: var(--wz-navy); }
.wz-check input:checked { background: var(--wz-navy); border-color: var(--wz-navy); }
.wz-check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--wz-white); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.wz-check input[type="checkbox"]:indeterminate { background: var(--wz-navy); border-color: var(--wz-navy); }
.wz-check input[type="checkbox"]:indeterminate::after { content: ""; width: 10px; height: 2px; background: var(--wz-white); }
.wz-check input[type="radio"]:checked { background: var(--wz-bg); border-width: 6px; }
.wz-check input:focus-visible { box-shadow: var(--wz-focus-ring); }
.wz-check input:disabled { opacity: .45; cursor: not-allowed; }
.wz-check-group { display: flex; flex-direction: column; gap: var(--wz-space-3); }
.wz-check-group--inline { flex-direction: row; flex-wrap: wrap; gap: var(--wz-space-5); }
/* Choice card (radio/checkbox as selectable box) */
.wz-choice { position: relative; display: flex; gap: var(--wz-space-3); padding: var(--wz-space-4) var(--wz-space-5); border: var(--wz-border); cursor: pointer; transition: border-color var(--wz-dur-1) var(--wz-ease), background var(--wz-dur-1) var(--wz-ease); }
.wz-choice:hover { border-color: var(--wz-border-strong); }
.wz-choice:has(input:checked) { border-color: var(--wz-navy); background: var(--wz-bg-subtle); box-shadow: inset 0 0 0 1px var(--wz-navy); }
/* Switch */
.wz-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.wz-switch input { appearance: none; position: relative; width: 40px; height: 22px; margin: 0; background: var(--wz-slate-300); border-radius: var(--wz-radius-pill); cursor: pointer; transition: background var(--wz-dur-2) var(--wz-ease); flex: none; }
.wz-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--wz-white); border-radius: 50%; transition: transform var(--wz-dur-2) var(--wz-ease); }
.wz-switch input:checked { background: var(--wz-navy); }
.wz-switch input:checked::after { transform: translateX(18px); }
.wz-switch input:focus-visible { box-shadow: var(--wz-focus-ring); }
.wz-switch input:disabled { opacity: .45; }
/* Range */
.wz-range { width: 100%; appearance: none; height: 4px; background: var(--wz-line); border-radius: 2px; outline: none; accent-color: var(--wz-navy); }
.wz-range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--wz-navy); border: 3px solid var(--wz-white); box-shadow: 0 0 0 1px var(--wz-navy); cursor: pointer; }
.wz-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--wz-navy); border: 3px solid var(--wz-white); box-shadow: 0 0 0 1px var(--wz-navy); cursor: pointer; }
/* File upload / dropzone */
.wz-file { font-size: var(--wz-text-small); color: var(--wz-text-muted); }
.wz-file::file-selector-button { margin-right: 12px; padding: 8px 14px; font: 500 var(--wz-text-small) var(--wz-font); color: var(--wz-navy); background: var(--wz-blue-100); border: 0; border-radius: var(--wz-radius); cursor: pointer; }
.wz-file::file-selector-button:hover { background: var(--wz-blue-200); }
.wz-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wz-space-2); padding: var(--wz-space-7) var(--wz-space-5); text-align: center; border: 1.5px dashed var(--wz-border-strong); background: var(--wz-bg-muted); color: var(--wz-text-muted); cursor: pointer; transition: border-color var(--wz-dur-1) var(--wz-ease), background var(--wz-dur-1) var(--wz-ease); }
.wz-dropzone:hover, .wz-dropzone.is-dragover { border-color: var(--wz-blue); background: var(--wz-bg-subtle); color: var(--wz-navy); }
.wz-fieldset { border: var(--wz-border); padding: var(--wz-space-5); margin: 0 0 var(--wz-space-5); }
.wz-fieldset legend { padding: 0 var(--wz-space-2); font-weight: var(--wz-weight-semibold); color: var(--wz-heading); }
.wz-form-row { display: grid; gap: var(--wz-space-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.wz-form-actions { display: flex; gap: var(--wz-space-3); justify-content: flex-end; padding-top: var(--wz-space-5); border-top: var(--wz-border); margin-top: var(--wz-space-5); }
/* Search */
.wz-search { position: relative; }
.wz-search .wz-input { padding-left: 42px; border-radius: var(--wz-radius); }
.wz-search::before { content: ""; position: absolute; left: 15px; top: 50%; width: 14px; height: 14px; transform: translateY(-60%); border: 1.5px solid var(--wz-text-subtle); border-radius: 50%; pointer-events: none; }
.wz-search::after { content: ""; position: absolute; left: 27px; top: 50%; width: 6px; height: 1.5px; background: var(--wz-text-subtle); transform: translateY(5px) rotate(45deg); pointer-events: none; }
/* Newsletter inline form */
.wz-subscribe { display: flex; gap: var(--wz-space-2); max-width: 520px; }
.wz-subscribe .wz-input { flex: 1; min-width: 0; }
@media (max-width: 520px) { .wz-subscribe { flex-direction: column; } }
/* ===================================================================== 09 BOXES / CARDS */
.wz-box { padding: var(--wz-space-6); border: var(--wz-border); background: var(--wz-bg); }
.wz-box--subtle { background: var(--wz-bg-subtle); border-color: transparent; }
.wz-box--muted { background: var(--wz-bg-muted); border-color: transparent; }
.wz-box--navy { background: var(--wz-navy); color: var(--wz-white); border-color: var(--wz-navy); }
.wz-box--navy :is(h1,h2,h3,h4,h5,h6) { color: var(--wz-white); }
.wz-box--outline-strong { border: var(--wz-border-accent); }
.wz-box--top-rule { border: 0; border-top: var(--wz-border-accent); padding-inline: 0; }
.wz-box--dashed { border-style: dashed; border-color: var(--wz-border-strong); }
.wz-box--flush { padding: 0; }
.wz-box--sm { padding: var(--wz-space-4); }
.wz-box--lg { padding: var(--wz-space-7); }
.wz-card { display: flex; flex-direction: column; background: var(--wz-bg); border: var(--wz-border); color: var(--wz-text); text-decoration: none; position: relative; min-width: 0; }
.wz-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wz-bg-subtle); }
.wz-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--wz-dur-3) var(--wz-ease); }
.wz-card__body { display: flex; flex-direction: column; gap: var(--wz-space-3); padding: var(--wz-space-6); flex: 1; }
.wz-card__body > * { margin: 0; }
.wz-card__title { font-size: var(--wz-text-h3); font-weight: var(--wz-weight-semibold); color: var(--wz-heading); line-height: var(--wz-leading-snug); letter-spacing: var(--wz-tracking-heading); }
.wz-card__text { color: var(--wz-text-muted); font-size: var(--wz-text-md); line-height: 1.55; }
.wz-card__meta { display: flex; flex-wrap: wrap; gap: var(--wz-space-3); font-size: var(--wz-text-small); color: var(--wz-text-subtle); }
.wz-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--wz-space-3); padding: var(--wz-space-4) var(--wz-space-6); border-top: var(--wz-border); }
.wz-card__icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--wz-navy); border: var(--wz-border); }
.wz-card__icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.wz-card--link { transition: border-color var(--wz-dur-2) var(--wz-ease); }
.wz-card--link:hover { border-color: var(--wz-navy); }
.wz-card--link:hover .wz-card__media img { transform: scale(1.03); }
.wz-card--link:hover .wz-card__title { color: var(--wz-accent); }
.wz-card--link .wz-card__title a::after { content: ""; position: absolute; inset: 0; } /* stretched link */
.wz-card--flat { border: 0; background: var(--wz-bg-subtle); }
.wz-card--navy { background: var(--wz-navy); border-color: var(--wz-navy); color: var(--wz-white); }
.wz-card--navy .wz-card__title { color: var(--wz-white); }
.wz-card--navy .wz-card__text { color: var(--wz-blue-100); }
.wz-card--navy .wz-label { color: var(--wz-blue-300); }
.wz-card--horizontal { flex-direction: row; }
.wz-card--horizontal .wz-card__media { aspect-ratio: auto; width: 40%; flex: none; }
@media (max-width: 640px) { .wz-card--horizontal { flex-direction: column; } .wz-card--horizontal .wz-card__media { width: 100%; aspect-ratio: 16/10; } }
.wz-card.is-selected { border-color: var(--wz-navy); box-shadow: inset 0 0 0 1px var(--wz-navy); }
/* Feature box with number */
.wz-feature { display: flex; flex-direction: column; gap: var(--wz-space-3); padding-top: var(--wz-space-5); border-top: var(--wz-border-accent); }
.wz-feature > * { margin: 0; }
.wz-feature__num { font-size: var(--wz-text-label); letter-spacing: var(--wz-tracking-label); color: var(--wz-accent); font-weight: var(--wz-weight-medium); }
.wz-feature__title { font-size: var(--wz-text-h3); font-weight: var(--wz-weight-semibold); color: var(--wz-heading); letter-spacing: var(--wz-tracking-heading); line-height: var(--wz-leading-snug); }
.wz-feature__text { color: var(--wz-text-muted); }
/* Callout / note */
.wz-callout { display: flex; gap: var(--wz-space-4); padding: var(--wz-space-5); background: var(--wz-bg-subtle); border-top: 2px solid var(--wz-navy); }
.wz-callout > :last-child { margin-bottom: 0; }
/* Business-card component (brand signature block) */
.wz-bizcard { aspect-ratio: 85 / 55; width: 100%; max-width: 420px; padding: 8% 9%; display: grid; grid-template-rows: auto 1fr auto; background: var(--wz-white); color: var(--wz-navy); border: var(--wz-border); container-type: inline-size; }
.wz-bizcard__name { font-size: 7.4cqw; font-weight: var(--wz-weight-semibold); line-height: 1.1; }
.wz-bizcard__role { font-size: 3.4cqw; letter-spacing: var(--wz-tracking-label); color: var(--wz-blue); margin-top: 3cqw; line-height: 1.8; }
.wz-bizcard__contact { display: flex; justify-content: space-between; align-items: flex-end; font-size: 3.8cqw; font-weight: var(--wz-weight-medium); line-height: 1.55; }
.wz-bizcard--navy { background: var(--wz-navy); color: var(--wz-white); border-color: var(--wz-navy); place-items: center; grid-template-rows: 1fr; }
/* ===================================================================== 10 HEADER */
.wz-header { position: sticky; top: 0; z-index: var(--wz-z-header); background: color-mix(in srgb, var(--wz-bg) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: var(--wz-border); }
.wz-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--wz-space-5); min-height: var(--wz-header-h); }
.wz-header__brand { display: inline-flex; align-items: center; flex: none; }
.wz-header__brand img, .wz-header__brand svg { height: 32px; width: auto; }
.wz-header__actions { display: flex; align-items: center; gap: var(--wz-space-3); }
.wz-header--transparent { position: absolute; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.wz-header--navy { background: var(--wz-navy); border-bottom-color: transparent; }
.wz-header--navy .wz-nav__link { color: var(--wz-white); }
.wz-header--navy .wz-nav__link:hover, .wz-header--navy .wz-nav__link[aria-current="page"] { color: var(--wz-blue-300); }
.wz-header.is-scrolled { box-shadow: 0 1px 0 var(--wz-line); }
.wz-topbar-strip { background: var(--wz-navy); color: var(--wz-blue-100); font-size: var(--wz-text-small); }
.wz-topbar-strip .wz-container { display: flex; justify-content: space-between; gap: var(--wz-space-4); min-height: 36px; align-items: center; flex-wrap: wrap; }
.wz-topbar-strip a { color: var(--wz-white); text-decoration: none; }
.wz-announcement { background: var(--wz-blue); color: var(--wz-white); text-align: center; padding: 10px var(--wz-gutter); font-size: var(--wz-text-small); font-weight: var(--wz-weight-medium); }
.wz-announcement a { color: var(--wz-white); text-decoration: underline; }
/* ===================================================================== 11 NAVIGATION */
.wz-nav { display: flex; align-items: center; gap: var(--wz-space-1); list-style: none; margin: 0; padding: 0; }
.wz-nav > li { margin: 0; position: relative; }
.wz-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 15px; font-weight: var(--wz-weight-medium); color: var(--wz-text); text-decoration: none; white-space: nowrap; transition: color var(--wz-dur-1) var(--wz-ease); position: relative; }
.wz-nav__link:hover { color: var(--wz-accent); }
.wz-nav__link[aria-current="page"], .wz-nav__link.is-active { color: var(--wz-heading); }
.wz-nav__link[aria-current="page"]::after, .wz-nav__link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--wz-navy); }
.wz-nav__link--has-sub::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
/* Sub-menu & mega-menu */
.wz-subnav { position: absolute; top: 100%; left: 0; min-width: 240px; padding: var(--wz-space-2); margin: 0; list-style: none; background: var(--wz-bg); border: var(--wz-border); box-shadow: var(--wz-shadow-float); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--wz-dur-2) var(--wz-ease), transform var(--wz-dur-2) var(--wz-ease), visibility 0s linear var(--wz-dur-2); z-index: var(--wz-z-dropdown); }
.wz-nav > li:hover > .wz-subnav, .wz-nav > li:focus-within > .wz-subnav, .wz-subnav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wz-subnav a { display: block; padding: 10px 12px; color: var(--wz-text); text-decoration: none; font-size: 15px; }
.wz-subnav a:hover { background: var(--wz-bg-subtle); color: var(--wz-heading); }
.wz-subnav li + li { margin: 0; }
.wz-mega { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); width: min(960px, 92vw); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: var(--wz-space-6); padding: var(--wz-space-6); background: var(--wz-bg); border: var(--wz-border); box-shadow: var(--wz-shadow-float); opacity: 0; visibility: hidden; transition: opacity var(--wz-dur-2) var(--wz-ease), transform var(--wz-dur-2) var(--wz-ease); z-index: var(--wz-z-dropdown); }
.wz-nav > li:hover > .wz-mega, .wz-nav > li:focus-within > .wz-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.wz-mega__title { font-size: var(--wz-text-label); letter-spacing: var(--wz-tracking-label); text-transform: uppercase; color: var(--wz-accent); margin-bottom: var(--wz-space-3); }
.wz-mega__promo { background: var(--wz-navy); color: var(--wz-white); padding: var(--wz-space-5); }
/* Mobile nav toggle (hamburger) */
.wz-burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; position: relative; color: var(--wz-heading); }
.wz-burger span, .wz-burger::before, .wz-burger::after { content: ""; position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform var(--wz-dur-2) var(--wz-ease), opacity var(--wz-dur-1); }
.wz-burger::before { top: 15px; } .wz-burger span { top: 21px; } .wz-burger::after { top: 27px; }
.wz-burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.wz-burger[aria-expanded="true"] span { opacity: 0; }
.wz-burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) {
.wz-burger { display: inline-block; }
.wz-header .wz-nav { display: none; }
.wz-header .wz-nav.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: var(--wz-space-3) var(--wz-gutter) var(--wz-space-5); background: var(--wz-bg); border-bottom: var(--wz-border); }
.wz-header .wz-nav.is-open .wz-nav__link { padding: 14px 0; border-bottom: 1px solid var(--wz-line-soft); }
.wz-header .wz-nav.is-open .wz-nav__link::after { display: none; }
.wz-subnav, .wz-mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 var(--wz-space-4); display: none; width: auto; grid-template-columns: 1fr; }
li.is-open > .wz-subnav, li.is-open > .wz-mega { display: block; }
}
/* Side / vertical nav (docs, account pages) */
.wz-sidenav { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; }
.wz-sidenav li { margin: 0; }
.wz-sidenav a { display: block; padding: 8px 12px; color: var(--wz-text-muted); text-decoration: none; border-left: 2px solid transparent; font-size: 15px; }
.wz-sidenav a:hover { color: var(--wz-heading); background: var(--wz-bg-subtle); }
.wz-sidenav a[aria-current="page"], .wz-sidenav a.is-active { color: var(--wz-heading); border-left-color: var(--wz-navy); font-weight: var(--wz-weight-medium); }
.wz-sidenav__title { padding: 16px 12px 6px; font-size: var(--wz-text-xs); letter-spacing: var(--wz-tracking-label); text-transform: uppercase; color: var(--wz-text-subtle); }
/* Table of contents */
.wz-toc { position: sticky; top: calc(var(--wz-header-h) + 24px); font-size: var(--wz-text-small); }
.wz-toc a { display: block; padding: 4px 0 4px 12px; color: var(--wz-text-muted); text-decoration: none; border-left: 1px solid var(--wz-line); }
.wz-toc a.is-active { color: var(--wz-heading); border-left: 2px solid var(--wz-navy); padding-left: 11px; }
/* Bottom nav (mobile app) */
.wz-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--wz-bg); border-top: var(--wz-border); padding-bottom: env(safe-area-inset-bottom); z-index: var(--wz-z-header); }
.wz-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; justify-content: center; font-size: 11px; color: var(--wz-text-subtle); text-decoration: none; }
.wz-bottom-nav a.is-active { color: var(--wz-navy); }
/* ===================================================================== 12 BREADCRUMBS / PAGINATION */
.wz-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 var(--wz-space-5); font-size: var(--wz-text-small); color: var(--wz-text-subtle); }
.wz-breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.wz-breadcrumbs li + li::before { content: "/"; color: var(--wz-slate-300); }
.wz-breadcrumbs a { color: var(--wz-text-muted); text-decoration: none; }
.wz-breadcrumbs a:hover { color: var(--wz-accent); text-decoration: underline; }
.wz-breadcrumbs [aria-current="page"] { color: var(--wz-heading); font-weight: var(--wz-weight-medium); }
.wz-pagination { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: var(--wz-space-6) 0 0; align-items: center; }
.wz-pagination li { margin: 0; }
.wz-pagination a, .wz-pagination span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; font-size: var(--wz-text-small); font-weight: var(--wz-weight-medium); color: var(--wz-text); text-decoration: none; border: var(--wz-border); border-radius: var(--wz-radius); }
.wz-pagination a:hover { border-color: var(--wz-navy); color: var(--wz-navy); }
.wz-pagination [aria-current="page"], .wz-pagination .is-active { background: var(--wz-navy); border-color: var(--wz-navy); color: var(--wz-white); }
.wz-pagination .is-disabled { opacity: .4; pointer-events: none; }
.wz-pagination .wz-pagination__gap { border: 0; min-width: 24px; padding: 0; }
.wz-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wz-space-4); border-top: var(--wz-border); padding-top: var(--wz-space-5); }
.wz-pager a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--wz-heading); font-weight: var(--wz-weight-medium); }
.wz-pager a span { font-size: var(--wz-text-xs); letter-spacing: var(--wz-tracking-label); text-transform: uppercase; color: var(--wz-text-subtle); }
.wz-pager a:last-child { text-align: right; }
/* ===================================================================== 13 TABS / SEGMENTED */
.wz-tabs { display: flex; gap: var(--wz-space-5); border-bottom: var(--wz-border); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--wz-space-5); }
.wz-tabs::-webkit-scrollbar { display: none; }
.wz-tab { position: relative; padding: 12px 0; background: none; border: 0; font-size: 15px; font-weight: var(--wz-weight-medium); color: var(--wz-text-muted); white-space: nowrap; text-decoration: none; cursor: pointer; }
.wz-tab:hover { color: var(--wz-heading); }
.wz-tab[aria-selected="true"], .wz-tab.is-active { color: var(--wz-heading); }
.wz-tab[aria-selected="true"]::after, .wz-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wz-navy); }
.wz-tab .wz-count { margin-left: 6px; }
.wz-tabpanel[hidden] { display: none; }
.wz-tabs--boxed { gap: 0; border-bottom: var(--wz-border); }
.wz-tabs--boxed .wz-tab { padding: 12px 20px; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.wz-tabs--boxed .wz-tab[aria-selected="true"], .wz-tabs--boxed .wz-tab.is-active { border-color: var(--wz-line); background: var(--wz-bg); }
.wz-tabs--boxed .wz-tab::after { display: none; }
.wz-segmented { display: inline-flex; padding: 3px; background: var(--wz-bg-muted); border: var(--wz-border); border-radius: var(--wz-radius-2); gap: 2px; }
.wz-segmented button, .wz-segmented label { padding: 6px 14px; border: 0; background: transparent; font-size: var(--wz-text-small); font-weight: var(--wz-weight-medium); color: var(--wz-text-muted); border-radius: var(--wz-radius-1); cursor: pointer; }
.wz-segmented button:hover { color: var(--wz-heading); }
.wz-segmented .is-active, .wz-segmented [aria-pressed="true"], .wz-segmented label:has(input:checked) { background: var(--wz-bg); color: var(--wz-heading); box-shadow: 0 0 0 1px var(--wz-line); }
.wz-segmented input { position: absolute; opacity: 0; pointer-events: none; }
/* ===================================================================== 14 ACCORDION */
.wz-accordion { border-top: var(--wz-border); }
.wz-accordion__item { border-bottom: var(--wz-border); }
.wz-accordion__item > summary, .wz-accordion__trigger { display: flex; justify-content: space-between; align-items: center; gap: var(--wz-space-4); width: 100%; padding: var(--wz-space-5) 0; background: none; border: 0; text-align: left; font-size: 1.125rem; font-weight: var(--wz-weight-medium); color: var(--wz-heading); cursor: pointer; list-style: none; }
.wz-accordion__item > summary::-webkit-details-marker { display: none; }
.wz-accordion__item > summary::after, .wz-accordion__trigger::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform var(--wz-dur-2) var(--wz-ease); }
.wz-accordion__item[open] > summary::after, .wz-accordion__trigger[aria-expanded="true"]::after { transform: rotate(45deg); }
.wz-accordion__item > summary:hover { color: var(--wz-accent); }
.wz-accordion__content { padding: 0 0 var(--wz-space-5); color: var(--wz-text-muted); max-width: var(--wz-measure); }
.wz-accordion__content > :last-child { margin-bottom: 0; }
.wz-accordion--boxed { border: 0; display: flex; flex-direction: column; gap: var(--wz-space-2); }
.wz-accordion--boxed .wz-accordion__item { border: var(--wz-border); padding: 0 var(--wz-space-5); }
.wz-accordion--boxed .wz-accordion__item[open] { border-color: var(--wz-navy); }
/* ===================================================================== 15 BADGES / TAGS / CHIPS */
.wz-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; font-size: var(--wz-text-xs); font-weight: var(--wz-weight-medium); line-height: 1; letter-spacing: .02em; white-space: nowrap; color: var(--wz-navy); background: var(--wz-blue-100); border-radius: var(--wz-radius-1); }
.wz-badge--navy { background: var(--wz-navy); color: var(--wz-white); }
.wz-badge--outline { background: transparent; border: 1px solid currentColor; color: var(--wz-accent); }
.wz-badge--neutral { background: var(--wz-bg-muted); color: var(--wz-text-muted); border: var(--wz-border); }
.wz-badge--success { background: var(--wz-success-bg); color: var(--wz-success); }
.wz-badge--warning { background: var(--wz-warning-bg); color: var(--wz-warning); }
.wz-badge--danger { background: var(--wz-danger-bg); color: var(--wz-danger); }
.wz-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wz-badge--pill { border-radius: var(--wz-radius-pill); }
.wz-badge--lg { height: 28px; padding: 0 12px; font-size: var(--wz-text-small); }
.wz-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: var(--wz-text-small); color: var(--wz-text); background: var(--wz-bg); border: var(--wz-border); border-radius: var(--wz-radius-pill); text-decoration: none; transition: border-color var(--wz-dur-1) var(--wz-ease), color var(--wz-dur-1); }
a.wz-tag:hover, button.wz-tag:hover { border-color: var(--wz-navy); color: var(--wz-navy); }
.wz-tag.is-active, .wz-tag[aria-pressed="true"] { background: var(--wz-navy); color: var(--wz-white); border-color: var(--wz-navy); }
.wz-tag__remove { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border: 0; background: transparent; color: inherit; opacity: .6; font-size: 14px; line-height: 1; padding: 0; }
.wz-tag__remove:hover { opacity: 1; }
.wz-tags { display: flex; flex-wrap: wrap; gap: var(--wz-space-2); }
.wz-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: var(--wz-weight-semibold); background: var(--wz-bg-muted); color: var(--wz-text-muted); border-radius: var(--wz-radius-pill); }
.wz-count--navy { background: var(--wz-navy); color: var(--wz-white); }
.wz-notify-dot { position: relative; }
.wz-notify-dot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: var(--wz-danger); border: 2px solid var(--wz-bg); border-radius: 50%; }
.wz-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--wz-text-small); color: var(--wz-text); }
.wz-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wz-slate-400); }
.wz-status--online::before, .wz-status--success::before { background: var(--wz-success); }
.wz-status--warning::before { background: var(--wz-warning); }
.wz-status--error::before { background: var(--wz-danger); }
.wz-status--info::before { background: var(--wz-blue); }
/* ===================================================================== 16 ALERTS / TOASTS / BANNERS */
.wz-alert { display: flex; gap: var(--wz-space-3); align-items: flex-start; padding: var(--wz-space-4) var(--wz-space-5); font-size: var(--wz-text-md); line-height: 1.5; color: var(--wz-text); background: var(--wz-info-bg); border: 1px solid var(--wz-info-line); }
.wz-alert > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--wz-info); }
.wz-alert__title { display: block; font-weight: var(--wz-weight-semibold); color: var(--wz-heading); margin-bottom: 2px; }
.wz-alert__body { flex: 1; min-width: 0; }
.wz-alert__body > :last-child { margin-bottom: 0; }
.wz-alert__close { margin-left: auto; flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: var(--wz-text-muted); font-size: 18px; line-height: 1; border-radius: var(--wz-radius); }
.wz-alert__close:hover { background: rgba(0,0,0,.05); color: var(--wz-text); }
.wz-alert--success { background: var(--wz-success-bg); border-color: var(--wz-success-line); } .wz-alert--success > svg { color: var(--wz-success); }
.wz-alert--warning { background: var(--wz-warning-bg); border-color: var(--wz-warning-line); } .wz-alert--warning > svg { color: var(--wz-warning); }
.wz-alert--danger { background: var(--wz-danger-bg); border-color: var(--wz-danger-line); } .wz-alert--danger > svg { color: var(--wz-danger); }
.wz-alert--navy { background: var(--wz-navy); border-color: var(--wz-navy); color: var(--wz-white); }
.wz-alert--navy .wz-alert__title { color: var(--wz-white); } .wz-alert--navy > svg { color: var(--wz-blue-300); }
.wz-alert--inline { padding: var(--wz-space-2) var(--wz-space-3); font-size: var(--wz-text-small); }
.wz-toast-region { position: fixed; right: var(--wz-space-5); bottom: var(--wz-space-5); display: flex; flex-direction: column; gap: var(--wz-space-2); z-index: var(--wz-z-toast); width: min(380px, calc(100vw - 32px)); }
.wz-toast { display: flex; gap: var(--wz-space-3); align-items: flex-start; padding: var(--wz-space-4); background: var(--wz-navy-950); color: var(--wz-white); box-shadow: var(--wz-shadow-float); font-size: var(--wz-text-small); line-height: 1.45; animation: wz-toast-in var(--wz-dur-3) var(--wz-ease); }
.wz-toast__title { font-weight: var(--wz-weight-semibold); display: block; }
.wz-toast__action { margin-left: auto; color: var(--wz-blue-300); background: none; border: 0; font-weight: var(--wz-weight-medium); font-size: var(--wz-text-small); white-space: nowrap; }
.wz-toast--success { border-left: 3px solid #5FC394; }
.wz-toast--danger { border-left: 3px solid #F2828E; }
@keyframes wz-toast-in { from { opacity: 0; transform: translateY(8px); } }
.wz-cookie { position: fixed; left: var(--wz-space-5); bottom: var(--wz-space-5); width: min(440px, calc(100vw - 32px)); padding: var(--wz-space-5); background: var(--wz-bg); border: var(--wz-border); box-shadow: var(--wz-shadow-float); z-index: var(--wz-z-toast); font-size: var(--wz-text-small); }
.wz-cookie p { color: var(--wz-text-muted); }
/* ===================================================================== 17 MODAL / DRAWER */
.wz-modal { position: fixed; inset: 0; z-index: var(--wz-z-modal); display: grid; place-items: center; padding: var(--wz-space-4); background: var(--wz-overlay); animation: wz-fade var(--wz-dur-2) var(--wz-ease); }
.wz-modal[hidden] { display: none; }
dialog.wz-dialog { padding: 0; border: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; background: var(--wz-bg); color: var(--wz-text); box-shadow: var(--wz-shadow-modal); }
dialog.wz-dialog::backdrop { background: var(--wz-overlay); }
.wz-modal__panel { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--wz-bg); box-shadow: var(--wz-shadow-modal); animation: wz-pop var(--wz-dur-3) var(--wz-ease); }
.wz-modal__panel--lg { max-width: 860px; } .wz-modal__panel--sm { max-width: 420px; }
.wz-modal__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--wz-space-4); padding: var(--wz-space-5) var(--wz-space-6); border-bottom: var(--wz-border); }
.wz-modal__title { margin: 0; font-size: var(--wz-text-h3); }
.wz-modal__close { flex: none; width: 36px; height: 36px; border: 0; background: transparent; color: var(--wz-text-muted); font-size: 22px; line-height: 1; margin: -6px -10px 0 0; }
.wz-modal__close:hover { color: var(--wz-heading); background: var(--wz-bg-subtle); }
.wz-modal__body { padding: var(--wz-space-6); overflow-y: auto; }
.wz-modal__footer { display: flex; justify-content: flex-end; gap: var(--wz-space-3); padding: var(--wz-space-4) var(--wz-space-6); border-top: var(--wz-border); background: var(--wz-bg-muted); }
@keyframes wz-fade { from { opacity: 0; } }
@keyframes wz-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.wz-drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--wz-bg); box-shadow: var(--wz-shadow-modal); z-index: var(--wz-z-drawer); transform: translateX(100%); transition: transform var(--wz-dur-3) var(--wz-ease); }
.wz-drawer.is-open { transform: none; }
.wz-drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.wz-drawer-overlay { position: fixed; inset: 0; background: var(--wz-overlay); z-index: calc(var(--wz-z-drawer) - 1); opacity: 0; pointer-events: none; transition: opacity var(--wz-dur-3) var(--wz-ease); }
.wz-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
/* ===================================================================== 18 DROPDOWN / MENU */
.wz-dropdown { position: relative; display: inline-block; }
.wz-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; padding: 6px; margin: 0; list-style: none; background: var(--wz-bg); border: var(--wz-border); box-shadow: var(--wz-shadow-float); z-index: var(--wz-z-dropdown); display: none; }
.wz-menu--right { left: auto; right: 0; }
.wz-dropdown.is-open > .wz-menu, .wz-menu.is-open { display: block; animation: wz-pop var(--wz-dur-2) var(--wz-ease); }
.wz-menu li { margin: 0; }
.wz-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; font-size: var(--wz-text-small); color: var(--wz-text); background: none; border: 0; text-align: left; text-decoration: none; border-radius: var(--wz-radius-1); cursor: pointer; }
.wz-menu__item:hover, .wz-menu__item:focus-visible { background: var(--wz-bg-subtle); color: var(--wz-heading); box-shadow: none; }
.wz-menu__item svg { width: 16px; height: 16px; color: var(--wz-text-subtle); }
.wz-menu__item kbd { margin-left: auto; font-size: 11px; }
.wz-menu__item--danger { color: var(--wz-danger); }
.wz-menu__item--danger:hover { background: var(--wz-danger-bg); color: var(--wz-danger); }
.wz-menu__sep { height: 1px; background: var(--wz-line); margin: 6px 0; }
.wz-menu__label { padding: 8px 12px 4px; font-size: 11px; letter-spacing: var(--wz-tracking-label); text-transform: uppercase; color: var(--wz-text-subtle); }
/* ===================================================================== 19 TABLES */
.wz-table-wrap { width: 100%; overflow-x: auto; border: var(--wz-border); background: var(--wz-bg); }
.wz-table { width: 100%; font-size: var(--wz-text-small); color: var(--wz-text); }
.wz-table th, .wz-table td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--wz-line-soft); }
.wz-table thead th { font-size: var(--wz-text-xs); font-weight: var(--wz-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--wz-text-muted); background: var(--wz-bg-muted); border-bottom: var(--wz-border); white-space: nowrap; }
.wz-table tbody tr:last-child td { border-bottom: 0; }
.wz-table tbody tr { transition: background var(--wz-dur-1); }
.wz-table--hover tbody tr:hover { background: var(--wz-bg-subtle); }
.wz-table--striped tbody tr:nth-child(even) { background: var(--wz-bg-muted); }
.wz-table--bordered th, .wz-table--bordered td { border: var(--wz-border); }
.wz-table--compact th, .wz-table--compact td { padding: 8px 12px; }
.wz-table--sticky thead th { position: sticky; top: 0; z-index: 1; }
.wz-table .is-num, .wz-table .wz-num { text-align: right; font-variant-numeric: tabular-nums; }
.wz-table tr.is-selected { background: var(--wz-blue-50); box-shadow: inset 2px 0 0 var(--wz-navy); }
.wz-table .wz-cell-strong { font-weight: var(--wz-weight-medium); color: var(--wz-heading); }
.wz-table .wz-cell-actions { text-align: right; white-space: nowrap; width: 1%; }
.wz-th-sort { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.wz-th-sort::after { content: "↕"; opacity: .4; font-size: 1.1em; }
.wz-th-sort[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.wz-th-sort[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.wz-table caption { caption-side: bottom; padding: 12px 16px; text-align: left; font-size: var(--wz-text-xs); color: var(--wz-text-subtle); }
@media (max-width: 640px) {
.wz-table--stack thead { display: none; }
.wz-table--stack tr { display: block; padding: 12px 0; border-bottom: var(--wz-border); }
.wz-table--stack td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 6px 16px; }
.wz-table--stack td::before { content: attr(data-label); font-weight: var(--wz-weight-medium); color: var(--wz-text-muted); }
}
/* Plain HTML tables inside content */
.wz-prose table { width: 100%; font-size: var(--wz-text-small); margin: 1.5em 0; }
.wz-prose th, .wz-prose td { padding: 10px 12px; border-bottom: var(--wz-border); text-align: left; }
.wz-prose thead th { border-bottom: var(--wz-border-accent); color: var(--wz-heading); }
/* Comparison table */
.wz-compare th:not(:first-child), .wz-compare td:not(:first-child) { text-align: center; }
.wz-compare .is-highlight { background: var(--wz-blue-50); }
.wz-yes { color: var(--wz-success); font-weight: 600; } .wz-no { color: var(--wz-slate-400); }
/* ===================================================================== 20 LISTS / MEDIA */
.wz-list-reset { list-style: none; padding: 0; margin: 0; }
.wz-list-reset li { margin: 0; }
.wz-list-check { list-style: none; padding: 0; }
.wz-list-check li { position: relative; padding-left: 28px; }
.wz-list-check li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 7px; border-left: 1.5px solid var(--wz-accent); border-bottom: 1.5px solid var(--wz-accent); transform: rotate(-45deg); }
.wz-list-dash { list-style: none; padding: 0; }
.wz-list-dash li { position: relative; padding-left: 22px; }
.wz-list-dash li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1.5px; background: var(--wz-accent); }
.wz-list-num { list-style: none; padding: 0; counter-reset: wz; }
.wz-list-num li { counter-increment: wz; position: relative; padding-left: 40px; }
.wz-list-num li::before { content: counter(wz, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-size: var(--wz-text-label); letter-spacing: .08em; color: var(--wz-accent); font-weight: var(--wz-weight-medium); }
.wz-list-divided { list-style: none; padding: 0; margin: 0; border-top: var(--wz-border); }
.wz-list-divided > li { margin: 0; padding: var(--wz-space-4) 0; border-bottom: var(--wz-border); }
.wz-list-item { display: flex; align-items: center; gap: var(--wz-space-3); padding: 12px 0; }
.wz-list-item__body { flex: 1; min-width: 0; }
.wz-list-item__title { font-weight: var(--wz-weight-medium); color: var(--wz-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-list-item__meta { font-size: var(--wz-text-small); color: var(--wz-text-subtle); }
.wz-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 10px var(--wz-space-5); font-size: var(--wz-text-small); }
.wz-dl dt { color: var(--wz-text-muted); font-weight: var(--wz-weight-regular); }
.wz-dl dd { margin: 0; color: var(--wz-text); font-weight: var(--wz-weight-medium); }
figure, .wz-figure { margin: 0; }
figcaption, .wz-figure figcaption { margin-top: var(--wz-space-3); font-size: var(--wz-text-small); color: var(--wz-text-subtle); }
.wz-media { display: flex; gap: var(--wz-space-4); align-items: flex-start; }
.wz-media__fig { flex: none; }
.wz-media__body { flex: 1; min-width: 0; }
.wz-img-cover { width: 100%; height: 100%; object-fit: cover; }
.wz-img-frame { border: var(--wz-border); padding: var(--wz-space-2); background: var(--wz-bg); }
.wz-gallery { display: grid; gap: var(--wz-space-2); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wz-gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.wz-video { position: relative; aspect-ratio: 16 / 9; background: var(--wz-navy-950); }
.wz-video iframe, .wz-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wz-placeholder { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--wz-blue-50) 0 10px, var(--wz-bg) 10px 20px); color: var(--wz-text-subtle); font-family: var(--wz-font-mono); font-size: var(--wz-text-xs); border: var(--wz-border); }
/* ===================================================================== 21 PROGRESS / LOADERS */
.wz-progress { width: 100%; height: 6px; background: var(--wz-line); overflow: hidden; border-radius: 0; }
.wz-progress__bar { height: 100%; width: var(--value, 0%); background: var(--wz-navy); transition: width var(--wz-dur-3) var(--wz-ease); }
.wz-progress--accent .wz-progress__bar { background: var(--wz-blue); }
.wz-progress--success .wz-progress__bar { background: var(--wz-success); }
.wz-progress--sm { height: 3px; } .wz-progress--lg { height: 10px; }
.wz-progress--indeterminate .wz-progress__bar { width: 40%; animation: wz-indet 1.2s var(--wz-ease-in-out) infinite; }
@keyframes wz-indet { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
progress.wz { appearance: none; width: 100%; height: 6px; border: 0; background: var(--wz-line); }
progress.wz::-webkit-progress-bar { background: var(--wz-line); }
progress.wz::-webkit-progress-value { background: var(--wz-navy); }
progress.wz::-moz-progress-bar { background: var(--wz-navy); }
.wz-ring { --size: 64px; --value: 0; --track: var(--wz-line); --fill: var(--wz-navy); width: var(--size); height: var(--size); border-radius: 50%; background: conic-gradient(var(--fill) calc(var(--value) * 1%), var(--track) 0); display: grid; place-items: center; font-size: calc(var(--size) * .22); font-weight: var(--wz-weight-semibold); color: var(--wz-heading); }
.wz-ring::before { content: ""; grid-area: 1/1; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; background: var(--wz-bg); }
.wz-ring > * { grid-area: 1/1; position: relative; }
.wz-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--wz-line); border-top-color: var(--wz-navy); border-radius: 50%; animation: wz-spin .7s linear infinite; }
.wz-spinner--lg { width: 36px; height: 36px; border-width: 3px; }
.wz-spinner--white { border-color: rgba(255,255,255,.3); border-top-color: var(--wz-white); }
@keyframes wz-spin { to { transform: rotate(360deg); } }
.wz-skeleton { display: block; background: linear-gradient(90deg, var(--wz-line-soft) 0%, var(--wz-bg-subtle) 50%, var(--wz-line-soft) 100%); background-size: 200% 100%; animation: wz-shimmer 1.4s ease-in-out infinite; border-radius: var(--wz-radius-1); min-height: 12px; }
.wz-skeleton--text { height: 12px; margin-bottom: 10px; }
.wz-skeleton--title { height: 22px; width: 60%; margin-bottom: 14px; }
.wz-skeleton--circle { border-radius: 50%; }
@keyframes wz-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Steps / stepper */
.wz-stepper { display: flex; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.wz-stepper li { flex: 1; position: relative; margin: 0; padding-top: 40px; counter-increment: step; font-size: var(--wz-text-small); color: var(--wz-text-subtle); }
.wz-stepper li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--wz-border-strong); border-radius: 50%; background: var(--wz-bg); font-size: 13px; font-weight: var(--wz-weight-semibold); z-index: 1; }
.wz-stepper li::after { content: ""; position: absolute; top: 14px; left: 28px; right: 0; height: 1.5px; background: var(--wz-line); }
.wz-stepper li:last-child::after { display: none; }
.wz-stepper li.is-done::before { content: "✓"; background: var(--wz-navy); border-color: var(--wz-navy); color: var(--wz-white); }
.wz-stepper li.is-done::after { background: var(--wz-navy); }
.wz-stepper li.is-current { color: var(--wz-heading); font-weight: var(--wz-weight-medium); }
.wz-stepper li.is-current::before { border-color: var(--wz-navy); color: var(--wz-navy); box-shadow: 0 0 0 4px var(--wz-blue-100); }
/* ===================================================================== 22 AVATARS */
.wz-avatar { --s: 40px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--wz-blue-100); color: var(--wz-navy); font-size: calc(var(--s) * .38); font-weight: var(--wz-weight-semibold); line-height: 1; position: relative; }
.wz-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wz-avatar--xs { --s: 24px; } .wz-avatar--sm { --s: 32px; } .wz-avatar--lg { --s: 56px; } .wz-avatar--xl { --s: 88px; }
.wz-avatar--navy { background: var(--wz-navy); color: var(--wz-white); }
.wz-avatar--square { border-radius: var(--wz-radius-1); }
.wz-avatar-group { display: inline-flex; }
.wz-avatar-group .wz-avatar { box-shadow: 0 0 0 2px var(--wz-bg); }
.wz-avatar-group .wz-avatar + .wz-avatar { margin-left: calc(var(--s) * -.28); }
.wz-user { display: inline-flex; align-items: center; gap: var(--wz-space-3); }
.wz-user__name { font-weight: var(--wz-weight-medium); color: var(--wz-heading); line-height: 1.25; display: block; }
.wz-user__role { font-size: var(--wz-text-small); color: var(--wz-text-subtle); line-height: 1.3; display: block; }
/* ===================================================================== 23 TOOLTIP / POPOVER */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 6px 10px; background: var(--wz-navy-950); color: var(--wz-white); font-size: 12px; font-weight: var(--wz-weight-regular); line-height: 1.35; letter-spacing: 0; text-transform: none; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--wz-dur-1) var(--wz-ease), transform var(--wz-dur-1) var(--wz-ease); z-index: var(--wz-z-tooltip); border-radius: var(--wz-radius-1); }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); }
.wz-popover { position: absolute; z-index: var(--wz-z-dropdown); width: 300px; padding: var(--wz-space-5); background: var(--wz-bg); border: var(--wz-border); box-shadow: var(--wz-shadow-float); font-size: var(--wz-text-small); }
/* ===================================================================== 24 SECTION BLOCKS */
/* Hero */
.wz-hero { padding-block: clamp(72px, 10vw, 140px) clamp(56px, 8vw, 104px); }
.wz-hero__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--wz-space-8); align-items: center; }
.wz-hero__content { display: flex; flex-direction: column; gap: var(--wz-space-5); align-items: flex-start; }
.wz-hero__content > * { margin: 0; }
.wz-hero__title { font-size: var(--wz-text-display); line-height: 1.02; letter-spacing: -0.025em; }
.wz-hero__text { font-size: var(--wz-text-lead); color: var(--wz-text-muted); max-width: 560px; line-height: 1.55; }
.wz-hero__media { position: relative; aspect-ratio: 4 / 5; background: var(--wz-bg-subtle); overflow: hidden; }
.wz-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.wz-hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--wz-space-4); margin-top: var(--wz-space-8); padding-top: var(--wz-space-5); border-top: var(--wz-border); font-size: var(--wz-text-small); color: var(--wz-text-muted); }
.wz-hero--navy { background: var(--wz-navy); }
.wz-hero--center .wz-hero__inner { grid-template-columns: 1fr; text-align: center; }
.wz-hero--center .wz-hero__content { align-items: center; margin-inline: auto; max-width: 860px; }
.wz-hero--image { position: relative; color: var(--wz-white); background: var(--wz-navy-950); isolation: isolate; }
.wz-hero--image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.wz-hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,10,71,.92) 0%, rgba(0,10,71,.6) 55%, rgba(0,10,71,.25) 100%); z-index: -1; }
.wz-hero--image .wz-hero__title { color: var(--wz-white); }
.wz-hero--image .wz-hero__text { color: var(--wz-blue-100); }
@media (max-width: 900px) { .wz-hero__inner { grid-template-columns: 1fr; gap: var(--wz-space-6); } .wz-hero__media { aspect-ratio: 16/10; } }
.wz-page-header { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 56px); border-bottom: var(--wz-border); }
.wz-page-header > .wz-container > * { margin-bottom: 0; }
.wz-page-header .wz-h1, .wz-page-header h1 { margin-top: var(--wz-space-3); }
/* CTA */
.wz-cta { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: var(--wz-space-6); align-items: center; padding: clamp(32px, 5vw, 64px); background: var(--wz-navy); color: var(--wz-white); }
.wz-cta > div > * { margin: 0; }
.wz-cta__title { font-size: var(--wz-text-h2); color: var(--wz-white); line-height: 1.15; letter-spacing: var(--wz-tracking-display); font-weight: var(--wz-weight-semibold); margin: 0; }
.wz-cta__text { color: var(--wz-blue-100); margin-top: var(--wz-space-3) !important; max-width: 560px; }
.wz-cta .wz-label { color: var(--wz-blue-300); margin-bottom: var(--wz-space-3) !important; }
.wz-cta__actions { display: flex; flex-wrap: wrap; gap: var(--wz-space-3); }
.wz-cta .wz-btn:not([class*="wz-btn--"]), .wz-cta .wz-btn--primary { --_bg: var(--wz-white); --_fg: var(--wz-navy); --_bd: var(--wz-white); --_bg-h: var(--wz-blue-100); --_fg-h: var(--wz-navy); --_bd-h: var(--wz-blue-100); }
.wz-cta .wz-btn--secondary { --_fg: var(--wz-white); --_bd: rgba(255,255,255,.7); --_bg-h: rgba(255,255,255,.1); --_fg-h: var(--wz-white); --_bd-h: var(--wz-white); }
.wz-cta--light { background: var(--wz-bg-subtle); color: var(--wz-text); }
.wz-cta--light .wz-cta__title { color: var(--wz-heading); }
.wz-cta--light .wz-cta__text { color: var(--wz-text-muted); }
.wz-cta--light .wz-label { color: var(--wz-accent); }
.wz-cta--light .wz-btn--primary, .wz-cta--light .wz-btn:not([class*="wz-btn--"]) { --_bg: var(--wz-navy); --_fg: var(--wz-white); --_bd: var(--wz-navy); --_bg-h: var(--wz-blue); --_fg-h: var(--wz-white); --_bd-h: var(--wz-blue); }
.wz-cta--light .wz-btn--secondary { --_fg: var(--wz-navy); --_bd: var(--wz-navy); --_bg-h: var(--wz-white); --_fg-h: var(--wz-navy); --_bd-h: var(--wz-navy); }
.wz-cta--outline { background: transparent; color: var(--wz-text); border: var(--wz-border-accent); }
.wz-cta--outline .wz-cta__title { color: var(--wz-heading); }
.wz-cta--outline .wz-cta__text { color: var(--wz-text-muted); }
.wz-cta--outline .wz-label { color: var(--wz-accent); }
.wz-cta--outline .wz-btn--primary { --_bg: var(--wz-navy); --_fg: var(--wz-white); --_bd: var(--wz-navy); --_bg-h: var(--wz-blue); --_bd-h: var(--wz-blue); --_fg-h: var(--wz-white); }
.wz-cta--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.wz-cta--center .wz-cta__text { margin-inline: auto; }
@media (max-width: 760px) { .wz-cta { grid-template-columns: 1fr; } }
.wz-cta-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--wz-space-5); flex-wrap: wrap; padding: var(--wz-space-5) 0; border-top: var(--wz-border-accent); border-bottom: var(--wz-border); }
.wz-cta-strip__text { font-size: 1.25rem; font-weight: var(--wz-weight-medium); color: var(--wz-heading); margin: 0; }
.wz-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--wz-z-header); display: none; gap: var(--wz-space-2); padding: 12px var(--wz-gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--wz-bg); border-top: var(--wz-border); }
@media (max-width: 760px) { .wz-sticky-cta { display: flex; } .wz-sticky-cta .wz-btn { flex: 1; } }
/* Logos strip */
.wz-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: var(--wz-border); border-left: var(--wz-border); }
.wz-logos > * { display: grid; place-items: center; min-height: 112px; padding: var(--wz-space-5); border-right: var(--wz-border); border-bottom: var(--wz-border); }
.wz-logos img { max-height: 36px; width: auto; filter: grayscale(1); opacity: .65; transition: opacity var(--wz-dur-2), filter var(--wz-dur-2); }
.wz-logos > *:hover img { filter: none; opacity: 1; }
/* Stats */
.wz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--wz-space-5); }
.wz-stat { display: flex; flex-direction: column; gap: var(--wz-space-2); padding-top: var(--wz-space-4); border-top: var(--wz-border-accent); }
.wz-stat__value { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); font-weight: var(--wz-weight-semibold); color: var(--wz-heading); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.wz-stat__label { font-size: var(--wz-text-small); color: var(--wz-text-muted); }
.wz-surface-navy .wz-stat { border-top-color: var(--wz-white); }
/* Pricing */
.wz-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--wz-space-4); align-items: stretch; }
.wz-plan { display: flex; flex-direction: column; gap: var(--wz-space-5); padding: var(--wz-space-6); border: var(--wz-border); background: var(--wz-bg); position: relative; }
.wz-plan > * { margin: 0; }
.wz-plan__name { font-size: var(--wz-text-h4); font-weight: var(--wz-weight-semibold); color: var(--wz-heading); }
.wz-plan__price { display: flex; align-items: baseline; gap: 6px; font-size: 2.75rem; font-weight: var(--wz-weight-semibold); color: var(--wz-heading); letter-spacing: -0.03em; line-height: 1; }
.wz-plan__price small { font-size: var(--wz-text-small); font-weight: var(--wz-weight-regular); color: var(--wz-text-muted); letter-spacing: 0; }
.wz-plan__desc { color: var(--wz-text-muted); font-size: var(--wz-text-small); }
.wz-plan__features { flex: 1; }
.wz-plan .wz-btn { width: 100%; }
.wz-plan--featured { background: var(--wz-navy); border-color: var(--wz-navy); color: var(--wz-white); }
.wz-plan--featured :is(.wz-plan__name, .wz-plan__price) { color: var(--wz-white); }
.wz-plan--featured :is(.wz-plan__desc, .wz-plan__price small) { color: var(--wz-blue-100); }
.wz-plan--featured .wz-list-check li::before { border-color: var(--wz-blue-300); }
.wz-plan--featured .wz-btn { --_bg: var(--wz-white); --_fg: var(--wz-navy); --_bd: var(--wz-white); --_bg-h: var(--wz-blue-100); --_fg-h: var(--wz-navy); --_bd-h: var(--wz-blue-100); }
.wz-plan__ribbon { position: absolute; top: -1px; right: var(--wz-space-5); padding: 6px 10px; background: var(--wz-blue); color: var(--wz-white); font-size: 11px; letter-spacing: var(--wz-tracking-label); text-transform: uppercase; font-weight: var(--wz-weight-medium); }
/* Testimonial */
.wz-testimonial { display: flex; flex-direction: column; gap: var(--wz-space-5); padding: var(--wz-space-6); border: var(--wz-border); background: var(--wz-bg); }
.wz-testimonial__quote { margin: 0; font-size: 1.25rem; line-height: 1.5; color: var(--wz-heading); font-weight: var(--wz-weight-regular); }
.wz-testimonial__quote::before { content: "“"; display: block; font-size: 3.5rem; line-height: .6; color: var(--wz-accent); margin-bottom: var(--wz-space-3); }
.wz-testimonial--large { border: 0; padding: 0; }
.wz-testimonial--large .wz-testimonial__quote { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: var(--wz-weight-medium); letter-spacing: -0.01em; line-height: 1.3; }
.wz-rating { display: inline-flex; gap: 2px; color: var(--wz-navy); font-size: 16px; letter-spacing: 2px; }
/* Team */
.wz-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--wz-space-5); }
.wz-member { display: flex; flex-direction: column; gap: var(--wz-space-2); }
.wz-member__photo { aspect-ratio: 4 / 5; background: var(--wz-bg-subtle); overflow: hidden; margin-bottom: var(--wz-space-2); }
.wz-member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); }
.wz-member__name { font-size: 1.125rem; font-weight: var(--wz-weight-semibold); color: var(--wz-heading); margin: 0; }
.wz-member__role { font-size: var(--wz-text-small); letter-spacing: .06em; color: var(--wz-accent); margin: 0; }
/* Timeline */
.wz-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.wz-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--wz-line); }
.wz-timeline > li { position: relative; padding: 0 0 var(--wz-space-6) var(--wz-space-6); margin: 0; }
.wz-timeline > li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border: 1.5px solid var(--wz-navy); background: var(--wz-bg); border-radius: 50%; }
.wz-timeline > li.is-active::before { background: var(--wz-navy); }
.wz-timeline__date { font-size: var(--wz-text-label); letter-spacing: var(--wz-tracking-label); color: var(--wz-accent); text-transform: uppercase; }
.wz-timeline__title { font-weight: var(--wz-weight-semibold); color: var(--wz-heading); margin: 2px 0 4px; }
/* Process steps (horizontal) */
.wz-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wz-space-5); counter-reset: proc; list-style: none; padding: 0; }
.wz-process > li { counter-increment: proc; margin: 0; padding-top: var(--wz-space-5); border-top: var(--wz-border); position: relative; }
.wz-process > li::before { content: counter(proc, decimal-leading-zero); display: block; font-size: 2.5rem; font-weight: var(--wz-weight-light); color: var(--wz-accent); line-height: 1; margin-bottom: var(--wz-space-4); }
.wz-process > li::after { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--wz-navy); }
/* Contact block */
.wz-contact { display: grid; gap: var(--wz-space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wz-contact__item { display: flex; flex-direction: column; gap: 4px; }
.wz-contact__item a { color: var(--wz-heading); font-weight: var(--wz-weight-medium); text-decoration: none; font-size: 1.125rem; }
.wz-contact__item a:hover { color: var(--wz-accent); }
.wz-map { aspect-ratio: 16 / 9; background: var(--wz-bg-subtle); border: var(--wz-border); filter: grayscale(.6) contrast(1.05); }
.wz-map iframe { width: 100%; height: 100%; border: 0; }
/* Blog / post */
.wz-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wz-space-3); font-size: var(--wz-text-small); color: var(--wz-text-subtle); }
.wz-post-meta > * + *::before { content: "·"; margin-right: var(--wz-space-3); }
.wz-author-box { display: flex; gap: var(--wz-space-5); padding: var(--wz-space-6); background: var(--wz-bg-subtle); }
.wz-share { display: flex; gap: var(--wz-space-2); }
.wz-share a { display: grid; place-items: center; width: 40px; height: 40px; border: var(--wz-border); color: var(--wz-heading); text-decoration: none; }
.wz-share a:hover { border-color: var(--wz-navy); background: var(--wz-navy); color: var(--wz-white); }
/* ===================================================================== 25 FOOTER */
.wz-footer { background: var(--wz-navy); color: var(--wz-blue-100); padding-block: var(--wz-space-8) var(--wz-space-5); font-size: var(--wz-text-small); }
.wz-footer a { color: var(--wz-white); text-decoration: none; }
.wz-footer a:hover { color: var(--wz-blue-300); text-decoration: underline; }
.wz-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--wz-space-7); padding-bottom: var(--wz-space-7); }
.wz-footer__brand img { height: 36px; width: auto; margin-bottom: var(--wz-space-4); }
.wz-footer__title { font-size: var(--wz-text-xs); letter-spacing: var(--wz-tracking-label); text-transform: uppercase; color: var(--wz-blue-300); margin: 0 0 var(--wz-space-4); font-weight: var(--wz-weight-medium); }
.wz-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wz-footer li { margin: 0; }
.wz-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--wz-space-4); flex-wrap: wrap; padding-top: var(--wz-space-5); border-top: 1px solid rgba(255,255,255,.16); color: var(--wz-blue-300); }
.wz-footer__bottom .wz-footer__url { color: var(--wz-white); font-size: 1rem; font-weight: var(--wz-weight-medium); }
.wz-footer--light { background: var(--wz-bg); color: var(--wz-text-muted); border-top: var(--wz-border); }
.wz-footer--light a { color: var(--wz-heading); }
.wz-footer--light .wz-footer__title { color: var(--wz-accent); }
.wz-footer--light .wz-footer__bottom { border-top: var(--wz-border); color: var(--wz-text-subtle); }
.wz-footer--light .wz-footer__bottom .wz-footer__url { color: var(--wz-navy); }
.wz-social { display: flex; gap: var(--wz-space-2); }
.wz-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.3); color: var(--wz-white); }
.wz-social a:hover { background: var(--wz-white); color: var(--wz-navy); text-decoration: none; }
.wz-social svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .wz-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wz-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .wz-footer__top { grid-template-columns: 1fr; } }
/* ===================================================================== 26 DASHBOARD SHELL */
.wz-app { display: grid; grid-template-columns: var(--wz-sidebar-w) minmax(0, 1fr); grid-template-rows: var(--wz-topbar-h) minmax(0, 1fr); grid-template-areas: "side top" "side main"; min-height: 100vh; background: var(--wz-bg-muted); }
.wz-app--embedded { min-height: 0; }
.wz-app--embedded .wz-sidebar { position: relative; height: auto; }
.wz-app--embedded .wz-appbar { position: relative; }
@media (max-width: 760px) { .wz-app--embedded { grid-template-columns: var(--wz-sidebar-w-collapsed) minmax(0, 1fr); } .wz-app--embedded .wz-sidebar__link span, .wz-app--embedded .wz-sidebar__section, .wz-app--embedded .wz-sidebar__link .wz-count, .wz-app--embedded .wz-user__text, .wz-app--embedded .wz-sidebar__brand img { display: none; } }
.wz-app.is-collapsed { grid-template-columns: var(--wz-sidebar-w-collapsed) minmax(0, 1fr); }
.wz-sidebar { grid-area: side; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--wz-navy); color: var(--wz-blue-100); overflow: hidden; }
.wz-sidebar__brand { display: flex; align-items: center; gap: var(--wz-space-3); height: var(--wz-topbar-h); padding: 0 var(--wz-space-5); border-bottom: 1px solid rgba(255,255,255,.12); flex: none; }
.wz-sidebar__brand img { height: 28px; width: auto; }
.wz-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--wz-space-4) var(--wz-space-3); display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.wz-sidebar__section { padding: var(--wz-space-5) var(--wz-space-3) var(--wz-space-2); font-size: 11px; letter-spacing: var(--wz-tracking-label); text-transform: uppercase; color: var(--wz-blue-300); }
.wz-sidebar__link { display: flex; align-items: center; gap: var(--wz-space-3); min-height: 40px; padding: 0 var(--wz-space-3); color: var(--wz-blue-100); text-decoration: none; font-size: var(--wz-text-small); font-weight: var(--wz-weight-medium); border-radius: var(--wz-radius-1); white-space: nowrap; position: relative; transition: background var(--wz-dur-1), color var(--wz-dur-1); }
.wz-sidebar__link svg { width: 18px; height: 18px; flex: none; stroke-width: 1.5; }
.wz-sidebar__link:hover { background: rgba(255,255,255,.08); color: var(--wz-white); }
.wz-sidebar__link.is-active, .wz-sidebar__link[aria-current="page"] { background: rgba(255,255,255,.12); color: var(--wz-white); }
.wz-sidebar__link.is-active::before, .wz-sidebar__link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--wz-white); }
.wz-sidebar__link .wz-count { margin-left: auto; background: rgba(255,255,255,.14); color: var(--wz-white); }
.wz-sidebar__footer { padding: var(--wz-space-4) var(--wz-space-5); border-top: 1px solid rgba(255,255,255,.12); flex: none; }
.wz-sidebar__footer .wz-user__name { color: var(--wz-white); }
.wz-sidebar__footer .wz-user__role { color: var(--wz-blue-300); }
.wz-sidebar--light { background: var(--wz-bg); color: var(--wz-text); border-right: var(--wz-border); }
.wz-sidebar--light .wz-sidebar__brand, .wz-sidebar--light .wz-sidebar__footer { border-color: var(--wz-line); }
.wz-sidebar--light .wz-sidebar__section { color: var(--wz-text-subtle); }
.wz-sidebar--light .wz-sidebar__link { color: var(--wz-text-muted); }
.wz-sidebar--light .wz-sidebar__link:hover { background: var(--wz-bg-subtle); color: var(--wz-heading); }
.wz-sidebar--light .wz-sidebar__link.is-active { background: var(--wz-blue-50); color: var(--wz-navy); }
.wz-sidebar--light .wz-sidebar__link.is-active::before { background: var(--wz-navy); }
.wz-sidebar--light .wz-sidebar__link .wz-count { background: var(--wz-bg-muted); color: var(--wz-text-muted); }
.wz-app.is-collapsed .wz-sidebar__link span, .wz-app.is-collapsed .wz-sidebar__section, .wz-app.is-collapsed .wz-sidebar__link .wz-count, .wz-app.is-collapsed .wz-user__text { display: none; }
.wz-app.is-collapsed .wz-sidebar__link { justify-content: center; }
.wz-appbar { grid-area: top; position: sticky; top: 0; z-index: var(--wz-z-header); display: flex; align-items: center; gap: var(--wz-space-4); padding: 0 var(--wz-space-6); background: var(--wz-bg); border-bottom: var(--wz-border); }
.wz-appbar__search { flex: 1; max-width: 480px; }
.wz-appbar__search .wz-input { min-height: 38px; background: var(--wz-bg-muted); border-color: transparent; }
.wz-appbar__search .wz-input:focus { background: var(--wz-bg); }
.wz-appbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--wz-space-2); }
.wz-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--wz-text-muted); border-radius: var(--wz-radius-1); position: relative; }
.wz-icon-btn:hover { background: var(--wz-bg-subtle); color: var(--wz-heading); }
.wz-icon-btn svg { width: 20px; height: 20px; stroke-width: 1.5; }
.wz-main { grid-area: main; padding: var(--wz-space-6); min-width: 0; }
.wz-main--narrow { max-width: 960px; }
.wz-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--wz-space-4); flex-wrap: wrap; margin-bottom: var(--wz-space-6); }
.wz-page-head h1, .wz-page-head .wz-page-title { font-size: 1.75rem; margin: 0; letter-spacing: -0.015em; }
.wz-page-head p { margin: 4px 0 0; color: var(--wz-text-muted); font-size: var(--wz-text-small); }
.wz-page-head__actions { display: flex; gap: var(--wz-space-2); flex-wrap: wrap; }
@media (max-width: 960px) {
.wz-app:not(.wz-app--embedded) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
.wz-app:not(.wz-app--embedded) .wz-sidebar { grid-area: auto; }
.wz-app:not(.wz-app--embedded) .wz-sidebar { position: fixed; left: 0; top: 0; width: var(--wz-sidebar-w); z-index: var(--wz-z-drawer); transform: translateX(-100%); transition: transform var(--wz-dur-3) var(--wz-ease); }
.wz-app.is-nav-open .wz-sidebar { transform: none; box-shadow: var(--wz-shadow-modal); }
.wz-appbar { padding: 0 var(--wz-space-4); }
.wz-main { padding: var(--wz-space-4); }
}
/* ===================================================================== 27 DASHBOARD WIDGETS */
.wz-panel { background: var(--wz-bg); border: var(--wz-border); display: flex; flex-direction: column; min-width: 0; }
.wz-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wz-space-3); padding: var(--wz-space-4) var(--wz-space-5); border-bottom: var(--wz-border); min-height: 56px; }
.wz-panel__title { margin: 0; font-size: 1rem; font-weight: var(--wz-weight-semibold); color: var(--wz-heading); letter-spacing: 0; }
.wz-panel__sub { font-size: var(--wz-text-xs); color: var(--wz-text-subtle); }
.wz-panel__body { padding: var(--wz-space-5); flex: 1; }
.wz-panel__body--flush { padding: 0; }
.wz-panel__foot { padding: var(--wz-space-3) var(--wz-space-5); border-top: var(--wz-border); font-size: var(--wz-text-small); display: flex; justify-content: space-between; align-items: center; }
.wz-panel .wz-table-wrap { border: 0; }
.wz-dash-grid { display: grid; gap: var(--wz-space-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wz-dash-grid > * { grid-column: span 12; }
.wz-span-3 { grid-column: span 3 !important; } .wz-span-4 { grid-column: span 4 !important; } .wz-span-5 { grid-column: span 5 !important; }
.wz-span-6 { grid-column: span 6 !important; } .wz-span-7 { grid-column: span 7 !important; } .wz-span-8 { grid-column: span 8 !important; }
.wz-span-9 { grid-column: span 9 !important; } .wz-span-12 { grid-column: span 12 !important; }
@media (max-width: 1100px) { .wz-span-3 { grid-column: span 6 !important; } .wz-span-4, .wz-span-5, .wz-span-7, .wz-span-8 { grid-column: span 12 !important; } }
@media (max-width: 640px) { .wz-dash-grid > * { grid-column: span 12 !important; } }
/* KPI tile */
.wz-kpi { display: flex; flex-direction: column; gap: var(--wz-space-2); padding: var(--wz-space-5); background: var(--wz-bg); border: var(--wz-border); min-width: 0; }
.wz-kpi__label { display: flex; justify-content: space-between; align-items: center; font-size: var(--wz-text-small); color: var(--wz-text-muted); }
.wz-kpi__value { font-size: 2rem; font-weight: var(--wz-weight-semibold); color: var(--wz-heading); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wz-kpi__value small { font-size: .5em; font-weight: var(--wz-weight-regular); color: var(--wz-text-subtle); letter-spacing: 0; margin-left: 2px; }
.wz-kpi__foot { display: flex; align-items: center; gap: var(--wz-space-2); font-size: var(--wz-text-xs); color: var(--wz-text-subtle); }
.wz-kpi--navy { background: var(--wz-navy); border-color: var(--wz-navy); }
.wz-kpi--navy .wz-kpi__value { color: var(--wz-white); }
.wz-kpi--navy .wz-kpi__label, .wz-kpi--navy .wz-kpi__foot { color: var(--wz-blue-100); }
.wz-trend { display: inline-flex; align-items: center; gap: 2px; font-size: var(--wz-text-xs); font-weight: var(--wz-weight-semibold); font-variant-numeric: tabular-nums; }
.wz-trend--up { color: var(--wz-success); } .wz-trend--up::before { content: "↑"; }
.wz-trend--down { color: var(--wz-danger); } .wz-trend--down::before { content: "↓"; }
.wz-trend--flat { color: var(--wz-text-subtle); } .wz-trend--flat::before { content: "→"; }
.wz-kpi--navy .wz-trend--up { color: #8EE0B8; } .wz-kpi--navy .wz-trend--down { color: #F7A9B1; }
/* Chart container + CSS-only bar chart & sparkline helpers */
.wz-chart { position: relative; width: 100%; min-height: 240px; }
.wz-chart canvas, .wz-chart svg { width: 100% !important; height: 100% !important; }
.wz-legend { display: flex; flex-wrap: wrap; gap: var(--wz-space-4); font-size: var(--wz-text-xs); color: var(--wz-text-muted); }
.wz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wz-legend span::before { content: ""; width: 10px; height: 10px; background: var(--c, var(--wz-chart-1)); }
.wz-bars { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: var(--wz-space-3); border-bottom: var(--wz-border); }
.wz-bars > span { flex: 1; height: var(--h, 50%); background: var(--wz-chart-1); min-width: 4px; position: relative; transition: background var(--wz-dur-1); }
.wz-bars > span:hover { background: var(--wz-chart-2); }
.wz-bars > span.is-muted { background: var(--wz-blue-200); }
.wz-bar-list { display: flex; flex-direction: column; gap: var(--wz-space-3); }
.wz-bar-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--wz-space-3); font-size: var(--wz-text-small); }
.wz-bar-list__track { grid-column: 1 / -1; height: 6px; background: var(--wz-line-soft); }
.wz-bar-list__fill { height: 100%; width: var(--value, 0%); background: var(--wz-navy); }
.wz-bar-list__val { font-variant-numeric: tabular-nums; color: var(--wz-heading); font-weight: var(--wz-weight-medium); }
/* Activity feed */
.wz-activity { list-style: none; padding: 0; margin: 0; }
.wz-activity > li { display: flex; gap: var(--wz-space-3); padding: var(--wz-space-3) 0; margin: 0; border-bottom: 1px solid var(--wz-line-soft); font-size: var(--wz-text-small); }
.wz-activity > li:last-child { border-bottom: 0; }
.wz-activity__time { margin-left: auto; color: var(--wz-text-subtle); white-space: nowrap; font-size: var(--wz-text-xs); }
.wz-activity strong { color: var(--wz-heading); font-weight: var(--wz-weight-medium); }
/* Filter bar / toolbar */
.wz-toolbar { display: flex; align-items: center; gap: var(--wz-space-2); flex-wrap: wrap; padding: var(--wz-space-3) var(--wz-space-5); border-bottom: var(--wz-border); background: var(--wz-bg); }
.wz-toolbar__spacer { flex: 1; }
.wz-toolbar .wz-input, .wz-toolbar .wz-select { min-height: var(--wz-control-h-sm); font-size: var(--wz-text-small); padding-top: 6px; padding-bottom: 6px; width: auto; }
.wz-filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border: 1px dashed var(--wz-border-strong); background: transparent; font-size: var(--wz-text-small); color: var(--wz-text-muted); border-radius: var(--wz-radius-1); }
.wz-filter-chip:hover { border-color: var(--wz-navy); color: var(--wz-navy); }
.wz-filter-chip.is-active { border-style: solid; border-color: var(--wz-navy); background: var(--wz-blue-50); color: var(--wz-navy); }
.wz-bulkbar { display: flex; align-items: center; gap: var(--wz-space-3); padding: var(--wz-space-2) var(--wz-space-5); background: var(--wz-navy); color: var(--wz-white); font-size: var(--wz-text-small); }
.wz-bulkbar .wz-btn { --_bg: transparent; --_fg: var(--wz-white); --_bd: rgba(255,255,255,.35); --_bg-h: rgba(255,255,255,.1); --_fg-h: var(--wz-white); --_bd-h: var(--wz-white); min-height: 32px; padding: 0 12px; font-size: var(--wz-text-small); }
/* Empty / error states */
.wz-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--wz-space-3); padding: var(--wz-space-8) var(--wz-space-5); color: var(--wz-text-muted); }
.wz-empty > * { margin: 0; }
.wz-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border: var(--wz-border); color: var(--wz-navy); margin-bottom: var(--wz-space-2); }
.wz-empty__title { font-size: 1.125rem; font-weight: var(--wz-weight-semibold); color: var(--wz-heading); }
.wz-empty__text { max-width: 380px; font-size: var(--wz-text-small); }
.wz-error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.wz-error-page__code { font-size: clamp(5rem, 3rem + 10vw, 10rem); font-weight: var(--wz-weight-light); color: var(--wz-heading); line-height: 1; letter-spacing: -0.04em; }
/* Kanban */
.wz-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--wz-space-4); overflow-x: auto; padding-bottom: var(--wz-space-3); }
.wz-kanban__col { display: flex; flex-direction: column; gap: var(--wz-space-2); background: var(--wz-bg-subtle); padding: var(--wz-space-3); min-height: 320px; }
.wz-kanban__head { display: flex; justify-content: space-between; align-items: center; padding: var(--wz-space-1) var(--wz-space-2) var(--wz-space-2); font-size: var(--wz-text-small); font-weight: var(--wz-weight-semibold); color: var(--wz-heading); }
.wz-kanban__card { background: var(--wz-bg); border: var(--wz-border); padding: var(--wz-space-3) var(--wz-space-4); font-size: var(--wz-text-small); display: flex; flex-direction: column; gap: var(--wz-space-2); cursor: grab; transition: border-color var(--wz-dur-1); }
.wz-kanban__card:hover { border-color: var(--wz-border-strong); }
.wz-kanban__card.is-dragging { opacity: .6; border-color: var(--wz-navy); box-shadow: var(--wz-shadow-float); cursor: grabbing; }
/* Settings rows */
.wz-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--wz-space-6); padding: var(--wz-space-6) 0; border-bottom: var(--wz-border); }
.wz-setting__title { font-weight: var(--wz-weight-semibold); color: var(--wz-heading); margin: 0 0 4px; }
.wz-setting__desc { font-size: var(--wz-text-small); color: var(--wz-text-muted); margin: 0; }
@media (max-width: 760px) { .wz-setting { grid-template-columns: 1fr; gap: var(--wz-space-3); } }
/* Calendar mini */
.wz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: var(--wz-text-small); text-align: center; }
.wz-cal__dow { font-size: 11px; color: var(--wz-text-subtle); padding: 6px 0; }
.wz-cal__day { aspect-ratio: 1; display: grid; place-items: center; border: 0; background: transparent; color: var(--wz-text); border-radius: var(--wz-radius-1); }
.wz-cal__day:hover { background: var(--wz-bg-subtle); }
.wz-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--wz-navy); color: var(--wz-navy); font-weight: 600; }
.wz-cal__day.is-selected { background: var(--wz-navy); color: var(--wz-white); }
.wz-cal__day.is-outside { color: var(--wz-slate-300); }
/* Command palette */
.wz-command { width: min(620px, calc(100vw - 32px)); background: var(--wz-bg); box-shadow: var(--wz-shadow-modal); }
.wz-command__input { width: 100%; border: 0; border-bottom: var(--wz-border); padding: 18px 20px; font-size: 1.0625rem; background: transparent; outline: none; }
.wz-command__list { max-height: 360px; overflow-y: auto; padding: 6px; }
/* ===================================================================== 28 UTILITIES */
.wz-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wz-text-left { text-align: left; } .wz-text-center { text-align: center; } .wz-text-right { text-align: right; }
.wz-text-navy { color: var(--wz-navy) !important; } .wz-text-blue { color: var(--wz-blue) !important; } .wz-text-white { color: var(--wz-white) !important; }
.wz-text-ink { color: var(--wz-ink) !important; } .wz-text-success { color: var(--wz-success) !important; } .wz-text-danger { color: var(--wz-danger) !important; } .wz-text-warning { color: var(--wz-warning) !important; }
.wz-bg-navy { background: var(--wz-navy) !important; } .wz-bg-blue { background: var(--wz-blue) !important; } .wz-bg-white { background: var(--wz-white) !important; }
.wz-bg-subtle { background: var(--wz-bg-subtle) !important; } .wz-bg-muted { background: var(--wz-bg-muted) !important; }
.wz-fw-300 { font-weight: 300; } .wz-fw-400 { font-weight: 400; } .wz-fw-500 { font-weight: 500; } .wz-fw-600 { font-weight: 600; } .wz-fw-700 { font-weight: 700; }
.wz-tabular { font-variant-numeric: tabular-nums; }
.wz-mono { font-family: var(--wz-font-mono); }
.wz-uppercase { text-transform: uppercase; letter-spacing: var(--wz-tracking-label); }
.wz-nowrap { white-space: nowrap; }
.wz-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wz-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wz-balance { text-wrap: balance; } .wz-pretty { text-wrap: pretty; }
.wz-measure { max-width: var(--wz-measure); }
.wz-border { border: var(--wz-border); } .wz-border-0 { border: 0 !important; }
.wz-border-t { border-top: var(--wz-border); } .wz-border-b { border-bottom: var(--wz-border); }
.wz-border-l { border-left: var(--wz-border); } .wz-border-r { border-right: var(--wz-border); }
.wz-border-accent { border: var(--wz-border-accent); } .wz-border-t-accent { border-top: var(--wz-border-accent); }
.wz-rounded-0 { border-radius: 0; } .wz-rounded-1 { border-radius: var(--wz-radius-1); } .wz-rounded-2 { border-radius: var(--wz-radius-2); } .wz-rounded-full { border-radius: 999px; }
.wz-shadow-float { box-shadow: var(--wz-shadow-float); }
.wz-m-0 { margin: 0 !important; } .wz-mt-0 { margin-top: 0 !important; } .wz-mb-0 { margin-bottom: 0 !important; }
.wz-mt-2 { margin-top: var(--wz-space-2); } .wz-mt-4 { margin-top: var(--wz-space-4); } .wz-mt-5 { margin-top: var(--wz-space-5); } .wz-mt-6 { margin-top: var(--wz-space-6); } .wz-mt-7 { margin-top: var(--wz-space-7); } .wz-mt-8 { margin-top: var(--wz-space-8); }
.wz-mb-2 { margin-bottom: var(--wz-space-2); } .wz-mb-4 { margin-bottom: var(--wz-space-4); } .wz-mb-5 { margin-bottom: var(--wz-space-5); } .wz-mb-6 { margin-bottom: var(--wz-space-6); } .wz-mb-7 { margin-bottom: var(--wz-space-7); } .wz-mb-8 { margin-bottom: var(--wz-space-8); }
.wz-mx-auto { margin-inline: auto; } .wz-ml-auto { margin-left: auto; }
.wz-p-0 { padding: 0 !important; } .wz-p-4 { padding: var(--wz-space-4); } .wz-p-5 { padding: var(--wz-space-5); } .wz-p-6 { padding: var(--wz-space-6); } .wz-p-7 { padding: var(--wz-space-7); }
.wz-py-6 { padding-block: var(--wz-space-6); } .wz-py-8 { padding-block: var(--wz-space-8); }
.wz-flex { display: flex; } .wz-inline-flex { display: inline-flex; } .wz-grid-d { display: grid; } .wz-block { display: block; } .wz-hidden { display: none !important; }
.wz-items-center { align-items: center; } .wz-items-start { align-items: flex-start; } .wz-items-end { align-items: flex-end; }
.wz-justify-between { justify-content: space-between; } .wz-justify-center { justify-content: center; } .wz-justify-end { justify-content: flex-end; }
.wz-flex-wrap { flex-wrap: wrap; } .wz-flex-1 { flex: 1; min-width: 0; } .wz-shrink-0 { flex-shrink: 0; }
.wz-w-full { width: 100%; } .wz-h-full { height: 100%; } .wz-relative { position: relative; } .wz-sticky { position: sticky; top: calc(var(--wz-header-h) + 16px); }
.wz-overflow-hidden { overflow: hidden; } .wz-overflow-auto { overflow: auto; }
@media (max-width: 640px) { .wz-hide-sm { display: none !important; } }
@media (min-width: 641px) { .wz-show-sm { display: none !important; } }
@media (max-width: 960px) { .wz-hide-md { display: none !important; } }
/* ===================================================================== 29 MOTION & ACCESSIBILITY */
.wz-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--wz-ease), transform 600ms var(--wz-ease); }
.wz-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.wz-reveal { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
.wz-btn, .wz-input, .wz-select, .wz-textarea, .wz-card, .wz-box { border: 1px solid CanvasText; }
.wz-check input:checked { background: Highlight; }
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--wz-bg: var(--wz-navy-950); --wz-bg-subtle: #00105A; --wz-bg-muted: #000D52;
--wz-text: #E9EDFA; --wz-text-muted: #A9B3D9; --wz-text-subtle: #8792BF;
--wz-heading: var(--wz-white); --wz-accent: var(--wz-blue-300);
--wz-border-color: #1C2A7A; --wz-border-strong: #33449A; --wz-line: #1C2A7A; --wz-line-soft: #13206B; --wz-paper: var(--wz-navy-950);
color-scheme: dark;
}
}
/* Scrollbars (dashboard) */
.wz-scroll { scrollbar-width: thin; scrollbar-color: var(--wz-slate-300) transparent; }
.wz-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.wz-scroll::-webkit-scrollbar-thumb { background: var(--wz-slate-300); border-radius: 4px; }
/* ===================================================================== 30 PRINT */
@media print {
.wz-header, .wz-footer, .wz-sidebar, .wz-appbar, .wz-cookie, .wz-toast-region, .wz-sticky-cta, .wz-fab, .wz-btn { display: none !important; }
body { color: #000; background: #fff; font-size: 11pt; }
.wz-app { display: block; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
.wz-card, .wz-box, .wz-panel { break-inside: avoid; }
}