:root {
    --navy: #0d3557;
    --navy-2: #13243e;
    --navy-dark: #091f34;

    --ink: #171b24;

    --orange: #fb4b12;
    --orange-2: #ff7a24;

    --amber: #f6b63f;

    --cream: #fff8ef;

    --white: #ffffff;

    --soft: #f7f9fb;
    --soft-2: #eef3f7;

    --muted: #6f7580;

    --line: rgba(13, 53, 87, 0.12);

    --shadow:
        0 24px 70px
        rgba(17, 31, 50, 0.14);
}


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    color: var(--ink);

    background: #fff;

    line-height: 1.5;
}


img {
    max-width: 100%;

    display: block;
}


a {
    text-decoration: none;

    color: inherit;
}


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


button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color:
        transparent;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(251, 75, 18, 0.22);

    outline-offset: 2px;
}


[hidden] {
    display: none !important;
}


.hide {
    display: none !important;
}


.container {
    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    margin: auto;
}


.eyebrow {
    font-size: 0.78rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    font-weight: 800;

    color: var(--orange);
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
    position: fixed;

    z-index: 40;

    top: 0;
    left: 0;
    right: 0;

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

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(13, 53, 87, 0.08);
}


.nav-inner {
    height: 76px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}


.brand {
    display: flex;

    align-items: center;

    gap: 12px;
}


.brand img {
    width: 150px;
}


.nav-links {
    display: flex;

    align-items: center;

    gap: 24px;

    font-size: 0.94rem;

    font-weight: 700;
}


.nav-links a {
    transition:
        color 0.2s ease;
}


.nav-links a:hover {
    color: var(--orange);
}


.nav-actions {
    display: flex;

    gap: 10px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding:
        0 20px;

    border-radius: 999px;

    border:
        1px solid
        transparent;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease,
        background 0.2s ease;
}


.btn:hover:not(:disabled) {
    transform:
        translateY(-1px);
}


.btn-primary {
    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--orange-2)
        );

    color: #fff;

    box-shadow:
        0 10px 26px
        rgba(251, 75, 18, 0.24);
}


.btn-primary:hover:not(:disabled) {
    box-shadow:
        0 15px 34px
        rgba(251, 75, 18, 0.29);
}


.btn-ghost {
    border-color:
        rgba(13, 53, 87, 0.18);

    background: #fff;

    color: var(--navy);
}


.btn-dark {
    background:
        var(--navy);

    color: #fff;
}


.btn-lg {
    min-height: 54px;

    padding:
        0 26px;
}


.btn:disabled {
    cursor: not-allowed;

    opacity: 0.48;

    transform: none;

    box-shadow: none;
}


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

.hero {
    padding:
        138px 0 82px;

    background:
        linear-gradient(
            120deg,
            #eef4f8 0%,
            #fff8ef 48%,
            #fff 100%
        );

    position: relative;

    overflow: hidden;
}


.hero::before {
    content: "";

    position: absolute;

    right: -14%;

    top: -18%;

    width: 620px;

    height: 620px;

    border:
        110px solid
        rgba(251, 75, 18, 0.08);

    border-radius:
        48% 52% 60% 40%;

    transform:
        rotate(28deg);
}


.hero-grid {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items: center;

    gap: 58px;
}


.hero h1 {
    font-size:
        clamp(
            3rem,
            6.4vw,
            6.2rem
        );

    line-height: 0.92;

    letter-spacing:
        -0.055em;

    margin:
        12px 0 22px;

    color:
        var(--navy);
}


.hero h1 span {
    background:
        linear-gradient(
            90deg,
            #0d3557 5%,
            #fa4b14 56%,
            #f6b63f
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.hero p {
    font-size:
        1.15rem;

    color:
        #4b5562;

    max-width:
        670px;
}


.hero-ctas {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 30px;
}


.hero-card {
    position: relative;
}


.hero-card img {
    border-radius: 30px;

    box-shadow:
        var(--shadow);
}


.float-card {
    position: absolute;

    left: -28px;

    bottom: -26px;

    background: #fff;

    border-radius: 18px;

    padding:
        18px 20px;

    box-shadow:
        var(--shadow);

    max-width: 260px;
}


.float-card strong {
    display: block;

    color:
        var(--navy);

    font-size:
        1.05rem;
}


.float-card span {
    font-size:
        0.86rem;

    color:
        var(--muted);
}


/* =========================================================
   STATS
========================================================= */

.stats {
    margin-top: -28px;

    position: relative;

    z-index: 3;
}


.stats-grid {
    display: grid;

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

    background: #fff;

    border-radius: 22px;

    box-shadow:
        var(--shadow);

    overflow: hidden;
}


.stat {
    padding:
        27px 28px;

    border-right:
        1px solid
        var(--line);
}


.stat:last-child {
    border: 0;
}


.stat strong {
    font-size: 1.4rem;

    color:
        var(--navy);

    display: block;
}


.stat span {
    font-size:
        0.86rem;

    color:
        var(--muted);
}


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

.section {
    padding:
        96px 0;
}


.section-soft {
    background:
        #f7f9fb;
}


.section-dark {
    background:
        linear-gradient(
            135deg,
            #0c3151,
            #1d1f33
        );

    color: #fff;
}


.section-title {
    font-size:
        clamp(
            2rem,
            4vw,
            3.4rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

    margin:
        10px 0 16px;

    color:
        var(--navy);
}


.section-dark .section-title {
    color:
        #fff;
}


.section-lead {
    font-size:
        1.08rem;

    color:
        #5d6470;

    max-width:
        720px;
}


.section-dark .section-lead {
    color:
        #cbd6df;
}


/* =========================================================
   CARDS
========================================================= */

.cards {
    display: grid;

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

    gap: 20px;

    margin-top: 38px;
}


.card {
    background: #fff;

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

    border-radius: 20px;

    padding: 26px;

    transition:
        0.2s ease;
}


.card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 45px
        rgba(15, 38, 65, 0.09);
}


.card-icon {
    width: 46px;

    height: 46px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ffe2d3,
            #fff1bc
        );

    display: grid;

    place-items: center;

    font-weight: 900;

    color:
        var(--orange);

    margin-bottom:
        18px;
}


.card h3 {
    margin:
        0 0 8px;

    color:
        var(--navy);
}


.card p {
    margin: 0;

    color:
        #6b7280;

    font-size:
        0.95rem;
}


/* =========================================================
   ABOUT IMAGES
========================================================= */

.story-visuals {
    display: grid;

    grid-template-columns:
        1.35fr 0.85fr;

    gap: 20px;

    margin:
        38px 0 10px;
}


.story-image {
    margin: 0;

    position: relative;

    min-height: 310px;

    border-radius: 24px;

    overflow: hidden;

    background:
        #0d3557;

    box-shadow:
        var(--shadow);
}


.story-image img {
    width: 100%;

    height: 100%;

    min-height: 310px;

    object-fit: cover;
}


.story-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(5, 24, 40, 0.82) 100%
        );

    pointer-events: none;
}


.story-image figcaption {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 20px;

    color: #fff;

    display: grid;

    gap: 2px;
}


.story-image figcaption strong {
    font-size:
        1.12rem;
}


.story-image figcaption span {
    font-size:
        0.88rem;

    color:
        rgba(
            255,
            255,
            255,
            0.84
        );
}


/* =========================================================
   K53
========================================================= */

.k53-grid {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 56px;

    align-items: center;
}


.image-stack {
    position: relative;
}


.image-stack img:first-child {
    border-radius: 28px;

    box-shadow:
        var(--shadow);
}


.image-stack img:last-child {
    position: absolute;

    width: 48%;

    right: -8%;

    bottom: -12%;

    border:
        8px solid #fff;

    border-radius: 20px;

    box-shadow:
        var(--shadow);
}


.checklist {
    display: grid;

    gap: 12px;

    margin:
        28px 0;
}


.check {
    display: flex;

    gap: 12px;

    align-items:
        flex-start;
}


.check i {
    font-style: normal;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background:
        #fff0df;

    color:
        var(--orange);

    font-weight: 900;

    display: grid;

    place-items: center;

    flex:
        0 0 auto;
}


.sign-topics {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin:
        4px 0 26px;
}


.sign-topic {
    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 12px 8px 8px;

    background: #fff;

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

    border-radius: 999px;

    font-size:
        0.82rem;

    font-weight: 800;

    color:
        var(--navy);
}


.sign-topic img {
    width: 34px;

    height: 34px;

    object-fit: contain;
}


/* =========================================================
   IMPACT FLOW
========================================================= */

.flow {
    display: grid;

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

    gap: 12px;

    margin-top: 38px;
}


.flow-step {
    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

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

    padding: 22px;

    border-radius: 18px;
}


.flow-step b {
    display: block;

    color:
        #f9be48;

    font-size:
        0.82rem;

    margin-bottom:
        8px;
}


.flow-step strong {
    font-size:
        1rem;
}


/* =========================================================
   PARTNERS
========================================================= */

.cta-band {
    position: relative;

    isolation: isolate;

    background:
        linear-gradient(
            90deg,
            rgba(9, 31, 52, 0.94) 0%,
            rgba(13, 53, 87, 0.88) 42%,
            rgba(251, 75, 18, 0.48) 100%
        ),
        url('../images/sa-partners.png')
        center 52% / cover
        no-repeat;

    min-height: 390px;

    border-radius: 30px;

    padding:
        58px 62px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

    overflow: hidden;
}


.cta-band::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            120deg,
            rgba(9, 31, 52, 0.25),
            transparent 65%
        );
}


.cta-copy {
    max-width: 690px;
}


.cta-band h2 {
    margin: 0;

    font-size:
        clamp(
            2rem,
            3.7vw,
            3.05rem
        );

    line-height: 1.02;

    max-width: 700px;
}


.cta-band p {
    margin:
        12px 0 0;

    max-width: 640px;

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

    font-size:
        1rem;

    line-height: 1.6;
}


.cta-band .btn-dark {
    flex:
        0 0 auto;

    background: #fff;

    color:
        var(--navy);

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


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

.footer {
    padding:
        48px 0 26px;

    background:
        #091f34;

    color:
        #dce6ef;
}


.footer-grid {
    display: grid;

    grid-template-columns:
        1.25fr 0.7fr 0.7fr;

    gap: 40px;
}


.footer-logo {
    width: 190px;

    margin-bottom:
        16px;
}


.footer h4 {
    color: #fff;

    margin:
        0 0 12px;
}


.footer a {
    display: block;

    color:
        #c7d3dd;

    margin:
        7px 0;

    font-size:
        0.92rem;
}


.footer small {
    display: block;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    margin-top: 36px;

    padding-top: 20px;

    color:
        #95a8ba;
}


/* =========================================================
   MODALS
========================================================= */

.modal {
    position: fixed;

    inset: 0;

    background:
        rgba(8, 24, 40, 0.72);

    backdrop-filter:
        blur(5px);

    z-index: 100;

    display: none;

    padding:
        30px 20px;

    overflow: auto;
}


.modal.open {
    display: grid;

    align-items: start;

    justify-items: center;
}


.modal-panel {
    width:
        min(
            760px,
            100%
        );

    margin: auto;

    background: #fff;

    border-radius: 26px;

    box-shadow:
        0 30px 100px
        rgba(4, 20, 34, 0.32);

    overflow: auto;

    position: relative;

    max-height:
        calc(100vh - 60px);

    animation:
        modalEnter
        0.24s ease both;
}


.modal-panel-wide {
    width:
        min(
            1040px,
            100%
        );
}


@keyframes modalEnter {

    from {
        opacity: 0;

        transform:
            translateY(14px)
            scale(0.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.modal-header {
    padding:
        26px 30px 20px;

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

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 20px;

    position: sticky;

    top: 0;

    z-index: 5;

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

    backdrop-filter:
        blur(12px);
}


.modal-header h2 {
    margin:
        3px 0 0;

    color:
        var(--navy);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2rem
        );
}


.close {
    border: 0;

    background:
        #f1f4f6;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    font-size: 1.35rem;

    line-height: 1;

    cursor: pointer;

    flex:
        0 0 auto;

    color:
        var(--navy);

    transition:
        0.2s ease;
}


.close:hover {
    background:
        #ffece4;

    color:
        var(--orange);

    transform:
        rotate(4deg);
}


.form-wrap {
    padding:
        28px 30px 34px;
}


/* =========================================================
   CONSENT GATE
========================================================= */

.consent-intro > p {
    color:
        #586371;

    font-size:
        0.96rem;

    line-height:
        1.65;
}


.consent-summary {
    margin:
        24px 0;

    padding:
        22px 24px;

    border:
        1px solid
        rgba(13, 53, 87, 0.09);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #fffaf4
        );
}


.consent-summary h3 {
    margin:
        0 0 12px;

    color:
        var(--navy);

    font-size:
        1.05rem;
}


.consent-summary ul {
    margin:
        0;

    padding-left:
        20px;

    color:
        #53606d;
}


.consent-summary li {
    margin:
        8px 0;

    line-height:
        1.5;
}


.consent-gate {
    display: flex;

    align-items:
        flex-start;

    gap: 13px;

    padding:
        18px;

    border:
        1px solid
        #f1d6c7;

    border-radius:
        16px;

    background:
        #fff8f3;

    font-size:
        0.92rem;

    line-height:
        1.55;

    cursor: pointer;
}


.consent-gate input {
    width: auto;

    flex:
        0 0 auto;

    margin-top: 4px;

    transform:
        scale(1.1);
}


.consent-gate a {
    color:
        var(--navy);

    font-weight: 800;

    text-decoration:
        underline;
}


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

.step-meta {
    display: flex;

    justify-content:
        space-between;

    gap: 18px;

    align-items: center;

    margin-bottom: 10px;

    font-size:
        0.8rem;

    font-weight: 800;

    color:
        #65717d;
}


.step-meta #stepTitle {
    color:
        var(--navy);
}


.progress {
    height: 7px;

    background:
        #eef1f4;

    border-radius:
        999px;

    overflow: hidden;

    margin-bottom:
        28px;
}


.progress span {
    display: block;

    height: 100%;

    width: 16.666%;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--amber)
        );

    transition:
        width 0.28s ease;
}


/* =========================================================
   FORM STEPS
========================================================= */

.form-step {
    display: none;

    animation:
        stepEnter
        0.2s ease both;
}


.form-step.active {
    display: block;
}


@keyframes stepEnter {

    from {
        opacity: 0;

        transform:
            translateX(8px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


.form-section-heading {
    margin:
        0 0 18px;
}


.form-section-heading h3 {
    margin:
        0 0 5px;

    color:
        var(--navy);

    font-size:
        1.2rem;
}


.form-section-heading p {
    margin: 0;

    color:
        #6d7580;

    font-size:
        0.88rem;
}


.form-section-heading.secondary {
    margin-top: 28px;

    padding-top: 22px;

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


/* =========================================================
   FIELDS
========================================================= */

.fields {
    display: grid;

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

    gap:
        17px;
}


.fields.full {
    grid-column:
        1 / -1;

    width: 100%;
}


.field {
    display: grid;

    gap: 7px;

    min-width: 0;
}


.field.full {
    grid-column:
        1 / -1;
}


.field label {
    font-size:
        0.86rem;

    font-weight: 800;

    color:
        #293544;
}


.field input,
.field select,
.field textarea {
    width: 100%;

    min-height: 48px;

    border:
        1px solid
        #d9e0e6;

    border-radius:
        12px;

    padding:
        13px 14px;

    outline: none;

    background: #fff;

    color:
        var(--ink);

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


.field textarea {
    min-height: 110px;

    resize: vertical;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color:
        #f66c2a;

    box-shadow:
        0 0 0 3px
        rgba(251, 75, 18, 0.1);
}


.field input::placeholder,
.field textarea::placeholder {
    color:
        #a0a8b1;
}


.hint {
    font-size:
        0.78rem;

    color:
        #7e8792;

    line-height:
        1.45;
}


.optional {
    font-weight: 500;

    color:
        #818a93;
}


/* =========================================================
   CHOICES
========================================================= */

.choice-grid {
    display: grid;

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

    gap:
        9px 12px;

    background:
        #f7f9fb;

    border-radius:
        14px;

    padding: 14px;
}


.choice-grid label,
.radio-row label {
    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    font-size:
        0.88rem;

    color:
        #34414e;

    cursor: pointer;
}


.choice-grid input,
.radio-row input,
.consent input {
    width: auto;

    min-height: 0;

    margin: 0;

    flex:
        0 0 auto;
}


.radio-row {
    display: flex;

    gap: 18px;

    align-items: center;

    min-height: 48px;

    background:
        #f7f9fb;

    border-radius:
        12px;

    padding:
        12px 14px;
}


/* =========================================================
   CONSENT FIELDS
========================================================= */

.consent {
    background:
        #f7f9fb;

    border:
        1px solid
        rgba(13, 53, 87, 0.07);

    border-radius:
        14px;

    padding:
        15px 16px;
}


.consent label {
    display: flex;

    gap: 10px;

    align-items:
        flex-start;

    font-weight: 500;

    font-size:
        0.9rem;

    line-height:
        1.5;

    cursor: pointer;
}


.consent input {
    margin-top: 3px;
}


.consent a {
    color:
        var(--navy);

    font-weight: 700;
}


/* =========================================================
   UNDER 18
========================================================= */

.under18 {
    display: block;

    margin-top: 18px;

    background:
        #fff7e7;

    border:
        1px solid
        #f5d791;

    border-radius:
        14px;

    padding:
        14px 16px;

    color:
        #76520c;

    font-size:
        0.87rem;

    line-height:
        1.5;
}


.under18 strong {
    display: block;

    margin-bottom: 4px;
}


/* =========================================================
   GUARDIANS
========================================================= */

.guardian-box {
    background:
        #f8fafc;

    border:
        1px solid
        #e2e7ec;

    border-radius:
        18px;

    padding: 20px;

    display: block;

    margin-bottom: 26px;
}


.guardian-heading {
    display: flex;

    justify-content:
        space-between;

    gap: 16px;

    align-items:
        flex-start;

    margin-bottom: 8px;
}


.guardian-heading h3 {
    margin:
        3px 0 0;

    color:
        var(--navy);

    font-size:
        1.25rem;
}


.guardian-badge {
    background:
        #fff0e8;

    color:
        #9c3b12;

    border:
        1px solid
        #ffd0ba;

    border-radius:
        999px;

    padding:
        7px 10px;

    font-size:
        0.75rem;

    font-weight: 800;

    white-space:
        nowrap;
}


.guardian-copy {
    margin:
        0 0 16px;

    color:
        #687380;

    font-size:
        0.88rem;

    line-height: 1.55;
}


.guardian-fields {
    margin-top: 4px;
}


.guardian-consent {
    background: #fff;
}


/* =========================================================
   FORM ACTIONS / MESSAGES
========================================================= */

.form-actions {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 12px;

    margin-top: 26px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(13, 53, 87, 0.07);
}


.form-message {
    margin-top: 16px;

    padding:
        13px 15px;

    border-radius:
        12px;

    display: none;

    line-height:
        1.5;
}


.form-message.error {
    display: block;

    background:
        #fff0ee;

    color:
        #a62818;

    border:
        1px solid
        #ffd1c8;
}


.form-message.success {
    display: block;

    background:
        #eaf8ef;

    color:
        #17652c;

    border:
        1px solid
        #c8ead4;
}


/* =========================================================
   REVIEW SCREEN
========================================================= */

.registration-review {
    margin:
        20px 0 26px;
}


.review-grid {
    display: grid;

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

    gap: 15px;
}


.review-card {
    border:
        1px solid
        rgba(13, 53, 87, 0.1);

    border-radius:
        17px;

    overflow: hidden;

    background: #fff;
}


.review-card h4 {
    margin: 0;

    padding:
        13px 16px;

    background:
        linear-gradient(
            90deg,
            #f6f9fb,
            #fff8f2
        );

    color:
        var(--navy);

    font-size:
        0.92rem;

    border-bottom:
        1px solid
        rgba(13, 53, 87, 0.08);
}


.review-card-body {
    padding:
        4px 16px;
}


.review-row {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 12px;

    padding:
        11px 0;

    border-bottom:
        1px solid
        rgba(13, 53, 87, 0.07);
}


.review-row:last-child {
    border-bottom: 0;
}


.review-label {
    color:
        #737d88;

    font-size:
        0.78rem;
}


.review-value {
    color:
        #253748;

    font-size:
        0.82rem;

    overflow-wrap:
        anywhere;

    text-align: right;
}


/* =========================================================
   SUCCESS PANEL
========================================================= */

.success-panel {
    text-align: center;

    padding:
        32px 20px 28px;
}


.success-panel img {
    width: 76px;

    margin:
        0 auto 16px;
}


.success-panel h3 {
    font-size:
        2rem;

    color:
        var(--navy);

    margin:
        8px 0;
}


.success-panel p {
    color:
        #687380;

    max-width:
        580px;

    margin:
        12px auto;
}


.participant-code {
    display: inline-block;

    background:
        #f3f5f7;

    border:
        1px solid
        #e5e9ed;

    border-radius:
        10px;

    padding:
        10px 15px;

    font-weight: 900;

    color:
        var(--navy);

    margin:
        10px 0 20px;

    letter-spacing:
        0.04em;
}


/* =========================================================
   RESPONSIVE
========================================================= */

.mobile-menu {
    display: none;
}


@media (max-width: 900px) {

    .nav-links {
        display: none;
    }


    .mobile-menu {
        display:
            inline-flex;
    }


    .hero-grid,
    .k53-grid {
        grid-template-columns:
            1fr;
    }


    .hero-card {
        max-width:
            680px;
    }


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


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


    .stat:nth-child(2) {
        border-right: 0;
    }


    .stat:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--line);
    }


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


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


    .story-visuals {
        grid-template-columns:
            1fr 1fr;
    }


    .cta-band {
        min-height:
            360px;

        padding:
            46px 38px;

        background-position:
            62% center;

        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


@media (max-width: 760px) {

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


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


    .step-meta {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 4px;
    }


    .modal-panel,
    .modal-panel-wide {
        max-height:
            none;
    }
}


@media (max-width: 620px) {

    .container {
        width:
            min(
                calc(100% - 24px),
                1180px
            );
    }


    .nav-inner {
        height: 68px;
    }


    .brand img {
        width: 132px;
    }


    .nav-actions .btn-ghost {
        display: none;
    }


    .nav-actions .btn-primary {
        min-height: 42px;

        padding:
            0 16px;

        font-size:
            0.88rem;
    }


    .hero {
        padding-top:
            112px;
    }


    .hero h1 {
        font-size:
            3.25rem;
    }


    .section {
        padding:
            72px 0;
    }


    .cards,
    .fields,
    .flow,
    .footer-grid {
        grid-template-columns:
            1fr;
    }


    .fields.full {
        grid-template-columns:
            1fr;
    }


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


    .stat {
        border-right:
            0 !important;

        border-bottom:
            1px solid
            var(--line) !important;
    }


    .stat:last-child {
        border-bottom:
            0 !important;
    }


    .modal {
        padding:
            10px;
    }


    .modal-panel {
        width: 100%;

        border-radius:
            20px;
    }


    .modal-header {
        padding:
            20px 18px 16px;
    }


    .form-wrap {
        padding:
            22px 18px 26px;
    }


    .form-actions {
        flex-wrap: wrap;
    }


    .form-actions .btn {
        flex:
            1 1 auto;
    }


    .cta-band {
        min-height:
            440px;

        padding:
            34px 24px;

        background-position:
            68% center;
    }


    .cta-band::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: -1;

        background:
            rgba(
                8,
                24,
                40,
                0.22
            );
    }


    .float-card {
        left: 10px;

        right: 10px;

        bottom: -22px;
    }


    .hero-card {
        margin-bottom:
            22px;
    }


    .story-visuals {
        grid-template-columns:
            1fr;
    }


    .story-image,
    .story-image img {
        min-height:
            240px;
    }


    .sign-topics {
        gap: 8px;
    }


    .sign-topic {
        font-size:
            0.78rem;
    }


    .sign-topic img {
        width: 30px;

        height: 30px;
    }


    .guardian-heading {
        flex-direction:
            column;
    }


    .guardian-badge {
        white-space:
            normal;
    }


    .guardian-box {
        padding:
            15px;
    }


    .review-row {
        grid-template-columns:
            1fr;

        gap: 3px;
    }


    .review-value {
        text-align: left;
    }
}


@media (max-width: 480px) {

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


    .radio-row {
        gap: 12px;

        flex-wrap: wrap;
    }


    .hero h1 {
        font-size:
            2.75rem;
    }


    .consent-summary {
        padding:
            18px;
    }
}


/* =========================================================
   LEGAL DOCUMENT VIEWER
========================================================= */

.legal-modal {
    z-index: 160;
    background: rgba(5, 20, 34, 0.78);
}


.legal-panel {
    width: min(900px, 100%);
    max-height: calc(100vh - 40px);
}


.legal-toolbar {
    position: sticky;
    top: 98px;
    z-index: 4;

    display: flex;
    align-items: center;

    padding: 12px 30px;

    border-bottom:
        1px solid
        rgba(13, 53, 87, 0.08);

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

    backdrop-filter:
        blur(12px);
}


.legal-back-button {
    appearance: none;

    border: 0;

    background: transparent;

    color: var(--navy);

    font-weight: 800;

    font-size: 0.88rem;

    cursor: pointer;

    padding: 5px 0;
}


.legal-back-button:hover {
    color: var(--orange);
}


.legal-modal-content {
    padding: 30px 36px 40px;

    color: #374554;

    line-height: 1.7;
}


.legal-modal-content h1 {
    color: var(--navy);

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.55rem
        );

    line-height: 1.12;

    margin:
        0 0 8px;
}


.legal-modal-content h2 {
    color: var(--navy);

    font-size: 1.3rem;

    margin:
        34px 0 10px;

    padding-top: 6px;
}


.legal-modal-content h3 {
    color: var(--navy);

    font-size: 1rem;

    margin:
        22px 0 8px;
}


.legal-modal-content p {
    margin:
        8px 0 14px;
}


.legal-modal-content ul,
.legal-modal-content ol {
    padding-left: 22px;
}


.legal-modal-content li {
    margin:
        7px 0;
}


.legal-modal-content a {
    color: var(--navy);

    font-weight: 700;

    text-decoration: underline;
}


.legal-meta {
    margin:
        0 0 26px;

    color: #7a8490;

    font-size: 0.83rem;
}


.legal-callout {
    margin:
        20px 0;

    padding:
        17px 19px;

    background:
        #fff7ed;

    border:
        1px solid
        #ffd9c3;

    border-left:
        4px solid
        var(--orange);

    border-radius:
        12px;
}


.legal-info-box {
    margin:
        20px 0;

    padding:
        17px 19px;

    background:
        #f4f8fb;

    border:
        1px solid
        #dfe8ef;

    border-radius:
        12px;
}


.legal-document strong {
    color: #273849;
}


.legal-footer-actions {
    position: sticky;

    bottom: 0;

    display: flex;

    justify-content: flex-end;

    padding:
        16px 30px;

    border-top:
        1px solid
        rgba(13, 53, 87, 0.08);

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

    backdrop-filter:
        blur(12px);
}


.legal-loading {
    min-height: 260px;

    display: grid;

    place-items: center;

    align-content: center;

    gap: 12px;

    color: #74808c;
}


.legal-loading-spinner {
    width: 34px;

    height: 34px;

    border-radius: 50%;

    border:
        3px solid
        #e9edf0;

    border-top-color:
        var(--orange);

    animation:
        legalSpin 0.7s linear infinite;
}


@keyframes legalSpin {

    to {
        transform: rotate(360deg);
    }
}


.legal-load-error {
    padding: 30px;

    border-radius: 16px;

    background: #fff4f1;

    color: #922e1d;
}


@media (max-width: 620px) {

    .legal-modal-content {
        padding:
            24px 20px 32px;
    }


    .legal-toolbar {
        top: 82px;

        padding:
            10px 20px;
    }


    .legal-footer-actions {
        padding:
            14px 20px;
    }
}