/* Investor Summit banner styles.
   Shared by banners/index.html and banners/cityam.html so a restyle lands on
   both sets at once. The standalone HTML5 downloads inline this file's text,
   read from the <style id="banner-css"> element the pages build from it.
   Co-brand-only rules live in cityam.html, not here. */
  /* ---------- banner chrome (shared with standalone HTML5 downloads) ---------- */
  .banner {
    position: relative; overflow: hidden;
    background:
      /* amber atmosphere glow, upper-right */
      radial-gradient(ellipse 55% 130% at 88% 8%, rgba(244,162,97,0.20) 0%, transparent 62%),
      /* constellation — sparse, behind content */
      radial-gradient(1.5px 1.5px at 17% 28%, rgba(255,255,255,0.85), transparent),
      radial-gradient(1px 1px at 63% 20%, rgba(168,218,220,0.75), transparent),
      radial-gradient(1.5px 1.5px at 82% 58%, rgba(255,255,255,0.60), transparent),
      radial-gradient(1px 1px at 39% 74%, rgba(244,162,97,0.70), transparent),
      radial-gradient(1px 1px at 92% 86%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1px 1px at 8% 66%, rgba(255,255,255,0.45), transparent),
      /* existing depth radials */
      radial-gradient(ellipse 90% 90% at 15% 0%, rgba(19,64,116,0.85) 0%, transparent 60%),
      radial-gradient(ellipse 70% 80% at 95% 100%, rgba(42,111,151,0.5) 0%, transparent 55%),
      #0A2342;
    color: #fff; display: flex; flex-shrink: 0;
    font-family: 'Onest', system-ui, sans-serif;
  }
  .banner .logo { display: block; }
  .banner .cta {
    background: #E63946; color: #fff; font-weight: 700; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(230,57,70,0.35); letter-spacing: 0.1px;
  }
  .banner .date { color: #A8DADC; font-weight: 500; }
  .banner .date b { color: #F4A261; font-weight: 600; }
  .headline { font-weight: 800; letter-spacing: -0.5px; line-height: 1.16; color: #fff; }
  .headline .amber { color: #F4A261; }
  .cycle { position: relative; }
  .cycle .msg.a { display: flex; flex-direction: column; justify-content: center; height: 100%; }
  .cycle .msg.b { position: absolute; inset: 0; opacity: 0; display: flex; flex-direction: column; justify-content: center; }
  .animated .cycle .msg.a { animation: msgA 8s ease-in-out infinite; }
  .animated .cycle .msg.b { animation: msgB 8s ease-in-out infinite; }
  @keyframes msgA { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes msgB { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .animated .cycle .msg.a, .animated .cycle .msg.b { animation: none; }
  }

  .b-728x90 { width: 728px; height: 90px; align-items: center; padding: 0 22px; gap: 22px; }
  .b-728x90 .logo { height: 28px; }
  .b-728x90 .cycle { flex: 1; height: 100%; }
  .b-728x90 .headline { font-size: 19px; }
  .b-728x90 .date { font-size: 12.5px; margin-top: 4px; }
  .b-728x90 .cta { font-size: 13.5px; padding: 9px 18px; }

  .b-970x250 { width: 970px; height: 250px; align-items: center; padding: 0 48px; gap: 48px; }
  .b-970x250::after, .b-300x600::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, #F4A261 0%, #E63946 100%); }
  .b-970x250 .logo { height: 40px; }
  .b-970x250 .cycle { flex: 1; height: 100%; }
  .b-970x250 .headline { font-size: 32px; }
  .b-970x250 .date { font-size: 17px; margin-top: 12px; }
  .b-970x250 .cta { font-size: 16px; padding: 13px 26px; }

  .b-300x250 { width: 300px; height: 250px; flex-direction: column; align-items: center; text-align: center; padding: 20px 18px 16px; justify-content: space-between; }
  .b-300x250 .logo { height: 22px; }
  .b-300x250 .cycle { flex: 1; width: 100%; }
  .b-300x250 .headline { font-size: 19px; }
  .b-300x250 .date { font-size: 12px; margin-top: 7px; line-height: 1.45; }
  .b-300x250 .cta { font-size: 13px; padding: 9px 20px; }

  .b-300x600 { width: 300px; height: 600px; flex-direction: column; align-items: center; text-align: center; padding: 34px 24px 30px; justify-content: space-between; }
  .b-300x600 .logo { height: 27px; }
  .b-300x600 .cycle { flex: 1; width: 100%; }
  .b-300x600 .headline { font-size: 25px; }
  .b-300x600 .date { font-size: 13.5px; margin-top: 14px; line-height: 1.55; }
  .b-300x600 .cta { font-size: 14.5px; padding: 12px 26px; }

  .b-160x600 { width: 160px; height: 600px; flex-direction: column; align-items: center; text-align: center; padding: 26px 15px 24px; justify-content: space-between; }
  .b-160x600 .logo { height: 20px; }
  .b-160x600 .cycle { flex: 1; width: 100%; }
  .b-160x600 .headline { font-size: 16.5px; }
  .b-160x600 .date { font-size: 10.5px; margin-top: 11px; line-height: 1.55; }
  .b-160x600 .cta { font-size: 11.5px; padding: 9px 14px; }

  /* Email header. Not an IAB size: 600px is the standard email body width,
     so this drops straight into a 600px template at 1x. */
  .b-600x200 { width: 600px; height: 200px; align-items: center; padding: 0 32px; gap: 28px; }
  .b-600x200::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #F4A261 0%, #F4A261 50%, #E63946 50%, #E63946 100%); }
  .b-600x200 .logo { height: 30px; }
  .b-600x200 .cycle { flex: 1; height: 100%; }
  .b-600x200 .headline { font-size: 23px; }
  .b-600x200 .headline .amber { white-space: nowrap; }
  .b-600x200 .date { font-size: 13.5px; margin-top: 8px; }
  .b-600x200 .cta { font-size: 14px; padding: 11px 22px; }

  .b-320x50 { width: 320px; height: 50px; align-items: center; padding: 0 10px; gap: 10px; }
  .b-320x50 .logo { height: 15px; }
  .b-320x50 .cycle { flex: 1; height: 100%; }
  .b-320x50 .headline { font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1.15; }
  .b-320x50 .date { font-size: 10px; margin-top: 0; white-space: nowrap; }
  .b-320x50 .cta { font-size: 9.5px; font-weight: 600; padding: 4px 8px; border-radius: 4px; }