/**
 * AI Tool Register Template lead magnet page styles.
 */

/* ── Hero layout ──────────────────────────────── */
.idf-lead-magnet-hero {
    padding-bottom: 56px;
    border-bottom: none;
}

.idf-lead-magnet-hero__inner {
    max-width: none;
    padding-inline: max(24px, calc((100vw - var(--idf-max-width)) / 2));
}

.idf-lead-magnet-hero__grid {
    display: grid;
    gap: 36px;
    align-items: center;
}

@media (min-width: 901px) {
    .idf-lead-magnet-hero {
        padding-top: 64px;
        padding-bottom: 72px;
        padding-right: 0;
        min-height: calc(100vh - 72px);
        display: flex;
        align-items: center;
    }

    .idf-lead-magnet-hero__inner {
        width: 100%;
        padding-right: 0;
    }

    .idf-lead-magnet-hero__grid {
        grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
        gap: 40px 56px;
        align-items: center;
    }
}

/* ── Brand signal ─────────────────────────────── */
.idf-lead-magnet-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.idf-lead-magnet-brand__icon {
    display: block;
    flex-shrink: 0;
}

.idf-lead-magnet-brand__name {
    font-family: var(--idf-font-head);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 28px);
    letter-spacing: -0.03em;
    color: var(--idf-text);
    margin: 0;
    line-height: 1.1;
}

.idf-lead-magnet-brand__eyebrow {
    font-family: var(--idf-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--idf-accent);
    margin: 4px 0 0;
    line-height: 1.2;
}

.idf-lead-magnet-h1 {
    max-width: 14ch;
    margin-bottom: 18px;
}

.idf-lead-magnet-lead {
    max-width: 42ch;
    margin-bottom: 0;
}

/* ── Hero form ────────────────────────────────── */
.idf-lead-magnet-hero__form {
    margin-top: 28px;
}

.idf-lead-magnet-hero__form .idf-form-live:not(:empty) {
    margin-top: 0;
    margin-bottom: 0;
}

.idf-lead-magnet-page .idf-form-success {
    padding: 16px 18px;
    border: 1px solid rgba(0, 212, 170, 0.35);
    border-radius: 8px;
    background: rgba(0, 212, 170, 0.08);
}

.idf-lead-magnet-page .idf-form-success:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.18);
}

.idf-lead-magnet-form__fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 400px;
}

.idf-lead-magnet-form .idf-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.idf-lead-magnet-form .idf-form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--idf-muted);
}

.idf-lead-magnet-form .idf-form-input,
.idf-lead-magnet-form .idf-form-select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    font-family: var(--idf-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: #e8edf2 !important;
    background-color: rgba(11, 15, 20, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 7px;
    transition: border-color 0.18s, box-shadow 0.18s;
    -webkit-appearance: none;
    appearance: none;
}

.idf-lead-magnet-form .idf-form-input::placeholder {
    color: #5a6a7a !important;
    opacity: 1;
}

.idf-lead-magnet-form .idf-form-input:focus,
.idf-lead-magnet-form .idf-form-select:focus {
    outline: none;
    border-color: rgba(0, 212, 170, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.14);
}

.idf-lead-magnet-form .idf-form-input--error {
    border-color: #e05a5a !important;
}

.idf-lead-magnet-form .idf-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238b9aab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.idf-lead-magnet-form .idf-form-select option {
    background: #111820;
    color: #e8edf2;
}

.idf-lead-magnet-form .idf-form-error {
    font-size: 13px;
    color: #e05a5a;
    margin: 0;
}

.idf-lead-magnet-form .idf-form-error--banner {
    padding: 12px 14px;
    border: 1px solid rgba(224, 90, 90, 0.35);
    border-radius: 8px;
    background: rgba(224, 90, 90, 0.08);
    margin: 0 0 12px;
    max-width: 400px;
}

.idf-lead-magnet-privacy {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--idf-hint, var(--idf-muted));
}

.idf-form-optional {
    font-weight: 400;
    color: var(--idf-hint, var(--idf-muted));
}

.idf-lead-magnet-form__submit {
    width: 100%;
    margin-top: 4px;
    padding: 14px 24px;
    font-size: 15px;
    cursor: pointer;
}

.idf-lead-magnet-form-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--idf-hint, var(--idf-muted));
    line-height: 1.5;
}

/* ── Success state ────────────────────────────── */
.idf-lead-magnet-success {
    max-width: 400px;
}

.idf-lead-magnet-success p {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--idf-text);
    line-height: 1.6;
}

.idf-lead-magnet-success p:last-child {
    margin-bottom: 0;
}

.idf-lead-magnet-success__next {
    color: var(--idf-muted) !important;
    font-size: 13.5px !important;
}

.idf-lead-magnet-success__links {
    font-size: 13px !important;
    color: var(--idf-muted) !important;
}

.idf-lead-magnet-success__links a {
    color: var(--idf-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.idf-lead-magnet-success__links span {
    margin: 0 6px;
    opacity: 0.5;
}

/* ── Template visual (full-bleed plane) ───────── */
.idf-lead-magnet-shot {
    margin: 0;
    position: relative;
}

.idf-lead-magnet-shot picture {
    display: block;
}

.idf-lead-magnet-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

@media (min-width: 901px) {
    .idf-lead-magnet-shot {
        margin-right: calc(-1 * max(24px, calc((100vw - var(--idf-max-width)) / 2)));
        align-self: center;
    }

    .idf-lead-magnet-shot img {
        width: 100%;
        max-height: min(72vh, 640px);
        object-fit: contain;
        object-position: left center;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%);
        mask-image: linear-gradient(to right, transparent 0%, #000 6%);
    }
}

.idf-lead-magnet-shot__caption {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--idf-hint, var(--idf-muted));
    line-height: 1.5;
    max-width: 36ch;
}

@media (min-width: 901px) {
    .idf-lead-magnet-shot__caption {
        padding-left: 6%;
    }
}

/* ── Below section ────────────────────────────── */
.idf-lead-magnet-below {
    padding-top: 56px;
    padding-bottom: 80px;
    border-top: 1px solid var(--idf-border);
}

.idf-lead-magnet-below__inner {
    max-width: 720px;
}

.idf-lead-magnet-includes {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.idf-lead-magnet-includes__item {
    padding: 16px 0;
    border-bottom: 1px solid var(--idf-border);
}

.idf-lead-magnet-includes__item:first-child {
    padding-top: 0;
}

.idf-lead-magnet-includes__title {
    font-family: var(--idf-font-head);
    font-weight: 600;
    font-size: 15px;
    color: var(--idf-text);
    margin: 0 0 6px;
    line-height: 1.4;
}

.idf-lead-magnet-includes__desc {
    margin: 0;
    font-size: 14.5px;
    color: var(--idf-muted);
    line-height: 1.65;
}

.idf-lead-magnet-seo {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.idf-lead-magnet-seo__heading {
    margin-bottom: 10px;
}

.idf-lead-magnet-seo__body {
    margin: 0;
    font-size: 15px;
    color: var(--idf-muted);
    line-height: 1.75;
}

.idf-lead-magnet-seo__body a {
    color: var(--idf-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.idf-lead-magnet-faq {
    margin-top: 48px;
}

.idf-lead-magnet-faq .idf-page-section-label {
    margin-bottom: 10px;
}

.idf-lead-magnet-faq__list {
    margin: 20px 0 0;
    padding: 0;
}

.idf-lead-magnet-faq__item {
    padding: 16px 0;
    border-bottom: 1px solid var(--idf-border);
}

.idf-lead-magnet-faq__item dt {
    font-family: var(--idf-font-head);
    font-weight: 600;
    font-size: 15px;
    color: var(--idf-text);
    margin: 0 0 8px;
    line-height: 1.4;
}

.idf-lead-magnet-faq__item dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--idf-muted);
    line-height: 1.65;
}

.idf-lead-magnet-trial-line {
    margin: 48px 0 0;
    font-size: 14px;
    color: var(--idf-hint, var(--idf-muted));
    line-height: 1.6;
}

.idf-lead-magnet-trial-line a {
    color: var(--idf-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Entrance motion ──────────────────────────── */
@keyframes idf-lm-rise-fade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes idf-lm-shot-rise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.idf-lead-magnet-brand {
    animation: idf-lm-rise-fade 0.32s ease both;
}

.idf-lead-magnet-h1 {
    animation: idf-lm-rise-fade 0.32s ease 0.06s both;
}

.idf-lead-magnet-lead {
    animation: idf-lm-rise-fade 0.32s ease 0.12s both;
}

.idf-lead-magnet-hero__form {
    animation: idf-lm-rise-fade 0.32s ease 0.18s both;
}

.idf-lead-magnet-form-note {
    animation: idf-lm-rise-fade 0.32s ease 0.24s both;
}

.idf-lead-magnet-shot {
    animation: idf-lm-shot-rise 0.42s ease 0.14s both;
}

@media (prefers-reduced-motion: reduce) {
    .idf-lead-magnet-brand,
    .idf-lead-magnet-h1,
    .idf-lead-magnet-lead,
    .idf-lead-magnet-hero__form,
    .idf-lead-magnet-form-note,
    .idf-lead-magnet-shot {
        animation: none;
    }
}

/* ── Mobile stack ─────────────────────────────── */
@media (max-width: 900px) {
    .idf-lead-magnet-hero {
        padding: 48px 0 40px;
    }

    .idf-lead-magnet-hero__inner {
        padding-inline: 24px;
    }

    .idf-lead-magnet-h1 {
        max-width: none;
    }

    .idf-lead-magnet-lead {
        max-width: none;
    }

    .idf-lead-magnet-form__fields,
    .idf-lead-magnet-form .idf-form-error--banner,
    .idf-lead-magnet-success {
        max-width: none;
    }

    .idf-lead-magnet-shot__caption {
        max-width: none;
    }

    .idf-lead-magnet-below {
        padding-inline: 24px;
    }
}