/* Homepage layouts; shared values are defined in site-system.css. */
main > .section--lg .section-sub:last-child { margin-bottom: 0; }
#features .hiw-step { padding-block: 20px; }

/* A quiet, readable note aligned with the surrounding content. */
#features .section-cite {
  max-width: none;
  margin: 12px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .68);
}
#features .section-cite a {
  color: rgba(255, 255, 255, .85);
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
}
#features .section-cite a:hover { color: var(--brand-blue-bright); }

/* Editorial product story: one introduction and a readable sequence. */
.product-story, .example-story, .company-story {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: var(--site-column-gap);
  align-items: start;
}
.product-story-intro .section-title, .example-story .section-title, .company-story .section-title {
  max-width: none;
  margin-bottom: var(--site-space-3);
}
.product-story-intro .section-sub { max-width: 46ch; margin-bottom: 0; }
.product-story-detail { scroll-margin-top: 100px; }
.product-rows { border-top: 1px solid var(--site-border); }
.product-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--site-space-3);
  padding-block: var(--site-space-4);
  border-bottom: 1px solid var(--site-border);
}
.product-row-number { color: var(--brand-blue-bright); font: 500 var(--site-label-size)/26px 'JetBrains Mono', monospace; }
.product-row h3 { margin: 0 0 var(--site-space-1); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--site-text); }
.product-row p, .example-intro { margin: 0; color: var(--site-muted); font-size: var(--site-body-size); line-height: var(--site-body-leading); }
.product-meta, .example-note { margin: var(--site-space-3) 0 0; color: var(--site-muted); font-size: var(--site-small-size); line-height: var(--site-small-leading); }
.product-meta a, .company-contact { color: var(--site-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--site-caption); }
.product-meta a:hover, .company-contact:hover { color: var(--brand-blue-bright); }
#example, #company { position: relative; }
#example::before, #company::before { content: ''; position: absolute; top: 0; left: 50%; width: calc(100% - 48px); max-width: 1152px; transform: translateX(-50%); border-top: 1px solid var(--site-border); }
.example-intro { margin-bottom: var(--site-space-3); }
.example-route { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--site-space-3); counter-reset: route; }
.example-route li { counter-increment: route; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--site-space-3); align-items: baseline; color: var(--site-text); font-size: var(--site-body-size); line-height: var(--site-body-leading); font-weight: 500; }
.example-route li::before { content: '0' counter(route); color: var(--brand-blue-bright); font: 500 var(--site-label-size)/26px 'JetBrains Mono', monospace; }
.example-note { margin-top: var(--site-space-4); max-width: 60ch; }
.company-story .section-sub { max-width: 48ch; margin-bottom: var(--site-space-4); }
.company-contact { display: inline-flex; align-items: center; gap: var(--site-space-1); min-height: 44px; font-size: var(--site-small-size); line-height: var(--site-small-leading); font-weight: 600; }

@media (max-width: 768px) {
  #features .hiw-step { padding-block: 14px; }
  .product-story, .example-story, .company-story { grid-template-columns: 1fr; gap: var(--site-space-5); }
  .product-row { padding-block: var(--site-space-4); gap: var(--site-space-2); }
  #example::before, #company::before { width: calc(100% - 36px); }
}