/* GEO solution pages */
.solution-page-body {
    background: var(--bg-color, #f8fafc);
}

.solution-main {
    max-width: 820px;
    margin: 0 auto;
    padding: 6rem 1.25rem 4rem;
}

.solution-breadcrumb {
    font-size: 0.875rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 1.5rem;
}

.solution-breadcrumb a {
    color: var(--primary-color, #3f6cff);
    text-decoration: none;
}

.solution-breadcrumb a:hover {
    text-decoration: underline;
}

.solution-hero {
    margin-bottom: 2rem;
}

.solution-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklch, var(--primary-color, #3f6cff) 12%, white);
    border-radius: 12px;
    margin-bottom: 1rem;
    color: var(--primary-color, #3f6cff);
    font-size: 1.25rem;
}

.solution-hero h1 {
    font-family: 'Red Hat Display', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.25;
    margin-bottom: 1rem;
    color: var(--text-color, #0f172a);
}

/* AI-extractable answer block */
.geo-answer-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    font-weight: 500;
    color: var(--text-color, #1e293b);
    border-left: 4px solid var(--primary-color, #3f6cff);
    padding-left: 1rem;
    margin: 0;
}

.geo-metrics-block,
.geo-body-block,
.solution-faq-section,
.solution-related {
    margin-bottom: 2.5rem;
}

.geo-metrics-block h2,
.geo-body-block h2,
.solution-faq-section h2,
.solution-related h2 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--text-color, #0f172a);
}

.geo-metrics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.geo-metrics-list li {
    padding: 0.875rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.geo-metrics-list li::before {
    content: '✓';
    color: var(--primary-color, #3f6cff);
    font-weight: 700;
    margin-right: 0.5rem;
}

.geo-body-block p {
    line-height: 1.7;
    color: var(--text-color, #334155);
}

.solution-cta-block {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.solution-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.solution-related li {
    margin-bottom: 0.5rem;
}

.solution-related a {
    color: var(--primary-color, #3f6cff);
    text-decoration: none;
}

.solution-related a:hover {
    text-decoration: underline;
}

/* Hub */
.solution-hub {
    max-width: 1100px;
}

.solution-hub-header {
    margin-bottom: 2.5rem;
}

.solution-hub-header h1 {
    font-family: 'Red Hat Display', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    margin-bottom: 1rem;
}

.solution-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.solution-hub-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.solution-hub-card h2 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
}

.solution-hub-card h2 a {
    color: var(--text-color, #0f172a);
    text-decoration: none;
}

.solution-hub-card h2 a:hover {
    color: var(--primary-color, #3f6cff);
}

.solution-hub-card .geo-answer-lead {
    font-size: 0.9rem;
    font-weight: 400;
    border-left-width: 3px;
    flex: 1;
}

.solution-hub-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color, #3f6cff);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.solution-hub-link:hover {
    text-decoration: underline;
}

.solution-page-body .logo a {
    display: block;
}

.solution-page-body .logo img {
    height: 36px;
    width: auto;
}

@media (max-width: 768px) {
    .solution-main {
        padding-top: 5rem;
    }
}

/* Homepage links to solution guides */
.marketing-card h3 a {
    color: inherit;
    text-decoration: none;
}

.marketing-card h3 a:hover {
    color: var(--primary-color, #3f6cff);
}

.marketing-card-guide {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color, #3f6cff);
    text-decoration: none;
}

.marketing-card-guide:hover {
    text-decoration: underline;
}

.solutions-hub-cta {
    text-align: center;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.faq-answer a {
    color: var(--primary-color, #3f6cff);
    font-weight: 600;
}