/* ==========================================================================
   GiftCash AI · FE sales page
   Layout : Bootstrap 5.3 grid (container / row / col-*) — this file only
            styles components, it does not define page grids.
   Theme  : logo orange-red + black on warm cream
   Fonts  : Poppins (display) · Inter (body) · Caveat (handwritten)
   ========================================================================== */
:root {
   --or: #F4511E;
   --or-hi: #FF6B2C;
   --or-lo: #C93A0B;
   --amber: #FFB020;
   --ink: #0B0B0B;
   --ink-2: #2A2522;
   --muted: #6A615B;
   --cream: #FFF6EE;
   --peach: #FFE6D3;
   --line: rgba(201, 58, 11, .16);
   --ok: #1E9E5A;
   --bad: #D93025;
   --grad: linear-gradient(115deg, #C93A0B 0%, #F4511E 48%, #FF8A3D 100%);
   --grad-dark: linear-gradient(160deg, #0B0B0B 0%, #1c110c 60%, #2b140a 100%);
   --shadow: 0 30px 70px -30px rgba(120, 40, 5, .45);
   --f-d: "Poppins", system-ui, sans-serif;
   --f-b: "Inter", system-ui, sans-serif;
   --f-h: "Caveat", cursive;
   --bs-body-font-family: var(--f-b);
   --bs-body-color: var(--ink);
}

/* ───────── base (on top of Bootstrap reboot) ───────── */
html {
   scroll-behavior: smooth;
   scroll-padding-top: 80px;
   overflow-x: hidden;
}

body {
   font: 400 17px/1.65 var(--f-b);
   color: var(--ink);
   background: #fff;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

img,
video {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   color: inherit;
   text-decoration: none;
}

a:hover {
   color: inherit;
}

h1,
h2,
h3,
h4 {
   font-family: var(--f-d);
   font-weight: 700;
   margin: 0;
   line-height: 1.18;
   letter-spacing: -.02em;
   color: var(--ink);
}

ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

figure {
   margin: 0;
}

@media (min-width: 1400px) {
   .container {
      max-width: 1200px;
   }
}

section {
   position: relative;
   padding: clamp(56px, 7vw, 100px) 0;
}

.hand {
   font-family: var(--f-h);
   font-weight: 700;
   color: var(--or-lo);
   font-size: clamp(24px, 3vw, 32px);
   line-height: 1;
   transform: rotate(-2deg);
   display: inline-block;
}

.fine {
  font-size: 18px;
   line-height: 1.55;
     color: #FFF;
}

.dark .fine {
color: rgb(22, 16, 12);
}

.or {
   color: var(--or);
}

.gold {
   color: #FFB020;
}

.grad-t {
   background: var(--grad);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.hl {
   background: linear-gradient(transparent 58%, #FFD23F 58%, #FFD23F 92%, transparent 92%);
   padding: 0 .12em;
}

/* section heads */
.h2 {
   font-size: clamp(27px, 4vw, 44px);
   font-weight: 800;
   /* text-wrap: balance; */
   line-height: 1.6;
}

.h3 {
   font-size: clamp(21px, 2.6vw, 28px);
   font-weight: 700;
}

.sub-lead {
font-size: clamp(17px, 1.8vw, 17px);
  font-weight: 400;
  color: #FFF;
  max-width: 1320px;
  margin: 14px auto 0;
}

.head {
   max-width: 1040px;
}

.kicker {
   display: inline-block;
   margin-bottom: 14px;
   padding: 7px 16px;
   border-radius: 99px;
   font: 700 12px/1 var(--f-d);
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--or-lo);
   background: var(--peach);
}

.dark {
/* background-color: #0a0309; */
  padding: 100px 0 0px 0;
  overflow: hidden;

   color: #fff;
   background: #0a0309 url(../images/desk.png) no-repeat center center / cover;
}

.dark h2,
.dark h3,
.dark h4 {
   color: #fff;
}

.dark .sub-lead {
   color: rgba(255, 255, 255, .72);
}

.dark .kicker {
   background: rgba(255, 255, 255, .1);
   color: #FFB88A;
}

.cream {
   background: var(--cream);

  overflow: hidden;
}
.cream1 {
  background: var(--cream);
  background: #fff url(../images/cream-bg.png) no-repeat center top / cover;
  padding: 100px 0 100px 0;
  overflow: hidden;
}
.cream2 {
background-color: #0a0309;
  padding: 100px 0 0px 0;
  overflow: hidden;
  color: #fff;
}
#shift{
    background: var(--cream);
  background:  url(../images/shift-bg.png) no-repeat center top / cover;
  padding: 100px 0 0px 0;
  overflow: hidden; 
}
.facts2 {
  position: relative;
  overflow: hidden;
  padding: 100px 0 0px 0;
  background: radial-gradient( circle at 10% 10%, rgb(242, 238, 255), #f2eeff 25% ), radial-gradient( circle at 90% 30%, rgba(117, 126, 232, 0.07), transparent 25% ), linear-gradient( 180deg, #fff 0%, #fbfdff 100% )!important ;
}




/*

buttons (gc- prefix: no clash with Bootstrap .btn) */
.btn-gc {
   padding: 18px 38px;
   border: 0;
   border-radius: 99px;
   font: 800 clamp(16px, 2vw, 20px)/1.2 var(--f-d);
   color: #fff;
   background: var(--grad);
   background-size: 150% 100%;
   box-shadow: 0 18px 36px -14px rgba(201, 58, 11, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
   transition: transform .25s, box-shadow .25s, background-position .4s;
   text-align: center;
}

.btn-gc:hover {
   color: #fff;
   transform: translateY(-3px) scale(1.015);
   background-position: 100% 0;
   box-shadow: 0 24px 44px -14px rgba(201, 58, 11, .9);
}

.btn-gc::after {
   content: "→";
   font-weight: 700;
   transition: transform .25s;
}

.btn-gc:hover::after {
   transform: translateX(4px);
}

.btn-gc-dark {
   background: #0B0B0B;
   box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .7);
}

/* cards share one surface */
.card-gc {
   height: 100%;
   border-radius: 24px;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: 0 20px 40px -28px rgba(120, 40, 5, .55);
   transition: transform .3s, box-shadow .3s;
}

.glass {
   height: 100%;
   border-radius: 22px;
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .16);
}

/* ───────── top bar ───────── */
/* ───────── top strip — floating dark pill (launch special · countdown · CTA) ───────── */
.topbar {
position: sticky;
  bottom: 0;
  z-index: 1030;
  padding: 10px 0;
  color: #fff;
  /* background: linear-gradient(180deg, rgba(255, 244, 236, .96), rgba(255, 244, 236, .82));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); */
  position: fixed;
  width: 100%;
}

.topbar-pill {
margin: 0;
  padding: 0px 14px 8px 26px;
  border-radius: 99px;

  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 171, 121, 0.46);
  border-radius: 50px;
  border: 2px solid rgb(153, 152, 152);
  backdrop-filter: blur(16px);
background-color: #3c3d3ed9;
}

.tb-copy {
   line-height: 1.35;
}

.tb-label {
   position: relative;
   display: inline-block;
   margin-right: 6px;
   padding-bottom: 3px;
   font: 800 13.5px var(--f-d);
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #FFB020;
}

.tb-label::after {
   content: "";
   position: absolute;
   left: -6px;
   right: 0;
   bottom: 0;
   height: 2px;
   border-radius: 2px;
   background: linear-gradient(90deg, transparent, #FF6B2C 30%, #FFB020 70%, transparent);
   box-shadow: 0 0 10px rgba(255, 107, 44, .9);
}

.tb-label i {
   margin-right: 4px;
}

.tb-text {
   font: 600 14.5px var(--f-d);
   color: #fff;
}

.tb-text b {
   color: #FFD23F;
       font-weight: 700;
}

.tb-code {
   padding: 1px 9px;
   border-radius: 6px;
   font-weight: 800;
   letter-spacing: .06em;
   background: var(--or);
}

/* countdown embed: crop to the timer boxes, same as the embed's own wrapper */
.tb-timer {
   position: relative;
   height: 58px;
   overflow: hidden;
}

.tb-timer iframe {
   position: absolute;
   top: -22px;
   left: 0;
   width: 100%;
   height: 140px;
   border: 0;
   transform: scale(.8);
   transform-origin: top center;
}

.tb-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: 210px;
   padding: 12px 22px;
   border-radius: 12px;
   font: 800 17px var(--f-d);
   color: #0B0B0B;
   background: #FBE9D7;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 10px 22px -10px rgba(255, 176, 120, .7);
   transition: transform .25s, background .25s, color .25s;
}

.tb-btn:hover {
   color: #fff;
   background: var(--grad);
   transform: translateY(-2px);
}

@media (max-width: 991px) {
   .topbar-pill {
      border-radius: 22px;
      padding: 10px 12px;
   }

   .tb-btn {
      max-width: none;
      padding: 10px 16px;
      font-size: 15px;
   }
}

/* ───────── hero ───────── */
/* original header background image, unchanged from the previous page */
.hero {
   padding: 36px 0 clamp(56px, 7vw, 90px);
   background: #fff url(../images/header-section2.png) no-repeat center center / cover;
   overflow: hidden;
}

.hero .logo {
   width: min(350px, 60%);
   margin: 0 auto 22px;
}

/* pre-headline — icon pill, two lines */
.pre {
   max-width: 760px;
   padding: 9px 26px 9px 9px;
   border-radius: 99px;
   background: rgba(255, 255, 255, .78);
   border: 1.5px solid rgba(244, 81, 30, .35);
   box-shadow: 0 14px 34px -18px rgba(201, 58, 11, .55), inset 0 1px 0 #fff;
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
}

.pre-ic {
   flex: none;
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   font-size: 19px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 0 0 4px rgba(244, 81, 30, .15), 0 8px 18px -6px rgba(201, 58, 11, .8);
}

.pre-tx b {
   display: block;
   font: 800 clamp(15px, 1.9vw, 20px)/1.25 "Raleway", var(--f-d);
   color: var(--or-lo);
}

.pre-tx small {
   display: block;
   margin-top: 2px;
   font: 600 clamp(12.5px, 1.4vw, 15px)/1.35 var(--f-d);
   color: var(--ink-2);
}

/* main headline — Raleway black, hand-drawn underline + yellow highlighter box */
.hero-h1 {
   max-width: 1000px;
   margin: 28px auto 0;
   font: 900 clamp(38px, 6.6vw, 80px)/1.12 "Raleway", var(--f-d);
   letter-spacing: -.02em;
   color: var(--ink);
}

.swoosh {
   position: relative;
   display: inline-block;
}

.swoosh::after {
   content: "";
   position: absolute;
   left: -2%;
   right: -4%;
   bottom: -.08em;
   height: .2em;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 50 4, 120 3, 197 9' fill='none' stroke='%23F4511E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.hl-box-y {
   display: inline-block;
   margin-top: .12em;
   padding: .02em .28em .08em;
   border-radius: .2em;
   color: #0B0B0B;
   background: linear-gradient(180deg, #FFE15A, #FFC21A);
   box-shadow: 0 .08em 0 #E0A000, 0 18px 34px -16px rgba(224, 160, 0, .9);
   transform: rotate(-1.2deg);
}

/* sub-headline — gradient text, tilted outline box, filled tag */
.hero-sub {
max-width: 1060px;
  margin: 36px auto 0;
  font: 800 clamp(19px, 2.6vw, 30px)/1.6 "Raleway", var(--f-d);
  letter-spacing: -.01em;
  color: var(--ink-2);
}

.tilt-box {
   display: inline-block;
   margin: 0 .1em;
   padding: .02em .38em .06em;
   border-radius: .35em;
   color: var(--or-lo);
   background: #fff;
   border: 2.5px solid var(--or);
   box-shadow: 0 0 22px rgba(244, 81, 30, .35);
   transform: rotate(-3deg);
}

.fill-tag {
   display: inline-block;
   padding: 0 .35em .04em;
   border-radius: .3em;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 10px 22px -10px rgba(201, 58, 11, .9);
}

/* post-headline — bold lead, muted middle, highlighted ending */
.support {
max-width: 1260px;
  margin: 22px auto 0;
  font: 300 clamp(16px, 1.8vw, 17px)/1.7 var(--f-b);
  color: var(--muted);
}

.support b {
   font-weight: 800;
   color: var(--ink);
}

.support em {
   font-style: normal;
   font-weight: 800;
   color: var(--or-lo);
}

@media (max-width: 575px) {
   .pre {
      border-radius: 26px;
      padding-right: 16px;
   }

   .pre-ic {
      width: 40px;
      height: 40px;
      font-size: 16px;
   }
}

.chip {
   padding: 9px 16px;
   font: 600 18px var(--f-d);
   background: #fff;
   border: 1px solid var(--line);
   color: var(--ink-2);
}

.chip-x::before {
   content: "✕";
   color: var(--or);
   font-weight: 800;
   margin-right: 8px;
}

.chip.on {
   color: #fff;
   background: #0B0B0B;
   border-color: #0B0B0B;
}

.vsl-note {
margin: 20px 0 10px;
}

.vsl-note svg {
   width: 54px;
   height: 54px;
   fill: none;
   stroke: var(--or-lo);
   stroke-width: 2.4;
   stroke-linecap: round;
   transform: rotate(80deg);
}

.video {
   position: relative;
   aspect-ratio: 16/9;
   border-radius: 26px;
   overflow: hidden;
   padding: 8px;
   background: var(--grad);
   box-shadow: 0 50px 100px -40px rgba(201, 58, 11, .8);
}

.video-in {
   width: 100%;
   height: 100%;
   border-radius: 19px;
   overflow: hidden;
   background: #0B0B0B;
   display: grid;
   place-items: center;
   position: relative;
}

.video-in img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: .9;
}

.play {
   position: absolute;
   width: 86px;
   height: 86px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--grad);
   box-shadow: 0 0 0 12px rgba(255, 255, 255, .2), 0 20px 40px -10px rgba(0, 0, 0, .6);
   animation: pulse 2.2s infinite;
   cursor: pointer;
}

.play::after {
   content: "";
   margin-left: 6px;
   border-left: 24px solid #fff;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
}

@keyframes pulse {
   50% {
      box-shadow: 0 0 0 22px rgba(255, 255, 255, 0), 0 20px 40px -10px rgba(0, 0, 0, .6);
   }
}

.video-tag {
   position: absolute;
   left: 18px;
   bottom: 16px;
   padding: 6px 14px;
   border-radius: 99px;
   font: 700 12px var(--f-d);
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #fff;
   background: rgba(0, 0, 0, .65);
}

.handline {
   margin-top: 18px;
   text-align: center;
}

/* hero points — icon cards (previous page style, logo colours) */
.pts-title {
   margin: 56px 0 22px;
   text-align: center;
   font-size: clamp(22px, 2.8vw, 32px);
   font-weight: 800;
}

.pt {
   position: relative;
   min-height: 96px;
   padding: 18px 16px 18px 14px;
   overflow: hidden;
   border-radius: 20px;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: 0 10px 24px -16px rgba(120, 40, 5, .35);
   transition: transform .3s, border-color .3s, box-shadow .3s;
}

.pt::after {
   content: "";
   position: absolute;
   right: -50px;
   top: -54px;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: rgba(244, 81, 30, .07);
}

.pt:hover {
   transform: translateY(-3px);
   border-color: rgba(244, 81, 30, .4);
   box-shadow: 0 16px 30px -16px rgba(201, 58, 11, .45);
}

.pt-ic {
   position: relative;
   z-index: 1;
   flex: none;
   display: grid;
   place-items: center;
   width: 52px;
   height: 52px;
   border-radius: 16px;
   font-size: 21px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 10px 20px -8px rgba(201, 58, 11, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.col:nth-child(even) .pt-ic {
   background: linear-gradient(135deg, #2a2522, #0B0B0B);
   box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .6);
}

.pt-tx strong {
  display: block;
  font: 700 16px/1.3 var(--f-d);
  color: var(--ink);
}

.pt-tx span {
   display: block;
   margin-top: 2px;
font-size: 15px;
   line-height: 1.4;
   color: var(--muted);
}

/* price box */
.price-box {
   position: relative;
   padding: clamp(26px, 3vw, 40px);
   text-align: center;
   color: #fff;
   border-radius: 28px;
   background: var(--grad-dark);
   overflow: hidden;
   box-shadow: var(--shadow);
}

.price-box::before {
   content: "";
   position: absolute;
   inset: -40% -20% auto auto;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(244, 81, 30, .55), transparent 70%);
}

.price-box>* {
   position: relative;
}

.price-box .fine {
   color: rgba(255, 255, 255, .65);
}

.gc-badge {
   display: inline-block;
   padding: 7px 16px;
   border-radius: 99px;
   font: 800 12px var(--f-d);
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #0B0B0B;
   background: #FFD23F;
}

.was {
   margin: 20px 0 0;
   font: 600 18px var(--f-d);
   color: rgba(255, 255, 255, .6);
}

.was s {
   color: #FF8A6B;
}

.today {
   font: 600 16px var(--f-d);
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #FFB88A;
   margin: 4px 0 0;
}

.price {
   font: 900 clamp(64px, 8vw, 92px)/1 var(--f-d);
   letter-spacing: -.04em;
   background: linear-gradient(180deg, #fff, #FFC9A3);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.price {
   margin-top: 14px;
}

.price sup {
   font-size: .4em;
   line-height: 1;
   vertical-align: top;
   position: relative;
   top: .3em;
}

.trust {
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, .85);
}

.trust i {
   color: #FFB020;
   margin-right: 5px;
}

.light-trust {
   color: var(--ink-2);
}

.light-trust i {
   color: var(--or);
}

/* order journey */
/* order journey — 4 visual step cards, joined by a numbered line */
.journey {
   position: relative;
   margin-top: 56px;
   padding: clamp(26px, 3.5vw, 46px) clamp(16px, 3vw, 40px);
   border-radius: 32px;
   color: #fff;
   text-align: center;
   overflow: hidden;
   background: radial-gradient(50% 60% at 100% 100%, rgba(244, 81, 30, .28), transparent 70%), radial-gradient(40% 50% at 0% 0%, rgba(255, 176, 32, .12), transparent 70%), var(--grad-dark);
   box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .7);
}

.j-row {
   position: relative;
}

@media (min-width: 992px) {
   .j-row::before {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      top: 17px;
      height: 2px;
      background: repeating-linear-gradient(90deg, rgba(255, 138, 61, .9) 0 10px, transparent 10px 18px);
      background-size: 36px 2px;
      animation: dash 1.2s linear infinite;
   }
}

@keyframes dash {
   to {
      background-position: 36px 0;
   }
}

.j-step {
   position: relative;
   height: 100%;
   padding: 30px 14px 20px;
   border-radius: 22px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .14);
   opacity: .4;
   transform: translateY(10px);
   animation: jin 8s infinite;
}

.col:nth-child(2) .j-step {
   animation-delay: 1.4s;
}

.col:nth-child(3) .j-step {
   animation-delay: 2.8s;
}

.col:nth-child(4) .j-step {
   animation-delay: 4.2s;
}

@keyframes jin {

   0%,
   4% {
      opacity: .4;
      transform: translateY(10px);
   }

   10%,
   82% {
      opacity: 1;
      transform: none;
   }

   94%,
   100% {
      opacity: .4;
      transform: translateY(10px);
   }
}

.j-num {
   position: absolute;
   z-index: 3;
   top: -16px;
   left: 50%;
   translate: -50% 0;
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font: 900 15px var(--f-d);
   color: #fff;
   background: var(--grad);
   box-shadow: 0 0 0 5px #160f0b, 0 0 18px rgba(244, 81, 30, .8);
}

.j-step h4 {
   margin: 14px 0 6px;
   font-size: 17px;
   color: #fff;
}

.j-step p {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.45;
}

.j-step.profit {
   background: linear-gradient(160deg, rgba(244, 81, 30, .35), rgba(201, 58, 11, .25));
   border-color: rgba(255, 138, 61, .55);
}

.j-step.profit h4 {
   font-size: 26px;
   color: #FFD23F;
}

/* visual window (CSS mock; an image in images/gc/journey-*.webp covers it) */
.jv {
position: relative;
    aspect-ratio: 4 / 2;
    overflow: hidden;
    border-radius: 16px;
    /* background: radial-gradient(80% 80% at 50% 30%, rgba(255, 255, 255, .1), transparent 70%), rgba(0, 0, 0, .25); */
/* border: 1px solid rgba(255, 255, 255, .08); */
}

.jv img.ov {
   position: absolute;
   inset: 0;
   z-index: 4;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* 1 · personalization box */
.jv-form {
   width: 86%;
   padding: 12px;
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .6);
}

.jv-form small {
   display: block;
   margin-bottom: 6px;
   font: 700 10.5px var(--f-d);
   color: var(--muted);
}

.jv-input {
   display: flex;
   align-items: center;
   min-height: 32px;
   padding: 6px 10px;
   border-radius: 8px;
   font: 600 13px var(--f-b);
   color: var(--ink);
   border: 2px solid var(--or);
   white-space: nowrap;
   overflow: hidden;
}

.jv-caret {
   width: 2px;
   height: 16px;
   margin-left: 2px;
   background: var(--or);
   animation: blink 1s steps(1) infinite;
}

@keyframes blink {
   50% {
      opacity: 0;
   }
}

.jv-cart {
   display: block;
   margin-top: 8px;
   padding: 6px;
   border-radius: 99px;
   font: 700 11px var(--f-d);
   text-align: center;
   color: #fff;
   background: #0B0B0B;
}

/* 2 · blanket being printed */
.jv-blanket {
   width: 74%;
   padding: 12px 8px;
   border-radius: 10px;
   text-align: center;
   color: var(--or-lo);
   background: repeating-linear-gradient(45deg, #FFE9D6 0 6px, #FFDDC2 6px 12px);
   box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .6);
   transform: rotate(-3deg);
}

.jv-blanket small {
   display: block;
   font: 800 9px/1.3 var(--f-d);
   letter-spacing: .06em;
   text-transform: uppercase;
}

.jv-blanket b {
   display: block;
   margin: 2px 0;
   font: 700 26px/1 var(--f-h);
}

.jv-blanket em {
   font: 700 10px var(--f-d);
   font-style: normal;
   color: var(--ink-2);
}

.jv-bar {
   position: absolute;
   left: 12%;
   right: 12%;
   bottom: 12px;
   height: 6px;
   border-radius: 6px;
   background: rgba(255, 255, 255, .15);
   overflow: hidden;
}

.jv-bar span {
   display: block;
   height: 100%;
   width: 0;
   border-radius: 6px;
   background: linear-gradient(90deg, #FFB020, #F4511E);
   animation: printing 3s ease-in-out infinite;
}

@keyframes printing {
   0% {
      width: 0;
   }

   70%,
   100% {
      width: 100%;
   }
}

/* 3 · delivered gift */
.jv-box {
   font-size: clamp(54px, 6vw, 70px);
   line-height: 1;
   filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .5));
   animation: drop 3s ease-in-out infinite;
}

@keyframes drop {
   0% {
      transform: translateY(-14px);
   }

   30%,
   100% {
      transform: none;
   }
}

.jv-track {
   position: absolute;
   bottom: 12px;
   left: 50%;
   translate: -50% 0;
   padding: 5px 12px;
   border-radius: 99px;
   font: 700 11.5px var(--f-d);
   color: #fff;
   background: var(--ok);
   white-space: nowrap;
}

/* 4 · sale notification */
.jv-notif {
   width: 88%;
   padding: 10px 12px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .95);
   box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .6);
   animation: ping 3s ease-in-out infinite;
}

@keyframes ping {

   0%,
   8% {
      transform: translateY(-8px);
      opacity: 0;
   }

   18%,
   100% {
      transform: none;
      opacity: 1;
   }
}

.jv-app {
   flex: none;
   display: grid;
   place-items: center;
   width: 32px;
   height: 32px;
   border-radius: 9px;
   color: #fff;
   background: var(--or);
}

.jv-notif small {
   display: block;
   font: 600 9.5px var(--f-b);
   color: var(--muted);
}

.jv-notif b {
   display: block;
   font: 800 12.5px var(--f-d);
   color: var(--ink);
}

.jv-notif div span {
   display: block;
   font-size: 10.5px;
   color: var(--muted);
}

.jv-amt {
   position: absolute;
   bottom: 10px;
   right: 12px;
   padding: 4px 12px;
   border-radius: 99px;
   font: 900 16px var(--f-d);
   color: #0B0B0B;
   background: #FFD23F;
   box-shadow: 0 0 18px rgba(255, 210, 63, .6);
}

@media (max-width: 575px) {
   .jv {
      aspect-ratio: 16 / 9;
   }

   .jv-form,
   .jv-notif {
      width: 80%;
   }
}

.work0 {
   margin: 30px 0 6px;
   font: 900 clamp(26px, 4vw, 44px) var(--f-d);
}

.work0 i {
   margin-right: 6px;
   font-size: .8em;
   color: #FF8A3D;
}

.work0 span {
   color: #FFD23F;
}

/* proof strip */
/* proof strip — premium split: headline + platform logos | count-up stat cards */
.proof {
   padding: clamp(120px, 7vw, 100px) 0;
   overflow: hidden;
   /* background:
      radial-gradient(45% 60% at 100% 50%, rgba(244, 81, 30, .22), transparent 70%),
      radial-gradient(35% 50% at 0% 0%, rgba(255, 176, 32, .1), transparent 70%),
      linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
      var(--grad-dark); */

     background: #0b0b04 url(../images/proof-bg.webp) no-repeat center top / cover;
}

.proof-title {
   margin: 4px 0 14px;
   font: 800 clamp(28px, 3.6vw, 42px)/1.15 var(--f-d);
   letter-spacing: -.02em;
color: #0b0b04 !important;
}

.proof-grad {
   background: linear-gradient(100deg, #FF8A3D, #FFD23F);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.proof-sub {
   margin: 0 0 26px;
   font-size: 17px;
   color: rgba(255, 255, 255, .7);
}

.pl-label {
   margin-bottom: 10px;
   font: 700 11px var(--f-d);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .5);
}

.pl-label::after {
   content: "";
   display: inline-block;
   width: 40px;
   height: 1px;
   margin-left: 10px;
   vertical-align: middle;
   background: rgba(255, 255, 255, .25);
}

.proof .slot.pl-slot {
   --r: 5 / 2;
   padding: 8px;
   gap: 2px;
   border-radius: 14px;
   font-size: 9.5px;
   line-height: 1.25;
   background: rgba(255, 255, 255, .95);
   border: 1.5px dashed rgba(244, 81, 30, .5);
   color: var(--muted);
}

.pl-slot::before {
   font-size: 16px;
}

.pl-slot::after {
   max-width: 18ch;
}

.proof .slot.pl-slot:has(img) {
   padding: 10px 14px;
   background: #fff;
   border: 0;
}

.pl-slot img {
   position: static;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.pstat {
   position: relative;
   height: 100%;
   padding: 26px 24px 22px;
   overflow: hidden;
   border-radius: 22px;
   transition: transform .3s;
}

.pstat::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: inherit;
   background: linear-gradient(140deg, rgba(255, 138, 61, .7), rgba(255, 255, 255, .08) 45%, rgba(255, 176, 32, .5));
}

.pstat {
   isolation: isolate;
}

.pstat::after {
   content: "";
   position: absolute;
   z-index: -1;
   inset: 1px;
   border-radius: 21px;
   background: linear-gradient(160deg, #1d1410, #120d0a);
}

.pstat:hover {
   transform: translateY(-5px);
}

.ps-ic {
   display: inline-grid;
   place-items: center;
   width: 44px;
   height: 44px;
   margin-bottom: 16px;
   border-radius: 13px;
   font-size: 18px;
   color: #FFB88A;
   background: rgba(244, 81, 30, .14);
   border: 1px solid rgba(244, 81, 30, .35);
}

.ps-num {
   display: block;
   font: 900 clamp(38px, 4.4vw, 54px)/1 var(--f-d);
   letter-spacing: -.035em;
   background: linear-gradient(120deg, #FF8A3D, #FFD23F);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.ps-lbl {
   display: block;
   margin-top: 8px;
   font: 600 15px/1.4 var(--f-d);
   color: #fff;
}

.ps-src {
   display: inline-block;
   margin-top: 12px;
   padding: 3px 10px;
   border-radius: 99px;
   font: 600 10.5px var(--f-b);
   letter-spacing: .04em;
   color: rgba(255, 255, 255, .55);
   background: rgba(255, 255, 255, .06);
}

.pstat.hot::after {
   background: linear-gradient(160deg, #3a1708, #1d0d06);
}

.pstat.hot .ps-ic {
   color: #fff;
   background: var(--grad);
   border: 0;
}

.proof-fine {
   max-width: 860px;
   margin: 40px auto 0;
   text-align: center;
}

@media (max-width: 991px) {
   .proof .col-lg-5 {
      text-align: center;
   }

   .pl-label::after {
      display: none;
   }
}

/* frames */
.frame {
   padding: 8px;
   border-radius: 26px;
   background: var(--grad);
   box-shadow: 0 50px 100px -40px rgba(201, 58, 11, .7);
}

.frame .video-in {
   aspect-ratio: 16/9;
}

.browser {
   border-radius: 22px;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
}

.bar {
   padding: 12px 16px;
   background: #F6E8DC;
   border-bottom: 1px solid var(--line);
}

.bar i {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: var(--or);
}

.bar i:nth-child(2) {
   background: var(--amber);
}

.bar i:nth-child(3) {
   background: #0B0B0B;
}

.bar span {
   margin: 0 auto;
   padding: 3px 16px;
   border-radius: 99px;
   font: 600 12px var(--f-d);
   color: var(--muted);
   background: #fff;
}

/* one design 1000 names */
.blanket {
   position: relative;
   max-width: 460px;
   margin: 0 auto;
   padding: 22px;
   border-radius: 22px;
   background: linear-gradient(145deg, #FFE9D6, #FFD0AE);
   box-shadow: var(--shadow);
   transform: rotate(-2deg);
}

.blanket-in {
   padding: 34px 22px;
   text-align: center;
   border: 3px dashed rgba(201, 58, 11, .5);
   border-radius: 14px;
   background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .5) 0 8px, rgba(255, 255, 255, .25) 8px 16px);
}

.blanket-in small {
   font: 700 12px var(--f-d);
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--or-lo);
}

.blanket-in h4 {
   margin: 10px 0 16px;
   font: 800 28px var(--f-d);
}

.blanket img.ov {
   position: absolute;
   inset: 0;
   z-index: 2;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
}

.nm {
   min-height: 112px;
   font: 700 clamp(26px, 3.2vw, 36px) var(--f-h);
   color: var(--or-lo);
   line-height: 1.05;
   transition: opacity .4s;
}

.nm.out {
   opacity: 0;
}

.tag-live {
   position: absolute;
   z-index: 3;
   top: -14px;
   right: -10px;
   padding: 8px 14px;
   border-radius: 99px;
   font: 800 12px var(--f-d);
   color: #fff;
   background: #0B0B0B;
   transform: rotate(5deg);
}

/* steps */
.step {
   padding: 20px;
}

.step .n {
   display: inline-grid;
   place-items: center;
   width: 44px;
   height: 44px;
   margin-bottom: 12px;
   border-radius: 14px;
   font: 900 20px var(--f-d);
   color: #fff;
   background: var(--grad);
}

.step h3 {
   font-size: 21px;
   margin-bottom: 8px;
}

.step p {
   font-size: 15.5px;
   color: var(--muted);
   margin-bottom: 14px;
}

/* videos */
.vcard {
   height: 100%;
   border-radius: 24px;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
}

.vwrap {
   position: relative;
   aspect-ratio: 9/16;
   max-height: 520px;
   width: 100%;
   background: #0B0B0B;
}

.vwrap video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.vplay {
   position: absolute;
   inset: 0;
   margin: auto;
   width: 70px;
   height: 70px;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   background: var(--grad);
   box-shadow: 0 0 0 10px rgba(255, 255, 255, .22);
}

.vplay::after {
   content: "";
   position: absolute;
   left: 27px;
   top: 21px;
   border-left: 21px solid #fff;
   border-top: 14px solid transparent;
   border-bottom: 14px solid transparent;
}

.vwrap.playing .vplay {
   display: none;
}

.vinfo {
   padding: 16px 20px 20px;
}

.vinfo .stars {
   color: var(--amber);
   letter-spacing: 3px;
   font-size: 14px;
}

.vinfo strong {
   display: block;
   font: 800 18px var(--f-d);
}

.vinfo span {
   color: var(--muted);
   font-size: 14px;
}

.vcta {
   min-height: 360px;
   padding: 30px;
   color: #fff;
   background: var(--grad);
   border: 0;
}

.vcta h3 {
   color: #fff;
   font-size: 26px;
   margin-bottom: 18px;
}

/* shift */
.prose {
   font-size: clamp(17px, 1.9vw, 20px);
   color: var(--ink-2);
}

.prose b {
   color: var(--ink);
}

.prose .big {
   margin: 28px 0;
   padding: 22px 26px;
   border-left: 6px solid var(--or);
   border-radius: 0 18px 18px 0;
   font: 700 clamp(19px, 2.3vw, 25px)/1.4 var(--f-d);
   background: var(--peach);
}

.split {
   max-width: 980px;
   margin: 44px auto 0;
   border-radius: 32px;
   overflow: hidden;
   box-shadow: var(--shadow);
}

.sp-l,
.sp-r {
   height: 100%;
   padding: clamp(26px, 3.4vw, 44px);
}

.sp-l {
   background: #E4E2E0;
   filter: grayscale(1);
}

.sp-l h3 {
   color: #5b5651;
}

.sp-r {
   background: linear-gradient(160deg, #FFEBDA, #FFC79F);
}

.split h3 {
   font-size: 22px;
   margin-bottom: 18px;
}

.split li {
   padding: 14px 0;
   border-bottom: 1px solid rgba(0, 0, 0, .1);
   font-weight: 600;
}

.split li:last-child {
   border: 0;
}

.sp-l li::before {
   content: "✕  ";
   color: #888;
   font-weight: 800;
}

.sp-r li::before {
   content: "✓  ";
   color: var(--or-lo);
   font-weight: 800;
}

.ebooks i {
   flex: 1;
   height: 56px;
   border-radius: 4px;
   background: #bdb9b5;
   box-shadow: inset -4px 0 0 rgba(0, 0, 0, .1);
}

.nametag {
   display: inline-block;
   margin-bottom: 14px;
   padding: 10px 18px;
   border-radius: 10px;
   font: 700 24px var(--f-h);
   color: #fff;
   background: var(--or-lo);
   transform: rotate(-3deg);
   box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .4);
}

/* facts */
.fact {
   padding: 28px 24px;
}

.fact:hover,
.fcard:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow);
}

.fact b {
   display: block;
   font: 900 clamp(34px, 4vw, 46px)/1 var(--f-d);
   letter-spacing: -.03em;
}

.fact p {
   margin: 10px 0 8px;
   font-size: 15.5px;
   color: var(--ink-2);
}

.fact small {
   font-size: 12px;
   color: var(--muted);
   font-weight: 600;
}

.hl-box {
   margin: 0;
   padding: 26px 32px;
   text-align: center;
   border-radius: 24px;
   font: 700 clamp(17px, 2vw, 22px)/1.5 var(--f-d);
   color: #fff;
   background: var(--grad);
   box-shadow: 0 30px 60px -28px rgba(201, 58, 11, .9);
}

/* stories */
.story {
   padding: clamp(22px, 3vw, 32px);
}

.story .big-n {
   display: block;
   font: 900 clamp(40px, 5vw, 58px)/1 var(--f-d);
   letter-spacing: -.03em;
}

.story h3 {
   margin: 10px 0 12px;
   font-size: 20px;
}

.story p {
   font-size: 15.5px;
   color: var(--ink-2);
}

.story .lesson {
   margin: 14px 0 0;
   padding: 14px 16px;
   border-radius: 14px;
   font-size: 14.5px;
   background: var(--peach);
}

.story .lesson b {
   color: var(--or-lo);
}

.src {
   display: inline-block;
   margin-top: 14px;
   padding: 5px 12px;
   border-radius: 99px;
   font: 700 11px var(--f-d);
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--muted);
   background: #F3EEEA;
}

.notice {
   max-width: 860px;
   margin: 0 auto 34px;
   padding: 16px 22px;
   border-radius: 16px;
   font-size: 14.5px;
   text-align: center;
   color: var(--ink-2);
   background: #FFF3C7;
   border: 1px dashed #E0A800;
}

/* calendar */
.month {
   position: relative;
   height: 100%;
   padding: 30px 18px 18px;
   text-align: center;
   border-radius: 22px;
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .16);
   transition: transform .3s, background .3s;
}

.month:hover {
   transform: translateY(-6px) rotate(-1deg);
   background: rgba(244, 81, 30, .25);
}

.coin {
   position: absolute;
   top: -20px;
   left: 50%;
   translate: -50% 0;
   width: 46px;
   height: 46px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font: 900 13px var(--f-d);
   color: #0B0B0B;
   background: linear-gradient(145deg, #FFE27A, #FFA800);
   box-shadow: 0 8px 16px -4px rgba(0, 0, 0, .6);
}

.month p {
   margin: 0;
   font-size: 14px;
   color: rgba(255, 255, 255, .82);
   line-height: 1.4;
}

.cal-end {
   margin-top: 36px;
   text-align: center;
   font: 800 clamp(20px, 3vw, 30px)/1.3 var(--f-d);
}

/* struggle / freedom */
.sf {
   height: 100%;
   padding: clamp(26px, 3.4vw, 44px);
   border-radius: 30px;
}

.sf-bad {
   background: #FDECEA;
   border: 2px solid #F3B5AE;
}

.sf-good {
   background: linear-gradient(160deg, #E8F8EE, #D2F0DE);
   border: 2px solid #9ADBB4;
}

.sf .label {
   display: inline-block;
   margin-bottom: 14px;
   padding: 6px 14px;
   border-radius: 99px;
   font: 800 11px var(--f-d);
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #fff;
}

.sf-bad .label {
   background: var(--bad);
}

.sf-good .label {
   background: var(--ok);
}

.sf h3 {
   font-size: clamp(22px, 2.6vw, 30px);
   margin-bottom: 16px;
}

.sf p {
   color: var(--ink-2);
   font-size: 16.5px;
}

/* sleep */
.night {
   background: linear-gradient(180deg, #05060f, #14102a 60%, #2b140a);
   overflow: hidden;
}

.night::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 120px 80px, #fff, transparent), radial-gradient(2px 2px at 220px 150px, #ffd, transparent), radial-gradient(1px 1px at 300px 40px, #fff, transparent);
   background-size: 340px 200px;
   opacity: .55;
}

.night .container {
   position: relative;
}

.tl {
   position: relative;
   padding-left: 74px;
}

.tl::before {
   content: "";
   position: absolute;
   left: 27px;
   top: 8px;
   bottom: 8px;
   width: 3px;
   background: linear-gradient(180deg, #7B8CFF, var(--or), #FFD23F);
   border-radius: 3px;
}

.tl-item {
   position: relative;
   margin-bottom: 18px;
   padding: 18px 22px;
   border-radius: 18px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .16);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
}

.tl-item:last-child {
   margin-bottom: 0;
}

.tl-item::before {
   content: "🌙";
   position: absolute;
   left: -73px;
   top: 50%;
   translate: 0 -50%;
   width: 56px;
   height: 56px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font-size: 24px;
   background: #14102a;
   border: 2px solid var(--or);
}

.tl-item.day::before {
   content: "☀️";
   background: #FFB020;
   border-color: #fff;
}

.tl-time {
   font: 800 13px var(--f-d);
   letter-spacing: .1em;
   color: #FFB88A;
}

.tl-item p {
   margin: 4px 0 0;
   color: #fff;
   font-weight: 600;
}

.tl-item.day {
   background: var(--grad);
   border: 0;
}

.tl-item.day .tl-time {
   color: #fff;
}

/* features */
.fcard {
   padding: 28px 24px;
}

.fcard .ic {
   display: grid;
   place-items: center;
   width: 56px;
   height: 56px;
   margin-bottom: 16px;
   border-radius: 18px;
   font-size: 24px;
   color: var(--or-lo);
   background: var(--peach);
}

.fcard h3 {
   font-size: 19px;
   margin-bottom: 8px;
}

.fcard p {
   margin: 0;
   font-size: 15px;
   color: var(--muted);
}

.fcard.hot {
   color: #fff;
   background: var(--grad);
   border: 0;
}

.fcard.hot .ic {
   color: #fff;
   background: rgba(255, 255, 255, .22);
}

.fcard.hot h3 {
   color: #fff;
}

.fcard.hot p {
   color: rgba(255, 255, 255, .9);
}

/* showcase */
.st {
display: inline-block;
  margin-bottom: 20px;
  padding: 11px 30px;
  border-radius: 99px;
  font: 800 18px var(--f-d);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--or);
}

.show-t h3 {
   font-size: clamp(24px, 3vw, 34px);
margin-bottom: 20px;
}

.show-t p {
   color: var(--muted);
   font-size: 18px;
}

.season {
   margin: 0 auto;
   padding: 22px 28px;
   text-align: center;
   border-radius: 22px;
   font: 700 clamp(18px, 2.2vw, 24px)/1.4 var(--f-d);
   background: var(--peach);
}

/* name perfect */
.vs {
   position: relative;
   height: 100%;
   padding: 30px 22px 24px;
   border-radius: 26px;
   text-align: center;
   background: #fff;
   border: 3px solid;
}

.vs.bad {
   border-color: var(--bad);
}

.vs.good {
   border-color: var(--ok);
}

.vs-mark {
   position: absolute;
   z-index: 4;
   top: -20px;
   left: 50%;
   translate: -50% 0;
   width: 42px;
   height: 42px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font: 900 22px var(--f-d);
   color: #fff;
}

.bad .vs-mark {
   background: var(--bad);
}

.good .vs-mark {
   background: var(--ok);
}

.vs .blanket {
   transform: none;
   padding: 14px;
}

.vs .blanket-in {
   padding: 20px 10px;
}

.names-list {
   font: 700 24px/1.15 var(--f-h);
   color: var(--or-lo);
}

.bad .names-list {
   font-family: "Courier New", monospace;
   font-size: 16px;
   color: #8a5a50;
   filter: blur(.7px);
   letter-spacing: -.5px;
   transform: skew(-4deg);
}

.vs p {
   margin: 14px 0 0;
   font-weight: 700;
   font-size: 15px;
}

.bad p {
   color: var(--bad);
}

.good p {
   color: var(--ok);
}

/* old way */
.tbl {
   border-radius: 20px;
   overflow: hidden;
   background: #fff;
   box-shadow: var(--shadow);
}

.tbl th {
   padding: 16px 22px;
   text-align: left;
   font: 700 13px var(--f-d);
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #fff;
   background: #0B0B0B;
}

.tbl td {
   padding: 15px 22px;
   border-bottom: 1px solid var(--line);
   font-weight: 500;
}

.tbl td:last-child,
.tbl th:last-child {
   text-align: right;
   font-weight: 800;
   color: var(--bad);
}

.tbl th:last-child {
   color: #fff;
}

.tbl tr:last-child td {
   border: 0;
}

.cmp {
   height: 100%;
   padding: 26px 22px;
   text-align: center;
   border-radius: 24px;
}

.cmp.old {
   background: #FDECEA;
   border: 2px solid #F3B5AE;
}

.cmp.new {
   color: #fff;
   background: var(--grad);
   box-shadow: 0 30px 60px -26px rgba(201, 58, 11, .9);
}

.cmp small {
   display: block;
   font: 700 12px var(--f-d);
   letter-spacing: .1em;
   text-transform: uppercase;
   opacity: .8;
}

.cmp b {
   display: block;
   margin: 6px 0;
   font: 900 clamp(24px, 3vw, 34px)/1.1 var(--f-d);
}

.cmp.old b {
   color: var(--bad);
}

.cmp p {
   margin: 0;
   font-size: 14.5px;
}

/* covered */
.cv {
   position: relative;
   height: 100%;
   padding: 18px 18px 18px 52px;
   border-radius: 18px;
   font-weight: 600;
   font-size: 15.5px;
   background: #fff;
   border: 1px solid var(--line);
}

.cv::before {
   content: "✓";
   position: absolute;
   left: 16px;
   top: 18px;
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font: 800 14px var(--f-d);
   color: #fff;
   background: var(--grad);
}

/* ticks list */
.ticks li {
   position: relative;
   padding: 9px 0 9px 36px;
   font-weight: 500;
   color: var(--ink-2);
}

.ticks li::before {
   content: "✓";
   position: absolute;
   left: 0;
   top: 10px;
   width: 24px;
   height: 24px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font: 800 13px var(--f-d);
   color: #fff;
   background: var(--grad);
}

.box {
   padding: clamp(24px, 3vw, 38px);
   border-radius: 28px;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
}

/* letter */
.letter {
   position: relative;
   padding: clamp(30px, 5vw, 64px);
   border-radius: 8px;
   background: #FFFDF7 repeating-linear-gradient(transparent 0 33px, rgba(201, 58, 11, .07) 33px 34px);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .06);
   transform: rotate(-.4deg);
}

.letter::before {
   content: "";
   position: absolute;
   top: -14px;
   left: 50%;
   translate: -50% 0;
   width: 120px;
   height: 28px;
   background: rgba(244, 81, 30, .5);
   transform: rotate(-2deg);
}

.letter p {
   font-size: 18px;
   color: var(--ink-2);
}

.letter .hand {
   font-size: 36px;
}

.sig {
   margin-top: 24px;
   font: 700 36px var(--f-h);
   color: var(--or-lo);
}

/* introducing */
.intro-img {
   filter: drop-shadow(0 40px 50px rgba(120, 40, 5, .45));
   animation: bob 6s ease-in-out infinite;
}

@keyframes bob {
   50% {
      transform: translateY(-14px);
   }
}

.intro-title {
   font-size: clamp(40px, 6vw, 72px);
   font-weight: 900;
}

.tri {
   padding: 26px 22px;
}

.tt {
   display: inline-block;
   margin-bottom: 8px;
   padding: 5px 12px;
   border-radius: 99px;
   font: 800 11px var(--f-d);
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #fff;
   background: var(--or);
}

.tri h3 {
   font-size: 20px;
   margin-bottom: 8px;
}

.tri p {
   margin: 0;
   font-size: 15px;
   color: var(--muted);
}

/* interface cards */
.ifc {
   padding: 26px 22px;
}

.ifc h3 {
   font-size: 18px;
   margin-bottom: 12px;
   color: var(--or-lo);
}

.ifc li {
   position: relative;
   padding: 5px 0 5px 22px;
   font-size: 14.5px;
   color: var(--ink-2);
}

.ifc li::before {
   content: "•";
   position: absolute;
   left: 4px;
   color: var(--or);
   font-weight: 900;
}

.niches .chip {
   padding: 11px 18px;
   font-size: 15px;
   transition: all .25s;
}

.niches .chip:hover {
   color: #fff;
   background: var(--grad);
   border-color: transparent;
   transform: translateY(-3px);
}

/* profit */
.calc {
   border-radius: 28px;
   overflow: hidden;
   background: #fff;
   box-shadow: var(--shadow);
   border: 1px solid var(--line);
}

.calc-top {
   padding: 16px 24px;
   color: #fff;
   background: #0B0B0B;
   font: 700 13px var(--f-d);
   letter-spacing: .1em;
   text-transform: uppercase;
}

.calc-top i {
   padding: 4px 10px;
   border-radius: 6px;
   font-style: normal;
   background: var(--or);
}

.calc-row {
   padding: 15px 24px;
   border-bottom: 1px dashed rgba(0, 0, 0, .14);
   font-weight: 500;
   font-size: 15.5px;
   opacity: 0;
   transform: translateX(-14px);
   transition: all .5s;
}

.calc.go .calc-row {
   opacity: 1;
   transform: none;
}

.calc-row b {
   white-space: nowrap;
   font-family: "Courier New", monospace;
   font-size: 17px;
}

.calc-row.minus b {
   color: var(--bad);
}

.calc-row.plus b {
   color: var(--ok);
}

.calc-total {
   padding: 22px 24px;
   color: #fff;
   background: linear-gradient(135deg, #14803f, #1E9E5A);
   font: 800 18px var(--f-d);
}

.calc-total b {
   font: 900 clamp(34px, 5vw, 46px) var(--f-d);
}

.mth {
   height: 100%;
   padding: 22px 18px;
   text-align: center;
   border-radius: 20px;
   background: #fff;
   border: 1px solid var(--line);
   font-weight: 600;
   font-size: 15px;
}

.mth b {
   display: block;
   font: 900 28px var(--f-d);
   color: var(--or-lo);
}

.mth.last {
   color: #fff;
   background: var(--grad);
   border: 0;
}

.mth.last b {
   color: #fff;
}

/* client service */
.fiv img {
   width: 100%;
   border-radius: 16px;
   border: 1px solid var(--line);
   box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5);
}

/* perfect for */
.who {
   height: 100%;
   padding: 16px 18px;
   border-radius: 16px;
   background: #fff;
   border: 1px solid var(--line);
}

.who b {
   display: block;
   font: 800 15px var(--f-d);
   color: var(--or-lo);
}

.who span {
   font-size: 13.5px;
   color: var(--muted);
   line-height: 1.4;
   display: block;
}

/* unleash */
.glass {
   padding: 26px 22px;
}

.glass h3 {
   font-size: 19px;
   margin-bottom: 8px;
   color: #FFB88A;
}

.glass p {
   margin: 0;
   font-size: 15px;
   color: rgba(255, 255, 255, .82);
}

/* bonuses */
.ticket {
   position: relative;
   border-radius: 24px;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
}

.ticket::before,
.ticket::after {
   content: "";
   position: absolute;
   left: 84px;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: #fff;
   border: 1px solid var(--line);
}

.ticket::before {
   top: -12px;
}

.ticket::after {
   bottom: -12px;
}

.tk-l {
   flex: 0 0 96px;
   border-radius: 24px 0 0 24px;
   color: #fff;
   background: var(--grad);
   border-right: 2px dashed rgba(255, 255, 255, .6);
}

.tk-l small {
   font: 700 10px var(--f-d);
   letter-spacing: .14em;
   text-transform: uppercase;
   opacity: .85;
}

.tk-l b {
   font: 900 38px var(--f-d);
}

.tk-r {
   padding: 22px 22px 22px 24px;
}

.tk-r h3 {
   font-size: 19px;
   margin-bottom: 6px;
}

.tk-r p {
   margin: 0 0 10px;
   font-size: 14.5px;
   color: var(--muted);
}

.slot.tk-img {
   flex: 0 0 100px;
   --r: 3 / 4;
   padding: 8px;
   border-radius: 14px;
   font-size: 10.5px;
}

.slot.tk-img::before {
   font-size: 20px;
}

.slot.tk-img::after {
   content: "Cover image";
   max-width: 12ch;
}

.val {
   display: inline-block;
   padding: 5px 12px;
   border-radius: 99px;
   font: 800 13px var(--f-d);
   color: var(--or-lo);
   background: var(--peach);
}

.val s {
   opacity: .6;
}

/* buy box */
.buy {
   border-radius: 32px;
   overflow: hidden;
   background: #fff;
   color: var(--ink);
   box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8);
}

.buy-h {
   padding: 22px 28px;
   text-align: center;
   color: #fff;
   background: var(--grad);
   font: 800 20px var(--f-d);
}

.vtbl td {
   padding: 11px 28px;
   border-bottom: 1px solid var(--line);
   font-weight: 500;
   font-size: 15.5px;
}

.vtbl td:first-child::before {
   content: "✓ ";
   color: var(--or);
   font-weight: 900;
}

.vtbl td:last-child {
   text-align: right;
   font-weight: 800;
   color: var(--muted);
}

.vtbl tr.tot td {
   padding: 18px 28px;
   font: 900 19px var(--f-d);
   background: var(--peach);
}

.vtbl tr.tot td:first-child::before {
   content: none;
}

.vtbl tr.tot td:last-child {
   color: var(--or-lo);
}

.buy-b {
   padding: 30px 28px 34px;
   text-align: center;
}

.buy-b .was,
.buy-b .today {
   color: var(--muted);
}

.buy-b .was s {
   color: var(--bad);
}

.buy-b .today {
   color: var(--or-lo);
}

.buy-b .price {
   background: var(--grad);
   -webkit-background-clip: text;
   background-clip: text;
}

.buy-img {
   width: min(340px, 80%);
   margin: -6px auto 14px;
   filter: drop-shadow(0 24px 30px rgba(120, 40, 5, .35));
}

.bump {
   padding: 18px 20px;
   border-radius: 16px;
   background: #FFF8F6;
   border: 2.5px dashed var(--bad);
   cursor: pointer;
   font-size: 15px;
}

.bump input {
   flex: none;
   width: 24px;
   height: 24px;
   margin-top: 3px;
   accent-color: var(--or);
}

.bump b {
   color: var(--bad);
}

.bump s {
   color: var(--muted);
}

/* faq */
.faq {
   --bs-accordion-border-color: var(--line);
   --bs-accordion-border-radius: 18px;
   --bs-accordion-inner-border-radius: 18px;
   --bs-accordion-btn-focus-box-shadow: none;
   --bs-accordion-active-bg: #fff;
   --bs-accordion-active-color: var(--or-lo);
   --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F4511E'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
   --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

.faq .accordion-item {
   margin-bottom: 12px;
   border: 1px solid var(--line);
   border-radius: 18px;
   overflow: hidden;
}

.faq .accordion-item:not(:first-of-type) {
   border-top: 1px solid var(--line);
}

.faq .accordion-item:has(.show) {
   border-color: var(--or);
   box-shadow: 0 20px 40px -26px rgba(201, 58, 11, .6);
}

.faq .accordion-button {
   padding: 20px 24px;
   font: 700 17px var(--f-d);
   color: var(--ink);
}

.faq .accordion-button:not(.collapsed) {
   color: var(--or-lo);
   box-shadow: none;
}

.faq .accordion-body {
   padding: 0 24px 22px;
   font-size: 16px;
   color: var(--muted);
}

/* guarantee */
.guar {
   padding: clamp(28px, 4vw, 48px);
   border-radius: 32px;
   background: #fff;
   border: 2px solid #9ADBB4;
   box-shadow: var(--shadow);
}

.seal {
   width: 190px;
   aspect-ratio: 1;
   margin: 0 auto;
   display: grid;
   place-items: center;
   align-content: center;
   text-align: center;
   border-radius: 50%;
   color: #fff;
   background: radial-gradient(circle at 30% 25%, #2EC27E, #14803f);
   border: 8px double rgba(255, 255, 255, .7);
   box-shadow: 0 0 0 6px #1E9E5A, 0 20px 40px -14px rgba(20, 128, 63, .8);
}

.seal b {
   font: 900 52px/1 var(--f-d);
}

.seal span {
   font: 800 12px/1.3 var(--f-d);
   letter-spacing: .1em;
   text-transform: uppercase;
}

.guar h2 {
   font-size: clamp(24px, 3vw, 34px);
   margin-bottom: 12px;
}

.guar p {
   margin: 0;
   color: var(--ink-2);
}

/* footer */
.foot {
   padding: clamp(50px, 6vw, 80px) 0 40px;
   color: rgba(255, 255, 255, .8);
   background: var(--grad-dark);
}

.foot .hand {
   color: #FFB88A;
   font-size: 38px;
}

.ps p {
   color: rgba(255, 255, 255, .88);
   margin-bottom: 12px;
}

.ps b {
   color: #FFB020;
}

.flinks {
   font-weight: 600;
}

.flinks a:hover {
   color: #fff;
   text-decoration: underline;
}

.disc {
   margin: 0 auto;
   font-size: 12.5px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .55);
}

.foot .logo {
   width: 190px;
   margin: 30px auto 14px;
}

/* ==========================================================================
   Image slots — dashed placeholder until images/gc/<file> exists
   ========================================================================== */
.slot {
   position: relative;
   display: grid;
   place-items: center;
   align-content: center;
   gap: 8px;
   width: 100%;
   aspect-ratio: var(--r, 16 / 10);
   padding: 18px;
   overflow: hidden;
   border-radius: 22px;
   text-align: center;
   font: 600 13px/1.4 var(--f-d);
   color: var(--muted);
   background: repeating-linear-gradient(45deg, rgba(244, 81, 30, .06) 0 12px, transparent 12px 24px), #FFF8F2;
   border: 2px dashed rgba(201, 58, 11, .4);
}

.slot::before {
   /* content: "\f03e";
   font: 900 30px "Font Awesome 6 Free";
   color: var(--or);
   opacity: .8; */
}

.slot::after {
   /* content: attr(data-label);
   max-width: 30ch; */
}

.slot img {
position: absolute;
  inset: 0;
  z-index: 1;
  /* width: 100%;
  height: 100%; */
  object-fit: cover;
   /* height: 100%; */
   /* object-fit: cover; */
}

.slot:has(img) {
   padding: 0;
   border: 0;
   background: none;
   box-shadow: var(--shadow);
}

.slot.fit img {
   object-fit: contain;
}

.dark .slot,
.night .slot {
   color: rgba(255, 255, 255, .7);
   background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px), rgba(255, 255, 255, .04);
   border-color: rgba(255, 176, 120, .45);
}

.slot.tall {
   --r: 4 / 5;
}

.slot.wide {
   --r: 21 / 8;
}

.slot-logos {
   --r: 8 / 1;
   padding: 10px;
}

.slot-logos::before {
   font-size: 20px;
}

.story .slot,
.sf .slot {
   --r: 16 / 9;
   margin-bottom: 18px;
   border-radius: 16px;
}

.step .slot {
   --r: 4 / 3;
   border-radius: 16px;
}

.browser .slot {
   /* --r: 16 / 9; */
   border-radius: 0;
   border-width: 0;
}

.browser .slot:has(img) {
   box-shadow: none;
}
.browser .slot img{
   position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  object-fit: contain;
}

.letter .polaroid {
   float: right;
   width: 190px;
   --r: 1;
   margin: 0 0 16px 22px;
   padding: 10px 10px 34px;
   border-radius: 4px;
   border: 0;
   background: #fff;
   box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45);
   transform: rotate(3deg);
}

.letter .polaroid img {
   inset: 10px 10px 34px;
   width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.letter .polaroid:has(img) {
   padding: 10px 10px 34px;
   background: #fff;
}

/* reveal */
.rv {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity .8s, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.rv.in {
   opacity: 1;
   transform: none;
}

.no-js .rv {
   opacity: 1;
   transform: none;
}

/* ───────── responsive tweaks (layout itself is Bootstrap) ───────── */
@media (max-width: 991px) {
   .slot.tall {
      --r: 16 / 10;
   }
}

@media (max-width: 767px) {
   body {
      font-size: 16px;
   }

   .topbar {
      position: relative;
      padding: 6px 0;
   }

   .tb-text {
      font-size: 13px;
   }

   .tb-label {
      font-size: 12px;
   }

   .tb-cta {
      display: none;
   }

   .btn-gc {
      width: 100%;
      padding: 17px 22px;
   }

   .tl {
      padding-left: 62px;
   }

   .tl-item::before {
      left: -62px;
      width: 46px;
      height: 46px;
      font-size: 20px;
   }

   .tl::before {
      left: 21px;
   }

   .ticket::before,
   .ticket::after {
      left: 62px;
   }

   .tk-l {
      flex-basis: 74px;
   }

   .tk-l b {
      font-size: 28px;
   }

   .tk-img {
      display: none;
   }

   .vtbl td {
      padding: 10px 16px;
      font-size: 14px;
   }

   .calc-row {
      font-size: 14px;
      padding: 13px 16px;
   }

   .letter .polaroid {
      float: none;
      margin: 0 auto 18px;
   }

   .slot.wide {
      --r: 16 / 10;
   }
}

@media (prefers-reduced-motion: reduce) {
   * {
      animation: none !important;
      transition: none !important;
   }

   .rv,
   .j-step {
      opacity: 1;
      transform: none;
   }
}

/* ==========================================================================
   Offer box + buy button (reference style, logo orange)
   ========================================================================== */
.offer {
   position: relative;
   padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 56px) clamp(22px, 3vw, 30px);
   text-align: center;
   color: #fff;
   border-radius: 26px;
   background: radial-gradient(70% 60% at 50% 0%, rgba(244, 81, 30, .18), transparent 70%), linear-gradient(160deg, #141414, #1b1512 60%, #141414);
   border: 1px solid rgba(255, 255, 255, .08);
   box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .75);
}

.offer-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 18px;
   border-radius: 99px;
   font: 700 12px var(--f-d);
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #FFB88A;
   background: rgba(244, 81, 30, .08);
   border: 1px solid rgba(255, 138, 61, .45);
}

.offer-badge i {
   color: #FFB020;
}

.offer-title {
   margin: 20px 0 10px;
   font: 800 clamp(26px, 4vw, 44px)/1.15 var(--f-d);
   letter-spacing: -.02em;
   color: #fff;
}

.offer-title span {
   background: linear-gradient(100deg, #FF8A3D, #FFB878);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.offer-sub {
   margin: 0 auto;
   max-width: 620px;
   font-size: clamp(15px, 1.7vw, 18px);
   color: rgba(255, 255, 255, .7);
}

.offer-price {
   padding: 16px clamp(18px, 3vw, 32px);
   border-radius: 18px;
   background: rgba(255, 255, 255, .03);
   border: 1px solid rgba(255, 255, 255, .12);
}

.op-label {
   font: 700 13px var(--f-d);
   color: rgba(255, 255, 255, .7);
}

.op-now .op-label {
   padding-bottom: 12px;
   font-size: 15px;
   color: #FFB88A;
}

.op-amt {
   font: 900 clamp(54px, 7vw, 78px)/.9 var(--f-d);
   letter-spacing: -.04em;
   background: linear-gradient(180deg, #FFB878, #F4511E);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.op-note {
   padding-bottom: 10px;
   font-size: 13.5px;
   color: rgba(255, 255, 255, .6);
}

.op-was {
   padding-left: clamp(16px, 3vw, 30px);
   border-left: 1px solid rgba(255, 255, 255, .15);
}

.op-was .op-label {
   font-size: 10.5px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .5);
}

.op-was s {
   font: 800 clamp(17px, 2vw, 21px) var(--f-d);
   color: rgba(255, 255, 255, .55);
   text-decoration-color: #FF6B2C;
   text-decoration-thickness: 2px;
}

/* the button: big rounded rectangle, title + small line inside */
.buy-cta {
   max-width: 620px;
   padding: 18px 24px 14px;
   border-radius: 14px;
   color: #fff;
   background: linear-gradient(115deg, #FF8A3D 0%, #F4511E 50%, #C93A0B 100%);
   background-size: 160% 100%;
   border: 1px solid rgba(255, 200, 160, .55);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 36px -14px rgba(201, 58, 11, .85);
   transition: transform .25s, box-shadow .25s, background-position .4s;
}

.buy-cta:hover {
   color: #fff;
   transform: translateY(-3px);
   background-position: 100% 0;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 24px 44px -14px rgba(201, 58, 11, .95);
}

.bc-main {
font: 800 clamp(19px, 2.4vw, 40px)/1.2 var(--f-d);
  letter-spacing: -.01em;
}

.bc-main i {
   margin-left: 8px;
   font-size: .85em;
   transition: transform .25s;
}

.buy-cta:hover .bc-main i {
   transform: translateX(5px);
}

.bc-sub {
   font: 500 12.5px var(--f-b);
   color: rgba(255, 255, 255, .85);
}

.offer-foot {
   max-width: 760px;
   border-top: 1px solid rgba(255, 255, 255, .1);
}

.of-seal {
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   font-size: 18px;
   color: #fff;
   background: linear-gradient(145deg, #2EC27E, #14803f);
   box-shadow: 0 0 0 4px rgba(46, 194, 126, .15);
}

.of-guar small {
   display: block;
   font-size: 13px;
   color: rgba(255, 255, 255, .6);
}

.of-guar b {
   display: block;
   font: 700 15px var(--f-d);
   color: #FFB88A;
}

.of-timer small {
   font: 700 11px var(--f-d);
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .55);
   white-space: nowrap;
}

.of-timer .tb-timer {
   width: 290px;
}

@media (max-width: 575px) {

   .op-now .op-label,
   .op-note {
      padding: 0;
   }

   .op-was {
      padding: 10px 0 0;
      border-left: 0;
      border-top: 1px solid rgba(255, 255, 255, .15);
   }
}

/* journey step 4 visual (icon only) + doc-worded monthly boxes */
.jv-coin {
   display: grid;
   place-items: center;
   width: 84px;
   height: 84px;
   border-radius: 50%;
   font-size: 36px;
   color: #0B0B0B;
   background: linear-gradient(145deg, #FFE27A, #FFA800);
   box-shadow: 0 0 0 8px rgba(255, 210, 63, .18), 0 0 30px rgba(255, 210, 63, .5);
   animation: drop 3s ease-in-out infinite;
}

.mth b {
   display: block;
   margin-top: 4px;
   font-size: 22px;
}

.of-guar b {
   font: 700 14px var(--f-d);
   color: #FFB88A;
}

.of-guar .of-seal {
   width: 30px;
   height: 30px;
   font-size: 13px;
   box-shadow: none;
}

/* ==========================================================================
   Demo — dark spotlight stage, browser-framed video
   ========================================================================== */
.demo {
   overflow: hidden;
   background:
      radial-gradient(50% 45% at 50% 62%, rgba(244, 81, 30, .32), transparent 70%),
      radial-gradient(40% 40% at 50% 0%, rgba(255, 176, 32, .12), transparent 70%),
      linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
      var(--grad-dark);
}

.demo-title {
   color: #fff;
   line-height: 1.3;
}

.demo .tilt-box {
   background: rgba(255, 255, 255, .04);
   color: #FFB878;
}

.demo-chip {
   padding: 9px 16px 9px 10px;
   font: 600 14px var(--f-d);
   color: #fff;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .14);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
}

.demo-chip i {
   display: grid;
   place-items: center;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   font-size: 11px;
   color: #fff;
   background: var(--grad);
}

.demo-stage::before {
   content: "";
   position: absolute;
   inset: 8% 4% -6%;
   z-index: 0;
   border-radius: 40px;
   background: radial-gradient(closest-side, rgba(244, 81, 30, .55), transparent);
   filter: blur(40px);
}

.demo-win {
   position: relative;
   z-index: 1;
   overflow: hidden;
   border-radius: 22px;
   background: #0B0B0B;
   border: 1px solid rgba(255, 176, 120, .3);
   box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 8px rgba(255, 255, 255, .04);
}

.demo-bar {
   padding: 12px 16px;
   background: linear-gradient(180deg, #1d1612, #140f0c);
   border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.demo-bar i {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: #FF5F57;
}

.demo-bar i:nth-child(2) {
   background: #FFBD2E;
}

.demo-bar i:nth-child(3) {
   background: #28C840;
}

.demo-win .video-in {
   aspect-ratio: 16 / 9;
   border-radius: 0;
}

.demo-watch {
   position: absolute;
   z-index: 2;
   top: -26px;
   right: -18px;
   width: 74px;
   height: 74px;
   border-radius: 50%;
   font-size: 30px;
   color: #0B0B0B;
   background: linear-gradient(145deg, #FFE27A, #FFA800);
   box-shadow: 0 0 0 8px rgba(255, 210, 63, .15), 0 16px 30px -10px rgba(0, 0, 0, .7);
   transform: rotate(12deg);
   animation: tick 2s steps(2) infinite;
}

@keyframes tick {
   50% {
      transform: rotate(18deg);
   }
}

.demo-hand svg {
   width: 56px;
   height: 38px;
   fill: none;
   stroke: #FFB878;
   stroke-width: 2.6;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.demo-hand .hand {
   color: #FFB878;
   font-size: clamp(26px, 3.4vw, 36px);
}

@media (max-width: 575px) {
   .demo-watch {
      width: 56px;
      height: 56px;
      font-size: 22px;
      top: -18px;
      right: -6px;
   }
}

/* demo on a light background */
.demo {
   /* background:
      radial-gradient(50% 45% at 50% 62%, rgba(244, 81, 30, .16), transparent 70%),
      radial-gradient(40% 40% at 50% 0%, rgba(255, 176, 32, .14), transparent 70%),
      linear-gradient(rgba(201, 58, 11, .05) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(90deg, rgba(201, 58, 11, .05) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(180deg, #FFF6EE, #fff 55%, #FFF6EE); */

    background: #fff url(../images/demo-bg.png) no-repeat center top / cover;
  padding: 100px 0 0px 0;
  overflow: hidden;
}

.demo-title {
   color: var(--ink);
}

.demo .tilt-box {
   color: var(--or-lo);
   background: #fff;
}

.demo-chip {
   color: var(--ink-2);
   background: #fff;
   border-color: var(--line);
   box-shadow: 0 8px 18px -12px rgba(120, 40, 5, .45);
}

.demo-stage::before {
   background: radial-gradient(closest-side, rgba(244, 81, 30, .35), transparent);
}

.demo-win {
   box-shadow: 0 50px 100px -40px rgba(120, 40, 5, .6), 0 0 0 8px rgba(255, 255, 255, .9);
}

.demo-hand svg {
   stroke: var(--or-lo);
}

.demo-hand .hand {
   color: var(--or-lo);
}

/* ==========================================================================
   3 steps — reference layout: white panel, full-width step bands,
   STEP tab + accent edge, interlocking grey copy / white media
   ========================================================================== */
.how {
   overflow: hidden;
background: #f1f2ef url(../images/demo-bg.png) no-repeat center top / cover;
  padding: 100px 0 0px 0;
  overflow: hidden;
}

.how .cta .fine {
   color: rgba(255, 255, 255, .65);
}

.sp-panel {
   overflow: hidden;
   border-radius: 34px;
   padding: 0 0 60px 0;
   background: #fff;
   box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .04);
}

.sp-head {
   max-width: 760px;
   padding: clamp(40px, 5vw, 64px) 20px clamp(32px, 4vw, 48px);
}

.sp-pill {
   display: inline-block;
   margin-top: .15em;
   padding: .02em .45em .08em;
   border-radius: .35em;
   text-transform: uppercase;
   letter-spacing: -.01em;
   color: var(--or-lo);
   background: linear-gradient(180deg, #FFE6D3, #FFD2B0);
   box-shadow: inset 0 -3px 0 rgba(201, 58, 11, .18);
}

.sp-row {
   --acc: var(--or);
   --acc-ink: #fff;
   position: relative;
   background: #F5F1ED;
}

.sp-2 {
   --acc: #0B0B0B;
}

.sp-3 {
   --acc: #FFB020;
   --acc-ink: #0B0B0B;
}

.sp-row::before {
   content: "";
   position: absolute;
   z-index: 3;
   top: 0;
   bottom: 0;
   left: 0;
   width: 4px;
   background: var(--acc);
}

.sp-2::before {
   left: auto;
   right: 0;
}

.sp-tag {
   position: absolute;
   z-index: 4;
   top: 0;
   left: 0;
   padding: 8px 18px;
   border-radius: 0 0 14px 0;
   font: 800 13px var(--f-d);
   letter-spacing: .06em;
   color: var(--acc-ink);
   background: var(--acc);
   box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4);
}

.sp-2 .sp-tag {
   left: auto;
   right: 0;
   border-radius: 0 0 0 14px;
}

.sp-copy {
   position: relative;
   padding: clamp(64px, 6vw, 84px) clamp(28px, 4.5vw, 64px) clamp(36px, 4vw, 56px);
}

.sp-ic {
   width: 54px;
   height: 54px;
   margin-bottom: 22px;
   border-radius: 16px;
   font-size: 22px;
   color: var(--acc-ink);
   background: var(--acc);
   box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .45);
}

.sp-1 .sp-ic {
   background: var(--grad);
}

.sp-title {
   margin-bottom: 14px;
   font: 900 clamp(34px, 4.4vw, 56px)/.98 var(--f-d);
   letter-spacing: -.035em;
   text-transform: uppercase;
   color: #0B0B0B;
}

.sp-text {
   max-width: 440px;
   font-size: 17px;
   line-height: 1.65;
   color: var(--muted);
}

/* white media card that curves into the grey band on the copy side */
.sp-media {
 position: relative;
  padding: clamp(14px, 2vw, 14px);
  background: #fff;
  border-radius: 17px 0 0 27px;
}

.sp-2 .sp-media {
   border-radius: 0 48px 48px 0;
}

.sp-media::before {
   content: "";
   position: absolute;
   inset: 18% 14%;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(244, 81, 30, .22), transparent);
   filter: blur(28px);
}

.sp-2 .sp-media::before {
   background: radial-gradient(closest-side, rgba(0, 0, 0, .14), transparent);
}

.sp-3 .sp-media::before {
   background: radial-gradient(closest-side, rgba(255, 176, 32, .3), transparent);
}

.sp-media .slot {
   position: relative;
   --r: 16 / 10;
   border-radius: 20px;
}

.sp-media .slot:has(img) {
   box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .45);
}

.sp-row+.sp-row {
   margin-top: 0;
}

@media (max-width: 991px) {

   .sp-media,
   .sp-2 .sp-media {
      border-radius: 36px 36px 0 0;
   }

   .sp-2::before {
      left: 0;
      right: auto;
   }

   .sp-2 .sp-tag {
      left: 0;
      right: auto;
      border-radius: 0 0 14px 0;
   }

   .sp-copy {
      padding-bottom: 36px;
   }
}

/* ==========================================================================
   Tester videos — details sit inside the video; hover plays and hides them
   ========================================================================== */
.vcard {
   border: 0;
   background: #0B0B0B;
   box-shadow: 0 30px 60px -30px rgba(120, 40, 5, .6);
}

.vwrap {
   cursor: pointer;
   border-radius: 24px;
   overflow: hidden;
}

.vwrap video {
   transition: transform .6s ease;
}

.vwrap::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, transparent 30%, transparent 50%, rgba(0, 0, 0, .85) 100%);
   transition: opacity .4s ease;
}

.vwrap .vplay {
   z-index: 2;
   transition: opacity .35s ease, transform .35s ease;
}

.vwrap.playing .vplay {
   display: block;
   opacity: 0;
   transform: scale(.7);
   pointer-events: none;
}

.vwrap .vinfo {
   position: absolute;
   z-index: 2;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 20px 22px 22px;
   color: #fff;
   transition: opacity .35s ease, transform .35s ease;
}

.vwrap .vinfo strong {
   color: #fff;
   font-size: 19px;
}

.vwrap .vinfo span {
   color: rgba(255, 255, 255, .78);
}

.vwrap .vinfo span::before {
   content: "\f3c5";
   margin-right: 6px;
   font: 900 12px "Font Awesome 6 Free";
   color: #FF8A3D;
}

.vwrap.playing::after {
   opacity: 0;
}

.vwrap.playing .vinfo {
   opacity: 0;
   transform: translateY(14px);
}

.vwrap.playing video {
   transform: scale(1.03);
}

.vsound {
   position: absolute;
   z-index: 3;
   top: 14px;
   right: 14px;
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border: 0;
   border-radius: 50%;
   font-size: 15px;
   color: #fff;
   background: rgba(0, 0, 0, .55);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   opacity: 0;
   transition: opacity .3s, background .3s;
}

.vwrap.playing .vsound {
   opacity: 1;
}

.vsound:hover {
   background: var(--or);
}

/* ==========================================================================
   Did you know — image-topped fact cards + highlight card
   ========================================================================== */
.facts2 {
   background: radial-gradient(40% 30% at 100% 0%, rgba(244, 81, 30, .1), transparent 70%), radial-gradient(40% 30% at 0% 100%, rgba(255, 176, 32, .12), transparent 70%), var(--cream);
}

.fact2 {
   overflow: hidden;
   border-radius: 26px;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: 0 24px 50px -32px rgba(120, 40, 5, .55);
   transition: transform .35s, box-shadow .35s;
}

.fact2:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow);
}

.fact2:hover .fact2-img img {
   /* transform: scale(1.05); */
}

.slot.fact2-img {
   --r: 16 / 10;
   border-radius: 0;
   border-width: 0 0 2px;
}

.slot.fact2-img:has(img) {
   box-shadow: none;
}

.fact2-img img {
   transition: transform .6s ease;
}

.fact2-body {
   position: relative;
   padding: 0 24px 22px;
}

.fact2-num {
   align-self: flex-start;
   margin-top: -30px;
   margin-bottom: 14px;
   padding: 8px 18px 10px;
   border-radius: 16px;
   background: #fff;
   box-shadow: 0 14px 28px -14px rgba(120, 40, 5, .55), 0 0 0 1px var(--line);
   position: relative;
   z-index: 2;
}

.fact2 p {
   font-size: 15.5px;
   line-height: 1.6;
   color: var(--ink-2);
}

.fact2 small {
   margin-top: 6px;
   padding-top: 14px;
   border-top: 1px dashed var(--line);
   font: 600 12.5px var(--f-b);
   color: var(--muted);
}

.fact2 small i {
   color: var(--or);
}

.fact2-hl {
   overflow: hidden;
   border-radius: 30px;
   background: var(--grad);
   box-shadow: 0 40px 80px -36px rgba(201, 58, 11, .9);
}

.slot.fact2-hl-img {
  --r: 21 / 11;
   border-radius: 0;
   border: 0;
   background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .1) 0 12px, transparent 12px 24px), rgba(0, 0, 0, .08);
   color: rgba(255, 255, 255, .85);
}

.slot.fact2-hl-img::before {
   color: #fff;
}

.fact2-hl-text {
   padding: clamp(24px, 3.5vw, 40px) clamp(20px, 5vw, 64px);
   font: 700 clamp(18px, 2.2vw, 24px)/1.5 var(--f-d);
   color: #fff;
}

@media (max-width: 575px) {
   .slot.fact2-hl-img {
      --r: 16 / 10;
   }
}

.fact2-num b {
   display: block;
   font: 900 clamp(30px, 3.4vw, 40px)/1 var(--f-d);
   letter-spacing: -.03em;
}

/* ==========================================================================
   Seller stories — magazine cards: image + overlaid result, lesson callout
   ========================================================================== */
.stories2 {
background: #f2eeff  url(../images/demo-bg.png) no-repeat center top / cover;
  padding: 100px 0 0px 0;
  overflow: hidden;
  color: #fff;
}


.story2-notice {
   padding: 14px 20px;
   border-radius: 16px;
  font-size: 16.5px;
   line-height: 1.55;
   color: var(--ink-2);
   background: #FFF8E1;
   border: 1px solid #F5D77A;
}

.story2-notice i {
   margin-top: 3px;
   font-size: 18px;
   color: #E0A000;
}

.story2 {
   overflow: hidden;
   border-radius: 28px;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: 0 26px 56px -34px rgba(120, 40, 5, .55);
   transition: transform .35s, box-shadow .35s;
}

.story2:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow);
}

.story2:hover .story2-img img {
   /* transform: scale(1.05); */
}

.slot.story2-img {
  --r: 16 / 12;
   border-radius: 0;
   border: 0;
   /* background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 12px, transparent 12px 24px), linear-gradient(160deg, #2b1a12, #0B0B0B); */
   color: rgba(255, 255, 255, .65);
}

.slot.story2-img:has(img) {
   box-shadow: none;
}

.story2-img img {
   transition: transform .6s ease;
}

.story2-media::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .78));
}

.story2-src {
   position: absolute;
   z-index: 2;
   top: 16px;
   left: 16px;
   padding: 6px 12px;
   border-radius: 99px;
   font: 700 11px var(--f-d);
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #fff;
   background: rgba(0, 0, 0, .45);
   border: 1px solid rgba(255, 255, 255, .2);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
}

.story2-src i {
   color: #FF8A3D;
   font-size: 13px;
}

.story2-num {
   position: absolute;
   z-index: 2;
   left: 22px;
   bottom: 14px;
   font: 900 clamp(44px, 5.4vw, 66px)/1 var(--f-d);
   letter-spacing: -.04em;
   background: linear-gradient(120deg, #FFB878, #FFD23F);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
}

.story2-num small {
   font-size: .38em;
   letter-spacing: 0;
}

.story2-body {
   padding: 24px 26px 26px;
}

.story2-body h3 {
   margin-bottom: 12px;
   font: 800 clamp(19px, 2vw, 22px)/1.3 var(--f-d);
}

.story2-body>p {
font-size: 17.5px;
   line-height: 1.65;
   color: var(--ink-2);
}

.story2-lesson {
   margin-top: 6px;
   padding: 16px 18px;
   border-radius: 18px;
font-size: 16.5px;
   line-height: 1.55;
   color: var(--ink-2);
   background: linear-gradient(135deg, #FFF1E5, #FFE2CC);
   border: 1px solid rgba(244, 81, 30, .2);
}

.story2-lesson b {
   color: var(--or-lo);
}

.story2-bulb {
   flex: none;
   width: 36px;
   height: 36px;
   border-radius: 12px;
   font-size: 15px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 8px 16px -6px rgba(201, 58, 11, .7);
}

/* ==========================================================================
   12 paydays — tear-off calendar pages, one image per month
   ========================================================================== */
.paydays {
   overflow: hidden;
background-color: #0a0309;
padding: 10px 0 0px 0;
  overflow: hidden;
  color: #fff;
}

.ring-plus {
   color: rgba(255, 255, 255, .8);
}

.cal-page {
   position: relative;
   padding-top: 10px;
   border-radius: 20px;
   background: #fff;
   box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .8);
   transition: transform .35s, box-shadow .35s;
}

.cal-page:hover {
   transform: translateY(-6px) rotate(-1deg);
   box-shadow: 0 30px 50px -22px rgba(244, 81, 30, .55);
}

.cal-page:hover .cal-img img {
   /* transform: scale(1.06); */
}

.cal-rings {
   position: absolute;
   z-index: 3;
   top: -9px;
   left: 22%;
   right: 22%;
}

.cal-rings i {
   width: 12px;
   height: 22px;
   border-radius: 8px;
   background: linear-gradient(180deg, #e9e2dc, #9d948c);
   box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35);
}

.cal-top {
   margin: 0 10px;
   padding: 9px 14px;
   border-radius: 12px 12px 0 0;
   color: #fff;
   background: #0B0B0B;
}

.cal-top span {
   font: 800 15px var(--f-d);
   letter-spacing: .14em;
}

.cal-top b {
   font: 900 13px var(--f-d);
   color: #FFB88A;
}

.col:nth-child(3n+1) .cal-top {
   background: var(--grad);
}

.col:nth-child(3n+1) .cal-top b {
   color: #fff;
   opacity: .8;
}

.slot.cal-img {
   /* --r: 4 / 3; */
   width: auto;
   margin: 0 10px;
   border-radius: 0 0 12px 12px;
   border-width: 0 1px 1px;
   font-size: 11px;
   padding: 10px;
}

.slot.cal-img::before {
   font-size: 22px;
}

.slot.cal-img:has(img) {
   box-shadow: none;
}

.cal-img img {
   /* transition: transform .6s ease; */
}

.cal-occ {
   min-height: 64px;
   padding: 12px 14px 16px;
   font: 700 14.5px/1.35 var(--f-d);
   color: var(--ink);
}

.cal-page.now {
   box-shadow: 0 0 0 4px var(--or), 0 30px 50px -20px rgba(244, 81, 30, .8);
}

.cal-page.now .cal-top {
   background: var(--grad);
}

.cal-page.now::after {
   content: "\f005";
   position: absolute;
   z-index: 3;
   top: 22px;
   right: -8px;
   width: 30px;
   height: 30px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font: 900 13px "Font Awesome 6 Free";
   color: #0B0B0B;
   background: #FFD23F;
   box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5);
}

.paydays .slot.cal-img {
   color: var(--muted);
   background: repeating-linear-gradient(45deg, rgba(244, 81, 30, .06) 0 12px, transparent 12px 24px), #FFF8F2;
   border-color: rgba(201, 58, 11, .3);
}

.cal-page.now::after {
   top: -12px;
   right: -12px;
}

/* ==========================================================================
   Struggle vs freedom — before / after comparison
   ========================================================================== */
.sf2-sec {
   background: radial-gradient(40% 40% at 100% 50%, rgba(244, 81, 30, .1), transparent 70%), radial-gradient(35% 40% at 0% 50%, rgba(120, 120, 120, .08), transparent 70%), #fff;
   padding: 100px 0 0px 0;
}

.sf2 {
   position: relative;
   overflow: hidden;
   border-radius: 30px;
   background: #fff;
   transition: transform .35s, box-shadow .35s;
}

.sf2-bad {
   background: #F6F4F2;
   border: 1px solid #E6E1DC;
}

.sf2-good {
   isolation: isolate;
   border: 2px solid transparent;
   background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #FF8A3D, #F4511E 45%, #FFD23F) border-box;
   box-shadow: 0 40px 80px -40px rgba(244, 81, 30, .7);
}

.sf2-good::after {
   content: "";
   position: absolute;
   z-index: -1;
   inset: auto -20% -30% -20%;
   height: 60%;
   background: radial-gradient(closest-side, rgba(255, 176, 32, .18), transparent);
}

.sf2:hover {
   transform: translateY(-6px);
}

.slot.sf2-img {
   --r: 16 / 12;
   border-radius: 0;
   border: 0;
   border-bottom: 1px solid var(--line);
}

.slot.sf2-img:has(img) {
   box-shadow: none;
}

.sf2-bad .slot.sf2-img {
   color: #8a827b;
   background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .04) 0 12px, transparent 12px 24px), #ECE8E4;
   border-color: #E0DAD4;
}

.sf2-bad .slot.sf2-img::before {
   color: #a39a92;
}

.sf2-bad .sf2-img img {
   filter: grayscale(1) contrast(.95);
   opacity: .85;
}

.sf2-media::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 40%);
   z-index: 1;
}

.sf2-tag {
   position: absolute;
   z-index: 2;
   top: 16px;
   left: 16px;
   padding: 7px 14px;
   border-radius: 99px;
   font: 800 11.5px var(--f-d);
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #fff;
   box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5);
}

.sf2-bad .sf2-tag {
   background: var(--bad);
}

.sf2-good .sf2-tag {
   background: var(--ok);
}

.sf2-body {
   padding: clamp(24px, 3vw, 36px);
}

.sf2-body h3 {
   margin-bottom: 22px;
   font: 800 clamp(22px, 2.5vw, 29px)/1.25 var(--f-d);
   letter-spacing: -.02em;
}

.sf2-bad h3 {
   color: #3d3833;
}

.sf2-list p {
   font-size: 16px;
   line-height: 1.65;
   color: var(--ink-2);
}

.sf2-bad .sf2-list p {
   color: #6b645e;
}

.sf2-good .sf2-list b {
   color: var(--or-lo);
   background: linear-gradient(transparent 60%, #FFE6D3 60%);
}

.sf2-mk {
   flex: none;
   width: 28px;
   height: 28px;
   margin-top: 1px;
   border-radius: 50%;
   font-size: 12px;
   color: #fff;
}

.sf2-bad .sf2-mk {
   background: #d8d2cc;
   color: var(--bad);
}

.sf2-good .sf2-mk {
   background: var(--grad);
   box-shadow: 0 6px 12px -4px rgba(201, 58, 11, .7);
}

.sf2-vs {
   position: absolute;
   z-index: 5;
   left: 50%;
   top: 50%;
   width: 78px;
   height: 78px;
   padding: 0;
   translate: -50% -50%;
   flex-direction: column;
   border-radius: 50%;
   color: #fff;
   background: #0B0B0B;
   box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line), 0 0 40px rgba(244, 81, 30, .5);
}

.sf2-vs b {
   font: 900 20px/1 var(--f-d);
   letter-spacing: .02em;
}

.sf2-vs i {
   margin-top: 3px;
   font-size: 12px;
   color: #FF8A3D;
}

/* ==========================================================================
   Sleep shift — night sky to sunrise, notification-card timeline
   ========================================================================== */
.night2 {
position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #0a0309 0%, #0a0309 30%, #0a0309 55%, #3b1830 75%, #fff 92%, #fff 100%);
}

.night2::before,
.night2::after {
   content: "";
   position: absolute;
   inset: 0 0 35% 0;
   pointer-events: none;
   background-repeat: repeat;
}

.night2::before {
   background-image: radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent), radial-gradient(1.2px 1.2px at 140px 90px, #fff, transparent), radial-gradient(1.8px 1.8px at 260px 160px, #ffe, transparent), radial-gradient(1px 1px at 330px 50px, #fff, transparent), radial-gradient(1.2px 1.2px at 80px 200px, #fff, transparent);
   background-size: 360px 240px;
   opacity: .7;
   animation: twinkle 4s ease-in-out infinite;
}

.night2::after {
   background-image: radial-gradient(1px 1px at 60px 60px, #fff, transparent), radial-gradient(1.4px 1.4px at 200px 20px, #fff, transparent), radial-gradient(1px 1px at 300px 140px, #fff, transparent);
   background-size: 420px 200px;
   opacity: .45;
   animation: twinkle 6s ease-in-out infinite reverse;
}

@keyframes twinkle {
   50% {
      opacity: .2;
   }
}

.nt-moon {
position: absolute;
  top: 16%;
  right: 8%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe8, #f3e2a6 60%, #d9c27a);
  box-shadow: 0 0 60px 20px rgba(255, 236, 170, .25), 0 0 140px 60px rgba(255, 236, 170, .1);
}

.nt-moon::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .08) 8%, transparent 9%), radial-gradient(circle at 40% 70%, rgba(0, 0, 0, .06) 6%, transparent 7%);
}

.night2 h2 {
   color: #fff;
}

.night2 .kicker {
   background: rgba(255, 255, 255, .1);
   color: #FFE7A3;
}

.night2 .fine {
   color: rgba(255, 255, 255, .7);
}

/* phone frame around the image slot */
.nt-phone {
   position: relative;
   max-width: 300px;
   margin: 0 auto;
   padding: 12px;
   border-radius: 46px;
   background: linear-gradient(160deg, #2a2a35, #0b0b12);
   box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 60px rgba(124, 92, 255, .2);
}

@media (min-width: 992px) {
   .nt-phone {
      position: sticky;
      top: 120px;
   }
}

.nt-notch {
   position: absolute;
   z-index: 3;
   top: 22px;
   left: 50%;
   width: 90px;
   height: 24px;
   translate: -50% 0;
   border-radius: 99px;
   background: #000;
}

.slot.nt-screen {
   --r: 9 / 19;
   border-radius: 36px;
   border: 0;
   color: rgba(255, 255, 255, .7);
   background: radial-gradient(80% 50% at 50% 0%, rgba(124, 92, 255, .35), transparent 70%), linear-gradient(180deg, #14122e, #050510);
}

.slot.nt-screen:has(img) {
   box-shadow: none;
}

/* timeline */
.nt-line {
   position: relative;
   padding-left: 70px;
}

.nt-line::before {
   content: "";
   position: absolute;
   left: 25px;
   top: 10px;
   bottom: 10px;
   width: 3px;
   border-radius: 3px;
   background: linear-gradient(180deg, #7B8CFF, #A46BFF 40%, var(--or) 75%, #FFD23F);
   box-shadow: 0 0 14px rgba(164, 107, 255, .6);
}

.nt-item {
   position: relative;
   margin-bottom: 18px;
}

.nt-item:last-child {
   margin-bottom: 0;
}

.nt-node {
   position: absolute;
   left: -70px;
   top: 50%;
   width: 52px;
   height: 52px;
   translate: 0 -50%;
   border-radius: 50%;
   font-size: 19px;
   color: #FFE7A3;
   background: #14102a;
   border: 2px solid rgba(164, 107, 255, .7);
   box-shadow: 0 0 18px rgba(164, 107, 255, .5);
}

.nt-day .nt-node {
   color: #fff;
   background: linear-gradient(145deg, #FFD23F, #FF8A3D);
   border-color: #fff;
   box-shadow: 0 0 24px rgba(255, 176, 32, .8);
}

.nt-card {
   padding: 16px 18px;
   border-radius: 20px;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .16);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .8);
   transition: transform .3s, background .3s;
}

.nt-card:hover {
   transform: translateX(6px);
   background: rgba(255, 255, 255, .16);
}

.nt-app {
   flex: none;
   width: 42px;
   height: 42px;
   border-radius: 12px;
   font-size: 17px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 8px 16px -6px rgba(201, 58, 11, .8);
}

.nt-item:nth-child(3) .nt-app {
   background: linear-gradient(145deg, #3a3a48, #15151d);
}

.nt-day .nt-app {
   background: linear-gradient(145deg, #FFD23F, #FFA800);
   color: #0B0B0B;
}

.nt-time {
   font: 800 12px var(--f-d);
   letter-spacing: .12em;
   color: rgba(255, 255, 255, .6);
}

.nt-card p {
   margin-top: 3px;
   font: 600 16px/1.45 var(--f-d);
   color: #fff;
}

.nt-day .nt-card {
   background: rgba(255, 255, 255, .95);
   border-color: transparent;
}

.nt-day .nt-card p {
   color: var(--ink);
}

.nt-day .nt-time {
   color: var(--or-lo);
}

@media (max-width: 575px) {
   .nt-line {
      padding-left: 58px;
   }

   .nt-line::before {
      left: 20px;
   }

   .nt-node {
      left: -58px;
      width: 44px;
      height: 44px;
      font-size: 16px;
   }

   .nt-moon {
      display: none;
   }
}

@media (max-width: 991px) {
   .nt-phone {
      max-width: 230px;
   }
}

/* ==========================================================================
   Features — one premium card per row, text | image, alternating
   ========================================================================== */
.feats {
background: #fff url(../images/demo-bg.png) no-repeat center top / cover;
  padding: 100px 0 0px 0;
  overflow: hidden;
  color: #000;
}

.feat-list {
   max-width: 1080px;
   max-width: 1240px;
}

.feat {
   position: relative;
   overflow: hidden;
   border-radius: 30px;
   background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgba(244, 81, 30, .35), rgba(201, 58, 11, .08) 40%, rgba(255, 176, 32, .35)) border-box;
   border: 1.5px solid transparent;
   box-shadow: 0 30px 60px -40px rgba(120, 40, 5, .55);
   transition: transform .35s, box-shadow .35s;
}

.feat:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow);
}

.feat:hover .feat-media img {
   /* transform: scale(1.04); */
}

.feat-copy {
   position: relative;
   padding: clamp(28px, 4vw, 56px);
}

.feat-copy::before {
   content: "";
   position: absolute;
   top: -60px;
   left: -60px;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(244, 81, 30, .1), transparent);
}

.feat-ic {
   position: relative;
   flex: none;
   width: 58px;
   height: 58px;
   border-radius: 18px;
   font-size: 24px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 14px 26px -10px rgba(201, 58, 11, .75);
}

.feat:nth-child(even) .feat-ic {
   background: linear-gradient(135deg, #2a2522, #0B0B0B);
   box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .55);
}

.feat-n {
   font: 900 15px var(--f-d);
   letter-spacing: .14em;
   color: rgba(201, 58, 11, .55);
}

.feat-n::before {
   content: "";
   display: inline-block;
   width: 28px;
   height: 2px;
   margin-right: 10px;
   vertical-align: middle;
   background: currentColor;
}

.feat-copy h3 {
   position: relative;
   margin-bottom: 12px;
   font: 800 clamp(24px, 2.8vw, 34px)/1.15 var(--f-d);
   letter-spacing: -.025em;
}

.feat-copy p {
   position: relative;
   max-width: 440px;
   font-size: 17px;
   line-height: 1.7;
   color: var(--muted);
}

.feat-media {
   padding: clamp(14px, 2vw, 22px);
   background: linear-gradient(160deg, #FFF3E8, #FFE2CC);
}

.feat:nth-child(even) .feat-media {
   background: linear-gradient(160deg, #F7F3EF, #EDE6DF);
}

.feat-media .slot {
   --r: 16 / 10;
   border-radius: 20px;
}

.feat-media img {
   transition: transform .6s ease;
}

/* highlighted feature (Gift Traffic Kit) */
.feat-hot {
   background: var(--grad);
   border: 0;
   box-shadow: 0 40px 80px -36px rgba(201, 58, 11, .9);
}

.feat-hot .feat-copy h3,
.feat-hot .feat-copy p {
   color: #fff;
}

.feat-hot .feat-copy p {
   opacity: .92;
}

.feat-hot .feat-ic {
   color: var(--or-lo) !important;
   background: #fff !important;
}

.feat-hot .feat-n {
   color: rgba(255, 255, 255, .75);
}

.feat-hot .feat-media {
   background: rgba(0, 0, 0, .12);
}

.feat-hot .feat-media .slot {
   color: rgba(255, 255, 255, .85);
   background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .1) 0 12px, transparent 12px 24px), rgba(255, 255, 255, .06);
   border-color: rgba(255, 255, 255, .55);
}

.feat-hot .feat-media .slot::before {
   color: #fff;
}

/* features — premium pass: dark stage, stacking deck, ghost numbers, browser frames */
.feats {
background: #fff url(../images/demo-bg.png) no-repeat center top / cover;
  padding: 100px 0 0px 0;
  overflow: hidden;
  color: #000;
}

.feats .head h2 {
   color: #fff;
}

.feats .head .sub-lead {
   color: rgba(255, 255, 255, .72);
}

.feats .head .hand {
   color: #FFB878;
}

.feat {
   border: 1px solid rgba(255, 255, 255, .6);
   background: linear-gradient(160deg, #fff 55%, #FFF7F0);
   box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, .7), 0 40px 80px -40px rgba(0, 0, 0, .9);
}

.feat::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(244, 81, 30, .12);
}

@media (min-width: 992px) {
   .feat-list {
      gap: 28px !important;
      padding-bottom: 40px;
   }

   .feat {
      position: sticky;
      top: calc(90px + var(--k) * 10px);
   }

   .feat:hover {
      transform: none;
   }
}

.feat-ghost {
   position: absolute;
   right: 18px;
   bottom: -18px;
   font: 900 clamp(120px, 14vw, 200px)/1 var(--f-d);
   letter-spacing: -.06em;
   color: transparent;
   -webkit-text-stroke: 2px rgba(244, 81, 30, .1);
   pointer-events: none;
   user-select: none;
}

.feat-copy {
   overflow: hidden;
}

.feat-copy h3 {
   display: inline-block;
   padding-bottom: 10px;
   background: linear-gradient(90deg, var(--or), #FFB020) no-repeat left bottom / 64px 4px;
}

.feat-media {
   position: relative;
   overflow: hidden;
  padding: clamp(20px, 3vw, 20px);
   background: radial-gradient(70% 70% at 50% 50%, rgba(244, 81, 30, .2), transparent 70%), linear-gradient(160deg, #1d1410, #0B0B0B) !important;
}

.feat:nth-child(even) .feat-media {
   background: radial-gradient(70% 70% at 50% 50%, rgba(255, 176, 32, .22), transparent 70%), linear-gradient(160deg, #FFE8D6, #FFD0AE) !important;
}

.feat-win {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   background: #fff;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .15);
   transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
   transition: transform .5s ease;
}

.feat:nth-child(even) .feat-win {
   transform: perspective(1200px) rotateY(6deg) rotateX(2deg);
}

.feat:hover .feat-win {
   transform: none;
}

.feat-bar {
   padding: 9px 12px;
   background: #F3ECE6;
   border-bottom: 1px solid var(--line);
}

.feat-bar i {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #FF5F57;
}

.feat-bar i:nth-child(2) {
   background: #FFBD2E;
}

.feat-bar i:nth-child(3) {
   background: #28C840;
}

.feat-win .slot {
   border-radius: 0;
   border: 0;
}

.feat-win .slot:has(img) {
   box-shadow: none;
}

.feat-hot {
   border-color: rgba(255, 200, 160, .6);
   background: var(--grad);
}

.feat-hot .feat-ghost {
   -webkit-text-stroke-color: rgba(255, 255, 255, .22);
}

.feat-hot .feat-copy h3 {
   background-image: linear-gradient(90deg, #fff, #FFD23F);
}

.feat-hot .feat-media {
   background: rgba(0, 0, 0, .18) !important;
}

.feat-hot .feat-win .slot {
   color: var(--muted);
   background: repeating-linear-gradient(45deg, rgba(244, 81, 30, .06) 0 12px, transparent 12px 24px), #FFF8F2;
   border: 0;
}

.feat-hot .feat-win .slot::before {
   color: var(--or);
}





.audience {
background: #f1f2ef;

  padding: 50px 0 50px 0;

 

}
/* ==========================================================================
   We've got you covered — hub: image centre, benefit tiles either side
   ========================================================================== */
.cover2 {
   overflow: hidden;
   background: radial-gradient(35% 45% at 50% 55%, rgba(244, 81, 30, .14), transparent 70%), radial-gradient(30% 30% at 0% 0%, rgba(255, 176, 32, .1), transparent 70%), var(--cream);
}

.cv2 {
   position: relative;
   padding: 16px 18px;
   border-radius: 18px;
   font: 600 15.5px/1.4 var(--f-d);
   color: var(--ink);
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: 0 14px 30px -20px rgba(120, 40, 5, .5);
   transition: transform .3s, box-shadow .3s, border-color .3s;
}

.cv2:hover {
   border-color: rgba(244, 81, 30, .45);
   box-shadow: 0 20px 36px -18px rgba(201, 58, 11, .5);
}

.cv2-l:hover {
   transform: translateX(6px);
}

.cv2-r:hover {
   transform: translateX(-6px);
}

.cv2-ic {
   flex: none;
   width: 46px;
   height: 46px;
   border-radius: 14px;
   font-size: 19px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 10px 20px -8px rgba(201, 58, 11, .75);
}

.cv2:nth-child(even) .cv2-ic {
   background: linear-gradient(135deg, #2a2522, #0B0B0B);
   box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .55);
}

@media (min-width: 992px) {
   .cv2-r {
      flex-direction: row-reverse;
      text-align: right;
   }

   .cv2::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 26px;
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--or) 0 5px, transparent 5px 9px);
   }

   .cv2-l::after {
      right: -27px;
   }

   .cv2-r::after {
      left: -27px;
   }
}

.cv2-hub {
   position: relative;
   padding: 14px;
   border-radius: 36px;
   background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #FF8A3D, #F4511E 50%, #FFD23F) border-box;
   border: 2px solid transparent;
   box-shadow: 0 0 0 10px rgba(244, 81, 30, .07), 0 0 0 22px rgba(244, 81, 30, .04), 0 40px 80px -30px rgba(201, 58, 11, .6);
}

.cv2-hub::before {
   content: "";
   position: absolute;
   inset: -40px;
   z-index: -1;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(244, 81, 30, .25), transparent);
   filter: blur(20px);
}

.slot.cv2-img {
   --r: 4 / 5;
   border-radius: 26px;
}

.cv2-bar {
   padding: 18px 26px;
   border-radius: 20px;
   font: 800 clamp(16px, 1.9vw, 20px)/1.4 var(--f-d);
   color: #fff;
   background: linear-gradient(120deg, #0B0B0B, #2b140a);
   border: 1px solid rgba(255, 176, 120, .3);
   box-shadow: 0 24px 46px -24px rgba(0, 0, 0, .7);
}

.cv2-bar i {
   flex: none;
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   font-size: 16px;
   color: #0B0B0B;
   background: linear-gradient(145deg, #FFE27A, #FFA800);
}

@media (max-width: 991px) {
   .cv2-hub {
      max-width: 340px;
      margin: 0 auto 10px;
   }

   .slot.cv2-img {
      --r: 4 / 3;
   }
}

/* ==========================================================================
   Simple interface — zigzag rows on a centre spine, tilted image stages
   ========================================================================== */
.ifx-list {
   display: flex;
   flex-direction: column;
   gap: clamp(36px, 5vw, 64px);
}

@media (min-width: 992px) {
   .ifx-list::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 20px;
      bottom: 20px;
      width: 2px;
      translate: -50% 0;
      background: repeating-linear-gradient(180deg, rgba(244, 81, 30, .55) 0 8px, transparent 8px 16px);
   }
}

.ifx {
   --acc: var(--or);
   --tint: linear-gradient(150deg, #FFE7D4, #FFC9A0);
   position: relative;
}

.ifx-2 {
   --acc: #0B0B0B;
   --tint: linear-gradient(150deg, #2b211c, #0B0B0B);
}

.ifx-3 {
   --acc: #FFA800;
   --tint: linear-gradient(150deg, #FFF1C9, #FFD77A);
}

.ifx-4 {
   --acc: #C93A0B;
   --tint: linear-gradient(150deg, #FFD9C4, #F4865A);
}

.ifx-node {
   position: absolute;
   z-index: 3;
   left: 50%;
   top: 50%;
   width: 54px;
   height: 54px;
   translate: -50% -50%;
   border-radius: 50%;
   font: 900 16px var(--f-d);
   color: #fff;
   background: var(--acc);
   box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line), 0 12px 24px -8px rgba(0, 0, 0, .4);
}

.ifx-3 .ifx-node {
   color: #0B0B0B;
}

.ifx-media {
   padding: 0 clamp(0px, 3vw, 44px);
}

.ifx-stage {
   padding: clamp(18px, 2.4vw, 30px);
   border-radius: 30px;
   background: var(--tint);
   box-shadow: 0 30px 60px -34px rgba(120, 40, 5, .6);
}

.slot.ifx-img {
--r: 16 / 9;
   border-radius: 18px;
   transform: rotate(-2deg);
   transition: transform .5s ease;
   box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .55);
}

.ifx:nth-child(even) .slot.ifx-img {
   transform: rotate(2deg);
}

.ifx:hover .slot.ifx-img {
   transform: none;
}

.ifx-2 .slot.ifx-img {
   color: rgba(255, 255, 255, .7);
   background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 12px, transparent 12px 24px), rgba(255, 255, 255, .05);
   border-color: rgba(255, 176, 120, .45);
}

.ifx-chip {
   position: absolute;
   z-index: 2;
   bottom: -16px;
   left: 50%;
   translate: -50% 0;
   padding: 9px 16px;
   border-radius: 99px;
   white-space: nowrap;
   font: 800 13px var(--f-d);
   color: #fff;
   background: #0B0B0B;
   box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .55);
}

.ifx-chip i {
   color: #FF8A3D;
}

.ifx-2 .ifx-chip {
   background: var(--grad);
}

.ifx-2 .ifx-chip i {
   color: #fff;
}

.ifx-copy {
   padding: 30px clamp(0px, 3vw, 44px) 0;
}

@media (min-width: 992px) {
   .ifx-copy {
      padding-top: 0;
   }
}

.ifx-card {
   position: relative;
   padding: clamp(24px, 3vw, 38px);
   border-radius: 26px;
   background: #fff;
   border: 1px solid var(--line);
   border-top: 4px solid var(--acc);
   box-shadow: 0 24px 48px -32px rgba(120, 40, 5, .5);
}

.ifx-ic {
   width: 52px;
   height: 52px;
   margin-bottom: 16px;
   border-radius: 16px;
   font-size: 21px;
   color: #fff;
   background: var(--acc);
   box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .45);
}

.ifx-1 .ifx-ic {
   background: var(--grad);
}

.ifx-3 .ifx-ic {
   color: #0B0B0B;
}

.ifx-card h3 {
   margin-bottom: 16px;
   font: 800 clamp(22px, 2.5vw, 28px)/1.2 var(--f-d);
   letter-spacing: -.02em;
}

.ifx-card li {
   font-size: 16.5px;
   line-height: 1.5;
   color: var(--ink-2);
}

.ifx-card li i {
   margin-top: 4px;
   font-size: 15px;
   color: var(--acc);
}

.ifx-1 .ifx-card li i {
   color: var(--or);
}

/* ==========================================================================
   Hot niches — image tile wall
   ========================================================================== */
.niches2 {
   background: radial-gradient(40% 30% at 50% 0%, rgba(244, 81, 30, .1), transparent 70%), var(--cream);
}

.niche-tile {
   position: relative;
   overflow: hidden;
   border-radius: 20px;
   background: #fff;
   border: 2px solid #fff;
   box-shadow: 0 16px 32px -22px rgba(120, 40, 5, .55);
   transition: transform .35s, border-color .35s, box-shadow .35s;
}

.niche-tile:hover {
   transform: translateY(-6px);
   border-color: var(--or);
   box-shadow: 0 24px 40px -20px rgba(201, 58, 11, .55);
}

.niche-tile:hover img {
   /* transform: scale(1.08); */
}

.slot.niche-img {
   --r: 1;
   border-radius: 0;
   border: 0;
   padding: 10px 10px 46px;
   font-size: 9.5px;
}

.slot.niche-img::before {
   font-size: 22px;
}

.slot.niche-img:has(img) {
   box-shadow: none;
   padding: 0;
}

.niche-img img {
   transition: transform .6s ease;
}

.niche-tile figcaption {
   position: absolute;
   z-index: 2;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 30px 12px 12px;
   font: 700 13.5px/1.25 var(--f-d);
   color: #fff;
   text-align: center;
   background: linear-gradient(180deg, transparent, rgba(11, 11, 11, .88) 55%);
}

.col:nth-child(4n+1) .niche-tile figcaption {
   background: linear-gradient(180deg, transparent, rgba(201, 58, 11, .92) 55%);
}

.niche-note {
   padding: 16px 22px;
   border-radius: 18px;
   font-size: 18px;
   line-height: 1.55;
   color: var(--ink-2);
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: 0 14px 30px -22px rgba(120, 40, 5, .5);
}

.niche-note i {
   flex: none;
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   border-radius: 12px;
   font-size: 17px;
   color: #fff;
   background: var(--grad);
}

/* ==========================================================================
   Profit math — calculator device, gift-tag image, stat tiles
   ========================================================================== */
.profit2 {
   /* overflow: hidden;
   background:
      radial-gradient(40% 40% at 70% 50%, rgba(30, 158, 90, .18), transparent 70%),
      radial-gradient(40% 35% at 20% 30%, rgba(244, 81, 30, .22), transparent 70%),
      linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
      var(--grad-dark); */
      overflow: hidden;
  background: radial-gradient(40% 40% at 70% 50%, rgb(10, 3, 9), #0a0309ed 70%), radial-gradient(40% 35% at 20% 30%, rgba(244, 81, 30, .22), transparent 70%), linear-gradient(rgba(255, 255, 255, 0.5) 1px, #0d0b0b85 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(255, 255, 255, 0.79) 1px, #fff0 1px) 0 0 / 44px 44px, var(--grad-dark);
}

.profit2 .fine {
   color: rgba(255, 255, 255, .6);
}

/* gift tag around the image */
.p2-tag {
   position: relative;
   max-width: 420px;
   margin: 0 auto;
   padding: 46px 16px 16px;
   border-radius: 26px 26px 26px 26px;
   background: linear-gradient(160deg, #FFF3E8, #FFD9BF);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
   transform: rotate(-3deg);
   transition: transform .5s;
}

.p2-tag:hover {
   transform: rotate(0);
}

.p2-tag::before {
   content: "";
   position: absolute;
   top: -70px;
   left: 50%;
   width: 2px;
   height: 80px;
   background: linear-gradient(180deg, transparent, #FFB878);
}

.p2-hole {
   position: absolute;
   top: 14px;
   left: 50%;
   width: 18px;
   height: 18px;
   translate: -50% 0;
   border-radius: 50%;
   background: #120d0a;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 4px #FFB878;
}

.p2-tag .slot {
   border-radius: 18px;
}

/* calculator body */
.calc2 {
   padding: 18px;
   border-radius: 30px;
   background: linear-gradient(160deg, #26201c, #0f0c0a);
   border: 1px solid rgba(255, 255, 255, .1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(0, 0, 0, .95);
}

.calc2-lcd {
   height: 86px;
   margin-bottom: 14px;
   padding: 0 22px;
   border-radius: 16px;
   background: linear-gradient(180deg, #0c2a1a, #0a1f14);
   border: 1px solid rgba(46, 194, 126, .3);
   box-shadow: inset 0 4px 16px rgba(0, 0, 0, .7);
}

.calc2-lcd b {
   font: 700 clamp(40px, 5vw, 56px)/1 "Courier New", monospace;
   letter-spacing: -.02em;
   color: #4ff0a0;
   text-shadow: 0 0 14px rgba(79, 240, 160, .7);
}

.calc2 .calc {
   border: 0;
   border-radius: 18px;
   box-shadow: none;
   background: #FFFDF8 repeating-linear-gradient(transparent 0 48px, rgba(0, 0, 0, .025) 48px 49px);
}

.calc2 .calc-row b {
   font-weight: 700;
}

.calc2 .calc-total {
   background: linear-gradient(135deg, #14803f, #2EC27E);
}

.calc2 .calc-total b {
   text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.calc2-keys {
   margin-top: 14px;
}

.calc2-keys i {
   flex: 1;
   height: 26px;
   border-radius: 9px;
   background: linear-gradient(180deg, #3a322c, #241e1a);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 #0b0908;
}

.calc2-keys i.eq {
   flex: 1.6;
   background: var(--grad);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #7a2406;
}

/* monthly stat tiles */
.profit2 .mth {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 26px 20px;
   color: rgba(255, 255, 255, .78);
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 22px;
}

.profit2 .mth i {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   margin-bottom: 4px;
   border-radius: 14px;
   font-size: 18px;
   color: #fff;
   background: rgba(244, 81, 30, .25);
}

.profit2 .mth b {
   font-size: 24px;
   color: #4ff0a0;
}

.profit2 .mth.last {
   color: #fff;
   background: var(--grad);
   border: 0;
}

.profit2 .mth.last i {
   background: rgba(255, 255, 255, .2);
}

.calc2 .calc {
   color: var(--ink);
}

.profit2 .p2-tag .slot {
   color: var(--muted);
   background: repeating-linear-gradient(45deg, rgba(244, 81, 30, .06) 0 12px, transparent 12px 24px), rgba(255, 255, 255, .5);
   border-color: rgba(201, 58, 11, .35);
}

/* ==========================================================================
   Perfect for you — check list + who-it's-for panel with ribbon labels
   ========================================================================== */
.pf2 {
   background: radial-gradient(40% 30% at 50% 0%, rgba(244, 81, 30, .1), transparent 70%), #F7F5F2;
}

.pf2-tick {
   padding: 14px 18px;
   border-radius: 16px;
   font: 600 15.5px/1.45 var(--f-d);
   color: var(--ink);
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: 0 12px 26px -20px rgba(120, 40, 5, .5);
}

.pf2-tick i {
   flex: none;
   display: grid;
   place-items: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   font-size: 13px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 6px 12px -4px rgba(201, 58, 11, .7);
}

.pf2-panel {
   overflow: hidden;
   border-radius: 28px;
   background: #fff;
   border: 1px solid #E8E2DC;
   box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .45), 0 0 0 10px rgba(255, 255, 255, .6);
}

.pf2-cell {
   padding: 26px 16px 24px;
   border-right: 1px solid #EEE8E2;
   border-bottom: 1px solid #EEE8E2;
   transition: background .3s;
}

.pf2-cell:hover {
   background: radial-gradient(80% 70% at 50% 40%, #FFF3E8, #fff);
}

.pf2-cell:hover .pf2-img img {
   transform: translateY(-6px) scale(1.04);
}

@media (min-width: 992px) {
   .pf2-cell:nth-child(4n) {
      border-right: 0;
   }

   .pf2-cell:nth-child(n+5) {
      border-bottom: 0;
   }
}

@media (max-width: 991px) {
   .pf2-cell:nth-child(2n) {
      border-right: 0;
   }
}

.pf2-art {
   padding-bottom: 18px;
}

.pf2-art::before {
   content: "";
   position: absolute;
   left: 15%;
   right: 15%;
   top: 8%;
   bottom: 25%;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(255, 176, 32, .28), transparent);
}

.slot.pf2-img {
   position: relative;
   --r: 4 / 3;
   border-radius: 16px;
   font-size: 9.5px;
   padding: 8px 8px 30px;
}

.slot.pf2-img::before {
   font-size: 22px;
}

.slot.pf2-img:has(img) {
   padding: 0;
   border: 0;
   background: none;
   box-shadow: none;
}

.pf2-img img {
   object-fit: contain;
   transition: transform .5s ease;
}

/* folded ribbon banner */
.pf2-ribbon {
   --rc: var(--or);
   --rd: #8f2a07;
   position: absolute;
   z-index: 2;
   left: 4%;
   right: 4%;
   bottom: 4px;
   padding: 9px 22px 10px;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font: 700 12.5px/1.2 var(--f-d);
   color: #fff;
   background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 80%, #fff), var(--rc));
   clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
   transform: perspective(300px) rotateX(10deg) rotate(-2deg);
   filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
}

.pf2-c2 .pf2-ribbon {
   --rc: #0B0B0B;
}

.pf2-c3 .pf2-ribbon {
   --rc: #E08A00;
}

.pf2-c4 .pf2-ribbon {
   --rc: #C93A0B;
}

.pf2-c5 .pf2-ribbon {
   --rc: #2a2522;
}

.pf2-c6 .pf2-ribbon {
   --rc: #F4511E;
}

.pf2-c7 .pf2-ribbon {
   --rc: #FFA800;
   color: #0B0B0B;
}

.pf2-c8 .pf2-ribbon {
   --rc: #7a2406;
}

.pf2-why {
margin-top: 12px;
  font: 600 17.5px/1.4 var(--f-d);
  color: var(--ink-2);
}

@media (max-width: 575px) {
   .pf2-ribbon {
      white-space: normal;
      padding: 7px 16px 8px;
      font-size: 11px;
      line-height: 1.2;
   }

   .pf2-cell {
      padding: 20px 10px;
   }
}

/* perfect for — image left, points right, who-it's-for heading */
.pf2-hero {
   position: relative;
   padding: 14px;
   border-radius: 32px;
   background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #FF8A3D, #F4511E 50%, #FFD23F) border-box;
   border: 2px solid transparent;
   box-shadow: 0 40px 80px -40px rgba(201, 58, 11, .6);
}

.pf2-hero::before {
   content: "";
   position: absolute;
   inset: -30px;
   z-index: -1;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(244, 81, 30, .2), transparent);
   filter: blur(20px);
}

.slot.pf2-hero-img {
   --r: 4 / 4.2;
   border-radius: 22px;
}

.pf2-tick {
   transition: transform .3s, border-color .3s;
}

.pf2-tick:hover {
   transform: translateX(6px);
   border-color: rgba(244, 81, 30, .45);
}

.pf2-who-head {
   margin: clamp(30px, 4vw, 50px) 0 clamp(24px, 3vw, 36px);
}

.pf2-who-head h2 {
   font-size: clamp(32px, 5vw, 56px);
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: -.02em;
}

.pf2-for {
   display: inline-block;
   padding: 0 .3em .05em;
   border-radius: .18em;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 14px 28px -12px rgba(201, 58, 11, .8);
   transform: rotate(-2deg);
}

@media (max-width: 991px) {
   .pf2-hero {
      max-width: 460px;
      margin: 0 auto;
   }
}

/* ==========================================================================
   Gift season — one point per row, image | glass copy, alternating
   ========================================================================== */
.season2 {
   overflow: hidden;
   background:
      radial-gradient(40% 30% at 50% 0%, rgba(255, 176, 32, .22), transparent 70%),
      radial-gradient(35% 35% at 0% 60%, rgba(244, 81, 30, .2), transparent 70%),
      radial-gradient(35% 35% at 100% 40%, rgba(201, 58, 11, .2), transparent 70%),
      var(--grad-dark);
}

.gs-list {
   max-width: 1040px;
   margin: 0 auto;
}

.gs-row {
   overflow: hidden;
   border-radius: 30px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .12);
   box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
   transition: transform .35s, border-color .35s;
}

.gs-row:hover {
   transform: translateY(-5px);
   border-color: rgba(255, 176, 120, .45);
}

.gs-row:hover .gs-img img {
   transform: scale(1.05);
}

.gs-media {
   position: relative;
   padding: clamp(14px, 2vw, 22px);
}

.gs-media::before {
   content: "";
   position: absolute;
   inset: 15%;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(255, 176, 32, .4), transparent);
   filter: blur(30px);
}

.slot.gs-img {
   position: relative;
   --r: 16 / 11;
   border-radius: 22px;
}

.gs-img img {
   transition: transform .6s ease;
}

.gs-copy {
   position: relative;
   overflow: hidden;
   padding: clamp(28px, 4vw, 54px);
}

.gs-n {
   position: absolute;
   right: 22px;
   bottom: -14px;
   font: 900 clamp(110px, 12vw, 170px)/1 var(--f-d);
   letter-spacing: -.06em;
   color: transparent;
   -webkit-text-stroke: 2px rgba(255, 176, 120, .14);
   pointer-events: none;
}

.gs-ic {
   position: relative;
   width: 56px;
   height: 56px;
   margin-bottom: 18px;
   border-radius: 18px;
   font-size: 22px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 0 0 6px rgba(244, 81, 30, .15), 0 14px 26px -10px rgba(201, 58, 11, .8);
}

.gs-row:nth-child(2) .gs-ic {
   color: #0B0B0B;
   background: linear-gradient(145deg, #FFE27A, #FFA800);
   box-shadow: 0 0 0 6px rgba(255, 176, 32, .15), 0 14px 26px -10px rgba(255, 168, 0, .7);
}

.gs-copy h3 {
   position: relative;
   margin-bottom: 10px;
   font: 800 clamp(26px, 3.2vw, 38px)/1.15 var(--f-d);
   letter-spacing: -.025em;
   color: #fff;
}

.gs-copy p {
   position: relative;
   font-size: 18px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .75);
}

/* ==========================================================================
   Bonuses — one voucher ticket per row: cover | copy | perforated value stub
   ========================================================================== */
.bonus2 {
background: radial-gradient(40% 25% at 50% 0%, rgb(10, 3, 9), #0a0309 70%), repeating-linear-gradient(45deg, rgba(244, 81, 30, .035) 0 14px, transparent 14px 28px), var(--cream);
}

.bn-list {
   max-width: 1240px;
}

.bn {
   position: relative;
   border-radius: 26px;
   background: #fff;
   box-shadow: 0 30px 60px -36px rgba(120, 40, 5, .55), 0 0 0 1px var(--line);
   transition: transform .35s, box-shadow .35s;
   margin-bottom: 30px;
}

.bn:hover {
   transform: translateY(-5px) rotate(-.3deg);
   box-shadow: 0 40px 70px -34px rgba(201, 58, 11, .55), 0 0 0 1px rgba(244, 81, 30, .35);
}

.bn:hover .bn-img img {
   transform: scale(1.06) rotate(-2deg);
}

.bn-media {
   position: relative;
   padding: 20px;
   border-radius: 26px 0 0 26px;
   background: radial-gradient(70% 70% at 50% 50%, rgba(255, 176, 32, .35), transparent 70%), linear-gradient(160deg, #1d1410, #0B0B0B);
   overflow: hidden;
}

.bn:nth-child(even) .bn-media {
   background: radial-gradient(70% 70% at 50% 50%, rgba(255, 255, 255, .45), transparent 70%), linear-gradient(160deg, #FFB070, #F4511E);
}

.slot.bn-img {
   --r: 4 / 4;
   /* max-width: 260px; */
   border-radius: 14px;
   color: rgba(255, 255, 255, .75);
   background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 12px, transparent 12px 24px), rgba(255, 255, 255, .05);
   border-color: rgba(255, 210, 160, .5);
   font-size: 11px;
}

.slot.bn-img::before {
   color: #FFB878;
}

.slot.bn-img:has(img) {
   border: 0;
   background: none;
   box-shadow: none;
}

.bn-img img {
   object-fit: contain;
   /* filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5)); */
   transition: transform .5s ease;
}

.bn-copy {
   padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 36px);
}

.bn-tag {
margin-bottom: 30px;
  padding: 10px 30px;
  border-radius: 99px;
  font: 800 20px var(--f-d);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or-lo);
  background: var(--peach);
}

.bn-copy h3 {
margin-bottom: 25px;
   font: 800 clamp(21px, 2.4vw, 27px)/1.2 var(--f-d);
   letter-spacing: -.02em;
}

.bn-copy p {
   font-size: 18px;
   line-height: 1.6;
   color: var(--muted);
}

/* perforated stub */
.bn-stub {
   position: relative;
   padding: 22px 12px;
   border-radius: 0 26px 26px 0;
   background: linear-gradient(160deg, #FFF3E8, #FFE0C7);
   border-left: 2px dashed rgba(201, 58, 11, .35);
}

.bn-stub::before,
.bn-stub::after {
   content: "";
   position: absolute;
   left: -13px;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--cream);
   box-shadow: inset 0 0 0 1px var(--line);
}

.bn-stub::before {
   top: -12px;
}

.bn-stub::after {
   bottom: -12px;
}

.bn-stub small {
   font: 700 11px var(--f-d);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--muted);
}

.bn-stub b {
   font: 900 clamp(30px, 3.4vw, 38px)/1.1 var(--f-d);
   letter-spacing: -.03em;
   background: var(--grad);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

@media (max-width: 767px) {
   .bn-media {
      border-radius: 26px 26px 0 0;
   }

   .bn-stub {
      flex-direction: row !important;
      gap: 10px;
      border-radius: 0 0 26px 26px;
      border-left: 0;
      border-top: 2px dashed rgba(201, 58, 11, .35);
   }

   .bn-stub::before,
   .bn-stub::after {
      top: -13px;
      bottom: auto;
   }

   .bn-stub::before {
      left: -12px;
   }

   .bn-stub::after {
      left: auto;
      right: -12px;
   }
}

.bn:nth-child(even) .slot.bn-img {
   color: #fff;
   border-color: rgba(255, 255, 255, .7);
}

.bn:nth-child(even) .slot.bn-img::before {
   color: #fff;
}

/* ==========================================================================
   Buy box — light, bordered card: band, product, list, total, price panel
   ========================================================================== */
.buy2 {
   /* background: radial-gradient(45% 30% at 50% 0%, rgba(255, 176, 32, .25), transparent 70%), linear-gradient(rgba(244, 81, 30, .05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(244, 81, 30, .05) 1px, transparent 1px) 0 0 / 40px 40px, #FFF8EF; */
   background: #fff url(../images/buy2.png) no-repeat center center / cover;
  overflow: hidden;
}

.by-card {
   overflow: hidden;
   border-radius: 30px;
   background: #fff;
   border: 3px solid #F98A2B;
   box-shadow: 0 0 0 10px rgba(255, 176, 32, .15), 0 50px 100px -40px rgba(201, 58, 11, .55);
}

.by-band {
   position: relative;
   overflow: hidden;
   padding: 24px;
   background: linear-gradient(110deg, #FFB020, #F98A2B 45%, #E4520D);
}

.by-band::after {
   content: "";
   position: absolute;
   right: -40px;
   top: -60px;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .14);
}

.by-band img {
   position: relative;
   width: min(230px, 60%);
}

.by-body {
   padding: clamp(20px, 3.5vw, 40px);
}

.by-product {
   width: min(460px, 90%);
   margin-bottom: 26px;
   filter: drop-shadow(0 24px 30px rgba(120, 40, 5, .3));
}

.by-list {
   padding: 20px 22px 10px;
   border-radius: 22px;
   background: #FFF9F0;
   border: 1px solid #F5DFC2;
}

.by-list-h {
   padding-bottom: 14px;
   border-bottom: 1px solid #F0D9BC;
}

.by-list-ic {
   width: 40px;
   height: 40px;
   border-radius: 12px;
   font-size: 18px;
   color: #fff;
   background: linear-gradient(145deg, #FFB020, #F4511E);
   box-shadow: 0 8px 16px -6px rgba(201, 58, 11, .7);
}

.by-list-h h3 {
   font: 900 clamp(17px, 2vw, 21px) var(--f-d);
   text-transform: uppercase;
   letter-spacing: .02em;
   color: var(--or-lo);
}

.by-list li {
   padding: 11px 0;
   border-bottom: 1px dashed #F0D9BC;
   font: 600 15px/1.4 var(--f-d);
   color: var(--ink);
}

.by-list li:last-child {
   border-bottom: 0;
}

.by-chk {
   flex: none;
   width: 20px;
   height: 20px;
   margin-top: 1px;
   border-radius: 6px;
   font-size: 11px;
   color: #fff;
   background: #F98A2B;
}

.by-val {
   flex: none;
   padding: 2px 10px;
   border-radius: 99px;
   font: 800 12.5px var(--f-d);
   color: var(--bad);
   background: #FDECE8;
}

.by-total {
   margin: 20px 0;
   padding: 20px 26px;
   border-radius: 18px;
   color: #fff;
   background: #120d0a;
}

.by-total span {
   font: 800 14px var(--f-d);
   letter-spacing: .14em;
   text-transform: uppercase;
}

.by-total b {
   font: 900 clamp(28px, 3.6vw, 36px) var(--f-d);
   color: #FFB020;
}

.by-price {
   padding: clamp(22px, 3vw, 32px);
   border-radius: 22px;
   border: 2px dashed #F5C99A;
}

.by-was {
   display: inline-block;
   padding: 10px 18px;
   border-radius: 12px;
   font-size: 14.5px;
   color: var(--muted);
   background: #FFF4EC;
   border: 1px solid #F8D3BC;
}

.by-was s {
   font-weight: 800;
   color: var(--bad);
}

.by-today {
   margin: 18px 0 0;
   font: 800 19px var(--f-d);
   color: var(--ink);
}

.by-amt {
   font: 900 clamp(76px, 10vw, 110px)/1 var(--f-d);
   letter-spacing: -.04em;
   background: linear-gradient(180deg, #F4511E, #B4260A);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.by-chips span {
   padding: 6px 12px;
   border-radius: 99px;
   font: 700 12.5px var(--f-d);
   color: #14803f;
   background: #E8F8EE;
}

.by-chips i {
   margin-right: 5px;
}

.by-bump {
   padding: 16px 18px;
   border-radius: 16px;
   background: #FFFBE6;
   border: 2.5px dashed #0B0B0B;
   cursor: pointer;
   font-size: 14.5px;
   line-height: 1.55;
   color: var(--ink-2);
}

.by-bump-h {
   align-items: flex-start !important;
}

.by-bump b {
   color: var(--bad);
}

.by-bump s {
   color: var(--muted);
}

.by-bump input {
   flex: none;
   width: 22px;
   height: 22px;
   margin-top: 2px;
   accent-color: var(--or);
}

.by-arrow {
   flex: none;
   margin-top: 4px;
   font-size: 22px;
   color: var(--bad);
   animation: nudge 1s ease-in-out infinite;
}

@keyframes nudge {
   50% {
      transform: translateX(5px);
   }
}

.by-timer {
   max-width: 320px;
}

.by-band {
   background: radial-gradient(60% 120% at 50% 0%, rgba(244, 81, 30, .45), transparent 70%), linear-gradient(110deg, #0B0B0B, #241510 60%, #0B0B0B);
   border-bottom: 3px solid #F98A2B;
}

.by-band::after {
   background: rgba(244, 81, 30, .18);
}

/* ==========================================================================
   FAQ — sticky side panel + numbered question cards
   ========================================================================== */
.faq2 {
   background: radial-gradient(35% 30% at 0% 20%, rgba(244, 81, 30, .1), transparent 70%), #fff;
}

@media (min-width: 992px) {
   .faq2-side {
      position: sticky;
      top: 110px;
   }
}

.faq2-title {
   margin-bottom: 20px;
   font: 900 clamp(64px, 9vw, 120px)/.9 var(--f-d);
   letter-spacing: -.05em;
   background: var(--grad);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.slot.faq2-img {
   --r: 4 / 3;
   border-radius: 24px;
}

.faq2-side .fine {
   color: var(--muted);
}

.faq2 .faq {
   counter-reset: q;
}

.faq2 .faq .accordion-item {
   counter-increment: q;
   margin-bottom: 14px;
   border-radius: 20px !important;
   background: #FFFBF7;
   transition: transform .3s, box-shadow .3s;
}

.faq2 .faq .accordion-item:hover {
   transform: translateX(4px);
}

.faq2 .faq .accordion-button {
   gap: 16px;
   padding: 18px 20px;
   background: transparent;
}

.faq2 .faq .accordion-button::before {
   content: counter(q, decimal-leading-zero);
   flex: none;
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   border-radius: 12px;
   font: 900 13px var(--f-d);
   color: var(--or-lo);
   background: var(--peach);
   transition: background .3s, color .3s;
}

.faq2 .faq .accordion-button::after {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: #fff;
   background-size: 14px;
   background-position: center;
   box-shadow: 0 0 0 1px var(--line);
   --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F4511E'%3E%3Cpath d='M8 2a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 1 1 0-2h4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
   --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

.faq2 .faq .accordion-button:not(.collapsed)::after {
   transform: rotate(135deg);
}

.faq2 .faq .accordion-item:has(.show) {
   background: #fff;
}

.faq2 .faq .accordion-item:has(.show) .accordion-button::before {
   color: #fff;
   background: var(--grad);
}

.faq2 .faq .accordion-body {
   padding: 0 24px 22px 76px;
}

@media (max-width: 575px) {
   .faq2 .faq .accordion-body {
      padding-left: 20px;
   }
}

/* guarantee — turning ring around the seal, glowing card */
.guar {
   position: relative;
   overflow: hidden;
   border: 2px solid transparent;
   background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #2EC27E, #9ADBB4 40%, #FFD23F) border-box;
   box-shadow: 0 40px 80px -40px rgba(20, 128, 63, .55);
}

.guar::before {
   content: "";
   position: absolute;
   left: -80px;
   top: -80px;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(46, 194, 126, .18), transparent);
}

.guar>* {
   position: relative;
}

.seal-wrap {
   width: 230px;
   height: 230px;
   display: grid;
   place-items: center;
}

.seal-wrap::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px dashed rgba(30, 158, 90, .5);
   animation: spin 30s linear infinite;
}

@keyframes spin {
   to {
      rotate: 360deg;
   }
}

.guar h2 {
   font-size: clamp(26px, 3.4vw, 38px);
}

.guar p {
   font-size: 17px;
   line-height: 1.7;
}

/* ==========================================================================
   FAQ — centred, Q/A cards
   ========================================================================== */
.faq3 {
   background: radial-gradient(45% 30% at 50% 0%, rgba(244, 81, 30, .12), transparent 70%), linear-gradient(180deg, #FFF8F1, #fff 60%);
}

.faq3-title {
   display: inline-block;
   position: relative;
   font: 900 clamp(60px, 9vw, 110px)/.9 var(--f-d);
   letter-spacing: -.05em;
   background: var(--grad);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.faq3-title::after {
   content: "";
   display: block;
   width: 70px;
   height: 5px;
   margin: 14px auto 0;
   border-radius: 5px;
   background: var(--grad);
}

.faq3 .faq .accordion-item {
   margin-bottom: 14px;
   border-radius: 18px !important;
   border: 1px solid var(--line);
   background: #fff;
   box-shadow: 0 14px 30px -24px rgba(120, 40, 5, .55);
   transition: box-shadow .3s, border-color .3s;
}

.faq3 .faq .accordion-item:hover {
   border-color: rgba(244, 81, 30, .4);
}

.faq3 .faq .accordion-button {
   gap: 16px;
   padding: 20px 22px;
   background: transparent;
   font-size: 17px;
}

.faq3 .faq .accordion-button::before {
   content: "Q";
   flex: none;
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   font: 900 15px var(--f-d);
   color: var(--or-lo);
   background: var(--peach);
   transition: all .3s;
}

.faq3 .faq .accordion-button::after {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background-color: var(--cream);
   background-size: 13px;
   background-position: center;
   --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F4511E'%3E%3Cpath d='M8 2a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 1 1 0-2h4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
   --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 2a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 1 1 0-2h4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.faq3 .faq .accordion-button:not(.collapsed)::after {
   transform: rotate(135deg);
   background-color: var(--or);
}

.faq3 .faq .accordion-item:has(.show) {
   border-color: var(--or);
   box-shadow: 0 24px 44px -26px rgba(201, 58, 11, .6);
}

.faq3 .faq .accordion-item:has(.show) .accordion-button::before {
   color: #fff;
   background: var(--grad);
}

.faq3 .faq .accordion-body {
   position: relative;
   margin: 0 22px 20px 76px;
   padding: 14px 18px;
   border-radius: 14px;
   font-size: 16px;
   line-height: 1.65;
   color: var(--ink-2);
   background: #FFF6EE;
   border-left: 3px solid var(--or);
}

@media (max-width: 575px) {
   .faq3 .faq .accordion-body {
      margin-left: 22px;
   }

   .faq3 .faq .accordion-button {
      font-size: 15.5px;
   }
}

.faq3 .faq .accordion-body {
   margin: 0;
   padding: 0 24px 22px 76px;
   border: 0;
   border-radius: 0;
   background: none;
   font-size: 16px;
   line-height: 1.7;
   color: var(--muted);
}

@media (max-width: 575px) {
   .faq3 .faq .accordion-body {
      padding-left: 22px;
   }
}

/* ==========================================================================
   Guarantee (sticker seal) · sign-off (P.S. card) · footer
   ========================================================================== */
.guar2 {
  background: radial-gradient(50% 50% at 50% 0%, rgb(255, 255, 255), transparent 70%), #FDFDFD;
}

.guar2-card {
   padding: clamp(28px, 4vw, 50px);
   border-radius: 30px;
   background: #fff;
   border: 2.5px dashed #FFB020;
   box-shadow: 0 40px 80px -46px rgba(201, 120, 0, .6);
}

/* black/gold scalloped sticker */
.g2-seal {
   position: relative;
   width: 210px;
   height: 210px;
   filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35));
   transform: rotate(-8deg);
   transition: transform .5s;
}

.g2-seal:hover {
   transform: rotate(0) scale(1.04);
}

.g2-seal::before {
   content: "";
   position: absolute;
   inset: 0;
   background: #0B0B0B;
   -webkit-mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%), conic-gradient(#000 0 0);
   mask: radial-gradient(circle, #000 0 0);
   clip-path: polygon(50% 0%, 56% 3%, 62% 1%, 67% 5%, 73% 4%, 77% 9%, 83% 9%, 86% 14%, 91% 16%, 92% 22%, 97% 26%, 96% 32%, 100% 37%, 98% 43%, 100% 50%, 98% 57%, 100% 63%, 96% 68%, 97% 74%, 92% 78%, 91% 84%, 86% 86%, 83% 91%, 77% 91%, 73% 96%, 67% 95%, 62% 99%, 56% 97%, 50% 100%, 44% 97%, 38% 99%, 33% 95%, 27% 96%, 23% 91%, 17% 91%, 14% 86%, 9% 84%, 8% 78%, 3% 74%, 4% 68%, 0% 63%, 2% 57%, 0% 50%, 2% 43%, 0% 37%, 4% 32%, 3% 26%, 8% 22%, 9% 16%, 14% 14%, 17% 9%, 23% 9%, 27% 4%, 33% 5%, 38% 1%, 44% 3%);
}

.g2-seal-in {
   position: absolute;
   inset: 15%;
   border-radius: 50%;
   text-align: center;
   color: #F5C451;
   background: radial-gradient(circle at 40% 30%, #2a2420, #0B0B0B 70%);
   box-shadow: 0 0 0 3px #D4A23A, 0 0 0 7px #0B0B0B, 0 0 0 9px #B8892F;
}

.g2-seal-in b {
   font: 900 54px/.9 var(--f-d);
   letter-spacing: -.03em;
   background: linear-gradient(180deg, #FFE7A0, #C99A2E);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.g2-seal-in span {
   margin-top: 4px;
   font: 800 11px/1.25 var(--f-d);
   letter-spacing: .12em;
   text-transform: uppercase;
}

.g2-peel {
   position: absolute;
   top: 4%;
   right: 6%;
   width: 52px;
   height: 52px;
   border-radius: 0 0 0 100%;
   background: linear-gradient(225deg, #f4f4f4 0%, #c9c9c9 45%, #8d8d8d 100%);
   box-shadow: -4px 4px 8px rgba(0, 0, 0, .35);
   transform: rotate(8deg);
}

.g2-title {
   margin-bottom: 16px;
   font: 900 clamp(28px, 3.6vw, 42px)/1.12 var(--f-d);
   letter-spacing: -.025em;
}

.g2-title span {
   color: #E08A00;
}

.g2-text {
   font-size: 17px;
   line-height: 1.7;
   color: var(--ink-2);
}

/* sign-off */
.sign2 {
   padding-bottom: clamp(40px, 5vw, 60px);
/* padding: 36px 0 clamp(56px, 7vw, 90px); */
  background: #fff url(../images/header-section2.png) no-repeat center center / cover;
  overflow: hidden;
}

.s2-avatar {
   width: 126px;
   height: 126px;
   width: 226px;
  height: 226px;
   padding: 6px;
   border-radius: 50%;
   background: linear-gradient(145deg, #FFB020, #F4511E);
   box-shadow: 0 0 0 10px rgba(244, 81, 30, .15), 0 20px 40px -14px rgba(244, 81, 30, .7);
}

.slot.s2-img {
   --r: 1;
   height: 100%;
   border-radius: 50%;
   border: 4px solid #fff;
   padding: 6px;
   font-size: 10px;
   background: #1d1612;
   color: rgba(255, 255, 255, .7);
}

.slot.s2-img::before {
   font-size: 20px;
}

.s2-hand {
   margin-top: 18px;
   font: 700 clamp(30px, 4vw, 40px)/1 var(--f-h);
   color: #FFB020;
}

.s2-name {
   margin-top: 6px;
   font: 800 13px var(--f-d);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .7);
}

.ps2 {
   padding: clamp(22px, 3.5vw, 40px);
   border-radius: 24px;
   background: linear-gradient(180deg, #FFFDF5, #FFF4DA);
   box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
   transform: rotate(-.5deg);
}

.ps2-row {
   padding: 18px 0;
   border-bottom: 1px dashed #EBD6A8;
}

.ps2-row:first-child {
   padding-top: 0;
}

.ps2-row:last-child {
   padding-bottom: 0;
   border: 0;
}

.ps2-lbl {
   flex: none;
   width: 74px;
   font: 700 26px/1.1 var(--f-h);
   color: #E08A00;
}

.ps2-row p {
   font-size: 16px;
   line-height: 1.65;
   color: var(--ink-2);
}

/* footer */
.foot2 {
    padding: 50px 0 120px 0;
   color: rgba(255, 255, 255, .8);
   background: #000;
   border-top: 1px solid rgba(255, 255, 255, .08);
}

.f2-logo {
   width: 210px;
   margin: 0 auto 26px;
}

.f2-disc {
   max-width: 960px;
   margin-bottom: 22px;
   font-size: 13px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .78);
}

.f2-disc b {
   color: #fff;
}

.f2-copy {
   margin-bottom: 14px;
   font-size: 15px;
   color: rgba(255, 255, 255, .85);
}

.f2-links a {
   padding: 0 18px;
   font-size: 15px;
   color: #fff;
}

.f2-links a+a {
   border-left: 1.5px solid #FFB020;
}

.f2-links a:hover {
   color: #FFB020;
}

@media (max-width: 575px) {
   .f2-links a {
      padding: 4px 10px;
      font-size: 13.5px;
   }

   .ps2-row {
      flex-direction: column;
      gap: 4px !important;
   }
}

/* ==========================================================================
   Exit popup — dark glass gift card, animated glow border
   ========================================================================== */
.xp {
   position: fixed;
   inset: 0;
   z-index: 2000;
   display: grid;
   place-items: center;
   padding: 16px;
   visibility: hidden;
   opacity: 0;
   transition: opacity .35s ease, visibility .35s;
}

.xp.open {
   visibility: visible;
   opacity: 1;
}

.xp-backdrop {
   position: absolute;
   inset: 0;
   background: radial-gradient(60% 60% at 50% 40%, rgba(244, 81, 30, .25), transparent 70%), rgba(5, 4, 3, .78);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
}

.xp-card {
   position: relative;
   width: min(500px, 100%);
   max-height: calc(100vh - 32px);
   overflow-y: auto;
   overflow-x: hidden;
   border-radius: 30px;
   background: linear-gradient(170deg, #1d1612 0%, #0f0b09 55%, #160d08 100%);
   box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 176, 120, .2);
   transform: translateY(40px) scale(.94);
   transition: transform .5s cubic-bezier(.2, 1.1, .3, 1);
   outline: 0;
   scrollbar-width: none;
}

.xp.open .xp-card {
   transform: none;
}

/* rotating gradient border */
.xp-card::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   padding: 1.5px;
   border-radius: inherit;
   background: conic-gradient(from var(--xa, 0deg), transparent 0 60%, #FF8A3D 75%, #FFD23F 85%, transparent 100%);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
   animation: xspin 4s linear infinite;
   pointer-events: none;
}

@property --xa {
   syntax: "<angle>";
   inherits: false;
   initial-value: 0deg;
}

@keyframes xspin {
   to {
      --xa: 360deg;
   }
}

.xp-glow {
   position: absolute;
   z-index: 0;
   left: 50%;
   top: -120px;
   width: 380px;
   height: 260px;
   translate: -50% 0;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(244, 81, 30, .55), transparent);
   filter: blur(20px);
   pointer-events: none;
}

/* gift ribbon */
.xp-ribbon-v {
   position: absolute;
   z-index: 0;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 22px;
   translate: -50% 0;
   background: linear-gradient(90deg, rgba(255, 176, 32, .08), rgba(255, 176, 32, .16), rgba(255, 176, 32, .08));
}

.xp-ribbon-h {
   position: absolute;
   z-index: 0;
   left: 0;
   right: 0;
   top: 118px;
   height: 22px;
   background: linear-gradient(180deg, rgba(255, 176, 32, .06), rgba(255, 176, 32, .13), rgba(255, 176, 32, .06));
}

.xp-bow {
   position: relative;
   z-index: 2;
   width: 74px;
   height: 74px;
   margin: 26px auto 0;
   border-radius: 22px;
   font-size: 32px;
   color: #fff;
   background: var(--grad);
   box-shadow: 0 0 0 8px rgba(244, 81, 30, .18), 0 0 40px rgba(244, 81, 30, .7);
   animation: xbob 2.4s ease-in-out infinite;
}

@keyframes xbob {
   50% {
      transform: translateY(-6px) rotate(-4deg);
   }
}

.xp-close {
   position: absolute;
   z-index: 3;
   top: 16px;
   right: 16px;
   width: 38px;
   height: 38px;
   border: 0;
   border-radius: 50%;
   font-size: 16px;
   color: #fff;
   background: rgba(255, 255, 255, .1);
   transition: background .25s, transform .25s;
}

.xp-close:hover {
   background: var(--or);
   transform: rotate(90deg);
}

.xp-inner {
   position: relative;
   z-index: 1;
   padding: 18px clamp(20px, 5vw, 38px) 26px;
   color: #fff;
}

.xp-kicker {
   margin-top: 6px;
   padding: 7px 14px;
   border-radius: 99px;
   font: 800 11.5px var(--f-d);
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #FFD23F;
   background: rgba(255, 210, 63, .1);
   border: 1px solid rgba(255, 210, 63, .35);
}

.xp-title {
   margin: 14px 0 6px;
   font: 900 clamp(26px, 6vw, 34px)/1.15 var(--f-d);
   letter-spacing: -.025em;
   color: #fff;
}

.xp-title span {
   background: linear-gradient(100deg, #FF8A3D, #FFD23F);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.xp-price {
   margin: 10px 0 16px;
}

.xp-price s {
   font: 800 26px var(--f-d);
   color: rgba(255, 255, 255, .45);
   text-decoration-color: #FF6B2C;
   text-decoration-thickness: 3px;
}

.xp-price i {
   font-size: 22px;
   color: #FF8A3D;
}

.xp-price b {
   font: 900 64px/1 var(--f-d);
   letter-spacing: -.04em;
   background: linear-gradient(180deg, #FFE27A, #FF8A3D);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.xp-price sup {
   font-size: .42em;
   vertical-align: top;
   position: relative;
   top: .3em;
}

.xp-coupon {
   padding: 10px 10px 10px 12px;
   border-radius: 18px;
   background: rgba(255, 255, 255, .06);
   border: 1.5px dashed rgba(255, 176, 120, .55);
}

.xp-coupon-ic {
   flex: none;
   width: 44px;
   height: 44px;
   border-radius: 14px;
   font-size: 18px;
   color: #0B0B0B;
   background: linear-gradient(145deg, #FFE27A, #FFA800);
}

.xp-coupon small {
   display: block;
   font: 700 10.5px var(--f-d);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .55);
}

.xp-coupon code {
   font: 900 22px var(--f-d);
   letter-spacing: .12em;
   color: #fff;
}

.xp-copy {
   flex: none;
   padding: 10px 18px;
   border: 0;
   border-radius: 12px;
   font: 800 13px var(--f-d);
   color: #0B0B0B;
   background: #FBE9D7;
   transition: background .25s, color .25s;
}

.xp-copy:hover,
.xp-copy.done {
   color: #fff;
   background: var(--ok);
}

.xp-buy {
   margin-top: 16px;
}

.xp-bump {
   margin-top: 14px;
   padding: 12px 14px;
   border-radius: 14px;
   font-size: 13.5px;
   line-height: 1.5;
   color: rgba(255, 255, 255, .85);
   background: rgba(255, 210, 63, .08);
   border: 1.5px dashed rgba(255, 210, 63, .55);
   cursor: pointer;
}

.xp-bump b {
   color: #FFD23F;
}

.xp-bump s {
   color: rgba(255, 255, 255, .5);
}

.xp-bump input {
   flex: none;
   width: 20px;
   height: 20px;
   margin-top: 1px;
   accent-color: var(--or);
}

.xp-timer {
   max-width: 300px;
   margin-top: 14px;
}

.xp-trust {
   margin-top: 6px;
   font: 600 12px var(--f-d);
   color: rgba(255, 255, 255, .65);
}

.xp-trust i {
   margin-right: 5px;
   color: #FFB020;
}

.xp-no {
   margin-top: 12px;
   padding: 0;
   border: 0;
   background: none;
   font-size: 13px;
   color: rgba(255, 255, 255, .45);
   text-decoration: underline;
}

.xp-no:hover {
   color: rgba(255, 255, 255, .8);
}

body.xp-lock {
   overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
   .xp-card {
      transition: none;
   }
}

.xp-ribbon-v {
   bottom: auto;
   height: 150px;
   -webkit-mask: linear-gradient(180deg, #000 60%, transparent);
   mask: linear-gradient(180deg, #000 60%, transparent);
}

.xp-ribbon-h {
   -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
   mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.xp-title span {
   white-space: nowrap;
}

/* ==========================================================================
   Exit popup v2 — orange header card, coupon, 3D CTA, bump
   ========================================================================== */
.xp2-frame {
   position: relative;
   width: min(520px, 100%);
   padding: 10px;
   border-radius: 40px;
   background: linear-gradient(160deg, #3a2a10, #1a1206 60%, #3a2a10);
   box-shadow: 0 0 0 1px rgba(255, 210, 63, .25), 0 60px 120px -30px rgba(0, 0, 0, .9), 0 0 80px rgba(244, 81, 30, .35);
   transform: translateY(40px) scale(.85) rotate(-2deg);
   opacity: 0;
   transition: transform .6s cubic-bezier(.2, 1.4, .35, 1), opacity .3s;
}

.xp.open .xp2-frame {
   transform: none;
   opacity: 1;
}

.xp2-card {
   max-height: calc(100vh - 52px);
   overflow-y: auto;
   border-radius: 30px;
   background: #fff;
   outline: 0;
   scrollbar-width: none;
}

.xp2-close {
   position: absolute;
   z-index: 5;
   top: -14px;
   right: -14px;
   width: 44px;
   height: 44px;
   border: 3px solid #0B0B0B;
   border-radius: 50%;
   font-size: 17px;
   color: #0B0B0B;
   background: #fff;
   box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .6);
   transition: transform .25s, background .25s, color .25s;
}

.xp2-close:hover {
   color: #fff;
   background: var(--or);
   transform: rotate(90deg);
}

/* header */
.xp2-head {
   position: relative;
   overflow: hidden;
   padding: 26px 24px 26px;
   background: linear-gradient(120deg, #FFC21A 0%, #FF9A2B 45%, #F4511E 100%);
}

.xp2-burst {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 900px;
   height: 900px;
   translate: -50% -50%;
   background: repeating-conic-gradient(rgba(255, 255, 255, .13) 0 8deg, transparent 8deg 20deg);
   animation: xspin2 40s linear infinite;
   pointer-events: none;
}

@keyframes xspin2 {
   to {
      rotate: 360deg;
   }
}

.xp2-head::after {
   content: "";
   position: absolute;
   left: -60px;
   top: -60px;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   border: 22px solid rgba(255, 255, 255, .18);
}

.xp2-head>*:not(.xp2-burst) {
   position: relative;
   z-index: 1;
}

.xp2-gift {
   width: 54px;
   height: 54px;
   margin-bottom: 10px;
   border-radius: 16px;
   font-size: 24px;
   color: var(--or-lo);
   background: #fff;
   box-shadow: 0 10px 22px -8px rgba(120, 40, 5, .7);
   animation: xbob 2.4s ease-in-out infinite;
}

.xp2-kicker {
   margin: 0 0 6px;
   font: 800 12px var(--f-d);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #2a1406;
}

.xp2-title {
   margin: 0;
   font: 900 clamp(26px, 6.4vw, 36px)/1.12 var(--f-d);
   letter-spacing: -.02em;
   color: #0B0B0B;
}

.xp2-title span {
   color: #fff;
   text-shadow: 0 2px 0 #C93A0B, 0 4px 0 #9a2c08, 0 10px 18px rgba(120, 40, 5, .5);
}

/* body */
.xp2-body {
   padding: 22px clamp(18px, 5vw, 32px) 22px;
   background: radial-gradient(80% 40% at 50% 0%, #FFF4E6, #fff 70%);
}

.xp2-use {
   margin: 0 0 10px;
   font: 600 13.5px var(--f-d);
   color: var(--muted);
}

.xp2-coupon {
   padding: 12px 14px 12px 22px;
   border-radius: 16px;
   background: #FFF8EE;
   border: 2px dashed #F98A2B;
   box-shadow: 0 10px 24px -16px rgba(201, 58, 11, .6);
}

.xp2-coupon code {
   font: 900 26px var(--f-d);
   letter-spacing: .22em;
   color: #0B0B0B;
}

.xp2-copy {
   padding: 7px 14px;
   border: 0;
   border-radius: 10px;
   font: 900 12px var(--f-d);
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #FFB020;
   background: #0B0B0B;
   transition: background .25s, color .25s, transform .2s;
}

.xp2-copy:hover {
   transform: scale(1.06);
}

.xp2-copy.done {
   color: #fff;
   background: var(--ok);
}

.xp2-price {
   margin: 18px 0 18px;
}

.xp2-price s {
   padding-bottom: 6px;
   font: 800 24px var(--f-d);
   color: #9a918a;
   text-decoration-color: var(--bad);
   text-decoration-thickness: 3px;
}

.xp2-price b {
   font: 900 clamp(58px, 13vw, 74px)/.85 var(--f-d);
   letter-spacing: -.04em;
   color: #D92A16;
   text-shadow: 0 6px 18px rgba(217, 42, 22, .25);
}

.xp2-price span {
   padding-bottom: 6px;
   font: 700 13px var(--f-d);
   color: var(--muted);
   text-align: left;
   max-width: 90px;
   line-height: 1.3;
}

.xp2-cta {
   padding: 18px 20px;
   border-radius: 18px;
   font: 900 clamp(18px, 4.6vw, 22px) var(--f-d);
   color: #1a0d04;
   background: linear-gradient(180deg, #FFC21A, #FF8A1F 60%, #F4511E);
   box-shadow: 0 7px 0 #9a3a08, 0 22px 34px -12px rgba(201, 58, 11, .8), inset 0 1px 0 rgba(255, 255, 255, .5);
   transition: transform .15s, box-shadow .15s;
   animation: xpulse 2s ease-in-out infinite;
}

.xp2-cta:hover {
   color: #1a0d04;
   transform: translateY(2px);
   box-shadow: 0 5px 0 #9a3a08, 0 16px 26px -12px rgba(201, 58, 11, .8), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.xp2-cta i:last-child {
   transition: transform .25s;
}

.xp2-cta:hover i:last-child {
   transform: translateX(5px);
}

@keyframes xpulse {
   50% {
      box-shadow: 0 7px 0 #9a3a08, 0 22px 44px -8px rgba(244, 81, 30, .95), inset 0 1px 0 rgba(255, 255, 255, .5);
   }
}

.xp2-bump {
   margin-top: 22px;
   overflow: hidden;
   border-radius: 16px;
   background: #FFFBEA;
   border: 2.5px dashed #0B0B0B;
   cursor: pointer;
}

.xp2-bump-h {
   padding: 10px 14px;
   background: #FFF59D;
   font: 800 14.5px/1.35 var(--f-d);
   color: #0B0B0B;
}

.xp2-bump-h input {
   flex: none;
   width: 22px;
   height: 22px;
   accent-color: var(--or);
}

.xp2-arrow {
   flex: none;
   font-size: 20px;
   color: var(--bad);
   animation: nudge 1s ease-in-out infinite;
}

.xp2-bump-b {
   padding: 10px 14px 12px;
   font-size: 13px;
   line-height: 1.55;
   color: var(--ink-2);
}

.xp2-bump-b s {
   color: var(--muted);
}

.xp2-trust {
   gap: 6px 18px;
   margin-top: 16px;
   font: 700 12px var(--f-d);
   color: var(--ink-2);
}

.xp2-trust i {
   margin-right: 5px;
   color: var(--or);
}

@media (max-width: 575px) {
   .xp2-close {
      top: -8px;
      right: -4px;
      width: 40px;
      height: 40px;
   }
}
@media (max-width: 768px) {
.hero{
   background: linear-gradient( 180deg, #fff 0%, #ffeae0 23%, #d64111 47%, #24130b 70%, #0b0b04 100% );
}
.cream1{
   background: linear-gradient( 180deg, #4d20f0 0%, #fff 23%, #fdfbfb 47%, #fff 70%, #fff 100% );
}
}
/* Show the complete blanket design at the full column width. */
.blanket {
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.blanket img.ov {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}