/* ============================================================================
   TerraMap — homepage
   ========================================================================= */

/* ── Hero ─────────────────────────────────────────────────────────────────
   45% copy / 55% map. The map runs to the right viewport edge rather than
   sitting in a card: it is the hero's ground, not an illustration in a box. */

.tm-hero {
  display: grid;
  grid-template-columns: var(--tm-hero-copy) var(--tm-hero-map);
  align-items: stretch;
  min-block-size: min(760px, calc(100vh - var(--tm-navbar-height)));
  border-block-end: 1px solid var(--tm-divider);
}

.tm-hero__copy {
  display: flex;
  align-items: center;
  padding-block: var(--tm-space-8);
  /* Aligns the copy with the container grid the rest of the page uses, while
     the map stays free to bleed off the right edge. */
  padding-inline: max(var(--tm-gutter), calc((100vw - var(--tm-container)) / 2));
  padding-inline-end: var(--tm-space-3);
}

.tm-hero__copy-inner { max-inline-size: 36rem; }

.tm-hero__lead { margin-block-start: var(--tm-space-5); max-inline-size: 40ch; }

.tm-hero__audience {
  margin-block-start: var(--tm-space-3);
  font-size: var(--tm-text-sm);
  color: var(--tm-text-muted);
}

.tm-hero__cta { margin-block-start: var(--tm-space-6); gap: var(--tm-space-5); }

.tm-hero__map { position: relative; min-block-size: 420px; }

/* The narrative sections run 16px tighter than the global 96px rhythm.
   Hero, live-map proof and final CTA deliberately keep the generous default. */
.tm-section--flow { padding-block: calc(var(--tm-section-y) - var(--tm-space-4)); }

/* ── Platform capabilities ─────────────────────────────────────────────────
   Four product families, presented as capabilities rather than as an
   architecture drawing.

   This replaced a diagram with a spine and branch connectors joining a
   "TerraMap Platform" origin node to four domains labelled 01 / MAP,
   02 / LOC, 03 / RTE, 04 / OPT. It read as an internal system diagram, and a
   visitor who has to decode RTE before they learn we do routing has already
   been lost. The relationships those lines drew are not something a customer
   needs on a marketing page; the four names are.

   Deliberately NOT cards-in-boxes. A rule above each column and real
   whitespace separates them; another bordered rectangle around every feature
   list is the visual noise this section is being rescued from. */

.tm-capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tm-space-6) var(--tm-space-5);
  margin-block-start: var(--tm-space-7);
}

@media (max-width: 899px) {
  .tm-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .tm-capabilities { grid-template-columns: minmax(0, 1fr); }
}

.tm-capability {
  /* min-inline-size:0 lets a grid column actually shrink; without it a long
     unbroken word sets the column's floor and pushes the row wider than the
     page. */
  min-inline-size: 0;
  padding-block-start: var(--tm-space-4);
  border-block-start: 2px solid var(--tm-primary);
}

/* The ordinal is a quiet index, not a label. It never carries meaning the
   title does not already carry. */
.tm-capability__index {
  margin: 0;
  color: var(--tm-text-subtle);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-text-caption);
  letter-spacing: var(--tm-tracking-eyebrow);
}

.tm-capability__title {
  margin: var(--tm-space-2) 0 0;
  font-size: var(--tm-text-h3);
  line-height: var(--tm-leading-snug);
}

.tm-capability__lead {
  margin: var(--tm-space-2) 0 0;
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-relaxed);
}

.tm-capability__list {
  margin: var(--tm-space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tm-space-2);
  font-size: var(--tm-text-sm);
}

.tm-capability__list li {
  position: relative;
  padding-inline-start: var(--tm-space-4);
  color: var(--tm-text);
}

.tm-capability__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--tm-border-strong);
}

.tm-product__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space-5);
  align-items: end;
  justify-content: space-between;
  margin-block-end: var(--tm-space-6);
}
.tm-product__head .tm-section-head { margin-block-end: 0; }

.tm-product__aside {
  display: flex;
  align-items: center;
  gap: var(--tm-space-5);
  padding-block-end: var(--tm-space-1);
}

.tm-product__map { aspect-ratio: 16 / 9; }

/* Shown only when the section defers its map (touch / narrow screens). */
.tm-product__deferred {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--tm-surface-sunken);
}
.tm-map[data-state="deferred"] .tm-product__deferred { display: flex; }

/* ── Commercial value ──────────────────────────────────────────────────── */

.tm-value-section { background: var(--tm-surface); }

.tm-value {
  border-block: 1px solid var(--tm-border-strong);
}

.tm-value__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0 var(--tm-space-8);
  max-inline-size: none;
  margin-block-end: 0;
  padding-block: var(--tm-space-7);
}

.tm-value__intro > .tm-eyebrow { grid-column: 1 / -1; }
.tm-value__intro h2 span { display: block; }
.tm-value__intro > .tm-lead {
  align-self: end;
  margin-block-start: 0;
  max-inline-size: 48ch;
}

.tm-value__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: 1px solid var(--tm-border-strong);
}

.tm-value__points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tm-space-4);
  padding: var(--tm-space-6);
  border-inline-start: 1px solid var(--tm-divider);
}

.tm-value__points li:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.tm-value__index {
  padding-block-start: 0.2em;
  font-family: var(--tm-font-mono);
  font-size: var(--tm-text-caption);
  color: var(--tm-accent-text);
}

.tm-value__points p { margin-block-start: var(--tm-space-2); max-inline-size: 46ch; }

/* ── Credit model ─────────────────────────────────────────────────────────
   A concept diagram, not a pricing table. Credits branch into the primary
   services; Optimization sits below Matrix to preserve the system hierarchy. */

.tm-credits {
  padding: var(--tm-space-6);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  background: var(--tm-surface);
  overflow: hidden;
}

.tm-credits__balance {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--tm-space-2);
  inline-size: min(100%, 17rem);
  margin-inline: auto;
  padding: var(--tm-space-5);
  border-radius: var(--tm-radius-md);
  background: var(--tm-accent-subtle);
  border: 1px solid var(--tm-accent);
  text-align: center;
}

.tm-credits__balance::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  block-size: var(--tm-space-7);
  border-inline-start: 1px solid var(--tm-accent);
}

.tm-credits__balance-label {
  font-weight: var(--tm-weight-semibold);
  font-size: var(--tm-text-body-lg);
  color: var(--tm-accent-text);
}
.tm-credits__balance-note {
  font-size: var(--tm-text-caption);
  letter-spacing: var(--tm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tm-text-muted);
}

.tm-credits__services {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--tm-space-4);
  margin-block-start: var(--tm-space-7);
  padding-block-start: var(--tm-space-6);
}

.tm-credits__services::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 10%;
  border-block-start: 1px solid var(--tm-accent);
}

.tm-credits__services > li {
  position: relative;
  min-inline-size: 0;
  font-size: var(--tm-text-sm);
}

.tm-credits__services > li::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 50%;
  block-size: var(--tm-space-6);
  border-inline-start: 1px solid var(--tm-accent);
}

.tm-credits__services > li::after {
  content: "";
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: calc(50% - 3px);
  inline-size: 7px;
  block-size: 7px;
  border: 1px solid var(--tm-accent);
  border-radius: 50%;
  background: var(--tm-surface);
}

.tm-credits__service-node {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  padding: var(--tm-space-3);
  border-block: 1px solid var(--tm-border);
  color: var(--tm-text);
  font-weight: var(--tm-weight-medium);
  text-align: center;
}

.tm-credits__child-list {
  position: relative;
  padding-block-start: var(--tm-space-6);
}

.tm-credits__child-list::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  block-size: var(--tm-space-6);
  border-inline-start: 1px solid var(--tm-accent);
}

.tm-credits__child-list > li::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--tm-space-6) - 3px);
  inset-inline-start: calc(50% - 3px);
  inline-size: 7px;
  block-size: 7px;
  border: 1px solid var(--tm-accent);
  border-radius: 50%;
  background: var(--tm-surface);
}

.tm-credits__benefit {
  margin-block-start: var(--tm-space-6);
  padding-block-start: var(--tm-space-4);
  border-block-start: 1px solid var(--tm-divider);
  font-size: var(--tm-text-sm);
  color: var(--tm-text-muted);
}

/* ── Use cases ─────────────────────────────────────────────────────────── */

.tm-usecases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--tm-border-strong);
}

.tm-usecase {
  min-inline-size: 0;
  padding: var(--tm-space-5);
  border-inline-start: 1px solid var(--tm-divider);
}

.tm-usecase:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.tm-usecase__visual {
  display: flex;
  align-items: center;
  block-size: 5.5rem;
  margin-block-end: var(--tm-space-5);
  color: var(--tm-primary);
}

.tm-usecase__visual svg {
  inline-size: 9rem;
  max-block-size: 4.5rem;
  overflow: visible;
}

.tm-usecase__visual svg * { vector-effect: non-scaling-stroke; }
.tm-usecase__visual .tm-motif-node { fill: var(--tm-bg); }
.tm-usecase p { margin-block-start: var(--tm-space-3); }

/* ── Developer strip ───────────────────────────────────────────────────── */

.tm-dev {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--tm-space-7);
  align-items: center;
}
.tm-dev__note { display: grid; gap: var(--tm-space-5); }
.tm-dev__note p { max-inline-size: 44ch; }

/* ── Final CTA ─────────────────────────────────────────────────────────── */

.tm-final .tm-container { max-inline-size: 46rem; text-align: center; }
.tm-final .tm-lead { margin-inline: auto; margin-block-start: var(--tm-space-4); }
.tm-final__cta { justify-content: center; margin-block-start: var(--tm-space-6); }

/* ── Responsive ───────────────────────────────────────────────────────────
   Breakpoints are chosen where the CONTENT breaks, not at device names. */

@media (max-width: 1279px) {
  .tm-hero__copy-inner { max-inline-size: 32rem; }
}

/* Inter's loaded metrics need a slightly narrower wide-screen size for each
   sentence to remain one physical line inside the fixed 45% copy column. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .tm-hero-title { font-size: calc(1.625rem + 1.875vw); }
}

@media (min-width: 1280px) {
  .tm-hero-title { font-size: 3.125rem; }
}

@media (max-width: 1099px) {
}

@media (max-width: 1023px) {
  .tm-usecases { grid-template-columns: repeat(2, 1fr); }
  .tm-dev { grid-template-columns: 1fr; gap: var(--tm-space-5); }
  .tm-product__map { aspect-ratio: 4 / 3; }

  .tm-usecase { padding: var(--tm-space-5); }
  .tm-usecase:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .tm-usecase:nth-child(even) { border-inline-start: 1px solid var(--tm-divider); }
  .tm-usecase:nth-child(-n + 2) { border-block-end: 1px solid var(--tm-divider); }
}

@media (max-width: 899px) {
  /* Copy first, then a large interactive map — never a thumbnail, and never
     hidden. The map is the product demonstration. */
  .tm-hero {
    grid-template-columns: 1fr;
    min-block-size: 0;
  }
  .tm-hero__copy {
    padding-block: var(--tm-space-7) var(--tm-space-6);
    padding-inline: var(--tm-gutter);
  }
  .tm-hero__copy-inner { max-inline-size: none; }
  .tm-hero__map {
    block-size: 58vh;
    min-block-size: 340px;
  }

  .tm-value__intro { grid-template-columns: 1fr; gap: var(--tm-space-5); }
  .tm-value__intro > .tm-lead { margin-block-start: 0; }
  .tm-value__points { grid-template-columns: 1fr; }
  .tm-value__points li {
    padding: var(--tm-space-5) 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--tm-divider);
  }
  .tm-value__points li:first-child { border-block-start: 0; }
}

@media (max-width: 767px) {
  .tm-section--flow { padding-block: calc(var(--tm-section-y) - var(--tm-space-3)); }
  .tm-product__head { align-items: start; }
  .tm-product__aside { flex-wrap: wrap; gap: var(--tm-space-3) var(--tm-space-5); }
  .tm-product__map { aspect-ratio: 3 / 4; max-block-size: 70vh; }
  .tm-hero__cta { gap: var(--tm-space-4); }
  .tm-hero__cta .tm-btn { flex: 1 1 auto; }

  .tm-credits { padding: var(--tm-space-5); }
  .tm-credits__balance {
    inline-size: 100%;
    padding: var(--tm-space-4);
    text-align: start;
  }
  .tm-credits__balance::after {
    inset-inline-start: 0;
    block-size: var(--tm-space-5);
  }
  .tm-credits__services {
    grid-template-columns: 1fr;
    gap: var(--tm-space-3);
    margin-block-start: var(--tm-space-5);
    padding-block-start: 0;
    padding-inline-start: var(--tm-space-6);
  }
  .tm-credits__services::before {
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    border-block-start: 0;
    border-inline-start: 1px solid var(--tm-accent);
  }
  .tm-credits__services > li::before {
    inset-block-start: 50%;
    inset-block-end: auto;
    inset-inline-start: calc(0px - var(--tm-space-6));
    inline-size: var(--tm-space-6);
    block-size: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--tm-accent);
  }
  .tm-credits__services > li::after {
    inset-block-start: calc(50% - 3px);
    inset-inline-start: calc(0px - var(--tm-space-6) - 3px);
  }
  .tm-credits__service-node { justify-content: flex-start; text-align: start; }
  .tm-credits__child-list {
    margin-inline-start: var(--tm-space-5);
    padding-block-start: var(--tm-space-3);
  }
  .tm-credits__child-list::before {
    inset-inline-start: 0;
    block-size: var(--tm-space-3);
  }
  .tm-credits__child-list > li { position: relative; padding-inline-start: var(--tm-space-4); }
  .tm-credits__child-list > li::before {
    inset-block-start: calc(var(--tm-space-3) - 3px);
    inset-inline-start: -3px;
  }
  .tm-credits__child-list > li::after {
    content: "";
    position: absolute;
    inset-block-start: var(--tm-space-3);
    inset-inline-start: 0;
    inline-size: var(--tm-space-4);
    border-block-start: 1px solid var(--tm-accent);
  }
  .tm-credits__benefit { margin-block-start: var(--tm-space-5); }
}

@media (max-width: 599px) {
  .tm-usecases { grid-template-columns: 1fr; }
  .tm-usecase,
  .tm-usecase:first-child,
  .tm-usecase:nth-child(odd),
  .tm-usecase:nth-child(even) {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--tm-space-5);
    align-items: center;
    padding: var(--tm-space-5) 0;
    border-inline-start: 0;
    border-block-end: 1px solid var(--tm-divider);
  }
  .tm-usecase:last-child { border-block-end: 0; }
  .tm-usecase__visual { block-size: auto; margin-block-end: 0; }
  .tm-usecase__visual svg { inline-size: 100%; }
}

@media (max-width: 400px) {
  .tm-hero__cta { display: grid; }
  .tm-hero__cta .tm-link { justify-self: start; }
}

/* The three-line explanation under the credits diagram. The diagram shows
   the shape of the model; these say what it means for a reader who has never
   seen a shared balance before. */
.tm-credits__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tm-space-6);
  margin-block-start: var(--tm-space-7);
  padding: 0;
  list-style: none;
}

.tm-credits__points h3 { margin-block-end: var(--tm-space-2); }
.tm-credits__points p { margin: 0; }

/* Empty until credit costs are finalised; it then renders beside the service
   name without any change to the surrounding layout. */
.tm-credits__service-cost:not(:empty) {
  margin-inline-start: var(--tm-space-2);
  font-family: var(--tm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
}

@media (max-width: 899px) {
  .tm-credits__points { grid-template-columns: 1fr; gap: var(--tm-space-5); }
}