/* Gradien — fincore/mono · sections A
   Hero (headline + ASCII bonsai field + CTA), statement section, telescope. */

/* ---- Hero --------------------------------------------------------------- */
.mn-hero { padding-top: clamp(18px, 2.4vw, 30px); }
.mn-hero h1 { max-width: 30ch; }

.mn-hero__usps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  margin-top: clamp(14px, 2vw, 26px);
}
.mn-hero__mark { text-align: center; }

.mn-hero__field {
  width: 100%;
  height: clamp(360px, 38vw, 560px);
  margin-top: clamp(20px, 3vw, 44px);
}
/* No JS means no canvas paint — collapse the band rather than leave a hole.
   Reduced motion keeps it: tree.js still draws one settled frame. */
html:not(.js) .mn-hero__field { display: none; }
.mn-tree { width: 100%; height: 100%; }

.mn-hero__cta {
  display: flex;
  justify-content: center;
  padding-block: clamp(30px, 5vw, 70px) clamp(50px, 8vw, 120px);
}

/* ---- Statement ---------------------------------------------------------- */
.mn-say { padding-block: clamp(80px, 12vw, 180px); }
.mn-say .mn-eyebrow {
  display: flex;
  align-items: flex-end;
  height: 48px;
  margin-left: 240px;
  margin-bottom: 0;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}
.mn-say p.mn-d-l + p.mn-d-l { margin-top: 1.2em; }

/* ---- Telescope ---------------------------------------------------------- */
.mn-sys {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(70px, 10vw, 140px);
}
.mn-sys__lede {
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.mn-sys__frame {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  margin-top: 10px;
}
.mn-sys__tree > .mn-sys__frame { margin-top: 0; }
.mn-sys__meta { display: flex; justify-content: space-between; gap: 16px; }
.mn-sys__body h3 { padding-block: 18px 26px; text-align: center; }

html.js .mn-sys {
  height: 520vh;
  padding-block: 0;
}
html.js .mn-sys__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--nav-h) + 24px) 24px;
  overflow: hidden;
}
html.js .mn-sys__head { flex: 0 0 auto; }
html.js .mn-sys__view {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
html.js .mn-sys__tree {
  position: absolute;
  inset-inline: var(--gutter);
  top: 50%;
  will-change: transform;
}
html.js .mn-sys__body { overflow: hidden; height: 0; opacity: 0; }

@media (max-width: 900px) {
  .mn-hero h1 { max-width: none; }
  .mn-hero__usps { grid-template-columns: 1fr; gap: 4px; }
  .mn-hero__mark, .mn-hero__usps .mn-tr { text-align: left; }
  .mn-say .mn-eyebrow { margin-left: 0; }
  .mn-indent { text-indent: 0; }
  html.js .mn-sys { height: 420vh; }
  .mn-sys__frame { padding: 8px; }
  html.js .mn-sys__stage { overflow-y: visible; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .mn-sys { height: auto; padding-block: clamp(70px, 10vw, 140px); }
  html.js .mn-sys__stage { position: static; height: auto; overflow: visible; padding-block: 0; }
  html.js .mn-sys__view { position: static; overflow: visible; }
  html.js .mn-sys__tree { position: static; }
  html.js .mn-sys__body { height: auto; opacity: 1; }
}