/* ============================================================
   DM — Features page (Marketing - Features, Ardot 31:2)
   1440x3048 canvas. Coordinates match design exactly.
   ============================================================ */

/* ---------- HERO (centered, contrast deep-teal bg) ---------- */
.feat-hero {
  position: absolute; top: 72px;
  width: 1440px; height: 472px;
  background: linear-gradient(155deg, #10635C 0%, #0E4F4A 55%, #0A3F3B 100%);
}
.feat-hero .badge {
  position: absolute; left: 615px; top: 80px;
  width: 209px; height: 30px; border-radius: 15px;
  background: #FFE3CC;
  display: flex; align-items: center;
}
.feat-hero .badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FA733D; margin-left: 14px; flex: none;
}
.feat-hero .badge .b-txt {
  margin-left: 8px; font-size: 13px; font-weight: 600; color: #C2410C;
}
.feat-hero .h1 {
  position: absolute; left: 260px; top: 134px; width: 920px;
  text-align: center;
  font-size: 52px; font-weight: 800; line-height: 60px; letter-spacing: -1px;
  color: #FFFFFF;
}
.feat-hero .sub {
  position: absolute; left: 340px; top: 284px; width: 760px;
  text-align: center;
  font-size: 18px; font-weight: 400; line-height: 28px; color: #BFDCD7;
}
.feat-hero .cta-row {
  position: absolute; left: 590px; top: 364px; width: 260px; height: 44px;
  display: flex; gap: 14px;
}
.feat-hero .cta-pri {
  width: 117px; height: 44px; border-radius: 12px;
  background: var(--brand-gradient); color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.feat-hero .cta-sec {
  width: 129px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.55); color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- SECTION (shared) ---------- */
.feat-sec { position: absolute; width: 1440px; }
.feat-sec .fs-title {
  position: absolute; left: 120px; top: 72px;
  font-size: 32px; font-weight: 800; letter-spacing: -0.5px; color: #1F2937;
}
.feat-sec .fs-desc {
  position: absolute; left: 120px; top: 143px; width: 640px;
  font-size: 16px; font-weight: 400; color: #6B7280;
}

/* ---------- CARD GRID ---------- */
.feat-grid {
  position: absolute; left: 120px;
  width: 1200px;
  display: grid; grid-template-columns: repeat(3, 386px); gap: 20px;
}
.feat-card {
  position: relative; height: 307px; border-radius: 16px;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.05);
  overflow: hidden;
}
.feat-card .fc-icon { position: absolute; left: 24px; top: 24px; width: 44px; height: 44px; }
.feat-card .fc-title {
  position: absolute; left: 24px; top: 82px;
  font-size: 17px; font-weight: 700; color: #1F2937;
}
.feat-card .fc-desc {
  position: absolute; left: 24px; top: 117px; width: 338px;
  font-size: 14px; font-weight: 400; line-height: 21px; color: #6B7280;
}
.feat-card .fc-example {
  position: absolute; left: 24px; top: 173px; width: 338px; height: 110px;
  border-radius: 12px; background: #F1E3D8;
  display: flex; align-items: center; justify-content: center;
}
.feat-card .fc-example span {
  font-size: 13px; font-weight: 500; color: #B6A99C;
}

/* ---------- ADAPT FEATURE CARD ---------- */
.feat-adapt {
  position: absolute; left: 120px; top: 194px; width: 1200px; height: 284px;
  border-radius: 16px; background: #FFF9F4; overflow: hidden;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.05);
}
.feat-adapt .ad-left { position: absolute; left: 32px; top: 89px; width: 664px; height: 105px; }
.feat-adapt .ad-title { font-size: 20px; font-weight: 700; color: #1F2937; }
.feat-adapt .ad-desc {
  margin-top: 16px; width: 664px;
  font-size: 14px; font-weight: 400; line-height: 21px; color: #6B7280;
}
.feat-adapt .ad-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.feat-adapt .ad-chip {
  height: 28px; padding: 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid #E7D9CC;
  display: flex; align-items: center;
  font-size: 13px; font-weight: 500; color: #374151;
}
.feat-adapt .ad-right {
  position: absolute; left: 728px; top: 32px; width: 440px; height: 220px;
  border-radius: 12px; background: #F1E3D8;
  display: flex; align-items: center; justify-content: center;
}
.feat-adapt .ad-right span { font-size: 13px; font-weight: 500; color: #B6A99C; }

/* ---------- CTA SECTION (purple card, absolute layout w/ spacing) ---------- */
.feat-cta {
  position: absolute; left: 0; top: 2702px;
  width: 1440px; height: 300px;
  background: var(--purple);
  border-radius: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.feat-cta .c-title {
  font-size: 38px; font-weight: 800; letter-spacing: -0.5px; color: #fff;
  text-align: center;
}
.feat-cta .c-sub {
  font-size: 17px; font-weight: 400; color: #FFE3CC;
  text-align: center;
}
.feat-cta .c-btn {
  width: 130px; height: 46px; border-radius: 14px;
  background: var(--brand-gradient); color: #fff; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}

/* ---------- FOOTER (absolute, spaced below CTA) ---------- */
.feat-footer {
  position: absolute; left: 0; top: 3034px;
  width: 1440px; height: 247px;
  background: #FFF9F4;
}
.feat-footer .ft-top { position: absolute; left: 120px; top: 56px; width: 1200px; height: 103px; }
.feat-footer .ft-brand { position: absolute; left: 0; top: 0; width: 300px; }
.feat-footer .ft-brand .logo-row { display: flex; align-items: center; gap: 8px; }
.feat-footer .ft-brand .sq { width: 26px; height: 26px; border-radius: 7px; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.feat-footer .ft-brand .sq img { width: 23px; height: auto; display: block; }
.feat-footer .ft-brand .dm { font-size: 17px; font-weight: 800; color: #1F2937; }
.feat-footer .ft-brand .tag { margin-top: 12px; width: 280px; font-size: 13px; line-height: 1.5; color: #6B7280; }
.feat-footer .ft-cols { position: absolute; left: 840px; top: 0; width: 360px; display: flex; gap: 88px; }
.feat-footer .ft-col .col-title { font-size: 13px; font-weight: 500; color: #9CA3AF; margin-bottom: 12px; }
.feat-footer .ft-col a { display: block; font-size: 14px; color: #4B5563; margin-bottom: 9px; }
.feat-footer .ft-col a:hover { color: var(--brand-orange); }
.feat-footer .ft-bottom { position: absolute; left: 120px; top: 199px; width: 1200px; display: flex; justify-content: space-between; align-items: center; }
.feat-footer .ft-copy { font-size: 13px; color: #9CA3AF; }
.feat-footer .ft-meta { display: flex; gap: 19px; font-size: 13px; color: #6B7280; }
.feat-footer .ft-meta a:hover { color: var(--brand-orange); }