/**
 * Styles for the ON1 Plus 2027 pages
 *
 * Overview and buy. Orange is Plus's identity colour and carries the eyebrows,
 * badges and box accents; primary CTAs stay sitewide blue. The mockup used gold
 * for the accent, which is Photo Studio's colour - Plus is orange.
 *
 * @copyright   2026, ON1
 */

/* !- Eyebrow */
.eyebrow {
	color: var(--orange-500);
}

.eyebrow span {
	background: var(--orange-transparent);
	border-radius: var(--border-radius);
	color: var(--orange-500);
	padding: 0.25rem 0.625rem;
}

/* Orange 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 {
	color: var(--orange-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;
	}
}

/* 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 is dark except #reviews and the guarantee (light), and
 * #photo-raw (the one lift to --bg-800).
 */
#hero,
#buy-hero,
#what-is-plus,
#perks,
#reviews,
#photo-raw,
#buy {
	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 {
	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,
#what-is-plus,
#perks,
#buy {
	background: var(--bg-900);
	color: var(--text-300);
}

#buy,
#what-is-plus {
	background: var(--bg-950);
}

/* !- Hero
 *
 * The autumn-forest photograph the live page already carries. 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 Photo Studio hero.
 * background-color carries the frame, since the art is 2.4:1 and this band runs
 * taller than that once the copy is in it.
 *
 * 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.
 */
#plus-overview #hero {
	background-color: var(--bg-950);
	background-image: image-set(url(https://ononesoft.cachefly.net/images/products/plus/2026-hero-bg.jpg) 1x, url(https://ononesoft.cachefly.net/images/products/plus/2026-hero-bg@2x.jpg) 2x);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

/* Below lg the copy is full width and runs the width of the frame, so the wash
   is flat and heavy. This photograph is a bright golden-hour scene - much
   lighter overall than the Photo Studio sunset - and will not hold white text
   at the weights that one takes. */
#plus-overview #hero::before {
	background: linear-gradient(180deg, rgba(10, 9, 8, 0.55) 0%, rgba(10, 9, 8, 0.45) 50%, rgba(10, 9, 8, 0.58) 100%);
	content: '';
	inset: 0;
	position: absolute;
}

/* At lg the copy sits in the left two thirds, over the trunk and the
   photographer, and the wash turns directional: heavy where the type is,
   easing off the bright bokeh on the right so the forest stays in the picture.
   The subject is a dark shape against that bokeh, so she reads through the
   heavy end rather than being buried by it. */
@media (min-width: 992px) {
	#plus-overview #hero::before {
		background: linear-gradient(90deg, rgba(10, 9, 8, 0.52) 0%, rgba(10, 9, 8, 0.44) 40%, rgba(10, 9, 8, 0.16) 70%, rgba(10, 9, 8, 0.02) 100%);
	}
}

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

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

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

/* Brighter over the photograph. The buy hero is a flat band and keeps --text-200,
   which is what the sibling product pages use. */
#plus-overview #hero .hero-sub {
	color: var(--text-50);
}

/* nowrap so a pill never breaks mid-label. 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. gap owns the row
   spacing. */
#hero .quick-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 2rem;
	padding-left: 0;
}

#hero .quick-badges li {
	background: rgba(10, 9, 8, 0.45);
	border: 1px solid var(--orange-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;
}

#hero .hero-note {
	color: var(--text-400);
	font-size: var(--text-xs);
	margin-bottom: 0;
	margin-top: 1.25rem;
}

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

/* !- What is ON1 Plus */
.included-block + .included-block {
	margin-top: 3.75rem;
}

.included-block .tag-mini {
	color: var(--orange-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;
}

/* The checklists inside the blocks. base.css styles ul generically, so the
   marker is replaced rather than recoloured. */
.included-block .plus-checks {
	list-style: none;
	margin: 1.25rem 0 0;
	padding-left: 0;
}

.included-block .plus-checks li {
	align-items: baseline;
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	gap: 0.5rem;
	margin-bottom: 0.625rem;
}

.included-block .plus-checks li:last-child {
	margin-bottom: 0;
}

.included-block .plus-checks li::before {
	color: var(--orange-500);
	content: '\f00c';
	flex-shrink: 0;
	font: var(--fa-font-solid);
}

/* The Creative Assets tiles. The sources are 1.83:1 texture samples; the tiles
   crop to 3:2 so the four line up as an even block rather than four different
   heights. */
.asset-grid img {
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* !- Perks
 *
 * Shared by the five member perks and the four Photo RAW cross-sell tiles. The
 * perks carry their own artwork; the cross-sell tiles carry a glyph.
 */
.perk-card {
	align-items: center;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem 1.25rem;
	text-align: center;
}

.perk-card img {
	height: 3.5rem;
	margin-bottom: 0.875rem;
	width: 3.5rem;
}

.perk-card .perk-icon {
	align-items: center;
	background: var(--orange-transparent);
	border-radius: 50%;
	color: var(--orange-500);
	display: flex;
	font-size: var(--text-2xl);
	height: 4rem;
	justify-content: center;
	margin: 0 auto 1.25rem;
	width: 4rem;
}

.perk-card p {
	color: var(--text-100);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0;
}

.perk-card .perk-icon i {
	color: var(--orange-500);
}

/* !- Reviews
 *
 * Pinned light in the markup, which flips the tokens rather than the rules -
 * --bg-700 resolves to #eaeaea here and --text-300 to a dark grey. color has to
 * be stated: pinning the attribute redefines the tokens, but text with no
 * colour rule of its own keeps body's computed value.
 */
#reviews {
	background: var(--bg-700);
	color: var(--text-300);
}

#reviews h2 {
	color: var(--text-50);
}

#reviews .review-card {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	padding: 1.75rem 1.625rem;
}

#reviews .review-stars {
	display: flex;
	gap: 0.1875rem;
	margin-bottom: 0.875rem;
}

#reviews .star {
	background: var(--orange-500);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	display: block;
	height: 1rem;
	width: 1rem;
}

#reviews .review-text {
	border-left: 0;
	color: var(--text-300);
	font-size: var(--text-sm);
	font-style: normal;
	margin: 0 0 1.125rem;
	padding: 0;
}

#reviews .review-author {
	color: var(--text-500);
	font-size: var(--text-xs);
	font-style: normal;
	font-weight: 600;
}

/* !- Already own Photo RAW
 *
 * The one band lifted off the dark ground. Its perk tiles sit on --bg-800 in
 * the shared rule above, which is this band's own background, so they step up
 * to --bg-700 here to stay readable as cards.
 */
#photo-raw {
	background: var(--bg-800);
	color: var(--text-300);
}

#photo-raw .perk-card {
	background: var(--bg-700);
}

#photo-raw .raw-version {
	color: var(--text-50);
	font-size: var(--text-xl);
	margin-bottom: 0.75rem;
}

/* !- Meet your coach */
#photo-raw .coach-block {
	margin-top: 3.75rem;
}

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

#photo-raw .coach-block p {
	color: var(--text-300);
	margin-bottom: 0;
}

#photo-raw .coach-video {
	border: 0;
	border-radius: var(--border-radius);
	overflow: hidden;
}

/* !- Buy boxes */
.buy .buy-box {
	background: linear-gradient(-40deg, var(--orange-transparent), var(--blue-transparent));
	border: 1px solid var(--orange-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(--orange-500), var(--blue-500));
	content: "";
	height: 0.25rem;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

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

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

/* The bundle tier. Its ribbon sits above the box rather than inside it, so the
   column turns into a flex column - .buy-box takes height:100% above, which
   would otherwise make it as tall as the column and push it past the ribbon -
   and the box's own top accent bar is dropped so the radius closes on the
   ribbon instead. */
.buy .buy-box-featured {
	display: flex;
	flex-direction: column;
}

.buy .buy-box-featured .buy-box {
	border-color: var(--orange-500);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	flex: 1 1 auto;
}

.buy .buy-box-featured .buy-box::before {
	content: none;
}

/* The ribbon's height is a token because the tiers without one have to reserve
   exactly it, or the three boxes start at three different heights. Setting the
   height here rather than letting padding find it is what makes the two
   agree. */
.buy {
	--ribbon-h: 2rem;
}

.buy .buy-box-ribbon {
	align-items: center;
	background: var(--orange-500);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	color: var(--bg-950);
	display: flex;
	/* flex: none or the column flex parent shrinks it below its set height and
	   the reserved space on the other two tiers no longer matches. */
	flex: none;
	font-size: var(--text-micro);
	font-weight: 700;
	height: var(--ribbon-h);
	justify-content: center;
	letter-spacing: 0.06em;
	margin-bottom: 0;
	padding: 0 0.75rem;
	text-align: center;
	text-transform: uppercase;
}

/* Only in a row that actually carries a ribbon - the upgrade personas render a
   single box with none, and would otherwise sit 2rem low for no reason. */
.buy .row:has(> .buy-box-featured) > .col:not(.buy-box-featured) {
	padding-top: var(--ribbon-h);
}

.buy .buy-box .buy-box-icon {
	height: 3.5rem;
	margin-bottom: 0.875rem;
	width: 3.5rem;
}

.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(--orange-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;
}

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

/* !- Latest news
 *
 * The shared #resources block from base.css. It has no background of its own
 * and its cards are --bg-800, so the band takes --bg-950 to sit a stop below
 * the FAQs above it and leave the cards reading as cards.
 */
#resources {
	background: var(--bg-950);
	color: var(--text-300);
}

/* base.css paints these blue for the shared block; Plus is orange. */
#resources .eyebrow {
	color: var(--orange-500);
}

/* !- Small screens */
@media (max-width: 575.98px) {
	#hero,
	#buy-hero,
	#what-is-plus,
	#perks,
	#reviews,
	#photo-raw,
	#buy {
		padding: 3rem 0;
	}

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