/**
 * Styles for the ON1 Effects 2026 overview page
 *
 * Blue is both Effects' identity colour and the sitewide primary accent, so
 * eyebrows, box accents and CTAs all sit on the same ramp. The Photo RAW MAX
 * subscription box keeps the pink it has carried on this page.
 *
 * @copyright   2026, ON1
 */

/* !- Eyebrow */
.eyebrow span {
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	color: var(--blue-500);
	padding: 0.25rem 0.625rem;
}

/* Blue clears 4.5:1 on #1e1e1e at -500 but only manages 3.6:1 on #f6f6f7, so
 * light bands step down the ramp the way the accent table in the brand guide
 * does. Measured against #f6f6f7, not white - the page is never white. */
[data-theme="light"] .eyebrow,
[data-theme="light"] .eyebrow span,
[data-theme="light"] .check-list li i,
[data-theme="light"] #e26-specs #faq-specs td p.specs-eyebrow {
	color: var(--blue-600);
}

/* The bands this page pins dark are still #1e1e1e under the light theme, where
 * blue-600 is the wrong end of the ramp. Put them back on the dark step. */
[data-theme="light"] [data-theme="dark"] .eyebrow,
[data-theme="light"] [data-theme="dark"] .eyebrow span {
	color: var(--blue-500);
}

/* !- Section banding
 *
 * The page is long and every band used to sit on the same surface, which read
 * as one unbroken sheet. Three tones carry it now, on the 70/20/10 split:
 *
 *   dark      the body surface, and --bg-950 one step deeper for alternation
 *   light     #limitless, #export-share and the guarantee, pinned light so the
 *             ratio survives the theme toggle the way the guarantee already did
 *   lifted    #e26-specs, the single --bg-800 band, sat next to the guarantee
 *
 * #overview is pinned dark rather than light despite sitting where the mockup
 * wanted a light band: why-effects.png has the "1-click mask to add B&W Effect
 * to marble" callout set in white inside the artwork, which disappears on a
 * light surface. #limitless carries the light band in its place - plain
 * before/after photography with nothing baked into it.
 *
 * 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 three
 * bands below therefore re-state `color` so it resolves against their own
 * tokens; the same pair of declarations serves both directions.
 */
#point-click-create,
#advanced-tools {
	background: var(--bg-950);
}

#overview,
#limitless,
#export-share {
	background: var(--bg-900);
	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-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 .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 {
	color: var(--text-300);
}

#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 blue/purple wash behind it is the same art the page carried before, via
   image-set rather than a hardcoded @2x URL so the choice follows the display's
   pixel ratio instead of the viewport width - the form the 2027 heroes use.
   background-color carries the frame, since the art is 3:2 and this band runs
   much wider than that. */
#hero {
	background-color: var(--bg-900);
	background-image: image-set(url(https://ononesoft.cachefly.net/images/products/2026/effects/hero-bg.jpg) 1x, url(https://ononesoft.cachefly.net/images/products/2026/effects/hero-bg@2x.jpg) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--text-300);
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem;
	position: relative;
}

/* The art runs from near-black on the left to a hot cyan on the right. The copy
   column sits on the dark end and reads without help, so the scrim is only
   there to keep the bright end from overpowering the video panel beside it. */
#hero::before {
	background: linear-gradient(90deg, rgba(10, 9, 8, 0.3) 0%, rgba(10, 9, 8, 0.25) 45%, rgba(10, 9, 8, 0.45) 100%);
	content: '';
	inset: 0;
	position: absolute;
}

#hero > .container {
	position: relative;
	z-index: 1;
}

#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);
}

/* Pills between the sub-headline and the buttons, the same idiom as the Photo
   Studio hero. */
#hero .quick-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1rem;
	padding-left: 0;
}

/* nowrap so a pill never breaks mid-label - a label stacking into two lines
   inside its own border is worse than the row wrapping.

   margin-bottom has to be stated: base.css gives every li 0.25rem and then
   zeroes it on li:last-child, so leaving it alone sits the last pill 4px off
   the others. This outranks both, and gap owns the row spacing. */
#hero .quick-badges li {
	background: var(--blue-transparent);
	border: 1px solid var(--blue-700);
	border-radius: 50rem;
	color: var(--text-100);
	font-size: var(--text-mini);
	line-height: 1.35;
	margin-bottom: 0;
	padding: 0.3125rem 0.875rem;
	white-space: nowrap;
}

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

#hero .hero-video {
	border-radius: var(--border-radius);
	overflow: hidden;
}

#hero .hero-video video {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

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

#overview .overview-box {
	align-items: center;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1rem;
	padding: 1.5rem;
}

#overview .overview-icon {
	flex: none;
	height: 4.125rem;
	width: 4.125rem;
}

#overview .overview-title {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.25rem;
}

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

/* !- Before/after comparisons
 *
 * The <image-compare> web component from assets/vendor/, the same one the
 * Photo RAW 2027 page, the free LUT/preset pages and the blog prose use. It
 * brings its own shadow DOM, tags and range-input handle, so all that is left
 * here is the caption under each look.
 */
.look-caption {
	color: var(--text-100);
	font-weight: 600;
	margin: 0.75rem 0 0;
	text-align: center;
}

/* !- Limitless creative possibilities */
#limitless {
	padding: 5rem 0;
}

/* !- Point, click, create */
#point-click-create {
	padding: 5rem 0;
}

#point-click-create .pcc-image {
	cursor: pointer;
}

#point-click-create .pcc-hint {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin: 0.75rem 0 0;
	text-align: center;
}

#point-click-create .pcc-tabs {
	margin-top: 2.25rem;
}

#point-click-create .pcc-tabs-title {
	color: var(--text-50);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0;
}

/* A <button> is width: auto, so it shrinks to its content and leaves the thumb
   floating in the middle of its column. The grid column is the sizing unit
   here, not the button. */
#point-click-create .nav-pills .nav-link {
	background: none;
	border: 0;
	border-radius: var(--border-radius);
	display: block;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

#point-click-create .pcc-thumb {
	display: block;
	height: auto;
	opacity: 0.5;
	transition: opacity 0.15s ease;
	width: 100%;
}

#point-click-create .nav-link:hover .pcc-thumb,
#point-click-create .nav-link.active .pcc-thumb {
	opacity: 1;
}

/* 1px to match every other stroke on the page - the buy-box border and the
   active creative-filter pill are both 1px. */
#point-click-create .nav-link.active {
	outline: 1px solid var(--blue-500);
	outline-offset: 2px;
}

/* !- Creative filters */
#creative-filters {
	padding: 5rem 0;
}

#creative-filters .nav-pills .nav-link {
	background: var(--bg-800);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	margin-bottom: 0.75rem;
	padding: 1.25rem;
	text-align: start;
	width: 100%;
}

#creative-filters .nav-pills .nav-link:last-child {
	margin-bottom: 0;
}

#creative-filters .nav-pills .nav-link.active {
	background: var(--blue-transparent);
	border-color: var(--blue-500);
}

#creative-filters .panel-title {
	color: var(--text-50);
	display: block;
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: 0.25rem;
}

#creative-filters .panel-info {
	color: var(--text-400);
	display: block;
	font-size: var(--text-sm);
	line-height: 1.5;
}

#creative-filters .carousel-indicators {
	margin-bottom: 0.5rem;
}

/* !- Advanced tools */
#advanced-tools {
	padding: 5rem 0;
}

.check-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.check-list li {
	color: var(--text-100);
	margin-bottom: 0.75rem;
}

.check-list li:last-child {
	margin-bottom: 0;
}

.check-list li i {
	color: var(--blue-500);
	margin-right: 0.5rem;
}

/* !- Export & share */
#export-share {
	padding: 5rem 0;
}

#export-share .export-box {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	overflow: hidden;
}

#export-share .export-copy {
	color: var(--text-100);
	font-size: var(--text-lg);
	line-height: 1.4;
	margin-bottom: 0;
	padding: 1.25rem;
}

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

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

/* !- 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 .discount-sign-in {
	color: var(--link-alt);
}

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

.buy .buy-box {
	background: linear-gradient(-40deg, var(--blue-transparent), color-mix(in srgb, var(--purple-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(-40deg, var(--blue-500), var(--purple-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-500);
	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;
}

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

/* !- Buy page */
#effects-buy #buy {
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem 0;
}

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

/* !- Why ON1
 *
 * Band assignment on this page: the buy boxes sit on --bg-950, the guarantee
 * and the closing "Made by Photographers" block carry the light 20%, and the
 * FAQs are the single lifted band. #why-on1 stays on the body surface - it is
 * the tallest section here, and lifting it put a third of the page on --bg-800.
 */
#why-on1 {
	padding: 5rem 0;
}

#effects-buy #faqs {
	background: var(--bg-800);
}

/* On the light theme the FAQ band and the guarantee above it both resolve to
   #eeeeef and the seam between them disappears - same collision the specs band
   has on the overview, handled the same way. */
[data-theme="light"] #effects-buy #faqs {
	background: var(--bg-700);
}

/* Pinned light, so --bg-800 is #eeeeef in both themes. --bg-900 would match the
   body surface on the light theme and merge with #why-on1 directly above. */
#made-by-photographers {
	background: var(--bg-800);
	color: var(--text-300);
}

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

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

/* !- Made by photographers */
#made-by-photographers {
	padding: 5rem 0;
}

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

/* !- Features page */
#effects-features #features-hero {
	background: var(--bg-900);
	color: var(--text-300);
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem 0;
}

#effects-features #features-hero img {
	margin-right: 1rem;
	margin-top: -0.25rem;
}

#effects-features #features-hero h1 {
	line-height: 1.2;
	margin-bottom: 0;
}

#effects-features #features-hero h1 span {
	display: block;
	font-size: var(--text-2xl);
	font-weight: 400;
}

/* !- Feature list
 *
 * The partial pins itself light and is shared with the Photo Studio feature
 * tabs, so it carries no spacing utilities of its own - the page sheet owns
 * the rhythm, the same way photo-studio.css does for the tab panes.
 */
#effects-feature-list {
	background: var(--bg-900);
	color: var(--text-300);
	padding: 5rem 0;
}

#effects-feature-list h3 {
	font-size: var(--text-2xl);
	margin-bottom: 1.25rem;
}

#effects-feature-list ul {
	margin-bottom: 2.25rem;
}

#effects-feature-list ul:last-child {
	margin-bottom: 0;
}

/* The partial stacks two .rows, and the last ul in the first row is zeroed by
   the rule above - which left the "32 Included Filters" heading sitting right
   on top of the list before it. Rows are flex containers, so nothing collapses
   across the boundary and the gap has to be restated here. */
#effects-feature-list .row + .row {
	margin-top: 2.25rem;
}

#effects-feature-list li {
	margin-bottom: 0.75rem;
}

#effects-feature-list li:last-child {
	margin-bottom: 0;
}

/* !- System requirements
 *
 * This page's one "slightly lighter than dark" band. The table itself is
 * styled in base.css off #e26-specs #faq-specs.
 */
#e26-specs {
	background: var(--bg-800);
	padding: 5rem 0;
}

/* --bg-800 and the guarantee's own --bg-800 are the same #eeeeef once the page
   is light, so the two bands below each other merge into one block. One step
   further down the ramp keeps the seam. */
[data-theme="light"] #e26-specs {
	background: var(--bg-700);
}

#e26-specs #faq-specs tbody td + td {
	background: var(--bg-900);
}

/* The shared rule paints this green; Effects is a blue page. */
#e26-specs #faq-specs td p.specs-eyebrow {
	color: var(--blue-500);
}