.product-landing {
  --product-ink: #15231d;
  --product-green: #006b38;
  --product-deep: #003d24;
  --product-lime: #79c93d;
  --product-paper: #f5f2eb;
  color: var(--product-ink);
  background: #fff;
  overflow: hidden;
}

.product-landing * { box-sizing: border-box; }
.product-landing img { display: block; max-width: 100%; }
.product-landing .simple-header { position: relative; }
.product-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.product-hero {
  min-height: 720px;
  color: #fff;
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
}
.product-hero > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: -3; }
.product-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(1,17,11,.92) 0%, rgba(1,25,15,.80) 36%, rgba(1,25,15,.22) 64%, rgba(1,17,11,.08) 100%); }
.product-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,27,16,.4), transparent 45%); }
.product-hero-copy { width: min(700px, 58vw); padding: 92px 0; }
.product-kicker { margin: 0 0 25px; color: var(--product-lime); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 750; }
.product-hero h1 { max-width: 760px; margin: 0; font-family: "Clash Display", Archivo, Arial, sans-serif;  font-weight: 480;   }
.product-hero h1 em { color: var(--product-lime); font-style: normal; font-weight: 400; }
.product-hero-copy > p:not(.product-kicker) { max-width: 610px; margin: 30px 0 0; color: rgba(255,255,255,.84); font-size: 17px; line-height: 1.65; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.product-button { min-height: 52px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.42); color: #fff; font-size: 12px; font-weight: 750; transition: .25s ease; }
.product-button.primary { border-color: var(--product-lime); color: #07321c; background: var(--product-lime); }
.product-button.dark { border-color: var(--product-deep); color: #fff; background: var(--product-deep); }
.product-button.outline-dark { border-color: rgba(0,61,36,.35); color: var(--product-deep); background: transparent; }
.product-button:hover { transform: translateY(-2px); }
.product-hero-note { position: absolute; right: 28px; bottom: 24px; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }

.product-breadcrumbs { min-height: 62px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #6f7772; border-bottom: 1px solid #e3e7e3; font-size: 11px; }
.product-breadcrumbs strong { color: var(--product-green); }

.product-intro { padding: 110px 0; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(50px, 8vw, 110px); align-items: center; }
.product-section-kicker { margin: 0 0 18px; color: var(--product-green); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 750; }
.product-intro h2, .product-section-head h2, .product-process h2, .product-faq h2, .product-cta h2 { margin: 0; font-family: "Clash Display", Archivo, Arial, sans-serif;  font-weight: 480;   }
.product-intro h2 em, .product-section-head h2 em, .product-process h2 em, .product-faq h2 em { color: var(--product-green); font-style: normal; font-weight: 400; }
.product-intro-copy > p:not(.product-section-kicker) { color: #5d6862; font-size: 16px; line-height: 1.72; }
.product-intro-list { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid #d9dfda; }
.product-intro-list li { min-height: 56px; padding: 13px 0; display: grid; grid-template-columns: 34px 1fr; align-items: center; border-bottom: 1px solid #d9dfda; font-size: 13px; font-weight: 650; }
.product-intro-list span { color: var(--product-lime); font-size: 10px; }
.product-intro figure { margin: 0; position: relative; }
.product-intro figure img { width: 100%; min-height: 520px; object-fit: cover; }
.product-intro figcaption { max-width: 340px; padding: 18px 22px; position: absolute; right: -1px; bottom: -1px; color: #fff; background: var(--product-green); }
.product-intro figcaption span, .product-intro figcaption strong { display: block; }
.product-intro figcaption span { margin-bottom: 6px; color: var(--product-lime); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.product-intro figcaption strong { font-size: 13px; line-height: 1.45; }

.product-applications { padding: 100px 0 110px; background: var(--product-paper); }
.product-section-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .65fr); gap: 60px; align-items: end; }
.product-section-head > p { margin: 0; color: #667068; font-size: 15px; line-height: 1.7; }
.product-grid { margin-top: 55px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #cfd8d1; }
.product-grid article, .product-grid a { min-height: 275px; padding: 28px; display: flex; flex-direction: column; color: var(--product-ink); background: #fff; }
.product-grid span { color: var(--product-lime); font-size: 10px; font-weight: 750; }
.product-grid h3 { margin: auto 0 15px; font-family: "Clash Display", Archivo, sans-serif;  font-weight: 500;  }
.product-grid p { margin: 0; color: #69736d; font-size: 13px; line-height: 1.65; }
.product-grid a { position: relative; transition: color .25s, background .25s; }
.product-grid a::after { content: "↗"; position: absolute; top: 25px; right: 26px; color: var(--product-green); }
.product-grid a:hover { color: #fff; background: var(--product-green); }
.product-grid a:hover p { color: rgba(255,255,255,.78); }

.product-inline-cta { padding: 38px max(24px, calc((100vw - 1180px)/2)); color: var(--product-deep); background: var(--product-lime); display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.product-inline-cta h2 { margin: 0; font-family: "Clash Display", Archivo, Arial, sans-serif;  font-weight: 500;   }
.product-inline-cta p { max-width: 700px; margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.product-inline-cta-actions, .product-cta-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }

.product-process { padding: 110px 0; color: #fff; background: var(--product-deep); }
.product-process-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.product-process-head > p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.7; }
.product-process-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.24); }
.product-process-grid article { min-height: 230px; padding: 28px 25px; border-right: 1px solid rgba(255,255,255,.18); }
.product-process-grid article:last-child { border-right: 0; }
.product-process-grid span { color: var(--product-lime); font-size: 10px; }
.product-process-grid h3 { margin: 70px 0 12px; font-family: "Clash Display", Archivo, sans-serif;  font-weight: 500; }
.product-process-grid p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.65; }

.product-faq { padding: 110px 0; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 90px; }
.product-faq-intro > p:last-child { margin-top: 24px; color: #69736d; line-height: 1.7; }
.product-faq-list { border-top: 1px solid #d8ded9; }
.product-faq-list details { border-bottom: 1px solid #d8ded9; }
.product-faq-list summary { min-height: 72px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; cursor: pointer; color: var(--product-ink); font-size: 15px; font-weight: 700; list-style: none; }
.product-faq-list summary::-webkit-details-marker { display: none; }
.product-faq-list summary span, .product-faq-list summary i { color: var(--product-green); font-size: 10px; font-style: normal; }
.product-faq-list details p { margin: -4px 44px 24px; color: #657069; font-size: 14px; line-height: 1.7; }

.product-cta { padding: 72px max(24px, calc((100vw - 1180px)/2)); color: #fff; background: var(--product-green); display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.product-cta h2 { max-width: 780px;  }
.product-cta p { max-width: 690px; margin: 18px 0 0; color: rgba(255,255,255,.78); line-height: 1.65; }
.product-cta .product-button { flex: 0 0 auto; }

.product-landing footer { background: #f5f2eb; }

@media (max-width: 900px) {
  .product-hero { min-height: 670px; }
  .product-hero-copy { width: min(700px, 82vw); }
  .product-intro { grid-template-columns: 1fr; }
  .product-intro figure { order: -1; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-process-head, .product-faq { grid-template-columns: 1fr; gap: 42px; }
  .product-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-process-grid article:nth-child(2) { border-right: 0; }
  .product-cta { align-items: flex-start; flex-direction: column; }
  .product-inline-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
  .product-shell { width: min(100% - 32px, 1180px); }
  .product-hero { min-height: 680px; align-items: end; }
  .product-hero > img { object-position: 67% center; }
  .product-hero::before { background: linear-gradient(90deg, rgba(1,20,12,.93), rgba(1,25,15,.61)), linear-gradient(0deg, rgba(1,20,12,.8), transparent); }
  .product-hero-copy { width: 100%; padding: 80px 0 58px; }
  .product-hero h1 { max-width: 100%;  overflow-wrap: normal; }
  .product-hero-copy > p:not(.product-kicker) { margin-top: 24px; font-size: 15px; }
  .product-actions { display: grid; }
  .product-button { width: 100%; }
  .product-hero-note { display: none; }
  .product-breadcrumbs { font-size: 10px; }
  .product-intro, .product-applications, .product-process, .product-faq { padding-block: 72px; }
  .product-intro { gap: 38px; }
  .product-intro figure img { min-height: 360px; }
  .product-intro figcaption { max-width: calc(100% - 24px); }
  .product-section-head { grid-template-columns: 1fr; gap: 24px; }
  .product-grid, .product-process-grid { grid-template-columns: 1fr; }
  .product-grid article, .product-grid a { min-height: 235px; }
  .product-process-grid article { min-height: 205px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .product-process-grid h3 { margin-top: 50px; }
  .product-cta { padding-block: 58px; }
  .product-inline-cta { padding-block: 42px; }
  .product-inline-cta-actions, .product-cta-actions { width: 100%; display: grid; }
}