.gpl-compact-hero, .gpl-compact-hero *, .gpl-compact-hero *::before, .gpl-compact-hero *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* =========================================================
       REALGPL MEMBERSHIP HERO
       Colour palette inspired by the RealGPL / GPL references
       ========================================================= */

    .gpl-compact-hero {
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;

      padding: 50px 24px 46px;

      background:
        radial-gradient(
          circle at 12% 15%,
          rgba(22, 143, 229, 0.13) 0%,
          transparent 40%
        ),
        radial-gradient(
          circle at 88% 82%,
          rgba(11, 53, 87, 0.09) 0%,
          transparent 42%
        ),
        linear-gradient(135deg,#f5fbff 0%,#eaf5fb 48%,#fff9f3 100%);

      border-top: 1px solid #d7e7f1;
      border-bottom: 1px solid #d7e7f1;

      font-family:
        "Salsa", cursive;

      overflow: hidden;
    }

    /* =========================================================
       TOP BLUE LINE
       ========================================================= */

    .gpl-compact-hero::before {
      content: "";
      position: absolute;

      top: 0;
      left: 0;
      right: 0;

      height: 4px;

      background:
        linear-gradient(
          90deg,
          #0b3557 0%,
          rgb(23,105,176) 45%,
          #3b8fc9 78%,
          rgb(219,102,0) 100%
        );

      z-index: 3;
    }


    /* =========================================================
       BACKGROUND GLOW
       ========================================================= */

    .gpl-compact-hero .glow-disc {
      position: absolute;
      border-radius: 50%;
      filter: blur(85px);
      pointer-events: none;
      z-index: 0;
    }

    .gpl-compact-hero .glow-disc.disc-left {
      width: 400px;
      height: 400px;

      top: -120px;
      left: -100px;

      background:
        radial-gradient(
          circle,
          rgba(22, 143, 229, 0.20) 0%,
          rgba(22, 143, 229, 0.07) 50%,
          transparent 75%
        );
    }

    .gpl-compact-hero .glow-disc.disc-right {
      width: 420px;
      height: 420px;

      bottom: -130px;
      right: -100px;

      background:
        radial-gradient(
          circle,
          rgba(11, 53, 87, 0.15) 0%,
          rgba(22, 143, 229, 0.07) 50%,
          transparent 75%
        );
    }


    /* =========================================================
       MAIN WRAPPER
       ========================================================= */

    .gpl-inner-wrap {
      position: relative;
      z-index: 1;

      max-width: 1180px;

      margin: 0 auto;

      text-align: center;

      display: flex;
      flex-direction: column;
      align-items: center;
    }


    /* =========================================================
       PROMO PILL
       ========================================================= */

    .promo-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      background:
        linear-gradient(
          135deg,
          #ffffff,
          #f3faff
        );

      padding: 7px 17px;

      border-radius: 999px;

      border: 1px solid #bcdced;

      box-shadow:
        0 3px 12px rgba(11, 53, 87, 0.07);

      margin-bottom: 17px;
    }


    .promo-pill .pulse-indicator {
      width: 8px;
      height: 8px;

      border-radius: 50%;

      background: #3b8fc9;

      box-shadow:
        0 0 0 3px rgba(22, 143, 229, 0.15);

      animation:
        pulseDot 2s infinite ease-in-out;
    }


    @keyframes pulseDot {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.25);
        opacity: 0.8;
      }
    }


    .promo-pill .pill-caption {
      font-size: 13px;

      font-weight: 800;

      color: #0b3557;

      letter-spacing: 0.45px;

      text-transform: uppercase;
    }


    /* =========================================================
       MAIN HEADING
       ========================================================= */

    .compact-heading {
      font-size: clamp(23px, 3.2vw, 35px);

      font-weight: 900;

      color: #0b3557;

      line-height: 1.25;

      letter-spacing: -0.7px;

      margin-bottom: 13px;

      white-space: normal;
    }


    @media (min-width: 860px) {
      .compact-heading {
        white-space: nowrap;
      }
    }


    /* Blue highlight instead of purple/pink */
    .compact-heading .gradient-accent {
      background:
        linear-gradient(135deg,#0b3557 0%,rgb(23,105,176) 52%,#49a0d4 100%);

      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      background-clip: text;

      padding-left: 2px;
    }


    /* =========================================================
       SUBTEXT
       ========================================================= */

    .compact-subtext {
      color: #36546a;

      font-size: 16px;

      line-height: 1.7;

      max-width: 800px;

      margin-bottom: 24px;

      font-weight: 500;
    }


    /* =========================================================
       ACTION AREA
       ========================================================= */

    .action-stack {
      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 13px;

      margin-bottom: 26px;

      width: 100%;
    }


    /* =========================================================
       COUPON
       ========================================================= */

    .coupon-interactive-pill {
      display: inline-flex;

      align-items: center;

      gap: 9px;

      background:linear-gradient(145deg,#ffffff 0%,#f7fbfe 100%);

      border: 1.5px dashed #3b8fc9;

      border-radius: 9px;

      padding: 7px 15px;

      cursor: pointer;

      user-select: none;

      transition:
        all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

      box-shadow:
        0 3px 10px rgba(22, 143, 229, 0.11);
    }


    .coupon-interactive-pill:hover {
      background: #eef8fe;

      border-color: rgb(219,102,0);

      transform: translateY(-1px);

      box-shadow:
        0 5px 14px rgba(22, 143, 229, 0.18);
    }


    .coupon-interactive-pill .code-prompt {
      font-size: 14px;

      font-weight: 600;

      color: #526b7b;
    }


    .coupon-interactive-pill .code-val {
      font-size: 16px;

      font-weight: 900;

      color: #0b3557;

      letter-spacing: 1px;
    }


    .coupon-interactive-pill .copy-badge-pill {
      display: inline-flex;

      align-items: center;

      gap: 5px;

      background: #e4f4fd;

      color: rgb(23,105,176);

      border-radius: 6px;

      padding: 4px 10px;

      font-size: 11.5px;

      font-weight: 800;

      letter-spacing: 0.4px;

      transition:
        all 0.2s ease;
    }


    /* =========================================================
       MAIN CTA
       ========================================================= */

    .main-cta-btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      background:linear-gradient(135deg,rgb(219,102,0) 0%,#c55200 100%);
      color:#fff !important;
      font-weight:850;
      font-size:15px;
      letter-spacing:.45px;
      padding:14px 32px;
      border-radius:11px;
      text-decoration:none !important;
      border:1px solid rgba(255,255,255,.25);
      box-shadow:0 9px 24px rgba(219,102,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
      white-space:nowrap;
      position:relative;
      overflow:hidden;
    }


    .main-cta-btn:hover {
      background:linear-gradient(135deg,#0b3557 0%,rgb(23,105,176) 58%,#2d83bd 100%);
      transform:translateY(-3px);
      box-shadow:0 14px 30px rgba(7,56,93,.28),inset 0 1px 0 rgba(255,255,255,.2);
    }



    .main-cta-btn::before{
      content:"";
      position:absolute;
      top:0;
      left:-120%;
      width:70%;
      height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
      transform:skewX(-20deg);
      transition:left .6s ease;
    }
    .main-cta-btn:hover::before{left:135%}

    .main-cta-btn svg {
      transition:
        transform 0.2s ease;
    }


    .main-cta-btn:hover svg {
      transform: translateX(4px);
    }


    /* =========================================================
       TRUST STRIP
       ========================================================= */

    .compact-trust-strip {
      display: flex;

      justify-content: center;

      align-items: center;

      gap: 14px;

      flex-wrap: wrap;

      margin-bottom: 30px;
    }


    .trust-indicator {
      display: inline-flex;

      align-items: center;

      gap: 8px;

      font-size: 13.5px;

      font-weight: 700;

      color: #24445a;

      background:
        rgba(255, 255, 255, 0.92);

      padding: 6px 13px 6px 7px;

      border-radius: 999px;

      border: 1px solid #d4e5ef;

      box-shadow:
        0 2px 7px rgba(11, 53, 87, 0.035);

      backdrop-filter: blur(4px);
    }


    .trust-indicator .t-icon {
      width: 23px;

      height: 23px;

      border-radius: 50%;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;
    }


    .trust-indicator .t-icon svg {
      width: 12px;

      height: 12px;
    }


    .trust-indicator .t-icon.green {
      background: #e3f6ed;

      color: #14804a;
    }


    .trust-indicator .t-icon.indigo {
      background: #e3f2fb;

      color: rgb(23,105,176);
    }


    .trust-indicator .t-icon.amber {
      background: #fff4dc;

      color: #a64d00;
    }



    .rgpl-update-link{
      color:inherit;
      text-decoration:none;
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    }
    .rgpl-update-link:hover{
      transform:translateY(-2px);
      border-color:rgb(219,102,0);
      box-shadow:0 6px 14px rgba(219,102,0,.10);
    }
    .rgpl-update-arrow{
      color:rgb(23,105,176);
      font-size:14px;
      font-weight:900;
      margin-left:-2px;
    }
    .rgpl-update-link:hover .rgpl-update-arrow{color:rgb(219,102,0)}

    /* =========================================================
       METRICS
       ========================================================= */

    .compact-metrics-grid {
      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 18px;

      width: 100%;

      max-width: 1020px;
    }


    @media (max-width: 720px) {
      .compact-metrics-grid {
        grid-template-columns: 1fr;

        gap: 12px;
      }
    }


    /* =========================================================
       METRIC CARD
       ========================================================= */

    .metric-slab {
      position: relative;

      background: #ffffff;

      padding: 17px 21px;

      border-radius: 14px;

      border: 1px solid #d8e7f0;

      box-shadow:
        0 5px 16px rgba(11, 53, 87, 0.045),
        0 1px 2px rgba(0, 0, 0, 0.02);

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 15px;

      overflow: hidden;

      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    }


    .metric-slab:hover {
      transform: translateY(-3px);

      box-shadow:
        0 11px 25px rgba(11, 53, 87, 0.09);
    }


    .metric-slab .edge-accent {
      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      height: 3.5px;
    }


    /* BLUE */

    .slab-blue {
      border-top-color: transparent;
    }


    .slab-blue:hover {
      border-color: #8fc7e7;
    }


    .slab-blue .edge-accent {
      background:
        linear-gradient(
          90deg,
          #0b3557,
          #3b8fc9
        );
    }


    /* NAVY */

    .slab-purple {
      border-top-color: transparent;
    }


    .slab-purple:hover {
      border-color: #9ebbd0;
    }


    .slab-purple .edge-accent {
      background:
        linear-gradient(
          90deg,
          #0b3557,
          rgb(23,105,176)
        );
    }


    /* ORANGE ACCENT */

    .slab-amber {
      border-top-color: transparent;
    }


    .slab-amber:hover {
      border-color: #f1cc86;
    }


    .slab-amber .edge-accent {
      background:
        linear-gradient(
          90deg,
          rgb(219,102,0),
          rgb(219,102,0)
        );
    }


    /* =========================================================
       METRIC ICONS
       ========================================================= */

    .slab-avatar {
      width: 45px;

      height: 45px;

      border-radius: 11px;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;
    }


    .slab-avatar svg {
      width: 22px;

      height: 22px;
    }


    .slab-blue .slab-avatar {
      background: #e9f6fd;

      color: #3b8fc9;
    }


    .slab-purple .slab-avatar {
      background: #eaf2f8;

      color: rgb(23,105,176);
    }


    .slab-amber .slab-avatar {
      background: #fff5df;

      color: rgb(219,102,0);
    }


    .metric-slab .slab-body {
      text-align: left;
    }


    .metric-slab .number-display {
      display: flex;

      align-items: baseline;

      font-variant-numeric: tabular-nums;

      line-height: 1;
    }


    .metric-slab .counter-value {
      font-size: 29px;

      font-weight: 900;

      color: #0b3557;

      letter-spacing: -0.5px;
    }


    .metric-slab .counter-plus {
      font-size: 20px;

      font-weight: 800;

      color: #526b7b;

      margin-left: 2px;
    }


    .metric-slab .slab-label {
      font-size: 14px;

      font-weight: 700;

      color: #3a566a;

      margin-top: 5px;

      white-space: nowrap;
    }



    /* =========================================================
       DAILY CHANGELOG CARD
       ========================================================= */

    .rgpl-changelog-card{
      width:100%;
      max-width:1020px;
      margin:20px auto 0;
      display:flex;
      align-items:center;
      gap:16px;
      padding:16px 18px;
      border:1px solid #cfe3ef;
      border-radius:15px;
      background:
        radial-gradient(circle at 100% 0%,rgba(219,102,0,.10),transparent 32%),
        linear-gradient(135deg,#ffffff 0%,#f1f9fe 70%,#fff8f1 100%);
      box-shadow:0 8px 24px rgba(7,56,93,.08);
      text-align:left;
      position:relative;
      overflow:hidden;
    }

    .rgpl-changelog-card:before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:4px;
      background:linear-gradient(180deg,rgb(23,105,176),rgb(219,102,0));
    }

    .rgpl-changelog-icon{
      width:46px;
      height:46px;
      min-width:46px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      color:#fff;
      background:linear-gradient(135deg,#0b3557,rgb(23,105,176));
      box-shadow:0 7px 16px rgba(23,105,176,.20);
    }

    .rgpl-changelog-icon svg{width:22px;height:22px}

    .rgpl-changelog-copy{flex:1;min-width:0}

    .rgpl-changelog-kicker{
      display:block;
      margin-bottom:2px;
      color:rgb(23,105,176);
      font-size:10.5px;
      font-weight:900;
      letter-spacing:1px;
    }

    .rgpl-changelog-copy strong{
      display:block;
      color:#0b3557;
      font-size:16px;
      line-height:1.3;
    }

    .rgpl-changelog-copy p{
      margin:3px 0 0;
      color:#536d7e;
      font-size:13px;
      line-height:1.5;
    }

    .rgpl-changelog-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      padding:10px 15px;
      border-radius:9px;
      background:linear-gradient(135deg,#0b3557,rgb(23,105,176));
      color:#fff !important;
      font-size:12.5px;
      font-weight:850;
      text-decoration:none !important;
      white-space:nowrap;
      box-shadow:0 6px 15px rgba(7,56,93,.18);
      transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
    }

    .rgpl-changelog-btn:hover{
      background:linear-gradient(135deg,rgb(219,102,0),#b94b00);
      transform:translateY(-2px);
      box-shadow:0 9px 19px rgba(219,102,0,.24);
    }

    .rgpl-changelog-btn svg{transition:transform .2s ease}
    .rgpl-changelog-btn:hover svg{transform:translateX(3px)}

    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width: 900px) {

      .gpl-compact-hero {
        padding:
          44px
          20px
          42px;
      }

      .compact-heading {
        font-size: 29px;
      }

      .compact-subtext {
        font-size: 15.5px;
      }

    }


    /* =========================================================
       MOBILE
       ========================================================= */

    @media (max-width: 720px) {

      .gpl-compact-hero {
        padding:
          40px
          16px
          38px;
      }


      .gpl-inner-wrap {
        max-width: 100%;
      }


      .promo-pill {
        padding:
          7px
          13px;
      }


      .promo-pill .pill-caption {
        font-size: 11.5px;
      }


      .compact-heading {
        font-size: 25px;

        line-height: 1.3;

        letter-spacing: -0.4px;
      }


      .compact-subtext {
        font-size: 15px;

        line-height: 1.65;
      }


      .action-stack {
        gap: 11px;
      }


      .coupon-interactive-pill {
        max-width: 100%;

        flex-wrap: wrap;

        justify-content: center;
      }


      .main-cta-btn {
        width: 100%;

        justify-content: center;

        max-width: 330px;
      }


      .compact-trust-strip {
        gap: 9px;

        margin-bottom: 25px;
      }


      .trust-indicator {
        font-size: 12.5px;
      }



      .rgpl-changelog-card{
        align-items:flex-start;
        flex-wrap:wrap;
        padding:15px;
      }
      .rgpl-changelog-copy{
        width:calc(100% - 62px);
      }
      .rgpl-changelog-btn{
        width:100%;
        margin-left:62px;
        max-width:calc(100% - 62px);
      }

      .metric-slab {
        justify-content: flex-start;

        padding:
          17px
          20px;
      }

    }


    /* =========================================================
       SMALL MOBILE
       ========================================================= */

    @media (max-width: 430px) {

      .gpl-compact-hero {
        padding:
          36px
          12px
          34px;
      }


      .compact-heading {
        font-size: 23px;
      }


      .compact-subtext {
        font-size: 14.5px;
      }


      .promo-pill .pill-caption {
        font-size: 10.5px;

        letter-spacing: 0.3px;
      }


      .coupon-interactive-pill .code-prompt {
        font-size: 13px;
      }


      .coupon-interactive-pill .code-val {
        font-size: 15px;
      }


      .main-cta-btn {
        font-size: 14px;

        padding:
          13px
          20px;
      }


      .trust-indicator {
        width: 100%;

        justify-content: center;
      }


      .metric-slab .counter-value {
        font-size: 27px;
      }

    }