/* /custom-build: landing look. Mirrors the .parent-page__landing rules of the site stylesheet, scoped to this page. Generated by create-landing-page. */
.page__custom-build {
  --layout-max-width: 1250px !important;
}

/* Title hidden, cover kept: the site stylesheet turns the Notion cover into the hero background. */
.page__custom-build .notion-header__content {
  display: none !important;
}

.page__custom-build .notion-callout {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: visible !important;
}

.page__custom-build .notion-callout .notion-callout__icon {
  display: none !important;
}

.page__custom-build .notion-callout .notion-callout__content {
  margin-inline-start: 0 !important;
  overflow: visible !important;
}

.page__custom-build .notion-callout.bg-gray-light {
  background: #f9f9f8 !important;
}

.page__custom-build .notion-quote {
  border: 0 !important;
  margin: 8px 0 !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

/* Shared blocks reused from the landing pages: customer logos, support quotes */
.page__custom-build #block-f9136b44b6cd254b8c9cf125f1c228e2-super {
  text-align: center !important;
  margin-bottom: 12px !important;
}

.page__custom-build #block-815e42eabf051474068e099132158b02-super.notion-callout .notion-callout__content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
  gap: 32px !important;
  margin: 0 auto !important;
  justify-content: center !important;
}

.page__custom-build #block-815e42eabf051474068e099132158b02-super.notion-callout .notion-callout__content .notion-image {
  padding: 4px 16px !important;
  max-width: 180px !important;
  align-self: center !important;
}

.page__custom-build #block-e08860bf816e1513bda7011f806a7146-super {
  text-align: center !important;
}

.page__custom-build #block-e08860bf816e1513bda7011f806a7146-super p {
  font-size: 1.125rem !important;
  max-width: 40rem !important;
  margin: 2px auto 12px auto !important;
}

.page__custom-build #block-e08860bf816e1513bda7011f806a7146-super .notion-callout {
  border-radius: 24px !important;
  border: 1px solid #eee !important;
  padding: 16px !important;
}

@media (max-width: 680px) {
  .page__custom-build #block-815e42eabf051474068e099132158b02-super.notion-callout .notion-callout__content {
    gap: 16px !important;
  }
  .page__custom-build #block-815e42eabf051474068e099132158b02-super.notion-callout .notion-callout__content .notion-image {
    max-width: 130px !important;
  }
}
/* Hero */
.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super {
  text-align: center !important;
  padding-top: 48px !important;
}

.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super h1 {
  margin: 16px auto 0 !important;
  font-size: clamp(2.6rem, 6vw, 4rem) !important;
}

.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p {
  font-size: 1.125rem !important;
  max-width: 48rem !important;
  margin: 16px auto 0 !important;
}

.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p a.notion-link {
  display: inline-flex !important;
  justify-content: center !important;
  margin-top: 16px !important;
  background: #ffbe3d !important;
  color: #111 !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: var(--rounded-md) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p a.notion-link:hover {
  box-shadow: 0 5px 28px -6px #ffbe3d !important;
}

.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p a.notion-link:active {
  transform: translateY(1px) !important;
}

/* Hero badge (home page "NEW" line) */
.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p:nth-of-type(1) {
  display: table !important;
  margin: 0 auto 6px !important;
  padding: 8px 18px !important;
  background: var(--primary-500) !important;
  font-weight: 700 !important;
  font-size: 1.0625rem !important;
  color: var(--base-black) !important;
  border-radius: 10px !important;
  line-height: 1.4 !important;
  max-width: calc(100% - 8px) !important;
}

.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p:nth-of-type(1) strong {
  background: var(--base-black) !important;
  color: var(--primary-500) !important;
  border-radius: 6px !important;
  padding: 1px 7px !important;
  margin-right: 6px !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.06em !important;
  vertical-align: 1px !important;
}

.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p:nth-of-type(1) a.notion-link {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
}

.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p:nth-of-type(1) a.notion-link:hover {
  background: none !important;
  box-shadow: none !important;
  opacity: 0.75 !important;
}

@media (max-width: 576px) {
  .page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p:nth-of-type(1) {
    font-size: 0.875rem !important;
    padding: 8px 14px !important;
  }
}
.page__custom-build #block-c1be9002a8d22ec3743442b2e98d5b5d-super > .notion-callout__content > p:nth-of-type(4) {
  font-size: 0.875rem !important;
  margin-top: 8px !important;
}

/* Cards */
.page__custom-build #block-e9a2b2883acb65bf341a25e677459b41-super {
  text-align: center !important;
}

.page__custom-build #block-e9a2b2883acb65bf341a25e677459b41-super > .notion-callout__content > p {
  font-size: 1.125rem !important;
  max-width: 40rem !important;
  margin: 2px auto 12px auto !important;
}

.page__custom-build #block-e9a2b2883acb65bf341a25e677459b41-super .notion-callout {
  border-radius: 24px !important;
  border: 1px solid #eee !important;
  padding: 32px !important;
  height: 100% !important;
}

@media (max-width: 680px) {
  .page__custom-build #block-e9a2b2883acb65bf341a25e677459b41-super .notion-callout {
    padding: 16px !important;
  }
}
.page__custom-build #block-e9a2b2883acb65bf341a25e677459b41-super .notion-callout {
  text-align: left !important;
}

.page__custom-build #block-e9a2b2883acb65bf341a25e677459b41-super .notion-callout h3 {
  margin-top: 4px !important;
}

/* Steps: full-width dark band */
.page__custom-build #block-193f89acb534d0b54f5c10b2d5542331-super {
  width: 100vw !important;
  position: relative !important;
  margin-left: -50vw !important;
  height: auto !important;
  left: 50% !important;
  background: var(--gray-900) !important;
  border-radius: 0 !important;
  --column-spacing: 45px !important;
}

.page__custom-build #block-193f89acb534d0b54f5c10b2d5542331-super > .notion-callout__content {
  padding: 80px 96px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.page__custom-build #block-193f89acb534d0b54f5c10b2d5542331-super .notion-heading {
  color: var(--base-white) !important;
}

.page__custom-build #block-193f89acb534d0b54f5c10b2d5542331-super h2 {
  text-align: center !important;
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}

.page__custom-build #block-193f89acb534d0b54f5c10b2d5542331-super h3 {
  margin-top: 4px !important;
  font-size: 22px !important;
}

.page__custom-build #block-193f89acb534d0b54f5c10b2d5542331-super p, .page__custom-build #block-193f89acb534d0b54f5c10b2d5542331-super .highlighted-color {
  color: rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 680px) {
  .page__custom-build #block-193f89acb534d0b54f5c10b2d5542331-super > .notion-callout__content {
    padding: 60px 25px !important;
  }
}
/* Closing call to action: artwork and button of the shared "Create Something Super" block */
.page__custom-build #block-bc3a829b6df57ac95f8db3473460605f-super {
  text-align: center !important;
  padding: 80px 24px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #ffcf6e url("https://assets.super.so/186f4256-f467-4f79-8d6f-40defe12b9b4/images/764a2a48-6882-4799-9176-a3bdfa1ea4c6/footer-cta.png?width=1920&quality=90") center/cover no-repeat !important;
}

.page__custom-build #block-bc3a829b6df57ac95f8db3473460605f-super h2 {
  margin-top: 0 !important;
}

.page__custom-build #block-bc3a829b6df57ac95f8db3473460605f-super > .notion-callout__content > p a.notion-link {
  display: inline-flex !important;
  justify-content: center !important;
  margin-top: 16px !important;
  background: #ffbe3d !important;
  color: #111 !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: var(--rounded-md) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  opacity: 1 !important;
  background: #111 !important;
  color: #fff !important;
  margin-top: 24px !important;
  padding: var(--button-padding) !important;
}

.page__custom-build #block-bc3a829b6df57ac95f8db3473460605f-super > .notion-callout__content > p a.notion-link:hover {
  background: var(--gray-900) !important;
}

/* Request form: white card joined to the closing yellow block; one column so new questions fit without layout changes */
.page__custom-build #block-bc3a829b6df57ac95f8db3473460605f-super {
  padding-bottom: 152px !important;
  scroll-margin-top: 96px !important;
}

.page__custom-build .notion-form__wrapper {
  position: relative !important;
  z-index: 2 !important;
  max-width: 680px !important;
  margin: -104px auto 48px !important;
  padding: 40px !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.25) !important;
}

.page__custom-build .notion-form__wrapper *, .page__custom-build .notion-form__wrapper *::before, .page__custom-build .notion-form__wrapper *::after {
  box-sizing: border-box !important;
}

.page__custom-build .notion-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  max-width: none !important;
}

.page__custom-build .notion-form__field {
  margin: 0 !important;
  padding: 0 !important;
}

.page__custom-build .notion-form__field-title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--gray-900) !important;
}

.page__custom-build .notion-form__field-title-required {
  color: #e0a100 !important;
  margin-left: 2px !important;
}

.page__custom-build .notion-form__input-field {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  font-size: 1rem !important;
  color: #111 !important;
  background: #f9f9f8 !important;
  border: 1px solid #e6e6e3 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}

.page__custom-build .notion-form__input-field::placeholder {
  color: #a3a3a0 !important;
}

.page__custom-build .notion-form__input-field:focus {
  background: #fff !important;
  border-color: #ffbe3d !important;
  box-shadow: 0 0 0 4px rgba(255, 190, 61, 0.28) !important;
}

/* Choice questions: options as pills in a row */
.page__custom-build .notion-form__select-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page__custom-build .notion-form__checkbox-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

.page__custom-build .notion-form__checkbox-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  background: #f9f9f8 !important;
  border: 1px solid #e6e6e3 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.page__custom-build .notion-form__checkbox-label:hover {
  border-color: #ffbe3d !important;
}

.page__custom-build .notion-form__checkbox-label:has(input:checked) {
  background: #fff6e0 !important;
  border-color: #ffbe3d !important;
  box-shadow: 0 0 0 1px #ffbe3d !important;
}

.page__custom-build .notion-form__checkbox-text {
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #111 !important;
  margin: 0 !important;
}

.page__custom-build .notion-form__submit-button {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

.page__custom-build .notion-form__submit-button .notion-button__content {
  width: 100% !important;
  justify-content: center !important;
  height: 52px !important;
  padding: 0 20px !important;
  background: #ffbe3d !important;
  color: #111 !important;
  border: 0 !important;
  border-radius: var(--rounded-md) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: box-shadow 0.15s !important;
}

.page__custom-build .notion-form__submit-button .notion-button__content:hover {
  box-shadow: 0 5px 28px -6px #ffbe3d !important;
}

@media (max-width: 680px) {
  .page__custom-build #block-bc3a829b6df57ac95f8db3473460605f-super {
    padding-bottom: 120px !important;
  }
  .page__custom-build .notion-form__wrapper {
    margin: -80px auto 32px !important;
    width: calc(100% - 24px) !important;
    padding: 24px 20px !important;
  }
}
/* Request form in two columns: short text fields pair up, choices, long answers and the button take the full row */
.page__custom-build .notion-form__wrapper {
  max-width: 880px !important;
}

.page__custom-build .notion-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
  column-gap: 20px !important;
  row-gap: 22px !important;
}

.page__custom-build .notion-form > * {
  min-width: 0 !important;
}

.page__custom-build .notion-form__field.select, .page__custom-build .notion-form > .notion-form__submit-button, .page__custom-build .notion-form > :not(.notion-form__field) {
  grid-column: 1/-1 !important;
}

/* Row order: Email | Current website, then the two choices, then the free-text questions full width.
   Order follows the question order of the Notion form (1 Email, 2 Best time, 3 Kind, 4 Project, 5 Budget, 6 Website). */
.page__custom-build .notion-form > .notion-form__field.email {
  order: 1 !important;
}

.page__custom-build .notion-form > .notion-form__field.url {
  order: 2 !important;
}

.page__custom-build .notion-form > .notion-form__field:nth-child(3) {
  order: 3 !important;
}

.page__custom-build .notion-form > .notion-form__field:nth-child(5) {
  order: 4 !important;
}

.page__custom-build .notion-form > .notion-form__field:nth-child(4) {
  order: 5 !important;
  grid-column: 1/-1 !important;
}

.page__custom-build .notion-form > .notion-form__field:nth-child(2) {
  order: 6 !important;
  grid-column: 1/-1 !important;
}

.page__custom-build .notion-form > .notion-form__submit-button {
  order: 7 !important;
}

/* Choice options as compact pills in a row */
.page__custom-build .notion-form__select-options {
  flex-direction: row !important;
}

.page__custom-build .notion-form__checkbox-wrapper {
  width: auto !important;
  flex: 0 0 auto !important;
}

.page__custom-build .notion-form__checkbox-label {
  width: auto !important;
}

@media (max-width: 680px) {
  .page__custom-build .notion-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}