/*
	Pricing page

	Four plan cards, then the full comparison table, add-ons and the FAQ.
*/

.dp-plan-cards {
	padding-bottom: 52px;
}


/* Pushed to the bottom of the card so the four buttons line up even though the descriptions above
   them are different lengths */
.dp-plan-btn {
	margin-top: auto;
	padding-top: 11px;
	padding-bottom: 11px;
}

.dp-plan .dp-plan-line {
	margin-bottom: 24px;
}


.dp-plans-note {
	margin: 28px 0 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--dp-ink-soft);
}


/* ---------------------------------------------------------------- Comparison table */

/* Five columns of table will not fit on a phone, so it scrolls inside its own box rather than
   giving the whole page a horizontal scrollbar */
.dp-compare-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--dp-line);
	border-radius: 10px;
	background: #ffffff;
}


.dp-compare-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 14px;
}


/* Not sticky. .dp-compare-scroll below is an overflow-x container, which makes it the scroll
   container a sticky header would resolve against - so top:60px parked the header 60px down
   inside the box, permanently covering the first group row. The box never scrolls vertically,
   so sticky bought nothing here in the first place */
.dp-compare-table thead th {
	padding: 16px 14px;
	background: #ffffff;
	border-bottom: 2px solid var(--dp-line);
	text-align: center;
	vertical-align: bottom;
}


.dp-compare-plan-name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--dp-ink);
}

.dp-compare-plan-price {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--dp-ink-soft);
}


/* The feature column is the row label, so it stays left-aligned and takes the slack */
.dp-compare-table th.dp-compare-feature {
	width: 40%;
	padding: 12px 18px;
	text-align: left;
	font-weight: 400;
	color: var(--dp-ink);
}

.dp-compare-table thead th.dp-compare-feature {
	font-weight: 700;
}


.dp-compare-group th {
	padding: 14px 18px;
	background: var(--dp-wash);
	border-top: 1px solid var(--dp-line);
	border-bottom: 1px solid var(--dp-line);
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dp-ink-soft);
}


.dp-compare-table tbody tr:not(.dp-compare-group) + tr:not(.dp-compare-group) th,
.dp-compare-table tbody tr:not(.dp-compare-group) + tr:not(.dp-compare-group) td {
	border-top: 1px solid var(--dp-line);
}


.dp-compare-cell {
	padding: 12px 14px;
	text-align: center;
	vertical-align: middle;
}


/* The recommended column is tinted the whole way down, so the eye can follow it across 45 rows */
.dp-compare-cell.is-popular,
.dp-compare-table thead th.dp-compare-plan.is-popular {
	background: rgba(33, 150, 243, 0.04);
}


.dp-yes {
	font-size: 14px;
	color: #1e9e57;
}

.dp-no {
	font-size: 12px;
	color: #c2cad3;
}

.dp-compare-value {
	font-weight: 600;
	color: var(--dp-ink);
}


/* Included, but only once the plan's paid add-on is bought - the sheet's check-plus-dollar */
.dp-addon-mark {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	white-space: nowrap;
}

.dp-addon-sign {
	font-size: 10px;
	color: var(--dp-ink-soft);
}

.dp-compare-addon-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--dp-ink-soft);
}


.dp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 18px 0 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--dp-ink-soft);
}

.dp-legend > li {
	display: flex;
	align-items: center;
	gap: 7px;
}


/* ---------------------------------------------------------------- Add-ons */

.dp-addons {
	padding: 44px 0;
	background: #ffffff;
	border-top: 1px solid var(--dp-line);
	border-bottom: 1px solid var(--dp-line);
}

.dp-addons-title {
	margin: 0 0 24px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--dp-ink);
}


/* One quarter of the row each. The button is pushed to the bottom so the four line up whatever the
   copy above them runs to */
.dp-addon-tile {
	display: flex;
	flex-direction: column;
	padding: 26px 22px;
}

.dp-addon-tile .dp-card-text {
	margin-bottom: 22px;
	font-size: 14px;
}

.dp-addon-price {
	margin: 0 0 10px 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--dp-ink);
}

.dp-addon-extras {
	margin: 0 0 12px 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--dp-ink);
}

.dp-addon-btn {
	margin-top: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}


/* ---------------------------------------------------------------- FAQ */

.dp-faq-list {
	max-width: 820px;
	margin: 0 auto;
}

.dp-faq-item {
	padding: 22px 0;
	border-bottom: 1px solid var(--dp-line);
}

.dp-faq-item:first-child {
	border-top: 1px solid var(--dp-line);
}

.dp-faq-q {
	margin: 0 0 8px 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--dp-ink);
}

.dp-faq-a {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--dp-ink-soft);
}