/* Homepage-only paint layer: no dimensions or spacing on existing content. */
.public-home .story-treasurer,
.public-home .story-payment,
.public-home .story-beyond,
.public-home .story-payment-picture {
    position: relative;
    isolation: isolate;
}

.public-home main {
    overflow-x: clip;
}

.public-home .home-decoration {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    color: var(--public-green);
}

.public-home .home-decoration * {
    pointer-events: none;
}

/* Continuous edge washes, not floating shapes; the centre stays quiet. */
.public-home .home-decoration::before,
.public-home .home-decoration::after {
    content: '';
    position: absolute;
    width: 125%;
    height: 150px;
    right: -12%;
    bottom: -116px;
    border-radius: 48% 72% 0 0 / 82% 100% 0 0;
    transform: rotate(-3deg);
    background: currentColor;
    opacity: 0.09;
}

.public-home .home-decoration::after {
    bottom: -101px;
    right: -36%;
    transform: rotate(-7deg);
    background: none;
    border-top: 1px solid currentColor;
    opacity: 0.21;
}

.public-home .home-decoration-doodle,
.public-home .home-decoration-strokes {
    position: absolute;
    display: block;
}

.public-home .home-decoration-doodle {
    top: 62px;
    right: max(32px, calc((100% - 1180px) / 2));
    opacity: 0.43;
    transform: rotate(8deg);
}

.public-home .home-decoration--hero {
    z-index: 0;
    color: #70dfb7;
}

.public-home .home-decoration--hero::before {
    height: 220px;
    bottom: -152px;
    opacity: 0.105;
}

.public-home .home-decoration--hero::after {
    bottom: -67px;
    opacity: 0.26;
}

.public-home .home-decoration--hero .home-decoration-strokes {
    top: 76px;
    right: max(354px, calc((100% - 1180px) / 2 + 320px));
    opacity: 0.8;
    transform: rotate(-9deg);
}

.public-home .home-decoration--payment .home-decoration-strokes {
    top: -16px;
    right: 4%;
    opacity: 0.64;
    transform: rotate(14deg);
}

.public-home .home-decoration--checklist::before {
    width: min(46%, 610px);
    height: 145%;
    right: -11%;
    bottom: -30%;
    border-radius: 62% 0 0 38% / 55% 0 0 45%;
    transform: rotate(-12deg);
}

.public-home .story-treasurer .story-flow {
    border-top-color: color-mix(in srgb, var(--public-green) 42%, var(--public-line));
}

.public-home .home-decoration--payment {
    inset: -8% -10% -8% -8%;
    overflow: visible;
}

/* The wash follows the image and continues to the page edge, including on mobile. */
.public-home .home-decoration--payment::before {
    width: calc(100% + 50vw);
    height: 100%;
    left: 0;
    right: auto;
    bottom: 0;
    border-radius: 130px 0 0 80px / 42% 0 0 35%;
    transform: rotate(-2deg);
    opacity: 0.075;
}

.public-home .home-decoration--payment::after {
    width: calc(100% + 50vw);
    height: 100%;
    left: 12px;
    right: auto;
    bottom: -12px;
    border-radius: 160px 0 0 90px / 38% 0 0 48%;
    transform: rotate(-3deg);
}

.public-home .home-decoration--calendar .home-decoration-doodle {
    top: 54px;
    right: 12px;
    transform: rotate(-8deg);
}

@media (max-width: 1000px) {
    .public-home .home-decoration-doodle {
        width: 44px;
        height: 44px;
        top: 12px;
        right: 18px;
        opacity: 0.32;
    }

    .public-home .home-decoration--calendar .home-decoration-doodle {
        top: 10px;
        right: 8px;
    }

    .public-home .home-decoration--payment .home-decoration-strokes {
        width: 32px;
        height: 32px;
        top: 4px;
        right: 8%;
        opacity: 0.48;
    }

    .public-home .home-decoration--hero .home-decoration-strokes {
        top: 14px;
        right: 22px;
        width: 32px;
        height: 32px;
        opacity: 0.56;
    }
}

@media (max-width: 760px) {
    .public-home .home-decoration--checklist::before {
        width: 66%;
        height: 112%;
        right: -36%;
        bottom: -14%;
        transform: rotate(-7deg);
    }

    .public-home .home-decoration--checklist .home-decoration-doodle {
        width: 32px;
        height: 32px;
        top: 6px;
    }

    .public-home .home-decoration--payment {
        inset: -5% -8% -4% -7%;
    }
}

@media (prefers-color-scheme: dark) {
    .public-home .home-decoration:not(.home-decoration--hero)::before { opacity: 0.065; }
    .public-home .home-decoration:not(.home-decoration--hero)::after { opacity: 0.16; }
    .public-home .home-decoration-doodle { opacity: 0.32; }
}

@media (forced-colors: active), print {
    .public-home .home-decoration { display: none; }
}