/* National Profile Registry — Design System */

:root {
    --npr-ink: #0c2340;
    --npr-ink-soft: #1e3a5f;
    --npr-teal: #0d7a6f;
    --npr-teal-dark: #0a5f56;
    --npr-teal-light: #e6f5f3;
    --npr-sky: #eef5f9;
    --npr-cloud: #f7fafc;
    --npr-white: #ffffff;
    --npr-muted: #5a6f82;
    --npr-border: #d8e4ec;
    --npr-border-soft: #e8f0f5;
    --npr-radius: 0.625rem;
    --npr-shadow: 0 1px 2px rgba(12, 35, 64, 0.04), 0 8px 24px rgba(12, 35, 64, 0.06);
    --npr-font: 'Manrope', system-ui, sans-serif;
    --npr-display: 'Fraunces', Georgia, serif;
}

body {
    font-family: var(--npr-font);
    color: var(--npr-ink);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* Buttons */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.35rem; background: var(--npr-teal); color: #fff;
    font-weight: 600; font-size: 0.875rem; border-radius: var(--npr-radius);
    border: none; cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--npr-teal-dark); transform: translateY(-1px); }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.35rem; background: #fff; color: var(--npr-ink);
    font-weight: 600; font-size: 0.875rem; border-radius: var(--npr-radius);
    border: 1px solid var(--npr-border); transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: var(--npr-sky); border-color: #b8cddb; }

.btn-outline-light {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.35rem; background: transparent; color: var(--npr-ink);
    font-weight: 600; font-size: 0.875rem; border-radius: var(--npr-radius);
    border: 1px solid rgba(12, 35, 64, 0.2); transition: background 0.15s;
}
.btn-outline-light:hover { background: rgba(12, 35, 64, 0.04); }

.btn-success { display: inline-flex; align-items: center; padding: 0.5rem 1rem; background: #059669; color: #fff; font-weight: 500; border-radius: 0.5rem; border: none; }
.btn-success:hover { background: #047857; }
.btn-danger { display: inline-flex; align-items: center; padding: 0.5rem 1rem; background: #dc2626; color: #fff; font-weight: 500; border-radius: 0.5rem; border: none; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.9rem 1.75rem; font-size: 0.95rem; }

/* Forms */
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 0.65rem 0.9rem; border: 1px solid var(--npr-border);
    border-radius: 0.5rem; font-size: 0.875rem; outline: none; background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--npr-teal); box-shadow: 0 0 0 3px rgba(13, 122, 111, 0.12);
}
.form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--npr-ink-soft); margin-bottom: 0.35rem; }
.form-textarea { resize: vertical; min-height: 5rem; }

/* Cards */
.card { background: #fff; border-radius: 0.875rem; border: 1px solid var(--npr-border-soft); box-shadow: var(--npr-shadow); }
.card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--npr-border-soft); }
.card-body { padding: 1.5rem; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f1f5f9; color: #475569; }

/* Tables */
.table-responsive { overflow-x: auto; }
.data-table { width: 100%; font-size: 0.875rem; text-align: left; }
.data-table thead { background: var(--npr-sky); color: var(--npr-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table th { padding: 0.75rem 1rem; font-weight: 600; }
.data-table td { padding: 0.75rem 1rem; border-top: 1px solid var(--npr-border-soft); }
.data-table tbody tr:hover { background: #fafcfd; }

/* Portal */
.page-header { margin-bottom: 1.5rem; }
.page-title { font-size: 1.5rem; font-weight: 700; color: var(--npr-ink); font-family: var(--npr-display); }
.page-subtitle { color: var(--npr-muted); margin-top: 0.25rem; }

.stat-card { background: #fff; border-radius: 0.875rem; border: 1px solid var(--npr-border-soft); padding: 1.25rem; box-shadow: var(--npr-shadow); }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--npr-ink); }
.stat-label { font-size: 0.875rem; color: var(--npr-muted); margin-top: 0.25rem; }

.progress-bar { width: 100%; background: #e2e8f0; border-radius: 9999px; height: 0.625rem; }
.progress-fill { background: var(--npr-teal); height: 0.625rem; border-radius: 9999px; transition: width 0.5s; }

.tab-btn { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; transition: all 0.15s; }
.tab-btn.active { background: var(--npr-ink); color: #fff; }
.tab-btn:not(.active) { color: #64748b; }
.tab-btn:not(.active):hover { background: #f1f5f9; }

.upload-zone { border: 2px dashed #cbd5e1; border-radius: 1rem; padding: 2rem; text-align: center; cursor: pointer; transition: border-color 0.15s; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--npr-teal); background: var(--npr-teal-light); }

.alert { padding: 1rem; border-radius: 0.5rem; font-size: 0.875rem; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--npr-muted); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: 0.75rem; color: var(--npr-teal); }

/* ========== Public site — solid colour bands ========== */
.public-container { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* Header — solid navy */
.public-nav {
    background: #0c2340; border-bottom: none; position: sticky; top: 0; z-index: 50;
}
.public-nav-inner { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; height: 4.25rem; }
.public-logo { display: flex; align-items: center; gap: 0.7rem; color: #fff; text-decoration: none; }
.public-logo-mark {
    width: 2.35rem; height: 2.35rem;
    background: #0d7a6f; border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.7rem; color: #fff; letter-spacing: 0.02em;
}
.public-logo-text { font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; color: #fff; }
.public-logo-text span { display: block; font-size: 0.65rem; font-weight: 500; color: rgba(255,255,255,0.65); letter-spacing: 0.04em; text-transform: uppercase; }
.public-nav-links { display: none; align-items: center; gap: 0.15rem; }
@media (min-width: 1024px) { .public-nav-links { display: flex; } }
.public-nav-links a {
    color: rgba(255,255,255,0.82); font-size: 0.875rem; font-weight: 500;
    padding: 0.45rem 0.7rem; border-radius: 0.4rem; transition: color 0.15s, background 0.15s; text-decoration: none;
}
.public-nav-links a:hover { color: #fff; background: rgba(255,255,255,0.1); }
.public-nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.public-nav-actions .btn-nav-login {
    color: rgba(255,255,255,0.9); font-size: 0.875rem; font-weight: 600;
    padding: 0.5rem 0.75rem; text-decoration: none;
}
.public-nav-actions .btn-nav-login:hover { color: #fff; }
.public-nav-actions .btn-primary { background: #0d7a6f; color: #fff; }
.public-nav-actions .btn-primary:hover { background: #0a5f56; }
.public-nav-actions .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.public-nav-actions .btn-secondary:hover { background: rgba(255,255,255,0.1); }
.public-mobile-toggle { display: flex; padding: 0.5rem; color: #fff; background: none; border: none; cursor: pointer; }
@media (min-width: 1024px) { .public-mobile-toggle { display: none; } }
.public-mobile-menu { display: none; background: #143354; border-top: 1px solid rgba(255,255,255,0.08); padding: 1rem 1.25rem; }
.public-mobile-menu.open { display: block; }
.public-mobile-menu a { display: block; color: rgba(255,255,255,0.88); padding: 0.65rem 0; font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.public-mobile-menu a:hover { color: #7dd3c7; }
.public-mobile-menu .btn-outline-light { color: #fff; border-color: rgba(255,255,255,0.35); }

/* Hero — solid teal */
.public-hero {
    position: relative; overflow: hidden;
    background: #0d7a6f; color: #fff; padding: 0;
    min-height: min(82vh, 38rem); display: flex; align-items: center;
}
.public-hero-page {
    min-height: auto; padding: 4rem 0 3.5rem; background: #0d7a6f; color: #fff;
}
.public-hero-light { background: #e8f1f7; color: var(--npr-ink); padding: 3.5rem 0; }
.public-hero-light .public-hero-title,
.public-hero-light .public-hero-brand { color: var(--npr-ink); }
.public-hero-light .public-hero-sub { color: var(--npr-muted); }
.public-hero-grid {
    display: grid; gap: 2.5rem; align-items: center; width: 100%;
    padding: 3.5rem 0 4rem;
}
@media (min-width: 1024px) {
    .public-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; padding: 4.5rem 0 5rem; }
}
.public-hero-brand {
    font-family: var(--npr-display); font-size: clamp(2.75rem, 6vw, 4.25rem);
    font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: #fff;
    margin: 0;
}
.public-hero-brand .accent { color: #b8efe6; }
.public-hero-title {
    font-family: var(--npr-display); font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: #fff;
}
.public-hero-sub {
    font-size: 1.1rem; color: rgba(255,255,255,0.88); margin-top: 1.15rem; line-height: 1.65; max-width: 32rem;
}
.public-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.public-hero .btn-primary,
.public-hero-page .btn-primary { background: #fff; color: #0c2340; }
.public-hero .btn-primary:hover,
.public-hero-page .btn-primary:hover { background: #e6f5f3; }
.public-hero .btn-secondary,
.public-hero-page .btn-secondary {
    background: transparent; color: #fff; border-color: rgba(255,255,255,0.45);
}
.public-hero .btn-secondary:hover,
.public-hero-page .btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* Hero visual — solid navy panel */
.public-hero-visual {
    position: relative; border-radius: 0.75rem; overflow: hidden;
    aspect-ratio: 5/4; min-height: 280px; background: #0c2340;
}
.public-hero-visual-content {
    position: relative; z-index: 1; height: 100%; padding: 2rem;
    display: flex; flex-direction: column; justify-content: space-between; color: #fff;
}
.public-hero-visual-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7dd3c7; }
.public-hero-visual-title { font-family: var(--npr-display); font-size: 1.75rem; font-weight: 600; line-height: 1.25; margin-top: 0.5rem; }
.public-hero-visual-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.public-hero-visual-meta div {
    background: #143354; border: 1px solid #1e4a6e;
    border-radius: 0.5rem; padding: 0.85rem 1rem;
}
.public-hero-visual-meta strong { display: block; font-size: 0.95rem; font-weight: 700; }
.public-hero-visual-meta span { font-size: 0.75rem; color: rgba(255,255,255,0.65); }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.public-animate { animation: fadeUp 0.55s ease both; }
.public-animate-delay-1 { animation-delay: 0.1s; }
.public-animate-delay-2 { animation-delay: 0.2s; }
.public-animate-delay-3 { animation-delay: 0.3s; }

/* Stat bar — solid navy */
.public-stat-bar { background: #0c2340; color: #fff; padding: 2.25rem 0; border: none; }
.public-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .public-stat-grid { grid-template-columns: repeat(4, 1fr); } }
.public-stat-value { font-family: var(--npr-display); font-size: 1.85rem; font-weight: 600; color: #7dd3c7; }
.public-stat-label { font-size: 0.8125rem; color: rgba(255,255,255,0.7); margin-top: 0.3rem; font-weight: 500; }

/* Section colour bands */
.public-section { padding: 4.5rem 0; background: #ffffff; }
.public-section-alt { background: #e6f5f3; }
.public-section-sky { background: #e8f1f7; }
.public-section-navy { background: #0c2340; color: #fff; }
.public-section-navy .public-section-title { color: #fff; }
.public-section-navy .public-section-sub { color: rgba(255,255,255,0.75); }
.public-section-teal { background: #0d7a6f; color: #fff; }
.public-section-teal .public-section-title { color: #fff; }
.public-section-teal .public-section-sub { color: rgba(255,255,255,0.85); }
.public-section-head { max-width: 36rem; margin: 0 0 2.75rem; }
.public-section-head.centered { text-align: center; margin-left: auto; margin-right: auto; }
.public-section-title {
    font-family: var(--npr-display); font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 600; color: var(--npr-ink); letter-spacing: -0.02em;
}
.public-section-sub { color: var(--npr-muted); margin-top: 0.75rem; font-size: 1.05rem; line-height: 1.6; }

.public-feature-card {
    background: #ffffff; border: 1px solid #d5e6e3; border-radius: 0.5rem;
    padding: 1.5rem 1.6rem; height: 100%;
}
.public-section-alt .public-feature-card { background: #ffffff; border-color: #c5e0db; }
.public-section-sky .public-feature-card { background: #ffffff; border-color: #c8d9e6; }
.public-section-navy .public-feature-card {
    background: #143354; border-color: #1e4a6e; color: #fff;
}
.public-section-navy .public-feature-title { color: #fff; }
.public-section-navy .public-feature-text { color: rgba(255,255,255,0.72); }
.public-section-navy .public-link { color: #7dd3c7; }
.public-feature-icon {
    width: 2.75rem; height: 2.75rem; background: #0d7a6f; color: #fff;
    border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.public-section-navy .public-feature-icon { background: #0d7a6f; color: #fff; }
.public-feature-title { font-size: 1.05rem; font-weight: 700; color: var(--npr-ink); }
.public-feature-text { font-size: 0.9rem; color: var(--npr-muted); margin-top: 0.45rem; line-height: 1.6; }
.public-link {
    display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem;
    font-size: 0.875rem; font-weight: 600; color: var(--npr-teal); text-decoration: none;
}
.public-link:hover { color: var(--npr-teal-dark); }

.public-steps { display: grid; gap: 1rem; }
@media (min-width: 768px) { .public-steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.public-step {
    background: #0c2340; border: none; border-radius: 0.5rem; padding: 1.5rem; color: #fff;
}
.public-step-num {
    font-family: var(--npr-display); font-size: 1.75rem; font-weight: 600; color: #7dd3c7; line-height: 1;
}
.public-step h3 { font-size: 1.05rem; font-weight: 700; margin: 0.75rem 0 0.4rem; color: #fff; }
.public-step p { font-size: 0.9rem; color: rgba(255,255,255,0.72); line-height: 1.55; }

.public-sector-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .public-sector-grid { grid-template-columns: repeat(4, 1fr); } }
.public-sector-link {
    display: flex; flex-direction: column; gap: 0.75rem; padding: 1.35rem;
    background: #0d7a6f; border: none; border-radius: 0.5rem;
    text-decoration: none; color: #fff; transition: background 0.15s;
}
.public-sector-link:hover { background: #0a5f56; }
.public-sector-link .icon-wrap {
    width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: #0c2340;
    color: #7dd3c7; display: flex; align-items: center; justify-content: center;
}
.public-sector-link strong { font-size: 0.95rem; color: #fff; }

.public-cta {
    background: #0c2340; color: #fff; padding: 4.5rem 0; text-align: center;
}
.public-cta-inner h2 {
    font-family: var(--npr-display); font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 600;
}
.public-cta-inner p { color: rgba(255,255,255,0.78); margin: 1rem auto 2rem; max-width: 30rem; font-size: 1.05rem; }
.public-cta .btn-outline-light { color: #fff; border-color: rgba(255,255,255,0.4); }
.public-cta .btn-outline-light:hover { background: rgba(255,255,255,0.1); }
.public-cta .btn-primary { background: #0d7a6f; color: #fff; }
.public-cta .btn-primary:hover { background: #0a5f56; }

.public-footer { background: #081828; color: rgba(255,255,255,0.65); padding: 3.5rem 0 0; }
.public-footer .public-logo { color: #fff; }
.public-footer .public-logo-mark { background: #0d7a6f; }
.public-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .public-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.public-footer h4 { color: #fff; font-weight: 600; font-size: 0.8rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.public-footer ul { list-style: none; padding: 0; margin: 0; }
.public-footer li { margin-bottom: 0.55rem; }
.public-footer a { color: rgba(255,255,255,0.6); font-size: 0.875rem; text-decoration: none; transition: color 0.15s; }
.public-footer a:hover { color: #7dd3c7; }
.public-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08); padding: 1.25rem 0;
    text-align: center; font-size: 0.8125rem; color: rgba(255,255,255,0.4);
}
.public-footer-trust {
    display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem;
}
.public-footer-trust span {
    font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 0.35rem; padding: 0.35rem 0.65rem;
}

.public-content { padding: 3.5rem 0 4.5rem; background: #ffffff; }
.public-content.public-section-alt { background: #e6f5f3; }
.public-content.public-section-sky { background: #e8f1f7; }
.public-content-inner { max-width: 48rem; margin: 0 auto; }
.public-content h2 {
    font-family: var(--npr-display); font-size: 1.5rem; font-weight: 600;
    color: var(--npr-ink); margin: 2.25rem 0 0.75rem;
}
.public-content h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.public-content p, .public-content li { color: #475569; line-height: 1.75; font-size: 0.95rem; }
.public-content ul { margin: 0.75rem 0; padding-left: 1.25rem; }
.public-content .lead { font-size: 1.15rem; color: var(--npr-muted); margin-bottom: 2rem; line-height: 1.7; }

.public-pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
.public-pill {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.4rem 0.85rem; background: #e6f5f3; border: none;
    border-radius: 0.35rem; font-size: 0.8125rem; color: #0c2340; font-weight: 600;
}

.public-pricing-card {
    background: #ffffff; border: 1px solid #d5e6e3; border-radius: 0.5rem;
    padding: 1.75rem; height: 100%;
}
.public-pricing-card.featured { border: 2px solid #0d7a6f; background: #e6f5f3; }
.public-pricing-card h3 { font-size: 1.125rem; font-weight: 700; }
.public-pricing-price { font-family: var(--npr-display); font-size: 2.15rem; font-weight: 600; color: var(--npr-ink); margin: 0.75rem 0; }
.public-pricing-price span { font-size: 0.875rem; font-weight: 500; font-family: var(--npr-font); color: var(--npr-muted); }

.public-check-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.public-check-list li {
    display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9rem;
    color: var(--npr-muted); padding: 0.4rem 0;
}
.public-check-list li svg { flex-shrink: 0; color: var(--npr-teal); margin-top: 0.15rem; }

.auth-shell {
    min-height: 80vh; display: flex; align-items: center; justify-content: center;
    padding: 3rem 1rem; background: #e8f1f7;
}
.auth-card { width: 100%; max-width: 26rem; }

.verification-timeline .step { display: flex; align-items: flex-start; gap: 0.75rem; padding-bottom: 1rem; position: relative; }
.step-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.step-dot.done { background: #059669; color: #fff; }
.step-dot.current { background: var(--npr-teal); color: #fff; }
.step-dot.pending { background: #e2e8f0; color: #64748b; }

@media print {
    #sidebar, header, .no-print, .public-nav, .public-footer { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; }
}