/* <editor-fold desc="Shared section spacing"> */
.guide-fiscalization-v4 > div {
    padding-top: 40px;
    padding-bottom: 40px;
}
.guide-fiscalization-v4 .title.centered,
.guide-fiscalization-v4 .subtitle.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 576px) {
    .guide-fiscalization-v4 > div {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}
/* </editor-fold> */

/* <editor-fold desc="Hero (block1)"> */
.guide-fiscalization-v4 .hero-card {
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
    padding: 40px 40px 0;
    overflow: hidden;
}
.guide-fiscalization-v4 .hero-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.guide-fiscalization-v4 .hero-content .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    background: var(--color-grey-40);
    border-radius: var(--radius-100);
    color: var(--color-black-100);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-22);
}
.guide-fiscalization-v4 .hero-content .title { padding-top: 16px; }
.guide-fiscalization-v4 .hero-content .desc { padding-top: 16px; }
.guide-fiscalization-v4 .hero-content .btn-wrapper { padding-top: 32px; }

.guide-fiscalization-v4 .hero-mockup { padding-top: 60px; }

/* The video itself already renders the device bezel/backdrop (baked into the footage) —
   no decorative CSS frame needed, just size and center it. hero-card's own overflow:hidden
   clips it to match the card's rounded corners at the bottom edge. */
.guide-fiscalization-v4 .hero-mockup video {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .guide-fiscalization-v4 .hero-card { padding: 24px 24px 0; border-radius: var(--radius-24); }
    .guide-fiscalization-v4 .hero-content { max-width: 480px; }
    .guide-fiscalization-v4 .hero-mockup { padding-top: 32px; }
}
@media (max-width: 576px) {
    .guide-fiscalization-v4 .hero-content .btn-wrapper .btn { width: 100%; }
}
/* </editor-fold> */

/* <editor-fold desc="Що дізнаєтесь (block2) — feature-card-block, 3-col grid, mobile slick-slider"> */
.guide-fiscalization-v4 .cards-block .feature-card-block .feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 24px;
}
.guide-fiscalization-v4 .cards-block .feature-card-block .feature-card {
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
    padding: 24px;
}
.guide-fiscalization-v4 .cards-block .feature-card-block .feature-card .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--color-grey-40);
    border-radius: var(--radius-16);
}
.guide-fiscalization-v4 .cards-block .feature-card-block .feature-card .icon-wrapper img { width: 32px; height: 32px; transform: none; }
.guide-fiscalization-v4 .cards-block .feature-card-block .feature-card .name { padding-top: 16px; text-align: left; }
.guide-fiscalization-v4 .cards-block .feature-card-block .feature-card .desc { padding-top: 8px; text-align: left; }

@media (max-width: 992px) {
    .guide-fiscalization-v4 .cards-block .feature-card-block .feature-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .guide-fiscalization-v4 .cards-block .feature-card-block .feature-card-grid.slick-slider {
        display: block;
        grid-template-columns: none;
    }
    .guide-fiscalization-v4 .cards-block .feature-card-block .feature-card-grid.slick-slider .feature-card { height: auto; margin: 0 8px; }
    .guide-fiscalization-v4 .cards-block .feature-card-block .feature-card-grid.slick-slider .slick-track { display: flex; }
    .guide-fiscalization-v4 .cards-block .slick-dots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 16px;
        padding: 8px;
        list-style: none;
    }
    .guide-fiscalization-v4 .cards-block .slick-dots li { cursor: pointer; }
    .guide-fiscalization-v4 .cards-block .slick-dots li button {
        display: block;
        width: 12px;
        height: 12px;
        padding: 0;
        background: var(--color-grey-border);
        border-radius: var(--radius-100);
        font-size: 0;
        line-height: 0;
        transition: background-color .3s;
        cursor: pointer;
    }
    .guide-fiscalization-v4 .cards-block .slick-dots li.slick-active button { background: var(--color-green-100); }
}
/* </editor-fold> */

/* <editor-fold desc="Get guide block (block3) — copied verbatim from template_fiscalization-v4's
   .get-guide-block (assets/css/fiscalization-v4.css), selectors adapted only, no value changes. */
.guide-fiscalization-v4 .get-guide-block .container {

}
.guide-fiscalization-v4 .get-guide-block .block-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 320px;
    padding: 40px;
    overflow: hidden;
    border-radius: var(--radius-24);
    background: linear-gradient(-5.43deg, var(--color-green-20-light) 31.319%, #FCFFFC 70.948%);
}
.guide-fiscalization-v4 .get-guide-block .get-guide-container {
    position: relative;
    z-index: 1;
    max-width: 768px;
}
.guide-fiscalization-v4 .get-guide-block .desc {
    padding-top: 16px;
    color: var(--color-black-100);
}
.guide-fiscalization-v4 .get-guide-block .btn-wrapper { padding-top: 32px; }
.guide-fiscalization-v4 .get-guide-block .img-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 412px;
}
.guide-fiscalization-v4 .get-guide-block .img-wrapper,
.guide-fiscalization-v4 .get-guide-block .img-wrapper img {
    width: 100%;
    height: 100%;
}
.guide-fiscalization-v4 .get-guide-block .img-wrapper img { object-fit: contain; }

@media (max-width: 1300px) {
    .guide-fiscalization-v4 .get-guide-block .get-guide-container { max-width: 480px; }
    .guide-fiscalization-v4 .get-guide-block .img-container { width: 320px; }
}
@media (max-width: 992px) {
    .guide-fiscalization-v4 .get-guide-block .get-guide-container { max-width: 340px; padding: 32px 24px; }
}
@media (max-width: 768px) {
    .guide-fiscalization-v4 .get-guide-block .block-wrapper { min-height: 0; flex-direction: column; padding: 0 16px; }
    .guide-fiscalization-v4 .get-guide-block .get-guide-container { max-width: 100%; text-align: center; padding: 0 }
    .guide-fiscalization-v4 .get-guide-block .img-container { position: relative; margin-top: 32px; }
}
/* </editor-fold> */

/* <editor-fold desc="За підтримки (block4) — 2-up partner cards"> */
.guide-fiscalization-v4 .partners-block .partners-container {
    display: flex;
    gap: 16px;
    padding-top: 24px;
}
.guide-fiscalization-v4 .partners-block .partner {
    flex: 1 0 0;
    padding: 24px;
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
}
.guide-fiscalization-v4 .partners-block .partner .logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    background: var(--color-white);
    border-radius: var(--radius-16);
}
.guide-fiscalization-v4 .partners-block .partner .logo-wrapper img { max-width: 70%; max-height: 100px; width: auto; height: auto; }
.guide-fiscalization-v4 .partners-block .partner .content { padding-top: 16px; }
.guide-fiscalization-v4 .partners-block .partner .desc { padding-top: 8px; }

@media (max-width: 992px) {
    .guide-fiscalization-v4 .partners-block .title {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .guide-fiscalization-v4 .partners-block .partners-container { flex-direction: column; }
    .guide-fiscalization-v4 .partners-block .partner .logo-wrapper { height: 160px; }
}
/* </editor-fold> */

/* <editor-fold desc="Приймаєте оплати (block5) — text + green ghost link + illustration (node 6906:13279)">
   Figma: the card is padded 40px on ALL sides (not a right-edge bleed like the CTA banner/installments
   pattern) — the illustration is a plain, fully-contained flex item at a fixed 450x360, not absolutely
   positioned or overflowing. Content gap-32 (title+desc group, then the button); title+desc gap-16. */
.guide-fiscalization-v4 .promo-block .block-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-grey-20) 100%);
    border-radius: var(--radius-16);
    padding: 40px;
}
.guide-fiscalization-v4 .promo-block .text { flex: 1 0 0; }
.guide-fiscalization-v4 .promo-block .desc { padding-top: 16px; max-width: 640px; }
.guide-fiscalization-v4 .promo-block .btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    margin-top: 32px;
    padding: 8px;
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-24);
}
.guide-fiscalization-v4 .promo-block .illustration {
    flex-shrink: 0;
    width: 450px;
    max-width: 40%;
}
.guide-fiscalization-v4 .promo-block .illustration img { width: 100%; height: auto; display: block; }

/* Mobile frame (node 6934:14967): stacked, rounded-24 (bigger than desktop's 16), asymmetric
   padding (16 top/sides, 24 bottom), gap-32 between title+desc / button / illustration. */
@media (max-width: 992px) {
    .guide-fiscalization-v4 .promo-block .block-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 16px 16px 24px;
        border-radius: var(--radius-24);
        text-align: center;
    }
    .guide-fiscalization-v4 .promo-block .illustration { width: 100%; max-width: 320px; }
}
/* </editor-fold> */