/* CONTAINMENT, not a guess at one culprit.
           The page kept producing a sliver of horizontal scroll on phones, and
           chasing individual offenders is whack-a-mole: any future section can
           reintroduce it. overflow-x clip on the route root stops a wide child
           from extending the scrollable area, and unlike hidden it does not
           create a scroll container, so the sticky and scroll-linked sections
           keep working.

           The white band on the right is the same bug seen from the other side:
           the body background paints the initial containing block, so anything
           wider than it leaves unpainted space beside it. */
        [data-product-route="mcp"] {
          overflow-x: clip;
          max-width: 100vw;
        }
        /* Absolutely positioned decoration (the ghost wordmark, the rail nudge
           buttons at left/right -6px) is allowed to sit outside its parent, so
           it must not be allowed to widen anything. */
        [data-product-route="mcp"] section { max-width: 100%; overflow-x: clip; }

        /* ProductFaq and ProductCloser each pad generously on every side, so
           where they meet the gap is the SUM of both. Trimmed to something that
           reads as one break rather than two stacked ones. */
        [data-product-route="mcp"] .mlp-faq { padding-bottom: clamp(32px, 4vh, 48px); }

        /* ── "Listed on" ────────────────────────────────────────────────
           Deliberately NOT a row of pills. Five identical accent-coloured
           capsules read as a badge wall and compete with the CTAs above them,
           when the job here is quiet corroboration. So: an editorial credit
           line — a micro label, a short rule, then the names separated by
           hairlines, sitting at secondary weight until you reach for one.

           Hierarchy comes from size and spacing rather than colour, which is
           what lets the row recede without becoming unreadable. Colour is held
           back for hover so it means "this is a link" instead of decorating
           five things at once. */
        [data-product-route="mcp"] .mcp-listed {
          display: flex; align-items: center; justify-content: center;
          flex-wrap: wrap; gap: 12px;
          max-width: 940px; margin: 0 auto;
        }
        [data-product-route="mcp"] .mcp-listed-label {
          color: var(--mel-text-secondary);
          text-transform: uppercase;
          letter-spacing: 0.15em;
          font-size: 10.5px; font-weight: 600;
          white-space: nowrap;
        }
        [data-product-route="mcp"] .mcp-listed-rule {
          flex: 0 0 48px; height: 1px;
          background: var(--mcp-listed-rule);
        }
        [data-product-route="mcp"] .mcp-listed-items {
          display: flex; flex-wrap: wrap; align-items: center;
          list-style: none; margin: 0; padding: 0;
        }
        [data-product-route="mcp"] .mcp-listed-items li + li {
          border-left: 1px solid var(--mcp-listed-rule);
        }
        [data-product-route="mcp"] .mcp-listed-link {
          display: inline-block;
          /* Padding, not a border, carries the touch target. */
          padding: 9px 15px;
          color: var(--mel-text-secondary);
          font-size: 13px; font-weight: 550;
          text-decoration: none;
          transition: color 160ms ease;
        }
        [data-product-route="mcp"] .mcp-listed-link:hover {
          color: var(--mcp-listed-hover);
          text-decoration: underline;
          text-decoration-thickness: 1px;
          text-underline-offset: 4px;
        }
        [data-product-route="mcp"] .mcp-listed-link:focus-visible {
          outline: 2px solid var(--mcp-listed-hover);
          outline-offset: 2px;
          border-radius: 5px;
          color: var(--mcp-listed-hover);
        }
        /* Wrapped onto several lines the hairlines stop separating and start
           looking like stray marks, so below the fold-width they come off and
           the gap does the separating. */
        @media (max-width: 640px) {
          [data-product-route="mcp"] .mcp-listed { gap: 8px; }
          [data-product-route="mcp"] .mcp-listed-rule { display: none; }
          [data-product-route="mcp"] .mcp-listed-items { justify-content: center; gap: 2px 4px; }
          [data-product-route="mcp"] .mcp-listed-items li + li { border-left: 0; }
          [data-product-route="mcp"] .mcp-listed-link { padding: 8px 10px; }
        }

        /* ── Phone rhythm ────────────────────────────────────────────────
           sectionPadY is clamp(76px, 11vh, 124px). On an 812px phone the vh
           term wins at ~89px, so every section carried ~178px of dead space
           between it and the next: roughly a fifth of the screen, repeated
           eight times. vh-based vertical padding is the wrong instrument on a
           phone, because it scales the gap with the very dimension that is
           scarcest.

           Phones get a flat 40px instead, which reads as one clean break. The
           cards tighten with it: desktop padding and 22px radii on a 340px
           screen are what made the components feel oversized. */
        @media (max-width: 640px) {
          [data-product-route="mcp"] .mlp-product-section {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
          }
          /* The hero keeps its own breathing room. */
          [data-product-route="mcp"] .mlp-product-section:first-of-type {
            padding-top: 24px !important;
          }
          [data-product-route="mcp"] .mlp-faq {
            padding-top: 40px !important;
            padding-bottom: 28px !important;
          }

          /* Cards: tighter box, smaller radius, and a shadow scaled to the box
             rather than to a desktop panel. */
          [data-product-route="mcp"] article,
          [data-product-route="mcp"] .mlp-mcp-card {
            border-radius: 16px !important;
            padding: 18px 16px !important;
          }


          /* !important is load-bearing here, not laziness. SectionHead sets
             alignItems and textAlign as INLINE styles, and an inline style beats
             a stylesheet rule at any specificity, so the first version of this
             block silently did nothing. */
          [data-product-route="mcp"] .mlp-mcp-head {
            align-items: center !important;
            text-align: center !important;
          }
          [data-product-route="mcp"] .mlp-mcp-head h2,
          [data-product-route="mcp"] .mlp-mcp-head p {
            max-width: 100% !important;
          }

          /* The eyebrow is an inline-flex span, so the parent's align-items
             above is what actually centres it. This only keeps its own contents
             centred if it is ever made full-width. */
          [data-product-route="mcp"] .mlp-mcp-head > *:first-child {
            justify-content: center;
          }

          [data-product-route="mcp"] .mlp-mcp-lead,
          [data-product-route="mcp"] .mlp-mcp-kicker {
            text-align: center !important;
            max-width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
          }

          /* Numbered rows centre as a BLOCK but keep their text left-aligned: a
             two-line sentence centred under a number badge wraps into a ragged
             triangle. The row is capped so it does not run edge to edge. */
          [data-product-route="mcp"] .mlp-mcp-row {
            justify-content: flex-start;
            text-align: left;
            max-width: 34ch;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
          }
        }