/**
 * Styles for the ON1 vs. Lightroom comparison page
 *
 * @copyright   2026, ON1
 *
 * Built to on1-vs-lightroom-mockup-v2.html. Sizes and spacing are the
 * mockup's, colours are its tokens mapped onto base.css: text-strong to
 * --text-50, text-body to --text-300, caption to --text-500, card to --bg-800,
 * chrome to --bg-700. The Photo RAW comparison subnav comes from the other
 * comparison pages, since the mockup does not carry it. The #reviews band is
 * base.css's shared component, and the FAQ band is the house one, centered
 * as it is on every other page.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero            pinned dark - the subnav is transparent over it
 *   #page-contents   follows the theme
 *   #verdict         pinned LIGHT; white under the light theme, as the mockup
 *   #pricing         follows the theme
 *   #features        follows the theme
 *   #migration       follows the theme, --bg-800 (the one step-lighter band)
 *   #who             follows the theme
 *   #reviews         pinned light, base.css owns the band
 *   #faqs            follows the theme, base.css owns the band
 *   #final-cta       follows the theme, --bg-950, blue burst
 *   #related         follows the theme
 *   ON1 Guarantee    pinned light, injected by partials/footer.php
 *
 * Components are scoped to the body id. Button rules are scoped to the
 * sections that own the buttons, never the body id, so they cannot reach the
 * subnav's buttons.
 */

/* !- Product navigation
 *
 * base.css owns the sticky mechanics - the .sticky class base.js adds and the
 * offset it measures off #site-header - but none of the bar's own chrome, so
 * all of that lives here.
 *
 * border-top: 0 when pinned is deliberate: #site-header already draws that
 * line, and both drawing one rendered a 4px rule on scroll. */
#on1-vs-lightroom #product-navigation.is-sticky {
	background: color-mix(in srgb, var(--bg-900) 75%, transparent);
	border-top: 0;
}

@media (max-width: 575.98px) {
	#on1-vs-lightroom #product-navigation {
		background: var(--bg-900);
	}
}

#on1-vs-lightroom #product-navigation .nav {
	align-items: center;
}

/* base.css gives every li a 0.25rem bottom margin and zeroes it on
   :last-child. The bar centers items on their margin box, so the last link
   sat 2px below the rest. */
#on1-vs-lightroom #product-navigation .nav-item {
	margin-bottom: 0;
}

#on1-vs-lightroom #product-navigation .nav-link {
	color: var(--white);
	text-decoration: none;
}

#on1-vs-lightroom #product-navigation .nav-link:hover {
	opacity: 0.75;
}

/* Seven links fit at full padding from 1200px up. Below that they tighten,
   which holds the bar to one line down to about 940px. */
@media (max-width: 1199.98px) {
	#on1-vs-lightroom #product-navigation .nav-item .nav-link {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

/* Phones: the bar wraps, so the rows sit tighter. The product icon is hidden
   in the markup at this width. */
@media (max-width: 575.98px) {
	#on1-vs-lightroom #product-navigation .nav-item .nav-link {
		padding-bottom: 0.25rem;
		padding-top: 0.25rem;
	}
}

#on1-vs-lightroom #product-navigation .nav-link small {
	font-size: var(--text-xs);
	position: relative;
	top: 0.125em;
}

#on1-vs-lightroom #product-navigation .nav-link strong {
	font-weight: 600;
}

#on1-vs-lightroom #product-navigation a.nav-link.active small {
	border-bottom: 1px solid var(--white);
}

/* !- Hero
 *
 * The negative margin pulls the band up under the subnav, which is 46px tall,
 * and the top padding adds that height back. No bottom padding: the image
 * sits flush on the band's foot, rounded on top only, as the mockup has it. */
#on1-vs-lightroom #hero {
	background: var(--bg-900);
	margin-top: -46px;
	padding: calc(4rem + 46px) 0 0;
}

#on1-vs-lightroom #hero .hero-eyebrow {
	color: var(--text-500);
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	margin-bottom: 1.125rem;
	text-transform: uppercase;
}

#on1-vs-lightroom #hero h1 {
	color: var(--text-50);
	font-size: 2.625rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.14;
	margin-bottom: 1.25rem;
}

#on1-vs-lightroom #hero .hero-sub {
	color: var(--text-300);
	font-size: var(--text-lg);
	line-height: 1.6;
	margin: 0 auto 1.625rem;
	max-width: 47.5rem;
}

#on1-vs-lightroom #hero .vs-trust {
	margin-bottom: 2.125rem;
}

#on1-vs-lightroom #hero .hero-cta {
	margin-bottom: 3.5rem;
}

#on1-vs-lightroom #hero .btn {
	align-items: center;
	display: inline-flex;
	font-size: var(--text-sm);
	height: 55px;
	padding: 0 1.75rem;
}

#on1-vs-lightroom #hero .hero-shot {
	margin-bottom: 0;
}

#on1-vs-lightroom #hero .hero-shot img {
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	width: 100%;
}

@media (max-width: 639.98px) {
	#on1-vs-lightroom #hero h1 {
		font-size: 1.875rem;
	}
}

/* !- Trust row
 *
 * Green dots, not checks, as the mockup has them. In the hero and the closing
 * card. */
#on1-vs-lightroom .vs-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	justify-content: center;
	list-style: none;
	padding-left: 0;
}

#on1-vs-lightroom .vs-trust li {
	align-items: center;
	color: var(--text-500);
	display: flex;
	font-size: 0.84375rem;
	font-weight: 600;
	gap: 0.5rem;
	margin-bottom: 0;
}

#on1-vs-lightroom .vs-trust li::before {
	background: var(--green-500);
	border-radius: 50%;
	content: '';
	flex: none;
	height: 6px;
	width: 6px;
}

/* !- Section shells */
#on1-vs-lightroom #verdict,
#on1-vs-lightroom #pricing,
#on1-vs-lightroom #features,
#on1-vs-lightroom #migration,
#on1-vs-lightroom #who {
	padding: 5.5rem 0;
}

#on1-vs-lightroom #related {
	padding: 3.5rem 0;
}

/* The mockup's light band is #f6f6f7, and turns white under the light theme
   so it still steps off the page. Pinning with data-theme only redefines the
   tokens, and body's color is already computed by the time it inherits in, so
   the band restates it. */
#on1-vs-lightroom #verdict {
	background: var(--bg-900);
	color: var(--text-300);
}

:root[data-theme="light"] #on1-vs-lightroom #verdict {
	background: var(--white);
}

#on1-vs-lightroom #migration {
	background: var(--bg-800);
}

/* Under the light theme the mockup's cards and its step-lighter band are both
   white, where --bg-800 would step them darker than the page. The verdict
   table keeps its own override further down. */
:root[data-theme="light"] #on1-vs-lightroom #migration,
:root[data-theme="light"] #on1-vs-lightroom .compare,
:root[data-theme="light"] #on1-vs-lightroom .vs-chart,
:root[data-theme="light"] #on1-vs-lightroom .vs-fit,
:root[data-theme="light"] #on1-vs-lightroom .vs-chips a {
	background: var(--white);
}

/* Direct children of a column only - the specs table in the FAQ uses
   p.eyebrow for its column heads, and base.css owns those. */
#on1-vs-lightroom #site-main section:not(#hero):not(#reviews):not(#faqs) div > .eyebrow {
	color: var(--text-500);
	font-size: var(--text-mini);
	letter-spacing: 0.08em;
	margin-bottom: 0.625rem;
}

#on1-vs-lightroom #site-main section:not(#hero):not(#reviews):not(#faqs) h2 {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
}

#on1-vs-lightroom .vs-lede {
	color: var(--text-300);
	line-height: 1.65;
	margin-bottom: 2.25rem;
}

#on1-vs-lightroom .vs-body {
	color: var(--text-300);
	font-size: 0.9375rem;
	line-height: 1.7;
}

#on1-vs-lightroom .vs-section-cta {
	margin-bottom: 0;
	margin-top: 2.5rem;
	text-align: center;
}

#on1-vs-lightroom .vs-section-cta-tight {
	margin-top: 1.5rem;
}

/* House button sizing, scoped to the sections that carry it. */
#on1-vs-lightroom #verdict .btn,
#on1-vs-lightroom #pricing .btn,
#on1-vs-lightroom #features .btn,
#on1-vs-lightroom #migration .btn,
#on1-vs-lightroom #who .btn,
#on1-vs-lightroom #final-cta .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

@media (max-width: 639.98px) {
	#on1-vs-lightroom #site-main section:not(#hero):not(#reviews):not(#faqs) h2 {
		font-size: 1.4375rem;
	}
}

/* !- Chips
 *
 * The on-page contents and the related comparisons. */
/* Even top and bottom. The mockup's 8px foot left the chips jammed against
   the band below. */
#on1-vs-lightroom #page-contents {
	padding: 3rem 0;
}

#on1-vs-lightroom .vs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

#on1-vs-lightroom #related .vs-chips {
	gap: 0.875rem;
	margin-bottom: 1.25rem;
}

#on1-vs-lightroom .vs-chips li {
	margin-bottom: 0;
}

#on1-vs-lightroom .vs-chips a {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.5625rem 1rem;
	text-decoration: none;
}

#on1-vs-lightroom .vs-chips a:hover {
	color: var(--text-50);
}

#on1-vs-lightroom .vs-further-link a,
#on1-vs-lightroom .vs-further a {
	font-size: 0.84375rem;
	font-weight: 600;
}

/* !- Quick verdict */
#on1-vs-lightroom .vs-short-answer {
	color: var(--text-100);
	font-weight: 500;
	line-height: 1.7;
	margin: -0.75rem 0 1.75rem;
}

#on1-vs-lightroom .vs-preorder {
	color: var(--text-300);
	font-size: 0.84375rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

/* !- Tables
 *
 * Blue header row, cards for rows. On the verdict band the card is white, or
 * #f6f6f7 when the band itself goes white under the light theme. */
#on1-vs-lightroom .compare {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-collapse: separate;
	border-radius: var(--border-radius);
	border-spacing: 0;
	margin-bottom: 0;
	overflow: hidden;
	width: 100%;
}

#on1-vs-lightroom #verdict .compare {
	background: var(--white);
	border-color: rgba(48, 48, 48, 0.1);
}

:root[data-theme="light"] #on1-vs-lightroom #verdict .compare {
	background: var(--bg-900);
}

#on1-vs-lightroom .compare th,
#on1-vs-lightroom .compare td {
	border-bottom: 1px solid var(--bg-700);
	color: var(--text-300);
	font-size: 0.84375rem;
	line-height: 1.5;
	padding: 0.875rem 1.125rem;
	text-align: left;
	vertical-align: top;
}

#on1-vs-lightroom #verdict .compare th,
#on1-vs-lightroom #verdict .compare td {
	border-bottom-color: rgba(48, 48, 48, 0.1);
}

#on1-vs-lightroom .compare thead th {
	background: var(--blue-500);
	border-bottom: 0;
	color: var(--white);
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

#on1-vs-lightroom .compare tbody th {
	color: var(--text-50);
	font-weight: 700;
	white-space: nowrap;
}

#on1-vs-lightroom .compare tbody tr:last-child th,
#on1-vs-lightroom .compare tbody tr:last-child td {
	border-bottom: 0;
}

#on1-vs-lightroom .compare tbody tr:hover {
	background: rgba(10, 126, 250, 0.04);
}

#on1-vs-lightroom .vs-note {
	color: var(--text-500);
	font-size: var(--text-mini);
	font-style: italic;
	margin-bottom: 0;
	margin-top: 0.875rem;
}

/* !- Pricing prose */
#on1-vs-lightroom .vs-prose {
	margin-top: 1.75rem;
}

#on1-vs-lightroom .vs-prose p {
	color: var(--text-300);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: 0.875rem;
}

#on1-vs-lightroom .vs-prose .vs-aside {
	color: var(--text-500);
	font-size: var(--text-sm);
	font-style: italic;
}

#on1-vs-lightroom .vs-prose p:last-child {
	margin-bottom: 0;
}

/* !- Cost chart
 *
 * Grouped bars, one group per product, one bar per year, each bar carrying
 * its value. The bar is 26px as the mockup has it, in a wider column so the
 * three equal ON1 labels do not run into each other. Bar heights are set
 * inline in the markup as each total's share of the tallest. */
#on1-vs-lightroom .vs-chart {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	margin-top: 1.75rem;
	padding: 2rem 2rem 1rem;
}

#on1-vs-lightroom .vs-chart-title {
	color: var(--text-50);
	font-size: 0.9375rem;
	font-weight: 700;
	margin-bottom: 0.125rem;
}

#on1-vs-lightroom .vs-chart-sub {
	color: var(--text-500);
	font-size: 0.78125rem;
	margin-bottom: 1.75rem;
}

#on1-vs-lightroom .vs-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.375rem;
	list-style: none;
	margin-bottom: 1.375rem;
	padding-left: 0;
}

#on1-vs-lightroom .vs-chart-legend li {
	align-items: center;
	color: var(--text-300);
	display: flex;
	font-size: var(--text-mini);
	font-weight: 600;
	gap: 0.4375rem;
	margin-bottom: 0;
}

#on1-vs-lightroom .vs-swatch {
	border-radius: 2px;
	height: 10px;
	width: 10px;
}

#on1-vs-lightroom .vs-chart-groups {
	align-items: flex-end;
	display: flex;
	gap: 1.5rem;
	justify-content: space-around;
	padding: 0 0.5rem 0.5rem;
}

#on1-vs-lightroom .vs-chart-group {
	align-items: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
}

#on1-vs-lightroom .vs-chart-bars {
	align-items: flex-end;
	display: flex;
	gap: 0.5rem;
	height: 190px;
}

#on1-vs-lightroom .vs-bar-col {
	align-items: flex-end;
	display: flex;
	height: calc(100% - 1.25rem);
	justify-content: center;
	width: 3.25rem;
}

#on1-vs-lightroom .vs-bar {
	border-radius: 4px 4px 0 0;
	position: relative;
	width: 26px;
}

#on1-vs-lightroom .vs-bar-val {
	bottom: 100%;
	color: var(--text-50);
	font-size: var(--text-tiny);
	font-weight: 700;
	left: 50%;
	padding-bottom: 0.375rem;
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

#on1-vs-lightroom .vs-chart-group-label {
	color: var(--text-50);
	font-size: 0.78125rem;
	font-weight: 700;
	margin-bottom: 0;
	text-align: center;
}

#on1-vs-lightroom .vs-chart-foot {
	color: var(--text-500);
	font-size: var(--text-micro);
	margin: 0.5rem 0 0;
	text-align: center;
}

#on1-vs-lightroom .vs-bar-on1 {
	background: var(--green-500);
}

#on1-vs-lightroom .vs-bar-lr {
	background: var(--blue-500);
}

#on1-vs-lightroom .vs-bar-photo {
	background: var(--purple-500);
}

@media (max-width: 639.98px) {
	#on1-vs-lightroom .vs-chart-groups {
		gap: 0.625rem;
		padding: 0 0 0.5rem;
	}

	#on1-vs-lightroom .vs-bar-col {
		width: 2.5rem;
	}

	#on1-vs-lightroom .vs-bar {
		width: 18px;
	}
}

/* Nine columns will not fit a phone with their labels clear of each other,
   so the groups stack. */
@media (max-width: 575.98px) {
	#on1-vs-lightroom .vs-chart-groups {
		flex-direction: column;
		gap: 1.75rem;
	}

	#on1-vs-lightroom .vs-bar-col {
		width: 4rem;
	}

	#on1-vs-lightroom .vs-bar {
		width: 26px;
	}
}

/* !- Feature rows */
#on1-vs-lightroom .vs-feat-intro {
	padding-bottom: 1.25rem;
}

#on1-vs-lightroom .vs-feat-intro-follow {
	padding-top: 1.5rem;
}

#on1-vs-lightroom .vs-feat-intro h3,
#on1-vs-lightroom .vs-feat-copy h3 {
	font-size: 1.375rem;
	font-weight: 800;
	margin-bottom: 0.875rem;
}

#on1-vs-lightroom .vs-feat-intro p,
#on1-vs-lightroom .vs-feat-copy p {
	color: var(--text-300);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: 0.875rem;
}

#on1-vs-lightroom .vs-feat-intro p:last-child,
#on1-vs-lightroom .vs-feat-copy p:last-child {
	margin-bottom: 0;
}

#on1-vs-lightroom .vs-feat-block {
	padding: 2.75rem 0;
	row-gap: 1.5rem;
}

#on1-vs-lightroom .vs-feat-block + .vs-feat-block {
	border-top: 1px solid var(--bg-700);
}

#on1-vs-lightroom .vs-shot {
	border-radius: var(--border-radius);
	width: 100%;
}

/* The column is col-auto, so this width sizes it; .vs-shot's width: 100%
   would not. */
#on1-vs-lightroom .vs-shot-phone {
	border-radius: 24px;
	width: 300px;
}

/* !- Migration */
#on1-vs-lightroom .vs-video {
	border-radius: var(--border-radius);
	margin-bottom: 2.25rem;
	overflow: hidden;
}

#on1-vs-lightroom #migration h3 {
	font-size: var(--text-lg);
	font-weight: 800;
	margin-bottom: 1rem;
}

#on1-vs-lightroom .vs-steps {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	list-style: none;
	margin-bottom: 2.25rem;
	padding-left: 0;
}

#on1-vs-lightroom .vs-steps li {
	align-items: flex-start;
	color: var(--text-300);
	display: flex;
	font-size: 0.90625rem;
	gap: 1rem;
	line-height: 1.65;
	margin-bottom: 0;
}

#on1-vs-lightroom .vs-steps li > span:last-child {
	padding-top: 0.3125rem;
}

#on1-vs-lightroom .vs-step-num {
	align-items: center;
	background: var(--blue-500);
	border-radius: 50%;
	color: var(--white);
	display: flex;
	flex: none;
	font-size: 0.8125rem;
	font-weight: 800;
	height: 30px;
	justify-content: center;
	width: 30px;
}

/* The h3 above keeps its 16px inside its own column, so this adds the other
   20px of the mockup's 36px gap. */
#on1-vs-lightroom .vs-migrate {
	margin-bottom: 2.25rem;
	margin-top: 1.25rem;
	row-gap: 1.5rem;
}

#on1-vs-lightroom .vs-migrate-intro {
	color: var(--text-300);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: 1.625rem;
}

#on1-vs-lightroom .vs-migrate strong,
#on1-vs-lightroom .vs-body strong {
	color: var(--text-50);
}

#on1-vs-lightroom .vs-migrate .vs-shot {
	margin-bottom: 0;
}

#on1-vs-lightroom .vs-migrate .col-lg-5 p {
	margin-bottom: 1rem;
}

#on1-vs-lightroom .vs-list-head {
	color: var(--text-50);
	font-size: 0.9375rem;
	font-weight: 700;
	margin-bottom: 0.875rem;
}

#on1-vs-lightroom .vs-cloud {
	font-size: 0.90625rem;
	margin-bottom: 2rem;
}

#on1-vs-lightroom #migration .vs-simpler {
	margin-bottom: 0.75rem;
}

#on1-vs-lightroom .vs-simpler-body {
	margin-bottom: 1.75rem;
}

#on1-vs-lightroom .vs-further {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

#on1-vs-lightroom .vs-further li {
	margin-bottom: 0.5rem;
}

/* !- Check lists
 *
 * Checks for what ON1 does, dashes for the caveats. The icons take the theme's
 * readable step - green and gold at 500 wash out on the light surfaces. */
#on1-vs-lightroom .vs-checks {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin-bottom: 2rem;
	padding-left: 0;
}

#on1-vs-lightroom .vs-checks:last-child {
	margin-bottom: 0;
}

#on1-vs-lightroom .vs-checks li {
	align-items: flex-start;
	color: var(--text-300);
	display: flex;
	font-size: 0.90625rem;
	gap: 0.75rem;
	line-height: 1.6;
	margin-bottom: 0;
}

#on1-vs-lightroom .vs-checks li i.fa-solid {
	color: var(--green-500);
	flex: none;
	margin-top: 0.25rem;
	width: 18px;
}

#on1-vs-lightroom .vs-checks-caveat li i.fa-solid {
	color: var(--gold-500);
}

:root[data-theme="light"] #on1-vs-lightroom .vs-checks li i.fa-solid {
	color: var(--green-700);
}

:root[data-theme="light"] #on1-vs-lightroom .vs-checks-caveat li i.fa-solid {
	color: var(--gold-700);
}

/* !- Fit cards
 *
 * Headings take the card's accent, a step darker under the light theme where
 * the 500s fail as text. */
#on1-vs-lightroom .vs-fit {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	border-top: 3px solid var(--green-500);
	padding: 2rem;
}

#on1-vs-lightroom .vs-fit-alt {
	border-top-color: var(--gold-500);
}

#on1-vs-lightroom .vs-fit h3 {
	color: var(--green-500);
	font-size: 1.0625rem;
	font-weight: 800;
	margin-bottom: 1.25rem;
}

#on1-vs-lightroom .vs-fit-alt h3 {
	color: var(--gold-500);
}

:root[data-theme="light"] #on1-vs-lightroom .vs-fit h3 {
	color: var(--green-700);
}

:root[data-theme="light"] #on1-vs-lightroom .vs-fit-alt h3 {
	color: var(--gold-700);
}

#on1-vs-lightroom .vs-closing {
	margin-bottom: 0;
	margin-top: 2.25rem;
}

/* !- Closing CTA
 *
 * The house closing band, as on the free trial page: --bg-950 under the blue
 * burst, a step off the page. */
#on1-vs-lightroom #final-cta {
	background: var(--bg-950);
	padding: 6rem 0;
}

#on1-vs-lightroom #final-cta .vs-trust {
	margin: 0 0 2.25rem;
}

@media (max-width: 991.98px) {
	#on1-vs-lightroom #verdict,
	#on1-vs-lightroom #pricing,
	#on1-vs-lightroom #features,
	#on1-vs-lightroom #migration,
	#on1-vs-lightroom #who {
		padding: 3.5rem 0;
	}
}

/*
 * Four and five columns of prose will not fit a phone, and a horizontal
 * scroller hides the competitor columns behind a swipe. Each row becomes its
 * own card instead, with the column headings carried down from the data-label
 * attributes. Same treatment as the other comparison pages.
 */
@media (max-width: 767.98px) {
	#on1-vs-lightroom .compare,
	#on1-vs-lightroom #verdict .compare,
	:root[data-theme="light"] #on1-vs-lightroom .compare,
	:root[data-theme="light"] #on1-vs-lightroom #verdict .compare {
		background: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	#on1-vs-lightroom .compare,
	#on1-vs-lightroom .compare tbody,
	#on1-vs-lightroom .compare tbody tr,
	#on1-vs-lightroom .compare tbody th,
	#on1-vs-lightroom .compare tbody td {
		display: block;
		width: auto;
	}

	#on1-vs-lightroom .compare thead {
		display: none;
	}

	#on1-vs-lightroom .compare tbody tr {
		background: var(--bg-800);
		border: 1px solid var(--bg-700);
		border-radius: var(--border-radius);
		margin-bottom: 1rem;
		padding: 1.25rem;
	}

	#on1-vs-lightroom #verdict .compare tbody tr,
	:root[data-theme="light"] #on1-vs-lightroom .compare tbody tr {
		background: var(--white);
	}

	:root[data-theme="light"] #on1-vs-lightroom #verdict .compare tbody tr {
		background: var(--bg-900);
	}

	#on1-vs-lightroom .compare tbody tr:last-child {
		margin-bottom: 0;
	}

	#on1-vs-lightroom .compare tbody th,
	#on1-vs-lightroom .compare tbody td {
		border: 0;
		padding: 0;
		white-space: normal;
	}

	#on1-vs-lightroom .compare tbody th {
		background: none;
		color: var(--text-50);
		font-size: var(--text-sm);
		margin-bottom: 0.75rem;
	}

	#on1-vs-lightroom .compare tbody td + td {
		margin-top: 0.875rem;
	}

	#on1-vs-lightroom .compare tbody td[data-label]::before {
		color: var(--text-500);
		content: attr(data-label);
		display: block;
		font-size: var(--text-micro);
		font-weight: 700;
		letter-spacing: 0.06em;
		margin-bottom: 0.25rem;
		text-transform: uppercase;
	}
}