/**
 * Styles for the ON1 HDR 2023 pages
 *
 * Orange is HDR's identity colour - the legacy page's "red-orange" buttons were
 * plain --orange, and the mockup falls back to orange wherever its red/orange/
 * gold gradient can't go - so eyebrows, box accents and CTAs sit on the
 * --orange ramp. The gradient itself only survives as the buy box's top stripe.
 * The Photo RAW MAX subscription box is blue, Photo RAW's colour.
 *
 * @copyright   2026, ON1
 */

/* !- Eyebrow
 *
 * --orange-text flips per theme on its own (orange-400 dark, orange-900 light)
 * and is redefined on every [data-theme] scope, so pinned bands resolve it
 * correctly without the light/dark override pairs the Portrait AI sheet needs.
 * Measured against the surfaces this page actually uses:
 *
 *   dark    orange-400  8.05 on #1e1e1e   8.89 on #141414   7.12 on #282828
 *   light   orange-900  7.24 on #f6f6f7   6.74 on #eeeeef   6.50 on #eaeaea
 *   chip    orange-400  6.17 on the dark tint   orange-900  6.34 on the light
 */
.eyebrow {
	color: var(--orange-text);
}

.eyebrow span {
	background: var(--orange-transparent);
	border-radius: var(--border-radius);
	color: var(--orange-text);
	padding: 0.25rem 0.625rem;
}

/* !- Section banding
 *
 * Three tones, on the 70/20/10 split:
 *
 *   dark      the body surface, alternating with --bg-950 one step deeper
 *   light     #hdr-looks and the guarantee, pinned light so the ratio survives
 *             the theme toggle the way the guarantee already did
 *   lifted    #get-creative, the single --bg-800 band
 *
 * #overview follows the hero, and pinning it keeps the hero run in one piece.
 * #create-hdr carries outline-light carousel buttons and #get-creative an
 * outline-light toggle, and both need a dark band under them - so those two
 * are pinned dark as well.
 *
 * Pinning data-theme only redefines the tokens - text with no colour rule of
 * its own keeps body's computed value, which lands dark-on-dark (or
 * light-on-light) the moment the toggle disagrees with the band. The pinned
 * bands below therefore re-state `color` so it resolves against their own
 * tokens.
 */
#overview {
	background: var(--bg-900);
	color: var(--text-300);
}

#create-hdr {
	background: var(--bg-950);
	color: var(--text-300);
}

#hdr-in-action {
	background: var(--bg-950);
}

#hdr-looks {
	background: var(--bg-900);
	color: var(--text-300);
}

#get-creative {
	background: var(--bg-800);
	color: var(--text-300);
}

/* !- Passed videos */
#passed-video {
	background: var(--bg-950);
	color: var(--text-300);
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem 0;
}

#passed-video .video-figure {
	margin-bottom: 1.75rem;
}

#passed-video h2 {
	text-align: center;
}

#passed-video .passed-video-price {
	font-size: var(--text-lg);
	margin-bottom: 1.5rem;
	text-align: center;
}

#passed-video .passed-video-price del {
	color: var(--text-500);
	font-weight: 400;
	margin-right: 0.5rem;
}

#passed-video .passed-video-price strong {
	color: var(--text-50);
	font-size: var(--text-4xl);
	font-weight: 800;
}

#passed-video .passed-video-price .fa-spin {
	font-size: var(--text-lg);
}

#passed-video .passed-video-note {
	font-size: var(--text-sm);
	margin-top: 0.75rem;
	text-align: center;
}

/* !- Product navigation */
#product-navigation.is-sticky {
	background: color-mix(in srgb, var(--bg-900) 75%, transparent);
	border-top: 0;
}

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

#product-navigation {
	color: var(--text-300);
}

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

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

#product-navigation .nav-link {
	color: var(--text-300);
	text-decoration: none;
}

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

#product-navigation .nav-link strong {
	color: var(--text-50);
	font-weight: 600;
}

#product-navigation .nav-link:hover {
	color: var(--text-50);
}

#product-navigation a.nav-link.active {
	color: var(--text-50);
}

#product-navigation a.nav-link.active small {
	border-bottom: 1px solid var(--text-50);
}

/* !- Hero
 *
 * The hero pulls up under the sticky product nav, so its own top padding has
 * to carry the nav's height. The sunflower before/after was the legacy hero's
 * full-bleed background; here it sits in the right-hand column.
 */
#hero {
	background-color: var(--bg-900);
	color: var(--text-300);
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem;
}

#hero h1 {
	margin-bottom: 1rem;
}

#hero .hero-sub {
	color: var(--text-300);
	font-size: var(--text-lg);
	margin-bottom: 1.5rem;
}

#hero .hero-price {
	font-size: var(--text-lg);
	margin-bottom: 1.5rem;
}

#hero .hero-price del {
	color: var(--text-500);
	font-weight: 400;
	margin-right: 0.5rem;
}

#hero .hero-price strong {
	color: var(--text-50);
	font-size: var(--text-4xl);
	font-weight: 800;
}

#hero .hero-price .fa-spin {
	font-size: var(--text-lg);
}

#hero .hero-buttons .btn {
	padding: 0.75rem 1.5rem;
}

/* !- Before/after comparisons
 *
 * The <image-compare> web component from assets/vendor/. It brings its own
 * shadow DOM and range-input handle; all it needs here is to fill its column.
 */
image-compare {
	display: block;
	width: 100%;
}

/* !- Overview */
#overview {
	padding: 5rem 0;
}

/* !- See it in action */
#hdr-in-action {
	padding: 5rem 0;
}

#hdr-in-action .video-figure {
	margin-bottom: 0;
}

/* !- What's new */
#whats-new {
	padding: 5rem 0;
}

#whats-new .whats-new-row + .whats-new-row {
	margin-top: 3.5rem;
}

#whats-new h3 {
	font-size: var(--text-2xl);
	margin-bottom: 1rem;
}

#whats-new p:last-child {
	margin-bottom: 0;
}

#whats-new .whats-new-more {
	margin-top: 4.5rem;
}

#whats-new .whats-new-more h3 {
	margin-bottom: 1.5rem;
	text-align: center;
}

#whats-new .more-item {
	margin-bottom: 0;
}

#whats-new .more-item figcaption {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 700;
	margin-top: 0.875rem;
	text-align: center;
}

/* !- Create awe-inspiring HDR
 *
 * The four points run as one wrapping row above the example carousel. The
 * carousel's own prev/next controls are Bootstrap's full-height overlays,
 * which would sit on top of the compare handle's drag area, so they move
 * below the slides as a pair of buttons.
 */
#create-hdr {
	padding: 5rem 0;
}

#create-hdr .create-hdr-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

#create-hdr .create-hdr-list li {
	color: var(--text-100);
	font-weight: 600;
}

/* Non-text, so 3:1 is the bar - orange-500 is 7.50:1 on --bg-950. */
#create-hdr .create-hdr-list i {
	color: var(--orange-500);
	margin-right: 0.25rem;
}

#create-hdr .carousel-nav {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.5rem;
}

#create-hdr .carousel-nav .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- HDR looks
 *
 * The four photos are all 658px tall at 2x but run from 946 to 1182 wide.
 * Each column grows in proportion to its photo's width, so the pair in a row
 * comes out the same height without cropping either one. Below md they stack
 * one per row and the proportions stop mattering.
 */
#hdr-looks {
	padding: 5rem 0;
}

@media (min-width: 768px) {
	#hdr-looks .look-1 {
		flex: 1002 1 0%;
	}

	#hdr-looks .look-2 {
		flex: 1128 1 0%;
	}

	#hdr-looks .look-3 {
		flex: 1182 1 0%;
	}

	#hdr-looks .look-4 {
		flex: 946 1 0%;
	}
}

#hdr-looks .look-frame {
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	overflow: hidden;
	position: relative;
}

#hdr-looks .look-edited {
	height: 100%;
	inset: 0;
	opacity: 0;
	position: absolute;
}

#hdr-looks .look-control {
	align-items: center;
	background: var(--bg-800);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	color: var(--text-200);
	display: flex;
	font-size: var(--text-xs);
	font-weight: 600;
	gap: 1rem;
	padding: 0.875rem 1.25rem;
	width: 100%;
}

#hdr-looks .look-control span {
	flex-shrink: 0;
}

/* Bootstrap draws the track in its secondary background, which is the same
   grey as this bar, so the track vanished. Restated per engine - the two
   pseudo-elements can't share a rule, or one engine drops both. */
#hdr-looks .look-control .form-range::-webkit-slider-runnable-track {
	background: var(--bg-600);
}

#hdr-looks .look-control .form-range::-moz-range-track {
	background: var(--bg-600);
}

#hdr-looks .look-control .form-range::-webkit-slider-thumb {
	background: var(--orange-500);
}

#hdr-looks .look-control .form-range::-moz-range-thumb {
	background: var(--orange-500);
}

/* !- Batch */
#batch {
	padding: 5rem 0;
}

#batch p:last-child {
	margin-bottom: 0;
}

/* !- Creative HDR
 *
 * This page's one "slightly lighter than dark" band. The layer list reads
 * like the app's own effects stack: pick a layer to see that effect alone, or
 * press the button to light all three and fade in the stacked result. The
 * single shots and the stacked one are within 4% of the same shape, so all
 * four are cropped to the stacked one's frame rather than letting it jump.
 */
#get-creative {
	padding: 5rem 0;
}

#get-creative .stack-layers {
	list-style: none;
	margin: 0 0 1.5rem 0;
	padding-left: 0;
}

#get-creative .stack-layers li + li {
	margin-top: 0.5rem;
}

#get-creative .stack-layer {
	align-items: center;
	background: none;
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-500);
	display: flex;
	font-size: var(--text-sm);
	font-weight: 600;
	gap: 1rem;
	padding: 0.5rem;
	text-align: start;
	transition: border-color 0.4s ease, color 0.4s ease;
	width: 100%;
}

#get-creative .stack-layer:hover {
	border-color: var(--bg-500);
	color: var(--text-200);
}

#get-creative .stack-layer img {
	height: auto;
	opacity: 0.5;
	transition: opacity 0.4s ease;
	width: 5rem;
}

#get-creative .stack-layer.is-on {
	border-color: color-mix(in srgb, var(--orange-500) 55%, transparent);
	color: var(--text-50);
}

#get-creative .stack-layer.is-on img,
#get-creative .stack-layer:hover img {
	opacity: 1;
}

#get-creative .stack-button {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

#get-creative .stack-compare {
	aspect-ratio: 1045 / 689;
	position: relative;
}

#get-creative .stack-compare img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity 0.8s ease;
	width: 100%;
}

#get-creative .stack-compare img.is-active {
	opacity: 1;
}

/* !- Plugin workflow */
#plugin-workflow {
	padding: 5rem 0;
}

/* Pills sized to their label, wrapping in a flex row - not grid columns. The
   row owns the gaps, so the pills carry no margin of their own. */
#plugin-workflow .plugin-pill {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-size: var(--text-xs);
	font-weight: 600;
	margin-bottom: 0;
	padding: 0.875rem 1.25rem;
}

/* !- Buy */
#buy {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 5rem 0;
}

.buy h1,
.buy h2 {
	line-height: 1.3;
}

.buy h1 {
	font-size: var(--text-3xl);
	font-weight: 700;
}

.buy .eyebrow {
	margin: 0 0 1rem 0;
}

/* Green rather than the page's orange, the same as the other product buy
   sections. #buy is pinned dark, so green-500 always sits on --bg-950 and
   never has to survive the light theme. */
.buy .discount-sign-in {
	color: var(--green-500);
}

.buy .discount-sign-in i {
	font-size: 1.5rem;
	vertical-align: middle;
}

.buy .discount-sign-in a {
	color: var(--green-500);
	text-decoration: underline;
}

.buy .discount-sign-in a:hover {
	color: var(--green-100);
}

.buy .buy-box {
	background: linear-gradient(-40deg, var(--orange-transparent), color-mix(in srgb, var(--red-500) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--orange-500) 30%, transparent);
	border-radius: var(--border-radius);
	height: 100%;
	overflow: hidden;
	padding: 2.25rem 1.75rem;
	position: relative;
	transition: border-color 0.2s ease;
}

.buy .buy-box::before {
	background: linear-gradient(90deg, var(--red-500), var(--orange-500), var(--gold-500));
	content: '';
	height: 0.25rem;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.buy .buy-box:hover {
	border-color: color-mix(in srgb, var(--orange-500) 55%, transparent);
}

.buy .buy-box.buy-box-alt {
	background: linear-gradient(-40deg, var(--blue-transparent), color-mix(in srgb, var(--purple-500) 8%, transparent));
	border-color: color-mix(in srgb, var(--blue-500) 30%, transparent);
}

.buy .buy-box.buy-box-alt::before {
	background: linear-gradient(-40deg, var(--blue-500), var(--purple-500));
}

.buy .buy-box.buy-box-alt:hover {
	border-color: color-mix(in srgb, var(--blue-500) 55%, transparent);
}

.buy .buy-box .buy-box-name {
	color: var(--text-50);
	font-size: var(--text-2xl);
}

.buy .buy-box .buy-box-pill {
	margin-bottom: 1rem;
}

.buy .buy-box .buy-box-pill span {
	border: 1px solid var(--bg-600);
	border-radius: 50rem;
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.5rem;
	text-transform: uppercase;
}

.buy .buy-box .buy-box-desc {
	color: var(--text-400);
	font-size: var(--text-mini);
	line-height: 1.5;
	margin-bottom: 1.25rem;
}

.buy .buy-box .buy-box-features {
	color: var(--text-200);
	font-size: var(--text-xs);
	list-style: none;
	margin: 0 auto 0.75rem auto;
	padding-left: 0;
	text-align: start;
	width: 92%;
}

.buy .buy-box .buy-box-features li {
	align-items: baseline;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.buy .buy-box .buy-box-features li::before {
	color: var(--orange-500);
	content: '\f00c';
	flex-shrink: 0;
	font: var(--fa-font-solid);
}

.buy .buy-box.buy-box-alt .buy-box-features li::before {
	color: var(--blue-500);
}

/* Not included at this tier - a crossed circle rather than a check, and the
   row dims so the list reads at a glance. */
.buy .buy-box .buy-box-features li.feature-off {
	color: var(--text-500);
}

.buy .buy-box .buy-box-features li.feature-off::before {
	color: var(--text-600);
	content: '\f057';
}

.buy .buy-box .buy-box-price {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 800;
	margin-bottom: 0.875rem;
}

.buy .buy-box .buy-box-price .fa-spin {
	color: var(--text-100);
	font-size: 1rem;
}

.buy .buy-box .buy-box-price del {
	color: var(--text-500);
	font-size: 1rem;
	font-weight: 400;
	margin-right: 0.5rem;
}

.buy .buy-box .buy-box-price .sub-duration {
	font-size: var(--text-sm);
	font-weight: 400;
}

.buy .buy-box .btn {
	margin-bottom: 0;
	padding: 0.75rem 1.5rem;
}

.buy .buy-section-note {
	font-size: var(--text-xs);
	line-height: 1.5;
}

/* !- System requirements
 *
 * The body surface, one step up from #buy directly above it. The table itself
 * is styled in base.css off #hdr-specs #faq-specs, and its cells are --bg-800.
 */
#hdr-specs {
	padding: 5rem 0;
}

/* The shared rule paints this green; HDR is an orange page. */
#hdr-specs #faq-specs td p.specs-eyebrow {
	color: var(--orange-text);
}

/* !- Orange in the shared blocks
 *
 * The guarantee icons and the resources eyebrow are painted blue by base.css.
 * Blue is the sitewide accent; this is an orange page, so each is re-pointed
 * here rather than in base.css, which would recolour every other page using
 * them. --orange-text resolves to orange-900 inside the pinned-light
 * guarantee, 6.34:1 on the tint.
 */
.guarantee-boxes .guarantee-icon {
	background: var(--orange-transparent);
}

.guarantee-boxes .guarantee-icon i.fa-solid {
	color: var(--orange-text);
}

#resources .eyebrow {
	color: var(--orange-text);
}

/* !- Buy page
 *
 * Same section order as the Portrait AI buy page: pricing, "Why Choose ON1?",
 * "Made by Photographers Like You", then the guarantee. #buy pulls up under
 * the sticky product nav the way the overview hero does, unless a passed video
 * is sitting above it.
 */
#hdr-buy #buy {
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem 0;
}

#hdr-buy #passed-video + #buy {
	margin-top: 0;
	padding-top: 5rem;
}

/* !- Why choose ON1 */
#why-on1 {
	padding: 5rem 0;
}

#why-on1 .why-row + .why-row {
	margin-top: 3rem;
}

#why-on1 h3 {
	font-size: var(--text-2xl);
}

/* !- Made by photographers
 *
 * Pinned dark on the orange burst - the guarantee directly below is the light
 * band. --bg-950 rather than Portrait AI's --bg-900: with no FAQs on this page,
 * #why-on1 above is the body surface, and the two would run together. It
 * re-states `color` because pinning only redefines the tokens.
 */
#made-by-photographers {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 5rem 0;
}

#made-by-photographers .btn {
	margin-top: 0.5rem;
	padding: 0.75rem 1.5rem;
}

/* !- Download page
 *
 * The form supplies its own field rhythm: base.css styles .form-control and
 * .form-select but nothing sets spacing between groups, and .form-group is a
 * Bootstrap 4 holdover with no rules of its own in 5.x.
 */
#trial-download,
#post-download,
#user-guide,
#quick-start-course,
.trial-message {
	padding: 5rem 0;
}

#trial-download,
#post-download,
.trial-message {
	background: var(--bg-900);
	color: var(--text-300);
	margin-top: -46px;
	padding-top: calc(5rem + 46px);
}

#user-guide {
	background: var(--bg-900);
	color: var(--text-300);
}

#quick-start-course {
	background: var(--bg-950);
	color: var(--text-300);
}

/* Bootstrap's own .btn padding is 6px 12px; the house CTA is 12px 24px. The
   form's submit gets it from .trial-submit .btn, these two sections do not. */
#user-guide .btn,
#quick-start-course .btn {
	padding: 0.75rem 1.5rem;
}

/* base.css paints the step numbers and the check icons blue and says a
   colour-coded product overrides these two. Every band carrying them is pinned
   dark. The number sits on the 16% orange chip, where orange-400 is 6.17:1;
   the check icons are non-text, and orange-500 is 6.79:1 on #1e1e1e. */
.trial-steps li::before {
	background: var(--orange-transparent);
	color: var(--orange-text);
}

.trial-details li i {
	color: var(--orange-500);
}