/* =========================================================
   XORIFY
   BUSINESS VISIBILITY HEALTH CHECK
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {

    --health-orange: #ff3b1f;
    --health-orange-deep: #ef2d14;
    --health-orange-soft: rgba(255, 59, 31, 0.08);
    --health-orange-glow: rgba(255, 59, 31, 0.18);

    --health-black: #202020;
    --health-charcoal: #292929;
    --health-charcoal-soft: #3c3c3c;

    --health-grey-900: #363636;
    --health-grey-700: #5f6063;
    --health-grey-600: #747579;
    --health-grey-500: #96979a;
    --health-grey-400: #b9babe;
    --health-grey-300: #d7d8db;
    --health-grey-200: #e6e6e8;
    --health-grey-100: #f1f1f3;

    --health-page: #f5f5f6;
    --health-panel: #f0f0f2;
    --health-panel-light: #f7f7f8;
    --health-white: #ffffff;

    --health-border: rgba(34, 34, 34, 0.08);
    --health-border-strong: rgba(34, 34, 34, 0.14);

    --health-radius-small: 13px;
    --health-radius-medium: 20px;
    --health-radius-large: 28px;
    --health-radius-xl: 36px;

    --health-shadow-small:
        0 5px 10px rgba(18, 18, 18, 0.07),
        0 1px 2px rgba(18, 18, 18, 0.05);

    --health-shadow-card:
        0 18px 34px rgba(26, 26, 26, 0.08),
        0 4px 8px rgba(26, 26, 26, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    --health-shadow-raised:
        0 20px 42px rgba(22, 22, 22, 0.1),
        0 8px 14px rgba(22, 22, 22, 0.05);

    --health-shadow-button:
        0 10px 18px rgba(0, 0, 0, 0.22),
        0 3px 5px rgba(0, 0, 0, 0.14);

    --health-container: 1240px;

}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    overflow-x: hidden;

    background: var(--health-page);

    color: var(--health-black);

    font-family: inherit;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
label {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

button {
    border: 0;
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   SHARED CONTAINER
   ========================================================= */

.health_container {

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

    margin: 0 auto;

}


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

.health_header {

    position: absolute;

    top: 0;
    left: 0;

    z-index: 100;

    width: 100%;

    padding-top: 28px;

    pointer-events: none;

}

.health_header_inner {

    display: flex;

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

    gap: 30px;

    min-height: 78px;

    padding: 10px 14px 10px 30px;

    border: 1px solid rgba(255, 255, 255, 0.72);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.82);

    box-shadow:
        0 16px 34px rgba(31, 31, 31, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    pointer-events: auto;

}

.health_brand {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    color: var(--health-black);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.32em;

    text-decoration: none;

}

.health_brand::before {

    content: "";

    display: block;

    width: 28px;
    height: 18px;

    border-radius: 999px;

    background:
        radial-gradient(
            circle at 38% 50%,
            #ff2714 0,
            #ff2714 34%,
            transparent 36%
        ),
        radial-gradient(
            circle at 62% 50%,
            #ff2714 0,
            #ff2714 34%,
            transparent 36%
        );

    box-shadow:
        0 3px 8px rgba(255, 59, 31, 0.18);

}

.health_header_actions {

    display: flex;

    align-items: center;

    gap: 26px;

}

.health_header_label {

    color: var(--health-grey-600);

    font-size: 12px;
    font-weight: 600;

}

.health_header_link {

    display: inline-flex;

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

    min-height: 50px;

    padding: 0 25px;

    border-radius: 999px;

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-button);

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

    text-decoration: none;

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;

}

.health_header_link:hover {

    transform: translateY(-2px);

    background: var(--health-orange);

    box-shadow:
        0 13px 24px rgba(255, 59, 31, 0.22);

}


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

.health_hero {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    margin:
        18px
        18px
        0;

    padding:
        clamp(190px, 18vw, 240px)
        0
        clamp(90px, 10vw, 150px);

    border: 1px solid rgba(255, 255, 255, 0.82);

    border-radius: var(--health-radius-xl);

    background:
        linear-gradient(
            135deg,
            #f3f4f5 0%,
            #f7f7f8 44%,
            #ededf0 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

}

.health_hero::before {

    content: "";

    position: absolute;

    z-index: -1;

    top: -90px;
    right: -130px;

    width: min(54vw, 760px);
    height: min(54vw, 760px);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 42, 18, 0.88) 0%,
            rgba(255, 72, 34, 0.48) 22%,
            rgba(255, 94, 55, 0.15) 44%,
            transparent 70%
        );

    filter: blur(18px);

    opacity: 0.88;

}

.health_hero::after {

    content: "";

    position: absolute;

    z-index: -1;

    top: 45%;
    left: -8%;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(80, 84, 92, 0.14),
            transparent 68%
        );

    filter: blur(20px);

}

.health_hero_grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(320px, 0.5fr);

    gap: clamp(70px, 9vw, 130px);

    align-items: end;

}

.health_hero_content {

    position: relative;

    z-index: 2;

}

.health_eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 28px;

    padding: 11px 15px;

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.82);

    color: var(--health-orange);

    box-shadow:
        0 4px 9px rgba(22, 22, 22, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

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

    letter-spacing: 0.035em;

}

.health_eyebrow::before {

    content: "✦";

    color: var(--health-orange);

    font-size: 17px;
    line-height: 1;

}

.health_section_label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--health-orange);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.1em;

}

.health_hero_title {

    max-width: 940px;

    margin: 0;

    color: #34363a;

    font-size: clamp(52px, 6.7vw, 96px);
    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.058em;

}

.health_hero_intro {

    max-width: 700px;

    margin: 30px 0 0;

    color: var(--health-grey-700);

    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 400;

    line-height: 1.65;

}

.health_hero_actions {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 36px;

}

.health_primary_button {

    display: inline-flex;

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

    gap: 28px;

    min-height: 54px;

    padding: 0 22px;

    border-radius: 999px;

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-button);

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

    text-decoration: none;

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;

}

.health_primary_button:hover {

    transform: translateY(-2px);

    background: var(--health-orange);

    box-shadow:
        0 15px 25px rgba(255, 59, 31, 0.2);

}

.health_primary_button span {

    font-size: 17px;

}

.health_hero_note {

    color: var(--health-grey-600);

    font-size: 11px;
    font-weight: 500;

}


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

.health_hero_summary {

    position: relative;

    overflow: hidden;

    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.88);

    border-radius: 28px;

    background: rgba(245, 245, 247, 0.82);

    box-shadow: var(--health-shadow-card);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

}

.health_hero_summary::before {

    content: "";

    position: absolute;

    top: -70px;
    right: -70px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(255, 59, 31, 0.1);

    filter: blur(28px);

}

.health_summary_label {

    position: relative;

    margin-bottom: 24px;

    color: var(--health-grey-700);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.1em;

}

.health_summary_item {

    position: relative;

    display: grid;

    grid-template-columns: 38px minmax(0, 1fr);

    gap: 13px;

    align-items: center;

    padding: 15px 0;

    border-top: 1px solid rgba(34, 34, 34, 0.08);

    color: var(--health-grey-900);

    font-size: 13px;
    font-weight: 600;

}

.health_summary_number {

    color: var(--health-orange);

    font-size: 10px;
    font-weight: 800;

}


/* =========================================================
   PRINCIPLE
   ========================================================= */

.health_principle {

    padding:
        clamp(90px, 9vw, 140px)
        0;

    background: var(--health-page);

}

.health_principle_grid {

    display: grid;

    grid-template-columns: 84px minmax(0, 760px);

    gap: 40px;

    align-items: start;

    padding:
        clamp(34px, 5vw, 56px);

    border: 1px solid rgba(255, 255, 255, 0.88);

    border-radius: 28px;

    background: var(--health-panel-light);

    box-shadow: var(--health-shadow-card);

}

.health_principle_number {

    display: flex;

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

    width: 54px;
    height: 54px;

    border-radius: 15px;

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-button);

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

}

.health_principle_content h2 {

    max-width: 720px;

    margin: 16px 0 20px;

    color: var(--health-black);

    font-size: clamp(34px, 4vw, 56px);
    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -0.045em;

}

.health_principle_content p {

    max-width: 660px;

    margin: 0 0 12px;

    color: var(--health-grey-700);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   ASSESSMENT
   ========================================================= */

.health_assessment {

    position: relative;

    padding:
        0
        0
        clamp(100px, 10vw, 160px);

    background: var(--health-page);

}

.health_form {

    display: grid;

    gap: 24px;

}


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

.health_progress {

    position: sticky;

    top: 16px;

    z-index: 80;

    margin-bottom: 28px;

    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 18px;

    background: rgba(247, 247, 248, 0.9);

    box-shadow:
        0 12px 28px rgba(25, 25, 25, 0.07);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

}

.health_progress_top {

    display: flex;

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

    gap: 20px;

    margin-bottom: 11px;

}

.health_progress_label {

    color: var(--health-charcoal);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.1em;

}

.health_progress_text {

    color: var(--health-grey-600);

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

}

.health_progress_track {

    overflow: hidden;

    width: 100%;
    height: 5px;

    border-radius: 999px;

    background: #dedee1;

}

.health_progress_bar {

    width: 0;
    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--health-orange),
            #ff674e
        );

    box-shadow:
        0 0 18px rgba(255, 59, 31, 0.3);

    transition:
        width 320ms
        cubic-bezier(0.22, 0.75, 0.2, 1);

}


/* =========================================================
   FORM SECTIONS
   ========================================================= */

.health_form_section {

    position: relative;

    overflow: hidden;

    padding:
        clamp(30px, 5vw, 58px);

    border: 1px solid rgba(255, 255, 255, 0.95);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #f7f7f8 0%,
            #f1f1f3 100%
        );

    box-shadow: var(--health-shadow-card);

}

.health_form_section::after {

    content: "";

    position: absolute;

    top: -100px;
    right: -110px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 59, 31, 0.05),
            transparent 68%
        );

    pointer-events: none;

}

.health_form_heading {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 74px minmax(0, 760px);

    gap: 30px;

    margin-bottom: 44px;

}

.health_form_index {

    display: flex;

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

    width: 52px;
    height: 52px;

    border-radius: 15px;

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-button);

    font-size: 10px;
    font-weight: 800;

}

.health_form_heading h2 {

    max-width: 760px;

    margin: 15px 0 14px;

    color: var(--health-black);

    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 600;

    line-height: 1.04;

    letter-spacing: -0.043em;

}

.health_form_heading p {

    max-width: 680px;

    margin: 0;

    color: var(--health-grey-700);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   SNAPSHOT
   ========================================================= */

.health_input_grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 14px;

}

.health_field {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.health_field_full {

    grid-column: 1 / -1;

}

.health_field label {

    padding-left: 4px;

    color: var(--health-grey-900);

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

}

.health_field input,
.health_field select {

    width: 100%;
    min-height: 56px;

    padding: 0 17px;

    border: 1px solid rgba(34, 34, 34, 0.08);

    border-radius: 15px;

    outline: none;

    background: rgba(255, 255, 255, 0.82);

    color: var(--health-charcoal);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 3px 8px rgba(20, 20, 20, 0.035);

    font-size: 13px;

    transition:
        border 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;

}

.health_field input::placeholder {

    color: var(--health-grey-500);

}

.health_field input:hover,
.health_field select:hover {

    background: var(--health-white);

}

.health_field input:focus,
.health_field select:focus {

    transform: translateY(-1px);

    border-color: rgba(255, 59, 31, 0.34);

    background: var(--health-white);

    box-shadow:
        0 0 0 4px rgba(255, 59, 31, 0.06),
        0 8px 18px rgba(24, 24, 24, 0.05);

}


/* =========================================================
   QUESTION BLOCKS
   ========================================================= */

.health_questions {

    position: relative;

    z-index: 2;

    display: grid;

    gap: 14px;

}

.health_question {

    margin: 0;

    padding: 26px;

    border: 1px solid rgba(34, 34, 34, 0.07);

    border-radius: 22px;

    background: rgba(255, 255, 255, 0.74);

    box-shadow:
        0 8px 16px rgba(30, 30, 30, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    transition:
        transform 180ms ease,
        border 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;

}

.health_question:hover {

    transform: translateY(-2px);

    border-color: rgba(34, 34, 34, 0.11);

    background: var(--health-white);

    box-shadow:
        0 13px 25px rgba(30, 30, 30, 0.055);

}

.health_question.is_answered {

    border-color: rgba(255, 59, 31, 0.16);

    background:
        linear-gradient(
            140deg,
            rgba(255, 255, 255, 0.98),
            rgba(255, 59, 31, 0.025)
        );

}

.health_question.is_error {

    border-color: rgba(255, 59, 31, 0.48);

    box-shadow:
        0 0 0 4px rgba(255, 59, 31, 0.06),
        0 12px 25px rgba(30, 30, 30, 0.04);

}

.health_question legend {

    width: 100%;

    margin: 0 0 20px;

    padding: 0;

    color: var(--health-black);

    font-size: 16px;
    font-weight: 600;

    line-height: 1.5;

}

.health_choices {

    display: grid;

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

    gap: 9px;

}

.health_choices label {

    position: relative;

    display: flex;

    min-width: 0;

    cursor: pointer;

}

.health_choices input {

    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;

}

.health_choices span {

    display: flex;

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

    width: 100%;
    min-height: 56px;

    padding: 11px 13px;

    border: 1px solid rgba(34, 34, 34, 0.08);

    border-radius: 14px;

    background: #f5f5f6;

    color: var(--health-grey-700);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    font-size: 11px;
    font-weight: 600;

    line-height: 1.35;

    text-align: center;

    transition:
        transform 160ms ease,
        border 160ms ease,
        background 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;

}

.health_choices label:hover span {

    transform: translateY(-2px);

    border-color: rgba(34, 34, 34, 0.12);

    background: var(--health-white);

    box-shadow:
        0 7px 14px rgba(22, 22, 22, 0.06);

}

.health_choices input:checked + span {

    transform: translateY(-2px);

    border-color: var(--health-charcoal);

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-button);

}

.health_choices input:checked + span::before {

    content: "";

    width: 6px;
    height: 6px;

    margin-right: 8px;

    border-radius: 50%;

    background: var(--health-orange);

    box-shadow:
        0 0 0 4px rgba(255, 59, 31, 0.12);

}

.health_choices input:focus-visible + span {

    outline: 3px solid rgba(255, 59, 31, 0.18);

    outline-offset: 3px;

}


/* =========================================================
   SUBMIT PANEL
   ========================================================= */

.health_submit_section {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.45fr);

    gap: 70px;

    align-items: end;

    margin-top: 8px;

    padding:
        clamp(38px, 6vw, 70px);

    border-radius: 30px;

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-raised);

}

.health_submit_section::before {

    content: "";

    position: absolute;

    z-index: -1;

    top: -110px;
    right: -50px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 59, 31, 0.5),
            rgba(255, 59, 31, 0.1) 40%,
            transparent 68%
        );

    filter: blur(14px);

}

.health_submit_content h2 {

    max-width: 680px;

    margin: 16px 0;

    color: var(--health-white);

    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -0.045em;

}

.health_submit_content p {

    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 14px;

    line-height: 1.7;

}

.health_submit_action {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.health_submit_button {

    display: flex;

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

    gap: 22px;

    width: 100%;
    min-height: 58px;

    padding: 0 21px;

    border-radius: 999px;

    background: var(--health-orange);

    color: var(--health-white);

    box-shadow:
        0 14px 30px rgba(255, 59, 31, 0.25);

    cursor: pointer;

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

    transition:
        transform 180ms ease,
        background 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;

}

.health_submit_button:hover {

    transform: translateY(-2px);

    background: var(--health-white);

    color: var(--health-black);

    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.2);

}

.health_submit_button span {

    font-size: 18px;

}

.health_submit_note {

    margin: 0;

    color: rgba(255, 255, 255, 0.46);

    font-size: 10px;

    line-height: 1.55;

}


/* =========================================================
   RESULTS
   ========================================================= */

.health_results {

    padding:
        clamp(100px, 10vw, 160px)
        0;

    background:
        linear-gradient(
            180deg,
            var(--health-page),
            #eeeeef
        );

}

.health_results_header {

    display: grid;

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

    gap: 70px;

    align-items: end;

    padding:
        clamp(36px, 5vw, 58px);

    border: 1px solid rgba(255, 255, 255, 0.92);

    border-radius: 30px;

    background: var(--health-panel-light);

    box-shadow: var(--health-shadow-card);

}

.health_results_header h2 {

    max-width: 760px;

    margin: 17px 0;

    color: var(--health-black);

    font-size: clamp(42px, 5.2vw, 72px);
    font-weight: 600;

    line-height: 0.99;

    letter-spacing: -0.052em;

}

.health_results_header p {

    max-width: 690px;

    margin: 0;

    color: var(--health-grey-700);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   OVERALL SCORE
   ========================================================= */

.health_total_score {

    display: grid;

    grid-template-columns: auto auto;

    align-items: baseline;

    min-width: 210px;

    padding: 28px;

    border-radius: 24px;

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-button);

}

.health_total_score_number {

    color: var(--health-white);

    font-size: clamp(62px, 7vw, 92px);
    font-weight: 600;

    line-height: 0.85;

    letter-spacing: -0.07em;

}

.health_total_score_suffix {

    margin-left: 5px;

    color: rgba(255, 255, 255, 0.54);

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

}

.health_total_score_status {

    grid-column: 1 / -1;

    margin-top: 18px;

    color: var(--health-orange);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.11em;

}


/* =========================================================
   CATEGORY RESULTS
   ========================================================= */

.health_category_results {

    display: grid;

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

    gap: 14px;

    margin-top: 24px;

}

.health_category_result {

    padding: 24px;

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 22px;

    background: var(--health-panel-light);

    box-shadow: var(--health-shadow-card);

    transition:
        transform 180ms ease,
        border 180ms ease;

}

.health_category_result:hover {

    transform: translateY(-2px);

}

.health_category_result.is_priority {

    border-color: rgba(255, 59, 31, 0.22);

    background:
        linear-gradient(
            135deg,
            #f8f8f9,
            rgba(255, 59, 31, 0.045)
        );

}

.health_category_top {

    display: flex;

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

    gap: 20px;

    margin-bottom: 17px;

    color: var(--health-charcoal);

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

}

.health_category_top strong {

    color: var(--health-black);

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

}

.health_category_track {

    overflow: hidden;

    width: 100%;
    height: 6px;

    border-radius: 999px;

    background: #dedee1;

}

.health_category_bar {

    width: 0;
    height: 100%;

    border-radius: 999px;

    background: var(--health-charcoal);

    transition:
        width 700ms
        cubic-bezier(0.2, 0.75, 0.2, 1),
        background 220ms ease;

}

.health_category_result.is_priority
.health_category_bar {

    background:
        linear-gradient(
            90deg,
            var(--health-orange),
            #ff6b52
        );

}


/* =========================================================
   PRIORITY SECTION
   ========================================================= */

.health_priority_section {

    margin-top:
        clamp(80px, 8vw, 120px);

}

.health_priority_heading {

    max-width: 760px;

    margin-bottom: 34px;

}

.health_priority_heading h2 {

    margin: 16px 0;

    color: var(--health-black);

    font-size: clamp(38px, 4.8vw, 64px);
    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.048em;

}

.health_priority_heading p {

    max-width: 670px;

    margin: 0;

    color: var(--health-grey-700);

    font-size: 14px;

    line-height: 1.7;

}

.health_priority_list {

    display: grid;

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

    gap: 18px;

}

.health_priority_item {

    position: relative;

    overflow: hidden;

    min-height: 280px;

    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.92);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #f7f7f8,
            #eeeeef
        );

    box-shadow: var(--health-shadow-card);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;

}

.health_priority_item:hover {

    transform: translateY(-4px);

    box-shadow: var(--health-shadow-raised);

}

.health_priority_item::after {

    content: "";

    position: absolute;

    right: -55px;
    bottom: -55px;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 59, 31, 0.1),
            transparent 68%
        );

}

.health_priority_number {

    position: relative;

    z-index: 2;

    display: flex;

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

    margin-bottom: 54px;

    color: var(--health-orange);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.09em;

}

.health_priority_score {

    color: var(--health-grey-600);

    font-size: 11px;

}

.health_priority_item h3 {

    position: relative;

    z-index: 2;

    margin: 0 0 14px;

    color: var(--health-black);

    font-size: 21px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -0.025em;

}

.health_priority_item p {

    position: relative;

    z-index: 2;

    margin: 0;

    color: var(--health-grey-700);

    font-size: 13px;

    line-height: 1.65;

}


/* =========================================================
   RECOMMENDATION
   ========================================================= */

.health_recommendation {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(290px, 0.45fr);

    gap: 70px;

    align-items: end;

    margin-top:
        clamp(80px, 8vw, 120px);

    padding:
        clamp(40px, 6vw, 72px);

    border-radius: 30px;

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-raised);

}

.health_recommendation::before {

    content: "";

    position: absolute;

    z-index: -1;

    top: -120px;
    right: -80px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 59, 31, 0.52),
            rgba(255, 59, 31, 0.12) 40%,
            transparent 69%
        );

    filter: blur(18px);

}

.health_recommendation_state h2 {

    max-width: 760px;

    margin: 16px 0 21px;

    color: var(--health-white);

    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -0.045em;

}

.health_recommendation_state p {

    max-width: 720px;

    margin: 0 0 13px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 14px;

    line-height: 1.7;

}

.health_recommendation_state
.health_recommendation_emphasis {

    color: var(--health-white);

    font-weight: 600;

}

.health_recommendation_actions {

    display: grid;

    gap: 11px;

}

.health_recommendation_actions
.health_primary_button {

    width: 100%;

}

.health_secondary_button {

    display: flex;

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

    min-height: 52px;

    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.04);

    color: rgba(255, 255, 255, 0.75);

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

    text-decoration: none;

    transition:
        background 180ms ease,
        border 180ms ease,
        color 180ms ease,
        transform 180ms ease;

}

.health_secondary_button:hover {

    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.24);

    background: rgba(255, 255, 255, 0.08);

    color: var(--health-white);

}


/* =========================================================
   RESULT NOTE
   ========================================================= */

.health_result_note {

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 760px);

    gap: 24px;

    margin-top: 24px;

    padding:
        25px
        28px;

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 20px;

    background: var(--health-panel-light);

    box-shadow:
        0 7px 16px rgba(30, 30, 30, 0.035);

}

.health_result_note span {

    color: var(--health-charcoal);

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

}

.health_result_note p {

    margin: 0;

    color: var(--health-grey-700);

    font-size: 11px;

    line-height: 1.65;

}


/* =========================================================
   CLOSING SECTION
   ========================================================= */

.health_closing {

    padding:
        clamp(100px, 11vw, 170px)
        0;

    background: var(--health-page);

}

.health_closing_inner {

    position: relative;

    overflow: hidden;

    max-width: none;

    padding:
        clamp(46px, 7vw, 88px);

    border: 1px solid rgba(255, 255, 255, 0.92);

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #f7f7f8,
            #ededf0
        );

    box-shadow: var(--health-shadow-card);

}

.health_closing_inner::after {

    content: "";

    position: absolute;

    top: -120px;
    right: -80px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 59, 31, 0.16),
            transparent 68%
        );

    pointer-events: none;

}

.health_closing_inner h2 {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 19px 0 27px;

    color: var(--health-black);

    font-size: clamp(42px, 5.8vw, 78px);
    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.054em;

}

.health_closing_inner p {

    position: relative;

    z-index: 2;

    max-width: 680px;

    margin: 0 0 12px;

    color: var(--health-grey-700);

    font-size: 14px;

    line-height: 1.7;

}

.health_text_link {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 26px;

    padding: 14px 20px;

    border-radius: 999px;

    background: var(--health-charcoal);

    color: var(--health-white);

    box-shadow: var(--health-shadow-button);

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

    text-decoration: none;

    transition:
        background 180ms ease,
        transform 180ms ease;

}

.health_text_link:hover {

    transform: translateY(-2px);

    background: var(--health-orange);

}

.health_text_link span {

    font-size: 16px;

}


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

.health_footer {

    padding:
        0
        0
        28px;

    background: var(--health-page);

}

.health_footer_inner {

    display: flex;

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

    gap: 30px;

    padding: 24px 30px;

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 20px;

    background: #eeeeef;

    color: var(--health-grey-600);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.04em;

}


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

.health_primary_button:focus-visible,
.health_secondary_button:focus-visible,
.health_submit_button:focus-visible,
.health_header_link:focus-visible,
.health_text_link:focus-visible {

    outline: 3px solid rgba(255, 59, 31, 0.25);

    outline-offset: 4px;

}


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

@media (max-width: 1050px) {

    .health_hero_grid {

        grid-template-columns: 1fr;

        gap: 52px;

    }

    .health_hero_summary {

        max-width: 640px;

    }

    .health_choices {

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

    }

    .health_submit_section {

        grid-template-columns: 1fr;

        gap: 38px;

    }

    .health_submit_action {

        max-width: 500px;

    }

    .health_results_header {

        grid-template-columns: 1fr;

        gap: 38px;

    }

    .health_total_score {

        max-width: 260px;

    }

    .health_priority_list {

        grid-template-columns: 1fr;

    }

    .health_priority_item {

        min-height: 0;

    }

    .health_priority_number {

        margin-bottom: 30px;

    }

    .health_recommendation {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .health_recommendation_actions {

        max-width: 440px;

    }

}


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

@media (max-width: 780px) {

    .health_header {

        padding-top: 18px;

    }

    .health_header_inner {

        min-height: 66px;

        padding:
            8px
            10px
            8px
            20px;

    }

    .health_header_label {

        display: none;

    }

    .health_header_link {

        min-height: 44px;

        padding:
            0
            18px;

    }

    .health_hero {

        margin:
            10px
            10px
            0;

        padding:
            150px
            0
            80px;

        border-radius: 26px;

    }

    .health_hero::before {

        top: -30px;
        right: -150px;

        width: 520px;
        height: 520px;

    }

    .health_principle_grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .health_form_heading {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .health_input_grid {

        grid-template-columns: 1fr;

    }

    .health_field_full {

        grid-column: auto;

    }

    .health_category_results {

        grid-template-columns: 1fr;

    }

}


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

@media (max-width: 600px) {

    .health_container {

        width:
            calc(100% - 24px);

    }

    .health_header_inner {

        width:
            calc(100% - 24px);

    }

    .health_brand {

        gap: 9px;

        font-size: 11px;

        letter-spacing: 0.22em;

    }

    .health_brand::before {

        width: 24px;
        height: 16px;

    }

    .health_header_link {

        min-height: 42px;

        padding:
            0
            15px;

        font-size: 10px;

    }

    .health_hero {

        padding:
            145px
            0
            70px;

    }

    .health_hero_title {

        font-size:
            clamp(43px, 13vw, 62px);

    }

    .health_hero_intro {

        margin-top: 22px;

        font-size: 14px;

    }

    .health_hero_actions {

        align-items: flex-start;

        flex-direction: column;

    }

    .health_primary_button {

        width: 100%;

    }

    .health_hero_summary {

        padding: 22px;

        border-radius: 22px;

    }

    .health_principle {

        padding:
            70px
            0;

    }

    .health_principle_grid {

        padding: 26px 22px;

        border-radius: 24px;

    }

    .health_progress {

        top: 8px;

        margin:
            0
            -2px
            22px;

        border-radius: 15px;

    }

    .health_form_section {

        padding:
            25px
            19px;

        border-radius: 24px;

    }

    .health_form_heading {

        margin-bottom: 28px;

    }

    .health_form_index {

        width: 46px;
        height: 46px;

        border-radius: 13px;

    }

    .health_form_heading h2 {

        font-size:
            clamp(29px, 9vw, 40px);

    }

    .health_question {

        padding: 20px 17px;

        border-radius: 18px;

    }

    .health_question legend {

        margin-bottom: 17px;

        font-size: 14px;

    }

    .health_choices {

        grid-template-columns: 1fr;

    }

    .health_choices span {

        min-height: 49px;

    }

    .health_submit_section {

        padding:
            29px
            22px;

        border-radius: 24px;

    }

    .health_submit_button {

        min-height: 55px;

    }

    .health_results {

        padding:
            80px
            0;

    }

    .health_results_header {

        padding:
            28px
            22px;

        border-radius: 24px;

    }

    .health_total_score {

        width: 100%;

        max-width: none;

    }

    .health_category_result {

        padding: 20px;

        border-radius: 18px;

    }

    .health_priority_item {

        padding: 23px;

        border-radius: 22px;

    }

    .health_recommendation {

        padding:
            30px
            22px;

        border-radius: 24px;

    }

    .health_result_note {

        grid-template-columns: 1fr;

        gap: 9px;

        padding: 21px;

    }

    .health_closing {

        padding:
            80px
            0;

    }

    .health_closing_inner {

        padding:
            34px
            24px;

        border-radius: 25px;

    }

    .health_closing_inner h2 {

        font-size:
            clamp(40px, 12vw, 58px);

    }

    .health_text_link {

        width: 100%;

        justify-content: space-between;

    }

    .health_footer_inner {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

        padding: 20px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}