/**
 * Styles for the ON1 Photo Studio 2027 pages
 *
 * Overview, buy, feature list, and mobile. Gold is Photo Studio's identity
 * colour and carries the eyebrows, badges and box accents; primary CTAs stay
 * sitewide blue.
 *
 * @copyright   2026, ON1
 */

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

/* Gold clears 4.5:1 on #1e1e1e at -500 but not on #f6f6f7; light bands step
   down the ramp the way the accent table in the brand guide does. */
[data-theme="light"] .eyebrow,
[data-theme="light"] .eyebrow span,
[data-theme="light"] #ps-specs #faq-specs td p.specs-eyebrow {
	color: var(--gold-800);
}

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

/* White rather than --text-300. The overview hero is a photograph and the nav
   sits on it - the hero pulls up under the nav by its own height - so a mid
   grey that read fine on a flat band washes out over the bright part of the
   sky.

   Every link is white, so the active state is carried by the underline below
   rather than by colour. */
#product-navigation .nav-link {
	color: var(--white);
	text-decoration: none;
}

#product-navigation .nav-link:hover {
	opacity: 0.75;
}

#product-navigation .nav-link small {
	font-size: var(--text-xs);
	position: relative;
	top: 0.125em;
}

#product-navigation .nav-link strong {
	font-weight: 600;
}

#product-navigation a.nav-link.active small {
	border-bottom: 1px solid var(--white);
}

/* !- Sections
 *
 * 70/20/10: every band below is dark except #compare-plans, the feature-list
 * panes and the guarantee (light), and #our-promise (the one lift to --bg-800).
 */
#hero,
#buy-hero,
#overview,
#buy,
#whats-included,
#compare-plans,
#who-its-for,
#our-promise,
#ps-specs {
	padding: 5rem 0;
}

/* The hero pulls up under the sticky product nav, so its own top padding has
   to carry the nav's height. */
#hero,
#buy-hero,
#features-hero {
	margin-top: -46px;
	padding-top: calc(5rem + 46px);
}

/* Pinning data-theme only redefines the tokens; text with no colour rule of
   its own keeps body's computed value, which on a light page is dark grey on
   a dark band. */
#hero,
#buy-hero,
#features-hero,
#overview,
#buy,
#whats-included,
#who-its-for,
#feature-tabs {
	background: var(--bg-900);
	color: var(--text-300);
}

#buy,
#whats-included {
	background: var(--bg-950);
}

/* !- Hero
 *
 * The Baja sunset behind the overview hero. image-set rather than a hardcoded
 * @2x URL, so the choice follows the display's pixel ratio instead of the
 * viewport width - same form as the Learn hero and #raw27 on the Photo RAW
 * page. background-color carries the frame, since the art is 3:2 and this band
 * runs much wider than that.
 *
 * The scrim is a ::before rather than a second layer in the background
 * shorthand, so the breakpoint below can swap the wash without restating the
 * image-set. Scoped to the overview body id: the mobile page has its own #hero
 * and keeps the flat ground.
 */
#photo-studio-overview #hero {
	background-color: var(--bg-950);
	background-image: image-set(url(https://ononesoft.cachefly.net/images/products/2027/photo-studio/20260126_Z9_Baja_0097-HDR.jpg) 1x, url(https://ononesoft.cachefly.net/images/products/2027/photo-studio/20260126_Z9_Baja_0097-HDR@2x.jpg) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

/* Below lg the copy is full width and lands over the sun, so the wash is flat
   and heavy. The sunset alone does not hold white text. */
#photo-studio-overview #hero::before {
	background: linear-gradient(180deg, rgba(10, 9, 8, 0.45) 0%, rgba(10, 9, 8, 0.32) 50%, rgba(10, 9, 8, 0.48) 100%);
	content: '';
	inset: 0;
	position: absolute;
}

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

/* At lg the copy moves into the left column over the darker cloud bank and the
   product group takes the right, so the wash turns directional: heavy where the
   type is, light enough on the right to leave the sun in the picture. */
@media (min-width: 992px) {
	#photo-studio-overview #hero::before {
		background: linear-gradient(90deg, rgba(10, 9, 8, 0.55) 0%, rgba(10, 9, 8, 0.42) 35%, rgba(10, 9, 8, 0.14) 70%, rgba(10, 9, 8, 0.06) 100%);
	}
}

#hero h1 {
	color: var(--white);
}

#hero .hero-sub,
#buy-hero .hero-sub {
	color: var(--text-200);
	font-size: var(--text-xl);
	font-weight: 400;
}

/* Four pills share the left column and the four labels are 392px of text before
   any chrome, so they wrap to two rows below xxl. That is the accepted outcome:
   squeezing the gap and the padding far enough to hold one line at 1200px made
   the pills read as too tall for their width and too close together, and there
   is no padding at all that fits them in the 444px column at 992px. */
#hero .quick-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 2rem;
	padding-left: 0;
}

/* nowrap so a pill never breaks mid-label - "Every ON1 App Included" 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 other three. This outranks both, and gap owns the row spacing. */
#hero .quick-badges li {
	background: var(--gold-transparent);
	border: 1px solid var(--gold-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-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 0;
}

#hero .btn,
#buy-hero .btn {
	padding: 0.9375rem 1.875rem;
}

/* !- Buy page hero */
#buy-hero h1 {
	color: var(--white);
}

/* !- Overview */
.overview-item {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	gap: 0.875rem;
	padding: 1.375rem;
}

.overview-item h3 {
	font-size: var(--text-lg);
	margin-bottom: 0.25rem;
}

.overview-item p {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

.overview-icon {
	align-items: center;
	display: flex;
	flex: none;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.overview-icon-gold {
	background: var(--gold-transparent);
	border-radius: var(--border-radius);
	color: var(--gold-500);
}

/* !- Buy boxes */
.buy .buy-box {
	background: linear-gradient(-40deg, var(--gold-transparent), var(--blue-transparent));
	border: 1px solid var(--gold-700);
	border-radius: var(--border-radius);
	height: 100%;
	overflow: hidden;
	padding: 2.25rem 1.75rem;
	position: relative;
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.buy .buy-box::before {
	background: linear-gradient(-40deg, var(--gold-500), var(--blue-500));
	content: "";
	height: 0.25rem;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.buy .buy-box:hover {
	border-color: var(--gold-500);
}

@media (prefers-reduced-motion: reduce) {
	.buy .buy-box {
		transition: none;
	}
}

.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-price {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 800;
	margin-bottom: 0.875rem;
}

.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 .fa-spin {
	color: var(--text-100);
	font-size: 1rem;
}

.buy .buy-box .buy-box-price .sub-duration {
	font-size: var(--text-sm);
	font-weight: 400;
}

.buy .buy-box .buy-box-price small {
	font-size: var(--text-sm);
	font-weight: 400;
}

.buy .buy-box .buy-box-features {
	color: var(--text-200);
	font-size: var(--text-xs);
	list-style: none;
	margin: 0 auto 1.25rem 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-note {
	color: var(--text-400);
	font-size: var(--text-mini);
	font-style: italic;
	line-height: 1.5;
	margin-bottom: 0;
	margin-top: 1rem;
}

.buy .buy-box .btn {
	margin-bottom: 0;
	padding: 0.75rem 1.5rem;
}

.buy .buy-section-note {
	color: var(--text-400);
	font-size: var(--text-xs);
	line-height: 1.5;
	margin-top: 1.5rem;
}

/* !- Subscription upgrades */
.buy .buy-box .buy-box-details {
	padding-top: 0.5rem;
}

.buy .buy-box .upgrade-details {
	padding-top: 0.125rem;
}

.buy .buy-box .upgrade-details .eyebrow {
	margin-bottom: 0;
}

.buy .buy-box .upgrade-details .buy-box-price {
	margin-bottom: 0;
}

.buy .buy-box .upgrade-details .buy-box-note {
	margin-top: 0;
}

.buy .buy-box .upgrade-alert {
	background: var(--bg-800);
	border: 1px solid var(--bg-600);
	border-radius: var(--border-radius);
	color: var(--text-200);
	margin: 1.75rem 0;
	padding: 0.75rem;
	text-align: start;
}

.buy .buy-box .upgrade-alert label {
	font-size: var(--text-xs);
}

.buy .buy-box .renewal-date {
	color: var(--text-50);
	font-size: var(--text-2xl);
	font-weight: 700;
}

/* !- Upgrade failure */
.buy .buy-box .upgrade-error {
	color: var(--red-500);
	font-size: var(--text-xs);
	font-weight: 600;
	margin-top: 0.75rem;
}

/* !- What's included */
.included-block + .included-block {
	margin-top: 3.75rem;
}

.included-block .tag-mini {
	color: var(--gold-500);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.625rem;
	text-transform: uppercase;
}

.included-block h3 {
	font-size: var(--text-2xl);
	margin-bottom: 0.75rem;
}

.included-block p {
	color: var(--text-300);
	line-height: 1.7;
	margin-bottom: 0;
}

/* !- Compare plans
 *
 * The plan header is a Bootstrap .tab-content sitting above the table rather
 * than inside its thead: Bootstrap's Tab drives one target per trigger, and a
 * thead swap would have to move both plans' cells at once. Header and table
 * share the .table-responsive scroll box and the same column widths, so the
 * cards stay over their columns when the table scrolls.
 */
#compare-plans {
	background: var(--bg-900);
	color: var(--text-300);
}

#compare-plans h2,
#compare-plans .plan-name,
#compare-plans .price-amount,
#compare-plans .stat {
	color: var(--text-50);
}

/* Bootstrap's own .nav-pills spacing and link colours are overridden here so
   the pair reads as one segmented switch rather than two separate pills. */
.billing-toggle.nav-pills {
	--bs-nav-pills-border-radius: var(--border-radius);
	--bs-nav-link-padding-x: 1rem;
	--bs-nav-link-padding-y: 0.5rem;
	background: var(--bg-700);
	border-radius: var(--border-radius);
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 0.25rem;
	padding: 0.25rem;
}

.billing-toggle.nav-pills .nav-item {
	margin-bottom: 0;
}

.billing-toggle.nav-pills .nav-link {
	background: transparent;
	border: 0;
	color: var(--text-400);
	font-size: var(--text-sm);
	font-weight: 600;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

.billing-toggle.nav-pills .nav-link:hover {
	color: var(--text-100);
}

.billing-toggle.nav-pills .nav-link.active {
	background: var(--blue-500);
	color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
	.billing-toggle.nav-pills .nav-link {
		transition: none;
	}
}

.compare-wrap {
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
}

/* !- Plan header */
.compare-head .plan-row {
	background: var(--bg-800);
	display: flex;
	min-width: 44rem;
}

.compare-head .plan-cell {
	flex: 0 0 27%;
	padding: 1.25rem 1.125rem;
	text-align: center;
}

.compare-head .plan-spacer {
	flex: 0 0 46%;
}

.compare-head .plan-cell.plan-studio {
	background: var(--gold-transparent);
}

.compare-head .plan-head {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.compare-head .plan-name {
	font-size: var(--text-sm);
	font-weight: 700;
}

.compare-head .price-amount {
	font-size: var(--text-2xl);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 0;
}

.compare-head .price-amount .fa-spin {
	font-size: var(--text-base);
}

.compare-head .price-term {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-bottom: 0.625rem;
}

/* !- Compare table */
.compare-table {
	border-collapse: collapse;
	font-size: var(--text-xs);
	min-width: 44rem;
	width: 100%;
}

.compare-table .col-feature {
	width: 46%;
}

.compare-table .col-plan {
	width: 27%;
}

.compare-table th,
.compare-table td {
	border-bottom: 1px solid var(--bg-700);
	padding: 1rem 1.125rem;
	text-align: center;
	vertical-align: middle;
}

.compare-table tbody th {
	color: var(--text-100);
	font-weight: 500;
	text-align: start;
}

.compare-table tbody td.plan-studio {
	background: color-mix(in srgb, var(--gold-500) 4%, transparent);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
	border-bottom: 0;
}

.compare-table .included {
	color: var(--green-600);
}

.compare-table .not-included {
	color: var(--text-400);
}

.compare-table .stat {
	font-weight: 700;
}

/* !- Who it's for */
.audience-card img {
	margin-bottom: 0.875rem;
}

.audience-card p {
	color: var(--text-300);
	font-size: var(--text-xs);
	line-height: 1.5;
	margin-bottom: 0;
	text-align: center;
}

/* !- Our promise */
#our-promise {
	background: var(--bg-800);
	color: var(--text-300);
}

/* !- FAQs */
#faqs .faq-q::before {
	background: var(--gold-transparent);
	color: var(--gold-500);
}

/* !- System requirements */
#ps-specs {
	background: var(--bg-900);
	color: var(--text-300);
}

#ps-specs #faq-specs td p.specs-eyebrow {
	color: var(--gold-500);
}

/* !- Feature list page */
#photo-studio-features #features-hero {
	background: var(--bg-900);
	padding-bottom: 2.25rem;
}

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

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

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

/* !- Feature list tabs
 *
 * The tab strip sits in its own dark band; each pane is one product's own
 * feature-list partial, which brings its own pinned-light section. That keeps
 * the panes reusable on those products' pages and avoids nesting containers.
 */
#feature-tabs {
	padding: 0 0 3rem;
}

/* The seven tiles share the row rather than sitting at a fixed width: fixed
   tiles centred themselves under a left-aligned headline, and 7.5rem was
   narrow enough to wrap "Photo RAW MAX" onto two lines. */
#feature-tabs .nav-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
}

#feature-tabs .nav-pills .nav-item {
	flex: 1 1 6.5rem;
}

#feature-tabs .nav-pills .nav-link {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	padding: 1rem 0.875rem;
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
}

#feature-tabs .nav-pills .nav-link:hover {
	border-color: var(--bg-500);
	color: var(--text-50);
}

#feature-tabs .nav-pills .nav-link.active {
	background: var(--bg-800);
	border-color: var(--gold-500);
	color: var(--text-50);
}

#feature-tabs .nav-pills .nav-link img {
	display: block;
	height: 3rem;
	margin: 0 auto 0.5rem;
	width: 3rem;
}

#feature-tabs .feature-label {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	#feature-tabs .nav-pills .nav-link {
		transition: none;
	}
}

/* !- Feature list panes
 *
 * Two shapes land here: the 2027 partials, which wrap their new-in-this-version
 * block in #features-2027 with NEW badges, and the older ones, which are plain
 * h3-plus-ul columns. Both get the same pinned-light treatment.
 */
#photo-studio-features .tab-pane > section {
	background: var(--bg-800);
	color: var(--text-300);
	padding: 5rem 0;
}

#photo-studio-features .tab-pane h2,
#photo-studio-features .tab-pane h3,
#photo-studio-features .tab-pane strong {
	color: var(--text-50);
}

#photo-studio-features .tab-pane h3 {
	font-size: var(--text-2xl);
	margin-bottom: 1.25rem;
}

#photo-studio-features .tab-pane .eyebrow {
	color: var(--gold-800);
}

#photo-studio-features .tab-pane ul {
	margin-bottom: 2.25rem;
}

#photo-studio-features .tab-pane ul:last-child {
	margin-bottom: 0;
}

/* The Effects partial stacks two .rows, and the rule above zeroes the last ul
   in the first one - which left "32 Included Filters" sitting flush on the list
   before it. Rows are flex containers, so nothing collapses across the boundary.
   Scoped to that partial on purpose: the Lightpanel and Cloud Sync tabs also
   stack rows and already carry their own 24px gap. Same rule lives in
   assets/css/products/2026/effects.css for the standalone features page. */
#photo-studio-features .tab-pane #effects-feature-list .row + .row {
	margin-top: 2.25rem;
}

#photo-studio-features .tab-pane li {
	margin-bottom: 0.75rem;
}

#photo-studio-features .tab-pane li:last-child {
	margin-bottom: 0;
}

#photo-studio-features .tab-pane .new-badge {
	background: var(--gold-800);
	color: var(--white);
	flex-shrink: 0;
}

#photo-studio-features .tab-pane #features-2027 {
	background: var(--bg-900);
	border: 1px solid var(--gold-800);
	border-left: 4px solid var(--gold-800);
	border-radius: var(--border-radius);
	margin-bottom: 2.25rem;
	padding: 1.75rem;
}

#photo-studio-features .tab-pane #features-2027 .major-improvements {
	margin-bottom: 2.25rem;
}

#photo-studio-features .tab-pane #features-2027 .list-unstyled {
	margin-bottom: 0;
}

#photo-studio-features .tab-pane #features-2027 .list-unstyled li {
	align-items: baseline;
	border-bottom: 1px solid var(--bg-600);
	display: flex;
	gap: 0.5rem;
	padding-bottom: 1rem;
}

#photo-studio-features .tab-pane #features-2027 .list-unstyled li:last-child {
	border: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

#photo-studio-features .tab-pane #features-2027 .list-unstyled li + li {
	margin-top: 0.5rem;
}

/* !- Mobile page
 *
 * Ported from the Photo RAW copy of this page rather than shared: a page area
 * owns its stylesheet, and linking photo-raw.css here would pull in the whole
 * of that product's sheet for six rules' worth of layout.
 */
#photo-studio-mobile #hero,
#photo-studio-mobile #pro-grade-camera,
#photo-studio-mobile #tools,
#photo-studio-mobile #anywhere,
#photo-studio-mobile #creativity-on-the-go {
	padding: 5rem 0;
}

/* Two ids outrank the shared #hero rule above, so the nav offset has to be
   restated here or the shorthand padding wipes it out. */
#photo-studio-mobile #hero {
	margin-top: -46px;
	padding-top: calc(5rem + 46px);
}

/* The normal h1 rather than the inflated hero size the other pages use: this
   headline is a full sentence, not a three-word lockup, and at 56px it took
   three lines and drove the band far taller than the photograph behind it. */
#photo-studio-mobile #hero h1 {
	font-size: var(--text-5xl);
}

/* Normal body size for the intro too - it is a long paragraph, and --text-xl
   set for the overview hero's two-line sub made it the loudest thing here. */
#photo-studio-mobile #hero .hero-sub {
	font-size: var(--text-base);
}

#photo-studio-mobile #hero,
#photo-studio-mobile #tools,
#photo-studio-mobile #creativity-on-the-go,
#photo-studio-mobile #get-photo-studio {
	background: var(--bg-950);
	color: var(--text-300);
}

/* !- Mobile hero photograph
 *
 * The photograph gets its own top band at its native 3:2 rather than being
 * stretched over the whole section. The section is roughly square once the
 * copy and the device shot are in it, so background-size: cover on the section
 * had to scale a 2880px source up past itself - 1.31x at 1440 - and throw away
 * a quarter of the width. Soft, and a magnified centre crop of what is a wide
 * landscape.
 *
 * --photo-band is the height that keeps the aspect: 100vw / 1.5 = 66.6667vw,
 * floored at 26rem and capped at 70% of the section. At 1440 that resolves to a
 * 1440px-wide render - the source's own width, so no upscale at 2x - and the
 * frame is uncropped. The floor is for narrow viewports: at 375 the aspect
 * alone gives a 250px strip in an 1175px section, which reads as a stray band
 * rather than a hero, so it takes the crop instead.
 *
 * Ground and scrim both close on --bg-900, not the --bg-950 the other dark
 * bands on this page use. The section below is transparent over the body, which
 * is --bg-900, and once the photograph stops covering the whole hero its flat
 * lower half met that as a bare 20-to-30 step straight across the page. Matching
 * the two removes the edge; the photograph is what separates the hero now, not
 * a change of ground colour.
 *
 * The scrim's stops are close together through the back half rather than jumping
 * 0.88 to solid. A gradient that arrives at its final colour in one long step
 * leaves a mach band - the rate of change stops dead, and the eye reads that as
 * a drawn line across the page even though no two adjacent pixels differ by
 * much. Easing into --bg-900 over several stops removes it. The middle layer is
 * 12px of opaque --bg-900 pinned to the bottom edge, above the photo and below
 * the scrim: the band's height is fractional (881.164px at 1850), and that keeps
 * the last rows flat ground whatever the rounding does.
 */
#photo-studio-mobile #hero {
	--photo-band: min(max(66.6667vw, 26rem), 70%);

	background-color: var(--bg-900);
	position: relative;
}

#photo-studio-mobile #hero::before {
	background:
		linear-gradient(180deg, rgba(30, 30, 30, 0.72) 0%, rgba(30, 30, 30, 0.55) 34%, rgba(30, 30, 30, 0.66) 56%, rgba(30, 30, 30, 0.8) 72%, rgba(30, 30, 30, 0.9) 82%, rgba(30, 30, 30, 0.96) 89%, rgba(30, 30, 30, 0.99) 95%, var(--bg-900) 100%),
		linear-gradient(var(--bg-900), var(--bg-900)),
		image-set(url(https://ononesoft.cachefly.net/images/products/2027/photo-studio/20250227_Z9_DeathValley_7812.jpg) 1x, url(https://ononesoft.cachefly.net/images/products/2027/photo-studio/20250227_Z9_DeathValley_7812@2x.jpg) 2x);
	background-position: center center, center bottom, center center;
	background-repeat: no-repeat;
	background-size: cover, 100% 0.75rem, cover;
	content: '';
	height: var(--photo-band);
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

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

#photo-studio-mobile #tools p,
#photo-studio-mobile #creativity-on-the-go p {
	color: var(--text-300);
}

#photo-studio-mobile #get-photo-studio {
	padding: 2rem 0 4rem 0;
}

/* The three-device shot is the hero's own media, so it gets the gap the CTA
   block would otherwise leave tight. */
#photo-studio-mobile .ps-hero-shot {
	height: auto;
	margin-top: 3rem;
}

#photo-studio-mobile .app-stores {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

#photo-studio-mobile .app-store-button,
#photo-studio-mobile .gplay-button {
	height: 3rem;
	width: auto;
}

#photo-studio-mobile .ps-tiles .ps-tile {
	background: var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	padding: 1.625rem 1.5rem;
}

#photo-studio-mobile .ps-tile h3 {
	font-size: 0.96875rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	margin-bottom: 0;
}

#photo-studio-mobile .ps-tile p {
	color: var(--text-300);
	font-size: var(--text-xs);
	line-height: 1.55;
	margin-bottom: 0;
}

/* Centred icon-over-text variant of the tile. The icons are their own artwork
   rather than an accent-washed glyph. */
#photo-studio-mobile .ps-tile-mobile {
	align-items: center;
	text-align: center;
}

#photo-studio-mobile .ps-mobile-icon {
	height: auto;
	width: 5rem;
}

/* Bootstrap's arrows default to a 15% wide hit area with a white icon; these
   sit on app screenshots, so they get a scrim disc instead of relying on the
   image behind them. */
#photo-studio-mobile .carousel-control-prev,
#photo-studio-mobile .carousel-control-next {
	align-items: center;
	/* The indicator row sits inside .carousel - it has to, or Bootstrap cannot
	   find it to keep in step with the arrows - and the controls otherwise
	   stretch the full height and centre themselves over image plus dots. This
	   is that row: 1.5rem of margin plus its 0.5rem bars. */
	bottom: 2rem;
	display: flex;
	justify-content: center;
	opacity: 1;
	width: 4rem;
}

#photo-studio-mobile .carousel-control-prev-icon,
#photo-studio-mobile .carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.45);
	background-size: 45%;
	border-radius: 50%;
	height: 2.5rem;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 2.5rem;
}

#photo-studio-mobile .carousel-control-prev:hover .carousel-control-prev-icon,
#photo-studio-mobile .carousel-control-next:hover .carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
	#photo-studio-mobile .carousel-control-prev-icon,
	#photo-studio-mobile .carousel-control-next-icon {
		transition: none;
	}
}

/* Solid indicators rather than image thumbs: these three slides are wide UI
   screenshots. Two classes' worth of specificity so they outrank Bootstrap's
   own `.carousel-indicators [data-bs-target]`. */
#photo-studio-mobile .carousel-indicators.ps-dots {
	margin: 1.5rem 0 0 0;
	padding: 0;
	position: static;
}

#photo-studio-mobile .ps-dots [data-bs-target] {
	background: var(--bg-600);
	border: 0;
	border-radius: var(--border-radius);
	height: 0.5rem;
	margin: 0 0.25rem;
	opacity: 1;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 2rem;
}

#photo-studio-mobile .ps-dots [data-bs-target]:hover {
	background: var(--bg-500);
}

#photo-studio-mobile .ps-dots .active {
	background: var(--blue-500);
}

@media (prefers-reduced-motion: reduce) {
	#photo-studio-mobile .ps-dots [data-bs-target] {
		transition: none;
	}
}

/* !- Mobile video cards
   Vimeo poster frames with a play control over them, opening the shared
   #video-modal. The poster URLs are hardcoded rather than fetched. If a
   video's poster is ever changed in Vimeo, re-read it from
   https://vimeo.com/api/oembed.json?url=https://vimeo.com/<id> and swap the
   URL - everything before "-d_" is the stable part, the suffix is the size. */
#photo-studio-mobile .ps-video {
	display: block;
	text-decoration: none;
}

#photo-studio-mobile .ps-video-thumb {
	aspect-ratio: 16 / 9;
	background: var(--bg-900);
	border-radius: var(--border-radius);
	display: block;
	overflow: hidden;
	position: relative;
}

#photo-studio-mobile .ps-video-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Sits over the poster, so the scrim rather than a token keeps it legible on
   any of the three. */
#photo-studio-mobile .ps-video-play {
	align-items: center;
	background: rgba(0, 0, 0, 0.45);
	border-radius: var(--border-radius);
	color: var(--white);
	display: flex;
	font-size: var(--text-4xl);
	inset: 0;
	justify-content: center;
	position: absolute;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#photo-studio-mobile .ps-video:hover .ps-video-play,
#photo-studio-mobile .ps-video:focus-visible .ps-video-play {
	background: rgba(0, 0, 0, 0.2);
}

#photo-studio-mobile .ps-video:focus-visible {
	outline: 2px solid var(--blue-500);
	outline-offset: 2px;
}

#photo-studio-mobile .ps-video-cap {
	color: var(--text-50);
	display: block;
	font-size: var(--text-lg);
	font-weight: 700;
	margin-top: 0.75rem;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	#photo-studio-mobile .ps-video-play {
		transition: none;
	}
}

#photo-studio-mobile .discount-sign-in {
	color: var(--gold-500);
}

#photo-studio-mobile .discount-sign-in a {
	color: var(--gold-500);
	text-decoration: underline;
}

#photo-studio-mobile .discount-sign-in a:hover {
	color: var(--gold-300);
}

/* !- Small screens */
@media (max-width: 575.98px) {
	#hero,
	#buy-hero,
	#overview,
	#buy,
	#whats-included,
	#compare-plans,
	#who-its-for,
	#our-promise,
	#ps-specs {
		padding: 3rem 0;
	}

	#hero,
	#buy-hero,
	#features-hero {
		padding-top: calc(3rem + 46px);
	}

	#feature-tabs {
		padding: 0 0 2rem;
	}

	#photo-studio-features .tab-pane > section {
		padding: 3rem 0;
	}

	#feature-tabs .nav-pills .nav-item {
		flex: 1 1 4.5rem;
	}

	#feature-tabs .nav-pills .nav-link {
		padding: 0.75rem 0.5rem;
	}

	#feature-tabs .nav-pills .nav-link img {
		height: 2.25rem;
		width: 2.25rem;
	}

	#photo-studio-mobile #hero,
	#photo-studio-mobile #pro-grade-camera,
	#photo-studio-mobile #tools,
	#photo-studio-mobile #anywhere,
	#photo-studio-mobile #creativity-on-the-go {
		padding: 3rem 0;
	}

	#photo-studio-mobile #hero {
		padding-top: calc(3rem + 46px);
	}

	#photo-studio-mobile #get-photo-studio {
		padding: 1.5rem 0 2.5rem 0;
	}
}