/* Magician single pages (spec F §5): layout for the service page sections. Page-scoped, linked from the view; the
   components (.mm-card, .mm-pkg, .mm-stat, .mm-step, .mm-faq, .mm-talk, .mm-btn) come from theme.css unchanged. No motion. */
.mm-sv-tint { background: #F7F6FC; }

/* Hero price card (owner, 2026-10-09): every plan, the featured one marked; beside the copy from 1024px. */
.mm-sv-pc { margin-top: var(--mm-sp-4); max-width: 420px; padding: var(--mm-sp-3); border-radius: var(--mm-r-card); background: #FFFFFF; color: var(--mm-ink); box-shadow: 0 24px 60px rgba(10, 6, 40, .3); }
.mm-sv-pc-from { margin: 0 0 var(--mm-sp-2); display: flex; flex-wrap: wrap; align-items: baseline; color: var(--mm-muted); font-size: var(--mm-fs-meta); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mm-sv-pc-k { flex-basis: 100%; }
.mm-sv-pc-from strong { margin: 4px 6px 0 0; color: var(--mm-ink); font: 600 39px/1.1 var(--mm-font-display); letter-spacing: 0; text-transform: none; }
.mm-sv-pc-from span { color: var(--mm-muted); font-size: var(--mm-fs-sm); letter-spacing: 0; text-transform: none; }
.mm-sv-pc ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mm-sv-pc-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1.5px solid #ECE8FA; border-radius: var(--mm-r-ctl); font-size: var(--mm-fs-sm); font-weight: 700; }
.mm-sv-pc-row--f { border-color: var(--mm-gold); background: #FFFBEB; }
.mm-sv-pc .mm-btn { width: 100%; margin-top: var(--mm-sp-2); }
.mm-sv-pc-note { margin: 10px 0 0; color: var(--mm-muted); font-size: var(--mm-fs-meta); text-align: center; }

/* Tab bar: sticks under the header, marks the section in view (service.js). */
.mm-sv-tabs { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--mm-line); background: #FFFFFF; }
.mm-sv-tabs-in { display: flex; align-items: center; gap: 4px; max-width: var(--mm-wide); margin: 0 auto; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
.mm-sv-tabs-in::-webkit-scrollbar { display: none; }
.mm-sv-tabs a:not(.mm-btn) { flex: none; padding: 16px 12px; border-bottom: 3px solid transparent; color: var(--mm-muted); font-size: var(--mm-fs-sm); font-weight: 800; text-decoration: none; }
.mm-sv-tabs a:not(.mm-btn):hover, .mm-sv-tabs a[aria-current] { border-color: var(--mm-gold); color: var(--mm-ink); }
.mm-sv-tabs .mm-btn { flex: none; min-height: 40px; margin-left: auto; padding: 0 16px; font-size: var(--mm-fs-sm); }
.mm-sv section[id] { scroll-margin-top: 72px; }

/* What you get: icon feature grid. */
.mm-sv-feats > ul, .mm-sv-rgrid, .mm-sv-cases { display: grid; gap: var(--mm-sp-3); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.mm-sv-feat, .mm-sv-rcard { border: 1.5px solid #E3DEFF; }
.mm-sv-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--mm-r-ctl); background: var(--mm-lilac); color: var(--mm-link); }
.mm-sv-feat .mm-h3, .mm-sv-rcard .mm-h3 { margin-top: var(--mm-sp-2); font-family: var(--mm-font-body); font-weight: 700; }
.mm-sv-feat p, .mm-sv-rcard p { margin: var(--mm-sp-1) 0 0; color: var(--mm-muted); }

/* About beside the proof; a long text folds behind "Read more" (service.js adds .is-folded). */
.mm-sv-duo { display: grid; gap: var(--mm-sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.mm-sv-duo .mm-h2 { margin: 0 0 var(--mm-sp-3); }
.mm-sv-fold.is-folded { max-height: 320px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.mm-sv-fold.is-folded.is-short { -webkit-mask-image: none; mask-image: none; }
.mm-sv-more { margin-top: var(--mm-sp-2); padding: 0; min-height: 44px; border: 0; background: none; box-shadow: none; color: var(--mm-link); font-weight: 800; }
.mm-sv-more:hover { background: none; color: var(--mm-ink); transform: none; box-shadow: none; }

/* How it works: a timeline of numbered steps, never a carousel. */
.mm-sv-steps .mm-steps { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-sv-steps .mm-step { padding: 0; border: 0; background: none; text-align: center; }
.mm-sv-steps .mm-step-n { position: relative; margin: 0 auto; box-shadow: 0 0 0 8px #FFFFFF; }
.mm-sv-steps .mm-step .mm-h3 { margin-top: var(--mm-sp-2); font-size: var(--mm-fs-body); font-weight: 800; }
.mm-sv-steps .mm-step p { margin: 6px 0 0; color: var(--mm-muted); font-size: var(--mm-fs-sm); }

/* Pricing: a full-width row of tier cards; theme.css stacks .mm-tiers as a sticky aside, so undo that here. */
.mm-sv .mm-tiers { position: static; }
.mm-sv .mm-tiers .mm-pkgs { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
.mm-tiers .mm-pkg { position: relative; }
.mm-tiers .mm-pkg:not(.mm-pkg--light) { box-shadow: 0 0 0 2px var(--mm-gold); }
.mm-pkg-badge { position: absolute; top: -14px; left: var(--mm-card-p); display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--mm-gold); color: var(--mm-ink); font-size: var(--mm-fs-sm); font-weight: 700; line-height: 1; }
.mm-tiers .mm-pkg ul { padding: 0; list-style: none; }
.mm-tiers .mm-pkg li { position: relative; padding-left: 28px; }
.mm-tiers .mm-pkg li::before { content: "✓"; position: absolute; left: 4px; font-weight: 700; color: var(--mm-gold); }
.mm-tiers .mm-pkg--light li::before { color: var(--mm-link); }
.mm-sv-at { flex-basis: 100%; font-size: var(--mm-fs-sm); color: var(--mm-on-ink); }
.mm-pkg--light .mm-sv-at { color: var(--mm-muted); }
.mm-sv-note { margin: var(--mm-sp-4) 0 0; font-size: var(--mm-fs-sm); color: var(--mm-muted); }

/* Proof strip: stats, then real reviews and case studies. */
.mm-sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-sv-stats > :last-child { grid-column: 1 / -1; }
.mm-sv-revs, .mm-sv-cases { margin-top: var(--mm-sp-3); }
.mm-sv-case { border: 0; background: var(--mm-cream); }
.mm-sv-case .mm-h3b { margin: var(--mm-sp-1) 0 0; }

/* FAQ: heading, line and the answered-card art, then the list (side by side from 1024px). */
.mm-sv-faq-l { margin-bottom: var(--mm-sp-4); }
.mm-sv-faq-art { max-width: 220px; margin: var(--mm-sp-3) auto 0; }
.mm-sv-faq-art svg { display: block; width: 100%; height: auto; }
.mm-sv-faq-l p { margin: var(--mm-sp-2) 0 0; color: var(--mm-muted); }
.mm-sv-faq .mm-faq-list { max-width: 820px; }

/* Related services: whole-card links. */
.mm-sv-rcard { display: flex; flex-direction: column; align-items: flex-start; color: var(--mm-ink); text-decoration: none; transition: border-color 150ms var(--mm-eo), box-shadow 200ms var(--mm-eo); }
.mm-sv-rcard:hover { border-color: var(--mm-ink-line); color: var(--mm-ink); box-shadow: 0 12px 32px rgba(35, 28, 90, .1); }
.mm-sv-rcard .mm-lnk { margin-top: auto; padding-top: var(--mm-sp-1); color: var(--mm-link); }
.mm-sv-rcard:hover .mm-lnk { color: var(--mm-ink); }

/* CTA band. */
.mm-sv-tint + .mm-sv-end { padding-top: var(--mm-sec-y); }
.mm-sv-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.mm-sv-wa, .mm-sv-wa:hover { background: #FFFFFF; color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px var(--mm-ink-line); }

/* Marketplace site page (spec F §3). */
.mm-mk-hint { margin: 12px 0 0; font-size: var(--mm-fs-sm); }
.mm-mk-chips { margin: 16px 0 0; padding: 0; list-style: none; }
.mm-mk-chips .mm-chip { min-height: 32px; }
.mm-mk-from { margin: 0; color: #FFF; font-weight: 600; }
.mm-mk-at { padding-bottom: 0; }
.mm-mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-stat--na { border: 1.5px dashed #C9C2F2; background: #FFF; }
.mm-stat--na .mm-num { font: 600 var(--mm-fs-body)/1.5 var(--mm-font-body); color: var(--mm-muted); }
.mm-mk-none { grid-column: 1 / -1; display: flex; align-items: center; margin: 0; border: 1.5px dashed #C9C2F2; color: var(--mm-muted); }
.mm-mk-offers, .mm-mk-sim, .mm-mk-trust { display: grid; gap: var(--mm-sp-3); grid-template-columns: minmax(0, 1fr); }
.mm-mk-offer { display: flex; flex-direction: column; border: 1.5px solid #E3DEFF; }
.mm-mk-offer .mm-h3 { font-family: var(--mm-font-body); font-weight: 700; }
.mm-mk-offer p { margin: var(--mm-sp-1) 0 0; color: var(--mm-muted); }
.mm-mk-offer .mm-mk-price { margin-top: auto; padding-top: var(--mm-sp-2); font: 600 var(--mm-fs-h3b)/1.2 var(--mm-font-display); color: var(--mm-ink); }
.mm-mk-how { max-width: 70ch; margin: var(--mm-sp-4) 0 0; padding-left: 1.25em; color: var(--mm-muted); }
.mm-mk-how li + li { margin-top: var(--mm-sp-1); }
.mm-mk-desc { max-width: 70ch; margin: var(--mm-sp-3) 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.mm-mk-muted { color: var(--mm-muted); }
.mm-mk-guide .mm-h3 { margin-top: var(--mm-sp-4); font-family: var(--mm-font-body); font-weight: 700; }
.mm-mk-samples { margin: var(--mm-sp-1) 0 0; padding-left: 1.25em; }
.mm-mk-samples a { display: block; padding-block: 12px; overflow-wrap: anywhere; }
.mm-mk-avg { margin: var(--mm-sp-2) 0 var(--mm-sp-3); font-size: var(--mm-fs-lead); }
.mm-mk-reviews > .mm-mk-muted { margin: var(--mm-sp-2) 0 0; }
.mm-mk-q { margin: var(--mm-sp-2) 0 var(--mm-sp-3); padding: 0; border: 0; border-radius: 0; background: none; overflow-wrap: anywhere; }
.mm-mk-trust { gap: var(--mm-sp-2); margin: var(--mm-sp-6) 0 0; padding: 0; list-style: none; }
.mm-mk-trust li { display: flex; align-items: center; gap: var(--mm-sp-2); padding: var(--mm-sp-2) var(--mm-sp-3); border-radius: var(--mm-r-card); background: var(--mm-cream); font-weight: 600; line-height: 1.4; }
.mm-mk-trust svg { flex: none; color: var(--mm-link); }

/* Similar sites: listing.css's card, copied verbatim (keep in sync; a test compares them). */
.mm-site { position: relative; display: flex; flex-direction: column; gap: var(--mm-sp-1); transition: box-shadow 200ms var(--mm-eo); }
.mm-site:hover { border-color: var(--mm-ink-line); box-shadow: 0 12px 32px -12px rgba(35, 28, 90, .3); }
.mm-site .mm-h3 { overflow-wrap: anywhere; }
.mm-site .mm-h3 a { color: var(--mm-ink); text-decoration: none; }
.mm-site .mm-h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mm-site:hover .mm-h3 a { text-decoration: underline; }
.mm-site-d { margin: 0; color: var(--mm-muted); font-size: var(--mm-fs-sm); overflow-wrap: anywhere; }
.mm-site-t { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.mm-site-t li { padding: 2px 10px; border-radius: 999px; background: var(--mm-lilac); font-size: var(--mm-fs-meta); font-weight: 600; }
.mm-site-t li:first-child { background: var(--mm-ink); color: #FFFFFF; }
.mm-site-m { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--mm-sp-1); margin: var(--mm-sp-1) 0; padding: 12px 0; border-block: 1px solid var(--mm-line); }
.mm-site-m dt { color: var(--mm-muted); font-size: var(--mm-fs-meta); }
.mm-site-m dd { margin: 0; font-weight: 700; }
.mm-site-f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-sp-1) var(--mm-sp-2); margin-top: auto; }
.mm-site-p { margin-right: auto; }
.mm-site-go { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--mm-sp-2); border-radius: var(--mm-r-ctl); background: var(--mm-lilac); font-size: var(--mm-fs-sm); font-weight: 600; }
.mm-site:hover .mm-site-go { background: var(--mm-ink); color: #FFFFFF; }
.mm-site-go::after { content: "\203A"; content: "\203A" / ""; }

@media (max-width: 639.98px) {
    .mm-sv-feat { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--mm-sp-2); align-items: start; }
    .mm-sv-feat .mm-sv-ico { grid-row: span 2; }
    .mm-sv-feat .mm-h3 { margin-top: 12px; }
    .mm-sv-feat p { grid-column: 2; }
}
@media (max-width: 767.98px) {
    .mm-sv-end { padding-inline: var(--mm-sp-2); }
    .mm-sv-tabs-in { padding: 0 8px; }
    .mm-sv-tabs .mm-btn { display: none; }
    .mm-mk-stats > :last-child:nth-child(odd), .mm-mk-none + :last-child { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
    .mm-mk-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-sv-feats > ul, .mm-sv-steps .mm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-sv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mm-sv-stats > :last-child { grid-column: auto; }
}
@media (min-width: 768px) {
    .mm-mk-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .mm-mk-none { grid-column: span 2; }
    .mm-mk-sim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-mk-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mm-sv-rgrid, .mm-sv-cases { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
    .mm-sv .mm-phero-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
    .mm-sv .mm-phero-in > * { grid-column: 1; }
    .mm-sv .mm-phero-in > .mm-sv-pc { grid-column: 2; grid-row: 1 / span 6; align-self: center; justify-self: end; width: 100%; margin-top: 0; }
    .mm-sv-duo:not(.mm-sv-duo--one) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-sv-steps .mm-steps:has(> :nth-child(4):last-child)::before { content: ""; position: absolute; top: 24px; left: 12.5%; right: 12.5%; border-top: 2px dashed #CFC9EE; }
    .mm-sv-faq:has(.mm-sv-faq-art) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--mm-sp-6); align-items: start; }
    .mm-sv-faq-art { max-width: 280px; margin: var(--mm-sp-4) 0 0; }
    .mm-mk-offers, .mm-mk-sim { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mm-sv-feats > ul, .mm-sv .mm-tiers .mm-pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mm-sv .mm-tiers .mm-pkgs:has(> :nth-child(4):last-child), .mm-sv-steps .mm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mm-sv-steps .mm-steps:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Trust promises (owner's pick B, compact, 2026-10-10): icon beside the text, two lines, two columns. */
.mm-sv-proms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mm-sv-prom { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid #E6E2F7; border-radius: 14px; background: #FFFFFF; line-height: 1.25; }
.mm-sv-prom-ic { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #FFF3D1; color: #8A5F00; }
.mm-sv-prom b { display: block; font-size: 14px; }
.mm-sv-prom small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--mm-muted); }
@media (max-width: 420px) { .mm-sv-proms { grid-template-columns: 1fr; } }