/* ==========================================================================
   Shared table treatment
   --------------------------------------------------------------------------
   Used by the pricing tables on purchase.html and the comparison table on
   cloud.html. Page-specific column widths and variants live with their page.

   Structure: <div class="resp-table pricing-card [pricing-card-scroll]">
                <table class="pricing-table pricing-table-VARIANT">
   Column headings go in <span class="pricing-th-label">, the qualifier under
   them in <span class="pricing-th-sub">.
   ========================================================================== */

.resp-table {
					width: 100%;
/* 					display: table;
 */				}
				
				table {
					/*   margin-left: 50px;  */
					margin-top: 50px;
					font-family: arial, sans-serif;
					border-collapse: collapse;
					width: 100%;
					align: center;
					table-layout: fixed;
				}
				
				td, th {
					border: 1px solid black;
					text-align: center;
					padding: 6px;
				}
				
			.pricing-card {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 5px 20px -2px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin: 0 0 30px;
}

/* Tables are outlined, not raised - an outline and a shadow both defining the
   same edge reads as noise. Scoped to .resp-table.pricing-card so a bare
   .pricing-card (the CTA below the tables) keeps its raised look. */
.resp-table.pricing-card {
	border: 1.5px solid #4b81e8;
	box-shadow: none;
}

.pricing-table {
	width: 100%;
	margin: 0;
	/* Fixed layout + explicit widths so separate <table> elements allocate
	   identical columns instead of each sizing to its own longest row. */
	table-layout: fixed;
	font-family: "Nunito Sans", arial, sans-serif;
	border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
	border: none;
	text-align: left;
	padding: 14px 22px;
}

.pricing-table thead th {
	background-color: transparent;
	color: #4b81e8;
	border-bottom: 1.5px solid #4b81e8;
	/* Columns carry different numbers of sub-lines, and middle alignment
	   would centre each heading on its own height. Top puts them on one line. */
	vertical-align: top;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pricing-th-name {
	width: 75%;
}

.pricing-table thead .pricing-th-price,
.pricing-th-price {
	width: 25%;
	text-align: right;
}

.pricing-table tbody tr {
	border-bottom: 1px solid #eef1f7;
	transition: background-color 0.15s ease;
}

.pricing-table tbody tr:last-child {
	border-bottom: none;
}

.pricing-table tbody tr:hover {
	background-color: #f5f8fe;
}

.pricing-th-name {
	font-weight: 500;
	color: #333;
	word-wrap: break-word;
}

.pricing-table .pricing-td-price {
	font-weight: 500;
	color: #4b81e8;
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.pricing-table th,
	.pricing-table td {
		padding: 10px 14px;
		font-size: 14px;
	}

	.pricing-table thead th {
		font-size: 11px;
	}

}

/* Below this width the longer headings wrap to two lines and the short ones
   do not, which would step the qualifiers beneath them. Reserve two lines. */
@media (max-width: 991.98px) {
	.pricing-table thead .pricing-th-label {
		min-height: 2.6em;
	}
}

/* The heading itself, above the qualifier line. It is a block of its own so
   its height can be reserved: see the narrow-width rule below. */
.pricing-th-label {
	display: block;
	line-height: 1.3;
}

/* Qualifier under a column heading ("1 concurrent seat", "each, per year").
   Its own line, lighter and smaller, so the heading still reads as one word
   at a glance. */
.pricing-th-sub {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	font-weight: 400;
	color: #8a94a6;
	text-transform: none;
	letter-spacing: 0;
}

/* Four columns will not fit a phone. Let the card itself scroll sideways
   rather than the page: .resp-table has no overflow rule of its own, and
   .pricing-card sets overflow: hidden, which would clip instead of scroll. */
.pricing-card.pricing-card-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}