/*
 | MIXX interface layer
 | Hand-written, no build step. Loaded after app.css.
 |
 | One idea runs through all of it: the three leaning bars of the MIXX mark.
 | They are the selection mark, the level meter, the bullets and the "go" sign.
 */

:root {
    /* Ink and surfaces. Navy is the wordmark colour of the logo. */
    --mx-ink: #000051;
    --mx-ink-2: #3d3d70;
    --mx-mute: #7a7a99;
    --mx-line: #e7e0f4;
    --mx-line-strong: #cbbdea;
    --mx-surface: #fff;
    --mx-wash: #f7f1ff;

    /* One action colour. Nothing else on the page is this purple. */
    --mx-action: #9337fb;
    --mx-action-hover: #8526f5;
    --mx-action-press: #7505f4;

    /* Offer: the magenta end of the logo gradient, darkened for text. */
    --mx-offer-ink: #a80589;
    --mx-offer-bg: #ffe6fb;

    /* The logo gradient, left to right. */
    --mx-spectrum: linear-gradient(90deg, #00b6d5 4%, #6704d8 39%, #ff04d8 82%);

    /* The outline of one bar of the mark, and of its short third bar. */
    --mx-bar: polygon(57.14% 0, 100% 0, 100% 9.09%, 42.86% 81.82%, 42.86% 100%, 0 100%, 0 81.82%, 57.14% 9.09%);
    --mx-bar-short: polygon(57.14% 0, 100% 50%, 85.71% 66.67%, 85.71% 100%, 0 100%, 0 66.67%);

    --mx-r-s: 10px;
    --mx-r-m: 14px;
    --mx-r-l: 22px;

    --mx-shadow: 0 1px 0 rgba(0, 0, 81, .04), 0 18px 40px -18px rgba(0, 0, 81, .28);

    --mx-ease: cubic-bezier(.16, 1, .3, 1);
    --mx-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ------------------------------------------------------------------------
 | Site-wide feel
 * --------------------------------------------------------------------- */

/* Pages cross-fade into each other instead of flashing white. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .18s;
}

#header {
    view-transition-name: mx-header;
}

/* Content is never hidden waiting for a script. Once ui.js runs, things below
   the fold arrive when they come into view (see the smoothness pass). */
html [data-aos][data-aos][data-aos] {
    opacity: 1;
    transform: none;
    transition: none;
}

@keyframes mx-arrive {
    from {
        opacity: .2;
        translate: 0 20px;
    }
}

/* Focus shows for the keyboard, not for every mouse click. */
:focus:not(:focus-visible) {
    outline: none !important;
}

:focus-visible {
    outline: 2px solid var(--mx-ink) !important;
    outline-offset: 3px;
}

input:not([type='radio']):not([type='checkbox']):focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none !important;
}

::selection {
    background: #e0c6fe;
    color: var(--mx-ink);
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    text-wrap: balance;
}

/* Headings take the ink of the logo. Zero specificity, so any heading that
   sets its own colour (white on purple, gradient text) keeps it. */
:where(.h1, .h2, .h3, .h4) {
    color: var(--mx-ink);
}

p {
    text-wrap: pretty;
}

/* Every button gives a little under the finger. */
.btn,
.btn-sm {
    -webkit-tap-highlight-color: transparent;
}

.btn:active,
.btn-sm:active {
    transform: translateY(1px) scale(.98);
    transition-duration: 80ms;
}

/* ------------------------------------------------------------------------
 | The mark: three leaning bars
 * --------------------------------------------------------------------- */

.mx-bars {
    --w: 7px;
    --h: 11px;
    display: inline-flex;
    align-items: flex-end;
    flex: none;
    vertical-align: -1px;
}

.mx-bars i {
    width: var(--w);
    height: var(--h);
    background-color: var(--mx-line);
    background-size: calc(var(--w) * 1.93) var(--h);
    background-repeat: no-repeat;
    background-position: 0 100%;
    clip-path: var(--mx-bar);
    transform-origin: 50% 100%;
    transition: background-color .2s var(--mx-ease);
}

.mx-bars i + i {
    margin-left: calc(var(--w) * -.286);
    background-position: calc(var(--w) * -.714) 100%;
}

.mx-bars i:nth-child(3) {
    width: calc(var(--w) * .5);
    height: calc(var(--h) * .545);
    background-position: calc(var(--w) * -1.428) 100%;
    clip-path: var(--mx-bar-short);
}

.mx-bars.is-lit i {
    background-image: var(--mx-spectrum);
}

@keyframes mx-rise {
    0% {
        transform: scaleY(.3);
    }

    62% {
        transform: scaleY(1.14);
    }

    100% {
        transform: scaleY(1);
    }
}

/* ------------------------------------------------------------------------
 | Product page heading
 * --------------------------------------------------------------------- */

/* The mark, enormous and faint, leaning in from the corner of every
   product page. Crop the logo out of a screenshot and it is still MIXX. */
#pricing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

#pricing::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -40px;
    right: -150px;
    width: 420px;
    aspect-ratio: 121.5 / 99;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.5 99'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='.04' stop-color='%2300b6d5'/%3E%3Cstop offset='.39' stop-color='%236704d8'/%3E%3Cstop offset='.82' stop-color='%23ff04d8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpath d='M57.5 0Q63 0 63 5.5L63 14Q63 18 58.53 25.81L31.47 73.19Q27 81 27 85L27 93.5Q27 99 21.5 99L5.5 99Q0 99 0 93.5L0 85Q0 81 4.47 73.19L31.53 25.81Q36 18 36 14L36 5.5Q36 0 41.5 0zM102.5 0Q108 0 108 5.5L108 14Q108 18 103.53 25.81L76.47 73.19Q72 81 72 85L72 93.5Q72 99 66.5 99L50.5 99Q45 99 45 93.5L45 85Q45 81 49.47 73.19L76.53 25.81Q81 18 81 14L81 5.5Q81 0 86.5 0zM119.52 69.65Q121.5 73.13 119.52 76.6L118.74 77.96Q117 81 117 85L117 93.5Q117 99 111.5 99L95.5 99Q90 99 90 93.5L90 85Q90 81 94.47 73.19L105.52 53.84Q108 49.5 110.48 53.84z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / contain;
    opacity: .07;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
}

@media (min-width: 1024px) {
    #pricing::before {
        top: -70px;
        right: -190px;
        width: 860px;
    }
}

.mx-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--mx-ink-2);
}

/* ------------------------------------------------------------------------
 | Package picker
 * --------------------------------------------------------------------- */

.pk {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 30rem;
    margin-inline: auto;
    color: var(--mx-ink);
}

.pk-main {
    display: contents;
}

.pk-set {
    order: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pk-side {
    order: 2;
}

.pk-assure {
    order: 3;
}

/* Three across on a phone. The template works out a column count for wider
   screens that the ladder divides into, and lets the last tile take whatever
   is left of its row, so there is never a ragged gap. */
.pk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pk-tile:last-child {
    grid-column: span var(--last-s, 1);
}

/* A tile */

.pk-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.pk-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-height: 88px;
    margin: 0;
    padding: 13px 12px 11px;
    border-radius: var(--mx-r-m);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    color: var(--mx-ink);
    cursor: pointer;
    user-select: none;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .22s var(--mx-ease), color .22s var(--mx-ease), transform .08s ease-out;
}

/* The navy of a chosen tile sweeps in from the left, leaning like the mark. */
.pk-tile::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--mx-ink);
    clip-path: polygon(0 0, 0 0, -50% 100%, 0 100%);
    transition: clip-path .36s var(--mx-ease);
}

.pk-tile:has(.pk-radio:checked)::before,
.pk-tile.is-on::before {
    clip-path: polygon(0 0, 150% 0, 100% 100%, 0 100%);
}

.pk-tile:has(.pk-radio:checked) .pk-qty,
.pk-tile.is-on .pk-qty {
    animation: pk-pop .4s var(--mx-spring);
}

@keyframes pk-pop {
    0% {
        scale: .86;
    }
}

.pk-qty {
    font-size: clamp(1.125rem, 5.3vw, 1.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
}

.pk-tile-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
}

.pk-tile-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    line-height: 1;
}

.pk-tile-price b {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mx-ink-2);
    transition: color .22s var(--mx-ease);
}

.pk-tile-price s {
    font-size: .75rem;
    color: var(--mx-mute);
    transition: color .22s var(--mx-ease);
}

.pk-tile .mx-bars {
    margin-bottom: 1px;
}

/* A last tile that spans its row has room to say why it is the best value. */
.pk-tile-note {
    display: none;
    margin: 0 4px 0 auto;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--mx-mute);
    text-align: right;
    transition: color .22s var(--mx-ease);
}

.pk-tile:has(.pk-radio:checked) .pk-tile-note,
.pk-tile.is-on .pk-tile-note {
    color: #a9a9d6;
}

@media (max-width: 639px) {
    .pk-tile.is-wide-s .pk-tile-note {
        display: block;
    }
}

@media (hover: hover) {
    .pk-tile:hover {
        box-shadow: inset 0 0 0 1px var(--mx-line-strong), 0 10px 18px -14px rgba(0, 0, 81, .5);
    }

    .pk-tile:hover .mx-bars i {
        background-color: var(--mx-line-strong);
    }
}

.pk-tile:active {
    transform: scale(.965);
}

/* The chosen tile takes the ink of the logo, and the mark lights up on it. */
.pk-tile:has(.pk-radio:checked),
.pk-tile.is-on {
    box-shadow: inset 0 0 0 1px var(--mx-ink), 0 14px 26px -16px rgba(0, 0, 81, .7);
    color: #fff;
}

.pk-tile:has(.pk-radio:checked) .pk-tile-price b,
.pk-tile.is-on .pk-tile-price b {
    color: #fff;
}

.pk-tile:has(.pk-radio:checked) .pk-tile-price s,
.pk-tile.is-on .pk-tile-price s {
    color: #a9a9d6;
}

.pk-tile:has(.pk-radio:checked) .mx-bars i,
.pk-tile.is-on .mx-bars i {
    background-image: var(--mx-spectrum);
    animation: mx-rise .5s var(--mx-spring) both;
}

.pk-tile:has(.pk-radio:checked) .mx-bars i:nth-child(2),
.pk-tile.is-on .mx-bars i:nth-child(2) {
    animation-delay: 60ms;
}

.pk-tile:has(.pk-radio:checked) .mx-bars i:nth-child(3),
.pk-tile.is-on .mx-bars i:nth-child(3) {
    animation-delay: 120ms;
}

.pk-tile:has(.pk-radio:focus-visible) {
    outline: 2px solid var(--mx-action);
    outline-offset: 3px;
}

/* The one flag in the grid: a leaning tab on the top edge. */
.pk-flag {
    position: absolute;
    top: -8px;
    right: 9px;
    padding: 3px 10px 4px;
    background: var(--mx-offer-bg);
    color: var(--mx-offer-ink);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* The price card */

.pk-panels {
    padding: 20px 20px 18px;
    border-radius: var(--mx-r-l);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line), var(--mx-shadow);
}

.pk-panel {
    display: none;
}

.pk-panel.is-default {
    display: block;
}

.pk:has(.pk-radio:checked) .pk-panel.is-default {
    display: none;
}

.pk:has(.pk-tile:nth-child(1) .pk-radio:checked) .pk-panel:nth-child(1),
.pk:has(.pk-tile:nth-child(2) .pk-radio:checked) .pk-panel:nth-child(2),
.pk:has(.pk-tile:nth-child(3) .pk-radio:checked) .pk-panel:nth-child(3),
.pk:has(.pk-tile:nth-child(4) .pk-radio:checked) .pk-panel:nth-child(4),
.pk:has(.pk-tile:nth-child(5) .pk-radio:checked) .pk-panel:nth-child(5),
.pk:has(.pk-tile:nth-child(6) .pk-radio:checked) .pk-panel:nth-child(6),
.pk:has(.pk-tile:nth-child(7) .pk-radio:checked) .pk-panel:nth-child(7),
.pk:has(.pk-tile:nth-child(8) .pk-radio:checked) .pk-panel:nth-child(8),
.pk:has(.pk-tile:nth-child(9) .pk-radio:checked) .pk-panel:nth-child(9),
.pk:has(.pk-tile:nth-child(10) .pk-radio:checked) .pk-panel:nth-child(10),
.pk:has(.pk-tile:nth-child(11) .pk-radio:checked) .pk-panel:nth-child(11),
.pk:has(.pk-tile:nth-child(12) .pk-radio:checked) .pk-panel:nth-child(12),
.pk:has(.pk-tile:nth-child(13) .pk-radio:checked) .pk-panel:nth-child(13),
.pk:has(.pk-tile:nth-child(14) .pk-radio:checked) .pk-panel:nth-child(14) {
    display: block;
}

/* Browsers without :has() get the same result from ui.js. */
.pk.is-scripted .pk-panel {
    display: none;
}

.pk.is-scripted .pk-panel.is-on {
    display: block;
}

.pk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pk-name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
}

/* Level meter: one bar per package, lit up to the one you chose.
   The bars are labels, so tapping one picks that size. */
.pk-meter {
    --w: 15px;
    --h: 23.5px;
    --p: calc(var(--w) * .714);
    display: inline-flex;
    flex: none;
    padding-top: 2px;
}

.pk-meter > * {
    width: var(--w);
    height: var(--h);
    margin: 0 0 0 calc(var(--w) * -.286);
    background-color: var(--mx-line);
    clip-path: var(--mx-bar);
    transform-origin: 50% 100%;
    cursor: pointer;
}

.pk-meter > :first-child {
    margin-left: 0;
}

.pk-meter > .is-lit {
    background-image: var(--mx-spectrum);
    background-size: calc(var(--n) * var(--p) + var(--w)) 100%;
    background-position: calc(var(--i) * var(--p) * -1) 0;
    background-repeat: no-repeat;
    animation: mx-rise .5s var(--mx-spring) both;
    animation-delay: calc(var(--i) * 30ms);
}

.pk-price {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    margin-top: 16px;
}

.pk-now {
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    padding-block: .04em;
    font-size: clamp(3.25rem, 15vw, 4.25rem);
    font-weight: 800;
    line-height: .86;
    letter-spacing: -.05em;
}

.pk-d {
    display: inline-block;
    animation: pk-roll-up .46s var(--mx-ease) both;
    animation-delay: calc(var(--i) * 28ms);
}

.pk-d.is-cur {
    margin: .1em .06em 0 0;
    font-size: .46em;
    font-weight: 700;
    letter-spacing: 0;
}

.pk[data-dir='down'] .pk-d {
    animation-name: pk-roll-down;
}

@keyframes pk-roll-up {
    from {
        transform: translateY(.7em);
        opacity: 0;
    }
}

@keyframes pk-roll-down {
    from {
        transform: translateY(-.7em);
        opacity: 0;
    }
}

.pk-was {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 3px;
    line-height: 1;
}

.pk-was s {
    font-size: .9375rem;
    color: var(--mx-mute);
}

.pk-save {
    transform-origin: 0 50%;
    animation: pk-pop .45s var(--mx-spring) .1s both;
    padding: 5px 12px 6px;
    background: var(--mx-offer-bg);
    color: var(--mx-offer-ink);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.pk-unit {
    margin-top: 12px;
    font-size: .8125rem;
    color: var(--mx-mute);
}

/* The one purple thing. The price sits behind a divider that leans like the mark. */
.pk-cta {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
    min-height: 58px;
    margin-top: 16px;
    border-radius: var(--mx-r-m);
    background: var(--mx-action);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .12s ease-out, transform .08s ease-out;
}

.pk-cta:hover {
    background: var(--mx-action-hover);
}

.pk-cta:active {
    transform: translateY(1px) scale(.985);
}

.pk-cta-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: 22px;
}

.pk-cta-price {
    display: inline-flex;
    align-items: center;
    padding: 0 20px 0 43px;
    background: var(--mx-action-press);
    font-weight: 600;
    clip-path: polygon(29px 0, 100% 0, 100% 100%, 0 100%);
    transition: padding .3s var(--mx-ease);
}

@media (hover: hover) {
    .pk-cta:hover .pk-cta-price {
        padding-left: 49px;
    }
}

/* The mark as a "go" sign: the bars step forward on hover. */
.mx-bars.is-go {
    --w: 8px;
    --h: 12px;
}

.mx-bars.is-go i {
    background-color: #fff;
    transition: transform .3s var(--mx-spring);
}

@media (hover: hover) {
    .pk-cta:hover .mx-bars.is-go i,
    .pk-dock-cta:hover .mx-bars.is-go i {
        transform: translateX(3px);
    }

    .pk-cta:hover .mx-bars.is-go i:nth-child(2) {
        transition-delay: 45ms;
    }

    .pk-cta:hover .mx-bars.is-go i:nth-child(3) {
        transition-delay: 90ms;
    }
}

.pk-nudge {
    display: block;
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px dashed var(--mx-line-strong);
    color: var(--mx-ink-2);
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s ease-out;
}

@media (hover: hover) {
    .pk-nudge:hover {
        color: var(--mx-action);
    }
}

/* What comes with every order, said once instead of on every card. */
.pk-assure {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
    margin: 6px 0 0;
    padding: 0 4px;
    list-style: none;
    color: var(--mx-ink-2);
    font-size: .875rem;
    line-height: 1.3;
}

.pk-assure li {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.pk-assure li::before {
    content: '';
    flex: none;
    width: 6px;
    height: 10px;
    background: var(--mx-action);
    clip-path: var(--mx-bar);
    translate: 0 1px;
}

/* On a phone the price and the button stay within reach of the thumb. */
.pk-dock {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -1px 0 var(--mx-line), 0 -16px 32px -20px rgba(0, 0, 81, .35);
    transform: translateY(110%);
    transition: transform .38s var(--mx-ease);
}

.pk-dock[hidden] {
    display: none;
}

.pk-dock.is-up {
    transform: none;
}

.pk-dock-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    line-height: 1;
}

.pk-dock-text b {
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--mx-ink-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-dock-text span {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.035em;
}

.pk-dock-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--mx-r-m);
    background: var(--mx-action);
    color: #fff;
    font-weight: 700;
    letter-spacing: -.01em;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .12s ease-out, transform .08s ease-out;
}

.pk-dock-cta:active {
    background: var(--mx-action-press);
    transform: scale(.97);
}

@media (min-width: 640px) {
    .pk {
        max-width: 38rem;
    }

    .pk-grid {
        grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
        gap: 12px;
    }

    .pk-tile:last-child {
        grid-column: span var(--last-l, 1);
    }

    .pk-tile {
        min-height: 104px;
        padding: 16px 16px 14px;
    }

    .pk-qty {
        font-size: 1.625rem;
    }

    .pk-tile-price b {
        font-size: .9375rem;
    }

    .pk-tile-price s {
        font-size: .8125rem;
    }

    .pk-tile .mx-bars {
        --w: 8px;
        --h: 12.5px;
    }

    .pk-tile.is-wide-l .pk-tile-note {
        display: block;
        font-size: .8125rem;
    }

    /* Five across: tiles are narrow, so the two prices stack again. */
    .pk-grid.is-dense {
        gap: 10px;
    }

    .pk-grid.is-dense .pk-tile {
        padding: 15px 13px 13px;
    }

    .pk-grid.is-dense .pk-qty {
        font-size: 1.4375rem;
    }

    .pk-flag {
        right: 12px;
    }

    .pk-panels {
        padding: 26px 26px 22px;
    }

    .pk-assure {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .pk {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        align-items: start;
        gap: 28px;
        max-width: none;
    }

    .pk-main {
        display: block;
    }

    .pk-side {
        position: sticky;
        top: 104px;
    }

    .pk-assure {
        margin-top: 22px;
    }

    .pk-now {
        font-size: 4.5rem;
    }

    .pk-meter {
        --w: 17px;
        --h: 26.5px;
    }

    .pk-dock {
        display: none;
    }
}

@media (max-width: 1023px) {
    body.has-dock {
        padding-bottom: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    html {
        scroll-behavior: auto;
    }

    .pk-d,
    .pk-qty,
    .pk-save,
    .mx-chip,
    .pk-meter > .is-lit,
    .pk-tile .mx-bars i {
        animation: none !important;
    }

    .pk-tile::before,
    .hq-pane .pk-tile,
    .hq-pane .pk-side {
        transition: none !important;
    }

    .pk-tile,
    .pk-cta,
    .pk-dock,
    .mx-bars i {
        transition-duration: .01ms !important;
    }
}

/* ------------------------------------------------------------------------
 | Package tiers and the free-trial card
 | Same parts as the picker: head with a level meter, large price, split button.
 * --------------------------------------------------------------------- */

.ti {
    max-width: 26rem;
    margin-inline: auto;
    color: var(--mx-ink);
}

.ti-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* On a phone: one tier at a time, behind a switch with a sliding marker. */
.ti-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    margin-bottom: 14px;
    padding: 4px;
    border-radius: var(--mx-r-m);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

.ti-tabs label {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 12px 2px;
    border-radius: var(--mx-r-s);
    color: var(--mx-ink-2);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--mx-ease);
}

.ti-glider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--n));
    border-radius: var(--mx-r-s);
    background: var(--mx-ink);
    transition: transform .38s var(--mx-ease);
}

.ti-radio:nth-of-type(2):checked ~ .ti-tabs .ti-glider {
    transform: translateX(100%);
}

.ti-radio:nth-of-type(3):checked ~ .ti-tabs .ti-glider {
    transform: translateX(200%);
}

.ti-radio:nth-of-type(4):checked ~ .ti-tabs .ti-glider {
    transform: translateX(300%);
}

.ti-radio:nth-of-type(5):checked ~ .ti-tabs .ti-glider {
    transform: translateX(400%);
}

.ti-radio:nth-of-type(1):checked ~ .ti-tabs label:nth-of-type(1),
.ti-radio:nth-of-type(2):checked ~ .ti-tabs label:nth-of-type(2),
.ti-radio:nth-of-type(3):checked ~ .ti-tabs label:nth-of-type(3),
.ti-radio:nth-of-type(4):checked ~ .ti-tabs label:nth-of-type(4),
.ti-radio:nth-of-type(5):checked ~ .ti-tabs label:nth-of-type(5) {
    color: #fff;
}

.ti-radio:nth-of-type(1):focus-visible ~ .ti-tabs label:nth-of-type(1),
.ti-radio:nth-of-type(2):focus-visible ~ .ti-tabs label:nth-of-type(2),
.ti-radio:nth-of-type(3):focus-visible ~ .ti-tabs label:nth-of-type(3),
.ti-radio:nth-of-type(4):focus-visible ~ .ti-tabs label:nth-of-type(4),
.ti-radio:nth-of-type(5):focus-visible ~ .ti-tabs label:nth-of-type(5) {
    outline: 2px solid var(--mx-action);
    outline-offset: 2px;
}

.ti-cards {
    display: grid;
    gap: 16px;
}

.ti-cards.is-solo {
    max-width: 24rem;
    margin-inline: auto;
}

.ti-card {
    display: none;
    flex-direction: column;
    padding: 22px 20px 20px;
    border-radius: var(--mx-r-l);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line), var(--mx-shadow);
    color: var(--mx-ink);
    animation: ti-in .36s var(--mx-ease) both;
}

@keyframes ti-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.ti-cards.is-solo .ti-card,
.ti-radio:nth-of-type(1):checked ~ .ti-cards .ti-card:nth-child(1),
.ti-radio:nth-of-type(2):checked ~ .ti-cards .ti-card:nth-child(2),
.ti-radio:nth-of-type(3):checked ~ .ti-cards .ti-card:nth-child(3),
.ti-radio:nth-of-type(4):checked ~ .ti-cards .ti-card:nth-child(4),
.ti-radio:nth-of-type(5):checked ~ .ti-cards .ti-card:nth-child(5) {
    display: flex;
}

.ti-name {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.ti-card .pk-now {
    font-size: clamp(2.75rem, 13vw, 3.5rem);
}

.pk-meter > i {
    cursor: default;
}

.mx-bars.is-big {
    --w: 15px;
    --h: 23.5px;
}

.ti-list {
    display: grid;
    align-content: start;
    flex: 1;
    gap: 10px;
    margin: 18px 0 0;
    padding: 17px 0 0;
    border-top: 1px dashed var(--mx-line-strong);
    list-style: none;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    line-height: 1.35;
}

.ti-list > li {
    position: relative;
    padding-left: 17px;
}

.ti-list > li::before {
    content: '';
    position: absolute;
    top: .3em;
    left: 0;
    width: 6px;
    height: 10px;
    background: var(--mx-action);
    clip-path: var(--mx-bar);
}

.ti-list > li:has(ul) > span {
    color: var(--mx-ink);
    font-weight: 600;
}

.ti-list ul {
    display: grid;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 1px 0 1px 12px;
    border-left: 1px solid var(--mx-line-strong);
    list-style: none;
    font-size: .875rem;
}

.ti-card .pk-cta {
    margin-top: 20px;
}

.pk-cta.is-plain {
    justify-content: center;
}

.pk-cta.is-plain .pk-cta-label {
    padding-left: 0;
}

@media (min-width: 768px) {
    .ti {
        max-width: 46rem;
    }

    .ti-tabs {
        display: none;
    }

    .ti-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .ti-cards.is-solo {
        grid-template-columns: minmax(0, 1fr);
    }

    .ti-card {
        display: flex;
        padding: 26px 24px 24px;
    }

    .ti-card .pk-now {
        font-size: 3.5rem;
    }
}

@media (min-width: 1280px) {
    .ti {
        max-width: none;
    }

    .ti-cards {
        grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    }

    .ti-card {
        padding: 24px 22px 22px;
    }

    .ti-card .pk-now {
        font-size: 3rem;
    }

    /* Four across, the cards are too narrow for the split button; the price is right above it anyway. */
    .ti-card .pk-cta {
        justify-content: center;
    }

    .ti-card .pk-cta-label {
        padding-left: 0;
    }

    .ti-card .pk-cta-price {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ti-card {
        animation: none;
    }

    .ti-glider {
        transition-duration: .01ms;
    }
}

/* ------------------------------------------------------------------------
 | Buttons, everywhere
 | Same purple, rounder, no drop shadow. They already give under the finger.
 * --------------------------------------------------------------------- */

a.btn:not(.disable-default),
a.btn-sm:not(.disable-default),
button.btn:not(.disable-default),
button.btn-sm:not(.disable-default) {
    gap: 9px;
    border-radius: var(--mx-r-s);
    background-color: var(--mx-action);
    box-shadow: none;
    font-weight: 600;
    opacity: 1;
}

a.btn:not(.disable-default):hover,
a.btn-sm:not(.disable-default):hover,
button.btn:not(.disable-default):hover,
button.btn-sm:not(.disable-default):hover {
    background-color: var(--mx-action-hover);
    opacity: 1;
}

.btn-sm .mx-bars.is-go,
.btn .mx-bars.is-go {
    --w: 7px;
    --h: 11px;
}

@media (hover: hover) {
    .btn-sm:hover .mx-bars.is-go i,
    .btn:hover .mx-bars.is-go i {
        transform: translateX(3px);
    }

    .btn-sm:hover .mx-bars.is-go i:nth-child(2),
    .btn:hover .mx-bars.is-go i:nth-child(2) {
        transition-delay: 45ms;
    }

    .btn-sm:hover .mx-bars.is-go i:nth-child(3),
    .btn:hover .mx-bars.is-go i:nth-child(3) {
        transition-delay: 90ms;
    }
}

/* ------------------------------------------------------------------------
 | Home hero
 | A framed panel with a little air around it. Leaning bands in the three
 | logo colours run through it from edge to edge. Left: what this is.
 | Right: the order desk.
 * --------------------------------------------------------------------- */

.mx-hero {
    padding: 72px 8px 0;
    color: var(--mx-ink);
}

.mx-hero-frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

/* Three bands at the angle of the mark, top edge to bottom edge. */
.mx-hero-frame::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(116.565deg,
        transparent 0 46%,
        rgba(0, 182, 213, .11) 46% 58%,
        transparent 58% 62%,
        rgba(103, 4, 216, .09) 62% 76%,
        transparent 76% 80%,
        rgba(255, 4, 216, .1) 80% 100%);
    pointer-events: none;
}

.mx-hero-in {
    display: grid;
    grid-template-areas: 'copy' 'stage';
    padding: 30px 0 22px;
}

.mx-hero-copy {
    grid-area: copy;
    text-align: center;
}

.mx-hero-h1 {
    font-size: clamp(2.375rem, 10.2vw, 4.25rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.045em;
}

.mx-nb {
    white-space: nowrap;
}

.mx-hero-sub {
    max-width: 33rem;
    margin: 16px auto 0;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* Service icons: a person, a heart, a play button, each on its own slice
   of the logo colours. Used in the headline and in the switch. */
.mx-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5em;
    height: 1.5em;
    border-radius: .42em;
    background: linear-gradient(135deg, #00b6d5, #5a12d8);
}

.mx-chip.is-likes {
    background: linear-gradient(135deg, #7a0ae0, #e004d8);
}

.mx-chip.is-views {
    background: linear-gradient(135deg, #ff04d8, #ff5ba8);
}

.mx-chip svg {
    width: 68%;
    height: 68%;
    fill: #fff;
}

/* In the headline the icons sit on the line like letters, each tipped a little. */
.mx-hero-h1 .mx-chip {
    width: .8em;
    height: .8em;
    margin-right: .06em;
    border-radius: .22em;
    vertical-align: -.06em;
    rotate: -6deg;
    box-shadow: 0 .09em .2em -.06em rgba(0, 0, 81, .45);
}

.mx-hero-h1 .mx-chip.is-likes {
    rotate: 5deg;
}

.mx-hero-h1 .mx-chip.is-views {
    rotate: -4deg;
}

.mx-hero-stage {
    position: relative;
    grid-area: stage;
    margin-top: 34px;
}

/* The order desk */

.hq {
    position: relative;
    padding: 12px;
    border-radius: var(--mx-r-l);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line), var(--mx-shadow);
}

/* A leaning tab on the top edge: the way to the free trial. */
.hq-flag {
    position: absolute;
    z-index: 2;
    top: -13px;
    right: 18px;
    padding: 6px 15px 7px;
    background: var(--mx-offer-bg);
    color: var(--mx-offer-ink);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    transition: background-color .15s ease-out, color .15s ease-out;
}

.hq-flag:hover {
    background: var(--mx-offer-ink);
    color: #fff;
}

.hq-flag:active span {
    display: inline-block;
    transform: scale(.96);
}

.hq-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Service switch: a navy marker slides under the chosen one.
   Nothing here moves on hover. */
.hq-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    padding: 4px;
    border-radius: var(--mx-r-m);
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

.hq-switch label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 0 4px;
    border-radius: var(--mx-r-s);
    color: var(--mx-ink-2);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--mx-ease), transform .08s ease-out;
}

.hq-switch label:active {
    transform: scale(.97);
}

.hq-switch .mx-chip {
    font-size: 15px;
}

@media (hover: hover) {
    .hq-switch label:hover {
        color: var(--mx-ink);
    }
}

.hq-glider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--n));
    border-radius: var(--mx-r-s);
    background: var(--mx-ink);
    box-shadow: 0 8px 16px -10px rgba(0, 0, 81, .8);
    transition: transform .42s var(--mx-ease);
}

.hq-radio:nth-of-type(2):checked ~ .hq-switch .hq-glider {
    transform: translateX(100%);
}

.hq-radio:nth-of-type(3):checked ~ .hq-switch .hq-glider {
    transform: translateX(200%);
}

.hq-radio:nth-of-type(1):checked ~ .hq-switch label:nth-of-type(1),
.hq-radio:nth-of-type(2):checked ~ .hq-switch label:nth-of-type(2),
.hq-radio:nth-of-type(3):checked ~ .hq-switch label:nth-of-type(3) {
    color: #fff;
}

/* The chosen service's icon hops once. */
.hq-radio:nth-of-type(1):checked ~ .hq-switch label:nth-of-type(1) .mx-chip,
.hq-radio:nth-of-type(2):checked ~ .hq-switch label:nth-of-type(2) .mx-chip,
.hq-radio:nth-of-type(3):checked ~ .hq-switch label:nth-of-type(3) .mx-chip {
    animation: mx-hop .5s var(--mx-spring);
}

@keyframes mx-hop {
    0% {
        scale: .7;
        rotate: -14deg;
    }
}

.hq-radio:nth-of-type(1):focus-visible ~ .hq-switch label:nth-of-type(1),
.hq-radio:nth-of-type(2):focus-visible ~ .hq-switch label:nth-of-type(2),
.hq-radio:nth-of-type(3):focus-visible ~ .hq-switch label:nth-of-type(3) {
    outline: 2px solid var(--mx-action);
    outline-offset: 2px;
}

/* The three ladders lie on top of each other, so the desk keeps one height
   whichever service is showing. Changing service lets the amounts come in
   one after another instead of jumping. */
.hq-panes {
    display: grid;
}

.hq-pane {
    display: flex;
    grid-area: 1 / 1;
    padding: 12px 0 0;
    visibility: hidden;
}

.hq-pane .pk-tile {
    opacity: 0;
    translate: 0 9px;
}

.hq-pane .pk-side {
    opacity: 0;
}

.hq-radio:nth-of-type(1):checked ~ .hq-panes > .hq-pane:nth-child(1),
.hq-radio:nth-of-type(2):checked ~ .hq-panes > .hq-pane:nth-child(2),
.hq-radio:nth-of-type(3):checked ~ .hq-panes > .hq-pane:nth-child(3) {
    visibility: visible;
}

.hq-radio:nth-of-type(1):checked ~ .hq-panes > .hq-pane:nth-child(1) .pk-tile,
.hq-radio:nth-of-type(2):checked ~ .hq-panes > .hq-pane:nth-child(2) .pk-tile,
.hq-radio:nth-of-type(3):checked ~ .hq-panes > .hq-pane:nth-child(3) .pk-tile {
    opacity: 1;
    translate: 0 0;
    transition:
        opacity .3s var(--mx-ease) calc(var(--t, 0) * 16ms),
        translate .4s var(--mx-ease) calc(var(--t, 0) * 16ms),
        box-shadow .22s var(--mx-ease),
        color .22s var(--mx-ease),
        transform .08s ease-out;
}

.hq-radio:nth-of-type(1):checked ~ .hq-panes > .hq-pane:nth-child(1) .pk-side,
.hq-radio:nth-of-type(2):checked ~ .hq-panes > .hq-pane:nth-child(2) .pk-side,
.hq-radio:nth-of-type(3):checked ~ .hq-panes > .hq-pane:nth-child(3) .pk-side {
    opacity: 1;
    transition: opacity .3s var(--mx-ease) .12s;
}

/* The picker, compact: four amounts across, price and button underneath. */
.pk.is-mini {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    max-width: none;
}

.pk.is-mini .pk-main {
    display: block;
}

.pk.is-mini .pk-side {
    position: static;
}

.pk.is-mini .pk-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.pk.is-mini .pk-tile {
    gap: 7px;
    min-height: 56px;
    padding: 10px 10px 9px;
    border-radius: var(--mx-r-s);
}

.pk.is-mini .pk-tile:last-child {
    grid-column: span var(--last-m, 1);
}

.pk.is-mini .pk-qty {
    font-size: 1.0625rem;
    letter-spacing: -.03em;
}

.pk.is-mini .pk-tile-price b {
    color: var(--mx-mute);
    font-size: .75rem;
    font-weight: 500;
}

.pk.is-mini .pk-tile:has(.pk-radio:checked) .pk-tile-price b,
.pk.is-mini .pk-tile.is-on .pk-tile-price b {
    color: #c3c3ea;
}

.pk.is-mini .pk-panels {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.pk.is-mini .pk-name {
    color: var(--mx-ink-2);
    font-size: .9375rem;
    font-weight: 600;
}

.pk.is-mini .pk-price {
    margin-top: 8px;
}

.pk.is-mini .pk-now {
    font-size: clamp(2.75rem, 12.5vw, 3.375rem);
}

.pk.is-mini .pk-cta {
    margin-top: 14px;
}

.pk-more {
    display: block;
    margin-top: 11px;
    color: var(--mx-ink-2);
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    transition: color .15s ease-out;
}

.pk-more:hover {
    color: var(--mx-action);
}

/* Bottom line of the desk: the one promise that matters most here, and the
   ways to pay (the same list as in the footer). */
.hq-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 11px 4px 1px;
    border-top: 1px dashed var(--mx-line-strong);
    color: var(--mx-ink-2);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
}

.hq-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hq-secure svg {
    width: 15px;
    height: 15px;
    fill: var(--mx-ink);
}

.hq-pay {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mx-mute);
    font-size: 1.25rem;
}

@media (min-width: 640px) {
    .mx-hero {
        padding: 76px 12px 0;
    }

    .mx-hero-frame {
        border-radius: 28px;
    }

    .hq {
        padding: 16px;
    }

    .mx-hero-stage {
        width: min(100%, 28.5rem);
        margin-inline: auto;
    }
}

@media (min-width: 768px) {
    .mx-hero {
        padding-top: 88px;
    }
}

@media (min-width: 1024px) {
    .mx-hero-frame::before {
        background: linear-gradient(116.565deg,
            transparent 0 55%,
            rgba(0, 182, 213, .11) 55% 65%,
            transparent 65% 68%,
            rgba(103, 4, 216, .09) 68% 80%,
            transparent 80% 83%,
            rgba(255, 4, 216, .1) 83% 100%);
    }

    .mx-hero-in {
        grid-template-areas: 'copy stage';
        grid-template-columns: minmax(0, 1fr) 28.5rem;
        align-items: center;
        column-gap: 56px;
        padding: 72px 0 60px;
    }

    .mx-hero-copy {
        text-align: left;
    }

    .mx-hero-h1 {
        font-size: clamp(3.25rem, 5.4vw, 4.75rem);
    }

    .mx-hero-sub {
        margin: 22px 0 0;
        font-size: 1.1875rem;
    }

    .mx-hero-stage {
        width: auto;
        margin: 0;
    }
}

/* ------------------------------------------------------------------------
 | Top bar
 | No line under it while the page is at the top, so the framed hero can sit
 | right below. Once the page moves, it gets a soft edge. Menu items light
 | up as a pill; nothing shifts.
 * --------------------------------------------------------------------- */

#header {
    box-shadow: none;
    transition: box-shadow .25s ease-out, background-color .25s ease-out;
}

#header.is-scrolled {
    box-shadow: 0 1px 0 rgba(0, 0, 81, .07), 0 12px 28px -20px rgba(0, 0, 81, .4);
}

#header nav > ul > li > a.px-3,
#header nav > ul > li > span.px-3 {
    border-radius: var(--mx-r-s);
    transition: background-color .18s ease-out, color .18s ease-out;
}

@media (hover: hover) {
    #header nav > ul > li > a.px-3:hover,
    #header nav > ul > li > span.px-3:hover {
        background: rgba(103, 4, 216, .07);
        color: var(--mx-ink);
    }
}

#header nav > ul > li > a.px-3:active {
    transform: scale(.97);
}

/* ------------------------------------------------------------------------
 | Buttons: pressing one makes it give, and that is all. No ring, no outline
 | and no fade left behind after a click. (Keyboard focus still shows.)
 * --------------------------------------------------------------------- */

a.btn:not(.disable-default):focus,
a.btn-sm:not(.disable-default):focus,
button.btn:not(.disable-default):focus,
button.btn-sm:not(.disable-default):focus {
    box-shadow: none;
    opacity: 1;
}

.ti-tabs label:active {
    transform: scale(.97);
    transition: transform .08s ease-out;
}

/* ------------------------------------------------------------------------
 | Home: the four services
 | Each picture sits a little crooked and straightens when you reach for it.
 * --------------------------------------------------------------------- */

.mx-svc {
    color: var(--mx-ink);
}

.mx-svc-rows {
    display: grid;
    gap: 56px;
    padding: 40px 0 64px;
}

.mx-svc-row {
    display: grid;
    gap: 28px;
    justify-items: center;
    text-align: center;
}

.mx-svc-art {
    display: block;
    width: min(100%, 17.5rem);
    padding: 18px 16px;
    border-radius: var(--mx-r-l);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line), var(--mx-shadow);
    rotate: -2.5deg;
    transition: rotate .5s var(--mx-spring), translate .5s var(--mx-spring);
}

.mx-svc-row.is-flipped .mx-svc-art {
    rotate: 2.5deg;
}

.mx-svc-art img {
    display: block;
    width: 100%;
    height: auto;
}

.mx-svc-row:hover .mx-svc-art {
    rotate: 0deg;
    translate: 0 -4px;
}

.mx-svc-copy {
    max-width: 34rem;
}

.mx-svc-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.mx-svc-text {
    margin: 12px 0 22px;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .mx-svc-rows {
        gap: 72px;
        padding: 44px 0 96px;
    }

    .mx-svc-row {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
        gap: 56px;
        justify-items: start;
        text-align: left;
    }

    .mx-svc-row.is-flipped {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .mx-svc-row.is-flipped .mx-svc-art {
        order: 2;
        justify-self: end;
    }

    .mx-svc-art {
        width: min(100%, 20rem);
    }

    .mx-svc-text {
        font-size: 1.125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hq-glider {
        transition-duration: .01ms;
    }

    .mx-svc-art {
        transition-duration: .01ms;
    }
}

/* ------------------------------------------------------------------------
 | Home, below the hero
 | Each section has its own build: crooked pictures, a ruled sheet, a
 | two-column read, one dark panel, a list of questions, a purple panel.
 * --------------------------------------------------------------------- */

/* Section heading, set to the left with the sub-line beside it on wide screens */
.mx-head {
    display: grid;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--mx-ink);
}

.mx-head .h2 {
    letter-spacing: -.035em;
}

.mx-head p {
    max-width: 30rem;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.5;
}

@media (min-width: 900px) {
    .mx-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
        align-items: end;
        gap: 40px;
        margin-bottom: 40px;
    }

    .mx-head p {
        justify-self: end;
        padding-bottom: 6px;
        font-size: 1.125rem;
    }
}

/* Service rows: the icon sits beside each title */
.mx-svc-title .mx-chip {
    font-size: .56em;
    margin-right: .18em;
    vertical-align: .16em;
    rotate: -5deg;
}

.mx-svc-row.is-flipped .mx-svc-title .mx-chip {
    rotate: 5deg;
}

.mx-chip.is-packages {
    background: linear-gradient(135deg, #00b6d5, #6704d8 52%, #ff04d8);
}

/* What you get: one sheet, ruled into cells */
.mx-feat {
    padding: 8px 0 64px;
}

.mx-sheet {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    background: var(--mx-line);
    box-shadow: 0 0 0 1px var(--mx-line);
    list-style: none;
}

.mx-cell {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-content: start;
    gap: 4px 14px;
    padding: 20px 18px;
    background: var(--mx-surface);
    color: var(--mx-ink);
    transition: background-color .25s var(--mx-ease);
}

.mx-cell-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: span 2;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--mx-ink);
    color: #fff;
    font-size: 1rem;
    transition: rotate .45s var(--mx-spring), scale .45s var(--mx-spring);
}

.mx-cell h3 {
    align-self: end;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.mx-cell p {
    grid-column: 2;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    line-height: 1.5;
}

@media (hover: hover) {
    .mx-cell:hover {
        background: var(--mx-wash);
    }

    .mx-cell:hover .mx-cell-ico {
        rotate: -8deg;
        scale: 1.08;
    }
}

@media (min-width: 640px) {
    .mx-sheet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* an odd last cell takes the whole row, so the sheet has no empty corner */
    .mx-cell:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .mx-feat {
        padding: 8px 0 104px;
    }

    .mx-sheet {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-radius: 28px;
    }

    .mx-cell:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .mx-cell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 28px 28px 30px;
    }

    .mx-cell-ico {
        grid-row: auto;
        width: 44px;
        height: 44px;
        margin-bottom: 20px;
        border-radius: 13px;
        font-size: 1.125rem;
    }

    .mx-cell h3 {
        margin-bottom: 6px;
        font-size: 1.1875rem;
    }

    .mx-cell p {
        grid-column: auto;
    }
}

/* The longer reads */
.mx-read {
    color: var(--mx-ink);
}

/* How ordering works: the dark panel */
.mx-steps {
    padding: 28px 8px 0;
}

.mx-steps-frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    background: var(--mx-ink);
    color: #fff;
}

.mx-steps-frame::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(116.565deg,
        transparent 0 58%,
        rgba(255, 255, 255, .035) 58% 70%,
        transparent 70% 74%,
        rgba(255, 255, 255, .05) 74% 88%,
        transparent 88% 91%,
        rgba(255, 255, 255, .035) 91% 100%);
    pointer-events: none;
}

.mx-steps-in {
    padding: 40px 0 36px;
}

.mx-head.is-light,
.mx-head.is-light .h2 {
    color: #fff;
}

.mx-head.is-light .h2 .text-theme-600 {
    color: #cba6ff;
}

.mx-head.is-light p {
    color: rgba(255, 255, 255, .72);
}

.mx-steps-list {
    position: relative;
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.mx-steps-list li {
    position: relative;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.mx-steps-num {
    display: block;
    margin-bottom: 10px;
    color: #cba6ff;
    font-size: 3.25rem;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
}

.mx-steps-list h3 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.mx-steps-list p {
    margin-top: 8px;
    color: rgba(255, 255, 255, .74);
    font-size: 1rem;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .mx-steps {
        padding: 40px 12px 0;
    }

    .mx-steps-frame {
        border-radius: 28px;
    }
}

@media (min-width: 900px) {
    .mx-steps-in {
        padding: 72px 0 68px;
    }

    .mx-steps-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
    }

    .mx-steps-num {
        margin-bottom: 18px;
        font-size: 4.5rem;
    }

    .mx-steps-list h3 {
        font-size: 1.375rem;
    }

    /* The line in the logo colours: it lies over the three rules and is drawn
       from left to right when the panel comes into view. */
    .mx-steps-list::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        left: 0;
        height: 3px;
        margin-top: -1px;
        border-radius: 2px;
        background: var(--mx-spectrum);
        transform-origin: 0 50%;
    }

}

@keyframes mx-draw {
    from {
        transform: scaleX(0);
    }
}

/* Questions */
.mx-faq-in {
    padding: 56px 0 64px;
}

.mx-faq-list {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--mx-line);
    list-style: none;
}

.mx-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 19px 2px;
    border-top: 1px solid var(--mx-line);
    color: var(--mx-ink);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.35;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease-out;
}

/* The plus is a small tile that turns navy and becomes a minus when open */
.mx-faq-sign {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    transition: background-color .25s var(--mx-ease), box-shadow .25s var(--mx-ease), rotate .4s var(--mx-spring);
}

.mx-faq-sign::before,
.mx-faq-sign::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 1px;
    background: var(--mx-ink);
    transition: rotate .4s var(--mx-spring), background-color .25s var(--mx-ease);
}

.mx-faq-sign::after {
    rotate: 90deg;
}

:where(.mx-faq-item)[open] > .mx-faq-q .mx-faq-sign {
    background: var(--mx-ink);
    box-shadow: inset 0 0 0 1px var(--mx-ink);
    rotate: 180deg;
}

:where(.mx-faq-item)[open] > .mx-faq-q .mx-faq-sign::before,
:where(.mx-faq-item)[open] > .mx-faq-q .mx-faq-sign::after {
    background: #fff;
}

:where(.mx-faq-item)[open] > .mx-faq-q .mx-faq-sign::after {
    rotate: 0deg;
}

@media (hover: hover) {
    .mx-faq-q:hover {
        color: var(--mx-action);
    }

    .mx-faq-q:hover .mx-faq-sign {
        box-shadow: inset 0 0 0 1px var(--mx-line-strong);
    }
}

.mx-faq-q:active .mx-faq-sign {
    scale: .9;
}

.mx-faq-a {
    overflow: hidden;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.65;
    transition: max-height .38s var(--mx-ease), opacity .3s ease-out;
}

.mx-faq-a p {
    max-width: 44rem;
    padding: 0 2px 22px;
}

.mx-faq-a a {
    color: var(--mx-action);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (min-width: 900px) {
    .mx-faq-in {
        padding: 96px 0 104px;
    }

    .mx-faq-q {
        padding: 22px 4px;
        font-size: 1.1875rem;
    }
}

/* Closing panel */
.mx-cta {
    padding: 0 8px 28px;
}

.mx-cta-frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    background: var(--mx-action);
    color: #fff;
}

.mx-cta-frame::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(116.565deg,
        transparent 0 60%,
        rgba(0, 0, 81, .12) 60% 72%,
        transparent 72% 76%,
        rgba(0, 0, 81, .16) 76% 90%,
        transparent 90% 93%,
        rgba(0, 0, 81, .12) 93% 100%);
    pointer-events: none;
}

.mx-cta-in {
    display: grid;
    gap: 24px;
    padding: 36px 0;
}

.mx-cta-copy h2 {
    font-size: clamp(1.875rem, 7vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.mx-cta-copy p {
    max-width: 34rem;
    margin-top: 12px;
    color: rgba(255, 255, 255, .86);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.mx-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mx-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--mx-r-m);
    background: #fff;
    color: var(--mx-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease-out, transform .08s ease-out;
}

.mx-cta-btn .mx-bars.is-go i {
    background-color: var(--mx-ink);
}

.mx-cta-btn.is-quiet {
    background: rgba(0, 0, 81, .22);
    color: #fff;
}

.mx-cta-btn:active {
    transform: translateY(1px) scale(.98);
}

@media (hover: hover) {
    .mx-cta-btn:hover {
        background: var(--mx-wash);
    }

    .mx-cta-btn.is-quiet:hover {
        background: rgba(0, 0, 81, .36);
    }

    .mx-cta-btn:hover .mx-bars.is-go i {
        transform: translateX(3px);
    }

    .mx-cta-btn:hover .mx-bars.is-go i:nth-child(2) {
        transition-delay: 45ms;
    }

    .mx-cta-btn:hover .mx-bars.is-go i:nth-child(3) {
        transition-delay: 90ms;
    }
}

@media (min-width: 640px) {
    .mx-cta {
        padding: 0 12px 40px;
    }

    .mx-cta-frame {
        border-radius: 28px;
    }
}

@media (min-width: 900px) {
    .mx-cta-in {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 48px;
        padding: 64px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-cell-ico,
    .mx-faq-sign,
    .mx-faq-sign::before,
    .mx-faq-sign::after {
        transition-duration: .01ms;
    }

    .mx-steps-list::before {
        animation: none;
    }
}

/* ------------------------------------------------------------------------
 | Product pages, below the picker
 | Questions, text sections and the closing panel reuse the home sections.
 | Reviews get their own framed panel: what people wrote on one side, the
 | form on the other.
 * --------------------------------------------------------------------- */

.mx-cta.is-spaced {
    padding-top: 56px;
}

.mx-rev {
    padding: 0 8px;
}

.mx-rev-frame {
    border-radius: 24px;
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    color: var(--mx-ink);
}

.mx-rev-in {
    padding: 36px 0 28px;
}

.mx-rev-form {
    border-radius: var(--mx-r-l);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line), var(--mx-shadow);
}

.mx-stars {
    display: flex;
    gap: 3px;
    color: var(--mx-ink);
    font-size: .875rem;
    line-height: 1;
}

.mx-stars .icon-star-regular {
    color: var(--mx-line-strong);
}

.mx-rev-text {
    margin-top: 10px;
    color: var(--mx-ink);
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mx-rev-form {
    padding: 20px;
}

.mx-rev-form h3 {
    margin-bottom: 16px;
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.mx-rev-note {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--mx-r-s);
    background: var(--mx-ink);
    color: #fff;
    font-size: .9375rem;
    line-height: 1.4;
}

.mx-rev-note.hidden {
    display: none;
}

.mx-rev-note button {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
}

.mx-field {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.mx-field label,
.mx-field-label {
    margin: 0;
    color: var(--mx-ink);
    font-size: .875rem;
    font-weight: 600;
}

.mx-field.is-inline {
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Fields: a fine line that turns navy when you are in it. No glow. */
.mx-input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--mx-r-s);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line-strong);
    color: var(--mx-ink);
    font-size: 1rem;
    line-height: 1.4;
    resize: vertical;
    transition: box-shadow .15s ease-out, background-color .15s ease-out;
}

.mx-input::placeholder {
    color: var(--mx-mute);
}

.mx-input:hover {
    background: #fdfbff;
}

.mx-input:focus {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--mx-ink);
}

/* Stars you can pick: each one grows a touch under the pointer */
.mx-rate {
    display: flex;
    gap: 4px;
    color: var(--mx-ink);
    font-size: 1.375rem;
    line-height: 1;
}

.mx-rate span {
    display: inline-flex;
    padding: 2px;
}

.mx-rate i {
    display: block;
    transition: scale .3s var(--mx-spring);
}

.mx-rate .icon-star-regular {
    color: var(--mx-line-strong);
}

@media (hover: hover) {
    .mx-rate span:hover i {
        scale: 1.2;
    }
}

.mx-rate span:active i {
    scale: .9;
}

.mx-rev-submit {
    min-height: 48px;
    margin-top: 4px;
}

@media (min-width: 640px) {
    .mx-rev {
        padding: 0 12px;
    }

    .mx-rev-frame {
        border-radius: 28px;
    }

    .mx-rev-form {
        padding: 26px;
    }
}

@media (min-width: 900px) {
    .mx-cta.is-spaced {
        padding-top: 88px;
    }

    .mx-rev-in {
        padding: 72px 0 60px;
    }

    .mx-rev-form {
        position: sticky;
        top: 104px;
    }
}

/* On product pages the questions follow the picker directly and the reads
   follow the reviews, so they need a little less air than on the home page. */
#pricing + .mx-faq .mx-faq-in {
    padding-top: 40px;
}

.mx-rev + .mx-read {
    margin-top: 40px;
}

@media (min-width: 900px) {
    .mx-rev + .mx-read {
        margin-top: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-rate i {
        transition-duration: .01ms;
    }
}

/* ------------------------------------------------------------------------
 | Checkout
 | The same framed panel as the hero. Order on one card, what we need from
 | you on the other, and a short rail showing where you are.
 * --------------------------------------------------------------------- */

.ck-in {
    padding: 26px 0 22px;
}

.ck-top {
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
}

.ck-h1 {
    color: var(--mx-ink);
    font-size: clamp(1.75rem, 7vw, 2.75rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.ck-h1 .text-theme-600 {
    color: inherit;
}

/* Step rail: a fine line with the logo colours filled up to where you are */
.ck-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    margin: 0;
    padding: 12px 0 0;
    list-style: none;
    color: var(--mx-mute);
    font-size: .875rem;
    font-weight: 600;
}

.ck-steps::before,
.ck-steps::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    border-radius: 2px;
}

.ck-steps::before {
    right: 0;
    background: var(--mx-line-strong);
}

.ck-steps::after {
    width: calc(100% * var(--at) / var(--n));
    background: var(--mx-spectrum);
    background-size: calc(100% * var(--n) / var(--at)) 100%;
}

.ck-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ck-steps-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line-strong);
    font-size: .75rem;
}

.ck-steps .is-now,
.ck-steps .is-done {
    color: var(--mx-ink);
}

.ck-steps .is-now .ck-steps-n,
.ck-steps .is-done .ck-steps-n {
    background: var(--mx-ink);
    box-shadow: none;
    color: #fff;
}

.ck-grid {
    display: grid;
    gap: 14px;
    align-items: start;
}

.ck-card {
    padding: 18px;
    border-radius: var(--mx-r-l);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line), var(--mx-shadow);
    color: var(--mx-ink);
}

.ck-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ck-label .mx-chip {
    font-size: 15px;
}

/* In the order card the picker shows the price first, the amounts under it */
.ck-order .pk.is-mini {
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 16px;
}

.ck-order .pk-qty.is-name {
    font-size: .9375rem;
}

.ck-order .pk-price {
    margin-top: 6px;
}

.ck-hint {
    color: var(--mx-ink-2);
    font-size: .875rem;
    line-height: 1.45;
}

.ck-submit {
    min-height: 54px;
    margin-top: 6px;
    font-size: 1.0625rem;
}

.ck-next {
    margin-top: 12px;
    color: var(--mx-ink-2);
    font-size: .875rem;
    line-height: 1.45;
    text-align: center;
}

.ck-alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--mx-r-s);
    background: var(--mx-offer-bg);
    color: var(--mx-offer-ink);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.45;
}

.ck-alert.hidden {
    display: none;
}

.ck-alert button {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
}

/* Review step */
.ck-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.ck-line b {
    flex: none;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.ck-target {
    margin-top: 16px;
    padding: 14px;
    border-radius: var(--mx-r-m);
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

.ck-target-label {
    color: var(--mx-ink-2);
    font-size: .8125rem;
    font-weight: 600;
}

.ck-target-value {
    margin-top: 2px;
    font-size: 1.0625rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ck-target ul {
    margin: 4px 0 10px;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    overflow-wrap: anywhere;
}

.ck-edit {
    display: inline-block;
    margin-top: 10px;
    color: var(--mx-action);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--mx-line-strong);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .15s ease-out;
}

.ck-edit:hover {
    text-decoration-color: currentColor;
}

.ck-incl {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px dashed var(--mx-line-strong);
    list-style: none;
}

.ck-incl li {
    position: relative;
    display: grid;
    gap: 1px;
    padding-left: 17px;
    font-size: .9375rem;
    line-height: 1.4;
}

.ck-incl li::before {
    content: '';
    position: absolute;
    top: .3em;
    left: 0;
    width: 6px;
    height: 10px;
    background: var(--mx-action);
    clip-path: var(--mx-bar);
}

.ck-incl span {
    color: var(--mx-ink-2);
}

.ck-check {
    margin-bottom: 16px;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    line-height: 1.5;
}

.ck-terms {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--mx-ink-2);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.ck-terms input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 6px;
    accent-color: var(--mx-ink);
}

.ck-terms a {
    color: var(--mx-action);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 640px) {
    .ck-card {
        padding: 24px;
    }

    .ck-grid {
        max-width: 34rem;
        margin-inline: auto;
    }
}

@media (min-width: 960px) {
    .ck-in {
        padding: 44px 0 52px;
    }

    .ck-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
        align-items: end;
        gap: 48px;
        margin-bottom: 30px;
    }

    .ck-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 22px;
        max-width: none;
    }

    /* what we need from you sits first on wide screens, the order beside it */
    .ck-form {
        order: -1;
    }

    .ck-grid.is-review .ck-form {
        order: 0;
        position: sticky;
        top: 104px;
    }
}

/* ------------------------------------------------------------------------
 | Checkout, payment step
 | Each way to pay is a row you can press anywhere. The chosen one gets a
 | navy edge, and the card fields open inside it.
 * --------------------------------------------------------------------- */

.pay-methods {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.pay-method {
    border-radius: var(--mx-r-m);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    transition: background-color .22s var(--mx-ease), box-shadow .22s var(--mx-ease);
}

@media (hover: hover) {
    .pay-method:hover {
        box-shadow: inset 0 0 0 1px var(--mx-line-strong);
    }
}

.pay-method:has(.pay-radio:checked) {
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 2px var(--mx-ink);
}

.pay-method-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 15px 15px 0;
    color: var(--mx-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pay-radio {
    width: 22px;
    height: 22px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line-strong);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .25s var(--mx-spring);
}

.pay-radio:checked {
    box-shadow: inset 0 0 0 7px var(--mx-ink);
}

.pay-radio:focus-visible {
    outline: 2px solid var(--mx-action) !important;
    outline-offset: 2px;
}

.pay-method-name {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.pay-method-price {
    font-size: 1.0625rem;
    font-weight: 700;
    white-space: nowrap;
}

.pay-method-body {
    padding: 6px 15px 15px 49px;
}

.pay-method-desc {
    color: var(--mx-ink-2);
    font-size: .9375rem;
    line-height: 1.45;
}

.pay-method-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
    margin-top: 10px;
}

.pay-method-logo {
    width: auto;
    height: 22px;
    margin-left: auto;
}

/* The card fields stay closed until "card" is chosen (the payment script opens them). */
.card-form {
    display: none;
}

.pay-card {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--mx-line-strong);
}

.pay .multiuse-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
}

.pay .multiuse-container input {
    position: static;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--mx-ink);
}

.pay .multiuse-container label {
    position: static;
    margin: 0;
    color: var(--mx-ink);
    font-size: .9375rem;
    font-weight: 500;
}

.ck-alert.is-info {
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    color: var(--mx-ink);
    font-weight: 400;
}

.pay-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--mx-line-strong);
    font-size: .875rem;
}

.pay-note svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    fill: var(--mx-ink);
}

/* After payment, and after a trial order */
.ck-done {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.ck-done .ck-h1 {
    margin-bottom: 12px;
}

.ck-done > p {
    max-width: 36rem;
    margin-inline: auto;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.ck-done-actions {
    margin-top: 24px;
}

@media (min-width: 960px) {
    .ck-grid.is-pay {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .ck-grid.is-pay .ck-order {
        position: sticky;
        top: 104px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-radio {
        transition-duration: .01ms;
    }
}

/* ========================================================================
 | Round 9: site-wide pass
 | Everything from here on refines or replaces rules further up.
 * ===================================================================== */

/* ------------------------------------------------------------------------
 | No rules across the page: the top bar gets a soft lift when the page
 | moves, never a line; the footer has no dividers.
 * --------------------------------------------------------------------- */

#header.is-scrolled {
    box-shadow: 0 14px 32px -22px rgba(0, 0, 81, .45);
}

footer .border-t {
    border-top-width: 0;
}

/* ------------------------------------------------------------------------
 | Menus
 * --------------------------------------------------------------------- */

/* Dropdown: a small card that grows out from under its menu item. */
#header nav li.relative > ul {
    right: auto;
    left: 50%;
    width: 15rem;
    margin: 0;
    padding: 6px;
    border-top: 8px solid transparent;
    border-radius: 24px 24px 18px 18px;
    background: var(--mx-surface) padding-box;
    box-shadow: none;
    translate: -50% 0;
    filter: drop-shadow(0 0 0 rgba(0, 0, 81, 0)) drop-shadow(0 18px 22px rgba(0, 0, 81, .16));
}

#header nav li.relative > ul::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px var(--mx-line);
    pointer-events: none;
}

#header nav li.relative > ul > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--mx-ink);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    transition: background-color .15s ease-out;
}

#header nav li.relative > ul > li > a .mx-chip {
    font-size: 15px;
    transition: rotate .4s var(--mx-spring), scale .4s var(--mx-spring);
}

@media (hover: hover) {
    #header nav li.relative > ul > li > a:hover {
        background: var(--mx-wash);
    }

    #header nav li.relative > ul > li > a:hover .mx-chip {
        rotate: -8deg;
        scale: 1.1;
    }
}

/* The little arrow beside a menu item turns over while its menu is open. */
#header nav li.relative > span > svg {
    transition: rotate .3s var(--mx-ease);
}

#header nav li.relative > span[aria-expanded='true'] > svg {
    rotate: 180deg;
}

/* ------------------------------------------------------------------------
 | Questions: the sign has no edge, so nothing lingers while it changes
 * --------------------------------------------------------------------- */

.mx-faq-sign,
:where(.mx-faq-item)[open] > .mx-faq-q .mx-faq-sign,
.mx-faq-q:hover .mx-faq-sign {
    box-shadow: none;
}

.mx-faq-sign {
    background: #efe7fd;
}

@media (hover: hover) {
    .mx-faq-q:hover .mx-faq-sign {
        background: #e5d9fb;
    }
}

:where(.mx-faq-item)[open] > .mx-faq-q .mx-faq-sign,
:where(.mx-faq-item)[open] > .mx-faq-q:hover .mx-faq-sign {
    background: var(--mx-ink);
}

/* ------------------------------------------------------------------------
 | Icons: softer, warmer tiles with the colour in the drawing itself
 * --------------------------------------------------------------------- */

.mx-chip,
.mx-chip.is-followers {
    background: #e7e8ff;
}

.mx-chip svg,
.mx-chip.is-followers svg {
    fill: #3f3ad1;
}

.mx-chip.is-likes {
    background: #ffe4ea;
}

.mx-chip.is-likes svg {
    fill: #e02957;
}

.mx-chip.is-views {
    background: #ffeed9;
}

.mx-chip.is-views svg {
    fill: #d96a06;
}

.mx-chip.is-packages {
    background: #efe5ff;
}

.mx-chip.is-packages svg {
    fill: #7422e0;
}

.mx-hero-h1 .mx-chip {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 81, .05), 0 .08em .16em -.06em rgba(0, 0, 81, .28);
}

.mx-cell-ico {
    background: #efe7fd;
    color: var(--mx-ink);
}

/* ------------------------------------------------------------------------
 | Price card: every price lies in the same spot, so the card is as tall as
 | its tallest price and nothing below it moves when you change the amount.
 * --------------------------------------------------------------------- */

.pk {
    --roll-name: pk-roll-up;
}

.pk[data-dir='down'] {
    --roll-name: pk-roll-down;
}

.pk-panels {
    display: grid;
}

.pk-panel,
.pk.is-scripted .pk-panel,
.pk:has(.pk-radio:checked) .pk-panel.is-default {
    --roll: none;
    --pop: none;
    --rise: none;
    display: block;
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
    opacity: 0;
}

.pk-panel.is-default,
.pk.is-scripted .pk-panel.is-on,
.pk:has(.pk-tile:nth-child(1) .pk-radio:checked) .pk-panel:nth-child(1),
.pk:has(.pk-tile:nth-child(2) .pk-radio:checked) .pk-panel:nth-child(2),
.pk:has(.pk-tile:nth-child(3) .pk-radio:checked) .pk-panel:nth-child(3),
.pk:has(.pk-tile:nth-child(4) .pk-radio:checked) .pk-panel:nth-child(4),
.pk:has(.pk-tile:nth-child(5) .pk-radio:checked) .pk-panel:nth-child(5),
.pk:has(.pk-tile:nth-child(6) .pk-radio:checked) .pk-panel:nth-child(6),
.pk:has(.pk-tile:nth-child(7) .pk-radio:checked) .pk-panel:nth-child(7),
.pk:has(.pk-tile:nth-child(8) .pk-radio:checked) .pk-panel:nth-child(8),
.pk:has(.pk-tile:nth-child(9) .pk-radio:checked) .pk-panel:nth-child(9),
.pk:has(.pk-tile:nth-child(10) .pk-radio:checked) .pk-panel:nth-child(10),
.pk:has(.pk-tile:nth-child(11) .pk-radio:checked) .pk-panel:nth-child(11),
.pk:has(.pk-tile:nth-child(12) .pk-radio:checked) .pk-panel:nth-child(12),
.pk:has(.pk-tile:nth-child(13) .pk-radio:checked) .pk-panel:nth-child(13),
.pk:has(.pk-tile:nth-child(14) .pk-radio:checked) .pk-panel:nth-child(14) {
    --roll: var(--roll-name);
    --pop: pk-pop;
    --rise: mx-rise;
    visibility: inherit;
    opacity: 1;
}

.pk .pk-panel .pk-d {
    animation-name: var(--roll);
}

.pk .pk-panel .pk-save {
    animation-name: var(--pop);
}

.pk .pk-panel .pk-meter > .is-lit {
    animation-name: var(--rise);
}

/* ------------------------------------------------------------------------
 | One look for every field, label, card and notice on the site
 * --------------------------------------------------------------------- */

input:not(.disable-default):not([type='radio']):not([type='checkbox']):not([type='hidden']),
select:not(.disable-default),
textarea:not(.disable-default) {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--mx-r-s);
    background-color: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line-strong);
    color: var(--mx-ink);
    font-size: 1rem;
    line-height: 1.4;
    transition: box-shadow .15s ease-out, background-color .15s ease-out;
}

input:not(.disable-default):not([type='radio']):not([type='checkbox']):not([type='hidden'])::placeholder,
textarea:not(.disable-default)::placeholder {
    color: var(--mx-mute);
}

input:not(.disable-default):not([type='radio']):not([type='checkbox']):not([type='hidden']):focus,
select:not(.disable-default):focus,
textarea:not(.disable-default):focus {
    border: 0;
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--mx-ink);
}

label:not(.disable-default) {
    margin-bottom: 6px;
    color: var(--mx-ink);
    font-size: .875rem;
    font-weight: 600;
}

input[type='checkbox']:not(.disable-default) {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    accent-color: var(--mx-ink);
}

/* Old card shells (rounded box with a wide grey glow) take the new card. */
.shadow-full-lg,
.shadow-full-xl {
    border-radius: var(--mx-r-l) !important;
    box-shadow: inset 0 0 0 1px var(--mx-line), var(--mx-shadow) !important;
}

/* Old purple notice bars become quiet notes. */
div.flex.text-white.bg-theme-600.rounded {
    align-items: flex-start;
    border-radius: var(--mx-r-s);
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    color: var(--mx-ink);
    font-size: .9375rem;
    line-height: 1.45;
}

div.flex.text-white.bg-theme-600.rounded button {
    color: var(--mx-ink);
}

/* Headings that were filled with a gradient take the logo ink instead. */
.bg-clip-text.text-transparent {
    background-image: none !important;
    color: var(--mx-ink) !important;
    -webkit-text-fill-color: currentColor;
    letter-spacing: -.035em;
}

/* Old spacer lines between sections are gone for good. */
section > .absolute.w-px.bg-gray-200 {
    display: none;
}

/* ------------------------------------------------------------------------
 | Page heading panel (FAQ, about, contact, login and the like)
 * --------------------------------------------------------------------- */

.mx-pagehead-in {
    padding: 34px 0 32px;
}

.mx-pagehead-in p {
    max-width: 40rem;
    margin-top: 12px;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.55;
}

@media (min-width: 900px) {
    .mx-pagehead-in {
        padding: 60px 0 56px;
    }

    .mx-pagehead-in .ck-h1 {
        font-size: 3.25rem;
    }

    .mx-pagehead-in p {
        font-size: 1.1875rem;
    }
}

/* ------------------------------------------------------------------------
 | Questions in two columns
 * --------------------------------------------------------------------- */

.mx-faq-cols {
    display: grid;
    align-items: start;
}

.mx-faq-cols .mx-faq-list:not(:last-child) {
    border-bottom: 0;
}

@media (min-width: 900px) {
    .mx-faq-cols.is-two {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 48px;
    }

    .mx-faq-cols.is-two .mx-faq-list:not(:last-child) {
        border-bottom: 1px solid var(--mx-line);
    }

    .mx-faq-cols.is-two .mx-faq-q {
        font-size: 1.0625rem;
    }
}

/* ------------------------------------------------------------------------
 | Reader: topics on one side, one topic open
 * --------------------------------------------------------------------- */

.mx-reader {
    padding: 24px 0 8px;
    color: var(--mx-ink);
}

/* Each topic is a <details>: the browser opens and closes it, and the shared
   name keeps one open. Its row is the <summary>, and the title in the row is a
   real heading that takes its looks from the row. */
.rd {
    position: relative;
    border-bottom: 1px solid var(--mx-line);
}

.rd-item {
    display: block;
}

.rd-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 18px 2px;
    border-top: 1px solid var(--mx-line);
    color: var(--mx-ink);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rd-tab::-webkit-details-marker {
    display: none;
}

.rd-tab::marker {
    content: '';
}

.rd-name {
    min-width: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-wrap: inherit;
}

.rd-item[open] > .rd-tab .mx-faq-sign {
    background: var(--mx-ink);
    rotate: 180deg;
}

.rd-item[open] > .rd-tab .mx-faq-sign::before,
.rd-item[open] > .rd-tab .mx-faq-sign::after {
    background: var(--mx-surface);
}

.rd-item[open] > .rd-tab .mx-faq-sign::after {
    rotate: 0deg;
}

.rd-tab:focus-visible {
    outline: 2px solid var(--mx-action);
    outline-offset: 2px;
}

.rd-panel {
    padding: 0 2px 22px;
}

.rd-item[open] > .rd-panel {
    animation: rd-open .4s var(--mx-ease);
}

@keyframes rd-open {
    from {
        opacity: 0;
        translate: 0 -6px;
    }
}

.rd-title {
    display: none;
}

.rd-body {
    max-width: 42rem;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.rd-body a {
    color: var(--mx-action);
    text-decoration: underline;
    text-decoration-color: var(--mx-line-strong);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .15s ease-out;
}

.rd-body a:hover {
    text-decoration-color: currentColor;
}

@keyframes rd-swap {
    from {
        opacity: 0;
        translate: 0 10px;
    }
}

@media (min-width: 900px) {
    .mx-reader {
        padding: 72px 0 40px;
    }
}

/* Wide screens: the topic list is a column of its own and the text of the open
   topic lies beside it, always in the same place. For that each <details>
   dissolves into the grid of the whole list (display: contents), so its row
   and its text can be placed there. A browser that cannot place the text of a
   <details> keeps the folding list from above. */
@supports selector(::details-content) {
    @media (min-width: 900px) {
        .rd {
            display: grid;
            grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
            grid-template-rows: repeat(var(--n), auto) 1fr;
            column-gap: 64px;
            border-bottom: 0;
        }

        .rd-item {
            display: contents;
        }

        .rd-tab {
            grid-column: 1;
            grid-row: var(--i);
            justify-content: flex-start;
            gap: 10px;
            padding: 15px 0;
            color: var(--mx-mute);
            font-size: 1.0625rem;
            font-weight: 600;
            transition: color .2s var(--mx-ease), padding .35s var(--mx-ease);
        }

        .rd-tab .mx-faq-sign {
            display: none;
        }

        .rd-tab::before {
            content: "";
            flex: none;
            width: 7px;
            height: 11px;
            margin-left: -17px;
            background: var(--mx-action);
            clip-path: var(--mx-bar);
            opacity: 0;
            transition: opacity .2s var(--mx-ease), margin .35s var(--mx-ease);
        }

        .rd-tab:hover {
            color: var(--mx-ink);
        }

        /* The open topic cannot be closed here: the place beside the list would be
           empty. A pointer passes through it; ui.js holds the keyboard back as well. */
        .rd-item[open] > .rd-tab {
            color: var(--mx-ink);
            font-weight: 700;
            pointer-events: none;
        }

        .rd-item[open] > .rd-tab::before {
            margin-left: 0;
            opacity: 1;
        }

        .rd-item::details-content {
            grid-column: 2;
            grid-row: 1 / -1;
        }

        .rd-panel {
            padding: 6px 0 0;
        }

        .rd-item[open] > .rd-panel {
            animation: rd-swap .45s var(--mx-ease);
        }

        /* ui.js reads the height of the longest text once and keeps it, so the
           page below does not move when another topic is chosen. For that
           moment the closed texts are laid out too. */
        .rd.is-measuring .rd-item:not([open])::details-content {
            content-visibility: visible;
        }

        .rd-title {
            display: block;
            margin-bottom: 18px;
            font-size: 2.375rem;
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -.04em;
            text-wrap: balance;
        }

        .rd-body {
            font-size: 1.125rem;
        }
    }
}

/* ------------------------------------------------------------------------
 | Reviews
 * --------------------------------------------------------------------- */

.mx-rev-frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.mx-rev-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(116.565deg,
        rgba(255, 4, 216, .07) 0 9%,
        transparent 9% 12%,
        rgba(103, 4, 216, .07) 12% 22%,
        transparent 22% 100%);
    pointer-events: none;
}

.mx-rev-in {
    display: grid;
    gap: 22px;
    padding: 34px 0 28px;
}

.mx-rev-side .h2 {
    letter-spacing: -.035em;
}

.mx-rev-sub {
    margin-top: 10px;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.mx-rev-score {
    display: grid;
    gap: 16px;
    margin-top: 22px;
    padding: 18px;
    border-radius: var(--mx-r-l);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

.mx-rev-avg {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    color: var(--mx-ink-2);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
}

.mx-rev-avg b {
    color: var(--mx-ink);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.05em;
}

.mx-rev-bars {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--mx-ink-2);
    font-size: .8125rem;
    font-weight: 600;
}

.mx-rev-bars li {
    display: grid;
    grid-template-columns: 10px 14px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 6px;
}

.mx-rev-bars i {
    color: var(--mx-ink);
    font-size: .6875rem;
}

.mx-rev-bars li > span:last-child {
    text-align: right;
}

.mx-rev-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: #efe7fd;
}

.mx-rev-bar span {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 4px;
    background: var(--mx-ink);
    transform-origin: 0 50%;
    animation: mx-draw .8s var(--mx-ease) both;
}

/* "Write a review" opens the form in place */
.mx-rev-write {
    margin-top: 14px;
    border-radius: var(--mx-r-l);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

.mx-rev-write summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    color: var(--mx-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mx-rev-write summary::-webkit-details-marker {
    display: none;
}

.mx-rev-write[open] summary .mx-faq-sign {
    background: var(--mx-ink);
    rotate: 180deg;
}

.mx-rev-write[open] summary .mx-faq-sign::before,
.mx-rev-write[open] summary .mx-faq-sign::after {
    background: #fff;
}

.mx-rev-write[open] summary .mx-faq-sign::after {
    rotate: 0deg;
}

.mx-rev-write .mx-rev-form {
    padding: 4px 18px 18px;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.mx-rev-write .mx-rev-form h3 {
    display: none;
}

.mx-rev-cards {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-rev-card {
    padding: 18px;
    border-radius: 20px;
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    transition: box-shadow .25s var(--mx-ease);
}

@media (hover: hover) {
    .mx-rev-card:hover {
        box-shadow: inset 0 0 0 1px var(--mx-line-strong), 0 16px 28px -22px rgba(0, 0, 81, .5);
    }

    .mx-rev-card:hover .mx-rev-initial {
        rotate: -6deg;
    }
}

.mx-rev-who {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.mx-rev-who p:not(.mx-stars) {
    display: grid;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
}

.mx-rev-who b {
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-rev-who time {
    color: var(--mx-mute);
    font-size: .8125rem;
}

.mx-rev-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #e7e8ff;
    color: #3f3ad1;
    font-size: 1rem;
    font-weight: 800;
    transition: rotate .4s var(--mx-spring);
}

.mx-rev-initial.is-b {
    background: #ffe4ea;
    color: #e02957;
}

.mx-rev-initial.is-c {
    background: #ffeed9;
    color: #c95f02;
}

.mx-rev-initial.is-d {
    background: #efe5ff;
    color: #7422e0;
}

.mx-rev-card .mx-rev-text {
    margin-top: 12px;
}

.mx-rev-more {
    margin-top: 12px;
}

.mx-rev-more summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 0 18px;
    border-radius: var(--mx-r-s);
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line-strong);
    color: var(--mx-ink);
    font-size: .9375rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    transition: background-color .15s ease-out, transform .08s ease-out;
}

.mx-rev-more summary::-webkit-details-marker {
    display: none;
}

.mx-rev-more summary:active {
    transform: scale(.97);
}

.mx-rev-more[open] summary {
    display: none;
}

@media (min-width: 640px) {
    .mx-rev-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .mx-rev-cards .mx-rev-card:only-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .mx-rev-in {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        align-items: start;
        gap: 48px;
        padding: 68px 0 60px;
    }

    .mx-rev-side {
        position: sticky;
        top: 104px;
    }
}

/* Where the browser can animate an opening panel, it glides open. */
@supports (interpolate-size: allow-keywords) {
    .mx-rev-write,
    .mx-rev-more {
        interpolate-size: allow-keywords;
    }

    .mx-rev-write::details-content,
    .mx-rev-more::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size .45s var(--mx-ease), content-visibility .45s allow-discrete;
    }

    .mx-rev-write[open]::details-content,
    .mx-rev-more[open]::details-content {
        block-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-panel,
    .mx-rev-bar span {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------------
 | Pages under a heading panel: forms, tables, long legal text, blog
 * --------------------------------------------------------------------- */

.mx-below-head {
    padding: 26px 0 56px;
}

.mx-formcard {
    padding: 20px;
}

.mx-formcard .btn,
.mx-formcard .btn-sm {
    min-height: 50px;
}

/* A success notice is a quiet green note, not a bright bar. */
div.flex.text-white.bg-green-400 {
    align-items: flex-start;
    border-radius: var(--mx-r-s);
    background: #e8f8ee;
    box-shadow: inset 0 0 0 1px #c5ecd3;
    color: #0c5c2e;
    font-size: .9375rem;
    line-height: 1.45;
}

div.flex.text-white.bg-green-400 button {
    color: #0c5c2e;
}

/* Text links inside these pages */
.mx-below-head a.text-theme-600,
.mx-below-head .text-gray-600 a:not(.btn):not(.btn-sm) {
    color: var(--mx-action);
    text-decoration: underline;
    text-decoration-color: var(--mx-line-strong);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .15s ease-out;
}

.mx-below-head a.text-theme-600:hover,
.mx-below-head .text-gray-600 a:not(.btn):not(.btn-sm):hover {
    text-decoration-color: currentColor;
}

/* Long legal and article text: a comfortable line length and calmer ink */
.mx-below-head .text-lg.text-gray-600 {
    max-width: 46rem;
    color: var(--mx-ink-2);
    line-height: 1.7;
}

.mx-below-head .text-lg.text-gray-600 h2,
.mx-below-head .text-lg.text-gray-600 h3,
.mx-below-head .text-lg.text-gray-600 strong,
.mx-below-head .text-lg.text-gray-600 b {
    color: var(--mx-ink);
}

/* Tables (orders, tracking, comparison) */
table.table-auto {
    color: var(--mx-ink);
}

table.table-auto tr,
table.table-auto {
    border-color: var(--mx-line);
}

table.table-auto th {
    color: var(--mx-ink-2);
    font-size: .875rem;
    font-weight: 600;
}

table.table-auto td .underline {
    text-decoration: none;
    font-weight: 700;
}

table.table-auto tbody tr {
    transition: background-color .15s ease-out;
}

@media (hover: hover) {
    table.table-auto tbody tr:hover {
        background: var(--mx-wash);
    }
}

/* Numbers sheet on the about page */
.mx-sheet.is-stats .mx-cell {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.mx-sheet.is-stats b {
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.05em;
}

.mx-sheet.is-stats p {
    grid-column: auto;
    font-size: 1rem;
}

@media (min-width: 640px) {
    .mx-sheet.is-stats .mx-cell:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

@media (min-width: 1024px) {
    .mx-sheet.is-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mx-stats {
        padding-top: 56px;
    }
}

@media (min-width: 640px) {
    .mx-formcard {
        padding: 26px;
    }

    .mx-below-head {
        padding: 36px 0 88px;
    }
}

/* ------------------------------------------------------------------------
 | Footer: no rules, links that answer the pointer, and the mark set large
 | and faint along the bottom edge
 * --------------------------------------------------------------------- */

footer {
    position: relative;
    overflow: hidden;
    color: var(--mx-ink);
}

/* The column titles of the footer. Plain paragraphs, not headings: they are
   labels for link lists, and as h6 they made every page jump from h2 to h6. */
footer .mx-foot-h {
    color: var(--mx-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

footer ul.text-sm a {
    display: inline-block;
    color: var(--mx-ink-2);
    transition: color .15s ease-out, translate .3s var(--mx-ease);
}

@media (hover: hover) {
    footer ul.text-sm a:hover {
        color: var(--mx-ink);
        translate: 3px 0;
    }
}

footer .text-gray-400 {
    color: #b9b3cf;
}

footer > div::after {
    content: "";
    display: block;
    height: clamp(64px, 15vw, 190px);
    margin: 8px 0 -1px;
    background: url("../img/logo/logo.svg") no-repeat 50% 0 / 100% auto;
    opacity: .07;
    pointer-events: none;
}

/* ------------------------------------------------------------------------
 | Small screens (320 to 380 px wide)
 * --------------------------------------------------------------------- */

@media (max-width: 380px) {
    .mx-hero-h1 {
        font-size: 2.125rem;
    }

    .hq {
        padding: 10px;
    }

    .hq-switch label {
        gap: 6px;
        font-size: .8125rem;
    }

    .hq-switch .mx-chip {
        font-size: 13px;
    }

    .pk.is-mini .pk-grid {
        gap: 5px;
    }

    .pk.is-mini .pk-tile {
        padding: 9px 7px 8px;
    }

    .pk.is-mini .pk-qty {
        font-size: .9375rem;
    }

    .pk.is-mini .pk-tile-price b {
        font-size: .6875rem;
    }

    .pk-grid {
        gap: 6px;
    }

    .pk-tile {
        padding: 12px 9px 10px;
    }

    .pk-tile .mx-bars {
        display: none;
    }

    .pk-tile-price s {
        font-size: .6875rem;
    }

    .pk-flag {
        right: 6px;
        padding-inline: 7px;
        font-size: .625rem;
    }

    .pk-panels {
        padding: 18px 16px 16px;
    }

    .pk-cta {
        font-size: 1rem;
    }

    .pk-cta-label {
        padding-left: 16px;
        gap: 8px;
    }

    .pk-cta-price {
        padding: 0 14px 0 38px;
    }

    .pk-assure {
        grid-template-columns: minmax(0, 1fr);
    }

    .ti-tabs label {
        font-size: .8125rem;
    }

    .ck-steps {
        font-size: .8125rem;
    }

    .ck-steps li {
        gap: 6px;
    }

    .ck-card {
        padding: 16px 14px;
    }

    .pay-method-head {
        gap: 10px;
        padding: 14px 12px 0;
    }

    .pay-method-body {
        padding: 6px 12px 14px 44px;
    }

    .hq-foot {
        flex-wrap: wrap;
    }

    .hq-pay {
        font-size: 1.125rem;
    }

    .mx-rev-who {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .mx-rev-who .mx-stars {
        grid-column: 1 / -1;
    }

    .pk-dock {
        gap: 10px;
        padding-inline: 12px;
    }

    .pk-dock-cta {
        padding: 0 16px;
    }
}

/* Named bundles (Bronze to Platinum) need room for their names: two across when compact. */
.pk.is-mini .pk-grid.is-named {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pk.is-mini .pk-grid.is-named .pk-tile:last-child {
    grid-column: auto;
}

@media (max-width: 340px) {
    .hq-switch .mx-chip {
        display: none;
    }
}

@media (max-width: 400px) {
    table.table-auto th.min-w-48 {
        min-width: 0;
    }

    table.table-auto th,
    table.table-auto td {
        padding-inline: 6px;
        font-size: .8125rem;
    }
}

/* Each service in the headline is one unbreakable block, so lines only break between them. */
.mx-hero-h1 .mx-nb {
    display: inline-block;
    white-space: nowrap;
}

/* ------------------------------------------------------------------------
 | Small touches
 * --------------------------------------------------------------------- */

/* Jumping to the packages lands below the top bar, not under it. */
#pricing,
.mx-faq,
.mx-rev {
    scroll-margin-top: 88px;
}

/* The menu item of the current page: ink text and a leaning mark under it. */
#header nav > ul > li > a.px-3 {
    position: relative;
}

#header nav > ul > li > a.px-3::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 7px;
    height: 10px;
    margin-left: -3px;
    background: var(--mx-action);
    clip-path: var(--mx-bar);
    opacity: 0;
    translate: 0 4px;
    transition: opacity .2s var(--mx-ease), translate .35s var(--mx-spring);
}

#header nav > ul > li > a.px-3[aria-current='page'] {
    color: var(--mx-ink);
}

#header nav > ul > li > a.px-3[aria-current='page']::after {
    opacity: 1;
    translate: 0 0;
}

/* A field that is filled in correctly shows a small tick. */
.mx-input:not(textarea),
input:not(.disable-default):not([type='radio']):not([type='checkbox']):not([type='hidden']) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23000051'/%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 0 0;
    transition: box-shadow .15s ease-out, background-color .15s ease-out, background-size .3s var(--mx-spring);
}

.mx-input[required]:not(textarea):not(:placeholder-shown):valid,
input[required]:not(.disable-default):not([type='radio']):not([type='checkbox']):not([type='hidden']):not(:placeholder-shown):valid {
    padding-right: 42px;
    background-size: 18px 18px;
}

/* Framed panels: the bands lie a little wider than the panel and drift with the pointer. */
.mx-hero-frame::before,
.mx-steps-frame::before,
.mx-cta-frame::before,
.mx-rev-frame::before {
    inset: 0 -24px;
    translate: calc(var(--drift, 0) * 22px) 0;
    transition: translate .9s var(--mx-ease);
}

/* The dock price hops when it changes. */
[data-pk-dock-price].is-pop {
    display: inline-block;
    animation: pk-pop .4s var(--mx-spring);
}

@media (prefers-reduced-motion: reduce) {
    [data-pk-dock-price].is-pop {
        animation: none;
    }
}

/* ------------------------------------------------------------------------
 | Comparison: MIXX next to the rest. Our column is one navy lane.
 * --------------------------------------------------------------------- */

.mx-cmp-wrap {
    padding: 30px 0 12px;
}

.mx-cmp {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--mx-ink);
}

.mx-cmp th,
.mx-cmp td {
    padding: 15px 8px;
    border-top: 1px solid var(--mx-line);
    text-align: center;
    vertical-align: middle;
}

.mx-cmp thead th {
    padding-block: 16px;
    border-top: 0;
    color: var(--mx-ink-2);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.mx-cmp thead th:first-child,
.mx-cmp tbody th {
    padding-left: 0;
    text-align: left;
}

.mx-cmp tbody th {
    font-weight: 400;
}

.mx-cmp tbody th b {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mx-cmp tbody th span {
    display: block;
    margin-top: 2px;
    color: var(--mx-ink-2);
    font-size: .875rem;
    line-height: 1.45;
}

.mx-cmp td,
.mx-cmp thead th:not(:first-child) {
    width: 76px;
    font-size: .875rem;
    font-weight: 600;
}

/* The lane */
.mx-cmp .is-us {
    border-top-color: rgba(255, 255, 255, .1);
    background: var(--mx-ink);
    color: #fff;
}

.mx-cmp thead .is-us {
    border-radius: var(--mx-r-m) var(--mx-r-m) 0 0;
    color: #fff;
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.mx-cmp thead .is-us .mx-bars {
    --w: 6px;
    --h: 9px;
    margin-right: 5px;
}

.mx-cmp thead .is-us .mx-bars i {
    background-image: var(--mx-spectrum);
}

.mx-cmp tbody tr:last-child .is-us {
    border-radius: 0 0 var(--mx-r-m) var(--mx-r-m);
}

.mx-cmp tbody tr:last-child td {
    padding-bottom: 20px;
}

/* Yes and no */
.mx-cmp-yes,
.mx-cmp-no {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.mx-cmp-yes svg,
.mx-cmp-no svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mx-cmp-yes {
    background: #e3f6ea;
    color: #0c7a3b;
}

.mx-cmp-no {
    color: #b9b3cf;
    box-shadow: inset 0 0 0 1.5px var(--mx-line);
}

.mx-cmp .is-us .mx-cmp-yes {
    background: #fff;
    color: var(--mx-ink);
}

.mx-cmp .is-us .mx-cmp-no {
    color: rgba(255, 255, 255, .55);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25);
}

/* The row under the pointer: its name steps in a little, nothing else moves. */
.mx-cmp tbody th b {
    transition: translate .3s var(--mx-ease), color .15s ease-out;
}

@media (hover: hover) {
    .mx-cmp tbody tr:hover th b {
        color: var(--mx-action);
        translate: 4px 0;
    }
}

/* Our ticks are drawn one after the other as the table comes into view. */
.mx-cmp .is-us .mx-cmp-yes path {
    stroke-dasharray: 14;
}

@keyframes mx-tick {
    from {
        stroke-dashoffset: 14;
    }
}

@media (min-width: 640px) {
    .mx-cmp-wrap {
        padding: 44px 0 20px;
    }

    .mx-cmp th,
    .mx-cmp td {
        padding: 18px 14px;
    }

    .mx-cmp td,
    .mx-cmp thead th:not(:first-child) {
        width: 132px;
        font-size: .9375rem;
    }

    .mx-cmp thead th {
        font-size: .875rem;
    }

    .mx-cmp tbody th b {
        font-size: 1.0625rem;
    }

    .mx-cmp tbody th span {
        font-size: .9375rem;
    }
}

@media (max-width: 380px) {
    .mx-cmp td,
    .mx-cmp thead th:not(:first-child) {
        width: 62px;
    }

    .mx-cmp thead th:last-child {
        font-size: .6875rem;
    }

    .mx-cmp tbody th span {
        font-size: .8125rem;
    }
}

/* ------------------------------------------------------------------------
 | Blog: list, side column, pager, article
 * --------------------------------------------------------------------- */

.mx-blog {
    display: grid;
    gap: 44px;
}

.mx-blog-main {
    min-width: 0;
    max-width: 46rem;
}

@media (min-width: 900px) {
    .mx-blog.has-side {
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 72px;
    }
}

/* One article in the list */
.mx-post {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 22px;
    padding: 26px 0;
    border-top: 1px solid var(--mx-line);
}

.mx-post:first-child {
    padding-top: 2px;
    border-top: 0;
}

.mx-post > * {
    grid-column: 1;
}

.mx-post .mx-post-title {
    margin: 0;
    color: var(--mx-ink);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.mx-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease-out;
}

/* The whole row answers the click. */
.mx-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.mx-post-sum {
    margin-top: 8px;
    color: var(--mx-ink-2);
    font-size: 1rem;
    line-height: 1.55;
}

.mx-post-meta,
.mx-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 14px;
    color: var(--mx-mute);
    font-size: .875rem;
}

.mx-post-by {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mx-ink);
    font-weight: 600;
    text-decoration: none;
}

.mx-post-by img {
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 50%;
    background: var(--mx-wash);
    object-fit: cover;
}

.mx-post .mx-post-go {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
}

.mx-post-go .mx-bars {
    --w: 13px;
    --h: 20px;
}

.mx-post-go .mx-bars i {
    background-image: var(--mx-spectrum);
    filter: grayscale(1) opacity(.28);
    transition: filter .25s ease-out, transform .45s var(--mx-spring);
}

.mx-post-go .mx-bars i:nth-child(2) {
    transition-delay: 50ms;
}

.mx-post-go .mx-bars i:nth-child(3) {
    transition-delay: 100ms;
}

@media (hover: hover) {
    .mx-post:hover .mx-post-title a {
        color: var(--mx-action);
    }

    .mx-post:hover .mx-post-go .mx-bars i {
        filter: none;
        transform: translateX(4px);
    }

    .mx-post-by:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }
}

/* Nothing here yet */
.mx-empty {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: 26px 24px;
    border-radius: var(--mx-r-l);
    background: var(--mx-wash);
    color: var(--mx-ink);
    font-size: 1.0625rem;
    font-weight: 600;
}

.mx-empty .mx-bars {
    --w: 16px;
    --h: 25px;
}

/* Older and newer */
.mx-pager {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

.mx-pager-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--mx-r-s);
    box-shadow: inset 0 0 0 1.5px var(--mx-line-strong);
    color: var(--mx-ink);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow .15s ease-out, background-color .15s ease-out, transform .12s ease-out;
}

.mx-pager-link.is-next {
    margin-left: auto;
}

.mx-pager-link:active {
    transform: scale(.97);
}

@media (hover: hover) {
    .mx-pager-link:hover {
        background: var(--mx-wash);
        box-shadow: inset 0 0 0 1.5px var(--mx-ink);
    }
}

/* Side column */
.mx-blog-side {
    display: grid;
    align-content: start;
    gap: 34px;
}

.mx-side h4 {
    margin: 0 0 6px;
    color: var(--mx-ink);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mx-side ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-side li {
    padding: 12px 0;
    border-top: 1px solid var(--mx-line);
}

.mx-side li > a {
    display: block;
    color: var(--mx-ink);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: color .15s ease-out, translate .3s var(--mx-ease);
}

.mx-side li span {
    display: block;
    margin-top: 3px;
    color: var(--mx-mute);
    font-size: .8125rem;
}

.mx-side li span a {
    color: var(--mx-ink-2);
    font-weight: 600;
}

@media (hover: hover) {
    .mx-side li > a:hover {
        color: var(--mx-action);
        translate: 3px 0;
    }
}

/* Article heading */
.mx-arthead .ck-h1 {
    max-width: 22em;
    text-wrap: balance;
}

.mx-byline {
    margin-top: 18px;
    color: var(--mx-ink-2);
    font-size: .9375rem;
}

.mx-byline .mx-post-by img {
    width: 32px;
    height: 32px;
    box-shadow: 0 0 0 2px #fff;
}

.mx-byline-by {
    color: var(--mx-ink-2);
    font-weight: 400;
}

.mx-byline > * + *::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    margin-right: 16px;
    background: var(--mx-line-strong);
    transform: skewX(-26.565deg);
    vertical-align: -1px;
}

/* Article text */
.mx-prose {
    max-width: 44rem;
    overflow-wrap: break-word;
}

.mx-prose > :first-child {
    margin-top: 0;
}

.mx-prose p {
    margin-bottom: 1.15em;
}

.mx-prose h2,
.mx-prose h3,
.mx-prose h4 {
    color: var(--mx-ink);
    letter-spacing: -.03em;
    text-wrap: balance;
}

.mx-prose h2 {
    margin-top: 2.2em;
    font-size: 1.75rem;
    line-height: 1.15;
}

.mx-prose h3 {
    font-size: 1.3125rem;
}

.mx-prose ul,
.mx-prose ol {
    margin: 1.1em 0;
    padding-left: 1.4em;
}

.mx-prose ol {
    list-style: decimal;
}

.mx-prose li {
    margin-bottom: .45em;
    padding-left: .2em;
}

.mx-prose li::marker {
    color: var(--mx-action);
    font-weight: 700;
}

.mx-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mx-r-m);
}

.mx-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--mx-action);
    color: var(--mx-ink);
    font-weight: 600;
}

.mx-prose a {
    color: var(--mx-action);
    text-decoration: underline;
    text-decoration-color: var(--mx-line-strong);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .15s ease-out;
}

.mx-prose a:hover {
    text-decoration-color: currentColor;
}

/* How far into the article you are: a thin line in the logo colours along
   the top edge. Only where the browser can tie it to scrolling. */
.mx-progress {
    display: none;
}

@supports (animation-timeline: scroll()) {
    .mx-progress {
        position: fixed;
        z-index: 60;
        top: 0;
        right: 0;
        left: 0;
        display: block;
        height: 3px;
        background: var(--mx-spectrum);
        transform-origin: 0 50%;
        animation: mx-draw linear both;
        animation-timeline: scroll(root);
        pointer-events: none;
    }
}

@media (min-width: 640px) {
    .mx-post .mx-post-title {
        font-size: 1.5rem;
    }

    .mx-post-sum {
        font-size: 1.0625rem;
    }
}

@media (max-width: 380px) {
    .mx-post {
        column-gap: 12px;
    }

    .mx-post-go .mx-bars {
        --w: 9px;
        --h: 14px;
    }

    .mx-byline > * + *::before {
        display: none;
    }
}

/* ------------------------------------------------------------------------
 | Reviews while there are only a few: each one set large, no boxes.
 | The opening mark is two bars of the logo.
 * --------------------------------------------------------------------- */

.mx-quotes {
    display: grid;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-quote + .mx-quote {
    padding-top: 34px;
    border-top: 1px solid rgba(0, 0, 81, .1);
}

.mx-quote-mark {
    display: flex;
    gap: 3px;
    margin-bottom: 18px;
}

.mx-quote-mark i {
    width: 19px;
    height: 30px;
    background: var(--mx-spectrum) 0 0 / 41px 30px no-repeat;
    clip-path: var(--mx-bar);
    transform-origin: 50% 100%;
}

.mx-quote-mark i + i {
    background-position: -22px 0;
}

.mx-quote-text {
    margin: 0;
    color: var(--mx-ink);
    font-size: 1.125rem;
    line-height: 1.55;
    overflow-wrap: break-word;
}

.mx-quote.is-mid .mx-quote-text {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.mx-quote.is-big .mx-quote-text {
    font-size: clamp(1.875rem, 7.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.mx-quote-by {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
    margin-top: 22px;
}

.mx-quote-by p:not(.mx-stars) {
    display: grid;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
}

.mx-quote-by b {
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-quote-by time {
    color: var(--mx-ink-2);
    font-size: .8125rem;
}

.mx-quote-by .mx-stars {
    grid-column: 1 / -1;
}

.mx-quote-by .mx-rev-initial {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 81, .08);
}

@keyframes mx-quote-in {
    from {
        opacity: 0;
        transform: scaleY(.2);
    }
}

/* No reviews yet: five open stars and one honest line. */
.mx-rev-none {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    color: var(--mx-ink);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.mx-rev-nostars {
    display: flex;
    gap: 5px;
    color: var(--mx-ink);
    font-size: 1.5rem;
    opacity: .9;
}

.mx-rev-in.is-none .mx-rev-write {
    margin-top: 0;
}

.mx-rev-in.is-none .mx-rev-write summary {
    cursor: default;
}

.mx-rev-in.is-none .mx-rev-write summary .mx-faq-sign {
    display: none;
}

@media (min-width: 640px) {
    .mx-quote-by {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .mx-quote-by .mx-stars {
        grid-column: auto;
    }

    .mx-quote.is-mid .mx-quote-text {
        font-size: 1.625rem;
    }

    .mx-quote-mark i {
        width: 24px;
        height: 38px;
        background-size: 52px 38px;
    }

    .mx-quote-mark i + i {
        background-position: -28px 0;
    }
}

@media (min-width: 960px) {
    .mx-rev-in.is-few {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 72px;
    }

    .mx-rev-in.is-few .mx-rev-main {
        padding-top: 6px;
    }

    .mx-rev-in.is-none {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: 72px;
    }
}

/* ------------------------------------------------------------------------
 | Long text with an index of its sections (terms, privacy and the like)
 * --------------------------------------------------------------------- */

.mx-long-text {
    min-width: 0;
}

.mx-long-text h2 {
    scroll-margin-top: 104px;
}

.mx-long-text > h2:first-child {
    margin-top: 0;
}

.mx-toc {
    display: none;
}

@media (min-width: 1024px) {
    .mx-long.has-index {
        display: grid;
        grid-template-columns: minmax(0, 46rem) 250px;
        align-items: start;
        justify-content: space-between;
        gap: 56px;
    }

    .mx-toc {
        position: sticky;
        top: 104px;
        display: block;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--mx-line-strong) transparent;
    }

    .mx-toc p {
        margin: 0 0 8px;
        color: var(--mx-ink);
        font-size: .875rem;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    .mx-toc ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mx-toc a {
        position: relative;
        display: block;
        padding: 7px 8px 7px 18px;
        color: var(--mx-ink-2);
        font-size: .875rem;
        line-height: 1.35;
        text-decoration: none;
        transition: color .15s ease-out, translate .3s var(--mx-ease);
    }

    /* The leaning bar that marks where you are */
    .mx-toc a::before {
        content: "";
        position: absolute;
        top: 9px;
        left: 2px;
        width: 5px;
        height: 14px;
        border-radius: 1px;
        background: var(--mx-action);
        opacity: 0;
        transform: skewX(-26.565deg) scaleY(.2);
        transform-origin: 50% 100%;
        transition: opacity .2s ease-out, transform .35s var(--mx-spring);
    }

    .mx-toc a[aria-current] {
        color: var(--mx-ink);
        font-weight: 600;
    }

    .mx-toc a[aria-current]::before {
        opacity: 1;
        transform: skewX(-26.565deg) scaleY(1);
    }

    @media (hover: hover) {
        .mx-toc a:hover {
            color: var(--mx-ink);
            translate: 2px 0;
        }
    }
}

/* ------------------------------------------------------------------------
 | Footer ending: the top of the mark, large and pale, rising from the
 | bottom edge (replaces the wide faint logo)
 * --------------------------------------------------------------------- */

footer > div::after {
    height: clamp(52px, 9.5vw, 118px);
    margin: 4px 0 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.5 99'%3E%3Cpath fill='%23d6e7fb' d='M57.5 0Q63 0 63 5.5L63 14Q63 18 58.53 25.81L31.47 73.19Q27 81 27 85L27 93.5Q27 99 21.5 99L5.5 99Q0 99 0 93.5L0 85Q0 81 4.47 73.19L31.53 25.81Q36 18 36 14L36 5.5Q36 0 41.5 0z'/%3E%3Cpath fill='%23e3d8fa' d='M102.5 0Q108 0 108 5.5L108 14Q108 18 103.53 25.81L76.47 73.19Q72 81 72 85L72 93.5Q72 99 66.5 99L50.5 99Q45 99 45 93.5L45 85Q45 81 49.47 73.19L76.53 25.81Q81 18 81 14L81 5.5Q81 0 86.5 0z'/%3E%3Cpath fill='%23fbd4f4' d='M119.52 69.65Q121.5 73.13 119.52 76.6L118.74 77.96Q117 81 117 85L117 93.5Q117 99 111.5 99L95.5 99Q90 99 90 93.5L90 85Q90 81 94.47 73.19L105.52 53.84Q108 49.5 110.48 53.84z'/%3E%3C/svg%3E") no-repeat 100% 0 / auto 215%;
    opacity: .85;
}

/* ------------------------------------------------------------------------
 | Contact: the form, and beside it the two things people usually came for
 * --------------------------------------------------------------------- */

.mx-contact {
    display: grid;
    gap: 34px;
}

.mx-routes {
    display: grid;
    align-content: start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-routes li + li {
    border-top: 1px solid var(--mx-line);
}

.mx-route {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 18px;
    padding: 20px 0;
    color: var(--mx-ink);
    text-decoration: none;
}

.mx-routes li:first-child .mx-route {
    padding-top: 4px;
}

.mx-route b {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -.03em;
    transition: color .15s ease-out;
}

.mx-route span:not(.mx-bars) {
    grid-column: 1;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    line-height: 1.5;
}

.mx-route .mx-bars {
    --w: 11px;
    --h: 17px;
    grid-column: 2;
    grid-row: 1 / span 2;
}

.mx-route .mx-bars i {
    background-image: var(--mx-spectrum);
    filter: grayscale(1) opacity(.28);
    transition: filter .25s ease-out, transform .45s var(--mx-spring);
}

.mx-route .mx-bars i:nth-child(2) {
    transition-delay: 50ms;
}

.mx-route .mx-bars i:nth-child(3) {
    transition-delay: 100ms;
}

@media (hover: hover) {
    .mx-route:hover b {
        color: var(--mx-action);
    }

    .mx-route:hover .mx-bars i {
        filter: none;
        transform: translateX(4px);
    }
}

@media (min-width: 900px) {
    .mx-contact {
        grid-template-columns: minmax(0, 30rem) minmax(0, 24rem);
        justify-content: space-between;
        align-items: start;
        gap: 72px;
    }

    .mx-contact .mx-formcard {
        max-width: none;
        margin: 0;
    }

    .mx-routes {
        padding-top: 8px;
    }
}

/* ------------------------------------------------------------------------
 | Page not found: the way back, and the four places people look for
 * --------------------------------------------------------------------- */

.mx-lost {
    display: grid;
    gap: 30px;
    max-width: 34rem;
}

.mx-lost .btn {
    justify-self: start;
}

.mx-lost .mx-routes li:first-child .mx-route {
    padding-top: 20px;
}

.mx-lost .mx-routes {
    border-top: 1px solid var(--mx-line);
}

.mx-lost .mx-route {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 14px 0;
}

.mx-lost .mx-routes li:first-child .mx-route {
    padding-top: 14px;
}

.mx-lost .mx-route b {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mx-lost .mx-route .mx-bars {
    grid-column: 3;
    grid-row: 1;
}

.mx-lost .mx-route .mx-chip {
    margin-right: 10px;
}

/* ------------------------------------------------------------------------
 | The page wrapper clips what hangs over the edge instead of hiding it.
 | Looks the same, but parts meant to stay in view while you scroll (the
 | section index, the order summary) can now actually stay.
 * --------------------------------------------------------------------- */

@supports (overflow: clip) {
    body > .flex.flex-col.overflow-hidden {
        overflow: clip;
    }
}

.mx-rev-write .mx-rev-form {
    position: static;
}

/* ------------------------------------------------------------------------
 | One order: where it stands, and the receipt
 * --------------------------------------------------------------------- */

.mx-track {
    display: grid;
    gap: 28px;
}

.mx-track-status {
    min-width: 0;
}

.mx-track-note {
    max-width: 38rem;
    margin-top: 22px;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.mx-track-status > .mx-track-note:first-child {
    margin-top: 0;
}

.mx-track-tag {
    display: inline-block;
    padding: 6px 12px;
    background: var(--mx-offer-bg);
    color: var(--mx-offer-ink);
    font-size: .9375rem;
    font-weight: 700;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    padding-inline: 18px;
}

.mx-track-status .mx-routes {
    margin-top: 22px;
    border-top: 1px solid var(--mx-line);
}

.mx-track-status .mx-routes li:first-child .mx-route {
    padding-top: 20px;
}

/* The rail: three stops. Done is solid, what is still ahead is dotted. */
.mx-rail {
    --step: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.mx-rail li {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 12px;
    color: var(--mx-mute);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
}

/* The line to the next stop */
.mx-rail li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px;
    right: 6px;
    left: 34px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--mx-line-strong) 0 4px, transparent 4px 9px);
}

.mx-rail li.is-done:not(:last-child)::after {
    background: var(--mx-ink);
    transform-origin: 0 50%;
    animation: mx-draw .7s var(--mx-ease) both;
}

.mx-rail li.is-done:nth-child(2)::after {
    animation-delay: .25s;
}

.mx-rail-dot {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 2px var(--mx-line-strong);
}

.mx-rail-dot svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.mx-rail li.is-done,
.mx-rail li.is-now {
    color: var(--mx-ink);
}

.mx-rail li.is-done .mx-rail-dot {
    background: var(--mx-ink);
    box-shadow: none;
}

.mx-rail li.is-done .mx-rail-dot svg {
    opacity: 1;
}

.mx-rail li.is-now:not(.is-done) .mx-rail-dot {
    position: relative;
    background: var(--mx-action);
    box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 9px var(--mx-action), 0 0 0 2px var(--mx-action);
}

/* The stop you are at sends out one ring when the page opens. */
.mx-rail li.is-now:not(.is-done) .mx-rail-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--mx-action);
    opacity: 0;
    animation: mx-ring 1.4s var(--mx-ease) .5s 1 both;
}

@keyframes mx-ring {
    0% {
        opacity: .7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2.4);
    }
}

.mx-rail li.is-now .mx-rail-name {
    font-weight: 800;
    letter-spacing: -.01em;
}

/* What is left to deliver */
.mx-track-meter {
    max-width: 38rem;
    margin-top: 24px;
}

.mx-track-meter p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    font-weight: 600;
}

.mx-track-meter b {
    color: var(--mx-ink);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.mx-track-meter .mx-rev-bar {
    display: block;
    height: 10px;
    border-radius: 5px;
}

.mx-track-meter .mx-rev-bar span {
    border-radius: 5px;
    background: var(--mx-spectrum);
}

/* The receipt: label left, value right, a rule between rows */
.mx-receipt.is-simple {
    max-width: 34rem;
    margin: 26px auto 0;
    text-align: left;
}

.mx-rows {
    margin: 0;
}

.mx-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 13px 0;
    border-top: 1px solid var(--mx-line);
    font-size: .9375rem;
}

.mx-rows > div:first-child {
    padding-top: 2px;
    border-top: 0;
}

.mx-rows > div:last-child {
    padding-bottom: 2px;
}

.mx-rows dt {
    flex: none;
    color: var(--mx-ink-2);
    font-weight: 500;
}

.mx-rows dd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    margin: 0;
    color: var(--mx-ink);
    font-weight: 700;
    text-align: right;
}

.mx-rows dd.is-long,
.mx-rows dd > span {
    overflow-wrap: anywhere;
}

.mx-rows dd a {
    color: var(--mx-action);
    text-decoration: underline;
    text-decoration-color: var(--mx-line-strong);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Copy: the label itself says "Copied" for a moment. */
.mx-copy {
    flex: none;
    min-width: 62px;
    padding: 5px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    color: var(--mx-ink);
    font: inherit;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .08s ease-out;
}

.mx-copy:active {
    transform: scale(.94);
}

.mx-copy.is-done {
    background: var(--mx-ink);
    box-shadow: none;
    color: #fff;
}

@media (hover: hover) {
    .mx-copy:not(.is-done):hover {
        box-shadow: inset 0 0 0 1px var(--mx-line-strong);
    }
}

@media (min-width: 960px) {
    .mx-track {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
        gap: 72px;
    }

    .mx-track .mx-receipt {
        position: sticky;
        top: 104px;
    }
}

@media (max-width: 380px) {
    .mx-rail li {
        font-size: .8125rem;
    }

    .mx-rows > div {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-rail li.is-done:not(:last-child)::after,
    .mx-rail li.is-now:not(.is-done) .mx-rail-dot::after {
        animation: none;
    }
}

/* ------------------------------------------------------------------------
 | Account: the list of orders
 * --------------------------------------------------------------------- */

.mx-orders {
    max-width: 46rem;
}

.mx-orders .mx-route {
    grid-template-columns: minmax(0, 1fr) auto;
}

.mx-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
}

.mx-order-meta > span {
    overflow-wrap: anywhere;
}

.mx-route span.mx-order-go {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--mx-ink);
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
}

.mx-route .mx-order-go .mx-bars {
    grid-column: auto;
    grid-row: auto;
}

.mx-empty p .text-theme-600 {
    color: var(--mx-action);
}

@media (max-width: 480px) {
    .mx-route span.mx-order-go {
        font-size: 0;
        gap: 0;
    }
}

/* ------------------------------------------------------------------------
 | The second button: same shape and press, outlined instead of filled
 * --------------------------------------------------------------------- */

a.btn.is-quiet:not(.disable-default),
button.btn.is-quiet:not(.disable-default) {
    background-color: var(--mx-surface);
    box-shadow: inset 0 0 0 1.5px var(--mx-line-strong);
    color: var(--mx-ink);
}

@media (hover: hover) {
    a.btn.is-quiet:not(.disable-default):hover,
    button.btn.is-quiet:not(.disable-default):hover {
        background-color: var(--mx-wash);
        box-shadow: inset 0 0 0 1.5px var(--mx-ink);
    }
}

/* ------------------------------------------------------------------------
 | Password fields: a Show / Hide switch inside the field
 * --------------------------------------------------------------------- */

.mx-pw {
    position: relative;
    display: block;
}

.mx-pw input {
    padding-right: 74px !important;
    background-image: none !important;
}

.mx-pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    min-width: 56px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mx-ink-2);
    font: inherit;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.2;
    translate: 0 -50%;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out, transform .08s ease-out;
}

.mx-pw-toggle:active {
    transform: scale(.94);
}

.mx-pw-toggle[aria-pressed='true'] {
    color: var(--mx-action);
}

@media (hover: hover) {
    .mx-pw-toggle:hover {
        background: var(--mx-wash);
        color: var(--mx-ink);
    }
}

/* ------------------------------------------------------------------------
 | Dropdown, finishing: it keeps its own shape (not the card shape), is as
 | wide as its longest line, and its menu item is held while it is open
 * --------------------------------------------------------------------- */

#header nav li.relative > ul.shadow-full-xl {
    width: max-content;
    min-width: 15rem;
    border-radius: 24px 24px 18px 18px !important;
    box-shadow: none !important;
    transform-origin: 50% 0;
}

#header nav li.relative > ul > li > a {
    white-space: nowrap;
}

#header nav li.relative > span[aria-haspopup] {
    border-radius: 10px;
    transition: background-color .2s ease-out, color .15s ease-out;
}

#header nav li.relative > span[aria-expanded='true'] {
    background: var(--mx-wash);
    color: var(--mx-ink);
}

/* ------------------------------------------------------------------------
 | Product pages open in the same framed panel as every other page.
 | The heading stands on the left edge of the picker beneath it.
 * --------------------------------------------------------------------- */

#pricing.mx-buy {
    overflow: visible;
    isolation: auto;
}

#pricing.mx-buy::before {
    content: none;
}

.mx-buy-in {
    padding: 26px 0 24px;
}

.mx-buy-head {
    max-width: 30rem;
    margin: 0 auto 20px;
}

.mx-buy-head > p:not(.mx-rating) {
    margin-top: 10px;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.mx-buy-in:has(.ti) .mx-buy-head {
    max-width: 26rem;
}

.mx-buy-in:has(.ti-cards.is-solo) .mx-buy-head {
    max-width: 24rem;
}

@media (max-width: 380px) {
    .mx-buy .mx-hero-frame > .max-w-6xl {
        padding-inline: 10px;
    }
}

@media (min-width: 640px) {
    .mx-buy-in {
        padding: 38px 0 34px;
    }

    .mx-buy-head {
        max-width: 38rem;
        margin-bottom: 26px;
    }

    .mx-buy-in:has(.ti) .mx-buy-head {
        max-width: 26rem;
    }

    .mx-buy-in:has(.ti-cards.is-solo) .mx-buy-head {
        max-width: 24rem;
    }
}

@media (min-width: 768px) {
    .mx-buy-in:has(.ti) .mx-buy-head {
        max-width: 46rem;
    }
}

@media (min-width: 1024px) {
    .mx-buy-in {
        padding: 56px 0 50px;
    }

    .mx-buy-head {
        max-width: 44rem;
        margin: 0 0 34px;
    }

    .mx-buy-head .ck-h1 {
        font-size: 3.25rem;
    }

    .mx-buy-head > p:not(.mx-rating) {
        max-width: 40rem;
        font-size: 1.1875rem;
    }

    .mx-buy-in:has(.ti) .mx-buy-head {
        margin-inline: auto;
    }

    /* Free trial: the words on the left, the card on the right. */
    .mx-buy-in:has(.ti-cards.is-solo) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24rem;
        align-items: center;
        gap: 64px;
    }

    .mx-buy-in:has(.ti-cards.is-solo) .mx-buy-head {
        max-width: 34rem;
        margin: 0;
    }

    .mx-buy-in:has(.ti-cards.is-solo) .ti-cards {
        margin: 0;
    }
}

@media (min-width: 1280px) {
    .mx-buy-in:has(.ti) .mx-buy-head {
        max-width: 44rem;
        margin-inline: 0;
    }
}

/* The questions follow the panel at the usual distance. */
#pricing.mx-buy + .mx-faq .mx-faq-in {
    padding-top: 56px;
}

@media (min-width: 1024px) {
    #pricing.mx-buy + .mx-faq .mx-faq-in {
        padding-top: 88px;
    }
}

/* A few reviews on a narrow screen: the words people wrote come before the
   invitation to write one. */
@media (max-width: 959px) {
    .mx-rev-in.is-few {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mx-rev-in.is-few .mx-rev-side {
        display: contents;
    }

    .mx-rev-in.is-few .mx-rev-main {
        order: 2;
        margin-top: 28px;
    }

    .mx-rev-in.is-few .mx-rev-write {
        order: 3;
        margin-top: 30px;
    }
}

/* ========================================================================
 | Type
 | Inter throughout: text, headings, prices and amounts.
 * ===================================================================== */

/* Inter, served from this site (public/fonts/inter), not from Google. These are the files
   Google Fonts hands out for the same request. Each is a variable font, so one file covers
   every weight from 400 to 800, and a browser only fetches the scripts a page uses:
   an English page loads inter-latin.woff2 (47 KB) and nothing else. */
/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-greek-ext.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-greek.woff2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* A stand-in sized to Inter, so the page barely moves when the font arrives. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107.12%;
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
}

:root {
    --mx-font: Inter, 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Display width. Inter has one width; the hook stays for a face that has more. */
    --mx-wide: 100%;
}

html,
body,
.font-inter,
button,
input,
select,
textarea {
    font-family: var(--mx-font);
}

/* Figures keep one width wherever prices and amounts stand under each other or change in place. */
.pk,
.ti,
.mx-steps-num,
.ck-steps-n,
.ck-line b,
.pay-method-price,
.mx-rev-avg b,
.mx-rev-bars,
table.table-auto,
.mx-sheet.is-stats b,
.mx-cmp th,
.mx-cmp td,
.mx-track-meter b,
.mx-rows dd,
.mx-order-meta,
.mx-scene-n,
.mx-prom-fig b {
    font-variant-numeric: tabular-nums;
}

/* ========================================================================
 | Motion, second pass
 | The three bars behave like the level meters of a mixing desk: wherever
 | something happens they rise, peak and settle. Everything here moves with
 | transform, opacity or clip-path only.
 * ===================================================================== */

@property --mx-turn {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* --- Menu: one mark glides to whatever the pointer is on ---------------- */

#header nav > ul:first-child {
    position: relative;
}

.mx-nav-mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 10px;
    background: var(--mx-action);
    clip-path: var(--mx-bar);
    opacity: 0;
    pointer-events: none;
    transition: translate .5s var(--mx-spring), opacity .2s ease-out;
}

#header nav.has-mark > ul > li > a.px-3::after {
    content: none;
}

#header nav > ul > li > .px-3 {
    transition: color .15s ease-out;
}

/* The list under "Trial" unrolls from the top, row by row, and leaves faster than it came. */
@keyframes mx-unroll {
    from {
        opacity: 0;
        translate: 0 -7px;
    }
}

#header nav li.relative > ul > li {
    animation: mx-unroll .3s var(--mx-ease) both;
}

#header nav li.relative > ul > li:nth-child(2) {
    animation-delay: 45ms;
}

#header nav li.relative > ul > li:nth-child(3) {
    animation-delay: 90ms;
}

#header nav li.relative > ul > li:nth-child(4) {
    animation-delay: 135ms;
}

#header nav li.relative > ul > li > a .mx-chip {
    transition: rotate .35s var(--mx-spring), scale .35s var(--mx-spring);
}

@media (hover: hover) {
    #header nav li.relative > ul > li > a:hover .mx-chip {
        rotate: -8deg;
        scale: 1.12;
    }
}

/* --- Buttons: a band of light, leaning like the mark, crosses on hover --- */

a.btn:not(.disable-default),
a.btn-sm:not(.disable-default),
button.btn:not(.disable-default),
button.btn-sm:not(.disable-default),
.pk-cta,
.pk-dock-cta,
.mx-cta-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

a.btn:not(.disable-default)::after,
a.btn-sm:not(.disable-default)::after,
button.btn:not(.disable-default)::after,
button.btn-sm:not(.disable-default)::after,
.pk-cta::after,
.pk-dock-cta::after,
.mx-cta-btn::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -2px;
    bottom: -2px;
    left: 0;
    width: 44%;
    min-width: 54px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24) 38%, rgba(255, 255, 255, .24) 62%, transparent);
    transform: translateX(-140%) skewX(-26.565deg);
    pointer-events: none;
}

a.btn.is-quiet:not(.disable-default)::after,
.mx-cta-btn:not(.is-quiet)::after {
    background: linear-gradient(90deg, transparent, rgba(147, 55, 251, .16) 38%, rgba(147, 55, 251, .16) 62%, transparent);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a.btn:not(.disable-default):hover::after,
    a.btn-sm:not(.disable-default):hover::after,
    button.btn:not(.disable-default):hover::after,
    button.btn-sm:not(.disable-default):hover::after,
    .pk-dock-cta:hover::after,
    .mx-cta-btn:hover::after {
        transform: translateX(330%) skewX(-26.565deg);
        transition: transform .75s var(--mx-ease);
    }
}

/* The one button the page is about: the band passes now and then by itself. */
@keyframes mx-sheen {
    0% {
        transform: translateX(-140%) skewX(-26.565deg);
    }

    11%,
    100% {
        transform: translateX(330%) skewX(-26.565deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pk-cta::after {
        animation: mx-sheen 6.5s 2.2s infinite;
    }
}

/* On its way: the bars move like a level meter until the next page is there. */
@keyframes mx-eq {
    0%,
    100% {
        transform: scaleY(.4);
    }

    50% {
        transform: scaleY(1.15);
    }
}

.is-going .mx-bars i {
    animation: mx-eq .62s ease-in-out infinite;
    transition: none;
}

.is-going .mx-bars i:nth-child(2) {
    animation-delay: -.2s;
}

.is-going .mx-bars i:nth-child(3) {
    animation-delay: -.41s;
}

.mx-bars.is-added {
    margin-left: 2px;
}

a.btn.is-quiet .mx-bars.is-added i,
.mx-cta-btn:not(.is-quiet) .mx-bars.is-added i {
    background-color: var(--mx-action);
}

@media (prefers-reduced-motion: reduce) {
    .is-going .mx-bars i {
        animation: none;
    }
}

/* --- Headings: the coloured words sit on a leaning stroke of marker ------ */

.mx-head .h2 .text-theme-600,
.mx-hl {
    padding-inline: .16em;
    margin-inline: -.16em;
    background: linear-gradient(116.565deg, transparent .2em, rgba(147, 55, 251, .13) .2em calc(100% - .2em), transparent calc(100% - .2em)) no-repeat 0 78% / 100% 46%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.mx-head.is-light .h2 .text-theme-600 {
    background-image: linear-gradient(116.565deg, transparent .2em, rgba(255, 255, 255, .13) .2em calc(100% - .2em), transparent calc(100% - .2em));
}

@keyframes mx-mark-in {
    from {
        background-size: 0% 46%;
    }
}

/* --- Package picker ------------------------------------------------------ */

/* A tile lifts a little towards the pointer. */
.pk-tile {
    transition: box-shadow .22s var(--mx-ease), color .22s var(--mx-ease), transform .08s ease-out, translate .3s var(--mx-spring);
}

@media (hover: hover) {
    .pk-tile:hover {
        translate: 0 -2px;
        box-shadow: inset 0 0 0 1px var(--mx-line-strong), 0 10px 18px -14px rgba(0, 0, 81, .5);
    }

    .pk-tile:has(.pk-radio:checked):hover,
    .pk-tile.is-on:hover {
        translate: none;
        box-shadow: inset 0 0 0 1px var(--mx-ink), 0 14px 26px -16px rgba(0, 0, 81, .7);
    }
}

/* The price rolls like a counter: soft while it moves, a small overshoot, then still.
   A digit that did not change stays where it is. */
@keyframes pk-roll-up {
    0% {
        transform: translateY(.72em);
        opacity: 0;
        filter: blur(5px);
    }

    62% {
        transform: translateY(-.06em);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: none;
    }
}

@keyframes pk-roll-down {
    0% {
        transform: translateY(-.72em);
        opacity: 0;
        filter: blur(5px);
    }

    62% {
        transform: translateY(.06em);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: none;
    }
}

.pk-d.is-same {
    animation: none;
}

/* Stepping up a size: a line of the logo colours runs once round the price card. */
#pricing .pk-panels {
    position: relative;
}

#pricing .pk-panels::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--mx-turn), transparent 0 62%, #00b6d5 70%, #6704d8 82%, #ff04d8 94%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
}

@keyframes mx-trace {
    0% {
        --mx-turn: 40deg;
        opacity: 0;
    }

    12%,
    78% {
        opacity: 1;
    }

    100% {
        --mx-turn: 400deg;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pk.is-stepped .pk-panels::after {
        animation: mx-trace .95s cubic-bezier(.45, 0, .25, 1);
    }
}

/* The nudge to the next size is a real row: the bars step forward when it is meant. */
.pk-nudge::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 10px;
    margin-left: 8px;
    background: currentColor;
    clip-path: var(--mx-bar);
    opacity: .55;
    vertical-align: -1px;
    transition: translate .3s var(--mx-spring), opacity .15s ease-out;
}

@media (hover: hover) {
    .pk-nudge:hover::after {
        translate: 4px 0;
        opacity: 1;
    }
}

.pk-nudge:active {
    scale: .985;
}

/* On a wide screen the price and the button follow as a small bar once the picker is out of sight. */
@media (min-width: 640px) {
    .pk-dock.is-float {
        display: flex;
        right: auto;
        bottom: 20px;
        left: 50%;
        gap: 30px;
        min-width: 400px;
        padding: 9px 9px 9px 24px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .92);
        box-shadow: inset 0 0 0 1px var(--mx-line), 0 26px 50px -22px rgba(0, 0, 81, .5);
        translate: -50% 0;
        transform: translateY(170%);
        transition: transform .5s var(--mx-spring);
    }

    .pk-dock.is-float[hidden] {
        display: none;
    }

    .pk-dock.is-float.is-up {
        transform: none;
    }

    .pk-dock.is-float .pk-dock-text {
        flex-direction: row;
        align-items: baseline;
        gap: 14px;
    }

    .pk-dock.is-float .pk-dock-text b {
        font-size: .9375rem;
    }
}

@media (min-width: 1024px) {
    body.has-dock {
        padding-bottom: 0;
    }
}

/* ========================================================================
 | Home, second pass
 | Service pictures that are built from the page's own parts and play as
 | they scroll into view, and a ledger in place of the icon cards.
 * ===================================================================== */

@property --mx-n {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

@property --mx-k {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

/* --- Service pictures ---------------------------------------------------- */

.mx-svc-art {
    container-type: inline-size;
    width: min(100%, 18.5rem);
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.mx-scene {
    position: relative;
    display: block;
    color: var(--mx-ink);
    font-size: 5cqw;
    line-height: 1.2;
    text-align: left;
    view-timeline-name: --mx-scene;
    view-timeline-axis: block;
}

.mx-scene-card {
    position: relative;
    padding: 1.15em;
    border-radius: 1.4em;
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line), var(--mx-shadow);
}

/* A leaning tab on the corner, like the one on the order desk. */
.mx-scene-tag {
    position: absolute;
    top: -.85em;
    right: -.55em;
    padding: .44em .85em .48em;
    background: var(--mx-offer-bg);
    color: var(--mx-offer-ink);
    font-size: .95em;
    font-weight: 800;
    font-stretch: var(--mx-wide);
    line-height: 1;
    letter-spacing: -.02em;
    clip-path: polygon(.5em 0, 100% 0, calc(100% - .5em) 100%, 0 100%);
    rotate: 5deg;
}

.mx-svc-row.is-flipped .mx-scene-tag {
    right: auto;
    left: -.55em;
    rotate: -5deg;
}

/* The running figure: thousands and the rest are two counters, so "1,204" can climb to "1,704". */
.mx-scene-count {
    display: flex;
    align-items: baseline;
    gap: .45em;
    margin-top: .95em;
}

.mx-scene-n {
    font-size: 2.15em;
    font-weight: 800;
    font-stretch: var(--mx-wide);
    line-height: 1;
    letter-spacing: -.04em;
}

.mx-scene-n::after {
    counter-reset: mx-k var(--mx-k) mx-n var(--mx-n);
    content: counter(mx-k) ',' counter(mx-n);
}

.mx-scene-count > span:last-child {
    color: var(--mx-mute);
    font-size: .82em;
    font-weight: 500;
}

.mx-scene-count .mx-chip {
    align-self: center;
    font-size: 1.05em;
}

/* Grey lines that stand for text. */
.mx-scene-id i,
.mx-scene-lines i,
.mx-scene-row em {
    display: block;
    height: .5em;
    border-radius: .25em;
    background: #ece6f7;
}

/* A short meter of leaning bars. */
.mx-scene-meter {
    display: flex;
    align-items: flex-end;
    flex: none;
    margin-left: auto;
}

.mx-scene-meter i {
    width: .52em;
    height: 1.1em;
    margin-left: -.1em;
    background: var(--mx-line);
    clip-path: var(--mx-bar);
    transform-origin: 50% 100%;
}

.is-followers .mx-scene-meter i:nth-child(1),
.mx-scene-plate .mx-scene-meter i.is-lit:nth-child(1) {
    background: #00b6d5;
}

.is-followers .mx-scene-meter i:nth-child(2) {
    background: #2a7fd6;
}

.is-followers .mx-scene-meter i:nth-child(3),
.mx-scene-plate .mx-scene-meter i.is-lit:nth-child(2) {
    background: #5a2fd8;
}

.is-followers .mx-scene-meter i:nth-child(4),
.mx-scene-plate .mx-scene-meter i.is-lit:nth-child(3) {
    background: #9a04d8;
}

.is-followers .mx-scene-meter i:nth-child(5) {
    background: #d004d8;
}

.mx-scene-plate .mx-scene-meter i.is-lit:nth-child(4) {
    background: #ff04d8;
}

/* Followers: a profile, its count, and the newest three arriving. */
.mx-scene-top {
    display: flex;
    align-items: center;
    gap: .7em;
}

.mx-scene-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.9em;
    height: 2.9em;
    border-radius: 50%;
    background: var(--mx-ink);
}

.mx-scene-avatar .mx-bars {
    --w: .6em;
    --h: .95em;
    margin-left: .1em;
}

.mx-scene-id {
    display: grid;
    gap: .42em;
    min-width: 0;
}

.mx-scene-id b {
    font-size: .95em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
}

.mx-scene-id i {
    width: 4.4em;
}

.is-followers .mx-scene-n {
    --mx-k: 1;
    --mx-n: 704;
}

.mx-scene-rows {
    display: grid;
    gap: .55em;
    margin-top: .95em;
}

.mx-scene-row {
    display: flex;
    align-items: center;
    gap: .6em;
}

.mx-scene-row i {
    flex: none;
    width: 1.55em;
    height: 1.55em;
    border-radius: .5em;
    background: #cfe0ff;
}

.mx-scene-row:nth-child(2) i {
    background: #ffe0b8;
}

.mx-scene-row:nth-child(3) i {
    background: #f8c6ee;
}

.mx-scene-row em {
    width: 5.2em;
}

.mx-scene-row:nth-child(2) em {
    width: 6.6em;
}

.mx-scene-row:nth-child(3) em {
    width: 4.2em;
}

.mx-scene-row u {
    flex: none;
    width: 2.5em;
    height: 1.3em;
    margin-left: auto;
    border-radius: .65em;
    background: var(--mx-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l2.9 2.9 5.9-6.3' fill='none' stroke='%239337fb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .82em no-repeat;
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

/* Likes: one post, one heart, the count under it. */
.mx-scene-photo {
    position: relative;
    display: grid;
    place-items: center;
    height: 8.4em;
    overflow: hidden;
    border-radius: .9em;
    background: linear-gradient(116.565deg, #ffe4ea 0 38%, #ffd2de 38% 56%, #ffe9d6 56% 72%, #ffdcee 72%);
}

.mx-scene-heart {
    position: relative;
    z-index: 1;
    width: 3.7em;
    height: 3.7em;
    fill: #e02957;
    filter: drop-shadow(0 .45em .6em rgba(224, 41, 87, .32));
}

.mx-scene-photo::after {
    content: '';
    position: absolute;
    width: 3.4em;
    height: 3.4em;
    border-radius: 50%;
    box-shadow: 0 0 0 .16em rgba(224, 41, 87, .45);
    opacity: 0;
}

.is-likes .mx-scene-count,
.is-views .mx-scene-count {
    margin-top: .85em;
}

.is-likes .mx-scene-n,
.is-views .mx-scene-n {
    font-size: 1.55em;
}

.is-likes .mx-scene-n {
    --mx-k: 2;
    --mx-n: 480;
}

.mx-scene-lines {
    display: grid;
    gap: .45em;
    margin-top: .8em;
}

.mx-scene-lines i:first-child {
    width: 78%;
}

.mx-scene-lines i:last-child {
    width: 46%;
}

.mx-scene-float {
    position: absolute;
    top: 7.2em;
    left: -.2em;
}

.mx-svc-row.is-flipped .mx-scene-float {
    right: -.2em;
    left: auto;
}

.mx-scene-float i {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25em;
    height: 1.25em;
    background: #e02957;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.4c-.3 0-.6-.1-.8-.3C6.3 15.8 3 12.9 3 9.2 3 6.4 5.2 4.2 7.9 4.2c1.5 0 3 .7 4.1 1.9 1.1-1.2 2.6-1.9 4.1-1.9C18.8 4.2 21 6.4 21 9.2c0 3.7-3.3 6.6-8.2 10.9-.2.2-.5.3-.8.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.4c-.3 0-.6-.1-.8-.3C6.3 15.8 3 12.9 3 9.2 3 6.4 5.2 4.2 7.9 4.2c1.5 0 3 .7 4.1 1.9 1.1-1.2 2.6-1.9 4.1-1.9C18.8 4.2 21 6.4 21 9.2c0 3.7-3.3 6.6-8.2 10.9-.2.2-.5.3-.8.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
}

.mx-scene-float i:nth-child(2) {
    --x: 1.3em;
    width: .9em;
    height: .9em;
    background: #ff7aa0;
}

.mx-scene-float i:nth-child(3) {
    --x: -.9em;
    width: 1.05em;
    height: 1.05em;
    background: #f24a78;
}

/* Views: a reel, its line climbing, the count under it. */
.mx-scene-reel {
    position: relative;
    display: grid;
    place-items: center;
    height: 8.4em;
    overflow: hidden;
    border-radius: .9em;
    background: linear-gradient(116.565deg, #17176a 0 42%, #20207a 42% 58%, #12125c 58% 76%, #1b1b72 76%);
}

.mx-scene-play {
    position: relative;
    z-index: 1;
    width: 3em;
    height: 3em;
    margin-bottom: 1em;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d96a06' d='M8.6 5.1C7.5 4.4 6 5.2 6 6.6v10.8c0 1.4 1.5 2.2 2.6 1.5l9-5.4c1.1-.7 1.1-2.3 0-3z'/%3E%3C/svg%3E") 54% 50% / 1.5em no-repeat;
    box-shadow: 0 .6em 1.2em -.4em rgba(0, 0, 0, .55);
}

.mx-scene-spark {
    position: absolute;
    right: .8em;
    bottom: 1.25em;
    left: .8em;
    width: calc(100% - 1.6em);
    height: 3.2em;
    fill: none;
    stroke: #ffb35c;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .95;
}

.mx-scene-spark path {
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.mx-scene-bar {
    position: absolute;
    right: .8em;
    bottom: .65em;
    left: .8em;
    height: .26em;
    overflow: hidden;
    border-radius: .13em;
    background: rgba(255, 255, 255, .2);
}

.mx-scene-bar i {
    display: block;
    height: 100%;
    background: #fff;
    transform-origin: 0 50%;
}

.is-views .mx-scene-n {
    --mx-k: 12;
    --mx-n: 540;
}

/* Packages: four plates, Bronze at the back, Platinum in ink at the front. */
.mx-scene-stack {
    position: relative;
    height: 15.2em;
}

.mx-scene-plate {
    position: absolute;
    z-index: calc(var(--p) + 1);
    top: calc(var(--p) * 3.45em + .3em);
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: .7em;
    height: 4em;
    padding: 0 1em;
    border-radius: 1.1em;
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line), 0 .9em 1.6em -1em rgba(0, 0, 81, .4);
    rotate: calc((var(--p) - 1.5) * 1.7deg);
    translate: calc((var(--p) - 1.5) * .55em) 0;
    transition: translate .5s var(--mx-spring), rotate .5s var(--mx-spring);
}

.mx-scene-plate b {
    min-width: 5em;
    font-size: 1.05em;
    font-weight: 800;
    font-stretch: var(--mx-wide);
    letter-spacing: -.025em;
}

.mx-scene-trio {
    display: flex;
    gap: .22em;
    font-size: .92em;
}

.mx-scene-plate:last-child {
    background: var(--mx-ink);
    box-shadow: 0 1.1em 1.8em -1em rgba(0, 0, 81, .7);
    color: #fff;
}

.mx-scene-plate:last-child .mx-scene-meter i:not(.is-lit) {
    background: rgba(255, 255, 255, .2);
}

@media (hover: hover) {
    .mx-svc-row:hover .mx-scene-plate {
        rotate: calc((var(--p) - 1.5) * 2.8deg);
        translate: calc((var(--p) - 1.5) * 1em) calc((var(--p) - 1.5) * .22em);
    }
}

/* The pictures play once when they come into view (see the smoothness pass); these are the moves. */
@keyframes mx-sc-count-f {
    from {
        --mx-n: 204;
    }
}

@keyframes mx-sc-count-l {
    from {
        --mx-n: 230;
    }
}

@keyframes mx-sc-count-v {
    from {
        --mx-k: 7;
    }
}

@keyframes mx-sc-row {
    from {
        opacity: 0;
        translate: 1.4em 0;
    }
}

@keyframes mx-sc-pop {
    0% {
        opacity: 0;
        scale: .2;
    }

    70% {
        opacity: 1;
        scale: 1.14;
    }

    100% {
        scale: 1;
    }
}

@keyframes mx-sc-lit {
    from {
        background-color: var(--mx-line);
        transform: scaleY(.45);
    }
}

@keyframes mx-sc-ring {
    0% {
        opacity: 0;
        scale: .6;
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        scale: 2.3;
    }
}

@keyframes mx-sc-float {
    0% {
        opacity: 0;
        scale: .4;
        translate: 0 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        scale: 1;
        translate: var(--x, .2em) -6.5em;
    }
}

@keyframes mx-sc-draw {
    from {
        stroke-dashoffset: 1;
    }
}

@keyframes mx-sc-fill {
    from {
        transform: scaleX(.05);
    }
}

@keyframes mx-sc-plate {
    from {
        rotate: 0deg;
        translate: 0 calc(var(--p) * -1.5em);
    }
}

/* --- What you get: a ledger ---------------------------------------------- */

.mx-feat {
    padding: 8px 0 72px;
}

.mx-ledger {
    display: grid;
    gap: 22px;
    margin-top: 30px;
}

.mx-proms {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-prom {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 13.5rem;
    padding: 22px 22px 24px;
    border-radius: var(--mx-r-l);
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    color: var(--mx-ink);
}

/* The same leaning bands as the framed panels, here in the far corner. */
.mx-prom::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(116.565deg,
        transparent 0 58%,
        rgba(103, 4, 216, .07) 58% 72%,
        transparent 72% 77%,
        rgba(255, 4, 216, .08) 77% 100%);
}

.mx-prom.is-ink {
    background: var(--mx-ink);
    box-shadow: none;
    color: #fff;
}

.mx-prom.is-ink::before {
    background: linear-gradient(116.565deg,
        transparent 0 58%,
        rgba(255, 255, 255, .05) 58% 72%,
        transparent 72% 77%,
        rgba(255, 255, 255, .07) 77% 100%);
}

.mx-prom-fig {
    display: flex;
    align-items: baseline;
    gap: .1em;
    margin-bottom: auto;
    font-size: clamp(5rem, 22vw, 7.75rem);
    font-weight: 800;
    font-stretch: var(--mx-wide);
    line-height: .78;
    letter-spacing: -.06em;
}

.mx-prom-fig b {
    font-weight: inherit;
}

.mx-prom-fig small {
    font-size: .22em;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mx-prom h3 {
    margin-top: 26px;
    color: inherit;
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.2;
}

.mx-prom > p:not(.mx-prom-fig) {
    max-width: 26rem;
    margin-top: 6px;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    line-height: 1.5;
}

.mx-prom.is-ink > p:not(.mx-prom-fig) {
    color: #c5c5ea;
}

.mx-prom > .mx-bars {
    position: absolute;
    top: 22px;
    right: 22px;
    --w: 13px;
    --h: 20.5px;
}

.mx-prom:not(.is-ink) > .mx-bars i {
    background-image: none;
    background-color: var(--mx-line-strong);
}

.mx-ledger-rows {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mx-line);
    list-style: none;
}

.mx-ledger-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 17px 2px 18px;
    border-bottom: 1px solid var(--mx-line);
}

.mx-ledger-fig {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--mx-ink);
    font-size: 1.625rem;
    font-weight: 800;
    font-stretch: var(--mx-wide);
    line-height: 1;
    letter-spacing: -.045em;
    white-space: nowrap;
    transition: color .2s var(--mx-ease);
}

.mx-ledger-fig b {
    font-weight: inherit;
}

.mx-ledger-fig small {
    color: var(--mx-mute);
    font-size: .6875rem;
    font-weight: 600;
    font-stretch: 100%;
    letter-spacing: 0;
}

.mx-ledger-fig .mx-bars {
    --w: 10px;
    --h: 16px;
    margin-top: 3px;
}

.mx-ledger-row h3 {
    color: var(--mx-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.mx-ledger-row div p {
    margin-top: 3px;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    line-height: 1.5;
}

@media (hover: hover) {
    .mx-ledger-row:hover .mx-ledger-fig {
        color: var(--mx-action);
    }
}

@media (min-width: 640px) {
    .mx-proms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .mx-ledger-row {
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 20px;
    }

    .mx-ledger-fig {
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .mx-ledger {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
        gap: 48px;
        margin-top: 38px;
    }

    .mx-ledger.is-plain {
        grid-template-columns: minmax(0, 1fr);
    }

    .mx-ledger {
        align-items: stretch;
    }

    .mx-proms {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .mx-prom {
        min-height: 16.25rem;
        padding: 26px 26px 28px;
    }

    .mx-prom-fig {
        font-size: 8.25rem;
    }

    .mx-ledger-rows {
        border-top: 0;
    }

    .mx-ledger-row:first-child {
        padding-top: 4px;
    }
}

/* ========================================================================
 | Details, second pass
 | Arrivals on first paint, the steps acted out, the foot of the page.
 * ===================================================================== */

/* --- First paint: things arrive in reading order ------------------------- */

@keyframes mx-in-up {
    from {
        opacity: 0;
        translate: 0 16px;
    }
}

@keyframes mx-in-slide {
    from {
        translate: 0 14px;
    }
}

@keyframes mx-in-card {
    from {
        opacity: 0;
        translate: 0 22px;
        scale: .975;
    }
}

@keyframes mx-in-bands {
    from {
        opacity: 0;
        translate: 7% 0;
    }
}

@keyframes pk-tile-in {
    from {
        opacity: 0;
        translate: 0 10px;
        scale: .95;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* The headline is there at once (it only settles); what follows fades up after it. */
    .mx-hero-h1,
    .mx-buy-head .ck-h1,
    .mx-pagehead h1 {
        animation: mx-in-slide .6s var(--mx-ease) backwards;
    }

    .mx-hero-sub,
    .mx-buy-head > p,
    .mx-pagehead h1 + p {
        animation: mx-in-up .6s var(--mx-ease) 90ms backwards;
    }

    .mx-hero-stage,
    #pricing .pk-side {
        animation: mx-in-card .7s var(--mx-ease) 140ms backwards;
    }

    .mx-hero-frame::before {
        animation: mx-in-bands 1s var(--mx-ease) backwards;
    }

    /* Tiles come in one after another, also when the order desk changes service. */
    .pk-tile {
        animation: pk-tile-in .42s var(--mx-ease) backwards;
        animation-delay: calc(var(--t, 0) * 22ms + 120ms);
    }

    .pk-assure li {
        animation: mx-in-up .5s var(--mx-ease) backwards;
        animation-delay: 380ms;
    }

    .pk-assure li:nth-child(n + 3) {
        animation-delay: 440ms;
    }

    .pk-assure li:nth-child(n + 5) {
        animation-delay: 500ms;
    }
}

/* --- How ordering works: each step acted out ----------------------------- */

.mx-steps-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.mx-steps-mock {
    display: flex;
    align-items: center;
    flex: none;
    height: 40px;
    margin-bottom: 14px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    color: #fff;
}

/* 1: four sizes, one is picked, then another. */
.mx-steps-mock.is-1 {
    gap: 5px;
}

.mx-steps-mock.is-1 i {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .13);
}

@keyframes mx-mock-pick {
    0%,
    4% {
        background-color: rgba(255, 255, 255, .13);
        scale: 1;
    }

    8% {
        background-color: #fff;
        scale: .86;
    }

    13%,
    25% {
        background-color: #fff;
        scale: 1;
    }

    30%,
    100% {
        background-color: rgba(255, 255, 255, .13);
        scale: 1;
    }
}

/* 2: the name is typed, stays, and is cleared. */
.mx-steps-mock.is-2 {
    min-width: 122px;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.mx-steps-mock.is-2 i {
    font-style: normal;
}

.mx-steps-mock.is-2::after {
    content: '';
    width: 2px;
    height: 16px;
    margin-left: 2px;
    border-radius: 1px;
    background: #cba6ff;
    animation: mx-mock-caret 1s steps(1) infinite;
}

@keyframes mx-mock-caret {
    50% {
        opacity: 0;
    }
}

@keyframes mx-mock-type {
    0%,
    3% {
        opacity: 0;
    }

    4%,
    78% {
        opacity: 1;
    }

    79%,
    100% {
        opacity: 0;
    }
}

/* 3: the meter fills as the order arrives. */
.mx-steps-mock.is-3 {
    align-items: flex-end;
    padding: 0 12px 10px 14px;
}

.mx-steps-mock.is-3 i {
    width: 10px;
    height: 20px;
    margin-left: -2px;
    background: rgba(255, 255, 255, .16);
    clip-path: var(--mx-bar);
    transform-origin: 50% 100%;
}

@keyframes mx-mock-fill {
    0%,
    5% {
        background-color: rgba(255, 255, 255, .16);
        transform: scaleY(.6);
    }

    9% {
        background-color: var(--c2, #fff);
        transform: scaleY(1.15);
    }

    13%,
    80% {
        background-color: var(--c2, #fff);
        transform: scaleY(1);
    }

    88%,
    100% {
        background-color: rgba(255, 255, 255, .16);
        transform: scaleY(.6);
    }
}

.mx-steps-mock.is-3 i:nth-child(1) { --c2: #2fd3ee; }
.mx-steps-mock.is-3 i:nth-child(2) { --c2: #5aa2f2; }
.mx-steps-mock.is-3 i:nth-child(3) { --c2: #8b78f5; }
.mx-steps-mock.is-3 i:nth-child(4) { --c2: #a85cf7; }
.mx-steps-mock.is-3 i:nth-child(5) { --c2: #cf5cf3; }
.mx-steps-mock.is-3 i:nth-child(6) { --c2: #ee5fe6; }
.mx-steps-mock.is-3 i:nth-child(7) { --c2: #ff6fe0; }

@media (prefers-reduced-motion: no-preference) {
    .mx-steps-mock.is-1 i {
        animation: mx-mock-pick 6s infinite;
    }

    .mx-steps-mock.is-1 i:nth-child(2) {
        animation-delay: 3s;
    }

    .mx-steps-mock.is-1 i:nth-child(3) {
        animation-delay: 1.5s;
    }

    .mx-steps-mock.is-1 i:nth-child(4) {
        animation-delay: 4.5s;
    }

    .mx-steps-mock.is-2 i {
        animation: mx-mock-type 6s infinite backwards;
        animation-delay: calc(var(--c) * 95ms + .6s);
    }

    .mx-steps-mock.is-3 i {
        animation: mx-mock-fill 6s infinite backwards;
        animation-delay: calc(var(--c) * .3s + 1.2s);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-steps-mock.is-1 i:nth-child(3) {
        background: #fff;
    }

    .mx-steps-mock.is-2::after {
        animation: none;
    }

    .mx-steps-mock.is-3 i {
        background-color: var(--c2, #fff);
    }
}

/* --- Questions: the open one is marked on its left edge ------------------ */

.mx-faq-list > li {
    position: relative;
}

.mx-faq-list > li::before {
    content: '';
    position: absolute;
    top: 21px;
    left: -14px;
    width: 7px;
    height: 11px;
    background: var(--mx-action);
    clip-path: var(--mx-bar);
    opacity: 0;
    translate: -6px 0;
    transition: opacity .2s var(--mx-ease), translate .4s var(--mx-spring);
}

.mx-faq-list > li:has(> :where(.mx-faq-item)[open])::before {
    opacity: 1;
    translate: 0 0;
}

@media (max-width: 1180px) {
    .mx-faq-list > li::before {
        content: none;
    }
}

/* --- Foot of the page ---------------------------------------------------- */

footer > div::after {
    content: none;
}

/* The top of the mark, rising from the bottom edge. Each bar lifts a little as the pointer comes near. */
.mx-foot-mark {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: clamp(56px, 10vw, 124px);
    margin-top: 4px;
    overflow: hidden;
    pointer-events: none;
}

.mx-foot-mark i {
    flex: none;
    width: clamp(57px, 10.25vw, 127px);
    height: clamp(90px, 16.1vw, 200px);
    margin-left: clamp(-36px, -2.93vw, -16px);
    align-self: flex-start;
    background: #d6e7fb;
    clip-path: var(--mx-bar);
    translate: 0 calc(var(--lift, 0) * -14px);
    transition: translate .7s var(--mx-spring);
}

.mx-foot-mark i:nth-child(2) {
    background: #e3d8fa;
}

.mx-foot-mark i:nth-child(3) {
    width: clamp(29px, 5.12vw, 63px);
    height: clamp(49px, 8.78vw, 109px);
    margin-top: clamp(41px, 7.32vw, 91px);
    background: #fbd4f4;
    clip-path: var(--mx-bar-short);
}

@keyframes mx-foot-rise {
    from {
        transform: translateY(70%);
    }
}

/* Links in the foot: a small bar steps in before the word. */
footer ul.text-sm a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 9px;
    margin-right: 0;
    background: var(--mx-action);
    clip-path: var(--mx-bar);
    vertical-align: -1px;
    transition: width .25s var(--mx-ease), margin-right .25s var(--mx-ease);
}

@media (hover: hover) {
    footer ul.text-sm a:hover {
        translate: none;
    }

    footer ul.text-sm a:hover::before {
        width: 6px;
        margin-right: 6px;
    }
}

/* --- Nothing here yet: the mark keeps time while it waits ---------------- */

@media (prefers-reduced-motion: no-preference) {
    .mx-empty .mx-bars i {
        animation: mx-eq 1.5s ease-in-out infinite;
    }

    .mx-empty .mx-bars i:nth-child(2) {
        animation-delay: -.5s;
    }

    .mx-empty .mx-bars i:nth-child(3) {
        animation-delay: -1s;
    }
}

/* --- Product headline: the service is picked out with its icon and a stroke of marker --- */

.ck-h1 .mx-nb {
    display: inline-block;
    white-space: nowrap;
}

.ck-h1 .mx-chip {
    margin-right: .2em;
    font-size: .62em;
    vertical-align: .14em;
    rotate: -6deg;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 81, .05), 0 .08em .16em -.06em rgba(0, 0, 81, .28);
}

@media (prefers-reduced-motion: no-preference) {
    .ck-h1 .mx-hl {
        animation: mx-mark-in .7s var(--mx-ease) .4s backwards;
        animation-timeline: auto;
        animation-range: normal;
    }

    .ck-h1 .mx-chip {
        animation: mx-sc-pop .5s var(--mx-ease) .25s backwards;
    }
}

/* Less motion asked for: the new pieces hold still too. */
@media (prefers-reduced-motion: reduce) {
    .mx-nav-mark,
    .pk-tile,
    .mx-foot-mark i,
    .pk-dock.is-float,
    footer ul.text-sm a::before {
        transition-duration: .01ms !important;
    }

    #header nav li.relative > ul > li {
        animation: none;
    }
}

/* ========================================================================
 | Smoothness pass
 | Nothing is tied to the scroll wheel any more. Things below the fold play
 | once, start to finish, when they come into view (ui.js adds .is-in).
 | Without the script, or with less motion asked for, everything simply
 | stands in its end state.
 * ===================================================================== */

/* Already on screen when the page opened: no show, it just stands there. */
.is-there,
.mx-scene.is-there *,
.mx-scene.is-there *::after,
.mx-steps-list.is-there::before,
.mx-steps-list.is-there > li,
.mx-foot-mark.is-there i,
.mx-cmp.is-there path {
    animation: none !important;
}

/* Blocks of content */
html.mx-live [data-aos]:not(.is-in),
html.mx-live .mx-ledger-row:not(.is-in),
html.mx-live .mx-prom:not(.is-in),
html.mx-live .mx-steps-list:not(.is-in) > li {
    opacity: 0;
}

[data-aos].is-in,
.mx-ledger-row.is-in,
.mx-prom.is-in {
    animation: mx-in-up .8s var(--mx-ease) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

/* Marker strokes under the coloured words of a heading */
html.mx-live .mx-head .h2 .text-theme-600:not(.is-in) {
    background-size: 0% 46%;
}

.mx-head .h2 .text-theme-600.is-in {
    animation: mx-mark-in .9s var(--mx-ease) .15s backwards;
}

/* How ordering works: the line is drawn, the steps follow it */
html.mx-live .mx-steps-list:not(.is-in)::before {
    transform: scaleX(0);
}

.mx-steps-list.is-in::before {
    animation: mx-draw 1.3s var(--mx-ease) .1s backwards;
}

.mx-steps-list.is-in > li {
    animation: mx-in-up .8s var(--mx-ease) backwards;
}

.mx-steps-list.is-in > li:nth-child(2) {
    animation-delay: .16s;
}

.mx-steps-list.is-in > li:nth-child(3) {
    animation-delay: .32s;
}

/* Comparison: our ticks are drawn one row after the other */
html.mx-live .mx-cmp:not(.is-in) .is-us .mx-cmp-yes path {
    stroke-dashoffset: 14;
}

.mx-cmp.is-in .is-us .mx-cmp-yes path {
    animation: mx-tick .45s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 90ms + .15s);
}

/* Foot of the page: the bars rise one after the other */
html.mx-live .mx-foot-mark:not(.is-in) i {
    transform: translateY(72%);
}

.mx-foot-mark.is-in i {
    animation: mx-foot-rise 1s var(--mx-ease) backwards;
}

.mx-foot-mark.is-in i:nth-child(2) {
    animation-delay: .1s;
}

.mx-foot-mark.is-in i:nth-child(3) {
    animation-delay: .2s;
}

/* --- Service pictures ---------------------------------------------------- */

@keyframes mx-sc-row {
    from {
        opacity: 0;
        translate: 0 .8em;
    }
}

@keyframes mx-sc-lit {
    from {
        opacity: 0;
        transform: scaleY(.3);
    }
}

html.mx-live .mx-scene:not(.is-in) .mx-scene-row,
html.mx-live .mx-scene:not(.is-in) .mx-scene-tag,
html.mx-live .mx-scene:not(.is-in) .mx-scene-heart,
html.mx-live .mx-scene.is-followers:not(.is-in) .mx-scene-meter i {
    opacity: 0;
}

html.mx-live .mx-scene.is-followers:not(.is-in) .mx-scene-n {
    --mx-n: 204;
}

html.mx-live .mx-scene.is-likes:not(.is-in) .mx-scene-n {
    --mx-n: 230;
}

html.mx-live .mx-scene.is-views:not(.is-in) .mx-scene-n {
    --mx-k: 7;
}

html.mx-live .mx-scene:not(.is-in) .mx-scene-spark path {
    stroke-dashoffset: 1;
}

html.mx-live .mx-scene:not(.is-in) .mx-scene-bar i {
    transform: scaleX(.05);
}

html.mx-live .mx-scene:not(.is-in) .mx-scene-plate {
    rotate: 0deg;
    translate: 0 calc(var(--p) * -1.5em);
}

.mx-scene.is-followers.is-in .mx-scene-n {
    animation: mx-sc-count-f 1.7s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}

.mx-scene.is-likes.is-in .mx-scene-n {
    animation: mx-sc-count-l 1.7s cubic-bezier(.16, 1, .3, 1) .3s backwards;
}

.mx-scene.is-views.is-in .mx-scene-n {
    animation: mx-sc-count-v 1.7s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}

.mx-scene.is-in .mx-scene-row {
    animation: mx-sc-row .7s var(--mx-ease) .35s backwards;
}

.mx-scene.is-in .mx-scene-row:nth-child(2) {
    animation-delay: .5s;
}

.mx-scene.is-in .mx-scene-row:nth-child(3) {
    animation-delay: .65s;
}

.mx-scene.is-in .mx-scene-tag {
    animation: mx-sc-pop .55s var(--mx-ease) 1.05s backwards;
}

.mx-scene.is-followers.is-in .mx-scene-meter i {
    animation: mx-sc-lit .5s var(--mx-spring) backwards;
}

.mx-scene.is-followers.is-in .mx-scene-meter i:nth-child(1) { animation-delay: .2s; }
.mx-scene.is-followers.is-in .mx-scene-meter i:nth-child(2) { animation-delay: .29s; }
.mx-scene.is-followers.is-in .mx-scene-meter i:nth-child(3) { animation-delay: .38s; }
.mx-scene.is-followers.is-in .mx-scene-meter i:nth-child(4) { animation-delay: .47s; }
.mx-scene.is-followers.is-in .mx-scene-meter i:nth-child(5) { animation-delay: .56s; }
.mx-scene.is-followers.is-in .mx-scene-meter i:nth-child(6) { animation-delay: .65s; }

.mx-scene.is-in .mx-scene-heart {
    animation: mx-sc-pop .65s var(--mx-ease) .2s backwards;
}

.mx-scene.is-in .mx-scene-photo::after {
    animation: mx-sc-ring .9s ease-out .45s backwards;
}

.mx-scene.is-in .mx-scene-float i {
    animation: mx-sc-float 1.8s ease-out .6s backwards;
}

.mx-scene.is-in .mx-scene-float i:nth-child(2) {
    animation-delay: .85s;
}

.mx-scene.is-in .mx-scene-float i:nth-child(3) {
    animation-delay: 1.1s;
}

.mx-scene.is-in .mx-scene-spark path {
    animation: mx-sc-draw 1.5s cubic-bezier(.45, 0, .25, 1) .25s backwards;
}

.mx-scene.is-in .mx-scene-bar i {
    animation: mx-sc-fill 2.4s cubic-bezier(.16, 1, .3, 1) .25s backwards;
}

/* The plates fan out with a plain transition, so pointing at them and leaving again runs the same soft curve both ways. */
.mx-scene-plate {
    transition: translate .75s cubic-bezier(.22, 1, .36, 1), rotate .75s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--p) * 35ms);
}

/* The mark sits in the middle of the round picture. */
.mx-scene-avatar .mx-bars {
    margin-left: 0;
    translate: .06em 0;
}

.mx-svc-art {
    transition: rotate .75s cubic-bezier(.22, 1, .36, 1), translate .75s cubic-bezier(.22, 1, .36, 1);
}

/* --- Top bar: flat at the top of the page, a floating bar once it moves --- */

#header,
#header.is-scrolled {
    background-color: transparent;
    box-shadow: none;
}

#header::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: inset 0 0 0 1px transparent, 0 18px 36px -24px transparent;
    transition: inset .55s var(--mx-ease), border-radius .55s var(--mx-ease), box-shadow .4s ease-out;
}

#header.is-scrolled::before {
    inset: 7px max(8px, calc(50% - 39.5rem));
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px var(--mx-line), 0 18px 36px -24px rgba(0, 0, 81, .55);
}

@media (prefers-reduced-motion: reduce) {
    #header::before {
        transition: none;
    }
}

/* --- Questions: the answer opens like a drawer, the open one becomes a soft card --- */

.mx-faq-list > li::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 5px -14px;
    width: auto;
    height: auto;
    border-radius: 18px;
    background: var(--mx-wash);
    clip-path: none;
    opacity: 0;
    scale: .985;
    translate: none;
    transition: opacity .35s var(--mx-ease), scale .5s var(--mx-ease);
    pointer-events: none;
}

.mx-faq-list > li:has(> :where(.mx-faq-item)[open])::before {
    opacity: 1;
    scale: 1;
    translate: none;
}

@media (max-width: 1180px) {
    .mx-faq-list > li::before {
        content: '';
        inset: 5px -8px;
    }
}

.mx-faq-q,
.mx-faq-a {
    position: relative;
    z-index: 1;
}

.mx-faq-q {
    transition: color .2s ease-out, border-color .3s ease-out;
}

.mx-faq-list > li > :where(.mx-faq-item)[open] > .mx-faq-q,
.mx-faq-list > li:has(> :where(.mx-faq-item)[open]) + li > :where(.mx-faq-item) > .mx-faq-q {
    border-top-color: transparent;
}

/* The mark of the logo steps in before an open question, and the words make room for it. */
.mx-faq-q > .mx-faq-h {
    padding-right: 28px;
    transition: translate .5s var(--mx-ease);
}

.mx-faq-q::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: 21px;
    height: 17px;
    margin-top: -9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.5 99'%3E%3CclipPath id='c'%3E%3Cpath d='M57.5 0Q63 0 63 5.5L63 14Q63 18 58.53 25.81L31.47 73.19Q27 81 27 85L27 93.5Q27 99 21.5 99L5.5 99Q0 99 0 93.5L0 85Q0 81 4.47 73.19L31.53 25.81Q36 18 36 14L36 5.5Q36 0 41.5 0z'/%3E%3Cpath d='M102.5 0Q108 0 108 5.5L108 14Q108 18 103.53 25.81L76.47 73.19Q72 81 72 85L72 93.5Q72 99 66.5 99L50.5 99Q45 99 45 93.5L45 85Q45 81 49.47 73.19L76.53 25.81Q81 18 81 14L81 5.5Q81 0 86.5 0z'/%3E%3Cpath d='M119.52 69.65Q121.5 73.13 119.52 76.6L118.74 77.96Q117 81 117 85L117 93.5Q117 99 111.5 99L95.5 99Q90 99 90 93.5L90 85Q90 81 94.47 73.19L105.52 53.84Q108 49.5 110.48 53.84z'/%3E%3C/clipPath%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='.04' stop-color='%2300b6d5'/%3E%3Cstop offset='.39' stop-color='%236704d8'/%3E%3Cstop offset='.82' stop-color='%23ff04d8'/%3E%3C/linearGradient%3E%3Crect width='121.5' height='99' fill='url(%23g)' clip-path='url(%23c)'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    scale: .3;
    rotate: -20deg;
    transition: opacity .25s ease-out, scale .5s var(--mx-spring), rotate .5s var(--mx-spring);
}

:where(.mx-faq-item)[open] > .mx-faq-q::before {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
}

:where(.mx-faq-item)[open] > .mx-faq-q > .mx-faq-h {
    translate: 31px 0;
}

.mx-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible;
    transition: grid-template-rows .55s var(--mx-ease);
}

:where(.mx-faq-item)[open] > .mx-faq-a {
    grid-template-rows: 1fr;
}

.mx-faq-a-in {
    min-height: 0;
    overflow: hidden;
}

.mx-faq-a p {
    padding-left: 33px;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity .3s ease-out, translate .55s var(--mx-ease);
}

:where(.mx-faq-item)[open] > .mx-faq-a p {
    opacity: 1;
    translate: 0 0;
    transition-delay: .1s;
}

@media (prefers-reduced-motion: reduce) {
    .mx-faq-a,
    .mx-faq-a p,
    .mx-faq-q::before,
    .mx-faq-q > .mx-faq-h,
    .mx-faq-list > li::before {
        transition-duration: .01ms !important;
    }
}

/* --- The follow-along bar: solid, and the size can be changed in it ------ */

.pk-dock,
.pk-dock.is-float {
    color: var(--mx-ink);
    font-variant-numeric: tabular-nums;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.pk-dock-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pk-dock-steps {
    display: flex;
    flex: none;
    gap: 5px;
}

.pk-dock-step {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    color: var(--mx-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease-out, scale .25s var(--mx-spring), opacity .2s ease-out;
}

.pk-dock-step::before,
.pk-dock-step::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 1px;
    background: currentColor;
}

.pk-dock-step.is-up::after {
    rotate: 90deg;
}

.pk-dock-step.is-down::after {
    content: none;
}

@media (hover: hover) {
    .pk-dock-step:hover {
        background: #ece2ff;
    }
}

.pk-dock-step:active {
    scale: .86;
}

.pk-dock-step:disabled {
    opacity: .35;
    cursor: default;
}

[data-pk-dock-quantity].is-pop {
    display: inline-block;
    animation: pk-pop .4s var(--mx-spring);
}

@media (min-width: 640px) {
    .pk-dock.is-float {
        gap: 26px;
        min-width: 0;
        padding: 9px 9px 9px 10px;
    }

    .pk-dock.is-float .pk-dock-pick {
        gap: 16px;
    }

    .pk-dock.is-float .pk-dock-step {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .pk-dock-pick {
        gap: 9px;
    }

    .pk-dock-step {
        width: 30px;
        height: 34px;
        border-radius: 10px;
    }

    .pk-dock-steps {
        gap: 4px;
    }

    .pk-dock-cta {
        padding: 0 14px;
    }

    .pk-dock-cta .mx-bars {
        display: none;
    }
}

/* ========================================================================
 | Tickets
 | A quantity is a paper ticket: the amount on top, a perforation with a
 | notch at either end, the price on the stub. The chosen one is inked,
 | leans a little out of the row and gets a punch. No shadows.
 * ===================================================================== */

:root {
    /* Savings have their own colour, used for nothing else. */
    --mx-save-ink: #067a48;
    --mx-save-bg: #dcf7e8;
    --mx-save-lit: #7df0b5;
}

.pk-tile {
    --stub: 34px;
    --notch: 6px;
    min-height: 96px;
    padding: 12px 12px 0;
    gap: 0;
    background: none;
    box-shadow: none;
    transition: color .22s var(--mx-ease), transform .08s ease-out, translate .45s var(--mx-spring), rotate .45s var(--mx-spring);
}

/* The paper, cut to the shape of a ticket. */
.pk-tile::after,
.pk-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), #0000 97%, #000) top left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), #0000 97%, #000) top right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), #0000 97%, #000) top left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), #0000 97%, #000) top right / 51% 100% no-repeat;
}

.pk-tile::after {
    z-index: -2;
    background:
        radial-gradient(circle at 0 calc(100% - var(--stub)), #0000 var(--notch), var(--mx-line-strong) var(--notch) calc(var(--notch) + 1px), #0000 calc(var(--notch) + 1px)),
        radial-gradient(circle at 100% calc(100% - var(--stub)), #0000 var(--notch), var(--mx-line-strong) var(--notch) calc(var(--notch) + 1px), #0000 calc(var(--notch) + 1px)),
        repeating-linear-gradient(90deg, var(--mx-line-strong) 0 4px, #0000 4px 8px) calc(var(--notch) + 5px) calc(100% - var(--stub)) / calc(100% - var(--notch) * 2 - 10px) 1px no-repeat,
        var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line);
    transition: box-shadow .2s var(--mx-ease);
}

/* The ink of the chosen ticket sweeps in from the left, leaning like the mark. Parked fully off the edge, so no sliver shows. */
.pk-tile::before {
    z-index: -1;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 4px, #0000 4px 8px) calc(var(--notch) + 5px) calc(100% - var(--stub)) / calc(100% - var(--notch) * 2 - 10px) 1px no-repeat,
        var(--mx-ink);
    clip-path: polygon(-3px 0, -3px 0, -60% 100%, -3px 100%);
    transition: clip-path .42s var(--mx-ease);
}

.pk-tile:has(.pk-radio:checked)::before,
.pk-tile.is-on::before {
    clip-path: polygon(-3px 0, 160% 0, 103% 100%, -3px 100%);
}

.pk-tile-foot {
    align-items: center;
    height: var(--stub);
    margin-top: auto;
}

.pk-tile-price {
    flex-direction: row;
    align-items: baseline;
}

.pk-tile-price b {
    color: var(--mx-ink);
    font-weight: 700;
}

/* The regular price stays for screen readers; on the ticket the stamp says it shorter. */
.pk-tile-price s {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The saving, stamped on the stub. */
.pk-off {
    flex: none;
    margin-left: auto;
    padding: 2px 5px 2px 4px;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    color: var(--mx-save-ink);
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    rotate: -5deg;
    transition: color .22s var(--mx-ease), rotate .45s var(--mx-spring), scale .45s var(--mx-spring);
}

.pk-tile:has(.pk-radio:checked) .pk-off,
.pk-tile.is-on .pk-off {
    color: var(--mx-save-lit);
    rotate: 4deg;
    scale: 1.08;
}

.pk-tile-note {
    margin: 0 0 0 10px;
}

/* The punch: a round hole in the logo colours with a tick, pressed into the chosen ticket. */
.pk-punch {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
        linear-gradient(120deg, #00b6d5, #6704d8 55%, #ff04d8);
    opacity: 0;
    scale: .2;
    rotate: -60deg;
    transition: opacity .15s ease-out, scale .2s ease-in, rotate .2s ease-in;
}

.pk-tile:has(.pk-radio:checked) .pk-punch,
.pk-tile.is-on .pk-punch {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    transition: opacity .15s ease-out .12s, scale .5s var(--mx-spring) .12s, rotate .5s var(--mx-spring) .12s;
}

/* Pointing at a ticket nudges it; the chosen one leans out of the row. Nothing casts a shadow. */
@media (hover: hover) {
    .pk-tile:hover {
        translate: 0 -3px;
        rotate: 1.2deg;
        box-shadow: none;
    }

    .pk-tile:hover::after {
        box-shadow: inset 0 0 0 1.5px var(--mx-line-strong);
    }

    .pk-tile:nth-child(even):hover {
        rotate: -1.2deg;
    }
}

.pk-tile:has(.pk-radio:checked),
.pk-tile.is-on,
.pk-tile:has(.pk-radio:checked):hover,
.pk-tile.is-on:hover {
    box-shadow: none;
    translate: 0 -2px;
    rotate: -2deg;
}

.pk-tile:has(.pk-radio:checked)::after,
.pk-tile.is-on::after {
    box-shadow: inset 0 0 0 1px var(--mx-ink);
}

.pk-tile:has(.pk-radio:checked) .pk-tile-price b,
.pk-tile.is-on .pk-tile-price b {
    color: #fff;
}

/* A press squeezes the ticket; letting go lets it spring back. */
.pk-tile:active {
    transform: scale(.94, .92);
}

/* "Best value" is a sticker slapped on the corner. */
.pk-flag {
    top: -11px;
    right: auto;
    left: 8px;
    padding: 4px 9px 5px;
    border-radius: 999px;
    background: var(--mx-offer-ink);
    box-shadow: 0 0 0 2px #fff;
    color: #fff;
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    clip-path: none;
    rotate: -5deg;
    transition: rotate .45s var(--mx-spring), scale .45s var(--mx-spring);
}

@media (hover: hover) {
    .pk-tile:hover .pk-flag {
        rotate: 3deg;
        scale: 1.06;
    }
}

/* The compact desk on the home page: smaller tickets, same build. */
.pk.is-mini .pk-tile {
    --stub: 24px;
    --notch: 5px;
    min-height: 66px;
    padding: 9px 9px 0;
}

.pk.is-mini .pk-punch {
    top: 7px;
    right: 7px;
    width: 15px;
    height: 15px;
    background-size: 11px, auto;
}

.pk.is-mini .pk-tile-price b {
    font-weight: 600;
}

@media (min-width: 640px) {
    .pk-tile {
        --stub: 38px;
        --notch: 7px;
        min-height: 108px;
        padding: 14px 14px 0;
    }

    .pk-punch {
        top: 12px;
        right: 12px;
        width: 22px;
        height: 22px;
    }

    .pk-grid.is-dense .pk-tile {
        padding-inline: 12px;
    }

    .pk.is-mini .pk-tile {
        --stub: 26px;
        --notch: 5px;
        min-height: 70px;
        padding: 10px 10px 0;
    }

    .pk.is-mini .pk-punch {
        top: 8px;
        right: 8px;
        width: 16px;
        height: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-tile,
    .pk-tile::before,
    .pk-punch,
    .pk-off,
    .pk-flag {
        transition-duration: .01ms !important;
    }

    .pk-tile:hover,
    .pk-tile:has(.pk-radio:checked),
    .pk-tile.is-on {
        rotate: none;
        translate: none;
    }
}

/* --- The saving in the price card: a coupon, percentage on the stub ------ */

.pk-save {
    --notch: 5px;
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    background: none;
    color: var(--mx-save-ink);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    clip-path: none;
    rotate: -2deg;
    transform-origin: 20% 50%;
    animation: pk-stamp .5s var(--mx-spring) .12s both;
}

.pk-save > b,
.pk-save > span {
    display: flex;
    align-items: center;
    padding: 7px 11px 8px;
}

.pk-save > b {
    padding-right: 9px;
    border-radius: 9px 0 0 9px;
    background: var(--mx-save-ink);
    color: #fff;
    font-weight: 800;
    -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000), radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000), radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000);
    mask-composite: intersect;
}

.pk-save > span {
    border-radius: 9px;
    background:
        repeating-linear-gradient(0deg, var(--mx-save-ink) 0 3px, #0000 3px 6px) 0 50% / 1px calc(100% - var(--notch) * 2 - 4px) no-repeat,
        var(--mx-save-bg);
}

.pk-save > b + span {
    border-radius: 0 9px 9px 0;
    -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000), radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000), radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000);
    mask-composite: intersect;
}

@keyframes pk-stamp {
    0% {
        opacity: 0;
        scale: 1.5;
        rotate: -9deg;
    }

    55% {
        opacity: 1;
        scale: .96;
    }

    100% {
        scale: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-save {
        animation: none !important;
    }
}

/* --- Tickets, fitted ------------------------------------------------------ */

/* Nothing under the stub: the price sits in the middle of it. */
.pk-tile,
.pk-grid.is-dense .pk-tile,
.pk.is-mini .pk-tile {
    padding-bottom: 0;
}

/* The stamp goes under the amount, so a long price has the stub to itself. */
.pk-off {
    position: absolute;
    top: 43px;
    left: 12px;
    margin: 0;
}

/* A pile of bars in the corner: one for the smallest size, one more for each step up. */
.pk-pile {
    position: absolute;
    top: 14px;
    right: 12px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 2px;
    --bar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpolygon points='4,0 7,0 7,1 3,9 3,11 0,11 0,9 4,1'/%3E%3C/svg%3E");
}

.pk-pile::before,
.pk-pile::after {
    content: '';
    height: 9px;
    background: var(--mx-line-strong);
    -webkit-mask: var(--bar) 100% 0 / 5px 9px repeat-x;
    mask: var(--bar) 100% 0 / 5px 9px repeat-x;
    transition: background-color .25s var(--mx-ease);
}

.pk-pile::before {
    width: calc(min(var(--t, 0) + 1, 5) * 5px);
}

.pk-pile::after {
    width: calc(max(var(--t, 0) - 4, 0) * 5px);
}

.pk-tile:has(.pk-radio:checked) .pk-pile::before,
.pk-tile.is-on .pk-pile::before,
.pk-tile:has(.pk-radio:checked) .pk-pile::after,
.pk-tile.is-on .pk-pile::after {
    background: linear-gradient(90deg, #2fd3ee, #a47bff 55%, #ff7ae6) 100% 0 / 25px 100%;
}

@media (hover: hover) {
    .pk-tile:hover .pk-pile::before,
    .pk-tile:hover .pk-pile::after {
        background-color: #b9a4e6;
    }
}

/* The punch sits on the corner of the chosen ticket, half on, half off, like a sticker. */
.pk-punch,
.pk.is-mini .pk-punch {
    top: -7px;
    right: -6px;
    box-shadow: 0 0 0 2px #fff;
}

@media (min-width: 640px) {
    .pk-off {
        top: 50px;
        left: 14px;
    }

    .pk-pile {
        top: 17px;
        right: 14px;
    }

    .pk-punch,
    .pk.is-mini .pk-punch {
        top: -8px;
        right: -7px;
    }
}

/* The regular price in the card is struck by hand: one stroke of marker at the lean of the logo. */
.pk-was s {
    position: relative;
    text-decoration: none;
}

.pk-was s::after {
    content: '';
    position: absolute;
    top: 52%;
    right: -4px;
    left: -4px;
    height: 2px;
    border-radius: 2px;
    background: var(--mx-offer-ink);
    rotate: -7deg;
    transform-origin: 0 50%;
    animation: pk-strike .4s var(--mx-ease) .22s backwards;
}

@keyframes pk-strike {
    from {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-was s::after {
        animation: none;
    }
}

/* Room between the stamp and the perforation, and the marker stroke through the middle of the old price. */
.pk-tile {
    min-height: 102px;
}

.pk.is-mini .pk-tile {
    min-height: 66px;
}

@media (min-width: 640px) {
    .pk-tile {
        min-height: 114px;
    }

    .pk-off {
        top: 47px;
    }

    .pk.is-mini .pk-tile {
        min-height: 70px;
    }
}

.pk-was s::after {
    top: 80%;
}

/* ========================================================================
 | Fields
 | The label sits inside the box, above what is typed, the way a printed
 | form does it. The box in use gets a thick ring and the mark of the logo
 | steps in before its label.
 * ===================================================================== */

@supports selector(:has(+ *)) {
    label[for]:not(.sr-only):not(.pk-tile):not(.pk-nudge):not(.rd-tab):not(.pay-method-head):not(.ck-terms):has(+ input:not([type='checkbox']):not([type='radio']):not([type='hidden']), + textarea, + select, + .mx-pw) {
        position: relative;
        z-index: 2;
        display: block;
        height: 0;
        margin: 0 !important;
        overflow: visible;
        color: var(--mx-mute);
        font-size: .75rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .01em;
        white-space: nowrap;
        pointer-events: none;
        translate: 17px 12px;
        transition: color .2s ease-out, translate .45s var(--mx-spring);
    }

    label[for]:has(+ input, + textarea, + select, + .mx-pw)::before {
        content: '';
        position: absolute;
        top: 1px;
        left: -13px;
        width: 7px;
        height: 10px;
        background: var(--mx-action);
        clip-path: var(--mx-bar);
        opacity: 0;
        scale: .3;
        transition: opacity .2s ease-out, scale .45s var(--mx-spring);
    }

    label[for]:has(+ :focus),
    label[for]:has(+ .mx-pw :focus) {
        color: var(--mx-action);
        translate: 29px 12px;
    }

    label[for]:has(+ :focus)::before,
    label[for]:has(+ .mx-pw :focus)::before {
        opacity: 1;
        scale: 1;
    }

    label[for] + input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
    label[for] + textarea,
    label[for] + select,
    label[for] + .mx-pw > input {
        min-height: 62px;
        padding: 28px 16px 9px !important;
        border: 0 !important;
        border-radius: 16px !important;
        background-color: #fff;
        box-shadow: inset 0 0 0 1.5px var(--mx-line-strong) !important;
        color: var(--mx-ink);
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.35;
        transition: box-shadow .2s ease-out, background-color .2s ease-out, background-size .3s var(--mx-spring);
    }

    label[for] + textarea {
        padding-top: 31px !important;
    }

    label[for] + input::placeholder,
    label[for] + textarea::placeholder,
    label[for] + .mx-pw > input::placeholder {
        color: #a9a6c2;
        font-weight: 400;
    }

    @media (hover: hover) {
        label[for] + input:not([type='checkbox']):not([type='radio']):hover,
        label[for] + textarea:hover,
        label[for] + select:hover,
        label[for] + .mx-pw > input:hover {
            box-shadow: inset 0 0 0 1.5px #a78fdc !important;
        }
    }

    label[for] + input:not([type='checkbox']):not([type='radio']):focus,
    label[for] + textarea:focus,
    label[for] + select:focus,
    label[for] + .mx-pw > input:focus {
        outline: none !important;
        box-shadow: inset 0 0 0 2px var(--mx-action), 0 0 0 4px rgba(147, 55, 251, .16) !important;
    }

    label[for] + .mx-pw {
        display: block;
    }

    /* Space between one field and the next thing under it. */
    label[for] + input + .ck-hint,
    label[for] + .mx-pw + .ck-hint {
        margin-top: 8px;
    }
}

/* --- Sign-in style pages: heading and form share one panel --------------- */

.mx-auth-in {
    display: grid;
    gap: 26px;
    padding: 30px 0 34px;
}

.mx-auth-copy p {
    max-width: 30rem;
    margin-top: 12px;
    color: var(--mx-ink-2);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.mx-auth-card {
    position: relative;
    width: 100%;
    max-width: 27rem;
    margin-inline: auto;
    padding: 30px 22px 24px;
}

.mx-auth-card form > .flex {
    margin-bottom: 12px;
}

/* A strip of tape holds the card to the panel. */
.mx-auth-card::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 50%;
    width: 96px;
    height: 27px;
    margin-left: -48px;
    background: repeating-linear-gradient(116.565deg, rgba(147, 55, 251, .2) 0 7px, rgba(147, 55, 251, .11) 7px 14px);
    clip-path: polygon(0 0, 4% 16%, 0 33%, 4% 50%, 0 67%, 4% 84%, 0 100%, 100% 100%, 96% 84%, 100% 67%, 96% 50%, 100% 33%, 96% 16%, 100% 0);
    rotate: -3.5deg;
}

/* Three order stubs, fanned: decoration that says "your orders live here". */
.mx-auth-art {
    display: none;
}

.mx-stub {
    --notch: 7px;
    --cut: 68%;
    position: absolute;
    top: 0;
    left: 0;
    width: 214px;
    height: 92px;
    border-radius: 14px;
    background:
        repeating-linear-gradient(0deg, var(--mx-line-strong) 0 4px, #0000 4px 8px) var(--cut) 50% / 1px calc(100% - 26px) no-repeat,
        #fff;
    box-shadow: inset 0 0 0 1px var(--mx-line);
    -webkit-mask: radial-gradient(circle var(--notch) at var(--cut) 0, #0000 97%, #000), radial-gradient(circle var(--notch) at var(--cut) 100%, #0000 97%, #000);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--notch) at var(--cut) 0, #0000 97%, #000), radial-gradient(circle var(--notch) at var(--cut) 100%, #0000 97%, #000);
    mask-composite: intersect;
    transition: rotate .8s var(--mx-ease), translate .8s var(--mx-ease);
}

.mx-stub b {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 45px;
    height: 16px;
    background: var(--mx-spectrum);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpolygon points='4,0 7,0 7,1 3,9 3,11 0,11 0,9 4,1'/%3E%3C/svg%3E") 0 0 / 9px 16px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpolygon points='4,0 7,0 7,1 3,9 3,11 0,11 0,9 4,1'/%3E%3C/svg%3E") 0 0 / 9px 16px repeat-x;
}

.mx-stub i {
    position: absolute;
    left: 18px;
    bottom: 30px;
    width: 96px;
    height: 7px;
    border-radius: 4px;
    background: #ece6f7;
}

.mx-stub i + i {
    bottom: 16px;
    width: 62px;
}

.mx-stub em {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
        var(--mx-ink);
}

.mx-stub:nth-child(1) {
    rotate: -9deg;
    translate: 0 26px;
}

.mx-stub:nth-child(2) {
    rotate: 3deg;
    translate: 96px 6px;
}

.mx-stub:nth-child(2) b {
    width: 27px;
}

.mx-stub:nth-child(2) em {
    background: linear-gradient(120deg, #00b6d5, #6704d8 55%, #ff04d8);
}

.mx-stub:nth-child(3) {
    rotate: 12deg;
    translate: 196px 34px;
}

.mx-stub:nth-child(3) b {
    width: 18px;
}

.mx-stub:nth-child(3) em {
    background: var(--mx-wash);
    box-shadow: inset 0 0 0 1.5px var(--mx-line-strong);
}

@media (hover: hover) {
    .mx-auth:hover .mx-stub:nth-child(1) {
        rotate: -13deg;
        translate: -8px 30px;
    }

    .mx-auth:hover .mx-stub:nth-child(3) {
        rotate: 16deg;
        translate: 210px 40px;
    }
}

@media (min-width: 900px) {
    .mx-auth-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
        align-items: center;
        gap: 64px;
        min-height: 33rem;
        padding: 60px 0 68px;
    }

    .mx-auth-copy .ck-h1 {
        font-size: 3.25rem;
    }

    .mx-auth-copy p {
        font-size: 1.1875rem;
    }

    .mx-auth-card {
        margin: 0;
        padding: 34px 28px 28px;
        rotate: none;
        transition: rotate .7s var(--mx-ease);
    }

    .mx-auth-card:focus-within {
        rotate: 0deg;
    }

    .mx-auth-art {
        position: relative;
        display: block;
        height: 170px;
        margin-top: 40px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .mx-auth-copy .ck-h1 {
        animation: mx-in-slide .6s var(--mx-ease) backwards;
    }

    .mx-auth-copy p {
        animation: mx-in-up .6s var(--mx-ease) 90ms backwards;
    }

    .mx-auth-card {
        animation: mx-in-card .7s var(--mx-ease) 140ms backwards;
    }

    .mx-stub {
        animation: mx-sc-pop .6s var(--mx-ease) 320ms backwards;
    }

    .mx-stub:nth-child(2) {
        animation-delay: 400ms;
    }

    .mx-stub:nth-child(3) {
        animation-delay: 480ms;
    }
}

/* ========================================================================
 | Reviews as notes
 | Stars are five square tiles cut from the logo colours. A review is a
 | note taped to the panel, a little crooked. While there are only a few,
 | the count is stated plainly and the next note is the visitor's own.
 * ===================================================================== */

.mx-stars {
    display: inline-flex;
    flex: none;
    gap: 3px;
    font-size: 0;
}

.mx-stars i,
.mx-stars i.icon-star-regular {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #00b6d5;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.mx-stars i:nth-child(2) { background: #3a6fd8; }
.mx-stars i:nth-child(3) { background: #6704d8; }
.mx-stars i:nth-child(4) { background: #b304d8; }
.mx-stars i:nth-child(5) { background: #ff04d8; }

.mx-stars i.icon-star-regular {
    background: #e7e0f4;
}

.mx-rev-tally {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 22px;
    color: var(--mx-ink);
}

.mx-rev-tally b {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}

.mx-rev-tally .mx-stars i {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 13px;
}

.mx-rev-tally > span:last-child {
    width: 100%;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    font-weight: 500;
}

/* The notes */
.mx-quotes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 30px 22px;
    margin: 0;
    padding: 16px 0 6px;
    list-style: none;
}

.mx-quote,
.mx-quote + .mx-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 34px 22px 20px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--mx-line);
    rotate: -1.1deg;
    transition: rotate .7s var(--mx-ease), translate .7s var(--mx-ease);
}

.mx-quote:nth-child(even) {
    rotate: 1deg;
}

/* A strip of tape */
.mx-quote::before,
.mx-quote-invite::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 26px;
    width: 86px;
    height: 25px;
    background: repeating-linear-gradient(116.565deg, rgba(147, 55, 251, .22) 0 7px, rgba(147, 55, 251, .12) 7px 14px);
    clip-path: polygon(0 0, 4% 16%, 0 33%, 4% 50%, 0 67%, 4% 84%, 0 100%, 100% 100%, 96% 84%, 100% 67%, 96% 50%, 100% 33%, 96% 16%, 100% 0);
    rotate: -5deg;
}

.mx-quote:nth-child(even)::before {
    left: auto;
    right: 30px;
    background: repeating-linear-gradient(116.565deg, rgba(0, 182, 213, .24) 0 7px, rgba(0, 182, 213, .13) 7px 14px);
    rotate: 4deg;
}

@media (hover: hover) {
    .mx-quote:hover {
        rotate: 0deg;
        translate: 0 -3px;
    }
}

.mx-quote-mark {
    position: absolute;
    top: 22px;
    right: 20px;
    margin: 0;
}

.mx-quote .mx-quote-text,
.mx-quote.is-mid .mx-quote-text {
    padding-right: 46px;
    color: var(--mx-ink);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.02em;
}

.mx-quote.is-big .mx-quote-text {
    font-size: clamp(1.5rem, 5.2vw, 1.9375rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.mx-quote.is-long .mx-quote-text {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
}

.mx-quote-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--mx-line-strong);
}

.mx-quote-by .mx-stars {
    margin: 0 0 0 auto;
}

/* The visitor's own note: dashed until it is opened */
.mx-quote-invite {
    position: relative;
    padding: 30px 18px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .55);
    box-shadow: none;
    outline: 2px dashed var(--mx-line-strong);
    outline-offset: -2px;
    rotate: 1.1deg;
    transition: rotate .7s var(--mx-ease), background-color .3s ease-out, outline-color .3s ease-out;
}

.mx-quote-invite::before {
    left: auto;
    right: 30px;
    background: repeating-linear-gradient(116.565deg, rgba(255, 4, 216, .2) 0 7px, rgba(255, 4, 216, .1) 7px 14px);
    rotate: 4deg;
}

.mx-quote-invite:has(details[open]) {
    background: #fff;
    outline-color: transparent;
    box-shadow: inset 0 0 0 1px var(--mx-line);
    rotate: 0deg;
}

.mx-quote-invite-line {
    margin-bottom: 14px;
    padding: 0 4px;
    color: var(--mx-ink);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.mx-quote-invite .mx-rev-write,
.mx-rev-in.is-few .mx-quote-invite .mx-rev-write {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.mx-quote-invite .mx-rev-write summary {
    padding: 12px 12px 12px 16px;
    border-radius: 13px;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--mx-line-strong);
    transition: box-shadow .2s ease-out, scale .25s var(--mx-spring);
}

.mx-quote-invite .mx-rev-write summary:active {
    scale: .98;
}

.mx-quote-invite .mx-rev-write .mx-rev-form {
    padding: 16px 0 0;
}

.mx-rev-form .mx-field {
    margin-bottom: 10px;
}

/* Stars to pick: five tiles that take their colour as you go */
.mx-rate {
    gap: 6px;
    font-size: 0;
}

.mx-rate span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px;
    background: #ece4fa;
    cursor: pointer;
    transition: background-color .2s ease-out, scale .3s var(--mx-spring), rotate .3s var(--mx-spring);
}

.mx-rate span i,
.mx-rate span .icon-star-regular {
    color: #fff;
    font-size: 17px;
    scale: 1;
}

@supports selector(:has(*)) {
    .mx-rate span:has(.icon-star-solid) {
        background: #00b6d5;
        animation: mx-sc-pop .4s var(--mx-spring);
    }

    .mx-rate span:nth-child(2):has(.icon-star-solid) { background: #3a6fd8; }
    .mx-rate span:nth-child(3):has(.icon-star-solid) { background: #6704d8; }
    .mx-rate span:nth-child(4):has(.icon-star-solid) { background: #b304d8; }
    .mx-rate span:nth-child(5):has(.icon-star-solid) { background: #ff04d8; }
}

@media (hover: hover) {
    .mx-rate span:hover {
        scale: 1.1;
        rotate: -5deg;
    }

    .mx-rate span:hover i {
        scale: 1;
    }
}

.mx-rate span:active {
    scale: .9;
}

@media (min-width: 720px) {
    .mx-quotes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-quote,
    .mx-quote-invite {
        rotate: none;
        transition: none;
    }

    .mx-rate span:has(.icon-star-solid) {
        animation: none;
    }
}

/* --- Reviews, small fits -------------------------------------------------- */

/* In a narrow note the tiles to pick sit under their label. */
.mx-quote-invite .mx-field.is-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* No reviews yet: five empty tiles, and the form is the first note on the panel. */
.mx-rev-nostars {
    display: flex;
    gap: 4px;
    font-size: 0;
}

.mx-rev-nostars i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #e7e0f4;
    color: #fff;
    font-size: 13px;
}

.mx-rev-in.is-none .mx-rev-main > .mx-rev-write {
    position: relative;
    overflow: visible;
}

.mx-rev-in.is-none .mx-rev-main > .mx-rev-write::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 30px;
    width: 86px;
    height: 25px;
    background: repeating-linear-gradient(116.565deg, rgba(147, 55, 251, .22) 0 7px, rgba(147, 55, 251, .12) 7px 14px);
    clip-path: polygon(0 0, 4% 16%, 0 33%, 4% 50%, 0 67%, 4% 84%, 0 100%, 100% 100%, 96% 84%, 100% 67%, 96% 50%, 100% 33%, 96% 16%, 100% 0);
    rotate: -5deg;
}

/* ========================================================================
 | Paper
 | The framed panels and the big tiles carry a fine grain, like printed
 | card. One small tile of noise, drawn once and repeated.
 * ===================================================================== */

.mx-hero-frame::after,
.mx-steps-frame::after,
.mx-cta-frame::after,
.mx-rev-frame::after,
.mx-prom::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0 0 0 1.5 -.68'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
    opacity: .17;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.mx-steps-frame::after,
.mx-cta-frame::after,
.mx-prom.is-ink::after {
    opacity: .6;
    mix-blend-mode: overlay;
}

/* The small tickets on the home page stay level when chosen, so their edges stay crisp. */
.pk.is-mini .pk-tile:has(.pk-radio:checked),
.pk.is-mini .pk-tile.is-on,
.pk.is-mini .pk-tile:has(.pk-radio:checked):hover {
    rotate: none;
}

/* ========================================================================
 | Marker
 | The highlight under a headline word is one pass of a broad marker.
 * ===================================================================== */

.mx-head .h2 .text-theme-600,
.mx-hl {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='rgba(147,55,251,.16)' d='M9 5 C 38 2 70 6 104 4 S 170 2 198 6 L 191 33 C 160 37 128 33 96 36 S 34 35 2 37 Z'/%3E%3C/svg%3E");
    background-position: 0 72%;
    background-size: 100% 58%;
}

.mx-head.is-light .h2 .text-theme-600 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,.15)' d='M9 5 C 38 2 70 6 104 4 S 170 2 198 6 L 191 33 C 160 37 128 33 96 36 S 34 35 2 37 Z'/%3E%3C/svg%3E");
}

html.mx-live .mx-head .h2 .text-theme-600:not(.is-in) {
    background-size: 0% 58%;
}

@keyframes mx-mark-in {
    from {
        background-size: 0% 58%;
    }
}

/* ========================================================================
 | Paper, second pass
 | Savings are a butter-yellow price sticker. Promises carry a small icon.
 | Stars are calmer. Fields are quieter. The about page is four taped
 | notes. Sections get more air and a tear-off line.
 * ===================================================================== */

:root {
    --mx-save-ink: var(--mx-ink);
    --mx-save-bg: #fff1a8;
    --mx-save-deep: #ffdf5e;
    --mx-save-lit: #ffe88a;
    --mx-tape: repeating-linear-gradient(116.565deg, rgba(147, 55, 251, .2) 0 7px, rgba(147, 55, 251, .11) 7px 14px);
    --mx-tape-cut: polygon(0 0, 4% 16%, 0 33%, 4% 50%, 0 67%, 4% 84%, 0 100%, 100% 100%, 96% 84%, 100% 67%, 96% 50%, 100% 33%, 96% 16%, 100% 0);
}

/* --- Savings: a price sticker, not a dark stamp --------------------------- */

.pk-off,
.pk-tile:has(.pk-radio:checked) .pk-off,
.pk-tile.is-on .pk-off {
    padding: 3px 6px 3px 5px;
    border: 0;
    border-radius: 6px;
    background: var(--mx-save-lit);
    color: var(--mx-ink);
}

.pk-off {
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 81, .06);
}

.pk-tile:has(.pk-radio:checked) .pk-off,
.pk-tile.is-on .pk-off {
    box-shadow: none;
}

.pk-save {
    color: var(--mx-ink);
    rotate: -1.5deg;
}

.pk-save > b {
    background: var(--mx-save-deep);
    color: var(--mx-ink);
}

.pk-save > span {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 81, .28) 0 3px, #0000 3px 6px) 0 50% / 1px calc(100% - var(--notch) * 2 - 4px) no-repeat,
        var(--mx-save-bg);
    font-weight: 600;
}

/* --- Promises under the tickets: an icon on its own small tile ----------- */

.mx-glyph {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #e7e8ff;
    color: #3f3ad1;
    transition: rotate .45s var(--mx-spring), scale .45s var(--mx-spring);
}

.mx-glyph svg {
    display: block;
    width: 14px;
    height: 14px;
}

li:nth-child(3n + 2) > .mx-glyph {
    background: #ffe4ea;
    color: #e02957;
}

li:nth-child(3n) > .mx-glyph {
    background: #ffeed9;
    color: #d96a06;
}

.pk-assure {
    gap: 10px 16px;
    margin-top: 12px;
}

.pk-assure li,
.ti-list li.has-glyph {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pk-assure li::before,
.ti-list li.has-glyph::before {
    content: none;
}

@media (hover: hover) {
    .pk-assure li:hover .mx-glyph,
    .ti-list li:hover .mx-glyph {
        rotate: -8deg;
        scale: 1.12;
    }
}

/* --- Stars: calmer colours, and tiles that sit shoulder to shoulder so the pointer never falls between two --- */

.mx-stars i,
.mx-rate span i.icon-star-solid {
    background: #5ec6dc;
}

.mx-stars i:nth-child(2),
.mx-rate span:nth-child(2) i.icon-star-solid { background: #7399ea; }

.mx-stars i:nth-child(3),
.mx-rate span:nth-child(3) i.icon-star-solid { background: #8f78f0; }

.mx-stars i:nth-child(4),
.mx-rate span:nth-child(4) i.icon-star-solid { background: #b578ea; }

.mx-stars i:nth-child(5),
.mx-rate span:nth-child(5) i.icon-star-solid { background: #e07ad6; }

.mx-stars i.icon-star-regular {
    background: #e7e0f4;
}

.mx-rate {
    gap: 0;
    margin-left: -3px;
}

.mx-rate span,
.mx-rate span:hover,
.mx-rate span:active {
    width: auto;
    height: auto;
    padding: 3px;
    border-radius: 0;
    background: none !important;
    animation: none !important;
    scale: none;
    rotate: none;
    transition: none;
}

.mx-rate span i,
.mx-rate span .icon-star-regular {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ece4fa;
    color: #fff;
    font-size: 16px;
    transition: background-color .2s ease-out, scale .35s var(--mx-spring);
}

@media (hover: hover) {
    .mx-rate span:hover i {
        scale: 1.1;
    }
}

.mx-rate span:active i {
    scale: .92;
}

.mx-quote-invite .mx-field.is-inline,
.mx-rev-write .mx-field.is-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* A drawn person beside each review, cut out like a sticker. */
.mx-avatar {
    display: block;
    flex: none;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--mx-line);
    rotate: -4deg;
    transition: rotate .45s var(--mx-spring), scale .45s var(--mx-spring);
}

.mx-avatar svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (hover: hover) {
    .mx-quote:hover .mx-avatar,
    .mx-rev-card:hover .mx-avatar {
        rotate: 5deg;
        scale: 1.08;
    }
}

/* --- Fields: no small mark, a smaller hint text, a softer box ------------ */

@supports selector(:has(+ *)) {
    label[for]:has(+ input, + textarea, + select, + .mx-pw)::before {
        content: none;
    }

    label[for]:has(+ input, + textarea, + select, + .mx-pw),
    label[for]:has(+ :focus),
    label[for]:has(+ .mx-pw :focus) {
        font-size: .71875rem !important;
        translate: 16px 11px;
    }

    label[for] + input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
    label[for] + textarea,
    label[for] + select,
    label[for] + .mx-pw > input {
        min-height: 58px;
        padding: 25px 16px 8px !important;
        border-radius: 14px !important;
        background-color: #fbf9ff;
        box-shadow: inset 0 0 0 1px #d8cdef !important;
        font-size: 1rem;
        font-weight: 500;
    }

    label[for] + textarea {
        padding-top: 28px !important;
    }

    label[for] + input::placeholder,
    label[for] + textarea::placeholder,
    label[for] + .mx-pw > input::placeholder {
        color: #b6b1cc;
        font-size: .9375rem;
        font-weight: 400;
    }

    @media (hover: hover) {
        label[for] + input:not([type='checkbox']):not([type='radio']):hover,
        label[for] + textarea:hover,
        label[for] + select:hover,
        label[for] + .mx-pw > input:hover {
            box-shadow: inset 0 0 0 1px #b9a4e6 !important;
        }
    }

    label[for] + input:not([type='checkbox']):not([type='radio']):focus,
    label[for] + textarea:focus,
    label[for] + select:focus,
    label[for] + .mx-pw > input:focus {
        background-color: #fff;
        box-shadow: inset 0 0 0 2px var(--mx-action), 0 0 0 4px rgba(147, 55, 251, .14) !important;
    }
}

/* --- The line beside a section heading leans on a small picture --------- */

.mx-head p:has(.mx-head-art) {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 33rem;
}

.mx-head-art {
    position: relative;
    display: block;
    flex: none;
    width: 60px;
    height: 54px;
}

.mx-head-art i {
    position: absolute;
    display: grid;
    place-items: center;
    font-style: normal;
    transition: rotate .5s var(--mx-spring), translate .5s var(--mx-spring);
}

/* Questions: two speech bubbles, one asking, one answering. */
.mx-head-art.is-faq i:first-child {
    top: 0;
    left: 0;
    width: 40px;
    height: 34px;
    border-radius: 12px 12px 12px 4px;
    background: var(--mx-ink);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    rotate: -8deg;
}

.mx-head-art.is-faq i:first-child::before {
    content: '?';
}

.mx-head-art.is-faq i:last-child {
    right: 0;
    bottom: 0;
    width: 34px;
    height: 27px;
    border-radius: 10px 10px 4px 10px;
    background:
        radial-gradient(circle, var(--mx-ink) 0 2px, #0000 2.5px) 8px 50% / 5px 5px no-repeat,
        radial-gradient(circle, var(--mx-ink) 0 2px, #0000 2.5px) 50% 50% / 5px 5px no-repeat,
        radial-gradient(circle, var(--mx-ink) 0 2px, #0000 2.5px) calc(100% - 8px) 50% / 5px 5px no-repeat,
        var(--mx-save-lit);
    box-shadow: 0 0 0 2px #fff;
    rotate: 7deg;
}

/* What you get: a seal with a tick. */
.mx-head-art.is-seal {
    width: 54px;
    height: 54px;
}

.mx-head-art.is-seal i {
    inset: 6px;
    border-radius: 11px;
    background: var(--mx-save-lit);
    rotate: 12deg;
}

.mx-head-art.is-seal i:last-child {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.1 3.1 6.5-6.900' fill='none' stroke='%23000051' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat,
        var(--mx-save-lit);
    rotate: 57deg;
}

.mx-head-art.is-seal i:last-child::before {
    content: none;
}

@media (hover: hover) {
    .mx-head:hover .mx-head-art.is-faq i:first-child {
        rotate: -14deg;
        translate: -2px -2px;
    }

    .mx-head:hover .mx-head-art.is-faq i:last-child {
        rotate: 12deg;
        translate: 2px 2px;
    }

    .mx-head:hover .mx-head-art.is-seal i:first-child {
        rotate: 57deg;
    }

    .mx-head:hover .mx-head-art.is-seal i:last-child {
        rotate: 102deg;
    }
}

/* --- About: the heading and four taped notes ------------------------------ */

.mx-about-in {
    display: grid;
    gap: 30px;
    padding: 32px 0 46px;
}

.mx-about-label {
    display: inline-block;
    margin: 0 0 22px 2px;
    padding: 7px 14px;
    background: var(--mx-ink);
    color: #fff;
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    clip-path: var(--mx-tape-cut);
    rotate: -2deg;
}

.mx-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin: 0;
    padding: 0 0 14px;
    list-style: none;
}

.mx-fact {
    position: relative;
    padding: 28px 18px 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--mx-line);
    rotate: -1.4deg;
    transition: rotate .7s var(--mx-ease), translate .7s var(--mx-ease);
}

.mx-fact:nth-child(2) {
    rotate: 1.3deg;
    translate: 0 14px;
}

.mx-fact:nth-child(3) {
    rotate: 1deg;
}

.mx-fact:nth-child(4) {
    rotate: -1.1deg;
    translate: 0 14px;
}

.mx-fact::before,
.mx-scene-card::before {
    content: '';
    position: absolute;
    top: -11px;
    left: 20px;
    width: 72px;
    height: 23px;
    background: var(--mx-tape);
    clip-path: var(--mx-tape-cut);
    rotate: -5deg;
}

.mx-fact:nth-child(even)::before {
    right: 20px;
    left: auto;
    background: repeating-linear-gradient(116.565deg, rgba(0, 182, 213, .24) 0 7px, rgba(0, 182, 213, .13) 7px 14px);
    rotate: 4deg;
}

.mx-fact:nth-child(3)::before {
    background: repeating-linear-gradient(116.565deg, rgba(255, 4, 216, .2) 0 7px, rgba(255, 4, 216, .1) 7px 14px);
}

.mx-fact b {
    display: block;
    color: var(--mx-ink);
    font-size: clamp(1.875rem, 8vw, 2.625rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}

.mx-fact span {
    display: block;
    margin-top: 7px;
    color: var(--mx-ink-2);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
}

@media (hover: hover) {
    .mx-fact:hover {
        rotate: 0deg;
    }
}

.mx-about-bio {
    padding: 56px 0 0;
}

.mx-about-bio + .mx-reader,
.mx-about-bio + section {
    padding-top: 8px;
}

@media (min-width: 900px) {
    .mx-about-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
        align-items: center;
        gap: 64px;
        padding: 60px 0 76px;
    }

    .mx-about-copy .ck-h1 {
        font-size: 3.5rem;
    }

    .mx-about-bio {
        padding-top: 84px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .mx-about-copy .ck-h1 {
        animation: mx-in-slide .6s var(--mx-ease) backwards;
    }

    .mx-about-label {
        animation: mx-in-up .6s var(--mx-ease) .1s backwards;
    }

    .mx-fact {
        animation: mx-in-card .7s var(--mx-ease) backwards;
        animation-delay: calc(var(--f, 0) * 80ms + .15s);
    }

    .mx-fact:nth-child(2) { --f: 1; }
    .mx-fact:nth-child(3) { --f: 2; }
    .mx-fact:nth-child(4) { --f: 3; }
}

/* The service pictures are taped down too. */
.mx-scene-card::before {
    left: 24px;
    width: 4.6em;
    height: 1.45em;
    top: -.7em;
}

.is-likes .mx-scene-card::before {
    right: 24px;
    left: auto;
    background: repeating-linear-gradient(116.565deg, rgba(255, 4, 216, .2) 0 7px, rgba(255, 4, 216, .1) 7px 14px);
    rotate: 4deg;
}

.is-views .mx-scene-card::before {
    background: repeating-linear-gradient(116.565deg, rgba(0, 182, 213, .24) 0 7px, rgba(0, 182, 213, .13) 7px 14px);
}

/* --- Home: more air between the services, and a tear-off line after them --- */

.mx-svc-rows {
    gap: 88px;
    padding: 64px 0 84px;
}

.mx-tear {
    position: relative;
    display: grid;
    place-items: center;
    max-width: 72rem;
    height: 28px;
    margin: 0 auto 76px;
    padding: 0 24px;
}

.mx-tear::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    left: 24px;
    border-top: 2px dashed var(--mx-line-strong);
}

.mx-tear .mx-bars {
    --w: 13px;
    --h: 20.5px;
    position: relative;
    box-sizing: content-box;
    padding: 0 18px;
    background: #fff;
}

.mx-tear + .mx-feat {
    padding-top: 0;
}

@media (min-width: 768px) {
    .mx-svc-rows {
        gap: 136px;
        padding: 96px 0 128px;
    }

    .mx-tear {
        margin-bottom: 104px;
    }

    .mx-feat {
        padding-bottom: 112px;
    }
}

/* --- Smoothness ----------------------------------------------------------- */

/* The floating bar fades in over the flat one; nothing changes size, so it cannot stutter. */
#header::before,
#header.is-scrolled::before {
    inset: 0;
    border-radius: 0;
    box-shadow: none;
    transition: opacity .3s ease-out;
}

#header.is-scrolled::before {
    opacity: 0;
}

#header::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 7px max(8px, calc(50% - 39.5rem));
    border-radius: 20px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--mx-line), 0 18px 36px -24px rgba(0, 0, 81, .55);
    opacity: 0;
    translate: 0 -6px;
    transition: opacity .3s ease-out, translate .5s var(--mx-ease);
    pointer-events: none;
}

#header.is-scrolled::after {
    opacity: 1;
    translate: 0 0;
}

/* The grain is plain ink on the paper, not a blend the browser has to work out on every frame. */
.mx-hero-frame::after,
.mx-rev-frame::after,
.mx-prom::after {
    opacity: .13;
    mix-blend-mode: normal;
}

.mx-steps-frame::after,
.mx-cta-frame::after,
.mx-prom.is-ink::after {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    #header::before,
    #header::after,
    .mx-fact,
    .mx-avatar,
    .mx-glyph,
    .mx-head-art i {
        transition: none;
    }
}

/* The tick of the seal stands upright on its own layer while the two squares under it turn. */
.mx-head-art.is-seal i:last-child {
    background: var(--mx-save-lit);
}

.mx-head-art.is-seal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.4 10.5l3 3 6.2-6.600' fill='none' stroke='%23000051' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
}

/* --- Promises: one colour, outline icons, no tiles ----------------------- */

.mx-glyph,
li:nth-child(3n + 2) > .mx-glyph,
li:nth-child(3n) > .mx-glyph {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    color: var(--mx-action);
}

.mx-glyph svg {
    width: 21px;
    height: 21px;
}

.pk-assure li,
.ti-list li.has-glyph {
    gap: 11px;
}

/* What a package contains: a small outline tick before each line, in the same hand as the promise icons. */
.ti-list > li::before {
    top: .2em;
    width: 15px;
    height: 15px;
    clip-path: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.3 2.700 2.700 5.300-5.600'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.3 2.700 2.700 5.300-5.600'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ti-list > li {
    padding-left: 25px;
}

/* ========================================================================
 | Round 14
 | Service icons cut from layers of paper, a quieter tick on the chosen
 | ticket, a straight leaning mark, room for the ring of a field in the
 | review note, and the saving on a small voucher label.
 * ===================================================================== */

:root {
    --mx-lean: polygon(44% 0, 100% 0, 56% 100%, 0 100%);
}

/* --- Service icons ------------------------------------------------------- */

.mx-chip,
.mx-chip.is-followers {
    --ct: #f0f1ff;
    --ct2: #dfe1fd;
    --c1: #a9aff3;
    --c2: #747be3;
    --c3: #555cc6;
    background: linear-gradient(155deg, var(--ct), var(--ct2));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 81, .04);
}

.mx-chip.is-likes {
    --ct: #fff1f4;
    --ct2: #ffdfe6;
    --c1: #f7adbd;
    --c2: #ec7893;
    --c3: #d45a79;
    background: linear-gradient(155deg, var(--ct), var(--ct2));
}

.mx-chip.is-views {
    --ct: #fff6e9;
    --ct2: #ffe7c9;
    --c1: #fbd9ab;
    --c2: #f5b774;
    --c3: #e0984f;
    background: linear-gradient(155deg, var(--ct), var(--ct2));
}

.mx-chip.is-packages {
    --ct: #f6f0ff;
    --ct2: #e8dcfd;
    --c1: #c9adf6;
    --c2: #a47aec;
    --c3: #8459d3;
    background: linear-gradient(155deg, var(--ct), var(--ct2));
}

.mx-chip svg,
.mx-chip.is-followers svg,
.mx-chip.is-likes svg,
.mx-chip.is-views svg,
.mx-chip.is-packages svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
}

.mx-chip .t1 {
    fill: var(--c1);
}

.mx-chip .t2 {
    fill: var(--c2);
}

.mx-chip .t3 {
    fill: var(--c3);
}

.mx-chip .w {
    fill: #fff;
}

/* A glint: one short white stroke where the light catches the shape. */
.mx-chip .g {
    fill: none;
    stroke: #fff;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .55;
}

/* A gap in the colour of the tile, so the shape in front stands clear of the one behind. */
.mx-chip .h {
    fill: var(--ct2);
    stroke: var(--ct2);
    stroke-width: 2;
    stroke-linejoin: round;
}

/* The sheets of the stack have soft corners. */
.mx-chip .r {
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.mx-chip .t1.r {
    stroke: var(--c1);
}

.mx-chip .t2.r {
    stroke: var(--c2);
}

.mx-chip .t3.r {
    stroke: var(--c3);
}

/* Small icons keep the one main shape. */
.mx-chip .x {
    display: none;
}

.mx-chip .m {
    transform-origin: 16px 16px;
}

/* Large icons (in headlines) get the second layer, and the main shape makes room for it. */
:is(.mx-hero-h1, .ck-h1, .mx-svc-title) .mx-chip .x {
    display: inline;
}

:is(.mx-hero-h1, .ck-h1, .mx-svc-title) .mx-chip.is-followers .m {
    transform: translate(-3.2px, .5px) scale(.9);
}

:is(.mx-hero-h1, .ck-h1, .mx-svc-title) .mx-chip.is-likes .m {
    transform: translate(-1.7px, 1.6px) scale(.9);
}

:is(.mx-hero-h1, .ck-h1, .mx-svc-title) .mx-chip.is-views .m {
    transform: translate(-1.4px, 1.8px) scale(.9);
}

.mx-hero-h1 .mx-chip,
.ck-h1 .mx-chip {
    box-shadow: inset 0 .04em 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(0, 0, 81, .05), 0 .1em .2em -.08em rgba(0, 0, 81, .3);
}

/* Once, as the headline arrives, the second layer comes out from behind the first. */
@media (prefers-reduced-motion: no-preference) {
    :is(.mx-hero-h1, .ck-h1) .mx-chip > svg > .x {
        animation: mx-chip-out .7s var(--mx-spring) .75s backwards;
    }

    :is(.mx-hero-h1, .ck-h1) .mx-chip.is-followers > svg > .x {
        --from: translate(-7px, 0);
    }

    :is(.mx-hero-h1, .ck-h1) .mx-chip.is-likes > svg > .x {
        --from: translate(-6px, 7px) scale(.4);
        transform-origin: 26px 7px;
        animation-delay: .85s;
    }

    :is(.mx-hero-h1, .ck-h1) .mx-chip.is-views > svg > .x {
        --from: translate(-2.6px, 2.4px) rotate(-9deg);
        transform-origin: 16px 15.6px;
        animation-delay: .95s;
    }
}

@keyframes mx-chip-out {
    from {
        opacity: 0;
        transform: var(--from, none);
    }
}

/* --- The tick on the chosen ticket: the same three colours, quieter ------ */

.pk-punch {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
        linear-gradient(125deg, #5f9fe9, #8659e6 52%, #d274d7);
}

/* --- Small marks: one straight leaning stroke, no step in it ------------- */

.ck-incl li::before,
.mx-nav-mark,
.pk-nudge::after,
footer ul.text-sm a::before,
#header nav > ul > li > a.px-3::after {
    clip-path: var(--mx-lean);
}

@media (min-width: 900px) {
    .rd-tab::before {
        width: 4px;
        height: 20px;
        margin-left: -14px;
        border-radius: 3px;
        clip-path: none;
        transform: skewX(-14deg);
    }
}

/* --- Review note: the ring of a field in use is not cut off -------------- */

@supports (interpolate-size: allow-keywords) {
    .mx-rev-write::details-content {
        overflow-x: visible;
        overflow-y: clip;
        overflow-clip-margin: 6px;
    }
}

/* --- The saving: old price struck, then a small voucher label ------------ */

.pk-deal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 12px 0 0;
    line-height: 1;
}

.pk-deal s {
    color: var(--mx-mute);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration-thickness: 1.5px;
}

.pk-voucher {
    --notch: 3.5px;
    display: inline-flex;
    align-items: stretch;
    color: var(--mx-ink);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    rotate: -1.5deg;
    transform-origin: 20% 50%;
}

/* The stub with the sign on it. */
.pk-voucher > i {
    display: grid;
    place-items: center;
    width: 23px;
    border-radius: 6px 0 0 6px;
    background: var(--mx-save-deep);
    font-size: .6875rem;
    font-style: normal;
    font-weight: 800;
    -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000), radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000), radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000);
    mask-composite: intersect;
}

/* The label, with the perforation down its left edge. */
.pk-voucher > span {
    padding: 6px 9px 6px 8px;
    border-radius: 0 6px 6px 0;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 81, .3) 0 2px, #0000 2px 4px) 0 50% / 1px calc(100% - var(--notch) * 2 - 2px) no-repeat,
        var(--mx-save-bg);
    -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000), radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000), radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000);
    mask-composite: intersect;
}

.pk.is-mini .pk-deal {
    margin-top: 10px;
}

@media (prefers-reduced-motion: no-preference) {
    .pk-deal s {
        animation: mx-in-up .4s var(--mx-ease) .06s backwards;
    }

    .pk-voucher {
        animation: pk-stamp .5s var(--mx-spring) .14s backwards;
    }
}

/* ========================================================================
 | Round 15
 | The mark with softened corners, the logo in the header that moves, and
 | the list beside a legal page without a sideways scrollbar.
 * ===================================================================== */

/* The bars of the mark: rounded ends, bends that flow, and an upright piece
   at the top as long as the one at the bottom. */
:root {
    --mx-bar: polygon(91.27% 0%, 95.09% 0.35%, 97.82% 1.39%, 99.45% 3.13%, 100% 5.56%, 100% 14.14%, 99.56% 16.4%, 98.23% 19.14%, 96.01% 22.37%, 92.91% 26.07%, 49.94% 73.93%, 46.84% 77.63%, 44.63% 80.86%, 43.3% 83.6%, 42.86% 85.86%, 42.86% 94.44%, 42.31% 96.88%, 40.67% 98.61%, 37.95% 99.65%, 34.13% 100%, 8.73% 100%, 4.91% 99.65%, 2.18% 98.61%, 0.55% 96.88%, 0% 94.44%, 0% 85.86%, 0.44% 83.6%, 1.77% 80.86%, 3.99% 77.63%, 7.09% 73.93%, 50.06% 26.07%, 53.16% 22.37%, 55.37% 19.14%, 56.7% 16.4%, 57.14% 14.14%, 57.14% 5.56%, 57.69% 3.13%, 59.33% 1.39%, 62.05% 0.35%, 65.87% 0%);
    --mx-bar-short: polygon(93.7% 45.65%, 96.06% 48.87%, 96.85% 52.08%, 96.06% 55.3%, 93.7% 58.51%, 91.23% 61.04%, 88.82% 63.96%, 87.09% 67.11%, 86.06% 70.48%, 85.71% 74.07%, 85.71% 89.81%, 84.62% 94.27%, 81.35% 97.45%, 75.89% 99.36%, 68.25% 100%, 17.46% 100%, 9.82% 99.36%, 4.37% 97.45%, 1.09% 94.27%, 0% 89.81%, 0% 74.07%, 0.89% 69.93%, 3.54% 64.9%, 7.97% 58.99%, 14.18% 52.2%, 49.27% 16.37%, 53.21% 13.36%, 57.14% 12.35%, 61.08% 13.36%, 65.02% 16.37%);
}

/* --- Header logo --------------------------------------------------------- */

/* The mark is three boxes cut to shape, so a bar can get shorter and longer
   along its own lean without being squeezed. The word beside it is a drawing. */
.mx-logo {
    position: relative;
    display: block;
}

.mx-logo > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mx-logo-mark {
    --w: 24.58px;
    --h: 38.625px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.mx-logo .mx-logo-mark i {
    background-image: linear-gradient(90deg, #00b6d5 3.2%, #6704d8 39.5%, #ff04d8 85.6%);
}

@media (prefers-reduced-motion: no-preference) {
    /* As the page arrives the bars grow to their height, one after the other. */
    .mx-logo-mark i {
        animation: mx-logo-in .9s var(--mx-ease) .1s backwards;
    }

    .mx-logo-mark i:nth-child(2) {
        animation-delay: .2s;
    }

    .mx-logo-mark i:nth-child(3) {
        animation-name: mx-logo-in-s;
        animation-delay: .3s;
    }

    /* A slow ripple: each bar eases a little shorter and back, the next one just
       behind it. ui.js sets it off now and then, and while the pointer is on the
       logo. The entrance stays in the list so that it does not play again. */
    .mx-logo.is-wave .mx-logo-mark i {
        animation: mx-logo-in .9s var(--mx-ease) .1s backwards, mx-logo-wave 1.7s cubic-bezier(.45, 0, .55, 1);
    }

    .mx-logo.is-wave .mx-logo-mark i:nth-child(2) {
        animation-delay: .2s, .18s;
    }

    .mx-logo.is-wave .mx-logo-mark i:nth-child(3) {
        animation-name: mx-logo-in-s, mx-logo-wave-s;
        animation-delay: .3s, .36s;
    }
}

@keyframes mx-logo-in {
    from {
        opacity: 0;
        clip-path: polygon(49.55% 46.46%, 53.37% 46.81%, 56.09% 47.85%, 57.73% 49.59%, 58.28% 52.02%, 58.28% 60.61%, 57.83% 62.87%, 56.5% 65.61%, 54.29% 68.83%, 51.19% 72.54%, 49.94% 73.93%, 46.84% 77.63%, 44.63% 80.86%, 43.3% 83.6%, 42.86% 85.86%, 42.86% 94.44%, 42.31% 96.88%, 40.67% 98.61%, 37.95% 99.65%, 34.13% 100%, 8.73% 100%, 4.91% 99.65%, 2.18% 98.61%, 0.55% 96.88%, 0% 94.44%, 0% 85.86%, 0.44% 83.6%, 1.77% 80.86%, 3.99% 77.63%, 7.09% 73.93%, 8.33% 72.54%, 11.43% 68.83%, 13.65% 65.61%, 14.98% 62.87%, 15.42% 60.61%, 15.42% 52.02%, 15.97% 49.59%, 17.6% 47.85%, 20.33% 46.81%, 24.15% 46.46%);
    }
}

@keyframes mx-logo-in-s {
    from {
        opacity: 0;
        clip-path: polygon(79.91% 59.73%, 82.65% 62.56%, 84.57% 64.62%, 85.67% 65.91%, 85.95% 66.43%, 85.95% 66.43%, 85.85% 67%, 85.77% 68.46%, 85.73% 70.82%, 85.71% 74.07%, 85.71% 89.81%, 84.62% 94.27%, 81.35% 97.45%, 75.89% 99.36%, 68.25% 100%, 17.46% 100%, 9.82% 99.36%, 4.37% 97.45%, 1.09% 94.27%, 0% 89.81%, 0% 74.07%, 0.89% 69.93%, 3.54% 64.9%, 7.97% 58.99%, 14.18% 52.2%, 35.48% 30.45%, 39.42% 27.43%, 43.36% 26.43%, 47.29% 27.43%, 51.23% 30.45%);
    }
}

@keyframes mx-logo-wave {
    50% {
        clip-path: polygon(79.48% 13.13%, 83.3% 13.48%, 86.03% 14.52%, 87.66% 16.26%, 88.21% 18.69%, 88.21% 27.27%, 87.77% 29.53%, 86.44% 32.28%, 84.22% 35.5%, 81.12% 39.21%, 49.94% 73.93%, 46.84% 77.63%, 44.63% 80.86%, 43.3% 83.6%, 42.86% 85.86%, 42.86% 94.44%, 42.31% 96.88%, 40.67% 98.61%, 37.95% 99.65%, 34.13% 100%, 8.73% 100%, 4.91% 99.65%, 2.18% 98.61%, 0.55% 96.88%, 0% 94.44%, 0% 85.86%, 0.44% 83.6%, 1.77% 80.86%, 3.99% 77.63%, 7.09% 73.93%, 38.26% 39.21%, 41.36% 35.5%, 43.58% 32.28%, 44.91% 29.53%, 45.35% 27.27%, 45.35% 18.69%, 45.9% 16.26%, 47.53% 14.52%, 50.26% 13.48%, 54.08% 13.13%);
    }
}

@keyframes mx-logo-wave-s {
    50% {
        clip-path: polygon(82.82% 56.76%, 85.46% 59.69%, 87.09% 62.05%, 87.7% 63.83%, 87.3% 65.05%, 87.3% 65.05%, 86.61% 66.22%, 86.11% 68.11%, 85.81% 70.73%, 85.71% 74.07%, 85.71% 89.81%, 84.62% 94.27%, 81.35% 97.45%, 75.89% 99.36%, 68.25% 100%, 17.46% 100%, 9.82% 99.36%, 4.37% 97.45%, 1.09% 94.27%, 0% 89.81%, 0% 74.07%, 0.89% 69.93%, 3.54% 64.9%, 7.97% 58.99%, 14.18% 52.2%, 38.38% 27.48%, 42.32% 24.47%, 46.26% 23.46%, 50.2% 24.47%, 54.13% 27.48%);
    }
}

/* --- Review form: the rating is a field like the others ------------------ */

/* The same box as Name and Email: the small label at the top left, and where
   the typed text would be, the five tiles to pick from. */
.mx-rev-form .mx-field.is-inline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    margin-top: 16px;
    padding: 11px 16px 6px;
    border-radius: 14px;
    background: #fbf9ff;
    box-shadow: inset 0 0 0 1px #d8cdef;
    container-type: inline-size;
}

.mx-rev-form .mx-field.is-inline .mx-field-label {
    color: var(--mx-mute);
    font-size: .71875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
}

.mx-rev-form .mx-rate {
    align-items: center;
    margin-left: -3px;
}

.mx-rev-form .mx-rate span .icon-star-regular {
    background: #e9e0f8;
}

/* What is picked, said in figures at the end of the row. It follows the pointer too. */
.mx-rev-form .mx-rate::after {
    margin-left: auto;
    padding-left: 10px;
    color: var(--mx-ink);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

@supports selector(:has(*)) {
    .mx-rev-form .mx-rate:has(span:nth-child(1) .icon-star-solid)::after {
        content: '1 / 5';
    }

    .mx-rev-form .mx-rate:has(span:nth-child(2) .icon-star-solid)::after {
        content: '2 / 5';
    }

    .mx-rev-form .mx-rate:has(span:nth-child(3) .icon-star-solid)::after {
        content: '3 / 5';
    }

    .mx-rev-form .mx-rate:has(span:nth-child(4) .icon-star-solid)::after {
        content: '4 / 5';
    }

    .mx-rev-form .mx-rate:has(span:nth-child(5) .icon-star-solid)::after {
        content: '5 / 5';
    }
}

/* In a narrow note there is only room for the tiles. */
@container (max-width: 255px) {
    .mx-rev-form .mx-rate::after {
        content: none !important;
    }
}

/* --- Legal pages: the list of sections scrolls up and down only ---------- */

@media (min-width: 1024px) {
    .mx-toc {
        overflow-x: hidden;
    }

    /* A link moves two pixels to the right under the pointer; this is the room for it. */
    .mx-toc a {
        margin-right: 2px;
    }
}

/* ========================================================================
 | Product pages: the quality switch above the tickets and one quiet note
 | beside the heading. The switch is the service switch of the home page.
 * ===================================================================== */

/* --- Quality switch ------------------------------------------------------ */

.pk-tier-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.pk-tiers {
    position: relative;
}

/* A white track on the tinted panel; a navy marker slides under the chosen
   quality. Nothing here moves on hover. */
.pk-tier-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    max-width: 30rem;
    margin: 0 auto;
    padding: 5px;
    border-radius: 18px;
    background: var(--mx-surface);
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

.pk-tier-glider {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / var(--n));
    border-radius: 13px;
    background: var(--mx-ink);
    transition: transform .42s var(--mx-ease);
}

.pk-tier-radio:nth-of-type(2):checked ~ .pk-tier-switch .pk-tier-glider {
    transform: translateX(100%);
}

.pk-tier-radio:nth-of-type(3):checked ~ .pk-tier-switch .pk-tier-glider {
    transform: translateX(200%);
}

.pk-tier-radio:nth-of-type(4):checked ~ .pk-tier-switch .pk-tier-glider {
    transform: translateX(300%);
}

.pk-tier {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    min-height: 56px;
    margin: 0;
    padding: 9px 6px;
    border-radius: 13px;
    color: var(--mx-ink);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--mx-ease), transform .08s ease-out;
}

.pk-tier:active {
    transform: scale(.975);
}

.pk-tier-name {
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.pk-tier-promise {
    display: none;
    color: var(--mx-ink-2);
    font-size: .8125rem;
    font-weight: 500;
    transition: color .2s var(--mx-ease);
}

.pk-tier-from {
    color: var(--mx-mute);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: color .2s var(--mx-ease);
}

.pk-tier-radio:nth-of-type(1):checked ~ .pk-tier-switch .pk-tier:nth-of-type(1),
.pk-tier-radio:nth-of-type(2):checked ~ .pk-tier-switch .pk-tier:nth-of-type(2),
.pk-tier-radio:nth-of-type(3):checked ~ .pk-tier-switch .pk-tier:nth-of-type(3),
.pk-tier-radio:nth-of-type(4):checked ~ .pk-tier-switch .pk-tier:nth-of-type(4) {
    color: #fff;
}

.pk-tier-radio:nth-of-type(1):checked ~ .pk-tier-switch .pk-tier:nth-of-type(1) :is(.pk-tier-promise, .pk-tier-from),
.pk-tier-radio:nth-of-type(2):checked ~ .pk-tier-switch .pk-tier:nth-of-type(2) :is(.pk-tier-promise, .pk-tier-from),
.pk-tier-radio:nth-of-type(3):checked ~ .pk-tier-switch .pk-tier:nth-of-type(3) :is(.pk-tier-promise, .pk-tier-from),
.pk-tier-radio:nth-of-type(4):checked ~ .pk-tier-switch .pk-tier:nth-of-type(4) :is(.pk-tier-promise, .pk-tier-from) {
    color: rgba(255, 255, 255, .76);
}

.pk-tier-radio:nth-of-type(1):focus-visible ~ .pk-tier-switch .pk-tier:nth-of-type(1),
.pk-tier-radio:nth-of-type(2):focus-visible ~ .pk-tier-switch .pk-tier:nth-of-type(2),
.pk-tier-radio:nth-of-type(3):focus-visible ~ .pk-tier-switch .pk-tier:nth-of-type(3),
.pk-tier-radio:nth-of-type(4):focus-visible ~ .pk-tier-switch .pk-tier:nth-of-type(4) {
    outline: 2px solid var(--mx-action);
    outline-offset: 2px;
}

/* The one sticker of the switch, in the family of the "best value" sticker. */
.pk-tier-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    padding: 4px 9px 5px;
    border-radius: 999px;
    background: var(--mx-offer-ink);
    box-shadow: 0 0 0 2px #fff;
    color: #fff;
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    translate: -50% 0;
    rotate: -3deg;
}

/* Phone: what the chosen quality promises, said once under the switch. */
.pk-tier-hints {
    display: grid;
    max-width: 30rem;
    margin: 9px auto 0;
}

.pk-tier-hints p {
    grid-area: 1 / 1;
    margin: 0;
    color: var(--mx-ink-2);
    font-size: .8125rem;
    line-height: 1.3;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s var(--mx-ease);
}

.pk-tier-hints b {
    margin-right: 6px;
    color: var(--mx-ink);
    font-weight: 700;
}

.pk-tier-radio:nth-of-type(1):checked ~ .pk-tier-hints > :nth-child(1),
.pk-tier-radio:nth-of-type(2):checked ~ .pk-tier-hints > :nth-child(2),
.pk-tier-radio:nth-of-type(3):checked ~ .pk-tier-hints > :nth-child(3),
.pk-tier-radio:nth-of-type(4):checked ~ .pk-tier-hints > :nth-child(4) {
    visibility: visible;
    opacity: 1;
}

/* The ladders of all qualities lie on top of each other, so the page keeps
   one height whichever is showing and nothing below it moves. */
.pk-tier-stack {
    display: grid;
    margin-top: 14px;
}

.pk-tier-pane {
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity .18s var(--mx-ease), visibility 0s .18s;
}

.pk-tier-radio:nth-of-type(1):checked ~ .pk-tier-stack > .pk-tier-pane:nth-child(1),
.pk-tier-radio:nth-of-type(2):checked ~ .pk-tier-stack > .pk-tier-pane:nth-child(2),
.pk-tier-radio:nth-of-type(3):checked ~ .pk-tier-stack > .pk-tier-pane:nth-child(3),
.pk-tier-radio:nth-of-type(4):checked ~ .pk-tier-stack > .pk-tier-pane:nth-child(4) {
    visibility: visible;
    opacity: 1;
    transition: opacity .32s var(--mx-ease) .06s, visibility 0s;
}

/* ui.js sets this for one frame when a quality comes forward, so its price rolls in afresh. */
.pk-tier-pane.is-swap .pk-d,
.pk-tier-pane.is-swap .pk-save,
.pk-tier-pane.is-swap .pk-meter > .is-lit {
    animation: none !important;
}

@media (min-width: 640px) {
    .pk-tier-switch,
    .pk-tier-hints {
        max-width: 38rem;
    }

    .pk-tier {
        min-height: 62px;
    }

    .pk-tier-name {
        font-size: 1rem;
    }

    .pk-tier-promise {
        display: block;
    }

    .pk-tier-hints {
        display: none;
    }

    .pk-tier-stack {
        margin-top: 16px;
    }
}

@media (min-width: 1024px) {
    .pk-tier-switch {
        max-width: none;
    }

    /* Name and promise on the left, where it starts on the right. */
    .pk-tier {
        grid-template-columns: minmax(0, 1fr) auto;
        justify-items: start;
        column-gap: 14px;
        row-gap: 6px;
        min-height: 66px;
        padding: 12px 20px;
        text-align: left;
    }

    .pk-tier-name {
        grid-column: 1;
        font-size: 1.125rem;
    }

    .pk-tier-promise {
        grid-column: 1;
        font-size: .875rem;
    }

    .pk-tier-from {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        font-size: .875rem;
    }

    /* Over the name, clear of the neighbouring quality. */
    .pk-tier-flag {
        left: 16px;
        translate: none;
    }

    .pk-tier-stack {
        margin-top: 20px;
    }

    /* The switch adds a row, so the panel gives a little of its air back. */
    .mx-buy-in:has(.pk-tiers) {
        padding-top: 42px;
    }

    .mx-buy-in:has(.pk-tiers) .mx-buy-head,
    .mx-buy-in:has(.pk-tiers) .mx-notes {
        margin-bottom: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-tier-glider,
    .pk-tier-pane,
    .pk-tier-hints p {
        transition: none !important;
    }
}

/* --- The note beside the heading ------------------------------------------
   One pane of frosted glass on wide screens: the amount picked below and a
   count that climbs in steps. It says "in batches" and nothing more, and it
   is kept small and soft so the heading and the picker stay what the eye
   goes to. */

.mx-notes {
    display: none;
}

@media (min-width: 1180px) {
    .mx-buy-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 236px;
        align-items: end;
        column-gap: 48px;
    }

    .mx-notes {
        display: block;
        margin: 0 0 40px;
    }

    .mx-note {
        padding: 15px 18px 16px;
        border-radius: 18px;
        background: linear-gradient(145deg, var(--mx-glass-1), var(--mx-glass-2));
        -webkit-backdrop-filter: blur(14px) saturate(1.5);
        backdrop-filter: blur(14px) saturate(1.5);
        box-shadow: inset 0 0 0 1px var(--mx-glass-edge);
        color: var(--mx-ink);
        animation: mx-note-in .7s var(--mx-ease) .12s both;
    }

    .mx-note-label {
        margin: 0;
        color: var(--mx-ink-2);
        font-size: .75rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .mx-note-figure {
        margin: 5px 0 0;
        color: var(--mx-ink-2);
        font-size: .875rem;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }

    .mx-note-figure b {
        display: inline-block;
        margin-right: 2px;
        color: var(--mx-ink);
        font-size: 1.375rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.04em;
    }

    .mx-note-figure b.is-pop {
        animation: mx-note-pop .34s var(--mx-ease);
    }

    .mx-note-chart {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 11px;
        overflow: visible;
    }

    .mx-note-chart-goal {
        fill: none;
        stroke: var(--mx-chart-goal);
        stroke-width: 1.25;
        stroke-dasharray: 3 5;
    }

    .mx-note-chart-fill {
        fill: var(--mx-chart-fill);
        animation: mx-note-fade .6s var(--mx-ease) .95s both;
    }

    .mx-note-chart-line {
        fill: none;
        stroke: var(--mx-chart-line);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        animation: mx-note-draw 1.25s cubic-bezier(.45, 0, .2, 1) .45s both;
    }

    .mx-note-chart-end {
        fill: var(--mx-ink);
        stroke: var(--mx-surface);
        stroke-width: 2;
        transform-box: fill-box;
        transform-origin: center;
        animation: mx-note-dot .4s var(--mx-ease) 1.55s both;
    }
}

/* A browser that cannot blur gets a nearly solid pane, so the text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mx-note {
        background: var(--mx-glass-solid);
    }
}

@keyframes mx-note-in {
    from {
        opacity: 0;
        translate: 0 12px;
    }
}

@keyframes mx-note-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mx-note-fade {
    from {
        opacity: 0;
    }
}

@keyframes mx-note-dot {
    from {
        opacity: 0;
        scale: .2;
    }
}

@keyframes mx-note-pop {
    from {
        opacity: .25;
        translate: 0 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-note,
    .mx-note-chart *,
    .mx-note-figure b {
        animation: none !important;
    }
}

/* --- Product pages: MIXX next to a seller to avoid ------------------------
   The comparison table of the "why us" page, with words in the cells: what
   MIXX does in the navy lane, the warning sign beside it. */

.mx-vs-in {
    padding: 56px 0 4px;
}

/* The reads follow at the distance they kept from the reviews. */
.mx-vs + .mx-read {
    margin-top: 40px;
}

.mx-cmp.is-words td,
.mx-cmp.is-words thead th:not(:first-child) {
    width: 37%;
    padding-inline: 10px;
    font-size: .8125rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
}

.mx-cmp.is-words thead th:not(:first-child) {
    font-size: .8125rem;
}

.mx-cmp.is-words tbody th {
    width: 26%;
    padding-right: 8px;
}

.mx-cmp.is-words tbody th b {
    font-size: .9375rem;
    line-height: 1.25;
}

.mx-cmp.is-words td:last-child {
    color: var(--mx-ink-2);
    font-weight: 500;
}

.mx-cmp-say {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* On a phone the words need the room; the marks come in from 480px. */
.mx-cmp-say > :first-child {
    display: none;
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: -2px;
}

.mx-cmp-say svg {
    width: 12px;
    height: 12px;
}

@media (min-width: 480px) {
    .mx-cmp-say > :first-child {
        display: inline-grid;
    }
}

@media (min-width: 640px) {
    .mx-vs-in {
        padding-top: 64px;
    }

    .mx-cmp.is-words td,
    .mx-cmp.is-words thead th:not(:first-child) {
        width: 36%;
        padding-inline: 22px;
        font-size: 1rem;
    }

    .mx-cmp.is-words thead th:not(:first-child) {
        font-size: .875rem;
    }

    .mx-cmp.is-words tbody th {
        width: 28%;
    }

    .mx-cmp.is-words tbody th b {
        font-size: 1.0625rem;
    }

    .mx-cmp-say {
        gap: 12px;
    }
}

@media (min-width: 900px) {
    .mx-vs-in {
        padding: 96px 0 8px;
    }
}

/* --- FAQ: a details element per question ---------------------------------
   The question is a plain heading in the summary; the heading adds nothing to
   look at, it only puts the question into the outline of the page. */

.mx-faq-item {
    display: block;
}

.mx-faq-q {
    list-style: none;
    cursor: pointer;
}

.mx-faq-q::-webkit-details-marker {
    display: none;
}

.mx-faq-q::marker {
    content: '';
}

.mx-faq-h {
    min-width: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-wrap: inherit;
}

/* Opening: the browser shows the answer at once, so the drawer and the words
   are brought in by an animation rather than a change of state. */
:where(.mx-faq-item)[open] > .mx-faq-a {
    animation: mx-faq-drawer .55s var(--mx-ease);
}

:where(.mx-faq-item)[open] > .mx-faq-a p {
    animation: mx-faq-words .55s var(--mx-ease) .08s backwards;
}

@keyframes mx-faq-drawer {
    from {
        grid-template-rows: 0fr;
    }
}

@keyframes mx-faq-words {
    from {
        opacity: 0;
        translate: 0 -8px;
    }
}

/* Closing glides too where the browser can animate the height of a details
   element. There the browser moves the height, so the inner drawer stands open. */
@supports (interpolate-size: allow-keywords) {
    .mx-faq-item {
        interpolate-size: allow-keywords;
    }

    .mx-faq-item::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size .5s var(--mx-ease), content-visibility .5s allow-discrete;
    }

    .mx-faq-item[open]::details-content {
        block-size: auto;
    }

    .mx-faq-item > .mx-faq-a,
    :where(.mx-faq-item)[open] > .mx-faq-a {
        grid-template-rows: 1fr;
        animation: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-faq-item::details-content {
        transition: none;
    }

    :where(.mx-faq-item)[open] > .mx-faq-a,
    :where(.mx-faq-item)[open] > .mx-faq-a p {
        animation: none;
    }
}

/* ========================================================================
 | Round 18
 | A calmer top of the product pages, firmer promise icons, a quieter line
 | between sections, a small picture beside the two heading notes that had
 | none, stars that span the review form, and room after the comparison.
 * ===================================================================== */

/* --- Promises: the same one colour, drawn a little bolder, with a light
       wash of that colour inside each shape ------------------------------- */

.mx-glyph,
li:nth-child(3n + 2) > .mx-glyph,
li:nth-child(3n) > .mx-glyph {
    width: 26px;
    height: 26px;
}

.mx-glyph svg {
    width: 24px;
    height: 24px;
}

.mx-glyph .f {
    fill: currentColor;
    stroke: none;
    opacity: .15;
}

.pk-assure {
    color: var(--mx-ink);
    font-weight: 500;
}

.pk-assure li,
.ti-list li.has-glyph {
    gap: 12px;
}

/* --- The line between two sections: quieter -------------------------------
   A hairline that fades out at both ends, with the mark small and unlit in
   the middle. It separates; it does not ask to be looked at. */

.mx-tear {
    height: 16px;
}

.mx-tear::before {
    height: 1px;
    border-top: 0;
    background: linear-gradient(90deg, transparent, var(--mx-line-strong) 16%, var(--mx-line-strong) 84%, transparent);
    opacity: .7;
}

.mx-tear .mx-bars {
    --w: 8px;
    --h: 12.5px;
    padding: 0 16px;
}

.mx-tear .mx-bars i {
    background-color: var(--mx-line-strong);
    background-image: none;
}

/* "Why us": the table and the reads under it are two sections, with the line between them. */
.mx-cmp-wrap + .mx-tear {
    margin-top: 56px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .mx-cmp-wrap + .mx-tear {
        margin-top: 80px;
        margin-bottom: 28px;
    }
}

/* --- Heading notes: two more small pictures -------------------------------
   In the family of the two speech bubbles of the questions: one larger piece
   leaning left, one small yellow piece leaning right. */

/* How it works: a clock face and a tag that says how long. */
.mx-head-art.is-timer i:first-child {
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--mx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath d='M21 11.5V21l6.200 4' fill='none' stroke='%23000051' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    rotate: -8deg;
}

.mx-head-art.is-timer i:last-child {
    right: -4px;
    bottom: 0;
    height: 22px;
    padding: 0 8px;
    border-radius: 8px 8px 3px 8px;
    background: var(--mx-save-lit);
    box-shadow: 0 0 0 2px var(--mx-ink);
    color: var(--mx-ink);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
    rotate: 7deg;
}

.mx-head-art.is-timer i:last-child::before {
    content: '1 min';
}

/* What to check: a sheet with three lines ticked off, and a tick on yellow. */
.mx-head-art.is-check i:first-child {
    top: 0;
    left: 2px;
    width: 36px;
    height: 44px;
    border-radius: 10px;
    background: var(--mx-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 44' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23fff' stroke-width='2'%3E%3Cpath d='m7 12.200 2 2 3.400-3.800'/%3E%3Cpath d='m7 22.200 2 2 3.400-3.800'/%3E%3Cpath d='m7 32.200 2 2 3.400-3.800'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.5' stroke-width='2.400'%3E%3Cpath d='M17 12.500h12'/%3E%3Cpath d='M17 22.500h9'/%3E%3Cpath d='M17 32.500h11'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    rotate: -7deg;
}

.mx-head-art.is-check i:last-child {
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mx-save-lit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.600 10.400l2.900 2.900 6-6.400' fill='none' stroke='%23000051' stroke-width='2.400' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
    box-shadow: 0 0 0 2px var(--mx-surface);
    rotate: 8deg;
}

/* The line beside a heading on the dark panel reads clearly. */
.mx-head.is-light p {
    color: var(--mx-on-dark);
}

/* --- Review form: the five stars span the box -----------------------------
   Equal tiles from edge to edge. They still touch, so the pointer never
   falls between two of them. */

.mx-rev-form .mx-field.is-inline .mx-rate {
    display: flex;
    align-self: stretch;
    margin: 0 -3px;
}

.mx-rev-form .mx-rate span {
    flex: 1 1 0;
    min-width: 0;
}

.mx-rev-form .mx-rate span i,
.mx-rev-form .mx-rate span .icon-star-regular {
    width: 100%;
    height: 40px;
    font-size: 17px;
}

/* The figure at the end of the row made way for the tiles. */
.mx-rev-form .mx-rate::after {
    content: none !important;
}

@media (hover: hover) {
    .mx-rev-form .mx-rate span:hover i {
        scale: 1.04;
    }
}

/* --- Comparison: the mark in our lane shows up, and the section ends with
       room under it ------------------------------------------------------- */

.mx-cmp thead .is-us .mx-bars {
    --w: 9px;
    --h: 14px;
    margin-right: 8px;
    vertical-align: -2px;
}

.mx-cmp thead .is-us .mx-bars i {
    background-image: var(--mx-spectrum-light);
}

.mx-vs-in {
    padding-bottom: 64px;
}

@media (min-width: 900px) {
    .mx-vs-in {
        padding-bottom: 104px;
    }
}

/* ========================================================================
 | Round 19
 | Ground under the service pictures of the home page, heading pictures that
 | move like the two speech bubbles do, quieter and clearer form fields, and
 | the small answers a control gives: on hover, while loading, on arrival.
 * ===================================================================== */

:root {
    /* Fields */
    --mx-field: #fbf9ff;
    --mx-field-line: #d8cdef;
    --mx-field-line-hover: #b9a4e6;
    --mx-field-hint: #76719a;
    --mx-field-halo: rgba(147, 55, 251, .14);
    --mx-autofill: #f3ecff;

    /* Colours the last two rounds use, by name. */
    --mx-on-dark: rgba(255, 255, 255, .92);
    --mx-press: rgba(0, 0, 81, .06);
    --mx-action-wash: rgba(147, 55, 251, .06);
    --mx-spectrum-light: linear-gradient(90deg, #6fe6ff 4%, #c2a8ff 46%, #ff9bea 88%);
    --mx-glass-1: rgba(255, 255, 255, .6);
    --mx-glass-2: rgba(255, 255, 255, .28);
    --mx-glass-edge: rgba(255, 255, 255, .8);
    --mx-glass-solid: rgba(255, 255, 255, .88);
    --mx-chart-goal: rgba(0, 0, 81, .16);
    --mx-chart-fill: rgba(0, 0, 81, .05);
    --mx-chart-line: rgba(0, 0, 81, .46);

    /* The three logo colours as the faintest of tints, for plates. */
    --mx-tint-cyan: rgba(0, 182, 213, .075);
    --mx-tint-violet: rgba(103, 4, 216, .05);
    --mx-tint-pink: rgba(255, 4, 216, .055);
}

/* An anchor never lands under the floating top bar. */
html {
    scroll-padding-top: 96px;
}

/* --- Home: each service picture stands on a plate -------------------------
   The pictures floated on the white page with nothing under them. A tinted
   plate with one leaning band gives each row a ground, and the rows sit
   closer, so the four read as one group. */

.mx-svc-stage {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 34px 20px;
    border-radius: 26px;
    background: linear-gradient(116.565deg, transparent 0 56%, var(--stage-band, var(--mx-tint-violet)) 56% 80%, transparent 80%), var(--mx-wash);
    box-shadow: inset 0 0 0 1px var(--mx-line);
}

.mx-svc-stage.is-likes {
    --stage-band: var(--mx-tint-pink);
}

.mx-svc-stage.is-views {
    --stage-band: var(--mx-tint-cyan);
}

.mx-svc-rows {
    gap: 64px;
    padding: 56px 0 72px;
}

@media (min-width: 768px) {
    .mx-svc-rows {
        gap: 88px;
        padding: 88px 0 112px;
    }

    .mx-svc-stage {
        min-height: 340px;
        padding: 48px 32px;
    }

    .mx-svc-row.is-flipped .mx-svc-stage {
        order: 2;
    }

    .mx-svc-row.is-flipped .mx-svc-art {
        order: 0;
        justify-self: auto;
    }
}

/* --- Heading pictures: they lean apart under the pointer, like the two
       speech bubbles, and land when they first come into view ------------- */

.mx-head-art i {
    transition: rotate .5s var(--mx-spring), translate .5s var(--mx-spring), scale .5s var(--mx-ease), opacity .3s ease-out;
}

html.mx-live .mx-head-art:not(.is-in) i {
    opacity: 0;
    scale: .6;
    rotate: 0deg;
}

.mx-head-art.is-in i:last-child {
    transition-delay: .1s;
}

/* The clock: a face with a pin, a short hand that stays and a long one that
   goes once round when the heading is under the pointer. */
.mx-head-art.is-timer i:first-child {
    background: var(--mx-surface) radial-gradient(circle, var(--mx-ink) 0 2.4px, transparent 2.9px);
}

.mx-head-art.is-timer i:first-child::before,
.mx-head-art.is-timer i:first-child::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: calc(50% - 1.5px);
    width: 3px;
    border-radius: 2px;
    background: var(--mx-ink);
    transform-origin: 50% 100%;
}

.mx-head-art.is-timer i:first-child::before {
    height: 8px;
    transform: rotate(122deg);
}

.mx-head-art.is-timer i:first-child::after {
    height: 12px;
}

@keyframes mx-once-round {
    to {
        transform: rotate(360deg);
    }
}

@media (hover: hover) {
    .mx-head:hover .mx-head-art.is-timer i:first-child {
        rotate: -14deg;
        translate: -2px -2px;
    }

    .mx-head:hover .mx-head-art.is-timer i:first-child::after {
        animation: mx-once-round .9s var(--mx-ease);
    }

    .mx-head:hover .mx-head-art.is-timer i:last-child {
        rotate: 12deg;
        translate: 3px 2px;
    }

    .mx-head:hover .mx-head-art.is-check i:first-child {
        rotate: -12deg;
        translate: -2px -1px;
    }

    .mx-head:hover .mx-head-art.is-check i:last-child {
        rotate: 16deg;
        translate: 3px 2px;
        scale: 1.08;
    }
}

/* The clock's long hand goes round once when the panel arrives, too. */
html.mx-live .mx-head-art.is-timer.is-in:not(.is-there) i:first-child::after {
    animation: mx-once-round 1.1s var(--mx-ease) .35s;
}

/* --- The line between sections draws itself from the middle -------------- */

.mx-tear::before {
    transition: scale .9s var(--mx-ease);
}

.mx-tear .mx-bars {
    transition: opacity .4s ease-out .25s;
}

html.mx-live .mx-tear:not(.is-in)::before {
    scale: 0 1;
}

html.mx-live .mx-tear:not(.is-in) .mx-bars {
    opacity: 0;
}

/* --- Fields ----------------------------------------------------------------
   The same box with the label inside it. What changes: the hint text is
   readable, the box sits a little into the page, the label answers when the
   field is in use, a filled field looks filled, and the browser's own paint
   (caret, autofill) is in the colours of the site. */

@supports selector(:has(+ *)) {
    label[for] + input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
    label[for] + textarea,
    label[for] + select,
    label[for] + .mx-pw > input {
        background-color: var(--mx-field);
        box-shadow: inset 0 0 0 1px var(--mx-field-line), inset 0 2px 3px -1px var(--mx-press) !important;
        caret-color: var(--mx-action);
        transition: box-shadow .18s var(--mx-ease), background-color .18s var(--mx-ease);
    }

    label[for] + input::placeholder,
    label[for] + textarea::placeholder,
    label[for] + .mx-pw > input::placeholder {
        color: var(--mx-field-hint);
    }

    label[for]:has(+ input, + textarea, + select, + .mx-pw) {
        transition: color .18s var(--mx-ease);
    }

    /* In use: the label takes the colour of the ring. */
    label[for]:has(+ :focus),
    label[for]:has(+ .mx-pw :focus) {
        color: var(--mx-action);
    }

    @media (hover: hover) {
        label[for] + input:not([type='checkbox']):not([type='radio']):hover,
        label[for] + textarea:hover,
        label[for] + select:hover,
        label[for] + .mx-pw > input:hover {
            box-shadow: inset 0 0 0 1px var(--mx-field-line-hover), inset 0 2px 3px -1px var(--mx-press) !important;
        }
    }

    /* Filled in and left: white, with the line a shade firmer. */
    label[for] + input:not([type='checkbox']):not([type='radio']):not(:placeholder-shown):not(:focus),
    label[for] + textarea:not(:placeholder-shown):not(:focus),
    label[for] + .mx-pw > input:not(:placeholder-shown):not(:focus) {
        background-color: var(--mx-surface);
        box-shadow: inset 0 0 0 1px var(--mx-field-line-hover) !important;
    }

    label[for] + input:not([type='checkbox']):not([type='radio']):focus,
    label[for] + textarea:focus,
    label[for] + select:focus,
    label[for] + .mx-pw > input:focus {
        box-shadow: inset 0 0 0 2px var(--mx-action), 0 0 0 4px var(--mx-field-halo) !important;
    }

    /* The browser fills a field in: its yellow or blue becomes the lilac of the site. */
    label[for] + input:-webkit-autofill,
    label[for] + .mx-pw > input:-webkit-autofill {
        -webkit-text-fill-color: var(--mx-ink);
        box-shadow: inset 0 0 0 1px var(--mx-field-line-hover), inset 0 0 0 100px var(--mx-autofill) !important;
    }

    label[for] + textarea {
        min-height: 132px;
        resize: vertical;
    }
}

/* The review is being sent: the bars of the button move, as on every other button. */
.mx-rev-loading {
    margin-right: 8px;
}

.mx-rev-loading i {
    background-color: var(--mx-surface);
    animation: mx-eq .62s ease-in-out infinite;
}

.mx-rev-loading i:nth-child(2) {
    animation-delay: -.2s;
}

.mx-rev-loading i:nth-child(3) {
    animation-delay: -.41s;
}

/* --- Small answers ------------------------------------------------------- */

/* The quality switch: a quality that is not chosen shows it can be. */
.pk-tier {
    transition: color .2s var(--mx-ease), transform .08s ease-out, background-color .2s var(--mx-ease);
}

@media (hover: hover) {
    .pk-tier:hover {
        background-color: var(--mx-action-wash);
    }

    .pk-tier-radio:nth-of-type(1):checked ~ .pk-tier-switch .pk-tier:nth-of-type(1):hover,
    .pk-tier-radio:nth-of-type(2):checked ~ .pk-tier-switch .pk-tier:nth-of-type(2):hover,
    .pk-tier-radio:nth-of-type(3):checked ~ .pk-tier-switch .pk-tier:nth-of-type(3):hover,
    .pk-tier-radio:nth-of-type(4):checked ~ .pk-tier-switch .pk-tier:nth-of-type(4):hover {
        background-color: transparent;
    }
}

/* A step of "how it works": its figure lights up under the pointer. */
.mx-steps-num {
    transition: color .25s var(--mx-ease);
}

@media (hover: hover) {
    .mx-steps-list li:hover .mx-steps-num {
        color: var(--mx-surface);
    }
}

/* A link inside a text: the line under it firms up. */
.mx-faq-a a,
.rd-panel a {
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness .15s ease-out, color .15s ease-out;
}

@media (hover: hover) {
    .mx-faq-a a:hover,
    .rd-panel a:hover {
        text-decoration-thickness: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-head-art i,
    .mx-tear::before,
    .mx-tear .mx-bars {
        transition: none;
    }

    .mx-head-art.is-timer i:first-child::after,
    .mx-rev-loading i {
        animation: none !important;
    }
}

/* ========================================================================
 | Round 20
 | The people beside reviews: line drawings with a light wash, like the
 | promise icons, on a disc of one of five quiet tints.
 * ===================================================================== */

:root {
    --mx-av-a-bg: #e9eaff;
    --mx-av-a-ink: #2a2a86;
    --mx-av-b-bg: #ffe6ec;
    --mx-av-b-ink: #8a2148;
    --mx-av-c-bg: #fff0dc;
    --mx-av-c-ink: #8a4a10;
    --mx-av-d-bg: #dff2fb;
    --mx-av-d-ink: #145273;
    --mx-av-e-bg: #f0e7ff;
    --mx-av-e-ink: #4a1c8f;
}

.mx-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--av-bg, var(--mx-av-a-bg));
    box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 3px var(--mx-line);
    color: var(--av-ink, var(--mx-av-a-ink));
}

/* The drawing is smaller than its disc and sits a touch low, so it has air around the head. */
.mx-avatar svg {
    width: 80%;
    height: 80%;
    translate: 0 6%;
}

.mx-avatar.is-b {
    --av-bg: var(--mx-av-b-bg);
    --av-ink: var(--mx-av-b-ink);
}

.mx-avatar.is-c {
    --av-bg: var(--mx-av-c-bg);
    --av-ink: var(--mx-av-c-ink);
}

.mx-avatar.is-d {
    --av-bg: var(--mx-av-d-bg);
    --av-ink: var(--mx-av-d-ink);
}

.mx-avatar.is-e {
    --av-bg: var(--mx-av-e-bg);
    --av-ink: var(--mx-av-e-ink);
}

/* ========================================================================
 | Round 21
 | What an independent look at the pages found: two joints between sections
 | that were too tight, controls too small for a thumb, field labels that
 | read like hint text, stars that could not be seen before they were
 | picked, and two rows of the home list that looked like missing values.
 * ===================================================================== */

:root {
    --mx-star-empty: #9d8bd6;
}

/* --- Joints ---------------------------------------------------------------- */

/* Phone: the reads kept only a sliver of air under the reviews panel. */
@media (max-width: 899px) {
    .mx-rev + .mx-reader {
        padding-top: 60px;
    }
}

/* Contact: the form stands a little further from the heading panel, and on a
   wide screen the card is wide enough that no empty strip is left beside it. */
.mx-below-head.mx-contact {
    padding-top: 40px;
}

@media (min-width: 900px) {
    .mx-below-head.mx-contact {
        padding-top: 64px;
    }

    .mx-contact {
        grid-template-columns: minmax(0, 36rem) minmax(0, 24rem);
    }
}

/* --- Room for a thumb ------------------------------------------------------ */

@media (max-width: 1023px) {
    .pk-dock-step {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

@media (max-width: 767px) {
    footer ul.text-sm a {
        padding-block: 8px;
    }

    /* The link's own padding is the room between two lines. The list's margin on top of it
       left 24 px between them, which pulled a group of links apart. */
    footer ul.text-sm li {
        margin-bottom: 0;
    }
}

.pk-more {
    margin-top: 2px;
    padding-block: 11px;
}

/* Phone: three service names fit their tabs. */
@media (max-width: 430px) {
    .hq-switch label {
        gap: 5px;
        font-size: .875rem;
    }

    .hq-switch .mx-chip {
        font-size: 13px;
    }
}

/* --- Fields: the label is a label, not a second hint ---------------------- */

@supports selector(:has(+ *)) {
    /* Written as long as the rule it follows (the one that puts the label inside the box), so it can change its colour. */
    label[for]:not(.sr-only):not(.pk-tile):not(.pk-nudge):not(.rd-tab):not(.pay-method-head):not(.ck-terms):has(+ input:not([type='checkbox']):not([type='radio']):not([type='hidden']), + textarea, + select, + .mx-pw) {
        color: var(--mx-ink-2);
    }

    label[for]:not(.sr-only):not(.pk-tile):not(.pk-nudge):not(.rd-tab):not(.pay-method-head):not(.ck-terms):has(+ input:not([type='checkbox']):not([type='radio']):not([type='hidden']), + textarea, + select, + .mx-pw):has(+ :focus, + .mx-pw :focus) {
        color: var(--mx-action);
    }

    /* A field laid out as a grid added its gap above the box, which pushed the label up. The label sits the same in every form now. */
    .mx-field:has(> label[for]) {
        gap: 0;
    }
}

.mx-rev-form .mx-field.is-inline .mx-field-label {
    color: var(--mx-ink-2);
}

/* A star that is not picked yet can be seen. */
.mx-rev-form .mx-rate span .icon-star-regular {
    color: var(--mx-star-empty);
}

/* A date under a name stays on one line. */
.mx-rev-card time,
.mx-quote time {
    white-space: nowrap;
}

/* --- Home list: a row without a figure leads with a picture of its size --- */

.mx-ledger-fig .mx-glyph,
.mx-ledger-fig li > .mx-glyph {
    width: 34px;
    height: 34px;
    color: var(--mx-ink);
}

.mx-ledger-fig .mx-glyph svg {
    width: 32px;
    height: 32px;
}

/* The marks beside the links of the contact page are in the lilac of the lines. */
.mx-route .mx-bars i {
    background-color: var(--mx-line-strong);
}

/* The moving bars of the review button only show while a review is being sent. */
.mx-rev-loading.hidden {
    display: none;
}

/* Beside figures set in the heaviest weight, the picture is drawn a little firmer and larger. */
.mx-ledger-fig .mx-glyph {
    width: 38px;
    height: 38px;
}

.mx-ledger-fig .mx-glyph svg {
    width: 36px;
    height: 36px;
    stroke-width: 2.3;
}

/* ------------------------------------------------------------------------
 | Round 23
 |
 | Two quiet facts, added without putting anything new into the hero's
 | stack: how long the shop has been online (beside the rating), and where
 | the page sits (a breadcrumb at the top of the footer).
 * --------------------------------------------------------------------- */

/* The rating and the "since" line share one row. Between them a hairline,
   which goes away where the row has to wrap. */
.mx-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 14px;
}

.mx-proof .mx-rating {
    margin-top: 0;
}

.mx-since {
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--mx-ink-2);
}

.mx-since-rest {
    display: inline-block;
}

/* Beside a rating on a phone there is room for the short form only, so
   "Online since 2022" becomes "Since 2022" and the row stays one line. */
@media (max-width: 479px) {
    .mx-proof .mx-rating + .mx-since .mx-since-lead {
        display: none;
    }

    .mx-proof .mx-rating + .mx-since .mx-since-rest::first-letter {
        text-transform: uppercase;
    }
}

@media (min-width: 361px) {
    .mx-proof .mx-rating + .mx-since {
        padding-left: 14px;
        border-left: 1px solid var(--mx-line-strong);
    }
}

/* Breadcrumb. Small type in the footer's own inks; the slash between the
   steps is drawn by the stylesheet and is not read out. */
.mx-crumb {
    padding-top: 28px;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--mx-ink-2);
}

.mx-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-crumb li + li::before {
    content: "/";
    content: "/" / "";
    margin: 0 .65em;
    color: var(--mx-line-strong);
}

.mx-crumb a {
    color: var(--mx-ink-2);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color .15s ease-out, text-decoration-color .15s ease-out;
}

@media (hover: hover) {
    .mx-crumb a:hover {
        color: var(--mx-ink);
        text-decoration-color: currentColor;
    }
}

.mx-crumb [aria-current] {
    color: var(--mx-ink);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .mx-crumb a {
        transition: none;
    }
}

/* ------------------------------------------------------------------------
 | Round 24
 |
 | What each quality includes. The white track of the quality switch opens
 | downwards like a drawer. On a wide screen every quality's words stand
 | under its own segment, so the switch is the heading of the list and also
 | the way to choose; on a phone the words of the quality that is picked
 | open under the hint line. No cards, no buttons, no second place to choose.
 | The handle takes no room of its own, and the switch keeps its full width.
 * --------------------------------------------------------------------- */

.pk-tiers.has-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.pk-tiers.has-compare > .pk-tier-switch {
    grid-area: 1 / 1;
    width: 100%;
}

.pk-tiers.has-compare > .pk-tier-hints {
    grid-area: 2 / 1;
    justify-self: start;
    max-width: none;
    margin-inline: 2px 0;
    pointer-events: none;
}

.pk-tiers.has-compare > .pk-tier-hints p {
    text-align: left;
}

.pk-tiers.has-compare > .pk-tier-stack {
    grid-area: 3 / 1;
}

.pk-inc {
    grid-area: 2 / 1;
    min-width: 0;
}

/* The handle. On a phone it ends the hint line. */
.pk-inc-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    margin: 9px 2px 0 auto;
    color: var(--mx-ink-2);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease-out;
}

.pk-inc-tab::-webkit-details-marker {
    display: none;
}

/* A finger gets more to aim at than the line of text. */
.pk-inc-tab::after {
    content: "";
    position: absolute;
    inset: -12px -8px;
}

.pk-inc-tab svg,
.pk-inc-col svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-inc-tab svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
    transition: rotate .25s var(--mx-ease);
}

.pk-inc[open] > .pk-inc-tab svg {
    rotate: 180deg;
}

@media (hover: hover) {
    .pk-inc-tab:hover {
        color: var(--mx-ink);
    }
}

/* The words. One column per quality; on a phone only the picked one shows. */
.pk-inc-panel {
    margin-top: 10px;
    padding: 11px 2px 2px;
    border-top: 1px dashed var(--mx-line-strong);
    color: var(--mx-ink);
}

.pk-inc-col {
    display: none;
}

.pk-tier-radio:nth-of-type(1):checked ~ .pk-inc .pk-inc-col:nth-child(1),
.pk-tier-radio:nth-of-type(2):checked ~ .pk-inc .pk-inc-col:nth-child(2),
.pk-tier-radio:nth-of-type(3):checked ~ .pk-inc .pk-inc-col:nth-child(3),
.pk-tier-radio:nth-of-type(4):checked ~ .pk-inc .pk-inc-col:nth-child(4) {
    display: block;
}

.pk-inc-col ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
}

.pk-inc-col li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pk-inc-col svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}

/* "All of High-Quality": what a later quality stands on. */
.pk-inc-col .is-all {
    grid-column: 1 / -1;
    font-weight: 700;
}

@media (min-width: 640px) {
    /* The drawer hangs from the bottom edge of the track and lies over the
       packages, so nothing on the page moves when it opens. */
    .pk-inc {
        position: relative;
        z-index: 20;
        width: 100%;
        max-width: 38rem;
        height: 0;
        margin: 0 auto;
    }

    /* The handle: a small tab on the bottom edge of the track. */
    .pk-inc-tab {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
        margin: 0;
        padding: 5px 8px 5px 12px;
        border-radius: 999px;
        background: var(--mx-surface);
        box-shadow: inset 0 0 0 1px var(--mx-line-strong);
        font-size: .75rem;
        font-weight: 600;
        translate: -50% -50%;
    }

    .pk-inc-tab::after {
        inset: -8px -6px;
    }

    .pk-inc-panel {
        position: absolute;
        top: -1px;
        right: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(var(--n), minmax(0, 1fr));
        margin: 0;
        padding: 16px 5px 5px;
        border: 1px solid var(--mx-line);
        border-top: 1px dashed var(--mx-line-strong);
        border-radius: 0 0 18px 18px;
        background: var(--mx-surface);
        box-shadow: var(--mx-shadow);
    }

    /* Open, the track and the drawer are one sheet. */
    .pk-tiers:has(> .pk-inc[open]) > .pk-tier-switch {
        border-radius: 18px 18px 0 0;
    }

    .pk-inc-col,
    .pk-tier-radio:nth-of-type(n):checked ~ .pk-inc .pk-inc-col {
        display: block;
        padding: 12px 14px 14px;
        border-radius: 13px;
        transition: background-color .2s var(--mx-ease);
    }

    /* Under the segment that is picked, the same quiet tint the page uses for what is chosen. */
    .pk-tier-radio:nth-of-type(1):checked ~ .pk-inc .pk-inc-col:nth-child(1),
    .pk-tier-radio:nth-of-type(2):checked ~ .pk-inc .pk-inc-col:nth-child(2),
    .pk-tier-radio:nth-of-type(3):checked ~ .pk-inc .pk-inc-col:nth-child(3),
    .pk-tier-radio:nth-of-type(4):checked ~ .pk-inc .pk-inc-col:nth-child(4) {
        background: var(--mx-wash);
    }

    .pk-inc-col ul {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        font-size: .875rem;
    }

    .pk-inc-col svg {
        width: 15px;
        height: 15px;
    }
}

@media (min-width: 1024px) {
    .pk-inc {
        max-width: none;
    }

    /* The words start where the name of the quality starts in its segment. */
    .pk-inc-col,
    .pk-tier-radio:nth-of-type(n):checked ~ .pk-inc .pk-inc-col {
        padding-inline: 20px;
    }
}

/* The drawer comes down from the track; nothing moves for people who asked for less motion. */
@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
    .pk-inc[open] > .pk-inc-panel {
        animation: pk-inc-drop .28s var(--mx-ease) both;
    }
}

@keyframes pk-inc-drop {
    from {
        opacity: 0;
        clip-path: inset(0 -40px 100% -40px);
    }

    to {
        opacity: 1;
        clip-path: inset(0 -40px -60px -40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-inc-tab,
    .pk-inc-tab svg,
    .pk-inc-col {
        transition: none;
    }
}

/* === Round 34: the bar and the menu on a phone ============================ */

/* What changed, and why:
   - The floating bar is taller on a phone and has a clear edge; the logo is a
     little smaller there, so both have room inside it.
   - Nothing behind the bar is blurred. The page fades out towards the top edge
     instead, so no half line of text shows above the bar.
   - The menu button is three lines that turn into a cross in one movement.
   - The menu is a card that drops from under the bar. The page behind it is
     dimmed and held still (ui.js sets `is-open` and `mx-menu-open`). */

:root {
    --mx-bar-edge: rgba(0, 0, 81, .1);
    --mx-bar-lift: 0 1px 2px rgba(0, 0, 81, .06), 0 14px 30px -14px rgba(0, 0, 81, .38);
    --mx-shade: rgba(0, 0, 81, .54);

    /* The width of the logo in the top bar. Everything else follows from it. */
    --mx-logo-w: 144px;
}

/* --- The logo takes its size from one number ------------------------------- */

.mx-logo {
    width: var(--mx-logo-w);
    height: calc(var(--mx-logo-w) * .26823);
}

.mx-logo-mark {
    --w: calc(var(--mx-logo-w) * .17069);
    --h: calc(var(--mx-logo-w) * .26823);
}

/* --- The floating bar ------------------------------------------------------ */

#header::after {
    box-shadow: 0 0 0 1px var(--mx-bar-edge), var(--mx-bar-lift);
}

/* The page fades out towards the top edge of the screen. */
#header > div::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 40px;
    background: linear-gradient(var(--mx-surface) 15%, transparent);
    opacity: 0;
    transition: opacity .3s ease-out;
    pointer-events: none;
}

#header.is-scrolled > div::before {
    opacity: 1;
}

/* Phone: the row is 56 px high and starts 8 px down, at the top of the page too,
   so the logo and the button stand exactly where the floating bar will hold
   them and nothing moves when it arrives. */
@media (max-width: 767px) {
    :root {
        --mx-logo-w: 124px;
    }

    #header > div {
        padding-inline: 24px 14px;
    }

    #header > div > div {
        height: 56px;
        margin-top: 8px;
    }

    #header .mx-logo {
        margin-top: 0;
    }

    #header::after {
        inset: 8px 8px 0;
    }
}

/* Tablet: the button sits as far from the side of the bar as from its top. */
@media (min-width: 768px) and (max-width: 1279px) {
    #header > div {
        padding-right: 19px;
    }
}

/* --- The menu button ------------------------------------------------------- */

/* A soft key, 44 px for the thumb. Its corner follows the corner of the bar. */
.mx-burger {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    background: var(--mx-wash);
    color: var(--mx-ink);
    touch-action: manipulation;
    transition: background-color .2s ease-out, scale .3s var(--mx-ease);
    -webkit-tap-highlight-color: transparent;
}

.mx-burger:active {
    scale: .9;
    transition-duration: .2s, .08s;
}

@media (hover: hover) {
    .mx-burger:hover {
        background: var(--mx-line);
    }
}

.mx-burger-lines {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

/* All three lines lie in the middle and are moved from there, so each one only
   ever slides and turns about its own middle. The third is the short one, like
   the third bar of the mark. Closing, the cross folds flat, the lines part, and
   the third one shortens last. */
.mx-burger-lines i {
    position: absolute;
    top: 6px;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: rotate .3s var(--mx-ease), scale .3s var(--mx-ease), translate .3s var(--mx-ease) .09s, opacity .2s ease-out .12s, clip-path .22s ease-out .2s;
}

.mx-burger-lines i:nth-child(1) {
    translate: 0 -6px;
}

.mx-burger-lines i:nth-child(3) {
    translate: 0 6px;
    clip-path: inset(0 0 0 40% round 2px);
}

@media (hover: hover) {
    .mx-burger[aria-expanded='false']:hover .mx-burger-lines i:nth-child(3) {
        clip-path: inset(0 0 0 0 round 2px);
        transition-delay: 0s;
    }
}

/* Opening: the short line reaches full length at once, the outer lines meet in
   the middle and open into the cross from there, a little longer than they
   were, so the cross is as wide as the three lines were. */
.mx-burger[aria-expanded='true'] .mx-burger-lines i {
    transition: translate .18s cubic-bezier(.3, .7, .3, 1), rotate .45s var(--mx-ease) .07s, scale .45s var(--mx-ease) .07s, opacity .1s ease-out, clip-path .1s ease-out;
}

.mx-burger[aria-expanded='true'] .mx-burger-lines i:nth-child(1) {
    translate: 0 0;
    rotate: 45deg;
    scale: 1.2 1;
}

.mx-burger[aria-expanded='true'] .mx-burger-lines i:nth-child(2) {
    scale: 0 1;
    opacity: 0;
}

.mx-burger[aria-expanded='true'] .mx-burger-lines i:nth-child(3) {
    translate: 0 0;
    rotate: -45deg;
    scale: 1.2 1;
    clip-path: inset(0 0 0 0 round 2px);
}

/* --- The menu -------------------------------------------------------------- */

/* While the menu is open the flat bar and the fade make way. On a phone the
   floating bar does too: the card under it has its exact shape and takes over. */
#header.is-open::before,
#header.is-open > div::before,
#header.is-open::after {
    opacity: 0;
}

/* It leaves quickly, so its shadow does not linger on the card that replaces it. */
@media (max-width: 639px) {
    #header.is-open::after {
        transition: opacity .1s ease-out;
    }
}

@media (min-width: 640px) {
    #header.is-open::after {
        opacity: 1;
        translate: 0 0;
    }
}

/* The page behind the menu: dimmed, and a tap on it closes the menu. */
.mx-menu-shade {
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    width: calc(100% + var(--mx-sbw, 0px));
    height: 100vh;
    height: 100dvh;
    background: var(--mx-shade);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease-out, visibility 0s .28s;
    touch-action: none;
}

#header.is-open .mx-menu-shade {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease-out, visibility 0s;
}

/* The card. On a phone it is the bar itself: it lies behind the logo and the
   button, closed it shows exactly the 56 px of the bar, and opening lets the
   rest of it down. Everything in it keeps 6 px from its edge, like the button
   does, so rows, button and key end on one line. */
.mx-menu {
    --bar: 56px;
    position: absolute;
    z-index: -1;
    top: 8px;
    right: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding-top: var(--bar);
    border-radius: 20px;
    background: var(--mx-surface);
    clip-path: inset(0 0 calc(100% - var(--bar)) 0 round 20px);
    visibility: hidden;
    transition: clip-path .26s cubic-bezier(.4, 0, .2, 1), visibility 0s .26s;
}

#header.is-open .mx-menu {
    clip-path: inset(0 0 0 0 round 20px);
    visibility: visible;
    transition: clip-path .5s var(--mx-ease), visibility 0s;
}

/* Wider than a phone: a card of its own that hangs under the button. */
@media (min-width: 640px) {
    .mx-menu {
        --bar: 0px;
        top: 70px;
        left: auto;
        width: 22.5rem;
        max-height: calc(100vh - 78px);
        max-height: calc(100dvh - 78px);
    }
}

@media (min-width: 768px) {
    .mx-menu {
        top: 80px;
        max-height: calc(100vh - 88px);
        max-height: calc(100dvh - 88px);
    }
}

/* What is sold: the list. On a short screen it scrolls inside the card and
   fades out at the edge where there is more of it (ui.js marks which edge). */
.mx-menu-in {
    --cut-top: 0px;
    --cut-end: 0px;
    min-height: 0;
    padding: 0 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--mx-line-strong) transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--cut-top), black calc(100% - var(--cut-end)), transparent);
    mask-image: linear-gradient(to bottom, transparent, black var(--cut-top), black calc(100% - var(--cut-end)), transparent);
}

.mx-menu-in.is-cut-top {
    --cut-top: 22px;
}

.mx-menu-in.is-cut-end {
    --cut-end: 44px;
}

@media (min-width: 640px) {
    .mx-menu-in {
        padding-top: 6px;
    }
}

.mx-menu-label {
    margin: 0;
    padding: 12px 10px 6px;
    color: var(--mx-ink-2);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

/* A new group starts further from the rows above it than from its own. */
.mx-menu-group + .mx-menu-label {
    padding-top: 24px;
}

.mx-menu-group,
.mx-menu-more {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-menu-group a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 14px;
    color: var(--mx-ink);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
    transition: background-color .15s ease-out;
    -webkit-tap-highlight-color: transparent;
}

.mx-menu .mx-chip {
    font-size: 17px;
}

/* The foot stays in place: the smaller links, two beside each other, and the
   way in or out. */
.mx-menu-foot {
    flex: none;
    padding: 10px 6px 6px;
}

.mx-menu-more {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 6px;
}

.mx-menu-more a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 14px;
    color: var(--mx-ink-2);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.25;
    transition: background-color .15s ease-out, color .15s ease-out;
    -webkit-tap-highlight-color: transparent;
}

.mx-menu-group a:active,
.mx-menu-group a[aria-current='page'],
.mx-menu-more a:active,
.mx-menu-more a[aria-current='page'] {
    background: var(--mx-wash);
    color: var(--mx-ink);
}

@media (hover: hover) {
    .mx-menu-group a:hover,
    .mx-menu-more a:hover {
        background: var(--mx-wash);
        color: var(--mx-ink);
    }
}

.mx-menu-foot a.btn-sm:not(.disable-default) {
    min-height: 48px;
    border-radius: 14px;
}

/* A short screen: rows a little lower, so a small phone shows all of it. */
@media (max-height: 620px) {
    .mx-menu-group a {
        min-height: 44px;
    }

    .mx-menu-group + .mx-menu-label {
        padding-top: 16px;
    }
}

/* A phone on its side: the two groups stand beside each other, and the foot is one row. */
@media (min-width: 480px) and (max-height: 540px) {
    .mx-menu-in {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: column;
        align-content: start;
        column-gap: 6px;
    }

    .mx-menu-group + .mx-menu-label {
        padding-top: 12px;
    }

    .mx-menu-foot {
        display: flex;
        align-items: center;
        gap: 6px;
        padding-top: 6px;
    }

    .mx-menu-more {
        display: flex;
        flex: 1;
        margin-bottom: 0;
    }

    .mx-menu-foot a.btn-sm:not(.disable-default) {
        width: auto;
        min-width: 10rem;
    }
}

@media (min-width: 640px) and (max-height: 540px) {
    .mx-menu {
        width: min(42rem, calc(100% - 16px));
    }
}

/* The groups come down with the card, one after the other. (From above, not
   from below: pushed down they would make the list longer than it is while they
   move, and the fade that says "more below" would show for nothing.) */
@media (prefers-reduced-motion: no-preference) {
    .mx-menu-in > *,
    .mx-menu-foot {
        opacity: 0;
        translate: 0 -10px;
        transition: opacity .15s ease-out, translate 0s .26s;
    }

    #header.is-open .mx-menu-in > *,
    #header.is-open .mx-menu-foot {
        opacity: 1;
        translate: 0 0;
        transition: opacity .3s ease-out calc(40ms + var(--i, 0) * 34ms), translate .6s var(--mx-ease) calc(40ms + var(--i, 0) * 34ms);
    }

    .mx-menu-in > :nth-child(2) { --i: 1; }
    .mx-menu-in > :nth-child(3) { --i: 2; }
    .mx-menu-in > :nth-child(4) { --i: 3; }
    .mx-menu-foot { --i: 4; }
}

/* --- The page behind an open menu ------------------------------------------ */

/* It cannot scroll. Where the browser shows a scrollbar, its room is kept
   (ui.js measures it into --mx-sbw), so nothing jumps sideways. */
html.mx-menu-open {
    overflow-y: hidden;
}

html.mx-menu-open body {
    padding-right: var(--mx-sbw, 0px);
}

html.mx-menu-open #header {
    width: calc(100% - var(--mx-sbw, 0px));
}

/* The buy bar leaves the screen, also where it floats above the bottom edge. */
html.mx-menu-open .pk-dock.is-up {
    transform: translateY(calc(100% + 48px));
}

@media (prefers-reduced-motion: reduce) {
    #header > div::before,
    .mx-burger,
    .mx-burger-lines i,
    .mx-burger[aria-expanded='true'] .mx-burger-lines i,
    .mx-menu-shade,
    #header.is-open .mx-menu-shade,
    .mx-menu,
    #header.is-open .mx-menu {
        transition: none;
    }
}