/* ==========================================================================
   Request a Demo — sandbox template styles
   Palette is limited to the six brand swatches plus white:
   gray #f4f3ef · blue #3664f4 · navy #1c164c · twilight #3333cc
   sky #6699ff · arctic #72ddf7
   Everything else is an rgba() of one of those.
   ========================================================================== */

.shx-dr {
  --dr-gray: #f4f3ef;
  --dr-blue: #3664f4;
  --dr-navy: #1c164c;
  --dr-twilight: #3333cc;
  --dr-sky: #6699ff;
  --dr-arctic: #72ddf7;
  --dr-line: rgba(102, 153, 255, 0.24);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.shx-dr *,
.shx-dr *::before,
.shx-dr *::after { box-sizing: border-box; }

/* ---------- hero band ---------- */
.shx-dr-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 48px);
  color: #fff;
  background:
    radial-gradient(55% 65% at 92% 0%, rgba(54, 100, 244, 0.55) 0%, rgba(54, 100, 244, 0) 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(51, 51, 204, 0.5) 0%, rgba(51, 51, 204, 0) 70%),
    linear-gradient(160deg, #1c164c 0%, #1c164c 55%, #3333cc 140%);
}
.shx-dr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(102, 153, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 153, 255, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(65% 75% at 25% 35%, #000 0%, transparent 75%);
  mask-image: radial-gradient(65% 75% at 25% 35%, #000 0%, transparent 75%);
}

.shx-dr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "intro    form"
    "benefits form"
    "proof    form";
  gap: 32px clamp(40px, 5vw, 80px);
  align-items: start;
}
.shx-dr-intro    { grid-area: intro; }
.shx-dr-benefits { grid-area: benefits; }
.shx-dr-proof    { grid-area: proof; }
.shx-dr-card     { grid-area: form; }

/* ---------- intro ---------- */
.shx-dr .shx-dr-eyebrow {
  margin: 0 0 16px;
  color: var(--dr-arctic);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.shx-dr .shx-dr-title {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(40px, 4.3vw, 58px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
.shx-dr .shx-dr-title span { color: var(--dr-arctic); white-space: nowrap; }
.shx-dr .shx-dr-lede {
  max-width: 600px;
  text-wrap: pretty;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
}

/* ---------- benefits ---------- */
.shx-dr .shx-dr-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shx-dr-benefit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.shx-dr-benefit__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--dr-twilight) 0%, var(--dr-blue) 100%);
  box-shadow: inset 0 0 0 1px rgba(114, 221, 247, 0.35), 0 12px 22px -12px rgba(54, 100, 244, 0.95);
}
.shx-dr-benefit__icon .a { stroke: var(--dr-arctic); }
.shx-dr-benefit__text strong {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.shx-dr-benefit__text span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- social proof ---------- */
.shx-dr-proof {
  overflow: hidden;
  border: 1px solid var(--dr-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}
.shx-dr .shx-dr-gartner {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 18px 24px;
  color: #fff;
}
.shx-dr-gartner__covers {
  display: block;
  width: 136px;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(28, 22, 76, 0.9));
}
.shx-dr-gartner__body > p { margin: 0; }
.shx-dr .shx-dr-gartner__kicker {
  margin-bottom: 6px;
  color: var(--dr-arctic);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.shx-dr .shx-dr-gartner__title {
  color: #fff;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.shx-dr-gartner__title span { color: var(--dr-arctic); }
.shx-dr .shx-dr-gartner__sub {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

.shx-dr-awards {
  padding: 16px 24px 18px;
  border-top: 1px solid var(--dr-line);
}
.shx-dr .shx-dr-awards__label {
  margin: 0 0 14px;
  color: var(--dr-arctic);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.shx-dr .shx-dr-awards__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shx-dr-awards__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
}
.shx-dr-awards__icon { flex: none; margin-top: 1px; color: var(--dr-sky); }
.shx-dr-awards__icon svg { display: block; }
.shx-dr-awards__icon .a { fill: var(--dr-arctic); stroke: var(--dr-arctic); stroke-width: 1; }
.shx-dr-awards__list strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.shx-dr-awards__list strong + span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.4;
}

.shx-dr .shx-dr-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 18px 24px 20px;
  border-top: 1px solid var(--dr-line);
  list-style: none;
}
.shx-dr-stats li { margin: 0; padding: 0 16px; }
.shx-dr-stats li:first-child { padding-left: 0; }
.shx-dr-stats li + li { border-left: 1px solid var(--dr-line); }
.shx-dr-stats strong {
  display: block;
  color: var(--dr-arctic);
  font-size: clamp(26px, 2.3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.shx-dr-stats span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13.5px;
  line-height: 1.4;
}

/* ---------- form card ---------- */
.shx-dr-card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 20px;
  color: var(--dr-navy);
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(28, 22, 76, 0.75), 0 0 0 1px rgba(102, 153, 255, 0.18);
}
.shx-dr-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dr-twilight), var(--dr-blue) 55%, var(--dr-arctic));
}
.shx-dr .shx-dr-card__title {
  margin: 0;
  color: var(--dr-navy);
  font-family: inherit;
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.shx-dr .shx-dr-card__sub {
  margin: 6px 0 24px;
  color: rgba(28, 22, 76, 0.68);
  font-size: 15px;
  line-height: 1.5;
}

/* loading skeleton, until Marketo renders */
.shx-dr-formwrap:not(.is-ready):not(.is-failed) .shx-dr-form {
  min-height: 430px;
  background-image:
    linear-gradient(rgba(28, 22, 76, 0.06), rgba(28, 22, 76, 0.06)),
    linear-gradient(rgba(28, 22, 76, 0.06), rgba(28, 22, 76, 0.06)),
    linear-gradient(rgba(28, 22, 76, 0.06), rgba(28, 22, 76, 0.06)),
    linear-gradient(rgba(28, 22, 76, 0.06), rgba(28, 22, 76, 0.06)),
    linear-gradient(rgba(28, 22, 76, 0.06), rgba(28, 22, 76, 0.06)),
    linear-gradient(rgba(28, 22, 76, 0.06), rgba(28, 22, 76, 0.06)),
    linear-gradient(rgba(28, 22, 76, 0.06), rgba(28, 22, 76, 0.06)),
    linear-gradient(rgba(28, 22, 76, 0.1), rgba(28, 22, 76, 0.1));
  background-repeat: no-repeat;
  background-size: 48% 46px, 48% 46px, 48% 46px, 48% 46px, 48% 46px, 48% 46px, 100% 96px, 100% 54px;
  background-position: 0 24px, 100% 24px, 0 100px, 100% 100px, 0 176px, 100% 176px, 0 252px, 0 376px;
  animation: shx-dr-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes shx-dr-pulse { from { opacity: 1; } to { opacity: 0.55; } }

.shx-dr-formfail { display: none; margin: 0; color: var(--dr-navy); font-size: 15px; line-height: 1.6; }
.shx-dr-formfail a { color: var(--dr-blue); font-weight: 600; }
.shx-dr-formwrap.is-failed .shx-dr-form { display: none; }
.shx-dr-formwrap.is-failed .shx-dr-formfail,
.shx-dr-formfail--show { display: block; }

/* ---------- Marketo form (its own CSS is removed at runtime) ---------- */
.shx-dr .shx-dr-form.mktoForm {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100% !important;
  margin: 0;
  padding: 0 !important;
  color: var(--dr-navy);
  font-family: inherit !important;
  font-size: 15px !important;
}
.shx-dr .shx-dr-form .mktoFormRow { display: contents; }
.shx-dr .shx-dr-form .mktoFormCol {
  float: none !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
}
.shx-dr .shx-dr-form .shx-dr-full,
.shx-dr .shx-dr-form .mktoButtonRow { grid-column: 1 / -1; }
.shx-dr .shx-dr-form .mktoOffset,
.shx-dr .shx-dr-form .mktoGutter,
.shx-dr .shx-dr-form .mktoClear,
.shx-dr .shx-dr-form .mktoPlaceholder { display: none !important; }
/* Script wrapper and the invisible-reCAPTCHA host have no visible content (the badge
   is position:fixed and hidden inline by Marketo); take them out of the grid flow
   without display:none, which would stop the reCAPTCHA iframe from loading. */
.shx-dr .shx-dr-form > div:not([class]),
.shx-dr .shx-dr-form .g-recaptcha {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}
.shx-dr .shx-dr-form .mktoFieldWrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  float: none !important;
  width: 100% !important;
}

.shx-dr .shx-dr-form .mktoLabel {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dr-navy);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.shx-dr .shx-dr-form .mktoLabel.shx-dr-nolabel { display: none !important; }
.shx-dr .shx-dr-form .mktoAsterix { display: none; order: 9; float: none; padding: 0; color: var(--dr-twilight); }
.shx-dr .shx-dr-form .mktoRequiredField .mktoAsterix { display: inline; }
.shx-dr .shx-dr-form .shx-dr-opt { color: rgba(28, 22, 76, 0.55); font-weight: 400; }

.shx-dr .shx-dr-form input[type="text"],
.shx-dr .shx-dr-form input[type="email"],
.shx-dr .shx-dr-form input[type="tel"],
.shx-dr .shx-dr-form input[type="url"],
.shx-dr .shx-dr-form input[type="number"],
.shx-dr .shx-dr-form select,
.shx-dr .shx-dr-form textarea {
  display: block;
  width: 100% !important;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(28, 22, 76, 0.2);
  border-radius: 8px;
  color: var(--dr-navy);
  background-color: #fff;
  box-shadow: none;
  font: 400 15px/1.4 Inter, system-ui, sans-serif;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.shx-dr .shx-dr-form select {
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c164c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.shx-dr .shx-dr-form textarea {
  height: auto !important;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
}
.shx-dr .shx-dr-form ::placeholder { color: rgba(28, 22, 76, 0.42); opacity: 1; }
.shx-dr .shx-dr-form input:hover,
.shx-dr .shx-dr-form select:hover,
.shx-dr .shx-dr-form textarea:hover { border-color: rgba(28, 22, 76, 0.38); }
.shx-dr .shx-dr-form input:focus,
.shx-dr .shx-dr-form select:focus,
.shx-dr .shx-dr-form textarea:focus {
  border-color: var(--dr-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(54, 100, 244, 0.2);
}
.shx-dr .shx-dr-form .mktoInvalid,
.shx-dr .shx-dr-form .mktoInvalid:focus {
  border-color: var(--dr-twilight);
  box-shadow: 0 0 0 3px rgba(51, 51, 204, 0.16);
}

/* checkbox + privacy copy */
.shx-dr .shx-dr-form .mktoCheckboxList {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}
.shx-dr .shx-dr-form .mktoCheckboxList input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--dr-blue);
  cursor: pointer;
}
.shx-dr .shx-dr-form .mktoCheckboxList label {
  margin: 0 !important;
  color: rgba(28, 22, 76, 0.8);
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
}
.shx-dr .shx-dr-form .mktoHtmlText {
  width: auto !important;
  padding: 0 !important;
  color: rgba(28, 22, 76, 0.62);
  font-size: 12.5px;
  line-height: 1.55;
}
.shx-dr .shx-dr-form .mktoHtmlText p { margin: 0; }
.shx-dr .shx-dr-form .mktoCaptchaDisclaimer {
  grid-column: 1 / -1;
  margin: -8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: rgba(28, 22, 76, 0.62);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
}
.shx-dr .shx-dr-form .mktoHtmlText a { color: var(--dr-blue); }
.shx-dr .shx-dr-form .mktoHtmlText a b { font-weight: 600; }

/* validation messages (Marketo positions these as tooltips; we show them inline) */
.shx-dr .shx-dr-form .mktoError {
  position: static !important;
  display: block;
  margin-top: 2px;
}
.shx-dr .shx-dr-form .mktoErrorArrowWrap { display: none !important; }
.shx-dr .shx-dr-form .mktoErrorMsg {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--dr-twilight);
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.shx-dr .shx-dr-form .mktoErrorMsg .mktoErrorDetail { display: inline; }

/* submit */
.shx-dr .shx-dr-form .mktoButtonRow { margin-top: 4px; }
.shx-dr .shx-dr-form .mktoButtonWrap {
  display: block !important;
  margin: 0 !important;
}
.shx-dr .shx-dr-form .mktoButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(90deg, var(--dr-navy) 0%, var(--dr-twilight) 100%);
  box-shadow: 0 10px 22px -10px rgba(51, 51, 204, 0.8);
  font: 700 16px/1 Inter, system-ui, sans-serif;
  text-shadow: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.shx-dr .shx-dr-form .mktoButton::after {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center;
  transition: transform 160ms ease;
}
.shx-dr .shx-dr-form .mktoButton:hover {
  background: linear-gradient(90deg, var(--dr-twilight) 0%, var(--dr-blue) 100%);
  transform: translateY(-1px);
}
.shx-dr .shx-dr-form .mktoButton:hover::after { transform: translateX(3px); }
.shx-dr .shx-dr-form .mktoButton:focus-visible { outline: 3px solid var(--dr-arctic); outline-offset: 2px; }
.shx-dr .shx-dr-form .mktoButton[disabled] { opacity: 0.7; cursor: progress; transform: none; }

/* ---------- fine print ---------- */
.shx-dr .shx-dr-fineprint {
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(102, 153, 255, 0.16);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11.5px;
  line-height: 1.6;
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .shx-dr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .shx-dr .shx-dr-benefits { grid-template-columns: 1fr; gap: 14px; }
  .shx-dr-benefit { flex-direction: row; align-items: center; gap: 14px; }
}

@media (max-width: 991.98px) {
  .shx-dr-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "intro" "proof" "form" "benefits";
    gap: 28px;
  }
}

@media (max-width: 575.98px) {
  .shx-dr-hero .container { padding-right: 16px; padding-left: 16px; }
  .shx-dr .shx-dr-gartner { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .shx-dr-gartner__covers { width: 92px; }
  .shx-dr .shx-dr-gartner__sub { font-size: 13px; }
  .shx-dr-awards { padding: 16px 18px 18px; }
  .shx-dr .shx-dr-awards__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .shx-dr .shx-dr-stats { padding: 16px 18px 18px; }
  .shx-dr-stats li { padding: 0 10px; }
  .shx-dr-stats strong { font-size: 22px; }
  .shx-dr-stats span { font-size: 12.5px; }
  .shx-dr-card { padding: 22px 18px; border-radius: 16px; }
  .shx-dr .shx-dr-form.mktoForm { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* Hybrid Mesh copy (2026-10-06): points stack as icon + bold title + line, then a CTA line.
   Awards block removed. Mobile order follows the light page: copy, points, proof, form. */
.shx-dr-points { grid-area: benefits; }
.shx-dr .shx-dr-benefits { grid-template-columns: 1fr; gap: 20px; }
.shx-dr-benefit { flex-direction: row; align-items: flex-start; gap: 16px; }
.shx-dr-benefit__text strong { font-size: 17px; font-weight: 600; line-height: 1.35; }
.shx-dr-benefit__text span { margin-top: 4px; font-size: 15px; line-height: 1.55; }
.shx-dr .shx-dr-title span { white-space: normal; }
.shx-dr-fnref { margin-left: 1px; color: var(--dr-arctic); text-decoration: none; }
.shx-dr .shx-dr-cta { max-width: 580px; margin: 26px 0 0; color: #fff; font-size: 17px; font-weight: 500; line-height: 1.5; }
.shx-dr-fn { display: block; margin-bottom: 8px; }
@media (max-width: 1199.98px) {
  .shx-dr-benefit { align-items: flex-start; }
}
@media (max-width: 991.98px) {
  .shx-dr-grid { grid-template-areas: "intro" "benefits" "proof" "form"; }
}
.shx-dr .shx-dr-card__title { margin-bottom: 22px; }
.shx-dr .shx-dr-title { font-size: clamp(34px, 3.4vw, 50px); text-wrap: balance; }

/* Gartner strip (same content as /forms/request-demo.html) above the form, replacing the
   report-covers card (2026-10-06). Peer Insights logo 2247 is the white-background art,
   rendered white here with a filter (no reversed logo in the media library). */
.shx-dr-side { grid-area: form; }
.shx-dr-peerstrip { margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid rgba(102, 153, 255, 0.2); }
.shx-dr-peer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.shx-dr-peer__logo { display: block; flex: none; line-height: 0; }
.shx-dr-peer__logo img { display: block; width: auto; height: 40px; filter: brightness(0) invert(1); }
.shx-dr-peer__rating { display: flex; flex-direction: column; gap: 2px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.shx-dr .shx-dr-peer__rating a { color: #fff; font-size: 15px; text-decoration: none; }
.shx-dr .shx-dr-peer__rating a strong { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.shx-dr .shx-dr-peer__rating a:hover strong,
.shx-dr .shx-dr-peer__rating a:focus-visible strong { color: var(--dr-arctic); text-decoration-color: currentColor; }
.shx-dr-peer__stars { color: #fdb022; font-size: 15px; letter-spacing: 1px; }
.shx-dr-peer__date { color: rgba(255, 255, 255, 0.55); font-size: 12px; line-height: 1.4; }
.shx-dr .shx-dr-rank { margin: 12px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 13.5px; line-height: 1.5; }
.shx-dr-rank strong { color: var(--dr-arctic); font-weight: 700; }
.shx-dr .shx-dr-fineprint { margin-top: clamp(72px, 9vw, 128px); }
@media (max-width: 991.98px) {
  .shx-dr-grid { grid-template-areas: "intro" "benefits" "form"; }
}

/* Icons stand on their own: no gradient tile (user, 2026-10-06). */
.shx-dr-benefit__icon { width: 32px; height: 32px; border-radius: 0; background: none; box-shadow: none; }
.shx-dr-benefit__icon svg { width: 32px; height: 32px; }
.shx-dr-benefit { gap: 14px; }

/* Bigger bare icons + point titles; all hero text white (user, 2026-10-06). */
.shx-dr-benefit__icon { width: 40px; height: 40px; }
.shx-dr-benefit__icon svg { width: 40px; height: 40px; }
.shx-dr-benefit { gap: 18px; }
.shx-dr .shx-dr-benefits { gap: 24px; }
.shx-dr-benefit__text strong { font-size: 20px; line-height: 1.3; }
.shx-dr-benefit__text span { color: #fff; font-size: 16px; }
.shx-dr .shx-dr-title span { color: #fff; }
.shx-dr .shx-dr-lede { color: #fff; }

/* ==========================================================================
   Video-LP look (2026-10-06, user: "go with this style" = /lp/skyhigh-dspm-video-demo.html,
   skyhigh-video-landing .svl-stage / .svl-btn / .svl-video). Values copied from that page,
   including its off-palette cyan #5fe6e0 and button blues #3b33c4 → #4f6bf0.
   ========================================================================== */
.shx-dr { --dr-cyan: #5fe6e0; --dr-btn: linear-gradient(135deg, #3b33c4 0%, #4f6bf0 100%); }
.shx-dr-hero {
  padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 5vw, 64px);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(63, 99, 224, 0.18) 0%, rgba(63, 99, 224, 0) 55%),
    linear-gradient(180deg, #050912 0%, #070c1c 16%, #0c1538 36%, #16276e 58%, #2742ae 80%, #3b5fdd 100%);
}
.shx-dr-hero::before {
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(transparent 30%, #000 100%);
  mask-image: linear-gradient(transparent 30%, #000 100%);
}
.shx-dr-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -58%;
  z-index: 0;
  width: 170%;
  height: 90%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  background: radial-gradient(50% 50%, rgba(150, 200, 255, 0.42) 0%, rgba(120, 170, 255, 0.1) 42%, transparent 62%);
}
.shx-dr-hero > .container { position: relative; z-index: 2; }

.shx-dr .shx-dr-title {
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(2.2rem, 3.6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.02;
}
.shx-dr .shx-dr-lede { font-size: 1.18rem; line-height: 1.62; }
.shx-dr-benefit__text strong { font-family: Archivo, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.005em; }
.shx-dr-benefit__icon .a { stroke: var(--dr-cyan); }
.shx-dr-fnref, .shx-dr-rank strong { color: var(--dr-cyan); }
.shx-dr .shx-dr-peer__rating a:hover strong,
.shx-dr .shx-dr-peer__rating a:focus-visible strong { color: var(--dr-cyan); }
.shx-dr-peerstrip { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* form card: the video frame's cyan-to-blue hairline border, deep shadow and blue glow */
.shx-dr-side { position: relative; }
.shx-dr-card {
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(8, 14, 40, 0.9), 0 0 0 1px rgba(95, 230, 224, 0.35);
}
.shx-dr-card::before { display: none; }
.shx-dr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(95, 230, 224, 0.6), rgba(79, 107, 240, 0.25) 38%, rgba(255, 255, 255, 0.06) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.shx-dr-card-glow { display: none; }
.shx-dr-side::after {
  content: "";
  position: absolute;
  left: -26px; right: -26px; bottom: -26px;
  top: 120px;
  z-index: -1;
  border-radius: 34px;
  filter: blur(8px);
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 45%, rgba(79, 107, 240, 0.45), transparent 70%);
}

/* submit = .svl-btn */
.shx-dr .shx-dr-form .mktoButton {
  height: 54px;
  border-radius: 11px;
  background: var(--dr-btn) !important;
  box-shadow: 0 14px 34px -10px rgba(79, 107, 240, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  font: 600 1rem/1 Inter, system-ui, sans-serif;
  transition: transform 0.18s, box-shadow 0.18s;
}
.shx-dr .shx-dr-form .mktoButton:hover {
  background: var(--dr-btn) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -10px rgba(79, 107, 240, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.shx-dr .shx-dr-form .mktoButton:focus-visible { outline: 2px solid var(--dr-cyan); outline-offset: 3px; }

.shx-dr .shx-dr-fineprint { color: rgba(255, 255, 255, 0.62); border-top-color: rgba(255, 255, 255, 0.14); }

/* Point titles larger again (user, 2026-10-06). */
.shx-dr-benefit__text strong { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; }
.shx-dr-benefit__text span { margin-top: 6px; }
.shx-dr-benefit__icon { margin-top: 2px; }

/* No grid graphic, gradient only (user, 2026-10-06). */
.shx-dr-hero::before { display: none; }

/* Headline 2nd line highlighted in brand arctic (user, 2026-10-06). */
.shx-dr .shx-dr-title span { color: var(--dr-arctic); }

/* ==========================================================================
   Variant: page 11125 /forms/live-demo-gradient.html = same page, Executive Exchange NYC
   hero style (sh-event-templates .shx-nyc .hero, 2026-10-06). All brand colours:
   black → navy → twilight → blue → sky. Inter headline, royal-blue highlight,
   twilight→blue button, 3px top stripe on the card. No grid/glow graphics.
   ========================================================================== */
body.shx-dr-lp--gradient .shx-dr-hero , body.shx-dr-lp--cost .shx-dr-hero , body.shx-dr-lp--hybrid .shx-dr-hero , body.shx-dr-lp--zt .shx-dr-hero {
  background: linear-gradient(180deg, #050510 0%, #0a0b20 12%, #0f1035 22%, #1c164c 35%, #252080 50%, #2a4cc0 65%, #3664f4 78%, #5090f8 90%, #72b4fc 100%);
}
body.shx-dr-lp--gradient .shx-dr-hero::after , body.shx-dr-lp--cost .shx-dr-hero::after , body.shx-dr-lp--hybrid .shx-dr-hero::after , body.shx-dr-lp--zt .shx-dr-hero::after {
  left: auto; right: -150px; top: -150px; bottom: auto;
  width: 500px; height: 500px;
  transform: none; filter: none;
  background: radial-gradient(circle, rgba(54, 100, 244, 0.12) 0%, transparent 70%);
}
body.shx-dr-lp--gradient .shx-dr .shx-dr-title , body.shx-dr-lp--cost .shx-dr .shx-dr-title , body.shx-dr-lp--hybrid .shx-dr .shx-dr-title , body.shx-dr-lp--zt .shx-dr .shx-dr-title { font-family: Inter, system-ui, sans-serif; letter-spacing: -0.03em; line-height: 1.05; }
body.shx-dr-lp--gradient .shx-dr .shx-dr-title span , body.shx-dr-lp--cost .shx-dr .shx-dr-title span , body.shx-dr-lp--hybrid .shx-dr .shx-dr-title span , body.shx-dr-lp--zt .shx-dr .shx-dr-title span { color: var(--dr-blue); }
body.shx-dr-lp--gradient .shx-dr-benefit__text strong , body.shx-dr-lp--cost .shx-dr-benefit__text strong , body.shx-dr-lp--hybrid .shx-dr-benefit__text strong , body.shx-dr-lp--zt .shx-dr-benefit__text strong { font-family: Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.015em; }
body.shx-dr-lp--gradient .shx-dr-benefit__icon .a, body.shx-dr-lp--cost .shx-dr-benefit__icon .a, body.shx-dr-lp--hybrid .shx-dr-benefit__icon .a, body.shx-dr-lp--zt .shx-dr-benefit__icon .a,
body.shx-dr-lp--gradient .shx-dr-fnref, body.shx-dr-lp--cost .shx-dr-fnref, body.shx-dr-lp--hybrid .shx-dr-fnref, body.shx-dr-lp--zt .shx-dr-fnref,
body.shx-dr-lp--gradient .shx-dr-rank strong , body.shx-dr-lp--cost .shx-dr-rank strong , body.shx-dr-lp--hybrid .shx-dr-rank strong , body.shx-dr-lp--zt .shx-dr-rank strong { color: var(--dr-arctic); stroke: var(--dr-arctic); }
body.shx-dr-lp--gradient .shx-dr-fnref, body.shx-dr-lp--cost .shx-dr-fnref, body.shx-dr-lp--hybrid .shx-dr-fnref, body.shx-dr-lp--zt .shx-dr-fnref, body.shx-dr-lp--gradient .shx-dr-rank strong , body.shx-dr-lp--cost .shx-dr-rank strong , body.shx-dr-lp--hybrid .shx-dr-rank strong , body.shx-dr-lp--zt .shx-dr-rank strong { stroke: none; }
body.shx-dr-lp--gradient .shx-dr .shx-dr-peer__rating a:hover strong , body.shx-dr-lp--cost .shx-dr .shx-dr-peer__rating a:hover strong , body.shx-dr-lp--hybrid .shx-dr .shx-dr-peer__rating a:hover strong , body.shx-dr-lp--zt .shx-dr .shx-dr-peer__rating a:hover strong { color: var(--dr-arctic); }
body.shx-dr-lp--gradient .shx-dr-card , body.shx-dr-lp--cost .shx-dr-card , body.shx-dr-lp--hybrid .shx-dr-card , body.shx-dr-lp--zt .shx-dr-card { border-radius: 13px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28); }
body.shx-dr-lp--gradient .shx-dr-card::after , body.shx-dr-lp--cost .shx-dr-card::after , body.shx-dr-lp--hybrid .shx-dr-card::after , body.shx-dr-lp--zt .shx-dr-card::after { display: none; }
body.shx-dr-lp--gradient .shx-dr-card::before , body.shx-dr-lp--cost .shx-dr-card::before , body.shx-dr-lp--hybrid .shx-dr-card::before , body.shx-dr-lp--zt .shx-dr-card::before { display: block; height: 3px; background: linear-gradient(120deg, #3333cc 0%, #3664f4 100%); }
body.shx-dr-lp--gradient .shx-dr-side::after , body.shx-dr-lp--cost .shx-dr-side::after , body.shx-dr-lp--hybrid .shx-dr-side::after , body.shx-dr-lp--zt .shx-dr-side::after { display: none; }
body.shx-dr-lp--gradient .shx-dr .shx-dr-form .mktoButton, body.shx-dr-lp--cost .shx-dr .shx-dr-form .mktoButton, body.shx-dr-lp--hybrid .shx-dr .shx-dr-form .mktoButton, body.shx-dr-lp--zt .shx-dr .shx-dr-form .mktoButton,
body.shx-dr-lp--gradient .shx-dr .shx-dr-form .mktoButton:hover , body.shx-dr-lp--cost .shx-dr .shx-dr-form .mktoButton:hover , body.shx-dr-lp--hybrid .shx-dr .shx-dr-form .mktoButton:hover , body.shx-dr-lp--zt .shx-dr .shx-dr-form .mktoButton:hover {
  border-radius: 9px;
  background: linear-gradient(120deg, #3333cc 0%, #3664f4 100%) !important;
  box-shadow: 0 8px 24px rgba(54, 100, 244, 0.32) !important;
}
body.shx-dr-lp--gradient .shx-dr .shx-dr-form .mktoButton:hover , body.shx-dr-lp--cost .shx-dr .shx-dr-form .mktoButton:hover , body.shx-dr-lp--hybrid .shx-dr .shx-dr-form .mktoButton:hover , body.shx-dr-lp--zt .shx-dr .shx-dr-form .mktoButton:hover { box-shadow: 0 12px 30px rgba(54, 100, 244, 0.45) !important; }
body.shx-dr-lp--gradient .shx-dr .shx-dr-form .mktoButton:focus-visible , body.shx-dr-lp--cost .shx-dr .shx-dr-form .mktoButton:focus-visible , body.shx-dr-lp--hybrid .shx-dr .shx-dr-form .mktoButton:focus-visible , body.shx-dr-lp--zt .shx-dr .shx-dr-form .mktoButton:focus-visible { outline-color: var(--dr-arctic); }
body.shx-dr-lp--gradient .shx-dr .shx-dr-fineprint , body.shx-dr-lp--cost .shx-dr .shx-dr-fineprint , body.shx-dr-lp--hybrid .shx-dr .shx-dr-fineprint , body.shx-dr-lp--zt .shx-dr .shx-dr-fineprint { color: rgba(255, 255, 255, 0.78); border-top-color: rgba(255, 255, 255, 0.25); }

/* Sleeker icons (user, 2026-10-06): thinner strokes on the redrawn glyphs. */
.shx-dr-benefit__icon svg { stroke-width: 1.4; }

/* Solid gradient icons (user: thin icons felt cheesy, 2026-10-06). Brand arctic → sky fill, navy cut-outs, soft blue glow. */
.shx-dr-benefit__icon { width: 44px; height: 44px; margin-top: 0; }
.shx-dr-benefit__icon svg { width: 44px; height: 44px; filter: drop-shadow(0 8px 18px rgba(102, 153, 255, 0.45)); }
.shx-dr-benefit { gap: 20px; align-items: center; }
.shx-dr-benefit__icon, .shx-dr-benefit__icon svg { width: 48px; height: 48px; }
/* Duotone icons: white outline over a soft offset gradient shade (2026-10-06); lighter glow. */
.shx-dr-benefit__icon svg { filter: drop-shadow(0 6px 14px rgba(102, 153, 255, 0.3)); }
/* Simple high-end icons: white outline + one solid brand-arctic accent, no glow (2026-10-06). */
.shx-dr-benefit__icon, .shx-dr-benefit__icon svg { width: 44px; height: 44px; }
.shx-dr-benefit__icon svg { filter: none; }
/* Exact brand colours: small accents back to arctic instead of the DSPM cyan (2026-10-06). */
.shx-dr { --dr-cyan: #72ddf7; }
/* Button = the light page's flat brand royal blue (user, 2026-10-06). Page 11125 keeps its own NYC button rules. */
body:not(.shx-dr-lp--gradient):not(.shx-dr-lp--cost):not(.shx-dr-lp--zt):not(.shx-dr-lp--hybrid) .shx-dr .shx-dr-form .mktoButton { background: #3664f4 !important; box-shadow: none !important; }
body:not(.shx-dr-lp--gradient):not(.shx-dr-lp--cost):not(.shx-dr-lp--zt):not(.shx-dr-lp--hybrid) .shx-dr .shx-dr-form .mktoButton:hover { background: #3333cc !important; box-shadow: none !important; transform: translateY(-1px); }

/* 2026-10-06: CTA line as a callout pointing at the form (gradient variant 11125 only). */
body.shx-dr-lp--gradient .shx-dr .shx-dr-cta , body.shx-dr-lp--cost .shx-dr .shx-dr-cta , body.shx-dr-lp--hybrid .shx-dr .shx-dr-cta , body.shx-dr-lp--zt .shx-dr .shx-dr-cta {
  position: relative;
  margin-top: 32px;
  padding: 18px 56px 18px 22px;
  border-left: 3px solid var(--dr-arctic);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(54,100,244,.28), rgba(54,100,244,.08));
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
}
body.shx-dr-lp--gradient .shx-dr .shx-dr-cta::after , body.shx-dr-lp--cost .shx-dr .shx-dr-cta::after , body.shx-dr-lp--hybrid .shx-dr .shx-dr-cta::after , body.shx-dr-lp--zt .shx-dr .shx-dr-cta::after {
  content: '\2192';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dr-arctic);
  font-size: 26px;
  font-weight: 700;
}
@media (max-width: 1023px) {
  body.shx-dr-lp--gradient .shx-dr .shx-dr-cta::after , body.shx-dr-lp--cost .shx-dr .shx-dr-cta::after , body.shx-dr-lp--hybrid .shx-dr .shx-dr-cta::after , body.shx-dr-lp--zt .shx-dr .shx-dr-cta::after { content: '\2193'; }
}

/* 2026-10-06 (user): all headings in init caps across the hybrid pages. Display-only (source copy unchanged); the shared Related Assets carousel (.splide) is left alone. */
main.shx-dr :is(h1, h2, h3, h4, h5, h6):not(.splide *) { text-transform: capitalize; }

/* 2026-10-06 (user): ZT demo callout regular weight except the Readiness Review name. */
body.shx-dr-lp--zt .shx-dr .shx-dr-cta { font-weight: 400; }
body.shx-dr-lp--zt .shx-dr .shx-dr-cta strong { font-weight: 700; }
/* init caps also for the bold point titles (they are not h-tags). */
main.shx-dr .shx-dr-benefit__text > strong { text-transform: capitalize; }

/* 2026-10-06 (user): Cost demo callout regular weight except the walkthrough name. */
body.shx-dr-lp--cost .shx-dr .shx-dr-cta { font-weight: 400; }
body.shx-dr-lp--cost .shx-dr .shx-dr-cta strong { font-weight: 700; }

/* 2026-10-15 (user): Hybrid Mesh demo callout regular weight except the assessment name, like the other form pages. */
body.shx-dr-lp--hybrid .shx-dr .shx-dr-cta { font-weight: 400; }
body.shx-dr-lp--hybrid .shx-dr .shx-dr-cta strong { font-weight: 700; }

/* 2026-10-13 (marketing doc, green): the hybrid and cost form pages show the point titles in sentence case, not init caps. */
body.shx-dr-lp--hybrid main.shx-dr .shx-dr-benefit__text > strong, body.shx-dr-lp--cost main.shx-dr .shx-dr-benefit__text > strong { text-transform: none; }

/* 2026-10-13 (user): asterisk markers stay white on the form pages, not teal. */
body.shx-dr-lp main.shx-dr .shx-dr-fnref { color: #fff; }

/* 2026-10-13 (user): headline asterisk smaller on the form pages. */
body.shx-dr-lp main.shx-dr .shx-dr-title .shx-dr-fnref { font-size: .4em; vertical-align: .95em; margin-left: 2px; }

/* ---------- thank-you pages (thank-you.php), 2026-10-13 ---------- */
.shx-dr--thanks .shx-dr-thanks { max-width: 760px; padding: clamp(16px, 3vw, 40px) 0 clamp(32px, 5vw, 72px); }
.shx-dr--thanks .shx-dr-thanks .shx-dr-lede { max-width: 640px; }
.shx-dr--thanks .shx-dr-thanks__next { margin: 48px 0 20px; color: var(--dr-arctic); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; }
.shx-dr--thanks .shx-dr-thanks__steps { display: grid; gap: 20px; margin: 0 0 44px; padding: 0; list-style: none; }
.shx-dr--thanks .shx-dr-thanks__steps li { display: flex; align-items: flex-start; gap: 16px; }
.shx-dr--thanks .shx-dr-thanks__num { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--dr-arctic); border-radius: 50%; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; }
.shx-dr--thanks .shx-dr-thanks__text > strong { display: block; color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; }
.shx-dr--thanks .shx-dr-thanks__text > span { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.84); font-size: 16px; line-height: 1.5; }
/* 2026-10-13 (user): "What happens next" steps removed; the button follows the message. */
.shx-dr--thanks .shx-dr-thanks .btn { margin-top: 36px; }

/* 2026-10-13 (user): points as a bulleted list, no icons; smaller point titles. */
body.shx-dr-lp main.shx-dr .shx-dr-benefit__icon { display: none; }
body.shx-dr-lp main.shx-dr .shx-dr-benefits { gap: 18px; }
body.shx-dr-lp main.shx-dr .shx-dr-benefit { position: relative; display: block; padding-left: 24px; }
body.shx-dr-lp main.shx-dr .shx-dr-benefit::before { content: ''; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
body.shx-dr-lp main.shx-dr .shx-dr-benefit__text > strong { font-size: 19px; line-height: 1.3; }