/*
 * Maple Site Kit — combined block stylesheet
 * Auto-generated by scripts/build-blocks-css.sh — do not edit by hand.
 * Concatenates blocks/*/style.css and blocks/*/*/style.css.
 */

/* ── article-slider ── */
/*
 * Maple Article Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Magazine layout: featured post left + 2x2 card grid right.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.msk-article-slider { position: relative; }

.msk-article-slider__layout { display: grid; grid-template-columns: 1fr 1fr; min-block-size: 600px; }

/* ── Featured Article (Left) ──────────────────────────────────────────────── */

.msk-article-slider__featured { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--msk-space-8, 2rem); overflow: hidden; }

.msk-article-slider__featured-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

.msk-article-slider__featured-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.7) 100%); }

.msk-article-slider__featured-content { position: relative; z-index: 2; }

.msk-article-slider__heading { display: inline-block; font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: var(--msk-tracking-widest, 0.15em); color: rgba(255,255,255,0.8); margin-block-end: var(--msk-space-6, 1.5rem); }

.msk-article-slider__author { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); margin-block-end: var(--msk-space-4, 1rem); }

.msk-article-slider__avatar { inline-size: 40px; block-size: 40px; border-radius: var(--msk-radius-full, 9999px); border: 2px solid rgba(255,255,255,0.5); object-fit: cover; }

.msk-article-slider__author-name { font-size: var(--msk-font-size-sm, 0.875rem); color: #fff; font-weight: 500; }

.msk-article-slider__featured-title { font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 700; font-style: italic; color: #fff; line-height: var(--msk-leading-snug, 1.375); margin: 0 0 var(--msk-space-3, 0.75rem); }

.msk-article-slider__featured-title a { color: inherit; text-decoration: none; }
.msk-article-slider__featured-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.msk-article-slider__meta { font-size: var(--msk-font-size-xs, 0.75rem); color: rgba(255,255,255,0.7); display: flex; gap: var(--msk-space-2, 0.5rem); margin-block-end: var(--msk-space-6, 1.5rem); }

.msk-article-slider__next-cat { display: inline-block; padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 500; text-decoration: none; border-radius: var(--msk-radius-md, 0.5rem); transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-article-slider__next-cat:hover { border-color: #fff; }

/* ── Article Card Grid (Right) ────────────────────────────────────────────── */

.msk-article-slider__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-4, 1rem); padding: var(--msk-space-4, 1rem); background: var(--msk-color-surface-alt, #f6f6f6); }

.msk-article-slider__card { display: flex; flex-direction: column; background: var(--msk-color-surface, #fff); border-radius: var(--msk-radius-lg, 1rem); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out), transform var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out); }

.msk-article-slider__card:hover { box-shadow: var(--msk-shadow-md, 0 4px 12px rgba(0,0,0,0.1)); transform: translateY(-2px); }

.msk-article-slider__card-image { aspect-ratio: 16 / 10; overflow: hidden; }

.msk-article-slider__card-image img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--msk-duration-slow, 400ms) var(--msk-ease-out, ease-out); }

.msk-article-slider__card:hover .msk-article-slider__card-image img { transform: scale(1.05); }

.msk-article-slider__card-body { padding: var(--msk-space-4, 1rem); flex: 1; display: flex; flex-direction: column; }

.msk-article-slider__card-title { font-size: var(--msk-font-size-base, 1rem); font-weight: 700; line-height: var(--msk-leading-snug, 1.375); margin: 0 0 var(--msk-space-3, 0.75rem); color: var(--msk-color-text-primary, #111); }

.msk-article-slider__card-meta { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); margin-block-start: auto; }

.msk-article-slider__card-avatar { inline-size: 32px; block-size: 32px; border-radius: var(--msk-radius-full, 9999px); object-fit: cover; flex-shrink: 0; }

.msk-article-slider__card-author { display: block; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: var(--msk-color-text-primary, #111); }

.msk-article-slider__card-meta time { display: block; font-size: var(--msk-font-size-xs, 0.75rem); color: var(--msk-color-text-muted, #666); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-article-slider__layout { grid-template-columns: 1fr; }
    .msk-article-slider__featured { min-block-size: 400px; }
    .msk-article-slider__grid { grid-template-columns: 1fr; }
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-article-slider__card, .msk-article-slider__card-image img, .msk-article-slider__next-cat { transition: none; }
}

/* ── cinematic-slider ── */
/*
 * Maple Cinematic Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Full-viewport with video/image backgrounds, dark overlay, centred content,
 * vertical dot navigation, and bottom feature bar.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.msk-cinematic-slider {
    position: relative;
    inline-size: 100%;
    block-size: 100vh;
    block-size: 100svh;
    overflow: hidden;
    background: #111;
}

/* ── Slides ───────────────────────────────────────────────────────────────── */

.msk-cinematic-slider__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity    var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out),
        visibility var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out);
}

.msk-cinematic-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ── Video Background ─────────────────────────────────────────────────────── */

.msk-cinematic-slider__bg-video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ── Image Background ─────────────────────────────────────────────────────── */

.msk-cinematic-slider__bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Dark Overlay ─────────────────────────────────────────────────────────── */

.msk-cinematic-slider__overlay {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
}

/* ── Centred Content ──────────────────────────────────────────────────────── */

.msk-cinematic-slider__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--msk-space-8, 2rem);
    max-inline-size: 900px;
}

/* Icon */
.msk-cinematic-slider__icon {
    display: block;
    font-size: 3rem;
    margin-block-end: var(--msk-space-4, 1rem);
    line-height: 1;
}

/* Headline — serif, large */
.msk-cinematic-slider__headline {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    font-style: italic;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 var(--msk-space-4, 1rem);
    text-wrap: balance;
}

/* Subtitle */
.msk-cinematic-slider__subtitle {
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-widest, 0.15em);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 var(--msk-space-8, 2rem);
}

/* CTA Button — accent/gold style */
.msk-cinematic-slider__cta {
    display: inline-block;
    padding: var(--msk-space-4, 1rem) var(--msk-space-10, 2.5rem);
    background: var(--msk-color-accent, #c9a96e);
    color: #fff;
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wider, 0.1em);
    text-decoration: none;
    transition:
        background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        transform  var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-cinematic-slider__cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* ── Vertical Dot Navigation ──────────────────────────────────────────────── */

.msk-cinematic-slider__dots {
    position: absolute;
    inset-inline-end: var(--msk-space-6, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-3, 0.75rem);
}

.msk-cinematic-slider__dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--msk-radius-full, 9999px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition:
        background   var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-cinematic-slider__dot:hover {
    border-color: #fff;
}

.msk-cinematic-slider__dot.is-active {
    background: #fff;
    border-color: #fff;
}

/* ── Bottom Feature Bar ───────────────────────────────────────────────────── */

.msk-cinematic-slider__features {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.msk-cinematic-slider__feature {
    display: flex;
    align-items: center;
    gap: var(--msk-space-3, 0.75rem);
    padding: var(--msk-space-5, 1.25rem) var(--msk-space-10, 2.5rem);
    color: #fff;
    text-decoration: none;
    font-size: var(--msk-font-size-base, 1rem);
    font-weight: 600;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.15);
    transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-cinematic-slider__feature:last-child {
    border-inline-end: none;
}

.msk-cinematic-slider__feature:hover {
    background: rgba(255, 255, 255, 0.1);
}

.msk-cinematic-slider__feature-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {

    .msk-cinematic-slider {
        block-size: 80vh;
        block-size: 80svh;
    }

    .msk-cinematic-slider__headline {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
    }

    .msk-cinematic-slider__dots {
        inset-inline-end: var(--msk-space-3, 0.75rem);
    }

    .msk-cinematic-slider__features {
        flex-direction: column;
    }

    .msk-cinematic-slider__feature {
        justify-content: center;
        border-inline-end: none;
        border-block-end: 1px solid rgba(255, 255, 255, 0.1);
        padding: var(--msk-space-4, 1rem);
    }

    .msk-cinematic-slider__feature:last-child {
        border-block-end: none;
    }
}

/* ── Editor ───────────────────────────────────────────────────────────────── */

.msk-cinematic-slider--editor {
    border: 1px dashed var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
    min-height: 120px;
}

.msk-cinematic-slide--editor {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: var(--msk-radius-md, 0.5rem);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--msk-space-2, 0.5rem);
    overflow: hidden;
    background-color: #333;
}

.msk-cinematic-slide__editor-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    border-radius: inherit;
}

.msk-cinematic-slide__editor-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--msk-space-4, 1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.msk-cinematic-slide__editor-icon {
    font-size: 24px;
    line-height: 1;
}

.msk-cinematic-slide__editor-headline {
    color: #fff;
    font-weight: 700;
    font-style: italic;
    font-size: 15px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.msk-cinematic-slide__editor-subtitle {
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.msk-cinematic-slide__editor-cta {
    display: inline-block;
    background: rgba(201, 169, 110, 0.8);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 12px;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-cinematic-slider__slide,
    .msk-cinematic-slider__dot,
    .msk-cinematic-slider__cta,
    .msk-cinematic-slider__feature {
        transition: none;
    }

    .msk-cinematic-slider__bg-video {
        display: none;
    }
}

/* ── comparison-slider ── */
/*
 * Maple Comparison Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Split layout: left text + feature columns, right overlapping product
 * images with divider. Tab navigation. Crossfade transitions.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.msk-comparison-slider { position: relative; padding: var(--msk-space-12, 3rem) var(--msk-space-8, 2rem); }

/* Slides */
.msk-comparison-slider__slide { display: none; }
.msk-comparison-slider__slide.is-active { display: block; animation: mskCompFadeIn 500ms var(--msk-ease-out, ease-out); }

@keyframes mskCompFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Split layout */
.msk-comparison-slider__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-10, 2.5rem); align-items: center; max-inline-size: 1200px; margin: 0 auto; }

/* Left: text + features */
.msk-comparison-slider__text { text-align: center; }

.msk-comparison-slider__headline { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; font-style: italic; color: var(--msk-color-text-primary, #111); margin: 0 0 var(--msk-space-4, 1rem); line-height: var(--msk-leading-snug, 1.375); }

.msk-comparison-slider__description { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #666); line-height: 1.6; margin: 0 0 var(--msk-space-4, 1rem); max-inline-size: 400px; margin-inline: auto; }

.msk-comparison-slider__cta { display: inline-block; color: var(--msk-color-accent, #2563eb); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; text-decoration: none; margin-block-end: var(--msk-space-8, 2rem); }
.msk-comparison-slider__cta:hover { text-decoration: underline; }

/* Feature columns */
.msk-comparison-slider__features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-8, 2rem); text-align: center; }

.msk-comparison-slider__feat-name { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; margin: 0 0 var(--msk-space-4, 1rem); }

.msk-comparison-slider__feat { display: flex; flex-direction: column; align-items: center; gap: var(--msk-space-2, 0.5rem); margin-block-end: var(--msk-space-5, 1.25rem); }

.msk-comparison-slider__feat-icon { display: flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; background: #1d1d1f; color: #fff; border-radius: var(--msk-radius-lg, 1rem); font-size: 20px; line-height: 1; }

.msk-comparison-slider__feat-text { font-size: var(--msk-font-size-xs, 0.75rem); color: var(--msk-color-text-muted, #666); }

/* Right: overlapping images */
.msk-comparison-slider__images { position: relative; display: flex; align-items: flex-end; justify-content: center; min-block-size: 400px; }

.msk-comparison-slider__img { position: relative; }

.msk-comparison-slider__img--left { z-index: 2; margin-inline-end: -40px; }
.msk-comparison-slider__img--right { z-index: 1; }

.msk-comparison-slider__img img { max-block-size: 400px; inline-size: auto; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }

.msk-comparison-slider__img-label { position: absolute; bottom: -8px; background: #1d1d1f; color: #fff; font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 600; padding: var(--msk-space-1, 0.25rem) var(--msk-space-3, 0.75rem); border-radius: var(--msk-radius-sm, 0.25rem); }

.msk-comparison-slider__img--left .msk-comparison-slider__img-label { inset-inline-start: 0; }
.msk-comparison-slider__img--right .msk-comparison-slider__img-label { inset-inline-end: 0; }

/* Divider line between images */
.msk-comparison-slider__divider { position: absolute; top: 0; bottom: 0; left: 50%; inline-size: 2px; background: #1d1d1f; z-index: 3; }

/* Tab navigation */
.msk-comparison-slider__tabs { display: flex; justify-content: center; gap: 0; margin-block-start: var(--msk-space-10, 2.5rem); background: var(--msk-color-surface-alt, #f6f6f6); border-radius: var(--msk-radius-full, 9999px); padding: var(--msk-space-1, 0.25rem); inline-size: fit-content; margin-inline: auto; }

.msk-comparison-slider__tab { padding: var(--msk-space-2, 0.5rem) var(--msk-space-6, 1.5rem); background: transparent; border: none; cursor: pointer; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 500; color: var(--msk-color-text-muted, #666); border-radius: var(--msk-radius-full, 9999px); transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }

.msk-comparison-slider__tab:hover { color: var(--msk-color-text-primary, #111); }

.msk-comparison-slider__tab.is-active { background: var(--msk-color-text-primary, #111); color: #fff; }

/* Mobile */
@media (max-width: 782px) {
    .msk-comparison-slider__layout { grid-template-columns: 1fr; }
    .msk-comparison-slider__images { min-block-size: 250px; }
    .msk-comparison-slider__img img { max-block-size: 250px; }
    .msk-comparison-slider__img--left { margin-inline-end: -20px; }
}

/* Editor */
.msk-comparison-slider--editor { border: 1px dashed var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-md, 0.5rem); padding: var(--msk-space-2, 0.5rem); min-height: 80px; }

.msk-comparison-slide--editor { border: 1px solid var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-md, 0.5rem); padding: var(--msk-space-3, 0.75rem); margin-block-end: var(--msk-space-2, 0.5rem); background: var(--msk-color-surface, #fff); }

.msk-comparison-slide__editor-content { display: flex; flex-direction: column; gap: 2px; }
.msk-comparison-slide__editor-tab { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #fff; background: #111; padding: 1px 6px; border-radius: 3px; align-self: flex-start; }
.msk-comparison-slide__editor-headline { font-size: 14px; font-weight: 700; font-style: italic; }
.msk-comparison-slide__editor-vs { font-size: 11px; color: #525252; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .msk-comparison-slider__slide.is-active { animation: none; }
    .msk-comparison-slider__tab { transition: none; }
}

/* ── contact-collaborate ── */
/*
 * Maple Contact Collaborate — Styles
 */

.msk-contact-collab { padding: var(--msk-space-4, 1rem); }

/* ── Card ──────────────────────────────────────────────────────────── */

.msk-contact-collab__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); position: relative; }

.msk-contact-collab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-12, 3rem); align-items: start; }

/* ── Left Column ───────────────────────────────────────────────────── */

.msk-contact-collab__left { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }

.msk-contact-collab__headline { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; color: inherit; margin: 0; line-height: 1.15; }

.msk-contact-collab__subtitle { font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.6; margin: 0; }
.msk-contact-collab__email { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-inline-start: var(--msk-space-1, 0.25rem); transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-collab__email:hover { color: #000; }

.msk-contact-collab__illustration { inline-size: 100%; max-inline-size: 480px; block-size: auto; margin-block-start: var(--msk-space-4, 1rem); }

/* ── Right Column — Form ───────────────────────────────────────────── */

.msk-contact-collab__right { display: flex; flex-direction: column; }

.msk-contact-collab__form { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); }

.msk-contact-collab__field { display: flex; flex-direction: column; gap: var(--msk-space-1, 0.25rem); }

.msk-contact-collab__label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: inherit; }
.msk-contact-collab__required { color: #7b2020; }

.msk-contact-collab__input,
.msk-contact-collab__textarea { inline-size: 100%; padding: var(--msk-space-2, 0.5rem) 0; font-size: var(--msk-font-size-sm, 0.875rem); font-family: inherit; color: inherit; background: transparent; border: none; border-block-end: 1px solid rgba(0,0,0,0.4); outline: none; box-sizing: border-box; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-collab__input::placeholder,
.msk-contact-collab__textarea::placeholder { color: inherit; opacity: 0.4; }
.msk-contact-collab__input:focus,
.msk-contact-collab__textarea:focus { border-color: rgba(0,0,0,0.5); }
.msk-contact-collab__textarea { resize: vertical; min-block-size: 40px; }

/* ── Services Checkboxes ───────────────────────────────────────────── */

.msk-contact-collab__services { border: none; margin: 0; padding: 0; }
.msk-contact-collab__services legend { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: inherit; margin-block-end: var(--msk-space-3, 0.75rem); }

.msk-contact-collab__checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-2, 0.5rem) var(--msk-space-6, 1.5rem); }

.msk-contact-collab__checkbox { display: flex; align-items: center; gap: var(--msk-space-2, 0.5rem); font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; cursor: pointer; }
.msk-contact-collab__checkbox input { inline-size: 16px; block-size: 16px; cursor: pointer; flex-shrink: 0; }

/* ── Submit Button ─────────────────────────────────────────────────── */

.msk-contact-collab__submit { display: inline-flex; align-items: center; justify-content: center; padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem); font-size: var(--msk-font-size-base, 1rem); font-weight: 600; font-family: inherit; color: #fff; border: none; border-radius: var(--msk-radius-md, 0.5rem); cursor: pointer; align-self: flex-start; margin-block-start: var(--msk-space-2, 0.5rem); transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-collab__submit:hover { opacity: 0.9; }

/* ── v2: content-only (wrapper handled by Group blocks) ───────────── */

.msk-contact-collab--v2 { padding: 0; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-contact-collab { padding: var(--msk-space-4, 1rem); }
    .msk-contact-collab__card { padding: var(--msk-space-6, 1.5rem); }
    .msk-contact-collab__grid { grid-template-columns: 1fr; }
    .msk-contact-collab__checkbox-grid { grid-template-columns: 1fr; }
}

/* ── Decorative SVG ────────────────────────────────────────────────── */

.msk-contact-collab__decor { position: absolute; top: 0; right: 0; width: 45%; height: auto; opacity: 0.08; pointer-events: none; color: currentColor; }

/* ── Editor ────────────────────────────────────────────────────────── */

/* Editor wrapper — no centering override; let the real layout flow naturally */
.msk-contact-collab--editor { border-radius: var(--msk-radius-md, 0.5rem); }

/* Input / textarea stand-ins */
.msk-contact-collab__editor-input-bar { inline-size: 100%; padding: var(--msk-space-2, 0.5rem) 0; border-block-end: 1px solid rgba(0,0,0,0.2); box-sizing: border-box; }
.msk-contact-collab__editor-textarea-bar { inline-size: 100%; padding: var(--msk-space-2, 0.5rem) 0; padding-block-end: 3rem; border-block-end: 1px solid rgba(0,0,0,0.2); box-sizing: border-box; }
.msk-contact-collab__editor-input-placeholder { font-size: var(--msk-font-size-sm, 0.875rem); color: #888; }

/* Illustration placeholder */
.msk-contact-collab__editor-illustration-placeholder { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 140px; background: rgba(0,0,0,0.06); border-radius: var(--msk-radius-md, 0.5rem); margin-block-start: var(--msk-space-4, 1rem); font-size: var(--msk-font-size-sm, 0.875rem); color: #777; }

/* Services wrapper in editor */
.msk-contact-collab__editor-services { display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); }

/* Checkbox stand-in box */
.msk-contact-collab__editor-checkbox-box { display: inline-block; inline-size: 16px; block-size: 16px; border: 1.5px solid rgba(0,0,0,0.3); border-radius: 3px; flex-shrink: 0; }

/* Muted placeholder checkboxes */
.msk-contact-collab__editor-checkbox-placeholder { opacity: 0.5; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-contact-collab__email,
    .msk-contact-collab__input,
    .msk-contact-collab__textarea,
    .msk-contact-collab__submit { transition: none; }
}

/* ── contact-editorial ── */
/*
 * Maple Contact Editorial — Styles
 */

.msk-contact-editorial { padding: var(--msk-space-4, 1rem); }
.msk-contact-editorial__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; color: rgba(255,255,255,0.7); }

/* ── Decorative SVG ─────────────────────────────────────────────────── */

.msk-contact-editorial__decor { position: absolute; top: 0; right: 0; width: 55%; height: 100%; pointer-events: none; opacity: 0.08; color: #fff; }

/* ── Header ────────────────────────────────────────────────────────── */

.msk-contact-editorial__header { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem) 0; }

.msk-contact-editorial__headline { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 700; color: #fff; margin: 0; line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; flex: 1; }

.msk-contact-editorial__image-wrap { flex-shrink: 0; inline-size: clamp(120px, 14vw, 200px); aspect-ratio: 3 / 4; overflow: hidden; margin-inline-start: var(--msk-space-8, 2rem); }
.msk-contact-editorial__image { inline-size: 100%; block-size: 100%; object-fit: cover; filter: grayscale(1); }

/* ── Body ──────────────────────────────────────────────────────────── */

.msk-contact-editorial__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-10, 2.5rem); padding: var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem); }

/* Left column */
.msk-contact-editorial__left { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); justify-content: space-between; }

.msk-contact-editorial__email { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: rgba(255,255,255,0.9); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-editorial__email:hover { color: #fff; }

.msk-contact-editorial__desc { font-size: var(--msk-font-size-xs, 0.75rem); line-height: var(--msk-leading-normal, 1.6); color: rgba(255,255,255,0.65); margin: 0; max-inline-size: 380px; text-transform: uppercase; letter-spacing: 0.5px; }

.msk-contact-editorial__cta { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 500; color: rgba(180,200,120,0.9); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-editorial__cta:hover { color: #fff; }

/* Right column */
.msk-contact-editorial__right { display: flex; flex-direction: column; gap: var(--msk-space-8, 2rem); }

.msk-contact-editorial__phones { display: flex; flex-direction: column; gap: var(--msk-space-1, 0.25rem); }
.msk-contact-editorial__phone { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: rgba(255,255,255,0.9); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-editorial__phone:hover { color: #fff; }

.msk-contact-editorial__locations { display: flex; flex-direction: column; gap: var(--msk-space-6, 1.5rem); }
.msk-contact-editorial__location { display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); }
.msk-contact-editorial__location-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: rgba(255,255,255,0.9); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.msk-contact-editorial__location-body { font-size: var(--msk-font-size-xs, 0.75rem); line-height: var(--msk-leading-normal, 1.6); color: rgba(255,255,255,0.65); margin: 0; max-inline-size: 320px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Footer Bar ────────────────────────────────────────────────────── */

.msk-contact-editorial__footer { display: flex; justify-content: space-between; align-items: flex-end; padding: var(--msk-space-6, 1.5rem) var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem); }

.msk-contact-editorial__socials { display: flex; flex-wrap: wrap; gap: var(--msk-space-5, 1.25rem); align-items: flex-end; }
.msk-contact-editorial__social-link { font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: rgba(255,255,255,0.65); transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-editorial__social-link:hover { color: #fff; }
.msk-contact-editorial__social-link span { font-size: 0.85em; margin-inline-start: 2px; }

.msk-contact-editorial__copyright { display: flex; align-items: center; gap: var(--msk-space-1, 0.25rem); line-height: 1; }
.msk-contact-editorial__copyright-symbol { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 300; color: rgba(255,255,255,0.9); line-height: 0.8; }
.msk-contact-editorial__copyright-year { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 700; color: rgba(255,255,255,0.9); line-height: 0.8; }

/* ── v2: content-only (wrapper handled by Group blocks) ───────────── */

.msk-contact-editorial--v2 { padding: 0; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-contact-editorial__header { flex-direction: column; gap: var(--msk-space-6, 1.5rem); }
    .msk-contact-editorial__image-wrap { inline-size: 100%; aspect-ratio: 16 / 9; margin-inline-start: 0; }
    .msk-contact-editorial__body { grid-template-columns: 1fr; }
    .msk-contact-editorial__footer { flex-direction: column; align-items: flex-start; gap: var(--msk-space-6, 1.5rem); }
}

/* ── Editor ────────────────────────────────────────────────────────── */

/* The editor uses the same structural CSS as the frontend.
   These rules handle editor-specific overrides only. */

.msk-contact-editorial--editor { border-radius: var(--msk-radius-md, 0.5rem); }

/* Pointer events: links/headings are non-interactive in the editor */
.msk-contact-editorial--editor a,
.msk-contact-editorial--editor .msk-contact-editorial__email,
.msk-contact-editorial--editor .msk-contact-editorial__cta,
.msk-contact-editorial--editor .msk-contact-editorial__phone,
.msk-contact-editorial--editor .msk-contact-editorial__social-link { pointer-events: none; }

/* Placeholder text for empty fields */
.msk-contact-editorial__placeholder,
.msk-contact-editorial__editor-placeholder { font-size: var(--msk-font-size-xs, 0.75rem); color: rgba(255,255,255,0.3); font-style: italic; }

.msk-contact-editorial__placeholder { font-size: clamp(2rem, 6vw, 5rem); font-style: normal; font-weight: 700; color: rgba(255,255,255,0.2); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-contact-editorial__email,
    .msk-contact-editorial__cta,
    .msk-contact-editorial__phone,
    .msk-contact-editorial__social-link { transition: none; }
}

/* ── contact-hub ── */
/*
 * Maple Contact Hub — Styles
 */

.msk-contact-hub { padding: var(--msk-space-4, 1rem); }
.msk-contact-hub__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; }

/* ── Header ────────────────────────────────────────────────────────── */

.msk-contact-hub__header { padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem) var(--msk-space-6, 1.5rem); }
.msk-contact-hub__headline { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: inherit; margin: 0 0 var(--msk-space-2, 0.5rem); line-height: 1.2; }
.msk-contact-hub__subtitle { font-size: var(--msk-font-size-base, 1rem); color: inherit; opacity: 0.6; margin: 0; }

/* ── Main Layout ───────────────────────────────────────────────────── */

.msk-contact-hub__layout { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--msk-space-4, 1rem); margin: 0 var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem); border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-4, 1rem); border: 1px solid rgba(0,0,0,0.08); }

/* ── Side Cards ────────────────────────────────────────────────────── */

.msk-contact-hub__side { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }

.msk-contact-hub__card { display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); padding: var(--msk-space-5, 1.25rem); border-radius: var(--msk-radius-md, 0.5rem); border: 1px solid rgba(0,0,0,0.08); background: #fff; flex: 1; }
.msk-contact-hub__card-title { font-size: var(--msk-font-size-base, 1rem); font-weight: 700; color: inherit; margin: 0; }
.msk-contact-hub__card-desc { font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.6; margin: 0; line-height: var(--msk-leading-normal, 1.6); }
.msk-contact-hub__card-btn { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-5, 1.25rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #fff; background: #111; border-radius: var(--msk-radius-full, 9999px); text-decoration: none; margin-block-start: auto; align-self: flex-start; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-hub__card-btn:hover { background: #333; }
.msk-contact-hub__card-btn span { font-size: 0.85em; }

/* ── Center Form ───────────────────────────────────────────────────── */

.msk-contact-hub__form-col { padding: var(--msk-space-5, 1.25rem) var(--msk-space-4, 1rem); }
.msk-contact-hub__form-title { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; color: inherit; margin: 0 0 var(--msk-space-5, 1.25rem); }

.msk-contact-hub__form { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }

.msk-contact-hub__field { display: flex; flex-direction: column; gap: var(--msk-space-1, 0.25rem); }
.msk-contact-hub__label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: inherit; }

.msk-contact-hub__input,
.msk-contact-hub__select,
.msk-contact-hub__textarea { inline-size: 100%; padding: var(--msk-space-3, 0.75rem); font-size: var(--msk-font-size-sm, 0.875rem); font-family: inherit; color: inherit; background: #fff; border: 1px solid rgba(0,0,0,0.4); border-radius: var(--msk-radius-md, 0.5rem); outline: none; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); box-sizing: border-box; }
.msk-contact-hub__input::placeholder,
.msk-contact-hub__textarea::placeholder { color: inherit; opacity: 0.4; }
.msk-contact-hub__input:focus,
.msk-contact-hub__select:focus,
.msk-contact-hub__textarea:focus { border-color: rgba(0,0,0,0.4); }

.msk-contact-hub__select { appearance: auto; cursor: pointer; }
.msk-contact-hub__textarea { resize: vertical; min-block-size: 100px; }

.msk-contact-hub__privacy { display: flex; align-items: flex-start; gap: var(--msk-space-2, 0.5rem); font-size: var(--msk-font-size-xs, 0.75rem); color: inherit; opacity: 0.6; cursor: pointer; }
.msk-contact-hub__privacy input { margin-block-start: 2px; flex-shrink: 0; }

.msk-contact-hub__submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--msk-space-2, 0.5rem); inline-size: 100%; padding: var(--msk-space-4, 1rem); font-size: var(--msk-font-size-base, 1rem); font-weight: 600; font-family: inherit; color: #fff; border: none; border-radius: var(--msk-radius-full, 9999px); cursor: pointer; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-hub__submit:hover { opacity: 0.9; }

/* ── v2: content-only (wrapper handled by Group blocks) ───────────── */

.msk-contact-hub--v2 { padding: 0; }
.msk-contact-hub--v2 .msk-contact-hub__header { padding: var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem) var(--msk-space-6, 1.5rem); }
.msk-contact-hub--v2 .msk-contact-hub__layout { margin: 0 var(--msk-space-8, 2rem) var(--msk-space-8, 2rem); }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-contact-hub__layout { grid-template-columns: 1fr; }
    .msk-contact-hub__side--left { order: 2; }
    .msk-contact-hub__form-col { order: 1; }
    .msk-contact-hub__side--right { order: 3; }
}

/* ── Decorative SVG ────────────────────────────────────────────────── */

.msk-contact-hub__decor { position: absolute; top: 0; right: 0; width: 50%; height: 100%; pointer-events: none; opacity: 0.07; }

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-contact-hub--editor { border-radius: var(--msk-radius-md, 0.5rem); }

/* Editor header */
.msk-contact-hub__editor-header { padding: var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem) var(--msk-space-4, 1rem); }
.msk-contact-hub__editor-headline { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: #111; margin: 0 0 0.375rem; line-height: 1.2; }
.msk-contact-hub__editor-subtitle { font-size: 0.9375rem; color: #525252; margin: 0; }

/* Editor layout mirrors msk-contact-hub__layout */
.msk-contact-hub__editor-layout { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--msk-space-4, 1rem); margin: 0 var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem); border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-4, 1rem); border: 1px solid rgba(0,0,0,0.08); position: relative; overflow: hidden; }

/* Editor side columns */
.msk-contact-hub__editor-side { display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }
.msk-contact-hub__editor-side-empty { display: flex; align-items: center; justify-content: center; min-height: 80px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(0,0,0,0.25); border: 1px dashed rgba(0,0,0,0.15); border-radius: var(--msk-radius-md, 0.5rem); }

/* Editor cards */
.msk-contact-hub__editor-card { display: flex; flex-direction: column; gap: 0.375rem; padding: var(--msk-space-4, 1rem); background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--msk-radius-md, 0.5rem); flex: 1; }
.msk-contact-hub__editor-card-title { font-size: 0.8125rem; font-weight: 700; color: #111; }
.msk-contact-hub__editor-card-desc  { font-size: 0.75rem; color: #525252; line-height: 1.5; }
.msk-contact-hub__editor-card-btn   { font-size: 0.6875rem; font-weight: 600; color: #fff; background: #111; border-radius: 9999px; padding: 0.3rem 0.75rem; display: inline-block; margin-top: auto; align-self: flex-start; }

/* Editor center form column */
.msk-contact-hub__editor-form-col { padding: var(--msk-space-4, 1rem) var(--msk-space-3, 0.75rem); display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }
.msk-contact-hub__editor-form-title { font-size: 1rem; font-weight: 700; color: #111; margin: 0 0 0.25rem; }

/* Editor field mocks */
.msk-contact-hub__editor-field { display: flex; flex-direction: column; gap: 0.2rem; }
.msk-contact-hub__editor-label { font-size: 0.6875rem; font-weight: 600; color: #222; }
.msk-contact-hub__editor-input-mock { font-size: 0.75rem; color: #9ca3af; background: #fff; border: 1px solid rgba(0,0,0,0.15); border-radius: var(--msk-radius-md, 0.5rem); padding: 0.45rem 0.625rem; }
.msk-contact-hub__editor-select-mock { display: flex; justify-content: space-between; }
.msk-contact-hub__editor-textarea-mock { font-size: 0.75rem; color: #9ca3af; background: #fff; border: 1px solid rgba(0,0,0,0.15); border-radius: var(--msk-radius-md, 0.5rem); padding: 0.45rem 0.625rem; min-height: 72px; }

/* Editor privacy */
.msk-contact-hub__editor-privacy { display: flex; align-items: flex-start; gap: 0.4rem; }
.msk-contact-hub__editor-checkbox { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,0.3); border-radius: 2px; flex-shrink: 0; margin-top: 1px; }
.msk-contact-hub__editor-privacy-text { font-size: 0.6875rem; color: #525252; line-height: 1.4; }

/* Editor submit */
.msk-contact-hub__editor-submit { display: flex; align-items: center; justify-content: center; gap: 0.375rem; border-radius: 9999px; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 600; color: #fff; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-contact-hub__card-btn,
    .msk-contact-hub__input,
    .msk-contact-hub__select,
    .msk-contact-hub__textarea,
    .msk-contact-hub__submit { transition: none; }
}

/* ── contact-section ── */
/*
 * Maple Contact Section — Styles
 */

.msk-contact-section { padding: var(--msk-space-4, 1rem); }
.msk-contact-section__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; color: rgba(255,255,255,0.7); }

/* ── Decorative SVG ────────────────────────────────────────────────── */

.msk-contact-section__decor { position: absolute; top: 0; right: 0; width: 40%; height: 100%; pointer-events: none; opacity: 0.10; color: #fff; z-index: 0; }

/* ── Watermark ─────────────────────────────────────────────────────── */

.msk-contact-section__watermark { position: absolute; inset-block-start: -0.15em; inset-inline-start: 50%; transform: translateX(-50%); font-size: clamp(4rem, 12vw, 10rem); font-weight: 700; color: rgba(255,255,255,0.04); white-space: nowrap; pointer-events: none; line-height: 1; user-select: none; }

/* ── Main Grid ─────────────────────────────────────────────────────── */

.msk-contact-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-10, 2.5rem); padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); position: relative; z-index: 1; }

/* ── Left Column — Info ────────────────────────────────────────────── */

.msk-contact-section__info { display: flex; flex-direction: column; gap: var(--msk-space-6, 1.5rem); padding-block-start: var(--msk-space-6, 1.5rem); }

.msk-contact-section__headline { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
.msk-contact-section__arrow { display: inline-block; font-size: 0.75em; margin-inline-start: var(--msk-space-2, 0.5rem); }

.msk-contact-section__desc { font-size: var(--msk-font-size-sm, 0.875rem); line-height: var(--msk-leading-normal, 1.6); color: rgba(255,255,255,0.65); margin: 0; max-inline-size: 420px; white-space: pre-line; }

/* Feature checklist */
.msk-contact-section__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-contact-section__feature { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.65); }
.msk-contact-section__check { display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; border-radius: var(--msk-radius-md, 0.5rem); background: rgba(255,255,255,0.08); color: rgba(100,200,255,0.9); flex-shrink: 0; }

/* Social icons */
.msk-contact-section__socials { display: flex; gap: var(--msk-space-3, 0.75rem); margin-block-start: var(--msk-space-2, 0.5rem); }
.msk-contact-section__social-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 38px; block-size: 38px; border-radius: var(--msk-radius-md, 0.5rem); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); text-decoration: none; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-section__social-icon:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Right Column — Form ───────────────────────────────────────────── */

.msk-contact-section__form-wrap { border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-6, 1.5rem); }

.msk-contact-section__form { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-contact-section__form-row { display: flex; gap: var(--msk-space-4, 1rem); }

.msk-contact-section__input,
.msk-contact-section__textarea { inline-size: 100%; padding: var(--msk-space-4, 1rem); font-size: var(--msk-font-size-sm, 0.875rem); font-family: inherit; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--msk-radius-md, 0.5rem); outline: none; box-sizing: border-box; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-section__input::placeholder,
.msk-contact-section__textarea::placeholder { color: rgba(255,255,255,0.65); }
.msk-contact-section__input:focus,
.msk-contact-section__textarea:focus { border-color: rgba(255,255,255,0.6); }

.msk-contact-section__textarea { resize: vertical; min-block-size: 120px; }

.msk-contact-section__submit { inline-size: 100%; padding: var(--msk-space-4, 1rem); font-size: var(--msk-font-size-base, 1rem); font-weight: 600; font-family: inherit; color: inherit; border: none; border-radius: var(--msk-radius-md, 0.5rem); cursor: pointer; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-contact-section__submit:hover { opacity: 0.9; }

/* ── Info Cards ────────────────────────────────────────────────────── */

.msk-contact-section__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--msk-space-4, 1rem); padding: 0 var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem); position: relative; z-index: 1; }

.msk-contact-section__card { display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); padding: var(--msk-space-5, 1.25rem); border-radius: var(--msk-radius-lg, 1rem); border: 1px solid rgba(255,255,255,0.06); }
.msk-contact-section__card-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border-radius: var(--msk-radius-md, 0.5rem); color: rgba(255,255,255,0.7); }
.msk-contact-section__card-label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: rgba(255,255,255,0.95); margin: 0; }
.msk-contact-section__card-value { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.65); text-decoration: none; }
a.msk-contact-section__card-value { transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
a.msk-contact-section__card-value:hover { color: #fff; }

/* ── v2: content-only (wrapper handled by Group blocks) ───────────── */

.msk-contact-section--v2 { padding: 0; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-contact-section__grid { grid-template-columns: 1fr; }
    .msk-contact-section__form-row { flex-direction: column; }
    .msk-contact-section__cards { grid-template-columns: 1fr; }
}

/* ── Editor ────────────────────────────────────────────────────────── */

/* Outer wrapper */
.msk-contact-section--editor { border-radius: var(--msk-radius-xl, 1.5rem); min-height: 420px; display: flex; flex-direction: column; }

/* Two-column grid mirroring render.php */
.msk-contact-section__editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-10, 2.5rem); padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); position: relative; z-index: 1; }

/* Left info column */
.msk-contact-section__editor-info { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); padding-block-start: var(--msk-space-6, 1.5rem); }
.msk-contact-section__editor-headline { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
.msk-contact-section__editor-desc { font-size: var(--msk-font-size-sm, 0.875rem); line-height: 1.6; color: rgba(255,255,255,0.65); margin: 0; max-inline-size: 380px; white-space: pre-line; }

/* Feature list */
.msk-contact-section__editor-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }
.msk-contact-section__editor-feature { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.65); }
.msk-contact-section__editor-check { display: inline-flex; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; border-radius: var(--msk-radius-md, 0.5rem); background: rgba(255,255,255,0.08); color: rgba(100,200,255,0.9); flex-shrink: 0; }

/* Social icon badges */
.msk-contact-section__editor-socials { display: flex; gap: var(--msk-space-2, 0.5rem); flex-wrap: wrap; }
.msk-contact-section__editor-social-icon { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 32px; block-size: 32px; padding: 0 6px; border-radius: var(--msk-radius-md, 0.5rem); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); font-size: 10px; font-weight: 700; }

/* Form mock (right column) */
.msk-contact-section__editor-form-wrap { border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-6, 1.5rem); display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-contact-section__editor-form-row { display: flex; gap: var(--msk-space-4, 1rem); }
.msk-contact-section__editor-input-mock { flex: 1; padding: var(--msk-space-4, 1rem); font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--msk-radius-md, 0.5rem); }
.msk-contact-section__editor-textarea-mock { padding: var(--msk-space-4, 1rem); min-block-size: 100px; font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--msk-radius-md, 0.5rem); }
.msk-contact-section__editor-submit-mock { inline-size: 100%; padding: var(--msk-space-4, 1rem); font-size: var(--msk-font-size-base, 1rem); font-weight: 600; border-radius: var(--msk-radius-md, 0.5rem); text-align: center; }

/* Cards row */
.msk-contact-section__editor-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--msk-space-4, 1rem); padding: 0 var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem); position: relative; z-index: 1; }
.msk-contact-section__editor-card { display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-5, 1.25rem); border-radius: var(--msk-radius-lg, 1rem); border: 1px solid rgba(255,255,255,0.06); }
.msk-contact-section__editor-card-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px; border-radius: var(--msk-radius-md, 0.5rem); color: rgba(255,255,255,0.7); }
.msk-contact-section__editor-card-label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: rgba(255,255,255,0.95); }
.msk-contact-section__editor-card-value { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.55); }

/* Editor responsive */
@media (max-width: 782px) {
    .msk-contact-section__editor-grid { grid-template-columns: 1fr; }
    .msk-contact-section__editor-form-row { flex-direction: column; }
    .msk-contact-section__editor-cards { grid-template-columns: 1fr; }
}

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-contact-section__social-icon,
    .msk-contact-section__input,
    .msk-contact-section__textarea,
    .msk-contact-section__submit,
    a.msk-contact-section__card-value { transition: none; }
}

/* ── editorial-slider ── */
/*
 * Maple Editorial Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Bold editorial: coloured panel overlay + full-bleed image + highlighted
 * headline blocks + description + CTA. Dark outer frame. Edge arrows.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.msk-editorial-slider {
    position: relative;
    inline-size: 100%;
    background: #111;
    padding: var(--msk-space-8, 2rem);
}

/* ── Inner Frame ──────────────────────────────────────────────────────────── */

.msk-editorial-slider__frame {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 16 / 7;
    min-block-size: 400px;
    overflow: hidden;
}

/* ── Slides ───────────────────────────────────────────────────────────────── */

.msk-editorial-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms var(--msk-ease-out, ease-out), visibility 700ms var(--msk-ease-out, ease-out);
}

.msk-editorial-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ── Background Image ─────────────────────────────────────────────────────── */

.msk-editorial-slider__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Coloured Panel (left overlay) ────────────────────────────────────────── */

.msk-editorial-slider__panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem);
    inline-size: 50%;
    block-size: 100%;
    clip-path: polygon(0 0, 85% 0, 65% 100%, 0 100%);
}

/* ── Headline with black highlight blocks ─────────────────────────────────── */

.msk-editorial-slider__headline {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0 0 var(--msk-space-6, 1.5rem);
    color: #fff;
}

.msk-editorial-slider__headline-line {
    display: inline;
    background: #111;
    padding: 0.1em 0.3em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ── Description ──────────────────────────────────────────────────────────── */

.msk-editorial-slider__description {
    font-size: var(--msk-font-size-base, 1rem);
    color: rgba(255, 255, 255, 0.9);
    line-height: var(--msk-leading-normal, 1.6);
    max-inline-size: 380px;
    margin: 0 0 var(--msk-space-6, 1.5rem);
}

/* ── CTA Button ───────────────────────────────────────────────────────────── */

.msk-editorial-slider__cta {
    display: inline-block;
    align-self: flex-start;
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem);
    background: #111;
    color: #fff;
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wider, 0.1em);
    text-decoration: none;
    border: 2px solid #fff;
    transition:
        background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        color      var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-editorial-slider__cta:hover {
    background: #fff;
    color: #111;
}

/* ── Edge Arrows ──────────────────────────────────────────────────────────── */

.msk-editorial-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-editorial-slider__arrow:hover {
    color: #fff;
}

.msk-editorial-slider__arrow--prev {
    inset-inline-start: 0;
}

.msk-editorial-slider__arrow--next {
    inset-inline-end: 0;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {

    .msk-editorial-slider {
        padding: var(--msk-space-4, 1rem);
    }

    .msk-editorial-slider__frame {
        aspect-ratio: auto;
        min-block-size: 0;
    }

    .msk-editorial-slider__slide {
        position: relative;
        display: none;
    }

    .msk-editorial-slider__slide.is-active {
        display: block;
        position: relative;
    }

    .msk-editorial-slider__panel {
        inline-size: 100%;
        clip-path: none;
        padding: var(--msk-space-6, 1.5rem);
        min-block-size: 350px;
    }

    .msk-editorial-slider__headline {
        font-size: clamp(1.25rem, 6vw, 2rem);
    }

    .msk-editorial-slider__arrow {
        top: auto;
        bottom: var(--msk-space-2, 0.5rem);
        transform: none;
    }
}

/* ── Editor ───────────────────────────────────────────────────────────────── */

.msk-editorial-slider--editor {
    border: 1px dashed var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
    min-height: 80px;
    background: #111;
}

.msk-editorial-slide--editor {
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-4, 1rem);
    margin-block-end: var(--msk-space-2, 0.5rem);
    background: #222;
}

.msk-editorial-slide__editor-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msk-editorial-slide__editor-headline {
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    white-space: pre-line;
}

.msk-editorial-slide__editor-cta {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 2px 10px;
    margin-top: 4px;
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-editorial-slider__slide,
    .msk-editorial-slider__cta,
    .msk-editorial-slider__arrow {
        transition: none;
    }
}

/* ── faq-categories ── */
/*
 * Maple FAQ Categories — Styles
 */

.msk-faq-categories { padding: var(--msk-space-4, 1rem); }
.msk-faq-categories__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); }

/* ── Header ────────────────────────────────────────────────────────── */

.msk-faq-categories__header { text-align: center; margin-block-end: var(--msk-space-10, 2.5rem); }

.msk-faq-categories__badge { display: inline-block; padding: var(--msk-space-1, 0.25rem) var(--msk-space-3, 0.75rem); font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 600; color: inherit; opacity: 0.7; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.12); border-radius: var(--msk-radius-full, 9999px); margin-block-end: var(--msk-space-3, 0.75rem); }

.msk-faq-categories__headline { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: inherit; margin: 0 0 var(--msk-space-2, 0.5rem); line-height: 1.2; }

.msk-faq-categories__desc { font-size: var(--msk-font-size-base, 1rem); color: inherit; opacity: 0.7; margin: 0; }

/* ── Main Layout ───────────────────────────────────────────────────── */

.msk-faq-categories__layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--msk-space-10, 2.5rem); align-items: start; }

/* ── Sidebar ───────────────────────────────────────────────────────── */

.msk-faq-categories__sidebar { position: sticky; inset-block-start: var(--msk-space-8, 2rem); }

.msk-faq-categories__sidebar-title { display: block; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; margin-block-end: var(--msk-space-4, 1rem); }

.msk-faq-categories__cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }

.msk-faq-categories__cat-btn { display: block; inline-size: 100%; padding: var(--msk-space-3, 0.75rem) var(--msk-space-4, 1rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 500; font-family: inherit; color: inherit; opacity: 0.6; background: none; border: none; border-inline-start: 3px solid transparent; cursor: pointer; text-align: start; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-categories__cat-btn:hover { opacity: 1; }
.msk-faq-categories__cat-btn.is-active { font-weight: 600; opacity: 1; }

/* ── Accordion ─────────────────────────────────────────────────────── */

.msk-faq-categories__content { display: flex; flex-direction: column; gap: var(--msk-space-6, 1.5rem); }

.msk-faq-categories__accordion { display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); }

.msk-faq-categories__item { background: #f5f5f5; border-radius: var(--msk-radius-md, 0.5rem); border: 2px solid transparent; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-categories__item.is-hidden { display: none; }
.msk-faq-categories__item.is-open { background: #fff; }

.msk-faq-categories__question { display: flex; align-items: center; gap: var(--msk-space-4, 1rem); inline-size: 100%; padding: var(--msk-space-5, 1.25rem); font-family: inherit; font-size: var(--msk-font-size-base, 1rem); font-weight: 600; color: inherit; background: none; border: none; cursor: pointer; text-align: start; }

.msk-faq-categories__q-text { flex: 1; }

.msk-faq-categories__icon { font-size: 1.25rem; color: inherit; opacity: 0.5; flex-shrink: 0; line-height: 1; }

.msk-faq-categories__answer { padding: 0 var(--msk-space-5, 1.25rem) var(--msk-space-5, 1.25rem); }
.msk-faq-categories__answer p { font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.75; margin: 0; line-height: var(--msk-leading-normal, 1.6); }

/* ── Contact Banner ────────────────────────────────────────────────── */

.msk-faq-categories__banner { display: flex; justify-content: space-between; align-items: center; gap: var(--msk-space-4, 1rem); padding: var(--msk-space-5, 1.25rem) var(--msk-space-6, 1.5rem); background: #f5f5f5; border-radius: var(--msk-radius-md, 0.5rem); }

.msk-faq-categories__banner-left { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); }
.msk-faq-categories__banner-icon { display: inline-flex; color: inherit; opacity: 0.5; flex-shrink: 0; }
.msk-faq-categories__banner-hl { display: block; font-size: var(--msk-font-size-base, 1rem); font-weight: 700; color: inherit; }
.msk-faq-categories__banner-desc { display: block; font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.75; }

.msk-faq-categories__banner-right { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); flex-shrink: 0; }
.msk-faq-categories__banner-doc { display: inline-flex; color: inherit; opacity: 0.5; }
.msk-faq-categories__banner-btn { display: inline-flex; align-items: center; padding: var(--msk-space-2, 0.5rem) var(--msk-space-4, 1rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #222; background: #fff; border: 1.5px solid rgba(0,0,0,0.2); border-radius: var(--msk-radius-full, 9999px); text-decoration: none; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-categories__banner-btn:hover { border-color: rgba(0,0,0,0.5); }


/* ── Hidden Guard ──────────────────────────────────────────────────── */

.msk-faq-categories__answer[hidden] { display: none; }

/* ── v2: content-only (wrapper handled by Group blocks) ───────────── */

.msk-faq-categories--v2 { padding: 0; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-faq-categories__layout { grid-template-columns: 1fr; }
    .msk-faq-categories__sidebar { position: static; }
    .msk-faq-categories__cat-list { flex-direction: row; flex-wrap: wrap; gap: var(--msk-space-1, 0.25rem); }
    .msk-faq-categories__cat-btn { border-inline-start: none; border-block-end: 3px solid transparent; padding: var(--msk-space-2, 0.5rem) var(--msk-space-3, 0.75rem); }
    .msk-faq-categories__banner { flex-direction: column; align-items: flex-start; }
}

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-faq-categories--editor { border-radius: var(--msk-radius-md, 0.5rem); }

/* Editor header */
.msk-faq-categories__editor-header { text-align: center; margin-block-end: 1.5rem; }
.msk-faq-categories__editor-badge { display: inline-block; padding: 0.2rem 0.6rem; font-size: 11px; font-weight: 600; color: #555; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.12); border-radius: 9999px; margin-block-end: 0.5rem; }
.msk-faq-categories__editor-hl { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; color: #111; margin: 0 0 0.4rem; line-height: 1.2; }
.msk-faq-categories__editor-desc { font-size: 13px; color: #666; margin: 0; }

/* Editor main layout */
.msk-faq-categories__editor-layout { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; }

/* Editor sidebar */
.msk-faq-categories__editor-sidebar { }
.msk-faq-categories__editor-sidebar-title { display: block; font-size: 11px; font-weight: 700; margin-block-end: 0.75rem; }
.msk-faq-categories__editor-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.msk-faq-categories__editor-cat-btn { display: block; width: 100%; padding: 0.6rem 0.8rem; font-size: 13px; font-weight: 500; color: #777; border-inline-start: 3px solid transparent; }
.msk-faq-categories__editor-cat-btn.is-active { font-weight: 600; color: #111; }

/* Editor accordion */
.msk-faq-categories__editor-content { display: flex; flex-direction: column; gap: 1rem; }
.msk-faq-categories__editor-accordion { display: flex; flex-direction: column; gap: 0.4rem; }
.msk-faq-categories__editor-item { background: #f5f5f5; border-radius: 0.5rem; border: 2px solid transparent; }
.msk-faq-categories__editor-item.is-open { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.msk-faq-categories__editor-question { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; }
.msk-faq-categories__editor-q-text { flex: 1; font-size: 13px; font-weight: 600; color: #333; }
.msk-faq-categories__editor-icon { font-size: 1.1rem; color: #777; flex-shrink: 0; }
.msk-faq-categories__editor-answer { padding: 0 1rem 0.9rem; font-size: 12px; color: #666; line-height: 1.6; }
.msk-faq-categories__editor-empty { font-size: 12px; color: #999; font-style: italic; padding: 1rem; text-align: center; }

/* Editor contact banner */
.msk-faq-categories__editor-banner { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; background: #f5f5f5; border-radius: 0.5rem; }
.msk-faq-categories__editor-banner-hl { font-size: 13px; font-weight: 700; color: #111; }
.msk-faq-categories__editor-banner-btn { font-size: 12px; font-weight: 600; color: #222; padding: 0.35rem 0.85rem; border: 1.5px solid rgba(0,0,0,0.2); border-radius: 9999px; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-faq-categories__cat-btn,
    .msk-faq-categories__item,
    .msk-faq-categories__banner-btn { transition: none; }
}

/* ── faq-grid ── */
/*
 * Maple FAQ Grid — Styles
 */

.msk-faq-grid { padding: var(--msk-space-4, 1rem); }
.msk-faq-grid__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); }

/* ── Header ────────────────────────────────────────────────────────── */

.msk-faq-grid__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--msk-space-6, 1.5rem); margin-block-end: var(--msk-space-6, 1.5rem); }
.msk-faq-grid__header-left { max-inline-size: 600px; }

.msk-faq-grid__headline { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; color: inherit; margin: 0 0 var(--msk-space-2, 0.5rem); line-height: 1.2; }
.msk-faq-grid__desc { font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.7; margin: 0; line-height: var(--msk-leading-normal, 1.6); }

.msk-faq-grid__cta { display: inline-flex; padding: var(--msk-space-3, 0.75rem) var(--msk-space-5, 1.25rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #fff; border-radius: var(--msk-radius-full, 9999px); text-decoration: none; flex-shrink: 0; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-grid__cta:hover { opacity: 0.9; }

/* ── Tabs ──────────────────────────────────────────────────────────── */

.msk-faq-grid__tabs { display: inline-flex; gap: 0; margin-block-end: var(--msk-space-6, 1.5rem); border: 2px solid rgba(0,0,0,0.12); border-radius: var(--msk-radius-md, 0.5rem); overflow: hidden; max-inline-size: fit-content; }

.msk-faq-grid__tab { padding: var(--msk-space-2, 0.5rem) var(--msk-space-5, 1.25rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 500; font-family: inherit; color: inherit; opacity: 0.6; background: none; border: none; cursor: pointer; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); white-space: nowrap; min-inline-size: 0; }
.msk-faq-grid__tab + .msk-faq-grid__tab { border-inline-start: 1px solid rgba(0,0,0,0.08); }
.msk-faq-grid__tab:hover { opacity: 1; }
.msk-faq-grid__tab.is-active { opacity: 1; font-weight: 700; }

/* ── Item Grid ─────────────────────────────────────────────────────── */

.msk-faq-grid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--msk-space-4, 1rem); position: relative; }

.msk-faq-grid__item { display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-5, 1.25rem); border-radius: var(--msk-radius-md, 0.5rem); border: 2px solid rgba(0,0,0,0.08); cursor: pointer; background: transparent; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-grid__item:hover { background: var(--msk-faq-grid-accent, #8a1622); border-color: #222222; }
.msk-faq-grid__item.is-hidden { display: none; }

.msk-faq-grid__item-icon { display: inline-flex; color: inherit; opacity: 0.5; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-grid__item:hover .msk-faq-grid__item-icon { color: #f6f6f6; opacity: 1; }

.msk-faq-grid__item-q { font-size: var(--msk-font-size-base, 1rem); font-weight: 700; color: inherit; margin: 0; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-grid__item:hover .msk-faq-grid__item-q { color: #f6f6f6; }

.msk-faq-grid__item-a { font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.75; margin: 0; line-height: var(--msk-leading-normal, 1.6); transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-grid__item:hover .msk-faq-grid__item-a { color: rgba(246,246,246,0.92); opacity: 1; }

/* Selected state (click) */
.msk-faq-grid__item.is-selected { background: var(--msk-faq-grid-accent, #8a1622); border-color: #222222; }
.msk-faq-grid__item.is-selected .msk-faq-grid__item-icon { color: #f6f6f6; opacity: 1; }
.msk-faq-grid__item.is-selected .msk-faq-grid__item-q { color: #f6f6f6; }
.msk-faq-grid__item.is-selected .msk-faq-grid__item-a { color: rgba(246,246,246,0.92); opacity: 1; }


/* ── Hidden Guard ──────────────────────────────────────────────────── */

.msk-faq-grid__answer[hidden] { display: none; }

/* ── v2: content-only (wrapper handled by Group blocks) ───────────── */

.msk-faq-grid--v2 { padding: 0; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-faq-grid__header { flex-direction: column; }
    .msk-faq-grid__grid { grid-template-columns: 1fr; }
}

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-faq-grid--editor { border-radius: var(--msk-radius-md, 0.5rem); }

/* Editor header */
.msk-faq-grid__editor-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-block-end: 1rem; }
.msk-faq-grid__editor-header-left { flex: 1; }
.msk-faq-grid__editor-hl { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; color: #111; margin: 0 0 0.3rem; line-height: 1.2; }
.msk-faq-grid__editor-desc { font-size: 13px; color: #666; margin: 0; line-height: 1.5; }
.msk-faq-grid__editor-cta { display: inline-flex; padding: 0.5rem 1rem; font-size: 12px; font-weight: 600; color: #fff; border-radius: 9999px; flex-shrink: 0; }

/* Editor tab filters */
.msk-faq-grid__editor-tabs { display: inline-flex; gap: 0; margin-block-end: 1rem; border: 1px solid rgba(0,0,0,0.12); border-radius: 0.5rem; overflow: hidden; }
.msk-faq-grid__editor-tab { padding: 0.4rem 0.85rem; font-size: 12px; font-weight: 500; color: #777; }
.msk-faq-grid__editor-tab + .msk-faq-grid__editor-tab { border-inline-start: 1px solid rgba(0,0,0,0.08); }
.msk-faq-grid__editor-tab.is-active { color: #111; font-weight: 700; }

/* Editor card grid */
.msk-faq-grid__editor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.msk-faq-grid__editor-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid rgba(0,0,0,0.07); background: #fafafa; }
.msk-faq-grid__editor-card-icon { display: inline-flex; color: #777; }
.msk-faq-grid__editor-card-q { font-size: 13px; font-weight: 700; color: #111; margin: 0; }
.msk-faq-grid__editor-card-a { font-size: 12px; color: #777; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msk-faq-grid__editor-empty { font-size: 12px; color: #999; font-style: italic; text-align: center; grid-column: 1 / -1; padding: 1rem; }

/* Editor see-all */
.msk-faq-grid__editor-see-all-wrap { text-align: center; margin-block-start: 1rem; }
.msk-faq-grid__editor-see-all { display: inline-flex; padding: 0.5rem 1.25rem; font-size: 12px; font-weight: 600; color: #fff; background: #111; border-radius: 9999px; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-faq-grid__cta,
    .msk-faq-grid__tab,
    .msk-faq-grid__item,
    .msk-faq-grid__item-icon,
    .msk-faq-grid__item-q,
    .msk-faq-grid__item-a { transition: none; }
}

/* ── faq-section ── */
/*
 * Maple FAQ Section — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Split layout: title left, accordion right. Dark themed with accent text.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper — accent background */
.msk-faq-section { padding: var(--msk-space-4, 1rem); }

/* Dark rounded card */
.msk-faq-section__card { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-16, 4rem) var(--msk-space-10, 2.5rem); position: relative; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT — 2-column split
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-faq-section__layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--msk-space-16, 4rem); max-inline-size: 1200px; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════════
   INTRO — headline + description (left)
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-faq-section__intro { position: sticky; inset-block-start: var(--msk-space-8, 2rem); align-self: start; }

.msk-faq-section__headline { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--msk-space-6, 1.5rem); }

.msk-faq-section__description { font-size: var(--msk-font-size-base, 1rem); opacity: 0.6; line-height: var(--msk-leading-normal, 1.6); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   ACCORDION — question + answer items (right)
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-faq-section__accordion { display: flex; flex-direction: column; }

.msk-faq-section__item { border-block-end: 1px solid currentColor; opacity: 0.3; }
.msk-faq-section__item:first-child { border-block-start: 1px solid currentColor; }

/* Question button */
.msk-faq-section__question { display: flex; align-items: center; justify-content: space-between; gap: var(--msk-space-4, 1rem); inline-size: 100%; padding: var(--msk-space-6, 1.5rem) 0; background: none; border: none; color: inherit; font-size: clamp(1rem, 2vw, 1.375rem); font-weight: 700; text-align: start; cursor: pointer; font-family: inherit; line-height: 1.3; }

.msk-faq-section__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }

/* Answer panel */
.msk-faq-section__answer[hidden] { display: none; }

.msk-faq-section__answer-inner { padding-block-end: var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-base, 1rem); line-height: var(--msk-leading-normal, 1.6); opacity: 0.75; }
.msk-faq-section__answer-inner p { margin: 0 0 var(--msk-space-3, 0.75rem); }

/* Open state — full opacity */
.msk-faq-section__item.is-open { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .msk-faq-section__layout { grid-template-columns: 1fr; gap: var(--msk-space-10, 2.5rem); }
    .msk-faq-section__intro { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-faq-section--editor { border-radius: var(--msk-radius-md, 0.5rem); }

/* FAQ items inside the editor accordion column */
.msk-faq-section--editor .msk-faq-item--editor { border: 1px solid rgba(255,255,255,0.15); border-radius: var(--msk-radius-md, 0.5rem); padding: var(--msk-space-3, 0.75rem); margin-block-end: var(--msk-space-2, 0.5rem); }
.msk-faq-section--editor .msk-faq-item__editor-content { display: flex; flex-direction: column; gap: 4px; }
.msk-faq-section--editor .msk-faq-item__editor-q { font-size: 13px; font-weight: 700; color: inherit; }
.msk-faq-section--editor .msk-faq-item__editor-a { font-size: 11px; opacity: 0.6; }

/* Let the headline be directly editable on the canvas */
.msk-faq-section--editor .msk-faq-section__headline { cursor: text; }
.msk-faq-section--editor .msk-faq-section__intro { position: static; }

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-faq-section__question { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   V2 COMPOSABLE
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-faq-section--v2 { padding: 0; }

/* ── faq-split ── */
/*
 * Maple FAQ Split — Styles
 */

.msk-faq-split { padding: var(--msk-space-4, 1rem); }
.msk-faq-split__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); }

/* ── Grid ──────────────────────────────────────────────────────────── */

.msk-faq-split__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--msk-space-12, 3rem); align-items: start; }

/* ── Left — Title ──────────────────────────────────────────────────── */

.msk-faq-split__left { position: sticky; inset-block-start: var(--msk-space-8, 2rem); }

.msk-faq-split__headline { font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; color: inherit; margin: 0; line-height: 0.95; }

/* ── Right — Accordion ─────────────────────────────────────────────── */

.msk-faq-split__accordion { display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); }

.msk-faq-split__item { border-radius: var(--msk-radius-md, 0.5rem); transition: box-shadow var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-split__item:not(.is-open) { background: rgba(255,255,255,0.5); }
.msk-faq-split__item.is-open { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

.msk-faq-split__question { display: flex; align-items: center; gap: var(--msk-space-4, 1rem); inline-size: 100%; padding: var(--msk-space-5, 1.25rem) var(--msk-space-5, 1.25rem); font-family: inherit; font-size: var(--msk-font-size-base, 1rem); color: inherit; opacity: 0.6; background: none; border: none; cursor: pointer; text-align: start; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-split__item.is-open .msk-faq-split__question { color: inherit; opacity: 1; }

.msk-faq-split__q-text { flex: 1; font-weight: 500; }
.msk-faq-split__item.is-open .msk-faq-split__q-text { font-weight: 700; }

.msk-faq-split__icon { font-size: 1.25rem; color: inherit; opacity: 0.5; flex-shrink: 0; line-height: 1; }
.msk-faq-split__item.is-open .msk-faq-split__icon { color: inherit; opacity: 1; }

.msk-faq-split__answer { padding: 0 var(--msk-space-5, 1.25rem) var(--msk-space-5, 1.25rem); }
.msk-faq-split__answer p { font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.75; margin: 0; line-height: var(--msk-leading-normal, 1.6); }


/* ── Hidden Guard ──────────────────────────────────────────────────── */

.msk-faq-split__answer[hidden] { display: none; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-faq-split__grid { grid-template-columns: 1fr; }
    .msk-faq-split__left { position: static; }
    .msk-faq-split__headline { font-size: clamp(2rem, 10vw, 3.5rem); }
}

/* ── Decorative SVG ────────────────────────────────────────────────── */

.msk-faq-split__decor { position: absolute; top: 0; left: 0; width: 30%; height: 100%; pointer-events: none; opacity: 0.06; color: currentColor; }

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-faq-split--editor { border-radius: var(--msk-radius-md, 0.5rem); }

/* Editor split grid */
.msk-faq-split__editor-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.5rem; align-items: start; }

/* Editor left — large headline */
.msk-faq-split__editor-left { }
.msk-faq-split__editor-headline { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; color: #111; margin: 0; line-height: 0.95; }

/* Editor accordion */
.msk-faq-split__editor-accordion { display: flex; flex-direction: column; gap: 0.4rem; }
.msk-faq-split__editor-item { border-radius: 0.5rem; background: rgba(255,255,255,0.5); }
.msk-faq-split__editor-item.is-open { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.msk-faq-split__editor-question { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; }
.msk-faq-split__editor-q-text { flex: 1; font-size: 13px; font-weight: 500; color: #555; }
.msk-faq-split__editor-item.is-open .msk-faq-split__editor-q-text { font-weight: 700; color: #111; }
.msk-faq-split__editor-icon { font-size: 1.1rem; color: #777; flex-shrink: 0; }
.msk-faq-split__editor-answer { padding: 0 1rem 0.9rem; font-size: 12px; color: #666; line-height: 1.6; }
.msk-faq-split__editor-empty { font-size: 12px; color: #999; font-style: italic; padding: 1rem; text-align: center; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-faq-split__item,
    .msk-faq-split__question { transition: none; }
}

/* ── V2 Composable ────────────────────────────────────────────────── */

.msk-faq-split--v2 { padding: 0; }

/* ── faq-tabs ── */
/*
 * Maple FAQ Tabs — Styles
 */

.msk-faq-tabs { padding: var(--msk-space-4, 1rem); }
.msk-faq-tabs__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); }

/* ── Header ────────────────────────────────────────────────────────── */

.msk-faq-tabs__header { text-align: center; margin-block-end: var(--msk-space-10, 2.5rem); }

.msk-faq-tabs__headline { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 600; color: inherit; margin: 0 0 var(--msk-space-3, 0.75rem); line-height: 1.2; }

.msk-faq-tabs__desc { font-size: var(--msk-font-size-base, 1rem); color: inherit; opacity: 0.7; margin: 0 auto var(--msk-space-6, 1.5rem); max-inline-size: 600px; line-height: var(--msk-leading-normal, 1.6); }
.msk-faq-tabs__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.msk-faq-tabs__link:hover { opacity: 1; }

/* ── Tabs ──────────────────────────────────────────────────────────── */

.msk-faq-tabs__tabs { display: flex; justify-content: center; gap: var(--msk-space-2, 0.5rem); flex-wrap: wrap; }

.msk-faq-tabs__tab { padding: var(--msk-space-2, 0.5rem) var(--msk-space-5, 1.25rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; font-family: inherit; color: inherit; opacity: 0.6; background: transparent; border: 1.5px solid rgba(0,0,0,0.2); border-radius: var(--msk-radius-full, 9999px); cursor: pointer; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-tabs__tab:hover { border-color: rgba(0,0,0,0.4); opacity: 1; }
.msk-faq-tabs__tab.is-active { border-color: transparent; opacity: 1; }

/* ── Accordion ─────────────────────────────────────────────────────── */

.msk-faq-tabs__accordion { max-inline-size: 720px; margin-inline: auto; }

.msk-faq-tabs__item { border-block-end: 1px solid rgba(0,0,0,0.08); }
.msk-faq-tabs__item.is-hidden { display: none; }

.msk-faq-tabs__question { display: flex; align-items: center; gap: var(--msk-space-4, 1rem); inline-size: 100%; padding: var(--msk-space-5, 1.25rem) 0; font-family: inherit; font-size: var(--msk-font-size-base, 1rem); font-weight: 600; color: inherit; background: none; border: none; cursor: pointer; text-align: start; }

.msk-faq-tabs__q-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: var(--msk-radius-md, 0.5rem); border: 1px solid rgba(0,0,0,0.1); color: inherit; opacity: 0.5; flex-shrink: 0; }

.msk-faq-tabs__q-text { flex: 1; }

.msk-faq-tabs__chevron { display: inline-flex; color: inherit; opacity: 0.5; flex-shrink: 0; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-faq-tabs__item.is-open .msk-faq-tabs__chevron { transform: rotate(180deg); }

.msk-faq-tabs__answer { padding: 0 0 var(--msk-space-5, 1.25rem) calc(40px + var(--msk-space-4, 1rem)); }
.msk-faq-tabs__answer p { font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.75; margin: 0; line-height: var(--msk-leading-normal, 1.6); }


/* ── Hidden Guard ──────────────────────────────────────────────────── */

.msk-faq-tabs__answer[hidden] { display: none; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-faq-tabs { padding: var(--msk-space-8, 2rem) var(--msk-space-4, 1rem); }
    .msk-faq-tabs__q-icon { inline-size: 32px; block-size: 32px; }
    .msk-faq-tabs__answer { padding-inline-start: calc(32px + var(--msk-space-4, 1rem)); }
}

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-faq-tabs--editor { border-radius: var(--msk-radius-md, 0.5rem); }

/* Editor header */
.msk-faq-tabs__editor-header { text-align: center; margin-block-end: 1.5rem; }
.msk-faq-tabs__editor-hl { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; color: #111; margin: 0 0 0.5rem; line-height: 1.2; }
.msk-faq-tabs__editor-desc { font-size: 13px; color: #666; margin: 0 auto 1rem; max-inline-size: 500px; line-height: 1.6; }
.msk-faq-tabs__editor-link { color: #111; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* Editor tab filters */
.msk-faq-tabs__editor-tabs { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-block-start: 0.75rem; }
.msk-faq-tabs__editor-tab { display: inline-flex; padding: 0.35rem 1rem; font-size: 12px; font-weight: 600; color: #555; background: transparent; border: 1.5px solid rgba(0,0,0,0.2); border-radius: 9999px; }
.msk-faq-tabs__editor-tab.is-active { border-color: transparent; }

/* Editor accordion */
.msk-faq-tabs__editor-accordion { max-inline-size: 680px; margin-inline: auto; }
.msk-faq-tabs__editor-item { border-block-end: 1px solid rgba(0,0,0,0.08); }
.msk-faq-tabs__editor-question { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 0; }
.msk-faq-tabs__editor-q-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 0.5rem; border: 1px solid rgba(0,0,0,0.1); color: #777; flex-shrink: 0; }
.msk-faq-tabs__editor-q-text { flex: 1; font-size: 13px; font-weight: 600; color: #111; }
.msk-faq-tabs__editor-chevron { display: inline-flex; color: #777; transition: transform 150ms ease-out; flex-shrink: 0; }
.msk-faq-tabs__editor-chevron.is-open { transform: rotate(180deg); }
.msk-faq-tabs__editor-answer { padding: 0 0 0.9rem calc(36px + 0.75rem); font-size: 12px; color: #666; line-height: 1.6; }
.msk-faq-tabs__editor-empty { font-size: 12px; color: #999; font-style: italic; text-align: center; padding: 1rem; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-faq-tabs__tab,
    .msk-faq-tabs__chevron { transition: none; }
}

/* ── V2 Composable ────────────────────────────────────────────────── */

.msk-faq-tabs--v2 { padding: 0; }

/* ── featured-articles ── */
/*
 * Maple Featured Articles — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Dynamic post cards with featured image backgrounds and title overlays.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-featured-articles { padding: var(--msk-space-16, 4rem) var(--msk-space-8, 2rem); }

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER — headline + link
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-featured-articles__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--msk-space-6, 1.5rem); margin-block-end: var(--msk-space-10, 2.5rem); }

.msk-featured-articles__headline { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--msk-color-text-primary, #111); margin: 0; }

.msk-featured-articles__link { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: var(--msk-color-text-primary, #111); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-featured-articles__link:hover { opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════════════════════
   CARD GRID
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-featured-articles__grid { display: grid; grid-template-columns: repeat( var(--msk-article-cols, 3), 1fr ); gap: var(--msk-space-5, 1.25rem); }

/* ══════════════════════════════════════════════════════════════════════════════
   CARD — image background + title overlay
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-featured-articles__card { display: flex; flex-direction: column; justify-content: flex-end; min-block-size: 380px; border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; background-size: cover; background-position: center; background-color: var(--msk-color-surface, #e0e0e0); text-decoration: none; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-featured-articles__card:hover { transform: translateY(-4px); }

.msk-featured-articles__card-overlay { padding: var(--msk-space-6, 1.5rem); background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%); margin-block-start: auto; min-block-size: 40%; display: flex; align-items: flex-end; }

.msk-featured-articles__card-title { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; color: #fff; line-height: 1.25; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .msk-featured-articles__grid { grid-template-columns: 1fr; }
    .msk-featured-articles__card { min-block-size: 280px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-featured-articles--editor { border: 1px dashed var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-md, 0.5rem); display: block; }

/* Editor header row — matches .msk-featured-articles__header layout */
.msk-featured-articles__editor-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--msk-space-6, 1.5rem); margin-block-end: var(--msk-space-6, 1.5rem); }
.msk-featured-articles__editor-headline { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.1; color: var(--msk-color-text-primary, #111); margin: 0; }
.msk-featured-articles__editor-link { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: var(--msk-color-text-primary, #111); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; opacity: 0.6; cursor: default; }

/* Editor skeleton grid — uses CSS custom property set inline */
.msk-featured-articles__editor-grid { display: grid; grid-template-columns: repeat( var(--msk-editor-cols, 3), 1fr ); gap: var(--msk-space-5, 1.25rem); }

/* Editor card — real post preview */
.msk-featured-articles__editor-card { display: flex; flex-direction: column; justify-content: flex-end; min-block-size: 240px; border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; }

/* Card dark overlay with title */
.msk-featured-articles__editor-card-overlay { padding: var(--msk-space-5, 1.25rem); background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%); display: flex; align-items: flex-end; min-block-size: 80px; }
.msk-featured-articles__editor-card-title { font-size: var(--msk-font-size-base, 1rem); font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }

/* Info bar below grid */
.msk-featured-articles__editor-info-bar { margin-block-start: var(--msk-space-4, 1rem); display: flex; justify-content: center; }
.msk-featured-articles__editor-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--msk-color-text-muted, #999); background: var(--msk-color-surface, #f5f5f5); padding: 3px 12px; border-radius: 9999px; }

/* ══════════════════════════════════════════════════════════════════════════════
   CATEGORY PICKER (editor sidebar)
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-cat-picker { margin-block-end: 16px; }

.msk-cat-picker__control { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; min-height: 36px; background: #fff; position: relative; }
.msk-cat-picker__control.is-open { border-color: var(--wp-admin-theme-color, #007cba); box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba); }

.msk-cat-picker__placeholder { color: #999; font-size: 13px; }

.msk-cat-picker__arrow { margin-inline-start: auto; font-size: 10px; color: #888; flex-shrink: 0; }

.msk-cat-picker__chips { display: flex; flex-wrap: wrap; gap: 4px; }

.msk-cat-picker__chip { display: inline-flex; align-items: center; gap: 2px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 600; color: #333; }
.msk-cat-picker__chip-remove { padding: 0; min-width: 0; min-height: 0; height: 18px; width: 18px; }
.msk-cat-picker__chip-remove svg { width: 14px; height: 14px; }

.msk-cat-picker__dropdown { border: 1px solid #ddd; border-radius: 4px; margin-block-start: 4px; max-height: 200px; overflow-y: auto; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.msk-cat-picker__option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 13px; font-family: inherit; text-align: start; }
.msk-cat-picker__option:hover { background: #f5f5f5; }
.msk-cat-picker__option.is-selected { background: #f0f7ff; }

.msk-cat-picker__check { display: inline-flex; width: 16px; font-size: 14px; color: var(--wp-admin-theme-color, #007cba); flex-shrink: 0; }
.msk-cat-picker__check--empty { visibility: hidden; }

.msk-cat-picker__option-name { flex: 1; font-weight: 500; color: #333; }

.msk-cat-picker__option-count { font-size: 12px; color: #999; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-featured-articles__card,
    .msk-featured-articles__link { transition: none; }
}

/* ── features-calculator ── */
/*
 * Maple Features Calculator — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Split layout: text left + interactive calculator widget right.
 * Custom range slider, inline-editable values, responsive.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT — 2-column split
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc { padding: var(--msk-space-4, 1rem); }
.msk-features-calc__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-12, 3rem); align-items: center; max-inline-size: 1200px; margin: 0 auto; padding: var(--msk-space-16, 4rem) var(--msk-space-8, 2rem); }

/* ══════════════════════════════════════════════════════════════════════════════
   LEFT — text content
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc__text { display: flex; flex-direction: column; gap: var(--msk-space-6, 1.5rem); }

.msk-features-calc__headline { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; color: var(--msk-color-text-primary, #111); margin: 0; }

.msk-features-calc__description { font-size: var(--msk-font-size-base, 1rem); color: var(--msk-color-text-muted, #555); line-height: var(--msk-leading-normal, 1.6); }
.msk-features-calc__description p { margin: 0 0 var(--msk-space-3, 0.75rem); }
.msk-features-calc__description strong { color: var(--msk-color-text-primary, #111); }

.msk-features-calc__cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #fff; background: var(--msk-color-text-primary, #2d0810); border-radius: var(--msk-radius-full, 9999px); text-decoration: none; align-self: flex-start; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-features-calc__cta:hover { transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════════════════
   RIGHT — calculator widget card
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc__widget { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-8, 2rem); display: flex; flex-direction: column; gap: var(--msk-space-6, 1.5rem); }

.msk-features-calc__widget-title { font-size: var(--msk-font-size-lg, 1.125rem); font-weight: 700; color: var(--msk-color-text-primary, #111); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   FIELDS — label + editable value + slider
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc__fields { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); }

.msk-features-calc__field { display: flex; flex-direction: column; gap: var(--msk-space-1, 0.25rem); }

.msk-features-calc__label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: var(--msk-color-text-primary, #111); }

/* Inline-editable value — looks like display, acts like input */
.msk-features-calc__value-wrap { position: relative; }

.msk-features-calc__value { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: var(--msk-color-text-primary, #111); background: transparent; border: none; border-bottom: 2px solid transparent; outline: none; padding: 0; margin: 0; font-family: inherit; line-height: 1.3; min-inline-size: 3ch; max-inline-size: 100%; }

.msk-features-calc__value:focus { border-bottom-color: var(--msk-color-text-primary, #111); }

/* Hidden mirror for auto-width measurement */
.msk-features-calc__value-mirror { position: absolute; visibility: hidden; pointer-events: none; white-space: pre; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; font-family: inherit; }

/* ══════════════════════════════════════════════════════════════════════════════
   RANGE SLIDER — custom styled
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc__slider { -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: 6px; background: rgba(0,0,0,0.15); border-radius: 3px; outline: none; cursor: pointer; margin-block-start: var(--msk-space-2, 0.5rem); }
.msk-features-calc__slider:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,0.35); border-radius: 3px; }

/* Track */
.msk-features-calc__slider::-webkit-slider-runnable-track { block-size: 6px; border-radius: 3px; }
.msk-features-calc__slider::-moz-range-track { block-size: 6px; background: rgba(0,0,0,0.15); border-radius: 3px; border: none; }

/* Thumb */
.msk-features-calc__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; inline-size: 22px; block-size: 22px; background: var(--msk-color-text-primary, #111); border-radius: 4px; border: none; margin-block-start: -8px; cursor: grab; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-features-calc__slider::-moz-range-thumb { inline-size: 22px; block-size: 22px; background: var(--msk-color-text-primary, #111); border-radius: 4px; border: none; cursor: grab; }

.msk-features-calc__slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.msk-features-calc__slider:active::-moz-range-thumb { cursor: grabbing; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESULTS
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc__results { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); border-block-start: 1px solid rgba(0,0,0,0.1); padding-block-start: var(--msk-space-5, 1.25rem); }

.msk-features-calc__result { display: flex; flex-direction: column; gap: var(--msk-space-1, 0.25rem); }

.msk-features-calc__result-label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: var(--msk-color-text-primary, #111); }

.msk-features-calc__result-value { font-size: var(--msk-font-size-lg, 1.125rem); font-weight: 700; color: var(--msk-color-text-primary, #111); }

.msk-features-calc__result-value--large { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .msk-features-calc { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DECORATIVE SVG
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc__decor { position: absolute; top: 0; right: 0; width: 50%; height: 100%; pointer-events: none; opacity: 0.07; color: var(--msk-color-text-primary, #111); }

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc--editor { border: 1px dashed var(--msk-color-border, #ccc); border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-8, 2rem); display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-8, 2rem); align-items: start; min-height: 280px; position: relative; overflow: hidden; }

/* Editor — left text column */
.msk-features-calc__editor-text { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-features-calc__editor-headline { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 800; line-height: 1.15; color: var(--msk-color-text-primary, #111); margin: 0; }
.msk-features-calc__editor-description { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #555); line-height: 1.5; margin: 0; }
.msk-features-calc__editor-cta { display: inline-flex; align-items: center; gap: 4px; padding: 6px 16px; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #fff; background: var(--msk-color-text-primary, #111); border-radius: var(--msk-radius-full, 9999px); align-self: flex-start; }

/* Editor — right widget preview */
.msk-features-calc__editor-widget { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-6, 1.5rem); display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-features-calc__editor-widget-title { font-size: var(--msk-font-size-base, 1rem); font-weight: 700; color: var(--msk-color-text-primary, #111); margin: 0; }
.msk-features-calc__editor-calc-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--msk-color-text-muted, #555); background: rgba(0,0,0,0.08); padding: 2px 8px; border-radius: 3px; align-self: flex-start; }

/* Editor — field rows */
.msk-features-calc__editor-fields { display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }
.msk-features-calc__editor-field { display: flex; flex-direction: column; gap: 4px; }
.msk-features-calc__editor-field-label { font-size: 10px; font-weight: 600; color: var(--msk-color-text-primary, #111); }
.msk-features-calc__editor-field-value { font-size: 18px; font-weight: 800; color: var(--msk-color-text-primary, #111); }
.msk-features-calc__editor-slider { width: 100%; }
.msk-features-calc__editor-slider-track { width: 100%; height: 6px; background: rgba(0,0,0,0.15); border-radius: 3px; position: relative; }
.msk-features-calc__editor-slider-thumb { position: absolute; top: 50%; left: 35%; transform: translate(-50%, -50%); width: 22px; height: 22px; background: var(--msk-color-text-primary, #111); border-radius: 4px; }

/* Editor — results area */
.msk-features-calc__editor-results { border-top: 1px solid rgba(0,0,0,0.1); padding-top: var(--msk-space-4, 1rem); }
.msk-features-calc__editor-result { display: flex; flex-direction: column; gap: 2px; }
.msk-features-calc__editor-result-label { font-size: 10px; font-weight: 600; color: var(--msk-color-text-muted, #555); }
.msk-features-calc__editor-result-value { font-size: 16px; font-weight: 700; color: var(--msk-color-text-primary, #111); }

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-features-calc__cta,
    .msk-features-calc__slider::-webkit-slider-thumb { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   V2 COMPOSABLE
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-calc--v2 { padding: 0; }

/* ── features-retro-cta ── */
/*
 * Maple Retro CTA Banner — Styles
 * Pure CSS tile grid, wavy SVG borders, starburst badge, ticket badge.
 */

.msk-retro-cta { padding: var(--msk-space-4, 1rem); }
.msk-retro-cta__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; }

/* ── Banner Area ─────────────────────────────────────────────────────── */

.msk-retro-cta__banner { position: relative; overflow: hidden; }

/* Wavy SVG borders */
.msk-retro-cta__wave { display: block; inline-size: 100%; block-size: 28px; position: relative; z-index: 2; }
.msk-retro-cta__wave--bottom { transform: rotate(180deg); }

/* Tile grid */
.msk-retro-cta__tiles { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--msk-space-10, 2.5rem); padding: var(--msk-space-12, 3rem) var(--msk-space-8, 2rem); min-block-size: 200px; background-image:
    linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.2) 1px, transparent 1px);
    background-size: 60px 60px; }

/* ── Ticket Badge (left) ─────────────────────────────────────────────── */

.msk-retro-cta__ticket { display: inline-block; padding: var(--msk-space-3, 0.75rem) var(--msk-space-5, 1.25rem); color: #fff; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 800; text-transform: uppercase; text-decoration: none; transform: rotate(-6deg); border-radius: var(--msk-radius-md, 0.5rem); line-height: 1.3; text-align: center; box-shadow: 2px 3px 0 rgba(0,0,0,0.3); }
.msk-retro-cta__ticket:hover { transform: rotate(-6deg) translateY(-2px); }

/* ── Main CTA Pill (centre) ──────────────────────────────────────────── */

.msk-retro-cta__pill { display: inline-flex; align-items: center; justify-content: center; padding: var(--msk-space-6, 1.5rem) var(--msk-space-16, 4rem); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; font-style: italic; color: var(--msk-color-text-primary, #111); text-decoration: none; border-radius: var(--msk-radius-full, 9999px); box-shadow: 4px 6px 0 rgba(0,0,0,0.4); transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-retro-cta__pill:hover { transform: translateY(-3px); }

/* ── Starburst Badge (right) — pure CSS ──────────────────────────────── */

.msk-retro-cta__starburst { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 90px; block-size: 90px; color: #fff; font-size: var(--msk-font-size-lg, 1.125rem); font-weight: 800; font-style: italic; text-align: center; z-index: 1; }

.msk-retro-cta__starburst::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--msk-starburst-color, #2020a0); clip-path: polygon(50% 0%, 61% 11%, 73% 2%, 78% 17%, 93% 15%, 90% 30%, 100% 39%, 91% 49%, 98% 61%, 85% 65%, 88% 79%, 74% 77%, 68% 90%, 58% 81%, 50% 95%, 42% 81%, 32% 90%, 26% 77%, 12% 79%, 15% 65%, 2% 61%, 9% 49%, 0% 39%, 10% 30%, 7% 15%, 22% 17%, 27% 2%, 39% 11%); }

/* ── Bottom Area ─────────────────────────────────────────────────────── */

.msk-retro-cta__bottom { padding: var(--msk-space-8, 2rem) var(--msk-space-4, 1rem); }

.msk-retro-cta__tagline { font-size: var(--msk-font-size-base, 1rem); font-weight: 600; color: var(--msk-color-text-primary, #111); text-align: center; max-inline-size: 700px; margin: 0 auto var(--msk-space-8, 2rem); line-height: var(--msk-leading-normal, 1.6); text-transform: capitalize; }

.msk-retro-cta__footer { display: flex; justify-content: space-between; align-items: center; }

.msk-retro-cta__logo { block-size: 48px; inline-size: auto; }

.msk-retro-cta__socials { display: flex; gap: var(--msk-space-4, 1rem); }
.msk-retro-cta__social { color: var(--msk-color-text-primary, #111); text-decoration: none; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-retro-cta__social:hover { opacity: 0.6; }

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-retro-cta__tiles { flex-direction: column; gap: var(--msk-space-6, 1.5rem); }
    .msk-retro-cta__pill { font-size: 1.25rem; padding: var(--msk-space-4, 1rem) var(--msk-space-10, 2.5rem); }
    .msk-retro-cta__footer { flex-direction: column; gap: var(--msk-space-4, 1rem); align-items: flex-start; }
}

/* ── Decorative geometric SVG (inside tile band) ─────────────────────── */

.msk-retro-cta__geom { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.06; color: #fff; z-index: 1; }

/* ── Editor ──────────────────────────────────────────────────────────── */

.msk-retro-cta--editor { border-radius: var(--msk-radius-md, 0.5rem); overflow: hidden; }

/* Editor banner */
.msk-retro-cta__editor-banner { position: relative; overflow: hidden; }
.msk-retro-cta__editor-wave--bottom { transform: rotate(180deg); }
.msk-retro-cta__editor-tiles { display: flex; align-items: center; justify-content: center; gap: var(--msk-space-10, 2.5rem); padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); min-height: 140px; background-image: linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.2) 1px, transparent 1px); background-size: 60px 60px; flex-wrap: wrap; }

/* Editor badges */
.msk-retro-cta__editor-ticket { display: inline-block; padding: var(--msk-space-2, 0.5rem) var(--msk-space-4, 1rem); color: #fff; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 800; text-transform: uppercase; border-radius: var(--msk-radius-md, 0.5rem); transform: rotate(-6deg); box-shadow: 2px 3px 0 rgba(0,0,0,0.3); z-index: 2; position: relative; }
.msk-retro-cta__editor-pill { display: inline-flex; align-items: center; justify-content: center; padding: var(--msk-space-4, 1rem) var(--msk-space-12, 3rem); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; font-style: italic; color: var(--msk-color-text-primary, #111); border-radius: var(--msk-radius-full, 9999px); box-shadow: 4px 6px 0 rgba(0,0,0,0.4); z-index: 2; position: relative; }
.msk-retro-cta__editor-starburst { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; color: #fff; font-size: var(--msk-font-size-base, 1rem); font-weight: 800; font-style: italic; text-align: center; z-index: 2; }
.msk-retro-cta__editor-starburst::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--msk-starburst-color, #2020a0); clip-path: polygon(50% 0%, 61% 11%, 73% 2%, 78% 17%, 93% 15%, 90% 30%, 100% 39%, 91% 49%, 98% 61%, 85% 65%, 88% 79%, 74% 77%, 68% 90%, 58% 81%, 50% 95%, 42% 81%, 32% 90%, 26% 77%, 12% 79%, 15% 65%, 2% 61%, 9% 49%, 0% 39%, 10% 30%, 7% 15%, 22% 17%, 27% 2%, 39% 11%); }

/* Editor bottom */
.msk-retro-cta__editor-bottom { padding: var(--msk-space-6, 1.5rem) var(--msk-space-4, 1rem); }
.msk-retro-cta__editor-tagline { font-size: var(--msk-font-size-base, 1rem); font-weight: 600; color: var(--msk-color-text-primary, #111); text-align: center; margin: 0 auto var(--msk-space-4, 1rem); line-height: 1.5; }
.msk-retro-cta__editor-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--msk-space-4, 1rem); }
.msk-retro-cta__editor-logo { height: 40px; width: auto; }
.msk-retro-cta__editor-logo-placeholder { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: var(--msk-color-text-muted, #999); background: var(--msk-color-surface, #f5f5f5); padding: 4px 12px; border-radius: 4px; }
.msk-retro-cta__editor-socials-hint { font-size: 11px; color: var(--msk-color-text-muted, #999); }

/* ── V2 Composable ──────────────────────────────────────────────────── */

.msk-retro-cta--v2 { padding: 0; }

/* ── Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-retro-cta__pill,
    .msk-retro-cta__social { transition: none; }
}

/* ── features-section ── */
/*
 * Maple Features Section — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Optional scrolling logo marquee + 3-column features grid.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-section { padding: var(--msk-space-4, 1rem); }
.msk-features-section__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; padding: var(--msk-space-16, 4rem) var(--msk-space-8, 2rem); }

/* ══════════════════════════════════════════════════════════════════════════════
   TRUST BAR — badge + scrolling logo marquee
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-section__trust { display: flex; flex-direction: column; align-items: center; gap: var(--msk-space-8, 2rem); margin-block-end: var(--msk-space-16, 4rem); }

.msk-features-section__trust-badge { display: inline-block; padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem); font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-primary, #111); background: var(--msk-color-surface, #f5f5f5); border-radius: var(--msk-radius-full, 9999px); border: 1px solid var(--msk-color-border, #e0e0e0); }

/* Marquee */
.msk-features-section__marquee { inline-size: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }

.msk-features-section__marquee-track { display: flex; align-items: center; gap: var(--msk-space-12, 3rem); inline-size: max-content; animation: msk-marquee 25s linear infinite; }

.msk-features-section__logo { block-size: 28px; inline-size: auto; opacity: 0.7; filter: grayscale(100%); flex-shrink: 0; }

@keyframes msk-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FEATURES GRID — 3 columns
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-section__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--msk-space-6, 1.5rem); max-inline-size: 1400px; margin: 0 auto; }

/* Left column — headline + CTAs + description */
.msk-features-section__main { display: flex; flex-direction: column; gap: var(--msk-space-6, 1.5rem); padding-inline-end: var(--msk-space-8, 2rem); }

.msk-features-section__headline { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; color: var(--msk-color-text-primary, #111); margin: 0; }

.msk-features-section__ctas { display: flex; gap: var(--msk-space-3, 0.75rem); flex-wrap: wrap; }

.msk-features-section__cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; text-decoration: none; border-radius: var(--msk-radius-full, 9999px); transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-features-section__cta--primary { background: var(--msk-color-text-primary, #2d0810); color: #fff; }
.msk-features-section__cta--primary:hover { transform: translateY(-1px); }
.msk-features-section__cta--secondary { background: transparent; color: var(--msk-color-text-primary, #111); border: 1px solid var(--msk-color-border, #ccc); }
.msk-features-section__cta--secondary:hover { border-color: var(--msk-color-text-primary, #111); }

.msk-features-section__description { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #555); line-height: var(--msk-leading-normal, 1.6); }
.msk-features-section__description p { margin: 0 0 var(--msk-space-4, 1rem); }
.msk-features-section__description strong { color: var(--msk-color-text-primary, #111); }

/* ══════════════════════════════════════════════════════════════════════════════
   FEATURE CARDS
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-section__card { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-8, 2rem); display: flex; flex-direction: column; justify-content: space-between; min-block-size: 320px; overflow: hidden; }

.msk-features-section__card-title { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.2; margin: 0 0 var(--msk-space-4, 1rem); }

.msk-features-section__card-desc { font-size: var(--msk-font-size-sm, 0.875rem); line-height: var(--msk-leading-normal, 1.6); }
.msk-features-section__card-desc p { margin: 0 0 var(--msk-space-2, 0.5rem); }

.msk-features-section__card-cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; border-radius: var(--msk-radius-full, 9999px); text-decoration: none; margin-block-start: auto; align-self: flex-start; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-features-section__card-cta:hover { transform: translateY(-1px); }

/* Light card */
.msk-features-section__card--light .msk-features-section__card-title { color: var(--msk-color-text-primary, #111); }
.msk-features-section__card--light .msk-features-section__card-desc { color: var(--msk-color-text-muted, #555); }
.msk-features-section__card--light .msk-features-section__card-cta { background: var(--msk-color-text-primary, #2d0810); color: #fff; }

/* Dark card */
.msk-features-section__card--dark { color: #fff; position: relative; }
.msk-features-section__card--dark .msk-features-section__card-title { color: #fff; margin-block-start: auto; }
.msk-features-section__card--dark .msk-features-section__card-image { max-inline-size: 100%; block-size: auto; border-radius: var(--msk-radius-md, 0.5rem); margin-block-end: var(--msk-space-4, 1rem); }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .msk-features-section__grid { grid-template-columns: 1fr; }
    .msk-features-section__main { padding-inline-end: 0; }
    .msk-features-section__card { min-block-size: 240px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DECORATIVE SVG (dark card)
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-section__card-decor { position: absolute; top: 0; right: 0; width: 70%; height: 100%; pointer-events: none; opacity: 0.12; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-section--editor { border: 1px dashed var(--msk-color-border, #ccc); border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-6, 1.5rem); display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); }

/* Trust bar */
.msk-features-section__editor-trust { display: flex; flex-direction: column; align-items: center; gap: var(--msk-space-4, 1rem); padding-bottom: var(--msk-space-4, 1rem); border-bottom: 1px dashed var(--msk-color-border, #ddd); }
.msk-features-section__editor-trust-badge { display: inline-block; padding: 4px 16px; font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-primary, #111); background: var(--msk-color-surface, #f5f5f5); border-radius: var(--msk-radius-full, 9999px); border: 1px solid var(--msk-color-border, #e0e0e0); }
.msk-features-section__editor-marquee { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); flex-wrap: wrap; }
.msk-features-section__editor-logo-pill { font-size: 10px; font-weight: 600; color: var(--msk-color-text-muted, #999); background: var(--msk-color-surface, #f5f5f5); padding: 2px 8px; border-radius: 3px; opacity: 0.7; }
.msk-features-section__editor-logo-count { font-size: 10px; color: var(--msk-color-text-muted, #999); }

/* Features grid */
.msk-features-section__editor-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--msk-space-5, 1.25rem); }

/* Main column */
.msk-features-section__editor-main { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); padding-right: var(--msk-space-4, 1rem); }
.msk-features-section__editor-headline { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 800; line-height: 1.15; color: var(--msk-color-text-primary, #111); margin: 0; }
.msk-features-section__editor-ctas { display: flex; gap: var(--msk-space-2, 0.5rem); flex-wrap: wrap; }
.msk-features-section__editor-cta { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; border-radius: var(--msk-radius-full, 9999px); }
.msk-features-section__editor-cta--primary { background: var(--msk-color-text-primary, #111); color: #fff; }
.msk-features-section__editor-cta--secondary { border: 1px solid var(--msk-color-border, #ccc); color: var(--msk-color-text-primary, #111); }
.msk-features-section__editor-description { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #555); line-height: 1.5; margin: 0; }

/* Cards */
.msk-features-section__editor-card { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-6, 1.5rem); display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; overflow: hidden; }
.msk-features-section__editor-card-title { font-size: var(--msk-font-size-lg, 1.125rem); font-weight: 700; color: var(--msk-color-text-primary, #111); display: block; margin-bottom: var(--msk-space-3, 0.75rem); }
.msk-features-section__editor-card-title--white { color: #fff; margin-top: auto; }
.msk-features-section__editor-card-desc { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #555); line-height: 1.5; margin: 0; }
.msk-features-section__editor-card-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; align-self: flex-start; padding: 6px 14px; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; background: var(--msk-color-text-primary, #111); color: #fff; border-radius: var(--msk-radius-full, 9999px); }
.msk-features-section__editor-card-image { max-width: 100%; height: auto; border-radius: var(--msk-radius-md, 0.5rem); margin-bottom: var(--msk-space-3, 0.75rem); position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-features-section__marquee-track { animation-play-state: paused; }
    .msk-features-section__cta,
    .msk-features-section__card-cta { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   V2 COMPOSABLE
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-section--v2 { padding: 0; }

/* ── features-showcase ── */
/*
 * Maple Features Showcase — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Dark-themed product showcase: feature cards + icon grid.
 * Colour scheme matches the DaVinci Resolve-style screenshot.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-showcase {
    padding: var(--msk-space-4, 1rem);
}

.msk-features-showcase__card {
    border-radius: var(--msk-radius-xl, 1.5rem);
    overflow: hidden;
    color: #f6f6f6;
    padding: var(--msk-space-16, 4rem) var(--msk-space-8, 2rem);
}

/* ══════════════════════════════════════════════════════════════════════════════
   FEATURE CARDS (top row)
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-showcase__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--msk-space-5, 1.25rem);
    margin-block-end: var(--msk-space-16, 4rem);
}

.msk-features-showcase__feature {
    display: flex;
    flex-direction: column;
}

/* Image container */
.msk-features-showcase__feature-image {
    border-radius: var(--msk-radius-lg, 1rem);
    overflow: hidden;
    aspect-ratio: 5 / 3;
    margin-block-end: var(--msk-space-5, 1.25rem);
    background: #2a2d3e;
}

.msk-features-showcase__feature-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.msk-features-showcase__feature-image svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
}

/* Coloured heading with underline accent */
.msk-features-showcase__feature-heading {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wide, 0.05em);
    margin: 0 0 var(--msk-space-3, 0.75rem) 0;
    line-height: 1.3;
}

.msk-features-showcase__feature-heading-text {
    border-bottom: 3px solid currentColor;
    padding-block-end: 4px;
}

/* Description text */
.msk-features-showcase__feature-desc {
    font-size: var(--msk-font-size-sm, 0.875rem);
    line-height: var(--msk-leading-normal, 1.6);
    color: inherit;
    opacity: 0.85;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION HEADING (middle)
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-showcase__heading {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin: 0 0 var(--msk-space-10, 2.5rem) 0;
    line-height: var(--msk-leading-tight, 1.2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ICON CARDS (bottom row)
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-showcase__icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--msk-space-5, 1.25rem);
}

.msk-features-showcase__icon-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--msk-radius-lg, 1rem);
    overflow: hidden;
}

/* Top area: icon + name */
.msk-features-showcase__icon-top {
    background: #2a2d3e;
    padding: var(--msk-space-8, 2rem) var(--msk-space-6, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--msk-space-4, 1rem);
    border-radius: var(--msk-radius-lg, 1rem) var(--msk-radius-lg, 1rem) 0 0;
}

.msk-features-showcase__icon-svg {
    inline-size: 64px;
    block-size: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msk-features-showcase__icon-svg svg {
    inline-size: 64px;
    block-size: 64px;
}

.msk-features-showcase__icon-name {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}

/* Bottom area: requirements */
.msk-features-showcase__icon-reqs {
    background: #232639;
    border-top: 1px solid #33365a;
    padding: var(--msk-space-5, 1.25rem) var(--msk-space-6, 1.5rem);
    border-radius: 0 0 var(--msk-radius-lg, 1rem) var(--msk-radius-lg, 1rem);
}

.msk-features-showcase__icon-reqs p {
    font-size: var(--msk-font-size-sm, 0.875rem);
    line-height: var(--msk-leading-normal, 1.6);
    color: inherit;
    opacity: 0.7;
    text-align: center;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
    .msk-features-showcase__features,
    .msk-features-showcase__icons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .msk-features-showcase__features,
    .msk-features-showcase__icons {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DECORATIVE SVG
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-showcase__decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.07;
    color: #e8eaf0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-showcase--editor {
    border-radius: var(--msk-radius-lg, 1rem);
    padding: var(--msk-space-6, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-8, 2rem);
}

/* Editor — feature cards row */
.msk-features-showcase__editor-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--msk-space-4, 1rem);
}

.msk-features-showcase__editor-feature {
    display: flex;
    flex-direction: column;
}

.msk-features-showcase__editor-feature-image {
    border-radius: var(--msk-radius-md, 0.5rem);
    overflow: hidden;
    aspect-ratio: 5 / 3;
    margin-bottom: var(--msk-space-3, 0.75rem);
    background: #2a2d3e;
}

.msk-features-showcase__editor-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msk-features-showcase__editor-feature-heading {
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--msk-space-2, 0.5rem) 0;
    line-height: 1.3;
}

.msk-features-showcase__editor-feature-heading-text {
    border-bottom: 3px solid currentColor;
    padding-bottom: 3px;
}

.msk-features-showcase__editor-feature-desc {
    font-size: var(--msk-font-size-xs, 0.75rem);
    line-height: 1.5;
    color: #dde0ea;
    margin: 0;
}

/* Editor — section heading */
.msk-features-showcase__editor-heading {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

/* Editor — icon cards row */
.msk-features-showcase__editor-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--msk-space-4, 1rem);
}

.msk-features-showcase__editor-icon-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--msk-radius-md, 0.5rem);
    overflow: hidden;
}

.msk-features-showcase__editor-icon-top {
    background: #2a2d3e;
    padding: var(--msk-space-5, 1.25rem) var(--msk-space-4, 1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--msk-space-3, 0.75rem);
    border-radius: var(--msk-radius-md, 0.5rem) var(--msk-radius-md, 0.5rem) 0 0;
}

.msk-features-showcase__editor-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: rgba(255,255,255,0.05);
}

.msk-features-showcase__editor-icon-name {
    font-size: var(--msk-font-size-base, 1rem);
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}

.msk-features-showcase__editor-icon-reqs {
    background: #232639;
    border-top: 1px solid #33365a;
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-4, 1rem);
    border-radius: 0 0 var(--msk-radius-md, 0.5rem) var(--msk-radius-md, 0.5rem);
}

.msk-features-showcase__editor-icon-reqs p {
    font-size: var(--msk-font-size-xs, 0.75rem);
    line-height: 1.5;
    color: #c8ccd8;
    text-align: center;
    margin: 0;
}

@media (max-width: 960px) {
    .msk-features-showcase__editor-features,
    .msk-features-showcase__editor-icons { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .msk-features-showcase__editor-features,
    .msk-features-showcase__editor-icons { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   V2 COMPOSABLE
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-features-showcase--v2 { padding: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-features-showcase * {
        transition: none;
    }
}

/* ── footer-columns ── */
/*
 * Maple Footer Columns — Styles
 */

/* Outer */
.msk-footer-columns { padding: var(--msk-space-4, 1rem); }

/* Dark card */
.msk-footer-columns__card {
    border-radius: var(--msk-radius-xl, 1.5rem) var(--msk-radius-xl, 1.5rem) 0 0;
    padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem);
    color: #f6f6f6;
    position: relative;
    overflow: hidden;
}

/* Decorative geometric lines */
.msk-footer-columns__decor {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 45%;
    block-size: 100%;
    pointer-events: none;
    opacity: 0.12;
}

/* Grid: brand + 2 link columns */
.msk-footer-columns__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--msk-space-12, 3rem);
    position: relative;
    z-index: 1;
}

/* Brand */
.msk-footer-columns__brand { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); }
.msk-footer-columns__logo { block-size: 36px; inline-size: auto; }
.msk-footer-columns__brand-name {
    font-size: var(--msk-font-size-xl, 1.25rem);
    font-weight: 700;
    color: #f6f6f6;
    margin: 0;
    letter-spacing: var(--msk-tracking-wide, 0.05em);
}
.msk-footer-columns__tagline { font-size: var(--msk-font-size-sm, 0.875rem); line-height: var(--msk-leading-normal, 1.6); margin: 0; opacity: 0.7; }

/* Socials */
.msk-footer-columns__socials { display: flex; gap: var(--msk-space-4, 1rem); align-items: center; }
.msk-footer-columns__social { color: rgba(246,246,246,0.92); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); display: inline-flex; }
.msk-footer-columns__social:hover { color: #f6f6f6; }

/* Back to top */
.msk-footer-columns__back-to-top {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(246,246,246,0.3);
    color: rgba(246,246,246,0.92);
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem);
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-widest, 0.15em);
    border-radius: var(--msk-radius-md, 0.5rem);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--msk-space-2, 0.5rem);
    align-self: flex-start;
    margin-block-start: var(--msk-space-4, 1rem);
    font-family: inherit;
    transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}
.msk-footer-columns__back-to-top:hover { border-color: #f6f6f6; color: #f6f6f6; }
.msk-footer-columns__back-to-top:focus-visible { outline: 2px solid #f6f6f6; outline-offset: 2px; }

/* Link columns */
.msk-footer-columns__links { display: flex; flex-direction: column; }
.msk-footer-columns__col-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: #f6f6f6; margin: 0 0 var(--msk-space-6, 1.5rem); }
.msk-footer-columns__link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }
.msk-footer-columns__link-list a { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-columns__link-list a:hover { color: #f6f6f6; text-decoration: underline; text-underline-offset: 4px; }

/* Copyright bar */
.msk-footer-columns__bar {
    padding: var(--msk-space-4, 1rem);
    text-align: center;
    border-radius: 0 0 var(--msk-radius-xl, 1.5rem) var(--msk-radius-xl, 1.5rem);
}
.msk-footer-columns__copyright { font-size: var(--msk-font-size-xs, 0.75rem); color: #110d00; margin: 0; font-style: italic; }

/* Mobile */
@media (max-width: 782px) {
    .msk-footer-columns__grid { grid-template-columns: 1fr; gap: var(--msk-space-8, 2rem); }
}

/* Editor preview */
.msk-footer-columns--editor { border-radius: var(--msk-radius-md, 0.5rem); }
.msk-footer-columns__editor-card {
    border-radius: var(--msk-radius-xl, 1.5rem) var(--msk-radius-xl, 1.5rem) 0 0;
    padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem);
    color: rgba(246,246,246,0.75);
    position: relative;
    overflow: hidden;
}
.msk-footer-columns__editor-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--msk-space-12, 3rem);
    position: relative;
    z-index: 1;
}
.msk-footer-columns__editor-brand { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-footer-columns__editor-brand-name { font-size: var(--msk-font-size-xl, 1.25rem); font-weight: 700; color: #f6f6f6; margin: 0; letter-spacing: var(--msk-tracking-wide, 0.05em); }
.msk-footer-columns__editor-tagline { font-size: var(--msk-font-size-sm, 0.875rem); line-height: var(--msk-leading-normal, 1.6); margin: 0; opacity: 0.7; }
.msk-footer-columns__editor-socials { display: flex; gap: var(--msk-space-3, 0.75rem); opacity: 0.6; }
.msk-footer-columns__editor-back-to-top {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(246,246,246,0.3);
    color: rgba(246,246,246,0.7);
    padding: var(--msk-space-2, 0.5rem) var(--msk-space-5, 1.25rem);
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-widest, 0.15em);
    border-radius: var(--msk-radius-md, 0.5rem);
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: var(--msk-space-2, 0.5rem);
    align-self: flex-start;
    margin-block-start: var(--msk-space-2, 0.5rem);
    font-family: inherit;
}
.msk-footer-columns__editor-links { display: flex; flex-direction: column; }
.msk-footer-columns__editor-col-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: #f6f6f6; margin: 0 0 var(--msk-space-5, 1.25rem); }
.msk-footer-columns__editor-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); }
.msk-footer-columns__editor-link-list li { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.65); }
.msk-footer-columns__editor-bar { padding: var(--msk-space-3, 0.75rem); text-align: center; border-radius: 0 0 var(--msk-radius-xl, 1.5rem) var(--msk-radius-xl, 1.5rem); }
.msk-footer-columns__editor-copyright { font-size: var(--msk-font-size-xs, 0.75rem); color: rgba(0,0,0,0.7); margin: 0; font-style: italic; }

/* V2 composable */
.msk-footer-columns--v2 { padding: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .msk-footer-columns__social,
    .msk-footer-columns__link-list a,
    .msk-footer-columns__back-to-top { transition: none; }
}

/* ── footer-contact ── */
/*
 * Maple Footer Contact — Styles
 */

/* Outer wrapper — accent background */
.msk-footer-contact { padding: var(--msk-space-4, 1rem); }

/* Card */
.msk-footer-contact__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; }

/* ── Top Section — Contact ─────────────────────────────────────────── */

.msk-footer-contact__top { padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); }

.msk-footer-contact__top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-10, 2.5rem); align-items: start; }

/* Left info */
.msk-footer-contact__info { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); }
.msk-footer-contact__headline { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; color: inherit; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.msk-footer-contact__desc { font-size: var(--msk-font-size-sm, 0.875rem); color: #525252; margin: 0; line-height: var(--msk-leading-normal, 1.6); max-inline-size: 400px; }

.msk-footer-contact__details { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); margin-block-start: var(--msk-space-4, 1rem); }
.msk-footer-contact__detail { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); }
.msk-footer-contact__detail-icon { display: inline-flex; flex-shrink: 0; }
.msk-footer-contact__detail a,
.msk-footer-contact__detail span { font-size: var(--msk-font-size-sm, 0.875rem); color: #333; text-decoration: none; }
.msk-footer-contact__detail a:hover { text-decoration: underline; }

/* Right form card */
.msk-footer-contact__form-card { background: #fff; border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-8, 2rem); box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); position: relative; z-index: 1; }
.msk-footer-contact__form-title { font-size: clamp(1rem, 2vw, 1.375rem); font-weight: 700; color: #111; margin: 0 0 var(--msk-space-5, 1.25rem); text-transform: uppercase; letter-spacing: 0.5px; }

.msk-footer-contact__form { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }

.msk-footer-contact__input,
.msk-footer-contact__textarea { inline-size: 100%; padding: var(--msk-space-3, 0.75rem); font-size: var(--msk-font-size-sm, 0.875rem); font-family: inherit; color: #222; background: #fff; border: 1px solid; border-radius: var(--msk-radius-md, 0.5rem); outline: none; box-sizing: border-box; transition: box-shadow var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-contact__input::placeholder,
.msk-footer-contact__textarea::placeholder { color: inherit; opacity: 0.4; }
.msk-footer-contact__input:focus,
.msk-footer-contact__textarea:focus { box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }
.msk-footer-contact__textarea { resize: vertical; min-block-size: 100px; }

.msk-footer-contact__submit { inline-size: 100%; padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-base, 1rem); font-weight: 700; font-family: inherit; color: #fff; border: none; border-radius: var(--msk-radius-md, 0.5rem); cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-contact__submit:hover { opacity: 0.9; }

/* ── Bottom Section — Footer Band ──────────────────────────────────── */

.msk-footer-contact__bottom { position: relative; overflow: hidden; padding: var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); color: rgba(246,246,246,0.92); }

.msk-footer-contact__decor { position: absolute; top: 0; right: 0; width: 50%; height: 100%; pointer-events: none; opacity: 0.1; color: currentColor; }

.msk-footer-contact__bottom-main { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: var(--msk-space-8, 2rem); align-items: start; margin-block-end: var(--msk-space-8, 2rem); }

/* Brand */
.msk-footer-contact__brand { display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }
.msk-footer-contact__brand-name { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: 1px; }
.msk-footer-contact__brand-desc { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); margin: 0; line-height: var(--msk-leading-normal, 1.6); }

/* About */
.msk-footer-contact__about { display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); }
.msk-footer-contact__about-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.msk-footer-contact__about-desc { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); margin: 0; line-height: var(--msk-leading-normal, 1.6); }

/* Social icons */
.msk-footer-contact__socials { display: flex; gap: var(--msk-space-3, 0.75rem); align-items: flex-start; }
.msk-footer-contact__social-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border-radius: var(--msk-radius-full, 9999px); color: rgba(246,246,246,0.92); border: 1px solid rgba(246,246,246,0.25); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-contact__social-icon:hover { color: #fff; border-color: rgba(246,246,246,0.65); }

/* Navigation row */
.msk-footer-contact__nav { display: flex; flex-wrap: wrap; gap: var(--msk-space-6, 1.5rem); padding-block-start: var(--msk-space-6, 1.5rem); border-block-start: 1px solid rgba(246,246,246,0.15); }
.msk-footer-contact__nav-link { font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: rgba(246,246,246,0.92); transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-contact__nav-link:hover { color: #fff; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-footer-contact__top-grid { grid-template-columns: 1fr; }
    .msk-footer-contact__bottom-main { grid-template-columns: 1fr; }
    .msk-footer-contact__nav { justify-content: center; }
}

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-footer-contact--editor { border-radius: var(--msk-radius-md, 0.5rem); overflow: hidden; display: block; }

/* Top contact section */
.msk-footer-contact__editor-top { padding: 20px 24px; }
.msk-footer-contact__editor-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.msk-footer-contact__editor-info { display: flex; flex-direction: column; gap: 6px; }
.msk-footer-contact__editor-headline { font-size: 13px; font-weight: 700; color: #111; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.msk-footer-contact__editor-desc { font-size: 10px; color: #555; margin: 0; line-height: 1.5; }
.msk-footer-contact__editor-details { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.msk-footer-contact__editor-detail { font-size: 9px; color: #444; }
.msk-footer-contact__editor-form-card { background: #fff; border-radius: 8px; padding: 12px 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.msk-footer-contact__editor-form-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #111; margin: 0 0 8px; }
.msk-footer-contact__editor-form-fields { display: flex; flex-direction: column; gap: 5px; }
.msk-footer-contact__editor-field { height: 14px; background: #f3f4f6; border-radius: 3px; border: 1px solid #e5e7eb; }
.msk-footer-contact__editor-field--textarea { height: 32px; }
.msk-footer-contact__editor-submit { height: 18px; border-radius: 3px; margin-top: 2px; }

/* Bottom footer band */
.msk-footer-contact__editor-bottom { position: relative; overflow: hidden; padding: 16px 24px 12px; color: rgba(246,246,246,0.92); }
.msk-footer-contact__editor-decor { position: absolute; top: 0; right: 0; width: 50%; height: 100%; pointer-events: none; opacity: 0.1; color: currentColor; }
.msk-footer-contact__editor-bottom-grid { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 14px; align-items: start; margin-bottom: 10px; position: relative; }
.msk-footer-contact__editor-brand-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin: 0 0 4px; }
.msk-footer-contact__editor-brand-desc { font-size: 9px; color: rgba(246,246,246,0.75); margin: 0; line-height: 1.4; }
.msk-footer-contact__editor-about-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; margin: 0 0 3px; }
.msk-footer-contact__editor-about-desc { font-size: 9px; color: rgba(246,246,246,0.75); margin: 0; line-height: 1.4; }
.msk-footer-contact__editor-socials { display: flex; gap: 5px; align-items: center; }
.msk-footer-contact__editor-social-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(246,246,246,0.3); display: inline-flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: rgba(246,246,246,0.7); }
.msk-footer-contact__editor-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(246,246,246,0.15); position: relative; }
.msk-footer-contact__editor-nav-link { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(246,246,246,0.8); }
.msk-footer-contact__editor-placeholder { font-size: 9px; color: rgba(246,246,246,0.45); font-style: italic; }

/* ── V2 Composable ────────────────────────────────────────────────── */

.msk-footer-contact--v2 { padding: 0; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-footer-contact__input,
    .msk-footer-contact__textarea,
    .msk-footer-contact__submit,
    .msk-footer-contact__social-icon,
    .msk-footer-contact__nav-link { transition: none; }
}

/* ── footer-dark ── */
/*
 * Maple Footer Dark — Styles
 */

/* Outer wrapper — accent background */
.msk-footer-dark { padding: var(--msk-space-4, 1rem); }

/* Dark card */
.msk-footer-dark__card { color: rgba(246,246,246,0.92); overflow: hidden; position: relative; padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); border-radius: var(--msk-radius-xl, 1.5rem); }

/* ── CTA Header (optional) ─────────────────────────────────────────── */

.msk-footer-dark__header { display: flex; justify-content: space-between; align-items: center; gap: var(--msk-space-8, 2rem); padding-block-end: var(--msk-space-10, 2.5rem); border-block-end: 1px solid rgba(246,246,246,0.1); margin-block-end: var(--msk-space-10, 2.5rem); position: relative; z-index: 1; }

.msk-footer-dark__headline { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; color: rgba(246,246,246,0.9); margin: 0; max-inline-size: 600px; line-height: 1.3; }

/* ── Main Grid ──────────────────────────────────────────────────────── */

.msk-footer-dark__grid { display: grid; grid-template-columns: auto repeat(3, 1fr) auto; gap: var(--msk-space-10, 2.5rem); position: relative; z-index: 1; align-items: start; }

/* Decorative SVG */
.msk-footer-dark__decor { position: absolute; top: 0; right: 0; width: 45%; height: 100%; pointer-events: none; opacity: 0.06; z-index: 0; }

/* Brand column */
.msk-footer-dark__brand { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-footer-dark__logo { block-size: 36px; inline-size: auto; margin-block-end: var(--msk-space-4, 1rem); }
.msk-footer-dark__brand-name { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; color: #f6f6f6; margin: 0; }

.msk-footer-dark__social-list { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); }
.msk-footer-dark__social-item { display: flex; flex-direction: column; gap: var(--msk-space-1, 0.25rem); text-decoration: none; color: inherit; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-dark__social-item:hover { color: #f6f6f6; }
.msk-footer-dark__social-title { font-size: var(--msk-font-size-base, 1rem); font-weight: 700; color: rgba(246,246,246,0.9); }
.msk-footer-dark__social-desc { font-size: var(--msk-font-size-sm, 0.875rem); opacity: 0.5; }

/* Link columns */
.msk-footer-dark__col { display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }

.msk-footer-dark__col-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: rgba(246,246,246,0.9); margin: 0 0 var(--msk-space-2, 0.5rem); }

.msk-footer-dark__link-item { display: flex; flex-direction: column; gap: var(--msk-space-1, 0.25rem); text-decoration: none; color: inherit; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-dark__link-item:hover { color: #f6f6f6; }
.msk-footer-dark__link-title { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); }
.msk-footer-dark__link-desc { font-size: var(--msk-font-size-xs, 0.75rem); opacity: 0.5; line-height: var(--msk-leading-normal, 1.6); }

/* CTA Cards — tall, dashed border, text bottom-left, arrow top-right */
.msk-footer-dark__cta-cards { display: flex; gap: var(--msk-space-4, 1rem); align-self: stretch; }

.msk-footer-dark__cta-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--msk-space-6, 1.5rem); padding: var(--msk-space-5, 1.25rem) var(--msk-space-6, 1.5rem); border: 1px solid rgba(246,246,246,0.35); text-decoration: none; color: rgba(246,246,246,0.92); min-inline-size: 160px; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-dark__cta-card:hover { border-color: rgba(246,246,246,0.7); }

.msk-footer-dark__cta-card-arrow { display: inline-flex; flex-shrink: 0; color: rgba(246,246,246,0.92); }

.msk-footer-dark__cta-card-text { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; line-height: 1.35; }

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-footer-dark__header { flex-direction: column; align-items: flex-start; }
    .msk-footer-dark__grid { grid-template-columns: 1fr 1fr; }
    .msk-footer-dark__cta-cards { grid-column: 1 / -1; }
}

/* ── Editor ──────────────────────────────────────────────────────────── */

.msk-footer-dark--editor { }
.msk-footer-dark__editor-card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; }

.msk-footer-dark__editor-card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; padding: 1.5rem; color: rgba(246,246,246,0.7); position: relative; }

.msk-footer-dark__editor-header { padding-block-end: 1rem; border-block-end: 1px solid rgba(246,246,246,0.1); margin-block-end: 1rem; position: relative; z-index: 1; }
.msk-footer-dark__editor-headline { font-size: 14px; font-weight: 600; color: rgba(246,246,246,0.85); margin: 0; }

.msk-footer-dark__editor-grid { display: grid; grid-template-columns: auto repeat(3, 1fr) auto; gap: 1.5rem; position: relative; z-index: 1; align-items: start; }

.msk-footer-dark__editor-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.msk-footer-dark__editor-brand-name { font-size: 13px; font-weight: 700; color: #f6f6f6; margin: 0 0 0.25rem; }
.msk-footer-dark__editor-social-item { font-size: 11px; color: rgba(246,246,246,0.6); padding: 2px 0; display: block; }
.msk-footer-dark__editor-social-title { font-weight: 700; color: rgba(246,246,246,0.85); }

.msk-footer-dark__editor-col { display: flex; flex-direction: column; gap: 0.4rem; }
.msk-footer-dark__editor-col-title { font-size: 11px; font-weight: 700; color: rgba(246,246,246,0.9); margin: 0 0 0.25rem; }
.msk-footer-dark__editor-link-item { font-size: 11px; color: rgba(246,246,246,0.6); padding: 1px 0; display: block; }
.msk-footer-dark__editor-link-title { color: rgba(246,246,246,0.7); display: block; }

.msk-footer-dark__editor-cta-cards { display: flex; gap: 0.75rem; align-self: stretch; }
.msk-footer-dark__editor-cta-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem; border: 1px solid rgba(246,246,246,0.35); min-width: 100px; }
.msk-footer-dark__editor-cta-card-arrow { display: inline-flex; flex-shrink: 0; color: rgba(246,246,246,0.6); }
.msk-footer-dark__editor-cta-card-arrow svg { width: 14px; height: 14px; }
.msk-footer-dark__editor-cta-card-text { font-size: 11px; font-weight: 600; color: rgba(246,246,246,0.9); line-height: 1.35; }

/* ── V2 Composable ──────────────────────────────────────────────────── */

.msk-footer-dark--v2 { padding: 0; }

/* ── Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-footer-dark__social-item,
    .msk-footer-dark__link-item,
    .msk-footer-dark__cta-card { transition: none; }
}

/* ── footer-detailed ── */
/*
 * Maple Footer Detailed — Styles
 */

/* Outer wrapper — accent background */
.msk-footer-detailed { padding: var(--msk-space-4, 1rem); }
.msk-footer-detailed--v2 { padding: 0; }

/* Card */
.msk-footer-detailed__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; }

/* ── CTA Card ────────────────────────────────────────────────────────── */

.msk-footer-detailed__cta-card { color: #f6f6f6; overflow: hidden; padding: var(--msk-space-10, 2.5rem); }

.msk-footer-detailed__cta-row { display: flex; justify-content: space-between; align-items: center; gap: var(--msk-space-8, 2rem); }

.msk-footer-detailed__cta-text { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); max-inline-size: 600px; }
.msk-footer-detailed__cta-headline { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: #f6f6f6; margin: 0; line-height: 1.2; }
.msk-footer-detailed__cta-desc { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); line-height: var(--msk-leading-normal, 1.6); margin: 0; }

.msk-footer-detailed__cta-btns { display: flex; gap: var(--msk-space-3, 0.75rem); flex-shrink: 0; }
.msk-footer-detailed__btn { display: inline-flex; align-items: center; padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; border-radius: var(--msk-radius-md, 0.5rem); text-decoration: none; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-detailed__btn--primary { color: #fff; }
.msk-footer-detailed__btn--primary:hover { transform: translateY(-1px); }
.msk-footer-detailed__btn--outline { color: #f6f6f6; background: transparent; border: 2px solid rgba(246,246,246,0.4); }
.msk-footer-detailed__btn--outline:hover { border-color: #f6f6f6; }

.msk-footer-detailed__cta-image img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── Main Grid ───────────────────────────────────────────────────────── */

.msk-footer-detailed__main { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--msk-space-10, 2.5rem); padding: var(--msk-space-10, 2.5rem); color: rgba(246,246,246,0.92); }

.msk-footer-detailed__brand { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-footer-detailed__logo { block-size: 28px; inline-size: auto; }
.msk-footer-detailed__brand-name { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 700; color: #f6f6f6; margin: 0; }
.msk-footer-detailed__company { font-size: var(--msk-font-size-xs, 0.75rem); color: rgba(246,246,246,0.92); line-height: var(--msk-leading-normal, 1.6); }

/* ── Decorative SVG ──────────────────────────────────────────────────── */

.msk-footer-detailed__decor { position: absolute; top: 0; right: 0; inline-size: 45%; block-size: 100%; pointer-events: none; opacity: 0.06; color: #f6f6f6; z-index: 0; }

.msk-footer-detailed__col-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: #f6f6f6; margin: 0 0 var(--msk-space-4, 1rem); }
.msk-footer-detailed__col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); }
.msk-footer-detailed__col-list a { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-detailed__col-list a:hover { color: #f6f6f6; }

/* ── Social Row ──────────────────────────────────────────────────────── */

.msk-footer-detailed__social-row { display: flex; align-items: center; justify-content: center; gap: var(--msk-space-5, 1.25rem); padding: var(--msk-space-5, 1.25rem) var(--msk-space-10, 2.5rem); border-block-start: 1px solid rgba(246,246,246,0.1); color: rgba(246,246,246,0.92); }
.msk-footer-detailed__social-label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: #f6f6f6; }
.msk-footer-detailed__socials { display: flex; gap: var(--msk-space-4, 1rem); align-items: center; }
.msk-footer-detailed__social { display: inline-flex; color: rgba(246,246,246,0.92); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-detailed__social:hover { color: #f6f6f6; }

/* ── Tags Bar ────────────────────────────────────────────────────────── */

.msk-footer-detailed__tags-bar { display: flex; align-items: center; gap: var(--msk-space-4, 1rem); padding: var(--msk-space-5, 1.25rem) var(--msk-space-4, 1rem); border-block-start: 1px solid rgba(0,0,0,0.1); flex-wrap: wrap; color: #333; }
.msk-footer-detailed__tags-label { font-size: var(--msk-font-size-xs, 0.75rem); color: #4a4a4a; white-space: nowrap; }
.msk-footer-detailed__tags { display: flex; gap: var(--msk-space-4, 1rem); flex-wrap: wrap; flex: 1; }
.msk-footer-detailed__tag { font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 600; color: #444; text-decoration: none; text-transform: uppercase; letter-spacing: var(--msk-tracking-wider, 0.1em); transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-detailed__tag:hover { color: #111; }
.msk-footer-detailed__tags-more { font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 600; color: #111; text-decoration: none; white-space: nowrap; margin-inline-start: auto; }

/* ── Copyright Bar ───────────────────────────────────────────────────── */

.msk-footer-detailed__copyright-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--msk-space-5, 1.25rem) var(--msk-space-4, 1rem); border-block-start: 1px solid rgba(0,0,0,0.1); }
.msk-footer-detailed__copyright { font-size: var(--msk-font-size-xs, 0.75rem); color: #4a4a4a; margin: 0; }
.msk-footer-detailed__legal { display: flex; gap: var(--msk-space-5, 1.25rem); }
.msk-footer-detailed__legal a { font-size: var(--msk-font-size-xs, 0.75rem); color: #444; text-decoration: none; }
.msk-footer-detailed__legal a:hover { color: #111; }

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-footer-detailed__cta-row { flex-direction: column; align-items: flex-start; }
    .msk-footer-detailed__main { grid-template-columns: 1fr 1fr; }
    .msk-footer-detailed__brand { grid-column: 1 / -1; }
    .msk-footer-detailed__social-row { flex-wrap: wrap; }
    .msk-footer-detailed__copyright-bar { flex-direction: column; gap: var(--msk-space-3, 0.75rem); align-items: flex-start; }
}

/* ── Editor ──────────────────────────────────────────────────────────── */

/* The block editor wraps the footer element — ensure full-width display */
.wp-block-maple-site-kit-footer-detailed { display: block; }

/* Decor SVG inside the card */
.msk-footer-detailed__card .msk-footer-detailed__editor-decor { position: absolute; top: 0; right: 0; inline-size: 45%; block-size: 100%; pointer-events: none; opacity: 0.06; color: #f6f6f6; z-index: 0; }

/* In the editor the social icons are text abbreviations — style them to match the SVG icon slots */
.msk-footer-detailed__social { font-size: 0.75rem; font-weight: 700; }

/* ── Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-footer-detailed__btn,
    .msk-footer-detailed__col-list a,
    .msk-footer-detailed__tag,
    .msk-footer-detailed__legal a { transition: none; }
}

/* ── footer-hero ── */
/*
 * Maple Footer Hero — Styles
 */

/* Outer wrapper — accent background */
.msk-footer-hero { padding: var(--msk-space-4, 1rem); }
.msk-footer-hero--v2 { padding: 0; }

/* Card */
.msk-footer-hero__card { overflow: hidden; position: relative; border-radius: var(--msk-radius-xl, 1.5rem); }

/* ── Hero Banner ─────────────────────────────────────────────────────── */

.msk-footer-hero__banner { position: relative; min-block-size: 350px; display: flex; align-items: flex-start; background-size: cover; background-position: center bottom; }

.msk-footer-hero__banner-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--msk-space-8, 2rem); inline-size: 100%; max-inline-size: 1200px; margin: 0 auto; padding: var(--msk-space-12, 3rem) var(--msk-space-8, 2rem); position: relative; z-index: 2; }

.msk-footer-hero__headline { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: #fff; margin: 0; line-height: 1.3; max-inline-size: 400px; }

.msk-footer-hero__ctas { display: flex; gap: var(--msk-space-4, 1rem); flex-shrink: 0; align-items: center; }

.msk-footer-hero__cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; border-radius: var(--msk-radius-md, 0.5rem); text-decoration: none; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-hero__cta--ghost { color: #fff; background: transparent; border: 2px solid #fff; }
.msk-footer-hero__cta--ghost:hover { text-decoration: underline; }
.msk-footer-hero__cta--solid { color: var(--msk-color-text-primary, #111); background: #fff; }
.msk-footer-hero__cta--solid:hover { transform: translateY(-1px); }

/* ── Bottom Section ──────────────────────────────────────────────────── */

.msk-footer-hero__bottom { color: rgba(246,246,246,0.92); }

.msk-footer-hero__bottom-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: var(--msk-space-10, 2.5rem); padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); }

/* Brand */
.msk-footer-hero__brand { display: flex; flex-direction: column; gap: var(--msk-space-6, 1.5rem); }
.msk-footer-hero__logo { block-size: 28px; inline-size: auto; }
.msk-footer-hero__lang { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); border: 2px solid rgba(246,246,246,0.3); border-radius: var(--msk-radius-full, 9999px); padding: var(--msk-space-2, 0.5rem) var(--msk-space-4, 1rem); background: transparent; cursor: pointer; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); align-self: flex-start; }
.msk-footer-hero__lang:hover { border-color: rgba(246,246,246,0.6); }

/* Link columns */
.msk-footer-hero__col-title { font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: var(--msk-tracking-widest, 0.15em); color: rgba(246,246,246,0.92); margin: 0 0 var(--msk-space-5, 1.25rem); }
.msk-footer-hero__col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }
.msk-footer-hero__col-list a { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-hero__col-list a:hover { color: #fff; }

/* ── Brand Name Fallback ─────────────────────────────────────────────── */

.msk-footer-hero__brand-name { font-size: 1.125rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: 0.03em; }

/* ── Decorative SVG ──────────────────────────────────────────────────── */

.msk-footer-hero__decor { position: absolute; top: 0; right: 0; width: 45%; height: 100%; pointer-events: none; opacity: 0.08; color: #fff; z-index: 1; }

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-footer-hero__banner-inner { flex-direction: column; }
    .msk-footer-hero__bottom-inner { grid-template-columns: 1fr 1fr; }
    .msk-footer-hero__brand { grid-column: 1 / -1; }
}

/* ── Editor ──────────────────────────────────────────────────────────── */

/* Legacy label classes kept for safety */
.msk-footer-hero__editor-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--msk-color-text-muted, #999); background: var(--msk-color-surface, #f5f5f5); padding: 2px 8px; border-radius: 3px; }
.msk-footer-hero__editor-headline { font-size: 14px; font-weight: 700; color: var(--msk-color-text-primary, #111); }

/* Full layout preview */
.msk-footer-hero--editor { display: block; }
.msk-footer-hero__editor-card { overflow: hidden; border-radius: var(--msk-radius-xl, 1.5rem); position: relative; }

.msk-footer-hero__editor-banner { position: relative; min-block-size: 160px; display: flex; align-items: flex-start; background-size: cover; background-position: center bottom; }
.msk-footer-hero__editor-banner-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; inline-size: 100%; padding: 2rem; position: relative; z-index: 2; }
.msk-footer-hero__editor-banner-headline { font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 700; color: #fff; margin: 0; line-height: 1.3; max-inline-size: 360px; }
.msk-footer-hero__editor-ctas { display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; }
.msk-footer-hero__editor-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; font-size: 0.8rem; font-weight: 600; border-radius: 0.375rem; text-decoration: none; }
.msk-footer-hero__editor-cta--ghost { color: #fff; border: 2px solid #fff; background: transparent; }
.msk-footer-hero__editor-cta--solid { color: #111; background: #fff; }

.msk-footer-hero__editor-bottom { position: relative; overflow: hidden; }
.msk-footer-hero__editor-bottom-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 1.5rem; padding: 2rem; }
.msk-footer-hero__editor-decor { position: absolute; top: 0; right: 0; width: 45%; height: 100%; pointer-events: none; opacity: 0.1; color: #fff; }
.msk-footer-hero__editor-brand { display: flex; flex-direction: column; gap: 0.75rem; }
.msk-footer-hero__editor-brand-name { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: 0.03em; }
.msk-footer-hero__editor-brand-logo { height: 28px; width: auto; }
.msk-footer-hero__editor-lang { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: rgba(246,246,246,0.8); border: 2px solid rgba(246,246,246,0.3); border-radius: 9999px; padding: 0.3rem 0.75rem; background: transparent; align-self: flex-start; cursor: default; }
.msk-footer-hero__editor-links { }
.msk-footer-hero__editor-col-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(246,246,246,0.92); margin: 0 0 0.75rem; }
.msk-footer-hero__editor-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.msk-footer-hero__editor-link-list li { font-size: 0.8rem; color: rgba(246,246,246,0.65); }

/* ── Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-footer-hero__cta,
    .msk-footer-hero__col-list a { transition: none; }
}

/* ── footer-mega ── */
/*
 * Maple Footer Mega — Styles
 */

/* Outer wrapper — accent background */
.msk-footer-mega { padding: var(--msk-space-4, 1rem); }
.msk-footer-mega--v2 { padding: 0; }

/* Card */
.msk-footer-mega__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; padding: var(--msk-space-8, 2rem); }

/* ── CTA Banner ─────────────────────────────────────────────────────── */

.msk-footer-mega__banner { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); display: grid; grid-template-columns: 1fr auto; gap: var(--msk-space-8, 2rem); align-items: center; overflow: hidden; color: #fff; margin-block-end: var(--msk-space-16, 4rem); }

.msk-footer-mega__banner-text { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-footer-mega__banner-headline { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; margin: 0; line-height: 1.15; }
.msk-footer-mega__banner-desc { font-size: var(--msk-font-size-sm, 0.875rem); opacity: 0.8; margin: 0; }

.msk-footer-mega__banner-ctas { display: flex; gap: var(--msk-space-4, 1rem); flex-wrap: wrap; margin-block-start: var(--msk-space-4, 1rem); }
.msk-footer-mega__banner-cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; border-radius: var(--msk-radius-full, 9999px); text-decoration: none; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-mega__banner-cta--primary { background: #fff; color: #111; }
.msk-footer-mega__banner-cta--primary:hover { transform: translateY(-1px); }
.msk-footer-mega__banner-cta--secondary { background: transparent; color: #fff; }
.msk-footer-mega__banner-cta--secondary:hover { text-decoration: underline; }

.msk-footer-mega__banner-image img { max-block-size: 280px; inline-size: auto; border-radius: var(--msk-radius-lg, 1rem); }

/* ── Link Columns + Subscribe ────────────────────────────────────────── */

.msk-footer-mega__links-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--msk-space-10, 2.5rem); padding-block: var(--msk-space-12, 3rem); }

.msk-footer-mega__col-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: var(--msk-color-text-primary, #111); margin: 0 0 var(--msk-space-5, 1.25rem); }

.msk-footer-mega__col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); }
.msk-footer-mega__col-list a { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #666); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-mega__col-list a:hover { color: var(--msk-color-text-primary, #111); }

/* Subscribe */
.msk-footer-mega__subscribe { min-inline-size: 0; }
.msk-footer-mega__sub-desc { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-primary, #111); margin: 0 0 var(--msk-space-4, 1rem); }
.msk-footer-mega__sub-form { display: flex; gap: 0; min-inline-size: 0; }
.msk-footer-mega__sub-input { flex: 1; min-inline-size: 0; padding: var(--msk-space-3, 0.75rem) var(--msk-space-5, 1.25rem); font-size: var(--msk-font-size-sm, 0.875rem); border: 1px solid var(--msk-color-border, #767676); border-inline-end: none; border-radius: var(--msk-radius-full, 9999px) 0 0 var(--msk-radius-full, 9999px); background: var(--msk-color-surface, #f0f0f8); outline: none; font-family: inherit; box-sizing: border-box; }
.msk-footer-mega__sub-input:focus { border-color: var(--msk-color-accent, #8a1622); }
.msk-footer-mega__sub-btn { flex-shrink: 0; padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #fff; background: var(--msk-color-accent, #8a1622); border: none; border-radius: 0 var(--msk-radius-full, 9999px) var(--msk-radius-full, 9999px) 0; cursor: pointer; font-family: inherit; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); white-space: nowrap; }
.msk-footer-mega__sub-btn:hover { opacity: 0.9; }
.msk-footer-mega__sub-privacy { font-size: var(--msk-font-size-xs, 0.75rem); color: var(--msk-color-text-muted, #999); margin: var(--msk-space-2, 0.5rem) 0 0; }

/* ── Bottom Bar ──────────────────────────────────────────────────────── */

.msk-footer-mega__bottom { border-block-start: 1px solid var(--msk-color-border, #e0e0e0); padding-block-start: var(--msk-space-8, 2rem); }

.msk-footer-mega__bottom-top { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--msk-space-6, 1.5rem); padding-block-end: var(--msk-space-6, 1.5rem); border-block-end: 1px solid var(--msk-color-border, #e0e0e0); }

.msk-footer-mega__logo { block-size: 32px; inline-size: auto; }

.msk-footer-mega__socials { display: flex; gap: var(--msk-space-4, 1rem); }
.msk-footer-mega__social { color: var(--msk-color-text-muted, #666); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-mega__social:hover { color: var(--msk-color-text-primary, #111); }

.msk-footer-mega__bottom-bar { display: flex; justify-content: space-between; align-items: center; }
.msk-footer-mega__legal { display: flex; gap: var(--msk-space-6, 1.5rem); }
.msk-footer-mega__legal a { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #666); text-decoration: none; }
.msk-footer-mega__legal a:hover { color: var(--msk-color-text-primary, #111); }
.msk-footer-mega__copyright { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #999); margin: 0; }

/* ── Brand name fallback ─────────────────────────────────────────────── */

.msk-footer-mega__brand-name { font-size: var(--msk-font-size-base, 1rem); font-weight: 700; color: var(--msk-color-text-primary, #111); margin: 0; }

/* ── Decorative SVG ──────────────────────────────────────────────────── */

.msk-footer-mega__card { position: relative; }
.msk-footer-mega__decor { position: absolute; top: 0; right: 0; width: 45%; height: 100%; pointer-events: none; opacity: 0.06; color: var(--msk-color-text-primary, #111); }

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-footer-mega__banner { grid-template-columns: 1fr; }
    .msk-footer-mega__banner-image { display: none; }
    .msk-footer-mega__bottom-top,
    .msk-footer-mega__bottom-bar { flex-direction: column; gap: var(--msk-space-4, 1rem); align-items: flex-start; }
}

/* ── Editor ──────────────────────────────────────────────────────────── */

.msk-footer-mega--editor { border: 1px dashed var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-md, 0.5rem); padding: var(--msk-space-6, 1.5rem); position: relative; overflow: hidden; }

/* Banner */
.msk-footer-mega__editor-banner { border-radius: var(--msk-radius-xl, 1.5rem); padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-block-end: 1.5rem; color: #fff; overflow: hidden; }
.msk-footer-mega__editor-banner-text { display: flex; flex-direction: column; gap: 0.5rem; }
.msk-footer-mega__editor-banner-headline { font-size: clamp(1.1rem, 3vw, 1.75rem); font-weight: 700; margin: 0; color: #fff; }
.msk-footer-mega__editor-banner-desc { font-size: 0.8rem; opacity: 0.8; margin: 0; }
.msk-footer-mega__editor-banner-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-block-start: 0.5rem; }
.msk-footer-mega__editor-cta { display: inline-block; padding: 0.4rem 1.1rem; font-size: 0.78rem; font-weight: 600; border-radius: 9999px; }
.msk-footer-mega__editor-cta--primary { background: #fff; color: #111; }
.msk-footer-mega__editor-cta--secondary { border: 1px solid rgba(255,255,255,0.6); color: #fff; }
.msk-footer-mega__editor-banner-image img { max-height: 140px; width: auto; border-radius: 8px; }
.msk-footer-mega__editor-banner-image-placeholder { width: 100px; height: 100px; background: rgba(255,255,255,0.15); border-radius: 8px; }

/* Link columns row */
.msk-footer-mega__editor-links-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: 1.25rem; border-block: 1px solid var(--msk-color-border, #e0e0e0); margin-block-end: 1.25rem; }
.msk-footer-mega__editor-col-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--msk-color-text-primary, #111); margin: 0 0 0.6rem; }
.msk-footer-mega__editor-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.msk-footer-mega__editor-link-list li { font-size: 0.78rem; color: var(--msk-color-text-muted, #666); }
.msk-footer-mega__editor-empty { font-size: 0.72rem; color: var(--msk-color-text-muted, #aaa); font-style: italic; margin: 0; }

/* Subscribe column */
.msk-footer-mega__editor-col--subscribe {}
.msk-footer-mega__editor-sub-desc { font-size: 0.75rem; color: var(--msk-color-text-muted, #666); margin: 0 0 0.5rem; }
.msk-footer-mega__editor-sub-form { display: flex; gap: 0; }
.msk-footer-mega__editor-sub-input { flex: 1; font-size: 0.72rem; padding: 0.35rem 0.6rem; border: 1px solid var(--msk-color-border, #767676); border-inline-end: none; border-radius: 9999px 0 0 9999px; background: var(--msk-color-surface, #f0f0f8); color: var(--msk-color-text-muted, #888); }
.msk-footer-mega__editor-sub-btn { font-size: 0.72rem; font-weight: 600; padding: 0.35rem 0.7rem; background: var(--msk-color-accent, #8a1622); color: #fff; border-radius: 0 9999px 9999px 0; white-space: nowrap; }
.msk-footer-mega__editor-sub-privacy { font-size: 0.68rem; color: var(--msk-color-text-muted, #aaa); margin: 0.3rem 0 0; }

/* Bottom bar */
.msk-footer-mega__editor-bottom { border-block-start: 1px solid var(--msk-color-border, #e0e0e0); padding-block-start: 0.75rem; }
.msk-footer-mega__editor-bottom-top { display: flex; justify-content: space-between; align-items: center; margin-block-end: 0.5rem; padding-block-end: 0.5rem; border-block-end: 1px solid var(--msk-color-border, #e0e0e0); }
.msk-footer-mega__editor-brand-name { font-size: 0.85rem; font-weight: 700; color: var(--msk-color-text-primary, #111); margin: 0; }
.msk-footer-mega__editor-socials { display: flex; gap: 0.5rem; }
.msk-footer-mega__editor-social-icon { font-size: 0.72rem; font-weight: 700; color: var(--msk-color-text-muted, #666); background: var(--msk-color-surface, #f0f0f0); padding: 2px 5px; border-radius: 3px; }
.msk-footer-mega__editor-bottom-bar { display: flex; justify-content: space-between; align-items: center; }
.msk-footer-mega__editor-legal { display: flex; gap: 0.75rem; }
.msk-footer-mega__editor-legal span { font-size: 0.72rem; color: var(--msk-color-text-muted, #666); }
.msk-footer-mega__editor-copyright { font-size: 0.72rem; color: var(--msk-color-text-muted, #999); margin: 0; }

/* ── Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-footer-mega__banner-cta,
    .msk-footer-mega__col-list a,
    .msk-footer-mega__social,
    .msk-footer-mega__sub-btn { transition: none; }
}

/* ── footer-section ── */
/*
 * Maple Footer Section — Styles
 */

/* Outer wrapper — accent background */
.msk-footer-section { padding: var(--msk-space-4, 1rem); }
.msk-footer-section--v2 { padding: 0; }

/* Dark rounded card */
.msk-footer-section__card { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); color: #f6f6f6; position: relative; overflow: hidden; }

/* ── Top Row ────────────────────────────────────────────────────────── */

.msk-footer-section__top { display: flex; justify-content: space-between; gap: var(--msk-space-10, 2.5rem); margin-block-end: var(--msk-space-16, 4rem); }

/* Brand */
.msk-footer-section__brand { display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); max-inline-size: 480px; }
.msk-footer-section__logo { block-size: 40px; inline-size: auto; }
.msk-footer-section__tagline { font-size: var(--msk-font-size-sm, 0.875rem); line-height: var(--msk-leading-normal, 1.6); margin: var(--msk-space-6, 1.5rem) 0 0; opacity: 0.65; }
.msk-footer-section__about { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); text-decoration: none; }
.msk-footer-section__about:hover { color: #f6f6f6; }

/* Nav */
.msk-footer-section__nav { display: flex; gap: var(--msk-space-8, 2rem); flex-wrap: wrap; align-items: flex-start; }
.msk-footer-section__nav-link { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); text-decoration: none; text-decoration-line: underline; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-section__nav-link:hover { text-decoration-color: currentColor; }

/* ── Bottom Row ─────────────────────────────────────────────────────── */

.msk-footer-section__bottom { display: grid; grid-template-columns: auto 1fr auto; gap: var(--msk-space-10, 2.5rem); align-items: end; }

/* Left — socials */
.msk-footer-section__socials { display: flex; flex-wrap: wrap; gap: var(--msk-space-2, 0.5rem); max-inline-size: 100px; }
.msk-footer-section__social { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: var(--msk-radius-full, 9999px); border: 1px solid rgba(246,246,246,0.25); color: #f6f6f6; text-decoration: none; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-footer-section__social:hover { background: rgba(246,246,246,0.1); }

/* Centre — copyright */
.msk-footer-section__copyright { font-size: var(--msk-font-size-xs, 0.75rem); opacity: 0.5; text-align: center; margin: 0; }

/* Right — contact, location, languages */
.msk-footer-section__bottom-right { display: flex; gap: var(--msk-space-10, 2.5rem); }

.msk-footer-section__section-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: #f6f6f6; margin: 0 0 var(--msk-space-2, 0.5rem); }

.msk-footer-section__contact p,
.msk-footer-section__location p { font-size: var(--msk-font-size-sm, 0.875rem); margin: 0 0 var(--msk-space-1, 0.25rem); opacity: 0.6; }
.msk-footer-section__contact a { color: inherit; text-decoration: none; }
.msk-footer-section__contact a:hover { color: #f6f6f6; }

/* Languages */
.msk-footer-section__lang-list { display: flex; gap: var(--msk-space-4, 1rem); }
.msk-footer-section__lang { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); text-decoration: none; }
.msk-footer-section__lang:hover { color: #f6f6f6; }

/* Brand name fallback (shown when no logo URL is set) */
.msk-footer-section__brand-name {
    font-size: var(--msk-font-size-xl, 1.25rem);
    font-weight: 700;
    color: #f6f6f6;
    margin: 0;
    letter-spacing: var(--msk-tracking-wide, 0.05em);
}

/* Decorative SVG */
.msk-footer-section__decor {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 45%;
    block-size: 100%;
    pointer-events: none;
    opacity: 0.06;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-footer-section__top { flex-direction: column; }
    .msk-footer-section__bottom { grid-template-columns: 1fr; }
    .msk-footer-section__bottom-right { flex-direction: column; gap: var(--msk-space-6, 1.5rem); }
    .msk-footer-section__socials { max-inline-size: none; flex-direction: row; }
}

/* ── Editor ─────────────────────────────────────────────────────────── */

.msk-footer-section--editor { border-radius: var(--msk-radius-md, 0.5rem); display: block; }

/* Editor card — mirrors the front-end card */
.msk-footer-section__editor-card { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); color: #f6f6f6; position: relative; overflow: hidden; }

/* Top preview row */
.msk-footer-section__editor-top { display: flex; justify-content: space-between; gap: var(--msk-space-10, 2.5rem); margin-block-end: var(--msk-space-10, 2.5rem); }

/* Brand column */
.msk-footer-section__editor-brand { display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); max-inline-size: 360px; }
.msk-footer-section__editor-brand-name { font-size: var(--msk-font-size-xl, 1.25rem); font-weight: 700; color: #f6f6f6; margin: 0; letter-spacing: var(--msk-tracking-wide, 0.05em); }
.msk-footer-section__editor-tagline { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.6); margin: var(--msk-space-4, 1rem) 0 0; line-height: var(--msk-leading-normal, 1.6); }
.msk-footer-section__editor-about { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.65); }

/* Nav preview */
.msk-footer-section__editor-nav { display: flex; gap: var(--msk-space-6, 1.5rem); flex-wrap: wrap; align-items: flex-start; }
.msk-footer-section__editor-nav-link { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.8); }

/* Bottom preview row */
.msk-footer-section__editor-bottom { display: grid; grid-template-columns: auto 1fr auto; gap: var(--msk-space-10, 2.5rem); align-items: end; }

/* Socials preview */
.msk-footer-section__editor-socials { display: flex; flex-wrap: wrap; gap: var(--msk-space-2, 0.5rem); max-inline-size: 100px; }
.msk-footer-section__editor-social { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border-radius: var(--msk-radius-full, 9999px); border: 1px solid rgba(246,246,246,0.25); color: #f6f6f6; font-size: 11px; font-weight: 700; }

/* Copyright preview */
.msk-footer-section__editor-copyright { font-size: var(--msk-font-size-xs, 0.75rem); opacity: 0.5; text-align: center; margin: 0; }

/* Right section preview */
.msk-footer-section__editor-right { display: flex; gap: var(--msk-space-8, 2rem); flex-wrap: wrap; }
.msk-footer-section__editor-section-title { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; color: #f6f6f6; margin: 0 0 var(--msk-space-1, 0.25rem); }
.msk-footer-section__editor-contact-line,
.msk-footer-section__editor-address-line { font-size: var(--msk-font-size-xs, 0.75rem); color: rgba(246,246,246,0.6); margin: 0 0 2px; }
.msk-footer-section__editor-lang-list { display: flex; gap: var(--msk-space-3, 0.75rem); }
.msk-footer-section__editor-lang { font-size: var(--msk-font-size-xs, 0.75rem); color: rgba(246,246,246,0.65); }

/* ── Reduced Motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-footer-section__nav-link,
    .msk-footer-section__social { transition: none; }
}

/* ── hero-section ── */
/*
 * Maple Hero Section — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * 17 style presets sharing common CSS. Each style adds its own layout rules.
 * Styles: centred, split, overlap, video, gradient, minimal, card, magazine,
 * parallax, animated, float, saas, features, showcase, startup, dark, photo.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   SHARED BASE
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section-wrap { padding: var(--msk-space-4, 1rem); }
.msk-hero-section { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: var(--msk-radius-xl, 1.5rem); }
.msk-hero-section--v2 { padding: 0; }

/* Background layers */
.msk-hero-section__bg-image, .msk-hero-section__bg-parallax, .msk-hero-section__bg-gradient { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.msk-hero-section__bg-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.msk-hero-section__overlay { position: absolute; inset: 0; background: #000; pointer-events: none; }

/* Decorative SVG */
.msk-hero-section__decor { position: absolute; top: 0; right: 0; width: 55%; height: 100%; pointer-events: none; opacity: 0.1; color: #fff; z-index: 1; }

/* Content */
.msk-hero-section__content, .msk-hero-section__magazine-content, .msk-hero-section__card-wrapper { position: relative; z-index: 2; inline-size: 100%; max-inline-size: 900px; padding: var(--msk-space-8, 2rem); }

/* Typography */
.msk-hero-section__badge { display: inline-block; padding: var(--msk-space-1, 0.25rem) var(--msk-space-4, 1rem); font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: var(--msk-tracking-wider, 0.1em); border-radius: var(--msk-radius-full, 9999px); background: var(--msk-color-accent, #e94560); color: #fff; margin-block-end: var(--msk-space-4, 1rem); }

.msk-hero-section__subtitle { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: var(--msk-tracking-widest, 0.15em); color: rgba(255,255,255,0.85); margin: 0 0 var(--msk-space-3, 0.75rem); }

.msk-hero-section__headline { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; color: #fff; margin: 0 0 var(--msk-space-5, 1.25rem); text-wrap: balance; }

.msk-hero-section__description { font-size: var(--msk-font-size-base, 1rem); color: rgba(246,246,246,0.92); line-height: var(--msk-leading-normal, 1.6); max-inline-size: 600px; margin-block-end: var(--msk-space-6, 1.5rem); }
.msk-hero-section__description p { margin: 0 0 var(--msk-space-2, 0.5rem); }

/* CTAs */
.msk-hero-section__ctas { display: flex; gap: var(--msk-space-4, 1rem); flex-wrap: wrap; }
.msk-hero-section__cta { display: inline-flex; align-items: center; padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; text-transform: uppercase; letter-spacing: var(--msk-tracking-wider, 0.1em); text-decoration: none; border-radius: var(--msk-radius-md, 0.5rem); transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-hero-section__cta--primary { background: #fff; color: #111; }
.msk-hero-section__cta--primary:hover { transform: translateY(-2px); }
.msk-hero-section__cta--secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.4); }
.msk-hero-section__cta--secondary:hover { border-color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: CENTRED (default)
   ══════════════════════════════════════════════════════════════════════════════ */
/* Uses base layout — centred content over bg image. No extra rules needed. */

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: SPLIT
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--split .msk-hero-section__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-10, 2.5rem); align-items: center; inline-size: 100%; max-inline-size: 1200px; padding: var(--msk-space-12, 3rem) var(--msk-space-8, 2rem); position: relative; z-index: 2; }
.msk-hero-section--split .msk-hero-section__split-text { display: flex; flex-direction: column; }
.msk-hero-section--split .msk-hero-section__headline { color: var(--msk-color-text-primary, #111); }
.msk-hero-section--split .msk-hero-section__subtitle { color: var(--msk-color-text-muted, #666); }
.msk-hero-section--split .msk-hero-section__description { color: var(--msk-color-text-primary, #111); }
.msk-hero-section--split .msk-hero-section__cta--primary { background: var(--msk-color-text-primary, #111); color: #fff; }
.msk-hero-section--split .msk-hero-section__cta--secondary { color: var(--msk-color-text-primary, #111); border-color: var(--msk-color-border, #e0e0e0); }
.msk-hero-section--split .msk-hero-section__split-image img { max-inline-size: 100%; block-size: auto; border-radius: var(--msk-radius-lg, 1rem); }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: OVERLAP
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--overlap .msk-hero-section__split { display: grid; grid-template-columns: 55% 1fr; align-items: center; inline-size: 100%; max-inline-size: 1200px; padding: var(--msk-space-12, 3rem) var(--msk-space-8, 2rem); position: relative; z-index: 2; }
.msk-hero-section--overlap .msk-hero-section__split-text { position: relative; z-index: 2; }
.msk-hero-section--overlap .msk-hero-section__split-image { margin-inline-start: -10%; }
.msk-hero-section--overlap .msk-hero-section__split-image img { max-inline-size: 100%; border-radius: var(--msk-radius-lg, 1rem); box-shadow: var(--msk-shadow-lg, 0 10px 30px rgba(0,0,0,0.12)); }
.msk-hero-section--overlap .msk-hero-section__headline { color: var(--msk-color-text-primary, #111); }
.msk-hero-section--overlap .msk-hero-section__subtitle { color: var(--msk-color-text-muted, #666); }
.msk-hero-section--overlap .msk-hero-section__description { color: var(--msk-color-text-primary, #111); }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: VIDEO — same as centred but bg is <video>
   ══════════════════════════════════════════════════════════════════════════════ */
/* Uses base centred layout. Video element styled by shared .bg-video rules. */

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: GRADIENT
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--gradient .msk-hero-section__portrait { margin-block-start: var(--msk-space-8, 2rem); }
.msk-hero-section--gradient .msk-hero-section__portrait img { max-block-size: 50vh; inline-size: auto; mix-blend-mode: luminosity; opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: MINIMAL — no background, just typography
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--minimal { background: var(--msk-color-surface, #fff); }
.msk-hero-section--minimal .msk-hero-section__headline { font-size: clamp(2.5rem, 7vw, 6rem); color: var(--msk-color-text-primary, #111); }
.msk-hero-section--minimal .msk-hero-section__subtitle { color: var(--msk-color-text-muted, #666); }
.msk-hero-section--minimal .msk-hero-section__description { color: var(--msk-color-text-muted, #666); }
.msk-hero-section--minimal .msk-hero-section__cta--primary { background: var(--msk-color-text-primary, #111); color: #fff; }
.msk-hero-section--minimal .msk-hero-section__cta--secondary { color: var(--msk-color-text-primary, #111); border-color: var(--msk-color-border, #e0e0e0); }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: CARD — floating card over background
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--card .msk-hero-section__card-wrapper { display: flex; justify-content: center; }
.msk-hero-section--card .msk-hero-section__card-inner { background: var(--msk-color-surface, #fff); color: var(--msk-color-text-primary, #111); padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); border-radius: var(--msk-radius-xl, 1.5rem); box-shadow: var(--msk-shadow-lg, 0 10px 30px rgba(0,0,0,0.12)); max-inline-size: 640px; }
.msk-hero-section--card .msk-hero-section__headline { color: var(--msk-color-text-primary, #111); }
.msk-hero-section--card .msk-hero-section__subtitle { color: var(--msk-color-text-muted, #666); }
.msk-hero-section--card .msk-hero-section__description { color: var(--msk-color-text-muted, #666); }
.msk-hero-section--card .msk-hero-section__cta--primary { background: var(--msk-color-text-primary, #111); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: MAGAZINE — content at bottom over image
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--magazine { align-items: flex-end; }
.msk-hero-section--magazine .msk-hero-section__magazine-content { padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); max-inline-size: 700px; }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: PARALLAX — background-attachment: fixed handled inline
   ══════════════════════════════════════════════════════════════════════════════ */
/* Uses base centred layout. Parallax bg set inline via render.php. */

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: ANIMATED — uses MSK animation classes
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--animated .msk-hero-section__badge { animation: msk-fade-up var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out) 100ms both; }
.msk-hero-section--animated .msk-hero-section__subtitle { animation: msk-fade-up var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out) 200ms both; }
.msk-hero-section--animated .msk-hero-section__headline { animation: msk-fade-up var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out) 350ms both; }
.msk-hero-section--animated .msk-hero-section__description { animation: msk-fade-up var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out) 500ms both; }
.msk-hero-section--animated .msk-hero-section__ctas { animation: msk-fade-up var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out) 650ms both; }

@keyframes msk-hero-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: PHOTO — full bg photo, bottom-left text, floating widget card right
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--photo { align-items: flex-end; }
.msk-hero-section--photo .msk-hero-section__photo { display: grid; grid-template-columns: 1fr auto; gap: var(--msk-space-8, 2rem); align-items: end; inline-size: 100%; max-inline-size: 1400px; padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); position: relative; z-index: 2; }
.msk-hero-section--photo .msk-hero-section__photo-text { display: flex; flex-direction: column; max-inline-size: 600px; }
.msk-hero-section--photo .msk-hero-section__headline { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.05; }
.msk-hero-section--photo .msk-hero-section__description { color: rgba(255,255,255,0.75); }
.msk-hero-section--photo .msk-hero-section__cta--primary { background: #8a1622; color: #fff; border-radius: var(--msk-radius-full, 9999px); font-weight: 700; }
.msk-hero-section--photo .msk-hero-section__cta--primary:hover { background: #6e111b; }
.msk-hero-section--photo .msk-hero-section__cta--secondary { color: #fff; border-color: rgba(255,255,255,0.65); border-radius: var(--msk-radius-full, 9999px); }
.msk-hero-section--photo .msk-hero-section__photo-widget { max-inline-size: 280px; }
.msk-hero-section--photo .msk-hero-section__photo-widget img { max-inline-size: 100%; block-size: auto; border-radius: var(--msk-radius-xl, 1.5rem); box-shadow: var(--msk-shadow-lg, 0 10px 30px rgba(0,0,0,0.2)); }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: DARK — dark bg, centred content, stat cards at bottom
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--dark { background: #0a0a0a; }
.msk-hero-section--dark .msk-hero-section__dark { position: relative; z-index: 2; inline-size: 100%; max-inline-size: 1200px; display: flex; flex-direction: column; align-items: center; padding: var(--msk-space-16, 4rem) var(--msk-space-8, 2rem); text-align: center; }
.msk-hero-section--dark .msk-hero-section__dark-content { display: flex; flex-direction: column; align-items: center; max-inline-size: 800px; }
.msk-hero-section--dark .msk-hero-section__headline { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; color: #fff; text-align: center; }
.msk-hero-section--dark .msk-hero-section__description { color: rgba(255,255,255,0.65); text-align: center; max-inline-size: 500px; }
.msk-hero-section--dark .msk-hero-section__badge { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.msk-hero-section--dark .msk-hero-section__cta--primary { background: #fff; color: #111; border-radius: var(--msk-radius-full, 9999px); }
.msk-hero-section--dark .msk-hero-section__cta--secondary { color: #fff; border-color: rgba(255,255,255,0.3); border-radius: var(--msk-radius-full, 9999px); }

/* Stat cards row */
.msk-hero-section__dark-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--msk-space-4, 1rem); inline-size: 100%; margin-block-start: auto; padding-block-start: var(--msk-space-10, 2.5rem); }
.msk-hero-section__dark-stat-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-8, 2rem); display: flex; flex-direction: column; align-items: center; gap: var(--msk-space-2, 0.5rem); }
.msk-hero-section__dark-stat-value { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.2; }
.msk-hero-section__dark-stat-label { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: var(--msk-tracking-wider, 0.1em); }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: STARTUP — gradient bg, text left, product mockup right
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--startup { overflow: visible; }
.msk-hero-section--startup .msk-hero-section__bg-gradient { border-radius: var(--msk-radius-xl, 1.5rem); }
.msk-hero-section--startup .msk-hero-section__startup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-8, 2rem); align-items: center; inline-size: 100%; max-inline-size: 1200px; padding: var(--msk-space-16, 4rem) var(--msk-space-8, 2rem); position: relative; z-index: 2; }
.msk-hero-section--startup .msk-hero-section__startup-text { display: flex; flex-direction: column; }
.msk-hero-section--startup .msk-hero-section__headline { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; color: var(--msk-color-text-primary, #111); line-height: 1.1; }
.msk-hero-section--startup .msk-hero-section__description { color: var(--msk-color-text-muted, #555); font-size: var(--msk-font-size-base, 1rem); max-inline-size: 440px; }
.msk-hero-section--startup .msk-hero-section__cta--primary { background: var(--msk-color-text-primary, #111); color: #fff; border-radius: var(--msk-radius-md, 0.5rem); }
.msk-hero-section--startup .msk-hero-section__cta--secondary { color: var(--msk-color-text-primary, #111); border-color: var(--msk-color-text-primary, #111); }
.msk-hero-section--startup .msk-hero-section__trust { font-size: var(--msk-font-size-xs, 0.75rem); color: var(--msk-color-text-muted, #666); margin: var(--msk-space-3, 0.75rem) 0 0; }
.msk-hero-section--startup .msk-hero-section__startup-image { position: relative; display: flex; justify-content: center; }
.msk-hero-section--startup .msk-hero-section__startup-image img { max-inline-size: 100%; block-size: auto; }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: SHOWCASE — centred two-tone headline in rounded panel + floating image
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--showcase { background: var(--msk-color-surface, #fff); padding: var(--msk-space-6, 1.5rem); }
.msk-hero-section--showcase .msk-hero-section__showcase { position: relative; z-index: 2; inline-size: 100%; }
.msk-hero-section--showcase .msk-hero-section__showcase-panel { background: #e8e8e8; border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-16, 4rem) var(--msk-space-8, 2rem) 0; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; min-block-size: 100%; }
.msk-hero-section--showcase .msk-hero-section__showcase-content { display: flex; flex-direction: column; align-items: center; max-inline-size: 800px; }
.msk-hero-section--showcase .msk-hero-section__headline { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; color: rgba(0,0,0,0.25); line-height: 1.1; text-align: center; }
.msk-hero-section--showcase .msk-hero-section__highlight { color: var(--msk-color-text-primary, #111); font-weight: 800; }
.msk-hero-section--showcase .msk-hero-section__subtitle { color: var(--msk-color-text-muted, #888); text-transform: none; letter-spacing: 0; font-weight: 400; }
.msk-hero-section--showcase .msk-hero-section__description { color: var(--msk-color-text-muted, #666); }
.msk-hero-section--showcase .msk-hero-section__badge { background: var(--msk-color-text-primary, #111); }
.msk-hero-section--showcase .msk-hero-section__cta--primary { background: var(--msk-color-text-primary, #111); color: #fff; border-radius: var(--msk-radius-full, 9999px); padding: var(--msk-space-4, 1rem) var(--msk-space-8, 2rem); }
.msk-hero-section--showcase .msk-hero-section__cta-arrow { margin-inline-start: var(--msk-space-4, 1rem); font-size: 1.25em; display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--msk-radius-full, 9999px); border: 1px solid rgba(255,255,255,0.3); }
.msk-hero-section--showcase .msk-hero-section__showcase-image { margin-block-start: var(--msk-space-8, 2rem); max-inline-size: 65%; }
.msk-hero-section--showcase .msk-hero-section__showcase-image img { max-inline-size: 100%; block-size: auto; }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: FEATURES — product image left + numbered feature list right
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--features { background: var(--msk-color-surface, #fff); align-items: stretch; }
.msk-hero-section--features .msk-hero-section__features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-12, 3rem); inline-size: 100%; max-inline-size: 1400px; padding: var(--msk-space-12, 3rem) var(--msk-space-8, 2rem); position: relative; z-index: 2; }
.msk-hero-section--features .msk-hero-section__features-left { display: flex; flex-direction: column; gap: var(--msk-space-6, 1.5rem); }
.msk-hero-section--features .msk-hero-section__features-image img { max-inline-size: 100%; block-size: auto; border-radius: var(--msk-radius-lg, 1rem); }
.msk-hero-section--features .msk-hero-section__cta--primary { background: var(--msk-color-surface, #fff); color: var(--msk-color-text-primary, #111); border: 1px solid var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-full, 9999px); padding: var(--msk-space-4, 1rem) var(--msk-space-8, 2rem); align-self: flex-start; }
.msk-hero-section--features .msk-hero-section__cta-arrow { margin-inline-start: var(--msk-space-4, 1rem); font-size: 1.25em; }
.msk-hero-section--features .msk-hero-section__features-right { display: flex; flex-direction: column; }

/* Feature list items */
.msk-hero-section__feature-list { display: flex; flex-direction: column; }
.msk-hero-section__feature-item { display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--msk-space-4, 1rem) var(--msk-space-6, 1.5rem); align-items: baseline; padding: var(--msk-space-6, 1.5rem) 0; border-block-end: 1px solid var(--msk-color-border, #e0e0e0); }
.msk-hero-section__feature-item:first-child { border-block-start: 1px solid var(--msk-color-border, #e0e0e0); }
.msk-hero-section__feature-num { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #999); border: 1px solid var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-full, 9999px); padding: var(--msk-space-1, 0.25rem) var(--msk-space-3, 0.75rem); line-height: 1.4; }
.msk-hero-section__feature-title { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; color: var(--msk-color-text-primary, #111); margin: 0; }
.msk-hero-section__feature-desc { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #666); line-height: var(--msk-leading-normal, 1.6); margin: 0; }

/* Features bottom row */
.msk-hero-section--features .msk-hero-section__features-bottom { display: grid; grid-template-columns: 1fr auto; gap: var(--msk-space-6, 1.5rem); align-items: end; margin-block-start: auto; padding-block-start: var(--msk-space-8, 2rem); }
.msk-hero-section--features .msk-hero-section__description { color: var(--msk-color-text-primary, #111); font-size: clamp(1rem, 2vw, 1.25rem); line-height: var(--msk-leading-normal, 1.6); max-inline-size: none; }

/* Accent stat card */
.msk-hero-section__features-stat-card { background: var(--msk-color-accent, #4ade80); color: #fff; border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-8, 2rem) var(--msk-space-10, 2.5rem); display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); min-inline-size: 180px; }
.msk-hero-section__features-stat-value { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1; }
.msk-hero-section__features-stat-label { font-size: var(--msk-font-size-sm, 0.875rem); opacity: 0.9; line-height: var(--msk-leading-normal, 1.6); }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: SAAS — text left with stats/rating + product image right
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--saas { background: var(--msk-color-surface, #fff); }
.msk-hero-section--saas .msk-hero-section__saas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-10, 2.5rem); align-items: center; inline-size: 100%; max-inline-size: 1200px; padding: var(--msk-space-16, 4rem) var(--msk-space-8, 2rem); position: relative; z-index: 2; }
.msk-hero-section--saas .msk-hero-section__saas-text { display: flex; flex-direction: column; }
.msk-hero-section--saas .msk-hero-section__headline { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; color: var(--msk-color-text-primary, #111); line-height: 1.15; }
.msk-hero-section--saas .msk-hero-section__subtitle { color: var(--msk-color-text-muted, #666); text-transform: none; letter-spacing: 0; font-weight: 400; }
.msk-hero-section--saas .msk-hero-section__description { color: var(--msk-color-text-muted, #555); font-size: var(--msk-font-size-lg, 1.125rem); max-inline-size: 480px; }
.msk-hero-section--saas .msk-hero-section__cta--primary { background: var(--msk-color-accent, #4ade80); color: var(--msk-color-text-primary, #111); font-weight: 700; border-radius: var(--msk-radius-md, 0.5rem); }
.msk-hero-section--saas .msk-hero-section__cta--secondary { color: var(--msk-color-text-primary, #111); border-color: var(--msk-color-border, #e0e0e0); }
.msk-hero-section--saas .msk-hero-section__saas-image img { max-inline-size: 100%; block-size: auto; }

/* Highlight word underline */
.msk-hero-section__highlight { position: relative; }
.msk-hero-section__highlight::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: -4px; inline-size: 100%; block-size: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpath d='M2 8 Q25 2 50 8 Q75 14 98 6' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom / 100px 12px; }

/* Stats row */
.msk-hero-section__stats { display: flex; gap: var(--msk-space-8, 2rem); padding-block-start: var(--msk-space-8, 2rem); margin-block-start: var(--msk-space-6, 1.5rem); border-block-start: 1px solid var(--msk-color-border, #e0e0e0); }
.msk-hero-section__stat { display: flex; flex-direction: column; gap: var(--msk-space-1, 0.25rem); }
.msk-hero-section__stat-value { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: var(--msk-color-text-primary, #111); line-height: 1.2; }
.msk-hero-section__stat-label { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #666); }

/* Star rating */
.msk-hero-section__rating { display: flex; align-items: center; gap: var(--msk-space-2, 0.5rem); margin-block-start: var(--msk-space-6, 1.5rem); padding-block-start: var(--msk-space-6, 1.5rem); border-block-start: 1px solid var(--msk-color-border, #e0e0e0); }
.msk-hero-section__stars { display: flex; gap: 2px; font-size: 1.5rem; line-height: 1; }
.msk-hero-section__star--full { color: var(--msk-color-text-primary, #111); }
.msk-hero-section__star--half { color: var(--msk-color-text-primary, #111); opacity: 0.5; }
.msk-hero-section__star--empty { color: var(--msk-color-border, #ccc); }
.msk-hero-section__rating-number { font-size: var(--msk-font-size-lg, 1.125rem); font-weight: 700; color: var(--msk-color-text-primary, #111); }
.msk-hero-section__rating-label { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #666); }

/* ══════════════════════════════════════════════════════════════════════════════
   STYLE: FLOAT — bottom-left text + large floating product image
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-hero-section--float { background: var(--msk-color-surface, #f5f5f5); align-items: flex-end; }
.msk-hero-section--float .msk-hero-section__float { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; max-inline-size: 1400px; padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); position: relative; z-index: 2; align-items: end; }
.msk-hero-section--float .msk-hero-section__float-text { display: flex; flex-direction: column; align-self: end; padding-block-end: var(--msk-space-8, 2rem); }
.msk-hero-section--float .msk-hero-section__headline { font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; line-height: 0.95; color: var(--msk-color-text-primary, #111); margin: 0; letter-spacing: -0.03em; }
.msk-hero-section--float .msk-hero-section__subtitle { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--msk-color-text-muted, #666); line-height: var(--msk-leading-normal, 1.6); margin: 0 0 var(--msk-space-6, 1.5rem); }
.msk-hero-section--float .msk-hero-section__badge { background: var(--msk-color-text-primary, #111); margin-block-end: var(--msk-space-6, 1.5rem); }
.msk-hero-section--float .msk-hero-section__description { color: var(--msk-color-text-muted, #666); }
.msk-hero-section--float .msk-hero-section__cta--primary { background: var(--msk-color-text-primary, #111); color: #fff; }
.msk-hero-section--float .msk-hero-section__cta--secondary { color: var(--msk-color-text-primary, #111); border-color: var(--msk-color-border, #e0e0e0); }
.msk-hero-section--float .msk-hero-section__float-image { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.msk-hero-section--float .msk-hero-section__float-image img { max-inline-size: 100%; max-block-size: 85vh; block-size: auto; inline-size: auto; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .msk-hero-section--split .msk-hero-section__split,
    .msk-hero-section--overlap .msk-hero-section__split { grid-template-columns: 1fr; }
    .msk-hero-section--overlap .msk-hero-section__split-image { margin-inline-start: 0; }
    .msk-hero-section__headline { font-size: clamp(1.5rem, 7vw, 2.5rem); }
    .msk-hero-section--minimal .msk-hero-section__headline { font-size: clamp(2rem, 8vw, 3.5rem); }
    .msk-hero-section--photo .msk-hero-section__photo { grid-template-columns: 1fr; }
    .msk-hero-section--photo .msk-hero-section__photo-widget { display: none; }
    .msk-hero-section__dark-stats { grid-template-columns: 1fr; }
    .msk-hero-section--startup .msk-hero-section__startup { grid-template-columns: 1fr; }
    .msk-hero-section--startup .msk-hero-section__startup-image { order: -1; }
    .msk-hero-section--showcase .msk-hero-section__showcase-image { max-inline-size: 90%; }
    .msk-hero-section--showcase .msk-hero-section__headline { font-size: clamp(2rem, 8vw, 3rem); }
    .msk-hero-section--features .msk-hero-section__features { grid-template-columns: 1fr; }
    .msk-hero-section__feature-item { grid-template-columns: auto 1fr; }
    .msk-hero-section__feature-desc { grid-column: 1 / -1; }
    .msk-hero-section--features .msk-hero-section__features-bottom { grid-template-columns: 1fr; }
    .msk-hero-section--saas .msk-hero-section__saas { grid-template-columns: 1fr; }
    .msk-hero-section--saas .msk-hero-section__saas-image { order: -1; }
    .msk-hero-section--float .msk-hero-section__float { grid-template-columns: 1fr; }
    .msk-hero-section--float .msk-hero-section__float-image { order: -1; }
    .msk-hero-section--float .msk-hero-section__float-image img { max-block-size: 50vh; }
    .msk-hero-section--float .msk-hero-section__headline { font-size: clamp(2.5rem, 10vw, 4rem); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

/* Base wrapper */
.msk-hero-section--editor { border: 1px dashed var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-md, 0.5rem); min-height: 240px; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.msk-hero-section__editor-overlay { position: absolute; inset: 0; background: #000; border-radius: inherit; pointer-events: none; }
.msk-hero-section__editor-decor { position: absolute; top: 0; right: 0; width: 55%; height: 100%; pointer-events: none; opacity: 0.13; }

/* Style chip */
.msk-hero-section__editor-style-chip { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: rgba(0,0,0,0.5); padding: 1px 8px; border-radius: 3px; align-self: center; }

/* Badge */
.msk-hero-section__editor-badge { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: var(--msk-color-accent, #e94560); padding: 1px 10px; border-radius: 9999px; align-self: flex-start; }

/* Default centred content (dark text on light, white text on bg-image) */
.msk-hero-section__editor-content { position: relative; z-index: 1; padding: var(--msk-space-6, 1.5rem); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.msk-hero-section__editor-content--light { align-items: flex-start; text-align: left; }
.msk-hero-section__editor-subtitle { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.7); }
.msk-hero-section__editor-subtitle--dark { color: var(--msk-color-text-muted, #666); }
.msk-hero-section__editor-headline { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.4); line-height: 1.15; }
.msk-hero-section__editor-headline--dark { color: var(--msk-color-text-primary, #111); text-shadow: none; }
.msk-hero-section__editor-headline--xl { font-size: clamp(1.75rem, 5vw, 3rem); }
.msk-hero-section__editor-desc { font-size: 11px; color: rgba(255,255,255,0.75); line-height: 1.5; max-width: 480px; }
.msk-hero-section__editor-desc--dark { color: var(--msk-color-text-muted, #666); }
.msk-hero-section__editor-ctas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.msk-hero-section__editor-cta { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 14px; border-radius: 4px; }
.msk-hero-section__editor-cta--primary { background: #fff; color: #111; }
.msk-hero-section__editor-cta--secondary { color: #fff; border: 1px solid rgba(255,255,255,0.4); }

/* Split / Overlap layout */
.msk-hero-section__editor-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; width: 100%; padding: 1.5rem; position: relative; z-index: 1; }
.msk-hero-section__editor-split-text { display: flex; flex-direction: column; gap: 6px; }
.msk-hero-section__editor-split-img { min-height: 140px; background: var(--msk-color-surface, #e8e8e8); border-radius: 0.75rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.msk-hero-section__editor-img-placeholder { font-size: 2rem; color: var(--msk-color-text-muted, #bbb); }

/* Card layout */
.msk-hero-section__editor-card-wrapper { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; padding: 1.5rem; }
.msk-hero-section__editor-card-inner { background: #fff; border-radius: 1rem; padding: 1.5rem 2rem; max-width: 480px; width: 100%; box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 6px; }

/* Magazine layout */
.msk-hero-section__editor-magazine { position: relative; z-index: 1; align-self: flex-end; padding: 1.5rem; display: flex; flex-direction: column; gap: 6px; max-width: 500px; }

/* Photo layout */
.msk-hero-section__editor-photo { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; width: 100%; padding: 1.5rem; align-self: flex-end; }
.msk-hero-section__editor-photo-text { display: flex; flex-direction: column; gap: 6px; }
.msk-hero-section__editor-photo-widget { width: 120px; border-radius: 0.75rem; overflow: hidden; }

/* Dark layout */
.msk-hero-section__editor-dark { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; padding: 1.5rem; text-align: center; }
.msk-hero-section__editor-dark-content { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.msk-hero-section__editor-dark-stats { display: flex; gap: 0.5rem; width: 100%; }

/* Startup layout */
.msk-hero-section__editor-startup { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; width: 100%; padding: 1.5rem; }
.msk-hero-section__editor-startup-text { display: flex; flex-direction: column; gap: 6px; }
.msk-hero-section__editor-startup-img { overflow: hidden; border-radius: 0.5rem; }
.msk-hero-section__editor-trust { font-size: 9px; color: rgba(255,255,255,0.55); margin-top: 4px; }

/* SaaS layout */
.msk-hero-section__editor-saas { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; width: 100%; padding: 1.5rem; }
.msk-hero-section__editor-saas-text { display: flex; flex-direction: column; gap: 6px; }
.msk-hero-section__editor-saas-img { overflow: hidden; border-radius: 0.5rem; }
.msk-hero-section__editor-stats { display: flex; gap: 1rem; margin-top: 6px; }

/* Stat card */
.msk-hero-section__editor-stat-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 0.75rem; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.msk-hero-section__editor-stat-card--accent { background: var(--msk-color-accent, #4ade80); border-color: transparent; }
.msk-hero-section__editor-stat-value { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2; }
.msk-hero-section__editor-stat-label { font-size: 9px; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.5px; }

/* Features layout */
.msk-hero-section__editor-features { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; width: 100%; padding: 1.5rem; }
.msk-hero-section__editor-features-left { display: flex; flex-direction: column; }
.msk-hero-section__editor-features-right { display: flex; flex-direction: column; gap: 6px; }
.msk-hero-section__editor-feature-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--msk-color-border, #e0e0e0); }
.msk-hero-section__editor-feature-num { font-size: 9px; font-weight: 700; color: var(--msk-color-text-muted, #999); border: 1px solid var(--msk-color-border, #ddd); border-radius: 9999px; padding: 1px 6px; flex-shrink: 0; }
.msk-hero-section__editor-feature-title { font-size: 12px; font-weight: 700; color: var(--msk-color-text-primary, #111); display: block; }
.msk-hero-section__editor-feature-desc { font-size: 10px; color: var(--msk-color-text-muted, #666); display: block; }

/* Showcase layout */
.msk-hero-section__editor-showcase { position: relative; z-index: 1; width: 100%; padding: 1rem; }
.msk-hero-section__editor-showcase-panel { background: #e8e8e8; border-radius: 1rem; padding: 1.5rem; display: flex; gap: 1rem; align-items: center; overflow: hidden; }
.msk-hero-section__editor-showcase-content { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.msk-hero-section__editor-showcase-img { width: 120px; flex-shrink: 0; border-radius: 0.5rem; overflow: hidden; }

/* Float layout */
.msk-hero-section__editor-float { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; width: 100%; padding: 1.5rem; align-self: flex-end; }
.msk-hero-section__editor-float-text { display: flex; flex-direction: column; gap: 6px; }
.msk-hero-section__editor-float-img { display: flex; align-items: flex-end; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-hero-section--animated .msk-hero-section__badge,
    .msk-hero-section--animated .msk-hero-section__subtitle,
    .msk-hero-section--animated .msk-hero-section__headline,
    .msk-hero-section--animated .msk-hero-section__description,
    .msk-hero-section--animated .msk-hero-section__ctas { animation: none; }
    .msk-hero-section__cta { transition: none; }
    .msk-hero-section__bg-video { display: none; }
}

/* ── hero-slider ── */
/*
 * Maple Hero Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Full-viewport hero slider with background images, responsive headlines,
 * slide counter, titled prev/next navigation, and CTA button.
 *
 * Crossfade transitions. Respects prefers-reduced-motion.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Container ────────────────────────────────────────────────────────────── */

.msk-hero-slider {
    position: relative;
    inline-size: 100%;
    block-size: 100vh;
    block-size: 100svh;
    overflow: hidden;
    background: #111;
}

/* ── Individual Slides ────────────────────────────────────────────────────── */

.msk-hero-slider__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;
    transition:
        opacity    var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out),
        visibility var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.msk-hero-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ── Dark Gradient Overlay ────────────────────────────────────────────────── */

.msk-hero-slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(0, 0, 0, 0.4) 60%,
        rgba(0, 0, 0, 0.75) 100%
    );
    pointer-events: none;
}

/* ── Slide Content ────────────────────────────────────────────────────────── */

.msk-hero-slider__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--msk-space-6, 1.5rem) var(--msk-space-20, 5rem);
    inline-size: 100%;
    max-inline-size: 1200px;
}

/* ── Slide Counter (01 | 02 | 03) ─────────────────────────────────────────── */

.msk-hero-slider__counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--msk-space-2, 0.5rem);
    margin-block-end: var(--msk-space-4, 1rem);
}

.msk-hero-slider__counter-num {
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
    transition: color var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
}

.msk-hero-slider__counter-num.is-active {
    color: #fff;
    font-weight: 700;
}

.msk-hero-slider__counter-sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: var(--msk-font-size-sm, 0.875rem);
}

/* ── Responsive Headline ──────────────────────────────────────────────────── */

.msk-hero-slider__title {
    font-size: clamp(2rem, 6vw, 5.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

/* ── Bottom Navigation Bar ────────────────────────────────────────────────── */

.msk-hero-slider__nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--msk-space-5, 1.25rem) var(--msk-space-8, 2rem);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Prev / Next buttons */
.msk-hero-slider__nav-prev,
.msk-hero-slider__nav-next {
    display: flex;
    align-items: center;
    gap: var(--msk-space-3, 0.75rem);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    padding: var(--msk-space-2, 0.5rem);
    transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-hero-slider__nav-prev:hover,
.msk-hero-slider__nav-next:hover {
    color: #fff;
}

.msk-hero-slider__nav-label {
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 180px;
}

/* CTA button (centre) */
.msk-hero-slider__nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--msk-space-2, 0.5rem);
    color: #fff;
    text-decoration: none;
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 600;
    padding: var(--msk-space-2, 0.5rem) var(--msk-space-4, 1rem);
    transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-hero-slider__nav-cta:hover {
    opacity: 0.8;
}

/* ── Mobile Adjustments ───────────────────────────────────────────────────── */

@media (max-width: 782px) {

    .msk-hero-slider__content {
        padding-block-end: var(--msk-space-24, 6rem);
    }

    .msk-hero-slider__nav {
        padding: var(--msk-space-4, 1rem) var(--msk-space-4, 1rem);
    }

    .msk-hero-slider__nav-label {
        display: none;
    }

    .msk-hero-slider__nav-cta span {
        font-size: var(--msk-font-size-xs, 0.75rem);
    }
}

/* ── Editor Preview ───────────────────────────────────────────────────────── */

.msk-hero-slider--editor {
    border: 1px dashed var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
    min-height: 200px;
}

.msk-hero-slide--editor {
    background-size: cover;
    background-position: center;
    border-radius: var(--msk-radius-md, 0.5rem);
    min-height: 120px;
    display: flex;
    align-items: flex-end;
    padding: var(--msk-space-4, 1rem);
    margin-block-end: var(--msk-space-2, 0.5rem);
    position: relative;
    overflow: hidden;
}

.msk-hero-slide--editor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6) 100%);
    border-radius: inherit;
}

.msk-hero-slide__editor-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msk-hero-slide__editor-title {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.msk-hero-slide__editor-cta {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-hero-slider__slide {
        transition: none;
    }

    .msk-hero-slider__counter-num {
        transition: none;
    }
}

/* ── immersive-slider ── */
/*
 * Maple Immersive Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Full-viewport dark slider with centred floating product imagery,
 * headline + description below, and bottom navigation bar.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-immersive-slider { position: relative; inline-size: 100%; block-size: 100vh; block-size: 100svh; overflow: hidden; background: #0a0a1a; }

/* ══════════════════════════════════════════════════════════════════════════════
   SLIDES
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-immersive-slider__slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out), visibility var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out); padding: var(--msk-space-8, 2rem) var(--msk-space-8, 2rem) var(--msk-space-24, 6rem); }
.msk-immersive-slider__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   VISUAL — centred floating product image
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-immersive-slider__visual { flex: 1; display: flex; align-items: center; justify-content: center; max-block-size: 60vh; }
.msk-immersive-slider__image { max-inline-size: 80%; max-block-size: 100%; block-size: auto; inline-size: auto; object-fit: contain; filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5)); }

/* ══════════════════════════════════════════════════════════════════════════════
   TEXT — headline + description below image
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-immersive-slider__text { text-align: center; max-inline-size: 700px; padding-block-start: var(--msk-space-6, 1.5rem); }
.msk-immersive-slider__title { font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 700; color: #fff; margin: 0 0 var(--msk-space-3, 0.75rem); line-height: 1.2; }
.msk-immersive-slider__description { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.65); line-height: var(--msk-leading-normal, 1.6); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-immersive-slider__bar { position: absolute; z-index: 10; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--msk-space-5, 1.25rem) var(--msk-space-8, 2rem); }

/* Scroll hint — left */
.msk-immersive-slider__scroll-hint { font-size: var(--msk-font-size-xs, 0.75rem); color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: var(--msk-tracking-widest, 0.15em); }

/* Centre: prev + CTA + next */
.msk-immersive-slider__bar-centre { display: flex; align-items: center; gap: 0; background: rgba(255,255,255,0.1); border-radius: var(--msk-radius-full, 9999px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); }

.msk-immersive-slider__nav-btn { appearance: none; border: none; background: transparent; color: rgba(255,255,255,0.65); font-size: 1.25rem; padding: var(--msk-space-3, 0.75rem) var(--msk-space-4, 1rem); cursor: pointer; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); line-height: 1; }
.msk-immersive-slider__nav-btn:hover { color: #fff; }

.msk-immersive-slider__cta { display: inline-flex; align-items: center; padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #111; background: linear-gradient(135deg, #f0c27f 0%, #fc5c7d 100%); border-radius: var(--msk-radius-full, 9999px); text-decoration: none; white-space: nowrap; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-immersive-slider__cta:hover { transform: translateY(-1px); }

/* Learn More link — right */
.msk-immersive-slider__link { font-size: var(--msk-font-size-xs, 0.75rem); color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: var(--msk-tracking-widest, 0.15em); text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-immersive-slider__link:hover { color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .msk-immersive-slider__title { font-size: clamp(1.25rem, 6vw, 2rem); }
    .msk-immersive-slider__image { max-inline-size: 90%; }
    .msk-immersive-slider__scroll-hint,
    .msk-immersive-slider__link { display: none; }
    .msk-immersive-slider__bar { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-immersive-slider--editor { border: 1px dashed var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-md, 0.5rem); min-height: 200px; padding: var(--msk-space-4, 1rem); }

.msk-immersive-slide--editor { border-radius: var(--msk-radius-md, 0.5rem); min-height: 140px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-block-end: var(--msk-space-2, 0.5rem); padding: var(--msk-space-4, 1rem); }
.msk-immersive-slide__editor-image { margin-block-end: var(--msk-space-2, 0.5rem); }
.msk-immersive-slide__editor-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.msk-immersive-slide__editor-title { font-size: 14px; font-weight: 700; color: #fff; }
.msk-immersive-slide__editor-desc { font-size: 10px; color: rgba(255,255,255,0.65); max-inline-size: 250px; }

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-immersive-slider__slide { transition: none; }
    .msk-immersive-slider__nav-btn,
    .msk-immersive-slider__cta,
    .msk-immersive-slider__link { transition: none; }
}

/* ── mega-menu ── */
/*
 * Mega Menu Block Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Desktop: horizontal nav bar with dropdown panels (icons, descriptions).
 * Mobile: hamburger → slide-out drawer with drill-down.
 * Overlay blurs page content when panel/drawer is open.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   SHARED
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-mega-menu {
    position: relative;
}

/* ── Overlay (blurred page scrim) ─────────────────────────────────────────── */

.msk-mega-menu__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: calc(var(--msk-z-dropdown, 100) - 1);
    transition: opacity var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
}

.msk-mega-menu__overlay.is-active {
    display: block;
}

/* ── Panel Header (shared structure) ──────────────────────────────────────── */

.msk-mega-menu__panel-header {
    display: flex;
    align-items: center;
    gap: var(--msk-space-4, 1rem);
    margin-block-end: var(--msk-space-5, 1.25rem);
}

.msk-mega-menu__panel-category {
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: var(--msk-tracking-widest, 0.15em);
    text-transform: uppercase;
    color: var(--msk-color-text-muted, #666);
    white-space: nowrap;
    flex-shrink: 0;
}

.msk-mega-menu__panel-separator {
    flex: 1;
    border: none;
    border-block-start: 2px solid var(--msk-color-accent, #e94560);
    margin: 0;
    opacity: 0.4;
}

.msk-mega-menu__panel-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--msk-color-text-muted, #666);
    padding: var(--msk-space-1, 0.25rem);
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-mega-menu__panel-close:hover {
    color: var(--msk-color-text-primary, #111);
}

/* ── Panel Subtitle ───────────────────────────────────────────────────────── */

.msk-mega-menu__panel-subtitle {
    margin-block-end: var(--msk-space-5, 1.25rem);
}

.msk-mega-menu__panel-subtitle-heading {
    font-size: var(--msk-font-size-md, 1.25rem);
    font-weight: 700;
    color: var(--msk-color-text-primary, #111);
    line-height: var(--msk-leading-snug, 1.375);
    margin: 0 0 var(--msk-space-1, 0.25rem);
}

.msk-mega-menu__panel-subtitle-text {
    font-size: var(--msk-font-size-sm, 0.875rem);
    color: var(--msk-color-text-muted, #666);
    margin: 0;
}

/* ── Menu Items (shared) ──────────────────────────────────────────────────── */

.msk-mega-menu__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.msk-mega-menu__item {
    border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
}

.msk-mega-menu__item:last-child {
    border-block-end: none;
}

.msk-mega-menu__item-link {
    display: flex;
    align-items: flex-start;
    gap: var(--msk-space-4, 1rem);
    padding: var(--msk-space-4, 1rem) 0;
    text-decoration: none;
    color: inherit;
    transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-mega-menu__item-link:hover {
    color: var(--msk-color-accent, #e94560);
}

.msk-mega-menu__item-icon {
    flex-shrink: 0;
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    border-radius: var(--msk-radius-md, 0.5rem);
    background: var(--msk-color-surface-alt, #f6f6f6);
}

.msk-mega-menu__item-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.msk-mega-menu__item-content {
    flex: 1;
    min-width: 0;
}

.msk-mega-menu__item-label {
    display: block;
    font-weight: 600;
    font-size: var(--msk-font-size-base, 1rem);
    color: var(--msk-color-text-primary, #111);
    line-height: var(--msk-leading-snug, 1.375);
}

.msk-mega-menu__item-description {
    display: block;
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 400;
    color: var(--msk-color-text-muted, #666);
    line-height: var(--msk-leading-snug, 1.375);
    margin-block-start: var(--msk-space-1, 0.25rem);
}

.msk-mega-menu__item-chevron {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--msk-color-text-muted, #666);
    align-self: center;
    margin-inline-start: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DESKTOP (min-width: 783px)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 783px) {

    /* ── Nav Bar ───────────────────────────────────────────────────────────── */

    .msk-mega-menu__bar {
        display: flex;
        align-items: center;
        gap: var(--msk-space-1, 0.25rem);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .msk-mega-menu__top-link {
        display: inline-flex;
        align-items: center;
        gap: var(--msk-space-2, 0.5rem);
        padding: var(--msk-space-3, 0.75rem) var(--msk-space-4, 1rem);
        background: none;
        border: none;
        cursor: pointer;
        font-size: var(--msk-font-size-base, 1rem);
        font-weight: 500;
        color: var(--msk-color-text-primary, #111);
        text-decoration: none;
        border-radius: var(--msk-radius-md, 0.5rem);
        transition: background-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
    }

    .msk-mega-menu__top-link:hover {
        background-color: var(--msk-color-surface-alt, #f6f6f6);
    }

    .msk-mega-menu__top-link[aria-expanded="true"] {
        background-color: var(--msk-color-surface-alt, #f6f6f6);
    }

    .msk-mega-menu__top-chevron {
        font-size: 10px;
        color: var(--msk-color-text-muted, #666);
        transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
    }

    .msk-mega-menu__top-link[aria-expanded="true"] .msk-mega-menu__top-chevron {
        transform: rotate(180deg);
    }

    /* ── Hamburger: hidden on desktop ──────────────────────────────────────── */

    .msk-mega-menu__toggle {
        display: none;
    }

    /* ── Dropdown Panel ────────────────────────────────────────────────────── */

    .msk-mega-menu__panel {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        inline-size: min(420px, 40vw);
        max-block-size: calc(100vh - 120px);
        background: var(--msk-color-surface, #fff);
        border: 1px solid var(--msk-color-border, #e0e0e0);
        border-radius: 0 0 var(--msk-radius-lg, 1rem) var(--msk-radius-lg, 1rem);
        box-shadow: var(--msk-shadow-lg, 0 10px 30px rgba(0,0,0,0.12));
        z-index: var(--msk-z-dropdown, 100);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--msk-space-6, 1.5rem) var(--msk-space-8, 2rem) var(--msk-space-8, 2rem);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition:
            opacity    var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
            visibility var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
            transform  var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    .msk-mega-menu__panel.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE (max-width: 782px)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    /* ── Hide desktop bar ──────────────────────────────────────────────────── */

    .msk-mega-menu__bar {
        display: none;
    }

    .msk-mega-menu__panel {
        display: none;
    }

    /* ── Show hamburger ────────────────────────────────────────────────────── */

    .msk-mega-menu__toggle {
        display: flex;
        align-items: center;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: var(--msk-space-3, 0.75rem);
        color: currentColor;
    }

    .msk-mega-menu__hamburger {
        display: flex;
        flex-direction: column;
        inline-size: 26px;
        block-size: 20px;
        justify-content: space-between;
    }

    .msk-mega-menu__hamburger span {
        display: block;
        block-size: 3px;
        inline-size: 100%;
        background-color: currentColor;
        border-radius: 2px;
        transition: transform var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
                    opacity   var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    .msk-mega-menu__toggle.is-active .msk-mega-menu__hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .msk-mega-menu__toggle.is-active .msk-mega-menu__hamburger span:nth-child(2) {
        opacity: 0;
    }

    .msk-mega-menu__toggle.is-active .msk-mega-menu__hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* ── Mobile Drawer (built by JS) ───────────────────────────────────────── */

    .msk-mega-menu__mobile-drawer {
        position: fixed;
        top: 0;
        inset-inline-start: -100%;
        inline-size: min(85%, 380px);
        block-size: 100vh;
        block-size: 100dvh;
        background: var(--msk-color-surface, #fff);
        box-shadow: var(--msk-shadow-lg, 0 10px 30px rgba(0,0,0,0.12));
        z-index: var(--msk-z-modal, 400);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--msk-space-6, 1.5rem);
        transition: inset-inline-start var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    .msk-mega-menu__mobile-drawer.is-active {
        inset-inline-start: 0;
    }

    /* Close button in drawer */
    .msk-mega-menu__mobile-close {
        position: absolute;
        top: var(--msk-space-4, 1rem);
        inset-inline-end: var(--msk-space-4, 1rem);
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
        color: var(--msk-color-text-muted, #666);
        padding: var(--msk-space-1, 0.25rem);
        line-height: 1;
    }

    /* Mobile nav list */
    .msk-mega-menu__mobile-list {
        list-style: none;
        margin: 0;
        padding: var(--msk-space-12, 3rem) 0 0;
    }

    .msk-mega-menu__mobile-item {
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
    }

    .msk-mega-menu__mobile-link {
        display: flex;
        align-items: center;
        gap: var(--msk-space-3, 0.75rem);
        padding: var(--msk-space-4, 1rem) 0;
        text-decoration: none;
        color: var(--msk-color-text-primary, #111);
        font-size: var(--msk-font-size-base, 1rem);
        font-weight: 600;
        transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
    }

    .msk-mega-menu__mobile-link:hover {
        color: var(--msk-color-accent, #e94560);
    }

    .msk-mega-menu__mobile-chevron {
        margin-inline-start: auto;
        color: var(--msk-color-text-muted, #666);
        font-size: 18px;
    }

    /* Back button */
    .msk-mega-menu__mobile-back {
        display: flex;
        align-items: center;
        gap: var(--msk-space-2, 0.5rem);
        background: none;
        border: none;
        padding: var(--msk-space-3, 0.75rem) 0;
        margin-block-end: var(--msk-space-3, 0.75rem);
        cursor: pointer;
        color: var(--msk-color-text-muted, #666);
        font-size: var(--msk-font-size-sm, 0.875rem);
        font-weight: 500;
    }

    .msk-mega-menu__mobile-back svg {
        inline-size: 16px;
        block-size: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-mega-menu--editor {
    border: 1px dashed var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
    min-height: 48px;
}

.msk-mega-menu--editor .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--msk-space-2, 0.5rem);
}

.msk-mega-menu-item--editor {
    border: 1px solid var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-3, 0.75rem);
    background: var(--msk-color-surface, #fff);
    min-width: 120px;
}

.msk-mega-menu-item__label-row {
    display: flex;
    align-items: center;
    gap: var(--msk-space-2, 0.5rem);
}

.msk-mega-menu-item__icon-preview {
    font-size: 18px;
    line-height: 1;
}

.msk-mega-menu-item__label {
    font-weight: 600;
    font-size: 13px;
}

.msk-mega-menu-item__chevron {
    color: var(--msk-color-text-muted, #666);
    font-size: 12px;
    margin-inline-start: var(--msk-space-1, 0.25rem);
}

.msk-mega-menu-item__desc-preview {
    display: block;
    font-size: 11px;
    color: var(--msk-color-text-muted, #666);
    margin-block-start: 2px;
}

.msk-mega-menu-item__children {
    margin-block-start: var(--msk-space-2, 0.5rem);
    padding-inline-start: var(--msk-space-4, 1rem);
    border-inline-start: 2px solid var(--msk-color-border, #e0e0e0);
}

.msk-mega-menu-item__children:empty {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DROPDOWN LAYOUT — DESKTOP (Dribbble-style floating card)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 783px) {

    /* Panel: each top-item positions its own dropdown */
    [data-msk-layout="dropdown"] .msk-mega-menu__top-item {
        position: relative;
    }

    [data-msk-layout="dropdown"] .msk-mega-menu__panel {
        inset-inline-start: 50%;
        transform: translateX(-50%) translateY(-4px);
        inline-size: min(560px, 50vw);
        border-radius: var(--msk-radius-lg, 1rem);
        border: 1px solid var(--msk-color-border, #e0e0e0);
    }

    [data-msk-layout="dropdown"] .msk-mega-menu__panel.is-active {
        transform: translateX(-50%) translateY(0);
    }

    /* No overlay for dropdown layout */
    [data-msk-layout="dropdown"] .msk-mega-menu__overlay {
        display: none;
    }

    /* Two-column items layout */
    [data-msk-layout="dropdown"] .msk-mega-menu__items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--msk-space-8, 2rem);
    }

    /* Items without icons/descriptions (plain links) get arrow style */
    [data-msk-layout="dropdown"] .msk-mega-menu__item--plain .msk-mega-menu__item-link {
        padding: var(--msk-space-2, 0.5rem) 0;
        font-weight: 600;
        font-size: var(--msk-font-size-sm, 0.875rem);
    }

    [data-msk-layout="dropdown"] .msk-mega-menu__item--plain .msk-mega-menu__item-chevron {
        content: "\2192";
    }

    /* Hide panel header in dropdown — category label isn't needed */
    [data-msk-layout="dropdown"] .msk-mega-menu__panel-header {
        display: none;
    }

    /* Bottom CTA separator */
    [data-msk-layout="dropdown"] .msk-mega-menu__panel-footer {
        border-block-start: 1px solid var(--msk-color-border, #e0e0e0);
        margin-block-start: var(--msk-space-4, 1rem);
        padding-block-start: var(--msk-space-4, 1rem);
    }

    [data-msk-layout="dropdown"] .msk-mega-menu__panel-footer-link {
        display: flex;
        align-items: center;
        gap: var(--msk-space-2, 0.5rem);
        color: var(--msk-color-text-muted, #666);
        font-size: var(--msk-font-size-sm, 0.875rem);
        text-decoration: none;
    }

    [data-msk-layout="dropdown"] .msk-mega-menu__panel-footer-link:hover {
        color: var(--msk-color-text-primary, #111);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DROPDOWN LAYOUT — MOBILE (Full-screen accordion)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    /* Full-screen accordion takeover */
    [data-msk-layout="dropdown"] .msk-mega-menu__mobile-drawer {
        position: fixed;
        inset: 0;
        inline-size: 100%;
        max-inline-size: none;
        border-radius: 0;
        padding: 0;
        z-index: var(--msk-z-modal, 400);
        background: var(--msk-color-surface, #fff);
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        visibility: hidden;
        transition:
            opacity    var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
            visibility var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    [data-msk-layout="dropdown"] .msk-mega-menu__mobile-drawer.is-active {
        opacity: 1;
        visibility: visible;
        inset-inline-start: 0;
    }

    /* Accordion header: X + logo + CTA */
    .msk-mega-menu__accordion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--msk-space-4, 1rem) var(--msk-space-6, 1.5rem);
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
    }

    .msk-mega-menu__accordion-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--msk-color-text-primary, #111);
        padding: var(--msk-space-1, 0.25rem);
        line-height: 1;
    }

    .msk-mega-menu__accordion-logo img {
        max-block-size: 32px;
        inline-size: auto;
    }

    .msk-mega-menu__accordion-logo-text {
        font-weight: 700;
        font-size: var(--msk-font-size-md, 1.25rem);
    }

    /* Accordion list */
    .msk-mega-menu__accordion-list {
        list-style: none;
        margin: 0;
        padding: var(--msk-space-4, 1rem) var(--msk-space-6, 1.5rem);
    }

    /* Top-level accordion item */
    .msk-mega-menu__accordion-item {
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
    }

    .msk-mega-menu__accordion-item:last-child {
        border-block-end: none;
    }

    .msk-mega-menu__accordion-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        inline-size: 100%;
        padding: var(--msk-space-5, 1.25rem) 0;
        background: none;
        border: none;
        cursor: pointer;
        font-size: var(--msk-font-size-base, 1rem);
        font-weight: 700;
        color: var(--msk-color-text-primary, #111);
        text-align: start;
    }

    .msk-mega-menu__accordion-trigger:hover {
        color: var(--msk-color-accent, #e94560);
    }

    .msk-mega-menu__accordion-arrow {
        font-size: 12px;
        color: var(--msk-color-text-muted, #666);
        transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
    }

    .msk-mega-menu__accordion-item.is-open .msk-mega-menu__accordion-arrow {
        transform: rotate(180deg);
    }

    /* Expanded submenu content */
    .msk-mega-menu__accordion-content {
        display: none;
        padding-block-end: var(--msk-space-4, 1rem);
    }

    .msk-mega-menu__accordion-item.is-open .msk-mega-menu__accordion-content {
        display: block;
    }

    /* Simple link items in accordion */
    .msk-mega-menu__accordion-simple-link {
        display: block;
        padding: var(--msk-space-5, 1.25rem) 0;
        font-size: var(--msk-font-size-base, 1rem);
        font-weight: 700;
        color: var(--msk-color-text-primary, #111);
        text-decoration: none;
    }

    .msk-mega-menu__accordion-simple-link:hover {
        color: var(--msk-color-accent, #e94560);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRID LAYOUT — DESKTOP (weDevs-style full-width 4-column)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 783px) {

    /* Full-width panel below nav bar */
    [data-msk-layout="grid"] .msk-mega-menu__panel {
        inset-inline-start: 0;
        inset-inline-end: 0;
        inline-size: auto;
        max-inline-size: none;
        border-radius: 0 0 var(--msk-radius-lg, 1rem) var(--msk-radius-lg, 1rem);
        padding: var(--msk-space-8, 2rem) var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem);
    }

    /* No overlay for grid layout */
    [data-msk-layout="grid"] .msk-mega-menu__overlay {
        display: none;
    }

    /* Hide panel header — category label not needed */
    [data-msk-layout="grid"] .msk-mega-menu__panel-header {
        display: none;
    }

    /* Hide subtitle */
    [data-msk-layout="grid"] .msk-mega-menu__panel-subtitle {
        display: none;
    }

    /* 4-column grid of items */
    [data-msk-layout="grid"] .msk-mega-menu__items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--msk-space-4, 1rem) var(--msk-space-6, 1.5rem);
    }

    /* Items: card-like with hover highlight */
    [data-msk-layout="grid"] .msk-mega-menu__item {
        border: none;
        border-radius: var(--msk-radius-md, 0.5rem);
        transition: background-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
    }

    [data-msk-layout="grid"] .msk-mega-menu__item:hover {
        background-color: var(--msk-color-surface-alt, #f6f6f6);
    }

    [data-msk-layout="grid"] .msk-mega-menu__item-link {
        padding: var(--msk-space-4, 1rem);
        border-radius: var(--msk-radius-md, 0.5rem);
    }

    /* Larger circular icons */
    [data-msk-layout="grid"] .msk-mega-menu__item-icon {
        inline-size: 44px;
        block-size: 44px;
        font-size: 24px;
        border-radius: var(--msk-radius-full, 9999px);
        background: var(--msk-color-surface-alt, #f6f6f6);
    }

    /* Hide chevrons in grid — items link directly */
    [data-msk-layout="grid"] .msk-mega-menu__item-chevron {
        display: none;
    }

    /* Hover: accent colour on title */
    [data-msk-layout="grid"] .msk-mega-menu__item:hover .msk-mega-menu__item-label {
        color: var(--msk-color-accent, #e94560);
    }

    /* Footer CTA */
    [data-msk-layout="grid"] .msk-mega-menu__panel-footer {
        display: flex;
        justify-content: flex-end;
        border-block-start: none;
        margin-block-start: var(--msk-space-6, 1.5rem);
        padding-block-start: 0;
    }

    [data-msk-layout="grid"] .msk-mega-menu__panel-footer-link {
        display: inline-flex;
        align-items: center;
        gap: var(--msk-space-2, 0.5rem);
        color: var(--msk-color-accent, #e94560);
        font-size: var(--msk-font-size-sm, 0.875rem);
        font-weight: 600;
        text-decoration: none;
        transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
    }

    [data-msk-layout="grid"] .msk-mega-menu__panel-footer-link:hover {
        color: var(--msk-color-text-primary, #111);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRID LAYOUT — MOBILE (same as dropdown: full-screen accordion)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    /* Full-screen accordion (reuses dropdown accordion classes) */
    [data-msk-layout="grid"] .msk-mega-menu__mobile-drawer {
        position: fixed;
        inset: 0;
        inline-size: 100%;
        max-inline-size: none;
        border-radius: 0;
        padding: 0;
        z-index: var(--msk-z-modal, 400);
        background: var(--msk-color-surface, #fff);
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        visibility: hidden;
        transition:
            opacity    var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
            visibility var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    [data-msk-layout="grid"] .msk-mega-menu__mobile-drawer.is-active {
        opacity: 1;
        visibility: visible;
        inset-inline-start: 0;
    }

    /* Grid items in mobile accordion: single column with larger icons */
    [data-msk-layout="grid"] .msk-mega-menu__accordion-content .msk-mega-menu__item-icon {
        inline-size: 44px;
        block-size: 44px;
        font-size: 24px;
        border-radius: var(--msk-radius-full, 9999px);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   COLUMNS LAYOUT — DESKTOP (Adidas-style multi-column with headings)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 783px) {

    /* Full-width panel below nav bar */
    [data-msk-layout="columns"] .msk-mega-menu__panel {
        inset-inline-start: 0;
        inset-inline-end: 0;
        inline-size: auto;
        max-inline-size: none;
        border-radius: 0;
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
        padding: var(--msk-space-8, 2rem) var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem);
    }

    /* No overlay */
    [data-msk-layout="columns"] .msk-mega-menu__overlay {
        display: none;
    }

    /* Hide default panel header/subtitle — columns use sectionHeading per child */
    [data-msk-layout="columns"] .msk-mega-menu__panel-header {
        display: none;
    }

    [data-msk-layout="columns"] .msk-mega-menu__panel-subtitle {
        display: none;
    }

    /* Multi-column layout — auto columns based on item count */
    [data-msk-layout="columns"] .msk-mega-menu__items {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--msk-space-12, 3rem);
    }

    /* Each top-level submenu item becomes a column */
    [data-msk-layout="columns"] .msk-mega-menu__item {
        border: none;
        flex: 0 0 auto;
        min-inline-size: 160px;
        max-inline-size: 220px;
    }

    /* Item link as column heading */
    [data-msk-layout="columns"] .msk-mega-menu__item-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 0 var(--msk-space-3, 0.75rem);
    }

    /* Bold uppercase category heading */
    [data-msk-layout="columns"] .msk-mega-menu__item-label {
        font-weight: 800;
        font-size: var(--msk-font-size-sm, 0.875rem);
        text-transform: uppercase;
        letter-spacing: var(--msk-tracking-wide, 0.05em);
        color: var(--msk-color-text-primary, #111);
    }

    /* Hide icon, description, chevron in columns heading */
    [data-msk-layout="columns"] .msk-mega-menu__item-icon {
        display: none;
    }

    [data-msk-layout="columns"] .msk-mega-menu__item-description {
        display: none;
    }

    [data-msk-layout="columns"] .msk-mega-menu__item-chevron {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   COLUMNS LAYOUT — MOBILE (Full-screen drill-down, screen-slide)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    /* Full-screen takeover */
    [data-msk-layout="columns"] .msk-mega-menu__mobile-drawer {
        position: fixed;
        inset: 0;
        inline-size: 100%;
        max-inline-size: none;
        border-radius: 0;
        padding: 0;
        z-index: var(--msk-z-modal, 400);
        background: var(--msk-color-surface, #fff);
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        visibility: hidden;
        transition:
            opacity    var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
            visibility var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    [data-msk-layout="columns"] .msk-mega-menu__mobile-drawer.is-active {
        opacity: 1;
        visibility: visible;
        inset-inline-start: 0;
    }

    /* ── Drill-down header: ← CATEGORY + X ─────────────────────────────────── */

    .msk-mega-menu__drilldown-header {
        display: flex;
        align-items: center;
        padding: var(--msk-space-4, 1rem) var(--msk-space-6, 1.5rem);
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
        gap: var(--msk-space-3, 0.75rem);
    }

    .msk-mega-menu__drilldown-back {
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--msk-space-1, 0.25rem);
        color: var(--msk-color-text-primary, #111);
        font-size: 18px;
        line-height: 1;
        display: flex;
        align-items: center;
    }

    .msk-mega-menu__drilldown-title {
        font-weight: 800;
        font-size: var(--msk-font-size-base, 1rem);
        text-transform: uppercase;
        color: var(--msk-color-text-primary, #111);
    }

    .msk-mega-menu__drilldown-close {
        margin-inline-start: auto;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 24px;
        color: var(--msk-color-text-muted, #666);
        padding: var(--msk-space-1, 0.25rem);
        line-height: 1;
    }

    /* ── Drill-down item list ──────────────────────────────────────────────── */

    .msk-mega-menu__drilldown-list {
        list-style: none;
        margin: 0;
        padding: var(--msk-space-2, 0.5rem) var(--msk-space-6, 1.5rem);
    }

    .msk-mega-menu__drilldown-item {
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
    }

    .msk-mega-menu__drilldown-item:last-child {
        border-block-end: none;
    }

    .msk-mega-menu__drilldown-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--msk-space-5, 1.25rem) 0;
        text-decoration: none;
        color: var(--msk-color-text-primary, #111);
        font-size: var(--msk-font-size-base, 1rem);
        font-weight: 500;
    }

    .msk-mega-menu__drilldown-link:hover {
        color: var(--msk-color-accent, #e94560);
    }

    .msk-mega-menu__drilldown-chevron {
        color: var(--msk-color-text-muted, #666);
        font-size: 18px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTIONS LAYOUT — DESKTOP (Asana-style category sections with accent lines)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 783px) {

    /* Full-width panel */
    [data-msk-layout="sections"] .msk-mega-menu__panel {
        inset-inline-start: 0;
        inset-inline-end: 0;
        inline-size: auto;
        max-inline-size: none;
        border-radius: 0;
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
        padding: var(--msk-space-8, 2rem) var(--msk-space-10, 2.5rem) 0;
    }

    /* No overlay */
    [data-msk-layout="sections"] .msk-mega-menu__overlay {
        display: none;
    }

    /* Hide default panel header */
    [data-msk-layout="sections"] .msk-mega-menu__panel-header {
        display: none;
    }

    [data-msk-layout="sections"] .msk-mega-menu__panel-subtitle {
        display: none;
    }

    /* Active nav item indicator: accent underline */
    [data-msk-layout="sections"] .msk-mega-menu__top-link[aria-expanded="true"] {
        border-block-end: 3px solid var(--msk-color-accent, #e94560);
        padding-block-end: calc(var(--msk-space-3, 0.75rem) - 3px);
    }

    /* Category sections laid out horizontally */
    [data-msk-layout="sections"] .msk-mega-menu__items {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--msk-space-16, 4rem);
        padding-block-end: var(--msk-space-8, 2rem);
    }

    /* Each item = one category section */
    [data-msk-layout="sections"] .msk-mega-menu__item {
        border: none;
        flex: 1 1 200px;
        max-inline-size: 320px;
    }

    /* Category heading with accent underline */
    [data-msk-layout="sections"] .msk-mega-menu__item-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 0 var(--msk-space-4, 1rem);
        margin-block-end: var(--msk-space-4, 1rem);
        border-block-end: 2px solid var(--msk-color-accent, #e94560);
    }

    [data-msk-layout="sections"] .msk-mega-menu__item-label {
        font-weight: 700;
        font-size: var(--msk-font-size-xs, 0.75rem);
        text-transform: uppercase;
        letter-spacing: var(--msk-tracking-widest, 0.15em);
        color: var(--msk-color-text-primary, #111);
    }

    /* Hide icon, description, chevron in section heading */
    [data-msk-layout="sections"] .msk-mega-menu__item-icon,
    [data-msk-layout="sections"] .msk-mega-menu__item-description,
    [data-msk-layout="sections"] .msk-mega-menu__item-chevron {
        display: none;
    }

    /* Bottom CTA bar */
    [data-msk-layout="sections"] .msk-mega-menu__panel-footer {
        display: flex;
        align-items: center;
        gap: var(--msk-space-6, 1.5rem);
        padding: var(--msk-space-4, 1rem) 0;
        border-block-start: 1px solid var(--msk-color-border, #e0e0e0);
        margin-block-start: 0;
    }

    [data-msk-layout="sections"] .msk-mega-menu__panel-footer-link {
        display: inline-flex;
        align-items: center;
        gap: var(--msk-space-2, 0.5rem);
        color: var(--msk-color-text-muted, #666);
        font-size: var(--msk-font-size-sm, 0.875rem);
        font-weight: 500;
        text-decoration: none;
        padding-inline-end: var(--msk-space-6, 1.5rem);
        border-inline-end: 1px solid var(--msk-color-border, #e0e0e0);
    }

    [data-msk-layout="sections"] .msk-mega-menu__panel-footer-link:last-child {
        border-inline-end: none;
    }

    [data-msk-layout="sections"] .msk-mega-menu__panel-footer-link:hover {
        color: var(--msk-color-text-primary, #111);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTIONS LAYOUT — MOBILE (Full-screen accordion with category headings)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    /* Full-screen takeover */
    [data-msk-layout="sections"] .msk-mega-menu__mobile-drawer {
        position: fixed;
        inset: 0;
        inline-size: 100%;
        max-inline-size: none;
        border-radius: 0;
        padding: 0;
        z-index: var(--msk-z-modal, 400);
        background: var(--msk-color-surface, #fff);
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        visibility: hidden;
        transition:
            opacity    var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
            visibility var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    [data-msk-layout="sections"] .msk-mega-menu__mobile-drawer.is-active {
        opacity: 1;
        visibility: visible;
        inset-inline-start: 0;
    }

    /* Highlighted category bar when expanded */
    [data-msk-layout="sections"] .msk-mega-menu__accordion-item.is-open .msk-mega-menu__accordion-trigger {
        background: color-mix(in oklch, var(--msk-color-accent, #e94560) 8%, var(--msk-color-surface, #fff));
        margin-inline: calc(-1 * var(--msk-space-6, 1.5rem));
        padding-inline: var(--msk-space-6, 1.5rem);
    }

    /* Category headings inside expanded content */
    [data-msk-layout="sections"] .msk-mega-menu__accordion-content .msk-mega-menu__item-label {
        font-weight: 700;
        font-size: var(--msk-font-size-xs, 0.75rem);
        text-transform: uppercase;
        letter-spacing: var(--msk-tracking-widest, 0.15em);
        color: var(--msk-color-text-muted, #666);
        display: block;
        padding: var(--msk-space-6, 1.5rem) 0 var(--msk-space-2, 0.5rem);
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
        margin-block-end: var(--msk-space-2, 0.5rem);
    }

    /* CTA buttons at bottom of mobile accordion */
    .msk-mega-menu__mobile-cta {
        display: flex;
        flex-direction: column;
        gap: var(--msk-space-3, 0.75rem);
        padding: var(--msk-space-6, 1.5rem);
    }

    .msk-mega-menu__mobile-cta-btn {
        display: block;
        text-align: center;
        padding: var(--msk-space-5, 1.25rem);
        border-radius: var(--msk-radius-md, 0.5rem);
        font-size: var(--msk-font-size-base, 1rem);
        font-weight: 600;
        text-decoration: none;
        transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
    }

    .msk-mega-menu__mobile-cta-btn:hover {
        opacity: 0.85;
    }

    .msk-mega-menu__mobile-cta-btn--primary {
        background: var(--msk-color-text-primary, #111);
        color: var(--msk-color-surface, #fff);
    }

    .msk-mega-menu__mobile-cta-btn--secondary {
        background: var(--msk-color-surface, #fff);
        color: var(--msk-color-text-primary, #111);
        border: 2px solid var(--msk-color-text-primary, #111);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SHOWCASE LAYOUT — DESKTOP (Bobbi Brown-style: text left, images right)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 783px) {

    /* Full-width panel */
    [data-msk-layout="showcase"] .msk-mega-menu__panel {
        inset-inline-start: 0;
        inset-inline-end: 0;
        inline-size: auto;
        max-inline-size: none;
        border-radius: 0;
        padding: var(--msk-space-8, 2rem) var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem);
    }

    /* No separate overlay */
    [data-msk-layout="showcase"] .msk-mega-menu__overlay {
        display: none;
    }

    /* Hide default header/subtitle */
    [data-msk-layout="showcase"] .msk-mega-menu__panel-header {
        display: none;
    }

    [data-msk-layout="showcase"] .msk-mega-menu__panel-subtitle {
        display: none;
    }

    /* Two-zone layout: text links left, image gallery right */
    [data-msk-layout="showcase"] .msk-mega-menu__items {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: var(--msk-space-8, 2rem);
    }

    /* Text items (no image) stack in the left column */
    [data-msk-layout="showcase"] .msk-mega-menu__item:not(.msk-mega-menu__item--has-image) {
        grid-column: 1;
        border: none;
    }

    [data-msk-layout="showcase"] .msk-mega-menu__item:not(.msk-mega-menu__item--has-image) .msk-mega-menu__item-link {
        padding: var(--msk-space-2, 0.5rem) 0;
    }

    [data-msk-layout="showcase"] .msk-mega-menu__item:not(.msk-mega-menu__item--has-image) .msk-mega-menu__item-label {
        font-weight: 500;
        font-size: var(--msk-font-size-sm, 0.875rem);
    }

    [data-msk-layout="showcase"] .msk-mega-menu__item:not(.msk-mega-menu__item--has-image) .msk-mega-menu__item-icon,
    [data-msk-layout="showcase"] .msk-mega-menu__item:not(.msk-mega-menu__item--has-image) .msk-mega-menu__item-chevron {
        display: none;
    }

    /* Image items form a gallery row in the right column */
    [data-msk-layout="showcase"] .msk-mega-menu__item--has-image {
        grid-column: 2;
        border: none;
    }

    /* Lay image items in a horizontal row */
    [data-msk-layout="showcase"] .msk-mega-menu__items {
        grid-template-rows: auto;
    }

    /* Make all image items sit in the same row */
    [data-msk-layout="showcase"] .msk-mega-menu__item--has-image {
        grid-row: 1 / -1;
    }

    /* Wrap image items as a sub-grid */
    [data-msk-layout="showcase"] .msk-mega-menu__item--has-image .msk-mega-menu__item-link {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--msk-space-3, 0.75rem);
    }

    [data-msk-layout="showcase"] .msk-mega-menu__item--has-image .msk-mega-menu__item-icon,
    [data-msk-layout="showcase"] .msk-mega-menu__item--has-image .msk-mega-menu__item-chevron {
        display: none;
    }

    /* Image styling */
    [data-msk-layout="showcase"] .msk-mega-menu__item-image {
        display: block;
        inline-size: 100%;
        max-inline-size: 280px;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-radius: var(--msk-radius-md, 0.5rem);
    }

    [data-msk-layout="showcase"] .msk-mega-menu__item--has-image .msk-mega-menu__item-label {
        font-size: var(--msk-font-size-sm, 0.875rem);
        font-weight: 500;
    }

    [data-msk-layout="showcase"] .msk-mega-menu__item--has-image .msk-mega-menu__item-description {
        font-size: var(--msk-font-size-xs, 0.75rem);
    }

    /* Active nav item underline */
    [data-msk-layout="showcase"] .msk-mega-menu__top-link[aria-expanded="true"] {
        border-block-end: 2px solid currentColor;
        padding-block-end: calc(var(--msk-space-3, 0.75rem) - 2px);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SHOWCASE LAYOUT — MOBILE (Full-screen, large text, dark-theme friendly)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    [data-msk-layout="showcase"] .msk-mega-menu__mobile-drawer {
        position: fixed;
        inset: 0;
        inline-size: 100%;
        max-inline-size: none;
        border-radius: 0;
        padding: 0;
        z-index: var(--msk-z-modal, 400);
        background: var(--msk-color-surface, #fff);
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        visibility: hidden;
        transition:
            opacity    var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
            visibility var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    [data-msk-layout="showcase"] .msk-mega-menu__mobile-drawer.is-active {
        opacity: 1;
        visibility: visible;
        inset-inline-start: 0;
    }

    /* Large uppercase nav items in mobile accordion */
    [data-msk-layout="showcase"] .msk-mega-menu__accordion-trigger {
        font-size: var(--msk-font-size-lg, 1.5rem);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--msk-tracking-wide, 0.05em);
    }

    [data-msk-layout="showcase"] .msk-mega-menu__accordion-simple-link {
        font-size: var(--msk-font-size-lg, 1.5rem);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--msk-tracking-wide, 0.05em);
    }

    /* Hide images in mobile — keep it clean/fast */
    [data-msk-layout="showcase"] .msk-mega-menu__item-image {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CLEAN LAYOUT — DESKTOP (Evernote-style: warm, minimal, 4-column headings)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 783px) {

    /* Full-width panel with warm background */
    [data-msk-layout="clean"] .msk-mega-menu__panel {
        inset-inline-start: 0;
        inset-inline-end: 0;
        inline-size: auto;
        max-inline-size: none;
        border-radius: 0;
        border-block-end: 1px solid var(--msk-color-border, #e0e0e0);
        background: var(--msk-color-surface-alt, #f6f6f6);
        padding: var(--msk-space-10, 2.5rem) var(--msk-space-10, 2.5rem) var(--msk-space-12, 3rem);
    }

    /* No overlay */
    [data-msk-layout="clean"] .msk-mega-menu__overlay {
        display: none;
    }

    /* Hide default header/subtitle */
    [data-msk-layout="clean"] .msk-mega-menu__panel-header,
    [data-msk-layout="clean"] .msk-mega-menu__panel-subtitle {
        display: none;
    }

    /* Active nav item: subtle rounded pill highlight */
    [data-msk-layout="clean"] .msk-mega-menu__top-link[aria-expanded="true"] {
        background: var(--msk-color-surface-alt, #f6f6f6);
        border-radius: var(--msk-radius-full, 9999px);
    }

    /* 4-column layout */
    [data-msk-layout="clean"] .msk-mega-menu__items {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--msk-space-12, 3rem);
    }

    /* Each item = a column with muted heading */
    [data-msk-layout="clean"] .msk-mega-menu__item {
        border: none;
        flex: 1 1 180px;
        max-inline-size: 280px;
    }

    /* Muted uppercase category heading */
    [data-msk-layout="clean"] .msk-mega-menu__item-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 0 var(--msk-space-6, 1.5rem);
    }

    [data-msk-layout="clean"] .msk-mega-menu__item-label {
        font-weight: 600;
        font-size: var(--msk-font-size-xs, 0.75rem);
        text-transform: uppercase;
        letter-spacing: var(--msk-tracking-widest, 0.15em);
        color: var(--msk-color-text-muted, #666);
    }

    /* Hide icon, description, chevron */
    [data-msk-layout="clean"] .msk-mega-menu__item-icon,
    [data-msk-layout="clean"] .msk-mega-menu__item-description,
    [data-msk-layout="clean"] .msk-mega-menu__item-chevron {
        display: none;
    }

    /* Submenu: plain text links, generous spacing */
    [data-msk-layout="clean"] .msk-mega-menu__item .msk-mega-menu__item-link + ul,
    [data-msk-layout="clean"] .msk-mega-menu__item .msk-mega-menu__item-content + ul {
        display: block;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CLEAN LAYOUT — MOBILE (Full-screen accordion, warm bg, CTA buttons)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {

    [data-msk-layout="clean"] .msk-mega-menu__mobile-drawer {
        position: fixed;
        inset: 0;
        inline-size: 100%;
        max-inline-size: none;
        border-radius: 0;
        padding: 0;
        z-index: var(--msk-z-modal, 400);
        background: var(--msk-color-surface-alt, #f6f6f6);
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        visibility: hidden;
        transition:
            opacity    var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
            visibility var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    }

    [data-msk-layout="clean"] .msk-mega-menu__mobile-drawer.is-active {
        opacity: 1;
        visibility: visible;
        inset-inline-start: 0;
    }

    /* Warm background on accordion items */
    [data-msk-layout="clean"] .msk-mega-menu__accordion-list {
        background: var(--msk-color-surface-alt, #f6f6f6);
    }

    /* Light separator lines */
    [data-msk-layout="clean"] .msk-mega-menu__accordion-item {
        border-color: color-mix(in oklch, var(--msk-color-border, #e0e0e0) 50%, transparent);
    }

    /* Clean, spacious item triggers */
    [data-msk-layout="clean"] .msk-mega-menu__accordion-trigger {
        font-weight: 500;
        font-size: var(--msk-font-size-base, 1rem);
    }

    [data-msk-layout="clean"] .msk-mega-menu__accordion-simple-link {
        font-weight: 500;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-mega-menu__panel,
    .msk-mega-menu__overlay,
    .msk-mega-menu__mobile-drawer,
    .msk-mega-menu__hamburger span,
    .msk-mega-menu__accordion-arrow,
    [data-msk-layout] .msk-mega-menu__mobile-drawer,
    [data-msk-layout="grid"] .msk-mega-menu__item {
        transition: none;
    }
}

/* ── newsletter-landing ── */
/*
 * Maple Newsletter Landing — Styles
 */

/* Outer wrapper — accent background */
.msk-newsletter-landing { padding: var(--msk-space-4, 1rem); }
.msk-newsletter-landing--v2 { padding: 0; }

/* Dark card */
.msk-newsletter-landing__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; padding: var(--msk-space-10, 2.5rem); position: relative; color: #f6f6f6; }

/* ── Logo ──────────────────────────────────────────────────────────── */

.msk-newsletter-landing__logo-wrap { margin-block-end: var(--msk-space-8, 2rem); }
.msk-newsletter-landing__logo { block-size: 32px; inline-size: auto; }

/* ── Main Grid ─────────────────────────────────────────────────────── */

.msk-newsletter-landing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-10, 2.5rem); align-items: start; }

/* ── Left Column ───────────────────────────────────────────────────── */

.msk-newsletter-landing__left { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); }

.msk-newsletter-landing__video-cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 500; color: rgba(246,246,246,0.92); text-decoration: none; }
.msk-newsletter-landing__play-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; border-radius: var(--msk-radius-full, 9999px); flex-shrink: 0; }

.msk-newsletter-landing__headline { font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 800; color: #f6f6f6; margin: 0; line-height: 1.15; text-transform: uppercase; }

.msk-newsletter-landing__desc { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); margin: 0; line-height: var(--msk-leading-normal, 1.6); max-inline-size: 400px; }

/* Inline email pill */
.msk-newsletter-landing__inline-wrap { display: flex; align-items: center; background: rgba(255,255,255,0.12); border-radius: var(--msk-radius-full, 9999px); padding: var(--msk-space-1, 0.25rem) var(--msk-space-1, 0.25rem) var(--msk-space-1, 0.25rem) var(--msk-space-3, 0.75rem); gap: var(--msk-space-2, 0.5rem); max-inline-size: 440px; border: 1px solid rgba(246,246,246,0.4); }
.msk-newsletter-landing__inline-icon { display: inline-flex; color: rgba(246,246,246,0.92); flex-shrink: 0; }
.msk-newsletter-landing__inline-input { flex: 1; padding: var(--msk-space-3, 0.75rem) var(--msk-space-2, 0.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-family: inherit; color: #f6f6f6; background: transparent; border: none; outline: none; min-inline-size: 0; }
.msk-newsletter-landing__inline-input:focus { box-shadow: 0 0 0 2px rgba(246,246,246,0.5); border-radius: var(--msk-radius-sm, 0.25rem); }
.msk-newsletter-landing__inline-input::placeholder { color: rgba(246,246,246,0.5); }
.msk-newsletter-landing__inline-submit { flex-shrink: 0; padding: var(--msk-space-3, 0.75rem) var(--msk-space-5, 1.25rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; font-family: inherit; color: #f6f6f6; background: transparent; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-newsletter-landing__inline-submit:hover { color: #fff; }
.msk-newsletter-landing__inline-submit span { margin-inline-start: 2px; }

/* ── Right Column — Bonus Card ─────────────────────────────────────── */

.msk-newsletter-landing__card-form-wrap { background: rgba(255,255,255,0.1); border: 1px solid rgba(246,246,246,0.15); border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-8, 2rem); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.msk-newsletter-landing__card-title { font-size: clamp(1rem, 2vw, 1.375rem); font-weight: 800; color: #f6f6f6; margin: 0 0 var(--msk-space-5, 1.25rem); text-transform: uppercase; text-align: center; letter-spacing: 0.5px; }

.msk-newsletter-landing__card-form { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }

.msk-newsletter-landing__card-input-wrap { position: relative; }
.msk-newsletter-landing__card-input-icon { position: absolute; inset-block-start: 50%; inset-inline-start: var(--msk-space-4, 1rem); transform: translateY(-50%); color: rgba(246,246,246,0.92); display: inline-flex; }

.msk-newsletter-landing__card-input,
.msk-newsletter-landing__card-select { inline-size: 100%; padding: var(--msk-space-4, 1rem); font-size: var(--msk-font-size-sm, 0.875rem); font-family: inherit; color: #f6f6f6; background: rgba(255,255,255,0.08); border: 1px solid rgba(246,246,246,0.4); border-radius: var(--msk-radius-full, 9999px); outline: none; box-sizing: border-box; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-newsletter-landing__card-input--icon { padding-inline-start: calc(var(--msk-space-4, 1rem) + 24px); }
.msk-newsletter-landing__card-input::placeholder { color: rgba(246,246,246,0.45); }
.msk-newsletter-landing__card-input:focus,
.msk-newsletter-landing__card-select:focus { border-color: rgba(246,246,246,0.5); }
.msk-newsletter-landing__card-select { appearance: auto; cursor: pointer; }

.msk-newsletter-landing__card-submit { inline-size: 100%; padding: var(--msk-space-4, 1rem); font-size: var(--msk-font-size-base, 1rem); font-weight: 800; font-family: inherit; color: #3d0a10; border: none; border-radius: var(--msk-radius-full, 9999px); cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-newsletter-landing__card-submit:hover { opacity: 0.9; }

/* ── Benefits Row ──────────────────────────────────────────────────── */

.msk-newsletter-landing__benefits { display: flex; gap: var(--msk-space-8, 2rem); padding-block-start: var(--msk-space-10, 2.5rem); flex-wrap: wrap; }

.msk-newsletter-landing__benefit { display: flex; align-items: flex-start; gap: var(--msk-space-2, 0.5rem); font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.92); line-height: var(--msk-leading-normal, 1.6); flex: 1; min-inline-size: 200px; }
.msk-newsletter-landing__benefit-check { display: inline-flex; flex-shrink: 0; margin-block-start: 2px; }
.msk-newsletter-landing__benefit strong { font-weight: 700; color: #f6f6f6; }

/* Decorative SVG */
.msk-newsletter-landing__decor { position: absolute; top: 0; right: 0; width: 45%; height: 100%; pointer-events: none; opacity: 0.06; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-newsletter-landing__grid { grid-template-columns: 1fr; }
    .msk-newsletter-landing__inline-wrap { max-inline-size: none; }
    .msk-newsletter-landing__benefits { flex-direction: column; gap: var(--msk-space-4, 1rem); }
}

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-newsletter-landing--editor { border-radius: var(--msk-radius-md, 0.5rem); }
.msk-newsletter-landing__editor-card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; padding: var(--msk-space-8, 2rem); position: relative; color: #f6f6f6; }

/* Editor logo row */
.msk-newsletter-landing__editor-logo-row { margin-block-end: var(--msk-space-6, 1.5rem); }
.msk-newsletter-landing__editor-logo-placeholder { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(246,246,246,0.4); }

/* Editor two-column grid */
.msk-newsletter-landing__editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-8, 2rem); align-items: start; }

/* Editor left column */
.msk-newsletter-landing__editor-left { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-newsletter-landing__editor-video-cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); font-size: 12px; color: rgba(246,246,246,0.7); }
.msk-newsletter-landing__editor-play-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 8px; flex-shrink: 0; }
.msk-newsletter-landing__editor-headline { font-size: clamp(1rem, 2.5vw, 1.75rem); font-weight: 800; color: #f6f6f6; line-height: 1.2; text-transform: uppercase; }
.msk-newsletter-landing__editor-desc { font-size: 12px; color: rgba(246,246,246,0.65); margin: 0; line-height: 1.5; max-width: 320px; }

/* Editor inline email pill */
.msk-newsletter-landing__editor-inline-wrap { display: flex; align-items: center; background: rgba(255,255,255,0.1); border-radius: 9999px; padding: 4px 4px 4px 10px; gap: 6px; border: 1px solid rgba(246,246,246,0.2); max-width: 340px; }
.msk-newsletter-landing__editor-inline-icon { font-size: 14px; color: rgba(246,246,246,0.5); flex-shrink: 0; }
.msk-newsletter-landing__editor-inline-ph { flex: 1; font-size: 11px; color: rgba(246,246,246,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msk-newsletter-landing__editor-inline-submit { flex-shrink: 0; font-size: 10px; font-weight: 700; color: rgba(246,246,246,0.7); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; padding: 6px 10px; }

/* Editor card */
.msk-newsletter-landing__editor-card-form { background: rgba(255,255,255,0.08); border: 1px solid rgba(246,246,246,0.15); border-radius: var(--msk-radius-lg, 1rem); padding: var(--msk-space-5, 1.25rem); display: flex; flex-direction: column; gap: var(--msk-space-3, 0.75rem); backdrop-filter: blur(4px); }
.msk-newsletter-landing__editor-card-title { font-size: 12px; font-weight: 800; color: #f6f6f6; text-transform: uppercase; text-align: center; letter-spacing: 0.5px; }
.msk-newsletter-landing__editor-card-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(246,246,246,0.15); border-radius: 9999px; padding: 8px 14px; font-size: 11px; color: rgba(246,246,246,0.4); }
.msk-newsletter-landing__editor-card-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(246,246,246,0.15); border-radius: 9999px; padding: 8px 14px; font-size: 11px; color: rgba(246,246,246,0.4); }
.msk-newsletter-landing__editor-card-submit { border-radius: 9999px; padding: 10px 14px; font-size: 11px; font-weight: 800; color: #3d0a10; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }

/* Editor benefits row */
.msk-newsletter-landing__editor-benefits { display: flex; flex-wrap: wrap; gap: var(--msk-space-4, 1rem) var(--msk-space-8, 2rem); margin-block-start: var(--msk-space-6, 1.5rem); }
.msk-newsletter-landing__editor-benefit { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: rgba(246,246,246,0.7); line-height: 1.5; }
.msk-newsletter-landing__editor-benefit-check { font-weight: 700; flex-shrink: 0; }

@media (max-width: 782px) {
    .msk-newsletter-landing__editor-grid { grid-template-columns: 1fr; }
}

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-newsletter-landing__inline-submit,
    .msk-newsletter-landing__card-input,
    .msk-newsletter-landing__card-select,
    .msk-newsletter-landing__card-submit { transition: none; }
}

/* ── newsletter-minimal ── */
/*
 * Maple Newsletter Minimal — Styles
 */

.msk-newsletter-minimal { padding: var(--msk-space-4, 1rem); }
.msk-newsletter-minimal--v2 { padding: 0; }
.msk-newsletter-minimal__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; }

/* ── Background Image ──────────────────────────────────────────────── */

.msk-newsletter-minimal__bg-image { position: absolute; inset-block-start: 0; inset-inline-end: 0; block-size: 100%; inline-size: auto; max-inline-size: 45%; object-fit: contain; object-position: right bottom; pointer-events: none; }

/* ── Inner ─────────────────────────────────────────────────────────── */

.msk-newsletter-minimal__inner { position: relative; z-index: 1; padding: var(--msk-space-10, 2.5rem); min-block-size: 400px; display: flex; flex-direction: column; }

/* ── Logo ──────────────────────────────────────────────────────────── */

.msk-newsletter-minimal__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: inherit; line-height: 1.4; margin-block-end: var(--msk-space-8, 2rem); }
.msk-newsletter-minimal__logo-img { block-size: 80px; inline-size: auto; margin-block-end: var(--msk-space-8, 2rem); }

/* ── Center Content ────────────────────────────────────────────────── */

.msk-newsletter-minimal__center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--msk-space-5, 1.25rem); flex: 1; justify-content: center; max-inline-size: 600px; margin-inline: auto; }

.msk-newsletter-minimal__headline { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 400; color: inherit; margin: 0; line-height: 1.2; text-transform: uppercase; letter-spacing: 2px; }

.msk-newsletter-minimal__subtitle { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: inherit; margin: 0; text-transform: uppercase; letter-spacing: 2px; }

/* ── Form ──────────────────────────────────────────────────────────── */

.msk-newsletter-minimal__form { display: flex; flex-direction: column; align-items: center; gap: var(--msk-space-6, 1.5rem); inline-size: 100%; margin-block-start: var(--msk-space-4, 1rem); }

.msk-newsletter-minimal__fields { display: flex; gap: var(--msk-space-6, 1.5rem); inline-size: 100%; }

.msk-newsletter-minimal__input { flex: 1; padding: var(--msk-space-3, 0.75rem) 0; font-size: var(--msk-font-size-base, 1rem); font-family: inherit; color: inherit; background: transparent; border: none; border-block-end: 1px solid rgba(0,0,0,0.25); outline: none; transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-newsletter-minimal__input::placeholder { color: inherit; opacity: 0.4; }
.msk-newsletter-minimal__input:focus { border-color: rgba(0,0,0,0.6); }

.msk-newsletter-minimal__submit { padding: var(--msk-space-4, 1rem) var(--msk-space-10, 2.5rem); font-size: var(--msk-font-size-base, 1rem); font-weight: 600; font-family: inherit; color: inherit; background: transparent; border: 1.5px solid rgba(0,0,0,0.3); cursor: pointer; text-transform: uppercase; letter-spacing: 2px; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-newsletter-minimal__submit:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.5); }

/* ── Social Icons ──────────────────────────────────────────────────── */

.msk-newsletter-minimal__socials { display: flex; gap: var(--msk-space-4, 1rem); margin-block-start: var(--msk-space-4, 1rem); }
.msk-newsletter-minimal__social-icon { display: inline-flex; color: inherit; text-decoration: none; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-newsletter-minimal__social-icon:hover { color: #525252; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-newsletter-minimal__bg-image { display: none; }
    .msk-newsletter-minimal__fields { flex-direction: column; }
}

/* ── Decorative SVG ────────────────────────────────────────────────── */

.msk-newsletter-minimal__decor { position: absolute; top: 0; right: 0; width: 45%; height: 100%; pointer-events: none; opacity: 0.08; }

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-newsletter-minimal--editor { border-radius: var(--msk-radius-md, 0.5rem); min-height: 360px; overflow: hidden; }

/* Editor inner layout */
.msk-newsletter-minimal__editor-inner { position: relative; z-index: 1; padding: var(--msk-space-8, 2rem); min-height: 360px; display: flex; flex-direction: column; }

/* Editor stacked logo text */
.msk-newsletter-minimal__editor-logo-text { display: flex; flex-direction: column; gap: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: rgba(0,0,0,0.5); line-height: 1.4; margin-block-end: var(--msk-space-6, 1.5rem); }

/* Editor center block */
.msk-newsletter-minimal__editor-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--msk-space-4, 1rem); flex: 1; justify-content: center; }
.msk-newsletter-minimal__editor-headline { font-size: clamp(1rem, 3vw, 2rem); font-weight: 400; color: rgba(0,0,0,0.65); line-height: 1.2; text-transform: uppercase; letter-spacing: 2px; }
.msk-newsletter-minimal__editor-subtitle { font-size: 11px; font-weight: 600; color: rgba(0,0,0,0.45); text-transform: uppercase; letter-spacing: 2px; }

/* Editor form fields */
.msk-newsletter-minimal__editor-fields { display: flex; gap: var(--msk-space-6, 1.5rem); width: 100%; max-width: 440px; }
.msk-newsletter-minimal__editor-input { flex: 1; padding: 8px 0; font-size: 11px; color: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(0,0,0,0.2); text-align: center; }
.msk-newsletter-minimal__editor-submit { padding: 10px 28px; font-size: 11px; font-weight: 600; color: rgba(0,0,0,0.55); border: 1.5px solid rgba(0,0,0,0.25); text-transform: uppercase; letter-spacing: 2px; }

/* Editor social dots */
.msk-newsletter-minimal__editor-socials { display: flex; gap: 10px; margin-block-start: 4px; }
.msk-newsletter-minimal__editor-social-dot { display: inline-block; width: 22px; height: 22px; background: rgba(0,0,0,0.15); border-radius: 50%; }

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-newsletter-minimal__input,
    .msk-newsletter-minimal__submit,
    .msk-newsletter-minimal__social-icon { transition: none; }
}

/* ── newsletter-section ── */
/*
 * Maple Newsletter Section — Styles
 */

.msk-newsletter-section { padding: var(--msk-space-4, 1rem); }
.msk-newsletter-section--v2 { padding: 0; }
.msk-newsletter-section__card { border-radius: var(--msk-radius-xl, 1.5rem); overflow: hidden; position: relative; }

/* ── Grid ──────────────────────────────────────────────────────────── */

.msk-newsletter-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-8, 2rem); align-items: center; padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem); }

/* ── Left Column — Content ─────────────────────────────────────────── */

.msk-newsletter-section__content { display: flex; flex-direction: column; gap: var(--msk-space-5, 1.25rem); }

.msk-newsletter-section__badge { display: inline-block; align-self: flex-start; padding: var(--msk-space-2, 0.5rem) var(--msk-space-4, 1rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: inherit; border-radius: var(--msk-radius-full, 9999px); }

.msk-newsletter-section__headline { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: inherit; margin: 0; line-height: 1.15; }

/* ── Inline Email Form ─────────────────────────────────────────────── */

.msk-newsletter-section__form { margin-block-start: var(--msk-space-2, 0.5rem); }

.msk-newsletter-section__input-wrap { display: flex; align-items: center; background: #fff; border-radius: var(--msk-radius-full, 9999px); padding: var(--msk-space-2, 0.5rem); gap: var(--msk-space-2, 0.5rem); box-shadow: 0 2px 8px rgba(0,0,0,0.06); max-inline-size: 520px; }

.msk-newsletter-section__input-icon { display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: 0.6; padding-inline-start: var(--msk-space-3, 0.75rem); flex-shrink: 0; }

.msk-newsletter-section__input { flex: 1; padding: var(--msk-space-3, 0.75rem) var(--msk-space-2, 0.5rem); font-size: var(--msk-font-size-base, 1rem); font-family: inherit; color: inherit; background: transparent; border: none; outline: none; min-inline-size: 0; }
.msk-newsletter-section__input:focus { box-shadow: 0 0 0 2px rgba(0,0,0,0.35); border-radius: var(--msk-radius-sm, 0.25rem); }
.msk-newsletter-section__input::placeholder { color: inherit; opacity: 0.4; }

.msk-newsletter-section__submit { flex-shrink: 0; padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-base, 1rem); font-weight: 700; font-family: inherit; color: #fff; border: none; border-radius: var(--msk-radius-full, 9999px); cursor: pointer; transition: opacity var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-newsletter-section__submit:hover { opacity: 0.9; }

/* ── Helper Text ───────────────────────────────────────────────────── */

.msk-newsletter-section__helper { font-size: var(--msk-font-size-sm, 0.875rem); color: inherit; opacity: 0.6; margin: 0; }

/* ── Right Column — Image ──────────────────────────────────────────── */

.msk-newsletter-section__image-wrap { display: flex; justify-content: center; align-items: center; }
.msk-newsletter-section__image { inline-size: 100%; max-inline-size: 480px; block-size: auto; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-newsletter-section__grid { grid-template-columns: 1fr; }
    .msk-newsletter-section__input-wrap { max-inline-size: none; }
    .msk-newsletter-section__image-wrap { order: -1; }
}

/* ── Decorative SVG ────────────────────────────────────────────────── */

.msk-newsletter-section__decor { position: absolute; top: 0; right: 0; width: 45%; height: 100%; pointer-events: none; opacity: 0.08; }

/* ── Editor ────────────────────────────────────────────────────────── */

.msk-newsletter-section--editor { border-radius: var(--msk-radius-md, 0.5rem); min-height: 240px; overflow: hidden; }

/* Editor two-column grid */
.msk-newsletter-section__editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-8, 2rem); align-items: center; padding: var(--msk-space-8, 2rem) var(--msk-space-8, 2rem); position: relative; z-index: 1; }

/* Editor left column */
.msk-newsletter-section__editor-content { display: flex; flex-direction: column; gap: var(--msk-space-4, 1rem); }
.msk-newsletter-section__editor-badge { display: inline-block; align-self: flex-start; padding: 4px 12px; font-size: 11px; font-weight: 600; color: #333; border-radius: 9999px; }
.msk-newsletter-section__editor-headline { font-size: clamp(1rem, 2.5vw, 1.75rem); font-weight: 800; color: rgba(0,0,0,0.7); line-height: 1.15; }

/* Editor email pill */
.msk-newsletter-section__editor-input-wrap { display: flex; align-items: center; background: #fff; border-radius: 9999px; padding: 4px; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); max-width: 380px; }
.msk-newsletter-section__editor-input-icon { font-size: 14px; color: rgba(0,0,0,0.4); padding-left: 10px; flex-shrink: 0; }
.msk-newsletter-section__editor-input-ph { flex: 1; font-size: 11px; color: rgba(0,0,0,0.35); padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msk-newsletter-section__editor-submit { flex-shrink: 0; padding: 8px 16px; font-size: 11px; font-weight: 700; color: #fff; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }

.msk-newsletter-section__editor-helper { font-size: 11px; color: rgba(0,0,0,0.45); margin: 0; }

/* Editor right column — image placeholder */
.msk-newsletter-section__editor-image-col { display: flex; justify-content: center; align-items: center; }
.msk-newsletter-section__editor-image-ph { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 140px; background: rgba(0,0,0,0.06); border-radius: var(--msk-radius-lg, 1rem); border: 2px dashed rgba(0,0,0,0.15); }
.msk-newsletter-section__editor-image-ph span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(0,0,0,0.3); }

@media (max-width: 782px) {
    .msk-newsletter-section__editor-grid { grid-template-columns: 1fr; }
}

/* ── Reduced Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-newsletter-section__submit { transition: none; }
}

/* ── page-slider ── */
/*
 * Maple Page Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Full-page section slider. Dark textured bg. Each slide is a full-viewport
 * section with its own layout. Crossfade transitions.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.msk-page-slider {
    position: relative;
    inline-size: 100%;
    min-block-size: 100vh;
    min-block-size: 100svh;
    overflow: hidden;
    background: #1e1e1e;
    color: inherit;
}

/* ── Slides ───────────────────────────────────────────────────────────────── */

.msk-page-slider__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 800ms var(--msk-ease-out, ease-out), visibility 800ms var(--msk-ease-out, ease-out);
}

.msk-page-slider__slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ── Shared Typography ────────────────────────────────────────────────────── */

.msk-page-slider__subtitle {
    display: block;
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-widest, 0.15em);
    color: inherit; opacity: 0.5;
    margin-block-end: var(--msk-space-3, 0.75rem);
}

.msk-page-slider__headline {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    font-style: italic;
    line-height: 1.1;
    margin: 0 0 var(--msk-space-6, 1.5rem);
}

.msk-page-slider__description {
    font-size: var(--msk-font-size-base, 1rem);
    color: inherit;
    opacity: 0.6;
    line-height: var(--msk-leading-normal, 1.6);
    max-inline-size: 480px;
    margin-block-end: var(--msk-space-6, 1.5rem);
}

/* ── CTA Row ──────────────────────────────────────────────────────────────── */

.msk-page-slider__cta-row {
    display: flex;
    gap: var(--msk-space-2, 0.5rem);
    align-items: stretch;
}

.msk-page-slider__cta-row--center {
    justify-content: center;
    margin-block-start: var(--msk-space-8, 2rem);
}

.msk-page-slider__cta {
    display: inline-flex;
    align-items: center;
    padding: var(--msk-space-4, 1rem) var(--msk-space-8, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wider, 0.1em);
    text-decoration: none;
    transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-page-slider__cta:hover {
    border-color: #fff;
}

.msk-page-slider__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--msk-space-4, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #fff;
    color: #111;
    text-decoration: none;
    transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-page-slider__cta-arrow:hover {
    background: #e0e0e0;
}

/* ── SPLIT LAYOUT (hero + feature) ────────────────────────────────────────── */

.msk-page-slider__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--msk-space-10, 2.5rem);
    align-items: center;
    inline-size: 100%;
    max-inline-size: 1200px;
    margin: 0 auto;
}

.msk-page-slider__split-text {
    display: flex;
    flex-direction: column;
}

.msk-page-slider__split-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hexagonal frame with glow */
.msk-page-slider__hex-frame {
    position: relative;
    inline-size: min(400px, 100%);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--msk-hex-glow, #e94560);
    padding: 4px;
}

.msk-page-slider__hex-frame img {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

/* Feature list items */
.msk-page-slider__list {
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-3, 0.75rem);
    margin: 0 0 var(--msk-space-8, 2rem);
}

.msk-page-slider__list-item {
    display: flex;
    align-items: baseline;
    gap: var(--msk-space-3, 0.75rem);
}

.msk-page-slider__list-item dt {
    font-size: var(--msk-font-size-md, 1.25rem);
    font-weight: 800;
    font-style: italic;
    white-space: nowrap;
}

.msk-page-slider__list-item dd {
    font-size: var(--msk-font-size-sm, 0.875rem);
    color: inherit;
    opacity: 0.6;
    margin: 0;
}

/* ── CENTERED LAYOUT (cards, gallery, pricing) ────────────────────────────── */

.msk-page-slider__centered {
    text-align: center;
    inline-size: 100%;
    max-inline-size: 1200px;
    margin: 0 auto;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.msk-page-slider__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--msk-space-4, 1rem);
    margin-block-start: var(--msk-space-8, 2rem);
}

.msk-page-slider__card {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--msk-radius-lg, 1rem);
    padding: var(--msk-space-8, 2rem) var(--msk-space-6, 1.5rem);
    text-align: center;
    transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-page-slider__card:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.msk-page-slider__card-icon {
    display: block;
    font-size: 3rem;
    margin-block-end: var(--msk-space-4, 1rem);
    line-height: 1;
    opacity: 0.5;
}

.msk-page-slider__card-title {
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wider, 0.1em);
    color: #fff;
    margin: 0 0 var(--msk-space-2, 0.5rem);
}

.msk-page-slider__card-price {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800;
    font-style: italic;
    margin-block-end: var(--msk-space-3, 0.75rem);
}

.msk-page-slider__card-desc {
    font-size: var(--msk-font-size-sm, 0.875rem);
    color: inherit;
    opacity: 0.6;
    line-height: 1.5;
    margin: 0 0 var(--msk-space-5, 1.25rem);
}

.msk-page-slider__card-link {
    display: inline-block;
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wider, 0.1em);
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem);
    transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-page-slider__card-link:hover {
    border-color: #fff;
}

/* ── Gallery ──────────────────────────────────────────────────────────────── */

.msk-page-slider__gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--msk-space-3, 0.75rem);
    margin-block-start: var(--msk-space-8, 2rem);
}

.msk-page-slider__gallery-item {
    border-radius: var(--msk-radius-md, 0.5rem);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.msk-page-slider__gallery-item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: grayscale(80%);
    transition: filter var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
}

.msk-page-slider__gallery-item:hover img {
    filter: grayscale(0%);
}

/* ── Navigation Arrows ────────────────────────────────────────────────────── */

.msk-page-slider__nav {
    position: absolute;
    bottom: var(--msk-space-6, 1.5rem);
    inset-inline-end: var(--msk-space-6, 1.5rem);
    z-index: 3;
    display: flex;
    gap: var(--msk-space-2, 0.5rem);
}

.msk-page-slider__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--msk-radius-full, 9999px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    cursor: pointer;
    transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-page-slider__nav-btn:hover {
    border-color: #fff;
}

/* ── Side Dots ────────────────────────────────────────────────────────────── */

.msk-page-slider__dots {
    position: absolute;
    inset-inline-start: var(--msk-space-6, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-3, 0.75rem);
}

.msk-page-slider__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--msk-radius-full, 9999px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-page-slider__dot.is-active {
    background: #fff;
    border-color: #fff;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {

    .msk-page-slider {
        min-block-size: 0;
    }

    .msk-page-slider__slide {
        position: relative;
        display: none;
        padding: var(--msk-space-8, 2rem) var(--msk-space-6, 1.5rem);
    }

    .msk-page-slider__slide.is-active {
        display: flex;
        position: relative;
    }

    .msk-page-slider__split {
        grid-template-columns: 1fr;
    }

    .msk-page-slider__cards,
    .msk-page-slider__gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .msk-page-slider__hex-frame {
        inline-size: min(250px, 80%);
    }

    .msk-page-slider__dots {
        position: relative;
        inset: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        padding: var(--msk-space-4, 1rem) 0;
    }

    .msk-page-slider__nav {
        position: relative;
        inset: auto;
        justify-content: center;
        padding: var(--msk-space-4, 1rem) 0;
    }
}

/* ── Editor ───────────────────────────────────────────────────────────────── */

.msk-page-slider--editor {
    border: 1px dashed var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
    min-height: 100px;
}

.msk-page-slide--editor {
    border: 1px solid #333;
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-4, 1rem);
    margin-block-end: var(--msk-space-2, 0.5rem);
    background: #1e1e1e;
}

.msk-page-slide__editor-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msk-page-slide__editor-layout {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #525252;
    border: 1px solid #444;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    align-self: flex-start;
}

.msk-page-slide__editor-headline {
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
}

.msk-page-slide__editor-subtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #525252;
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-page-slider__slide,
    .msk-page-slider__card,
    .msk-page-slider__nav-btn,
    .msk-page-slider__dot,
    .msk-page-slider__gallery-item img {
        transition: none;
    }
}

/* ── product-slider-advanced ── */
/*
 * Maple Product Slider (Advanced) — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Rich product cards: image, title, tag pills, description, attribute dot
 * ratings, price, unit text, Add to Cart button. CSS scroll-snap.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.msk-product-adv { position: relative; padding: var(--msk-space-8, 2rem) 0; }

.msk-product-adv__header { text-align: center; margin-block-end: var(--msk-space-8, 2rem); }
.msk-product-adv__subheading { font-size: var(--msk-font-size-sm, 0.875rem); text-transform: uppercase; letter-spacing: var(--msk-tracking-widest, 0.15em); color: var(--msk-color-text-muted, #666); margin: 0 0 var(--msk-space-2, 0.5rem); }
.msk-product-adv__heading { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin: 0; }

/* Track */
.msk-product-adv__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: var(--msk-space-2, 0.5rem); }
.msk-product-adv__track::-webkit-scrollbar { display: none; }

/* Card */
.msk-product-adv__card { scroll-snap-align: start; flex-shrink: 0; display: flex; flex-direction: column; background: var(--msk-color-surface, #fff); border-radius: var(--msk-radius-lg, 1rem); overflow: hidden; box-shadow: var(--msk-shadow-sm, 0 1px 3px rgba(0,0,0,0.08)); transition: box-shadow var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out); }
.msk-product-adv__card:hover { box-shadow: var(--msk-shadow-md, 0 4px 12px rgba(0,0,0,0.12)); }

.msk-product-adv__card-image { aspect-ratio: 1; overflow: hidden; background: var(--msk-color-surface-alt, #f6f6f6); border-radius: var(--msk-radius-md, 0.5rem); margin: var(--msk-space-4, 1rem) var(--msk-space-4, 1rem) 0; }
.msk-product-adv__card-image img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.msk-product-adv__card-image a { display: block; inline-size: 100%; block-size: 100%; }

.msk-product-adv__card-body { flex: 1; display: flex; flex-direction: column; padding: var(--msk-space-4, 1rem) var(--msk-space-5, 1.25rem) var(--msk-space-5, 1.25rem); }

.msk-product-adv__card-title { font-size: var(--msk-font-size-md, 1.25rem); font-weight: 700; margin: 0 0 var(--msk-space-2, 0.5rem); line-height: var(--msk-leading-snug, 1.375); }
.msk-product-adv__card-title a { color: inherit; text-decoration: none; }

/* Tag pills */
.msk-product-adv__card-tags { display: flex; flex-wrap: wrap; gap: var(--msk-space-1, 0.25rem); margin-block-end: var(--msk-space-3, 0.75rem); }
.msk-product-adv__tag { display: inline-block; padding: 2px var(--msk-space-2, 0.5rem); background: var(--msk-color-text-primary, #111); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--msk-radius-sm, 0.25rem); }

/* Description */
.msk-product-adv__card-desc { font-size: var(--msk-font-size-sm, 0.875rem); color: var(--msk-color-text-muted, #666); line-height: 1.5; margin: 0 0 var(--msk-space-4, 1rem); }

/* Attribute dot ratings */
.msk-product-adv__card-attrs { display: flex; flex-direction: column; gap: var(--msk-space-2, 0.5rem); margin-block-end: var(--msk-space-5, 1.25rem); }
.msk-product-adv__attr { display: flex; align-items: center; justify-content: space-between; }
.msk-product-adv__attr-name { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; }
.msk-product-adv__attr-dots { display: flex; gap: 3px; }
.msk-product-adv__dot { inline-size: 10px; block-size: 10px; border-radius: var(--msk-radius-full, 9999px); background: var(--msk-color-border, #e0e0e0); }
.msk-product-adv__dot.is-filled { background: var(--msk-color-text-primary, #111); }

/* Price */
.msk-product-adv__card-price { text-align: center; margin-block-start: auto; padding-block-start: var(--msk-space-4, 1rem); }
.msk-product-adv__card-price .woocommerce-Price-amount { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; }
.msk-product-adv__card-price del { color: var(--msk-color-text-muted, #666); font-size: var(--msk-font-size-sm, 0.875rem); }
.msk-product-adv__card-price ins { text-decoration: none; }
.msk-product-adv__unit { display: block; font-size: var(--msk-font-size-xs, 0.75rem); color: var(--msk-color-text-muted, #666); margin-block-start: var(--msk-space-1, 0.25rem); }

/* Add to Cart button */
.msk-product-adv__atc { display: block; text-align: center; padding: var(--msk-space-4, 1rem); margin-block-start: var(--msk-space-4, 1rem); background: var(--msk-color-text-primary, #111); color: #fff; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; text-transform: uppercase; letter-spacing: var(--msk-tracking-wider, 0.1em); text-decoration: none; border-radius: var(--msk-radius-md, 0.5rem); transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-product-adv__atc:hover { filter: brightness(1.2); }

/* Arrows */
.msk-product-adv__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: none; border-radius: var(--msk-radius-full, 9999px); background: var(--msk-color-surface, #fff); box-shadow: var(--msk-shadow-md, 0 4px 12px rgba(0,0,0,0.1)); color: var(--msk-color-text-primary, #111); cursor: pointer; transition: box-shadow var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-product-adv__arrow:hover { box-shadow: var(--msk-shadow-lg, 0 10px 30px rgba(0,0,0,0.12)); }
.msk-product-adv__arrow--prev { inset-inline-start: calc(-1 * var(--msk-space-6, 1.5rem)); }
.msk-product-adv__arrow--next { inset-inline-end: calc(-1 * var(--msk-space-6, 1.5rem)); }

@media (max-width: 782px) { .msk-product-adv__arrow { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .msk-product-adv__track { scroll-behavior: auto; }
    .msk-product-adv__card, .msk-product-adv__atc, .msk-product-adv__arrow { transition: none; }
}

/* ── product-slider ── */
/*
 * Maple Product Slider (Basic) — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * WooCommerce product carousel. CSS scroll-snap. Product cards with
 * image, badge, title, category, price. Arrows + dots.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.msk-product-slider {
    position: relative;
    padding: var(--msk-space-8, 2rem) 0;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.msk-product-slider__header {
    text-align: center;
    margin-block-end: var(--msk-space-8, 2rem);
}

.msk-product-slider__subheading {
    font-size: var(--msk-font-size-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-widest, 0.15em);
    color: var(--msk-color-text-muted, #666);
    margin: 0 0 var(--msk-space-2, 0.5rem);
}

.msk-product-slider__heading {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--msk-color-text-primary, #111);
    margin: 0;
}

/* ── Track (scroll-snap) ──────────────────────────────────────────────────── */

.msk-product-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--msk-space-2, 0.5rem);
}

.msk-product-slider__track::-webkit-scrollbar {
    display: none;
}

/* ── Product Card ─────────────────────────────────────────────────────────── */

.msk-product-slider__card {
    scroll-snap-align: start;
    flex-shrink: 0;
}

.msk-product-slider__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--msk-color-surface, #fff);
    border-radius: var(--msk-radius-lg, 1rem);
    overflow: hidden;
    box-shadow: var(--msk-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
    transition:
        box-shadow var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
        transform  var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
    block-size: 100%;
    display: flex;
    flex-direction: column;
}

.msk-product-slider__card-link:hover {
    box-shadow: var(--msk-shadow-lg, 0 10px 30px rgba(0,0,0,0.12));
    transform: translateY(-4px);
}

/* Card image */
.msk-product-slider__card-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--msk-color-surface-alt, #f6f6f6);
}

.msk-product-slider__card-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--msk-duration-slow, 400ms) var(--msk-ease-out, ease-out);
}

.msk-product-slider__card-link:hover .msk-product-slider__card-image img {
    transform: scale(1.05);
}

/* Badges */
.msk-product-slider__badge {
    position: absolute;
    top: var(--msk-space-3, 0.75rem);
    inset-inline-end: var(--msk-space-3, 0.75rem);
    padding: var(--msk-space-1, 0.25rem) var(--msk-space-3, 0.75rem);
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
    border-radius: var(--msk-radius-sm, 0.25rem);
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wide, 0.05em);
}

.msk-product-slider__badge--new {
    background: #fbbf24;
    color: #111;
}

.msk-product-slider__badge--sale {
    background: #a3b18a;
    color: #111;
}

/* Card info */
.msk-product-slider__card-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--msk-space-4, 1rem) var(--msk-space-5, 1.25rem);
    gap: var(--msk-space-3, 0.75rem);
}

.msk-product-slider__card-text {
    flex: 1;
    min-width: 0;
}

.msk-product-slider__card-title {
    font-size: var(--msk-font-size-base, 1rem);
    font-weight: 600;
    color: inherit;
    margin: 0 0 var(--msk-space-1, 0.25rem);
    line-height: var(--msk-leading-snug, 1.375);
}

.msk-product-slider__card-category {
    font-size: var(--msk-font-size-xs, 0.75rem);
    color: var(--msk-color-text-muted, #666);
}

.msk-product-slider__card-price {
    font-size: var(--msk-font-size-base, 1rem);
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
}

.msk-product-slider__card-price del {
    color: var(--msk-color-text-muted, #666);
    font-weight: 400;
    font-size: var(--msk-font-size-sm, 0.875rem);
}

.msk-product-slider__card-price ins {
    text-decoration: none;
}

/* ── Arrows ───────────────────────────────────────────────────────────────── */

.msk-product-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: none;
    border-radius: var(--msk-radius-full, 9999px);
    background: var(--msk-color-surface, #fff);
    box-shadow: var(--msk-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
    color: var(--msk-color-text-primary, #111);
    cursor: pointer;
    transition: box-shadow var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-product-slider__arrow:hover {
    box-shadow: var(--msk-shadow-lg, 0 10px 30px rgba(0,0,0,0.12));
}

.msk-product-slider__arrow--prev {
    inset-inline-start: calc(-1 * var(--msk-space-6, 1.5rem));
}

.msk-product-slider__arrow--next {
    inset-inline-end: calc(-1 * var(--msk-space-6, 1.5rem));
}

/* ── Dots ─────────────────────────────────────────────────────────────────── */

.msk-product-slider__dots {
    display: flex;
    justify-content: center;
    gap: var(--msk-space-2, 0.5rem);
    margin-block-start: var(--msk-space-8, 2rem);
}

.msk-product-slider__dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--msk-radius-full, 9999px);
    border: none;
    cursor: pointer;
    padding: 0;
    background: var(--msk-color-border, #e0e0e0);
    transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-product-slider__dot.is-active {
    background: var(--msk-color-text-primary, #111);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .msk-product-slider__arrow {
        display: none;
    }
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-product-slider__track {
        scroll-behavior: auto;
    }

    .msk-product-slider__card-link,
    .msk-product-slider__card-image img,
    .msk-product-slider__dot,
    .msk-product-slider__arrow {
        transition: none;
    }
}

/* ── profile-slider ── */
/*
 * Maple Profile Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Personal branding slider: gradient bg + overlaid portrait + bold headline
 * + description + dual CTAs + social icons. Crossfade transitions.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.msk-profile-slider {
    position: relative;
    inline-size: 100%;
    min-block-size: 500px;
    block-size: 85vh;
    overflow: hidden;
}

/* ── Slides ───────────────────────────────────────────────────────────────── */

.msk-profile-slider__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity    var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out),
        visibility var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out);
}

.msk-profile-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ── Left Content ─────────────────────────────────────────────────────────── */

.msk-profile-slider__content {
    padding: var(--msk-space-12, 3rem) var(--msk-space-10, 2.5rem) var(--msk-space-12, 3rem) var(--msk-space-16, 4rem);
    z-index: 2;
}

/* Headline */
.msk-profile-slider__headline {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
    font-weight: 900;
    font-style: italic;
    color: #fff;
    line-height: 1.15;
    text-transform: uppercase;
    margin: 0 0 var(--msk-space-6, 1.5rem);
    text-wrap: balance;
}

/* Description */
.msk-profile-slider__description {
    font-size: var(--msk-font-size-md, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--msk-leading-normal, 1.6);
    max-inline-size: 520px;
    margin-block-end: var(--msk-space-8, 2rem);
}

.msk-profile-slider__description p {
    margin: 0 0 var(--msk-space-2, 0.5rem);
}

.msk-profile-slider__description strong {
    color: #fff;
}

.msk-profile-slider__description em {
    color: #fff;
    font-style: italic;
}

/* CTA Buttons */
.msk-profile-slider__ctas {
    display: flex;
    gap: var(--msk-space-4, 1rem);
    flex-wrap: wrap;
    margin-block-end: var(--msk-space-8, 2rem);
}

.msk-profile-slider__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem);
    border-radius: var(--msk-radius-full, 9999px);
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wider, 0.1em);
    text-decoration: none;
    transition:
        background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        color      var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-profile-slider__cta--primary {
    background: #fff;
    color: inherit;
}

.msk-profile-slider__cta--primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

.msk-profile-slider__cta--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.msk-profile-slider__cta--secondary:hover {
    border-color: #fff;
}

/* Social Icons */
.msk-profile-slider__socials {
    display: flex;
    gap: var(--msk-space-4, 1rem);
}

.msk-profile-slider__social {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--msk-radius-full, 9999px);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.7);
    transition:
        color        var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-profile-slider__social:hover {
    color: #fff;
    border-color: #fff;
}

/* ── Right Portrait ───────────────────────────────────────────────────────── */

.msk-profile-slider__portrait {
    position: relative;
    block-size: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.msk-profile-slider__portrait img {
    max-block-size: 100%;
    inline-size: auto;
    object-fit: contain;
    object-position: bottom center;
    mix-blend-mode: luminosity;
    opacity: 0.7;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */

.msk-profile-slider__nav-next,
.msk-profile-slider__nav-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--msk-radius-full, 9999px);
    border: none;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    transition:
        background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-profile-slider__nav-next:hover,
.msk-profile-slider__nav-prev:hover {
    background: rgba(255, 255, 255, 0.25);
}

.msk-profile-slider__nav-next {
    inset-inline-end: var(--msk-space-6, 1.5rem);
}

.msk-profile-slider__nav-prev {
    inset-inline-start: var(--msk-space-6, 1.5rem);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {

    .msk-profile-slider {
        block-size: auto;
        min-block-size: 0;
    }

    .msk-profile-slider__slide {
        position: relative;
        grid-template-columns: 1fr;
        display: none;
    }

    .msk-profile-slider__slide.is-active {
        display: grid;
        position: relative;
    }

    .msk-profile-slider__content {
        padding: var(--msk-space-8, 2rem) var(--msk-space-6, 1.5rem);
        order: 2;
    }

    .msk-profile-slider__portrait {
        order: 1;
        max-block-size: 50vh;
    }

    .msk-profile-slider__headline {
        font-size: clamp(1.5rem, 6vw, 2.25rem);
    }

    .msk-profile-slider__description {
        font-size: var(--msk-font-size-base, 1rem);
    }

    .msk-profile-slider__nav-next,
    .msk-profile-slider__nav-prev {
        top: 30%;
    }
}

/* ── Editor ───────────────────────────────────────────────────────────────── */

.msk-profile-slider--editor {
    border: 1px dashed var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
    min-height: 120px;
}

.msk-profile-slide--editor {
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-4, 1rem);
    margin-block-end: var(--msk-space-2, 0.5rem);
    min-height: 80px;
}

.msk-profile-slide__editor-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msk-profile-slide__editor-headline {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    font-style: italic;
    text-transform: uppercase;
    white-space: pre-line;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.msk-profile-slide__editor-cta {
    display: inline-block;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 12px;
    padding: 2px 10px;
    margin-inline-end: 6px;
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-profile-slider__slide,
    .msk-profile-slider__cta,
    .msk-profile-slider__social,
    .msk-profile-slider__nav-next,
    .msk-profile-slider__nav-prev {
        transition: none;
    }
}

/* ── quote-slider ── */
/*
 * Maple Quote Slider — Styles
 */

/* Outer wrapper — accent background */
.msk-quote-slider { padding: var(--msk-space-4, 1rem); }
.msk-quote-slider--v2 { padding: 0; }

/* Dark card */
.msk-quote-slider__card { border-radius: var(--msk-radius-xl, 1.5rem); position: relative; inline-size: 100%; overflow: hidden; background: #8a1622; }

/* Slides */
.msk-quote-slider__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; visibility: hidden; transition: opacity var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out), visibility var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out); display: flex; align-items: flex-end; justify-content: space-between; }
.msk-quote-slider__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

.msk-quote-slider__overlay { position: absolute; inset: 0; pointer-events: none; }

/* Decorative SVG */
.msk-quote-slider__decor { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: 50%; block-size: 100%; pointer-events: none; opacity: 0.06; z-index: 0; color: inherit; }

/* Content — bottom-left */
.msk-quote-slider__content { position: relative; z-index: 2; padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); max-inline-size: 900px; }

.msk-quote-slider__attribution { font-size: var(--msk-font-size-sm, 0.875rem); margin: 0 0 var(--msk-space-4, 1rem); }

.msk-quote-slider__quote { font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.25; margin: 0; quotes: none; }

/* CTA — bottom-right */
.msk-quote-slider__cta-wrap { position: relative; z-index: 2; padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); align-self: flex-end; flex-shrink: 0; }
.msk-quote-slider__cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--msk-radius-full, 9999px); text-decoration: none; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-quote-slider__cta:hover { background: rgba(255,255,255,0.2); }

/* Nav — top-right arrows */
.msk-quote-slider__nav { position: absolute; z-index: 10; inset-block-start: var(--msk-space-8, 2rem); inset-inline-end: var(--msk-space-8, 2rem); display: flex; gap: var(--msk-space-2, 0.5rem); }

.msk-quote-slider__nav-btn { appearance: none; border: 1px solid rgba(246,246,246,0.3); background: rgba(246,246,246,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #f6f6f6; inline-size: 48px; block-size: 48px; border-radius: var(--msk-radius-full, 9999px); font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-quote-slider__nav-btn:hover { background: rgba(246,246,246,0.2); }

/* Mobile */
@media (max-width: 782px) {
    .msk-quote-slider__quote { font-size: clamp(1.25rem, 5vw, 2rem); }
    .msk-quote-slider__nav { inset-block-start: var(--msk-space-6, 1.5rem); inset-inline-end: var(--msk-space-6, 1.5rem); }
    .msk-quote-slider__nav-btn { inline-size: 40px; block-size: 40px; }
}

/* Editor */
.msk-quote-slider--editor { border-radius: var(--msk-radius-md, 0.5rem); min-height: 200px; padding: var(--msk-space-4, 1rem); }
.msk-quote-slide--editor-wrap { display: block; margin-block-end: var(--msk-space-2, 0.5rem); }
.msk-quote-slide--editor { border-radius: var(--msk-radius-md, 0.5rem); min-height: 160px; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; margin-block-end: var(--msk-space-2, 0.5rem); overflow: hidden; }
.msk-quote-slide__editor-overlay { position: absolute; inset: 0; border-radius: inherit; }
.msk-quote-slide__editor-content { position: relative; z-index: 1; padding: var(--msk-space-4, 1rem); display: flex; flex-direction: column; gap: 6px; }
.msk-quote-slide__editor-author { font-size: 11px; color: inherit; opacity: 0.92; font-style: italic; }
.msk-quote-slide__editor-quote { font-size: 15px; font-weight: 700; color: inherit; line-height: 1.3; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .msk-quote-slider__slide { transition: none; }
    .msk-quote-slider__nav-btn { transition: none; }
}

/* ── showcase-slider ── */
/*
 * Maple Showcase Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Split layout: left text (badge, category, headline, dots, thumbnails)
 * + right hero image. Dark gradient on left. Crossfade transitions.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Container ────────────────────────────────────────────────────────────── */

.msk-showcase-slider {
    position: relative;
    inline-size: 100%;
    min-block-size: 500px;
    block-size: 70vh;
    overflow: hidden;
    background: #1a1a1a;
}

/* ── Slides ───────────────────────────────────────────────────────────────── */

.msk-showcase-slider__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 45% 55%;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity    var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out),
        visibility var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out);
}

.msk-showcase-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ── Left Content Area ────────────────────────────────────────────────────── */

.msk-showcase-slider__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem) var(--msk-space-8, 2rem);
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    z-index: 2;
}

.msk-showcase-slider__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Badge pill */
.msk-showcase-slider__badge {
    display: inline-block;
    align-self: flex-start;
    padding: var(--msk-space-2, 0.5rem) var(--msk-space-4, 1rem);
    background: var(--msk-color-surface, #fff);
    color: var(--msk-color-text-primary, #111);
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wider, 0.1em);
    border-radius: var(--msk-radius-full, 9999px);
    margin-block-end: var(--msk-space-6, 1.5rem);
}

/* Category label */
.msk-showcase-slider__category {
    display: block;
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-widest, 0.15em);
    color: rgba(255, 255, 255, 0.6);
    margin-block-end: var(--msk-space-3, 0.75rem);
}

/* Headline */
.msk-showcase-slider__headline {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    line-height: var(--msk-leading-snug, 1.375);
    margin: 0 0 var(--msk-space-6, 1.5rem);
    text-wrap: balance;
}

.msk-showcase-slider__headline-link {
    color: inherit;
    text-decoration: none;
}

.msk-showcase-slider__headline-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Dot indicators */
.msk-showcase-slider__dots {
    display: flex;
    gap: var(--msk-space-2, 0.5rem);
    align-items: center;
}

.msk-showcase-slider__dot {
    display: block;
    block-size: 4px;
    inline-size: 12px;
    border-radius: var(--msk-radius-full, 9999px);
    background: rgba(255, 255, 255, 0.3);
    transition: inline-size var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out),
                background  var(--msk-duration-normal, 250ms) var(--msk-ease-out, ease-out);
}

.msk-showcase-slider__dot.is-active {
    inline-size: 32px;
    background: #fff;
}

/* ── Thumbnails ───────────────────────────────────────────────────────────── */

.msk-showcase-slider__thumbs {
    display: flex;
    gap: var(--msk-space-2, 0.5rem);
    margin-block-start: var(--msk-space-6, 1.5rem);
}

.msk-showcase-slider__thumb {
    display: block;
    inline-size: 90px;
    block-size: 90px;
    border-radius: var(--msk-radius-md, 0.5rem);
    overflow: hidden;
    transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
                box-shadow var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-showcase-slider__thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.msk-showcase-slider__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ── Right Hero Image ─────────────────────────────────────────────────────── */

.msk-showcase-slider__image {
    position: relative;
    overflow: hidden;
}

.msk-showcase-slider__image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.msk-showcase-slider__image a {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

/* ── Navigation Arrows ────────────────────────────────────────────────────── */

.msk-showcase-slider__nav {
    position: absolute;
    bottom: var(--msk-space-6, 1.5rem);
    inset-inline-end: var(--msk-space-6, 1.5rem);
    z-index: 3;
    display: flex;
    gap: var(--msk-space-2, 0.5rem);
}

.msk-showcase-slider__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--msk-radius-md, 0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    transition:
        background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-showcase-slider__nav-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {

    .msk-showcase-slider {
        block-size: auto;
        min-block-size: 0;
    }

    .msk-showcase-slider__slide {
        position: relative;
        grid-template-columns: 1fr;
        display: none;
    }

    .msk-showcase-slider__slide.is-active {
        display: grid;
        position: relative;
    }

    /* Image on top, content below */
    .msk-showcase-slider__image {
        aspect-ratio: 16 / 10;
    }

    .msk-showcase-slider__content {
        padding: var(--msk-space-6, 1.5rem);
    }

    .msk-showcase-slider__headline {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .msk-showcase-slider__thumbs {
        flex-wrap: wrap;
    }

    .msk-showcase-slider__thumb {
        inline-size: 70px;
        block-size: 70px;
    }

    .msk-showcase-slider__nav {
        position: relative;
        inset: auto;
        justify-content: center;
        padding: var(--msk-space-4, 1rem);
        background: #1a1a1a;
    }
}

/* ── Editor ───────────────────────────────────────────────────────────────── */

.msk-showcase-slider--editor {
    border: 1px dashed var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
    min-height: 120px;
}

.msk-showcase-slide--editor {
    border: 1px solid var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-3, 0.75rem);
    margin-block-end: var(--msk-space-2, 0.5rem);
    background: var(--msk-color-surface, #fff);
}

.msk-showcase-slide__editor-preview {
    display: flex;
    gap: var(--msk-space-3, 0.75rem);
    align-items: center;
}

.msk-showcase-slide__editor-img {
    inline-size: 80px;
    block-size: 50px;
    object-fit: cover;
    border-radius: var(--msk-radius-sm, 0.25rem);
    flex-shrink: 0;
}

.msk-showcase-slide__editor-placeholder {
    inline-size: 80px;
    block-size: 50px;
    background: #f0f0f1;
    border-radius: var(--msk-radius-sm, 0.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #525252;
    flex-shrink: 0;
}

.msk-showcase-slide__editor-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msk-showcase-slide__editor-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #525252;
    letter-spacing: 0.5px;
}

.msk-showcase-slide__editor-cat {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #525252;
}

.msk-showcase-slide__editor-headline {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-showcase-slider__slide,
    .msk-showcase-slider__dot,
    .msk-showcase-slider__thumb,
    .msk-showcase-slider__nav-btn {
        transition: none;
    }
}

/* ── slider ── */
/*
 * Slider Block Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * CSS scroll-snap based slider. No library.
 * Works without JS — arrows/dots are progressive enhancement.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Track ────────────────────────────────────────────────────────────────── */

.msk-slider {
    position: relative;
    overflow: hidden;
}

.msk-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.msk-slider__track::-webkit-scrollbar {
    display: none;
}

/* ── Slides ───────────────────────────────────────────────────────────────── */

.msk-slider__slide {
    scroll-snap-align: start;
    flex-shrink: 0;
    min-inline-size: 100%;
}

/* ── Editor Preview ───────────────────────────────────────────────────────── */

.msk-slider--editor {
    border: 1px dashed var(--msk-color-border, #ddd);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-4, 1rem);
    min-height: 200px;
}

.msk-slider--editor .msk-slider__track {
    scroll-snap-type: none;
    overflow-x: visible;
    flex-wrap: nowrap;
}

.msk-slider--editor .msk-slider__track .block-editor-inner-blocks {
    display: flex;
    gap: inherit;
    inline-size: 100%;
}

.msk-slider--editor .block-editor-block-list__layout {
    display: flex;
    gap: inherit;
}

.msk-slider--editor .block-editor-block-list__layout > * {
    flex: 1 0 0%;
    min-inline-size: 0;
}

/* ── Arrow Buttons ────────────────────────────────────────────────────────── */

.msk-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--msk-radius-full, 9999px);
    border: none;
    cursor: pointer;

    background: color-mix(in oklch, var(--msk-color-surface, #fff) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--msk-color-text-primary, #111);
    box-shadow: var(--msk-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));

    transition:
        background-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        box-shadow       var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        transform        var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-slider__arrow:hover {
    background: var(--msk-color-surface, #fff);
    box-shadow: var(--msk-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
    transform: translateY(-50%) scale(1.05);
}

.msk-slider__arrow:active {
    transform: translateY(-50%) scale(0.97);
}

.msk-slider__arrow--prev {
    inset-inline-start: var(--msk-space-4, 1rem);
}

.msk-slider__arrow--next {
    inset-inline-end: var(--msk-space-4, 1rem);
}

/* ── Dot Navigation ───────────────────────────────────────────────────────── */

.msk-slider__dots {
    display: flex;
    justify-content: center;
    gap: var(--msk-space-2, 0.5rem);
    padding-block-start: var(--msk-space-4, 1rem);
}

.msk-slider__dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--msk-radius-full, 9999px);
    border: none;
    cursor: pointer;
    padding: 0;

    background: var(--msk-color-border, #e0e0e0);
    transition:
        background-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        transform        var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-slider__dot:hover {
    background: var(--msk-color-text-muted, #666);
    transform: scale(1.2);
}

.msk-slider__dot.is-active {
    background: var(--msk-color-accent, #e94560);
    transform: scale(1.2);
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-slider__track {
        scroll-behavior: auto;
    }

    .msk-slider__arrow,
    .msk-slider__dot {
        transition: none;
    }
}

/* ── tab-slider ── */
/*
 * Maple Tab Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Full-viewport slider with text tab navigation along the bottom.
 * Crossfade transitions, responsive, reduced-motion safe.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-tab-slider { position: relative; inline-size: 100%; block-size: 100vh; block-size: 100svh; overflow: hidden; background: #111; }

/* ══════════════════════════════════════════════════════════════════════════════
   SLIDES
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-tab-slider__slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; visibility: hidden; transition: opacity var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out), visibility var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out); display: flex; flex-direction: column; justify-content: flex-end; }
.msk-tab-slider__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* Gradient overlay for text readability */
.msk-tab-slider__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.5) 100%); pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   CONTENT
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-tab-slider__content { position: relative; z-index: 2; padding: var(--msk-space-8, 2rem) var(--msk-space-8, 2rem) var(--msk-space-24, 6rem); max-inline-size: 700px; }

.msk-tab-slider__subtitle { font-size: var(--msk-font-size-base, 1rem); color: rgba(255,255,255,0.85); line-height: var(--msk-leading-normal, 1.6); margin: 0 0 var(--msk-space-8, 2rem); max-inline-size: 400px; }

.msk-tab-slider__title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 300; line-height: 1; color: #fff; margin: 0 0 var(--msk-space-5, 1.25rem); letter-spacing: -0.02em; }

.msk-tab-slider__description { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(255,255,255,0.7); line-height: var(--msk-leading-normal, 1.6); margin: 0; max-inline-size: 400px; }

/* ══════════════════════════════════════════════════════════════════════════════
   TAB NAVIGATION
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-tab-slider__tabs { position: absolute; z-index: 10; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; display: flex; align-items: stretch; }

.msk-tab-slider__tab { flex: 1; appearance: none; border: none; background: transparent; color: rgba(255,255,255,0.7); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 500; padding: var(--msk-space-5, 1.25rem) var(--msk-space-4, 1rem); cursor: pointer; transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out), background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); text-align: center; white-space: nowrap; }

.msk-tab-slider__tab:hover { color: #fff; }

.msk-tab-slider__tab.is-active { background: #fff; color: var(--msk-color-text-primary, #111); font-weight: 600; border-radius: var(--msk-radius-md, 0.5rem) var(--msk-radius-md, 0.5rem) 0 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .msk-tab-slider__title { font-size: clamp(2rem, 10vw, 3.5rem); }
    .msk-tab-slider__content { padding: var(--msk-space-6, 1.5rem) var(--msk-space-6, 1.5rem) var(--msk-space-20, 5rem); }
    .msk-tab-slider__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .msk-tab-slider__tab { font-size: var(--msk-font-size-xs, 0.75rem); padding: var(--msk-space-4, 1rem) var(--msk-space-3, 0.75rem); min-inline-size: max-content; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.msk-tab-slider--editor { border: 1px dashed var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-md, 0.5rem); min-height: 200px; padding: var(--msk-space-4, 1rem); }

.msk-tab-slide--editor { border: 1px solid var(--msk-color-border, #e0e0e0); border-radius: var(--msk-radius-md, 0.5rem); min-height: 140px; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; margin-block-end: var(--msk-space-2, 0.5rem); }
.msk-tab-slide__editor-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6) 100%); border-radius: inherit; }
.msk-tab-slide__editor-content { position: relative; z-index: 1; padding: var(--msk-space-4, 1rem); display: flex; flex-direction: column; gap: 4px; }
.msk-tab-slide__editor-subtitle { font-size: 10px; color: rgba(255,255,255,0.7); }
.msk-tab-slide__editor-title { font-size: 16px; font-weight: 300; color: #fff; }
.msk-tab-slide__editor-desc { font-size: 10px; color: rgba(255,255,255,0.65); max-inline-size: 200px; }

/* ══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .msk-tab-slider__slide { transition: none; }
    .msk-tab-slider__tab { transition: none; }
}

/* ── team-cta ── */
/*
 * Maple Team CTA — Styles
 */

/* Outer wrapper — accent background */
.msk-team-cta { padding: var(--msk-space-4, 1rem); }
.msk-team-cta--v2 { padding: 0; }

/* Dark card */
.msk-team-cta__card { border-radius: var(--msk-radius-xl, 1.5rem); padding: var(--msk-space-20, 5rem) var(--msk-space-8, 2rem); position: relative; overflow: hidden; color: #f6f6f6; }

/* Decorative SVG */
.msk-team-cta__decor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: currentColor; }

.msk-team-cta__inner { max-inline-size: 800px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--msk-space-6, 1.5rem); position: relative; z-index: 1; }

/* Headline */
.msk-team-cta__headline { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin: 0; }

/* Description */
.msk-team-cta__description { font-size: var(--msk-font-size-base, 1rem); color: rgba(246,246,246,0.92); line-height: var(--msk-leading-normal, 1.6); margin: 0; max-inline-size: 650px; }

/* Bar — avatars + divider + CTA */
.msk-team-cta__bar { display: flex; align-items: center; gap: var(--msk-space-5, 1.25rem); margin-block-start: var(--msk-space-4, 1rem); }

/* Experts label + avatars */
.msk-team-cta__experts { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); }

.msk-team-cta__experts-label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; }

/* Overlapping avatar stack */
.msk-team-cta__avatars { display: flex; align-items: center; }

.msk-team-cta__avatar { inline-size: 36px; block-size: 36px; border-radius: var(--msk-radius-full, 9999px); object-fit: cover; border: 2px solid rgba(246,246,246,0.3); margin-inline-start: -10px; }
.msk-team-cta__avatar:first-child { margin-inline-start: 0; }

.msk-team-cta__overflow { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border-radius: var(--msk-radius-full, 9999px); font-size: var(--msk-font-size-xs, 0.75rem); font-weight: 700; margin-inline-start: -10px; border: 2px solid rgba(246,246,246,0.3); }

/* Divider */
.msk-team-cta__divider { inline-size: 1px; block-size: 32px; background: rgba(246,246,246,0.25); flex-shrink: 0; }

/* CTA button */
.msk-team-cta__cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; border-radius: var(--msk-radius-full, 9999px); text-decoration: none; transition: transform var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-team-cta__cta:hover { transform: translateY(-1px); }

/* Mobile */
@media (max-width: 782px) {
    .msk-team-cta__bar { flex-direction: column; }
    .msk-team-cta__divider { inline-size: 40px; block-size: 1px; }
}

/* Editor */
.msk-team-cta--editor { border-radius: var(--msk-radius-md, 0.5rem); }
.msk-team-cta__editor-card { border-radius: var(--msk-radius-xl, 1.5rem); min-height: 180px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #f6f6f6; }
.msk-team-cta__editor-decor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.msk-team-cta__editor-inner { position: relative; z-index: 1; max-width: 800px; width: 100%; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--msk-space-4, 1rem); padding: var(--msk-space-10, 2.5rem) var(--msk-space-6, 1.5rem); }
.msk-team-cta__editor-headline { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.15; margin: 0; }
.msk-team-cta__editor-description { font-size: var(--msk-font-size-sm, 0.875rem); color: rgba(246,246,246,0.8); line-height: 1.6; margin: 0; max-width: 560px; }
.msk-team-cta__editor-bar { display: flex; align-items: center; gap: var(--msk-space-5, 1.25rem); flex-wrap: wrap; justify-content: center; }
.msk-team-cta__editor-experts { display: flex; align-items: center; gap: var(--msk-space-3, 0.75rem); }
.msk-team-cta__editor-experts-label { font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 700; }
.msk-team-cta__editor-avatars { display: flex; align-items: center; }
.msk-team-cta__editor-avatar { width: 36px; height: 36px; border-radius: 9999px; object-fit: cover; border: 2px solid rgba(246,246,246,0.3); margin-left: -10px; }
.msk-team-cta__editor-avatar:first-child { margin-left: 0; }
.msk-team-cta__editor-overflow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; font-size: 11px; font-weight: 700; margin-left: -10px; border: 2px solid rgba(246,246,246,0.3); }
.msk-team-cta__editor-divider { width: 1px; height: 32px; background: rgba(246,246,246,0.25); flex-shrink: 0; }
.msk-team-cta__editor-cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: 0.625rem 1.5rem; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; border-radius: 9999px; text-decoration: none; cursor: default; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .msk-team-cta__cta { transition: none; }
}

/* ── team-slider ── */
/*
 * Maple Team Slider — Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Team/testimonial slider: vertical counter, name+title+bio+quote+socials,
 * portrait with coloured bg, thumbnail nav strip, fade transitions.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* Outer wrapper — accent background */
.msk-team-slider {
    padding: var(--msk-space-4, 1rem);
}

/* v2: content-only (wrapper handled by Group blocks) */
.msk-team-slider--v2 { padding: 0; }

/* Dark card */
.msk-team-slider__card {
    position: relative;
    inline-size: 100%;
    min-block-size: 500px;
    overflow: hidden;
    border-radius: var(--msk-radius-xl, 1.5rem);
}

/* ── Slides ───────────────────────────────────────────────────────────────── */

.msk-team-slider__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    gap: var(--msk-space-6, 1.5rem);
    padding: var(--msk-space-10, 2.5rem);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity    var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out),
        visibility var(--msk-duration-slower, 600ms) var(--msk-ease-out, ease-out);
}

.msk-team-slider__slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ── Vertical Counter ─────────────────────────────────────────────────────── */

.msk-team-slider__counter {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    gap: var(--msk-space-2, 0.5rem);
    font-variant-numeric: tabular-nums;
    color: var(--msk-color-text-primary, #1a2744);
    align-self: start;
    padding-block-start: var(--msk-space-4, 1rem);
}

.msk-team-slider__counter-current {
    font-size: var(--msk-font-size-xl, 2rem);
    font-weight: 800;
}

.msk-team-slider__counter-sep {
    font-size: var(--msk-font-size-lg, 1.5rem);
    color: var(--msk-color-text-muted, #666);
}

.msk-team-slider__counter-total {
    font-size: var(--msk-font-size-xl, 2rem);
    font-weight: 300;
    color: var(--msk-color-text-muted, #666);
}

/* ── Text Content ─────────────────────────────────────────────────────────── */

.msk-team-slider__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline-end: var(--msk-space-8, 2rem);
}

.msk-team-slider__name {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--msk-color-text-primary, #1a2744);
    margin: 0 0 var(--msk-space-1, 0.25rem);
    line-height: 1.2;
}

.msk-team-slider__job-title {
    font-size: var(--msk-font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--msk-tracking-wider, 0.1em);
    color: var(--msk-color-text-muted, #666);
    margin: 0 0 var(--msk-space-5, 1.25rem);
}

.msk-team-slider__bio {
    font-size: var(--msk-font-size-sm, 0.875rem);
    color: var(--msk-color-text-primary, #1a2744);
    line-height: var(--msk-leading-normal, 1.6);
    margin-block-end: var(--msk-space-5, 1.25rem);
}

.msk-team-slider__bio p {
    margin: 0;
}

/* Social icons */
.msk-team-slider__socials {
    display: flex;
    gap: var(--msk-space-3, 0.75rem);
    margin-block-end: var(--msk-space-6, 1.5rem);
}

.msk-team-slider__social {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    color: var(--msk-color-text-primary, #1a2744);
    transition: color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-team-slider__social:hover {
    color: var(--msk-color-accent, #e94560);
}

/* CTA button */
.msk-team-slider__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem);
    background: var(--msk-color-text-primary, #1a2744);
    color: #fff;
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--msk-radius-md, 0.5rem);
    transition:
        background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        transform  var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
    margin-block-end: var(--msk-space-6, 1.5rem);
}

.msk-team-slider__cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

/* Quote block */
.msk-team-slider__quote {
    background: var(--msk-color-text-primary, #1a2744);
    color: #fff;
    padding: var(--msk-space-8, 2rem);
    margin: 0;
    border-radius: var(--msk-radius-lg, 1rem) var(--msk-radius-lg, 1rem) var(--msk-radius-lg, 1rem) 0;
}

.msk-team-slider__quote p {
    font-size: var(--msk-font-size-base, 1rem);
    font-weight: 700;
    font-style: italic;
    line-height: var(--msk-leading-snug, 1.375);
    margin: 0;
}

/* ── Portrait ─────────────────────────────────────────────────────────────── */

.msk-team-slider__portrait {
    border-radius: var(--msk-radius-lg, 1rem);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-block-size: 400px;
}

.msk-team-slider__portrait img {
    max-block-size: 100%;
    inline-size: auto;
    object-fit: contain;
    object-position: bottom center;
}

/* ── Thumbnail Navigation ─────────────────────────────────────────────────── */

.msk-team-slider__thumbs {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-2, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
}

.msk-team-slider__thumb {
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--msk-radius-md, 0.5rem);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: var(--msk-color-surface-alt, #f6f6f6);
    transition:
        border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out),
        transform    var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}

.msk-team-slider__thumb:hover {
    transform: scale(1.05);
}

.msk-team-slider__thumb.is-active {
    border-color: var(--msk-color-accent, #e94560);
}

.msk-team-slider__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {

    .msk-team-slider {
        min-block-size: 0;
    }

    .msk-team-slider__slide {
        position: relative;
        grid-template-columns: 1fr;
        display: none;
        padding: var(--msk-space-6, 1.5rem);
    }

    .msk-team-slider__slide.is-active {
        display: grid;
        position: relative;
    }

    .msk-team-slider__counter {
        writing-mode: horizontal-tb;
        transform: none;
        flex-direction: row;
        padding: 0;
        margin-block-end: var(--msk-space-4, 1rem);
    }

    .msk-team-slider__portrait {
        min-block-size: 300px;
        margin-block-end: var(--msk-space-6, 1.5rem);
    }

    .msk-team-slider__thumbs {
        position: relative;
        inset: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        padding: var(--msk-space-4, 1rem) 0;
    }

    .msk-team-slider__thumb {
        inline-size: 44px;
        block-size: 44px;
    }
}

/* ── Editor ───────────────────────────────────────────────────────────────── */

.msk-team-slider--editor {
    border: 1px dashed var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-2, 0.5rem);
    min-height: 100px;
}

.msk-team-slide--editor {
    border: 1px solid var(--msk-color-border, #e0e0e0);
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: var(--msk-space-3, 0.75rem);
    margin-block-end: var(--msk-space-2, 0.5rem);
    background: var(--msk-color-surface, #fff);
}

.msk-team-slide__editor-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msk-team-slide__editor-name {
    font-weight: 700;
    font-size: 14px;
}

.msk-team-slide__editor-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #525252;
}

.msk-team-slide__editor-cta {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #1a2744;
    padding: 2px 8px;
    border-radius: 3px;
    margin-top: 4px;
    align-self: flex-start;
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .msk-team-slider__slide,
    .msk-team-slider__thumb,
    .msk-team-slider__social,
    .msk-team-slider__cta {
        transition: none;
    }
}

/* ── testimonial-section ── */
/*
 * Maple Testimonial Section — Styles
 */

/* Outer wrapper — accent background */
.msk-testimonial-section { padding: var(--msk-space-4, 1rem); }
.msk-testimonial-section--v2 { padding: 0; }

/* Dark card */
.msk-testimonial-section__card { border-radius: var(--msk-radius-xl, 1.5rem); position: relative; display: flex; align-items: flex-end; justify-content: space-between; background-size: cover; background-position: center; overflow: hidden; }

.msk-testimonial-section__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.45) 100%); pointer-events: none; }

/* Decorative SVG */
.msk-testimonial-section__decor { position: absolute; top: 0; right: 0; width: 50%; height: 100%; pointer-events: none; opacity: 0.1; color: #fff; z-index: 1; }

.msk-testimonial-section__content { position: relative; z-index: 2; padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); max-inline-size: 900px; }

.msk-testimonial-section__attribution { font-size: var(--msk-font-size-sm, 0.875rem); margin: 0 0 var(--msk-space-4, 1rem); }

.msk-testimonial-section__quote { font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.25; margin: 0; quotes: none; }

/* CTA — bottom-right */
.msk-testimonial-section__cta-wrap { position: relative; z-index: 2; padding: var(--msk-space-10, 2.5rem) var(--msk-space-8, 2rem); align-self: flex-end; flex-shrink: 0; }

.msk-testimonial-section__cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem); font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--msk-radius-full, 9999px); text-decoration: none; transition: background var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out); }
.msk-testimonial-section__cta:hover { background: rgba(255,255,255,0.2); }

/* Mobile */
@media (max-width: 782px) {
    .msk-testimonial-section { flex-direction: column; align-items: flex-start; }
    .msk-testimonial-section__quote { font-size: clamp(1.25rem, 5vw, 2rem); }
    .msk-testimonial-section__cta-wrap { padding-block-start: 0; }
}

/* Editor */
.msk-testimonial-section--editor { border-radius: var(--msk-radius-md, 0.5rem); }
.msk-testimonial-section__editor-card { border-radius: var(--msk-radius-xl, 1.5rem); min-height: 220px; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; justify-content: space-between; overflow: hidden; }
.msk-testimonial-section__editor-decor { position: absolute; top: 0; right: 0; width: 50%; height: 100%; pointer-events: none; opacity: 0.12; color: #fff; z-index: 1; }
.msk-testimonial-section__editor-content { position: relative; z-index: 2; padding: var(--msk-space-6, 1.5rem) var(--msk-space-8, 2rem); max-width: 640px; display: flex; flex-direction: column; gap: 6px; }
.msk-testimonial-section__editor-attribution { font-size: var(--msk-font-size-sm, 0.875rem); margin: 0; }
.msk-testimonial-section__editor-quote { font-size: clamp(1.125rem, 2.5vw, 1.625rem); font-weight: 700; line-height: 1.3; margin: 0; quotes: none; }
.msk-testimonial-section__editor-cta-wrap { position: relative; z-index: 2; padding: var(--msk-space-6, 1.5rem) var(--msk-space-8, 2rem); align-self: flex-end; flex-shrink: 0; }
.msk-testimonial-section__editor-cta { display: inline-flex; align-items: center; gap: var(--msk-space-2, 0.5rem); padding: 0.625rem 1.25rem; font-size: var(--msk-font-size-sm, 0.875rem); font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 9999px; cursor: default; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .msk-testimonial-section__cta { transition: none; }
}