/* ═══════════════════════════════════════════════════════════════
   ApprovePost — Public Website Stylesheet
   Design tokens aligned with the product dashboard.
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS (dark default) ── */
:root {
    --w-bg:            #0B0B0F;
    --w-bg-alt:        #08080C;
    --w-surface:       #111116;
    --w-surface-2:     #17171E;
    --w-surface-3:     #1E1E28;
    --w-border:        rgba(255,255,255,0.07);
    --w-border-2:      rgba(255,255,255,0.11);
    --w-primary:       #5B6EFF;
    --w-primary-dim:   rgba(91,110,255,0.15);
    --w-primary-hover: #4A5CE8;
    --w-primary-text:  #fff;
    --w-success:       #22D3A0;
    --w-success-dim:   rgba(34,211,160,0.12);
    --w-warning:       #FBBF24;
    --w-danger:        #F25C5C;
    --w-danger-dim:    rgba(242,92,92,0.12);
    --w-text:          #F5F7FF;
    --w-text-2:        #CDD4EA;
    --w-text-3:        #AEB7CC;
    --w-text-4:        #6B7394;

    --w-header-bg:     rgba(11,11,15,0.92);
    --w-header-border: rgba(255,255,255,0.06);
    --w-card-shadow:   0 1px 2px rgba(0,0,0,0.25);
    --w-card-shadow-lg:0 8px 32px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2);
    --w-glow:          0 0 60px rgba(91,110,255,0.12);
    --w-scrollbar:     #2a2a38;

    --w-gradient:
        radial-gradient(ellipse 900px 600px at 20% -10%, rgba(91,110,255,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 700px 500px at 80% 110%, rgba(34,211,160,0.06) 0%, transparent 55%);

    --w-max-w:         1200px;
    --w-header-h:      64px;
    --w-radius:        12px;
    --w-radius-lg:     16px;
    --w-radius-xl:     24px;
    --w-font:          'DM Sans', system-ui, -apple-system, sans-serif;
    --w-font-mono:     'DM Mono', ui-monospace, monospace;
    --w-transition:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── LIGHT THEME ── */
html.theme-light {
    --w-bg:            #F4F5FA;
    --w-bg-alt:        #ECEDF4;
    --w-surface:       #FFFFFF;
    --w-surface-2:     #F6F7FC;
    --w-surface-3:     #ECEDF4;
    --w-border:        rgba(0,0,0,0.06);
    --w-border-2:      rgba(0,0,0,0.10);
    --w-primary:       #3347C8;
    --w-primary-dim:   rgba(51,71,200,0.10);
    --w-primary-hover: #2B3AA8;
    --w-primary-text:  #fff;
    --w-success:       #0F7A58;
    --w-success-dim:   rgba(15,122,88,0.10);
    --w-warning:       #8A5700;
    --w-danger:        #B4232C;
    --w-danger-dim:    rgba(180,35,44,0.10);
    --w-text:          #0F172A;
    --w-text-2:        #1F2937;
    --w-text-3:        #475569;
    --w-text-4:        #94A3B8;

    --w-header-bg:     rgba(244,245,250,0.92);
    --w-header-border: rgba(0,0,0,0.06);
    --w-card-shadow:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
    --w-card-shadow-lg:0 8px 32px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    --w-glow:          0 0 60px rgba(51,71,200,0.08);
    --w-scrollbar:     #C8CAD6;

    --w-gradient:
        radial-gradient(ellipse 900px 600px at 20% -10%, rgba(51,71,200,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 700px 500px at 80% 110%, rgba(15,122,88,0.03) 0%, transparent 55%);
}

/* ── AUTO THEME (system preference) ── */
@media (prefers-color-scheme: light) {
    html.theme-auto {
        --w-bg:            #F4F5FA;
        --w-bg-alt:        #ECEDF4;
        --w-surface:       #FFFFFF;
        --w-surface-2:     #F6F7FC;
        --w-surface-3:     #ECEDF4;
        --w-border:        rgba(0,0,0,0.06);
        --w-border-2:      rgba(0,0,0,0.10);
        --w-primary:       #3347C8;
        --w-primary-dim:   rgba(51,71,200,0.10);
        --w-primary-hover: #2B3AA8;
        --w-primary-text:  #fff;
        --w-success:       #0F7A58;
        --w-success-dim:   rgba(15,122,88,0.10);
        --w-warning:       #8A5700;
        --w-danger:        #B4232C;
        --w-danger-dim:    rgba(180,35,44,0.10);
        --w-text:          #0F172A;
        --w-text-2:        #1F2937;
        --w-text-3:        #475569;
        --w-text-4:        #94A3B8;

        --w-header-bg:     rgba(244,245,250,0.92);
        --w-header-border: rgba(0,0,0,0.06);
        --w-card-shadow:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
        --w-card-shadow-lg:0 8px 32px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
        --w-glow:          0 0 60px rgba(51,71,200,0.08);
        --w-scrollbar:     #C8CAD6;

        --w-gradient:
            radial-gradient(ellipse 900px 600px at 20% -10%, rgba(51,71,200,0.05) 0%, transparent 60%),
            radial-gradient(ellipse 700px 500px at 80% 110%, rgba(15,122,88,0.03) 0%, transparent 55%);
    }
}

/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
[x-cloak] { display: none !important; }

body.w-body {
    font-family: var(--w-font);
    font-size: 18px;
    line-height: 1.65;
    background-color: var(--w-bg);
    background-image: var(--w-gradient);
    background-attachment: fixed;
    color: var(--w-text);
    min-height: 100vh;
    overflow-x: hidden;
    text-wrap: pretty;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--w-primary); text-decoration: none; transition: color var(--w-transition); }
a:hover { color: var(--w-primary-hover); }
a:focus-visible { outline: 2px solid var(--w-primary); outline-offset: 2px; border-radius: 4px; }

/* ═══════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════ */
.w-h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--w-text); }
.w-h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--w-text); }
.w-h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--w-text); }
.w-h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--w-text); }
.w-lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; color: var(--w-text-2); }
.w-small { font-size: 1rem; line-height: 1.6; color: var(--w-text-3); }
.w-mono { font-family: var(--w-font-mono); }
.w-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--w-primary); padding: 4px 0;
}
.w-label::before {
    content: ''; width: 20px; height: 2px;
    background: var(--w-primary); border-radius: 1px;
}

/* ═══════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════ */
.w-container { max-width: var(--w-max-w); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .w-container { padding: 0 16px; } }

.w-section {
    padding: 80px 0;
    position: relative;
}
.w-section--lg { padding: 100px 0; }
@media (max-width: 768px) {
    .w-section { padding: 56px 0; }
    .w-section--lg { padding: 72px 0; }
}

.w-grid {
    display: grid;
    gap: 24px;
}
.w-grid--2 { grid-template-columns: repeat(2, 1fr); }
.w-grid--3 { grid-template-columns: repeat(3, 1fr); }
.w-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
    .w-grid--3, .w-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .w-grid--2, .w-grid--3, .w-grid--4 { grid-template-columns: 1fr; }
}

.w-text-center { text-align: center; }
.w-mx-auto { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════
   HEADER / NAV
   ═══════════════════════════════════════════ */
.w-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--w-header-h);
    background: var(--w-header-bg);
    border-bottom: 1px solid var(--w-header-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background var(--w-transition), border-color var(--w-transition);
}
.w-header__inner {
    max-width: var(--w-max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}
@media (max-width: 640px) { .w-header__inner { padding: 0 16px; } }

/* Logo */
.w-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
    padding: 4px 6px 4px 2px; margin-left: -2px;
    border-radius: 8px;
    transition: opacity 0.15s;
}
.w-logo:hover { opacity: 0.82; color: var(--w-text); }
.w-logo__icon {
    width: 30px; height: 30px;
    background: var(--w-primary);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--w-primary-dim);
}
.w-logo__text {
    font-size: 17px; font-weight: 700;
    color: var(--w-text); letter-spacing: -0.01em;
}

/* Nav */
.w-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.w-nav__link {
    font-size: 14px; font-weight: 500;
    color: var(--w-text-3);
    padding: 8px 14px;
    border-radius: 8px;
    transition: color var(--w-transition), background var(--w-transition);
    white-space: nowrap;
}
.w-nav__link:hover { color: var(--w-text); background: var(--w-surface-2); }
.w-nav__link:focus-visible { outline: 2px solid var(--w-primary); outline-offset: -2px; }
.w-nav__link--active { color: var(--w-text); background: var(--w-surface-2); }

.w-nav__actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }

/* Mobile hamburger */
.w-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: none; background: transparent;
    color: var(--w-text);
    cursor: pointer; border-radius: 8px;
    transition: background var(--w-transition);
    margin-left: auto;
}
.w-hamburger:hover { background: var(--w-surface-2); }

/* Mobile drawer */
.w-mobile-nav {
    position: fixed; inset: 0; z-index: 200;
    display: none; flex-direction: column;
    background: var(--w-bg);
    padding: var(--w-header-h) 24px 24px;
    overflow-y: auto;
}
.w-mobile-nav.is-open { display: flex; }
.w-mobile-nav__close {
    position: absolute; top: 12px; right: 16px;
    width: 40px; height: 40px;
    border: none; background: var(--w-surface-2);
    color: var(--w-text); border-radius: 8px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.w-mobile-nav__link {
    display: block;
    font-size: 16px; font-weight: 500;
    color: var(--w-text-2);
    padding: 14px 0;
    border-bottom: 1px solid var(--w-border);
    transition: color var(--w-transition);
}
.w-mobile-nav__link:hover { color: var(--w-text); }
.w-mobile-nav__actions {
    margin-top: 24px;
    display: flex; flex-direction: column; gap: 12px;
}

@media (max-width: 768px) {
    .w-nav { display: none; }
    .w-hamburger { display: flex; }
}

/* Theme switcher (compact, in header) */
.w-theme-sw {
    display: flex; align-items: center; gap: 1px;
    background: var(--w-surface-2);
    border: 1px solid var(--w-border-2);
    border-radius: 10px; padding: 3px;
    flex-shrink: 0;
}
.w-theme-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 8px; border: none; border-radius: 7px;
    background: transparent; color: var(--w-text-3);
    font-family: inherit; font-size: 0; cursor: pointer;
    user-select: none; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.w-theme-btn:hover { color: var(--w-text-2); }
.w-theme-btn.is-active {
    background: var(--w-surface);
    color: var(--w-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px var(--w-border-2);
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.w-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--w-font);
    font-size: 15px; font-weight: 500;
    padding: 11px 24px;
    border: none; border-radius: 10px;
    cursor: pointer; user-select: none;
    white-space: nowrap;
    transition: background var(--w-transition), box-shadow var(--w-transition), transform 0.1s;
    text-decoration: none;
    line-height: 1.4;
}
.w-btn:active { transform: scale(0.98); }
.w-btn:focus-visible { outline: 2px solid var(--w-primary); outline-offset: 2px; }

.w-btn--primary {
    background: var(--w-primary);
    color: var(--w-primary-text);
}
.w-btn--primary:hover {
    background: var(--w-primary-hover);
    box-shadow: 0 0 0 3px var(--w-primary-dim);
    color: var(--w-primary-text);
}

/* Dark mode AA contrast for primary buttons. */
html.theme-dark .w-btn--primary,
html.theme-auto .w-btn--primary {
    background: #4A5CE8;
    color: #fff;
}
html.theme-dark .w-btn--primary:hover,
html.theme-auto .w-btn--primary:hover {
    background: #3F52DB;
    color: #fff;
}
@media (prefers-color-scheme: light) {
    html.theme-auto .w-btn--primary {
        background: var(--w-primary);
        color: var(--w-primary-text);
    }
    html.theme-auto .w-btn--primary:hover {
        background: var(--w-primary-hover);
        color: var(--w-primary-text);
    }
}

.w-btn--outline {
    background: transparent;
    color: var(--w-text-2);
    border: 1px solid var(--w-border-2);
}
.w-btn--outline:hover {
    background: var(--w-surface-2);
    color: var(--w-text);
    border-color: var(--w-border-2);
}

.w-btn--ghost {
    background: transparent;
    color: var(--w-text-2);
    padding: 11px 16px;
}
.w-btn--ghost:hover {
    background: var(--w-surface-2);
    color: var(--w-text);
}

.w-btn--sm { font-size: 13.5px; padding: 8px 16px; border-radius: 8px; }
.w-btn--lg { font-size: 16px; padding: 14px 32px; border-radius: 12px; }
.w-btn--block { width: 100%; }

/* Dark mode AA contrast for small primary buttons (e.g. header CTA). */
html.theme-dark .w-btn--primary.w-btn--sm,
html.theme-auto .w-btn--primary.w-btn--sm {
    background: #4A5CE8;
    color: #fff;
}
html.theme-dark .w-btn--primary.w-btn--sm:hover,
html.theme-auto .w-btn--primary.w-btn--sm:hover {
    background: #3F52DB;
    color: #fff;
}
html.theme-light .w-btn--primary.w-btn--sm {
    background: var(--w-primary);
    color: var(--w-primary-text);
}
html.theme-light .w-btn--primary.w-btn--sm:hover {
    background: var(--w-primary-hover);
    color: var(--w-primary-text);
}
@media (prefers-color-scheme: light) {
    html.theme-auto .w-btn--primary.w-btn--sm {
        background: var(--w-primary);
        color: var(--w-primary-text);
    }
    html.theme-auto .w-btn--primary.w-btn--sm:hover {
        background: var(--w-primary-hover);
        color: var(--w-primary-text);
    }
}

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.w-card {
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    padding: 28px;
    box-shadow: var(--w-card-shadow);
    transition: border-color var(--w-transition), box-shadow var(--w-transition), transform var(--w-transition);
}
.w-card:hover {
    border-color: var(--w-border-2);
}
.w-card--lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--w-card-shadow-lg);
}
.w-card--highlight {
    border-color: var(--w-primary);
    box-shadow: var(--w-card-shadow), 0 0 0 1px var(--w-primary);
    position: relative;
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.w-hero {
    padding: 80px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.w-hero::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, var(--w-primary-dim) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.w-hero__inner {
    position: relative; z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
.w-hero__content {
    max-width: 780px;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .w-hero { padding: 48px 0 40px; }
    .w-hero__inner { padding: 0 16px; }
}
.w-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    color: var(--w-primary);
    background: var(--w-primary-dim);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
    letter-spacing: 0.01em;
}
.w-hero__title { margin-bottom: 20px; }
.w-hero__desc {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--w-text-2);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 32px;
}
.w-hero__actions {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
}
.w-hero__visual {
    margin-top: 56px;
    position: relative;
}
.w-hero__dual-screen {
    position: relative;
    transition: transform var(--w-transition);
}
.w-hero__dual-screen:hover {
    transform: translateY(-4px);
}

.w-hero__screenshot {
    width: 100%;
    height: auto;
    display: block;
}

.w-hero__labels {
    display: flex;
    justify-content: space-around;
    margin-top: 24px;
    padding: 0 4%;
}

.w-hero__label {
    font-size: 0.75rem;
    color: var(--w-primary);
    background: var(--w-primary-dim);
    padding: 4px 12px;
    border-radius: 100px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 640px) {
    .w-hero__labels { display: none; }
}

/* ═══════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════ */
.w-section-header {
    max-width: 640px;
    margin-bottom: 48px;
}
.w-section-header--center {
    margin-left: auto; margin-right: auto;
    text-align: center;
}
.w-section-header .w-label { margin-bottom: 12px; }
.w-section-header .w-h2 { margin-bottom: 12px; }
.w-section-header .w-lead { margin-top: 8px; }

/* ═══════════════════════════════════════════
   FEATURE CARDS (why choose us)
   ═══════════════════════════════════════════ */
.w-feature {
    padding: 24px;
}
.w-feature__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    background: var(--w-primary-dim);
    color: var(--w-primary);
    flex-shrink: 0;
}
.w-feature__title {
    font-size: 1.0625rem; font-weight: 600;
    color: var(--w-text);
    margin-bottom: 8px;
}
.w-feature__text {
    font-size: 0.9375rem;
    color: var(--w-text-3);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   HOW IT WORKS (steps)
   ═══════════════════════════════════════════ */
.w-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    counter-reset: step;
    position: relative;
}
@media (max-width: 768px) { .w-steps { grid-template-columns: 1fr; gap: 24px; } }

.w-step {
    position: relative;
    counter-increment: step;
    padding: 24px;
}
.w-step__number {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--w-primary);
    margin-bottom: 12px;
    font-family: var(--w-font-mono);
}
.w-step__number::before { content: counter(step, decimal-leading-zero); }
.w-step__title {
    font-size: 1.125rem; font-weight: 600;
    color: var(--w-text);
    margin-bottom: 8px;
}
.w-step__text {
    font-size: 0.9375rem;
    color: var(--w-text-3);
    line-height: 1.6;
}
.w-step__visual {
    margin-top: 16px;
    border-radius: var(--w-radius);
    border: 1px solid var(--w-border);
    background: var(--w-surface-2);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.w-step__visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
}

/* ═══════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════ */
.w-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) { .w-pricing { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

.w-pricing-card {
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl);
    padding: 32px;
    box-shadow: var(--w-card-shadow);
    transition: border-color var(--w-transition), box-shadow var(--w-transition);
    position: relative;
}
.w-pricing-card--popular {
    border-color: var(--w-primary);
    box-shadow: var(--w-card-shadow-lg), 0 0 0 1px var(--w-primary);
}
.w-pricing .w-pricing-card.w-pricing-card--agency,
.w-pricing > .w-pricing-card:last-child:not(.w-pricing-card--popular) {
    border: 1px solid var(--w-border);
}
.w-pricing-card__badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--w-primary);
    color: #fff;
    font-size: 12px; font-weight: 600;
    padding: 4px 16px;
    border-radius: 100px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.w-pricing-card__name {
    font-size: 1.125rem; font-weight: 600;
    color: var(--w-text);
    margin-bottom: 4px;
}
.w-pricing-card__audience {
    font-size: 1rem;
    color: var(--w-text-3);
    margin-bottom: 20px;
}
.w-pricing-card__price {
    display: flex; align-items: flex-start; gap: 4px;
    margin-bottom: 4px;
}
.w-pricing-card__amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--w-text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.w-pricing-card__period {
    font-size: 0.8125rem;
    color: var(--w-text-3);
    margin-top: 6px;
    font-weight: 600;
}
.w-pricing-card__yearly {
    font-size: 0.9375rem;
    color: #7C86AA;
    margin-bottom: 24px;
}
.w-pricing-card__divider {
    height: 1px;
    background: var(--w-border);
    margin: 24px 0;
}
.w-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex; flex-direction: column; gap: 10px;
}
.w-pricing-card__feature {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 1rem;
    color: var(--w-text-2);
    line-height: 1.5;
}
.w-pricing-card__feature svg {
    flex-shrink: 0;
    margin-top: 3px;
}
.w-pricing-card__feature--disabled {
    color: #7C86AA;
    text-decoration: line-through;
    opacity: 1;
}

/* Improve pricing-card text contrast for light themes (Lighthouse AA). */
html.theme-light .w-pricing-card__yearly {
    color: #526076;
}
html.theme-light .w-pricing-card__feature--disabled {
    color: #5f6f86;
    opacity: 0.92;
}

@media (prefers-color-scheme: light) {
    html.theme-auto .w-pricing-card__yearly {
        color: #526076;
    }
    html.theme-auto .w-pricing-card__feature--disabled {
        color: #5f6f86;
        opacity: 0.92;
    }
}

/* Dark mode AA contrast for pricing badge and primary CTA. */
html.theme-dark .w-pricing-card__badge,
html.theme-auto .w-pricing-card__badge {
    background: #4A5CE8;
    color: #fff;
}
html.theme-dark .w-pricing .w-btn--primary.w-btn--block,
html.theme-auto .w-pricing .w-btn--primary.w-btn--block {
    background: #4A5CE8;
    color: #fff;
}
html.theme-dark .w-pricing .w-btn--primary.w-btn--block:hover,
html.theme-auto .w-pricing .w-btn--primary.w-btn--block:hover {
    background: #3F52DB;
    color: #fff;
}

@media (prefers-color-scheme: light) {
    html.theme-auto .w-pricing-card__badge {
        background: var(--w-primary);
        color: #fff;
    }
    html.theme-auto .w-pricing .w-btn--primary.w-btn--block {
        background: var(--w-primary);
        color: #fff;
    }
    html.theme-auto .w-pricing .w-btn--primary.w-btn--block:hover {
        background: var(--w-primary-hover);
        color: #fff;
    }
}

.w-inline-002 thead th {
    vertical-align: top;
    padding: 24px 12px;
}
.w-table-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.w-table-head__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--w-text-2);
    letter-spacing: 0.02em;
}
.w-table-head__price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--w-text);
    margin-bottom: 4px;
}
.w-table-head__period {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--w-text-3);
}
.w-table-feature-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--w-text);
    line-height: 1.4;
}
.w-table-feature-desc {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--w-text-3);
    margin-top: 4px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .w-inline-001 {
        overflow-x: visible;
    }
    .w-inline-002 {
        min-width: 0 !important;
    }
    .w-inline-002 thead {
        display: none;
    }
    .w-inline-002, .w-inline-002 tbody, .w-inline-002 tr, .w-inline-002 td {
        display: block;
        width: 100%;
    }
    .w-inline-002 tr {
        margin-bottom: 32px;
        background: var(--w-surface);
        border: 1px solid var(--w-border);
        border-radius: var(--w-radius-lg);
        overflow: hidden;
    }
    .w-inline-002 td.w-inline-006 {
        background: var(--w-surface-2);
        padding: 12px 16px;
        font-weight: 700;
        font-size: 1rem;
        color: var(--w-text);
        border-bottom: 1px solid var(--w-border);
        text-align: left;
    }
    .w-inline-002 td.w-inline-006 .w-table-feature-name {
        font-size: 1rem;
        font-weight: 700;
    }
    .w-table-feature-desc {
        font-weight: 400;
        font-size: 0.8125rem;
    }
    .w-inline-002 td.w-inline-007 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        border-bottom: 1px solid var(--w-border-2);
        font-size: 1.0625rem;
    }
    .w-inline-002 td.w-inline-007:last-child {
        border-bottom: none;
    }
    .w-inline-002 td.w-inline-007::before {
        content: attr(data-plan);
        font-weight: 600;
        color: var(--w-text-3);
    }
}

/* ═══════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════ */
.w-faq { max-width: 720px; margin: 0 auto; }
.w-faq-item {
    border-bottom: 1px solid var(--w-border);
}
.w-faq-item:first-child { border-top: 1px solid var(--w-border); }
.w-faq-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; padding: 20px 0;
    border: none; background: transparent;
    text-align: left;
    font-family: var(--w-font);
    font-size: 1rem; font-weight: 600;
    color: var(--w-text);
    cursor: pointer;
    transition: color var(--w-transition);
}
.w-faq-trigger:hover { color: var(--w-primary); }
.w-faq-trigger:focus-visible { outline: 2px solid var(--w-primary); outline-offset: -2px; border-radius: 4px; }
.w-faq-trigger__icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    color: var(--w-text-3);
    transition: transform var(--w-transition);
}
.w-faq-item.is-open .w-faq-trigger__icon { transform: rotate(45deg); }
.w-faq-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}
.w-faq-item.is-open .w-faq-body { max-height: 400px; }
.w-faq-answer {
    padding: 0 0 20px;
    font-size: 0.9375rem;
    color: var(--w-text-3);
    line-height: 1.7;
}

/* ═══════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════ */
.w-cta {
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl);
    padding: 56px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.w-cta::before {
    content: '';
    position: absolute;
    top: -100px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(circle, var(--w-primary-dim) 0%, transparent 60%);
    pointer-events: none;
}
.w-cta__inner { position: relative; z-index: 1; }
.w-cta__title { margin-bottom: 12px; }
.w-cta__text { color: var(--w-text-2); margin-bottom: 28px; max-width: 500px; margin-left: auto; margin-right: auto; }
.w-cta__actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   USE CASES
   ═══════════════════════════════════════════ */
.w-usecase {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
}
.w-usecase__icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.w-usecase__title { font-size: 1rem; font-weight: 600; color: var(--w-text); margin-bottom: 4px; }
.w-usecase__text { font-size: 0.9375rem; color: var(--w-text-3); line-height: 1.6; }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.w-footer {
    border-top: 1px solid var(--w-border);
    padding: 48px 0 32px;
    background: var(--w-bg-alt);
}
.w-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
@media (max-width: 768px) {
    .w-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
    .w-footer__grid { grid-template-columns: 1fr; }
}
.w-footer__brand-desc {
    font-size: 0.875rem;
    color: var(--w-text-3);
    line-height: 1.6;
    margin-top: 12px;
    max-width: 280px;
}
.w-footer__heading {
    font-size: 0.8125rem; font-weight: 600;
    color: var(--w-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}
.w-footer__links {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.w-footer__link {
    font-size: 0.875rem;
    color: var(--w-text-3);
    transition: color var(--w-transition);
}
.w-footer__link:hover { color: var(--w-text); }
.w-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--w-border);
    font-size: 0.8125rem;
    color: #8D98BE;
}
.w-footer__social {
    display: flex; gap: 12px;
}
.w-footer__social a {
    color: #8D98BE;
    transition: color var(--w-transition);
}
.w-footer__social a:hover { color: var(--w-text); }

/* Improve footer contrast for light themes (Lighthouse AA). */
html.theme-light .w-footer {
    color: var(--w-text-2);
}
html.theme-light .w-footer__bottom,
html.theme-light .w-footer__social a {
    color: #526076;
}

@media (prefers-color-scheme: light) {
    html.theme-auto .w-footer {
        color: var(--w-text-2);
    }
    html.theme-auto .w-footer__bottom,
    html.theme-auto .w-footer__social a {
        color: #526076;
    }
}

/* ═══════════════════════════════════════════
   FORMS (contact page)
   ═══════════════════════════════════════════ */
.w-form-group { margin-bottom: 20px; }
.w-form-label {
    display: block;
    font-size: 14px; font-weight: 600;
    color: var(--w-text-2);
    margin-bottom: 6px;
}
.w-form-input,
.w-form-textarea,
.w-form-select {
    width: 100%;
    background: var(--w-surface-2);
    border: 1px solid var(--w-border-2);
    border-radius: 10px;
    color: var(--w-text);
    font-family: var(--w-font);
    font-size: 15px;
    padding: 11px 14px;
    outline: none;
    transition: border-color var(--w-transition), box-shadow var(--w-transition);
}
.w-form-textarea { resize: vertical; min-height: 120px; }
.w-form-input:focus,
.w-form-textarea:focus,
.w-form-select:focus {
    border-color: var(--w-primary);
    box-shadow: 0 0 0 3px var(--w-primary-dim);
}
.w-form-input::placeholder,
.w-form-textarea::placeholder { color: var(--w-text-4); }
.w-form-error {
    font-size: 13px;
    color: var(--w-danger);
    margin-top: 4px;
}
.w-form-hint {
    font-size: 13px;
    color: var(--w-text-4);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════ */
.w-alert {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.w-alert--success {
    background: var(--w-success-dim);
    border: 1px solid rgba(34,211,160,0.25);
    color: var(--w-success);
}
.w-alert--error {
    background: var(--w-danger-dim);
    border: 1px solid rgba(242,92,92,0.25);
    color: var(--w-danger);
}

/* ═══════════════════════════════════════════
   LEGAL / PROSE
   ═══════════════════════════════════════════ */
.w-prose {
    max-width: 760px;
    margin: 0 auto;
}
.w-prose h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; color: var(--w-text); }
.w-prose h2 { font-size: 1.375rem; font-weight: 600; margin: 40px 0 12px; color: var(--w-text); }
.w-prose h3 { font-size: 1.125rem; font-weight: 600; margin: 28px 0 8px; color: var(--w-text); }
.w-prose p { margin-bottom: 16px; color: var(--w-text-2); line-height: 1.7; }
.w-prose ul, .w-prose ol { margin: 0 0 16px 24px; color: var(--w-text-2); }
.w-prose li { margin-bottom: 6px; line-height: 1.6; }
.w-prose a { color: var(--w-primary); text-decoration: underline; text-underline-offset: 2px; }
.w-prose a:hover { color: var(--w-primary-hover); }
.w-prose strong { color: var(--w-text); font-weight: 600; }
.w-prose .w-prose__updated {
    font-size: 0.875rem;
    color: var(--w-text-4);
    margin-bottom: 32px;
}

/* ═══════════════════════════════════════════
   COOKIE CONSENT
   ═══════════════════════════════════════════ */
.w-cookie-banner {
    position: fixed;
    bottom: 24px; left: 24px; right: 24px;
    max-width: 480px;
    z-index: 300;
    background: var(--w-surface);
    border: 1px solid var(--w-border-2);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-card-shadow-lg);
    padding: 20px 24px;
    display: none;
}
.w-cookie-banner.is-visible { display: block; }
.w-cookie-banner__text {
    font-size: 0.875rem;
    color: var(--w-text-2);
    line-height: 1.6;
    margin-bottom: 16px;
}
.w-cookie-banner__text a { text-decoration: underline; }
.w-cookie-banner__actions {
    display: flex; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 640px) {
    .w-cookie-banner { bottom: 16px; left: 16px; right: 16px; }
}

/* ═══════════════════════════════════════════
   TRUST BADGES / STATS
   ═══════════════════════════════════════════ */
.w-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}
.w-stat {
    text-align: center;
}
.w-stat__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--w-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.w-stat__label {
    font-size: 0.875rem;
    color: var(--w-text-3);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--w-scrollbar); border-radius: 99px; }

/* ═══════════════════════════════════════════
   ANIMATIONS (subtle, respects prefers-reduced-motion)
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .w-fade-in {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .w-fade-in.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .w-fade-in { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════
   SKIP LINK (a11y)
   ═══════════════════════════════════════════ */
.w-skip-link {
    position: absolute;
    top: -100px; left: 16px;
    background: var(--w-primary);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 999;
    transition: top 0.2s;
}
.w-skip-link:focus { top: 16px; }

/* ═══════════════════════════════════════════
   DIVIDER (section divider)
   ═══════════════════════════════════════════ */
.w-divider {
    height: 1px;
    background: var(--w-border);
    border: none;
    margin: 0;
}

/* ═══════════════════════════════════════════
   PAGE LOADER
   ═══════════════════════════════════════════ */
.w-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--w-bg);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.w-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.w-page-loader__spinner {
    position: relative;
    width: 66px;
    height: 66px;
}

.w-page-loader__ring {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--w-primary);
    border-radius: 999px;
    animation: wPageLoaderSpin 0.86s linear infinite;
}

.w-page-loader__core {
    position: absolute;
    inset: 18px;
    border-radius: 999px;
    background: var(--w-primary);
    box-shadow: 0 0 28px rgba(91,110,255,0.45);
    animation: wPageLoaderPulse 1.05s ease-in-out infinite;
}

@keyframes wPageLoaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes wPageLoaderPulse {
    0%, 100% { transform: scale(0.72); opacity: 0.4; }
    50% { transform: scale(1); opacity: 0.7; }
}

/* Light theme support */
html.theme-light .w-page-loader {
    background: #F0F4FF;
}
html.theme-light .w-page-loader__ring {
    border-color: rgba(0,0,0,0.1);
    border-top-color: var(--w-primary);
}
html.theme-light .w-page-loader__core {
    box-shadow: 0 0 28px rgba(91,110,255,0.25);
}