/*
 * Homepage features section (partials/home/features.leaf): the section intro,
 * the "Also in the box" card grid, and the integrations grid. The four scroll
 * chapters between them are styled by /css/story.css.
 *
 * Colours come from the --fk-* tokens. Nothing here hides copy; reveals are
 * owned by motion.css / motion.js and are neutralised under reduced motion.
 */

.fk-features,
.fk-integrations {
    color: var(--fk-ink);
    background: var(--fk-surface-alt);
}

#features,
#integrations {
    scroll-margin-top: 5rem;
}

.fk-features__wrap {
    box-sizing: border-box;
    width: min(100%, var(--fk-container));
    margin-inline: auto;
    padding-inline: var(--fk-gutter);
}

.fk-features__intro {
    padding-top: clamp(4rem, 2.5rem + 4vw, 7rem);
    padding-bottom: clamp(1rem, 3vw, 2.5rem);
    text-align: center;
}

.fk-features__eyebrow {
    margin: 0 0 var(--fk-space-sm);
    color: var(--fk-primary-text);
    font-size: var(--fk-font-eyebrow);
    font-weight: 600;
    letter-spacing: var(--fk-tracking-eyebrow);
    text-transform: uppercase;
}

.fk-features__intro h2,
.fk-integrations__intro h2 {
    margin: 0 auto;
    max-width: 20ch;
    color: var(--fk-ink);
    font-size: var(--fk-font-h2);
    font-weight: 700;
    letter-spacing: var(--fk-tracking-tight);
    line-height: var(--fk-leading-tight);
    text-wrap: balance;
}

.fk-features__lead,
.fk-integrations__intro p {
    margin: var(--fk-space-md) auto 0;
    max-width: 44rem;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-lead);
    line-height: var(--fk-leading-body);
    text-wrap: pretty;
}

/* ---------- Also in the box: six cards, 3 / 2 / 1 columns ---------- */

.fk-feature-grid__title {
    margin: var(--fk-space-xl) 0 var(--fk-space-lg);
    color: var(--fk-ink);
    font-size: var(--fk-font-h3);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
}

.fk-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fk-space-lg);
    padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

.fk-feature-card {
    height: 100%;
    box-sizing: border-box;
    padding: var(--fk-space-xl) var(--fk-space-lg);
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-surface-raised);
}

.fk-feature-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--fk-space-lg);
    border-radius: var(--fk-radius-md);
    background: var(--fk-primary-soft);
    color: var(--fk-primary-text);
}

.fk-feature-card__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.fk-feature-card h3 {
    margin: 0;
    color: var(--fk-ink);
    font-size: var(--fk-font-lead);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: var(--fk-leading-snug);
}

.fk-feature-card p {
    margin: var(--fk-space-sm) 0 0;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-body);
    line-height: var(--fk-leading-body);
}

@media (max-width: 1023px) {
    .fk-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .fk-feature-grid {
        grid-template-columns: 1fr;
        gap: var(--fk-space-md);
    }

    .fk-feature-card {
        padding: var(--fk-space-lg);
    }
}

/* ---------- Integrations ---------- */

/* 13 tiles in two balanced groups: nine trackers in a 3 × 3 square and four
   notification / contact tiles in a 2 × 2 square. Both squares stay full at
   every width, so no row ever ends with a lone tile. */

.fk-integrations {
    padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    background: var(--fk-surface);
}

.fk-integrations__intro {
    margin-bottom: var(--fk-space-xl);
    text-align: center;
}

.fk-integrations__intro .fk-features__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fk-integ {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: stretch;
}

.fk-integ__group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fk-integ__label {
    margin: 0 0 var(--fk-space-md);
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-eyebrow);
    font-weight: 600;
    letter-spacing: var(--fk-tracking-eyebrow);
    text-transform: uppercase;
}

.fk-integ-grid {
    display: grid;
    flex: 1;
    gap: var(--fk-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fk-integ-grid--nine {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fk-integ-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fk-integ-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--fk-space-md) var(--fk-space-md) var(--fk-space-md);
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-surface-raised);
    color: var(--fk-ink);
}

.fk-integ-tile b {
    margin-top: var(--fk-space-sm);
    font-size: var(--fk-font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fk-integ-caps {
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    line-height: 1.45;
}

.fk-integ-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-md);
    overflow: hidden;
}

.fk-integ-mark:not([class*="tile-"]) {
    background: var(--fk-surface-alt);
}

.fk-integ-mark img {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
}

.fk-integ-mark svg {
    width: 1.35rem;
    height: 1.35rem;
}

.fk-integ__more {
    margin: var(--fk-space-xl) 0 0;
    text-align: center;
}

.fk-integ__more a {
    color: var(--fk-primary-text);
    font-weight: 600;
    text-decoration: none;
}

.fk-integ__more a::after {
    content: " \2192";
}

.fk-integ__more a:hover {
    text-decoration: underline;
}

.fk-integ__more a:focus-visible {
    outline: 2px solid var(--fk-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

/* The hover lift uses the individual `translate` property so it never fights
   the data-reveal `transform`; the reveal transitions are restated with their
   stagger delay because this list replaces motion.css's. */
@media (prefers-reduced-motion: no-preference) {
    .fk-feature-card,
    .fk-integ-tile {
        transition:
            opacity var(--fk-duration-reveal) var(--fk-ease-out) var(--fk-reveal-delay, 0ms),
            transform var(--fk-duration-reveal) var(--fk-ease-out) var(--fk-reveal-delay, 0ms),
            filter var(--fk-duration-reveal) var(--fk-ease-out) var(--fk-reveal-delay, 0ms),
            translate var(--fk-duration-base) var(--fk-ease-out),
            box-shadow var(--fk-duration-base) var(--fk-ease-out);
    }

    .fk-feature-card:hover,
    .fk-integ-tile:hover {
        translate: 0 -4px;
        box-shadow: var(--fk-shadow-xl);
    }
}

@media (max-width: 1023px) {
    .fk-integ {
        grid-template-columns: 1fr;
    }

    .fk-integ-grid--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fk-integ-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone width: the nine trackers stay a 3 × 3 square of compact tiles, the
   capability line drops (the full list is on /integrations). */
@media (max-width: 559px) {
    .fk-integ-grid--nine .fk-integ-tile {
        align-items: center;
        padding: var(--fk-space-sm) var(--fk-space-2xs);
        text-align: center;
    }

    .fk-integ-grid--nine .fk-integ-caps {
        display: none;
    }

    .fk-integ-grid--nine .fk-integ-tile b {
        font-size: var(--fk-font-small);
    }

    .fk-integ-tile {
        padding: var(--fk-space-sm);
    }
}