.circular-design-stage {
    padding: clamp(28px, 4vw, 64px) 24px;
}

.circular-guide,
.circular-steps,
.circular-case {
    width: min(947px, 100%);
}

.circular-guide__copy,
.circular-steps > p,
.circular-case__copy {
    color: #373737;
    font: 400 20px/30px var(--font-main);
    letter-spacing: 0;
}

.circular-guide__copy {
    width: min(798px, 100%);
    margin: 0 auto;
}

.circular-guide__copy p {
    margin: 0 0 28px;
}

.circular-guide__visual {
    position: relative;
    width: min(747px, 78vw);
    margin: 4px auto 0;
}

.circular-guide__booklet-link {
    display: block;
    color: inherit;
}

.circular-guide__booklet-link img {
    display: block;
    width: 100%;
    height: auto;
}

.circular-guide__booklet-link:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 6px;
}

.circular-guide__link {
    position: absolute;
    top: 20%;
    right: -30%;
    z-index: 3;
    width: 239px;
    height: 56px;
}

.circular-guide__link img {
    width: 100%;
    height: 100%;
}

.circular-steps {
    align-self: center;
}

.circular-steps > p {
    width: min(798px, 100%);
    margin: 0 auto 30px;
}

.circular-steps__list {
    width: min(798px, 100%);
    display: grid;
    gap: 10px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.circular-step {
    min-height: 70px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    border-radius: 20px;
    color: #fff;
    font: 600 18px/26px var(--font-main);
}

.circular-step__letter {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    font-size: 32px;
    line-height: 1;
}

.circular-step--a { color: #171717; background: #95efce; }
.circular-step--b { background: #59c2c9; }
.circular-step--c { background: #6094d2; }
.circular-step--d { background: #7954af; }
.circular-step--e { background: #2a2b5f; }

.circular-case {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(280px, 360px);
    align-items: center;
    justify-content: center;
    gap: 66px;
}

.circular-case__visual {
    position: relative;
    width: min(520px, 100%);
    aspect-ratio: 465 / 330;
    margin: 0;
}

.circular-case__frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.circular-case__screen {
    --concept-width: 316px;
    --concept-height: 215px;
    position: absolute;
    top: 4.5%;
    left: 3.2%;
    z-index: 1;
    width: 93.6%;
    height: 67.9%;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgb(42 43 95 / 0.08);
}

.circular-case__concept {
    /* Width and height describe ONE visible concept, not the full two-up PNG. */
    --concept-image-width: 316px;
    --concept-image-height: 215px;
    --concept-image-x: 0px;
    --concept-image-y: 0px;
    position: absolute;
    top: calc(50% + var(--concept-slide-y, 115%));
    left: 50%;
    width: min(var(--concept-width), calc(100% - 16px));
    height: auto;
    max-height: var(--concept-height);
    aspect-ratio: 316 / 215;
    overflow: hidden;
    background: #fff;
    transform: translate(-50%, -50%);
    will-change: top;
    transition: top var(--concept-slide-duration, 720ms) var(--motion-ease);
}

.circular-case__concept--initial { --concept-slide-y: 0%; }

.circular-case__concept img {
    position: absolute;
    top: calc(50% + var(--concept-image-y));
    /* Every source PNG contains two concepts side by side. */
    width: calc(var(--concept-image-width) + var(--concept-image-width));
    max-width: none;
    height: var(--concept-image-height);
    transform: translate(var(--concept-image-x), -50%);
}

.circular-case__concept--left img { left: 0; }
.circular-case__concept--right img { right: 0; }

/* ==========================================================
   SMART PILLBOX IMAGE TUNING
   - data-slide-step in index.html controls the display order.
   - image-width and image-height control one visible half of the two-up PNG.
   - image-x moves the source horizontally.
   - image-y moves the source vertically.
   These defaults are listed separately so every state is easy to adjust.
   ========================================================== */
[data-concept="refuse"] { --concept-image-width: 316px; --concept-image-height: 215px; --concept-image-x: 0px; --concept-image-y: 0px; }
[data-concept="rethink"] { --concept-image-width: 316px; --concept-image-height: 215px; --concept-image-x: 0px; --concept-image-y: 0px; }
[data-concept="reduce"] { --concept-image-width: 316px; --concept-image-height: 215px; --concept-image-x: 0px; --concept-image-y: 0px; }
[data-concept="reuse"] { --concept-image-width: 316px; --concept-image-height: 215px; --concept-image-x: 0px; --concept-image-y: 0px; }
[data-concept="repair"] { --concept-image-width: 316px; --concept-image-height: 215px; --concept-image-x: 0px; --concept-image-y: 0px; }
[data-concept="remanufacture"] { --concept-image-width: 316px; --concept-image-height: 215px; --concept-image-x: 0px; --concept-image-y: 0px; }
[data-concept="repurpose"] { --concept-image-width: 316px; --concept-image-height: 215px; --concept-image-x: 0px; --concept-image-y: 10px; }
[data-concept="recycle"] { --concept-image-width: 316px; --concept-image-height: 215px; --concept-image-x: 0px; --concept-image-y: 0px; }

.circular-case__copy p {
    margin: 0;
}

@media (max-width: 900px) {
    .circular-case {
        grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
        gap: 36px;
    }

    .circular-guide__link { right: -40px; }
}

@media (max-width: 700px) {
    .circular-design-stage { padding: 48px 20px; }

    .circular-guide__copy,
    .circular-steps > p,
    .circular-case__copy {
        font-size: 17px;
        line-height: 25px;
    }

    .circular-guide__copy p { margin-bottom: 20px; }
    .circular-guide__visual { width: min(100%, 540px); }

    .circular-guide__link {
        position: relative;
        inset: auto;
        margin: 14px auto 0;
        transform: none;
        will-change: auto;
    }

    .circular-step {
        min-height: 62px;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 14px;
        border-radius: 15px;
        font-size: 15px;
        line-height: 21px;
    }

    .circular-step__letter {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .circular-case {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .circular-case__visual { width: min(100%, 520px); margin: 0 auto; }
}

@media (max-height: 680px), (max-width: 700px), (prefers-reduced-motion: reduce) {
    .circular-guide-scene,
    .circular-steps-scene,
    .circular-case-scene {
        height: auto;
    }

    .circular-guide-scene .sticky-stage,
    .circular-steps-scene .sticky-stage,
    .circular-case-scene .sticky-stage {
        position: relative;
        top: auto;
        min-height: auto;
    }

    .circular-guide[data-scroll-enter],
    .circular-steps [data-scroll-enter] {
        opacity: 1;
        transform: none;
    }

    .circular-guide__link { will-change: auto; }

    .circular-case__visual { aspect-ratio: auto; }

    .circular-case__screen {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        display: grid;
        gap: 14px;
        overflow: visible;
        background: transparent;
    }

    .circular-case__frame { display: none; }

    .circular-case__concept {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 316 / 215;
        border-radius: 10px;
        background: #fff;
        transform: none;
        will-change: auto;
    }

    .circular-case__concept:first-child { display: none; }
}