/* ==========================================================================
   STABLY - technology.css  (technology.html only; loaded after site.css)
   Page-specific rules. Every class here is prefixed "s-tech-"; shared
   classes from site.css are reused for everything they already cover.
   ========================================================================== */


/* #why - three plain lines separated by hairlines (no icons, no numbers)
   -------------------------------------------------------------------------- */
.s-tech-why .s-h2 { max-width: 22em; }

.s-tech-list {
  max-width: 968px;              /* = the heading's 22em at 44px, so rules and h2 share one measure */
  margin-top: 56px;
  border-top: 1px solid var(--s-line);
}
.s-tech-list li {
  padding: 26px 0;
  border-bottom: 1px solid var(--s-line);
  font-size: 20px;
  line-height: 1.5;
  color: var(--s-ink);
}
.s-tech-list b { font-weight: 600; }
.s-tech-list__note {
  display: inline-block;
  margin-left: 14px;
  font-size: 17px;
  color: var(--s-ink-3);
}


/* #slam - heading on top, then point cloud + two emphasis points
   -------------------------------------------------------------------------- */
.s-tech-slam .s-h2 { max-width: 22em; }
.s-tech-slam__split { margin-top: 72px; }
.s-tech-slam__split .s-split__media { aspect-ratio: 3 / 2; }

.s-tech-point + .s-tech-point { margin-top: 44px; }
.s-tech-point .s-h3 { font-size: 24px; }
.s-tech-point .s-h3 + .s-lead { margin-top: 12px; }


/* #firmware - text only: large h2, one paragraph
   -------------------------------------------------------------------------- */
.s-tech-firmware .s-h2 { max-width: 18em; }
.s-tech-firmware .s-h2 + .s-lead { margin-top: 32px; }


/* #hardware - transparent exploded-view render: no dark box, no crop
   -------------------------------------------------------------------------- */
.s-tech-hardware .s-split { grid-template-columns: 1fr 1.1fr; }   /* wider column for the render */
.s-tech-hardware .s-split__media {
  order: 2;                      /* render on the right on desktop */
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
}
.s-tech-hardware .s-split__media img {
  height: auto;
  object-fit: contain;
}


/* Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .s-tech-hardware .s-split { grid-template-columns: 1fr; }
  .s-tech-hardware .s-split__media { order: 0; max-width: 720px; }   /* stacked: image first, same measure as .s-split__body */
}

@media (max-width: 1023px) {
  .s-tech-list li { font-size: 19px; }
  .s-tech-point .s-h3 { font-size: 22px; }
  .s-tech-slam__split { margin-top: 56px; }
}

@media (max-width: 767px) {
  .s-tech-list { margin-top: 40px; }
  .s-tech-list li { padding: 20px 0; font-size: 18px; }
  .s-tech-list__note {
    display: block;
    margin: 6px 0 0;
    font-size: 16px;
  }
  .s-tech-slam__split { margin-top: 44px; }
  .s-tech-point + .s-tech-point { margin-top: 36px; }
  .s-tech-point .s-h3 { font-size: 20px; }
  .s-tech-firmware .s-h2 + .s-lead { margin-top: 24px; }
}

/* Technology page runs tighter: shorter section padding, and the first section sits close under the title band */
.s-section { --s-section-y: 80px; }

@media (max-width: 767px) { .s-section { --s-section-y: 56px; }  }

/* SLAM section takes the point-cloud image's own background so the figure dissolves into it */
.s-tech-slam { background: #060A0F; color: var(--s-on-dark); }
.s-tech-slam .s-lead { color: var(--s-on-dark-2); }
.s-tech-slam .s-split__media { background: #060A0F; border-radius: 0; }
#hardware { padding-top: 72px; }
@media (max-width: 767px) { #hardware { padding-top: 48px; } }

/* Hardware: exploded view first, copy beneath it */
.s-tech-hardware__figure {
  max-width: 460px;          /* supporting illustration, not a hero */
  margin: 0 auto;
}
.s-tech-hardware__figure img { width: 100%; height: auto; object-fit: contain; }
.s-tech-hardware__body { max-width: 720px; margin: 48px auto 0; }
.s-tech-hardware__body .s-h2 { max-width: 26em; }
@media (max-width: 767px) { .s-tech-hardware__body { margin-top: 28px; } }

/* Hardware points: three columns under the heading */
.s-tech-hardware__body { max-width: none; margin-top: 40px; }
.s-tech-hardware__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 36px;
}
.s-tech-hardware__points .s-tech-point { margin-top: 0; }   /* the SLAM-section stacking margin must not offset the columns */
.s-tech-hardware__points .s-h3 { font-size: 22px; }
.s-tech-hardware__points .s-lead { margin-top: 12px; font-size: 16.5px; }
@media (max-width: 1023px) { .s-tech-hardware__points { gap: 28px; } }
@media (max-width: 767px) { .s-tech-hardware__points { grid-template-columns: 1fr; gap: 28px; margin-top: 24px; } }

/* Patents and research: two columns at the end of the page */
.s-tech-ip__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.s-tech-ip__list { margin-top: 28px; max-width: 34em; border-top: 1px solid var(--s-line); }
.s-tech-ip__list li { padding: 16px 0; border-bottom: 1px solid var(--s-line); font-size: 17px; }
.s-tech-ip__etc { color: var(--s-ink-3); }
.s-tech-ip__research { padding-top: 10px; }
.s-tech-ip__research .s-h3 { font-size: 24px; }
.s-tech-ip__research .s-lead { margin-top: 14px; }
.s-tech-ip__research .s-link { margin-top: 20px; }
@media (max-width: 1023px) { .s-tech-ip__grid { gap: 40px; } }
@media (max-width: 767px) { .s-tech-ip__grid { grid-template-columns: 1fr; gap: 32px; } .s-tech-ip__research { padding-top: 0; } }