.live-demo-hub { margin-top: 62px; padding: 35px; border-radius: 34px; background: linear-gradient(130deg, #C5B5F406, transparent), var(--brand-surface); border: 1px solid #E4E5F018; }
.live-demo-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.live-demo-head h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.055em; margin: 15px 0 12px; line-height: 1.1; }
.live-demo-head p:not(.eyebrow) { color: var(--brand-muted); font-size: 13px; line-height: 1.7; margin: 0; max-width: 490px; }
.live-format-switch { display: flex; gap: 4px; padding: 5px; border-radius: 99px; background: #292A3366; flex-shrink: 0; }
.live-format-switch button { border: 0; border-radius: 99px; padding: 12px 16px; color: var(--brand-muted); background: transparent; font: 600 11px Arial, sans-serif; cursor: pointer; }
.live-format-switch button[aria-pressed="true"] { color: var(--brand-bg); background: var(--brand-silver); }
.live-demo-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.live-demo-card { --live-color: #FF00A8; padding: 26px; border-radius: 28px; background: var(--brand-bg); border: 1px solid color-mix(in srgb, var(--live-color) 15%, transparent); min-width: 0; }
.live-demo-card.men { --live-color: #B16CFF; }
.live-demo-card > span { font-size: 8px; letter-spacing: .14em; color: color-mix(in srgb, var(--live-color) 65%, white); }
.live-demo-card h3 { margin: 17px 0 10px; font-size: 27px; letter-spacing: -.045em; }
.live-demo-card > p { margin: 0 0 24px; color: var(--brand-muted); font-size: 12px; line-height: 1.7; }
.live-demo-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.live-demo-actions a { display: flex; gap: 9px; align-items: center; justify-content: space-between; text-decoration: none; padding: 14px; border-radius: 99px; background: var(--live-color); color: #211522; font-size: 11px; font-weight: 700; min-height: 45px; line-height: 1.5; }
.live-demo-actions a:last-child { color: var(--brand-silver); background: var(--brand-surface-raised); }
.live-demo-actions a:hover { filter: brightness(1.1); }
.live-demo-hub .live-demo-note { margin: 22px 0 0; color: var(--brand-muted); font-size: 10px; line-height: 1.7; }
@media (max-width: 700px) {
  .live-demo-hub { margin-top: 34px; padding: 25px 20px; border-radius: 29px; }
  .live-demo-head { display: block; }
  .live-demo-head h2 { font-size: 34px; }
  .live-format-switch { display: inline-flex; margin-top: 22px; }
  .live-demo-cards { grid-template-columns: 1fr; gap: 15px; }
  .live-demo-card { padding: 23px 19px; border-radius: 25px; }
  .live-demo-actions a { padding: 13px 11px; font-size: 10px; }
}
@media (max-width: 350px) {
  .live-demo-actions { grid-template-columns: 1fr; }
}