/* =====================================================
   RYTHON SCHOOL HEALTH CHECK
   LANDING PAGE
===================================================== */


:root {

    --primary: #2563EB;

    --primary-dark: #1747C9;

    --navy: #081B4B;

    --text: #475569;

    --muted: #64748B;

    --light: #F8FBFF;

    --white: #FFFFFF;

    --border: #E7EEF9;

    --soft-blue: #EFF6FF;

    --green: #059669;

    --danger: #DC2626;

    --warning: #D97706;

    --container: 1240px;

    --radius: 18px;

}


/* =====================================================
   CURRENT HEALTH PAGE
===================================================== */

.school-context {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-bottom: 28px;

}


.school-context > div {

    padding: 13px 15px;

    background: #FFFFFF;

    border: 1px solid #E7EEF9;

    border-radius: 10px;

}


.school-context span {

    display: block;

    margin-bottom: 4px;

    color: #94A3B8;

    font-size: 9px;

    font-weight: 600;

}


.school-context strong {

    color: #081B4B;

    font-size: 12px;

    font-weight: 700;

}


.current-health-form {

    padding: 34px;

}


.form-section-title {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #081B4B;

    font-size: 14px;

    font-weight: 800;

}


.section-number {

    color: #2563EB;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .04em;

}


.section-gap {

    margin-top: 34px;

}


.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0 22px;

}


.input-suffix,
.input-prefix {

    position: relative;

}


.input-suffix input {

    padding-right: 42px !important;

}


.input-suffix > span {

    position: absolute;

    right: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #64748B;

    font-size: 12px;

    font-weight: 700;

}


.input-prefix > span {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #64748B;

    font-size: 12px;

    font-weight: 700;

    z-index: 2;

}


.input-prefix input {

    padding-left: 30px !important;

}


@media (max-width: 700px) {

    .school-context {

        grid-template-columns: 1fr;

    }


    .form-grid {

        grid-template-columns: 1fr;

    }


    .current-health-form {

        padding: 24px 20px;

    }

}


/* =====================================================
   RESET
===================================================== */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family:
        "Inter",
        sans-serif;

    background: var(--light);

    color: var(--text);

    -webkit-font-smoothing: antialiased;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button {

    font-family: inherit;

}


.container {

    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin: 0 auto;

}



/* =====================================================
   HEADER
===================================================== */

.site-header {

    height: 72px;

    background: rgba(
        255,
        255,
        255,
        .97
    );

    border-bottom:
        1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 100;

}


.nav-container {

    height: 100%;

    display: flex;

    align-items: center;

}


.brand {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--navy);

    margin-right: auto;

}


.brand-icon {

    width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background: var(--primary);

    color: #fff;

    font-weight: 800;

    font-size: 16px;

}


.brand-text {

    font-size: 21px;

    font-weight: 800;

    letter-spacing: -.045em;

}


.main-nav {

    display: flex;

    align-items: center;

    gap: 27px;

    margin-right: 30px;

}


.main-nav a {

    font-size: 11px;

    font-weight: 600;

    color: #334155;

    transition: .2s;

}


.main-nav a:hover {

    color: var(--primary);

}


.header-btn {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 10px 15px;

    border-radius: 9px;

    background: var(--primary);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 8px 18px
        rgba(37,99,235,.18);

}


.mobile-menu {

    display: none;

    border: none;

    background: none;

    font-size: 22px;

    color: var(--navy);

    cursor: pointer;

}



/* =====================================================
   HERO
===================================================== */

.hero-section {

    min-height: 600px;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(37,99,235,.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #F9FCFF 0%,
            #F4F8FF 100%
        );

    overflow: hidden;

}


.hero-container {

    min-height: 600px;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 35px;

    align-items: center;

    padding-top: 35px;

    padding-bottom: 35px;

}


.hero-content {

    position: relative;

    z-index: 2;

}


.eyebrow {

    margin-bottom: 16px;

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .14em;

}


.hero-content h1 {

    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            50px,
            5.5vw,
            72px
        );

    line-height: .99;

    letter-spacing: -.06em;

    font-weight: 800;

}


.hero-content h1 span {

    color: var(--primary);

}


.hero-description {

    max-width: 520px;

    margin: 24px 0 22px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.65;

}


.trust-points {

    display: grid;

    grid-template-columns:
        max-content max-content;

    gap: 9px 22px;

    margin-bottom: 25px;

}


.trust-item {

    color: var(--muted);

    font-size: 11px;

    font-weight: 600;

}


.trust-item span {

    color: var(--green);

    font-weight: 800;

    margin-right: 5px;

}


.primary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    padding: 14px 20px;

    border-radius: 10px;

    background: var(--primary);

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 12px 25px
        rgba(37,99,235,.2);

    transition:
        transform .2s,
        background .2s;

}


.primary-button:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

}


.privacy-note {

    margin-top: 13px;

    color: #94A3B8;

    font-size: 10px;

}



/* =====================================================
   HERO IMAGE
===================================================== */

.hero-image-wrapper {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.hero-image-glow {

    position: absolute;

    width: 78%;

    height: 70%;

    background:
        radial-gradient(
            ellipse,
            rgba(37,99,235,.12),
            transparent 68%
        );

    filter: blur(10px);

    z-index: 0;

}


.hero-image {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 670px;

    height: auto;

    object-fit: contain;

    border-radius: 20px;

    mix-blend-mode: multiply;

}



/* =====================================================
   DISCOVER
===================================================== */

.discover-section {

    padding: 65px 0 50px;

    background: var(--light);

}


.section-heading {

    text-align: center;

    margin-bottom: 28px;

}


.section-eyebrow {

    margin-bottom: 9px;

    color: var(--primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .14em;

}


.section-heading h2 {

    margin: 0;

    color: var(--navy);

    font-size: 27px;

    letter-spacing: -.035em;

}


.discover-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 12px;

}


.discover-card {

    min-height: 155px;

    padding: 21px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 14px;

    transition:
        transform .2s,
        box-shadow .2s;

}


.discover-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(8,27,75,.07);

}


.card-number {

    margin-bottom: 25px;

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

}


.discover-card h3 {

    margin: 0 0 7px;

    color: var(--navy);

    font-size: 13px;

}


.discover-card p {

    margin: 0;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;

}


.bottom-message {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 20px;

    color: #94A3B8;

    font-size: 10px;

}


.bottom-message span:first-child {

    color: var(--green);

    font-weight: 800;

}



/* =====================================================
   REPORT PREVIEW
===================================================== */

.report-preview-section {

    padding: 20px 0 65px;

}


.report-preview {

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 50px;

    align-items: center;

    padding: 38px;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 21px;

}


.report-copy h2 {

    max-width: 540px;

    margin: 0 0 14px;

    color: var(--navy);

    font-size: 31px;

    line-height: 1.12;

    letter-spacing: -.045em;

}


.report-copy p {

    max-width: 540px;

    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}



/* SAMPLE REPORT */

.sample-report {

    padding: 20px;

    border:
        1px solid var(--border);

    border-radius: 15px;

    background: #FBFDFF;

    box-shadow:
        0 12px 30px
        rgba(8,27,75,.05);

}


.sample-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.sample-top small {

    color: var(--muted);

    font-size: 10px;

}


.sample-score {

    margin-top: 5px;

    color: var(--navy);

    font-size: 48px;

    font-weight: 800;

    line-height: 1;

}


.sample-score span {

    color: var(--muted);

    font-size: 11px;

    font-weight: 500;

}


.watch-badge {

    padding: 7px 10px;

    border-radius: 999px;

    background: #FFF7ED;

    color: var(--warning);

    font-size: 9px;

    font-weight: 800;

}


.sample-divider {

    height: 1px;

    margin: 17px 0;

    background: var(--border);

}


.sample-row {

    display: flex;

    justify-content: space-between;

    padding: 8px 0;

    font-size: 10px;

}


.sample-row span {

    color: var(--muted);

}


.sample-row strong {

    color: var(--navy);

}


.sample-row .danger {

    color: var(--danger);

}



/* =====================================================
   FINAL CTA
===================================================== */

.final-cta-section {

    padding-bottom: 60px;

}


.final-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 30px 34px;

    border:
        1px solid #DCE9FA;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #EFF6FF,
            #FFFFFF
        );

}


.final-cta h2 {

    margin: 0 0 7px;

    color: var(--navy);

    font-size: 25px;

    letter-spacing: -.035em;

}


.final-cta p {

    margin: 0;

    color: var(--muted);

    font-size: 12px;

}



/* =====================================================
   FOOTER
===================================================== */

.site-footer {

    border-top:
        1px solid var(--border);

    background: #fff;

}


.footer-container {

    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #94A3B8;

    font-size: 10px;

}


.contact-anchor {

    height: 1px;

}



/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {


    .main-nav {

        gap: 17px;

        margin-right: 15px;

    }


    .hero-container {

        grid-template-columns:
            1fr 1fr;

        gap: 15px;

    }


    .hero-content h1 {

        font-size: 52px;

    }


    .hero-image-wrapper {

        min-height: 400px;

    }


    .discover-grid {

        grid-template-columns:
            1fr 1fr;

    }

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 760px) {


    .container {

        width:
            calc(100% - 32px);

    }


    .site-header {

        height: 65px;

    }


    .main-nav {

        display: none;

        position: absolute;

        top: 65px;

        left: 0;

        right: 0;

        padding: 20px 16px;

        background: #fff;

        border-bottom:
            1px solid var(--border);

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }


    .main-nav.active {

        display: flex;

    }


    .header-btn {

        display: none;

    }


    .mobile-menu {

        display: block;

    }


    .hero-section {

        min-height: auto;

    }


    .hero-container {

        min-height: auto;

        grid-template-columns: 1fr;

        padding-top: 55px;

        padding-bottom: 25px;

    }


    .hero-content h1 {

        font-size: 47px;

    }


    .hero-description {

        font-size: 14px;

    }


    .hero-image-wrapper {

        min-height: 310px;

    }


    .hero-image {

        max-width: 620px;

        width: 112%;

        margin-left: -6%;

    }


    .discover-section {

        padding-top: 45px;

    }


    .discover-grid {

        grid-template-columns: 1fr;

    }


    .discover-card {

        min-height: auto;

    }


    .report-preview {

        grid-template-columns: 1fr;

        padding: 25px;

        gap: 30px;

    }


    .report-copy h2 {

        font-size: 26px;

    }


    .final-cta {

        flex-direction: column;

        align-items: flex-start;

        padding: 25px;

    }


    .footer-container {

        min-height: 75px;

        flex-direction: column;

        justify-content: center;

        gap: 7px;

    }

}



/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {


    .hero-content h1 {

        font-size: 40px;

    }


    .trust-points {

        grid-template-columns:
            1fr 1fr;

        gap: 9px;

    }


    .hero-image-wrapper {

        min-height: 245px;

    }


    .hero-image {

        width: 125%;

        margin-left: -12.5%;

    }


    .section-heading h2 {

        font-size: 24px;

    }

}

/* =====================================================
   RYTHON SCHOOL HEALTH CHECK
   START ASSESSMENT PAGE
===================================================== */


.start-header-label {

    margin-left: auto;

    padding: 7px 12px;

    border-radius: 999px;

    background: #EFF6FF;

    border: 1px solid #DCE9FA;

    color: #2563EB;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .05em;

}



/* =====================================================
   PAGE
===================================================== */

.start-page {

    min-height: calc(100vh - 137px);

    padding: 45px 0 55px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37,99,235,.045),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #F9FCFF 0%,
            #F5F9FF 100%
        );

}


.start-container {

    width: min(
        1040px,
        calc(100% - 48px)
    );

    margin: 0 auto;

}



/* =====================================================
   PROGRESS
===================================================== */

.assessment-progress {

    max-width: 900px;

    margin: 0 auto 22px;

}


.progress-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 9px;

    color: #64748B;

    font-size: 10px;

    font-weight: 600;

}


.progress-track {

    height: 5px;

    border-radius: 999px;

    background: #E5EDF8;

    overflow: hidden;

}


.progress-fill {

    height: 100%;

    border-radius: inherit;

    background: #2563EB;

}



/* =====================================================
   MAIN CARD
===================================================== */

.start-card {

    min-height: 560px;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    background: #fff;

    border: 1px solid #E7EEF9;

    border-radius: 22px;

    box-shadow:
        0 20px 60px
        rgba(8,27,75,.06);

    overflow: hidden;

}



/* =====================================================
   LEFT CONTENT
===================================================== */

.start-content {

    padding: 55px 52px;

}


.start-eyebrow {

    margin-bottom: 15px;

    color: #2563EB;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .14em;

}


.start-content h1 {

    max-width: 480px;

    margin: 0;

    color: #081B4B;

    font-size: 43px;

    line-height: 1.08;

    letter-spacing: -.045em;

}


.start-intro {

    max-width: 500px;

    margin: 19px 0 30px;

    color: #64748B;

    font-size: 14px;

    line-height: 1.7;

}



/* =====================================================
   INFORMATION BLOCK
===================================================== */

.information-block {

    margin-bottom: 30px;

}


.information-block h2 {

    margin: 0 0 17px;

    color: #081B4B;

    font-size: 15px;

    font-weight: 700;

}


.information-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


.information-item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}


.info-icon {

    flex: 0 0 21px;

    width: 21px;

    height: 21px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #ECFDF5;

    color: #059669;

    font-size: 11px;

    font-weight: 800;

}


.information-item strong {

    display: block;

    margin-bottom: 3px;

    color: #081B4B;

    font-size: 11px;

    line-height: 1.4;

}


.information-item p {

    margin: 0;

    color: #94A3B8;

    font-size: 10px;

    line-height: 1.5;

}



/* =====================================================
   BUTTON
===================================================== */

.start-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 14px 21px;

    border-radius: 10px;

    background: #2563EB;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 12px 25px
        rgba(37,99,235,.20);

    transition: .2s;

}


.start-button:hover {

    background: #1747C9;

    transform: translateY(-2px);

}



/* =====================================================
   RIGHT VISUAL
===================================================== */

.start-visual {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #F5F9FF,
            #EDF5FF
        );

    overflow: hidden;

}


.visual-circle {

    position: absolute;

    border-radius: 50%;

}


.circle-one {

    width: 330px;

    height: 330px;

    background: #E2EEFF;

    top: 80px;

    right: -80px;

}


.circle-two {

    width: 180px;

    height: 180px;

    background: #F1F7FF;

    bottom: -45px;

    left: -50px;

}



/* =====================================================
   CLIPBOARD
===================================================== */

.clipboard {

    position: relative;

    z-index: 2;

    width: 285px;

    height: 350px;

    padding-top: 22px;

    border-radius: 9px;

    background: #2563EB;

    box-shadow:
        0 30px 50px
        rgba(37,99,235,.18);

    transform:
        rotate(2deg);

}


.clipboard-top {

    position: absolute;

    top: 9px;

    left: 102px;

    width: 80px;

    height: 32px;

    border-radius: 9px 9px 5px 5px;

    background: #1747C9;

}


.paper {

    position: absolute;

    top: 34px;

    left: 23px;

    right: 23px;

    bottom: 20px;

    padding: 27px 22px;

    background: #fff;

    border-radius: 4px;

    box-shadow:
        0 4px 10px
        rgba(8,27,75,.08);

}


.paper-heading {

    color: #081B4B;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .04em;

    margin-bottom: 18px;

}


.paper-line {

    height: 7px;

    margin-bottom: 9px;

    border-radius: 999px;

    background: #E7EEF9;

}


.paper-line.long {

    width: 92%;

}


.paper-line.medium {

    width: 68%;

}


.check-row {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 19px;

}


.paper-check {

    width: 18px;

    height: 18px;

    display: grid;

    place-items: center;

    border-radius: 5px;

    background: #EFF6FF;

    color: #2563EB;

    font-size: 10px;

    font-weight: 800;

}


.check-row span:last-child {

    width: 72%;

    height: 6px;

    border-radius: 999px;

    background: #E7EEF9;

}


.paper-chart {

    height: 55px;

    display: flex;

    align-items: flex-end;

    gap: 7px;

    margin-top: 27px;

    padding-top: 10px;

    border-top: 1px solid #E7EEF9;

}


.paper-chart i {

    display: block;

    width: 24px;

    border-radius: 4px 4px 0 0;

    background: #93C5FD;

}


.paper-chart i:nth-child(1) {

    height: 24px;

}


.paper-chart i:nth-child(2) {

    height: 35px;

}


.paper-chart i:nth-child(3) {

    height: 29px;

}


.paper-chart i:nth-child(4) {

    height: 43px;

}



/* =====================================================
   VISUAL CAPTION
===================================================== */

.visual-caption {

    position: absolute;

    z-index: 3;

    left: 50%;

    bottom: 35px;

    width: 250px;

    padding: 13px 15px;

    transform:
        translateX(-50%);

    background: rgba(
        255,
        255,
        255,
        .92
    );

    border:
        1px solid #DCE9FA;

    border-radius: 11px;

    box-shadow:
        0 12px 30px
        rgba(8,27,75,.06);

}


.visual-caption strong {

    display: block;

    margin-bottom: 4px;

    color: #081B4B;

    font-size: 10px;

}


.visual-caption span {

    display: block;

    color: #64748B;

    font-size: 9px;

    line-height: 1.45;

}



/* =====================================================
   SECURITY NOTE
===================================================== */

.security-note {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 20px;

    color: #94A3B8;

    font-size: 10px;

}


.security-icon {

    color: #059669;

    font-weight: 800;

}



/* =====================================================
   TABLET
===================================================== */

@media (max-width: 850px) {

    .start-card {

        grid-template-columns: 1fr;

    }


    .start-visual {

        min-height: 430px;

    }


    .start-content {

        padding: 45px 40px;

    }


    .start-content h1 {

        font-size: 38px;

    }

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .start-header-label {

        display: none;

    }


    .start-page {

        padding:
            25px 0 40px;

    }


    .start-container {

        width:
            calc(100% - 28px);

    }


    .start-card {

        border-radius: 17px;

    }


    .start-content {

        padding: 32px 24px;

    }


    .start-content h1 {

        font-size: 34px;

    }


    .start-intro {

        font-size: 13px;

    }


    .start-visual {

        min-height: 390px;

    }


    .clipboard {

        transform:
            scale(.82)
            rotate(2deg);

    }


    .visual-caption {

        bottom: 22px;

    }


    .progress-top {

        font-size: 9px;

    }

}

/* =====================================================
   SCHOOL HEALTH ASSESSMENT
   PROFILE PAGE
===================================================== */

.assessment-page {

    min-height: calc(100vh - 120px);

    padding: 45px 0 60px;

    background:
        linear-gradient(
            180deg,
            #F8FBFF 0%,
            #F4F8FF 100%
        );

}


.assessment-container {

    width: min(
        900px,
        calc(100% - 40px)
    );

    margin: 0 auto;

}


/* =========================
   PROGRESS
========================= */

.assessment-progress {

    margin-bottom: 32px;

}


.progress-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 9px;

    color: #64748B;

    font-size: 11px;

    font-weight: 600;

}


.progress-track {

    width: 100%;

    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #E5EDF8;

}


.progress-fill {

    height: 100%;

    border-radius: inherit;

    background: #2563EB;

    transition: width .3s ease;

}


/* =========================
   HEADING
========================= */

.assessment-heading {

    margin-bottom: 28px;

}


.assessment-eyebrow {

    margin-bottom: 10px;

    color: #2563EB;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .14em;

}


.assessment-heading h1 {

    margin: 0 0 12px;

    color: #081B4B;

    font-size: 40px;

    line-height: 1.1;

    letter-spacing: -.045em;

}


.assessment-heading p {

    max-width: 600px;

    margin: 0;

    color: #64748B;

    font-size: 14px;

    line-height: 1.65;

}


/* =========================
   ERROR
========================= */

.form-error {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    padding: 13px 16px;

    border: 1px solid #FECACA;

    border-radius: 10px;

    background: #FEF2F2;

    color: #B91C1C;

    font-size: 12px;

    font-weight: 600;

}


.form-error span {

    width: 20px;

    height: 20px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #DC2626;

    color: #fff;

    font-size: 11px;

}


/* =========================
   FORM CARD
========================= */

.assessment-form {

    padding: 34px;

    background: #FFFFFF;

    border: 1px solid #E7EEF9;

    border-radius: 18px;

    box-shadow:
        0 18px 50px
        rgba(8,27,75,.055);

}


.form-group {

    margin-bottom: 24px;

}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #081B4B;

    font-size: 12px;

    font-weight: 700;

}


.form-group label > span {

    color: #DC2626;

}


.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {

    width: 100%;

    height: 47px;

    padding: 0 14px;

    border: 1px solid #DCE6F3;

    border-radius: 9px;

    outline: none;

    background: #FFFFFF;

    color: #081B4B;

    font-family: inherit;

    font-size: 12px;

    transition:
        border-color .2s,
        box-shadow .2s;

}


.form-group input:focus,
.form-group select:focus {

    border-color: #2563EB;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.09);

}


.form-group input::placeholder {

    color: #94A3B8;

}


.field-help {

    margin-top: 7px;

    color: #94A3B8;

    font-size: 10px;

    line-height: 1.5;

}


/* =========================
   CHECKBOXES
========================= */

.checkbox-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

}


.checkbox-item {

    position: relative;

    display: flex !important;

    align-items: center;

    gap: 9px;

    min-height: 45px;

    margin: 0 !important;

    padding: 10px 12px;

    border: 1px solid #E1EAF6;

    border-radius: 9px;

    cursor: pointer;

    transition:
        border-color .2s,
        background .2s;

}


.checkbox-item:hover {

    border-color: #B9D3F5;

    background: #F8FBFF;

}


.checkbox-item input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.checkbox-box {

    width: 17px;

    height: 17px;

    flex: 0 0 17px;

    border: 1.5px solid #B8C8DC;

    border-radius: 4px;

    background: #fff;

    position: relative;

}


.checkbox-item input:checked
~ .checkbox-box {

    border-color: #2563EB;

    background: #2563EB;

}


.checkbox-item input:checked
~ .checkbox-box::after {

    content: "✓";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 10px;

    font-weight: 800;

}


.checkbox-label {

    color: #334155;

    font-size: 11px;

    font-weight: 600;

}


/* =========================
   ACTIONS
========================= */

.form-actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 32px;

    padding-top: 25px;

    border-top: 1px solid #EAF0F7;

}


.back-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 80px;

    height: 42px;

    padding: 0 14px;

    border: 1px solid #DCE6F3;

    border-radius: 9px;

    color: #475569;

    background: #fff;

    font-size: 11px;

    font-weight: 700;

}


.next-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-width: 125px;

    height: 44px;

    padding: 0 18px;

    border: 0;

    border-radius: 9px;

    background: #2563EB;

    color: #fff;

    cursor: pointer;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 10px 22px
        rgba(37,99,235,.18);

}


.next-button:hover {

    background: #1747C9;

}


/* =========================
   SECURITY
========================= */

.assessment-security {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 18px;

    color: #94A3B8;

    font-size: 10px;

}


.assessment-security span {

    color: #059669;

    font-weight: 800;

}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .assessment-page {

        padding-top: 30px;

    }


    .assessment-container {

        width:
            calc(100% - 28px);

    }


    .assessment-heading h1 {

        font-size: 34px;

    }


    .assessment-form {

        padding: 24px 20px;

        border-radius: 15px;

    }


    .checkbox-grid {

        grid-template-columns: 1fr;

    }


    .form-actions {

        gap: 12px;

    }


    .next-button {

        flex: 1;

    }

}

/* =====================================================
   3-YEAR HISTORICAL DATA
===================================================== */

.historical-form {
    width: 100%;
    box-sizing: border-box;
}


/* =====================================================
   YEAR HEADER
===================================================== */

.history-years {
    display: grid;

    grid-template-columns:
        minmax(190px, 1.6fr)
        repeat(3, minmax(140px, 1fr));

    gap: 12px;

    align-items: end;

    width: 100%;

    margin-bottom: 10px;
}


/* Empty first column */

.history-year-spacer {
    min-width: 0;
}


/* Individual year */

.history-year {
    min-width: 0;
}


.history-year label {
    display: block;

    margin: 0 0 6px 0;

    color: #64748B;

    font-size: 9px;

    line-height: 1.3;

    font-weight: 700;
}


/* =====================================================
   FIXED ACADEMIC YEAR
===================================================== */

.fixed-year {
    width: 100%;

    height: 42px;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    padding: 0 12px;

    background: #F8FAFC;

    border: 1px solid #DCE6F3;

    border-radius: 8px;

    color: #081B4B;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}


/* =====================================================
   HISTORICAL DATA ROW
===================================================== */

.history-row {
    display: grid;

    grid-template-columns:
        minmax(190px, 1.6fr)
        repeat(3, minmax(140px, 1fr));

    gap: 12px;

    align-items: center;

    width: 100%;

    padding: 15px 0;

    border-top: 1px solid #EAF0F7;

    box-sizing: border-box;
}


/* =====================================================
   METRIC LABEL
===================================================== */

.history-label {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.history-label strong {
    color: #081B4B;

    font-size: 11px;

    line-height: 1.35;

    font-weight: 700;
}


.history-label span {
    color: #94A3B8;

    font-size: 9px;

    line-height: 1.4;
}


/* =====================================================
   DATA INPUT WRAPPER
===================================================== */

.history-input {
    position: relative;

    min-width: 0;
}


/* =====================================================
   INPUT
===================================================== */

.history-input input {
    width: 100%;

    height: 42px;

    display: block;

    box-sizing: border-box;

    padding: 0 12px;

    border: 1px solid #DCE6F3;

    border-radius: 8px;

    background: #FFFFFF;

    color: #081B4B;

    font-family: inherit;

    font-size: 11px;

    font-weight: 500;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* =====================================================
   INPUT PLACEHOLDER
===================================================== */

.history-input input::placeholder {
    color: #94A3B8;

    opacity: 1;
}


/* =====================================================
   INPUT HOVER
===================================================== */

.history-input input:hover {
    border-color: #B9C9DD;
}


/* =====================================================
   INPUT FOCUS
===================================================== */

.history-input input:focus {
    border-color: #2563EB;

    background: #FFFFFF;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .08);
}


/* =====================================================
   ₹ / % SUFFIX
===================================================== */

.history-input > span {
    position: absolute;

    right: 11px;

    top: 50%;

    transform: translateY(-50%);

    color: #64748B;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    pointer-events: none;
}


.history-input:has(> span) input {
    padding-right: 30px;
}


/* =====================================================
   REMOVE NUMBER ARROWS
===================================================== */

.history-input input::-webkit-outer-spin-button,
.history-input input::-webkit-inner-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


.history-input input[type="number"] {
    appearance: textfield;

    -moz-appearance: textfield;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .history-years,
    .history-row {

        grid-template-columns:
            minmax(160px, 1.4fr)
            repeat(3, minmax(120px, 1fr));

        gap: 10px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    /*
     * Keep 3 years horizontally aligned.
     * The complete comparison table scrolls horizontally.
     */

    .historical-form {

        width: 100%;

        overflow-x: auto;

        overflow-y: visible;

        -webkit-overflow-scrolling: touch;

    }


    .history-years,
    .history-row {

        min-width: 680px;

        grid-template-columns:
            160px
            repeat(3, 150px);

        gap: 10px;

    }


    .fixed-year,
    .history-input input {

        height: 40px;

    }


    .history-label strong {

        font-size: 10px;

    }


    .history-label span {

        font-size: 8px;

    }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .history-years,
    .history-row {

        min-width: 650px;

        grid-template-columns:
            150px
            repeat(3, 145px);

    }

}

/* =====================================================
   HEALTH DRIVERS
===================================================== */

.health-drivers-form {
    width: 100%;
    box-sizing: border-box;
}


/* =====================================================
   DRIVER GRID
===================================================== */

.drivers-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    width: 100%;
}


/* =====================================================
   DRIVER CARD
===================================================== */

.driver-card {
    padding: 18px;

    background: #FFFFFF;

    border: 1px solid #DCE6F3;

    border-radius: 12px;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.driver-card:hover {
    border-color: #C7D7EB;

    box-shadow:
        0 6px 20px rgba(8, 27, 75, .04);
}


/* =====================================================
   CARD HEADER
===================================================== */

.driver-card-header {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 16px;
}


/* =====================================================
   ICON
===================================================== */

.driver-icon {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #EFF6FF;

    color: #2563EB;

    font-size: 12px;
    font-weight: 800;
}


/* =====================================================
   TITLE
===================================================== */

.driver-card-header h3 {
    margin: 0 0 4px;

    color: #081B4B;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 700;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.driver-card-header p {
    margin: 0;

    color: #94A3B8;

    font-size: 9px;

    line-height: 1.5;
}


/* =====================================================
   OPTIONS
===================================================== */

.driver-options {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;
}


/* =====================================================
   OPTION LABEL
===================================================== */

.driver-option {
    display: block;

    cursor: pointer;
}


/* Hide native radio */

.driver-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* =====================================================
   OPTION BOX
===================================================== */

.driver-option-box {
    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 9px;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #DCE6F3;

    border-radius: 8px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


/* =====================================================
   RADIO
===================================================== */

.driver-radio {
    flex: 0 0 14px;

    width: 14px;
    height: 14px;

    border: 1.5px solid #B9C9DD;

    border-radius: 50%;

    box-sizing: border-box;

    position: relative;
}


/* =====================================================
   OPTION TEXT
===================================================== */

.driver-option-text {
    color: #475569;

    font-size: 9px;

    line-height: 1.3;

    font-weight: 600;
}


/* =====================================================
   HOVER
===================================================== */

.driver-option:hover .driver-option-box {
    border-color: #93B4E5;

    background: #F8FBFF;
}


/* =====================================================
   SELECTED
===================================================== */

.driver-option input:checked + .driver-option-box {
    border-color: #2563EB;

    background: #EFF6FF;

    box-shadow:
        0 0 0 2px rgba(37, 99, 235, .06);
}


.driver-option input:checked
+ .driver-option-box
.driver-radio {
    border-color: #2563EB;

    background: #2563EB;
}


.driver-option input:checked
+ .driver-option-box
.driver-radio::after {
    content: "";

    position: absolute;

    width: 4px;
    height: 4px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #FFFFFF;
}


/* =====================================================
   FOCUS
===================================================== */

.driver-option input:focus-visible
+ .driver-option-box {
    outline: 3px solid rgba(37, 99, 235, .12);

    outline-offset: 2px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .drivers-grid {
        grid-template-columns: 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .driver-card {
        padding: 15px;
    }


    .driver-options {
        grid-template-columns: 1fr;
    }


    .driver-option-box {
        min-height: 44px;

        padding: 9px 11px;
    }


    .driver-option-text {
        font-size: 10px;
    }

}

/* =====================================================
   REVIEW & VALIDATION
===================================================== */

.review-heading {
    margin-bottom: 24px;
}


/* =====================================================
   WARNING
===================================================== */

.review-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;
    margin-bottom: 18px;

    background: #FFF8ED;

    border: 1px solid #F6D9A4;
    border-radius: 10px;
}

.review-warning-icon {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #FFF0CF;
    color: #B77900;

    font-size: 12px;
    font-weight: 800;
}

.review-warning strong {
    display: block;

    margin-bottom: 3px;

    color: #7A5200;

    font-size: 11px;
}

.review-warning p {
    margin: 0;

    color: #98702B;

    font-size: 9px;
    line-height: 1.5;
}


/* =====================================================
   REVIEW SECTION
===================================================== */

.review-section {
    margin-bottom: 16px;

    padding: 18px;

    background: #FFFFFF;

    border: 1px solid #DCE6F3;

    border-radius: 12px;

    box-sizing: border-box;
}


/* =====================================================
   SECTION HEADER
===================================================== */

.review-section-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding-bottom: 14px;

    margin-bottom: 14px;

    border-bottom: 1px solid #EAF0F7;
}

.review-section-header > div {
    display: flex;

    align-items: center;

    gap: 10px;
}

.review-section-number {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #EFF6FF;

    color: #2563EB;

    font-size: 9px;
    font-weight: 800;
}

.review-section-header h2 {
    margin: 0 0 3px;

    color: #081B4B;

    font-size: 13px;
    line-height: 1.3;
}

.review-section-header p {
    margin: 0;

    color: #94A3B8;

    font-size: 9px;
}

.review-edit {
    flex: 0 0 auto;

    padding: 6px 10px;

    border: 1px solid #C8D8EB;

    border-radius: 7px;

    background: #FFFFFF;

    color: #2563EB;

    font-size: 9px;
    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;
}

.review-edit:hover {
    background: #EFF6FF;

    border-color: #2563EB;
}


/* =====================================================
   SCHOOL PROFILE GRID
===================================================== */

.review-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}

.review-item {
    padding: 11px 12px;

    background: #F8FAFC;

    border-radius: 8px;
}

.review-item span,
.review-data-item span {
    display: block;

    margin-bottom: 4px;

    color: #94A3B8;

    font-size: 8px;
    line-height: 1.3;
}

.review-item strong,
.review-data-item strong {
    display: block;

    color: #081B4B;

    font-size: 10px;
    line-height: 1.4;

    word-break: break-word;
}


/* =====================================================
   CURRENT HEALTH DATA
===================================================== */

.review-data-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;
}

.review-data-item {
    padding: 10px 12px;

    background: #F8FAFC;

    border-radius: 8px;
}


/* =====================================================
   HISTORICAL DATA
===================================================== */

.review-history {
    width: 100%;

    overflow-x: auto;
}

.review-history-head,
.review-history-row {
    display: grid;

    grid-template-columns:
        minmax(180px, 1.5fr)
        repeat(3, minmax(100px, 1fr));

    gap: 8px;

    min-width: 560px;

    align-items: center;
}

.review-history-head {
    padding: 8px 10px;

    background: #F8FAFC;

    border-radius: 7px;

    color: #64748B;

    font-size: 8px;
    font-weight: 700;
}

.review-history-row {
    padding: 9px 10px;

    border-bottom: 1px solid #EDF2F7;

    color: #475569;

    font-size: 9px;
}

.review-history-row > div:first-child {
    color: #081B4B;

    font-weight: 700;
}


/* =====================================================
   HEALTH DRIVERS REVIEW
===================================================== */

.review-drivers {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;
}

.review-driver {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 10px 12px;

    background: #F8FAFC;

    border-radius: 8px;
}

.review-driver span {
    color: #475569;

    font-size: 9px;
    line-height: 1.4;
}

.review-driver strong {
    flex: 0 0 auto;

    color: #081B4B;

    font-size: 9px;

    text-align: right;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.review-empty {
    padding: 14px;

    background: #F8FAFC;

    border-radius: 8px;

    color: #94A3B8;

    font-size: 9px;

    text-align: center;
}


/* =====================================================
   FINAL CONFIRMATION
===================================================== */

.review-confirmation {
    margin-top: 20px;
}

.confirmation-box {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 16px;

    background: #F8FBFF;

    border: 1px solid #CFE0F5;

    border-radius: 10px;

    cursor: pointer;
}

.confirmation-box input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.confirmation-check {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 1px;

    border: 1px solid #B9C9DD;

    border-radius: 5px;

    background: #FFFFFF;

    color: transparent;

    font-size: 11px;
    font-weight: 800;
}

.confirmation-box input:checked
+ .confirmation-check {
    background: #2563EB;

    border-color: #2563EB;

    color: #FFFFFF;
}

.confirmation-text {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.confirmation-text strong {
    color: #081B4B;

    font-size: 10px;

    line-height: 1.45;
}

.confirmation-text small {
    color: #64748B;

    font-size: 8px;

    line-height: 1.5;
}


/* =====================================================
   CALCULATE BUTTON
===================================================== */

.calculate-button {
    min-width: 210px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .review-section {
        padding: 14px;
    }

    .review-grid,
    .review-data-grid,
    .review-drivers {
        grid-template-columns: 1fr;
    }

    .review-section-header {
        align-items: flex-start;
    }

    .review-section-header h2 {
        font-size: 12px;
    }

    .review-driver {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

    .review-driver strong {
        text-align: left;
    }

    .calculate-button {
        width: 100%;

        min-width: 0;
    }

}