/**
 * Styles for the ON1 Portrait AI 2023 overview page
 *
 * Pink is Portrait AI's identity colour, so eyebrows, box accents and CTAs all
 * sit on the --pink ramp. There is no --pink-transparent token, so the tinted
 * fills are color-mix() off --pink-500 at the same 16% the other *-transparent
 * tokens use. The Photo RAW MAX subscription box is blue, Photo RAW's colour -
 * the pink it carries on the Effects and Resize AI pages is this product's.
 *
 * @copyright   2026, ON1
 */

/* !- Eyebrow
 *
 * The eyebrow is uppercase --text-micro, so it is held to 4.5:1 rather than the
 * 3:1 large-text bar. Measured against the surfaces this page actually uses,
 * never against white. The chip sits on its own 16% tint, not the band:
 *
 *   plain       pink-400  4.81 on #1e1e1e   5.32 on #141414   4.26 on #282828
 *               pink-300  5.28 on #282828
 *               pink-600  4.99 on #f6f6f7   4.65 on #eeeeef   4.48 on #eaeaea
 *               pink-700  6.31 on #eaeaea
 *   chip        pink-300  5.24 on the dark tint   pink-700  5.57 on the light
 *
 * So -400 carries the dark bands, -600 the light ones, and the single lifted
 * band steps to -300 / -700 because -400 / -600 do not clear there.
 */
.eyebrow {
	color: var(--pink-400);
}

.eyebrow span {
	background: color-mix(in srgb, var(--pink-500) 16%, transparent);
	border-radius: var(--border-radius);
	color: var(--pink-300);
	padding: 0.25rem 0.625rem;
}

/* This matches two ways on purpose: on the root when the visitor picks the
 * light theme, and on a section pinned data-theme="light" under either theme.
 * #full-control and the guarantee are the pinned ones. */
[data-theme="light"] .eyebrow,
[data-theme="light"] #pai-specs #faq-specs td p.specs-eyebrow {
	color: var(--pink-600);
}

[data-theme="light"] .eyebrow span {
	color: var(--pink-700);
}

/* Which means the rules above also reach into the bands this page pins dark
 * once the visitor picks light, where the light steps are the wrong end of the
 * ramp. Put those back on the dark ones. */
[data-theme="light"] [data-theme="dark"] .eyebrow {
	color: var(--pink-400);
}

[data-theme="light"] [data-theme="dark"] .eyebrow span {
	color: var(--pink-300);
}

/* !- Section banding
 *
 * Three tones, on the 70/20/10 split the mockup calls for:
 *
 *   dark      the body surface, alternating with --bg-950 one step deeper
 *   light     #full-control and the guarantee, pinned light so the ratio
 *             survives the theme toggle the way the guarantee already did
 *   lifted    #frequency-separation, the single --bg-800 band
 *
 * #overview and #retouching-tools are pinned dark. The retouching shots have
 * their callouts set in white inside the artwork, which disappears on a light
 * surface; #overview follows the hero, and pinning it keeps the hero run in
 * one piece. It shares the hero's --bg-900 the way the Effects overview does -
 * the burst behind the hero is what separates them.
 *
 * 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; the same pair of declarations serves both directions.
 */
#overview {
	background: var(--bg-900);
	color: var(--text-300);
}

#retouching-tools {
	background: var(--bg-950);
	color: var(--text-300);
}

#portrait-in-action,
#individual-adjustments,
#presets {
	background: var(--bg-950);
}

#full-control {
	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-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. There is no hero art for Portrait AI the way
 * Effects and Resize AI have one - the legacy page used the before/after
 * portrait as a full-bleed background, which is the shot the mockup puts in
 * the right-hand column - so the band carries the shared pink burst instead.
 */
#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/, the same one the
 * Effects page uses. 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 */
#portrait-in-action {
	padding: 5rem 0;
}

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

/* !- What's new
 *
 * Three stacked rows rather than the mockup's card grid: two of the three have
 * a screenshot and the third a video, and a card grid would have had to drop
 * them or shrink them to thumbnails.
 */
#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,
#whats-new .video-figure {
	margin-bottom: 0;
}

/* !- Retouching tools
 *
 * The after shot sits on top of the before and the button fades it in. The
 * before stays in flow so the frame keeps its height.
 */
#retouching-tools {
	padding: 5rem 0;
}

#retouching-tools .run-button {
	font-size: var(--text-sm);
	margin-top: 0.5rem;
	padding: 0.75rem 1.25rem;
}

#retouching-tools .run-compare {
	position: relative;
}

#retouching-tools .run-after {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.8s ease;
}

#retouching-tools .run-compare.is-after .run-after {
	opacity: 1;
}

/* !- Hard work */
#hard-work {
	padding: 5rem 0;
}

#hard-work h3 {
	font-size: var(--text-lg);
	margin: 1.75rem 0 0.5rem;
}

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

/* !- Individual adjustments */
#individual-adjustments {
	padding: 5rem 0;
}

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

/* !- Feature cards
 *
 * The two three-up grids. Media on top, copy below, the card on --bg-800 - the
 * same surface the Effects export boxes use, which holds on both the pinned
 * light band and the body surface.
 */
.feature-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.feature-card .feature-media {
	padding: 1.25rem 1.25rem 0;
}

.feature-card .feature-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.feature-card h3 {
	color: var(--text-50);
	font-size: var(--text-xl);
	line-height: 1.3;
	margin-bottom: 0.5rem;
}

.feature-card p {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

/* !- Full control
 *
 * This page's light band. The three shots here run from 1:1 to 2.3:1, so each
 * sits centred in a fixed 4:3 frame rather than setting its own height - the
 * copy below them would otherwise start at three different heights. The
 * targeted-retouching shots are all within a few pixels of 5:3 and need none
 * of this.
 */
#full-control {
	padding: 5rem 0;
}

#full-control .feature-media {
	align-items: center;
	aspect-ratio: 4 / 3;
	display: flex;
	justify-content: center;
}

#full-control .feature-media img {
	height: auto;
	max-height: 100%;
	width: auto;
}

#full-control .feature-media image-compare img {
	width: 100%;
}

/* !- Frequency separation
 *
 * This page's one "slightly lighter than dark" band.
 */
#frequency-separation {
	background: var(--bg-800);
	padding: 5rem 0;
}

/* --bg-800 is #eeeeef once the page is light, one step off the #f6f6f7 of
   #full-control directly above. One step further down the ramp keeps the seam,
   the same fix the Resize AI print band carries. */
[data-theme="light"] #frequency-separation {
	background: var(--bg-700);
}

/* The one band where pink-400 does not clear 4.5:1 - see the eyebrow note at
   the top. The id outranks the [data-theme="light"] rule up there, so the light
   theme has to be restated rather than left to fall through, and on --bg-700
   pink-600 misses by a hair too. */
#frequency-separation .eyebrow {
	color: var(--pink-300);
}

[data-theme="light"] #frequency-separation .eyebrow {
	color: var(--pink-700);
}

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

/* !- Targeted retouching */
#targeted-retouching {
	padding: 5rem 0;
}

/* !- Presets */
#presets {
	padding: 5rem 0;
}

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

/* !- 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 pink, the same as the Photo RAW, NoNoise and
   Resize AI 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, color-mix(in srgb, var(--pink-500) 16%, transparent), color-mix(in srgb, var(--purple-500) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--pink-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(--pink-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(--pink-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(--pink-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
 *
 * --bg-950 rather than the body surface: #faqs directly above it is --bg-900,
 * so on the body surface the two ran together as one band. The table itself is
 * styled in base.css off #pai-specs #faq-specs, and its cells are --bg-800.
 */
#pai-specs {
	background: var(--bg-950);
	padding: 5rem 0;
}

/* The shared rule paints this green; Portrait AI is a pink page. It sits on the
   --bg-800 cell, where pink-400 only manages 4.26:1. */
#pai-specs #faq-specs td p.specs-eyebrow {
	color: var(--pink-300);
}

/* !- Pink in the shared blocks
 *
 * The FAQ "Q" chip, the guarantee icons and the resources eyebrow are all
 * painted blue by base.css. Blue is the sitewide accent; this is a pink page,
 * so each is re-pointed here rather than in base.css, which would recolour
 * every other page using them.
 *
 * Contrast measured against the surface each one actually sits on, which for
 * the Q chip and the guarantee icon is the 16% pink tint, not the band:
 *
 *   Q chip, dark band   pink-300 5.24   (pink-400 only 4.22)
 *   Q chip, light band  pink-700 5.57
 *   guarantee icon      pink-700 5.57   (pinned light, always)
 *   resources eyebrow   pink-400 4.81 on #1e1e1e / pink-600 4.99 on #f6f6f7
 */
#faqs .faq-q::before {
	background: color-mix(in srgb, var(--pink-500) 16%, transparent);
	color: var(--pink-300);
}

[data-theme="light"] #faqs .faq-q::before {
	color: var(--pink-700);
}

/* The guarantee partial pins itself light, so this one never needs a dark step. */
.guarantee-boxes .guarantee-icon {
	background: color-mix(in srgb, var(--pink-500) 16%, transparent);
}

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

#resources .eyebrow {
	color: var(--pink-400);
}

[data-theme="light"] #resources .eyebrow {
	color: var(--pink-600);
}

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

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

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

#portrait-ai-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.
 */
#portrait-ai-feature-list {
	background: var(--bg-900);
	color: var(--text-300);
	padding: 5rem 0;
}

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

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

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

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

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

/* !- Buy page
 *
 * Section order follows the buy mockup: pricing, FAQs, "Why Choose ON1?" and
 * then the guarantee, with "Made by Photographers Like You" split back out
 * into its own band the way the Effects buy page has it. The mockup's
 * Trustpilot strip is left out, the same as the Resize AI buy page - there is
 * no new-stack Trustpilot partial. #buy pulls up under the sticky product nav
 * the way the overview hero does, unless a passed video is sitting above it.
 */
#portrait-ai-buy #buy {
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem 0;
}

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

/* !- Why choose ON1
 *
 * One step down from the #faqs band above it so the two do not run together.
 */
#why-on1 {
	background: var(--bg-950);
	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 pink burst - see the note in buy/index.php. It re-states
 * `color` because pinning only redefines the tokens.
 */
#made-by-photographers {
	background: var(--bg-900);
	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, so there is no light step to write.

   The number sits on the 16% pink chip, not the band - #3f1d34 - where
   pink-400 only manages 4.22:1, so it takes -300 (5.24:1), same as the FAQ
   chip. The check icons are non-text, and pink-500 is 4.25:1 on #1e1e1e. */
.trial-steps li::before {
	background: color-mix(in srgb, var(--pink-500) 16%, transparent);
	color: var(--pink-300);
}

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