/* Chrome shared by the public marketing pages (templates/_marketing_base.html).
   Loaded after base.css, which owns the colour tokens -- there is one palette,
   not a marketing copy of it. Page-specific rules stay in each template's own
   <style> block. */

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background: #fff;
}

.header {
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #111;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* The mask itself is in templates/_brand_mark_css.html, inlined into
   _marketing_base.html's style block -- a stylesheet cannot include it. */
.brand-mark {
  width: 22px;
  height: 27px;
}

.brand-name { display: inline-flex; flex-direction: column; line-height: 1.05; }

.brand-say {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-color);
}

.nav-links { display: inline-flex; align-items: center; gap: 1rem; }
.nav-links a { color: #333; text-decoration: none; font-size: 0.95rem; }
.nav-links a:hover { color: var(--primary-color); }
.nav-links .btn {
  background: var(--primary-color);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 40px;
  letter-spacing: 0.3px;
}
.nav-links .btn:hover { background: var(--primary-dark); color: #fff; }

/* Pages that want a wider or narrower column set --main-width themselves. */
main {
  max-width: var(--main-width, min(90vw, 680px));
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.footer { padding: 1.5rem; text-align: center; color: #666; border-top: 1px solid #eee; }
.footer a { color: var(--primary-color); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-operator { margin-top: 0.6rem; font-size: 0.8rem; color: #888; }