/* dazzle v0.34.2 | MIT License | https://github.com/manwithacat/dazzle */
[data-dz-show] {
transition: opacity 150ms ease-in, transform 150ms ease-in;
}
[data-dz-toggleable]:not([data-dz-open]) [data-dz-show] {
display: none;
}
[data-dz-show="dropdown"] {
transition: opacity 150ms ease-out, transform 150ms ease-out;
transform-origin: top right;
}
[data-dz-toggleable][data-dz-open] [data-dz-show="dropdown"] {
opacity: 1;
transform: scale(1) translateY(0);
}
[data-dz-slide-over] [data-dz-show="backdrop"] {
transition: opacity 200ms ease-out;
}
[data-dz-slide-over] [data-dz-show="panel"] {
transition: transform 200ms ease-out;
transform: translateX(100%);
}
[data-dz-slide-over][data-dz-open] [data-dz-show="panel"] {
transform: translateX(0);
}
[data-dz-bulk-bar] {
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.dz-toast-enter {
opacity: 0;
transform: translateX(1rem);
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.dz-toast-leave {
opacity: 0;
transform: translateX(1rem);
transition: opacity 150ms ease-in, transform 150ms ease-in;
}
#dz-toast .alert {
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
@media (min-width: 1024px) {
.drawer[data-dz-sidebar="open"] {
grid-template-columns: max-content 1fr;
}
.drawer[data-dz-sidebar="open"] > .drawer-side {
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
visibility: visible;
pointer-events: auto;
opacity: 1;
display: block;
width: auto;
overscroll-behavior: auto;
}
.drawer[data-dz-sidebar="open"] > .drawer-side > .drawer-overlay {
visibility: hidden;
}
.drawer[data-dz-sidebar="open"] > .drawer-side > *:not(.drawer-overlay) {
translate: 0%;
transform: translateX(0);
}
.drawer[data-dz-sidebar="open"] > .drawer-content > [data-dz-sidebar-navbar] {
display: none;
}
}
tr.htmx-swapping {
opacity: 0;
transform: translateX(1rem);
transition: opacity 300ms ease-out, transform 300ms ease-out;
}
tr.htmx-added,
tr.htmx-settling {
animation: dz-row-highlight 600ms ease-out;
}
@keyframes dz-row-highlight {
from { background-color: oklch(0.85 0.1 145 / 0.3); }
to { background-color: transparent; }
}
.btn.htmx-request {
pointer-events: none;
opacity: 0.7;
}
.htmx-indicator {
display: none;
}
.htmx-request .htmx-indicator {
display: inline-block;
}
.htmx-request.htmx-indicator {
display: inline-block;
}
.dz-skeleton {
background: linear-gradient(90deg, oklch(0.8 0 0 / 0.3) 25%, oklch(0.85 0 0 / 0.5) 50%, oklch(0.8 0 0 / 0.3) 75%);
background-size: 200% 100%;
animation: dz-shimmer 1.5s ease-in-out infinite;
border-radius: 0.25rem;
}
.dz-skeleton-text {
height: 0.75rem;
margin-bottom: 0.5rem;
}
.dz-skeleton-text-lg {
height: 1rem;
margin-bottom: 0.5rem;
width: 60%;
}
.dz-skeleton-cell {
height: 1rem;
}
@keyframes dz-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@view-transition {
navigation: auto;
}
#main-content {
view-transition-name: main-content;
}
::view-transition-old(main-content) {
animation: dz-fade-out 150ms ease-in forwards;
}
::view-transition-new(main-content) {
animation: dz-fade-in 200ms ease-out;
}
@keyframes dz-fade-out {
to {
opacity: 0;
transform: translateY(4px);
}
}
@keyframes dz-fade-in {
from {
opacity: 0;
transform: translateY(4px);
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(main-content),
::view-transition-new(main-content) {
animation: none;
}
tr.htmx-swapping {
transition: none;
}
tr.htmx-added,
tr.htmx-settling {
animation: none;
}
.dz-skeleton {
animation: none;
}
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
dialog[open] {
animation: dz-dialog-in 200ms ease-out;
}
@keyframes dz-dialog-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
#app,
.dz-app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.dz-app__header {
}
.dz-app__main {
flex: 1;
padding: 1.5rem;
max-width: 80rem;
margin: 0 auto;
width: 100%;
}
@media (min-width: 640px) {
.dz-app__main {
padding: 2rem;
}
}
@media (min-width: 1024px) {
.dz-app__main {
padding: 2.5rem 3rem;
}
}
.dz-app__sidebar {
}
.dz-app__footer {
}
.dz-workspace {
}
.dz-metric-card {
}
.dz-list-panel {
}
.dz-detail-panel {
}
.dz-form-panel {
}
.dz-field-label {
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.25rem;
display: block;
}
.dz-field-label--required::after {
content: " *";
color: oklch(var(--er));
}
.dz-text-muted {
opacity: 0.7;
}
.dz-text-label {
font-weight: 500;
font-size: 0.875rem;
}
[data-dazzle-entity]:hover {
}
.dz-btn-ghost {
background: transparent;
border: none;
box-shadow: none;
color: hsl(var(--muted-foreground, 240 3.8% 46.1%));
}
.dz-btn-ghost:hover {
background: hsl(var(--accent, 240 4.8% 95.9%));
color: hsl(var(--accent-foreground, 240 5.9% 10%));
}
.dz-btn-link {
background: transparent;
border: none;
box-shadow: none;
color: hsl(var(--primary, 240 5.9% 10%));
text-decoration: underline;
text-underline-offset: 4px;
}
.dz-btn-link:hover {
text-decoration-thickness: 2px;
}
.dz-label {
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground, 240 10% 3.9%));
margin-bottom: 0.375rem;
display: block;
}
.dz-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 12rem;
}
.dz-empty-state h3 {
font-weight: 600;
color: hsl(var(--foreground, 240 10% 3.9%));
margin-bottom: 0.25rem;
}
.dz-empty-state p {
color: hsl(var(--muted-foreground, 240 3.8% 46.1%));
font-size: 0.875rem;
}
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--success: 142 76% 36%;
--success-foreground: 0 0% 98%;
--warning: 38 92% 50%;
--warning-foreground: 0 0% 98%;
--info: 217 91% 60%;
--info-foreground: 0 0% 98%;
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'Cascadia Code', monospace;
--space-0: 0;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--radius-sm: 0.25rem;
--radius: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.625rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-xs: 0 1px 2px 0 hsl(240 5.9% 10% / 0.03);
--shadow-sm: 0 1px 3px 0 hsl(240 5.9% 10% / 0.06), 0 1px 2px -1px hsl(240 5.9% 10% / 0.06);
--shadow-md: 0 4px 6px -1px hsl(240 5.9% 10% / 0.07), 0 2px 4px -2px hsl(240 5.9% 10% / 0.05);
--shadow-lg: 0 10px 15px -3px hsl(240 5.9% 10% / 0.07), 0 4px 6px -4px hsl(240 5.9% 10% / 0.05);
--shadow-xl: 0 20px 25px -5px hsl(240 5.9% 10% / 0.08), 0 8px 10px -6px hsl(240 5.9% 10% / 0.05);
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--dz-shadow-sm: var(--shadow-sm);
--dz-shadow-card: var(--shadow-sm);
--dz-shadow-md: var(--shadow-md);
--dz-shadow-lg: var(--shadow-lg);
--dz-transition-fast: var(--duration-fast);
--dz-transition-normal: var(--duration-normal);
--dz-accent-glow: hsl(var(--ring) / 0.15);
--dz-hero-bg-from: oklch(0.45 0.18 265);
--dz-hero-bg-to: oklch(0.38 0.20 280);
--dz-shadow-hero: 0 20px 60px -12px oklch(0 0 0 / 0.25);
--dz-shadow-xl: var(--shadow-xl);
--dz-text-foreground: oklch(0.15 0 0);
--dz-text-emphasis: oklch(0.35 0 0);
--dz-text-body: oklch(0.45 0 0);
--dz-text-muted: oklch(0.5 0 0);
--dz-surface-card: white;
--dz-feature-icon-bg: oklch(0.92 0.03 260);
--dz-section-alt-bg: oklch(0.97 0.01 260);
--dz-pricing-highlight-bg: oklch(0.45 0.18 270);
--dz-border-default: oklch(0 0 0 / 0.1);
--dz-border-subtle: oklch(0 0 0 / 0.08);
--dz-border-input: oklch(0 0 0 / 0.15);
--dz-hero-overlay: oklch(1 0 0 / 0.1);
--dz-hero-border: oklch(1 0 0 / 0.5);
--dz-hero-border-hover: oklch(1 0 0 / 0.7);
--dz-hero-text-dimmed: oklch(1 0 0 / 0.8);
--dz-hero-border-dim: oklch(1 0 0 / 0.15);
--dz-hero-btn-hover: oklch(0.98 0 0);
--dz-header-bg: oklch(1 0 0 / 0.95);
--dz-footer-bg: oklch(0.15 0.01 260);
--dz-footer-text: oklch(0.7 0 0);
--dz-footer-link: oklch(0.6 0 0);
--dz-footer-border: oklch(1 0 0 / 0.1);
--dz-logo-color: oklch(0.25 0.02 260);
--dz-error-bg: oklch(0.95 0.03 25);
--dz-error-text: oklch(0.45 0.15 25);
--dz-ring-glow: 0 0 0 3px oklch(0.50 0.18 270 / 0.15);
--dz-spacing-hero-y: 6rem;
--dz-spacing-section-y: 5rem;
--dz-spacing-feature-gap: 2rem;
--dz-spacing-card-padding: 1.5rem;
--dz-font-size-fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--dz-font-size-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--dz-font-size-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--dz-font-size-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
--dz-font-size-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
--dz-font-size-fluid-2xl: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
--dz-font-size-fluid-3xl: clamp(1.875rem, 1.3rem + 2.875vw, 3rem);
--dz-font-size-hero-headline: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem);
--dz-font-weight-hero-headline: 800;
--dz-line-height-hero-headline: 1.1;
--dz-letter-spacing-hero-headline: -0.02em;
--dz-font-size-subhead: 1.25rem;
--dz-line-height-subhead: 1.5;
--dz-font-size-section-headline: 2.25rem;
--dz-font-weight-section-headline: 700;
--dz-line-height-section-headline: 1.2;
--dz-letter-spacing-section-headline: -0.01em;
--dz-font-size-body: 1rem;
--dz-line-height-body: 1.6;
--dz-radius-button: 0.5rem;
--dz-radius-card: 0.75rem;
--dz-radius-lg: 1rem;
--dz-radius-sm: 0.375rem;
}
.dark,
[data-theme="dark"] {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--success: 142 76% 36%;
--success-foreground: 0 0% 98%;
--warning: 38 92% 50%;
--warning-foreground: 0 0% 98%;
--info: 217 91% 60%;
--info-foreground: 0 0% 98%;
--shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.1);
--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.15);
--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.2), 0 2px 4px -2px hsl(0 0% 0% / 0.15);
--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.25), 0 4px 6px -4px hsl(0 0% 0% / 0.15);
--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.3), 0 8px 10px -6px hsl(0 0% 0% / 0.2);
--dz-sidebar-from: hsl(240 10% 5%);
--dz-sidebar-to: hsl(240 10% 8%);
--dz-accent-glow: hsl(var(--ring) / 0.2);
--dz-section-alt-bg: oklch(0.08 0.01 260);
--dz-feature-icon-bg: oklch(0.20 0.04 260);
--dz-text-foreground: oklch(0.95 0 0);
--dz-text-emphasis: oklch(0.85 0 0);
--dz-text-body: oklch(0.70 0 0);
--dz-text-muted: oklch(0.55 0 0);
--dz-surface-card: oklch(0.18 0.01 260);
--dz-border-default: oklch(1 0 0 / 0.12);
--dz-border-subtle: oklch(1 0 0 / 0.08);
--dz-border-input: oklch(1 0 0 / 0.15);
--dz-header-bg: oklch(0.15 0.01 260 / 0.95);
--dz-footer-bg: oklch(0.08 0.01 260);
--dz-footer-text: oklch(0.65 0 0);
--dz-footer-link: oklch(0.55 0 0);
--dz-footer-border: oklch(1 0 0 / 0.1);
--dz-logo-color: oklch(0.95 0 0);
--dz-error-bg: oklch(0.20 0.06 25);
--dz-error-text: oklch(0.80 0.15 25);
--dz-ring-glow: 0 0 0 3px oklch(0.60 0.18 270 / 0.15);
}
:root,
[data-theme="light"] {
--b1: 0 0% 100%;
--b2: 240 4.8% 95.9%;
--b3: 240 5.9% 90%;
--bc: 240 10% 3.9%;
--p: 240 5.9% 10%;
--pf: 240 5.2% 16%;
--pc: 0 0% 98%;
--s: 240 4.8% 95.9%;
--sf: 240 5.9% 90%;
--sc: 240 5.9% 10%;
--a: 240 4.8% 95.9%;
--af: 240 5.9% 90%;
--ac: 240 5.9% 10%;
--n: 240 5.9% 10%;
--nf: 240 3.7% 15.9%;
--nc: 0 0% 98%;
--su: 142 76% 36%;
--in: 217 91% 60%;
--wa: 38 92% 50%;
--er: 0 84.2% 60.2%;
--rounded-box: var(--radius-lg);
--rounded-btn: var(--radius-md);
--rounded-badge: var(--radius-full);
--animation-btn: var(--duration-fast);
--animation-input: var(--duration-fast);
--btn-focus-scale: 0.98;
}
[data-theme="dark"] {
--b1: 240 10% 3.9%;
--b2: 240 3.7% 10%;
--b3: 240 3.7% 15.9%;
--bc: 0 0% 98%;
--p: 0 0% 98%;
--pf: 0 0% 90%;
--pc: 240 5.9% 10%;
--s: 240 3.7% 15.9%;
--sf: 240 3.7% 20%;
--sc: 0 0% 98%;
--a: 240 3.7% 15.9%;
--af: 240 3.7% 20%;
--ac: 0 0% 98%;
--n: 0 0% 98%;
--nf: 0 0% 90%;
--nc: 240 5.9% 10%;
--su: 142 76% 36%;
--in: 217 91% 60%;
--wa: 38 92% 50%;
--er: 0 62.8% 30.6%;
}
body {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: hsl(var(--foreground));
background-color: hsl(var(--background));
}
code, pre, kbd, samp {
font-family: var(--font-mono);
}
a, button, .btn, input, select, textarea, .card, .menu li a {
transition: all var(--duration-fast) var(--ease-default);
}
:focus-visible {
outline: 3px solid hsl(var(--ring));
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
@media (prefers-contrast: high) {
:root {
--border: 240 10% 30%;
--input: 240 10% 30%;
--muted-foreground: 240 10% 25%;
}
.btn {
border: 2px solid currentColor;
}
.badge {
border: 1px solid currentColor;
}
.card {
border-width: 2px;
}
.input,
.select,
.textarea {
border-width: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.drawer-side aside,
.drawer-side > aside.bg-base-200,
.drawer-side > aside.bg-base-100 {
background: hsl(var(--card));
border-inline-end: 1px solid hsl(var(--border));
}
.drawer-side aside > div:first-child {
border-block-end-color: hsl(var(--border));
}
.drawer-side aside > div:first-child a {
color: hsl(var(--foreground));
letter-spacing: -0.01em;
}
.drawer-side .menu a {
color: hsl(var(--muted-foreground));
border-radius: var(--radius-md);
margin-bottom: 0.125rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
}
.drawer-side .menu a:hover {
background: hsl(var(--accent));
color: hsl(var(--accent-foreground));
}
.drawer-side .menu a.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-weight: 500;
box-shadow: none;
}
.drawer-side aside > div:last-child {
border-block-start-color: hsl(var(--border));
}
.navbar {
backdrop-filter: blur(8px);
background: hsl(var(--background) / 0.85);
border-block-end: 1px solid hsl(var(--border));
}
.navbar .text-xl {
font-weight: 600;
letter-spacing: -0.02em;
}
.card {
box-shadow: var(--shadow-sm);
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
background: hsl(var(--card));
color: hsl(var(--card-foreground));
transition: box-shadow var(--duration-normal) var(--ease-default),
transform var(--duration-normal) var(--ease-default);
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card[onclick]:hover,
.card a:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.card-title {
font-weight: 600;
letter-spacing: -0.01em;
}
.card-body {
gap: 0.75rem;
}
.btn {
font-weight: 500;
letter-spacing: 0.01em;
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
transition: all var(--duration-fast) var(--ease-default);
}
.btn:hover {
box-shadow: var(--shadow-sm);
}
.btn:active {
transform: scale(var(--btn-focus-scale));
}
.btn:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
.btn-primary {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border-color: hsl(var(--primary));
}
.btn-primary:hover {
background: hsl(var(--primary) / 0.9);
border-color: hsl(var(--primary) / 0.9);
}
.btn-ghost {
box-shadow: none;
background: transparent;
}
.btn-ghost:hover {
box-shadow: none;
background: hsl(var(--accent));
}
.btn-outline {
border: 1px solid hsl(var(--border));
background: transparent;
color: hsl(var(--foreground));
}
.btn-outline:hover {
background: hsl(var(--accent));
color: hsl(var(--accent-foreground));
border-color: hsl(var(--border));
}
.btn-error {
background: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
border-color: hsl(var(--destructive));
}
.btn-error:hover {
background: hsl(var(--destructive) / 0.9);
}
.input,
.select,
.textarea {
border: 1px solid hsl(var(--input));
border-radius: var(--radius-md);
background: transparent;
transition: border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.input:focus,
.select:focus,
.textarea:focus {
border-color: hsl(var(--ring));
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.15);
outline: none;
}
.input:hover:not(:focus),
.select:hover:not(:focus),
.textarea:hover:not(:focus) {
border-color: hsl(var(--foreground) / 0.2);
}
.label-text {
font-weight: 500;
font-size: 0.875rem;
color: hsl(var(--foreground));
letter-spacing: 0.01em;
}
.input::placeholder,
.textarea::placeholder {
color: hsl(var(--muted-foreground));
}
.table {
border-collapse: separate;
border-spacing: 0;
}
.table thead th {
background: hsl(var(--muted));
font-weight: 500;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
border-block-end: 1px solid hsl(var(--border));
padding-block: 0.75rem;
padding-inline: 1rem;
}
.table tbody tr {
transition: background var(--duration-fast) var(--ease-default);
}
.table tbody tr:hover {
background: hsl(var(--muted) / 0.5);
}
.table tbody td {
padding-block: 0.75rem;
padding-inline: 1rem;
border-block-end: 1px solid hsl(var(--border) / 0.5);
vertical-align: middle;
}
.table tbody tr:last-child td {
border-block-end: none;
}
.badge {
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.02em;
padding: 0.25rem 0.625rem;
border-radius: var(--radius-full);
border: none;
}
.badge-primary {
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
}
.badge-success {
background: hsl(var(--success) / 0.1);
color: hsl(var(--success));
}
.badge-warning {
background: hsl(var(--warning) / 0.1);
color: hsl(var(--warning));
}
.badge-error {
background: hsl(var(--er) / 0.1);
color: hsl(var(--er));
}
.badge-info {
background: hsl(var(--info) / 0.1);
color: hsl(var(--info));
}
.badge-ghost {
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
.stats {
box-shadow: var(--shadow-sm);
border: 1px solid hsl(var(--border));
}
.stat {
padding: 1.25rem 1.5rem;
}
.stat-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
font-weight: 500;
}
.stat-value {
font-weight: 700;
letter-spacing: -0.02em;
}
.stat-desc {
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
}
.alert {
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
padding: 1rem 1.25rem;
}
.alert-info {
background: hsl(var(--info) / 0.08);
border-color: hsl(var(--info) / 0.2);
color: hsl(var(--info));
}
.alert-success {
background: hsl(var(--success) / 0.08);
border-color: hsl(var(--success) / 0.2);
color: hsl(var(--success));
}
.alert-warning {
background: hsl(var(--warning) / 0.08);
border-color: hsl(var(--warning) / 0.2);
color: hsl(var(--warning));
}
.alert-error {
background: hsl(var(--er) / 0.08);
border-color: hsl(var(--er) / 0.2);
color: hsl(var(--er));
}
.modal-box {
box-shadow: var(--shadow-xl);
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
background: hsl(var(--card));
}
.modal-backdrop {
background: hsl(var(--foreground) / 0.5);
backdrop-filter: blur(4px);
}
.dz-page-header {
margin-block-end: 1.5rem;
}
.dz-page-header h1,
.dz-page-header .text-2xl {
font-weight: 700;
letter-spacing: -0.02em;
color: hsl(var(--foreground));
}
.dz-page-header .text-sm {
color: hsl(var(--muted-foreground));
}
.dz-empty-state {
text-align: center;
padding: 3rem 1.5rem;
color: hsl(var(--muted-foreground));
}
.dz-empty-state svg {
width: 3rem;
height: 3rem;
margin: 0 auto 1rem;
opacity: 0.4;
}
.dz-action-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-block-end: 1rem;
gap: 1rem;
}
.dz-action-bar .btn {
gap: 0.5rem;
}
.menu.shadow {
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
background: hsl(var(--popover));
color: hsl(var(--popover-foreground));
}
.loading {
color: hsl(var(--primary));
}
.skeleton,
.dz-skeleton {
background: linear-gradient(
90deg,
hsl(var(--muted)) 25%,
hsl(var(--muted) / 0.6) 50%,
hsl(var(--muted)) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius);
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.dz-spinner {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid hsl(var(--muted));
border-top-color: hsl(var(--primary));
border-radius: 50%;
animation: dz-spin 0.6s linear infinite;
}
.dz-spinner--sm {
width: 0.75rem;
height: 0.75rem;
border-width: 1.5px;
}
@keyframes dz-spin {
to { transform: rotate(360deg); }
}
.htmx-request .htmx-hide-on-request {
display: none;
}
.toast .alert {
animation: dz-toast-in var(--duration-slow) var(--ease-out);
}
@keyframes dz-toast-in {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (max-width: 768px) {
.card-body {
padding: 1rem;
}
.table thead th,
.table tbody td {
padding-block: 0.5rem;
padding-inline: 0.75rem;
font-size: 0.875rem;
}
.stat {
padding: 1rem;
}
}
.overflow-x-auto[role="region"] {
container-type: inline-size;
container-name: table-container;
}
@container table-container (max-width: 480px) {
.table thead {
display: none;
}
.table tbody tr {
display: block;
margin-block-end: 0.75rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius-md);
padding: 0.5rem;
}
.table tbody td {
display: flex;
justify-content: space-between;
padding-block: 0.25rem;
padding-inline: 0.5rem;
border-block-end: none;
}
.table tbody td::before {
content: attr(data-label);
font-weight: 500;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
}
}
.dz-section-hero {
background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%);
color: white;
padding: var(--dz-spacing-hero-y, 6rem) 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.dz-section-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, oklch(1 0 0 / 0.1) 0%, transparent 50%);
pointer-events: none;
}
.dz-hero-with-media {
display: flex;
align-items: center;
gap: 3rem;
}
.dz-hero-with-media .dz-section-content {
flex: 1;
text-align: left;
}
.dz-hero-with-media .dz-cta-group {
justify-content: flex-start;
}
.dz-hero-media {
flex: 1;
max-width: 50%;
}
.dz-hero-image {
width: 100%;
height: auto;
border-radius: var(--dz-radius-lg, 1rem);
box-shadow: var(--dz-shadow-xl, 0 20px 50px -12px oklch(0 0 0 / 0.3));
}
@media (max-width: 768px) {
.dz-hero-with-media {
flex-direction: column;
text-align: center;
}
.dz-hero-with-media .dz-section-content {
text-align: center;
}
.dz-hero-with-media .dz-cta-group {
justify-content: center;
}
.dz-hero-media {
max-width: 100%;
order: -1;
}
}
.dz-section-features {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--p, oklch(0.99 0 0));
}
.dz-section-pricing {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-section-faq {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-section-testimonials {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-section-stats {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%);
color: white;
}
.dz-section-cta {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
text-align: center;
}
.dz-section-cta h2 {
font-size: var(--dz-font-size-cta-headline, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.dz-section-steps {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-section-logo-cloud {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
text-align: center;
}
.dz-section-comparison {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-comparison-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.dz-comparison-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.dz-comparison-table th,
.dz-comparison-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--dz-border-subtle);
}
.dz-comparison-table thead th {
font-weight: 600;
font-size: 1rem;
padding-bottom: 1rem;
}
.dz-comparison-feature {
text-align: left;
font-weight: 500;
}
.dz-comparison-highlighted {
background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260));
}
.dz-section-value-highlight {
padding: var(--dz-spacing-hero-y, 6rem) 1.5rem;
text-align: center;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-value-headline {
font-size: var(--dz-font-size-hero-headline, 3.5rem);
font-weight: var(--dz-font-weight-hero-headline, 800);
line-height: var(--dz-line-height-hero-headline, 1.1);
letter-spacing: var(--dz-letter-spacing-hero-headline, -0.02em);
}
.dz-value-body {
max-width: 40rem;
margin: 0 auto 2rem;
font-size: 1.125rem;
line-height: 1.6;
color: var(--dz-text-body);
}
.dz-section-split-content {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.dz-split--reversed .dz-split-grid {
direction: rtl;
}
.dz-split--reversed .dz-split-grid > * {
direction: ltr;
}
.dz-split-text h2 {
text-align: left;
}
.dz-split-text p {
color: var(--dz-text-body);
}
.dz-cta-group--left {
justify-content: flex-start;
}
.dz-split-media img {
width: 100%;
height: auto;
border-radius: var(--dz-radius-lg, 1rem);
box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1));
}
@media (max-width: 768px) {
.dz-split-grid {
grid-template-columns: 1fr;
}
.dz-split--reversed .dz-split-grid {
direction: ltr;
}
.dz-split-text h2 {
text-align: center;
}
.dz-cta-group--left {
justify-content: center;
}
}
.dz-section-card-grid {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.dz-card-item {
background: var(--dz-surface-card);
padding: var(--dz-spacing-card-padding, 1.5rem);
border-radius: var(--dz-radius-card, 0.75rem);
box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1));
display: flex;
flex-direction: column;
transition: transform var(--dz-transition-fast, 150ms),
box-shadow var(--dz-transition-fast, 150ms);
}
.dz-card-item:hover {
transform: translateY(-4px);
box-shadow: var(--dz-shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1));
}
.dz-card-item h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 0;
}
.dz-card-item p {
color: var(--dz-text-body);
margin: 0 0 1rem;
line-height: var(--dz-line-height-body, 1.6);
flex: 1;
}
.dz-card-icon {
width: 3rem;
height: 3rem;
background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260));
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
color: var(--dz-hero-bg-from);
}
.dz-card-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.dz-section-trust-bar {
padding: 2rem 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
border-top: 1px solid var(--dz-border-subtle);
border-bottom: 1px solid var(--dz-border-subtle);
}
.dz-trust-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
align-items: center;
}
.dz-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--dz-text-body);
}
.dz-trust-item svg {
width: 1.25rem;
height: 1.25rem;
color: var(--dz-hero-bg-from);
}
.dz-theme-toggle {
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
border-radius: 0.375rem;
color: var(--dz-text-body);
transition: color var(--dz-transition-fast, 150ms), background var(--dz-transition-fast, 150ms);
display: flex;
align-items: center;
justify-content: center;
}
.dz-theme-toggle:hover {
color: var(--dz-text-foreground);
background: var(--dz-border-subtle);
}
.dz-theme-toggle__icon {
width: 1.25rem;
height: 1.25rem;
}
.dz-theme-toggle__sun { display: none; }
.dz-theme-toggle__moon { display: block; }
[data-theme="dark"] .dz-theme-toggle__sun { display: block; }
[data-theme="dark"] .dz-theme-toggle__moon { display: none; }
[data-theme="dark"] .dz-section-features,
[data-theme="dark"] .dz-section-faq,
[data-theme="dark"] .dz-section-steps {
background: oklch(0.12 0.01 260);
}
[data-theme="dark"] .dz-section-pricing,
[data-theme="dark"] .dz-section-testimonials,
[data-theme="dark"] .dz-section-logo-cloud,
[data-theme="dark"] .dz-section-cta,
[data-theme="dark"] .dz-section-value-highlight,
[data-theme="dark"] .dz-section-card-grid,
[data-theme="dark"] .dz-section-trust-bar {
background: oklch(0.08 0.01 260);
}
[data-theme="dark"] .dz-section-comparison,
[data-theme="dark"] .dz-section-split-content {
background: oklch(0.12 0.01 260);
}
[data-theme="dark"] .dz-feature-item,
[data-theme="dark"] .dz-testimonial-item,
[data-theme="dark"] .dz-card-item,
[data-theme="dark"] .dz-pricing-tier:not(.dz-pricing-highlighted) {
background: oklch(0.18 0.01 260);
}
[data-theme="dark"] .dz-comparison-table th,
[data-theme="dark"] .dz-comparison-table td {
border-color: oklch(1 0 0 / 0.1);
}
[data-theme="dark"] .dz-comparison-highlighted {
background: oklch(0.18 0.03 260);
}
[data-theme="dark"] .dz-section h2,
[data-theme="dark"] .dz-feature-item h3,
[data-theme="dark"] .dz-step-item h3,
[data-theme="dark"] .dz-faq-item summary,
[data-theme="dark"] .dz-pricing-tier h3 {
color: oklch(0.95 0 0);
}
[data-theme="dark"] .dz-feature-item p,
[data-theme="dark"] .dz-step-item p,
[data-theme="dark"] .dz-testimonial-item blockquote,
[data-theme="dark"] .dz-faq-item p {
color: oklch(0.65 0 0);
}
[data-theme="dark"] .dz-faq-item {
border-color: oklch(1 0 0 / 0.1);
}
[data-theme="dark"] .dz-auth-card {
background: oklch(0.18 0.01 260);
}
[data-theme="dark"] .dz-auth-card h1,
[data-theme="dark"] .dz-auth-card .card-title,
[data-theme="dark"] .dz-auth-field label,
[data-theme="dark"] .dz-auth-card .label-text {
color: oklch(0.9 0 0);
}
[data-theme="dark"] .dz-auth-field input,
[data-theme="dark"] .dz-auth-card .input {
background: oklch(0.12 0.01 260);
border-color: oklch(1 0 0 / 0.15);
color: oklch(0.95 0 0);
}
[data-theme="dark"] .dz-auth-switch {
color: oklch(0.6 0 0);
}
[data-theme="dark"] .dz-prose {
color: oklch(0.85 0 0);
}
[data-theme="dark"] .dz-prose h1,
[data-theme="dark"] .dz-prose h2,
[data-theme="dark"] .dz-prose h3 {
color: oklch(0.95 0 0);
}
[data-theme="dark"] .dz-logo-item img {
filter: grayscale(100%) invert(1);
opacity: 0.5;
}
[data-theme="dark"] .dz-logo-item:hover img {
filter: grayscale(0%) invert(1);
opacity: 0.8;
}
[data-theme="dark"] .dz-btn-secondary,
[data-theme="dark"] .btn-outline {
color: oklch(0.85 0 0);
border-color: oklch(0.85 0 0);
}
[data-theme="dark"] .dz-btn-secondary:hover,
[data-theme="dark"] .btn-outline:hover {
background: oklch(1 0 0 / 0.1);
}
@media (max-width: 768px) {
.dz-section h1 {
font-size: 2.5rem;
}
.dz-section h2 {
font-size: 1.75rem;
}
.dz-section-cta h2 {
font-size: 2.25rem;
}
.dz-cta-group {
flex-direction: column;
align-items: center;
}
.dz-pricing-highlighted {
transform: none;
}
.dz-stat-value {
font-size: 2.25rem;
}
}
.dz-site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.dz-site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--dz-header-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--dz-border-subtle);
}
.dz-site-nav {
max-width: 72rem;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.dz-site-logo {
font-size: 1.25rem;
font-weight: 700;
color: var(--dz-logo-color);
text-decoration: none;
}
.dz-nav-items {
display: flex;
align-items: center;
gap: 1.5rem;
}
.dz-nav-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--dz-text-body);
text-decoration: none;
transition: color var(--dz-transition-fast, 150ms);
}
.dz-nav-link:hover {
color: var(--dz-text-foreground);
}
.dz-nav-cta {
font-size: 0.875rem;
font-weight: 600;
color: white;
background: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
padding: 0.5rem 1rem;
border-radius: var(--dz-radius-button, 0.375rem);
text-decoration: none;
transition: background var(--dz-transition-fast, 150ms);
}
.dz-nav-cta:hover {
background: var(--dz-hero-bg-to, oklch(0.45 0.18 270));
}
.dz-site-footer {
margin-top: auto;
background: var(--dz-footer-bg);
color: var(--dz-footer-text);
padding: 3rem 1.5rem 1.5rem;
}
.dz-footer-content {
max-width: 72rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.dz-footer-col h4 {
font-size: 0.875rem;
font-weight: 600;
color: white;
margin: 0 0 1rem;
}
.dz-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.dz-footer-col li {
margin-bottom: 0.5rem;
}
.dz-footer-col a {
font-size: 0.875rem;
color: var(--dz-footer-link);
text-decoration: none;
transition: color var(--dz-transition-fast, 150ms);
}
.dz-footer-col a:hover {
color: white;
}
.dz-footer-bottom {
max-width: 72rem;
margin: 0 auto;
padding-top: 1.5rem;
border-top: 1px solid var(--dz-footer-border);
text-align: center;
}
.dz-footer-bottom p {
font-size: 0.75rem;
margin: 0;
}
.dz-auth-page {
background: linear-gradient(135deg, var(--dz-hero-bg-from, oklch(0.50 0.18 270)) 0%, var(--dz-hero-bg-to, oklch(0.45 0.18 270)) 100%);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem 1rem;
}
.dz-auth-container {
width: 100%;
max-width: 24rem;
}
.dz-auth-card {
background: var(--dz-surface-card);
border-radius: var(--dz-radius-lg, 0.75rem);
padding: 2rem;
box-shadow: var(--dz-shadow-xl, 0 20px 50px -12px oklch(0 0 0 / 0.25));
text-align: center;
}
.dz-auth-logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
text-decoration: none;
display: inline-block;
margin-bottom: 1.5rem;
}
.dz-auth-card h1 {
font-size: 1.5rem;
font-weight: 600;
color: var(--dz-text-foreground);
margin: 0 0 1.5rem;
}
.dz-auth-error {
background: var(--dz-error-bg);
color: var(--dz-error-text);
padding: 0.75rem 1rem;
border-radius: var(--dz-radius-sm, 0.375rem);
font-size: 0.875rem;
margin-bottom: 1rem;
text-align: left;
}
.dz-auth-error.hidden {
display: none;
}
#dz-auth-form {
text-align: left;
}
.dz-auth-field {
margin-bottom: 1rem;
}
.dz-auth-field label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--dz-text-emphasis);
margin-bottom: 0.375rem;
}
.dz-auth-field input {
width: 100%;
padding: 0.625rem 0.75rem;
font-size: 1rem;
border: 1px solid var(--dz-border-input);
border-radius: var(--dz-radius-sm, 0.375rem);
transition: border-color var(--dz-transition-fast, 150ms), box-shadow var(--dz-transition-fast, 150ms);
box-sizing: border-box;
}
.dz-auth-field input:focus {
outline: none;
border-color: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
box-shadow: var(--dz-ring-glow);
}
.dz-auth-card .btn-primary,
.dz-auth-card .btn.btn-primary {
background: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
color: white;
border: none;
}
.dz-auth-card .btn-primary:hover,
.dz-auth-card .btn.btn-primary:hover {
background: var(--dz-hero-bg-to, oklch(0.45 0.18 270));
}
.dz-auth-switch {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--dz-text-muted);
}
.dz-auth-switch a {
color: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
text-decoration: none;
font-weight: 500;
}
.dz-auth-switch a:hover {
text-decoration: underline;
}
.dz-section-hero .btn-primary {
background: white;
color: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
border: none;
}
.dz-section-hero .btn-primary:hover {
background: var(--dz-hero-btn-hover);
transform: translateY(-2px);
}
.dz-section-hero .btn-secondary,
.dz-section-hero .btn-outline {
background: transparent;
color: white;
border-color: var(--dz-hero-border);
}
.dz-section-hero .btn-secondary:hover,
.dz-section-hero .btn-outline:hover {
background: var(--dz-hero-overlay);
border-color: var(--dz-hero-border-hover);
}
.dz-section {
width: 100%;
}
.dz-section-content {
max-width: 72rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.dz-section-header {
text-align: center;
max-width: 40rem;
margin: 0 auto 3rem;
}
.dz-section h1 {
font-size: var(--dz-font-size-hero-headline, 3.5rem);
font-weight: var(--dz-font-weight-hero-headline, 800);
line-height: var(--dz-line-height-hero-headline, 1.1);
letter-spacing: var(--dz-letter-spacing-hero-headline, -0.02em);
margin: 0 0 1.5rem;
}
.dz-section h2 {
font-size: var(--dz-font-size-section-headline, 2.25rem);
font-weight: var(--dz-font-weight-section-headline, 700);
line-height: var(--dz-line-height-section-headline, 1.2);
letter-spacing: var(--dz-letter-spacing-section-headline, -0.01em);
margin: 0 0 2rem;
text-align: center;
}
.dz-section h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 0;
}
.dz-section p {
font-size: var(--dz-font-size-body, 1rem);
line-height: var(--dz-line-height-body, 1.6);
}
.dz-404-section {
text-align: center;
padding: var(--dz-spacing-hero-y, 6rem) 1.5rem;
}
.dz-404-headline {
font-size: var(--dz-font-size-hero-headline, 3.5rem);
font-weight: var(--dz-font-weight-hero-headline, 800);
line-height: var(--dz-line-height-hero-headline, 1.1);
margin-bottom: 1rem;
}
.dz-404-cta {
margin-top: 2rem;
}
.dz-pricing-description {
color: var(--dz-text-muted);
margin: 0 0 1.5rem;
font-size: var(--dz-font-size-body, 1rem);
line-height: var(--dz-line-height-body, 1.6);
}
.dz-section-markdown {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-subhead {
font-size: 1.25rem;
line-height: 1.6;
opacity: 0.9;
margin: 0 0 2rem;
}
.dz-cta-group {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.dz-features-grid,
.dz-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.dz-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.dz-feature-item,
.dz-testimonial-item {
background: var(--dz-surface-card);
padding: var(--dz-spacing-card-padding, 1.5rem);
border-radius: var(--dz-radius-card, 0.75rem);
box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1));
transition: transform var(--dz-transition-fast, 150ms), box-shadow var(--dz-transition-fast, 150ms);
}
.dz-feature-item:hover {
transform: translateY(-4px);
box-shadow: var(--dz-shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1));
}
.dz-feature-item h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 0;
}
.dz-feature-item p {
color: var(--dz-text-body);
margin: 0;
line-height: var(--dz-line-height-body, 1.6);
}
.dz-feature-icon {
width: 3rem;
height: 3rem;
background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260));
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
color: var(--dz-hero-bg-from);
}
.dz-feature-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.dz-faq-list {
max-width: 48rem;
margin: 0 auto;
}
.dz-faq-item {
border-bottom: 1px solid var(--dz-border-default);
padding: 1rem 0;
}
.dz-faq-item summary {
font-weight: 600;
cursor: pointer;
list-style: none;
}
.dz-faq-item summary::-webkit-details-marker {
display: none;
}
.dz-faq-item p {
margin: 0.75rem 0 0;
color: var(--dz-text-body);
line-height: var(--dz-line-height-body, 1.6);
}
.dz-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 2rem;
text-align: center;
}
.dz-stat-item {
padding: 1rem;
}
.dz-stat-value {
font-size: 2.5rem;
font-weight: 700;
display: block;
}
.dz-stat-label {
font-size: 0.875rem;
opacity: 0.8;
}
.dz-step-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.dz-step-number {
width: 2.5rem;
height: 2.5rem;
background: var(--dz-hero-bg-from);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
flex-shrink: 0;
}
.dz-step-content h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 0.25rem;
}
.dz-step-content p {
color: var(--dz-text-body);
margin: 0;
line-height: var(--dz-line-height-body, 1.6);
font-size: 0.925rem;
}
@media (min-width: 1024px) {
.dz-step-item {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
}
.dz-step-number {
width: 3rem;
height: 3rem;
font-size: 1.25rem;
}
.dz-step-content h3 {
font-size: 1.25rem;
margin: 0 0 0.5rem;
}
.dz-step-content p {
font-size: 0.95rem;
}
}
.dz-logos-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
align-items: center;
}
.dz-logo-item img {
height: 2rem;
opacity: 0.6;
filter: grayscale(100%);
transition: all var(--duration-fast, 150ms);
}
.dz-logo-item:hover img {
opacity: 1;
filter: grayscale(0%);
}
.dz-pricing-tier {
background: var(--dz-surface-card);
padding: 2rem;
border-radius: var(--dz-radius-card, 0.75rem);
box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1));
display: flex;
flex-direction: column;
transition: transform var(--dz-transition-fast, 150ms);
}
.dz-pricing-tier:hover:not(.dz-pricing-highlighted) {
transform: translateY(-4px);
}
.dz-pricing-tier h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.5rem;
}
.dz-pricing-price {
margin: 0 0 1.5rem;
}
.dz-price {
font-size: 2.5rem;
font-weight: 700;
}
.dz-period {
font-size: 0.875rem;
color: var(--dz-text-muted);
}
.dz-pricing-features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
flex: 1;
}
.dz-pricing-features li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--dz-border-subtle);
}
.dz-pricing-highlighted {
background: var(--dz-pricing-highlight-bg, var(--dz-hero-bg-from));
color: white;
transform: scale(1.05);
box-shadow: var(--dz-shadow-lg);
}
.dz-pricing-highlighted .dz-period,
.dz-pricing-highlighted li {
color: var(--dz-hero-text-dimmed);
border-color: var(--dz-hero-border-dim);
}
.dz-testimonial-item:hover {
transform: translateY(-4px);
box-shadow: var(--dz-shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1));
}
.dz-testimonial-item blockquote {
font-style: italic;
color: var(--dz-text-emphasis);
margin: 0 0 1rem;
line-height: var(--dz-line-height-body, 1.6);
}
.dz-testimonial-author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.dz-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
}
.dz-testimonial-author strong {
display: block;
font-size: 0.875rem;
}
.dz-testimonial-author span {
display: block;
font-size: 0.75rem;
color: var(--dz-text-muted);
}
.dz-prose {
max-width: 48rem;
margin: 0 auto;
padding: 3rem 1.5rem;
}
.dz-prose h1, .dz-prose h2, .dz-prose h3 {
text-align: left;
}
.dz-task-surface-container {
max-width: 75rem;
margin: 0 auto;
padding: var(--dz-spacing-card-padding, 1.5rem);
}
.dz-loading {
text-align: center;
padding: 4rem;
color: var(--dz-text-muted);
}
.dz-error {
text-align: center;
padding: 2rem;
color: var(--dz-error-text);
}