/* ============================================================
   R2026 Platform — technology stack overview
   Full-width page rather than a Wiki page, so the technology
   cards get the whole 1200px wrapper.
   ============================================================ */

/* ---------- Hero ----------
   Same component as the Devices / Software catalogs and the Wiki
   (#CatalogHero), redefined here so this page does not have to pull
   catalog-styles.css. The `-Platform` modifier only trims the top
   padding, matching the Wiki treatment. */
#CatalogHero.-Platform {
  display: flex;
  padding: 72px 10px 24px;
  flex-direction: column;
  align-items: center;
}

#CatalogHero.-Platform .wrapper {
  gap: 16px;
}

#CatalogHero.-Platform .CatalogHero__Text {
  color: #ffffff36;
  font-size: 72px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -2px;
}

#CatalogHero.-Platform .CatalogHero__Text h1 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: #FFF;
}


/* ---------- Page shell ---------- */
#Platform .wrapper {
  padding-bottom: 120px;
  gap: 40px;
}

.Platform__Intro {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 940px;
}

.Platform__Intro__Line {
  color: #FFF;
  font-size: 22px;
  line-height: 145%;
  letter-spacing: -0.3px;
  margin: 0;
}

.Platform__Highlights {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.Platform__Highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #FFFFFFCC;
  font-size: 17px;
  line-height: 155%;
}

.Platform__Highlight svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: #E6FF2A;
}

/* ---------- Call to action between the intro and the cards ---------- */
.Platform__Hint {
  margin: 0;
}

.Platform__Hint span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #E6FF2A;
  color: #16171B;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  padding: 12px 16px;
}

.Platform__Hint svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* ---------- Technology groups ---------- */
.Platform__Groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.Platform__Group__Label {
  color: #E6FF2A;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.Platform__Group__Items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.Platform__Group__Items.-two  { grid-template-columns: repeat(2, 1fr); }
.Platform__Group__Items.-four { grid-template-columns: repeat(4, 1fr); }
.Platform__Group__Items.-five { grid-template-columns: repeat(5, 1fr); }

.Platform__Item {
  display: block;
  background: #16171B;
  border: 1px solid #2A2E32;
  border-radius: 16px;
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

a.Platform__Item:hover {
  border-color: #E6FF2A;
  background: #191B20;
}

.Platform__Item__Name {
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 135%;
}

@media (max-width: 1000px) {
  .Platform__Group__Items,
  .Platform__Group__Items.-four,
  .Platform__Group__Items.-five { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  #CatalogHero.-Platform .CatalogHero__Text { font-size: 44px; letter-spacing: -1px; }
  .Platform__Intro__Line { font-size: 18px; }
  .Platform__Highlight { font-size: 15px; }
  .Platform__Group__Items,
  .Platform__Group__Items.-two,
  .Platform__Group__Items.-four,
  .Platform__Group__Items.-five { grid-template-columns: 1fr; }
}