/* The sponsorship notice, shown once per page load on every public document.
 *
 * Its own file rather than inline: it is linked by eleven separate documents that each carry their
 * own stylesheet, and one definition beats eleven copies. Everything here is namespaced under
 * .promo- so it cannot collide with whichever stylesheet the host page brought.
 */
.promo-wrap{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px 14px;
  background:rgba(4,4,7,.82);overflow:auto;-webkit-overflow-scrolling:touch}
.promo-card{width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  background:#121316;border:1px solid #2C2F36;border-top:3px solid #F5C518;border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#E9EAEE;
  animation:promo-rise .22s ease}
@keyframes promo-rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.promo-card{animation:none}}

.promo-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 12px;border-bottom:1px solid #2C2F36}
.promo-eyebrow{font:700 10px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#F5C518;margin:0 0 4px}
.promo-title{margin:0;font-size:21px;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.promo-x{margin-left:auto;flex:0 0 auto;background:none;border:1px solid #2C2F36;color:#8C9099;
  width:30px;height:30px;border-radius:2px;font-size:17px;line-height:1;cursor:pointer}
.promo-x:hover{color:#E9EAEE;border-color:#5E636F}

/* The body scrolls, not the overlay, so the heading and the buttons stay put on a short screen. */
.promo-body{padding:16px 20px 20px;overflow-y:auto;overscroll-behavior:contain}
.promo-body p{margin:0 0 12px}
.promo-lead{color:#E9EAEE}
.promo-sub{color:#9498A3;font-size:13.5px}
.promo-list{list-style:none;margin:0 0 14px;padding:0}
.promo-list li{position:relative;padding:0 0 0 20px;margin-bottom:9px;color:#C9CCD3;font-size:14px}
.promo-list li:last-child{margin-bottom:0}
.promo-list li:before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:#F5C518}
.promo-close-note{margin:14px 0 0;padding-top:12px;border-top:1px solid #2C2F36;color:#7E828C;font-size:13px}

.promo-card :focus-visible{outline:2px solid #F5C518;outline-offset:2px}

@media(max-width:560px){
  .promo-head{padding:15px 16px 11px}
  .promo-title{font-size:19px}
  .promo-body{padding:14px 16px 16px}
}