/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/api-code-section/api-code.css ***!
  \*****************************************************************************************************************/

/*!*****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/headline-animation/headline-animation.css ***!
  \*****************************************************************************************************************************/
.animated {
	animation-duration: .7s;
	animation-fill-mode: both
}

.fadeInUp {
	animation-name: fadeInUp;
	opacity: 0;
	transform: translate3d(0, 100%, 0)
}

.fadeOutDown {
	animation-name: fadeOutDown;
	opacity: 1;
	transform: translateZ(0)
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 30%, 0)
	}

	to {
		opacity: 1;
		transform: translateZ(0)
	}
}

@keyframes fadeOutDown {
	0% {
		opacity: 1;
		transform: translateZ(0)
	}

	to {
		opacity: 0;
		transform: translate3d(0, 30%, 0)
	}
}

/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/index.scss ***!
  \*****************************************************************************************************************************************************************/
main section .title-extra-large {
	font-size: 3.4rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 125%
}

@media (min-width:992px) {
	main section .title-extra-large {
		font-size: 6.4rem;
		letter-spacing: -.04em;
		line-height: 130%
	}
}

main section .title-large {
	font-size: 3.4rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 125%
}

@media (min-width:992px) {
	main section .title-large {
		font-size: 5.6rem;
		letter-spacing: -.04em;
		line-height: 130%
	}
}

main section .title-medium {
	font-size: 2.8rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 130%
}

@media (min-width:992px) {
	main section .title-medium {
		font-size: 4.8rem;
		letter-spacing: -.04em;
		line-height: 130%
	}
}

main section .title-small {
	font-size: 3.2rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 135%
}

@media (min-width:992px) {
	main section .title-small {
		letter-spacing: -.04em;
		line-height: 135%
	}
}

main section .title-extra-small {
	font-size: 2.4rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 135%
}

@media (min-width:992px) {
	main section .title-extra-small {
		letter-spacing: -.03em;
		line-height: 135%
	}
}

main section .title-super-text {
	font-size: 1.6rem;
	font-weight: var(--font-weight-semi-bold);
	letter-spacing: -.02em;
	line-height: 150%
}

@media (min-width:992px) {
	main section .title-super-text {
		letter-spacing: -.02em;
		line-height: 150%
	}
}

main section .copy-xxl {
	font-size: 2.4rem;
	letter-spacing: -.03em;
	line-height: 150%
}

main section .copy-extra-large {
	font-size: 2rem;
	letter-spacing: -.03em;
	line-height: 150%
}

main section .copy-large {
	font-size: 1.8rem;
	letter-spacing: -.02em;
	line-height: 150%
}

main section .copy-medium {
	font-size: 1.6rem;
	letter-spacing: -.02em;
	line-height: 150%
}

@media (min-width:992px) {
	main section .copy-medium {
		line-height: 175%
	}
}

main section .copy-small {
	font-size: 1.4rem;
	letter-spacing: -.02em;
	line-height: 175%
}

#new-home-hero {
	--color-blue-40: 102 179 255;
	background-image: url(/content/dam/twilio-com/global/en/homepage/homepage-new/hero-background.png/jcr:content/renditions/compressed-1600.webp);
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: cover
}

#new-home-hero .slider-item {
	text-align: center
}

#new-home-hero .slider-item .eyebrow {
	justify-self: center
}

#new-home-hero .button.button-primary {
	--button-background: var(--color-blue-60);
	align-self: center;
	flex: inherit;
	padding: .8rem 3.2rem
}

#new-home-hero .button.button-primary:hover {
	--button-background: var(--color-blue-70)
}

#new-home-hero .button.button-primary:active,
#new-home-hero .button.button-primary:focus {
	--button-background: var(--color-blue-80)
}

#new-home-hero .button.link {
	--button-color: var(--color-white);
	align-self: center;
	color: rgb(var(--button-color));
	flex: inherit
}

#new-home-hero .button.link:hover {
	--button-color: var(--color-blue-30)
}

#new-home-hero .button.link:active,
#new-home-hero .button.link:focus {
	--button-color: var(--color-blue-40)
}

#new-home-hero .idc-quote {
	line-height: 2rem
}

#new-home-hero .idc-quote b {
	font-weight: var(--font-weight-medium)
}

#new-home-hero .idc-quote.with-border {
	border-right: 1px solid #414957;
	margin-right: -2rem;
	padding-right: 2rem
}

#new-home-persona-buttons {
	background-color: rgb(var(--color-ink));
	isolation: isolate;
	overflow-x: hidden;
	padding-top: 0;
	position: relative
}

#new-home-persona-buttons:after {
	background-color: rgb(var(--color-white));
	border-top-left-radius: 50% 100%;
	border-top-right-radius: 50% 100%;
	bottom: 0;
	content: "";
	height: 25%;
	left: -15%;
	position: absolute;
	right: -15%;
	z-index: -1
}

#new-home-persona-buttons .button {
	box-shadow: var(--shadow-image);
	flex: 1;
	width: 100%
}

#new-home-persona-buttons .button-text {
	align-items: center;
	color: rgb(var(--color-ink));
	display: flex;
	font-weight: var(--font-weight-semi-bold);
	justify-content: space-between
}

#new-home-persona-buttons .button-icon {
	color: rgb(var(--color-twilio-red));
	width: 2.8rem !important
}
#new-home-persona-buttons .button:hover .button-icon {
	color: #0263e0;
	transition: color 0.3s ease-in-out;
}

#new-home-persona-buttons .inverse .button.button-primary:hover {
	--button-background: var(--color-white);
	--button-border: var(--color-white);
	--button-color: var(--color-white)
}
#new-home-persona-buttons .button.button-primary:hover.inverse, a:hover .button.button-primary.inverse {
    --button-background: var(--color-white);
	--button-border: var(--color-white);
	--button-color: var(--color-white)
}

#new-home-persona-buttons .inverse .button.button-primary:hover .button-icon {
	color: #0263e0;
	transition: color .3s ease-in-out
}

#new-home-hero-titles h1 {
	font-size: 3.4rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 125%
}

@media (min-width:992px) {
	#new-home-hero-titles h1 {
		font-size: 6.4rem;
		letter-spacing: -.04em;
		line-height: 130%
	}
}

#new-home-hero-titles br {
	display: none
}

@media (min-width:768px) {
	#new-home-persona-buttons:after {
		height: 95%
	}

	#new-home-hero .slider-item {
		text-align: left
	}

	#new-home-hero .slider-item .eyebrow {
		justify-self: flex-start
	}

	#new-home-hero-titles br {
		display: inline
	}
}

#new-home-devs div.button-container a.button-primary {
	color: rgb(var(--color-ink))
}

#new-home-devs div.button-container a.button-primary:hover,
#new-home-devs div.button-container a.button-secondary:hover {
	background-color: #043cb5;
	border-color: #043cb5;
	color: var(--color-white)
}

#new-home-devs div.code-snippet-slides {
	background: #0a1323;
	box-shadow: none
}

#new-home-devs nav {
	background: #121c2d;
	box-shadow: none;
	justify-content: space-between;
	padding-left: 0;
	padding-right: 0
}

#new-home-devs .code-snippet-button {
	width: 100%
}

#new-home-devs .logo-list {
	display: none
}

#new-home-devs .code-snippet-button svg {
	margin: auto
}

#new-home-devs .code-snippet-button[aria-selected=true] {
	--button-border-alpha: 0;
	background: #0a1323;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px
}

#new-home-devs-title {
	margin: var(--spacing-size-6)
}

#new-home-devs .grid-container.three-columns {
	margin-top: 6.4rem
}

#new-home-devs .rolling-text {
	color: rgb(var(--color-saffron));
	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace
}

#new-home-devs h2 {
	margin-block: var(--spacing-size-1)
}

#new-home-devs-title .card-icon {
	color: rgb(var(--color-ink))
}

#new-home-devs h2,
#new-home-devs-title h2,
#new-home-lowcode h2 {
	font-size: 2.8rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 130%
}

@media (min-width:992px) {

	#new-home-devs h2,
	#new-home-devs-title h2,
	#new-home-lowcode h2 {
		font-size: 4.8rem;
		letter-spacing: -.04em;
		line-height: 130%
	}

	#new-home-devs .richtext span.copy-medium {
		font-size: 1.8rem;
		letter-spacing: -.02em;
		line-height: 150%
	}
}

@media (max-width:768px) {
	#new-home-devs div.button-container {
		flex-direction: row
	}

	#new-home-devs div.code-snippet {
		display: none
	}

	#new-home-devs .logo-list {
		display: flex
	}

	#new-home-devs .grid-container.three-columns {
		margin-top: 0 !important
	}

	#new-home-devs-title {
		margin-left: 0;
		margin-right: 0
	}

	#new-home-devs nav {
		background: #0a1323;
		box-shadow: none
	}
}

pre::-webkit-scrollbar {
	background: #0a1323;
	height: 8px;
	width: 8px
}

pre::-webkit-scrollbar-thumb {
	background: hsla(0, 0%, 100%, .2);
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .75);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .75)
}

pre::-webkit-scrollbar-corner {
	background: #0a1323
}

#new-home-lowcode .media-image {
	margin-top: -4rem
}

#new-home-lowcode h2 {
	font-size: 2.8rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 130%
}

@media (min-width:992px) {
	#new-home-lowcode h2 {
		font-size: 4.8rem;
		letter-spacing: -.04em;
		line-height: 130%
	}
}

#new-home-lowcode .card-icon {
	color: rgb(var(--color-ink))
}

@media (max-width:768px) {
	#new-home-lowcode div.button-container {
		flex-direction: row
	}

	#new-home-lowcode div.offset-40-60 {
		row-gap: 64px
	}
}

#new-home-journey {
	color: rgb(var(--color-ink))
}

#new-home-journey h2 {
	font-size: 2.8rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 130%
}

@media (min-width:992px) {
	#new-home-journey h2 {
		font-size: 4.8rem;
		letter-spacing: -.04em;
		line-height: 130%
	}
}

#new-home-journey .section-header p {
	font-size: 1.8rem;
	letter-spacing: -.02em;
	line-height: 150%
}

@media (min-width:992px) {
	#new-home-journey .section-header p {
		font-size: 2.4rem;
		letter-spacing: -.03em;
		line-height: 150%
	}
}

#new-home-journey .accordion-item {
	padding-inline: var(--spacing-size-4)
}

#new-home-journey .accordion-button {
	font-size: 1.6rem;
	letter-spacing: -.02em;
	line-height: 150%
}

@media (min-width:992px) {
	#new-home-journey .accordion-button {
		font-size: 2rem;
		letter-spacing: -.03em;
		line-height: 175%;
		line-height: 150%
	}
}

#new-home-journey .accordion-arrow svg {
	width: auto
}

#new-home-journey div.richtext .accordion-content {
	font-size: 1.6rem;
	letter-spacing: -.02em;
	line-height: 150%
}

@media (min-width:992px) {
	#new-home-journey div.richtext .accordion-content {
		line-height: 175%
	}
}

#new-home-journey div.richtext .accordion-card__subtitle {
	font-size: 1.4rem;
	letter-spacing: -.02em;
	line-height: 175%
}

@media (max-width:480px) {
	#new-home-journey div.richtext>p {
		font-size: 16px !important;
		text-align: center !important
	}

	#new-home-journey>div>div.grid-container.two-columns.default.medium-gap.center>div:nth-child(2) {
		display: none
	}

	#new-home-journey>div>div.grid-container.offset-25-75.default.medium-gap>div:nth-child(2)>div {
		gap: var(--spacing-size-5) var(--spacing-size-2);
		justify-content: space-evenly;
		margin: 0 15%
	}
}

@media (max-width:375px) {
	#new-home-journey>div>div.grid-container.offset-25-75.default.medium-gap>div:nth-child(2)>div {
		gap: var(--spacing-size-5) var(--spacing-size-2);
		justify-content: space-evenly;
		margin: 0
	}
}

.accordion-container {
	color: #21293f
}

.accordion-card {
	background-color: #fdf7f4;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
	margin-top: 20px;
	padding: 16px;
	position: relative
}

.accordion-card__no-background {
	background-color: #fff;
	margin-bottom: 16px;
	padding: 0
}

.accordion-card__no-background:hover .accordion-card__title {
	color: #0263e0;
	text-decoration: underline
}

.accordion-card__no-background:hover .accordion-icon {
	filter: invert(26%) sepia(71%) saturate(2574%) hue-rotate(204deg) brightness(93%) contrast(103%)
}

.accordion-icon-twilio {
	background-image: url(/content/dam/twilio-com/global/en/homepage/homepage-new/twilio_mark.svg)
}

.accordion-icon-twilio-engage {
	background-image: url(/content/dam/twilio-com/core-assets/icons/product/twilio_engage.svg);
	filter: invert(98%) sepia(20%) saturate(7478%) hue-rotate(311deg) brightness(94%) contrast(102%)
}

.accordion-icon-twilio-segment {
	background-image: url(/content/dam/twilio-com/core-assets/icons/product/twilio_segment.svg);
	filter: invert(100%) sepia(43%) saturate(2043%) hue-rotate(83deg) brightness(83%) contrast(115%)
}

.accordion-icon-twilio-messagingx {
	background-image: url(/content/dam/twilio-com/core-assets/icons/product/twilio_messaging.svg);
	filter: invert(20%) sepia(45%) saturate(4930%) hue-rotate(339deg) brightness(119%) contrast(90%)
}

.accordion-icon-twilio-emailapi {
	background-image: url(/content/dam/twilio-com/core-assets/icons/product/twilio_sendgrid-email-api.svg);
	filter: invert(74%) sepia(29%) saturate(5023%) hue-rotate(177deg) brightness(93%) contrast(91%)
}

.accordion-icon-twilio-flex {
	background-image: url(/content/dam/twilio-com/core-assets/icons/product/twilio_flex.svg);
	filter: invert(53%) sepia(42%) saturate(4767%) hue-rotate(2deg) brightness(105%) contrast(103%)
}

.accordion-icon-twilio-trustedactivation {
	background-image: url(/content/dam/twilio-com/core-assets/icons/product/twilio_verify.svg)
}

.accordion-icon-twilio-trustedactivation,
.accordion-icon-twilio-trustedactivation-lookup {
	filter: invert(20%) sepia(45%) saturate(4930%) hue-rotate(339deg) brightness(119%) contrast(90%)
}

.accordion-icon-twilio-trustedactivation-lookup {
	background-image: url(/content/dam/twilio-com/core-assets/icons/product/twilio_lookup.svg)
}

.richtext p {
	margin-bottom: 0
}

.accordion-card__column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5px
}

.accordion-card__column.featured-product {
	justify-content: flex-start
}

.accordion-card__title {
	color: #121c2d;
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	padding: 0
}

.accordion-card__subtitle {
	color: #21293f;
	font-size: 12px;
	font-weight: 325;
	margin: 0;
	padding: 0
}

.accordion-icon {
	background-size: cover;
	display: block;
	height: 31px;
	width: 30px
}

.accordion-card__logo {
	margin-top: 5px;
	min-width: 30px
}

.text-divider {
	align-items: center;
	display: flex;
	margin-top: 1rem
}

.text-divider:after {
	background-color: #e1e3ea;
	content: "";
	flex-grow: 1;
	height: 1px;
	margin-left: .5rem
}

.text-divider-title {
	color: #1b191d;
	font-size: 18px;
	font-weight: 700;
	line-height: 175%
}

.stat-source {
	color: #21293f;
	font-size: 12px
}

.anchor-url {
	height: 100%;
	position: absolute;
	text-decoration: none;
	width: 100%
}

.source-link {
	color: #21293f !important
}

#new-home-cards h2,
#new-home-wrapup h2 {
	font-size: 2.8rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 130%
}

@media (min-width:992px) {

	#new-home-cards h2,
	#new-home-wrapup h2 {
		font-size: 4.8rem;
		letter-spacing: -.04em;
		line-height: 130%
	}
}

#new-home-wrapup {
	--section-padding: var(--spacing-size-7);
	text-align: center
}

#new-home-wrapup .button.button-primary {
	align-self: center;
	flex: inherit;
	padding: .8rem 3.2rem
}

#new-home-wrapup .button.link {
	align-self: center;
	flex: inherit
}

#new-home-wrapup .eyebrow {
	display: block
}

#new-home-wrapup .button-container {
	flex-direction: column
}

#new-home-wrapup .grid-container {
	gap: 5rem
}

@media (min-width:992px) {
	#new-home-wrapup #wrapup-hero-desc .copy-large {
		font-size: 2.4rem;
		letter-spacing: -.03em;
		line-height: 150%
	}
}

@media (min-width:768px) {
	#new-home-cards {
		--section-padding: var(--spacing-size-7)
	}

	#new-home-wrapup {
		text-align: left
	}

	#new-home-wrapup .eyebrow {
		display: flex
	}

	#new-home-wrapup .button-container {
		flex-direction: row
	}
}

#new-home-stories {
	background-image: url(/content/dam/twilio-com/global/en/homepage/homepage-new/personas-bkgd.svg);
	background-position-x: center;
	background-position-y: top;
	background-repeat: no-repeat;
	background-size: 100%;
	color: rgb(var(--color-ink))
}

#stories-slider .testimonial {
	padding-top: 4.8rem
}

#stories-slider .grid-container {
	padding: 0
}

#stories-slider .testimonial {
	border-radius: 8px 0 0 8px
}

#stories-slider .grid-container-column:nth-child(2) {
	padding: var(--spacing-size-6)
}

#new-home-stories h2 {
	font-size: 2.8rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 130%
}

@media (min-width:992px) {
	#new-home-stories h2 {
		font-size: 4.8rem;
		letter-spacing: -.04em;
		line-height: 130%
	}
}

#new-home-stories h3 {
	font-size: 3.2rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.03em;
	line-height: 135%
}

@media (min-width:992px) {
	#new-home-stories h3 {
		letter-spacing: -.04em;
		line-height: 135%
	}

	#new-home-powered-by-twilio-desc .copy-large {
		font-size: 2.4rem;
		letter-spacing: -.03em;
		line-height: 150%
	}
}

#new-home-stories .column-control:first-child .grid-container .grid-container-column:nth-child(2) .button-icon {
	color: rgb(var(--color-twilio-red));
	width: 2.8rem
}

#new-home-stories .column-control:first-child .grid-container .grid-container-column:nth-child(2) .button-text:hover .button-icon {
	color: #0263e0;
	transition: color .3s ease-in-out
}

#new-home-stories .column-control:first-child .grid-container .grid-container-column:nth-child(2) .button-text {
	border: none;
	color: inherit;
	text-decoration: none
}

#new-home-stories .column-control:first-child .grid-container .grid-container-column:nth-child(2) .button-text:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px
}

#new-home-stories .column-control:first-child .grid-container .grid-container-column:nth-child(2) .button {
	color: inherit;
	text-decoration: none
}

@media (max-width:768px) {
	#new-home-stories {
		background-size: 475% !important;
		padding-bottom: 0
	}

	#new-home-stories .testimonial {
		display: none
	}

	#new-home-stories .column-control:first-child .grid-container .grid-container-column:nth-child(2) {
		padding-left: 16px;
		padding-right: 16px
	}

	#new-home-stories .tabs-slides .grid-container {
		border: var(--border-thin) solid rgb(var(--color-gray-20))
	}

	#stories-slider .tabs-slides.shadow-padding {
		padding: 1.6rem 0 0
	}

	#new-home-stories .tabs-slides .grid-container.with-shadow {
		box-shadow: none
	}
}

#new-home-custom-html {
	display: none
}