/* Mailmyra templates page: featured selector, library, and live styling desk. */
:root {
    --mm-tpl-ink: #061a37;
    --mm-tpl-muted: #5c6a7d;
    --mm-tpl-paper: #f6f3ee;
    --mm-tpl-orange: #f2a573;
    --mm-tpl-orange-deep: #cf6628;
    --mm-tpl-blue: #5e91ee;
    --mm-tpl-line: rgba(6, 26, 55, .11);
    --mm-tpl-display: var(--tp-ff-clash-semibold, "ClashDisplay-Semibold", sans-serif);
    --mm-tpl-body: var(--tp-ff-clash-medium, "ClashDisplay-Medium", sans-serif);
}

.mm-tpl-page {
    position: relative;
    z-index: 3;
    overflow: clip;
    color: var(--mm-tpl-ink);
    background:
        radial-gradient(circle at 8% 14%, rgba(242, 165, 115, .2), transparent 25%),
        radial-gradient(circle at 93% 42%, rgba(94, 145, 238, .13), transparent 24%),
        linear-gradient(rgba(6, 26, 55, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 26, 55, .055) 1px, transparent 1px),
        var(--mm-tpl-paper);
    background-size: auto, auto, 64px 64px, 64px 64px, auto;
}

.mm-tpl-page .container {
    position: relative;
    z-index: 2;
}

.mm-tpl-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: clamp(44px, 8vw, 132px);
    align-items: end;
    padding-top: clamp(96px, 9vw, 148px);
    padding-bottom: 54px;
}

.mm-tpl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 21px;
    color: var(--mm-tpl-orange-deep);
    font: 500 13px/1 var(--mm-tpl-body);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.mm-tpl-kicker::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mm-tpl-orange);
    box-shadow: 0 0 18px rgba(242, 165, 115, .9);
    content: "";
}

.mm-tpl-title {
    max-width: 850px;
    margin: 0;
    color: var(--mm-tpl-ink);
    font: 600 clamp(56px, 5vw, 72px)/.9 var(--mm-tpl-display);
    letter-spacing: 0;
}

.mm-tpl-title em {
    display: block;
    padding-bottom: .08em;
    color: var(--mm-tpl-orange-deep);
    font: inherit;
    font-style: normal;
}

.mm-tpl-intro__copy {
    padding-bottom: 7px;
}

.mm-tpl-intro__copy p {
    max-width: 520px;
    margin: 0 0 27px;
    color: var(--mm-tpl-muted);
    font: 500 17px/1.58 var(--mm-tpl-body);
}

.mm-tpl-intro__ledger {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--mm-tpl-line);
    border-bottom: 1px solid var(--mm-tpl-line);
}

.mm-tpl-intro__ledger span {
    padding: 16px 10px 15px 0;
    color: var(--mm-tpl-muted);
    font: 500 10px/1.25 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-intro__ledger span + span {
    padding-left: 18px;
    border-left: 1px solid var(--mm-tpl-line);
}

.mm-tpl-featured {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    border-radius: 8px;
    background:
        radial-gradient(circle at 76% 42%, rgba(72, 128, 228, .27), transparent 29%),
        radial-gradient(circle at 22% 85%, rgba(242, 165, 115, .15), transparent 25%),
        linear-gradient(rgba(120, 167, 232, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 167, 232, .07) 1px, transparent 1px),
        #061831;
    background-size: auto, auto, 64px 64px, 64px 64px, auto;
    box-shadow: 0 34px 78px rgba(3, 19, 44, .2);
}

.mm-tpl-featured__top {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 27px 34px 0;
    color: rgba(232, 244, 255, .72);
    font: 500 10px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-featured__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mm-tpl-featured__status::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #48e0bf;
    box-shadow: 0 0 13px rgba(72, 224, 191, .75);
    content: "";
}

.mm-tpl-featured__viewport {
    position: absolute;
    inset: 64px 0 76px;
    perspective: 1400px;
}

.mm-tpl-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-columns: minmax(290px, .72fr) minmax(0, 1.28fr);
    width: min(1080px, calc(100% - 180px));
    height: 482px;
    overflow: hidden;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: 0 24px 70px rgba(0, 9, 25, .3);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.72);
    transition: transform .72s cubic-bezier(.22, 1, .36, 1), opacity .48s ease, filter .48s ease;
    will-change: transform, opacity;
}

.mm-tpl-slide[data-state="active"] {
    z-index: 4;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.mm-tpl-slide[data-state="previous"] {
    z-index: 2;
    opacity: .22;
    filter: saturate(.5);
    transform: translate(-92%, -50%) scale(.78) rotateY(4deg);
}

.mm-tpl-slide[data-state="next"] {
    z-index: 2;
    opacity: .22;
    filter: saturate(.5);
    transform: translate(-8%, -50%) scale(.78) rotateY(-4deg);
}

.mm-tpl-slide__copy {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 43px 38px 36px;
    background:
        linear-gradient(rgba(6, 26, 55, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 26, 55, .045) 1px, transparent 1px),
        #f8fafc;
    background-size: 32px 32px;
}

.mm-tpl-slide__eyebrow {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--mm-tpl-orange-deep);
    font: 500 10px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-slide h3 {
    max-width: 330px;
    margin: 0 0 17px;
    color: var(--mm-tpl-ink);
    font: 600 clamp(35px, 3.2vw, 50px)/.98 var(--mm-tpl-display);
    letter-spacing: 0;
}

.mm-tpl-slide__body p {
    max-width: 340px;
    margin: 0;
    color: var(--mm-tpl-muted);
    font: 500 14px/1.58 var(--mm-tpl-body);
}

.mm-tpl-slide__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 23px 0 27px;
}

.mm-tpl-pill {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 7px 12px;
    border: 1px solid rgba(6, 26, 55, .15);
    border-radius: 999px;
    color: var(--mm-tpl-ink);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-slide__link {
    display: inline-flex;
    gap: 11px;
    align-items: center;
    color: var(--mm-tpl-ink);
    font: 500 11px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-slide__link i {
    color: var(--mm-tpl-orange-deep);
    transition: transform .25s ease;
}

.mm-tpl-slide__link:hover i {
    transform: translateX(4px);
}

.mm-tpl-slide__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 55%, rgba(94, 145, 238, .24), transparent 36%),
        linear-gradient(rgba(84, 129, 200, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(84, 129, 200, .08) 1px, transparent 1px),
        #eaf2ff;
    background-size: auto, 42px 42px, 42px 42px, auto;
}

.mm-tpl-slide__visual img {
    width: 94%;
    height: 94%;
    object-fit: contain;
    filter: drop-shadow(0 20px 28px rgba(26, 75, 150, .2));
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.mm-tpl-slide[data-state="active"] .mm-tpl-slide__visual img {
    transform: scale(1.025);
}

.mm-tpl-featured__controls {
    position: absolute;
    right: 34px;
    bottom: 24px;
    left: 34px;
    z-index: 8;
    display: grid;
    grid-template-columns: 42px 85px 1fr 42px;
    gap: 13px;
    align-items: center;
}

.mm-tpl-icon-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(210, 232, 255, .28);
    border-radius: 50%;
    color: #eaf5ff;
    background: rgba(6, 26, 55, .55);
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.mm-tpl-icon-button:hover {
    border-color: var(--mm-tpl-orange);
    color: var(--mm-tpl-ink);
    background: var(--mm-tpl-orange);
}

.mm-tpl-featured__counter {
    color: rgba(228, 241, 255, .56);
    font: 500 11px/1 var(--mm-tpl-body);
}

.mm-tpl-featured__counter strong {
    color: #fff;
    font-size: 18px;
}

.mm-tpl-featured__dots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mm-tpl-featured__dot {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: rgba(218, 237, 255, .19);
}

.mm-tpl-featured__dot::after {
    position: absolute;
    inset: 0;
    background: var(--mm-tpl-orange);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease;
}

.mm-tpl-featured__dot.is-active::after {
    transform: scaleX(1);
}

.mm-tpl-library {
    padding: clamp(110px, 11vw, 176px) 0 clamp(120px, 11vw, 176px);
}

.mm-tpl-library__head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .65fr);
    gap: clamp(40px, 8vw, 130px);
    align-items: end;
    margin-bottom: 42px;
}

.mm-tpl-library__head p {
    max-width: 470px;
    margin: 0 0 4px;
    color: var(--mm-tpl-muted);
    font: 500 16px/1.62 var(--mm-tpl-body);
}

.mm-tpl-library__bar {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;
    margin-bottom: 28px;
}

.mm-tpl-library__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mm-tpl-filter {
    position: relative;
    min-height: 38px;
    padding: 0 17px;
    overflow: hidden;
    border: 1px solid rgba(27, 75, 137, .2);
    border-radius: 999px;
    color: var(--mm-tpl-ink);
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
    font: 500 11px/1 var(--mm-tpl-body);
    transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.mm-tpl-filter::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 36%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    content: "";
    transform: skewX(-24deg);
    transition: left .55s ease;
}

.mm-tpl-filter.is-active {
    border-color: rgba(238, 133, 76, .7);
    color: var(--mm-tpl-ink);
    background: rgba(255, 231, 214, .92);
    box-shadow: 0 8px 22px rgba(224, 108, 47, .12), inset 0 1px 0 #fff;
}

.mm-tpl-filter:hover::after,
.mm-tpl-filter.is-active::after { left: 115%; }

.mm-tpl-library__navigation {
    display: flex;
    flex: 0 0 auto;
    gap: 9px;
    align-items: center;
    color: var(--mm-tpl-muted);
    font: 500 10px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-library__navigation button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(27, 75, 137, .22);
    border-radius: 50%;
    color: var(--mm-tpl-ink);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 8px 22px rgba(11, 43, 86, .08);
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.mm-tpl-library__navigation button:hover {
    color: #fff;
    border-color: var(--mm-tpl-ink);
    background: var(--mm-tpl-ink);
    transform: translateY(-2px);
}

.mm-tpl-library__navigation b { color: var(--mm-tpl-ink); font: 600 24px/1 var(--mm-tpl-display); }
.mm-tpl-library__navigation small { color: var(--mm-tpl-orange-deep); font: 500 11px/1 var(--mm-tpl-body); }

.mm-tpl-runway {
    position: relative;
    display: grid;
    grid-template-columns: minmax(290px, .7fr) minmax(0, 1.3fr);
    min-height: 590px;
    overflow: hidden;
    border-radius: 8px;
    outline: none;
    background:
        radial-gradient(circle at 78% 44%, rgba(70, 132, 226, .22), transparent 34%),
        linear-gradient(rgba(115, 164, 233, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 164, 233, .07) 1px, transparent 1px),
        #071b39;
    background-size: auto, 48px 48px, 48px 48px, auto;
    box-shadow: 0 28px 72px rgba(5, 28, 63, .18);
    touch-action: pan-y;
}

.mm-tpl-runway:focus-visible { outline: 2px solid var(--mm-tpl-orange-deep); outline-offset: 5px; }

.mm-tpl-runway__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(42px, 5vw, 78px);
    color: #eaf4ff;
}

.mm-tpl-runway__copy::after {
    position: absolute;
    top: 10%;
    right: 0;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(transparent, rgba(137, 180, 236, .24), transparent);
    content: "";
}

.mm-tpl-runway__eyebrow {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 24px;
    color: rgba(214, 233, 255, .62);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-runway__eyebrow > i,
.mm-tpl-runway__status > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #48e0bf;
    box-shadow: 0 0 14px rgba(72, 224, 191, .75);
}

.mm-tpl-runway__copy h3 {
    max-width: 520px;
    margin: 0 0 20px;
    color: #f2f7ff;
    font: 600 clamp(38px, 4vw, 62px)/.96 var(--mm-tpl-display);
}

.mm-tpl-runway__copy > p {
    max-width: 510px;
    margin: 0;
    color: rgba(212, 230, 251, .66);
    font: 500 14px/1.65 var(--mm-tpl-body);
}

.mm-tpl-runway__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
}

.mm-tpl-runway__pills > span {
    position: relative;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 33px;
    padding: 0 13px;
    overflow: hidden;
    border: 1px solid rgba(132, 177, 236, .22);
    border-radius: 999px;
    color: rgba(226, 239, 255, .75);
    background: rgba(7, 30, 64, .5);
    font: 500 9px/1 var(--mm-tpl-body);
}

.mm-tpl-runway__pills i,
.mm-tpl-runway__pills svg { color: var(--mm-tpl-orange); }
.mm-tpl-runway__pills b { color: #fff; font: inherit; }

.mm-tpl-runway__action { align-self: flex-start; margin-top: 34px; }
.mm-tpl-runway__action .mm-btn__face { min-width: 196px; }

.mm-tpl-runway__stage {
    position: relative;
    min-width: 0;
    min-height: 590px;
    overflow: hidden;
}

.mm-tpl-runway__stage::before {
    position: absolute;
    inset: 9% 7%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(103, 158, 237, .22), transparent 66%);
    content: "";
    filter: blur(4px);
}

.mm-tpl-runway__status {
    position: absolute;
    top: 28px;
    right: 30px;
    z-index: 4;
    display: flex;
    gap: 8px;
    align-items: center;
    color: rgba(226, 239, 255, .7);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-proof {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: min(82%, 760px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-44%, -50%) scale(.94);
    transition: transform .62s cubic-bezier(.22, 1, .36, 1), opacity .42s ease;
    user-select: none;
}

.mm-tpl-proof[data-state="active"] {
    z-index: 3;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.mm-tpl-proof__sheet {
    display: grid;
    width: 100%;
    min-height: 360px;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: #f8fbff;
    box-shadow: 0 30px 80px rgba(0, 7, 25, .36);
}

.mm-tpl-proof__sheet img {
    width: 100%;
    max-height: 470px;
    object-fit: contain;
}

.mm-tpl-timeline {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.mm-tpl-timeline button {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 7px 10px 7px 7px;
    border: 0;
    border-radius: 999px;
    color: var(--mm-tpl-muted);
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 0 0 1px rgba(27, 75, 137, .12);
    font: 500 10px/1.15 var(--mm-tpl-body);
    text-align: left;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.mm-tpl-timeline button:hover { transform: translateY(-2px); }

.mm-tpl-timeline__preview {
    display: grid;
    width: 66px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    border-radius: 999px;
    background: #eef5ff;
}

.mm-tpl-timeline__preview img { width: 100%; height: 100%; object-fit: cover; }
.mm-tpl-timeline button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tpl-timeline b { display: block; margin-bottom: 4px; color: var(--mm-tpl-orange-deep); font: 600 9px/1 var(--mm-tpl-body); }
.mm-tpl-timeline button.is-active { color: #fff; background: var(--mm-tpl-ink); box-shadow: 0 12px 28px rgba(5, 29, 64, .18); }
.mm-tpl-timeline button:disabled { cursor: not-allowed; opacity: .3; }

.mm-tpl-studio {
    position: relative;
    overflow: hidden;
    padding: clamp(108px, 10vw, 160px) 0 clamp(118px, 11vw, 176px);
    color: #eaf4ff;
    background:
        radial-gradient(circle at 79% 46%, rgba(74, 132, 233, .25), transparent 30%),
        radial-gradient(circle at 12% 90%, rgba(242, 165, 115, .12), transparent 22%),
        linear-gradient(rgba(112, 158, 224, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 158, 224, .07) 1px, transparent 1px),
        #061831;
    background-size: auto, auto, 64px 64px, 64px 64px, auto;
}

.mm-tpl-studio__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: clamp(40px, 8vw, 130px);
    align-items: end;
    margin-bottom: 58px;
}

.mm-tpl-studio .mm-tpl-title {
    color: #edf7ff;
}

.mm-tpl-studio__head p {
    max-width: 510px;
    margin: 0 0 6px;
    color: rgba(219, 235, 252, .66);
    font: 500 16px/1.62 var(--mm-tpl-body);
}

.mm-tpl-studio__desk {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    min-height: 590px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(4, 18, 41, .52);
    box-shadow: 0 35px 85px rgba(0, 8, 24, .34);
}

.mm-tpl-preview {
    position: relative;
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 72px 42px;
    border-right: 1px solid rgba(149, 189, 240, .14);
    background:
        linear-gradient(rgba(112, 158, 224, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 158, 224, .06) 1px, transparent 1px);
    background-size: 40px 40px;
}

.mm-tpl-preview__bar {
    position: absolute;
    top: 23px;
    right: 25px;
    left: 25px;
    display: flex;
    justify-content: space-between;
    color: rgba(222, 238, 255, .55);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-preview__bar span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mm-tpl-preview__bar span:last-child::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #48e0bf;
    box-shadow: 0 0 12px rgba(72, 224, 191, .75);
    content: "";
}

.mm-tpl-preview__inbox {
    width: min(670px, 100%);
    padding: 27px;
    border-radius: 7px;
    background: #f7f9fd;
    box-shadow: 0 28px 70px rgba(0, 5, 17, .36);
}

.mm-tpl-preview__mailbar {
    display: flex;
    gap: 7px;
    margin-bottom: 21px;
    padding-bottom: 17px;
    border-bottom: 1px solid #dfe5ee;
}

.mm-tpl-preview__mailbar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8dee8;
}

.mm-live-signature {
    --mm-accent: #df7437;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    max-width: 560px;
    padding: 22px;
    border-left: 3px solid var(--mm-accent);
    color: #12243e;
    background: #fff;
    transform: scale(var(--mm-preview-scale, 1));
    transform-origin: center;
    transition: transform .35s ease, border-color .35s ease;
}

.mm-live-signature__photo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mm-accent) 20%, transparent);
}

.mm-live-signature__name {
    display: block;
    margin-bottom: 4px;
    font: 600 18px/1.1 var(--mm-tpl-display);
}

.mm-live-signature__role,
.mm-live-signature__contact {
    display: block;
    color: #69788b;
    font: 500 11px/1.55 var(--mm-tpl-body);
}

.mm-live-signature__contact {
    margin-top: 8px;
    color: var(--mm-accent);
}

.mm-live-signature__logo {
    width: 50px;
    max-height: 55px;
    object-fit: contain;
}

.mm-live-signature__banner {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-top: 2px;
    padding: 13px 16px;
    color: #fff;
    background: var(--mm-accent);
    transition: background .35s ease;
}

.mm-live-signature__banner strong {
    font: 600 11px/1.2 var(--mm-tpl-display);
}

.mm-live-signature__banner span {
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-live-signature[data-size="small"] { --mm-preview-scale: .86; }
.mm-live-signature[data-size="medium"] { --mm-preview-scale: 1; }
.mm-live-signature[data-size="large"] { --mm-preview-scale: 1.1; }
.mm-live-signature.is-photo-hidden .mm-live-signature__photo,
.mm-live-signature.is-logo-hidden .mm-live-signature__logo,
.mm-live-signature.is-banner-hidden .mm-live-signature__banner { display: none; }
.mm-live-signature.is-photo-hidden { grid-template-columns: 1fr auto; }
.mm-live-signature.is-logo-hidden { grid-template-columns: auto 1fr; }
.mm-live-signature.is-photo-hidden.is-logo-hidden { grid-template-columns: 1fr; }

.mm-tpl-controls {
    display: flex;
    flex-direction: column;
    padding: 42px 36px 34px;
    background: rgba(7, 29, 60, .76);
}

.mm-tpl-controls__top {
    margin-bottom: 28px;
}

.mm-tpl-controls__top span {
    display: block;
    margin-bottom: 10px;
    color: var(--mm-tpl-orange);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-controls__top h3 {
    margin: 0 0 12px;
    color: #f3f8ff;
    font: 600 31px/1.05 var(--mm-tpl-display);
}

.mm-tpl-controls__top p {
    margin: 0;
    color: rgba(218, 235, 252, .6);
    font: 500 13px/1.52 var(--mm-tpl-body);
}

.mm-tpl-control {
    padding: 21px 0;
    border-top: 1px solid rgba(164, 198, 239, .14);
}

.mm-tpl-control__label {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
    color: rgba(231, 243, 255, .88);
    font: 500 10px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-control__label small {
    color: rgba(199, 220, 244, .45);
    font: inherit;
}

.mm-tpl-swatches,
.mm-tpl-sizes {
    display: flex;
    gap: 9px;
}

.mm-tpl-swatch {
    position: relative;
    width: 32px;
    height: 32px;
    border: 4px solid rgba(6, 24, 51, 1);
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 0 1px rgba(220, 237, 255, .18);
    transition: box-shadow .25s ease, transform .25s ease;
}

.mm-tpl-swatch:hover { transform: translateY(-2px); }
.mm-tpl-swatch.is-active { box-shadow: 0 0 0 2px var(--mm-tpl-orange), 0 0 22px color-mix(in srgb, var(--color) 45%, transparent); }

.mm-tpl-size {
    display: grid;
    min-width: 51px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(188, 215, 248, .17);
    color: rgba(231, 243, 255, .7);
    background: rgba(255, 255, 255, .025);
    font: 500 11px/1 var(--mm-tpl-body);
}

.mm-tpl-size:first-child { border-radius: 6px 0 0 6px; }
.mm-tpl-size:last-child { border-radius: 0 6px 6px 0; }
.mm-tpl-size + .mm-tpl-size { margin-left: -10px; }
.mm-tpl-size.is-active { z-index: 2; border-color: var(--mm-tpl-orange); color: var(--mm-tpl-ink); background: var(--mm-tpl-orange); }

.mm-tpl-toggles {
    display: grid;
    gap: 12px;
}

.mm-tpl-toggle {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    color: rgba(231, 243, 255, .78);
    font: 500 12px/1.2 var(--mm-tpl-body);
    cursor: pointer;
}

.mm-tpl-toggle input {
    position: absolute;
    opacity: 0;
}

.mm-tpl-toggle__track {
    position: relative;
    flex: 0 0 auto;
    width: 39px;
    height: 22px;
    border-radius: 999px;
    background: rgba(195, 220, 249, .17);
    transition: background .25s ease;
}

.mm-tpl-toggle__track::after {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #c7d9ee;
    content: "";
    transition: transform .25s ease, background .25s ease;
}

.mm-tpl-toggle input:checked + .mm-tpl-toggle__track { background: rgba(242, 165, 115, .36); }
.mm-tpl-toggle input:checked + .mm-tpl-toggle__track::after { background: var(--mm-tpl-orange); transform: translateX(17px); }
.mm-tpl-toggle input:focus-visible + .mm-tpl-toggle__track { outline: 2px solid #fff; outline-offset: 3px; }

.mm-tpl-controls__clients {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(164, 198, 239, .14);
}

.mm-tpl-controls__clients span {
    color: rgba(222, 239, 255, .62);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-controls__clients span + span::before {
    margin-right: 8px;
    color: var(--mm-tpl-orange);
    content: "/";
}

.mm-tpl-anatomy {
    position: relative;
    overflow: hidden;
    padding: clamp(110px, 10vw, 168px) 0 clamp(112px, 11vw, 180px);
    color: #edf7ff;
    background:
        radial-gradient(circle at 50% 57%, rgba(67, 126, 230, .2), transparent 28%),
        radial-gradient(circle at 8% 84%, rgba(242, 165, 115, .1), transparent 21%),
        linear-gradient(rgba(113, 162, 231, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(113, 162, 231, .07) 1px, transparent 1px),
        #03142d;
    background-size: auto, auto, 56px 56px, 56px 56px, auto;
}

.mm-tpl-anatomy__head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .62fr);
    gap: clamp(48px, 8vw, 132px);
    align-items: end;
    margin-bottom: 72px;
}

.mm-tpl-anatomy .mm-tpl-title { color: #edf7ff; }

.mm-tpl-anatomy__intro p {
    max-width: 500px;
    margin: 0 0 25px;
    color: rgba(218, 235, 252, .66);
    font: 500 16px/1.62 var(--mm-tpl-body);
}

.mm-tpl-anatomy__intro > span,
.mm-tpl-anatomy__stage-head span:last-child {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: rgba(218, 235, 252, .52);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-anatomy__intro i,
.mm-tpl-anatomy__stage-head i,
.mm-tpl-anatomy__readout-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #48e0bf;
    box-shadow: 0 0 13px rgba(72, 224, 191, .75);
}

.mm-tpl-anatomy__lab {
    display: grid;
    grid-template-columns: 220px minmax(520px, 1fr) 280px;
    min-height: 720px;
    border-top: 1px solid rgba(140, 185, 240, .17);
    border-bottom: 1px solid rgba(140, 185, 240, .17);
    background: linear-gradient(90deg, rgba(10, 39, 78, .35), transparent 19% 80%, rgba(10, 39, 78, .3));
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}

.mm-tpl-anatomy.is-visible .mm-tpl-anatomy__lab { opacity: 1; transform: translateY(0); }

.mm-tpl-anatomy__rail {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    border-right: 1px solid rgba(140, 185, 240, .14);
}

.mm-tpl-anatomy__rail::before {
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 19px;
    width: 1px;
    background: linear-gradient(transparent, rgba(120, 173, 240, .4) 12% 88%, transparent);
    content: "";
}

.mm-tpl-anatomy__rail-head {
    display: flex;
    justify-content: space-between;
    padding: 0 23px 22px;
    color: rgba(208, 228, 250, .42);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-anatomy__rail-head b { color: var(--mm-tpl-orange); font: 600 11px/1 var(--mm-tpl-body); }

.mm-tpl-anatomy__node {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    width: 100%;
    min-height: 88px;
    padding: 16px 17px 16px 0;
    border: 0;
    border-radius: 0;
    color: #eaf4ff;
    background: transparent;
    box-shadow: none;
    text-align: left;
    transition: color .25s ease, background .25s ease, padding .25s ease;
}

.mm-tpl-anatomy__node::before {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(142, 188, 244, .55);
    border-radius: 50%;
    background: #03142d;
    content: "";
    transform: translateY(-50%);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mm-tpl-anatomy__node::after {
    position: absolute;
    inset: 9px 0 9px auto;
    width: 3px;
    background: var(--mm-tpl-orange);
    content: "";
    opacity: 0;
    transform: scaleY(.3);
    transition: opacity .25s ease, transform .25s ease;
}

.mm-tpl-anatomy__node > span {
    grid-column: 2;
    color: var(--mm-tpl-orange);
    font: 600 8px/1 var(--mm-tpl-body);
}

.mm-tpl-anatomy__node strong { grid-column: 2; margin-top: 7px; font: 600 15px/1 var(--mm-tpl-display); }
.mm-tpl-anatomy__node small { grid-column: 2; margin-top: 5px; color: rgba(206, 225, 247, .45); font: 500 9px/1.2 var(--mm-tpl-body); }
.mm-tpl-anatomy__node:hover,
.mm-tpl-anatomy__node:focus-visible,
.mm-tpl-anatomy__node.is-active { outline: none; color: #fff; background: linear-gradient(90deg, rgba(39, 91, 156, .19), rgba(39, 91, 156, .03)); padding-left: 5px; }
.mm-tpl-anatomy__node.is-active::before { border-color: var(--mm-tpl-orange); background: var(--mm-tpl-orange); box-shadow: 0 0 18px rgba(242, 165, 115, .85); }
.mm-tpl-anatomy__node.is-active::after { opacity: 1; transform: scaleY(1); }

.mm-tpl-anatomy__stage {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: radial-gradient(circle at 50% 48%, rgba(64, 126, 225, .18), transparent 38%);
}

.mm-tpl-anatomy__stage-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 24px 28px;
    color: rgba(222, 238, 255, .45);
    border-bottom: 1px solid rgba(140, 185, 240, .12);
    font: 500 9px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-anatomy__machine { position: relative; min-height: 655px; perspective: 1200px; }
.mm-tpl-anatomy__machine::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(580px, 82%);
    height: 420px;
    border: 1px solid rgba(112, 169, 239, .12);
    background: linear-gradient(rgba(112, 169, 239, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 169, 239, .06) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-5deg);
    box-shadow: 0 50px 100px rgba(0, 5, 20, .3);
}

.mm-tpl-anatomy__axis { position: absolute; z-index: 1; background: rgba(121, 173, 240, .14); }
.mm-tpl-anatomy__axis--x { top: 50%; right: 7%; left: 7%; height: 1px; }
.mm-tpl-anatomy__axis--y { top: 10%; bottom: 10%; left: 50%; width: 1px; }
.mm-tpl-anatomy__axis::after { position: absolute; width: 5px; height: 5px; border: 1px solid var(--mm-tpl-orange); border-radius: 50%; content: ""; }
.mm-tpl-anatomy__axis--x::after { top: -2px; left: 50%; }
.mm-tpl-anatomy__axis--y::after { top: 50%; left: -2px; }

.mm-tpl-anatomy__scanner {
    position: absolute;
    z-index: 7;
    top: 100px;
    bottom: 90px;
    left: 14%;
    width: 1px;
    background: linear-gradient(transparent, var(--mm-tpl-orange), transparent);
    box-shadow: 0 0 24px 4px rgba(242, 165, 115, .24);
    animation: mm-anatomy-scan 5.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mm-anatomy-scan { 0%, 100% { left: 14%; opacity: .2; } 50% { left: 86%; opacity: .9; } }

.mm-tpl-anatomy__measure { position: absolute; z-index: 2; color: rgba(192, 218, 247, .35); font: 500 8px/1 var(--mm-tpl-body); text-transform: uppercase; }
.mm-tpl-anatomy__measure--top { top: 76px; left: 50%; transform: translateX(-50%); }
.mm-tpl-anatomy__measure--side { top: 50%; right: 13px; writing-mode: vertical-rl; transform: translateY(-50%); }

.mm-tpl-anatomy__stack { position: absolute; z-index: 4; inset: 82px 34px 85px; transform-style: preserve-3d; }
.mm-tpl-layer {
    --layer-y: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    gap: 12px;
    align-items: center;
    width: min(520px, 88%);
    min-height: 76px;
    padding: 14px 19px;
    border: 0;
    border-radius: 5px;
    color: #102543;
    background: rgba(237, 246, 255, .9);
    box-shadow: 0 18px 28px rgba(0, 8, 26, .2), inset 0 0 0 1px rgba(116, 160, 216, .26);
    text-align: left;
    transform: translate(-50%, calc(-50% + var(--layer-y))) rotateX(54deg) rotateZ(-5deg);
    transform-style: preserve-3d;
    transition: opacity .35s ease, filter .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.mm-tpl-layer::before { position: absolute; inset: 7px; border: 1px dashed rgba(57, 99, 153, .14); border-radius: 3px; content: ""; pointer-events: none; }
.mm-tpl-layer > b { position: absolute; top: 9px; right: 11px; color: rgba(27, 61, 105, .42); font: 600 8px/1 var(--mm-tpl-body); }
.mm-tpl-layer--identity { --layer-y: -190px; z-index: 6; }
.mm-tpl-layer--brand { --layer-y: -116px; z-index: 5; }
.mm-tpl-layer--contact { --layer-y: -42px; z-index: 4; }
.mm-tpl-layer--social { --layer-y: 32px; z-index: 3; }
.mm-tpl-layer--campaign { --layer-y: 106px; z-index: 2; color: #071a36; background: linear-gradient(100deg, #f7b17f, #ef8e58); }
.mm-tpl-layer--legal { --layer-y: 180px; z-index: 1; }
.mm-tpl-layer:hover,
.mm-tpl-layer:focus-visible,
.mm-tpl-layer.is-active { outline: none; transform: translate(calc(-50% + 24px), calc(-50% + var(--layer-y) - 8px)) rotateX(47deg) rotateZ(-3deg) scale(1.035); box-shadow: 0 28px 48px rgba(0, 8, 26, .38), 0 0 0 1px rgba(242, 165, 115, .8), 0 0 40px rgba(70, 134, 225, .2); }
.mm-tpl-anatomy[data-active-layer]:not([data-active-layer=""]) .mm-tpl-layer:not(.is-active) { opacity: .34; filter: grayscale(.65) brightness(.7); }

.mm-tpl-layer--identity img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.mm-tpl-layer--identity strong { display: block; font: 600 16px/1 var(--mm-tpl-display); }
.mm-tpl-layer--identity small { display: block; margin-top: 5px; color: #687a92; font: 500 9px/1 var(--mm-tpl-body); }
.mm-tpl-layer--brand { justify-content: space-between; }
.mm-tpl-layer--brand img { width: 105px; height: 38px; object-fit: contain; }
.mm-tpl-layer__swatches { display: flex; gap: 7px; margin-right: 35px; }
.mm-tpl-layer__swatches i { width: 18px; height: 18px; border-radius: 50%; background: #f4a06d; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .45); }
.mm-tpl-layer__swatches i:nth-child(2) { background: #173c70; }
.mm-tpl-layer__swatches i:nth-child(3) { background: #79a9eb; }
.mm-tpl-layer--contact { flex-wrap: wrap; gap: 8px 18px; color: #61728a; font: 500 9px/1 var(--mm-tpl-body); }
.mm-tpl-layer--social span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #173c70; font: 600 8px/1 var(--mm-tpl-body); }
.mm-tpl-layer--social em { margin-left: auto; margin-right: 25px; color: #6f7f93; font: 500 8px/1 var(--mm-tpl-body); font-style: normal; text-transform: uppercase; }
.mm-tpl-layer--campaign { justify-content: space-between; }
.mm-tpl-layer--campaign strong { font: 600 12px/1 var(--mm-tpl-display); }
.mm-tpl-layer--campaign span { margin-right: 25px; font: 600 8px/1 var(--mm-tpl-body); text-transform: uppercase; }
.mm-tpl-layer--legal span { max-width: 88%; color: #7f8c9d; font: 500 8px/1.5 var(--mm-tpl-body); }

.mm-tpl-anatomy__receiver {
    position: absolute;
    right: 7%;
    bottom: 20px;
    left: 7%;
    display: flex;
    gap: 18px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(133, 180, 237, .16);
    color: rgba(200, 222, 248, .42);
    font: 500 8px/1 var(--mm-tpl-body);
    text-transform: uppercase;
}

.mm-tpl-anatomy__receiver b { margin-left: auto; color: #48e0bf; font: inherit; }

.mm-tpl-anatomy__readout {
    position: relative;
    z-index: 3;
    align-self: stretch;
    padding: 34px 28px;
    border-left: 1px solid rgba(140, 185, 240, .14);
    background: linear-gradient(180deg, rgba(14, 48, 91, .24), rgba(4, 21, 46, .1));
}

.mm-tpl-anatomy__readout::after { position: absolute; right: 0; bottom: 0; width: 90px; height: 90px; border-right: 1px solid rgba(242, 165, 115, .38); border-bottom: 1px solid rgba(242, 165, 115, .38); content: ""; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.mm-tpl-anatomy__readout-count { display: flex; align-items: baseline; margin-bottom: 86px; color: var(--mm-tpl-orange); }
.mm-tpl-anatomy__readout-count span { font: 600 54px/.8 var(--mm-tpl-display); }
.mm-tpl-anatomy__readout-count small { color: rgba(210, 230, 252, .35); font: 500 10px/1 var(--mm-tpl-body); }
.mm-tpl-anatomy__readout-kicker { color: rgba(210, 230, 252, .42); font: 500 8px/1 var(--mm-tpl-body); text-transform: uppercase; }
.mm-tpl-anatomy__readout h3 { margin: 16px 0 18px; color: #edf7ff; font: 600 31px/.95 var(--mm-tpl-display); }
.mm-tpl-anatomy__readout p { min-height: 115px; margin: 0; color: rgba(210, 230, 252, .58); font: 500 13px/1.6 var(--mm-tpl-body); }
.mm-tpl-anatomy__readout dl { margin: 26px 0 0; }
.mm-tpl-anatomy__readout dl div { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0; border-top: 1px solid rgba(140, 185, 240, .12); }
.mm-tpl-anatomy__readout dt { color: rgba(210, 230, 252, .35); font: 500 8px/1 var(--mm-tpl-body); text-transform: uppercase; }
.mm-tpl-anatomy__readout dd { margin: 0; color: rgba(232, 243, 255, .76); font: 500 9px/1 var(--mm-tpl-body); text-align: right; }
.mm-tpl-anatomy__readout-status { position: absolute; right: 28px; bottom: 34px; left: 28px; display: flex; gap: 8px; align-items: center; color: rgba(210, 230, 252, .44); font: 500 8px/1.3 var(--mm-tpl-body); text-transform: uppercase; }

@media (max-width: 1199px) {
    .mm-tpl-slide {
        width: calc(100% - 110px);
        grid-template-columns: minmax(275px, .78fr) minmax(0, 1.22fr);
    }

    .mm-tpl-runway { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); }
    .mm-tpl-runway__copy { padding: 46px 38px; }
    .mm-tpl-proof { width: min(86%, 620px); }
    .mm-tpl-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mm-tpl-studio__desk { grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); }
    .mm-tpl-anatomy__lab { grid-template-columns: 190px minmax(450px, 1fr) 240px; }
    .mm-tpl-anatomy__node { width: 100%; }
    .mm-tpl-anatomy__readout { padding-inline: 22px; }
    .mm-tpl-anatomy__readout-status { right: 22px; left: 22px; }
}

@media (max-width: 991px) {
    .mm-tpl-intro,
    .mm-tpl-library__head,
    .mm-tpl-studio__head,
    .mm-tpl-studio__desk {
        grid-template-columns: 1fr;
    }

    .mm-tpl-intro { gap: 30px; }
    .mm-tpl-title { font-size: clamp(42px, 8vw, 66px); }
    .mm-tpl-featured { min-height: 720px; }
    .mm-tpl-featured__viewport { inset: 62px 0 78px; }
    .mm-tpl-slide {
        grid-template-columns: 1fr;
        grid-template-rows: 270px 1fr;
        width: calc(100% - 72px);
        height: 570px;
    }
    .mm-tpl-slide__visual { grid-row: 1; }
    .mm-tpl-slide__copy { grid-row: 2; padding: 30px; }
    .mm-tpl-slide__body p { max-width: 560px; }
    .mm-tpl-slide__meta { margin: 15px 0 18px; }
    .mm-tpl-slide[data-state="previous"],
    .mm-tpl-slide[data-state="next"] { opacity: 0; }
    .mm-tpl-library__bar {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 34px;
        border-top: 0;
    }
    .mm-tpl-library__filters {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .mm-tpl-library__filters::-webkit-scrollbar { display: none; }
    .mm-tpl-filter { flex: 0 0 auto; }
    .mm-tpl-library__navigation { align-self: flex-end; }
    .mm-tpl-runway { grid-template-columns: 1fr; min-height: 0; }
    .mm-tpl-runway__copy { justify-content: flex-start; padding: 44px 42px 36px; }
    .mm-tpl-runway__copy::after { inset: auto 7% 0; width: auto; height: 1px; }
    .mm-tpl-runway__stage { min-height: 500px; }
    .mm-tpl-proof { width: min(84%, 680px); min-width: 0; }
    .mm-tpl-timeline {
        display: flex;
        overflow-x: auto;
        padding: 0 0 10px;
        scrollbar-width: none;
    }
    .mm-tpl-timeline::-webkit-scrollbar { display: none; }
    .mm-tpl-timeline button { flex: 0 0 190px; }
    .mm-tpl-preview { min-height: 500px; border-right: 0; border-bottom: 1px solid rgba(149, 189, 240, .14); }
    .mm-tpl-anatomy__head { grid-template-columns: 1fr; margin-bottom: 50px; }
    .mm-tpl-anatomy__lab { grid-template-columns: 1fr; }
    .mm-tpl-anatomy__stage { grid-row: 1; }
    .mm-tpl-anatomy__machine { min-height: 620px; }
    .mm-tpl-anatomy__rail { grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 0; border-top: 1px solid rgba(140, 185, 240, .14); border-right: 0; }
    .mm-tpl-anatomy__rail::before { display: none; }
    .mm-tpl-anatomy__rail-head { grid-column: 1 / -1; padding: 0 18px 12px; }
    .mm-tpl-anatomy__node { min-height: 76px; padding: 13px 12px; grid-template-columns: 28px 1fr; }
    .mm-tpl-anatomy__node::before { display: none; }
    .mm-tpl-anatomy__node > span { grid-column: 1; grid-row: 1 / 3; align-self: center; }
    .mm-tpl-anatomy__node strong,
    .mm-tpl-anatomy__node small { grid-column: 2; }
    .mm-tpl-anatomy__node.is-active { padding-left: 12px; }
    .mm-tpl-anatomy__readout { grid-row: 3; display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(260px, .8fr); gap: 18px 28px; padding: 28px; border-top: 1px solid rgba(140, 185, 240, .14); border-left: 0; }
    .mm-tpl-anatomy__readout-count { grid-row: 1 / 4; margin: 0; }
    .mm-tpl-anatomy__readout-kicker { align-self: end; }
    .mm-tpl-anatomy__readout h3 { margin: 0; }
    .mm-tpl-anatomy__readout p { grid-column: 3; grid-row: 1 / 4; min-height: 0; }
    .mm-tpl-anatomy__readout dl { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 5px 0 0; }
    .mm-tpl-anatomy__readout dl div { display: block; padding: 12px 12px 0 0; }
    .mm-tpl-anatomy__readout dd { margin-top: 7px; text-align: left; }
    .mm-tpl-anatomy__readout-status { display: none; }
}

@media (max-width: 767px) {
    .mm-tpl-page { background-size: auto, auto, 40px 40px, 40px 40px, auto; }
    .mm-tpl-intro { padding-top: 78px; padding-bottom: 38px; }
    .mm-tpl-title { font-size: clamp(36px, 11vw, 52px); line-height: 1; }
    .mm-tpl-intro__copy p { font-size: 15px; }
    .mm-tpl-intro__ledger { grid-template-columns: 1fr; }
    .mm-tpl-intro__ledger span + span { padding-left: 0; border-top: 1px solid var(--mm-tpl-line); border-left: 0; }
    .mm-tpl-featured { min-height: 675px; margin-inline: -12px; border-radius: 0; }
    .mm-tpl-featured__top { padding: 23px 20px 0; }
    .mm-tpl-featured__viewport { inset: 58px 0 73px; }
    .mm-tpl-slide { width: calc(100% - 28px); height: 535px; grid-template-rows: 225px 1fr; }
    .mm-tpl-slide__copy { padding: 24px 21px; }
    .mm-tpl-slide h3 { font-size: 32px; }
    .mm-tpl-slide__body p { font-size: 12px; }
    .mm-tpl-pill { min-height: 27px; padding: 6px 9px; font-size: 8px; }
    .mm-tpl-featured__controls { right: 18px; bottom: 19px; left: 18px; grid-template-columns: 39px 61px 1fr 39px; gap: 8px; }
    .mm-tpl-icon-button { width: 39px; height: 39px; }
    .mm-tpl-library { padding-block: 92px 110px; }
    .mm-tpl-library__head { margin-bottom: 34px; }
    .mm-tpl-library__head p { font-size: 14px; }
    .mm-tpl-library__bar { gap: 18px; }
    .mm-tpl-filter { min-height: 38px; padding: 0 15px; }
    .mm-tpl-library__navigation { align-self: flex-start; }
    .mm-tpl-runway { margin-inline: -12px; border-radius: 0; }
    .mm-tpl-runway__copy { padding: 36px 22px 30px; }
    .mm-tpl-runway__copy h3 { font-size: 38px; }
    .mm-tpl-runway__pills { margin-top: 24px; }
    .mm-tpl-runway__action { margin-top: 26px; }
    .mm-tpl-runway__stage { min-height: 380px; }
    .mm-tpl-runway__status { top: 19px; right: 20px; }
    .mm-tpl-proof { width: calc(100% - 34px); }
    .mm-tpl-proof__sheet { min-height: 270px; }
    .mm-tpl-proof__sheet img { max-height: 330px; }
    .mm-tpl-timeline { margin-top: 14px; margin-inline: -12px; padding: 0 12px 9px; }
    .mm-tpl-timeline button { flex-basis: 162px; }
    .mm-tpl-studio { padding-block: 92px 108px; }
    .mm-tpl-studio__head { margin-bottom: 38px; }
    .mm-tpl-studio__desk { margin-inline: -12px; border-radius: 0; }
    .mm-tpl-preview { min-height: 425px; padding: 65px 16px 42px; }
    .mm-tpl-preview__inbox { padding: 15px; }
    .mm-live-signature { grid-template-columns: auto 1fr; gap: 12px; padding: 15px; }
    .mm-live-signature__photo { width: 56px; height: 56px; }
    .mm-live-signature__logo { display: none; }
    .mm-live-signature__banner { font-size: 9px; }
    .mm-live-signature[data-size="large"] { --mm-preview-scale: 1.02; }
    .mm-tpl-controls { padding: 34px 22px 30px; }
    .mm-tpl-anatomy { padding-block: 92px 108px; }
    .mm-tpl-anatomy__head { gap: 26px; margin-bottom: 40px; }
    .mm-tpl-anatomy__intro p { font-size: 14px; }
    .mm-tpl-anatomy__lab { margin-inline: -12px; }
    .mm-tpl-anatomy__stage-head { padding: 18px 16px; }
    .mm-tpl-anatomy__machine { min-height: 500px; }
    .mm-tpl-anatomy__stack { inset: 62px 2px 70px; }
    .mm-tpl-layer { --mobile-scale: .84; width: 92%; min-height: 62px; padding: 10px 13px; transform: translate(-50%, calc(-50% + var(--layer-y))) rotateX(49deg) rotateZ(-4deg) scale(var(--mobile-scale)); }
    .mm-tpl-layer:hover,
    .mm-tpl-layer:focus-visible,
    .mm-tpl-layer.is-active { transform: translate(calc(-50% + 8px), calc(-50% + var(--layer-y) - 4px)) rotateX(43deg) rotateZ(-2deg) scale(.88); }
    .mm-tpl-layer--identity { --layer-y: -145px; }
    .mm-tpl-layer--brand { --layer-y: -88px; }
    .mm-tpl-layer--contact { --layer-y: -31px; }
    .mm-tpl-layer--social { --layer-y: 26px; }
    .mm-tpl-layer--campaign { --layer-y: 83px; }
    .mm-tpl-layer--legal { --layer-y: 140px; }
    .mm-tpl-layer--identity img { width: 40px; height: 40px; }
    .mm-tpl-layer--identity strong { font-size: 13px; }
    .mm-tpl-layer--brand img { width: 80px; }
    .mm-tpl-layer--contact span:nth-child(3),
    .mm-tpl-layer--social em { display: none; }
    .mm-tpl-anatomy__receiver { right: 14px; left: 14px; gap: 9px; font-size: 6px; }
    .mm-tpl-anatomy__measure--side { display: none; }
    .mm-tpl-anatomy__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-tpl-anatomy__node { min-height: 66px; }
    .mm-tpl-anatomy__readout { display: block; padding: 26px 20px 32px; }
    .mm-tpl-anatomy__readout-count { margin-bottom: 28px; }
    .mm-tpl-anatomy__readout h3 { margin: 12px 0 14px; font-size: 28px; }
    .mm-tpl-anatomy__readout p { min-height: 0; }
    .mm-tpl-anatomy__readout dl { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; }
    .mm-tpl-anatomy__readout dl div:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-tpl-slide,
    .mm-tpl-slide__visual img,
    .mm-tpl-proof,
    .mm-tpl-proof__sheet img,
    .mm-live-signature {
        transition-duration: .01ms !important;
    }
    .mm-tpl-anatomy__node,
    .mm-tpl-anatomy__lab,
    .mm-tpl-layer {
        transition-duration: .01ms !important;
    }
    .mm-tpl-anatomy__scanner { animation: none !important; }
}