/**
 * Styles for the ON1 NoNoise AI vs. Topaz Photo AI comparison page
 *
 * @copyright   2026, ON1
 *
 * The 2027 design for /on1-vs-topaz/. Same shell as the other comparison pages
 * in this family - the Photo RAW comparison subnav, the hero vocabulary, the
 * on-page contents bar, the head-to-head table, the paired ON1/competitor
 * cards, the camp cards, and the verdict box - but this one sits on NoNoise AI
 * rather than Photo RAW, so the accent is green throughout instead of blue.
 *
 * Two widgets are specific to this page: the pricing cards on the light band
 * and the orange callout under them. Neither exists on the Photo RAW
 * comparison pages, which carry .vs-tier rows instead.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero             pinned dark, --bg-950
 *   #page-contents    follows the theme
 *   #quick-comparison follows the theme
 *   #presets          follows the theme, green burst
 *   #noise-handling   follows the theme
 *   #ai-approach      follows the theme, green burst
 *   #workflow         follows the theme
 *   #pricing          pinned LIGHT
 *   #real-world       follows the theme
 *   #which-tool       follows the theme, green burst
 *   #final-verdict    follows the theme
 *   #reserve          pinned dark, --bg-950
 *   #faqs             follows the theme, --bg-800 (the one step-lighter band)
 *   ON1 Guarantee     pinned light, injected by partials/footer.php
 *
 * Everything is scoped to the body id, which keeps these rules clear of the
 * #faqs and .eyebrow vocabulary base.css owns under the same names.
 */

/* !- 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.
 *
 * Every link is white rather than --text-300, so the active state is carried by
 * the underline rather than by colour.
 *
 * border-top: 0 when pinned is deliberate, and base.css's
 * .sticky.is-sticky[data-on1-sticky-below] comment names this bar as one of the
 * pages that does it: #site-header already draws that line, and both drawing
 * one rendered a 4px rule on scroll. */
#on1-vs-topaz #product-navigation.is-sticky {
	background: color-mix(in srgb, var(--bg-900) 75%, transparent);
	border-top: 0;
}

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

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

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

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

@media (max-width: 575.98px) {
	#on1-vs-topaz #product-navigation .nav-item .nav-link {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

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

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

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

/* !- Green accents
 *
 * base.css carries --orange-text, which flips per theme, but there is no green
 * equivalent: the numbered green scale holds the same values in both themes. So
 * this page does that flip itself. --green-500 clears 8.03:1
 * against the dark page and only 1.92:1 against #f6f6f7; --green-800 is the
 * step that clears 4.5:1 there, at 5.72:1.
 *
 * Bands pinned to one theme are not covered by this pair - #hero and #reserve
 * are always dark and #pricing is always light, so each restates its own value
 * and wins on specificity. */
#on1-vs-topaz .eyebrow {
	color: var(--green-500);
}

[data-theme="light"] #on1-vs-topaz .eyebrow {
	color: var(--green-800);
}

/* !- Hero
 *
 * The negative margin pulls the band up under the subnav, which is 46px tall,
 * and the top padding adds that height back so the content still clears it. */
#on1-vs-topaz #hero {
	background: var(--bg-950);
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 2.5rem 0;
	text-align: center;
}

#on1-vs-topaz #hero .eyebrow {
	margin-bottom: 2.25rem;
}

/* Pinned dark, so the pill keeps the dark-theme green in either theme. */
#on1-vs-topaz #hero .eyebrow span {
	align-items: center;
	background: var(--green-transparent);
	border-radius: var(--border-radius);
	color: var(--green-300);
	display: inline-flex;
	gap: 0.5rem;
	letter-spacing: 0.08em;
	padding: 0.3125rem 0.75rem;
	text-transform: uppercase;
}

/* The product-page heroes run this headline at 76px, and the other comparison
   pages step that down to 56px. This headline is a question rather than a
   product name - twice the length of the one on the DxO page - so it takes a
   further step down again: 44px, 30px below lg, and 26px on a phone, where 30px
   still ran "for You?" into both gutters. */
#on1-vs-topaz #hero h1 {
	color: var(--white);
	font-size: 2.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin-bottom: 1.375rem;
}

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

@media (max-width: 575.98px) {
	#on1-vs-topaz #hero h1 {
		font-size: 1.625rem;
	}
}

#on1-vs-topaz #hero .hero-sub {
	color: var(--text-300);
	font-size: var(--text-lg);
	line-height: 1.6;
	margin-bottom: 2.25rem;
}

/* Matches the NoNoise AI 2027 hero button: this padding plus Bootstrap's
   default 1rem, no font-size override. Scoped to the hero, not the page - a
   bare .btn here would also catch the subnav's .btn-sm and blow out its
   sizing. */
#on1-vs-topaz #hero .btn {
	padding: 0.9375rem 1.875rem;
}

#on1-vs-topaz #hero .hero-icon {
	border-radius: 22%;
}

#on1-vs-topaz #hero .hero-note {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
	margin-top: 1.25rem;
}

/* The #hero rule above ends at 2.5rem of bottom padding, which is the gap above
   the screenshot rather than below it. */
#on1-vs-topaz #hero .hero-shot {
	margin-bottom: 0;
	margin-top: 2.5rem;
}

#on1-vs-topaz .shot-caption {
	color: var(--text-500);
	font-size: var(--text-micro);
	letter-spacing: 0.08em;
	margin-bottom: 0;
	margin-top: 0.75rem;
	text-align: center;
	text-transform: uppercase;
}

#on1-vs-topaz #quick-comparison,
#on1-vs-topaz #presets,
#on1-vs-topaz #noise-handling,
#on1-vs-topaz #ai-approach,
#on1-vs-topaz #workflow,
#on1-vs-topaz #pricing,
#on1-vs-topaz #real-world,
#on1-vs-topaz #which-tool,
#on1-vs-topaz #final-verdict,
#on1-vs-topaz #reserve {
	padding: 5rem 0;
}

/* Pinning with data-theme only redefines the tokens. body's color is already
   computed by the time it inherits in, so each pinned band restates it or the
   copy keeps the other theme's grey. */
#on1-vs-topaz #reserve {
	background: var(--bg-950);
	color: var(--text-300);
}

#on1-vs-topaz #pricing {
	background: var(--bg-800);
	color: var(--text-300);
}

#on1-vs-topaz #pricing .eyebrow {
	color: var(--green-800);
}

/* base.css puts the FAQ band on --bg-900, the same tone as the page. This page
   uses it as its single step-lighter band. */
#on1-vs-topaz #faqs {
	background: var(--bg-800);
}

/* !- On-page contents
 *
 * The jump list under the hero. Chips rather than a bulleted list, so the
 * entries wrap into two tidy rows instead of a tall column. */
#on1-vs-topaz #page-contents {
	border-bottom: 1px solid var(--bg-800);
	border-top: 1px solid var(--bg-800);
	padding: 1.75rem 0;
}

#on1-vs-topaz .vs-toc-label {
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 0.875rem;
	text-transform: uppercase;
}

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

#on1-vs-topaz .vs-toc li {
	margin-bottom: 0;
}

#on1-vs-topaz .vs-toc 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);
	padding: 0.4375rem 0.875rem;
	text-decoration: none;
}

#on1-vs-topaz .vs-toc a:hover {
	border-color: var(--green-500);
	color: var(--text-50);
}

/* !- Head-to-head table
 *
 * Same treatment as the comparison table on the Compare ON1 Photo Editing
 * Software landing page, narrowed to three columns. */
#on1-vs-topaz .compare {
	border: 1px solid var(--bg-700);
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 0;
	width: 100%;
}

#on1-vs-topaz .compare th,
#on1-vs-topaz .compare td {
	border-bottom: 1px solid var(--bg-800);
	font-size: var(--text-sm);
	padding: 1.125rem 1.25rem;
	text-align: left;
	vertical-align: top;
}

#on1-vs-topaz .compare thead th {
	background: var(--bg-800);
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#on1-vs-topaz .compare thead th.on1-col {
	color: var(--green-500);
}

[data-theme="light"] #on1-vs-topaz .compare thead th.on1-col {
	color: var(--green-800);
}

#on1-vs-topaz .compare tbody th {
	color: var(--text-100);
	font-weight: 600;
}

#on1-vs-topaz .compare tbody td {
	color: var(--text-300);
}

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

#on1-vs-topaz .compare thead th:first-child {
	border-top-left-radius: var(--border-radius);
}

#on1-vs-topaz .compare thead th:last-child {
	border-top-right-radius: var(--border-radius);
}

#on1-vs-topaz .compare tbody tr:last-child th {
	border-bottom-left-radius: var(--border-radius);
}

#on1-vs-topaz .compare tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--border-radius);
}

#on1-vs-topaz .compare tbody tr:hover th,
#on1-vs-topaz .compare tbody tr:hover td {
	background: var(--bg-850);
}

/* !- Paired cards
 *
 * The ON1 / competitor pairs that carry this page's feature lists. .vs-card-on1
 * is the one that gets the green edge. */
#on1-vs-topaz .vs-card {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 1.75rem;
}

#on1-vs-topaz .vs-card-on1 {
	border-color: color-mix(in srgb, var(--green-500) 35%, transparent);
}

#on1-vs-topaz .vs-card img {
	border-radius: var(--border-radius);
	margin-bottom: 1.25rem;
	width: 100%;
}

#on1-vs-topaz .vs-card h3 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 1rem;
}

#on1-vs-topaz .vs-card p {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.6;
}

#on1-vs-topaz .vs-card p:last-child {
	margin-bottom: 0;
}

#on1-vs-topaz .vs-card strong {
	color: var(--text-50);
}

/* !- Narrative blocks
 *
 * The alternating image-and-copy rows. The headings are h3 so the section h2
 * keeps the outline. */
#on1-vs-topaz .vs-copy h3 {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

#on1-vs-topaz .vs-copy p {
	color: var(--text-300);
	line-height: 1.7;
}

#on1-vs-topaz .vs-copy p:last-child {
	margin-bottom: 0;
}

#on1-vs-topaz .vs-copy strong {
	color: var(--text-50);
}

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

/* !- Pricing cards
 *
 * #pricing is pinned light, so every value here resolves against the light
 * scale in both themes. The band is --bg-800 and the cards sit a step above it
 * on --bg-900, which is the reverse of the dark-theme pairing. */
#on1-vs-topaz .vs-price {
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 2.25rem;
}

#on1-vs-topaz .vs-price-on1 {
	border-color: color-mix(in srgb, var(--green-500) 45%, transparent);
}

#on1-vs-topaz .vs-price-name {
	color: var(--green-800);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

#on1-vs-topaz .vs-price .vs-price-name-alt {
	color: var(--text-400);
}

#on1-vs-topaz .vs-price-tag {
	color: var(--text-50);
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 1.25rem;
}

/* The spinner stands in for the price until SBL fills it, so left alone it
   inherits the 36px the price tag is set in. Pinned to the body size so the
   placeholder is never bigger than what replaces it. store.css does the same
   thing for [data-fsc-item-total], but that sheet does not load on this page. */
#on1-vs-topaz .vs-price-tag .fa-spinner {
	font-size: var(--text-base);
}

#on1-vs-topaz .vs-price-tag .vs-price-unit {
	color: var(--text-400);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0;
}

#on1-vs-topaz .vs-price ul {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

/* The dot is the ::before, so the rest of the item has to arrive as ONE flex
   item: each li wraps its content in a bare <span>. Without it a <strong> or the
   FastSpring price <span> becomes a flex item of its own and the gap below opens
   up mid-sentence. Same shape as .vs-camp li. */
#on1-vs-topaz .vs-price li {
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	gap: 0.625rem;
	line-height: 1.55;
}

#on1-vs-topaz .vs-price li::before {
	background: var(--bg-500);
	border-radius: 50%;
	content: '';
	flex: none;
	height: 0.375rem;
	margin-top: 0.5rem;
	width: 0.375rem;
}

#on1-vs-topaz .vs-price-on1 li::before {
	background: var(--green-600);
}

#on1-vs-topaz .vs-price li strong {
	color: var(--text-50);
	font-weight: 600;
}

/* !- Callout
 *
 * The one place on the page that is not green: the note under the pricing cards
 * is a caveat about Topaz's pricing change, so it takes the orange warning
 * tint. It sits inside the pinned light band, so --orange-900 is the right step
 * in either theme. */
#on1-vs-topaz .vs-callout {
	background: var(--orange-transparent);
	border: 1px solid color-mix(in srgb, var(--orange-500) 35%, transparent);
	border-radius: var(--border-radius);
	margin-top: 2rem;
	padding: 1.5rem 1.75rem;
}

/* Specificity, not source order, decides against the .vs-callout p rule below,
   so the label is matched through its wrapper to stay ahead of it. #pricing is
   pinned light, so --orange-900 is the right step in both themes. */
#on1-vs-topaz .vs-callout .vs-callout-label {
	color: var(--orange-900);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

#on1-vs-topaz .vs-callout p {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.7;
}

#on1-vs-topaz .vs-callout p:last-child {
	margin-bottom: 0;
}

#on1-vs-topaz .vs-callout strong {
	color: var(--text-50);
}

/* !- Camp cards */
#on1-vs-topaz .vs-camp {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 2.25rem;
}

#on1-vs-topaz .vs-camp-on1 {
	border-color: color-mix(in srgb, var(--green-500) 35%, transparent);
}

#on1-vs-topaz .vs-camp h3 {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 1.25rem;
}

#on1-vs-topaz .vs-camp ul {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

#on1-vs-topaz .vs-camp li {
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	gap: 0.625rem;
	line-height: 1.6;
}

#on1-vs-topaz .vs-camp li i.fa-solid {
	color: var(--green-500);
	font-size: var(--text-xs);
	margin-top: 0.3125rem;
}

[data-theme="light"] #on1-vs-topaz .vs-camp li i.fa-solid {
	color: var(--green-800);
}

#on1-vs-topaz .vs-camp li strong {
	color: var(--text-50);
	font-weight: 600;
}

/* !- Verdict box */
#on1-vs-topaz .vs-verdict {
	background: var(--bg-800);
	border: 1px solid color-mix(in srgb, var(--green-500) 25%, transparent);
	border-radius: var(--border-radius);
	padding: 2.5rem;
}

#on1-vs-topaz .vs-verdict p {
	color: var(--text-300);
	line-height: 1.75;
}

#on1-vs-topaz .vs-verdict p:last-child {
	margin-bottom: 0;
}

#on1-vs-topaz .vs-verdict strong {
	color: var(--text-50);
}

/* !- Closing CTA */
#on1-vs-topaz #reserve .vs-cta-copy {
	color: var(--text-300);
	font-size: var(--text-lg);
	margin-bottom: 1.5rem;
}

#on1-vs-topaz #reserve .vs-cta-list {
	color: var(--text-300);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-sm);
	gap: 0.75rem 1.75rem;
	justify-content: center;
	list-style: none;
	margin: 0 0 2rem;
	padding-left: 0;
}

#on1-vs-topaz #reserve .vs-cta-list li {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0;
}

#on1-vs-topaz #reserve .vs-cta-list i.fa-solid {
	color: var(--green-500);
	font-size: var(--text-xs);
}

#on1-vs-topaz #reserve .btn {
	padding: 0.75rem 1.25rem;
}

/* !- FAQs
 *
 * base.css draws the 'Q' badge on #faqs .faq-q::before in blue. Only the colours
 * change here. The badge is a fill plus text, so it takes the numbered green
 * steps directly: --green-500 clears 8:1 on the tint over the dark band but only
 * 1.9:1 over the light one, so the text flips the same way the eyebrows do. The
 * tint itself works on both. */
#on1-vs-topaz #faqs .faq-q::before {
	background: var(--green-transparent);
	color: var(--green-500);
}

[data-theme="light"] #on1-vs-topaz #faqs .faq-q::before {
	color: var(--green-800);
}

@media (max-width: 991.98px) {
	#on1-vs-topaz #quick-comparison,
	#on1-vs-topaz #presets,
	#on1-vs-topaz #noise-handling,
	#on1-vs-topaz #ai-approach,
	#on1-vs-topaz #workflow,
	#on1-vs-topaz #pricing,
	#on1-vs-topaz #real-world,
	#on1-vs-topaz #which-tool,
	#on1-vs-topaz #final-verdict,
	#on1-vs-topaz #reserve {
		padding: 3rem 0;
	}
}

/*
 * Three columns of prose do not fit a phone, and a horizontal scroller hides
 * the Topaz column 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 compare landing page: the cells on this table carry full
 * sentences rather than one or two words, so it stops being readable at the
 * same breakpoint the five-column tables do.
 */
@media (max-width: 991.98px) {
	#on1-vs-topaz .compare {
		border: 0;
	}

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

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

	#on1-vs-topaz .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-topaz .compare tbody tr:last-child {
		margin-bottom: 0;
	}

	#on1-vs-topaz .compare tbody tr:hover th,
	#on1-vs-topaz .compare tbody tr:hover td {
		background: none;
	}

	#on1-vs-topaz .compare tbody th,
	#on1-vs-topaz .compare tbody td {
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	#on1-vs-topaz .compare tbody th + td,
	#on1-vs-topaz .compare tbody td + td {
		margin-top: 1rem;
	}

	#on1-vs-topaz .compare tbody th[data-label]::before,
	#on1-vs-topaz .compare tbody td[data-label]::before {
		color: var(--text-400);
		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;
	}
}