/* ==========================================================================
   DigitechUS — Phase 4 additions
   "What happens next" trust block, Turnstile spacing, video testimonials.
   Palette reuses the Phase 1 variables (--dtq-*) with the same fallbacks
   Phase 2 uses. Load AFTER digitechus-phase1.css.
   ========================================================================== */

/* ---------- What happens next (under the quote form) ---------- */
.dt4-next-steps {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--dtq-border, #24315f);
}

.dt4-next-title {
    color: var(--dtq-text, #eef1fb);
    font-size: 24px;
    margin: 0 0 20px;
    text-align: center;
}

.dt4-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dt4-step {
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dtq-border, #24315f);
    border-radius: 14px;
    padding: 18px 16px;
}

.dt4-step-num {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--dtq-grad, linear-gradient(90deg, #2f7bff 0%, #8b5cf6 100%));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dt4-step-body strong {
    display: block;
    color: var(--dtq-text, #eef1fb);
    font-size: 15.5px;
    margin-bottom: 5px;
}

.dt4-step-body p {
    color: var(--dtq-muted, #9fb0d8);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.dt4-trust {
    color: var(--dtq-muted, #9fb0d8);
    font-size: 14px;
    text-align: center;
    margin: 22px 0 0;
}
.dt4-trust a { color: #7aa8ff; }

/* ---------- Turnstile widget (only rendered when keys are set) ---------- */
.dt4-turnstile {
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
}

/* ---------- Video testimonials ---------- */
.dt4-section {
    background: var(--dtq-navy, #060b1d);
    padding: 72px 20px;
}

.dt4-title {
    color: var(--dtq-text, #eef1fb);
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.15;
    margin: 0 auto 30px;
    max-width: 1060px;
}
.dt4-title-left { text-align: left; }

.dt4-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    max-width: 1060px;
    margin: 0 auto;
}

.dt4-card {
    background: var(--dtq-card, #0c1430);
    border: 1px solid var(--dtq-border, #24315f);
    border-radius: 16px;
    padding: 14px;
    margin: 0;
}

.dt4-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
}
.dt4-video-error { color: var(--dtq-muted, #9fb0d8); }
.dt4-video-error a { color: #7aa8ff; text-decoration: underline; }

.dt4-author {
    color: var(--dtq-muted, #9fb0d8);
    margin-top: 12px;
    font-size: 15px;
}
.dt4-author strong { color: var(--dtq-text, #eef1fb); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .dt4-steps { grid-template-columns: 1fr; }
    .dt4-section { padding: 52px 16px; }
}