/* Scoped custom variables on wrapper */
{{WRAPPER}} .ccs-hw-section {
  --ccs-navy: #1a2a4a;
  --ccs-blue: #1E90FF;
  --ccs-blue-dk: #1470D0;
  --ccs-sky: #e0f0ff;
  --ccs-teal: #32CD32;
  --ccs-off: #F2F2F2;
  --ccs-gray: #6b7280;
  --ccs-dark: #333333;
  --ccs-border: #d8e8f5;
  --ccs-ff-head: 'Playfair Display', Georgia, serif;
  --ccs-ff-body: 'DM Sans', system-ui, sans-serif;
  --ccs-r: 12px;
  --ccs-num-size: 64px;
  --ccs-gap: 28px;
}

{{WRAPPER}} .ccs-hw-section *,
{{WRAPPER}} .ccs-hw-section *::before,
{{WRAPPER}} .ccs-hw-section *::after {
  box-sizing: border-box;
}

{{WRAPPER}} .ccs-hw-section {
  background: var(--ccs-off);
  padding: 88px 0;
  font-family: var(--ccs-ff-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ccs-dark);
}

{{WRAPPER}} .ccs-hw-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

{{WRAPPER}} .ccs-hw-hdr {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 52px;
}

{{WRAPPER}} .ccs-hw-eyebrow {
  display: inline-block;
  font-family: var(--ccs-ff-body);
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ccs-blue);
  background: var(--ccs-sky);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}

{{WRAPPER}} .ccs-hw-hdr h2 {
  font-family: var(--ccs-ff-head);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ccs-navy);
  margin: 0 0 14px;
  padding: 0;
  position: relative;
  display: inline-block;
}

{{WRAPPER}} .ccs-hw-hdr h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--ccs-teal);
  border-radius: 2px;
  margin: 10px auto 0;
}

{{WRAPPER}} .ccs-hw-hdr p {
  font-family: var(--ccs-ff-body);
  font-size: 1.05rem;
  color: var(--ccs-gray);
  line-height: 1.78;
  margin: 0;
  padding: 0;
}

{{WRAPPER}} .ccs-hw-circles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: var(--ccs-gap);
  margin-bottom: 0;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  list-style: none !important;
}

{{WRAPPER}} .ccs-hw-num {
  width: var(--ccs-num-size);
  height: var(--ccs-num-size);
  justify-self: center;
  border-radius: 50%;
  background: var(--ccs-blue);
  color: #fff;
  font-family: var(--ccs-ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 18px rgba(30,144,255,.35);
}

{{WRAPPER}} .ccs-hw-connector {
  position: absolute;
  top: 50%;
  left: calc((100% - (var(--ccs-gap) * 2)) / 6);
  right: calc((100% - (var(--ccs-gap) * 2)) / 6);
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    var(--ccs-border),
    var(--ccs-blue) 50%,
    var(--ccs-border)
  );
  z-index: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block;
}

{{WRAPPER}} .ccs-hw-texts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ccs-gap);
  margin-top: 22px;
}

{{WRAPPER}} .ccs-hw-step {
  text-align: center;
  padding: 0 18px;
}

{{WRAPPER}} .ccs-hw-step h3 {
  font-family: var(--ccs-ff-head);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--ccs-navy);
  margin: 0 0 10px;
  padding: 0;
}
{{WRAPPER}} .ccs-hw-step h3::after { display: none !important; }

{{WRAPPER}} .ccs-hw-step p {
  font-family: var(--ccs-ff-body);
  font-size: .9rem;
  color: var(--ccs-gray);
  line-height: 1.78;
  margin: 0;
  padding: 0;
}

{{WRAPPER}} .ccs-hw-step p a {
  color: var(--ccs-blue);
  font-weight: 600;
  text-decoration: none;
}
{{WRAPPER}} .ccs-hw-step p a:hover { text-decoration: underline; }

{{WRAPPER}} .ccs-hw-footer {
  text-align: center;
  margin-top: 44px;
}

{{WRAPPER}} .ccs-hw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  border-radius: var(--ccs-r);
  font-family: var(--ccs-ff-head);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  line-height: 1;
  transition: transform .18s, box-shadow .18s, background .15s;
}
{{WRAPPER}} .ccs-hw-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

{{WRAPPER}} .ccs-hw-btn-primary {
  background: var(--ccs-blue);
  color: #fff;
  box-shadow: 0 4px 20px rgba(30,144,255,.3);
}
{{WRAPPER}} .ccs-hw-btn-primary:hover {
  background: var(--ccs-blue-dk);
  color: #fff;
  box-shadow: 0 6px 28px rgba(30,144,255,.42);
}

@media (max-width: 960px) {
  {{WRAPPER}} .ccs-hw-circles {
    display: none;
  }
  {{WRAPPER}} .ccs-hw-texts {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 0;
  }
  {{WRAPPER}} .ccs-hw-step {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  {{WRAPPER}} .ccs-hw-step-num-mobile {
    display: flex !important;
  }
  {{WRAPPER}} .ccs-hw-section { padding: 72px 0; }
}

@media (max-width: 600px) {
  {{WRAPPER}} .ccs-hw-section { padding: 64px 0; }
  {{WRAPPER}} .ccs-hw-btn {
    width: 100%;
    justify-content: center;
  }
}

{{WRAPPER}} .ccs-hw-step-num-mobile {
  display: none;
  width: var(--ccs-num-size);
  height: var(--ccs-num-size);
  border-radius: 50%;
  background: var(--ccs-blue);
  color: #fff;
  font-family: var(--ccs-ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(30,144,255,.35);
  margin-bottom: 16px;
  flex-shrink: 0;
}