/* ============================================================================
   SB family additions — layered on top of marketing.css (ported from the product).
   Suite-level pieces the single-product CSS didn't need: product cards + status
   badges + a couple of family-home tweaks.
   ============================================================================ */

/* -- Product grid + cards (the suite "one account, every product" section) -- */
.mkt-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 760px) {
    .mkt-product-grid { grid-template-columns: 1fr; }
}

.mkt-product-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.66);
    border: 0.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 14px 36px rgba(0, 122, 255, 0.08);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mkt-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03), 0 20px 48px rgba(0, 122, 255, 0.13);
}
.mkt-product-card--soon {
    border-style: dashed;
    border-color: var(--mkt-border);
    background: rgba(255, 255, 255, 0.4);
}

.mkt-product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.mkt-product-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mkt-primary-2), var(--mkt-primary));
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.28);
}
.mkt-product-card--soon .mkt-product-icon {
    background: linear-gradient(135deg, #C7C7CC, #AEAEB2);
    box-shadow: none;
}
.mkt-product-icon svg { width: 26px; height: 26px; }

.mkt-product-card h3 { font-size: 22px; margin-bottom: 6px; }
.mkt-product-card p  { margin: 0 0 20px; }

.mkt-product-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* -- Status badges -------------------------------------------------------- */
.mkt-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    line-height: 1;
}
.mkt-badge-live { background: rgba(52, 199, 89, 0.12);  color: #1F7A3D; }
.mkt-badge-soon { background: rgba(142, 142, 147, 0.14); color: var(--mkt-text-faint); }
.mkt-badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}

/* -- Pricing: muted "not included" feature line --------------------------- */
.mkt-pricing-feature-muted {
    color: var(--mkt-text-faint) !important;
    font-size: 13px !important;
}
.mkt-pricing-feature-muted::before { display: none !important; }

/* -- "How the suite fits together" note ----------------------------------- */
/* .mkt-shell prefix: must out-rank `.mkt-shell p`, which zeroes margin-top. */
.mkt-shell .mkt-suite-note {
    text-align: center;
    margin-top: 44px;
    color: var(--mkt-text-soft);
    font-size: 15px;
}
.mkt-suite-note strong { color: var(--mkt-text); }