/*
 * 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.
 */

/* ── 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; }

/* ── Square Cover Helper ───────────────────────────────────────────── */
/*
 * WP 6.9 stopped emitting `aspect-ratio` inline when core/cover has an
 * `aspectRatio` attribute, so patterns that want a square cover need an
 * explicit CSS hook. The cover-grid pattern applies `.msk-square-cover`
 * to each cover to guarantee 1:1 proportions regardless of theme.
 */
.wp-block-cover.msk-square-cover { aspect-ratio: 1 / 1; }

/* ── 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; }
}

/* ── Maple Forms integration — distinctive overrides ─────────────────
 * Base layout / reset comes from inc/css/maple-form-base.css (scoped
 * to `.msk-has-form`, enqueued automatically for every form-bearing
 * block). These rules add only what makes contact-collaborate distinct:
 * underlined inputs and the accent-red button. */
.msk-contact-collab .maple-form__input,
.msk-contact-collab .maple-form__input--textarea {
    padding: var(--msk-space-2, 0.5rem) 0;
    font-size: var(--msk-font-size-sm, 0.875rem);
    background: transparent;
    border: none;
    border-radius: 0;
    border-block-end: 1px solid rgba(0,0,0,0.4);
    outline: none;
    transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}
.msk-contact-collab .maple-form__input:focus,
.msk-contact-collab .maple-form__input--textarea:focus { border-color: rgba(0,0,0,0.7); }
.msk-contact-collab .maple-form__choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--msk-space-2, 0.5rem) var(--msk-space-6, 1.5rem); }
.msk-contact-collab .maple-form__button {
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-8, 2rem);
    color: #fff;
    background: #8a1622;
    border-radius: var(--msk-radius-md, 0.5rem);
}

/* ── 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; }
}

/* ── Maple Forms integration — distinctive overrides ─────────────────
 * White-bg inputs with rounded corners + accent-coloured CTA. */
.msk-contact-hub .maple-form__input,
.msk-contact-hub .maple-form__input--textarea,
.msk-contact-hub .maple-form__input--select {
    padding: var(--msk-space-3, 0.75rem);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: var(--msk-radius-md, 0.5rem);
}
.msk-contact-hub .maple-form__input--textarea { min-block-size: 100px; }
.msk-contact-hub .maple-form__button {
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem);
    color: #fff;
    border-radius: var(--msk-radius-md, 0.5rem);
}

/* ── 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; }
}

/* ── Maple Forms integration — distinctive overrides ─────────────────
 * Baseline from inc/css/maple-form-base.css; this adds contact-section's
 * glass-on-dark look. */
.msk-contact-section .maple-form__input,
.msk-contact-section .maple-form__input--textarea {
    padding: var(--msk-space-4, 1rem);
    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);
}
.msk-contact-section .maple-form__input::placeholder,
.msk-contact-section .maple-form__input--textarea::placeholder { color: rgba(255,255,255,0.65); }
.msk-contact-section .maple-form__input:focus,
.msk-contact-section .maple-form__input--textarea:focus { border-color: rgba(255,255,255,0.6); }
.msk-contact-section .maple-form__input--textarea { min-block-size: 120px; }
.msk-contact-section .maple-form__button {
    inline-size: 100%;
    padding: var(--msk-space-4, 1rem);
    color: inherit;
    border-radius: var(--msk-radius-md, 0.5rem);
}

/* ── 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;
    }
}

/* ── feature-trio ── */
/*
 * Maple Feature Trio — Styles
 *
 * Three-pillar value-props row. Layout collapses 3→2→1 columns as the
 * viewport narrows. Colours are driven by CSS custom properties set
 * inline in render.php from the block attributes — overrideable per
 * page via the wrapper's style attribute.
 */

.msk-feature-trio {
    --msk-trio-accent:        #2C414D;
    --msk-trio-card-bg:       #e8eef1;
    --msk-trio-card-text:     #1f2937;
    --msk-trio-card-heading:  #1a2930;

    padding-block: var(--msk-space-12, 3rem);
    padding-inline: var(--msk-space-6, 1.5rem);
}

.msk-feature-trio__inner {
    max-inline-size: 1200px;
    margin-inline: auto;
}

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

.msk-feature-trio__header {
    text-align: center;
    margin-block-end: var(--msk-space-10, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-3, 0.75rem);
}

.msk-feature-trio__eyebrow {
    margin: 0;
    color: var(--msk-trio-accent);
    font-size: var(--msk-font-size-sm, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.msk-feature-trio__headline {
    margin: 0;
    color: inherit;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.msk-feature-trio__description {
    margin: 0 auto;
    max-inline-size: 60ch;
    font-size: var(--msk-font-size-base, 1rem);
    line-height: 1.6;
    opacity: 0.85;
}

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

.msk-feature-trio__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--msk-space-6, 1.5rem);
}

.msk-feature-trio--cols-2 .msk-feature-trio__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 800px;
    margin-inline: auto;
}

.msk-feature-trio--cols-1 .msk-feature-trio__grid {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 480px;
    margin-inline: auto;
}

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

.msk-feature-trio__card {
    padding: var(--msk-space-6, 1.5rem);
    background-color: var(--msk-trio-card-bg);
    color: var(--msk-trio-card-text);
    border-radius: var(--msk-radius-lg, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-3, 0.75rem);
}

.msk-feature-trio__card-title {
    margin: 0;
    color: var(--msk-trio-card-heading);
    font-size: var(--msk-font-size-lg, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
}

.msk-feature-trio__card-desc {
    margin: 0;
    color: inherit;
    font-size: var(--msk-font-size-base, 1rem);
    line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .msk-feature-trio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .msk-feature-trio--cols-3 .msk-feature-trio__grid > .msk-feature-trio__card:nth-child(3) {
        grid-column: 1 / -1;
        max-inline-size: 500px;
        justify-self: center;
        inline-size: 100%;
    }
}

@media (max-width: 600px) {
    .msk-feature-trio__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .msk-feature-trio--cols-3 .msk-feature-trio__grid > .msk-feature-trio__card:nth-child(3) {
        grid-column: auto;
        max-inline-size: none;
    }
}

/* ── Reduced motion (no animations to suppress, but kept for parity) — */

@media (prefers-reduced-motion: reduce) {
    .msk-feature-trio__card { 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; }
}

/* ── Maple Forms integration — distinctive overrides ─────────────────
 * Coloured-border inputs (set inline in render.php via style attr) +
 * uppercase rounded CTA. */
.msk-footer-contact .maple-form__input,
.msk-footer-contact .maple-form__input--textarea {
    padding: var(--msk-space-3, 0.75rem);
    color: #222;
    background: #fff;
    border: 1px solid;
    border-radius: var(--msk-radius-md, 0.5rem);
}
.msk-footer-contact .maple-form__input:focus,
.msk-footer-contact .maple-form__input--textarea:focus {
    box-shadow: 0 0 0 2px rgba(239,68,68,0.15);
}
.msk-footer-contact .maple-form__input--textarea { min-block-size: 100px; }
.msk-footer-contact .maple-form__button {
    inline-size: 100%;
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem);
    font-weight: 700;
    color: #fff;
    border-radius: var(--msk-radius-md, 0.5rem);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── 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; }
}

/* ── 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; }
}

/* ── Maple Forms integration — distinctive overrides ─────────────────
 * Two variants per block: `--inline` (hero pill email + CTA) and
 * `--card` (rounded stacked form with accent button). */
.msk-newsletter-landing--inline .maple-form__input {
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-4, 1rem);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: var(--msk-radius-full, 9999px);
}
.msk-newsletter-landing--inline .maple-form__button {
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem);
    font-weight: 700;
    border-radius: var(--msk-radius-full, 9999px);
}
.msk-newsletter-landing--card .maple-form__input,
.msk-newsletter-landing--card .maple-form__input--select {
    padding: var(--msk-space-3, 0.75rem);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: var(--msk-radius-md, 0.5rem);
}
.msk-newsletter-landing--card .maple-form__button {
    inline-size: 100%;
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem);
    color: #fff;
    border-radius: var(--msk-radius-md, 0.5rem);
}

/* ── 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; }
}

/* ── Maple Forms integration — distinctive overrides ─────────────────
 * Underlined inputs + outlined uppercase CTA. */
.msk-newsletter-minimal .maple-form__input {
    padding: var(--msk-space-3, 0.75rem) 0;
    background: transparent;
    border: none;
    border-radius: 0;
    border-block-end: 1px solid rgba(0,0,0,0.25);
    transition: border-color var(--msk-duration-fast, 150ms) var(--msk-ease-out, ease-out);
}
.msk-newsletter-minimal .maple-form__input:focus { border-color: rgba(0,0,0,0.6); }
.msk-newsletter-minimal .maple-form__button {
    padding: var(--msk-space-4, 1rem) var(--msk-space-10, 2.5rem);
    color: inherit;
    background: transparent;
    border: 1.5px solid rgba(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.msk-newsletter-minimal .maple-form__button:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.5);
    opacity: 1;
}

/* ── 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; }
}

/* ── Maple Forms integration — distinctive overrides ─────────────────
 * Pill-container look is specific to the block's native markup. For
 * Maple Forms' more conventional vertical layout we fall back to
 * rounded single-email form; visitors still get the branded look. */
.msk-newsletter-section .maple-form__input {
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-4, 1rem);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: var(--msk-radius-full, 9999px);
    max-inline-size: 520px;
}
.msk-newsletter-section .maple-form__button {
    padding: var(--msk-space-3, 0.75rem) var(--msk-space-6, 1.5rem);
    font-weight: 700;
    color: #fff;
    border-radius: var(--msk-radius-full, 9999px);
}

/* ── slider-image ── */
/**
 * Maple Image Slider — Base + Variant Styles
 *
 * Base layout for the slider track, slides, overlay, content, and the three
 * navigation modes (arrows / dots / tabs). Pattern-specific variants
 * (.msk-variant-hero, -cinematic, -immersive, etc.) are appended below.
 */

/* ── Base wrapper & track ──────────────────────────────────────────── */
.msk-slider-image {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
}

.msk-slider-image__track {
	position: relative;
	display: block;
	width: 100%;
}

.msk-slider-image__slide {
	position: relative;
	width: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: #1a1a2e;
}

.msk-slider-image__slide.is-active {
	display: flex;
}

/* Caption vertical alignment — middle is the base flexbox default. Top
   pins content to the top of the slide; bottom pins it to the bottom and
   adds extra padding so it stays clear of the dots nav (which sits at
   bottom: 1rem absolutely positioned over the slide). */
.msk-slider-image__slide--valign-top    { align-items: flex-start; }
.msk-slider-image__slide--valign-middle { align-items: center; }
.msk-slider-image__slide--valign-bottom { align-items: flex-end; }

.msk-slider-image__slide--valign-bottom .msk-slider-image__content {
	padding-bottom: 3rem;
}

.msk-slider-image__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.msk-slider-image__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.msk-slider-image__content {
	position: relative;
	z-index: 2;
	max-width: min( 720px, 80% );
	padding: 2rem;
	text-align: center;
}

.msk-slider-image__subhead {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.msk-slider-image__headline {
	margin: 0 0 1rem;
	font-size: clamp( 1.75rem, 4vw, 3rem );
	font-weight: 700;
	line-height: 1.15;
}

.msk-slider-image__cta {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: #ffffff;
	color: #1a1a2e;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	transition: transform 0.15s ease;
}

.msk-slider-image__cta:hover,
.msk-slider-image__cta:focus-visible {
	transform: translateY( -1px );
}

/* ── Arrows ────────────────────────────────────────────────────────── */
.msk-slider-image__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.msk-slider-image__arrow:hover,
.msk-slider-image__arrow:focus-visible {
	background-color: rgba( 0, 0, 0, 0.85 );
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.msk-slider-image__arrow--prev { left: 1rem; }
.msk-slider-image__arrow--next { right: 1rem; }

/* ── Dots ──────────────────────────────────────────────────────────── */
.msk-slider-image__dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX( -50% );
	display: flex;
	gap: 0.5rem;
	z-index: 3;
}

.msk-slider-image__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 0;
	background-color: rgba( 255, 255, 255, 0.5 );
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.msk-slider-image__dot.is-active {
	background-color: #ffffff;
	transform: scale( 1.2 );
}

.msk-slider-image__dot:hover,
.msk-slider-image__dot:focus-visible {
	background-color: #ffffff;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.msk-slider-image__tabs {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
}

.msk-slider-image__tab {
	padding: 0.5rem 1rem;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.msk-slider-image__tab.is-active {
	background-color: #1a1a2e;
	color: #ffffff;
	border-color: #1a1a2e;
}

.msk-slider-image__tab:hover,
.msk-slider-image__tab:focus-visible {
	outline: 2px solid #1a1a2e;
	outline-offset: 2px;
}

/* When nav is "tabs" we move tabs INSIDE the slider region: stack below the track. */
.msk-slider-image--nav-tabs {
	border-radius: 1rem;
	overflow: visible;
}

.msk-slider-image--nav-tabs .msk-slider-image__track {
	border-radius: 1rem;
	overflow: hidden;
}

/* ── Editor preview ────────────────────────────────────────────────── */
.msk-slider-image--editor .msk-slider-image__slide {
	display: flex; /* show all slides stacked in editor */
	margin-bottom: 0.5rem;
	min-height: 200px;
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.msk-slider-image__cta,
	.msk-slider-image__dot,
	.msk-slider-image__tab {
		transition: none;
	}
}

/* ──────────────────────────────────────────────────────────────────── */
/* Pattern variants — keyed off wrapper className applied by patterns.   */
/* ──────────────────────────────────────────────────────────────────── */

/* Default (.msk-variant-default) — no overrides; uses base styles. */

/* Hero variant (large headlines, magazine-style chrome). */
.msk-variant-hero .msk-slider-image__slide { min-height: 70vh; }
.msk-variant-hero .msk-slider-image__headline { font-size: clamp( 2.5rem, 6vw, 4.5rem ); letter-spacing: -0.02em; }
.msk-variant-hero .msk-slider-image__subhead { font-size: 0.875rem; }

/* Hero counter chrome — populated by inline pattern script via engine onChange. */
.msk-variant-hero .msk-hero-counter {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	z-index: 4;
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	color: #fff;
	font-family: monospace;
	font-size: 1rem;
	pointer-events: none;
}
.msk-variant-hero .msk-hero-counter__current { font-size: 2rem; font-weight: 700; }
.msk-variant-hero .msk-hero-counter__total   { opacity: 0.6; }
.msk-variant-hero .msk-hero-counter__next-label {
	margin-left: 1.5rem;
	font-family: inherit;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Cinematic variant (full-bleed, dark, dramatic typography). */
.msk-variant-cinematic .msk-slider-image__slide { min-height: 80vh; }
.msk-variant-cinematic .msk-slider-image__headline { font-size: clamp( 2.75rem, 7vw, 5rem ); font-weight: 800; }
.msk-variant-cinematic .msk-slider-image { border-radius: 0; }

/* Immersive variant (deep purple ambience, overlay heavy). */
.msk-variant-immersive .msk-slider-image__slide { min-height: 75vh; background-color: #1a1040; }
.msk-variant-immersive .msk-slider-image__headline { font-size: clamp( 2rem, 5vw, 3.75rem ); }

/* Page variant (multi-section feel with breathing room). */
.msk-variant-page .msk-slider-image__slide { min-height: 65vh; }
.msk-variant-page .msk-slider-image__content { max-width: min( 900px, 90% ); }

/* Showcase variant (product-image gallery with thumbnails-like dots). */
.msk-variant-showcase .msk-slider-image__slide { min-height: 60vh; }

/* Tab variant (image carousel with prominent tab nav). */
.msk-variant-tab .msk-slider-image__slide { min-height: 50vh; }
.msk-variant-tab .msk-slider-image__tabs { padding: 1rem; background-color: transparent; }

/* Comparison split variant (image slider sized for half-width column). */
.msk-variant-comparison-split .msk-slider-image__slide { min-height: 55vh; }
.msk-variant-comparison-split .msk-slider-image__content { padding: 1.25rem; max-width: 90%; }

/* Square slider variant — split layout with 1:1 image frames. The
   render.php inline `min-height: Nvh` rule is reset to 0 so aspect-ratio
   takes over; width = 100% of the column, height = width (square). When
   columns stack on mobile, the column becomes full-width and the slide
   stays square (full screen width × full screen width). */
.msk-variant-square-slider .msk-slider-image__slide {
	min-height: 0;
	height: auto;
	aspect-ratio: 1 / 1;
}
.msk-variant-square-slider .msk-slider-image__content { padding: 1.25rem; max-width: 90%; }

/* ── slider-post ── */
/**
 * Maple Post Slider — Base + Variant Styles
 *
 * Card carousel of WP posts. Variants reshape the same block:
 *  - msk-variant-article-magazine: featured-left + 2x2 grid (CSS Grid).
 *  - msk-variant-team:             portrait-style team-member cards.
 */

/* ── Base wrapper & track ──────────────────────────────────────────── */
.msk-slider-post {
	position: relative;
	padding: 1rem;
}

.msk-slider-post__heading {
	margin: 0 0 1.5rem;
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	font-weight: 700;
}

.msk-slider-post__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat( var( --msk-per-view, 3 ), 1fr );
	gap: 1.5rem;
}

.msk-slider-post--per-1 .msk-slider-post__track { --msk-per-view: 1; }
.msk-slider-post--per-2 .msk-slider-post__track { --msk-per-view: 2; }
.msk-slider-post--per-3 .msk-slider-post__track { --msk-per-view: 3; }
.msk-slider-post--per-4 .msk-slider-post__track { --msk-per-view: 4; }
.msk-slider-post--per-5 .msk-slider-post__track { --msk-per-view: 5; }

@media ( max-width: 768px ) {
	.msk-slider-post__track { grid-template-columns: 1fr; }
}

.msk-slider-post__slide {
	display: block;
	background-color: #ffffff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.msk-slider-post__slide:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.1 );
}

.msk-slider-post__card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.msk-slider-post__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.msk-slider-post__body {
	padding: 1rem 1.25rem 1.25rem;
}

.msk-slider-post__date {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 0.5rem;
}

.msk-slider-post__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	line-height: 1.3;
}

.msk-slider-post__excerpt {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.8;
}

/* ── Arrows ────────────────────────────────────────────────────────── */
.msk-slider-post__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	cursor: pointer;
	z-index: 2;
}

.msk-slider-post__arrow--prev { left: -20px; }
.msk-slider-post__arrow--next { right: -20px; }

/* ── Dots & tabs ───────────────────────────────────────────────────── */
.msk-slider-post__dots,
.msk-slider-post__tabs {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

.msk-slider-post__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 0;
	background-color: rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
	padding: 0;
}

.msk-slider-post__dot.is-active {
	background-color: #1a1a2e;
	transform: scale( 1.2 );
}

.msk-slider-post__tab {
	padding: 0.5rem 1rem;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 999px;
	background-color: transparent;
	font-size: 0.875rem;
	cursor: pointer;
}

.msk-slider-post__tab.is-active {
	background-color: #1a1a2e;
	color: #ffffff;
	border-color: #1a1a2e;
}

/* ── Editor preview ────────────────────────────────────────────────── */
.msk-slider-post--editor {
	border: 1px dashed rgba( 0, 0, 0, 0.2 );
	background-color: rgba( 0, 0, 0, 0.02 );
}

/* ──────────────────────────────────────────────────────────────────── */
/* Pattern variants                                                      */
/* ──────────────────────────────────────────────────────────────────── */

/* Article magazine variant — featured-left + 2x2 grid via CSS Grid.
   First slide spans 2 rows on the left; slides 2-5 form a 2x2 grid
   on the right. All 5 slides remain visible (slider-post defaults to
   display:block; the engine only toggles is-active for ARIA cues). */
.msk-variant-article-magazine .msk-slider-post__track {
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.msk-variant-article-magazine .msk-slider-post__slide:first-child {
	grid-column: 1 / 2;
	grid-row: 1 / span 2;
}
.msk-variant-article-magazine .msk-slider-post__slide:first-child .msk-slider-post__thumb {
	aspect-ratio: 4 / 5;
	height: 100%;
}
.msk-variant-article-magazine .msk-slider-post__slide:first-child .msk-slider-post__title {
	font-size: clamp( 1.5rem, 3vw, 2rem );
}
@media ( max-width: 768px ) {
	.msk-variant-article-magazine .msk-slider-post__track {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.msk-variant-article-magazine .msk-slider-post__slide:first-child {
		grid-column: auto;
		grid-row: auto;
	}
}

/* Team variant — circular portraits, centered. */
.msk-variant-team .msk-slider-post__slide {
	background-color: transparent;
	box-shadow: none;
	text-align: center;
}
.msk-variant-team .msk-slider-post__thumb {
	width: 160px;
	height: 160px;
	border-radius: 999px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}
.msk-variant-team .msk-slider-post__title { margin-top: 1rem; }
.msk-variant-team .msk-slider-post__excerpt { font-style: italic; }
.msk-variant-team .msk-slider-post__date { display: none; }

/* ── slider-product ── */
/**
 * Maple Product Slider — Base + Variant Styles
 *
 * Card carousel of WooCommerce products. Mirrors slider-post structure
 * (per-view grid + same nav modes) so variants stay consistent.
 */

.msk-slider-product {
	position: relative;
	padding: 1rem;
}

.msk-slider-product__header {
	margin-bottom: 1.5rem;
}

.msk-slider-product__heading {
	margin: 0 0 0.25rem;
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	font-weight: 700;
}

.msk-slider-product__subheading {
	margin: 0;
	opacity: 0.75;
	font-size: 1rem;
}

.msk-slider-product__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat( var( --msk-per-view, 3 ), 1fr );
	gap: 1.5rem;
}

.msk-slider-product--per-1 .msk-slider-product__track { --msk-per-view: 1; }
.msk-slider-product--per-2 .msk-slider-product__track { --msk-per-view: 2; }
.msk-slider-product--per-3 .msk-slider-product__track { --msk-per-view: 3; }
.msk-slider-product--per-4 .msk-slider-product__track { --msk-per-view: 4; }
.msk-slider-product--per-5 .msk-slider-product__track { --msk-per-view: 5; }

@media ( max-width: 768px ) {
	.msk-slider-product__track { grid-template-columns: 1fr; }
}

.msk-slider-product__slide {
	display: block;
	background-color: #ffffff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.msk-slider-product__slide:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.1 );
}

.msk-slider-product__card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.msk-slider-product__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.msk-slider-product__body {
	padding: 1rem 1.25rem 1.25rem;
}

.msk-slider-product__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	line-height: 1.3;
}

.msk-slider-product__price {
	font-weight: 700;
	font-size: 1rem;
}

.msk-slider-product__price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 0.5rem;
}

/* ── Arrows / dots / tabs ──────────────────────────────────────────── */
.msk-slider-product__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	cursor: pointer;
	z-index: 2;
}

.msk-slider-product__arrow--prev { left: -20px; }
.msk-slider-product__arrow--next { right: -20px; }

.msk-slider-product__dots,
.msk-slider-product__tabs {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

.msk-slider-product__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 0;
	background-color: rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
	padding: 0;
}

.msk-slider-product__dot.is-active {
	background-color: #1a1a2e;
	transform: scale( 1.2 );
}

.msk-slider-product__tab {
	padding: 0.5rem 1rem;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 999px;
	background-color: transparent;
	font-size: 0.875rem;
	cursor: pointer;
}

.msk-slider-product__tab.is-active {
	background-color: #1a1a2e;
	color: #ffffff;
	border-color: #1a1a2e;
}

/* ── Editor preview ────────────────────────────────────────────────── */
.msk-slider-product--editor {
	border: 1px dashed rgba( 0, 0, 0, 0.2 );
	background-color: rgba( 0, 0, 0, 0.02 );
}

/* ──────────────────────────────────────────────────────────────────── */
/* Pattern variants                                                      */
/* ──────────────────────────────────────────────────────────────────── */

/* Basic variant — minimal grid (default look). */
.msk-variant-product-basic .msk-slider-product__title { font-size: 1rem; }

/* Advanced variant — denser grid, larger price, hover lift on image. */
.msk-variant-product-advanced .msk-slider-product__slide { padding: 0.5rem; }
.msk-variant-product-advanced .msk-slider-product__title { font-size: 0.9375rem; }
.msk-variant-product-advanced .msk-slider-product__price { font-size: 1.125rem; }

/* ── slider-text ── */
/**
 * Maple Text Slider — Base + Variant Styles
 */

/* ── Base wrapper & track ──────────────────────────────────────────── */
.msk-slider-text {
	position: relative;
	border-radius: 1rem;
	padding: 2rem;
}

.msk-slider-text__track {
	position: relative;
	display: block;
}

.msk-slider-text__slide {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 1rem;
	text-align: center;
}

.msk-slider-text__slide.is-active {
	display: flex;
}

.msk-slider-text__portrait {
	display: none; /* opt-in via variant CSS */
	width: 96px;
	height: 96px;
	border-radius: 999px;
	object-fit: cover;
}

.msk-slider-text__quote {
	margin: 0;
	max-width: 720px;
	font-size: clamp( 1.125rem, 2vw, 1.5rem );
	line-height: 1.5;
	font-style: italic;
}

.msk-slider-text__quote p {
	margin: 0;
}

.msk-slider-text__byline {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
}

.msk-slider-text__author {
	font-weight: 700;
}

.msk-slider-text__role {
	opacity: 0.75;
}

.msk-slider-text__cta {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	background-color: currentColor;
	font-weight: 700;
	text-decoration: none;
}

.msk-slider-text__cta::before {
	content: '';
}

/* ── Arrows ────────────────────────────────────────────────────────── */
.msk-slider-text__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 0, 0, 0, 0.5 );
	color: #fff;
	font-size: 1.25rem;
	cursor: pointer;
	z-index: 2;
}

.msk-slider-text__arrow--prev { left: 0.5rem; }
.msk-slider-text__arrow--next { right: 0.5rem; }

/* ── Dots ──────────────────────────────────────────────────────────── */
.msk-slider-text__dots {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1rem;
}

.msk-slider-text__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 0;
	background-color: rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
	padding: 0;
}

.msk-slider-text__dot.is-active {
	background-color: currentColor;
	transform: scale( 1.2 );
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.msk-slider-text__tabs {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1rem;
}

.msk-slider-text__tab {
	padding: 0.5rem 1rem;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.msk-slider-text__tab.is-active {
	background-color: currentColor;
}

/* ── Editor preview: stack all slides for editability ──────────────── */
.msk-slider-text--editor .msk-slider-text__slide {
	display: flex;
	margin-bottom: 0.5rem;
	border-bottom: 1px dashed rgba( 0, 0, 0, 0.1 );
}

/* ──────────────────────────────────────────────────────────────────── */
/* Pattern variants                                                      */
/* ──────────────────────────────────────────────────────────────────── */

/* Quote variant — testimonial cards on Maple red. */
.msk-variant-quote .msk-slider-text {
	background-color: #8a1622;
	color: #ffffff;
}
.msk-variant-quote .msk-slider-text__quote { font-size: clamp( 1.25rem, 2.5vw, 1.75rem ); }

/* Profile variant — opt in to portrait, cleaner card. */
.msk-variant-profile .msk-slider-text {
	background-color: #f5ebe0;
	color: #1a1a2e;
}
.msk-variant-profile .msk-slider-text__portrait {
	display: block;
}
.msk-variant-profile .msk-slider-text__quote { font-style: normal; font-size: clamp( 1.125rem, 2vw, 1.375rem ); }

/* Editorial variant — bolder typography, beige background. */
.msk-variant-editorial .msk-slider-text {
	background-color: #f5ebe0;
	color: #1a1a2e;
}
.msk-variant-editorial .msk-slider-text__quote {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	font-style: normal;
	font-weight: 600;
}

/* ── 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; }
}

/* ── 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; }
}