/* ==========================================================================
   Marketing site — layers on top of app.css's design tokens.
   ========================================================================== */

.mkt-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    padding: 14px 0;
    transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out);
}
.mkt-nav.is-scrolled {
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 1px 0 rgba(11,14,20,0.06);
}
.mkt-nav a.brand { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--ink); }
.mkt-nav .nav-link-mkt { font-weight: 600; font-size: 0.94rem; color: var(--ink-soft); padding: 0.4rem 0.85rem; }
.mkt-nav .nav-link-mkt:hover { color: var(--indigo); }

/* FIX: the nav bar row was wrapping onto two lines (links row, then
   buttons row) on viewports right around the lg breakpoint, so the
   second row visually overlapped the hero content below it. The markup
   already uses d-flex + justify-content-between, but nothing stopped the
   three flex children (brand / links / auth buttons) from wrapping when
   they didn't quite fit, and nothing shrank the link labels first.
   Force a single row, and let the nav-links group shrink/truncate before
   it wraps. */
.mkt-nav .container {
    flex-wrap: nowrap;
}
.mkt-nav .container > .d-lg-flex,
.mkt-nav .container > .d-none.d-lg-flex {
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
}
.mkt-nav .container > .d-flex:last-child {
    flex-shrink: 0;
}
.mkt-nav .brand {
    flex-shrink: 0;
}

/* ---- Hero ---- */

.mkt-hero {
    padding: 168px 0 96px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(560px 420px at 82% -8%, rgba(139,92,246,0.14), transparent 60%),
        radial-gradient(480px 380px at 100% 30%, rgba(79,70,229,0.10), transparent 60%);
}

.mkt-hero h1 {
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    max-width: 12ch;
}

.mkt-hero .lede {
    font-size: 1.14rem;
    color: var(--ink-soft);
    max-width: 46ch;
    line-height: 1.55;
}

.mkt-hero-visual {
    position: relative;
    perspective: 1400px;
    /* FIX: was opacity:0 by default and only ever revealed by the
       .js-ready animation rule further down. If app.js errors, loads
       late, or never runs, this entire block (the invoice mockup +
       floating chips) stayed permanently invisible — which is what was
       happening on the live page. Visible by default now; the
       .js-ready rule below still animates it in when JS *does* run. */
    opacity: 1;
}

.hero-stage {
    position: relative;
    border-radius: var(--radius-stage);
    background: var(--gradient-ink);
    box-shadow: var(--shadow-lg);
    padding: 34px;
    transform: rotateY(-8deg) rotateX(4deg);
    transform-style: preserve-3d;
    transition: transform 500ms var(--ease-out);
    /* FIX: contain the rotated stage + its overflowing floating chips so
       they can't push the page wider than the viewport. */
    max-width: 100%;
}

.invoice-mock {
    background: var(--surface);
    border-radius: 16px;
    padding: 22px 22px 18px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.35);
    transform: translateZ(40px);
}
.invoice-mock .imk-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.invoice-mock .imk-brand { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; }
.invoice-mock .imk-badge { font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(16,177,124,0.12); color: #0a7d59; }
.invoice-mock .imk-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--slate-100); font-size: 0.82rem; }
.invoice-mock .imk-row:last-of-type { border-bottom: none; }
.invoice-mock .imk-total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--ink); font-weight: 800; font-size: 1.05rem; }

.float-chip {
    position: absolute;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateZ(70px);
}
.float-chip.chip-payment { bottom: -22px; left: -34px; }
.float-chip.chip-growth { top: 10%; right: -38px; }
.float-chip .chip-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-brand); color: #fff; font-size: 1rem;
}
.float-chip .chip-label { font-size: 0.72rem; color: var(--slate); font-weight: 600; }
.float-chip .chip-value { font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; }

/* Hero entrance: one orchestrated staggered sequence, load-triggered only */
.hero-anim { opacity: 0; transform: translateY(22px); }
.js-ready .hero-anim {
    animation: heroIn var(--dur-slow) var(--ease-out) forwards;
}
.js-ready .hero-anim:nth-child(1) { animation-delay: 40ms; }
.js-ready .hero-anim:nth-child(2) { animation-delay: 140ms; }
.js-ready .hero-anim:nth-child(3) { animation-delay: 240ms; }
/* FIX: .mkt-hero-visual now defaults to opacity:1 (see above). When JS
   *does* run, re-apply the entrance animation from a hidden start state
   via the animation's own "from" keyframe instead of a separate
   always-on opacity:0 rule, so there's no window where JS-off users see
   nothing. */
.js-ready .mkt-hero-visual {
    animation: heroInScale 760ms var(--ease-out) 200ms forwards;
}

@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
@keyframes heroInScale { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Safety net: no-JS / reduced-motion / JS failure never leaves content hidden */
.no-js .hero-anim,
.no-js .mkt-hero-visual,
noscript .hero-anim {
    opacity: 1 !important;
    transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .hero-anim, .mkt-hero-visual {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ---- Logo / trust strip ---- */
.trust-strip { padding: 30px 0; border-top: 1px solid var(--slate-100); border-bottom: 1px solid var(--slate-100); }
.trust-strip .trust-label { font-size: 0.78rem; color: var(--slate); font-weight: 600; }

/* ---- Feature rows (alternating) ---- */

.feature-row { padding: 88px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--slate-100); }
.feature-visual {
    border-radius: var(--radius-card);
    background: var(--surface-alt);
    border: 1px solid var(--slate-100);
    padding: 28px;
    min-height: 320px;
    display: flex; align-items: center; justify-content: center;
}
.feature-row h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); max-width: 14ch; }
.feature-row p { max-width: 44ch; font-size: 1.02rem; line-height: 1.6; }
.feature-check-list { list-style: none; padding: 0; margin: 20px 0 0; }
.feature-check-list li { display: flex; gap: 10px; padding: 7px 0; font-size: 0.95rem; color: var(--ink-soft); }
.feature-check-list li svg { flex-shrink: 0; color: var(--indigo); margin-top: 2px; }

/* mini bar chart used inside a feature visual */
.mini-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; width: 100%; }
.mini-chart .bar { flex: 1; background: var(--slate-200); border-radius: 6px 6px 0 0; position: relative; }
.mini-chart .bar.bar-accent { background: var(--gradient-brand); }

/* ---- Stat band (dark) ---- */

.stat-band { background: var(--gradient-ink); color: #fff; padding: 76px 0; }
.stat-band .stat-big { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-band .stat-cap { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-top: 6px; }

/* ---- How it works (real sequence — numbering earned) ---- */

.steps-strip { padding: 96px 0; }
.step-card { position: relative; padding: 28px 4px 0; }
.step-num {
    font-size: 0.82rem; font-weight: 800; color: var(--indigo);
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(79,70,229,0.09);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.step-card h3 { font-size: 1.15rem; }
.step-card p { font-size: 0.94rem; color: var(--slate); }

/* ---- Pricing ---- */

.pricing-section { padding: 96px 0; background: var(--surface-alt); }
.price-card {
    background: var(--surface);
    border-radius: var(--radius-card);
    border: 1.5px solid var(--slate-100);
    padding: 30px 26px;
    height: 100%;
    transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card.is-featured {
    border-color: transparent;
    background: var(--gradient-ink);
    color: #fff;
    box-shadow: var(--shadow-lg);
    transform: scale(1.03);
}
.price-card.is-featured .text-muted { color: rgba(255,255,255,0.62) !important; }
.price-card .price-amount { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; }
.price-card .price-plan { font-weight: 700; font-size: 0.98rem; }

/* ---- CTA band ---- */

.cta-band {
    margin: 40px auto 96px;
    max-width: 1100px;
    border-radius: var(--radius-stage);
    background: var(--gradient-brand);
    color: #fff;
    padding: 68px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(500px 260px at 20% 0%, rgba(255,255,255,0.18), transparent 60%);
}

/* ---- Footer ---- */
.mkt-footer { padding: 56px 0 40px; border-top: 1px solid var(--slate-100); }
.mkt-footer .foot-col-title { font-size: 0.8rem; font-weight: 700; color: var(--slate); margin-bottom: 12px; }
.mkt-footer a.foot-link { display: block; font-size: 0.92rem; color: var(--ink-soft); padding: 5px 0; }
.mkt-footer a.foot-link:hover { color: var(--indigo); }

@media (max-width: 991px) {
    .mkt-hero { padding: 128px 0 64px; text-align: center; }
    .mkt-hero .lede { margin-left: auto; margin-right: auto; }
    .hero-stage { transform: none; margin-top: 48px; }
    .price-card.is-featured { transform: none; }
    .float-chip.chip-growth { right: 4px; top: -18px; }
    .float-chip.chip-payment { left: 4px; bottom: -18px; }

    /* FIX: below lg, the nav's link group is hidden by Bootstrap's
       d-none, so let the remaining two children (brand, auth buttons)
       space out normally without the nowrap/shrink rules meant for the
       wider layout. */
    .mkt-nav .container {
        flex-wrap: nowrap;
    }
}