.cHeroCopy h1 {
	font-size: 3rem !important;
	line-height: 3.5rem !important;
	font-weight: 400 !important;
	color: #fff !important;
	margin-bottom: 2.75rem !important;
}

.cHeroCopy p.cHeroSubhead {
  color: #fff !important;
}





/* ==========================================================================
   Forrester Agentic Control Plane landing page — page layout
   Base: Bootstrap grid + themes/wso2theme/css/component/wso2_layout_v2.css
   Only page rhythm here; type, colors and CTAs come from the theme.
   ========================================================================== */

/* ---------- Hero ---------- */

.cHeroReport { padding: 80px 0 88px; }

.cHeroCopy { padding-top: 8px; }

.cHeroReport .cHeroLabel {
  color: #5cd1ff !important;
  font-size: 0.8rem !important;
  letter-spacing: 3px !important;
  font-weight: 700 !important;
}

/* The theme sets h1 to 80px; this headline is long, so it runs at
   hero-display size instead. */
.cHeroReport h1 {
  font-size: 2.75rem !important;
  line-height: 1.16 !important;
  color: #fff !important;
  margin: 0 0 24px;
}

.cHeroSubhead {
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 40em;
  margin: 0;
}

/* ---------- Report body ---------- */

.cReportBody { padding: 88px 0; }
.cReportBody p { margin: 0 0 24px; }

.cLeadParagraph { font-size: 1.2rem !important; line-height: 1.75 !important; }

.cReadToTitle {
  margin: 40px 0 20px;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  line-height: 2.2rem !important;
}

.cReportList { list-style: none; margin: 0; padding: 0; }
.cReportList li { position: relative; padding-left: 34px; margin-bottom: 18px; }
.cReportList li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: #ff6700;
  font-weight: 800;
}

.cReportBodyCTA { margin: 40px 0 0; }
.cReportBodyCTA a.cFilledOutlinedCTA { display: inline-block; }

/* ---------- Pull quote ---------- */

.cQuoteSection { background-color: #f8f9fa !important; padding: 80px 0; }

.cPullQuote {
  margin: 0;
  border-left: 4px solid #ff6700;
  padding-left: 32px;
  font-size: 1.75rem;
  line-height: 1.5;
  color: #17223a;
  text-wrap: pretty;
}

.cPullQuote footer { margin-top: 24px; }
.cPullQuote footer small { color: #565656 !important; }

/* ---------- Trust ---------- */

.cTrustSection { padding: 72px 0 80px; }

.cTrustTitle {
  font-weight: 700 !important;
  font-size: 1.9rem !important;
  line-height: 2.4rem !important;
  margin: 0 0 36px;
  text-align: center;
}

.cLogoLockupPlaceholder {
  border: 1px dashed #d9d9d9;
  border-radius: 15px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #565656;
  font-size: 0.875rem;
  background-color: #f8f9fa;
}

/* ---------- Closing CTA ---------- */

.cClosingCTA { padding: 80px 0; }

.cClosingCTA h3 {
  color: #fff !important;
  font-weight: 300 !important;
  font-size: 1.75rem !important;
  line-height: 2.6rem !important;
  margin: 0 0 32px;
  text-align: center;
  text-wrap: pretty;
}

.cClosingButtons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.cClosingButtons a { display: inline-flex; align-items: center; flex: 0 0 auto; }

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .cHeroCopy { margin-bottom: 40px; }
}

@media (max-width: 767px) {
  .cHeroReport { padding: 48px 0 56px; }
  .cHeroReport h1 { font-size: 2.1rem !important; }
  .cReportBody,
  .cQuoteSection,
  .cClosingCTA { padding: 48px 0; }
  .cPullQuote { font-size: 1.4rem; padding-left: 20px; }
}

/* ==========================================================================
   Gated Report Form block (wso2-gated-report-form.html.twig) — refinements
   on top of the webinar registration form styling it reuses
   (.contact-form-section.cWso2WebinarRegisterForm in wso2-webinars-v2.css).
   Kept here, scoped with the extra .cGatedReportForm class the block's own
   markup carries, so none of this touches the shared webinar CSS/pages.
   ========================================================================== */

.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .cFormIntro {
  padding-left: 0.75rem;
}

.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .form-check-label {
  font-size: 0.85rem;
}

/* Line up the checkbox, submit button, and privacy note with the field
   labels/title/intro above (all at left: 0.75rem). .cFormCheckRow keeps
   Bootstrap's own 1.5em checkbox indent and adds the same 0.75rem on top;
   .cFormSubmitRow/.cFormPrivacyNote sit outside the .row/.col grid entirely
   (flush at 0), so they need the 0.75rem applied directly. */
.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .cFormCheckRow {
  padding-left: calc(1.5em + 0.75rem);
}

.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .cFormSubmitRow,
.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .cFormPrivacyNote {
  padding-left: 0.75rem;
}

/* Selects always carry a real value (never truly "empty" like an unfocused
   text input), so :placeholder-shown never applies to them — keep their
   label permanently in the floated position instead of the sunken one. */
.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .has-float-label select.form-control ~ label:not(.error) {
  font-size: 85%;
  color: #999999;
  top: 0;
  transform: translateY(-50%);
}

/* Text inputs: driven by "is-focused"/"is-filled" classes toggled by the
   inline script in wso2-gated-report-form.html.twig, instead of the shared
   form's :placeholder-shown-based CSS, which doesn't reliably re-sink the
   label after a focus-then-blur where nothing was typed.
   Scoped to input/textarea specifically (NOT the bare .form-control class,
   which selects also carry) — a bare ".form-control" selector here used to
   match select.form-control too, and because ":not(.is-focused):not(.is-filled)"
   adds 2 extra class-level selectors, this rule's specificity beat the
   select-targeted rule above even though it was never meant to apply to
   selects, permanently pinning Job Role/Country labels to the sunken
   (unfloated) state and overlapping the selected option text. */
.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .has-float-label:not(.is-focused):not(.is-filled) input.form-control ~ label:not(.error),
.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .has-float-label:not(.is-focused):not(.is-filled) textarea.form-control ~ label:not(.error) {
  font-size: 1rem;
  color: #494848;
  top: 50%;
  transform: translateY(-50%);
}

.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .has-float-label.is-focused .form-control ~ label:not(.error),
.contact-form-section.cWso2WebinarRegisterForm.cGatedReportForm .has-float-label.is-filled .form-control ~ label:not(.error) {
  font-size: 85%;
  color: #999999;
  top: 0;
  transform: translateY(-50%);
}