:root {
  color-scheme: light;
  --color-ink: #141522; --color-graphite: #262838; --color-muted: #64677a;
  --color-soft-white: #f8f8fb; --color-surface: #fff; --color-line: #e2e3eb;
  --color-brand: #6846e8; --color-brand-dark: #4e2fc2; --color-brand-soft: #eeeaff;
  --accent-learning: #6d4aff; --accent-money: #177c68; --accent-fitness: #ef6a45;
  --accent-safety: #d99516; --accent-scanning: #087ea4; --accent-skincare: #c1548c;
  --accent-field-ops: #3b6e8f; --accent-workforce: #4557a7;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem;
  --space-5: 2.5rem; --space-6: 3rem; --space-8: 4rem; --space-10: 5rem; --space-12: 6rem;
  --radius-sm: .75rem; --radius-md: 1.25rem; --radius-lg: 2rem; --radius-pill: 999px;
  --shadow-sm: 0 8px 24px rgba(20,21,34,.07); --shadow-md: 0 20px 50px rgba(20,21,34,.12);
  --shadow-device: 0 38px 80px rgba(20,21,34,.25), 0 8px 20px rgba(20,21,34,.16);
  --max-width: 1200px;
}
.status-chip {display:inline-flex;align-items:center;gap:.45rem;width:max-content;padding:.42rem .7rem;border-radius:var(--radius-pill);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.status-chip::before{width:.45rem;height:.45rem;border-radius:50%;background:currentColor;content:""}
.status-chip[data-stage="beta"]{color:#5636d1;background:#eeeaff}.status-chip[data-stage="preview"]{color:#9b6510;background:#fff3cf}.status-chip[data-stage="candidate"]{color:#16705f;background:#dff5ee}
.phone-frame{position:relative;width:min(100%,260px);aspect-ratio:9/19.3;margin:auto;border:8px solid #171820;border-radius:38px;background:#171820;box-shadow:var(--shadow-device);overflow:hidden}
.phone-frame::before{position:absolute;z-index:2;top:7px;left:50%;width:32%;height:18px;border-radius:0 0 12px 12px;background:#171820;transform:translateX(-50%);content:""}
.phone-frame img{width:100%;height:100%;border-radius:29px;object-fit:cover}
.phone-frame img.app-art{object-fit:contain;padding:22%;background:linear-gradient(155deg,var(--color-brand-soft),var(--color-surface))}.phone-frame.rotate-left{transform:perspective(900px) rotateY(5deg) rotateZ(-2deg)}.phone-frame.rotate-right{transform:perspective(900px) rotateY(-5deg) rotateZ(2deg)}
:focus-visible{outline:3px solid var(--color-brand);outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.phone-frame{transform:none!important}}