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

/* <editor-fold desc="Hero (block1)"> */
.fop-from-zero-v4 .hero-card {
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
    padding: 40px 40px 0;
    overflow: hidden;
}
.fop-from-zero-v4 .hero-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.fop-from-zero-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);
}
.fop-from-zero-v4 .hero-content .title { padding-top: 16px; }
.fop-from-zero-v4 .hero-content .desc { padding-top: 16px; }
.fop-from-zero-v4 .hero-content .btn-wrapper { padding-top: 32px; }

.fop-from-zero-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. */
.fop-from-zero-v4 .hero-mockup video {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
}

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

/* <editor-fold desc="Реєстрація ФОП (block2) — feature-card-block, 4-col grid, mobile slick-slider"> */
.fop-from-zero-v4 .cards-block .feature-card-block .subtitle { padding-top: 16px; }
.fop-from-zero-v4 .cards-block .feature-card-block .feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 24px;
}
.fop-from-zero-v4 .cards-block .feature-card-block .feature-card-grid.-cols-4 { grid-template-columns: repeat(4, 1fr); }
.fop-from-zero-v4 .cards-block .feature-card-block .feature-card {
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
    padding: 24px;
}
.fop-from-zero-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);
}
.fop-from-zero-v4 .cards-block .feature-card-block .feature-card .icon-wrapper img { width: 32px; height: 32px; transform: none; }
.fop-from-zero-v4 .cards-block .feature-card-block .feature-card .name { padding-top: 16px; text-align: left; }

@media (max-width: 992px) {
    .fop-from-zero-v4 .cards-block .feature-card-block .feature-card-grid.-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .fop-from-zero-v4 .cards-block .feature-card-block .feature-card-grid.slick-slider {
        display: block;
        grid-template-columns: none;
    }
    .fop-from-zero-v4 .cards-block .feature-card-block .feature-card-grid.slick-slider .feature-card { height: auto; margin: 0 8px; }
    .fop-from-zero-v4 .cards-block .feature-card-block .feature-card-grid.slick-slider .slick-track { display: flex; }
    .fop-from-zero-v4 .cards-block .slick-dots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 16px;
        padding: 8px;
        list-style: none;
    }
    .fop-from-zero-v4 .cards-block .slick-dots li { cursor: pointer; }
    .fop-from-zero-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;
    }
    .fop-from-zero-v4 .cards-block .slick-dots li.slick-active button { background: var(--color-green-100); }
}
/* </editor-fold> */

/* <editor-fold desc="Покроковий план (block3) — steps-overview pattern, verbatim from front-page-v4.css
   minus its homepage-only 'last step = done state' override, which guide2's Figma doesn't show"> */
.fop-from-zero-v4 .steps-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fop-from-zero-v4 .steps-overview-header .desc-wrapper { max-width: 593px; flex-shrink: 0; }
.fop-from-zero-v4 .steps-overview-header .subtitle { padding-top: 16px; color: var(--color-black-100); }
.fop-from-zero-v4 .steps-overview-header .img-wrapper {
    width: 100%;
    max-width: 630px;
    height: 320px;
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
    overflow: hidden;
    margin: 0 auto;
}
.fop-from-zero-v4 .steps-overview-header .img-wrapper img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }

.fop-from-zero-v4 .steps-overview-container {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding-top: 40px;
}
.fop-from-zero-v4 .step {
    position: relative;
    flex: 1;
    text-align: left;
    min-height: 100px;
}
.fop-from-zero-v4 .step:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 104px;
    width: calc(100% - 104px);
    height: 1px;
    background: var(--color-grey-60);
}
.fop-from-zero-v4 .step:last-child:after { content: none; }
.fop-from-zero-v4 .step-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    background: var(--color-grey-40);
    border-radius: 133.333px;
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-black);
    color: var(--color-black-100);
}
.fop-from-zero-v4 .step .name { padding-top: 0; color: var(--color-black-100); }
.fop-from-zero-v4 .step .desc { padding-top: 8px; color: var(--color-black-100); }

@media (max-width: 1180px) {
    .fop-from-zero-v4 .steps-overview-header { flex-direction: column; align-items: stretch; gap: 24px; text-align: center; }
    .fop-from-zero-v4 .steps-overview-header .desc-wrapper { max-width: none; }
    .fop-from-zero-v4 .steps-overview-container { padding-top: 24px; }
}
@media (max-width: 768px) {
    .fop-from-zero-v4 .steps-overview-header { text-align: center; }
    .fop-from-zero-v4 .steps-overview-header .subtitle { padding-top: 8px; }
    .fop-from-zero-v4 .steps-overview-header .img-wrapper { height: auto; border-radius: var(--radius-8); }
    .fop-from-zero-v4 .steps-overview-container { flex-direction: column; gap: 8px; }
    .fop-from-zero-v4 .step { padding-left: 76px; width: 100%; }
    .fop-from-zero-v4 .step:after {
        content: "";
        top: 68px;
        left: 30px;
        width: 1px;
        height: calc(100% - 68px);
    }
    .fop-from-zero-v4 .step:last-child:after { content: none; }
    .fop-from-zero-v4 .step-badge { position: absolute; top: 0; left: 0; width: 60px; height: 60px; margin-bottom: 0; font-size: var(--font-size-20); border-radius: var(--radius-100); }
    .fop-from-zero-v4 .step .name { font-size: var(--font-size-18); }
}
/* </editor-fold> */

/* <editor-fold desc="Бонуси (block4) — tinted-background feature-card variant, per-card gradient icon"> */
.fop-from-zero-v4 .bonuses-block .subtitle { padding-top: 16px; }
.fop-from-zero-v4 .bonuses-block .bonuses-container {
    display: flex;
    gap: 16px;
    background: var(--color-grey-40);
    border-radius: var(--radius-24);
    padding: 40px;
    margin-top: 24px;
}
.fop-from-zero-v4 .bonuses-block .bonus-card {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: var(--color-grey-20);
    border-radius: var(--radius-16);
    padding: 24px;
}
.fop-from-zero-v4 .bonuses-block .bonus-card .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-16);
}
.fop-from-zero-v4 .bonuses-block .bonus-card .icon-wrapper img { width: 32px; height: 32px; transform: none; }
.fop-from-zero-v4 .bonuses-block .bonus-card .desc { padding-top: 8px; }

@media (max-width: 768px) {
    .fop-from-zero-v4 .bonuses-block .bonuses-container { flex-direction: column; padding: 16px; }
}
/* </editor-fold> */

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

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

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