:root {
    --cards-ink: #20383d;
    --cards-muted: #607276;
    --cards-paper: #fff;
    --cards-canvas: #f8faf8;
    --cards-line: rgba(32, 56, 61, .11);
    --cards-teal: #18a4b3;
    --cards-green: #66b58e;
    --cards-yellow: #efb63d;
    --cards-orange: #f07834;
    --cards-red: #e8553f;
    --cards-teal-ink: #086b77;
    --cards-green-ink: #216c4c;
    --cards-yellow-ink: #20383d;
    --cards-orange-ink: #cf361f;
    --cards-red-ink: #c42836;
    --cards-spectrum: linear-gradient(90deg, var(--cards-teal), var(--cards-green), var(--cards-yellow), var(--cards-orange), var(--cards-red));
    --cards-shadow: 0 24px 70px rgba(46, 53, 48, .1);
}

html {
    scroll-behavior: smooth;
}

.cards-page {
    color: var(--cards-ink);
    background: var(--cards-canvas);
}

.cards-page main {
    overflow: clip;
}

.cards-page .pi-nav a[aria-current="page"] {
    color: var(--cards-ink);
}

.cards-page .pi-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.cards-hero {
    position: relative;
    min-height: 820px;
    padding: 154px 0 88px;
    overflow: clip;
    background:
        radial-gradient(circle at 10% 20%, rgba(24, 164, 179, .075), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(102, 181, 142, .06), transparent 28%),
        linear-gradient(138deg, #fff 0%, #fbfdfc 55%, #f7faf8 100%);
}

.cards-hero::before,
.cards-hero::after {
    position: absolute;
    content: '';
    border: 1px solid rgba(24, 164, 179, .1);
    border-radius: 50%;
    pointer-events: none;
}

.cards-hero::before {
    top: -340px;
    right: -250px;
    width: 720px;
    height: 720px;
    box-shadow: 0 0 0 86px rgba(24, 164, 179, .018), 0 0 0 172px rgba(102, 181, 142, .012);
}

.cards-hero::after {
    bottom: -280px;
    left: -230px;
    width: 560px;
    height: 560px;
    border-color: rgba(102, 181, 142, .12);
    box-shadow: 0 0 0 64px rgba(24, 164, 179, .025);
}

.cards-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 570px;
    grid-template-columns: minmax(470px, .92fr) minmax(510px, 1.08fr);
    align-items: center;
    gap: clamp(52px, 7vw, 112px);
}

.cards-breadcrumbs {
    display: flex;
    margin-bottom: 30px;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--cards-muted);
    font-size: 11px;
    font-weight: 700;
}

.cards-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.cards-breadcrumbs a:hover,
.cards-breadcrumbs a:focus-visible {
    color: var(--cards-teal);
}

.cards-breadcrumbs span {
    color: rgba(32,56,61, .28);
}

.cards-breadcrumbs strong {
    color: var(--cards-ink);
}

.cards-eyebrow {
    display: flex;
    margin: 0 0 19px;
    align-items: center;
    gap: 12px;
    color: var(--cards-teal-ink);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cards-eyebrow > span {
    width: 30px;
    height: 1px;
    background: var(--cards-spectrum);
}

.cards-hero h1 {
    max-width: 690px;
    margin: 0;
    font-size: clamp(58px, 5vw, 82px);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.075em;
    text-wrap: balance;
}

.cards-hero h1 em {
    display: block;
    color: var(--cards-teal);
    font-style: normal;
}

.cards-hero__lead {
    max-width: 650px;
    margin: 28px 0 0;
    color: var(--cards-muted);
    font-size: 17px;
    line-height: 1.72;
    text-wrap: pretty;
}

.cards-actions {
    display: flex;
    margin-top: 32px;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.cards-button {
    display: inline-flex;
    min-height: 56px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    gap: 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.cards-button:hover,
.cards-button:focus-visible {
    outline: 0;
    transform: translateY(-2px);
}

.cards-button--primary {
    color: #fff;
    background: linear-gradient(105deg, var(--cards-teal-ink), var(--cards-green-ink));
    box-shadow: 0 16px 30px rgba(24, 164, 179, .22);
}

.cards-button--primary:hover,
.cards-button--primary:focus-visible {
    color: #fff;
    box-shadow: 0 19px 36px rgba(24, 164, 179, .28);
}

.cards-button--ghost {
    border-color: rgba(32,56,61, .13);
    color: var(--cards-ink);
    background: rgba(255, 255, 255, .72);
}

.cards-button--ghost:hover,
.cards-button--ghost:focus-visible {
    border-color: rgba(24, 164, 179, .32);
    color: var(--cards-ink);
    background: #fff;
}

.cards-hero__proof {
    display: flex;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    gap: 9px;
}

.cards-hero__proof li {
    display: inline-flex;
    min-height: 39px;
    padding: 5px 13px 5px 6px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(32,56,61, .1);
    border-radius: 999px;
    color: var(--cards-muted);
    background: rgba(255, 255, 255, .64);
    font-size: 10px;
    font-weight: 750;
}

.cards-hero__proof b {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--cards-teal-ink);
    font-size: 8px;
}

.cards-hero__proof li:nth-child(2) b {
    background: var(--cards-green-ink);
}

.cards-hero__proof li:nth-child(3) b {
    background: var(--cards-orange-ink);
}

.cards-hero__visual {
    position: relative;
    min-height: 520px;
    perspective: 1300px;
}

.cards-mockup {
    position: absolute;
    width: min(520px, 92%);
    aspect-ratio: 1.72 / 1;
    overflow: hidden;
    border: 1px solid rgba(32,56,61, .1);
    border-radius: 27px;
    box-shadow: 0 30px 85px rgba(33, 61, 58, .16);
}

.cards-mockup--back {
    top: 44px;
    right: 0;
    background:
        radial-gradient(circle at 84% 15%, rgba(239, 182, 61, .9), transparent 29%),
        radial-gradient(circle at 10% 90%, rgba(24, 164, 179, .85), transparent 32%),
        linear-gradient(135deg, #6ebaa0, #f0c35b 55%, #f07834);
    transform: rotate(9deg) translate3d(3%, 0, -30px);
}

.cards-mockup--back::after {
    position: absolute;
    top: -38%;
    right: -18%;
    width: 72%;
    height: 126%;
    content: '';
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    box-shadow: 0 0 0 44px rgba(255, 255, 255, .07), 0 0 0 88px rgba(255, 255, 255, .04);
}

.cards-mockup--back .cards-mockup__mark {
    position: absolute;
    bottom: 30px;
    left: 36px;
    color: rgba(255, 255, 255, .94);
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.12em;
}

.cards-mockup--back i {
    position: absolute;
    top: 37px;
    right: 38px;
    z-index: 1;
    width: 80px;
    height: 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .72);
}

.cards-mockup--back i:nth-of-type(2) {
    top: 54px;
    width: 112px;
    opacity: .64;
}

.cards-mockup--back i:nth-of-type(3) {
    top: 71px;
    width: 62px;
    opacity: .46;
}

.cards-mockup--front {
    right: 9%;
    bottom: 35px;
    padding: 36px;
    color: var(--cards-ink);
    background:
        radial-gradient(circle at 100% 100%, rgba(24, 164, 179, .09), transparent 34%),
        linear-gradient(145deg, #fff, #fffaf5);
    transform: rotate(-6deg) translate3d(-3%, 0, 35px);
}

.cards-mockup--front::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    content: '';
    background: linear-gradient(90deg, var(--cards-teal), var(--cards-green), var(--cards-yellow), var(--cards-orange), var(--cards-red));
}

.cards-mockup__logo {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.cards-mockup__logo span {
    color: var(--cards-teal);
    font-size: 44px;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.1em;
}

.cards-mockup__logo small {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.055em;
}

.cards-mockup__person {
    position: absolute;
    bottom: 43px;
    left: 36px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cards-mockup__person strong {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.035em;
}

.cards-mockup__person span,
.cards-mockup__contact span {
    color: var(--cards-muted);
    font-size: 10px;
    font-weight: 650;
}

.cards-mockup__contact {
    position: absolute;
    right: 36px;
    bottom: 43px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
}

.cards-mockup__note {
    position: absolute;
    top: 38px;
    right: 34px;
    max-width: 130px;
    color: rgba(32,56,61, .4);
    font-size: 7px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .11em;
    text-align: right;
    text-transform: uppercase;
}

.cards-orbit {
    position: absolute;
    border: 1px solid rgba(24, 164, 179, .13);
    border-radius: 50%;
    pointer-events: none;
}

.cards-orbit--one {
    top: 0;
    left: 2%;
    width: 170px;
    height: 170px;
}

.cards-orbit--two {
    right: -6%;
    bottom: -6%;
    width: 220px;
    height: 220px;
    border-color: rgba(240, 120, 52, .13);
}

.cards-materials {
    padding-bottom: 82px;
    background: var(--cards-paper);
}

.cards-materials__story {
    position: relative;
    display: grid;
    min-height: 560px;
    overflow: hidden;
    grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr);
    border: 1px solid rgba(24, 164, 179, .17);
    border-radius: 38px;
    background:
        radial-gradient(circle at 76% 0, rgba(24, 164, 179, .055), transparent 31%),
        radial-gradient(circle at 100% 100%, rgba(102, 181, 142, .05), transparent 32%),
        linear-gradient(135deg, #fff 0%, #fcfdfc 58%, #f8fbf9 100%);
    box-shadow: var(--cards-shadow);
}

.cards-materials__story::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    content: '';
    background: linear-gradient(90deg, var(--cards-teal), var(--cards-green), var(--cards-yellow), var(--cards-orange), var(--cards-red));
}

.cards-materials__production {
    position: relative;
    min-height: 560px;
    margin: 0;
    overflow: hidden;
    background: #dcece8;
}

.cards-materials__production::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(180deg, transparent 48%, rgba(18, 44, 43, .68) 100%);
    pointer-events: none;
}

.cards-materials__production video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center 31%;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.cards-materials__story:hover .cards-materials__production video {
    transform: scale(1.018);
}

.cards-materials__production figcaption {
    position: absolute;
    right: 28px;
    bottom: 28px;
    left: 28px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
}

.cards-materials__production figcaption span {
    display: inline-flex;
    min-height: 28px;
    padding: 0 12px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(9px);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.cards-materials__production figcaption strong {
    max-width: 190px;
    font-size: 15px;
    line-height: 1.2;
    text-align: right;
}

.cards-materials__intro {
    position: relative;
    z-index: 1;
    display: flex;
    padding: clamp(52px, 6vw, 92px);
    flex-direction: column;
    justify-content: center;
}

.cards-materials__intro h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(47px, 4.5vw, 72px);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.068em;
    text-wrap: balance;
}

.cards-materials__intro > p:last-of-type {
    max-width: 720px;
    margin: 30px 0 0;
    color: var(--cards-muted);
    font-size: 14px;
    line-height: 1.78;
    text-wrap: pretty;
}

.cards-materials__scope {
    display: flex;
    margin: 36px 0 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.cards-materials__scope li {
    display: inline-flex;
    min-height: 42px;
    padding: 6px 15px 6px 7px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(32,56,61, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    color: var(--cards-ink);
    font-size: 10px;
    font-weight: 760;
}

.cards-materials__scope span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--cards-teal-ink);
    font-size: 7px;
}

.cards-materials__scope li:nth-child(2) span { background: var(--cards-green-ink); }
.cards-materials__scope li:nth-child(3) span { color: var(--cards-ink); background: var(--cards-yellow); }

.cards-materials__head {
    display: grid;
    margin: 78px 0 36px;
    grid-template-columns: minmax(0, 1fr) minmax(290px, .52fr);
    align-items: end;
    gap: clamp(42px, 7vw, 110px);
}

.cards-materials__head h3 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(36px, 3.7vw, 56px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    text-wrap: balance;
}

.cards-materials__head > p {
    margin: 0;
    color: var(--cards-muted);
    font-size: 13px;
    line-height: 1.72;
    text-wrap: pretty;
}

.cards-materials__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cards-material {
    --material-accent: var(--cards-red);
    --material-ink: var(--cards-red-ink);
    grid-column: span 1;
    overflow: hidden;
    border: 1px solid rgba(32,56,61, .1);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 13px 34px rgba(46, 53, 48, .06);
    transition: border-color .25s ease, box-shadow .3s ease, transform .3s ease;
}

.cards-material--paper { --material-accent: var(--cards-red); --material-ink: var(--cards-red-ink); }
.cards-material--plastic { --material-accent: var(--cards-green); --material-ink: var(--cards-green-ink); }
.cards-material--wood { --material-accent: var(--cards-yellow); --material-ink: var(--cards-yellow-ink); }
.cards-material--metal { --material-accent: var(--cards-orange); --material-ink: var(--cards-orange-ink); }
.cards-material--transparent { --material-accent: var(--cards-teal); --material-ink: var(--cards-teal-ink); }
.cards-material--duplex { --material-accent: var(--cards-teal); --material-ink: var(--cards-teal-ink); }
.cards-material--folded { --material-accent: var(--cards-orange); --material-ink: var(--cards-orange-ink); }

.cards-material:hover,
.cards-material:focus-within {
    border-color: var(--material-accent);
    box-shadow: 0 24px 58px rgba(46, 53, 48, .12);
    transform: translateY(-5px);
}

.cards-material > a {
    display: flex;
    height: 100%;
    color: inherit;
    flex-direction: column;
    text-decoration: none;
}

.cards-material > a:focus-visible {
    outline: 3px solid var(--material-accent);
    outline-offset: -4px;
}

.cards-material__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    background: #fff;
}

.cards-material__media::after {
    content: none;
}

.cards-material__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transform: none;
    transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.cards-material:hover .cards-material__media img,
.cards-material:focus-within .cards-material__media img {
    transform: scale(1.035);
}

.cards-material__body {
    display: flex;
    min-height: 245px;
    padding: 26px;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}

.cards-material__body small {
    margin-bottom: 13px;
    color: var(--material-ink);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cards-material__body h3 {
    margin: 0;
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -.05em;
}

.cards-material__body p {
    margin: 14px 0 24px;
    color: var(--cards-muted);
    font-size: 12px;
    line-height: 1.64;
}

.cards-material__link {
    display: flex;
    width: 100%;
    margin-top: auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--cards-ink);
    font-size: 11px;
    font-weight: 820;
}

.cards-material__link i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--material-ink);
    font-size: 14px;
    font-style: normal;
    transition: transform .25s ease;
}

.cards-material:hover .cards-material__link i,
.cards-material:focus-within .cards-material__link i {
    transform: translate(2px, -2px);
}

.cards-js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.cards-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1180px) {
    .cards-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .cards-hero h1 {
        font-size: clamp(52px, 5.7vw, 70px);
    }

    .cards-hero__visual {
        min-height: 480px;
    }

    .cards-materials__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards-material {
        grid-column: span 1;
    }

}

@media (max-width: 900px) {
    .cards-hero {
        padding-top: 122px;
    }

    .cards-hero__grid {
        grid-template-columns: 1fr;
    }

    .cards-hero__grid {
        gap: 26px;
    }

    .cards-hero__visual {
        min-height: 520px;
    }

    .cards-materials__story {
        grid-template-columns: 1fr;
    }

    .cards-materials__production,
    .cards-materials__production video {
        min-height: 0;
    }

    .cards-materials__production {
        aspect-ratio: 16 / 9;
    }

    .cards-materials__production video {
        position: absolute;
        inset: 0;
    }

    .cards-materials__intro {
        padding: 54px;
    }

    .cards-materials__head {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cards-materials__head > p {
        max-width: 650px;
    }

}

@media (max-width: 660px) {
    .cards-hero {
        min-height: 0;
        padding: 104px 0 62px;
    }

    .cards-breadcrumbs {
        margin-bottom: 22px;
        font-size: 9px;
    }

    .cards-eyebrow {
        margin-bottom: 14px;
        font-size: 7px;
    }

    .cards-hero h1 {
        font-size: clamp(43px, 13vw, 58px);
    }

    .cards-hero__lead {
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.65;
    }

    .cards-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cards-button {
        width: 100%;
        justify-content: space-between;
    }

    .cards-hero__proof {
        gap: 6px;
    }

    .cards-hero__proof li {
        min-height: 35px;
        padding-right: 10px;
        font-size: 8px;
    }

    .cards-hero__proof b {
        width: 25px;
        height: 25px;
        font-size: 7px;
    }

    .cards-hero__visual {
        min-height: 360px;
    }

    .cards-mockup {
        width: 89%;
        border-radius: 18px;
    }

    .cards-mockup--back {
        top: 28px;
    }

    .cards-mockup--front {
        right: 7%;
        bottom: 24px;
        padding: 22px;
    }

    .cards-mockup__logo span {
        font-size: 31px;
    }

    .cards-mockup__logo small {
        font-size: 12px;
    }

    .cards-mockup__person {
        bottom: 25px;
        left: 22px;
    }

    .cards-mockup__person strong {
        font-size: 12px;
    }

    .cards-mockup__person span,
    .cards-mockup__contact span {
        font-size: 7px;
    }

    .cards-mockup__contact {
        right: 22px;
        bottom: 25px;
    }

    .cards-mockup__note {
        top: 22px;
        right: 21px;
        max-width: 95px;
        font-size: 7px;
    }

    .cards-materials {
        padding-bottom: 64px;
    }

    .cards-materials__intro h2,
    .cards-materials__head h3 {
        font-size: clamp(34px, 10vw, 46px);
    }

    .cards-materials__story {
        border-radius: 25px;
    }

    .cards-materials__production {
        aspect-ratio: 4 / 3;
    }

    .cards-materials__production figcaption {
        right: 18px;
        bottom: 18px;
        left: 18px;
    }

    .cards-materials__production figcaption strong {
        max-width: 150px;
        font-size: 12px;
    }

    .cards-materials__intro {
        padding: 32px 20px 26px;
    }

    .cards-materials__intro > p:last-of-type {
        margin-top: 22px;
        font-size: 12px;
        line-height: 1.7;
    }

    .cards-materials__scope {
        margin-top: 25px;
        flex-direction: column;
    }

    .cards-materials__scope li {
        width: 100%;
    }

    .cards-materials__head {
        margin: 54px 0 27px;
    }

    .cards-materials__grid {
        grid-template-columns: 1fr;
    }

    .cards-material {
        grid-column: 1;
        border-radius: 22px;
    }

    .cards-material__body {
        min-height: 225px;
        padding: 22px;
    }

    .cards-material__body h3 {
        font-size: 22px;
    }

}

.cards-hero {
    min-height: 0;
    padding: 142px 0 86px;
    background:
        radial-gradient(circle at 7% 8%, rgba(24, 164, 179, .065), transparent 31%),
        radial-gradient(circle at 96% 5%, rgba(102, 181, 142, .045), transparent 25%),
        linear-gradient(125deg, #fff 0%, #fcfdfc 62%, #f8fbf9 100%);
}

.cards-hero__grid {
    min-height: 575px;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(38px, 4vw, 72px);
}

.cards-hero__copy {
    padding: 2px 0 18px;
}

.cards-hero .cards-breadcrumbs {
    margin-bottom: 37px;
    color: #758488;
    font-size: 11px;
    font-weight: 650;
}

.cards-hero .cards-eyebrow {
    margin-bottom: 18px;
    color: var(--cards-teal-ink);
}

.cards-hero h1 {
    max-width: 790px;
    font-size: clamp(54px, 4.4vw, 68px);
    line-height: 1.01;
    letter-spacing: -.065em;
}

.cards-hero h1 em {
    color: #188f9e;
}

.cards-hero__copy h1 {
    color: var(--cards-ink);
}

.cards-hero__copy h1 em {
    color: var(--cards-teal-ink);
}

.cards-hero__copy > .cards-eyebrow {
    color: var(--cards-teal-ink);
}

.cards-hero__copy > .cards-eyebrow > span {
    background: var(--cards-spectrum);
}

.cards-hero__lead {
    max-width: 610px;
    margin-top: 28px;
    color: #3e565a;
    font-size: 17px;
    line-height: 1.65;
}

.cards-hero__support {
    max-width: 580px;
    margin: 13px 0 0;
    color: var(--cards-muted);
    font-size: 14px;
    line-height: 1.62;
    text-wrap: pretty;
}

.cards-hero .cards-actions {
    margin-top: 28px;
}

.cards-hero .cards-button {
    min-height: 56px;
    padding: 5px 7px 5px 20px;
    gap: 18px;
    font-size: 12px;
}

.cards-hero .cards-button > span {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
}

.cards-hero .cards-button--primary > span {
    color: #148b99;
    background: #fff;
}

.cards-hero .cards-button--ghost > span {
    color: #147f8c;
    background: #edf8f6;
}

.cards-hero__proof {
    max-width: 630px;
    margin-top: 27px;
    padding-top: 18px;
    border-top: 1px solid rgba(32, 56, 61, .12);
    gap: 9px 22px;
}

.cards-hero__proof li {
    min-height: 23px;
    padding: 0;
    border: 0;
    border-radius: 0;
    gap: 7px;
    color: #4b6165;
    background: transparent;
    font-size: 10px;
    font-weight: 750;
}

.cards-hero__proof li > span {
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    color: #118d91;
    background: #ddf2ee;
    font-size: 10px;
    font-weight: 900;
}

.cards-hero__stage {
    position: relative;
    min-width: 0;
    padding: 11px 20px 24px 19px;
    isolation: isolate;
}

.cards-hero__stage::before {
    position: absolute;
    inset: 22px 3px 37px 49px;
    z-index: -1;
    content: '';
    border-radius: 40px;
    background: linear-gradient(145deg, #d8eff0, #dcefe1);
    transform: rotate(3deg);
    box-shadow: 0 30px 65px rgba(61, 101, 97, .12);
}

.cards-hero__visual {
    position: relative;
    min-width: 0;
    min-height: 548px;
    margin: 0;
    overflow: hidden;
    border: 6px solid rgba(255, 255, 255, .92);
    border-radius: 37px;
    background: #dcece8;
    box-shadow: 0 28px 65px rgba(33, 61, 58, .16);
    perspective: none;
}

.cards-hero__visual::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: '';
    background: linear-gradient(180deg, transparent 52%, rgba(18, 44, 43, .78) 100%);
    pointer-events: none;
}

.cards-hero__visual video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.cards-hero__visual figcaption {
    position: absolute;
    right: 25px;
    bottom: 26px;
    left: 25px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
}

.cards-hero__visual figcaption span {
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cards-hero__visual figcaption strong {
    max-width: 210px;
    font-size: 15px;
    line-height: 1.25;
    text-align: right;
}

.cards-hero__materials {
    position: relative;
    z-index: 1;
    padding-top: 68px;
    scroll-margin-top: 116px;
}

.cards-hero__materials .cards-materials__head {
    margin: 0 0 26px;
}

.cards-hero__materials .cards-materials__head h2 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(34px, 3.2vw, 49px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.cards-hero__materials .cards-materials__head h2 em {
    display: block;
    color: #148fa0;
    font-style: normal;
}

.cards-hero__materials .cards-eyebrow {
    color: #0c7080;
}

.cards-hero__materials .cards-eyebrow > span {
    background: #148fa0;
}

.cards-hero__materials .cards-materials__grid {
    grid-template-columns: repeat(2, minmax(0, 320px));
    justify-content: center;
    gap: clamp(16px, 2vw, 24px);
}

.cards-hero__materials .cards-material,
.cards-hero__materials .cards-material:nth-child(n + 4) {
    grid-column: auto;
    border-radius: 23px;
}

.cards-page--ulotki .cards-material__media {
    aspect-ratio: 4 / 3;
    padding: 0;
    background: #fff;
}

.cards-page--ulotki .cards-material--folded .cards-material__media {
    background: #fff;
}

.cards-page--ulotki .cards-material__media img {
    object-fit: cover;
}

.cards-hero__materials .cards-material__body {
    min-height: 176px;
    padding: 17px 20px 20px;
}

.cards-hero__materials .cards-material__body h3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    line-height: 1.05;
}

.cards-hero__materials .cards-material__body h3 span {
    color: #687573;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.cards-hero__materials .cards-material__body h3 strong {
    color: var(--cards-ink);
    font-size: 23px;
    font-weight: 850;
    letter-spacing: -.05em;
}

.cards-hero__materials .cards-material__body p {
    margin: 9px 0 15px;
    font-size: 11px;
    line-height: 1.55;
}

.cards-paper {
    --cards-section-accent: var(--cards-red);
    padding: 80px 0 56px;
    scroll-margin-top: 112px;
    background: linear-gradient(180deg, #fffdf9 0%, #fff 100%);
}

.cards-paper__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(38px, 4.8vw, 76px);
    padding: clamp(38px, 5vw, 72px);
    overflow: hidden;
    border: 1px solid #d7e7e3;
    border-radius: 36px;
    background: #fff;
    box-shadow: 0 27px 72px rgba(31, 74, 70, .07);
}

.cards-paper__panel::before {
    position: absolute;
    top: 0;
    right: 34px;
    left: 34px;
    height: 4px;
    content: '';
    border-radius: 0 0 8px 8px;
    background: var(--cards-section-accent);
}

.cards-paper__copy {
    position: relative;
    z-index: 1;
}

.cards-paper .cards-eyebrow {
    color: var(--cards-orange-ink);
}

.cards-paper h2 {
    max-width: 660px;
    margin: 0;
    color: var(--cards-ink);
    font-size: clamp(36px, 3.3vw, 46px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.055em;
    text-wrap: pretty;
}

.cards-paper h2 em {
    display: block;
    margin-top: 8px;
    color: #188f9e;
    font-size: .75em;
    font-weight: 750;
    font-style: normal;
    line-height: 1.18;
    letter-spacing: -.045em;
    text-wrap: balance;
}

#ulotki-dwustronne {
    --cards-section-accent: var(--cards-teal);
}

#ulotki-dwustronne .cards-paper__panel::before {
    background: var(--cards-section-accent);
}

#ulotki-dwustronne .cards-eyebrow > span {
    background: var(--cards-spectrum);
}

#ulotki-dwustronne .cards-eyebrow {
    color: var(--cards-teal-ink);
}

#ulotki-dwustronne h2 em {
    color: var(--cards-teal-ink);
}

.cards-paper__lead {
    max-width: 605px;
    margin: 23px 0 0;
    color: #425a5e;
    font-size: 15px;
    line-height: 1.7;
    text-wrap: pretty;
}

.cards-paper__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.cards-paper__details li {
    min-width: 0;
    padding: 14px 4px 0 0;
    border-top: 2px solid var(--cards-section-accent);
}

.cards-paper__details strong,
.cards-paper__details span {
    display: block;
}

.cards-paper__details strong {
    color: var(--cards-ink);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.cards-paper__details span {
    margin-top: 6px;
    color: #718085;
    font-size: 10px;
    line-height: 1.5;
}

.cards-paper__note {
    max-width: 590px;
    margin: 23px 0 0;
    color: #64767a;
    font-size: 13px;
    line-height: 1.68;
    text-wrap: pretty;
}

.cards-paper__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 28px;
}

.cards-paper__cta,
.cards-paper__back {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.cards-paper__cta {
    min-height: 52px;
    padding: 5px 6px 5px 20px;
    gap: 18px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(105deg, var(--cards-teal-ink), var(--cards-green-ink));
    box-shadow: 0 13px 28px rgba(24, 145, 150, .2);
}

.cards-paper__cta > span {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 50%;
    color: #168d98;
    background: #fff;
    font-size: 16px;
}

.cards-paper__back {
    gap: 8px;
    color: #4c6d70;
}

.cards-paper__cta:hover,
.cards-paper__cta:focus-visible,
.cards-paper__back:hover,
.cards-paper__back:focus-visible {
    transform: translateY(-2px);
}

.cards-paper__cta:hover,
.cards-paper__cta:focus-visible {
    color: #fff;
    box-shadow: 0 18px 34px rgba(24, 145, 150, .26);
}

.cards-paper__back:hover,
.cards-paper__back:focus-visible {
    color: #137f8b;
}

.cards-paper__visual {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: #f2f2f2;
    box-shadow: 0 20px 45px rgba(30, 45, 45, .12);
}

.cards-paper__visual::before {
    content: none;
}

.cards-paper__visual img {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    filter: none;
    transform: none;
}

.cards-paper__visual-label,
.cards-paper__visual figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

.cards-paper + .cards-paper {
    padding-top: 0;
}

main > .cards-paper:last-of-type {
    padding-bottom: 112px;
}

.cards-paper--plastic {
    --cards-section-accent: var(--cards-orange);
}

.cards-paper--plastic .cards-paper__panel {
    background: #fff;
}

.cards-paper--plastic .cards-paper__panel::before {
    background: var(--cards-section-accent);
}

.cards-paper--plastic .cards-eyebrow {
    color: var(--cards-orange-ink);
}

.cards-paper--plastic .cards-eyebrow > span {
    background: linear-gradient(90deg, var(--cards-yellow), var(--cards-orange), var(--cards-red));
}

.cards-paper--plastic h2 {
    color: var(--cards-ink);
}

.cards-paper--plastic .cards-paper__visual {
    order: -1;
}

.cards-paper--plastic .cards-paper__visual::before {
    content: none;
}

.cards-paper--plastic h2 em {
    color: var(--cards-orange-ink);
}

@media (min-width: 901px) {
    #ulotki-skladane h2 em {
        font-size: clamp(19px, 2.15vw, 34px);
        letter-spacing: -.055em;
    }
}

.cards-page--ulotki .cards-paper__visual {
    --visual-glow-a: rgba(24, 164, 179, .35);
    --visual-glow-b: rgba(102, 181, 142, .35);
    --visual-base-a: #eef8f8;
    --visual-base-b: #f6faf4;
    --visual-outline: rgba(20, 135, 150, .14);
    --visual-shadow: rgba(22, 88, 94, .14);
    aspect-ratio: 4 / 3;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.cards-page--ulotki .cards-paper--plastic .cards-paper__visual {
    --visual-glow-a: rgba(239, 182, 61, .34);
    --visual-glow-b: rgba(240, 120, 52, .30);
    --visual-base-a: #fff8ef;
    --visual-base-b: #f9efe3;
    --visual-outline: rgba(207, 54, 31, .16);
    --visual-shadow: rgba(32, 56, 61, .14);
    background: transparent;
}

.cards-page--ulotki .cards-paper__visual::before {
    position: absolute;
    z-index: 0;
    inset: -16px;
    content: '';
    border: 1px solid var(--visual-outline);
    border-radius: 32px;
    background:
        radial-gradient(circle at 10% 10%, var(--visual-glow-a), transparent 38%),
        radial-gradient(circle at 90% 90%, var(--visual-glow-b), transparent 42%),
        linear-gradient(145deg, var(--visual-base-a), var(--visual-base-b));
    box-shadow: 0 22px 52px var(--visual-shadow);
    pointer-events: none;
}

.cards-page--ulotki .cards-paper__visual img {
    inset: 10px;
    box-sizing: border-box;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 0;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .96);
    border-radius: 22px;
    box-shadow: 0 16px 34px rgba(15, 49, 53, .18);
}

.cards-paper--wood {
    --cards-section-accent: var(--cards-yellow);
}

.cards-paper--wood .cards-paper__panel {
    background: #fff;
}

.cards-paper--wood .cards-paper__panel::before {
    background: linear-gradient(90deg, var(--cards-green), var(--cards-yellow), var(--cards-orange));
}

.cards-paper--wood .cards-eyebrow {
    color: var(--cards-ink);
}

.cards-paper--wood .cards-eyebrow > span {
    background: linear-gradient(90deg, var(--cards-green), var(--cards-yellow));
}

.cards-paper--wood h2 {
    color: var(--cards-ink);
}

.cards-paper--wood h2 em {
    color: var(--cards-ink);
}

.cards-paper--wood .cards-paper__visual {
    background: #f2f2f2;
}

.cards-paper--wood .cards-paper__visual::before {
    content: none;
}

.cards-paper--metal {
    --cards-section-accent: #465c67;
}

.cards-paper--metal .cards-paper__panel {
    background: #fff;
}

.cards-paper--metal .cards-paper__panel::before {
    background: linear-gradient(90deg, #20383d, #88999b, var(--cards-orange));
}

.cards-paper--metal .cards-eyebrow {
    color: var(--cards-orange-ink);
}

.cards-paper--metal .cards-eyebrow > span {
    background: linear-gradient(90deg, #20383d, var(--cards-orange));
}

.cards-paper--metal h2 {
    color: #24272b;
}

.cards-paper--metal .cards-paper__visual {
    order: -1;
    background: #f2f2f2;
}

.cards-paper--metal .cards-paper__visual::before {
    content: none;
}

.cards-paper--metal .cards-paper__visual img {
    filter: none;
}

.cards-paper--metal h2 em {
    color: #465c67;
}

.cards-paper--transparent {
    --cards-section-accent: #587619;
}

.cards-paper--transparent .cards-paper__panel::before {
    background: linear-gradient(90deg, #6d8e23, #f5b51b);
}

.cards-paper--transparent .cards-eyebrow {
    color: var(--cards-green-ink);
}

.cards-paper--transparent .cards-eyebrow > span {
    background: linear-gradient(90deg, var(--cards-green), var(--cards-yellow));
}

.cards-paper--transparent h2 {
    color: var(--cards-ink);
}

.cards-paper--transparent h2 em {
    color: #587619;
}

.cards-page--ulotki .cards-hero {
    background:
        radial-gradient(circle at 3% 10%, rgba(20, 155, 167, .065), transparent 32%),
        radial-gradient(circle at 96% 86%, rgba(102, 181, 142, .045), transparent 28%),
        linear-gradient(125deg, #fff 0%, #fcfdfc 64%, #f8fbf9 100%);
}

.cards-page--ulotki .cards-hero__grid {
    min-height: 575px;
}

.cards-page--ulotki .cards-hero__copy h1 {
    max-width: 710px;
    color: #20383d;
    font-size: clamp(36px, 3.65vw, 58px);
    line-height: 1.02;
    letter-spacing: -.067em;
    text-wrap: balance;
}

.cards-page--ulotki .cards-hero__copy h1 em {
    display: block;
    color: #168c9a;
}

.cards-page--ulotki .cards-hero__copy > .cards-eyebrow {
    color: #0b8493;
}

.cards-page--ulotki .cards-hero__copy > .cards-eyebrow > span {
    background: var(--cards-spectrum);
}

.cards-page--ulotki .cards-hero__support {
    max-width: 620px;
}

.cards-page--ulotki .cards-hero__stage::before {
    inset: 31px 7px 44px 54px;
    background: linear-gradient(145deg, #d8eff0, #dcefe1);
    transform: rotate(3deg);
}

.cards-page--ulotki .cards-hero__visual {
    display: block;
    min-height: 548px;
    padding: 0;
    border: 6px solid rgba(255, 255, 255, .92);
    border-radius: 37px;
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 255, 255, .88), transparent 38%),
        radial-gradient(circle at 92% 82%, rgba(102, 181, 142, .10), transparent 37%),
        linear-gradient(135deg, #eef8f7 0%, #e3f2ed 52%, #f7faf8 100%);
    box-shadow: 0 28px 65px rgba(33, 61, 58, .16);
}

.cards-page--ulotki .cards-hero__visual::before {
    display: block;
    inset: 70px 58px 85px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 24px;
    background: rgba(255, 255, 255, .3);
    box-shadow: 22px 16px 0 rgba(19, 135, 143, .12), 0 26px 48px rgba(24, 77, 79, .1);
    transform: rotate(-9deg);
}

.cards-page--ulotki .cards-hero__visual::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: '';
    background: linear-gradient(180deg, transparent 63%, rgba(16, 54, 57, .16) 76%, rgba(12, 45, 48, .82) 100%);
    pointer-events: none;
}

.cards-page--ulotki .cards-hero__visual video {
    position: absolute;
    inset: auto;
    top: 14px;
    left: 50%;
    z-index: 1;
    width: auto;
    max-width: calc(100% - 40px);
    height: calc(100% - 28px);
    margin: 0;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    background: #e9ece9;
    object-fit: contain;
    object-position: center;
    box-shadow: 0 24px 46px rgba(24, 73, 75, .24);
    transform: translateX(-50%);
}

.cards-page--ulotki .cards-hero__visual figcaption {
    right: 25px;
    bottom: 26px;
    left: 25px;
    z-index: 3;
    align-items: flex-end;
    color: #fff;
}

.cards-page--ulotki .cards-hero__visual figcaption span {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    background: rgba(14, 57, 61, .55);
    backdrop-filter: none;
}

@media (max-width: 1180px) {
    .cards-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
        gap: 32px;
    }

    .cards-hero h1 {
        font-size: clamp(48px, 4.8vw, 60px);
    }

    .cards-hero__materials .cards-materials__grid {
        grid-template-columns: repeat(2, minmax(0, 320px));
    }

    .cards-hero__materials .cards-material:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc((100% - 12px) / 2);
        justify-self: center;
    }
}

@media (max-width: 900px) {
    .cards-page--ulotki .cards-hero__grid {
        min-height: 0;
    }

    .cards-page--ulotki .cards-hero__copy h1 {
        font-size: clamp(42px, 5vw, 50px);
    }

    .cards-page--ulotki .cards-hero__visual {
        min-height: 520px;
    }

    .cards-hero {
        padding-top: 122px;
    }

    .cards-hero__grid {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cards-hero__copy {
        padding-bottom: 0;
    }

    .cards-hero__stage {
        width: 100%;
        max-width: 690px;
        margin: 0 auto;
    }

    .cards-hero__visual {
        min-height: 480px;
    }

    .cards-hero__materials {
        padding-top: 58px;
    }

    .cards-paper {
        padding: 70px 0 44px;
    }

    .cards-paper + .cards-paper {
        padding-top: 0;
    }

    main > .cards-paper:last-of-type {
        padding-bottom: 90px;
    }

    .cards-paper__panel {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .cards-paper__visual {
        min-height: 0;
    }

    .cards-paper--plastic .cards-paper__visual,
    .cards-paper--metal .cards-paper__visual {
        order: 0;
    }
}

@media (max-width: 660px) {
    .cards-page--ulotki .cards-hero__copy h1 {
        font-size: clamp(40px, 9vw, 52px);
    }

    .cards-page--ulotki .cards-hero__visual {
        min-height: 460px;
        border-radius: 27px;
    }

    .cards-page--ulotki .cards-hero__visual::before {
        inset: 58px 34px 76px;
        border-radius: 18px;
    }

    .cards-page--ulotki .cards-hero__visual video {
        top: 10px;
        max-width: calc(100% - 20px);
        height: calc(100% - 20px);
        border-radius: 14px;
    }

    .cards-page--ulotki .cards-hero__visual figcaption {
        right: 15px;
        bottom: 16px;
        left: 15px;
        gap: 8px;
    }

    .cards-hero {
        padding: 104px 0 61px;
    }

    .cards-hero .cards-breadcrumbs {
        margin-bottom: 28px;
    }

    .cards-hero .cards-eyebrow {
        font-size: 8px;
    }

    .cards-hero h1 {
        font-size: clamp(41px, 10.8vw, 55px);
        line-height: 1.03;
    }

    .cards-hero__lead {
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.6;
    }

    .cards-hero__support {
        font-size: 13px;
    }

    .cards-hero .cards-actions {
        margin-top: 23px;
    }

    .cards-hero__proof {
        margin-top: 23px;
        padding-top: 14px;
        gap: 8px 14px;
    }

    .cards-hero__proof li {
        min-height: 20px;
        padding: 0;
        font-size: 9px;
    }

    .cards-hero__stage {
        padding: 8px 9px 25px 8px;
    }

    .cards-hero__visual {
        min-height: 390px;
        border-width: 4px;
        border-radius: 27px;
    }

    .cards-hero__stage::before {
        inset: 20px 1px 33px 27px;
        border-radius: 28px;
    }

    .cards-hero__visual figcaption {
        right: 18px;
        bottom: 18px;
        left: 18px;
    }

    .cards-hero__visual figcaption span {
        font-size: 7px;
    }

    .cards-hero__visual figcaption strong {
        max-width: 130px;
        font-size: 11px;
    }

    .cards-hero__materials {
        padding-top: 48px;
        scroll-margin-top: 105px;
    }

    .cards-hero__materials .cards-materials__head h2 {
        font-size: clamp(31px, 9vw, 40px);
    }

    .cards-hero__materials .cards-materials__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin-right: 0;
        padding: 0;
        gap: 16px;
        overflow: visible;
        scroll-snap-type: none;
    }

    .cards-hero__materials .cards-material {
        width: 100%;
        max-width: 340px;
        margin-inline: auto;
    }

    .cards-hero__materials .cards-material:last-child:nth-child(odd) {
        width: auto;
    }

    .cards-hero__materials .cards-material__body {
        min-height: 182px;
        padding: 20px 21px 22px;
    }

    .cards-paper {
        padding: 48px 0 34px;
        scroll-margin-top: 96px;
    }

    .cards-paper + .cards-paper {
        padding-top: 0;
    }

    main > .cards-paper:last-of-type {
        padding-bottom: 72px;
    }

    .cards-paper__panel {
        gap: 30px;
        padding: 29px 21px 21px;
        border-radius: 27px;
    }

    .cards-paper__panel::before {
        right: 20px;
        left: 20px;
    }

    .cards-paper h2 {
        font-size: clamp(34px, 9vw, 42px);
    }

    .cards-paper h2 em {
        font-size: .84em;
    }

    .cards-paper__lead {
        margin-top: 19px;
        font-size: 13px;
        line-height: 1.65;
    }

    .cards-paper__details {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 25px;
    }

    .cards-paper__details li {
        display: flex;
        padding: 11px 0 0;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .cards-paper__details strong {
        flex: 0 0 45%;
        font-size: 11px;
    }

    .cards-paper__details span {
        margin-top: 0;
        text-align: right;
    }

    .cards-paper__note {
        margin-top: 19px;
        font-size: 12px;
    }

    .cards-paper__actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 23px;
    }

    .cards-paper__cta {
        justify-content: space-between;
    }

    .cards-paper__back {
        padding: 5px 0;
    }

    .cards-paper__visual {
        min-height: 0;
        padding: 0;
        border-radius: 18px;
    }

    .cards-page--ulotki .cards-paper__visual::before {
        inset: -9px;
        border-radius: 23px;
    }

    .cards-page--ulotki .cards-paper__visual img {
        inset: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        border-width: 3px;
        border-radius: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

    .cards-material,
    .cards-material__media img,
    .cards-materials__production video,
    .cards-button,
    .cards-paper__cta,
    .cards-paper__back {
        transition: none;
    }
}

/* Ten sam motyw wspólnej stopki co na /pl/pomoc/. */
.cards-page .pl-footer{--hp-teal:#1499aa;--hp-green:#63ad91;--footer-ink:#20383d;--footer-muted:#596a70;--footer-line:rgba(32,56,61,.11);--footer-gradient:linear-gradient(90deg,var(--hp-teal),var(--hp-green),#a8c981);position:relative;padding:clamp(54px,6vw,84px) 0 28px;overflow:hidden;border-top:0;color:var(--footer-ink);background:radial-gradient(circle at 6% 4%,rgba(42,167,181,.14),transparent 25%),radial-gradient(circle at 94% 15%,rgba(99,173,145,.1),transparent 24%),linear-gradient(180deg,#eef8f5 0%,#f8f6f1 52%,#fff8f2 100%)}
.cards-page .pl-footer::before{position:absolute;top:0;right:0;left:0;height:4px;background:var(--footer-gradient);content:""}
.cards-page .pl-footer .pi-shell{width:min(1400px,calc(100% - 72px))}
.cards-page .pl-footer__grid{position:relative;display:grid;padding:10px;grid-template-columns:1.18fr .92fr 1.05fr 1.05fr;gap:10px;border:1px solid transparent;border-radius:30px;background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) padding-box,var(--footer-gradient) border-box;box-shadow:0 28px 70px rgba(32,56,61,.09);backdrop-filter:blur(10px)}
.cards-page .pl-footer__brand-card,.cards-page .pl-footer__module{min-height:390px;margin:0;padding:28px;border:1px solid rgba(32,56,61,.08);border-radius:21px;box-shadow:none}
.cards-page .pl-footer__brand-card{position:relative;overflow:hidden;background:radial-gradient(circle at 100% 0,rgba(42,167,181,.13),transparent 35%),radial-gradient(circle at 0 100%,rgba(231,65,52,.07),transparent 31%),#fff}
.cards-page .pl-footer__brand-card::before{position:absolute;top:0;right:22px;left:22px;height:3px;background:var(--footer-gradient);content:""}
.cards-page .pl-footer__brand-card::after{display:block;right:-110px;bottom:-130px;border-color:rgba(42,167,181,.13);box-shadow:0 0 0 38px rgba(242,192,97,.035),0 0 0 76px rgba(231,65,52,.02)}
.cards-page .pl-footer__brand-card>p strong{color:var(--footer-ink)}.cards-page .pl-footer__brand-card>p span{color:var(--footer-muted)}
.cards-page .pl-footer__phone small{color:#cf361f;font-weight:800}.cards-page .pl-footer__phone svg{color:#008fa8;background:#e7f6f7}.cards-page .pl-footer__address{border-color:var(--footer-line)}
.cards-page .pl-footer__module{position:relative;overflow:hidden;border-left:1px solid rgba(32,56,61,.08);background:#fff}
.cards-page .pl-footer__module:nth-child(2){background:radial-gradient(circle at 100% 0,rgba(42,167,181,.14),transparent 37%),linear-gradient(145deg,#fff,#ecf8f7)}
.cards-page .pl-footer__module:nth-child(3){background:radial-gradient(circle at 100% 0,rgba(242,192,97,.2),transparent 38%),linear-gradient(145deg,#fff,#fff7e5)}
.cards-page .pl-footer__module:nth-child(4){background:radial-gradient(circle at 100% 0,rgba(231,65,52,.13),transparent 38%),linear-gradient(145deg,#fff,#fff0eb)}
.cards-page .pl-footer__module::before{position:absolute;top:0;right:20px;left:20px;height:3px;border-radius:0 0 4px 4px;background:#2aa7b5;content:""}.cards-page .pl-footer__module:nth-child(3)::before{background:linear-gradient(90deg,#86bea2,#f2c061)}.cards-page .pl-footer__module:nth-child(4)::before{background:linear-gradient(90deg,#ee993b,#e74134)}
.cards-page .pl-footer__module h3{color:#20383d}.cards-page .pl-footer__module:nth-child(2) h3{color:#087f91}.cards-page .pl-footer__module:nth-child(3) h3{color:#20383d}.cards-page .pl-footer__module:nth-child(4) h3{color:#c42836}
.cards-page .pl-footer__module li a{padding:0 8px;border-radius:10px;color:#596a70;transition:color .2s ease,padding .2s ease,background .2s ease}.cards-page .pl-footer__module li a:hover,.cards-page .pl-footer__module li a:focus-visible{padding-left:11px;color:#20383d;text-decoration:none;background:rgba(255,255,255,.72)}
.cards-page .pl-footer__module-cta{border-color:rgba(32,56,61,.12);background:rgba(255,255,255,.72);box-shadow:0 8px 22px rgba(32,56,61,.05)}.cards-page .pl-footer__module-cta span{color:#fff;background:linear-gradient(135deg,#f2c061,#ee993b 52%,#e74134)}.cards-page .pl-footer__module-cta:hover,.cards-page .pl-footer__module-cta:focus-visible{border-color:#cf361f;background:#fff}
.cards-page .pl-footer__locations{position:relative;margin-top:18px;padding:clamp(28px,3vw,40px);overflow:hidden;border:1px solid transparent;border-radius:28px;background:radial-gradient(circle at 94% 0,rgba(42,167,181,.15),transparent 29%),linear-gradient(#fff,#fff) padding-box,var(--footer-gradient) border-box;box-shadow:0 20px 54px rgba(32,56,61,.075)}
.cards-page .pl-footer__locations::before{position:absolute;top:0;right:36px;left:36px;height:3px;background:var(--footer-gradient);content:""}
.cards-page .pl-footer__locations-intro{display:grid;margin-bottom:26px;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);align-items:end;gap:clamp(38px,6vw,86px)}
.cards-page .pl-footer__locations-kicker{display:flex;margin:0 0 15px;align-items:center;gap:10px;color:#07889c;font-size:10px;font-weight:820;letter-spacing:.14em;text-transform:uppercase}.cards-page .pl-footer__locations-kicker span{width:28px;height:2px;background:var(--footer-gradient)}
.cards-page .pl-footer__locations h2{max-width:760px;margin:0;color:var(--footer-ink);font-size:clamp(31px,3vw,44px);font-weight:870;line-height:1.04;letter-spacing:-.045em}
.cards-page .pl-footer__locations-description{max-width:820px;margin:17px 0 0;color:#596a70;font-size:13px;line-height:1.7}
.cards-page .pl-footer__locations-copy{display:flex;align-items:flex-start;flex-direction:column}.cards-page .pl-footer__locations-copy>p{display:flex;max-width:430px;margin:0 0 18px;flex-direction:column;gap:6px}.cards-page .pl-footer__locations-copy strong{color:var(--footer-ink);font-size:14px;line-height:1.45}.cards-page .pl-footer__locations-copy p span{color:#596a70;font-size:13px;line-height:1.6}
.cards-page .pl-footer__locations-copy>a{display:inline-flex;min-height:44px;align-items:center;gap:11px;color:var(--footer-ink);font-size:10px;font-weight:820;letter-spacing:.06em;text-transform:uppercase}.cards-page .pl-footer__locations-copy>a span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#2aa7b5,#75bfa4);transition:transform .2s ease}.cards-page .pl-footer__locations-copy>a:hover,.cards-page .pl-footer__locations-copy>a:focus-visible{color:#07889c;outline:0}.cards-page .pl-footer__locations-copy>a:hover span,.cards-page .pl-footer__locations-copy>a:focus-visible span{transform:translateY(3px)}
.cards-page .pl-footer__cities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.cards-page .pl-footer__cities a{--city:#159bb0;--city-next:#55bdb9;--city-rgb:21,155,176;position:relative;display:grid;min-height:60px;padding:0 12px 0 16px;overflow:hidden;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid rgba(var(--city-rgb),.21);border-radius:15px;color:var(--footer-ink);background:radial-gradient(circle at 100% 0,rgba(var(--city-rgb),.14),transparent 45%),#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.cards-page .pl-footer__cities a:nth-child(2),.cards-page .pl-footer__cities a:nth-child(7){--city:#5aa879;--city-next:#90c8a9;--city-rgb:90,168,121}.cards-page .pl-footer__cities a:nth-child(3),.cards-page .pl-footer__cities a:nth-child(8){--city:#efb63d;--city-next:#f2c061;--city-rgb:215,162,45}.cards-page .pl-footer__cities a:nth-child(4){--city:#ec8c35;--city-next:#f2b24d;--city-rgb:236,140,53}.cards-page .pl-footer__cities a:nth-child(5){--city:#cf361f;--city-next:#ee993b;--city-rgb:232,106,50}.cards-page .pl-footer__cities a:nth-child(6){--city:#d9473b;--city-next:#cf361f;--city-rgb:217,71,59}
.cards-page .pl-footer__cities a::before{position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg,var(--city),var(--city-next));content:""}.cards-page .pl-footer__cities a strong{font-size:13px;font-weight:720}.cards-page .pl-footer__cities a b{display:grid;width:29px;height:29px;place-items:center;border:0;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--city),var(--city-next));font-size:10px;transition:transform .2s ease}.cards-page .pl-footer__cities a:hover,.cards-page .pl-footer__cities a:focus-visible{border-color:rgba(var(--city-rgb),.42);outline:0;box-shadow:0 11px 25px rgba(var(--city-rgb),.11);transform:translateY(-2px)}.cards-page .pl-footer__cities a:hover b,.cards-page .pl-footer__cities a:focus-visible b{transform:rotate(8deg)}
.cards-page .pl-footer__bottom{padding-top:23px;border:0}.cards-page .pl-footer__bottom p{color:#596a70}.cards-page .pl-footer__bottom>a{color:#596a70}.cards-page .pl-footer__bottom>a span{border-color:rgba(32,56,61,.13);color:#fff;background:linear-gradient(135deg,#2aa7b5,#75bfa4)}
@media(max-width:1100px){
    .cards-page .pl-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cards-page .pl-footer__brand-card,.cards-page .pl-footer__module{min-height:360px}
}
@media(max-width:980px){.cards-page .pl-footer__locations-intro{grid-template-columns:1fr;align-items:start;gap:22px}.cards-page .pl-footer__cities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
    .cards-page .pl-footer{padding:42px 0 20px}.cards-page .pl-footer .pi-shell{width:calc(100% - 20px)}.cards-page .pl-footer__grid{padding:7px;grid-template-columns:1fr;gap:7px;border-radius:23px}.cards-page .pl-footer__brand-card,.cards-page .pl-footer__module{min-height:0;margin:0;padding:24px 20px;border-radius:17px}.cards-page .pl-footer__module{border:1px solid rgba(32,56,61,.08)}.cards-page .pl-footer__module ul{grid-template-columns:1fr}.cards-page .pl-footer__locations{margin-top:12px;padding:26px 18px 18px;border-radius:22px}.cards-page .pl-footer__locations::before{right:22px;left:22px}.cards-page .pl-footer__locations h2{font-size:30px}.cards-page .pl-footer__locations-description,.cards-page .pl-footer__locations-copy p span{font-size:12px}.cards-page .pl-footer__cities{grid-template-columns:1fr;gap:7px}.cards-page .pl-footer__cities a{min-height:55px}.cards-page .pl-footer__bottom{gap:13px}
}

/* Wspólne akcenty marki także w stopce produktu. */
.cards-page .pl-footer {
    --hp-teal: var(--cards-teal);
    --hp-green: var(--cards-green);
    --footer-gradient: var(--cards-spectrum);
}

.cards-page .pl-footer__module::before {
    background: var(--cards-spectrum);
}

.cards-page .pl-footer__module:nth-child(3)::before {
    background: linear-gradient(90deg, var(--cards-green), var(--cards-yellow));
}

.cards-page .pl-footer__module:nth-child(4)::before,
.cards-page .pl-footer__module-cta span {
    background: linear-gradient(90deg, var(--cards-orange), var(--cards-red));
}

.cards-page .pl-footer__cities a {
    --city: var(--cards-teal);
    --city-next: var(--cards-green);
    --city-rgb: 24, 164, 179;
}

.cards-page .pl-footer__cities a:nth-child(2),
.cards-page .pl-footer__cities a:nth-child(7) {
    --city: var(--cards-green);
    --city-next: var(--cards-teal);
    --city-rgb: 102, 181, 142;
}

.cards-page .pl-footer__cities a:nth-child(3),
.cards-page .pl-footer__cities a:nth-child(8) {
    --city: var(--cards-yellow);
    --city-next: var(--cards-orange);
    --city-rgb: 239, 182, 61;
}

.cards-page .pl-footer__cities a:nth-child(4),
.cards-page .pl-footer__cities a:nth-child(5) {
    --city: var(--cards-orange);
    --city-next: var(--cards-red);
    --city-rgb: 240, 120, 52;
}

.cards-page .pl-footer__cities a:nth-child(6) {
    --city: var(--cards-red);
    --city-next: var(--cards-orange);
    --city-rgb: 232, 85, 63;
}

/* Dwie formy ulotek mają osobne akcenty; ciepła barwa prowadzi do projektu. */
.cards-hero__materials .cards-material--duplex {
    --material-accent: var(--cards-teal);
    --material-ink: var(--cards-teal-ink);
}

.cards-hero__materials .cards-material--folded {
    --material-accent: var(--cards-orange);
    --material-ink: var(--cards-orange-ink);
}

.cards-page--ulotki .cards-hero__copy h1 em {
    color: var(--cards-orange-ink);
}

.cards-page--ulotki .cards-hero .cards-button--primary {
    background: var(--cards-orange-ink);
    box-shadow: 0 16px 30px rgba(207, 54, 31, .16);
}

.cards-page--ulotki .cards-hero .cards-button--primary:hover,
.cards-page--ulotki .cards-hero .cards-button--primary:focus-visible {
    background: #a92b19;
    box-shadow: 0 19px 36px rgba(207, 54, 31, .21);
}

.cards-page--ulotki .cards-hero__materials .cards-materials__head h2 em {
    color: var(--cards-red-ink);
}

.cards-page--ulotki .cards-paper__cta {
    background: var(--cards-section-ink, var(--cards-teal-ink));
    box-shadow: 0 13px 28px rgba(32, 56, 61, .13);
}

.cards-page--ulotki .cards-paper__cta > span {
    color: var(--cards-section-ink, var(--cards-teal-ink));
}

.cards-page--ulotki .cards-paper--plastic { --cards-section-ink: var(--cards-orange-ink); }

.cards-page .pl-footer {
    --footer-ink: var(--cards-ink);
    --footer-muted: var(--cards-muted);
    --footer-line: var(--cards-line);
    background:
        radial-gradient(circle at 4% 4%, rgba(24, 164, 179, .09), transparent 29%),
        radial-gradient(circle at 96% 82%, rgba(240, 120, 52, .045), transparent 27%),
        #fbfcfa;
}

.cards-page .pl-footer::before,
.cards-page .pl-footer__locations::before,
.cards-page .pl-footer__brand-card::before {
    height: 2px;
}

.cards-page .pl-footer__brand-card,
.cards-page .pl-footer__module:nth-child(n) {
    background: #fff;
}

.cards-page .pl-footer__module:nth-child(2) { background: #f3fbfc; }
.cards-page .pl-footer__module:nth-child(3) { background: #fffaf0; }
.cards-page .pl-footer__module:nth-child(4) { background: #fff6f4; }

.cards-page .pl-footer__brand-card::after {
    box-shadow: 0 0 0 38px rgba(24, 164, 179, .018);
}

.cards-page .pl-footer__module:nth-child(n)::before {
    height: 2px;
    background: var(--cards-spectrum);
}

.cards-page .pl-footer__module:nth-child(3)::before {
    background: var(--cards-yellow);
}

.cards-page .pl-footer__module:nth-child(4)::before {
    background: linear-gradient(90deg, var(--cards-orange), var(--cards-red));
}

.cards-page .pl-footer__module:nth-child(n) h3 {
    color: var(--cards-teal-ink);
}

.cards-page .pl-footer__module:nth-child(3) h3 {
    color: var(--cards-yellow-ink);
}

.cards-page .pl-footer__module:nth-child(4) h3 {
    color: var(--cards-red-ink);
}

.cards-page .pl-footer__module-cta span,
.cards-page .pl-footer__bottom > a span {
    background: var(--cards-teal-ink);
}

.cards-page .pl-footer__module:nth-child(3) .pl-footer__module-cta span {
    background: var(--cards-orange-ink);
}

.cards-page .pl-footer__locations {
    background:
        radial-gradient(circle at 95% 3%, rgba(24, 164, 179, .085), transparent 37%) padding-box,
        linear-gradient(#fff, #fff) padding-box,
        var(--cards-spectrum) border-box;
}

.cards-page .pl-footer__cities a:nth-child(n) {
    --city: var(--cards-teal);
    --city-next: var(--cards-green);
    --city-rgb: 24, 164, 179;
    background: radial-gradient(circle at 100% 50%, rgba(var(--city-rgb), .07), transparent 62%), #fff;
}

.cards-page .pl-footer__cities a:nth-child(even) {
    --city: var(--cards-green);
    --city-next: var(--cards-teal);
    --city-rgb: 102, 181, 142;
}

.cards-page .pl-footer__cities a:nth-child(3),
.cards-page .pl-footer__cities a:nth-child(8) {
    --city: var(--cards-yellow);
    --city-next: var(--cards-yellow);
    --city-rgb: 239, 182, 61;
}

.cards-page .pl-footer__cities a:nth-child(4),
.cards-page .pl-footer__cities a:nth-child(5) {
    --city: #cf361f;
    --city-next: var(--cards-orange);
    --city-rgb: 207, 54, 31;
}

.cards-page .pl-footer__cities a:nth-child(6) {
    --city: #c42836;
    --city-next: var(--cards-red);
    --city-rgb: 173, 55, 41;
}

/* Trzy niewielkie, czytelne akcenty dopełniają spokojne tło strony. */
.cards-hero .cards-button--ghost > span {
    color: var(--cards-orange-ink);
    background: #ffe8d8;
}

.cards-hero__proof li:nth-child(3) > span {
    color: var(--cards-yellow-ink);
    background: #fff0c9;
}

.cards-page .pl-footer__module:nth-child(4) .pl-footer__module-cta span {
    color: #fff;
    background: #c42836;
}

/* Neutral copy prevents the warm logo accents from reading as brown. */
.cards-page .pl-footer {
    --footer-ink: #20383d;
    --footer-muted: #596a70;
    --footer-line: rgba(32, 56, 61, .12);
}
.cards-page .pl-footer__grid,
.cards-page .pl-footer__locations { box-shadow: 0 22px 56px rgba(32, 56, 61, .075); }
.cards-page .pl-footer__brand-card,
.cards-page .pl-footer__module { border-color: var(--footer-line); }
.cards-page .pl-footer__phone small { color: #cf361f; }
.cards-page .pl-footer__module h3,
.cards-page .pl-footer__module:nth-child(3) h3 { color: var(--footer-ink); }
.cards-page .pl-footer__module:nth-child(4) h3 { color: #c42836; }
.cards-page .pl-footer__module li a,
.cards-page .pl-footer__locations-description,
.cards-page .pl-footer__locations-copy p span,
.cards-page .pl-footer__bottom p,
.cards-page .pl-footer__bottom > a { color: var(--footer-muted); }
.cards-page .pl-footer__module li a:hover,
.cards-page .pl-footer__module li a:focus-visible { color: var(--footer-ink); }
.cards-page .pl-footer__module-cta,
.cards-page .pl-footer__bottom > a span { border-color: var(--footer-line); }
.cards-page .pl-footer__module:nth-child(3) .pl-footer__module-cta span { background: #cf361f; }
.cards-page .pl-footer__cities a:nth-child(3) b,
.cards-page .pl-footer__cities a:nth-child(8) b { color: var(--footer-ink); }
.cards-page .pl-footer__cities a:nth-child(n) b { color: var(--footer-ink); }
.cards-page .pl-footer__cities a:nth-child(4) b,
.cards-page .pl-footer__cities a:nth-child(5) b { color: #fff; background: #cf361f; }
.cards-page .pl-footer__cities a:nth-child(6) b { color: #fff; background: #c42836; }

/* Keep the flyer panels distinct, but let their shared backdrop flow. */
.cards-page main {
    background:
        radial-gradient(ellipse 850px 1050px at 9% 18%, rgba(24, 164, 179, .07), transparent 75%),
        radial-gradient(ellipse 850px 1000px at 91% 70%, rgba(102, 181, 142, .06), transparent 75%),
        linear-gradient(180deg, #f5faf8 0%, #e7f1ed 47%, #eaf3ef 78%, #fbfcfa 100%);
}

.cards-page main > :is(.cards-hero, .cards-paper) {
    background: transparent;
}

.cards-page .pl-footer {
    background: #fbfcfa;
}

.cards-page .pl-footer::before {
    content: none;
}

/* Extra variants use the same card and feature-panel layout. */
.cards-page--ulotki .cards-material--additional {
    --material-accent: var(--cards-teal);
    --material-ink: var(--cards-teal-ink);
}

.cards-page--ulotki .cards-paper--additional {
    --cards-section-accent: var(--cards-teal);
    --cards-section-ink: var(--cards-teal-ink);
}

.cards-page--ulotki .cards-paper--additional .cards-eyebrow,
.cards-page--ulotki .cards-paper--additional h2 em {
    color: var(--cards-teal-ink);
}

.cards-page--ulotki .cards-paper--additional .cards-eyebrow > span {
    background: var(--cards-teal);
}

.cards-page--ulotki .cards-paper--additional.cards-paper--reverse .cards-paper__visual {
    order: -1;
}

@media (min-width: 901px) {
    .cards-page--ulotki .cards-hero__materials .cards-material:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: min(100%, 320px);
        justify-self: center;
    }
}

@media (max-width: 900px) {
    .cards-page--ulotki .cards-paper--additional.cards-paper--reverse .cards-paper__visual {
        order: 0;
    }
}