/* ============================================
   Marketing Home
   Sections for the publisher-tools home page (hero, tools, comparison,
   pricing CTA, demo). Appearance-based naming; dark-theme first.
   ============================================ */

/* Width/horizontal gutter come from .content-shell so the landing column
   aligns with the header. This rule owns only the vertical rhythm. */
.home-main {
    /* Cancel the layout-level .content-main top padding so it doesn't stack on
       top of the hero's own top padding (the floating nav already supplies
       breathing room above). Top spacing then comes from the first child alone,
       responsive. Mirrors the .home-hero-balanced technique. */
    margin-top: calc(var(--content-main-pad-top, 2rem) * -1);
    padding-block: clamp(0.5rem, 1.5vw, 1.25rem) 5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* .content-shell is the sole width authority on the landing page. Nested
   .container wrappers (FeatureShowcase, HomeComparison) otherwise re-cap
   content at --container-max-width and add their own gutter, leaving content
   narrower than the header. Let them fill the shell instead. */
.home-main .container {
    max-width: none;
    padding-inline: 0;
}

/* Shared section shell: a raised, rounded panel on the dark background. */
.home-section {
    background: var(--bg-surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    box-shadow: var(--shadow-md);
}

.home-section-title {
    font-family: var(--font-family-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.home-section-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    line-height: var(--leading-relaxed);
}

/* Small pill tag used for eyebrows, trust badges, and labels. */
.home-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--glass-white-8);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* ---- Hero ---- */
.home-hero {
    position: relative;
    z-index: 0;
    text-align: center;
    /* Responsive top: collapses on small viewports, bounded (not excessive) on
       large. Was a fixed 4.5rem that stacked into a large empty top gap. */
    padding: clamp(1rem, 3vw, 2.5rem) 1rem 3rem;
}

/* Full-bleed animated dark gradient behind the hero, pulled up behind the
   sticky nav. Restores the look of the retired GradientSection component. */
.home-hero-bg,
.home-hero-pattern {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -7rem; /* extend up behind the nav */
    width: 100vw;
    height: calc(100% + 7rem);
    z-index: -1;
    pointer-events: none;
}

.home-hero-bg {
    background: linear-gradient(
        135deg,
        rgba(25, 20, 45, 0.98) 0%,
        rgba(35, 25, 60, 0.98) 50%,
        rgba(25, 20, 45, 0.98) 100%
    );
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

.home-hero-pattern {
    background-image:
        radial-gradient(
            circle at 20% 80%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 40% 40%,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 50%
        );
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-bg {
        animation: none;
    }
}

.home-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.home-eyebrow {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--glass-white-8);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.home-hero-title {
    font-family: var(--font-family-wordmark, var(--font-family-display));
    font-size: var(--text-6xl);
    font-weight: var(--font-bold);
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

.home-hero-subtitle {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.home-cta-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

.home-trust-tags {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    justify-content: center;
}

.home-trust-tag {
    position: relative;
    padding-left: 1.25rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.home-trust-tag::before {
    content: "\2713"; /* check */
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: var(--font-bold);
}

@media (max-width: 640px) {
    .home-hero-title {
        font-size: var(--text-4xl);
    }
    .home-section {
        padding: 1.75rem 1.25rem;
    }
}

/* ---- Tool cards ---- */
.home-tools {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    scroll-margin-top: 5rem;
}

.home-tool-card {
    scroll-margin-top: 5rem;
}

.home-tool-heading {
    font-family: var(--font-family-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 1rem 0 0.4rem;
}

.home-tool-desc {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    line-height: var(--leading-relaxed);
}

.home-tool-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home-tool-feature {
    position: relative;
    padding-left: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.home-tool-feature::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.05rem;
    color: var(--color-success);
    font-weight: var(--font-bold);
}

.home-tool-feature-title {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.home-tool-feature-detail {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ---- Comparison table + trust badges ---- */
.home-comparison {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.home-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.home-compare-table th,
.home-compare-table td {
    text-align: left;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}

.home-compare-table th {
    color: var(--text-muted);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.home-compare-table td {
    color: var(--text-secondary);
}

.home-compare-ghost {
    color: var(--text-muted);
}

.home-compare-table td.home-compare-vo {
    position: relative;
    padding-left: 1.7rem;
    color: var(--text-primary);
}

.home-compare-vo::before {
    content: "\2713";
    position: absolute;
    left: 0.85rem;
    color: var(--color-success);
    font-weight: var(--font-bold);
}

.home-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    justify-content: center;
}

/* ---- Pricing CTA ---- */
.home-pricing {
    text-align: center;
}

.home-pricing .home-cta-row {
    justify-content: center;
}

.home-pricing-line {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

.home-pricing-price {
    font-family: var(--font-family-wordmark, var(--font-family-display));
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.home-pricing-billing {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ---- Demo ---- */
.home-demo {
    text-align: center;
}

.home-demo-steps {
    list-style: none;
    counter-reset: demo-step;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    text-align: left;
}

.home-demo-step {
    counter-increment: demo-step;
    position: relative;
    padding-top: 2.25rem;
}

.home-demo-step::before {
    content: counter(demo-step);
    position: absolute;
    top: 0;
    left: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--glass-white-8);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
}

.home-demo-step-title {
    display: block;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 0.25rem;
}

.home-demo-step-detail {
    display: block;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.home-demo-form {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Card treatment: a glass panel that makes the request form read as the
   destination of the three steps above it. */
.home-demo-card {
    padding: 1.5rem;
    background: var(--glass-white-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.home-demo-inputs {
    display: flex;
    gap: 1rem;
}

.home-demo-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.home-demo-field-label {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.home-demo-form input {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: var(--text-base);
}

.home-demo-consent {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    margin: 0;
}

@media (max-width: 640px) {
    .home-demo-inputs {
        flex-direction: column;
    }
    .home-demo-steps {
        grid-template-columns: 1fr;
    }
}

/* Demo form request states: htmx toggles htmx-request on the form while the
   lead capture is in flight; the response fragment lands in the result div. */
.home-demo-form.htmx-request button[type="submit"] {
    opacity: 0.6;
    cursor: wait;
}

.home-demo-form .success-message {
    color: var(--color-success);
    font-weight: 500;
    padding: 0.75rem;
    background: rgba(var(--color-success-rgb), 0.1);
    border: 1px solid rgba(var(--color-success-rgb), 0.3);
    border-radius: var(--radius-md);
    text-align: center;
}

.home-demo-form .error-message {
    color: var(--color-danger);
    font-weight: 500;
    padding: 0.75rem;
    background: rgba(249, 44, 92, 0.1);
    border: 1px solid rgba(249, 44, 92, 0.3);
    border-radius: var(--radius-md);
    text-align: center;
}