/* ==========================================================================
   DigitechUS — Phase 5 additions
   Pricing guide page (/pricing) and About page (/about).
   Loads AFTER digitechus-phase1/2/3.css. Reuses the Phase 1 palette
   variables (--dtq-*) defined in digitechus-phase1.css.
   ========================================================================== */

.dt5-section {
    max-width: 1060px;
    margin: 0 auto;
    padding: 44px 20px 8px;
}

.dt5-eyebrow {
    color: var(--dtq-muted, #9fb0d8);
    letter-spacing: .18em;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.dt5-title {
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.15;
    margin: 0 0 14px;
}

.dt5-heading {
    font-size: clamp(24px, 3.5vw, 34px);
    margin: 0 0 10px;
}

.dt5-lead {
    font-size: 1.13rem;
    line-height: 1.65;
    opacity: .92;
    max-width: 68ch;
}

.dt5-sub {
    opacity: .8;
    line-height: 1.65;
    max-width: 68ch;
    margin: 0 0 8px;
}

/* ---------- Card grids (factors, services, why-us, work, team) ---------- */
.dt5-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.dt5-card {
    border: 1px solid var(--dtq-border, rgba(120, 140, 180, .25));
    border-radius: 14px;
    padding: 22px;
}
.dt5-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.dt5-card p { line-height: 1.6; opacity: .9; margin: 0 0 10px; }
.dt5-card a { text-decoration: none; }
.dt5-card a:hover { text-decoration: underline; }

.dt5-tags { opacity: .65; font-size: .9rem; }
.dt5-card-img, .dt5-team-photo {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 14px;
    display: block;
}
.dt5-team-photo { aspect-ratio: 1 / 1; object-fit: cover; }
.dt5-team-role { font-weight: 600; opacity: .75 !important; margin-top: -4px; }
.dt5-card-industry {
    letter-spacing: .12em;
    font-size: 11.5px;
    font-weight: 600;
    opacity: .6;
    margin: 0 0 6px;
}
.dt5-card-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.dt5-more { font-weight: 600; font-size: .95rem; white-space: nowrap; }

/* ---------- Pricing: service rows ---------- */
.dt5-service-list { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }

.dt5-service-row {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    border: 1px solid var(--dtq-border, rgba(120, 140, 180, .25));
    border-radius: 14px;
    padding: 22px;
}
.dt5-service-main { flex: 1 1 auto; min-width: 0; }
.dt5-service-main h3 { margin: 0 0 8px; font-size: 1.2rem; }
.dt5-service-main p { line-height: 1.6; opacity: .9; margin: 0 0 8px; }

.dt5-price {
    flex: 0 0 170px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.dt5-price-label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.dt5-price-value { font-size: 1.35rem; font-weight: 700; margin-bottom: 8px; }

@media (max-width: 680px) {
    .dt5-service-row { flex-direction: column; gap: 12px; }
    .dt5-price { flex-basis: auto; }
}

/* ---------- Pricing: budget chips ---------- */
.dt5-budgets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dt5-budget-chip {
    border: 1px solid var(--dtq-border, rgba(120, 140, 180, .35));
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: .95rem;
    background: rgba(255, 255, 255, .03);
}

/* ---------- FAQ (pricing) ---------- */
.dt5-faq-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.dt5-faq-item {
    border: 1px solid var(--dtq-border, rgba(120, 140, 180, .25));
    border-radius: 12px;
    padding: 16px 20px;
}
.dt5-faq-item summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; }
.dt5-faq-answer p { line-height: 1.65; opacity: .9; margin: 12px 0 2px; max-width: 72ch; }

/* ---------- About: process ---------- */
.dt5-process {
    list-style: none;
    counter-reset: dt5-step;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dt5-process-step {
    counter-increment: dt5-step;
    display: flex;
    gap: 16px;
    align-items: baseline;
    border: 1px solid var(--dtq-border, rgba(120, 140, 180, .25));
    border-radius: 12px;
    padding: 16px 20px;
}
.dt5-process-step::before {
    content: counter(dt5-step);
    font-weight: 700;
    font-size: 1.1rem;
    background: var(--dtq-grad, linear-gradient(90deg, #2f7bff, #8b5cf6));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dt5-process-step strong { white-space: nowrap; }
.dt5-process-step span { opacity: .88; line-height: 1.6; }

@media (max-width: 680px) {
    .dt5-process-step { flex-direction: column; gap: 4px; }
    .dt5-section { padding-top: 32px; }
}