/* ==========================================================================
   EAM Advertising — blog post layer
   Loads after styles/eam-site.css on every blog post. Everything new for
   posts lives here under the bp- prefix; eam-site.css is not changed.
   ========================================================================== */

/* ---------- Article header (replaces the hub hero on posts) ---------- */
.bp-head{position:relative;isolation:isolate;overflow:hidden;background:#f6f6fd;border-bottom:1px solid #e6e7f4}
/* the post's photo, barely visible: grayscale, low opacity, faded out behind the headline */
.bp-head__bg{position:absolute;inset:0;z-index:-1;background-position:center 45%;background-size:cover;background-repeat:no-repeat;opacity:.09;filter:grayscale(1) contrast(1.1);-webkit-mask-image:linear-gradient(90deg,#0000 0,#0006 35%,#000 75%);mask-image:linear-gradient(90deg,#0000 0,#0006 35%,#000 75%);pointer-events:none}
.bp-post{--bp-wrap:1176px}
.bp-head__inner{width:min(var(--bp-wrap),calc(100% - var(--gutter) * 2))}
/* the site renders sections below the hero at 80% zoom on desktop; the article reads at full size */
#main>section.bp-article-section:not(#top){zoom:1}
#main>section.bp-article-section:not(#top)>.bp-layout.container{width:min(var(--bp-wrap),calc(100% - var(--gutter) * 2));max-width:none}
.bp-head__inner{padding:30px 0 42px}
.bp-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:12px;line-height:1.4;color:#6b6a80}
.bp-crumbs li{display:inline-flex;align-items:center;min-width:0}
.bp-crumbs li+li::before{content:"/";margin:0 8px;color:#c3c5e0}
.bp-crumbs a{color:#6b6a80;font-weight:500;text-decoration:none}
.bp-crumbs a:hover,.bp-crumbs a:focus-visible{color:#4a4cc0;text-decoration:underline;text-underline-offset:3px}
.bp-crumbs li[aria-current=page]{max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-head__cat{margin:26px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5658c9}
.bp-head__title{margin:12px 0 0;max-width:27ch;font-size:clamp(32px,3.5vw,50px);font-weight:600;line-height:1.08;letter-spacing:-.045em;color:#38344c;text-wrap:balance}
.bp-head__claim{color:#38344c}
.bp-head__contrast{color:#7579ea}
.bp-head__summary{margin:18px 0 0;max-width:62ch;font-size:18px;line-height:1.6;color:#55546b;text-wrap:pretty}
.bp-head__meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:22px 0 0;font-size:13.5px;color:#6b6a80}
.bp-head__meta>span{display:inline-flex;align-items:center;white-space:nowrap}
.bp-head__meta>span+span::before{content:"";width:4px;height:4px;margin-right:20px;border-radius:50%;background:#c3c5e0}
.bp-head__meta a{color:#38344c;font-weight:600;text-decoration:none}
.bp-head__meta a:hover{color:#4a4cc0;text-decoration:underline;text-underline-offset:3px}

/* ---------- Article section and two-column layout ---------- */
.bp-article-section{padding-block:48px 84px;background:#fff}
.bp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(40px,5vw,72px);align-items:start}
.bp-article{min-width:0}

/* ---------- Key points ---------- */
.bp-keypoints{margin:0 0 40px;padding:22px 26px 20px;max-width:none;background:#f6f6fd;border-color:#e6e7f4;border-left-color:var(--blue)}
.bp-keypoints__label{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.bp-keypoints ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.bp-keypoints li{position:relative;padding-left:22px;font-size:16px;line-height:1.62;color:var(--ink)}
.bp-keypoints li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--blue)}

/* ---------- Article typography ---------- */
.bp-section+.bp-section,.bp-cta--inline+.bp-section{margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.bp-section h2{margin:0 0 18px;font-size:clamp(24px,2.3vw,31px);line-height:1.18;letter-spacing:-.035em;font-weight:600;color:var(--ink);text-wrap:balance}
.bp-section h3{margin:26px 0 10px;font-size:18px;font-weight:650;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.bp-section p{margin:0 0 18px;font-size:17px;line-height:1.75;color:var(--body)}
.bp-section p:last-child{margin-bottom:0}
.bp-section p strong{color:var(--ink);font-weight:650}
.bp-section a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bp-section a:hover{color:var(--blue-hover)}
.bp-section ul,.bp-section ol{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:10px}
.bp-section ol{counter-reset:bp}
.bp-section li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.7;color:var(--body)}
.bp-section ul li::before{content:"";position:absolute;left:4px;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--teal)}
.bp-section ol li{counter-increment:bp}
.bp-section ol li::before{content:counter(bp) ".";position:absolute;left:0;top:0;font-weight:650;color:var(--teal)}
.bp-section li strong{color:var(--ink);font-weight:650}
.bp-section li p{margin:0}

/* ---------- Inline images in legacy posts ---------- */
.bp-section img{display:block;max-width:100%;height:auto;margin:6px 0 22px;border-radius:12px}
.bp-lead h2{display:none}

/* ---------- Tables (reuses .table-wrap / .data-table from eam-site.css) ---------- */
.bp-section .table-wrap{margin:6px 0 24px}
.bp-section .data-table{min-width:540px}
.bp-section .data-table thead th{white-space:nowrap}
.bp-section .data-table tbody th{width:28%}
.bp-section .data-table td,.bp-section .data-table tbody th{font-size:14.5px}

/* ---------- "How EAM Advertising handles it" ---------- */
.bp-section.bp-eam{margin-top:48px;padding:28px 30px 26px;background:#f6f6fd;border:1px solid #e6e7f4;border-left:3px solid var(--blue);border-radius:0 14px 14px 0}
.bp-eam h2{font-size:clamp(21px,1.9vw,26px);margin-bottom:12px}
.bp-eam p{font-size:16px;line-height:1.7}

/* ---------- End of article: byline, related reading ---------- */
.bp-article .byline{margin-top:44px}
.bp-related{margin-top:24px;padding:20px 24px;border:1px solid var(--line);border-radius:12px}
.bp-related li:first-child{border-top:0;padding-top:0}
.bp-related li{padding:10px 0}

/* ---------- Kit card ---------- */
.bp-aside{position:sticky;top:calc(var(--hdr-h,72px) + 24px);min-width:0}
.bp-cta{position:relative;isolation:isolate;overflow:hidden;padding:28px 26px 24px;border-radius:18px;color:#fff;
  background:radial-gradient(420px 220px at 100% 0,#8f93ff59,transparent 70%),radial-gradient(380px 260px at 0 100%,#2555f566,transparent 70%),linear-gradient(150deg,#2c2a86 0,#3a3fc0 58%,#3b47d6 100%);
  box-shadow:0 24px 56px #2c2a8647,0 2px 6px #2c2a8626}
.bp-cta::before{content:"";position:absolute;z-index:-1;right:-18px;top:-18px;width:132px;height:96px;background-image:radial-gradient(#a3efda 1.4px,transparent 1.6px);background-size:13px 13px;opacity:.45;pointer-events:none}
.bp-cta__kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a3efda}
.bp-cta__title{margin:10px 0 0;font-size:25px;font-weight:600;line-height:1.15;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.bp-cta__text{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#dfe2ff}
.bp-cta__points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.bp-cta__points li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:#fff}
.bp-cta__points .icon{flex:0 0 18px;width:18px;height:18px;padding:3px;border-radius:50%;background:#a3efda;color:#22206b;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* form inside the card */
.bp-cta .lp-form{margin-top:20px;max-width:none}
.bp-cta .email-label{color:#fff;font-size:12px;margin-bottom:7px}
.bp-cta .form-row{flex-direction:column;gap:10px}
.bp-cta .email-wrap{width:100%}
.bp-cta .email-wrap input{height:52px;border-color:#fff;border-radius:10px;font-size:15px}
.bp-cta .email-wrap input:focus{outline:none;border-color:#a3efda;box-shadow:0 0 0 3px #a3efda66}
.bp-cta .submit-button{width:100%;min-height:52px;gap:10px;border-radius:10px;background:#a3efda;border-color:#a3efda;color:#1c1a5e!important;font-size:15px;font-weight:700;box-shadow:0 10px 24px #0b0a4040}
.bp-cta .submit-button:hover{background:#bdf5e6;border-color:#bdf5e6;transform:translateY(-1px)}
.bp-cta .submit-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bp-cta .submit-button .icon{color:#1c1a5e}
.bp-cta .form-note{margin-top:9px;font-size:12px;line-height:1.5;color:#c9cdf7}
.bp-cta .form-status{color:#fff}
.bp-cta .form-success{padding:18px 18px 18px 58px;background:#ffffff1a;border-color:#ffffff40;color:#fff}
.bp-cta .form-success h3{font-size:18px;color:#fff}
.bp-cta .form-success p{margin-top:6px;font-size:14px;line-height:1.55;color:#dfe2ff}
.bp-cta .form-success .text-link{margin-top:10px;color:#a3efda}
.bp-cta .success-icon{left:18px;top:19px;background:#a3efda;color:#1c1a5e}

/* secondary actions */
.bp-cta__alt{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;font-size:13.5px}
.bp-cta__alt a{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:#ffffff59;text-underline-offset:4px}
.bp-cta__alt a:hover{text-decoration-color:#a3efda}
.bp-cta__alt .icon{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:#a3efda}

/* proof */
.bp-cta__proof{margin-top:20px;padding-top:16px;border-top:1px solid #ffffff2e}
.bp-cta__proof-label{margin:0 0 10px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#c9cdf7}
.bp-cta__logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:14px}
.bp-cta__logo{display:flex;align-items:center;justify-content:center}
.bp-cta__logo img{display:block;width:auto;height:auto;max-width:100%;max-height:17px;filter:brightness(0) invert(1);opacity:.85}
.bp-cta__logo--amd img{max-height:13px}

/* the in-article card shows on smaller screens only */
.bp-cta--inline{display:none}

/* ---------- Review flags (remove before publishing) ---------- */
.bp-flag{display:inline;padding:1px 6px;border-radius:4px;background:#fff3b0;color:#5a4a00;font-size:.92em;font-weight:600}

/* ---------- Sources and FAQ on posts ---------- */
.bp-post .sources ol{max-width:none}
.bp-post .sources li a{word-break:break-word}
.bp-post .faq-intro>p.bp-faq__note{margin-top:18px;font-size:15px;line-height:1.65;color:var(--body);max-width:40ch}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .bp-layout{grid-template-columns:minmax(0,1fr) 310px;gap:44px}
}
@media (max-width:980px){
  .bp-layout{grid-template-columns:minmax(0,1fr)}
  .bp-aside{display:none}
  .bp-article{max-width:none}
  .bp-cta--inline{display:block;margin-top:40px}
  .bp-cta--inline+.bp-section{border-top:0;padding-top:0}
}
@media (max-width:640px){
  .bp-head__inner{padding:20px 0 30px}
  .bp-crumbs li[aria-current=page]{max-width:22ch}
  .bp-head__cat{margin-top:18px}
  .bp-head__title{font-size:31px;max-width:none}
  .bp-head__summary{font-size:16.5px}
  .bp-head__meta{font-size:13px;gap:6px 14px}
  .bp-head__meta>span+span::before{margin-right:14px}
  .bp-article-section{padding-block:32px 56px}
  .bp-keypoints{padding:18px 18px 16px;margin-bottom:30px}
  .bp-keypoints li{font-size:15px}
  .bp-section h2{font-size:24px}
  .bp-section p{font-size:16px}
  .bp-section li{font-size:15.5px}
  .bp-section+.bp-section{margin-top:32px;padding-top:30px}
  .bp-section.bp-eam{padding:22px 20px 20px}
  .bp-cta{padding:24px 20px 20px;border-radius:16px}
  .bp-cta__title{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .bp-cta .submit-button:hover{transform:none}
}
@media print{
  .bp-head__bg,.bp-aside,.bp-cta,.bp-flag{display:none}
  .bp-layout{grid-template-columns:1fr}
}