:root {
  color-scheme: light dark;
  --background: #fbfaf8;
  --foreground: #161616;
  --subtle: #6b6a67;
  --hairline: #dedbd6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #101010;
    --foreground: #f5f4f1;
    --subtle: #aaa8a4;
    --hairline: #353535;
  }
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 54px) clamp(24px, 5.2vw, 76px) 26px;
}
.site-header {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 14px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.header-mark { display: block; width: 34px; height: 14px; object-fit: contain; }
.hero {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 58px 0 70px;
}
.hero-inner { width: min(100%, 740px); text-align: center; }
.eyebrow, .platforms, .site-footer {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
}
.eyebrow { margin: 0 0 clamp(44px, 7vh, 76px); color: var(--subtle); }
.hero-mark { display: block; width: clamp(180px, 28vw, 300px); height: auto; margin: 0 auto 38px; }
h1 {
  margin: 0;
  font-size: clamp(48px, 7vw, 91px);
  line-height: 0.98;
  letter-spacing: -0.075em;
  font-weight: 550;
}
.description {
  margin: 30px auto 0;
  color: var(--subtle);
  font-size: clamp(16px, 1.65vw, 20px);
  line-height: 1.65;
  letter-spacing: -0.025em;
}
.platforms { margin: 50px 0 0; color: var(--foreground); }
.site-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--subtle);
  font-size: 9px;
}
@media (prefers-color-scheme: dark) {
  .header-mark, .hero-mark { filter: invert(1); }
}
@media (max-width: 600px) {
  .page-shell { padding-bottom: 20px; }
  .hero { padding: 65px 0 80px; }
  .hero-mark { margin-bottom: 34px; }
  .description { max-width: 310px; }
  .desktop-break { display: none; }
  .site-footer { font-size: 8px; letter-spacing: 0.12em; }
}
.handoff-page { min-height: 100svh; display: grid; place-items: center; padding: 32px; }
.handoff-inner { width: min(100%, 420px); text-align: center; }
.handoff-mark { display: block; width: 160px; margin: 0 auto 40px; }
.handoff-inner h1 { font-size: clamp(38px, 6vw, 54px); }
.handoff-inner p { color: var(--subtle); line-height: 1.6; margin: 24px 0 35px; }
.handoff-button { display: block; padding: 18px 24px; border-radius: 100px; background: var(--foreground); color: var(--background); font-weight: 600; text-decoration: none; }
.handoff-home { display: inline-block; margin-top: 24px; color: var(--subtle); font-size: 14px; }
@media (prefers-color-scheme: dark) { .handoff-mark { filter: invert(1); } }