/* ==========================================================================
   home-scale.css — one type scale and spacing rhythm for every home page section.
   Loaded after the section stylesheets; sizes here win over the ones in those files.
   Values come from the --sec-* tokens in tokens.css. The hero keeps its own, larger scale.
   ========================================================================== */

/* ---- Section spacing ---- */
.wwd-section,
.pdl-section,
.abt-section,
.prc-section,
.ind2-section,
.blg-section,
.faq2-section,
.hire2-section,
.lbt-section {
  padding-top: var(--sec-pad);
  padding-bottom: var(--sec-pad);
}

.wwd-header,
.abt-header,
.ind2-header,
.blg-header {
  margin-bottom: var(--sec-head-gap);
}

.pdl-header {
  margin-bottom: 28px; /* the filter tabs follow */
}

.pdl-tabs {
  margin-bottom: var(--sec-head-gap);
}

/* ---- Section label pills (light sections) ---- */
.wwd-pill,
.pdl-pill,
.abt-pill,
.prc-pill,
.ind2-pill,
.blg-pill,
.hire2-pill {
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid #BFDBFE;
  background: #E8F1FD;
  box-shadow: none;
  color: #1D4ED8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.wwd-pill svg,
.pdl-pill svg,
.abt-pill svg,
.prc-pill svg,
.ind2-pill svg,
.blg-pill svg,
.hire2-pill svg {
  width: 16px;
  height: 16px;
}

.faq2-pill {
  font-size: 13px;
}

/* ---- Section headings ---- */
.wwd-title,
.pdl-heading,
.abt-heading,
.prc-heading,
.ind2-heading,
.blg-heading,
.faq2-heading,
.hire2-heading,
#lets-build .lbt-heading {
  margin-top: 16px;
  font-size: var(--sec-h2);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* ---- Text under a heading ---- */
.wwd-sub,
.pdl-sub,
.abt-sub,
.prc-sub,
.ind2-sub,
.blg-sub,
.faq2-sub,
.hire2-lead,
#lets-build .lbt-sub {
  margin-top: 16px;
  font-size: var(--sec-sub);
  line-height: 1.6;
}

/* ---- Card and item titles, and their text ---- */
.wwd-card-title,
.pdl-title,
.abt-value-title,
.prc-title,
.ind2-title,
.blg-title,
.hire2-title {
  font-size: var(--sec-card-title);
}

.faq2-btn {
  font-size: clamp(16px, calc(0.3vw + 13.5px), 18px);
}

.wwd-card-desc,
.pdl-desc,
.abt-value-desc,
.prc-desc,
.ind2-desc,
.blg-excerpt,
.hire2-desc,
.faq2-panel-inner {
  font-size: var(--sec-card-body);
}

/* ---- Main buttons ---- */
.pdl-explore,
.abt-btn,
.blg-all,
.hire2-cta,
#lets-build .lbt-btn,
.wwd-more .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--sec-btn-h);
  padding: 0 28px;
  font-size: 16px;
}

.pdl-explore svg,
.abt-btn svg,
.blg-all svg,
.hire2-cta svg,
#lets-build .lbt-btn svg {
  width: 18px;
  height: 18px;
}

/* ---- Final call to action: a compact panel ---- */
.lbt-panel {
  padding: 48px 32px 44px;
}

#lets-build .lbt-pill {
  gap: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#lets-build .lbt-pill svg {
  width: 16px;
  height: 16px;
}

.lbt-chips {
  gap: 10px;
  margin-top: 26px;
}

#lets-build .lbt-chips li {
  padding: 8px 16px;
  font-size: 14px;
}

.lbt-chips svg {
  width: 18px;
  height: 18px;
}

.lbt-actions {
  gap: 16px;
  margin-top: 28px;
}

#lets-build .lbt-note {
  margin-top: 22px;
  font-size: 15px;
}

.lbt-note svg {
  width: 17px;
  height: 17px;
}

.lbt-art--left {
  width: clamp(180px, 15%, 250px);
}

.lbt-art--right {
  width: clamp(170px, 13%, 220px);
}

#lets-build .lbt-steps {
  padding: 18px 20px 14px;
}

#lets-build .lbt-steps li {
  gap: 12px;
  padding: 8px 0;
  font-size: 16px;
}

#lets-build .lbt-steps li:last-child {
  font-size: 19px;
}

.lbt-tick {
  width: 26px;
  height: 26px;
}

@media (max-width: 680px) {
  .lbt-panel {
    padding: 40px 18px 36px;
  }

  #lets-build .lbt-btn {
    width: 100%;
  }
}