/* ============================================================
   DMARCeye Scale vs EasyDMARC – pricing comparison (HubSpot CMS)
   Standalone CSS. Pair with dmarceye-pricing-table.html.
   Same dialed-in styling: gradient DMARCeye header, black text.
   Namespaced .deye-px / #deye-px-root.
   ============================================================ */

#deye-px-root.deye-px {
  --c-card:#fff; --c-ink:#1f2733; --c-muted:#6b7280; --c-line:#ececec;
  --c-accent:#ef4423; --c-own:#ece9fb; --c-own-soft:#f3f1fb;
  --c-zebra:#fbfbfa; --radius:16px;
  box-sizing:border-box!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif!important;
  color:var(--c-ink)!important; display:block!important; max-width:100%!important;
  -webkit-font-smoothing:antialiased;
}
#deye-px-root.deye-px *,
#deye-px-root.deye-px *::before,
#deye-px-root.deye-px *::after { box-sizing:border-box!important; }

#deye-px-root .deye-px__card.deye-px__card {
  background:var(--c-card)!important; border-radius:var(--radius)!important;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06)!important;
  overflow:hidden!important; border:0!important; padding:0!important;
}

#deye-px-root table.deye-px__table.deye-px__table {
  width:100%!important; border-collapse:collapse!important; border-spacing:0!important;
  text-align:left!important; margin:0!important; border:0!important; background:transparent!important;
  table-layout:fixed!important;
}
#deye-px-root table.deye-px__table tr { background:transparent!important; border:0!important; }
#deye-px-root table.deye-px__table caption { display:none!important; }

#deye-px-root table.deye-px__table th,
#deye-px-root table.deye-px__table td {
  padding:22px 30px!important; vertical-align:middle!important; border:0!important;
  border-bottom:1px solid var(--c-line)!important; background:transparent!important;
  font-size:17px!important; line-height:1.45!important; color:var(--c-ink)!important; text-align:left!important;
}
#deye-px-root table.deye-px__table tr:last-child td { border-bottom:0!important; }

#deye-px-root table.deye-px__table th.deye-px__th--feat,
#deye-px-root table.deye-px__table td.deye-px__feat { width:26%!important; }

#deye-px-root table.deye-px__table thead th.deye-px__th {
  font-weight:700!important; letter-spacing:-.01em!important; font-size:18px!important;
  padding-top:24px!important; padding-bottom:24px!important;
  color:var(--c-ink)!important; background:transparent!important;
}

#deye-px-root table.deye-px__table td.deye-px__feat { font-weight:700!important; color:var(--c-ink)!important; }

/* DMARCeye highlighted column: gradient header, soft body ------- */
#deye-px-root table.deye-px__table td.deye-px__col-own { background:var(--c-own)!important; }
#deye-px-root table.deye-px__table thead th.deye-px__col-own {
  background:
    radial-gradient(ellipse 70% 80% at 15% 40%, rgba(255,90,50,.35) 0%, rgba(220,70,40,.12) 40%, transparent 70%),
    radial-gradient(ellipse 75% 85% at 90% 70%, rgba(120,80,220,.45) 0%, rgba(90,60,180,.18) 40%, transparent 70%),
    linear-gradient(135deg, #1a0f2e 0%, #15102a 50%, #1f1438 100%) !important;
  color:#fff!important;
}

#deye-px-root table.deye-px__table td.deye-px__val { color:var(--c-ink)!important; font-weight:400!important; }

/* zebra (own column keeps its tint) ----------------------------- */
#deye-px-root table.deye-px__table tbody tr:nth-child(even) td:not(.deye-px__col-own) { background:var(--c-zebra)!important; }
#deye-px-root table.deye-px__table tbody tr:nth-child(even) td.deye-px__col-own { background:var(--c-own-soft)!important; }

/* ---------- MOBILE < 600px : stacked cards --------------------- */
@media (max-width:599px) {
  #deye-px-root .deye-px__card.deye-px__card { background:transparent!important; box-shadow:none!important; overflow:visible!important; }
  #deye-px-root table.deye-px__table.deye-px__table { display:block!important; table-layout:auto!important; }
  #deye-px-root table.deye-px__table thead { display:none!important; }
  #deye-px-root table.deye-px__table tbody { display:block!important; }
  #deye-px-root table.deye-px__table tr {
    display:block!important; background:var(--c-card)!important; border-radius:var(--radius)!important;
    box-shadow:0 1px 3px rgba(16,24,40,.06)!important; padding:6px 18px 10px!important; margin-bottom:16px!important;
  }
  #deye-px-root table.deye-px__table td {
    display:flex!important; justify-content:space-between!important; align-items:center!important;
    gap:16px!important; padding:13px 0!important; border-bottom:1px solid var(--c-line)!important;
    white-space:normal!important; text-align:right!important; width:auto!important;
  }
  #deye-px-root table.deye-px__table td:last-child { border-bottom:0!important; }
  #deye-px-root table.deye-px__table td::before {
    content:attr(data-label)!important; flex:0 0 42%!important; font-weight:600!important;
    color:var(--c-muted)!important; font-size:13px!important; text-align:left!important;
  }
  #deye-px-root table.deye-px__table td.deye-px__feat {
    display:block!important; font-size:18px!important; padding:14px 0 12px!important; width:auto!important;
    border-bottom:2px solid var(--c-line)!important; text-align:left!important;
  }
  #deye-px-root table.deye-px__table td.deye-px__feat::before { content:none!important; }
  #deye-px-root table.deye-px__table tbody tr:nth-child(even) td.deye-px__col-own,
  #deye-px-root table.deye-px__table td.deye-px__col-own {
    background:var(--c-own)!important; margin:0 -18px!important; padding-left:18px!important; padding-right:18px!important;
  }
}