/* ==========================================================================
   SafePal in-app DApp guide — wallets chrome, screenshot steps.
   ========================================================================== */

.safepal-page {
    padding-bottom: var(--sp-10);
}

.safepal-hero {
    padding-top: var(--sp-9);
    padding-bottom: var(--sp-6);
    background:
        radial-gradient(60% 40% at 50% 0%,
            rgba(64, 209, 253, 0.06),
            transparent 70%);
}
.safepal-hero .section__header { margin-bottom: 0; }
.safepal-hero .section__title {
    font-size: clamp(32px, 2vw + 20px, 42px);
}
.safepal-hero .section__subtitle {
    max-width: 42ch;
    font-size: 18px;
    line-height: 1.55;
}

.safepal-shell {
    display: grid;
    gap: var(--sp-6);
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-8);
}

.safepal-lede-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--color-fg-3);
}
.safepal-lede-label::before {
    content: "// ";
    color: var(--color-cyan);
}

.safepal-deck {
    border: var(--hairline);
    border-radius: var(--radius-sharp);
    background: var(--grad-card-glow);
    padding: 28px 22px 22px;
    animation: safepal-deck-in 520ms ease both;
}
.safepal-deck:nth-of-type(2) { animation-delay: 80ms; }
.safepal-deck:nth-of-type(3) { animation-delay: 160ms; }
.safepal-deck:last-of-type {
    background: var(--grad-card-glow-inv);
    animation-delay: 240ms;
}

.safepal-deck__head {
    margin: 0 0 18px;
    padding: 0 6px;
}

.safepal-deck__eyebrow {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--color-fg-3);
}
.safepal-deck__eyebrow::before {
    content: "// ";
    color: var(--color-cyan);
}

.safepal-deck__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(26px, 1.4vw + 18px, 32px);
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: var(--color-fg);
}

.safepal-steps {
    margin: 0;
    padding: 0 6px 0 2.4rem;
    list-style: decimal;
}

.safepal-step {
    margin: 0 0 1.6em;
    list-style: decimal;
}
.safepal-step:last-child { margin-bottom: 0; }

.safepal-step::marker {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-cyan);
}

.safepal-step__caption {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-fg-2);
}

.safepal-step__shot {
    margin: 0;
}

.safepal-step__shot img {
    display: block;
    width: 100%;
    max-width: min(22rem, 100%);
    height: auto;
    border: var(--hairline);
    border-radius: var(--radius-sharp);
}

.safepal-notes {
    list-style: none;
    margin: 0;
    padding: 0 6px;
}

.safepal-notes li {
    position: relative;
    margin: 0 0 0.7em;
    padding-left: 1.05em;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-fg-2);
}
.safepal-notes li:last-child { margin-bottom: 0; }

.safepal-back {
    margin: 0;
    padding: 0 6px;
    min-width: 0;
}
.safepal-back .btn {
    max-width: 100%;
    height: auto;
    min-height: var(--btn-h);
    white-space: normal;
    box-sizing: border-box;
}

.safepal-notes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--color-cyan);
}

@keyframes safepal-deck-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 639px) {
    .safepal-deck {
        padding: 22px 16px 16px;
    }
    .safepal-steps {
        padding-left: 2rem;
    }
    .safepal-step__caption,
    .safepal-notes li {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .safepal-deck {
        animation: none;
    }
}

@media print {
    .site-header,
    .site-footer,
    .cookie-notice,
    .page-loader {
        display: none !important;
    }
    .safepal-page,
    .safepal-hero,
    .safepal-deck,
    .safepal-step__caption,
    .safepal-notes li {
        color: #111 !important;
        background: #fff !important;
    }
}