/** Balansulin palette — sampled from Figma Ic2XN57WVdveDOm6pw2zBE **/

:root {
    --primary-yellow: #F0F0F0;
    --accent-green: #83BA57;
    --accent-green-border: #83BA57;
    --accent-green-dark: #7BA95B;
    --accent-green-soft: #F0F7EA;
    --big-button-gradient: linear-gradient(90deg, #FFCE90 0%, #FFB07F 100%);
}

#start .section__item.yellow {
    background: #F0F0F0;
}

.big-button {
    background: var(--big-button-gradient);
}

.big-button.black {
    background: linear-gradient(90deg, #FFF 0%, #DCECFF 100%);
}

#start h1 {
    color: var(--accent-green-dark);
}

#start .selected {
    -webkit-text-fill-color: var(--accent-green-dark);
}

.selected {
    background: var(--accent-green-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* effects: 3 cards top row + 2 wide bottom (Figma layout) */
@media (min-width: 1025px) {
    #effects .section__inner-container:not(.top) > .section__item.card-col:nth-child(-n+3) {
        max-width: calc((100% - 48px) / 3);
    }
}

/* review 2026-07-15 (Anastasiya M) */

/* 1. hero (desktop): packshot stretches to the same height as the order form */
@media (min-width: 1281px) {
    #start .section__main-container .section__inner-container:not(.top) {
        align-items: stretch;
    }

    #start .product-image-1 {
        align-self: stretch;
        height: auto;
        object-fit: contain;
    }
}

/* 2. how/effects photos (tablet/mobile): natural aspect ratio — the stock
   max-height + object-fit:cover cropped near-square photos to an unreadable slice */
@media (max-width: 1280px) {
    #how .section__image,
    #effects .section__image {
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center;
    }
}

/* 3. composition packshot: 300px tall on tablet/mobile */
@media (max-width: 1024px) {
    #composition .section__image.big-width {
        max-height: 300px;
    }
}