* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #eeedf1;
    color: #24232a;
    font: 15px/1.6 Arial, sans-serif
}

button {
    font: inherit;
    cursor: pointer;
    border: 1px solid #c6c2d1;
    background: white;
    padding: 12px 20px;
    border-radius: var(--bm-radius-pill);
    color: inherit
}

button:hover,
button[aria-pressed=true] {
    background: #ede7fb;
    border-color: #8051d2
}

a {
    color: inherit
}

.toolbar {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #d6d3de;
    padding: 12px 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    z-index: 4
}

.toolbar strong {
    margin-right: auto
}

.toolbar small {
    color: #666
}

.shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 24px;
    max-width: 1800px;
    margin: auto
}

.side {
    position: sticky;
    top: 88px;
    align-self: start
}

.side a {
    display: block;
    text-decoration: none;
    padding: 7px 8px;
    font-size: 13px
}

.side p {
    font-size: 13px;
    color: #68636f
}

.canvas {
    max-width: 1200px;
    margin: auto;
    background: white;
    width: 100%;
    transition: max-width .2s
}

.section {
    padding: 52px 48px;
    border-bottom: 1px solid #d9d6df;
    scroll-margin-top: 90px
}

.section header {
    font: 12px monospace;
    color: #7856a0;
    letter-spacing: .04em;
    margin-bottom: 24px
}

.section h1 {
    font-size: clamp(36px, 4.3vw, 68px);
    line-height: 1.13;
    letter-spacing: -.04em;
    margin: 22px 0
}

.section h2 {
    font-size: 36px;
    line-height: 1.22;
    letter-spacing: -.025em;
    margin: 0 0 24px
}

.section h3 {
    font-size: 21px;
    line-height: 1.3
}

.section p {
    max-width: 62ch;
    color: #625e6a
}

.eyebrow {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .1em
}

.navrow,
.heading,
.intro,
.meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px
}

.navrow span {
    font-size: 12px
}

.intro p {
    max-width: 55ch
}

.intro button {
    white-space: nowrap
}

.stage {
    position: relative;
    background: #f0eef5;
    padding: 42px 65px 46px;
    margin-top: 30px
}

.browser {
    border: 1px solid #aaa5b4;
    background: white;
    border-radius: var(--bm-radius-card);
    overflow: hidden;
    margin-right: 50px
}

.browser small {
    display: block;
    padding: 8px 16px;
    border-bottom: 1px solid #ddd
}

.image {
    min-height: 200px;
    background: repeating-linear-gradient(135deg, #f2f1f5, #f2f1f5 12px, #eceaf0 12px, #eceaf0 13px);
    border: 1px solid #d5d1de;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #706a7c;
    padding: 20px
}

.image em {
    font-size: 12px;
    font-style: normal
}

.stage .image {
    height: 260px
}

.phone {
    position: absolute;
    right: 38px;
    bottom: 66px;
    width: 110px;
    height: 195px;
    border: 5px solid #bcb6c8;
    border-radius: var(--bm-radius-card);
    background: #e6e1ef;
    display: grid;
    place-content: center;
    text-align: center
}

.caption {
    display: block;
    font-size: 11px;
    margin-top: 14px;
    color: #766f81
}

.logos {
    display: flex;
    gap: 18px
}

.logos div {
    border: 1px dashed #b8b3c2;
    flex: 1;
    text-align: center;
    padding: 20px 10px;
    color: #837a91
}

.placeholder {
    font-size: 12px !important;
    color: #8a769b !important
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.wide {
    height: 330px
}

.meta {
    padding: 14px 0 28px
}

.meta span {
    font-size: 12px
}

.service {
    display: grid;
    grid-template-columns: 25px 1fr 1.2fr 20px;
    align-items: center;
    gap: 20px;
    padding: 14px 7px;
    border-top: 1px solid #d8d4df
}

.service p {
    font-size: 14px
}

.steps {
    display: flex;
    gap: 10px;
    margin-bottom: 20px
}

.steps button {
    flex: 1;
    font-size: 12px
}

.process-preview {
    border: 1px solid #c5c0ce;
    border-radius: var(--bm-radius-card);
    padding: 24px;
    max-width: 700px;
    background: #fafafa
}

.minihead {
    height: 12px;
    background: #c5c0cb;
    width: 30%;
    margin-bottom: 25px
}

.minibody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.minibody i {
    display: block;
    height: 14px;
    background: #dad7df;
    margin: 15px 0
}

.minipic {
    height: 115px;
    background: #e2dfe7
}

.minicards {
    display: flex;
    gap: 15px;
    margin-top: 25px
}

.minicards i {
    height: 55px;
    flex: 1;
    background: #e2dfe7
}

.process-preview.brand {
    background: #faf7ff
}

.brand .minihead,
.brand .minibody i {
    background: #9370ce
}

.brand .minipic {
    background: #dbccf3
}

.process-preview.finished {
    box-shadow: 0 12px 25px #7d5ba11c
}

.finished .minipic {
    border-radius: 35px 5px 35px 5px
}

.finished .minicards i {
    border-radius: var(--bm-radius-media);
    background: #b3a0d0
}

.portrait {
    height: 340px
}

.section details {
    margin-top: 28px;
    padding: 14px;
    background: #faf9fc;
    border-left: 3px solid #a18abc;
    font-size: 13px
}

.section summary {
    cursor: pointer;
    font-weight: bold
}

.section details p {
    max-width: none
}

.section details b {
    color: #35313c
}

#contact {
    background: #f5f0fb
}

#header,
#footer {
    padding-block: 28px
}

.mobile {
    max-width: 390px
}

.mobile .section {
    padding: 28px 22px
}

.mobile .navrow span {
    display: none
}

.mobile .navrow button {
    font-size: 11px;
    padding: 8px
}

.mobile h1 {
    font-size: 36px
}

.mobile h2 {
    font-size: 29px
}

.mobile .grid2,
.mobile .grid3 {
    grid-template-columns: 1fr
}

.mobile .heading,
.mobile .intro {
    display: block
}

.mobile .stage {
    padding: 20px;
    margin-top: 24px
}

.mobile .browser {
    margin: 0
}

.mobile .stage .image {
    height: 170px;
    min-height: 170px
}

.mobile .phone {
    display: none
}

.mobile .logos {
    overflow: auto
}

.mobile .logos div {
    min-width: 105px
}

.mobile .service {
    grid-template-columns: 20px 1fr 15px;
    gap: 10px
}

.mobile .service p {
    grid-column: 2
}

.mobile .service b {
    grid-row: 1;
    grid-column: 3
}

.mobile .service h3 {
    font-size: 19px
}

.mobile .steps {
    flex-direction: column
}

.mobile .wide {
    height: 190px
}

.mobile .meta {
    gap: 10px
}

.mobile .meta span {
    font-size: 11px
}

.mobile .minibody {
    gap: 15px
}

.mobile .minipic {
    height: 85px
}

.mobile .portrait {
    height: 270px
}

.notes-off .design-note {
    display: none
}

@media(max-width:900px) {
    .shell {
        grid-template-columns: 1fr;
        padding: 12px
    }

    .side {
        position: static
    }

    .side nav {
        display: flex;
        overflow: auto
    }

    .side a {
        white-space: nowrap
    }

    .side p {
        display: none
    }

    .toolbar {
        flex-wrap: wrap;
        padding: 10px
    }

    .toolbar small {
        display: none
    }

    .section {
        padding: 32px 24px
    }

    .grid2,
    .grid3 {
        grid-template-columns: 1fr
    }

    .navrow span {
        display: none
    }

    .section h1 {
        font-size: 42px
    }

    .service {
        grid-template-columns: 20px 1fr
    }

    .service p {
        grid-column: 2
    }

    .stage {
        padding: 25px
    }

    .phone {
        display: none
    }

    .browser {
        margin: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }
}

.image {
    aspect-ratio: 16/9;
    min-height: 0;
    height: auto
}

.wide {
    height: auto;
    aspect-ratio: 16/9
}

.portrait,
.mobile .portrait {
    height: auto;
    aspect-ratio: 3/2
}

.mobile .wide {
    height: auto
}

.mobile h1 br {
    display: none
}

.mobile h1 {
    text-wrap: balance;
    font-size: 34px
}

.wire-menu {
    display: none
}

.navrow {
    position: relative
}

.wire-menu a {
    display: block;
    padding: 9px
}

.section .wire-menu {
    margin: 0;
    padding: 7px;
    border: 0
}

.notice {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 22px;
    background: #fff;
    border: 1px solid #9175b2;
    box-shadow: 0 4px 30px #0001;
    max-width: 90vw;
    z-index: 10
}

.notice:empty {
    display: none
}

.mobile .navrow>button {
    display: none
}

.mobile .wire-menu {
    display: block
}

.mobile .wire-menu[open] {
    position: absolute;
    right: 0;
    top: 0;
    background: white;
    box-shadow: 0 8px 30px #0002;
    z-index: 3;
    min-width: 180px
}

.meta button {
    font-size: 12px;
    padding: 8px
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid #7753b8;
    outline-offset: 3px
}

@media(max-width:600px) {
    .shell {
        padding: 0
    }

    .canvas {
        max-width: 100%
    }

    .side {
        padding: 12px
    }

    .toolbar {
        gap: 7px
    }

    .toolbar strong {
        font-size: 13px
    }

    .toolbar button {
        padding: 8px
    }

    .navrow>button {
        display: none
    }

    .wire-menu {
        display: block
    }
}