.hero {
  padding-block: calc(var(--spacing) * 20);
  padding-inline: calc(var(--spacing) * 6);
  position: relative;
  background: linear-gradient(rgb(255, 255, 255) 0%, rgb(244, 244, 244) 100%);
}

.leading-content {
  margin-inline: auto;
  max-width: 72rem;
}

.inner-leading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 12);
}

@media (min-width: 64rem) {
  .inner-leading-content {
    flex-direction: row;
  }
}

.brief {
  flex: 1;
  text-align: center;
}

@media (min-width: 64rem) {
  .brief {
    text-align: left;
  }
}

.brief-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 6);
}

@media (min-width: 64rem) {
  .brief-header {
    justify-content: start;
  }
}

.head-apple-icon-container {
  width: calc(var(--spacing) * 16);
  height: calc(var(--spacing) * 16);
  background: var(--primary);
  border-radius: calc(var(--radius) + 4px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.head-apple-icon {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  color: var(--primary-foreground);
}

.trademark-title {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

.trademark-subtitle {
  color: var(--muted-foreground);
}

.trademark-target {
  --tw-leading: var(--leading-tight);
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
  margin-bottom: calc(var(--spacing) * 6);
}

@media (min-width: 72rem) {
  .trademark-target {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
}

.trademark-description {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  color: var(--muted-foreground);
  margin-bottom: calc(var(--spacing) * 8);
  max-width: var(--container-2xl);
  margin-inline: auto;
}

@media (min-width: 72rem) {
  .trademark-description {
    margin-left: 0;
  }
}

.intro-buttons-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  justify-content: center;
}

@media (min-width: 40rem) {
  .intro-buttons-section {
    flex-direction: row;
  }
}

@media (min-width: 64rem) {
  .intro-buttons-section {
    justify-content: left;
  }
}

.prime-button {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--primary-foreground);
  text-align: center;
  padding-block: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 8);
  background-color: var(--primary);
  border-radius: var(--radius);
  text-decoration: inherit;
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
}

.light-button {
  background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--secondary-foreground);
  text-align: center;
  padding-block: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 8);
  background-color: var(--secondary);
  border-radius: var(--radius);
  text-decoration: inherit;
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
  border-color: var(--border);
}

.logo-card-container {
  flex: 1;
  display: flex;
  justify-content: center;
}

.logo-card-wrapper {
  position: relative;
}

.logo-card-content {
  width: calc(var(--spacing) * 80);
  height: calc(var(--spacing) * 80);
  background: var(--accent);
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
  border-radius: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: rgb(0,0,0);
  /*border: 1px solid rgba(0,0,0,0.1);*/
}

.logo-area {
  object-fit: cover;
  /*border-radius: var(--radius-2xl);*/
  width: calc(var(--spacing) * 72);
  height: calc(var(--spacing) * 72);
  /*background: white;*/
}

.logo-card {
  object-fit: cover;
  /*border-radius: var(--radius-2xl);*/
  width: calc(var(--spacing) * 72);
  height: calc(var(--spacing) * 72);
}

.apple-developer-badge {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  padding: calc(var(--spacing) * 4);
  background-color: var(--background);
  border-color: var(--border);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-radius: calc(var(--radius) + 4px);
  bottom: calc(var(--spacing) * -4);
  right: calc(var(--spacing) * -4);
  position: absolute;
  border: 1px solid rgba(0,0,0,0.1);
  text-decoration: none;
}

.apple-developer-badge-conent {
  gap: calc(var(--spacing) * 2);
  align-items: center;
  display: flex;
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
}

.apple-badge-icon {
  color: var(--primary);
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.apple-developer-badge-text {
  color: var(--foreground);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}