*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --red: #cc0202;
      --green: #008c1a;
      --green-h: #006d14;
      --black: #020817;
      --gold: #b8860b;
      --star: #f0a500;
      --text: #303030;
      --font: 'Montserrat', sans-serif;
    }

    body {
      font-family: var(--font);
      background: #fff;
      color: var(--text);
      font-size: 17px;
      line-height: 1.75;
      overflow-x: hidden
    }

    /* 1 - WHITE logo header */
    .logo-header {
      background: #ffffff;
      padding: 16px 24px;
      text-align: left;
      border-bottom: 3px solid var(--red);
      display: flex;
      align-items: center
    }

    .logo-header img {
      max-height: 64px;
      width: auto
    }

    /* HERO */
    .hero {
      position: relative;
      background: var(--black);
      color: #fff;
      overflow: hidden;
      min-height: 420px;
      display: flex;
      align-items: center
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center center;
      opacity: .55;
      background-image: url("https://assets.checkoutchamp.com/Funnel/assets/images/7b7fcd57-695c-40ed-ae09-4bb510e8afa3/69bf1240-d085-43a0-965e-393a2a956d00/ban-bg.png");
    }

    .hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
      padding: 52px 24px;
      text-align: center
    }

    .hero h1 {
      font-size: 38px;
      font-weight: 900;
      line-height: 1.18;
      color: #fff;
      margin-bottom: 20px
    }

    .hero h1 .red {
      color: var(--red)
    }

    .hero .sub {
      font-size: 19px;
      color: #e8e8e8;
      max-width: 680px;
      margin: 0 auto 32px;
      font-weight: 500;
      line-height: 1.6
    }

    /* 3 - Single proof item, bigger */
    .proof-bar {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .2)
    }

    .proof-item {
      color: #ccc;
      font-size: 16px;
      font-weight: 700;
      text-align: center
    }

    .proof-item .num {
      color: var(--green);
      font-size: 30px;
      font-weight: 900;
      display: block;
      margin-bottom: 2px
    }

    .red-divider {
      height: 4px;
      background: linear-gradient(90deg, var(--red), #ff4040, var(--red))
    }

    .page-wrap {
      max-width: 780px;
      margin: 0 auto;
      padding: 0 24px
    }

    hr.rule {
      border: none;
      border-top: 1px solid #e5e5e5;
      margin: 36px 0
    }

    p {
      margin-bottom: 18px
    }

    p.lead {
      font-size: 20px;
      font-weight: 700;
      color: var(--black);
      line-height: 1.5
    }

    p.big {
      font-size: 19px
    }

    h2 {
      font-size: 28px;
      font-weight: 900;
      line-height: 1.2;
      color: var(--black);
      margin-bottom: 18px
    }

    h2 .red {
      color: var(--red)
    }

    h3 {
      font-size: 20px;
      font-weight: 800;
      color: var(--black);
      margin-bottom: 10px
    }

    .section-img {
      width: 100%;
      border-radius: 6px;
      margin: 24px 0;
      max-height: 360px;
      object-fit: cover;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .15)
    }

    .scenario-intro {
      background: #f0f0f0;
      border-left: 5px solid var(--black);
      padding: 20px 24px;
      margin: 28px 0 20px;
      border-radius: 0 4px 4px 0
    }

    .scenario-intro p {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--black);
      line-height: 1.5
    }

    .scenario-box {
      background: #0d0d0d;
      color: #eee;
      border-left: 5px solid var(--red);
      padding: 24px 28px;
      margin: 18px 0;
      border-radius: 0 4px 4px 0
    }

    .scenario-box .stag {
      font-size: 16px;
      font-weight: 800;
      color: var(--red);
      margin-bottom: 12px
    }

    .scenario-box p {
      color: #ddd;
      margin-bottom: 12px
    }

    .scenario-box p:last-child {
      margin-bottom: 0
    }

    .scenario-box strong {
      color: #fff
    }

    .warning-box {
      background: #fff8e1;
      border: 2px solid #e6a817;
      border-radius: 4px;
      padding: 20px 24px;
      margin: 28px 0
    }

    ul.x-list,
    ul.check-list {
      list-style: none;
      padding: 0;
      margin: 16px 0 24px
    }

    ul.x-list li,
    ul.check-list li {
      padding: 9px 0 9px 34px;
      position: relative;
      border-bottom: 1px solid #eee;
      font-size: 16px;
      color: var(--text)
    }

    ul.x-list li:last-child,
    ul.check-list li:last-child {
      border-bottom: none
    }

    ul.x-list li::before {
      content: "✗";
      position: absolute;
      left: 0;
      color: var(--red);
      font-weight: 900;
      font-size: 17px;
      line-height: 1.6
    }

    ul.check-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--green);
      font-weight: 900;
      font-size: 17px;
      line-height: 1.6
    }

    .section-banner {
      background: var(--black);
      color: #fff;
      padding: 40px 24px;
      text-align: center;
      margin: 44px 0 32px
    }

    .section-banner h2 {
      color: #fff;
      margin: 0 0 12px;
      font-size: 42px;
      line-height: 1.1
    }

    .section-banner h2 .red {
      color: var(--red)
    }

    .section-banner .sub-text {
      color: #ccc;
      font-size: 20px;
      margin: 0;
      font-weight: 500
    }

    .module-card {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      background: #fff;
      border: 1px solid #e5e5e5;
      border-left: 5px solid var(--black);
      padding: 20px 22px;
      margin: 14px 0;
      border-radius: 0 6px 6px 0;
      box-shadow: 0 1px 6px rgba(0, 0, 0, .06)
    }

    .module-card.highlight {
      border-left-color: var(--red);
      background: #fff9f9
    }

    .module-card .mod-img {
      width: 100px;
      height: 75px;
      object-fit: cover;
      border-radius: 4px;
      flex-shrink: 0
    }

    .module-card .mod-body {
      flex: 1
    }

    .module-card .mod-tag {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 5px
    }

    .module-card.highlight .mod-tag {
      color: var(--red)
    }

    .module-card h4 {
      font-size: 17px;
      font-weight: 800;
      color: var(--black);
      margin-bottom: 7px
    }

    .module-card p {
      font-size: 15px;
      color: #555;
      margin: 0;
      line-height: 1.55
    }

    .testimonial-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 24px 0
    }

    .tc {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 18px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .07)
    }

    .tc .tc-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px
    }

    .tc .tc-top img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #eee
    }

    .tc .tc-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--black)
    }

    .tc .tc-loc {
      font-size: 12px;
      color: #888
    }

    .tc .stars {
      color: var(--star);
      font-size: 14px;
      margin-bottom: 8px
    }

    .tc blockquote {
      font-size: 14px;
      color: #444;
      line-height: 1.6;
      font-style: italic;
      border: none;
      padding: 0;
      margin: 0
    }

    .trust-bar {
      text-align: center;
      margin: 24px 0 8px
    }

    .trust-bar img {
      max-width: 260px;
      width: 100%
    }

    .instructor-box {
      background: #f7f7f7;
      border-radius: 8px;
      padding: 32px;
      margin: 32px 0;
      display: flex;
      gap: 28px;
      align-items: flex-start
    }

    .cole-photo-wrap {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 4px solid var(--red);
      flex-shrink: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ddd
    }

    .cole-photo-wrap img {
      width: 145%;
      height: 145%;
      object-fit: cover;
      object-position: center 10%;
      margin-left: -22%;
      margin-top: -5%
    }

    .instructor-box h3 {
      margin-bottom: 10px
    }

    .instructor-box p {
      font-size: 15px;
      color: #444;
      margin-bottom: 12px
    }

    .bonus-box {
      background: #fffbf0;
      border: 2px dashed var(--gold);
      border-radius: 8px;
      padding: 28px 30px;
      margin: 32px 0;
      display: flex;
      gap: 24px;
      align-items: flex-start
    }

    .bonus-box img {
      width: 120px;
      flex-shrink: 0;
      border-radius: 4px
    }

    .bonus-box .bonus-tag {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .5px;
      color: var(--gold);
      margin-bottom: 8px;
      text-transform: uppercase
    }

    .bonus-box h3 {
      font-size: 18px;
      margin-bottom: 10px
    }

    .bonus-box p {
      font-size: 15px;
      color: #555
    }

    .offer-box {
      background: var(--black);
      color: #fff;
      border-radius: 8px;
      padding: 36px 32px;
      margin: 36px 0;
      text-align: center;
      border: 3px solid var(--red)
    }

    .offer-box .offer-eyebrow {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 700;
      color: #aaa;
      margin-bottom: 8px
    }

    .offer-box h2 {
      color: #fff;
      font-size: 24px;
      margin-bottom: 6px
    }

    .offer-box .offer-sub {
      font-size: 15px;
      color: #ccc;
      margin-bottom: 24px
    }

    .offer-box .product-img {
      max-width: 400px;
      width: 100%;
      margin: 0 auto 24px;
      display: block;
      border-radius: 6px
    }

    .offer-box ul.check-list {
      text-align: left;
      max-width: 520px;
      margin: 0 auto 28px
    }

    .offer-box ul.check-list li {
      border-color: #333;
      color: #ddd
    }

    .offer-box ul.check-list li strong {
      color: #fff
    }

    .price-block {
      margin: 20px 0 28px
    }

    .price-regular {
      font-size: 15px;
      color: #888;
      text-decoration: line-through;
      margin-bottom: 4px
    }

    .price-today {
      font-size: 13px;
      font-weight: 700;
      color: #aaa;
      margin-bottom: 2px
    }

    .price-big {
      font-size: 62px;
      font-weight: 900;
      color: var(--green);
      line-height: 1
    }

    .price-note {
      font-size: 13px;
      color: #888;
      margin-top: 6px
    }

    .cta-btn {
      display: block;
      background: var(--green);
      color: #fff;
      text-decoration: none;
      font-family: var(--font);
      font-size: 19px;
      font-weight: 800;
      padding: 22px 28px;
      border-radius: 5px;
      text-align: center;
      margin: 0 auto;
      max-width: 560px;
      border: none;
      cursor: pointer;
      box-shadow: 0 5px 16px rgba(0, 140, 26, .45);
      transition: background .2s, transform .1s;
      line-height: 1.3
    }

    .cta-btn:hover {
      background: var(--green-h);
      transform: translateY(-1px)
    }

    .cta-btn .cta-sub {
      display: block;
      font-size: 12px;
      font-weight: 400;
      opacity: .85;
      margin-top: 5px
    }

    .secure-row {
      font-size: 12px;
      color: #888;
      text-align: center;
      margin-top: 12px
    }

    .guarantee-box {
      background: #fff;
      border: 2px solid #2980b9;
      border-radius: 8px;
      padding: 28px 30px;
      margin: 36px 0;
      display: flex;
      gap: 24px;
      align-items: flex-start
    }

    .guarantee-box img {
      width: 100px;
      flex-shrink: 0
    }

    .guarantee-box h3 {
      color: #1a5276;
      margin-bottom: 10px
    }

    .guarantee-box p {
      font-size: 15px;
      color: #333
    }

    .faq-item {
      border-bottom: 1px solid #e8e8e8;
      padding: 18px 0
    }

    .faq-item:last-child {
      border-bottom: none
    }

    .faq-item .q {
      font-size: 16px;
      font-weight: 800;
      color: var(--black);
      margin-bottom: 8px
    }

    .faq-item p {
      font-size: 15px;
      color: #555;
      margin: 0
    }

    .closing-section {
      background: var(--black);
      color: #fff;
      padding: 52px 30px;
      margin: 44px 0 0;
      text-align: center
    }

    .closing-section h2 {
      color: #fff;
      font-size: 32px;
      margin-bottom: 18px;
      line-height: 1.2
    }

    .closing-section h2 .red {
      color: var(--red)
    }

    .closing-section p {
      color: #ccc;
      max-width: 620px;
      margin: 0 auto 16px
    }

    footer {
      background: #0a0a0a;
      color: #666;
      text-align: center;
      padding: 28px 20px;
      font-size: 12px;
      line-height: 1.8
    }

    footer a {
      color: #777;
      text-decoration: none
    }

    @media(max-width:600px) {
      .hero h1 {
        font-size: 24px
      }

      h2 {
        font-size: 22px
      }

      .section-banner h2 {
        font-size: 28px
      }

      .section-banner .sub-text {
        font-size: 16px
      }

      .offer-box {
        padding: 24px 18px
      }

      .price-big {
        font-size: 50px
      }

      .cta-btn {
        font-size: 17px;
        padding: 18px
      }

      .testimonial-grid {
        grid-template-columns: 1fr
      }

      .module-card {
        flex-direction: column
      }

      .module-card .mod-img {
        width: 100%;
        height: 160px
      }

      .instructor-box {
        flex-direction: column;
        align-items: center;
        text-align: center
      }

      .bonus-box {
        flex-direction: column;
        align-items: center;
        text-align: center
      }

      .guarantee-box {
        flex-direction: column;
        align-items: center;
        text-align: center
      }

      .logo-header {
        justify-content: center
      }
    }