/* Marketing chrome for mandeck.dev — sits next to the Mac app, not against it.
   Tokens from Sources/Model/MandeckUI.swift. The interactive hero in
   hero-mock.css is product-truth and must not pick up these rules. */

:root {
  --font-d: 'Syne', sans-serif;
  --font-b: 'Hanken Grotesk', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', ui-monospace, monospace;
  --max: 1160px;
  --bg: #0C0C0E;
  --surface: #161618;
  --surface2: #202024;
  --border: rgba(255, 255, 255, 0.07);
  --border2: rgba(255, 255, 255, 0.12);
  --txt: #B2B6BF;
  --txt2: #9A9AA0;
  --txt3: #6A6A70;
  --accent: #4C8EF8;
  --amber: #E8A33D;
  --iri1: #B2B6BF;
  --iri2: #4C8EF8;
  --iri3: #9A9AA0;
}

body {
  background: #0C0C0E;
  background-image: none;
  color: #B2B6BF;
}

body::after { opacity: 0.035; z-index: 0; }

.btn-primary {
  background: #E8EAEF;
  color: #0C0C0E;
  box-shadow: none;
}
.btn-primary:hover {
  opacity: 1;
  transform: none;
  background: #fff;
  box-shadow: none;
}
.btn-primary svg path { stroke: #0C0C0E; }

.btn-secondary { color: #6A6A70; }
.btn-secondary:hover { color: #B2B6BF; }

.section-eyebrow,
.feature-pre { color: #4C8EF8; }

.hp-dot {
  background: #4C8EF8;
  box-shadow: none;
}

.shot-glow {
  background: radial-gradient(ellipse at 50% 60%, rgba(76, 142, 248, 0.08) 0%, transparent 68%);
}

.price-card.hot {
  border-color: rgba(76, 142, 248, 0.35);
  box-shadow: none;
}
.price-feat .pm,
.price-rules span::before { color: #4C8EF8; }
.price-badge {
  color: #0C0C0E;
  background: #E8A33D;
}

/* Footer — real capabilities, not a link dump */
.site-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: #0C0C0E;
  padding: 56px 0 28px;
  color: #9A9AA0;
  /* the page's own body face — the footer is not a different typeface from the page */
  font-family: inherit;
}
.site-foot-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: 36px 32px;
}
.site-foot-brand .nav-logo { margin-bottom: 14px; }
.site-foot-brand p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #9A9AA0;
  max-width: 320px;
}
.site-foot h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6A6A70;
  margin-bottom: 12px;
}
.site-foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.site-foot-col a {
  font-size: 13.5px;
  color: #B2B6BF;
  line-height: 1.4;
}
.site-foot-col a:hover { color: #fff; }
.site-foot-col .hint {
  font-size: 12px;
  color: #6A6A70;
  line-height: 1.45;
}
.site-foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
  color: #6A6A70;
}
.site-foot-legal .sp { flex: 1; }

@media (max-width: 800px) {
  .site-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-foot { padding: 40px 0 24px; }
  .site-foot-grid { grid-template-columns: 1fr; gap: 28px; }
}