/* =========================================================
   GUMROAD ENGINE HERO
   PREMIUM WHITE / LIGHT THEME
   Layout same — only visual colors optimized
========================================================= */

.gumhero26-section {
   position: relative;

   width: 100%;

   margin-left: 0 !important;
   margin-right: 0 !important;

   padding: 0 20px 60px;

   /* overflow: hidden; */

   isolation: isolate;

   color: #17171d;
}


/* =========================================================
   INNER WRAPPER
========================================================= */

.gumhero26-section > div {
   position: relative;

   z-index: 3;

   width: 100%;
   max-width: 1450px;

   margin: 0 auto;
}


/* =========================================================
   WHITE BACKGROUND OVERLAY
   keeps your existing background image visible
========================================================= */

.gumhero26-section::before {
   content: "";

   position: absolute;

   inset: 0;

   z-index: 0;

   pointer-events: none;

   /* background:
      radial-gradient(
         circle at 50% 0%,
         rgba(255, 134, 94, 0.08),
         transparent 36%
      ),
      radial-gradient(
         circle at 5% 70%,
         rgba(255, 170, 116, 0.05),
         transparent 31%
      ),
      radial-gradient(
         circle at 95% 65%,
         rgba(255, 99, 107, 0.04),
         transparent 31%
      ),
      linear-gradient(
         180deg,
         rgba(255, 252, 250, 0.72) 0%,
         rgba(255, 255, 255, 0.79) 48%,
         rgba(255, 251, 248, 0.88) 100%
      ); */
}


/* =========================================================
   TOP SOFT GLOW
========================================================= */

.gumhero26-section::after {
   content: "";

   position: absolute;

   width: 850px;
   height: 400px;

   top: -280px;
   left: 50%;

   transform: translateX(-50%);

   z-index: 1;

   pointer-events: none;

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(255, 129, 92, 0.20) 0%,
         rgba(255, 109, 100, 0.08) 42%,
         transparent 72%
      );

   filter: blur(70px);
}


/* =========================================================
   BOOTSTRAP ROW FIX
========================================================= */

.gumhero26-section.row {
   --bs-gutter-x: 0;

   margin-left: 0 !important;
   margin-right: 0 !important;
}


/* =========================================================
   LOGO
========================================================= */

.gumhero26-logo-wrap {
   position: relative;

   z-index: 3;

   margin-bottom: 26px;
}


.gumhero26-logo {
   display: block;

   width: min(100%, 410px);

   height: auto;

   margin: 0 auto;

   object-fit: contain;

   filter:
      drop-shadow(
         0 9px 22px
         rgba(70, 40, 30, 0.10)
      )
      drop-shadow(
         0 0 16px
         rgba(255, 102, 88, 0.08)
      );
}


/* =========================================================
   PRE HEADLINE PILL
========================================================= */

.gumhero26-top-pill {
   position: relative;

   z-index: 3;

   width: calc(100% - 30px);
   max-width: 700px;

   margin: 0 auto 32px;

   display: flex;

   align-items: center;
   justify-content: center;

   gap: 11px;

   padding: 10px 26px;

   border-radius: 100px;

   border:
      1px solid
      rgba(255, 119, 91, 0.18);

   background:
      linear-gradient(
         135deg,
         rgba(255, 255, 255, 0.98),
         rgba(255, 248, 245, 0.96)
      );

   box-shadow:
      0 12px 34px
      rgba(42, 28, 23, 0.10),

      0 4px 14px
      rgba(255, 106, 88, 0.04),

      inset 0 1px 0
      rgba(255, 255, 255, 1);

   backdrop-filter: blur(10px);

   -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   PILL DOT
========================================================= */

.gumhero26-pill-dot {
   position: relative;

   width: 11px;
   height: 11px;

   min-width: 11px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #ff9b5d,
         #ff5f68
      );

   box-shadow:
      0 0 0 4px
      rgba(255, 105, 91, 0.09),

      0 0 15px
      rgba(255, 105, 91, 0.33);
}


/* =========================================================
   PRE HEADLINE TEXT
========================================================= */

.gumhero26-pill-text {
   color: #222229;

   font-size: 16px;

   line-height: 1.4;

   font-weight: 700;

   text-align: center;

   letter-spacing: -0.15px;
}


.gumhero26-pill-text span {
   color: #ff655e;

   font-weight: 900;
}


/* =========================================================
   MAIN HEADLINE
========================================================= */

.gumhero26-title {
   position: relative;

   z-index: 3;

   width: 100%;

   max-width: 1160px;

   margin: 0 auto;

   padding: 0 20px;

   color: #17171c !important;

   text-align: center;

   font-size:
      clamp(
         42px,
         4.7vw,
         50px
      );

   line-height: 1.4;

   font-weight: 900;

   letter-spacing: -2.4px;

   text-wrap: balance;

   text-shadow: none;
}


/* =========================================================
   GRADIENT HEADLINE
========================================================= */

.gumhero26-gradient {
   display: inline;

   color: transparent !important;

   background:
      linear-gradient(
         90deg,
         #ff9e59 0%,
         #ff835d 28%,
         #ff596b 62%,
         #ff845d 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

   filter:
      drop-shadow(
         0 4px 10px
         rgba(255, 101, 91, 0.08)
      );
}


/* =========================================================
   UNDERLINE INSIDE AUTOPILOT
========================================================= */

.gumhero26-gradient u {
   text-decoration-thickness: 3px;

   text-underline-offset: 6px;

   text-decoration-color:
      rgba(255, 99, 92, 0.42);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.gumhero26-description {
   position: relative;

   z-index: 3;

   width: 100%;

   max-width: 1130px;

   margin: 30px auto 0;

   padding: 0 22px;

   color: #575960 !important;

   text-align: center;

   font-size:
      clamp(
         17px,
         1.55vw,
         20px
      );

   line-height: 1.62;

   font-weight: 400;

   letter-spacing: -0.1px;

   text-shadow: none;
}


/* =========================================================
   DESCRIPTION HIGHLIGHTS
========================================================= */

.gumhero26-highlight {
   font-weight: 850;
}


.gumhero26-highlight:nth-of-type(1) {
   color: #f17256 !important;

   text-decoration-line: underline;

   text-decoration-color:
      rgba(241, 114, 86, 0.28);

   text-decoration-thickness: 2px;

   text-underline-offset: 4px;
}


.gumhero26-highlight:nth-of-type(2) {
   color: #ed5e62 !important;
}


/* =========================================================
   POST HEADLINE WRAPPER
========================================================= */

.gumhero26-section .text-center {
   position: relative;

   z-index: 3;
}


/* =========================================================
   SMALL "NO" PILLS
========================================================= */

.gumhero26-post-no {
   position: relative;

   z-index: 2;

   display: inline-flex;

   align-items: center;
   justify-content: center;

   margin: 4px 2px;

   padding: 7px 13px;

   border-radius: 100px;

   color: #24242a;

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

   border:
      1px solid
      rgba(31, 31, 37, 0.07);

   box-shadow:
      0 5px 16px
      rgba(36, 27, 24, 0.08),

      inset 0 1px 0
      rgba(255, 255, 255, 0.95);

   font-size: 18px;

   line-height: 1.3;

   font-weight: 600;

   white-space: nowrap;
}


/* =========================================================
   X ICON
========================================================= */

.gumhero26-post-no::before {
   content: "✕";

   display: inline-flex;

   align-items: center;
   justify-content: center;

   width: 19px;
   height: 19px;

   min-width: 19px;

   margin-right: 6px;

   border-radius: 6px;

   color: #ff625e;

   background:
      rgba(
         255,
         96,
         89,
         0.08
      );

   font-size: 10px;

   line-height: 1;

   font-weight: 900;
}


/* =========================================================
   BOTTOM MAIN LINE
========================================================= */

.gumhero26-post-main {
   position: relative;

   z-index: 2;

   display: block;

   width: 100%;

   max-width: 960px;

   margin: 6px auto 0;

   color: #1d1d23 !important;

   font-size:
      clamp(
         16px,
         1.4vw,
         18px
      );

   line-height: 1.45;

   font-weight: 700;

   letter-spacing: -0.2px;

   text-shadow: none;
}


/* =========================================================
   SMALL GRADIENT ACCENT
========================================================= */

.gumhero26-post-main::after {
   content: "";

   display: block;

   width: 75px;
   height: 3px;

   margin: 12px auto 0;

   border-radius: 100px;

   background:
      linear-gradient(
         90deg,
         #ffa05c,
         #ff5d6c
      );

   box-shadow:
      0 5px 16px
      rgba(255, 96, 89, 0.14);
}


/* =========================================================
   OVERRIDE BOOTSTRAP text-white
   ONLY INSIDE THIS HERO
========================================================= */

.gumhero26-section .text-white {
   color: #1d1d23 !important;
}


/* =========================================================
   OPTIONAL OLD POST HEADLINE CARD
========================================================= */

.gumhero26-post-headline {
   position: relative;

   z-index: 3;

   width: calc(100% - 40px);

   max-width: 1150px;

   margin: 30px auto 0;

   padding: 18px 25px 19px;

   display: flex;

   align-items: center;
   justify-content: center;

   flex-wrap: wrap;

   gap: 10px 12px;

   text-align: center;

   border-radius: 19px;

   border:
      1px solid
      rgba(255, 112, 90, 0.13);

   background:
      linear-gradient(
         135deg,
         rgba(255, 255, 255, 0.98),
         rgba(255, 247, 243, 0.96)
      );

   box-shadow:
      0 18px 45px
      rgba(58, 35, 28, 0.07),

      inset 0 1px 0
      rgba(255, 255, 255, 1);

   overflow: hidden;
}


/* =========================================================
   POST CARD GLOW
========================================================= */

.gumhero26-post-headline::before {
   content: "";

   position: absolute;

   width: 380px;
   height: 180px;

   top: -125px;
   right: -80px;

   pointer-events: none;

   border-radius: 50%;

   background:
      rgba(
         255,
         118,
         91,
         0.10
      );

   filter: blur(50px);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

   .gumhero26-title {
      max-width: 1160px;
   }


   .gumhero26-description {
      max-width: 1130px;
   }

}


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

@media (max-width: 991px) {

   .gumhero26-section {
      padding:
         24px 14px
         48px;
   }


   .gumhero26-logo {
      width: 270px;
   }


   .gumhero26-logo-wrap {
      margin-bottom: 24px;
   }


   .gumhero26-top-pill {
      margin-bottom: 27px;
   }


   .gumhero26-title {
      max-width: 900px;

      font-size:
         clamp(
            39px,
            6vw,
            55px
         );

      line-height: 1.13;

      letter-spacing: -1.8px;
   }


   .gumhero26-description {
      max-width: 900px;

      margin-top: 27px;

      font-size: 18px;
   }


   .gumhero26-post-headline {
      margin-top: 28px;
   }

}


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

@media (max-width: 767px) {

   .gumhero26-section {
      padding:
         20px 8px
         38px;
   }


   .gumhero26-logo-wrap {
      margin-bottom: 21px;
   }


   .gumhero26-logo {
      width: 220px;
   }


   .gumhero26-top-pill {
      width:
         calc(
            100% - 12px
         );

      margin-bottom: 23px;

      padding: 11px 15px;

      border-radius: 18px;
   }


   .gumhero26-pill-dot {
      width: 10px;
      height: 10px;

      min-width: 10px;
   }


   .gumhero26-pill-text {
      font-size: 14px;

      line-height: 1.45;
   }


   .gumhero26-title {
      padding: 0 5px;

      font-size: 38px;

      line-height: 1.12;

      letter-spacing: -1.25px;
   }


   .gumhero26-description {
      margin-top: 24px;

      padding: 0 5px;

      font-size: 16px;

      line-height: 1.58;
   }


   .gumhero26-post-no {
      padding: 7px 11px;

      font-size: 13px;

      white-space: normal;
   }


   .gumhero26-post-main {
      font-size: 15px;
   }


   .gumhero26-post-headline {
      width:
         calc(
            100% - 10px
         );

      margin-top: 26px;

      padding: 16px 13px;

      gap: 8px;

      border-radius: 17px;
   }

}


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

@media (max-width: 480px) {

   .gumhero26-section {
      padding-left: 5px;
      padding-right: 5px;
      padding-bottom: 32px;
   }


   .gumhero26-logo {
      width: 195px;
   }


   .gumhero26-top-pill {
      width:
         calc(
            100% - 8px
         );

      padding: 10px 12px;
   }


   .gumhero26-pill-dot {
      width: 9px;
      height: 9px;

      min-width: 9px;
   }


   .gumhero26-pill-text {
      font-size: 12.5px;
   }


   .gumhero26-title {
      font-size: 32px;

      line-height: 1.13;

      letter-spacing: -0.9px;
   }


   .gumhero26-description {
      font-size: 15px;
   }


   .gumhero26-post-no {
      width: 100%;

      justify-content: flex-start;

      text-align: left;

      margin-left: 0;
      margin-right: 0;
   }


   .gumhero26-post-main {
      font-size: 14px;
   }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

   .gumhero26-title {
      font-size: 28px;
   }


   .gumhero26-description {
      font-size: 14px;
   }


   .gumhero26-pill-text {
      font-size: 12px;
   }


   .gumhero26-post-main {
      font-size: 13px;
   }

}


/* ==========================================================
   GUMROAD ENGINE PREMIUM SHOWCASE
   COMPLETE RESPONSIVE CSS
   FIXED VERSION - NO JS VISIBILITY DEPENDENCY
========================================================== */


/* ==========================================================
   MAIN SECTION
========================================================== */

.gme26-showcase-section {
   position: relative;

   display: block !important;

   width: 100%;

   min-height: 500px;

   /* padding: 55px 0 65px; */

   /* overflow: hidden; */

   visibility: visible !important;
   opacity: 1 !important;

   /* background:
      radial-gradient(
         circle at 52% 0%,
         rgba(255, 178, 126, 0.25),
         transparent 35%
      ),
      radial-gradient(
         circle at 90% 28%,
         rgba(226, 130, 255, 0.10),
         transparent 28%
      ),
      radial-gradient(
         circle at 4% 70%,
         rgba(255, 110, 140, 0.06),
         transparent 28%
      ),
      linear-gradient(
         135deg,
         #fffdfb 0%,
         #fff8f3 45%,
         #fffdfc 100%
      ); */
}


.gme26-showcase-section::before {
   content: "";

   position: absolute;

   width: 520px;
   height: 520px;

   left: -250px;
   bottom: -260px;

   border-radius: 50%;

   background:
      rgba(255, 119, 112, 0.06);

   filter: blur(30px);

   pointer-events: none;
}


.gme26-showcase-section::after {
   content: "";

   position: absolute;

   width: 650px;
   height: 300px;

   right: -250px;
   top: -160px;

   border-radius: 50%;

   background:
      rgba(205, 69, 245, 0.05);

   filter: blur(60px);

   pointer-events: none;
}


.gme26-showcase-section * {
   box-sizing: border-box;
}


.gme26-showcase-section .container {
   position: relative;

   z-index: 5;
}


.gme26-showcase-section .row {
   position: relative;

   z-index: 5;
}


.gme26-showcase-section [class*="col-"] {
   position: relative;

   visibility: visible !important;

   opacity: 1 !important;
}



/* ==========================================================
   BROWSER / PRODUCT CARD
========================================================== */

.gme26-browser-card {
   position: relative;

   display: block !important;

   width: 100%;

   overflow: hidden;

   visibility: visible !important;

   opacity: 1 !important;

   transform: none !important;

   border-radius: 20px;

   border:
      1px solid
      rgba(218, 160, 208, 0.35);

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

   box-shadow:
      0 18px 55px
      rgba(74, 40, 68, 0.10),
      0 2px 7px
      rgba(77, 49, 78, 0.04);
      padding: 10px;
}



/* ==========================================================
   BROWSER TOP BAR
========================================================== */

.gme26-browser-bar {
   min-height: 48px;

   display: flex;

   align-items: center;

   gap: 18px;

   padding: 0 18px;

   background:
      linear-gradient(
         90deg,
         #fff7fb 0%,
         #f8efff 100%
      );

   border-bottom:
      1px solid
      rgba(90, 45, 90, 0.07);
}


.gme26-browser-dots {
   display: flex;

   align-items: center;

   gap: 7px;

   flex-shrink: 0;
}


.gme26-browser-dots span {
   display: block;

   width: 9px;
   height: 9px;

   border-radius: 50%;
}


.gme26-browser-dots span:nth-child(1) {
   background: #ff6c63;
}


.gme26-browser-dots span:nth-child(2) {
   background: #ffbd3d;
}


.gme26-browser-dots span:nth-child(3) {
   background: #32c95d;
}


.gme26-browser-url {
   display: inline-flex;

   align-items: center;

   gap: 6px;

   padding: 7px 14px;

   color: #232334;

   background: #ffffff;

   border:
      1px solid
      rgba(71, 51, 83, 0.08);

   border-radius: 8px;

   box-shadow:
      0 3px 10px
      rgba(65, 42, 66, 0.08);

   font-size: 14px;

   line-height: 1;

   font-weight: 700;
}


.gme26-browser-url i {
   color: #f8aa22;

   font-size: 11px;
}



/* ==========================================================
   APP HEADER
========================================================== */

.gme26-app-header {
   position: relative;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 20px;

   padding: 17px 20px;

   background: #ffffff;
}


.gme26-brand {
   display: flex;

   align-items: center;

   gap: 10px;
}


.gme26-brand-icon {
   width: 39px;
   height: 39px;

   min-width: 39px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 11px;

   background:
      linear-gradient(
         135deg,
         #ff705f 0%,
         #ec32db 58%,
         #7b35ed 100%
      );

   box-shadow:
      0 8px 18px
      rgba(220, 58, 191, 0.22);

   font-size: 23px;

   font-weight: 900;
}


.gme26-brand-name {
   color: #13152a;

   font-size: 25px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: -1px;
}


.gme26-brand-name span {
   color: #bf25dc;
}


.gme26-app-nav {
   display: flex;

   align-items: center;

   gap: 27px;

   color: #2d3153;

   font-size: 13px;

   font-weight: 600;
}


.gme26-app-nav span {
   cursor: default;
}



/* ==========================================================
   PRODUCT STAGE
========================================================== */

.gme26-product-stage {
   position: relative;

   min-height: 430px;

   /* margin: 0 16px 16px; */

   overflow: hidden;

   border-radius: 17px;

   background:
      linear-gradient(
         135deg,
         #fff1f3 0%,
         #f6d8ff 46%,
         #fff6dc 100%
      );

   border:
      1px solid
      rgba(216, 132, 220, 0.15);
}


.gme26-stage-glow {
   position: absolute;

   border-radius: 50%;

   pointer-events: none;

   filter: blur(35px);
}


.gme26-stage-glow-1 {
   width: 300px;
   height: 300px;

   right: -100px;
   top: -90px;

   background:
      rgba(189, 52, 255, 0.16);
}


.gme26-stage-glow-2 {
   width: 250px;
   height: 250px;

   left: -100px;
   bottom: -100px;

   background:
      rgba(255, 144, 81, 0.17);
}



/* ==========================================================
   READY NOTE
========================================================== */

.gme26-ready-note {
   position: absolute;

   top: 88px;
   left: 26px;

   z-index: 4;

   color: #7f31e9;

   transform: rotate(-7deg);

   font-size: 14px;

   line-height: 1.15;

   font-weight: 800;
}


.gme26-note-arrow {
   display: block;

   margin-top: 4px;

   font-size: 28px;
}



/* ==========================================================
   PRODUCT BOX
========================================================== */

.gme26-product-box {
   position: absolute;

   z-index: 3;

   left: 138px;
   top: 55px;

   width: 170px;
   height: 220px;

   transform:
      perspective(900px)
      rotateY(-8deg);

   filter:
      drop-shadow(
         0 20px 22px
         rgba(74, 32, 76, 0.20)
      );
}


.gme26-product-box-front {
   position: absolute;

   inset: 0;

   display: flex;

   flex-direction: column;

   align-items: center;
   justify-content: center;

   text-align: center;

   border-radius: 5px 12px 12px 5px;

   background:
      linear-gradient(
         150deg,
         #fff8fd 0%,
         #ffe9f5 47%,
         #eee1ff 100%
      );

   border:
      1px solid
      rgba(192, 73, 216, 0.22);
}


.gme26-product-box-front::after {
   content: "";

   position: absolute;

   inset: 8px;

   pointer-events: none;

   border:
      1px solid
      rgba(211, 75, 227, 0.10);

   border-radius: 8px;
}


.gme26-product-box-side {
   position: absolute;

   width: 40px;
   height: 218px;

   left: -31px;
   top: 1px;

   display: flex;

   align-items: center;
   justify-content: center;

   writing-mode: vertical-rl;

   color: #ffffff;

   background:
      linear-gradient(
         180deg,
         #b83be2 0%,
         #7926cb 100%
      );

   border-radius: 6px 0 0 6px;

   font-size: 12px;

   font-weight: 800;
}


.gme26-box-logo {
   position: relative;

   z-index: 2;

   width: 43px;
   height: 43px;

   display: flex;

   align-items: center;
   justify-content: center;

   margin-bottom: 13px;

   color: #ffffff;

   border-radius: 10px;

   background:
      linear-gradient(
         135deg,
         #ff695d 0%,
         #d52fe0 55%,
         #6a2ad8 100%
      );

   font-size: 25px;

   font-weight: 900;
}


.gme26-box-title {
   position: relative;

   z-index: 2;

   color: #101226;

   font-size: 22px;

   line-height: 1.03;

   font-weight: 900;
}


.gme26-box-title span {
   display: block;

   color: #ae25dc;
}


.gme26-box-copy {
   position: relative;

   z-index: 2;

   margin-top: 12px;

   color: #393749;

   font-size: 10px;

   line-height: 1.35;

   font-weight: 700;
}



/* ==========================================================
   BOOKS
========================================================== */

.gme26-books {
   position: absolute;

   z-index: 6;

   left: 26px;
   bottom: 57px;

   display: flex;

   align-items: flex-end;

   gap: 7px;
}


.gme26-book {
   position: relative;

   width: 88px;
   height: 145px;

   padding: 19px 7px 9px;

   overflow: hidden;

   text-align: center;

   border-radius: 5px;

   box-shadow:
      0 13px 20px
      rgba(25, 20, 50, 0.20);

   border:
      1px solid
      rgba(255, 255, 255, 0.15);
}


.gme26-book::before {
   content: "";

   position: absolute;

   width: 90px;
   height: 90px;

   left: -30px;
   bottom: -40px;

   border-radius: 50%;

   background:
      rgba(255, 255, 255, 0.10);
}


.gme26-book-1 {
   color: #ffffff;

   background:
      linear-gradient(
         160deg,
         #071333,
         #101d4e 55%,
         #4a1f64
      );
}


.gme26-book-2 {
   color: #17211b;

   background:
      linear-gradient(
         160deg,
         #fcfff9,
         #e5f4df
      );
}


.gme26-book-3 {
   color: #ffffff;

   background:
      linear-gradient(
         160deg,
         #07112e,
         #101a52 52%,
         #391c73
      );
}


.gme26-book-small {
   position: relative;

   z-index: 2;

   font-size: 11px;

   line-height: 1.1;

   font-weight: 700;
}


.gme26-book-big {
   position: relative;

   z-index: 2;

   margin-top: 3px;

   font-size: 14px;

   line-height: 1;

   font-weight: 900;
}


.gme26-book-line {
   width: 45px;
   height: 1px;

   margin: 13px auto;

   background:
      rgba(255, 255, 255, 0.35);
}


.gme26-book i {
   position: relative;

   z-index: 2;

   display: block;

   margin: 16px auto 18px;

   font-size: 32px;
}


.gme26-book-2 i {
   color: #3b9f40;
}


.gme26-book-3 i {
   color: #70bfff;
}


.gme26-book-bottom {
   position: absolute;

   left: 0;
   right: 0;
   bottom: 9px;

   z-index: 2;

   font-size: 8px;

   font-weight: 800;
}



/* ==========================================================
   DASHBOARD
========================================================== */

.gme26-dashboard {
   position: absolute;

   z-index: 4;

   width: 320px;
   height: 215px;

   right: 24px;
   top: 95px;

   overflow: hidden;

   border-radius: 10px;

   background: #ffffff;

   border:
      7px solid
      #2b2630;

   box-shadow:
      0 22px 30px
      rgba(39, 22, 49, 0.25);

   transform:
      perspective(900px)
      rotateY(-4deg);
}


.gme26-dashboard-top {
   height: 40px;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 10px;

   padding: 0 10px;

   background: #ffffff;

   border-bottom:
      1px solid #eee9f1;
}


.gme26-mini-brand {
   display: flex;

   align-items: center;

   gap: 4px;

   color: #171629;

   font-size: 8px;

   font-weight: 800;
}


.gme26-mini-brand span {
   width: 16px;
   height: 16px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 4px;

   background:
      linear-gradient(
         135deg,
         #ff615c,
         #bd32e8
      );

   font-size: 9px;
}


.gme26-search-bar {
   width: 105px;

   padding: 5px 7px;

   overflow: hidden;

   color: #9996a3;

   white-space: nowrap;

   background: #f8f7fb;

   border-radius: 5px;

   font-size: 6px;
}


.gme26-dashboard-body {
   height: calc(100% - 40px);

   display: flex;
}


.gme26-sidebar {
   width: 76px;

   flex-shrink: 0;

   padding: 10px 5px;

   background: #fbfaff;

   border-right:
      1px solid #eeeaf2;
}


.gme26-sidebar div {
   display: flex;

   align-items: center;

   gap: 4px;

   margin-bottom: 7px;

   padding: 5px;

   color: #6f6c78;

   border-radius: 4px;

   font-size: 6px;
}


.gme26-sidebar div.active {
   color: #8b32d9;

   background: #f1e7ff;
}


.gme26-dashboard-products {
   flex: 1;

   min-width: 0;

   display: grid;

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

   gap: 7px;

   padding: 12px 8px;
}


.gme26-dash-product {
   min-width: 0;

   padding: 6px;

   border:
      1px solid #eee8f3;

   border-radius: 5px;

   background: #ffffff;
}


.gme26-dash-thumb {
   height: 55px;

   display: flex;

   align-items: center;
   justify-content: center;

   margin-bottom: 6px;

   color: #8552e8;

   border-radius: 4px;

   background:
      linear-gradient(
         145deg,
         #f8ddff,
         #dfe9ff
      );

   font-size: 20px;
}


.gme26-dash-product strong {
   display: block;

   min-height: 18px;

   color: #292636;

   font-size: 6px;

   line-height: 1.15;
}


.gme26-dash-product span {
   display: block;

   margin: 4px 0;

   color: #5f5d68;

   font-size: 6px;

   font-weight: 700;
}


.gme26-dash-product button {
   width: 100%;

   padding: 4px 2px;

   border: 0;

   color: #ffffff;

   border-radius: 3px;

   background:
      linear-gradient(
         90deg,
         #982ee5,
         #c834e3
      );

   font-size: 5px;

   font-weight: 800;
}



/* ==========================================================
   AUTOMATION BADGE
========================================================== */

.gme26-auto-badge {
   position: absolute;

   z-index: 8;

   right: 12px;
   top: 73px;

   display: flex;

   align-items: center;

   gap: 8px;

   padding: 9px 12px;

   color: #ffffff;

   border-radius: 11px;

   background:
      linear-gradient(
         135deg,
         #ff6d70,
         #e536dc,
         #a32ae8
      );

   box-shadow:
      0 12px 25px
      rgba(194, 46, 207, 0.28);

   font-size: 11px;

   line-height: 1.15;

   font-weight: 800;
}


.gme26-auto-badge i {
   font-size: 18px;
}



/* ==========================================================
   STORE NOTE
========================================================== */

.gme26-store-note {
   position: absolute;

   z-index: 9;

   right: 84px;
   top: 21px;

   color: #141326;

   transform: rotate(3deg);

   font-size: 13px;

   line-height: 1.15;

   font-weight: 800;

   font-style: italic;
}


.gme26-store-note span {
   display: block;

   margin-left: 40px;

   color: #6d36d6;

   font-size: 24px;
}



/* ==========================================================
   SALES CARD
========================================================== */

.gme26-sales-card {
   position: absolute;

   z-index: 8;

   right: 17px;
   bottom: 42px;

   width: 125px;

   padding: 10px 12px;

   border:
      1px solid
      rgba(52, 39, 64, 0.07);

   border-radius: 10px;

   background: #ffffff;

   box-shadow:
      0 12px 24px
      rgba(33, 30, 43, 0.16);
}


.gme26-sales-card small {
   display: block;

   color: #464452;

   font-size: 8px;

   font-weight: 700;
}


.gme26-sales-card strong {
   display: block;

   margin-top: 2px;

   color: #111221;

   font-size: 18px;

   font-weight: 900;
}


.gme26-sales-growth {
   margin-top: 3px;

   color: #13b748;

   text-align: right;

   font-size: 10px;

   font-weight: 900;
}



/* ==========================================================
   BOTTOM FLOW
========================================================== */

.gme26-flow {
   position: absolute;

   z-index: 10;

   left: 44px;
   bottom: 12px;

   display: flex;

   align-items: center;

   gap: 10px;
}


.gme26-flow div {
   display: flex;

   align-items: center;

   gap: 6px;

   padding: 7px 13px;

   color: #333044;

   border:
      1px solid
      rgba(65, 47, 71, 0.05);

   border-radius: 100px;

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

   box-shadow:
      0 7px 18px
      rgba(66, 42, 66, 0.08);

   font-size: 10px;

   font-weight: 700;
}


.gme26-flow div:nth-of-type(1) i {
   color: #ff5961;
}


.gme26-flow div:nth-of-type(2) i {
   color: #4b9ff9;
}


.gme26-flow div:nth-of-type(3) i {
   color: #9438e8;
}


.gme26-flow > span {
   color: #9054e7;

   font-weight: 900;
}



/* ==========================================================
   OFFER CARD
========================================================== */

.gme26-offer-card {
   position: relative;

   display: block !important;

   width: 100%;

   margin-top: 9px;
/* 
padding: 20px 30px 0 30px; */
margin-top: 15px;
  padding: 46px 30px 0 30px;
   overflow: hidden;

   visibility: visible !important;

   opacity: 1 !important;

   transform: none !important;

   text-align: center;

   border-radius: 22px;

   border:
      1px solid
      rgba(218, 109, 224, 0.28);

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

   box-shadow:
      0 17px 45px
      rgba(91, 48, 89, 0.08);
}
.gme26-offer-2card{
padding: 30px 30px 0px 30px;
}

.gme26-offer-card::before {
   content: "";

   position: absolute;

   width: 300px;
   height: 160px;

   top: -100px;
   left: 50%;

   transform: translateX(-50%);

   border-radius: 50%;

   background:
      rgba(237, 47, 214, 0.07);

   filter: blur(40px);

   pointer-events: none;
}


.gme26-offer-title {
   position: relative;

   z-index: 2;

   margin: 0;

   color: #121326;

font-size: clamp( 30px, 4vw, 40px );

   line-height: 1.05;

   font-weight: 950;

   letter-spacing: -2px;
}


.gme26-offer-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #cc34ed 0%,
         #ec25c5 50%,
         #df18dd 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gme26-offer-sub {
   position: relative;

   z-index: 2;

   margin-top: 14px;

   color: #43445b;

   font-size:
      clamp(
         18px,
         2vw,
         27px
      );

   line-height: 1.3;

   font-weight: 700;
}



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

.gme26-main-btn {
   position: relative;

   z-index: 2;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 16px;

   width: 100%;

   margin-top: 25px;

   padding: 20px 20px;

   overflow: hidden;

   color: #ffffff !important;

   text-decoration: none !important;

   border-radius: 10px;

   background:
      linear-gradient(
         90deg,
         #ff8d66 0%,
         #fa4c9c 48%,
         #c81ce1 100%
      );

   box-shadow:
      0 15px 30px
      rgba(215, 50, 177, 0.20);

   font-size:
      clamp(
         17px,
         2vw,
         23px
      );

   line-height: 1.3;

   font-weight: 900;

   transition:
      transform .25s ease,
      box-shadow .25s ease;
}


.gme26-main-btn:hover {
   color: #ffffff !important;

   transform: translateY(-3px);

   box-shadow:
      0 20px 38px
      rgba(215, 50, 177, 0.28);
}


.gme26-main-btn i {
   transition:
      transform .25s ease;
}


.gme26-main-btn:hover i {
   transform: translateX(5px);
}


.gme26-btn-ripple {
   position: absolute;

   width: 20px;
   height: 20px;

   border-radius: 50%;

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

   transform:
      translate(-50%, -50%)
      scale(0);

   pointer-events: none;

   animation:
      gme26Ripple .65s ease-out;
}


@keyframes gme26Ripple {

   to {
      opacity: 0;

      transform:
         translate(-50%, -50%)
         scale(14);
   }

}



/* ==========================================================
   OFFER POINTS
========================================================== */

.gme26-offer-points {
   position: relative;

   z-index: 2;

   display: grid;

   grid-template-columns:
      1fr auto 1fr;

   align-items: center;

   gap: 22px;

   margin-top: 24px;

   padding: 0 15px;
}


.gme26-offer-point {
   display: flex;

   align-items: center;

   justify-content: center;

   gap: 14px;

   text-align: left;
}


.gme26-offer-point-icon {
   width: 48px;
   height: 48px;

   min-width: 48px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 14px;

   background:
      linear-gradient(
         135deg,
         #ff775f,
         #ef3ac2,
         #b72ce5
      );

   box-shadow:
      0 8px 18px
      rgba(208, 48, 193, 0.20);

   font-size: 22px;
}


.gme26-offer-point strong,
.gme26-offer-point span {
   display: block;
}


.gme26-offer-point strong {
   color: #151627;

   font-size: 16px;

   line-height: 1.3;

   font-weight: 900;
}


.gme26-offer-point span {
   margin-top: 2px;

   color: #232439;

   font-size: 16px;

   line-height: 1.3;

   font-weight: 700;
}


.gme26-offer-divider {
   width: 1px;
   height: 55px;

   background:
      rgba(30, 30, 45, 0.12);
}



/* ==========================================================
   DEVICES
========================================================== */

.gme26-device-row {
   position: relative;

   z-index: 2;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 17px;

   margin-top: 24px;

   padding-top: 18px;

   color: #343549;

   border-top:
      1px solid
      rgba(30, 30, 45, 0.12);

   font-size: 13px;

   font-weight: 600;
}


.gme26-device-icons {
   display: flex;

   align-items: center;

   gap: 11px;

   color: #17192f;

   font-size: 19px;
}


.gme26-device-row span {
   margin: 0 4px;

   color: #b13de2;
}



/* ==========================================================
   FEATURES WRAPPER
========================================================== */

.gme26-features-wrap {
   position: relative;

   display: flex !important;

   flex-direction: column;

   gap: 10px;

   width: 100%;

   visibility: visible !important;

   opacity: 1 !important;
}

.timer-box-top{
margin-top: -50px;
}

/* ==========================================================
   FEATURE CARD
========================================================== */

.gme26-feature-card {
   position: relative;

   display: flex !important;

   align-items: center;

   gap: 17px;

   width: 100%;

   min-height: 76px;

/* padding: 16px 20px 16px 14px; */
padding: 22px 14px 22px 14px;
padding: 16px 14px 16px 14px;
   overflow: hidden;

   visibility: visible !important;

   opacity: 1 !important;

   transform: none !important;

   border-radius: 15px;

   border:
      1px solid
      rgba(75, 52, 88, 0.12);

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

   box-shadow:
      0 7px 18px
      rgba(76, 51, 75, 0.07);

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


.gme26-feature-card::after {
   content: "";

   position: absolute;

   width: 100px;
   height: 100px;

   right: -60px;
   top: -55px;

   border-radius: 50%;

   background:
      rgba(226, 71, 215, 0.04);

   pointer-events: none;
}


.gme26-feature-card:hover {
   transform:
      translateY(-3px) !important;

   border-color:
      rgba(213, 57, 203, 0.23);

   box-shadow:
      0 12px 26px
      rgba(76, 51, 75, 0.11);
}



/* ==========================================================
   FEATURE ICON
========================================================== */

.gme26-feature-icon {
   position: relative;

   z-index: 2;

   width: 55px;
   height: 55px;

   min-width: 55px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 12px;
background: linear-gradient( 135deg, #ff9e59 0%, #ff835d 28%, #ff596b 62%, #ff845d 100% );
   /* background:
      linear-gradient(
         135deg,
         #ff765f 0%,
         #ee3bd4 52%,
         #a22cf1 100%
      ); */

   box-shadow:
      0 8px 16px
      rgba(213, 53, 193, 0.20);

   font-size: 21px;
}


.gme26-feature-card:nth-child(even)
.gme26-feature-icon {
background: linear-gradient( 135deg, #ff9e59 0%, #ff835d 28%, #ff596b 62%, #ff845d 100% );
}

.opus-limited {
  padding: 11px 15px 13px;
  text-align: center;
  color: #342d37;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  background: #fff;
  border-radius: 0 0 24px 24px;
}
hr:not([size]) {
  height: 1px;
}
hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: .25;
}
.hurry {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, #da53d0 51.5%, rgba(0, 0, 0, 0.00) 100%);
  display: inline-block;
  padding: 10px 50px;
}
/* ==========================================================
   FEATURE TEXT
========================================================== */

.gme26-feature-text {
   position: relative;

   z-index: 2;

   flex: 1;

   min-width: 0;

   color: #242536;

   font-size: 14px;

   line-height: 1.48;

   font-weight: 500;
}


.gme26-feature-text strong {
   color: #101122;

   font-weight: 900;
}


.gme26-feature-text span {
   color: #35364a;

   font-weight: 500;
}



/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width: 1400px) {

   .gme26-showcase-section .container {
      max-width: 1320px;
   }


   .gme26-product-stage {
  
  min-height: 100%;
   }


   .gme26-feature-card {
      min-height: 78px;
   }


   .gme26-feature-text {
     font-size: 16px;
   }

}



/* ==========================================================
   DESKTOP / SMALL LAPTOP
========================================================== */

@media (max-width: 1199px) {

   .gme26-product-stage {
  min-height: 100%;
   }


   .gme26-product-box {
      left: 110px;

      transform:
         scale(.90)
         perspective(900px)
         rotateY(-8deg);

      transform-origin:
         top left;
   }


   .gme26-dashboard {
      width: 295px;

      right: 15px;
   }


   .gme26-books {
      transform: scale(.90);

      transform-origin:
         bottom left;
   }


   .gme26-app-nav {
      gap: 16px;
   }


   .gme26-feature-text {
      font-size: 13px;

      line-height: 1.4;
   }


   .gme26-feature-icon {
      width: 50px;
      height: 50px;

      min-width: 50px;
   }

}



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

@media (max-width: 991px) {

   .gme26-showcase-section {
      padding:
         40px 0
         50px;
   }


   .gme26-product-stage {
      min-height: 100%;
   }


   .gme26-product-box {
      left: 150px;

      transform:
         scale(1)
         perspective(900px)
         rotateY(-8deg);
   }


   .gme26-dashboard {
      width: 345px;

      right: 25px;
   }


   .gme26-books {
      transform: scale(1);
   }


   .gme26-features-wrap {
      margin-top: 5px;
   }


   .gme26-feature-card {
      min-height: 78px;

      padding:
         13px 18px;
   }


   .gme26-feature-text {
      font-size: 14px;

      line-height: 1.5;
   }

}



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

@media (max-width: 767px) {

   .gme26-showcase-section {
      padding:
         30px 0
         40px;
   }


   .gme26-browser-card {
      border-radius: 16px;
   }


   .gme26-browser-bar {
      min-height: 42px;

      gap: 11px;

      padding: 0 12px;
   }


   .gme26-browser-url {
      padding: 6px 10px;

      font-size: 11px;
   }


   .gme26-browser-dots {
      gap: 5px;
   }


   .gme26-browser-dots span {
      width: 7px;
      height: 7px;
   }


   .gme26-app-header {
      padding: 13px;
   }


   .gme26-brand-icon {
      width: 34px;
      height: 34px;

      min-width: 34px;

      font-size: 19px;
   }


   .gme26-brand-name {
      font-size: 19px;
   }


   .gme26-app-nav {
      display: none;
   }


   .gme26-product-stage {
    min-height: 100%;

      margin:
         0 10px
         10px;
   }


   .gme26-ready-note {
      left: 18px;
      top: 30px;
   }


   .gme26-product-box {
      left: 50%;

      top: 45px;

      transform:
         translateX(-50%)
         scale(.90);

      transform-origin:
         top center;
   }


   .gme26-dashboard {
      width:
         calc(
            100% - 38px
         );

      height: 205px;

      left: 19px;
      right: auto;

      top: 235px;

      transform: none;
   }


   .gme26-books {
      left: 22px;

      bottom: 53px;

      transform:
         scale(.72);

      transform-origin:
         bottom left;
   }


   .gme26-auto-badge {
      right: 16px;

      top: 198px;

      transform:
         scale(.84);

      transform-origin:
         top right;
   }


   .gme26-store-note {
      display: none;
   }


   .gme26-sales-card {
      right: 20px;

      bottom: 47px;

      transform:
         scale(.84);

      transform-origin:
         bottom right;
   }


   .gme26-flow {
      left: 50%;

      bottom: 9px;

      gap: 5px;

      transform:
         translateX(-50%);
   }


   .gme26-flow div {
      gap: 4px;

      padding: 6px 9px;

      font-size: 9px;
   }


   .gme26-flow > span {
      font-size: 10px;
   }


   .gme26-offer-card {
      margin-top: 16px;

      padding:
         32px 18px
         20px;

      border-radius: 18px;
   }


   .gme26-offer-title {
      font-size: 37px;

      letter-spacing: -1.3px;
   }


   .gme26-offer-sub {
      font-size: 19px;
   }


   .gme26-main-btn {
      padding:
         17px 12px;

      font-size: 17px;
   }


   .gme26-offer-points {
      grid-template-columns: 1fr;

      gap: 17px;

      padding: 0;
   }


   .gme26-offer-divider {
      width: 100%;
      height: 1px;
   }


   .gme26-offer-point {
      justify-content: flex-start;

      width: 100%;
      max-width: 245px;

      margin: auto;
   }


   .gme26-device-row {
      flex-direction: column;

      gap: 10px;
   }


   .gme26-features-wrap {
      gap: 10px;
   }


   .gme26-feature-card {
      gap: 13px;

      min-height: auto;

      padding:
         12px 13px;

      border-radius: 14px;
   }


   .gme26-feature-icon {
      width: 48px;
      height: 48px;

      min-width: 48px;

      font-size: 18px;
   }


   .gme26-feature-text {
      font-size: 13.5px;

      line-height: 1.48;
   }

}



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

@media (max-width: 480px) {

   .gme26-showcase-section {
      padding:
         24px 0
         34px;
   }


   .gme26-browser-url {
      max-width: 190px;

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis;
   }


   .gme26-product-stage {
      min-height: 100%;
   }


   .gme26-product-box {
      top: 45px;

      transform:
         translateX(-50%)
         scale(.76);
   }


   .gme26-ready-note {
      top: 33px;
      left: 11px;

      font-size: 11px;
   }


   .gme26-note-arrow {
      font-size: 22px;
   }


   .gme26-dashboard {
      top: 215px;

      height: 190px;
   }


   .gme26-dashboard-products {
      gap: 4px;

      padding:
         8px 5px;
   }


   .gme26-sidebar {
      width: 60px;
   }


   .gme26-books {
      left: 8px;

      transform:
         scale(.61);

      transform-origin:
         bottom left;
   }


   .gme26-sales-card {
      right: 8px;

      transform:
         scale(.73);
   }


   .gme26-auto-badge {
      right: 8px;

      top: 180px;

      transform:
         scale(.70);
   }


   .gme26-flow {
      width: 100%;

      justify-content: center;

      gap: 3px;
   }


   .gme26-flow div {
      padding:
         5px 7px;

      font-size: 8px;
   }


   .gme26-offer-card {
      padding:
         28px 14px
         18px;
   }


   .gme26-offer-title {
      font-size: 31px;

      line-height: 1.1;
   }


   .gme26-offer-sub {
      margin-top: 10px;

      font-size: 17px;
   }


   .gme26-main-btn {
      margin-top: 20px;

      padding:
         15px 10px;

      gap: 9px;

      font-size: 15px;

      border-radius: 9px;
   }


   .gme26-offer-point-icon {
      width: 44px;
      height: 44px;

      min-width: 44px;

      font-size: 19px;
   }


   .gme26-offer-point strong {
      font-size: 15px;
   }


   .gme26-offer-point span {
      font-size: 14px;
   }


   .gme26-device-row {
      font-size: 12px;

      line-height: 1.5;
   }


   .gme26-feature-card {
      align-items: flex-start;

      gap: 11px;

      border-radius: 13px;
   }


   .gme26-feature-icon {
      width: 44px;
      height: 44px;

      min-width: 44px;

      border-radius: 10px;

      font-size: 17px;
   }


   .gme26-feature-text {
      font-size: 12.5px;

      line-height: 1.45;
   }

}



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

@media (max-width: 380px) {

   .gme26-browser-bar {
      padding:
         0 9px;
   }


   .gme26-browser-url {
      max-width: 165px;

      padding:
         6px 8px;
   }


   .gme26-product-stage {
     min-height: 100%;
   }


   .gme26-product-box {
      transform:
         translateX(-50%)
         scale(.70);
   }


   .gme26-dashboard {
      width:
         calc(
            100% - 20px
         );

      left: 10px;
   }


   .gme26-sidebar {
      width: 53px;
   }


   .gme26-sidebar div {
      font-size: 5px;
   }


   .gme26-books {
      left: 2px;

      transform:
         scale(.54);
   }


   .gme26-sales-card {
      transform:
         scale(.67);
   }


   .gme26-offer-title {
      font-size: 28px;
   }


   .gme26-offer-sub {
      font-size: 15px;
   }


   .gme26-main-btn {
      font-size: 14px;
   }


   .gme26-feature-icon {
      width: 40px;
      height: 40px;

      min-width: 40px;

      font-size: 16px;
   }


   .gme26-feature-text {
      font-size: 12px;

      line-height: 1.42;
   }

}

/* =========================================================
   GUMROAD ENGINE - SUPPORT DESK CAROUSEL
========================================================= */

.gumsupport26-section {
   position: relative;
   overflow: hidden;

   padding: 55px 0 65px;

   /* background:
      radial-gradient(
         circle at 50% 0%,
         rgba(255, 132, 94, 0.10),
         transparent 33%
      ),
      radial-gradient(
         circle at 95% 55%,
         rgba(212, 66, 239, 0.07),
         transparent 28%
      ),
      linear-gradient(
         180deg,
         #fffaf6 0%,
         #ffffff 46%,
         #fff9fc 100%
      ); */
      background: #000 url(../images/sec-2.png) no-repeat center bottom/ cover;
    overflow: hidden;
}


.gumsupport26-section * {
   box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.gumsupport26-head {
   position: relative;
   z-index: 2;



   margin: 0 auto 34px;
}


.gumsupport26-eyebrow {
   display: inline-flex;

   align-items: center;
   justify-content: center;

   gap: 9px;

   padding: 8px 15px;

   color: #322b3b;

   border:
      1px solid rgba(255, 102, 94, 0.15);

   border-radius: 100px;

   background: #ffffff;

   box-shadow:
      0 8px 22px rgba(54, 35, 53, 0.06);

   font-size: 13px;

   line-height: 1;

   font-weight: 800;

   letter-spacing: .5px;
}


.gumsupport26-live-dot {
   width: 9px;
   height: 9px;

   border-radius: 50%;

   background: #24c766;

   box-shadow:
      0 0 0 4px rgba(36, 199, 102, 0.10);
}


.gumsupport26-title {
margin: 10px 0 0;
  color: #fff;
  font-size: clamp(22px, 4vw, 26px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
}


.gumsupport26-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff855c,
         #ff5c73,
         #cf34dd
      );

   -webkit-background-clip: text;
   background-clip: text;

   -webkit-text-fill-color: transparent;
}


/* =========================================================
   SLIDER WRAPPER
========================================================= */

.gumsupport26-slider-wrap {
   position: relative;

   max-width: 1260px;

   margin: 0 auto;
}


.gumsupport26-slider {
   overflow: hidden;

   padding: 18px 7px 26px;
}


.gumsupport26-track {
   display: flex;

   align-items: stretch;

   gap: 20px;

   transition:
      transform .55s
      cubic-bezier(.22,.8,.27,1);
}


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

.gumsupport26-card {
   position: relative;

   flex:
      0 0
      calc(
         (100% - 40px) / 3
      );

   min-width: 0;

   overflow: hidden;

   border:
      1px solid
      rgba(84, 62, 94, 0.10);

   border-radius: 18px;

   background: #ffffff;

   box-shadow:
      0 15px 40px rgba(75, 48, 72, 0.09);

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


.gumsupport26-card:hover {
   transform: translateY(-5px);

   border-color:
      rgba(235, 70, 183, 0.20);

   box-shadow:
      0 22px 48px rgba(75, 48, 72, 0.14);
}


/* =========================================================
   WINDOW TOP
========================================================= */

.gumsupport26-window-bar {
   min-height: 43px;

   display: flex;

   align-items: center;

   justify-content: space-between;

   padding: 0 14px;

   background:
      linear-gradient(
         90deg,
         #fff7f5,
         #fbf4ff
      );

   border-bottom:
      1px solid rgba(67, 52, 77, 0.07);
}


.gumsupport26-window-dots {
   display: flex;

   align-items: center;

   gap: 5px;
}


.gumsupport26-window-dots span {
   display: block;

   width: 7px;
   height: 7px;

   border-radius: 50%;
}


.gumsupport26-window-dots span:nth-child(1) {
   background: #ff6d65;
}


.gumsupport26-window-dots span:nth-child(2) {
   background: #ffba3e;
}


.gumsupport26-window-dots span:nth-child(3) {
   background: #32c967;
}


.gumsupport26-window-label {
   color: #8d8993;

   font-size: 11px;

   font-weight: 700;

   letter-spacing: .25px;
}


/* =========================================================
   BODY
========================================================= */

.gumsupport26-card-body {
   padding: 20px;
}


/* =========================================================
   USER
========================================================= */

.gumsupport26-user-row {
   display: flex;

   align-items: center;

   gap: 11px;
}


.gumsupport26-avatar {
width: 60px;
  height: 60px;

   min-width: 46px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 13px;

   background:
      linear-gradient(
         135deg,
         #ff8262,
         #f543b5,
         #9c3be6
      );

   box-shadow:
      0 8px 18px rgba(224, 61, 176, 0.20);

   font-size: 15px;

   font-weight: 900;
}


.gumsupport26-user-info {
   min-width: 0;

   flex: 1;
}


.gumsupport26-user-name {
   color: #14131e;

   font-size: 16px;

   line-height: 1.2;

   font-weight: 900;
}


.gumsupport26-location {
   margin-top: 3px;

   color: #777481;

   font-size: 12px;

   font-weight: 500;
}


.gumsupport26-status {
   display: inline-flex;

   align-items: center;

   gap: 5px;

   padding: 5px 8px;

   color: #378452;

   border-radius: 100px;

   background: #eefbf2;

   font-size: 10px;

   line-height: 1;

   font-weight: 800;
}


.gumsupport26-status span {
   width: 6px;
   height: 6px;

   border-radius: 50%;

   background: #2ac264;
}


/* =========================================================
   VIA
========================================================= */

.gumsupport26-via {
   display: inline-flex;

   align-items: center;

   gap: 6px;

   margin-top: 16px;

   padding: 6px 10px;

   color: #9d35c5;

   border-radius: 8px;

   background: #fbf2ff;

   font-size: 11px;

   line-height: 1;

   font-weight: 800;
}


.gumsupport26-via i {
   color: #ec5e91;
}


/* =========================================================
   MESSAGE
========================================================= */

.gumsupport26-message {
   position: relative;

   min-height: 220px;

   margin-top: 13px;

   padding: 16px;

   color: #3f3c48;

   border:
      1px solid
      rgba(75, 60, 84, 0.08);

   border-radius: 12px;

   background:
      linear-gradient(
         145deg,
         #fffdfc,
         #fff9fc
      );

   font-size: 14px;

   line-height: 1.65;

   font-weight: 500;
}


.gumsupport26-message::before {
   content: "“";

   position: absolute;

   right: 10px;
   top: -3px;

   color:
      rgba(213, 54, 190, 0.08);

   font-family: Georgia, serif;

   font-size: 72px;

   line-height: 1;

   pointer-events: none;
}


.gumsupport26-message strong {
   color: #191722;

   font-weight: 900;
}


/* =========================================================
   FOOTER
========================================================= */

.gumsupport26-ticket-footer {
   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 10px;

   margin-top: 15px;

   padding-top: 14px;

   border-top:
      1px solid rgba(70, 54, 78, 0.08);
}


.gumsupport26-ticket-id {
   display: flex;

   align-items: center;

   gap: 6px;

   color: #777380;

   font-size: 11px;

   font-weight: 700;
}


.gumsupport26-verified {
   display: flex;

   align-items: center;

   gap: 5px;

   color: #33a65a;

   font-size: 11px;

   font-weight: 800;
}


/* =========================================================
   ARROWS
========================================================= */

.gumsupport26-arrow {
   position: absolute;

   z-index: 10;

   top: 50%;

   width: 46px;
   height: 46px;

   display: flex;

   align-items: center;
   justify-content: center;

   padding: 0;

   color: #ffffff;

   border: 0;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #ff785e,
         #e63ccb,
         #9c3ce8
      );

   box-shadow:
      0 10px 24px rgba(198, 55, 195, 0.22);

   transform: translateY(-50%);

   cursor: pointer;

   transition:
      transform .2s ease,
      box-shadow .2s ease;
}


.gumsupport26-arrow:hover {
   box-shadow:
      0 14px 28px rgba(198, 55, 195, 0.30);
}


.gumsupport26-prev {
   left: -23px;
}


.gumsupport26-next {
   right: -23px;
}


/* =========================================================
   DOTS
========================================================= */

.gumsupport26-dots {
   display: flex;

   align-items: center;
   justify-content: center;

   gap: 7px;

   margin-top: 3px;
}


.gumsupport26-dot {
   width: 8px;
   height: 8px;

   padding: 0;

   border: 0;

   border-radius: 20px;

   background: #ddd5df;

   cursor: pointer;

   transition: all .25s ease;
}


.gumsupport26-dot.active {
   width: 25px;

   background:
      linear-gradient(
         90deg,
         #ff755e,
         #d939d7
      );
}


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

@media (max-width: 1199px) {

   .gumsupport26-slider-wrap {
      max-width: 920px;
   }


   .gumsupport26-card {
      flex:
         0 0
         calc(
            (100% - 20px) / 2
         );
   }


   .gumsupport26-message {
      min-height: 215px;
   }

}


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

@media (max-width: 767px) {

   .gumsupport26-section {
      padding: 40px 0 45px;
   }


   .gumsupport26-head {
      margin-bottom: 24px;
   }


   .gumsupport26-title {
      font-size: 32px;

      letter-spacing: -1px;
   }


   .gumsupport26-slider {
      overflow: visible;

      padding:
         10px 10px
         22px;
   }


   .gumsupport26-slider-wrap {
      overflow: hidden;
   }


   .gumsupport26-track {
      gap: 12px;
   }


   .gumsupport26-card {
      flex: 0 0 88%;
   }


   .gumsupport26-card-body {
      padding: 17px;
   }


   .gumsupport26-message {
      min-height: auto;

      font-size: 13.5px;
   }


   .gumsupport26-arrow {
      display: none;
   }

}


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

@media (max-width: 480px) {

   .gumsupport26-section {
      padding: 34px 0 38px;
   }


   .gumsupport26-eyebrow {
      padding: 7px 11px;

      font-size: 10px;
   }


   .gumsupport26-title {
      font-size: 28px;
   }


   .gumsupport26-card {
      flex: 0 0 94%;
   }


   .gumsupport26-avatar {
      width: 42px;
      height: 42px;

      min-width: 42px;
   }


   .gumsupport26-user-name {
      font-size: 14px;
   }


   .gumsupport26-location {
      font-size: 11px;
   }


   .gumsupport26-status {
      display: none;
   }


   .gumsupport26-message {
      padding: 14px;

      font-size: 13px;

      line-height: 1.6;
   }


   .gumsupport26-ticket-footer {
      align-items: flex-start;

      flex-direction: column;
   }

}

/* ==========================================================
   GUMROAD ENGINE - 3 STEPS
   ULTRA PREMIUM WHITE THEME
========================================================== */

.gmehow26-section {
   position: relative;

   overflow: hidden;

   padding: 70px 0 90px;

   color: #15131d;

   background:
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fffdfb 45%,
         #ffffff 100%
      );

   isolation: isolate;
}


.gmehow26-section * {
   box-sizing: border-box;
}


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

.gmehow26-bg {
   position: absolute;

   inset: 0;

   z-index: -1;

   pointer-events: none;
}


.gmehow26-grid {
   position: absolute;

   inset: 0;

   opacity: .28;

   background-image:
      linear-gradient(
         rgba(107, 74, 255, .035) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(107, 74, 255, .035) 1px,
         transparent 1px
      );

   background-size:
      48px 48px;

   -webkit-mask-image:
      linear-gradient(
         to bottom,
         rgba(0,0,0,.8),
         transparent 88%
      );

   mask-image:
      linear-gradient(
         to bottom,
         rgba(0,0,0,.8),
         transparent 88%
      );
}


.gmehow26-orb {
   position: absolute;

   border-radius: 50%;

   filter: blur(85px);
}


.gmehow26-orb-one {
   width: 430px;
   height: 430px;

   top: 80px;
   left: -220px;

   background:
      rgba(255, 126, 89, .09);
}


.gmehow26-orb-two {
   width: 480px;
   height: 480px;

   right: -260px;
   top: 42%;

   background:
      rgba(190, 50, 235, .07);
}


/* ==========================================================
   HEADER
========================================================== */

.gmehow26-header {
   position: relative;

   margin-bottom: 90px;
}


.gmehow26-eyebrow {
   display: flex;

   align-items: center;
   justify-content: center;

   gap: 13px;

   color: #817b8a;

   font-size: 11px;

   line-height: 1;

   font-weight: 850;

   letter-spacing: 2.1px;
}


.gmehow26-eyebrow > span {
   width: 44px;
   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         #ff7660
      );
}


.gmehow26-eyebrow > span:last-child {
   background:
      linear-gradient(
         90deg,
         #ff7660,
         transparent
      );
}


.gmehow26-title {
   max-width: 990px;

   margin:
      14px auto 0;

   color: #111017;

   font-size:
      clamp(
         36px,
         4.4vw,
         46px
      );

   line-height: 1.04;

   font-weight: 950;

   letter-spacing: -2.8px;
}


.gmehow26-title > span {
   display: block;

   margin-top: 5px;

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff965c 0%,
         #ff6d69 32%,
         #ee42a6 67%,
         #9e3bf0 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmehow26-subtitle {
   display: inline-flex;

   align-items: center;

   justify-content: center;

   margin-top: 18px;

   padding: 10px 19px;

   color: #25212d;

   border:
      1px solid
      rgba(222, 67, 177, .12);

   border-radius: 100px;

   background:
      rgba(255,255,255,.94);

   box-shadow:
      0 8px 28px
      rgba(76, 44, 70, .07);

   font-size: 20px;

   line-height: 1.3;

   font-weight: 800;
}


.gmehow26-title-mark {
   display: flex;

   align-items: center;

   justify-content: center;

   gap: 4px;

   margin-top: 18px;
}


.gmehow26-title-mark i {
   display: block;

   width: 22px;
   height: 3px;

   border-radius: 50px;

   background:
      linear-gradient(
         90deg,
         #ff795f,
         #b23deb
      );

   transform: skewX(-30deg);
}


.gmehow26-title-mark i:nth-child(2) {
   width: 12px;
}


.gmehow26-title-mark i:nth-child(3) {
   width: 6px;
}


/* ==========================================================
   STEP
========================================================== */

.gmehow26-step {
   position: relative;

   z-index: 4;

   margin-bottom: 90px;
}


.gmehow26-step-three {
   margin-bottom: 0;
}


/* ==========================================================
   IMAGE / MEDIA SIDE
========================================================== */

.gmehow26-media {
   position: relative;

   width: 100%;

   padding-top: 48px;
}


.gmehow26-media-left {
   padding-left: 0px;

   padding-right: 0px;
}


.gmehow26-media-right {
   padding-left: 0px;

   padding-right: 0px;
}


/* ==========================================================
   LARGE NUMBER
========================================================== */

.gmehow26-number {
   position: absolute;

   top: 0;

   z-index: 0;

   color: #f3efff;

   font-size: 76px;

   line-height: .85;

   font-weight: 950;

   letter-spacing: -5px;
}


.gmehow26-media-left
.gmehow26-number {
   left: 0;
}


.gmehow26-media-right
.gmehow26-number {
   right: 0;
}


/* ==========================================================
   SCREEN
========================================================== */

.gmehow26-screen {
   position: relative;

   z-index: 2;

   overflow: hidden;

   width: 100%;

   border:
      1px solid
      rgba(108, 80, 170, .13);

   border-radius: 15px;

   background: #ffffff;

   box-shadow:
      0 25px 55px
      rgba(62, 43, 90, .13),

      0 3px 12px
      rgba(60, 38, 73, .04);

   transition:
      transform .35s ease,
      box-shadow .35s ease;
}


.gmehow26-media:hover
.gmehow26-screen {
   transform: translateY(-5px);

   box-shadow:
      0 31px 68px
      rgba(62, 43, 90, .16);
}


/* ==========================================================
   SCREEN TOP
========================================================== */

.gmehow26-screen-top {
   min-height: 40px;

   display: flex;

   align-items: center;

   justify-content: space-between;

   padding:
      0 14px;

   background:
      linear-gradient(
         90deg,
         #ffffff,
         #fcfaff
      );

   border-bottom:
      1px solid
      rgba(73, 57, 92, .07);
}


.gmehow26-screen-dots {
   display: flex;

   align-items: center;

   gap: 5px;
}


.gmehow26-screen-dots span {
   width: 7px;
   height: 7px;

   display: block;

   border-radius: 50%;
}


.gmehow26-screen-dots span:nth-child(1) {
   background: #ff7665;
}


.gmehow26-screen-dots span:nth-child(2) {
   background: #ffbc45;
}


.gmehow26-screen-dots span:nth-child(3) {
   background: #35ca6d;
}


.gmehow26-screen-label {
   color: #7e7689;

   font-size: 9px;

   line-height: 1;

   font-weight: 850;

   letter-spacing: .7px;
}


/* ==========================================================
   SCREEN IMAGE
========================================================== */

.gmehow26-image-wrap {
   position: relative;

   overflow: hidden;

   background:
      linear-gradient(
         135deg,
         #faf9ff,
         #fff8f6
      );
}


.gmehow26-step-image {
   display: block;

   width: 100%;

   height: auto;

   margin: 0;
}


/* ==========================================================
   FLOATING ICON
========================================================== */

.gmehow26-float-icon {
   position: absolute;

   z-index: 8;

   width: 48px;
   height: 48px;

   right: -4px;
   bottom: -18px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border:
      4px solid #ffffff;

   border-radius: 13px;

   background:
      linear-gradient(
         135deg,
         #ff8260,
         #ef43ac 52%,
         #9f3bea
      );

   box-shadow:
      0 12px 30px
      rgba(190, 52, 180, .24);

   font-size: 21px;
}


.gmehow26-media-right
.gmehow26-float-icon {
   right: auto;

   left: -4px;
}


/* ==========================================================
   MINI CHIP
========================================================== */

.gmehow26-mini-chip {
   position: absolute;

   z-index: 7;

   left: 55px;
   bottom: -18px;

   display: inline-flex;

   align-items: center;

   gap: 7px;

   padding:
      8px 13px;

   color: #49404e;

   border:
      1px solid
      rgba(88, 66, 105, .09);

   border-radius: 100px;

   background:
      rgba(255,255,255,.96);

   box-shadow:
      0 10px 25px
      rgba(67, 46, 77, .10);

   font-size: 11px;

   line-height: 1;

   font-weight: 750;
}


.gmehow26-mini-chip i {
   color: #da3fc1;
}


.gmehow26-media-right
.gmehow26-mini-chip {
   left: auto;

   right: 55px;
}


/* ==========================================================
   CONTENT
========================================================== */

.gmehow26-content {
   position: relative;

   max-width: 560px;

   padding: 5px 8px;
}


.gmehow26-step-label {
   display: inline-flex;

   align-items: center;

   gap: 8px;

   margin-bottom: 15px;

   padding:
      7px 10px;

   color: #a13be0;

   border:
      1px solid
      rgba(176, 55, 222, .16);

   border-radius: 5px;

   background:
      linear-gradient(
         135deg,
         #fff9fc,
         #fbf8ff
      );

   font-size: 10px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: .8px;
}


.gmehow26-step-label i {
   color: #ff715f;
}


.gmehow26-content h3 {
   margin: 0;

   color: #111018;

   font-size:
      clamp(
         30px,
         3vw,
         44px
      );

   line-height: 1.05;

   font-weight: 950;

   letter-spacing: -1.7px;
}


.gmehow26-rule {
   width: 54px;
   height: 4px;

   margin:
      18px 0 20px;

   border-radius: 50px;

   background:
      linear-gradient(
         90deg,
         #ff8e5e,
         #f04aa6,
         #9745ee
      );
}


.gmehow26-content p {
   margin:
      0 0 15px;

   color: #57515d;

   font-size: 16px;

   line-height: 1.7;

   font-weight: 500;
}


/* ==========================================================
   STEP 1 HIGHLIGHT BOX
========================================================== */

.gmehow26-highlight-box {
   position: relative;

   display: flex;

   align-items: center;

   gap: 13px;

   margin-top: 22px;

   padding: 15px;

   overflow: hidden;

   border:
      1px solid
      rgba(212, 65, 184, .12);

   border-radius: 12px;

   background:
      linear-gradient(
         135deg,
         #fff9f7,
         #fdf8ff
      );
}


.gmehow26-highlight-box::after {
   content: "";

   position: absolute;

   width: 100px;
   height: 100px;

   right: -60px;
   top: -60px;

   border-radius: 50%;

   background:
      rgba(221, 64, 190, .07);
}


.gmehow26-highlight-icon {
   width: 42px;
   height: 42px;

   min-width: 42px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 10px;

   background:
      linear-gradient(
         135deg,
         #ff805f,
         #e83ebf,
         #993fe9
      );

   box-shadow:
      0 8px 18px
      rgba(207, 57, 180, .18);

   font-size: 19px;
}


.gmehow26-highlight-box strong,
.gmehow26-highlight-box span {
   display: block;
}


.gmehow26-highlight-box strong {
   color: #1a1720;

   font-size: 14px;

   line-height: 1.3;

   font-weight: 900;
}


.gmehow26-highlight-box span {
   margin-top: 3px;

   color: #69616e;

   font-size: 12px;

   line-height: 1.45;

   font-weight: 500;
}


/* ==========================================================
   STEP 2 FEATURE GRID
========================================================== */

.gmehow26-feature-grid {
   display: grid;

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

   gap: 9px;

   margin-top: 21px;
}


.gmehow26-feature {
   display: flex;

   align-items: center;

   gap: 9px;

   min-height: 44px;

   padding:
      9px 11px;

   color: #3e3944;

   border:
      1px solid
      rgba(96, 71, 113, .10);

   border-radius: 8px;

   background: #ffffff;

   box-shadow:
      0 6px 17px
      rgba(61, 44, 72, .045);

   font-size: 12px;

   line-height: 1.3;

   font-weight: 700;

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


.gmehow26-feature:hover {
   transform: translateY(-2px);

   border-color:
      rgba(214, 58, 184, .20);

   box-shadow:
      0 10px 22px
      rgba(61, 44, 72, .08);
}


.gmehow26-feature i {
   width: 25px;
   height: 25px;

   min-width: 25px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #b43cdf;

   border-radius: 6px;

   background:
      #faf2ff;
}


/* ==========================================================
   STEP 2 STRIP
========================================================== */

.gmehow26-bottom-strip {
   display: flex;

   align-items: center;

   gap: 9px;

   margin-top: 13px;

   padding: 11px 13px;

   color: #26212c;

   border-left:
      3px solid #de3fbd;

   background:
      linear-gradient(
         90deg,
         #fff6fb,
         #ffffff
      );

   font-size: 12px;

   line-height: 1.45;

   font-weight: 800;
}


.gmehow26-bottom-strip i {
   color: #ff765f;
}


/* ==========================================================
   STEP 3 FLOW
========================================================== */

.gmehow26-flow {
   display: flex;

   align-items: center;

   gap: 12px;

   margin-top: 23px;
}


.gmehow26-flow-item {
   flex: 1;

   min-width: 0;

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: center;

   gap: 7px;

   min-height: 88px;

   padding:
      10px 8px;

   border:
      1px solid
      rgba(104, 75, 121, .10);

   border-radius: 11px;

   background:
      linear-gradient(
         145deg,
         #ffffff,
         #fffafd
      );

   box-shadow:
      0 8px 20px
      rgba(64, 45, 75, .05);
}


.gmehow26-flow-item span {
   width: 38px;
   height: 38px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 10px;

   background:
      linear-gradient(
         135deg,
         #ff8360,
         #ed43b1,
         #a03de8
      );

   box-shadow:
      0 7px 16px
      rgba(200, 55, 177, .18);

   font-size: 17px;
}


.gmehow26-flow-item strong {
   color: #25212c;

   font-size: 12px;

   line-height: 1.2;

   font-weight: 850;
}


.gmehow26-flow-arrow {
   flex-shrink: 0;

   color: #aa9eb0;

   font-size: 13px;
}


/* ==========================================================
   FINAL BOX
========================================================== */

.gmehow26-final-box {
   display: flex;

   align-items: center;

   gap: 12px;

   margin-top: 18px;

   padding: 14px;

   border:
      1px solid
      rgba(208, 61, 183, .13);

   border-radius: 11px;

   background:
      linear-gradient(
         135deg,
         #fff8f5,
         #fbf8ff
      );
}


.gmehow26-final-icon {
   width: 40px;
   height: 40px;

   min-width: 40px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 9px;

   background:
      linear-gradient(
         135deg,
         #ff805d,
         #e33dbd,
         #963fe9
      );

   font-size: 20px;
}


.gmehow26-final-box strong {
   color: #1d1922;

   font-size: 13px;

   line-height: 1.5;

   font-weight: 850;
}


/* ==========================================================
   CONNECTOR / ARROW IMAGE
========================================================== */

.gmehow26-connector {
   position: relative;

   z-index: 1;

   width: 78%;

   margin-left: auto;

   margin-right: auto;

   pointer-events: none;
}


.gmehow26-connector img {
   display: block;

   width: 100%;

   height: auto;

   margin: auto;
}


.gmehow26-connector-one {
   margin-top: -185px;

   margin-bottom: -140px;
}


.gmehow26-connector-two {
   margin-top: -165px;

   margin-bottom: -135px;
}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width: 1400px) {

   .gmehow26-section .container {
      max-width: 1220px;
   }


   .gmehow26-step {
      margin-bottom: 105px;
   }


   .gmehow26-step-three {
      margin-bottom: 0;
   }

}


/* ==========================================================
   SMALL DESKTOP
========================================================== */

@media (max-width: 1199px) {

   .gmehow26-header {
      margin-bottom: 75px;
   }


   .gmehow26-title {
      font-size: 51px;
   }


   .gmehow26-content h3 {
      font-size: 36px;
   }


   .gmehow26-content p {
      font-size: 15px;
   }


   .gmehow26-number {
      font-size: 65px;
   }


   .gmehow26-connector {
      width: 76%;
   }

}


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

@media (max-width: 991px) {

   .gmehow26-section {
      padding:
         50px 0
         60px;
   }


   .gmehow26-header {
      margin-bottom: 55px;
   }


   .gmehow26-title {
      font-size: 43px;

      letter-spacing: -2px;
   }


   .gmehow26-subtitle {
      font-size: 14px;
   }


   .gmehow26-step {
      margin-bottom: 70px;
   }


   .gmehow26-step-three {
      margin-bottom: 0;
   }


   .gmehow26-media {
      max-width: 730px;

      margin-left: auto;

      margin-right: auto;

      padding:
         43px 25px
         20px;
   }


   .gmehow26-content {
      max-width: 720px;

      margin:
         15px auto 0;

      padding:
         0 8px;
   }


   .gmehow26-content h3 {
      font-size: 34px;
   }


   .gmehow26-content p {
      font-size: 15px;
   }


   .gmehow26-number {
      font-size: 58px;
   }


   .gmehow26-mini-chip {
      bottom: 0;
   }


   .gmehow26-float-icon {
      bottom: 0;
   }

}


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

@media (max-width: 767px) {

   .gmehow26-section {
      padding:
         40px 0
         48px;
   }


   .gmehow26-header {
      margin-bottom: 45px;
   }


   .gmehow26-eyebrow {
      gap: 8px;

      font-size: 9px;

      letter-spacing: 1.3px;
   }


   .gmehow26-eyebrow > span {
      width: 24px;
   }


   .gmehow26-title {
      font-size: 35px;

      line-height: 1.06;

      letter-spacing: -1.4px;
   }


   .gmehow26-subtitle {
      margin-top: 15px;

      padding:
         8px 13px;

      font-size: 13px;
   }


   .gmehow26-step {
      margin-bottom: 58px;
   }


   .gmehow26-step-three {
      margin-bottom: 0;
   }


   .gmehow26-media {
      padding:
         37px 5px
         22px;
   }


   .gmehow26-number {
      font-size: 50px;

      letter-spacing: -3px;
   }


   .gmehow26-media-left
   .gmehow26-number {
      left: 0;
   }


   .gmehow26-media-right
   .gmehow26-number {
      right: 0;
   }


   .gmehow26-screen {
      border-radius: 11px;
   }


   .gmehow26-screen-top {
      min-height: 34px;

      padding:
         0 10px;
   }


   .gmehow26-screen-label {
      font-size: 8px;
   }


   .gmehow26-float-icon {
      width: 41px;
      height: 41px;

      right: 0;

      bottom: 1px;

      border-width: 3px;

      font-size: 17px;
   }


   .gmehow26-media-right
   .gmehow26-float-icon {
      left: 0;
   }


   .gmehow26-mini-chip {
      left: 20px;

      bottom: 2px;

      padding:
         7px 10px;

      font-size: 10px;
   }


   .gmehow26-media-right
   .gmehow26-mini-chip {
      left: auto;

      right: 20px;
   }


   .gmehow26-content {
      margin-top: 7px;

      padding: 0 3px;
   }


   .gmehow26-step-label {
      margin-bottom: 12px;

      font-size: 9px;
   }


   .gmehow26-content h3 {
      font-size: 29px;

      line-height: 1.08;

      letter-spacing: -1px;
   }


   .gmehow26-rule {
      width: 45px;

      margin:
         14px 0 16px;
   }


   .gmehow26-content p {
      font-size: 14px;

      line-height: 1.65;
   }


   .gmehow26-feature-grid {
      gap: 7px;
   }


   .gmehow26-feature {
      font-size: 11px;
   }

}


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

@media (max-width: 480px) {

   .gmehow26-section {
      padding-top: 35px;
   }


   .gmehow26-title {
      font-size: 30px;
   }


   .gmehow26-subtitle {
      font-size: 12px;
   }


   .gmehow26-number {
      font-size: 44px;
   }


   .gmehow26-content h3 {
      font-size: 26px;
   }


   .gmehow26-content p {
      font-size: 13.5px;
   }


   .gmehow26-feature-grid {
      grid-template-columns: 1fr;
   }


   .gmehow26-flow {
      gap: 5px;
   }


   .gmehow26-flow-item {
      min-height: 77px;

      padding:
         8px 4px;
   }


   .gmehow26-flow-item span {
      width: 32px;
      height: 32px;

      font-size: 14px;
   }


   .gmehow26-flow-item strong {
      font-size: 10px;
   }


   .gmehow26-flow-arrow {
      font-size: 9px;
   }


   .gmehow26-mini-chip {
      max-width: 175px;

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis;
   }

}


/* ==========================================================
   VERY SMALL
========================================================== */

@media (max-width: 360px) {

   .gmehow26-title {
      font-size: 27px;
   }


   .gmehow26-content h3 {
      font-size: 24px;
   }


   .gmehow26-content p {
      font-size: 13px;
   }


   .gmehow26-highlight-box {
      padding: 12px;
   }


   .gmehow26-mini-chip {
      font-size: 9px;
   }

}

/* ==========================================================
   GUMROAD ENGINE TESTIMONIALS
   UNIQUE CLASSES: gmeroyal26-
========================================================== */

.gmeroyal26-section {
   position: relative;

   overflow: hidden;

   padding: 58px 0 72px;

   /* background:
      radial-gradient(
         circle at 0% 0%,
         rgba(255, 144, 96, .16),
         transparent 25%
      ),
      radial-gradient(
         circle at 100% 20%,
         rgba(255, 104, 108, .10),
         transparent 27%
      ),
      radial-gradient(
         circle at 50% 100%,
         rgba(255, 175, 128, .09),
         transparent 30%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fffdfc 45%,
         #fff9f7 100%
      ); */
background: #fff url(../images/testimonials-section.png) no-repeat center top;
background-size: cover;
   isolation: isolate;
}


.gmeroyal26-section * {
   box-sizing: border-box;
}


/* ==========================================================
   DECORATIONS
========================================================== */

.gmeroyal26-decor {
   position: absolute;

   inset: 0;

   z-index: -1;

   pointer-events: none;
}


.gmeroyal26-blob {
   position: absolute;

   display: block;

   border-radius:
      45% 55% 70% 30% /
      40% 45% 55% 60%;

   filter: blur(.2px);
}


.gmeroyal26-blob-one {
   width: 330px;
   height: 250px;

   top: -110px;
   left: -95px;

   transform: rotate(-18deg);

   background:
      linear-gradient(
         135deg,
         rgba(255, 161, 103, .20),
         rgba(255, 110, 105, .09)
      );
}


.gmeroyal26-blob-two {
   width: 320px;
   height: 290px;

   right: -130px;
   bottom: -110px;

   transform: rotate(22deg);

   background:
      linear-gradient(
         135deg,
         rgba(255, 135, 93, .12),
         rgba(255, 87, 109, .14)
      );
}


.gmeroyal26-spark {
   position: absolute;

   color: #ff8057;

   font-size: 34px;

   line-height: 1;
}


.gmeroyal26-spark-one {
   left: 8%;
   top: 24%;
}


.gmeroyal26-spark-two {
   right: 7%;
   top: 18%;
}


.gmeroyal26-spark-three {
   right: 13%;
   bottom: 15%;

   font-size: 25px;
}


/* ==========================================================
   HEADER
========================================================== */

.gmeroyal26-head {
   margin-bottom: 42px;
}


.gmeroyal26-logo-wrap {
   margin-bottom: 20px;
}


.gmeroyal26-logo {
   display: block;

   width: min(100%, 430px);
   height: auto;

   margin: 0 auto;

   object-fit: contain;

   filter:
      drop-shadow(
         0 10px 22px
         rgba(255, 99, 77, .10)
      );
}


.gmeroyal26-title {
   max-width: 1150px;

   margin: 0 auto;

   color: #111321;

  font-size: clamp( 38px, 4.6vw, 46px );

   line-height: 1.06;

   font-weight: 950;

   letter-spacing: -2.7px;
}


.gmeroyal26-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9457 0%,
         #ff755d 35%,
         #ff6269 67%,
         #ff526d 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmeroyal26-subtitle {
   margin-top: 13px;

   color: #777c85;

   font-size:
      clamp(
         16px,
         1.8vw,
         24px
      );

   line-height: 1.4;

   font-weight: 600;

   letter-spacing: -.2px;
}


.gmeroyal26-title-line {
   width: 76px;
   height: 3px;

   margin: 17px auto 0;

   border-radius: 100px;

   background:
      linear-gradient(
         90deg,
         #ff9b59,
         #ff5968
      );
}


/* ==========================================================
   TESTIMONIAL CARD
========================================================== */

.gmeroyal26-card {
   position: relative;

   height: 100%;
   /* min-height: 415px; */
min-height: 330px;
   padding: 25px 24px 22px;

   overflow: hidden;

   border:
      1px solid
      rgba(255, 116, 89, .13);

   border-radius: 25px;

   background:
      linear-gradient(
         145deg,
         rgba(255,255,255,.99),
         rgba(255,250,248,.97)
      );

   box-shadow:
      0 17px 45px
      rgba(72, 45, 42, .075),

      inset 0 1px 0
      rgba(255,255,255,1);

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


.gmeroyal26-card:hover {
   transform: translateY(-7px);

   border-color:
      rgba(255, 103, 85, .25);

   box-shadow:
      0 28px 60px
      rgba(79, 44, 44, .13),

      0 0 35px
      rgba(255, 104, 83, .055);
}


.gmeroyal26-card-shine {
   position: absolute;

   width: 180px;
   height: 180px;

   right: -100px;
   top: -100px;

   border-radius: 50%;

   background:
      rgba(255, 112, 92, .07);

   filter: blur(25px);

   pointer-events: none;
}


/* ==========================================================
   USER ROW
========================================================== */

.gmeroyal26-user-row {
   position: relative;

   z-index: 2;

   display: flex;

   align-items: center;

   gap: 13px;
}


.gmeroyal26-avatar-wrap {
   position: relative;

   width: 68px;
   height: 68px;

   min-width: 68px;

   padding: 3px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #ffad6a,
         #ff685f
      );

   box-shadow:
      0 9px 22px
      rgba(255, 100, 83, .18);
}


.gmeroyal26-avatar {
   display: block;

   width: 100%;
   height: 100%;

   border:
      3px solid #ffffff;

   border-radius: 50%;

   object-fit: cover;

   background: #fff3ee;
}


.gmeroyal26-user-info {
   flex: 1;

   min-width: 0;
}


.gmeroyal26-user-name {
   color: #151623;

   font-size: 20px;

   line-height: 1.15;

   font-weight: 900;

   letter-spacing: -.45px;
}


.gmeroyal26-location {
   display: flex;

   align-items: center;

   gap: 6px;

   margin-top: 5px;

   color: #656c7c;

   font-size: 13px;

   line-height: 1.2;

   font-weight: 600;
}


.gmeroyal26-location span {
   color: #747c94;

   font-size: 8px;
}


/* ==========================================================
   VERIFIED
========================================================== */

.gmeroyal26-verified {
   display: inline-flex;

   align-items: center;

   gap: 6px;

   flex-shrink: 0;

   padding: 7px 10px;

   color: #ff5f58;

   border-radius: 100px;

   background:
      linear-gradient(
         135deg,
         #fff4ee,
         #fff0ed
      );

   border:
      1px solid
      rgba(255, 108, 86, .10);

   font-size: 11px;

   line-height: 1;

   font-weight: 800;
}


.gmeroyal26-verified span {
   width: 20px;
   height: 20px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #ff9860,
         #ff6259
      );

   box-shadow:
      0 5px 12px
      rgba(255, 101, 84, .20);

   font-size: 11px;

   font-weight: 900;
}


/* ==========================================================
   STARS
========================================================== */

.gmeroyal26-stars {
   position: relative;

   z-index: 2;

   margin:
      15px 0
      9px 82px;

   color: #ffad32;

   font-size: 22px;

   line-height: 1;

   letter-spacing: 2px;

   text-shadow:
      0 3px 8px
      rgba(255, 170, 48, .12);
}


/* ==========================================================
   REVIEW
========================================================== */

.gmeroyal26-review {
   position: relative;

   z-index: 2;

margin-top: 30px;
  padding: 15px 4px 0 15px;

  
}


.gmeroyal26-review p {
   position: relative;

   z-index: 2;

   margin: 0;

   color: #303341;

   font-size: 16px;

   line-height: 1.68;

   font-weight: 500;
}


.gmeroyal26-quote-open,
.gmeroyal26-quote-close {
   position: absolute;

   color:
      rgba(255, 113, 91, .22);

   font-family:
      Georgia,
      "Times New Roman",
      serif;

   font-size: 70px;

   line-height: 1;

   font-weight: 900;

   pointer-events: none;
}


.gmeroyal26-quote-open {
  left: -8px;
  top: -23px;
}


.gmeroyal26-quote-close {
   right: -4px;
   bottom: -43px;
}


/* ==========================================================
   BOTTOM BENEFITS
========================================================== */

.gmeroyal26-benefits {
   max-width: 920px;

   margin:
      42px auto 0;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 26px;

   padding:
      19px 27px;

   border:
      1px solid
      rgba(255, 120, 91, .11);

   border-radius: 20px;

   background:
      rgba(255,255,255,.86);

   box-shadow:
      0 14px 38px
      rgba(69, 45, 43, .06);

   backdrop-filter:
      blur(10px);

   -webkit-backdrop-filter:
      blur(10px);
}


.gmeroyal26-benefit {
   display: flex;

   align-items: center;

   gap: 12px;
}


.gmeroyal26-benefit-icon {
   width: 46px;
   height: 46px;

   min-width: 46px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ff6758;

   border-radius: 12px;

   background:
      linear-gradient(
         135deg,
         #fff0e9,
         #fff5f1
      );

   font-size: 20px;

   box-shadow:
      inset 0 1px 0
      rgba(255,255,255,1);
}


.gmeroyal26-benefit strong,
.gmeroyal26-benefit span {
   display: block;
}


.gmeroyal26-benefit strong {
   color: #191a25;

   font-size: 14px;

   line-height: 1.2;

   font-weight: 900;
}


.gmeroyal26-benefit span {
   margin-top: 2px;

   color: #626570;

   font-size: 12px;

   font-weight: 600;
}


.gmeroyal26-benefit-separator {
   width: 1px;
   height: 45px;

   background:
      rgba(255, 113, 91, .15);
}


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

@media (max-width: 1199px) {

   .gmeroyal26-section {
      padding:
         52px 0
         65px;
   }


   .gmeroyal26-logo {
      width: 360px;
   }


   .gmeroyal26-title {
      font-size: 49px;
   }


   .gmeroyal26-card {
      min-height: 390px;
   }

}


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

@media (max-width: 767px) {

   .gmeroyal26-section {
      padding:
         40px 0
         48px;
   }


   .gmeroyal26-head {
      margin-bottom: 28px;
   }


   .gmeroyal26-logo {
      width: 275px;
   }


   .gmeroyal26-title {
      font-size: 34px;

      line-height: 1.08;

      letter-spacing: -1.4px;
   }


   .gmeroyal26-subtitle {
      font-size: 15px;
   }


   .gmeroyal26-card {
      min-height: auto;

      padding:
         20px 18px
         22px;

      border-radius: 19px;
   }


   .gmeroyal26-avatar-wrap {
      width: 58px;
      height: 58px;

      min-width: 58px;
   }


   .gmeroyal26-user-name {
      font-size: 17px;
   }


   .gmeroyal26-location {
      font-size: 12px;
   }


   .gmeroyal26-verified {
      padding: 6px 8px;

      font-size: 10px;
   }


   .gmeroyal26-verified span {
      width: 18px;
      height: 18px;
   }


   .gmeroyal26-stars {
      margin-left: 71px;

      font-size: 19px;
   }


   .gmeroyal26-review {
      margin-top: 13px;

      padding-left: 10px;
   }


   .gmeroyal26-review p {
      font-size: 15px;

      line-height: 1.65;
   }


   .gmeroyal26-benefits {
      flex-wrap: wrap;

      gap: 17px;

      margin-top: 30px;

      padding: 17px;
   }


   .gmeroyal26-benefit-separator {
      display: none;
   }

}


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

@media (max-width: 480px) {

   .gmeroyal26-logo {
      width: 230px;
   }


   .gmeroyal26-title {
      font-size: 30px;
   }


   .gmeroyal26-user-row {
      align-items: flex-start;

      flex-wrap: wrap;
   }


   .gmeroyal26-user-info {
      padding-top: 6px;
   }


   .gmeroyal26-verified {
      margin-left: 71px;

      margin-top: -6px;
   }


   .gmeroyal26-stars {
      margin:
         12px 0
         0 71px;
   }


   .gmeroyal26-review p {
      font-size: 14px;
   }


   .gmeroyal26-benefits {
      display: grid;

      grid-template-columns: 1fr;

      max-width: 320px;
   }


   .gmeroyal26-benefit {
      justify-content: flex-start;
   }

}

/* ==========================================================
   DARK NICHE PRODUCT CARDS
   UNIQUE PREFIX: gmnighttile27-
========================================================== */

.gmnighttile27-section {
   position: relative;
   overflow: hidden;

   padding: 60px 0 70px;

   /* background:
      radial-gradient(
         circle at 50% 0%,
         rgba(111, 50, 255, .16),
         transparent 30%
      ),
      radial-gradient(
         circle at 0% 50%,
         rgba(255, 89, 98, .08),
         transparent 27%
      ),
      radial-gradient(
         circle at 100% 75%,
         rgba(224, 48, 210, .09),
         transparent 28%
      ),
      linear-gradient(
         180deg,
         #0d071f 0%,
         #090418 55%,
         #070313 100%
      ); */
      background: #fff url(../images/gmnighttile27-section.png) no-repeat center top;
    background-size: auto;
  background-size: cover;
}


.gmnighttile27-section * {
   box-sizing: border-box;
}
/* =========================================================
   SECTION HEADING
========================================================= */

.gmnighttile27-heading {
   position: relative;
   max-width: 1150px;
   margin: 0 auto 50px;
}


.gmnighttile27-small-title {
   margin-bottom: 14px;

   color: rgba(255, 255, 255, 0.55);

   font-size: 11px;
   line-height: 1;

   font-weight: 800;

   letter-spacing: 2px;

   text-transform: uppercase;
}


.gmnighttile27-main-title {
margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1.13;
  font-weight: 900;
  letter-spacing: -2px;
}


.gmnighttile27-main-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ffa05b 0%,
         #ff795e 30%,
         #ff5c73 65%,
         #d33ade 100%
      );

   -webkit-background-clip: text;
   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmnighttile27-heading-line {
   width: 90px;
   height: 4px;

   margin: 20px auto 0;

   border-radius: 50px;

   background:
      linear-gradient(
         90deg,
         #ff9c58,
         #ff5c6c,
         #ca3edf
      );

   box-shadow:
      0 8px 22px
      rgba(223, 58, 193, 0.22);
}


/* TABLET */

@media (max-width: 991px) {

   .gmnighttile27-heading {
      margin-bottom: 38px;
   }

   .gmnighttile27-main-title {
      font-size: 40px;
   }

}


/* MOBILE */

@media (max-width: 767px) {

   .gmnighttile27-heading {
      margin-bottom: 30px;
   }

   .gmnighttile27-small-title {
      font-size: 9px;
      letter-spacing: 1.3px;
   }

   .gmnighttile27-main-title {
      font-size: 31px;
      line-height: 1.15;
      letter-spacing: -1.2px;
   }

   .gmnighttile27-heading-line {
      width: 70px;
      margin-top: 16px;
   }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

   .gmnighttile27-main-title {
      font-size: 27px;
   }

}

/* ==========================================================
   WHOLE CARD
========================================================== */

.gmnighttile27-card {
   position: relative;

   width: 100%;
   height: 100%;

   transition:
      transform .28s ease;
}


.gmnighttile27-card:hover {
   transform: translateY(-7px);
}


/* ==========================================================
   TOP DARK VISUAL BOX
========================================================== */

.gmnighttile27-visual {
   position: relative;

   min-height: 265px;

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: space-between;

   padding:
      22px 18px
      20px;

   overflow: hidden;

   border:
      1px solid
      rgba(255, 118, 83, .42);

   border-radius:
      23px 23px
      20px 20px;

   background:
      radial-gradient(
         circle at 75% 20%,
         rgba(196, 54, 220, .13),
         transparent 30%
      ),
      linear-gradient(
         145deg,
         #1d1833 0%,
         #171229 55%,
         #110c22 100%
      );

   box-shadow:
      0 18px 40px
      rgba(0,0,0,.24),

      inset 0 1px 0
      rgba(255,255,255,.025);

   transition:
      border-color .28s ease,
      box-shadow .28s ease;
}


.gmnighttile27-card:hover
.gmnighttile27-visual {
   border-color:
      rgba(255, 100, 92, .74);

   box-shadow:
      0 25px 50px
      rgba(0,0,0,.32),

      0 0 35px
      rgba(217, 54, 191, .07);
}


/* ==========================================================
   CORNER DECORATION
========================================================== */

.gmnighttile27-corner {
   position: absolute;

   width: 95px;
   height: 95px;

   right: -49px;
   top: -49px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         rgba(255, 94, 92, .20),
         rgba(210, 47, 210, .08)
      );

   pointer-events: none;
}


/* ==========================================================
   IMAGE WRAP
========================================================== */

.gmnighttile27-image-wrap {
   position: relative;

   z-index: 2;

   width: 100%;
   height: 165px;

   display: flex;

   align-items: center;
   justify-content: center;

   margin-top: 10px;
}


.gmnighttile27-image-wrap::before {
   content: "";

   position: absolute;

   width: 150px;
   height: 80px;

   left: 50%;
   bottom: 8px;

   transform: translateX(-50%);

   border-radius: 50%;

   background:
      rgba(214, 54, 221, .14);

   filter: blur(38px);

   pointer-events: none;
}


/* ==========================================================
   IMAGE
========================================================== */

.gmnighttile27-image {
position: relative;
  z-index: 2;
  display: block;
  width: 185px;
  height: 185px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow( 0 16px 20px rgba(0,0,0,.28) );
  margin: auto;


}


.gmnighttile27-card:hover
.gmnighttile27-image {

}


/* ==========================================================
   CENTER NICHE NAME
========================================================== */

.gmnighttile27-center-name {
   position: relative;

   z-index: 3;

   width: 100%;

   margin-top: 10px;

   color:
      rgba(255,255,255,.95);

   text-align: center;

   font-size: 16px;

   line-height: 1.35;

   font-weight: 650;

   letter-spacing: -.15px;
}


/* ==========================================================
   BOTTOM DARK INFO BAR
========================================================== */

.gmnighttile27-info {
   position: relative;

   z-index: 4;

   min-height: 79px;

   display: flex;

   align-items: center;

   gap: 13px;

margin-top: 15px;

   padding:
      14px 15px;

   overflow: hidden;

   border:
      1px solid
      rgba(255,255,255,.09);

   border-radius:
      18px;

   background:
      linear-gradient(
         135deg,
         #171126 0%,
         #110c20 55%,
         #0d081a 100%
      );

   box-shadow:
      0 15px 31px
      rgba(0,0,0,.24),

      inset 0 1px 0
      rgba(255,255,255,.035);
}


/* INFO BAR CORNER GLOW */

.gmnighttile27-info::after {
   content: "";

   position: absolute;

   width: 100px;
   height: 100px;

   right: -65px;
   top: -65px;

   border-radius: 50%;

   background:
      rgba(255, 78, 137, .09);

   pointer-events: none;
}


/* INFO BAR TOP GLOW */

.gmnighttile27-info::before {
   content: "";

   position: absolute;

   left: 0;
   top: 0;

   width: 100%;
   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(255,109,91,.35),
         transparent
      );
}


/* ==========================================================
   BOTTOM ICON
========================================================== */

.gmnighttile27-icon {
   position: relative;

   z-index: 2;

   width: 40px;
   height: 40px;

   min-width: 40px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

 border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: linear-gradient( 135deg, #ff875d47 0%, #ed43ae4a 52%, #9f42ee4d 100% );
  box-shadow: 0 9px 20px rgba(211, 57, 185, 0.07);

   font-size: 14px;

   line-height: 1;

   font-weight: 900;

   transition:
      transform .25s ease;
}


.gmnighttile27-card:hover
.gmnighttile27-icon {
   transform:
      rotate(-5deg)
      scale(1.06);
}


/* ALTERNATE ICON COLORS */

.gmnighttile27-card:nth-child(3n+2)
.gmnighttile27-icon {
   background:
      linear-gradient(
         135deg,
         #bc3df0,
         #7648ed
      );
}


.gmnighttile27-card:nth-child(3n)
.gmnighttile27-icon {
   background:
      linear-gradient(
         135deg,
         #ff9a58,
         #ff625e
      );
}


/* ==========================================================
   BOTTOM INFO TITLE
========================================================== */

.gmnighttile27-info-title {
   position: relative;

   z-index: 2;

   flex: 1;

   min-width: 0;

   color: #ffffff;
font-size: 20px;

   line-height: 1.35;

   font-weight: 800;

   letter-spacing: -.15px;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1400px) {

   .gmnighttile27-section .container {
      max-width: 1320px;
   }


   .gmnighttile27-visual {
      min-height: 285px;
   }


   .gmnighttile27-image-wrap {
      height: 180px;
   }


   .gmnighttile27-image {
      max-height: auto;
   }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1199px) {

   .gmnighttile27-visual {
      min-height: 240px;
   }


   .gmnighttile27-image-wrap {
      height: 145px;
   }


   .gmnighttile27-image {
      max-height: 130px;
   }


   .gmnighttile27-center-name {
      font-size: 14px;
   }


   .gmnighttile27-info-title {
      font-size: 13px;
   }

}


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

@media (max-width: 991px) {

   .gmnighttile27-section {
      padding:
         50px 0
         60px;
   }


   .gmnighttile27-visual {
      min-height: 225px;

      border-radius:
         20px 20px
         17px 17px;
   }


   .gmnighttile27-image-wrap {
      height: 130px;
   }


   .gmnighttile27-image {
      max-height: 118px;
   }


   .gmnighttile27-info {
      min-height: 70px;

      padding:
         12px;
   }


   .gmnighttile27-icon {
      width: 40px;
      height: 40px;

      min-width: 40px;

      border-radius: 11px;
   }

}


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

@media (max-width: 767px) {

   .gmnighttile27-section {
      padding:
         40px 0
         48px;
   }


   .gmnighttile27-visual {
      min-height: 190px;

      padding:
         14px 10px
         14px;

      border-radius:
         17px 17px
         15px 15px;
   }


   .gmnighttile27-image-wrap {
      height: 105px;

      margin-top: 5px;
   }


   .gmnighttile27-image {
      max-width: 85%;
      max-height: 95px;
   }


   .gmnighttile27-center-name {
      margin-top: 6px;

      font-size: 12px;

      line-height: 1.3;
   }


   .gmnighttile27-info {
      min-height: 64px;

      gap: 9px;

      padding:
         10px;

      border-radius: 14px;
   }


   .gmnighttile27-icon {
      width: 36px;
      height: 36px;

      min-width: 36px;

      border-radius: 9px;

      font-size: 11px;
   }


   .gmnighttile27-info-title {
      font-size: 11px;

      line-height: 1.3;
   }

}


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

@media (max-width: 480px) {

   .gmnighttile27-visual {
      min-height: 170px;
   }


   .gmnighttile27-image-wrap {
      height: 90px;
   }


   .gmnighttile27-image {
      max-height: 82px;
   }


   .gmnighttile27-center-name {
      font-size: 11px;
   }


   .gmnighttile27-info {
      min-height: 59px;

      padding:
         9px;
   }


   .gmnighttile27-icon {
      width: 33px;
      height: 33px;

      min-width: 33px;
   }


   .gmnighttile27-info-title {
      font-size: 10px;
   }

}


/* ==========================================================
   VERY SMALL MOBILE - 1 CARD
========================================================== */

@media (max-width: 359px) {

   .gmnighttile27-section
   .row > [class*="col-"] {
      width: 100%;
   }


   .gmnighttile27-card {
      max-width: 290px;

      margin:
         0 auto;
   }


   .gmnighttile27-visual {
      min-height: 220px;
   }


   .gmnighttile27-image-wrap {
      height: 130px;
   }


   .gmnighttile27-image {
      max-height: 120px;
   }


   .gmnighttile27-center-name {
      font-size: 14px;
   }


   .gmnighttile27-info-title {
      font-size: 13px;
   }

}

/* ==========================================================
   GUMROAD ENGINE - DONE CHASING SECTION
   UNIQUE CLASS: gmchase26-
========================================================== */

.gmchase26-section {
   position: relative;

   overflow: hidden;

   padding: 60px 0 75px;

   background:
      radial-gradient(
         circle at 78% 48%,
         rgba(197, 48, 220, 0.14),
         transparent 28%
      ),
      radial-gradient(
         circle at 10% 20%,
         rgba(255, 109, 86, 0.10),
         transparent 24%
      ),
      linear-gradient(
         135deg,
         #100824 0%,
         #0b061c 48%,
         #070313 100%
      );

   isolation: isolate;
}


/* subtle grid */

.gmchase26-section::before {
   content: "";

   position: absolute;

   inset: 0;

   z-index: -1;

   opacity: .28;

   background-image:
      linear-gradient(
         rgba(255,255,255,.025) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(255,255,255,.025) 1px,
         transparent 1px
      );

   background-size: 45px 45px;

   pointer-events: none;
}


/* right glow */

.gmchase26-section::after {
   content: "";

   position: absolute;

   width: 450px;
   height: 450px;

   right: -220px;
   bottom: -220px;

   z-index: -1;

   border-radius: 50%;

   background:
      rgba(226, 56, 205, .10);

   filter: blur(80px);

   pointer-events: none;
}


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

.gmchase26-title {
   margin: 0;

   color: #ffffff;

   font-size:
      clamp(
         34px,
         4.5vw,
         58px
      );

   line-height: 1.08;

   font-weight: 900;

   letter-spacing: -2px;
}


.gmchase26-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ffa15b 0%,
         #ff7b60 32%,
         #ff5c75 67%,
         #d43ade 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmchase26-heading-line {
   width: 90px;
   height: 4px;

   margin: 20px auto 0;

   border-radius: 50px;

   background:
      linear-gradient(
         90deg,
         #ff9c59,
         #ff5e6d,
         #cb3edf
      );

   box-shadow:
      0 8px 22px
      rgba(221, 59, 192, .24);
}


/* ==========================================================
   COPY
========================================================== */

.gmchase26-copy {
   position: relative;

   padding: 28px;

   color:
      rgba(255,255,255,.78);

   border:
      1px solid
      rgba(255,255,255,.08);

   border-radius: 20px;

   background:
      linear-gradient(
         135deg,
         rgba(255,255,255,.07),
         rgba(255,255,255,.025)
      );

   box-shadow:
      0 22px 50px
      rgba(0,0,0,.22),

      inset 0 1px 0
      rgba(255,255,255,.035);

   backdrop-filter:
      blur(12px);

   -webkit-backdrop-filter:
      blur(12px);
}


.gmchase26-copy::before {
   content: "";

   position: absolute;

   left: 0;
   top: 30px;

   width: 4px;
   height: 75px;

   border-radius: 0 10px 10px 0;

   background:
      linear-gradient(
         180deg,
         #ff895c,
         #f043ab,
         #a13feb
      );
}


/* ==========================================================
   IMAGE
========================================================== */

.gmchase26-image-wrap {
   position: relative;

   display: flex;

   align-items: center;
   justify-content: center;

   min-height: 420px;

   padding: 25px;
}


.gmchase26-image-glow {
   position: absolute;

   width: 330px;
   height: 330px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         rgba(255, 109, 89, .22),
         rgba(216, 54, 216, .18)
      );

   filter: blur(65px);

   pointer-events: none;
}


.gmchase26-image {
   position: relative;

   z-index: 2;

  

   object-fit: contain;

   filter:
      drop-shadow(
         0 28px 35px
         rgba(0,0,0,.38)
      );

   transition:
      transform .3s ease;
}


.gmchase26-image-wrap:hover
.gmchase26-image {
   transform:
      translateY(-5px)
      scale(1.015);
}


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

@media (max-width: 991px) {

   .gmchase26-section {
      padding:
         50px 0
         60px;
   }


   .gmchase26-title {
      font-size: 44px;
   }


   .gmchase26-copy {
      padding: 23px;
   }


   .gmchase26-image-wrap {
      min-height: 350px;

      padding: 15px;
   }


   .gmchase26-image {
      max-height: 350px;
   }

}


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

@media (max-width: 767px) {

   .gmchase26-section {
      padding:
         40px 0
         48px;
   }


   .gmchase26-title {
      font-size: 32px;

      line-height: 1.13;

      letter-spacing: -1.2px;
   }


   .gmchase26-heading-line {
      width: 70px;

      margin-top: 15px;
   }


   .gmchase26-copy {
      padding:
         20px 18px;

      border-radius: 16px;

      font-size: 15px;

      line-height: 1.7;
   }


   .gmchase26-copy::before {
      top: 25px;

      height: 60px;
   }


   .gmchase26-image-wrap {
      min-height: auto;

      padding:
         10px 0;
   }


   .gmchase26-image {
      max-height: 320px;
   }

}


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

@media (max-width: 480px) {

   .gmchase26-title {
      font-size: 28px;
   }


   .gmchase26-copy {
      padding:
         18px 15px;

      font-size: 14px;
   }


   .gmchase26-image {
      max-height: 270px;
   }

}

/* ==========================================================
   GUMROAD ENGINE - FREEDOM SECTION
   WHITE PREMIUM THEME
   UNIQUE PREFIX: gmfreedom26-
========================================================== */

.gmfreedom26-section {
   position: relative;
   overflow: hidden;

   padding: 60px 0 75px;

   background:
      radial-gradient(
         circle at 82% 45%,
         rgba(218, 67, 217, .08),
         transparent 28%
      ),
      radial-gradient(
         circle at 8% 20%,
         rgba(255, 123, 88, .10),
         transparent 25%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fffaf7 52%,
         #ffffff 100%
      );

   isolation: isolate;
}


/* subtle background grid */

.gmfreedom26-section::before {
   content: "";

   position: absolute;
   inset: 0;

   z-index: -1;

   opacity: .22;

   background-image:
      linear-gradient(
         rgba(116, 78, 140, .035) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(116, 78, 140, .035) 1px,
         transparent 1px
      );

   background-size: 46px 46px;

   pointer-events: none;
}


/* decorative glow */

.gmfreedom26-section::after {
   content: "";

   position: absolute;

   width: 430px;
   height: 430px;

   right: -220px;
   bottom: -220px;

   z-index: -1;

   border-radius: 50%;

   background:
      rgba(237, 74, 191, .08);

   filter: blur(85px);

   pointer-events: none;
}


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

.gmfreedom26-title {
   max-width: 1000px;

   margin: 0 auto;

   color: #15121c;

font-size: clamp( 35px, 4.5vw, 46px );

   line-height: 1.08;

   font-weight: 900;

   letter-spacing: -2px;
}


.gmfreedom26-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9f59 0%,
         #ff765f 35%,
         #ff5d73 68%,
         #d53ade 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmfreedom26-heading-line {
   width: 88px;
   height: 4px;

   margin: 20px auto 0;

   border-radius: 100px;

   background:
      linear-gradient(
         90deg,
         #ff9e59,
         #ff5d6e,
         #cb3edf
      );

   box-shadow:
      0 7px 20px
      rgba(221, 58, 190, .16);
}


/* ==========================================================
   CONTENT BOX
========================================================== */

.gmfreedom26-copy {
   position: relative;

   padding: 28px;

   color: #4c4652;

   border:
      1px solid
      rgba(114, 77, 126, .10);

   border-radius: 20px;

   background:
      rgba(255,255,255,.94);

   box-shadow:
      0 18px 45px
      rgba(75, 48, 72, .08),

      inset 0 1px 0
      rgba(255,255,255,1);
}


/* left accent */

.gmfreedom26-copy::before {
   content: "";

   position: absolute;

   left: 0;
   top: 30px;

   width: 4px;
   height: 75px;

   border-radius:
      0 10px 10px 0;

   background:
      linear-gradient(
         180deg,
         #ff8c5b,
         #f044aa,
         #a03feb
      );
}


/* subtle corner glow */

.gmfreedom26-copy::after {
   content: "";

   position: absolute;

   width: 150px;
   height: 150px;

   right: -90px;
   top: -90px;

   border-radius: 50%;

   background:
      rgba(244, 76, 176, .055);

   pointer-events: none;
}


/* ==========================================================
   IMAGE AREA
========================================================== */

.gmfreedom26-image-wrap {
   position: relative;

   min-height: 420px;

   display: flex;

   align-items: center;
   justify-content: center;

   padding: 25px;
}


.gmfreedom26-image-glow {
   position: absolute;

   width: 330px;
   height: 330px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         rgba(255, 133, 93, .18),
         rgba(221, 64, 214, .12)
      );

   filter: blur(65px);

   pointer-events: none;
}


.gmfreedom26-image {
   position: relative;

   z-index: 2;

   
   object-fit: contain;

   filter:
      drop-shadow(
         0 25px 32px
         rgba(69, 43, 70, .14)
      );

   transition:
      transform .3s ease;
}


.gmfreedom26-image-wrap:hover
.gmfreedom26-image {
   transform:
      translateY(-5px)
      scale(1.015);
}


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

@media (max-width: 991px) {

   .gmfreedom26-section {
      padding:
         50px 0
         60px;
   }


   .gmfreedom26-title {
      font-size: 44px;
   }


   .gmfreedom26-copy {
      padding: 23px;
   }


   .gmfreedom26-image-wrap {
      min-height: 350px;

      padding: 15px;
   }


   .gmfreedom26-image {
      max-height: 350px;
   }

}


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

@media (max-width: 767px) {

   .gmfreedom26-section {
      padding:
         40px 0
         48px;
   }


   .gmfreedom26-title {
      font-size: 32px;

      line-height: 1.13;

      letter-spacing: -1.2px;
   }


   .gmfreedom26-heading-line {
      width: 70px;

      margin-top: 15px;
   }


   .gmfreedom26-copy {
      padding:
         20px 18px;

      border-radius: 16px;

      font-size: 15px;

      line-height: 1.7;
   }


   .gmfreedom26-copy::before {
      top: 24px;

      height: 60px;
   }


   .gmfreedom26-image-wrap {
      min-height: auto;

      padding:
         10px 0;
   }


   .gmfreedom26-image {
      max-height: 320px;
   }

}


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

@media (max-width: 480px) {

   .gmfreedom26-title {
      font-size: 28px;
   }


   .gmfreedom26-copy {
      padding:
         18px 15px;

      font-size: 14px;
   }


   .gmfreedom26-image {
      max-height: 270px;
   }

}

/* ==========================================================
   GUMROAD ENGINE - 12 FEATURE GRID
   WHITE PREMIUM THEME
   UNIQUE PREFIX: gmefirst31-
========================================================== */

.gmefirst31-section {
   position: relative;
   overflow: hidden;

   padding: 70px 0 80px;

   background:
      radial-gradient(
         circle at 50% 0%,
         rgba(255, 130, 88, .10),
         transparent 28%
      ),
      radial-gradient(
         circle at 100% 55%,
         rgba(238, 72, 173, .065),
         transparent 25%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fffaf8 50%,
         #ffffff 100%
      );

   isolation: isolate;
}


.gmefirst31-section * {
   box-sizing: border-box;
}


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

.gmefirst31-bg {
   position: absolute;
   inset: 0;

   z-index: -1;

   pointer-events: none;
}


.gmefirst31-grid {
   position: absolute;
   inset: 0;

   opacity: .42;

   background-image:
      linear-gradient(
         rgba(219, 95, 118, .055) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(219, 95, 118, .055) 1px,
         transparent 1px
      );

   background-size: 38px 38px;

   -webkit-mask-image:
      linear-gradient(
         to bottom,
         #000 0%,
         transparent 92%
      );

   mask-image:
      linear-gradient(
         to bottom,
         #000 0%,
         transparent 92%
      );
}


.gmefirst31-glow {
   position: absolute;

   border-radius: 50%;

   filter: blur(85px);
}


.gmefirst31-glow-one {
   width: 400px;
   height: 400px;

   left: -220px;
   top: 260px;

   background:
      rgba(255, 128, 88, .10);
}


.gmefirst31-glow-two {
   width: 450px;
   height: 450px;

   right: -260px;
   bottom: 100px;

   background:
      rgba(218, 60, 211, .07);
}


/* ==========================================================
   HEADER
========================================================== */

.gmefirst31-header {
   max-width: 1080px;

   margin:
      0 auto 55px;
}


.gmefirst31-logo-wrap {
   margin-bottom: 20px;
}


.gmefirst31-logo {
   display: block;

   width: min(100%, 310px);

   margin: auto;

   object-fit: contain;
}


.gmefirst31-kicker {
   margin-bottom: 10px;

   color: #ff735d;

   font-size: 14px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: 2.5px;
}


.gmefirst31-main-title {
max-width: 1040px;
  margin: 0 auto;
  color: #11111b;
  font-size: clamp( 34px, 4.2vw, 50px );
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -2.4px;
}


.gmefirst31-main-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9d58 0%,
         #ff765d 34%,
         #ff5e70 68%,
         #d53ade 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


/* ==========================================================
   TITLE MARK
========================================================== */

.gmefirst31-title-mark {
   display: flex;

   align-items: center;
   justify-content: center;

   gap: 4px;

   margin-top: 18px;
}


.gmefirst31-title-mark span {
   width: 24px;
   height: 3px;

   display: block;

   border-radius: 20px;

   background:
      linear-gradient(
         90deg,
         #ff885c,
         #dd3dd0
      );

   transform: skewX(-28deg);
}


.gmefirst31-title-mark span:nth-child(2) {
   width: 13px;
}


.gmefirst31-title-mark span:nth-child(3) {
   width: 6px;
}


/* ==========================================================
   FIRST-TO-MARKET BOX
========================================================== */

.gmefirst31-market-box {
position: relative;
  max-width: 900px;
  margin: 30px auto 0;
  padding: 22px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 107, 89, .15);
  border-radius: 18px;
  background: linear-gradient( 135deg, #fff8f5, #fff9fc );
  box-shadow: 0 15px 38px rgba(81, 50, 75, .07)
}


.gmefirst31-market-box::after {
   content: "";

   position: absolute;

   width: 150px;
   height: 150px;

   right: -90px;
   top: -90px;

   border-radius: 50%;

   background:
      rgba(222, 58, 199, .07);
}


.gmefirst31-market-small {
   color: #57515b;

   font-size: 18px;

   line-height: 1.35;

   font-weight: 700;
}


.gmefirst31-market-brand {
   margin-top: 3px;

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9658,
         #ff655e,
         #d43bd9
      );

   -webkit-background-clip: text;
   background-clip: text;

   -webkit-text-fill-color: transparent;

   font-size:
      clamp(
         27px,
         3vw,
         38px
      );

   line-height: 1.15;

   font-weight: 950;
}


.gmefirst31-market-copy {
   margin-top: 7px;

   color: #28242d;

   font-size: 18px;

   line-height: 1.5;

   font-weight: 800;
}


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

.gmefirst31-card {
   position: relative;

   height: 100%;
   min-height: 510px;

   display: flex;

   flex-direction: column;

   align-items: center;

   padding:
      28px 25px
      22px;

   overflow: hidden;

   text-align: center;

   border:
      1px solid
      rgba(219, 82, 184, .22);

   border-radius: 17px;

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

   box-shadow:
      0 15px 38px
      rgba(74, 48, 77, .07);

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


.gmefirst31-card:hover {
   transform:
      translateY(-6px);

   border-color:
      rgba(255, 105, 91, .42);

   box-shadow:
      0 24px 52px
      rgba(76, 47, 78, .12);
}


/* ==========================================================
   NUMBER
========================================================== */

.gmefirst31-number {
   position: absolute;

   top: 15px;
   right: 17px;

   color:
      rgba(215, 60, 201, .10);

   font-size: 38px;

   line-height: 1;

   font-weight: 950;
}


/* ==========================================================
   ICON IMAGE
========================================================== */

.gmefirst31-icon-wrap {
   position: relative;

   width: 100%;
   height: 180px;

   display: flex;

   align-items: center;
   justify-content: center;

   margin-bottom: 8px;
}


.gmefirst31-icon-wrap::before {
   content: "";

   position: absolute;

   width: 145px;
   height: 145px;

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(255, 117, 93, .11),
         rgba(216, 58, 219, .055) 45%,
         transparent 70%
      );

   filter: blur(6px);
}


.gmefirst31-icon-img {
   position: relative;

   z-index: 2;

   display: block;

   width: auto;
   height: auto;

   max-width: 170px;
   max-height: 165px;

   object-fit: contain;

   filter:
      drop-shadow(
         0 14px 20px
         rgba(190, 65, 172, .12)
      );

   transition:
      transform .28s ease;
}


.gmefirst31-card:hover
.gmefirst31-icon-img {
   transform:
      translateY(-4px)
      scale(1.03);
}


/* ==========================================================
   SMALL DIVIDER
========================================================== */

.gmefirst31-divider {
   width: 42px;
   height: 3px;

   margin:
      4px auto
      18px;

   border-radius: 20px;

   background:
      linear-gradient(
         90deg,
         #ff9659,
         #ff5f70,
         #d83bdb
      );
}


/* ==========================================================
   CARD TEXT
========================================================== */

.gmefirst31-card h3 {
   margin:
      0 0 13px;

   color: #15121a;

   font-size: 20px;

   line-height: 1.3;

   font-weight: 900;

   letter-spacing: -.45px;
}


.gmefirst31-card p {
   margin:
      0 auto;

   color: #5b5560;

   font-size: 18px;

   line-height: 1.55;

   font-weight: 400;
}


/* ==========================================================
   BOTTOM DOTS
========================================================== */

.gmefirst31-dots {
   display: flex;

   align-items: center;
   justify-content: center;

   gap: 4px;

   margin-top: auto;

   padding-top: 24px;
}


.gmefirst31-dots span {
   width: 7px;
   height: 7px;

   display: block;

   border-radius: 50%;

   background: #ff8066;
}


.gmefirst31-dots span:nth-child(2) {
   background: #ef58a3;
}


.gmefirst31-dots span:nth-child(3) {
   background: #bf45ea;
}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width: 1400px) {

   .gmefirst31-section .container {
      max-width: 1320px;
   }


   .gmefirst31-card {
   min-height: 440px;
   }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1199px) {

   .gmefirst31-main-title {
      font-size: 47px;
   }


   .gmefirst31-card {
  min-height: 440px;

      padding:
         25px 20px
         20px;
   }


   .gmefirst31-icon-wrap {
      height: 165px;
   }


   .gmefirst31-icon-img {
      max-width: 150px;
      max-height: 150px;
   }


   .gmefirst31-card h3 {
      font-size: 19px;
   }


   .gmefirst31-card p {
      font-size: 18px;
   }

}


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

@media (max-width: 991px) {

   .gmefirst31-section {
      padding:
         50px 0
         60px;
   }


   .gmefirst31-header {
      margin-bottom: 40px;
   }


   .gmefirst31-main-title {
      font-size: 40px;
   }


   .gmefirst31-market-box {
      padding:
         20px;
   }


   .gmefirst31-card {
      min-height: 490px;
   }

}


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

@media (max-width: 767px) {

   .gmefirst31-section {
      padding:
         40px 0
         48px;
   }


   .gmefirst31-logo {
      width: 235px;
   }


   .gmefirst31-kicker {
      font-size: 11px;

      letter-spacing: 1.7px;
   }


   .gmefirst31-main-title {
      font-size: 31px;

      line-height: 1.13;

      letter-spacing: -1.3px;
   }


   .gmefirst31-market-box {
      margin-top: 23px;

      padding:
         17px 15px;

      border-radius: 14px;
   }


   .gmefirst31-market-small {
      font-size: 15px;
   }


   .gmefirst31-market-brand {
      font-size: 28px;
   }


   .gmefirst31-market-copy {
      font-size: 16px;
   }


   .gmefirst31-card {
      min-height: auto;

      padding:
         22px 18px
         18px;

      border-radius: 15px;
   }


   .gmefirst31-icon-wrap {
      height: 145px;
   }


   .gmefirst31-icon-img {
      max-width: 135px;
      max-height: 135px;
   }


   .gmefirst31-card h3 {
      font-size: 19px;
   }


   .gmefirst31-card p {
      font-size: 17px;
   }


   .gmefirst31-dots {
      padding-top: 20px;
   }

}


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

@media (max-width: 480px) {

   .gmefirst31-main-title {
      font-size: 27px;
   }


   .gmefirst31-card h3 {
      font-size: 18px;
   }


   .gmefirst31-card p {
      font-size: 16px;
   }

}


/* =========================================================
   GUMROAD ENGINE - DIGITAL PRODUCT BOOM SECTION
========================================================= */

.gme-boom-section {
   position: relative;
   overflow: hidden;
   padding: 90px 0;
   background:
      radial-gradient(circle at 12% 15%, rgba(255, 107, 0, 0.13), transparent 28%),
      radial-gradient(circle at 88% 35%, rgba(255, 153, 0, 0.08), transparent 30%),
      linear-gradient(135deg, #080a0d 0%, #0d1015 48%, #07090c 100%);
   color: #ffffff;
   font-size: 18px;
}


/* BACKGROUND GRID */
.gme-boom-section::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
   background-size: 55px 55px;
   pointer-events: none;
}


.gme-boom-section .container {
   position: relative;
   z-index: 2;
}


/* =========================================================
   EYEBROW
========================================================= */

.gme-boom-eyebrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   padding: 10px 18px;
   border-radius: 100px;
   border: 1px solid rgba(255, 134, 31, 0.35);
   background: rgba(255, 115, 0, 0.08);
   color: #ff982b;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 1.4px;
   text-transform: uppercase;
   margin-bottom: 22px;
   box-shadow: inset 0 0 25px rgba(255, 120, 0, 0.04);
}


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

.gme-boom-heading {
max-width: 1250px;
  margin: 0 auto;
  font-size: 37px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: -1.6px;
  color: #ffffff;
}

.gme-boom-heading span {
   background: linear-gradient(
      90deg,
      #ff7200 0%,
      #ff9b28 45%,
      #ffc169 100%
   );
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}


/* SUBLINE */

.gme-boom-subline {
   margin-top: 20px;
   font-size: 22px;
   line-height: 1.5;
   font-weight: 500;
   font-style: italic;
   color: #c4c9d2;
}


/* =========================================================
   MAIN CONTENT ROW
========================================================= */

.gme-boom-main-row {
   margin-top: 65px;
}


/* CONTENT BOX */

.gme-boom-content {
   position: relative;
   padding: 35px;
   border: 1px solid rgba(255,255,255,0.09);
   border-radius: 24px;
   background:
      linear-gradient(
         145deg,
         rgba(255,255,255,0.065),
         rgba(255,255,255,0.018)
      );
   box-shadow:
      0 25px 70px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.06);
   backdrop-filter: blur(12px);
}


.gme-boom-content::before {
   content: "";
   position: absolute;
   left: 0;
   top: 34px;
   width: 4px;
   height: 95px;
   border-radius: 0 8px 8px 0;
   background: linear-gradient(#ff6a00, #ffb13b);
   box-shadow: 0 0 22px rgba(255, 119, 0, 0.55);
}


.gme-boom-content p {
   margin-bottom: 22px;
   color: #c8ccd4;
   font-size: 18px;
   line-height: 1.75;
   font-weight: 400;
}


.gme-boom-content strong {
   color: #ffffff;
   font-weight: 800;
}


/* =========================================================
   IMAGE
========================================================= */

.gme-boom-image-wrap {
   position: relative;
   max-width: 610px;
   margin: 0 auto;
   /* padding: 16px; */
}


.gme-boom-image {
   position: relative;
   z-index: 2;
   display: block;
   width: 100%;
   border-radius: 26px;
   /* border: 1px solid rgba(255,255,255,0.12);
   box-shadow:
      0 35px 80px rgba(0,0,0,0.55),
      0 0 50px rgba(255, 105, 0, 0.08); */
}


.gme-image-glow {
   position: absolute;
   width: 75%;
   height: 75%;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background: rgba(255, 106, 0, 0.26);
   filter: blur(80px);
   border-radius: 50%;
   z-index: 0;
}


/* FLOATING CARDS */

.gme-floating-card {
   position: absolute;
   z-index: 4;
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 190px;
   padding: 14px 16px;
   border-radius: 15px;
   background: rgba(16, 18, 23, 0.92);
   border: 1px solid rgba(255,255,255,0.12);
   box-shadow: 0 15px 40px rgba(0,0,0,0.45);
   backdrop-filter: blur(18px);
}


.gme-floating-card-one {
top: 32%;
  left: -15px;
}


.gme-floating-card-two {
   bottom: 8%;
   right: -10px;
}


.gme-floating-icon {
   width: 42px;
   height: 42px;
   flex: 0 0 42px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 12px;
   background: linear-gradient(135deg, #ff6900, #ffab3d);
   color: #ffffff;
   box-shadow: 0 8px 20px rgba(255, 105, 0, 0.22);
}


.gme-floating-card span {
   display: block;
   color: #969da9;
   font-size: 12px;
   line-height: 1.2;
}


.gme-floating-card strong {
   display: block;
   margin-top: 3px;
   color: #ffffff;
   font-size: 16px;
   line-height: 1.2;
}


/* =========================================================
   DID YOU KNOW SECTION
========================================================= */

.gme-didyou-wrap {
   margin-top: 80px;
   padding: 42px;
   border-radius: 28px;
   border: 1px solid rgba(255,255,255,0.08);
   background:
      radial-gradient(circle at top center, rgba(255, 111, 0, 0.08), transparent 40%),
      rgba(255,255,255,0.025);
}


.gme-didyou-title {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 13px;
   margin-bottom: 35px;
   color: #ffffff;
   font-size: 34px;
   line-height: 1.2;
   font-weight: 900;
}


.gme-didyou-icon {
   width: 52px;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 15px;
   background: linear-gradient(135deg, #ff6d00, #ffa52e);
   color: #ffffff;
   font-size: 21px;
   box-shadow: 0 10px 25px rgba(255, 105, 0, 0.25);
}


/* =========================================================
   STAT CARDS
========================================================= */

.gme-stat-card {
   height: 100%;
   display: flex;
   align-items: flex-start;
   gap: 16px;
  padding: 15px;
   border-radius: 18px;
   background: linear-gradient(
      145deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.018)
   );
   border: 1px solid rgba(255,255,255,0.08);
   transition:
      transform .3s ease,
      border-color .3s ease,
      box-shadow .3s ease,
      background .3s ease;
}


.gme-stat-card:hover {
   transform: translateY(-6px);
   border-color: rgba(255, 121, 0, 0.35);
   background: linear-gradient(
      145deg,
      rgba(255, 111, 0, 0.09),
      rgba(255,255,255,0.02)
   );
   box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}


.gme-stat-icon {
   width: 48px;
   height: 48px;
   min-width: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 14px;
   background: rgba(255, 119, 0, 0.11);
   border: 1px solid rgba(255, 122, 0, 0.18);
   color: #ff8c1c;
   font-size: 18px;
}


.gme-stat-text {
   color: #c8cdd5;
   font-size: 18px;
   line-height: 1.6;
}


.gme-stat-text strong {
   color: #ffffff;
   font-weight: 800;
}


/* WIDE FINAL STAT */

.gme-stat-card-wide {
   position: relative;
   align-items: center;
   padding-right: 170px;
   border-color: rgba(255, 122, 0, 0.2);
   background:
      linear-gradient(
         100deg,
         rgba(255, 111, 0, 0.12),
         rgba(255,255,255,0.025)
      );
}


.gme-stat-badge {
   position: absolute;
   right: 24px;
   top: 50%;
   transform: translateY(-50%);
   padding: 10px 16px;
   border-radius: 10px;
   background: linear-gradient(135deg, #ff6500, #ff9d29);
   color: #ffffff;
   font-size: 14px;
   font-weight: 900;
   letter-spacing: .5px;
   white-space: nowrap;
   box-shadow: 0 9px 25px rgba(255, 105, 0, 0.22);
}


/* =========================================================
   CLOSING
========================================================= */

.gme-boom-closing {
   margin-top: 45px;
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 27px 30px;
   border-radius: 20px;
   background:
      linear-gradient(
         90deg,
         rgba(255, 101, 0, 0.16),
         rgba(255, 170, 50, 0.07)
      );
   border: 1px solid rgba(255, 127, 20, 0.28);
   box-shadow:
      0 20px 45px rgba(0,0,0,.2),
      inset 0 1px 0 rgba(255,255,255,.06);
}


.gme-closing-icon {
   width: 58px;
   height: 58px;
   min-width: 58px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   background: linear-gradient(135deg, #ff6300, #ffac38);
   color: #ffffff;
   font-size: 22px;
   box-shadow: 0 10px 25px rgba(255, 105, 0, 0.25);
}


.gme-closing-text {
   color: #e3e5e9;
   font-size: 20px;
   line-height: 1.55;
}


.gme-closing-text strong {
   color: #ffffff;
   font-weight: 800;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

   .gme-boom-section {
      padding: 70px 0;
   }

   .gme-boom-heading {
      font-size: 38px;
   }

   .gme-boom-subline {
      font-size: 20px;
   }

   .gme-boom-main-row {
      margin-top: 45px;
   }

   .gme-floating-card-one {
      left: 0;
   }

   .gme-floating-card-two {
      right: 0;
   }

   .gme-didyou-wrap {
      margin-top: 55px;
      padding: 30px;
   }
}


@media (max-width: 767px) {

   .gme-boom-section {
      padding: 55px 0;
      font-size: 18px;
   }

   .gme-boom-heading {
      font-size: 30px;
      line-height: 1.25;
      letter-spacing: -.5px;
   }

   .gme-boom-subline {
      font-size: 18px;
   }

   .gme-boom-content {
      padding: 25px 22px;
   }

   .gme-boom-content p {
      font-size: 18px;
      line-height: 1.65;
   }

   .gme-didyou-wrap {
      padding: 25px 16px;
      border-radius: 20px;
   }

   .gme-didyou-title {
      font-size: 27px;
   }

   .gme-stat-card {
      padding: 20px;
   }

   .gme-stat-card-wide {
      padding-right: 20px;
      padding-bottom: 70px;
   }

   .gme-stat-badge {
      top: auto;
      bottom: 17px;
      left: 84px;
      right: auto;
      transform: none;
   }

   .gme-boom-closing {
      align-items: flex-start;
      padding: 22px;
   }

   .gme-closing-text {
      font-size: 18px;
   }

   .gme-floating-card {
      min-width: 165px;
      padding: 11px 13px;
   }
}


@media (max-width: 480px) {

   .gme-boom-heading {
      font-size: 27px;
   }

   .gme-boom-eyebrow {
      font-size: 12px;
   }

   .gme-floating-card {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      margin-top: 12px;
      width: 100%;
   }

   .gme-boom-image-wrap {
      padding: 5px;
   }

   .gme-didyou-title {
      justify-content: flex-start;
   }

   .gme-stat-card {
      gap: 13px;
   }

   .gme-stat-icon {
      width: 44px;
      height: 44px;
      min-width: 44px;
   }
}


/* ==========================================================
   GUMROAD ENGINE - 4 STEP ZIG ZAG
   UNIQUE PREFIX: gmzig42-
========================================================== */

.gmzig42-section {
   position: relative;
   overflow: hidden;

   padding: 70px 0 80px;

   background:
      radial-gradient(
         circle at 12% 15%,
         rgba(255, 132, 91, .09),
         transparent 24%
      ),
      radial-gradient(
         circle at 90% 50%,
         rgba(219, 62, 214, .07),
         transparent 28%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fffaf8 50%,
         #ffffff 100%
      );
}


.gmzig42-section * {
   box-sizing: border-box;
}


/* subtle grid */

.gmzig42-section::before {
   content: "";

   position: absolute;
   inset: 0;

   opacity: .3;

   background-image:
      linear-gradient(
         rgba(204, 97, 132, .045) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(204, 97, 132, .045) 1px,
         transparent 1px
      );

   background-size: 40px 40px;

   pointer-events: none;
}


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

.gmzig42-heading {
   position: relative;

   max-width: 1050px;

   margin: 0 auto 75px;
}


.gmzig42-kicker {
   margin-bottom: 13px;

   color: #817580;

   font-size: 11px;

   line-height: 1;

   font-weight: 850;

   letter-spacing: 2px;
}


.gmzig42-main-title {
margin: 0;
  color: #11121a;
  font-size: clamp( 35px, 4.5vw, 47px );
  line-height: 1.4;
  font-weight: 950;
  letter-spacing: -2.4px;
}


.gmzig42-main-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9d59 0%,
         #ff765e 34%,
         #ff5d73 67%,
         #d23bdd 100%
      );

   -webkit-background-clip: text;
   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmzig42-heading-line {
   width: 88px;
   height: 4px;

   margin: 20px auto 0;

   border-radius: 100px;

   background:
      linear-gradient(
         90deg,
         #ff9c59,
         #ff5d70,
         #cb3edf
      );

   box-shadow:
      0 8px 22px
      rgba(219, 60, 193, .18);
}


/* ==========================================================
   STEP
========================================================== */

.gmzig42-step {
   position: relative;

   margin-bottom: 85px;
}


.gmzig42-step-last {
   margin-bottom: 60px;
}


/* ==========================================================
   IMAGE WRAP
========================================================== */

.gmzig42-image-wrap {
   position: relative;

   padding:
      42px 25px
      22px;
}


.gmzig42-image-right {
   padding-left: 25px;
   padding-right: 25px;
}


/* ==========================================================
   BIG NUMBER
========================================================== */

.gmzig42-big-number {
   position: absolute;

   left: 0;
   top: 0;

   z-index: 0;

   color: #f3edfa;

   font-size: 72px;

   line-height: 1;

   font-weight: 950;

   letter-spacing: -4px;
}


.gmzig42-image-right
.gmzig42-big-number {
   left: auto;
   right: 0;
}


/* ==========================================================
   IMAGE CARD
========================================================== */

.gmzig42-image-card {
   position: relative;

   z-index: 2;

   padding: 14px;

   overflow: hidden;

   border:
      1px solid
      rgba(219, 82, 185, .18);

   border-radius: 22px;

   background:
      linear-gradient(
         145deg,
         #ffffff,
         #fff7fb
      );

   box-shadow:
      0 22px 52px
      rgba(77, 48, 79, .10);

   transition:
      transform .3s ease,
      box-shadow .3s ease;
}


.gmzig42-image-wrap:hover
.gmzig42-image-card {
   transform: translateY(-5px);

   box-shadow:
      0 28px 60px
      rgba(77, 48, 79, .14);
}


.gmzig42-image {
   display: block;

   width: 100%;
   height: auto;

   border-radius: 15px;

   object-fit: cover;
}


/* ==========================================================
   FLOATING BADGE
========================================================== */

.gmzig42-float-badge {
   position: absolute;

   z-index: 5;

   left: 4px;
   bottom: 0;

   display: inline-flex;

   align-items: center;

   gap: 8px;

   padding:
      8px 13px;

   color: #302b36;

   border:
      1px solid
      rgba(211, 91, 179, .12);

   border-radius: 100px;

   background:
      rgba(255,255,255,.96);

   box-shadow:
      0 10px 25px
      rgba(71, 47, 74, .11);

   font-size: 11px;

   font-weight: 800;
}


.gmzig42-image-right
.gmzig42-float-badge {
   left: auto;
   right: 4px;
}


.gmzig42-float-badge span {
   width: 27px;
   height: 27px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #ff8a5d,
         #ef43ac,
         #a042ed
      );

   font-size: 9px;

   font-weight: 900;
}


/* ==========================================================
   CONTENT
========================================================== */

.gmzig42-content {
   max-width: 560px;

   padding: 10px 5px;
}


.gmzig42-step-tag {
   display: inline-flex;

   align-items: center;

   margin-bottom: 14px;

   padding:
      7px 11px;

   color: #d540b9;

   border:
      1px solid
      rgba(211, 66, 184, .15);

   border-radius: 5px;

   background:
      linear-gradient(
         135deg,
         #fff7f4,
         #fff8fd
      );

   font-size: 10px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: 1px;
}


.gmzig42-content h3 {
   margin: 0;

   color: #12121a;

   font-size:
      clamp(
         30px,
         3vw,
         43px
      );

   line-height: 1.08;

   font-weight: 950;

   letter-spacing: -1.5px;
}


.gmzig42-rule {
   width: 52px;
   height: 4px;

   margin:
      18px 0
      20px;

   border-radius: 50px;

   background:
      linear-gradient(
         90deg,
         #ff9659,
         #ff5f70,
         #ce3ede
      );
}


.gmzig42-content p {
   margin: 0;

   color: #58515d;

   font-size: 18px;

   line-height: 1.7;

   font-weight: 400;
}


/* ==========================================================
   CONNECTORS
========================================================== */

.gmzig42-connector {
   position: relative;

   width: 55%;

   height: 70px;

   margin:
      -65px auto
      20px;

   align-items: center;
   justify-content: center;
}


.gmzig42-connector span {
   width: 100%;
   height: 1px;

   border-top:
      1px dashed
      rgba(145, 118, 157, .40);
}


.gmzig42-connector i {
   position: absolute;

   right: 0;

   width: 8px;
   height: 8px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #ff755e,
         #d93dd5
      );

   box-shadow:
      0 0 0 4px
      rgba(220, 60, 202, .08);
}


.gmzig42-connector-reverse i {
   right: auto;
   left: 0;
}


/* ==========================================================
   CLOSING
========================================================== */

.gmzig42-closing {
   position: relative;

   padding:
      30px 30px;

   overflow: hidden;

   border:
      1px solid
      rgba(215, 93, 181, .16);

   border-radius: 22px;

   background:
      linear-gradient(
         145deg,
         #ffffff,
         #fff8fb
      );

   box-shadow:
      0 18px 45px
      rgba(75, 48, 75, .08);
}


.gmzig42-closing::after {
   content: "";

   position: absolute;

   width: 200px;
   height: 200px;

   right: -120px;
   top: -120px;

   border-radius: 50%;

   background:
      rgba(221, 62, 203, .06);
}


.gmzig42-closing-small {
   margin-bottom: 10px;

   color: #827783;

   font-size: 10px;

   font-weight: 850;

   letter-spacing: 1.7px;
}


.gmzig42-closing h4 {
position: relative;
  z-index: 2;
  max-width: 950px;
  margin: auto;
  color: #13121a;
  font-size: clamp( 27px, 3.3vw, 34px );
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -1.2px;
}


.gmzig42-closing h4 span {
   display: block;

   margin-top: 7px;

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9b59,
         #ff705f,
         #ff5b76,
         #d33ddd
      );

   -webkit-background-clip: text;
   background-clip: text;

   -webkit-text-fill-color: transparent;
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1199px) {

   .gmzig42-main-title {
      font-size: 48px;
   }


   .gmzig42-content h3 {
      font-size: 36px;
   }


   .gmzig42-big-number {
      font-size: 64px;
   }

}


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

@media (max-width: 991px) {

   .gmzig42-section {
      padding:
         50px 0
         60px;
   }


   .gmzig42-heading {
      margin-bottom: 50px;
   }


   .gmzig42-main-title {
      font-size: 40px;
   }


   .gmzig42-step {
      margin-bottom: 65px;
   }


   .gmzig42-image-wrap {
      max-width: 720px;

      margin:
         0 auto;

      padding:
         38px 20px
         22px;
   }


   .gmzig42-content {
      max-width: 720px;

      margin:
         10px auto 0;
   }


   .gmzig42-content h3 {
      font-size: 32px;
   }


   .gmzig42-big-number {
      font-size: 55px;
   }

}


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

@media (max-width: 767px) {

   .gmzig42-section {
      padding:
         40px 0
         48px;
   }


   .gmzig42-heading {
      margin-bottom: 38px;
   }


   .gmzig42-kicker {
      font-size: 9px;

      letter-spacing: 1.3px;
   }


   .gmzig42-main-title {
      font-size: 31px;

      line-height: 1.14;

      letter-spacing: -1.2px;
   }


   .gmzig42-step {
      margin-bottom: 52px;
   }


   .gmzig42-step-last {
      margin-bottom: 40px;
   }


   .gmzig42-image-wrap {
      padding:
         32px 5px
         20px;
   }


   .gmzig42-big-number {
      font-size: 47px;
   }


   .gmzig42-image-card {
      padding: 9px;

      border-radius: 17px;
   }


   .gmzig42-image {
      border-radius: 11px;
   }


   .gmzig42-float-badge {
      padding:
         6px 10px;

      font-size: 10px;
   }


   .gmzig42-content {
      margin-top: 8px;

      padding: 0 3px;
   }


   .gmzig42-content h3 {
      font-size: 28px;

      line-height: 1.11;

      letter-spacing: -1px;
   }


   .gmzig42-rule {
      width: 45px;

      margin:
         14px 0
         16px;
   }


   .gmzig42-content p {
      font-size: 16px;

      line-height: 1.65;
   }


   .gmzig42-closing {
      padding:
         22px 16px;

      border-radius: 17px;
   }


   .gmzig42-closing h4 {
      font-size: 26px;
   }

}


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

@media (max-width: 480px) {

   .gmzig42-main-title {
      font-size: 27px;
   }


   .gmzig42-content h3 {
      font-size: 25px;
   }


   .gmzig42-content p {
      font-size: 15px;
   }


   .gmzig42-big-number {
      font-size: 42px;
   }


   .gmzig42-closing h4 {
      font-size: 23px;
   }

}

/* ==========================================================
   GUMROAD ENGINE - CANCEL THE OLD WAY SECTION
   UNIQUE PREFIX: gmcancel41-
========================================================== */

.gmcancel41-section {
   position: relative;
   overflow: hidden;
   padding: 75px 0 85px;
   background:
      radial-gradient(circle at 12% 18%, rgba(255, 123, 88, .10), transparent 24%),
      radial-gradient(circle at 88% 72%, rgba(211, 64, 214, .10), transparent 28%),
      linear-gradient(180deg, #09051a 0%, #0b071f 45%, #070313 100%);
   isolation: isolate;
}

.gmcancel41-section * {
   box-sizing: border-box;
}

/* subtle grid */
.gmcancel41-section::before {
   content: "";
   position: absolute;
   inset: 0;
   opacity: .18;
   background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
   background-size: 38px 38px;
   pointer-events: none;
}

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

.gmcancel41-head {
   max-width: 1050px;
   margin: 0 auto 48px;
}

.gmcancel41-kicker {
   margin-bottom: 12px;
   color: #ff8a5d;
   font-size: 12px;
   line-height: 1;
   font-weight: 900;
   letter-spacing: 2px;
   text-transform: uppercase;
}

.gmcancel41-title {
margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 4.3vw, 43px);
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: -2px;
}

.gmcancel41-title span {
   color: transparent;
   background: linear-gradient(90deg, #ff9e59 0%, #ff6f60 34%, #ff5b74 68%, #d53adf 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.gmcancel41-line {
   width: 88px;
   height: 4px;
   margin: 18px auto 0;
   border-radius: 999px;
   background: linear-gradient(90deg, #ff9658, #ff5f71, #cb3edf);
   box-shadow: 0 8px 22px rgba(212, 58, 196, .20);
}

/* =========================
   COST CARDS
========================= */

.gmcancel41-card {
   position: relative;
   height: 100%;
   min-height: 255px;
   padding: 26px 22px 24px;
   text-align: center;
   overflow: hidden;
   border: 1px solid rgba(255, 145, 86, .65);
   border-radius: 18px;
   background:
      radial-gradient(circle at 100% 0%, rgba(255, 82, 146, .08), transparent 24%),
      linear-gradient(145deg, rgba(20,14,42,.98) 0%, rgba(10,8,28,.98) 100%);
   box-shadow:
      0 16px 38px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.03);
   transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.gmcancel41-card:hover {
   transform: translateY(-6px);
   border-color: rgba(255, 128, 82, .90);
   box-shadow:
      0 26px 50px rgba(0,0,0,.42),
      0 0 30px rgba(222, 61, 193, .08);
}

.gmcancel41-cross {
   position: absolute;
   top: 10px;
   right: 12px;
   z-index: 3;
   color: #ff4343;
   font-size: 34px;
   line-height: 1;
   font-weight: 900;
   text-shadow: 0 8px 20px rgba(255, 55, 55, .24);
   transform: rotate(-12deg);
}

.gmcancel41-logo-wrap {
   min-height: 86px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px;
}

.gmcancel41-logo {
   max-width: 150px;
  max-height: 150px;
   object-fit: contain;
   filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.gmcancel41-card h3 {
   margin: 0 0 10px;
   color: #ffffff;
   font-size: 24px;
   line-height: 1.22;
   font-weight: 800;
   letter-spacing: -.4px;
}

.gmcancel41-price {
   color: #ff9d58;
   font-size: 28px;
   line-height: 1.1;
   font-weight: 900;
   letter-spacing: -.8px;
}

.gmcancel41-meta {
   margin-top: 8px;
   color: rgba(255,255,255,.72);
   font-size: 18px;
   line-height: 1.4;
   font-weight: 500;
}

/* =========================
   MID PIVOT
========================= */

.gmcancel41-pivot {
   max-width: 980px;
   margin: 50px auto 42px;
}

.gmcancel41-alert-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 16px;
   margin-bottom: 18px;
   border-radius: 999px;
   background: linear-gradient(90deg, #ffb14f 0%, #ff704f 45%, #ff4747 100%);
   box-shadow: 0 10px 22px rgba(255, 94, 73, .22);
}

.gmcancel41-alert-badge span {
   color: #ffffff;
   font-size: 12px;
   line-height: 1;
   font-weight: 900;
   letter-spacing: 2px;
}

.gmcancel41-pivot h3 {
margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 43px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -1px;
}

.gmcancel41-pivot h3 span {
   color: transparent;
   background: linear-gradient(90deg, #ff9b59 0%, #ff705f 38%, #ff5a76 70%, #d63adf 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.gmcancel41-pivot h4 {
   margin: 0;
   color: rgba(255,255,255,.92);
   font-size: clamp(24px, 2.5vw, 36px);
   line-height: 1.22;
   font-weight: 800;
   letter-spacing: -.5px;
}

.gmcancel41-pivot h4 span {
   color: #ff8f5d;
}

/* =========================
   REVEAL VISUAL
========================= */

.gmcancel41-reveal-visual {
   position: relative;
   min-height: 420px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

.gmcancel41-reveal-glow {
   position: absolute;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(255, 122, 88, .18), rgba(215, 61, 214, .16));
   filter: blur(75px);
   pointer-events: none;
}

.gmcancel41-reveal-image {
   position: relative;
   z-index: 2;
   max-height: 430px;
   object-fit: contain;
   filter: drop-shadow(0 28px 35px rgba(0,0,0,.35));
}

/* =========================
   REVEAL BOX
========================= */

.gmcancel41-reveal-box {
   position: relative;
   padding: 30px 28px;
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 22px;
   background:
      radial-gradient(circle at 100% 0%, rgba(255, 83, 143, .10), transparent 24%),
      linear-gradient(145deg, rgba(22,15,43,.96) 0%, rgba(10,8,28,.96) 100%);
   box-shadow:
      0 22px 50px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.03);
}

.gmcancel41-reveal-tag {
   display: inline-flex;
   align-items: center;
   padding: 7px 12px;
   margin-bottom: 14px;
   border-radius: 999px;
   color: #ffffff;
   font-size: 11px;
   line-height: 1;
   font-weight: 900;
   letter-spacing: 1.5px;
   background: linear-gradient(90deg, #ff9659 0%, #ff5d71 50%, #cc3edf 100%);
   box-shadow: 0 10px 20px rgba(219, 58, 189, .16);
}

.gmcancel41-reveal-box p {
   margin: 0;
   color: rgba(255,255,255,.82);
   font-size: 18px;
   line-height: 1.7;
   font-weight: 400;
}

.gmcancel41-reveal-box p strong {
   color: #ffffff;
   font-weight: 900;
}

.gmcancel41-check-list {
   display: grid;
   gap: 12px;
   margin-top: 24px;
}

.gmcancel41-check-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 14px 14px;
   border: 1px solid rgba(255,255,255,.06);
   border-radius: 14px;
   background: rgba(255,255,255,.03);
}

.gmcancel41-check-item span {
   width: 26px;
   height: 26px;
   min-width: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1px;
   color: #ffffff;
   border-radius: 50%;
   background: linear-gradient(135deg, #ff8b5d, #ef43ab, #9f42ee);
   font-size: 12px;
   font-weight: 900;
}

.gmcancel41-check-item div {
   color: #ffffff;
   font-size: 18px;
   line-height: 1.5;
   font-weight: 700;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1199px) {
   .gmcancel41-card h3 {
      font-size: 22px;
   }

   .gmcancel41-price {
      font-size: 25px;
   }
}

@media (max-width: 991px) {
   .gmcancel41-section {
      padding: 55px 0 62px;
   }

   .gmcancel41-head {
      margin-bottom: 36px;
   }

   .gmcancel41-pivot {
      margin: 42px auto 34px;
   }

   .gmcancel41-reveal-visual {
      min-height: 340px;
   }

   .gmcancel41-reveal-image {
      max-height: 340px;
   }
}

@media (max-width: 767px) {
   .gmcancel41-section {
      padding: 42px 0 48px;
   }

   .gmcancel41-kicker {
      font-size: 10px;
      letter-spacing: 1.5px;
   }

   .gmcancel41-title {
      font-size: 31px;
      line-height: 1.14;
      letter-spacing: -1.2px;
   }

   .gmcancel41-line {
      width: 70px;
      margin-top: 15px;
   }

   .gmcancel41-card {
      min-height: auto;
      padding: 22px 18px 20px;
      border-radius: 16px;
   }

   .gmcancel41-cross {
      font-size: 28px;
   }

   .gmcancel41-card h3 {
      font-size: 20px;
   }

   .gmcancel41-price {
      font-size: 24px;
   }

   .gmcancel41-meta,
   .gmcancel41-reveal-box p,
   .gmcancel41-check-item div {
      font-size: 16px;
   }

   .gmcancel41-pivot h3 {
      font-size: 29px;
      line-height: 1.22;
   }

   .gmcancel41-pivot h4 {
      font-size: 23px;
      line-height: 1.25;
   }

   .gmcancel41-reveal-box {
      padding: 22px 18px;
      border-radius: 16px;
   }

   .gmcancel41-reveal-visual {
      min-height: auto;
      padding: 10px 0;
   }

   .gmcancel41-reveal-image {
      max-height: 300px;
   }
}

@media (max-width: 480px) {
   .gmcancel41-title {
      font-size: 27px;
   }

   .gmcancel41-card h3 {
      font-size: 18px;
   }

   .gmcancel41-price {
      font-size: 22px;
   }

   .gmcancel41-meta,
   .gmcancel41-reveal-box p,
   .gmcancel41-check-item div {
      font-size: 15px;
   }

   .gmcancel41-pivot h3 {
      font-size: 25px;
   }

   .gmcancel41-pivot h4 {
      font-size: 20px;
   }
}
/* ==========================================================
   GUMROAD ENGINE - WE'VE GOT YOU COVERED
   WHITE PREMIUM THEME
   UNIQUE PREFIX: gmcoveredfull27-
========================================================== */

.gmcoveredfull27-section {
   position: relative;
   overflow: hidden;

   padding: 65px 0 75px;

   background:
      radial-gradient(
         circle at 8% 18%,
         rgba(255, 133, 92, .11),
         transparent 24%
      ),
      radial-gradient(
         circle at 92% 60%,
         rgba(219, 61, 212, .075),
         transparent 27%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fffaf8 52%,
         #ffffff 100%
      );

   isolation: isolate;
}


.gmcoveredfull27-section * {
   box-sizing: border-box;
}


/* ==========================================================
   BACKGROUND GRID
========================================================== */

.gmcoveredfull27-section::before {
   content: "";

   position: absolute;
   inset: 0;

   z-index: -1;

   opacity: .27;

   background-image:
      linear-gradient(
         rgba(167, 99, 162, .045) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(167, 99, 162, .045) 1px,
         transparent 1px
      );

   background-size: 44px 44px;

   pointer-events: none;
}


/* decorative glow */

.gmcoveredfull27-section::after {
   content: "";

   position: absolute;

   width: 480px;
   height: 480px;

   right: -260px;
   bottom: -240px;

   z-index: -1;

   border-radius: 50%;

   background:
      rgba(228, 68, 196, .07);

   filter: blur(85px);

   pointer-events: none;
}


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

.gmcoveredfull27-heading {
   position: relative;

   max-width: 1050px;

   margin: 0 auto;
}


.gmcoveredfull27-kicker {
   margin-bottom: 13px;

   color: #81747f;

   font-size: 11px;

   line-height: 1;

   font-weight: 850;

   letter-spacing: 2px;

   text-transform: uppercase;
}


.gmcoveredfull27-title {
   margin: 0;

   color: #131119;

   font-size:
      clamp(
         35px,
         4.3vw,
         56px
      );

   line-height: 1.09;

   font-weight: 950;

   letter-spacing: -2.2px;
}


.gmcoveredfull27-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9d59 0%,
         #ff775e 32%,
         #ff5d74 67%,
         #d23ade 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmcoveredfull27-heading-line {
   width: 88px;
   height: 4px;

   margin: 19px auto 0;

   border-radius: 100px;

   background:
      linear-gradient(
         90deg,
         #ff9b59,
         #ff5d70,
         #cc3edf
      );

   box-shadow:
      0 8px 22px
      rgba(220, 59, 192, .17);
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.gmcoveredfull27-content {
   position: relative;

   width: 100%;
}


.gmcoveredfull27-subheading {
   margin-bottom: 18px;

   color: #17131d;

   font-size: 27px;

   line-height: 1.3;

   font-weight: 900;

   letter-spacing: -.5px;
}


/* ==========================================================
   POINT
========================================================== */

.gmcoveredfull27-point {
   position: relative;

   display: flex;

   align-items: center;

   width: 100%;

   margin-bottom: 12px;

   padding: 14px 16px;

   overflow: hidden;

   border:
      1px solid
      rgba(110, 77, 125, .10);

   border-radius: 14px;

   background:
      linear-gradient(
         135deg,
         rgba(255,255,255,.99),
         rgba(255,249,247,.98)
      );

   box-shadow:
      0 9px 24px
      rgba(72, 47, 73, .055);

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


.gmcoveredfull27-point:last-child {
   margin-bottom: 0;
}


.gmcoveredfull27-point:hover {
   transform:
      translateX(5px);

   border-color:
      rgba(255, 106, 89, .24);

   box-shadow:
      0 14px 31px
      rgba(72, 47, 73, .09);
}


/* left accent */

.gmcoveredfull27-point::before {
   content: "";

   position: absolute;

   left: 0;
   top: 0;

   width: 3px;
   height: 100%;

   background:
      linear-gradient(
         180deg,
         #ff995a,
         #ff5f70,
         #d73bdd
      );
}


/* subtle right glow */

.gmcoveredfull27-point::after {
   content: "";

   position: absolute;

   width: 90px;
   height: 90px;

   right: -50px;
   top: 50%;

   transform:
      translateY(-50%);

   border-radius: 50%;

   background:
      rgba(255, 143, 75, .055);

   pointer-events: none;
}


/* ==========================================================
   ICON + TEXT
========================================================== */

.gmcoveredfull27-left {
   position: relative;

   z-index: 2;

   width: 100%;

   display: flex;

   align-items: center;

   gap: 14px;
}


.gmcoveredfull27-left-icon {
   width: 46px;
   height: 46px;

   min-width: 46px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border:
      1px solid
      rgba(255,255,255,.28);

   border-radius: 12px;

   background:
      linear-gradient(
         135deg,
         #ff985a 0%,
         #ff6471 40%,
         #e544b6 67%,
         #9f45ed 100%
      );

   box-shadow:
      0 9px 20px
      rgba(211, 62, 180, .22);

   font-size: 17px;

   line-height: 1;

   font-weight: 900;

   flex-shrink: 0;

   transition:
      transform .25s ease,
      box-shadow .25s ease;
}


.gmcoveredfull27-point:hover
.gmcoveredfull27-left-icon {
   transform:
      translateY(-2px)
      rotate(-4deg)
      scale(1.05);

   box-shadow:
      0 13px 25px
      rgba(211, 62, 180, .29);
}


/* ==========================================================
   DIFFERENT ICON GRADIENTS
========================================================== */

.gmcoveredfull27-point:nth-child(2)
.gmcoveredfull27-left-icon {
   background:
      linear-gradient(
         135deg,
         #ff9d57,
         #ff615f
      );
}


.gmcoveredfull27-point:nth-child(3)
.gmcoveredfull27-left-icon {
   background:
      linear-gradient(
         135deg,
         #c944ed,
         #7548ee
      );
}


.gmcoveredfull27-point:nth-child(4)
.gmcoveredfull27-left-icon {
   background:
      linear-gradient(
         135deg,
         #ff855d,
         #e942b6
      );
}


.gmcoveredfull27-point:nth-child(5)
.gmcoveredfull27-left-icon {
   background:
      linear-gradient(
         135deg,
         #f052b5,
         #9945ed
      );
}


.gmcoveredfull27-point:nth-child(6)
.gmcoveredfull27-left-icon {
   background:
      linear-gradient(
         135deg,
         #ff9a58,
         #ff5f63
      );
}


.gmcoveredfull27-point:nth-child(7)
.gmcoveredfull27-left-icon {
   background:
      linear-gradient(
         135deg,
         #ff805f,
         #d43dd1
      );
}


/* ==========================================================
   TEXT
========================================================== */

.gmcoveredfull27-point-text {
   flex: 1;

   min-width: 0;

   color: #4b4651;

   font-size: 18px;

   line-height: 1.55;

   font-weight: 500;
}


/* ==========================================================
   IMAGE SIDE
========================================================== */

.gmcoveredfull27-image-wrap {
   position: relative;

   min-height: 500px;

   display: flex;

   align-items: center;
   justify-content: center;

   padding: 30px;
}


.gmcoveredfull27-image-glow {
   position: absolute;

   width: 350px;
   height: 350px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         rgba(255, 133, 91, .19),
         rgba(221, 63, 213, .13)
      );

   filter: blur(70px);

   pointer-events: none;
}


/* ==========================================================
   IMAGE CARD
========================================================== */

.gmcoveredfull27-image-card {
   position: relative;

   z-index: 2;

   width: 100%;

   padding: 16px;

   overflow: hidden;

   border:
      1px solid
      rgba(220, 91, 185, .14);

   border-radius: 25px;

   background:
      rgba(255,255,255,.90);

   box-shadow:
      0 25px 58px
      rgba(76, 49, 75, .11),

      inset 0 1px 0
      rgba(255,255,255,1);

   backdrop-filter:
      blur(8px);

   -webkit-backdrop-filter:
      blur(8px);
}


.gmcoveredfull27-image {
   display: block;

   width: 100%;
   height: auto;

   max-height: 450px;

   margin: auto;

   object-fit: contain;

   border-radius: 17px;

   filter:
      drop-shadow(
         0 20px 28px
         rgba(66, 42, 66, .12)
      );

   transition:
      transform .3s ease;
}


.gmcoveredfull27-image-wrap:hover
.gmcoveredfull27-image {
   transform:
      scale(1.018);
}


/* ==========================================================
   FLOATING BADGES
========================================================== */

.gmcoveredfull27-float {
   position: absolute;

   z-index: 5;

   display: flex;

   align-items: center;

   gap: 8px;

   padding:
      8px 13px;

   color: #37313b;

   border:
      1px solid
      rgba(104, 74, 116, .10);

   border-radius: 100px;

   background:
      rgba(255,255,255,.96);

   box-shadow:
      0 11px 27px
      rgba(75, 48, 75, .12);

   font-size: 11px;

   line-height: 1;

   font-weight: 800;

   backdrop-filter:
      blur(10px);
}


.gmcoveredfull27-float span {
   width: 27px;
   height: 27px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #ff8c5c,
         #ed43ad,
         #9d43ed
      );

   font-size: 11px;

   font-weight: 900;
}


.gmcoveredfull27-float-one {
   left: 5px;

   bottom: 75px;
}


.gmcoveredfull27-float-two {
   right: 4px;

   top: 85px;
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1199px) {

   .gmcoveredfull27-title {
      font-size: 48px;
   }


   .gmcoveredfull27-point-text {
      font-size: 17px;
   }


   .gmcoveredfull27-image-wrap {
      min-height: 450px;
   }


   .gmcoveredfull27-image {
      max-height: 400px;
   }

}


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

@media (max-width: 991px) {

   .gmcoveredfull27-section {
      padding:
         50px 0
         60px;
   }


   .gmcoveredfull27-title {
      font-size: 40px;
   }


   .gmcoveredfull27-subheading {
      font-size: 23px;
   }


   .gmcoveredfull27-left {
      gap: 10px;
   }


   .gmcoveredfull27-left-icon {
      width: 40px;
      height: 40px;

      min-width: 40px;

      font-size: 14px;
   }


   .gmcoveredfull27-point {
      padding:
         11px 12px;
   }


   .gmcoveredfull27-point-text {
      font-size: 15px;
   }


   .gmcoveredfull27-image-wrap {
      min-height: 390px;

      padding: 15px;
   }


   .gmcoveredfull27-image {
      max-height: 350px;
   }

}


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

@media (max-width: 767px) {

   .gmcoveredfull27-section {
      padding:
         40px 0
         48px;
   }


   .gmcoveredfull27-kicker {
      font-size: 9px;

      letter-spacing: 1.3px;
   }


   .gmcoveredfull27-title {
      font-size: 31px;

      line-height: 1.14;

      letter-spacing: -1.2px;
   }


   .gmcoveredfull27-heading-line {
      width: 70px;

      margin-top: 15px;
   }


   .gmcoveredfull27-subheading {
      margin-bottom: 15px;

      font-size: 21px;
   }


   .gmcoveredfull27-point {
      margin-bottom: 10px;

      padding:
         11px 10px;

      border-radius: 12px;
   }


   .gmcoveredfull27-left {
      gap: 9px;
   }


   .gmcoveredfull27-left-icon {
      width: 37px;
      height: 37px;

      min-width: 37px;

      border-radius: 10px;

      font-size: 13px;
   }


   .gmcoveredfull27-point-text {
      font-size: 15px;

      line-height: 1.5;
   }


   .gmcoveredfull27-image-wrap {
      min-height: auto;

      padding:
         15px 0
         5px;
   }


   .gmcoveredfull27-image-card {
      padding: 10px;

      border-radius: 18px;
   }


   .gmcoveredfull27-image {
      max-height: 330px;

      border-radius: 12px;
   }


   .gmcoveredfull27-float {
      padding:
         6px 9px;

      font-size: 9px;
   }


   .gmcoveredfull27-float span {
      width: 22px;
      height: 22px;

      font-size: 9px;
   }


   .gmcoveredfull27-float-one {
      left: 0;

      bottom: 25px;
   }


   .gmcoveredfull27-float-two {
      right: 0;

      top: 25px;
   }

}


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

@media (max-width: 480px) {

   .gmcoveredfull27-title {
      font-size: 27px;
   }


   .gmcoveredfull27-point {
      padding:
         10px 9px;
   }


   .gmcoveredfull27-left {
      align-items: flex-start;
   }


   .gmcoveredfull27-left-icon {
      width: 34px;
      height: 34px;

      min-width: 34px;

      font-size: 12px;
   }


   .gmcoveredfull27-point-text {
      font-size: 14px;
   }


   .gmcoveredfull27-image {
      max-height: 280px;
   }


   .gmcoveredfull27-float-two {
      display: none;
   }

}

.gde-digital-business-section {
  position: relative;
  padding: 90px 0;
  background:
    radial-gradient(circle at top left, rgba(255, 102, 0, 0.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255, 140, 0, 0.06), transparent 26%),
    linear-gradient(180deg, #050816 0%, #060b1c 45%, #040713 100%);
  overflow: hidden;
  font-size: 18px;
}

.gde-digital-business-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #ff6a00 0%, #ff8c1a 50%, #ff6a00 100%);
}

.gde-digital-business-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  opacity: 0.35;
}

.gde-digital-business-section .container {
  position: relative;
  z-index: 2;
}

.gde-digital-business-heading {
  margin: 0;
  color: #ffffff;
  font-size: 44px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.6px;
}

.gde-digital-business-heading span {
  display: block;
  margin-top: 8px;
  color: #ff9a1f;
  text-transform: uppercase;
}

.gde-digital-business-cards-row {
  margin-top: 52px;
  margin-bottom: 30px;
}

.gde-digital-business-card {
  height: 100%;
  background: linear-gradient(180deg, rgba(11, 18, 40, 0.98) 0%, rgba(7, 12, 28, 0.98) 100%);
  border: 1px solid rgba(255, 140, 0, 0.65);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gde-digital-business-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  border-color: #ffab3d;
}

.gde-digital-business-card-image-wrap {
  padding: 14px 14px 0 14px;
}

.gde-digital-business-card-image {
  width: 100%;
  height: 165px;
  object-fit: cover;
  border-radius: 10px;
  /* border: 2px solid rgba(255, 170, 61, 0.85); */
  background: #0c1228;
}

.gde-digital-business-card-body {
  padding: 18px 18px 22px;
  text-align: center;
}

.gde-digital-business-card-title {
  margin: 0 0 12px;
  color: #ff9a1f;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
  text-transform: uppercase;
}

.gde-digital-business-card-text {
  margin: 0;
  color: #f1f3f8;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
}

.gde-digital-business-closing {
  margin-top: 10px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
}

.gde-digital-business-closing strong {
  color: #ff9a1f;
}

@media (max-width: 991px) {
  .gde-digital-business-section {
    padding: 75px 0;
  }

  .gde-digital-business-heading {
    font-size: 36px;
  }

  .gde-digital-business-card-image {
    height: 180px;
  }

  .gde-digital-business-closing {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  .gde-digital-business-section {
    padding: 60px 0;
  }

  .gde-digital-business-heading {
    font-size: 29px;
    line-height: 1.25;
  }

  .gde-digital-business-cards-row {
    margin-top: 36px;
  }

  .gde-digital-business-card-title {
    font-size: 18px;
  }

  .gde-digital-business-card-text {
    font-size: 18px;
    line-height: 1.6;
  }

  .gde-digital-business-closing {
    font-size: 22px;
  }
}

/* ==========================================================
   GUMROAD ENGINE - FREELANCE CLIENT MONEY SECTION
   UNIQUE PREFIX: gmclientmoney39-
========================================================== */

.gmclientmoney39-section {
   position: relative;
   overflow: hidden;

   padding: 75px 0 80px;

   background:
      radial-gradient(
         circle at 5% 10%,
         rgba(255, 139, 91, .10),
         transparent 24%
      ),
      radial-gradient(
         circle at 95% 75%,
         rgba(211, 63, 218, .08),
         transparent 25%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fffaf8 52%,
         #ffffff 100%
      );

   isolation: isolate;
}


/* ==========================================================
   GRID BACKGROUND
========================================================== */

.gmclientmoney39-section::before {
   content: "";

   position: absolute;
   inset: 0;

   z-index: -1;

   opacity: .30;

   background-image:
      linear-gradient(
         rgba(154, 90, 149, .045) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(154, 90, 149, .045) 1px,
         transparent 1px
      );

   background-size: 42px 42px;

   pointer-events: none;
}


/* ==========================================================
   HEADER
========================================================== */

.gmclientmoney39-header {
   max-width: 1050px;

   margin: 0 auto 42px;
}


.gmclientmoney39-kicker {
   margin-bottom: 13px;

   color: #827580;

   font-size: 11px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: 2px;

   text-transform: uppercase;
}


.gmclientmoney39-title {
margin: 0;
  color: #131119;
  font-size: clamp( 35px, 4.3vw, 41px );
  line-height: 1.4;
  font-weight: 950;
  letter-spacing: -2.2px;
}


.gmclientmoney39-title span {
   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9b59 0%,
         #ff735f 34%,
         #ff5a76 67%,
         #cf3cdf 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmclientmoney39-title-line {
   width: 90px;
   height: 4px;

   margin: 20px auto 0;

   border-radius: 100px;

   background:
      linear-gradient(
         90deg,
         #ff985a,
         #ff5e71,
         #ca3edf
      );

   box-shadow:
      0 8px 22px
      rgba(211, 59, 192, .17);
}


.gmclientmoney39-subline {
   max-width: 900px;

   margin:
      24px auto 0;

   color: #57505a;

   font-size: 18px;

   line-height: 1.65;

   font-weight: 600;
}


/* ==========================================================
   MAIN SHOWCASE
========================================================== */

.gmclientmoney39-showcase {
   position: relative;

   overflow: hidden;

   border:
      1px solid
      rgba(157, 98, 155, .15);

   border-radius: 24px;

   background:
      rgba(255,255,255,.96);

   box-shadow:
      0 30px 70px
      rgba(73, 47, 75, .11);

   transition:
      transform .3s ease,
      box-shadow .3s ease;
}


.gmclientmoney39-showcase:hover {
   transform: translateY(-3px);

   box-shadow:
      0 36px 80px
      rgba(73, 47, 75, .14);
}


/* ==========================================================
   BROWSER HEADER
========================================================== */

.gmclientmoney39-browser-top {
   min-height: 58px;

   display: flex;

   align-items: center;

   gap: 16px;

   padding: 12px 18px;

   border-bottom:
      1px solid
      rgba(114, 82, 123, .10);

   background:
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fffafc 100%
      );
}


.gmclientmoney39-browser-dots {
   display: flex;

   gap: 6px;
}


.gmclientmoney39-browser-dots span {
   width: 9px;
   height: 9px;

   border-radius: 50%;
}


.gmclientmoney39-browser-dots span:nth-child(1) {
   background: #ff655f;
}


.gmclientmoney39-browser-dots span:nth-child(2) {
   background: #ffb34e;
}


.gmclientmoney39-browser-dots span:nth-child(3) {
   background: #28c76f;
}


.gmclientmoney39-browser-label {
   flex: 1;

   color: #827682;

   font-size: 10px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: 1.4px;

   text-transform: uppercase;
}


.gmclientmoney39-browser-badge {
   padding: 7px 11px;

   color: #ffffff;

   border-radius: 100px;

   background:
      linear-gradient(
         90deg,
         #ff8e5b,
         #ee48aa,
         #a143ec
      );

   box-shadow:
      0 7px 18px
      rgba(211, 64, 184, .16);

   font-size: 9px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: .7px;
}


/* ==========================================================
   SCREENSHOT AREA
========================================================== */

.gmclientmoney39-screenshot-area {
   position: relative;

   padding: 24px;

   background:
      radial-gradient(
         circle at 10% 20%,
         rgba(255, 146, 92, .055),
         transparent 25%
      ),
      linear-gradient(
         135deg,
         #fffdfd,
         #fff9fb
      );
}


/* ==========================================================
   EACH SCREENSHOT
========================================================== */

.gmclientmoney39-shot {
   position: relative;

   height: 100%;

   min-height: 260px;

   display: flex;

   align-items: center;
   justify-content: center;

   padding: 9px;

   overflow: hidden;

   border:
      1px solid
      rgba(117, 82, 126, .12);

   border-radius: 16px;

   background: #ffffff;

   box-shadow:
      0 13px 30px
      rgba(68, 45, 69, .07);

   transition:
      transform .25s ease,
      box-shadow .25s ease;
}


.gmclientmoney39-shot:hover {
   transform: translateY(-4px);

   box-shadow:
      0 19px 36px
      rgba(68, 45, 69, .11);
}


.gmclientmoney39-shot img {
   display: block;

   width: 100%;

   height: auto;

   border-radius: 11px;

   object-fit: cover;
}


/* screenshot badge */

.gmclientmoney39-shot-tag {
   position: absolute;

   z-index: 5;

   top: 15px;
   left: 15px;

   padding:
      6px 10px;

   color: #ffffff;

   border-radius: 100px;

   background:
      rgba(18, 15, 24, .90);

   box-shadow:
      0 7px 18px
      rgba(0,0,0,.14);

   font-size: 9px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: 1px;

   backdrop-filter: blur(8px);
}


/* ==========================================================
   BOTTOM MONEY STATEMENT
========================================================== */

.gmclientmoney39-bottom {
   position: relative;

   margin-top: 38px;

   padding:
      28px 32px;

   overflow: hidden;

   border:
      1px solid
      rgba(212, 89, 182, .15);

   border-radius: 22px;

   background:
      linear-gradient(
         135deg,
         #ffffff 0%,
         #fff9f7 48%,
         #fff7fc 100%
      );

   box-shadow:
      0 18px 45px
      rgba(74, 47, 75, .075);
}


.gmclientmoney39-bottom::before {
   content: "";

   position: absolute;

   width: 190px;
   height: 190px;

   top: -120px;
   left: -90px;

   border-radius: 50%;

   background:
      rgba(255, 132, 88, .08);
}


.gmclientmoney39-bottom::after {
   content: "";

   position: absolute;

   width: 200px;
   height: 200px;

   right: -110px;
   bottom: -130px;

   border-radius: 50%;

   background:
      rgba(213, 63, 214, .065);
}


.gmclientmoney39-bottom-icon {
   position: relative;

   z-index: 2;

   width: 48px;
   height: 48px;

   display: flex;

   align-items: center;
   justify-content: center;

   margin:
      0 auto 15px;

   color: #ffffff;

   border-radius: 14px;

   background:
      linear-gradient(
         135deg,
         #ff9958,
         #ff6170,
         #d13edf
      );

   box-shadow:
      0 10px 24px
      rgba(207, 60, 194, .22);

   font-size: 22px;

   line-height: 1;

   font-weight: 950;
}


.gmclientmoney39-bottom h3 {
position: relative;
  z-index: 2;
  max-width: 1050px;
  margin: auto;
  color: #17131c;
  font-size: clamp( 25px, 3vw, 26px );
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -1px;
}


.gmclientmoney39-price {
   color: #f05646;

   white-space: nowrap;

   text-shadow:
      0 5px 18px
      rgba(240, 86, 70, .10);
}


.gmclientmoney39-time {
   color: transparent;

   white-space: nowrap;

   background:
      linear-gradient(
         90deg,
         #ff8e59,
         #f14b9f,
         #a440ed
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


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

@media (max-width: 991px) {

   .gmclientmoney39-section {
      padding:
         55px 0
         62px;
   }


   .gmclientmoney39-title {
      font-size: 42px;
   }


   .gmclientmoney39-header {
      margin-bottom: 34px;
   }


   .gmclientmoney39-shot {
      min-height: 220px;
   }

}


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

@media (max-width: 767px) {

   .gmclientmoney39-section {
      padding:
         42px 0
         48px;
   }


   .gmclientmoney39-kicker {
      font-size: 9px;

      letter-spacing: 1.3px;
   }


   .gmclientmoney39-title {
      font-size: 30px;

      line-height: 1.14;

      letter-spacing: -1.2px;
   }


   .gmclientmoney39-title-line {
      width: 68px;

      margin-top: 15px;
   }


   .gmclientmoney39-subline {
      margin-top: 18px;

      font-size: 16px;

      line-height: 1.6;
   }


   .gmclientmoney39-showcase {
      border-radius: 17px;
   }


   .gmclientmoney39-browser-top {
      min-height: 48px;

      padding:
         10px 12px;
   }


   .gmclientmoney39-browser-label {
      font-size: 8px;

      letter-spacing: .7px;
   }


   .gmclientmoney39-browser-badge {
      display: none;
   }


   .gmclientmoney39-screenshot-area {
      padding: 13px;
   }


   .gmclientmoney39-shot {
      min-height: auto;

      border-radius: 13px;
   }


   .gmclientmoney39-shot img {
      border-radius: 8px;
   }


   .gmclientmoney39-bottom {
      margin-top: 25px;

      padding:
         22px 16px;

      border-radius: 17px;
   }


   .gmclientmoney39-bottom h3 {
      font-size: 25px;

      line-height: 1.28;
   }

}


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

@media (max-width: 480px) {

   .gmclientmoney39-title {
      font-size: 27px;
   }


   .gmclientmoney39-subline {
      font-size: 15px;
   }


   .gmclientmoney39-browser-dots span {
      width: 7px;
      height: 7px;
   }


   .gmclientmoney39-bottom h3 {
      font-size: 22px;
   }


   .gmclientmoney39-bottom-icon {
      width: 42px;
      height: 42px;

      font-size: 19px;
   }

}


/* ==========================================================
   MAIN SECTION
========================================================== */

.gmchoice48-section {
   position: relative;
   overflow: hidden;
   padding: 85px 0 70px;
   background:
      radial-gradient(circle at 4% 25%, rgba(255, 82, 0, .07), transparent 26%),
      radial-gradient(circle at 88% 50%, rgba(255, 133, 19, .055), transparent 27%),
      linear-gradient(110deg, #080811 0%, #070914 48%, #050713 100%);
   color: #fff;
   font-size: 18px;
   isolation: isolate;
}


/* GRID */

.gmchoice48-section::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -4;

   background-image:
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);

   background-size: 45px 45px;
}


/* TOP ORANGE LIGHT */

.gmchoice48-section::after {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;

   width: 500px;
   height: 1px;

   transform: translateX(-50%);

   background:
      linear-gradient(
         90deg,
         transparent,
         #ff7610,
         #ffab35,
         #ff7610,
         transparent
      );

   box-shadow:
      0 0 25px rgba(255, 102, 0, .45);
}


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

.gmchoice48-bg-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(110px);
   pointer-events: none;
   z-index: -3;
}

.gmchoice48-bg-glow-left {
   width: 380px;
   height: 380px;
   left: -250px;
   top: 200px;
   background: rgba(255, 85, 0, .10);
}

.gmchoice48-bg-glow-right {
   width: 430px;
   height: 430px;
   right: -280px;
   top: 250px;
   background: rgba(255, 142, 26, .08);
}


/* ==========================================================
   KICKER
========================================================== */

.gmchoice48-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;

   margin-bottom: 20px;
   padding: 9px 15px;

   border: 1px solid rgba(255, 126, 18, .45);
   border-radius: 50px;

   background:
      linear-gradient(
         90deg,
         rgba(255, 92, 0, .11),
         rgba(255, 150, 30, .06)
      );

   color: #ff9c32;

   font-size: 12px;
   line-height: 1;
   font-weight: 900;

   letter-spacing: 1px;

   box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 8px 25px rgba(0,0,0,.25);

   text-shadow:
      0 0 12px rgba(255, 119, 17, .35);
}


.gmchoice48-kicker-dot {
   width: 6px;
   height: 6px;

   border-radius: 50%;

   background: #ffa330;

   box-shadow:
      0 0 8px #ff7800;
}


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

.gmchoice48-title {
   max-width: 950px;
   margin: 0 auto;

   color: #ffffff;

   font-size: 48px;
   line-height: 1.12;
   font-weight: 900;

   letter-spacing: -1.4px;

   text-shadow:
      0 2px 0 rgba(0,0,0,.7),
      0 5px 0 rgba(0,0,0,.28),
      0 10px 25px rgba(0,0,0,.65);
}


.gmchoice48-title span {
   display: block;

   margin-top: 6px;

   color: #ff921e;

   background:
      linear-gradient(
         180deg,
         #ffc258 0%,
         #ff9d27 45%,
         #e96800 100%
      );

   -webkit-background-clip: text;
   background-clip: text;

   -webkit-text-fill-color: transparent;

   filter:
      drop-shadow(0 3px 2px rgba(0,0,0,.65))
      drop-shadow(0 0 12px rgba(255, 112, 0, .23));
}


/* HEADING ACCENT */

.gmchoice48-heading-accent {
   position: relative;

   width: 70px;
   height: 3px;

   margin: 22px auto 0;

   border-radius: 50px;

   background:
      linear-gradient(
         90deg,
         transparent,
         #ff7612,
         #ffb13b,
         #ff7612,
         transparent
      );

   box-shadow:
      0 0 14px rgba(255, 105, 0, .4);
}


/* ==========================================================
   MAIN ROW
========================================================== */

.gmchoice48-main-row {
   margin-top: 40px;
}


/* ==========================================================
   LEFT BENEFITS
========================================================== */

.gmchoice48-benefits {
   display: flex;
   flex-direction: column;
   gap: 10px;
}


.gmchoice48-benefit {
   position: relative;

   min-height: 76px;

   display: flex;
   align-items: center;

   gap: 15px;

   padding: 11px 48px 11px 12px;

   border: 1px solid rgba(255,255,255,.105);
   border-radius: 13px;

   background:
      linear-gradient(
         100deg,
         rgba(255,255,255,.055),
         rgba(255,255,255,.018)
      );

   box-shadow:
      0 8px 22px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.035);

   transition:
      .28s ease;

   overflow: hidden;
}


.gmchoice48-benefit::before {
   content: "";

   position: absolute;

   left: 0;
   top: 21%;

   width: 3px;
   height: 58%;

   border-radius: 0 20px 20px 0;

   background:
      linear-gradient(
         180deg,
         #ffb03c,
         #ff5d00
      );

   box-shadow:
      0 0 12px rgba(255, 103, 0, .45);
}


.gmchoice48-benefit:hover {
   transform: translateX(5px);

   border-color:
      rgba(255, 125, 21, .36);

   background:
      linear-gradient(
         100deg,
         rgba(255, 102, 0, .07),
         rgba(255,255,255,.025)
      );

   box-shadow:
      0 14px 34px rgba(0,0,0,.24);
}


/* ==========================================================
   ICON
========================================================== */

.gmchoice48-benefit-icon {
   width: 47px;
   height: 47px;

   min-width: 47px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 12px;

   border:
      1px solid rgba(255, 132, 25, .38);

   background:
      linear-gradient(
         145deg,
         rgba(255, 123, 17, .16),
         rgba(255, 96, 0, .05)
      );

   color: #ffa12f;

   font-size: 16px;

   box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06);
}


/* ==========================================================
   TEXT
========================================================== */

.gmchoice48-benefit-text {
   flex: 1;

   padding-right: 7px;

   color: #f0f1f5;

   font-size: 18px;
   line-height: 1.55;
   font-weight: 500;

   text-shadow:
      0 2px 3px rgba(0,0,0,.50);
}


/* ==========================================================
   CHECK
========================================================== */

.gmchoice48-benefit-check {
   width: 25px;
   height: 25px;

   min-width: 25px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background:
      linear-gradient(
         145deg,
         #ffb047,
         #ff7200
      );

   color: #111;

   font-size: 10px;

   box-shadow:
      0 5px 15px rgba(255, 105, 0, .23);
}


/* ==========================================================
   NUMBER
========================================================== */

.gmchoice48-benefit-number {
   position: absolute;

   right: 10px;
   top: 8px;

   color:
      rgba(255,255,255,.10);

   font-size: 18px;
   line-height: 1;
   font-weight: 900;
}


/* ==========================================================
   RIGHT IMAGE
========================================================== */

.gmchoice48-visual {
   position: relative;

   min-height: 490px;

   display: flex;
   align-items: center;
   justify-content: center;

   padding: 20px;
}


/* ORANGE GLOW */

.gmchoice48-visual-glow {
   position: absolute;

   width: 280px;
   height: 350px;

   left: 50%;
   top: 50%;

   transform:
      translate(-50%, -50%);

   border-radius: 50%;

   background:
      rgba(255, 98, 0, .13);

   filter:
      blur(65px);
}


/* DOTS */

.gmchoice48-dot-pattern {
   position: absolute;

   width: 140px;
   height: 140px;

   left: 11%;
   top: 20%;

   opacity: .65;

   background-image:
      radial-gradient(
         rgba(255, 144, 32, .75) 1.4px,
         transparent 1.4px
      );

   background-size:
      12px 12px;

   mask-image:
      radial-gradient(
         circle,
         black 0%,
         transparent 70%
      );
}


/* IMAGE */

.gmchoice48-main-image {
   position: relative;

   z-index: 4;

   max-height: 500px;

   object-fit: contain;

   filter:
      drop-shadow(0 25px 30px rgba(0,0,0,.55));
}


/* ==========================================================
   CLOSING PANEL
========================================================== */

.gmchoice48-closing {
   position: relative;

   overflow: hidden;

   display: flex;
   align-items: center;

   gap: 20px;

   margin-top: 35px;

   padding: 23px 28px;

   border-radius: 17px;

   border:
      1px solid rgba(255, 121, 14, .32);

   background:
      linear-gradient(
         100deg,
         rgba(255, 90, 0, .11),
         rgba(255,255,255,.025),
         rgba(255, 100, 0, .07)
      );

   box-shadow:
      0 16px 40px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.05);
}


.gmchoice48-closing::before {
   content: "";

   position: absolute;

   left: 14%;
   right: 14%;
   top: 0;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(255, 160, 54, .72),
         transparent
      );
}


.gmchoice48-closing-glow {
   position: absolute;

   width: 270px;
   height: 100px;

   left: 10%;
   top: 50%;

   transform:
      translateY(-50%);

   background:
      rgba(255, 97, 0, .09);

   filter:
      blur(45px);
}


/* CLOSING ICON */

.gmchoice48-closing-icon {
   position: relative;
   z-index: 2;

   width: 58px;
   height: 58px;

   min-width: 58px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 14px;

   background:
      linear-gradient(
         145deg,
         #ff9e32,
         #ff6200
      );

   color: #ffffff;

   font-size: 20px;

   box-shadow:
      0 10px 23px rgba(255, 99, 0, .23),
      inset 0 1px 0 rgba(255,255,255,.22);
}


/* CLOSING COPY */

.gmchoice48-closing-content {
   position: relative;
   z-index: 2;

   flex: 1;
}


.gmchoice48-closing-content p {
   margin: 0 0 7px;

   color: #e3e5eb;

   font-size: 16px;
   line-height: 1.55;

   text-shadow:
      0 2px 3px rgba(0,0,0,.45);
}


.gmchoice48-closing-content p strong {
   color: #ff8e1c;

   font-weight: 900;

   text-shadow:
      0 0 12px rgba(255, 112, 0, .25);
}


.gmchoice48-closing-final {
   color: #ffffff;

   font-size: 19px;
   line-height: 1.45;
   font-weight: 900;

   text-shadow:
      0 2px 4px rgba(0,0,0,.60);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199px) {

   .gmchoice48-title {
      font-size: 43px;
   }

   .gmchoice48-benefit-text {
      font-size: 15px;
   }

}


@media (max-width: 991px) {

   .gmchoice48-section {
      padding: 70px 0 60px;
   }

   .gmchoice48-title {
      font-size: 38px;
   }

   .gmchoice48-main-row {
      margin-top: 35px;
   }

   .gmchoice48-visual {
      min-height: auto;
   }

   .gmchoice48-main-image {
      max-height: 430px;
   }

}


@media (max-width: 767px) {

   .gmchoice48-section {
      padding: 55px 0;
   }

   .gmchoice48-title {
      font-size: 30px;
      line-height: 1.2;
   }

   .gmchoice48-benefit {
      min-height: auto;
      padding:
         14px 40px
         14px 12px;
   }

   .gmchoice48-benefit-icon {
      width: 44px;
      height: 44px;
      min-width: 44px;
   }

   .gmchoice48-benefit-text {
      font-size: 16px;
   }

   .gmchoice48-benefit-check {
      display: none;
   }

   .gmchoice48-visual {
      padding: 5px;
   }

   .gmchoice48-main-image {
      max-height: 390px;
   }

   .gmchoice48-closing {
      align-items: flex-start;
      padding: 20px;
   }

}


@media (max-width: 480px) {

   .gmchoice48-title {
      font-size: 27px;
   }

   .gmchoice48-kicker {
      font-size: 10px;
   }

   .gmchoice48-benefit {
      align-items: flex-start;
   }

   .gmchoice48-benefit-icon {
      width: 41px;
      height: 41px;
      min-width: 41px;
   }

   .gmchoice48-closing {
      display: block;
   }

   .gmchoice48-closing-icon {
      margin-bottom: 15px;
   }

}


/* ==========================================================
   GUMROAD ENGINE - START NOW / EARNING POWER
   UNIQUE PREFIX: gmearnpower58-
========================================================== */

.gmearnpower58-section {
   position: relative;

   overflow: hidden;

   padding:
      85px 0;

   background:
      radial-gradient(
         circle at 8% 15%,
         rgba(255, 124, 79, .15),
         transparent 25%
      ),
      radial-gradient(
         circle at 90% 70%,
         rgba(172, 59, 239, .16),
         transparent 28%
      ),
      linear-gradient(
         135deg,
         #080712 0%,
         #0d0a1b 45%,
         #090614 100%
      );

   isolation: isolate;
}


/* ==========================================================
   BACKGROUND GRID
========================================================== */

.gmearnpower58-section::before {
   content: "";

   position: absolute;
   inset: 0;

   z-index: -1;

   opacity: .20;

   background-image:
      linear-gradient(
         rgba(255,255,255,.035) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(255,255,255,.035) 1px,
         transparent 1px
      );

   background-size:
      42px 42px;

   pointer-events: none;
}


/* decorative orb */

.gmearnpower58-section::after {
   content: "";

   position: absolute;

   width: 500px;
   height: 500px;

   right: -270px;
   top: -260px;

   z-index: -1;

   border-radius: 50%;

   background:
      rgba(209, 60, 223, .09);

   filter:
      blur(90px);

   pointer-events: none;
}


/* ==========================================================
   CONTENT
========================================================== */

.gmearnpower58-content {
   position: relative;

   max-width: 760px;
}


.gmearnpower58-kicker {
   margin-bottom: 14px;

   color: #ff8d59;

   font-size: 11px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: 2px;

   text-transform: uppercase;
}


.gmearnpower58-title {
 margin: 0;
  color: #ffffff;
  font-size: clamp( 34px, 5vw, 46px );
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -2.5px;
}


.gmearnpower58-title span {
   display: block;

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #ff9e58 0%,
         #ff6b60 34%,
         #f047a8 67%,
         #9a42ef 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


.gmearnpower58-heading-line {
   width: 72px;
   height: 4px;

   margin:
      20px 0 26px;

   border-radius: 100px;

   background:
      linear-gradient(
         90deg,
         #ff9a57,
         #ff5e72,
         #b33fea
      );

   box-shadow:
      0 8px 22px
      rgba(207, 59, 206, .22);
}


/* ==========================================================
   BODY COPY
========================================================== */

.gmearnpower58-copy {
   max-width: 720px;
}


.gmearnpower58-copy p {
   margin:
      0 0 20px;

   color:
      rgba(255,255,255,.78);

   font-size: 18px;

   line-height: 1.72;

   font-weight: 400;
}


.gmearnpower58-copy p:last-child {
   margin-bottom: 0;
}


.gmearnpower58-copy em {
   color: #ffffff;

   font-style: italic;

   font-weight: 700;
}


/* ==========================================================
   HIGHLIGHT STRIP
========================================================== */

.gmearnpower58-highlight {
   max-width: 620px;

   display: flex;

   align-items: center;

   gap: 13px;

   margin-top: 28px;

   padding:
      14px 16px;

   border:
      1px solid
      rgba(255,255,255,.08);

   border-radius: 14px;

   background:
      linear-gradient(
         135deg,
         rgba(255,255,255,.055),
         rgba(255,255,255,.025)
      );

   box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.04);

   backdrop-filter:
      blur(10px);
}


.gmearnpower58-highlight-icon {
   width: 38px;
   height: 38px;

   min-width: 38px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 10px;

   background:
      linear-gradient(
         135deg,
         #ff9658,
         #ef45a7,
         #9340ef
      );

   box-shadow:
      0 8px 20px
      rgba(203, 59, 197, .25);

   font-size: 15px;

   font-weight: 900;
}


.gmearnpower58-highlight strong {
   color: #ffffff;

   font-size: 17px;

   line-height: 1.4;

   font-weight: 800;
}


/* ==========================================================
   RIGHT VISUAL
========================================================== */

.gmearnpower58-visual {
   position: relative;

   min-height: 520px;

   display: flex;

   align-items: center;
   justify-content: center;

   padding:
      30px 15px;
}


.gmearnpower58-glow {
   position: absolute;

   width: 370px;
   height: 370px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         rgba(255, 126, 76, .22),
         rgba(202, 55, 226, .21)
      );

   filter:
      blur(78px);

   pointer-events: none;
}


/* ==========================================================
   IMAGE CARD
========================================================== */

.gmearnpower58-image-card {
   position: relative;

   z-index: 2;

   width: 100%;

   padding: 14px;

   overflow: hidden;

   border:
      1px solid
      rgba(255,255,255,.09);

   border-radius: 24px;

   background:
      linear-gradient(
         145deg,
         rgba(255,255,255,.08),
         rgba(255,255,255,.025)
      );

   box-shadow:
      0 30px 70px
      rgba(0,0,0,.40),

      inset 0 1px 0
      rgba(255,255,255,.05);

   backdrop-filter:
      blur(12px);

   -webkit-backdrop-filter:
      blur(12px);
}


.gmearnpower58-image {
   display: block;

   width: 100%;
   height: auto;

   max-height: 470px;

   margin: auto;

   object-fit: contain;

   border-radius: 16px;

   filter:
      drop-shadow(
         0 22px 30px
         rgba(0,0,0,.30)
      );

   transition:
      transform .3s ease;
}


.gmearnpower58-visual:hover
.gmearnpower58-image {
   transform:
      scale(1.025)
      translateY(-3px);
}


/* ==========================================================
   FLOATING BADGES
========================================================== */

.gmearnpower58-float {
   position: absolute;

   z-index: 5;

   display: flex;

   align-items: center;

   gap: 8px;

   padding:
      8px 13px;

   color: #ffffff;

   border:
      1px solid
      rgba(255,255,255,.09);

   border-radius: 100px;

   background:
      rgba(15, 11, 28, .88);

   box-shadow:
      0 12px 28px
      rgba(0,0,0,.30);

   font-size: 11px;

   line-height: 1;

   font-weight: 800;

   backdrop-filter:
      blur(10px);
}


.gmearnpower58-float span {
   width: 27px;
   height: 27px;

   display: flex;

   align-items: center;
   justify-content: center;

   color: #ffffff;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #ff8f57,
         #ed43aa,
         #9540ed
      );

   font-size: 11px;

   font-weight: 900;
}


.gmearnpower58-float-one {
   left: 0;

   bottom: 85px;
}


.gmearnpower58-float-two {
   right: 0;

   top: 80px;
}


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

@media (max-width: 991px) {

   .gmearnpower58-section {
      padding:
         60px 0;
   }


   .gmearnpower58-title {
      font-size: 50px;
   }


   .gmearnpower58-copy p {
      font-size: 17px;
   }


   .gmearnpower58-visual {
      min-height: 430px;

      max-width: 650px;

      margin: auto;
   }


   .gmearnpower58-image {
      max-height: 390px;
   }

}


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

@media (max-width: 767px) {

   .gmearnpower58-section {
      padding:
         45px 0 50px;
   }


   .gmearnpower58-kicker {
      font-size: 9px;

      letter-spacing: 1.3px;
   }


   .gmearnpower58-title {
      font-size: 33px;

      line-height: 1.12;

      letter-spacing: -1.3px;
   }


   .gmearnpower58-heading-line {
      width: 60px;

      margin:
         16px 0 20px;
   }


   .gmearnpower58-copy p {
      margin-bottom: 17px;

      font-size: 16px;

      line-height: 1.65;
   }


   .gmearnpower58-highlight {
      margin-top: 22px;

      padding:
         12px 13px;
   }


   .gmearnpower58-highlight strong {
      font-size: 15px;
   }


   .gmearnpower58-visual {
      min-height: auto;

      padding:
         20px 0 5px;
   }


   .gmearnpower58-image-card {
      padding: 10px;

      border-radius: 18px;
   }


   .gmearnpower58-image {
      max-height: 330px;

      border-radius: 12px;
   }


   .gmearnpower58-float {
      padding:
         6px 9px;

      font-size: 9px;
   }


   .gmearnpower58-float span {
      width: 22px;
      height: 22px;

      font-size: 9px;
   }


   .gmearnpower58-float-one {
      left: 0;

      bottom: 20px;
   }


   .gmearnpower58-float-two {
      right: 0;

      top: 20px;
   }

}


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

@media (max-width: 480px) {

   .gmearnpower58-title {
      font-size: 29px;
   }


   .gmearnpower58-copy p {
      font-size: 15px;
   }


   .gmearnpower58-highlight-icon {
      width: 34px;
      height: 34px;

      min-width: 34px;

      font-size: 13px;
   }


   .gmearnpower58-float-two {
      display: none;
   }

}

/* ==========================================================
   GUMROAD ENGINE - 3 ADVANTAGE CARDS
   UNIQUE PREFIX: gmtripleadv73-
========================================================== */

.gmtripleadv73-section {
   position: relative;
   overflow: hidden;
   padding: 75px 0 85px;
   background:
      radial-gradient(circle at 8% 10%, rgba(255, 138, 88, .10), transparent 24%),
      radial-gradient(circle at 92% 65%, rgba(186, 67, 235, .08), transparent 27%),
      linear-gradient(180deg, #ffffff 0%, #fffaf8 48%, #ffffff 100%);
   isolation: isolate;
}

.gmtripleadv73-section * {
   box-sizing: border-box;
}

.gmtripleadv73-section::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   opacity: .28;
   background-image:
      linear-gradient(rgba(145, 100, 151, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(145, 100, 151, .045) 1px, transparent 1px);
   background-size: 42px 42px;
}

/* =========================
   HEADER
========================= */

.gmtripleadv73-header {
   margin-bottom: 42px;
}

.gmtripleadv73-kicker {
   margin-bottom: 12px;
   color: #7d7380;
   font-size: 11px;
   line-height: 1;
   font-weight: 900;
   letter-spacing: 2px;
   text-transform: uppercase;
}

.gmtripleadv73-title {
   margin: 0;
   color: #151119;
   font-size: clamp(42px, 5vw, 62px);
   line-height: 1.05;
   font-weight: 950;
   letter-spacing: -2.4px;
}

.gmtripleadv73-title span {
   color: transparent;
   background: linear-gradient(90deg, #ff9b58 0%, #ff6c61 38%, #ef47aa 68%, #9140ef 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.gmtripleadv73-line {
   width: 76px;
   height: 4px;
   margin: 18px auto 0;
   border-radius: 100px;
   background: linear-gradient(90deg, #ff9a58, #ff5f72, #a540ea);
   box-shadow: 0 8px 22px rgba(199, 61, 205, .18);
}

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

.gmtripleadv73-card {
   position: relative;
   overflow: hidden;
   margin-bottom: 24px;
   padding: 38px 30px;
   border-radius: 28px;
   transition: transform .3s ease, box-shadow .3s ease;
}

.gmtripleadv73-card:last-child {
   margin-bottom: 0;
}

.gmtripleadv73-card:hover {
   transform: translateY(-5px);
}

/* white card */
.gmtripleadv73-card-white {
   border: 1px solid rgba(149, 94, 153, .13);
   background: linear-gradient(145deg, #ffffff 0%, #fff9f6 100%);
   box-shadow: 0 24px 55px rgba(65, 43, 69, .09);
}

.gmtripleadv73-card-white:hover {
   box-shadow: 0 32px 70px rgba(65, 43, 69, .13);
}

/* purple card */
.gmtripleadv73-card-purple {
   border: 1px solid rgba(255,255,255,.12);
   background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,.14), transparent 28%),
      linear-gradient(135deg, #8f3eef 0%, #7229ea 45%, #5819db 100%);
   box-shadow: 0 24px 55px rgba(91, 39, 198, .22);
}

.gmtripleadv73-card-purple:hover {
   box-shadow: 0 32px 70px rgba(91, 39, 198, .28);
}

/* =========================
   LEFT CONTENT
========================= */

.gmtripleadv73-content {
   position: relative;
   z-index: 2;
   max-width: 520px;
}

.gmtripleadv73-top {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 18px;
}

.gmtripleadv73-number {
   color: #ece3f2;
   font-size: 62px;
   line-height: 1;
   font-weight: 950;
   letter-spacing: -4px;
}

.gmtripleadv73-card-purple .gmtripleadv73-number {
   color: rgba(255,255,255,.18);
}

.gmtripleadv73-icon {
   width: 42px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   border-radius: 12px;
   background: linear-gradient(135deg, #ff9858, #ee46ab, #9141ef);
   box-shadow: 0 10px 24px rgba(200, 62, 198, .20);
   font-size: 16px;
   font-weight: 900;
}

.gmtripleadv73-icon-light {
   border: 1px solid rgba(255,255,255,.18);
   background: rgba(255,255,255,.12);
   backdrop-filter: blur(10px);
}

.gmtripleadv73-content h3 {
   margin: 0 0 16px;
   color: #16121b;
   font-size: clamp(30px, 3.3vw, 44px);
   line-height: 1.08;
   font-weight: 950;
   letter-spacing: -1.5px;
}

.gmtripleadv73-content p {
   margin: 0;
   color: #57505a;
   font-size: 18px;
   line-height: 1.72;
   font-weight: 400;
}

.gmtripleadv73-card-purple .gmtripleadv73-content h3 {
   color: #ffffff;
}

.gmtripleadv73-card-purple .gmtripleadv73-content p {
   color: rgba(255,255,255,.84);
}

/* =========================
   RIGHT BROWSER
========================= */

.gmtripleadv73-browser-wrap {
   position: relative;
   padding-left: 10px;
}

.gmtripleadv73-browser {
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(123, 85, 133, .12);
   border-radius: 22px;
   background: #ffffff;
   box-shadow: 0 25px 55px rgba(68, 44, 72, .12);
   transition: transform .3s ease, box-shadow .3s ease;
}

.gmtripleadv73-card:hover .gmtripleadv73-browser {
   transform: translateY(-4px);
}

.gmtripleadv73-browser-dark {
   border: 1px solid rgba(255,255,255,.12);
   background: rgba(255,255,255,.09);
   box-shadow: 0 25px 55px rgba(28, 10, 74, .22);
   backdrop-filter: blur(12px);
}

.gmtripleadv73-browser-bar {
   height: 48px;
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 0 15px;
   border-bottom: 1px solid rgba(119, 87, 126, .08);
   background: #fffafd;
}

.gmtripleadv73-browser-dark .gmtripleadv73-browser-bar {
   border-bottom: 1px solid rgba(255,255,255,.08);
   background: rgba(255,255,255,.08);
}

.gmtripleadv73-dots {
   display: flex;
   gap: 6px;
}

.gmtripleadv73-dots span {
   width: 8px;
   height: 8px;
   border-radius: 50%;
}

.gmtripleadv73-dots span:nth-child(1) {
   background: #ff625e;
}

.gmtripleadv73-dots span:nth-child(2) {
   background: #ffb74b;
}

.gmtripleadv73-dots span:nth-child(3) {
   background: #20c76d;
}

.gmtripleadv73-search {
   width: 56%;
   height: 10px;
   border-radius: 100px;
   background: #efe8f2;
}

.gmtripleadv73-search-dark {
   background: rgba(255,255,255,.18);
}

.gmtripleadv73-browser-body {
   min-height: 260px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
}

.gmtripleadv73-image {
   display: block;
   width: 100%;
   /* max-height: 235px; */
   object-fit: contain;
   filter: drop-shadow(0 18px 24px rgba(52, 30, 65, .15));
   transition: transform .3s ease;
}

.gmtripleadv73-card:hover .gmtripleadv73-image {
   /* transform: scale(1.025); */
}

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

@media (max-width: 991px) {

   .gmtripleadv73-section {
      padding: 55px 0 65px;
   }

   .gmtripleadv73-title {
      font-size: 50px;
   }

   .gmtripleadv73-card {
      padding: 30px 24px;
   }

   .gmtripleadv73-browser-wrap {
      padding-left: 0;
      margin-top: 24px;
   }

   .gmtripleadv73-browser-body {
      min-height: 230px;
   }

   .gmtripleadv73-image {
      /* max-height: 210px; */
   }
}

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

@media (max-width: 767px) {

   .gmtripleadv73-section {
      padding: 42px 0 48px;
   }

   .gmtripleadv73-header {
      margin-bottom: 32px;
   }

   .gmtripleadv73-kicker {
      font-size: 9px;
      letter-spacing: 1.2px;
   }

   .gmtripleadv73-title {
      font-size: 34px;
      line-height: 1.12;
      letter-spacing: -1.3px;
   }

   .gmtripleadv73-card {
      margin-bottom: 18px;
      padding: 22px 18px;
      border-radius: 20px;
   }

   .gmtripleadv73-top {
      gap: 10px;
      margin-bottom: 14px;
   }

   .gmtripleadv73-number {
      font-size: 46px;
      letter-spacing: -3px;
   }

   .gmtripleadv73-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      font-size: 14px;
   }

   .gmtripleadv73-content h3 {
      font-size: 28px;
      line-height: 1.1;
   }

   .gmtripleadv73-content p {
      font-size: 16px;
      line-height: 1.65;
   }

   .gmtripleadv73-browser-wrap {
      margin-top: 20px;
   }

   .gmtripleadv73-browser {
      border-radius: 16px;
   }

   .gmtripleadv73-browser-bar {
      height: 42px;
      padding: 0 12px;
   }

   .gmtripleadv73-browser-body {
      min-height: 200px;
      padding: 12px;
   }

   .gmtripleadv73-image {
      max-height: 180px;
   }
}

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

@media (max-width: 480px) {

   .gmtripleadv73-title {
      font-size: 30px;
   }

   .gmtripleadv73-content h3 {
      font-size: 24px;
   }

   .gmtripleadv73-content p {
      font-size: 15px;
   }

   .gmtripleadv73-browser-body {
      min-height: 175px;
   }

   .gmtripleadv73-image {
      max-height: 160px;
   }
}