﻿

.page {
    display: block;
    width: 100%;
}

:root {
    --ivory: #F4F6F6;
    --navy: #103349;
    --navy-deep: #0B2536;
    --teal: #1F8A93;
    --teal-pale: #E2EEEC;
    --coral: #B23A5B;
    --charcoal: #2A2A2A;
    --hairline: #D6DBD8;
}

* {
    box-sizing: border-box;
}

/*  html,body{
    margin:0; padding:0;
    width:8.5in; height:11in;
    background:var(--ivory);
    font-family:'Poppins','Liberation Sans',sans-serif;
    font-weight:500;
    color:var(--charcoal);
    -webkit-font-smoothing:antialiased;
  }
*/
.page {
    width: 8.5in;
    /*height: 11in;*/
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible; /* Allow content to display */
}

/* ---------- Top identity band ---------- */
.topband {
    background: var(--navy-deep);
    color: #EFE9DA;
    padding: 0.16in 0.5in;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-size: 12.5pt;
    letter-spacing: 0.01em;
}

    .topband .org-group {
        display: flex;
        align-items: center;
        gap: 0.18in;
    }

        .topband .org-group.right {
            flex-direction: row-reverse;
        }

    .topband .logo-chip {
        background: #FFFFFF;
        border-radius: 6px;
        padding: 0.055in 0.1in;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .topband .logo-chip img {
            display: block;
            height: 0.36in;
            width: auto;
        }

    .topband .org {
        display: flex;
        flex-direction: column;
        line-height: 1.28;
    }

        .topband .org.right {
            text-align: right;
        }

        .topband .org b {
            font-weight: 700;
            color: #FFFFFF;
            font-size: 13.5pt;
        }

        .topband .org span {
            font-size: 10.3pt;
            color: #B9CBD3;
            font-weight: 500;
        }

    .topband .together {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        flex-shrink: 0;
        font-size: 10pt;
        color: #8FB6BF;
        font-style: italic;
        font-weight: 500;
        white-space: nowrap;
    }

/* ---------- Hero ---------- */
.hero {
    padding: 0.28in 0.55in 0.18in 0.55in;
    position: relative;
}

.hero-pulse {
    position: absolute;
    top: 0.18in;
    right: -0.3in;
    width: 3.6in;
    opacity: 0.16;
}

.kicker {
    font-size: 12pt;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 0.04em;
    margin: 0 0 0.09in 0;
}

h1 {
    font-family: 'Lora', 'Liberation Serif', serif;
    font-weight: 700;
    font-size: 47pt;
    line-height: 1.02;
    color: var(--navy);
    margin: 0 0 0.16in 0;
    max-width: 6.9in;
}

.subhead {
    font-size: 14pt;
    line-height: 1.32;
    color: var(--charcoal);
    max-width: 6.3in;
    font-weight: 500;
}

.rule {
    height: 3px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 30%, var(--hairline) 30%, var(--hairline) 100%);
    margin: 0.14in 0.55in 0 0.55in;
}

/* ---------- Two-column explainer ---------- */
.cols {
    display: flex;
    padding: 0.18in 0.55in 0.08in 0.55in;
    gap: 0.5in;
}

.col {
    flex: 1;
}

.col-label {
    display: flex;
    align-items: center;
    gap: 0.11in;
    font-size: 14.5pt;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.13in;
}

    .col-label svg {
        width: 0.36in;
        height: 0.36in;
        flex-shrink: 0;
    }

.col p {
    font-size: 12.2pt;
    line-height: 1.38;
    margin: 0;
    color: var(--charcoal);
    font-weight: 500;
}

.who-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.6pt;
    font-weight: 600;
    line-height: 1.3;
}

    .who-list li {
        padding: 0.05in 0 0.05in 0.32in;
        position: relative;
        border-bottom: 1px solid var(--hairline);
    }

        .who-list li:last-child {
            border-bottom: none;
        }

        .who-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.19in;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--coral);
        }

/* ---------- Program band ---------- */
.program {
    margin: 0.06in 0.55in 0 0.55in;
    background: var(--teal-pale);
    border-radius: 10px;
    padding: 0.19in 0.4in;
    display: flex;
    gap: 0.3in;
    align-items: flex-start;
}

    .program svg {
        width: 0.42in;
        height: 0.42in;
        flex-shrink: 0;
        margin-top: 0.03in;
    }

.program-text .col-label {
    margin-bottom: 0.08in;
}

.program-text p {
    font-size: 12.2pt;
    line-height: 1.38;
    margin: 0;
    color: var(--charcoal);
    font-weight: 500;
}

    .program-text p + p {
        margin-top: 0.07in;
    }

.page-text p {
    font-size: 12.2pt !important;
    line-height: 1.38 !important;
    margin: 0;
    color: var(--charcoal);
    font-weight: 500;
}

/* ---------- Spacer pushes CTA to bottom ---------- */
.spacer {
    flex: 1;
}

/* ---------- CTA band ---------- */
.cta {
    background: var(--navy);
    padding: 0.24in 0.55in;
    display: flex;
    align-items: center;
    gap: 0.3in;
}

    .cta .qr {
        background: #FFFFFF;
        padding: 0.1in;
        border-radius: 8px;
        width: 1.0in;
        height: 1.0in;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cta .qr img {
            width: 100%;
            height: 100%;
            display: block;
        }

.cta-text {
    color: #FFFFFF;
}

    .cta-text .cta-head {
        font-family: 'Lora','Liberation Serif',serif;
        font-weight: 700;
        font-size: 17.5pt;
        margin: 0 0 0.06in 0;
        color: #FFFFFF;
    }

    .cta-text p {
        font-size: 11.8pt;
        line-height: 1.34;
        margin: 0;
        color: #CFE0E6;
        max-width: 4.6in;
        font-weight: 500;
    }

    .cta-text .url {
        color: #FF9E7D;
        font-weight: 700;
    }

.cta-note {
    margin-left: auto;
    text-align: right;
    font-size: 9.3pt;
    color: #9FC0CB;
    max-width: 1.5in;
    line-height: 1.35;
    flex-shrink: 0;
    font-weight: 500;
}

