/* <editor-fold desc="Shared section spacing"> */
.fiscalization-v4 > div:not(.hero-v4) {
    padding-top: 40px;
    padding-bottom: 40px;
}
@media (max-width: 576px) {
    .fiscalization-v4 > div:not(.hero-v4) {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}
/* </editor-fold> */

/* <editor-fold desc="GLOBAL | Montserrat font"> */
.t16m7 {
    font-family: "Montserrat", sans-serif;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-22);
}
/* </editor-fold> */
/* <editor-fold desc="GLOBAL | Tile desc"> */
.tile-desc ul { list-style: none; }
.tile-desc ul li { padding-top: 16px; }
.tile-desc ul li:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background: url(../images/icons/icon-arrow-right.svg) center center no-repeat;
    vertical-align: text-top;
}

.tile-desc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ol-counter;
}
.tile-desc ol li {
    padding-top: 12px;
    counter-increment: ol-counter;
}
.tile-desc ol li:before {
    content: counter(ol-counter);
    display: inline-block;
    width: 24px;
    margin-right: 12px;
    color: var(--color-green-100);
    border: 2px solid var(--color-green-100);
    border-radius: var(--radius-full);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-22);
    text-align: center;
    vertical-align: text-top;
}

.tile-desc > ul:first-child > li:first-child,
.tile-desc > ol:first-child > li:first-child {
    padding-top: 0;
}

.tile-desc a {
    color: #1dba57;
    text-decoration: underline;
}

@media (max-width: 576px) {
    .tile-desc ul li { padding-top: 8px; }
    .tile-desc ol li:before {
        width: 20px;
        font-size: var(--font-size-14);
        line-height: var(--line-height-20);
    }
}
/* </editor-fold> */

/* <editor-fold desc="Hero (reuses hero-v4.css layout; badge + illustration are page-specific)"> */
.fiscalization-v4 .hero-v4-textgroup {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.fiscalization-v4 .hero-v4-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 16px;
    background: var(--color-grey-40);
    border-radius: var(--radius-100);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-22);
    color: var(--color-black-100);
}
.fiscalization-v4 .hero-v4-illustration .img-wrapper { width: 100%; height: 100%; }
.fiscalization-v4 .hero-v4-illustration .img-wrapper img { width: 100%; height: 100%; object-fit: contain; }

.fiscalization-hero-illustration {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 360px;
    margin: 0 auto;
}
.fiscalization-hero-illustration .hero-blob-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fiscalization-hero-illustration .hero-mock-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    padding: 20px;
    background: var(--color-white);
    border-radius: var(--radius-16);
    box-shadow: 0 12px 24px -6px rgba(33, 33, 33, 0.12);
    transform: translate(-50%, -50%);
    text-align: center;
}
.fiscalization-hero-illustration .hero-mock-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: linear-gradient(91deg, #40a74e 5%, #4ec45f 100%);
    border-radius: var(--radius-full);
}
.fiscalization-hero-illustration .hero-mock-card-icon img { width: 26px; height: 26px; }
.fiscalization-hero-illustration .hero-mock-card-title {
    margin: 0 0 16px;
    color: var(--color-black-100);
}
.fiscalization-hero-illustration .hero-mock-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--color-grey-40);
    font-size: 13px;
    color: #90a1b9;
}
.fiscalization-hero-illustration .hero-mock-card-row .-strong {
    font-weight: var(--font-weight-black);
    color: var(--color-black-100);
}

@media (max-width: 576px) {
    .fiscalization-hero-illustration { height: 280px; }
    .fiscalization-hero-illustration .hero-mock-card { width: 190px; padding: 16px; }
}
/* </editor-fold> */
/* Benefits row (Figma node 5863:7722) consolidated into hero-v4-stats — no page-specific CSS needed,
   hero-v4.css's .hero-v4-stat already matches the Figma spec exactly (icon 60x60 var(--color-grey-40)/16, card var(--color-grey-20)/16, gap 8px) */
/* <editor-fold desc="Processing block (Figma node 5908:2543) — 3 equal image+title+desc cards"> */
.fiscalization-v4 .processing-block .subtitle {
    max-width: 874px;
    margin: 0 auto;
    padding-top: 16px;
    color: var(--color-black-100);
}

.fiscalization-v4 .processing-block .processing-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 40px;
}

.fiscalization-v4 .processing-block .card {
    flex: 1 0 0;
    min-width: 300px;
    padding: 24px;
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
}
.fiscalization-v4 .processing-block .card .card-media {
    height: 220px;
    background: var(--color-white);
    border-radius: var(--radius-16);
    overflow: hidden;
}
.fiscalization-v4 .processing-block .card .card-media img { width: 100%; height: 100%; object-fit: contain; }
.fiscalization-v4 .processing-block .card .desc-wrapper { padding-top: 16px; }
.fiscalization-v4 .processing-block .card .card-title,
.fiscalization-v4 .processing-block .card .card-subtitle { margin: 0; color: var(--color-black-100); }
.fiscalization-v4 .processing-block .card .card-subtitle { padding-top: 8px; }

@media (max-width: 992px) {
    .fiscalization-v4 .processing-block .processing-container { padding-top: 30px; }
}
@media (max-width: 768px) {
    .fiscalization-v4 .processing-block .processing-container { flex-direction: column; }
    .fiscalization-v4 .processing-block .card { min-width: 0; }
}
@media (max-width: 576px) {
    .fiscalization-v4 .processing-block .card .card-media { height: 180px; }
}
/* </editor-fold> */
/* <editor-fold desc="Fiscalization benefits block (Figma node 5912:8963) — feature-card-block reused with the feature-card-* class convention; 4th card (automation) spans full width"> */
.fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 40px;
    margin-top: 40px;
    background: var(--color-grey-40);
    border-radius: var(--radius-24);
}
.fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
}
.fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card:last-child { grid-column: 1 / -1; }
.fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    background: var(--color-grey-40);
    border-radius: var(--radius-16);
    flex-shrink: 0;
}
.fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card .icon-wrapper img { width: 32px; height: 32px; }
.fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card .name { margin-bottom: 8px; }
.fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card .desc ul { margin: 0; padding-left: 20px; }

@media (max-width: 992px) {
    .fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card-grid {
        grid-template-columns: 1fr;
        padding: 24px;
        margin-top: 24px;
    }
    .fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card:last-child { grid-column: auto; }
}
@media (max-width: 576px) {
    .fiscalization-v4 .fiscalization-benefits-block .feature-card-block .feature-card-grid { padding: 16px; gap: 8px; }
}
/* </editor-fold> */
/* <editor-fold desc="How to connect block — hiw-steps ported verbatim from invoicing-v4's steps-overview-container pattern (Figma node 5869:9848)"> */
.fiscalization-v4 .how-connect-block .subtitle {
    padding-top: 16px;
    color: var(--color-black-100);
}

.fiscalization-v4 .how-connect-block .hiw-steps { display: flex; align-items: flex-start; gap: 40px; padding-top: 40px; }
.fiscalization-v4 .how-connect-block .step { position: relative; flex: 1; text-align: left; min-height: 100px; }
.fiscalization-v4 .how-connect-block .step:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 104px;
    width: calc(100% - 104px);
    height: 1px;
    background: var(--color-grey-60);
}
.fiscalization-v4 .how-connect-block .step-number {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    background: var(--color-grey-40);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-24);
    line-height: var(--line-height-30);
    color: var(--color-black-100);
}
/* Last step is always the "done" state — driven by CSS, not an ACF toggle (matches invoicing-v4/front-page-v4's steps-block) */
.fiscalization-v4 .how-connect-block .step:last-child .step-number {
    background: var(--color-green-20-light);
    color: transparent;
}
.fiscalization-v4 .how-connect-block .step:last-child .step-number:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    background: url(../images/ecommerce/check-ring.svg) center center no-repeat;
    background-size: contain;
}
.fiscalization-v4 .how-connect-block .step .name { padding-top: 0; color: var(--color-black-100); }
.fiscalization-v4 .how-connect-block .step .desc { padding-top: 8px; color: var(--color-black-100); }
.fiscalization-v4 .how-connect-block .step .desc a { color: #1dba57; }

.fiscalization-v4 .how-connect-block .btn-wrapper { padding-top: 40px; }

@media (max-width: 992px) {
    .fiscalization-v4 .how-connect-block .hiw-steps { padding-top: 32px; }
    .fiscalization-v4 .how-connect-block .btn-wrapper { padding-top: 32px; text-align: center; }
}
@media (max-width: 768px) {
    .fiscalization-v4 .how-connect-block .hiw-steps { flex-direction: column; gap: 8px; }
    .fiscalization-v4 .how-connect-block .step { padding-left: 76px; width: 100%; }
    .fiscalization-v4 .how-connect-block .step:after {
        top: 68px;
        left: 30px;
        width: 1px;
        height: calc(100% - 68px);
    }
    .fiscalization-v4 .how-connect-block .step:last-child:after { content: none; }
    .fiscalization-v4 .how-connect-block .step-number { position: absolute; top: 0; left: 0; width: 60px; height: 60px; margin-bottom: 0; font-size: var(--font-size-20); line-height: var(--line-height-26); }
    .fiscalization-v4 .how-connect-block .step:last-child .step-number:after { width: 24px; height: 24px; }
    .fiscalization-v4 .how-connect-block .step .name { font-size: var(--font-size-18); }
}
/* </editor-fold> */
/* <editor-fold desc="Cost block (Figma node 5901:2186) — price-hero tags positioned per Figma nodes 5908:8880 (desktop) / 5913:2203 (mobile)"> */
.fiscalization-v4 .cost-block .tile {
    padding-bottom: 40px;
    margin-top: 40px;
    background: var(--color-grey-20);
    border-radius: var(--radius-24);
    overflow: hidden;
}
.fiscalization-v4 .cost-block .price-hero {
    position: relative;
    height: 200px;
}
.fiscalization-v4 .cost-block .price-value {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24.3%;
    transform: translate(-50%, -50%);
}
.fiscalization-v4 .cost-block .price-value img { display: block; width: 100%; height: auto; }
.fiscalization-v4 .cost-block .money-tag { position: absolute; }
.fiscalization-v4 .cost-block .money-tag img { display: block; width: 100%; height: auto; }
.fiscalization-v4 .cost-block .money-tag.-left { left: 8.44%; top: 0px; width: 25%; }
.fiscalization-v4 .cost-block .money-tag.-right { right: 0%; top: 0px; width: 12.19%; }

.fiscalization-v4 .cost-block .cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 40px;
}
.fiscalization-v4 .cost-block .card {
    flex: 1 0 0;
    min-width: 240px;
    padding: 24px;
    background: var(--color-grey-40);
    border-radius: var(--radius-16);
}
.fiscalization-v4 .cost-block .card .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
}
.fiscalization-v4 .cost-block .card .icon-wrapper img { width: 32px; height: 32px; }
.fiscalization-v4 .cost-block .card .card-title,
.fiscalization-v4 .cost-block .card .card-desc { margin: 0; color: var(--color-black-100); }
.fiscalization-v4 .cost-block .card .card-title { margin-bottom: 8px; }

.fiscalization-v4 .cost-block .btn-wrapper {
    padding-top: 40px;
    text-align: center;
}
@media (max-width: 992px) {
    .fiscalization-v4 .cost-block .btn-wrapper { padding-top: 30px; }
}
@media (max-width: 768px) {
    .fiscalization-v4 .cost-block .tile { padding-bottom: 24px; }
    .fiscalization-v4 .cost-block .cards-container { flex-direction: column; padding: 0 24px; }
    .fiscalization-v4 .cost-block .card { min-width: 0; }
}
@media (max-width: 576px) {
    .fiscalization-v4 .cost-block .tile { margin-top: 30px; padding-bottom: 16px; }
    .fiscalization-v4 .cost-block .cards-container { padding: 0 16px; }
    .fiscalization-v4 .cost-block .price-hero { height: 140px; }
    .fiscalization-v4 .cost-block .price-value { width: 50%; }
    .fiscalization-v4 .cost-block .money-tag.-left { left: 2.33%; width: 38.72%; }
    .fiscalization-v4 .cost-block .money-tag.-right { top: 40px; width: 16.56%; }
}
/* </editor-fold> */
/* <editor-fold desc="Get guide block"> */
.fiscalization-v4 .get-guide-block .container {

}
.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%);
}
.fiscalization-v4 .get-guide-block .get-guide-container {
    position: relative;
    z-index: 1;
    max-width: 768px;
}
.fiscalization-v4 .get-guide-block .desc {
    padding-top: 16px;
    color: var(--color-black-100);
}
.fiscalization-v4 .get-guide-block .btn-wrapper { padding-top: 32px; }
.fiscalization-v4 .get-guide-block .img-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 412px;
}
.fiscalization-v4 .get-guide-block .img-wrapper,
.fiscalization-v4 .get-guide-block .img-wrapper img {
    width: 100%;
    height: 100%;
}
.fiscalization-v4 .get-guide-block .img-wrapper img { object-fit: contain; }

@media (max-width: 1300px) {
    .fiscalization-v4 .get-guide-block .get-guide-container { max-width: 480px; }
    .fiscalization-v4 .get-guide-block .img-container { width: 320px; }
}
@media (max-width: 992px) {
    .fiscalization-v4 .get-guide-block .get-guide-container { max-width: 340px; padding: 32px 24px; }
}
@media (max-width: 768px) {
    .fiscalization-v4 .get-guide-block .block-wrapper { min-height: 0; flex-direction: column; padding: 0 16px; }
    .fiscalization-v4 .get-guide-block .get-guide-container { max-width: 100%; text-align: center; padding: 0 }
    .fiscalization-v4 .get-guide-block .img-container { position: relative; margin-top: 32px; }
}
/* </editor-fold> */
/* <editor-fold desc="FAQ block"> */
.fiscalization-v4 .faq-block { background: var(--color-white); }
.fiscalization-v4 .faq-block .question-item.expanded .answer li::marker { color: var(--color-black-100); }
.fiscalization-v4 .faq-block .question-item.expanded .answer strong,
.fiscalization-v4 .faq-block .question-item.expanded .answer b {
    color: var(--color-black-100);
}
.fiscalization-v4 .faq-block .question-item .answer a { color: #1dba57; }
/* </editor-fold> */
/* <editor-fold desc="Потрібна допомога — CTA banner + popup, reuses the shared .need-support-block component (style.css)"> */
/* .block-wrapper/.icon-wrapper/.text styling lives in style.css.
   The #popup-need-support popup itself is unstyled here —
   .popup/.popup-top/.popup-container/.form-v3 are generic, global classes from style.css. */
/* </editor-fold> */
/* <editor-fold desc="POPUP | Get guide & Thank you — reuses the shared .popup-top/.get-guide-form/.popup-ty popup pattern (style.css), same as the consultation/individual-rate popups. Unstyled here on purpose."> */
/* </editor-fold> */