:root {
    --clinical-ink: #102a43;
    --clinical-deep: #071b2b;
    --clinical-teal: #0ea5a8;
    --clinical-cyan: #38c7d5;
    --clinical-mint: #d9f7f1;
    --clinical-paper: #f4f9f8;
    --clinical-line: #cfe4e2;
}

.clinical-page {
    background: var(--clinical-paper);
    color: var(--clinical-ink);
}

.clinical-page .header-1 {
    background: #fff;
}

.clinical-page .clinical-nav-link {
    color: var(--clinical-teal);
    font-weight: 700;
}

.clinical-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 96px;
    background: radial-gradient(circle at 78% 15%, rgba(56, 199, 213, .2), transparent 26%), linear-gradient(135deg, var(--clinical-deep), #0b3950 58%, #0e5e68);
    color: #fff;
}

.clinical-hero::after {
    position: absolute;
    right: -12%;
    bottom: -30%;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(56, 199, 213, .25);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(56, 199, 213, .05), 0 0 0 68px rgba(56, 199, 213, .04);
    content: "";
}

.clinical-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 8px 13px;
    border: 1px solid rgba(56, 199, 213, .55);
    border-radius: 999px;
    color: #9df3ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.clinical-hero h1 {
    max-width: 650px;
    margin-bottom: 24px;
    color: #fff;
    font-size: clamp(40px, 4.8vw, 62px);
    font-weight: 800;
    line-height: 1.08;
}

.clinical-hero h1 span {
    color: var(--clinical-cyan);
}

.clinical-hero-copy {
    max-width: 620px;
    margin-bottom: 34px;
    color: #d4ebed;
    font-size: 19px;
    line-height: 1.7;
}

.clinical-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.clinical-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
}

.clinical-btn-primary {
    background: #8af0df;
    color: #06323a;
}

.clinical-btn-secondary {
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
}

.clinical-pipeline {
    position: relative;
    z-index: 1;
    margin-top: 54px;
    padding: 22px;
    border: 1px solid rgba(138, 240, 223, .35);
    background: rgba(4, 25, 39, .62);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .2);
}

.clinical-pipeline-label {
    margin-bottom: 18px;
    color: #9df3ed;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.clinical-pipeline-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 14px;
}

.clinical-node {
    min-height: 126px;
    padding: 18px;
    border: 1px solid rgba(138, 240, 223, .3);
    background: rgba(16, 67, 82, .65);
}

.clinical-node strong {
    display: block;
    margin: 12px 0 6px;
    color: #fff;
}

.clinical-node small {
    color: #b8dce0;
    line-height: 1.5;
}

.clinical-node i {
    color: var(--clinical-cyan);
    font-size: 24px;
}

.clinical-arrow {
    color: #8af0df;
    font-size: 22px;
    text-align: center;
}

.clinical-section {
    padding: 100px 0;
}

.clinical-section-heading {
    max-width: 690px;
    margin-bottom: 48px;
}

.clinical-section-heading .eyebrow {
    margin-bottom: 12px;
    color: var(--clinical-teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.clinical-section h2 {
    margin-bottom: 16px;
    color: var(--clinical-ink);
    font-size: 42px;
    line-height: 1.12;
}

.clinical-section-heading p {
    color: #486581;
    font-size: 18px;
    line-height: 1.7;
}

.clinical-feature {
    height: 100%;
    padding: 28px;
    border-top: 3px solid var(--clinical-teal);
    background: #fff;
    box-shadow: 0 14px 32px rgba(16, 42, 67, .07);
}

.clinical-feature .number {
    color: var(--clinical-teal);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.clinical-feature h3 {
    margin: 18px 0 12px;
    color: var(--clinical-ink);
    font-size: 21px;
}

.clinical-feature p {
    margin: 0;
    color: #627d98;
    line-height: 1.65;
}

.clinical-standards {
    background: var(--clinical-mint);
}

.clinical-standards-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clinical-standards-list li {
    padding: 18px 20px;
    border-left: 3px solid var(--clinical-teal);
    background: rgba(255, 255, 255, .68);
    color: var(--clinical-ink);
    font-weight: 700;
}

.clinical-standards-list i {
    margin-right: 8px;
    color: var(--clinical-teal);
}

.clinical-launch {
    padding: 78px 0;
    background: var(--clinical-deep);
    color: #fff;
}

.clinical-launch h2 {
    color: #fff;
}

.clinical-launch p {
    max-width: 640px;
    color: #c7e2e4;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .clinical-hero {
        padding: 82px 0 64px;
    }

    .clinical-hero-copy {
        font-size: 17px;
    }

    .clinical-pipeline-flow,
    .clinical-standards-list {
        grid-template-columns: 1fr;
    }

    .clinical-arrow {
        transform: rotate(90deg);
    }

    .clinical-section {
        padding: 68px 0;
    }

    .clinical-section h2 {
        font-size: 34px;
    }
}

.clinical-data-notice {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 0 0 28px;
    padding: 12px 15px;
    border-left: 3px solid #f2c879;
    background: rgba(255, 255, 255, .08);
    color: #f8e4b4;
    font-size: 14px;
    line-height: 1.6;
}

.clinical-data-notice i {
    margin-right: 7px;
}

.clinical-data-notice a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.clinical-compliance-hero {
    padding-bottom: 86px;
}

.clinical-status {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(242, 200, 121, .16);
    color: #f8d995;
    font-size: 10px;
    letter-spacing: .08em;
}