/**
 * Styles for the ON1 Sky Swap AI 2023 pages
 *
 * Blue is Sky Swap AI's identity colour - the legacy page's buttons, badges and
 * checks were all --blue - and it is also the sitewide accent, so the guarantee
 * icons and the download page's step numbers and checks are already right in
 * base.css. The Sky Swap AI buy box runs blue to teal, the mockup's badge
 * gradient. The Photo RAW MAX subscription box keeps the pink it carried on
 * the legacy page, so the two boxes don't read as one colour.
 *
 * @copyright   2026, ON1
 */

/* !- Eyebrow
 *
 * base.css paints the eyebrow --blue-500, which clears 4.5:1 on none of this
 * page's surfaces. --link-alt flips per theme on its own (blue-400 dark,
 * blue-600 light) and is redefined on every [data-theme] scope, so pinned
 * bands resolve it correctly. Measured against the surfaces this page uses:
 *
 *   dark    blue-400  5.44 on #1e1e1e   6.01 on #141414   4.81 on #282828
 *   light   blue-600  4.78 on #f6f6f7
 *   chip    blue-400  4.56 on the dark tint   blue-600  3.94 on the light
 *
 * The chip fails on the light tint, so it is only used in bands pinned dark.
 * Bands that follow the theme toggle and the pinned-light band carry a plain
 * eyebrow.
 */
.eyebrow {
	color: var(--link-alt);
}

.eyebrow span {
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	color: var(--link-alt);
	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     #control-skies and the guarantee, pinned light so the ratio
 *             survives the theme toggle the way the guarantee already did
 *   lifted    #natural-results, the single --bg-800 band
 *
 * #overview follows the hero, and pinning it keeps the hero run in one piece.
 * #ocudrone-skies is pinned dark because the OcuDrone logo's wordmark is white
 * and its preview button is outline-light.
 *
 * 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);
}

#automatic-sky-replacement {
	background: var(--bg-950);
}

#ocudrone-skies {
	background: var(--bg-900);
	color: var(--text-300);
}

#control-skies {
	background: var(--bg-900);
	color: var(--text-300);
}

#natural-results {
	background: var(--bg-800);
}

#tools {
	background: var(--bg-950);
}

/* !- 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);
}

/* !- 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 forest before/after was the legacy hero's
 * 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;
}

/* !- Overview
 *
 * The legacy hero's "See it in Action" video sits in this band's media column.
 */
#overview {
	padding: 5rem 0;
}

#overview .overview-note {
	color: var(--text-400);
	font-size: var(--text-sm);
	font-style: italic;
	margin-bottom: 0;
}

#overview .video-figure {
	margin-bottom: 0;
}

/* !- Automatic sky replacement */
#automatic-sky-replacement {
	padding: 5rem 0;
}

/* !- OcuDrone skies */
#ocudrone-skies {
	padding: 5rem 0;
}

#ocudrone-skies .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Your skies, your way */
#control-skies {
	padding: 5rem 0;
}

#control-skies img {
	margin-bottom: 1.25rem;
}

#control-skies h3 {
	font-size: var(--text-xl);
	margin-bottom: 0.5rem;
}

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

/* !- Natural results
 *
 * This page's one "slightly lighter than dark" band. It follows the theme
 * toggle, so --bg-800 resolves to its light value there.
 */
#natural-results {
	padding: 5rem 0;
}

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

/* !- All the tools */
#tools {
	padding: 5rem 0;
}

#tools .tools-row {
	margin-top: 1.5rem;
}

#tools .tool-item {
	margin-bottom: 0;
}

#tools .tool-item figcaption {
	color: var(--text-200);
	margin-top: 0.875rem;
	text-align: center;
}

/* !- 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;
}

.buy .buy-box {
	background: linear-gradient(-40deg, var(--blue-transparent), color-mix(in srgb, var(--teal-500) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--blue-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(--blue-500), var(--teal-500));
	content: '';
	height: 0.25rem;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

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

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

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

.buy .buy-box.buy-box-alt:hover {
	border-color: color-mix(in srgb, var(--pink-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(--blue-400);
	content: '\f00c';
	flex-shrink: 0;
	font: var(--fa-font-solid);
}

.buy .buy-box.buy-box-alt .buy-box-features li::before {
	color: var(--pink-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 #sky-swap-specs #faq-specs, and its cells are
 * --bg-800.
 */
#sky-swap-specs {
	padding: 5rem 0;
}

/* The shared rule paints this green; Sky Swap AI is a blue page. */
#sky-swap-specs #faq-specs td p.specs-eyebrow {
	color: var(--link-alt);
}

/* !- Buy page
 *
 * Same section order as the HDR 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.
 */
#sky-swap-buy #buy {
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem 0;
}

#sky-swap-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 blue burst - the guarantee directly below is the light
 * band, and #why-on1 above is the body surface, so this steps down to
 * --bg-950. 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;
}