/*
 * Defines the shared visual language for all V2 acquisition pages.
 * Page-specific styles keep their own storytelling while these rules align
 * typography, spacing, controls, surfaces and interaction feedback.
 */
:root {
    /* Darkened slightly so red text and white-on-red controls meet WCAG AA. */
    --v2-color-primary: #d51d3b;
    --v2-color-sky: #6fd4f0;
    --v2-color-sun: #ffc43d;
    --v2-color-heading: #202126;
    --v2-color-ink: #27272b;
    /* Remains readable on the shared white, sky-blue and yellow surfaces. */
    --v2-color-muted: #4f5056;
    --v2-color-surface-soft: #f1f9fb;
    --v2-color-surface-neutral: #f5f5f5;
    --v2-color-border: #e3e5e8;
    --v2-color-white: #fff;
    --v2-container-width: 1180px;
    --v2-gutter: 48px;
    --v2-section-space: 96px;
    --v2-radius-control: 9px;
    --v2-radius-card: 16px;
    --v2-shadow-card: 0 16px 36px rgba(32, 33, 38, .08);
    --v2-shadow-action: 0 12px 28px rgba(213, 29, 59, .2);
    --v2-transition: 180ms ease;
}

/* Map the historical page variables to one stable V2 palette. */
.home-v2-page {
    --home-v2-red: var(--v2-color-primary);
    --home-v2-blue: var(--v2-color-sky);
    --home-v2-dark: var(--v2-color-heading);
    --home-v2-ink: var(--v2-color-ink);
    --home-v2-muted: var(--v2-color-muted);
    --home-v2-pale: var(--v2-color-surface-soft);
    --home-v2-border: var(--v2-color-border);
}

.affiliation-v2-page {
    --affiliation-red: var(--v2-color-primary);
    --affiliation-blue: var(--v2-color-sky);
    --affiliation-dark: var(--v2-color-heading);
    --affiliation-ink: var(--v2-color-ink);
    --affiliation-muted: var(--v2-color-muted);
    --affiliation-pale: var(--v2-color-surface-soft);
    --affiliation-border: var(--v2-color-border);
    --affiliation-white: var(--v2-color-white);
}

.neo-v2-page {
    --neo-red: var(--v2-color-primary);
    --neo-yellow: var(--v2-color-sun);
    --neo-blue: var(--v2-color-sky);
    --neo-dark: var(--v2-color-heading);
    --neo-ink: var(--v2-color-ink);
    --neo-muted: var(--v2-color-muted);
    --neo-pale: var(--v2-color-surface-soft);
    --neo-border: var(--v2-color-border);
}

.licence-v2-page {
    --licence-red: var(--v2-color-primary);
    --licence-blue: var(--v2-color-sky);
    --licence-yellow: var(--v2-color-sun);
    --licence-dark: var(--v2-color-heading);
    --licence-muted: var(--v2-color-muted);
    --licence-pale: var(--v2-color-surface-soft);
    --licence-border: var(--v2-color-border);
    --licence-white: var(--v2-color-white);
}

.ecosystem-v2-page {
    --eco-red: var(--v2-color-primary);
    --eco-blue: var(--v2-color-sky);
    --eco-yellow: var(--v2-color-sun);
    --eco-dark: var(--v2-color-heading);
    --eco-muted: var(--v2-color-muted);
    --eco-pale: var(--v2-color-surface-soft);
    --eco-border: var(--v2-color-border);
    --eco-white: var(--v2-color-white);
}

:is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2) {
    color: var(--v2-color-ink);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

:is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2)
:is(.home-v2__container, .affiliation-v2__container, .neo-v2__container, .licence-v2__container, .ecosystem-v2__container) {
    width: min(var(--v2-container-width), calc(100% - var(--v2-gutter)));
}

/* Keep orientation visible without competing with the hero's commercial message. */
.v2-breadcrumb {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 26px;
    color: var(--v2-color-heading);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.v2-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.v2-breadcrumb a:hover,
.v2-breadcrumb a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.v2-breadcrumb [aria-current="page"] {
    font-weight: 700;
}

/* The full desktop header overlays the hero and is taller above 1280 px. */
@media (min-width: 1281px) {
    :is(
        .affiliation-v2__hero,
        .neo-v2__hero,
        .licence-v2__hero,
        .ecosystem-v2__hero
    ) {
        padding-top: 132px;
    }
}

@media (max-width: 640px) {
    .v2-breadcrumb {
        gap: 5px;
        margin-bottom: 20px;
        font-size: 12px;
    }
}

:is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2) :is(h1, h2) {
    color: var(--v2-color-heading);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.08;
}

:is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2) h1 {
    /* Strengthen desktop hierarchy while the mobile override stays compact. */
    font-size: clamp(36px, 3.2vw, 46px);
}

:is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2) h2 {
    font-size: clamp(30px, 2.5vw, 36px);
}

:is(.home-v2__eyebrow, .affiliation-v2__eyebrow, .neo-v2__eyebrow, .licence-v2__eyebrow, .ecosystem-v2__eyebrow) {
    margin-bottom: 16px;
    color: var(--v2-color-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

/*
 * Red remains the action color, but dark ink provides stronger contrast for
 * small editorial accents placed directly on the blue and yellow hero fields.
 */
:is(
    .home-v2__hero .home-v2__eyebrow,
    .affiliation-v2__hero .affiliation-v2__eyebrow,
    .neo-v2__hero .neo-v2__eyebrow,
    .licence-v2__hero .licence-v2__eyebrow,
    .ecosystem-v2__hero .ecosystem-v2__eyebrow,
    .affiliation-v2__hero-proofs strong
) {
    color: var(--v2-color-heading);
}

/* Buttons share the same silhouette and feedback across every conversion path. */
:is(.home-v2__button, .affiliation-v2__button, .neo-v2__button, .licence-v2__button, .ecosystem-v2__button) {
    min-height: 58px;
    padding: 14px 25px;
    border-radius: var(--v2-radius-control);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    transition:
        transform var(--v2-transition),
        box-shadow var(--v2-transition),
        background-color var(--v2-transition),
        border-color var(--v2-transition);
}

:is(.home-v2__button, .affiliation-v2__button, .neo-v2__button, .licence-v2__button, .ecosystem-v2__button):hover {
    transform: translateY(-2px);
}

:is(
    .home-v2__button--primary,
    .affiliation-v2__button--primary,
    .neo-v2__button--primary,
    .licence-v2__button--primary,
    .ecosystem-v2__button--primary
) {
    background: var(--v2-color-primary);
    color: var(--v2-color-white);
    box-shadow: var(--v2-shadow-action);
}

:is(
    .home-v2__button--secondary,
    .affiliation-v2__button--secondary,
    .neo-v2__button--secondary,
    .licence-v2__button--secondary,
    .ecosystem-v2__button--secondary
) {
    border-color: #cfd2d5;
    background: var(--v2-color-white);
    color: var(--v2-color-heading);
}

:is(.home-v2__button, .affiliation-v2__button, .neo-v2__button, .licence-v2__button, .ecosystem-v2__button):focus-visible,
:is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2) a:focus-visible {
    outline: 3px solid rgba(213, 29, 59, .32);
    outline-offset: 4px;
}

/* Give every post-CTA reassurance the same breathing room. */
:is(.home-v2, .affiliation-v2, .neo-v2)
:is(
    .home-v2__reassurance,
    .affiliation-v2__reassurance,
    .affiliation-v2__final-note,
    .neo-v2__reassurance
) {
    margin: 0;
    padding-top: 32px;
    line-height: 1.65;
}

/* Repeated content blocks use one radius, border and depth vocabulary. */
:is(
    .home-v2__path-card,
    .home-v2__study-card,
    .affiliation-v2__form-card,
    .neo-v2__audience-card,
    .neo-v2__price-cta,
    .licence-v2__comparison,
    .licence-v2__choice-card,
    .licence-v2__pillar-grid article,
    .ecosystem-v2__hero-proof,
    .ecosystem-v2__detail
) {
    border: 1px solid var(--v2-color-border);
    border-radius: var(--v2-radius-card);
    background: var(--v2-color-white);
    box-shadow: var(--v2-shadow-card);
}

/* Coloured editorial cards keep their page identity but use the shared silhouette. */
:is(.licence-v2__path-card, .ecosystem-v2__needs-grid a, .ecosystem-v2__applications-grid > article, .ecosystem-v2__resource-grid article) {
    border-radius: var(--v2-radius-card);
}

:is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2) ::selection {
    color: var(--v2-color-heading);
    background: rgba(213, 29, 59, .2);
}

@media (max-width: 767px) {
    :root {
        --v2-gutter: 32px;
        --v2-section-space: 72px;
    }

    :is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2) h1 {
        font-size: clamp(31px, 9vw, 36px);
    }

    :is(.home-v2, .affiliation-v2, .neo-v2, .licence-v2, .ecosystem-v2) h2 {
        font-size: clamp(26px, 7.5vw, 31px);
    }

    :is(.home-v2__actions, .affiliation-v2__actions, .neo-v2__actions, .licence-v2__actions, .ecosystem-v2__actions) {
        align-items: stretch;
        flex-direction: column;
    }

    :is(.home-v2__button, .affiliation-v2__button, .neo-v2__button, .licence-v2__button, .ecosystem-v2__button) {
        width: 100%;
    }

    :is(.home-v2, .affiliation-v2, .neo-v2)
    :is(
        .home-v2__reassurance,
        .affiliation-v2__reassurance,
        .affiliation-v2__final-note,
        .neo-v2__reassurance
    ) {
        padding-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.home-v2__button, .affiliation-v2__button, .neo-v2__button, .licence-v2__button, .ecosystem-v2__button) {
        transition: none;
    }
}