/* Meanwhile components — load after tokens.css. Class prefix: mw- */
body { margin: 0; background: var(--mw-paper); color: var(--mw-ink); font-family: var(--mw-font-sans); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
.mw-stage { padding: var(--mw-space-5); display: flex; flex-wrap: wrap; gap: var(--mw-space-5); align-items: center; }
.mw-stack { display: flex; flex-direction: column; gap: var(--mw-space-4); }
.mw-display { font-family: var(--mw-font-display); font-weight: 900; letter-spacing: -0.02em; }
.mw-num { font-family: var(--mw-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.mw-muted { color: var(--mw-ink-muted); }

/* Button */
.mw-btn { font: inherit; font-weight: 600; font-size: 15px; line-height: 20px; min-height: 44px; padding: 0 var(--mw-space-4); display: inline-flex; align-items: center; gap: var(--mw-space-2);
  border: var(--mw-stroke-bold) solid var(--mw-edge); border-radius: var(--mw-radius-md); background: var(--mw-paper-raised); color: var(--mw-ink); cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease; }
.mw-btn:focus-visible { outline: var(--mw-stroke-heavy) solid var(--mw-focus); outline-offset: 2px; }
.mw-btn-primary { background: var(--mw-caption); color: var(--mw-on-caption); box-shadow: var(--mw-shadow-pop); }
.mw-btn-primary:hover { transform: translate(-1px, -1px); }
.mw-btn-primary:active { transform: translate(3px, 3px); box-shadow: var(--mw-shadow-press); }
.mw-btn-danger { background: var(--mw-pop-red); color: var(--mw-on-pop-red); }
.mw-btn-ghost { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.mw-btn-sm { min-height: 32px; font-size: 13px; padding: 0 var(--mw-space-3); border-radius: var(--mw-radius-sm); }
.mw-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* Caption box: the signature */
.mw-caption { display: inline-block; background: var(--mw-caption); color: var(--mw-on-caption); border: var(--mw-stroke-bold) solid var(--mw-edge); border-radius: var(--mw-radius-0);
  font-family: var(--mw-font-display); font-weight: 900; font-size: 14px; line-height: 18px; letter-spacing: .06em; text-transform: uppercase; padding: var(--mw-space-2) var(--mw-space-3); }
.mw-caption-hero { font-size: 22px; line-height: 26px; padding: var(--mw-space-3) var(--mw-space-4); border-width: var(--mw-stroke-heavy); box-shadow: var(--mw-shadow-pop-lg); transform: rotate(-2deg); }
.mw-caption-soft { background: var(--mw-caption-soft); color: var(--mw-ink); }
.mw-highlight { background: var(--mw-caption); color: var(--mw-on-caption); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Card */
.mw-card { background: var(--mw-paper-raised); border: var(--mw-stroke-bold) solid var(--mw-edge); border-radius: var(--mw-radius-md); padding: var(--mw-space-5); }
.mw-card-featured { box-shadow: var(--mw-shadow-pop); }
.mw-card-quiet { border: var(--mw-stroke-hair) solid var(--mw-hairline); }
.mw-card h3 { margin: 0 0 var(--mw-space-1); font-size: 20px; line-height: 28px; font-weight: 600; }
.mw-card p { margin: 0; color: var(--mw-ink-muted); font-size: 14px; line-height: 20px; }

/* Input */
.mw-field { display: flex; flex-direction: column; gap: var(--mw-space-1); }
.mw-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mw-input { font: inherit; min-height: 44px; padding: 0 var(--mw-space-3); background: var(--mw-paper-raised); color: var(--mw-ink);
  border: var(--mw-stroke-bold) solid var(--mw-edge); border-radius: var(--mw-radius-sm); }
.mw-input::placeholder { color: var(--mw-ink-muted); }
.mw-input:focus { outline: var(--mw-stroke-heavy) solid var(--mw-focus); outline-offset: 2px; }
.mw-field-error .mw-input { border-color: var(--mw-pop-red); }
.mw-help { font-size: 14px; line-height: 20px; color: var(--mw-ink-muted); }
.mw-field-error .mw-help { color: var(--mw-pop-red); }

/* Speech bubble */
.mw-bubble { position: relative; background: var(--mw-caption-soft); color: var(--mw-ink); border: var(--mw-stroke-bold) solid var(--mw-edge); border-radius: 20px; padding: var(--mw-space-3) var(--mw-space-4); max-width: 320px; font-size: 14px; line-height: 20px; }
.mw-bubble::after { content: ""; position: absolute; left: 28px; bottom: -12px; width: 18px; height: 18px; background: var(--mw-caption-soft); border-right: var(--mw-stroke-bold) solid var(--mw-edge); border-bottom: var(--mw-stroke-bold) solid var(--mw-edge); transform: skewX(30deg) rotate(45deg); }
.mw-bubble strong { font-family: var(--mw-font-display); font-weight: 900; }

/* Badge */
.mw-badge { display: inline-flex; align-items: center; gap: var(--mw-space-1); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px var(--mw-space-2); border: var(--mw-stroke-bold) solid var(--mw-edge); border-radius: var(--mw-radius-sm); background: var(--mw-paper-raised); color: var(--mw-ink); }
.mw-badge-new { background: var(--mw-caption); color: var(--mw-on-caption); }
.mw-badge-go { color: var(--mw-go); border-color: var(--mw-go); }
.mw-badge-danger { color: var(--mw-pop-red); border-color: var(--mw-pop-red); }

/* Halftone */
.mw-halftone { background-color: var(--mw-caption); background-image: radial-gradient(var(--mw-on-caption) 1.4px, transparent 1.9px); background-size: var(--mw-space-2) var(--mw-space-2); }
.mw-halftone-fade { -webkit-mask-image: linear-gradient(135deg, transparent 20%, #000 90%); mask-image: linear-gradient(135deg, transparent 20%, #000 90%); }

/* Logo: fixed treatment, do not restyle */
.mw-logo { display: inline-block; background: #f7d84a; border: 4px solid #111111; box-shadow: 10px 10px 0 #111111; padding: 18px 30px 20px 30px; transform: rotate(-2deg); }
.mw-logo-type { display: block; font-family: 'Archivo Black', 'Arial Black', sans-serif; font-size: 62px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: #111111; transform: skewX(-8deg); }
.mw-logo-sm { transform: rotate(-2deg) scale(.4); transform-origin: left top; }

/* Screens (examples) */
.mw-phone { width: 320px; border: var(--mw-stroke-bold) solid var(--mw-edge); border-radius: 24px; background: var(--mw-paper); overflow: hidden; }
.mw-phone-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--mw-space-3) var(--mw-space-4); border-bottom: var(--mw-stroke-hair) solid var(--mw-hairline); }
.mw-phone-body { padding: var(--mw-space-4); display: flex; flex-direction: column; gap: var(--mw-space-4); }
.mw-row .mw-num { white-space: nowrap; }
.mw-row { display: flex; gap: var(--mw-space-3); justify-content: space-between; align-items: center; padding: var(--mw-space-3) 0; border-bottom: var(--mw-stroke-hair) solid var(--mw-hairline); font-size: 14px; line-height: 20px; }
.mw-row:last-child { border-bottom: 0; }