/* ========================================
   SAVE BOOKS CONVERSION PAGE
======================================== */

.page-member-save-books .site-footer {
    margin-top: 0;
}

.member-save-hero {
    padding: clamp(2rem, 5vw, 4.75rem) 0;
}

.member-save-hero-inner {
    display: grid;
    gap: var(--s-10);
    align-items: center;
}

.member-save-hero-copy {
    min-width: 0;
}

.member-save-kicker,
.member-save-feature-label {
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.member-save-kicker {
    margin-bottom: var(--s-4);
    color: var(--white-76);
}

.member-save-hero h1 {
    max-width: 18ch;
    margin-bottom: var(--s-5);
    font-size: clamp(2rem, 5vw, 3.65rem);
    line-height: 1.04;
}

.member-save-summary {
    max-width: 58ch;
    color: var(--white-88);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.65;
}

.member-save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-top: var(--s-8);
}

.member-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 var(--s-8);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.94rem;
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.08s ease;
}

.member-save-btn:hover {
    text-decoration: none;
}

.member-save-btn:active {
    transform: scale(0.985);
}

.member-save-btn--primary {
    background: var(--white);
    border-color: var(--white);
    color: var(--accent-hover);
}

.member-save-btn--primary:hover {
    background: var(--white-90);
    border-color: var(--white-90);
}

.member-save-btn--secondary {
    background: var(--white-08);
    border-color: var(--white-22);
    color: var(--white);
}

.member-save-btn--secondary:hover {
    background: var(--white-14);
    border-color: var(--white-30, rgba(255, 255, 255, 0.30));
}

.member-save-assurance {
    margin-top: var(--s-4);
    color: var(--white-68);
    font-size: 0.82rem;
    line-height: 1.4;
}

.member-save-hero-preview {
    min-width: 0;
}

.member-save-book-card,
.member-save-control-preview {
    width: min(100%, 440px);
    margin-inline: auto;
    border: 1px solid var(--white-18);
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        var(--white-14) 0%,
        var(--white-08) 100%
    );
    box-shadow: 0 20px 48px rgba(0, 42, 55, 0.22);
    backdrop-filter: blur(8px);
}

.member-save-book-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: var(--s-7);
    align-items: center;
    padding: var(--s-7);
}

.member-save-book-cover img {
    width: 108px;
    height: auto;
    border-radius: var(--cover-radius);
    box-shadow: var(--cover-shadow);
}

.member-save-book-cover:hover {
    text-decoration: none;
}

.member-save-book-copy {
    min-width: 0;
}

.member-save-book-label {
    margin-bottom: var(--s-2);
    color: var(--white-62);
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.member-save-book-title {
    display: block;
    color: var(--white);
    font-size: 1.08rem;
    line-height: 1.3;
    font-weight: 800;
}

.member-save-book-author {
    margin-top: var(--s-2);
    color: var(--white-72);
    font-size: 0.88rem;
}

.member-save-organize-preview {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
    color: var(--white-92);
    font-size: 0.86rem;
    font-weight: 700;
}

.member-save-plus,
.member-save-preview-control,
.member-save-preview-controls span {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--white-22);
    border-radius: 999px;
    background: var(--white-12);
    color: var(--white);
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 800;
}

.member-save-control-preview {
    padding: var(--s-8);
}

.member-save-control-heading {
    margin-bottom: var(--s-5);
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
}

.member-save-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--white-10);
}

.member-save-preview-title {
    color: var(--white-82);
    font-size: 0.88rem;
    font-weight: 650;
}

.member-save-preview-controls {
    display: inline-flex;
    gap: var(--s-2);
}

.member-save-preview-controls span {
    width: 28px;
    height: 28px;
    font-size: 1rem;
}

.member-save-preview-stars {
    color: var(--white-90);
    letter-spacing: 0.04em;
}

.member-save-page {
    padding-top: var(--s-10);
    padding-bottom: var(--s-13);
}

.member-save-benefits {
    display: grid;
    gap: var(--s-5);
    margin-bottom: clamp(2.5rem, 7vw, 5rem);
}

.member-save-benefit {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
    padding: var(--s-7);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.member-save-benefit-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--accent-08);
    color: var(--accent);
    font-size: 1.15rem;
    font-weight: 900;
}

.member-save-benefit h2 {
    margin: 0 0 var(--s-2);
    font-size: 1rem;
    line-height: 1.3;
}

.member-save-benefit p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.member-save-feature {
    display: grid;
    gap: var(--s-9);
    align-items: center;
    padding: clamp(2rem, 6vw, 4.5rem) 0;
    border-top: 1px solid var(--divider);
}

.member-save-feature-copy {
    min-width: 0;
}

.member-save-feature-label {
    margin-bottom: var(--s-3);
    color: var(--accent);
}

.member-save-feature h2,
.member-save-final h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.member-save-feature-copy > p,
.member-save-final p {
    margin-top: var(--s-5);
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

.member-save-checklist {
    display: grid;
    gap: var(--s-4);
    margin: var(--s-7) 0 0;
    padding: 0;
    list-style: none;
}

.member-save-checklist li {
    position: relative;
    padding-left: 28px;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.5;
    font-weight: 650;
}

.member-save-checklist li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent);
    font-weight: 900;
}

.member-save-screenshot {
    min-width: 0;
    margin: 0;
}

.member-save-screenshot picture {
    display: block;
}

.member-save-screenshot img {
    display: block;
    width: 100%;
    height: auto;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface-subtle);
    box-shadow: 0 18px 46px rgba(21, 42, 48, 0.12);
}

.member-save-screenshot figcaption {
    margin-top: var(--s-3);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.member-save-final {
    display: grid;
    gap: var(--s-8);
    align-items: center;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--accent-18);
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        var(--accent-06) 0%,
        var(--accent-02) 100%
    );
}

.member-save-final-actions {
    display: grid;
    justify-items: start;
    gap: var(--s-4);
}

.member-save-final .member-save-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.member-save-final .member-save-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.member-save-final-actions span {
    color: var(--muted);
    font-size: 0.84rem;
}

.member-save-final-actions span a {
    color: var(--accent);
    font-weight: 700;
}

.member-save-btn:focus-visible,
.member-save-book-title:focus-visible,
.member-save-book-cover:focus-visible,
.member-save-final-actions a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    /*
     * On mobile, always show the explanation before
     * the supporting screenshot.
     */
    .member-save-feature .member-save-feature-copy {
        order: 1;
    }

    .member-save-feature .member-save-screenshot {
        order: 2;
    }
}

@media (min-width: 768px) {
    .member-save-hero-inner {
        grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
        gap: var(--s-13);
    }

    .member-save-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .member-save-feature {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(2rem, 6vw, 5rem);
    }

    .member-save-feature--image-right .member-save-feature-copy {
        order: 1;
    }

    .member-save-feature--image-right .member-save-screenshot {
        order: 2;
    }

    .member-save-feature--image-left .member-save-screenshot {
        order: 1;
    }

    .member-save-feature--image-left .member-save-feature-copy {
        order: 2;
    }

    .member-save-final {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-12);
    }

    .member-save-final-actions {
        justify-items: end;
        text-align: right;
    }
}

@media (max-width: 520px) {
    .member-save-actions,
    .member-save-actions .member-save-btn {
        width: 100%;
    }

    .member-save-book-card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: var(--s-5);
        padding: var(--s-5);
    }

    .member-save-book-cover img {
        width: 82px;
    }

    .member-save-organize-preview {
        margin-top: var(--s-4);
    }

    .member-save-final-actions,
    .member-save-final-actions .member-save-btn {
        width: 100%;
    }
}

.member-save-selected-note {
    margin-top: var(--s-3);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--white-82);
}