/* ==========================================================================
   Marking
   ========================================================================== */


.marking {
    background-color: var(--color-gray-150);
    color: var(--color-gray-900);
}


/* ==========================================================================
   Layout
   ========================================================================== */

.marking__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;

    column-gap: clamp(
        var(--space-400),
        7.5vw,
        calc(var(--space-600) + var(--space-300))
    );
}


/* ==========================================================================
   Content
   ========================================================================== */

.marking__content {
    display: flex;
    flex-direction: column;

    gap: var(--space-300);

    max-width: 560px;
}

.marking__eyebrow {
    color: var(--color-text-accent);

    font-size: var(--font-size-150);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-heading);
    letter-spacing: 0.06em;
}

.marking__title {
    color: var(--color-gray-900);

    font-size: clamp(
        var(--font-size-600),
        calc(1.5rem + 0.8vw),
        var(--font-size-625)
    );
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}

.marking__description {
    color: var(--color-gray-600);

    font-size: var(--font-size-350);
    line-height: var(--line-height-body);
}

.marking__description strong {
    color: var(--color-gray-900);
}


/* ==========================================================================
   Note
   ========================================================================== */

.marking-note {
    display: flex;
    flex-direction: column;

    gap: var(--space-100);

    margin-top: var(--space-100);
    padding-left: var(--space-250);

    border-left: 3px solid var(--color-secondary);
}

.marking-note__title {
    color: var(--color-gray-900);

    font-size: var(--font-size-400);
    font-weight: var(--font-weight-550);
    line-height: var(--line-height-heading);
}

.marking-note__description {
    color: var(--color-gray-600);

    font-size: var(--font-size-250);
    line-height: var(--line-height-body);
}


/* ==========================================================================
   Process
   ========================================================================== */

.marking__process {
    position: relative;

    justify-self: center;

    width: min(100%, 620px);
    aspect-ratio: 1;
}

.marking__process::before,
.marking__process::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    aspect-ratio: 1;

    border-radius: 50%;

    pointer-events: none;
    transform: translate(-50%, -50%);
}

.marking__process::before {
    width: 54%;

    border: var(--border-width) solid rgb(from var(--color-secondary) r g b / 42%);
}

.marking__process::after {
    width: 42%;

    border: var(--border-width) dashed rgb(from var(--color-secondary) r g b / 34%);
}

/* ==========================================================================
   Process SVG & Animation
   ========================================================================== */

.marking-process__svg {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.marking__process.marking--has-svg::before,
.marking__process.marking--has-svg::after {
    display: none;
}

.marking-svg__track-base {
    fill: none;
    stroke: rgb(from var(--color-secondary) r g b / 20%);
    stroke-width: var(--flow-line-width);
    stroke-dasharray: 4 4;
}

.marking-svg__arc {
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: var(--flow-line-width);
    stroke-linecap: round;
}

.marking-svg__signal {
    fill: var(--signal-dot-color);

    filter: drop-shadow(0 0 6px var(--signal-dot-glow));
}

.marking-svg__signal-group {
    opacity: 0;

    transition: opacity var(--transition-fast) var(--ease);
}

.marking-svg__signal-halo {
    fill: var(--signal-dot-ring);
}

.marking-process__center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: var(--space-150);

    width: 152px;
    aspect-ratio: 1;
    padding: var(--space-200);

    border: var(--border-width) solid rgb(from var(--color-accent) r g b / 32%);
    border-radius: 50%;

    background-color: var(--color-primary);
    color: var(--color-white);

    transform: translate(-50%, -50%);
}

.marking-process__center-icon {
    display: grid;
    place-items: center;

    color: var(--color-accent);
}

.marking-process__center-icon svg {
    display: block;

    width: 36px;
    height: 36px;
}

.marking-process__center-label {
    max-width: 10ch;

    font-size: var(--font-size-200);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
    text-align: center;
}

.marking-process {
    position: absolute;
    inset: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.marking-process__step {
    position: absolute;
    z-index: 2;

    width: 68px;
    height: 68px;

    transform: translate(-50%, -50%);
}

.marking-process__step:nth-child(1) {
    top: 28.2%;
    left: 34%;
}

.marking-process__step:nth-child(2) {
    top: 28.2%;
    left: 66%;
}

.marking-process__step:nth-child(3) {
    top: 50%;
    left: 77%;
}

.marking-process__step:nth-child(4) {
    top: 71.8%;
    left: 66%;
}

.marking-process__step:nth-child(5) {
    top: 71.8%;
    left: 34%;
}

.marking-process__step:nth-child(6) {
    top: 50%;
    left: 23%;
}


.marking-process__icon {
    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;

    border: var(--border-width) solid var(--color-gray-250);
    border-radius: 50%;

    background-color: var(--color-white);
    color: var(--color-secondary);

    /*box-shadow: var(--shadow-sm);*/
}

.marking-process__icon svg {
    display: block;

    width: 30px;
    height: 30px;
}

.marking-process__content {
    position: absolute;

    display: flex;
    flex-direction: column;

    gap: var(--space-050);

    width: clamp(140px, 12vw, 160px);
}

.marking-process__step:nth-child(1) .marking-process__content,
.marking-process__step:nth-child(2) .marking-process__content {
    bottom: calc(100% + var(--space-250));
    left: 50%;

    align-items: center;

    text-align: center;
    transform: translateX(-50%);
}

.marking-process__step:nth-child(3) .marking-process__content {
    top: 50%;
    left: calc(100% + var(--space-200));

    align-items: flex-start;

    text-align: left;
    transform: translateY(-50%);
}

.marking-process__step:nth-child(4) .marking-process__content,
.marking-process__step:nth-child(5) .marking-process__content {
    top: calc(100% + var(--space-250));
    left: 50%;

    align-items: center;

    text-align: center;
    transform: translateX(-50%);
}

.marking-process__step:nth-child(6) .marking-process__content {
    top: 50%;
    right: calc(100% + var(--space-200));

    align-items: flex-end;

    text-align: right;
    transform: translateY(-50%);
}

.marking-process__title {
    color: var(--color-gray-900);

    font-size: var(--font-size-250);
    font-weight: var(--font-weight-550);
    line-height: var(--line-height-heading);
}

.marking-process__description {
    max-width: 14ch;

    color: var(--color-gray-500);

    font-size: var(--font-size-150);
    line-height: var(--line-height-heading);
}


/* ==========================================================================
   Terms
   ========================================================================== */

.marking__terms {
    display: flex;
    flex-direction: column;

    gap: var(--space-300);

    margin-top: clamp(
        var(--space-500),
        7vw,
        calc(var(--space-600) + var(--space-200))
    );
}

.marking__terms-title {
    color: var(--color-gray-900);

    font-size: var(--font-size-525);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}

.marking-terms {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 230px));
    justify-content: start;

    gap: var(--space-250);

    width: min(100%, 1020px);

}

.marking-term {
    display: flex;
    flex-direction: column;

    gap: var(--space-100);

    padding: var(--space-250) var(--space-300);

    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-md);

    background-color: var(--color-white);
}

.marking-term__title {
    display: flex;
    align-items: center;

    gap: var(--space-150);

    color: var(--color-gray-900);

    font-size: var(--font-size-400);
    font-weight: var(--font-weight-550);
    line-height: var(--line-height-heading);
}

.marking-term__icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;
    width: var(--space-450);
    height: var(--space-450);

    border-radius: var(--radius-md);

    background-color: color-mix(in srgb, var(--color-secondary) 12%, white);
    color: var(--color-secondary);
}

.marking-term__icon svg {
    display: block;

    width: var(--icon-lg);
    height: var(--icon-lg);
}

.marking-term__description {
    margin: 0;

    color: var(--color-gray-600);

    font-size: var(--font-size-250);
    line-height: var(--line-height-body);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {

    .marking__eyebrow {
        font-size: var(--font-size-100);
    }

    .marking__title {
        font-size: clamp(
            var(--font-size-500),
            calc(1rem + 1.25vw),
            var(--font-size-600)
        );
    }

    .marking__description {
        font-size: var(--font-size-300);
    }

    .marking__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

        column-gap: var(--space-500);
    }

    .marking__process {
        width: min(100%, 520px);
    }

    .marking-note__title {
        font-size: var(--font-size-300);
    }

    .marking-note__description {
        font-size: var(--font-size-200);
    }

    .marking-process__center-label {
        font-size: var(--font-size-150);
    }

    .marking-process__title {
        font-size: var(--font-size-250);
    }

    .marking-process__description {
        font-size: var(--font-size-150);
    }

    .marking-process__step {
        width: 60px;
        height: 60px;
    }

    .marking-process__icon {
        width: 60px;
        height: 60px;
    }

    .marking-process__content {
        width: clamp(136px, 12vw, 156px);
    }

    .marking-process__step:nth-child(3) {
        left: 77%;
    }

    .marking-process__step:nth-child(6) {
        left: 23%;
    }

    .marking-process__step:nth-child(3) .marking-process__content {
        left: calc(100% + var(--space-150));
    }

    .marking-process__step:nth-child(6) .marking-process__content {
        right: calc(100% + var(--space-150));
    }

    .marking__terms-title {
        font-size: var(--font-size-500);
    }

    .marking-term__title {
        font-size: var(--font-size-300);
    }

    .marking-term__description {
        font-size: var(--font-size-200);
    }

    .marking-terms {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        width: 100%;
    }

}

@media (max-width: 1023px) {

    .marking__inner {
        grid-template-columns: 1fr;
        align-items: start;

        row-gap: var(--space-500);
    }

    .marking__content {
        max-width: 760px;
    }

    .marking__description {
        font-size: var(--font-size-250);
    }

    .marking__process {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: var(--space-200);

        width: 100%;
        aspect-ratio: auto;

        transform: none;
    }

    .marking__process::before,
    .marking__process::after {
        display: none;
    }

    .marking-process__svg {
        display: none;
    }

    .marking-process__center {
        position: static;

        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        justify-content: start;

        gap: var(--space-250);

        width: 100%;
        min-height: 96px;
        aspect-ratio: auto;
        padding: var(--space-300);

        border-radius: var(--radius-md);

        transform: none;
    }

    .marking-process__center-icon svg {
        width: 32px;
        height: 32px;
    }

    .marking-process__center-label {
        max-width: none;

        font-size: var(--font-size-250);
        text-align: left;
    }

    .marking-process {
        position: static;

        display: grid;
        grid-template-columns: 1fr;

        gap: var(--space-200);

        width: 100%;
    }

    .marking-process__step:nth-child(n) {
        position: static;

        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: center;

        gap: var(--space-200);

        width: auto;
        height: auto;
        padding: var(--space-200);

        border: var(--border-width) solid var(--color-gray-200);
        border-radius: var(--radius-md);

        background-color: var(--color-white);

        transform: none;
    }

    .marking-process__icon {
        width: 56px;
        height: 56px;
    }

    .marking-process__step:nth-child(n) .marking-process__content {
        position: static;

        align-items: flex-start;

        width: auto;

        text-align: left;
        transform: none;
    }

    .marking-process__title {
        font-size: var(--font-size-200);
    }

    .marking-process__description {
        max-width: none;

        font-size: var(--font-size-150);
    }

    .marking--mobile-pending .marking-process__center,
    .marking--mobile-pending .marking-process__step {
        opacity: 0;
        transform: translateY(6px);
    }

    .marking--mobile-visible .marking-process__center,
    .marking--mobile-visible .marking-process__step {
        animation: marking-mobile-process-reveal 400ms var(--ease) both;
    }

    .marking--mobile-visible .marking-process__step:nth-child(1) {
        animation-delay: 180ms;
    }

    .marking--mobile-visible .marking-process__step:nth-child(2) {
        animation-delay: 260ms;
    }

    .marking--mobile-visible .marking-process__step:nth-child(3) {
        animation-delay: 340ms;
    }

    .marking--mobile-visible .marking-process__step:nth-child(4) {
        animation-delay: 420ms;
    }

    .marking--mobile-visible .marking-process__step:nth-child(5) {
        animation-delay: 500ms;
    }

    .marking--mobile-visible .marking-process__step:nth-child(6) {
        animation-delay: 580ms;
    }

    .marking-terms {
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100%, 280px), 1fr)
        );
    }

}


@keyframes marking-mobile-process-reveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ===========================================================================
   Marking card-title reveal
   ========================================================================== */

@media (min-width: 1024px) {

    .marking-terms--pending .marking-term__title {
        opacity: 0;
        transform: translateY(6px);
    }

    .marking-terms--visible .marking-term__title {
        animation: marking-term-title-reveal 600ms var(--ease) both;
    }

}


@keyframes marking-term-title-reveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@media (prefers-reduced-motion: reduce) {

    .marking-terms--pending .marking-term__title {
        opacity: 1;
        transform: none;
        animation: none;
    }

}


/* ===========================================================================
   Side-label fit (1024–1280 px)
   ========================================================================== */

@media (min-width: 1024px) {

    .marking-process__step:nth-child(3) .marking-process__content,
    .marking-process__step:nth-child(6) .marking-process__content {
        width: clamp(112px, 10vw, 128px);
    }

    .marking-process__step:nth-child(3) .marking-process__description,
    .marking-process__step:nth-child(6) .marking-process__description {
        max-width: min(14ch, 100%);
    }

    .marking-process__step:nth-child(3) .marking-process__content {
        left: calc(100% + var(--space-100));
    }

    .marking-process__step:nth-child(6) .marking-process__content {
        right: calc(100% + var(--space-100));
    }

}