/* Front page: the Creative Card Wallet teaser. The sample card and tiles use the real wallet's own styles (wallet.css), so they always look like the product. */
.mwh { padding-block: clamp(2.5rem, 5vw, 4rem); }
.mwh-divider { display: flex; align-items: center; gap: var(--s-4); margin: 0 0 var(--s-8); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mwh-divider::before, .mwh-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mwh-head { display: grid; justify-items: center; gap: var(--s-3); margin-bottom: var(--s-8); }
.mwh-head .eyebrow { margin: 0; }
.mwh-head h2 { margin: 0; }
.mwh-head .lead { margin: 0; max-width: 40rem; }
.mwh-icon { border-radius: 12px; }
.mwh-head h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; letter-spacing: -.04em; }
.mwd-hint { margin: 0 0 var(--s-5); color: var(--muted); font-size: var(--fs-sm); }

/* the working demo: the real wallet's sidebar and pages, with made-up clients */
.mwd-window { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #0b0b0b; text-align: left; }
.mwd-window .mw-side { position: static; height: auto; }
.mwd-window .mw-main { padding: var(--s-6) var(--s-8) var(--s-8); max-width: none; min-width: 0; }
.mw-snav button { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); min-height: 40px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-2); font: inherit; font-weight: 600; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.mw-snav button:hover { background: var(--surface-2); color: var(--text); }
.mw-snav button[aria-current="page"] { background: var(--surface-3); color: var(--text); }
.mw-snav button:focus-visible, .mwd-tab:focus-visible, .mwd-back:focus-visible, .mwd-link:focus-visible, button.mw-sw:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.mwd-h1 { margin: 0; font-size: var(--fs-2xl); letter-spacing: -.03em; line-height: 1.1; font-weight: 800; }
.mwd-window h3 { letter-spacing: -.01em; }
.mwd-fake { pointer-events: none; }
.mwd-back { background: none; border: 0; padding: 0; font: inherit; color: var(--green); cursor: pointer; }
.mwd-link { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.mwd-link:hover strong { text-decoration: underline; }
.mwd-stats { margin-bottom: var(--s-5); }
.mwd-window [hidden] { display: none; }
.mwd-window .mw-switch { justify-content: flex-start; }
button.mw-sw { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.mwd-window .mw-av { background: var(--surface-3); }
.mwd-window .mw-sw.is-on .mw-av { box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 4px #fff; }
.mwd-window .mw-cardprev .mini-card { --cw: 220px; }
.mwd-window .mw-creator { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-5); }
.mwd-window .mw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mwd-window .mw-tile.is-wide { grid-column: 1 / -1; }
.mwd-window .mwd-stats { grid-template-columns: repeat(2, minmax(0, 220px)); }
.mw-tabs button { padding: 6px 14px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.mw-tabs button:hover { color: var(--text); }
.mw-tabs button.is-on { background: var(--text); color: #000; }
/* one tab at a time: Card info shows the card and the details; One-sheet shows the sheet across the whole width */
[data-tab="card"] .mwd-pane-sheet, [data-tab="sheet"] .mwd-pane-card { display: none; }
[data-tab="sheet"] .mwd-window .mw-creator, [data-tab="sheet"].mwd-window .mw-creator { grid-template-columns: minmax(0, 1fr); }
[data-tab="sheet"] .mw-cside { display: none; }
.mwd-sheet-actions { margin-bottom: var(--s-4); }
.mwd-window .os-frame { max-width: none; margin: 0; }
.mwh-flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); max-width: 880px; margin: var(--s-6) auto 0; padding: 0; }
.mwh-flow li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.mwh-flow strong { color: var(--text); }
.mwh-num { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--green-tint); color: var(--green); display: grid; place-items: center; font-weight: 900; font-size: var(--fs-sm); }
.mwh-cta { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-8); text-align: center; }
.mwh-cta p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .mwd-window { grid-template-columns: minmax(0, 1fr); }
  .mwd-window .mw-side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--s-3) var(--s-4); border-right: 0; border-bottom: 1px solid var(--line); gap: var(--s-3); }
  .mwd-window .mw-snav { display: flex; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .mwd-window .mw-snav button { width: auto; white-space: nowrap; }
  .mwd-window .mw-me { display: none; }
  .mwd-window .mw-main { padding: var(--s-5) var(--s-4) var(--s-6); }
  .mwd-window .mw-creator { grid-template-columns: minmax(0, 1fr); }
  .mwd-window .mw-cardpanel { width: fit-content; max-width: 100%; margin: 0 auto; }
  .mwd-window .mw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mwd-window .mw-tile:nth-child(3) { grid-column: 1 / -1; }
  .mwd-window .mwd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mwh-flow { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}
.mwd-window .mwh-name { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.mwd-window .mw-tabs button { min-height: 40px; }
.mwd-window .mw-sw.is-on .mw-av.ring-black { box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 4px var(--mw-gold); }
.mwd-window .mw-sw.is-on .mw-av.ring-verified { box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 4px var(--green); }