/* Native table examples: keep the artwork palette in both site themes. */
#native-tables {
	box-sizing: border-box;
	width: 100%;
	max-width: 70rem;
	margin-inline: auto;
	container-type: inline-size;
	--table-ink: #1f3f3a;
	--table-sage: #c1d1b6;
	--table-paper: #f3f4ee;
	--table-rule: #c7cac3;
	--sticker-paper: #fefbf2;
	--sticker-ink: #395742;
}

#native-tables .feature-block {
	min-width: 0;
}

#native-tables .home-tables-intro {
	column-count: 2;
	column-gap: 1.5em;
	column-fill: balance;
}

#native-tables .home-tables-intro > div {
	break-inside: avoid;
}

#native-tables .home-tables-intro ul {
	min-width: 0;
	margin: 0 0 1em;
	padding-left: 1.5em;
}

#native-tables .home-tables-intro li {
	break-inside: avoid;
	margin-bottom: .5em;
}

#native-tables figure {
	min-width: 0;
	margin: 1em 0 0;
}

#native-tables figcaption {
	font-size: .9em;
}

#native-tables .native-table-frame,
#native-tables .native-sticker-frame {
	box-sizing: border-box;
	max-width: 100%;
	margin-bottom: .5em !important;
	padding: .75em;
	border: 1px solid #555;
	border-radius: .5em;
	background: #f9f6ef;
}

#native-tables .native-table-frame:focus-visible {
	outline: 3px solid var(--table-ink);
	outline-offset: 3px;
}

#native-tables .native-comparison-table {
	width: 100%;
	min-width: 620px;
	max-width: none !important;
	margin: 0;
	border: 1px solid var(--table-rule);
	border-collapse: collapse;
	table-layout: fixed;
	color: var(--table-ink);
	font: clamp(.8125rem, 1.3cqi, 1rem)/1.3 Arial, Helvetica, sans-serif;
}

#native-tables .native-comparison-table th,
#native-tables .native-comparison-table td {
	padding: .5em .65em;
	border: 1px solid var(--table-rule);
	text-align: left;
	vertical-align: middle;
}

#native-tables .native-comparison-table thead th {
	padding-block: .8em;
	background: var(--table-ink);
	color: #fff;
	font-weight: 700;
}

#native-tables .native-comparison-table tr > :first-child {
	width: 26%;
}

#native-tables .native-comparison-table tbody tr:nth-child(odd) {
	background: var(--table-paper);
}

#native-tables .native-comparison-table tbody tr:nth-child(even) {
	background: #fff;
}

#native-tables .native-comparison-table tbody tr > :nth-child(2) {
	background: var(--table-sage);
}

#native-tables .native-comparison-table tbody tr:last-child {
	font-size: 1.15em;
}

#native-tables .native-sticker-frame {
	padding: .25em .5em;
	background: var(--sticker-paper);
}

#native-tables .native-sticker-table {
	width: 100%;
	margin: 0;
	border: 1px solid #272722;
	border-collapse: collapse;
	table-layout: fixed;
	background: var(--sticker-paper);
	color: var(--sticker-ink);
	font: clamp(.875rem, 1.65cqi, 1.125rem)/1.2 Arial, Helvetica, sans-serif;
}

#native-tables .native-sticker-table td {
	padding: clamp(.65rem, 2cqi, 1.25rem);
	border: 1px solid #272722;
	vertical-align: middle;
}

#native-tables .native-sticker {
	display: grid;
	grid-template-columns: clamp(2.5rem, 6cqi, 3.5rem) minmax(0, 1fr);
	align-items: center;
	gap: clamp(.65rem, 2.5cqi, 1.25rem);
	min-height: clamp(4.5rem, 10cqi, 6rem);
}

#native-tables .native-sticker img {
	display: block;
	width: 100%;
	height: auto;
}

#native-tables .native-sticker span,
#native-tables .native-sticker strong {
	display: block;
}

@media (max-width: 720px) {
	#native-tables .home-tables-intro {
		column-count: 1;
	}

	#native-tables .native-sticker-table tbody,
	#native-tables .native-sticker-table tr,
	#native-tables .native-sticker-table td {
		display: block;
	}

	#native-tables .native-sticker-table td {
		border: 0;
		border-bottom: 1px solid #272722;
	}

	#native-tables .native-sticker-table td:last-child {
		border-bottom: 0;
	}
}