/* -- Homepage section 3: category and audience -- */

.elementor.elementor-8 .ng-cat {
  --c:var(--elec);
  --cat-c-dim:rgba(74,141,230,.13);
  --cat-c-line:rgba(74,141,230,.32);
  --cat-pad-block:120px;
  --cat-gutter:48px;

  display:flex;
  flex-direction:column;
  background:var(--midnight);
  padding-block:var(--cat-pad-block);
  padding-inline:0;
}

.elementor.elementor-8 .ng-cat-wrap {
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--cat-gutter);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* eyebrow pill */
.elementor.elementor-8 .ng-cat-eyebrow {
  display:inline-block;
  align-self:flex-start;
  margin:0 0 24px;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--c);
  background:var(--cat-c-dim);
  border:1px solid var(--cat-c-line);
  border-radius:8px;
  padding:9px 16px;
}

/* headline */
.elementor.elementor-8 .ng-cat-h2 {
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(32px,3.6vw,48px);
  line-height:1.13;
  letter-spacing:-.015em;
  color:var(--text);
  margin:0 0 24px;
  max-width:17ch;
}
.elementor.elementor-8 .ng-cat-h2 .hl{color:var(--c);}

/* lede */
.elementor.elementor-8 .ng-cat-lede {
  margin:0;
  max-width:66ch;
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.65;
  color:var(--text);
}

/* scope band */
.elementor.elementor-8 .ng-scope {
  margin-top:56px;
  border-block:1px solid var(--border);
}
.elementor.elementor-8 .ng-scope-lbl {
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--secondary);
  padding-top:20px;
}
.elementor.elementor-8 .ng-scope-row{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  margin:0;
  padding:12px 0 22px;
  list-style:none;
}
.elementor.elementor-8 .ng-scope-row li{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  position:relative;
  padding:8px 20px 8px 18px;
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--text);
}
.elementor.elementor-8 .ng-scope-row li + li{
  padding-left:34px;
  border-left:1px solid var(--bsoft);
}
.elementor.elementor-8 .ng-scope-row li::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  width:8px;
  height:8px;
  background:var(--c);
  border-radius:1px;
}
.elementor.elementor-8 .ng-scope-row li + li::before{left:16px;}

/* audience cards */
.elementor.elementor-8 .ng-aud {
  width:100%;
  margin-top:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.elementor.elementor-8 .ng-aud-card {
  background:var(--deep);
  border:1px solid var(--border);
  border-radius:14px;
  padding:34px;
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.elementor.elementor-8 .ng-aud-card:hover {
  border-color:var(--cat-c-line);
  background:var(--surface);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(74,141,230,.13);
}
.elementor.elementor-8 .ng-aud-icon {
  color:var(--c);
  width:44px;
  height:44px;
  margin-bottom:22px;
  flex:none;
}
.elementor.elementor-8 .ng-aud-stage {
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c);
  margin-bottom:13px;
}
.elementor.elementor-8 .ng-aud-role {
  font-family:var(--font-heading);
  font-weight:700;
  font-size:24px;
  line-height:1.26;
  letter-spacing:-.01em;
  color:var(--text);
  margin:0 0 14px;
}
.elementor.elementor-8 .ng-aud-acct {
  margin:0 0 18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
  font-family:var(--font-body);
  font-size:17.5px;
  line-height:1.58;
  color:var(--secondary);
}
.elementor.elementor-8 .ng-aud-body {
  margin:0;
  font-family:var(--font-body);
  font-size:17.5px;
  line-height:1.62;
  color:var(--secondary);
}

/* qualifier */
.elementor.elementor-8 .ng-cat-qual {
  margin:48px 0 0;
  max-width:74ch;
  padding-left:22px;
  border-left:3px solid var(--c);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.62;
  color:var(--text);
}
.elementor.elementor-8 .ng-cat-qual strong{font-weight:600;}

.elementor.elementor-8 .ng-cat a:focus-visible,
.elementor.elementor-8 .ng-aud-card:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .elementor.elementor-8 .ng-aud-card{transition:none;}
}

/* 1024px: desktop gutter (48px) leaves 928px; scope items need 977px (their natural
   offsetWidth total) to avoid sub-pixel flex compression that overflows text. 20px gutter
   gives 984px — 8px clear. Width jump at 1023↔1025 is one pixel outside the breakpoint. */
@media (max-width:1024px){
  .elementor.elementor-8 .ng-cat{--cat-gutter:20px;}
}

/* tablet, 768 to 1023 */
@media (max-width:1023px){
  .elementor.elementor-8 .ng-cat{--cat-pad-block:96px;--cat-gutter:32px;}
  .elementor.elementor-8 .ng-cat-h2{max-width:20ch;}
  .elementor.elementor-8 .ng-aud{grid-template-columns:1fr;gap:20px;}
  .elementor.elementor-8 .ng-scope-row{flex-wrap:wrap;}
  .elementor.elementor-8 .ng-scope-row li{flex:0 1 46%;white-space:normal;}
  .elementor.elementor-8 .ng-scope-row li:nth-child(3){border-left:0;padding-left:18px;}
  .elementor.elementor-8 .ng-scope-row li:nth-child(3)::before{left:0;}
}

/* mobile, under 768 */
@media (max-width:767px){
  .elementor.elementor-8 .ng-cat{--cat-pad-block:80px;--cat-gutter:20px;}
  .elementor.elementor-8 .ng-cat-lede{font-size:17.5px;}
  .elementor.elementor-8 .ng-cat-eyebrow,
  .elementor.elementor-8 .ng-scope-lbl,
  .elementor.elementor-8 .ng-aud-stage{font-size:14px;}
  .elementor.elementor-8 .ng-scope-row{display:block;padding-bottom:16px;}
  .elementor.elementor-8 .ng-scope-row li,
  .elementor.elementor-8 .ng-scope-row li + li{
    border-left:0;
    padding:9px 0 9px 18px;
    min-width:0;
    font-size:15px;
  }
  .elementor.elementor-8 .ng-scope-row li::before,
  .elementor.elementor-8 .ng-scope-row li + li::before{left:0;top:17px;}
  .elementor.elementor-8 .ng-aud-card{padding:28px 24px;}
  .elementor.elementor-8 .ng-aud-role{font-size:22px;}
  .elementor.elementor-8 .ng-aud-acct,
  .elementor.elementor-8 .ng-aud-body{font-size:17px;}
}