/* ==========================================================================
   The Smart Investor Tool - public landing page
   --------------------------------------------------------------------------
   Stylesheet of its own for the landing page. Only home.html loads it, so
   nothing in here reaches the application.

   Everything hangs off .landing-page and uses hardcoded colours instead of the
   theme variables: the landing page always stays light, even if the visitor
   left the application in dark mode, which is what config.js keeps in
   localStorage.
   ========================================================================== */

.landing-page {
    /* Brand */
    --ln-brand: #1ab394;
    --ln-brand-dark: #12907a;
    --ln-brand-soft: #e9f8f4;

    /* Text */
    --ln-ink: #0f1c2e;
    --ln-body: #5a6b80;
    --ln-muted: #8a99ab;

    /* Surfaces */
    --ln-surface: #ffffff;
    --ln-surface-alt: #f6f9fb;
    --ln-border: #e4eaf0;

    /* Depth */
    --ln-shadow-sm: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 12px rgba(15, 28, 46, .05);
    --ln-shadow-md: 0 2px 4px rgba(15, 28, 46, .04), 0 12px 32px rgba(15, 28, 46, .09);
    --ln-shadow-lg: 0 4px 8px rgba(15, 28, 46, .05), 0 24px 60px rgba(15, 28, 46, .13);

    --ln-radius: 18px;
    --ln-radius-lg: 26px;

    background-color: var(--ln-surface);
    color: var(--ln-body);
    font-family: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* The application's dark theme must not reach the landing page */
html[data-bs-theme="dark"] .landing-page,
html[data-bs-theme="dark"] .landing-page .card {
    background-color: var(--ln-surface);
    color: var(--ln-body);
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5 {
    color: var(--ln-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

.landing-page p {
    color: var(--ln-body);
    line-height: 1.65;
}

.landing-page a {
    text-decoration: none;
}

.landing-page section {
    padding: 5.5rem 0;
}

/* Inspinia 4.2 inflates Bootstrap's gutter scale: g-5 is 60px instead of 48,
   so the row's negative margin exceeded the container padding and the columns
   ran off screen on mobile. The gutter is pinned to a known value and the
   container follows it. Note the theme renames Bootstrap's variables, so the
   one that counts is --ins-gutter-x, not --bs-gutter-x. */
.landing-page .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.landing-page .row {
    --ins-gutter-x: 3rem;
}

.landing-page .row.g-4 {
    --ins-gutter-x: 1.5rem;
}

.landing-page .section-alt {
    background-color: var(--ln-surface-alt);
}

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.ln-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ln-brand);
    margin-bottom: .75rem;
}

.ln-section-title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: .75rem;
}

.ln-section-lead {
    font-size: 1.0625rem;
    max-width: 40rem;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.landing-page .ln-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8125rem 1.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9375rem;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.landing-page .ln-btn-primary {
    background-color: var(--ln-brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(26, 179, 148, .32);
}

.landing-page .ln-btn-primary:hover {
    background-color: var(--ln-brand-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(26, 179, 148, .38);
}

.landing-page .ln-btn-ghost {
    background-color: #fff;
    color: var(--ln-ink);
    border-color: var(--ln-border);
}

.landing-page .ln-btn-ghost:hover {
    border-color: var(--ln-brand);
    color: var(--ln-brand-dark);
    transform: translateY(-1px);
}

.landing-page .ln-btn-sm {
    padding: .5rem 1.125rem;
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   Promotion bar
   --------------------------------------------------------------------------
   Only rendered when a promotion is active, so there is no need to hide it
   from CSS. */
.ln-promo-bar {
    background: linear-gradient(90deg, var(--ln-brand-dark), var(--ln-brand));
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    padding: .625rem 1rem;
    text-align: center;
    position: relative;
    z-index: 1040;
}

.ln-promo-bar strong {
    font-weight: 700;
}

.ln-promo-code {
    display: inline-block;
    background-color: rgba(255, 255, 255, .18);
    border: 1px dashed rgba(255, 255, 255, .55);
    border-radius: 6px;
    padding: .0625rem .5rem;
    margin: 0 .125rem;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .04em;
}

.ln-promo-bar a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: .375rem;
}

/* --------------------------------------------------------------------------
   Navigation bar
   -------------------------------------------------------------------------- */
.landing-page #tsit-landing-nav {
    background-color: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    padding: .75rem 0;
    transition: border-color .2s ease, box-shadow .2s ease, padding .2s ease;
}

/* Class added by home.html's JS once the page scrolls past 300px */
.landing-page #tsit-landing-nav.navbar-scroll {
    border-bottom-color: var(--ln-border);
    box-shadow: 0 2px 16px rgba(15, 28, 46, .06);
    padding: .5rem 0;
}

.landing-page .ln-logo {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ln-ink);
    letter-spacing: -.01em;
}

.landing-page .ln-logo img {
    height: 34px;
    width: auto;
}

.landing-page #tsit-landing-nav .nav-link {
    color: var(--ln-body);
    font-weight: 500;
    font-size: .9375rem;
    padding: .5rem .875rem;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}

.landing-page #tsit-landing-nav .nav-link:hover {
    color: var(--ln-ink);
    background-color: var(--ln-surface-alt);
}

.landing-page .navbar-toggler {
    border: 1px solid var(--ln-border);
    border-radius: 10px;
    padding: .375rem .625rem;
    color: var(--ln-ink);
}

.landing-page .navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--ln-brand-soft);
}

.landing-page .ln-nav-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ln-hero {
    padding: 4.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 480px at 78% -8%, rgba(26, 179, 148, .13), transparent 62%),
        radial-gradient(760px 420px at 8% 8%, rgba(59, 130, 246, .08), transparent 60%),
        var(--ln-surface);
}

.ln-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background-color: var(--ln-brand-soft);
    color: var(--ln-brand-dark);
    border: 1px solid rgba(26, 179, 148, .22);
    border-radius: 999px;
    padding: .375rem .875rem;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ln-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.08;
    margin-bottom: 1.25rem;
}

.ln-hero h1 .ln-accent {
    background: linear-gradient(120deg, var(--ln-brand), #0ea5a0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ln-brand);
}

.ln-hero-lead {
    font-size: 1.125rem;
    max-width: 34rem;
    margin-bottom: 2rem;
}

.ln-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.ln-hero-note {
    font-size: .875rem;
    color: var(--ln-muted);
    display: flex;
    align-items: center;
    gap: .375rem;
}

.ln-hero-shot {
    position: relative;
}

.ln-hero-shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--ln-radius-lg);
    filter: drop-shadow(0 26px 50px rgba(15, 28, 46, .18));
}

/* Figures below the hero */
.ln-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--ln-border);
}

.ln-stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--ln-ink);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.ln-stat-label {
    font-size: .8125rem;
    color: var(--ln-muted);
    margin-top: .25rem;
}

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */
.ln-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.ln-feature {
    background-color: var(--ln-surface);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius);
    padding: 1.75rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ln-feature:hover {
    transform: translateY(-3px);
    border-color: rgba(26, 179, 148, .35);
    box-shadow: var(--ln-shadow-md);
}

.ln-feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ln-brand-soft);
    color: var(--ln-brand-dark);
    font-size: 1.375rem;
    margin-bottom: 1.125rem;
}

.ln-feature h3 {
    font-size: 1.125rem;
    margin-bottom: .5rem;
}

.ln-feature p {
    font-size: .9375rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Showcase: screenshot flanked by bullet points
   -------------------------------------------------------------------------- */
.ln-showcase-shot img {
    width: 100%;
    height: auto;
    border-radius: var(--ln-radius);
    box-shadow: var(--ln-shadow-lg);
}

.ln-point {
    display: flex;
    gap: .875rem;
    margin-bottom: 1.75rem;
}

.ln-point:last-child {
    margin-bottom: 0;
}

.ln-point-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid var(--ln-border);
    color: var(--ln-brand-dark);
    font-size: 1.25rem;
}

.ln-point h4 {
    font-size: 1rem;
    margin-bottom: .25rem;
}

.ln-point p {
    font-size: .9063rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */
.ln-quote {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.ln-quote-mark {
    font-size: 2.5rem;
    color: var(--ln-brand);
    line-height: 1;
    margin-bottom: 1rem;
}

.ln-quote blockquote {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.5;
    color: var(--ln-ink);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.ln-quote-author {
    font-size: .875rem;
    color: var(--ln-muted);
}

.ln-quote-author strong {
    color: var(--ln-ink);
    display: block;
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.ln-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.ln-plan {
    background-color: var(--ln-surface);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius-lg);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.ln-plan-featured {
    border-color: var(--ln-brand);
    border-width: 2px;
    box-shadow: var(--ln-shadow-md);
}

.ln-plan-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--ln-brand);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3125rem .875rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ln-plan-name {
    font-size: 1.25rem;
    margin-bottom: .375rem;
}

.ln-plan-desc {
    font-size: .875rem;
    min-height: 3.25rem;
    margin-bottom: 1.25rem;
}

.ln-plan-price {
    margin-bottom: 1.5rem;
}

.ln-plan-amount {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--ln-ink);
    line-height: 1;
    letter-spacing: -.03em;
}

.ln-plan-period {
    font-size: .875rem;
    color: var(--ln-muted);
    margin-top: .375rem;
}

/* Struck-through list price when a promotion is running */
.ln-plan-was {
    font-size: 1rem;
    color: var(--ln-muted);
    text-decoration: line-through;
    margin-bottom: .25rem;
}

.ln-plan-save {
    display: inline-block;
    background-color: var(--ln-brand-soft);
    color: var(--ln-brand-dark);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .75rem;
    margin-top: .625rem;
    line-height: 1.4;
}

.ln-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex-grow: 1;
}

.ln-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .9063rem;
    color: var(--ln-body);
    padding: .3125rem 0;
}

.ln-plan-features .ti {
    color: var(--ln-brand);
    font-size: 1.125rem;
    flex: 0 0 auto;
    margin-top: .0625rem;
}

.ln-plan .ln-btn {
    width: 100%;
}

.ln-pay-note {
    font-size: .8125rem;
    color: var(--ln-muted);
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.ln-member {
    text-align: center;
    background-color: var(--ln-surface);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius);
    padding: 2rem 1.5rem;
    height: 100%;
}

.ln-member img {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.125rem;
    border: 3px solid #fff;
    box-shadow: var(--ln-shadow-sm);
}

.ln-member h4 {
    font-size: 1.0625rem;
    margin-bottom: .1875rem;
}

.ln-member-role {
    font-size: .8125rem;
    color: var(--ln-brand-dark);
    font-weight: 600;
    margin-bottom: .75rem;
}

.ln-member p {
    font-size: .9063rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Closing call to action and contact
   -------------------------------------------------------------------------- */
.ln-cta {
    background: linear-gradient(135deg, #0f6f60, var(--ln-brand));
    border-radius: var(--ln-radius-lg);
    padding: 3.5rem 2rem;
    text-align: center;
    color: #fff;
}

.ln-cta h2,
.ln-cta p {
    color: #fff;
}

.ln-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: .75rem;
}

.ln-cta p {
    opacity: .92;
    max-width: 34rem;
    margin: 0 auto 1.75rem;
}

.ln-cta .ln-btn-ghost {
    background-color: #fff;
    color: var(--ln-brand-dark);
    border-color: #fff;
}

.ln-social {
    display: flex;
    justify-content: center;
    gap: .625rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.ln-social a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid var(--ln-border);
    color: var(--ln-body);
    font-size: 1.125rem;
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.ln-social a:hover {
    color: var(--ln-brand-dark);
    border-color: var(--ln-brand);
    transform: translateY(-2px);
}

.ln-footer {
    border-top: 1px solid var(--ln-border);
    padding: 2rem 0;
    text-align: center;
}

.ln-footer p {
    font-size: .875rem;
    margin-bottom: 0;
    color: var(--ln-muted);
}

.ln-footer strong {
    color: var(--ln-ink);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ln-feature-grid,
    .ln-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ln-plan-featured {
        grid-column: span 2;
    }

    .ln-hero-shot {
        margin-top: 3rem;
    }
}

@media (max-width: 767.98px) {
    .landing-page section {
        padding: 3.5rem 0;
    }

    .landing-page #tsit-landing-nav .navbar-collapse {
        background-color: #fff;
        border: 1px solid var(--ln-border);
        border-radius: 14px;
        margin-top: .75rem;
        padding: .75rem;
        box-shadow: var(--ln-shadow-md);
    }

    .landing-page .ln-nav-actions {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--ln-border);
    }

    .landing-page .ln-nav-actions .ln-btn {
        flex: 1 1 0;
    }

    .ln-feature-grid,
    .ln-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .ln-plan-featured {
        grid-column: auto;
    }

    .ln-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
        margin-top: 2.5rem;
    }

    .ln-plan-desc {
        min-height: 0;
    }

    .ln-cta {
        padding: 2.5rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-page * {
        transition: none !important;
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Language switch
   --------------------------------------------------------------------------
   A form rather than links, because the language has to be set with a POST:
   it writes the cookie and, for a signed-in visitor, their profile too. */
.landing-page .ln-lang {
    display: inline-flex;
    align-items: center;
    background-color: var(--ln-surface-alt);
    border: 1px solid var(--ln-border);
    border-radius: 999px;
    padding: 2px;
    margin-right: .25rem;
}

.landing-page .ln-lang-option {
    border: 0;
    background: transparent;
    color: var(--ln-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
    padding: .375rem .5625rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.landing-page .ln-lang-option:hover {
    color: var(--ln-ink);
}

.landing-page .ln-lang-option.is-active {
    background-color: #fff;
    color: var(--ln-brand-dark);
    box-shadow: var(--ln-shadow-sm);
}

.landing-page .ln-lang-option:focus-visible {
    outline: 2px solid var(--ln-brand);
    outline-offset: 1px;
}

/* The selector and the hamburger travel together.

   On mobile they keep their DOM position, on the logo's row, so the language
   can be changed without opening the menu. From 992px up the hamburger is gone
   and the selector is reordered to the far right, after the two buttons. The
   reorder is scoped to the breakpoint on purpose: applying it on mobile would
   drop the hamburger below the expanded menu, because .navbar-collapse takes a
   full-width flex basis there. */
.landing-page .ln-nav-compact {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

@media (min-width: 992px) {
    .landing-page .ln-nav-compact {
        order: 3;
        margin-left: .75rem;
    }
}