.jasper-materials-hub .hero{
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.jasper-materials-hub .hero-inner{
  width: min(var(--page-width), calc(100% - 40px));
  min-height: 574px;
  margin: 0 auto;
  padding: 50px 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
  gap: 56px;
  align-items: center;
}
.jasper-materials-hub .breadcrumb{ margin-bottom: 28px; display: flex; gap: 9px; align-items: center; color: #526473; font-size: 13px; }
.jasper-materials-hub .breadcrumb a{ color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.jasper-materials-hub .hero h1{ max-width: 660px; margin: 0; font-size: 56px; line-height: 1.08; }
.jasper-materials-hub .hero-lead{ max-width: 680px; margin: 24px 0 0; color: #405363; font-size: 17px; line-height: 1.75; }
.jasper-materials-hub .hero-actions{ margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.jasper-materials-hub .hero-inputs{
  max-width: 720px;
  margin: 38px 0 0;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid var(--line);
}
.jasper-materials-hub .hero-inputs div{ min-width: 0; }
.jasper-materials-hub .hero-inputs dt{ color: var(--blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.jasper-materials-hub .hero-inputs dd{ margin: 5px 0 0; color: #304555; font-size: 13px; font-weight: 600; line-height: 1.45; }
.jasper-materials-hub .hero-visual{ position: relative; min-height: 480px; display: grid; place-items: center; }
.jasper-materials-hub .hero-visual::before{
  content: "";
  position: absolute;
  inset: 40px 0 28px;
  border: 1px solid #c8d9df;
  background: #f1f6f7;
}
.jasper-materials-hub .hero-visual::after{
  content: "";
  position: absolute;
  left: 18%;
  right: 14%;
  bottom: 58px;
  height: 36px;
  border-radius: 50%;
  background: rgba(6, 47, 60, .18);
  filter: blur(20px);
}
.jasper-materials-hub .hero-visual img{
  position: relative;
  z-index: 2;
  width: min(96%, 540px);
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(15, 44, 58, .16));
}
.jasper-materials-hub .hero-axis{
  position: absolute;
  z-index: 3;
  top: 54px;
  bottom: 46px;
  left: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.jasper-materials-hub .hero-axis::before{ content: ""; position: absolute; top: 86px; bottom: 86px; left: 8px; width: 2px; background: var(--yellow); }
.jasper-materials-hub .visual-note{
  position: absolute;
  z-index: 4;
  right: 4px;
  padding: 7px 10px;
  border-left: 3px solid var(--yellow);
  color: var(--teal-deep);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 14px rgba(8, 37, 54, .08);
  font-size: 11px;
  font-weight: 700;
}
.jasper-materials-hub .note-film{ top: 90px; }
.jasper-materials-hub .note-circuit{ top: 210px; }
.jasper-materials-hub .note-support{ bottom: 72px; }

.jasper-materials-hub .stack-section{
  padding: 82px 0 90px;
  color: var(--ink);
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.jasper-materials-hub .stack-section h2, .jasper-materials-hub .stack-section h3{ color: var(--ink); }
.jasper-materials-hub .stack-section .section-heading.light .section-number{ color: var(--blue-dark); }
.jasper-materials-hub .stack-section .section-heading.light p:last-child{ color: var(--muted); }
.jasper-materials-hub .stack-detail .detail-label{ color: var(--blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.jasper-materials-hub .stack-detail h3{ margin: 10px 0 14px; font-size: 30px; line-height: 1.25; }
.jasper-materials-hub .stack-detail p{ color: var(--muted); }
.jasper-materials-hub .detail-points{ margin: 24px 0 28px; padding: 0; display: grid; gap: 10px; list-style: none; }
.jasper-materials-hub .detail-points li{ position: relative; padding-left: 20px; color: var(--ink); font-size: 14px; }
.jasper-materials-hub .detail-points li::before{ content: ""; position: absolute; top: 10px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.jasper-materials-hub .stack-detail .light-link{ color: var(--blue-dark); }

.jasper-materials-hub .families-section{ padding: 90px 0 54px; }
.jasper-materials-hub .family-rows{ border-top: 1px solid var(--line); }
.jasper-materials-hub .family-row{
  min-height: 400px;
  padding: 50px 0;
  display: grid;
  grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr);
  gap: 68px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.jasper-materials-hub .family-row:nth-child(even){ grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); }
.jasper-materials-hub .family-row:nth-child(even) .family-media{ order: 2; }
.jasper-materials-hub .family-media{
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dfe8ec;
  border-radius: 6px;
  background: #f3f6f7;
}
.jasper-materials-hub .family-media img{ width: 100%; height: 300px; padding: 24px; object-fit: contain; }
.jasper-materials-hub .family-row[data-family="circuits"] .family-media img{ padding: 0; object-fit: cover; }
.jasper-materials-hub .family-row[data-family="adhesives"] .family-media img{ padding: 8px; object-fit: contain; }
.jasper-materials-hub .family-copy{ max-width: 610px; }
.jasper-materials-hub .family-kicker{ margin: 0 0 8px; color: var(--blue-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.jasper-materials-hub .family-copy h3{ margin: 0; font-size: 30px; line-height: 1.25; }
.jasper-materials-hub .family-summary{ margin: 16px 0 0; color: var(--muted); }
.jasper-materials-hub .family-facts{ margin: 22px 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jasper-materials-hub .family-facts div{ padding-top: 12px; border-top: 1px solid var(--line); }
.jasper-materials-hub .family-facts strong{ display: block; color: var(--ink); font-size: 12px; }
.jasper-materials-hub .family-facts span{ color: var(--muted); font-size: 13px; }

.jasper-materials-hub .matrix-section, .jasper-materials-hub .product-materials-section{ padding: 84px 0 90px; }
.jasper-materials-hub .selection-table th:first-child{ width: 21%; }
.jasper-materials-hub .selection-table th:nth-child(2){ width: 28%; }
.jasper-materials-hub .selection-table th:last-child{ width: 23%; }
.jasper-materials-hub .product-table th:first-child{ width: 21%; }
.jasper-materials-hub .product-table td:not(:first-child){ text-align: center; }
.jasper-materials-hub .matrix-mark{ color: var(--green); font-size: 18px; font-weight: 800; }
.jasper-materials-hub .matrix-conditional{ color: var(--yellow); font-weight: 800; }

.jasper-materials-hub .review-section{ padding: 84px 0 92px; }
.jasper-materials-hub .review-steps{
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  counter-reset: review-step;
}
.jasper-materials-hub .review-steps li{
  position: relative;
  min-height: 218px;
  padding: 24px 28px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
  counter-increment: review-step;
}
.jasper-materials-hub .review-steps li:not(:last-child)::after{ content: ""; position: absolute; top: -4px; right: 22px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.jasper-materials-hub .review-steps li::before{ content: "0" counter(review-step); display: block; margin-bottom: 38px; color: var(--yellow); font-size: 12px; font-weight: 800; }
.jasper-materials-hub .review-steps h3{ margin: 0 0 12px; font-size: 19px; }
.jasper-materials-hub .review-steps p{ margin: 0; color: #c7d5db; font-size: 14px; }

.jasper-materials-hub .documentation-section{ padding: 90px 0; }
.jasper-materials-hub .documentation-layout{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); gap: 70px; align-items: start; }
.jasper-materials-hub .document-list{ margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.jasper-materials-hub .document-list li{ padding: 17px 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); }
.jasper-materials-hub .document-list .doc-index{ color: var(--blue-dark); font-size: 11px; font-weight: 800; }
.jasper-materials-hub .document-list strong{ font-size: 15px; }
.jasper-materials-hub .document-list span:last-child{ color: var(--muted); font-size: 12px; }

.jasper-materials-hub .guides-section{ padding: 84px 0 94px; }
.jasper-materials-hub .guide-list{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 46px; border-top: 1px solid var(--line); }
.jasper-materials-hub .guide-link{ min-height: 94px; padding: 20px 4px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.jasper-materials-hub .guide-link:hover strong{ color: var(--blue-dark); }
.jasper-materials-hub .guide-index{ color: var(--blue-dark); font-size: 11px; font-weight: 800; }
.jasper-materials-hub .guide-link strong{ display: block; font-size: 15px; transition: color .18s ease; }
.jasper-materials-hub .guide-link small{ display: block; margin-top: 4px; color: var(--muted); }
.jasper-materials-hub .guide-arrow{ color: var(--blue); font-size: 21px; }

.jasper-materials-hub .final-cta{ padding: 66px 0; color: #fff; background: var(--teal); }
.jasper-materials-hub .final-cta-inner{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: center; }
.jasper-materials-hub .final-cta h2{ max-width: 780px; margin: 0; font-size: 38px; line-height: 1.2; }
.jasper-materials-hub .final-cta h2{ color: #fff; }
.jasper-materials-hub .final-cta p{ max-width: 830px; margin: 16px 0 0; color: #d4e2e5; }