/* ===== "Prioritise from inbox" / "Create an AI plan" cards =====
   Shared by every static public page that carries the Get started cards
   (about-us, faqs, partners, pricing, lp/ai-plan, lp/ai-priorities). Mirrors
   the homepage's .get-started-card* and card buttons
   (src/assets/styles/css/home.css) value for value. Self-contained, so it
   doesn't depend on any page's own button classes. */

.ap-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Figma 13356:63710: the plan footnote 24px under the cards */
    width: 100%;
    max-width: 75rem;
}

.ap-cta-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-greyscale-200);
    text-align: center;
}

/* The other public pages antialias their whole body; set it here too so the
   cards' text renders at the same weight on pages that don't (pricing). */
.ap-cta-cards,
.ap-cta-note {
    -webkit-font-smoothing: antialiased;
}

.ap-cta-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 75rem;
}

.ap-cta-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    min-width: 0;
    padding: 1rem;
    border-radius: 1rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.ap-cta-card-filled {
    background: var(--color-greyscale-900);
}

/* Figma's 0.844px stroke sits inside the card, so it's drawn as an inset
   shadow and adds nothing to the card's height. */
.ap-cta-card-outline {
    box-shadow: inset 0 0 0 0.05275rem var(--color-greyscale-800);
}

/* Figma "hover" frame (13911:66719): hovering a card lifts it one grey step.
   The filled card goes 900 -> 850; the outline card fills with 900 and drops
   its border, and its white button's label turns primary. Keyboard focus
   inside a card shows the same state. */
.ap-cta-card-filled:hover,
.ap-cta-card-filled:focus-within {
    background: var(--color-greyscale-850);
}

.ap-cta-card-outline:hover,
.ap-cta-card-outline:focus-within {
    background: var(--color-greyscale-900);
    box-shadow: none;
}

.ap-cta-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 25rem;
}

/* Card titles are the homepage's H3 (20/24, 22/24, 24/28). */
.ap-cta-card-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--color-white);
}

/* Body 3 (15/20) at 375, Body 1 (17/20) from 768. */
.ap-cta-card-body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: var(--color-greyscale-50);
}

/* Figma 13356:53658: the outline card's title is greyscale 50, not white. */
.ap-cta-card-outline .ap-cta-card-title {
    color: var(--color-greyscale-50);
}

.ap-cta-card-outline .ap-cta-card-body {
    color: var(--color-greyscale-300);
}

/* Card buttons: 48px tall at 375 and 56px from 768, with Figma's 20px side
   padding (including the 1px border), 25px from 1440. */
.ap-cta-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 3rem;
    padding: 0.5rem 1.1875rem;
    border: 0.0625rem solid transparent;
    border-radius: 100rem;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ap-cta-btn-primary,
.ap-cta-btn-primary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* "Prioritise from inbox" glows with a 7px primary shadow on hover, as the
   homepage's hero tab and card button do. */
.ap-cta-btn-primary:hover {
    box-shadow: 0 0 0.4375rem 0 var(--color-primary);
}

.ap-cta-btn-light {
    background: var(--color-white);
    border-color: var(--color-greyscale-800);
    color: var(--color-greyscale-950);
}

.ap-cta-btn-light:hover,
.ap-cta-card-outline:hover .ap-cta-btn-light,
.ap-cta-card-outline:focus-within .ap-cta-btn-light {
    background: var(--color-white);
    color: var(--color-primary);
}

.ap-cta-btn:focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.125rem;
}

@media (min-width: 48rem) {
    .ap-cta-cards {
        gap: 1.5rem;
    }

    .ap-cta-card {
        gap: 3.5rem;
        padding: 1.5rem;
    }

    .ap-cta-card-text {
        gap: 1rem;
    }

    .ap-cta-card-title {
        font-size: 1.375rem;
    }

    .ap-cta-card-body {
        font-size: 1.0625rem;
    }

    .ap-cta-btn {
        height: 3.5rem;
    }
}

@media (min-width: 64rem) {
    .ap-cta-cards {
        flex-direction: row;
        align-items: stretch;
    }

    .ap-cta-card {
        flex: 1 0 0;
        padding: 3rem;
    }

    .ap-cta-card-text {
        max-width: 20rem;
    }

    .ap-cta-card-title {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }
}

@media (min-width: 90rem) {
    .ap-cta-btn {
        padding-inline: 1.5rem;
    }
}