/* --- Platforms ---
   One card per place the product runs. Three of the five are not downloads
   yet, so the state is part of the card rather than something the visitor
   discovers by following a link into a page that does not exist. (#288) */

.toddyi-section__lead {
    margin: var(--toddyi-size-6px) 0 0;
    font-size: var(--toddyi-size-0-88rem);
    color: var(--text-muted);
}

.toddyi-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--toddyi-size-14px);
}

.toddyi-platform-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--surface);
    border: var(--toddyi-size-1px) solid var(--border);
    border-radius: var(--radius);
    padding: var(--toddyi-size-20px) var(--toddyi-size-18px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* Only the cards you can act on lift on hover. A card that is still a promise
   should not answer the pointer as though it were a button. */
.toddyi-platform-card--live:hover {
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--toddyi-secondary) 40%, var(--border));
}

.toddyi-platform-card--planned {
    background: color-mix(in srgb, var(--accent-light) 40%, var(--surface));
}

.toddyi-platform-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toddyi-size-40px);
    height: var(--toddyi-size-40px);
    border-radius: var(--toddyi-size-10px);
    background: var(--accent-light);
    margin-bottom: var(--toddyi-size-12px);
}

.toddyi-platform-card__title {
    margin: 0 0 var(--toddyi-size-6px);
    font-size: var(--toddyi-size-0-98rem);
    font-weight: 800;
    color: var(--text);
}

.toddyi-platform-card__desc {
    margin: 0 0 var(--toddyi-size-12px);
    font-size: var(--toddyi-size-0-85rem);
    line-height: 1.6;
    color: var(--text-muted);
}

/* Pushed to the bottom so the state and the link line up across cards whose
   descriptions run to different lengths. */
.toddyi-platform-card__state {
    margin: auto 0 0;
    padding: var(--toddyi-size-3px) var(--toddyi-size-10px);
    border-radius: var(--toddyi-size-99px);
    font-size: var(--toddyi-size-0-68rem);
    font-weight: 700;
    letter-spacing: var(--toddyi-size-0-08em);
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--accent-light);
}

.toddyi-platform-card--live .toddyi-platform-card__state {
    color: var(--primary);
    background: color-mix(in srgb, var(--toddyi-secondary) 18%, var(--accent-light));
}

.toddyi-platform-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--toddyi-size-4px);
    margin-block-start: var(--toddyi-size-12px);
    font-size: var(--toddyi-size-0-85rem);
    font-weight: 700;
    color: var(--primary);
}