/*
   Smart in-Flow IoT Platform (/smart-in-flow-platform/): the <style> of smart-in-flow-platform.astro.
   Every selector starts with .page-platform (the body class), which keeps the rules on this page and replaces the
   specificity of Astro's [data-astro-cid-*] scoping (plan §8.3). The PageHero styles are shared (site.css).
*/

/* Hairline between two consecutive light sections: as wide as the container, like the other hairlines of the
   system (not viewport wide). */
.page-platform .platform-rule {
  padding-top: 0;
}

.page-platform .platform-rule > .container {
  border-top: 1px solid var(--c-line);
  padding-top: var(--section);
}

/* The product name (Smart in-Flow) must not break at its hyphen in a heading. */
.page-platform .platform-nobr {
  white-space: nowrap;
}

/* On narrow screens the global h2 hyphenation ("Ga-teway", "intelli-gencia") is unwanted here: these two headings
   break into three clean lines without hyphens. */
.page-platform .platform-gateway__title,
.page-platform .platform-ai .section-title {
  hyphens: manual;
  -webkit-hyphens: manual;
}

.page-platform .platform-figure {
  margin: 0;
}

/* --- Layers: a real order, numbered 1–4 --- */
.page-platform .platform-layers {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: layer;
}

.page-platform .platform-layers li {
  counter-increment: layer;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--c-line);
}

.page-platform .platform-layers li:last-child {
  border-bottom: 1px solid var(--c-line);
}

.page-platform .platform-layers li::before {
  content: counter(layer);
  font: 300 var(--fs-4) / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-turq-700);
  padding-top: 0.1rem;
}

.page-platform .platform-layers h3 {
  font-size: var(--fs-3);
  margin: 0 0 0.3em;
}

.page-platform .platform-layers p {
  margin: 0;
  color: var(--c-text-2);
}

/* --- Gateway (dark text section): title + intro on the left, features on the right --- */
.page-platform .platform-gateway__text .lead {
  margin-bottom: 0;
}

.page-platform .platform-gateway__body {
  min-width: 0;
}

.page-platform .platform-gateway__list {
  gap: 0.9rem;
  color: var(--c-on-dark-2);
}

.page-platform .platform-gateway__list strong {
  color: var(--c-on-dark);
}

.page-platform .platform-gateway__note {
  margin-top: var(--space-6);
  color: var(--c-on-dark-2);
}

/* --- Question–answer list --- */
.page-platform .platform-faq {
  display: grid;
  gap: var(--space-6);
  margin: 0;
}

@media (min-width: 48em) {
  .page-platform .platform-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-8);
  }

  /* Question–answer pairs in one row: the answers start from a common line (subgrid); the gap between the
     question and the answer is the margin-bottom of the dt. */
  .page-platform .platform-faq > div {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0;
  }
}

.page-platform .platform-faq > div {
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-5);
}

.page-platform .platform-faq dt {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.page-platform .platform-faq dd {
  margin: 0;
  color: var(--c-text-2);
}

/* --- Edge AI closing paragraph and links --- */
.page-platform .platform-ai__foot {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

/* --- Rollout steps: a real order, numbered 1–4 --- */
.page-platform .platform-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 40em) {
  .page-platform .platform-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A 2×2 grid between 40 and 72em; the four-column row only where one column is comfortably readable. */
@media (min-width: 72em) {
  .page-platform .platform-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-platform .platform-steps li {
  counter-increment: step;
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-5);
}

/* The number has the size of the layer list's (--fs-4): one scale, two layouts. */
.page-platform .platform-steps li::before {
  content: counter(step);
  display: block;
  font: 300 var(--fs-4) / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-turq-700);
  margin-bottom: var(--space-3);
}

.page-platform .platform-steps h3 {
  font-size: var(--fs-3);
  margin: 0 0 0.4em;
}

.page-platform .platform-steps p {
  margin: 0;
  color: var(--c-text-2);
}

.page-platform .platform-steps__foot {
  margin-top: var(--space-6);
}

.page-platform .platform-note {
  max-width: 68ch;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
}

.page-platform .platform-note p {
  margin: 0 0 var(--space-3);
}