.mlp-matrix-wrap {
          position: relative;
          border-radius: 22px;
          background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.012) 100%);
          border: 1px solid var(--mel-border-default);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          box-shadow:
            0 24px 80px rgba(5,8,20,0.28),
            inset 0 1px 0 rgba(255,255,255,0.04);
          overflow: hidden;
        }
        .mlp-matrix-wrap::before {
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;
          background:
            radial-gradient(900px 260px at 0% 0%, rgba(34,211,238,0.06), transparent 55%),
            radial-gradient(700px 240px at 100% 10%, rgba(168,85,247,0.06), transparent 55%),
            radial-gradient(800px 260px at 50% 100%, rgba(16,185,129,0.05), transparent 55%);
        }
        /* App-level light theme. The app toggles html.light /
           html.dark via ThemeContext, not prefers-color-scheme, so
           a media query would never fire when the user toggles the
           theme manually. Target the class instead. */
        html.light .mlp-matrix-wrap {
          background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.92) 100%);
          border-color: rgba(15,23,42,0.10);
          box-shadow:
            0 24px 80px rgba(15,23,42,0.10),
            inset 0 1px 0 rgba(255,255,255,0.85);
        }
        html.light .mlp-matrix-wrap::before {
          background:
            radial-gradient(900px 260px at 0% 0%, rgba(34,211,238,0.14), transparent 55%),
            radial-gradient(700px 240px at 100% 10%, rgba(168,85,247,0.14), transparent 55%),
            radial-gradient(800px 260px at 50% 100%, rgba(16,185,129,0.10), transparent 55%);
        }
        /* Tier card shadow inverts in light mode so the
           hard-coded rgba(0,0,0,0.30) drop shadow doesn't paint a
           muddy black blot under every card. */
        html.light .mlp-tier-card {
          box-shadow:
            0 18px 40px rgba(15,23,42,0.10),
            inset 0 1px 0 rgba(255,255,255,0.6),
            0 0 32px color-mix(in srgb, var(--tier-accent, #7C6FF0) 18%, transparent);
        }
        .mlp-matrix-scroll { overflow-x: auto; }
        /* ── Mobile tier swiper ───────────────────────────────────────── */
        /* Tighter gap so the tier selector sits close under the card. */
        .mlp-tier-swiper { display: flex; flex-direction: column; gap: 6px; }
        .mlp-tier-swiper-track {
          display: flex;
          gap: 12px;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          padding: 4px 0 0;
          margin: 0 -24px;
          padding-left: 24px;
          padding-right: 24px;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }
        .mlp-tier-swiper-track::-webkit-scrollbar { display: none; }
        .mlp-tier-card-wrap {
          flex: 0 0 calc(100vw - 48px);
          max-width: 380px;
          scroll-snap-align: center;
          scroll-snap-stop: always;
        }
        .mlp-tier-card {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding: 18px 16px;
          border-radius: 18px;
          background: linear-gradient(180deg,
            color-mix(in srgb, var(--tier-accent, #7C6FF0) 12%, var(--mel-surface-card)) 0%,
            var(--mel-surface-card) 70%);
          border: 1px solid color-mix(in srgb, var(--tier-accent, #7C6FF0) 40%, var(--mel-border-default));
          box-shadow:
            0 18px 40px rgba(0,0,0,0.30),
            inset 0 1px 0 rgba(255,255,255,0.04),
            0 0 32px color-mix(in srgb, var(--tier-accent, #7C6FF0) 18%, transparent);
        }
        .mlp-tier-card-head {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding-bottom: 14px;
          border-bottom: 1px solid var(--mel-border-default);
        }
        .mlp-tier-card-eyebrow {
          font-family: ui-monospace, "SF Mono", Menlo, monospace;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .22em;
          text-transform: uppercase;
          color: var(--tier-accent);
        }
        .mlp-tier-card-name {
          font-family: Poppins, system-ui, sans-serif;
          font-size: 26px;
          font-weight: 800;
          letter-spacing: -.02em;
          color: var(--mel-text-primary);
          line-height: 1;
        }
        .mlp-tier-card-price-row {
          display: flex;
          align-items: baseline;
          gap: 4px;
          margin-top: 6px;
        }
        .mlp-tier-card-price {
          font-family: ui-monospace, "JetBrains Mono", monospace;
          font-size: 28px;
          font-weight: 800;
          color: var(--mel-text-primary);
        }
        .mlp-tier-card-price-suffix {
          font-family: ui-monospace, monospace;
          font-size: 12px;
          color: var(--mel-text-muted);
        }
        .mlp-tier-card-price-note {
          font-family: ui-monospace, monospace;
          font-size: 10.5px;
          color: var(--mel-text-muted);
          letter-spacing: .02em;
        }
        .mlp-tier-card-cta {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-top: 6px;
          padding: 10px 14px;
          border-radius: 10px;
          background: linear-gradient(180deg,
            color-mix(in srgb, var(--tier-accent) 30%, var(--mel-surface-1)) 0%,
            color-mix(in srgb, var(--tier-accent) 18%, var(--mel-surface-1)) 100%);
          border: 1px solid color-mix(in srgb, var(--tier-accent) 65%, var(--mel-border-default));
          color: var(--mel-text-primary);
          font-family: Poppins, system-ui, sans-serif;
          font-size: 13px;
          font-weight: 700;
          text-decoration: none;
          transition: transform 140ms ease, box-shadow 200ms ease;
        }
        .mlp-tier-card-cta:active { transform: translateY(1px); }
        .mlp-tier-card-rows {
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .mlp-tier-card-group { display: flex; flex-direction: column; gap: 4px; }
        .mlp-tier-card-group-head {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-family: ui-monospace, monospace;
          font-size: 9.5px;
          font-weight: 700;
          letter-spacing: .22em;
          text-transform: uppercase;
          color: var(--mel-text-muted);
          padding-bottom: 4px;
          border-bottom: 1px dashed var(--mel-border-default);
        }
        .mlp-tier-card-group-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 22px;
          height: 22px;
          border-radius: 6px;
          background: var(--tier-accent-soft);
          color: var(--tier-accent);
        }
        .mlp-tier-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
        .mlp-tier-card-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          padding: 7px 0;
          border-bottom: 1px solid var(--mel-border-subtle);
          font-family: Poppins, system-ui, sans-serif;
        }
        .mlp-tier-card-row:last-child { border-bottom: none; }
        .mlp-tier-card-row-label {
          display: flex;
          flex-direction: column;
          gap: 1px;
          min-width: 0;
        }
        .mlp-tier-card-row-label > span:first-child {
          font-size: 12.5px;
          color: var(--mel-text-primary);
          font-weight: 500;
        }
        .mlp-tier-card-row-hint {
          font-family: ui-monospace, monospace;
          font-size: 9.5px;
          color: var(--mel-text-muted);
          letter-spacing: .02em;
        }
        .mlp-tier-card-row-value {
          flex-shrink: 0;
          text-align: right;
        }
        .mlp-tier-card-val {
          font-family: ui-monospace, "JetBrains Mono", monospace;
          font-size: 12px;
          font-weight: 700;
          color: var(--mel-text-primary);
          letter-spacing: -.005em;
        }
        .mlp-tier-card-check {
          color: var(--tier-accent);
          filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tier-accent) 50%, transparent));
        }
        /* Mirrors the tick's inline-glyph treatment: same icon size,
           same stroke weight, slate-muted tone instead of the tier
           accent. Keeps the mobile cards reading as a balanced
           two-state list rather than tick-versus-absence. */
        .mlp-tier-card-cross {
          color: var(--mel-text-muted);
          opacity: 0.85;
        }
        .mlp-tier-card-soon {
          font-family: ui-monospace, monospace;
          font-size: 9px;
          font-weight: 800;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: var(--tier-accent);
          padding: 2px 7px;
          border-radius: 999px;
          background: var(--tier-accent-soft);
          border: 1px solid color-mix(in srgb, var(--tier-accent) 50%, transparent);
        }
        .mlp-tier-swiper-dots {
          display: flex;
          gap: 6px;
          justify-content: center;
          align-items: stretch;
          flex-wrap: nowrap;      /* all five tiers stay on ONE row, any width */
          margin-top: 0;
          width: 100%;
        }
        /* Neumorphic segmented control — small tiles (not 999px chips) that
           share the row equally and shrink with ellipsis so they never wrap. */
        .mlp-tier-swiper-dot {
          flex: 1 1 0;
          min-width: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 9px 3px;
          border-radius: 9px;
          border: 1px solid rgba(255, 255, 255, 0.06);
          background: linear-gradient(180deg, #202737, #171d29);
          color: rgba(226, 232, 240, 0.60);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.05);
          font-family: ui-monospace, monospace;
          font-size: 9.5px;
          font-weight: 700;
          letter-spacing: .03em;
          text-transform: uppercase;
          cursor: pointer;
          transition: color 140ms ease, box-shadow 160ms ease, background 160ms ease, transform 120ms ease;
        }
        .mlp-tier-swiper-dot > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
        .mlp-tier-swiper-dot:active { transform: translateY(1px); }
        .mlp-tier-swiper-dot.is-active {
          color: #F2F5FB;
          border-color: rgba(34, 211, 238, 0.45);
          background: linear-gradient(180deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.06));
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px -12px rgba(34, 211, 238, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
        }
        html.light .mlp-tier-swiper-dot,
        html[data-theme="light"] .mlp-tier-swiper-dot {
          border-color: #e9edf3;
          background: linear-gradient(180deg, #ffffff, #f4f7fc);
          color: rgba(15, 23, 42, 0.55);
          box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.90);
        }
        html.light .mlp-tier-swiper-dot.is-active,
        html[data-theme="light"] .mlp-tier-swiper-dot.is-active {
          color: #0E7490;
          border-color: rgba(8, 145, 178, 0.40);
          background: linear-gradient(180deg, rgba(34, 211, 238, 0.14), #ffffff);
          box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px -12px rgba(8, 145, 178, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        }
        .mlp-matrix-grid {
          display: grid;
          /* One label column + five tier columns. minmax(0,1fr) lets the tier
             columns shrink to share the row so all five tiers stay on one line
             on desktop (Outpost + the original four) instead of wrapping. */
          grid-template-columns: minmax(170px, 1.05fr) repeat(5, minmax(0, 1fr));
          min-width: 820px;
          position: relative;
        }
        /* Tier column hover wash — only on desktop, no flicker on touch */
        @media (hover: hover) {
          .mlp-tier-col:hover {
            background: rgba(255,255,255,0.025);
          }
          html.light .mlp-tier-col:hover {
            background: rgba(15,23,42,0.035);
          }
        }
        /* Highlight column persistent wash */
        .mlp-tier-col--highlight {
          background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 60%);
        }
        /* Category band — full-width, tinted, clickable. Each category's
           accent hue is applied as a low-opacity wash so the band reads
           as distinct without competing with per-tier colors. Hover +
           focus states amplify the wash to hint interactivity. */
        .mlp-group-header {
          grid-column: 1 / -1;
          width: 100%;
          padding: 14px 20px 14px 18px;
          display: flex;
          align-items: center;
          gap: 12px;
          background: transparent;
          border: 0;
          border-top: 1px solid var(--mel-border-default);
          border-bottom: 1px solid var(--mel-border-default);
          cursor: pointer;
          color: var(--mel-text-primary);
          font-family: Poppins, system-ui, sans-serif;
          text-align: left;
          transition: background .18s ease, border-color .18s ease;
          position: relative;
        }
        .mlp-group-header:first-of-type { border-top: 0; }
        .mlp-group-header:hover,
        .mlp-group-header:focus-visible {
          background: var(--mlp-cat-wash-hover, rgba(255,255,255,0.025));
          outline: none;
        }
        .mlp-group-header::before {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--mlp-cat-wash, transparent);
          pointer-events: none;
        }
        .mlp-group-header-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          border-radius: 9px;
          background: var(--mlp-cat-icon-bg, rgba(255,255,255,0.05));
          color: var(--mlp-cat-accent, var(--mel-text-primary));
          border: 1px solid var(--mlp-cat-icon-border, var(--mel-border-default));
          flex-shrink: 0;
          position: relative;
          z-index: 1;
          box-shadow: 0 0 18px var(--mlp-cat-glow, transparent);
        }
        /* Light mode: a solid, raised neomorphic chip (premium feel) instead of
           the translucent dark wash — soft dual shadow on a light surface, with
           the category accent tinting the icon. */
        html.light .mlp-group-header-icon {
          background: #eef1f7;
          border: 1px solid rgba(255,255,255,0.85);
          box-shadow:
            -3px -3px 7px rgba(255,255,255,0.95),
            3px 3px 8px rgba(15,23,42,0.13);
          color: var(--mlp-cat-accent, #475569);
        }
        .mlp-group-header-title {
          font-size: 13.5px;
          font-weight: 700;
          letter-spacing: -.005em;
          color: var(--mel-text-primary);
          position: relative;
          z-index: 1;
        }
        .mlp-group-header-meta {
          font-family: ui-monospace, 'JetBrains Mono', monospace;
          font-size: 10px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: var(--mel-text-muted);
          position: relative;
          z-index: 1;
        }
        .mlp-group-header-chevron {
          margin-left: auto;
          color: var(--mel-text-muted);
          transition: transform .22s ease, color .18s ease;
          position: relative;
          z-index: 1;
        }
        .mlp-group-header:hover .mlp-group-header-chevron {
          color: var(--mlp-cat-accent, var(--mel-text-primary));
        }
        .mlp-group-header[data-collapsed="false"] .mlp-group-header-chevron {
          transform: rotate(180deg);
        }
        /* Expand/collapse all toggle at top-right of the matrix */
        .mlp-matrix-toolbar {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 10px 18px;
          border-bottom: 1px solid var(--mel-border-default);
          font-family: ui-monospace, 'JetBrains Mono', monospace;
          font-size: 10px;
          letter-spacing: .12em;
          text-transform: uppercase;
          color: var(--mel-text-muted);
          gap: 10px;
        }
        .mlp-matrix-toolbar button {
          background: transparent;
          border: 1px solid var(--mel-border-default);
          border-radius: 7px;
          padding: 5px 10px;
          color: var(--mel-text-secondary);
          font-family: inherit;
          font-size: inherit;
          letter-spacing: inherit;
          text-transform: inherit;
          cursor: pointer;
          transition: color .15s ease, border-color .15s ease, background .15s ease;
        }
        .mlp-matrix-toolbar button:hover {
          color: var(--mel-text-primary);
          border-color: var(--mel-text-secondary);
          background: rgba(255,255,255,0.025);
        }
        .mlp-row-label {
          padding: 12px 22px;
          display: flex;
          flex-direction: column;
          gap: 2px;
          font-family: Poppins, system-ui, sans-serif;
          font-size: 13px;
          font-weight: 500;
          color: var(--mel-text-primary);
          border-top: 1px solid var(--mel-border-default);
          opacity: 0.92;
        }
        .mlp-row-label-hint {
          font-size: 10.5px;
          color: var(--mel-text-muted);
          font-family: ui-monospace, 'JetBrains Mono', monospace;
          letter-spacing: .02em;
        }
        .mlp-row-cell {
          padding: 12px 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid var(--mel-border-default);
        }
        /* Hide the row-top divider for the first data row of each group */
        .mlp-group-first-row .mlp-row-label,
        .mlp-group-first-row .mlp-row-cell {
          border-top: 0;
        }