/**
 * Styles for the ON1 Photo Keyword AI 2023 pages
 *
 * Gold is Photo Keyword AI's identity colour - the keyword tags in the legacy
 * page's artwork are gold, and the mockup puts its eyebrows and icon tiles on
 * gold - so eyebrows, icon chips and box accents sit on the --gold ramp. HDR
 * already owns the legacy page's orange. Gold is too light to carry white
 * text, so CTAs stay sitewide blue, the way Photo Studio's do. The Photo RAW
 * MAX subscription box keeps the pink it carried on the legacy page.
 *
 * @copyright   2026, ON1
 */

/* !- Eyebrow
 *
 * The eyebrow is uppercase --text-micro, so it is held to 4.5:1. There is no
 * --gold-text token that flips per theme, so the light steps are set here.
 * Measured against the surfaces this page uses:
 *
 *   dark    gold-500  9.45 on #1e1e1e   10.44 on #141414   8.36 on #282828
 *   light   gold-900  5.49 on #f6f6f7    5.11 on #eeeeef   (gold-800 3.01)
 *   chip    gold-500  6.70 on the dark tint   gold-900  5.07 on the light
 */
.eyebrow {
	color: var(--gold-500);
}

.eyebrow span {
	background: var(--gold-transparent);
	border-radius: var(--border-radius);
	color: var(--gold-500);
	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.
 * #photo-management and the guarantee are the pinned ones. */
[data-theme="light"] .eyebrow,
[data-theme="light"] .eyebrow span {
	color: var(--gold-900);
}

/* Which means the rule above also reaches into the bands this page pins dark
 * once the visitor picks light. Put those back on the dark step. */
[data-theme="light"] [data-theme="dark"] .eyebrow,
[data-theme="light"] [data-theme="dark"] .eyebrow span {
	color: var(--gold-500);
}

/* !- Section banding
 *
 * Three tones, on the 70/20/10 split:
 *
 *   dark      the body surface, alternating with --bg-950 one step deeper
 *   light     #photo-management and the guarantee, pinned light so the ratio
 *             survives the theme toggle the way the guarantee already did
 *   lifted    #file-support, the single --bg-800 band
 *
 * #overview follows the hero, and pinning it keeps the hero run in one piece.
 * #find-photos and #easily-load-photos sit either side of the light band and
 * are pinned dark too: left to follow the toggle, all three land within a
 * shade of each other under the light theme and read as one band.
 *
 * 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);
}

#find-photos {
	background: var(--bg-950);
	color: var(--text-300);
}

#photo-management {
	background: var(--bg-900);
	color: var(--text-300);
}

#easily-load-photos {
	background: var(--bg-900);
	color: var(--text-300);
}

#file-support {
	background: var(--bg-800);
}

/* !- 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 tagged fox 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 intro set its first paragraph bold and white; this keeps that
 * lead-in weight.
 */
#overview {
	padding: 5rem 0;
}

#overview .overview-lead {
	color: var(--text-50);
	font-weight: 600;
}

/* !- Quickly find your photos */
#find-photos {
	padding: 5rem 0;
}

#find-photos .search-cards {
	margin-bottom: 3rem;
}

/* !- Search and import cards
 *
 * The four search types and the three import extras share one card: an icon
 * chip over a line of copy. Both bands are pinned dark, so the chip only needs
 * the dark gold step.
 */
.search-card,
.import-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	padding: 1.5rem;
}

.search-card p,
.import-card p {
	color: var(--text-200);
	margin-bottom: 0;
}

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

.search-icon {
	align-items: center;
	background: var(--gold-transparent);
	border-radius: var(--border-radius);
	color: var(--gold-500);
	display: flex;
	font-size: var(--text-lg);
	height: 2.5rem;
	justify-content: center;
	margin-bottom: 1rem;
	width: 2.5rem;
}

/* !- Elevate your photo management */
#photo-management {
	padding: 5rem 0;
}

/* !- Easily load your photos */
#easily-load-photos {
	padding: 5rem 0;
}

#easily-load-photos .import-cards {
	margin-top: 3rem;
}

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

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

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

.buy .buy-box:hover {
	border-color: color-mix(in srgb, var(--gold-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(--gold-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;
}

/* !- System requirements
 *
 * --bg-950 rather than the body surface: #faqs directly above it is --bg-900,
 * so on the body surface the two would run together as one band. The table
 * itself is styled in base.css off #keyword-specs #faq-specs, and its cells
 * are --bg-800.
 */
#keyword-specs {
	background: var(--bg-950);
	padding: 5rem 0;
}

/* The shared rule paints this green; Photo Keyword AI is a gold page. */
#keyword-specs #faq-specs td p.specs-eyebrow {
	color: var(--gold-500);
}

[data-theme="light"] #keyword-specs #faq-specs td p.specs-eyebrow {
	color: var(--gold-900);
}

/* !- Gold 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 gold page,
 * so each is re-pointed here rather than in base.css, which would recolour
 * every other page using them. The Q chip and guarantee icon sit on the 16%
 * gold tint, where gold-500 is 6.70:1 dark and gold-900 5.07:1 light.
 */
#faqs .faq-q::before {
	background: var(--gold-transparent);
	color: var(--gold-500);
}

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

/* The guarantee partial pins itself light, so this one never needs a dark step. */
.guarantee-boxes .guarantee-icon {
	background: var(--gold-transparent);
}

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

#resources .eyebrow {
	color: var(--gold-500);
}

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

/* !- 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 Portrait AI buy page has it. The mockup's
 * Trustpilot strip is left out - 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.
 */
#keyword-buy #buy {
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem 0;
}

#keyword-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 gold 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 trial accents primary blue. The form bands are pinned
   dark, so these only need the dark step: the number sits on the 16% gold
   chip at 6.70:1, and the checks are non-text. */
.trial-steps li::before {
	background: var(--gold-transparent);
	color: var(--gold-500);
}

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