/* Marketing Magician, home page only (linked from home.blade.php; theme.css is at its size budget).
   Under 768px the long card sections swipe sideways (.mm-swipe on the existing grids) and stats become a 2x2 grid.
   768px and up keep the grids from theme.css. The dots row is empty and hidden until theme.js fills it.
   Also: the service-card badge, the wish panel and form grid, and the section art (wish lamp, FAQ bubbles). No motion here:
   the art animates only inside its own SVG <style>. */
.mm-swipe-dots { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.mm-swipe-dots button { width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0; border-radius: 50%; background: none; box-shadow: none; transform: none; }
.mm-swipe-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #CFC8F2; transition: width 200ms var(--mm-eo), background-color 200ms; }
.mm-swipe-dots button[aria-current="true"]::before { width: 24px; background: var(--mm-ink); }
.mm-dark .mm-swipe-dots button::before { background: rgba(255, 255, 255, .35); }
.mm-dark .mm-swipe-dots button[aria-current="true"]::before { background: var(--mm-gold); }
@media (min-width: 768px) {
    .mm-swipe-dots { display: none; }
}
/* Service-card icon badge (the partial icons sit on a 56px tile) and the wide card's two-column item list. */
.mm-ico-b { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--mm-gold); color: var(--mm-ink); }
.mm-svc-b + .mm-svc-items { margin-top: var(--mm-sp-2); }
.mm-svc--wide .mm-ico-b { background: var(--mm-ink); color: var(--mm-gold); }
@media (min-width: 1024px) {
    .mm-svc--wide .mm-svc-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    /* The track bleeds into the section gutter so cards peek at the screen edge; it scrolls inside itself, never the page. */
    .mm-swipe { --mm-swipe-g: var(--mm-sp-2); display: flex; gap: 12px; margin-inline: calc(-1 * var(--mm-swipe-g)); padding: 4px var(--mm-swipe-g) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--mm-swipe-g); scrollbar-width: none; }
    #tools .mm-swipe { --mm-swipe-g: var(--mm-sp-3); }
    .mm-swipe::-webkit-scrollbar { display: none; }
    .mm-swipe:focus-visible { outline-offset: -3px; }
    /* Every card, bento sizes included, is an equal slide. The scroll-driven reveal would key off the track, so it is off. */
    .mm-swipe > * { flex: 0 0 85%; min-width: 0; scroll-snap-align: start; animation: none; }
    /* The panel's row gap would also sit above the dots, so the gap moves onto the copy column. */
    .mm-tools { row-gap: 0; }
    .mm-tools-l { margin-bottom: var(--mm-sp-4); }
    .mm-tools > .mm-swipe-dots { flex: 1 0 100%; }
    .mm-stats-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-stats-2x2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .mm-stats-2x2 .mm-num { font-size: 27px; }
    /* The lead service card shows its first four items on phones; the rest show from 768px up. */
    .mm-svc--lead .mm-svc-items li:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mm-swipe { scroll-behavior: auto; }
    .mm-swipe-dots button::before { transition: none; }
}
/* Home wish form grid (moved from theme.css for the size budget). */
.mm-wish-row form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; column-gap: var(--mm-sp-2); max-width: none; margin: 0; }
.mm-wish-row label { margin: var(--mm-sp-2) 0 var(--mm-sp-1); color: #FFFFFF; }
.mm-wish-row label:first-of-type { margin-top: 0; }
.mm-wish-row :is(input, select) { max-width: none; border-color: var(--mm-ink-line); background: var(--mm-ink-2); color: #FFFFFF; }
.mm-wish-row :is(input, select):focus-visible { border-color: var(--mm-gold); }
.mm-wish-row input::placeholder { color: #B4ABF5; }
.mm-wish-row button[type=submit] { width: 100%; margin-top: var(--mm-sp-2); background: var(--mm-gold); color: var(--mm-ink); }
.mm-wish-row button[type=submit]:hover { box-shadow: 0 8px 24px rgba(242, 185, 44, .35); }
.mm-wish-row .error { margin-top: 4px; color: #FFB4AB; }
.mm-wish-row > form > p { grid-column: 1 / -1; }
.mm-wish-row form > .dt-captcha { grid-column: 1 / -1; grid-row: 20; margin-top: var(--mm-sp-2); } /* under the button (owner) */
/* From 768px up the fields pair into two columns (the default three fields: select + name, then WhatsApp + button). */
@media (min-width: 768px) {
    .mm-wish-row form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-wish-row form > label:nth-of-type(odd), .mm-wish-row form > label:nth-of-type(odd) + *, .mm-wish-row form > label:nth-of-type(odd) + * + .error { grid-column: 1; }
    .mm-wish-row form > label:nth-of-type(even), .mm-wish-row form > label:nth-of-type(even) + *, .mm-wish-row form > label:nth-of-type(even) + * + .error { grid-column: 2; }
    .mm-wish-row form > label { grid-row: 1; }
    .mm-wish-row form > label + * { grid-row: 2; }
    .mm-wish-row form > label + * + .error { grid-row: 3; }
    .mm-wish-row form > label:nth-of-type(2) { margin-top: 0; }
    .mm-wish-row form > label:nth-of-type(n+3) { grid-row: 4; }
    .mm-wish-row form > label:nth-of-type(n+3) + * { grid-row: 5; }
    .mm-wish-row form > label:nth-of-type(n+3) + * + .error { grid-row: 6; }
    .mm-wish-row form > label:nth-of-type(n+5) { grid-row: 7; }
    .mm-wish-row form > label:nth-of-type(n+5) + * { grid-row: 8; }
    .mm-wish-row form > label:nth-of-type(n+5) + * + .error { grid-row: 9; }
    .mm-wish-row button[type=submit] { grid-area: 2 / 2; }
    .mm-wish-row form:has(> label:nth-of-type(2)) button[type=submit] { grid-area: 5 / 1; }
    .mm-wish-row form:has(> label:nth-of-type(3)) button[type=submit] { grid-area: 5 / 2; }
    .mm-wish-row form:has(> label:nth-of-type(4)) button[type=submit] { grid-area: 8 / 1; }
    .mm-wish-row form:has(> label:nth-of-type(5)) button[type=submit] { grid-area: 8 / 2; }
    .mm-wish-row input[name=form] + .error, .mm-wish-row > form > p { grid-area: 10 / 1 / auto / -1; }
}
/* Wish art (partials/illus/wish): in the flow under 768px; 768-1023px it sits in the panel's empty top-right corner,
   beside the heading and intro (300x200 viewBox: 198px wide at 132px). From 1024px a small art column sits left of the
   heading, intro and form (one row of fields + button when it has up to 3 fields) in the right column. */
.mm-wish-art { display: flex; justify-content: center; margin: 0 0 var(--mm-sp-3); pointer-events: none; }
.mm-wish-art svg { display: block; height: 120px; width: auto; max-width: 100%; }
@media (min-width: 768px) {
    .mm-wish { position: relative; }
    .mm-wish-art { position: absolute; top: var(--mm-sp-2); right: var(--mm-sp-6); margin: 0; }
    .mm-wish-art svg { height: 132px; }
    .mm-wish > h2 { max-width: calc(100% - 222px); }
    .mm-wish > p { max-width: min(48ch, calc(100% - 222px)); }
}
@media (min-width: 1024px) {
    .mm-wish { display: grid; grid-template-columns: clamp(170px, 18vw, 240px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--mm-sp-4); padding: var(--mm-sp-4) var(--mm-sp-6); }
    .mm-wish > :not(.mm-wish-art) { grid-column: 2; }
    .mm-wish > h2 { grid-row: 2; max-width: none; }
    .mm-wish > p { grid-row: 3; max-width: 60ch; margin-bottom: 0; }
    .mm-wish > .mm-wish-row { grid-row: 4; margin-top: var(--mm-sp-3); }
    .mm-wish-art { position: static; grid-column: 1; grid-row: 1 / -1; align-self: center; }
    .mm-wish-art svg { width: 100%; height: auto; max-height: 180px; }
    .mm-wish-row form:not(:has(> label:nth-of-type(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
    .mm-wish-row form:not(:has(> label:nth-of-type(4))) > label { grid-row: 1; margin-top: 0; }
    .mm-wish-row form:not(:has(> label:nth-of-type(4))) > label + * { grid-row: 2; }
    .mm-wish-row form:not(:has(> label:nth-of-type(4))) > label + * + .error { grid-row: 3; }
    .mm-wish-row form:not(:has(> label:nth-of-type(4))) > label:nth-of-type(3), .mm-wish-row form:not(:has(> label:nth-of-type(4))) > label:nth-of-type(3) + *, .mm-wish-row form:not(:has(> label:nth-of-type(4))) > label:nth-of-type(3) + * + .error { grid-column: 3; }
    .mm-wish-row form:not(:has(> label:nth-of-type(4))) button[type=submit] { grid-area: 2 / 4; margin-top: 0; white-space: nowrap; }
}
/* FAQ art (partials/illus/faq): after the intro and before the WhatsApp button in the left column. Centred where the
   columns stack (and at narrow side-by-side widths); from 1024px up it is left-aligned. */
.mm-faq-art { display: flex; justify-content: center; margin-top: var(--mm-sp-3); pointer-events: none; }
.mm-faq-art svg { display: block; height: 128px; width: auto; max-width: 100%; }
.mm-faq-art + .mm-btn { margin-top: var(--mm-sp-3); }
@media (min-width: 1024px) {
    .mm-faq-art { justify-content: flex-start; margin-top: var(--mm-sp-4); }
    .mm-faq-art svg { height: 200px; }
}
/* Phones show no section art: the hero, wish and FAQ illustrations are hidden under 768px. */
@media (max-width: 767.98px) {
    .mm-hero-art, .mm-wish-art, .mm-faq-art { display: none; }
    /* The hero kicker stays on one line on phones: a touch smaller and tighter, never wrapping. */
    .mm-hero .mm-kicker { max-width: 100%; padding-inline: 12px; font-size: min(13px, 3.3vw); white-space: nowrap; }
}

/* Popular packages (owner picked sample L, 2026-10-09): one big best-value card, the rest stacked beside it. */
.mm-hpk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--mm-sp-2) var(--mm-sp-4); margin-bottom: var(--mm-sp-6); }
.mm-hpk-head .mm-sec-head { margin-bottom: 0; }
.mm-hpk-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; color: var(--mm-on-ink); font-size: var(--mm-fs-sm); font-weight: 700; }
.mm-hpk-trust span { display: inline-flex; align-items: center; gap: 6px; }
.mm-hpk-trust svg, .mm-hpk-big li svg { flex: none; width: 18px; height: 18px; color: var(--mm-gold); }
.mm-hpk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-sp-3); }
.mm-hpk-big { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px; border-radius: 28px; background: linear-gradient(150deg, var(--mm-ink-3), var(--mm-ink-2)); }
.mm-hpk-big::after { content: ""; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(rgba(242, 185, 44, .32), transparent 70%); pointer-events: none; }
.mm-hpk-rib { align-self: flex-start; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: var(--mm-gold); color: var(--mm-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mm-hpk-h { margin: 0; color: inherit; font-family: var(--mm-font-body); font-size: var(--mm-fs-h3); font-weight: 800; line-height: 1.25; }
.mm-hpk-big .mm-hpk-h { font-family: var(--mm-font-display); font-size: 31px; font-weight: 600; line-height: 1.15; }
.mm-hpk p { margin: 8px 0 0; color: var(--mm-on-ink); }
.mm-hpk-big p { max-width: 44ch; }
.mm-hpk-big ul { display: grid; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.mm-hpk-big li { display: flex; gap: 10px; font-weight: 600; }
.mm-hpk-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--mm-ink-line); }
.mm-hpk-pr s { margin-right: 8px; color: var(--mm-on-ink); opacity: .7; }
.mm-hpk-pr .mm-num { color: var(--mm-gold); font-family: var(--mm-font-display); font-size: 31px; font-weight: 600; line-height: 1.1; }
.mm-hpk-big .mm-hpk-pr .mm-num { font-size: 40px; }
.mm-hpk-pr small { display: block; margin-top: 4px; color: #7BE0B5; font-size: 13px; font-weight: 700; }
.mm-hpk-side { display: grid; gap: var(--mm-sp-3); grid-auto-rows: 1fr; }
.mm-hpk-sm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 24px; border-radius: var(--mm-r-card); background: var(--mm-ink-2); }
.mm-hpk-sm p { grid-column: 1; margin: 0; font-size: var(--mm-fs-sm); }
.mm-hpk-sm .mm-hpk-pr { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.mm-hpk-sm .mm-hpk-pr s { display: block; margin: 0; font-size: 13px; }
.mm-hpk-sm .mm-btn { grid-column: 1 / -1; margin-top: 12px; }
.mm-hpk-sm--light { background: #FFFFFF; color: var(--mm-ink); }
.mm-hpk-sm--light p { color: var(--mm-muted); }
.mm-hpk-sm--light .mm-hpk-pr .mm-num { color: var(--mm-ink); }
.mm-hpk-sm--light .mm-btn { color: #FFFFFF; }
@media (min-width: 1024px) {
    .mm-hpk:not(.mm-hpk--one) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .mm-hpk-big { padding: 24px; border-radius: var(--mm-r-card); }
    .mm-hpk-big .mm-hpk-h { font-size: 25px; }
    .mm-hpk-big .mm-hpk-pr .mm-num { font-size: 39px; }
    .mm-hpk-ft .mm-btn { width: 100%; }
    .mm-hpk-sm { padding: 20px; }
    .mm-hpk-sm .mm-hpk-pr .mm-num { font-size: 25px; }
}

/* Pause button for the moving lists (accessibility audit 2026-10-11, owner's pick A): partials/pause-button. The logos
   only move on phones, so their button shows only there. */
.mm-paused .mm-mtrack, .mm-paused .mm-logos-row { animation-play-state: paused; }
.mm-sec-head:has(> .mm-pause) { flex-wrap: nowrap; align-items: flex-start; }
.mm-pause { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid #DCD6F5; border-radius: 50%; background: #FFFFFF; color: var(--mm-ink); cursor: pointer; }
.mm-pause:hover { border-color: var(--mm-ink); }
.mm-pause[aria-pressed="false"] svg + svg, .mm-pause[aria-pressed="true"] svg:first-child { display: none; }
.mm-logos-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--mm-sp-3); }
.mm-logos-hd .mm-logos-t { margin: 0; }
@media (min-width: 768px) { .mm-logos-hd .mm-pause { display: none; } }
@media (prefers-reduced-motion: reduce) { .mm-pause { display: none; } }