.color_card {
  display: block;
  max-width: 268px;
  border-radius: 20px;
  text-decoration: none;
  color: #1c1c1c;
  margin: 1rem 0;
  background-color: #fffbeb;
  border: none !important;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.color_card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: none !important;
}

.color_card-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.color_card-image {
  max-width: 100%;
  height: auto;
  border-radius: 20px 20px 0 0;
  margin: 0;
}

.color_card-text-content {
  text-align: start;
  padding: 1.5rem;
}

.color_card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.color_card-description {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #757575;
}

.color_card-description p {
  margin: 0;
}

.dark .horizontal_color_card h2 {
  color: #392827;
}

.color_card.yellow,
.horizontal_card.yellow,
.icon-container.yellow {
  background-color: #fff3c7;
}

.dark .color_card.yellow,
.dark .horizontal_card.yellow,
.dark .icon-container.yellow {
  background-color: #fff3c7;
}

.color_card.purple,
.horizontal_card.purple,
.icon-container.purple {
  background-color: #dde0ff;
}

.dark .color_card.purple,
.dark .horizontal_card.purple,
.dark .icon-container.purple {
  background-color: #dde0ff;
}

.color_card.red,
.horizontal_card.red,
.icon-container.red {
  background-color: #ffe3e0;
}

.dark .color_card.red,
.dark .horizontal_card.red,
.dark .icon-container.red {
  background-color: #ffe3e0;
}

.color_card.lilac,
.horizontal_card.lilac,
.icon-container.lilac {
  background-color: #f3ebff;
}

.dark .color_card.lilac,
.dark .horizontal_card.lilac,
.dark .icon-container.lilac {
  background-color: #f3ebff;
}

.color_card.pink,
.horizontal_card.pink,
.icon-container.pink {
  background-color: #f5d6e8;
}

.dark .color_card.pink,
.dark .horizontal_card.pink,
.dark .icon-container.pink {
  background-color: #f5d6e8;
}

.color_card.green,
.horizontal_card.green,
.icon-container.green {
  background-color: #ccfae9;
}

.dark .color_card.green,
.dark .horizontal_card.green,
.dark .icon-container.green {
  background-color: #ccfae9;
}

.color_card.blue,
.horizontal_card.blue,
.icon-container.blue {
  background-color: #c5f0f5;
}

.dark .color_card.blue,
.dark .horizontal_card.blue,
.dark .icon-container.blue {
  background-color: #c5f0f5;
}


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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  min-height: 100vh;
  transition: all 0.3s ease;
}

body {
  background: white;
}

body.dark {
  background: #000000;
}

.hero-section {
  text-align: center;
  position: relative;
  padding: 6.5rem 20px 160px 20px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 60px 16px 160px 16px;
    min-height: 300px;
  }
}

.dark .hero-section {
  background: #111827;
}

.hero-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* make sure hero content is above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-content h1 {
  font-size: 5.125rem;
  max-width: 1000px;
  font-weight: 550;
  margin-bottom: 2.5rem;
  letter-spacing: -5px;
  line-height: 5.5rem;
  color: #1a1a1a;
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        letter-spacing: -.075rem;
        line-height: 2.8rem;
    }
}

.dark .hero-content h1 {
  color: #ffffff;
}

.hero-content p {
  font-size: 1rem;
  line-height: 1.4375rem;
  font-weight: 400;
  color: black;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 768px) {
  .hero-content p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

.dark .hero-content p {
  color: #d1d5db;
}

.features-section {
  position: relative;
  margin-top: -100px; /* Negative margin to overlap hero */
  padding: 0 20px 80px 20px;
  z-index: 10;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.features-grid .card h2 {
  font-weight: 500 !important;
}

.features-grid .card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 0;
}

.dark .features-grid .card {
  background-color: rgb(28 28 28);
  border-color: #424242;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.features-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.dark .features-grid .card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.feature-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.feature-content {
  padding: 24px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.dark .feature-card h3 {
  color: white;
}

.feature-card p {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.dark .feature-card p {
  color: #9ca3af;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero {
    padding: 60px 16px 150px 16px;
  }

  .features-section {
    margin-top: -80px;
    padding: 0 16px 60px 16px;
  }

  .theme-toggle {
    top: 20px;
    right: 20px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


.horizontal_card {
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid #110f0e1a;
  margin-top: 20px;
  border-radius: 8px;
}

.dark .horizontal_card {
  border-color: #ffffff1a;
}

.horizontal_card .card-image-container {
  flex: 1;
  min-width: 45%;
}

.horizontal_card .card-image-container img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  margin: 0 !important;
}

.horizontal_card .card-content-container {
  flex: 2;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
}

.horizontal_card .card-title {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
}

.horizontal_card .card-description {
  font-size: 1rem;
  line-height: 1.5;
  flex-grow: 1;
}

.horizontal_card .card-description p {
  margin: 0;
  font-weight: 350;
}

.dark-content p {
  color: #454242;
}

.horizontal_card .card-link {
  margin-top: 1rem;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  border: none;
  max-width: fit-content;
  font-weight: 500;
}

.horizontal_card .card-link:hover {
  text-decoration: underline;
}


/* The root link element */
.icon-title-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin: 0 auto;
}

/* Style the icon itself (passed from react-icons) */
.icon-container svg {
  width: 32px;
  height: 32px;
  color: #5b21b6; /* A darker purple for the icon */
}

.item-title {
  font-weight: 500;
  text-align: center;
  margin: 0;
  font-size: 0.9rem;
}

.icon-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ede9fe;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark .icon-container {
  background-color: #4c1d95;
}

.icon-container svg {
  width: 24px;
  height: 24px;
  color: #000;
}

.dark .icon-container svg {
  color: #fff;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* THE FIX: Translate by -50% of the element's own width.
      Since the logo-track is 200% the width of the visible logos,
      -50% is the exact distance needed for a seamless loop.
    */
    transform: translateX(-50%);
  }
}

.logo-carousel-container {
  padding: 2rem 0;
  border: 1px solid #110f0e1a;
  border-radius: 2px;
  margin-top: 20px;
}

.dark .logo-carousel-container {
  border-color: #333;
}

.carousel-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
  padding: 0 2rem;
}

.logo-carousel-scroller {
  overflow: hidden;
  position: relative;
}

/* .logo-carousel-scroller:hover .logo-track {
  animation-play-state: paused;
} */

.logo-track {
  display: flex;
  width: calc(200px * var(--logo-count));
  animation: scroll 12s linear infinite;
}

.logo-track a {
  text-decoration: none;
  color: inherit;
  border: none;
}

.logo-item {
  width: 100px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.logo-item:hover {
  transform: scale(1.1);
}

.logo-item svg {
  max-width: 100%;
  max-height: 56px;
  opacity: 0.95;
  transition: opacity 0.2s ease;
  border-radius: 8px;
}

.logo-item:hover svg {
  opacity: 1;
}

.explore-link {
  display: block;
  width: fit-content; /* Set width to match content */
  margin-left: 2rem; /* Add space on the right, aligns with title */
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  text-decoration: underline;
  transition: color 0.2s ease;
  border-bottom: none !important;
}

.dark .explore-link {
  color: #eee;
}

.explore-link:hover {
  color: #e88178;
}


div.card .prose a.link {
  color: #007bff;
  text-decoration: underline;
  font-weight: 500;
}

div.card .prose a.link:visited {
  color: #551a8b;
}

div.card .prose a.link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: red;
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  font-weight: 300;
  line-height: inherit !important;
}

.overview_cards_container .card {
  max-width: 269px !important;
}

.card-group {
  justify-items: baseline;
}

.dark .group img {
  background-color: transparent !important;
}

.param-head {
  div[data-component-part="field-name"] {
    color: #000 !important;
  }
}

.dark .param-head {
  div[data-component-part="field-name"] {
    color: #fff !important;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500 !important;
}

.block.absolute.inset-0.overflow-hidden {
  background: none !important;
}

.banner_img_cover {
  border-radius: 8px;
}

table th {
  text-align: left !important;
}


// check if content side layout is empty
function checkContentSideLayout() {
  const sideLayout = document.getElementById("content-side-layout");
  if (sideLayout) {
    const sideLayoutContent = sideLayout.querySelector("div");
    if (
      !sideLayoutContent ||
      !sideLayoutContent.hasChildNodes() ||
      sideLayoutContent.textContent.trim() === ""
    ) {
      sideLayout.style.display = "none";
    }
  }
}

function addCodeBlockClassToDivs() {
  // Select all pre elements and get their direct parent divs
  const preElements = document.querySelectorAll("pre");

  preElements.forEach((pre) => {
    const parentDiv = pre.parentElement;
    // Only process if the parent is a div and doesn't already have the class
    if (
      parentDiv?.tagName === "DIV" &&
      !parentDiv.classList.contains("codeblock-dark")
    ) {
      parentDiv.classList.add("codeblock-dark", "dark:bg-codeblock");
      pre.classList.add("bg-[#0F1117]");
    }
  });

  // Check content side layout after processing code blocks
  checkContentSideLayout();
}

// Initial scan when the script first runs (for initial page load/hydration)
addCodeBlockClassToDivs();

// Set up a MutationObserver to watch for changes in the DOM
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // If nodes were added to the DOM
    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
      // Re-run our function to check for new code blocks
      addCodeBlockClassToDivs();
    }
  }
});

// Start observing the document body for changes
observer.observe(document.body, {
  childList: true, // Watch for direct children being added/removed
  subtree: true, // Watch for changes deeply within the body
});


Card Network	Card Number	CVV	Expiry date	Account Funding Type
Visa	4111 1111 1111 1111	Any 3 digit number	Any future expiry date	Debit
Visa	4242 4242 4242 4242	Any 3 digit number	Any future expiry date	Credit
Mastercard	5252 5252 5252 5258	Any 3 digit number	Any future expiry date	Debit
Mastercard	5555 5555 5555 4444	Any 3 digit number	Any future expiry date	Credit
Visa / Cartes Bancaires	4035 5000 0000 0000	Any 3 digit number	Any future expiry date
Mastercard / Cartes Bancaires	5132 0000 0000 0000	Any 3 digit number	Any future expiry date
Cartes Bancaires	4970 0000 0000 0008	Any 3 digit number	Any future expiry date

Scenario	Card Network	Card Number
Generic decline	Visa	4000 0000 0000 0002
Generic decline	Mastercard	5100 0000 0000 0008
Generic fail	Visa	4000 0000 0000 0010
Generic fail	Mastercard	5100 0000 0000 0016

Testing

Primer Sandbox Processor

Test card payments

Test mocked payment methods

Testing

​Test card payments

​Test mocked payment methods

Test card payments

Test mocked payment methods