/* ===== E-book page — "get the printed book free with a Tickmill account" landing ===== */

/* ---- 1 · offer ---- */
.ebk-hero { padding-top: 3rem; }
.ebk-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.ebk-hero__title {
    font-size: clamp(2.4rem, 4.8vw, 4.1rem);
    letter-spacing: -.035em;
    margin-bottom: .5rem;
}
.ebk-hero__book {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--accent);
    margin-bottom: 1rem;
}
.ebk-hero__lead { font-size: 1.12rem; max-width: 560px; margin-bottom: 1.8rem; }

.ebk-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2.2rem;
    margin: 0 0 2rem;
    padding: 0;
}
.ebk-facts li { display: flex; flex-direction: column; }
.ebk-facts b {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--heading);
}
.ebk-facts span {
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.ebk-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.ebk-cta__main { align-items: center; gap: .65rem; }
.ebk-cta__mark {
    width: 24px; height: 24px; flex: 0 0 24px;
    display: grid; place-items: center;
    border-radius: 7px;
    background: #0B1F3A;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .85rem;
}
.ebk-note {
    display: block;
    margin-top: .9rem;
    max-width: 460px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* book cover */
.ebk-cover { position: relative; margin: 0; justify-self: center; max-width: 420px; }
.ebk-cover::before {
    content: '';
    position: absolute;
    inset: 12% -14% -10%;
    background: radial-gradient(closest-side, var(--accent-shadow), transparent 72%);
    filter: blur(14px);
    opacity: .55;
    z-index: 0;
}
.ebk-cover img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 6px 16px 16px 6px;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .65), -8px 0 0 -3px rgba(0, 0, 0, .18);
    transform: rotate(-2deg);
    transition: transform .5s ease;
}
.ebk-cover:hover img { transform: rotate(0) translateY(-6px); }
.ebk-cover__badge {
    position: absolute;
    z-index: 2;
    /* bottom-left of the cover: the top edge would sit under the sticky site header */
    bottom: 3.4rem; left: -1rem;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: var(--accent);
    color: #1A2731;
    font-size: .78rem;
    font-weight: 700;
    box-shadow: 0 16px 30px -14px var(--accent-shadow);
}
.ebk-cover__badge .material-symbols-outlined { font-size: 18px; }
.ebk-cover figcaption {
    position: relative;
    z-index: 1;
    margin-top: 1.2rem;
    text-align: center;
    font-size: .82rem;
    color: var(--text-soft);
}

/* ---- 2 · how to get it ---- */
.ebk-how { padding-bottom: 4rem; }
.ebk-steps {
    list-style: none;
    counter-reset: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin: 0 0 3rem;
    padding: 0;
}
.ebk-step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.8rem 1.6rem 1.5rem;
}
.ebk-step__n {
    display: inline-block;
    margin-bottom: .8rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--accent);
}
.ebk-step h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.ebk-step p { margin: 0; font-size: .95rem; }

.ebk-bottom {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 1.5rem;
    align-items: start;
}
.ebk-inside {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.8rem;
}
.ebk-inside h3 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.ebk-inside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ebk-inside li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-soft); }
.ebk-inside .material-symbols-outlined { flex: 0 0 22px; font-size: 22px; color: var(--accent); }

.ebk-final {
    background: var(--bg-deep);
    border-radius: 20px;
    padding: 2rem 1.8rem;
    color: var(--text-on-deep);
}
.ebk-final h3 { color: #fff; font-size: 1.35rem; margin-bottom: .6rem; }
.ebk-final p { color: rgba(255, 255, 255, .72); margin-bottom: 1.4rem; }
.ebk-final .btn--primary { width: 100%; justify-content: center; }
.ebk-final__read {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1rem; margin-right: 1.2rem;
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
}
.ebk-final__read:hover { color: #fff; }
.ebk-final__read .material-symbols-outlined { font-size: 19px; }
.ebk-final__wa {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1rem;
    color: #4ade80;
    font-size: .9rem;
    font-weight: 600;
}
.ebk-final__wa:hover { color: #86efac; }

.ebk-disclosure {
    margin: 2.5rem auto 0;
    max-width: 820px;
    text-align: center;
    font-size: .78rem;
    line-height: 1.65;
    color: var(--text-soft);
}

/* ---- responsive ---- */
@media (max-width: 980px) {
    .ebk-hero__grid { grid-template-columns: 1fr; gap: 2.6rem; }
    .ebk-hero__copy { text-align: center; }
    .ebk-hero__lead, .ebk-note { margin-inline: auto; }
    .ebk-facts, .ebk-cta { justify-content: center; }
    .ebk-cover { max-width: 280px; }   /* headline first on narrow screens, cover below the CTA */
    .ebk-steps { grid-template-columns: 1fr; }
    .ebk-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ebk-facts { gap: .6rem 1.4rem; }
    .ebk-cta .btn { width: 100%; justify-content: center; }
}