/* Featured banners: shared by /featured and the Offers tab on /account (8 Oct 2026, Vincent:
   "make sure offers page is up to date with the same perks, so when you do one, you also do the other").
   Moved out of featured.html unchanged. The Offers tab clones every a.featured-banner[data-perk] from
   /featured, so a perk banner is edited in ONE place (featured.html) and styled in ONE place (here). */
    .featured-pages {
      font-family: 'Chivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      /* Gradient renders instantly. The Barmat photo is layered on top via
         ::after (lower priority) so it doesn't block first paint, and
         `background-attachment: fixed` is gone — it was the main mobile
         scroll-jank culprit and forced the 1.77MB PNG to be sticky. */
      background: linear-gradient(135deg, #0d0d0d 0%, #1a0f0f 100%);
      padding: 96px 0 80px;
      min-height: 100vh;
      position: relative;
      isolation: isolate;
    }
    .featured-pages::after {
      content: '';
      position: absolute; inset: 0;
      background-image: url('/img-cdn/0929-Barmat_2.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -1;
      pointer-events: none;
      opacity: 0.55;
    }

    .featured-pages::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 0;
      pointer-events: none;
    }

    .featured-pages-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 1;
    }

    .featured-pages-header {
      text-align: center;
      max-width: 960px;
      margin: 0 auto 80px;
      padding: 0;
    }

    .featured-pages-eyebrow {
      display: inline-block;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255, 215, 0, 0.95);
      margin: 0 0 18px;
      padding: 6px 14px;
      background: rgba(255, 153, 0, 0.12);
      border: 1px solid rgba(255, 153, 0, 0.35);
      border-radius: 999px;
    }

    .featured-pages-title {
      font-size: clamp(44px, 6vw, 72px);
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.02;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, #ae1f19 0%, #d64a1a 55%, #FFD700 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      /* Block with fit-content: the gradient stays sized to the text and the
         eyebrow pill cannot share the line now the header is wide. */
      display: block;
      width: fit-content;
    }

    .featured-pages-subtitle {
      font-size: clamp(15px, 1.4vw, 18px);
      color: rgba(255, 255, 255, 0.92);
      max-width: 960px;
      margin: 0 auto 28px;
      line-height: 1.55;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    }

    .featured-pages-divider {
      width: 80px;
      height: 3px;
      margin: 0 auto;
      border-radius: 3px;
      background: linear-gradient(90deg, #ae1f19 0%, #FF9900 100%);
    }

    .premium-login-note { margin: -20px 0 32px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.6); }
    .premium-login-note[hidden] { display: none; }
    .premium-login-note a { color: #f6e27a; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

    .featured-banner {
      position: relative;
      display: block;
      text-decoration: none;
      background: radial-gradient(circle at top left, rgba(174, 31, 25, 0.3), rgba(11, 15, 40, 0.95));
      border-radius: 24px;
      border: 2px solid rgba(255, 153, 0, 0.2);
      padding: 48px;
      margin-bottom: 32px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 40px rgba(174, 31, 25, 0.3);
    }

    .featured-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 153, 0, 0.15), 
        transparent);
      transition: left 0.6s ease;
    }

    .featured-banner:hover {
      transform: translateY(-8px);
      border-color: rgba(255, 153, 0, 0.5);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                  0 0 60px rgba(255, 153, 0, 0.4),
                  inset 0 0 60px rgba(255, 153, 0, 0.1);
    }

    .featured-banner:hover::before {
      left: 100%;
    }

    .featured-banner-content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 220px 1fr 80px;
      gap: 40px;
      align-items: center;
    }

    .featured-banner-image {
      width: 100%;
      max-width: 200px;
      height: auto;
      max-height: 120px;
      object-fit: contain;
      object-position: center;
      display: block;
      margin: 0 auto;
      filter: drop-shadow(0 0 20px rgba(255, 153, 0, 0.4));
      transition: filter 0.3s ease;
    }

    .featured-banner:hover .featured-banner-image {
      filter: drop-shadow(0 0 30px rgba(255, 153, 0, 0.6));
    }

    .featured-banner-badge {
      display: inline-block;
      padding: 6px 14px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(174, 31, 25, 0.3), rgba(255, 153, 0, 0.3));
      border: 1px solid rgba(255, 153, 0, 0.4);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #FF9900;
      margin-bottom: 12px;
    }

    .featured-banner-title {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 700;
      margin: 0 0 12px;
      background: linear-gradient(135deg, #ae1f19 0%, #d64a1a 50%, #FF9900 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .featured-banner:hover .featured-banner-title {
      filter: drop-shadow(0 0 20px rgba(255, 153, 0, 0.6));
    }

    .featured-banner-description {
      font-size: 16px;
      color: #c7cbe8;
      margin: 0 0 20px;
      line-height: 1.6;
    }

    .featured-banner-features {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
    }

    .featured-banner-feature {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 153, 0, 0.1);
      border: 1px solid rgba(255, 153, 0, 0.2);
      font-size: 13px;
      color: #ffcc99;
    }

    .featured-banner-feature::before {
      content: "✓";
      color: #FF9900;
      font-weight: bold;
      font-size: 14px;
    }

    .featured-banner-arrow {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #ae1f19 0%, #d64a1a 50%, #FF9900 100%);
      box-shadow: 0 8px 24px rgba(255, 153, 0, 0.4);
      transition: transform 0.3s ease;
      flex-shrink: 0;
    }

    .featured-banner:hover .featured-banner-arrow {
      box-shadow: 0 12px 32px rgba(255, 153, 0, 0.6);
    }

    .featured-banner-arrow svg {
      width: 28px;
      height: 28px;
      stroke: #ffffff;
      stroke-width: 2.5;
      fill: none;
    }

    /* Scalable Capital Banner - Glass Morphism with Turquoise */
    .featured-banner-scalable {
      background: linear-gradient(135deg, 
        rgba(40, 235, 207, 0.15) 0%, 
        rgba(26, 157, 138, 0.1) 50%, 
        rgba(6, 8, 22, 0.85) 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(40, 235, 207, 0.3);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 40px rgba(40, 235, 207, 0.2),
                  inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .featured-banner-scalable::before {
      background: linear-gradient(90deg, 
        transparent, 
        rgba(40, 235, 207, 0.2), 
        transparent);
    }

    .featured-banner-scalable:hover {
      border-color: rgba(40, 235, 207, 0.6);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                  0 0 60px rgba(40, 235, 207, 0.4),
                  inset 0 0 60px rgba(40, 235, 207, 0.15);
    }

    .featured-banner-scalable .featured-banner-image {
      filter: drop-shadow(0 0 20px rgba(40, 235, 207, 0.4));
    }

    .featured-banner-scalable:hover .featured-banner-image {
      filter: drop-shadow(0 0 30px rgba(40, 235, 207, 0.6));
    }

    .featured-banner-scalable .featured-banner-badge {
      background: linear-gradient(135deg, rgba(26, 157, 138, 0.3), rgba(40, 235, 207, 0.3));
      border: 1px solid rgba(40, 235, 207, 0.4);
      color: #28EBCF;
    }

    .featured-banner-scalable .featured-banner-title {
      background: linear-gradient(135deg, #1a9d8a 0%, #20c4a8 50%, #28EBCF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .featured-banner-scalable:hover .featured-banner-title {
      filter: drop-shadow(0 0 20px rgba(40, 235, 207, 0.6));
    }

    .featured-banner-scalable .featured-banner-feature {
      background: rgba(40, 235, 207, 0.1);
      border: 1px solid rgba(40, 235, 207, 0.2);
      color: #7fffd4;
    }

    .featured-banner-scalable .featured-banner-feature::before {
      color: #28EBCF;
    }

    .featured-banner-scalable .featured-banner-arrow {
      background: linear-gradient(135deg, #1a9d8a 0%, #20c4a8 50%, #28EBCF 100%);
      box-shadow: 0 8px 24px rgba(40, 235, 207, 0.4);
    }

    .featured-banner-scalable:hover .featured-banner-arrow {
      box-shadow: 0 12px 32px rgba(40, 235, 207, 0.6);
    }

    /* Trading Interview Banner - Dark Blue & White Theme */
    .featured-banner-trading-interview {
      background: radial-gradient(circle at top left, rgba(26, 47, 83, 0.2), rgba(26, 47, 83, 0.3), rgba(10, 21, 32, 0.95));
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(127, 163, 212, 0.4);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 40px rgba(127, 163, 212, 0.2),
                  inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .featured-banner-trading-interview::before {
      background: linear-gradient(90deg, 
        transparent, 
        rgba(127, 163, 212, 0.15), 
        transparent);
    }

    .featured-banner-trading-interview:hover {
      border-color: rgba(127, 163, 212, 0.6);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                  0 0 60px rgba(127, 163, 212, 0.3),
                  inset 0 0 60px rgba(127, 163, 212, 0.1);
    }

    .featured-banner-trading-interview .featured-banner-image {
      filter: drop-shadow(0 0 20px rgba(127, 163, 212, 0.3));
    }

    .featured-banner-trading-interview:hover .featured-banner-image {
      filter: drop-shadow(0 0 30px rgba(127, 163, 212, 0.5));
    }

    .featured-banner-trading-interview .featured-banner-badge {
      background: linear-gradient(135deg, rgba(26, 47, 83, 0.3), rgba(42, 79, 115, 0.3));
      border: 1px solid rgba(127, 163, 212, 0.4);
      color: #7fa3d4;
    }

    .featured-banner-trading-interview .featured-banner-title {
      background: linear-gradient(135deg, #ffffff 0%, #7fa3d4 50%, #b8c8e0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .featured-banner-trading-interview:hover .featured-banner-title {
      filter: drop-shadow(0 0 20px rgba(127, 163, 212, 0.5));
    }

    .featured-banner-trading-interview .featured-banner-feature {
      background: rgba(127, 163, 212, 0.1);
      border: 1px solid rgba(127, 163, 212, 0.2);
      color: #b8c8e0;
    }

    .featured-banner-trading-interview .featured-banner-feature::before {
      color: #7fa3d4;
    }

    .featured-banner-trading-interview .featured-banner-arrow {
      background: linear-gradient(135deg, #1a2f53 0%, #2a4f73 50%, #7fa3d4 100%);
      box-shadow: 0 8px 24px rgba(127, 163, 212, 0.3);
    }

    .featured-banner-trading-interview:hover .featured-banner-arrow {
      box-shadow: 0 12px 32px rgba(127, 163, 212, 0.5);
    }

    /* Wall Street Prep (2026-10-08): their blue and green, gold badge = Premium perk */
    .featured-banner-wsp {
      background: radial-gradient(circle at top left, rgba(11, 143, 203, 0.28), rgba(108, 245, 154, 0.06) 55%, rgba(7, 18, 28, 0.96));
      border: 2px solid rgba(56, 182, 239, 0.35);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(11, 143, 203, 0.25);
    }
    .featured-banner-wsp::before { background: linear-gradient(90deg, transparent, rgba(108, 245, 154, 0.15), transparent); }
    .featured-banner-wsp:hover {
      border-color: rgba(108, 245, 154, 0.6);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(108, 245, 154, 0.3), inset 0 0 60px rgba(11, 143, 203, 0.12);
    }
    .featured-banner-wsp .featured-banner-image { filter: drop-shadow(0 0 20px rgba(56, 182, 239, 0.35)); }
    .featured-banner-wsp:hover .featured-banner-image { filter: drop-shadow(0 0 30px rgba(108, 245, 154, 0.5)); }
    .featured-banner-wsp .featured-banner-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: linear-gradient(135deg, #f5d47a, #d9a93f); border: 0; color: #2a1d02; font-weight: 800;
      box-shadow: 0 0 22px rgba(245, 212, 122, 0.35);
    }
    .featured-banner-wsp .featured-banner-title {
      background: linear-gradient(135deg, #ffffff 0%, #38b6ef 50%, #6cf59a 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .featured-banner-wsp:hover .featured-banner-title { filter: drop-shadow(0 0 20px rgba(108, 245, 154, 0.5)); }
    .featured-banner-wsp .featured-banner-feature { background: rgba(56, 182, 239, 0.1); border: 1px solid rgba(56, 182, 239, 0.3); color: #c8e9fa; }
    .featured-banner-wsp .featured-banner-feature::before { color: #6cf59a; }
    .featured-banner-wsp .featured-banner-arrow { background: linear-gradient(135deg, #0b8fcb 0%, #38b6ef 50%, #6cf59a 100%); box-shadow: 0 8px 24px rgba(56, 182, 239, 0.4); }
    .featured-banner-wsp:hover .featured-banner-arrow { box-shadow: 0 12px 32px rgba(108, 245, 154, 0.5); }

    /* Hellotest (2026-10-08): reuses the WSP banner shape, in Hellotest green and navy, silver Plus badge */
    .featured-banner-ht { background: radial-gradient(circle at top left, rgba(18, 19, 168, 0.40), rgba(112, 201, 150, 0.06) 55%, rgba(11, 13, 28, 0.96)); border-color: rgba(112, 201, 150, 0.35); }
    .featured-banner-ht .featured-banner-image { max-width: 180px; }
    .featured-banner-ht .featured-banner-badge { background: linear-gradient(135deg, #e9edf2, #aeb7c2); color: #161a22; box-shadow: 0 0 22px rgba(233, 237, 242, 0.25); }
    .featured-banner-ht .featured-banner-title { background: linear-gradient(135deg, #ffffff 0%, #8fe0b0 55%, #7f86ff 100%); -webkit-background-clip: text; background-clip: text; }
    .featured-banner-ht .featured-banner-feature { background: rgba(112, 201, 150, 0.1); border-color: rgba(112, 201, 150, 0.3); color: #d3f1df; }
    .featured-banner-ht .featured-banner-arrow { background: linear-gradient(135deg, #1213a8 0%, #4b54e0 50%, #70c996 100%); }

    /* Benelux (2026-10-08): reuses the WSP banner shape and gold Premium badge, in the competition's orange on navy */
    .featured-banner-bx { background: radial-gradient(circle at top left, rgba(232, 116, 59, 0.30), rgba(245, 212, 122, 0.05) 55%, rgba(10, 18, 36, 0.96)); border-color: rgba(232, 116, 59, 0.4); }
    .featured-banner-bx:hover { border-color: rgba(245, 212, 122, 0.6); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(232, 116, 59, 0.3); }
    .featured-banner-bx .featured-banner-image { max-width: 96px; filter: drop-shadow(0 0 20px rgba(232, 116, 59, 0.45)); }
    .featured-banner-bx .featured-banner-title { background: linear-gradient(135deg, #ffffff 0%, #ff9a5c 55%, #f5d47a 100%); -webkit-background-clip: text; background-clip: text; }
    .featured-banner-bx .featured-banner-feature { background: rgba(232, 116, 59, 0.1); border-color: rgba(232, 116, 59, 0.35); color: #fbd9c6; }
    .featured-banner-bx .featured-banner-feature::before { color: #f5d47a; }
    .featured-banner-bx .featured-banner-arrow { background: linear-gradient(135deg, #c95a26 0%, #e8743b 50%, #f5d47a 100%); box-shadow: 0 8px 24px rgba(232, 116, 59, 0.4); }

    /* Market Making Games Banner - Violet/Magenta Theme */
    /* Your Finance Job — our own product, so it leads the page. Finance Green
       accent rather than a partner's colours. */
    /* AIC Premium: our own offer, first on the page, gold on black. Hidden until
       we know the visitor is not Premium (logged out, or membershipState says
       not a member), so Premium members never see it. */
    .featured-banner-aic-premium {
      background: radial-gradient(120% 100% at 15% 0%, #2a2108 0%, #000 65%);
      border: 2px solid rgba(212, 175, 55, 0.5);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.25),
                  inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .featured-banner-aic-premium[hidden] { display: none; }
    .featured-banner-aic-premium::before { background: linear-gradient(90deg, transparent, rgba(246, 226, 122, 0.18), transparent); }
    .featured-banner-aic-premium:hover {
      border-color: rgba(246, 226, 122, 0.8);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(212, 175, 55, 0.4),
                  inset 0 0 60px rgba(212, 175, 55, 0.08);
    }
    .featured-banner-aic-premium .featured-banner-image {
      width: auto; max-width: none; height: 190px; max-height: none;
      transform: rotate(-8deg); transition: transform 0.4s ease, filter 0.3s ease;
      filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 20px rgba(212, 175, 55, 0.45));
    }
    .featured-banner-aic-premium:hover .featured-banner-image {
      transform: rotate(-4deg) scale(1.05);
      filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 30px rgba(246, 226, 122, 0.6));
    }
    .featured-banner-aic-premium .featured-banner-badge {
      background: linear-gradient(135deg, rgba(138, 106, 31, 0.45), rgba(212, 175, 55, 0.4));
      border: 1px solid rgba(212, 175, 55, 0.6); color: #f6e27a;
    }
    .featured-banner-aic-premium .featured-banner-title {
      background: linear-gradient(135deg, #b8912e 0%, #f6e27a 50%, #d4af37 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .featured-banner-aic-premium .featured-banner-description { color: #e8dcc0; }
    .featured-banner-aic-premium .featured-banner-feature {
      background: rgba(212, 175, 55, 0.12); border: 1px solid rgba(212, 175, 55, 0.3); color: #f3e3b0;
    }
    .featured-banner-aic-premium .featured-banner-feature::before { color: #d4af37; }
    .featured-banner-aic-premium .featured-banner-arrow {
      background: linear-gradient(135deg, #8a6a1f 0%, #d4af37 50%, #f6e27a 100%);
      box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
    }
    .featured-banner-aic-premium .featured-banner-arrow svg { stroke: #2b1d00; }
    .featured-banner-aic-premium:hover .featured-banner-arrow { box-shadow: 0 10px 30px rgba(246, 226, 122, 0.55); }

    .featured-banner-your-finance-job {
      background: #05110d;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(13, 145, 99, 0.45);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 40px rgba(13, 145, 99, 0.22),
                  inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .featured-banner-your-finance-job::before {
      background: linear-gradient(90deg,
        transparent,
        rgba(61, 220, 151, 0.16),
        transparent);
    }

    .featured-banner-your-finance-job:hover {
      border-color: rgba(61, 220, 151, 0.65);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                  0 0 60px rgba(13, 145, 99, 0.35),
                  inset 0 0 60px rgba(13, 145, 99, 0.10);
    }

    .featured-banner-your-finance-job .featured-banner-image {
      width: 250px;
      filter: drop-shadow(0 0 18px rgba(13, 145, 99, 0.45));
    }

    .featured-banner-your-finance-job:hover .featured-banner-image {
      filter: drop-shadow(0 0 28px rgba(61, 220, 151, 0.6));
    }

    .featured-banner-your-finance-job .featured-banner-badge {
      background: linear-gradient(135deg, rgba(13, 145, 99, 0.34), rgba(61, 220, 151, 0.26));
      border: 1px solid rgba(61, 220, 151, 0.45);
      color: #9df0c9;
    }

    .featured-banner-your-finance-job .featured-banner-title {
      background: linear-gradient(135deg, #ffffff 0%, #3ddc97 55%, #0d9163 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .featured-banner-your-finance-job .featured-banner-feature {
      background: rgba(61, 220, 151, 0.10);
      border: 1px solid rgba(61, 220, 151, 0.24);
      color: #b7f2d8;
    }

    .featured-banner-your-finance-job .featured-banner-feature::before {
      color: #3ddc97;
    }

    .featured-banner-your-finance-job .featured-banner-arrow {
      background: linear-gradient(135deg, #0a6b48 0%, #0d9163 50%, #3ddc97 100%);
      box-shadow: 0 8px 24px rgba(13, 145, 99, 0.4);
    }

    .featured-banner-your-finance-job:hover .featured-banner-arrow {
      box-shadow: 0 10px 30px rgba(61, 220, 151, 0.55);
    }

    .featured-banner-market-making-games {
      background: #000;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(192, 132, 252, 0.4);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 40px rgba(192, 132, 252, 0.22),
                  inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .featured-banner-market-making-games::before {
      background: linear-gradient(90deg,
        transparent,
        rgba(236, 72, 153, 0.18),
        transparent);
    }

    .featured-banner-market-making-games:hover {
      border-color: rgba(236, 72, 153, 0.6);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                  0 0 60px rgba(236, 72, 153, 0.35),
                  inset 0 0 60px rgba(192, 132, 252, 0.1);
    }

    .featured-banner-market-making-games .featured-banner-image {
      filter: drop-shadow(0 0 20px rgba(192, 132, 252, 0.5));
      width: 220px;
    }

    .featured-banner-market-making-games:hover .featured-banner-image {
      filter: drop-shadow(0 0 30px rgba(236, 72, 153, 0.65));
    }

    .featured-banner-market-making-games .featured-banner-badge {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.32), rgba(236, 72, 153, 0.32));
      border: 1px solid rgba(192, 132, 252, 0.45);
      color: #e9b3ff;
    }

    .featured-banner-market-making-games .featured-banner-title {
      background: linear-gradient(135deg, #ffffff 0%, #c084fc 45%, #ec4899 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .featured-banner-market-making-games:hover .featured-banner-title {
      filter: drop-shadow(0 0 20px rgba(236, 72, 153, 0.55));
    }

    .featured-banner-market-making-games .featured-banner-feature {
      background: rgba(192, 132, 252, 0.10);
      border: 1px solid rgba(192, 132, 252, 0.22);
      color: #f0d4ff;
    }

    .featured-banner-market-making-games .featured-banner-feature::before {
      color: #ec4899;
    }

    .featured-banner-market-making-games .featured-banner-arrow {
      background: linear-gradient(135deg, #7c3aed 0%, #c026d3 50%, #ec4899 100%);
      box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4);
    }

    .featured-banner-market-making-games:hover .featured-banner-arrow {
      box-shadow: 0 12px 32px rgba(236, 72, 153, 0.6);
    }

    /* TradeZero Banner - Green Theme */
    .featured-banner-tradezero {
      background: linear-gradient(135deg,
        rgba(38, 233, 134, 0.15) 0%,
        rgba(11, 125, 79, 0.1) 50%,
        rgba(6, 8, 22, 0.9) 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(38, 233, 134, 0.3);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 40px rgba(38, 233, 134, 0.2),
                  inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .featured-banner-tradezero::before {
      background: linear-gradient(90deg,
        transparent,
        rgba(38, 233, 134, 0.2),
        transparent);
    }

    .featured-banner-tradezero:hover {
      border-color: rgba(38, 233, 134, 0.6);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                  0 0 60px rgba(38, 233, 134, 0.4),
                  inset 0 0 60px rgba(38, 233, 134, 0.15);
    }

    .featured-banner-tradezero .featured-banner-image {
      filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(38, 233, 134, 0.4));
    }

    .featured-banner-tradezero:hover .featured-banner-image {
      filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(38, 233, 134, 0.6));
    }

    .featured-banner-tradezero .featured-banner-badge {
      background: linear-gradient(135deg, rgba(11, 125, 79, 0.3), rgba(38, 233, 134, 0.3));
      border: 1px solid rgba(38, 233, 134, 0.4);
      color: #26e986;
    }

    .featured-banner-tradezero .featured-banner-title {
      background: linear-gradient(135deg, #0b7d4f 0%, #26e986 50%, #c1f558 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .featured-banner-tradezero:hover .featured-banner-title {
      filter: drop-shadow(0 0 20px rgba(38, 233, 134, 0.6));
    }

    .featured-banner-tradezero .featured-banner-feature {
      background: rgba(38, 233, 134, 0.1);
      border: 1px solid rgba(38, 233, 134, 0.2);
      color: #a8f5cc;
    }

    .featured-banner-tradezero .featured-banner-feature::before {
      color: #26e986;
    }

    .featured-banner-tradezero .featured-banner-arrow {
      background: linear-gradient(135deg, #0b7d4f 0%, #26e986 50%, #c1f558 100%);
      box-shadow: 0 8px 24px rgba(38, 233, 134, 0.4);
    }

    .featured-banner-tradezero:hover .featured-banner-arrow {
      box-shadow: 0 12px 32px rgba(38, 233, 134, 0.6);
    }

    /* Options Course Banner - AIC red and gold, a portrait instead of a logo */
    .featured-banner-options-course {
      background: radial-gradient(circle at top left,
        rgba(196, 36, 29, 0.38) 0%,
        rgba(29, 8, 7, 0.96) 55%,
        rgba(14, 3, 2, 0.98) 100%);
      border: 2px solid rgba(255, 215, 0, 0.28);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 40px rgba(196, 36, 29, 0.35),
                  inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .featured-banner-options-course::before {
      background: linear-gradient(90deg,
        transparent,
        rgba(255, 215, 0, 0.14),
        transparent);
    }

    .featured-banner-options-course:hover {
      border-color: rgba(255, 215, 0, 0.6);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                  0 0 60px rgba(255, 215, 0, 0.32),
                  inset 0 0 60px rgba(196, 36, 29, 0.15);
    }

    .featured-banner-options-visual {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .featured-banner-portrait {
      position: relative;
      z-index: 1;
      width: 172px;
      height: auto;
      display: block;
      filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
      /* The cutout ends in a flat shoulder line; fade it so it does not read as cropped. */
      -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
      transition: filter 0.3s ease, transform 0.4s ease;
    }

    .featured-banner-options-course:hover .featured-banner-portrait {
      transform: translateY(-4px);
      filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.6));
    }

    .featured-banner-portrait-logo {
      position: relative;
      z-index: 1;
      width: 124px;
      height: auto;
      display: block;
      opacity: 0.9;
    }

    .featured-banner-options-course .featured-banner-badge {
      background: linear-gradient(135deg, rgba(196, 36, 29, 0.35), rgba(255, 215, 0, 0.22));
      border: 1px solid rgba(255, 215, 0, 0.4);
      color: #FFD700;
    }

    .featured-banner-options-course .featured-banner-title {
      background: linear-gradient(135deg, #ffffff 0%, #ffd9d5 40%, #FFD700 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .featured-banner-options-course:hover .featured-banner-title {
      filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    }

    .featured-banner-options-course .featured-banner-feature {
      background: rgba(255, 215, 0, 0.08);
      border: 1px solid rgba(255, 215, 0, 0.25);
      color: #ffe9a8;
    }

    .featured-banner-options-course .featured-banner-feature::before {
      color: #FFD700;
    }

    .featured-banner-options-course .featured-banner-arrow {
      background: linear-gradient(135deg, #a81a14 0%, #d0291f 50%, #FFD700 100%);
      box-shadow: 0 8px 24px rgba(255, 215, 0, 0.35);
    }

    .featured-banner-options-course:hover .featured-banner-arrow {
      box-shadow: 0 12px 32px rgba(255, 215, 0, 0.55);
    }

    /* Responsive Design */
    @media (max-width: 960px) {
      .featured-pages {
        padding: 60px 16px;
      }

      .featured-banner {
        padding: 32px 24px;
      }

      .featured-banner-content {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
      }

      .featured-banner-image {
        width: 160px;
        margin: 0 auto;
      }

      .featured-banner-arrow {
        margin: 0 auto;
      }

      .featured-banner-features {
        justify-content: center;
      }
    }

    @media (max-width: 768px) {
      .featured-pages-title {
        font-size: clamp(26px, 4.5vw, 32px);
        line-height: 1.2;
        margin: 0 auto 16px;
      }
    }
    
    @media (max-width: 640px) {
      .featured-pages {
        padding: 56px 0 40px;
      }

      .featured-pages-container {
        padding: 0 16px;
      }

      .featured-pages-header {
        margin-bottom: 40px;
      }

      .featured-banner {
        padding: 24px 20px;
        border-radius: 18px;
      }

      .featured-banner-title {
        font-size: 24px;
      }

      .featured-banner-description {
        font-size: 14px;
      }

      .featured-banner-image {
        width: 120px;
      }

      .featured-banner-portrait {
        width: 136px;
      }

      .featured-banner-arrow {
        width: 50px;
        height: 50px;
      }

      .featured-banner-arrow svg {
        width: 24px;
        height: 24px;
      }
    }
    /* 2026-10-03: light page under the research-shell hero. The dark photo backdrop and
       the old header are gone; the banners keep their own dark branded backgrounds, with
       a plain drop shadow instead of the coloured glow, which looks muddy on paper. */
    .featured-pages { background: transparent; padding: 64px 0 88px; min-height: 0; }
    .featured-pages::before, .featured-pages::after { display: none; }
    /* Several partner gradients are semi-transparent and relied on the old black page:
       a solid dark base keeps them as they looked there. */
    .featured-pages .featured-banner { background-color: #0b0b0d !important; box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .55); }
    .featured-pages .featured-banner:hover { box-shadow: 0 30px 56px -24px rgba(0, 0, 0, .6); }
    .premium-login-note { color: #75706b; }
    .premium-login-note a { color: #66100c; }

    /* Same column as the hero, so the cards' left edge sits under the title (2026-10-03). */
    .featured-pages .featured-pages-container { box-sizing: border-box; max-width: 1180px; padding: 0 28px; }
    @media (max-width: 720px) { .featured-pages .featured-pages-container { padding: 0 16px; } }

    /* AIC membership card: Graphite and Carbon side by side (2026-10-03). */
    .featured-pages .fm-cards { display: flex; justify-content: center; align-items: center; height: 150px; }
    .featured-pages .fm-cards img { width: auto; height: 150px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); transition: transform .3s ease; }
    .featured-pages .fm-cards img:first-child { transform: rotate(-10deg) translateX(10px); }
    .featured-pages .fm-cards img:last-child { transform: rotate(6deg) translateX(-10px); }
    .featured-pages .featured-banner-aic-membership:hover .fm-cards img:first-child { transform: rotate(-13deg) translateX(4px); }
    .featured-pages .featured-banner-aic-membership:hover .fm-cards img:last-child { transform: rotate(9deg) translateX(-4px); }
    @media (max-width: 768px) { .featured-pages .fm-cards { justify-content: flex-start; height: 120px; } .featured-pages .fm-cards img { height: 120px; } }

    /* AIC Premium: the Carbon card, like .aic-premium-banner in /assets/aic-banners.js. */
    .featured-pages .featured-banner-aic-premium {
      color: #fff;
      border: 0;
      border-right: 5px solid #ae1f19;
      box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45);
      background: radial-gradient(90% 70% at 50% 30%, rgba(0,0,0,.15), rgba(0,0,0,.55)), #111 url('/assets/img/membership/carbon-texture.webp') center / cover;
      overflow: hidden;
    }
    .featured-pages .featured-banner-aic-premium:hover { border-color: #ae1f19; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5); }
    .featured-pages .featured-banner-aic-premium .featured-banner-image {
      width: auto; max-width: none; height: 150px; max-height: none;
      margin: 0 auto;
      transform: rotate(-8deg);
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4));
      transition: transform .4s ease;
    }
    .featured-pages .featured-banner-aic-premium:hover .featured-banner-image { transform: rotate(-4deg) scale(1.06); }
    .featured-pages .featured-banner-aic-premium .featured-banner-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 999px;
      background: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
      border: 0; color: #fff; font-weight: 800; letter-spacing: .1em;
    }
    .featured-pages .featured-banner-aic-premium .featured-banner-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #d8322a; }
    .featured-pages .featured-banner-aic-premium .featured-banner-title { color: #fff; background: none; -webkit-text-fill-color: currentColor; }
    .featured-pages .featured-banner-aic-premium .featured-banner-description { color: #d6d6d6; }
    .featured-pages .featured-banner-aic-premium .featured-banner-feature { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .2); color: #fff; }
    .featured-pages .featured-banner-aic-premium .featured-banner-feature::before { color: #d8322a; }
    .featured-pages .featured-banner-aic-premium .featured-banner-arrow { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .3); }
    .featured-pages .featured-banner-aic-premium .featured-banner-arrow svg { stroke: #fff; }
    .featured-pages .featured-banner-aic-premium:hover .featured-banner-arrow { border-color: #fff; }