/* Mathematica Student Pricing page
   developer:   tajudeen, yhechler
   requires:    /common/framework/css/framework.zh.css
                /mathematica/pricing/subscription-shared.css.zh
   ========================================================================== */

/* ==========================================================================
   Common Styles
   ========================================================================== */

#student-pricing .inner {
	padding: 3rem 3rem 0 9rem;
}
#student-pricing .button-red:not(#student-pricing .bundle-pricing-option .button-red) {
	padding: 0.7rem 6rem;
}
#student-pricing .bundle-pricing-option .button-red {
	padding: 0.7rem 2.5rem;
}
#student-pricing .plans h4 span, #student-pricing .inner h4 span {
	display: block;
}
#student-pricing .inner h4 span {
	line-height: 0.7;
}
#student-pricing .inner h4 .annual {
	font-size: 1.125rem;
	color: #000;
}
#student-pricing .individuals {
	margin-bottom: 1rem;
}
#student-pricing .individuals h3 {
	color: #222;
	font-size: 1.0125rem;
	font-weight: 300;
	margin: 1.5rem 0 0.5rem;
}
#student-pricing .included-list {
	margin: 1rem 0 2rem;
}
#student-pricing .included-list.last {
	border-top: 1px solid #e8e8e8;
	margin-top: 0;
}
#student-pricing .included-list ul li {
	font-size: 0.92rem;
}
#student-pricing .included-list span {
	color: #dd1100;
	font-weight: 600;
}
#student-pricing .community span, #student-pricing .included-list ul.no-bullet span {
	color: #333;
	font-weight: 300;
}
#student-pricing .community span.a-dot, #student-pricing .included-list .no-bullet span.a-dot {
	font-weight: 600;
}
#student-pricing .included-list div:first-of-type {
	padding-right: 1.25rem;
}
#student-pricing .community span:hover {
	color: #f77700;
}
#student-pricing .community span:after {
	color: #dd1100;
}
#student-pricing .includes ul li {
	position: relative;
	padding-left: 2.5rem;
	font-size: 0.99rem;
	line-height: 1.3;
	color: #222;
	margin-bottom: 1rem;
}
#student-pricing .includes {
	margin: 0;
}
#student-pricing .includes p {
	font-weight: 300;
}
#student-pricing .includes hr {
	margin: 0.25rem 0;
	width: 90%;
	max-width: 100%;
}
#student-pricing .includes ul:nth-of-type(2) {
	margin-top: 1rem;
}
#student-pricing .includes.support a {
	display: flex;
}
#student-pricing .includes.support a span:last-of-type {
	display: inline-block;
	max-width: 44rem;
}
/* ==========================================================================
   Pricing Section
   ========================================================================== */

#student-pricing .vat-note {
	font-size: 0.8125rem;
	font-weight: 400;
	text-align: right;
	padding-right: 0.9rem;
}
#student-pricing .s-flexbox {
	border-right: 1px solid #d6d6d6;
	border-left: 1px solid #d6d6d6;
}
#student-pricing .s-flexbox:not(.bundle-pricing-option .s-flexbox) {
	padding: 1rem 0 2rem;
}
#student-pricing .bar {
	border-right: 1px solid #fccfb8;
}
#student-pricing .s-flexbox h4 span:first-of-type {
	color: #f77700;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 0 0 0.625rem;
	text-transform: uppercase;
}
#student-pricing .plans h4 span:last-of-type {
	display: block;
	color: #222;
	font-size: 0.99rem;
}
#student-pricing .first {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#student-pricing .price-tag_1 span.price span, #student-pricing .price-tag span.price span {
	font-size: 1.7rem;
	color: #000;
}
#student-pricing ._left .link-only .price .dollarsign, #student-pricing ._middle .link-only .price .dollarsign {
	font-size: 0.8rem;
	margin-top: -4px;
	vertical-align: top;
	line-height: 1.9;
}
#student-pricing .price-tag_1, #student-pricing .price-tag {
	font-size: 1rem;
	margin-top: 0.5rem;
	margin-bottom: 0.7rem;
}
#student-pricing .price-tag_1 .dollarsign, #student-pricing .price-tag span.price span.dollarsign {
	font-size: 1.25rem;
	margin-top: 0.5rem;
}
#student-pricing .price-tag_1.small .price .price, #student-pricing .price-tag.small .price .price {
	font-size: 1.4rem;
}
#student-pricing .price-tag_1.small .price, #student-pricing .price-tag.small .price {
	font-size: 0.875rem;
	vertical-align: baseline;
}
#student-pricing .price-tag_1.small .price .dollarsign, #student-pricing .price-tag.small .price .dollarsign {
	font-size: 0.75rem;
	margin-top: 0.5rem;
	vertical-align: top;
	white-space: nowrap;
	font-weight: 800;
}
#student-pricing ._right .price .dollarsign, #student-pricing ._middle .price .dollarsign, #student-pricing ._left .price .dollarsign {
	font-size: 1.2rem;
}
#student-pricing .bundle-with-aiaccess .price {
	white-space: nowrap;
}
#student-pricing .plan-wrapper {
	min-height: 88px;
	border-left: none;
	border-right: none;
	padding-left: 0;
}
#student-pricing .resizeH4Heights {
	min-height: 47px;
}
#student-pricing .resizeplanWrapper {
	min-height: 96px;
}
#student-pricing .plans .button-white {
	padding: 0.3rem 2rem;
	font-size: 0.75rem;
	white-space: nowrap;
}
#student-pricing ._middle p, #student-pricing ._left p {
	font-size: 0.8rem;
}
#student-pricing .more-description.find-out .more a:hover {
	opacity: 80%;
	color: #f77700;
}
#student-pricing .load-wrapper {
	float: none;
	margin: 0 10px 10px 20%;
}
#student-pricing ._sub, #student-pricing .plans {
	display: flex;
	flex-wrap: nowrap;
}
#student-pricing .plans {
	padding: 1.5rem 2.8125rem 2rem 9rem;
}
#student-pricing .plans ._left, #student-pricing .plans ._middle {
	padding-right: 1.8125rem;
}
#student-pricing .plans ._middle, #student-pricing .plans ._right {
	padding-left: 1.8125rem;
	border-left: 1px solid #d6d6d6;
}
#student-pricing .plans ._describe {
	display: block;
	font-size: 0.875rem;
}
#student-pricing .topborder {
	border-top: 1px solid #d6d6d6;
}
#plans {
	display: none;
	border-right: 1px solid #d6d6d6;
	border-left: 1px solid #d6d6d6;
}
#student-pricing #plans.open {
	display: block;
	border-top: 1px solid #d6d6d6;
}
#annotation span.white-space-nw {
	color: #222;
	font-weight: unset;
}
/* ==========================================================================
   What's Included
   ========================================================================== */

#student-pricing .more, #student-pricing .cloud-icons, #student-pricing .more-options, #student-pricing .s-flexbox, #student-pricing .top-border, #student-pricing .included-list {
	display: flex;
}
#student-pricing .top-border {
	border-left: 1px solid #d6d6d6;
	border-right: 1px solid #d6d6d6;
	color: #fccfb8;
	font-size: 1rem;
	font-weight: 400;
	height: 4.25rem;
	padding: 0 1rem;
	background: #f77700;
	border: 1px solid #f77700;
}
#student-pricing .top-border h3 {
	color: #fff;
	display: block;
	font-size: 1.44rem;
	font-weight: 400;
}
#student-pricing .whats-included {
	margin-top: 1.6875rem;
}
#student-pricing .cloud-icons img:first-of-type {
	margin-right: 1rem;
}
#student-pricing .s-flexbox h3 span.bar {
	color: #fccfb8;
}
#student-pricing #more-pricing-option, #student-pricing .more-options, #student-pricing .top-border {
	justify-content: space-between;
	align-items: center;
}
#student-pricing .more-options {
	flex-wrap: unset;
	align-items: flex-start;
}
#student-pricing .more {
	align-items: center;
	margin-right: 0.5rem;
}
#student-pricing .more img {
	vertical-align: middle;
	margin-top: 0.2rem;
}
#more-pricing-option {
	height: 1.9375rem;
	background: #fff;
	border: none;
	border-top: 1px solid #d6d6d6;
	padding-top: 0.5rem;
}
#student-pricing .more-pricing-option {
	display: flex;
	justify-content: space-between;
	margin-top: 0.4rem;
	max-width: 15.75rem;
	align-items: center;
}
#student-pricing .more-pricing-option div:last-of-type {
	text-align: right;
}
#student-pricing .more-pricing-option .button-white {
	background: #fff;
	border: 1px solid #dd1100;
	color: #dd1100;
	font-size: 12px;
	padding: 0.35rem 0.5rem;
	white-space: nowrap;
	width: 100px;
	max-width: 100%;
	text-align: center;
}
#student-pricing .button-white:hover {
	background: #fe0000;
	border: 1px solid #b00f00;
	color: #fff;
}
#student-pricing .more-description.find-out a {
	font-size: 0.8125rem;
}
#student-pricing .more-description.find-out-more a {
	color: #000;
}
#student-pricing .bundle-with-aiaccess {
	padding: 1rem 2rem;
}
#student-pricing .bundle-description>span:first-child {
	color: #343434;
	font-size: 1rem;
	margin: 1rem 0;
	font-weight: 400;
	line-height: 24px;
}
.two-column-layout {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.bundle-description {
	flex: 1;
	min-width: 0;
}
.bundle-cta {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	white-space: nowrap;
}
/* ==========================================================================
   FAQ Section
   ========================================================================== */

#faq {
	margin-bottom: 3.875rem;
}
#faq .more {
	align-items: flex-start;
}
#faq .more a {
	color: #636363;
	display: flex;
}
#faq .more a:hover {
	color: #f77700;
}
#faq span.more img {
	margin-right: 0.5rem;
	position: relative;
	top: 0;
}
#faq li {
	margin-bottom: 0.5rem;
}
#student-pricing #faq {
	margin-top: 1.4rem;
}
#student-pricing .faq-wrapper, #student-pricing .faq-wrapper2 {
	display: none;
}
#student-pricing .faq-wrapper.open {
	display: block;
}
#student-pricing .common {
	padding-top: 1rem;
}
#student-pricing .common .more-options h3 {
	position: relative;
	font-size: 1.04rem;
	padding-left: 1.3rem;
}
#student-pricing .common h3:after {
	display: none;
}
#plandetails {
	margin-bottom: 0.875rem;
	margin-top: 1.5rem;
}
#plandetails .more-options h3 {
	color: #dd1100;
	cursor: pointer;
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 400;
}
#student-pricing #faq h3:before, #student-pricing #plandetails .more-options h3:before {
	content: '';
	position: absolute;
	top: 0.3rem;
	left: 0;
	background: url(../img/more-icon-2x.png) no-repeat 0 0;
	background-size: 13px 13px;
	width: 13px;
	height: 13px;
}
#student-pricing #faq.open h3:before, #student-pricing #plandetails.open .more-options h3:before {
	content: '';
	top: 0;
	background: url(../img/less-icon-2x.png) no-repeat 0 0;
}
#student-pricing .bundle-with-aiaccess .dollarsign {
    margin-top: 6px;
}
/* ==========================================================================
   Breakpoint: 1200px
   ========================================================================== */

@media all and (max-width: 1200px) {
	span.a-dot {
		margin-left: 29px;
		margin-top: 1px;
	}
}
/* ==========================================================================
   Breakpoint: 900px
   ========================================================================== */

@media all and (max-width: 900px) {
	#student-pricing .inner {
		padding: 2rem 1rem 0 1.5rem;
	}
	#student-pricing .inner h4 {
		margin-bottom: 1rem;
	}
	#student-pricing .first {
		margin-left: -1.5rem;
	}
	#student-pricing .plans {
		padding: 1.5rem 2.8125rem 1.5rem 2rem;
	}
	#student-pricing .plans h4 span:last-of-type {
		font-size: 1.12rem;
	}
	#student-pricing .plans ._left, #student-pricing .included-list div:first-of-type {
		padding-right: 0.2rem;
		margin-right: 0.6rem;
	}
	#student-pricing .plans ._right {
		padding-left: 2rem;
	}
	#student-pricing .plan-wrapper {
		min-height: 147px;
		padding: 1.5rem 0 0;
	}
	#student-pricing .includes ul li {
		font-size: 0.9rem;
		margin-bottom: 0.5rem;
		padding-left: 2.3rem;
	}
	#student-pricing .includes ul li::before {
		background-size: 14px 11px;
	}
	#student-pricing ul.community li:before {
		background-size: 14px 11px;
		background: url('') no-repeat center center;
	}
	#student-pricing span.a-dot {
		margin-left: 24px;
		margin-top: 1px;
	}
	#student-pricing .included-list ul li {
		font-size: 0.99rem;
	}
	#student-pricing .more-description.find-out {
		font-size: 0.8462rem;
	}
	#student-pricing .more-description.find-out img {
		width: 16px;
		height: auto;
	}
	#student-pricing .more-description.find-out-more {
		font-size: 0.8572rem;
		color: #636363;
		margin-top: 0.5rem;
	}
	#student-pricing .more-pricing-option .button-white {
		font-size: 0.75rem;
		width: 90px;
		margin: 0;
	}
	#student-pricing .link-only .dollarsign {
		margin-top: 0.2rem;
	}
	#student-pricing .included-list, .s-flexbox {
		flex-direction: unset;
	}
	#student-pricing .bundle-pricing-option {
		border: none;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		border-radius: 0;
		margin: 0;
		padding: 0.2rem;
	}
	#student-pricing .bundle-with-aiaccess p {
		margin-top: 0;
	}
	#student-pricing .bundle-with-aiaccess .dollarsign {
         margin-top: 2px;
    }
}
/* ==========================================================================
   Breakpoint: 600px
   ========================================================================== */

@media all and (max-width: 600px) {
	#student-pricing .inner {
		width: unset;
		padding: 0 4rem 0;
	}
	#student-pricing .inner h4 {
		margin-bottom: 0;
		margin-top: 2rem;
	}
	#student-pricing .inner h4 .annual {
		font-size: 1.5rem;
		margin-bottom: 0;
	}
	#student-pricing .individuals h3 {
		font-size: 1.2rem;
	}
	#student-pricing .first {
		margin-left: 0;
	}
	#student-pricing .plans {
		padding: 1.5rem 1rem 2rem;
		flex-wrap: wrap;
		flex-direction: column;
		text-align: center;
	}
	#student-pricing ._sub {
		flex-wrap: wrap;
		flex-direction: column;
		text-align: center;
	}
	#student-pricing .plans ._left, #student-pricing .plans ._middle {
		border-bottom: 1px solid #d6d6d6;
		padding-bottom: 1rem;
	}
	#student-pricing .plans ._right, #student-pricing .plans ._middle {
		border-left: unset;
		margin-top: 1rem;
	}
	#student-pricing .plans ._right {
		padding-right: 2rem;
	}
	#student-pricing .plans .button-white {
		font-size: 0.95rem;
	}
	#student-pricing .plan-wrapper {
		min-height: unset;
	}
	#student-pricing .resizeH4Heights {
		min-height: unset;
	}
	#student-pricing #plans.open {
		display: block;
		border-top: 1px solid #f77700;
	}
	#student-pricing .includes.first, #student-pricing #plans, #student-pricing .s-flexbox {
		border-right: 5px solid #f77700;
		border-left: 5px solid #f77700;
	}
	#student-pricing .includes.first ul li::before {
		top: -3px;
	}
	#student-pricing .includes hr {
		width: 100%;
	}
	#student-pricing .includes ul li {
		font-weight: 400;
	}
	#student-pricing .included-list, #student-pricing .s-flexbox {
		flex-direction: column;
	}
	#student-pricing .top-border {
		border-bottom: none;
		justify-content: center;
		padding: 0 0.5rem;
	}
	#student-pricing .top-border h3 {
		text-align: center;
	}
	#student-pricing .topborder {
		border-top: none;
	}
	#student-pricing .s-flexbox:not(.bundle-pricing-option .s-flexbox) {
		padding: 1rem 0 0;
	}
	#student-pricing .s-flexbox div.bundle-with-aiaccess {
		border: none;
		display: unset;
		padding: 0;
	}
	#student-pricing .bundle-pricing-option {
		margin: 2rem 1rem;
		border: 1px solid #ddd;
		border-radius: 10px;
	}
	#student-pricing .bundle-pricing-option .price .price {
		font-size: 1.125rem;
	}
	#student-pricing .bundle-pricing-option .AIAssistant-price .price .price {}
	#student-pricing .bundle-with-aiaccess {
		padding: 0.7rem;
	}
	#student-pricing .bundle-with-aiaccess>div>span:first-child {
		margin-top: 0.6rem;
	}
	#student-pricing .bundle-with-aiaccess p {
		margin-top: 0.4rem;
		margin-bottom: 0;
	}
	#student-pricing .bundle-with-aiaccess .year {
		line-height: 1.7;
	}
	#student-pricing .bundle-with-aiaccess .button-red, #student-pricing .bundle-with-aiaccess .button-white {
		font-size: 13px;
		line-height: 14px;
		margin:0;
		padding: 9px 10px 6px;
		width: 130px;
	}
	#student-pricing .bundle-with-aiaccess .flex {
		border-top: none;
	}
	#student-pricing .bundle-with-aiaccess .flex .price .price {
		font-size: 22px;
	}
	#student-pricing .button-red {
		width: 100%;
		max-width: 18.5714rem;
		padding: 0.7rem 1rem;
	}
	#student-pricing .button-red:not(#student-pricing .bundle-pricing-option .button-red) {
		padding: 0.7rem 1rem;
	}
	#student-pricing ._left .link-only .price .dollarsign, #student-pricing ._middle .link-only .price .dollarsign {
		font-size: 0.8rem;
		margin-top: -2px;
	}
	#student-pricing .link-only .dollarsign {
		line-height: 1.7;
		margin-top: 0;
	}
	#student-pricing .price-tag_1.small .price .price, #student-pricing .price-tag.small .price .price {
		font-size: 22.4px;
	}
	#student-pricing .price-tag_1.small .price, #student-pricing .price-tag.small .price {
		font-size: 0.875rem;
		vertical-align: baseline;
	}
	#student-pricing .price-tag_1.small .price .dollarsign, #student-pricing .price-tag.small .price .dollarsign {
		font-size: 0.85rem;
		margin-top: 0.4rem;
		vertical-align: top;
		line-height: 1.3;
	}
	#student-pricing span._describe {
		margin-bottom: 0.5rem;
	}
	#student-pricing .more-pricing-option {
		justify-content: center;
		max-width: 100%;
		flex-direction: column;
		margin-top: -4px;
		padding-top: 0;
	}
	#student-pricing .more-pricing-option div:last-of-type {
		text-align: center;
		margin-top: 0.4rem;
		margin-bottom: 1rem;
	}
	#student-pricing .more-pricing-option .button-white {
		font-size: 0.95rem;
		width: 127.73px;
	}
	#student-pricing .load-wrapper {
		float: none;
		margin: 0 auto;
		max-width: 80px;
	}
	#student-pricing .load {
		align-items: center;
		display: flex;
	}
	#student-pricing #more-pricing-option {
		justify-content: center;
		border-left: 5px solid #f77000;
		border-bottom: 5px solid #f77000;
		border-right: 5px solid #f77000;
	}
	#student-pricing #more-pricing-option .button-white {
		margin: 0.3rem 0;
		font-size: 12px;
	}
	#more-pricing-option {
		border-top: none;
	}
	#student-pricing #faq span.more span:last-of-type, #student-pricing .more-description.find-out-more {
		font-size: 12px;
	}
	#student-pricing span.a-dot {
		margin-left: 23px;
		margin-top: 2px;
	}
	#student-pricing .bundle-with-aiaccess .dollarsign{
        margin-top: 6px;
    }
	#student-pricing .two-column-layout {
		flex-direction: column;
		gap: 1rem;
	}
	#student-pricing .bundle-description {
		width: 100%;
		min-width: 0;
	}
	#student-pricing .bundle-with-aiaccess>div {
		flex: 1;
		padding: 1rem;
	}
}