/* =============================================================
   NLIGN — Product Hero Section
   Extends shared tokens from tokens.css.
   No duplication of typography or colour values — all via vars.
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────── */
.nlign-product-hero {
  position:         relative;
  background-color: var(--nlign-color-onyx);
  overflow:         hidden;
  isolation:        isolate;
}

/* ── Inner container: side-by-side layout ────────────────────── */
.nlign-product-hero__container {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  max-width:       var(--nlign-max-width);
  margin-inline:   auto;
  padding-top:     65px;
  padding-bottom:  var(--nlign-section-padding-y);
  padding-left:    var(--nlign-section-padding-x);
  /* padding-right:   var(--nlign-section-padding-x); */
  gap:             0px;
  justify-content:space-between;
}

/* ── Left: text content ──────────────────────────────────────── */
.nlign-product-hero__content {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            32px;
  flex-shrink:    0;
  max-width:      580px;
}

/* ── Heading — reuses H1 tokens ──────────────────────────────── */
.nlign-product-hero__heading {
  font-family:    var(--nlign-h1-font-family);
  font-weight:    var(--nlign-h1-font-weight);
  font-size:      var(--nlign-h1-font-size);
  line-height:    var(--nlign-h1-line-height);
  letter-spacing: var(--nlign-h1-letter-spacing);
  margin:         0;
}

.nlign-product-hero__heading--accent { color: var(--nlign-color-orange); }
.nlign-product-hero__heading--base   { color: var(--nlign-color-dust-grey); }

/* ── Subhead — reuses subhead tokens ────────────────────────── */
.nlign-product-hero__subhead {
  font-family:    var(--nlign-subhead-font-family);
  font-weight:    var(--nlign-subhead-font-weight);
  font-size:      var(--nlign-subhead-font-size);
  line-height:    var(--nlign-subhead-line-height);
  letter-spacing: var(--nlign-subhead-letter-spacing);
  text-transform: uppercase;
  color:          var(--nlign-color-orange);
  margin:         0;
  max-width:      519px;
}



.nlign-product-hero__mockup {
  width:      100%;
  height:     auto;
  max-width:  670px;
  object-fit: contain;
  display:    block;
}

/* ── Responsive: large tablet ────────────────────────────────── */
@media (max-width: 1199.98px) {
  .nlign-product-hero__heading {
    font-size:   72px;
    line-height: 76px;
  }

  .nlign-product-hero__container {
    padding-left:  60px;
    padding-right: 60px;
    gap:           48px;
  }
}

/* ── Responsive: tablet ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .nlign-product-hero__container {
    flex-direction: column;
    align-items:    flex-start;
    gap:            48px;
  }

  .nlign-product-hero__content { max-width: 100%; }

  .nlign-product-hero__mockup { max-width: 100%; }
}

/* ── Responsive: mobile ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nlign-product-hero__heading {
    font-size:   48px;
    line-height: 52px;
  }

  .nlign-product-hero__subhead {
    font-size: 16px;
    max-width: 100%;
  }

  .nlign-product-hero__container {
    padding-left:   24px;
    padding-right:  24px;
    padding-top:    64px;
    padding-bottom: 64px;
    gap:            40px;
  }
}


/* =============================================================
   PRODUCT INTRO SECTION  ("The Product" + description)
   bg: onyx-800  |  two-column: label left, body right
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────── */
.nlign-product-intro {
  background-color: var(--nlign-color-onyx-800);
  padding-top:      var(--nlign-section-padding-y);
  padding-bottom:   var(--nlign-section-padding-y);
}

/* ── Inner container ─────────────────────────────────────────── */
.nlign-product-intro__container {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-items:     center;
  gap:             164px;
  max-width:       var(--nlign-max-width);
  margin-inline:   auto;
  padding-left:    var(--nlign-section-padding-x);
  padding-right:   var(--nlign-section-padding-x);
}

/* ── Label — reuses subhead tokens (same as other section labels) */
.nlign-product-intro__label {
  font-family:    var(--nlign-subhead-font-family);
  font-weight:    var(--nlign-subhead-font-weight);
  font-size:      var(--nlign-subhead-font-size);
  line-height:    var(--nlign-subhead-line-height);
  letter-spacing: var(--nlign-subhead-letter-spacing);
  text-transform: uppercase;
  color:          var(--nlign-color-orange);
  flex-shrink:    0;
  margin:         0;
  width:          346px;
}

/* ── Body — H4 token (InterFace 32/36) ───────────────────────── */
.nlign-product-intro__body {
  font-family:    var(--nlign-h1-font-family);
  font-weight:    var(--nlign-h4-font-weight);
  font-size:      var(--nlign-h4-font-size);
  line-height:    var(--nlign-h4-line-height);
  letter-spacing: var(--nlign-h4-letter-spacing);
  color:          var(--nlign-color-dust-grey);
  max-width:      687px;
  margin:         0;
}

/* ── Responsive: large tablet ────────────────────────────────── */
@media (max-width: 1199.98px) {
  .nlign-product-intro__container {
    gap:           80px;
    padding-left:  60px;
    padding-right: 60px;
  }

  .nlign-product-intro__body {
    font-size:   26px;
    line-height: 32px;
  }
}

/* ── Responsive: tablet ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .nlign-product-intro__container {
    flex-direction: column;
    align-items:    flex-start;
    gap:            32px;
  }

  .nlign-product-intro__label { width: auto; }
  .nlign-product-intro__body  { max-width: 100%; }
}

/* ── Responsive: mobile ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nlign-product-intro__container {
    padding-left:   24px;
    padding-right:  24px;
    padding-top:    0;
    padding-bottom: 0;
    gap:            24px;
  }

  .nlign-product-intro__body {
    font-size:   22px;
    line-height: 30px;
  }
}


/* =============================================================
   PRODUCT FEATURE SECTION  ("Investigate Issues in Context")
   bg: onyx  |  stacked: top-row → screenshot → capabilities
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────── */
.nlign-product-feature {
  background-color: var(--nlign-color-onyx);
  padding-top:      var(--nlign-section-padding-y);
  padding-bottom:   var(--nlign-section-padding-y);
}

/* ── Inner container ─────────────────────────────────────────── */
.nlign-product-feature__container {
  display:        flex;
  flex-direction: column;
  max-width:      var(--nlign-max-width);
  margin-inline:  auto;
  padding-left:   var(--nlign-section-padding-x);
  padding-right:  var(--nlign-section-padding-x);
}

/* ── Top row: text-group left, body right ────────────────────── */
.nlign-product-feature__top {
  display:         flex;
  flex-direction:  row;
  align-items:     flex-end;
  gap:             69px;
}

/* ── Text group: label + heading stacked ─────────────────────── */
.nlign-product-feature__text-group {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  flex-shrink:    0;
  max-width:      753px;
}

/* ── Label — reuses subhead tokens ──────────────────────────── */
.nlign-product-feature__label,
.nlign-product-feature__cap-label {
  font-family:    var(--nlign-subhead-font-family);
  font-weight:    var(--nlign-subhead-font-weight);
  font-size:      var(--nlign-subhead-font-size);
  line-height:    var(--nlign-subhead-line-height);
  letter-spacing: var(--nlign-subhead-letter-spacing);
  text-transform: uppercase;
  color:          var(--nlign-color-orange);
  margin:         0;
}

/* ── H2 heading — reuses H2 tokens ──────────────────────────── */
.nlign-product-feature__heading {
  font-family:    var(--nlign-h2-font-family);
  font-weight:    var(--nlign-h2-font-weight);
  font-size:      var(--nlign-h2-font-size);
  line-height:    var(--nlign-h2-line-height);
  letter-spacing: var(--nlign-h2-letter-spacing);
  color:          var(--nlign-color-dust-grey);
  margin:         0;
}

.nlign-product-feature__heading--accent { color: var(--nlign-color-orange); }

/* ── Body copy — reuses body tokens ─────────────────────────── */
.nlign-product-feature__body {
  font-family: var(--nlign-body-font-family);
  font-weight: var(--nlign-body-font-weight);
  font-size:   var(--nlign-body-font-size);
  line-height: var(--nlign-body-line-height);
  color:       var(--nlign-color-dust-grey);
  max-width:   459px;
  margin:      0;
  padding-top: 7px;
}

.nlign-product-feature__body-intro {
  margin: 0;
}

.nlign-product-feature__body-list {
  margin:           0;
  padding-left:     1.35em;
  list-style-type:  disc;
  list-style-position: outside;
}

.nlign-product-feature__body-list li {
  margin:  0;
  padding: 0;
}

.nlign-product-feature__body-list li::marker {
  color: var(--nlign-color-dust-grey);
}

/* ── Screenshot ──────────────────────────────────────────────── */
.nlign-product-feature__screenshot {
  width: 100%;
  margin-top: 35px;
}

.nlign-product-feature__screenshot-img {
  width:      100%;
  height:     auto;
  display:    block;
  object-fit: cover;
}

/* ── Capabilities row ────────────────────────────────────────── */
.nlign-product-feature__capabilities {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: space-between;
    margin-top: 35px;
}

.nlign-product-feature__cap-list {
  display:    flex;
  align-items: center;
  gap:         64px;
  list-style:  none;
  margin:      0;
  padding:     0;
}

/* ── Capability items — Inter Bold 18/22 ─────────────────────── */
.nlign-product-feature__cap-item {
  font-family:  var(--nlign-body-font-family);
  font-weight:  700;
  font-size:    var(--nlign-body-font-size);
  line-height:  22px;
  text-align:   center;
  color:        var(--nlign-color-dust-grey);
  /* max-width:    276px; */
}

/* ── Responsive: large tablet ────────────────────────────────── */
@media (max-width: 1199.98px) {
  .nlign-product-feature__container {
    padding-left:  60px;
    padding-right: 60px;
  }

  .nlign-product-feature__heading {
    font-size:   48px;
    line-height: 52px;
  }

  .nlign-product-feature__capabilities { gap: 60px; }
  .nlign-product-feature__cap-list     { gap: 10px; }
  .nlign-product-feature__top{
    flex-direction: column;
  }
  .nlign-product-feature__text-group,.nlign-product-feature__body
  {
    width: 100%;
    max-width: 100%;
  }
  .nlign-product-feature__top{
    gap: 20px;
  }
}

/* ── Responsive: tablet ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .nlign-product-feature__top {
    flex-direction: column;
    gap:            32px;
  }

  .nlign-product-feature__text-group { max-width: 100%; }
  .nlign-product-feature__body       { max-width: 100%; align-self: flex-start; }

  .nlign-product-feature__capabilities {
    flex-direction: column;
    align-items:    flex-start;
    gap:            24px;
  }

  .nlign-product-feature__cap-list {
    flex-wrap: wrap;
    gap:       24px;
  }

}

/* ── Responsive: mobile ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nlign-product-feature__container {
    padding-left:  24px;
    padding-right: 24px;
    gap:           24px;
  }

  .nlign-product-feature__heading {
    font-size:   38px;
    line-height: 44px;
  }

  .nlign-product-feature__cap-item { text-align: left; }
}


/* =============================================================
   PRODUCT FEATURE — ALT VARIANT  (onyx-800 background)
   Used by: feature-operational.php
   All layout/typography reuses .nlign-product-feature__* above.
   ============================================================= */

.nlign-product-feature--alt {
  background-color: var(--nlign-color-onyx-800);
}

/* ── Closing quote — H4 token, right-aligned ─────────────────── */
.nlign-product-feature__quote {
  font-family: var(--nlign-h1-font-family);
  font-weight: var(--nlign-h4-font-weight);
  font-size:   var(--nlign-h4-font-size);
  line-height: var(--nlign-h4-line-height);
  color:       var(--nlign-color-dust-grey);
  text-align:  right;
  width:       100%;
  margin:      0;
  margin-top: 42px;
}

/* ── Responsive: mobile ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nlign-product-feature__quote {
    font-size:  22px;
    line-height: 30px;
    text-align: left;
  }
}


/* =============================================================
   PRODUCT FEATURE — TRENDS VARIANT
   Unique layout: body is offset right beside heading, 3-col image
   grid, bottom row splits H4-intro left + cap-list right.
   All shared typography/colour via existing tokens + base classes.
   ============================================================= */

/* ── Top row: heading fills left, body sits bottom-right ─────── */
.nlign-product-feature__top--trends {
  position: relative;
  align-items: flex-start;
  gap:         0;            /* body is positioned, not flow-gap */
  min-height:  235px;        /* tall enough for heading + offset body */
}

.nlign-product-feature__top--trends .nlign-product-feature__text-group {
  max-width: 892px;          /* wider heading — overrides 678px default */
}

/* Body sits to the bottom-right of the heading block */
.nlign-product-feature__body--offset {
  position:   absolute;
  right:      0;
  bottom:     0;
  max-width:  592px;
  align-self: unset;         /* override flex-end from base rule */
}

/* ── 3-column image grid ─────────────────────────────────────── */
.nlign-product-feature__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   22px;
  width:                 100%;
  margin-top: 32px;
}

.nlign-product-feature__grid-img {
  width:      100%;
  height:     235px;
  object-fit: cover;
  display:    block;
}

/* ── Bottom row: intro left, cap-list right ──────────────────── */
.nlign-product-feature__capabilities--split {
  justify-content: space-between;
  align-items:     flex-end;
  gap:             32px;
  margin-top:62px;
}

/* H4 intro label — orange, left-aligned ─────────────────────── */
.nlign-product-feature__cap-intro {
  font-family: var(--nlign-h1-font-family);
  font-weight: var(--nlign-h4-font-weight);
  font-size:   var(--nlign-h4-font-size);
  line-height: var(--nlign-h4-line-height);
  color:       var(--nlign-color-orange);
  max-width:   383px;
  margin:      0;
  flex-shrink: 0;
}

.nlign-product-intro__body ul,
.nlign-product-intro__body ol {
  margin:              0;
  padding-left:        1.35em;
  list-style-position: outside;
}

.nlign-product-intro__body ul {
  list-style-type: disc;
}

.nlign-product-intro__body ol {
  list-style-type: decimal;
}

.nlign-product-intro__body li::marker {
  color: var(--nlign-color-dust-grey);
}

/* ── Responsive: large tablet ────────────────────────────────── */
@media (max-width: 1199.98px) {
  .nlign-product-feature__top--trends { min-height: unset; }

  .nlign-product-feature__body--offset {
    position:  static;
    max-width: 100%;
  }

  .nlign-product-feature__top--trends {
    flex-direction: column;
    gap:            32px;
  }

  .nlign-product-feature__top--trends .nlign-product-feature__text-group {
    max-width: 100%;
  }
}

/* ── Responsive: tablet ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .nlign-product-feature__grid {
    grid-template-columns: 1fr;
    gap:                   50px;
  }

  .nlign-product-feature__grid-img { height: auto; }

  .nlign-product-feature__capabilities--split {
    flex-direction: column;
    align-items:    flex-start;
    gap:            24px;
  }

  .nlign-product-feature__cap-intro { max-width: 100%; }
}

/* ── Responsive: mobile ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nlign-product-feature__cap-intro {
    font-size:   22px;
    line-height: 30px;
  }
}


/* =============================================================
   Product CTA Banner overrides
   Reuses nlign-cta-banner from sections.css — just removes
   the uppercase transform so the description reads naturally.
   ============================================================= */
/* ── Product listing page: NLign Desktop / NLign NCheck headings ─ */
.nlign-page-content h2.elementor-heading-title {
  color: var(--nlign-color-orange);
}

.nlign-cta-banner--product .nlign-cta-banner__subhead {
  text-transform: none;
  font-family:    var(--nlign-body-font-family);
  font-weight:    var(--nlign-body-font-weight);
  font-size:      20px;
  line-height:    30px;
  letter-spacing: normal;
  color:          var(--nlign-color-orange);
}