/* Reset & base ------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--me-bg);
    color: var(--me-text);
    font-family: var(--me-font-family);
    font-size: var(--me-fs-base);
    line-height: var(--me-lh-normal);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4, p {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--me-focus-ring);
    outline-offset: 3px;
    border-radius: var(--me-radius-sm);
}

.me-skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    background: var(--me-accent);
    color: #0b1f12;
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: var(--me-radius-sm);
    z-index: 1000;
    transition: top var(--me-transition-fast);
}

.me-skip-link:focus {
    top: 1rem;
}

.me-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Layout helpers ------------------------------------------------------ */
.me-hero,
.me-navbar__inner,
.me-footer__inner,
.me-section {
    max-width: var(--me-content-width);
    margin-inline: auto;
    padding-inline: var(--me-space-5);
}

.me-section {
    padding-block: var(--me-space-8);
}

.me-section--alt {
    background: var(--me-surface);
    max-width: none;
    padding-inline: 0;
}

.me-section--alt > * {
    max-width: var(--me-content-width);
    margin-inline: auto;
    padding-inline: var(--me-space-5);
}

.me-section--split {
    padding-block: var(--me-space-7);
}

.me-grid {
    display: grid;
    gap: var(--me-space-5);
    margin-top: var(--me-space-6);
}

.me-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.me-grid--artists,
.me-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Follow-up "Collectible cards teaser" — text on the left, a horizontally-scrolling row of sample
   cards on the right. A plain 2-column grid (not .me-hero's own asymmetric 1.05fr/0.95fr split,
   since there is no single "hero visual" here to weight against the copy) that collapses to one
   column on tablet/mobile, same breakpoint as every other 2-up layout in this stylesheet. */
.me-cards-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--me-space-6);
    align-items: center;
    margin-top: var(--me-space-6);
}

/* Same JS-free horizontal scroll-snap idiom as the main app's .home-carousel (wwwroot/css/site.css,
   "Card, Avatar e Homepage" §5) — touch/swipe on mobile, wheel/trackpad/scrollbar on desktop, no JS
   carousel library. Reimplemented here (not shared) since /info has its own dedicated stylesheet. */
.me-cards-carousel {
    display: flex;
    gap: var(--me-space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: var(--me-space-3);
    -webkit-overflow-scrolling: touch;
}

.me-example-card {
    flex: 0 0 auto;
    width: 150px;
    scroll-snap-align: start;
    text-align: center;
    background: var(--me-surface);
    border: 1px solid var(--me-surface-border);
    border-radius: var(--me-radius-md);
    padding: var(--me-space-3);
}

.me-example-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: calc(var(--me-radius-md) - 4px);
}

.me-example-card__name {
    margin-top: var(--me-space-2);
    font-weight: 700;
    font-size: var(--me-fs-sm);
}

.me-section__cta {
    margin-top: var(--me-space-6);
    text-align: center;
}

.me-section__footnote {
    margin-top: var(--me-space-5);
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

.me-section__lead {
    margin-top: var(--me-space-4);
    max-width: 62ch;
    color: var(--me-text-muted);
    font-size: var(--me-fs-lg);
}

/* Buttons -------------------------------------------------------------- */
.me-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--me-space-2);
    padding: 0.85rem 1.6rem;
    border-radius: var(--me-radius-pill);
    font-weight: 600;
    font-size: var(--me-fs-sm);
    transition: transform var(--me-transition-fast), box-shadow var(--me-transition-fast), background var(--me-transition-fast), border-color var(--me-transition-fast);
    border: 1px solid transparent;
    white-space: nowrap;
}

.me-btn--primary {
    background: var(--me-accent);
    color: #06170c;
    box-shadow: var(--me-glow-accent);
}

.me-btn--primary:hover {
    background: var(--me-accent-strong);
    transform: translateY(-1px);
}

.me-btn--ghost {
    background: transparent;
    border-color: var(--me-surface-border);
    color: var(--me-text);
}

.me-btn--ghost:hover {
    border-color: var(--me-accent);
    color: var(--me-accent);
}

.me-btn--sm {
    padding: 0.55rem 1.15rem;
    font-size: var(--me-fs-xs);
}

/* Navbar ---------------------------------------------------------------- */
.me-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--me-surface-border);
}

/* backdrop-filter lives on this pseudo-element, not on .me-navbar itself: a `filter`/
   `backdrop-filter` on an element establishes a new containing block for its `position: fixed`
   descendants — with it on .me-navbar directly, the mobile menu's `.me-navbar__menu` (fixed,
   `inset: var(--me-header-height) 0 0 0`, meant to fill the viewport below the header) resolved
   its inset against .me-navbar's own ~76px-tall box instead of the viewport, collapsing it to a
   sliver instead of a full-screen overlay. An empty ::before carries the same visual frosted-glass
   background/blur (z-index: -1 keeps it behind the navbar's own content, still above the page
   behind it thanks to .me-navbar's own z-index: 100) without being an ancestor of
   .me-navbar__menu, so it never becomes fixed-descendants' containing block. */
.me-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(18, 18, 18, 0.86);
    backdrop-filter: blur(10px);
}

.me-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--me-header-height);
}

.me-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: var(--me-fs-lg);
    letter-spacing: 0.02em;
}

.me-navbar__brand-logo {
    height: 34px;
    width: auto;
}

.me-navbar__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
}

.me-navbar__toggle span {
    width: 22px;
    height: 2px;
    background: var(--me-text);
    border-radius: 2px;
    transition: transform var(--me-transition-fast), opacity var(--me-transition-fast);
}

.me-navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--me-space-6);
}

.me-navbar__links {
    display: flex;
    align-items: center;
    gap: var(--me-space-5);
}

.me-navbar__links a {
    font-size: var(--me-fs-sm);
    color: var(--me-text-muted);
    transition: color var(--me-transition-fast);
}

.me-navbar__links a:hover {
    color: var(--me-text);
}

.me-navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--me-space-5);
}

/* Language switcher ------------------------------------------------------ */
.me-lang-switch {
    display: flex;
    align-items: center;
    gap: var(--me-space-2);
    font-size: var(--me-fs-xs);
    color: var(--me-text-muted);
}

.me-lang-switch__option {
    padding: 0.2rem 0.35rem;
    border-radius: var(--me-radius-sm);
    transition: color var(--me-transition-fast);
}

.me-lang-switch__option.is-active {
    color: var(--me-accent);
    font-weight: 700;
}

.me-lang-switch__option:not(.is-active):hover {
    color: var(--me-text);
}

.me-lang-switch__divider {
    color: var(--me-surface-border);
}

/* Hero -------------------------------------------------------------------- */
.me-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--me-space-7);
    padding-block: var(--me-space-9) var(--me-space-8);
}

.me-eyebrow {
    color: var(--me-accent);
    font-weight: 700;
    font-size: var(--me-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--me-space-3);
}

.me-hero__title {
    font-size: var(--me-fs-4xl);
    line-height: var(--me-lh-tight);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.me-hero__subtitle {
    margin-top: var(--me-space-4);
    color: var(--me-text-muted);
    font-size: var(--me-fs-lg);
    max-width: 52ch;
}

.me-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--me-space-4);
    margin-top: var(--me-space-6);
}

.me-hero__visual-placeholder {
    aspect-ratio: 16 / 11;
    border-radius: var(--me-radius-lg);
    background: linear-gradient(160deg, var(--me-surface) 0%, var(--me-surface-2) 100%);
    border: 1px solid var(--me-surface-border);
    box-shadow: var(--me-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--me-space-6);
}

.me-hero__visual-image {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top;
    border-radius: var(--me-radius-lg);
    border: 1px solid var(--me-surface-border);
    box-shadow: var(--me-shadow-md);
}

.me-hero__visual-badge {
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
    border: 1px dashed var(--me-surface-border);
    border-radius: var(--me-radius-pill);
    padding: var(--me-space-3) var(--me-space-5);
}

/* Section header ------------------------------------------------------------ */
.me-section-header {
    max-width: 62ch;
}

.me-section-header--center {
    margin-inline: auto;
    text-align: center;
}

.me-section-header__title {
    font-size: var(--me-fs-3xl);
    font-weight: 800;
    line-height: var(--me-lh-tight);
    letter-spacing: -0.01em;
}

.me-section-header__subtitle {
    margin-top: var(--me-space-3);
    color: var(--me-text-muted);
    font-size: var(--me-fs-lg);
}

/* Cards -------------------------------------------------------------------- */
.me-card {
    background: var(--me-surface);
    border: 1px solid var(--me-surface-border);
    border-radius: var(--me-radius-md);
    padding: var(--me-space-5);
    transition: transform var(--me-transition-base), border-color var(--me-transition-base), box-shadow var(--me-transition-base);
}

.me-card:hover {
    transform: translateY(-3px);
    border-color: rgba(29, 185, 84, 0.35);
    box-shadow: var(--me-glow-accent);
}

.me-feature-card__icon {
    font-size: 1.75rem;
    margin-bottom: var(--me-space-3);
}

.me-feature-card__title {
    font-size: var(--me-fs-lg);
    font-weight: 700;
}

.me-feature-card__description {
    margin-top: var(--me-space-2);
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

.me-artist-card {
    padding: 0;
    overflow: hidden;
    text-align: center;
}

.me-artist-card__image {
    background: var(--me-surface-2);
}

/* The <img> carries explicit width="240" height="240" (for aspect-ratio/layout-shift purposes —
   see ArtistCard/Default.cshtml) but nothing previously scaled it UP to fill a wider card: the
   global `img { max-width: 100% }` reset only ever caps size down, so on any card wider than
   240px (a single-column mobile layout, in particular) the photo stayed a fixed 240x240 square
   with empty background showing to its right. */
.me-artist-card__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.me-artist-card__body {
    padding: var(--me-space-4);
}

.me-artist-card__name {
    font-weight: 700;
}

.me-artist-card__genre {
    margin-top: var(--me-space-1);
    color: var(--me-text-muted);
    font-size: var(--me-fs-xs);
}

.me-audience-card__title {
    font-size: var(--me-fs-xl);
    font-weight: 700;
}

.me-audience-card__description {
    margin-top: var(--me-space-2);
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

.me-audience-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--me-space-2);
    margin-top: var(--me-space-4);
    color: var(--me-accent);
    font-weight: 600;
    font-size: var(--me-fs-sm);
}

/* Steps --------------------------------------------------------------------- */
.me-steps {
    margin-top: var(--me-space-7);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--me-space-5);
}

.me-steps__item {
    position: relative;
    padding-top: var(--me-space-5);
    border-top: 2px solid var(--me-surface-border);
}

.me-steps__number {
    display: block;
    color: var(--me-accent);
    font-weight: 800;
    font-size: var(--me-fs-xl);
    margin-bottom: var(--me-space-2);
}

.me-steps__title {
    font-size: var(--me-fs-base);
    font-weight: 700;
}

.me-steps__description {
    margin-top: var(--me-space-2);
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

/* Pricing --------------------------------------------------------------------- */
.me-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--me-space-6);
}

.me-pricing-card--highlighted {
    border-color: var(--me-accent);
    box-shadow: var(--me-glow-accent);
}

.me-pricing-card__badge {
    position: absolute;
    top: -0.75rem;
    left: var(--me-space-5);
    background: var(--me-accent);
    color: #06170c;
    font-size: var(--me-fs-xs);
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: var(--me-radius-pill);
}

.me-pricing-card__name {
    font-size: var(--me-fs-lg);
    font-weight: 700;
}

.me-pricing-card__price {
    margin-top: var(--me-space-3);
    display: flex;
    align-items: baseline;
    gap: var(--me-space-2);
}

.me-pricing-card__amount {
    font-size: var(--me-fs-3xl);
    font-weight: 800;
}

.me-pricing-card__suffix {
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

.me-pricing-card__description {
    margin-top: var(--me-space-2);
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

.me-pricing-card__features {
    margin-top: var(--me-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--me-space-2);
    flex-grow: 1;
}

.me-pricing-card__features li {
    position: relative;
    padding-left: var(--me-space-5);
    font-size: var(--me-fs-sm);
    color: var(--me-text);
}

.me-pricing-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--me-accent);
}

.me-pricing-card__cta {
    margin-top: var(--me-space-6);
    width: 100%;
}

.me-pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--me-space-3);
    margin-top: var(--me-space-6);
}

.me-pricing-toggle__note {
    color: var(--me-text-muted);
    font-size: var(--me-fs-xs);
    text-align: center;
    margin-top: var(--me-space-2);
}

.me-badge {
    display: inline-block;
    background: var(--me-accent-soft);
    color: var(--me-accent);
    font-weight: 700;
    font-size: var(--me-fs-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: var(--me-radius-pill);
    margin-bottom: var(--me-space-4);
    /* A badge may now carry a full sentence (Prezzi): let it wrap and stay centred inside its container. */
    max-width: 100%;
    text-align: center;
    line-height: 1.4;
}

/* Pricing comparison table --------------------------------------------------- */
.me-compare-table__title {
    text-align: center;
    margin-bottom: var(--me-space-6);
}

.me-table-scroll {
    overflow-x: auto;
}

.me-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--me-fs-sm);
}

.me-compare-table th,
.me-compare-table td {
    padding: var(--me-space-4) var(--me-space-5);
    text-align: center;
    border-bottom: 1px solid var(--me-surface-border);
}

.me-compare-table thead th {
    color: var(--me-text);
    font-size: var(--me-fs-base);
    font-weight: 700;
    border-bottom: 2px solid var(--me-surface-border);
}

.me-compare-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--me-text);
    white-space: nowrap;
}

.me-compare-table tbody td {
    color: var(--me-text-muted);
}

.me-compare-table tbody tr:hover {
    background: var(--me-surface);
}

.me-compare-table__note {
    margin-top: var(--me-space-5);
    color: var(--me-text-muted);
    font-size: var(--me-fs-xs);
    text-align: center;
}

/* FAQ ------------------------------------------------------------------------- */
.me-faq {
    margin-top: var(--me-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--me-space-3);
    max-width: 74ch;
}

.me-faq__item {
    background: var(--me-surface);
    border: 1px solid var(--me-surface-border);
    border-radius: var(--me-radius-md);
    padding: var(--me-space-4) var(--me-space-5);
}

.me-faq__question {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.me-faq__question::-webkit-details-marker {
    display: none;
}

.me-faq__question::after {
    content: "+";
    color: var(--me-accent);
    font-size: 1.25rem;
    margin-left: var(--me-space-4);
    transition: transform var(--me-transition-fast);
}

details[open] .me-faq__question::after {
    transform: rotate(45deg);
}

.me-faq__answer {
    margin-top: var(--me-space-3);
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

.me-faq-group {
    margin-top: var(--me-space-7);
}

.me-faq-group__title {
    font-size: var(--me-fs-xl);
    font-weight: 700;
    margin-bottom: var(--me-space-2);
}

/* CTA banner -------------------------------------------------------------------- */
.me-cta-banner {
    max-width: var(--me-content-width);
    margin: var(--me-space-8) auto;
    padding: var(--me-space-8) var(--me-space-6);
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(29, 185, 84, 0.12), transparent 60%), var(--me-surface);
    border: 1px solid var(--me-surface-border);
    border-radius: var(--me-radius-lg);
}

.me-cta-banner__title {
    font-size: var(--me-fs-3xl);
    font-weight: 800;
}

.me-cta-banner__subtitle {
    margin-top: var(--me-space-3);
    color: var(--me-text-muted);
    font-size: var(--me-fs-lg);
}

.me-cta-banner .me-btn {
    margin-top: var(--me-space-6);
}

/* Screenshot showcase -------------------------------------------------------------- */
.me-screenshot {
    margin-top: var(--me-space-6);
}

.me-screenshot__image {
    width: 100%;
    border-radius: var(--me-radius-lg);
    border: 1px solid var(--me-surface-border);
    box-shadow: var(--me-shadow-md);
}

.me-screenshot__caption {
    margin-top: var(--me-space-3);
    text-align: center;
    color: var(--me-text-muted);
    font-size: var(--me-fs-xs);
}

/* How-it-works step blocks ---------------------------------------------------------- */
.me-how-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--me-space-7);
    padding-block: var(--me-space-8);
    border-bottom: 1px solid var(--me-surface-border);
}

.me-how-step:last-of-type {
    border-bottom: none;
}

.me-how-step--reverse .me-how-step__text {
    order: 2;
}

.me-how-step__number {
    color: var(--me-accent);
    font-weight: 800;
    font-size: var(--me-fs-2xl);
}

.me-how-step__title {
    margin-top: var(--me-space-2);
    font-size: var(--me-fs-2xl);
    font-weight: 800;
}

.me-how-step__description {
    margin-top: var(--me-space-3);
    color: var(--me-text-muted);
    font-size: var(--me-fs-lg);
}

/* Text sections (Famiglie / Scuole / Partner) ---------------------------------------- */
.me-text-section {
    max-width: 74ch;
    margin-top: var(--me-space-7);
}

.me-text-section__title {
    font-size: var(--me-fs-2xl);
    font-weight: 700;
}

.me-text-section p {
    margin-top: var(--me-space-3);
    color: var(--me-text-muted);
    font-size: var(--me-fs-lg);
}

/* Mini fix "Migliora visibilità me-disclaimer" — stesso trattamento "callout" già usato da
   .me-form__success (accent-soft come sfondo pieno, testo in --me-accent, font-weight 600): prima
   era un bordo sottile a sinistra su sfondo piatto con testo muted, facile da perdere a colpo
   d'occhio. Stesse variabili di design esistenti, nessun nuovo colore introdotto. */
.me-disclaimer {
    margin-top: var(--me-space-6);
    padding: var(--me-space-4) var(--me-space-5);
    border: 1px solid var(--me-accent);
    background: var(--me-accent-soft);
    color: var(--me-accent);
    font-size: var(--me-fs-base);
    font-weight: 600;
    border-radius: var(--me-radius-sm);
}

/* Sprint "MusicExplorer Launch Countdown and Feature Unlock" — .me-btn sets its own `display`, which
   would beat the browser's [hidden] rule; this keeps launch-gated links truly hidden until revealed. */
.launch-gated[hidden] {
    display: none !important;
}

/* Forms ------------------------------------------------------------------------------- */
.me-form {
    max-width: 62ch;
    margin-top: var(--me-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--me-space-4);
}

.me-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--me-space-2);
}

.me-form__field label {
    font-size: var(--me-fs-sm);
    font-weight: 600;
}

.me-form__field input,
.me-form__field select,
.me-form__field textarea {
    background: var(--me-surface);
    border: 1px solid var(--me-surface-border);
    border-radius: var(--me-radius-sm);
    padding: 0.75rem 1rem;
    color: var(--me-text);
    font: inherit;
}

.me-form__field textarea {
    min-height: 140px;
    resize: vertical;
}

.me-form__field input:focus,
.me-form__field select:focus,
.me-form__field textarea:focus {
    border-color: var(--me-accent);
}

.me-form__error {
    color: var(--me-danger);
    font-size: var(--me-fs-xs);
}

.me-form__hint {
    color: var(--me-text-muted);
    font-size: var(--me-fs-xs);
}

.me-form__success {
    margin-top: var(--me-space-5);
    padding: var(--me-space-4) var(--me-space-5);
    background: var(--me-accent-soft);
    color: var(--me-accent);
    border-radius: var(--me-radius-sm);
    font-weight: 600;
}

/* Footer -------------------------------------------------------------------------------- */
.me-footer {
    border-top: 1px solid var(--me-surface-border);
    background: var(--me-surface);
    margin-top: var(--me-space-8);
}

.me-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--me-space-6);
    padding-block: var(--me-space-7);
}

.me-footer__logo {
    font-weight: 800;
    font-size: var(--me-fs-lg);
}

.me-footer__description {
    margin-top: var(--me-space-3);
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
    max-width: 32ch;
}

.me-footer__nav ul,
.me-footer__legal-links {
    display: flex;
    flex-direction: column;
    gap: var(--me-space-3);
}

.me-footer__nav a,
.me-footer__legal-links a {
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
    transition: color var(--me-transition-fast);
}

.me-footer__nav a:hover,
.me-footer__legal-links a:hover {
    color: var(--me-text);
}

.me-footer h3 {
    font-size: var(--me-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--me-text-muted);
    margin-bottom: var(--me-space-3);
}

.me-footer__social-placeholder {
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

.me-footer__bottom {
    border-top: 1px solid var(--me-surface-border);
    padding-block: var(--me-space-4);
    text-align: center;
}

.me-footer__bottom p {
    color: var(--me-text-muted);
    font-size: var(--me-fs-xs);
}

/* Error page ------------------------------------------------------------------------------ */
.me-error {
    text-align: center;
    padding-block: var(--me-space-9);
}

.me-error__title {
    font-size: var(--me-fs-3xl);
    font-weight: 800;
}

.me-error__text {
    margin-top: var(--me-space-4);
    color: var(--me-text-muted);
}

.me-error__request-id {
    margin-top: var(--me-space-3);
    color: var(--me-text-muted);
    font-size: var(--me-fs-xs);
}

.me-error .me-btn {
    margin-top: var(--me-space-6);
}

/* Legal pages ------------------------------------------------------------------------------ */
.me-legal {
    max-width: 74ch;
    margin-inline: auto;
    padding-inline: var(--me-space-5);
    padding-block: var(--me-space-8);
}

.me-legal__meta {
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
    margin-top: var(--me-space-2);
}

.me-legal__placeholder-notice {
    margin-top: var(--me-space-5);
    padding: var(--me-space-4) var(--me-space-5);
    border-left: 3px solid var(--me-accent);
    background: var(--me-surface);
    color: var(--me-text-muted);
    font-size: var(--me-fs-sm);
}

.me-legal section {
    margin-top: var(--me-space-7);
}

.me-legal h2 {
    font-size: var(--me-fs-xl);
    font-weight: 700;
}

.me-legal p {
    margin-top: var(--me-space-3);
    color: var(--me-text-muted);
}

/* Reveal-on-scroll ------------------------------------------------------------------------ */
.me-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.me-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .me-reveal {
        opacity: 1;
        transform: none;
    }
}

/* Responsive --------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .me-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .me-grid--artists,
    .me-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .me-steps {
        grid-template-columns: repeat(3, 1fr);
    }

    .me-footer__inner {
        grid-template-columns: 1.2fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .me-hero {
        grid-template-columns: 1fr;
        padding-block: var(--me-space-7) var(--me-space-6);
    }

    .me-hero__title {
        font-size: var(--me-fs-3xl);
    }

    /* Explicit request: on mobile, /info hides three elements of its hero: (1) the FIRST primary button of its content ("Prova
       MusicExplorer" CTA), (2) the button right after it ("Scopri come funziona", the hero's ghost button: second child of the hero
       actions, the only ghost there) and (3) the hero's screenshot container (.me-hero__visual, next sibling of .me-hero__content).
       Scoped to /info only (body.me-page-info-home, set by Info/Index.cshtml) and to the hero's own children, so the other primary
       buttons of the page (pricing teaser, final CTA banner), the other ghost buttons (e.g. the "how it works" section) and every other
       Info page keep theirs. The elements stay in the DOM with their link/text untouched; desktop (> 768px) never matches. */
    .me-page-info-home .me-hero__actions > .me-btn.me-btn--primary:first-child,
    .me-page-info-home .me-hero__actions > .me-btn.me-btn--ghost:nth-child(2),
    .me-page-info-home .me-hero > .me-hero__visual {
        display: none;
    }

    .me-navbar__toggle {
        display: flex;
    }

    .me-navbar__menu {
        position: fixed;
        inset: var(--me-header-height) 0 0 0;
        background: var(--me-bg);
        flex-direction: column;
        align-items: flex-start;
        padding: var(--me-space-6) var(--me-space-5);
        gap: var(--me-space-6);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--me-transition-base), transform var(--me-transition-base);
        overflow-y: auto;
    }

    .me-navbar__menu.is-open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .me-navbar__links {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--me-space-4);
        width: 100%;
    }

    .me-navbar__links a {
        font-size: var(--me-fs-lg);
        color: var(--me-text);
    }

    .me-navbar__actions {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: var(--me-space-4);
    }

    .me-navbar__actions .me-btn {
        width: 100%;
    }

    .me-grid--3,
    .me-grid--artists,
    .me-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .me-cards-teaser {
        grid-template-columns: 1fr;
    }

    .me-steps {
        grid-template-columns: 1fr;
    }

    .me-how-step,
    .me-how-step--reverse .me-how-step__text {
        grid-template-columns: 1fr;
        order: initial;
    }

    .me-how-step {
        gap: var(--me-space-5);
    }

    /* Explicit request: on mobile, the icon and title of a feature card should sit side by side,
       not icon-above-title-below as the desktop stacked layout does. Icon and title become the
       first two items of a wrapping flex row (both size to their own content, so together they
       never fill the row); the description is forced onto its own full-width line after them via
       flex-basis: 100%, the standard "break to a new row" trick for a flex-wrap container. */
    .me-feature-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--me-space-3);
    }

    .me-feature-card__icon {
        margin-bottom: 0;
    }

    .me-feature-card__description {
        flex-basis: 100%;
        margin-top: var(--me-space-2);
    }

    /* Same side-by-side treatment for the numbered "01/02/..." how-it-works steps: the number
       sits next to the title instead of above it, description on its own row below. */
    .me-how-step__text {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: var(--me-space-3);
    }

    .me-how-step__title {
        margin-top: 0;
    }

    .me-how-step__description {
        flex-basis: 100%;
    }

    .me-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .me-grid--3,
    .me-grid--4 {
        grid-template-columns: 1fr;
    }

    /* Explicit request: artist cards are photo+name+genre, short enough to stay legible two per
       row even on a narrow phone — unlike .me-grid--3/--4's feature cards, which carry a full
       description paragraph and need the full width. Narrower gap here too, so two cards plus
       their gap still fit comfortably inside the same side padding as everything else. */
    .me-grid--artists {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--me-space-3);
    }

    .me-footer__inner {
        grid-template-columns: 1fr;
    }

    .me-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .me-section-header__title {
        font-size: var(--me-fs-2xl);
    }
}