:root {
  --xp-width: 92rem;
  --xp-copy-width: 45rem;
  --xp-title: clamp(3.25rem, 7vw, 5.5rem);
  --xp-gap: 2rem;
  --xp-muted: #b5bbc3;
  --xp-rule: #30343a;
}

.xp-hero { padding: calc(var(--wt-banner-offset) + var(--wt-header-height) + 3rem) 0 4rem; }
.xp-copy { max-width: var(--xp-copy-width); margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.xp-copy .breadcrumbs { justify-content: center; margin-bottom: 2rem; color: var(--xp-muted); font-size: .875rem; }
.xp-copy .eyebrow { color: var(--xp-muted); }
.xp-copy h1 { margin: .75rem 0 1rem; font-size: var(--xp-title); letter-spacing: -.06em; line-height: 1.05; }
.xp-tagline { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.5; font-weight: 600; word-break: keep-all; }
.xp-description { margin: 1rem 0 0; color: var(--xp-muted); font-size: 1rem; line-height: 1.8; word-break: keep-all; }
.xp-copy .hero-actions { justify-content: center; margin-top: 1.75rem; }
.xp-demo { width: min(100% - 3rem, var(--xp-width)); margin: 3rem auto 0; }
.xp-section { width: min(100% - 3rem, var(--xp-width)); margin: 0 auto; padding: 4rem 0 5rem; }
.xp-section > h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -.045em; margin: 0 0 2.5rem; }
.xp-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xp-gap); }
.xp-mode { border-top: 1px solid var(--xp-rule); padding: 1.5rem 0 0; }
.xp-mode > span { color: var(--xp-muted); font: .75rem var(--wt-font-mono); }
.xp-mode h3 { margin: 1rem 0 .75rem; font-size: 1.5rem; letter-spacing: -.03em; }
.xp-mode p { color: var(--xp-muted); font-size: 1rem; line-height: 1.8; margin: 0 0 1rem; word-break: keep-all; }
.xp-mode a { display: inline-flex; min-height: 2.5rem; align-items: center; gap: .5rem; font-weight: 600; }
.xp-mode a:hover { color: var(--wt-cyan); }
.xp-note { max-width: var(--xp-copy-width); margin: 3rem auto 0; padding: 1rem; border-top: 1px solid var(--xp-rule); text-align: center; color: var(--xp-muted); font-size: .875rem; line-height: 1.8; }
@media (max-width: 800px) { .xp-modes { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .xp-hero { padding-top: calc(var(--wt-banner-offset) + var(--wt-header-height) + 2rem); }
  .xp-demo { width: calc(100% - 1.5rem); margin-top: 2rem; }
  .xp-section { padding: 2rem 0 3rem; }
}