/* Balanced, language-robust headline wrapping: the browser evenly
           balances line breaks in every locale, so no fragile per-language
           breaks. Plus a subtle kinetic sheen on the gradient accent clause. */
        .mlp-hero-section h1 {
          text-wrap: balance;
        }
        .mlp-hero-headline-accent {
          background-size: 220% auto;
          animation: mlpHeadlineSheen 9s ease-in-out infinite;
        }
        @keyframes mlpHeadlineSheen {
          0%, 100% { background-position: 0% 50%; }
          50%      { background-position: 100% 50%; }
        }
        @media (prefers-reduced-motion: reduce) {
          .mlp-hero-headline-accent { animation: none; }
        }
        html[data-mlp-scrolling="1"] .mlp-hero-headline-accent {
          animation-play-state: paused;
        }

        /* MCP note link: underline glides in on hover/focus, same
           EXIT_DURATION/EXIT_EASE as every other hero link. Only the
           "Set up in 1 min" link is interactive — the sentence beside it
           is plain prose, so only this one gets the affordance. */
        .mlp-hero-mcp-link {
          text-decoration-line: underline;
          text-decoration-color: transparent;
          transition: text-decoration-color 0.24s cubic-bezier(0.4, 0, 1, 1);
        }
        .mlp-hero-mcp-link:hover,
        .mlp-hero-mcp-link:focus-visible {
          text-decoration-color: currentColor;
        }
        .mlp-hero-mcp-link:focus-visible {
          outline: 2px solid var(--mlp-mcp-accent);
          outline-offset: 3px;
          border-radius: 6px;
        }

        /* Tablet ── tighten paddings, drop split → stacked at md
           collapse point (per design-tokens.md §3 the md tier starts
           at 768; we mirror that and collapse split layouts at 880
           so the right column doesn't ship at <420px wide). */
        @media (max-width: 880px) {
          .mlp-hero-section {
            min-height: max(720px, 100dvh) !important;
            padding-top: 76px !important;
          }
          .mlp-hero-section h1 {
            font-size: clamp(30px, 5.6vw, 56px) !important;
          }
          .mlp-hero-split .mlp-hero-center {
            display: flex !important;
            flex-direction: column !important;
            grid-template-columns: none !important;
            gap: clamp(24px, 4vh, 40px) !important;
            text-align: center !important;
            align-items: center !important;
          }
          .mlp-hero-split .mlp-hero-headline-block {
            text-align: center !important;
            align-items: center !important;
          }
          .mlp-hero-split .mlp-hero-actions {
            justify-content: center !important;
          }
          /* .mlp-hero-signature-col and .mlp-hero-mcp-wrap center
             unconditionally at every width already — split only ever
             changes the TEXT column, never the visual's own column. */
        }

        /* Phone ── 100dvh with svh fallback, single-col signature,
           bigger tap targets. */
        @media (max-width: 560px) {
          .mlp-hero-section {
            /* svh is the small viewport height — what's visible when
               the iOS chrome is FULLY EXPANDED. dvh is the dynamic
               variant — collapses with the chrome. Use svh as the
               floor so the hero never overflows during chrome
               expansion, then upgrade to dvh on browsers that
               support it (the dvh wins because it comes second). */
            min-height: max(720px, 100svh) !important;
            min-height: max(720px, 100dvh) !important;
            padding-top: max(74px, env(safe-area-inset-top)) !important;
            padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
            padding-left: var(--mlp-section-gutter, 18px) !important;
            padding-right: var(--mlp-section-gutter, 18px) !important;
          }
          /* Top rail goes ultra-mobile-native: the eyebrow becomes a clean
             centered kicker above the title; the editorial chapter counter
             (03 / 03) and the divider line are dropped on phones. */
          .mlp-hero-top-rail {
            justify-content: center !important;
            gap: 0 !important;
            border-bottom: none !important;
            padding-bottom: clamp(9px, 1.5vh, 13px) !important;
          }
          .mlp-hero-top-rail > span:last-child {
            display: none !important;
          }
          .mlp-hero-section h1 {
            font-size: clamp(31px, 9.2vw, 38px) !important;
            line-height: 1.03 !important;
          }
          .mlp-hero-center {
            margin-top: clamp(12px, 2vh, 20px) !important;
            margin-bottom: clamp(8px, 1.5vh, 14px) !important;
          }
          .mlp-hero-headline-block > p {
            max-width: 34ch !important;
            font-size: 14.25px !important;
            line-height: 1.58 !important;
          }
          .mlp-hero-actions {
            width: 100%;
            margin-top: 22px !important;
            gap: 10px !important;
          }
          .mlp-hero-actions > a:first-child {
            width: 100%;
            min-height: 46px;
            justify-content: center;
          }
          .mlp-hero-actions > a:last-child {
            min-height: 36px;
            justify-content: center;
          }
          .mlp-hero-metric-strip {
            margin-top: 24px !important;
            padding: 12px !important;
            border-radius: 16px !important;
          }
          .mlp-hero-metric-tiles {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            row-gap: 0 !important;
          }
          .mlp-hero-metric-tile {
            padding: 5px 7px !important;
          }
          .mlp-hero-metric-tile:not(:last-child) {
            border-right: 1px solid rgba(34, 211, 238, 0.14) !important;
          }
          .mlp-hero-metric-tile > span:first-child {
            font-size: 8px !important;
            letter-spacing: 0.16em !important;
          }
          .mlp-hero-metric-tile > span:nth-child(2) {
            font-size: clamp(15px, 4.4vw, 19px) !important;
          }
          .mlp-hero-metric-tile > span:last-child:not(:nth-child(2)) {
            display: none;
          }
          .mlp-hero-mega-numeral {
            text-align: center !important;
            align-items: center !important;
          }
          .mlp-hero-mega-numeral .mlp-hero-mega-value {
            font-size: clamp(96px, 28vw, 144px) !important;
          }
          .mlp-hero-ghost-wordmark {
            font-size: 28vw !important;
            opacity: 0.04 !important;
          }
        }