/* ==========================================================================
   eSign Portal Theme — "Indigo Trust"
   Global styles and Quasar brand color overrides.
   Indigo/violet primary with warm amber accents for a premium SaaS feel.

   Quasar sets brand CSS variables as inline styles on document.body
   via setCssVar(), so we must use !important on body to override them.
   ========================================================================== */

/* -- Quasar Brand Color Overrides ---------------------------------------- */
body {
    --q-primary: #6366F1 !important;
    --q-secondary: #64748B !important;
    --q-accent: #F59E0B !important;
    --q-positive: #10B981 !important;
    --q-negative: #EF4444 !important;
    --q-info: #3B82F6 !important;
    --q-warning: #F59E0B !important;
    --q-dark: #1E1B4B !important;
    --q-dark-page: #1E1B4B !important;
    background-color: #F8FAFC !important;
    color: #334155;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.body--dark {
    background: #1E1B4B !important;
}

.q-dark {
    background: #252250 !important;
}

/* -- Page Background ----------------------------------------------------- */
.q-page {
    background-color: #F8FAFC !important;
    padding: 32px 40px 40px 44px;
}

/* -- Sidebar / Drawer ---------------------------------------------------- */
.q-drawer {
    background-color: #FAFBFF !important;
    color: #475569 !important;
    border-right: 1px solid #E2E8F0 !important;
}

.q-drawer .q-item {
    border-radius: 8px !important;
    min-height: 42px !important;
    margin: 2px 10px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.q-drawer .q-item:hover:not(.esign-nav-active) {
    background-color: rgba(99, 102, 241, 0.04) !important;
    color: #0F172A !important;
}

.q-drawer .q-item:hover:not(.esign-nav-active) .q-icon {
    color: #6366F1 !important;
}

.q-drawer .q-item .q-icon {
    color: #94A3B8;
    transition: color 0.15s ease;
}

.q-drawer .q-item-label--header {
    color: #94A3B8;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Navigation active state — Notion-inspired soft fill with left accent */
.esign-nav-active {
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: none !important;
    color: #6366F1 !important;
    border-radius: 8px !important;
    border-left: 3px solid #6366F1 !important;
    font-weight: 600;
}

.esign-nav-active .q-icon {
    color: #6366F1 !important;
}

/* -- Card Styles --------------------------------------------------------- */
.q-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0;
}

.q-card--bordered {
    border: 1px solid #CBD5E1 !important;
}

/* -- Typography ---------------------------------------------------------- */
.text-h4 {
    color: #0F172A !important;
    font-weight: 700 !important;
}

.text-h5, .text-h6 {
    color: #0F172A !important;
    font-weight: 600 !important;
}

.text-subtitle1, .text-subtitle2 {
    color: #475569;
}

.text-caption {
    color: #94A3B8;
}

/* -- Buttons ------------------------------------------------------------- */
.q-btn--outline {
    border-width: 1.5px !important;
}

/* -- Tables -------------------------------------------------------------- */
.q-table thead th {
    font-weight: 600;
    color: #475569;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.q-table tbody tr:hover {
    background-color: #F8FAFC;
}

/* -- Status badges / chips ----------------------------------------------- */
.q-chip {
    font-weight: 500;
}

/* -- Section divider ----------------------------------------------------- */
.q-separator {
    background-color: #E2E8F0 !important;
}

/* -- Input fields -------------------------------------------------------- */
.q-field--outlined .q-field__control {
    border-radius: 8px !important;
}

.q-field--focused .q-field__control {
    border-color: #6366F1 !important;
}

/* -- Scrollarea Fix ------------------------------------------------------ */
.q-scrollarea--only-vertical .q-scrollarea__content {
    width: 100%;
}

/* -- Scrollbar Styling --------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 #F8FAFC;
}

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #F8FAFC;
}

*::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 4px;
    border: 2px solid #F8FAFC;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #94A3B8;
}

/* -- Dark Mode ----------------------------------------------------------- */
body.body--dark .q-drawer {
    background-color: #1E1B4B !important;
    color: #C7D2FE !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.body--dark .q-drawer .q-item-label--header {
    color: #A5B4FC;
}

body.body--dark .q-page {
    background-color: #252250 !important;
}

body.body--dark .esign-nav-active {
    background: rgba(99, 102, 241, 0.15) !important;
    box-shadow: none !important;
    color: #A5B4FC !important;
    border-left-color: #A5B4FC !important;
}

body.body--dark .esign-nav-active .q-icon {
    color: #A5B4FC !important;
}

body.body--dark .q-expansion-item__content {
    background-color: #2D2A5E !important;
}

body.body--dark * {
    scrollbar-color: rgba(99, 102, 241, 0.25) #1E1B4B;
}

body.body--dark *::-webkit-scrollbar-track {
    background: #1E1B4B;
}

body.body--dark *::-webkit-scrollbar-thumb {
    background-color: rgba(99, 102, 241, 0.25);
    border-color: #1E1B4B;
}

/* ==========================================================================
   Marketing / Landing Page Styles
   Deep indigo hero + light content sections for premium SaaS feel.
   ========================================================================== */

/* -- Marketing CSS Variables ---------------------------------------------- */
:root {
    --mkt-navy-deep: #1E1B4B;
    --mkt-navy: #2A2566;
    --mkt-navy-light: #3A3485;
    --mkt-navy-mid: #312C73;
    /* Brand accents — bumped one Tailwind step darker (500 → 600/700) so they
       pass WCAG AA 4.5:1 against white when used as text or as a button bg
       with white labels. The previous shades (#6366F1, #8B5CF6, #F59E0B,
       #10B981) all failed Lighthouse contrast in 40+ places. */
    --mkt-indigo: #4F46E5;          /* indigo-600 — 5.94:1 on white */
    --mkt-violet: #7C3AED;          /* violet-600 — 5.22:1 on white */
    --mkt-indigo-bright: #818CF8;   /* indigo-400 — only used on dark bg */
    --mkt-gold: #B45309;            /* amber-700 — 4.84:1 on white */
    --mkt-emerald: #047857;         /* emerald-700 — 5.34:1 on white */
    --mkt-light: #F8FAFC;
    --mkt-cream: #FFFBF0;
}

/* Marketing muted-text override. Quasar's .text-grey-6 = #9E9E9E renders at
   2.67:1 on white (fails WCAG AA). Bumped to #616161 (4.83:1) globally —
   slightly darker but still reads as a muted secondary tone. */
.text-grey-6 { color: #616161 !important; }
.text-grey-7 { color: #424242 !important; }

/* -- Hero (Light) ---------------------------------------------------------
   Modern SaaS "glass" hero: subtle base gradient + two out-of-focus colored
   orbs bleeding in from the corners. The orbs are pure decoration and
   z-index below content so they never interfere with clicks or readability. */
.mkt-hero-light {
    /* Stacked atmospheric washes — three soft radial color fields on top
       of the base linear gradient. Together with the existing ::before
       and ::after corner orbs (defined below) they give the hero a
       layered ambient depth instead of reading as a flat block. */
    background:
        radial-gradient(ellipse 60% 45% at 18% 22%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 65%),
        radial-gradient(ellipse 55% 50% at 82% 78%, rgba(14, 165, 233, 0.16) 0%, rgba(14, 165, 233, 0) 65%),
        radial-gradient(ellipse 70% 35% at 50% 100%, rgba(139, 92, 246, 0.14) 0%, rgba(139, 92, 246, 0) 70%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    color: #0F172A;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mkt-hero-light::before,
.mkt-hero-light::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
}

.mkt-hero-light::before {
    top: -180px;
    right: -120px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 70%);
}

.mkt-hero-light::after {
    bottom: -160px;
    left: -100px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 70%);
}

/* Keep content above the decorative orbs */
.mkt-hero-light > * {
    position: relative;
    z-index: 1;
}

/* Subtle light-section wash: same underlying color but with gentle radial
   tints bleeding from corners so the section doesn't read as a flat block. */
.mkt-light-wash {
    background:
        radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.08), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(99, 102, 241, 0.06), transparent 55%),
        var(--mkt-light);
    color: #0F172A;
}

/* Soft SVG divider between sections. Use for gentle shape transitions
   between light-ish blocks — not a dramatic color change, just a wave. */
.mkt-divider-soft {
    display: block;
    width: 100%;
    height: 56px;
    line-height: 0;
    margin: 0;
    pointer-events: none;
}

/* -- Dark Sections -------------------------------------------------------- */
.mkt-dark {
    background-color: var(--mkt-navy-deep);
    color: #E2E8F0;
}

.mkt-dark-mid {
    background-color: var(--mkt-navy);
    color: #E2E8F0;
}

.mkt-dark-light {
    background-color: var(--mkt-navy-light);
    color: #E2E8F0;
}

/* -- Light Sections ------------------------------------------------------- */
.mkt-light {
    background-color: var(--mkt-light);
    color: #0F172A;
}

.mkt-white {
    background-color: #ffffff;
    color: #0F172A;
}

.mkt-cream {
    background-color: var(--mkt-cream);
    color: #0F172A;
}

/* -- Accent Colors -------------------------------------------------------- */
.text-mkt-green { color: var(--mkt-indigo-bright); }
.text-mkt-gold { color: var(--mkt-gold); }
.text-mkt-navy { color: var(--mkt-navy-deep); }
.text-mkt-indigo { color: var(--mkt-indigo); }
.text-mkt-violet { color: var(--mkt-violet); }
.bg-mkt-green { background-color: var(--mkt-indigo); }
.bg-mkt-gold { background-color: var(--mkt-gold); }
.bg-mkt-indigo { background-color: var(--mkt-indigo); }

/* Gradient text utility */
.text-gradient-indigo {
    background: linear-gradient(135deg, #6366F1, #A78BFA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* -- Marketing Container -------------------------------------------------- */
.mkt-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.mkt-container-narrow {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* -- Trust Badge / Glass Pill --------------------------------------------- */
.mkt-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mkt-trust-pill--light {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
    color: #0F172A;
}

.mkt-trust-pill .mkt-trust-icon {
    color: var(--mkt-gold);
    font-size: 16px;
}

/* -- Wave Dividers -------------------------------------------------------- */
.mkt-wave-dark-to-light {
    display: block;
    width: 100%;
    line-height: 0;
}

.mkt-wave-light-to-dark {
    display: block;
    width: 100%;
    line-height: 0;
}

/* -- Marketing Card ------------------------------------------------------- */
.mkt-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mkt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.08);
}

.mkt-card--dark {
    background: var(--mkt-navy-deep);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    box-shadow: 0 16px 48px rgba(30, 27, 75, 0.18);
}

.mkt-card--dark:hover {
    box-shadow: 0 20px 56px rgba(99, 102, 241, 0.22);
}

/* -- Feature Icon Circle -------------------------------------------------- */
.mkt-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.mkt-icon-circle--green {
    background: rgba(99, 102, 241, 0.08);
    color: var(--mkt-indigo);
}

.mkt-icon-circle--gold {
    background: rgba(245, 158, 11, 0.1);
    color: var(--mkt-gold);
}

.mkt-icon-circle--blue {
    background: rgba(59, 130, 246, 0.08);
    color: #3B82F6;
}

.mkt-icon-circle--dark-green {
    background: rgba(99, 102, 241, 0.06);
    color: var(--mkt-indigo-bright);
}

/* -- Step Number ---------------------------------------------------------- */
.mkt-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    background: var(--mkt-indigo);
    color: #fff;
}

/* -- CTA Gradient Section -------------------------------------------------
   Muted navy-indigo gradient matching the Dashboard dark-mode palette so
   the CTA reads as premium bookend rather than a hot full-saturation slab. */
.mkt-cta-gradient {
    background: linear-gradient(135deg, var(--mkt-navy-deep) 0%, var(--mkt-navy-mid) 60%, var(--mkt-navy) 100%);
    color: #fff;
}

/* -- Pricing Card --------------------------------------------------------- */
.mkt-pricing-card {
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid #E2E8F0;
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mkt-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.10);
}

.mkt-pricing-card--featured {
    border-color: var(--mkt-indigo);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.12);
    position: relative;
}

.mkt-pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mkt-indigo);
    color: #fff;
    padding: 4px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* -- Marketing hero watermark icon --------------------------------------- */
/* Oversized outlined Material icon as a soft watermark behind a centered
   hero heading. Apply to the hero <section> in two parts:
     1. Add class `mkt-hero-watermark` on the section (gives it
        position:relative + overflow:hidden so the icon anchors and any
        overflow gets clipped cleanly).
     2. Add a child `<div class="mkt-hero-watermark-icon"><q-icon name="…" /></div>`
        BEFORE the hero's text container.
   The hero's text container needs `position:relative; z-index:1;` so the
   text sits above the watermark.
   Each page picks an outlined icon (`lock_outline`, `person_outline`,
   `description`, etc.) and can override the tint with an inline color on
   the <q-icon>. */
.mkt-hero-watermark { position: relative; overflow: hidden; }
.mkt-hero-watermark-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}
.mkt-hero-watermark-icon .q-icon {
    /* Sized to fit a typical hero (~400-500px) without overflow:hidden
       cropping the icon's silhouette. */
    font-size: clamp(10rem, 22vw, 18rem);
    line-height: 1;
    color: #6366F1;
    opacity: 0.10;
    transform: translateY(-4%);
    /* Soft radial fade so the silhouette dissolves at the perimeter
       rather than cutting off as a hard shape. */
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 95%);
            mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 95%);
}

/* Right-shifted variant — pairs nicely with a swoosh or other accent on
   the left half. The icon hugs the right edge instead of centering. */
.mkt-hero-watermark-icon--right {
    justify-content: flex-end;
    padding-right: 4%;
}

/* The hero ambient washes live on `.mkt-hero-light` itself (stacked
   radial gradients in its `background` property, plus its own ::before
   and ::after orbs). Don't add another pseudo-element here — both
   classes target the same <section>, so the rules would clobber each
   other instead of layering. */

/* Hide any leftover per-page SVG arc/swoosh blocks from earlier
   iterations. Templates can be cleaned up in a follow-up pass. */
.mkt-hero-arcs { display: none; }

@media (max-width: 767px) {
    /* On phones the swoosh + right-icon arrangement looks crowded behind
       the centered text. Keep the watermark icon centered and hide the
       swoosh to recover breathing room. */
    .mkt-hero-watermark-icon--right { justify-content: center; padding-right: 0; }
    .mkt-hero-swoosh { display: none; }
}

/* -- Marketing hero CTA row ---------------------------------------------- */
/* Adds breathing room above the primary/secondary CTA pair at the bottom
   of a hero, plus an elevated shadow on the buttons so they pop off the
   light hero background. The outline (secondary) variant gets a softer
   shadow so the primary button keeps visual priority. */
.mkt-hero-cta-row {
    margin-top: 32px;
}
.mkt-hero-cta-row .q-btn {
    box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.32),
                0 2px 6px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.mkt-hero-cta-row .q-btn:hover {
    box-shadow: 0 10px 26px -6px rgba(99, 102, 241, 0.45),
                0 4px 10px rgba(15, 23, 42, 0.10);
    transform: translateY(-1px);
}
.mkt-hero-cta-row .q-btn--outline,
.mkt-hero-cta-row .q-btn--flat {
    box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.10);
}
.mkt-hero-cta-row .q-btn--outline:hover,
.mkt-hero-cta-row .q-btn--flat:hover {
    box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.16);
}

/* Trust-pill row sitting at the bottom of a hero — same top breathing
   room + a subtle drop shadow so the pills lift off the background. */
.mkt-hero-pills-row {
    margin-top: 32px;
}
.mkt-hero-pills-row .mkt-trust-pill {
    box-shadow: 0 3px 10px -2px rgba(15, 23, 42, 0.10),
                0 1px 2px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.mkt-hero-pills-row .mkt-trust-pill:hover {
    box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.16),
                0 2px 4px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

/* -- Marketing feature-showcase tab transition --------------------------- */
/* Animates the panel swap in the "Everything you need to get documents
   signed" section on the home page. `mode="out-in"` on the <transition>
   means the leaving panel finishes its fade before the entering panel
   begins, so they never overlap visually. Slight upward translate gives
   the swap a bit of motion — distinct enough to feel intentional, fast
   enough to stay responsive (200ms each direction). */
.mkt-tab-fade-enter-active,
.mkt-tab-fade-leave-active {
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.mkt-tab-fade-enter-from {
    opacity: 0;
    transform: translateY(8px);
}
.mkt-tab-fade-leave-to {
    opacity: 0;
    transform: translateY(-6px);
}

/* -- Marketing AI tie-in pill (hero) ------------------------------------- */
/* Pop above the headline. Indigo→violet gradient with a moving shimmer band
   so the eye snaps to it. The sparkle icon underscores the AI angle. The
   inner <strong> gets brighter to draw attention to "Driveable by AI." */
.mkt-ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(120deg, #4338CA 0%, #6366F1 40%, #8B5CF6 70%, #A855F7 100%);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px -8px rgba(99, 102, 241, 0.55),
                0 1px 3px rgba(15, 23, 42, 0.08);
}
.mkt-ai-pill strong {
    color: #FFFFFF;
    font-weight: 700;
}
.mkt-ai-pill-icon {
    color: #FDE68A;
    font-size: 16px;
    filter: drop-shadow(0 0 6px rgba(253, 230, 138, 0.6));
}
/* Shimmer band sweeping across the pill. Slow + subtle so it reads as
   "AI-alive" rather than gimmicky. */
.mkt-ai-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: mkt-ai-pill-shimmer 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mkt-ai-pill-shimmer {
    0%   { left: -100%; }
    50%  { left: 200%; }
    100% { left: 200%; }
}

/* -- Marketing hero feature-highlight rotator ---------------------------- */
/* The right-side hero element. 4 cards sharing a fixed-height stage; only
   one is fade-visible at a time. Absolute positioning on every card means
   the stage height is locked — switching cards never reflows the page or
   shifts the columns underneath. */
.mkt-hero-carousel {
    position: relative;
    padding: 8px;
}
.mkt-hero-stage {
    position: relative;
    /* Locked to a height that comfortably fits the longest card body. If a
       new card overflows this, raise this one number rather than letting
       cards autosize and jitter on swap. */
    height: 360px;
}
.mkt-hero-card {
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px -16px rgba(15, 23, 42, 0.16),
                0 4px 12px -4px rgba(15, 23, 42, 0.05);
    /* Top accent bar uses the active card's --accent color, set inline. */
    border-top: 4px solid var(--accent, #6366F1);
    /* All cards stacked; only the active one is visible. Cross-fade. */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.45s ease;
    pointer-events: none;
}
.mkt-hero-card--active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.mkt-hero-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 5px 12px;
    background: color-mix(in srgb, var(--accent) 12%, white);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.mkt-hero-card-stat {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
}
.mkt-hero-card-statlabel {
    font-size: 0.95rem;
    color: #64748B;
    font-weight: 500;
    line-height: 1.2;
    padding-bottom: 6px;
}
.mkt-hero-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 8px;
}
.mkt-hero-card-body {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #475569;
    margin: 0;
    flex: 1; /* push the anchor row to the bottom of the card */
}
.mkt-hero-card-anchor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 14px;
    padding: 7px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0F172A;
}
.mkt-hero-card-anchor .q-icon { color: var(--accent); }

/* Caption + dot indicators below the stage. Sits outside the stage so it
   doesn't compete with the card content for height budget. */
.mkt-hero-mockcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 4px;
}
.mkt-hero-dots {
    display: flex;
    gap: 0;
}
/* Hit target is 24×24 (WCAG 2.5.8 target-size), but the visible dot stays
   6×6 via a centered ::before. Active state widens the visible dot to 18px
   while the hit target remains the same. */
.mkt-hero-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mkt-hero-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CBD5E1;
    transition: background 0.2s ease, width 0.2s ease;
}
.mkt-hero-dot:hover::before { background: #94A3B8; }
.mkt-hero-dot--active::before {
    background: #4F46E5;
    width: 18px;
    border-radius: 999px;
}

/* Narrower viewports — let the card breathe a bit shorter. */
@media (max-width: 1023px) {
    .mkt-hero-stage { height: 380px; }
    .mkt-hero-card-stat { font-size: 2.8rem; }
}

/* -- Marketing fake-UI mockup frames -------------------------------------- */
/* Per-category stylized previews on Features.vue and Security.vue that
   replace the old "Product screenshot" placeholder boxes. Browser-chrome
   look on top; per-mock content beneath. All mocks share the same outer
   frame so heights and shadows align. */
.mkt-mockup-frame {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 48px -16px rgba(15, 23, 42, 0.18),
                0 4px 12px -4px rgba(15, 23, 42, 0.06);
}
.mkt-mockup-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}
.mkt-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.mkt-mockup-url {
    margin-left: 12px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.72rem;
    color: #64748B;
}
.mkt-mockup-body {
    padding: 20px 22px;
    min-height: 240px;
}

/* Image variant — fills the mockup frame edge-to-edge with no inner padding.
   Used when the right-side preview is an illustrative artwork (e.g. the
   identity-verification illustration on Features.vue) rather than a fake-UI
   mockup. The illustration's own background blends into the page. */
.mkt-mockup-image {
    display: block;
    width: 100%;
    line-height: 0;
}
.mkt-mockup-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Faux text lines (used in Send & Sign) */
.mkt-mockup-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mkt-mockup-line {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 100%);
    margin-bottom: 8px;
}
.mkt-mockup-sigfield {
    border: 2px dashed #C7D2FE;
    border-radius: 8px;
    padding: 12px 14px;
    background: #EEF2FF;
}
.mkt-mockup-sigcaption {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6366F1;
    font-weight: 600;
    margin-bottom: 4px;
}
.mkt-mockup-sigink {
    font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
    font-size: 1.4rem;
    color: #1E293B;
}

/* Templates rows */
.mkt-mockup-template-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
}
.mkt-mockup-template-row:last-child { border-bottom: 0; }

/* Auth method rows */
.mkt-mockup-auth-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    margin-bottom: 6px;
    background: #FFFFFF;
}
.mkt-mockup-auth-row--selected {
    border-color: #6366F1;
    background: #EEF2FF;
}

/* Team rows */
.mkt-mockup-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.mkt-mockup-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Payment row */
.mkt-mockup-payrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
}

/* Branding mock */
.mkt-mockup-logo-tile {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #EEF2FF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mkt-mockup-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
.mkt-mockup-emailpreview {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #F8FAFC;
}

/* Audit timeline */
.mkt-mockup-audit-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #F1F5F9;
}
.mkt-mockup-audit-row:last-child { border-bottom: 0; }
.mkt-mockup-audit-time {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    color: #64748B;
    width: 44px;
    flex-shrink: 0;
}
.mkt-mockup-audit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.mkt-mockup-hashbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #0F172A;
    color: #86EFAC;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
}

/* Encryption mock — cipher rows + bit cells */
.mkt-mockup-cipher {
    background: #0F172A;
    border-radius: 8px;
    padding: 12px;
    font-family: ui-monospace, monospace;
}
.mkt-mockup-cipher-row {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}
.mkt-mockup-cipher-row:last-child { margin-bottom: 0; }
.mkt-mockup-cipher-bit {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: #86EFAC;
    flex-shrink: 0;
}

/* Infrastructure mock — region pills + uptime bars */
.mkt-mockup-region {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #F8FAFC;
}
.mkt-mockup-uptime {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 28px;
}
.mkt-mockup-uptime-bar {
    flex: 1;
    height: 100%;
    border-radius: 2px;
    min-width: 4px;
}

/* Signer auth mock — OTP boxes */
.mkt-mockup-otp-box {
    width: 38px;
    height: 44px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0a0f1a;
    font-family: ui-monospace, monospace;
}
.mkt-mockup-otp-box--filled {
    border-color: #6366F1;
    background: #EEF2FF;
    color: #4338CA;
}

/* Audit mock — hash chain blocks */
.mkt-mockup-chain {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mkt-mockup-chain-block {
    border: 1px solid #E2E8F0;
    border-left: 3px solid #6366F1;
    border-radius: 8px;
    padding: 8px 12px;
    background: #F8FAFC;
    position: relative;
}
.mkt-mockup-chain-block::before {
    content: '';
    position: absolute;
    left: 18px;
    top: -8px;
    height: 8px;
    width: 1px;
    background: #CBD5E1;
}
.mkt-mockup-chain-block:first-child::before { display: none; }
.mkt-mockup-chain-num {
    font-size: 0.62rem;
    font-weight: 700;
    color: #6366F1;
    letter-spacing: 0.5px;
}
.mkt-mockup-chain-event {
    font-size: 0.78rem;
    color: #0a0f1a;
    font-weight: 500;
}
.mkt-mockup-chain-hash {
    font-family: ui-monospace, monospace;
    font-size: 0.65rem;
    color: #94A3B8;
}

/* -- Marketing trust-logo strip (grayscale partner row, hover to color) -- */
/* The logos are icon+wordmark composites — saturated on hover so the page
   has subtle motion as the user reads the strip. */
.mkt-trust-strip .mkt-trust-logo {
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s ease, opacity 0.2s ease;
    color: #475569;
}
.mkt-trust-strip .mkt-trust-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    color: #0F172A;
}

/* -- Marketing numbered step tile (Index "How it works") ----------------- */
/* The big translucent 01/02/03 ribbon sits behind the title row. Counter
   styling reads as a magazine layout, not a tutorial step. */
.mkt-step-tile {
    position: relative;
    height: 100%;
    padding: 28px 24px 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    border: 1px solid #E2E8F0;
    overflow: hidden;
}
.mkt-step-ribbon {
    position: absolute;
    top: -10px;
    right: 12px;
    font-size: 5.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.18;
    pointer-events: none;
}

/* -- Marketing feature list (q-list/q-item tightened for card bullets) ---- */
/* Drop default q-item padding so bullet rows stack tightly inside cards.
   `avatar top` on the icon section pins the check icon to the first line
   of multi-line text rather than vertical-centering it (which looks wrong
   for long-wrap items like "18 field types: signature, initials, ..."). */
.mkt-feature-list .q-item {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 0;
}
.mkt-feature-list .q-item__section--avatar {
    min-width: 28px;
    padding-right: 0;
}

/* -- Comparison Table ----------------------------------------------------- */
.mkt-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.mkt-comparison-table th,
.mkt-comparison-table td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid #E2E8F0;
    font-size: 14px;
}

.mkt-comparison-table th:first-child,
.mkt-comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.mkt-comparison-table thead th {
    font-weight: 700;
    color: var(--mkt-navy-deep);
    border-bottom: 2px solid #CBD5E1;
}

/* -- Code Block (Developers page) ----------------------------------------- */
.mkt-code-block {
    background: var(--mkt-navy-deep);
    border-radius: 12px;
    padding: 24px;
    overflow-x: auto;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #E2E8F0;
}

.mkt-code-block .code-keyword { color: #C4B5FD; }
.mkt-code-block .code-string { color: #86EFAC; }
.mkt-code-block .code-comment { color: #64748B; }
.mkt-code-block .code-method { color: #93C5FD; }
.mkt-code-block .code-url { color: #FCA5A5; }

/* -- Floating Animation --------------------------------------------------- */
@keyframes mkt-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.mkt-float { animation: mkt-float 3s ease-in-out infinite; }
.mkt-float-delay { animation: mkt-float 3s ease-in-out 1.5s infinite; }

/* -- Fade In Animation ---------------------------------------------------- */
@keyframes mkt-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.mkt-fade-up {
    animation: mkt-fade-up 0.6s ease-out forwards;
}

/* -- Marketing Responsive ------------------------------------------------- */
@media (max-width: 768px) {
    .mkt-container { padding: 0 16px; }
    .mkt-hide-mobile { display: none !important; }
    .mkt-pricing-card { padding: 24px 16px; }
}

@media (max-width: 480px) {
    .mkt-trust-pill { font-size: 11px; padding: 6px 12px; }
}

/* -- Date/Time Display --------------------------------------------------- */
.dt-secondary {
    display: block;
    font-size: 0.82em;
    color: #94A3B8;
    font-weight: normal;
}

/* -- Reveal-on-scroll animations ----------------------------------------- */
/* Lightweight scroll-reveal classes paired with Quasar's v-intersection
   directive. The marketing-page mixin (`src/Util/reveal.js`) toggles
   `.is-revealed` on the bound element when it scrolls into view.

   Pick a flavor per section for tasteful variety:
     reveal-fade-up    — content rises into place (most common)
     reveal-fade-in    — pure opacity fade (subtlest)
     reveal-fade-left  — slides in from the left
     reveal-fade-right — slides in from the right
     reveal-scale      — gentle scale-up (good for cards / mockups)

   Optional stagger modifiers on siblings: `.reveal-delay-1` through `-4`
   (60ms increments). Honors prefers-reduced-motion. */

.reveal-fade-up,
.reveal-fade-in,
.reveal-fade-left,
.reveal-fade-right,
.reveal-scale {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-fade-up    { transform: translate3d(0, 56px, 0); }
.reveal-fade-left  { transform: translate3d(-72px, 0, 0); }
.reveal-fade-right { transform: translate3d(72px, 0, 0); }
.reveal-scale      { transform: scale(0.9); }

.reveal-fade-up.is-revealed,
.reveal-fade-in.is-revealed,
.reveal-fade-left.is-revealed,
.reveal-fade-right.is-revealed,
.reveal-scale.is-revealed {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal-fade-up,
    .reveal-fade-in,
    .reveal-fade-left,
    .reveal-fade-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Embedded signing — Focused View (Phase 2c)

   Triggered by `body.signing-display-focused` class added in
   src/services/ceremonyDisplayMode.js when the iframe URL fragment carries
   `#display=focused`. Hides the Quasar layout chrome (header + drawers) so
   only the document viewer + sticky action bar render. Customer's iframe
   container controls the outer dimensions.

   Style overrides via `--signing-primary-bg` / `--signing-primary-fg` are
   defined as CSS variables here with the brand defaults; fragment-supplied
   overrides (regex-validated) get applied as inline custom properties on
   the :root element by ceremonyDisplayMode.js.

   The eSign Launchpad attribution footer is INTENTIONALLY non-overridable
   in v1 (phishing protection per plan B4). Don't add a class here that
   hides it.
   ────────────────────────────────────────────────────────────────────── */

:root {
    --signing-primary-bg: #1e40af;
    --signing-primary-fg: #ffffff;
}

/* Hide the Classic-mode q-header (logo + branding bar) but NOT the
   .focused-signer-header (the in-iframe "Signing as" identity strip we
   render only in Focused mode). The :not() pin keeps the new identity
   bar visible while still suppressing the Classic chrome. */
body.signing-display-focused .signing-ceremony .q-header:not(.focused-signer-header),
body.signing-display-focused .signing-ceremony .q-drawer,
body.signing-display-focused .signing-ceremony .q-drawer__backdrop,
body.signing-display-focused .signing-ceremony .q-drawer__opener {
    display: none !important;
}

/* Belt + suspenders: in narrow viewports (which embedded iframes typically
   are) Quasar switches the layout drawer into "mobile" mode. The drawer
   itself is hidden by the rule above, but `.q-drawer-container` holds an
   `.q-drawer__backdrop` SIBLING (NOT a child of `.q-drawer`) that paints a
   semi-transparent black `rgba(0,0,0,0.4)` overlay across the entire iframe
   viewport whenever the drawer is logically "open". This was the
   mysterious "gray overlay" — the backdrop was being drawn even though
   the drawer it backed was display:none'd. Hide both for a clean embed. */
body.signing-display-focused .signing-ceremony .q-drawer-container {
    pointer-events: none;
}

/* Strip the header/drawer padding contributions but PRESERVE
   `padding-bottom` so the fixed `<q-footer>` action bar (Start / Complete /
   Decline) doesn't overlay the document content underneath. Quasar sets
   padding-bottom to the footer's height dynamically; using `padding: 0
   !important` clobbered that and left the footer overlapping content. */
body.signing-display-focused .signing-ceremony .q-page-container {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Focused mode: drop the 100vh min-heights that would otherwise create an
   autoResize feedback loop. Inside an iframe, `100vh` resolves to the
   iframe's current height. As autoResize grows the iframe, `100vh` grows,
   any element with `min-height: 100vh` grows, scrollHeight grows, the
   resize observer fires again, the iframe grows again — continuing until
   the SDK's max-height clamp (default 4000px). The cure is to NOT pin
   layout containers to viewport height in embed mode; let them size to
   their natural content.

   IMPORTANT: do NOT include `.signing-ceremony .q-page` here. The signing
   screen's `.ceremony-page` (q-page) deliberately uses `height: 1px` plus
   Quasar's inline `min-height: calc(100vh - chrome)` to give the PDF
   scroll-area a definite sizing boundary. Crushing the min-height to 0
   collapses the page back to 1px and the document viewer disappears.

   The auth/consent screens (`.consent-page`) are flex-centered cards with
   no height-dependent children — they're free to shrink to natural content.
   That's where the feedback loop originated and that's the only place we
   need the override.

   This affects:
     .q-layout      our own override below (was min-height: 100vh)
     .consent-page  scoped style in Ceremony.vue (only on consent screen) */
body.signing-display-focused .q-layout,
body.signing-display-focused .consent-page {
    min-height: 0 !important;
}

/* Critical: Quasar's base CSS sets `body { min-height: 100% }` which inside an
   iframe ties body to html, and html in turn fills the iframe viewport. The
   net effect: body.scrollHeight ≥ iframe.height always, which makes the
   autoResize handler's measurement (which uses body.scrollHeight) lock the
   iframe at its current size — it can ratchet up but never shrink back down
   to the natural content size. Setting `min-height: 0` here lets body
   collapse to its actual content height, which is what we want autoResize
   to report.

   This is the ROOT cause of the post-KBA-failure runaway: a transient
   scrollHeight bump during the v-if/v-else swap to the failure screen
   pushed the iframe up; without this rule, body could never report a
   smaller value once the failure screen settled. */
body.signing-display-focused {
    min-height: 0 !important;
}

/* Strip the Classic-mode gray page background. In Classic, .signing-ceremony
   uses #f5f5f5 to create visual separation between the document card and the
   surrounding header/sidebar chrome. In Focused (embedded in an iframe), the
   customer's parent app + iframe container already provide that separation —
   our gray then bleeds into the whole iframe interior, washing the document
   white into a perceived "gray overlay." Transparent lets whatever the
   customer wraps the iframe in (or the iframe's own white default) show
   through. */
body.signing-display-focused .signing-ceremony {
    background-color: transparent !important;
}