/* ai page
   developer:   rmiske, yhechler
   requires:    /common/framework/css/framework.ja.css
   ========================================================================== */

/* =========================
   Root & Base
   ========================= */

:root {
	--orange: #f95e00;
	--wrapper-h-pad: 2rem;
	--mobile-img-pad-bot: 20px;
}
body {
	color: #202020;
	font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
}
#announce-stripe {
	display: none;
}
/* =========================
   Layout
   ========================= */

section, main header {
	padding: 0 var(--wrapper-h-pad);
	width: 100%;
}
.content {
	margin: 5rem auto 0;
	max-width: 65.375rem;
	padding: 0 3.125rem;
	width: 100%;
}
img {
	height: auto;
	max-width: 100%;
}
/* =========================
   Typography
   ========================= */

main h1 {
	color: #fff;
	font-size: 3.625rem;
	letter-spacing: -0.06rem;
	text-shadow: 0 0 10px #10153b;
}
main h2 {
	border-top: 1px solid #ccc;
	color: #222;
	font-size: 1.8rem;
	padding-bottom: 1.5rem;
}
main h2+p {
	color: #474747;
	font-size: 1.05rem;
	line-height: 1.78;
}
main h3 {
	color: #222;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.15;
	padding-bottom: 0.5rem;
}
main h3+p {
	color: #383838;
	font-size: 13.5px;
	line-height: 1.73;
}
main p {
	color: #292929;
	font-size: 1.25rem;
	padding-bottom: 2rem;
}
main div[id$="-content"] p:last-child {
	padding-bottom: 0;
}
main li {
	line-height: 1.2;
	padding-bottom: 0.625rem;
}
main a {
	color: var(--orange);
}
main a:hover {
	color: #d10;
}
/* Link chevrons */

.chevron-after::after {
	color: var(--orange);
}
.chevron-before.rotate-90-cw {
	padding-left: 1.65rem;
}
.chevron-before.rotate-90-cw::before {
	bottom: 0;
	display: inline-block;
	font-size: 1.75rem;
	font-weight: 300;
	left: 0;
	line-height: 0.5rem;
	position: absolute;
	top: 0;
	transform: rotate(90deg);
        font-family: 'Source Sans Pro', Arial, sans-serif;
}
/* =========================
   Buttons
   ========================= */

.button_box {
	display: inline-block;
	margin: 3.1875rem 0 2.5rem;
}
.buttons {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5rem 1rem;
}
.button_box .button {
	font-size: 0.84375rem;
}
.button {
	background-color: var(--orange);
	border: 1px solid var(--orange);
	border-radius: 0.25rem;
	color: #fff;
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	padding: 0.625rem 0.75rem;
	position: relative;
	text-align: center;
	width: 162px;
}
.button:hover {
	background: #d10;
	border-color: #d10;
	color: #fff;
}
/* =========================
   Hero
   ========================= */

#hero {
	align-items: center;
	background-color: #19162f;
	display: flex;
	overflow: hidden;
	position: relative;
}
#hero::after {
	background-image: url('../img/bg-top-header-network.png');
	background-position: calc(50% + 400px) bottom;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	content: "";
	height: 90%;
	pointer-events: none;
	position: absolute;
	right: 0;
	width: 100%;
}
#hero .left {
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	max-width: 1011px;
	margin: 0 auto 0;
	padding: 6rem 3rem 0;
	position: relative;
	z-index: 1;
}
#hero h1 {
	color: #fff;
	font-size: 2.75rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1;
	padding-bottom: 0.5rem;
}
#hero p {
	color: #ffc547;
	font-size: 1.1rem;
	font-weight: 400;
}
#hero p#intro {
	color: #fff;
	font-size: 1.175rem;
	max-width: 600px;
	line-height: 1.71;
}
#hero .button {
	background: #19162f9c;
	border-color: rgba(255, 199, 64, 0.5);
	color: #ffc740;
	width: auto;
        padding-top: 13px; 
}
#hero .button:hover {
	background: #ffbc40;
	border-color: #ffbc40;
	color: #19162f;
}
/* =========================
   Wolfram & AI
   ========================= */

#wolfram-and-ai h2 {
	padding-top: 3.75rem;
}
#wolfram-and-ai h3 {
	padding-bottom: 1rem;
}
#wolfram-and-ai h3:hover, #wolfram-and-ai a:hover h3 {
	color: #222;
	cursor: text;
}
#wolfram-and-ai h4 {
	font-size: 1.153125rem;
	font-weight: 600;
}
#wolfram-and-ai p {
	font-size: 0.9375rem;
	line-height: 1.67;
}
/* =========================
   AI Resources
   ========================= */

#ai-resources {
	background-image: none;
	background-color: #e2ecf66b;
	border-top: #b3c7db solid 3px;
	margin-top: 4.5rem;
	margin-bottom: 0;
	padding-bottom: 0;
}
#ai-resources .tile {
	border: solid #b5cce3 2px;
	border: none;
	border-radius: 1rem;
	margin: 1.75rem auto;
	padding: 0rem;
}
#ai-resources .tile#wolfram-consulting {
	margin-top: 4rem;
	margin-bottom: 0;
}
#wolfram-consulting .bg-image {
	display: block;
	width: 100%;
	height: 317px;
}
main #ai-resources a, #ai-resources a.button {
	color: #2a649d;
}
main #ai-resources a:hover {
	color: #f95e00;
}
main #ai-resources .button {
	background: #2a649d;
	border: none;
	color: #fff;
	display: block;
	width: 200px;
}
main #ai-resources .button:hover {
	background: #448cd3;
	color: #fff;
}
#ai-resources .square-bullets li:before {
	background-color: #a1b7cc;
}
#ai-resources .content {
	padding-top: 0;
	/* padding-bottom:3rem; */
	margin-bottom: 0;
}
#ai-resources h3 {
	font-size: 1.35rem;
	line-height: 1.23;
	padding-bottom: 1rem;
}
#ai-resources ul li {
	font-size: 1rem;
	font-weight: 400;
        line-height: 1.6;

}
#ai-resources p {
	font-size: 1rem;
	line-height: 1.7;
	padding-bottom: 20px;
}
/* =========================
   AI Tools
   ========================= */

#ai-tools.content {
	padding-bottom: 0;
}
#ai-tools h2 {
	padding-top: 3.75rem;
}
#for-educators, #for-researchers, .for-educators, .for-researchers {
	padding-bottom: 1.2rem;
}
.for-educators, .for-researchers {
	opacity: 0;
}
/* =========================
   Cards
   ========================= */

.cards-list {
	display: grid;
	gap: 1.875rem;
	margin-bottom: 2.5625rem;
}
.cards-list .card {
	background: #fff;
	border: 2px solid #ffc547;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.cards-list .card-content {
	padding: 2rem 2rem 0;
}
.cards-list .card-content p {
	padding-bottom: 0;
}
.cards-list .card h3 {
	color: var(--orange);
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 0.625rem;
}
.cards-list .card h3 span {
	color: #4b4b4b;
	font-size: 0.875rem;
	font-style: italic;
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
	display: block;
}
.cards-list .card h4 {
	color: #f87818;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.14;
	text-transform: uppercase;
}
.card-image {
	margin-top: auto;
	line-height: 0;
}
.cards-list .card-image img {
	display: block;
	width: 100%;
	height: auto;
}
/* =========================
   Compact Grid (cgrid)
   ========================= */

.cgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 4rem;
	row-gap: 0.5rem;
}
.cgrid a {
	align-items: flex-start;
	display: flex;
	flex: 1;
	text-align: left;
}
.cgrid>div {
	/* align-items: stretch; */
	/* display: flex; */
}
.cgrid div:first-child a {
	align-items: center;
}
.cgrid a:hover h3 {
	color: var(--orange);
}
.cgrid h3 {
	grid-column-end: span 2;
	margin-left: calc(55px + 1rem);
}
.cgrid img {
	flex-shrink: 0;
	height: 55px;
	width: 55px;
}
.cgrid a>div:nth-child(2n) {
	flex: 1;
	margin-left: 1rem;
}
/* =========================
   Tile Blocks
   ========================= */

.tile {
	border-radius: 1rem;
	margin: 1.75rem auto;
	padding: 2rem;
}
.tile ul {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr 1fr;
}
/* =========================
   Icon + Text
   ========================= */

.icon-text {
	align-items: flex-start;
	display: flex;
	gap: 1rem;
}
.text {
	flex: 1;
}
/* =========================
   Square Bullets
   ========================= */

.square-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
}
.square-bullets li {
	color: #bfbfbf;
	margin: 0;
	padding-left: 0.8rem;
	position: relative;
}
.square-bullets li::before {
	background-color: #ccc;
	border-radius: 0;
	content: "";
	height: 0.3em;
	left: 0;
	position: absolute;
	top: 0.5em;
	width: 0.3em;
}
/* =========================
   Cards
   ========================= */

#make-your-ai .cards-list {
	grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
}
#make-your-ai .card-content {
	height: 170px;
}
#make-your-ai .cards-list .card:not(:nth-child(2n)):hover {
	border-color: var(--orange);
	background: #ffad7b0f;
}
#make-your-ai .cards-list .card:nth-child(2n){
    pointer-events: none;
    cursor: default;
    opacity:1;
}
#make-your-ai .cards-list .card:not(:nth-child(2n)):hover .card-image {
	mix-blend-mode: multiply;
}
/* =========================
   AI Tools Cards (images)
   ========================= */

#ai-tools .cards-list {
	grid-template-columns: repeat(auto-fit, minmax(359px, 1fr));
}
#ai-tools .cards-list .card-content {
	height: 150px;
}
#ai-tools .cards-list .card:hover {
	border-color: var(--orange);
	background: #ffad7b0f;
}
#ai-tools .cards-list .card:hover .card-image {
	mix-blend-mode: multiply;
}
/* =========================
   Quotes
   ========================= */

#quotes {
	background: #e2ecf6;
}
#quotes .content {
	margin-top: 5.125rem;
	padding: 3.75rem 3.125rem;
}
#quotes p {
	color: #3d566f;
	font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.67;
	padding-bottom: 1rem;
}
#quotes .author {
	color: #ef5a00;
	font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
	font-size: 1.08rem;
	font-weight: 400;
	padding-bottom: 0;
	text-align: right;
}
#quotes .author:hover {
	color: #e64100;
}
/* =========================
   Wolfram Language
   ========================= */

#wolfram-language h3 {
	color: #222;
	font-size: 1.28125rem;
	font-weight: 600;
}
#wolfram-language li {
	font-size: 1.008rem;
	font-weight: 600;
        line-height: 1.65;
}
#wolfram-language .product-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
#wolfram-language .product-list img {
	margin-top: 3rem;
}
#wolfram-consulting {
	background-image: url('../img/bg-wolfram-consulting.jpg');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 368px;
}
/* =========================
   Sticky Footer
   ========================= */

.footer {
	padding: 0;
	text-align: center;
}
.sticky {
	position: fixed;
	bottom: 0;
	z-index: 999999999;
}
.footer a {
	background: var(--orange);
	color: #fff;
	display: block;
	font-size: 1rem;
	font-weight: 600;
	padding: 1.5rem 2rem;
}
.footer a span {
	color: #fff;
	white-space: nowrap;
}
.footer a span.button {
	border: 2px solid #fff;
	width: 100px;
}
.footer a:hover {
	background: #ee6f2d;
}
.footer .chevron-after::after {
	color: #fff;
}
.button-shape {
	border: 1px solid #fff;
	border-radius: 0.3rem;
	font-size: 0.95rem;
	margin: 0 7px 7px 15px;
	padding: 0.625rem 0.75rem;
}
/* =========================
   Responsive
   ========================= */

@media (max-width: 1200px) {
	:root {
		--wrapper-h-pad: 3rem;
	}
	#ai-tools .cards-list {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
	#make-your-ai .card-content {
		height: 140px;
	}
}
@media (max-width: 900px) {
	:root {
		--wrapper-h-pad: 3.2rem;
	}
	div[id$="-content"] {
		padding: 34px 0 40px;
	}
	.content {
		padding: 0 0 3.125rem;
	}
	#wolfram-and-ai .content, #wolfram-language .content {
		padding-bottom: 0;
	}
	#ai-tools.content {
		margin-top: 3.125rem;
	}
	main h1 {
		font-size: 56px;
		padding-bottom: 0;
	}
	main h3+p {
		font-size: 17px;
		line-height: 1.7;
	}
	.button_box {
		border-right: none;
		display: block;
		max-width: 34.375rem;
	}
	#hero-content {
		background: #10153c4d;
		max-width: 100%;
	}
	#wolfram-consulting {
		height: 300px;
	}
	.cgrid div:first-child a {
		align-items: flex-start;
	}
	.cgrid div:first-child a .flex {
		margin-top: 35px;
	}
	#hero .left {
		padding: 6rem 0 0;
	}
	#hero h1 {
		text-align: left;
	}
	.tile ul {
		grid-template-columns: 1fr 1fr;
	}
	#wolfram-language h3 {
		margin: 1.0rem 0 0;
	}
	#wolfram-language .product-list {
		grid-template-columns: 1fr;
	}
	#ai-tools .cards-list .card-content {
		height: 130px;
	}
	#ai-resources .content {
		padding: 0;
	}
}
@media (max-width: 700px) {
	section {
		max-width: 560px;
		margin: auto;
	}
	#quotes, #ai-resources, section.footer {
		max-width: unset;
	}
	#make-your-ai .card-content {
		height: 130px;
	}
	.tile ul {
		gap: .2rem;
	}
	#ai-resources ul li {
		font-size: 1.01rem;
	}
	.cgrid {
		column-gap: 1rem;
	}
	.footer .button-shape {
		display: block;
		margin: 0.5rem auto 0;
		width: 100px;
	}
}
@media (max-width: 600px) {
	:root {
		--wrapper-h-pad: 20px;
		/* line up with global menu */
	}
	section {
		max-width: 560px;
		margin: auto;
	}
	#hero {
		flex-direction: column;
	}
	.fade-image {
		position: relative;
		display: inline-block;
		/* or block if full width */
		width: 100%;
		height: auto;
		/* Fade bottom */
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
		mask-repeat: no-repeat;
		mask-size: cover;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: cover;
	}
	.fade-image img {
		width: 100%;
		height: auto;
		display: block;
	}
	.content {
		padding: 0 1rem;
	}
	#quotes .content {
		padding: 3.75rem 1rem;
	}
	#hero .left {
		padding: 3rem 1rem 0;
	}
	#hero::after {
		display: none;
	}
	.for-educators, .for-researchers {
		display: none;
	}
	#make-your-ai .card-content, #ai-tools .cards-list .card-content {
		height: auto;
		margin-bottom: 1rem;
	}
	#ai-tools .cards-list {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
	.icon-text {
		align-items: center;
		flex-direction: column;
		text-align: center;
	}
	#wolfram-consulting {
		height: auto;
	}
	#hero h1 {
		font-size: 36.8px;
		line-height: 1;
		margin-top: 2rem;
	}
	#hero p {
		font-size: 1.2rem;
		font-weight: 300;
		padding-bottom: 1.2rem;
	}
	.button_box {
		max-width: 41rem;
		margin: 1.2rem 0 2.5rem;
	}
	.button_box .button {
		font-size: 0.87rem;
	}
	.buttons {
		gap: 0.2rem 0.1rem;
	}
	.button {
		border-radius: 0.3rem;
		margin: 0 7px 7px 0;
		padding: 0.625rem 0.75rem !important;
	}
	#quotes p {
		line-height: 1.7;
	}
	.card-content p {
		font-size: 1.08rem;
	}
	.cards-list .card h3 {
		font-size: 1.44rem;
	}
	.chevron-before.rotate-90-cw::before {
		display: none;
	}
	.cgrid {
		column-gap: 4rem;
		grid-template-columns: 1fr;
		row-gap: 0.5rem;
	}
	.cgrid div:first-child a {
		align-items: center;
	}
	.cgrid div:first-child a .flex {
		margin-top: 0;
	}
	.cgrid h3 {
		display: grid;
		grid-c;
		grid-column-end: span 1;
		/* margin-left: 0; */
	}
	.tile ul {
		grid-template-columns: 1fr;
	}
	#wolfram-language p {
		padding-bottom: 1.8rem;
	}
	#wolfram-language li:nth-last-child {
		margin-bottom: 1.5rem;
	}
	#wolfram-language .product-list img {
		margin-top: 0.5rem;
	}
	#ai-resources .content {
		padding: 0 1.125rem;
	}
	#ai-resources .tile ul {
		gap: 0;
	}
	#wolfram-and-ai h3 {
		/* padding-left: 0; */
		/* display: grid; */
	}
	#wolfram-language a {
		font-size: 1.15rem;
	}
	#wolfram-consulting .icon-text img {
		display: none;
	}
	#wolfram-consulting .icon-text {
		text-align: left;
		height: 250px;
	}
	/* footer */
	.footer {
		font-size: 1.1875rem;
		line-height: 1.2;
	}
	.footer a {
		padding: 1.875rem 1rem;
	}
	.footer .button-shape {
		display: inline-block;
		margin: 5px auto;
	}
}
@media (max-width: 450px) {
	#make-your-ai .card-image {
		background-size: auto 150px;
		height: 100px;
	}
	#ai-tools .cards-list .card-image {
		background-size: auto 115px;
		height: 100px;
	}
	#ai-tools .cards-list .card-content {
		height: 140px;
	}
	.cgrid h3 {
		grid-column-end: span 1;
		margin-left: calc(40px + 1rem);
	}
	.cgrid img {
		width: 40px;
		height: 40px;
	}
}
@media (max-width: 320px) {
	#ai-tools .cards-list {
		grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	}
	#ai-resources h3 {
		font-size: 1.65rem;
	}
}
@media print {}