/* ============================================================
   MarketResearchly - Contact / Request a Demo (redesign)
   Same editorial language as the About page: serif display,
   hairlines, one deep violet accent, a frosted form card on the
   warm site theme (site-theme.css: backdrop, nav, footer, pills,
   field focus). Tokens (--mr-*) come from style.css.
   ============================================================ */

.ct {
  --ct-accent-ink: #3B3470;            /* deep violet for text on light */
  --ct-ink-soft:   rgba(22, 22, 24, .74);
  --ct-hair:       rgba(22, 22, 24, .1);
  color: var(--mr-ink); font-family: var(--mr-sans);
}
.ct-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.ct-grid {
  display: grid; grid-template-columns: 1fr 520px; gap: 80px; align-items: start;
  padding-top: 96px; padding-bottom: 130px;
}

/* ---------- left: pitch ---------- */
.ct-pitch { padding-top: 10px; }
.ct-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ct-accent-ink);
}
.ct-label::before { content: ''; width: 26px; height: 1px; background: var(--mr-accent); }
.ct-display {
  font-family: var(--mr-display); font-weight: 400; font-size: 66px; line-height: 1;
  letter-spacing: -0.035em; margin: 24px 0 0; max-width: 520px; text-wrap: balance;
}
.ct-display em { font-style: italic; color: var(--ct-accent-ink); }
.ct-lede { font-size: 17.5px; line-height: 1.7; color: var(--ct-ink-soft); margin: 26px 0 0; max-width: 470px; text-wrap: pretty; }

/* the three steps as a timeline: numerals on a thin vertical line */
.ct-steps { list-style: none; margin: 48px 0 0; padding: 0; max-width: 470px; position: relative; }
.ct-steps::before {
  content: ''; position: absolute; left: 21px; top: 26px; bottom: 26px; width: 1px;
  background: linear-gradient(rgba(86, 74, 153, .5), rgba(86, 74, 153, .12));
}
.ct-steps li { position: relative; display: flex; gap: 24px; align-items: flex-start; padding: 0 0 30px; }
.ct-steps li:last-child { padding-bottom: 0; }
.ct-steps .n {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mr-display); font-style: italic; font-size: 19px; color: var(--ct-accent-ink);
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(86, 74, 153, .3);
  box-shadow: 0 6px 16px rgba(60, 50, 42, .08);
}
.ct-steps .t { font-family: var(--mr-display); font-size: 23px; line-height: 1.2; letter-spacing: -0.015em; padding-top: 8px; }
.ct-steps .d { font-size: 14.5px; line-height: 1.65; color: var(--ct-ink-soft); margin-top: 5px; }

/* Pricing reuses this layout: a small subhead over its six factors,
   a tighter timeline for them, and a closing footnote */
.ct-subhead {
  margin: 44px 0 20px; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(22, 22, 24, .6);
}
.ct-subhead + .ct-steps { margin-top: 0; }
.ct-steps-sm li { padding-bottom: 20px; }
.ct-steps-sm .n { width: 38px; height: 38px; font-size: 16px; }
.ct-steps-sm::before { left: 18.5px; top: 22px; bottom: 22px; }
.ct-steps-sm .t { font-size: 20px; padding-top: 6px; }
.ct-steps-sm .d { font-size: 14px; margin-top: 3px; }
.ct-footnote {
  margin: 30px 0 0; max-width: 470px; padding: 16px 20px; border-radius: 16px;
  font-size: 14px; line-height: 1.65; color: var(--ct-ink-soft);
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9);
  border-left: 3px solid var(--mr-accent);
}

/* ---------- right: form card ---------- */
.ct-card {
  padding: 42px 40px 34px; border-radius: 26px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 34px 80px rgba(60, 50, 42, .13);
}
.ct-card-title {
  font-family: var(--mr-display); font-size: 34px; line-height: 1.05; letter-spacing: -0.025em;
  margin-bottom: 26px;
}
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-field { margin-bottom: 16px; }
.ct .field-input { background: rgba(255, 255, 255, .95); }
.ct textarea.field-input { min-height: 104px; }
.ct-opt { font-weight: 400; color: rgba(22, 22, 24, .55); }
.ct-submit { margin-top: 8px; padding: 14px 0; font-size: 15px; }
.ct-small { font-size: 12.5px; line-height: 1.6; color: rgba(22, 22, 24, .62); }
.ct-privacy { margin: 14px 0 0; text-align: center; }
.ct-alt {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ct-hair);
  text-align: center; font-size: 13px; color: rgba(22, 22, 24, .62);
}
.ct a[href^="mailto:"] { font-weight: 600; color: var(--mr-ink); border-bottom: 1px solid rgba(86, 74, 153, .45); }
.ct a[href^="mailto:"]:hover { color: var(--ct-accent-ink); }

.ct-errors {
  margin-bottom: 20px; padding: 13px 16px; border-radius: 14px;
  background: rgba(216, 54, 43, .07); border: 1px solid rgba(216, 54, 43, .25);
  font-size: 13px; line-height: 1.6; color: #9E2A1E;
}

/* ---------- success state ---------- */
.ct-done { text-align: center; padding: 30px 4px 12px; }
.ct-done-ic {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mr-accent); box-shadow: 0 12px 30px rgba(204, 72, 45, .3);
}
.ct-done-ic { color: #fff; font-size: 24px; font-weight: 700; line-height: 1; }
.ct-done .ct-card-title { margin-bottom: 12px; }
.ct-done-text { font-size: 15px; line-height: 1.65; color: var(--ct-ink-soft); margin: 0 auto 12px; max-width: 360px; }
.ct-done .ct-small { margin: 0 0 26px; }

/* ---------- entrance: a soft rise on load (no scroll observer) ---------- */
.ct-pitch, .ct-card { animation: ctRise .9s cubic-bezier(.2, .7, .2, 1) backwards; }
.ct-card { animation-delay: .12s; }
@keyframes ctRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ct-pitch, .ct-card { animation: none; }
}