.elementor-5386 .elementor-element.elementor-element-993a701{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS *//* =========================================================
   2027 AEP OBJECTION & CONVERSATION PLAYBOOK
   PREMIUM UI ENHANCEMENT CSS
   Paste AFTER the existing page CSS
   ========================================================= */

/* ---------- GLOBAL PAGE POLISH ---------- */

:root {
  --aep-navy: #062b53;
  --aep-navy-dark: #041d39;
  --aep-navy-light: #0c477f;
  --aep-blue: #1768a6;
  --aep-green: #5fa92f;
  --aep-green-dark: #3f7f20;
  --aep-gold: #c99c35;
  --aep-bg: #f3f6f9;
  --aep-card: #ffffff;
  --aep-text: #172433;
  --aep-muted: #647386;
  --aep-line: #d9e2ea;
  --aep-soft-blue: #f1f7fb;
  --aep-soft-green: #f3f9ef;
  --aep-soft-gold: #fff8e8;
  --aep-shadow: 0 12px 34px rgba(6, 43, 83, 0.08);
  --aep-shadow-hover: 0 20px 48px rgba(6, 43, 83, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top right, rgba(23, 104, 166, 0.05), transparent 30%),
    #f3f6f9 !important;
  color: var(--aep-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---------- HERO ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 58px !important;
  padding-bottom: 48px !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.10), transparent 22%),
    radial-gradient(circle at 65% 90%, rgba(95,169,47,.12), transparent 28%),
    linear-gradient(135deg, #041f3d 0%, #06315d 48%, #0a477e 100%) !important;
  border-bottom: 5px solid var(--aep-green) !important;
}

.hero::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -100px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  box-shadow:
    0 0 0 45px rgba(255,255,255,.025),
    0 0 0 90px rgba(255,255,255,.018);
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 2;
}

.hero .eyebrow,
.hero .kicker {
  color: #bde899 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

.hero h1 {
  color: #ffffff !important;
  font-weight: 850 !important;
  letter-spacing: -0.045em !important;
  line-height: .98 !important;
  text-shadow: 0 2px 15px rgba(0,0,0,.12);
}

.hero p {
  color: #dae8f4 !important;
  font-size: 16px !important;
  max-width: 890px !important;
}

.stats {
  gap: 9px !important;
}

.stat {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(5px);
  border-radius: 12px !important;
  color: #edf5fb !important;
}

.stat b {
  color: #ffffff !important;
}


/* ---------- STICKY SEARCH ---------- */

.searchshell,
.sticky {
  background: rgba(247, 249, 251, .94) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow: 0 5px 20px rgba(6,43,83,.06);
  border-bottom: 1px solid rgba(189,204,217,.8) !important;
}

.searchrow,
.searchbar {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.searchrow input,
.searchWrap input {
  height: 58px !important;
  background: #ffffff !important;
  color: #142337 !important;
  border: 2px solid #cbd8e4 !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-shadow: 0 7px 22px rgba(6,43,83,.06) !important;
  transition: all .2s ease !important;
}

.searchrow input::placeholder,
.searchWrap input::placeholder {
  color: #8996a4 !important;
  opacity: 1 !important;
}

.searchrow input:focus,
.searchWrap input:focus {
  border-color: var(--aep-blue) !important;
  box-shadow:
    0 0 0 4px rgba(23,104,166,.10),
    0 8px 24px rgba(6,43,83,.08) !important;
}

button.primary {
  min-height: 54px;
  background: linear-gradient(135deg, #07345f, #0b477d) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(6,43,83,.14);
  transition: transform .18s ease, box-shadow .18s ease !important;
}

button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(6,43,83,.20);
}

button.secondary {
  min-height: 54px;
  background: #ffffff !important;
  color: var(--aep-navy) !important;
  border: 1px solid #cfd9e3 !important;
}


/* ---------- MAIN CONTENT ---------- */

main {
  padding-top: 28px !important;
}

.panel {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid var(--aep-line) !important;
  border-radius: 19px !important;
  box-shadow: var(--aep-shadow) !important;
}

.panel h2,
.panel h3,
.resultHeader h2,
.heading h2 {
  color: var(--aep-navy) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  font-weight: 850 !important;
}

.panel p {
  color: #5e6e80 !important;
}


/* ---------- FRAMEWORK ---------- */

.framework {
  gap: 8px !important;
}

.step,
.fw {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%) !important;
  border: 1px solid #d9e4ec !important;
  border-radius: 12px !important;
  color: var(--aep-navy) !important;
  padding: 12px 7px !important;
  box-shadow: 0 4px 12px rgba(6,43,83,.04);
}

.step b,
.fw b {
  color: var(--aep-green-dark) !important;
  font-size: 20px !important;
}


/* ---------- AEP DATE PANEL ---------- */

.aep,
.aepBox {
  background:
    radial-gradient(circle at right top, rgba(95,169,47,.10), transparent 35%),
    linear-gradient(135deg, #f8fcf4, #eef8e8) !important;
  border: 1px solid #c9dfba !important;
}

.aep strong,
.aepBox strong {
  color: var(--aep-navy) !important;
  font-weight: 900 !important;
  letter-spacing: -.02em;
}

.aep span,
.aepBox span {
  color: var(--aep-green-dark) !important;
}


/* ---------- CATEGORY FILTERS ---------- */

.filters {
  padding: 7px 2px 17px !important;
  gap: 8px !important;
}

.chip {
  background: #ffffff !important;
  color: #21405d !important;
  border: 1px solid #d4dee7 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 10px 14px !important;
  box-shadow: 0 3px 10px rgba(6,43,83,.035);
  transition: all .17s ease !important;
}

.chip:hover {
  border-color: #91abc1 !important;
  background: #f6f9fb !important;
  transform: translateY(-1px);
}

.chip.active {
  background: linear-gradient(135deg, #062b53, #0b477d) !important;
  color: #ffffff !important;
  border-color: #062b53 !important;
  box-shadow: 0 6px 14px rgba(6,43,83,.16);
}


/* ---------- RESULTS HEADING ---------- */

.heading,
.resultHeader {
  padding: 7px 2px 2px;
}

.heading h2,
.resultHeader h2 {
  font-size: 25px !important;
  color: var(--aep-navy) !important;
  margin-bottom: 3px !important;
}

#count,
.resultCount {
  color: #718093 !important;
  font-weight: 650;
}


/* ---------- OBJECTION CARDS ---------- */

.card {
  position: relative;
  background: #ffffff !important;
  border: 1px solid #dce5ed !important;
  border-radius: 18px !important;
  box-shadow: 0 9px 28px rgba(6,43,83,.065) !important;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease !important;
}

.card:hover {
  transform: translateY(-4px) !important;
  border-color: #c7d6e2 !important;
  box-shadow: var(--aep-shadow-hover) !important;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 23px;
  bottom: 23px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(var(--aep-green), var(--aep-blue));
  opacity: .8;
}

.cardhead,
.cardTop {
  padding: 20px 20px 15px 22px !important;
}

.num {
  background:
    linear-gradient(145deg, #062b53, #0c4a82) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 11px rgba(6,43,83,.16);
  width: 37px !important;
  height: 37px !important;
}

.cat {
  color: var(--aep-green-dark) !important;
  font-weight: 900 !important;
  letter-spacing: .095em !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.quote {
  color: #062b53 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 1.28 !important;
}

.keywords,
.keywordLine {
  color: #8493a3 !important;
  font-size: 11px !important;
  line-height: 1.45;
}


/* ---------- CARD SECTIONS ---------- */

.body,
.cardBody {
  padding: 0 20px 20px 22px !important;
}

.section {
  border-color: #e3e9ef !important;
}

.label,
.sectionTitle {
  color: #6b7b8c !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 900 !important;
  letter-spacing: .095em !important;
}

.section p {
  color: #39495b !important;
}


/* ---------- SAMPLE RESPONSE ---------- */

.talk,
.response {
  position: relative;
  background:
    linear-gradient(135deg, #f2f8fc 0%, #f7fbfd 100%) !important;
  border-left: 4px solid var(--aep-blue) !important;
  border-radius: 10px !important;
  padding: 14px 15px !important;
  box-shadow: inset 0 0 0 1px rgba(23,104,166,.045);
}

.talk::before,
.response::before {
  content: "“";
  position: absolute;
  right: 14px;
  top: -5px;
  font-family: Georgia, serif;
  font-size: 48px;
  color: rgba(23,104,166,.08);
  line-height: 1;
}

.talk .label,
.response .sectionTitle {
  color: var(--aep-blue) !important;
}

.talk p,
.response p {
  color: #153a5a !important;
  font-size: 14px !important;
}


/* ---------- COMPLIANCE WATCH ---------- */

.watch,
.compliance {
  background:
    linear-gradient(135deg, #fff9ec, #fffdf7) !important;
  border-left: 4px solid var(--aep-gold) !important;
  border-radius: 10px !important;
  color: #594716 !important;
  padding: 12px 13px !important;
}

.watch b,
.compliance b {
  color: #72530b !important;
}


/* ---------- COPY BUTTONS ---------- */

.actions {
  gap: 8px !important;
  margin-top: 14px !important;
}

.mini,
.miniBtn {
  min-height: 36px;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid #ced9e3 !important;
  color: var(--aep-navy) !important;
  font-weight: 850 !important;
  border-radius: 9px !important;
  transition: all .17s ease !important;
}

.mini:hover,
.miniBtn:hover {
  background: var(--aep-navy) !important;
  border-color: var(--aep-navy) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}


/* ---------- EMPTY SEARCH STATE ---------- */

.empty,
.noResults {
  background:
    radial-gradient(circle at top, rgba(23,104,166,.05), transparent 40%),
    #ffffff !important;
  border: 1px dashed #aec2d3 !important;
  border-radius: 18px !important;
  padding: 50px 20px !important;
}

.empty h3,
.noResults h3 {
  color: var(--aep-navy) !important;
  font-size: 22px !important;
}


/* ---------- BOTTOM GUIDANCE PANELS ---------- */

.bottom,
.guide {
  margin-top: 30px !important;
}

.bottom .panel,
.guide .panel {
  border-top: 4px solid var(--aep-navy) !important;
}

.bottom .panel:last-child,
.guide .panel:last-child {
  border-top-color: var(--aep-gold) !important;
}

.bottom li,
.guide li,
.bullets {
  color: #455568 !important;
}


/* ---------- SEARCH HIGHLIGHT ---------- */

mark,
.highlight {
  background: #fff0a8 !important;
  color: #182534 !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
  box-shadow: inset 0 -1px 0 rgba(190,145,21,.22);
}


/* ---------- FOOTER ---------- */

footer,
.footer {
  background:
    linear-gradient(135deg, #041a33, #06284b) !important;
  color: #becddd !important;
  border-top: 4px solid var(--green, #5fa92f);
}

footer strong,
.footer strong {
  color: #ffffff !important;
}


/* ---------- WORDPRESS / THEME CONFLICT PROTECTION ---------- */

/* Keeps WordPress themes from turning headings white or invisible */
.hero h1,
.panel h2,
.panel h3,
.card .quote,
.card .cat,
.card .label,
.card .sectionTitle,
.heading h2,
.resultHeader h2 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove theme-generated underlines / weird heading spacing */
.hero h1::before,
.hero h1::after,
.panel h2::before,
.panel h2::after,
.card h2::before,
.card h2::after {
  display: none !important;
}


/* ---------- DESKTOP ---------- */

@media (min-width: 1000px) {
  .cards,
  .grid {
    gap: 18px !important;
  }

  .cardhead,
  .cardTop {
    min-height: 118px;
  }
}


/* ---------- TABLET ---------- */

@media (max-width: 900px) {

  .hero {
    padding-top: 42px !important;
  }

  .topgrid,
  .introGrid,
  .bottom,
  .guide {
    gap: 13px !important;
  }

  .cards,
  .grid {
    gap: 13px !important;
  }

  .searchrow input,
  .searchWrap input {
    min-width: 0;
  }
}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

  .hero {
    padding: 34px 17px 30px !important;
  }

  .hero h1 {
    font-size: 37px !important;
    line-height: 1.02 !important;
  }

  .hero p {
    font-size: 14px !important;
  }

  .stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .stat {
    padding: 9px 10px !important;
  }

  .searchrow,
  .searchbar {
    padding: 10px 13px !important;
    grid-template-columns: 1fr !important;
  }

  .searchrow input,
  .searchWrap input {
    height: 52px !important;
  }

  .searchrow .primary,
  .searchbar .primary {
    width: 100%;
    height: 47px;
  }

  main {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .panel {
    padding: 17px !important;
  }

  .framework {
    grid-template-columns: repeat(5, minmax(78px, 1fr)) !important;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .filters {
    margin-right: -13px;
    padding-right: 13px !important;
  }

  .cardhead,
  .cardTop {
    padding: 17px 15px 13px 18px !important;
  }

  .body,
  .cardBody {
    padding: 0 15px 16px 18px !important;
  }

  .quote {
    font-size: 17px !important;
  }

  .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .mini,
  .miniBtn {
    width: 100%;
  }
}


/* ---------- PRINT / SAVE PDF ---------- */

@media print {

  body {
    background: #ffffff !important;
  }

  .hero {
    background: #062b53 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .card,
  .panel {
    box-shadow: none !important;
    border: 1px solid #cfd8df !important;
  }

  .card:hover {
    transform: none !important;
  }

  .talk,
  .response,
  .watch,
  .compliance,
  .aep,
  .aepBox {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}/* End custom CSS */