/*
 * Mooniez Store - "Moon Magic" (2026-11-04).
 *
 * The owner's dream picture, built for real: lavender and blush paper, gold
 * filigree lines, a plum night bar, painted storybook art (the sleeping white
 * cat, wisteria, brass lanterns), a script face for the warm words and an
 * old-style serif for everything else.
 *
 * Loaded after style.css. Two jobs:
 *   1. Repaint the shared tokens, so every page that still uses the old
 *      components (shop, product, docs, legal, forms) follows the new look.
 *   2. Own the new pieces outright - header, home, footer, ribbon, popup.
 *      Those use mz- classes so nothing in style.css can reach them.
 *
 * Day (data-mh="light") is the design and the default. Night is the same
 * shop after dark: deep plum paper, the gold kept, the art unchanged.
 */

/* ------------------------------------------------------------------ tokens */

:root,
html[data-mh="light"] {
    --mz-paper:   #FAF3F6;
    --mz-paper-2: #F3E6EE;
    --mz-card:    rgba(255, 252, 254, 0.78);
    --mz-plum:    #5E4876;
    --mz-plum-2:  #4A3760;
    --mz-ink:     #47385A;
    --mz-soft:    #7D6D8C;
    --mz-gold:    #C6A26A;
    --mz-gold-2:  #E7D0A1;
    --mz-rose:    #B4628E;
    --mz-lav:     #E9DDF3;
    --mz-blush:   #F6DFE8;
    --mz-shadow:  0 0.9rem 1.8rem -1.2rem rgba(74, 55, 96, 0.55);

    --w: 71, 56, 90;
    --k: 74, 55, 96;
    --fill-solid: #FFFBFD;
    --void:   #FAF3F6;
    --void-2: #F3E6EE;
    --text:   #47385A;
    --text-2: #514266;
    --muted:  #6B5B7D;
    --dim:    #8C7C9B;
    --hi:     #4A3760;
    --lilac:  #7E5BA6;
    --lilac-dim: rgba(126, 91, 166, 0.16);
    --violet: #6E4E96;
    --pink:   #B4628E;
    --neon:      linear-gradient(100deg, #6E4E96, #B4628E);
    --neon-soft: linear-gradient(100deg, rgba(110, 78, 150, 0.12), rgba(180, 98, 142, 0.10));
    --glow: 0 0 1.2rem rgba(198, 162, 106, 0.25);
    --line:   rgba(198, 162, 106, 0.45);
    --line-2: rgba(198, 162, 106, 0.75);
    --panel:  rgba(255, 255, 255, 0.55);
    --panel-2: rgba(255, 255, 255, 0.75);
    --glass:  rgba(255, 252, 254, 0.82);
    --glass-soft: rgba(255, 252, 254, 0.55);
    --glass-veil: rgba(74, 55, 96, 0.35);
    --chrome: linear-gradient(180deg, #5E4876, #5E4876);
    --pill-base: linear-gradient(#FFFBFD, #F6ECF3);
    --sheet-nav:   #5E4876;
    --sheet-nav-2: #5E4876;
    --sheet-pop:   linear-gradient(180deg, #FFFBFD, #F7EDF4);
    --sheet-bar:   linear-gradient(180deg, #FFFBFD, #F7EDF4);
    --sheet-tip:   #4A3760;
    --sheet-best:  linear-gradient(160deg, #FFFBFD 0%, #F6ECF6 60%, #F0E4F2 100%);
    --btn-glow: rgba(198, 162, 106, 0.35);
    --px: 'Cormorant Garamond', Georgia, serif;
    --r-lg: 1rem;
    --r-md: 0.75rem;
    --r-sm: 0.45rem;
    color-scheme: light;
    --star-opacity: 0;
}

html:not([data-mh="light"]) {
    --mz-paper:   #261C33;
    --mz-paper-2: #2E2240;
    --mz-card:    rgba(52, 39, 70, 0.82);
    --mz-plum:    #3A2B4E;
    --mz-plum-2:  #2C2040;
    --mz-ink:     #EFE4F3;
    --mz-soft:    #C3B2D2;
    --mz-gold:    #D6B47C;
    --mz-gold-2:  #8C7350;
    --mz-rose:    #E3A3C4;
    --mz-lav:     #3B2D50;
    --mz-blush:   #46304F;
    --mz-shadow:  0 0.9rem 1.8rem -1rem rgba(0, 0, 0, 0.6);

    --w: 239, 228, 243;
    --k: 0, 0, 0;
    --fill-solid: #34274A;
    --void:   #261C33;
    --void-2: #2E2240;
    --text:   #EFE4F3;
    --text-2: #E4D7EA;
    --muted:  #CDBCDB;
    --dim:    #A895B8;
    --hi:     #FFF6FB;
    --lilac:  #CDB2F0;
    --violet: #B998E6;
    --pink:   #E3A3C4;
    --neon:      linear-gradient(100deg, #CDB2F0, #E3A3C4);
    --line:   rgba(214, 180, 124, 0.35);
    --line-2: rgba(214, 180, 124, 0.65);
    --panel:  rgba(255, 255, 255, 0.05);
    --panel-2: rgba(255, 255, 255, 0.09);
    --glass:  rgba(52, 39, 70, 0.9);
    --chrome: linear-gradient(180deg, #F3E8F7, #F3E8F7);
    --pill-base: linear-gradient(#3B2D50, #33264A);
    --sheet-nav:   #2C2040;
    --sheet-pop:   linear-gradient(180deg, #3A2C4F, #312443);
    --sheet-bar:   linear-gradient(180deg, #3A2C4F, #312443);
    --sheet-tip:   #1E1629;
    --sheet-best:  linear-gradient(160deg, #3D2E54 0%, #33264A 100%);
    --px: 'Cormorant Garamond', Georgia, serif;
    --star-opacity: 0;
}

/* ------------------------------------------------------------------ base */

body {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.12rem;
    color: var(--mz-ink);
    background-color: var(--mz-paper);
    background-image:
        radial-gradient(ellipse 60rem 40rem at 10% 0%, rgba(233, 214, 243, 0.85), transparent 70%),
        radial-gradient(ellipse 50rem 40rem at 95% 35%, rgba(246, 218, 232, 0.8), transparent 70%),
        url('/assets/img/art/paper.webp');
    background-size: auto, auto, 37.5rem;
    overflow-x: hidden;
}
html:not([data-mh="light"]) body {
    background-image:
        radial-gradient(ellipse 60rem 40rem at 10% 0%, rgba(92, 64, 128, 0.55), transparent 70%),
        radial-gradient(ellipse 50rem 40rem at 95% 35%, rgba(120, 66, 104, 0.35), transparent 70%);
}
body::before, body::after { display: none !important; }

.bg, .sky, .vignette, .vstrip, .nav__weather, .ticker { display: none !important; }

h1, h2, h3, h4, .h1, .h2, .h3, .band h2, .doc h2, .doc h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    color: var(--mz-plum);
    letter-spacing: 0;
}
html:not([data-mh="light"]) :is(h1, h2, h3, h4, .h1, .h2, .h3) { color: #F6EAF8; }
.chrome { background: none; -webkit-text-fill-color: currentColor; color: inherit; }

a { color: var(--mz-rose); }
::selection { background: rgba(198, 162, 106, 0.35); }

.mz-wrap { width: min(100% - 2 * clamp(1rem, 4vw, 4.5rem), 84rem); margin-inline: auto; }
.mz-script { font-family: 'Pinyon Script', cursive; font-weight: 400; letter-spacing: 0; }
.mz-frame {
    position: relative;
    border-radius: var(--r-lg);
    box-shadow:
        0 0 0 1.5px var(--mz-gold) inset,
        0 0 0 0.3rem rgba(255, 255, 255, 0.55) inset,
        0 0 0 calc(0.3rem + 1px) var(--mz-gold-2) inset,
        var(--mz-shadow);
}
html:not([data-mh="light"]) .mz-frame {
    box-shadow:
        0 0 0 1.5px var(--mz-gold) inset,
        0 0 0 0.3rem rgba(255, 255, 255, 0.04) inset,
        0 0 0 calc(0.3rem + 1px) var(--mz-gold-2) inset,
        var(--mz-shadow);
}

/* Scrollbars follow the theme (owner's standing rule). */
html { scrollbar-color: var(--mz-gold) transparent; scrollbar-width: thin; scroll-padding-top: 7rem; }
::-webkit-scrollbar { width: 0.55rem; height: 0.55rem; }
::-webkit-scrollbar-thumb { background: var(--mz-gold-2); border-radius: 1rem; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ vines */

.mz-vine {
    position: absolute;
    top: 4.4rem;
    width: clamp(7rem, 11vw, 12rem);
    height: auto;
    z-index: 40;
    pointer-events: none;
    filter: drop-shadow(0 0.4rem 0.6rem rgba(74, 55, 96, 0.18));
}
.mz-vine--l { left: -1.2rem; }
.mz-vine--r { right: -1.2rem; }
body.has-promo .mz-vine { top: 7.1rem; }
@media (max-width: 64rem) { .mz-vine { display: none; } }

/* ------------------------------------------------------------------ promo ribbon */

.promo {
    position: relative;
    z-index: 61;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem 1.4rem;
    flex-wrap: wrap;
    padding: 0.55rem 3.2rem;
    background:
        linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%),
        linear-gradient(90deg, #F2D7E6, #E8D9F4 50%, #F2D7E6);
    border-bottom: 1px solid var(--mz-gold);
    color: var(--mz-plum);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.12rem;
    font-weight: 600;
    text-align: center;
}
.promo[hidden] { display: none; }
.promo__deco { color: var(--mz-gold); letter-spacing: 0.3em; }
.promo__title { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: 1.7rem; line-height: 1; }
.promo__until { color: var(--mz-soft); font-size: 0.95rem; font-weight: 500; }
.promo__x {
    position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem; border: 0; border-radius: 50%;
    background: transparent; color: var(--mz-plum); cursor: pointer;
    display: grid; place-items: center;
}
.promo__x:hover { background: rgba(94, 72, 118, 0.1); }
.promo__x .ic { width: 1.1rem; height: 1.1rem; }
html:not([data-mh="light"]) .promo { background: linear-gradient(90deg, #3E2D52, #4C3460 50%, #3E2D52); color: #F6EAF8; }
html:not([data-mh="light"]) .promo__x { color: #F6EAF8; }

/* The code chip, shared by the ribbon and the popup. */
.mz-code {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0.35rem 0.28rem 0.9rem;
    border: 1.5px dashed var(--mz-gold);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.75);
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--mz-plum);
}
html:not([data-mh="light"]) .mz-code { background: rgba(0, 0, 0, 0.2); color: #F6EAF8; }
.mz-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border: 0;
    border-radius: 0.45rem;
    background: var(--mz-plum);
    color: #FFF8FC;
    font: 600 0.82rem/1 'EB Garamond', serif;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s;
}
.mz-copy:hover { background: var(--mz-plum-2); }
.mz-copy.is-done { background: #5E8A6E; }
.mz-copy .ic { width: 0.95rem; height: 0.95rem; }

/* ------------------------------------------------------------------ header */

.mz-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: linear-gradient(180deg, #57426E, #6A5384);
    box-shadow: 0 -1px 0 var(--mz-gold) inset, 0 0.6rem 1.4rem -1rem rgba(46, 32, 64, 0.7);
    color: #FFF6FB;
    transition: box-shadow 0.3s;
}
html:not([data-mh="light"]) .mz-nav { background: linear-gradient(180deg, #241A31, #33264A); }
.mz-nav__in {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: min(100% - 2 * clamp(1rem, 3vw, 3rem), 92rem);
    margin-inline: auto;
    min-height: 5.6rem;
}
.mz-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #FFF6FB;
    text-decoration: none;
    margin-right: auto;
    flex: none;
}
.mz-brand__mark { width: 4.4rem; height: 4.4rem; object-fit: contain; filter: drop-shadow(0 0 0.6rem rgba(231, 208, 161, 0.35)); }
.mz-brand__text { display: flex; flex-direction: column; line-height: 1; }
.mz-brand__word { font-family: 'Pinyon Script', cursive; font-size: 2.85rem; line-height: 0.95; padding-right: 0.3rem; }
.mz-brand__sub { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.42em; color: var(--mz-gold-2); margin: 0.05rem 0 0 2.6rem; text-transform: uppercase; }

.mz-links { display: flex; align-items: center; gap: 0.3rem; }
.mz-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    padding: 0.5rem 1.05rem 0.45rem;
    border-radius: 0.8rem;
    color: #FFF6FB;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.16rem;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s, box-shadow 0.2s;
}
.mz-link .ic { width: 1.45rem; height: 1.45rem; stroke-width: 1.5; opacity: 0.95; }
.mz-link:hover { background: rgba(255, 255, 255, 0.08); }
.mz-link.is-active {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 1px var(--mz-gold-2) inset, 0 0 1.1rem rgba(231, 208, 161, 0.3);
}
.mz-link.is-active::before {
    content: "";
    position: absolute;
    top: -0.45rem;
    left: 50%;
    width: 0.7rem;
    height: 0.7rem;
    transform: translateX(-50%);
    border-radius: 50%;
    box-shadow: inset -0.22rem 0.05rem 0 0 var(--mz-gold-2);
}
.mz-caret { font-size: 0.75rem; opacity: 0.8; }

.mz-tools { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.mz-tool {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1.5px solid rgba(231, 208, 161, 0.75);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #FFF6FB;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.mz-tool:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
.mz-tool .ic { width: 1.25rem; height: 1.25rem; }
.mz-tool.themeswitch .themeswitch__sun { display: none; }
html:not([data-mh="light"]) .mz-tool.themeswitch .themeswitch__sun { display: block; }
html:not([data-mh="light"]) .mz-tool.themeswitch .themeswitch__moon { display: none; }
.mz-tool .cartbtn__n {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 1rem;
    background: var(--mz-blush);
    color: var(--mz-plum);
    font: 700 0.75rem/1.3rem 'EB Garamond', serif;
    text-align: center;
    box-shadow: 0 0 0 1px var(--mz-gold);
}
html:not([data-mh="light"]) .mz-tool .cartbtn__n { background: #F2D7E6; color: #3A2B4E; }
.mz-burger { display: none; }
.mz-burger span { display: block; width: 1.15rem; height: 1.5px; background: currentColor; margin: 0.14rem auto; border-radius: 1px; }

/* The Goods menu - the list main.js writes into #shopMenu. */
.mz-nav .drop { position: relative; }
.mz-nav .drop__menu {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 50%;
    transform: translate(-50%, -0.4rem);
    width: 22rem;
    padding: 0.6rem;
    border-radius: var(--r-lg);
    background: var(--sheet-pop);
    box-shadow: 0 0 0 1.5px var(--mz-gold) inset, 0 1.4rem 2.4rem -1.2rem rgba(46, 32, 64, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.mz-nav .drop__menu.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mz-nav .drop__item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.6rem;
    background: none;
    color: var(--mz-ink);
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.mz-nav .drop__item:hover { background: var(--mz-lav); }
.mz-nav .drop__icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--mz-blush); color: var(--mz-plum); flex: none; }
.mz-nav .drop__icon .ic { width: 1.1rem; height: 1.1rem; }
.mz-nav .drop__label { display: flex; flex-direction: column; flex: 1; line-height: 1.15; }
.mz-nav .drop__name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.1rem; color: var(--mz-plum); }
html:not([data-mh="light"]) .mz-nav .drop__name { color: #F6EAF8; }
.mz-nav .drop__sub { font-size: 0.88rem; color: var(--mz-soft); }
.mz-nav .drop__count { font-size: 0.85rem; color: var(--mz-soft); }

@media (max-width: 75rem) {
    .mz-link { padding-inline: 0.7rem; font-size: 1.05rem; }
    .mz-brand__word { font-size: 2.4rem; }
}
@media (max-width: 64rem) {
    .mz-burger { display: grid; }
    .mz-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        padding: 0.8rem clamp(1rem, 4vw, 2rem) 1.2rem;
        background: linear-gradient(180deg, #6A5384, #5E4876);
        border-bottom: 1px solid var(--mz-gold);
        display: none;
    }
    .mz-links.is-open { display: flex; }
    .mz-link { flex-direction: row; gap: 0.8rem; padding: 0.8rem 1rem; font-size: 1.2rem; }
    .mz-link.is-active::before { display: none; }
    .mz-nav .drop__menu { display: none; }
    .mz-brand__mark { width: 3.4rem; height: 3.4rem; }
    .mz-brand__word { font-size: 2.1rem; }
    .mz-brand__sub { margin-left: 2rem; font-size: 0.68rem; }
    .mz-nav__in { min-height: 4.6rem; gap: 0.8rem; }
    .mz-tool { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 26rem) {
    .mz-tools .mz-tool[data-focus-search] { display: none; }
}

/* ------------------------------------------------------------------ hero */

.mz-hero {
    position: relative;
    min-height: clamp(26rem, 38vw, 36rem);
    overflow: hidden;
}
.mz-hero__art {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(100%, 78rem);
    background: url('/assets/img/art/hero.webp') right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 18%, #000 42%), linear-gradient(0deg, transparent 0%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 18%, #000 42%), linear-gradient(0deg, transparent 0%, #000 14%);
    mask-composite: intersect;
}
.mz-hero__in { position: relative; display: flex; align-items: center; min-height: inherit; }
.mz-hero__copy {
    width: min(100%, 34rem);
    padding: 2.5rem 0 3.5rem;
    text-align: center;
}
.mz-eyebrow {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.86rem;
    color: var(--mz-soft);
}
.mz-h1 {
    margin-top: 0.8rem;
    font-size: clamp(2.5rem, 4.3vw, 3.7rem);
    line-height: 1;
    color: var(--mz-plum);
}
.mz-h1 .mz-script {
    display: block;
    font-size: 1.42em;
    line-height: 1.15;
    white-space: nowrap;
    color: #6E4E8C;
}
html:not([data-mh="light"]) .mz-h1 .mz-script { color: #E8CFF0; }
.mz-lede {
    margin: 0.9rem auto 0;
    max-width: 30rem;
    font-size: 1.22rem;
    line-height: 1.5;
    color: var(--mz-ink);
}
.mz-lede--center { text-align: center; margin-bottom: 1.6rem; color: var(--mz-soft); }
.mz-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 1.6rem; }

/* The plaque buttons: pointed ends, a gold edge, plum or paper inside. */
.mz-btn {
    --edge: var(--mz-gold);
    --fill: linear-gradient(180deg, #77608F, #574170);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.9rem;
    color: #FFF8FC;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.22rem;
    line-height: 1;
    clip-path: polygon(0.95rem 0, calc(100% - 0.95rem) 0, 100% 50%, calc(100% - 0.95rem) 100%, 0.95rem 100%, 0 50%);
    background: var(--edge);
    isolation: isolate;
    transition: transform 0.2s, filter 0.2s;
}
.mz-btn::before {
    content: "";
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    clip-path: inherit;
    background: var(--fill);
}
.mz-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.mz-btn .ic { width: 1.1rem; height: 1.1rem; }
.mz-btn--light { --fill: linear-gradient(180deg, #FFFBFD, #F2E4EE); color: var(--mz-plum); }

/* ------------------------------------------------------------------ phases + promise */

.mz-phases {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin: -0.6rem auto 1.1rem;
    position: relative;
}
.mz-phases::before, .mz-phases::after {
    content: "";
    width: min(28vw, 22rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mz-gold));
}
.mz-phases::after { background: linear-gradient(90deg, var(--mz-gold), transparent); }
.mz-phases i { width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1px solid var(--mz-gold); }
.mz-phases .p1 { box-shadow: inset 0.3rem 0 0 0 var(--mz-gold); }
.mz-phases .p2 { box-shadow: inset 0.2rem -0.05rem 0 0 var(--mz-gold); width: 1.1rem; height: 1.1rem; }
.mz-phases .p3 { background: radial-gradient(circle at 40% 40%, #FFF6E2, var(--mz-gold)); width: 1.35rem; height: 1.35rem; box-shadow: 0 0 0.9rem rgba(198, 162, 106, 0.6); }
.mz-phases .p4 { box-shadow: inset -0.2rem -0.05rem 0 0 var(--mz-gold); width: 1.1rem; height: 1.1rem; }
.mz-phases .p5 { box-shadow: inset -0.3rem 0 0 0 var(--mz-gold); }

.mz-promise {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
    margin: 0;
    padding: 1rem 1.8rem;
    list-style: none;
    border-radius: 3rem;
    background: var(--mz-card);
}
.mz-promise li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.12;
    color: var(--mz-plum);
}
html:not([data-mh="light"]) .mz-promise li { color: #F3E6F6; }
.mz-promise .ic { width: 1.8rem; height: 1.8rem; flex: none; stroke-width: 1.3; color: var(--mz-plum); }
html:not([data-mh="light"]) .mz-promise .ic { color: var(--mz-gold); }
.mz-promise li + li { border-left: 1px solid rgba(198, 162, 106, 0.45); padding-left: 0.9rem; }
@media (max-width: 75rem) {
    .mz-promise { grid-template-columns: repeat(3, 1fr); border-radius: var(--r-lg); row-gap: 1rem; }
    .mz-promise li:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 40rem) {
    .mz-promise { grid-template-columns: repeat(2, 1fr); }
    .mz-promise li { border-left: 0 !important; padding-left: 0 !important; }
}

/* ------------------------------------------------------------------ home */

.mz-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin: 0 0 1.3rem;
    font-size: clamp(2.4rem, 3.6vw, 3.2rem);
    font-weight: 400;
    line-height: 1.2;
    color: #7A4F86;
}
html:not([data-mh="light"]) .mz-title { color: #EBCDEF; }
.mz-title::before, .mz-title::after {
    content: "\2726";
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    color: var(--mz-gold);
    padding: 0 0 0 4.5rem;
    background: linear-gradient(90deg, transparent, var(--mz-gold)) left center / 4rem 1px no-repeat;
}
.mz-title::after { padding: 0 4.5rem 0 0; background: linear-gradient(90deg, var(--mz-gold), transparent) right center / 4rem 1px no-repeat; }

.mz-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 2rem;
    align-items: start;
    margin-top: 2.6rem;
}
@media (max-width: 75rem) { .mz-home { grid-template-columns: 1fr; } }

.mz-coll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 52rem) { .mz-coll { grid-template-columns: repeat(2, 1fr); } }
.mz-cat {
    display: grid;
    grid-template-columns: 1fr 7.5rem;
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 0.4rem;
    padding: 1.15rem 0.9rem 1.05rem 1.25rem;
    min-height: 8.6rem;
    background: linear-gradient(140deg, var(--tint, var(--mz-lav)), rgba(255, 255, 255, 0.7));
    color: var(--mz-ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}
html:not([data-mh="light"]) .mz-cat { background: linear-gradient(140deg, #3D2E54, #33264A); color: var(--mz-ink); }
.mz-cat img {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 7.5rem;
    height: 7.5rem;
    object-fit: contain;
    align-self: center;
    transition: transform 0.35s;
    filter: drop-shadow(0 0.4rem 0.5rem rgba(74, 55, 96, 0.18));
}
.mz-cat b { grid-column: 1; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.42rem; line-height: 1.05; color: var(--mz-plum); }
html:not([data-mh="light"]) .mz-cat b { color: #F6EAF8; }
.mz-cat span { grid-column: 1; margin-top: 0.35rem; font-size: 1rem; line-height: 1.3; color: var(--mz-soft); }
.mz-cat:hover { transform: translateY(-3px); }
.mz-cat:hover img { transform: scale(1.07) rotate(-2deg); }

.mz-short { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.1rem; }
@media (max-width: 52rem) { .mz-short { grid-template-columns: 1fr; } }
.mz-sc {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem 0.8rem 0.7rem;
    background: var(--mz-card);
    color: var(--mz-soft);
    text-decoration: none;
    font-size: 0.98rem;
    line-height: 1.25;
    transition: transform 0.25s;
}
.mz-sc img { width: 4.6rem; height: 4.6rem; object-fit: contain; flex: none; transition: transform 0.35s; }
.mz-sc span { display: flex; flex-direction: column; flex: 1; }
.mz-sc b { font-size: 1.62rem; line-height: 1.15; color: #7A4F86; }
html:not([data-mh="light"]) .mz-sc b { color: #EBCDEF; }
.mz-sc > .ic { width: 1.2rem; height: 1.2rem; color: var(--mz-plum); flex: none; }
html:not([data-mh="light"]) .mz-sc > .ic { color: var(--mz-gold); }
.mz-sc:hover { transform: translateY(-3px); }
.mz-sc:hover img { transform: scale(1.08); }

.mz-picks { padding: 2.3rem 1.2rem 1rem; background: var(--mz-card); margin-top: 4.6rem; }
@media (max-width: 75rem) { .mz-picks { margin-top: 2.4rem; } }
.mz-ribbon {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%) rotate(-2.5deg);
    padding: 0.2rem 1.5rem 0.35rem;
    white-space: nowrap;
    background: linear-gradient(180deg, #F6DCE8, #EBC8DA);
    border-radius: 0.4rem;
    box-shadow: 0 0 0 1px var(--mz-gold), 0 0.5rem 0.9rem -0.5rem rgba(74, 55, 96, 0.5);
}
.mz-ribbon::before, .mz-ribbon::after {
    content: "";
    position: absolute;
    top: 0.45rem;
    width: 1.1rem;
    height: 100%;
    background: #DDB3C9;
    z-index: -1;
}
.mz-ribbon::before { left: -0.7rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.mz-ribbon::after { right: -0.7rem; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.mz-ribbon .mz-script { font-size: 2rem; color: #7A4F86; }
.mz-pick {
    display: grid;
    grid-template-columns: 3.4rem 1fr auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0.2rem;
    border-bottom: 1px solid rgba(198, 162, 106, 0.35);
    color: var(--mz-ink);
    text-decoration: none;
}
.mz-pick__shot {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 0.6rem;
    background: linear-gradient(140deg, var(--mz-lav), var(--mz-blush));
    color: var(--mz-plum);
    box-shadow: 0 0 0 1px var(--mz-gold-2);
}
.mz-pick__shot .ic { width: 1.4rem; height: 1.4rem; }
.mz-pick__txt { display: flex; flex-direction: column; line-height: 1.15; }
.mz-pick__txt b { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--mz-plum); }
html:not([data-mh="light"]) .mz-pick__txt b { color: #F6EAF8; }
.mz-pick__txt small { margin-top: 0.2rem; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mz-soft); }
.mz-pick .price { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.15rem; color: var(--mz-plum); }
.mz-pick .price small { font-size: 0.75rem; font-family: 'EB Garamond', serif; font-weight: 400; color: var(--mz-soft); }
.mz-pick:hover .mz-pick__txt b { text-decoration: underline; text-decoration-color: var(--mz-gold); }
.mz-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding: 0.9rem 0 0.3rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--mz-plum);
    text-decoration: none;
}
html:not([data-mh="light"]) .mz-more { color: var(--mz-gold); }
.mz-more .ic { width: 1rem; height: 1rem; }

.mz-shelf { margin-top: 4rem; }

/* ------------------------------------------------------------------ shared pieces, repainted */

.card, .item.card, .value, .pillar, .legal, .doccard, .matrix-card, .strip__card, .explain__item, .service, .way {
    background: var(--mz-card) !important;
    border: 0 !important;
    border-radius: var(--r-lg) !important;
    box-shadow:
        0 0 0 1px var(--mz-gold-2) inset,
        var(--mz-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.item.card:hover { box-shadow: 0 0 0 1.5px var(--mz-gold) inset, 0 1.2rem 2rem -1.2rem rgba(74, 55, 96, 0.6) !important; transform: translateY(-3px); }
.item__shot {
    background: linear-gradient(140deg, var(--mz-lav), var(--mz-blush)) !important;
    border-radius: calc(var(--r-lg) - 0.35rem) !important;
    margin: 0.35rem;
}
html:not([data-mh="light"]) .item__shot { background: linear-gradient(140deg, #3F2E56, #4A3352) !important; }
.item__crest { color: var(--mz-plum); opacity: 0.5; }
.item__name { font-size: 1.45rem !important; }
.item__cat { font-family: 'Cormorant Garamond', serif; font-weight: 700; letter-spacing: 0.12em; color: var(--mz-soft) !important; }
.price { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--mz-plum) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html:not([data-mh="light"]) .price { color: var(--mz-gold) !important; }

/* Buttons everywhere else become small versions of the plaques' colours. */
.btn {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    font-size: 1.08rem;
    letter-spacing: 0.01em;
    border-radius: 0.65rem !important;
    box-shadow: none;
}
.btn--primary {
    background: linear-gradient(180deg, #77608F, #574170) !important;
    color: #FFF8FC !important;
    border: 1px solid var(--mz-gold) !important;
}
.btn--ghost {
    background: rgba(255, 252, 254, 0.75) !important;
    color: var(--mz-plum) !important;
    border: 1px solid var(--mz-gold) !important;
}
html:not([data-mh="light"]) .btn--ghost { background: rgba(255, 255, 255, 0.06) !important; color: #F6EAF8 !important; }
.btn::before, .btn::after { display: none !important; }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

.band h2 { font-family: 'Pinyon Script', cursive !important; font-weight: 400 !important; font-size: clamp(2.4rem, 3.6vw, 3.2rem) !important; color: #7A4F86 !important; text-transform: none !important; letter-spacing: 0 !important; }
html:not([data-mh="light"]) .band h2 { color: #EBCDEF !important; }
.band h2 .ic { color: var(--mz-gold); }
.band__sub { font-family: 'Cormorant Garamond', serif !important; font-size: 0.85rem !important; letter-spacing: 0.24em !important; }
.h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.tag { border-radius: 0.4rem !important; font-family: 'EB Garamond', serif; }

input, textarea, select {
    font-family: 'EB Garamond', serif !important;
    background: rgba(255, 252, 254, 0.85) !important;
    color: var(--mz-ink) !important;
    border: 1px solid var(--mz-gold-2) !important;
    border-radius: 0.6rem !important;
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(198, 162, 106, 0.55) !important; outline-offset: 1px; }
html:not([data-mh="light"]) :is(input, textarea, select) { background: rgba(0, 0, 0, 0.18) !important; }

[data-tip]::after { font-family: 'EB Garamond', serif !important; }

/* ------------------------------------------------------------------ cart, toast, chat, to-top */

.cartpanel {
    background: var(--mz-paper) url('/assets/img/art/paper.webp') !important;
    background-size: 37.5rem !important;
    box-shadow: 0 0 0 1.5px var(--mz-gold) inset, -1.2rem 0 3rem -1rem rgba(46, 32, 64, 0.45) !important;
}
html:not([data-mh="light"]) .cartpanel { background: var(--mz-paper) !important; }
.cartpanel__head h2 { font-family: 'Pinyon Script', cursive !important; font-weight: 400 !important; font-size: 2.3rem !important; color: #7A4F86 !important; }
.cartpanel__head h2 .ic { color: var(--mz-gold); }
.cartveil { background: rgba(46, 32, 64, 0.35) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cartnil { text-align: center; }
.cartnil__cat { display: block; width: 11rem; height: auto; margin: 0.5rem auto 0.8rem; }
.cartnil b { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--mz-plum); }

.toast {
    background: var(--mz-plum) !important;
    color: #FFF8FC !important;
    border: 1px solid var(--mz-gold) !important;
    font-family: 'EB Garamond', serif !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.chat__launcher {
    background: linear-gradient(180deg, #77608F, #574170) !important;
    color: #FFF8FC !important;
    border: 1px solid var(--mz-gold) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    box-shadow: 0 0.8rem 1.6rem -0.8rem rgba(46, 32, 64, 0.7) !important;
}
.chat__panel {
    background: var(--mz-paper) !important;
    box-shadow: 0 0 0 1.5px var(--mz-gold) inset, 0 1.5rem 3rem -1rem rgba(46, 32, 64, 0.5) !important;
}
.chat__head { background: linear-gradient(180deg, #57426E, #6A5384) !important; color: #FFF6FB !important; }
.chat__head b { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; }
.totop, .cartpeek {
    background: linear-gradient(180deg, #77608F, #574170) !important;
    color: #FFF8FC !important;
    border: 1px solid var(--mz-gold) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ------------------------------------------------------------------ discount popup */

.promopop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    background: rgba(46, 32, 64, 0.42);
    opacity: 0;
    transition: opacity 0.3s;
}
.promopop[hidden] { display: none; }
.promopop.is-in { opacity: 1; }
.promopop__card {
    position: relative;
    width: min(100%, 30rem);
    padding: 2.2rem 2rem 1.8rem;
    text-align: center;
    background: var(--mz-paper) url('/assets/img/art/paper.webp');
    background-size: 37.5rem;
    transform: translateY(0.8rem) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html:not([data-mh="light"]) .promopop__card { background: var(--mz-paper); }
.promopop.is-in .promopop__card { transform: none; }
.promopop__art { width: 8.5rem; height: auto; margin: -5.6rem auto 0.3rem; display: block; filter: drop-shadow(0 0.6rem 0.8rem rgba(74, 55, 96, 0.3)); }
.promopop__title { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: 2.8rem; line-height: 1.1; color: #7A4F86; }
html:not([data-mh="light"]) .promopop__title { color: #EBCDEF; }
.promopop__text { margin: 0.5rem 0 1.2rem; font-size: 1.15rem; line-height: 1.45; color: var(--mz-ink); }
.promopop__small { margin-top: 1rem; font-size: 0.92rem; color: var(--mz-soft); }
.promopop__x {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mz-plum);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.promopop__x:hover { background: var(--mz-lav); }
.promopop__x .ic { width: 1.2rem; height: 1.2rem; }
.promopop .mz-btns { margin-top: 1.3rem; }
.promopop .mz-code { font-size: 1.2rem; }

/* ------------------------------------------------------------------ footer */

.mz-foot { position: relative; margin-top: 5rem; }
.mz-foot__cards {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.2rem, 22vw, 26rem);
}
@media (max-width: 64rem) { .mz-foot__cards { grid-template-columns: 1fr; gap: 1.2rem; } }
.mz-fcard {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.3rem 1rem 0.6rem;
    background: var(--mz-card);
    color: var(--mz-ink);
    text-decoration: none;
    line-height: 1.4;
    transition: transform 0.25s;
}
.mz-fcard img { width: 8.5rem; height: auto; flex: none; margin: -2.2rem 0 -0.8rem; filter: drop-shadow(0 0.5rem 0.6rem rgba(74, 55, 96, 0.22)); }
.mz-fcard span { display: flex; flex-direction: column; }
.mz-fcard b { font-size: 2rem; line-height: 1.15; color: #7A4F86; }
html:not([data-mh="light"]) .mz-fcard b { color: #EBCDEF; }
.mz-fcard:hover { transform: translateY(-3px); }
.mz-foot__sky {
    display: block;
    width: min(100%, 64rem);
    height: auto;
    margin: -6.5rem auto -1px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 64rem) { .mz-foot__sky { margin-top: -1rem; } }
.mz-foot__band {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #5E4876, #4A3760);
    box-shadow: 0 1px 0 var(--mz-gold) inset;
    color: #EADCF0;
    padding: 2.6rem 0 1.4rem;
}
html:not([data-mh="light"]) .mz-foot__band { background: linear-gradient(180deg, #2C2040, #211830); }
.mz-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 52rem) { .mz-foot__grid { grid-template-columns: 1fr 1fr; } .mz-foot__brand { grid-column: 1 / -1; } }
.mz-foot__brand .mz-brand { margin: 0 0 0.8rem; }
.mz-foot__brand p { max-width: 26rem; font-size: 1.02rem; line-height: 1.5; color: #E2D2EA; }
.mz-foot__brand p .ic { width: 0.95rem; height: 0.95rem; color: #F2B8D2; vertical-align: -0.1em; }
.mz-socials { display: flex; gap: 0.55rem; margin-top: 1rem; }
.mz-social {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid rgba(231, 208, 161, 0.6);
    color: #FFF6FB;
    transition: background 0.2s;
}
.mz-social:hover { background: rgba(255, 255, 255, 0.12); }
.mz-social .ic { width: 1.1rem; height: 1.1rem; }
.mz-foot__col { display: flex; flex-direction: column; gap: 0.45rem; }
.mz-foot__col h4 { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: 1.9rem; color: var(--mz-gold-2); margin-bottom: 0.2rem; }
.mz-foot__col a { color: #EADCF0; text-decoration: none; font-size: 1.05rem; }
.mz-foot__col a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--mz-gold); }
.mz-foot__law {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 1.4rem;
    margin-top: 2rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(231, 208, 161, 0.3);
    font-size: 0.92rem;
    color: #C9B6D6;
}
.mz-foot__law a { color: #E6D6EE; margin-left: 1.1rem; text-decoration: none; }
.mz-foot__law a:hover { text-decoration: underline; }

/* The old site put content under a fixed header; this header is sticky, so
   the pages start right below it. */
.section--top { padding-top: clamp(3rem, 7vh, 4.5rem) !important; }
main { padding-top: 0 !important; }

@media (prefers-reduced-motion: reduce) {
    .mz-cat, .mz-sc, .mz-fcard, .mz-btn, .mz-cat img, .mz-sc img { transition: none !important; }
}

/* =====================================================================
   Round 2 (owner, same day): the first picture's plaque nav, filigree
   boxes with the art spilling out, the torn note with the wax seal, and
   vines big enough to frame the hero.
   ===================================================================== */

/* --- the gold filigree frame (9-slice) --- */
.mz-fili {
    border: 1.35rem solid transparent;
    border-image: url('/assets/img/art/frame.svg') 40 / 1.35rem / 0 stretch;
    border-radius: 0;
    box-shadow: none !important;
    filter: drop-shadow(0 0.7rem 0.9rem rgba(74, 55, 96, 0.16));
}

/* --- plaque nav --- */
.mz-nav {
    background:
        radial-gradient(ellipse 40% 140% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(80, 60, 104, 0.97), rgba(104, 80, 130, 0.95));
}
/* the valance: a soft scalloped drape hanging under the bar */
.mz-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.75rem;
    background:
        radial-gradient(circle at 50% 0, rgba(104, 80, 130, 0.95) 0.62rem, transparent 0.66rem) 0 0 / 1.6rem 0.75rem repeat-x;
    filter: drop-shadow(0 1px 0 var(--mz-gold));
    pointer-events: none;
}
html:not([data-mh="light"]) .mz-nav::after { background: radial-gradient(circle at 50% 0, #33264A 0.62rem, transparent 0.66rem) 0 0 / 1.6rem 0.75rem repeat-x; }
.mz-links { gap: 0.75rem; }
.mz-link .ic { display: none; }
.mz-link {
    flex-direction: row;
    padding: 0.62rem 1.55rem;
    font-size: 1.22rem;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    isolation: isolate;
}
.mz-link::after,
.mz-link > span::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    clip-path: polygon(0.8rem 0, calc(100% - 0.8rem) 0, 100% 50%, calc(100% - 0.8rem) 100%, 0.8rem 100%, 0 50%);
    background: var(--mz-gold);
}
.mz-link > span::after {
    z-index: -1;
    inset: 1.5px;
    background: linear-gradient(180deg, #7C6596, #5C4675);
    transition: background 0.2s;
}
.mz-link:hover > span::after { background: linear-gradient(180deg, #8A72A5, #67507F); }
.mz-link.is-active > span::after { background: linear-gradient(180deg, #FFF8FC, #EFDDEA); }
.mz-link.is-active { color: var(--mz-plum); }
.mz-link.is-active::before {
    top: -0.62rem;
    width: 0.8rem;
    height: 0.8rem;
    z-index: 1;
}
.mz-link > span { position: static; }
@media (max-width: 64rem) {
    .mz-link { padding: 0.75rem 1.4rem; }
    .mz-links { gap: 0.5rem; }
}

/* --- collection boxes, first picture --- */
.mz-coll { gap: 1.4rem; }
.mz-cat.mz-frame { box-shadow: none; border-radius: 0; }
.mz-cat {
    border: 1.35rem solid transparent;
    border-image: url('/assets/img/art/frame.svg') 40 / 1.35rem / 0 stretch;
    padding: 0.3rem 0.2rem 0.2rem 0.35rem;
    min-height: 11.5rem;
    grid-template-columns: 1fr 8.5rem;
    overflow: visible;
    background:
        radial-gradient(ellipse at 85% 80%, rgba(255, 255, 255, 0.85), transparent 60%),
        linear-gradient(150deg, var(--tint, var(--mz-lav)), color-mix(in srgb, var(--tint, #EFE3F6) 70%, #fff));
    background-clip: padding-box;
    filter: drop-shadow(0 0.8rem 1rem rgba(74, 55, 96, 0.18));
}
.mz-cat > .ic { width: 1.9rem; height: 1.9rem; color: var(--mz-plum); stroke-width: 1.4; margin-bottom: 0.4rem; grid-column: 1; }
.mz-cat img {
    width: 11rem;
    height: 11rem;
    margin: -2.6rem -2.6rem -2.4rem -2rem;
    justify-self: end;
    filter: drop-shadow(0 0.6rem 0.7rem rgba(74, 55, 96, 0.28));
}
.mz-cat b { font-size: 1.55rem; }
.mz-cat span { font-size: 1.04rem; }
.mz-cat:hover { transform: translateY(-4px); }
html:not([data-mh="light"]) .mz-cat {
    background: linear-gradient(150deg, #43325C, #34274A);
    background-clip: padding-box;
}

/* --- note from the moonie + shortcuts --- */
.mz-noterow {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 2.4rem;
    align-items: center;
    margin-top: 3.6rem;
}
@media (max-width: 64rem) { .mz-noterow { grid-template-columns: 1fr; } }
.mz-noterow .mz-short { grid-template-columns: 1fr; margin: 0; gap: 1rem; }
.mz-note {
    position: relative;
    padding: 2.2rem 2.4rem 1.8rem 9rem;
    transform: rotate(-2.2deg);
    color: #5A4A62;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.7), transparent 60%),
        linear-gradient(160deg, #FBF2EA, #F2E1D8);
    clip-path: polygon(0 3%, 4% 0, 12% 2%, 21% 0, 33% 1.6%, 46% 0, 58% 2%, 71% 0.4%, 84% 2.2%, 93% 0, 100% 2%, 99% 14%, 100% 31%, 98.8% 50%, 100% 68%, 99% 86%, 100% 98%, 90% 100%, 78% 98.2%, 64% 100%, 50% 98.4%, 36% 100%, 22% 98%, 9% 100%, 0 97.5%, 1% 82%, 0 64%, 1.2% 46%, 0 28%, 0.8% 12%);
    filter: drop-shadow(0 1rem 1.2rem rgba(74, 55, 96, 0.25));
}
html:not([data-mh="light"]) .mz-note { background: linear-gradient(160deg, #F4E6E0, #E8D3CC); }
.mz-note__seal {
    position: absolute;
    left: 1.6rem;
    top: 50%;
    width: 6.4rem;
    height: auto;
    transform: translateY(-50%) rotate(-6deg);
    filter: drop-shadow(0 0.4rem 0.5rem rgba(74, 55, 96, 0.3));
}
.mz-note h2 { font-size: 2.6rem; font-weight: 400; line-height: 1.1; color: #7A4F86 !important; }
.mz-note p { margin-top: 0.6rem; font-size: 1.14rem; line-height: 1.55; }
.mz-note .mz-note__sign { text-align: right; font-size: 2rem; color: #7A4F86; margin-top: 0.2rem; }
@media (max-width: 40rem) {
    .mz-note { padding: 6.5rem 1.6rem 1.6rem; }
    .mz-note__seal { top: 1rem; left: 50%; transform: translateX(-50%); width: 5rem; }
}

/* --- picks + shortcut + footer boxes get the filigree too --- */
.mz-picks.mz-frame,
.mz-sc.mz-frame,
.mz-fcard.mz-frame {
    border: 1.35rem solid transparent;
    border-image: url('/assets/img/art/frame.svg') 40 / 1.35rem / 0 stretch;
    border-radius: 0;
    box-shadow: none;
    background-clip: padding-box;
    filter: drop-shadow(0 0.7rem 0.9rem rgba(74, 55, 96, 0.16));
}
.mz-picks.mz-frame { padding: 1.4rem 0.3rem 0.2rem; }
.mz-picks .mz-ribbon { top: -2.6rem; }
.mz-sc.mz-frame { padding: 0.1rem 0.2rem 0.1rem 0; background-color: rgba(255, 252, 254, 0.8); }
.mz-sc img { width: 5.4rem; height: 5.4rem; margin: -1.6rem 0 -1.4rem -1.2rem; }
.mz-fcard.mz-frame { padding: 0.2rem 0.4rem 0.2rem 0; background-color: rgba(255, 252, 254, 0.85); }
.mz-fcard img { width: 10rem; margin: -2.8rem 0 -1.8rem -1.6rem; }
html:not([data-mh="light"]) :is(.mz-sc, .mz-fcard, .mz-picks).mz-frame { background-color: rgba(52, 39, 70, 0.9); }

/* --- vines: big enough to frame the hero --- */
.mz-vine {
    top: 4.2rem;
    width: clamp(10rem, 17vw, 19rem);
    z-index: 55;
}
.mz-vine--l { left: -2.2rem; }
.mz-vine--r { right: -2.2rem; }
.mz-hero__copy { padding-left: clamp(0rem, 6vw, 6rem); }

/* =====================================================================
   Round 3: the collection boxes exactly as the first picture draws them -
   wide, glossy white rim, watercolour fill, a thin rose ornament line
   inside, icon + title + text centred, the art leaning in from the right
   and spilling over the edge. Picks moved down beside the note.
   ===================================================================== */

.mz-home { grid-template-columns: 1fr; }
.mz-coll { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.8rem; }
@media (max-width: 64rem) { .mz-coll { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .mz-coll { grid-template-columns: 1fr; } }

.mz-cat,
html:not([data-mh="light"]) .mz-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 11.8rem;
    padding: 1.4rem 44% 1.4rem 1.6rem;
    border: 0;
    border-image: none;
    border-radius: 1.2rem;
    overflow: visible;
    filter: none;
    background:
        radial-gradient(ellipse 60% 70% at 18% 20%, rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(ellipse 50% 60% at 75% 85%, color-mix(in srgb, var(--tint) 60%, #D9B8DA), transparent 75%),
        linear-gradient(160deg, var(--tint), color-mix(in srgb, var(--tint) 75%, #E6CBE3)),
        url('/assets/img/art/paper.webp');
    background-size: auto, auto, auto, 37.5rem;
    box-shadow:
        0 0 0 0.32rem rgba(255, 255, 255, 0.82),
        0 0 0 calc(0.32rem + 1px) color-mix(in srgb, var(--tint) 55%, #B98FB5),
        0 1rem 1.6rem -0.9rem rgba(110, 70, 120, 0.45);
    color: var(--title, var(--mz-plum));
}
.mz-cat::before {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border: 0.85rem solid transparent;
    border-image: url('/assets/img/art/frame-rose.svg') 40 / 0.85rem / 0 stretch;
    pointer-events: none;
    opacity: 0.9;
}
.mz-cat > .ic {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0 0.35rem;
    color: var(--title, var(--mz-plum));
    stroke-width: 1.5;
}
.mz-cat b,
html:not([data-mh="light"]) .mz-cat b {
    grid-column: auto;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 1.9vw, 1.85rem);
    line-height: 1.05;
    color: var(--title, var(--mz-plum));
}
.mz-cat span {
    margin-top: 0.4rem;
    font-size: 1.1rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--title, #4E3768) 80%, #000);
}
.mz-cat img {
    position: absolute;
    right: -1.1rem;
    bottom: -1.3rem;
    width: 52%;
    height: auto;
    max-height: 128%;
    object-fit: contain;
    object-position: bottom right;
    margin: 0;
    z-index: 2;
    filter: drop-shadow(0 0.6rem 0.6rem rgba(110, 70, 120, 0.25));
}
.mz-cat:hover img { transform: scale(1.05) rotate(-2deg); }
html:not([data-mh="light"]) .mz-cat { --tint: #4A3762 !important; color: #F6EAF8; }
html:not([data-mh="light"]) .mz-cat :is(b, span, .ic) { color: #F6EAF8; }

/* note | shortcuts | picks */
.mz-noterow { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.95fr); gap: 2.2rem; align-items: start; margin-top: 4.4rem; }
@media (max-width: 75rem) { .mz-noterow { grid-template-columns: 1fr 1fr; } .mz-note { grid-column: 1 / -1; } }
@media (max-width: 52rem) { .mz-noterow { grid-template-columns: 1fr; } }
.mz-noterow .mz-picks { margin-top: 1.8rem; }
.mz-note { margin-top: 1.2rem; }

/* vines at the size they were painted for: a corner piece across the top
   and a long trail down the side of the hero */
.mz-vine { width: clamp(14rem, 22vw, 24rem); top: 5rem; }
.mz-vine--l { left: -0.4rem; }
.mz-vine--r { right: -0.4rem; }
.mz-hero__copy { padding-left: clamp(0rem, 9vw, 10rem); }

/* Round 3 fixes */
.mz-cat.mz-frame {
    border-radius: 1.2rem;
    box-shadow:
        0 0 0 0.32rem rgba(255, 255, 255, 0.85),
        0 0 0 calc(0.32rem + 1px) color-mix(in srgb, var(--tint) 50%, #B98FB5),
        0 1rem 1.6rem -0.9rem rgba(110, 70, 120, 0.45);
}
.mz-hero__art { width: min(100%, 72rem); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 16%, #000 36%), linear-gradient(0deg, transparent 0%, #000 14%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 16%, #000 36%), linear-gradient(0deg, transparent 0%, #000 14%); }
.mz-hero__copy { width: min(100%, 31rem); padding-left: clamp(0rem, 5vw, 6rem); }
@media (max-width: 64rem) {
    .mz-hero__art { width: 100%; opacity: 0.35; }
    .mz-hero__copy { margin-inline: auto; padding-left: 0; }
}
.mz-tool.themeswitch .ic { position: static; opacity: 1; transform: none; visibility: visible; width: 1.25rem; height: 1.25rem; }
@media (min-width: 64.01rem) {
    .mz-hero__copy { width: min(100%, 33rem); padding-left: clamp(0rem, 10vw, 11rem); }
    .mz-hero__art { width: min(100%, 66rem); }
}

/* =====================================================================
   Round 4: the second picture's nav. Icon over label, the active page in
   a glowing gold octagon with small ornaments, thin glowing gold rings
   on the round buttons, a wavy gold edge with diamonds under the bar.
   Replaces the round-2 plaques.
   ===================================================================== */

.mz-nav {
    background:
        radial-gradient(ellipse 30% 120% at 8% 50%, rgba(255, 220, 245, 0.10), transparent 70%),
        radial-gradient(ellipse 40% 140% at 60% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
        linear-gradient(180deg, #4E3966 0%, #5F4879 70%, #66507F 100%);
    box-shadow: 0 0.8rem 1.6rem -1rem rgba(40, 26, 58, 0.75);
}
html:not([data-mh="light"]) .mz-nav { background: linear-gradient(180deg, #221830, #2E2242); }
.mz-nav::after {
    top: calc(100% - 0.5rem);
    height: 1.1rem;
    background: url('/assets/img/art/navwave.svg') 0 0 / 15rem 100% repeat-x;
    filter: drop-shadow(0 0 0.25rem rgba(240, 210, 150, 0.55));
}
html:not([data-mh="light"]) .mz-nav::after { background: url('/assets/img/art/navwave.svg') 0 0 / 15rem 100% repeat-x; }
.mz-nav__in { min-height: 6.4rem; }

.mz-brand__mark { width: 5.4rem; height: 5.4rem; margin: -0.3rem -0.4rem -0.3rem -0.6rem; filter: drop-shadow(0 0 0.9rem rgba(255, 226, 170, 0.55)); }
.mz-brand__word { font-size: 3.2rem; }
.mz-brand__sub { letter-spacing: 0.32em; font-size: 0.9rem; color: #F4E6EF; margin-left: 3rem; }

.mz-links { gap: 0.4rem; }
.mz-link {
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 1.25rem 0.7rem;
    font-size: 1.24rem;
    color: #FFF6FB !important;
}
.mz-link .ic { display: block; width: 1.75rem; height: 1.75rem; stroke-width: 1.35; }
.mz-link::after, .mz-link > span::after { display: none; }
.mz-link > span { position: relative; }
.mz-link.is-active::before { display: none; }

/* the glowing octagon around the current page */
.mz-link.is-active {
    background: none !important;
    filter: drop-shadow(0 0 0.45rem rgba(255, 214, 160, 0.65));
}
.mz-link.is-active .ic { filter: drop-shadow(0 0 0.3rem rgba(255, 230, 190, 0.8)); }
.mz-link.is-active::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    --cut: 0.85rem;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut),
                       var(--cut) 0, calc(var(--cut) + 1.6px) 1.6px, 1.6px calc(var(--cut) + 0.6px), 1.6px calc(100% - var(--cut) - 0.6px), calc(var(--cut) + 0.6px) calc(100% - 1.6px), calc(100% - var(--cut) - 0.6px) calc(100% - 1.6px), calc(100% - 1.6px) calc(100% - var(--cut) - 0.6px), calc(100% - 1.6px) calc(var(--cut) + 0.6px), calc(100% - var(--cut) - 0.6px) 1.6px, calc(var(--cut) + 1.6px) 1.6px);
    background: linear-gradient(180deg, #FFE7B8, #E0B676 50%, #FFE7B8);
}
.mz-link.is-active > span::before,
.mz-link.is-active > span::after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    width: 0.45rem;
    height: 0.45rem;
    background: #FFE3AE;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 0 0 0.35rem rgba(255, 220, 160, 0.9);
}
.mz-link.is-active > span::before { top: auto; bottom: calc(100% + 2.65rem); }
.mz-link.is-active > span::after { inset: auto; top: calc(100% + 0.48rem); left: 50%; z-index: 1; clip-path: none; }
.mz-link:not(.is-active):hover { background: rgba(255, 255, 255, 0.07) !important; border-radius: 0.6rem; }

/* thin glowing gold rings with a little spark on top */
.mz-tools { gap: 0.85rem; }
.mz-tool {
    width: 3.3rem;
    height: 3.3rem;
    border: 1.3px solid #E3C489;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 70%);
    box-shadow: 0 0 0.6rem rgba(240, 205, 145, 0.35), inset 0 0 0.6rem rgba(240, 205, 145, 0.18);
}
.mz-tool::before {
    content: "\2726";
    position: absolute;
    top: -0.62rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    line-height: 1;
    color: #FFE3AE;
    text-shadow: 0 0 0.35rem rgba(255, 220, 160, 0.9);
}
.mz-tool .ic { width: 1.4rem; height: 1.4rem; stroke-width: 1.5; }
.mz-burger::before { display: none; }

@media (max-width: 75rem) { .mz-link { padding-inline: 0.8rem; font-size: 1.1rem; } .mz-brand__word { font-size: 2.7rem; } }
@media (max-width: 64rem) {
    .mz-link { flex-direction: row; gap: 0.8rem; }
    .mz-link.is-active > span::before, .mz-link.is-active > span::after { display: none; }
    .mz-nav__in { min-height: 5rem; }
    .mz-brand__mark { width: 4rem; height: 4rem; }
    .mz-tool { width: 2.6rem; height: 2.6rem; }
}
.mz-vine { top: 5.6rem; }
@media (min-width: 64.01rem) { .mz-hero__copy { width: min(100%, 36rem); padding-left: clamp(0rem, 7vw, 8rem); } }

/* =====================================================================
   Round 5 (final nav): sdf's see-through bar with the plaque buttons -
   dark plum cartouches with a gold edge, a gold crest on top and a curl
   below, the current page a glowing pink-lilac plaque under a crescent -
   plus the second picture's glowing round buttons on the right.
   ===================================================================== */

.mz-nav,
html:not([data-mh="light"]) .mz-nav {
    position: sticky;
    background:
        radial-gradient(ellipse 22% 160% at 30% 40%, rgba(160, 120, 180, 0.30), transparent 70%),
        radial-gradient(ellipse 26% 160% at 72% 30%, rgba(140, 100, 170, 0.28), transparent 70%),
        linear-gradient(180deg, rgba(62, 43, 84, 0.72), rgba(88, 64, 112, 0.58));
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    box-shadow: none;
}
/* the hero slides up under the bar, so the painting shows through it */
.mz-hero { margin-top: -6.4rem; padding-top: 6.4rem; }
.mz-vine { top: 0; z-index: 61; }
.mz-nav::after { top: calc(100% - 0.55rem); }

.mz-links { gap: 0.9rem; }
.mz-link,
.mz-link:not(.is-active):hover {
    flex-direction: row;
    gap: 0;
    height: 3rem;
    padding: 0 1.75rem;
    border: solid transparent;
    border-width: 0.75rem 1.125rem;
    border-image: url('/assets/img/art/plaque.svg') 12 18 fill / 0.75rem 1.125rem stretch;
    border-radius: 0;
    background: none !important;
    filter: none;
    font-size: 1.24rem;
    color: #FFF6FB !important;
    text-shadow: 0 1px 0.4rem rgba(40, 20, 60, 0.6);
    transition: transform 0.2s;
}
.mz-link { padding: 0 0.65rem; }
.mz-link:not(.is-active):hover { transform: translateY(-1px); }
.mz-link .ic { display: none; }
.mz-link.is-active::after { display: none; }
.mz-link.is-active {
    border-image-source: url('/assets/img/art/plaque-on.svg');
    color: #FFFFFF !important;
    text-shadow: 0 1px 0.4rem rgba(110, 60, 120, 0.7);
    filter: drop-shadow(0 0 0.7rem rgba(255, 210, 235, 0.55));
}
/* gold crest above, curl below; the current page gets a crescent instead */
.mz-link > span::before,
.mz-link > span::after,
.mz-link.is-active > span::before,
.mz-link.is-active > span::after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    box-shadow: none;
    clip-path: none;
    pointer-events: none;
}
.mz-link > span::before {
    top: auto;
    bottom: calc(100% + 0.62rem);
    width: 2.5rem;
    height: 1rem;
    background: url('/assets/img/art/crest.svg') center / contain no-repeat;
}
.mz-link > span::after {
    inset: auto;
    left: 50%;
    top: calc(100% + 0.6rem);
    width: 1.5rem;
    height: 0.62rem;
    background: url('/assets/img/art/curl.svg') center / contain no-repeat;
}
.mz-link.is-active > span::before {
    bottom: calc(100% + 0.55rem);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: none;
    box-shadow: inset -0.42rem 0.1rem 0 0 #FFE6B6;
    filter: drop-shadow(0 0 0.35rem rgba(255, 225, 170, 0.95));
    transform: translateX(-50%) rotate(-20deg);
}
.mz-caret { display: none; }

/* the second picture's round buttons stay: thin glowing gold rings */
.mz-tool::before { top: -0.6rem; }

@media (max-width: 75rem) { .mz-link { font-size: 1.1rem; } .mz-links { gap: 0.5rem; } }
@media (max-width: 64rem) {
    .mz-hero { margin-top: -5rem; padding-top: 5rem; }
    .mz-links { background: rgba(70, 50, 94, 0.97); gap: 1.6rem; padding-top: 1.6rem; align-items: center; }
    .mz-link { width: min(100%, 18rem); justify-content: center; }
}
.mz-vine { z-index: 59; top: 0; }
.mz-nav { z-index: 60; }

/* =====================================================================
   Round 6: the painted frames (owner's ChatGPT art, box-*.webp) carry the
   home page now, laid out like her "this" picture: collection boxes with
   the object on top and the name below, wide shortcut boxes with the
   object leaning out on the left, the picks panel hanging from its moon,
   and painted footer cards.
   ===================================================================== */

.mz-home { grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.2rem; }
@media (max-width: 75rem) { .mz-home { grid-template-columns: 1fr; } }

.mz-coll { grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1.3rem; }
@media (max-width: 52rem) { .mz-coll { grid-template-columns: repeat(2, 1fr); } }
.mz-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    aspect-ratio: 760 / 597;
    padding: 0 8% 9%;
    background: url('/assets/img/art/box-collection.webp') center / 100% 100% no-repeat;
    color: var(--mz-plum);
    text-decoration: none;
    filter: drop-shadow(0 0.7rem 0.8rem rgba(110, 70, 120, 0.22));
    transition: transform 0.25s;
}
.mz-box img {
    position: absolute;
    left: 50%;
    top: 4%;
    width: 64%;
    height: 66%;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 0.5rem 0.5rem rgba(110, 70, 120, 0.25));
    transition: transform 0.35s;
}
.mz-box b {
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    line-height: 1.05;
    text-align: center;
    color: #4A3360;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.mz-box:hover { transform: translateY(-4px); }
.mz-box:hover img { transform: translateX(-50%) scale(1.06) rotate(-2deg); }

.mz-short { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 1.6rem; }
@media (max-width: 64rem) { .mz-short { grid-template-columns: 1fr; } }
.mz-sbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    aspect-ratio: 900 / 300;
    padding: 0 9% 0 33%;
    background: url('/assets/img/art/box-shortcut.webp') center / 100% 100% no-repeat;
    color: #6D5A7E;
    text-decoration: none;
    font-size: 0.98rem;
    line-height: 1.25;
    filter: drop-shadow(0 0.6rem 0.7rem rgba(110, 70, 120, 0.2));
    transition: transform 0.25s;
}
.mz-sbox img {
    position: absolute;
    left: -6%;
    top: 50%;
    width: 40%;
    height: 135%;
    object-fit: contain;
    transform: translateY(-52%);
    filter: drop-shadow(0 0.5rem 0.5rem rgba(110, 70, 120, 0.28));
    transition: transform 0.35s;
}
.mz-sbox span { display: flex; flex-direction: column; flex: 1; }
.mz-sbox b { font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.1; color: #7A4F86; }
.mz-sbox > .ic { width: 1.15rem; height: 1.15rem; color: #5E4876; flex: none; }
.mz-sbox:hover { transform: translateY(-3px); }
.mz-sbox:hover img { transform: translateY(-52%) scale(1.08); }

.mz-pbox {
    position: relative;
    aspect-ratio: 600 / 855;
    padding: 30% 11% 9%;
    margin-top: 1.2rem;
    background: url('/assets/img/art/box-picks.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 0.8rem 0.9rem rgba(110, 70, 120, 0.22));
    display: flex;
    flex-direction: column;
}
.mz-pbox__title {
    position: absolute;
    top: 9.6%;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    white-space: nowrap;
    font-size: 2rem;
    line-height: 1;
    color: #7A4F86;
}
.mz-pbox #picks { flex: 1; }
.mz-pbox .mz-pick { border-bottom-color: rgba(185, 130, 165, 0.35); padding: 0.6rem 0.1rem; grid-template-columns: 3rem 1fr auto; }
.mz-pbox .mz-pick__shot { width: 3rem; height: 3rem; }
.mz-pbox .mz-pick__txt b { font-size: 1.05rem; color: #4A3360; }
.mz-pbox .mz-pick .price { font-size: 1.05rem; color: #4A3360 !important; }
.mz-pbox .mz-more { color: #5E4876; padding-top: 0.6rem; }
@media (max-width: 75rem) { .mz-pbox { max-width: 24rem; margin-inline: auto; } }

/* the note gets its own row, centred */
.mz-noterow { grid-template-columns: 1fr; justify-items: center; margin-top: 4rem; }
.mz-note { width: min(100%, 44rem); }

/* footer cards on the painted torn-paper frame */
.mz-fcard,
.mz-fcard:hover {
    position: relative;
    aspect-ratio: 1000 / 346;
    padding: 0 9% 0 34%;
    border: 0;
    border-image: none;
    background: url('/assets/img/art/box-footer.webp') center / 100% 100% no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 0.7rem 0.8rem rgba(110, 70, 120, 0.2));
    color: #5E4E6E;
    font-size: 1.02rem;
}
.mz-fcard:hover { transform: translateY(-3px); }
.mz-fcard img {
    position: absolute;
    left: -3%;
    top: 50%;
    width: 36%;
    margin: 0;
    transform: translateY(-50%) rotate(-4deg);
}
.mz-fcard b { font-size: clamp(1.6rem, 2vw, 2.1rem); color: #7A4F86; }
.mz-foot__cards { gap: clamp(1.2rem, 20vw, 22rem); }

/* night: the painted frames stay as they are (they are paper), and their
   text stays dark so it reads on them */
html:not([data-mh="light"]) :is(.mz-box b, .mz-pbox .mz-pick__txt b, .mz-pbox .price) { color: #4A3360 !important; }
html:not([data-mh="light"]) :is(.mz-sbox b, .mz-fcard b, .mz-pbox__title) { color: #7A4F86; }
html:not([data-mh="light"]) :is(.mz-sbox, .mz-fcard) { color: #5E4E6E; }
.mz-box { padding-bottom: 13.5%; }
.mz-box img { top: 2%; height: 64%; }
.mz-home { grid-template-columns: minmax(0, 1fr) 23.5rem; }
.mz-pbox { padding: 31% 10.5% 9%; }
.mz-pbox__title { top: 10.2%; font-size: 1.75rem; }
.mz-sbox { padding: 0 8% 0 31%; font-size: 0.86rem; }
.mz-sbox b { font-size: clamp(1.15rem, 1.45vw, 1.45rem); }
.mz-sbox img { width: 36%; left: -4%; }
.mz-pbox__title { top: 12.4%; }
.mz-sbox { padding-left: 33%; }
.mz-sbox img { left: -6%; width: 37%; }

/* =====================================================================
   Round 7: the details of "this" - a tint per box, the promise strip and
   shortcuts on the painted frame (9-sliced so the corners never stretch),
   curly title flourishes, scattered sparkles, a hanging lantern and
   flower clusters around the sections, picture thumbnails in the picks.
   ===================================================================== */

body {
    background-image:
        url('/assets/img/art/sparkles.svg'),
        radial-gradient(ellipse 60rem 40rem at 10% 0%, rgba(233, 214, 243, 0.85), transparent 70%),
        radial-gradient(ellipse 50rem 40rem at 95% 35%, rgba(246, 218, 232, 0.8), transparent 70%),
        url('/assets/img/art/paper.webp');
    background-size: 37.5rem, auto, auto, 37.5rem;
}

/* each box its own colour: the painted frame sits on ::before, so the
   tint can turn it without touching the object or the name */
.mz-box { background: none; isolation: isolate; }
.mz-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/assets/img/art/box-collection.webp') center / 100% 100% no-repeat;
}
.mz-box--pink::before  { filter: hue-rotate(32deg) saturate(1.05); }
.mz-box--rose::before  { filter: hue-rotate(48deg) saturate(0.95) brightness(1.02); }
.mz-box--sage::before  { filter: hue-rotate(-175deg) saturate(0.42) brightness(1.04); }
.mz-box--peach::before { filter: hue-rotate(68deg) saturate(0.7) brightness(1.04); }
.mz-box b { color: #3F2A55; font-size: clamp(1.3rem, 1.75vw, 1.7rem); }
.mz-box--sage b { color: #3E4632; }
.mz-box img { width: 72%; height: 70%; top: -3%; }

/* curly flourishes beside section titles */
.mz-title::before, .mz-title::after {
    content: "";
    width: 9.5rem;
    height: 1.3rem;
    padding: 0;
    background: url('/assets/img/art/flourish.svg') center / contain no-repeat;
}
.mz-title::after { transform: scaleX(-1); }
@media (max-width: 40rem) { .mz-title::before, .mz-title::after { width: 4rem; } }

/* promise strip on the painted frame */
.mz-promise,
html:not([data-mh="light"]) .mz-promise {
    border: solid transparent;
    border-width: 1.5rem 2.2rem;
    border-image: url('/assets/img/art/box-shortcut.webp') 70 80 fill / 1.5rem 2.2rem stretch;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0.1rem 0.4rem;
    filter: drop-shadow(0 0.6rem 0.7rem rgba(110, 70, 120, 0.18));
}
.mz-promise li { color: #4A3360; font-size: 1.04rem; }
.mz-promise .ic { color: #5E4876; }
.mz-promise li + li { border-left-color: rgba(185, 130, 165, 0.45); }

/* bigger shortcut boxes, frame 9-sliced */
.mz-short { gap: 1.4rem; margin-top: 2rem; }
.mz-sbox {
    aspect-ratio: auto;
    min-height: 6.6rem;
    padding: 0.4rem 1.6rem 0.4rem 7.2rem;
    border: solid transparent;
    border-width: 1.3rem 1.6rem;
    border-image: url('/assets/img/art/box-shortcut.webp') 70 80 fill / 1.3rem 1.6rem stretch;
    background: none;
    font-size: 0.95rem;
}
.mz-sbox img { left: -2.6rem; width: 8.4rem; height: 8.4rem; transform: translateY(-54%); }
.mz-sbox:hover img { transform: translateY(-54%) scale(1.08); }
.mz-sbox b { font-size: clamp(1.35rem, 1.6vw, 1.6rem); }
.mz-short { padding-left: 1.6rem; }
@media (max-width: 64rem) { .mz-short { padding-left: 2.6rem; } }

/* picks: real little pictures */
.mz-pbox .mz-pick__shot {
    width: 3.2rem;
    height: 3.2rem;
    padding: 0.15rem;
    background: radial-gradient(circle at 50% 40%, #FFF, #F1E2F2);
    box-shadow: 0 0 0 1px #E2C894, 0 0.25rem 0.4rem -0.2rem rgba(110, 70, 120, 0.35);
}
.mz-pbox .mz-pick__shot img { width: 100%; height: 100%; object-fit: contain; }

/* decorations */
.mz-home, .mz-foot { position: relative; }
.mz-deco { position: absolute; pointer-events: none; height: auto; z-index: 3; filter: drop-shadow(0 0.4rem 0.5rem rgba(110, 70, 120, 0.2)); }
.mz-deco--lantern { width: 6.2rem; left: -5.2rem; top: -3.5rem; }
.mz-deco--b1 { width: 5.5rem; left: -3.2rem; bottom: -2rem; transform: rotate(-12deg); }
.mz-deco--b2 { width: 5rem; left: 1rem; bottom: -3rem; }
.mz-deco--b3 { width: 5rem; right: -2.6rem; top: 1.5rem; transform: rotate(14deg); }
.mz-deco--f1 { width: 6rem; left: 50%; bottom: 7.2rem; transform: translateX(-24rem); z-index: 3; }
.mz-deco--f2 { width: 6rem; left: 50%; bottom: 7rem; transform: translateX(-20rem) rotate(-8deg); z-index: 3; }
.mz-deco--f3 { width: 5rem; left: 50%; bottom: 7.4rem; transform: translateX(18rem) rotate(10deg); z-index: 3; }
@media (max-width: 90rem) { .mz-deco--lantern, .mz-deco--b1, .mz-deco--b3 { display: none; } }
@media (max-width: 64rem) { .mz-deco { display: none; } }

.mz-sparks { font-style: normal; font-family: 'EB Garamond', serif; font-size: 0.95rem; letter-spacing: 0.2em; color: #D2A85E; vertical-align: 0.35em; }

/* Wide screens (owner's is 2560 px): the painting fills the whole hero,
   faded only where the words sit, and the hero grows with the width. */
.mz-hero { min-height: clamp(28rem, 34vw, 46rem); }
@media (min-width: 64.01rem) {
    .mz-hero__art,
    .mz-hero__art[style] {
        width: 100%;
        background-position: right 38%;
        background-size: cover;
        -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.22) 30%, rgba(0,0,0,0.85) 52%, #000 62%), linear-gradient(0deg, transparent 0%, #000 16%);
        mask-image: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.22) 30%, rgba(0,0,0,0.85) 52%, #000 62%), linear-gradient(0deg, transparent 0%, #000 16%);
    }
    /* a soft light behind the words so they stay readable over the art */
    .mz-hero__copy { position: relative; }
    .mz-hero__copy::before {
        content: "";
        position: absolute;
        inset: -2rem -4rem;
        z-index: -1;
        background: radial-gradient(ellipse at 50% 50%, rgba(250, 243, 246, 0.88) 30%, rgba(250, 243, 246, 0) 70%);
    }
}
.mz-wrap { width: min(100% - 2 * clamp(1rem, 4vw, 4.5rem), 90rem); }
@media (min-width: 64.01rem) {
    .mz-hero__art {
        -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.5) 28%, rgba(0,0,0,0.9) 48%, #000 58%), linear-gradient(0deg, transparent 0%, #000 16%);
        mask-image: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.5) 28%, rgba(0,0,0,0.9) 48%, #000 58%), linear-gradient(0deg, transparent 0%, #000 16%);
    }
    .mz-hero__copy::before {
        inset: -3rem -5rem;
        background: radial-gradient(ellipse at 50% 50%, rgba(251, 244, 248, 0.94) 38%, rgba(251, 244, 248, 0.6) 58%, rgba(251, 244, 248, 0) 74%);
    }
}
@media (min-width: 64.01rem) {
    .mz-hero__in { position: relative; z-index: 1; isolation: isolate; }
    .mz-hero__art {
        left: auto;
        right: 0;
        width: auto;
        height: 100%;
        aspect-ratio: 2048 / 768;
        min-width: 62%;
        background-size: cover;
        background-position: right center;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 16%, rgba(0,0,0,0.9) 36%, #000 46%), linear-gradient(0deg, transparent 0%, #000 16%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 16%, rgba(0,0,0,0.9) 36%, #000 46%), linear-gradient(0deg, transparent 0%, #000 16%);
    }
}
/* the hero's words sit further left than the page column on wide screens
   (owner), clear of the vines but away from the books */
@media (min-width: 64.01rem) {
    .mz-hero__in.mz-wrap { width: min(100% - 2 * clamp(1rem, 4vw, 4.5rem), 118rem); }
    .mz-hero__copy { padding-left: clamp(4rem, 8vw, 9rem); }
}
@media (min-width: 64.01rem) { .mz-hero__copy { width: min(100%, calc(36rem + clamp(4rem, 8vw, 9rem))); } }

/* =====================================================================
   Footer as one scene, like "this": the skyline in the middle, the two
   painted cards either side at the same height overlapping its flowery
   edges, all of it resting on the plum band.
   ===================================================================== */
.mz-foot { margin-top: 2.5rem; }
.mz-foot__scene { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 15rem; }
.mz-foot__sky { width: min(100%, 52rem); margin: 0 auto -1px; }
.mz-foot__cards {
    position: absolute;
    left: 50%;
    bottom: 2.4rem;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    gap: 0;
    pointer-events: none;
}
.mz-foot__cards .mz-fcard { width: min(31rem, 36%); pointer-events: auto; }
.mz-foot__brand p .ic { display: inline-block; vertical-align: -0.12em; }
.mz-foot__brand p { max-width: 24rem; }
@media (max-width: 64rem) {
    .mz-foot__scene { flex-direction: column; align-items: center; }
    .mz-foot__cards { position: static; transform: none; flex-direction: column; gap: 1.6rem; padding-left: 2.6rem; }
    .mz-foot__cards .mz-fcard { width: min(100%, 31rem); }
    .mz-foot__sky { margin-top: 1rem; }
}
@media (min-width: 64.01rem) {
    .mz-foot__sky { width: min(100%, 60rem); }
    .mz-foot__cards { width: min(100% - 4rem, 86rem); bottom: 3.2rem; }
    .mz-foot__cards .mz-fcard { width: clamp(24rem, 30vw, 31rem); flex: none; }
}
/* footer cards, rebuilt clean: picture | words, nothing absolute */
.mz-foot .mz-fcard,
.mz-foot .mz-fcard:hover {
    display: grid;
    grid-template-columns: 36% 1fr;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0 8% 0 2%;
    aspect-ratio: 1000 / 346;
    min-height: 0;
}
.mz-foot .mz-fcard img {
    position: static;
    width: 118%;
    max-width: none;
    margin: -12% 0 -8% -14%;
    transform: rotate(-4deg);
}
.mz-foot .mz-fcard > span { display: block; min-width: 0; font-size: 0.98rem; line-height: 1.38; }
.mz-foot .mz-fcard > span b { display: block; margin-bottom: 0.2rem; }
.mz-foot .mz-fcard > span b { white-space: nowrap; font-size: clamp(1.45rem, 1.7vw, 1.9rem); }

/* =====================================================================
   Round 8 (owner): the skyline painting IS the footer, the links sit on
   it; the two painted cards moved up into the page; Extra Goodies less
   green; readable italic instead of the thin script for every label.
   ===================================================================== */

/* readable italic for labels and titles; the fancy script stays only for
   the logo and the hero's "Moon Magic" */
.mz-script,
.band h2,
.cartpanel__head h2,
.mz-foot__col h4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}
.mz-h1 .mz-script, .mz-brand__word { font-family: 'Pinyon Script', cursive !important; font-style: normal; font-weight: 400 !important; }
.mz-title { font-size: clamp(2.1rem, 3vw, 2.8rem); }
.mz-pbox__title { font-size: 1.6rem; top: 11.6%; }
.mz-sbox b { font-size: clamp(1.25rem, 1.45vw, 1.5rem); }
.mz-fcard b, .mz-foot .mz-fcard > span b { font-size: clamp(1.4rem, 1.6vw, 1.75rem); }
.mz-note h2 { font-size: 2.2rem; }
.mz-note .mz-note__sign { font-size: 1.6rem; }
.promo__title { font-size: 1.45rem; }
.promopop__title { font-size: 2.3rem; }
.mz-foot__col h4 { font-size: 1.45rem; }

/* Extra Goodies: a soft sage-lilac, not green */
.mz-box--sage::before { filter: hue-rotate(-150deg) saturate(0.28) brightness(1.05); }
.mz-box--sage b { color: #3F2A55; }

/* the two painted cards: their own row above the footer */
.mz-helprow { margin-top: 4rem; }
.mz-help__cards {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    flex-wrap: wrap;
}
.mz-helprow .mz-fcard,
.mz-helprow .mz-fcard:hover {
    width: min(100%, 32rem);
    display: grid;
    grid-template-columns: 36% 1fr;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0 8% 0 2%;
    aspect-ratio: 1000 / 346;
    background: url('/assets/img/art/box-footer.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 0.7rem 0.8rem rgba(110, 70, 120, 0.2));
    color: #5E4E6E;
}
.mz-helprow .mz-fcard img { position: static; width: 118%; max-width: none; margin: -12% 0 -8% -14%; transform: rotate(-4deg); }
.mz-helprow .mz-fcard > span { display: block; min-width: 0; font-size: 0.98rem; line-height: 1.38; }
.mz-helprow .mz-fcard > span b { display: block; white-space: nowrap; margin-bottom: 0.2rem; color: #7A4F86; font-size: clamp(1.4rem, 1.6vw, 1.75rem); }
.mz-helprow .mz-fcard:hover { transform: translateY(-3px); }

/* the footer: the painting with the links on it */
.mz-foot { margin-top: 3rem; }
.mz-foot__band,
html:not([data-mh="light"]) .mz-foot__band {
    position: relative;
    padding: clamp(12rem, 17vw, 20rem) 0 1.4rem;
    background:
        linear-gradient(180deg, rgba(74, 55, 96, 0) 0%, rgba(74, 55, 96, 0) 34%, rgba(78, 57, 102, 0.72) 56%, rgba(70, 51, 92, 0.94) 72%, #46335C 100%),
        url('/assets/img/art/footer-scene.webp') center top / cover no-repeat;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7rem);
    mask-image: linear-gradient(180deg, transparent 0, #000 7rem);
}
@media (min-width: 120rem) { .mz-foot__band { background-size: 100% auto, 100% auto; background-repeat: no-repeat; background-color: #46335C; } }
.mz-foot__col a, .mz-foot__brand p { text-shadow: 0 1px 0.4rem rgba(40, 24, 60, 0.6); }
.mz-foot__band,
html:not([data-mh="light"]) .mz-foot__band {
    background:
        linear-gradient(180deg, rgba(74, 55, 96, 0) 0%, rgba(74, 55, 96, 0) 48%, rgba(78, 57, 102, 0.5) 64%, rgba(70, 51, 92, 0.86) 80%, #46335C 100%),
        url('/assets/img/art/footer-scene.webp') center top / cover no-repeat;
}
.mz-note h2 { padding-bottom: 0.55rem; border-bottom: 1px solid rgba(122, 79, 134, 0.35); }

/* Promise strip like "this": pale blush paper (the painted frame, faded
   almost to white), big plum icons with a soft glow, bold clear words. */
.mz-promise,
html:not([data-mh="light"]) .mz-promise {
    position: relative;
    isolation: isolate;
    border: 0;
    border-image: none;
    padding: 1.35rem 3.2rem;
    filter: drop-shadow(0 0.5rem 0.7rem rgba(110, 70, 120, 0.14));
}
.mz-promise::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: solid transparent;
    border-width: 1.5rem 2.4rem;
    border-image: url('/assets/img/art/box-shortcut.webp') 70 80 fill / 1.5rem 2.4rem stretch;
    filter: saturate(0.32) brightness(1.13);
}
.mz-promise li { font-weight: 700; font-size: 1.14rem; line-height: 1.15; color: #3F2A55; gap: 1rem; }
.mz-promise .ic {
    width: 2.5rem;
    height: 2.5rem;
    stroke-width: 1.35;
    color: #6B3F7E;
    filter: drop-shadow(0 0 0.45rem rgba(255, 255, 255, 0.95)) drop-shadow(0 0 0.2rem rgba(255, 255, 255, 0.9));
}
.mz-promise li + li { border-left: 1px solid rgba(107, 63, 126, 0.35); padding-left: 1.2rem; }
.mz-promise::before { filter: hue-rotate(22deg) saturate(0.55) brightness(1.14); }
.mz-promise { padding: 1.6rem 3.4rem; }
.mz-promise li .ic { width: 2.9rem !important; height: 2.9rem !important; flex: none; }
.mz-promise li { font-size: 1.18rem; }
.mz-helprow { position: relative; z-index: 2; margin-top: -1.5rem; }
.mz-foot { margin-top: -6rem; }
.mz-foot__col h4 { color: #FFF1D6; text-shadow: 0 1px 0.5rem rgba(40, 24, 60, 0.75); }

/* =====================================================================
   Every page: all cards and boxes on the painted paper frame (a pale
   blush copy, box-paper.webp, 9-sliced so any size keeps its corners),
   and section titles with the gold flourishes instead of icons.
   ===================================================================== */
.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier,
.trust__item, .notice, .service, .value, .gstep, .doccard, .pillar, .strip__card,
.cartpanel__body .cartrow {
    background: none !important;
    box-shadow: none !important;
    border: solid transparent !important;
    border-width: 1.5rem 1.6rem !important;
    border-image: url('/assets/img/art/box-paper.webp') 80 fill / 1.5rem 1.6rem stretch !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 0.55rem 0.7rem rgba(110, 70, 120, 0.14));
}
.item.card:hover, .card:hover { filter: drop-shadow(0 0.9rem 1rem rgba(110, 70, 120, 0.22)); }
.cartpanel.card, .chat__panel.card { border: 0 !important; border-image: none !important; filter: none; }
.item__shot { margin: 0 0 0.6rem !important; border-radius: 0.6rem !important; }
html:not([data-mh="light"]) :is(.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier, .trust__item, .notice, .service, .value, .gstep, .doccard) { color: #3F2A55; }

/* section titles: flourish either side, no icon */
.band h2 .ic { display: none !important; }
.band::before, .band::after {
    height: 1.3rem !important;
    background: url('/assets/img/art/flourish.svg') center / contain no-repeat !important;
    max-width: 9.5rem;
}
.band::after { transform: scaleX(-1); }
.band__sub { color: var(--mz-soft) !important; }
.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier,
.trust__item, .notice, .service, .value, .gstep, .doccard, .pillar, .strip__card {
    border-width: 0.95rem 1rem !important;
    border-image: url('/assets/img/art/box-paper.webp') 70 fill / 0.95rem 1rem stretch !important;
}
.explainer.matrix-card { padding: 0.6rem 1.2rem !important; }
.tier { padding-inline: 0.4rem !important; }
/* vines decorate the edges but never cover words: they sit behind main */
main { position: relative; z-index: 1; }
.mz-vine { z-index: 0; }

/* =====================================================================
   Round 9: smooth nav (no width jump), painted Goods menu, category art
   in every product picture, Grimoire polish, gentle link hovers.
   ===================================================================== */

/* nav plaques: one size always, only a lift and a glow on hover */
.mz-link,
.mz-link:hover,
.mz-link:not(.is-active):hover,
.mz-link.is-active { padding: 0 0.65rem; transition: transform 0.25s var(--ease-out), filter 0.25s ease; }
.mz-link:not(.is-active):hover { transform: translateY(-2px); filter: drop-shadow(0 0 0.55rem rgba(255, 220, 240, 0.45)); }
.mz-tool { transition: transform 0.25s var(--ease-out), background 0.25s ease, box-shadow 0.25s ease; }
.mz-tool:hover { transform: translateY(-2px); box-shadow: 0 0 1rem rgba(240, 205, 145, 0.55), inset 0 0 0.6rem rgba(240, 205, 145, 0.25); }

/* The Goods menu: a painted paper panel that floats in */
.mz-nav .drop__menu {
    width: 21rem;
    padding: 0.9rem 0.8rem;
    background: none;
    box-shadow: none;
    border: solid transparent;
    border-width: 1.1rem 1.2rem;
    border-image: url('/assets/img/art/box-paper.webp') 70 fill / 1.1rem 1.2rem stretch;
    filter: drop-shadow(0 1.2rem 1.4rem rgba(60, 40, 85, 0.35));
    transform: translate(-50%, -0.6rem) scale(0.97);
    transform-origin: top center;
    transition: opacity 0.22s ease, transform 0.3s var(--ease-out), visibility 0.22s;
}
.mz-nav .drop__menu.is-open { transform: translate(-50%, 0) scale(1); }
.mz-nav .drop__item { border-radius: 0.55rem; transition: background 0.2s ease, transform 0.2s ease; }
.mz-nav .drop__item:hover { background: rgba(214, 180, 226, 0.35); transform: translateX(3px); }
.mz-nav .drop__icon { background: linear-gradient(140deg, #F3E3F3, #E9D2EA); box-shadow: 0 0 0 1px #E2C894; }
.mz-nav .drop__name, html:not([data-mh="light"]) .mz-nav .drop__name { color: #3F2A55; }
.mz-nav .drop__sub { color: #7D6D8C; }

/* product pictures: the category painting on soft paper */
.item__shot { display: grid; place-items: center; overflow: hidden; }
.item__shot .mz-art,
.strip__shot .mz-art,
.cartrow__thumb .mz-art,
.doccard__shot .mz-art {
    width: 72%;
    height: 82%;
    object-fit: contain;
    opacity: 1;
    filter: drop-shadow(0 0.5rem 0.5rem rgba(110, 70, 120, 0.25));
    transition: transform 0.4s var(--ease-out);
}
.item.card:hover .mz-art, .doccard:hover .mz-art, .strip__card:hover .mz-art { transform: scale(1.06) rotate(-2deg); }
.cartrow__thumb .mz-art { width: 100%; height: 100%; }
.item__crest.mz-art { position: static; inset: auto; }

/* no hard gold rectangle on hover - only the frame lifts */
.item.card:hover, .card:hover, .doccard:hover, .strip__card:hover {
    box-shadow: none !important;
    transform: translateY(-4px);
    filter: drop-shadow(0 1rem 1.1rem rgba(110, 70, 120, 0.24));
}
.item.card, .card, .doccard, .strip__card { transition: transform 0.3s var(--ease-out), filter 0.3s ease; }

/* The Grimoire */
.doccard__shot {
    background: linear-gradient(150deg, #F3E5F4, #F8E6EE) !important;
    border-radius: 0.6rem;
    display: grid !important;
    place-items: center;
}
.doccard__pages {
    background: rgba(255, 252, 254, 0.9) !important;
    color: #5E4876 !important;
    border: 1px solid #E2C894 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.doccard__title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.25rem; color: #3F2A55; }
.doccard__title .ic { color: #8A5B97; }
.docstats { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.docstats > div {
    flex: 1 1 9rem;
    text-align: center;
    padding: 0.7rem 1rem;
    border: solid transparent;
    border-width: 0.8rem 0.9rem;
    border-image: url('/assets/img/art/box-paper.webp') 70 fill / 0.8rem 0.9rem stretch;
}
.docstat__n { font-family: 'Cormorant Garamond', serif !important; font-size: 2rem !important; font-weight: 700; color: #6E4E8C !important; line-height: 1; }
.docstat__l { font-size: 0.8rem !important; letter-spacing: 0.18em; color: #7D6D8C !important; margin-top: 0.3rem; }
.doc h2, .doc h3 { font-family: 'Cormorant Garamond', serif; color: #4A3360; }
.doc h2 { font-size: 2.1rem; }

/* links: soft underline that grows in, no jumps */
main a:not([class]), .doc a, .legal a, .mz-foot__col a, .mz-foot__law a {
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    transition: background-size 0.3s var(--ease-out), color 0.2s ease;
    padding-bottom: 1px;
}
main a:not([class]):hover, .doc a:hover, .legal a:hover, .mz-foot__col a:hover, .mz-foot__law a:hover {
    background-size: 100% 1px;
    text-decoration: none;
}
main a:not([class]), .doc a, .legal a { color: #8A4F8E; }
.mz-foot__col a:hover, .mz-foot__law a:hover { color: #FFF1D6; }
.doccard__shot { height: 11rem !important; aspect-ratio: auto !important; }
.doccard__shot .mz-art { height: 8.5rem; width: auto; max-width: 80%; }

/* =====================================================================
   Soft everything: no heavy hover shadows on buttons or fields, a gentle
   lift and glow instead. Contact form and the ways to reach us framed.
   ===================================================================== */
.btn, .btn:hover, .btn--primary:hover, .btn--ghost:hover, .rail__clear:hover, .totop.is-up:hover {
    box-shadow: none !important;
}
.btn { transition: transform 0.25s var(--ease-out), filter 0.25s ease, background 0.25s ease !important; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.04) drop-shadow(0 0.3rem 0.5rem rgba(110, 70, 120, 0.18)); }
.btn--ghost:hover { background: #FFFFFF !important; }

input, textarea, select,
input:hover, textarea:hover, select:hover {
    box-shadow: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, outline-color 0.2s ease;
}
input:hover, textarea:hover, select:hover { border-color: #D9B77F !important; background: #FFFFFF !important; }
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(214, 180, 226, 0.45) !important;
    outline: 0 !important;
    border-color: #C6A26A !important;
    background: #FFFFFF !important;
}
.field, .field:hover, .field:focus-within { box-shadow: none !important; }

.contact .form.card { padding: 1.4rem 1.6rem !important; }
.ways .way.card { padding: 1rem 1.4rem !important; margin-bottom: 1.2rem; }
.way__head { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.3rem; color: #3F2A55; }
.way__head .ic { color: #8A5B97; }
.contact .field label, .field__label { color: #7D6D8C; }
.way a:not([class]), .card p a:not([class]) {
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat !important;
    -webkit-text-fill-color: currentColor !important;
    color: #8A4F8E !important;
}
.way a:not([class]):hover, .card p a:not([class]):hover { background-size: 100% 1px !important; }
.ways .way.card { padding-bottom: 1.6rem !important; }
.contact .form.card { padding-bottom: 2rem !important; }
/* only things you can click lift on hover; plain boxes stay still */
.card:hover, .matrix-card:hover, .legal:hover, .way:hover, .tier:hover, .value:hover, .note:hover,
.explain__item:hover, .trust__item:hover, .notice:hover, .service:hover, .pillar:hover, .gstep:hover {
    transform: none !important;
    filter: drop-shadow(0 0.55rem 0.7rem rgba(110, 70, 120, 0.14)) !important;
}
a.card:hover, a.item.card:hover, button.card:hover, .doccard:hover, a.strip__card:hover {
    transform: translateY(-3px) !important;
    filter: drop-shadow(0 0.9rem 1rem rgba(110, 70, 120, 0.22)) !important;
}

/* =====================================================================
   Crisp boxes: every generic box and the Goods menu use the drawn
   filigree (frame-soft.svg, vector) over a soft blush fill, so they stay
   sharp at any size. The painted picture frames stay on the home page.
   ===================================================================== */
.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier,
.trust__item, .notice, .service, .value, .gstep, .doccard, .pillar, .strip__card,
.rail, .docs-side, .docstats > div, .mz-nav .drop__menu {
    border: 1.15rem solid transparent !important;
    border-image: url('/assets/img/art/frame-soft.svg') 40 / 1.15rem / 0 stretch !important;
    border-radius: 1.3rem !important;
    background: linear-gradient(165deg, #FFFAFD 0%, #FBF0F6 55%, #F6E8F2 100%) border-box !important;
    filter: drop-shadow(0 0.5rem 0.8rem rgba(110, 70, 120, 0.12)) !important;
}
html:not([data-mh="light"]) :is(.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier,
.trust__item, .notice, .service, .value, .gstep, .doccard, .pillar, .strip__card, .rail, .docs-side, .docstats > div) {
    background: linear-gradient(165deg, #3E2E55, #33264A) border-box !important;
    color: var(--mz-ink);
}
.cartpanel.card, .chat__panel.card { border: 0 !important; border-image: none !important; filter: none !important; }

/* Goods menu: crisp, roomy, nothing cut off, no strip under the button */
.mz-nav .drop__menu { width: 22rem; padding: 0.5rem 0.4rem !important; max-height: none; overflow: visible; }
.mz-nav .drop__menu::before { top: -1.9rem; height: 1.9rem; background: none; }
.mz-nav .drop__sub { letter-spacing: 0.02em; font-size: 0.86rem; text-transform: none; }
.mz-nav .drop__item { padding: 0.45rem 0.6rem; }
/* six plaques: tighter on laptop widths */
@media (max-width: 110rem) and (min-width: 64.01rem) {
    .mz-nav__in { gap: 1rem; width: min(100% - 2rem, 92rem); }
    .mz-links { gap: 0.45rem; }
    .mz-link, .mz-link:hover, .mz-link:not(.is-active):hover, .mz-link.is-active { padding: 0 0.3rem; font-size: 1.08rem; }
    .mz-tools { gap: 0.55rem; }
    .mz-tool { width: 2.9rem; height: 2.9rem; }
    .mz-brand__mark { width: 4.4rem; height: 4.4rem; }
    .mz-brand__word { font-size: 2.6rem; }
}
/* About page headings in the serif */
#page-about .card h3, #page-about .card h4, #page-about .pillar h3 { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: #3F2A55; }
/* buttons don't move on hover - only a soft brightening */
.btn:hover, .btn--primary:hover, .btn--ghost:hover, .mz-btn:hover { transform: none !important; }
.btn:hover { filter: brightness(1.05) !important; }
/* text links: solid readable plum + soft growing underline (the old
   gradient-text links went see-through under the new underline) */
.faq__body a, .doc p a, .note p a, .way p a, .spec td a, .chat__alt a, .legal p a,
.explain__item p a, .matrix caption a, .matrix td a, .chat__msg a, main a:not([class]) {
    color: #7A3F86 !important;
    -webkit-text-fill-color: #7A3F86 !important;
    font-weight: 600;
    background-image: linear-gradient(#C99A7A, #C99A7A) !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
    background-position: 0 100% !important;
    background-size: 0 1px !important;
    background-repeat: no-repeat !important;
}
.faq__body a:hover, .doc p a:hover, .note p a:hover, .way p a:hover, .spec td a:hover, .chat__alt a:hover, .legal p a:hover,
.explain__item p a:hover, .matrix caption a:hover, .matrix td a:hover, .chat__msg a:hover, main a:not([class]):hover {
    background-size: 100% 1px !important;
}
/* FAQ: question text solid, no shimmer */
.faq summary { background: none !important; -webkit-text-fill-color: #3F2A55 !important; color: #3F2A55 !important; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.12rem; }
.faq details[open] summary { -webkit-text-fill-color: #7A3F86 !important; color: #7A3F86 !important; }
.faq details { overflow: visible; }
.mz-helprow { position: relative; z-index: 6; }
/* less empty space above the MoonHavenRP box */
main > section.section:last-of-type { padding-top: 1.5rem; padding-bottom: 1rem; }
/* underlines only as long as the words */
.mz-foot__col a, .mz-foot__law a { align-self: flex-start; width: fit-content; display: inline-block; }
/* breathing room inside every framed box */
.legal, .matrix-card, .note, .notice, .explain__item, .trust__item, .service, .value, .pillar, .gstep {
    padding: 1.1rem 1.5rem !important;
}
.legal h3, .legal h2 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.35rem; color: #4A3360; margin-bottom: 0.4rem; }
/* the plum-to-rose gradient (owner liked it on the Custom work notice) on
   every section title and box heading */
.band h2, .mz-title .mz-script, .legal h3, .legal h2, .way__head, .doccard__title,
.mz-pbox__title, .mz-sbox b, .mz-helprow .mz-fcard > span b, .faq details[open] summary,
#page-about .card h3, .tier__name, .explain__title, .service__title {
    background-image: linear-gradient(100deg, #5E3F86 0%, #8E4F9A 45%, #C0628F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}
.band h2 .band__sub { -webkit-text-fill-color: var(--mz-soft) !important; color: var(--mz-soft) !important; background: none !important; }
.way__head .ic, .doccard__title .ic { -webkit-text-fill-color: initial; }
main h3, main h2:not(.mz-note h2), .notice__text b {
    background-image: linear-gradient(100deg, #5E3F86 0%, #8E4F9A 45%, #C0628F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    width: fit-content;
}
main .item__name, main .h3.item__name { width: auto; }
/* help cards: more air above, sit lower into the sky near the moon, text clear of the bottom edge */
.mz-helprow { margin-top: 3.5rem; }
.mz-foot { margin-top: -9.5rem; }
.mz-helprow .mz-fcard, .mz-helprow .mz-fcard:hover { padding-bottom: 3.5%; padding-top: 0; }
.mz-helprow .mz-fcard > span { font-size: 0.94rem; line-height: 1.32; }
/* product cards: wide enough to stay short, buttons never cut off */
.catalog { grid-template-columns: repeat(auto-fill, minmax(20.5rem, 1fr)) !important; gap: 1.6rem !important; }
.item__foot { flex-wrap: wrap; gap: 0.6rem; }
.item__acts { flex-wrap: nowrap; gap: 0.5rem; }
.item__acts .btn { white-space: nowrap; }
.item__shot { aspect-ratio: 16 / 9; height: auto !important; }
/* gradient headings keep their icons visible */
.way__head .ic, .doccard__title .ic, main h3 .ic, main h2 .ic { color: #8A5B97 !important; -webkit-text-fill-color: initial !important; }
.doccard__title { display: inline-flex; align-items: center; gap: 0.45rem; }
/* the curl under each plaque stays a curl on hover (an old rule turned it
   into a dark block) */
.mz-link:hover > span::after,
.mz-link:not(.is-active):hover > span::after,
.mz-link.is-active > span::after {
    background: url('/assets/img/art/curl.svg') center / contain no-repeat !important;
    clip-path: none !important;
    inset: auto !important;
    left: 50% !important;
    top: calc(100% + 0.6rem) !important;
    width: 1.5rem !important;
    height: 0.62rem !important;
    z-index: 1 !important;
}
/* Best value: no inner spinning rim, a ribbon tag pinned on the frame's top edge */
.tier--best { overflow: visible !important; }
.tier--best::before { display: none !important; }
.tier__flag {
    top: -1.75rem !important;
    right: 50% !important;
    left: auto !important;
    width: auto !important;
    transform: translateX(50%) !important;
    padding: 0.3rem 1.1rem !important;
    border-radius: 999px;
    background: linear-gradient(100deg, #6E4E96, #B4628E) !important;
    box-shadow: 0 0 0 1.5px #E7C98E, 0 0.4rem 0.8rem -0.3rem rgba(110, 70, 120, 0.5) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap;
    z-index: 5 !important;
}
/* help card titles sit inside the frame, not on its top edge */
.mz-helprow .mz-fcard, .mz-helprow .mz-fcard:hover { padding-top: 2.5%; padding-bottom: 1%; }
.mz-helprow .mz-fcard > span { padding-top: 0.6rem; }
.mz-helprow .mz-fcard > span b { margin-bottom: 0.35rem; }
/* hero title in the same gradient */
.mz-h1, .mz-h1 .mz-script {
    background-image: linear-gradient(100deg, #5E3F86 0%, #8E4F9A 45%, #C0628F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}
.mz-h1 .mz-script { padding: 0 0.15em 0.1em; }

/* gradient on every home-page title; note sits under the picks; picks
   content starts below the ribbon */
.mz-box b, .mz-sbox b, .mz-note h2, .mz-note .mz-note__sign {
    background-image: linear-gradient(100deg, #5E3F86 0%, #8E4F9A 45%, #C0628F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}
.mz-note h2 { width: fit-content; }
.mz-note .mz-note__sign { margin-left: auto; width: fit-content; padding-right: 0.2em; }
.mz-side { display: flex; flex-direction: column; gap: 2.4rem; }
.mz-side .mz-note { width: 100%; margin: 0; padding: 1.8rem 1.4rem 1.4rem 5.6rem; }
.mz-side .mz-note__seal { width: 4.4rem; left: 0.9rem; }
.mz-side .mz-note h2 { font-size: 1.7rem; }
.mz-side .mz-note p { font-size: 1rem; }
.mz-pbox { padding-top: 36%; }
.mz-pbox .mz-pick { padding: 0.65rem 0.1rem; }
.mz-sbox { padding: 0.3rem 1.4rem 0.3rem 6.6rem !important; }
.mz-sbox b { font-size: clamp(1.2rem, 1.35vw, 1.4rem) !important; white-space: nowrap; }
.mz-sbox span { font-size: 0.92rem; }
.mz-sbox img { width: 7.6rem; height: 7.6rem; left: -2.4rem; }
/* the right column (picks + note) sits beside both rows; nothing overlaps */
.mz-home { grid-template-columns: minmax(0, 1fr) 23.5rem !important; align-items: start; }
.mz-home__main, .mz-side { min-width: 0; position: relative; z-index: 1; }
.mz-short { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 1.6rem; }
@media (max-width: 75rem) { .mz-home { grid-template-columns: 1fr !important; } .mz-side { max-width: 26rem; margin-inline: auto; } }

/* =====================================================================
   Deeper, warmer page (owner: too bright), cards a soft lavender-blush
   instead of near-white, the note as warm aged parchment that stands out.
   ===================================================================== */
body {
    background-color: #F1E1EC;
    background-image:
        url('/assets/img/art/sparkles.svg'),
        radial-gradient(ellipse 60rem 40rem at 10% 0%, rgba(214, 186, 232, 0.75), transparent 70%),
        radial-gradient(ellipse 55rem 45rem at 95% 35%, rgba(238, 196, 220, 0.7), transparent 70%),
        radial-gradient(ellipse 60rem 50rem at 30% 85%, rgba(220, 196, 236, 0.55), transparent 70%),
        url('/assets/img/art/paper.webp') !important;
    background-size: 37.5rem, auto, auto, auto, 37.5rem !important;
}
.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier,
.trust__item, .notice, .service, .value, .gstep, .doccard, .pillar, .strip__card,
.rail, .docstats > div, .mz-nav .drop__menu {
    background: linear-gradient(165deg, #FCF3F8 0%, #F6E7F1 55%, #EFDDEC 100%) border-box !important;
}
.item__shot, .doccard__shot { background: linear-gradient(150deg, #EADAF2, #F3DDEA) !important; }
.mz-note,
html:not([data-mh="light"]) .mz-note {
    background:
        radial-gradient(ellipse at 18% 12%, rgba(255, 252, 240, 0.9), transparent 55%),
        radial-gradient(ellipse at 85% 90%, rgba(214, 170, 140, 0.35), transparent 60%),
        linear-gradient(160deg, #FBF0E2 0%, #F2DFCB 60%, #E9D0BC 100%);
    color: #5A4552;
    filter: drop-shadow(0 1.1rem 1.3rem rgba(90, 55, 80, 0.32)) drop-shadow(0 0 0 1px #E2C9A8);
}
.mz-note p { color: #5A4552; }
.mz-note h2 { border-bottom-color: rgba(150, 100, 120, 0.35) !important; }
.mz-sbox b { white-space: normal !important; line-height: 1.05 !important; }
.mz-sbox span { min-width: 0; }
/* collection box names: elegant italic, gradient, soft white glow */
.mz-box b {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
    font-weight: 700 !important;
    font-size: clamp(1.55rem, 2vw, 2rem) !important;
    letter-spacing: 0.01em;
    background-image: linear-gradient(100deg, #5E3F86 0%, #8E4F9A 45%, #C0628F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 0.35rem rgba(255, 255, 255, 0.95)) drop-shadow(0 0 0.15rem rgba(255, 255, 255, 0.9));
    padding: 0 0.12em;
}
/* a flower cutout beside every main title, alternating sides */
.mz-title, .band { position: relative; }
.mz-shelf .mz-title, .band {
    background: url('/assets/img/art/bloom-2.webp') left calc(50% - 15rem) center / 3.6rem auto no-repeat;
}
.mz-shelf:nth-of-type(even) .mz-title, .band:nth-of-type(even) {
    background: url('/assets/img/art/bloom-5.webp') right calc(50% - 15rem) center / 4rem auto no-repeat;
}
#page-subscription .band, #page-about .band, #page-docs .band, #page-faq .band, #page-contact .band, #page-shop .band {
    background-size: 3.4rem auto;
}
@media (max-width: 52rem) { .mz-shelf .mz-title, .band { background: none !important; } }
.mz-shelf .mz-title, .band, .mz-shelf:nth-of-type(even) .mz-title, .band:nth-of-type(even),
#page-subscription .band, #page-about .band, #page-docs .band, #page-faq .band, #page-contact .band, #page-shop .band {
    background-size: auto 100% !important;
    min-height: 5.5rem;
}
.mz-shelf .mz-title, .band { background-position: calc(50% - 13.5rem) center !important; }
.mz-shelf:nth-of-type(even) .mz-title, .band:nth-of-type(even) { background-position: calc(50% + 13.5rem) center !important; }
/* flowers are real images now (main.js adds .mz-titlebloom) */
.mz-shelf .mz-title, .band, .mz-shelf:nth-of-type(even) .mz-title, .band:nth-of-type(even),
#page-subscription .band, #page-about .band, #page-docs .band, #page-faq .band, #page-contact .band, #page-shop .band {
    background: none !important; min-height: 0;
}
.mz-title, .band { position: relative; justify-content: center !important; }
.mz-titlebloom {
    position: absolute;
    top: 50%;
    width: 4.6rem;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 0.3rem 0.4rem rgba(110, 70, 120, 0.2));
}
.mz-titlebloom.is-l { right: calc(50% + 13rem); transform: translateY(-55%) rotate(-12deg); }
.mz-titlebloom.is-r { left: calc(50% + 13rem); transform: translateY(-55%) rotate(12deg) scaleX(-1); }
@media (max-width: 52rem) { .mz-titlebloom { display: none; } }
/* help cards: title and text sit higher, centred in the paper */
.mz-helprow .mz-fcard > span { padding-top: 0 !important; margin-top: -1.1rem; }
.mz-helprow .mz-fcard, .mz-helprow .mz-fcard:hover { padding-bottom: 4% !important; padding-top: 0 !important; }
/* MoonHavenRP box: as wide as the row of three cards above, and slim */
.crosslink.card {
    max-width: 76rem;
    margin-inline: auto;
    padding: 0.5rem 1.4rem !important;
    min-height: 0;
}
.crosslink__lead img { width: 3rem; height: 3rem; }
.mz-helprow .mz-fcard > span { margin-top: -0.35rem !important; }
.mz-helprow .mz-fcard > span { margin-top: 1.2rem !important; align-self: center; }

/* small buttons as little plaques: notched ends, gold edge, soft fill */
.btn--sm, .item__acts .btn, .addcart, .doccard .btn, .strip__card .btn {
    position: relative;
    isolation: isolate;
    border: 0 !important;
    border-radius: 0 !important;
    background: #D9B77F !important;
    clip-path: polygon(0.6rem 0, calc(100% - 0.6rem) 0, 100% 50%, calc(100% - 0.6rem) 100%, 0.6rem 100%, 0 50%);
    padding: 0.55rem 1.2rem !important;
    color: #4A3360 !important;
}
.btn--sm::after, .item__acts .btn::after, .addcart::after, .doccard .btn::after, .strip__card .btn::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 1.3px;
    z-index: -1;
    clip-path: inherit;
    background: linear-gradient(180deg, #FFF7FB, #F1E1EE) !important;
    transition: background 0.25s ease;
}
.btn--sm:hover::after, .item__acts .btn:hover::after, .addcart:hover::after, .doccard .btn:hover::after {
    background: linear-gradient(180deg, #FFFFFF, #F6E8F3) !important;
}
/* Add to cart is the main one: plum plaque */
.addcart::after { background: linear-gradient(180deg, #7C6596, #5C4675) !important; }
.addcart { color: #FFF6FB !important; }
.addcart:hover::after { background: linear-gradient(180deg, #8A72A5, #67507F) !important; }
.addcart.is-in::after { background: linear-gradient(180deg, #8FB79F, #6E9A80) !important; }
.addcart .ic { color: inherit; }
.item__acts .btn.addcart::after, .btn.addcart::after { background: linear-gradient(180deg, #7C6596, #5C4675) !important; }
.item__acts .btn.addcart:hover::after, .btn.addcart:hover::after { background: linear-gradient(180deg, #8A72A5, #67507F) !important; }
.item__acts .btn.addcart.is-in::after, .btn.addcart.is-in::after { background: linear-gradient(180deg, #8FB79F, #6E9A80) !important; }
.item__acts .btn.addcart, .btn.addcart { color: #FFF6FB !important; }
/* help cards a little lower into the sky, their pictures a little lower too */
.mz-helprow { margin-top: 5rem; }
.mz-foot { margin-top: -11rem; }
.mz-helprow .mz-fcard img { transform: translateY(0.9rem) rotate(-4deg); }
/* every button is a plaque: primary plum, ghost paper; hover only brightens */
.btn {
    position: relative;
    isolation: isolate;
    border: 0 !important;
    border-radius: 0 !important;
    background: #D9B77F !important;
    clip-path: polygon(0.6rem 0, calc(100% - 0.6rem) 0, 100% 50%, calc(100% - 0.6rem) 100%, 0.6rem 100%, 0 50%);
    color: #4A3360 !important;
}
.btn::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 1.3px;
    z-index: -1;
    clip-path: inherit;
    background: linear-gradient(180deg, #FFF7FB, #F1E1EE) !important;
    transition: filter 0.25s ease;
}
.btn--primary::after, .btn.btn--primary::after, .item__acts .btn.addcart::after {
    background: linear-gradient(180deg, #7C6596, #5C4675) !important;
}
.btn--primary, .btn.btn--primary { color: #FFF6FB !important; }
.btn:hover, .btn--ghost:hover, .btn--primary:hover { background: #E7C98E !important; filter: none !important; }
.btn:hover::after { filter: brightness(1.06); }
html:not([data-mh="light"]) .btn--ghost { color: #4A3360 !important; }

/* =====================================================================
   Buttons as the nav's plaques: double gold line, notched ends, a small
   sparkle. Plum for main actions, paper for the rest. 9-sliced SVG.
   ===================================================================== */
html body .btn, html body .btn:hover, html body .item__acts .btn, html body .addcart {
    clip-path: none !important;
    background: none !important;
    border: solid transparent !important;
    border-width: 0.75rem 1.1rem !important;
    border-image: url('/assets/img/art/btn-paper.svg') 12 18 fill / 0.75rem 1.1rem stretch !important;
    padding: 0.05rem 0.55rem !important;
    min-height: 0 !important;
    color: #4A3360 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    gap: 0.4rem;
    filter: drop-shadow(0 0.25rem 0.35rem rgba(110, 70, 120, 0.18));
    transition: filter 0.25s ease !important;
}
html body .btn::after, html body .item__acts .btn::after, html body .addcart::after, html body .btn--sm::after { display: none !important; }
html body .btn--primary, html body .btn.btn--primary, html body .btn.addcart, html body .item__acts .btn.addcart {
    border-image-source: url('/assets/img/art/btn-plum.svg') !important;
    color: #FFF6FB !important;
}
html body .btn:hover { filter: drop-shadow(0 0 0.5rem rgba(231, 201, 142, 0.7)) brightness(1.04) !important; }
.btn.addcart.is-in { filter: hue-rotate(-80deg) saturate(0.7); }
/* a small sparkle before the label of paper buttons without an icon */
.btn--ghost:not(:has(.ic))::before {
    content: "\2726";
    display: inline-block !important;
    position: static !important;
    font-size: 0.7em;
    color: #C9A15E;
    margin-right: 0.15rem;
    opacity: 1 !important;
    background: none !important;
}
.btn--wide { width: 100%; justify-content: center; }
/* help card text a touch lower inside the paper; the cards themselves back where they were */
.mz-helprow { margin-top: 3.5rem; }
.mz-foot { margin-top: -9.5rem; }
.mz-helprow .mz-fcard > span { margin-top: 2rem !important; }
.mz-helprow .mz-fcard img { transform: translateY(0.5rem) rotate(-4deg); }

/* a step deeper (owner: still too bright) */
body {
    background-color: #E3CDE0 !important;
    background-image:
        url('/assets/img/art/sparkles.svg'),
        radial-gradient(ellipse 60rem 40rem at 10% 0%, rgba(196, 160, 222, 0.7), transparent 70%),
        radial-gradient(ellipse 55rem 45rem at 95% 35%, rgba(226, 172, 206, 0.6), transparent 70%),
        radial-gradient(ellipse 60rem 50rem at 30% 85%, rgba(200, 168, 226, 0.5), transparent 70%),
        linear-gradient(180deg, #E8D4E6, #DFC6DD) !important;
    background-size: 37.5rem, auto, auto, auto, auto !important;
}
.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier,
.trust__item, .notice, .service, .value, .gstep, .doccard, .pillar, .strip__card,
.rail, .docstats > div, .mz-nav .drop__menu {
    background: linear-gradient(165deg, #F7EAF3 0%, #F0DDEC 55%, #E9D3E7 100%) border-box !important;
}
.mz-hero__copy::before { background: radial-gradient(ellipse at 50% 50%, rgba(234, 216, 234, 0.9) 38%, rgba(234, 216, 234, 0.55) 58%, rgba(234, 216, 234, 0) 74%) !important; }
.mz-foot__band { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9rem); mask-image: linear-gradient(180deg, transparent 0, #000 9rem); }

/* floating sparkles are back: twinkling star field + rising glowing motes,
   no static diamond pattern */
.sky, html .sky { display: block !important; z-index: 0; }
main, .mz-foot, .mz-helprow, .mz-hero { position: relative; z-index: 1; }
html[data-mh="light"] .sky__stars, .sky__stars { opacity: 0.85 !important; }
.mote { box-shadow: 0 0 0.6rem 0.15rem var(--mote); filter: blur(0.3px); }
body {
    background-image:
        radial-gradient(ellipse 60rem 40rem at 10% 0%, rgba(196, 160, 222, 0.7), transparent 70%),
        radial-gradient(ellipse 55rem 45rem at 95% 35%, rgba(226, 172, 206, 0.6), transparent 70%),
        radial-gradient(ellipse 60rem 50rem at 30% 85%, rgba(200, 168, 226, 0.5), transparent 70%),
        linear-gradient(180deg, #E8D4E6, #DFC6DD) !important;
    background-size: auto !important;
}
.mote {
    width: 12px !important;
    height: 12px !important;
    border-radius: 0 !important;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    box-shadow: none !important;
    filter: drop-shadow(0 0 4px var(--mote));
    animation-delay: calc(var(--delay, 0s) - 14s) !important;
}
.mote:nth-child(3n) { width: 18px !important; height: 18px !important; }
.mote:nth-child(4n+1) { width: 8px !important; height: 8px !important; }
@keyframes moteRise {
    0%   { transform: translate3d(0, 12vh, 0) scale(0.5) rotate(0deg); opacity: 0; }
    12%  { opacity: 0.9; }
    50%  { transform: translate3d(calc(var(--drift, 3vw) * -0.5), -50vh, 0) scale(1) rotate(45deg); opacity: 0.85; }
    85%  { opacity: 0.7; }
    100% { transform: translate3d(var(--drift, 3vw), -108vh, 0) scale(0.8) rotate(90deg); opacity: 0; }
}
.mote { width: 14px !important; height: 14px !important; filter: drop-shadow(0 0 5px var(--mote)) drop-shadow(0 0 2px rgba(255,255,255,0.9)); }
.mote:nth-child(3n) { width: 20px !important; height: 20px !important; }
.mote:nth-child(4n+1) { width: 9px !important; height: 9px !important; }
/* one more step deeper: dusky mauve-lilac */
body {
    background-color: #D5BAD4 !important;
    background-image:
        radial-gradient(ellipse 60rem 40rem at 10% 0%, rgba(176, 136, 206, 0.6), transparent 70%),
        radial-gradient(ellipse 55rem 45rem at 95% 35%, rgba(206, 146, 186, 0.5), transparent 70%),
        radial-gradient(ellipse 60rem 50rem at 30% 85%, rgba(178, 144, 210, 0.45), transparent 70%),
        linear-gradient(180deg, #DAC0D9, #CFB2CE) !important;
}
.mz-hero__copy::before { background: radial-gradient(ellipse at 50% 50%, rgba(226, 204, 226, 0.92) 38%, rgba(222, 200, 222, 0.55) 58%, rgba(218, 196, 218, 0) 74%) !important; }
.band__sub, .mz-lede--center, .mz-eyebrow { color: #5E4A70 !important; -webkit-text-fill-color: #5E4A70 !important; }
/* darker again (owner) */
body {
    background-color: #BFA0C2 !important;
    background-image:
        radial-gradient(ellipse 60rem 40rem at 10% 0%, rgba(150, 110, 190, 0.55), transparent 70%),
        radial-gradient(ellipse 55rem 45rem at 95% 35%, rgba(190, 120, 170, 0.45), transparent 70%),
        radial-gradient(ellipse 60rem 50rem at 30% 85%, rgba(150, 116, 190, 0.45), transparent 70%),
        linear-gradient(180deg, #C6A8C8, #B697BA) !important;
}
.mz-hero__copy::before { background: radial-gradient(ellipse at 50% 50%, rgba(222, 198, 222, 0.94) 40%, rgba(214, 190, 216, 0.6) 60%, rgba(206, 182, 210, 0) 76%) !important; }
.band__sub, .mz-lede--center, .mz-eyebrow { color: #4A3660 !important; -webkit-text-fill-color: #4A3660 !important; }
.shop__count, .rail__label, .sort__label, .count { color: #4A3660 !important; }
/* smaller rising sparkles (owner) */
.mote { width: 9px !important; height: 9px !important; }
.mote:nth-child(3n) { width: 12px !important; height: 12px !important; }
.mote:nth-child(4n+1) { width: 6px !important; height: 6px !important; }
.mz-helprow { position: relative; z-index: 3 !important; }
/* paper buttons turn soft lilac on hover, not whiter */
html body .btn:not(.btn--primary):not(.addcart):hover {
    border-image-source: url('/assets/img/art/btn-paper-hover.svg') !important;
    filter: drop-shadow(0 0.25rem 0.35rem rgba(110, 70, 120, 0.22)) !important;
}
html body .btn--primary:hover, html body .btn.addcart:hover {
    filter: drop-shadow(0 0 0.45rem rgba(231, 201, 142, 0.6)) brightness(1.08) !important;
}
/* footer painting blends into the darker page */
.mz-foot__band,
html:not([data-mh="light"]) .mz-foot__band {
    background:
        linear-gradient(180deg, #B697BA 0%, rgba(182, 151, 186, 0.75) 14%, rgba(182, 151, 186, 0) 34%),
        linear-gradient(180deg, rgba(120, 86, 140, 0.28), rgba(120, 86, 140, 0.18)),
        linear-gradient(180deg, rgba(74, 55, 96, 0) 0%, rgba(74, 55, 96, 0) 48%, rgba(78, 57, 102, 0.5) 64%, rgba(70, 51, 92, 0.86) 80%, #46335C 100%),
        url('/assets/img/art/footer-scene.webp') center top / cover no-repeat !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
/* titles readable on the darker page: soft light halo, brighter flourishes */
.mz-title .mz-script, .band h2, .mz-h1 {
    filter: drop-shadow(0 0 0.5rem rgba(255, 240, 250, 0.85)) drop-shadow(0 0 0.15rem rgba(255, 245, 252, 0.9));
}
.mz-title::before, .mz-title::after, .band::before, .band::after {
    background-image: url('/assets/img/art/flourish-light.svg') !important;
    filter: drop-shadow(0 0 0.2rem rgba(255, 236, 200, 0.6));
}
.band__sub { color: #3E2C52 !important; -webkit-text-fill-color: #3E2C52 !important; }

/* =====================================================================
   Glass (owner): frosted, see-through cards with a light edge, the gold
   filigree kept on top. Nested boxes go clear so they never double up.
   ===================================================================== */
.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier,
.trust__item, .notice, .service, .value, .gstep, .doccard, .pillar, .strip__card,
.rail, .docstats > div {
    background: linear-gradient(160deg, rgba(255, 246, 252, 0.52) 0%, rgba(250, 232, 246, 0.36) 55%, rgba(240, 220, 240, 0.30) 100%) border-box !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 1.4rem rgba(255, 255, 255, 0.18) !important;
}
.card .card, .card .matrix-card, .card .legal, .matrix-card .matrix-card, .card .note, .card .tier {
    background: rgba(255, 246, 252, 0.18) border-box !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.item__shot, .doccard__shot { background: linear-gradient(150deg, rgba(240, 222, 246, 0.75), rgba(246, 222, 236, 0.7)) !important; }
.mz-nav .drop__menu { background: linear-gradient(165deg, #F7EAF3, #EBD6EA) border-box !important; }
/* smooth hover: the lilac paper fades in over the plain one */
html body .btn:not(.btn--primary):not(.addcart):hover { border-image-source: url('/assets/img/art/btn-paper.svg') !important; }
html body .btn { isolation: isolate; position: relative; }
html body .btn:not(.btn--primary):not(.addcart)::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: -0.75rem -1.1rem;
    z-index: -1;
    border: solid transparent;
    border-width: 0.75rem 1.1rem;
    border-image: url('/assets/img/art/btn-paper-hover.svg') 12 18 fill / 0.75rem 1.1rem stretch;
    background: none !important;
    clip-path: none !important;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
html body .btn:not(.btn--primary):not(.addcart):hover::after { opacity: 1; }
html body .btn { transition: filter 0.35s ease !important; }
/* footer: fade its top edge out instead of a flat colour band (no seam) */
.mz-foot__band,
html:not([data-mh="light"]) .mz-foot__band {
    background:
        linear-gradient(180deg, rgba(120, 86, 140, 0.25), rgba(120, 86, 140, 0.15)),
        linear-gradient(180deg, rgba(74, 55, 96, 0) 0%, rgba(74, 55, 96, 0) 48%, rgba(78, 57, 102, 0.5) 64%, rgba(70, 51, 92, 0.86) 80%, #46335C 100%),
        url('/assets/img/art/footer-scene.webp') center top / cover no-repeat !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.35) 5rem, #000 13rem) !important;
    mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.35) 5rem, #000 13rem) !important;
}

/* logo word: pearly gradient with a soft glow; STORE in warm gold */
.mz-brand__word {
    background-image: linear-gradient(100deg, #FFF6FB 0%, #F6D9F0 40%, #FFE9C2 75%, #FFF6FB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 0.45rem rgba(255, 214, 240, 0.75)) drop-shadow(0 0 0.15rem rgba(255, 240, 220, 0.8));
    padding: 0 0.15em 0.1em 0.05em;
}
.mz-brand__sub {
    background-image: linear-gradient(90deg, #E9C98C, #FFF0CF, #E9C98C);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 0.3rem rgba(255, 220, 160, 0.7));
}
/* hover: no overlay layer (it drew as a block) - a soft tint shift instead */
html body .btn:not(.btn--primary):not(.addcart)::after { display: none !important; }
html body .btn:not(.btn--primary):not(.addcart) {
    transition: filter 0.4s ease !important;
    filter: drop-shadow(0 0.25rem 0.35rem rgba(110, 70, 120, 0.18)) saturate(1) brightness(1);
}
html body .btn:not(.btn--primary):not(.addcart):hover {
    filter: drop-shadow(0 0.3rem 0.5rem rgba(140, 90, 160, 0.3)) saturate(1.9) brightness(0.95) hue-rotate(-8deg) !important;
}
/* vines hang from under the bar, never blurred behind it */
.mz-vine { top: 6rem !important; }
body.has-promo .mz-vine { top: 8.7rem !important; }
@media (max-width: 110rem) { .mz-vine { top: 5.6rem !important; } }

/* every button-like control uses the same plaques as Add to cart / View */
html body .mz-btn, html body .rail__clear, html body .cartclear, html body .chat__launcher {
    clip-path: none !important;
    background: none !important;
    border: solid transparent !important;
    border-width: 0.75rem 1.1rem !important;
    border-image: url('/assets/img/art/btn-paper.svg') 12 18 fill / 0.75rem 1.1rem stretch !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.15rem 0.7rem !important;
    color: #4A3360 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    filter: drop-shadow(0 0.25rem 0.35rem rgba(110, 70, 120, 0.18));
    transition: filter 0.4s ease !important;
    transform: none !important;
}
html body .mz-btn::before, html body .mz-btn::after { display: none !important; }
html body .mz-btn:not(.mz-btn--light), html body .chat__launcher {
    border-image-source: url('/assets/img/art/btn-plum.svg') !important;
    color: #FFF6FB !important;
}
html body .mz-btn { font-size: 1.15rem; padding: 0.3rem 1rem !important; }
html body .mz-btn:hover, html body .chat__launcher:hover {
    filter: drop-shadow(0 0 0.45rem rgba(231, 201, 142, 0.6)) brightness(1.08) !important;
}
html body .mz-btn--light:hover, html body .rail__clear:hover, html body .cartclear:hover {
    filter: drop-shadow(0 0.3rem 0.5rem rgba(140, 90, 160, 0.3)) saturate(1.9) brightness(0.95) hue-rotate(-8deg) !important;
}
.mz-btn .ic { color: inherit; }
/* hero painting: box spans the full width, picture pinned right, long soft
   fade from the left - no visible edge on any screen */
@media (min-width: 64.01rem) {
    .mz-hero__art, .mz-hero__art[style] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: auto !important;
        height: 100% !important;
        background-size: auto 100% !important;
        background-position: right center !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0,0,0,0.3) 34%, rgba(0,0,0,0.85) 48%, #000 58%), linear-gradient(0deg, transparent 0%, #000 16%) !important;
        mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0,0,0,0.3) 34%, rgba(0,0,0,0.85) 48%, #000 58%), linear-gradient(0deg, transparent 0%, #000 16%) !important;
    }
}
/* text glow fades to nothing inside its own box - no pale rectangle */
@media (min-width: 64.01rem) {
    .mz-hero__copy::before {
        inset: -4rem -6rem !important;
        background: radial-gradient(closest-side, rgba(226, 204, 228, 0.85) 0%, rgba(222, 198, 224, 0.6) 45%, rgba(216, 192, 220, 0.25) 75%, rgba(216, 192, 220, 0) 100%) !important;
    }
}
/* glass cards: no inner highlight rectangle, and nothing that darkens on
   hover (a filter on a frosted card turned it dark plum) */
.card::before { display: none !important; }
.card, .item.card, .matrix-card, .legal, .explain__item, .way, .note, .tier,
.trust__item, .notice, .service, .value, .gstep, .doccard, .pillar, .strip__card,
.rail, .docstats > div, .member {
    box-shadow: 0 0.6rem 1.4rem -0.6rem rgba(110, 70, 120, 0.25) !important;
    filter: none !important;
    border-color: transparent !important;
}
.card:hover, .item.card:hover, .matrix-card:hover, .legal:hover, .explain__item:hover, .way:hover, .note:hover, .tier:hover,
.trust__item:hover, .notice:hover, .service:hover, .value:hover, .gstep:hover, .doccard:hover, .pillar:hover, .strip__card:hover, .member:hover {
    filter: none !important;
    box-shadow: 0 0.6rem 1.4rem -0.6rem rgba(110, 70, 120, 0.25) !important;
    background: linear-gradient(160deg, rgba(255, 246, 252, 0.52) 0%, rgba(250, 232, 246, 0.36) 55%, rgba(240, 220, 240, 0.30) 100%) border-box !important;
}
a.card:hover, a.item.card:hover, .doccard:hover, a.strip__card:hover {
    box-shadow: 0 1rem 1.8rem -0.6rem rgba(110, 70, 120, 0.32) !important;
    background: linear-gradient(160deg, rgba(255, 248, 253, 0.62) 0%, rgba(250, 236, 248, 0.46) 55%, rgba(242, 224, 242, 0.40) 100%) border-box !important;
}
.strip__card:hover::after { display: none !important; }
/* step numbers centred in their circles; FAQ numbers readable */
.gstep__n, .bullet__no {
    display: grid !important;
    place-items: center !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid #C99A7A !important;
    background: linear-gradient(160deg, #FFF6FB, #F0DCEC) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #6E4E8C !important;
    -webkit-text-fill-color: #6E4E8C !important;
    flex: none;
}
.faq__no {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700;
    font-size: 1rem !important;
    color: #9A6FA8 !important;
    -webkit-text-fill-color: #9A6FA8 !important;
    margin-right: 0.4rem;
}