.intro { margin-top: var(--len-48); max-width: var(--len-840); text-align: center; }

.heading {
    font-family: var(--font-display); font-size: var(--fs-48);
    font-weight: var(--weight-bold); line-height: var(--lh-12); color: var(--charcoal);
}

.strike {
    position: relative; display: inline-block; isolation: isolate;
    line-height: var(--lh-104); white-space: nowrap; vertical-align: baseline;
    color: inherit; animation: strike-text-in var(--t-480) var(--e-emphasis) var(--t-500) both;
}

.strike::before {
    content: ""; position: absolute; z-index: -1;
    inset: var(--strike-y) var(--strike-x); background-color: var(--hl);
    transform: scaleX(0); transform-origin: left center;
    animation: strike-in var(--t-480) var(--e-emphasis) var(--t-500) both;
}

.details {
    margin: var(--len-16) auto 0; max-width: var(--len-680); font-size: var(--fs-14);
    line-height: var(--lh-15); color: var(--charcoal-m);
}

.details-strong { font-weight: var(--weight-semibold); color: var(--charcoal); }
.stepnav-wrap { display: flex; width: var(--fill); justify-content: center; margin-top: var(--len-48); }

.stepnav {
    display: flex; width: var(--fill); max-width: var(--len-480); align-items: center;
    gap: var(--len-8);
}

.stepnav-item { display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--len-8); }

.stepnav-control {
    display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--len-8);
    border-radius: var(--len-12); border: 1px solid var(--line);
    background-color: var(--white); padding: var(--len-8) var(--len-12); text-align: left;
    cursor: default;
}

.is-active.stepnav-control { border-color: var(--ogblue); background-color: var(--ds-blue-lightest); }
.is-complete.stepnav-control { border-color: var(--good); background-color: var(--good-bg); }

.is-back { cursor: pointer; transition: border-color var(--t-150); }
.is-back:hover { border-color: var(--ogblue); }

.stepnav-icon {
    position: relative; display: none; width: var(--len-20); height: var(--len-20);
    flex-shrink: 0; place-items: center; border-radius: var(--len-6);
    background-color: var(--ds-neutral-100); color: var(--ds-tertiary);
}

.is-active .stepnav-icon { background-color: var(--ogblue-10); color: var(--ogblue-m); }
.is-complete .stepnav-icon { background-color: var(--good); color: var(--white); }

.stepnav-glyph { width: var(--len-14); height: var(--len-14); transition: opacity var(--t-150); }
.is-complete .stepnav-glyph { opacity: 0; }

.stepnav-check {
    position: absolute; width: var(--len-14); height: var(--len-14); pointer-events: none;
    opacity: 0; transition: opacity var(--t-150);
}

.is-complete .stepnav-check { opacity: 1; }

.stepnav-check path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--t-200) var(--e-out);
}

.is-complete .stepnav-check path { stroke-dashoffset: 0; }

.stepnav-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-display); font-size: var(--fs-12);
    font-weight: var(--weight-semibold); color: var(--ds-tertiary);
}

.is-active .stepnav-label { color: var(--charcoal); }
.is-complete .stepnav-label { color: var(--charcoal); }

.stepnav-arrow { display: none; width: var(--len-16); height: var(--len-16); flex-shrink: 0; color: var(--charcoal-m); }
.help { margin-top: var(--len-32); }

.refusal { text-align: left; width: var(--fill); }
.refusal-eyebrow { font-size: var(--fs-12); line-height: var(--lh-14); color: var(--charcoal-m); }

.refusal-head {
    margin-top: var(--len-8); font-family: var(--font-display); font-size: var(--fs-24);
    font-weight: var(--weight-bold); line-height: var(--lh-115); color: var(--charcoal);
}

.refusal-line { margin-top: var(--len-12); font-size: var(--fs-14); line-height: var(--lh-15); color: var(--charcoal-m); }
.refusal-act { margin-top: var(--len-20); }

@media (max-width: 39.9375rem) {
    .stepnav { max-width: var(--len-340); }
}

@media (min-width: 40rem) {
    .stepnav-control { gap: var(--len-12); padding: var(--len-12) var(--len-16); }

    .stepnav-icon { display: grid; width: var(--len-24); height: var(--len-24); border-radius: var(--len-8); }
    .stepnav-glyph { width: var(--len-16); height: var(--len-16); }

    .stepnav-check { width: var(--len-16); height: var(--len-16); }
    .stepnav-label { font-size: var(--fs-14); }

    .stepnav-arrow { display: block; }
}
