/* ============================================================
   Marketing-design components — host-agnostic, token-only.

   These were originally written as AfricaDocumentsWebSite host
   customs in wwwroot/css/custom/ and have been promoted here so
   every host using OnPoint.Razor can compose marketing pages
   with the same vocabulary. Hosts pick up their own palette
   via the brand-layer rebinds of --color-accent / --color-ink
   / --color-line / --color-surface-inverse / --font-display
   etc. No component reads a host-specific primitive.

   The .app-marketing-card / .app-pricing-card / etc. legacy
   rules that follow live in @layer legacy and predate the
   design system — they are kept until callers migrate.
   ============================================================ */

/* Foundational typography & spacing primitives */
@import url('./app-marketing-eyebrow.css');
@import url('./app-marketing-fade.css');
@import url('./app-marketing-section-head.css');
@import url('./app-marketing-container.css');

/* Page sections — composables for marketing & reference pages */
@import url('./app-marketing-hero.css');
@import url('./app-marketing-pillar-grid.css');
@import url('./app-marketing-steps.css');
@import url('./app-marketing-quote.css');
@import url('./app-marketing-cta.css');
@import url('./app-marketing-band.css');
@import url('./app-marketing-verification.css');

/* Chrome — site-wide topbar, footer, ticker bands */
@import url('./app-marketing-topbar.css');
@import url('./app-marketing-footer.css');
@import url('./app-marketing-ticker.css');
@import url('./app-marketing-trust-strip.css');

/* Trust Center primitives — list, framework cards, requirement
   grid, residency cards, jurisdictions grid, certification cards.
   Host-specific page compositions (e.g. AD's Africa subsection)
   live in the host's own custom CSS. */
@import url('./app-marketing-trust.css');


@layer legacy {

.app-marketing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--app-background-color-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    max-width: 400px;
}

    .app-marketing-card h3 {
        margin-bottom: 15px;
    }

.app-marketing-card-link {
}

    .app-marketing-card-link:any-link {
        text-decoration: none;
        color: var(--app-brand-link-color, black);
    }

    .app-marketing-card-link:hover,
    .app-marketing-card-link:focus-visible {
        color: var(--app-brand-link-color, black);
    }

.app-marketing-small-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--app-background-color-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    max-width: 250px;
}


.app-marketing-section-h1 {
    font-size: clamp(2rem, 5vw, 56px);
}

.app-marketing-section-h2 {
    font-size: clamp(1.625rem, 4vw, 42px);
}

.app-marketing-section-h3 {
    font-size: clamp(1.25rem, 2.5vw, 18.72px);
}

.app-marketing-section-h4 {
    font-size: clamp(1.125rem, 2vw, 16px);
}

.app-marketing-section-h5 {
    font-size: clamp(1rem, 1.5vw, 13.28px);
}

.app-marketing-section-h6 {
    font-size: clamp(0.95rem, 1.2vw, 10.72px);
}

.app-pricing-section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}
.app-pricing-section-header {
    border-bottom: 1pt solid lightgray;
    flex-basis: 100%;
    margin-bottom: 5px;
}
.app-pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--app-background-color-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    max-width: 400px;
}
.app-pricing-card-heading {
    border-bottom: 1pt solid lightgray;
    padding: 5px;
    width: 100%;
}
.app-pricing-card-title {
    font-size: clamp(1.25rem, 1.25rem, 32px);
    font-weight: 600;
}
.app-pricing-card-price {
    font-size: clamp(1.0rem, 1.0rem, 18px);
}
.app-pricing-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}
    .app-pricing-card-content ul {
        list-style-image: url('/_content/OnPoint.Razor/images/svg/pricing-check.svg');
    }
    .app-pricing-card-content ul li {
    }
.app-pricing-card-button {
    margin-top: 15px;
}
.app-pricing-card-link {
}

}