.gl,
.tg {
    text-transform: uppercase
}

.dk,
.mode,
.steps5 {
    overflow: hidden
}

.chips-sub,
.disclaimer,
.final,
.shead.ctr,
.statband {
    text-align: center
}

.dk::after,
.dk::before,
.ring,
.sticky-cta {
    pointer-events: none
}

.mode.dk .tg,
.st.sel .pn {
    color: var(--brass)
}

.mode.dk .tg,
.mode.dk h3,
.z {
    position: relative;
    z-index: 1
}

.dk {
    background: var(--navy-900);
    color: var(--d-text)
}

.dk::after,
.dk::before,
.particles,
.particles i,
.ring {
    position: absolute
}

.dk::before {
    content: '';
    inset: 0;
    background: radial-gradient(880px 540px at 86% -12%, rgba(127, 166, 212, .14), transparent 62%), radial-gradient(720px 460px at -8% 112%, rgba(180, 47, 42, .13), transparent 60%), radial-gradient(560px 380px at 55% 120%, rgba(20, 71, 126, .45), transparent 70%)
}

.dk::after {
    content: '';
    inset: 0;
    opacity: .5;
    background-image: linear-gradient(rgba(242, 245, 249, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 245, 249, .05) 1px, transparent 1px), var(--noise);
    background-size: 84px 84px, 84px 84px, 160px 160px
}
.hero-grid,
.sn {
    align-items: center
}

.mod h3 {
    font-family: 'League Spartan', sans-serif;
    letter-spacing: 0
}

.hero,
.hero-grid,
.mode,
.mode.dk p,
.pedigree li,
.pedigree ul {
    position: relative
}

.hero .r2,
.mc-panel .r1 {
    width: 300px;
    height: 300px
}

.hero .r2 {
    right: 40px;
    bottom: -130px;
    border-color: rgba(127, 166, 212, .13)
}

.ledger,
.statband {
    border-top: 1px solid var(--line)
}

.lrow,
.statband {
    border-bottom: 1px solid var(--line)
}

.lead,
.sb-cap {
    max-width: 54ch
}

.hero h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.7rem);
    margin: 22px 0 20px;
    max-width: 20ch
}

.mods {
    display: grid
}

.sb-big {
    line-height: 1;
    color: var(--brick);
    font-family: 'Playfair Display', serif
}
.mod h3 {
    font-weight: 700
}

.mode.dk p,
.st.sel p {
    color: #c3ccda
}

.statband {
    background: var(--paper-3);
    padding: clamp(52px, 7vw, 84px) clamp(20px, 5vw, 48px)
}

.mod,
.mode.a {
    background: var(--paper-2)
}

.sb-big {
    font-weight: 800;
    font-size: clamp(3rem, 7vw, 4.6rem);
    letter-spacing: -.02em
}

.sb-cap {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    margin: 18px auto 0;
    color: var(--ink)
}

.mod p,
.mode p,
.sb-src {
    color: var(--ink-2)
}

.sb-src {
    font-weight: 500;
    font-size: .78rem;
    margin: 16px auto 0;
    max-width: 74ch
}

.mtag,
.tg {
    font-weight: 800;
    color: var(--brick)
}

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

.mod {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 24px 22px;
    transition: border-color .25s var(--eo), transform .25s var(--eo)
}

.mod:hover {
    border-color: var(--brass);
    transform: translateY(-2px)
}

.mtag {
    display: inline-block;
    font-size: .62rem;
    letter-spacing: .14em;
    border: 1px solid var(--line);
    background: var(--paper-3);
    padding: 4px 9px;
    border-radius: 2px;
    margin-bottom: 12px
}

.mod h3 {
    font-size: 1.02rem;
    margin-bottom: 6px
}

.mod p {
    font-size: .88rem
}

.modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 28px
}

.mode {
    border-radius: 4px;
    padding: 30px 28px
}

.mode.a {
    border: 1px solid var(--line)
}

.gl-sel,
.st.sel {
    background: var(--navy-900)
}

.tg {
    font-size: .64rem;
    letter-spacing: .16em;
    margin-bottom: 10px
}

.mode h3 {
    font-size: 1.22rem;
    margin-bottom: 8px
}

.mode p {
    font-size: .93rem
}

.mode.dk p {
    z-index: 1
}

.grouplabel {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.gl {
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .08em;
    padding: 8px 14px;
    border-radius: 2px
}

.gl-sel {
    color: var(--brass);
    border: 1px solid rgba(127, 166, 212, .5)
}

.gl-build,
.steps5 {
    border: 1px solid var(--line);
    background: var(--paper-2)
}

.gl-build {
    color: var(--ink-2)
}

.steps5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-radius: 4px
}

.st {
    padding: 26px 20px;
    border-right: 1px solid var(--line)
}

.st:last-child {
    border-right: none
}

.st.sel {
    color: var(--d-text);
    border-right-color: var(--d-line)
}

.sn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    font-weight: 800;
    font-size: .8rem;
    background: var(--paper-3);
    color: var(--navy-900);
    border: 1px solid var(--line);
    margin-bottom: 14px
}

.advl,
.assure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.pn,
.st h3 {
    margin-bottom: 6px
}

.st.sel .sn {
    background: var(--brass);
    color: var(--navy-950)
}

.pn {
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brick)
}

.lbl,
.mbadge {
    letter-spacing: .14em;
    font-weight: 800;
    text-transform: uppercase
}

.method-note,
.st p {
    color: var(--ink-2)
}

.st h3 {
    font-size: 1.05rem
}

.acard h3,
.advl h3 {
    letter-spacing: 0;
    margin-bottom: 8px;
    font-weight: 700;
    font-family: 'League Spartan', sans-serif
}

.st p {
    font-size: .84rem
}

.method-note {
    margin-top: 20px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 18px 22px;
    font-size: .92rem
}

.method-note b {
    color: var(--navy-900)
}

.assure-grid {
    gap: 22px
}

.acard {
    background: rgba(242, 245, 249, .04);
    border: 1px solid rgba(127, 166, 212, .3);
    border-radius: 4px;
    padding: 28px;
    transition: border-color .25s var(--eo)
}

.acard:hover,
.chip:hover {
    border-color: var(--brass)
}

.acard h3 {
    font-size: 1.05rem;
    color: var(--paper)
}

.acard p {
    color: rgba(242, 245, 249, .78);
    font-size: .95rem
}

.advl p {
    color: var(--ink-2);
    font-size: .95rem
}

.vs {
    font-family: 'Playfair Display', serif;
    font-size: .85rem;
    color: rgba(180, 47, 42, .6);
    margin-top: 10px
}

.milestone {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--green-pale);
    border: 1px solid #cbddcb;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.mbadge {
    font-size: .64rem;
    background: var(--green);
    color: #f2f7f0;
    padding: 6px 12px;
    border-radius: 2px;
    flex-shrink: 0
}

.milestone p {
    font-size: .94rem;
    color: var(--ink);
    flex: 1;
    min-width: 240px
}

.metrics {
    border-top: 1px solid var(--line)
}

.scenario h3 {
    font-size: 1.32rem;
    margin-bottom: 10px
}

.pedigree li:first-child {
    border-top: none
}

.disclaimer {
    font-family: 'Playfair Display', serif;
}

.chips,
.mc-panel {
    margin: 0 auto;
    display: flex
}

.chips-sub {
    font-family: 'Playfair Display', serif;
    font-size: .95rem;
    color: var(--ink-2);
    margin: -32px auto 28px;
    max-width: 60ch
}
.final h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    max-width: 26ch;
    margin: 0 auto 16px
}

@media(max-width:1080px) {
    .steps5 {
        grid-template-columns: repeat(2, 1fr)
    }

    .st {
        border-bottom: 1px solid var(--line)
    }

    .st.sel {
        border-bottom-color: var(--d-line)
    }
}

@media(max-width:920px) {

    .hero-side,
    .lrow:nth-child(2n) {
        padding-left: 0
    }

    .advl,
    .assure-grid,
    .hero-grid,
    .ledger,
    .modes,
    .mods,
    .proofgrid,
    .qa,
    .steps5 {
        grid-template-columns: 1fr
    }

    .st {
        border-right: none
    }
}

.statband {
    background: var(--blue);
    border-top-color: var(--blue);
    border-bottom-color: var(--blue)
}

.sb-big {
    color: #fff
}

.sb-cap {
    color: #eaf1f8
}

.sb-src {
    color: rgba(234, 241, 248, .78)
}