.crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 12px var(--fm);
    color: var(--stone);
}

.crumb a {
    color: var(--stone);
    text-decoration: none;
}

.crumb a:hover {
    color: var(--teal);
}

.crumb .sep {
    color: var(--stone-light);
}

.crumb .cur {
    color: var(--ink);
}

.dhero {
    padding: 116px 0 40px;
    background: radial-gradient(760px 320px at 12% -14%, rgba(23, 176, 163, .09), transparent 70%), #fff;
}

.dhero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 44px;
    align-items: center;
    margin-top: 20px;
}

.dcat {
    display: inline-block;
    font: 500 10px var(--fm);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-deep);
    background: var(--teal-frost);
    border: 1px solid var(--teal-mist);
    padding: 8px 12px;
    border-radius: 999px;
}

.dhero h1 {
    font-family: var(--fd);
    font-weight: 600;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 16px 0 0;
}

.dperson {
    margin-top: 16px;
    font-size: 15px;
    color: var(--stone);
}

.dperson b {
    color: var(--ink);
    font-weight: 600;
}

.dhero-lead {
    font-size: 17px;
    color: var(--charcoal);
    margin-top: 16px;
    max-width: 520px;
    line-height: 1.6;
}

.dhero-media {
    position: relative;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--teal-frost), #fff 72%);
    border: 1px solid var(--teal-mist);
    min-height: 328px;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: var(--sh);
}

.dm-mono {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 150px;
    color: rgba(15, 118, 110, .14);
    letter-spacing: .02em;
}

.dm-cat {
    position: absolute;
    top: 16px;
    left: 16px;
    font: 500 10px var(--fm);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal-deep);
    background: #fff;
    border: 1px solid var(--teal-mist);
    padding: 4px 8px;
    border-radius: 8px;
}

.dm-ph {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font: 500 9px var(--fm);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone-light);
}

.dbadge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: var(--sh);
}

.dbadge b {
    display: block;
    font-family: var(--fs);
    font-weight: 600;
    font-size: 26px;
    color: var(--coral-k);
    line-height: 1;
}

.dbadge span {
    font: 500 10px var(--fm);
    color: var(--stone);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dbadge--green b {
    color: var(--green);
}

.dbadge--teal b {
    color: var(--teal);
}

.dstats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.dstat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    box-shadow: var(--sh-sm);
}

.dstat b {
    display: block;
    font-family: var(--fs);
    font-weight: 600;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
}

.dstat.money b {
    color: var(--green);
}

.dstat.time b {
    color: var(--teal);
}

.dstat.fast b {
    color: var(--coral-k);
}

.dstat.sm b {
    font-size: 20px;
    padding-top: 8px;
}

.dstat em {
    font-style: normal;
    font-size: 15px;
    color: var(--stone);
}

.dstat span {
    display: block;
    font-size: 13px;
    color: var(--stone);
    margin-top: 8px;
}

.dstory {
    max-width: 760px;
    margin-top: 24px;
}

.dstory p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--charcoal);
    margin-top: 16px;
}

.dstory p:first-child {
    margin-top: 0;
}

.dpull {
    font-family: var(--fd);
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 29px);
    line-height: 1.22;
    color: var(--teal-deep);
    border-left: 3px solid var(--teal-light);
    padding-left: 24px;
    margin: 32px 0;
}

.dtl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
}

.dtl-item {
    position: relative;
    padding: 0 16px;
}

.dtl-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(var(--teal-mist), var(--teal-mist)) center / 100% 2px no-repeat;
}

.dtl-item:first-child::before {
    left: 50%;
}

.dtl-item:last-child::before {
    right: 50%;
}

.dtl-dot {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--teal);
    margin: 0 auto 16px;
    z-index: 1;
}

.dtl-item.hl .dtl-dot {
    border-color: var(--coral);
    background: var(--coral);
}

.dtl-item.end .dtl-dot {
    border-color: var(--green);
    background: var(--green);
}

.dtl-k {
    font: 500 10px var(--fm);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal);
    text-align: center;
    display: block;
}

.dtl-t {
    font-family: var(--fs);
    font-weight: 500;
    font-size: 19px;
    color: var(--ink);
    text-align: center;
    margin-top: 8px;
}

.dtl-d {
    font-size: 13.5px;
    color: var(--stone);
    text-align: center;
    margin-top: 8px;
}

.dcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--sh);
    margin-top: 44px;
}

.dcard-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.dcard-h h3 {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 20px;
    color: var(--ink);
}

.illus {
    font: 500 9.5px var(--fm);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #B8791C;
    background: rgba(232, 168, 60, .12);
    border: 1px solid rgba(232, 168, 60, .34);
    padding: 4px 8px;
    border-radius: 7px;
    white-space: nowrap;
}

.chart-note {
    font-size: 12px;
    color: var(--stone-light);
    margin-top: 16px;
    line-height: 1.5;
}

.growth {
    width: 100%;
    height: auto;
    display: block;
}

.gline {
    fill: none;
    stroke: var(--teal);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: gdraw 1.9s var(--ease) forwards .25s;
}

@keyframes gdraw {
    to {
        stroke-dashoffset: 0;
    }
}

.gmk {
    font: 500 11px var(--fm);
    fill: var(--charcoal);
}

.gmk.end {
    fill: var(--green);
    font-weight: 700;
}

.gax {
    font: 500 9.5px var(--fm);
    fill: var(--stone-light);
    letter-spacing: .06em;
}

.dtime {
    display: grid;
    grid-template-columns: 208px 1fr;
    gap: 36px;
    align-items: center;
}

.section__header--center + .dtime {
    margin-top: 20px;
}

.dtime-title {
    font-family: var(--fd);
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--ink);
    letter-spacing: -.01em;
    margin-top: 16px;
}

.dtime p {
    font-size: 16px;
    color: var(--charcoal);
    margin-top: 12px;
    line-height: 1.65;
    max-width: 460px;
}

.donut {
    width: 200px;
    height: 200px;
}

.donut .track {
    fill: none;
    stroke: var(--teal-frost);
    stroke-width: 24;
}

.donut .arc {
    fill: none;
    stroke: var(--teal);
    stroke-width: 24;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    animation: dfill 1.1s var(--ease) forwards .35s;
}

@keyframes dfill {
    to {
        stroke-dashoffset: 0;
    }
}

.donut .cn {
    font-family: var(--fs);
    font-weight: 600;
    fill: var(--teal-deep);
}

.donut .cs {
    font: 500 12px var(--fm);
    fill: var(--stone);
}

.tablet {
    width: 196px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.simple-checks {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.simple-checks li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
    color: var(--charcoal);
    line-height: 1.5;
}

.simple-checks li svg {
    flex: none;
    margin-top: 4px;
    color: var(--teal);
}

.dba {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 24px;
}

.dba-col {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 28px;
    box-shadow: var(--sh-sm);
}

.dba-col.after {
    background: var(--teal-frost);
    border-color: var(--teal-mist);
}

.dba-k {
    font: 500 10px var(--fm);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stone-light);
    margin-bottom: 16px;
}

.dba-col.after .dba-k {
    color: var(--teal-deep);
}

.dba-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dba-col li {
    display: flex;
    gap: 8px;
    font-size: 15px;
    color: var(--charcoal);
    align-items: flex-start;
    line-height: 1.45;
}

.dba-col li svg {
    flex: none;
    margin-top: 4px;
    color: var(--teal);
}

.dba-arw {
    align-self: center;
    color: var(--stone-light);
    font-family: var(--fm);
    font-size: 22px;
}

.dmore {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.dmore a {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    box-shadow: var(--sh-sm);
    transition: box-shadow .2s, border-color .2s;
}

.dmore a:hover {
    box-shadow: var(--sh);
    border-color: var(--line-2);
}

.dmore .k {
    font: 500 10px var(--fm);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal);
}

.dmore h4 {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    margin: 8px 0 0;
    line-height: 1.18;
}

.dmore .r {
    font: 500 13px var(--fm);
    color: var(--green);
    margin-top: 8px;
}

.dmore .r.go {
    color: var(--teal);
}

@media (max-width: 900px) {
    .dhero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .dstats {
        grid-template-columns: 1fr 1fr;
    }

    .dtime {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 20px;
    }

    .dtime p {
        text-align: center;
    }

    .dba {
        grid-template-columns: 1fr;
    }

    .dba-arw {
        transform: rotate(90deg);
    }

    .dmore {
        grid-template-columns: 1fr;
    }

    .dtl {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .dtl-item::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gline {
        stroke-dashoffset: 0;
    }

    .donut .arc {
        stroke-dashoffset: 0 !important;
    }
}