div
h1
Build Faster With Tyro
h2

        Integrate with Tyro to accept payments in-person and online, and connect services that help you run your business. Find guides, API references, and resources to take your integration from development to production.
    
div
h3
Explore Tyro's developer resources
div
a
div
img
h4
Documentation
p
Learn how to integrate, test, certify, and take your Tyro integration live.
a
div
img
h4
API Explorer
p
Explore endpoints, notification events, schemas, and more for Tyro's APIs.
style

.landing-hero {
  background-color: #000000;
  color: white;
  padding: 5rem 2rem 4rem 2rem;
  text-align: center;
  text-decoration: none;
}

.landing-hero h1 {
  font-size: 3.5rem;
  padding-bottom: 2rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: white;
  letter-spacing: -0.02em;
}

.landing-hero h2 {
  font-size: 1.5rem;
  font-weight: 300;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.5;
}

.landing-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.section-header {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 300;
  margin: 2rem 0 3rem 0;
  color: #0A0524;
  letter-spacing: -0.01em;
}

.tiles-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  margin: 0 auto;
  max-width: 1200px;
}

.tile {
  flex: 1 1 300px;
  min-width: 250px;
  max-width: 350px;
  background: white;
  border: 1.5px solid #1C8DFF;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

a.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px #B2E71C;
  text-decoration: none !important;
}

.tile-icon {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  height: 120px;
  width: 100%;
}

.tile-icon img {
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tile h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: #0A0524;
  line-height: 1.3;
}

.tile p {
  font-size: 1rem;
  line-height: 1.6;
  color: #424242;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
  text-align: center;
}

.tile-link {
  display: inline-block;
  color: #424242;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  margin-top: auto;
  transition: color 0.2s ease;
  text-align: left;
  align-self: flex-start;
}

.tile-link:hover {
  color: #2D57DF;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .tiles-container {
    gap: 1.5rem;
  }

  .tile {
    flex: 0 1 calc(50% - 1rem);
    max-width: none;
  }
}

@media (max-width: 768px) {
  .landing-hero {
    padding: 4rem 1.5rem 3rem 1.5rem;
  }

  .landing-hero h1 {
    font-size: 2.5rem;
  }

  .landing-hero h2 {
    font-size: 1.25rem;
  }

  .landing-content {
    padding: 0 1.5rem 3rem 1.5rem;
  }

  .section-header {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }

  .tiles-container {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  .tile {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: auto;
  }

  .tile-icon {
    height: 100px;
  }

  .tile-icon img {
    max-width: 100px;
    max-height: 100px;
  }
}

[data-component-name="Layout/DocumentationLayout"] > section {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
}