/* Zustack placeholder. Tokens are the design system's; light is the default, dark follows the OS. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/unbounded-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --surface: #f3f4f6;
  --ink: #1b1b1f;
  --ink-muted: #565660;
  --graphite: #424145;
  --on-graphite: #f3f4f6;
  --volt: #cdf545;
  --on-volt: #16170e;
  --volt-tint: #d9f27e;

  --font-display: "Unbounded", "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #121215;
    --ink: #f0f1f3;
    --ink-muted: #a7a8b2;
    --graphite: #424147;
    --volt-tint: #2e3a0c;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Header */
.header { padding-top: 24px; padding-bottom: 24px; display: flex; align-items: center; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand svg { flex: none; }
.brand__name { font: 300 36px/42px var(--font-display); letter-spacing: -0.02em; }
.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 9px; }

/* Hero */
.hero {
  flex: 1 1 auto;
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
}
.hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero__art { flex: 1 1 360px; min-width: 0; }
.hero p { margin: 0; max-width: 480px; }

.overline {
  font: 500 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lead { font-size: 17px; line-height: 26px; }
.muted { color: var(--ink-muted); }

/* The stack: sites, apps, mail, domains */
.zs-stack { display: grid; gap: 16px; }
.zs-layer { height: 48px; border-radius: 14px; }
.zs-layer--sites { margin-left: 32px; background: var(--volt); }
.zs-layer--apps { margin-left: 8px; margin-right: 24px; background: var(--graphite); }
.zs-layer--mail { margin-left: 48px; background: var(--ink); }
.zs-layer--domains { margin-right: 32px; background: var(--volt-tint); }

/* Footer */
.footer { padding-top: 32px; padding-bottom: 48px; }
.footer p { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }

@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .brand__name { font-size: 28px; line-height: 34px; }
  .hero { padding-top: 32px; padding-bottom: 32px; gap: 48px; }
  .hero__copy, .hero__art { flex-basis: 100%; }
}