@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0B0B12; }
::-webkit-scrollbar-thumb { background: #3A3A50; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4A4A60; }

::selection { background: #E63946; color: #FFFFFF; }

.grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
}

.gradient-line {
    height: 1px;
    background: linear-gradient(to right, #E63946, #FF2D55, transparent);
}

.gradient-line-separator {
    height: 1px;
    background: linear-gradient(to right, #E63946, #FF2D55, transparent);
}

.accent-bar {
    width: 3px;
    border-radius: 1.5px;
    background: linear-gradient(to bottom, #E63946, #FF2D55);
    flex-shrink: 0;
    align-self: stretch;
}

nav .nav-link {
    color: #7E7E98;
    font-size: 0.875rem;
    font-weight: 400;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: color 200ms ease, background 200ms ease;
    text-decoration: none;
}
nav .nav-link:hover { color: #EDEDF0; background: rgba(255,255,255,0.04); }

nav .nav-link-accent {
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #E63946, #FF2D55);
    transition: opacity 200ms ease, transform 200ms ease;
    text-decoration: none;
}
nav .nav-link-accent:hover { opacity: 0.9; transform: translateY(-1px); }

nav .nav-link-muted {
    color: #4A4A60;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: color 200ms ease;
    text-decoration: none;
}
nav .nav-link-muted:hover { color: #7E7E98; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 0.625rem 1.75rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, #E63946, #FF2D55);
    border: none;
    cursor: pointer;
    transition: opacity 200ms ease, transform 200ms ease;
    text-decoration: none;
    font-size: 0.875rem;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:active { opacity: 0.95; transform: translateY(0); }
.btn-primary:disabled { background: #4A4A60; color: #0B0B12; cursor: not-allowed; transform: none; opacity: 1; }

.btn-primary-generate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    padding: 0.75rem 1.75rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, #E63946, #FF2D55);
    border: none;
    cursor: pointer;
    transition: opacity 200ms ease, transform 200ms ease;
    white-space: nowrap;
    min-height: 46px;
    min-width: 130px;
}
.btn-primary-generate:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary-generate:disabled { background: #4A4A60; color: #0B0B12; cursor: not-allowed; transform: none; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #EDEDF0;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 0.625rem 1.75rem;
    border-radius: 0.625rem;
    background: transparent;
    border: 1px solid #252535;
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease;
    text-decoration: none;
    font-size: 0.875rem;
}
.btn-ghost:hover { border-color: #3A3A50; color: #FFFFFF; }

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4ADE80;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem;
    padding: 0.5rem 1.125rem;
    border-radius: 0.5rem;
    border: 1px solid #4ADE80;
    background: transparent;
    cursor: pointer;
    transition: background 200ms ease;
    text-decoration: none;
    letter-spacing: 0.025em;
}
.btn-download:hover { background: rgba(74, 222, 128, 0.08); }
.btn-theme-active {
    background: rgba(74, 222, 128, 0.12);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.5), 0 0 12px rgba(74, 222, 128, 0.25);
}

.feature-card {
    background: rgba(20, 20, 31, 0.6);
    border: 1px solid #252535;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    transition: border-color 200ms ease, transform 200ms ease;
    backdrop-filter: blur(8px);
}
.feature-card:hover { border-color: #3A3A50; transform: translateY(-2px); }

.feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: rgba(230, 57, 70, 0.08);
    color: #E63946;
    margin-bottom: 1rem;
}

.surface-card {
    background: #14141F;
    border: 1px solid #252535;
    border-radius: 1rem;
    transition: border-color 200ms ease;
}
.surface-card:hover { border-color: #3A3A50; }

.summary-card {
    display: block;
    background: rgba(20, 20, 31, 0.6);
    border: 1px solid #252535;
    border-radius: 0.875rem;
    padding: 1.25rem 1.5rem;
    transition: border-color 200ms ease, transform 200ms ease;
    text-decoration: none;
    backdrop-filter: blur(8px);
    position: relative;
}
.summary-card:hover { border-color: #3A3A50; transform: translateY(-2px); }

/* Stretched-link: makes the title <a> cover the whole card */
.stretched-link {
    color: inherit;
    text-decoration: none;
}
.stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.875rem;
    z-index: 1;
}

/* Delete button on dashboard cards */
.delete-card-btn {
    color: #4A4A60;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.375rem;
    line-height: 1;
    transition: color 150ms ease, background 150ms ease, opacity 150ms ease;
    position: relative;
    z-index: 10;
}
.delete-card-btn:hover { color: #E63946; background: rgba(230, 57, 70, 0.12); }

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}
.status-pending { background: rgba(251, 191, 36, 0.1); color: #FBBF24; border: 1px solid rgba(251,191,36,0.2); }
.status-processing { background: rgba(230, 57, 70, 0.1); color: #E63946; border: 1px solid rgba(230,57,70,0.2); }
.status-done { background: rgba(74, 222, 128, 0.1); color: #4ADE80; border: 1px solid rgba(74,222,128,0.2); }
.status-error { background: rgba(230, 57, 70, 0.1); color: #E63946; border: 1px solid rgba(230,57,70,0.2); }

.input-card {
    display: flex;
    flex-direction: column;
    background: #14141F;
    border: 1px solid #252535;
    border-radius: 0.875rem;
    overflow: hidden;
    transition: border-color 200ms ease;
}
.input-card:hover { border-color: #3A3A50; }
.input-card:focus-within { border-color: #E63946; }
.input-card-top {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem 1.125rem 0.75rem;
}
.input-card-sep {
    height: 1px;
    background: #1E1E2E;
    margin: 0 1.25rem;
}
.input-card-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
}

.url-input,
input[type="url"].url-input {
    width: 100%;
    background: #191926;
    color: #EDEDF0;
    border: 1px solid #252535;
    border-radius: 0.5625rem;
    padding: 0.625rem 1rem 0.625rem 2.75rem;
    font-size: 0.8125rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    outline: none;
    transition: border-color 200ms ease;
    min-height: 46px;
}
.url-input:focus { border-color: #E63946; }
.url-input:disabled { color: #4A4A60; }
.url-input::placeholder { color: #4A4A60; }

.dark-input,
input[type="email"].dark-input,
input[type="password"].dark-input,
input[type="text"].dark-input {
    width: 100%;
    background: #191926;
    color: #EDEDF0;
    border: 1px solid #252535;
    border-radius: 0.5625rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    outline: none;
    transition: border-color 200ms ease;
}
.dark-input:focus { border-color: #E63946; }
.dark-input::placeholder { color: #4A4A60; }

.toggle-btn {
    position: relative;
    cursor: pointer;
}
.toggle-btn input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 300;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #4A4A60;
    background: transparent;
    border: 1px solid #252535;
    transition: all 200ms ease;
}
.toggle-btn:hover span { border-color: #3A3A50; color: #EDEDF0; }
.toggle-btn input:checked + span {
    background: #14141F;
    color: #EDEDF0;
    border-color: #E63946;
}

/* ── Theme Picker ── */
.theme-picker-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 1.25rem;
    padding: 0.6875rem 1.25rem;
    background: #0E0E1A;
    border: 1px solid #1E1E2E;
    border-radius: 0.875rem;
}
.theme-picker-label {
    color: #7E7E98;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}
.theme-picker-segment {
    display: flex;
    background: #14141F;
    border: 1px solid #252535;
    border-radius: 0.5rem;
    padding: 3px;
    gap: 3px;
}
.theme-seg-opt {
    position: relative;
    cursor: pointer;
}
.theme-seg-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.theme-seg-opt span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #4A4A60;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
}
.theme-seg-opt span svg {
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
}
.theme-seg-opt:hover span { color: #EDEDF0; }
.theme-seg-opt input:checked + span {
    background: linear-gradient(135deg, #E63946, #FF2D55);
    color: #FFFFFF;
    box-shadow: 0 2px 12px rgba(230, 57, 70, 0.35);
}
.theme-seg-opt--light input:checked + span {
    background: linear-gradient(135deg, #E8E8F0, #FFFFFF);
    color: #0B0B12;
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.1);
}

.log-box {
    background: #14141F;
    border: 1px solid #252535;
    border-radius: 0.875rem;
    overflow: hidden;
    transition: border-color 200ms ease;
}
.log-box:hover { border-color: #3A3A50; }

.log-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem 0.5rem;
}

.log-title {
    color: #4A4A60;
    font-size: 0.625rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.125em;
}

.log-text {
    background: #0B0B12;
    color: #7E7E98;
    padding: 0.5rem 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    min-height: 2rem;
    border-radius: 0 0 0.875rem 0.875rem;
}

.pulsing-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #4A4A60;
    animation: pulse-dot 1.4s ease-in-out infinite;
}
.dot-run { background: #E63946; }
.dot-err { background: #E63946; animation: none; }
.dot-ok { background: #4ADE80; animation: none; }

@keyframes pulse-dot {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

.prose-dark h1 {
    color: #EDEDF0;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #E63946;
}
.prose-dark h2 {
    color: #E63946;
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}
.prose-dark h3 {
    color: #7E7E98;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
}
.prose-dark p {
    color: #C8C8D6;
    font-size: 0.9375rem;
    line-height: 1.75;
    margin-bottom: 0.75rem;
}
.prose-dark ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}
.prose-dark li {
    color: #C8C8D6;
    font-size: 0.9375rem;
    line-height: 1.75;
    margin-bottom: 0.25rem;
}
.prose-dark li::marker { color: #E63946; }
.prose-dark strong { color: #E63946; font-weight: 600; }
.prose-dark blockquote {
    border-left: 3px solid #E63946;
    background: #1A1A2A;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
    border: 1px solid #252535;
    border-left: 3px solid #E63946;
}
.prose-dark blockquote p { color: #EDEDF0; }
.prose-dark hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, #E63946, #FF2D55, transparent);
    margin: 1.5rem 0;
}
.prose-dark code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    background: #191926;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: #E63946;
}
.prose-dark pre {
    background: #191926;
    border: 1px solid #252535;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}
.prose-dark pre code {
    background: none;
    padding: 0;
    color: #C8C8D6;
}

.toast {
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    backdrop-filter: blur(12px);
    border: 1px solid #252535;
}
.toast-success { background: rgba(74, 222, 128, 0.1); color: #4ADE80; border-color: rgba(74,222,128,0.2); }
.toast-error { background: rgba(230, 57, 70, 0.1); color: #E63946; border-color: rgba(230,57,70,0.2); }
.toast-info { background: rgba(126, 126, 152, 0.1); color: #7E7E98; }
.toast-warning { background: rgba(251, 191, 36, 0.1); color: #FBBF24; border-color: rgba(251,191,36,0.2); }

/* ── Plan-change confirm modal (upgrade/downgrade in /pricing/) ── */
.plan-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: plan-modal-fade 180ms ease;
}
.plan-modal-backdrop[hidden] { display: none; }
.plan-modal-card {
    background: #14141F;
    border: 1px solid #252535;
    border-radius: 1rem;
    padding: 2rem;
    max-width: 30rem;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    animation: plan-modal-pop 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.plan-modal-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #EDEDF0;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}
.plan-modal-card p {
    color: #A4A4B5;
    line-height: 1.55;
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}
.plan-modal-card p:last-of-type { margin-bottom: 0; }
.plan-modal-card .plan-modal-note {
    color: #7E7E98;
    font-size: 0.8125rem;
    margin-top: 0.75rem;
}
.plan-modal-card .plan-modal-actions {
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}
@keyframes plan-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes plan-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .input-card-top {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }
    .input-card-sep { margin: 0 1rem; }
    .input-card-theme { flex-wrap: wrap; }
    .accent-bar { display: none; }
    .url-input { padding-left: 1rem !important; }
    .btn-primary-generate { width: 100%; }
}

/* ── Quota Pill (nav badge) ── */
.quota-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.4375rem 0.75rem;
    background: #14141F;
    border: 1px solid #252535;
    border-radius: 9999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.quota-pill:hover { border-color: #3A3A50; transform: translateY(-1px); }
.quota-pill-num { font-weight: 700; }
.quota-pill-sep { opacity: 0.3; margin: 0 0.125rem; font-weight: 400; }
.quota-pill-limit { opacity: 0.55; }

.quota-pill-healthy { color: #EDEDF0; }
.quota-pill-warning { color: #FBBF24; border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.04); }
.quota-pill-critical {
    color: #E63946;
    border-color: rgba(230,57,70,0.4);
    background: rgba(230,57,70,0.06);
}
.quota-pill-exhausted {
    color: #E63946;
    border-color: rgba(230,57,70,0.5);
    background: rgba(230,57,70,0.1);
    animation: quota-pulse 2.4s ease-in-out infinite;
}
@keyframes quota-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0); }
    50% { box-shadow: 0 0 0 4px rgba(230,57,70,0.15); }
}
@media (prefers-reduced-motion: reduce) {
    .quota-pill-exhausted { animation: none; }
}

/* Plan badge — pill que mostra o tier do usuário no dashboard */
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.375rem;
    border: 1px solid;
    line-height: 1;
    transition: background 200ms ease, border-color 200ms ease;
}
.plan-badge::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.plan-badge.plan-pro {
    color: #FF6B6B;
    background: rgba(230, 57, 70, 0.08);
    border-color: rgba(230, 57, 70, 0.28);
}
.plan-badge.plan-student {
    color: #4ADE80;
    background: rgba(74, 222, 128, 0.07);
    border-color: rgba(74, 222, 128, 0.25);
}
.plan-badge.plan-creator {
    color: #FBBF24;
    background: rgba(251, 191, 36, 0.07);
    border-color: rgba(251, 191, 36, 0.3);
}

/* Dashboard actions row (manage subscription + new summary) */
.dashboard-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dashboard-actions .btn-ghost svg {
    flex-shrink: 0;
}

/* ── Quota Panel (generate page) ── */
.quota-panel {
    position: relative;
    background: linear-gradient(180deg, rgba(20,20,31,0.7) 0%, rgba(11,11,18,0.7) 100%);
    border: 1px solid #252535;
    border-radius: 0.875rem;
    padding: 1.125rem 1.25rem 1rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(8px);
    transition: border-color 200ms ease;
}
.quota-panel:hover { border-color: #3A3A50; }

.quota-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 1rem;
}
.quota-panel-id {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.quota-panel-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.12);
    flex-shrink: 0;
    transition: background 200ms ease, box-shadow 200ms ease;
}
.quota-panel-warning .quota-panel-dot { background: #FBBF24; box-shadow: 0 0 0 3px rgba(251,191,36,0.12); }
.quota-panel-critical .quota-panel-dot { background: #E63946; box-shadow: 0 0 0 3px rgba(230,57,70,0.15); }
.quota-panel-exhausted .quota-panel-dot { background: #E63946; box-shadow: 0 0 0 3px rgba(230,57,70,0.2); }

.quota-panel-label {
    color: #7E7E98;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quota-panel-stats {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
}
.quota-panel-frac {
    font-family: 'JetBrains Mono', monospace;
    color: #EDEDF0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1;
}
.quota-panel-frac strong { font-weight: 700; }
.quota-panel-frac i {
    font-style: normal;
    opacity: 0.3;
    margin: 0 0.125rem;
    font-weight: 400;
}
.quota-panel-pct {
    color: #4A4A60;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
}

.quota-panel-track {
    position: relative;
    width: 100%;
    height: 0.5rem;
    background: #0B0B12;
    border-radius: 9999px;
    overflow: visible;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.quota-panel-fill {
    position: relative;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4ADE80, #22C55E);
    border-radius: 9999px;
    transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
    box-shadow: 0 0 12px rgba(74,222,128,0.3);
}
.quota-panel-warning .quota-panel-fill {
    background: linear-gradient(90deg, #FBBF24, #F59E0B);
    box-shadow: 0 0 12px rgba(251,191,36,0.4);
}
.quota-panel-critical .quota-panel-fill,
.quota-panel-exhausted .quota-panel-fill {
    background: linear-gradient(90deg, #E63946, #FF2D55);
    box-shadow: 0 0 14px rgba(230,57,70,0.45);
}

.quota-panel-scrubber {
    position: absolute;
    right: -0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: #4ADE80;
    border: 2px solid #0B0B12;
    box-shadow: 0 0 0 1px #4ADE80, 0 0 8px rgba(74,222,128,0.45);
    transition: background 200ms ease, box-shadow 200ms ease;
}
.quota-panel-warning .quota-panel-scrubber {
    background: #FBBF24;
    box-shadow: 0 0 0 1px #FBBF24, 0 0 8px rgba(251,191,36,0.45);
}
.quota-panel-critical .quota-panel-scrubber,
.quota-panel-exhausted .quota-panel-scrubber {
    background: #E63946;
    box-shadow: 0 0 0 1px #E63946, 0 0 10px rgba(230,57,70,0.55);
}

.quota-panel-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.625rem;
    gap: 1rem;
}
.quota-panel-reset {
    color: #4A4A60;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}
.quota-panel-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #E63946;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border-radius: 0.4375rem;
    background: rgba(230,57,70,0.08);
    border: 1px solid rgba(230,57,70,0.22);
    transition: all 200ms ease;
    cursor: pointer;
}
.quota-panel-upgrade:hover {
    background: rgba(230,57,70,0.15);
    border-color: rgba(230,57,70,0.4);
    transform: translateY(-1px);
}
.quota-panel-upgrade svg {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 200ms ease;
}
.quota-panel-upgrade:hover svg { transform: translateX(2px); }

/* ── Quota Locked (exhausted state) ── */
.quota-locked {
    position: relative;
    background: linear-gradient(180deg, rgba(20,20,31,0.85) 0%, rgba(11,11,18,0.85) 100%);
    border: 1px solid #252535;
    border-radius: 1rem;
    overflow: hidden;
    backdrop-filter: blur(8px);
}
.quota-locked-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(230,57,70,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 35% at 50% 100%, rgba(230,57,70,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.quota-locked-inner {
    position: relative;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
}
.quota-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(230,57,70,0.18), rgba(255,45,85,0.05));
    border: 1px solid rgba(230,57,70,0.3);
    color: #E63946;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 30px rgba(230,57,70,0.15);
}
.quota-locked-icon svg { width: 2rem; height: 2rem; }

.quota-locked-title {
    color: #EDEDF0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.quota-locked-sub {
    color: #7E7E98;
    font-size: 0.875rem;
    line-height: 1.65;
    max-width: 30rem;
    margin: 0 auto 1.75rem;
}
.quota-locked-sub strong { color: #EDEDF0; font-weight: 600; }

.quota-locked-perks {
    list-style: none;
    padding: 0;
    margin: 0 auto 2rem;
    max-width: 22rem;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 1.5rem;
}
.quota-locked-perks li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #C8C8D6;
    font-size: 0.8125rem;
}
.quota-locked-check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #E63946, #FF2D55);
    position: relative;
    display: inline-block;
}
.quota-locked-check::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0.3rem;
    width: 0.35rem;
    height: 0.18rem;
    border-left: 1.5px solid #FFFFFF;
    border-bottom: 1.5px solid #FFFFFF;
    transform: rotate(-45deg);
}

.quota-locked-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
    margin-bottom: 0.875rem;
    white-space: nowrap;
}
.quota-locked-cta svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.quota-locked-back {
    display: block;
    color: #4A4A60;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 200ms ease;
    margin-top: 0.25rem;
}
.quota-locked-back:hover { color: #7E7E98; }

@media (max-width: 640px) {
    .quota-panel-top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .quota-panel-stats { width: 100%; justify-content: space-between; }
    .quota-panel-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .quota-locked-perks { grid-template-columns: 1fr; max-width: 18rem; }
    .quota-locked-inner { padding: 2rem 1.5rem 1.5rem; }
    .quota-pill { padding: 0.375rem 0.625rem; font-size: 0.6875rem; }
}

/* ── Pricing Page ── */
.pricing-eyebrow {
    display: inline-block;
    color: #E63946;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    padding: 0.4375rem 0.9375rem;
    background: rgba(230,57,70,0.08);
    border: 1px solid rgba(230,57,70,0.22);
    border-radius: 9999px;
}

.pricing-card {
    position: relative;
    background: linear-gradient(180deg, rgba(20,20,31,0.6) 0%, rgba(11,11,18,0.6) 100%);
    border: 1px solid #252535;
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(8px);
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.pricing-card:hover {
    border-color: #3A3A50;
    transform: translateY(-2px);
}

.pricing-card--pro {
    background: linear-gradient(180deg, rgba(30,20,25,0.85) 0%, rgba(11,11,18,0.85) 100%);
    border-color: rgba(230,57,70,0.4);
    box-shadow: 0 0 40px rgba(230,57,70,0.08);
}
.pricing-card--pro:hover {
    border-color: rgba(230,57,70,0.6);
    box-shadow: 0 0 60px rgba(230,57,70,0.15);
}

.pricing-card-badge {
    position: absolute;
    top: -0.6875rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #E63946, #FF2D55);
    color: #FFFFFF;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(230,57,70,0.35);
    white-space: nowrap;
}

.pricing-card-head {
    margin-bottom: 1.5rem;
}
.pricing-card-name {
    display: block;
    color: #EDEDF0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.375rem;
}
.pricing-card--pro .pricing-card-name { color: #E63946; }
.pricing-card-desc {
    color: #7E7E98;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

.pricing-card-price {
    display: flex;
    align-items: flex-start;
    gap: 0.125rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #252535;
    line-height: 1;
}
.pricing-card-currency {
    color: #7E7E98;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0.625rem;
}
.pricing-card-amount {
    color: #EDEDF0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}
.pricing-card-cents {
    color: #EDEDF0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 0.625rem;
}
.pricing-card-period {
    color: #4A4A60;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 0.5rem;
    margin-top: 1.5rem;
    align-self: flex-start;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pricing-card-features li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #C8C8D6;
    font-size: 0.875rem;
    line-height: 1.4;
}
.pricing-card-features .pricing-feature-text {
    flex: 1;
    min-width: 0;
}
.pricing-check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(74,222,128,0.15);
    position: relative;
    display: inline-block;
}
.pricing-check::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0.3rem;
    width: 0.35rem;
    height: 0.18rem;
    border-left: 1.5px solid #4ADE80;
    border-bottom: 1.5px solid #4ADE80;
    transform: rotate(-45deg);
}
.pricing-card--pro .pricing-check {
    background: linear-gradient(135deg, rgba(230,57,70,0.2), rgba(255,45,85,0.1));
}
.pricing-card--pro .pricing-check::after {
    border-left-color: #E63946;
    border-bottom-color: #E63946;
}

.pricing-card-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.pricing-card-cta:disabled {
    background: transparent;
    color: #4A4A60;
    border: 1px solid #252535;
    cursor: default;
    opacity: 1;
}
.pricing-card-cta:disabled:hover {
    transform: none;
    opacity: 1;
}

.pricing-coupon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(230,57,70,0.04);
    border: 1px dashed rgba(230,57,70,0.25);
    border-radius: 0.625rem;
    color: #7E7E98;
    font-size: 0.875rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.pricing-coupon-icon { width: 1rem; height: 1rem; color: #E63946; flex-shrink: 0; }
.pricing-coupon-text { line-height: 1.4; }
.pricing-code {
    display: inline-block;
    color: #E63946;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(230,57,70,0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    border: 1px solid rgba(230,57,70,0.2);
    margin: 0 0.125rem;
}

@media (max-width: 768px) {
    .pricing-card--pro { box-shadow: 0 0 30px rgba(230,57,70,0.1); }
}

/* ── Billing Result (success / cancel) ── */
.billing-result {
    position: relative;
    background: linear-gradient(180deg, rgba(20,20,31,0.85) 0%, rgba(11,11,18,0.85) 100%);
    border: 1px solid #252535;
    border-radius: 1rem;
    overflow: hidden;
    backdrop-filter: blur(8px);
}
.billing-result--success {
    border-color: rgba(74,222,128,0.3);
    box-shadow: 0 0 50px rgba(74,222,128,0.08);
}
.billing-result-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(74,222,128,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 35% at 50% 100%, rgba(74,222,128,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.billing-result-inner {
    position: relative;
    padding: 3rem 2rem 2.5rem;
    text-align: center;
}
.billing-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(74,222,128,0.05));
    border: 1px solid rgba(74,222,128,0.3);
    color: #4ADE80;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 40px rgba(74,222,128,0.15);
}
.billing-result-icon--muted {
    background: linear-gradient(135deg, rgba(126,126,152,0.12), rgba(74,74,96,0.05));
    border-color: rgba(126,126,152,0.25);
    color: #7E7E98;
    box-shadow: none;
}
.billing-result-icon svg { width: 2.75rem; height: 2.75rem; }
.billing-result-title {
    color: #EDEDF0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 0.75rem;
}
.billing-result-sub {
    color: #7E7E98;
    font-size: 0.9375rem;
    line-height: 1.65;
    max-width: 28rem;
    margin: 0 auto 2rem;
}
.billing-result-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}
.billing-result-actions .btn-primary,
.billing-result-actions .btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
}
@media (max-width: 640px) {
    .billing-result-inner { padding: 2.5rem 1.5rem 2rem; }
    .billing-result-title { font-size: 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ════════════════════════════════════════════════════════════════════ */

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Terminal Mockup ── */
.terminal {
    background: #0E0E1A;
    border: 1px solid #252535;
    border-radius: 0.875rem;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.02),
        0 30px 60px -20px rgba(0,0,0,0.6),
        0 0 80px -20px rgba(230,57,70,0.12);
}
.terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: #14141F;
    border-bottom: 1px solid #1E1E2E;
}
.terminal-dots { display: inline-flex; gap: 0.375rem; }
.terminal-dot { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; }
.terminal-dot--red { background: #FF5F57; }
.terminal-dot--amber { background: #FEBC2E; }
.terminal-dot--green { background: #28C840; }
.terminal-title {
    color: #7E7E98;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    flex: 1;
    text-align: center;
}
.terminal-meta {
    color: #4A4A60;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
}
.terminal-body {
    padding: 1.25rem 1.125rem 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
}
.terminal-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.terminal-prompt { color: #E63946; font-weight: 700; }
.terminal-cmd { color: #EDEDF0; word-break: break-all; }
.terminal-muted { color: #4A4A60; }
.terminal-ok {
    color: #4ADE80;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: auto;
}
.terminal-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #252535, transparent);
    margin: 0.75rem 0;
}
.terminal-line--result {
    background: rgba(74,222,128,0.05);
    border: 1px solid rgba(74,222,128,0.18);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-top: 0.5rem;
    justify-content: space-between;
}
.terminal-result-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #4ADE80;
    font-size: 0.75rem;
    font-weight: 500;
}
.terminal-result-meta {
    color: #7E7E98;
    font-size: 0.6875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── How It Works (step cards) ── */
.step-card {
    position: relative;
    background: rgba(20,20,31,0.5);
    border: 1px solid #252535;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.step-card:hover {
    border-color: #3A3A50;
    background: rgba(20,20,31,0.8);
    transform: translateY(-2px);
}
.step-num {
    color: #4A4A60;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
    display: block;
}
.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(230,57,70,0.15), rgba(255,45,85,0.05));
    border: 1px solid rgba(230,57,70,0.25);
    color: #E63946;
    margin-bottom: 1rem;
}
.step-icon svg { width: 1.5rem; height: 1.5rem; }
.step-title {
    color: #EDEDF0;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.step-desc {
    color: #7E7E98;
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 18rem;
    margin: 0 auto;
}

/* ── Output Mock (PDF preview) ── */
.output-mock {
    background: linear-gradient(180deg, rgba(20,20,31,0.6) 0%, rgba(11,11,18,0.6) 100%);
    border: 1px solid #252535;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
}
.output-mock-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: #0E0E1A;
    border-bottom: 1px solid #1E1E2E;
    gap: 1rem;
    flex-wrap: wrap;
}
.output-mock-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #EDEDF0;
    font-size: 0.8125rem;
    font-weight: 500;
}
.output-mock-meta {
    color: #4A4A60;
    font-size: 0.75rem;
}
.output-mock-body {
    padding: 2.5rem 2rem;
    background:
        linear-gradient(180deg, transparent 0%, rgba(230,57,70,0.02) 100%),
        #0B0B12;
}
.output-mock-cover { margin-bottom: 2.5rem; padding-bottom: 1.75rem; border-bottom: 1px solid #1E1E2E; }
.output-mock-eyebrow {
    color: #E63946;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin-bottom: 0.875rem;
}
.output-mock-title {
    color: #EDEDF0;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.875rem;
}
.output-mock-meta-line {
    color: #7E7E98;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.output-mock-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.output-tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: rgba(230,57,70,0.08);
    border: 1px solid rgba(230,57,70,0.2);
    color: #E63946;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    border-radius: 0.375rem;
}
.output-mock-section { margin-bottom: 1.75rem; }
.output-mock-section:last-child { margin-bottom: 0; }
.output-mock-h2 {
    color: #E63946;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #1E1E2E;
}
.output-mock-p {
    color: #C8C8D6;
    font-size: 0.875rem;
    line-height: 1.7;
}
.output-mock-list { list-style: none; padding: 0; margin: 0; }
.output-mock-list li {
    color: #C8C8D6;
    font-size: 0.875rem;
    line-height: 1.7;
    padding: 0.25rem 0;
}

/* ── Use Case Cards ── */
.usecase-card {
    background: rgba(20,20,31,0.5);
    border: 1px solid #252535;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
    display: flex;
    flex-direction: column;
}
.usecase-card:hover {
    border-color: #3A3A50;
    background: rgba(20,20,31,0.8);
    transform: translateY(-2px);
}
.usecase-card--pro {
    background: linear-gradient(180deg, rgba(30,20,25,0.6) 0%, rgba(11,11,18,0.6) 100%);
    border-color: rgba(230,57,70,0.3);
}
.usecase-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background: rgba(230,57,70,0.08);
    color: #E63946;
    margin-bottom: 1rem;
}
.usecase-icon svg { width: 1.5rem; height: 1.5rem; }
.usecase-title {
    color: #EDEDF0;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.usecase-desc {
    color: #7E7E98;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
}
.usecase-stat {
    color: #7E7E98;
    font-size: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #252535;
}
.usecase-stat .text-accent { font-weight: 700; }

/* ── Pricing Teaser Mini Cards ── */
.pricing-mini {
    position: relative;
    background: rgba(20,20,31,0.5);
    border: 1px solid #252535;
    border-radius: 0.875rem;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    transition: border-color 200ms ease, transform 200ms ease;
}
.pricing-mini:hover { border-color: #3A3A50; transform: translateY(-2px); }
.pricing-mini--highlight {
    background: linear-gradient(180deg, rgba(30,20,25,0.6) 0%, rgba(11,11,18,0.6) 100%);
    border-color: rgba(230,57,70,0.4);
    box-shadow: 0 0 30px rgba(230,57,70,0.08);
}
.pricing-mini-badge {
    position: absolute;
    top: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #E63946, #FF2D55);
    color: #FFFFFF;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    white-space: nowrap;
}
.pricing-mini-name {
    color: #EDEDF0;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}
.pricing-mini-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #252535;
    line-height: 1;
}
.pricing-mini-amount {
    color: #EDEDF0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.pricing-mini--highlight .pricing-mini-amount { color: #E63946; }
.pricing-mini-cents {
    color: #EDEDF0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.pricing-mini--highlight .pricing-mini-cents { color: #E63946; }
.pricing-mini-period { color: #4A4A60; font-size: 0.8125rem; }
.pricing-mini-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pricing-mini-features li {
    color: #C8C8D6;
    font-size: 0.8125rem;
    line-height: 1.4;
    padding-left: 1.125rem;
    position: relative;
}
.pricing-mini-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #4ADE80;
}
.pricing-mini-features li strong { color: #EDEDF0; font-weight: 700; }

/* ── Testimonials ── */
.testimonial {
    background: rgba(20,20,31,0.5);
    border: 1px solid #252535;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 0;
    transition: border-color 200ms ease, transform 200ms ease;
}
.testimonial:hover { border-color: #3A3A50; transform: translateY(-2px); }
.testimonial-quote {
    color: #EDEDF0;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    position: relative;
    padding-left: 1rem;
    border-left: 2px solid #E63946;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.testimonial-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}
.testimonial-name { color: #EDEDF0; font-size: 0.875rem; font-weight: 600; }
.testimonial-role { color: #4A4A60; font-size: 0.6875rem; margin-top: 0.125rem; }

/* ── FAQ Accordion ── */
.faq-item {
    background: rgba(20,20,31,0.5);
    border: 1px solid #252535;
    border-radius: 0.75rem;
    transition: border-color 200ms ease, background 200ms ease;
    overflow: hidden;
}
.faq-item:hover { border-color: #3A3A50; }
.faq-item[open] { background: rgba(20,20,31,0.8); border-color: rgba(230,57,70,0.3); }
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    color: #EDEDF0;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 200ms ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: #FFFFFF; }
.faq-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: #7E7E98;
    flex-shrink: 0;
    transition: transform 250ms ease, color 250ms ease;
}
.faq-item[open] .faq-icon { transform: rotate(180deg); color: #E63946; }
.faq-a {
    padding: 0 1.375rem 1.25rem;
    color: #7E7E98;
    font-size: 0.875rem;
    line-height: 1.7;
    max-width: 50rem;
}
.faq-a strong { color: #EDEDF0; font-weight: 600; }

/* ── Final CTA ── */
.final-cta {
    position: relative;
    background: linear-gradient(180deg, rgba(20,20,31,0.85) 0%, rgba(11,11,18,0.85) 100%);
    border: 1px solid #252535;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(230,57,70,0.08);
}
.final-cta-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(230,57,70,0.2) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,45,85,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.final-cta-inner {
    position: relative;
    padding: 4rem 2rem;
    text-align: center;
}
@media (max-width: 640px) {
    .final-cta-inner { padding: 3rem 1.5rem; }
    .step-card { padding: 1.5rem 1.25rem 1.25rem; }
    .output-mock-body { padding: 2rem 1.5rem; }
    .output-mock-title { font-size: 1.5rem; }
    .pricing-mini { padding: 1.5rem 1.25rem; }
    .testimonial { padding: 1.25rem; }
}