/**
 * Fashion photo editor landing page
 *
 * @copyright   2026, ON1
 *
 * base.css already owns most of this page's vocabulary - .eyebrow,
 * .section-divider, .section-intro, .feature-bullets, the .faqs accordion and
 * the whole #reviews and #resources bands - so what lives here is the hero,
 * the intro strip, the two-column block the four feature bands share, the
 * features intro, the video band and the closing CTA.
 *
 * The .section-* classes came across from _assets/css/base.css, which this page
 * no longer loads. They are scoped to the body id rather than left bare: the
 * names are generic enough that a later base.css addition under the same name
 * would collide.
 *
 * Like the Real Estate sibling, the hero is not a photographic plate - there is
 * no 2880-wide art for this page, every asset in
 * /images/landing/fashion-photo-editor/ being 1464 x 800. It runs as a
 * two-column band instead, copy against the studio shot.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero               pinned dark, --bg-950
 *   #intro              pinned LIGHT, heading plus the four-up strip
 *   #features-intro     follows the theme, the centred lead-in to the bands
 *   #skin-retouching    follows the theme
 *   #color-grading      follows the theme
 *   #batch-editing      follows the theme
 *   #non-destructive    follows the theme
 *   #reviews            follows the theme, --bg-800 (the one step-lighter band)
 *   #video              follows the theme
 *   #faqs               follows the theme
 *   #own-your-workflow  pinned dark, --bg-950, blue burst
 *   #resources          follows the theme, base.css owns the band
 *   ON1 Guarantee       pinned light, injected by partials/footer.php
 */

/* !- Buttons
   House sizing, same as the blog index. The hero steps up from it below. */
#fashion-photo-editor #site-main .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Hero
   Pinned dark and stating its own colors - pinning the attribute only redefines
   the tokens, and body's color is already computed by the time it inherits in.
   The secondary button is .btn-outline-light, which is only legible on a dark
   surface, so the pin is load-bearing rather than cosmetic. */
#fashion-photo-editor #hero {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 4rem 0;
}

@media (min-width: 992px) {
	#fashion-photo-editor #hero {
		padding: 5.625rem 0;
	}
}

/* Mobile first, and the small step is the one that matters: at --text-6xl the
   headline crowds the studio shot on a phone, where the two columns have
   already stacked. */
#fashion-photo-editor #hero .hero-h1 {
	color: var(--white);
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin-bottom: 1rem;
	text-wrap: balance;
}

@media (min-width: 992px) {
	#fashion-photo-editor #hero .hero-h1 {
		font-size: var(--text-5xl);
	}
}

#fashion-photo-editor #hero .hero-sub-bold {
	color: var(--white);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0.875rem;
}

#fashion-photo-editor #hero .hero-sub {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#fashion-photo-editor #hero .hero-sub strong {
	color: var(--text-100);
	font-weight: 600;
}

#fashion-photo-editor #hero .btn {
	font-size: var(--text-base);
	padding: 0.9375rem 1.875rem;
}

#fashion-photo-editor #hero .hero-buttons {
	margin-bottom: 2.5rem;
}

#fashion-photo-editor #hero .hero-proof {
	color: var(--white);
	font-size: var(--text-xs);
	margin: 0;
}

#fashion-photo-editor #hero .hero-proof .list-inline-item {
	margin-right: 1.75rem;
	padding-left: 0.875rem;
	position: relative;
}

#fashion-photo-editor #hero .hero-proof .list-inline-item:last-child {
	margin-right: 0;
}

#fashion-photo-editor #hero .hero-proof .list-inline-item::before {
	background: var(--blue-500);
	border-radius: 50%;
	content: '';
	height: 0.375rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.375rem;
}

/* !- Intro
   The page's light band. Pinned, so it stays light under either theme, and it
   restates background and color for the same reason the hero does. */
#fashion-photo-editor #intro {
	background: var(--bg-900);
	color: var(--text-300);
	padding: 4.375rem 0;
}

#fashion-photo-editor #intro .intro-heading {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 0.875rem;
}

#fashion-photo-editor #intro .intro-sub {
	font-size: var(--text-base);
	line-height: 1.7;
}

#fashion-photo-editor #intro .intro-sub strong {
	color: var(--text-100);
	font-weight: 600;
}

/* !- Four-up strip
   Cards sit one step lighter than the band they're on, which on a pinned-light
   band means --bg-950. The border is what carries the edge at that distance. */
#fashion-photo-editor .four-up-item {
	background: var(--bg-950);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 2rem 1.75rem;
}

#fashion-photo-editor .four-up-item .four-up-icon {
	color: var(--blue-600);
	font-size: 1.75rem;
	margin-bottom: 1rem;
}

#fashion-photo-editor .four-up-item h3 {
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.625rem;
}

#fashion-photo-editor .four-up-item .four-up-copy {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

/* !- Features intro
   The centred lead-in the four deep-dive bands hang off. It carries only its
   own top padding: the divider below it and the first band's .section-copy
   supply the rest of the gap. */
#fashion-photo-editor #features-intro {
	padding: 5rem 0 0;
}

/* !- Section blocks
   The four deep-dive bands, each one topic against one image. The row runs g-0
   so the artwork meets the copy column edge to edge; .section-copy carries the
   padding that keeps the text off it.

   The four bands plus the intro above them are a 2,866px run of one tone, which
   reads as a single undifferentiated slab however the copy alternates. The odd
   bands take the step tone to break it, which lands the tint on the same bands
   that put their artwork on the right - the alternation is one rhythm rather
   than two fighting each other.

   This is also what separates the bands, so there are no .section-divider rules
   between them: a hairline between two different backgrounds reads as an
   artifact rather than a divider. */
#fashion-photo-editor #skin-retouching,
#fashion-photo-editor #batch-editing {
	background: var(--bg-800);
}

#fashion-photo-editor .section-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4.375rem;
}

@media (max-width: 575.98px) {
	#fashion-photo-editor .section-copy {
		padding-left: 0;
		padding-right: 0;
	}
}

#fashion-photo-editor .section-h2 {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 1rem;
}

#fashion-photo-editor .section-body {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 1.75rem;
}

#fashion-photo-editor .section-body strong {
	color: var(--text-100);
	font-weight: 600;
}

/* The closing line under a bullet list. .feature-bullets already carries the
   gap above it, so this only needs to clear the link or the band below. */
#fashion-photo-editor .section-close {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 1rem;
}

#fashion-photo-editor .section-link {
	color: var(--link-alt);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}

#fashion-photo-editor .section-link:hover {
	text-decoration: underline;
}

/* !- Video */
#fashion-photo-editor #video {
	padding: 5.625rem 0;
}

#fashion-photo-editor #video .video-figure {
	margin: 0;
}

#fashion-photo-editor #video .video-caption {
	color: var(--text-400);
	font-size: var(--text-sm);
	font-style: italic;
	margin-top: 1rem;
	text-align: center;
}

/* !- FAQs */
#fashion-photo-editor #faqs {
	padding: 5.625rem 0;
}

/* !- Own Your Workflow
   Pinned dark, and restating its own colors for the reason the hero does. The
   secondary button is .btn-outline-light, which is only legible on a dark
   surface - letting this band follow the theme would erase it on light. */
#fashion-photo-editor #own-your-workflow {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 6.25rem 0;
}

#fashion-photo-editor #own-your-workflow h2 {
	color: var(--text-50);
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 1.25rem;
	text-wrap: balance;
}

#fashion-photo-editor #own-your-workflow .cta-copy {
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#fashion-photo-editor #own-your-workflow .cta-copy strong {
	color: var(--text-100);
	font-weight: 600;
}