/* Plus page (v2) — built in sections. */
#content {
	contain: paint;
	padding-top: 50px;
	font-size: 18px;
}

section {
	position: relative;
	overflow: hidden;
	padding: 9vw 0px;
}

.plusJumbotron {
	position: relative;
	background: url(/assets/img/membership/plusBG.svg) #202020;
	background-size: cover;
	border-bottom: 1px solid var(--greyD);
	padding-bottom: 0;
	color: var(--OP-white);
}

.slant {
	color: #333;
}

.featuredSketch {
	position: absolute;
	display: block;
	width: 70vw;
	height: auto;
	top: 40%;
	left: 50%;
	border: 0px;
	transform: translate(-50%, -50%);
	z-index: 0;
	pointer-events: none;
	aspect-ratio: 1/1;
}

.plusJumbotron h1 {
	position: relative;
	margin: 0 0 12px 0;
	font-size: 78px;
	z-index: 1;
}

.plusJumbotron h2 {
	margin: 0 auto 35px auto;
	max-width: 700px;
	font-size: 35px;
}

.plusJumbotron .subsection {
	padding: 9vh 0px;
}

.plusJumbotronEditorContainer {
	position: relative;
	margin: 0 auto;
	max-width: 1300px;
	z-index: 1;
}

.plusJumbotronEditor {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.17);
	border: 1px solid var(--greyscale-grey6, #666);
	border-radius: 12px;
	box-shadow: 0 0 35px rgba(255, 255, 255, 0.3);
	aspect-ratio: 854 / 533;
}

#plusJumbotronEditorMask {
	position: absolute;
	width: 100%;
}

.plusJumbotronEditorNavbar {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	height: calc(100% * (33 / 533));
	object-fit: cover;
}

.plusJumbotronEditorStage {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
}

.plusJumbotronEditorCode {
	position: absolute;
	width: 80%;
	height: auto;
	top: 15px;
	left: 30px;
	object-fit: cover;
	mix-blend-mode: screen;
}

.plusJumbotronEditorOpc,
.plusJumbotronEditorColorPicker {
	position: absolute;
	display: block;
	background: #252525;
	border: 1px solid var(--grey4);
	border-radius: min(1.7vw, 15px);
	object-fit: cover;
}

.plusJumbotronEditorOpc {
	width: auto;
	height: calc(100% - 30px);
	max-height: 600px;
	top: 15px;
	right: 15px;
}

.plusJumbotronEditorColorPicker {
	width: 20%;
	height: auto;
	top: calc(14% + 15px);
	left: calc(10% + 15px);
}

@layer opAnnotation {
	.opAnnotation {
		position: absolute;
		display: block;
		--bgColor: var(--grey2);
		--lineColor: var(--grey4);
		--textColor: var(--greyC);
	}

	.opAnnotation.light {
		--bgColor: #e2f5ff57;
		--lineColor: #96d0ed;
		--textColor: var(--grey5);
	}

	.opAnnotationContent {
		position: relative;
		padding: 6px 15px;
		background: var(--bgColor);
		border: 1px solid var(--lineColor);
		border-radius: 999px;
		color: var(--textColor);
		font-size: 15px;
		z-index: 2;
		backdrop-filter: blur(3px);
	}

	.opAnnotationPointer,
	.opAnnotationPointerLine,
	.opAnnotationDot {
		z-index: 0;
		box-shadow: 0 0 6px #ffffff22;
	}

	.opAnnotationPointerLine {
		width: 100%;
		height: 100%;
		background-color: var(--lineColor);
		transform: scale(1);
	}

	.opAnnotationDot {
		box-sizing: content-box !important;
		border: 7px solid transparent;
		background-color: transparent;
		outline: 1px solid var(--lineColor) !important;
	}

	.opAnnotationDot::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: var(--lineColor);
		border-radius: 15px;
		transform: scale(1);
		animation: opAnnotationDotGlow 2s ease-in-out infinite;
	}

	@keyframes opAnnotationDotGlow {

		0%,
		100% {
			transform: scale(1.9);
		}

		50% {
			transform: scale(1);
		}
	}

	.opAnnotation--animate {
		opacity: 0;
		transition: opacity 800ms ease;
	}

	.opAnnotation--hidden {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.opAnnotation--animate.opAnnotation--animated {
		opacity: 1;
	}

	.opAnnotation--animate .opAnnotationPointerLine {
		transform: scale(0);
		transition: transform 200ms ease 800ms;
	}

	.opAnnotation--animate.opAnnotation--animated .opAnnotationPointerLine {
		transform: scale(1);
	}

	.opAnnotation--dir-up .opAnnotationPointerLine {
		transform-origin: center bottom;
	}

	.opAnnotation--dir-down .opAnnotationPointerLine {
		transform-origin: center top;
	}

	.opAnnotation--dir-left .opAnnotationPointerLine {
		transform-origin: right center;
	}

	.opAnnotation--dir-right .opAnnotationPointerLine {
		transform-origin: left center;
	}
}

.plusJumbotronAnnotations {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 15px;
	justify-content: space-around;
	margin-top: 20px;
	z-index: 2;
}

.plusJumbotronAnnotations .opAnnotation {
	display: inline-block;
	position: relative;
}

/* plus-highlight component */
.plusHighlights {
	display: block;
}

.plusHighlightContent {
	margin-bottom: 15px;
}

.plusHighlightContent p,
.plusHighlightContent h4 {
	margin-bottom: 5px;
}

.plusHighlightImageContainer {
	position: relative;
	display: flex;
	width: 100%;
	height: auto;
	overflow: hidden;
	align-items: flex-end;
	justify-content: center;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 15px;
	aspect-ratio: 1/0.6;
}

.gradient-blue {
	background: linear-gradient(180deg, #4aaff9 0%, #53B5D1 100%);
}

.plusHighlightImageContainer>* {
	width: 100%;
	max-width: 100%;
	height: auto;
}

#codeControlContainer {
	margin-top: 60px;
	margin-bottom: -35px;
}

/* Code control overrides */
#codeControlOverlay {
	position: static;
	width: 100%;
	overflow: visible;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior: contain;
}

#codeControlOverlay .codeControlClose,
#codeControlOverlay .codeControlIntro {
	flex: 0 0 calc(50vw - 390px);
	padding: 0;
	max-width: unset;
	margin-right: -30px;
	visibility: hidden;
}

#codeControlOverlay .codeControlColumn {
	padding-top: 2px;
}

#codeControlOverlay .codeControlContainer {
	box-shadow: none;
}

/* plus-editor-animation component */
.editorAnimation {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	overflow: hidden;
	border-radius: 15px;
	aspect-ratio: 794 / 477;
}

.editorAnimationNav {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 50px;
	top: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
	padding: 8px 15px;
	background: var(--grey3, #333);
	z-index: 1;
}

.editorAnimationLogo {
	width: 40px;
}

.editorAnimationStudents {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: flex-start;
	padding-right: 8px;
}

.editorAnimationUser {
	width: auto;
	height: 100%;
	margin-right: -8px;
	border: 2px solid;
	border-radius: 50%;
	background: var(--OP-white, #f5f5f5);
	transform: translateX(-50%);
	opacity: 0;
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
	transition-delay: 0s;
}

.editorAnimationUser:first-child {
	margin-left: 0;
}

.editorAnimation.animate .editorAnimationUser {
	transform: translateX(0);
	opacity: 1;
	transition-delay: var(--entryDelay, 0s);
}

.editorAnimationComment {
	flex: 1;
	padding-right: 15px;
	color: var(--OP-white);
	text-align: right;
	transition: opacity 400ms;
}

.editorAnimationComment.locked {
	opacity: 0;
}

.editorAnimationStage {
	position: absolute;
	display: flex;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
}

.editorAnimationCode {
	position: relative;
	flex: 1;
	overflow: hidden;
	color: #333;
}

.editorAnimationCode.locked .editorAnimationCodeText {
	filter: blur(15px);
}

.locked::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	background: url('/assets/img/icons/locked_small@2x.png') center center no-repeat;
	background-size: 11px;
	transform: translate(-50%, -50%);
}

.editorAnimationCodeText {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 25px;
	border: none;
	background: transparent;
	color: var(--grey6);
	font-family: "Fira Code", monospace;
	font-size: 13px;
	line-height: 1.4;
	tab-size: 4;
	white-space: pre;
	overflow: hidden;
	user-select: none;
	transition: filter 200ms;
}

.editorAnimationCursor {
	position: relative;
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: baseline;
	pointer-events: none;
}

.editorAnimationUserFlag {
	position: absolute;
	width: 76px;
	height: 23px;
	left: 0;
	bottom: -32px;
	opacity: 0;
	transform: translate3d(-1px, -26px, 0);
	transition: opacity 0.3s ease-out;
}

.editorAnimationCursor--active .editorAnimationUserFlag {
	opacity: 0.8;
}

.editorAnimationUserFlag::before {
	content: '';
	position: absolute;
	width: 60px;
	height: 20px;
	top: -20px;
	left: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	transition: opacity 0.4s ease-out;
}

.editorAnimationUserFlag::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	left: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.editorAnimationCursor--active .editorAnimationUserFlag::after {
	animation: editorAnimationCursorPulse 0.9s steps(1, end) infinite;
}

.editorAnimationTypingComplete .editorAnimationUserFlag::before {
	opacity: 0;
}

.editorAnimationUserFlag--blue::before,
.editorAnimationUserFlag--blue::after {
	background: #73c1e8;
}

.editorAnimationUserFlag--red::before,
.editorAnimationUserFlag--red::after {
	background: #e14747;
}

@keyframes editorAnimationCursorPulse {
	0% {
		opacity: 1;
	}

	49% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}

	100% {
		opacity: 0.3;
	}
}

.editorAnimationSketch {
	position: relative;
	display: flex;
	flex: 1;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	transition: background-color 400ms;
}

.editorAnimationSketch.locked,
.editorAnimationSketch.locked .editorAnimationShape {
	background-color: transparent !important;
}

.editorAnimationShape {
	width: 200px;
	height: 200px;
	border-radius: 30%;
	transform: rotate(45deg);
	transition: background-color 400ms;
}

/* Plus editor section */
.plusEditorSection {
	overflow: visible;
	padding-left: 0px;
	padding-right: 0px;
	background: url(/assets/img/membership/bg-brush-gradient.png) no-repeat;
	background-size: cover;
}

#content .formItem {
	margin-bottom: 0;
}

.plusEditor {
	display: flex;
	align-items: flex-start;
}

.plusEditor::before,
.plusEditor::after {
	content: unset;
}

.plusEditorLeft {
	display: flex;
	flex-direction: column;
	gap: 20vw;
}

.plusEditorHeader {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 15px;
}

.plusEditorTitle {
	margin: 0;
	color: #333;
	font-family: "Playfair Display", serif;
	font-size: 35px;
	letter-spacing: -1.4px;
	line-height: 1;
}

.plusEditorDescription {
	margin: 0;
	color: #333;
	/* font-family: "Dosis", sans-serif; */
	/* font-size: 18px; */
	/* line-height: 1.35; */
}

.plusEditorPanel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	padding: 30px;
	overflow: hidden;
	background: linear-gradient(180deg, #edf2f6 0%, #f8f8f8 100%);
	border: 1px solid #eee;
	border-radius: 12px;
	gap: 45px;
}

.plusEditorField {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 5px;
}

.plusEditorFieldLabel {
	color: #333;
}

.plusEditorClipboard .OPclipboard {
	width: 100%;
	height: auto;
	margin-top: 0;
	overflow: hidden;
	border-radius: 35px;
}

.plusEditorClipboard .OPclipboard .relative {
	height: 37px;
}

.plusEditorClipboard--small .OPclipboard .relative {
	display: block;
}

.plusEditorRight {
	position: sticky;
	top: 100px;
}

.plusEditorAnimation {
	width: calc(50vw + 210px);
	height: auto;
	margin-right: -45px;
	overflow: hidden;
	border: 1px solid var(--greyE);
	border-radius: 12px;
	aspect-ratio: 83 / 50;
}

/* COMMUNITY SECTION */
.communitySection {
	border-top: 1px solid var(--greyD);
	border-bottom: 1px solid var(--greyD);
	padding-bottom: 0;
	background: var(--white);
	transition: background-color 400ms;
}

.communityTop {
	position: relative;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--greyD);
	align-items: flex-end;
	transition: background-color 200ms;
}

.communityTop .header {
	flex: 1 0 440px;
}

.communityTop .userPage {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	padding-bottom: 15px;
}

.communityTop .userPage .slant {
	margin-right: 20px;
}

#community .backgroundSketch {
	position: absolute;
	aspect-ratio: 1.4 /1;
	height: 50%;
	top: 0;
	right: 0%;
	border: none;
	overflow: hidden;
	background: transparent;
	pointer-events: none;
	opacity: 0.2;
}

.communityTop .userThumbContainer {
	min-width: 170px;
	aspect-ratio: 1 / 1;
	max-width: 170px;
	margin-right: 30px;
	margin-left: -4vw;
	transform: translateY(15%);
	z-index: 2;
}

.communityBottom {
	position: relative;
	padding: 60px 0 0 0;
	padding-bottom: 120px;
	background: var(--white);
	z-index: 1;
}

.communityFeatured {
	padding: 40px 0 0;
}

.communityFeaturedList {
	display: flex;
	width: 100%;
	padding: 0 30px;
	overflow: hidden;
	gap: 60px;
	-webkit-overflow-scrolling: touch;
}

.communityFeaturedCard {
	flex: 0 0 auto;
	width: 28%;
	scroll-snap-align: start;
}

.communityBottom .sketchList {
	display: flex;
	width: calc(100% + 20px);
	overflow: hidden;
	gap: 60px;
	flex-direction: row-reverse;
}

.communityBottom .sketchLi {
	display: block;
	width: 17vw;
	padding: 0 !important;
	margin-bottom: 0 !important;
	pointer-events: none;
	max-width: 200px;
	opacity: 0.6;
}

.communityBottom .sketchLi:last-child {
	opacity: 1;
}

.communityBottom .sketchThumbContainer {
	box-shadow: none !important;
}

/* FAQ section */
.plusFaq {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 120px 60px;
	background: var(--white, #fff);
	align-items: center;
	gap: 37px;
}

.plusFaqTitle {
	margin: 0;
	color: #333;
	font-family: "Playfair Display", serif;
	font-size: 35px;
	letter-spacing: -1.4px;
	line-height: 1;
	text-align: center;
}

.plusFaqList {
	display: flex;
	flex-direction: column;
	width: 400px;
	max-width: 100%;
	align-items: center;
	gap: 15px;
}

.plusFaqItem {
	display: flex;
	width: 100%;
	padding: 15px;
	align-items: flex-start;
	gap: 15px;
	background: #fff;
	border: 2px solid #f5f5f5;
	border-radius: 12px;
	transition: border-color 150ms ease;
}

.plusFaqItem:hover {
	border-color: #eee;
}

.plusFaqItemContent {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	min-width: 0;
	gap: 15px;
}

.plusFaqItemTitle {
	width: 100%;
	color: #333;
	text-align: left;
}

.plusFaqItemTitle:focus-visible,
.plusFaqItemCaret:focus-visible {
	outline: 2px solid #333;
	outline-offset: 3px;
	border-radius: 6px;
}

.plusFaqItemBody {
	color: #666;
}

.plusFaqItemCaret {
	display: flex;
	width: 32px;
	height: 32px;
	margin: -8px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.plusFaqItemCaretIcon {
	width: 10px;
	transform: rotate(0deg);
	transition: transform 150ms ease;
}

.plusFaqItem.isExpanded .plusFaqItemCaretIcon {
	transform: rotate(180deg);
}

.plusFaqFooter {
	margin: 0;
	color: #333;
	line-height: 1.35;
	text-align: center;
}

.plusFaqLink {
	color: #e14747;
}

.plusFaqLink:hover {
	color: #e14747;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.plusFaq {
		padding: 90px 20px;
		gap: 30px;
	}

	.plusFaqTitle {
		font-size: 28px;
		letter-spacing: -1px;
	}

	.plusFaqList {
		width: 100%;
	}
}

/* Pricing section */
#pricing {
	padding: 60px 0 120px 0;
	border-bottom: 1px solid var(--Greyscale-greyD, #DDD);
	background: linear-gradient(180deg, #F5f5f5FF 0%, #F5f5f500 100%), url('/assets/img/patterns/dots.svg');
}

#pricing .pricingContainer {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

#pricing .btn {
	width: 100%;
}

#pricing .btn:hover {
	opacity: 0.8;
}

#pricing .OPradio .description {
	display: inline-block;
	flex-basis: 50%;
	color: var(--black);
	text-align: center;
}

#pricing h2.text-center {
	color: #333333;
	font-family: "Playfair Display", serif;
	font-size: 35px;
	letter-spacing: -1.4px;
}

#pricing .pricingPlans {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	align-items: flex-start;
	justify-content: space-around;
}

#pricing .plan {
	position: relative;
	display: flex;
	flex: 1 0 250px;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	padding: 25px 25px;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.4);
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	backdrop-filter: blur(1px);
	gap: 15px;
}

#pricing .plan.isDisabled {
	opacity: 0.7;
	pointer-events: none;
}

#pricing .planCurrentBadge {
	position: absolute;
	padding: 2px 10px;
	top: 0;
	left: 50%;
	white-space: nowrap;
	background: var(--OP-Blue, #73C1E8);
	border-radius: 10px 10px 0 0;
	transform: translate(-50%, -100%);
}

#pricing .planStarter {
	flex: 1 1 200px;
	min-width: 240px;
	border-color: #e4e4e4;
	background-color: transparent;
	backdrop-filter: none;
}

#pricing .planHeader {
	display: flex;
	width: 100%;
	align-items: flex-end;
	justify-content: space-between;
	gap: 15px;
	white-space: nowrap;
}

#pricing .plan h2 {
	margin-bottom: 0;
	color: #333333;
	font-family: "Dosis", Helvetica, sans-serif;
	font-size: 34px;
	font-weight: 400;
	letter-spacing: -1.36px;
}

#pricing .planPriceInline {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	color: #333333;
}

#pricing .planPriceInline .planPriceValue {
	font-size: 34px;
	line-height: 1;
}

#pricing .planPriceInline .planPriceUnit {
	font-size: 22px;
	line-height: 1.2;
	margin-left: -3px;
}

#pricing .planPriceNote {
	margin: 0;
	margin-top: -12px;
	width: 100%;
	color: var(--grey6);
	font-size: 17px;
	text-align: right;
}

#pricing .pricingDivider {
	width: 100%;
	height: 1px;
	background-color: #e0e0e0;
}

#pricing .plan .description {
	margin-bottom: 0;
	width: 100%;
	color: #333333;
	font-size: 17px;
	text-align: left;
}

#pricing .plan .checkmarkList {
	width: 100%;
	font-size: 0.9em;
}

#pricing .plan .checkmarkList>li {
	margin-bottom: 10px;
	padding-left: 18px;
	background-position: left 7px;
	background-size: 11px 10px;
}

#pricing .planSubhead {
	margin: 0;
	width: 100%;
	color: #333333;
	font-size: 17px;
	text-align: left;
}

#pricing .pricingFootnote {
	color: #777777;
}

@media (max-width: 767px) {
	.plusJumbotron {
		padding-top: 80px;
	}

	.plusJumbotron h1 {
		font-size: 44px;
	}

	.plusJumbotron h2 {
		margin: 0;
		font-size: 28px;
	}

	.plusJumbotron .subsection {
		position: relative;
		padding: 6vh 0;
	}

	.plusJumbotron .featuredSketch {
		top: 20%;
		width: 150%;
	}

	.plusJumbotron .opAnnotationPointer {
		display: none;
	}

	.plusHighlight {
		margin-bottom: 60px;
	}

	#codeControlOverlay .codeControlIntro {
		width: 0px;
		margin-right: -15px;
	}

	#community .backgroundSketch {
		left: 0;
		width: 100%;
		height: 70%;
		opacity: 0.1;
	}

	#community .opAnnotation {
		display: none;
	}

	#community .communityBottom .sketchList {
		gap: 30px;
		padding-left: 30px;
		width: calc(100% + 30px);
	}

	#community .sketchLi {
		flex: 1 1 100px;
	}
}

@media (min-width: 768px) {
	#codeControlOverlay .codeControlIntro {
		flex-basis: calc(50vw - 360px);
	}
}

@media (min-width: 992px) {
	#codeControlOverlay .codeControlIntro {
		flex-basis: calc(50vw - 472px);
	}
}

@media (min-width: 1200px) {
	#codeControlOverlay .codeControlIntro {
		flex-basis: calc(50vw - 568px);
	}
}