.mdw { position: relative; max-width: 880px; margin: 0 auto; padding: clamp(112px, 15vh, 156px) 20px clamp(56px, 9vh, 96px); text-align: center; }
.mdw-eyebrow { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #818CF8; }
.light .mdw-eyebrow { color: #1E3A8A; }
.mdw-h1 { margin: 16px 0 0; font: 700 clamp(2.4rem, 5vw, 4rem)/1.04 Poppins, system-ui, sans-serif; letter-spacing: -.035em; color: var(--mel-text-primary); }
.mdw-sub { margin: 16px auto 0; max-width: 40em; text-wrap: balance; font: 400 clamp(1rem, .4vw + .92rem, 1.15rem)/1.6 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); }

/* OS switch: an inset glass track, the chosen system raised with a soft rim. */
.mdw-seg { display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: clamp(28px, 4.5vh, 40px); padding: 5px; border-radius: 999px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.light .mdw-seg { background: #E9EEF5; border-color: rgba(15,23,42,.06); box-shadow: inset 3px 3px 7px rgba(15,23,42,.09), inset -3px -3px 7px rgba(255,255,255,.9); }
.mdw-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; cursor: pointer; font: 600 14px/1 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mdw-seg button:hover { color: var(--mel-text-primary); }
.mdw-seg button svg { width: 17px; height: 17px; flex: none; }
.mdw-seg button[aria-checked="true"] { color: var(--mel-text-primary); background: rgba(129,140,248,.12); border-color: #818CF899; box-shadow: 0 0 0 1px #818CF833, 0 0 20px -2px #818CF855; }
.light .mdw-seg button[aria-checked="true"] { color: #1E3A8A; background: #FFFFFF; border-color: rgba(30,58,138,.22); box-shadow: 4px 4px 10px rgba(15,23,42,.10), -3px -3px 8px rgba(255,255,255,.95); }

/* Stage: the device on a soft glow. Not a card. */
.mdw-stage { position: relative; display: grid; place-items: center; margin: clamp(28px, 5vh, 48px) auto 0; width: min(380px, 86vw); color: var(--mel-text-primary);
  --mbd-line: rgba(199,210,254,.42); --mbd-screen: rgba(255,255,255,.025); --mbd-glow: radial-gradient(closest-side, #818CF840, #22D3EE1A 60%, transparent); }
.light .mdw-stage { --mbd-line: rgba(30,58,138,.38); --mbd-screen: rgba(255,255,255,.7); --mbd-glow: radial-gradient(closest-side, rgba(30,58,138,.14), transparent); }
.mdw-disc { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: var(--mel-text-primary);
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,.02)); border: 1px solid #818CF855; box-shadow: 0 0 0 1px #818CF822, 0 0 28px -4px #818CF877; }
.light .mdw-disc { background: #F3F6FA; border-color: rgba(30,58,138,.12); box-shadow: 6px 6px 14px rgba(15,23,42,.12), -5px -5px 12px rgba(255,255,255,.95); }
.mdw-disc svg { width: 32px; height: 32px; }
.mdw-fade { animation: mdwFade .32s ease both; }
@keyframes mdwFade { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }

.mdw-get { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(20px, 3.5vh, 32px); }
.mdw-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
.mdw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; text-decoration: none;
  font: 600 15.5px/1 Poppins, system-ui, sans-serif; color: #fff; background: linear-gradient(135deg, #7C6FF0, #818CF8);
  box-shadow: 0 0 0 1px rgba(167,139,250,.4), 0 0 26px rgba(124,111,240,.38); transition: transform .15s ease, box-shadow .15s ease; }
.mdw-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(167,139,250,.55), 0 0 34px rgba(124,111,240,.55); }
.light .mdw-btn { background: #1E3A8A; box-shadow: 0 10px 24px -8px rgba(30,58,138,.45); }
.light .mdw-btn:hover { box-shadow: 0 14px 28px -8px rgba(30,58,138,.5); }
.mdw-pkg { font: 600 14px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--mel-text-secondary); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mdw-pkg:hover { color: var(--mel-text-primary); }
.mdw-meta { margin: 0; font: 500 12.5px/1.6 Poppins, system-ui, sans-serif; color: var(--mel-text-tertiary); }
.mdw-meta b { font-weight: 600; color: var(--mel-text-secondary); }

/* Three steps on one hairline. */
.mdw-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(64px, 10vh, 104px) 0 0; padding: 0; }
.mdw-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 10px; }
.mdw-steps li + li::before { content: ""; position: absolute; top: 15px; right: calc(50% + 24px); width: calc(100% - 48px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.38) 18%, rgba(148,163,184,.38) 82%, transparent); }
.mdw-num { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 8px; border-radius: 50%; border: 1px solid #818CF866;
  font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; color: #818CF8; box-shadow: 0 0 16px -4px #818CF866; }
.light .mdw-num { color: #1E3A8A; border-color: rgba(30,58,138,.3); box-shadow: none; }
.mdw-steps strong { font: 600 15.5px/1.3 Poppins, system-ui, sans-serif; color: var(--mel-text-primary); }
.mdw-steps span { max-width: 22em; font: 400 13.5px/1.5 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); }

/* What you get: one quiet row. */
.mdw-perks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin: clamp(48px, 8vh, 80px) 0 0; padding: 0; }
.mdw-perks li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 13.5px/1.3 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); }
/* Wide screens: the row may run wider than the column so it stays on one line, with hairline dividers. */
@media (min-width: 1100px) {
  .mdw-perks { flex-wrap: nowrap; gap: 0; width: min(1060px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
  .mdw-perks li { padding: 0 20px; }
  .mdw-perks li + li { border-left: 1px solid rgba(148,163,184,.26); }
}
.mdw-perks svg { width: 16px; height: 16px; flex: none; color: #22D3EE; }
.light .mdw-perks svg { color: #1E3A8A; }

/* Servers and VMs: one inset well. */
.mdw-vm { margin: clamp(48px, 8vh, 80px) auto 0; max-width: 560px; }
.mdw-vm-label { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mel-text-tertiary); }
.mdw-well { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 6px 6px 6px 18px; border-radius: 14px; text-align: left;
  background: rgba(2,6,23,.55); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 4px rgba(0,0,0,.5); }
.light .mdw-well { background: #E9EEF5; border-color: rgba(15,23,42,.06); box-shadow: inset 3px 3px 7px rgba(15,23,42,.09), inset -3px -3px 7px rgba(255,255,255,.9); }
.mdw-well code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 0 !important; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; font: 600 13.5px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--mel-text-primary); }
.mdw-well code::before { content: "$ "; color: #22D3EE; }
.light .mdw-well code::before { color: #1E3A8A; }
.mdw-copy { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  font: 600 12.5px/1 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); background: transparent; border: 1px solid rgba(148,163,184,.22); }
.mdw-copy:hover { color: var(--mel-text-primary); border-color: #818CF888; }
.light .mdw-copy:hover { border-color: #1E3A8A; }
.mdw-copy svg { width: 14px; height: 14px; }
.mdw-vm-note { margin: 10px 0 0; font: 400 13px/1.55 Poppins, system-ui, sans-serif; color: var(--mel-text-tertiary); }
.mdw-link { color: #818CF8; text-decoration: none; font-weight: 600; }
.mdw-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.light .mdw-link { color: #1E3A8A; }
.mdw-close { margin: clamp(48px, 8vh, 80px) 0 0; font: 400 14.5px/1.6 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); }
.mdw-close a { display: inline-flex; align-items: center; gap: 6px; }
.mdw-close svg { width: 15px; height: 15px; }

.mdw button:focus-visible, .mdw a:focus-visible { outline: 2px solid #818CF8; outline-offset: 3px; }
.light .mdw button:focus-visible, .light .mdw a:focus-visible { outline-color: #1E3A8A; }
.mdw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .mdw-seg { display: grid; width: 100%; }
  .mdw-seg button { padding: 0 10px; font-size: 13.5px; }
  .mdw-btn { width: 100%; padding: 0 18px; }
  .mdw-steps { grid-template-columns: 1fr; gap: 28px; }
  .mdw-steps li + li::before { top: -22px; right: auto; left: 50%; width: 1px; height: 16px; background: rgba(148,163,184,.38); }
  .mdw-perks { flex-direction: column; align-items: center; }
  .mdw-well code { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mdw-fade { animation: none; }
  .mdw-btn, .mdw-seg button { transition: none; }
  .mdw-btn:hover { transform: none; }
}