/*
 * Team76.FluentExpress component CSS.
 *
 * Consolidates layout / chrome styles for ExpressRoot / PageLayout / AppHeader /
 * AppFooter / DsCard. Loaded once via _content/Team76.FluentExpress/fluentexpress.css
 * so multi-instance components (DsCard in particular) don't emit duplicate
 * <style> blocks per render.
 *
 * Variant rules (.fe-card--{variant}) live here as PUBLIC overrides — hosts
 * may add their own rules in tokens.<surface>.css or host CSS without fighting
 * Blazor's scoped-CSS attribute selectors.
 */

/* Layout — PageLayout */
.fe-page-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.fe-page-layout__body { flex: 1 1 auto; }

/* Layout — AppHeader */
.fe-header { background: var(--neutral-fill-stealth-rest, transparent); }
.fe-header__container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 4rem;
}
.fe-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    color: inherit;
}
.fe-header__nav {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}
.fe-header__nav-link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}
.fe-header__nav-link:hover { background: rgba(0,0,0,0.06); }
.fe-header__right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Layout — AppFooter */
.fe-footer { padding: 2.5rem 0 1.5rem; }
.fe-footer__container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.fe-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2rem;
}
.fe-footer__heading {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fe-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fe-footer__links li { margin: 0.375rem 0; }
.fe-footer__link {
    text-decoration: none;
    color: inherit;
    font-size: 0.875rem;
}
.fe-footer__link:hover { text-decoration: underline; }
.fe-footer__legal {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Cards — DsCard */
.fe-card__header { margin-bottom: 0.75rem; font-weight: 600; }
.fe-card__body   { margin-bottom: 0.75rem; }
.fe-card__footer { margin-top: 0.5rem; opacity: 0.8; font-size: 0.875rem; }
/* Variant hook classes (.fe-card--{default|stat|step|feature}) — hosts override here. */

/* Storyboard — DesignSystemPage shell + per-primitive example wrappers */
.fe-storyboard {
    max-width: 64rem;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}
.fe-storyboard__intro { margin-bottom: 2rem; }
.fe-storyboard__section {
    margin: 2.5rem 0;
    padding: 1.5rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.5rem;
}
.fe-storyboard__section h2 { margin-top: 0; }
.fe-storyboard__hint { opacity: 0.7; font-size: 0.875rem; }

.fe-example-frame {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.5rem;
    overflow: hidden;
}
.fe-example-tile {
    padding: 1rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.fe-example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}
.fe-example-band {
    padding: 1rem;
    text-align: center;
}
.fe-example-band--header { background: rgba(0,120,212,0.08); }
.fe-example-band--body   { background: rgba(0,0,0,0.02); display: flex; align-items: center; justify-content: center; height: 100%; }
.fe-example-band--footer { background: rgba(0,0,0,0.05); }

/* PageLayoutExample frame: override PageLayout's 100vh inside the bordered example. */
.fe-example-frame--scaled { height: 20rem; }
.fe-example-frame--scaled .fe-page-layout { min-height: 100%; }

/* ==================== Functions module (#2274) ==================== */

.function-info-section {
    margin-bottom: 2rem;
}

.function-description {
    line-height: 1.6;
    color: var(--po-text-body);
}

.data-table th:first-child,
.data-table td:first-child {
    width: 25%;
}

/* ==================== Blueprints module (#2275) ==================== */
/* ==================== BlueprintHowTo.razor ==================== */

.howto-help {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--po-text-secondary);
}

.howto-help summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--po-primary);
}

.howto-help summary:hover {
    text-decoration: underline;
}

.howto-help-content {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--po-background);
    border: 1px solid var(--po-border);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

.howto-help-content ol {
    margin: 0;
    padding-left: 1.25rem;
}

.howto-help-content li {
    margin-bottom: 0.25rem;
}

/* ==================== Pages/Blueprint.razor ==================== */

.preview-hint {
    font-size: 0.875rem;
    color: var(--po-text-secondary);
    margin-bottom: 0.75rem;
}

.blueprint-tags {
    margin-top: 2rem;
}

.loading-state {
    text-align: center;
    padding: 3rem 0;
    color: var(--po-text-secondary);
}

/* ==================== TagsDisplay.razor ==================== */

.tags-display {
    background: var(--po-background, #f9fafb);
    padding: 1rem;
    border-radius: 0.5rem;
}

.tags-display strong {
    display: block;
    font-size: 0.875rem;
    color: var(--po-text-primary, #374151);
    margin-bottom: 0.5rem;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tags-display .tag {
    display: inline-block;
    background: var(--po-border, #e5e7eb);
    color: var(--po-text-secondary, #6b7280);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
}

/* ==================== Lambdas module (#2276) ==================== */
.lambda-card-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
}

.lambda-count {
    font-size: 0.75rem;
    color: var(--po-text-muted);
}

.lambda-icon {
    font-size: 1.5rem;
    color: var(--brand-700);
}

.list-card-content h3 code {
    font-family: monospace;
    font-size: 0.9375rem;
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ==================== LambdaFormulaBlock.razor ==================== */

.lambda-formula-block {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border: 1px solid var(--po-border);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}

.lambda-formula-block .lambda-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--po-text-secondary);
    display: block;
    margin-bottom: 0.375rem;
}

.lambda-formula-block .lambda-name {
    font-family: monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--po-text-primary);
}

.lambda-formula-block .formula-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.lambda-formula-block .formula-header .lambda-label {
    margin-bottom: 0;
}

.lambda-formula-block .formula-code {
    display: block;
    background: var(--po-background);
    border: 1px solid var(--po-border);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.lambda-formula-block .copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: white;
    color: var(--po-text-primary);
    border: 1px solid var(--po-border);
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    font-size: 0.75rem;
}

.lambda-formula-block .copy-btn:hover {
    border-color: var(--po-primary);
    color: var(--po-primary);
}

.lambda-formula-block .copied-text {
    color: var(--po-success, #16a34a);
    font-weight: 500;
}

.lambda-formula-block .lambda-entry-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--po-text-secondary);
}

/* ==================== Pages/Lambda.razor ==================== */

.lambda-info-section {
    margin-bottom: 2rem;
}

.lambda-description {
    line-height: 1.6;
    color: var(--po-text-body);
}

.info-hint {
    color: var(--po-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* `.data-table th/td:first-child width: 25%` already lives in functions.css (#2255) —
   the rule applies site-wide via a global stylesheet so duplicating it here is dead weight. */

/* ==================== Content module (#2277) ==================== */
.doc-sidebar {
    font-size: 0.875rem;
}

/* ==================== DocProductSearch.razor ==================== */

.docs-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

/* ==================== DocTheorySearch.razor ==================== */

.docs-categories {
    margin-bottom: 3rem;
}

.category-section {
    margin-bottom: 2.5rem;
}

.category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--po-border);
}

.docs-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ==================== CategoryCard.razor ==================== */

.category-card {
    display: block;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s;
}

.category-card:hover {
    border-color: var(--brand-100);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.category-card-icon {
    width: 3rem;
    height: 3rem;
    background: var(--brand-50);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.category-card:hover .category-card-icon {
    background: var(--brand-100);
}

.category-card-icon :deep(svg) {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-700);
}

.category-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.5rem;
}

.category-card:hover h2 {
    color: var(--brand-700);
}

.category-card p {
    font-size: 0.875rem;
    color: var(--po-text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.category-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-count {
    font-size: 0.75rem;
    color: var(--po-text-muted);
}

.category-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--brand-700);
}

.category-card:hover .category-link {
    color: var(--brand-800);
}

.category-link svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* ==================== Doc.razor ==================== */

.doc-functions {
    background: var(--po-background);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.function-tag {
    display: inline-block;
    background: var(--po-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: monospace;
    margin: 0.25rem;
    text-decoration: none;
}

.function-tag:hover {
    background: var(--po-primary-dark);
}

.more-functions {
    color: var(--po-text-secondary);
    font-size: 0.75rem;
}

/* ==================== DocsProduct.razor ==================== */

/* Theory CTA */
.theory-cta {
    background: var(--po-background);
    border: 1px solid var(--po-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.theory-cta h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.75rem;
}

.theory-cta p {
    color: var(--gray-700);
    margin: 0 0 1rem;
    line-height: 1.6;
}

.theory-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--brand-600);
    color: white;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.theory-cta .btn-primary:hover {
    background: var(--brand-700);
    color: white;
}

.arrow-icon {
    width: 1rem;
    height: 1rem;
}

/* ==================== DocsTheory.razor ==================== */

/* Product CTA */
.product-cta {
    background: var(--po-background);
    border: 1px solid var(--po-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.product-cta h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.75rem;
}

.product-cta p {
    color: var(--gray-700);
    margin: 0 0 1rem;
    line-height: 1.6;
}

.product-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--brand-600);
    color: white;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.product-cta .btn-primary:hover {
    background: var(--brand-700);
    color: white;
}

.arrow-icon {
    width: 1rem;
    height: 1rem;
}

/* ==================== Search module (#2278) ==================== */

.sidebar-filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--po-text-body);
    font-size: 0.875rem;
    padding: 0;
    width: 100%;
    text-align: left;
}

.sidebar-filter-btn:hover {
    color: var(--brand-600);
}

.sidebar-filter-btn.active {
    color: var(--brand-600);
    font-weight: 600;
}

.search-results-count {
    font-size: 0.875rem;
    color: var(--po-text-secondary);
    margin-bottom: 1rem;
}

.search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-result-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.search-result-header h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--po-text-primary);
}

.search-result-description {
    font-size: 0.8125rem;
    color: var(--po-text-secondary);
    margin: 0.25rem 0 0;
    line-height: 1.4;
}

.search-result-category {
    font-size: 0.75rem;
    color: var(--po-text-muted);
    margin: 0.25rem 0 0;
}

/* ==================== UnitConverter module (#2279) ==================== */
    font-size: 0.875rem;
}

.unitconverter-sidebar :deep(.sidebar-section-content) {
    max-height: 400px;
    overflow-y: auto;
}

/* ==================== UnitCategoryCard.razor ==================== */

.unit-category-card {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 8px;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.2s;
    display: block;
}

.unit-category-card:hover {
    border-color: var(--po-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.swap-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--po-primary);
    flex-shrink: 0;
}

.category-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--po-primary);
}

.sample-units {
    font-size: 0.8125rem;
    color: var(--po-text-secondary);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==================== LambdaHelp.razor ==================== */

.lambda-help {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--po-text-secondary);
}

.lambda-help summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--po-primary);
}

.lambda-help summary:hover {
    text-decoration: underline;
}

.lambda-help-content {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--po-background);
    border: 1px solid var(--po-border);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

.lambda-help-content p {
    margin: 0 0 0.5rem;
}

.lambda-help-content ol {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
}

.lambda-help-content li {
    margin-bottom: 0.25rem;
}

.lambda-help-content code {
    background: var(--brand-50);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.8125rem;
}

.lambda-help-content p:last-child {
    margin-bottom: 0;
}

/* ==================== UnitConverter.razor ==================== */

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@@media (max-width: 640px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== UnitConverterCategory.razor ==================== */

.copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--po-text-primary);
    border: 1px solid var(--po-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.copy-btn:hover {
    border-color: var(--po-primary);
    color: var(--po-primary);
}

.conversion-table-section {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.conversion-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.conversion-table-header h2 {
    font-size: 1.25rem;
    margin: 0;
}

.conversion-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed;
}

.conversion-table .col-unit { width: 100px; }
.conversion-table .col-name { width: auto; }
.conversion-table .col-factor { width: 180px; }
.conversion-table .col-shift { width: 120px; }

.conversion-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--po-border);
    color: var(--po-text-secondary);
    font-weight: 500;
    font-size: 0.8125rem;
}

.conversion-table th.col-factor,
.conversion-table th.col-shift {
    text-align: right;
}

.conversion-table td {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--po-border);
}

.conversion-table .base-row td {
    background: var(--brand-50);
}

.conversion-table .unit-cell {
    font-weight: 600;
    color: var(--po-primary);
}

.conversion-table .factor-cell {
    font-family: 'Cascadia Mono', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.related-content {
    margin-top: 2rem;
}

.related-functions {
    margin-bottom: 1.5rem;
}

.related-blueprints {
    margin-top: 1.5rem;
}

/* ==================== UnitConverterPanel.razor ==================== */

.converter-card {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.converter-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-right: 47px;
    margin-bottom: 0.25rem;
}

.converter-labels label {
    font-weight: 500;
    color: var(--po-text-primary);
}

.converter-units {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.converter-values {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.unit-dropdown {
    width: 100%;
}

.value-input {
    width: 100%;
}

.swap-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--po-text-primary);
    border: 1px solid var(--po-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.swap-btn:hover {
    border-color: var(--po-primary);
    color: var(--po-primary);
}

.swap-btn svg {
    width: 1rem;
    height: 1rem;
}

.result-display {
    background: var(--po-background);
    border: 1px solid var(--po-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.result-display.success {
    background: var(--brand-50);
}

.result-value {
    font-weight: 600;
    font-family: monospace;
}

.result-placeholder {
    color: var(--po-text-secondary);
}

.copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--po-text-primary);
    border: 1px solid var(--po-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.copy-btn:hover {
    border-color: var(--po-primary);
    color: var(--po-primary);
}

.excel-formulas {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.formula-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 0.75rem;
    align-items: start;
}

.formula-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--po-text-secondary);
    white-space: nowrap;
}

.formula-code {
    background: var(--brand-50);
    color: var(--po-text-primary);
    border: 1px solid var(--po-border);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre;
}

@@media (max-width: 640px) {
    .converter-labels {
        grid-template-columns: 1fr;
        padding-right: 0;
    }

    .converter-labels label:last-child {
        margin-top: 0.75rem;
    }

    .converter-units {
        grid-template-columns: 1fr;
    }

    .converter-values {
        grid-template-columns: 1fr;
        padding-right: 0;
    }

    .formula-row {
        grid-template-columns: 1fr auto;
    }

    .formula-label {
        grid-column: 1 / -1;
    }
}

/* ==================== Release module (#2280) ==================== */

/* ==================== ReleaseSidebar.razor ==================== */

.release-sidebar {
    font-size: 0.875rem;
}

/* ==================== ChangeLog.razor ==================== */

.release {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--gray-100);
}

.release:last-child {
    border-bottom: none;
}

.release h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.release-date {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gray-500);
}

.release-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.release-badge.major {
    background: var(--brand-100, #dcfce7);
    color: var(--brand-800, #166534);
}

.release-badge.feature {
    background: #dbeafe;
    color: #1e40af;
}

.release-badge.maintenance {
    background: var(--gray-100);
    color: var(--po-text-body);
}

.release h3 {
    font-size: 1.125rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--gray-800);
}

.release ul {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.release li {
    margin-bottom: 0.375rem;
    line-height: 1.6;
    color: var(--gray-700);
}

.release ul.breaking li {
    color: #b45309;
}

.release code {
    background: var(--gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

/* TOC styles live in OnThisPage component (see .on-this-page in OnThisPage.razor). */

/* ==================== Download.razor ==================== */

/* Download Hero */
.download-hero {
    background: var(--brand-600);
    padding: 4rem 2rem;
}

.download-hero .hero-content {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

.download-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.download-hero .hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.prerequisite-note {
    max-width: 36rem;
    margin: 0 auto 1.5rem;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    line-height: 1.5;
}

.prerequisite-note strong {
    color: white;
}

.prerequisite-note a {
    color: white;
    text-decoration: underline;
}

.prerequisite-note a:hover {
    color: var(--brand-100);
}

.download-actions {
    margin-bottom: 1.5rem;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--brand-700);
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid white;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-download:hover {
    background: var(--brand-800);
    color: white;
}

.btn-download.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.version-info {
    margin-bottom: 2rem;
}

.version-info p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0.25rem 0;
}

.version-info a {
    color: white;
    text-decoration: underline;
}

.version-info a:hover {
    color: var(--brand-100);
}

/* FAQ Section */
.faq-section {
    padding: 4rem 1rem;
    background: rgba(33, 115, 70, 0.03);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 64rem;
    margin: 0 auto 2rem;
}

@@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

.faq-footer {
    text-align: center;
}

.faq-footer p {
    color: var(--gray-600);
}

.faq-footer a {
    color: var(--brand-700);
}

.faq-footer a:hover {
    color: var(--brand-800);
}

/* Section Styles (shared) */
.section-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-title {
    text-align: center;
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.section-divider {
    width: 6rem;
    height: 2px;
    background: var(--brand-600);
    opacity: 0.2;
    margin: 0 auto 2rem;
    border-radius: 1px;
}

.section-subtitle {
    text-align: center;
    color: var(--gray-700);
    font-size: 1.25rem;
    margin: 0 auto 2.5rem;
}

/* Loading */
.loading-indicator {
    text-align: center;
    padding: 4rem 0;
}

.loading-indicator p {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==================== InstallConfirmation.razor ==================== */

.confirmation-page {
    max-width: 48rem;
}

.confirmation-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--po-border);
}

.confirmation-icon {
    font-size: 3rem;
    color: var(--brand-600);
    margin-bottom: 1rem;
}

.confirmation-header h1 {
    font-size: 2rem;
}

.confirmation-body {
    line-height: 1.7;
}

.version-note {
    font-size: 1.125rem;
    color: var(--gray-700);
    margin-bottom: 2rem;
}

.next-steps {
    margin-bottom: 2rem;
}

.next-steps h2, .helpful-links h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.next-steps ol {
    padding-left: 1.5rem;
}

.next-steps li {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.helpful-links ul {
    list-style: none;
    padding: 0;
}

.helpful-links li {
    margin-bottom: 0.5rem;
}

.helpful-links a {
    color: var(--brand-700);
    text-decoration: none;
}

.helpful-links a:hover {
    color: var(--brand-800);
    text-decoration: underline;
}

/* ==================== UninstallConfirmation.razor ==================== */

.confirmation-page {
    max-width: 48rem;
}

.confirmation-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--po-border);
}

.confirmation-icon {
    font-size: 3rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.confirmation-header h1 {
    font-size: 2rem;
}

.confirmation-body {
    line-height: 1.7;
}

.version-note {
    font-size: 1.125rem;
    color: var(--gray-700);
    margin-bottom: 2rem;
}

.feedback-section, .reinstall-section {
    margin-bottom: 2rem;
}

.feedback-section h2, .reinstall-section h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.feedback-section p, .reinstall-section p {
    color: var(--gray-700);
}

.feedback-section a, .reinstall-section a {
    color: var(--brand-700);
    text-decoration: none;
}

.feedback-section a:hover, .reinstall-section a:hover {
    color: var(--brand-800);
    text-decoration: underline;
}

/* ==================== Update.razor ==================== */

.update-page {
    max-width: 48rem;
}

.update-page h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.version-card {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.version-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.version-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.version-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
}

.update-status {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--po-border);
}

.update-status svg {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.update-status h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.update-status p {
    font-size: 0.875rem;
    margin: 0;
}

.update-available svg { color: var(--brand-600); }
.update-available h2 { color: var(--gray-900); }
.update-available p { color: var(--gray-600); }

.update-current svg { color: var(--brand-600); }
.update-current h2 { color: var(--brand-800); }
.update-current p { color: var(--brand-700); }

.update-error svg { color: #dc2626; }
.update-error h2 { color: #991b1b; }
.update-error p { color: #b91c1c; }

.btn-update {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.75rem 1.5rem;
    background: var(--brand-700);
    color: white;
    font-weight: 600;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-update:hover {
    background: var(--brand-800);
    color: white;
}

@@media (max-width: 480px) {
    .version-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== Marketing module (#2281) ==================== */
 * Razor's scoped-CSS `:deep()` syntax is dropped — these rules are global now,
 * so `.card-icon :deep(svg)` becomes `.card-icon svg`.
 */

/*
 * ── IncludedCard (DS-3 of #2224) ──
 *
 * Compact "what's included" card — centered icon, h3, short paragraph. Used on
 * Academics' What's Included section. The <IncludedCard> component
 * (Components/Cards/IncludedCard.razor) owns the markup; this stylesheet owns
 * the visual definition.
 */
.included-card {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.included-card .included-icon {
    margin-bottom: 1rem;
}

.included-card .included-icon i {
    font-size: 2rem;
    color: var(--brand-600);
}

.included-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--gray-900);
}

.included-card p {
    color: var(--gray-700);
    margin: 0;
    font-size: 0.875rem;
}

/*
 * ── QualifyCard (DS-3 of #2224) ──
 *
 * Larger card with brand-100 border + hover-lift transition. Used on
 * Academics' Who Qualifies section. The <QualifyCard> component
 * (Components/Cards/QualifyCard.razor) owns the markup.
 */
.qualify-card {
    background: white;
    border: 2px solid var(--brand-100);
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.2s;
}

.qualify-card:hover {
    border-color: var(--brand-200);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.qualify-card .qualify-icon {
    margin-bottom: 1rem;
}

.qualify-card .qualify-icon i {
    font-size: 2.5rem;
    color: var(--brand-600);
}

.qualify-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--gray-900);
}

.qualify-card p {
    color: var(--gray-700);
    margin: 0;
    font-size: 0.9375rem;
}

/*
 * ─────────────────────────────────────────────────────────────────────────
 * ── Tool-page shared patterns (#2231 phase 2) ──
 *
 * The 6 ToolN pages (BlueprintManager, CaseGeneration, EclipseImport,
 * FunctionBrowser, LasImport, UnitConverter) duplicated several class
 * groups inline:
 *   - screenshot-grid / -card / -placeholder / -pending / -caption
 *   - steps-grid / step-item / step-number (3 import-style pages)
 *   - result-showcase / result-image (same 3 pages)
 *   - btn-browse (4 pages)
 *
 * Promoted to module-global rules here; the inline duplicates removed from
 * each .razor. min-height for the placeholder is normalized to 200px
 * (CaseGen/Eclipse/LasImport had 180px — visually negligible delta).
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ── Screenshot showcase pattern ── */
.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .screenshot-grid {
        grid-template-columns: 1fr;
    }
}

.screenshot-card {
    text-align: center;
}

.screenshot-placeholder {
    background: var(--gray-100);
    border: 2px dashed var(--gray-300);
    border-radius: 0.5rem;
    overflow: hidden;
    min-height: 200px;
}

.screenshot-placeholder img,
.screenshot-placeholder a.glightbox {
    width: 100%;
    display: block;
    border-radius: 0.5rem;
}

.screenshot-placeholder a + .screenshot-pending,
.screenshot-placeholder img + .screenshot-pending {
    display: none;
}

.screenshot-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--gray-500);
    font-style: italic;
    padding: 1rem;
    font-size: 0.875rem;
}

.screenshot-caption {
    color: var(--gray-600);
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

/* ── Steps-grid pattern (CaseGen, Eclipse, LasImport) ── */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

.step-item {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.step-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.5rem;
}

.step-item > p {
    color: var(--gray-600);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

/* ── Result showcase pattern (CaseGen, Eclipse, LasImport) ── */
.result-showcase {
    margin: 3rem auto 0;
    max-width: 1100px;
    text-align: center;
}

.result-showcase h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.5rem;
}

.result-showcase > p {
    color: var(--gray-600);
    font-size: 1rem;
    max-width: 720px;
    margin: 0 auto 1.5rem;
}

.result-image {
    background: var(--gray-100);
    border: 2px dashed var(--gray-300);
    border-radius: 0.75rem;
    overflow: hidden;
}

.result-image img,
.result-image a.glightbox {
    width: 100%;
    display: block;
    border-radius: 0.5rem;
}

.result-image a + .screenshot-pending,
.result-image img + .screenshot-pending {
    display: none;
}

/* ── Format-table pattern (Eclipse + LasImport) ── */
.format-table {
    max-width: 700px;
    margin: 0 auto;
}

.format-table table {
    width: 100%;
    border-collapse: collapse;
}

.format-table th,
.format-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--po-border);
}

.format-table th {
    font-weight: 600;
    color: var(--gray-900);
    background: rgba(33, 115, 70, 0.03);
}

.format-table td {
    color: var(--gray-700);
}

.format-table code {
    background: var(--brand-50);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 600;
    color: var(--brand-700);
}

/* ── Tool CTA centering (BlueprintManager, FunctionBrowser, UnitConverter) ──
 * Wraps the "Browse Now →" anchor below a tool page's last PageSection. */
.tool-cta-center {
    text-align: center;
    margin-top: 2rem;
}

/* ── Browse button (BlueprintManager, FunctionBrowser, UnitConverter, others) ── */
.btn-browse {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--brand-700);
    color: white;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-browse:hover {
    background: var(--brand-800);
    color: white;
}

/* ── Tool UnitConverter-specific ── */
.tool-unitconverter-page .pane-screenshot {
    max-width: 600px;
    margin: 0 auto;
}

.tool-unitconverter-page .unit-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .tool-unitconverter-page .unit-types {
        grid-template-columns: 1fr;
    }
}

.tool-unitconverter-page .unit-type {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.tool-unitconverter-page .unit-type h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-700);
    margin: 0 0 0.5rem;
}

.tool-unitconverter-page .unit-type p {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.tool-unitconverter-page .unit-type code {
    background: var(--brand-50);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--brand-700);
}

/*
 * ─────────────────────────────────────────────────────────────────────────
 * ── Page-scoped sweeps (#2231) ──
 *
 * Originally each Marketing page kept its truly-unique styling inside a
 * `<style>` block in the .razor. #2231 moves those rules here, scoped under
 * a single page wrapper class (`.{page}-page`) added to each page's outer
 * <div>. The wrapper class is the ONLY way these rules apply, so adjacent
 * pages can't collide on shared selector names (e.g. `.faq-grid` differs
 * between Faq and Pricing).
 *
 * Pages migrated by chunk:
 *   - small-style sweep — #2231 (this commit): Home, Pricing, Faq, InfoPage, Tools
 *   - tool-page sweep — follow-up
 *   - large pages (Academics, Contact, Mcp) — follow-up
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ── Home page (/) ── */
.home-page .pricing-note {
    text-align: center;
    color: var(--gray-700);
    margin-top: 1rem;
}

.home-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .home-page .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.home-page .section-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ── Pricing page (/pricing) ── */
.pricing-page .faq-section {
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.pricing-page .faq-section h2 {
    text-align: center;
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 2rem;
}

.pricing-page .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (max-width: 768px) {
    .pricing-page .faq-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Faq page (/faq) ── */
.faq-page .hero .hero-link {
    color: white;
    text-decoration: underline;
}

.faq-page .hero .hero-link:hover {
    color: var(--brand-100);
}

.faq-page .faq-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ── InfoPage (privacy/terms/eula/legal-notice) ── */
.info-page-loading {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.info-page-loading .loading {
    text-align: center;
    padding: 4rem;
    color: var(--po-text-secondary);
}

/* ── Tools page (/tools) ── */
.tools-page .tools-list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* ── Mcp page (/mcp) — phase 3 ── */
.mcp-page .page-container h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.mcp-page .use-case {
    max-width: 900px;
    margin: 0 auto 1.5rem;
    padding: 1.75rem 2rem;
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.75rem;
}

.mcp-page .use-case-primary {
    border-color: var(--brand-500, #2563eb);
    border-width: 2px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.mcp-page .use-case-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.mcp-page .use-case-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.mcp-page .use-case-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #4b5563);
    padding: 0.25rem 0.6rem;
    background: var(--surface-2, #f3f4f6);
    border-radius: 0.25rem;
    white-space: nowrap;
}

.mcp-page .use-case-primary .use-case-tag {
    background: var(--brand-500, #2563eb);
    color: white;
}

.mcp-page .use-case p {
    margin: 0 0 0.75rem 0;
    line-height: 1.7;
    color: var(--text-secondary, #4b5563);
}

.mcp-page .use-case-deliverable {
    padding: 0.75rem 1rem;
    background: var(--surface-2, #f3f4f6);
    border-left: 3px solid var(--brand-500, #2563eb);
    border-radius: 0.25rem;
    margin-bottom: 1.5rem !important;
}

.mcp-page .prompts-heading {
    margin: 1.5rem 0 0.75rem 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #4b5563);
}

.mcp-page .prompt-group-label {
    margin: 1rem 0 0.5rem 0 !important;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.mcp-page .prompt-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mcp-page .prompt-list li {
    padding: 0.75rem 1rem;
    background: var(--surface-2, #f3f4f6);
    border-radius: 0.4rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.mcp-page .prompt-list li em {
    font-style: italic;
    color: var(--text-primary, #111827);
}

.mcp-page .connect-cta {
    text-align: center;
    margin-top: 3rem;
    padding-bottom: 3rem;
}

.mcp-page .connect-cta p {
    max-width: 600px;
    margin: 0 auto 1.5rem;
    color: var(--text-secondary, #4b5563);
}

/* ── Contact page (/contact) — phase 3 ── */
.contact-page .contact-hero {
    background: var(--brand-600);
    padding: 3rem 2rem;
    min-height: auto;
}

.contact-page .contact-hero .hero-content {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

.contact-page .contact-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.contact-page .contact-hero .hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.contact-page .contact-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    padding: 3rem 0;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .contact-page .contact-layout {
        grid-template-columns: 1fr;
    }
}

.contact-page .contact-form-container {
    background: white;
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-page .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-page .form-group label {
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.875rem;
}

.contact-page .form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.contact-page .form-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(33, 115, 70, 0.1);
}

.contact-page .form-input:disabled {
    background: var(--gray-100);
    cursor: not-allowed;
}

.contact-page .form-input select,
.contact-page select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.contact-page .form-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 200px;
}

.contact-page .validation-error {
    color: #dc2626;
    font-size: 0.875rem;
}

.contact-page .form-actions {
    margin-top: 0.5rem;
}

.contact-page .form-actions .btn-primary {
    padding: 0.75rem 1.5rem;
    background: var(--brand-600);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-page .form-actions .btn-primary:hover:not(:disabled) {
    background: var(--brand-700);
}

.contact-page .form-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.contact-page .recaptcha-notice {
    font-size: 0.75rem;
    color: var(--po-text-secondary);
    margin-top: 1rem;
}

.contact-page .recaptcha-notice a {
    color: var(--brand-600);
}

.contact-page .success-message {
    text-align: center;
    padding: 3rem 2rem;
}

.contact-page .success-message svg {
    width: 4rem;
    height: 4rem;
    color: var(--brand-600);
    margin-bottom: 1rem;
}

.contact-page .success-message h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.contact-page .success-message p {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.contact-page .success-message .btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--brand-600);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-page .success-message .btn-primary:hover {
    background: var(--brand-700);
}

.contact-page .contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-page .sidebar-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-page .sidebar-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-page .sidebar-card h3 svg {
    color: var(--brand-600);
}

.contact-page .sidebar-card p {
    color: var(--gray-600);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.contact-page .sidebar-card a {
    color: var(--brand-600);
    font-weight: 500;
}

.contact-page .sidebar-card a:hover {
    color: var(--brand-700);
}

.contact-page .sidebar-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-page .sidebar-card ul li {
    padding: 0.25rem 0;
}

.contact-page .error-message {
    text-align: center;
    padding: 3rem 2rem;
}

.contact-page .error-message svg {
    width: 4rem;
    height: 4rem;
    color: #dc2626;
    margin-bottom: 1rem;
}

.contact-page .error-message h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.contact-page .error-message p {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.contact-page .error-message .btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--brand-600);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-page .error-message .btn-primary:hover {
    background: var(--brand-700);
}

/* ── Academics page (/academics) — phase 3b ── */
.academics-page .section-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.academics-page .card-grid {
    display: grid;
    gap: 1.5rem;
}

.academics-page .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .academics-page .card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .academics-page .card-grid-3 {
        grid-template-columns: 1fr;
    }
}

.academics-page .whats-included-section {
    padding: 3rem 1rem;
    background: rgba(33, 115, 70, 0.03);
}

.academics-page .who-qualifies-section {
    padding: 3rem 1rem;
    background: white;
}

.academics-page .universities-section {
    padding: 3rem 1rem;
    background: rgba(33, 115, 70, 0.03);
}

.academics-page .region-details {
    border: 1px solid var(--po-border);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    background: white;
    overflow: hidden;
}

.academics-page .region-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    list-style: none;
}

.academics-page .region-summary::-webkit-details-marker {
    display: none;
}

.academics-page .region-count {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--gray-500);
    margin-left: auto;
}

.academics-page .region-chevron {
    font-size: 0.75rem;
    color: var(--gray-400);
    transition: transform 0.2s;
}

.academics-page .region-details[open] > .region-summary .region-chevron {
    transform: rotate(90deg);
}

.academics-page .region-details > .university-grid {
    padding: 0 1.25rem 1.25rem;
}

.academics-page .university-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1024px) {
    .academics-page .university-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .academics-page .university-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .academics-page .university-grid {
        grid-template-columns: 1fr;
    }
}

.academics-page .university-card {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.academics-page .university-name {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.academics-page .university-domain {
    font-size: 0.75rem;
    color: var(--gray-700);
    font-family: monospace;
}

.academics-page .not-listed-section {
    padding: 3rem 1rem;
    background: white;
}

.academics-page .not-listed-card {
    background: linear-gradient(to bottom right, var(--po-background), var(--gray-100));
    border: 1px solid var(--po-border);
    border-radius: 1rem;
    padding: 2rem 3rem;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.academics-page .not-listed-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--gray-900);
}

.academics-page .not-listed-intro {
    color: var(--gray-600);
    margin: 0 0 1.5rem;
}

.academics-page .request-steps {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.academics-page .request-steps h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 1rem;
}

.academics-page .request-steps ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.academics-page .request-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--gray-600);
}

.academics-page .request-steps .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.academics-page .eligibility-section {
    padding: 3rem 1rem;
    background: rgba(33, 115, 70, 0.03);
}

.academics-page .eligibility-intro {
    text-align: center;
    color: var(--gray-600);
    margin-bottom: 2rem;
}

.academics-page .eligibility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .academics-page .eligibility-grid {
        grid-template-columns: 1fr;
    }
}

.academics-page .eligibility-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--gray-700);
}

.academics-page .eligibility-item i {
    color: var(--brand-700);
}

/*
 * ── SectionHeader (DS-5 of #2224) ──
 *
 * Centered h2 + brand-colored divider rule + optional subtitle. The
 * <SectionHeader> component (Components/SectionHeader.razor) owns the markup;
 * this stylesheet owns the visual definition.
 */
.section-title {
    text-align: center;
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.section-divider {
    width: 6rem;
    height: 2px;
    background: var(--brand-600);
    opacity: 0.2;
    margin: 0 auto 1rem;
    border-radius: 1px;
}

.section-subtitle {
    text-align: center;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto 2rem;
}

/*
 * ── CtaSection (DS-1 of #2224) ──
 *
 * Brand-bg closing-CTA pattern used by Home + Academics. The <CtaSection>
 * component (Components/CtaSection.razor) owns the markup; this stylesheet
 * owns the visual definition.
 */
.cta-section {
    background-color: var(--brand-600);
    color: white;
    padding: 3rem 1rem;
    text-align: center;
}

.cta-section h2 {
    color: white;
    margin: 0 0 0.75rem;
    font-size: 1.875rem;
    font-weight: 600;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0 auto 1.5rem;
    max-width: 600px;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/*
 * ── Buttons (canonical CTA shape — DS-2 of #2224) ──
 *
 * .btn-primary / .btn-secondary-outline used across Hero <Buttons> slots and
 * page-level CTA sections (Home/Pricing/Mcp/Tools/Academics). Defined once
 * here so pages don't redefine them.
 *
 * ToolCard's smaller-button shape ships its own .tool-item .btn-primary /
 * .tool-item .btn-secondary scoped rules (below); cascade resolves naturally
 * since `.tool-item .btn-primary` has higher specificity than bare
 * `.btn-primary`. Inside <ToolCard>, the smaller shape wins; outside,
 * this canonical shape wins. No conflict.
 *
 * .btn-secondary-hover-fill is the variant where the outline darkens-and-fills
 * on hover — Academics' contact CTA.
 */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: var(--brand-700);
    color: white;
    border: 2px solid white;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--brand-800);
    color: white;
}

.btn-secondary-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--brand-700);
    border: 2px solid var(--brand-700);
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-secondary-outline:hover {
    background: var(--brand-700);
    color: white;
}

/* ── FeatureCard ── */
.feature-card {
    background: white;
    border: 2px solid var(--brand-100);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.2s;
}

.feature-card:hover {
    border-color: var(--brand-200);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.feature-card .card-header-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.feature-card .card-icon {
    width: 3rem;
    height: 3rem;
    background: var(--brand-50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-card .card-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--brand-600);
}

.feature-card .card-header-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--gray-900);
}

.feature-card .card-subtitle {
    font-size: 0.875rem;
    color: var(--po-text-secondary);
    font-style: italic;
    margin: 0;
}

.feature-card .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--brand-100);
    padding-top: 1rem;
    margin-top: 1rem;
}

.feature-card .feature-list li {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--gray-700);
}

.feature-card .check-icon {
    color: var(--brand-600);
    flex-shrink: 0;
}

/* ── StatCard ── */
.stat-card {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-card .stat-number {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--gray-900);
}

.stat-card .stat-label {
    color: var(--gray-700);
}

/* ── StepCard ── */
.step-card {
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.step-card .step-icon {
    margin-bottom: 0.75rem;
}

.step-card .step-icon svg {
    width: 3rem;
    height: 3rem;
    color: var(--brand-600);
}

.step-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--gray-900);
}

.step-card p {
    color: var(--gray-700);
    margin: 0;
    font-size: 0.9375rem;
}

/* ── ToolCard ── */
.tool-item {
    display: flex;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
    border-bottom: 1px solid var(--po-border);
}

.tool-item:last-child {
    border-bottom: none;
}

.tool-item.reverse {
    flex-direction: row-reverse;
}

.tool-item .tool-image {
    flex: 0 0 45%;
}

.tool-item .tool-image img {
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tool-item .tool-content {
    flex: 1;
}

.tool-item .tool-content h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-700);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.tool-item .tool-icon {
    font-size: 1.25rem;
}

.tool-item .tool-tagline {
    color: var(--brand-600);
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.tool-item .tool-content p {
    color: var(--po-text-body);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.tool-item .tool-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.tool-item .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--brand-700);
    color: white;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
}

.tool-item .btn-primary:hover {
    background: var(--brand-800);
    color: white;
}

.tool-item .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: white;
    color: var(--brand-700);
    border: 2px solid var(--brand-700);
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.tool-item .btn-secondary:hover {
    background: var(--brand-50);
    color: var(--brand-800);
}

@media (max-width: 768px) {
    .tool-item,
    .tool-item.reverse {
        flex-direction: column;
    }

    .tool-item .tool-image {
        flex: none;
        width: 100%;
    }
}

/* ── WhyCard ── */
.why-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.why-card .why-icon {
    flex-shrink: 0;
}

.why-card .why-icon svg {
    width: 3rem;
    height: 3rem;
    color: var(--brand-600);
}

.why-card .why-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--gray-900);
}

.why-card .why-content p {
    color: var(--po-text-secondary);
    margin: 0;
    font-size: 0.9375rem;
}

@media (max-width: 768px) {
    .why-card {
        flex-direction: column;
        text-align: center;
    }
}

/* FeatureIcon — single shared sizing rule moved out of Components/FeatureIcon.razor (#2254). */
.feature-icon {
    width: 2rem;
    height: 2rem;
    color: var(--brand-600);
}

/* ==================== DocSidebar nested categories (moved from app.css #2298) ==================== */

.category-details {
    margin-bottom: 0.25rem;
}

.category-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--po-text-body);
}

.category-details summary:hover {
    color: var(--brand-600);
}

.category-details summary .chevron-sm {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.2s;
}

.category-details[open] summary .chevron-sm {
    transform: rotate(90deg);
}

.category-details ul {
    padding-left: 1rem;
    border-left: 1px solid var(--po-border);
    margin-top: 0.25rem;
}

/* ==================== FunctionIcon.razor (moved from app.css #2297) ==================== */

.function-icon {
    flex-shrink: 0;
    margin-top: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-600);
}

/* ==================== Sidebar primitives (#2296) ==================== */

/* ==================== SidebarSection.razor ==================== */

.sidebar-section {
    margin-bottom: 1.5rem;
}

.sidebar-section > summary {
    list-style: none;
}

.sidebar-section > summary::-webkit-details-marker {
    display: none;
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0;
    font-weight: 600;
    color: var(--gray-900);
    cursor: pointer;
    font-size: 1rem;
}

.sidebar-section-header:hover {
    color: var(--brand-700);
}

.sidebar-section-header .icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.sidebar-section-header .chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s;
}

.sidebar-section[open] > .sidebar-section-header .chevron {
    transform: rotate(90deg);
}

.sidebar-section-content {
    padding-left: 1.5rem;
    border-left: 2px solid var(--po-border);
}

.sidebar-section-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-section-content li {
    margin-bottom: 0.25rem;
}

.sidebar-section-content a {
    display: block;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--po-text-body);
    text-decoration: none;
    transition: color 0.2s;
}

.sidebar-section-content a:hover {
    color: var(--brand-600);
}

.sidebar-section-content a.active {
    color: var(--brand-700);
    font-weight: 500;
    border-left: 2px solid var(--brand-600);
    margin-left: -2px;
    padding-left: 0.875rem;
}

/* ==================== SidebarCta.razor ==================== */

.sidebar-cta {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 0.5rem;
}

.sidebar-cta h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--gray-900);
}

.sidebar-cta p {
    font-size: 0.75rem;
    color: var(--po-text-body);
    margin: 0 0 0.75rem 0;
}

.sidebar-cta a {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-700);
    text-decoration: none;
}

.sidebar-cta a:hover {
    color: var(--brand-800);
}

/* ==================== PRICING CARDS ==================== */
.pricing-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 3rem;
    padding-top: 2rem;
}

.pricing-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--po-border);
    width: 280px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card.featured {
    border: 2px solid var(--brand-700);
}

.pricing-card.academic {
    border: 1px solid #bbf7d0;
}

.pricing-card .card-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--brand-600);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    white-space: nowrap;
    z-index: 10;
}

.pricing-card .card-badge.academic-badge {
    background: var(--brand-700);
}

.pricing-card .card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--po-border);
}

.pricing-card .card-header h4 {
    color: var(--brand-700);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.pricing-card .plan-icon {
    color: var(--brand-700);
    flex-shrink: 0;
}

.pricing-card .price-section {
    text-align: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--po-border);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pricing-card .original-price {
    color: var(--po-text-secondary);
    text-decoration: line-through;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.pricing-card .current-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}

.pricing-card .price-value {
    font-size: 2.5rem;
}

.pricing-card .savings {
    color: var(--brand-600);
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.pricing-card .locked-text,
.pricing-card .academic-note {
    font-size: 0.75rem;
    color: var(--po-text-secondary);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.pricing-card .features-list {
    list-style: none;
    padding: 1.5rem;
    margin: 0;
}

.pricing-card .features-list li {
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--gray-700);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pricing-card .features-list li.highlight {
    font-weight: 600;
    color: var(--brand-700);
}

.pricing-card .features-list li.highlight .check {
    color: var(--brand-700);
}

.pricing-card .features-list li.spacer {
    visibility: hidden;
}

.pricing-card .features-list .check {
    color: var(--brand-600);
    font-weight: bold;
}

.pricing-card .card-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--po-border);
}

.pricing-card .card-cta-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 0.625rem 1rem;
    background-color: var(--brand-700);
    color: white !important;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none !important;
    transition: background-color 0.2s;
    cursor: pointer;
}

.pricing-card .card-cta-button:hover {
    background-color: var(--brand-800);
    color: white !important;
}

.pricing-card .trial-text {
    font-size: 0.75rem;
    color: var(--po-text-secondary);
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.pricing-card .trial-text.invisible {
    visibility: hidden;
}

/* ==================== SpreadsheetViewer.razor (#2300) ==================== */
/* Extracted from the component's inline <style> block + HtmlExportHelper.BuildExcelStyleCss().
   `:deep()` selectors became direct selectors because the rules are no longer scoped by
   Blazor's inline-style preprocessing. */

.sv-wrapper {
    border: 1px solid var(--gray-300, #e5e7eb);
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.sv-empty {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Toolbar */
.sv-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

a.sv-toolbar-btn { text-decoration: none; }

.sv-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--gray-300, #e5e7eb);
    background: white;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sv-toolbar-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.sv-toolbar-btn-primary {
    background: var(--brand-600, #166534);
    border-color: var(--brand-700, #14532d);
    color: white;
}

.sv-toolbar-btn.sv-toolbar-btn-primary:hover:not(:disabled) {
    background: var(--brand-700, #14532d);
    border-color: var(--brand-800, #052e16);
    color: white;
}

.sv-toolbar-btn svg { flex-shrink: 0; }

.sv-btn-fx {
    font-size: 0.625rem;
    font-weight: 700;
    font-style: italic;
}

.sv-copy-feedback {
    font-size: 0.6875rem;
    color: #057a55;
    margin-left: 0.25rem;
    animation: sv-fade-in 0.2s ease;
}

@keyframes sv-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Formula Bar */
.sv-formula-bar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    min-height: 28px;
}

.sv-cell-ref {
    display: inline-block;
    min-width: 48px;
    padding: 4px 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    color: #374151;
    border-right: 1px solid #e5e7eb;
    background: #f9fafb;
}

.sv-fx {
    padding: 4px 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-style: italic;
    color: #6b7280;
    border-right: 1px solid #e5e7eb;
    user-select: none;
}

.sv-formula-text {
    flex: 1;
    padding: 4px 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    color: #111827;
    white-space: nowrap;
    overflow-x: auto;
}

/* Section Tabs */
.sv-section-tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 0 8px;
}

.sv-section-tab {
    padding: 7px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.sv-section-tab:hover:not(:disabled) { color: #374151; }

.sv-section-tab-active {
    color: #1a56db;
    font-weight: 600;
    border-bottom-color: #1a56db;
}

.sv-section-tab-disabled {
    color: #d1d5db;
    cursor: default;
}

.sv-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    font-size: 0.625rem;
    font-weight: 600;
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
}

.sv-section-tab-active .sv-section-count {
    background: #1a56db;
    color: white;
}

.sv-section-tab-disabled .sv-section-count {
    background: #f3f4f6;
    color: #d1d5db;
}

/* Grid */
.sv-grid-container {
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
    background: white;
}

/* Cell selection via JS (was `.sv-wrapper :deep(td.sv-cell-selected)`; the `:deep` escape
   hatch is unnecessary now that rules aren't scoped by an inline <style> block) */
.sv-wrapper td.sv-cell-selected {
    outline: 2px solid #1a56db;
    outline-offset: -1px;
    background: #e1effe !important;
}

/* Chart panel */
.sv-chart-panel {
    padding: 1rem;
    display: flex;
    justify-content: center;
}

.sv-chart-panel svg {
    max-width: 100%;
    height: auto;
}

/* Names Table */
.sv-table-wrap {
    overflow-x: auto;
}

.sv-names-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.sv-names-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    background: #f9fafb;
    padding: 4px 10px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.sv-names-table tbody td {
    padding: 4px 10px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.sv-names-name {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
    color: #111827;
}

.sv-names-ref {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.6875rem;
    color: #6b7280;
}

.sv-names-formula {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.6875rem;
    color: #374151;
    word-break: break-all;
}

.sv-names-comment {
    font-size: 0.6875rem;
    color: #6b7280;
    font-style: italic;
}

/* Sheet Tabs (bottom) */
.sv-sheet-tabs {
    display: flex;
    align-items: stretch;
    border-top: 1px solid #e5e7eb;
    background: #f1f5f9;
    overflow-x: auto;
}

.sv-sheet-tab {
    padding: 5px 14px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #6b7280;
    background: none;
    border: none;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.sv-sheet-tab:first-child { border-left: none; }

.sv-sheet-tab:hover {
    color: #374151;
    background: #e2e8f0;
}

.sv-sheet-tab-active {
    color: #1a56db;
    background: white;
    font-weight: 600;
}

/* Spreadsheet-viewer grid table — Excel-look-alike rendered into the viewer.
   Generic class name (.sv-table) matches the rest of the .sv-* family; producers
   (HtmlExportHelper for blueprints, future producers for other spreadsheet sources)
   emit this class on the outer <table>. */
.sv-table {
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-family: 'Segoe UI', -apple-system, sans-serif;
}
.sv-table td {
    border: 1px solid #e5e7eb;
    padding: 4px 8px;
    min-width: 80px;
    background: white;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    cursor: pointer;
}
.sv-table td.formula-cell {
    color: #1a56db;
    font-weight: 600;
}
.sv-table th.corner-header {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    min-width: 40px;
    width: 40px;
}
.sv-table th.col-header {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    padding: 4px 8px;
    font-weight: 600;
    color: #475569;
    text-align: center;
    font-size: 0.75rem;
}
.sv-table th.row-header {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    padding: 4px 8px;
    font-weight: 600;
    color: #475569;
    text-align: center;
    min-width: 40px;
    font-size: 0.75rem;
}