section.page-section.prescriptions-hero {
	padding: 0;
	background-color: var(--blue-2);

	div.content {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--gap);
		width: 100%;
		padding: var(--margin);
		color: var(--white);

		div.text {
			flex-grow: 1;

			h1 {
				margin-top: 0;
				margin-bottom: var(--gap-half);
				color: var(--white);
			}

			p {
				max-width: 400rem;
				margin: 0;
			}
		}

		img {
			max-width: 400rem;
			height: auto;
		}
	}
}

section.page-section.prescriptions-panels {
	div.content {
		div.panel {
			box-sizing: border-box;
			width: 100%;
			margin-bottom: var(--gap);
			padding: var(--gap-half);
			border-radius: 8rem;
			background-color: #f7f7f7;

			div.panel-header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: var(--gap-half);

				h3 {
					margin: 0;
				}
			}
		}

		div.panel.get-started {
			display: flex;
			flex-direction: row;
			gap: var(--gap);

			form {
				flex-grow: 1;

				h3 {
					margin-bottom: var(--gap-half);
				}

				p.token-label {
					margin-bottom: var(--gap-quarter);
					font-weight: bold;

					a {
						margin-left: var(--gap-quarter);
						font-size: 12rem;
						font-weight: normal;
						color: var(--orange);
					}
				}

				input[type="text"] {
					box-sizing: border-box;
					width: 100%;
					max-width: 420rem;
					padding: 10rem;
					margin-bottom: var(--gap-quarter);
					border: 1px solid var(--gray-dark);
					border-radius: 6rem;
					font-family: inherit;
					font-size: 14rem;
				}

				label.confirm {
					display: block;
					max-width: 420rem;
					margin-bottom: var(--gap-half);
					font-size: 13rem;
				}
			}

			img {
				max-width: 250rem;
				align-self: start;
				border-radius: 8rem;
			}
		}

		ul.script-cards {
			display: flex;
			flex-direction: row;
			gap: var(--gap-half);
			list-style: none;

			li {
				box-sizing: border-box;
				flex: 0 1 400rem;
				position: relative;
				padding: var(--gap-half);
				border: 1px solid var(--gray-light);
				border-radius: 8rem;
				background-color: var(--white);

				span.script-tag {
					display: inline-block;
					margin-bottom: var(--gap-quarter);
					padding: 3rem 10rem;
					border-radius: 10rem;
					font-size: 10rem;
					font-weight: bold;
					text-transform: uppercase;

					&.repeats {
						background-color: var(--green);
					}

					&.completed {
						background-color: var(--gray-light);
					}
				}

				span.initials {
					position: absolute;
					top: var(--gap-half);
					right: var(--gap-half);
					font-weight: bold;
				}

				h4 {
					margin-bottom: var(--gap-quarter);
				}

				p {
					margin: 0;
					font-size: 12rem;
					color: var(--text-light-3);
				}

				button.btn-text {
					display: block;
					margin-left: auto;
					margin-top: var(--gap-quarter);
				}
			}
		}

		p.no-scripts {
			margin-bottom: var(--gap-half);
		}
	}
}

section.page-section.how-it-works {
	div.content {
		ol {
			display: flex;
			flex-direction: row;
			gap: var(--gap);
			list-style: none;

			li {
				flex: 1;
				text-align: center;

				div.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 60rem;
					margin-bottom: var(--gap-quarter);

					img {
						max-height: 100%;
					}
				}

				h4 {
					margin-bottom: var(--gap-quarter);
				}

				p {
					margin: 0;
					font-size: 13rem;
					color: var(--text-light-3);
				}
			}
		}
	}
}

/* mobile */
@media screen and (max-width: 767px) {
	section.page-section.prescriptions-hero {
		div.content {
			flex-direction: column;
			padding: var(--gap);

			img {
				/* full-bleed above the text block */
				width: calc(100% + 2 * var(--gap));
				max-width: none;
				margin: calc(-1 * var(--gap)) calc(-1 * var(--gap)) 0;
				order: -1;
			}
		}
	}

	section.page-section.prescriptions-panels {
		div.content {
			div.panel.get-started {
				flex-direction: column;

				img {
					display: none;
				}
			}

			ul.script-cards {
				flex-direction: column;

				li {
					flex: 1 1 100%;
				}
			}
		}
	}

	section.page-section.how-it-works {
		div.content {
			ol {
				flex-direction: column;
				gap: var(--gap-half);
			}
		}
	}
}