/* 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;
        }

        /* 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;
          }
        }

        /* 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;
          }
        }