/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 12 2026 | 07:20:40 */
/* ============================================
   /custom-dev/ — BLD Custom Dev landing page
   Scoped to .cd-page (body class also matches slug: page-custom-dev)
   ============================================ */

.cd-page {
  --cd-purple:        #975BE5;
  --cd-purple-dark:   #3A1D6F;
  --cd-purple-mid:    #5E3FA3;
  --cd-purple-hover:  #7F3FD6;
  --cd-lime:          #99D328;
  --cd-lime-hover:    #7fb31e;
  --cd-bg:            #F6F7FB;
  --cd-surface:       #F8F5FF;
  --cd-white:         #ffffff;
  --cd-border:        #D8CFF0;
  --cd-text:          #1A1429;
  --cd-text-2:        #5B5670;
  --cd-text-light:    #8A8699;
  --cd-dark-bg:       #1E1B2E;

  --cd-font-display:  "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cd-font-body:     "Red Hat Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --cd-radius-sm:     8px;
  --cd-radius:        14px;
  --cd-radius-lg:     20px;

  color: var(--cd-text);
  font-family: var(--cd-font-body);
  line-height: 1.6;
}

.cd-page * { box-sizing: border-box; }

.cd-container {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.cd-h2 {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.15;
  color: var(--cd-text);
  margin: 0 0 20px;
}

.cd-lead {
  font-size: 18px;
  color: var(--cd-text-2);
  max-width: 720px;
  margin: 0 0 48px;
}

/* ============================================
   Buttons
   ============================================ */
.cd-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--cd-radius-sm);
  font-family: var(--cd-font-display);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.cd-btn--primary { background: var(--cd-purple); color: var(--cd-white); }
.cd-btn--primary:hover { background: var(--cd-purple-hover); color: var(--cd-white); }

.cd-btn--secondary {
  background: transparent;
  color: var(--cd-white);
  border-color: rgba(255,255,255,0.4);
}
.cd-btn--secondary:hover { background: rgba(255,255,255,0.1); color: var(--cd-white); }

.cd-btn--pkg {
  display: block;
  background: var(--cd-purple);
  color: var(--cd-white);
  margin-top: 24px;
}
.cd-btn--pkg:hover { background: var(--cd-purple-hover); color: var(--cd-white); }

.cd-btn--final {
  background: var(--cd-lime);
  color: var(--cd-purple-dark);
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 600;
}
.cd-btn--final:hover { background: var(--cd-lime-hover); color: var(--cd-purple-dark); }

/* ============================================
   Section 1 — Hero
   ============================================ */
.cd-hero {
  background: linear-gradient(135deg, var(--cd-purple-dark) 0%, var(--cd-purple-mid) 100%);
  color: var(--cd-white);
  padding: 96px 0 88px;
}
.cd-hero__h1 {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.1;
  color: var(--cd-white);
  margin: 0 0 24px;
  max-width: 900px;
}
.cd-hero__sub {
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  max-width: 760px;
  margin: 0 0 40px;
}
.cd-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================
   Section 2 — Trust bar
   ============================================ */
.cd-trust {
  background: var(--cd-surface);
  padding: 20px 0;
  border-bottom: 1px solid var(--cd-border);
}
.cd-trust__line {
  margin: 0;
  font-size: 14px;
  color: var(--cd-text-2);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  align-items: center;
}
.cd-trust__sep { color: var(--cd-border); }

/* ============================================
   Section 3 — Packages
   ============================================ */
.cd-packages {
  background: var(--cd-white);
  padding: 96px 0 80px;
}

.cd-pkg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 48px;
}
.cd-pkg {
  flex: 1 1 calc(33.333% - 16px);
  min-width: 300px;
  background: var(--cd-white);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cd-pkg--popular {
  border-color: var(--cd-purple);
  border-width: 2px;
  box-shadow: 0 8px 32px rgba(151, 91, 229, 0.15);
}
.cd-pkg__badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--cd-lime);
  color: var(--cd-purple-dark);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.cd-pkg__head { margin-bottom: 16px; }
.cd-pkg__name {
  font-family: var(--cd-font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--cd-purple-dark);
  margin: 0 0 6px;
}
.cd-pkg__tag {
  font-size: 15px;
  color: var(--cd-text-2);
  margin: 0;
  line-height: 1.4;
}

.cd-pkg__desc {
  font-size: 15px;
  color: var(--cd-text);
  margin: 0 0 20px;
}

.cd-pkg__section { margin-bottom: 20px; }
.cd-pkg__label {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cd-text-2);
  margin: 0 0 10px;
}
.cd-pkg__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-pkg__list li {
  padding: 6px 0 6px 22px;
  font-size: 14px;
  position: relative;
  color: var(--cd-text);
}
.cd-pkg__list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cd-lime);
}

.cd-pkg__meta {
  padding: 16px;
  background: var(--cd-surface);
  border-radius: var(--cd-radius-sm);
  margin-bottom: 20px;
}
.cd-pkg__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.cd-pkg__meta-label {
  font-size: 13px;
  color: var(--cd-text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--cd-font-display);
  font-weight: 500;
}
.cd-pkg__meta-val {
  font-size: 15px;
  color: var(--cd-text);
  font-weight: 500;
}
.cd-pkg__price {
  font-family: var(--cd-font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--cd-purple);
}
.cd-pkg__meta-note {
  font-size: 12px;
  color: var(--cd-text-light);
  margin: 4px 0 0;
  line-height: 1.4;
}

.cd-pkg__best {
  font-size: 14px;
  color: var(--cd-text-2);
  margin: 0;
  line-height: 1.5;
  flex-grow: 1;
}
.cd-pkg__best strong { color: var(--cd-text); }

.cd-discovery-band {
  background: var(--cd-surface);
  border-left: 4px solid var(--cd-purple);
  padding: 24px 28px;
  border-radius: var(--cd-radius-sm);
  max-width: 900px;
  margin: 0 auto;
}
.cd-discovery-band__lead {
  font-size: 16px;
  color: var(--cd-text);
  margin: 0 0 8px;
  line-height: 1.55;
}
.cd-discovery-band__note {
  font-size: 14px;
  color: var(--cd-text-2);
  margin: 0;
}

/* ============================================
   Section 4 — How this works
   ============================================ */
.cd-how {
  background: var(--cd-bg);
  padding: 88px 0;
}

.cd-steps {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  counter-reset: cd-step;
}
.cd-step {
  flex: 1 1 calc(20% - 16px);
  min-width: 200px;
  background: var(--cd-white);
  border-radius: var(--cd-radius);
  padding: 24px 20px;
  border: 1px solid var(--cd-border);
}
.cd-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cd-purple-dark);
  color: var(--cd-white);
  font-family: var(--cd-font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}
.cd-step__title {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--cd-text);
  margin: 0 0 8px;
}
.cd-step__text {
  font-size: 14px;
  color: var(--cd-text-2);
  margin: 0;
  line-height: 1.55;
}

/* ============================================
   Section 5 — Who this is for
   ============================================ */
.cd-who {
  background: var(--cd-white);
  padding: 88px 0;
}

.cd-who-grid {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.cd-who-col {
  flex: 1 1 calc(50% - 16px);
  min-width: 280px;
  padding: 28px;
  background: var(--cd-surface);
  border-radius: var(--cd-radius);
  border-top: 4px solid;
}
.cd-who-col--yes { border-top-color: var(--cd-lime); }
.cd-who-col--no { border-top-color: var(--cd-border); }
.cd-who-col__label {
  font-family: var(--cd-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--cd-text);
  margin: 0 0 16px;
}
.cd-who-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-who-col__list li {
  padding: 10px 0 10px 22px;
  font-size: 15px;
  position: relative;
  color: var(--cd-text);
  border-bottom: 1px solid var(--cd-border);
  line-height: 1.5;
}
.cd-who-col__list li:last-child { border-bottom: none; }
.cd-who-col--yes .cd-who-col__list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--cd-lime-hover);
  font-weight: 700;
}
.cd-who-col--no .cd-who-col__list li:before {
  content: "–";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--cd-text-light);
  font-weight: 700;
}
.cd-who-col__list li a {
  color: var(--cd-purple);
  text-decoration: none;
}
.cd-who-col__list li a:hover { text-decoration: underline; }

/* ============================================
   Section 6 — Why us
   ============================================ */
.cd-why {
  background: var(--cd-bg);
  padding: 88px 0;
}
.cd-why__body {
  max-width: 800px;
  margin-top: 32px;
}
.cd-why__body p {
  font-size: 17px;
  color: var(--cd-text);
  margin: 0 0 20px;
  line-height: 1.65;
}

/* ============================================
   Section 7 — FAQ
   ============================================ */
.cd-faq {
  background: var(--cd-white);
  padding: 88px 0;
}
.cd-faq-list {
  max-width: 860px;
  margin-top: 40px;
}
.cd-faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--cd-border);
}
.cd-faq-item:last-child { border-bottom: none; }
.cd-faq-q {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--cd-text);
  margin: 0 0 12px;
  line-height: 1.35;
}
.cd-faq-a {
  font-size: 16px;
  color: var(--cd-text-2);
  margin: 0;
  line-height: 1.65;
}

/* ============================================
   Section 8 — Final CTA
   ============================================ */
.cd-final-cta {
  background: var(--cd-purple-dark);
  color: var(--cd-white);
  padding: 80px 0;
  text-align: center;
}
.cd-final-cta__h2 {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 40px;
  color: var(--cd-white);
  margin: 0 0 16px;
  line-height: 1.15;
}
.cd-final-cta__sub {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  margin: 0 auto 32px;
  max-width: 640px;
  line-height: 1.55;
}
.cd-final-cta__foot {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 24px 0 0;
}

/* ============================================
   /custom-dev/apply/ intro block
   ============================================ */
.cd-apply-intro {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 24px 28px;
  background: var(--cd-surface);
  border-left: 4px solid var(--cd-purple);
  border-radius: var(--cd-radius-sm);
}
.cd-apply-intro strong { color: var(--cd-purple-dark); }
.cd-apply-intro p {
  margin: 0;
  font-size: 15px;
  color: var(--cd-text);
  line-height: 1.55;
}
.cd-apply-intro a {
  color: var(--cd-purple);
  text-decoration: none;
  font-weight: 500;
}
.cd-apply-intro a:hover { text-decoration: underline; }

/* ============================================
   Confirmation screens (form 58)
   ============================================ */
.cdapp-confirmation {
  max-width: 640px;
  margin: 40px auto;
  padding: 32px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  color: var(--cd-text);
}
.cdapp-confirmation h2 {
  font-family: var(--cd-font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--cd-purple-dark);
  margin: 0 0 16px;
}
.cdapp-confirmation p {
  font-family: var(--cd-font-body);
  font-size: 16px;
  color: var(--cd-text);
  line-height: 1.65;
  margin: 0 0 14px;
}
.cdapp-confirmation p:last-child { margin-bottom: 0; }

.cdapp-confirmation--build p:nth-of-type(1) strong {
  display: block;
  font-family: var(--cd-font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--cd-purple);
  margin: 12px 0;
  line-height: 1.2;
}

/* ============================================
   Mobile
   ============================================ */
@media (max-width: 900px) {
  .cd-hero { padding: 72px 0 64px; }
  .cd-hero__h1 { font-size: 40px; }
  .cd-hero__sub { font-size: 17px; }
  .cd-h2 { font-size: 32px; }
  .cd-final-cta__h2 { font-size: 32px; }
  .cd-packages, .cd-how, .cd-who, .cd-why, .cd-faq { padding: 64px 0; }
  .cd-pkg { flex: 1 1 100%; }
  .cd-step { flex: 1 1 100%; }
  .cd-who-col { flex: 1 1 100%; }
}

@media (max-width: 600px) {
  .cd-container { padding-left: 20px; padding-right: 20px; }
  .cd-hero__h1 { font-size: 32px; }
  .cd-h2 { font-size: 26px; }
  .cd-final-cta__h2 { font-size: 26px; }
  .cd-btn { padding: 12px 24px; font-size: 15px; }
  .cd-btn--final { padding: 16px 28px; font-size: 16px; }
  .cd-pkg__name { font-size: 24px; }
  .cd-pkg__price { font-size: 22px; }
  .cd-trust__line { font-size: 13px; }
}