/* ============================================================
   SKYTEX IDEAL — NEW REMAINDER SECTIONS (after locked #galimybes)
   Continues the locked white / navy / blue Skytex design system.
   No frameworks, no third-party runtime dependencies.
   ============================================================ */

/* ---- Integrations band ---- */
.integ-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    max-width: 1000px;
    margin: 0 auto;
}
.integ-panel {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
}
.integ-panel__title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-gray-900);
    margin-bottom: var(--sp-4);
    line-height: 1.3;
}
.integ-panel__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-brand-light);
    color: var(--c-brand);
    border-radius: var(--radius-sm);
}
.integ-panel__icon svg { width: 19px; height: 19px; }
.integ-panel__text {
    font-size: var(--fs-base);
    color: var(--c-gray-600);
    line-height: 1.7;
}
.integ-note {
    max-width: 840px;
    margin: var(--sp-6) auto 0;
    font-size: var(--fs-sm);
    color: var(--c-gray-400);
    text-align: center;
    line-height: 1.6;
}
.integ-cta { text-align: center; margin-top: var(--sp-8); }

/* ---- Proof / real customer testimonials ---- */
.proof-stats {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--sp-12);
    flex-wrap: wrap;
    margin-bottom: var(--sp-12);
    text-align: center;
}
.proof-stats__num {
    display: block;
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--c-brand-dark);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.proof-stats__label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-gray-500);
    font-weight: 500;
    max-width: 220px;
    margin: var(--sp-2) auto 0;
    line-height: 1.5;
}
.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    max-width: 1080px;
    margin: 0 auto;
}
.tquote {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    margin: 0;
}
.tquote__text {
    font-size: var(--fs-base);
    color: var(--c-gray-600);
    line-height: 1.75;
    font-style: italic;
    flex: 1;
    margin: 0;
}
.tquote__text p { margin: 0; }
.tquote__author {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-brand-dark);
    letter-spacing: 0.02em;
    margin-top: var(--sp-6);
}

/* ---- Steps section micro note ---- */
.steps-note {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-gray-500);
    margin-top: var(--sp-8);
    line-height: 1.6;
}

/* ---- Overflow insurance at narrow widths ---- */
/* The long phone text on the full-width ghost button must wrap instead of
   forcing horizontal scroll below ~340px (the base .btn is white-space:nowrap). */
.pricing-card__cta .btn--ghost {
    white-space: normal;
    line-height: 1.45;
    text-align: center;
}

/* ---- Responsive (keeps 320px width safe, no horizontal overflow) ---- */
@media (max-width: 980px) {
    .proof-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
    .integ-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}
@media (max-width: 768px) {
    .proof-stats { gap: var(--sp-8); }
    .proof-stats__num { font-size: var(--fs-2xl); }
    .integ-panel { padding: var(--sp-6); }
}