/* biz-integrations.css — integrations page (/integrations.html). */

.int-hero {
    background: var(--bg-hero);
    color: var(--fg-on-dark);
    padding: var(--space-10) 0 var(--space-9);
    text-align: center;
    border-bottom: 2px solid var(--color-brand-gold);
}
.int-hero h1 { color: #fff; font-size: 2.6rem; margin: var(--space-3) 0 var(--space-3); letter-spacing: -0.5px; }
.int-hero p { color: var(--fg-on-dark-muted); font-size: 1.15rem; max-width: 720px; margin: 0 auto; }

/* Workflow diagram */
.int-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    box-shadow: var(--shadow-elev);
    margin-bottom: var(--space-9);
}
.int-flow-step {
    text-align: center;
    padding: var(--space-4);
}
.int-flow-step__icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-md);
    background: var(--color-brand-blue-tint);
    color: var(--color-brand-blue);
    display: grid; place-items: center;
    margin: 0 auto var(--space-3);
}
.int-flow-step__label {
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    color: var(--fg-strong);
}
.int-flow-step__sub {
    font-size: 0.78rem;
    color: var(--fg-muted);
    margin-top: 2px;
}
.int-flow__arrow {
    color: var(--color-brand-gold);
    font-size: 1.4rem;
    align-self: center;
    text-align: center;
}

/* Integration cards grid */
.int-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.int-card {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-elev);
    transition: all var(--duration-base) var(--ease-soft);
    display: flex;
    flex-direction: column;
}
.int-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
    border-color: transparent;
}
.int-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    gap: 8px;
}
.int-card__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.int-card__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.int-card__name {
    font-size: 1.15rem;
    font-weight: var(--fw-bold);
    color: var(--color-brand-blue);
    letter-spacing: -0.3px;
}
.int-card__status {
    font-size: var(--fs-overline);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}
.int-card__status--ready  { background: var(--color-success-bg); color: var(--color-success); }
.int-card__status--soon   { background: var(--color-warning-bg); color: var(--color-warning); }
.int-card__status--custom { background: var(--color-info-bg); color: var(--color-info); }
.int-card__body {
    color: var(--fg-default);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-relaxed);
    flex: 1;
}

/* What you get block */
.int-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.int-benefit {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
}
.int-benefit__icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-brand-gold), var(--color-brand-gold-deep));
    color: var(--color-brand-blue);
    display: grid; place-items: center;
    margin: 0 auto var(--space-4);
}
.int-benefit__title { font-size: 1.05rem; color: var(--fg-strong); margin: 0 0 var(--space-3); }
.int-benefit__body  { color: var(--fg-default); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }

@media (max-width: 880px) {
    .int-flow { grid-template-columns: 1fr; }
    .int-flow__arrow { transform: rotate(90deg); }
    .int-grid, .int-benefits { grid-template-columns: 1fr; }
    .int-hero h1 { font-size: 1.9rem; }
}