.dot-section {
    position: relative;
    background: #090a0c;
    isolation: isolate;
    overflow: clip;
}

.dot-section > canvas[data-dotfield] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.welcome-chapter.dot-section > :not(canvas) {
    z-index: 1;
}

.volume-section {
    min-height: min(820px, calc(100svh - 88px));
    text-align: center;
    border-top: 1px solid #ffffff12;
}

.volume-eyebrow {
    position: absolute;
    inset: 20px 20px auto;
    margin: 0;
    color: #a4b5c5;
    font-size: .6875rem;
}

.volume-inner {
    position: relative;
    padding-block: 112px 96px;
}

.volume-section h2 {
    margin: 0;
    font-weight: 500;
}

.volume-section .rolling-counter {
    color: #eefafa;
    font-size: 9rem;
    font-weight: 550;
    margin-bottom: 24px;
}

.volume-label {
    display: block;
    font-size: 1.625rem;
    color: #c1cbd0;
    line-height: 1.3;
}

.volume-message {
    margin: 42px auto 18px;
    font-size: 1.125rem;
    line-height: 1.65;
    color: #a4b5c5;
}

.volume-message strong {
    color: #b6f1f4;
    font-weight: 500;
}

.volume-note {
    color: #858e98;
    font-size: .625rem;
    margin: 36px 0 0;
}

.story-kicker {
    color: #a4b5c5;
    font-size: .75rem;
    margin: 0 0 20px;
}

.welcome #analyser .platform-stats {
    background: #0d141bd9;
    border-color: #35424b;
}

@media (min-width: 1600px) {
    .volume-section .rolling-counter { font-size: 10.5rem; }
}

@media (max-width: 700px) {
    .volume-section { min-height: calc(100svh - 76px); }
    .volume-inner { padding-block: 94px 72px; }
    .volume-section .rolling-counter { font-size: 4.75rem; margin-bottom: 20px; }
    .volume-label { font-size: 1.1875rem; }
    .volume-message { font-size: 1rem; margin-top: 32px; }
    .volume-note { margin-top: 28px; }
    .story-kicker { font-size: .6875rem; }
}

@media (max-width: 380px) {
    .volume-section .rolling-counter { font-size: 4rem; }
    .volume-label { font-size: 1.0625rem; }
}

@media (max-height: 520px) and (min-width: 600px) {
    .volume-inner { padding-block: 72px 44px; }
    .volume-section .rolling-counter { font-size: 5rem; margin-bottom: 16px; }
    .volume-label { font-size: 1.25rem; }
    .volume-message { margin-block: 20px 10px; }
    .volume-note { margin-top: 16px; }
}