@font-face {
    font-family:LemonMilk;
    src:url(assets/lemon-milk-medium.otf) format('opentype');
    font-style:normal;
    font-weight:500;
    font-display:swap
}

:root {
    --blue:#0065B5;
    --deep:#031329;
    --black:#030609;
    --white:#f7fbff;
    --lime:#E728CD;
    --cyan:#35d7ef;
    --line:rgba(255,255,255,.16);
    --muted:#a9bfd8;
    --max:1280px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--black);
    color:var(--white);
    font-family:Arial,
    Helvetica,
    sans-serif
}

a {
    text-decoration:none;
    color:inherit
}

button,
input {
    font:inherit
}

.wrap {
    width:min(var(--max),calc(100% - 72px));
    margin:auto
}

.display,
h1,
h2,
h3,
.wordmark {
    font-family:LemonMilk,
    Arial,
    Helvetica,
    sans-serif;
    font-weight:800;
    letter-spacing:-.035em
}

.header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:10
}

.nav {
    height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.18)
}

.wordmark {
    font-size:28px;
    letter-spacing:.18em
}

.wordmark sup {
    font:8px Arial;
    margin-left:2px;
    vertical-align:top
}

.navlinks {
    display:flex;
    gap:32px;
    align-items:center;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.13em;
    font-weight:700
}

.navlinks a {
    opacity:.88
}

.navlinks a:hover {
    color:var(--lime)
}

.navcta {
    border:1px solid rgba(255,255,255,.5);
    padding:12px 17px
}

.navcta:hover {
    background:var(--lime);
    color:#06101c;
    border-color:var(--lime)
}

.hero {
    min-height:850px;
    position:relative;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#0065B5 url("assets/hero-background.jpg") center center/cover no-repeat
}

.hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,15,45,.78) 0%,rgba(0,35,85,.36) 48%,rgba(0,85,160,.08) 100%),
    linear-gradient(0deg,rgba(0,8,20,.72),transparent 42%)
}

.hero-content {
    position:relative;
    z-index:2;
    width:100%;
    padding:0 0 76px
}

.hero-kicker {
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--lime);
    font-weight:800;
    margin-bottom:22px
}

.hero h1 {
    font-size:clamp(45px,90px,105px);
    line-height:.88;
    max-width:930px;
    margin:0 0 26px
}

.hero-sub {
    font-size:clamp(18px,2vw,24px);
    max-width:560px;
    lipaddinne-height:1.25;
    margin:0;
    color:#eef7ff
}

.hero-bottom {
    margin-top:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.scroll {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#d7eaff
}

.scroll span {
    display:inline-block;
    width:46px;
    height:1px;
    background:var(--lime);
    vertical-align:middle;
    margin-right:12px
}

.hero-stamp {
    font-family:LemonMilk,
    Arial;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.8)
}

.section {
    padding:110px 0
}

.blue {
    background:var(--blue)
}

.dark {
    background:var(--black);
    background-image: url('assets/bg_newsletter.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cream {
    background:#f4f7f9;
    color:#071529
}

.section-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:52px
}

.eyebrow {
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:800;
}

.section h2 {
    font-size:clamp(42px,6vw,78px);
    line-height:.92;
    margin:14px 0 0;
    max-width:760px
}

.section-intro {
    max-width:330px;
    color:#FFFFFF;
    font-size:16px;
    line-height:1.4
}

.cream .section-intro {
    color:#526273
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.card {
    position:relative;
    min-height:500px;
    overflow:hidden;
    background:#071b34;
    border:1px solid rgba(255,255,255,.14);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px
}

.card:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,#0a7ddd,#03214b 55%,#05080e)
}

.card:nth-child(2):before {
    background:linear-gradient(145deg,#03233d,#E728CD 50%,#07111e)
}

.card:nth-child(3):before {
    background:linear-gradient(145deg,#031019,#d9005d 72%,#ff6b00)
}

.card>* {
    position:relative;
    z-index:1
}

.card-num {
    position:absolute!important;
    top:24px;
    left:28px;
    font-size:11px;
    letter-spacing:.15em;
    color:rgba(255,255,255,.65)
}

.card h3 {
    font-size:38px;
    margin:0 0 12px
}

.card p {
    max-width:360px;
    margin:0 0 24px;
    color:#dce8f4;
    line-height:1.45
}

.arrow {
    font-size:25px;
    color:var(--lime)
}

.marquee {
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:20px 0;
    white-space:nowrap;
    background:#05090f
}

.marquee-track {
    display:inline-block;
    animation:move 28s linear infinite;
    font-family:LemonMilk,
    Arial;
    font-size:25px;
    letter-spacing:.03em
}

.marquee i {
    font-style:normal;
    color:var(--lime);
    padding:0 25px
}

@keyframes move {
    from {
        transform:translateX(0)
    }

to {
        transform:translateX(-50%)
    }

}

.stats {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:1px;
    background:rgba(7,21,41,.18);
    border:1px solid rgba(7,21,41,.12)
}

.stat {
    padding:42px;
    background:#f4f7f9
}

.stat strong {
    display:block;
    font-family:LemonMilk,
    Arial;
    font-size:clamp(42px,5vw,70px);
    line-height:1;
    color:#0065B5
}

.stat span {
    display:block;
    margin-top:13px;
    color:#536375;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.12em
}

.manifesto {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:end
}

.manifesto h2 {
    max-width:620px
}

.manifesto-copy {
    font-size:22px;
    line-height:1.35;
    color:#17263a
}

.manifesto-copy b {
    color:#0065B5
}

.signup {
    padding:100px 0;
    background:var(--lime);
    color:#06101b
}

.signup-grid {
    display:block;
    align-items:normal
}

.signup h2 {
    font-size:clamp(48px,6vw,82px);
    line-height:.9;
    margin:14px 0
}

.signup p {
    font-size:17px;
    max-width:100%;
    line-height:1.4;
    padding: 0 10% 0 10%;
}

.form {
    background:#06101b;
    padding:8px;
    display:flex;
    gap:8px;
    max-width:520px
}

.form input {
    min-width:0;
    flex:1;
    border:0;
    background:#102239;
    color:white;
    padding:18px
}

.form button {
    border:0;
    background:var(--lime);
    padding:0 24px;
    font-weight:900;
    cursor:pointer
}

.form-note {
    font-size:11px;
    color:#5d6a73;
    margin-top:12px
}

.footer {
    padding:36px 0;
    background:#020406;
    color:#8ea1b7
}

.footer-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}

.footer .wordmark {
    color:white;
    font-size:22px
}

.social {
    display:flex;
    gap:22px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em
}

.social a:hover {
    color:var(--lime)
}

@media(max-width:800px) {
    .wrap {
        width:min(var(--max),calc(100% - 40px))
    }

.nav {
        height:76px
    }

.navlinks {
        display:none
    }

.navcta {
        display:block
    }

.hero {
        min-height:760px;
        background-position:54% center
    }

.hero-content {
        padding-bottom:48px
    }

.hero h1 {
        font-size:clamp(45px,90px,105px)
    }

.hero-bottom {
        align-items:flex-start;
        flex-direction:column
    }

.cards,
    .stats,
    .manifesto,
    .signup-grid {
        grid-template-columns:1fr
    }

.section {
        padding:76px 0
    }

.section-head {
        display:block;
        margin-bottom:32px
    }

.section-intro {
        margin-top:25px
    }

.card {
        min-height:390px
    }

.stats {
        gap:1px
    }

.stat {
        padding:30px
    }

.signup-grid {
        gap:35px
    }

.form {
        flex-direction:column;
        background:transparent;
        padding:0
    }

.form input,
    .form button {
        min-height:54px
    }

.footer-inner {
        align-items:flex-start;
        flex-direction:column
    }

}

.beehiiv-form {
     width: 100%;
     min-height: 72px;
     display: flex;
     align-items: center;

}

.beehiiv-form > * {
     max-width: 100%;

}

/* ===== Stylesheet block %d ===== */ 
/* Nixtio-inspired editorial frame */ :root {
     --site-primary: #0065B5;
     --site-secondary: #E728CD;
     --site-background: #FFFFFF;
     --site-on-primary: #FFFFFF;
     --site-on-secondary: #FFFFFF;
     --site-on-background: #111111;
     --site-font-body: Inter,
     Arial,
     sans-serif;
     --site-font-heading: "Lemon Milk",
     "Arial Black",
     Arial,
     sans-serif;
     --site-heading-scale: 1;
     --site-spacing-scale: 1;
     --site-radius-scale: 1;
     --site-decoration-opacity: 1;

}

html {
     background: var(--site-background);

}

body {
     margin: 0;
     background: var(--site-background);
     color: #111111;

}

#app,
 .site,
 main,
 .page,
 .wrapper {
     background: var(--site-background);

}

.nx-frame {
     margin: 18px;
     border: 1px solid #111111;
     background: #F4F0E8;

}

.nx-section {
     border-top: 1px solid #111111;

}

.nx-label {
     font-size: 11px;
     letter-spacing: .08em;
     text-transform: uppercase;
     font-weight: 700;

}

.nx-number {
     font-family: "Lemon Milk",
     "Arial Black",
     Arial,
     sans-serif;
     font-size: 12px;
     letter-spacing: .03em;

}

.nx-display {
     font-family: "Lemon Milk",
     "Arial Black",
     Arial,
     sans-serif;
     letter-spacing: -.035em;
     line-height: .92;

}

.nx-outline {
     border: 1px solid #111111;
     background: transparent;

}

.nx-pink {
     color: #E728CD;

}

.nx-blue {
     color: #0065B5;

}

@media (max-width: 700px) {
     .nx-frame {
         margin: 10px;

    }

}

/* ===== Stylesheet block %d ===== */ 
/* White Nixtio-style gutters, rounded panels, and supplied brand assets */ :root {
     --site-primary: #0065B5;
     --site-secondary: #E728CD;
     --site-background: #FFFFFF;
     --site-on-primary: #FFFFFF;
     --site-on-secondary: #111111;
     --site-on-background: #111111;
     --site-font-body: Arial,
     Helvetica,
     sans-serif;
     --site-font-heading: LemonMilk,
     Arial,
     sans-serif;
     --site-heading-scale: 1;
     --site-spacing-scale: 1;
     --site-radius-scale: 1;
     --site-decoration-opacity: 1;

}

html,
 body {
     background: var(--site-background);

}

.nx-frame {
     position: relative;
     margin: 16px;
     padding: 12px;
     border: 1px solid #FFFFFF;
     border-radius: 28px;
     overflow: hidden;
     background: #FFFFFF;

}

.header {
     top: 12px;
     left: 12px;
     width: calc(100% - 24px);
     border-radius: 20px 20px 0 0;
     overflow: hidden;

}

main > .hero,
 main > .marquee,
 main > section,
 .nx-frame > .footer {
     margin: 0 0 12px;
     border: 1px solid #FFFFFF;
     border-radius: 22px;
     overflow: hidden;

}

main > .hero {
     border-radius: 22px;

}

main > .marquee {
     padding: 20px 0;

}

.nx-frame > .footer {
     margin-bottom: 0;

}

.tchclr-logo {
     display: block;
     width: auto;
     height: 32px;
     max-width: 190px;
     object-fit: contain;

}

.footer .tchclr-logo {
     height: 25px;

}

.wordmark {
     display: flex;
     align-items: center;
     letter-spacing: 0;

}

@media (max-width: 800px) {
     .nx-frame {
         margin: 8px;
         padding: 8px;
         border-radius: 22px;

    }

.header {
         top: 8px;
         left: 8px;
         width: calc(100% - 16px);

    }

main > .hero,
     main > .marquee,
     main > section,
     .nx-frame > .footer {
         margin-bottom: 8px;
         border-radius: 16px;

    }

.tchclr-logo {
         height: 26px;

    }

.footer .tchclr-logo {
         height: 22px;

    }

}

/* Navigation and section heading contrast update */ .navlinks,
 .navlinks a,
 .navlinks a:visited,
 .navlinks .navcta {
     color: #FFFFFF;

}

.navlinks .navcta {
     border-color: #FFFFFF;

}

.navlinks a:hover,
 .navlinks .navcta:hover {
     color: #FFFFFF;

}

.hero h1,
 .section h2,
 .card h3,
 .signup h2 {
     color: #FFFFFF;

}

/* Section 03 stays dark for contrast on its light surface. */ #education h2 {
     color: #071529;

}

/* Section 04 / Join uses the primary brand blue. */ .signup {
     background: #0065B5;
     color: #FFFFFF;

}

.signup .eyebrow,
 .signup p,
 .signup .form-note {
     color: #FFFFFF !important;

}

/* Section 04 expandable panel */
.section-expander {
    margin-top: 64px;
    border-top: 1px solid rgba(255,255,255,.55);
}
.expander-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0 8px;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.expander-label {
    font-family: LemonMilk, Arial, sans-serif;
    font-size: clamp(16px, 2vw, 22px);
    letter-spacing: .02em;
}
.expander-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}
.expander-trigger:hover .expander-icon {
    background: #fff;
    color: #0065B5;
    transform: rotate(18deg);
}
.expander-panel {
    position: relative;
    margin: 22px 0 8px;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 20px;
    background: rgba(0,28,65,.28);
    color: #fff;
    animation: expanderReveal .28s ease both;
}
.expander-panel[hidden] { display: none; }
.expander-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}
.expander-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .8;
}
.expander-panel h3 {
    margin: 14px 0 0;
    max-width: 700px;
    font-size: clamp(26px, 4vw, 48px);
    line-height: 1.02;
    color: #fff;
}
.expander-panel p {
    max-width: 650px;
    margin: 22px 0;
    line-height: 1.55;
}
.expander-close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.expander-close:hover { background: #fff; color: #0065B5; }
.expander-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.expander-link span { font-size: 20px; }
.expander-trigger:focus-visible, .expander-close:focus-visible, .expander-link:focus-visible {
    outline: 3px solid #E728CD;
    outline-offset: 4px;
}
@keyframes expanderReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .expander-icon, .expander-panel { transition: none; animation: none; } }