/* Landing / marketing hero. Requires tokens.css + components.css loaded
   first. The swirl is explicitly allowed here (design-system.md: "Allowed
   on: auth screens, marketing hero"). */

body{margin:0;background:var(--page);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

.hero-shell{position:relative;min-height:100vh;display:flex;
  align-items:center;justify-content:center;padding:24px;overflow:hidden}
.hero-shell .site-swirl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,252,254,0) 55%,var(--page) 100%)}
@media (prefers-reduced-motion:reduce){.hero-shell .site-swirl *{animation:none !important}}

.hero-card.card{position:relative;z-index:2;max-width:480px;width:100%;
  margin:16px;padding:56px 44px;text-align:center}

.hero-logo{width:72px;height:72px;display:block;margin:0 auto 20px;
  border-radius:var(--r-card)}

/* The wordmark keeps a distinct logotype treatment (tracked caps) rather
   than sentence case — this is brand identity, not a UI label, the same
   exception design-system.md carves out for the kicker style. */
.hero-card h1{font-family:Fraunces,Georgia,serif;font-weight:600;
  letter-spacing:.22em;font-size:clamp(24px,5.5vw,38px);margin:0 0 4px;
  text-indent:.22em;color:var(--ink)}
.hero-card h1 .cursor{display:inline-block;width:2px;background:var(--ultramarine);
  margin-left:2px;animation:blink 1.1s steps(1) infinite;vertical-align:baseline}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-card h1 .cursor{animation:none;opacity:1}}

.hero-rule{height:1px;background:var(--line);margin:24px auto;max-width:280px}

.hero-card .kicker{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 30px;line-height:1.9}

.hero-cta{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--sodium);
  color:var(--sodium-ink);text-decoration:none;box-shadow:var(--shadow-sm);
  transition:background-color .12s}
.hero-cta:hover{background:var(--sodium-press)}
.hero-cta:focus-visible{outline:2px solid var(--ultramarine);outline-offset:3px}
.hero-cta svg{width:24px;height:24px}

/* Footer overlay — see auth.css's .auth-shell .pub-footer for why this
   isn't the flow footer (.hero-shell centres its card both axes too). */
.hero-shell .pub-footer{position:absolute;left:0;right:0;bottom:0;z-index:2;
  margin:0;padding:14px 20px 20px;border-top:none;
  color:var(--ink-3);font-size:12px;text-align:center}