/* ============================================================
   MAHO COMMERCE - "Ink & Chartreuse" design system
   Electric chartreuse (#d7df22, straight from the logo) on deep
   olive ink, over a warm paper reading surface.
   Display type: Bricolage Grotesque · Body: Geist · Code: Geist Mono
   Fonts are loaded from the document head (see overrides/main.html) so the
   browser discovers them early and avoids a flash of fallback text.
   ============================================================ */

/* --- Design tokens --- */
:root, [data-md-color-scheme=default] {
    /* Brand */
    --maho-chartreuse: #d7df22;
    --maho-chartreuse-soft: #e4ea5e;
    --maho-brand: #adb41a;
    --maho-brand-dark: #858a11;
    --maho-brand-text: #5f6310;          /* AA on paper */
    --maho-brand-subtle: rgba(173, 180, 26, 0.08);
    --maho-brand-muted: rgba(173, 180, 26, 0.16);

    /* Ink (dark canvas) */
    --maho-ink: #0e0f08;
    --maho-ink-soft: #15170c;
    --maho-ink-raised: #1c1f10;
    --maho-ink-border: rgba(244, 245, 232, 0.1);
    --maho-ink-border-brand: rgba(215, 223, 34, 0.22);
    --maho-on-ink: #f4f5e8;
    --maho-on-ink-soft: #b9bca3;
    --maho-on-ink-faint: #80836c;

    /* Paper (light canvas) */
    --maho-paper: #fafafa;
    --maho-surface: #ffffff;
    --maho-surface-warm: #f5f5ea;
    --maho-border: #e3e3d4;
    --maho-border-light: #ecece0;
    --maho-text-primary: #191a10;
    --maho-text-secondary: #54564a;
    --maho-text-tertiary: #8b8d7d;

    /* Type */
    --maho-display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
    --maho-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
    --maho-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Shadows */
    --maho-shadow-sm: 0 1px 3px rgba(20, 21, 10, 0.05), 0 1px 2px rgba(20, 21, 10, 0.06);
    --maho-shadow-md: 0 4px 14px rgba(20, 21, 10, 0.07), 0 2px 4px rgba(20, 21, 10, 0.04);
    --maho-shadow-lg: 0 14px 36px rgba(20, 21, 10, 0.1), 0 4px 10px rgba(20, 21, 10, 0.05);
    --maho-glow: 0 0 0 1px var(--maho-ink-border-brand), 0 18px 70px rgba(215, 223, 34, 0.13);

    /* Motion */
    --maho-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --maho-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --maho-duration: 0.22s;
    --maho-duration-slow: 0.4s;

    /* Radii */
    --maho-radius-sm: 6px;
    --maho-radius-md: 10px;
    --maho-radius-lg: 16px;
    --maho-radius-xl: 24px;

    /* MkDocs Material overrides */
    --md-default-bg-color: var(--maho-paper);
    --md-default-fg-color--light: var(--maho-text-primary) !important;
    --md-typeset-a-color: var(--maho-brand-text);
    --md-accent-fg-color: var(--maho-brand-dark);
    --md-primary-fg-color: var(--maho-ink);
    --md-text-font-family: var(--maho-sans);
    --md-code-font-family: var(--maho-mono);
}


/* === GLOBAL TYPOGRAPHY === */
html {
    font-size: 20px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--maho-sans);
    background: var(--maho-paper);
}

.md-typeset {
    line-height: 1.7;
    color: var(--maho-text-primary);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    font-family: var(--maho-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.18;
    color: var(--maho-text-primary);
    text-wrap: balance;
}

.md-typeset h1 {
    margin-bottom: 0;
    font-weight: 700;
}

.md-typeset h4, .md-typeset h5 {
    font-weight: 650;
    letter-spacing: -0.01em;
}

.md-typeset h2:first-of-type {
    margin-top: 0.5em;
}

.md-typeset p {
    margin-block: 0.8em;
}


/* === LAYOUT === */
.md-grid {
    max-width: 1240px;
}

.md-main__inner {
    margin-top: 0.4rem;
}


/* === CUSTOM SCROLLBAR === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(25, 26, 16, 0.18);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(25, 26, 16, 0.3);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(25, 26, 16, 0.18) transparent;
}


/* === HEADER & TABS - dark ink, site-wide === */
.md-header,
.md-tabs {
    background: var(--maho-ink) !important;
    color: var(--maho-on-ink);
    transition: box-shadow var(--maho-duration) var(--maho-ease);
}

.md-tabs {
    border-bottom: 1px solid var(--maho-ink-border);
}

.md-header--shadow {
    box-shadow: 0 2px 20px rgba(8, 9, 4, 0.45);
}

.md-header__button {
    transition: transform var(--maho-duration) var(--maho-ease),
                opacity var(--maho-duration) var(--maho-ease);
}

.md-header__button:hover {
    transform: scale(1.08);
    opacity: 1;
}

.md-logo img {
    zoom: 1.7;
    margin: -6px 0;
}

/* Material hides the header logo below its tablet breakpoint (the site
   title is hidden too, leaving the mobile header unbranded) - keep it,
   placed after the burger menu. */
@media screen and (max-width: 76.1875em) {
    .md-header .md-header__button.md-logo {
        display: block;
    }

    .md-header__inner > .md-header__button[for="__drawer"] {
        order: -1;
    }
}

/* Once the search bar collapses to an icon there's room to center the
   logo between the burger menu and the search icon. */
@media screen and (max-width: 59.9375em) {
    .md-header__inner {
        position: relative;
    }

    .md-header .md-header__button.md-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
    }
}

.md-header__topic {
    visibility: hidden;
}

/* Search bar: dark inset until opened, light text while idle */
.md-search__form {
    border-radius: var(--maho-radius-md);
    background: rgba(244, 245, 232, 0.1);
    transition: background var(--maho-duration) var(--maho-ease);
}

.md-search__form:hover {
    background: rgba(244, 245, 232, 0.16);
}

.md-search__input {
    color: var(--maho-on-ink);
}

.md-search__input::placeholder,
.md-search__input ~ .md-search__icon {
    color: rgba(244, 245, 232, 0.6);
}

/* Open search: the form goes light, so flip the text dark again */
[data-md-toggle=search]:checked ~ .md-header .md-search__input {
    color: var(--maho-text-primary);
}

[data-md-toggle=search]:checked ~ .md-header .md-search__input::placeholder,
[data-md-toggle=search]:checked ~ .md-header .md-search__input ~ .md-search__icon {
    color: var(--maho-text-tertiary);
}

[data-md-toggle=search]:checked ~ .md-header .md-search__form {
    border-radius: var(--maho-radius-md) var(--maho-radius-md) 0 0;
}

.md-search__output {
    border-radius: 0 0 var(--maho-radius-md) var(--maho-radius-md);
}

/* Source (GitHub) chip */
.md-source {
    font-family: var(--maho-mono);
    font-size: 0.6rem;
}


/* === TABS === */
.md-tabs__link {
    font-weight: 500;
    opacity: 0.72;
    transition: color var(--maho-duration) var(--maho-ease),
                opacity var(--maho-duration) var(--maho-ease);
    position: relative;
    margin-top: 0.55rem;
    margin-bottom: 0.5rem;
}

/* Let the tab bar height follow its content so there's no empty band below */
.md-tabs__list,
.md-tabs__item {
    height: auto;
}

.md-tabs__link:hover {
    opacity: 1;
    color: var(--maho-chartreuse);
}

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
    opacity: 1;
    color: var(--maho-chartreuse);
}

.md-tabs__link--active::after,
.md-tabs__item--active .md-tabs__link::after {
    content: '';
    position: absolute;
    bottom: -0.4em;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: var(--maho-chartreuse);
    border-radius: 2px 2px 0 0;
}


/* === SIDEBAR NAV === */
.md-sidebar--primary .md-sidebar__inner {
    border-right: 1px solid var(--maho-border-light);
}

.md-sidebar--secondary .md-sidebar__inner {
    border-left: 1px solid var(--maho-border-light);
}

.md-sidebar .md-nav__item {
    margin: 0 !important;
}

.md-sidebar .md-nav__item--section {
    margin-top: 0.3em !important;
}

.md-nav {
    font-size: 0.7rem;
}

.md-nav__item--section > .md-nav__link {
    font-family: var(--maho-sans);
    font-weight: 700;
    color: var(--maho-text-secondary) !important;
}

.md-nav__item .md-nav__link {
    transition: color var(--maho-duration) var(--maho-ease);
    border-radius: var(--maho-radius-sm);
    padding-block: 0.35rem;
}

.md-nav__item .md-nav__link:hover {
    color: var(--maho-brand-dark);
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
    font-weight: 600;
    color: var(--maho-brand-text) !important;
    background: var(--maho-brand-muted) !important;
}

@media screen and (min-width: 76.25em) {
    .md-nav__link--active {
        position: relative;
    }

    .md-sidebar--primary .md-nav__link--active::before {
        content: '';
        position: absolute;
        left: -0.6rem;
        top: 0.32rem;
        bottom: 0.32rem;
        width: 3px;
        border-radius: 3px;
        background: var(--maho-chartreuse);
    }
}

@media screen and (max-width: 76.25em) {
    .md-sidebar .md-nav__title {
        font-size: 0;
    }

    /* Uniform white drawer (avoid paper/surface mismatch reading as gray) */
    .md-sidebar--primary,
    .md-sidebar--primary .md-sidebar__scrollwrap,
    .md-nav--primary {
        background: var(--maho-surface);
    }

    /* Larger, finger-friendly tap targets in the drawer */
    .md-nav--primary,
    .md-nav--primary .md-nav {
        font-size: 0.82rem;
    }

    .md-nav--primary .md-nav__item .md-nav__link {
        padding-block: 0.6rem;
    }

    /* Mobile drawer header: light surface with the dark logo only */
    .md-nav--primary > .md-nav__title[for="__drawer"] {
        font-size: 0;
        background: var(--maho-surface);
    }

    /* Swap the white header logo for the dark-on-light variant */
    .md-nav--primary > .md-nav__title[for="__drawer"] .md-logo img {
        content: url("assets/maho-logo.svg");
    }

    .md-nav--primary > .md-nav__title[for="__drawer"] .md-logo {
        font-size: 1rem;
        width: 100%;
        height: auto;
        padding: 0.6rem 0;
        margin: 0;
    }

    .md-nav--primary > .md-nav__title[for="__drawer"] .md-logo img,
    .md-nav--primary > .md-nav__title[for="__drawer"] .md-logo svg {
        width: auto;
        height: 2.2rem;
        max-width: 100%;
        max-height: none;
    }
}


/* === LINKS === */
.md-content a:not(.md-button):not(.mh-btn):not(.mh-store-card) {
    color: var(--maho-brand-text);
    text-decoration: underline;
    text-decoration-color: rgba(173, 180, 26, 0.4);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--maho-duration) var(--maho-ease),
                text-decoration-color var(--maho-duration) var(--maho-ease);
}

.md-content a:not(.md-button):not(.mh-btn):not(.mh-store-card):hover {
    color: var(--maho-brand-dark);
    text-decoration-color: var(--maho-brand);
}

.md-content h2 > a {
    text-decoration: none !important;
}


/* === CODE === */
.md-typeset code {
    border-radius: var(--maho-radius-sm);
    padding: 0.1em 0.4em;
    font-size: 0.85em;
    border: 1px solid var(--maho-border);
    background: var(--maho-surface-warm);
    color: var(--maho-text-primary);
}

/* Code blocks go dark ink: terminal-grade, with chartreuse hairline */
.md-typeset pre {
    border-radius: var(--maho-radius-md);
    border: 1px solid var(--maho-ink-raised);
    overflow: hidden;
    position: relative;
    box-shadow: var(--maho-shadow-md);
}

.md-typeset pre > code,
.md-typeset .highlight pre,
.md-typeset .highlighttable .code {
    background: var(--maho-ink-soft) !important;
    color: #e6e7d6;
    border: none;
    border-radius: 0;
    padding: 1em 1.2em;
    font-size: 0.88em;
    line-height: 1.7;
}

.md-typeset pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--maho-chartreuse);
    opacity: 0.55;
    z-index: 1;
}

/* Code block action buttons (copy/select/download) on dark blocks.
   This materialx fork uses .md-code__button inside .md-code__nav (NOT .md-clipboard).
   The fork's default light chip background reads as a murky gray box on our dark
   blocks, so we drop it and render a clean icon: soft tone at rest, chartreuse on hover. */
.md-typeset .md-code__nav {
    background: transparent;
    top: 0;
    right: 0;
}

.md-typeset .md-code__button {
    color: var(--maho-on-ink-soft);
    box-sizing: content-box;
    padding: 0.3rem;
    border-radius: 0.4rem;
    transition: color .15s ease, background-color .15s ease;
}

.md-typeset .md-code__button:hover,
.md-typeset .md-code__button.focus-visible,
.md-typeset .md-code__button:focus-visible,
.md-typeset .md-code__button--active {
    color: var(--maho-ink);
    background: var(--maho-chartreuse);
}

/* Line number gutter (anchor_linenums tables) */
.md-typeset .highlighttable .linenos {
    background: var(--maho-ink) !important;
    color: var(--maho-on-ink-faint);
    border: none;
}


/* === ADMONITIONS === */
.md-typeset .admonition,
.md-typeset details {
    border-radius: var(--maho-radius-md);
    border-width: 0;
    border-left-width: 3px;
    box-shadow: var(--maho-shadow-sm);
    background: var(--maho-surface);
    overflow: hidden;
    font-size: 0.72rem;
}

.md-typeset .admonition-title,
.md-typeset details > summary {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Recolor the teal/cyan families to sit with the palette:
   tip becomes brand olive, info becomes a calm slate blue */
.md-typeset .admonition.tip,
.md-typeset details.tip {
    border-color: var(--maho-brand);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
    background-color: rgba(173, 180, 26, 0.14);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
    background-color: var(--maho-brand-dark);
}

.md-typeset .admonition.info,
.md-typeset details.info {
    border-color: #6d87a8;
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
    background-color: rgba(109, 135, 168, 0.12);
}

.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
    background-color: #5b7da8;
}


/* === TABLES === */
.md-typeset table:not([class]) {
    border-radius: var(--maho-radius-md);
    border: 1px solid var(--maho-border);
    overflow: hidden;
    display: table;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--maho-shadow-sm);
    background: var(--maho-surface);
}

.md-typeset table:not([class]) th {
    background: var(--maho-ink);
    color: var(--maho-on-ink);
    font-family: var(--maho-mono);
    font-weight: 500;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: none;
    padding: 0.7em 1em;
}

.md-typeset table:not([class]) td {
    padding: 0.7em 1em;
    border-bottom: 1px solid var(--maho-border-light);
}

.md-typeset table:not([class]) tr:last-child td {
    border-bottom: none;
}

.md-typeset table:not([class]) tbody tr {
    transition: background var(--maho-duration) var(--maho-ease);
}

.md-typeset table:not([class]) tbody tr:hover {
    background: var(--maho-brand-subtle);
}


/* === BUTTONS (Material .md-button, used across docs pages) === */
.md-button {
    border-radius: var(--maho-radius-md) !important;
    padding: 0.6em 1.5em !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
    letter-spacing: -0.01em;
    transition: all var(--maho-duration) var(--maho-ease) !important;
    border: 1px solid var(--maho-text-primary) !important;
    color: var(--maho-text-primary) !important;
    text-decoration: none !important;
}

.md-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--maho-shadow-md);
    background: var(--maho-surface) !important;
    border-color: var(--maho-text-primary) !important;
    color: var(--maho-text-primary) !important;
}

.md-button:active {
    transform: translateY(0);
}

.md-button--primary {
    background: var(--maho-chartreuse) !important;
    border-color: var(--maho-chartreuse) !important;
    color: var(--maho-ink) !important;
}

.md-button--primary:hover {
    background: var(--maho-chartreuse-soft) !important;
    border-color: var(--maho-chartreuse-soft) !important;
    color: var(--maho-ink) !important;
    box-shadow: 0 10px 26px rgba(173, 180, 26, 0.3) !important;
}


/* === SOCIAL LINKS (theme default, replaced by custom footer) === */
.md-social {
    display: none;
}

.md-social__link svg {
    max-height: 1.2rem;
}


/* === SOURCE FILE META === */
aside.md-source-file * {
    color: var(--maho-text-tertiary);
}


/* === FIGURES === */
.md-typeset figure {
    border: 1px solid var(--maho-border);
    border-radius: var(--maho-radius-md);
    overflow: hidden;
    padding: 0;
    background: var(--maho-surface);
}

.md-typeset figure img {
    display: block;
    margin: 0 !important;
    padding: 0.5em 0.5em 0;
}

.md-typeset figcaption {
    background: var(--maho-surface-warm);
    border-top: 1px solid var(--maho-border-light);
    padding: 0.6em 1em;
    font-size: 0.8em;
    margin-bottom: 0;
    max-width: none;
    color: var(--maho-text-secondary);
}


/* === VERSION BADGE === */
.version-badge {
    display: inline-block;
    background: var(--maho-ink);
    color: var(--maho-chartreuse);
    font-family: var(--maho-mono);
    padding: 3px 12px;
    border-radius: 99px;
    font-size: 0.55em;
    font-weight: 500;
    margin-left: 12px;
    vertical-align: middle;
    white-space: nowrap;
    letter-spacing: 0.04em;
}


/* === CONTENT TABS === */
.md-typeset .tabbed-labels > label {
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: -0.01em;
    transition: color var(--maho-duration) var(--maho-ease);
}


/* ============================================================
   HOMEPAGE
   ============================================================ */

/* Hide sidebars and unwrap content on home and special pages */
@media screen and (min-width: 60em) {
    body:has(h1[id=blog]) .md-sidebar--secondary {
        visibility: hidden;
    }
    body:has(#homeh1) .md-sidebar, body:has(#sponsorsh1) .md-sidebar--primary {
        display: none;
    }
    body:has(#homeh1, #sponsorsh1) .md-main__inner {
        align-items: center;
    }
    body:has(#homeh1) .md-content {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    body:has(#homeh1) .md-content__inner {
        margin: 0;
        padding: 0;
    }
    body:has(#sponsorsh1) .md-content {
        max-width: 736px;
        margin: auto;
    }
}

body:has(#homeh1) .md-main__inner {
    margin-top: 0;
}

body:has(#homeh1) .md-content__inner {
    margin: 0;
    padding: 0;
}

body:has(#homeh1) .md-content__inner::before {
    display: none;
}

/* Full-bleed bands use 100vw; clip the residual scrollbar overflow */
body:has(#homeh1) .md-container {
    overflow-x: clip;
}

article:has(#homeh1) .md-source-file {
    display: none;
}

article:has(#homeh1) {
    max-width: 100% !important;
    margin: 0 auto;
    font-family: var(--maho-sans);
}

/* Full-bleed band helper applied to home sections */
.mh-hero,
.mh-stores,
.audience-section.agencies,
.audience-section.developers,
.mh-funding,
.final-cta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}


/* ---- HERO: deep ink, chartreuse glow, blueprint grid ---- */
.mh-hero {
    position: relative;
    background:
        radial-gradient(ellipse 75% 90% at 78% -10%, rgba(215, 223, 34, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 8% 110%, rgba(215, 223, 34, 0.07) 0%, transparent 60%),
        var(--maho-ink);
    color: var(--maho-on-ink);
    overflow: hidden;
    padding-bottom: 4.4em;
}

/* Blueprint grid, fading toward the bottom */
.mh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(244, 245, 232, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 245, 232, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.4) 55%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.4) 55%, transparent 92%);
    pointer-events: none;
}

.mh-hero-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.2em 2em 2.6em;
    display: grid;
    grid-template-columns: 1.18fr 1fr;
    gap: 4em;
    align-items: center;
}

.mh-hero-copy {
    min-width: 0;
    transform: translateY(-1.5em);
}

/* Eyebrow */
.mh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    font-family: var(--maho-mono);
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--maho-chartreuse);
    font-weight: 500;
    padding: 0.6em 1.1em;
    border: 1px solid var(--maho-ink-border-brand);
    border-radius: 99px;
    background: rgba(215, 223, 34, 0.05);
}

.mh-eyebrow .mh-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--maho-chartreuse);
    box-shadow: 0 0 0 0 rgba(215, 223, 34, 0.5);
    animation: mhPulse 2.4s var(--maho-ease) infinite;
}

@keyframes mhPulse {
    0%   { box-shadow: 0 0 0 0 rgba(215, 223, 34, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(215, 223, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(215, 223, 34, 0); }
}

/* Headline */
#homeh1.mh-headline {
    font-family: var(--maho-display);
    text-align: left;
    font-size: 4.1em;
    font-weight: 750;
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--maho-on-ink);
    margin: 0.4em 0 0.32em;
}

#homeh1.mh-headline .mh-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#homeh1.mh-headline em {
    font-style: normal;
    color: var(--maho-chartreuse);
    position: relative;
    display: inline-block;
}

/* Hand-drawn underline stroke beneath the accent words */
#homeh1.mh-headline em::after {
    content: '';
    position: absolute;
    left: 0.02em;
    right: 0.14em;
    bottom: -0.06em;
    height: 0.085em;
    background: var(--maho-chartreuse);
    opacity: 0.35;
    border-radius: 99px;
    transform: skewX(-12deg);
}

.mh-lede {
    font-size: 0.95em;
    line-height: 1.65;
    color: var(--maho-on-ink-soft);
    max-width: 46ch;
    margin: 0 0 1.7em;
}

/* ---- Button system (used on dark home bands) ---- */
.mh-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em;
    align-items: center;
}

.mh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    padding: 0.68em 1.4em;
    border-radius: var(--maho-radius-md);
    border: 1px solid transparent;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform var(--maho-duration) var(--maho-ease),
                background var(--maho-duration) var(--maho-ease),
                color var(--maho-duration) var(--maho-ease),
                border-color var(--maho-duration) var(--maho-ease),
                box-shadow var(--maho-duration) var(--maho-ease);
}

.mh-btn:active {
    transform: translateY(0);
}

.mh-btn svg {
    flex-shrink: 0;
    transition: transform var(--maho-duration) var(--maho-ease);
}

.mh-btn:hover svg {
    transform: translateX(3px);
}

.mh-btn-solid {
    background: var(--maho-chartreuse);
    color: var(--maho-ink) !important;
}

.mh-btn-solid:hover {
    background: var(--maho-chartreuse-soft);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(215, 223, 34, 0.28);
}

.mh-btn-line {
    border-color: rgba(244, 245, 232, 0.28);
    color: var(--maho-on-ink) !important;
}

.mh-btn-line:hover {
    border-color: var(--maho-chartreuse);
    color: var(--maho-chartreuse) !important;
    transform: translateY(-2px);
}

.mh-btn-ghost {
    color: var(--maho-on-ink-soft) !important;
}

.mh-btn-ghost:hover {
    color: var(--maho-chartreuse) !important;
    background: rgba(215, 223, 34, 0.07);
}

/* Meta facts row */
.mh-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em 1.6em;
    margin: 0 0 1.7em;
    font-family: var(--maho-mono);
    font-size: 0.58em;
    letter-spacing: 0.04em;
    color: var(--maho-on-ink-soft);
}

.mh-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
}

.mh-meta .mh-bullet {
    color: var(--maho-chartreuse);
    font-size: 0.7em;
}

/* ---- Terminal panel ---- */
.mh-hero-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Animated logo sitting above the terminal. Hidden on mobile, where the
   header logo takes over the branding. */
.mh-hero-side > .mh-logo {
    margin: 0 auto 1.4em;
    max-width: 17em;
    width: 100%;
}

@media screen and (max-width: 76.1875em) {
    .mh-hero-side > .mh-logo {
        display: none;
    }
}

/* Static shell carries the glow so it doesn't sweep over the caption
   when the inner terminal does its 3D flip. */
.mh-term-shell {
    position: relative;
    border-radius: var(--maho-radius-lg);
    box-shadow: var(--maho-glow), 0 30px 60px rgba(0, 0, 0, 0.5);
    perspective: 1600px;
}

.mh-term {
    background: #0a0b05;
    border: 1px solid var(--maho-ink-border-brand);
    border-radius: var(--maho-radius-lg);
    overflow: hidden;
}

.mh-term-top {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.7em 0.9em;
    background: #11130a;
    border-bottom: 1px solid rgba(215, 223, 34, 0.12);
}

.mh-term-top .mh-d {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #3a3931;
}

.mh-term-top .mh-d:nth-child(1) { background: #e0696a; }
.mh-term-top .mh-d:nth-child(2) { background: #e3c04c; }
.mh-term-top .mh-d:nth-child(3) { background: #8bc34a; }

.mh-term-top .mh-term-title {
    font-family: var(--maho-mono);
    font-size: 0.55em;
    color: var(--maho-on-ink-faint);
    margin-left: 0.6em;
}

.mh-term-body {
    padding: 1.1em 1.3em 1.3em;
    font-family: var(--maho-mono);
    font-size: 0.6em;
    line-height: 1.9;
    color: #d6d8c6;
    overflow-x: auto;
}

.mh-term-body .mh-ln {
    white-space: pre;
}

.mh-term-body .c { color: #797d63; }
.mh-term-body .p { color: var(--maho-chartreuse); }
.mh-term-body .k { color: #6fb0ff; }
.mh-term-body .s { color: #c9a8ff; }

.mh-term-body .mh-cur {
    display: inline-block;
    width: 7px;
    height: 1.05em;
    background: var(--maho-chartreuse);
    vertical-align: -0.18em;
    margin-left: 2px;
    animation: mhBlink 1s steps(2) infinite;
}

@keyframes mhBlink { 50% { opacity: 0; } }

.mh-term-caption {
    margin-top: 1.1em;
    text-align: center;
    font-family: var(--maho-mono);
    font-size: 0.55em;
    letter-spacing: 0.03em;
    color: var(--maho-on-ink-soft);
}

/* ---- Terminal: auto-cycling Composer / Docker scenes ----
   JS-driven (maho.js): a scene types out, holds, the window flips and the
   next scene types. Without JS / reduced motion: just the Composer scene. */
.mh-term-stage {
    position: relative;
}

html.mh-anim .mh-term {
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

.mh-scene-composer {
    position: relative;
}

.mh-scene-docker {
    position: absolute;
    inset: 0;
    display: none;
}

html.mh-anim .mh-scene-docker {
    display: block;
}

html.mh-anim .mh-term-scene {
    opacity: 0;
    transition: opacity 0.25s var(--maho-ease);
}

html.mh-anim .mh-term-scene.is-active {
    opacity: 1;
}

/* ---- Hero entrance (pure CSS, fill-mode both, no FOUC) ---- */
.mh-hero-copy > *,
.mh-hero-side {
    will-change: transform, opacity;
    animation: mhRise 0.7s var(--maho-ease-out) both;
}

.mh-eyebrow         { animation-delay: 0.05s; }
#homeh1.mh-headline { animation-delay: 0.12s; }
.mh-lede            { animation-delay: 0.22s; }
.mh-ctas            { animation-delay: 0.32s; }
.mh-meta            { animation-delay: 0.42s; }
.mh-hero-side       { animation: mhRiseTerm 0.85s var(--maho-ease-out) 0.2s both; }
.mh-showcase        { will-change: transform, opacity; animation: mhRise 0.8s var(--maho-ease-out) 0.5s both; }

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

@keyframes mhRiseTerm {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Accent words sweep in just after the headline lands */
#homeh1.mh-headline em {
    animation: mhWipe 0.55s var(--maho-ease-out) 0.55s both;
}

@keyframes mhWipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}


/* ---- Hero admin showcase: light/dark before-after comparison ---- */
.mh-showcase {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2em;
}

/* Window frame, matched to the terminal chrome above.
   overflow is visible so the nav arrows can straddle the edges; the
   chrome top and image bottom corners are rounded explicitly instead. */
.mh-shot-window {
    position: relative;
    background: #0a0b05;
    border: 1px solid var(--maho-ink-border-brand);
    border-radius: var(--maho-radius-lg);
    box-shadow: var(--maho-glow), 0 30px 60px rgba(0, 0, 0, 0.5);
}

.mh-shot-window .mh-term-top {
    position: relative;
    border-top-left-radius: calc(var(--maho-radius-lg) - 1px);
    border-top-right-radius: calc(var(--maho-radius-lg) - 1px);
}

.mh-shot-window .mh-shot-light,
.mh-shot-window .mh-shot-dark,
.mh-shot-window .mh-shot-hold {
    border-bottom-left-radius: calc(var(--maho-radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--maho-radius-lg) - 1px);
}

/* Lightbulb toggle + its attention hint sit at the right of the chrome */
.mh-bulb-wrap {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
}

/* Animated "Try dark mode →" nudge, dismissed after the first press */
.mh-bulb-hint {
    font-family: var(--maho-mono);
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--maho-chartreuse);
    white-space: nowrap;
    opacity: 0.9;
    cursor: pointer;
    transition: opacity 0.35s var(--maho-ease), transform 0.35s var(--maho-ease);
}

.mh-bulb-hint:hover { opacity: 1; }

.mh-bulb-arrow {
    display: inline-block;
    will-change: transform;
}

.mh-shot-window:not(.is-hint-done) .mh-bulb-arrow {
    animation: mhNudge 1.2s ease-in-out infinite;
}

.mh-shot-window:not(.is-hint-done) .mh-bulb {
    animation: mhBulbPulse 2.2s var(--maho-ease-out) infinite;
}

@keyframes mhNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

@keyframes mhBulbPulse {
    0%   { box-shadow: 0 0 12px -2px rgba(215, 223, 34, 0.5), 0 0 0 0 rgba(215, 223, 34, 0.5); }
    70%  { box-shadow: 0 0 12px -2px rgba(215, 223, 34, 0.5), 0 0 0 9px rgba(215, 223, 34, 0); }
    100% { box-shadow: 0 0 12px -2px rgba(215, 223, 34, 0.5), 0 0 0 0 rgba(215, 223, 34, 0); }
}

.mh-bulb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--maho-ink-border);
    background: rgba(244, 245, 232, 0.04);
    color: var(--maho-on-ink-faint);
    cursor: pointer;
    transition:
        color 0.25s var(--maho-ease),
        border-color 0.25s var(--maho-ease),
        background 0.25s var(--maho-ease),
        box-shadow 0.25s var(--maho-ease);
}

.mh-bulb:hover,
.mh-bulb:focus-visible {
    color: var(--maho-on-ink);
    border-color: var(--maho-ink-border-brand);
    outline: none;
}

/* Lit when showing the light theme: glowing chartreuse bulb */
.mh-bulb[aria-pressed="false"] {
    color: var(--maho-chartreuse);
    border-color: var(--maho-ink-border-brand);
    background: rgba(215, 223, 34, 0.1);
    box-shadow: 0 0 12px -2px rgba(215, 223, 34, 0.5);
}

/* The screenshot stage: light base with a dark layer crossfaded on top */
.mh-shot-stage {
    position: relative;
    background: var(--maho-ink-soft);
}

/* Frame wraps the two image layers so navigation can animate them
   without moving the arrows / chrome. */
.mh-shot-frame {
    position: relative;
    z-index: 1;
}

/* Outgoing screenshot held behind the frame so the crossfade never
   exposes the dark stage background (no black flash). */
.mh-shot-hold {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

/* New screenshot crossfades up over the held one */
.mh-shot-frame.mh-shot-fade { animation: mhShotFade 0.45s var(--maho-ease); }

@keyframes mhShotFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Loading spinner shown while the next screenshot decodes */
.mh-shot-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border-radius: 50%;
    border: 3px solid rgba(244, 245, 232, 0.22);
    border-top-color: var(--maho-chartreuse);
    z-index: 4;
    pointer-events: none;
    animation: mhSpin 0.75s linear infinite;
}

.mh-shot-spinner[hidden] { display: none; }

@keyframes mhSpin { to { transform: rotate(360deg); } }

.mh-shot-light {
    display: block;
    width: 100%;
    height: auto;
}

.mh-shot-dark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s var(--maho-ease);
}

.mh-shot-stage.is-dark .mh-shot-dark {
    opacity: 1;
}

/* Prev / next arrows straddling the stage edges, vertically centred */
.mh-shot-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--maho-ink-border-brand);
    border-radius: 50%;
    color: var(--maho-on-ink);
    background: rgba(14, 15, 8, 0.72);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0.92;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    transition:
        background 0.2s var(--maho-ease),
        color 0.2s var(--maho-ease),
        opacity 0.2s var(--maho-ease),
        box-shadow 0.2s var(--maho-ease);
}

/* Half in, half out: centre each arrow on the stage's left / right edge */
.mh-shot-prev { left: 0;  transform: translate(-50%, -50%); }
.mh-shot-next { right: 0; transform: translate(50%, -50%); }

.mh-shot-nav:hover,
.mh-shot-nav:focus-visible {
    opacity: 1;
    color: var(--maho-ink);
    background: var(--maho-chartreuse);
    border-color: var(--maho-chartreuse);
    box-shadow: var(--maho-glow), 0 6px 18px rgba(0, 0, 0, 0.5);
    outline: none;
}

.mh-shots-caption {
    max-width: 1000px;
    margin: 1.2em auto 0;
    text-align: center;
    font-size: 0.86em;
    color: var(--maho-on-ink-soft);
}

.mh-shots-caption a {
    color: var(--maho-chartreuse);
    text-decoration: none;
    font-weight: 600;
}

.mh-shots-caption a:hover { text-decoration: underline; }


/* ---- STORES: real merchants running Maho ----
   White (vs the page's #fafafa) so the section reads as a distinct band */
.mh-stores {
    background: var(--maho-surface);
    padding: 4.4em 0 0;
}

.mh-stores-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2em;
}

/* shares the audience sections' heading style (.mh-sec-title / .mh-sec-lede) */
.mh-stores-head {
    max-width: 720px;
    margin: 0 0 2.2em;
}

.mh-stores-carousel {
    position: relative;
}

.mh-stores-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* small side room so a hovered card's lift + shadow aren't clipped */
    padding: 16px 4px 38px;
}

.mh-stores-viewport::-webkit-scrollbar { display: none; }

.mh-stores-track {
    display: flex;
    gap: 1.4em;
}

/* Two cards per view (gap split across the pair) */
.mh-stores-track .mh-store-card {
    flex: 0 0 calc((100% - 1.4em) / 2);
    scroll-snap-align: start;
}

/* Arrows sit on the card edges, half-overlapping them, in the same dark
   translucent style as the admin-showcase nav (.mh-shot-nav) */
.mh-stores-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--maho-ink-border-brand);
    border-radius: 50%;
    color: var(--maho-on-ink);
    background: rgba(14, 15, 8, 0.72);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0.92;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    transition:
        background 0.2s var(--maho-ease),
        color 0.2s var(--maho-ease),
        opacity 0.2s var(--maho-ease),
        box-shadow 0.2s var(--maho-ease);
}

.mh-stores-prev { left: 0;  transform: translate(-50%, -50%); }
.mh-stores-next { right: 0; transform: translate(50%, -50%); }

.mh-stores-arrow:hover,
.mh-stores-arrow:focus-visible {
    opacity: 1;
    color: var(--maho-ink);
    background: var(--maho-chartreuse);
    border-color: var(--maho-chartreuse);
    box-shadow: var(--maho-glow), 0 6px 18px rgba(0, 0, 0, 0.5);
    outline: none;
}

.mh-stores .mh-store-card {
    display: flex;
    flex-direction: column;
    background: var(--maho-surface);
    border: 1px solid var(--maho-border-light);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    /* !important is needed because the theme's `.md-typeset a` sets
       transition-property: color,text-decoration-color and wins the cascade,
       which would otherwise strip transform/box-shadow and make the hover snap */
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.mh-stores .mh-store-card:hover {
    transform: translateY(-5px);
    border-color: var(--maho-border);
    box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.5);
}

.mh-store-shot {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--maho-paper);
    border-bottom: 1px solid var(--maho-border-light);
}

.mh-store-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.mh-store-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding: 1em 1.15em 1.1em;
}

.mh-store-name {
    font-weight: 650;
    font-size: 1.04em;
    color: var(--maho-text-primary);
}

.mh-store-loc {
    font-size: 0.82em;
    color: var(--maho-text-secondary);
}

/* CTA below the carousel: a short prompt + a compact button, centered */
.mh-stores-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5em 1em;
    margin-top: 0.4em;
}

.mh-stores-cta-text {
    font-size: 0.95em;
    color: var(--maho-text-secondary);
}

/* Audience routing folded into the stores section: "whoever you are" + pills,
   a calm closer that hands off to the audience deep-dives below */
.mh-stores-audience {
    /* full-bleed chartreuse band (the original audience-nav style: title left,
       pills right), now folded in right after the stores carousel */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 3em;
    padding: 1.5em 0;
    background: var(--maho-chartreuse);
}


/* ---- AUDIENCE ROUTING: title + pills (folded into the stores section) ---- */
.mh-audience-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em 1.5em;
}

.mh-audience-nav-title {
    font-family: var(--maho-display);
    font-size: 1.4em;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--maho-ink);
    text-wrap: balance;
}

.mh-audience-nav-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5em;
}

.mh-audience-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.62em 1.2em;
    border-radius: 99px;
    border: 1px solid transparent;
    background: rgba(251, 251, 244, 0.92);
    color: var(--maho-brand-text) !important;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(14, 15, 8, 0.12);
    transition: transform var(--maho-duration) var(--maho-ease),
                background var(--maho-duration) var(--maho-ease),
                color var(--maho-duration) var(--maho-ease),
                border-color var(--maho-duration) var(--maho-ease),
                box-shadow var(--maho-duration) var(--maho-ease);
}

.mh-audience-pill .mh-pill-icon {
    color: var(--maho-brand-dark);
    flex-shrink: 0;
    transition: color var(--maho-duration) var(--maho-ease);
}

.mh-audience-pill:hover {
    transform: translateY(-2px);
    background: var(--maho-ink);
    border-color: var(--maho-ink);
    color: var(--maho-on-ink) !important;
    box-shadow: 0 8px 20px rgba(14, 15, 8, 0.3);
}

.mh-audience-pill:hover .mh-pill-icon {
    color: var(--maho-chartreuse);
}


/* ---- AUDIENCE SECTIONS ---- */
.audience-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 6em 2em;
    scroll-margin-top: 3.4em;
}

/* first deep-dive sits right under the "whoever you are" pills, so pull it up */
.audience-section.store-owners {
    padding-top: 2.8em;
}

/* Section header: copy (title / lede) + restrained accent image */
.mh-sec-head {
    margin-bottom: 0.6em;
}

.mh-sec-head:has(.mh-sec-media) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 3.4em;
    align-items: start;
    position: relative;
    z-index: 1;
}

.mh-sec-copy {
    max-width: 720px;
    align-self: center;
}

/* Accent image: a duotone photo mapped into the brand palette so it reads as
   an intentional, editorial asset rather than a pasted-in stock photo. It sits
   on an offset chartreuse block - the one spot of brand colour - which keeps
   the photo itself quiet ("not too present") while feeling deliberately placed. */
.mh-sec-media {
    position: relative;
    z-index: 1;
    /* landscape framing, center-cropped */
    aspect-ratio: 16 / 9;
    isolation: isolate;
    /* the image extends downward past the header so its lower edge tucks
       BEHIND the carousel cards (see the .features-grid z-index below) -
       the photo appears to rise out from behind the top of the carousel */
    margin-bottom: -70px;
}

/* offset chartreuse block peeking out behind the photo, top-left */
.mh-sec-media::before {
    content: '';
    position: absolute;
    inset: -13px 13px 13px -13px;
    background: var(--maho-chartreuse);
    border-radius: var(--maho-radius-lg);
    z-index: 0;
    transition: transform var(--maho-duration-slow) var(--maho-ease-out);
}

.mh-sec-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: var(--maho-radius-lg);
    filter: url(#maho-duo-ink) contrast(1.12) brightness(1.02);
    box-shadow: var(--maho-shadow-lg);
    transition: transform var(--maho-duration-slow) var(--maho-ease-out);
}

/* on hover, photo and block slide apart slightly - a small, deliberate moment */
.mh-sec-head:hover .mh-sec-media img {
    transform: translate(3px, -3px);
}

.mh-sec-head:hover .mh-sec-media::before {
    transform: translate(-3px, 3px);
}

.md-typeset .mh-sec-title {
    font-family: var(--maho-display);
    font-size: 2.7em;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0 0 0.4em;
}

.md-typeset .mh-sec-title strong {
    font-weight: 750;
    color: inherit;
    background: linear-gradient(transparent 68%, rgba(215, 223, 34, 0.5) 68%);
    padding: 0 0.06em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.mh-sec-lede {
    font-size: 0.92em;
    line-height: 1.65;
    color: var(--maho-text-secondary);
    margin: 0;
    max-width: 56ch;
}

/* Agencies section: full-bleed white band, a clear break from
   the paper store-owners section above it */
.audience-section.agencies {
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw);
    padding: 6em 0 2.5em;
    background: var(--maho-surface);
    border-top: 1px solid var(--maho-border-light);
    border-bottom: 1px solid var(--maho-border-light);
}

.agencies .feature-card {
    background: var(--maho-paper);
}

/* Developers section: full-bleed dark band */
.audience-section.developers {
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw);
    padding: 6em 0 2.5em;
    background: var(--maho-ink);
    color: var(--maho-on-ink);
}

.audience-section.agencies .mh-sec-head,
.audience-section.agencies .features-grid,
.audience-section.developers .mh-sec-head,
.audience-section.developers .features-grid {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.audience-section.agencies .mh-sec-head,
.audience-section.developers .mh-sec-head {
    padding: 0 2em;
    max-width: 1180px;
}

.audience-section.agencies .mh-sec-head > *,
.audience-section.developers .mh-sec-head > * {
    max-width: 720px;
}

.developers .md-typeset .mh-sec-title,
.md-typeset .developers .mh-sec-title {
    color: var(--maho-on-ink);
}

.developers .md-typeset .mh-sec-title strong,
.md-typeset .developers .mh-sec-title strong {
    background: none;
    color: var(--maho-chartreuse);
}

.developers .mh-sec-lede {
    color: var(--maho-on-ink-soft);
}

/* On the dark developers band, keep the same neutral monochrome (no green),
   brightened a touch so it reads on the ink background; the brand accent comes
   from the chartreuse glow around the photo, not a colour cast on it. */
.developers .mh-sec-media::before {
    background: var(--maho-ink-raised);
    inset: -13px 13px 13px -13px;
}

.developers .mh-sec-media img {
    filter: url(#maho-duo-ink) contrast(1.12) brightness(1.12);
    box-shadow: var(--maho-glow);
}


/* ---- Feature carousel (CSS scroll-snap + native scroll markers) ---- */
.features-grid {
    display: flex;
    gap: 1.1em;
    margin-top: 0;
    /* sits above the header so the section accent image tucks behind the cards */
    position: relative;
    z-index: 2;
    padding: 1.6em 0.2em 0.8em;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.2em;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.agencies .features-grid,
.developers .features-grid {
    padding-left: 2em;
    padding-right: 2em;
    scroll-padding-left: 2em;
}

.features-grid > .feature-card {
    flex: 0 0 calc((100% - 2.2em) / 3);
    min-width: 250px;
    scroll-snap-align: start;
}

.features-grid::-webkit-scrollbar { display: none; }

/* Native CSS carousel dots (Chrome 135+); degrades to plain scroll-snap */
@supports (scroll-marker-group: after) {
    .features-grid { scroll-marker-group: after; }

    .features-grid::scroll-marker-group {
        display: flex;
        justify-content: center;
        gap: 0.6em;
        padding-top: 1.1em;
    }

    .features-grid > .feature-card::scroll-marker {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(84, 86, 74, 0.25);
        border: 0;
        cursor: pointer;
        transition: background var(--maho-duration) var(--maho-ease),
                    transform var(--maho-duration) var(--maho-ease);
    }

    .features-grid > .feature-card::scroll-marker:hover { background: var(--maho-brand); }

    .features-grid > .feature-card::scroll-marker:target-current {
        background: var(--maho-brand-dark);
        transform: scale(1.3);
    }

    .developers .features-grid > .feature-card::scroll-marker {
        background: rgba(244, 245, 232, 0.18);
    }
    .developers .features-grid > .feature-card::scroll-marker:target-current {
        background: var(--maho-chartreuse);
    }
}

@media screen and (min-width: 48.0625em) and (max-width: 64em) {
    .features-grid > .feature-card {
        flex-basis: calc((100% - 1.1em) / 2);
    }
}

/* ---- Feature cards ---- */
.feature-card {
    padding: 1.5em 1.5em 1.7em;
    border-radius: var(--maho-radius-lg);
    background: var(--maho-surface);
    border: 1px solid var(--maho-border);
    transition: border-color var(--maho-duration-slow) var(--maho-ease),
                box-shadow var(--maho-duration-slow) var(--maho-ease),
                transform var(--maho-duration-slow) var(--maho-ease);
    position: relative;
    min-height: 160px;
}

.feature-card:hover {
    border-color: var(--maho-brand);
    box-shadow: var(--maho-shadow-lg);
    transform: translateY(-4px);
}

/* Icon: decorative watermark in the lower-right corner */
.feature-card {
    overflow: hidden;
}

.feature-card p:has(.feature-icon) {
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    bottom: -0.6em !important;
    right: -0.6em !important;
    width: auto !important;
    height: auto !important;
    overflow: visible;
    z-index: 0 !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

.feature-card .feature-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 5em !important;
    height: 5em !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--maho-brand-dark) !important;
    font-size: 1em !important;
    line-height: 1 !important;
    margin: 0 !important;
    opacity: 0.12 !important;
    transform: rotate(0deg) !important;
    transition: opacity var(--maho-duration-slow) var(--maho-ease),
                transform var(--maho-duration-slow) var(--maho-ease) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.feature-card .feature-icon svg {
    display: block !important;
    width: 2.6em !important;
    height: 2.6em !important;
    fill: var(--maho-brand-dark) !important;
    color: var(--maho-brand-dark) !important;
}

.feature-card:hover .feature-icon {
    opacity: 0.22 !important;
    transform: rotate(-12deg) scale(1.1) !important;
}

.feature-card h3 {
    font-family: var(--maho-display);
    font-size: 1.05em;
    margin: 0 0 0.55em;
    font-weight: 700;
    color: var(--maho-text-primary);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.feature-card p {
    color: var(--maho-text-secondary);
    line-height: 1.62;
    margin: 0;
    font-size: 0.82em;
}

.feature-card p strong {
    color: var(--maho-text-primary);
    font-weight: 600;
}

/* Dark variant inside the developers band */
.developers .feature-card {
    background: var(--maho-ink-soft);
    border-color: var(--maho-ink-raised);
    color: var(--maho-on-ink-soft);
}

.developers .feature-card:hover {
    border-color: var(--maho-ink-border-brand);
    background: var(--maho-ink-raised);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.developers .feature-card h3 {
    color: var(--maho-on-ink);
}

.developers .feature-card p {
    color: var(--maho-on-ink-soft);
}

.developers .feature-card p strong {
    color: var(--maho-on-ink);
}

.developers .feature-card .feature-icon {
    color: var(--maho-chartreuse) !important;
    opacity: 0.1 !important;
}

.developers .feature-card .feature-icon svg {
    fill: var(--maho-chartreuse) !important;
    color: var(--maho-chartreuse) !important;
}

.developers .feature-card:hover .feature-icon {
    opacity: 0.18 !important;
}


/* ---- FINAL CTA: paper band (same surface as the store-owners
   section) between the ink developers band and the ink footer ---- */
.final-cta {
    background: var(--maho-paper);
    color: var(--maho-text-primary);
    text-align: center;
    padding: 4.6em 0 4.8em;
    margin-bottom: 0;
}

.final-cta-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2em;
}

.md-typeset .final-cta h2 {
    font-family: var(--maho-display);
    font-size: 2.6em;
    margin: 0 0 0.4em;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--maho-text-primary);
}

.final-cta h2 em {
    font-style: normal;
    color: inherit;
    background: linear-gradient(transparent 68%, rgba(215, 223, 34, 0.5) 68%);
    padding: 0 0.06em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.final-cta p {
    font-size: 0.95em;
    color: var(--maho-text-secondary);
    margin: 0 auto 2em;
    max-width: 54ch;
}

.final-cta .mh-ctas {
    justify-content: center;
}

/* Line and ghost buttons adjusted for the light surface */
.final-cta .mh-btn-line {
    border-color: rgba(25, 26, 16, 0.3);
    color: var(--maho-text-primary) !important;
}

.final-cta .mh-btn-line:hover {
    border-color: var(--maho-text-primary);
    color: var(--maho-text-primary) !important;
}

.final-cta .mh-btn-ghost {
    color: var(--maho-text-secondary) !important;
}

.final-cta .mh-btn-ghost:hover {
    color: var(--maho-brand-dark) !important;
    background: var(--maho-brand-subtle);
}

/* Kill the gap between the final CTA and the footer */
body:has(#homeh1) .md-content {
    padding-bottom: 0;
}

body:has(#homeh1) .md-main__inner {
    margin-bottom: 0;
}


/* ---- Scroll reveal (applied via JS) ---- */
html.mh-anim .mh-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s var(--maho-ease-out),
                transform 0.6s var(--maho-ease-out);
    will-change: transform, opacity;
}

html.mh-anim .mh-reveal.mh-in {
    opacity: 1;
    transform: translateY(0);
}


/* ---- Home responsive ---- */
@media screen and (max-width: 64em) {
    .mh-hero-inner {
        grid-template-columns: 1fr;
        gap: 2.8em;
        padding: 2.6em 1.5em 3em;
    }

    #homeh1.mh-headline { font-size: 3.1em; }

    .mh-hero-side { max-width: 600px; }

    /* tighter accent-image column on narrower viewports */
    .mh-sec-head:has(.mh-sec-media) {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 2em;
    }

}

@media screen and (max-width: 768px) {
    #homeh1.mh-headline { font-size: 2.4em; }

    .mh-lede { font-size: 0.92em; }

    /* Hero CTAs: first two share a 50/50 row, the ghost link centered below */
    .mh-ctas {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.6em;
    }
    .mh-ctas .mh-btn-solid,
    .mh-ctas .mh-btn-line {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
    .mh-ctas .mh-btn-ghost {
        flex-basis: 100%;
        justify-content: center;
    }

    .mh-showcase { padding: 0 1.5em; }
    .mh-bulb-hint { display: none; } /* keep the pulsing bulb, drop the label */
    .mh-shot-nav { width: 42px; height: 42px; }
    .mh-stores-arrow { width: 42px; height: 42px; }

    .mh-audience-nav-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .mh-audience-nav-btns {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.4em;
        max-width: 100%;
        overflow-x: auto;
    }

    .mh-audience-pill {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.55em 0.9em;
    }

    .audience-section { padding: 3.6em 1.2em; }

    .audience-section.agencies,
    .audience-section.developers { padding: 3.6em 0; }
    .audience-section.agencies .mh-sec-head,
    .audience-section.developers .mh-sec-head { padding: 0 1.2em; }

    /* drop the accent image on phones: it's decorative, and stacking it
       would only push the features carousel down */
    .mh-sec-head:has(.mh-sec-media) { display: block; }
    .mh-sec-media { display: none; }
    .agencies .features-grid,
    .developers .features-grid {
        padding-left: 1.2em;
        padding-right: 1.2em;
        scroll-padding-left: 1.2em;
    }

    .md-typeset .mh-sec-title { font-size: 1.8em; }

    .features-grid {
        gap: 0.9em;
    }

    .features-grid > .feature-card {
        flex-basis: 86%;
        min-width: 0;
    }

    .final-cta { padding: 3.6em 0 4em; }
    .md-typeset .final-cta h2 { font-size: 1.9em; }
}

/* Honor reduced motion: everything visible, nothing moves */
@media (prefers-reduced-motion: reduce) {
    .mh-hero-copy > *,
    .mh-hero-side,
    .mh-showcase,
    html.mh-anim .mh-reveal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    #homeh1.mh-headline em { clip-path: none !important; animation: none !important; }
    .lp > div { opacity: 1 !important; animation: none !important; }
    .mh-term-body .mh-cur,
    .mh-eyebrow .mh-dot,
    .mh-bulb,
    .mh-bulb-arrow,
    .mh-shot-frame { animation: none !important; } /* hint label stays visible, just static */
}


/* === LEGACY LOGO ANIMATION (used outside the home page) === */
.logo {
    width: 100%;
    max-width: 30em;
    overflow: hidden;
    margin: 0.5em auto;
}

@media screen and (max-width: 520px) {
    .logo {
        zoom: 70%;
    }

    .mh-stores { padding: 3.2em 0 3.4em; }
    .mh-stores-track .mh-store-card { flex-basis: 100%; }

    .mh-stores-cta { flex-wrap: wrap; }
}

.lp {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.lp > div {
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
}

.lp1 {
    animation: fadeInLeft 0.8s ease-out forwards;
    width: 23%;
}

.lp1 img {
    transform: scale(1.15);
}

.lp2 {
    animation: fadeInTop 0.8s ease-out forwards;
    animation-delay: 0.2s;
    width: 72%;
}

.lp2 img {
    transform: translateY(-10%);
}

.lp3 {
    animation: fadeInRight 0.8s ease-out forwards;
    animation-delay: 0.5s;
    width: 5%;
    padding: 0 !important;
}

.lp3 img {
    transform: translateY(-20%);
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px) rotate(-90deg);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* === SPONSORS === */
.md-typeset #funding {
    margin-top: 1.25em;
}

.sponsorgallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2em 2.5em;
    margin-bottom: 4em;
}

.sponsorgallery img,
.sponsorgallery svg {
    height: 50px;
    width: auto;
    max-width: none;
}

.sponsorgallery.funding {
    margin-bottom: 1.5em;
}

.sponsorgallery.funding img {
    height: 60px;
}


/* === FUNDING (home) === */
.mh-funding {
    background: var(--maho-paper);
    border-bottom: 1px solid var(--maho-border-light);
    text-align: center;
    padding: 4.2em 0 4.4em;
}

.mh-funding-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 2em;
}

.mh-funding .mh-sec-title,
.mh-funding .mh-sec-lede,
.mh-funding-sublabel {
    text-wrap: balance;
}

.mh-funding .mh-sec-lede {
    margin: 0 auto 2.2em;
}

.mh-funding-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2em 3.5em;
}

.mh-funding-logos img {
    height: 60px;
    width: auto;
}

/* Sponsor logo marquee folded into the funding band */
.mh-funding-marquee {
    max-width: 1180px;
    margin: 2em auto 0;
    padding: 0 2em;
}

.mh-funding-sublabel {
    margin: 0 0 1.8em;
    text-align: center;
    font-family: var(--maho-display);
    font-size: 1.15em;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--maho-text-primary);
}

/* Edge fade so logos slide in/out instead of popping */
.mh-marquee-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.mh-marquee-link {
    display: block;
    cursor: pointer;
}

.mh-marquee-track {
    display: flex;
    width: max-content;
    animation: mhMarquee 42s linear infinite;
}

/* Two identical groups; track shifts by one group (-50%) for a seamless loop */
.mh-marquee-group {
    display: flex;
    align-items: center;
    gap: 4em;
    padding-right: 4em;
    flex-shrink: 0;
}

.mh-marquee-group img,
.mh-marquee-group svg {
    height: 32px;
    width: auto;
    max-width: none;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
}

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

@media screen and (max-width: 760px) {
    .mh-marquee-group { gap: 2.6em; padding-right: 2.6em; }
    .mh-marquee-group img,
    .mh-marquee-group svg { height: 26px; }
}

/* Keep the two fund logos side by side on small screens */
@media screen and (max-width: 520px) {
    .mh-funding-logos { flex-wrap: nowrap; gap: 1.2em; }
    .mh-funding-logos img { height: clamp(30px, 11vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
    .mh-marquee-track { animation: none !important; width: 100%; flex-wrap: wrap; justify-content: center; }
    .mh-marquee-group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
    .mh-marquee-group[aria-hidden="true"] { display: none; }
    .mh-marquee-viewport { -webkit-mask-image: none; mask-image: none; }
    .mh-marquee-group img,
    .mh-marquee-group svg { filter: none; opacity: 1; }
}


/* === BLOG === */
body:has(h1[id=blog]) .md-post--excerpt ul li {
    margin-block: 0;
}

body:has(h1[id=blog]) .md-typeset .admonition,
body:has(h1[id=blog]) .md-typeset details {
    border-width: 0;
    border-left-width: 3px;
}

body:has(h1[id=blog]) .md-typeset .admonition.tip {
    border-color: var(--maho-brand);
}

body:has(h1[id=blog]) .md-typeset .tip > .admonition-title:before,
body:has(h1[id=blog]) .md-typeset .tip > summary:before {
    background-color: var(--maho-brand-dark);
}

body:has(h1[id=blog]) .md-typeset .tip > .admonition-title,
body:has(h1[id=blog]) .md-typeset .tip > summary {
    background-color: rgba(173, 180, 26, 0.1);
}

body:has(h1[id=blog]) .md-post {
    padding-bottom: 2em;
    margin-bottom: 2.5em;
    border-bottom: 1px solid var(--maho-border-light);
}

body:has(h1[id=blog]) .md-post:last-child {
    border-bottom: none;
}

body:has(h1[id=blog]) .md-post__header {
    margin-bottom: 0.5em;
}

body:has(h1[id=blog]) .md-post--excerpt .md-post__header h2 {
    font-family: var(--maho-display);
    font-size: 1.6em;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

body:has(h1[id=blog]) .md-content .md-post h2 a:not(.md-button):not(.mh-btn) {
    text-decoration: none !important;
    color: var(--maho-text-primary);
    transition: color var(--maho-duration) var(--maho-ease);
}

body:has(h1[id=blog]) .md-content .md-post h2 a:not(.md-button):not(.mh-btn):hover {
    color: var(--maho-brand-dark);
}

body:has(h1[id=blog]) .md-post__meta {
    font-family: var(--maho-mono);
    font-size: 0.6rem;
    color: var(--maho-text-tertiary);
}


/* === VIDEO EMBED === */
.video_wrapper {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 400px;
    width: 100%;
    border-radius: var(--maho-radius-md);
    overflow: hidden;
}

.video_wrapper .video_trigger {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(14, 15, 8, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.video_wrapper .video_layer {
    position: relative;
    display: none;
    height: inherit;
    width: inherit;
    margin: auto;
}

.video_wrapper .video_layer iframe {
    border: 0px none transparent;
    height: inherit;
    width: inherit;
    padding: 0;
}

.video_wrapper .video-btn {
    cursor: pointer;
    display: inline-block;
    transition: color var(--maho-duration) var(--maho-ease),
                background-color var(--maho-duration) var(--maho-ease),
                border-color var(--maho-duration) var(--maho-ease);
    padding: 8px 20px;
    font-size: 15px;
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--maho-radius-md);
}

.video_wrapper .video-btn:hover {
    background-color: var(--maho-chartreuse);
    border-color: var(--maho-chartreuse);
    color: var(--maho-ink);
}


/* === AFFILIATE BUTTONS === */
.md-button.affiliate-button {
    position: relative;
    overflow: hidden;
    transition: all var(--maho-duration-slow) var(--maho-ease);
    box-shadow: var(--maho-shadow-sm);
}

.md-button.affiliate-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--maho-shadow-md);
    border-color: var(--maho-brand) !important;
}

.md-button.affiliate-button img {
    transition: transform var(--maho-duration-slow) var(--maho-ease);
}

.md-button.affiliate-button:hover img {
    transform: scale(1.08);
}


/* === FOOTER: same ink as the header === */
.md-footer {
    border-top: none;
}

.md-footer-meta {
    background: var(--maho-ink);
}

.maho-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 2.8rem 2rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--maho-on-ink-soft);
}
.maho-footer a {
    color: var(--maho-on-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}
.maho-footer a:hover {
    color: var(--maho-chartreuse);
}
.maho-footer-brand p {
    margin: 0.75rem 0 0;
    font-size: 0.7rem;
    color: var(--maho-on-ink-soft);
    line-height: 1.7;
}
.maho-footer-heading {
    font-family: var(--maho-mono);
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--maho-on-ink-faint);
    margin: 0 0 1rem;
}
.maho-footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.maho-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--maho-radius-sm);
    background: rgba(244, 245, 232, 0.07);
    border: 1px solid var(--maho-ink-border);
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.maho-footer-social a:hover {
    background: rgba(215, 223, 34, 0.12);
    border-color: var(--maho-ink-border-brand);
    transform: translateY(-2px);
}
.maho-footer-social svg {
    width: 1rem;
    height: 1rem;
    fill: var(--maho-on-ink-soft);
}
.maho-footer-social a:hover svg {
    fill: var(--maho-chartreuse);
}
.maho-footer-subscribe p {
    margin: 0 0 0.25rem;
    color: var(--maho-on-ink-soft);
    font-size: 0.7rem;
}
.maho-footer-newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.maho-footer-newsletter-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--maho-ink-border);
    border-radius: var(--maho-radius-sm);
    background: rgba(244, 245, 232, 0.06);
    color: var(--maho-on-ink);
    font-family: var(--maho-sans);
    font-size: 0.7rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-width: 0;
}
.maho-footer-newsletter-input::placeholder {
    color: var(--maho-on-ink-faint);
}
.maho-footer-newsletter-input:focus {
    border-color: var(--maho-ink-border-brand);
    background: rgba(244, 245, 232, 0.1);
}
.maho-footer-newsletter-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--maho-radius-sm);
    background: var(--maho-chartreuse);
    color: var(--maho-ink);
    font-family: var(--maho-sans);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}
.maho-footer-newsletter-btn:hover {
    background: var(--maho-chartreuse-soft);
    transform: translateY(-1px);
}
.maho-footer-newsletter-btn:active {
    transform: translateY(0);
}
.maho-footer-newsletter-msg {
    font-size: 0.65rem;
    margin-top: 0.5rem;
    color: var(--maho-on-ink-faint);
}
.maho-footer-bottom {
    padding: 1rem 2rem;
    border-top: 1px solid var(--maho-ink-border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--maho-mono);
    font-size: 0.55rem;
    color: var(--maho-on-ink-faint);
}
.maho-footer-bottom a {
    color: var(--maho-on-ink-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}
.maho-footer-bottom a:hover {
    color: var(--maho-chartreuse);
}
@media screen and (max-width: 768px) {
    .maho-footer {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem 1rem;
    }
    .maho-footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        padding: 1rem 1.5rem;
    }
}


/* === DEMO PAGE === */
.md-typeset .grid.cards > ul > li {
    display: flex;
    flex-direction: column;
    border-radius: var(--maho-radius-lg);
    border-color: var(--maho-border);
    transition: border-color var(--maho-duration) var(--maho-ease),
                box-shadow var(--maho-duration) var(--maho-ease);
}

.md-typeset .grid.cards > ul > li:hover {
    border-color: var(--maho-brand);
    box-shadow: var(--maho-shadow-md);
}

.md-typeset .grid.cards > ul > li > center {
    margin-top: auto;
}

.demo-credentials {
    margin-top: 0.5em !important;
}


/* === 404 PAGE === */
.maho-404 {
    text-align: center;
    padding: 5rem 2rem 6rem;
    max-width: 480px;
    margin: 0 auto;
}

.maho-404 h1 {
    font-family: var(--maho-display);
    font-size: 2.5em;
    font-weight: 750;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
    color: var(--maho-text-primary);
}

.maho-404 p {
    color: var(--maho-text-secondary);
    font-size: 1.1em;
    line-height: 1.7;
    margin: 0 0 2rem;
}

.maho-404-actions {
    display: flex;
    gap: 0.8em;
    justify-content: center;
    flex-wrap: wrap;
}