/* Home page styles approximating the provided screenshot */

:root {
    --ap-grid-bg: #f7f8fb;
    --ap-text: #0f172a;
    --ap-muted: #475569;
    --ap-primary: #e11d48; /* brand accent */
    --ap-accent: #0ea5e9;  /* soft blue */
    --ap-card-bg: #ffffff;
    --ap-border: #e2e8f0;
}

body {
    background-color: #ffffff;
}

.ap-hero {
    background-image: radial-gradient(circle at 24px 24px, rgba(2,6,23,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Layout tuning to make space for a wider API widget */
.ap-hero .container { gap: 24px; }
.ap-hero-copy { max-width: 580px; }

.ap-eyebrow {
    font-size: 14px;
    color: var(--ap-muted);
    margin-bottom: 12px;
}

.ap-hero-title {
    font-family: AileronBold, serif;
    font-size: 48px;
    line-height: 1.1;
    color: var(--ap-text);
    margin-bottom: 12px;
}

.ap-hero-sub {
    font-size: 18px;
    color: var(--ap-muted);
    max-width: 680px;
    margin-bottom: 20px;
}

.ap-hero-cta .btn {
    padding: 16px 28px;
    border-radius: 10px;
    font-size: 16px;
}

/* Ensure spacing between adjacent buttons even if CSS gap isn't supported */
.ap-hero-cta .btn + .btn { margin-left: 12px; }
.ap-why .d-flex > .btn + .btn { margin-left: 12px; }

.ap-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* Selling points (non-clickable) */
.ap-sell-group { display:flex; flex-wrap:wrap; gap:8px; }
.ap-sell {
    display:inline-block;
    font-size: 12px;
    color: var(--ap-text);
    background: #f8fafc;
    border: 1px dashed var(--ap-border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: default;
    user-select: none;
}

.ap-btn-primary {
    background: var(--ap-primary);
    color: #fff !important;
}

.ap-btn-secondary {
    background: #fff;
    border: 1px solid var(--ap-border);
    color: var(--ap-text) !important;
}

.ap-card {
    background: var(--ap-card-bg);
    border: 1px solid var(--ap-border);
    box-shadow: 0 4px 16px rgba(15,23,42,0.06);
    border-radius: 12px;
    padding: 20px;
    max-width: 600px;
    width: 600px; /* keep width stable regardless of content */
    margin-top: 24px;
}

/* removed unused ap-card-title/list styles for compact widget */

/* Simple API widget styles */
.ap-api-widget { border:1px solid var(--ap-border); border-radius:8px; padding:12px; background:#fff; width:100%; }
.ap-api-controls { margin-bottom:8px; }
.ap-api-label { font-family: AileronBold, serif; margin-right:8px; }
.ap-select { padding:6px 8px; border:1px solid var(--ap-border); border-radius:6px; font-size:12px; width:auto; max-width:100%; }
.ap-code { background:#0b1220; color:#e2e8f0; padding:12px; border-radius:6px; font-size:13px; line-height:1.45; overflow:auto; min-height:210px; max-height:330px; width:100%; }
.ap-api-links { margin-top:8px; }
.ap-api-link { font-size:12px; text-decoration: underline; }

.ap-usecases {
    background: #fff;
}

.ap-section-title {
    font-family: AileronBold, serif;
    font-size: 28px;
    color: var(--ap-text);
    margin-bottom: 8px;
}

.ap-section-sub {
    color: var(--ap-muted);
    max-width: 900px;
}

.ap-tile {
    border: 1px solid var(--ap-border);
    border-radius: 12px;
    background: var(--ap-card-bg);
    padding: 18px;
    height: 100%;
}

/* Ensure vertical spacing between rows in Who we serve */
.ap-who .ap-tile { margin-bottom: 20px; }
/* Add vertical gap between flex rows even if tiles are 100% height */
.ap-who .row { row-gap: 24px; }
/* Fallback for older browsers/bootstrap grid */
.ap-who [class*="col-"] { margin-bottom: 24px; }

/* About page: simple avatar and logos strip */
.ap-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--ap-text);
    font-family: AileronBold, serif;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
}

.ap-team .col-12.text-center { margin-bottom: 18px; }

.ap-logos { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 36px 32px; justify-items: center; align-items: center; }
.ap-logo { max-height: 48px; height: auto; width: auto; opacity: 1; filter: none; margin: 6px 12px; object-fit: contain; flex: 0 0 auto; }
@media (min-width: 992px) { .ap-logo { max-height: 64px; } }
@media (min-width: 576px) { .ap-logos { grid-template-columns: repeat(2, minmax(140px, 1fr)); } }
@media (min-width: 992px) { .ap-logos { grid-template-columns: repeat(4, minmax(160px, 1fr)); } }
@media (min-width: 1400px) { .ap-logos { grid-template-columns: repeat(5, minmax(160px, 1fr)); } }

.ap-chip {
    display: inline-block;
    font-size: 12px;
    color: var(--ap-text);
    background: #f1f5f9;
    border: 1px solid var(--ap-border);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 10px;
}

.ap-tile-title {
    font-family: AileronBold, serif;
    color: var(--ap-text);
    margin-bottom: 6px;
}

.ap-tile-copy {
    color: var(--ap-muted);
    margin: 0;
}

/* Why AnyProp & Who we serve */
.ap-feature {
    border: 1px solid #cfe9f7;
    background: linear-gradient(0deg, rgba(14,165,233,0.06), rgba(14,165,233,0.06));
    border-radius: 12px;
    padding: 18px;
    height: 100%;
    box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}

/* Tinted feature variants */
.ap-feature--flex,
.ap-feature--clean,
.ap-feature--compliance,
.ap-feature--scale {
    background: linear-gradient(0deg, rgba(14,165,233,0.06), rgba(14,165,233,0.06));
    border-color: #cfe9f7;
}

.ap-chip-card {
    border: 1px solid var(--ap-border);
    background: var(--ap-card-bg);
    border-radius: 12px;
    padding: 14px 16px;
}

.ap-chip-card-title {
    font-family: AileronBold, serif;
    color: var(--ap-text);
    margin-bottom: 8px;
}

.ap-chip-group .ap-chip { margin-right: 8px; }

.ap-why, .ap-who { background-image: radial-gradient(circle at 24px 24px, rgba(2,6,23,0.04) 1px, transparent 1px); background-size: 48px 48px; }

@media (min-width: 992px) {
    .ap-hero-title { font-size: 56px; }
    .ap-card { margin-left: 32px; }
}

@media (max-width: 991.98px) {
    .ap-card { width: 100%; max-width: 100%; }
}