* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 2px; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
p { margin-top: 0; }

.site-body {
  font-family: var(--bc-font);
  background: var(--bc-char);
}

.site-hero {
  background: var(--bc-ink);
  color: var(--bc-paper);
}

.site-nav {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--bc-space-5) var(--bc-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-5);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-4);
  color: var(--bc-sky);
  text-decoration: none;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--bc-weight-body);
  letter-spacing: -0.06em;
  line-height: 1;
  text-transform: lowercase;
}

.site-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.site-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bc-space-5);
  flex-wrap: wrap;
}

.site-links a {
  color: var(--bc-chalk-lift);
  text-decoration: none;
  font-size: var(--bc-text-label);
  font-weight: var(--bc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bc-tracking-label);
}

.site-links a:hover { color: var(--bc-sky); }

.hero-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(var(--bc-space-7), 10vw, 148px) var(--bc-space-6) var(--bc-space-8);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.72fr);
  gap: clamp(var(--bc-space-7), 8vw, 112px);
  align-items: end;
}

.hero-label {
  margin: 0 0 var(--bc-space-5);
  color: var(--bc-chalk-lift);
}

.hero-title {
  color: var(--bc-sky);
  margin: 0 0 var(--bc-space-7);
}

.hero-copy {
  max-width: 700px;
  margin-bottom: var(--bc-space-6);
  color: var(--bc-chalk-lift);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  font-weight: var(--bc-weight-body);
}

.hero-actions {
  display: flex;
  gap: var(--bc-space-3);
  flex-wrap: wrap;
}

.site-btn {
  text-decoration: none;
  border: 2px solid transparent;
  transition: opacity var(--bc-speed) var(--bc-ease), background var(--bc-speed) var(--bc-ease), color var(--bc-speed) var(--bc-ease), border-color var(--bc-speed) var(--bc-ease);
}
.site-btn.site-btn-primary {
  background: var(--bc-sky);
  color: var(--bc-ink);
}
.site-btn.site-btn-primary:hover {
  background: var(--bc-chalk-lift);
  border-color: var(--bc-sky);
  color: var(--bc-ink);
  opacity: 1;
}

.hero-mark { margin: 0; }
.hero-plate {
  background: var(--bc-char-deep);
  padding: clamp(var(--bc-space-5), 4vw, var(--bc-space-7));
}
.hero-plate img { width: 100%; }

.site-main {
  background: var(--bc-chalk);
  color: var(--bc-ink);
}

/* Sections are full-bleed planes of color — no separating lines. The
   padding trick keeps content at 1180px while the plane runs edge to edge. */
.site-section {
  padding: var(--bc-space-8) max(var(--bc-space-5), calc((100% - 1180px) / 2));
}
#download {
  background: var(--bc-sky);
  color: var(--bc-ink);
}
.section-head { max-width: 760px; margin-bottom: var(--bc-space-6); }
.section-head .bc-label { margin-bottom: var(--bc-space-3); }
.section-head .bc-display { color: var(--bc-ink); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bc-space-4);
}

.feature-panel { min-height: 220px; }
.feature-panel .bc-label { display: block; margin-bottom: var(--bc-space-3); }
.feature-panel .bc-head { margin-bottom: var(--bc-space-3); color: inherit; }
.feature-panel p { color: color-mix(in srgb, var(--bc-ink) 78%, var(--bc-slate) 22%); }
.feature-blue {
  background: var(--bc-sky);
  color: var(--bc-ink);
}
.feature-deep { background: var(--bc-chalk-deep); }
.feature-ink {
  background: var(--bc-ink);
  color: var(--bc-chalk-lift);
}
.feature-ink .bc-label,
.feature-ink .bc-head { color: var(--bc-sky); }
.feature-ink p { color: var(--bc-chalk-lift); }

.download-panel {
  max-width: 980px;
  background: var(--bc-ink);
  color: var(--bc-chalk-lift);
  padding: var(--bc-space-6) var(--bc-space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--bc-space-6);
  align-items: center;
}
.download-panel p { max-width: 720px; margin-bottom: 0; }
.download-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--bc-space-3);
}
.download-actions .site-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bc-space-2);
  min-width: 190px;
  border-color: var(--bc-chalk-lift);
  box-shadow: 5px 5px 0 var(--bc-char-deep);
}
.download-actions .site-btn:hover {
  border-color: var(--bc-chalk-lift);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--bc-char-deep);
}
.download-actions small {
  font-size: 0.72em;
  font-weight: var(--bc-weight-body);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.72;
}
.site-footer {
  background: var(--bc-ink);
  color: var(--bc-chalk-lift);
  padding: var(--bc-space-6) var(--bc-space-5);
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--bc-space-5);
  flex-wrap: wrap;
}
.footer-inner a { color: var(--bc-sky); }

.text-page {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--bc-space-8) var(--bc-space-5);
  background: var(--bc-chalk);
  color: var(--bc-ink);
}
.text-page h1 {
  color: var(--bc-ink);
  margin: var(--bc-space-2) 0 var(--bc-space-6);
}
.text-page h2 {
  margin-top: var(--bc-space-7);
}
.text-page p,
.text-page li { color: color-mix(in srgb, var(--bc-ink) 78%, var(--bc-slate) 22%); }
.text-page .bc-label { color: var(--bc-slate); }

code {
  background: var(--bc-chalk-deep);
  padding: 2px 5px;
  font-family: var(--bc-font-mono);
  font-size: 0.92em;
}

@media (max-width: 840px) {
  .site-nav { align-items: flex-start; flex-direction: column; }
  .site-links { justify-content: flex-start; gap: var(--bc-space-4); }
  .hero-wrap,
  .feature-grid,
  .download-panel { grid-template-columns: 1fr; }
  .hero-mark { max-width: 340px; }
}

@media (max-width: 520px) {
  .site-nav,
  .hero-wrap { padding-left: var(--bc-space-4); padding-right: var(--bc-space-4); }
  .site-section { padding-left: var(--bc-space-4); padding-right: var(--bc-space-4); }
  .site-links { gap: var(--bc-space-3); }
  .site-brand img { width: 40px; height: 40px; }
  .download-actions { grid-template-columns: 1fr; }
}