/* AI Assistant page
   developer:   yhechler
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */

:root {
	--color-primary: #f87818;
	--color-secondary: #dd1100;
	--default-margin: 3.75rem;
	--herobg: #f8f8f8;
	--orange: #de1200;
	--p-color: #4b4b4b;
	--separator: #dfdfdf;
}
main {
	color: rgb(85, 85, 85);
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	padding: 6.24rem 0 var(--padding-sections) 0;
}
main a {
	color: rgb(34, 34, 34);
}
main a.chevron-after.bold {
	color: #dd1100;
}
main a.chevron-after.bold:hover {
	color: #f77700;
}
main img {
	height: auto;
	max-width: 100%;
}
main .page-wrapper {
	max-width: 1200px;
	margin: 0px auto;
	padding-left: 2rem;
	padding-right: 2rem;
}
main hr {
	background-color: transparent;
	border-color: currentcolor currentcolor rgb(193, 193, 193);
	border-image: initial;
	border-style: none none solid;
	border-width: medium medium 1px;
	margin: 1.3125rem 0px;
}
main section, main .padding-section {
	padding-top: var(--default-margin);
	padding-bottom: var(--default-margin);
}
main .default-margin-y {
	margin-top: var(--default-margin);
	margin-bottom: var(--default-margin);
}
main h1 {
	color: #ffc617;
	font-size: 3.5rem;
	font-weight: 400;
	margin-bottom: 1rem;
}
main h1+p {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 300;
	grid-column: 2;
	line-height: 1.4;
	max-width: 500px;
	text-align: left;
}
main h2 {
	color: var(--color-secondary);
	font-size: 1.875rem;
	font-weight: 600;
	text-transform: uppercase;
}
main h2+p.subtitle {
	color: rgb(64, 64, 64);
	font-size: 1.25rem;
	line-height: 1.4;
	margin: 0.4375rem 0px 1.25rem;
}
main h3 {
	color: var(--color-secondary);
	font-size: 1.625rem;
	margin-bottom: 1.4375rem;
}
main h4 {
	color: var(--color-primary);
	font-size: 0.875rem;
	font-weight: bold;
	line-height: 1.14;
	margin-bottom: 0.1875rem;
}
main q {
	font-family: 'Noto Serif';
}
main .available-upgrades-wrapper h3 {
	color: var(--p-color);
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: .9rem;
	margin-top: 1rem;
}
main #tiers h2 {
	color: #222222;
	font-size: 1.75rem;
	font-weight: 400;
	margin-bottom: 3rem;
}
main header {
	background-color: rgb(0, 57, 98);
	color: rgb(204, 204, 204);
	padding-bottom: 2rem;
}
main header .logo2+div {
	align-items: center;
	color: #fff;
	display: grid;
	font-size: 1.5rem;
	font-weight: 300;
	gap: 3rem;
	grid-template-columns: 1fr 400px;
	margin-top: .7rem;
}
section.header {
	background-color: rgb(234, 242, 251);
}
section.header .subtitle {
	color: rgb(85, 85, 85);
	font-size: 1.5rem;
	margin-top: 1rem;
}
section.header>hr {
	margin: 2.5rem 0px;
}
.ai-access-subscription-wrapper>div:first-of-type p:first-of-type {
	font-size: 1.5rem;
	line-height: 1.8;
}
section.header .content-description .subtext {
	line-height: 1.4;
}
section.header h3 {
	color: #222222;
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.7rem;
}
section.header .content-description h2 {
	color: #2e7fb1;
	font-size: 1.9rem;
	font-style: italic;
	line-height: 1.5;
	margin: 0 auto;
	text-align: center;
	max-width: 600px;
	& span {
		display: block;
		font-size: 1.25rem;
		text-align: right;
	}
}
.site-header {
	background: url("../img/background-desktop.png") center center / cover no-repeat #003a64;
	padding: 60px 0px;
	width: 100%;
}
section.header .content-description h2 span:hover {
	color: #053d7c;
}
.site-header .page-wrapper {
	align-items: flex-start;
	display: flex;
	gap: 20px;
	max-width: 1280px;
}
.site-header .ai-access-button {
	margin: 0 0.5rem;
	padding: 8px 40px;
}
.site-header .ai-access-button-wrapper {
	margin: 0 auto;
}
.logo2 {
	flex-shrink: 0;
	width: 90px;
}
.logo2 img {
	display: block;
	height: auto;
	width: 90px;
}
.side-wrapper {
	display: flex;
	flex: 1 1 0%;
	gap: 20px;
}
.text-wrapper, .image-wrapper {
	flex: 1 1 0%;
}
.ai-access-subscription-wrapper {
	color: #636363;
	max-width: 1000px;
	margin: 0 auto;
}
.ai-access-subscription-wrapper p {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}
.available-upgrades-wrapper h3, h3 span {
	display: inline-block;
}
#ai-access-pro h3 {
	margin-top: 2rem;
}
.available-upgrades-wrapper h3 span {
	color: var(--orange);
}
.available-upgrades-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.available-upgrades-wrapper img {
	display: block;
	margin: 0 auto;
}
.available-upgrades-wrapper>div {
	background: #fff;
	border: 2px solid rgb(215, 215, 215);
	margin: 2rem 0px;
	padding: 2rem;
	width: 33%;
	z-index: 0;
}
.available-upgrades>div>ul li {
	color: var(--p-color);
	font-weight: 600;
}
.available-upgrades>div>img {
	display: block;
	margin: 0px auto;
}
#ai-access-basic {
	border-top-left-radius: 0.9375rem;
	border-bottom-left-radius: 0.9375rem;
}
#ai-access-research {
	border-top-right-radius: 0.9375rem;
	border-bottom-right-radius: 0.9375rem;
	height: 90%;
}
#ai-access-pro {
	border-radius: 0.9375rem;
	border: 2px solid rgb(245, 179, 0);
	margin-bottom: 1rem;
	margin-top: 1rem;
	outline: rgb(245, 179, 0) solid 1px;
	z-index: 1;
}
.ai-access-subscription-wrapper ul.list-square-bullets {
	columns: 2;
	column-gap: 2rem;
	color: #fff;
}
.ai-access-subscription-wrapper ul.list-square-bullets a {
	color: #4b4b4b;
}
.ai-access-subscription-wrapper ul.list-square-bullets a:hover {
	color: #053d7c;
}
.content-description.page-wrapper a, .ai-access-subscription-wrapper ul.list-square-bullets li {
	color: #4b4b4b;
}
.ai-access-subscription-wrapper ul.list-square-bullets li {
	align-items: flex-start;
	display: flex;
}
.ai-access-subscription-wrapper ul.list-square-bullets li::before {
	border-radius: 50%;
	color: #1f8fcd;
	display: flex;
	flex-shrink: 0;
	gap: 8px;
	height: 8px;
	margin-top: 0px;
	width: 8px;
}
.ai-access-subscription-wrapper ul.list-square-bullets li a {
	display: inline;
	white-space: normal;
}
.list-square-bullets li {
	align-items: normal;
	color: rgb(85, 85, 85);
	display: flex;
	font-size: 1rem;
	font-weight: 400;
	text-align: left;
}
.list-square-bullets li:not(:last-of-type) {
	margin-bottom: 0.8rem;
}
.list-square-bullets li::before {
	color: var(--separator);
	content: "■";
	display: inline-block;
	font-size: 6px;
	line-height: 23px;
	margin-right: 5px;
	position: relative;
}
.list-square-bullets a {
	color: rgb(46, 103, 139);
	font-weight: 400;
}
.list-square-bullets a:hover {
	color: var(--color-secondary);
}
.ai-access-button-row {
	align-items: center;
	display: flex;
	gap: 24px;
	margin-top: 2rem;
}
.ai-access-button {
	background-color: #2a7bb5;
	border-radius: 4px;
	border: 1px solid #2a7bb5;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none;
}
#banner:hover .ai-access-button, .ai-access-button:hover, .ai-access-button:focus {
	background-color: #3b96d7;
	border: 1px solid #3b96d7;
	color: #fff;
	text-decoration: none;
}
.ai-access-pro-trial {
	background-color: #003a64;
	border: 1px solid #2a7bb5;
	color: #fff;
	text-decoration: none;
}
.ai-access-pro-trial:hover {
	background-color: #3b96d7;
	border: 1px solid #3b96d7;
	color: #fff;
	text-decoration: none;
}
.btn {
	background-color: #dd1100;
	border-radius: 12px;
	border: solid 2px #dd1100;
	color: #fff;
	display: table;
	font-size: 1.125rem;
	padding: 11px 22px 12px 21px;
	text-align: center;
}
a.btn:hover {
	background-color: rgb(247, 93, 0);
	border: 2px solid rgb(247, 93, 0);
	color: #fff;
}
a.btn-white {
	background-color: transparent;
	border: solid 2px var(--color-primary);
	color: rgb(229, 102, 7);
}
a.btn-white:hover {
	border: solid 2px var(--color-secondary);
	background-color: var(--color-secondary);
	color: #fff;
}
a.btn-blue {
	background-color: rgb(93, 164, 201);
	border: 2px solid rgb(93, 164, 201);
	color: #fff;
}
a.btn-blue:hover {
	background-color: transparent;
	border-color: rgb(93, 164, 201);
	color: rgb(93, 164, 201);
}
.cards-list {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(2, 1fr);
}
.cards-list .card {
	background-color: #fff;
	border: 2px solid rgb(204, 204, 204);
	display: grid;
	padding: 1.875rem;
}
.cards-list .card h3 {
	color: rgb(34, 34, 34);
	font-size: 1.375rem;
	font-weight: 600;
	margin-bottom: 0.625rem;
}
.cards-list .card h4 {
	color: rgb(248, 120, 24);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.14;
	text-transform: uppercase;
}
.cards-list .card p {
	font-size: 1.2rem;
	line-height: 1.4;
	padding-bottom: 1rem;
}
.cards-list .card img, .cards-list .card video {
	align-self: flex-end;
	max-width: 600px;
	width: 100%;
}
.cards-list .card.card-primary {
	border-top: 10px solid var(--color-primary);
}
.cards-list .card.card-secondary {
	border-top: 10px solid var(--color-secondary);
}
.cards-list .alsoincluded {
	margin-bottom: 1.5625rem;
}
section.contrast {
	background-color: var(--color-primary);
}
section.contrast.light-blue {
	background-color: rgb(234, 242, 251);
}
section.contrast h2, section.contrast h2+p {
	color: #fff;
}
section.contrast h2+p {
	margin-bottom: 2.5rem;
}
section.contrast.light-blue h2 {
	color: #1f67aa;
	text-align: center;
}
section.contrast.light-blue h2+p {
	color: rgb(85, 85, 85);
}
section.contrast .card {
	box-shadow: rgba(64, 64, 64, 0.31) 0px 0px 6px 1px;
	border-width: medium;
	border-style: none;
	border-color: currentcolor;
	border-image: initial;
}
section.contrast.light-blue .card {
	box-shadow: rgba(64, 64, 64, 0.31) 0px 0px 6px 1px;
	border-radius: 12px;
	padding-bottom: 0;
}
section.contrast img {
	width: 100%;
}
#banner {
	background: rgb(1, 66, 115);
	color: #fff;
	padding: 1rem;
}
#banner .ai-access-button {
	padding: 12px 40px;
}
#banner .frame {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-areas: "logo text button";
	grid-template-columns: auto 1fr auto;
	padding: .3rem;
	max-width: 1000px;
	margin: 0 auto;
}
#banner .frame img {
	grid-area: logo;
}
#banner .frame p {
	font-size: 1.3rem;
	font-weight: 300;
}
#banner .frame a {
	grid-area: button;
}
#banner .frame button {
	background: rgb(249, 105, 0);
	border-radius: 0.5rem;
	border: 0px;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	padding: 0.5rem 1rem;
}
#banner .frame p {
	font-size: 1.3125rem;
	font-weight: 600;
}
#for-developer {
	padding: 3rem 0px 0px;
}
.developers h3+p {
	color: rgb(6, 6, 6);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.11px;
	margin-bottom: 12px;
}
.developers h3 {
	color: #535353;
	font-size: 1.4375rem;
	font-weight: 600;
	max-width: 500px;
	margin-top: 15px;
}
.developers {
	position: relative;
	padding: 1.8rem;
	/* Gradient background using `background` */
	background: linear-gradient( 358deg, rgba(245, 252, 255, 1) 0%, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 17%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 1.25rem;
	border: 2px solid #d7d7d7;
	overflow: hidden;
	/* keeps inner content + ::after clipped to radius */
}
/* Background image that ignores padding */

.developers::after {
	content: "";
	position: absolute;
	top: 60%;
	right: -7rem;
	transform: translateY(-50%);
	width: 55%;
	height: 110%;
	background-image: url("../img/llm-foundation-tools-wolfram-ai.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right center;
	pointer-events: none;
	z-index: 0;
}
/* Keep content above the background image */

.developers>* {
	position: relative;
	z-index: 1;
}
.developers li.purple a {
	color: #7a5dba;
}
.developers li.light-blue a {
	color: #1ba0bd;
}
.developers li.dark-blue a {
	color: #2c60b6;
}
.developers p {
	color: #535353;
	font-size: 0.9375rem;
	padding-bottom: 1rem;
	max-width: 600px;
}
.developers .list-square-bullets li .bullet-text {
	display: flex;
	flex-direction: column;
}
.developers p.text.first {
	color: rgb(18, 18, 18);
	font-size: 1.0625rem;
	letter-spacing: -0.09px;
	margin-bottom: 1.5625rem;
}
.developer {
	column-gap: 2rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.hrule {
	border-top: 1px solid var(--separator);
	margin: 3rem 0px;
	width: 100%;
}
.faq-item {
	border-bottom: 1px solid var(--separator);
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
}
.faq-item summary {
	color: #222;
	cursor: pointer;
	font-size: 1.125rem;
	font-weight: 600;
	list-style: none;
	padding-right: 2rem;
	position: relative;
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	color: rgb(221, 17, 0);
	content: "⌄";
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	position: absolute;
	right: 0px;
	top: -8px;
	transform: scaleX(1.4);
	transition: transform 0.2s;
}
.faq-item[open] summary::after {
	transform: scaleX(1.4) translateY(14px) rotate(180deg);
}
.faq-answer {
	margin-top: 0.75rem;
	color: #222;
}
.faq-item.margin-b-0__600.border-b-n-1200 {
	border-bottom: none;
}
.questions {
	column-gap: 2rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.questions>div>div:not(:last-of-type) {
	margin-bottom: 1.5rem;
}
.questions h4, .questions p {
	font-size: 1rem;
	line-height: 1.5;
}
.questions h4 {
	color: rgb(34, 34, 34);
	font-weight: 600;
	margin-bottom: 0.4rem;
}
.questions p {
	color: rgb(85, 85, 85);
}
.questions a {
	color: rgb(46, 103, 139);
}
.questions a:hover {
	color: var(--color-secondary);
}
.margin-b-1-1-2 {
	margin-bottom: 1.5rem !important;
}
.white-block-wrapper {
	display: flex;
	gap: 2rem;
}
.white-block {
	background: #fff;
	border-radius: 24px;
	border: 1px solid #ddd;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	color: #555555;
	flex: 1 1 0%;
	margin: 3rem 0 0 0;
	padding: 1.9rem;
}
.white-block p {
	font-size: 1.2rem;
	line-height: 1.4;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
}
/* Base footer */

.footer {
	background-color: #dd1100;
	padding: 5px 2rem 6px;
	width: 100%;
	/* center contents and align items */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
/* Text + links */

.footer a, .footer span {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 1.315rem;
	font-weight: 400;
	justify-content: center;
}
.footer a {
	color: #fff;
	font-weight: 600;
}
.footer:hover .ai-access-button, .footer .ai-access-button:hover {
	background: #fff;
	color: #a50c00;
}
/* Button */

.footer .ai-access-button {
	background: #fff;
	border-radius: 4px;
	border: 2px solid #dd1100;
	color: #dd1100;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	padding: 6px 16px;
	text-decoration: none;
}
/* Logo + text container */

.footer .top-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
@media (max-width: 1200px) {
	main h1 {
		font-size: 2.5rem;
	}
	.site-header .ai-access-button {
		margin: 0.5rem;
	}
}
@media (max-width: 900px) {
	section.header .content-description, .questions {
		grid-template-columns: 1fr;
	}
	.gallery.cards-list {
		grid-template-columns: repeat(2, 1fr);
	}
	main header .logo2+div {
		grid-template-columns: 1fr;
		/* changed from 1fr 400px to single column */
	}
	.logo2 {
		margin: 0;
		width: 90px;
	}
	main h1 {
		font-size: 2.8rem;
		text-align: left;
	}
	.developers::after {
		content: none;
		/* removes the image */
	}
	.faq-item.margin-b-0__600.border-b-n-1200 {
		border-bottom: 1px solid var(--separator);
	}
	.footer .top-row {
		width: 400px;
	}
	.footer .ai-access-button {
		padding: 6px 10px;
	}
}
@media (max-width: 600px) {
	:root {
		--default-margin: 2.5rem;
	}
	section.header .content-description h2, .gallery.cards-list, .cards-list {
		grid-template-columns: 1fr;
		row-gap: 1rem;
	}
	main h1 {
		text-align: center;
	}
	main .page-wrapper {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
	section.header .content-description h2 span {
		font-size: 1.12rem;
	}
	.ai-access-subscription-wrapper p {
		font-size: 1.38rem;
		margin-bottom: 2rem;
	}
	.site-header {
		padding: 30px 0px;
	}
	.site-header .ai-access-button-wrapper {
		max-width: 260px;
	}
	section.header .content-description h2 {
		font-size: 1.5rem;
		max-width: 350px;
	}
	.white-block-wrapper {
		flex-direction: column;
		gap: unset;
	}
	.white-block {
		border-radius: 18px;
		margin: 2rem 0 0 0;
		padding: 1.3rem;
	}
	.ai-access-subscription-wrapper ul.list-square-bullets {
		columns: 1;
	}
	.ai-access-subscription-wrapper ul.list-square-bullets li {
		font-size: 1.08rem;
	}
	.ai-access-subscription-wrapper ul.list-square-bullets li::before {
		line-height: 20px;
	}
	.site-header .page-wrapper {
		flex-direction: column;
		/* Stack logo and side-wrapper vertically */
		gap: 16px;
	}
	.logo2 {
		/* Logo stays 90px */
		margin: 0 auto;
		width: 90px;
	}
	.logo2 img {
		width: 78px;
	}
	main #tiers h2 {
		margin-bottom: 1rem;
	}
	#tiers .red {
		display: block;
	}
	#tiers .btn .btn-red {
		margin-top: 0.4rem;
	}
	#ai-access-basic {
		border-radius: 0.9375rem;
		box-shadow: rgba(42, 41, 42, 0.11) 0px 0px 5px 1px;
	}
	#ai-access-research {
		border-radius: 0.9375rem;
	}
	.list-square-bullets li:not(:last-of-type) {
		margin-bottom: 0.5rem;
	}
	main header .logo2+div {
		gap: 3rem;
		margin-top: unset;
	}
	section#features {
		padding-top: 2rem;
	}
	.side-wrapper {
		flex-direction: column;
		/* Stack text and image vertically */
		width: 100%;
	}
	.text-wrapper {
		order: -1;
		/* Text stays on top */
	}
	.image-wrapper {
		order: 1;
		/* Image goes to bottom */
		width: 100%;
	}
	.image-wrapper img {
		height: auto;
		width: 100%;
	}
	.ai-access-button-row {
		align-items: stretch;
		flex-direction: column;
	}
	.ai-access-button {
		box-sizing: border-box;
		text-align: center;
		width: 100%;
	}
	section.header .content-description h2, .cards-list {
		grid-template-columns: 1fr;
		row-gap: 2.4rem;
	}
	#banner .frame img {
		display: none;
	}
	#banner .frame p {
		text-align: center;
	}
	#banner .frame {
		align-items: center;
		grid-template-areas: "text" "button";
		grid-template-columns: 1fr;
	}
	#banner .frame a {
		margin: 0 auto;
		padding: 12px 10px;
		text-align: center;
		width: 200px;
	}
	.cards-list .card {
		padding: 1.875rem 1.5rem;
	}
	.questions {
		grid-template-columns: 1fr;
		row-gap: 2.4rem;
	}
	.questions>div:nth-child(1)>div:last-of-type {
		margin-bottom: 1.5rem;
	}
	main .available-upgrades-wrapper>div {
		margin: 1.4rem 0px;
		padding: 1.4rem 1.4rem 2rem 1.4rem;
		width: 91%;
	}
	main .available-upgrades-wrapper h3 {
		margin-bottom: .7rem;
		text-align: center;
	}
	.footer {
		flex-direction: column;
		align-items: center;
	}
	.footer .top-row {
		justify-content: center;
		max-width: 300px;
	}
	.footer .ai-access-button {
		margin-left: 0;
		margin-top: -10px;
		max-width: 150px;
	}
	.footer a {
		flex-direction: column;
	}
	.footer img {
		width: 50px;
		height: auto;
	}
	.footer span {
		font-size: 16px;
	}
}
@media (max-width: 320px) {
	footer img {
		display: inline-grid;
		height: auto;
		width: 40px;
	}
}
@media print {}