/* ==========================================================================
   pull.credit product page — extras beyond css/product.css
   ========================================================================== */

/* Inquiry-mode pills, echoing the portal's SOFT / HARD switch */
.mode {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: middle;
}
.mode--soft { color: var(--accent-light); border: 1px solid rgba(15, 164, 184, 0.5); }
.mode--hard { color: #ff9f9f; border: 1px solid rgba(255, 120, 120, 0.55); }

/* Two-column comparison inside the split section */
.mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1.5rem;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.mode-grid > div { padding: 1.4rem; background: var(--bg-1); }
.mode-grid h3 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-1); font-weight: 600; margin-bottom: 0.75rem; }
.mode-grid li { position: relative; padding: 0.3rem 0 0.3rem 1rem; font-size: var(--step--1); line-height: 1.6; color: var(--text-2); }
.mode-grid li::before { content: ''; position: absolute; left: 0; top: 0.95em; width: 5px; height: 1px; background: var(--accent); }

/* "Planned" marker on integrations that are not shipped yet */
.planned {
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    padding: 0.1rem 0.45rem;
    vertical-align: middle;
}

@media (max-width: 640px) {
    .mode-grid { grid-template-columns: 1fr; }
}