.mel-sheets { position: relative; isolation: isolate; }
        .mel-sheet {
          position: relative; isolation: isolate;
          border-radius: 28px 28px 0 0;
          padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 64px) clamp(72px, 9vw, 120px);
        }
        .mel-sheet + .mel-sheet { margin-top: -28px; }
        .mel-sheet:last-child { border-radius: 28px; }
        .mel-sheet-in { position: relative; max-width: 1180px; margin: 0 auto; }
        .mel-sheet-in--narrow { max-width: 820px; }

        .mel-sheet--light {
          background: #F8FAFC;
          box-shadow: 0 -1px 0 rgba(15,23,42,0.07), 0 -30px 60px -40px rgba(11,21,48,0.45);
        }
        .mel-sheet--deep {
          background: radial-gradient(135% 115% at 50% -12%, #223052 0%, #141B2B 46%, #0C1017 100%);
          box-shadow: 0 -30px 60px -30px rgba(11,21,48,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
        }
        html.dark .mel-sheet--light { box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.9); }
        html.dark .mel-sheet--deep {
          background: radial-gradient(135% 115% at 50% -12%, #151C2C 0%, #0C111B 48%, #07090F 100%);
          box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
        }

        html.dark .mel-sheet--light {
          color-scheme: light;
          --background: #F8FAFC; --foreground: #0F172A;
          --card: #FFFFFF; --card-foreground: #0F172A;
          --muted: #F1F5F9; --muted-foreground: #475569;
          --border: rgba(100,116,139,0.22); --input: rgba(100,116,139,0.18);
          --mel-text-primary: #0F172A; --mel-text-secondary: #1E293B; --mel-text-tertiary: #475569;
          --mel-text-muted: #64748B; --mel-text-faint: rgba(71,85,105,0.4);
          --mel-surface-1: #F8FAFC; --mel-surface-2: #F1F5F9; --mel-surface-3: #E2E8F0;
          --mel-surface-overlay: #FFFFFF; --mel-surface-card: #FFFFFF; --mel-surface-panel: #F8FAFC; --mel-surface-modal: #FFFFFF;
          --mel-input-bg: #FFFFFF; --mel-input-border: rgba(100,116,139,0.28); --mel-input-text-muted: #475569; --mel-input-label: #1E293B;
          --mel-border-subtle: rgba(100,116,139,0.18); --mel-border-default: rgba(100,116,139,0.24); --mel-border-muted: rgba(100,116,139,0.14);
          color: #0F172A;
        }

        html:not(.dark) .mel-sheet--deep {
          color-scheme: dark;
          --background: #050711; --foreground: #E8EDF5;
          --card: #0B0F1E; --card-foreground: #E8EDF5;
          --muted: #0D1322; --muted-foreground: #8A9AB5;
          --border: rgba(255,255,255,0.09); --input: rgba(255,255,255,0.08);
          --mel-text-primary: rgba(240,244,250,0.94); --mel-text-secondary: rgba(220,228,240,0.80); --mel-text-tertiary: rgba(200,210,230,0.66);
          --mel-text-muted: rgba(180,195,220,0.55); --mel-text-faint: rgba(200,210,230,0.24);
          --mel-surface-1: rgba(255,255,255,0.035); --mel-surface-2: rgba(255,255,255,0.06); --mel-surface-3: rgba(255,255,255,0.09);
          --mel-surface-overlay: rgba(6,10,24,0.98); --mel-surface-card: rgba(255,255,255,0.045); --mel-surface-panel: rgba(6,9,20,0.9); --mel-surface-modal: rgba(4,6,14,0.92);
          --mel-input-bg: rgba(8,12,28,0.6); --mel-input-border: rgba(167,139,250,0.22); --mel-input-text-muted: rgba(180,195,220,0.65); --mel-input-label: rgba(196,181,253,0.9);
          --mel-border-subtle: rgba(255,255,255,0.07); --mel-border-default: rgba(255,255,255,0.11); --mel-border-muted: rgba(255,255,255,0.06);
          color: #E6ECF5;
        }
        .mel-sheet--light { color: #0F172A; }
        .mel-sheet--deep { color: #E6ECF5; }

        /* Eyebrow: mono numeral + short rule + label (as on the product sheets). */
        .mel-sheet-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
          font: 700 12px/1.4 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
        .mel-sheet-eyebrow .n { color: var(--mel-sheet-accent, #7C6FF0); }
        .mel-sheet-eyebrow .r { width: 24px; height: 1px; background: currentColor; opacity: 0.4; }
        .mel-sheet--light .mel-sheet-eyebrow { color: rgba(15,23,42,0.78); }
        .mel-sheet--deep .mel-sheet-eyebrow { color: rgba(226,232,240,0.9); }
        .mel-sheet-title { margin: 0; font: 700 clamp(1.9rem, 3.6vw, 3rem)/1.08 Poppins, system-ui, sans-serif; letter-spacing: -0.035em; text-wrap: balance; }
        .mel-sheet-underline { width: 58px; height: 3px; margin: 16px 0 0; border-radius: 3px;
          background: linear-gradient(90deg, var(--mel-sheet-accent, #7C6FF0), var(--mel-sheet-accent2, #22D3EE)); }
        .mel-sheet-lede { margin: 18px 0 0; max-width: 62ch; font: 400 clamp(1rem, 1.3vw, 1.18rem)/1.62 Poppins, system-ui, sans-serif; }
        .mel-sheet--light .mel-sheet-lede { color: #1E293B; }
        .mel-sheet--deep .mel-sheet-lede { color: rgba(226,232,240,0.8); }

        /* Neomorphic card, one per surface. */
        .mel-sheet-card { position: relative; border-radius: 20px; padding: clamp(18px, 2vw, 26px); transition: transform .2s ease, box-shadow .2s ease; }
        .mel-sheet--light .mel-sheet-card {
          background: #FFFFFF; border: 1px solid rgba(15,23,42,0.06);
          box-shadow: 0 18px 38px -22px rgba(15,23,42,0.28), 6px 6px 16px rgba(15,23,42,0.07), -6px -6px 16px rgba(255,255,255,0.95);
        }
        .mel-sheet--deep .mel-sheet-card {
          background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
          border: 1px solid rgba(255,255,255,0.08);
          box-shadow: 0 24px 52px -24px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.07);
        }
        a.mel-sheet-card:hover, .mel-sheet-card.is-interactive:hover { transform: translateY(-2px); }
        .mel-sheet--light a.mel-sheet-card:hover, .mel-sheet--light .mel-sheet-card.is-interactive:hover {
          box-shadow: 0 24px 44px -22px rgba(15,23,42,0.34), 6px 6px 16px rgba(15,23,42,0.08), -6px -6px 16px rgba(255,255,255,0.95);
        }
        .mel-sheet--deep a.mel-sheet-card:hover, .mel-sheet--deep .mel-sheet-card.is-interactive:hover {
          border-color: rgba(255,255,255,0.14);
        }
        /* Recessed well (tables, code, quotes) inside a card or sheet. */
        .mel-sheet-well { border-radius: 14px; padding: 14px 16px; }
        .mel-sheet--light .mel-sheet-well { background: #EEF2F7; box-shadow: inset 3px 3px 7px rgba(15,23,42,0.08), inset -3px -3px 7px rgba(255,255,255,0.9); }
        .mel-sheet--deep .mel-sheet-well { background: rgba(4,8,18,0.5); box-shadow: inset 2px 2px 6px rgba(0,0,0,0.55), inset -1px -1px 3px rgba(255,255,255,0.05); }

        @media (max-width: 767px) {
          .mel-sheet { border-radius: 24px 24px 0 0; padding: 44px 16px 64px; }
          .mel-sheet + .mel-sheet { margin-top: -24px; }
          .mel-sheet:last-child { border-radius: 24px; }
        }
        @media (prefers-reduced-motion: reduce) { .mel-sheet-card { transition: none; } }

        .mel-vs { font-family: Poppins, system-ui, sans-serif; }
        .mel-vs .mel-sheet--light { --vs-a: #0E7490; --vs-b: #6D28D9; --vs-rose: #BE123C; --mel-sheet-accent: #6D28D9; --mel-sheet-accent2: #0891B2; }
        .mel-vs .mel-sheet--deep { --vs-a: #22D3EE; --vs-b: #A78BFA; --vs-rose: #FB7185; --mel-sheet-accent: #A78BFA; --mel-sheet-accent2: #22D3EE; }
        .mel-vs > .mel-sheet:first-child { padding-top: clamp(128px, 13vw, 184px); }
        .mel-vs .mel-sheet-title { color: var(--mel-text-primary); }
        .mel-vs .mel-sheet-lede { color: var(--mel-text-secondary); }
        .mel-vs-grad { background-image: linear-gradient(120deg, var(--vs-a) 0%, var(--vs-b) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .mel-vs-vs { color: var(--mel-text-tertiary); font-weight: 400; }
        .mel-vs-eyebrow-link { color: inherit; text-decoration: none; }
        .mel-vs-eyebrow-link:hover { color: var(--mel-sheet-accent); }
        .mel-vs-h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); letter-spacing: -0.045em; }
        .mel-vs-h3 { margin: 0; font: 700 1.12rem/1.3 Poppins, system-ui, sans-serif; color: var(--mel-text-primary); }
        .mel-vs-label { display: block; margin-bottom: 10px; font: 800 11px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mel-sheet-accent); }
        .mel-vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
        .mel-vs a.mel-sheet-card { display: block; text-decoration: none; color: var(--mel-text-primary); }
        .mel-vs a.mel-sheet-card:focus-visible, .mel-vs-pill:focus-visible, .mel-vs-cta:focus-visible { outline: 2px solid var(--mel-sheet-accent); outline-offset: 3px; }
        .mel-vs-table-wrap { padding: 0; overflow-x: auto; }
        .mel-vs-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
        .mel-vs-table th { padding: 14px 16px; text-align: left; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mel-text-tertiary); }
        .mel-vs-table td { padding: 14px 16px; vertical-align: top; text-align: left; line-height: 1.55; border-top: 1px solid var(--mel-border-default); }
        .mel-vs-wins-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; }
        .mel-vs-list { margin: 16px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--mel-text-secondary); line-height: 1.58; }
        .mel-vs-faq { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
        .mel-vs-faq details.mel-sheet-card { padding: 0; }
        .mel-vs-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1rem; color: var(--mel-text-primary); }
        .mel-vs-faq summary::-webkit-details-marker { display: none; }
        .mel-vs-faq summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid var(--mel-sheet-accent); border-bottom: 2px solid var(--mel-sheet-accent); transform: rotate(45deg); transition: transform .25s ease; }
        .mel-vs-faq details[open] summary::after { transform: rotate(-135deg); }
        .mel-vs-faq details p { margin: 0; padding: 0 20px 20px; color: var(--mel-text-secondary); line-height: 1.65; }
        .mel-vs-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 30px; border-radius: 14px; font-weight: 700; color: #0B0F1A; text-decoration: none;
          background: linear-gradient(135deg, #22D3EE 0%, #7C6FF0 100%); box-shadow: 0 14px 30px -14px rgba(124,111,240,0.7), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform .14s ease; }
        .mel-vs-cta:hover { transform: translateY(-2px); }
        .mel-vs-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 0.9rem; text-decoration: none; color: var(--mel-text-secondary); border: 1px solid var(--mel-border-default); background: var(--mel-surface-1); transition: color .16s ease, border-color .16s ease; }
        .mel-vs-pill:hover { color: var(--mel-text-primary); border-color: var(--mel-sheet-accent); }
        .mel-vs-body { color: var(--mel-text-secondary); line-height: 1.65; }
        .mel-vs-link { color: var(--mel-text-primary); text-underline-offset: 4px; }
        @media (max-width: 767px) { .mel-vs > .mel-sheet:first-child { padding-top: 116px; } }
        @media (prefers-reduced-motion: reduce) { .mel-vs-cta, .mel-vs-faq summary::after { transition: none; } .mel-vs-cta:hover { transform: none; } }

        .mel-cmp .mel-vs-table tbody th { padding: 14px 16px; text-align: left; line-height: 1.5; }
        .mel-cmp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
        .mel-cmp-ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 14px; font-weight: 700; text-decoration: none;
          color: var(--mel-text-primary); border: 1px solid var(--mel-border-default); background: var(--mel-surface-1); transition: border-color .16s ease, box-shadow .16s ease; }
        .mel-cmp-ghost:hover { border-color: var(--mel-sheet-accent); }
        .mel-sheet--deep .mel-cmp-ghost:hover { box-shadow: 0 0 0 1px var(--mel-sheet-accent), 0 0 20px -4px var(--mel-sheet-accent); }
        .mel-cmp-ghost:focus-visible, .mel-cmp a:focus-visible { outline: 2px solid var(--mel-sheet-accent); outline-offset: 3px; }
        .mel-cmp-fine { margin: 18px 0 0; max-width: 80ch; font-size: 0.86rem; line-height: 1.6; color: var(--mel-text-tertiary); }
        .mel-cmp-system-one { margin-top: 32px; border-left: 3px solid var(--mel-sheet-accent); }
        .mel-cmp-system-one p { margin: 0; font-size: 1.04rem; line-height: 1.68; color: var(--mel-text-primary); }
        .mel-cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: 24px; }
        .mel-cmp-num { display: block; margin-bottom: 10px; font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; color: var(--mel-sheet-accent); }
        .mel-cmp-body { margin: 10px 0 0; color: var(--mel-text-secondary); line-height: 1.62; font-size: 0.97rem; }
        .mel-cmp-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
        .mel-cmp-server { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
        .mel-cmp-cmd { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; font: 600 0.92rem/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--mel-text-primary); }
        .mel-cmp-cmd span { color: var(--mel-sheet-accent); }
        @media (max-width: 767px) { .mel-cmp-server { grid-template-columns: minmax(0, 1fr); } }
        @media (prefers-reduced-motion: reduce) { .mel-cmp-ghost { transition: none; } }