.nav-cta,
.nav-links a {
    font-size: 1rem;
    text-decoration: none
}

.shead.ctr,
.shead.ctr .sub {
    margin-left: auto;
    margin-right: auto
}

.btn,
.wm i,
body {
    font-family: 'League Spartan', sans-serif
}

.nav-cta,
.wm i {
    font-weight: 600
}

.hs-tag,
.kicker,
.wm i {
    text-transform: uppercase
}

.hero-side ul,
.pedigree ul,
.rung ul {
    list-style: none
}

.dk,
.particles,
.pedigree,
.qa,
.qa-body-inner {
    overflow: hidden
}

.bigno,
.chips-sub,
.disclaimer,
.foot-tag,
.lix,
.ph-num,
.tagline,
.vs,
h1 em,
h2 em {
    font-style: italic
}

:root {
    --navy-950: #144579;
    --navy-900: #144579;
    --navy-800: #144579;
    --paper: #FFFFFF;
    --paper-2: #FFFFFF;
    --paper-3: #E9EEF4;
    --line: #D8DFE7;
    --line-soft: #E4E9EF;
    --ink: #202733;
    --ink-2: #59606E;
    --blue: #1B4F87;
    --brick: #B42F2A;
    --brick-deep: #97231F;
    --red: #AC2929;
    --brass: #7FA6D4;
    --brass-deep: #5E89BC;
    --ox: #7C2A22;
    --ox-pale: #F3E2DC;
    --ox-line: #E2C8BE;
    --green: #2E5E41;
    --green-pale: #E7EFE7;
    --d-text: #F2F5F9;
    --d-mut: #A7B2C4;
    --d-line: rgba(242, 245, 249, .14);
    --eo: cubic-bezier(.16, 1, .3, 1);
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E")
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'League Spartan', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased
}

h1,
h2,
h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.014em
}

h1 em,
h2 em {
    font-style: italic
}

.dk .kicker,
.dk h1 em,
.dk h2 em,
.feat .dur,
.feat .ph-num {
    color: var(--brass)
}

header.nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 60;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(12px);
    transition: box-shadow .3s, height .3s;
    justify-content: space-between;
    align-items: center
}

.dk,
.nav-links a,
.z,
section {
    position: relative
}

.nav img,
.nav-inner {
    transition: height .3s
}

.nav-inner,
.nav-links {
    align-items: center;
    display: flex
}

.nav-inner {
    justify-content: space-between;
    height: 76px
}

header.nav.scrolled .nav-inner {
    height: 64px
}

.nav img {
    width: auto;
    height: 40px;
    margin-left: -80px;
    margin-top: 10px
}

.nav-links {
    gap: 30px
}

.btn,
.kicker {
    align-items: center
}

.nav-links a {
    color: #000
}

.nav-links a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    transition: width .3s var(--ease-out-expo)
}

.nav-links a.active::after,
.nav-links a:not(.nav-cta):hover::after {
    width: 100%
}

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

.nav-links a.active {
    color: var(--red);
    border: none
}

.nav-cta {
    background: var(--red);
    color: #fff !important;
    padding: 5px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    margin-right: -80px;
    text-decoration: none;
    transition: background .25s, transform .25s var(--ease-out-expo)
}

.nav-cta:hover {
    background: var(--red-deep);
    transform: translateY(-2px)
}

@media(max-width:880px) {
    .nav-links a:not(.nav-cta) {
        display: none
    }
}

.wrap {
    max-width: 1140px;
    margin: 0 auto
}

.sec {
    padding: clamp(64px, 9vw, 110px) clamp(20px, 5vw, 48px)
}

.alt {
    background: #f3f5f8;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft)
}

.z {
    z-index: 1
}

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

.dk::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    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: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    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
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(127, 166, 212, .22);
    pointer-events: none;
    z-index: 0
}

.kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brick)
}

.btn,
.link-ghost {
    display: inline-flex;
    gap: 10px;
    font-weight: 700;
    padding: 15px 25px;
    line-height: 1;
    text-decoration: none
}

.kicker::before,
.shead.ctr .kicker::after {
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .65;
    flex-shrink: 0
}

.foot-bottom,
.shead.ctr .kicker {
    justify-content: center
}

.shead {
    max-width: 780px;
    margin-bottom: clamp(36px, 5vw, 58px)
}

.shead h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.55rem);
    margin-top: 18px
}

.shead .sub {
    margin-top: 14px;
    color: var(--ink-2);
    font-size: 1.03rem;
    max-width: 62ch
}

.dk .shead .sub {
    color: var(--d-mut)
}

.btn {
    font-size: .95rem;
    letter-spacing: .01em;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: background-color .22s var(--eo), color .22s var(--eo), transform .18s var(--eo), border-color .22s var(--eo)
}

.link-ghost,
.top {
    align-items: center
}

.bigno,
.chips-sub,
.disclaimer,
.foot-tag,
.lix,
.ph-num,
.sb-big,
.sb-cap,
.tagline,
.vs,
.wm {
    font-family: 'Playfair Display', serif
}

.btn-primary {
    background: var(--red);
    color: #fbf7ee
}

.btn-primary:hover {
    background: var(--brick-deep);
    color: #fff;
    transform: translateY(-1px)
}

.btn-primary:active {
    transform: translateY(0) scale(.98)
}

.btn-lg {
    padding: 15px 25px;
    font-size: 1rem
}

.link-ghost {
    font-size: .95rem;
    color: var(--d-text);
    border: 1px solid rgba(242, 245, 249, .32);
    border-radius: 8px;
    transition: border-color .22s var(--eo), color .22s var(--eo)
}

.link-ghost:hover {
    border-color: var(--brass);
    color: var(--brass)
}

.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px clamp(20px, 5vw, 48px);
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft)
}

.arrow,
.dropdown {
    display: inline-block
}

.wm {
    font-weight: 800;
    font-size: 1.06rem;
    color: var(--brick);
    text-decoration: none;
    letter-spacing: .005em
}

.wm i {
    font-style: normal;
    color: var(--blue);
    font-size: .6em;
    letter-spacing: .34em;
    margin-left: 6px
}

.crumb b,
.hs-tag,
.top-cta {
    font-weight: 700
}

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

.crumb a {
    font-size: 1rem;
    color: var(--ink-2)
}

.crumb b {
    color: var(--ink)
}

.top-cta {
    font-size: .85rem;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color .2s
}

.top-cta:hover {
    border-color: var(--brick)
}


.particles {
    inset: 0;
    z-index: 0
}

.particles i {
    
    position: absolute;
    bottom: -12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    z-index: 2;
    background: rgba(255, 255, 255, .55);
    animation: linear infinite particleRise
}

@keyframes particleRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0
    }

    10% {
        opacity: .7
    }

    100% {
        transform: translateY(-92vh) scale(.4);
        opacity: 0
    }
}

.dropdown {
    position: relative;
    display: inline-block;
    height: 100%
}

.arrow {
    width: 1rem;
    height: 1rem;
    vertical-align: top;
    margin-left: 4px;
    display: inline-block;
    transform-origin: center;
    transition: transform .2s
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 260px;
    width: 16rem;
    padding: 8px 0 12px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
    z-index: 50
}

.dropdown-menu a {
    color: #374151;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-size: .875rem;
    text-align: left;
    font-weight: 400;
    transition: background-color .2s, color .2s
}

.dropdown-menu a.active {
    color: var(--red);
    font-weight: 500;
    background-color: #f9fafb
}

.dropdown-menu a:hover {
    background-color: #f9fafb;
    color: var(--blue)
}

.dropdown:hover .dropdown-menu {
    display: block
}

.dropdown:hover .arrow {
    transform: rotate(180deg)
}

.hero {
    padding: clamp(76px, 10vw, 128px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 100px)
}

.hero .r1 {
    width: 460px;
    height: 460px;
    right: -140px;
    top: -160px
}

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

.hero-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
    gap: clamp(40px, 6vw, 88px);
    position: relative;
    z-index: 3;
    align-items: center
}

.hero h1 {
    font-size: clamp(2.3rem, 4.7vw, 3.8rem);
    margin: 22px 0 20px;
    max-width: 19ch
}

.lead {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    color: #bcc7d6;
    max-width: 54ch
}

.hero-cta {
    margin-top: 36px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center
}

.advl,
.ledger,
.lrow,
.phases,
.rungs {
    display: grid
}

.hero-side {
    border-left: 1px solid var(--d-line);
    padding-left: clamp(24px, 3vw, 40px)
}

.hs-tag {
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .22em;
    color: var(--brass);
    margin-bottom: 4px
}

.lix,
.rung .num {
    color: var(--brick)
}

.hero-side li {
    padding: 15px 0;
    border-bottom: 1px solid var(--d-line);
    font-weight: 600;
    font-size: .95rem;
    color: #d5dce7;
    display: flex;
    gap: 12px;
    align-items: baseline
}

.advl h3,
.lix,
.lrow h3,
.rung .num {
    font-weight: 700
}

.hero-side li::before {
    content: '\2713';
    color: var(--brass);
    font-size: .85rem
}

.hero-side li:last-child {
    border-bottom: none
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(22px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.rise {
    opacity: 0;
    animation: rise .9s var(--eo) both
}

.d1 {
    animation-delay: .05s
}

.d2 {
    animation-delay: .14s
}

.d3 {
    animation-delay: .23s
}

.d4 {
    animation-delay: .32s
}

.d5 {
    animation-delay: .46s
}

[data-rv] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--eo), transform .7s var(--eo);
    transition-delay: var(--d, 0s)
}

[data-rv].in {
    opacity: 1;
    transform: none
}

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

    .btn,
    .chip,
    .phase,
    .mod,
    .st,
    .rung,
    [data-rv] {
        transition: none
    }

    .rise {
        animation: none;
        opacity: 1
    }

    [data-rv] {
        opacity: 1;
        transform: none
    }

    html {
        scroll-behavior: auto
    }
}

.phase,
.rung {
    background: var(--paper-2);
    transition: border-color .25s var(--eo), transform .25s var(--eo), box-shadow .25s var(--eo)
}

.ledger {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line)
}

.lrow {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 4px;
    padding: 30px 8px 28px 0;
    border-bottom: 1px solid var(--line)
}

.lrow:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-right: 44px
}

.lrow:nth-child(2n) {
    padding-left: 44px
}

.lix {
    grid-row: 1/3;
    font-size: 1.5rem;
    line-height: 1;
    padding-top: 3px
}

.lrow h3 {
    grid-column: 2;
    font-size: 1.05rem;
    line-height: 1.35
}

.lrow p {
    grid-column: 2;
    color: var(--ink-2);
    font-size: .95rem;
    margin-top: 6px
}

.sp-arrow {
    color: var(--brass);
    font-weight: 400;
    padding: 0 .12em
}

.bigno,
.feat-tag,
.ph-num {
    font-weight: 800
}

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

.rung {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 30px 28px 26px
}

.phase:hover,
.rung:hover {
    border-color: var(--brass);
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -28px rgba(10, 28, 51, .4)
}

.rung:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    width: 11px;
    height: 11px;
    border-top: 1px solid var(--brass);
    border-right: 1px solid var(--brass);
    transform: translateY(-50%) rotate(45deg)
}

.bigno {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 3.4rem;
    line-height: 1;
    color: rgba(180, 47, 42, .09);
    pointer-events: none
}

.pedigree li,
.pedigree ul,
.phase,
.rung li {
    position: relative
}

.rung .num {
    font-size: .72rem;
    letter-spacing: .18em
}

.rung h3 {
    font-size: 1.35rem;
    margin: 10px 0 4px;
    max-width: 14ch
}

.tagline {
    font-size: .93rem;
    color: var(--ink-2);
    margin-bottom: 14px
}

.rung li {
    font-size: .92rem;
    padding: 9px 0 9px 20px;
    border-top: 1px solid var(--line-soft)
}

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

.rung li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 16px;
    width: 5px;
    height: 5px;
    background: var(--brass);
    transform: rotate(45deg)
}

.advl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 72px
}

.advl .item {
    border-top: 1px solid var(--d-line);
    padding: 28px 0 26px
}

.advl h3 {
    font-size: 1.02rem;
    color: var(--paper);
    margin-bottom: 8px
}

.pedigree h3,
.phase h3,
.scenario h3 {
    margin-bottom: 10px
}

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

.vs {
    font-size: .85rem;
    color: rgba(127, 166, 212, .72);
    margin-top: 10px
}

.phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch
}

.phase {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 32px 28px
}

.phase.feat {
    background: var(--navy-900);
    border-color: rgba(127, 166, 212, .55);
    color: var(--d-text);
    box-shadow: 0 34px 64px -30px rgba(10, 28, 51, .55)
}

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

.feat-tag {
    position: absolute;
    top: -13px;
    left: 26px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    background: var(--brick);
    color: #fff;
    padding: 6px 12px;
    border-radius: 2px
}

.dur,
.lbl {
    letter-spacing: .14em;
    text-transform: uppercase
}

.dur,
.ph-num {
    color: var(--brick)
}

.ph-num {
    font-size: 2rem;
    line-height: 1
}

.dur,
.pedigree h3,
.phase-link {
    font-weight: 700
}

.dur {
    font-size: .72rem;
    margin: 12px 0 6px
}

.phase h3 {
    font-size: 1.25rem
}

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

.feat p {
    color: #c3ccda
}

.phase-link {
    display: inline-block;
    margin-top: 18px;
    font-weight: 700;
    font-size: .88rem;
    color: var(--brass);
    text-decoration: none;
    border-bottom: 1px solid rgba(127, 166, 212, .45);
    padding-bottom: 2px;
    transition: color .2s, border-color .2s
}

.lbl,
.m-big {
    font-weight: 800
}

.phase-link:hover {
    color: var(--d-text);
    border-color: var(--d-text)
}

.midcta {
    padding: 0 clamp(20px, 5vw, 48px) clamp(64px, 9vw, 110px)
}

.mc-panel {
    max-width: 1140px;
    margin: 0 auto;
    border-radius: 4px;
    padding: clamp(40px, 6vw, 60px) clamp(28px, 5vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap
}

.chip,
.scenario {
    border: 1px solid var(--line)
}

.mc-panel h2 {
    font-size: clamp(1.45rem, 2.6vw, 1.95rem);
    max-width: 24ch
}

.mc-panel .r1 {
    width: 300px;
    height: 300px;
    left: -110px;
    top: -140px
}

.proofgrid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 24px;
    align-items: stretch
}

.scenario {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 32px
}

.lbl {
    display: inline-block;
    font-size: .66rem;
    color: var(--green);
    background: var(--green-pale);
    border: 1px solid #cbddcb;
    padding: 5px 10px;
    border-radius: 2px;
    margin-bottom: 18px
}

.chips,
.metrics,
.qa-icon,
.qa-trigger {
    display: flex
}

.scenario h3 {
    font-size: 1.32rem
}

.scenario>p {
    color: var(--ink-2);
    font-size: .96rem
}

.metrics {
    display: flex;
    gap: 36px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: 20px;
    flex-wrap: wrap
}

.m-big {
    font-weight: 800;
    font-size: 1.55rem;
    color: var(--blue);
    font-feature-settings: 'tnum'
}

.chip,
.m-lab {
    font-weight: 600
}

.disclaimer,
.m-lab {
    color: var(--ink-2)
}

.m-lab {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 2px
}

.pedigree {
    border-radius: 4px;
    padding: 32px;
    overflow: hidden;
}

.pedigree h3 {
    font-family: 'League Spartan', sans-serif;
    font-size: .74rem;
    letter-spacing: .2em;
    color: var(--brass)
}

.pedigree ul {
    z-index: 1
}

.pedigree li {
    font-size: .92rem;
    color: #c3ccda;
    padding: 11px 0 11px 26px;
    border-top: 1px solid var(--d-line)
}

.pedigree li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--brass)
}

.disclaimer {
    font-size: .82rem;
    margin-top: 24px
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 860px;
    margin: 0 auto
}

.chip {
    font-size: .85rem;
    color: var(--navy-900);
    background: var(--paper-2);
    border-radius: 2px;
    padding: 11px 20px;
    transition: border-color .2s var(--eo), background-color .2s var(--eo)
}

.chip.hot {
    border-color: var(--brass);
    background: #e7eff8
}

.faq,
.qa.open {
    background: var(--card)
}

.stack-note {
    font-size: .85rem;
    color: var(--ink-2);
    margin-top: 22px
}

.chips-sub {
    font-size: .95rem;
    margin: -32px auto 28px;
    max-width: 60ch
}

.faq {
    background: var(--card);
    border-top: 1px solid var(--line)
}

.faq h2 {
    font-size: clamp(24px, 3.2vw, 32px);
    margin-bottom: 30px
}

.qa {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--bg);
    transition: border-color .25s, box-shadow .25s
}

.qa.open {
    border-color: var(--navy);
    box-shadow: 0 6px 20px rgba(26, 58, 107, .09);
    background: var(--card);
}

.qa-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 26px;
    cursor: pointer;
    gap: 16px;
    user-select: none;
    transition: background .2s
}

.qa-trigger:hover {
    background: rgba(26, 58, 107, .03)
}

.qa-trigger h4 {
    font-size: 15px;
    color: var(--ink);
    flex: 1
}

.qa-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--navy-faint);
    border: 1px solid rgba(26, 58, 107, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--navy);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: background .25s, color .25s, transform .35s var(--ease-out-expo)
}

.qa.open .qa-icon {
    background: var(--navy-800);
    color: #fff;
    transform: rotate(45deg)
}

.qa-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s var(--ease-out-expo)
}

.qa.open .qa-body {
    grid-template-rows: 1fr
}

.qa-body-inner {
    overflow: hidden;
}

.qa-body-inner p {
    font-size: 14px;
    color: var(--ink-2);
    padding: 0 26px 22px
}

.final {
    text-align: center
}

.final .r1 {
    width: 420px;
    height: 420px;
    left: -160px;
    top: -180px
}

.final .r2 {
    width: 280px;
    height: 280px;
    right: -100px;
    bottom: -120px;
    border-color: rgba(127, 166, 212, .13)
}

.final h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    max-width: 24ch;
    margin: 0 auto 16px
}

.final p {
    color: var(--d-mut);
    max-width: 54ch;
    margin: 0 auto 34px;
    font-size: 1.02rem
}

.sticky-cta {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 60;
    display: none;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    box-shadow: 0 18px 38px -16px rgba(10, 28, 51, .5);
    transition: opacity .35s var(--eo), transform .35s var(--eo)
}

@media(min-width:960px) {
    .sticky-cta {
        display: inline-flex
    }
}

body.show-sticky .sticky-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

@media(max-width:920px) {

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

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

    .hero-side {
        border-left: none;
        border-top: 1px solid var(--d-line);
        padding-top: 20px
    }

    .crumb,
    .rung:not(:last-child)::after {
        display: none
    }

    .lrow:nth-child(odd) {
        border-right: none;
        padding-right: 8px
    }

    .qa {
        gap: 8px
    }
}

.chip,
.gl-build,
.method-note,
.mod,
.mode.a,
.phase,
.rung,
.scenario,
.steps5 {
    background-color: #fff
}

.chip.hot {
    background-color: #e7eff8
}

.mc-panel.dk,
.mode.dk,
.phase.feat,
.st.sel {
    background-color: var(--blue)
}

.pedigree.dk {
    background-color: var(--navy-900)
}

.feat .dur,
.feat .ph-num,
.mode.dk .tg,
.st.sel .pn {
    color: #cfe0f2
}

.st.sel .sn {
    background: #fff;
    color: var(--blue);
    border: none
}

footer {
    background: #0a2238;
    color: #9fb2cc;
    padding: 56px 0 30px
}

.foot-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 34px;
    align-items: flex-start;
    padding-bottom: 20px
}

footer img {
    height: 60px;
    margin-top: 50px
}

.foot-tag {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-size: 1.2rem
}

.foot-bottom,
.foot-values {
    color: #6b80a0;
    display: flex;
    font-size: .82rem
}

.foot-col h4 {
    color: #fff;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-family: 'League Spartan', sans-serif
}

.foot-col a {
    display: block;
    color: #9fb2cc;
    font-size: .95rem;
    text-decoration: none;
    margin-bottom: 11px;
    transition: color .2s, padding-left .2s
}

.foot-col a:hover {
    color: #fff;
    padding-left: 4px
}

.foot-bottom {
    padding-top: 22px;
    flex-wrap: wrap;
    gap: 10px
}

.foot-values {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: 20px;
    gap: 100px;
    justify-content: center;
    flex-wrap: wrap
}

@media (max-width:768px) {
    footer {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 30px;
        padding: 40px 20px;
        height: auto
    }

    .footer-logo img {
        margin: 0 auto
    }

    .footer-links ul {
        flex-direction: row;
        gap: 15px
    }

    .footer-links li {
        margin: 0
    }

    .footer .social-links {
        justify-content: center
    }

    .footer .social-links img {
        margin: 0 10px
    }
}