/* spamcipher.com/advanced-deliverability: only what the homepage design (hp.css) does not already have. */
.ad-card .hp-ticks { margin-bottom: 0; }
.ad-card-text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--hp-text-2); }
.hp-hero .hp-win-body .hp-mock-row { gap: 12px; }
.ad-arrow { flex: none; width: 16px; height: 16px; color: #9A968E; display: grid; place-items: center; }
.ad-arrow svg { width: 16px; height: 16px; }

/* Hero: three facts under the buttons */
.ad-proof { list-style: none; margin: 34px auto 0; padding: 0; max-width: 860px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--hp-line); border-radius: 14px; background: #fff; overflow: hidden; }
.ad-proof li { padding: 16px 18px; text-align: left; display: grid; gap: 4px; }
.ad-proof li + li { border-left: 1px solid var(--hp-line); }
.ad-proof b { font-family: var(--hp-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: var(--hp-text); }
.ad-proof span { font-size: 0.86rem; line-height: 1.45; color: var(--hp-text-2); }

/* Sticky section bar */
.ad-secnav { position: sticky; top: 70px; z-index: 40; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); }
.ad-secnav-inner { display: flex; gap: 6px; justify-content: center; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.ad-secnav-inner::-webkit-scrollbar { display: none; }
.ad-secnav a { flex: none; padding: 7px 14px; border-radius: 999px; font-family: var(--ff-display); font-weight: 600; font-size: 0.86rem; color: var(--hp-text-2); text-decoration: none; transition: background .2s, color .2s; }
.ad-secnav a:hover { color: var(--hp-text); background: var(--hp-cream); }
.ad-secnav a.on { color: #fff; background: var(--hp-ink); }
section[id] { scroll-margin-top: 130px; }

/* The machinery, by stage */
.ad-stages { display: grid; gap: 40px; }
.ad-stage-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--ff-display); font-weight: 700; font-size: 1.02rem; color: var(--hp-text); }
.ad-stage-title span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hp-coral); color: #fff; font-size: 0.8rem; }
.ad-stage-title::after { content: ""; flex: 1; height: 1px; background: var(--hp-line); }
.ad-stage-grid { display: grid; gap: 16px; }
.ad-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ad-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-stage-grid .hp-ticks li { font-size: 0.9rem; }

/* How it acts: signals in, one decision, moves out */
.ad-wire { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; margin: 0 0 44px; }
.ad-wire-col { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ad-wire-col.out { justify-content: flex-start; }
.ad-wire-col li { font-family: var(--ff-display); font-weight: 600; font-size: 0.82rem; padding: 7px 11px; border-radius: 8px; background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.95); color: var(--hp-text); }
.ad-wire-col.out li { background: var(--hp-ink); border-color: var(--hp-ink); color: #fff; }
.ad-hub { position: relative; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 22px; background: #fff; border: 2px solid var(--hp-coral); box-shadow: 0 24px 50px -28px rgba(255, 92, 53, 0.6); }
.ad-hub span { font-family: var(--hp-serif); font-weight: 500; font-size: 1.15rem; line-height: 1.2; color: var(--hp-text); }
.ad-hub::before, .ad-hub::after { content: ""; position: absolute; top: 50%; width: 28px; height: 2px; background: var(--hp-coral); }
.ad-hub::before { right: 100%; } .ad-hub::after { left: 100%; }

.ad-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ad-group { padding: 22px 24px 8px; border-radius: 16px; background: #fff; border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 18px 40px -30px rgba(31,31,31,0.4); }
.ad-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ad-group-head h3 { margin: 0; font-family: var(--ff-display); font-weight: 700; font-size: 1.02rem; color: var(--hp-text); }
.ad-acts { list-style: none; margin: 0; padding: 0; }
.ad-act { padding: 14px 0; border-top: 1px solid #F0EDE7; }
.ad-act:first-child { border-top: none; }
.ad-act p { margin: 0; }
.ad-act-when { display: flex; align-items: center; gap: 10px; font-family: var(--ff-display); font-weight: 700; font-size: 0.95rem; line-height: 1.35; color: var(--hp-text); }
.ad-act-then { margin-top: 5px !important; padding-left: 20px; font-size: 0.92rem; line-height: 1.6; color: var(--hp-text-2); }
.ad-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.ad-dot--hot { background: var(--hp-coral); box-shadow: 0 0 0 4px #FFE7DE; }
.ad-dot--warn { background: #F59E0B; box-shadow: 0 0 0 4px #FEF3C7; }
.ad-dot--ok { background: #10B981; box-shadow: 0 0 0 4px #DDF5EA; }
.ad-recover { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 18px 22px; border-radius: 16px; background: #F2FBF6; border: 1px solid #CDEEDD; }
.ad-recover p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: #2F4A3E; }
.ad-recover b { color: #0A5A40; font-family: var(--ff-display); }
.ad-recover-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #DDF5EA; color: #0A7B55; }
.ad-recover-ico svg { width: 18px; height: 18px; }

/* Compared: the SpamCipher column carries the colour */
.ad-compare { display: grid; gap: 8px; max-width: 1040px; margin: 0 auto; }
.ad-compare-row { display: grid; grid-template-columns: 0.85fr 1fr 1.25fr; gap: 0; align-items: stretch; border-radius: 12px; border: 1px solid var(--hp-line); background: #fff; font-size: 0.93rem; line-height: 1.55; color: var(--hp-text-2); overflow: hidden; }
.ad-compare-row > * { padding: 16px 20px; }
.ad-compare-row b { font-family: var(--ff-display); font-weight: 700; color: var(--hp-text); }
.ad-compare-row .them { color: #6B7076; }
.ad-compare-row .us { display: flex; gap: 10px; color: var(--hp-text); background: #FFF7F3; border-left: 1px solid #F7DCCF; }
.ad-compare-row .us svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--hp-coral); }
.ad-compare-row.head { background: transparent; border: none; font: 600 0.72rem/1.3 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: #9A968E; }
.ad-compare-row.head > * { padding-top: 0; padding-bottom: 6px; }
.ad-compare-row.head .us { background: transparent; border-left: none; color: var(--hp-coral-text); }
.ad-note { max-width: 1040px; margin: 16px auto 0; font-size: 0.82rem; line-height: 1.6; color: var(--hp-text-2); }

/* Results: five cards, the last two centred */
.ad-results { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ad-result { flex: 0 1 calc((100% - 32px) / 3); }

.ad-identity { margin: -14px 0 30px; max-width: 60ch; font-size: 1.04rem; line-height: 1.7; color: rgba(255,255,255,0.78); }

@media (max-width: 1100px) { .ad-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ad-proof { grid-template-columns: 1fr; }
  .ad-proof li + li { border-left: none; border-top: 1px solid var(--hp-line); }
  .ad-secnav { top: 56px; }
  .ad-secnav-inner { justify-content: flex-start; }
  .ad-n4, .ad-n2, .ad-groups { grid-template-columns: 1fr; }
  .ad-wire { grid-template-columns: 1fr; gap: 18px; }
  .ad-wire-col, .ad-wire-col.out { justify-content: center; }
  .ad-hub { margin: 0 auto; width: 140px; height: 140px; }
  .ad-hub::before, .ad-hub::after { display: none; }
  .ad-compare-row { grid-template-columns: 1fr; }
  .ad-compare-row > * { padding: 12px 16px; }
  .ad-compare-row .us { border-left: none; border-top: 1px solid #F7DCCF; }
  .ad-compare-row.head { display: none; }
  .ad-compare-row .them::before { content: "Typical platform: "; font-weight: 600; color: var(--hp-text); }
  .ad-result { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .hp-hero .hp-win-body .hp-mock-row { flex-wrap: wrap; row-gap: 6px; }
  .hp-hero .hp-win-body .hp-mock-txt { white-space: normal; flex-basis: 100%; }
  .hp-hero .hp-win-body .ad-arrow { display: none; }
}