/* Approved Connected Offering. Host section owns outer padding and content width.
   Typography for the eyebrow and section heading follows the homepage rules. */

#connected-offering.qco{
  color:#f4f6fa;
  font-family:var(--sans);
  --qco-blue:#58bafa;
  --qco-muted:#bac9d9;
}

#connected-offering .qco-eyebrow{
  margin:0 0 24px;
  color:var(--cyan);
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:3px;
  text-transform:uppercase;
}

#connected-offering .qco-title{
  margin:0;
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(32px,4.5vw,50px);
  font-weight:650;
  line-height:1.12;
  letter-spacing:-1.7px;
}

#connected-offering .qco-framing{
  max-width:760px;
  margin:20px 0 0;
  color:var(--qco-muted);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
}

#connected-offering .qco-stage{
  width:100%;
}

#connected-offering .qco-roles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4.4444%;
  margin-top:64px;
  padding:0 1.8056%;
}

#connected-offering .qco-role h3{
  margin:0 0 16px;
  color:#f4f6fa;
  font-family:var(--sans);
  font-size:25px;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.25;
}

#connected-offering .qco-role p{
  margin:0;
  color:var(--qco-muted);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
}

#connected-offering .qco-art{
  display:block;
  width:100%;
  height:auto;
  margin-top:44px;
  overflow:hidden;
}

#connected-offering .qco-art image,
#connected-offering .qco-mobile-art image{
  max-width:none;
}

#connected-offering .qco-support{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4.4444%;
  margin-top:64px;
  padding:0 1.8056%;
}

#connected-offering .qco-support p{
  margin:0;
  color:var(--qco-muted);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
}

#connected-offering .qco-models{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
  margin-top:16px;
}

#connected-offering .qco-models span{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:15px;
  color:#f4f6fa;
}

#connected-offering .qco-models img{
  width:27px;
  height:27px;
  object-fit:contain;
}

#connected-offering .qco-mono{
  filter:brightness(0) invert(1);
}

#connected-offering .qco-external{
  border-left:1px solid #344252;
  padding-left:7.2508%;
}

#connected-offering .qco-support .qco-caption{
  font-size:11px;
  color:#8191a4;
  margin-top:20px;
}

#connected-offering .qco-mobile-art,
#connected-offering .qco-mobile-foundation{
  display:none;
}

@media (min-width:901px){
  #connected-offering .qco-stage{
    width:75%;
    margin-inline:auto;
  }
}

@media (max-width:900px) and (min-width:701px){
  #connected-offering .qco-roles{
    gap:28px;
    padding:0 16px;
  }

  #connected-offering .qco-role h3{
    font-size:22px;
  }

  #connected-offering .qco-role p{
    font-size:14px;
  }

  #connected-offering .qco-support{
    gap:32px;
    padding:0 16px;
  }

  #connected-offering .qco-external{
    padding-left:28px;
  }
}

@media (max-width:700px){
  #connected-offering .qco-roles{
    grid-template-columns:1fr;
    gap:44px;
    margin-top:44px;
    padding:0;
  }

  #connected-offering .qco-role h3{
    font-size:24px;
  }

  #connected-offering .qco-role p{
    font-size:16px;
  }

  #connected-offering .qco-art{
    display:none;
  }

  #connected-offering .qco-mobile-art{
    display:block;
    width:100%;
    height:auto;
    margin-top:28px;
    overflow:hidden;
  }

  #connected-offering .qco-mobile-foundation{
    display:flex;
    gap:16px;
    align-items:center;
    margin-top:32px;
    padding:24px 20px;
    border:1px solid #346795;
    border-top-color:#449fff;
    border-radius:10px;
    background:linear-gradient(110deg,#142333,#0c151f);
  }

  #connected-offering .qco-mobile-foundation img{
    width:36px;
    height:36px;
  }

  #connected-offering .qco-mobile-foundation h3{
    margin:0 0 8px;
    color:#f4f6fa;
    font-family:var(--sans);
    font-size:23px;
    font-weight:600;
  }

  #connected-offering .qco-mobile-foundation p{
    margin:0;
    font-family:var(--sans);
    font-size:14px;
    line-height:1.6;
    color:var(--qco-muted);
  }

  #connected-offering .qco-support{
    grid-template-columns:1fr;
    gap:32px;
    margin-top:40px;
    padding:0;
  }

  #connected-offering .qco-external{
    border-left:0;
    border-top:1px solid #263442;
    padding:28px 0 0;
  }

  #connected-offering .qco-models{
    gap:22px;
  }
}