Embed

<section class="rwg-pay-page">
  <style>
    .rwg-pay-page,
    .rwg-pay-page * {
      box-sizing: border-box;
    }

    .rwg-pay-page {
      --rwg-red: #d9232e;
      --rwg-red-dark: #a9121c;
      --rwg-blue: #173f73;
      --rwg-blue-dark: #0b2344;
      --rwg-navy: #07111f;
      --rwg-navy-2: #0c1727;
      --rwg-text: #f7f9fc;
      --rwg-muted: #b8c2d1;
      --rwg-line: rgba(255, 255, 255, 0.11);
      --rwg-card: rgba(255, 255, 255, 0.055);

      width: 100%;
      position: relative;
      overflow: hidden;
      color: var(--rwg-text);
      background:
        radial-gradient(circle at 12% 12%, rgba(217, 35, 46, 0.18), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(23, 63, 115, 0.25), transparent 32%),
        linear-gradient(135deg, #050b14 0%, #0a1524 50%, #07101d 100%);
      font-family: Arial, Helvetica, sans-serif;
    }

    .rwg-pay-page::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.18;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 42px 42px;
    }

    .rwg-pay-wrap {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
      z-index: 2;
      padding: 76px 0 70px;
    }

    .rwg-pay-hero {
      text-align: center;
      max-width: 850px;
      margin: 0 auto 42px;
    }

    .rwg-pay-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      margin-bottom: 20px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      color: #dfe7f3;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .rwg-pay-kicker-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #46d17d;
      box-shadow: 0 0 16px rgba(70,209,125,.7);
    }

    .rwg-pay-title {
      margin: 0 0 18px;
      font-size: clamp(42px, 7vw, 76px);
      line-height: .98;
      letter-spacing: -.045em;
      font-weight: 900;
      color: #fff;
    }

    .rwg-pay-title span {
      display: inline-block;
      background: linear-gradient(90deg, #ffffff 0%, #d9e3ef 52%, #9fb5cf 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .rwg-pay-subtitle {
      max-width: 700px;
      margin: 0 auto;
      color: var(--rwg-muted);
      font-size: clamp(17px, 2.2vw, 20px);
      line-height: 1.7;
    }

    .rwg-payment-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
      gap: 24px;
      align-items: stretch;
    }

    .rwg-pay-card,
    .rwg-info-card {
      border: 1px solid var(--rwg-line);
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
      box-shadow:
        0 24px 70px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter: blur(8px);
    }

    .rwg-pay-card {
      padding: 38px;
      position: relative;
      overflow: hidden;
    }

    .rwg-pay-card::after {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      top: -70px;
      right: -60px;
      border-radius: 50%;
      background: rgba(217,35,46,.13);
      filter: blur(8px);
      pointer-events: none;
    }

    .rwg-pay-card h2,
    .rwg-info-card h3 {
      margin: 0;
      color: #fff;
    }

    .rwg-pay-card h2 {
      font-size: clamp(27px, 4vw, 38px);
      line-height: 1.15;
      margin-bottom: 12px;
    }

    .rwg-pay-card > p {
      margin: 0 0 28px;
      color: var(--rwg-muted);
      line-height: 1.65;
      font-size: 16px;
    }

    .rwg-pay-instructions {
      display: grid;
      gap: 12px;
      margin: 0 0 30px;
    }

    .rwg-pay-step {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      padding: 14px 15px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035);
      border-radius: 15px;
    }

    .rwg-step-num {
      flex: 0 0 30px;
      width: 30px;
      height: 30px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 13px;
      color: #fff;
      background: linear-gradient(145deg, var(--rwg-red), var(--rwg-red-dark));
      box-shadow: 0 5px 18px rgba(217,35,46,.28);
    }

    .rwg-step-text {
      color: #e8edf5;
      font-size: 15px;
      line-height: 1.5;
      padding-top: 4px;
    }

    .rwg-step-text strong {
      color: #fff;
    }

    .rwg-pay-button {
      width: 100%;
      min-height: 62px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 17px 24px;
      border-radius: 15px;
      color: #fff !important;
      text-decoration: none !important;
      font-size: 17px;
      font-weight: 900;
      letter-spacing: .02em;
      background:
        linear-gradient(135deg, #e62935 0%, #c71520 52%, #9e0e17 100%);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow:
        0 15px 30px rgba(217,35,46,.28),
        inset 0 1px 0 rgba(255,255,255,.2);
      transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
    }

    .rwg-pay-button:hover {
      transform: translateY(-2px);
      filter: brightness(1.07);
      box-shadow:
        0 20px 38px rgba(217,35,46,.36),
        inset 0 1px 0 rgba(255,255,255,.22);
    }

    .rwg-lock-icon {
      width: 21px;
      height: 21px;
      flex: 0 0 21px;
    }

    .rwg-secure-line {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 17px;
      color: #95a4b7;
      font-size: 13px;
      text-align: center;
    }

    .rwg-secure-line svg {
      width: 15px;
      height: 15px;
      opacity: .9;
    }

    .rwg-info-card {
      padding: 34px;
    }

    .rwg-info-card h3 {
      font-size: 24px;
      margin-bottom: 23px;
    }

    .rwg-info-list {
      display: grid;
      gap: 0;
    }

    .rwg-info-item {
      display: flex;
      gap: 14px;
      padding: 17px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .rwg-info-item:first-child {
      padding-top: 0;
    }

    .rwg-info-item:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .rwg-info-icon {
      flex: 0 0 39px;
      width: 39px;
      height: 39px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(23,63,115,.34);
      border: 1px solid rgba(120,163,218,.16);
    }

    .rwg-info-icon svg {
      width: 19px;
      height: 19px;
      stroke: #d7e5f5;
    }

    .rwg-info-copy strong {
      display: block;
      margin-bottom: 4px;
      color: #fff;
      font-size: 15px;
    }

    .rwg-info-copy span {
      display: block;
      color: var(--rwg-muted);
      line-height: 1.5;
      font-size: 14px;
    }

    .rwg-notice {
      margin-top: 24px;
      padding: 18px 19px;
      border-radius: 15px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.08);
      color: #aeb9c8;
      font-size: 13px;
      line-height: 1.6;
    }

    .rwg-notice strong {
      color: #fff;
    }

    .rwg-trust-row {
      margin-top: 25px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .rwg-trust-item {
      text-align: center;
      padding: 16px 12px;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 14px;
      background: rgba(255,255,255,.025);
    }

    .rwg-trust-item strong {
      display: block;
      margin-bottom: 4px;
      color: #fff;
      font-size: 14px;
    }

    .rwg-trust-item span {
      color: #8f9caf;
      font-size: 12px;
    }

    .rwg-bottom-note {
      max-width: 760px;
      margin: 34px auto 0;
      text-align: center;
      color: #909daf;
      font-size: 13px;
      line-height: 1.7;
    }

    .rwg-bottom-note strong {
      color: #d8e0ea;
    }

    @media (max-width: 850px) {
      .rwg-pay-wrap {
        padding: 56px 0 52px;
      }

      .rwg-payment-shell {
        grid-template-columns: 1fr;
      }

      .rwg-pay-card,
      .rwg-info-card {
        padding: 27px;
        border-radius: 21px;
      }
    }

    @media (max-width: 560px) {
      .rwg-pay-wrap {
        width: min(100% - 20px, 1180px);
        padding: 46px 0;
      }

      .rwg-pay-hero {
        margin-bottom: 28px;
      }

      .rwg-pay-title {
        font-size: 44px;
      }

      .rwg-pay-subtitle {
        font-size: 16px;
      }

      .rwg-pay-card,
      .rwg-info-card {
        padding: 22px 18px;
        border-radius: 18px;
      }

      .rwg-pay-button {
        font-size: 16px;
        padding: 16px;
      }

      .rwg-trust-row {
        grid-template-columns: 1fr;
      }
    }
  </style>

  <div class="rwg-pay-wrap">

    <div class="rwg-pay-hero">
      <div class="rwg-pay-kicker">
        <span class="rwg-pay-kicker-dot"></span>
        Secure Online Payment
      </div>

      <h1 class="rwg-pay-title">
        <span>Pay Online</span>
      </h1>

      <p class="rwg-pay-subtitle">
        Conveniently and securely pay your Red White &amp; Glow invoice,
        installation balance, or approved deposit online.
      </p>
    </div>

    <div class="rwg-payment-shell">

      <div class="rwg-pay-card">
        <h2>Make Your Payment</h2>

        <p>
          Use the secure payment portal below to submit payment for an
          approved Red White &amp; Glow invoice or estimate.
        </p>

        <div class="rwg-pay-instructions">

          <div class="rwg-pay-step">
            <div class="rwg-step-num">1</div>
            <div class="rwg-step-text">
              Enter the <strong>payment amount shown on your invoice</strong>
              or the amount provided by Red White &amp; Glow.
            </div>
          </div>

          <div class="rwg-pay-step">
            <div class="rwg-step-num">2</div>
            <div class="rwg-step-text">
              Enter your <strong>Invoice #</strong> and
              <strong>Vehicle Year / Make / Model</strong>.
            </div>
          </div>

          <div class="rwg-pay-step">
            <div class="rwg-step-num">3</div>
            <div class="rwg-step-text">
              Complete the secure checkout and keep your payment confirmation
              for your records.
            </div>
          </div>

        </div>

        <a
          class="rwg-pay-button"
          href="https://buy.stripe.com/fZu5kDdOx018dm3fPQ2Fa00"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Pay Red White and Glow securely online through Stripe"
        >
          <svg class="rwg-lock-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M7 10V7a5 5 0 0 1 10 0v3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <rect x="5" y="10" width="14" height="11" rx="2.5" stroke="currentColor" stroke-width="2"/>
            <path d="M12 14v3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          Pay Securely Online
        </a>

        <div class="rwg-secure-line">
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6l7-3z" stroke="currentColor" stroke-width="2"/>
            <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Secure checkout powered by Stripe
        </div>
      </div>

      <aside class="rwg-info-card">

        <h3>Before You Pay</h3>

        <div class="rwg-info-list">

          <div class="rwg-info-item">
            <div class="rwg-info-icon">
              <svg viewBox="0 0 24 24" fill="none">
                <path d="M4 7h16v10H4z" stroke-width="1.8"/>
                <path d="M7 4h10v3H7zM7 17v3h10v-3" stroke-width="1.8"/>
              </svg>
            </div>
            <div class="rwg-info-copy">
              <strong>Have Your Invoice Ready</strong>
              <span>
                You'll be asked to enter the invoice number associated with
                your payment.
              </span>
            </div>
          </div>

          <div class="rwg-info-item">
            <div class="rwg-info-icon">
              <svg viewBox="0 0 24 24" fill="none">
                <path d="M3 13l2-5h14l2 5" stroke-width="1.8" stroke-linecap="round"/>
                <path d="M5 13v5h2v2M19 13v5h-2v2M5 13h14" stroke-width="1.8" stroke-linecap="round"/>
                <circle cx="8" cy="16" r="1" fill="currentColor" stroke="none"/>
                <circle cx="16" cy="16" r="1" fill="currentColor" stroke="none"/>
              </svg>
            </div>
            <div class="rwg-info-copy">
              <strong>Vehicle Information</strong>
              <span>
                Include the year, make, and model so your payment can be
                matched to the correct installation.
              </span>
            </div>
          </div>

          <div class="rwg-info-item">
            <div class="rwg-info-icon">
              <svg viewBox="0 0 24 24" fill="none">
                <rect x="3" y="6" width="18" height="12" rx="2" stroke-width="1.8"/>
                <path d="M3 10h18" stroke-width="1.8"/>
                <path d="M7 15h4" stroke-width="1.8" stroke-linecap="round"/>
              </svg>
            </div>
            <div class="rwg-info-copy">
              <strong>Secure Processing</strong>
              <span>
                Payment information is entered and processed securely through
                Stripe's hosted checkout.
              </span>
            </div>
          </div>

          <div class="rwg-info-item">
            <div class="rwg-info-icon">
              <svg viewBox="0 0 24 24" fill="none">
                <path d="M5 4h14v16H5z" stroke-width="1.8"/>
                <path d="M8 8h8M8 12h8M8 16h5" stroke-width="1.8" stroke-linecap="round"/>
              </svg>
            </div>
            <div class="rwg-info-copy">
              <strong>Payment Confirmation</strong>
              <span>
                You'll receive confirmation after your payment has been
                submitted successfully.
              </span>
            </div>
          </div>

        </div>

        <div class="rwg-notice">
          <strong>Please note:</strong>
          Only submit payment for an approved Red White &amp; Glow invoice,
          estimate, installation balance, or deposit. If you're unsure of the
          amount due, contact us before submitting payment.
        </div>

      </aside>

    </div>

    <div class="rwg-trust-row">
      <div class="rwg-trust-item">
        <strong>Secure Checkout</strong>
        <span>Powered by Stripe</span>
      </div>

      <div class="rwg-trust-item">
        <strong>Easy Payment</strong>
        <span>Available online 24/7</span>
      </div>

      <div class="rwg-trust-item">
        <strong>Red White &amp; Glow</strong>
        <span>Manchester, Tennessee</span>
      </div>
    </div>

    <p class="rwg-bottom-note">
      Payments submitted through this page are processed by Stripe.
      <strong>Red White &amp; Glow does not collect or store your full card
      information on this website.</strong>
    </p>

  </div>
</section>


Red White and Glow 

Red White and Glow is an aftermarket installer specializing in interior and exterior lighting and accessories for vehicles, serving customers in Manchester, TN. The business provides customized lighting solutions that enhance vehicle aesthetics and functionality, and is generating modest monthly revenue as it grows.