/*
 * HOME-LANDING-R1-260806
 * One landing-only owner layered over mobile-card-base.css.
 * Product preview content keeps its own invitation typography and styles.
 */

.mc-landing {
    --mc-ink: #181817;
    --mc-text: #66635e;
    --mc-muted: #66635e;
    --mc-line: #ddd9d2;
    --mc-surface: #fff;
    --mc-surface-alt: #fff;
    --mc-product-stage: #f7f5f1;
    --mc-paper: var(--mc-surface);
    --mc-cloud: var(--mc-surface-alt);
    --mc-white: #fff;
    --mc-choice: #25282d;
    --mc-focus: #25282d;
    --mc-cta: #1a1a18;
    --mc-cta-hover: #181817;
    --mc-admin-status: #1f5fa8;
    color: var(--mc-text);
    background: var(--mc-surface);
}

/* HOME-LANDING-FUNCTION-EDUCATION-260907-01
   기능 구성은 편집기가 소유하고, 랜딩은 실제 하객 화면으로 기능을 설명한다. */
body .mc-landing .mc-feature-education {
    padding: 96px 0;
    background: var(--bj-charcoal, #1a1a18);
    color: #fff;
}

body .mc-landing .mc-feature-education__inner {
    width: min(var(--bj-content-max, 1000px), calc(100% - 48px));
    margin: 0 auto;
}

body .mc-landing .mc-feature-education__head {
    max-width: 720px;
    margin-bottom: 52px;
}

body .mc-landing .mc-feature-education__head .mc-r1-kicker {
    color: rgba(255, 255, 255, .58);
}

body .mc-landing .mc-feature-education__head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.18;
    letter-spacing: -.045em;
}

body .mc-landing .mc-feature-education__head > p:last-child {
    max-width: 650px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .68);
    font-size: var(--bj-type-body, 16px);
    line-height: var(--bj-type-body-line, 1.6);
}

body .mc-landing .mc-feature-stories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    list-style: none;
}

body .mc-landing .mc-feature-story {
    display: grid;
    grid-template-columns: minmax(116px, 154px) minmax(0, 1fr);
    min-width: 0;
    padding: 36px 28px 36px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    align-items: center;
    gap: 28px;
}

body .mc-landing .mc-feature-story:nth-child(even) {
    padding-right: 0;
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

body .mc-landing .mc-feature-story__visual {
    overflow: hidden;
    width: 100%;
    margin: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

body .mc-landing .mc-feature-story__visual img {
    display: block;
    width: 100%;
    height: auto;
}

body .mc-landing .mc-feature-story__copy > span {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

body .mc-landing .mc-feature-story__copy h3 {
    margin: 0;
    color: #fff;
    font-size: var(--bj-type-subsection, 20px);
    line-height: 1.45;
}

body .mc-landing .mc-feature-story__copy > p {
    margin: 12px 0 18px;
    color: rgba(255, 255, 255, .66);
    font-size: 14px;
    line-height: 1.65;
}

body .mc-landing .mc-feature-story__copy ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 7px 12px;
    list-style: none;
}

body .mc-landing .mc-feature-story__copy li {
    position: relative;
    padding-left: 10px;
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    line-height: 1.5;
}

body .mc-landing .mc-feature-story__copy li::before {
    position: absolute;
    top: .68em;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .48);
    content: '';
}

body .mc-landing .mc-feature-editor-note {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    align-items: start;
    gap: 24px;
}

body .mc-landing .mc-feature-editor-note > span {
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

body .mc-landing .mc-feature-editor-note h3 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.4;
}

body .mc-landing .mc-feature-editor-note p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .66);
    font-size: 15px;
    line-height: 1.65;
}

@media (max-width: 1023px) {
    body .mc-landing .mc-mobile-step-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .mc-landing .mc-feature-education {
        padding: var(--mc-r2-section-y, 80px) 0;
    }

    body .mc-landing .mc-feature-education__inner {
        width: calc(100% - (2 * var(--mc-r2-gutter, 20px)));
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    body .mc-landing .mc-feature-education {
        padding: 64px 0;
    }

    body .mc-landing .mc-feature-education__head {
        margin-bottom: 32px;
    }

    body .mc-landing .mc-feature-education__head h2 {
        font-size: 30px;
        line-height: 1.24;
    }

    body .mc-landing .mc-feature-education__head > p:last-child {
        margin-top: 16px;
        font-size: 15px;
    }

    body .mc-landing .mc-feature-stories {
        grid-template-columns: 1fr;
    }

    body .mc-landing .mc-feature-story,
    body .mc-landing .mc-feature-story:nth-child(even) {
        grid-template-columns: 112px minmax(0, 1fr);
        padding: 28px 0;
        border-left: 0;
        gap: 20px;
    }

    body .mc-landing .mc-feature-story__copy > p {
        margin: 8px 0 14px;
        font-size: 13px;
        line-height: 1.6;
    }

    body .mc-landing .mc-feature-story__copy ul {
        gap: 5px 9px;
    }

    body .mc-landing .mc-feature-story__copy li {
        font-size: 12px;
    }

    body .mc-landing .mc-feature-editor-note {
        grid-template-columns: 1fr;
        margin-top: 32px;
        padding-top: 28px;
        gap: 10px;
    }

    body .mc-landing .mc-feature-editor-note h3 {
        font-size: 20px;
    }

    body .mc-landing .mc-feature-editor-note p {
        font-size: 14px;
    }
}

@media (max-width: 359px) {
    body .mc-landing .mc-feature-story,
    body .mc-landing .mc-feature-story:nth-child(even) {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 16px;
    }
}

/* R15 — 색상 변경 가능한 장식을 카드 안에서 바로 알린다. */
body .mc-landing .mc-custom-visuals button > small {
    display: block;
    margin-top: 2px;
    color: var(--bj-muted, #66635e);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

/* R8 — Single Style Deck: one hierarchy for mood and detail controls. */
body .mc-landing .mc-style-deck {
    overflow: hidden;
    border-top: 1px solid #cbc7c0;
    border-bottom: 1px solid #cbc7c0;
}

body .mc-landing .mc-style-deck__label,
body .mc-landing .mc-style-customize__head {
    display: flex;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 2px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

body .mc-landing .mc-style-deck__label strong,
body .mc-landing .mc-style-customize__head > strong {
    color: #242220;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.015em;
}

body .mc-landing .mc-style-deck__label span {
    color: #8a857e;
    font-size: 12px;
}

body .mc-landing .mc-style-composer__styles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #e1ded8;
}

body .mc-landing .mc-style-option,
body .mc-landing .mc-style-option:hover,
body .mc-landing .mc-style-option.is-selected {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 64px;
    padding: 0 4px;
    border: 0;
    border-right: 1px solid #e1ded8;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

body .mc-landing .mc-style-option:last-child { border-right: 0; }
body .mc-landing .mc-style-option:hover { background: rgba(255, 255, 255, .52); }
body .mc-landing .mc-style-option.is-selected { background: #fff; }
body .mc-landing .mc-style-option > strong { font-size: 13px; font-weight: 600; }
body .mc-landing .mc-style-option__check {
    width: 17px;
    height: 17px;
    border: 1px solid #aaa59e;
    border-radius: 50%;
    font-size: 9px;
    flex: 0 0 17px;
}

body .mc-landing .mc-style-option.is-selected .mc-style-option__check {
    border-color: #242220;
    background: #242220;
    color: #fff;
}

body .mc-landing .mc-style-composer__style-description {
    display: flex;
    min-height: 48px;
    margin: 0;
    padding: 0 2px;
    border-top: 1px solid #e1ded8;
    border-bottom: 0;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

body .mc-landing .mc-style-composer__style-description strong {
    flex: 0 0 auto;
    font-size: 12px;
}

body .mc-landing .mc-style-customize {
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #cbc7c0;
    border-radius: 0;
    background: transparent;
}

body .mc-landing .mc-style-customize__head {
    min-height: 52px;
    padding-right: 2px;
    padding-left: 2px;
}

body .mc-landing .mc-style-customize__state {
    min-height: 44px;
    font-size: 11px;
}

body .mc-landing .mc-style-customize__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 48px;
    border-top: 1px solid #e1ded8;
    border-bottom: 1px solid #cbc7c0;
}

body .mc-landing .mc-style-customize__tabs button {
    min-height: 48px;
    border: 0;
    background: transparent;
    font-size: 13px;
}

body .mc-landing .mc-style-customize__tabs button[aria-selected="true"] {
    background: transparent;
    color: #242220;
}

body .mc-landing .mc-style-customize__tabs button[aria-selected="true"]::after {
    right: 18px;
    bottom: -1px;
    left: 18px;
    height: 2px;
}

body .mc-landing .mc-style-customize__body {
    min-height: 146px;
    padding: 16px 0 14px;
    background: transparent;
}

body .mc-landing .mc-style-customize__panel > p {
    margin-bottom: 12px;
    font-size: 12px;
}

body .mc-landing .mc-custom-inline { gap: 8px; }
body .mc-landing .mc-custom-inline button {
    min-height: 60px;
    border-color: #d5d1ca;
    border-radius: 4px;
    background: rgba(255,255,255,.68);
}

body .mc-landing .mc-custom-visuals {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

body .mc-landing .mc-custom-visuals button,
body .mc-landing .mc-custom-visuals--background button {
    min-height: 92px;
    border-color: #d5d1ca;
    border-radius: 4px;
    background: rgba(255,255,255,.68);
}

body .mc-landing .mc-custom-inline button.is-active,
body .mc-landing .mc-custom-visuals button.is-active {
    border-color: #242220;
    box-shadow: inset 0 0 0 1px #242220;
    background: #fff;
}

body .mc-landing .mc-style-composer__status { min-height: 20px; margin: 14px 0 0; }
body .mc-landing .mc-style-composer__summary { min-height: 22px; margin: 4px 0 0; color: #242220; font-size: 13px; font-weight: 650; }

@media (max-width: 860px) {
    body .mc-landing .mc-style-composer__controls,
    body .mc-landing .mc-style-composer__controls > *,
    body .mc-landing .mc-style-deck,
    body .mc-landing .mc-style-customize { width: 100% !important; max-width: none !important; }
    body .mc-landing .mc-style-deck__label,
    body .mc-landing .mc-style-customize__head { min-height: 50px; }
    body .mc-landing .mc-style-deck__label span { display: none; }
    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-option:hover,
    body .mc-landing .mc-style-option.is-selected {
        min-height: 54px;
        padding: 0 2px;
        gap: 4px;
    }
    body .mc-landing .mc-style-option > strong { font-size: 11px; }
    body .mc-landing .mc-style-option__check { width: 15px; height: 15px; flex-basis: 15px; }
    body .mc-landing .mc-style-composer__style-description { min-height: 46px; }
    body .mc-landing .mc-style-customize__body { min-height: 164px; padding: 14px 0 12px; }
    body .mc-landing .mc-custom-visuals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    body .mc-landing .mc-custom-visuals button,
    body .mc-landing .mc-custom-visuals--background button { min-height: 82px; }
}

@media (min-width: 360px) and (max-width: 860px) and (min-height: 700px) and (orientation: portrait) {
    body .mc-landing .mc-style-composer__workspace { gap: 28px; }
    body .mc-landing .mc-style-composer__preview {
        position: sticky;
        top: 76px;
        z-index: 6;
        align-self: center;
        padding: 8px;
        border: 1px solid #d4d1cb;
        border-radius: 22px;
        background: rgba(247,246,243,.96);
        box-shadow: 0 12px 32px rgba(31,29,24,.11);
        backdrop-filter: blur(12px);
    }
    body .mc-landing .mc-style-composer__phone { width: 100%; height: min(220px, 28vh); border-radius: 17px; box-shadow: none; }
    body .mc-landing .mc-style-composer__fallback,
    body .mc-landing .mc-style-composer__mount { border-radius: 11px; }
    body .mc-landing .mc-style-composer__mount .ed-preview__frame { overflow: hidden !important; pointer-events: none; }
    body .mc-landing .mc-style-composer__identity,
    body .mc-landing .mc-style-composer__anchors { display: none; }
    body .mc-landing .mc-style-composer__full { min-height: 44px; margin: 2px 0 0; }
}

@media (max-width: 359px), (max-height: 699px), (orientation: landscape) {
    body .mc-landing .mc-style-composer__preview { position: static; }
}

.mc-landing .mc-section h1,
.mc-landing .mc-section h2,
.mc-landing .mc-section h3,
.mc-landing .mc-section p {
    word-break: keep-all;
}

.mc-landing .mc-section h1,
.mc-landing .mc-section h2 {
    color: var(--mc-ink);
    letter-spacing: -.045em;
}

.mc-landing button,
.mc-landing a {
    -webkit-tap-highlight-color: transparent;
}

.mc-entry-ver,
.mc-upgrade-bubble {
    margin-top: 8px;
    font-size: 12px;
}

.mc-entry-ver button,
.mc-upgrade-bubble button {
    border: 0;
    background: transparent;
    color: var(--mc-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Hero: preserve the original stage and crop. */
.mc-hero {
    min-height: clamp(640px, calc(100vh - 138px), 760px);
}

.mc-hero__copy {
    top: clamp(44px, 5.5vh, 64px);
}

.mc-hero__copy h1 {
    font-size: clamp(32px, 2.45vw, 36px);
    font-weight: 600;
    line-height: 1.24;
}

.mc-hero__copy > p {
    margin-top: 16px;
    color: var(--mc-muted);
    font-size: 15px;
    line-height: 1.7;
}

.mc-hero__cta {
    margin-top: 20px;
}

.mc-hero__cta .mc-landing__start {
    width: min(300px, calc(100vw - 40px));
    min-height: 48px;
    border-radius: 0;
    background: var(--mc-cta);
    color: var(--mc-white);
    font-size: 14px;
}

.mc-hero__cta .mc-landing__start:hover { background: var(--mc-cta-hover); }

/* Shared section rhythm. */
.mc-editor-proof,
.mc-benefits,
.mc-feature-summary {
    padding: 72px 0;
}

.mc-build-layout,
.mc-benefits__inner,
.mc-final-features,
.mc-final-preview__head,
.mc-final-preview__workspace {
    width: min(1000px, calc(100% - 64px));
    margin-inline: auto;
}

.mc-build-copy > span,
.mc-benefits__heading > span,
.mc-final-features__copy > span,
.mc-final-preview__head > span {
    display: block;
    margin-bottom: 12px;
    color: var(--mc-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.mc-build-copy h2,
.mc-benefits__heading h2,
.mc-final-features__copy h2,
.mc-final-preview__head h2 {
    margin: 0;
    font-size: clamp(27px, 2.15vw, 32px);
    font-weight: 600;
    line-height: 1.34;
}

.mc-build-copy > p,
.mc-benefits__heading > p,
.mc-final-features__copy > p,
.mc-final-preview__head > p {
    margin: 16px 0 0;
    color: var(--mc-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* 1. Editing proof: the same content, finished three different ways. */
.mc-editor-proof {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 52%),
        var(--mc-surface);
}

.mc-build-layout {
    display: block;
}

.mc-build-copy {
    width: min(620px, 100%);
    margin-inline: auto;
    text-align: center;
}

.mc-build-lookbook {
    position: relative;
    width: min(560px, 100%);
    height: 628px;
    margin: 42px auto 0;
}

.mc-build-sheet {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 318px;
    padding: 8px;
    margin: 0;
    border: 1px solid rgba(38, 56, 67, .07);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 22px 54px rgba(29, 48, 60, .11);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px) scale(.985);
    transition:
        opacity .48s ease,
        transform .62s cubic-bezier(.2, .7, .2, 1),
        visibility 0s linear .48s;
}

.mc-build-sheet.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    transition-delay: 0s;
}

.mc-build-sheet img {
    display: block;
    width: 100%;
    height: 540px;
    object-fit: cover;
    object-position: top center;
    background: var(--mc-white);
}

.mc-build-switcher {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 4;
    display: flex;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(38, 56, 67, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 26px rgba(29, 48, 60, .09);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}

.mc-build-switcher button {
    width: 44px;
    height: 56px;
    overflow: hidden;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--mc-white);
    cursor: pointer;
    opacity: .62;
    transition: border-color .2s ease, opacity .2s ease, transform .2s ease;
}

.mc-build-switcher button:hover,
.mc-build-switcher button:focus-visible { opacity: 1; }
.mc-build-switcher button:focus-visible { outline: 2px solid var(--mc-focus); outline-offset: 2px; }
.mc-build-switcher button[aria-pressed="true"] {
    border-color: var(--mc-choice);
    opacity: 1;
    transform: translateY(-2px);
}
.mc-build-switcher img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}


/* 2. Paper/mobile continuity. */
.mc-benefits {
    background: var(--mc-cloud);
}

.mc-benefits__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
    grid-template-areas:
        "visual heading"
        "visual cards";
    gap: 26px 64px;
    align-items: center;
}

.mc-benefits__heading {
    grid-area: heading;
    text-align: left;
}

.mc-benefits__image {
    grid-area: visual;
    margin: 0;
}

.mc-benefits__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.mc-benefits__cards {
    grid-area: cards;
    border-top: 1px solid rgba(29, 48, 60, .16);
}

.mc-benefits__cards > div {
    position: relative;
    padding: 15px 0 15px 28px;
    border-bottom: 1px solid rgba(29, 48, 60, .16);
}

.mc-benefits__cards > div > span {
    position: absolute;
    top: 18px;
    left: 0;
    display: grid;
    width: 18px;
    height: 18px;
    border: 1px solid var(--mc-text);
    border-radius: 50%;
    background: none;
    place-items: center;
}

.mc-benefits__cards > div > span::after {
    content: "";
    width: 6px;
    height: 3px;
    margin-top: -2px;
    border-right: 1px solid var(--mc-text);
    border-bottom: 1px solid var(--mc-text);
    transform: rotate(45deg);
}

.mc-benefits__cards strong {
    display: block;
    color: var(--mc-ink);
    font-size: 15px;
    line-height: 1.5;
}

.mc-benefits__cards p {
    margin: 5px 0 0;
    color: var(--mc-muted);
    font-size: 13px;
    line-height: 1.65;
}

/* 3. Feature inventory: complete but deliberately compact. */
.mc-feature-summary {
    background: var(--mc-white);
}

.mc-final-features {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.mc-final-features__copy {
    position: sticky;
    top: 28px;
    text-align: left;
}

.mc-final-features__list {
    border-top: 1px solid var(--mc-line);
}

.mc-final-features__list details {
    border-bottom: 1px solid var(--mc-line);
}

.mc-final-features__list summary {
    display: grid;
    min-height: 62px;
    grid-template-columns: 44px 170px 1fr;
    align-items: center;
    color: var(--mc-ink);
    list-style: none;
    cursor: pointer;
}

.mc-final-features__list summary::-webkit-details-marker { display: none; }

.mc-final-features__list summary b {
    color: var(--mc-muted);
    font-size: 12px;
    font-weight: 500;
}

.mc-final-features__list summary span {
    font-size: 15px;
    font-weight: 700;
}

.mc-final-features__list details > p {
    margin: -42px 0 0 214px;
    padding: 0 0 20px;
    color: var(--mc-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* 4. Finale: the actual preview is the main character. */
.mc-final-preview {
    position: relative;
    min-height: 900px;
    padding: 80px 0 56px;
    overflow: clip;
    /* Keep the finale distinct through composition, not a separate color system. */
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .94) 0, rgba(255, 255, 255, 0) 36%),
        var(--mc-surface-alt);
}

.mc-final-preview__head {
    margin-bottom: 36px;
    text-align: center;
}

.mc-final-preview__workspace,
body.mc-rail-open .mc-final-preview__workspace,
body.mc-rail-collapsed .mc-final-preview__workspace {
    display: grid;
    grid-template-columns: 375px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.mc-preview-canvas,
.mc-skin-rail {
    min-width: 0;
    height: 812px;
    min-height: 812px;
    border-radius: 0;
    background: var(--mc-white);
    box-shadow: none;
}

.mc-preview-canvas {
    width: 375px;
    overflow: hidden;
    border: 1px solid var(--mc-line);
    border-radius: 22px;
    background: var(--mc-surface);
    box-shadow: 0 18px 48px rgba(29, 48, 60, .09);
}

.mc-preview__stage {
    width: 375px;
    height: 812px;
}

.mc-preview-phone__frame {
    width: 100%;
    height: 100%;
}

.mc-preview__stage {
    display: grid;
    place-items: center;
}

.mc-preview-phone {
    position: relative;
    width: 375px;
    max-width: 100%;
    height: 812px;
    overflow: hidden;
    border: 0;
    border-radius: 21px;
    background: #fff;
    box-shadow: none;
}

.mc-preview-phone::before,
.mc-preview-phone__brand {
    display: none;
}

.mc-preview-phone__cover,
.mc-preview-phone__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--mc-muted);
    text-align: center;
}

.mc-preview-phone__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-preview-phone__cover span,
.mc-preview-phone__brand {
    display: none;
}

.mc-preview-phone__frame iframe,
.mc-mobile-preview-mount iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.mc-preview-color-rail {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: -50px;
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--mc-line);
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    transform: translateY(-50%);
}

.mc-preview-color-rail button {
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid var(--mc-line);
    border-radius: 50%;
    background: var(--mc-white);
    place-items: center;
}

.mc-preview-color-rail__swatch {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid var(--mc-line);
    border-radius: 50%;
}

.mc-preview-color-rail button:focus-visible,
.mc-preview-color-rail button[aria-pressed="true"] {
    outline: 2px solid var(--mc-focus);
    outline-offset: 2px;
}

.mc-skin-rail {
    position: relative;
    inset: auto;
    display: grid;
    width: auto;
    max-width: none;
    border: 1px solid var(--mc-line);
    border-radius: 22px;
    grid-template-rows: minmax(0, 1fr) auto;
    transform: none;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(29, 48, 60, .09);
}

.mc-skin-rail__inner {
    display: grid;
    min-height: 0;
    height: auto;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    background: var(--mc-surface-alt);
    box-shadow: none;
}

.mc-skin-rail__menu,
body.mc-rail-open .mc-skin-rail__menu,
body.mc-rail-collapsed .mc-skin-rail__menu,
body.mc-list-docked .mc-skin-rail__menu {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 20px 24px 0;
    border-bottom: 1px solid var(--mc-line);
    background: var(--mc-white);
    overflow: visible;
}

.mc-catalog-moods__label {
    display: block;
    margin-bottom: 10px;
    color: var(--mc-ink);
    font-size: 12px;
}

.mc-catalog-moods__options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.mc-catalog-mood {
    display: flex;
    min-width: 0;
    min-height: 44px;
    padding: 0 7px;
    border: 1px solid var(--mc-line);
    border-radius: 22px;
    background: #fff;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--mc-text);
    font-size: 12px;
    cursor: pointer;
}

.mc-catalog-mood i {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mc-mood-color);
}

.mc-catalog-mood.is-active {
    border-color: var(--mc-choice);
    color: var(--mc-ink);
    font-weight: 700;
}

.mc-catalog-toolbar {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
}

.mc-skin-count {
    margin: 0;
    color: var(--mc-muted);
    font-size: 12px;
}

.mc-skin-count strong { color: var(--mc-ink); }

.mc-skin-count [data-mc-filter-reset] {
    min-height: 44px;
    margin-left: 8px;
    border: 0;
    background: transparent;
    color: var(--mc-text);
    text-decoration: underline;
}

.mc-catalog-filter-toggle {
    display: inline-flex;
    min-width: 72px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--mc-line);
    border-radius: 8px;
    background: #fff;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--mc-text);
    font-size: 12px;
}

.mc-catalog-filter-toggle svg {
    width: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

.mc-catalog-filter-panel {
    padding: 4px 0 14px;
}

.mc-landing .skin-filter__row {
    display: grid;
    min-width: 0;
    margin-top: 9px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
}

.mc-landing .skin-filter__label {
    color: var(--mc-muted);
    font-size: 11px;
}

.mc-landing .skin-filter__chips {
    display: flex;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mc-landing .skin-filter__chips::-webkit-scrollbar { display: none; }

.mc-landing .skin-fchip {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mc-line);
    border-radius: 18px;
    background: #fff;
    color: var(--mc-text);
    font-size: 11px;
}

.mc-landing .skin-fchip.is-on {
    border-color: var(--mc-choice);
    color: var(--mc-ink);
    font-weight: 700;
}

.mc-landing .skin-fchip--color {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 11px;
    border: 0;
}

.mc-landing .skin-fchip--color .skin-fchip__sw {
    display: block;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(29,48,60,.12);
    border-radius: 50%;
}

.mc-landing .skin-fchip--color.is-on .skin-fchip__sw {
    outline: 1px solid var(--mc-choice);
    outline-offset: 3px;
}

.mc-skin-rail__list,
body.mc-rail-open .mc-skin-rail__list,
body.mc-rail-collapsed .mc-skin-rail__list,
body.mc-list-docked .mc-skin-rail__list {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    padding: 20px 24px 24px;
    background: var(--mc-surface-alt);
    overflow-y: auto;
}

.mc-skin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 18px 14px;
}

.mc-skin-card {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.mc-skin-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4.65;
    border: 1px solid var(--mc-line);
    background: var(--mc-surface);
}

.mc-skin-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-skin-card.is-selected .mc-skin-thumb {
    border-color: var(--mc-choice);
}

.mc-skin-card.is-selected .mc-skin-thumb::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    place-items: center;
    background: var(--mc-ink);
    color: #fff;
    font-size: 12px;
}

.mc-skin-meta {
    display: block;
    min-height: 22px;
    padding-top: 6px;
}

.mc-badge {
    color: var(--mc-muted);
    font-size: 11px;
}

.mc-skin-card-variants {
    display: flex;
    gap: 8px;
    padding: 8px 0 2px;
}

.mc-skin-card-variants button {
    width: 26px;
    height: 26px;
    padding: 3px;
    border: 1px solid var(--mc-line);
    border-radius: 50%;
    background: #fff;
}

.mc-gallery-more {
    padding: 20px 0 0;
}

.mc-gallery-more > button {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--mc-line);
    background: var(--mc-surface);
    color: var(--mc-ink);
    font-size: 13px;
    font-weight: 600;
}

.mc-gallery-more p {
    margin: 8px 0 0;
    color: var(--mc-muted);
    font-size: 11px;
    text-align: center;
}

.mc-final-preview__cta {
    position: static;
    z-index: 8;
    display: flex;
    min-height: 64px;
    width: 100%;
    margin-left: 0;
    padding: 10px 14px 10px 24px;
    border: 0;
    border-top: 1px solid var(--mc-line);
    border-radius: 0;
    background: var(--mc-surface);
    box-shadow: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mc-final-preview__cta .mc-landing__start {
    display: inline-flex;
    width: auto;
    min-width: 190px;
    min-height: 48px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    background: var(--mc-cta);
    color: var(--mc-white);
    font-size: 13px;
    font-weight: 700;
}

.mc-final-preview__cta .mc-landing__start:hover { background: var(--mc-cta-hover); }

.mc-final-preview__cta small {
    order: -1;
    margin-right: auto;
    color: var(--mc-text);
    font-size: 13px;
    line-height: 1.5;
}

@media (min-width: 861px) {
    body.mc-rail-open .mc-landing,
    body.mc-rail-collapsed .mc-landing {
        padding-right: 0;
        transition: none;
    }
}

/* Filter rows share one label and control grid instead of shrink-wrapping. */
.mc-landing .mc-catalog-filter-panel .skin-filter {
    display: grid !important;
    width: 100%;
    min-width: 0;
    gap: 10px;
}

.mc-landing .mc-catalog-filter-panel .skin-filter__row {
    display: grid;
    width: 100%;
    min-width: 0;
    margin: 0;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
}

.mc-landing .mc-catalog-filter-panel .skin-filter__label {
    width: 48px;
    text-align: left;
}

.mc-landing .mc-catalog-filter-panel .skin-filter__chips {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
    overflow: visible;
}

@media (max-width: 600px) {
    .mc-landing .mc-catalog-filter-panel .skin-filter__row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 7px;
    }

    .mc-landing .mc-catalog-filter-panel .skin-filter__label { width: auto; }
}

.mc-rail-invite {
    position: fixed;
    z-index: 120;
    top: auto;
    right: 0;
    bottom: 24px;
    left: 0;
    display: flex;
    width: 176px;
    height: 44px;
    margin: 0 auto;
    padding: 4px 5px 4px 15px;
    gap: 7px;
    border: 1px solid rgba(28, 44, 56, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 22px rgba(27, 38, 49, .10);
    backdrop-filter: blur(12px);
    align-items: center;
    overflow: hidden;
    transition: opacity .28s ease, transform .3s ease, box-shadow .3s ease,
        border-color .3s ease, visibility 0s linear .45s;
}

body.mc-rail-collapsed .mc-rail-invite:hover {
    border-color: rgba(28, 44, 56, .28);
    box-shadow: 0 10px 26px rgba(27, 38, 49, .14);
    transform: translateY(-2px);
}

.mc-rail-invite:focus-visible {
    outline: 2px solid var(--mc-focus);
    outline-offset: 3px;
}

.mc-rail-invite__bubble {
    display: flex;
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.mc-rail-invite__bubble small {
    color: var(--mc-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.mc-rail-invite__bubble strong {
    margin-top: 0;
    color: var(--mc-cta);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.mc-rail-invite__handle {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--mc-surface-alt);
    transition: color .25s ease, background .25s ease;
}

.mc-rail-invite__handle::before {
    content: "↓";
    display: grid;
    height: 100%;
    place-items: center;
    color: var(--mc-cta);
    font-size: 14px;
    font-weight: 500;
}

.mc-rail-invite[data-direction="top"] .mc-rail-invite__handle::before { content: "↑"; }

body.mc-rail-collapsed .mc-rail-invite:hover .mc-rail-invite__handle { background: var(--mc-cta); }
body.mc-rail-collapsed .mc-rail-invite:hover .mc-rail-invite__handle::before { color: var(--mc-white); }

.mc-rail-invite[hidden],
body.mc-rail-open .mc-rail-invite { display: none !important; }

/* Mobile preview dialog. */
.mc-mobile-preview-overlay[hidden] { display: none !important; }

.mc-mobile-preview-overlay {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    background: rgba(16, 29, 37, .96);
    grid-template-rows: 1fr auto;
    gap: 10px;
}

.mc-mobile-preview-close {
    position: absolute;
    z-index: 4;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
}

.mc-mobile-preview-close::before,
.mc-mobile-preview-close::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 11px;
    width: 22px;
    height: 1px;
    background: #fff;
    transform: rotate(45deg);
}

.mc-mobile-preview-close::after { transform: rotate(-45deg); }

.mc-mobile-preview-card {
    width: min(280px, calc(100vw - 48px));
    min-height: 0;
    margin: 0 auto;
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
}

.mc-mobile-preview-card img,
.mc-mobile-preview-mount {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-mobile-preview-action {
    display: grid;
    width: min(360px, 100%);
    margin: 0 auto;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    gap: 8px;
}

.mc-mobile-preview-action p { margin: 0; }
.mc-mobile-preview-action p span,
.mc-mobile-preview-action p strong { display: block; }
.mc-mobile-preview-action p span { color: var(--mc-muted); font-size: 10px; }
.mc-mobile-preview-action p strong { color: var(--mc-ink); font-size: 13px; }
.mc-mobile-preview-direct { display: flex; min-height: 44px; align-items: center; justify-content: center; background: var(--mc-cta); color: var(--mc-white); font-size: 12px; font-weight: 700; }

@media (max-width: 1024px) {
    .mc-build-layout,
    .mc-benefits__inner,
    .mc-final-features,
    .mc-final-preview__head,
    .mc-final-preview__workspace {
        width: min(920px, calc(100% - 48px));
    }

    .mc-benefits__inner { gap: 32px 44px; }
    .mc-final-features { grid-template-columns: 280px minmax(0, 1fr); gap: 44px; }
    .mc-final-preview__workspace,
    body.mc-rail-open .mc-final-preview__workspace,
    body.mc-rail-collapsed .mc-final-preview__workspace { grid-template-columns: 375px minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .mc-rail-invite:not([hidden]) { display: flex !important; }

    .mc-hero { min-height: 630px; }
    .mc-hero__copy { top: 40px; }
    .mc-hero__copy h1 { font-size: 32px; }

    .mc-editor-proof,
    .mc-benefits,
    .mc-feature-summary { padding: 64px 0; }

    .mc-build-layout,
    .mc-benefits__inner,
    .mc-final-features,
    .mc-final-preview__head,
    .mc-final-preview__workspace {
        width: calc(100% - 40px);
    }

    .mc-build-layout,
    .mc-benefits__inner,
    .mc-final-features { display: block; }

    .mc-build-copy,
    .mc-benefits__heading,
    .mc-final-features__copy { text-align: center; }

    .mc-build-lookbook { margin-top: 42px; }
    .mc-build-note { width: calc(100% - 40px); text-align: center; }

    .mc-benefits__image { width: min(560px, 100%); margin: 44px auto 0; }
    .mc-benefits__cards { max-width: 600px; margin: 34px auto 0; text-align: left; }

    .mc-final-features__copy { position: static; }
    .mc-final-features__list { margin-top: 36px; }

    .mc-final-preview { min-height: auto; padding: 64px 0 0; }
    .mc-final-preview__workspace,
    body.mc-rail-open .mc-final-preview__workspace,
    body.mc-rail-collapsed .mc-final-preview__workspace {
        display: grid;
        width: min(620px, calc(100% - 40px));
        grid-template-columns: 1fr;
        gap: 24px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .mc-preview-canvas {
        width: min(375px, 100%);
        height: auto;
        min-height: 0;
        margin: 0 auto;
        aspect-ratio: 375 / 812;
        overflow: hidden;
        border-radius: 30px;
        box-shadow: 0 16px 38px rgba(29,48,60,.1);
    }
    .mc-preview__stage,
    .mc-preview-phone {
        width: 100%;
        height: 100%;
        border-radius: 30px;
    }
    .mc-skin-rail {
        width: 100%;
        height: min(730px, calc(100vh - 72px));
        min-height: 600px;
        border: 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 16px 38px rgba(29,48,60,.1);
    }
    .mc-final-preview__cta {
        width: 100%;
        margin-left: 0;
    }
    .mc-catalog-moods__options { overflow-x: auto; grid-template-columns: none; grid-auto-columns: minmax(92px, 1fr); grid-auto-flow: column; scrollbar-width: none; }
    .mc-catalog-moods__options::-webkit-scrollbar { display: none; }
}

/* 2·3 section editorial pass: one design to admire, one complete invitation story. */
.mc-landing .mc-editor-proof {
    padding: 88px 0 96px !important;
    background: #f3f4f5 !important;
}

.mc-landing .mc-build-layout {
    width: min(1040px, calc(100% - 48px));
}

.mc-landing .mc-build-copy > span {
    color: #777b80;
    letter-spacing: .04em;
}

.mc-landing .mc-build-copy h2 {
    margin-top: 14px;
    font-size: 30px;
    line-height: 1.42;
}

.mc-landing .mc-build-copy p {
    max-width: 300px;
    margin-top: 20px;
    color: #686b70;
    font-size: 15px;
    line-height: 1.75;
}

.mc-landing .mc-build-lookbook {
    position: relative;
}

.mc-landing .mc-build-pagination {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
}

.mc-landing .mc-build-pagination button {
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #cfd2d5;
    border-radius: 50%;
    background: #fff;
    color: #252729;
    font: inherit;
    cursor: pointer;
    place-items: center;
}

.mc-landing .mc-build-pagination button:hover { border-color: #777b80; }
.mc-landing .mc-build-pagination button:focus-visible {
    outline: 2px solid var(--mc-focus);
    outline-offset: 3px;
}

.mc-landing .mc-build-pagination > span {
    min-width: 46px;
    color: #8a8d91;
    font-size: 13px;
    text-align: center;
}

.mc-landing .mc-build-pagination b { color: #202224; font-weight: 600; }
.mc-landing .mc-build-switcher { display: none !important; }

.mc-landing .mc-benefits {
    padding: 96px 0 !important;
    background: #fff !important;
}

.mc-landing .mc-benefits__inner {
    width: min(1100px, calc(100% - 48px));
    grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr);
    gap: 76px;
}

.mc-landing .mc-benefits__image {
    padding: 18px;
    border: 1px solid #e2e3e5;
    background: #f7f7f6;
}

.mc-landing .mc-benefits__image img { width: 100%; height: auto; }
.mc-landing .mc-benefits__content { gap: 34px; }
.mc-landing .mc-benefits__heading h2 { font-size: 30px; line-height: 1.42; }
.mc-landing .mc-benefits__heading > p { max-width: 390px; line-height: 1.75; }

.mc-landing .mc-benefits__cards {
    border-top: 1px solid #dfe1e3;
}

.mc-landing .mc-benefits__cards > div {
    min-height: 78px;
    padding: 18px 0 17px 30px;
    border-bottom: 1px solid #e5e6e8;
}

.mc-landing .mc-benefits__cards > div > span { top: 22px; }
.mc-landing .mc-benefits__cards strong { font-size: 15px; }
.mc-landing .mc-benefits__cards p { color: #717479; font-size: 13px; }

@media (min-width: 861px) {
    .mc-landing .mc-build-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 84px;
    }

    .mc-landing .mc-build-lookbook { height: 700px; }

    .mc-landing .mc-build-sheet,
    .mc-landing .mc-build-sheet.is-before,
    .mc-landing .mc-build-sheet.is-after {
        top: 0;
        right: auto;
        left: 50%;
        width: 242px;
        padding: 7px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 12px) scale(.985);
        transition: opacity .32s ease, transform .42s ease, visibility 0s linear .42s;
    }

    .mc-landing .mc-build-sheet img,
    .mc-landing .mc-build-sheet.is-active img {
        width: 100%;
        height: auto;
        aspect-ratio: 11 / 30;
        object-fit: cover;
    }

    .mc-landing .mc-build-sheet.is-active {
        top: 0;
        left: 50%;
        width: 242px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%);
        transition-delay: 0s;
    }
}

@media (max-width: 860px) {
    .mc-landing .mc-editor-proof { padding: 68px 0 76px !important; }
    .mc-landing .mc-build-layout { width: min(calc(100% - 32px), 600px); }
    .mc-landing .mc-build-copy { text-align: center; }
    .mc-landing .mc-build-copy h2 { font-size: 25px; }
    .mc-landing .mc-build-copy p { margin-inline: auto; }
    .mc-landing .mc-build-lookbook { height: min(196vw, 720px); margin-top: 36px; }
    .mc-landing .mc-build-sheet { width: min(65vw, 250px); }
    .mc-landing .mc-build-sheet img { width: 100%; height: auto; aspect-ratio: 11 / 30; object-fit: cover; }
    .mc-landing .mc-build-pagination { bottom: 0; }

    .mc-landing .mc-benefits { padding: 72px 0 !important; }
    .mc-landing .mc-benefits__inner { width: min(calc(100% - 32px), 600px); gap: 38px; }
    .mc-landing .mc-benefits__image { padding: 10px; }
    .mc-landing .mc-benefits__heading { text-align: center; }
    .mc-landing .mc-benefits__heading h2 { font-size: 25px; }
    .mc-landing .mc-benefits__heading > p { font-size: 14px; }
}

/* FINAL A-STAGE CONTRACT — intentionally last in the file. */
.mc-landing .mc-editor-proof { padding: 82px 0 88px !important; background: #f3f4f5 !important; }
.mc-landing .mc-build-layout { width: min(1040px, calc(100% - 48px)); align-items: center; }
.mc-landing .mc-build-copy { width: 100%; margin: 0; text-align: left; }
.mc-landing .mc-build-lookbook { position: relative; width: 100%; height: 520px; margin: 0; }
.mc-landing .mc-build-lookbook::before {
    position: absolute; top: 30px; left: calc(50% + 28px); width: 286px; height: 440px;
    border: 1px solid #dfe1e3; background: #e9ebed; content: ''; transform: translateX(-50%);
}
.mc-landing .mc-build-sheet,
.mc-landing .mc-build-sheet.is-before,
.mc-landing .mc-build-sheet.is-after { display: none !important; }
.mc-landing .mc-build-sheet.is-active {
    position: absolute; top: 0; left: 50%; z-index: 2; display: block !important; width: 286px; padding: 7px;
    border: 1px solid #d8dade; background: #fff; box-shadow: 0 18px 40px rgba(24, 28, 32, .09);
    opacity: 1; visibility: visible; transform: translateX(-50%);
}
.mc-landing .mc-build-sheet.is-active img {
    display: block; width: 100%; height: 440px; aspect-ratio: auto; object-fit: cover; object-position: top center;
}
.mc-landing .mc-build-pagination {
    position: absolute; bottom: 0; left: 50%; z-index: 4; display: flex !important; align-items: center;
    justify-content: center; gap: 14px; width: auto; transform: translateX(-50%);
}
.mc-landing .mc-build-pagination button {
    position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid #cfd2d5;
    border-radius: 50%; background: #fff; color: #25282b; font-size: 0;
}
.mc-landing .mc-build-pagination button::before { font-size: 18px; line-height: 1; }
.mc-landing .mc-build-pagination button:first-child::before { content: '\2190'; }
.mc-landing .mc-build-pagination button:last-child::before { content: '\2192'; }
.mc-landing .mc-build-pagination > span { min-width: 52px; color: #777b80; font-size: 13px; text-align: center; }
.mc-landing .mc-benefits { padding: 82px 0 !important; background: #fff !important; }
.mc-landing .mc-benefits__inner {
    width: min(1020px, calc(100% - 48px)); grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); gap: 68px;
}
.mc-landing .mc-benefits__image { padding: 12px; }
.mc-landing .mc-benefits__content { gap: 26px; }
.mc-landing .mc-benefits__cards { display: grid; grid-template-columns: 1fr !important; gap: 0; }
.mc-landing .mc-benefits__cards > div { min-height: 70px; padding: 15px 0 14px 30px; }
.mc-landing .mc-benefits__cards > div > span { top: 19px; }
@media (min-width: 861px) {
    .mc-landing .mc-build-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 80px; }
}
@media (max-width: 860px) {
    .mc-landing .mc-editor-proof { padding: 62px 0 68px !important; }
    .mc-landing .mc-build-layout { width: min(calc(100% - 32px), 600px); }
    .mc-landing .mc-build-copy { text-align: center; }
    .mc-landing .mc-build-lookbook { height: 486px; margin-top: 32px; }
    .mc-landing .mc-build-lookbook::before { top: 22px; left: calc(50% + 18px); width: 246px; height: 396px; }
    .mc-landing .mc-build-sheet.is-active { width: 246px; }
    .mc-landing .mc-build-sheet.is-active img { height: 396px; }
    .mc-landing .mc-benefits { padding: 66px 0 !important; }
    .mc-landing .mc-benefits__inner { width: min(calc(100% - 32px), 600px); grid-template-columns: 1fr; gap: 34px; }
}

/* 2·3 final correction: one focused design, then concise product proof. */
.mc-landing .mc-editor-proof {
    padding: 82px 0 88px !important;
    background: #f3f4f5 !important;
}

.mc-landing .mc-build-layout {
    width: min(1040px, calc(100% - 48px));
    align-items: center;
}

.mc-landing .mc-build-copy {
    width: 100%;
    margin: 0;
    text-align: left;
}

.mc-landing .mc-build-lookbook {
    position: relative;
    width: 100%;
    height: 520px;
    margin: 0;
}

.mc-landing .mc-build-lookbook::before {
    position: absolute;
    top: 30px;
    left: calc(50% + 28px);
    width: 286px;
    height: 440px;
    border: 1px solid #dfe1e3;
    background: #e9ebed;
    content: none;
    transform: translateX(-50%);
}

.mc-landing .mc-build-sheet,
.mc-landing .mc-build-sheet.is-before,
.mc-landing .mc-build-sheet.is-after {
    display: none !important;
}

.mc-landing .mc-build-sheet.is-active {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: block !important;
    width: 286px;
    padding: 7px;
    border: 1px solid #d8dade;
    background: #fff;
    box-shadow: 0 18px 40px rgba(24, 28, 32, .09);
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
}

.mc-landing .mc-build-sheet.is-active img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: top center;
}

.mc-landing .mc-build-pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 4;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: auto;
    transform: translateX(-50%);
}

.mc-landing .mc-build-pagination button {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #cfd2d5;
    border-radius: 50%;
    background: #fff;
    color: #25282b;
    font-size: 0;
}

.mc-landing .mc-build-pagination button::before {
    font-size: 18px;
    line-height: 1;
}

.mc-landing .mc-build-pagination button:first-child::before { content: '\2190'; }
.mc-landing .mc-build-pagination button:last-child::before { content: '\2192'; }
.mc-landing .mc-build-pagination > span {
    min-width: 52px;
    color: #777b80;
    font-size: 13px;
    text-align: center;
}

.mc-landing .mc-benefits {
    padding: 82px 0 !important;
    background: #fff !important;
}

.mc-landing .mc-benefits__inner {
    width: min(1020px, calc(100% - 48px));
    grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
    gap: 68px;
}

.mc-landing .mc-benefits__image { padding: 12px; }
.mc-landing .mc-benefits__content { gap: 26px; }
.mc-landing .mc-benefits__cards {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0;
}
.mc-landing .mc-benefits__cards > div {
    min-height: 70px;
    padding: 15px 0 14px 30px;
}
.mc-landing .mc-benefits__cards > div > span { top: 19px; }

@media (min-width: 861px) {
    .mc-landing .mc-build-layout {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 80px;
    }
}

@media (max-width: 860px) {
    .mc-landing .mc-editor-proof { padding: 62px 0 68px !important; }
    .mc-landing .mc-build-layout { width: min(calc(100% - 32px), 600px); }
    .mc-landing .mc-build-copy { text-align: center; }
    .mc-landing .mc-build-lookbook { height: 486px; margin-top: 32px; }
    .mc-landing .mc-build-lookbook::before {
        top: 22px;
        left: calc(50% + 18px);
        width: 246px;
        height: 396px;
    }
    .mc-landing .mc-build-sheet.is-active { width: 246px; }
    .mc-landing .mc-build-sheet.is-active img { height: 396px; }
    .mc-landing .mc-benefits { padding: 66px 0 !important; }
    .mc-landing .mc-benefits__inner {
        width: min(calc(100% - 32px), 600px);
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-landing .mc-build-sheet { transition: none !important; }
}

/* R15 — real composition proof: one selected design, configurable content flow. */
body .mc-landing .mc-composition-proof {
    padding: 104px 0 !important;
    background: #fff;
}

body .mc-landing .mc-composition-rule {
    height: 1px;
    margin: 48px 0 36px;
    background: var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-composition-stage {
    display: grid;
    grid-template-columns: 360px 600px;
    column-gap: 40px;
    align-items: start;
}

body .mc-landing .mc-composition-preview,
body .mc-landing .mc-composition-phone {
    width: 360px;
}

body .mc-landing .mc-composition-phone {
    position: relative;
    height: 780px;
    overflow: hidden;
    border: 1px solid var(--bj-line, #ddd9d2);
    border-radius: 28px;
    background: #fff;
}

body .mc-landing .mc-composition-fallback,
body .mc-landing .mc-composition-mount {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 27px;
    background: #fff;
}

body .mc-landing .mc-composition-fallback {
    z-index: 1;
    opacity: 1;
    transition: opacity .18s ease, visibility .18s ease;
}

body .mc-landing .mc-composition-fallback.is-hidden {
    visibility: hidden;
    opacity: 0;
}

body .mc-landing .mc-composition-fallback img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

body .mc-landing .mc-composition-mount {
    z-index: 2;
    opacity: 0;
    transition: opacity .18s ease;
}

body .mc-landing .mc-composition-mount.is-active { opacity: 1; }
body .mc-landing .mc-composition-mount > * { width: 100%; min-height: 100%; }
body .mc-landing .mc-composition-mount .cover__preview-badge,
body .mc-landing .mc-composition-mount .sample-photo-watermark { display: none !important; }

body .mc-landing .mc-composition-mount .ed-preview__frame {
    overflow: hidden !important;
    pointer-events: none !important;
    scrollbar-width: none;
}

body .mc-landing .mc-composition-mount .ed-preview__frame::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body .mc-landing .mc-composition-preview__caption {
    margin: 14px 0 0;
    color: var(--bj-muted, #696660);
    font-size: 14px;
    line-height: 1.6;
}

body .mc-landing .mc-composition-deck {
    box-sizing: border-box;
    width: 584px !important;
    margin-left: 16px;
    height: 780px;
    overflow: hidden;
    border-top: 1px solid var(--bj-line, #ddd9d2);
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
    background: #fff;
}

body .mc-landing .mc-composition-deck__head > div {
    width: 100% !important;
    min-width: 0;
    justify-self: stretch;
}

body .mc-landing .mc-composition-deck__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    height: 100px;
    padding: 0 16px;
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-composition-deck__head h3 {
    margin: 0 0 6px;
    color: var(--bj-text, #181817);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.025em;
}

body .mc-landing .mc-composition-deck__head p {
    margin: 0;
    color: var(--bj-muted, #696660);
    font-size: 14px;
    line-height: 1.55;
}

body .mc-landing .mc-composition-deck__head > span {
    color: var(--bj-muted, #696660);
    font-size: 14px;
    white-space: nowrap;
}

body .mc-landing .mc-composition-list {
    height: 592px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .mc-landing .mc-composition-list > li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    height: 74px;
    padding: 0 16px;
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
    transition: background-color .18s ease, opacity .18s ease;
}

body .mc-landing .mc-composition-list > li.is-hidden-area { opacity: 1; }
body .mc-landing .mc-composition-list > li.is-hidden-area > strong,
body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-row__fixed {
    color: var(--bj-muted, #77736d);
}
body .mc-landing .mc-composition-list > li.is-just-changed { background: #f5f2ed; }
body .mc-landing .mc-composition-list > li.is-dragging { opacity: .36; }
body .mc-landing .mc-composition-list > li.is-drag-over { box-shadow: inset 0 2px 0 var(--bj-text, #181817); }

body .mc-landing .mc-composition-list > li > strong {
    min-width: 0;
    color: var(--bj-text, #181817);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

body .mc-landing .mc-composition-handle {
    display: inline-grid;
    width: 40px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--bj-muted, #8b8780);
    font-size: 18px;
    letter-spacing: -3px;
    cursor: grab;
}

body .mc-landing span.mc-composition-handle { cursor: default; }

body .mc-landing .mc-composition-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

body .mc-landing .mc-composition-actions > button:not(.mc-composition-switch) {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bj-line, #ddd9d2);
    border-radius: 50%;
    background: #fff;
    color: var(--bj-text, #181817);
    font-size: 17px;
}

body .mc-landing .mc-composition-actions > button:disabled,
body .mc-landing .mc-composition-handle[aria-disabled='true'] {
    opacity: .26;
    cursor: default;
}

body .mc-landing .mc-composition-switch {
    display: grid;
    grid-template-columns: 34px auto;
    gap: 8px;
    align-items: center;
    min-width: 88px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--bj-line, #ddd9d2);
    border-radius: 22px;
    background: #fff;
    color: var(--bj-muted, #696660);
}

body .mc-landing .mc-composition-switch > span {
    position: relative;
    display: block;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: #d8d4ce;
}

body .mc-landing .mc-composition-switch > span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}

body .mc-landing .mc-composition-switch[aria-checked='true'] {
    border-color: var(--bj-text, #181817);
    color: var(--bj-text, #181817);
}

body .mc-landing .mc-composition-switch[aria-checked='true'] > span { background: var(--bj-text, #181817); }
body .mc-landing .mc-composition-switch[aria-checked='true'] > span::after { transform: translateX(14px); }
body .mc-landing .mc-composition-switch em { font-size: 13px; font-style: normal; white-space: nowrap; }

body .mc-landing .mc-composition-state,
body .mc-landing .mc-composition-fixed {
    color: var(--bj-muted, #696660);
    font-size: 14px;
    white-space: nowrap;
}

body .mc-landing .mc-composition-deck__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    padding: 0 16px;
}

body .mc-landing .mc-composition-deck__foot p {
    margin: 0;
    color: var(--bj-muted, #696660);
    font-size: 14px;
    line-height: 1.55;
}

body .mc-landing .mc-composition-deck__foot button {
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--bj-text, #181817);
    font-size: 14px;
}

body .mc-landing .mc-composition-list button:focus-visible,
body .mc-landing .mc-composition-deck__foot button:focus-visible {
    outline: 2px solid var(--bj-accent, #5e548e);
    outline-offset: 2px;
}

@media (max-width: 1047px) {
    body .mc-landing .mc-composition-stage {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }
    body .mc-landing .mc-composition-preview,
    body .mc-landing .mc-composition-phone {
        width: min(360px, 100%);
        margin-inline: auto;
    }
    body .mc-landing .mc-composition-deck {
        width: min(600px, 100%);
        margin-inline: auto;
    }
}

/* R37 — polished editorial reveal: richer, but still aligned and restrained. */
@media (prefers-reduced-motion: no-preference) {
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head {
        opacity: 1;
        transform: none;
        transition: none;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-r1-kicker,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy > p:last-child,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head-context,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-intro,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head > p:last-child {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
        transform: none;
        transition: opacity .66s cubic-bezier(.22, 1, .36, 1),
            clip-path .78s cubic-bezier(.22, 1, .36, 1),
            filter .66s cubic-bezier(.22, 1, .36, 1),
            transform .78s cubic-bezier(.22, 1, .36, 1);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-r1-kicker {
        opacity: 0;
        transform: translateY(10px);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__head-copy h2,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__head h2 {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translateY(24px);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__head-copy > p:last-child,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__head-context,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-intro,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__head > p:last-child {
        opacity: 0;
        filter: blur(4px);
        transform: translateY(16px);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section h2 {
        transition-delay: .07s;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy > p:last-child,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head-context,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-intro,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head > p:last-child {
        transition-delay: .16s;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__proof {
        transition: opacity .82s cubic-bezier(.22, 1, .36, 1),
            filter .82s cubic-bezier(.22, 1, .36, 1),
            transform .82s cubic-bezier(.22, 1, .36, 1);
        transition-delay: .22s;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__proof {
        filter: blur(3px);
        transform: translate3d(-18px, 20px, 0) scale(.988);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__content {
        transition: opacity .82s cubic-bezier(.22, 1, .36, 1),
            filter .82s cubic-bezier(.22, 1, .36, 1),
            transform .82s cubic-bezier(.22, 1, .36, 1);
        transition-delay: .3s;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__content {
        filter: blur(3px);
        transform: translate3d(18px, 20px, 0) scale(.988);
    }

    body .mc-landing.mc-motion-ready .mc-design-picker.is-motion-inview .mc-skin-card,
    body .mc-landing.mc-motion-ready .mc-style-composer.is-motion-inview .mc-style-composer__styles > button,
    body .mc-landing.mc-motion-ready .mc-closing.is-motion-inview .mc-closing__policies > div {
        animation: mc-editorial-item-in .56s cubic-bezier(.22, 1, .36, 1) both;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker.is-motion-inview .mc-skin-card:nth-child(2),
    body .mc-landing.mc-motion-ready .mc-style-composer.is-motion-inview .mc-style-composer__styles > button:nth-child(2),
    body .mc-landing.mc-motion-ready .mc-closing.is-motion-inview .mc-closing__policies > div:nth-child(2) { animation-delay: .05s; }

    body .mc-landing.mc-motion-ready .mc-design-picker.is-motion-inview .mc-skin-card:nth-child(3),
    body .mc-landing.mc-motion-ready .mc-style-composer.is-motion-inview .mc-style-composer__styles > button:nth-child(3),
    body .mc-landing.mc-motion-ready .mc-closing.is-motion-inview .mc-closing__policies > div:nth-child(3) { animation-delay: .1s; }

    body .mc-landing.mc-motion-ready .mc-design-picker.is-motion-inview .mc-skin-card:nth-child(4),
    body .mc-landing.mc-motion-ready .mc-style-composer.is-motion-inview .mc-style-composer__styles > button:nth-child(4),
    body .mc-landing.mc-motion-ready .mc-closing.is-motion-inview .mc-closing__policies > div:nth-child(4) { animation-delay: .15s; }

    body .mc-landing.mc-motion-ready .mc-design-picker.is-motion-inview .mc-skin-card:nth-child(5),
    body .mc-landing.mc-motion-ready .mc-style-composer.is-motion-inview .mc-style-composer__styles > button:nth-child(5) { animation-delay: .2s; }
}

@keyframes mc-editorial-item-in {
    from { opacity: 0; filter: blur(3px); transform: translateY(14px) scale(.985); }
    to { opacity: 1; filter: blur(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-r1-kicker,
    body .mc-landing.mc-motion-ready .mc-motion-section h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy > p:last-child,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head-context,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-intro,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head > p:last-child,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-skin-card,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__styles > button,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__policies > div {
        animation: none !important;
        clip-path: none !important;
        filter: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* R36 — section-by-section storytelling motion. */
@media (prefers-reduced-motion: no-preference) {
    /* The section itself stays fixed; only its editorial layers move. */
    body .mc-landing.mc-motion-ready .mc-motion-section {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    body .mc-landing .mc-hero__bg {
        animation: mc-hero-image-in 1.2s cubic-bezier(.22, 1, .36, 1) both;
    }

    body .mc-landing .mc-hero__copy > * {
        animation: mc-hero-copy-in .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    body .mc-landing .mc-hero__copy > h1 { animation-delay: .06s; }
    body .mc-landing .mc-hero__copy > .mc-r1-hero-lede { animation-delay: .12s; }
    body .mc-landing .mc-hero__copy > .mc-hero__cta { animation-delay: .18s; }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__proof,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__content {
        opacity: 1;
        transform: none;
        transition: opacity .72s cubic-bezier(.22, 1, .36, 1),
            transform .72s cubic-bezier(.22, 1, .36, 1);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__head-copy,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__head,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-head,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__head {
        opacity: 0;
        transform: translateY(28px);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__proof {
        opacity: 0;
        transform: translate3d(-26px, 18px, 0);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__content {
        opacity: 0;
        transform: translate3d(26px, 18px, 0);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__proof {
        transition-delay: .1s;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__content {
        transition-delay: .18s;
    }

    body .mc-landing.mc-motion-ready .mc-composition-proof.is-motion-inview [data-mc-composition-row] {
        animation: mc-section-card-in .48s cubic-bezier(.22, 1, .36, 1) both;
    }

    body .mc-landing.mc-motion-ready .mc-composition-proof.is-motion-inview [data-mc-composition-row]:nth-child(2n) {
        animation-delay: .05s;
    }
}

@keyframes mc-hero-image-in {
    from { opacity: .72; transform: scale(1.035); }
    to { opacity: 1; transform: none; }
}

@keyframes mc-hero-copy-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

@keyframes mc-section-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__proof,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__content {
        transform: translateY(22px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-hero__bg,
    body .mc-landing .mc-hero__copy > *,
    body .mc-landing.mc-motion-ready .mc-motion-section *,
    body .mc-landing.mc-motion-ready .mc-composition-proof.is-motion-inview [data-mc-composition-row] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 767px) and (min-width: 321px) and (min-height: 700px) and (orientation: portrait) {
    body .mc-landing .mc-composition-preview {
        position: sticky;
        top: 76px;
        z-index: 4;
        width: 100%;
        padding: 8px 0 12px;
        background: rgba(255,255,255,.96);
    }
    body .mc-landing .mc-composition-phone {
        width: 100%;
        height: min(40svh, 320px);
        border-radius: 18px;
    }
    body .mc-landing .mc-composition-fallback,
    body .mc-landing .mc-composition-mount { border-radius: 17px; }
}

@media (max-width: 767px) {
    body .mc-landing .mc-composition-proof { padding: 72px 0 !important; }
    body .mc-landing .mc-composition-rule { margin: 36px 0 28px; }
    body .mc-landing .mc-composition-stage { row-gap: 28px; }
    body .mc-landing .mc-composition-preview__caption { font-size: 13px; }
    body .mc-landing .mc-composition-deck {
        height: auto;
        overflow: visible;
    }
    body .mc-landing .mc-composition-deck__head {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        height: auto;
        min-height: 116px;
        padding: 20px 16px;
    }
    body .mc-landing .mc-composition-deck__head h3 { font-size: 22px; }
    body .mc-landing .mc-composition-list { height: auto; }
    body .mc-landing .mc-composition-list > li {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 8px 12px;
        height: auto;
        min-height: 84px;
        padding: 14px 12px;
        scroll-margin-top: 420px;
    }
    body .mc-landing .mc-composition-list > li > strong { font-size: 17px; }
    body .mc-landing .mc-composition-handle {
        width: 28px;
        pointer-events: none;
    }
    body .mc-landing button.mc-composition-handle { visibility: hidden; }
    body .mc-landing .mc-composition-actions,
    body .mc-landing .mc-composition-state {
        grid-column: 2;
        justify-self: stretch;
    }
    body .mc-landing .mc-composition-actions { justify-content: flex-end; }
    body .mc-landing .mc-composition-deck__foot {
        min-height: 88px;
        height: auto;
        gap: 16px;
        padding: 18px 12px;
    }
}

@media (max-width: 320px), (max-width: 767px) and (max-height: 699px), (max-width: 767px) and (orientation: landscape) {
    body .mc-landing .mc-composition-preview { position: static !important; }
    body .mc-landing .mc-composition-phone {
        width: 100%;
        height: 240px;
        border-radius: 16px;
    }
    body .mc-landing .mc-composition-fallback,
    body .mc-landing .mc-composition-mount { border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-composition-fallback,
    body .mc-landing .mc-composition-mount,
    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-switch > span::after {
        transition: none !important;
    }
}

/* R6 — selected style plus restrained, live secondary customization. */
body .mc-landing .mc-style-composer__anchors {
    grid-template-columns: repeat(3, 1fr);
}

body .mc-landing .mc-style-composer__mount .ed-preview__frame {
    overflow-y: hidden !important;
    overscroll-behavior: contain;
}

body .mc-landing .mc-style-composer__styles {
    gap: 0;
    border-top: 1px solid #d4d1cb;
}

body .mc-landing .mc-style-option {
    border: 0;
    border-bottom: 1px solid #d4d1cb;
    border-radius: 0;
    background: transparent;
}

body .mc-landing .mc-style-option:hover {
    border-color: #d4d1cb;
    background: rgba(255, 255, 255, .58);
}

body .mc-landing .mc-style-option.is-selected {
    border-color: #d4d1cb;
    background: #fff;
}

body .mc-landing .mc-style-option.is-pending {
    background: rgba(255, 255, 255, .72);
}

body .mc-landing .mc-style-option[aria-disabled="true"],
body .mc-landing .mc-style-customize button[aria-disabled="true"],
body .mc-landing .mc-style-composer__anchors button[aria-disabled="true"] {
    cursor: wait;
}

body .mc-landing .mc-style-customize {
    margin-top: 30px;
    border-top: 1px solid #d4d1cb;
    border-bottom: 1px solid #d4d1cb;
    background: rgba(255, 255, 255, .44);
}

body .mc-landing .mc-style-customize > summary {
    display: flex;
    min-height: 62px;
    box-sizing: border-box;
    padding: 10px 18px;
    align-items: center;
    justify-content: space-between;
    color: #242321;
    cursor: pointer;
    list-style: none;
}

body .mc-landing .mc-style-customize > summary::-webkit-details-marker { display: none; }
body .mc-landing .mc-style-customize > summary:focus-visible { outline: 2px solid #1d1d1c; outline-offset: 3px; }
body .mc-landing .mc-style-customize > summary > span { display: flex; flex-direction: column; gap: 3px; font-size: 16px; font-weight: 650; }
body .mc-landing .mc-style-customize > summary small { color: #77736d; font-size: 11px; font-weight: 500; letter-spacing: .02em; }
body .mc-landing .mc-style-customize > summary small b { color: #4e4a45; font-weight: 700; }
body .mc-landing .mc-style-customize > summary i { position: relative; width: 18px; height: 18px; }
body .mc-landing .mc-style-customize > summary i::before,
body .mc-landing .mc-style-customize > summary i::after { position: absolute; top: 8px; left: 3px; width: 12px; height: 1px; background: #57534e; content: ""; }
body .mc-landing .mc-style-customize:not([open]) > summary i::after { transform: rotate(90deg); }

body .mc-landing .mc-style-customize__body {
    display: flex;
    padding: 20px;
    border-top: 1px solid #e2dfd9;
    flex-direction: column;
    gap: 16px;
}

body .mc-landing .mc-style-customize__state {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    color: #635f59;
    font-size: 12px;
}

body .mc-landing .mc-style-customize__state[hidden] { display: none; }
body .mc-landing .mc-style-customize__state span::before { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #25282d; content: ""; vertical-align: 1px; }
body .mc-landing .mc-style-customize__state button { min-height: 32px; padding: 0 2px; border: 0; border-bottom: 1px solid #706b65; background: transparent; color: #4e4a45; font: inherit; font-weight: 650; cursor: pointer; }

body .mc-landing .mc-style-customize__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body .mc-landing .mc-style-customize__group legend { margin: 0 0 8px; color: #5f5b56; font-size: 12px; font-weight: 650; }
body .mc-landing .mc-style-customize__group > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body .mc-landing .mc-style-customize__group button {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px 0 28px;
    border: 1px solid #d0ccc5;
    border-radius: 6px;
    background: #fff;
    color: #77726c;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

body .mc-landing .mc-style-customize__group button::before {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 10px;
    height: 10px;
    border: 1px solid #aaa59e;
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
}

body .mc-landing .mc-style-customize__group button.is-active { border-color: #25282d; color: #25282d; font-weight: 700; }
body .mc-landing .mc-style-customize__group button.is-active::before { border-color: #25282d; background: #25282d; box-shadow: inset 0 0 0 2px #fff; }
body .mc-landing .mc-style-customize__group button:focus-visible,
body .mc-landing .mc-style-customize__state button:focus-visible { outline: 2px solid #25282d; outline-offset: 3px; }
body .mc-landing .mc-choice-short { display: none; }

body .mc-landing .mc-style-composer__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body .mc-landing .mc-style-composer__status button { min-height: 36px; padding: 0 12px; border: 1px solid #77726c; border-radius: 6px; background: transparent; color: #403d39; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
body .mc-landing .mc-style-composer__summary { margin: 0 0 8px; color: #242321; font-size: 13px; font-weight: 650; line-height: 1.65; }
body .mc-landing .mc-style-composer__editor-note { margin: 0 0 18px; color: #817c75; font-size: 12px; line-height: 1.6; }

@media (max-width: 860px) {
    body .mc-landing .mc-style-composer__workspace { gap: 34px; }
    body .mc-landing .mc-style-composer__styles { margin-top: 24px; }
    body .mc-landing .mc-style-customize { margin-top: 30px; }
    body .mc-landing .mc-style-customize > summary { padding-right: 14px; padding-left: 14px; }
    body .mc-landing .mc-style-customize__body { padding: 18px 14px; }
    body .mc-landing .mc-style-customize__group > div { gap: 6px; }
    body .mc-landing .mc-style-customize__group button { padding: 0 7px 0 26px; }
    body .mc-landing .mc-style-customize__group button::before { left: 9px; }
    body .mc-landing .mc-choice-full { display: none; }
    body .mc-landing .mc-choice-short { display: inline; }
    body .mc-landing .mc-style-composer__controls { padding-bottom: 76px; }
    body .mc-landing .mc-style-composer__cta {
        position: sticky;
        z-index: 8;
        bottom: max(12px, env(safe-area-inset-bottom));
        box-shadow: 0 12px 28px rgba(29, 29, 28, .22);
    }
}

@media (max-width: 360px) {
    body .mc-landing .mc-style-composer__inner { width: calc(100% - 32px); }
    body .mc-landing .mc-style-option { padding-right: 10px; padding-left: 10px; gap: 10px; }
    body .mc-landing .mc-style-option__copy strong { font-size: 15px; }
    body .mc-landing .mc-style-option__copy em { font-size: 12px; }
    body .mc-landing .mc-style-customize__body { padding-right: 10px; padding-left: 10px; }
    body .mc-landing .mc-style-customize__group button { padding-right: 4px; padding-left: 23px; font-size: 11px; }
    body .mc-landing .mc-style-customize__group button::before { left: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-style-customize > summary i::after,
    body .mc-landing .mc-style-customize__group button { transition: none !important; }
}

/* Renewal-site language: image-led, linear, and never a dark section. */
.mc-landing .mc-editor-proof,
.mc-landing .mc-benefits,
.mc-landing .mc-feature-summary,
.mc-landing .mc-final-preview {
    border-top: 1px solid #dfe1e2;
}

/* Soft lavender-neutral palette from the approved renewal reference. */
.mc-landing {
    --mc-ink: #29272e;
    --mc-text: #66616d;
    --mc-muted: #746f7b;
    --mc-line: #ddd9e4;
    --mc-product-stage: #f4f2f7;
    --mc-cta: #29272e;
    --mc-cta-hover: #1f1d23;
}
.mc-landing .mc-editor-proof { background: #f8f7fa !important; }
.mc-landing .mc-benefits { background: #fdfcfe !important; }
.mc-landing .mc-feature-summary { background: #f3f1f6 !important; }
.mc-landing .mc-final-preview {
    background:
        radial-gradient(circle at 27% 38%, rgba(255, 255, 255, .98) 0, rgba(255, 255, 255, .7) 21%, rgba(255, 255, 255, 0) 51%),
        radial-gradient(circle at 72% 72%, rgba(238, 233, 246, .72) 0, rgba(238, 233, 246, 0) 42%),
        linear-gradient(135deg, #f5f3f8 0%, #ebe8f1 100%) !important;
}
.mc-landing .mc-editor-proof,
.mc-landing .mc-benefits,
.mc-landing .mc-feature-summary,
.mc-landing .mc-final-preview { border-color: #e2dee8; }
.mc-landing .mc-catalog-mood,
.mc-landing .mc-catalog-filter-toggle,
.mc-landing .mc-skin-thumb { border-color: #ddd9e4; }
.mc-landing .mc-catalog-mood { background: rgba(255, 255, 255, .74); }

/* Compact catalog header — final specificity override. */
.mc-landing .mc-skin-rail .mc-skin-rail__menu,
body .mc-landing .mc-skin-rail .mc-skin-rail__menu {
    padding: 12px 0 8px !important;
}
.mc-landing .mc-skin-rail .mc-catalog-toolbar {
    min-height: 44px !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
.mc-landing .mc-skin-rail__list,
body .mc-landing .mc-skin-rail__list { padding-top: 16px !important; }

/* First-screen preview jump must be visibly present, not only laid out. */
.mc-rail-invite:not([hidden]) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

/* Cohesive finale: editorial heading, equal columns, quiet filters. */
.mc-landing .mc-final-preview__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 64px;
    align-items: end;
    margin-bottom: 36px;
}
.mc-landing .mc-final-preview__head-copy > span {
    display: block;
    margin-bottom: 10px;
    color: var(--mc-muted);
    font-size: 14px;
    font-weight: 700;
}
.mc-landing .mc-final-preview__head-copy > p {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--mc-muted);
    font-size: 16px;
    line-height: 1.7;
}
.mc-landing .mc-final-preview__head .mc-final-preview__cta {
    display: flex;
    width: 280px;
    padding: 0;
    flex-direction: column;
    gap: 8px;
}
.mc-landing .mc-final-preview__head .mc-final-preview__cta small {
    margin: 0;
    text-align: center;
}
.mc-landing .mc-final-preview__decision .mc-skin-rail {
    height: 812px;
    min-height: 812px;
}
.mc-landing .mc-skin-rail .mc-skin-rail__menu,
body .mc-landing .mc-skin-rail .mc-skin-rail__menu {
    padding: 4px 0 12px !important;
}
.mc-landing .mc-skin-rail .mc-catalog-moods {
    grid-template-columns: 90px minmax(0, 1fr) !important;
}
.mc-landing .mc-skin-rail .mc-catalog-mood {
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
}
.mc-landing .mc-skin-rail .mc-catalog-mood.is-active {
    border-bottom-color: var(--mc-ink);
    background: rgba(255, 255, 255, .48);
}
.mc-landing .mc-skin-rail .mc-catalog-toolbar {
    min-height: 40px !important;
    margin-top: 2px !important;
}
.mc-landing .mc-skin-rail .mc-catalog-filter-toggle {
    min-width: 64px;
    min-height: 40px;
    border-color: transparent;
    background: transparent;
}
.mc-landing .mc-build-switcher {
    right: 58px;
    gap: 10px;
}
.mc-landing .mc-build-switcher::before {
    content: "분위기 비교";
    margin-bottom: 2px;
    color: var(--mc-muted);
    font-size: 12px;
    text-align: center;
    writing-mode: vertical-rl;
}

@media (max-width: 860px) {
    .mc-landing .mc-final-preview__head {
        display: block;
        margin-bottom: 28px;
    }
    .mc-landing .mc-final-preview__head .mc-final-preview__cta {
        width: 100%;
        margin-top: 22px;
    }
    .mc-landing .mc-final-preview__decision .mc-skin-rail {
        height: min(720px, calc(100vh - 76px));
        min-height: 600px;
    }
    .mc-landing .mc-skin-rail .mc-catalog-moods {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .mc-landing .mc-build-switcher::before {
        width: auto;
        margin: 0 6px 0 0;
        writing-mode: horizontal-tb;
    }
}

/* Two-section composition pass — final cascade. */
.mc-landing .mc-editor-proof { padding: 64px 0; }
.mc-landing .mc-build-layout {
    display: grid;
    width: min(1120px, calc(100% - 48px));
    min-height: 610px;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 96px;
    align-items: center;
}
.mc-landing .mc-build-copy {
    width: auto;
    margin: 0;
    text-align: left;
}
.mc-landing .mc-build-copy h2 { font-size: 32px; }
.mc-landing .mc-build-lookbook {
    width: min(600px, 100%);
    height: 610px;
    margin: 0;
}
.mc-landing .mc-build-sheet { width: 360px; }
.mc-landing .mc-build-sheet img { height: 580px; }
.mc-landing .mc-build-switcher { right: 34px; }

.mc-landing .mc-final-preview__preview-column .mc-final-preview__cta {
    order: -1;
    padding: 0 0 16px;
}
.mc-landing .mc-final-preview__decision .mc-skin-rail,
.mc-landing .mc-skin-rail__inner,
.mc-landing .mc-skin-rail__menu,
.mc-landing .mc-skin-rail__list { background: transparent !important; }
.mc-landing .mc-skin-rail .mc-skin-rail__menu,
body .mc-landing .mc-skin-rail .mc-skin-rail__menu {
    padding: 12px 0 8px !important;
}
.mc-landing .mc-skin-rail .mc-catalog-toolbar {
    min-height: 44px;
    margin-top: 4px !important;
    padding-top: 0;
    border-top: 0;
}
.mc-landing .mc-skin-rail__list,
body .mc-landing .mc-skin-rail__list { padding-top: 16px; }

@media (max-width: 860px) {
    .mc-landing .mc-editor-proof { padding: 56px 0; }
    .mc-landing .mc-build-layout {
        display: block;
        width: calc(100% - 32px);
        min-height: 0;
    }
    .mc-landing .mc-build-copy { text-align: center; }
    .mc-landing .mc-build-copy h2 { font-size: 24px; }
    .mc-landing .mc-build-lookbook {
        width: 100%;
        height: min(156vw, 610px);
        margin: 36px auto 0;
    }
    .mc-landing .mc-build-sheet { width: min(78vw, 320px); }
    .mc-landing .mc-build-sheet img { height: min(134vw, 540px); }
    .mc-landing .mc-final-preview__preview-column .mc-final-preview__cta { order: -1; }
}

/* Final catalog alignment — must remain last in the legacy cascade. */
.mc-landing .mc-skin-rail .mc-skin-rail__menu,
body .mc-landing .mc-skin-rail .mc-skin-rail__menu {
    display: block !important;
    width: 100% !important;
    padding: 20px 0 16px !important;
    border-bottom: 1px solid #ddd9e4 !important;
}
.mc-landing .mc-skin-rail .mc-catalog-moods {
    display: grid !important;
    width: 100%;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center;
}
.mc-landing .mc-skin-rail .mc-catalog-moods__label {
    display: block !important;
    margin: 0 !important;
    color: var(--mc-ink);
    font-size: 14px;
}
.mc-landing .mc-skin-rail .mc-catalog-moods__options {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
.mc-landing .mc-skin-rail .mc-catalog-toolbar {
    min-height: 52px;
    margin-top: 14px !important;
    padding-top: 8px;
    border-top: 1px solid rgba(41, 39, 46, .08);
}

@media (max-width: 860px) {
    .mc-landing .mc-skin-rail .mc-catalog-moods {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }
    .mc-landing .mc-skin-rail .mc-catalog-moods__options {
        overflow-x: auto;
        grid-template-columns: none !important;
        grid-auto-columns: minmax(96px, 1fr);
        grid-auto-flow: column;
    }
}

/* Catalog header: two deliberate rows instead of one crowded toolbar. */
.mc-landing .mc-skin-rail__menu,
body .mc-landing .mc-skin-rail__menu {
    display: block;
    padding: 20px 0 16px;
    border-bottom: 1px solid #ddd9e4;
}
.mc-landing .mc-catalog-moods {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.mc-landing .mc-catalog-moods__label {
    display: block;
    margin: 0;
    color: var(--mc-ink);
    font-size: 14px;
    line-height: 1.4;
}
.mc-landing .mc-catalog-moods__options { width: 100%; }
.mc-landing .mc-catalog-toolbar {
    min-height: 52px;
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid rgba(41, 39, 46, .08);
}
.mc-landing .mc-skin-rail__list,
body .mc-landing .mc-skin-rail__list { padding-top: 20px; }

@media (max-width: 860px) {
    .mc-landing .mc-skin-rail__menu,
    body .mc-landing .mc-skin-rail__menu { padding-top: 18px; }
    .mc-landing .mc-catalog-moods {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }
    .mc-landing .mc-catalog-moods__options {
        overflow-x: auto;
        grid-template-columns: none;
        grid-auto-columns: minmax(96px, 1fr);
        grid-auto-flow: column;
    }
}
.mc-landing .mc-editor-proof { background: #f6f6f5 !important; }
.mc-landing .mc-benefits { background: #fff !important; }
.mc-landing .mc-feature-summary { background: #f3f4f4 !important; }
.mc-landing .mc-final-preview { background: #eef0f1 !important; }
.mc-landing .mc-build-sheet,
.mc-landing .mc-benefits__image,
.mc-landing .mc-preview-canvas {
    box-shadow: none;
}
.mc-landing .mc-build-sheet { border-radius: 0; }
.mc-landing .mc-benefits__image img { border-radius: 0; }
.mc-landing .mc-benefits__cards > div {
    border-top: 1px solid #dfe1e2;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.mc-landing .mc-final-features__list,
.mc-landing .mc-final-features__list details { border-color: #d7d9da; }

/* Nine-point pass: visible catalog, stronger page rhythm, one clear final action. */
.mc-landing .mc-feature-summary { background: #222629 !important; }
.mc-landing .mc-feature-summary .mc-final-features__copy h2,
.mc-landing .mc-feature-summary .mc-final-features__list summary { color: #fff; }
.mc-landing .mc-feature-summary .mc-final-features__copy > span,
.mc-landing .mc-feature-summary .mc-final-features__copy > p,
.mc-landing .mc-feature-summary .mc-final-features__list summary b,
.mc-landing .mc-feature-summary .mc-final-features__list details > p { color: #b9bec1; }
.mc-landing .mc-feature-summary .mc-final-features__list,
.mc-landing .mc-feature-summary .mc-final-features__list details { border-color: rgba(255, 255, 255, .16); }

.mc-landing .mc-final-preview { background: #e9ecee !important; }
.mc-landing .mc-final-preview__head {
    width: min(1000px, calc(100% - 48px));
    margin-bottom: 32px;
    text-align: left;
}
.mc-landing .mc-final-preview__head h2 br { display: none; }
.mc-landing .mc-final-preview__head > p { max-width: 620px; }
.mc-landing .mc-final-preview__decision {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.mc-landing .mc-final-preview__selection {
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(24, 24, 23, .14);
}
.mc-landing .mc-final-preview__selection span { margin-bottom: 5px; }
.mc-landing .mc-final-preview__selection strong { font-size: 22px; }
.mc-landing .mc-final-preview__decision .mc-skin-rail {
    height: 650px;
    min-height: 650px;
    margin: 18px 0 0;
    border-color: rgba(24, 24, 23, .14);
    background: #fff;
}
.mc-landing .mc-final-preview__cta {
    padding: 18px 0 0;
    border: 0;
    background: transparent;
}
.mc-landing .mc-final-preview__cta .mc-landing__start {
    order: -1;
    width: 100%;
    min-height: 54px;
}
.mc-landing .mc-final-preview__cta small {
    width: 100%;
    margin: 0;
    text-align: center;
}
.mc-landing .mc-catalog-disclosure__toggle { display: none !important; }

@media (max-width: 860px) {
    .mc-landing .mc-final-preview__head {
        width: min(100% - 32px, 560px);
        text-align: left;
    }
    .mc-landing .mc-final-preview__decision .mc-skin-rail {
        height: min(680px, calc(100vh - 96px));
        min-height: 560px;
    }
}

@media (max-width: 600px) {
    .mc-hero {
        min-height: 540px;
    }

    .mc-hero__copy {
        top: 36px;
        width: calc(100% - 32px);
    }

    .mc-hero__copy h1 {
        font-size: 27px;
        line-height: 1.32;
    }

    .mc-hero__copy > p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.65;
    }

    .mc-hero__cta { margin-top: 20px; }
    .mc-hero__cta .mc-landing__start { min-height: 48px; font-size: 14px; }

    .mc-editor-proof,
    .mc-benefits,
    .mc-feature-summary { padding: 56px 0; }

    .mc-build-layout,
    .mc-benefits__inner,
    .mc-final-features,
    .mc-final-preview__head,
    .mc-final-preview__workspace,
    .mc-build-note { width: calc(100% - 32px); }

    .mc-build-copy h2,
    .mc-benefits__heading h2,
    .mc-final-features__copy h2,
    .mc-final-preview__head h2 { font-size: 25px; line-height: 1.38; }

    .mc-build-copy > p,
    .mc-benefits__heading > p,
    .mc-final-features__copy > p,
    .mc-final-preview__head > p { margin-top: 16px; font-size: 14px; line-height: 1.7; }

    .mc-build-lookbook {
        position: relative;
        width: 100%;
        height: min(148vw, 572px);
        margin: 34px auto 0;
    }
    .mc-build-sheet { width: min(72vw, 270px); }
    .mc-build-sheet img { height: min(122vw, 470px); }
    .mc-build-switcher { bottom: 0; }

    .mc-benefits__image { margin-top: 34px; }
    .mc-benefits__cards { margin-top: 26px; }

    .mc-final-features__list summary {
        min-height: 58px;
        grid-template-columns: 34px 1fr;
    }
    .mc-final-features__list details > p { margin: 0; padding: 0 0 18px 34px; }

    .mc-final-preview { padding-top: 56px; }
    .mc-final-preview__head { margin-bottom: 28px; }
    .mc-final-preview__workspace,
    body.mc-rail-open .mc-final-preview__workspace,
    body.mc-rail-collapsed .mc-final-preview__workspace {
        display: grid;
        width: calc(100% - 28px);
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .mc-preview-canvas {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 auto;
        aspect-ratio: 375 / 812;
        border-radius: 30px;
    }
    .mc-preview__stage,
    .mc-preview-phone {
        width: 100%;
        height: 100%;
        border-radius: 30px;
    }
    .mc-skin-rail {
        width: 100%;
        height: min(730px, calc(100vh - 72px));
        min-height: 600px;
        border-radius: 18px;
    }
    .mc-skin-rail__menu,
    body.mc-rail-open .mc-skin-rail__menu,
    body.mc-rail-collapsed .mc-skin-rail__menu,
    body.mc-list-docked .mc-skin-rail__menu { padding: 14px 14px 0; }
    .mc-skin-rail__list,
    body.mc-rail-open .mc-skin-rail__list,
    body.mc-rail-collapsed .mc-skin-rail__list,
    body.mc-list-docked .mc-skin-rail__list { padding: 14px; }
    .mc-skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .mc-final-preview__cta { width: 100%; min-height: 68px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); justify-self: stretch; }
    .mc-final-preview__cta small { max-width: 156px; font-size: 12px; }
    .mc-final-preview__cta .mc-landing__start { min-width: 168px; padding-inline: 14px; }

    .mc-rail-invite:not([hidden]) {
        display: flex !important;
        top: auto;
        right: 0;
        bottom: calc(14px + env(safe-area-inset-bottom));
        left: 0;
        width: 164px;
        height: 44px;
        padding-left: 14px;
        border-radius: 999px;
        transform: none !important;
    }
    .mc-rail-invite__handle { width: 32px; height: 32px; flex-basis: 32px; }
}

@media (max-width: 320px) {
    .mc-preview-canvas {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .mc-hero__copy h1 { font-size: 26px; }
    .mc-build-copy h2,
    .mc-benefits__heading h2,
    .mc-final-features__copy h2,
    .mc-final-preview__head h2 { font-size: 25px; }
    .mc-final-preview__cta small { display: none; }
    .mc-final-preview__cta .mc-landing__start { width: 100%; }
}

/* Feedback pass: calmer canvas, editor-consistent skin cards, detached proof controls. */
.mc-editor-proof,
.mc-benefits,
.mc-feature-summary,
.mc-final-preview {
    background: #f3f4f5;
}

.mc-editor-proof,
.mc-benefits,
.mc-feature-summary {
    border-top: 1px solid rgba(24, 24, 23, .06);
}

.mc-build-lookbook { width: min(500px, 100%); }
.mc-build-sheet {
    border-color: var(--mc-line);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(24, 24, 23, .08);
}
.mc-build-switcher {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    padding: 0;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: translateY(-50%);
}
.mc-build-switcher button {
    width: 54px;
    height: 72px;
    padding: 3px;
    border-color: var(--mc-line);
    border-radius: 8px;
    background: var(--mc-white);
    opacity: .72;
}
.mc-build-switcher button[aria-pressed="true"] {
    border-color: var(--mc-ink);
    transform: none;
}

.mc-final-preview__workspace,
body.mc-rail-open .mc-final-preview__workspace,
body.mc-rail-collapsed .mc-final-preview__workspace {
    width: min(1000px, calc(100% - 48px));
    grid-template-columns: 375px minmax(0, 1fr);
    gap: 48px;
}
.mc-final-preview__decision,
.mc-preview-canvas { background: var(--mc-white); }
.mc-final-preview__decision { padding-inline: 24px; border: 1px solid var(--mc-line); border-radius: 8px; }

.mc-skin-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}
.mc-skin-card { position: relative; display: flex; flex-direction: column; gap: 5px; }
.mc-skin-thumb {
    aspect-ratio: 9 / 16;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f5f5f5;
}
.mc-skin-card:hover .mc-skin-thumb { border-color: #bbb; }
.mc-skin-card.is-selected .mc-skin-thumb { border-color: var(--mc-ink); }
.mc-skin-meta {
    position: absolute;
    z-index: 2;
    left: 7px;
    bottom: 8px;
    min-height: 0;
    padding: 0;
    pointer-events: none;
}
.mc-badge {
    display: inline-flex;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 10px;
    align-items: center;
    background: #729be8;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}
.mc-skin-card.is-selected .mc-skin-thumb::after { top: 7px; right: 7px; width: 22px; height: 22px; }

@media (max-width: 860px) {
    .mc-build-lookbook { width: 100%; }
    .mc-build-switcher {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        flex-direction: row;
        gap: 10px;
        transform: translateX(-50%);
    }
    .mc-build-switcher button { width: 48px; height: 64px; }
    .mc-final-preview__workspace,
    body.mc-rail-open .mc-final-preview__workspace,
    body.mc-rail-collapsed .mc-final-preview__workspace {
        width: min(100% - 32px, 560px);
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .mc-final-preview__decision { padding-inline: 16px; }
}

@media (max-width: 300px) {
    .mc-final-preview__workspace,
    body.mc-rail-open .mc-final-preview__workspace,
    body.mc-rail-collapsed .mc-final-preview__workspace {
        width: 100%;
    }
    .mc-preview-canvas,
    .mc-preview-phone,
    .mc-skin-rail {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-build-sheet,
    .mc-rail-invite,
    .mc-skin-card * { transition: none !important; }
}

/* Renewal-system alignment: clean editorial surfaces and explicit catalog disclosure. */
.mc-final-preview { background: var(--mc-white); }
.mc-benefits,
.mc-feature-summary,
.mc-skin-rail__inner,
.mc-skin-rail__list { background: var(--mc-white); }

.mc-final-preview__workspace,
body.mc-rail-open .mc-final-preview__workspace,
body.mc-rail-collapsed .mc-final-preview__workspace {
    width: min(1200px, calc(100% - 48px));
    grid-template-columns: 375px minmax(0, 1fr);
    gap: 40px;
}

.mc-final-preview__decision {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid var(--mc-line);
    border-bottom: 1px solid var(--mc-line);
}

.mc-final-preview__selection { padding: 28px 0 24px; }
.mc-final-preview__selection span {
    display: block;
    margin-bottom: 8px;
    color: var(--mc-muted);
    font-size: 14px;
}
.mc-final-preview__selection strong {
    color: var(--mc-ink);
    font-size: 24px;
    line-height: 1.35;
}

.mc-catalog-disclosure__toggle {
    display: grid;
    width: 100%;
    min-height: 72px;
    padding: 14px 48px 14px 0;
    border: 0;
    border-top: 1px solid var(--mc-line);
    border-bottom: 1px solid var(--mc-line);
    border-radius: 0;
    background: var(--mc-white);
    color: var(--mc-ink);
    text-align: left;
    position: relative;
}
.mc-catalog-disclosure__toggle span { font-size: 16px; font-weight: 700; }
.mc-catalog-disclosure__toggle small { margin-top: 4px; color: var(--mc-muted); font-size: 14px; }
.mc-catalog-disclosure__toggle::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 2px;
    font-size: 24px;
    font-weight: 300;
    transform: translateY(-50%);
}
.mc-catalog-disclosure__toggle[aria-expanded="true"]::after { content: "−"; }
.mc-catalog-disclosure__toggle:focus-visible { outline: 2px solid var(--mc-focus); outline-offset: 3px; }

.mc-skin-rail[hidden] { display: none !important; }
.mc-final-preview__decision .mc-skin-rail {
    width: 100%;
    height: 650px;
    min-height: 650px;
    margin: 24px 0;
    border-radius: 8px;
    box-shadow: none;
}
.mc-final-preview__workspace.is-catalog-open { align-items: start; }
.mc-final-preview__workspace.is-catalog-open .mc-final-preview__decision { justify-content: flex-start; }
.mc-final-preview__cta {
    padding: 24px 0 28px;
    border-top: 0;
    flex-wrap: wrap;
}
.mc-final-preview__cta .mc-landing__start { min-height: 52px; font-size: 16px; }
.mc-final-preview__cta small { font-size: 14px; }

.mc-skin-rail { border-radius: 8px; box-shadow: none; }
.mc-catalog-mood,
.mc-landing .skin-fchip { border-radius: 8px; font-size: 14px; }
.mc-catalog-moods__label,
.mc-skin-count,
.mc-catalog-filter-toggle,
.mc-landing .skin-filter__label,
.mc-badge,
.mc-gallery-more > button,
.mc-gallery-more p { font-size: 14px; }
.mc-skin-thumb { background: var(--mc-product-stage); }
.mc-rail-invite { height: 48px; border-radius: 8px; }
.mc-rail-invite__handle { border-radius: 6px; }

.mc-hero__copy h1 { font-size: 36px; }
.mc-build-copy h2,
.mc-benefits__heading h2,
.mc-final-features__copy h2,
.mc-final-preview__head h2 { font-size: 28px; }
.mc-hero__copy > p,
.mc-benefits__heading > p,
.mc-final-preview__head > p { font-size: 16px; }

@media (max-width: 860px) {
    .mc-final-preview__workspace,
    body.mc-rail-open .mc-final-preview__workspace,
    body.mc-rail-collapsed .mc-final-preview__workspace {
        width: min(100% - 32px, 560px);
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .mc-final-preview__decision { width: 100%; }
    .mc-final-preview__selection { padding-top: 24px; }
    .mc-final-preview__decision .mc-skin-rail { height: min(680px, calc(100vh - 96px)); min-height: 560px; }
    .mc-final-preview__cta { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .mc-hero__copy h1 { font-size: 30px; }
    .mc-build-copy h2,
    .mc-benefits__heading h2,
    .mc-final-features__copy h2,
    .mc-final-preview__head h2 { font-size: 24px; }
    .mc-rail-invite:not([hidden]) { height: 48px; border-radius: 8px; }
}

@media (max-width: 360px) {
    .mc-hero__copy h1 { font-size: 30px; }
    .mc-build-copy h2,
    .mc-benefits__heading h2,
    .mc-final-features__copy h2,
    .mc-final-preview__head h2 { font-size: 24px; }
}

/* Final landing overrides must follow the preview bundle styles loaded by this legacy page. */
.mc-landing .mc-editor-proof,
.mc-landing .mc-benefits,
.mc-landing .mc-feature-summary,
.mc-landing .mc-final-preview { background: #f3f4f5 !important; }

.mc-landing .mc-final-preview__workspace,
body .mc-landing .mc-final-preview__workspace {
    width: min(1000px, calc(100% - 48px));
    grid-template-columns: 375px minmax(0, 1fr);
    gap: 48px;
}
.mc-landing .mc-final-preview__decision { padding-inline: 24px; background: #fff; }
.mc-landing .mc-skin-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
.mc-landing .mc-skin-thumb {
    aspect-ratio: 9 / 16 !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f5f5f5;
}
.mc-landing .mc-skin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mc-landing .mc-skin-meta {
    position: absolute;
    z-index: 2;
    left: 7px;
    bottom: 8px;
    min-height: 0;
    padding: 0;
}
.mc-landing .mc-badge {
    padding: 2px 7px;
    border-radius: 10px;
    background: #729be8;
    color: #fff;
    font-size: 10px;
}
.mc-landing .mc-build-switcher {
    top: 50%; right: 0; bottom: auto; left: auto;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
}

@media (max-width: 860px) {
    .mc-landing .mc-final-preview__workspace,
    body .mc-landing .mc-final-preview__workspace {
        width: min(100% - 32px, 560px);
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .mc-landing .mc-final-preview__decision { padding-inline: 16px; }
    .mc-landing .mc-build-switcher {
        top: auto; right: auto; bottom: 0; left: 50%;
        flex-direction: row;
        transform: translateX(-50%);
    }
}

/* Page rhythm colors — intentionally last in the legacy cascade. */
.mc-landing .mc-feature-summary { background: #222629 !important; }
.mc-landing .mc-final-preview { background: #e9ecee !important; }

/* Open gallery composition. */
.mc-landing .mc-editor-proof { background: #eef0f2 !important; }
.mc-landing .mc-benefits { background: #e5e8ea !important; }
.mc-landing .mc-feature-summary { background: #f1f2f3 !important; }
.mc-landing .mc-final-preview { background: #e4e8ea !important; }
.mc-landing .mc-feature-summary .mc-final-features__copy h2,
.mc-landing .mc-feature-summary .mc-final-features__list summary { color: var(--mc-ink); }
.mc-landing .mc-feature-summary .mc-final-features__copy > span,
.mc-landing .mc-feature-summary .mc-final-features__copy > p,
.mc-landing .mc-feature-summary .mc-final-features__list summary b,
.mc-landing .mc-feature-summary .mc-final-features__list details > p { color: var(--mc-muted); }
.mc-landing .mc-feature-summary .mc-final-features__list,
.mc-landing .mc-feature-summary .mc-final-features__list details { border-color: rgba(24, 24, 23, .14); }

.mc-landing .mc-final-preview__head {
    width: min(1120px, calc(100% - 48px));
}
.mc-landing .mc-final-preview__workspace,
body .mc-landing .mc-final-preview__workspace {
    width: min(1120px, calc(100% - 48px));
    grid-template-columns: 375px minmax(0, 1fr);
    gap: 40px;
}
.mc-landing .mc-final-preview__preview-column {
    display: flex;
    width: 375px;
    min-width: 0;
    flex-direction: column;
}
.mc-landing .mc-final-preview__decision { min-width: 0; }
.mc-landing .mc-final-preview__decision .mc-skin-rail {
    width: 100%;
    height: 884px;
    min-height: 884px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}
.mc-landing .mc-skin-rail__inner,
.mc-landing .mc-skin-rail__menu,
.mc-landing .mc-skin-rail__list { background: transparent; }
.mc-landing .mc-skin-rail__menu,
body .mc-landing .mc-skin-rail__menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 0 0 16px;
    align-items: end;
    border-bottom: 1px solid rgba(24, 24, 23, .14);
}
.mc-landing .mc-catalog-moods__label { display: none; }
.mc-landing .mc-catalog-moods__options { gap: 6px; }
.mc-landing .mc-catalog-mood { min-height: 44px; padding-inline: 9px; background: rgba(255,255,255,.72); }
.mc-landing .mc-catalog-toolbar { min-height: 44px; gap: 8px; }
.mc-landing .mc-skin-count { white-space: nowrap; }
.mc-landing .mc-catalog-filter-panel { grid-column: 1 / -1; }
.mc-landing .mc-skin-rail__list,
body .mc-landing .mc-skin-rail__list { padding: 20px 0 0; }
.mc-landing .mc-skin-grid { gap: 14px 10px !important; }
.mc-landing .mc-final-preview__cta {
    display: flex;
    padding: 16px 0 0;
    flex-direction: column;
    gap: 8px;
}
.mc-landing .mc-final-preview__cta .mc-landing__start { width: 100%; }
.mc-landing .mc-final-preview__cta small { order: 0; text-align: center; }

@media (max-width: 860px) {
    .mc-landing .mc-final-preview__head,
    .mc-landing .mc-final-preview__workspace,
    body .mc-landing .mc-final-preview__workspace { width: min(100% - 32px, 560px); }
    .mc-landing .mc-final-preview__workspace,
    body .mc-landing .mc-final-preview__workspace {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    .mc-landing .mc-final-preview__preview-column { width: 100%; align-items: center; }
    .mc-landing .mc-final-preview__preview-column .mc-final-preview__cta { width: min(375px, 100%); }
    .mc-landing .mc-final-preview__decision .mc-skin-rail {
        height: min(720px, calc(100vh - 76px));
        min-height: 600px;
    }
    .mc-landing .mc-skin-rail__menu,
    body .mc-landing .mc-skin-rail__menu {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .mc-landing .mc-catalog-toolbar { justify-content: space-between; }
}

/* Keep the finale luminous without returning to a bright or yellow page. */
.mc-landing .mc-final-preview {
    background:
        radial-gradient(circle at 28% 38%, rgba(255, 255, 255, .96) 0, rgba(255, 255, 255, .62) 22%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(135deg, #eef1f3 0%, #e3e8eb 100%) !important;
}

/* Final palette override — must remain last in the legacy cascade. */
.mc-landing .mc-editor-proof { background: #f8f7fa !important; }
.mc-landing .mc-benefits { background: #fdfcfe !important; }
.mc-landing .mc-feature-summary { background: #f3f1f6 !important; }
.mc-landing .mc-final-preview {
    background:
        radial-gradient(circle at 27% 38%, rgba(255, 255, 255, .98) 0, rgba(255, 255, 255, .7) 21%, rgba(255, 255, 255, 0) 51%),
        radial-gradient(circle at 72% 72%, rgba(238, 233, 246, .72) 0, rgba(238, 233, 246, 0) 42%),
        linear-gradient(135deg, #f5f3f8 0%, #ebe8f1 100%) !important;
}
.mc-landing .mc-editor-proof,
.mc-landing .mc-benefits,
.mc-landing .mc-feature-summary,
.mc-landing .mc-final-preview { border-color: #e2dee8; }
.mc-landing .mc-catalog-mood,
.mc-landing .mc-catalog-filter-toggle,
.mc-landing .mc-skin-thumb { border-color: #ddd9e4; }
.mc-landing .mc-catalog-mood { background: rgba(255, 255, 255, .74); }

/* Compact catalog header — final specificity override. */
.mc-landing .mc-skin-rail .mc-skin-rail__menu,
body .mc-landing .mc-skin-rail .mc-skin-rail__menu { padding: 12px 0 8px !important; }
.mc-landing .mc-skin-rail .mc-catalog-toolbar {
    min-height: 44px !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
.mc-landing .mc-skin-rail__list,
body .mc-landing .mc-skin-rail__list { padding-top: 16px !important; }

/* Final comparison composition — keep copy, invitation and choices together. */
.mc-landing .mc-build-switcher::before { display: none; }

@media (min-width: 861px) {
    .mc-landing .mc-editor-proof { padding: 80px 0; }

    .mc-landing .mc-build-layout {
        width: min(1040px, calc(100% - 48px));
        min-height: 640px;
        grid-template-columns: 320px 600px;
        gap: 72px;
        justify-content: center;
    }

    .mc-landing .mc-build-lookbook {
        width: 600px;
        height: 640px;
        max-width: none;
    }

    .mc-landing .mc-build-lookbook::before {
        position: absolute;
        inset: 24px 0 16px 48px;
        border: 1px solid rgba(86, 79, 98, .12);
        background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(239, 237, 244, .82));
        content: "";
    }

    .mc-landing .mc-build-sheet { left: 43%; }

    .mc-landing .mc-build-switcher {
        top: 50%;
        right: 28px;
        bottom: auto;
        left: auto;
        width: 76px;
        padding: 14px 10px;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        transform: translateY(-50%);
    }

    .mc-landing .mc-build-switcher__label {
        color: var(--mc-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.35;
        text-align: center;
    }

    .mc-landing .mc-build-switcher button {
        width: 54px;
        height: 68px;
    }
}

@media (min-width: 361px) and (max-width: 860px) {
    .mc-landing .mc-build-switcher__label { display: none; }

    .mc-landing .mc-build-sheet {
        left: 0;
        transform: translateY(8px) scale(.985);
        transform-origin: top left;
    }

    .mc-landing .mc-build-switcher {
        top: 50%;
        right: 0;
        bottom: auto;
        left: auto;
        width: 44px;
        flex-direction: column;
        transform: translateY(-50%);
    }

    .mc-landing .mc-build-switcher button {
        width: 44px;
        height: 56px;
    }
}

/* Comparison section: one clear preview with three named choices. */
.mc-landing .mc-editor-proof { padding: 80px 0; }

.mc-landing .mc-build-layout {
    display: block;
    width: min(760px, calc(100% - 48px));
    min-height: 0;
}

.mc-landing .mc-build-copy {
    width: min(620px, 100%);
    margin-inline: auto;
    text-align: center;
}

.mc-landing .mc-build-copy > span { margin-bottom: 10px; }

.mc-landing .mc-build-lookbook {
    width: 480px;
    height: 704px;
    margin: 40px auto 0;
}

.mc-landing .mc-build-lookbook::before { display: none; }

.mc-landing .mc-build-sheet {
    left: 50%;
    width: 360px;
    transform-origin: top center;
}

.mc-landing .mc-build-sheet.is-active { transform: translateX(-50%); }

.mc-landing .mc-build-switcher {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    display: grid;
    width: 420px;
    padding: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    border-radius: 8px;
    transform: translateX(-50%);
}

.mc-landing .mc-build-switcher__label {
    grid-column: 1 / -1;
    color: var(--mc-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

.mc-landing .mc-build-switcher button {
    display: flex;
    width: 100%;
    height: 62px;
    padding: 5px 8px;
    align-items: center;
    gap: 9px;
    border-radius: 6px;
}

.mc-landing .mc-build-switcher button[aria-pressed="true"] {
    background: #f1eff4;
    transform: none;
}

.mc-landing .mc-build-switcher button img {
    width: 36px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 3px;
}

.mc-landing .mc-build-switcher button span {
    color: var(--mc-ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .mc-landing .mc-editor-proof { padding: 56px 0; }

    .mc-landing .mc-build-layout { width: calc(100% - 32px); }

    .mc-landing .mc-build-copy h2 { font-size: 24px; }

    .mc-landing .mc-build-lookbook {
        width: 100%;
        height: calc(min(134vw, 540px) + 116px);
        margin-top: 32px;
    }

    .mc-landing .mc-build-sheet { width: min(78vw, 320px); }
    .mc-landing .mc-build-sheet img { height: min(134vw, 540px); }

    .mc-landing .mc-build-switcher { width: min(340px, 100%); }

    .mc-landing .mc-build-switcher__label {
        display: block;
        text-align: center;
    }

    .mc-landing .mc-build-switcher button {
        height: 64px;
        padding-inline: 5px;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
    }

    .mc-landing .mc-build-switcher button img {
        width: 30px;
        height: 38px;
    }

}

@media (max-width: 360px) {
    .mc-landing .mc-build-sheet { width: min(72vw, 230px); }
}

/* Gallery continuation is an action, not an empty full-width field. */
.mc-landing .mc-gallery-more {
    display: flex;
    padding-top: 28px;
    flex-direction: column;
    align-items: center;
}

.mc-landing .mc-gallery-more > button {
    width: min(280px, 100%);
    min-height: 50px;
    padding: 0 22px;
    gap: 10px;
    border: 1px solid var(--mc-cta);
    border-radius: 8px;
    background: var(--mc-cta);
    color: #fff !important;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.mc-landing .mc-gallery-more > button::after {
    content: "+";
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.mc-landing .mc-gallery-more > button:hover {
    border-color: var(--mc-cta-hover);
    background: var(--mc-cta-hover);
}

.mc-landing .mc-gallery-more > button:focus-visible {
    outline: 2px solid var(--mc-focus);
    outline-offset: 3px;
}

.mc-landing .mc-gallery-more p {
    margin: 10px 0 0;
    color: var(--mc-muted);
    font-size: 13px;
}

/* Finale refinement: one panel language, one selection mark, one badge tone. */
.mc-landing .mc-final-preview__workspace,
body .mc-landing .mc-final-preview__workspace { gap: 32px; }

.mc-landing .mc-preview-canvas,
.mc-landing .mc-final-preview__decision {
    border: 1px solid #d9d4e0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
}

.mc-landing .mc-preview-canvas {
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(56, 49, 66, .06);
}

.mc-landing .mc-final-preview__decision {
    padding-inline: 24px;
    overflow: hidden;
}

.mc-landing .mc-final-preview__decision .mc-skin-rail {
    width: 100%;
    height: 812px;
    min-height: 812px;
}

.mc-landing .mc-skin-grid { gap: 16px 12px !important; }

.mc-landing .mc-skin-thumb {
    border-color: #d9d4e0;
    border-radius: 6px;
}

.mc-landing .mc-skin-card.is-selected .mc-skin-thumb { border: 2px solid var(--mc-ink); }
.mc-landing .mc-skin-card.is-selected .mc-skin-thumb::after { content: none; }

.mc-landing .mc-badge {
    min-height: 21px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #625b6d !important;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 860px) {
    .mc-landing .mc-final-preview__workspace,
    body .mc-landing .mc-final-preview__workspace {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .mc-landing .mc-final-preview__preview-column { display: none !important; }
    .mc-landing .mc-final-preview__decision { padding-inline: 16px; }
    .mc-landing .mc-final-preview__decision .mc-skin-rail {
        height: min(720px, calc(100vh - 76px));
        min-height: 600px;
    }
}

@media (max-width: 600px) {
    .mc-landing .mc-gallery-more {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .mc-landing .mc-gallery-more > button { width: 100%; }
}

@media (max-width: 860px) {
    .mc-landing .mc-skin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 12px !important;
    }

    .mc-mobile-preview-overlay {
        display: block;
        padding: 0;
        background: #fff;
    }

    .mc-mobile-preview-card {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .mc-mobile-preview-card::before { display: none; }

    .mc-mobile-preview-mount {
        min-height: 100%;
        overscroll-behavior: contain;
    }

    .mc-mobile-preview-close {
        z-index: 12;
        top: calc(12px + env(safe-area-inset-top));
        right: 12px;
        border-radius: 50%;
        background: rgba(24, 24, 23, .78);
        box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
    }

    .mc-mobile-preview-action {
        position: absolute;
        z-index: 11;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 12px;
        width: auto;
        padding: 0;
        border-radius: 8px;
        background: transparent;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    }

    .mc-mobile-preview-action p { display: none; }

    .mc-mobile-preview-direct {
        min-height: 52px;
        border-radius: 8px;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .mc-landing .mc-build-sheet {
        left: 50%;
        width: min(72vw, 230px);
        transform: translateX(-50%) translateY(8px) scale(.985);
        transform-origin: top center;
    }

    .mc-landing .mc-build-sheet.is-active { transform: translateX(-50%); }

    .mc-landing .mc-build-switcher {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
    }

    .mc-landing .mc-build-switcher button {
        width: 100%;
        height: 64px;
    }
}

/* Desktop compares all three results at once; mobile keeps one-at-a-time tabs. */
@media (min-width: 861px) {
    .mc-landing .mc-editor-proof { padding: 76px 0 84px; }

    .mc-landing .mc-build-layout {
        display: block;
        width: min(1080px, calc(100% - 48px));
    }

    .mc-landing .mc-build-lookbook {
        display: grid;
        width: 100%;
        height: auto;
        margin-top: 42px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .mc-landing .mc-build-sheet,
    .mc-landing .mc-build-sheet.is-active {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        padding: 8px;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .mc-landing .mc-build-sheet img { height: 500px; }

    .mc-landing .mc-build-switcher { display: none; }
}

@media (max-width: 860px) {
    .mc-landing .mc-build-lookbook {
        position: relative;
        display: block;
        width: 100%;
        height: calc(min(134vw, 540px) + 116px);
    }

    .mc-landing .mc-build-sheet {
        position: absolute;
        top: 0;
        left: 50%;
        width: min(78vw, 320px);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(8px) scale(.985);
        transform-origin: top center;
    }

    .mc-landing .mc-build-sheet.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%);
    }

    .mc-landing .mc-build-switcher {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        display: grid;
        width: min(340px, 100%);
        transform: translateX(-50%);
    }
}

@media (max-width: 360px) {
    .mc-landing .mc-build-sheet { width: min(72vw, 230px); }
    .mc-landing .mc-build-switcher { width: 100%; }
}

/* Keep the finale heading, CTA and workspace on the same outer grid. */
@media (min-width: 861px) {
    .mc-landing .mc-final-preview__head {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 32px;
    }

    .mc-landing .mc-final-preview__head-copy {
        width: 100%;
        max-width: none;
        margin: 0;
        justify-self: stretch;
    }
}

/* PC catalog: denser four-column gallery and a compact utility filter. */
@media (min-width: 861px) {
    .mc-landing .mc-skin-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px 10px !important;
    }

    .mc-landing .mc-catalog-filter-panel { padding: 2px 0 10px; }

    .mc-landing .mc-catalog-filter-panel .skin-filter {
        padding: 10px 12px;
        gap: 6px;
    }

    .mc-landing .mc-catalog-filter-panel .skin-filter__row {
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 8px;
    }

    .mc-landing .mc-catalog-filter-panel .skin-filter__label {
        width: 38px;
        font-size: 12px;
    }

    .mc-landing .mc-catalog-filter-panel .skin-filter__chips { gap: 5px; }

    .mc-landing .mc-catalog-filter-panel .skin-fchip {
        min-height: 34px;
        padding: 0 9px;
        border-radius: 6px;
        font-size: 12px;
    }

    .mc-landing .mc-catalog-filter-panel .skin-fchip--color {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 7px;
    }

    .mc-landing .mc-catalog-filter-panel .skin-fchip--color .skin-fchip__sw {
        width: 20px;
        height: 20px;
    }
}

/* Match the editor's flat filter bar: no oversized nested panel. */
.mc-landing .mc-catalog-filter-panel {
    margin-top: 4px;
    padding: 8px 0 10px;
    border-top: 1px solid rgba(24, 24, 23, .12);
    background: transparent;
}

.mc-landing .mc-catalog-filter-panel .skin-filter {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mc-landing .mc-catalog-filter-panel .skin-filter__label {
    color: #77736e;
    font-weight: 500;
}

.mc-landing .mc-catalog-filter-panel .skin-fchip {
    border-color: #dedbd7;
    background: #fff;
    box-shadow: none;
}

.mc-landing .mc-catalog-filter-panel .skin-fchip.is-on {
    border-color: #242423;
    background: #fff;
}

.mc-landing .mc-catalog-filter-panel .skin-fchip:not(.skin-fchip--color)::before,
.mc-landing .mc-catalog-filter-panel .skin-fchip:not(.skin-fchip--color)::after {
    content: none !important;
    display: none !important;
}

.mc-landing .mc-catalog-filter-panel .skin-fchip--color,
.mc-landing .mc-catalog-filter-panel .skin-fchip--color.is-on {
    border-color: transparent;
    background: transparent;
}

.mc-landing .mc-catalog-filter-panel .skin-fchip--color .skin-fchip__sw {
    position: relative;
}

.mc-landing .mc-catalog-filter-panel .skin-fchip--color.is-on .skin-fchip__sw {
    outline: 0;
}

.mc-landing .mc-catalog-filter-panel .skin-fchip--color.is-on .skin-fchip__sw::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 8px;
    border: solid #454545;
    border-width: 0 1px 1px 0;
    transform: translate(-50%, -58%) rotate(45deg);
}

.mc-landing .mc-catalog-filter-panel .skin-fchip--color[data-mc-color-filter="red"].is-on .skin-fchip__sw::after,
.mc-landing .mc-catalog-filter-panel .skin-fchip--color[data-mc-color-filter="black"].is-on .skin-fchip__sw::after,
.mc-landing .mc-catalog-filter-panel .skin-fchip--color[data-mc-color-filter="multi"].is-on .skin-fchip__sw::after {
    border-color: #fff;
}

.mc-landing .mc-gallery-more > button {
    border-color: #cfcfcf;
    background: #fff;
    color: var(--mc-ink) !important;
}

.mc-landing .mc-gallery-more > button:hover {
    border-color: #aaa;
    background: #f7f7f7;
}

@media (max-width: 600px) {
    .mc-landing .mc-catalog-filter-panel .skin-filter__chips {
        flex-wrap: nowrap;
        padding-bottom: 2px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
}

/* Conversion flow: concise persuasion, one catalog, then a quiet luminous CTA. */

.mc-landing .mc-design-picker {
    padding-block: 68px 80px;
    background: #f7f6f8 !important;
    border-color: #e8e5eb;
}

.mc-landing .mc-design-picker .mc-final-preview__head {
    display: block;
    margin-bottom: 28px;
}

.mc-landing .mc-design-picker .mc-final-preview__head-copy {
    max-width: 620px;
}

@media (min-width: 861px) {
    .mc-landing .mc-design-picker .mc-final-preview__head,
    .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace {
        width: min(1160px, calc(100% - 48px));
    }

    .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 28px;
    }

    .mc-landing .mc-design-picker .mc-final-preview__preview-column { width: 320px; }

    .mc-landing .mc-design-picker .mc-skin-rail__menu,
    body .mc-landing .mc-design-picker .mc-skin-rail__menu {
        padding: 0 0 10px !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
    }

    .mc-landing .mc-design-picker .mc-catalog-moods__options { gap: 2px; }

    .mc-landing .mc-design-picker .mc-catalog-mood {
        min-height: 38px;
        padding-inline: 7px;
        border-color: transparent;
        background: transparent;
        font-size: 12px;
    }

    .mc-landing .mc-design-picker .mc-catalog-mood.is-active {
        border-color: transparent;
        border-bottom-color: var(--mc-ink);
        border-radius: 0;
    }

    .mc-landing .mc-design-picker .mc-catalog-toolbar {
        min-height: 38px !important;
        margin: 0 !important;
    }

    .mc-landing .mc-design-picker .mc-catalog-filter-toggle {
        min-height: 38px;
        padding-inline: 8px;
        font-size: 12px;
    }

    .mc-landing .mc-design-picker .mc-skin-count { font-size: 12px; }
    .mc-landing .mc-design-picker .mc-skin-rail__list,
    body .mc-landing .mc-design-picker .mc-skin-rail__list { padding-top: 12px !important; }
}

.mc-landing .mc-editor-proof,
.mc-landing .mc-feature-summary { background: #fff !important; }

.mc-landing .mc-benefits { background: #f7f6f8 !important; }

.mc-landing .mc-conversion-finale {
    position: relative;
    min-height: 0;
    padding: 82px 24px 88px;
    overflow: hidden;
    border-top: 1px solid #e3dfe8;
    background:
        radial-gradient(circle at 22% 30%, rgba(227, 220, 240, .58), transparent 38%),
        radial-gradient(circle at 78% 70%, rgba(238, 230, 241, .58), transparent 38%),
        #f7f6f8;
}

.mc-landing .mc-conversion-finale__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.8) 50%, transparent 72%);
    transform: translateX(-34%);
    animation: mc-finale-glow 7s ease-in-out infinite alternate;
}

.mc-landing .mc-conversion-finale__inner {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(1080px, 100%);
    margin: 0 auto;
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
    align-items: center;
    gap: 36px;
    text-align: center;
}

.mc-landing .mc-conversion-finale__copy > span,
.mc-landing .mc-conversion-finale__action > span {
    color: #706a77;
    font-size: 13px;
    font-weight: 700;
}

.mc-landing .mc-conversion-finale__copy h2 {
    margin: 16px 0 20px;
    color: var(--mc-ink);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.035em;
}

.mc-landing .mc-conversion-finale__copy p {
    max-width: 430px;
    margin: 0 auto;
    color: #66616a;
    font-size: 15px;
    line-height: 1.8;
}

.mc-landing .mc-conversion-finale__action {
    width: min(360px, 100%);
    min-width: 0;
    margin: 0 auto;
}

.mc-landing .mc-conversion-finale__action .mc-landing__start { width: 100%; }

.mc-landing .mc-conversion-finale__action small {
    display: block;
    margin-top: 12px;
    color: #77717c;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

@keyframes mc-finale-glow {
    to { transform: translateX(34%); }
}

@media (min-width: 861px) and (max-width: 959px) {
    .mc-landing .mc-skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 860px) {
    .mc-landing .mc-design-picker { padding-block: 56px 64px; }
    .mc-landing .mc-design-picker .mc-final-preview__head { margin-bottom: 24px; }
    .mc-landing .mc-design-picker .mc-final-preview__cta { display: none; }

    .mc-landing .mc-conversion-finale { padding: 72px 20px 88px; }

    .mc-landing .mc-conversion-finale__inner { gap: 30px; }

    .mc-landing .mc-conversion-finale__copy { text-align: center; }
    .mc-landing .mc-conversion-finale__copy h2 { font-size: 27px; }
    .mc-landing .mc-conversion-finale__copy p { margin-inline: auto; font-size: 14px; }

    .mc-landing .mc-conversion-finale__action small { font-size: 11px; }
}

@media (max-width: 420px) {
    .mc-landing .mc-conversion-finale__action .mc-landing__start { min-height: 48px; padding-inline: 10px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-landing .mc-conversion-finale__glow { animation: none; transform: none; }
}

/* Conversion rhythm: proof -> choose -> concise reassurance -> start. */
.mc-landing .mc-editor-proof {
    padding-block: 60px !important;
}

@media (min-width: 861px) {
    .mc-landing .mc-editor-proof {
        background: #f7f6f8 !important;
    }

    .mc-landing .mc-build-layout {
        display: grid;
        width: min(1160px, calc(100% - 48px));
        margin-inline: auto;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 64px;
        align-items: center;
    }

    .mc-landing .mc-build-copy {
        width: auto;
        margin: 0;
        text-align: left;
    }

    .mc-landing .mc-build-lookbook {
        width: 100%;
        height: 600px;
        margin: 0;
    }

    .mc-landing .mc-build-sheet {
        top: 58px;
        width: 218px;
        padding: 6px;
        opacity: .54;
        visibility: visible;
        cursor: pointer;
        transform: none;
        transition: left .45s ease, right .45s ease, top .45s ease, width .45s ease, opacity .3s ease, transform .45s ease;
    }

    .mc-landing .mc-build-sheet img {
        height: 458px;
    }

    .mc-landing .mc-build-sheet.is-before {
        right: auto;
        left: 0;
        transform: rotate(-1.5deg);
    }

    .mc-landing .mc-build-sheet.is-after {
        right: 0;
        left: auto;
        transform: rotate(1.5deg);
    }

    .mc-landing .mc-build-sheet.is-active {
        top: 0;
        right: auto;
        left: 50%;
        z-index: 3;
        width: 318px;
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%);
    }

    .mc-landing .mc-build-sheet.is-active img {
        height: 540px;
    }

    .mc-landing .mc-build-sheet:hover:not(.is-active) {
        opacity: .78;
    }

    .mc-landing .mc-build-sheet:focus-visible {
        outline: 2px solid var(--mc-focus);
        outline-offset: 4px;
        opacity: 1;
    }

    .mc-landing .mc-build-switcher {
        display: none;
    }
}

.mc-landing .mc-benefits,
.mc-landing .mc-feature-summary {
    background: #fff !important;
}

.mc-landing .mc-final-preview__head h2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.42;
}

.mc-landing .mc-final-preview__head p {
    font-size: 15px;
    line-height: 1.75;
}

.mc-landing .mc-feature-summary {
    display: none !important;
}

.mc-landing .mc-catalog-finish {
    display: flex;
    width: min(300px, calc(100% - 32px));
    margin: 32px auto 0;
    padding: 0;
    align-items: center;
}

.mc-landing .mc-catalog-finish .mc-landing__start {
    width: 100%;
    min-height: 48px;
    margin-inline: auto;
}

.mc-landing .mc-benefits {
    padding: 72px 0 38px;
    border-bottom: 0;
}

.mc-landing .mc-benefits__inner {
    width: min(1160px, calc(100% - 48px));
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    grid-template-areas: none;
    gap: 56px;
    align-items: center;
}

.mc-landing .mc-benefits__image {
    grid-area: auto;
    align-self: center;
}

.mc-landing .mc-benefits__content {
    display: flex;
    min-width: 0;
    gap: 30px;
    flex-direction: column;
}

.mc-landing .mc-benefits__heading,
.mc-landing .mc-benefits__cards {
    width: 100%;
    grid-area: auto;
}

.mc-landing .mc-benefits__heading {
    padding: 0;
    text-align: left;
}

.mc-landing .mc-benefits__heading h2 {
    margin-bottom: 12px;
}

.mc-landing .mc-benefits__cards > div {
    padding: 13px 0 13px 25px;
}

.mc-landing .mc-benefits__cards > div > span {
    top: 16px;
    width: 16px;
    height: 16px;
}

.mc-landing .mc-benefits__cards strong { font-size: 14px; }
.mc-landing .mc-benefits__cards p { margin-top: 3px; line-height: 1.55; }

.mc-landing .mc-feature-summary {
    padding: 34px 0 76px;
    border-top: 0;
}

.mc-landing .mc-final-features {
    padding-top: 34px;
    border-top: 1px solid #e5e3e7;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 48px;
}

.mc-landing .mc-final-features__copy {
    position: static;
}

.mc-landing .mc-final-features__list summary {
    min-height: 54px;
    grid-template-columns: 40px 150px 1fr;
}

.mc-landing .mc-final-features__list details > p {
    margin: -36px 0 0 190px;
    padding-bottom: 16px;
}

@media (max-width: 860px) {
    .mc-landing .mc-editor-proof { padding-block: 46px !important; }
    .mc-landing .mc-benefits { padding: 56px 0 24px; }
    .mc-landing .mc-benefits__inner {
        width: min(calc(100% - 32px), 600px);
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .mc-landing .mc-benefits__content { gap: 24px; }
    .mc-landing .mc-feature-summary { padding: 24px 0 64px; }
    .mc-landing .mc-final-features { padding-top: 28px; }
    .mc-landing .mc-catalog-finish { width: min(300px, calc(100% - 32px)); margin-top: 24px; padding: 0; }
    .mc-landing .mc-catalog-finish .mc-landing__start { min-height: 48px; padding-inline: 10px; font-size: 13px; }
}

/* Final 2·3 section contract. Keep this terminal block above earlier experiments. */
.mc-landing .mc-editor-proof {
    padding: 88px 0 96px !important;
    background: #f3f4f5 !important;
}

.mc-landing .mc-build-layout { width: min(1040px, calc(100% - 48px)); }
.mc-landing .mc-build-switcher { display: none !important; }

.mc-landing .mc-benefits {
    padding: 96px 0 !important;
    background: #fff !important;
}

.mc-landing .mc-benefits__inner {
    width: min(1100px, calc(100% - 48px));
    grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr);
    gap: 76px;
    align-items: center;
}

.mc-landing .mc-benefits__image {
    padding: 18px;
    border: 1px solid #e2e3e5;
    border-radius: 0;
    background: #f7f7f6;
}

.mc-landing .mc-benefits__image img { width: 100%; height: auto; border-radius: 0; }
.mc-landing .mc-benefits__content { gap: 34px; }
.mc-landing .mc-benefits__heading { text-align: left; }
.mc-landing .mc-benefits__heading h2 { font-size: 30px; line-height: 1.42; }
.mc-landing .mc-benefits__heading > p { max-width: 390px; font-size: 15px; line-height: 1.75; }
.mc-landing .mc-benefits__cards { border-top: 1px solid #dfe1e3; }
.mc-landing .mc-benefits__cards > div { min-height: 78px; padding: 18px 0 17px 30px; border-bottom: 1px solid #e5e6e8; }
.mc-landing .mc-benefits__cards > div > span { top: 22px; }
.mc-landing .mc-benefits__cards strong { font-size: 15px; }
.mc-landing .mc-benefits__cards p { color: #717479; font-size: 13px; }

@media (min-width: 861px) {
    .mc-landing .mc-build-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 84px;
    }

    .mc-landing .mc-build-lookbook { width: 100%; height: 700px; margin: 0; }

    .mc-landing .mc-build-sheet,
    .mc-landing .mc-build-sheet.is-before,
    .mc-landing .mc-build-sheet.is-after,
    .mc-landing .mc-build-sheet.is-active {
        top: 0;
        right: auto;
        left: 50%;
        width: 242px;
        padding: 7px;
    }

    .mc-landing .mc-build-sheet,
    .mc-landing .mc-build-sheet.is-before,
    .mc-landing .mc-build-sheet.is-after {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 12px) scale(.985);
    }

    .mc-landing .mc-build-sheet.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%);
    }

    .mc-landing .mc-build-sheet img,
    .mc-landing .mc-build-sheet.is-active img {
        width: 100%;
        height: auto;
        aspect-ratio: 11 / 30;
        object-fit: cover;
    }
}

@media (max-width: 860px) {
    .mc-landing .mc-editor-proof { padding: 68px 0 76px !important; }
    .mc-landing .mc-build-layout { width: min(calc(100% - 32px), 600px); }
    .mc-landing .mc-build-lookbook { height: min(196vw, 720px); margin-top: 36px; }
    .mc-landing .mc-build-sheet,
    .mc-landing .mc-build-sheet.is-active { width: min(65vw, 250px); }
    .mc-landing .mc-build-sheet img,
    .mc-landing .mc-build-sheet.is-active img { width: 100%; height: auto; aspect-ratio: 11 / 30; object-fit: cover; }
    .mc-landing .mc-benefits { padding: 72px 0 !important; }
    .mc-landing .mc-benefits__inner { width: min(calc(100% - 32px), 600px); grid-template-columns: 1fr; gap: 38px; }
    .mc-landing .mc-benefits__image { padding: 10px; }
    .mc-landing .mc-benefits__heading h2 { font-size: 25px; }
    .mc-landing .mc-benefits__heading > p { font-size: 14px; }
}

/* FINAL LAVENDER LOOKBOOK OVERRIDE */
.mc-landing .mc-editor-proof {
    position: relative;
    isolation: isolate;
    padding: 80px 0 !important;
    overflow: hidden;
    border-top: 0 !important;
    background:
        linear-gradient(180deg, #ededed 0%, #efeff0 22%, #f2f2f3 50%, #f5f5f6 76%, #f7f7f8 100%) !important;
}

.mc-landing .mc-editor-proof::before,
.mc-landing .mc-editor-proof::after { content: none; }

.mc-landing .mc-editor-proof > * { position: relative; z-index: 1; }

.mc-landing .mc-build-layout {
    display: block;
    width: min(1080px, calc(100% - 48px));
}

.mc-landing .mc-build-copy {
    width: min(620px, 100%);
    margin: 0 auto;
    text-align: center;
}

.mc-landing .mc-build-copy > span { color: #726d7d; }

.mc-landing .mc-build-copy h2 {
    color: #211f25;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.42;
}

.mc-landing .mc-build-copy > p {
    width: 100%;
    max-width: 620px;
    margin: 14px auto 0 !important;
    color: #77727f;
    font-size: 15px;
    line-height: 1.75;
    text-align: center;
}

.mc-landing .mc-build-lookbook {
    display: grid;
    width: min(900px, 100%);
    height: auto;
    margin: 42px auto 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.mc-landing .mc-build-lookbook::before { content: none; }

.mc-landing .mc-build-static-card {
    margin: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mc-landing .mc-build-static-card--primary { transform: none; }

.mc-landing .mc-build-static-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 11 / 30;
    object-fit: contain;
    object-position: top center;
}

.mc-landing .mc-build-lookbook::before {
    position: absolute;
    top: 22px;
    left: 50%;
    width: 252px;
    height: 430px;
    border: 1px solid rgba(95, 88, 112, .12);
    background: rgba(255, 255, 255, .46);
    box-shadow: 0 34px 72px rgba(75, 68, 91, .13);
    content: '';
    transform: translateX(-50%);
}

.mc-landing .mc-build-sheet,
.mc-landing .mc-build-sheet.is-before,
.mc-landing .mc-build-sheet.is-after,
.mc-landing .mc-build-sheet.is-active {
    position: absolute;
    top: 0;
    display: block !important;
    width: 252px;
    height: 440px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid rgba(92, 84, 108, .15);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 20px 48px rgba(65, 58, 78, .12);
    cursor: pointer;
    opacity: .68;
    visibility: visible;
    pointer-events: auto;
    transition: left .55s cubic-bezier(.2, .7, .2, 1), opacity .35s ease, transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.mc-landing .mc-build-sheet.is-before {
    left: 23%;
    z-index: 1;
    filter: saturate(.52) brightness(1.015) blur(.25px);
    transform: translateX(-50%) translateY(42px) scale(.76);
}

.mc-landing .mc-build-sheet.is-after {
    left: 77%;
    z-index: 1;
    filter: saturate(.52) brightness(1.015) blur(.25px);
    transform: translateX(-50%) translateY(42px) scale(.76);
}

.mc-landing .mc-build-sheet.is-active {
    left: 50%;
    z-index: 3;
    opacity: 1;
    filter: none;
    transform: translateX(-50%);
    box-shadow: 0 28px 66px rgba(65, 58, 78, .18);
}

.mc-landing .mc-build-sheet:hover:not(.is-active) { filter: saturate(.9); opacity: .82; }

.mc-landing .mc-build-sheet:focus-visible {
    outline: 2px solid #5f596b;
    outline-offset: 4px;
}

.mc-landing .mc-build-sheet img,
.mc-landing .mc-build-sheet.is-active img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: top center;
}

.mc-landing .mc-build-switcher { display: none !important; }

.mc-landing .mc-build-pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 4;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform: translateX(-50%);
}

.mc-landing .mc-build-pagination button {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(87, 81, 99, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .66);
    color: #34303a;
    font-size: 0;
}

.mc-landing .mc-build-pagination button:hover { background: #fff; }
.mc-landing .mc-build-pagination button::before { font-size: 18px; line-height: 1; }
.mc-landing .mc-build-pagination button:first-child::before { content: '\2190'; }
.mc-landing .mc-build-pagination button:last-child::before { content: '\2192'; }
.mc-landing .mc-build-pagination > span { min-width: 50px; color: #746f7b; font-size: 13px; text-align: center; }

.mc-landing .mc-benefits {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 80px 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background:
        linear-gradient(180deg, #f7f7f8 0%, #f8f8f9 24%, #fafafa 52%, #fcfcfc 78%, #fff 100%) !important;
}

.mc-landing .mc-benefits::before,
.mc-landing .mc-benefits::after { content: none; }

.mc-landing .mc-benefits > * { position: relative; z-index: 1; }

.mc-landing .mc-final-preview {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    border-top: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
}

.mc-landing .mc-benefits__inner {
    display: grid;
    width: min(1080px, calc(100% - 48px));
    grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr);
    grid-template-areas: 'visual content';
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

.mc-landing .mc-benefits__image {
    grid-area: visual;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mc-landing .mc-benefits__image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 0;
}

.mc-landing .mc-benefits__content {
    display: grid;
    width: 100%;
    grid-area: content;
    gap: 30px;
}

.mc-landing .mc-benefits__heading { text-align: center; }
.mc-landing .mc-benefits__heading > span { color: #726d7d; }
.mc-landing .mc-benefits__heading h2 { color: #25222a; font-size: 30px; font-weight: 600; line-height: 1.42; }
.mc-landing .mc-benefits__heading > p { max-width: 390px; margin-inline: auto; color: #716d79; font-size: 15px; line-height: 1.75; }

.mc-landing .mc-benefits__cards {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0;
    width: 100%;
    border-top: 1px solid #dedbe3;
}

.mc-landing .mc-benefits__cards > div {
    width: 100%;
    min-height: 78px;
    padding: 18px 0 17px;
    border-top: 0 !important;
    border-bottom: 1px solid #dedbe3;
    box-sizing: border-box;
}

.mc-landing .mc-benefits__cards > div > span { display: none; }
.mc-landing .mc-benefits__cards strong { color: #2a272e; font-size: 15px; }
.mc-landing .mc-benefits__cards p { margin-top: 4px; color: #716d79; font-size: 13px; line-height: 1.6; }

@media (max-width: 860px) {
    .mc-landing .mc-editor-proof { padding: 56px 0 !important; }
    .mc-landing .mc-build-layout { width: min(calc(100% - 32px), 600px); }
    .mc-landing .mc-build-copy h2 { font-size: 25px; }
    .mc-landing .mc-build-copy > p { font-size: 14px; }
    .mc-landing .mc-build-lookbook { width: 100%; height: auto; margin-top: 32px; gap: 8px; }
    .mc-landing .mc-build-static-card { box-shadow: none; }
    .mc-landing .mc-build-static-card--primary { transform: none; }
    .mc-landing .mc-build-lookbook::before { top: 18px; width: 210px; height: 354px; }
    .mc-landing .mc-build-sheet,
    .mc-landing .mc-build-sheet.is-before,
    .mc-landing .mc-build-sheet.is-after,
    .mc-landing .mc-build-sheet.is-active { width: 210px; height: 364px; padding: 6px; }
    .mc-landing .mc-build-sheet.is-before { left: 18%; transform: translateX(-50%) translateY(38px) scale(.72); }
    .mc-landing .mc-build-sheet.is-after { left: 82%; transform: translateX(-50%) translateY(38px) scale(.72); }
    .mc-landing .mc-build-pagination { bottom: 0; }

    .mc-landing .mc-benefits { padding: 56px 0 !important; }
    .mc-landing .mc-benefits__inner {
        width: min(calc(100% - 32px), 600px);
        grid-template-columns: 1fr;
        grid-template-areas: 'visual' 'content';
        gap: 34px;
    }
    .mc-landing .mc-benefits__image { padding: 0; }
    .mc-landing .mc-benefits__content { width: 100%; }
    .mc-landing .mc-benefits__image img { width: 100%; }
    .mc-landing .mc-benefits__heading { text-align: center; }
    .mc-landing .mc-benefits__heading h2 { font-size: 25px; }
    .mc-landing .mc-benefits__heading > p { font-size: 14px; }
    .mc-landing .mc-final-preview { padding-top: 56px !important; padding-bottom: 56px !important; }
    .mc-landing .mc-final-preview__head h2 { font-size: 25px; line-height: 1.42; }
    .mc-landing .mc-final-preview__head p { font-size: 14px; line-height: 1.75; }
}

/* Design catalog: one 20px inset and one alignment axis. */
.mc-landing .mc-design-picker .mc-final-preview__decision {
    padding: 20px;
    box-sizing: border-box;
}

.mc-landing .mc-design-picker .mc-picker-panel-label {
    display: flex;
    width: 100%;
    min-height: 22px;
    margin-bottom: 14px;
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #77727e;
    font-size: 12px;
    line-height: 1.4;
    box-sizing: border-box;
}

.mc-landing .mc-design-picker .mc-picker-panel-label strong {
    color: #29262e;
    font-size: 14px;
    font-weight: 600;
}

.mc-landing .mc-design-picker .mc-skin-rail__inner,
.mc-landing .mc-design-picker .mc-skin-rail__menu,
.mc-landing .mc-design-picker .mc-catalog-moods,
.mc-landing .mc-design-picker .mc-catalog-toolbar,
.mc-landing .mc-design-picker .mc-skin-rail__list,
.mc-landing .mc-design-picker .mc-skin-grid {
    width: 100%;
    box-sizing: border-box;
}

.mc-landing .mc-design-picker .mc-skin-rail__menu,
body .mc-landing .mc-design-picker .mc-skin-rail__menu {
    display: block;
    padding: 0 0 12px !important;
}

.mc-landing .mc-design-picker .mc-catalog-moods {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
}

.mc-landing .mc-design-picker .mc-catalog-toolbar {
    margin: 0 !important;
    padding: 0 !important;
}

.mc-landing .mc-design-picker .mc-skin-rail__list,
body .mc-landing .mc-design-picker .mc-skin-rail__list {
    padding: 16px 0 0 !important;
}

@media (min-width: 861px) {
    .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace {
        grid-template-columns: 375px minmax(0, 1fr);
        gap: 32px;
        align-items: start;
    }

    .mc-landing .mc-design-picker .mc-final-preview__preview-column {
        display: flex;
        height: 814px;
        width: 375px !important;
        min-width: 375px;
        padding: 0;
        flex-direction: column;
        border: 1px solid #d9d4e0;
        border-radius: 8px;
        background: rgba(255, 255, 255, .9);
        box-sizing: border-box;
        overflow: hidden;
    }

    .mc-landing .mc-design-picker .mc-final-preview__preview-column .mc-picker-panel-label {
        min-height: 56px;
        margin: 0;
        padding: 16px 20px 14px;
    }

    .mc-landing .mc-design-picker .mc-preview-canvas,
    .mc-landing .mc-design-picker .mc-preview-phone {
        width: 100%;
    }

    .mc-landing .mc-design-picker .mc-preview-canvas {
        min-height: 0;
        flex: 1 1 auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .mc-landing .mc-design-picker .mc-preview__stage,
    .mc-landing .mc-design-picker .mc-preview-phone,
    .mc-landing .mc-design-picker .mc-preview-phone__frame {
        height: 100%;
        min-height: 0;
    }

    .mc-landing .mc-design-picker .mc-final-preview__decision { height: 814px; }
    .mc-landing .mc-design-picker .mc-final-preview__decision .mc-skin-rail {
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto;
    }
}

@media (max-width: 860px) {
    .mc-landing .mc-design-picker .mc-catalog-moods {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

@media (max-width: 360px) {
    .mc-landing .mc-build-lookbook { height: auto; }
    .mc-landing .mc-build-lookbook::before { width: 194px; height: 334px; }
    .mc-landing .mc-build-sheet,
    .mc-landing .mc-build-sheet.is-before,
    .mc-landing .mc-build-sheet.is-after,
    .mc-landing .mc-build-sheet.is-active { width: 194px; height: 344px; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-landing .mc-build-sheet { transition: none !important; }
}

/* Landing typography contract: three visible roles per functional area. */
.mc-landing {
    --mc-type-display: 36px;
    --mc-type-section: 28px;
    --mc-type-body: 16px;
    --mc-type-caption: 14px;
}

.mc-landing .mc-hero__copy h1 { font-size: var(--mc-type-display); }

.mc-landing .mc-final-preview__head h2,
.mc-landing .mc-build-copy h2,
.mc-landing .mc-benefits__heading h2,
.mc-landing .mc-final-features__copy h2 {
    font-size: var(--mc-type-section);
}

.mc-landing .mc-hero__copy > p,
.mc-landing .mc-final-preview__head p,
.mc-landing .mc-build-copy > p,
.mc-landing .mc-benefits__heading > p,
.mc-landing .mc-benefits__cards strong,
.mc-landing .mc-final-features__copy p,
.mc-landing .mc-final-features__list summary span,
.mc-landing .mc-picker-panel-label strong,
.mc-landing .mc-catalog-moods__label,
.mc-landing .mc-landing__start,
.mc-landing .mc-gallery-more > button,
.mc-landing .mc-mobile-preview-action p strong,
.mc-landing .mc-mobile-preview-direct {
    font-size: var(--mc-type-body);
}

.mc-landing .mc-benefits__heading > span,
.mc-landing .mc-benefits__cards p,
.mc-landing .mc-final-features__copy > span,
.mc-landing .mc-final-features__list summary b,
.mc-landing .mc-final-features__list details > p,
.mc-landing .mc-picker-panel-label,
.mc-landing .mc-catalog-mood span,
.mc-landing .mc-skin-count,
.mc-landing .mc-catalog-filter-toggle span,
.mc-landing .mc-catalog-filter-panel .skin-filter__label,
.mc-landing .mc-catalog-filter-panel .skin-fchip,
.mc-landing .mc-badge,
.mc-landing .mc-gallery-more p,
.mc-landing .mc-catalog-finish small,
.mc-landing .mc-entry-ver,
.mc-landing .mc-build-pagination > span,
.mc-landing .mc-rail-invite__bubble strong,
.mc-landing .mc-mobile-preview-action p span {
    font-size: var(--mc-type-caption);
}

.mc-landing .mc-badge {
    min-height: 22px;
    line-height: 1.15;
}

.mc-landing .mc-design-picker .mc-picker-panel-label,
.mc-landing .mc-design-picker .mc-picker-panel-label span,
.mc-landing .mc-design-picker .mc-catalog-mood span,
.mc-landing .mc-design-picker .mc-skin-count,
.mc-landing .mc-design-picker .mc-skin-count > *,
.mc-landing .mc-design-picker .mc-catalog-filter-toggle span,
.mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-filter__label,
.mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-fchip {
    font-size: var(--mc-type-caption);
}

.mc-landing .mc-design-picker .mc-picker-panel-label { line-height: 1.4; }

.mc-landing .mc-design-picker .mc-picker-panel-label strong,
.mc-landing .mc-design-picker .mc-catalog-moods__label {
    font-size: var(--mc-type-body);
}

@media (max-width: 860px) {
    .mc-landing {
        --mc-type-display: 30px;
        --mc-type-section: 24px;
    }
}

/* Hero account state: preserve both V4 and V5 paths without covering the hero image. */
.mc-landing .mc-hero__primary-action {
    display: flex;
    width: min(300px, calc(100vw - 40px));
    align-items: center;
    justify-content: center;
}

.mc-landing .mc-hero__primary-action .mc-landing__start {
    width: 100%;
}

.mc-landing .mc-hero__primary-action--dual {
    width: min(508px, calc(100vw - 40px));
    gap: 8px;
}

.mc-landing .mc-hero__action {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: var(--mc-type-body);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.mc-landing .mc-hero__action--primary {
    background: var(--mc-cta);
    color: var(--mc-white);
}

.mc-landing .mc-hero__action--primary:hover { background: var(--mc-cta-hover); }

.mc-landing .mc-hero__action--secondary {
    border-color: #d9d4e0;
    background: rgba(255, 255, 255, .94);
    color: var(--mc-ink);
}

.mc-landing .mc-hero__action--secondary:hover {
    border-color: #aaa4b0;
    background: #fff;
}

.mc-landing .mc-entry-ver {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: 8px;
    color: var(--mc-admin-status);
    font-size: var(--mc-type-caption);
    font-weight: 700;
    line-height: 1.4;
}

.mc-landing .mc-hero__action:focus-visible {
    outline: 2px solid var(--mc-focus);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .mc-landing .mc-hero__primary-action--dual {
        width: min(300px, calc(100vw - 40px));
        flex-direction: column;
    }

    .mc-landing .mc-hero__action { width: 100%; }
}

/* 2026-08-19 R1 landing integration */
.mc-landing {
    --mc-r1-dark: #181817;
    --mc-r1-copy: #5f5b55;
    --mc-r1-muted: #8c877f;
    --mc-r1-line: #dedbd5;
    --mc-r1-accent: #766e9b;
}

.mc-landing .mc-r1-kicker {
    margin: 0 0 28px;
    color: var(--mc-r1-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .13em;
}

.mc-landing .mc-hero {
    min-height: min(860px, calc(100vh - 126px));
}

.mc-landing .mc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 37%, rgba(255,255,255,.08) 68%);
    pointer-events: none;
}

.mc-landing .mc-hero__bg { object-position: center; }

.mc-landing .mc-hero__copy {
    z-index: 1;
    width: min(1000px, calc(100% - 64px));
    max-width: none;
    margin: 0 auto;
    padding: 130px 0 110px;
    text-align: left;
}

.mc-landing .mc-hero__copy h1 {
    max-width: 700px;
    margin: 0;
    color: var(--mc-r1-dark);
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 600;
    line-height: 1.17;
    letter-spacing: -.055em;
}

.mc-landing .mc-hero__copy > .mc-r1-hero-lede {
    max-width: 630px;
    margin: 30px 0 0;
    color: #4f4c47;
    font-size: 17px;
    line-height: 1.8;
}

.mc-landing .mc-hero__cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    margin-top: 34px;
}

.mc-landing .mc-hero__primary-action { margin: 0; }

.mc-landing .mc-r1-hero-link {
    color: var(--mc-r1-dark);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}


.mc-landing .mc-design-picker {
    min-height: 0;
    padding: 112px 0 108px !important;
    overflow: visible;
    background: var(--mc-r1-dark) !important;
    color: #fff;
}

.mc-landing .mc-design-picker .mc-final-preview__head {
    display: block;
    width: min(1000px, calc(100% - 64px));
    padding: 0 0 52px;
    color: #fff;
    text-align: left;
}

.mc-landing .mc-design-picker .mc-final-preview__head-copy {
    display: grid;
    width: 100%;
    max-width: none !important;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: end;
}

.mc-landing .mc-design-picker .mc-final-preview__head-copy .mc-r1-kicker {
    grid-column: 1 / -1;
    margin-bottom: -32px;
    color: #aaa5c5;
}

.mc-landing .mc-design-picker .mc-final-preview__head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(46px, 4.3vw, 66px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.055em;
}

.mc-landing .mc-design-picker .mc-final-preview__head p:not(.mc-r1-kicker) {
    max-width: 540px;
    margin: 0;
    color: #c9c6bf;
    font-size: 15px;
    line-height: 1.85;
}

.mc-landing .mc-design-picker .mc-final-preview__workspace {
    display: grid !important;
    width: min(1000px, calc(100% - 64px));
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: 34px 0 0;
    grid-template-columns: 390px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body .mc-landing .mc-design-picker .mc-final-preview__workspace {
    width: min(1000px, calc(100% - 64px));
}

.mc-landing .mc-design-picker .mc-final-preview__preview-column {
    position: sticky;
    top: 92px;
    min-width: 0;
}

.mc-landing .mc-design-picker .mc-picker-panel-label {
    display: flex;
    margin-bottom: 18px;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    color: #aaa69f;
    font-size: 11px;
}

.mc-landing .mc-design-picker .mc-picker-panel-label strong {
    color: #fff;
    font-size: 15px;
}

.mc-landing .mc-design-picker .mc-preview-canvas {
    min-height: 676px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.14);
    background: #252522;
}

.mc-landing .mc-design-picker .mc-preview__stage,
.mc-landing .mc-design-picker .mc-preview-phone { min-height: 630px; }

.mc-landing .mc-design-picker .mc-final-preview__decision {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.mc-landing .mc-design-picker .mc-skin-rail,
.mc-landing .mc-design-picker .mc-skin-rail__inner,
.mc-landing .mc-design-picker .mc-skin-rail__menu,
.mc-landing .mc-design-picker .mc-skin-rail__list {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mc-landing .mc-design-picker .mc-skin-rail__menu,
.mc-landing .mc-design-picker .mc-skin-rail__list { padding: 0; }

.mc-landing .mc-design-picker .mc-catalog-moods,
.mc-landing .mc-design-picker .mc-catalog-toolbar { border-color: rgba(255,255,255,.18); }

.mc-landing .mc-design-picker .mc-catalog-moods__label,
.mc-landing .mc-design-picker .mc-skin-count,
.mc-landing .mc-design-picker .mc-catalog-filter-toggle,
.mc-landing .mc-design-picker .mc-catalog-mood { color: #c9c6bf; }

.mc-landing .mc-design-picker .mc-catalog-mood.is-active,
.mc-landing .mc-design-picker .mc-skin-count strong { color: #fff; }

.mc-landing .mc-design-picker .mc-skin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px 12px;
}

.mc-landing .mc-design-picker .mc-skin-card:nth-child(3n+2) { margin-top: 34px; }
.mc-landing .mc-design-picker .mc-skin-card { color: #fff; }
.mc-landing .mc-design-picker .mc-skin-thumb {
    aspect-ratio: 9 / 14.5;
    border-color: rgba(255,255,255,.16);
}
.mc-landing .mc-design-picker .mc-skin-card.is-selected .mc-skin-thumb { box-shadow: 0 0 0 2px #fff; }
.mc-landing .mc-design-picker .mc-badge { color: #aaa69f; }
.mc-landing .mc-design-picker .mc-gallery-more > button {
    border-color: rgba(255,255,255,.2);
    background: transparent;
    color: #fff;
}
.mc-landing .mc-design-picker .mc-catalog-finish .mc-landing__start { background: #fff; color: var(--mc-r1-dark); }

.mc-landing .mc-editor-proof {
    padding: 118px 0 112px;
    background: #f7f5f1;
}

.mc-landing .mc-editor-proof .mc-build-layout,
.mc-landing .mc-r1-guest-inner {
    width: min(1000px, calc(100% - 64px));
    max-width: none;
    margin: 0 auto;
}

.mc-landing .mc-build-copy {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 52px;
    text-align: left;
}

.mc-landing .mc-build-copy .mc-r1-kicker { grid-column: 1 / -1; margin-bottom: -30px; }
.mc-landing .mc-build-copy h2 {
    margin: 0;
    color: var(--mc-r1-dark);
    font-size: clamp(44px, 4vw, 62px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.05em;
}
.mc-landing .mc-build-copy > p:not(.mc-r1-kicker) {
    margin: 0;
    color: var(--mc-r1-copy);
    font-size: 15px;
    line-height: 1.85;
}

.mc-landing .mc-r1-editor-stage {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.mc-landing .mc-r1-result-panel {
    position: sticky;
    top: 92px;
    padding: 28px;
    background: var(--mc-r1-dark);
    color: #fff;
}
.mc-landing .mc-r1-result-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.mc-landing .mc-r1-result-head strong { font-size: 15px; }
.mc-landing .mc-r1-result-head span { color: #aaa69f; font-size: 11px; text-align: right; }
.mc-landing .mc-r1-result-phone {
    width: 260px;
    height: 563px;
    margin: auto;
    padding: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 31px;
    background: #fff;
}
.mc-landing .mc-r1-result-phone img { width: 100%; height: 100%; border-radius: 25px; object-fit: contain; object-position: top; transition: opacity .25s ease; }
.mc-landing .mc-r1-proof-steps { border-top: 1px solid var(--mc-r1-line); }
.mc-landing .mc-r1-proof-step {
    display: grid;
    width: 100%;
    min-height: 230px;
    padding: 28px 0;
    grid-template-columns: 34px minmax(0, 1fr) 210px;
    gap: 20px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--mc-r1-line);
    background: transparent;
    color: var(--mc-r1-dark);
    text-align: left;
}
.mc-landing .mc-r1-proof-step b { align-self: start; color: var(--mc-r1-muted); font-size: 11px; }
.mc-landing .mc-r1-proof-step[aria-pressed="true"] b { color: var(--mc-r1-accent); }
.mc-landing .mc-r1-proof-step strong { display: block; font-size: 28px; font-weight: 600; }
.mc-landing .mc-r1-proof-step em { display: block; margin-top: 12px; color: var(--mc-r1-copy); font-size: 14px; font-style: normal; line-height: 1.65; }
.mc-landing .mc-r1-proof-crop { display: block; width: 210px; height: 170px; overflow: hidden; border: 1px solid var(--mc-r1-line); background: #fff; }
.mc-landing .mc-r1-proof-crop img { width: 100%; height: 100%; object-fit: cover; object-position: right center; transform: scale(1.72); transform-origin: right center; }
.mc-landing .mc-r1-mid-cta {
    display: flex;
    margin: 44px 0 78px;
    padding: 24px 0;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--mc-r1-line);
    border-bottom: 1px solid var(--mc-r1-line);
}
.mc-landing .mc-r1-mid-cta p { margin: 0; color: var(--mc-r1-copy); font-size: 14px; }
.mc-landing .mc-r1-mid-cta a { color: var(--mc-r1-dark); border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 700; text-decoration: none; }
.mc-landing .mc-r1-mood-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: end; margin-bottom: 34px; }
.mc-landing .mc-r1-mood-head h3 { margin: 0; color: var(--mc-r1-dark); font-size: 34px; font-weight: 600; line-height: 1.4; letter-spacing: -.04em; }
.mc-landing .mc-r1-mood-head p { margin: 0; color: var(--mc-r1-copy); font-size: 14px; line-height: 1.8; }
.mc-landing .mc-r1-mood-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mc-landing .mc-r1-mood-grid button { padding: 0; overflow: hidden; border: 1px solid var(--mc-r1-line); background: #fff; color: var(--mc-r1-dark); text-align: left; }
.mc-landing .mc-r1-mood-grid button[aria-pressed="true"] { border-color: var(--mc-r1-accent); box-shadow: inset 0 0 0 1px var(--mc-r1-accent); }
.mc-landing .mc-r1-mood-grid img { width: 100%; aspect-ratio: 440 / 527; object-fit: cover; object-position: top; }
.mc-landing .mc-r1-mood-grid span { display: flex; padding: 12px 10px; justify-content: space-between; gap: 8px; border-top: 1px solid var(--mc-r1-line); font-size: 12px; }
.mc-landing .mc-r1-mood-grid small { color: var(--mc-r1-muted); font-size: 10px; }
.mc-landing .mc-r1-mood-note { margin: 18px 0 0; color: var(--mc-r1-muted); font-size: 13px; }

.mc-landing .mc-r1-guest { padding: 108px 0 112px; background: #fff; }
.mc-landing .mc-r1-guest-stage { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 62px; align-items: center; padding: 44px 0; border-top: 1px solid var(--mc-r1-line); border-bottom: 1px solid var(--mc-r1-line); }
.mc-landing .mc-r1-guest-phone { width: 304px; height: 658px; margin: auto; padding: 7px; overflow: hidden; border: 1px solid var(--mc-r1-line); border-radius: 35px; background: #fff; box-shadow: 0 24px 54px rgba(24,24,23,.12); }
.mc-landing .mc-r1-guest-phone img { width: 100%; height: 100%; border-radius: 28px; object-fit: cover; object-position: center top; transition: opacity .25s ease; }
.mc-landing .mc-r1-guest-steps button { display: grid; width: 100%; padding: 23px 0; grid-template-columns: 50px minmax(0, 1fr); gap: 18px; border: 0; border-bottom: 1px solid var(--mc-r1-line); background: transparent; text-align: left; }
.mc-landing .mc-r1-guest-steps button:first-child { border-top: 1px solid var(--mc-r1-line); }
.mc-landing .mc-r1-guest-steps b { color: var(--mc-r1-muted); font-size: 12px; font-weight: 500; }
.mc-landing .mc-r1-guest-steps button[aria-pressed="true"] b,
.mc-landing .mc-r1-guest-steps button[aria-pressed="true"] strong { color: var(--mc-r1-accent); }
.mc-landing .mc-r1-guest-steps strong { display: block; color: var(--mc-r1-dark); font-size: 22px; line-height: 1.4; }
.mc-landing .mc-r1-guest-steps em { display: block; margin-top: 7px; color: var(--mc-r1-copy); font-size: 13px; font-style: normal; line-height: 1.65; }

.mc-landing .mc-benefits { padding: 112px 0; }
.mc-landing .mc-benefits__inner,
.mc-landing .mc-final-features { width: min(1000px, calc(100% - 64px)); }
.mc-landing .mc-feature-summary { display: block !important; padding: 112px 0; background: #fff; }
.mc-landing .mc-benefits__heading .mc-r1-kicker { display: block; }
.mc-landing .mc-r1-final { padding: 126px 32px; background: var(--mc-r1-dark); color: #fff; text-align: center; }
.mc-landing .mc-r1-final-inner { width: min(920px, 100%); margin: auto; }
.mc-landing .mc-r1-final .mc-r1-kicker { color: #aaa5c5; }
.mc-landing .mc-r1-final h2 { margin: 0; color: #fff; font-size: clamp(42px, 4.3vw, 64px); font-weight: 600; line-height: 1.22; letter-spacing: -.05em; }
.mc-landing .mc-r1-final p:not(.mc-r1-kicker) { margin: 24px 0 32px; color: #c9c6bf; font-size: 16px; }
.mc-landing .mc-r1-final .mc-landing__start { display: inline-flex; width: auto; min-width: 260px; background: #fff; color: var(--mc-r1-dark); }
.mc-landing .mc-rail-invite { display: none !important; }

@media (max-width: 860px) {
    .mc-landing .mc-hero { min-height: 720px; }
    .mc-landing .mc-hero::after { background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 48%, rgba(255,255,255,.1) 78%); }
    .mc-landing .mc-hero__copy { width: calc(100% - 32px); padding: 84px 0 72px; }
    .mc-landing .mc-hero__copy h1 { font-size: clamp(39px, 11vw, 54px); }
    .mc-landing .mc-hero__copy > .mc-r1-hero-lede { font-size: 15px; }
    .mc-landing .mc-hero__cta { align-items: flex-start; flex-direction: column; gap: 16px; }
    .mc-landing .mc-r1-hero-link { display: none; }

    .mc-landing .mc-design-picker { padding: 82px 0 90px; }
    .mc-landing .mc-design-picker .mc-final-preview__head,
    .mc-landing .mc-design-picker .mc-final-preview__workspace,
    .mc-landing .mc-editor-proof .mc-build-layout,
    .mc-landing .mc-r1-guest-inner { width: calc(100% - 32px); }
    body .mc-landing .mc-design-picker .mc-final-preview__workspace { width: calc(100% - 32px); }
    .mc-landing .mc-benefits__inner,
    .mc-landing .mc-final-features { width: calc(100% - 32px); }
    .mc-landing .mc-design-picker .mc-final-preview__head-copy,
    .mc-landing .mc-build-copy,
    .mc-landing .mc-r1-mood-head { grid-template-columns: 1fr; gap: 18px; }
    .mc-landing .mc-design-picker .mc-final-preview__head-copy .mc-r1-kicker,
    .mc-landing .mc-build-copy .mc-r1-kicker { grid-column: auto; margin-bottom: 4px; }
    .mc-landing .mc-design-picker .mc-final-preview__head h2,
    .mc-landing .mc-build-copy h2 { font-size: 38px; }
    .mc-landing .mc-build-copy > p:not(.mc-r1-kicker) { text-align: left !important; }
    .mc-landing .mc-design-picker .mc-final-preview__workspace { display: flex !important; flex-direction: column; gap: 32px; }
    .mc-landing .mc-design-picker .mc-final-preview__decision { order: 1; width: 100%; }
    .mc-landing .mc-design-picker .mc-final-preview__preview-column { position: static; order: 2; width: 100%; }
    .mc-landing .mc-design-picker .mc-skin-grid { display: flex; width: calc(100% + 16px); gap: 11px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
    .mc-landing .mc-design-picker .mc-skin-card { flex: 0 0 72vw; max-width: 280px; margin-top: 0 !important; scroll-snap-align: start; }
    .mc-landing .mc-design-picker .mc-preview-canvas { min-height: 620px; }

    .mc-landing .mc-editor-proof { padding: 82px 0 88px; }
    .mc-landing .mc-r1-editor-stage { grid-template-columns: 1fr; gap: 26px; }
    .mc-landing .mc-r1-result-panel { position: static; padding: 22px 18px; }
    .mc-landing .mc-r1-result-phone { width: 250px; height: 541px; }
    .mc-landing .mc-r1-proof-step { min-height: 0; padding: 26px 0; grid-template-columns: 30px 1fr; }
    .mc-landing .mc-r1-proof-crop { grid-column: 2; width: 100%; height: 220px; }
    .mc-landing .mc-r1-proof-step strong { font-size: 24px; }
    .mc-landing .mc-r1-mid-cta { align-items: flex-start; flex-direction: column; margin: 32px 0 62px; }
    .mc-landing .mc-r1-mood-head h3 { font-size: 29px; }
    .mc-landing .mc-r1-mood-grid { display: flex; width: calc(100% + 16px); padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
    .mc-landing .mc-r1-mood-grid button { flex: 0 0 67vw; max-width: 244px; scroll-snap-align: start; }

    .mc-landing .mc-r1-guest { padding: 82px 0 90px; }
    .mc-landing .mc-r1-guest-stage { grid-template-columns: 1fr; gap: 32px; padding: 30px 0; }
    .mc-landing .mc-r1-guest-phone { width: 276px; height: 598px; }
    .mc-landing .mc-r1-guest-steps button { grid-template-columns: 38px 1fr; padding: 20px 0; }
    .mc-landing .mc-r1-guest-steps strong { font-size: 19px; }
    .mc-landing .mc-r1-final { padding: 92px 20px; }
    .mc-landing .mc-r1-final h2 { font-size: 37px; }
}

/* 2026-08-19 visual QA: 1000px desktop rail proportions */
@media (min-width: 861px) {
    body .mc-landing .mc-hero__copy,
    body .mc-landing .mc-design-picker .mc-final-preview__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-editor-proof .mc-build-layout,
    body .mc-landing .mc-r1-guest-inner,
    body .mc-landing .mc-benefits__inner,
    body .mc-landing .mc-final-features {
        width: 1000px;
        max-width: calc(100% - 64px);
        margin-right: auto;
        margin-left: auto;
    }

    body .mc-landing .mc-hero__copy h1 {
        width: 650px;
        max-width: 100%;
        font-size: 64px;
        line-height: 1.16;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy,
    body .mc-landing .mc-editor-proof .mc-build-copy,
    body .mc-landing .mc-r1-guest .mc-build-copy {
        width: 100%;
        max-width: none !important;
        grid-template-columns: 440px minmax(0, 1fr);
        gap: 60px;
        text-align: left;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head h2,
    body .mc-landing .mc-editor-proof .mc-build-copy h2,
    body .mc-landing .mc-r1-guest .mc-build-copy h2 {
        width: 100%;
        font-size: 52px;
        line-height: 1.22;
    }

    body .mc-landing .mc-editor-proof .mc-build-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-r1-guest .mc-build-copy > p:not(.mc-r1-kicker) {
        text-align: left !important;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__workspace {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 60px;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column {
        width: 340px !important;
    }

    body .mc-landing .mc-design-picker .mc-preview-canvas {
        width: 340px;
        min-height: 630px;
        padding: 18px;
    }

    body .mc-landing .mc-design-picker .mc-preview__stage,
    body .mc-landing .mc-design-picker .mc-preview-phone {
        min-height: 592px;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__decision {
        width: 600px;
    }

    body .mc-landing .mc-design-picker .mc-skin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 32px 12px !important;
    }

    body .mc-landing .mc-design-picker .mc-skin-card:nth-child(3n+2) {
        margin-top: 28px;
    }

    body .mc-landing .mc-r1-editor-stage {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 60px;
    }

    body .mc-landing .mc-r1-result-panel { width: 320px; }
    body .mc-landing .mc-r1-result-phone { width: 240px; height: 520px; }
    body .mc-landing .mc-r1-proof-step {
        grid-template-columns: 30px minmax(0, 1fr) 220px;
        gap: 18px;
    }
    body .mc-landing .mc-r1-proof-crop { width: 220px; height: 184px; }
    body .mc-landing .mc-r1-proof-crop img { transform: scale(2.35); }

    body .mc-landing .mc-r1-guest-stage {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 60px;
    }

    body .mc-landing .mc-r1-guest-phone { width: 280px; height: 606px; }

    body .mc-landing .mc-benefits__inner {
        grid-template-columns: 500px minmax(0, 1fr);
        gap: 60px;
    }

    body .mc-landing .mc-benefits__heading { text-align: left; }
    body .mc-landing .mc-benefits__heading > p { margin-left: 0; }
}

/* 2026-08-19 design-system contract: 1000 / 12 columns / 20 gap */
.mc-landing {
    --mc-r1-paper: var(--bj-paper, #fbfaf7);
    --mc-r1-clean: var(--bj-clean, #fff);
    --mc-r1-stone: var(--bj-stone, #f1efe9);
    --mc-r1-stage: var(--bj-product-stage, #f7f5f1);
    --mc-r1-dark: var(--bj-charcoal, #1a1a18);
    --mc-r1-copy: var(--bj-muted, #66635e);
    --mc-r1-muted: var(--bj-tertiary, #918e87);
    --mc-r1-line: var(--bj-line, #ddd9d2);
    --mc-r1-accent: var(--bj-accent-violet, #7166a9);
    font-family: var(--bj-font-family, "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif);
}

.mc-landing .mc-r1-kicker {
    margin: 0 0 var(--bj-space-2, 16px);
    color: var(--mc-r1-copy);
    font-size: var(--bj-type-caption, 14px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .06em;
}

@media (min-width: 768px) {
    body .mc-landing .mc-hero__copy,
    body .mc-landing .mc-design-picker .mc-final-preview__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-editor-proof .mc-build-layout,
    body .mc-landing .mc-r1-guest-inner,
    body .mc-landing .mc-benefits__inner,
    body .mc-landing .mc-final-features {
        width: var(--bj-content-max, 1000px);
        max-width: calc(100% - 48px);
        margin-right: auto;
        margin-left: auto;
    }

    body .mc-landing .mc-hero {
        display: block;
        min-height: 640px;
        background: var(--mc-r1-paper);
    }

    body .mc-landing .mc-hero__copy {
        padding: var(--bj-space-4, 64px) 0;
    }

    body .mc-landing .mc-hero__copy h1 {
        width: 490px;
        max-width: 100%;
        font-size: var(--bj-type-display, 36px);
        font-weight: var(--bj-type-display-weight, 600);
        line-height: var(--bj-type-display-line, 1.24);
        letter-spacing: -.04em;
        word-break: keep-all;
    }

    body .mc-landing .mc-hero__copy > .mc-r1-hero-lede {
        width: 490px;
        max-width: 100%;
        margin-top: var(--bj-space-3, 32px);
        color: var(--mc-r1-copy);
        font-size: var(--bj-type-body, 16px);
        font-weight: 400;
        line-height: var(--bj-type-body-line, 1.6);
    }

    body .mc-landing .mc-hero__cta {
        margin-top: var(--bj-space-3, 32px);
        gap: var(--bj-space-2, 16px);
    }

    body .mc-landing .mc-hero__cta .mc-landing__start,
    body .mc-landing .mc-hero__action {
        min-height: 48px;
        font-size: var(--bj-type-action, 16px);
        font-weight: 700;
        line-height: 1.5;
    }

    body .mc-landing .mc-r1-hero-link {
        font-size: var(--bj-type-action, 16px);
        font-weight: 600;
        line-height: 1.5;
    }

    body .mc-landing .mc-design-picker,
    body .mc-landing .mc-editor-proof,
    body .mc-landing .mc-r1-guest,
    body .mc-landing .mc-benefits,
    body .mc-landing .mc-feature-summary {
        padding-top: var(--bj-space-4, 64px) !important;
        padding-bottom: var(--bj-space-4, 64px) !important;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head {
        padding-bottom: var(--bj-space-3, 32px);
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy,
    body .mc-landing .mc-editor-proof .mc-build-copy,
    body .mc-landing .mc-r1-guest .mc-build-copy {
        display: grid;
        width: 100%;
        max-width: none !important;
        margin-bottom: var(--bj-space-3, 32px);
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
        align-items: end;
        text-align: left;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy .mc-r1-kicker,
    body .mc-landing .mc-editor-proof .mc-build-copy .mc-r1-kicker,
    body .mc-landing .mc-r1-guest .mc-build-copy .mc-r1-kicker {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head h2,
    body .mc-landing .mc-editor-proof .mc-build-copy h2,
    body .mc-landing .mc-r1-guest .mc-build-copy h2 {
        width: auto;
        margin: 0;
        grid-column: 1 / span 5;
        color: inherit;
        font-size: var(--bj-type-section, 28px);
        font-weight: var(--bj-type-section-weight, 600);
        line-height: var(--bj-type-section-line, 1.35);
        letter-spacing: -.04em;
        word-break: keep-all;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-editor-proof .mc-build-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-r1-guest .mc-build-copy > p:not(.mc-r1-kicker) {
        max-width: none;
        margin: 0;
        grid-column: 6 / -1;
        color: inherit;
        font-size: var(--bj-type-body, 16px);
        font-weight: 400;
        line-height: var(--bj-type-body-line, 1.6);
        text-align: left !important;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy > p:not(.mc-r1-kicker) { color: #c9c6bf; }
    body .mc-landing .mc-editor-proof .mc-build-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-r1-guest .mc-build-copy > p:not(.mc-r1-kicker) { color: var(--mc-r1-copy); }

    body .mc-landing .mc-design-picker .mc-final-preview__workspace {
        display: grid;
        padding-top: var(--bj-space-3, 32px);
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column {
        width: auto !important;
        grid-column: 1 / span 4;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__decision {
        width: auto;
        grid-column: 5 / -1;
    }

    body .mc-landing .mc-design-picker .mc-preview-canvas {
        width: 320px;
        min-height: 584px;
        padding: var(--bj-space-2, 16px);
        border-radius: 0;
        background: #252522;
    }

    body .mc-landing .mc-design-picker .mc-preview__stage,
    body .mc-landing .mc-design-picker .mc-preview-phone { min-height: 552px; }

    body .mc-landing .mc-design-picker .mc-picker-panel-label,
    body .mc-landing .mc-design-picker .mc-picker-panel-label strong,
    body .mc-landing .mc-design-picker .mc-picker-panel-label span,
    body .mc-landing .mc-design-picker .mc-catalog-moods__label,
    body .mc-landing .mc-design-picker .mc-skin-count,
    body .mc-landing .mc-design-picker .mc-catalog-filter-toggle,
    body .mc-landing .mc-design-picker .mc-catalog-mood {
        font-size: var(--bj-type-caption, 14px);
        line-height: 1.5;
    }

    body .mc-landing .mc-design-picker .mc-skin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--bj-space-3, 32px) 20px !important;
    }

    body .mc-landing .mc-design-picker .mc-skin-card { margin-top: 0 !important; }
    body .mc-landing .mc-design-picker .mc-badge,
    body .mc-landing .mc-design-picker .mc-skin-meta { font-size: var(--bj-type-caption, 14px); line-height: 1.5; }

    body .mc-landing .mc-r1-editor-stage,
    body .mc-landing .mc-r1-guest-stage {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
    }

    body .mc-landing .mc-r1-result-panel,
    body .mc-landing .mc-r1-guest-phone {
        width: 320px;
        grid-column: 1 / span 4;
    }

    body .mc-landing .mc-r1-proof-steps,
    body .mc-landing .mc-r1-guest-steps { grid-column: 5 / -1; }

    body .mc-landing .mc-r1-result-panel { padding: var(--bj-space-2, 16px); }
    body .mc-landing .mc-r1-result-head strong { font-size: var(--bj-type-control, 15px); line-height: 1.6; }
    body .mc-landing .mc-r1-result-head span { font-size: var(--bj-type-caption, 14px); line-height: 1.5; }
    body .mc-landing .mc-r1-result-phone { width: 260px; height: 563px; }

    body .mc-landing .mc-r1-proof-step {
        min-height: 0;
        padding: var(--bj-space-3, 32px) 0;
        grid-template-columns: 45px minmax(0, 1fr) 235px;
        gap: 20px;
    }

    body .mc-landing .mc-r1-proof-step b,
    body .mc-landing .mc-r1-guest-steps b { font-size: var(--bj-type-caption, 14px); line-height: 1.5; }
    body .mc-landing .mc-r1-proof-step strong,
    body .mc-landing .mc-r1-guest-steps strong { font-size: var(--bj-type-subsection, 20px); font-weight: 600; line-height: 1.5; }
    body .mc-landing .mc-r1-proof-step em,
    body .mc-landing .mc-r1-guest-steps em { font-size: var(--bj-type-body, 16px); line-height: 1.6; }
    body .mc-landing .mc-r1-proof-crop { width: 235px; height: 184px; }

    body .mc-landing .mc-r1-mid-cta {
        margin: var(--bj-space-3, 32px) 0 var(--bj-space-4, 64px);
        padding: var(--bj-space-2, 16px) 0;
    }
    body .mc-landing .mc-r1-mid-cta p,
    body .mc-landing .mc-r1-mid-cta a { font-size: var(--bj-type-body, 16px); line-height: 1.6; }
    body .mc-landing .mc-r1-mid-cta a { font-weight: 700; }

    body .mc-landing .mc-r1-mood-head {
        display: grid;
        margin-bottom: var(--bj-space-3, 32px);
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
    }
    body .mc-landing .mc-r1-mood-head h3 { grid-column: 1 / span 6; font-size: var(--bj-type-subsection, 20px); line-height: 1.5; }
    body .mc-landing .mc-r1-mood-head p { grid-column: 7 / -1; font-size: var(--bj-type-body, 16px); line-height: 1.6; }
    body .mc-landing .mc-r1-mood-grid { gap: 20px; }
    body .mc-landing .mc-r1-mood-grid span { font-size: var(--bj-type-caption, 14px); line-height: 1.5; }
    body .mc-landing .mc-r1-mood-grid small { font-size: var(--bj-type-caption, 14px); line-height: 1.5; }
    body .mc-landing .mc-r1-mood-note { font-size: var(--bj-type-caption, 14px); line-height: 1.5; }

    body .mc-landing .mc-r1-guest-phone { height: 658px; }
    body .mc-landing .mc-r1-guest-steps button {
        padding: var(--bj-space-2, 16px) 0;
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 20px;
    }

    body .mc-landing .mc-benefits__inner {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
        text-align: left;
    }
    body .mc-landing .mc-benefits__image { grid-column: 1 / span 6; }
    body .mc-landing .mc-benefits__content { grid-column: 7 / -1; }
    body .mc-landing .mc-benefits__heading { text-align: left; }
    body .mc-landing .mc-benefits__heading h2 { font-size: var(--bj-type-section, 28px); font-weight: 600; line-height: 1.35; }
    body .mc-landing .mc-benefits__heading > p { max-width: none; margin-left: 0; font-size: var(--bj-type-body, 16px); line-height: 1.6; }
    body .mc-landing .mc-benefits__cards strong { font-size: var(--bj-type-control, 15px); line-height: 1.6; }
    body .mc-landing .mc-benefits__cards p { font-size: var(--bj-type-body, 16px); line-height: 1.6; }

    body .mc-landing .mc-final-features {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
    }
    body .mc-landing .mc-final-features__copy { grid-column: 1 / span 5; }
    body .mc-landing .mc-final-features__list { grid-column: 6 / -1; }
    body .mc-landing .mc-final-features__copy > span { font-size: var(--bj-type-caption, 14px); line-height: 1.5; }
    body .mc-landing .mc-final-features__copy h2 { font-size: var(--bj-type-section, 28px); font-weight: 600; line-height: 1.35; }
    body .mc-landing .mc-final-features__copy p,
    body .mc-landing .mc-final-features__list details > p { font-size: var(--bj-type-body, 16px); line-height: 1.6; }
    body .mc-landing .mc-final-features__list summary { min-height: 48px; font-size: var(--bj-type-control, 15px); line-height: 1.6; }

    body .mc-landing .mc-r1-final { padding: var(--bj-space-4, 64px) 24px; }
    body .mc-landing .mc-r1-final h2 { font-size: var(--bj-type-section, 28px); font-weight: 600; line-height: 1.35; }
    body .mc-landing .mc-r1-final p:not(.mc-r1-kicker) { font-size: var(--bj-type-body, 16px); line-height: 1.6; }
    body .mc-landing .mc-r1-final .mc-landing__start { min-height: 48px; font-size: var(--bj-type-action, 16px); line-height: 1.5; }
}

@media (max-width: 767px) {
    body .mc-landing .mc-hero {
        display: flex;
        min-height: 0;
        flex-direction: column;
        background: var(--mc-r1-paper);
    }
    body .mc-landing .mc-hero::after { content: none; }
    body .mc-landing .mc-hero__copy {
        position: relative;
        order: 1;
        width: calc(100% - 32px);
        padding: var(--bj-space-4, 64px) 0 var(--bj-space-3, 32px);
        background: var(--mc-r1-paper);
    }
    body .mc-landing .mc-hero__bg {
        position: relative;
        order: 2;
        width: 100%;
        height: 360px;
        object-fit: cover;
        object-position: center bottom;
    }
    body .mc-landing .mc-hero__copy h1 {
        font-size: 30px;
        font-weight: 600;
        line-height: 1.24;
        letter-spacing: -.04em;
        word-break: keep-all;
    }
    body .mc-landing .mc-hero__copy > .mc-r1-hero-lede {
        margin-top: var(--bj-space-3, 32px);
        font-size: 16px;
        line-height: 1.6;
    }
    body .mc-landing .mc-hero__cta { margin-top: var(--bj-space-3, 32px); }
    body .mc-landing .mc-hero__cta .mc-landing__start,
    body .mc-landing .mc-hero__action { min-height: 48px; font-size: 16px; line-height: 1.5; }

    body .mc-landing .mc-design-picker,
    body .mc-landing .mc-editor-proof,
    body .mc-landing .mc-r1-guest,
    body .mc-landing .mc-benefits,
    body .mc-landing .mc-feature-summary { padding: 64px 0 !important; }

    body .mc-landing .mc-design-picker .mc-final-preview__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-editor-proof .mc-build-layout,
    body .mc-landing .mc-r1-guest-inner,
    body .mc-landing .mc-benefits__inner,
    body .mc-landing .mc-final-features { width: calc(100% - 32px); max-width: none; }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy,
    body .mc-landing .mc-editor-proof .mc-build-copy,
    body .mc-landing .mc-r1-guest .mc-build-copy,
    body .mc-landing .mc-r1-mood-head { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; }
    body .mc-landing .mc-design-picker .mc-final-preview__head-copy .mc-r1-kicker,
    body .mc-landing .mc-editor-proof .mc-build-copy .mc-r1-kicker,
    body .mc-landing .mc-r1-guest .mc-build-copy .mc-r1-kicker { margin-bottom: 0; }
    body .mc-landing .mc-design-picker .mc-final-preview__head h2,
    body .mc-landing .mc-editor-proof .mc-build-copy h2,
    body .mc-landing .mc-r1-guest .mc-build-copy h2 { font-size: 24px; font-weight: 600; line-height: 1.35; }
    body .mc-landing .mc-design-picker .mc-final-preview__head-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-editor-proof .mc-build-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-r1-guest .mc-build-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-r1-mood-head p { font-size: 16px; line-height: 1.6; text-align: left !important; }
    body .mc-landing .mc-r1-mood-head h3 { font-size: 20px; line-height: 1.5; }

    body .mc-landing .mc-design-picker .mc-final-preview__workspace { padding-top: 32px; }
    body .mc-landing .mc-design-picker .mc-picker-panel-label,
    body .mc-landing .mc-design-picker .mc-catalog-moods__label,
    body .mc-landing .mc-design-picker .mc-skin-count,
    body .mc-landing .mc-design-picker .mc-catalog-filter-toggle,
    body .mc-landing .mc-design-picker .mc-catalog-mood { font-size: 14px; line-height: 1.5; }
    body .mc-landing .mc-design-picker .mc-skin-grid { gap: 16px !important; }
    body .mc-landing .mc-design-picker .mc-preview-canvas { width: 100%; }

    body .mc-landing .mc-r1-result-head strong { font-size: 16px; line-height: 1.5; }
    body .mc-landing .mc-r1-result-head span,
    body .mc-landing .mc-r1-proof-step b,
    body .mc-landing .mc-r1-guest-steps b { font-size: 14px; line-height: 1.5; }
    body .mc-landing .mc-r1-proof-step strong,
    body .mc-landing .mc-r1-guest-steps strong { font-size: 20px; line-height: 1.5; }
    body .mc-landing .mc-r1-proof-step em,
    body .mc-landing .mc-r1-guest-steps em,
    body .mc-landing .mc-r1-mid-cta p,
    body .mc-landing .mc-r1-mid-cta a,
    body .mc-landing .mc-r1-mood-note { font-size: 16px; line-height: 1.6; }
    body .mc-landing .mc-r1-mood-grid span,
    body .mc-landing .mc-r1-mood-grid small { font-size: 14px; line-height: 1.5; }

    body .mc-landing .mc-benefits__inner,
    body .mc-landing .mc-final-features { display: grid; grid-template-columns: 1fr; gap: 32px; }
    body .mc-landing .mc-benefits__heading h2,
    body .mc-landing .mc-final-features__copy h2,
    body .mc-landing .mc-r1-final h2 { font-size: 24px; line-height: 1.35; }
    body .mc-landing .mc-benefits__heading > p,
    body .mc-landing .mc-benefits__cards p,
    body .mc-landing .mc-final-features__copy p,
    body .mc-landing .mc-final-features__list details > p,
    body .mc-landing .mc-r1-final p:not(.mc-r1-kicker) { font-size: 16px; line-height: 1.6; }
    body .mc-landing .mc-benefits__cards strong,
    body .mc-landing .mc-final-features__list summary { font-size: 16px; line-height: 1.5; }
    body .mc-landing .mc-r1-final { padding: 64px 16px; }
    body .mc-landing .mc-r1-final .mc-landing__start { min-height: 48px; font-size: 16px; }
}

/* 2026-08-19 preview frame correction: content flush, no decorative dead space */
body .mc-landing .mc-design-picker .mc-final-preview__preview-column {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body .mc-landing .mc-design-picker .mc-preview-canvas,
body .mc-landing .mc-design-picker .mc-preview__stage,
body .mc-landing .mc-design-picker .mc-preview-phone {
    height: 780px !important;
    min-height: 780px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .mc-landing .mc-design-picker .mc-preview-phone {
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .mc-landing .mc-design-picker .mc-preview-phone::before,
body .mc-landing .mc-design-picker .mc-preview-phone::after {
    display: none !important;
    content: none !important;
}

body .mc-landing .mc-design-picker .mc-preview-phone__frame,
body .mc-landing .mc-design-picker .mc-v5-embed,
body .mc-landing .mc-design-picker .ed-preview,
body .mc-landing .mc-design-picker .ed-preview__frame {
    border-radius: 17px !important;
}

@media (max-width: 767px) {
    body .mc-landing .mc-design-picker .mc-preview-canvas,
    body .mc-landing .mc-design-picker .mc-preview__stage,
    body .mc-landing .mc-design-picker .mc-preview-phone {
        height: 660px !important;
        min-height: 660px !important;
    }
}

/* 2026-08-19 immersive design catalog */
.mc-catalog-expanded__head,
.mc-catalog-expanded__footer {
    display: none;
}

body .mc-landing .mc-design-picker .mc-catalog-expand {
    display: inline-flex;
    min-height: 36px;
    margin-right: auto;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .32);
    background: transparent;
    color: #f4f1eb;
    align-items: center;
    gap: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.01em;
    cursor: pointer;
}

body .mc-landing .mc-design-picker .mc-catalog-expand svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    transition: transform .2s ease;
}

body .mc-landing .mc-design-picker .mc-catalog-expand:hover {
    border-color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .06);
}

body .mc-landing .mc-design-picker .mc-catalog-expand:hover svg {
    transform: scale(1.08);
}

@media (min-width: 768px) {
    body .mc-landing .mc-design-picker .mc-final-preview__decision {
        view-transition-name: mc-design-catalog;
    }

    body.mc-catalog-expanded {
        overflow: hidden !important;
    }

    body.mc-catalog-expanded .mc-landing,
    body.mc-catalog-expanded .mc-landing__main,
    body.mc-catalog-expanded .mc-landing .mc-design-picker,
    body.mc-catalog-expanded .mc-landing .mc-final-preview__workspace {
        overflow: visible !important;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-final-preview__decision {
        position: fixed !important;
        inset: 0 !important;
        z-index: 100000 !important;
        display: flex !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-direction: column;
        overflow: hidden;
        background: #1a1a18 !important;
        color: #f4f1eb;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #1a1a18 !important;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__head {
        display: flex;
        width: min(1440px, calc(100% - 64px));
        min-height: 84px;
        margin: 0 auto;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title {
        display: flex;
        align-items: baseline;
        gap: 28px;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title > span {
        color: #8f8b84;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .16em;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title > strong {
        color: #f4f1eb;
        font-size: clamp(22px, 1.9vw, 30px);
        font-weight: 500;
        letter-spacing: -.035em;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title em {
        margin-left: 8px;
        color: #aaa69f;
        font-style: normal;
        font-weight: 400;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__close {
        display: inline-flex;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #d8d4cd;
        align-items: center;
        gap: 13px;
        font: inherit;
        font-size: 13px;
        cursor: pointer;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__close i {
        position: relative;
        display: block;
        width: 28px;
        height: 28px;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: 50%;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__close i::before,
    body.mc-catalog-expanded .mc-catalog-expanded__close i::after {
        position: absolute;
        top: 13px;
        left: 7px;
        width: 12px;
        height: 1px;
        background: #fff;
        content: "";
        transform: rotate(45deg);
    }

    body.mc-catalog-expanded .mc-catalog-expanded__close i::after {
        transform: rotate(-45deg);
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail__inner {
        display: flex !important;
        width: min(1440px, calc(100% - 64px)) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden !important;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail__menu,
    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail .mc-skin-rail__menu {
        width: 100% !important;
        margin: 0 !important;
        padding: 16px 0 10px !important;
        flex: 0 0 auto;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-catalog-toolbar {
        min-height: 44px;
        justify-content: flex-end;
        gap: 26px;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-count {
        margin-right: auto;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-catalog-expand {
        display: none;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail__list,
    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail__list {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 18px 8px 32px 0 !important;
        flex: 1 1 auto;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
        gap: 32px 18px !important;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-card {
        min-width: 0;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-meta {
        padding-top: 8px;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-name,
    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-badge {
        font-size: 12px;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__footer {
        display: flex;
        width: min(1440px, calc(100% - 64px));
        min-height: 82px;
        margin: 0 auto;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid rgba(255, 255, 255, .18);
        background: #1a1a18;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__selection {
        display: flex;
        align-items: baseline;
        gap: 16px;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__selection span {
        color: #8f8b84;
        font-size: 12px;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__selection strong {
        color: #f4f1eb;
        font-size: 16px;
        font-weight: 500;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__actions button,
    body.mc-catalog-expanded .mc-catalog-expanded__actions .mc-landing__start {
        display: inline-flex;
        width: auto;
        min-width: 190px;
        min-height: 46px;
        padding: 0 24px;
        align-items: center;
        justify-content: center;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__actions button {
        border: 1px solid rgba(255, 255, 255, .36);
        background: transparent;
        color: #f4f1eb;
        cursor: pointer;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__actions .mc-landing__start {
        border: 1px solid #f4f1eb !important;
        background: #f4f1eb !important;
        color: #1a1a18 !important;
    }
}

@media (max-width: 767px) {
    body .mc-landing .mc-design-picker .mc-catalog-expand {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(mc-design-catalog) {
        animation: mc-catalog-out .28s cubic-bezier(.4, 0, .2, 1) both;
    }

    ::view-transition-new(mc-design-catalog) {
        animation: mc-catalog-in .36s cubic-bezier(.2, .8, .2, 1) both;
    }
}

@keyframes mc-catalog-out {
    to { opacity: .7; transform: scale(.985); }
}

@keyframes mc-catalog-in {
    from { opacity: .72; transform: scale(.985); }
}

/* compact catalog: keep the original scrollable thumbnails and a fixed footer action */
@media (min-width: 768px) {
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision {
        height: 926px !important;
        align-self: start !important;
        overflow: hidden !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__inner {
        display: flex !important;
        height: 100% !important;
        min-height: 0 !important;
        flex-direction: column;
        overflow: hidden !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__list {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 20px !important;
        flex: 1 1 auto;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-card {
        display: block !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more {
        position: static;
        display: block;
        margin: 0;
        padding: 12px 0 0;
        flex: 0 0 60px;
        border: 0;
        background: #1a1a18;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more .mc-catalog-expand {
        display: flex;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 0 20px;
        justify-content: center;
        border-color: rgba(255, 255, 255, .42);
        font-size: 14px;
    }

    body .mc-landing .mc-design-picker .mc-skin-card .mc-badge {
        display: none !important;
    }

    body.mc-catalog-expanded .mc-catalog-compact-more {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .mc-catalog-compact-more {
        display: none;
    }
}

/* 2026-08-19 selected design actions belong to the preview result */
body .mc-landing .mc-design-picker .mc-preview-actions {
    display: flex;
    width: 360px;
    padding-top: 18px;
    flex-direction: column;
    gap: 12px;
}

body .mc-landing .mc-design-picker .mc-preview-actions__meta {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

body .mc-landing .mc-design-picker .mc-preview-actions__meta strong {
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mc-landing .mc-design-picker .mc-preview-actions__meta span {
    flex: 0 0 auto;
    color: #aaa69f;
    font-size: 13px;
    line-height: 1.5;
}

body .mc-landing .mc-design-picker .mc-badge {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #aaa69f !important;
}

body .mc-landing .mc-design-picker .mc-preview-actions__set-link {
    width: fit-content;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    color: #f4f1eb;
    font-size: 14px;
    line-height: 1.8;
    text-decoration: none;
}

body .mc-landing .mc-design-picker .mc-preview-actions__set-link:hover {
    border-bottom-color: #fff;
}

body .mc-landing .mc-design-picker .mc-preview-actions__start {
    display: flex;
    width: 360px;
    min-height: 52px;
    margin-top: 2px;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--mc-r1-dark) !important;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

body .mc-landing .mc-design-picker .mc-catalog-finish {
    display: none !important;
}

@media (max-width: 767px) {
    body .mc-landing .mc-design-picker .mc-preview-actions {
        display: none;
    }
}

/* 2026-08-19 browser comment corrections: catalog / editor / guest */
body .mc-landing .mc-design-picker .mc-preview-canvas {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .34);
    background: transparent;
}

body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-picker-panel-label {
    min-height: 48px;
    margin-bottom: 0;
    padding: 12px 16px;
    border: 1px solid var(--mc-r1-line);
    border-bottom: 0;
    background: var(--mc-r1-stone);
    color: var(--mc-r1-muted);
}

body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-picker-panel-label strong {
    color: var(--mc-r1-dark);
}

body .mc-landing .mc-design-picker .mc-preview-phone {
    overflow: hidden;
    border: 1px solid var(--mc-r1-line);
    border-radius: 28px;
    background: #fff;
}

body .mc-landing .mc-design-picker .mc-catalog-toolbar {
    padding-top: 0;
    border-top: 0;
}

body .mc-landing .mc-design-picker .mc-gallery-more {
    margin-top: 32px;
}

body .mc-landing .mc-design-picker .mc-gallery-more > button {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .38);
    background: transparent;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
}

body .mc-landing .mc-design-picker .mc-catalog-finish .mc-landing__start {
    color: var(--mc-r1-dark) !important;
}

body .mc-landing .mc-r1-result-panel {
    border: 1px solid var(--mc-r1-line);
    background: #fff;
    color: var(--mc-r1-dark);
}

body .mc-landing .mc-r1-result-head span {
    color: var(--mc-r1-muted);
}

body .mc-landing .mc-r1-result-phone {
    border-color: var(--mc-r1-line);
    background: var(--mc-r1-stage);
}

body .mc-landing .mc-r1-proof-viewer {
    overflow: hidden;
    border: 1px solid var(--mc-r1-line);
    background: #fff;
}

body .mc-landing .mc-r1-proof-viewer__head {
    display: flex;
    min-height: 48px;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--mc-r1-line);
}

body .mc-landing .mc-r1-proof-viewer__head strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

body .mc-landing .mc-r1-proof-viewer__head span {
    color: var(--mc-r1-muted);
    font-size: 14px;
    line-height: 1.5;
}

body .mc-landing .mc-r1-proof-viewer > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    transition: opacity .2s ease;
}

body .mc-landing .mc-r1-proof-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
}

body .mc-landing .mc-r1-proof-step {
    display: grid;
    min-height: 132px;
    padding: 16px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border: 0;
    border-right: 1px solid var(--mc-r1-line);
    border-bottom: 1px solid var(--mc-r1-line);
    border-left: 1px solid transparent;
    background: transparent;
}

body .mc-landing .mc-r1-proof-step:first-child {
    border-left-color: var(--mc-r1-line);
}

body .mc-landing .mc-r1-proof-step[aria-pressed="true"],
body .mc-landing .mc-r1-proof-step:hover {
    background: #fff;
}

body .mc-landing .mc-r1-proof-step[aria-pressed="true"] {
    box-shadow: inset 0 2px 0 var(--mc-r1-accent);
}

body .mc-landing .mc-r1-proof-step strong {
    font-size: 16px;
    line-height: 1.5;
}

body .mc-landing .mc-r1-proof-step em {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
}

body .mc-landing .mc-r1-guest-phone {
    box-shadow: none;
}

body .mc-landing .mc-r1-guest-phone img {
    transform: scale(1.24);
    transform-origin: center top;
}

body .mc-landing .mc-r1-guest-steps button {
    position: relative;
    padding-right: 16px;
    padding-left: 16px;
    transition: background-color .18s ease;
}

body .mc-landing .mc-r1-guest-steps button:hover,
body .mc-landing .mc-r1-guest-steps button[aria-pressed="true"] {
    background: var(--mc-r1-stage);
}

body .mc-landing .mc-r1-guest-steps button[aria-pressed="true"]::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--mc-r1-accent);
    content: "";
}

@media (min-width: 768px) {
    body .mc-landing .mc-design-picker .mc-final-preview__head-copy,
    body .mc-landing .mc-editor-proof .mc-build-copy,
    body .mc-landing .mc-r1-guest .mc-build-copy {
        grid-template-rows: auto auto;
        align-items: start;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy .mc-r1-kicker,
    body .mc-landing .mc-editor-proof .mc-build-copy .mc-r1-kicker,
    body .mc-landing .mc-r1-guest .mc-build-copy .mc-r1-kicker {
        grid-column: 1 / span 5;
        grid-row: 1;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head h2,
    body .mc-landing .mc-editor-proof .mc-build-copy h2,
    body .mc-landing .mc-r1-guest .mc-build-copy h2 {
        grid-column: 1 / span 5;
        grid-row: 2;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-editor-proof .mc-build-copy > p:not(.mc-r1-kicker),
    body .mc-landing .mc-r1-guest .mc-build-copy > p:not(.mc-r1-kicker) {
        grid-column: 6 / -1;
        grid-row: 2;
    }

    body .mc-landing .mc-r1-result-panel {
        grid-column: 1 / span 4;
    }

    body .mc-landing .mc-r1-proof-workbench {
        min-width: 0;
        grid-column: 5 / -1;
    }
}

@media (max-width: 767px) {
    body .mc-landing .mc-r1-proof-workbench {
        min-width: 0;
    }

    body .mc-landing .mc-r1-proof-steps {
        grid-template-columns: 1fr;
    }

    body .mc-landing .mc-r1-proof-step {
        min-height: 0;
        border-left-color: var(--mc-r1-line);
    }

    body .mc-landing .mc-r1-proof-viewer__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    body .mc-landing .mc-r1-guest-phone img {
        transform: scale(1.18);
    }
}

/* 2026-08-19 visual QA corrections */
body .mc-landing .mc-design-picker h2 br,
body .mc-landing .mc-editor-proof h2 br,
body .mc-landing .mc-r1-guest h2 br,
body .mc-landing .mc-benefits h2 br,
body .mc-landing .mc-final-features h2 br,
body .mc-landing .mc-r1-final h2 br {
    display: block;
}

body .mc-landing .mc-r1-final-inner {
    width: var(--bj-content-max, 1000px);
    max-width: calc(100% - 48px);
}

body .mc-landing .mc-r1-final .mc-landing__start {
    color: var(--mc-r1-dark) !important;
    text-align: center;
}

body .mc-landing .mc-design-picker .mc-final-preview__head-copy .mc-r1-kicker,
body .mc-landing .mc-editor-proof .mc-build-copy .mc-r1-kicker,
body .mc-landing .mc-r1-guest .mc-build-copy .mc-r1-kicker {
    text-align: left !important;
}

@media (min-width: 768px) {
    body .mc-landing .mc-r1-proof-crop img {
        transform: scale(3.05);
    }
}

@media (max-width: 767px) {
    body .mc-landing .mc-hero {
        padding-right: 0;
        padding-left: 0;
    }

    body .mc-landing .mc-r1-final-inner {
        width: 100%;
        max-width: none;
    }
}

/* 2026-08-19 catalog focus: phone frame + continuous design browsing */
body .mc-landing .mc-design-picker .mc-preview-canvas {
    height: 812px;
    min-height: 812px;
    padding: 0;
    border: 0;
    background: transparent;
}

body .mc-landing .mc-design-picker .mc-preview__stage,
body .mc-landing .mc-design-picker .mc-preview-phone {
    height: 812px;
    min-height: 812px;
}

body .mc-landing .mc-design-picker .mc-preview-phone {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 38px;
}

body .mc-landing .mc-design-picker .mc-skin-rail__list {
    height: 756px;
    max-height: 756px;
    padding-right: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 255, 255, .42) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

body .mc-landing .mc-design-picker .mc-skin-rail__list::-webkit-scrollbar {
    width: 6px;
}

body .mc-landing .mc-design-picker .mc-skin-rail__list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
}

body .mc-landing .mc-design-picker .mc-skin-rail__list::-webkit-scrollbar-track {
    background: transparent;
}

body .mc-landing .mc-design-picker .mc-catalog-toolbar {
    min-height: 56px;
    margin-bottom: 0;
    padding-bottom: 16px;
    align-items: center;
}

@media (max-width: 767px) {
    body .mc-landing .mc-design-picker .mc-preview-canvas,
    body .mc-landing .mc-design-picker .mc-preview__stage,
    body .mc-landing .mc-design-picker .mc-preview-phone {
        height: 660px;
        min-height: 660px;
    }

    body .mc-landing .mc-design-picker .mc-skin-rail__list {
        height: auto;
        max-height: none;
        padding-right: 0;
        overflow: visible;
        scrollbar-gutter: auto;
    }
}

/* 2026-08-19 catalog refinement: visible selection and quieter chrome */
@media (min-width: 768px) {
    body .mc-landing .mc-design-picker .mc-final-preview__preview-column {
        grid-column: 1 / span 5;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__decision {
        grid-column: 6 / -1;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column {
        display: flex;
        justify-content: center;
    }

    body .mc-landing .mc-design-picker .mc-preview-canvas,
    body .mc-landing .mc-design-picker .mc-preview__stage,
    body .mc-landing .mc-design-picker .mc-preview-phone {
        width: 360px;
        height: 780px;
        min-height: 780px;
    }

    body .mc-landing .mc-design-picker .mc-preview-phone {
        border-color: rgba(255, 255, 255, .42);
        border-radius: 32px;
    }

    body .mc-landing .mc-design-picker .mc-catalog-toolbar {
        height: 56px;
        min-height: 56px;
        padding: 0 0 16px;
    }

    body .mc-landing .mc-design-picker .mc-skin-rail__list {
        height: 724px;
        max-height: 724px;
    }

    body .mc-landing .mc-design-picker .mc-catalog-finish {
        display: flex;
        width: var(--bj-content-max, 1000px);
        max-width: calc(100% - 48px);
        margin: 32px auto 0;
        padding: 32px 0 0;
        justify-content: flex-end;
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    body .mc-landing .mc-design-picker .mc-catalog-finish .mc-landing__start {
        width: 280px;
        min-height: 48px;
    }
}

body .mc-landing .mc-design-picker .mc-skin-card {
    position: relative;
}

body .mc-landing .mc-design-picker .mc-skin-card.is-selected::after {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: var(--mc-r1-dark);
    color: #fff;
    content: "✓";
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    place-items: center;
    z-index: 2;
}

body .mc-landing .mc-design-picker .mc-skin-card.is-selected .mc-skin-thumb {
    box-shadow: 0 0 0 2px #fff;
}

body .mc-landing .mc-design-picker .mc-skin-meta {
    position: static;
    display: flex;
    padding: 10px 2px 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    background: transparent;
}

body .mc-landing .mc-design-picker .mc-skin-name {
    min-width: 0;
    overflow: hidden;
    color: #f4f1eb;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mc-landing .mc-design-picker .mc-badge {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #aaa69f;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

body .mc-landing .mc-design-picker .mc-skin-rail__list {
    scrollbar-color: rgba(255, 255, 255, .72) rgba(255, 255, 255, .08);
}

body .mc-landing .mc-design-picker .mc-skin-rail__list::-webkit-scrollbar {
    width: 8px;
}

body .mc-landing .mc-design-picker .mc-skin-rail__list::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

body .mc-landing .mc-design-picker .mc-skin-rail__list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
}

@media (max-width: 767px) {
    body .mc-landing .mc-design-picker .mc-catalog-finish {
        width: calc(100% - 32px);
        margin: 32px auto 0;
        padding-top: 32px;
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    body .mc-landing .mc-design-picker .mc-catalog-finish .mc-landing__start {
        width: 100%;
    }
}

/* 2026-08-19 selection treatment: one check only, mobile-shaped corners */
body .mc-landing .mc-design-picker .mc-skin-card,
body .mc-landing .mc-design-picker .mc-skin-card.is-selected {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body .mc-landing .mc-design-picker .mc-skin-thumb,
body .mc-landing .mc-design-picker .mc-skin-card.is-selected .mc-skin-thumb {
    overflow: hidden;
    border: 0 !important;
    border-radius: var(--bj-catalog-media-radius, 8px) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Apply the catalog radius to the media itself as well. iOS can promote a
   lazy-loaded image to its own compositing layer and skip the parent's clip. */
body .mc-landing .mc-design-picker .mc-skin-thumb > img {
    border-radius: inherit !important;
}

body .mc-landing .mc-design-picker .mc-skin-thumb::before,
body .mc-landing .mc-design-picker .mc-skin-thumb::after {
    display: none !important;
    content: none !important;
}

body .mc-landing .mc-design-picker .mc-skin-card.is-selected::after {
    top: 12px;
    right: 12px;
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1a1a18;
    content: "✓";
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, .95),
         1px -1px 0 rgba(255, 255, 255, .95),
        -1px  1px 0 rgba(255, 255, 255, .95),
         1px  1px 0 rgba(255, 255, 255, .95);
}

body .mc-landing .mc-design-picker .mc-preview-phone {
    border-radius: 26px !important;
    clip-path: inset(0 round 26px);
    isolation: isolate;
}

body .mc-landing .mc-design-picker .mc-preview-phone__frame,
body .mc-landing .mc-design-picker .mc-v5-embed,
body .mc-landing .mc-design-picker .ed-preview,
body .mc-landing .mc-design-picker .ed-preview__frame {
    border-radius: 26px !important;
    background: transparent !important;
}

@media (min-width: 768px) {
    body .mc-landing .mc-design-picker .mc-final-preview__workspace {
        width: var(--bj-content-max, 1000px);
        max-width: calc(100% - 48px);
        padding: 32px 0 0;
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 40px;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column,
    body .mc-landing .mc-design-picker .mc-final-preview__decision {
        grid-column: auto !important;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column {
        width: 360px !important;
        justify-content: flex-start !important;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__decision {
        width: auto !important;
        padding: 0 !important;
    }
}

/* final alignment: preview and thumbnail grid share the same top line */
body .mc-landing .mc-design-picker {
    border-top: 0 !important;
}

/* One section divider: the heading introduces both preview and catalog. */
body .mc-landing .mc-design-picker .mc-final-preview__head {
    margin-bottom: 0 !important;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

body .mc-landing .mc-design-picker .mc-final-preview__workspace {
    border-top: 0 !important;
}

@media (min-width: 768px) {
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__list {
        order: 2;
        padding-top: 0 !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__menu {
        order: 1;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more {
        order: 3;
        border-top: 0 !important;
    }
}

/* selected design information uses one alignment rule */
body .mc-landing .mc-design-picker .mc-preview-actions {
    padding-top: 20px !important;
    gap: 0 !important;
    align-items: stretch !important;
    text-align: left !important;
}

body .mc-landing .mc-design-picker .mc-preview-actions__meta {
    display: flex !important;
    width: 100% !important;
    min-height: 24px;
    margin: 0 !important;
    align-items: center !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
}

body .mc-landing .mc-design-picker .mc-preview-actions__meta strong {
    display: block;
    flex: 0 1 auto !important;
    color: #f4f1eb;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

body .mc-landing .mc-design-picker .mc-preview-actions__meta span {
    display: inline-flex;
    flex: 0 0 auto;
    color: #aaa69f;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

body .mc-landing .mc-design-picker .mc-preview-actions__set-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 8px !important;
    align-items: center;
    text-align: left !important;
}

body .mc-landing .mc-design-picker .mc-preview-actions__start {
    width: 100% !important;
    margin-top: 18px !important;
    text-align: center !important;
}

/* Search stays visible below the scrollable catalog and above the full-view action. */
body .mc-landing .mc-design-picker .mc-catalog-search {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 0 2px;
    flex: 0 0 56px;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    background: #1a1a18;
    color: #f4f1eb;
}

body .mc-landing .mc-design-picker .mc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body .mc-landing .mc-design-picker .mc-catalog-search > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: #aaa69f;
    stroke-linecap: round;
    stroke-width: 1.4;
}

body .mc-landing .mc-design-picker .mc-catalog-search > input {
    box-sizing: border-box;
    width: 100%;
    height: 55px;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f4f1eb;
    font: inherit;
    font-size: 14px;
}

body .mc-landing .mc-design-picker .mc-catalog-search > input::placeholder {
    color: #8f8b84;
    opacity: 1;
}

body .mc-landing .mc-design-picker .mc-catalog-search > input::-webkit-search-cancel-button,
body .mc-landing .mc-design-picker .mc-catalog-search > input::-webkit-search-decoration {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

body .mc-landing .mc-design-picker .mc-catalog-search:focus-within {
    border-top-color: rgba(255, 255, 255, .72);
}

body .mc-landing .mc-design-picker .mc-catalog-search > button {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    flex: 0 0 32px;
    border: 0;
    background: transparent;
    color: #aaa69f;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    place-items: center;
}

body .mc-landing .mc-design-picker .mc-catalog-search > button[hidden] {
    display: none !important;
}

/* final desktop catalog composition: match the full 928px preview column. */
@media (min-width: 768px) {
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision {
        height: 928px !important;
        align-self: start !important;
        overflow: visible !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__inner {
        display: flex !important;
        height: 100% !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__menu {
        position: relative !important;
        z-index: 30;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        flex: 0 0 52px !important;
        order: 1;
        border: 0 !important;
        overflow: visible !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-filter-panel {
        position: absolute !important;
        z-index: 40;
        top: 52px !important;
        right: 0;
        left: 0;
        box-sizing: border-box;
        width: 100% !important;
        margin: 0 !important;
        padding: 18px 20px 20px !important;
        border-top: 1px solid rgba(255, 255, 255, .16) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .26) !important;
        background: #1a1a18 !important;
        box-shadow: 0 20px 30px rgba(0, 0, 0, .28) !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-toolbar {
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__list {
        position: relative !important;
        z-index: 1;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 10px 0 0 !important;
        flex: 1 1 auto !important;
        order: 2;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-grid.is-narrowed[data-mc-result-count="1"] {
        grid-template-columns: 183px !important;
        justify-content: center !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-grid.is-narrowed[data-mc-result-count="2"] {
        grid-template-columns: repeat(2, 183px) !important;
        justify-content: center !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-card {
        display: block !important;
        min-width: 0 !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-thumb {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 9 / 16 !important;
        background: #f7f7f5 !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-thumb img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-meta {
        min-height: 28px;
        padding: 7px 2px 0 !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more {
        display: block;
        height: 92px;
        min-height: 92px;
        margin: 0;
        padding: 44px 0 0;
        flex: 0 0 92px;
        order: 4;
        border: 0 !important;
        background: #1a1a18 !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more .mc-catalog-expand {
        width: 100%;
        min-height: 48px;
        margin: 0;
        justify-content: center;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-search {
        order: 3;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-catalog-search {
        order: 3;
    }
}

/* Expanded catalog hierarchy and filter states. */
@media (min-width: 768px) {
    body.mc-catalog-expanded .mc-catalog-expanded__head {
        justify-content: space-between !important;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title {
        display: flex !important;
        width: auto !important;
        margin: 0 !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 5px !important;
        text-align: left !important;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title > span {
        line-height: 1 !important;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title > strong {
        display: flex;
        align-items: baseline;
        gap: 2px;
        line-height: 1.08;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title em {
        margin-left: 8px !important;
        font-size: 13px;
        letter-spacing: 0;
    }
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-filter {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-filter__row {
    min-height: 34px;
    align-items: center;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-filter__label {
    color: #85817a !important;
    font-weight: 500 !important;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-filter__chips {
    gap: 7px !important;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-fchip:not(.skin-fchip--color) {
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #c4c0b9 !important;
    font-weight: 500 !important;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-fchip:not(.skin-fchip--color):hover {
    border-color: rgba(255, 255, 255, .48) !important;
    color: #fff !important;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-fchip.is-on:not(.skin-fchip--color) {
    border-color: #f4f1eb !important;
    background: #f4f1eb !important;
    color: #1a1a18 !important;
    font-weight: 700 !important;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-fchip--color {
    box-sizing: border-box;
    border-radius: 50% !important;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-fchip--color .skin-fchip__sw {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    transition: box-shadow .18s ease, transform .18s ease;
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-fchip--color:hover .skin-fchip__sw {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .42);
}

body .mc-landing .mc-design-picker .mc-catalog-filter-panel .skin-fchip--color.is-on .skin-fchip__sw {
    box-shadow: 0 0 0 2px #1a1a18, 0 0 0 3px #f4f1eb !important;
}

body .mc-landing .mc-design-picker .mc-skin-card.is-selected::after {
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    width: 30px !important;
    height: 30px !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 50% !important;
    background: #1a1a18 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22) !important;
    color: #fff !important;
    content: "✓" !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    place-items: center !important;
    z-index: 3 !important;
}

/* R3 — MAKE IT YOURS live style composer */
body .mc-landing .mc-style-composer {
    padding: 104px 0 112px !important;
    scroll-margin-top: calc(var(--mc-header-h, 0px) + 24px);
    background: #f4f3f0 !important;
    color: #191918;
}

body .mc-landing .mc-style-composer__inner {
    width: min(1000px, calc(100% - 48px));
    margin: 0 auto;
}

body .mc-landing .mc-style-composer__head {
    display: grid;
    grid-template-columns: 360px 520px;
    column-gap: 120px;
    align-items: end;
    margin: 0 0 58px;
}

body .mc-landing .mc-style-composer__head .mc-r1-kicker {
    grid-column: 1 / -1;
    margin: 0 0 20px;
    color: #6f6a78;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
}

body .mc-landing .mc-style-composer__head h2 {
    margin: 0;
    color: #1d1d1c;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.17;
    letter-spacing: -.045em;
}

body .mc-landing .mc-style-composer__head > p:last-child {
    margin: 0 0 4px;
    color: #67645f;
    font-size: 17px;
    line-height: 1.78;
    letter-spacing: -.02em;
}

body .mc-landing .mc-style-composer__workspace {
    display: grid;
    grid-template-columns: 420px 524px;
    gap: 56px;
    align-items: start;
}

body .mc-landing .mc-style-composer__preview {
    position: sticky;
    top: calc(var(--mc-header-h, 0px) + 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

body .mc-landing .mc-style-composer__phone {
    position: relative;
    box-sizing: border-box;
    width: 360px;
    height: 684px;
    overflow: hidden;
    border: 1px solid #d4d1cb;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 24px 54px rgba(31, 29, 24, .12);
}

body .mc-landing .mc-style-composer__phone::after {
    position: absolute;
    inset: 0;
    border: 7px solid rgba(255, 255, 255, .74);
    border-radius: inherit;
    content: "";
    pointer-events: none;
    z-index: 4;
}

body .mc-landing .mc-style-composer__fallback,
body .mc-landing .mc-style-composer__mount {
    position: absolute;
    inset: 7px;
    overflow: hidden;
    border-radius: 25px;
    background: #fff;
}

body .mc-landing .mc-style-composer__fallback {
    display: grid;
    place-items: start stretch;
    z-index: 1;
}

body .mc-landing .mc-style-composer__fallback img {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
}

body .mc-landing .mc-style-composer__fallback.is-hidden { opacity: 0; visibility: hidden; }
body .mc-landing .mc-style-composer__mount { z-index: 2; opacity: 0; transition: opacity .22s ease; }
body .mc-landing .mc-style-composer__mount.is-active { opacity: 1; }
body .mc-landing .mc-style-composer__mount > * { width: 100%; min-height: 100%; }
body .mc-landing .mc-style-composer__mount .cover__preview-badge,
body .mc-landing .mc-style-composer__mount .sample-photo-watermark { display: none !important; }
body .mc-landing .mc-mobile-preview-overlay .cover__preview-badge,
body .mc-landing .mc-mobile-preview-overlay .sample-photo-watermark,
body .mc-landing .mc-preview-phone .cover__preview-badge,
body .mc-landing .mc-preview-phone .sample-photo-watermark { display: none !important; }

body .mc-landing .mc-style-composer__identity {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 360px;
    margin-top: 18px;
    align-items: baseline;
}

body .mc-landing .mc-style-composer__identity span {
    grid-column: 1 / -1;
    margin-bottom: 3px;
    color: #8b8780;
    font-size: 12px;
    letter-spacing: .06em;
}

body .mc-landing .mc-style-composer__identity strong {
    overflow: hidden;
    color: #242321;
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mc-landing .mc-style-composer__identity a {
    min-height: 44px;
    padding-left: 18px;
    color: #5e5a55;
    font-size: 13px;
    line-height: 44px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body .mc-landing .mc-style-composer__anchors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 360px;
    margin-top: 12px;
    border-top: 1px solid #d9d6d0;
}

body .mc-landing .mc-style-composer__anchors button {
    min-height: 44px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #d9d6d0;
    background: transparent;
    color: #8b8780;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

body .mc-landing .mc-style-composer__anchors button.is-active {
    border-bottom-color: #1d1d1c;
    color: #1d1d1c;
    font-weight: 700;
}

body .mc-landing .mc-style-composer__full {
    min-height: 44px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3c3935;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

body .mc-landing .mc-style-composer__controls {
    padding-top: 6px;
}

body .mc-landing .mc-style-composer__intro > span {
    color: #7a746e;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
}

body .mc-landing .mc-style-composer__intro h3 {
    margin: 12px 0 10px;
    color: #1c1c1b;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.035em;
}

body .mc-landing .mc-style-composer__intro p {
    margin: 0;
    color: #716d67;
    font-size: 15px;
    line-height: 1.7;
}

body .mc-landing .mc-style-composer__styles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 30px;
}

body .mc-landing .mc-style-option {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 62px;
    box-sizing: border-box;
    padding: 12px 18px;
    border: 1px solid #d4d1cb;
    border-radius: 6px;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .42);
    color: #242321;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

body .mc-landing .mc-style-option:hover { border-color: #9b9790; background: rgba(255,255,255,.72); }
body .mc-landing .mc-style-option:focus-visible { outline: 2px solid #1d1d1c; outline-offset: 3px; }
body .mc-landing .mc-style-option.is-selected { border-color: #1d1d1c; background: #fff; }

body .mc-landing .mc-style-option__check {
    display: grid;
    width: 26px;
    height: 26px;
    border: 1px solid #bbb7b0;
    border-radius: 50%;
    color: transparent;
    font-size: 13px;
    font-weight: 800;
    place-items: center;
}

body .mc-landing .mc-style-option.is-selected .mc-style-option__check {
    border-color: #1d1d1c;
    background: #1d1d1c;
    color: #fff;
}

body .mc-landing .mc-style-option__copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
body .mc-landing .mc-style-option__copy strong { font-size: 16px; font-weight: 650; }
body .mc-landing .mc-style-option__copy em { overflow: hidden; color: #77736d; font-size: 13px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
body .mc-landing .mc-style-option small { color: #6e6878; font-size: 11px; font-weight: 600; white-space: nowrap; }

body .mc-landing .mc-style-composer__status {
    min-height: 24px;
    margin: 16px 0 8px;
    color: #6e6963;
    font-size: 13px;
    line-height: 1.6;
}

body .mc-landing .mc-style-composer__cta {
    display: flex;
    min-height: 52px;
    border: 1px solid #1d1d1c;
    align-items: center;
    justify-content: center;
    background: #1d1d1c;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

body .mc-landing .mc-style-composer__cta:hover { background: transparent; color: #1d1d1c; }
body .mc-landing .mc-style-composer__cta[aria-disabled="true"] { opacity: .45; pointer-events: none; }
body .mc-landing .mc-style-composer__safety { margin: 10px 0 0; color: #89857e; font-size: 12px; text-align: center; }

@media (max-width: 999px) and (min-width: 861px) {
    body .mc-landing .mc-style-composer__head { grid-template-columns: 42% 52%; column-gap: 6%; }
    body .mc-landing .mc-style-composer__workspace { grid-template-columns: 42% 52%; gap: 6%; }
    body .mc-landing .mc-style-composer__phone,
    body .mc-landing .mc-style-composer__identity,
    body .mc-landing .mc-style-composer__anchors { width: min(100%, 360px); }
}

@media (max-width: 860px) {
    body .mc-landing .mc-style-composer { padding: 72px 0 92px !important; }
    body .mc-landing .mc-style-composer__inner { width: calc(100% - 40px); max-width: 600px; }
    body .mc-landing .mc-style-composer__head { display: block; margin-bottom: 38px; text-align: left; }
    body .mc-landing .mc-style-composer__head .mc-r1-kicker { margin-bottom: 14px; }
    body .mc-landing .mc-style-composer__head h2 { font-size: 34px; }
    body .mc-landing .mc-style-composer__head > p:last-child { margin-top: 18px; font-size: 15px; line-height: 1.7; }
    body .mc-landing .mc-style-composer__workspace { display: flex; flex-direction: column; gap: 42px; }
    body .mc-landing .mc-style-composer__preview { position: static; width: 100%; }
    body .mc-landing .mc-style-composer__phone { width: min(100%, 320px); height: 400px; border-radius: 28px; }
    body .mc-landing .mc-style-composer__fallback,
    body .mc-landing .mc-style-composer__mount { border-radius: 21px; }
    body .mc-landing .mc-style-composer__identity,
    body .mc-landing .mc-style-composer__anchors { width: min(100%, 320px); }
    body .mc-landing .mc-style-composer__intro h3 { font-size: 24px; }
    body .mc-landing .mc-style-composer__styles { margin-top: 24px; }
    body .mc-landing .mc-style-option { grid-template-columns: 28px minmax(0, 1fr); padding: 12px 14px; }
    body .mc-landing .mc-style-option small { grid-column: 2; }
    body .mc-landing .mc-style-option__copy em { white-space: normal; }
    body .mc-landing .mc-style-composer__cta { min-height: 56px; }
}

@media (max-height: 820px), (min-resolution: 1.9dppx) {
    body .mc-landing .mc-style-composer__preview { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-style-composer__mount,
    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-composer__cta { transition: none !important; }
}

/* R6 final cascade: keep the 1000px composition and editorial row hierarchy. */
body .mc-landing .mc-style-composer__preview,
body .mc-landing .mc-style-composer__controls {
    width: 100%;
}

body .mc-landing .mc-style-composer__anchors {
    grid-template-columns: repeat(3, 1fr);
}

body .mc-landing .mc-style-composer__styles {
    gap: 0;
    border-top: 1px solid #d4d1cb;
}

body .mc-landing .mc-style-option,
body .mc-landing .mc-style-option:hover,
body .mc-landing .mc-style-option.is-selected {
    border: 0;
    border-bottom: 1px solid #d4d1cb;
    border-radius: 0;
}

body .mc-landing .mc-style-option { background: transparent; }
body .mc-landing .mc-style-option:hover { background: rgba(255, 255, 255, .58); }
body .mc-landing .mc-style-option.is-selected { background: #fff; }

/* R7 — compact style list + one-at-a-time detail studio. */
body .mc-landing .mc-style-composer__intro p {
    max-width: 480px;
}

body .mc-landing .mc-style-composer__styles {
    margin-top: 22px;
}

body .mc-landing .mc-style-option,
body .mc-landing .mc-style-option:hover,
body .mc-landing .mc-style-option.is-selected {
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    min-height: 48px;
    padding: 0 12px;
    gap: 10px;
}

body .mc-landing .mc-style-option__number {
    color: #928d86;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
}

body .mc-landing .mc-style-option > strong {
    color: #272522;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.015em;
}

body .mc-landing .mc-style-option__check {
    width: 22px;
    height: 22px;
    justify-self: end;
    font-size: 11px;
}

body .mc-landing .mc-style-composer__style-description {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 46px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 12px 11px;
    border-bottom: 1px solid #d4d1cb;
    align-items: center;
    gap: 10px;
    color: #6e6963;
    font-size: 12px;
    line-height: 1.45;
}

body .mc-landing .mc-style-composer__style-description strong {
    color: #252321;
    font-size: 12px;
    font-weight: 700;
}

body .mc-landing .mc-style-customize {
    margin-top: 26px;
    padding: 0;
    border: 1px solid #d4d1cb;
    border-radius: 6px;
    background: rgba(255, 255, 255, .44);
}

body .mc-landing .mc-style-customize__head {
    display: flex;
    min-height: 72px;
    box-sizing: border-box;
    padding: 14px 16px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body .mc-landing .mc-style-customize__head > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

body .mc-landing .mc-style-customize__head small {
    color: #7d7871;
    font-size: 11px;
    font-weight: 500;
}

body .mc-landing .mc-style-customize__head small b {
    color: #4e4a45;
    font-weight: 700;
}

body .mc-landing .mc-style-customize__head strong {
    color: #22201e;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.02em;
}

body .mc-landing .mc-style-customize__state {
    display: flex;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: #6a655f;
    font-size: 11px;
}

body .mc-landing .mc-style-customize__state[hidden] { display: none; }
body .mc-landing .mc-style-customize__state span::before { display: none; }
body .mc-landing .mc-style-customize__state button {
    min-height: 36px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid #6f6a64;
    background: transparent;
    color: #35322f;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

body .mc-landing .mc-style-customize__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 46px;
    border-top: 1px solid #d9d6d0;
    border-bottom: 1px solid #d9d6d0;
}

body .mc-landing .mc-style-customize__tabs button {
    position: relative;
    min-width: 0;
    min-height: 46px;
    padding: 0 6px;
    border: 0;
    border-right: 1px solid #e0ddd7;
    background: transparent;
    color: #827d76;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

body .mc-landing .mc-style-customize__tabs button:last-child { border-right: 0; }
body .mc-landing .mc-style-customize__tabs button.is-active,
body .mc-landing .mc-style-customize__tabs button[aria-selected="true"] {
    background: #fff;
    color: #242220;
}

body .mc-landing .mc-style-customize__tabs button[aria-selected="true"]::after {
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
    background: #242220;
    content: "";
}

body .mc-landing .mc-style-customize__tabs button:focus-visible,
body .mc-landing .mc-style-customize__panel button:focus-visible {
    outline: 2px solid #242220;
    outline-offset: -3px;
}

body .mc-landing .mc-style-customize__body {
    min-height: 150px;
    box-sizing: border-box;
    padding: 16px;
    background: rgba(255, 255, 255, .64);
}

body .mc-landing .mc-style-customize__panel[hidden] { display: none; }
body .mc-landing .mc-style-customize__panel > p {
    margin: 0 0 12px;
    color: #716c66;
    font-size: 12px;
    line-height: 1.5;
}

body .mc-landing .mc-custom-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body .mc-landing .mc-custom-inline button {
    display: flex;
    min-height: 58px;
    padding: 0 10px;
    border: 1px solid #d7d3cd;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #5f5b55;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

body .mc-landing .mc-custom-inline button.is-active {
    border-color: #242220;
    box-shadow: inset 0 0 0 1px #242220;
    color: #242220;
    font-weight: 700;
}

body .mc-landing .mc-custom-inline--color i {
    width: 16px;
    height: 16px;
    border: 1px solid #d4d1cb;
    border-radius: 50%;
    background: #f4f3f0;
}

body .mc-landing .mc-custom-inline--color [data-mc-custom-color="rose"] i { background: #b8717c; }
body .mc-landing .mc-custom-inline--color [data-mc-custom-color="sage"] i { background: #6f8b72; }

body .mc-landing .mc-custom-visuals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

body .mc-landing .mc-custom-visuals button {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 92px;
    padding: 7px 5px 6px;
    border: 1px solid #d7d3cd;
    border-radius: 6px;
    align-content: space-between;
    justify-items: center;
    gap: 5px;
    background: #fff;
    color: #5f5b55;
    font: inherit;
    cursor: pointer;
}

body .mc-landing .mc-custom-visuals button.is-active {
    border-color: #242220;
    box-shadow: inset 0 0 0 1px #242220;
    color: #242220;
}

body .mc-landing .mc-custom-visuals button.is-active::after {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #242220;
    color: #fff;
    content: "✓";
    font-size: 10px;
    font-weight: 800;
    place-items: center;
}

body .mc-landing .mc-custom-visuals img,
body .mc-landing .mc-custom-visuals button > span {
    width: 100%;
    height: 52px;
    object-fit: contain;
}

body .mc-landing .mc-custom-visuals button > span {
    display: grid;
    border-radius: 4px;
    background: #f6f5f3;
    color: #aaa59e;
    font-size: 11px;
    place-items: center;
}

body .mc-landing .mc-custom-visuals b {
    overflow: hidden;
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mc-landing .mc-custom-visuals--background button { min-height: 92px; }
body .mc-landing .mc-custom-visuals--background i {
    display: block;
    width: 100%;
    height: 52px;
    border: 1px solid rgba(53, 48, 43, .1);
    border-radius: 4px;
}

body .mc-landing .mc-custom-visuals--background .is-ivory { background: #fdf8f4; }
body .mc-landing .mc-custom-visuals--background .is-butter { background: linear-gradient(180deg, #fffdf5 0 50%, #fff4d6 50% 100%); }
body .mc-landing .mc-custom-visuals--background .is-peach { background: linear-gradient(180deg, #fff8f1 0 28%, #ffe5d6 46% 64%, #fff8f1 84%); }
body .mc-landing .mc-custom-visuals--background .is-lilac { background: linear-gradient(180deg, #fbf9ff 0 28%, #e0daf6 46% 64%, #fbf9ff 84%); }
body .mc-landing .mc-custom-visuals--background .is-sky { background: linear-gradient(135deg, #f7faff, #e3f0ff); }

body .mc-landing .mc-style-composer__status { margin-top: 14px; }
body .mc-landing .mc-style-composer__summary { line-height: 1.55; }

@media (max-width: 860px) {
    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-option:hover,
    body .mc-landing .mc-style-option.is-selected {
        grid-template-columns: 32px minmax(0, 1fr) 24px;
        min-height: 46px;
        padding: 0 10px;
    }

    body .mc-landing .mc-style-option > strong { font-size: 14px; }
    body .mc-landing .mc-style-composer__style-description { grid-template-columns: 64px minmax(0, 1fr); }
    body .mc-landing .mc-style-customize__head { min-height: 68px; padding-right: 12px; padding-left: 12px; }
    body .mc-landing .mc-style-customize__head strong { font-size: 17px; }
    body .mc-landing .mc-style-customize__state > span { display: none; }
    body .mc-landing .mc-style-customize__body { min-height: 142px; padding: 12px 10px; }
    body .mc-landing .mc-style-customize__tabs button { min-height: 44px; font-size: 12px; }
    body .mc-landing .mc-custom-inline { gap: 6px; }
    body .mc-landing .mc-custom-inline button { min-height: 54px; padding: 0 5px; font-size: 11px; }
    body .mc-landing .mc-custom-visuals { gap: 5px; }
    body .mc-landing .mc-custom-visuals button,
    body .mc-landing .mc-custom-visuals--background button { min-height: 82px; padding-right: 3px; padding-left: 3px; }
    body .mc-landing .mc-custom-visuals img,
    body .mc-landing .mc-custom-visuals button > span,
    body .mc-landing .mc-custom-visuals--background i { height: 44px; }
    body .mc-landing .mc-custom-visuals b { font-size: 10px; }
}

/* R8 final cascade — keep mood and details in one visual system. */
body .mc-landing .mc-style-deck { overflow: hidden; border-top: 1px solid #cbc7c0; border-bottom: 1px solid #cbc7c0; }
body .mc-landing .mc-style-deck__label,
body .mc-landing .mc-style-customize__head { display: flex; min-height: 52px; box-sizing: border-box; padding: 0 2px; align-items: center; justify-content: space-between; gap: 20px; }
body .mc-landing .mc-style-deck__label strong,
body .mc-landing .mc-style-customize__head > strong { color: #242220; font-size: 14px; font-weight: 700; letter-spacing: -.015em; }
body .mc-landing .mc-style-deck__label span { color: #8a857e; font-size: 12px; }
body .mc-landing .mc-style-composer__styles { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; margin: 0; border: 0; border-top: 1px solid #e1ded8; }
body .mc-landing .mc-style-option,
body .mc-landing .mc-style-option:hover,
body .mc-landing .mc-style-option.is-selected { display: flex; min-width: 0; min-height: 64px; padding: 0 4px; border: 0; border-right: 1px solid #e1ded8; border-radius: 0; align-items: center; justify-content: center; gap: 7px; background: transparent; box-shadow: none; text-align: center; }
body .mc-landing .mc-style-option:last-child { border-right: 0; }
body .mc-landing .mc-style-option:hover { background: rgba(255,255,255,.52); }
body .mc-landing .mc-style-option.is-selected { background: #fff; }
body .mc-landing .mc-style-option > strong { font-size: 13px; font-weight: 600; }
body .mc-landing .mc-style-option__check { width: 17px; height: 17px; border: 1px solid #aaa59e; border-radius: 50%; flex: 0 0 17px; font-size: 9px; }
body .mc-landing .mc-style-option.is-selected .mc-style-option__check { border-color: #242220; background: #242220; color: #fff; }
body .mc-landing .mc-style-composer__style-description { display: flex; min-height: 48px; margin: 0; padding: 0 2px; border-top: 1px solid #e1ded8; border-bottom: 0; align-items: center; gap: 12px; font-size: 12px; }
body .mc-landing .mc-style-composer__style-description strong { flex: 0 0 auto; font-size: 12px; }
body .mc-landing .mc-style-customize { margin: 0; padding: 0; border: 0; border-top: 1px solid #cbc7c0; border-radius: 0; background: transparent; }
body .mc-landing .mc-style-customize__head { min-height: 52px; padding-right: 2px; padding-left: 2px; }
body .mc-landing .mc-style-customize__state { min-height: 44px; font-size: 11px; }
body .mc-landing .mc-style-customize__tabs { min-height: 48px; border-top: 1px solid #e1ded8; border-bottom: 1px solid #cbc7c0; }
body .mc-landing .mc-style-customize__tabs button { min-height: 48px; border: 0; background: transparent; font-size: 13px; }
body .mc-landing .mc-style-customize__tabs button[aria-selected="true"] { background: transparent; color: #242220; }
body .mc-landing .mc-style-customize__tabs button[aria-selected="true"]::after { right: 18px; bottom: -1px; left: 18px; height: 2px; }
body .mc-landing .mc-style-customize__body { min-height: 146px; padding: 16px 0 14px; background: transparent; }
body .mc-landing .mc-style-customize__panel > p { margin-bottom: 12px; font-size: 12px; }
body .mc-landing .mc-custom-inline { gap: 8px; }
body .mc-landing .mc-custom-inline button { min-height: 60px; border-color: #d5d1ca; border-radius: 4px; background: rgba(255,255,255,.68); }
body .mc-landing .mc-custom-visuals { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
body .mc-landing .mc-custom-visuals button,
body .mc-landing .mc-custom-visuals--background button { min-height: 92px; border-color: #d5d1ca; border-radius: 4px; background: rgba(255,255,255,.68); }
body .mc-landing .mc-custom-inline button.is-active,
body .mc-landing .mc-custom-visuals button.is-active { border-color: #242220; box-shadow: inset 0 0 0 1px #242220; background: #fff; }
body .mc-landing .mc-style-composer__status { min-height: 20px; margin: 14px 0 0; }
body .mc-landing .mc-style-composer__summary { min-height: 22px; margin: 4px 0 0; color: #242220; font-size: 13px; font-weight: 650; }

@media (max-width: 860px) {
    body .mc-landing .mc-style-deck__label,
    body .mc-landing .mc-style-customize__head { min-height: 50px; }
    body .mc-landing .mc-style-deck__label span { display: none; }
    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-option:hover,
    body .mc-landing .mc-style-option.is-selected { min-height: 54px; padding: 0 2px; gap: 4px; }
    body .mc-landing .mc-style-option > strong { font-size: 11px; }
    body .mc-landing .mc-style-option__check { width: 15px; height: 15px; flex-basis: 15px; }
    body .mc-landing .mc-style-composer__style-description { min-height: 46px; }
    body .mc-landing .mc-style-customize__body { min-height: 164px; padding: 14px 0 12px; }
    body .mc-landing .mc-custom-visuals { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
    body .mc-landing .mc-custom-visuals button,
    body .mc-landing .mc-custom-visuals--background button { min-height: 82px; }
}

@media (min-width:360px) and (max-width:860px) and (min-height:700px) and (orientation:portrait) {
    body .mc-landing .mc-style-composer__workspace { gap: 28px; }
    body .mc-landing .mc-style-composer__preview { position: sticky; top: 76px; z-index: 6; align-self: center; padding: 8px; border: 1px solid #d4d1cb; border-radius: 22px; background: rgba(247,246,243,.96); box-shadow: 0 12px 32px rgba(31,29,24,.11); backdrop-filter: blur(12px); }
    body .mc-landing .mc-style-composer__phone { width: 100%; height: min(220px,28vh); border-radius: 17px; box-shadow: none; }
    body .mc-landing .mc-style-composer__fallback,
    body .mc-landing .mc-style-composer__mount { border-radius: 11px; }
    body .mc-landing .mc-style-composer__mount .ed-preview__frame { overflow: hidden !important; pointer-events: none; }
    body .mc-landing .mc-style-composer__identity,
    body .mc-landing .mc-style-composer__anchors { display: none; }
    body .mc-landing .mc-style-composer__full { min-height: 44px; margin: 2px 0 0; }
}

@media (max-width:359px), (max-height:699px), (orientation:landscape) {
    body .mc-landing .mc-style-composer__preview { position: static; }
}

/* R9 — align MAKE IT YOURS to the 1000px design-picker grid and Bojagi DS. */
body .mc-landing .mc-style-composer {
    padding: 96px 0 !important;
    color: var(--bj-ink, #181817);
}

body .mc-landing .mc-style-composer__head {
    grid-template-columns: 360px 600px;
    column-gap: 40px;
    margin-bottom: 64px;
}

body .mc-landing .mc-style-composer__head .mc-r1-kicker {
    margin-bottom: 16px;
    color: var(--bj-tertiary, #918e87);
    font-size: var(--bj-type-caption, 14px);
    line-height: 1.5;
}

body .mc-landing .mc-style-composer__head h2 {
    color: var(--bj-ink, #181817);
    font-size: var(--bj-type-section, 28px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.04em;
}

body .mc-landing .mc-style-composer__head > p:last-child {
    margin: 0;
    color: var(--bj-muted, #66635e);
    font-size: var(--bj-type-body, 16px);
    line-height: 1.6;
    letter-spacing: 0;
}

body .mc-landing .mc-style-composer__workspace {
    grid-template-columns: 360px 600px;
    gap: 40px;
}

body .mc-landing .mc-style-composer__preview {
    width: 360px;
    align-items: stretch;
}

body .mc-landing .mc-style-composer__phone {
    width: 360px;
    height: 780px;
    border-color: var(--bj-line, #ddd9d2);
    border-radius: 26px;
    box-shadow: none;
}

body .mc-landing .mc-style-composer__phone::after { display: none; }
body .mc-landing .mc-style-composer__fallback,
body .mc-landing .mc-style-composer__mount { inset: 0; border-radius: 25px; }
body .mc-landing .mc-style-composer__identity,
body .mc-landing .mc-style-composer__anchors { width: 360px; }

body .mc-landing .mc-style-composer__identity { margin-top: 16px; }
body .mc-landing .mc-style-composer__identity span,
body .mc-landing .mc-style-composer__identity a {
    color: var(--bj-tertiary, #918e87);
    font-size: var(--bj-type-caption, 14px);
    line-height: 1.5;
}
body .mc-landing .mc-style-composer__identity strong {
    color: var(--bj-ink, #181817);
    font-size: var(--bj-type-body, 16px);
    line-height: 1.6;
}
body .mc-landing .mc-style-composer__anchors { margin-top: 16px; border-color: var(--bj-line, #ddd9d2); }
body .mc-landing .mc-style-composer__anchors button,
body .mc-landing .mc-style-composer__full {
    min-height: 48px;
    color: var(--bj-muted, #66635e);
    font-size: var(--bj-type-control, 15px);
    line-height: 1.6;
}

body .mc-landing .mc-style-composer__controls {
    display: flex;
    width: 600px;
    min-height: 780px;
    flex-direction: column;
}

body .mc-landing .mc-style-deck {
    border-color: var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-style-deck__label,
body .mc-landing .mc-style-customize__head {
    min-height: 64px;
    padding: 0;
}

body .mc-landing .mc-style-deck__label strong,
body .mc-landing .mc-style-customize__head > strong {
    color: var(--bj-ink, #181817);
    font-size: var(--bj-type-subsection, 20px);
    font-weight: 600;
    line-height: 1.5;
}

body .mc-landing .mc-style-deck__label span,
body .mc-landing .mc-style-customize__state,
body .mc-landing .mc-style-customize__panel > p,
body .mc-landing .mc-style-composer__status,
body .mc-landing .mc-style-composer__safety {
    color: var(--bj-muted, #66635e);
    font-size: var(--bj-type-caption, 14px);
    line-height: 1.5;
}

body .mc-landing .mc-style-composer__styles {
    border-color: var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-style-option,
body .mc-landing .mc-style-option:hover,
body .mc-landing .mc-style-option.is-selected {
    min-height: 64px;
    border-color: var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-style-option > strong,
body .mc-landing .mc-style-customize__tabs button,
body .mc-landing .mc-custom-inline button,
body .mc-landing .mc-custom-visuals b {
    color: var(--bj-ink, #181817);
    font-size: var(--bj-type-control, 15px);
    font-weight: 500;
    line-height: 1.6;
}

body .mc-landing .mc-style-option__check {
    width: 20px;
    height: 20px;
    border-color: var(--bj-line, #ddd9d2);
    flex-basis: 20px;
    font-size: 10px;
}

body .mc-landing .mc-style-option.is-selected .mc-style-option__check,
body .mc-landing .mc-custom-visuals button.is-active::after {
    border-color: var(--bj-ink, #181817);
    background: var(--bj-ink, #181817);
}

body .mc-landing .mc-style-composer__style-description {
    min-height: 56px;
    padding: 0;
    border-color: var(--bj-line, #ddd9d2);
    font-size: var(--bj-type-caption, 14px);
    line-height: 1.5;
}

body .mc-landing .mc-style-composer__style-description strong {
    color: var(--bj-ink, #181817);
    font-size: var(--bj-type-caption, 14px);
}

body .mc-landing .mc-style-customize,
body .mc-landing .mc-style-customize__tabs {
    border-color: var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-style-customize__tabs,
body .mc-landing .mc-style-customize__tabs button { min-height: 56px; }
body .mc-landing .mc-style-customize__tabs button[aria-selected="true"]::after {
    right: 16px;
    left: 16px;
    background: var(--bj-ink, #181817);
}

body .mc-landing .mc-style-customize__body {
    min-height: 240px;
    padding: 16px 0 32px;
}

body .mc-landing .mc-style-customize__panel > p { margin: 0 0 16px; }
body .mc-landing .mc-custom-inline,
body .mc-landing .mc-custom-visuals { gap: 16px; }
body .mc-landing .mc-custom-visuals { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body .mc-landing .mc-custom-inline button,
body .mc-landing .mc-custom-visuals button,
body .mc-landing .mc-custom-visuals--background button {
    min-height: 96px;
    padding: 8px;
    border-color: var(--bj-line, #ddd9d2);
    border-radius: 14px;
    background: #fff;
}

body .mc-landing .mc-custom-inline button.is-active,
body .mc-landing .mc-custom-visuals button.is-active {
    border-color: var(--bj-ink, #181817);
    box-shadow: inset 0 0 0 1px var(--bj-ink, #181817);
}

body .mc-landing .mc-custom-visuals img,
body .mc-landing .mc-custom-visuals button > span,
body .mc-landing .mc-custom-visuals--background i { height: 56px; }

body .mc-landing .mc-style-composer__status { min-height: 24px; margin: 16px 0 0; }
body .mc-landing .mc-style-composer__summary {
    min-height: 24px;
    margin: 8px 0 0;
    color: var(--bj-ink, #181817);
    font-size: var(--bj-type-control, 15px);
    line-height: 1.6;
}
body .mc-landing .mc-style-composer__editor-note {
    margin: 16px 0 0;
    color: var(--bj-muted, #66635e);
    font-size: var(--bj-type-body, 16px);
    line-height: 1.6;
}
body .mc-landing .mc-style-composer__cta {
    min-height: 56px;
    margin-top: auto;
    border-color: var(--bj-ink, #181817);
    background: var(--bj-ink, #181817);
    font-size: var(--bj-type-action, 16px);
    line-height: 1.5;
}
body .mc-landing .mc-style-composer__safety { margin-top: 8px; }

@media (max-width: 999px) and (min-width: 861px) {
    body .mc-landing .mc-style-composer__head,
    body .mc-landing .mc-style-composer__workspace { grid-template-columns: 36% 60%; gap: 4%; }
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-style-composer__controls,
    body .mc-landing .mc-style-composer__phone,
    body .mc-landing .mc-style-composer__identity,
    body .mc-landing .mc-style-composer__anchors { width: 100%; }
    body .mc-landing .mc-style-composer__phone { height: auto; aspect-ratio: 360 / 780; }
}

@media (max-width: 860px) {
    body .mc-landing .mc-style-composer { padding: 64px 0 !important; }
    body .mc-landing .mc-style-composer__inner { width: calc(100% - 32px); }
    body .mc-landing .mc-style-composer__head { margin-bottom: 48px; }
    body .mc-landing .mc-style-composer__head h2 { font-size: 24px; line-height: 1.35; }
    body .mc-landing .mc-style-composer__head > p:last-child { margin-top: 16px; font-size: 16px; line-height: 1.6; }
    body .mc-landing .mc-style-composer__workspace { gap: 32px; }
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-style-composer__controls { width: 100%; }
    body .mc-landing .mc-style-composer__controls { min-height: 0; }
    body .mc-landing .mc-style-composer__styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 0; }
    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-option:hover,
    body .mc-landing .mc-style-option.is-selected { min-height: 48px; border: 1px solid var(--bj-line, #ddd9d2); border-radius: 14px; }
    body .mc-landing .mc-style-option > strong,
    body .mc-landing .mc-style-customize__tabs button,
    body .mc-landing .mc-custom-inline button,
    body .mc-landing .mc-custom-visuals b { font-size: 16px; }
    body .mc-landing .mc-style-customize__body { min-height: 0; padding-bottom: 24px; }
    body .mc-landing .mc-custom-inline,
    body .mc-landing .mc-custom-visuals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body .mc-landing .mc-custom-inline button,
    body .mc-landing .mc-custom-visuals button,
    body .mc-landing .mc-custom-visuals--background button { min-height: 96px; }
    body .mc-landing .mc-style-composer__cta { margin-top: 32px; }
}

@media (min-width:360px) and (max-width:860px) and (min-height:700px) and (orientation:portrait) {
    body .mc-landing .mc-style-composer__phone { width: 100%; height: min(220px,28vh); border-radius: 14px; }
    body .mc-landing .mc-style-composer__fallback,
    body .mc-landing .mc-style-composer__mount { border-radius: 13px; }
}

/* R10 — one continuous decision flow: design → style → editor. */
body .mc-landing .mc-design-picker {
    padding-bottom: 48px !important;
}

body .mc-landing .mc-design-picker .mc-final-preview__head-copy,
body .mc-landing .mc-style-composer__head {
    grid-template-columns: 360px 600px;
    column-gap: 40px;
}

body .mc-landing .mc-design-picker .mc-final-preview__head-copy .mc-r1-kicker {
    grid-column: 1 / -1;
}

body .mc-landing .mc-design-picker .mc-final-preview__head h2 {
    grid-column: 1;
}

body .mc-landing .mc-design-picker .mc-final-preview__head-copy > p:not(.mc-r1-kicker) {
    grid-column: 2;
}

body .mc-landing .mc-design-picker .mc-final-preview__workspace,
body .mc-landing .mc-style-composer__workspace {
    grid-template-columns: 360px 600px;
    gap: 40px;
}

body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision {
    width: 600px;
    min-width: 0;
    justify-self: stretch;
}

body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision .mc-skin-rail,
body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision .mc-skin-rail__inner {
    width: 100% !important;
    max-width: none !important;
}

body .mc-landing .mc-style-composer {
    padding: 48px 0 96px !important;
}

body .mc-landing .mc-style-composer__head {
    align-items: end;
    margin-bottom: 48px;
}

body .mc-landing .mc-style-composer__head .mc-r1-kicker {
    grid-column: 1 / -1;
}

body .mc-landing .mc-style-composer__head h2 {
    grid-column: 1;
}

body .mc-landing .mc-style-composer__head-context {
    grid-column: 2;
    align-self: end;
}

body .mc-landing .mc-style-composer__head-context > p {
    margin: 0;
    color: var(--bj-muted, #66635e);
    font-size: var(--bj-type-body, 16px);
    line-height: 1.6;
}

body .mc-landing .mc-style-composer__head-context .mc-style-composer__bridge {
    margin-bottom: 12px;
    color: var(--bj-tertiary, #918e87);
    font-size: var(--bj-type-caption, 14px);
}

body .mc-landing .mc-style-composer__bridge strong {
    color: var(--bj-ink, #181817);
    font-weight: 600;
}

body .mc-landing .mc-style-composer__controls {
    width: 600px;
    align-items: stretch;
}

body .mc-landing .mc-style-composer__controls > *,
body .mc-landing .mc-style-deck,
body .mc-landing .mc-style-customize {
    width: 100%;
    max-width: none;
}

body .mc-landing .mc-style-composer__actions {
    width: 360px;
    margin-top: 20px;
}

body .mc-landing .mc-style-composer__actions .mc-style-composer__cta {
    width: 100%;
    margin-top: 0;
}

@media (max-width: 999px) and (min-width: 861px) {
    body .mc-landing .mc-design-picker .mc-final-preview__head-copy,
    body .mc-landing .mc-style-composer__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-style-composer__workspace {
        grid-template-columns: 36% 60%;
        gap: 4%;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision,
    body .mc-landing .mc-style-composer__controls,
    body .mc-landing .mc-style-composer__actions {
        width: 100% !important;
    }
}

@media (max-width: 860px) {
    body .mc-landing .mc-design-picker { padding-bottom: 40px !important; }
    body .mc-landing .mc-style-composer { padding: 56px 0 80px !important; }
    body .mc-landing .mc-style-composer__head-context { margin-top: 16px; }
    body .mc-landing .mc-style-composer__head-context .mc-style-composer__bridge { margin-bottom: 8px; }
    body .mc-landing .mc-style-composer__actions { width: min(100%, 320px); }
}

/* R11 — roomy controls, identical flow CTAs, and responsive laptop parity. */
body .mc-landing .mc-flow-cta {
    position: relative;
    display: flex !important;
    width: 100% !important;
    min-height: 56px !important;
    box-sizing: border-box;
    padding: 0 52px 0 20px !important;
    align-items: center;
    justify-content: center !important;
    font-size: var(--bj-type-action, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

body .mc-landing .mc-flow-cta > i {
    position: absolute;
    right: 20px;
    color: currentColor;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

body .mc-landing .mc-style-composer__anchors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .mc-landing .mc-style-deck__label,
body .mc-landing .mc-style-customize__head {
    min-height: 72px;
}

body .mc-landing .mc-style-composer__styles {
    width: 100%;
}

body .mc-landing .mc-style-option,
body .mc-landing .mc-style-option:hover,
body .mc-landing .mc-style-option.is-selected {
    min-height: 72px;
}

body .mc-landing .mc-style-option > strong,
body .mc-landing .mc-style-customize__tabs button,
body .mc-landing .mc-custom-inline button,
body .mc-landing .mc-custom-visuals b {
    font-size: 16px;
}

body .mc-landing .mc-style-deck__label span,
body .mc-landing .mc-style-composer__style-description,
body .mc-landing .mc-style-composer__style-description strong,
body .mc-landing .mc-style-customize__state,
body .mc-landing .mc-style-customize__panel > p,
body .mc-landing .mc-style-composer__status {
    font-size: 14px;
    line-height: 1.6;
}

body .mc-landing .mc-style-customize__tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body .mc-landing .mc-style-customize__tabs,
body .mc-landing .mc-style-customize__tabs button {
    min-height: 60px;
}

body .mc-landing .mc-style-customize__body {
    min-height: 250px;
    padding-top: 20px;
    padding-bottom: 28px;
}

body .mc-landing .mc-custom-inline button,
body .mc-landing .mc-custom-visuals button,
body .mc-landing .mc-custom-visuals--background button,
body .mc-landing .mc-custom-visuals--calendar button {
    min-height: 104px;
}

body .mc-landing .mc-custom-visuals--calendar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body .mc-landing .mc-custom-visuals--calendar img,
body .mc-landing .mc-custom-visuals--calendar button > span {
    width: 100%;
    height: 64px;
    object-fit: cover;
    object-position: top center;
}

@media (max-width: 999px) and (min-width: 861px) {
    body .mc-landing .mc-design-picker .mc-final-preview__preview-column,
    body .mc-landing .mc-design-picker .mc-preview-canvas,
    body .mc-landing .mc-design-picker .mc-preview__stage,
    body .mc-landing .mc-design-picker .mc-preview-phone,
    body .mc-landing .mc-design-picker .mc-preview-actions,
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-style-composer__actions {
        width: 100% !important;
    }

    body .mc-landing .mc-design-picker .mc-preview-phone,
    body .mc-landing .mc-style-composer__phone {
        height: auto;
        aspect-ratio: 360 / 780;
    }
}

@media (max-width: 860px) {
    body .mc-landing .mc-style-deck__label,
    body .mc-landing .mc-style-customize__head { min-height: 60px; }
    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-option:hover,
    body .mc-landing .mc-style-option.is-selected { min-height: 52px; }
    body .mc-landing .mc-style-customize__tabs,
    body .mc-landing .mc-style-customize__tabs button { min-height: 52px; }
    body .mc-landing .mc-style-customize__tabs button { padding: 0 2px; font-size: 14px; }
    body .mc-landing .mc-style-customize__body { min-height: 0; }
    body .mc-landing .mc-custom-visuals--calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Both selection steps use the phone itself as the full, directly scrollable preview. */
body .mc-landing .mc-design-picker .mc-preview-phone__frame .ed-preview__frame,
body .mc-landing .mc-style-composer__mount .ed-preview__frame {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto !important;
    scrollbar-width: none;
}

body .mc-landing .mc-design-picker .mc-preview-phone__frame .ed-preview__frame::-webkit-scrollbar,
body .mc-landing .mc-style-composer__mount .ed-preview__frame::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body .mc-landing .mc-style-composer__mount {
    pointer-events: auto !important;
}

/* Keep the second step airy after removing the repeated selected-design label. */
body .mc-landing .mc-style-composer {
    padding-top: 64px !important;
    padding-bottom: 112px !important;
}

@media (max-width: 860px) {
    body .mc-landing .mc-style-composer {
        padding-top: 64px !important;
        padding-bottom: 96px !important;
    }
}

/* 01 color variants live outside the phone instead of being clipped by it. */
body .mc-landing .mc-design-picker .mc-final-preview__preview-column {
    overflow: visible !important;
}

body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-preview-color-rail {
    top: 390px;
    left: -56px;
    z-index: 8;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: translateY(-50%);
}

body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-preview-color-rail button {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-preview-color-rail button[aria-pressed="true"] {
    outline-color: var(--bj-ink, #181817);
}

@media (max-width: 1199px) and (min-width: 1024px) {
    body .mc-landing .mc-design-picker .mc-preview-canvas { order: 1; }
    body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-preview-color-rail {
        position: static;
        order: 0;
        display: flex;
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
        gap: 4px;
        padding: 2px 6px;
        margin: 0 auto 12px;
        border: 1px solid rgba(37, 40, 45, .10);
        border-radius: 10px;
        background: #e9eaeb;
        justify-content: center;
        transform: none;
        box-shadow: none;
    }
    body .mc-landing .mc-design-picker .mc-preview-actions { order: 2; }
}

/* 02 repeats the same full-width heading divider and spacing rhythm as 01. */
body .mc-landing .mc-style-composer__head {
    margin-bottom: 32px !important;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-style-composer .mc-style-deck {
    border-top: 0;
}

@media (max-width: 860px) {
    body .mc-landing .mc-style-composer__head {
        margin-bottom: 32px !important;
        padding-bottom: 24px;
    }
}

/* Preserve the 360/40/600 grid while giving the dense control deck more air. */
body .mc-landing .mc-style-composer__head-context,
body .mc-landing .mc-style-composer__controls {
    box-sizing: border-box;
    padding-left: 16px;
}

@media (max-width: 860px) {
    body .mc-landing .mc-style-composer__head-context,
    body .mc-landing .mc-style-composer__controls {
        padding-left: 0;
    }
}

/* Keep 01 and 02 on one vertical rhythm: equal section breathing room and
   the same copy -> divider -> workspace spacing. */
body .mc-landing .mc-design-picker,
body .mc-landing .mc-style-composer {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

body .mc-landing .mc-style-composer__head {
    margin-bottom: 0 !important;
    padding-bottom: 64px;
}

/* The control deck already has its own top breathing room. Give the phone the
   same 32px start offset so its rounded frame does not touch the divider. */
body .mc-landing .mc-style-composer__preview {
    margin-top: 32px;
}

/* Match the visible identity -> CTA rhythm used by step 01 while preserving
   the 44px change-design hit target. */
body .mc-landing .mc-style-composer__identity a {
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
}

body .mc-landing .mc-style-composer__actions {
    margin-top: 18px;
}

@media (max-width: 860px) {
    body .mc-landing .mc-design-picker,
    body .mc-landing .mc-style-composer {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    body .mc-landing .mc-style-composer__head {
        margin-bottom: 0 !important;
        padding-bottom: 32px;
    }
}

/* R12 — actual guest journey and one-piece closing stage. */
body .mc-landing .mc-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body .mc-landing .mc-r1-guest {
    padding: 96px 0 !important;
    background: var(--bj-bg, #fff) !important;
    color: var(--bj-text, #181817);
}

body .mc-landing .mc-r1-guest-inner {
    width: min(1000px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
}

body .mc-landing .mc-r1-guest .mc-r1-guest__head {
    display: grid !important;
    grid-template-columns: 360px 600px !important;
    column-gap: 40px !important;
    align-items: end !important;
    margin: 0 !important;
    padding: 0 0 64px !important;
    border-bottom: 1px solid var(--bj-line, #ddd9d2) !important;
}

body .mc-landing .mc-r1-guest__head .mc-r1-kicker {
    grid-column: 1 / -1;
    margin: 0 0 32px !important;
    color: var(--bj-muted, #77736d) !important;
    font-size: var(--bj-type-kicker-size, 14px) !important;
    line-height: 1.4 !important;
    letter-spacing: .12em !important;
}

body .mc-landing .mc-r1-guest__head h2 {
    margin: 0 !important;
    color: inherit !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -.035em !important;
}

body .mc-landing .mc-r1-guest__head > p:last-child {
    margin: 0 !important;
    padding-left: 16px;
    color: var(--bj-muted, #696660) !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
}

body .mc-landing .mc-r1-guest-stage {
    display: grid !important;
    grid-template-columns: 360px 600px !important;
    column-gap: 40px !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 32px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body .mc-landing .mc-r1-guest-phone {
    position: relative !important;
    width: 360px !important;
    height: 780px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--bj-line, #ddd9d2) !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body .mc-landing .mc-r1-guest-phone img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: top center !important;
    transform: none !important;
    opacity: 1;
    transition: opacity .18s ease;
}

body .mc-landing .mc-r1-guest-phone img.is-switching { opacity: .18; }

body .mc-landing .mc-r1-guest-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    padding: 0 0 0 16px !important;
    border-top: 1px solid var(--bj-line, #ddd9d2) !important;
}

body .mc-landing .mc-r1-guest-steps button {
    position: relative;
    display: grid !important;
    grid-template-columns: 42px 1fr 28px !important;
    column-gap: 16px !important;
    align-items: center !important;
    min-height: 156px !important;
    padding: 24px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bj-line, #ddd9d2) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--bj-text, #181817) !important;
    text-align: left !important;
    cursor: pointer;
}

body .mc-landing .mc-r1-guest-steps button::after {
    content: "";
    width: 28px;
    height: 28px;
    border: 1px solid var(--bj-line-strong, #aaa59d);
    border-radius: 50%;
    justify-self: end;
}

body .mc-landing .mc-r1-guest-steps button[aria-checked="true"]::after {
    content: "✓";
    display: grid;
    place-items: center;
    border-color: var(--bj-text, #181817);
    background: var(--bj-text, #181817);
    color: #fff;
    font-size: 14px;
}

body .mc-landing .mc-r1-guest-steps button > b {
    align-self: start;
    padding-top: 3px;
    color: var(--bj-muted, #8b8780);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

body .mc-landing .mc-r1-guest-steps button span { display: block; }
body .mc-landing .mc-r1-guest-steps button strong {
    display: block;
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.025em;
}
body .mc-landing .mc-r1-guest-steps button em {
    display: block;
    color: var(--bj-muted, #696660);
    font-size: 15px;
    font-style: normal;
    line-height: 1.65;
}

body .mc-landing .mc-r1-guest-steps button[aria-checked="true"] > b,
body .mc-landing .mc-r1-guest-steps button[aria-checked="true"] strong { color: var(--bj-accent, #5e548e); }

body .mc-landing .mc-r1-capabilities {
    display: grid;
    grid-template-columns: 360px 600px;
    column-gap: 40px;
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-r1-capabilities__intro .mc-r1-kicker {
    margin: 0 0 24px;
    color: var(--bj-muted, #77736d);
    font-size: 13px;
    letter-spacing: .12em;
}

body .mc-landing .mc-r1-capabilities__intro h3 {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.03em;
}

body .mc-landing .mc-r1-capabilities__intro > p:last-child {
    margin: 0;
    color: var(--bj-muted, #696660);
    font-size: 15px;
    line-height: 1.7;
}

body .mc-landing .mc-r1-capabilities__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-r1-capabilities__grid > div {
    min-height: 164px;
    padding: 24px 24px 24px 0;
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-r1-capabilities__grid > div:nth-child(even) {
    padding-left: 24px;
    border-left: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-r1-capabilities__grid b {
    display: block;
    margin-bottom: 18px;
    color: var(--bj-muted, #8b8780);
    font-size: 12px;
    font-weight: 500;
}

body .mc-landing .mc-r1-capabilities__grid strong {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

body .mc-landing .mc-r1-capabilities__grid p {
    margin: 0;
    color: var(--bj-muted, #696660);
    font-size: 14px;
    line-height: 1.65;
}

body .mc-landing .mc-closing {
    padding: 96px 0 !important;
    background: #191917 !important;
    color: #f7f5f0 !important;
}

body .mc-landing .mc-closing__inner {
    width: min(1000px, calc(100% - 32px));
    margin: 0 auto;
}

body .mc-landing .mc-closing .mc-closing__head {
    display: grid !important;
    grid-template-columns: 360px 600px !important;
    column-gap: 40px !important;
    align-items: end !important;
    margin: 0 !important;
    padding: 0 0 64px !important;
    border-bottom: 1px solid rgba(255,255,255,.24) !important;
}

body .mc-landing .mc-closing__head .mc-r1-kicker {
    grid-column: 1 / -1;
    margin: 0 0 32px !important;
    color: #aaa69f !important;
    font-size: 14px !important;
    letter-spacing: .12em !important;
}

body .mc-landing .mc-closing__head h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -.035em !important;
}

body .mc-landing .mc-closing__head > p:last-child {
    margin: 0 !important;
    padding-left: 16px;
    color: #c5c1ba !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
}

body .mc-landing .mc-closing__body {
    display: grid;
    grid-template-columns: 360px 600px;
    column-gap: 40px;
    align-items: start;
    padding-top: 32px;
}

body .mc-landing .mc-closing__proof { margin: 0; }
body .mc-landing .mc-closing__proof img {
    display: block;
    width: 360px;
    height: auto;
    aspect-ratio: 740 / 677;
    object-fit: cover;
}
body .mc-landing .mc-closing__proof figcaption {
    margin-top: 16px;
    color: #aaa69f;
    font-size: 13px;
    line-height: 1.6;
}

body .mc-landing .mc-closing__content { padding-left: 16px; }
body .mc-landing .mc-closing__policies { border-top: 1px solid rgba(255,255,255,.24); }
body .mc-landing .mc-closing__policies > div {
    display: grid;
    grid-template-columns: 42px 210px 1fr;
    column-gap: 16px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255,255,255,.24);
}
body .mc-landing .mc-closing__policies b {
    color: #8f8b84;
    font-size: 12px;
    font-weight: 500;
}
body .mc-landing .mc-closing__policies strong {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}
body .mc-landing .mc-closing__policies p {
    margin: 0;
    color: #bdb9b2;
    font-size: 14px;
    line-height: 1.65;
}

body .mc-landing .mc-closing__action {
    display: grid;
    grid-template-columns: 1fr 264px;
    column-gap: 24px;
    align-items: end;
    margin-top: 40px;
}
body .mc-landing .mc-closing__action > span {
    grid-column: 1;
    margin-bottom: 8px;
    color: #8f8b84;
    font-size: 12px;
    letter-spacing: .08em;
}
body .mc-landing .mc-closing__action > strong {
    grid-column: 1;
    min-width: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}
body .mc-landing .mc-closing__action .mc-landing__start {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 24px;
    border: 1px solid #fff;
    border-radius: 0;
    background: #fff;
    color: #191917;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-r1-guest-phone img { transition: none !important; }
}

@media (max-width: 860px) {
    body .mc-landing .mc-r1-guest,
    body .mc-landing .mc-closing { padding: 64px 0 !important; }

    body .mc-landing .mc-r1-guest .mc-r1-guest__head,
    body .mc-landing .mc-closing .mc-closing__head {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 24px !important;
        padding-bottom: 32px !important;
    }

    body .mc-landing .mc-r1-guest__head .mc-r1-kicker,
    body .mc-landing .mc-closing__head .mc-r1-kicker { margin-bottom: 0 !important; }

    body .mc-landing .mc-r1-guest__head h2,
    body .mc-landing .mc-closing__head h2 {
        font-size: 32px !important;
        line-height: 1.25 !important;
    }

    body .mc-landing .mc-r1-guest__head > p:last-child,
    body .mc-landing .mc-closing__head > p:last-child {
        padding-left: 0;
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    body .mc-landing .mc-r1-guest-stage,
    body .mc-landing .mc-closing__body {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 32px !important;
    }

    body .mc-landing .mc-r1-guest-phone {
        width: min(320px, 100%) !important;
        height: auto !important;
        aspect-ratio: 358 / 779;
        margin: 0 auto !important;
        border-radius: 24px !important;
    }

    body .mc-landing .mc-r1-guest-steps {
        display: flex !important;
        gap: 8px;
        padding: 0 0 8px !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        border-top: 0 !important;
    }

    body .mc-landing .mc-r1-guest-steps button {
        flex: 0 0 min(280px, calc(100vw - 48px));
        grid-template-columns: 32px 1fr 28px !important;
        min-height: 132px !important;
        padding: 20px 16px !important;
        border: 1px solid var(--bj-line, #ddd9d2) !important;
        scroll-snap-align: start;
    }

    body .mc-landing .mc-r1-guest-steps button strong { font-size: 18px; }
    body .mc-landing .mc-r1-guest-steps button em { font-size: 14px; }

    body .mc-landing .mc-r1-capabilities {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
        margin-top: 48px;
        padding-top: 48px;
    }

    body .mc-landing .mc-r1-capabilities__intro h3 { font-size: 24px; }
    body .mc-landing .mc-r1-capabilities__grid > div { min-height: 152px; }

    body .mc-landing .mc-closing__proof img {
        width: min(360px, 100%);
        margin: 0 auto;
    }

    body .mc-landing .mc-closing__content { padding-left: 0; }
    body .mc-landing .mc-closing__policies > div {
        grid-template-columns: 32px 1fr;
        row-gap: 8px;
    }
    body .mc-landing .mc-closing__policies p { grid-column: 2; }

    body .mc-landing .mc-closing__action {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }
    body .mc-landing .mc-closing__action .mc-landing__start {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        min-height: 56px;
    }
}

@media (max-width: 420px) {
    body .mc-landing .mc-r1-capabilities__grid { grid-template-columns: 1fr; }
    body .mc-landing .mc-r1-capabilities__grid > div,
    body .mc-landing .mc-r1-capabilities__grid > div:nth-child(even) {
        min-height: 0;
        padding: 22px 0;
        border-left: 0;
    }
}

/* Final grid lock: legacy 03 rules use 12-column line numbers. */
body .mc-landing .mc-r1-guest__head h2,
body .mc-landing .mc-closing__head h2 { grid-column: 1 !important; }
body .mc-landing .mc-r1-guest__head > p:last-child,
body .mc-landing .mc-closing__head > p:last-child { grid-column: 2 !important; }
body .mc-landing .mc-r1-guest-phone,
body .mc-landing .mc-r1-capabilities__intro,
body .mc-landing .mc-closing__proof { grid-column: 1 !important; }
body .mc-landing .mc-r1-guest-steps,
body .mc-landing .mc-r1-capabilities__grid,
body .mc-landing .mc-closing__content { grid-column: 2 !important; }
body .mc-landing .mc-r1-capabilities__grid {
    width: 100% !important;
    justify-self: stretch !important;
}
body .mc-landing .mc-closing__action .mc-landing__start { color: #191917 !important; }

@media (max-width: 860px) {
    body .mc-landing .mc-r1-guest__head h2,
    body .mc-landing .mc-r1-guest__head > p:last-child,
    body .mc-landing .mc-closing__head h2,
    body .mc-landing .mc-closing__head > p:last-child,
    body .mc-landing .mc-r1-guest-phone,
    body .mc-landing .mc-r1-guest-steps,
    body .mc-landing .mc-r1-capabilities__intro,
    body .mc-landing .mc-r1-capabilities__grid,
    body .mc-landing .mc-closing__proof,
    body .mc-landing .mc-closing__content { grid-column: 1 !important; }
}

/* R13 — make the preview the hero, compress supporting choices. */
body .mc-landing .mc-r1-guest-steps {
    height: 780px;
    overflow: hidden;
}

body .mc-landing .mc-r1-guest-steps button {
    min-height: 0 !important;
    height: 140px;
    transition: height .24s ease, background-color .24s ease;
}

body .mc-landing .mc-r1-guest-steps button[aria-checked="true"] {
    height: 220px;
    background: #faf9f7 !important;
}

body .mc-landing .mc-r1-guest-steps button em {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .2s ease, opacity .2s ease, transform .2s ease;
}

body .mc-landing .mc-r1-guest-steps button[aria-checked="true"] em {
    max-height: 54px;
    opacity: 1;
    transform: translateY(0);
}

body .mc-landing .mc-r1-guest-current { display: none; }

body .mc-landing .mc-r1-capabilities {
    display: block;
}

body .mc-landing .mc-r1-capabilities__intro {
    display: grid;
    grid-template-columns: 360px 600px;
    column-gap: 40px;
    align-items: end;
    padding-bottom: 32px;
}

body .mc-landing .mc-r1-capabilities__intro .mc-r1-kicker {
    grid-column: 1 / -1;
    margin-bottom: 24px;
}

body .mc-landing .mc-r1-capabilities__intro h3 {
    grid-column: 1;
    margin-bottom: 0;
}

body .mc-landing .mc-r1-capabilities__intro > p:last-child {
    grid-column: 2;
    padding-left: 16px;
    font-size: 16px;
}

body .mc-landing .mc-r1-capabilities__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-r1-capabilities__grid > div,
body .mc-landing .mc-r1-capabilities__grid > div:nth-child(even) {
    min-height: 138px;
    padding: 22px 20px;
    border-left: 1px solid var(--bj-line, #ddd9d2);
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-r1-capabilities__grid > div:first-child { border-left: 0; }
body .mc-landing .mc-r1-capabilities__grid b { margin-bottom: 14px; }
body .mc-landing .mc-r1-capabilities__grid strong { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-r1-guest-steps button,
    body .mc-landing .mc-r1-guest-steps button em { transition: none !important; }
}

@media (max-width: 860px) {
    body .mc-landing .mc-r1-guest-stage {
        display: grid !important;
        row-gap: 0 !important;
    }

    body .mc-landing .mc-r1-guest-steps {
        order: 1;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0;
        width: 100%;
        height: 56px;
        padding: 0 !important;
        overflow: visible;
        border-top: 1px solid var(--bj-line, #ddd9d2) !important;
        border-bottom: 1px solid var(--bj-line, #ddd9d2) !important;
    }

    body .mc-landing .mc-r1-guest-steps button,
    body .mc-landing .mc-r1-guest-steps button[aria-checked="true"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        place-items: center;
        width: auto;
        min-width: 0;
        height: 55px !important;
        min-height: 55px !important;
        padding: 0 !important;
        border: 0 !important;
        border-left: 1px solid var(--bj-line, #ddd9d2) !important;
        background: transparent !important;
    }

    body .mc-landing .mc-r1-guest-steps button:first-child { border-left: 0 !important; }
    body .mc-landing .mc-r1-guest-steps button span,
    body .mc-landing .mc-r1-guest-steps button::after { display: none !important; }
    body .mc-landing .mc-r1-guest-steps button > b {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        color: var(--bj-muted, #77736d);
        font-size: 12px;
    }
    body .mc-landing .mc-r1-guest-steps button[aria-checked="true"] > b {
        background: var(--bj-text, #181817);
        color: #fff;
    }

    body .mc-landing .mc-r1-guest-current {
        order: 2;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 12px;
        min-height: 116px;
        padding: 22px 0 24px;
        border-bottom: 1px solid var(--bj-line, #ddd9d2);
    }
    body .mc-landing .mc-r1-guest-current > span {
        grid-row: 1 / span 2;
        color: var(--bj-muted, #8b8780);
        font-size: 12px;
    }
    body .mc-landing .mc-r1-guest-current > strong {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4;
    }
    body .mc-landing .mc-r1-guest-current > p {
        margin: 6px 0 0;
        color: var(--bj-muted, #696660);
        font-size: 14px;
        line-height: 1.65;
    }

    body .mc-landing .mc-r1-guest-phone {
        order: 3;
        margin-top: 32px !important;
    }

    body .mc-landing .mc-r1-capabilities__intro {
        display: block;
        padding-bottom: 28px;
    }
    body .mc-landing .mc-r1-capabilities__intro h3 { margin-bottom: 18px; }
    body .mc-landing .mc-r1-capabilities__intro > p:last-child {
        padding-left: 0;
        font-size: 15px;
    }
    body .mc-landing .mc-r1-capabilities__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body .mc-landing .mc-r1-capabilities__grid > div,
    body .mc-landing .mc-r1-capabilities__grid > div:nth-child(even) {
        min-height: 136px;
        padding: 20px 12px;
        border-left: 1px solid var(--bj-line, #ddd9d2);
    }
    body .mc-landing .mc-r1-capabilities__grid > div:nth-child(odd) { border-left: 0; }
    body .mc-landing .mc-r1-capabilities__grid p { font-size: 13px; }

    body .mc-landing .mc-closing__body { row-gap: 24px !important; }
    body .mc-landing .mc-closing__proof img { width: min(300px, 100%); }
    body .mc-landing .mc-closing__proof figcaption { margin-top: 12px; }
    body .mc-landing .mc-closing__policies > div { padding: 18px 0; }
    body .mc-landing .mc-closing__action { margin-top: 32px; }
}

/* R14 — one continuous story builder: preview + five semantic scene tabs. */
body .mc-landing .mc-r1-guest {
    padding: 104px 0 !important;
}

body .mc-landing .mc-r1-guest-inner {
    width: min(1000px, calc(100% - 48px)) !important;
}

body .mc-landing .mc-story-guide {
    display: grid;
    grid-template-columns: 360px 600px;
    column-gap: 40px;
    padding: 28px 0 32px;
}

body .mc-landing .mc-story-guide > span {
    grid-column: 1;
}

body .mc-landing .mc-story-guide > p {
    grid-column: 2;
    margin: 0;
    color: var(--bj-muted, #696660);
    font-size: 14px;
    line-height: 1.7;
}

body .mc-landing .mc-story-stage {
    display: grid;
    grid-template-columns: 360px 600px;
    column-gap: 40px;
    align-items: start;
}

body .mc-landing .mc-story-preview {
    position: relative;
    width: 360px;
    height: 780px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--bj-line, #ddd9d2);
    border-radius: 28px;
    background: #fff;
}

body .mc-landing .mc-story-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    opacity: 1;
    transition: opacity .18s ease;
}

body .mc-landing .mc-story-preview img.is-switching {
    opacity: .32;
}

body .mc-landing .mc-story-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    height: 780px;
    border-top: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-story-tab,
body .mc-landing .mc-story-tabs > button {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    width: 100%;
    height: 156px;
    min-height: 156px;
    padding: 20px 24px;
    border: 0;
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
    border-radius: 0;
    background: transparent;
    color: var(--bj-text, #181817);
    text-align: left;
    cursor: pointer;
}

body .mc-landing .mc-story-tabs > button::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    width: 2px;
    background: transparent;
}

body .mc-landing .mc-story-tabs > button:hover {
    background: #faf9f7;
}

body .mc-landing .mc-story-tabs > button[aria-selected='true'] {
    background: #faf9f7;
}

body .mc-landing .mc-story-tabs > button[aria-selected='true']::before {
    background: var(--bj-text, #181817);
}

body .mc-landing .mc-story-tabs > button.is-pending {
    background: #f4f2ee;
}

body .mc-landing .mc-story-tabs > button > b {
    align-self: start;
    padding-top: 4px;
    color: var(--bj-muted, #8b8780);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

body .mc-landing .mc-story-tabs > button > span {
    display: block;
    min-width: 0;
}

body .mc-landing .mc-story-tabs > button strong {
    display: block;
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.025em;
}

body .mc-landing .mc-story-tabs > button em {
    display: block;
    margin: 0 0 8px;
    color: var(--bj-muted, #696660);
    font-size: 15px;
    font-style: normal;
    line-height: 1.55;
}

body .mc-landing .mc-story-tabs > button small {
    display: block;
    overflow: hidden;
    color: var(--bj-muted, #8b8780);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mc-landing .mc-story-tabs > button[aria-selected='true'] > b,
body .mc-landing .mc-story-tabs > button[aria-selected='true'] strong {
    color: var(--bj-accent, #5e548e);
}

body .mc-landing .mc-story-tabs > button:focus-visible {
    z-index: 1;
    outline: 2px solid var(--bj-accent, #5e548e);
    outline-offset: -3px;
}

@media (max-width: 1047px) {
    body .mc-landing .mc-r1-guest .mc-r1-guest__head {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 24px !important;
        padding-bottom: 48px !important;
    }

    body .mc-landing .mc-r1-guest__head .mc-r1-kicker,
    body .mc-landing .mc-r1-guest__head h2,
    body .mc-landing .mc-r1-guest__head > p:last-child {
        grid-column: 1 !important;
    }

    body .mc-landing .mc-r1-guest__head .mc-r1-kicker {
        margin-bottom: 8px !important;
    }

    body .mc-landing .mc-r1-guest__head > p:last-child {
        padding-left: 0 !important;
    }

    body .mc-landing .mc-story-guide {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px 0 28px;
    }

    body .mc-landing .mc-story-guide > span {
        display: none;
    }

    body .mc-landing .mc-story-guide > p {
        grid-column: 1;
    }

    body .mc-landing .mc-story-stage {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }

    body .mc-landing .mc-story-tabs {
        order: 1;
        display: flex;
        gap: 12px;
        width: 100%;
        height: auto;
        padding: 0 0 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    body .mc-landing .mc-story-tabs > button {
        flex: 0 0 min(280px, calc(100vw - 72px));
        height: auto;
        min-height: 172px;
        padding: 22px 20px;
        border: 1px solid var(--bj-line, #ddd9d2);
        scroll-snap-align: start;
    }

    body .mc-landing .mc-story-tabs > button[aria-selected='true'] {
        border-color: var(--bj-text, #181817);
    }

    body .mc-landing .mc-story-tabs > button::before {
        top: auto;
        right: -1px;
        bottom: -1px;
        left: -1px;
        width: auto;
        height: 2px;
    }

    body .mc-landing .mc-story-preview {
        order: 2;
        width: min(360px, 100%);
        height: auto;
        aspect-ratio: 358 / 779;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    body .mc-landing .mc-r1-guest {
        padding: 72px 0 !important;
    }

    body .mc-landing .mc-r1-guest-inner {
        width: calc(100% - 32px) !important;
    }

    body .mc-landing .mc-r1-guest__head h2 {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }

    body .mc-landing .mc-r1-guest__head > p:last-child {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    body .mc-landing .mc-story-guide > p {
        font-size: 14px;
    }

    body .mc-landing .mc-story-tabs > button {
        flex-basis: min(260px, calc(100vw - 64px));
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 12px;
        min-height: 168px;
        padding: 20px 16px;
    }

    body .mc-landing .mc-story-tabs > button strong {
        font-size: 19px;
    }

    body .mc-landing .mc-story-tabs > button em {
        font-size: 14px;
    }

    body .mc-landing .mc-story-tabs > button small {
        font-size: 12px;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-story-preview img {
        transition: none !important;
    }

    body .mc-landing .mc-story-tabs {
        scroll-behavior: auto !important;
    }
}

/* R16 — 03 story composer, aligned with the 01/02 design language. */
body .mc-landing .mc-composition-proof {
    padding: 96px 0 !important;
    background: #fff;
}

body .mc-landing .mc-composition-proof .mc-composition-head {
    display: grid !important;
    grid-template-columns: 360px 600px !important;
    column-gap: 40px !important;
    align-items: end !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 0 64px !important;
    border-bottom: 1px solid var(--bj-line, #ddd9d2) !important;
}

body .mc-landing .mc-composition-proof .mc-composition-head .mc-r1-kicker {
    grid-column: 1 / -1 !important;
    margin: 0 0 16px !important;
}

body .mc-landing .mc-composition-proof .mc-composition-head h2 {
    grid-column: 1 !important;
    margin: 0 !important;
    color: var(--bj-text, #181817) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -.03em !important;
}

body .mc-landing .mc-composition-intro {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0;
    padding-left: 16px;
    justify-self: stretch !important;
    align-self: end;
}

body .mc-landing .mc-composition-intro p {
    margin: 0;
    color: var(--bj-muted, #66635e);
    font-size: 16px;
    line-height: 1.6;
    word-break: keep-all;
}

body .mc-landing .mc-composition-intro p + p { margin-top: 10px; }

body .mc-landing .mc-composition-stage {
    display: grid;
    grid-template-columns: 360px 600px;
    column-gap: 40px;
    align-items: start;
}

body .mc-landing .mc-composition-preview { margin-top: 32px; }

body .mc-landing .mc-composition-preview,
body .mc-landing .mc-composition-phone { width: 360px; }

body .mc-landing .mc-composition-phone {
    height: 780px;
    border-radius: 26px;
}

body .mc-landing .mc-composition-fallback,
body .mc-landing .mc-composition-mount { border-radius: 25px; }

body .mc-landing .mc-composition-deck {
    width: 600px;
    min-height: 780px;
    height: auto;
    max-height: none;
    overflow: visible;
    border-top: 1px solid var(--bj-line, #e6e8ec);
    border-bottom: 1px solid var(--bj-line, #e6e8ec);
}

body .mc-landing .mc-composition-deck__head {
    height: auto;
    min-height: 72px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bj-line, #e6e8ec);
}

body .mc-landing .mc-composition-deck__head h3 {
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 1.4;
}

body .mc-landing .mc-composition-deck__head p,
body .mc-landing .mc-composition-deck__head > span {
    font-size: 13px;
    line-height: 1.55;
}

body .mc-landing .mc-composition-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 584px;
    margin: 0;
    padding: 20px 0;
}

body .mc-landing .mc-composition-list > li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 56px;
    height: auto;
    padding: 6px 0;
    border: 0;
    background: transparent !important;
}

body .mc-landing .mc-composition-list > li.is-selected { min-height: 96px; }
body .mc-landing .mc-composition-list > li.is-drag-over { box-shadow: inset 0 2px 0 var(--bj-text, #181817); }
body .mc-landing .mc-composition-list > li.is-just-changed { background: transparent !important; }

body .mc-landing .mc-composition-choice {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid #c9cbd0;
    border-radius: 50%;
    background: #fff;
}

body .mc-landing .mc-composition-list > li.is-selected .mc-composition-choice {
    border-color: #25282d;
    background: #25282d;
}

body .mc-landing .mc-composition-list > li.is-selected .mc-composition-choice::after {
    content: '✓';
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

body .mc-landing .mc-composition-row-select {
    display: block;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bj-text, #181817);
    text-align: left;
}

body .mc-landing .mc-composition-row-select strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

body .mc-landing .mc-composition-row-select > span {
    display: none;
    margin-top: 5px;
    color: var(--bj-muted, #66635e);
    font-size: 14px;
    line-height: 1.5;
}

body .mc-landing .mc-composition-list > li.is-selected .mc-composition-row-select > span { display: block; }
body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-row-select strong { color: #8a8c91; }

body .mc-landing .mc-composition-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

body .mc-landing .mc-composition-move-tools {
    display: none;
    gap: 4px;
    align-items: center;
}

body .mc-landing .mc-composition-list > li.is-selected .mc-composition-move-tools { display: flex; }

body .mc-landing .mc-composition-actions .mc-composition-move-tools > button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--bj-line, #e6e8ec);
    border-radius: 50%;
    background: #fff;
    color: #25282d;
    font-size: 15px;
}

body .mc-landing .mc-composition-actions .mc-composition-handle {
    letter-spacing: -3px;
    cursor: grab;
}

body .mc-landing .mc-composition-switch {
    position: relative;
    display: grid;
    grid-template-columns: 26px auto;
    gap: 8px;
    min-width: 72px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body .mc-landing .mc-composition-switch > span {
    width: 26px;
    height: 16px;
    border-radius: 8px;
    background: #d8dadd;
}

body .mc-landing .mc-composition-switch > span::after {
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
}

body .mc-landing .mc-composition-switch[aria-checked='true'] { border: 0; }
body .mc-landing .mc-composition-switch[aria-checked='true'] > span { background: #25282d; }
body .mc-landing .mc-composition-switch[aria-checked='true'] > span::after { transform: translateX(10px); }
body .mc-landing .mc-composition-switch em { font-size: 13px; }

body .mc-landing .mc-composition-state {
    min-width: 72px;
    color: var(--bj-muted, #66635e);
    font-size: 13px;
    text-align: right;
}

body .mc-landing .mc-composition-deck__foot {
    min-height: 80px;
    height: auto;
    padding: 14px 0;
    border-top: 1px solid var(--bj-line, #e6e8ec);
}

body .mc-landing .mc-composition-row-select:focus-visible,
body .mc-landing .mc-composition-switch:focus-visible,
body .mc-landing .mc-composition-move-tools > button:focus-visible,
body .mc-landing .mc-composition-deck__foot button:focus-visible {
    outline: 2px solid var(--bj-accent, #5e548e);
    outline-offset: 2px;
}

@media (max-width: 1047px) {
    body .mc-landing .mc-composition-proof .mc-composition-head {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 24px !important;
    }
    body .mc-landing .mc-composition-proof .mc-r1-kicker,
    body .mc-landing .mc-composition-proof .mc-composition-head h2,
    body .mc-landing .mc-composition-intro { grid-column: 1 !important; }
    body .mc-landing .mc-composition-proof .mc-r1-kicker { margin-bottom: 8px !important; }
    body .mc-landing .mc-composition-intro { width: 100% !important; padding-left: 0; }
    body .mc-landing .mc-composition-stage { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
    body .mc-landing .mc-composition-preview,
    body .mc-landing .mc-composition-phone { width: min(360px, 100%); margin-inline: auto; }
    body .mc-landing .mc-composition-deck { width: min(600px, 100%) !important; margin-inline: auto; }
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-proof { padding: 56px 0 80px !important; }
    body .mc-landing .mc-composition-proof .mc-composition-head {
        display: block !important;
        padding-bottom: 32px !important;
    }
    body .mc-landing .mc-composition-proof .mc-composition-head .mc-r1-kicker {
        margin-bottom: 16px !important;
    }
    body .mc-landing .mc-composition-proof .mc-composition-head h2 {
        font-size: 24px !important;
        line-height: 1.35 !important;
    }
    body .mc-landing .mc-composition-intro { margin-top: 16px; }
    body .mc-landing .mc-composition-intro p { font-size: 16px; line-height: 1.6; }
    body .mc-landing .mc-composition-stage { row-gap: 40px; }
    body .mc-landing .mc-composition-preview { margin-top: 32px; }
    body .mc-landing .mc-composition-deck { min-height: 0; }
    body .mc-landing .mc-composition-deck__head { padding-inline: 0; }
    body .mc-landing .mc-composition-list { min-height: 0; padding-block: 16px; }
    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-list > li.is-selected {
        grid-template-columns: 24px minmax(0, 1fr) auto;
        min-height: 64px;
        padding: 8px 0;
        scroll-margin-top: 360px;
    }
    body .mc-landing .mc-composition-list > li.is-selected { min-height: 116px; }
    body .mc-landing .mc-composition-actions {
        grid-column: 3 !important;
        grid-row: 1;
        justify-self: end;
    }
    body .mc-landing .mc-composition-list > li.is-selected .mc-composition-actions {
        grid-column: 2 / -1 !important;
        grid-row: 2 !important;
        width: 100%;
        justify-content: space-between;
    }
    body .mc-landing .mc-composition-list > li.is-selected .mc-composition-move-tools { display: flex; }
    body .mc-landing .mc-composition-actions .mc-composition-handle { display: none; }
    body .mc-landing .mc-composition-deck__foot { gap: 16px; padding-inline: 0; }
}

@media (max-width: 767px) and (min-width: 321px) and (min-height: 700px) and (orientation: portrait) {
    body .mc-landing .mc-composition-preview {
        position: static;
        width: 100%;
        padding: 8px 0 12px;
        background: transparent;
    }
    body .mc-landing .mc-composition-phone {
        width: 100%;
        height: min(37svh, 292px);
        border-radius: 18px;
    }
    body .mc-landing .mc-composition-fallback,
    body .mc-landing .mc-composition-mount { border-radius: 17px; }
}

@media (max-width: 320px), (max-width: 767px) and (max-height: 699px), (max-width: 767px) and (orientation: landscape) {
    body .mc-landing .mc-composition-preview { position: static !important; }
    body .mc-landing .mc-composition-phone { width: 100%; height: 240px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-composition-fallback,
    body .mc-landing .mc-composition-mount,
    body .mc-landing .mc-composition-switch > span::after { transition: none !important; }
}

/* R17 — 03 conversion proof: all features at a glance, arrangement on demand. */
body .mc-landing .mc-composition-stage {
    padding-top: 32px;
}

body .mc-landing .mc-composition-preview {
    margin-top: 0;
}

body .mc-landing .mc-composition-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 360px;
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-composition-result strong {
    min-width: 0;
    overflow: hidden;
    color: var(--bj-text, #181817);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mc-landing .mc-composition-result span {
    flex: none;
    color: var(--bj-muted, #66635e);
    font-size: 13px;
    line-height: 1.5;
}

body .mc-landing .mc-composition-start {
    width: 360px;
    margin-top: 16px;
}

body .mc-landing .mc-composition-deck {
    width: 600px !important;
    min-height: 780px;
    margin: 0 !important;
    border-top-color: var(--bj-line, #ddd9d2);
    border-bottom-color: var(--bj-line, #ddd9d2);
}

@media (max-width: 1047px) {
    body .mc-landing .mc-composition-deck {
        justify-self: center;
    }
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-deck {
        width: 100% !important;
    }
}

body .mc-landing .mc-composition-deck__head {
    min-height: 80px;
    padding: 16px 0;
}

body .mc-landing .mc-composition-deck__head > div {
    display: block;
}

body .mc-landing .mc-composition-deck__head h3 {
    margin: 0 0 3px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

body .mc-landing .mc-composition-deck__head p,
body .mc-landing .mc-composition-deck__head > strong {
    color: var(--bj-muted, #66635e);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}

body .mc-landing .mc-composition-deck__head > strong {
    color: var(--bj-text, #181817);
    font-weight: 600;
}

body .mc-landing .mc-composition-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 56px;
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-composition-modes button {
    position: relative;
    min-height: 56px;
    border: 0;
    background: transparent;
    color: var(--bj-muted, #66635e);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

body .mc-landing .mc-composition-modes button[aria-selected='true'] {
    color: var(--bj-text, #181817);
    font-weight: 600;
}

body .mc-landing .mc-composition-modes button[aria-selected='true']::after {
    position: absolute;
    right: 32px;
    bottom: -1px;
    left: 32px;
    height: 2px;
    background: var(--bj-text, #181817);
    content: '';
}

body .mc-landing .mc-composition-list,
body .mc-landing .mc-composition-list[data-mode='choose'] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    min-height: 560px;
    padding: 24px 0;
}

body .mc-landing .mc-composition-list > li,
body .mc-landing .mc-composition-list > li.is-selected {
    display: block;
    min-width: 0;
    min-height: 76px;
    padding: 0;
    border: 0;
}

body .mc-landing .mc-composition-card {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--bj-line, #ddd9d2);
    border-radius: 6px;
    background: #fff;
    color: var(--bj-text, #181817);
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms cubic-bezier(.22,1,.36,1), background-color 180ms cubic-bezier(.22,1,.36,1), color 180ms cubic-bezier(.22,1,.36,1);
}

body .mc-landing .mc-composition-card:hover {
    border-color: #a5a19b;
}

body .mc-landing .mc-composition-card__copy {
    display: block;
    min-width: 0;
}

body .mc-landing .mc-composition-card__copy strong,
body .mc-landing .mc-composition-card__copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mc-landing .mc-composition-card__copy strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

body .mc-landing .mc-composition-card__copy small {
    margin-top: 3px;
    color: var(--bj-muted, #66635e);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-card {
    background: #faf9f7;
    color: #85817b;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-card__copy small {
    color: #a19d97;
}

body .mc-landing .mc-composition-choice {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid #c9c5bf;
    border-radius: 50%;
    background: #fff;
}

body .mc-landing .mc-composition-list > li.is-enabled .mc-composition-choice {
    border-color: #25282d;
    background: #25282d;
}

body .mc-landing .mc-composition-list > li.is-enabled .mc-composition-choice::after {
    color: #fff;
    font-size: 11px;
    line-height: 1;
    content: '✓';
}

body .mc-landing .mc-composition-order-tools {
    display: none;
}

body .mc-landing .mc-composition-list[data-mode='order'] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

body .mc-landing .mc-composition-list[data-mode='order'] > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 64px;
}

body .mc-landing .mc-composition-list[data-mode='order'] .mc-composition-card {
    min-height: 64px;
}

body .mc-landing .mc-composition-list[data-mode='order'] .mc-composition-order-tools {
    display: flex;
    gap: 4px;
}

body .mc-landing .mc-composition-list[data-mode='order'] [data-locked='true'] .mc-composition-order-tools {
    visibility: hidden;
}

body .mc-landing .mc-composition-order-tools button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--bj-line, #ddd9d2);
    border-radius: 50%;
    background: #fff;
    color: var(--bj-text, #181817);
    font-size: 15px;
    cursor: pointer;
}

body .mc-landing .mc-composition-order-tools button:disabled {
    color: #bbb7b1;
    cursor: default;
    opacity: .45;
}

body .mc-landing .mc-composition-handle {
    letter-spacing: -3px;
    cursor: grab;
}

body .mc-landing .mc-composition-deck__foot {
    min-height: 64px;
    padding: 12px 0;
}

body .mc-landing .mc-composition-deck__foot p {
    font-size: 13px;
    line-height: 1.5;
}

body .mc-landing .mc-composition-card:focus-visible,
body .mc-landing .mc-composition-modes button:focus-visible,
body .mc-landing .mc-composition-order-tools button:focus-visible {
    outline: 2px solid var(--bj-accent, #5e548e);
    outline-offset: 2px;
}

body .mc-landing .mc-composition-mount .mc-composition-section-enter {
    animation: mc-composition-section-enter 220ms cubic-bezier(.22,1,.36,1);
}

@keyframes mc-composition-section-enter {
    from { opacity: .25; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1047px) {
    body .mc-landing .mc-composition-result,
    body .mc-landing .mc-composition-start { width: min(360px, 100%); margin-inline: auto; }
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-stage { padding-top: 24px; }
    body .mc-landing .mc-composition-list,
    body .mc-landing .mc-composition-list[data-mode='choose'] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        min-height: 0;
        padding: 20px 0;
    }
    body .mc-landing .mc-composition-card,
    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-list > li.is-selected { min-height: 76px; }
    body .mc-landing .mc-composition-list[data-mode='order'] { grid-template-columns: minmax(0, 1fr); }
    body .mc-landing .mc-composition-list[data-mode='order'] > li {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 64px;
    }
    body .mc-landing .mc-composition-order-tools .mc-composition-handle { display: none; }
    body .mc-landing .mc-composition-result,
    body .mc-landing .mc-composition-start { width: 100%; }
}

@media (max-width: 359px) {
    body .mc-landing .mc-composition-list,
    body .mc-landing .mc-composition-list[data-mode='choose'] { grid-template-columns: minmax(0, 1fr); }
}

/* R5.6 mobile style controls: compact text choices, visual thumbnails only where needed. */
@media (max-width: 860px) {
    body .mc-landing .mc-style-customize__body {
        min-height: 0;
        padding: 14px 0 18px;
    }

    body .mc-landing .mc-style-customize__panel {
        width: 100%;
        min-width: 0;
    }

    body .mc-landing .mc-custom-inline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    body .mc-landing .mc-custom-inline button {
        min-height: 48px;
        padding: 0 6px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.35;
        word-break: keep-all;
    }

    body .mc-landing .mc-custom-visuals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body .mc-landing .mc-custom-visuals button,
    body .mc-landing .mc-custom-visuals--background button,
    body .mc-landing .mc-custom-visuals--calendar button {
        min-height: 88px;
    }

    body .mc-landing .mc-custom-visuals img,
    body .mc-landing .mc-custom-visuals button > span,
    body .mc-landing .mc-custom-visuals--background i,
    body .mc-landing .mc-custom-visuals--calendar img,
    body .mc-landing .mc-custom-visuals--calendar button > span {
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-composition-card,
    body .mc-landing .mc-composition-mount .mc-composition-section-enter {
        animation: none !important;
        transition: none !important;
    }
}

/* R18 — one storyboard: visibility and order in the same surface. */
body .mc-landing .mc-composition-deck__head {
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-composition-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 24px 0;
}

body .mc-landing .mc-composition-list > li,
body .mc-landing .mc-composition-list > li.is-selected {
    position: relative;
    display: block;
    min-height: 80px;
    transition: opacity 180ms cubic-bezier(.22,1,.36,1), transform 180ms cubic-bezier(.22,1,.36,1);
}

body .mc-landing .mc-composition-card {
    position: relative;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    min-height: 80px;
    padding: 12px 44px 12px 12px;
}

body .mc-landing [data-locked='true'] .mc-composition-card {
    padding-right: 12px;
}

body .mc-landing .mc-composition-choice {
    width: 28px;
    height: 28px;
    border-color: #25282d;
    background: #fff;
    color: #25282d;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
}

body .mc-landing .mc-composition-list > li.is-enabled .mc-composition-choice {
    border-color: #25282d;
    background: #25282d;
    color: #fff;
}

body .mc-landing .mc-composition-list > li.is-enabled .mc-composition-choice::after {
    content: none;
}

body .mc-landing .mc-composition-state {
    position: absolute;
    right: 10px;
    bottom: 8px;
    color: var(--bj-muted, #66635e);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-card {
    border-color: #d7d3cd;
    background: #fff;
    color: #77736d;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-choice {
    border-color: #25282d;
    background: #fff;
    color: #25282d;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-state {
    color: #8d8983;
}

body .mc-landing .mc-composition-order-tools {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
    align-items: center;
}

body .mc-landing .mc-composition-order-tools button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 13px;
}

body .mc-landing .mc-composition-order-tools [data-mc-composition-move] {
    display: none;
    border: 1px solid var(--bj-line, #ddd9d2);
    background: #fff;
}

body .mc-landing .mc-composition-list [data-locked='true'] .mc-composition-order-tools {
    display: none;
}

body .mc-landing .mc-composition-list > li[data-orderable='true'] .mc-composition-handle {
    cursor: grab;
}

@media (min-width: 861px) {
    body .mc-landing .mc-composition-list > li[data-orderable='true'] .mc-composition-card {
        cursor: grab;
    }

    body .mc-landing .mc-composition-list > li[data-orderable='true'] .mc-composition-card:active {
        cursor: grabbing;
    }
}

body .mc-landing .mc-composition-list > li.is-dragging {
    z-index: 3;
    opacity: .45;
    transform: scale(.98);
}

body .mc-landing .mc-composition-list > li.is-drag-over::before {
    position: absolute;
    z-index: 4;
    top: -5px;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: 99px;
    background: #25282d;
    content: '';
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) {
        grid-column: 1 / -1;
    }

    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        min-height: 92px;
        padding-right: 112px;
    }

    body .mc-landing .mc-composition-list > li.is-selected .mc-composition-order-tools [data-mc-composition-move] {
        display: grid;
        width: 44px;
        height: 44px;
    }

    body .mc-landing .mc-composition-order-tools .mc-composition-handle {
        display: none;
    }
}

@media (max-width: 359px) {
    body .mc-landing .mc-composition-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* R19 — a single, ordered story rail: toggle with the card, reorder with the handle. */
body .mc-landing .mc-composition-deck {
    min-height: 0;
}

body .mc-landing .mc-composition-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 22px 0;
}

body .mc-landing .mc-composition-list > li,
body .mc-landing .mc-composition-list > li.is-selected {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 4px;
    align-items: stretch;
    min-height: 66px;
    border: 1px solid var(--bj-line, #ddd9d2);
    border-radius: 10px;
    background: #fff !important;
    transition: border-color 180ms cubic-bezier(.22,1,.36,1), background-color 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms cubic-bezier(.22,1,.36,1), transform 180ms cubic-bezier(.22,1,.36,1), opacity 180ms cubic-bezier(.22,1,.36,1);
}

body .mc-landing .mc-composition-list > li.is-selected {
    border-color: #b8b2aa;
    background: #f8f6f2 !important;
}

body .mc-landing .mc-composition-list > li:hover {
    border-color: #aaa49c;
}

body .mc-landing .mc-composition-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 10px 8px 10px 12px;
    border: 0;
    border-radius: 9px 0 0 9px;
    background: transparent !important;
    color: var(--bj-text, #181817);
    text-align: left;
    cursor: pointer;
}

body .mc-landing [data-locked='true'] .mc-composition-card {
    padding-right: 8px;
}

body .mc-landing .mc-composition-choice {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #25282d;
    border-radius: 50%;
    background: #fff;
    color: #25282d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

body .mc-landing .mc-composition-list > li.is-enabled .mc-composition-choice {
    border-color: #25282d;
    background: #25282d;
    color: #fff;
}

body .mc-landing .mc-composition-list > li.is-enabled .mc-composition-choice::after {
    content: none;
}

body .mc-landing .mc-composition-card__copy {
    display: block;
    min-width: 0;
}

body .mc-landing .mc-composition-card__copy strong,
body .mc-landing .mc-composition-card__copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .mc-landing .mc-composition-card__copy strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

body .mc-landing .mc-composition-card__copy small {
    margin-top: 2px;
    color: var(--bj-muted, #66635e);
    font-size: 13px;
    line-height: 1.45;
}

body .mc-landing .mc-composition-state {
    position: static;
    min-width: 48px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f0eee9;
    color: #4f4b46;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

body .mc-landing .mc-composition-list > li.is-hidden-area {
    opacity: 1;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-card {
    background: transparent !important;
    color: #76716b;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-card__copy small {
    color: #9b968f;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-state {
    background: #fff;
    color: #77726c;
    box-shadow: inset 0 0 0 1px #d8d3cc;
}

body .mc-landing .mc-composition-order-tools {
    position: static;
    display: grid;
    width: 48px;
    min-height: 64px;
    place-items: center;
}

body .mc-landing .mc-composition-list [data-locked='true'] .mc-composition-order-tools {
    display: grid;
    visibility: hidden;
}

body .mc-landing .mc-composition-order-tools button.mc-composition-handle {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: grab;
    touch-action: none;
}

body .mc-landing .mc-composition-order-tools button.mc-composition-handle:hover,
body .mc-landing .mc-composition-order-tools button.mc-composition-handle:focus-visible {
    background: #f0eee9;
}

body .mc-landing .mc-composition-order-tools button.mc-composition-handle:active {
    cursor: grabbing;
}

body .mc-landing .mc-composition-handle > span {
    width: 16px;
    height: 22px;
    background-image: radial-gradient(circle, #77726c 1.4px, transparent 1.6px);
    background-position: center;
    background-size: 7px 7px;
}

body .mc-landing .mc-composition-order-tools [data-mc-composition-move] {
    display: none;
}

body .mc-landing .mc-composition-list > li.is-dragging {
    z-index: 4;
    opacity: .52;
    transform: scale(.99);
    box-shadow: 0 12px 30px rgba(24,24,23,.12);
}

body .mc-landing .mc-composition-list > li.is-drop-before::before,
body .mc-landing .mc-composition-list > li.is-drop-after::after {
    position: absolute;
    z-index: 5;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: 99px;
    background: #25282d;
    content: '';
}

body .mc-landing .mc-composition-list > li.is-drop-before::before { top: -5px; }
body .mc-landing .mc-composition-list > li.is-drop-after::after { bottom: -5px; }

body .mc-landing .mc-composition-deck__foot {
    min-height: 64px;
    padding: 14px 0;
}

body .mc-landing .mc-composition-card:focus-visible,
body .mc-landing .mc-composition-handle:focus-visible,
body .mc-landing .mc-composition-order-tools [data-mc-composition-move]:focus-visible {
    outline: 2px solid var(--bj-accent, #5e548e);
    outline-offset: 2px;
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-list {
        display: flex;
        gap: 8px;
        padding: 18px 0;
    }

    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 72px;
    }

    body .mc-landing .mc-composition-card,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        min-height: 70px;
        padding: 10px 8px 10px 12px;
    }

    body .mc-landing .mc-composition-order-tools {
        display: none;
        grid-template-columns: repeat(2, 44px);
        width: 92px;
        min-height: 70px;
        gap: 4px;
        padding-right: 4px;
    }

    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-order-tools {
        display: grid;
    }

    body .mc-landing .mc-composition-order-tools .mc-composition-handle {
        display: none !important;
    }

    body .mc-landing .mc-composition-list > li.is-selected .mc-composition-order-tools [data-mc-composition-move] {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid var(--bj-line, #ddd9d2);
        border-radius: 50%;
        background: #fff;
    }
}

@media (max-width: 479px) {
    body .mc-landing .mc-composition-card,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
    }

    body .mc-landing .mc-composition-state {
        grid-column: auto;
        justify-self: end;
        min-width: 44px;
        margin-top: 0;
        padding-right: 6px;
        padding-left: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-composition-list > li {
        transition: none !important;
    }
}

/* R21 — mobile composition proof keeps the one real preview visible while editing. */
@media (min-width: 321px) and (max-width: 767px) and (min-height: 700px) and (orientation: portrait) {
    body .mc-landing .mc-composition-stage {
        row-gap: 12px;
    }

    body .mc-landing .mc-composition-preview {
        display: contents;
    }

    body .mc-landing .mc-composition-phone {
        position: sticky;
        z-index: 30;
        top: 76px;
        align-self: start;
        width: 100%;
        height: min(220px, 28svh);
        padding: 7px;
        border: 1px solid #d8d4cd;
        border-radius: 20px;
        background: #f8f7f4;
        box-shadow: 0 12px 30px rgba(28, 27, 24, .1);
        backdrop-filter: blur(12px);
    }

    body .mc-landing .mc-composition-fallback,
    body .mc-landing .mc-composition-mount {
        border-radius: 14px;
    }

    body .mc-landing .mc-composition-mount .ed-preview__frame {
        overflow: hidden !important;
        pointer-events: none;
        touch-action: pan-y;
    }

    body .mc-landing .mc-composition-result {
        margin-top: 4px;
    }

    body .mc-landing .mc-composition-start {
        margin-top: 0;
    }

    body .mc-landing .mc-composition-deck {
        margin-top: 24px;
    }
}

@media (min-width: 1048px) and (min-height: 900px) {
    body .mc-landing .mc-composition-preview {
        position: sticky;
        top: 150px;
    }
}

/* R22 — keep the 17-feature story readable without turning it into a settings table. */
body .mc-landing .mc-composition-list > li.is-selected {
    border-color: var(--bj-line, #ddd9d2);
    background: #f8f6f2 !important;
}

body .mc-landing .mc-composition-card:focus-visible,
body .mc-landing .mc-composition-handle:focus-visible,
body .mc-landing .mc-composition-order-tools [data-mc-composition-move]:focus-visible {
    outline: 2px solid #181817 !important;
    outline-offset: 2px;
}

body .mc-landing .mc-composition-order-tools [data-mc-composition-move] em {
    display: none;
    font-style: normal;
}

@media (min-width: 1048px) {
    body .mc-landing .mc-composition-stage {
        align-items: stretch;
    }

    body .mc-landing .mc-composition-preview {
        position: relative;
        top: auto;
        align-self: stretch;
        min-height: 913px;
    }

    body .mc-landing .mc-composition-phone {
        position: sticky;
        top: 150px;
    }
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) {
        grid-template-columns: minmax(0, 1fr);
    }

    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        width: 100%;
        border-radius: 9px 9px 0 0;
    }

    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-order-tools {
        grid-column: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-height: 54px;
        gap: 8px;
        padding: 0 10px 10px;
    }

    body .mc-landing .mc-composition-list > li.is-selected .mc-composition-order-tools [data-mc-composition-move] {
        display: flex;
        width: 100%;
        height: 44px;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: 13px;
    }

    body .mc-landing .mc-composition-order-tools [data-mc-composition-move] em {
        display: inline;
    }
}

/* R23 — one complete focus surface, clearer reorder affordance, clean mobile sticky handoff. */
body .mc-landing .mc-composition-list > li:has(.mc-composition-card:focus-visible),
body .mc-landing .mc-composition-list > li:has(.mc-composition-handle:focus-visible),
body .mc-landing .mc-composition-list > li:has([data-mc-composition-move]:focus-visible) {
    outline: 2px solid #181817;
    outline-offset: 2px;
}

body .mc-landing .mc-composition-card:focus-visible,
body .mc-landing .mc-composition-handle:focus-visible,
body .mc-landing .mc-composition-order-tools [data-mc-composition-move]:focus-visible {
    outline: 0 !important;
}

body .mc-landing .mc-composition-handle > span {
    width: 18px;
    height: 24px;
    background-image: radial-gradient(circle, #4d4943 1.7px, transparent 1.9px);
    background-size: 7px 7px;
}

body .mc-landing .mc-composition-order-tools button.mc-composition-handle:hover,
body .mc-landing .mc-composition-order-tools button.mc-composition-handle:focus-visible {
    background: #ebe8e2;
}

/* R24 — distinguish keyboard focus from the section currently shown in preview. */
body .mc-landing .mc-composition-list > li.is-selected {
    border-color: #c8c2b9;
    background: #f1efe9 !important;
    box-shadow: 0 8px 22px rgba(24, 24, 23, .045);
}

body .mc-landing .mc-composition-list > li:has(.mc-composition-card:focus-visible),
body .mc-landing .mc-composition-list > li:has(.mc-composition-handle:focus-visible),
body .mc-landing .mc-composition-list > li:has([data-mc-composition-move]:focus-visible) {
    outline-color: #79736b;
}

body .mc-landing .mc-composition-list > li.is-selected .mc-composition-state {
    background: #25282d;
    color: #fff;
    box-shadow: none;
}

/* R25 — reset is a contextual recovery action, not a permanent primary control. */
body .mc-landing [data-mc-composition-reset][hidden] {
    display: none !important;
}

body .mc-landing [data-mc-composition-reset] {
    color: #68645e;
    font-size: 12px;
    font-weight: 500;
}

/* Mobile design-preview handoff uses the same 56px primary-CTA rhythm as 01–03. */
body .mc-landing .mc-mobile-preview-action .mc-mobile-preview-direct {
    min-height: 56px;
}

body .mc-landing .mc-composition-guide--mobile {
    display: none;
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-guide--desktop {
        display: none;
    }

    body .mc-landing .mc-composition-guide--mobile {
        display: inline;
    }
}

/* R26 — the card the user changed receives one short, quiet confirmation. */
body .mc-landing .mc-composition-list > li.is-just-changed .mc-composition-card {
    animation: mc-composition-card-confirm 520ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes mc-composition-card-confirm {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 40, 45, 0);
        transform: translateY(0);
    }
    38% {
        box-shadow: 0 0 0 6px rgba(37, 40, 45, .08);
        transform: translateY(-1px);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 40, 45, 0);
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-composition-list > li.is-just-changed .mc-composition-card {
        animation: none !important;
    }
}

/* R27 — mobile hero starts on the mobile grid, without inherited desktop offsets. */
@media (max-width: 767px) {
    body .mc-landing .mc-hero {
        padding-top: 0;
    }

    body .mc-landing .mc-hero__copy {
        top: auto;
    }
}

/* R28 — every conversion step lands below the real sticky site header. */
body .mc-landing .mc-design-picker,
body .mc-landing .mc-style-composer,
body .mc-landing .mc-composition-proof {
    scroll-margin-top: calc(var(--mc-header-h, 0px) + 24px);
}

@media (min-width: 321px) and (max-width: 767px) and (min-height: 700px) and (orientation: portrait) {
    body .mc-landing .mc-composition-phone {
        top: 48px;
        height: min(200px, 24svh);
    }

    body .mc-landing .mc-composition-deck {
        margin-top: 20px;
    }
}

/* R29 — show all 17 capabilities at once in a compact, ordered feature map. */
body .mc-landing .mc-composition-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 20px 0;
}

body .mc-landing .mc-composition-list > li,
body .mc-landing .mc-composition-list > li.is-selected {
    display: block;
    min-width: 0;
    min-height: 88px;
    border-radius: 8px;
}

body .mc-landing .mc-composition-card,
body .mc-landing .mc-composition-list > li.is-selected .mc-composition-card {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 10px;
    min-height: 86px;
    padding: 10px 40px 10px 10px;
    border-radius: 7px;
}

body .mc-landing .mc-composition-choice {
    grid-row: 1 / span 2;
    width: 32px;
    height: 32px;
    align-self: center;
    font-size: 11px;
}

body .mc-landing .mc-composition-card__copy {
    grid-column: 2;
    align-self: end;
}

body .mc-landing .mc-composition-card__copy strong {
    font-size: 14px;
    line-height: 1.35;
}

body .mc-landing .mc-composition-card__copy small {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.35;
}

body .mc-landing .mc-composition-state {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #66615b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    box-shadow: none;
}

body .mc-landing .mc-composition-list > li.is-hidden-area .mc-composition-state,
body .mc-landing .mc-composition-list > li.is-selected .mc-composition-state {
    background: transparent;
    color: #77716a;
    box-shadow: none;
}

body .mc-landing .mc-composition-list > li.is-selected .mc-composition-state {
    color: #181817;
}

body .mc-landing .mc-composition-order-tools {
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 4px;
    display: grid;
    width: 36px;
    min-height: 36px;
    place-items: center;
}

body .mc-landing .mc-composition-order-tools button.mc-composition-handle {
    width: 36px;
    height: 36px;
}

body .mc-landing .mc-composition-handle > span {
    width: 14px;
    height: 19px;
    background-size: 6px 6px;
}

body .mc-landing .mc-composition-list > li.is-drop-left::before,
body .mc-landing .mc-composition-list > li.is-drop-right::after {
    position: absolute;
    z-index: 6;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 99px;
    background: #25282d;
    content: '';
}

body .mc-landing .mc-composition-list > li.is-drop-left::before { left: -6px; }
body .mc-landing .mc-composition-list > li.is-drop-right::after { right: -6px; }

@media (min-width: 861px) and (max-width: 1047px) {
    body .mc-landing .mc-composition-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 18px 0;
    }

    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) {
        display: block;
        min-height: 82px;
    }

    body .mc-landing .mc-composition-card,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        grid-template-columns: 30px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 2px 8px;
        min-height: 80px;
        padding: 9px 8px;
        border-radius: 7px;
    }

    body .mc-landing .mc-composition-choice {
        width: 30px;
        height: 30px;
    }

    body .mc-landing .mc-composition-card__copy strong {
        font-size: 13px;
    }

    body .mc-landing .mc-composition-card__copy small {
        font-size: 10px;
    }

    body .mc-landing .mc-composition-state {
        grid-column: 2;
        justify-self: start;
        margin: 0;
        padding: 0;
        font-size: 10px;
    }

    body .mc-landing .mc-composition-order-tools,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-order-tools {
        position: static;
        display: none;
        width: auto;
        min-height: 0;
    }

    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-order-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 0 8px 8px;
    }

    body .mc-landing .mc-composition-list > li.is-selected .mc-composition-order-tools [data-mc-composition-move] {
        display: flex;
    }
}

@media (max-width: 359px) {
    body .mc-landing .mc-composition-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* R30 — cards provide the structure; remove repeated rules and make order changes observable. */
body .mc-landing .mc-composition-deck {
    border-top: 0;
    border-bottom: 0;
}

body .mc-landing .mc-composition-deck__head {
    border-bottom: 0;
    padding-bottom: 8px;
}

body .mc-landing .mc-composition-list {
    padding-top: 10px;
}

body .mc-landing .mc-composition-deck__foot {
    min-height: 44px;
    padding: 8px 0 0;
    border-top: 0;
    justify-content: flex-end;
}

body .mc-landing .mc-composition-deck__foot:has([data-mc-composition-reset][hidden]) {
    min-height: 0;
    height: 0;
    padding: 0;
}

body .mc-landing [data-mc-composition-result-summary] {
    transition: color 180ms ease;
}

body .mc-landing [data-mc-composition-result-summary].is-feedback {
    color: #181817;
    font-weight: 600;
}

@media (min-width: 861px) {
    body .mc-landing .mc-composition-mount .ed-preview__frame {
        overflow-y: auto !important;
        pointer-events: auto !important;
        overscroll-behavior: contain;
        scrollbar-color: rgba(37, 40, 45, .28) transparent;
        scrollbar-width: thin;
    }

    body .mc-landing .mc-composition-mount .ed-preview__frame::-webkit-scrollbar {
        width: 5px;
    }

    body .mc-landing .mc-composition-mount .ed-preview__frame::-webkit-scrollbar-thumb {
        border-radius: 99px;
        background: rgba(37, 40, 45, .28);
    }

    body .mc-landing .mc-composition-mount .ed-preview__frame a,
    body .mc-landing .mc-composition-mount .ed-preview__frame button,
    body .mc-landing .mc-composition-mount .ed-preview__frame input,
    body .mc-landing .mc-composition-mount .ed-preview__frame textarea,
    body .mc-landing .mc-composition-mount .ed-preview__frame select {
        pointer-events: none !important;
    }
}

@media (max-width: 860px) {
    body .mc-landing .mc-composition-mount .ed-preview__frame {
        overflow: hidden !important;
        pointer-events: none !important;
        scrollbar-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing [data-mc-composition-result-summary] {
        transition: none !important;
    }
}

/* R31 — align the closing benefits stage with the 01/02/03 design system. */
body .mc-landing .mc-closing .mc-closing__head {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 360px 600px !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    padding-bottom: 64px !important;
    text-align: left !important;
}

body .mc-landing .mc-closing__head .mc-r1-kicker {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    color: #aaa69f !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: .14em !important;
    text-align: left !important;
}

body .mc-landing .mc-closing__head h2 {
    font-size: var(--bj-type-section, 28px) !important;
    line-height: var(--bj-type-section-line, 1.35) !important;
    letter-spacing: -.04em !important;
}

body .mc-landing .mc-closing__head > p:last-child {
    padding-left: 0 !important;
    color: #c5c1ba !important;
    font-size: var(--bj-type-body, 16px) !important;
    line-height: var(--bj-type-body-line, 1.6) !important;
    text-align: left !important;
}

body .mc-landing .mc-closing__content {
    width: 600px;
    min-width: 0;
    padding-left: 0 !important;
}

body .mc-landing .mc-closing__policies {
    border-top: 0 !important;
}

body .mc-landing .mc-closing__policies > div {
    min-height: 80px;
    grid-template-columns: 42px 210px minmax(0, 1fr);
    padding: 20px 0;
    align-items: center;
    border-bottom: 0 !important;
}

body .mc-landing .mc-closing__policies > div + div {
    border-top: 1px solid rgba(255,255,255,.18);
}

body .mc-landing .mc-closing__action {
    width: 100%;
    margin-top: 32px;
}

@media (max-width: 1047px) {
    body .mc-landing .mc-closing .mc-closing__head {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 24px !important;
        padding-bottom: 48px !important;
    }

    body .mc-landing .mc-closing__head .mc-r1-kicker,
    body .mc-landing .mc-closing__head h2,
    body .mc-landing .mc-closing__head > p:last-child {
        grid-column: 1 !important;
    }

    body .mc-landing .mc-closing__body {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 40px !important;
    }

    body .mc-landing .mc-closing__proof {
        width: min(360px, 100%);
        margin-inline: auto;
    }

    body .mc-landing .mc-closing__content {
        width: min(600px, 100%);
        margin-inline: auto;
    }
}

@media (max-width: 860px) {
    body .mc-landing .mc-closing .mc-closing__head {
        display: block !important;
        padding-bottom: 32px !important;
    }

    body .mc-landing .mc-closing__head .mc-r1-kicker {
        margin-bottom: 16px !important;
    }

    body .mc-landing .mc-closing__head h2 {
        font-size: var(--bj-type-section, 24px) !important;
        line-height: var(--bj-type-section-line, 1.35) !important;
    }

    body .mc-landing .mc-closing__head > p:last-child {
        margin-top: 16px !important;
        font-size: var(--bj-type-body, 16px) !important;
        line-height: var(--bj-type-body-line, 1.6) !important;
    }

    body .mc-landing .mc-closing__body {
        row-gap: 32px !important;
        padding-top: 32px;
    }

    body .mc-landing .mc-closing__policies > div {
        min-height: 0;
        grid-template-columns: 32px minmax(0, 1fr);
        row-gap: 4px;
        padding: 18px 0;
        align-items: start;
    }

    body .mc-landing .mc-closing__policies p {
        grid-column: 2;
    }

    body .mc-landing .mc-closing__action {
        margin-top: 32px;
    }
}

/* R32 — one conversion action across the landing journey. */
body .mc-landing .mc-unified-entry {
    --mc-entry-surface: #191917;
    --mc-entry-ink: #fff;
    --mc-entry-arrow-surface: #fff;
    --mc-entry-arrow-ink: #191917;
    overflow: hidden;
    width: 360px !important;
    min-height: 48px !important;
    margin-top: 20px !important;
    isolation: isolate;
    font-size: var(--bj-type-action, 16px) !important;
    font-weight: var(--bj-type-action-weight, 700) !important;
    line-height: var(--bj-type-action-line, 1.5) !important;
    letter-spacing: normal;
    border-radius: var(--bj-control-radius, 8px) !important;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, background-color .22s ease, color .22s ease;
}

body .mc-landing .mc-unified-entry > span {
    position: relative;
    z-index: 1;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

body .mc-landing .mc-unified-entry::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    box-sizing: border-box;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    background: var(--mc-entry-surface);
    color: var(--mc-entry-ink);
    content: attr(data-mc-entry-prelude);
    transform: translateX(-101%);
    font-size: var(--bj-type-body, 16px);
    font-weight: var(--bj-type-nav-weight, 600);
    line-height: var(--bj-type-body-line, 1.6);
    letter-spacing: var(--bj-type-body-tracking, -.01em);
    white-space: nowrap;
    pointer-events: none;
}

body .mc-landing .mc-hero__primary-action .mc-landing__start {
    min-height: 48px;
    border-radius: var(--bj-control-radius, 8px);
    font-size: var(--bj-type-action, 16px);
    font-weight: var(--bj-type-action-weight, 700);
    line-height: var(--bj-type-action-line, 1.5);
    letter-spacing: normal;
}

body .mc-landing .mc-unified-entry.is-entry-intro::before {
    animation: mc-entry-curtain 1.28s cubic-bezier(.22, 1, .36, 1) both;
}

body .mc-landing .mc-unified-entry.is-entry-intro > span {
    animation: mc-entry-main-settle 1.28s cubic-bezier(.22, 1, .36, 1) both;
}

body .mc-landing .mc-unified-entry.is-entry-intro > i {
    animation: mc-entry-arrow-settle 1.28s cubic-bezier(.22, 1, .36, 1) both;
}

body .mc-landing .mc-unified-entry > i {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    width: calc(var(--bj-space-2, 16px) * 2);
    height: calc(var(--bj-space-2, 16px) * 2);
    right: 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mc-entry-arrow-surface);
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    font-size: var(--bj-type-action, 16px);
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), background-color .2s ease, color .2s ease;
}

body .mc-landing .mc-unified-entry:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

body .mc-landing .mc-unified-entry:hover > i,
body .mc-landing .mc-unified-entry:focus-visible > i {
    background: var(--mc-entry-arrow-surface);
    color: var(--mc-entry-arrow-ink);
    transform: translateX(4px);
}

body .mc-landing .mc-unified-entry:active {
    transform: translateY(0) scale(.985);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}

body .mc-landing .mc-preview-actions .mc-unified-entry,
body .mc-landing .mc-closing__action .mc-unified-entry {
    --mc-entry-surface: #fff;
    --mc-entry-ink: #191917;
    --mc-entry-arrow-surface: #191917;
    --mc-entry-arrow-ink: #fff;
}

@keyframes mc-entry-curtain {
    0% { transform: translateX(-101%); }
    24%, 62% { transform: translateX(0); }
    100% { transform: translateX(101%); }
}

@keyframes mc-entry-main-settle {
    0%, 72% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes mc-entry-arrow-settle {
    0%, 72% { transform: translateX(-5px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

body .mc-landing .mc-style-composer__actions .mc-unified-entry,
body .mc-landing .mc-composition-preview .mc-unified-entry {
    margin-top: 0 !important;
}

body .mc-landing .mc-closing__action {
    display: block;
    width: 360px;
    margin-top: 20px;
}

body .mc-landing .mc-closing__action .mc-unified-entry {
    border: 1px solid #fff;
    background: #fff;
    color: #191917 !important;
}

body .mc-landing .mc-closing__action .mc-unified-entry:hover {
    background: transparent;
    color: #fff !important;
}

@media (max-width: 1047px) {
    body .mc-landing .mc-unified-entry,
    body .mc-landing .mc-closing__action {
        width: min(360px, 100%) !important;
    }
}

@media (max-width: 767px) {
    body .mc-landing .mc-unified-entry,
    body .mc-landing .mc-closing__action {
        width: 100% !important;
    }
}

@media (max-width: 360px) {
    body .mc-landing .mc-unified-entry {
        min-height: 48px !important;
        padding-right: 48px !important;
        padding-left: 12px !important;
        font-size: var(--bj-type-action, 16px) !important;
    }

    body .mc-landing .mc-unified-entry::before {
        padding: 0 12px;
        font-size: var(--bj-type-action, 16px);
    }

    body .mc-landing .mc-unified-entry > i {
        right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-unified-entry::before {
        display: none;
    }

    body .mc-landing .mc-unified-entry,
    body .mc-landing .mc-unified-entry > i {
        animation: none !important;
        transition: none !important;
    }
}

/* R33 — the composition instruction is body copy, not a micro label. */
body .mc-landing .mc-composition-deck__head h3 {
    margin-bottom: 8px;
}

body .mc-landing .mc-composition-deck__head p {
    color: #4f4b46;
    font-size: var(--bj-type-body, 16px);
    font-weight: 400;
    line-height: var(--bj-type-body-line, 1.6);
}

@media (max-width: 767px) {
    body .mc-landing .mc-composition-deck__head p {
        font-size: 15px;
        line-height: 1.6;
    }
}

/* R34 — step 03 follows the same preview -> identity -> CTA rhythm as step 02. */
body .mc-landing .mc-composition-result {
    min-height: 44px;
    margin-top: 16px;
    padding: 0;
    border-bottom: 0;
    align-items: center;
}

body .mc-landing .mc-composition-preview .mc-composition-start {
    margin-top: 18px !important;
}

@media (min-width: 1048px) {
    body .mc-landing .mc-composition-phone {
        position: relative;
        top: auto;
    }
}

/* R35 — calm editorial motion for section travel and catalog expansion. */
body .mc-landing .mc-r1-hero-link,
body .mc-landing .mc-design-picker .mc-catalog-expand {
    border-radius: var(--bj-control-radius, 8px) !important;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease,
        transform .24s cubic-bezier(.22, 1, .36, 1);
}

body .mc-landing .mc-r1-hero-link:hover,
body .mc-landing .mc-r1-hero-link:focus-visible,
body .mc-landing .mc-design-picker .mc-catalog-expand:hover,
body .mc-landing .mc-design-picker .mc-catalog-expand:focus-visible {
    transform: translateY(-2px);
}

body .mc-landing .mc-design-picker .mc-catalog-expand:active {
    transform: translateY(0) scale(.985);
}

@media (prefers-reduced-motion: no-preference) {
    body .mc-landing.mc-motion-ready .mc-motion-section {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .68s cubic-bezier(.22, 1, .36, 1),
            transform .68s cubic-bezier(.22, 1, .36, 1);
        will-change: opacity, transform;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section.is-motion-inview {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    ::view-transition-group(mc-design-catalog) {
        animation-duration: .48s;
        animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    }

    ::view-transition-old(mc-design-catalog) {
        animation: mc-catalog-out .3s cubic-bezier(.4, 0, 1, 1) both;
        mix-blend-mode: normal;
    }

    ::view-transition-new(mc-design-catalog) {
        animation: mc-catalog-in .48s cubic-bezier(.22, 1, .36, 1) both;
        mix-blend-mode: normal;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__head {
        animation: mc-catalog-content-in .42s .08s cubic-bezier(.22, 1, .36, 1) both;
    }

    body.mc-catalog-expanded .mc-skin-rail__menu {
        animation: mc-catalog-content-in .46s .12s cubic-bezier(.22, 1, .36, 1) both;
    }

    body.mc-catalog-expanded .mc-skin-rail__list {
        animation: mc-catalog-content-in .5s .16s cubic-bezier(.22, 1, .36, 1) both;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__footer {
        animation: mc-catalog-content-in .42s .18s cubic-bezier(.22, 1, .36, 1) both;
    }
}

@keyframes mc-catalog-content-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-r1-hero-link,
    body .mc-landing .mc-design-picker .mc-catalog-expand,
    body .mc-landing.mc-motion-ready .mc-motion-section,
    body.mc-catalog-expanded .mc-catalog-expanded__head,
    body.mc-catalog-expanded .mc-skin-rail__menu,
    body.mc-catalog-expanded .mc-skin-rail__list,
    body.mc-catalog-expanded .mc-catalog-expanded__footer {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* R39 — final cascade for polished section reveals. */
@media (prefers-reduced-motion: no-preference) {
    body .mc-landing.mc-motion-ready .mc-motion-section,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__proof,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__content {
        opacity: 1;
        filter: blur(0);
        transform: none;
        transition: opacity .82s cubic-bezier(.22, 1, .36, 1),
            filter .82s cubic-bezier(.22, 1, .36, 1),
            transform .82s cubic-bezier(.22, 1, .36, 1);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__proof { transition-delay: .22s; }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__content { transition-delay: .3s; }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__proof {
        opacity: 0;
        filter: blur(3px);
        transform: translate3d(-18px, 20px, 0) scale(.988);
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__content {
        opacity: 0;
        filter: blur(3px);
        transform: translate3d(18px, 20px, 0) scale(.988);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__proof,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__content {
        transform: translateY(20px) scale(.992);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing.mc-motion-ready .mc-motion-section,
    body .mc-landing.mc-motion-ready .mc-motion-section * {
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* R41 — invitation designs stay visually stable; motion never obscures comparison. */
@media (prefers-reduced-motion: no-preference) {
    body .mc-landing.mc-motion-ready .mc-motion-section,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview),
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__proof,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__content {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker.is-motion-inview .mc-skin-card,
    body .mc-landing.mc-motion-ready .mc-composition-proof.is-motion-inview [data-mc-composition-row] {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-card-deal-target {
        visibility: visible !important;
        opacity: 1 !important;
        clip-path: none !important;
        filter: none !important;
        transform: none !important;
    }
}

/* R42 — open the design stage; invitation artwork itself never moves. */
body .mc-landing .mc-design-picker .mc-final-preview__head {
    position: relative;
    border-bottom: 0 !important;
}

body .mc-landing .mc-design-picker .mc-final-preview__head::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, .2);
    content: "";
    transform: scaleX(1);
    transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
    body .mc-landing.mc-motion-ready .mc-design-picker .mc-final-preview__head-copy > .mc-r1-kicker,
    body .mc-landing.mc-motion-ready .mc-design-picker .mc-final-preview__head-copy > h2,
    body .mc-landing.mc-motion-ready .mc-design-picker .mc-final-preview__head-copy > p:last-child {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition:
            opacity .46s cubic-bezier(.22, 1, .36, 1),
            transform .58s cubic-bezier(.22, 1, .36, 1) !important;
        will-change: opacity, transform;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker .mc-final-preview__head-copy > h2 {
        transition-delay: .08s !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker .mc-final-preview__head-copy > p:last-child {
        transition-delay: .16s !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-motion-inview) .mc-final-preview__head-copy > .mc-r1-kicker,
    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-motion-inview) .mc-final-preview__head-copy > h2,
    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-motion-inview) .mc-final-preview__head-copy > p:last-child {
        opacity: 0 !important;
        transform: translateY(12px) !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker .mc-final-preview__head::after {
        transform: scaleX(1);
        transition: transform .76s cubic-bezier(.22, 1, .36, 1) .2s;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-motion-inview) .mc-final-preview__head::after {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-design-picker .mc-final-preview__head::after {
        transform: scaleX(1) !important;
        transition: none !important;
    }
}

/* R44 — four distinct scenes, not one repeated fade. */
body .mc-landing .mc-design-picker,
body .mc-landing .mc-style-composer,
body .mc-landing .mc-composition-proof,
body .mc-landing .mc-closing {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

body .mc-landing .mc-design-picker .mc-skin-rail__list,
body .mc-landing .mc-style-composer__workspace,
body .mc-landing .mc-composition-stage,
body .mc-landing .mc-closing__body {
    position: relative;
}

@media (prefers-reduced-motion: no-preference) {
    /* 01: the catalogue is dealt into place in one quick, orderly sweep. */
    body .mc-landing.mc-motion-ready .mc-design-picker .mc-skin-card {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0 round 8px);
        transform: none !important;
        transition:
            opacity .3s linear calc(.16s + var(--mc-enter-index, 0) * 18ms),
            clip-path .48s cubic-bezier(.22, 1, .36, 1) calc(.12s + var(--mc-enter-index, 0) * 18ms) !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-scene-active) .mc-skin-card {
        opacity: .12 !important;
        clip-path: inset(0 0 100% 0 round 8px);
    }

    body .mc-landing.mc-motion-ready .mc-design-picker .mc-skin-rail__list::after {
        position: absolute;
        z-index: 9;
        top: 0;
        bottom: 0;
        left: 0;
        width: 18%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent);
        content: "";
        opacity: 0;
        pointer-events: none;
        transform: translateX(520%);
        transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) .08s, opacity .22s linear .08s;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-scene-active) .mc-skin-rail__list::after {
        opacity: 1;
        transform: translateX(-120%);
    }

    /* 02: preview and editing tools assemble from opposite sides. */
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__phone {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 34px);
        transform: translateX(0) scale(1) !important;
        transition:
            opacity .42s linear .08s,
            clip-path .78s cubic-bezier(.22, 1, .36, 1) .08s,
            transform .78s cubic-bezier(.22, 1, .36, 1) .08s !important;
    }

    body .mc-landing.mc-motion-ready .mc-style-composer:not(.is-scene-active) .mc-style-composer__phone {
        opacity: .2;
        clip-path: inset(0 42% 0 0 round 34px);
        transform: translateX(-34px) scale(.97) !important;
    }

    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > * {
        opacity: 1;
        transform: translateX(0) !important;
        transition: opacity .44s linear, transform .72s cubic-bezier(.22, 1, .36, 1) !important;
    }

    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > :nth-child(1) { transition-delay: .12s !important; }
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > :nth-child(2) { transition-delay: .2s !important; }
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > :nth-child(3) { transition-delay: .28s !important; }
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > :nth-child(4) { transition-delay: .34s !important; }

    body .mc-landing.mc-motion-ready .mc-style-composer:not(.is-scene-active) .mc-style-composer__controls > * {
        opacity: 0;
        transform: translateX(34px) !important;
    }

    /* 03: function order becomes visible as a numbered story sequence. */
    body .mc-landing.mc-motion-ready .mc-composition-proof [data-mc-composition-row] {
        opacity: 1;
        transform: translateY(0) !important;
        transition:
            opacity .28s linear calc(.1s + var(--mc-enter-index, 0) * 34ms),
            transform .52s cubic-bezier(.22, 1, .36, 1) calc(.1s + var(--mc-enter-index, 0) * 34ms) !important;
    }

    body .mc-landing.mc-motion-ready .mc-composition-proof:not(.is-scene-active) [data-mc-composition-row] {
        opacity: 0;
        transform: translateY(16px) !important;
    }

    body .mc-landing.mc-motion-ready .mc-composition-proof .mc-composition-choice {
        transform: scale(1) !important;
        transition: transform .38s cubic-bezier(.34, 1.56, .64, 1) calc(.2s + var(--mc-enter-index, 0) * 34ms) !important;
    }

    body .mc-landing.mc-motion-ready .mc-composition-proof:not(.is-scene-active) .mc-composition-choice {
        transform: scale(.42) !important;
    }

    /* 04: the paper/mobile proof lands first, then the four benefits lock in. */
    body .mc-landing.mc-motion-ready .mc-closing .mc-closing__proof img {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 4px);
        transform: rotate(0) scale(1) !important;
        transform-origin: 50% 72%;
        transition:
            opacity .42s linear .08s,
            clip-path .82s cubic-bezier(.22, 1, .36, 1) .08s,
            transform .95s cubic-bezier(.22, 1, .36, 1) .08s !important;
    }

    body .mc-landing.mc-motion-ready .mc-closing:not(.is-scene-active) .mc-closing__proof img {
        opacity: .18;
        clip-path: inset(12% 8% 12% 8% round 18px);
        transform: rotate(-3deg) scale(1.06) !important;
    }

    body .mc-landing.mc-motion-ready .mc-closing .mc-closing__policies > div {
        opacity: 1;
        transform: translateX(0) !important;
        transition:
            opacity .32s linear calc(.2s + var(--mc-enter-index, 0) * 105ms),
            transform .62s cubic-bezier(.22, 1, .36, 1) calc(.2s + var(--mc-enter-index, 0) * 105ms) !important;
    }

    body .mc-landing.mc-motion-ready .mc-closing:not(.is-scene-active) .mc-closing__policies > div {
        opacity: 0;
        transform: translateX(30px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-design-picker .mc-skin-card,
    body .mc-landing .mc-style-composer .mc-style-composer__phone,
    body .mc-landing .mc-style-composer .mc-style-composer__controls > *,
    body .mc-landing .mc-composition-proof [data-mc-composition-row],
    body .mc-landing .mc-composition-proof .mc-composition-choice,
    body .mc-landing .mc-closing .mc-closing__proof img,
    body .mc-landing .mc-closing .mc-closing__policies > div {
        clip-path: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* R45 — composition copy follows the landing type system instead of legacy micro text. */
body .mc-landing .mc-composition-guide--desktop,
body .mc-landing .mc-composition-guide--mobile {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

body .mc-landing .mc-composition-card__copy strong {
    font-size: var(--bj-type-body, 16px);
    font-weight: var(--bj-type-nav-weight, 600);
    line-height: 1.4;
}

body .mc-landing .mc-composition-card__copy small {
    font-size: var(--bj-type-caption, 14px);
    font-weight: 400;
    line-height: 1.45;
}

body .mc-landing .mc-composition-state {
    font-size: var(--bj-type-caption, 14px) !important;
    font-weight: var(--bj-type-nav-weight, 600);
    line-height: var(--bj-type-caption-line, 1.5);
}

body .mc-landing [data-mc-composition-count] {
    font-size: var(--bj-type-caption, 14px) !important;
    line-height: var(--bj-type-caption-line, 1.5);
}

/* R46 piece-assembly experiment disabled: preserve the approved pre-motion design. */
@media not all {
    body .mc-landing .mc-hero__bg {
        animation: none !important;
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body .mc-landing .mc-hero__copy > * {
        animation: mc-piece-copy .84s cubic-bezier(.25, .1, .25, 1) both !important;
    }

    body .mc-landing .mc-hero__copy > h1 { animation-delay: .16s !important; }
    body .mc-landing .mc-hero__copy > .mc-r1-hero-lede { animation-delay: .34s !important; }
    body .mc-landing .mc-hero__copy > .mc-hero__cta { animation-delay: .5s !important; }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-r1-kicker,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy > p:last-child,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head-context,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-intro,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head > p:last-child {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        filter: none !important;
        transform: none !important;
        transition:
            opacity .62s linear,
            clip-path .88s cubic-bezier(.25, .1, .25, 1),
            transform .88s cubic-bezier(.25, .1, .25, 1) !important;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-r1-kicker,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__head-copy h2,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-final-preview__head-copy > p:last-child,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-style-composer__head-context,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-composition-intro,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__head h2,
    body .mc-landing.mc-motion-ready .mc-motion-section:not(.is-motion-inview) .mc-closing__head > p:last-child {
        opacity: 0 !important;
        clip-path: inset(100% 0 0 0) !important;
        transform: translateY(20px) !important;
    }

    body .mc-landing.mc-motion-ready .mc-motion-section .mc-r1-kicker { transition-delay: .04s !important; }
    body .mc-landing.mc-motion-ready .mc-motion-section h2 { transition-delay: .18s !important; }
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-final-preview__head-copy > p:last-child,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-style-composer__head-context,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-composition-intro,
    body .mc-landing.mc-motion-ready .mc-motion-section .mc-closing__head > p:last-child {
        transition-delay: .34s !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-composition-proof .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-closing .mc-closing__proof {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0 round 24px) !important;
        filter: none !important;
        transform: none !important;
        transition:
            opacity .58s linear .12s,
            clip-path 1.06s cubic-bezier(.25, .1, .25, 1) .12s,
            transform 1.06s cubic-bezier(.25, .1, .25, 1) .12s !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-scene-active) .mc-final-preview__preview-column,
    body .mc-landing.mc-motion-ready .mc-style-composer:not(.is-scene-active) .mc-style-composer__preview,
    body .mc-landing.mc-motion-ready .mc-composition-proof:not(.is-scene-active) .mc-composition-preview,
    body .mc-landing.mc-motion-ready .mc-closing:not(.is-scene-active) .mc-closing__proof {
        opacity: 0 !important;
        clip-path: inset(0 0 84% 0 round 24px) !important;
        transform: scale(.975) !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-composition-proof .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-closing .mc-closing__content {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        filter: none !important;
        transform: none !important;
        transition:
            opacity .54s linear .34s,
            clip-path 1s cubic-bezier(.25, .1, .25, 1) .34s,
            transform 1s cubic-bezier(.25, .1, .25, 1) .34s !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-scene-active) .mc-final-preview__decision,
    body .mc-landing.mc-motion-ready .mc-style-composer:not(.is-scene-active) .mc-style-composer__controls,
    body .mc-landing.mc-motion-ready .mc-composition-proof:not(.is-scene-active) .mc-composition-deck,
    body .mc-landing.mc-motion-ready .mc-closing:not(.is-scene-active) .mc-closing__content {
        opacity: 0 !important;
        clip-path: inset(0 88% 0 0) !important;
        transform: translateX(22px) !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker .mc-skin-card,
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__styles > button,
    body .mc-landing.mc-motion-ready .mc-composition-proof [data-mc-composition-row],
    body .mc-landing.mc-motion-ready .mc-closing .mc-closing__policies > div {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0 round 8px) !important;
        filter: none !important;
        transform: none !important;
        transition:
            opacity .36s linear calc(.42s + var(--mc-enter-index, 0) * 42ms),
            clip-path .64s cubic-bezier(.25, .1, .25, 1) calc(.42s + var(--mc-enter-index, 0) * 42ms),
            transform .64s cubic-bezier(.25, .1, .25, 1) calc(.42s + var(--mc-enter-index, 0) * 42ms) !important;
        animation: none !important;
    }

    body .mc-landing.mc-motion-ready .mc-design-picker:not(.is-scene-active) .mc-skin-card,
    body .mc-landing.mc-motion-ready .mc-style-composer:not(.is-scene-active) .mc-style-composer__styles > button,
    body .mc-landing.mc-motion-ready .mc-composition-proof:not(.is-scene-active) [data-mc-composition-row],
    body .mc-landing.mc-motion-ready .mc-closing:not(.is-scene-active) .mc-closing__policies > div {
        opacity: 0 !important;
        clip-path: inset(48% 48% 48% 48% round 8px) !important;
        transform: scale(.94) !important;
    }

    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > * {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        transform: none !important;
        transition:
            opacity .38s linear,
            clip-path .7s cubic-bezier(.25, .1, .25, 1),
            transform .7s cubic-bezier(.25, .1, .25, 1) !important;
    }

    body .mc-landing.mc-motion-ready .mc-style-composer:not(.is-scene-active) .mc-style-composer__controls > * {
        opacity: 0 !important;
        clip-path: inset(0 100% 0 0) !important;
        transform: translateX(18px) !important;
    }

    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > :nth-child(1) { transition-delay: .42s !important; }
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > :nth-child(2) { transition-delay: .54s !important; }
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > :nth-child(3) { transition-delay: .66s !important; }
    body .mc-landing.mc-motion-ready .mc-style-composer .mc-style-composer__controls > :nth-child(4) { transition-delay: .78s !important; }

    body .mc-landing.mc-motion-ready .mc-composition-proof .mc-composition-choice {
        transform: none !important;
        transition: none !important;
    }
}

@keyframes mc-piece-hero {
    0% { opacity: .3; clip-path: inset(0 100% 68% 0); transform: scale(1.025); }
    48% { opacity: .76; clip-path: inset(0 28% 34% 0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}

@keyframes mc-piece-copy {
    from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(22px); }
    to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-hero__bg,
    body .mc-landing .mc-hero__copy > *,
    body .mc-landing.mc-motion-ready .mc-motion-section * {
        animation: none !important;
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Keep the approved hero artwork visually stable. */
body .mc-landing .mc-hero__bg {
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* R47 — editorial reveal: motion only, with the approved layout left untouched. */
@media (prefers-reduced-motion: no-preference) {
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-head {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translateY(18px);
        will-change: opacity, clip-path, transform;
        backface-visibility: hidden;
        transition:
            opacity .46s linear,
            clip-path .9s cubic-bezier(.22, .72, .16, 1),
            transform .9s cubic-bezier(.22, .72, .16, 1);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-head.is-r47-visible {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage .mc-preview-canvas,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage .mc-style-composer__phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage .mc-composition-phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage .mc-closing__proof > img {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 28px);
        transform: translateY(24px) scale(.985);
        will-change: opacity, clip-path, transform;
        backface-visibility: hidden;
        transition:
            opacity .48s linear,
            clip-path .94s cubic-bezier(.22, .72, .16, 1),
            transform .94s cubic-bezier(.22, .72, .16, 1);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage.is-r47-visible .mc-preview-canvas,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage.is-r47-visible .mc-style-composer__phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage.is-r47-visible .mc-composition-phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage.is-r47-visible .mc-closing__proof > img {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 28px);
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage .mc-final-preview__decision,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage .mc-composition-deck,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage .mc-closing__content {
        opacity: 1;
        clip-path: inset(0 10% 0 0);
        transform: translateX(22px);
        transition:
            opacity .42s linear .12s,
            clip-path .88s cubic-bezier(.22, .72, .16, 1) .12s,
            transform .88s cubic-bezier(.22, .72, .16, 1) .12s;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage.is-r47-visible .mc-final-preview__decision,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage.is-r47-visible .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage.is-r47-visible .mc-composition-deck,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-stage.is-r47-visible .mc-closing__content {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-design-picker .mc-r47-stage .mc-skin-card {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 14px);
        transform: scale(.985);
        will-change: opacity, clip-path, transform;
        backface-visibility: hidden;
        transition:
            opacity .32s linear,
            clip-path .64s cubic-bezier(.22, .72, .16, 1),
            transform .64s cubic-bezier(.22, .72, .16, 1);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-design-picker .mc-r47-stage.is-r47-visible .mc-skin-card {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 14px);
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-design-picker .mc-r47-stage.is-r47-visible .mc-skin-card:nth-child(1) { transition-delay: .18s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-design-picker .mc-r47-stage.is-r47-visible .mc-skin-card:nth-child(2) { transition-delay: .25s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-design-picker .mc-r47-stage.is-r47-visible .mc-skin-card:nth-child(3) { transition-delay: .32s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-design-picker .mc-r47-stage.is-r47-visible .mc-skin-card:nth-child(4) { transition-delay: .39s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-design-picker .mc-r47-stage.is-r47-visible .mc-skin-card:nth-child(5) { transition-delay: .46s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-design-picker .mc-r47-stage.is-r47-visible .mc-skin-card:nth-child(6) { transition-delay: .53s; }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-composition-proof .mc-r47-stage [data-mc-composition-row],
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-closing .mc-r47-stage .mc-closing__policies > div {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 8px);
        transform: translateY(12px);
        will-change: opacity, clip-path, transform;
        backface-visibility: hidden;
        transition:
            opacity .3s linear,
            clip-path .58s cubic-bezier(.22, .72, .16, 1),
            transform .58s cubic-bezier(.22, .72, .16, 1);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-composition-proof .mc-r47-stage.is-r47-visible [data-mc-composition-row],
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-closing .mc-r47-stage.is-r47-visible .mc-closing__policies > div {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 8px);
        transform: none;
        transition-delay: calc(.18s + var(--mc-enter-index, 0) * 34ms);
    }

    /* Assigned motion language: layer shuffle / corner gather / piece assembly. */
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-head,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-head {
        opacity: 1;
        clip-path: none;
        transform: none;
        transition: none;
    }

    /* Layer shuffle — copy and preview panels cross briefly, then align. */
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head > * {
        opacity: 0;
        transform: translate3d(-42px, 10px, 0);
        transition:
            opacity .52s ease-out,
            transform .94s cubic-bezier(.22, 1, .36, 1);
        will-change: opacity, transform;
        backface-visibility: hidden;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head > :nth-child(even) {
        transform: translate3d(42px, -8px, 0);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head.is-r47-visible > * {
        opacity: 1;
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head.is-r47-visible > :nth-child(1) { transition-delay: .02s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head.is-r47-visible > :nth-child(2) { transition-delay: .10s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head.is-r47-visible > :nth-child(3) { transition-delay: .18s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head.is-r47-visible > :nth-child(4) { transition-delay: .26s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-head.is-r47-visible > :nth-child(5) { transition-delay: .34s; }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-stage .mc-style-composer__phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-stage .mc-closing__proof > img {
        opacity: 0;
        clip-path: none;
        transform: translate3d(-34px, 12px, 0) scale(.99);
        transition:
            opacity .56s ease-out .10s,
            transform .96s cubic-bezier(.22, 1, .36, 1) .10s;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-stage .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-stage .mc-closing__content {
        opacity: 0;
        clip-path: none;
        transform: translate3d(34px, -8px, 0);
        transition:
            opacity .56s ease-out .18s,
            transform .96s cubic-bezier(.22, 1, .36, 1) .18s;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-stage.is-r47-visible .mc-style-composer__phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-stage.is-r47-visible .mc-closing__proof > img,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-stage.is-r47-visible .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer .mc-r47-stage.is-r47-visible .mc-closing__content {
        opacity: 1;
        clip-path: none;
        transform: none;
    }

    /* Corner gather — 01 copy, preview and cards settle from distinct corners. */
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-final-preview__head-copy {
        opacity: 1;
        clip-path: none;
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-final-preview__head-copy > * {
        opacity: 0;
        transition:
            opacity .5s ease-out,
            transform .88s cubic-bezier(.22, 1, .36, 1);
        will-change: opacity, transform;
        backface-visibility: hidden;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-final-preview__head-copy > :nth-child(1) { transform: translate3d(-30px, -24px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-final-preview__head-copy > :nth-child(2) { transform: translate3d(30px, -24px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-final-preview__head-copy > :nth-child(3) { transform: translate3d(-30px, 24px, 0); }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-head.is-r47-visible .mc-final-preview__head-copy > * {
        opacity: 1;
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-head.is-r47-visible .mc-final-preview__head-copy > :nth-child(2) { transition-delay: .08s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-head.is-r47-visible .mc-final-preview__head-copy > :nth-child(3) { transition-delay: .16s; }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-preview-canvas {
        opacity: 0;
        clip-path: none;
        transform: translate3d(-30px, 24px, 0) scale(.99);
        transition:
            opacity .54s ease-out .08s,
            transform .92s cubic-bezier(.22, 1, .36, 1) .08s;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-final-preview__decision {
        opacity: 0;
        clip-path: none;
        transform: translate3d(30px, 24px, 0);
        transition:
            opacity .54s ease-out .14s,
            transform .92s cubic-bezier(.22, 1, .36, 1) .14s;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage.is-r47-visible .mc-preview-canvas,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage.is-r47-visible .mc-final-preview__decision {
        opacity: 1;
        clip-path: none;
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-skin-card {
        clip-path: none;
        transition:
            opacity .42s ease-out,
            transform .7s cubic-bezier(.22, 1, .36, 1);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-skin-card:nth-child(1),
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-skin-card:nth-child(5) { transform: translate3d(-22px, -18px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-skin-card:nth-child(2) { transform: translate3d(22px, -18px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-skin-card:nth-child(3),
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-skin-card:nth-child(6) { transform: translate3d(22px, 18px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage .mc-skin-card:nth-child(4) { transform: translate3d(-22px, 18px, 0); }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner .mc-r47-stage.is-r47-visible .mc-skin-card {
        opacity: 1;
        clip-path: none;
        transform: none;
    }

    /* Piece assembly — 03 is completed in a clear hierarchy from copy to rows. */
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-head > * {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateY(20px);
        transition:
            opacity .42s ease-out,
            clip-path .72s cubic-bezier(.16, 1, .3, 1),
            transform .72s cubic-bezier(.16, 1, .3, 1);
        will-change: opacity, clip-path, transform;
        backface-visibility: hidden;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-head.is-r47-visible > * {
        opacity: 1;
        clip-path: inset(0);
        transform: none;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-head.is-r47-visible > :nth-child(1) { transition-delay: .04s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-head.is-r47-visible > :nth-child(2) { transition-delay: .16s; }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-head.is-r47-visible > :nth-child(3) { transition-delay: .30s; }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-stage .mc-composition-phone {
        opacity: 0;
        clip-path: inset(0 0 82% 0 round 28px);
        transform: scale(.975);
        transition:
            opacity .5s ease-out .18s,
            clip-path .9s cubic-bezier(.16, 1, .3, 1) .18s,
            transform .9s cubic-bezier(.16, 1, .3, 1) .18s;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-stage .mc-composition-deck {
        opacity: 0;
        clip-path: inset(0 86% 0 0);
        transform: translateX(20px);
        transition:
            opacity .48s ease-out .28s,
            clip-path .86s cubic-bezier(.16, 1, .3, 1) .28s,
            transform .86s cubic-bezier(.16, 1, .3, 1) .28s;
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-stage.is-r47-visible .mc-composition-phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces .mc-r47-stage.is-r47-visible .mc-composition-deck {
        opacity: 1;
        clip-path: inset(0);
        transform: none;
    }

    /* Reverse journey — upward re-entry uses the opposite origin, without changing settled layout. */
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-head:not(.is-r47-visible) > * {
        transform: translate3d(42px, -10px, 0);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-head:not(.is-r47-visible) > :nth-child(even) {
        transform: translate3d(-42px, 8px, 0);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-style-composer__phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-closing__proof > img {
        transform: translate3d(34px, -12px, 0) scale(.99);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-closing__content {
        transform: translate3d(-34px, 8px, 0);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-head:not(.is-r47-visible) .mc-final-preview__head-copy > :nth-child(1) { transform: translate3d(30px, 24px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-head:not(.is-r47-visible) .mc-final-preview__head-copy > :nth-child(2) { transform: translate3d(-30px, 24px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-head:not(.is-r47-visible) .mc-final-preview__head-copy > :nth-child(3) { transform: translate3d(30px, -24px, 0); }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-preview-canvas {
        transform: translate3d(30px, -24px, 0) scale(.99);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-final-preview__decision {
        transform: translate3d(-30px, -24px, 0);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-skin-card:nth-child(1),
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-skin-card:nth-child(5) { transform: translate3d(22px, 18px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-skin-card:nth-child(2) { transform: translate3d(-22px, 18px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-skin-card:nth-child(3),
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-skin-card:nth-child(6) { transform: translate3d(-22px, -18px, 0); }
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-skin-card:nth-child(4) { transform: translate3d(22px, -18px, 0); }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces.is-r47-upward .mc-r47-head:not(.is-r47-visible) > * {
        clip-path: inset(0 0 100% 0);
        transform: translateY(-20px);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-composition-phone {
        clip-path: inset(82% 0 0 0 round 28px);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-composition-deck {
        clip-path: inset(0 0 0 86%);
        transform: translateX(-20px);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces.is-r47-upward .mc-r47-stage:not(.is-r47-visible) [data-mc-composition-row] {
        clip-path: inset(100% 0 0 0 round 8px);
        transform: translateY(-12px);
    }

    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-head:not(.is-r47-visible) > *,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-style-composer__phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-closing__proof > img,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-layer.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-closing__content,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-head:not(.is-r47-visible) .mc-final-preview__head-copy > *,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-preview-canvas,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-final-preview__decision,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-corner.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-skin-card,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces.is-r47-upward .mc-r47-head:not(.is-r47-visible) > *,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-composition-phone,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces.is-r47-upward .mc-r47-stage:not(.is-r47-visible) .mc-composition-deck,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-motion-pieces.is-r47-upward .mc-r47-stage:not(.is-r47-visible) [data-mc-composition-row] {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-r47-head,
    body .mc-landing .mc-r47-stage,
    body .mc-landing .mc-r47-stage * {
        animation: none !important;
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* R5.1 — responsive catalog, preview, feature-map, and color-chip owner. */
body .mc-landing .mc-preview-color-rail {
    gap: 4px;
}

body .mc-landing .mc-preview-color-rail button {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

body .mc-landing .mc-preview-color-rail__swatch {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(37, 40, 45, .16);
}

body .mc-landing .mc-preview-color-rail button[aria-pressed='true'],
body .mc-landing .mc-preview-color-rail button.is-selected {
    outline: 0;
    background: transparent;
    box-shadow: none;
}

body .mc-landing .mc-preview-color-rail button[aria-pressed='true'] .mc-preview-color-rail__swatch::after,
body .mc-landing .mc-preview-color-rail button.is-selected .mc-preview-color-rail__swatch::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--mc-swatch-mark, #181817);
    content: '✓';
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

body .mc-landing .mc-preview-color-rail button:focus-visible {
    outline: 2px solid var(--mc-focus, #1957d2);
    outline-offset: -2px;
}

body .mc-landing .mc-preview-color-rail__more {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(37, 40, 45, .68);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-preview-color-rail button.mc-preview-color-rail__more {
    border: 0;
    background: transparent;
    color: rgba(37, 40, 45, .68);
}

body .mc-landing .mc-preview-color-rail__more::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(37, 40, 45, .14);
    border-radius: 6px;
    background: rgba(255, 255, 255, .36);
    content: '';
    transform: translate(-50%, -50%);
}

body .mc-landing .mc-preview-color-rail__more-label {
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-preview-color-rail .mc-preview-color-rail__swatch {
        box-shadow: 0 0 0 1px rgba(37, 40, 45, .16);
    }
}

@media (min-width: 1200px) {
    body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-preview-color-rail {
        top: 32px;
        right: 100%;
        left: auto;
        width: 48px;
        box-sizing: border-box;
        gap: 4px;
        padding: 6px 3px;
        border: 1px solid rgba(37, 40, 45, .10);
        border-radius: 10px 0 0 10px;
        background: #e9eaeb;
        transform: none;
        box-shadow: none;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column > .mc-preview-color-rail button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 6px;
    }
}

body .mc-landing .mc-mobile-result-summary {
    display: none;
}

body .mc-landing .mc-composition-preview-dock {
    display: none;
}

@media (max-width: 1023px) {
    body .mc-landing {
        --mc-flow-gutter: 20px;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-style-composer__inner,
    body .mc-landing .mc-r1-guest-inner {
        width: calc(100% - (2 * var(--mc-flow-gutter)));
        max-width: none;
        margin-inline: auto;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy,
    body .mc-landing .mc-style-composer__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-style-composer__workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy > *,
    body .mc-landing .mc-style-composer__head > * {
        grid-column: 1;
        min-width: 0;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy > .mc-r1-kicker,
    body .mc-landing .mc-design-picker .mc-final-preview__head-copy > h2,
    body .mc-landing .mc-design-picker .mc-final-preview__head-copy > p:not(.mc-r1-kicker) {
        grid-column: 1;
        grid-row: auto;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column {
        display: none;
    }

    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-composition-preview {
        display: none;
    }

    body .mc-landing .mc-mobile-result-summary {
        display: grid;
        width: 100%;
        min-width: 0;
        padding: 18px;
        border: 1px solid rgba(24, 24, 23, .14);
        border-radius: 12px;
        background: #fff;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 16px;
        align-items: center;
    }

    body .mc-landing .mc-mobile-result-summary > span,
    body .mc-landing .mc-mobile-result-summary > p {
        grid-column: 1;
        margin: 0;
        color: #706b65;
        font-size: 12px;
        line-height: 1.5;
    }

    body .mc-landing .mc-mobile-result-summary > strong {
        grid-column: 1;
        overflow: hidden;
        font-size: 17px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .mc-landing .mc-mobile-result-summary > button {
        grid-column: 2;
        grid-row: 1 / span 3;
        min-width: 122px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid #272724;
        border-radius: 7px;
        background: #272724;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__decision,
    body .mc-landing .mc-design-picker .mc-skin-rail,
    body .mc-landing .mc-design-picker .mc-skin-rail__inner,
    body .mc-landing .mc-design-picker .mc-skin-rail__menu,
    body .mc-landing .mc-design-picker .mc-catalog-search,
    body .mc-landing .mc-design-picker .mc-skin-rail__list,
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-style-composer__controls {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-inline: 0;
    }

    body .mc-landing .mc-design-picker .mc-skin-rail__inner {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
        overflow: visible;
    }

    body .mc-landing .mc-design-picker .mc-skin-rail__menu { order: 1; }
    body .mc-landing .mc-design-picker .mc-catalog-search { order: 2; }
    body .mc-landing .mc-design-picker .mc-skin-rail__list { order: 3; }
    body .mc-landing .mc-design-picker .mc-catalog-compact-more { order: 4; }

    body .mc-landing .mc-style-composer__phone,
    body .mc-landing .mc-style-composer__identity,
    body .mc-landing .mc-style-composer__actions {
        width: min(100%, 360px);
        max-width: 360px;
        margin-inline: auto;
    }

    body .mc-landing .mc-style-composer__phone {
        height: clamp(220px, 34svh, 300px);
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
    }

    body .mc-landing .mc-style-composer__mount .ed-preview__frame {
        overflow-y: auto;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
        pointer-events: auto;
    }

    body.mc-mobile-preview-open {
        overflow: hidden;
        touch-action: none;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-overlay.is-open {
        position: fixed;
        inset: 0;
        display: grid;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding: 0;
        background: #fff;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 0;
        align-items: stretch;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-header {
        display: grid;
        min-height: calc(44px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 12px 0;
        border-bottom: 1px solid #e8e5e1;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        grid-template-rows: 22px 22px;
        align-items: center;
        background: #fff;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-header > span,
    body.mc-mobile-preview-open .mc-mobile-preview-header > strong {
        grid-column: 2;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-header > span {
        align-self: end;
        color: #817b74;
        font-size: 10px;
        font-weight: 600;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-header > strong {
        align-self: start;
        color: #181817;
        font-size: 13px;
        line-height: 18px;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-close {
        position: relative;
        top: auto;
        right: auto;
        grid-column: 1;
        grid-row: 1 / span 2;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-close::before,
    body.mc-mobile-preview-open .mc-mobile-preview-close::after {
        background: #181817;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-card {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        grid-row: 3;
        align-self: stretch;
        overflow: hidden;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-mount,
    body.mc-mobile-preview-open .mc-mobile-preview-mount > .ed-preview,
    body.mc-mobile-preview-open .mc-mobile-preview-mount .ed-preview__frame {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-mount .ed-preview__frame {
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    body.mc-mobile-preview-open .mc-preview-color-rail--mobile:not([hidden]) {
        position: static;
        display: flex;
        width: max-content;
        max-width: calc(100% - 24px);
        min-height: 44px;
        padding: 0;
        margin-inline: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        grid-row: 2;
        overflow-x: auto;
        transform: none;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-action {
        display: none !important;
    }

    body .mc-landing .mc-composition-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body .mc-landing .mc-composition-card__copy strong,
    body .mc-landing .mc-composition-card__copy small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-break: keep-all;
    }

    html.mc-motion-js body .mc-landing.mc-motion-ready .mc-skin-card,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-skin-card,
    html.mc-motion-js body .mc-landing.mc-motion-ready .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-motion-ready [data-mc-composition-row],
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready [data-mc-composition-row],
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-head,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-head > *,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-r47-head .mc-final-preview__head-copy > *,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-final-preview__decision,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-style-composer__controls,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-composition-deck,
    html.mc-motion-js body .mc-landing.mc-r47-motion-ready .mc-mobile-result-summary {
        visibility: visible !important;
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body .mc-landing .mc-hero {
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
    }
}

@media (max-width: 359px) {
    body .mc-landing { --mc-flow-gutter: 16px; }
}

/* R5.4 mobile completion: preserve the row-level PC editing contract at mobile widths. */
@media (max-width: 1023px) {
    body .mc-landing .mc-mobile-result-summary > button:disabled {
        border-color: #d8d4ce;
        background: #efede9;
        color: #8b857d;
        cursor: default;
    }

    body .mc-landing .mc-composition-deck__foot {
        width: 100%;
        min-height: 0;
        padding: 8px 0 4px;
    }

    body .mc-landing .mc-composition-list {
        width: 100%;
        overflow-anchor: none;
    }

    body .mc-landing .mc-composition-proof {
        padding-bottom: 48px !important;
    }
}

/* R5.5 mobile composition: keep the PC card/drag contract and move only preview access. */
@media (max-width: 860px) {
    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) {
        position: relative;
        display: block;
        min-height: 112px;
        grid-column: auto;
    }

    body .mc-landing .mc-composition-list > li .mc-composition-card,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        min-height: 112px;
        padding: 12px 44px 12px 10px;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        align-content: center;
    }

    body .mc-landing .mc-composition-card__copy {
        grid-column: 2;
    }

    body .mc-landing .mc-composition-card__copy small {
        display: block;
        font-size: 11px;
    }

    body .mc-landing .mc-composition-state {
        display: block;
        min-width: 0;
        padding: 0;
        grid-column: 2;
        justify-self: start;
        background: transparent;
        box-shadow: none;
        font-size: 11px;
        text-align: left;
    }

    body .mc-landing .mc-composition-order-tools,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-order-tools {
        position: absolute;
        z-index: 3;
        top: 8px;
        right: 4px;
        display: grid;
        width: 44px;
        min-height: 44px;
        place-items: center;
        border: 1px solid #d7d3ce;
        border-radius: 50%;
        background: #e9e6e0;
    }

    body .mc-landing .mc-composition-order-tools::before {
        position: absolute;
        color: #25282d;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -4px;
        line-height: 1;
        content: '⋮⋮';
        pointer-events: none;
    }

    body .mc-landing .mc-composition-order-tools .mc-composition-handle {
        display: grid !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        width: 44px !important;
        min-width: 44px;
        height: 44px !important;
        min-height: 44px;
        border: 0 !important;
        border-radius: 50%;
        background: transparent !important;
    }

    body .mc-landing .mc-composition-order-tools .mc-composition-handle > span {
        visibility: hidden;
    }

    body .mc-landing .mc-composition-list > li.is-selected .mc-composition-order-tools [data-mc-composition-move],
    body .mc-landing .mc-composition-order-tools [data-mc-composition-move] {
        display: none;
    }

    body .mc-landing .mc-composition-proof {
        padding-bottom: 48px !important;
    }
}

@media (max-width: 1023px) {
    body .mc-landing .mc-composition-preview-dock {
        display: flex;
        width: 100%;
        min-height: 52px;
        padding: 0 16px;
        margin-top: 16px;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #272724;
        border-radius: 10px;
        background: #272724;
        color: #fff;
        font-size: 12px;
    }

    body .mc-landing .mc-composition-preview-dock span,
    body .mc-landing .mc-composition-preview-dock strong {
        color: inherit;
        font-size: inherit;
        line-height: 1.4;
    }

    body .mc-landing .mc-composition-preview-dock strong {
        font-weight: 700;
    }

    body.mc-mobile-preview-open .mc-composition-preview-dock {
        display: none !important;
    }
}

@media (max-width: 359px) {
    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) {
        min-height: 104px;
    }

    body .mc-landing .mc-composition-list > li .mc-composition-card,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        min-height: 104px;
        padding: 10px 44px 10px 8px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 4px 6px;
    }

    body .mc-landing .mc-composition-choice {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    body .mc-landing .mc-composition-card__copy {
        grid-column: 1 / -1;
    }

    body .mc-landing .mc-composition-card__copy strong {
        font-size: 14px;
        line-height: 1.35;
    }

    body .mc-landing .mc-composition-card__copy small {
        display: none;
    }

    body .mc-landing .mc-composition-state {
        grid-column: 1 / -1;
        font-size: 10px;
    }
}

@media (max-width: 359px) {
    body .mc-landing .mc-mobile-result-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 16px;
    }

    body .mc-landing .mc-mobile-result-summary > strong {
        display: -webkit-box;
        grid-column: 1;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
    }

    body .mc-landing .mc-mobile-result-summary > button {
        width: 100%;
        margin-top: 8px;
        grid-column: 1;
        grid-row: auto;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-meta .mc-badge {
        display: none;
    }

    body .mc-landing .mc-style-customize__tabs button {
        padding-inline: 0 !important;
        font-size: 12px !important;
        letter-spacing: -.06em;
        white-space: nowrap;
    }

}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    body .mc-landing { --mc-flow-gutter: 24px; }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__inner,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__menu,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-search,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__list,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-grid {
        width: min(100%, 600px);
        max-width: 600px;
        margin-inline: auto;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__inner,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__list {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible !important;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-card {
        width: auto;
        min-width: 0;
        height: auto;
        flex: none;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more {
        display: block;
        width: min(100%, 600px);
        margin-inline: auto;
        padding-top: 20px;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more .mc-catalog-expand {
        display: inline-flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: center;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-gallery-more {
        display: none;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-gallery-more {
        display: block;
    }

    body .mc-landing .mc-style-composer__phone {
        height: clamp(300px, calc(86.27vw - 362.55px), 520px);
    }
}

/* R5.7 — align landing selection feedback with the V5 editor form system. */
@media (max-width: 860px) {
    body.mc-landing-page .head_logo_row_block h1 > a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }

body .mc-landing .mc-style-option__check {
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1px solid #c7ccd2;
    border-radius: 50%;
    flex: 0 0 14px;
    background: #fff;
    color: transparent;
    font-size: 0;
}

body .mc-landing .mc-style-option.is-selected .mc-style-option__check {
    border: 4px solid var(--bj-ink, #181817);
    background: #fff;
    color: transparent;
}

body .mc-landing .mc-custom-inline button,
body .mc-landing .mc-custom-visuals button,
body .mc-landing .mc-custom-visuals--background button,
body .mc-landing .mc-custom-visuals--calendar button {
    border-width: 1px;
    box-shadow: none;
}

body .mc-landing .mc-custom-inline button {
    border-radius: 7px;
}

body .mc-landing .mc-custom-visuals button,
body .mc-landing .mc-custom-visuals--background button,
body .mc-landing .mc-custom-visuals--calendar button {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: 6px;
    border-radius: 6px;
}

body .mc-landing .mc-custom-inline button[data-mc-custom-font] {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: 6px;
    border-radius: 6px;
}

body .mc-landing .mc-custom-inline button[data-mc-custom-color] {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: 6px;
    border-radius: 6px;
    flex-direction: column;
    gap: 6px;
}

body .mc-landing .mc-custom-inline--color i {
    width: 24px;
    height: 24px;
}

body .mc-landing .mc-custom-visuals img,
body .mc-landing .mc-custom-visuals button > span,
body .mc-landing .mc-custom-visuals--background i,
body .mc-landing .mc-custom-visuals--calendar img,
body .mc-landing .mc-custom-visuals--calendar button > span {
    height: 32px;
}

body .mc-landing .mc-custom-visuals button > small {
    display: none;
}

body .mc-landing .mc-custom-inline,
body .mc-landing .mc-custom-visuals,
body .mc-landing .mc-custom-visuals--background,
body .mc-landing .mc-custom-visuals--calendar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

body .mc-landing .mc-custom-inline button.is-active,
body .mc-landing .mc-custom-visuals button.is-active {
    border-color: var(--bj-ink, #181817);
    box-shadow: none;
}

body .mc-landing .mc-custom-visuals button.is-active::after {
    display: none;
    content: none;
}

body .mc-landing .mc-style-option:focus-visible,
body .mc-landing .mc-custom-inline button:focus-visible,
body .mc-landing .mc-custom-visuals button:focus-visible {
    outline: 1px solid #79736b;
    outline-offset: 2px;
}

body .mc-landing .mc-style-customize__tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 42px;
    overflow: visible;
    border-top: 0;
    border-bottom: 1px solid var(--bj-line, #ddd9d2);
}

body .mc-landing .mc-style-customize__tabs button {
    min-width: 0;
    min-height: 42px;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--bj-muted, #66635e);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

body .mc-landing .mc-style-customize__tabs button[aria-selected="true"] {
    border-bottom-color: var(--bj-ink, #181817);
    color: var(--bj-ink, #181817);
    font-weight: 600;
}

body .mc-landing .mc-style-customize__tabs button:focus-visible {
    outline: 1px solid var(--bj-ink, #181817);
    outline-offset: -2px;
    box-shadow: none;
}

body .mc-landing .mc-style-customize__tabs button[aria-selected="true"]::after,
body .mc-landing .mc-style-customize__tabs button:focus-visible::after {
    display: none;
    content: none;
}

    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-option:hover,
    body .mc-landing .mc-style-option.is-selected {
        border-radius: 8px;
    }

    /* Mobile has no persistent inline preview. Keep the decision flow next to
       the controls: choose -> review the current result -> open full preview. */
    body .mc-landing .mc-style-composer__controls {
        order: 1;
    }

    body .mc-landing .mc-style-composer__mobile-summary {
        order: 2;
    }

    body .mc-landing .mc-style-composer__summary {
        display: none;
    }

    /* The bottom preview dock already carries the selected count and preview
       action, so the duplicate card above the function list adds noise. */
    body .mc-landing .mc-composition-mobile-summary {
        display: none;
    }

    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) {
        min-height: 92px;
    }

    body .mc-landing .mc-composition-list > li .mc-composition-card,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        min-height: 92px;
        padding: 10px 38px 10px 8px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 3px 7px;
    }

    body .mc-landing .mc-composition-choice {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    body .mc-landing .mc-composition-card__copy strong {
        font-size: 14px;
        line-height: 1.35;
    }

    body .mc-landing .mc-composition-card__copy small {
        overflow: hidden;
        font-size: 10px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .mc-landing .mc-composition-state {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 10px !important;
        line-height: 1.35;
    }

    body .mc-landing .mc-composition-state::before {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #b6b0a8;
        content: '';
        flex: 0 0 5px;
    }

    body .mc-landing .mc-composition-list > li.is-selected .mc-composition-state::before {
        background: #25282d;
    }

    body .mc-landing .mc-composition-order-tools,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-order-tools {
        top: 2px;
        right: 0;
        width: 44px;
        height: 44px;
        min-height: 44px;
        border: 0;
        background: transparent;
    }

    body .mc-landing .mc-composition-order-tools::before {
        display: grid;
        width: 30px;
        height: 30px;
        border: 1px solid #d7d3ce;
        border-radius: 50%;
        background: #f2f0ec;
        color: #25282d;
        content: '\22EE';
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0;
        place-items: center;
    }

    /* Direction-aware desktop motion can leave the entire closing message
       transparent while a narrow viewport is scrolling. Mobile keeps the
       content present and lets the page movement provide the transition. */
    html.mc-motion-js body .mc-landing .mc-closing .mc-closing__content,
    html.mc-motion-js body .mc-landing .mc-closing img,
    html.mc-motion-js body .mc-landing .mc-closing .mc-closing__policies > div {
        visibility: visible !important;
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

}

@media (max-width: 359px) {
    body .mc-landing .mc-style-customize__tabs button {
        font-size: 11px !important;
        letter-spacing: -.04em;
    }

    body .mc-landing .mc-composition-list > li,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']),
    body .mc-landing .mc-composition-list > li .mc-composition-card,
    body .mc-landing .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card {
        min-height: 88px;
    }
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-final-preview__decision {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail,
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__inner {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-rail__list {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 0;
        overflow: visible !important;
        overscroll-behavior: auto;
        touch-action: pan-y;
        scrollbar-gutter: auto;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-grid {
        display: grid;
        width: 100%;
        height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
        overflow: visible;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-card {
        width: auto;
        min-width: 0;
        height: auto;
        flex: none;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-gallery-more {
        display: none;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        padding-top: 20px;
    }

    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-catalog-compact-more .mc-catalog-expand {
        display: inline-flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: center;
    }

    body.mc-catalog-expanded {
        overflow: hidden;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-final-preview__decision {
        position: fixed;
        z-index: 1100;
        inset: 0;
        width: 100%;
        height: 100dvh;
        max-width: none;
        padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
        background: #1a1a18;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail,
    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail__inner {
        width: 100%;
        height: auto;
        min-height: 0;
        max-width: none;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail {
        display: grid;
        height: 100%;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__head {
        display: flex;
        width: 100%;
        min-height: 56px;
        margin: 0;
        align-items: center;
        justify-content: space-between;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__close {
        display: inline-flex;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    body.mc-catalog-expanded .mc-catalog-expanded__title > span {
        display: none;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail__inner {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        overflow: hidden;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-rail__list {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-anchor: none;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-catalog-compact-more {
        display: none;
    }

    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-gallery-more {
        display: block;
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-card {
        width: auto;
        min-width: 0;
        flex: none;
    }
}

@media (max-width: 1023px) and (orientation: landscape) {
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-card {
        width: auto;
        min-width: 0;
        flex: none;
    }

    body .mc-landing .mc-style-composer__preview {
        position: static;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    body:not(.mc-catalog-expanded) .mc-landing .mc-design-picker .mc-skin-grid,
    body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-skin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
    body .mc-landing .mc-style-composer__phone {
        height: min(
            clamp(300px, calc(86.27vw - 362.55px), 520px),
            clamp(180px, calc(22.22svh + 108.89px), 220px)
        );
    }

    body.mc-mobile-preview-open .mc-mobile-preview-overlay.is-open {
        gap: 4px;
    }

    body.mc-mobile-preview-open .mc-preview-color-rail--mobile:not([hidden]) {
        padding: 0;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-action .mc-mobile-preview-direct {
        min-height: 48px;
    }
}

@media (max-width: 1023px) and (orientation: landscape) and (min-height: 501px) {
    body .mc-landing .mc-style-composer__phone {
        height: min(
            clamp(300px, calc(86.27vw - 362.55px), 520px),
            clamp(220px, calc(111.94svh - 339.70px), 780px)
        );
    }
}

@media (max-width: 767px) and (orientation: landscape) and (max-height: 500px) {
    body .mc-landing .mc-hero__copy {
        padding-top: 24px;
        padding-bottom: 20px;
    }

    body .mc-landing .mc-hero__copy h1 { font-size: 28px; }
    body .mc-landing .mc-hero__copy > .mc-r1-hero-lede { margin-top: 16px; }
    body .mc-landing .mc-hero__cta { margin-top: 16px; }
    body .mc-landing .mc-hero__bg { height: min(50svh, 180px); }
}

@media (max-width: 1023px) and (orientation: portrait) and (min-height: 700px) {
    body .mc-landing .mc-style-composer__preview {
        position: static;
    }
}

/* R8 — 모바일 첫 화면을 텍스트/이미지 분할형이 아닌 하나의 사진 히어로로 연결한다. */
@media (max-width: 767px) and (orientation: portrait) {
    body .mc-landing .mc-hero {
        display: block;
        min-height: clamp(720px, calc(100svh - var(--mc-r1-h, 56px)), 800px);
        position: relative;
        overflow: hidden;
        background: #f7f7f5;
        isolation: isolate;
    }

    body .mc-landing .mc-hero::after {
        content: '';
        display: block;
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(249, 248, 245, .94) 0%,
            rgba(249, 248, 245, .78) 34%,
            rgba(249, 248, 245, .28) 55%,
            rgba(249, 248, 245, 0) 72%
        );
        pointer-events: none;
    }

    body .mc-landing .mc-hero__bg {
        width: 100%;
        height: 94%;
        position: absolute;
        z-index: 0;
        inset: auto 0 0;
        object-fit: cover;
        object-position: 56% bottom;
    }

    body .mc-landing .mc-hero__copy {
        width: calc(100% - 40px);
        position: relative;
        z-index: 2;
        margin: 0 auto;
        padding: 46px 0 32px;
        background: transparent;
    }
}

@media (min-width: 1024px) {
    body .mc-landing {
        --mc-flow-gutter: clamp(24px, 4vw, 32px);
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-style-composer__inner {
        width: min(1000px, calc(100% - (2 * var(--mc-flow-gutter))));
        max-width: none;
        margin-inline: auto;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head-copy,
    body .mc-landing .mc-style-composer__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-style-composer__workspace {
        grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
        gap: min(4%, 40px);
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column,
    body .mc-landing .mc-design-picker .mc-final-preview__decision,
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-style-composer__controls,
    body .mc-landing .mc-style-composer__actions {
        width: 100%;
        min-width: 0;
        margin-inline: 0;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__preview-column,
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-style-composer__actions {
        max-width: 360px;
    }

    body .mc-landing .mc-design-picker .mc-final-preview__decision,
    body .mc-landing .mc-style-composer__controls {
        max-width: 600px;
    }

    body .mc-landing .mc-style-composer__phone {
        width: 100%;
        max-width: 360px;
        height: min(
            clamp(520px, calc(100vw - 504px), 780px),
            calc(100svh - var(--mc-header-h, 0px) - 32px)
        );
        min-height: 360px;
        aspect-ratio: auto;
    }
}

@media (min-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
    body .mc-landing .mc-style-composer__phone {
        height: min(
            clamp(520px, calc(100vw - 504px), 780px),
            clamp(180px, calc(22.22svh + 108.89px), 220px)
        );
        min-height: 0;
    }
}

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 501px) {
    body .mc-landing .mc-style-composer__phone {
        height: min(
            clamp(520px, calc(100vw - 504px), 780px),
            clamp(220px, calc(111.94svh - 339.70px), 780px)
        );
        min-height: 0;
    }
}

/* The full-screen catalog is fixed inside motion sections that normally clip
   their children. Release that clipping at every responsive width. */
body.mc-catalog-expanded .mc-landing,
body.mc-catalog-expanded .mc-landing__main,
body.mc-catalog-expanded .mc-landing .mc-design-picker,
body.mc-catalog-expanded .mc-landing .mc-final-preview__workspace {
    overflow: visible !important;
}

body.mc-catalog-expanded .mc-landing .mc-design-picker {
    position: fixed !important;
    z-index: 99999 !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-gallery-more {
    display: block !important;
}

/* Mobile owns one persistent invitation entry. The legacy workspace decides
   whether that entry continues in V4 or V5 and presents its transition guide. */
.mc-mobile-entry-dock {
    display: none;
}

@media (max-width: 767px) {
    /* iOS WebKit can over-zoom lazy images when a grid thumbnail combines
       a fixed box, height:100% and object-fit. Let the invitation image keep
       its own ratio so the whole skin remains visible in both catalog modes. */
    body .mc-landing .mc-design-picker .mc-skin-thumb {
        height: auto !important;
        aspect-ratio: auto !important;
    }

    body .mc-landing .mc-design-picker .mc-skin-thumb img {
        display: block;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 640 / 1138;
        object-fit: initial !important;
    }

    body .mc-landing .mc-closing__proof img {
        width: min(282px, 94%);
        margin-inline: auto;
    }

    body .mc-landing .mc-hero__cta,
    body .mc-landing .mc-unified-entry,
    body .mc-landing .mc-closing__action,
    body .mc-landing .mc-style-composer__actions {
        display: none !important;
    }

}

/* Shared landing entry: same control on desktop, tablet and mobile. */
    body.mc-landing-page .mc-mobile-entry-dock {
        display: block;
        position: fixed;
        z-index: 178;
        right: 16px;
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        left: 16px;
        box-sizing: border-box;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    body.mc-landing-page .mc-mobile-entry-dock__button {
        display: flex;
        position: relative;
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        padding: 0 48px;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: var(--bj-control-radius, 8px);
        background: var(--bj-charcoal, #1a1a18);
        color: var(--bj-paper, #fbfaf7);
        font-size: var(--bj-type-action, 16px);
        font-weight: var(--bj-type-action-weight, 700);
        line-height: var(--bj-type-action-line, 1.5);
        letter-spacing: normal;
        text-decoration: none;
        box-shadow: 0 0 0 1px rgba(24, 24, 23, .18), 0 10px 28px rgba(0, 0, 0, .28);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        pointer-events: auto;
    }

    body.mc-landing-page .mc-mobile-entry-dock__button > span {
        overflow: hidden;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mc-landing-page .mc-mobile-entry-dock__button > i {
        display: grid;
        position: absolute;
        top: 50%;
        right: 9px;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 50%;
        font-size: 19px;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        transform: translateY(-50%);
    }

    body.mc-landing-page .mc-mobile-entry-dock__button:active {
        background: rgba(8, 8, 10, .98);
    }

    body.mc-catalog-expanded .mc-mobile-entry-dock,
    body.mc-mobile-preview-open .mc-mobile-entry-dock {
        display: none;
    }

/* 전체 목록 오버레이 — 스크롤 등장 시작 상태 해제.
   카드는 opacity:0 + clip-path 로 시작해 IntersectionObserver 가 화면 진입 시 풀어준다.
   그런데 오버레이(position:fixed)로 열면 그 관찰이 걸리지 않아 0 에 머물러 검은 화면이 된다.
   모바일(<=1023px)에는 같은 취지의 오버라이드가 이미 있고, 데스크톱에만 없었다.
   will-change 도 함께 해제한다 — 카드 403장에 GPU 레이어를 미리 잡으면 전환이 버벅인다. */
body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-final-preview__decision,
body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-r47-stage,
body.mc-catalog-expanded .mc-landing .mc-design-picker .mc-r47-stage .mc-skin-card {
    visibility: visible !important;
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
}

/* Tablet widths also replace the persistent PC preview with the full-screen
   preview handoff, so they use the same decision order and visibility guard. */
@media (min-width: 861px) and (max-width: 1023px) {
    body .mc-landing .mc-style-composer__controls {
        order: 1;
    }

    body .mc-landing .mc-style-composer__mobile-summary {
        order: 2;
    }

    body .mc-landing .mc-style-composer__summary,
    body .mc-landing .mc-composition-mobile-summary {
        display: none;
    }

    html.mc-motion-js body .mc-landing .mc-closing .mc-closing__content,
    html.mc-motion-js body .mc-landing .mc-closing img,
    html.mc-motion-js body .mc-landing .mc-closing .mc-closing__policies > div {
        visibility: visible !important;
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* HOME-LANDING-MOBILE-REFLOW-R2
   Mobile is one continuous builder: design -> mood/detail -> guest composition. */
.mc-mobile-step-rail,
.mc-mobile-selection-summary,
.mc-step-complete-summary,
.mc-composition-overview,
.mc-completion-summary,
.mc-composition-layer__bar,
.mc-composition-layer__backdrop,
.mc-composition-layer__handle,
.mc-composition-filter,
.mc-composition-final-confirm,
.mc-compact-preview-open,
.mc-style-option__proof {
    display: none;
}

.mc-composition-layer__sheet { display: contents; }

body .mc-landing .mc-closing__more { display: contents; }
body .mc-landing .mc-closing__more > summary { display: none; }
body .mc-landing .mc-closing__more > summary:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (max-width: 1023px) {
    body .mc-landing {
        --mc-r2-gutter: 20px;
        --mc-r2-section-y: 80px;
        --mc-ui-title: 15px;
        --mc-ui-body: 14px;
        --mc-ui-caption: 12px;
        --mc-ui-target: 44px;
        --mc-ui-disclosure: 62px;
        --mc-ui-control-radius: 4px;
        --mc-ui-choice-radius: 6px;
        --mc-ui-line: #e6e8ec;
        --mc-ui-ink: #25282d;
    }

    body .mc-landing #mc-final-preview,
    body .mc-landing #mc-style-composer,
    body .mc-landing #mc-composition-proof { scroll-margin-top: calc(var(--mc-r1-h, 56px) + 8px); }

    body .mc-landing .mc-hero {
        min-height: clamp(520px, calc(100svh - var(--mc-r1-h, 56px) - 24px), 760px);
    }

    body .mc-landing .mc-hero__copy {
        width: calc(100% - (2 * var(--mc-r2-gutter)));
        padding-top: clamp(34px, 6vh, 52px);
    }

    body .mc-landing .mc-mobile-step-rail {
        display: grid;
        position: relative;
        z-index: 8;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        min-height: 58px;
        padding: 0 var(--mc-r2-gutter);
        border-top: 1px solid #e3e0da;
        border-bottom: 1px solid #e3e0da;
        background: rgba(255,255,255,.96);
    }

    body .mc-landing .mc-mobile-step-rail a {
        display: grid;
        position: relative;
        grid-template-columns: 22px auto;
        grid-template-rows: 24px 12px;
        min-width: 0;
        min-height: 56px;
        align-items: center;
        justify-content: center;
        column-gap: 7px;
        color: #66635e;
        text-decoration: none;
    }

    body .mc-landing .mc-mobile-step-rail a + a::before {
        width: 18px;
        height: 1px;
        margin-right: 4px;
        background: #d5d1ca;
        content: '';
    }

    body .mc-landing .mc-mobile-step-rail span {
        display: grid;
        grid-row: 1 / 3;
        width: 22px;
        height: 22px;
        border: 1px solid #bbb6af;
        border-radius: 50%;
        place-items: center;
        color: #25282d;
        font-size: 11px;
    }

    body .mc-landing .mc-mobile-step-rail b { color: inherit; font-size: 13px; font-weight: 650; }
    body .mc-landing .mc-mobile-step-rail small { color: #938e87; font-size: 9px; line-height: 1; }
    body .mc-landing .mc-mobile-step-rail a.is-current { color: var(--mc-ui-ink); }
    body .mc-landing .mc-mobile-step-rail a.is-current span { border-color: var(--mc-ui-ink); background: var(--mc-ui-ink); color: #fff; }
    body .mc-landing .mc-mobile-step-rail a.is-complete span { border-color: var(--mc-ui-ink); font-size: 0; }
    body .mc-landing .mc-mobile-step-rail a.is-complete span::after { content: '✓'; font-size: 11px; }
    body .mc-landing .mc-mobile-step-rail a.is-example small { color: #a16d62; }

    body .mc-landing .mc-design-picker,
    body .mc-landing .mc-style-composer,
    body .mc-landing .mc-composition-proof,
    body .mc-landing .mc-closing {
        padding-top: var(--mc-r2-section-y);
        padding-bottom: var(--mc-r2-section-y);
    }

    body .mc-landing .mc-design-picker .mc-final-preview__head,
    body .mc-landing .mc-design-picker .mc-final-preview__workspace,
    body .mc-landing .mc-style-composer__inner,
    body .mc-landing .mc-composition-proof .mc-r1-guest-inner,
    body .mc-landing .mc-closing__inner,
    body .mc-landing .mc-completion-summary {
        width: calc(100% - (2 * var(--mc-r2-gutter)));
        max-width: 720px;
        margin-inline: auto;
    }

    body .mc-landing .mc-step-complete-summary:not([hidden]) {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) var(--mc-ui-target);
        width: calc(100% - (2 * var(--mc-r2-gutter)));
        max-width: 720px;
        min-height: 72px;
        margin-inline: auto;
        padding: 10px 0;
        border-top: 1px solid var(--mc-ui-line);
        border-bottom: 1px solid var(--mc-ui-line);
        align-items: center;
        gap: 12px;
        background: transparent;
    }
    body .mc-landing .mc-step-complete-summary[data-mc-step-summary='style'] { grid-template-columns: minmax(0, 1fr) var(--mc-ui-target); }
    body .mc-landing .mc-step-complete-summary img { width: 44px; height: 52px; border-radius: var(--mc-ui-choice-radius); object-fit: contain; object-position: top; background: #f4f2ed; }
    body .mc-landing .mc-step-complete-summary div { min-width: 0; }
    body .mc-landing .mc-step-complete-summary span { display: block; color: #8a857e; font-size: var(--mc-ui-caption); }
    body .mc-landing .mc-step-complete-summary strong { display: block; overflow: hidden; margin-top: 3px; color: var(--mc-ui-ink); font-size: var(--mc-ui-title); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    body .mc-landing .mc-step-complete-summary strong b { color: inherit; font-size: inherit; font-weight: inherit; }
    body .mc-landing .mc-step-complete-summary strong em { color: #77726b; font-size: var(--mc-ui-caption); font-style: normal; font-weight: 500; }
    body .mc-landing .mc-step-complete-summary > button { min-width: var(--mc-ui-target); min-height: var(--mc-ui-target); padding: 0; border: 1px solid #cfd2d7; border-radius: var(--mc-ui-control-radius); background: transparent; color: var(--mc-ui-ink); font-size: 12px; font-weight: 700; }
    body .mc-landing .mc-design-picker.is-step-collapsed,
    body .mc-landing .mc-style-composer.is-step-collapsed { padding-top: 18px; padding-bottom: 18px; }
    body .mc-landing .mc-design-picker.is-step-collapsed > .mc-final-preview__head,
    body .mc-landing .mc-design-picker.is-step-collapsed > .mc-final-preview__workspace,
    body .mc-landing .mc-style-composer.is-step-collapsed > .mc-style-composer__inner { display: none !important; }

    body .mc-landing .mc-mobile-selection-summary {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) auto;
        min-height: 78px;
        margin: 18px 0 20px;
        padding: 11px;
        border: 1px solid #d7d3cc;
        border-radius: 8px;
        align-items: center;
        gap: 12px;
        background: #fff;
    }

    body .mc-landing .mc-mobile-selection-summary img {
        display: block;
        width: 54px;
        height: 54px;
        border-radius: var(--mc-ui-choice-radius);
        object-fit: contain;
        object-position: top center;
        background: #f4f2ed;
    }

    body .mc-landing .mc-mobile-selection-summary img[hidden] { display: none; }
    body .mc-landing .mc-mobile-selection-summary > div { min-width: 0; }
    body .mc-landing .mc-mobile-selection-summary span,
    body .mc-landing .mc-mobile-selection-summary strong,
    body .mc-landing .mc-mobile-selection-summary small { display: block; }
    body .mc-landing .mc-mobile-selection-summary span { color: #8a857e; font-size: 11px; }
    body .mc-landing .mc-mobile-selection-summary strong {
        overflow: hidden;
        margin-top: 2px;
        color: #25282d;
        font-size: 14px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body .mc-landing .mc-mobile-selection-summary small { margin-top: 3px; color: #8a857e; font-size: 10px; line-height: 1.35; }
    body .mc-landing .mc-mobile-selection-summary > button {
        min-width: 72px;
        min-height: 44px;
        border: 1px solid #25282d;
        border-radius: 6px;
        background: #fff;
        color: #25282d;
        font-size: 12px;
        font-weight: 700;
    }
    body .mc-landing .mc-mobile-selection-summary > button:disabled { border-color: #ddd9d2; color: #aaa59e; }

    body .mc-landing .mc-design-picker .mc-skin-thumb,
    body .mc-landing .mc-design-picker .mc-skin-thumb img {
        overflow: hidden;
        border-radius: 8px !important;
    }

    body .mc-landing .mc-section-next {
        display: flex;
        width: 100%;
        min-height: 48px;
        margin-top: 24px;
        padding: 0 16px;
        border: 1px solid #25282d;
        border-radius: 8px;
        align-items: center;
        justify-content: space-between;
        background: transparent;
        color: #25282d;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }
    body .mc-landing .mc-section-next i { font-size: 17px; font-style: normal; }
    body .mc-landing .mc-section-next[aria-disabled='true'] { border-color: #d9d5cf; color: #aaa59e; pointer-events: none; }

    body .mc-landing .mc-style-composer__workspace,
    body .mc-landing .mc-composition-stage {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-composition-preview {
        display: block !important;
        position: sticky !important;
        z-index: 20;
        top: calc(var(--mc-r1-h, 56px) + 8px);
        order: 1;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 6px;
        border: 1px solid rgba(206,201,193,.9);
        border-radius: 16px;
        background: rgba(250,249,246,.94);
        box-shadow: 0 12px 30px rgba(31,29,24,.10);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body .mc-landing .mc-style-composer__phone,
    body .mc-landing .mc-composition-phone {
        position: relative;
        width: 100% !important;
        height: clamp(164px, 20svh, 190px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        border: 0;
        border-radius: 11px !important;
        box-shadow: none;
    }

    body .mc-landing .mc-style-composer__mount,
    body .mc-landing .mc-composition-mount,
    body .mc-landing .mc-style-composer__fallback,
    body .mc-landing .mc-composition-fallback {
        border-radius: 11px !important;
    }

    body .mc-landing .mc-style-composer__mount .ed-preview__frame,
    body .mc-landing .mc-composition-mount .ed-preview__frame {
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body .mc-landing .mc-style-composer__preview.is-preview-loading::after,
    body .mc-landing .mc-composition-preview.is-preview-loading::after {
        position: absolute;
        z-index: 9;
        top: 14px;
        right: 14px;
        padding: 6px 9px;
        border: 1px solid rgba(255,255,255,.72);
        border-radius: 999px;
        background: rgba(19,19,18,.78);
        color: #fff;
        content: '미리보기 반영 중';
        font-size: 11px;
        font-weight: 700;
        pointer-events: none;
    }

    body .mc-landing .mc-compact-preview-open {
        display: block;
        position: absolute;
        z-index: 8;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: inherit;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }

    body .mc-landing .mc-compact-preview-open span,
    body .mc-landing .mc-compact-preview-open:not(:has(span)) {
        font-size: 0;
    }

    body .mc-landing .mc-compact-preview-open span,
    body .mc-landing .mc-compact-preview-open::after {
        position: absolute;
        right: 10px;
        bottom: 10px;
        padding: 7px 10px;
        border: 1px solid rgba(255,255,255,.72);
        border-radius: 999px;
        background: rgba(19,19,18,.78);
        color: #fff;
        content: '전체 화면으로 보기';
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }
    body .mc-landing .mc-compact-preview-open span { display: none; }
    body .mc-landing .mc-compact-preview-open:focus-visible { outline: 2px solid #25282d; outline-offset: 3px; }

    body .mc-landing .mc-style-composer__identity,
    body .mc-landing .mc-composition-result {
        display: flex;
        min-height: 36px;
        margin: 0 !important;
        padding: 8px 4px 0;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    body .mc-landing .mc-style-composer__actions,
    body .mc-landing .mc-composition-preview .mc-composition-start { display: none !important; }
    body .mc-landing .mc-style-composer__mobile-summary { display: none !important; }
    body .mc-landing .mc-style-composer__controls { order: 2; }

    body .mc-landing .mc-style-composer__styles {
        display: flex;
        flex-direction: row;
        height: auto !important;
        min-height: 0 !important;
        align-items: flex-start;
        gap: 10px;
        padding: 0 0 10px;
        overflow-x: auto;
        border: 0;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    body .mc-landing .mc-style-composer__styles::-webkit-scrollbar { display: none; }
    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-option:hover,
    body .mc-landing .mc-style-option.is-selected {
        display: grid;
        grid-template-rows: 118px auto;
        width: 108px;
        min-width: 108px;
        min-height: 160px;
        padding: 4px;
        overflow: hidden;
        border: 1px solid #d8d4ce;
        border-radius: 8px;
        gap: 5px;
        background: #fff;
        scroll-snap-align: start;
    }
    body .mc-landing .mc-style-option.is-selected { border: 2px solid #25282d; padding: 3px; box-shadow: none; }
    body .mc-landing .mc-style-option__proof {
        display: block;
        width: 100%;
        height: 118px;
        border-radius: 5px;
        object-fit: cover;
        object-position: top center;
    }
    body .mc-landing .mc-style-option > strong { color: #25282d; font-size: 13px; }
    body .mc-landing .mc-style-option__check {
        display: grid;
        position: absolute;
        z-index: 2;
        top: 9px;
        right: 9px;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(255,255,255,.9);
        place-items: center;
        background: rgba(37,40,45,.82);
        color: #fff;
        opacity: 0;
    }
    body .mc-landing .mc-style-option.is-selected .mc-style-option__check { opacity: 1; }
    body .mc-landing .mc-style-composer__style-description { min-height: 58px; padding: 8px 2px; }

    body .mc-landing .mc-style-customize__tabs {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-top: 1px solid #cbc7c0;
        border-bottom: 0;
    }
    body .mc-landing .mc-style-customize__tabs button {
        display: grid;
        grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr) 24px;
        width: 100%;
        min-height: 62px;
        padding: 0 4px;
        border: 0;
        border-bottom: 1px solid #dedad4;
        align-items: center;
        background: transparent;
        text-align: left;
    }
    body .mc-landing .mc-style-customize__tabs button[aria-selected='true'] { border-bottom-color: #cbc7c0; }
    body .mc-landing .mc-style-customize__tabs button span { color: #25282d; font-size: 14px; font-weight: 700; }
    body .mc-landing .mc-style-customize__tabs button b {
        overflow: hidden;
        color: #77726b;
        font-size: 13px;
        font-weight: 500;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body .mc-landing .mc-style-customize__tabs button i {
        color: #8a857e;
        font-size: 22px;
        font-style: normal;
        text-align: right;
        transition: transform .2s ease;
    }
    body .mc-landing .mc-style-customize__tabs button[aria-expanded='true'] i { transform: rotate(90deg); }
    body .mc-landing .mc-style-customize__body { min-height: 0; padding: 16px 0 20px; }

    body .mc-landing .mc-composition-preview { order: 1; }
    body .mc-landing .mc-composition-proof { --mc-r2-section-y: 56px; }
    body .mc-landing .mc-composition-intro p { max-width: 48ch; margin-top: 12px; font-size: var(--mc-ui-body); line-height: 1.55; }
    body .mc-landing .mc-composition-overview {
        display: block;
        order: 2;
        padding: 12px 0 0;
    }
    body .mc-landing .mc-composition-overview__identity { display: none; }
    body .mc-landing .mc-composition-overview__identity span { display: block; color: #8a857e; font-size: 11px; }
    body .mc-landing .mc-composition-overview__identity strong { display: block; margin-top: 2px; color: #25282d; font-size: 18px; }
    body .mc-landing .mc-composition-overview__identity p { margin: 3px 0 0; color: #66635e; font-size: 13px; }
    body .mc-landing .mc-composition-overview__stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 14px 0;
        border-top: 1px solid #cbc7c0;
        border-bottom: 1px solid #cbc7c0;
    }
    body .mc-landing .mc-composition-overview__stats span { color: #8a857e; font-size: 10px; text-align: center; }
    body .mc-landing .mc-composition-overview__stats b { display: block; margin-top: 3px; color: #25282d; font-size: 18px; }
    body .mc-landing .mc-composition-order-summary { border-bottom: 1px solid #d8d4ce; }
    body .mc-landing .mc-composition-order-summary summary {
        display: grid;
        grid-template-columns: minmax(108px, auto) minmax(0, 1fr);
        min-height: 62px;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        list-style: none;
    }
    body .mc-landing .mc-composition-order-summary summary::-webkit-details-marker { display: none; }
    body .mc-landing .mc-composition-order-summary summary span { color: #25282d; font-size: 14px; font-weight: 700; }
    body .mc-landing .mc-composition-order-summary summary strong {
        overflow: hidden;
        color: #77726b;
        font-size: 12px;
        font-weight: 500;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body .mc-landing .mc-composition-order-summary ol { margin: 0; padding: 0 0 16px; list-style: none; }
    body .mc-landing .mc-composition-order-summary li { display: flex; min-height: 34px; align-items: center; justify-content: space-between; color: #55514c; font-size: 12px; }
    body .mc-landing .mc-composition-order-summary li small { color: #8a857e; font-size: 10px; }
    body .mc-landing .mc-composition-overview__actions { display: grid; gap: 8px; margin-top: 18px; }
    body .mc-landing .mc-composition-overview__actions button {
        min-height: var(--mc-ui-target);
        border: 1px solid #25282d;
        border-radius: var(--mc-ui-control-radius);
        background: #25282d;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
    }
    body .mc-landing .mc-composition-overview__actions button + button { background: transparent; color: #25282d; }
    body .mc-landing .mc-composition-final-confirm {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 24px;
        width: 100%;
        min-height: var(--mc-ui-disclosure);
        margin-top: 12px;
        padding: 0 4px;
        border: 0;
        border-top: 1px solid var(--mc-ui-line);
        border-bottom: 1px solid var(--mc-ui-line);
        align-items: center;
        gap: 8px;
        background: transparent;
        color: var(--mc-ui-ink);
        text-align: left;
    }
    body .mc-landing .mc-composition-final-confirm span { overflow: hidden; font-size: var(--mc-ui-caption); text-overflow: ellipsis; white-space: nowrap; }
    body .mc-landing .mc-composition-final-confirm b { font-size: 13px; white-space: nowrap; }
    body .mc-landing .mc-composition-final-confirm i { font-size: 18px; font-style: normal; text-align: right; }
    body .mc-landing .mc-composition-preview-dock { display: none !important; }

    body .mc-landing .mc-composition-layer {
        display: none;
        position: fixed;
        z-index: 2200;
        inset: 0;
        grid-template-rows: minmax(0, 1fr);
        width: 100%;
        height: 100dvh;
        max-height: none;
        padding: 0;
        align-items: end;
        background: transparent;
        isolation: isolate;
    }
    body .mc-landing .mc-composition-layer.is-open { display: grid; }
    body .mc-landing .mc-composition-layer__backdrop {
        display: block;
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(0,0,0,.48);
    }
    body .mc-landing .mc-composition-layer__sheet {
        display: grid;
        position: relative;
        z-index: 1;
        grid-template-rows: 18px 56px minmax(0, 1fr);
        width: 100%;
        max-height: calc(100dvh - 12px);
        padding: 6px var(--mc-r2-gutter) max(16px, env(safe-area-inset-bottom));
        overflow: hidden;
        border-radius: 18px 18px 0 0;
        background: #fbfaf7;
        box-shadow: 0 -12px 50px rgba(0,0,0,.24);
    }
    body .mc-landing .mc-composition-layer__handle {
        display: block;
        align-self: center;
        justify-self: center;
        width: 36px;
        height: 4px;
        border-radius: 9px;
        background: #c8c3bc;
    }
    body .mc-landing .mc-composition-layer__bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--mc-ui-target);
        min-height: 56px;
        align-items: center;
        text-align: left;
    }
    body .mc-landing .mc-composition-layer__bar strong { color: #25282d; font-size: 17px; }
    body .mc-landing .mc-composition-layer__bar button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: #25282d; font-size: 13px; font-weight: 700; }
    body .mc-landing .mc-composition-layer .mc-composition-deck {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        background: transparent;
    }
    body .mc-landing .mc-composition-filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: var(--mc-ui-target);
        margin-bottom: 8px;
        border-bottom: 1px solid var(--mc-ui-line);
    }
    body .mc-landing .mc-composition-filter button {
        min-height: var(--mc-ui-target);
        padding: 0 8px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #77726b;
        font-size: 13px;
        font-weight: 600;
    }
    body .mc-landing .mc-composition-filter button[aria-selected='true'] { border-bottom-color: var(--mc-ui-ink); color: var(--mc-ui-ink); }
    body .mc-landing .mc-composition-filter b { color: inherit; font-size: inherit; }
    body .mc-landing .mc-composition-layer .mc-composition-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 0 2px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body .mc-landing .mc-composition-layer .mc-composition-list > li,
    body .mc-landing .mc-composition-layer .mc-composition-list > li.is-selected:not([data-locked='true']) { min-height: 68px; }
    body .mc-landing .mc-composition-layer .mc-composition-list > li .mc-composition-card,
    body .mc-landing .mc-composition-layer .mc-composition-list > li.is-selected:not([data-locked='true']) .mc-composition-card { min-height: 68px; }
    body.mc-composition-layer-open { overflow: hidden; }
    body.mc-composition-layer-open .mc-landing,
    body.mc-composition-layer-open .mc-landing__main,
    body.mc-composition-layer-open .mc-composition-proof,
    body.mc-composition-layer-open .mc-composition-stage { overflow: visible !important; transform: none !important; }
    body.mc-composition-layer-open .mc-landing .mc-mobile-entry-dock,
    body.mc-composition-layer-open .mc-landing .mc-composition-preview { visibility: hidden !important; }

    body .mc-landing .mc-completion-summary {
        display: none;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 0;
        padding: 28px 24px;
        border: 1px solid #d7d3cc;
        border-radius: 10px;
        background: #f7f5f1;
    }
    body .mc-landing .mc-completion-summary h2 { margin: 6px 0 10px; color: #25282d; font-size: 24px; }
    body .mc-landing .mc-completion-summary > p:not(.mc-r1-kicker) { margin: 0; color: #66635e; font-size: 13px; }
    body .mc-landing .mc-completion-summary > p strong,
    body .mc-landing .mc-completion-summary > p b { color: #25282d; font-weight: 700; }
    body .mc-landing .mc-completion-summary > button {
        display: flex;
        width: 100%;
        min-height: 48px;
        margin-top: 18px;
        padding: 0;
        border: 0;
        border-top: 1px solid #d7d3cc;
        align-items: flex-end;
        justify-content: space-between;
        background: transparent;
        color: #25282d;
        font-size: 14px;
        font-weight: 700;
    }
    body .mc-landing .mc-completion-summary > button i { font-size: 19px; font-style: normal; }

    body .mc-landing .mc-closing__policies { display: grid; grid-template-columns: minmax(0, 1fr); }
    body .mc-landing .mc-closing__policies .mc-benefit-row {
        display: grid !important;
        min-height: 62px;
        grid-template-columns: 32px minmax(0, 1fr);
        row-gap: 4px;
        padding: 18px 0;
        align-items: start;
        border-top: 1px solid #3e3e3b;
        visibility: visible !important;
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    body .mc-landing .mc-closing__policies .mc-benefit-row > b { grid-column: 1; grid-row: 1 / 3; }
    body .mc-landing .mc-closing__policies .mc-benefit-row > strong,
    body .mc-landing .mc-closing__policies .mc-benefit-row > p { grid-column: 2; }
    body .mc-landing .mc-closing__policies .mc-benefit-row > p { margin: 0; }
    body .mc-landing .mc-closing__more { display: block; }
    body .mc-landing .mc-closing__more > summary {
        display: flex;
        min-height: 48px;
        padding: 0 2px;
        border-top: 1px solid #3e3e3b;
        align-items: center;
        justify-content: space-between;
        color: #f4f2ed;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }
    body .mc-landing .mc-closing__more > summary::-webkit-details-marker { display: none; }
    body .mc-landing .mc-closing__more > summary i { font-style: normal; transition: transform .2s ease; }
    body .mc-landing .mc-closing__more[open] > summary i { transform: rotate(180deg); }

    body .mc-footer-include-wrap { position: relative; z-index: 2; padding-bottom: calc(48px + 12px + env(safe-area-inset-bottom) + 24px); background: #efefef; }
    body .mc-footer-include-wrap .ui-footer-wrapper {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100%;
    }
    body .mc-footer-include-wrap [role='button']:focus-visible { outline: 2px solid #25282d; outline-offset: 2px; }
}

@media (max-width: 320px) {
    body .mc-landing { --mc-r2-gutter: 14px; --mc-r2-section-y: 64px; }
    body .mc-landing .mc-mobile-step-rail a { gap: 4px; font-size: 11px; }
    body .mc-landing .mc-mobile-step-rail a + a::before { width: 8px; }
    body .mc-landing .mc-style-composer__phone,
    body .mc-landing .mc-composition-phone { height: 168px !important; }
    body .mc-landing .mc-mobile-selection-summary { grid-template-columns: 46px minmax(0, 1fr); }
    body .mc-landing .mc-mobile-selection-summary img { width: 46px; height: 46px; }
    body .mc-landing .mc-mobile-selection-summary > button { grid-column: 1 / -1; width: 100%; }
    body .mc-landing .mc-mobile-entry-dock { right: 14px; left: 14px; }
    body .mc-landing .mc-mobile-entry-dock__button { min-height: 56px; padding: 4px 44px 4px 12px; }
    body .mc-landing .mc-mobile-entry-dock__button > span { overflow: visible; text-align: center; text-overflow: clip; white-space: normal; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body .mc-landing .mc-style-composer__phone,
    body .mc-landing .mc-composition-phone { height: clamp(220px, 28svh, 260px) !important; }
}

@media (max-width: 1023px) and (orientation: landscape) {
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-composition-preview { position: static !important; }
}

@media (prefers-reduced-motion: reduce) {
    body .mc-landing .mc-style-customize__tabs button i,
    body .mc-landing .mc-closing__more > summary i { transition: none; }
}

/*
 * HOME-LANDING-MOBILE-PREVIEW-260906
 * Design-system mapping:
 * COMP.FORM.VISUAL_CHOICE_GRID, COMP.FORM.DISCLOSURE,
 * TOKEN.FORM.PANEL.GUTTER, TOKEN.FORM.DISCLOSURE_ROW.HEIGHT,
 * TOKEN.INTERACTION.TARGET_MIN, TOKEN.EDITOR.RADIUS.CHOICE.
 */
@media (max-width: 1023px) {
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-composition-preview {
        position: static !important;
        z-index: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body .mc-landing .mc-style-composer__phone,
    body .mc-landing .mc-composition-phone {
        width: 100% !important;
        height: clamp(300px, 42svh, 360px) !important;
        min-height: 300px !important;
        overflow: hidden;
        border: 1px solid var(--mc-ui-line);
        border-radius: var(--mc-ui-choice-radius) !important;
        background: #fff;
    }

    body .mc-landing .mc-style-composer__mount,
    body .mc-landing .mc-composition-mount,
    body .mc-landing .mc-style-composer__fallback,
    body .mc-landing .mc-composition-fallback {
        border-radius: calc(var(--mc-ui-choice-radius) - 1px) !important;
    }

    body .mc-landing .mc-style-composer__mount .ed-preview__frame,
    body .mc-landing .mc-composition-mount .ed-preview__frame {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        pointer-events: auto !important;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    body .mc-landing .mc-style-composer__identity,
    body .mc-landing .mc-composition-result {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: var(--mc-ui-disclosure);
        padding: 9px 0 0;
        border-bottom: 1px solid var(--mc-ui-line);
        align-items: center;
        gap: 12px;
    }

    body .mc-landing .mc-style-composer__identity > div,
    body .mc-landing .mc-composition-result > div { min-width: 0; }
    body .mc-landing .mc-style-composer__identity > div > span {
        display: block;
        color: #77726b;
        font-size: var(--mc-ui-caption);
        line-height: 1.35;
    }
    body .mc-landing .mc-style-composer__identity > div > strong,
    body .mc-landing .mc-composition-result > div > strong {
        display: block;
        overflow: hidden;
        margin-top: 2px;
        color: var(--mc-ui-ink);
        font-size: var(--mc-ui-title);
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body .mc-landing .mc-composition-result > div > span {
        display: block;
        overflow: hidden;
        margin-top: 2px;
        color: #77726b;
        font-size: var(--mc-ui-caption);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .mc-landing .mc-compact-preview-open {
        display: inline-flex;
        position: static;
        inset: auto;
        width: auto;
        min-width: 128px;
        height: auto;
        min-height: var(--mc-ui-target);
        padding: 0 10px;
        border: 1px solid var(--mc-ui-ink);
        border-radius: var(--mc-ui-control-radius);
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: transparent;
        color: var(--mc-ui-ink);
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
    }
    body .mc-landing .mc-compact-preview-open span {
        display: inline;
        position: static;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
    }
    body .mc-landing .mc-compact-preview-open i { font-size: 16px; font-style: normal; }
    body .mc-landing .mc-compact-preview-open::after { display: none; content: none; }

    body .mc-landing .mc-style-composer__styles {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto !important;
        min-height: 0 !important;
        gap: 8px;
        padding: 0;
        overflow: visible;
        border: 0;
        scroll-snap-type: none;
    }

    body .mc-landing .mc-style-option,
    body .mc-landing .mc-style-option:hover,
    body .mc-landing .mc-style-option.is-selected {
        display: grid;
        grid-template-rows: auto 34px;
        width: auto;
        min-width: 0;
        min-height: 0;
        padding: 4px;
        overflow: hidden;
        border: 1px solid var(--mc-ui-line);
        border-radius: var(--mc-ui-choice-radius);
        align-items: center;
        gap: 4px;
        background: #fff;
        scroll-snap-align: none;
    }
    body .mc-landing .mc-style-option.is-selected {
        padding: 4px;
        border-color: var(--mc-ui-ink);
        box-shadow: none;
    }
    body .mc-landing .mc-style-option__proof {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: calc(var(--mc-ui-choice-radius) - 1px);
        object-fit: cover;
        object-position: top center;
    }
    body .mc-landing .mc-style-option > strong {
        padding: 0 4px;
        color: var(--mc-ui-ink);
        font-size: 13px;
        font-weight: 600;
        text-align: left;
    }
    body .mc-landing .mc-style-option__check {
        top: 10px;
        right: 10px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        flex-basis: 22px;
    }
    body .mc-landing .mc-style-composer__style-description {
        min-height: 54px;
        padding: 10px 2px;
        align-items: flex-start;
        line-height: 1.55;
    }

    body .mc-landing .mc-style-customize {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    body .mc-landing .mc-style-customize__head { grid-row: 1; }
    body .mc-landing .mc-style-customize__tabs,
    body .mc-landing .mc-style-customize__body { display: contents; }

    body .mc-landing .mc-style-customize__tabs > button {
        display: grid;
        grid-template-columns: minmax(88px, .7fr) minmax(0, 1fr) 24px;
        width: 100%;
        min-height: var(--mc-ui-disclosure);
        padding: 0 4px;
        border: 0;
        border-bottom: 1px solid var(--mc-ui-line);
        align-items: center;
        background: transparent;
        text-align: left;
        scroll-margin-top: calc(var(--mc-r1-h, 56px) + 8px);
    }
    body .mc-landing .mc-style-customize__tabs > button:first-child { border-top: 1px solid var(--mc-ui-line); }
    body .mc-landing .mc-style-customize__tabs > button[aria-expanded='true'] { background: #f7f7f7; }
    body .mc-landing .mc-style-customize__tabs > button span { color: var(--mc-ui-ink); font-size: 14px; font-weight: 700; }
    body .mc-landing .mc-style-customize__tabs > button b { color: #77726b; font-size: 13px; font-weight: 500; }
    body .mc-landing .mc-style-customize__tabs > button i { color: #8a857e; font-size: 20px; }

    body .mc-landing .mc-style-customize__tabs > button[data-mc-custom-tab='font'] { grid-row: 2; }
    body .mc-landing .mc-style-customize__panel[data-mc-custom-panel='font'] { grid-row: 3; }
    body .mc-landing .mc-style-customize__tabs > button[data-mc-custom-tab='color'] { grid-row: 4; }
    body .mc-landing .mc-style-customize__panel[data-mc-custom-panel='color'] { grid-row: 5; }
    body .mc-landing .mc-style-customize__tabs > button[data-mc-custom-tab='decoration'] { grid-row: 6; }
    body .mc-landing .mc-style-customize__panel[data-mc-custom-panel='decoration'] { grid-row: 7; }
    body .mc-landing .mc-style-customize__tabs > button[data-mc-custom-tab='background'] { grid-row: 8; }
    body .mc-landing .mc-style-customize__panel[data-mc-custom-panel='background'] { grid-row: 9; }
    body .mc-landing .mc-style-customize__tabs > button[data-mc-custom-tab='calendar'] { grid-row: 10; }
    body .mc-landing .mc-style-customize__panel[data-mc-custom-panel='calendar'] { grid-row: 11; }

    body .mc-landing .mc-style-customize__panel {
        padding: 16px 4px 20px;
        border-bottom: 1px solid var(--mc-ui-line);
        background: #fff;
        scroll-margin-top: calc(var(--mc-r1-h, 56px) + var(--mc-ui-disclosure) + 8px);
    }
    body .mc-landing .mc-style-customize__panel > p { margin: 0 0 12px; font-size: var(--mc-ui-caption); }

    body .mc-landing .mc-style-composer__controls {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }
    body .mc-landing .mc-composition-overview {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 320px) {
    body .mc-landing .mc-style-composer__phone,
    body .mc-landing .mc-composition-phone {
        height: 300px !important;
        min-height: 300px !important;
    }
    body .mc-landing .mc-compact-preview-open { min-width: 112px; padding: 0 8px; font-size: 12px; }
}

/*
 * HOME-LANDING-PREVIEW-SUMMARY-260906
 * Mobile owns settings and summary; the invitation renderer exists only in the
 * body-level fullscreen dialog. Desktop keeps the inline preview contract.
 */
@media (max-width: 1023px) {
    body .mc-landing .mc-style-composer__preview,
    body .mc-landing .mc-composition-preview {
        display: none !important;
    }

    body .mc-landing .mc-mobile-selection-summary,
    body .mc-landing .mc-style-composer__mobile-summary,
    body .mc-landing .mc-composition-overview__identity.mc-mobile-result-summary {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 0;
        margin: 18px 0 24px;
        padding: 12px;
        border: 1px solid var(--mc-ui-line);
        border-radius: var(--mc-ui-choice-radius);
        align-items: center;
        gap: 12px;
        background: #fff;
    }

    body .mc-landing .mc-mobile-selection-summary img,
    body .mc-landing .mc-mobile-result-summary > img {
        display: block;
        width: 54px;
        height: 68px;
        border-radius: calc(var(--mc-ui-choice-radius) - 1px);
        object-fit: contain;
        object-position: top center;
        background: #f7f7f7;
    }

    body .mc-landing .mc-mobile-result-summary__copy { min-width: 0; }
    body .mc-landing .mc-mobile-result-summary__copy > span {
        display: block;
        color: #77726b;
        font-size: var(--mc-ui-caption);
        line-height: 1.35;
    }
    body .mc-landing .mc-mobile-result-summary__copy > strong {
        display: block;
        overflow: hidden;
        margin-top: 3px;
        color: var(--mc-ui-ink);
        font-size: var(--mc-ui-title);
        font-weight: 600;
        line-height: 1.45;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body .mc-landing .mc-mobile-result-summary__copy > p {
        display: block;
        overflow: hidden;
        margin: 3px 0 0;
        color: #77726b;
        font-size: 13px;
        line-height: 1.45;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body .mc-landing .mc-mobile-result-summary__copy > p b { color: inherit; font-weight: 500; }

    body .mc-landing .mc-mobile-selection-summary > button,
    body .mc-landing .mc-mobile-result-summary > button,
    body .mc-landing .mc-composition-overview__identity .mc-composition-final-confirm {
        display: flex;
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        min-width: 0;
        min-height: var(--mc-ui-target);
        margin: 0;
        padding: 0 14px;
        border: 1px solid var(--mc-ui-ink);
        border-radius: var(--mc-ui-control-radius);
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: transparent;
        color: var(--mc-ui-ink);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
    }
    body .mc-landing .mc-mobile-selection-summary > button i,
    body .mc-landing .mc-mobile-result-summary > button i {
        flex: 0 0 auto;
        font-size: 18px;
        font-style: normal;
    }
    body .mc-landing .mc-mobile-selection-summary > button:disabled,
    body .mc-landing .mc-mobile-result-summary > button:disabled {
        border-color: #cfd2d7;
        background: #f7f7f7;
        color: #8a857e;
    }

    body .mc-landing .mc-composition-overview {
        width: 100%;
        padding-top: 0;
    }
    body .mc-landing .mc-composition-overview__identity.mc-mobile-result-summary {
        margin-top: 0;
    }
    body .mc-landing .mc-composition-final-confirm span {
        overflow: visible;
        font-size: inherit;
        text-overflow: clip;
        white-space: normal;
    }

    body.mc-mobile-preview-open .mc-mobile-preview-header {
        min-height: calc(56px + env(safe-area-inset-top));
        grid-template-rows: 28px 28px;
    }
    body.mc-mobile-preview-open .mc-mobile-preview-card { position: relative; }
    body.mc-mobile-preview-open .mc-mobile-preview-feedback {
        position: absolute;
        z-index: 5;
        right: 20px;
        bottom: calc(20px + env(safe-area-inset-bottom));
        left: 20px;
        padding: 16px;
        border: 1px solid var(--mc-ui-line);
        border-radius: var(--mc-ui-choice-radius);
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 30px rgba(20,20,18,.14);
    }
    body.mc-mobile-preview-open .mc-mobile-preview-feedback[hidden] { display: none; }
    body.mc-mobile-preview-open .mc-mobile-preview-feedback p {
        margin: 0;
        color: var(--mc-ui-ink);
        font-size: 13px;
        line-height: 1.55;
    }
    body.mc-mobile-preview-open .mc-mobile-preview-feedback button {
        width: 100%;
        min-height: var(--mc-ui-target);
        margin-top: 12px;
        border: 1px solid var(--mc-ui-ink);
        border-radius: var(--mc-ui-control-radius);
        background: var(--mc-ui-ink);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }
}

@media (max-width: 320px) {
    body .mc-landing .mc-mobile-selection-summary,
    body .mc-landing .mc-style-composer__mobile-summary,
    body .mc-landing .mc-composition-overview__identity.mc-mobile-result-summary {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 10px;
        gap: 10px;
    }
    body .mc-landing .mc-mobile-selection-summary img,
    body .mc-landing .mc-mobile-result-summary > img {
        width: 46px;
        height: 58px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body .mc-landing .mc-style-composer__controls { padding-bottom: 32px !important; }
    body .mc-landing .mc-composition-overview { padding-bottom: 32px; }
}

/* HOME-LANDING-GUIDED-FLOW-260906
   COMP.ACTION.BAR: one contextual action follows explicit mobile progress. */
.mc-composition-complete { display: none; }

@media (max-width: 1023px) {
    body .mc-landing .mc-mobile-step-rail a.is-locked {
        color: #8a857e;
    }

    body .mc-landing .mc-mobile-step-rail a.is-locked span {
        border-color: #d7d3cc;
        color: #8a857e;
    }

    body .mc-landing .mc-step-complete-summary[data-mc-step-summary='composition'] {
        grid-template-columns: minmax(0, 1fr) var(--mc-ui-target);
    }

    body .mc-landing .mc-composition-proof.is-step-collapsed {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    body .mc-landing .mc-composition-proof.is-step-collapsed > .mc-r1-guest-inner {
        display: none !important;
    }

    body .mc-landing .mc-composition-layer .mc-composition-deck__foot,
    body .mc-landing .mc-composition-layer .mc-composition-deck__foot:has([data-mc-composition-reset][hidden]) {
        display: grid;
        grid-template-columns: auto minmax(160px, 1fr);
        width: 100%;
        min-height: 60px;
        height: auto;
        padding: 8px 0 max(4px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--mc-ui-line);
        align-items: center;
        gap: 8px;
    }

    body .mc-landing .mc-composition-layer [data-mc-composition-reset] {
        min-width: var(--mc-ui-target);
        min-height: var(--mc-ui-target);
        padding: 0 12px;
        border: 1px solid #cfd2d7;
        border-radius: var(--mc-ui-control-radius);
        background: transparent;
        color: var(--mc-ui-ink);
        font-size: 13px;
        font-weight: 700;
    }

    body .mc-landing .mc-composition-layer [data-mc-composition-reset][hidden] {
        display: block;
        visibility: hidden;
    }

    body .mc-landing .mc-composition-layer .mc-composition-complete {
        display: block;
        min-width: 0;
        min-height: var(--mc-ui-target);
        padding: 0 18px;
        border: 1px solid var(--mc-ui-ink);
        border-radius: var(--mc-ui-control-radius);
        background: var(--mc-ui-ink);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
    }

    body .mc-landing .mc-composition-layer .mc-composition-complete:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }
}

@media (max-width: 1023px) {
    body .mc-landing .mc-mobile-step-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}