/* ==========================================================================
   JustChecker Marketing Site - premium landing page styles
   Builds on top of app.css's CSS variables (--jc-accent, --jc-ink, etc.)
   ========================================================================== */

body.jc-marketing {
    /* Dark theme, purple + blue accents - scoped to the public
       marketing site only. These redefine the same variable names
       used everywhere else (app.css / Admin Panel) but only within
       this subtree, so Admin Panel and the authenticated app keep
       their existing blue/cyan palette untouched. */
    --jc-canvas: #0b0f1e;
    --jc-surface: #171e35;
    --jc-border: #2a3352;
    --jc-text: #f5f6fa;
    --jc-text-muted: #b7bfd6;
    --jc-text-faint: #8891ab;
    --jc-accent: #7c3aed;
    --jc-accent-2: #2563eb;
    --jc-accent-soft: rgba(124, 58, 237, 0.16);
    --jc-gradient-primary: linear-gradient(135deg, #7c3aed 0%, #6d28d9 45%, #2563eb 100%);
    --jc-gradient-primary-hover: linear-gradient(135deg, #6d28d9 0%, #5b21b6 45%, #1d4ed8 100%);
    --jc-gradient-surface: linear-gradient(180deg, #171e35 0%, #10142199 100%);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--jc-text);
    background: var(--jc-canvas);
    -webkit-font-smoothing: antialiased;
}

/* Bootstrap's .text-muted / .form-text utilities read Bootstrap's own
   --bs-secondary-color variable, not our --jc-text-muted token, so
   they were never picked up by the dark theme conversion above -
   this is what made helper text and muted copy unreadable throughout
   the marketing site. Override them directly, everywhere on this
   subtree. */
body.jc-marketing .text-muted,
body.jc-marketing .form-text {
    color: var(--jc-text-muted) !important;
}

/* ---------- Sticky header ---------- */
.jc-announcement-bar {
    background: linear-gradient(120deg, var(--jc-accent), var(--jc-accent-2));
    color: #fff;
    font-weight: 500;
}
.jc-marketing-nav {
    background: rgba(11, 15, 30, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--jc-border);
    padding: 0.65rem 0;
    transition: box-shadow .2s ease;
}
.jc-marketing-nav.jc-scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.jc-marketing-nav .nav-link {
    font-weight: 500;
    color: var(--jc-text);
    padding: 0.5rem 0.9rem;
}
.jc-marketing-nav .nav-link.active {
    color: var(--jc-accent-2);
    font-weight: 600;
}

/* ---------- Hero ---------- */
.jc-hero {
    position: relative;
    padding: 6rem 0 5rem;
    background:
        radial-gradient(60% 60% at 85% 10%, rgba(124,58,237,0.22), transparent 70%),
        radial-gradient(50% 50% at 10% 90%, rgba(37,99,235,0.18), transparent 70%),
        var(--jc-canvas);
    overflow: hidden;
}
.jc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--jc-accent-soft);
    color: #c4b5fd;
    font-weight: 600;
    font-size: .8rem;
    padding: .4rem .9rem;
    border-radius: 999px;
}
.jc-hero h1 {
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--jc-text);
}
.jc-hero .jc-gradient-text {
    background: linear-gradient(120deg, #a78bfa, var(--jc-accent-2) 60%, var(--jc-success));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.jc-hero p.lead {
    font-size: 1.15rem;
    color: var(--jc-text-muted);
    max-width: 560px;
}

/* Floating dashboard preview mock */
.jc-hero-preview {
    border-radius: 1.25rem;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
    border: 1px solid var(--jc-border);
    background: var(--jc-surface);
    overflow: hidden;
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    transition: transform .4s ease;
}
.jc-hero-preview:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}
.jc-hero-preview .jc-preview-header {
    background: #080b16;
    padding: .6rem 1rem;
    display: flex;
    gap: .4rem;
}
.jc-hero-preview .jc-preview-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
}

/* ---------- Hero carousel (admin-managed banners) ---------- */
.jc-hero-slider .carousel-item {
    /* Keeps the hero's height stable as slides with different amounts
       of copy rotate through, avoiding any layout shift. */
    min-height: 460px;
    display: flex;
    align-items: center;
}

.jc-hero-slider .carousel-item .container {
    width: 100%;
}

.jc-hero-media {
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
    border: 1px solid var(--jc-border);
}

.jc-hero-media img,
.jc-hero-media video {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.jc-hero-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    background: linear-gradient(135deg, var(--jc-surface), var(--jc-canvas));
    border: 1px solid var(--jc-border);
}

.jc-hero-media-fallback i {
    font-size: 6rem;
    background: linear-gradient(120deg, #a78bfa, var(--jc-accent-2) 60%, var(--jc-success));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.jc-hero-slider .carousel-indicators {
    bottom: -8px;
}

.jc-hero-slider .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--jc-text-faint);
    opacity: 0.5;
    border: none;
    margin: 0 4px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.jc-hero-slider .carousel-indicators .active {
    background-color: var(--jc-accent);
    opacity: 1;
    transform: scale(1.3);
}

.jc-hero-slider .carousel-control-prev,
.jc-hero-slider .carousel-control-next {
    width: 4rem;
    opacity: 1;
}

.jc-hero-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(23, 30, 53, 0.7);
    border: 1px solid var(--jc-border);
    color: var(--jc-text);
    font-size: 1.1rem;
    transition: background-color 0.2s ease;
}

.jc-hero-slider .carousel-control-prev:hover .jc-hero-carousel-arrow,
.jc-hero-slider .carousel-control-next:hover .jc-hero-carousel-arrow {
    background-color: var(--jc-accent);
}

.jc-hero-slider .carousel-control-prev:focus-visible .jc-hero-carousel-arrow,
.jc-hero-slider .carousel-control-next:focus-visible .jc-hero-carousel-arrow,
.jc-hero-slider .carousel-indicators button:focus-visible {
    outline: 2px solid var(--jc-accent);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .jc-hero-slider .carousel-item {
        min-height: 0;
    }

    .jc-hero-media,
    .jc-hero-media-fallback {
        margin-top: 2rem;
    }

    .jc-hero-media-fallback {
        min-height: 220px;
    }

    .jc-hero-media-fallback i {
        font-size: 4rem;
    }
}

/* ---------- Sections ---------- */
.jc-section { padding: 5rem 0; }
.jc-section-sm { padding: 3.5rem 0; }
.jc-section-alt { background: var(--jc-canvas); }
.jc-eyebrow {
    color: var(--jc-accent);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.jc-section-title {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.jc-section-subtitle {
    color: var(--jc-text-muted);
    max-width: 640px;
}

/* ---------- Feature cards ---------- */
.jc-feature-card {
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    padding: 1.75rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.jc-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -18px rgba(15, 23, 42, 0.18);
    border-color: var(--jc-accent);
}
.jc-feature-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: .9rem;
    background: var(--jc-accent-soft);
    color: var(--jc-accent);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

/* ---------- How it works ---------- */
.jc-step-number {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--jc-gradient-primary);
    color: #fff;
    font-weight: 700;
}

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

/* ---------- Compare Plans table ---------- */
.jc-compare-table-wrap {
    border-radius: var(--jc-radius);
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--jc-border);
}

.jc-compare-table {
    margin-bottom: 0;
}

.jc-compare-table thead th {
    background: linear-gradient(135deg, #171e35 0%, #1f2745 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1.1rem 1rem;
    border: none;
    vertical-align: middle;
}

.jc-compare-table thead th:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.jc-compare-feature-col {
    text-align: left !important;
    min-width: 180px;
}

.jc-compare-plan-name {
    font-size: 1.05rem;
}

.jc-compare-badge {
    display: inline-block;
    background: var(--jc-gradient-primary, linear-gradient(135deg, #7c3aed, #2563eb));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.jc-compare-table tbody tr,
.jc-compare-table tfoot tr {
    border-bottom: 1px solid var(--jc-border);
}

.jc-compare-table tbody tr:nth-child(even) {
    background-color: rgba(91, 95, 239, 0.03);
}

.jc-compare-table td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
}

.jc-compare-feature-label {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--jc-text);
    text-align: left !important;
}

/* The column belonging to whichever plan the admin has configured a
   badge_text for (never hardcoded to a specific plan name) gets a
   subtle highlight and a glowing border running the full height of
   the table, matching the "featured plan" treatment on the pricing
   cards above. */
.jc-compare-featured-col {
    background-color: rgba(124, 58, 237, 0.06);
    box-shadow: inset 2px 0 0 var(--jc-accent, #7c3aed), inset -2px 0 0 var(--jc-accent, #7c3aed);
}

.jc-compare-table {
    /* Bootstrap 5.3's .table sets --bs-table-bg: var(--bs-body-bg)
       (white) directly, which otherwise paints an opaque white
       background for every row inside this page's dark theme - the
       feature-label column (explicitly colored near-white for that
       dark theme) would be invisible against it. Overriding here
       once covers every row, not just Price. */
    --bs-table-bg: transparent;
    background-color: transparent;
}

/* Bootstrap's real rule (verified directly against the bootstrap
   5.3.3 package source) is:
     .table > :not(caption) > * > * { color: var(--bs-table-color-state, ...); }
   which has specificity (0,1,1) - higher than a plain single-class
   ".jc-compare-table { color: ... }" rule at (0,1,0), so that lower-
   specificity color override was silently losing regardless of
   cascade/file order, leaving every cell on Bootstrap's own dark
   --bs-emphasis-color default (untouched by this site's --jc-text
   dark-theme variable) - low, but non-zero, contrast against the
   dark background, which is exactly why it looked "dim" rather than
   fully invisible. Matching Bootstrap's exact selector shape here
   gives equal (0,1,1) specificity, and this stylesheet loading after
   Bootstrap's breaks the tie in our favor; !important is added as an
   absolute guarantee, since this exact class of bug has now recurred
   more than once. */
.jc-compare-table > :not(caption) > * > * {
    color: var(--jc-text) !important;
}

.jc-compare-price-row {
    /* Bootstrap 5.3's .table sets --bs-table-bg: var(--bs-body-bg)
       (white) directly on the table, which otherwise paints an opaque
       white rectangle inside this page's dark .jc-card - overriding it
       here (custom properties inherit to the <td> children) restores
       the intended dark, high-contrast background for this row. */
    --bs-table-bg: transparent;
    background-color: transparent;
}

.jc-compare-price-row td {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    vertical-align: middle;
}

.jc-compare-price-cell {
    vertical-align: middle;
}

.jc-compare-price {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'SFMono-Regular', Consolas, monospace;
    /* Explicit + !important: guarantees strong contrast against this
       row's background regardless of any Bootstrap table default,
       rather than relying solely on inheritance. */
    color: var(--jc-text) !important;
    opacity: 1 !important;
}

.jc-compare-price-row .jc-compare-price-suffix {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--jc-text-muted) !important;
    margin-left: 2px;
}

.jc-compare-price-row .jc-compare-strike {
    text-decoration: line-through;
    color: var(--jc-text-muted) !important;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.8rem;
    margin-right: 4px;
}

.jc-compare-check {
    color: #16a34a;
    font-size: 1.15rem;
}

.jc-compare-cross {
    color: #9ca3af;
    font-size: 1.15rem;
}

.jc-compare-seemore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jc-compare-seemore-icon {
    transition: transform 0.2s ease;
}

.jc-compare-seemore-btn.jc-compare-seemore-open .jc-compare-seemore-icon {
    transform: rotate(180deg);
}

@keyframes jcCompareRowReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.jc-compare-row-reveal {
    animation: jcCompareRowReveal 0.3s ease both;
}

@media (min-width: 768px) {
    .jc-compare-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }
}

@media (max-width: 767.98px) {
    .jc-compare-table thead th {
        font-size: 0.78rem;
        padding: 0.85rem 0.6rem;
    }

    .jc-compare-feature-col {
        min-width: 130px;
    }

    .jc-compare-price {
        font-size: 1.15rem;
    }

    .jc-compare-table td {
        padding: 0.75rem 0.6rem;
    }
}

/* ---------- Pricing card polish ---------- */
.jc-pricing-card {
    transition: transform var(--jc-transition, 0.2s ease), box-shadow var(--jc-transition, 0.2s ease);
}

.jc-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--jc-shadow-pop, 0 20px 45px -25px rgba(15, 23, 42, 0.35));
}

.jc-pricing-card-featured {
    border-width: 2px !important;
    border-color: var(--jc-accent) !important;
    box-shadow: 0 20px 45px -25px rgba(124, 58, 237, 0.45);
}

.jc-pricing-card-featured:hover {
    box-shadow: 0 26px 55px -25px rgba(124, 58, 237, 0.55);
}

/* Price is the single most prominent element on each card - large,
   bold, and responsive (32px on small screens up to 40px on desktop,
   per the required range) - with the billing period deliberately much
   smaller/muted right next to it, and the strikethrough/discount
   badge given its own row below so it never overlaps the price
   itself. */
.jc-plan-price {
    font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);
    line-height: 1.1;
}

.jc-plan-price-period {
    font-size: 0.85rem;
}

.jc-plan-discount-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Premium sliding-pill billing toggle ---------- */
.jc-billing-toggle {
    position: relative;
    display: inline-flex;
    background-color: var(--jc-canvas, #f3f4f8);
    border: 1px solid var(--jc-border);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.jc-billing-toggle-option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--jc-text-muted);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.25s ease;
    user-select: none;
}

.jc-billing-toggle-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 5px);
    height: calc(100% - 8px);
    background: var(--jc-gradient-primary, linear-gradient(135deg, #7c3aed, #2563eb));
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(91, 95, 239, 0.55);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.jc-billing-toggle-annual .jc-billing-toggle-thumb {
    transform: translateX(100%);
}

.jc-billing-toggle input:checked + .jc-billing-toggle-option {
    color: #ffffff;
}

.jc-billing-toggle input:focus-visible + .jc-billing-toggle-option {
    outline: 2px solid var(--jc-accent, #5b5fef);
    outline-offset: 2px;
}

.jc-billing-savings-hint {
    animation: jcFadeIn 0.3s ease;
}

@keyframes jcFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.jc-compare-expand-panel {
    background-color: var(--jc-canvas);
    border: 1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    padding: 1rem 1.1rem;
    height: 100%;
}

.jc-compare-expand-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.35rem 0;
}

.jc-compare-seemore-btn:focus-visible {
    outline: 2px solid var(--jc-accent, #5b5fef);
    outline-offset: 2px;
}

.jc-billing-toggle .btn-check:checked + .btn-outline-primary {
    box-shadow: none;
}

/* ---------- Testimonials ---------- */
.jc-testimonial-card {
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    padding: 1.75rem;
    height: 100%;
}
.jc-testimonial-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--jc-accent-soft);
}

/* ---------- FAQ ---------- */
.jc-faq .accordion-button {
    font-weight: 600;
    background: var(--jc-surface);
    color: var(--jc-text);
}
.jc-faq .accordion-button::after {
    filter: invert(1) grayscale(1) brightness(2);
}
.jc-faq .accordion-button:not(.collapsed) {
    color: #c4b5fd;
    background: var(--jc-accent-soft);
    box-shadow: none;
}
.jc-faq .accordion-item {
    border-color: var(--jc-border);
    border-radius: var(--jc-radius) !important;
    overflow: hidden;
    margin-bottom: .75rem;
    background: var(--jc-surface);
    color: var(--jc-text);
}
.jc-faq .accordion-body {
    color: var(--jc-text-muted);
}

/* ---------- CTA band ---------- */
.jc-cta-band {
    background: linear-gradient(120deg, #1b1030, #221346 55%, #182238);
    border-radius: 1.5rem;
    padding: 3.5rem 2.5rem;
    color: #fff;
}

/* ---------- Footer ---------- */
.jc-marketing-footer {
    background: #080b16;
    border-top: 1px solid rgba(124, 58, 237, 0.25);
}

.jc-marketing-footer h3 {
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
}

.jc-marketing-footer a.text-white-50 {
    transition: color 0.15s ease;
}

.jc-marketing-footer a.text-white-50:hover {
    color: #c4b5fd !important;
}

.jc-marketing-footer .btn-primary {
    box-shadow: none;
}

/* ---------- Legal / CMS page content ---------- */
.jc-legal-content {
    color: var(--jc-text);
    line-height: 1.75;
}
.jc-legal-content h2 { font-size: 1.3rem; font-weight: 700; margin-top: 2rem; margin-bottom: .75rem; color: var(--jc-text); }
.jc-legal-content h3 { font-size: 1.1rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: .5rem; color: var(--jc-text); }
.jc-legal-content p { margin-bottom: 1rem; color: var(--jc-text-muted); }
.jc-legal-content ul, .jc-legal-content ol { margin-bottom: 1rem; color: var(--jc-text-muted); }
.jc-legal-content a { color: var(--jc-accent-2); }

.jc-img-placeholder {
    background: var(--jc-surface);
    border-bottom: 1px solid var(--jc-border);
}

/* ---------- Utility ---------- */
.jc-avatar-fallback {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--jc-accent-soft);
    color: var(--jc-accent);
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .jc-hero { padding: 3.5rem 0 3rem; text-align: center; }
    .jc-hero p.lead { max-width: 100%; margin-left: auto; margin-right: auto; }
    .jc-hero-preview { transform: none; margin-top: 2rem; }
}